bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码优化

This commit is contained in:
BianLzhaoMin 2024-12-17 18:56:22 +08:00
parent 8480ef8734
commit 6ade028464
4 changed files with 458 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components.d.ts vendored
View File

@ -8,14 +8,12 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
EditorModel: typeof import('./src/components/EditorModel/index.vue')['default']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@ -25,6 +23,7 @@ declare module 'vue' {
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
@ -32,8 +31,7 @@ declare module 'vue' {
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']

4
env/.env.dev vendored
View File

@ -8,10 +8,10 @@ VITE_API_URL = '/proxyApi'
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
# VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
# VITE_proxyTarget = 'http://192.168.2.127:28080' # 梁超
VITE_proxyTarget = 'http://192.168.2.127:28080' # 梁超
# VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi' # 测试服务
# VITE_proxyTarget = 'http://192.168.0.244:28580' # 测试服务
VITE_proxyTarget = 'http://192.168.2.75:28080' # 盛旭
# VITE_proxyTarget = 'http://192.168.2.75:28080' # 盛旭
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
# VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证)

239
src/components/EditorModel/index.vue Normal file
View File

@ -0,0 +1,239 @@
<template>
<div style="height: 100%; overflow: hidden">
<editor v-model="myValue" :init="init" :enabled="enabled" :id="tinymceId"></editor>
</div>
</template>
<script setup>
import { computed, reactive, watch, ref, nextTick, onMounted } from 'vue' //全屏
import tinymce from 'tinymce/tinymce'
// import "tinymce/skins/content/default/content.css";
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/models/dom' // 一定要引入
import 'tinymce/themes/silver' // 界面UI主题
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 文字计数
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/emoticons' // emoji表情
import 'tinymce/plugins/emoticons/js/emojis.js' //必须引入这个文件才有表情图库
import 'tinymce/plugins/code' // 编辑源码
import 'tinymce/plugins/link' // 链接插件
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/codesample' //代码示例
import 'tinymce/plugins/autoresize' // 自动调整编辑器大小
import 'tinymce/plugins/quickbars' // 光标处快捷提示
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/searchreplace' //查找替换
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/directionality' //文字方向
import 'tinymce/plugins/visualblocks' //显示元素范围
import 'tinymce/plugins/visualchars' //显示不可见字符
import 'tinymce/plugins/charmap' // 特殊符号
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/insertdatetime' //插入日期时间
import 'tinymce/plugins/importcss' //引入自定义样式的css文件
import 'tinymce/plugins/accordion' // 可折叠数据手风琴模式
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/fullscreen'
const emits = defineEmits(['update:modelValue', 'setHtml'])
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
modelValue: {
type: String,
default: () => {
return ''
},
},
baseUrl: {
type: String,
default: '',
},
enabled: {
type: Boolean,
default: true,
},
// 编辑器初始可编辑状态
editable_root: {
type: Boolean,
default: true,
},
plugins: {
type: [String, Array],
default:
'importcss autoresize searchreplace autolink directionality code visualblocks visualchars fullscreen image link codesample table charmap nonbreaking anchor insertdatetime advlist lists wordcount charmap quickbars emoticons accordion',
},
knwlgId: {
type: String,
},
toolbar: {
type: [String, Array, Boolean],
default:
'undo redo | accordion accordionremove | blocks fontfamily fontsize| bold italic underline strikethrough ltr rtl | align numlist bullist | link image | table | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | anchor codesample',
},
readonly: {
type: Boolean,
default: false,
},
minHeight: {
type: Number,
default: 630,
},
})
const loading = ref(false)
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
//定义一个对象 init初始化
const init = reactive({
selector: '#' + tinymceId.value, //富文本编辑器的id,
language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
editable_root: props.editable_root,
height: 600,
branding: false, // 是否禁用“Powered by TinyMCE”
promotion: false, //去掉 upgrade
// toolbar_sticky: true,
// toolbar_sticky_offset: 100,
menubar: 'edit view insert format tools table',
paste_data_images: true, //允许粘贴图像
image_dimensions: false, //去除宽高属性
plugins: props.plugins, //这里的数据是在props里面就定义好了的
toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
// 取消图片资源路径转换
convert_urls: false,
// table边框位0是否展示网格线
// visual: false,
// 超链接默认打开方式
link_default_target: '_blank',
link_context_toolbar: true,
// 默认快捷菜单
quickbars_insert_toolbar: 'image codesample table',
// 选中图片的快捷提示
quickbars_image_toolbar:
'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
// 文字样式
font_family_formats:
'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
font_size_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
image_caption: true,
editimage_cors_hosts: ['picsum.photos'],
noneditable_class: 'mceNonEditable',
toolbar_mode: 'wrap', // 工具栏模式 floating / sliding / scrolling / wrap
// 默认样式
content_style:
'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }p {margin:3px; line-height:24px;}',
image_advtab: true,
importcss_append: true,
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false,
file_picker_types: 'file',
// 选中文字的快捷提示
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
// 编辑器高度自适应
autoresize_bottom_margin: 20,
// autoresize_overflow_padding: 16,
min_height: props.minHeight,
content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
// setup: function (editor) {
// },
//图片上传 -实列 具体请根据官网补充-
images_upload_handler: function (blobInfo, progress) {
new Promise((resolve, reject) => {
let file = blobInfo.blob()
if (file.size / 1024 / 1024 > 200) {
reject({
message: '上传失败，图片大小请控制在 200M 以内',
remove: true,
})
}
const formData = new FormData()
formData.append('file', file)
console.log(formData)
axios
.post('/api/upload/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: (progressEvent) => {
progress(Math.round((progressEvent.loaded / progressEvent.total) * 100))
},
})
.then((res) => {
resolve(res.data.url)
})
.catch()
})
},
})
// 外部传递进来的数据变化
const myValue = computed({
get() {
return props.modelValue
},
set(val) {
emits('update:modelValue', val)
},
})
//监听富文本中的数据变化
watch(
() => myValue.value,
() => {
emits('setHtml', tinymce.activeEditor.getContent({ format: 'text' }), myValue.value)
},
)
// 设置编辑器只读模式
watch(
() => props.readonly,
(newValue, oldValue) => {
nextTick(() => {
tinymce.activeEditor.mode.set(newValue ? 'readonly' : 'design')
let iframeDom = document.querySelector('iframe')
iframeDom &&
(iframeDom.contentWindow.document.body.style.margin = newValue ? 0 : '16px')
})
},
{ immediate: true },
)
//初始化编辑器
onMounted(() => {
tinymce.init({})
})
// 设置值
const handleSetContent = (content) => {
tinymce.activeEditor.setContent(content)
}
// 获取值
const handleGetContent = () => {
return tinymce.activeEditor.getContent()
}
defineExpose({
handleSetContent,
handleGetContent,
})
</script>
<style lang="scss" scoped>
:deep(.tox-tinymce) {
border: 1px solid #dcdfe6;
border-radius: 4px;
.tox-statusbar {
display: none;
}
}
</style>

