合同管理

package.json

@@ -32,6 +32,7 @@
     "vue": "^3.3.4",
     "vue-demi": "^0.14.10",
     "vue-qrcode": "^2.2.2",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

src/views/user/contract-manage/index.vue

@@ -216,6 +216,60 @@
                 </div>
             </template>
         </el-dialog>
+
+         <!-- 新增和修改弹框 -->
+         <el-dialog
+         v-model="dialogVisibleSettleinEdit"
+         :title="settleinTitle"
+         width="40%"
+         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"
+             :rules="addAndEditFormRules"
+         >
+      <el-row style="font-weight:bold">
+        <el-col><span>资讯信息</span></el-col>
+        <el-divider></el-divider>
+      </el-row>
+      <el-row>
+        <el-col :span="14">
+          <el-form-item label="资讯标题" prop="xwbt">
+            <el-input v-model="dataForm.xwbt" placeholder="请输入资讯标题"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="副标题" prop="fbt">
+            <el-input v-model="dataForm.fbt" placeholder="请输入副标题"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="内容" prop="nr" >
+            <QuillEditor  v-model="dataForm.nr" class="editor" :options="editorOption"   />
+          </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
+                 >
+                 <el-button class="primary-lease" type="primary" @click="onSubmit()">
+                     提交
+                 </el-button>
+             </div>
+         </template>
+     </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -232,6 +286,12 @@ import { ref } from 'vue'
 import { useStore } from 'store/user'
 const store = useStore()
 import { mainStore } from 'store/main'
+// 引入富文本组件
+import QuillEditor  from 'vue-quill-editor'
+// 引入富文本组件样式
+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)
 
@@ -320,6 +380,7 @@ const addAndEditFormRef = ref()
 const settleinTitle = ref('')
 // 合同新增弹框显示隐藏
 const dialogVisibleSettlein: any = ref(false)
+const dialogVisibleSettleinEdit: any = ref(false)
 // 合同新增
 const addContract = () => {
      settleinTitle.value = '合同新建'
@@ -332,7 +393,7 @@ const onContract = (row: any) => {
     addAndEditForm.value.contractName = row.contractName
     console.log('2222',addAndEditForm.value.contractName)
     settleinTitle.value = '合同修改'
-    dialogVisibleSettlein.value = true
+    dialogVisibleSettleinEdit.value = true
 }
 
 const onDialogClose = () => {
@@ -400,6 +461,40 @@ const onCancel = () => {
     dialogVisibleSettlein.value = false
 }
 
+const myQuillEditor = ref()
+
+// 工具栏配置
+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: [] }], // 对齐方式
+])
+
+const editorOption = ref<any>({ // 编辑框操作事件
+        theme: 'snow', // or 'bubble'
+        placeholder: '请输入资讯内容...',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+          }
+        }
+    })
+const  dataForm = ref<any>( {
+        id: '',
+        xwbt: '',
+        fbt: '',
+        nr: '222222',
+        flag: '',
+      })
 onMounted(() => {
     getContractListData()
     // getEquipmentTypeApi().then((res: any) => {