From 6ade0284641cbcf15bbfc6ca7f2cc6fe44be3c85 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 17 Dec 2024 18:56:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                          |   8 +-
 env/.env.dev                             |   4 +-
 src/components/EditorModel/index.vue     | 239 ++++++++++++++
 src/views/user/contract-manage/index.vue | 397 ++++++++++++-----------
 4 files changed, 458 insertions(+), 190 deletions(-)
 create mode 100644 src/components/EditorModel/index.vue

diff --git a/components.d.ts b/components.d.ts
index cb2d9f6..9d0ffc3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/env/.env.dev b/env/.env.dev
index d3ffc20..ea5dbee 100644
--- a/env/.env.dev
+++ b/env/.env.dev
@@ -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'  # 牛 (个人中心 基础信息企业申请认证) 
diff --git a/src/components/EditorModel/index.vue b/src/components/EditorModel/index.vue
new file mode 100644
index 0000000..0e7889d
--- /dev/null
+++ b/src/components/EditorModel/index.vue
@@ -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>
diff --git a/src/views/user/contract-manage/index.vue b/src/views/user/contract-manage/index.vue
index ee4989b..85e6ba8 100644
--- a/src/views/user/contract-manage/index.vue
+++ b/src/views/user/contract-manage/index.vue
@@ -1,6 +1,7 @@
 <template>
-    <!-- 寻源需求 -->
-           <el-form
+    <div class="app-container-content">
+        <!-- 寻源需求 -->
+        <el-form
             :model="queryParams"
             ref="queryFormRef"
             :inline="true"
@@ -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>
@@ -65,37 +63,35 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-    </el-form>
+        </el-form>
 
-    <!-- 表格 -->
-    <el-table
-        :data="qualityLis"
-        show-overflow-tooltip
-        :header-cell-style="{
-            background: '#00a288',
-            color: '#fff',
-        }"
-    >
-        <el-table-column align="center" label="合同编码">
-            <template #default="{ row }">
-                <a
-                    style="color:blue; "
-                >
-                    {{ row.contractCode }}
-                </a>
-            </template>
-        </el-table-column>
-        <el-table-column align="center" prop="contractName" label="合同名称" />
-        <el-table-column align="center" prop="status" label="状态" >
-            <template #default="{ row }">
-            <el-switch
-                v-model="row.status"
-                :active-value="1"
-                :inactive-value="0"
-                @change="handleStatusChange(row)"
-            ></el-switch>
-            </template>
-        </el-table-column>
+        <!-- 表格 -->
+        <el-table
+            :data="qualityLis"
+            show-overflow-tooltip
+            :header-cell-style="{
+                background: '#00a288',
+                color: '#fff',
+            }"
+        >
+            <el-table-column align="center" label="合同编码">
+                <template #default="{ row }">
+                    <a style="color: blue">
+                        {{ row.contractCode }}
+                    </a>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="contractName" label="合同名称" />
+            <el-table-column align="center" prop="status" label="状态">
+                <template #default="{ row }">
+                    <el-switch
+                        v-model="row.status"
+                        :active-value="1"
+                        :inactive-value="0"
+                        @change="handleStatusChange(row)"
+                    ></el-switch>
+                </template>
+            </el-table-column>
             <!-- <el-table-column align="center" prop="qcTime" label="合同附件">
                 <template #default="{ row }">
                     <a
@@ -106,34 +102,26 @@
                     >
                 </template>
             </el-table-column> -->
-        <el-table-column align="center" prop="createTime" label="创建时间" />
-        <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>
-                <el-button
-                    size="small"
-                    type="danger"
-                    @click="onDelete(row.id, true)"
-                >
-                    删除
-                </el-button>
-            </template>
-        </el-table-column> 
-    </el-table>
+            <el-table-column align="center" prop="createTime" label="创建时间" />
+            <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>
+                    <el-button size="small" type="danger" @click="onDelete(row.id, true)">
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
 