121
src/views/user/contract-manage/index.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="app-container-content">
<!-- 寻源需求 -->
<el-form
:model="queryParams"
@ -47,10 +48,7 @@
<el-button class="primary-lease" type="primary" @click="getContractListData"
>查询</el-button
>
<el-button
class="primary-lease"
type="primary"
@click="onReset"
<el-button class="primary-lease" type="primary" @click="onReset"
>重置</el-button
>
</el-form-item>
@ -78,9 +76,7 @@
>
<el-table-column align="center" label="合同编码">
<template #default="{ row }">
<a
style="color:blue; "
>
<a style="color: blue">
{{ row.contractCode }}
</a>
</template>
@ -110,18 +106,10 @@
<el-table-column align="center" prop="updateTime" label="更新时间" />
<el-table-column align="center" label="操作" :width="220">
<template #default="{ row }">
<el-button
size="small"
type="primary"
@click="onContract(row, false)"
>
<el-button size="small" type="primary" @click="onContract(row, false)">
编辑
</el-button>
<el-button
size="small"
type="danger"
@click="onDelete(row.id, true)"
>
<el-button size="small" type="danger" @click="onDelete(row.id, true)">
删除
</el-button>
</template>
@ -201,13 +189,12 @@
<!-- 新增和修改弹框 -->
<el-dialog
v-model="dialogVisibleSettleinEdit"
v-if="dialogVisibleSettleinEdit"
:title="settleinTitle"
width="50%"
height="50%"
width="80%"
destroy-on-close
class="centered-dialog"
:close-on-click-modal="false"
@close="onDialogClose"
@close="onDialogClose_2"
>
<el-form
label-width="140px"
@ -218,22 +205,34 @@
<el-row>
<el-col :span="12">
<el-form-item label="合同模板名称" prop="contractName">
<el-input v-model="addAndEditForm.contractName" placeholder="请输入合同模板名称"></el-input>
<el-input
v-model="addAndEditForm.contractName"
placeholder="请输入合同模板名称"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="内容" prop="content">
<QuillEditor v-model="addAndEditForm.content" class="editor" :options="editorOption" @ready="onEditorReady($event)"></QuillEditor>
<!-- <QuillEditor
v-model="addAndEditForm.content"
class="editor"
:options="editorOption"
@ready="onEditorReady($event)"
></QuillEditor> -->
<EditorModel v-model:modelValue="addAndEditForm.content" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="primary-lease" @click="onCancel"
<el-button
type="primary"
class="primary-lease"
@click="dialogVisibleSettleinEdit = false"
>取消</el-button
>
<el-button class="primary-lease" type="primary" @click="onSubmit()">
@ -242,9 +241,11 @@
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import EditorModel from 'components/EditorModel/index.vue'
import TableComponent from 'components/TableComponent/index.vue'
import FormComponent from 'components/FormComponent/index.vue'
import PagingComponent from 'components/PagingComponent/index.vue'
@ -259,10 +260,10 @@ import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
// 引入富文本组件
import { QuillEditor } from '@vueup/vue-quill';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const store2 = mainStore()
const isViewForm = ref(false)
@ -273,6 +274,8 @@ const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
const qualityLis = ref<any>([])
const queryFormRef = ref<any>(null)
const modelValue = ref<any>('')
import {
getContractListApi, //列表
addContractApi, //新增
@ -324,7 +327,6 @@ const onReset = () => {
getContractListData()
}
//状态选择
const handleStatusChange = async (row: any) => {
console.log('111111', row)
@ -365,9 +367,9 @@ const addContract = async() => {
templateName: item.templateName,
content: item.content,
})
});
})
}
dialogVisibleSettlein.value = true;
dialogVisibleSettlein.value = true
}
const handleSelectChange = (selectedId: number) => {
@ -375,16 +377,18 @@ const handleSelectChange = (selectedId:number) => {
let selectedContract = ''
contractList.value.forEach((item: any) => {
if (item.id === selectedId) {
selectedContract = item.content;
selectedContract = item.content
}
});
})
console.log('2222', selectedContract)
addAndEditForm.value.content = selectedContract;
addAndEditForm.value.content = selectedContract
}
// 合同编辑
const onContract = (row: any) => {
console.log(row, '详情')
addAndEditForm.value.id = row.id
addAndEditForm.value.contractName = row.contractName
// modelValue.value = row.content
addAndEditForm.value.content = row.content
console.log('2222', addAndEditForm.value.content)
settleinTitle.value = '合同修改'
@ -400,6 +404,7 @@ const onDialogClose = () => {
addAndEditForm.value.contractName = ''
}
const onDialogClose_2 = () => {}
const addAndEditFormRules = reactive({
contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
@ -408,9 +413,14 @@ const addAndEditFormRules = reactive({
// 提交
const onSubmit = () => {
console.log('sad',addAndEditForm.value)
addAndEditFormRef.value.validate(async (valid: any) => {
if (valid) {
addAndEditForm.value.content = addAndEditForm.value.content.replace(/&nbsp;/gi, '\xa0')
addAndEditForm.value.content = addAndEditForm.value.content.replace(/\$/g, '&#36')
addAndEditForm.value.content = addAndEditForm.value.content
.replace(/<p>/gi, '<el-row>')
.replace(/<\/p>/gi, '</el-row>')
const SEN_API = settleinTitle.value === '合同修改' ? editContractApi : addContractApi
const res: any = await SEN_API(addAndEditForm.value)
if (res.code === 200) {
@ -418,7 +428,8 @@ const onSubmit = () => {
type: 'success',
message: '提交成功',
})
dialogVisibleSettlein.value = false
// dialogVisibleSettlein.value = false
dialogVisibleSettleinEdit.value = false
getContractListData()
}
}
@ -437,7 +448,6 @@ const onDelete = async (id: any) => {
}
}
// 取消按钮
const onCancel = () => {
dialogVisibleSettlein.value = false
@ -449,7 +459,7 @@ const myQuillEditor = ref()
const toolbarStyle = {
width: '100%', // 与编辑工具器一样的宽度
height: '50px', // 固定高度
};
}
// 工具栏配置
const toolbarOptions = ref<any>([
@ -467,14 +477,15 @@ const toolbarOptions = ref<any>([
[{ align: [] }], // 对齐方式
])
const editorOption = ref<any>({ // 编辑框操作事件
const editorOption = ref<any>({
// 编辑框操作事件
theme: 'snow', // or 'bubble'
placeholder: '请输入资讯内容...',
modules: {
toolbar: {
container: toolbarOptions,
},
}
},
})
const dataForm = ref<any>({
id: '',
@ -484,14 +495,14 @@ const dataForm = ref<any>( {
flag: '',
})
const editorInstance = ref(null);
const editorInstance = ref(null)
const onEditorReady = (editor) => {
editorInstance.value = editor;
editorInstance.value = editor
// 如果 addAndEditForm.content 已经有值，手动设置编辑器内容
if (addAndEditForm.content) {
editorInstance.value.setContents(addAndEditForm.content);
editorInstance.value.setContents(addAndEditForm.content)
}
}
};
onMounted(() => {
getContractListData()
// getEquipmentTypeApi().then((res: any) => {
@ -558,4 +569,24 @@ onMounted(() => {
visibility: visible;
}
}
.app-container-content {
:deep(.el-dialog) {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-height: 100vh !important;
.el-dialog__body {
flex: 1;
overflow-y: scroll !important;
}
.dialog-content {
padding: 20px;
}
}
}
</style>