feat(模板管理): 新增模板预览功能并完善模板编辑表单

src/views/rulesManagement/inspectionReportTemplate/components/edit.vue

@@ -19,7 +19,22 @@
           <el-input v-model.trim="addForm.name" placeholder="请输入模板名称" />
         </el-form-item>
         <el-form-item label="模板编码" prop="code">
-          <el-input v-model.trim="addForm.code" placeholder="请输入模板编码" />
+          <el-input v-model.trim="addForm.code" placeholder="请输入模板编码" :disabled="type !== 'add'" />
+        </el-form-item>
+        <el-form-item label="模板" prop="template">
+          <el-input
+            type="textarea"
+            :rows="2"
+            placeholder="请输入模板"
+            v-model="addForm.template">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="是否默认" prop="isDefault">
+          <el-switch
+            v-model="addForm.isDefault"
+            :active-value="1"
+            :inactive-value="0"
+          />
         </el-form-item>
         <el-form-item label="是否启用" prop="isEnabled">
           <el-switch
@@ -71,7 +86,10 @@
         isEnabled: 0,
         name: '',
         remark: '',
-        type: 0
+        type: 0,
+        isDefault: 0,  // 是否启用(1:默认；0：否)
+        valueJson: {},  // 模板内容
+        template: ''
       };
 
       return {
@@ -82,6 +100,7 @@
         addForm: JSON.parse(JSON.stringify(formBaseData)),
         loading: false,
         saving: false,
+        template: '',
         rules: {
           name: [
             { required: true, message: '请输入模板名称', trigger: 'blur' }
@@ -121,6 +140,7 @@
           const data = await getQmsReportTemplateById(id);
           console.log('data', data);
           this.addForm = Object.assign({}, this.formBaseData, data || {});
+          this.addForm.template = this.addForm.valueJson.template;
         } catch (e) {
           this.$message.error('获取模板详情失败');
         } finally {
@@ -145,6 +165,10 @@
           this.saving = true;
           try {
             const payload = { ...this.addForm };
+            payload.valueJson = {
+              template: this.addForm.template
+            }
+            console.log('payload', payload);
             let res;
             if (this.type === 'add') {
               res = await saveQmsReportTemplate(payload);

src/views/rulesManagement/inspectionReportTemplate/components/preview.vue

@@ -0,0 +1,150 @@
+<template>
+  <ele-modal
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    resizable
+    maxable
+  >
+    <div v-loading="loading || saving">
+      <div v-html="addForm.valueJson?.template"></div>
+    </div>
+
+    <template v-slot:footer>
+      <!-- <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving"
+        @click="submit"
+        >提 交</el-button
+      > -->
+      <el-button :disabled="saving" @click="handleClose">取 消</el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import {
+    getQmsReportTemplateById,
+    updateQmsReportTemplate,
+    saveQmsReportTemplate
+  } from '@/api/qmsreporttemplate/index';
+
+  export default {
+    mixins: [dictMixins],
+    data() {
+      const formBaseData = {
+        code: '',
+        id: null,
+        isEnabled: 0,
+        name: '',
+        remark: '',
+        type: 0,
+        isDefault: 0,  // 是否启用(1:默认；0：否)
+        valueJson: ''  // 模板内容
+      };
+
+      return {
+        visible: false,
+        type: 'add',
+        title: '表单弹窗',
+        formBaseData,
+        addForm: JSON.parse(JSON.stringify(formBaseData)),
+        loading: false,
+        saving: false,
+        rules: {
+          name: [
+            { required: true, message: '请输入模板名称', trigger: 'blur' }
+          ],
+          code: [
+            { required: true, message: '请输入模板编码', trigger: 'blur' },
+            {
+              min: 1,
+              max: 50,
+              message: '长度在 1 到 50 个字符',
+              trigger: 'blur'
+            }
+          ],
+          remark: [
+            { max: 200, message: '备注最多 200 个字符', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      // 打开弹窗
+      open(type, data) {
+        this.type = type;
+        this.visible = true;
+
+        if (type === 'add') {
+          this.title = '新建模板';
+        } else {
+          this.title = '预览模板';
+          this.getDetail(data.id);
+        }
+      },
+      // 获取详情
+      async getDetail(id) {
+        this.loading = true;
+        try {
+          const data = await getQmsReportTemplateById(id);
+          console.log('data', data);
+          this.addForm = Object.assign({}, this.formBaseData, data || {});
+        } catch (e) {
+          this.$message.error('获取模板详情失败');
+        } finally {
+          this.loading = false;
+        }
+      },
+      resetForm() {
+        this.addForm = JSON.parse(JSON.stringify(this.formBaseData));
+        this.$nextTick(() => {
+          this.$refs.formRef && this.$refs.formRef.clearValidate();
+        });
+      },
+      // 关闭时清理表单
+      handleClose() {
+        this.visible = false;
+        this.resetForm();
+      },
+      // 提交
+      submit() {
+        this.$refs.formRef.validate(async (valid) => {
+          if (!valid) return;
+          this.saving = true;
+          try {
+            const payload = { ...this.addForm };
+            let res;
+            if (this.type === 'add') {
+              res = await saveQmsReportTemplate(payload);
+            } else {
+              res = await updateQmsReportTemplate(payload);
+            }
+            this.$message.success('保存成功');
+            this.$emit('reload');
+            this.handleClose();
+          } catch (e) {
+            this.$message.error(e?.message || '保存失败');
+          } finally {
+            this.saving = false;
+          }
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-form) {
+    .el-form-item:last-child {
+      margin-bottom: 22px !important;
+    }
+  }
+  :deep(.el-row) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>

src/views/rulesManagement/inspectionReportTemplate/index.vue

@@ -28,6 +28,22 @@
           >
             编辑
           </el-link>
+          <!-- <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openEdit('edit', row)"
+          >
+            发布模板
+          </el-link> -->
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="preview(row)"
+          >
+            预览
+          </el-link>
           <el-popconfirm
             class="ele-action"
             title="确定要删除此条数据吗？"
@@ -44,6 +60,7 @@
     </el-card>
 
     <edit ref="editRef" @reload="reload"></edit>
+    <preview ref="previewRef" @reload="reload"></preview>
   </div>
 </template>
 
@@ -55,10 +72,11 @@
     deleteQmsReportTemplate
   } from '@/api/qmsreporttemplate/index';
   import edit from './components/edit.vue';
+  import preview from './components/preview.vue';
 
   export default {
     mixins: [dictMixins, tableColumnsMixin],
-    components: { edit },
+    components: { edit, preview },
     data() {
       return {
         columns: [
@@ -110,7 +128,7 @@
           {
             columnKey: 'action',
             label: '操作',
-            width: 220,
+            width: 280,
             align: 'center',
             resizable: false,
             fixed: 'right',
@@ -168,6 +186,9 @@
       },
       openEdit(type, data) {
         this.$refs.editRef.open(type, data);
+      },
+      preview(row) {
+        this.$refs.previewRef.open('edit', row);
       }
     }
   };