-    <PagingComponent
-        @getList="getContractListData"
-        :pageSize="queryParams.pageSize"
-        :pageNumber="queryParams.pageNum"
-        :total="total"
-    />
+        <PagingComponent
+            @getList="getContractListData"
+            :pageSize="queryParams.pageSize"
+            :pageNumber="queryParams.pageNum"
+            :total="total"
+        />
 
         <!-- 新增和修改弹框 -->
         <el-dialog
@@ -176,11 +164,11 @@
                                 @change="handleSelectChange"
                             >
                                 <el-option
-                                :key="item.id"
-                                :value="item.id"
-                                :label="item.templateName"
-                                v-for="item in contractList"
-                            />
+                                    :key="item.id"
+                                    :value="item.id"
+                                    :label="item.templateName"
+                                    v-for="item in contractList"
+                                />
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -198,53 +186,66 @@
             </template>
         </el-dialog>
 
-         <!-- 新增和修改弹框 -->
-         <el-dialog
-         v-model="dialogVisibleSettleinEdit"
-         :title="settleinTitle"
-         width="50%"
-         height="50%"
-         destroy-on-close
-         class="centered-dialog"
-         :close-on-click-modal="false"
-         @close="onDialogClose"
-     >
-         <el-form
-             label-width="140px"
-             ref="addAndEditFormRef"
-             label-position="right"
-             :model="addAndEditForm"
-         >
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="合同模板名称" prop="contractName">
-            <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>
-          </el-form-item>
-        </el-col>
-      </el-row>
+        <!-- 新增和修改弹框 -->
+        <el-dialog
+            v-model="dialogVisibleSettleinEdit"
+            v-if="dialogVisibleSettleinEdit"
+            :title="settleinTitle"
+            width="80%"
+            destroy-on-close
+            :close-on-click-modal="false"
+            @close="onDialogClose_2"
+        >
+            <el-form
+                label-width="140px"
+                ref="addAndEditFormRef"
+                label-position="right"
+                :model="addAndEditForm"
+            >
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="合同模板名称" prop="contractName">
+                            <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> -->
 
-         </el-form>
-         <template #footer>
-             <div class="dialog-footer">
-                 <el-button type="primary" class="primary-lease" @click="onCancel"
-                     >取消</el-button
-                 >
-                 <el-button class="primary-lease" type="primary" @click="onSubmit()">
-                     提交
-                 </el-button>
-             </div>
-         </template>
-     </el-dialog>
+                            <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="dialogVisibleSettleinEdit = false"
+                        >取消</el-button
+                    >
+                    <el-button class="primary-lease" type="primary" @click="onSubmit()">
+                        提交
+                    </el-button>
+                </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, //新增
@@ -297,8 +300,8 @@ const queryParams: any = reactive({
 const addAndEditForm = ref<any>({
     id: '',
     contractName: '',
-    content:'',
-    contentId:'',
+    content: '',
+    contentId: '',
 })
 
 // 获取列表
@@ -324,10 +327,9 @@ const onReset = () => {
     getContractListData()
 }
 
-
 //状态选择
-const handleStatusChange = async(row:any)=>{
-    console.log('111111',row)
+const handleStatusChange = async (row: any) => {
+    console.log('111111', row)
     const id = row.id
     // if (row.status === 0) {
     //     // If the current row's status is turned on, disable switches for other rows
@@ -337,13 +339,13 @@ const handleStatusChange = async(row:any)=>{
     //       }
     //     });
     //   }
-    const res: any = await updateStatus({id,status:row.status})
-    if(res.code === 200){
+    const res: any = await updateStatus({ id, status: row.status })
+    if (res.code === 200) {
         ElMessage({
-            type:'success',
+            type: 'success',
             message: '状态修改成功',
         })
-      await  getContractListData()
+        await getContractListData()
     }
 }
 
@@ -352,41 +354,43 @@ const settleinTitle = ref('')
 // 合同新增弹框显示隐藏
 const dialogVisibleSettlein: any = ref(false)
 const dialogVisibleSettleinEdit: any = ref(false)
-const contractList:any = ref([])
+const contractList: any = ref([])
 // 合同新增
-const addContract = async() => {
-     settleinTitle.value = '合同新建'
-     contractList.value = []
-     const res: any = await getContractSelectList()
-     if(res.data.length>0 ){
-        res.data.forEach((item:any) => {
+const addContract = async () => {
+    settleinTitle.value = '合同新建'
+    contractList.value = []
+    const res: any = await getContractSelectList()
+    if (res.data.length > 0) {
+        res.data.forEach((item: any) => {
             contractList.value.push({
-                id:item.id,
-                templateName:item.templateName,
-                content:item.content,
+                id: item.id,
+                templateName: item.templateName,
+                content: item.content,
             })
-          });
-     }
-     dialogVisibleSettlein.value = true;
+        })
+    }
+    dialogVisibleSettlein.value = true
 }
 
-const handleSelectChange = (selectedId:number) => {
-    console.log('111111',selectedId)
+const handleSelectChange = (selectedId: number) => {
+    console.log('111111', selectedId)
     let selectedContract = ''
-    contractList.value.forEach((item:any) => {
+    contractList.value.forEach((item: any) => {
         if (item.id === selectedId) {
-            selectedContract = item.content;
+            selectedContract = item.content
         }
-    });
-    console.log('2222',selectedContract)
-    addAndEditForm.value.content = selectedContract;
+    })
+    console.log('2222', 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)
+    console.log('2222', addAndEditForm.value.content)
     settleinTitle.value = '合同修改'
     dialogVisibleSettleinEdit.value = true
 }
@@ -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,49 +459,50 @@ const myQuillEditor = ref()
 const toolbarStyle = {
     width: '100%', // 与编辑工具器一样的宽度
     height: '50px', // 固定高度
-};
+}
 
 // 工具栏配置
 const toolbarOptions = ref<any>([
-  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-  ['blockquote', 'code-block'], // 引用  代码块
-  [{ header: 1 }, { header: 2 }], // 1、2 级标题
-  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-  [{ indent: '-1' }, { indent: '+1' }], // 缩进
-//   [{'direction': 'rtl'}],                         // 文本方向
-  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
-  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-  [{ font: [] }], // 字体种类
-  [{ align: [] }], // 对齐方式
+    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+    ['blockquote', 'code-block'], // 引用  代码块
+    [{ header: 1 }, { header: 2 }], // 1、2 级标题
+    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+    [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+    [{ indent: '-1' }, { indent: '+1' }], // 缩进
+    //   [{'direction': 'rtl'}],                         // 文本方向
+    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+    [{ font: [] }], // 字体种类
+    [{ align: [] }], // 对齐方式
 ])
 
-const editorOption = ref<any>({ // 编辑框操作事件
-        theme: 'snow', // or 'bubble'
-         placeholder: '请输入资讯内容...',
-        modules: {
-          toolbar: {
+const editorOption = ref<any>({
+    // 编辑框操作事件
+    theme: 'snow', // or 'bubble'
+    placeholder: '请输入资讯内容...',
+    modules: {
+        toolbar: {
             container: toolbarOptions,
-          },
-        }
-    })
-const  dataForm = ref<any>( {
-        id: '',
-        xwbt: '',
-        fbt: '',
-        nr: '222222',
-        flag: '',
-      })
+        },
+    },
+})
+const dataForm = ref<any>({
+    id: '',
+    xwbt: '',
+    fbt: '',
+    nr: '222222',
+    flag: '',
+})
 
-const editorInstance = ref(null);
+const editorInstance = ref(null)
 const onEditorReady = (editor) => {
-  editorInstance.value = editor;
-  // 如果 addAndEditForm.content 已经有值，手动设置编辑器内容
-  if (addAndEditForm.content) {
-    editorInstance.value.setContents(addAndEditForm.content);
-  }
-};
+    editorInstance.value = editor
+    // 如果 addAndEditForm.content 已经有值，手动设置编辑器内容
+    if (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>