feat(规则管理): 优化模板详情查看功能，支持切换模板和流程详情视图

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

@@ -13,7 +13,7 @@
         :model="addForm"
         :rules="rules"
         label-width="100px"
-        :disabled="type === 'details'"
+        :disabled="type === 'view'"
       >
         <el-form-item label="模板名称" prop="name">
           <el-input v-model.trim="addForm.name" placeholder="请输入模板名称" />
@@ -62,6 +62,7 @@
         :loading="saving"
         :disabled="saving"
         @click="submit"
+        v-if="type !== 'view'"
         >提 交</el-button
       >
       <el-button :disabled="saving" @click="handleClose">取 消</el-button>
@@ -131,7 +132,7 @@
         if (type === 'add') {
           this.title = '新建模板';
         } else {
-          this.title = '编辑模板';
+          this.title = type === 'view' ? '模板详情' : '编辑模板';
           this.getDetail(data.id);
         }
       },

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

@@ -7,84 +7,77 @@
     resizable
     maxable
   >
-    <div v-loading="loading || saving">
+    <div class="switch" v-if="type == 'view'">
+      <div class="switch_left">
+        <ul>
+          <li
+            v-for="item in tabOptions"
+            :key="item.key"
+            :class="{ active: activeComp == item.key }"
+            @click="activeComp = item.key"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-show="activeComp == 'main'">
       <div v-html="addForm.valueJson?.template"></div>
     </div>
-
+    <bpmDetail
+      v-if="activeComp == 'bpm' && addForm.processInstanceId"
+      :id="addForm.processInstanceId"
+    ></bpmDetail>
     <template v-slot:footer>
-      <!-- <el-button
-        type="primary"
-        :loading="saving"
-        :disabled="saving"
-        @click="submit"
-        >提 交</el-button
-      > -->
-      <el-button :disabled="saving" @click="handleClose">取 消</el-button>
+      <el-button @click="handleClose">取 消</el-button>
     </template>
   </ele-modal>
 </template>
 
 <script>
+  import bpmDetail from '@/views/bpm/processInstance/businessDetail.vue';
+
   import dictMixins from '@/mixins/dictMixins';
   import {
     getQmsReportTemplateById,
     updateQmsReportTemplate,
     saveQmsReportTemplate
   } from '@/api/qmsreporttemplate/index';
-
+  const formBaseData = {
+    code: '',
+    id: null,
+    isEnabled: 0,
+    name: '',
+    remark: '',
+    type: 0,
+    isDefault: 0, // 是否启用(1:默认；0：否)
+    valueJson: '' // 模板内容
+  };
   export default {
     mixins: [dictMixins],
     data() {
-      const formBaseData = {
-        code: '',
-        id: null,
-        isEnabled: 0,
-        name: '',
-        remark: '',
-        type: 0,
-        isDefault: 0,  // 是否启用(1:默认；0：否)
-        valueJson: ''  // 模板内容
-      };
-
       return {
+        activeComp: 'main',
+        tabOptions: [
+          { key: 'main', name: '模板详情' },
+          { key: 'bpm', name: '流程详情' }
+        ],
         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' }
-          ]
-        }
+        loading: false
       };
     },
+    components: { bpmDetail },
     methods: {
       // 打开弹窗
       open(type, data) {
         this.type = type;
         this.visible = true;
+        this.activeComp = 'main';
 
-        if (type === 'add') {
-          this.title = '新建模板';
-        } else {
-          this.title = '预览模板';
-          this.getDetail(data.id);
-        }
+        this.title = '预览模板';
+        this.getDetail(data.id);
       },
       // 获取详情
       async getDetail(id) {
@@ -92,7 +85,7 @@
         try {
           const data = await getQmsReportTemplateById(id);
           console.log('data', data);
-          this.addForm = Object.assign({}, this.formBaseData, data || {});
+          this.addForm = Object.assign({}, formBaseData, data || {});
         } catch (e) {
           this.$message.error('获取模板详情失败');
         } finally {
@@ -100,7 +93,7 @@
         }
       },
       resetForm() {
-        this.addForm = JSON.parse(JSON.stringify(this.formBaseData));
+        this.addForm = JSON.parse(JSON.stringify(formBaseData));
         this.$nextTick(() => {
           this.$refs.formRef && this.$refs.formRef.clearValidate();
         });
@@ -109,29 +102,6 @@
       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;
-          }
-        });
       }
     }
   };

src/views/rulesManagement/inspectionReportTemplate/index.vue

@@ -19,6 +19,14 @@
             >新建</el-button
           >
         </template>
+        <template v-slot:code="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            @click="preview(row, 'view')"
+            >{{ row.code }}</el-link
+          >
+        </template>
         <template v-slot:action="{ row }">
           <el-link
             type="primary"
@@ -110,6 +118,7 @@
             prop: 'code',
             label: '模板编码',
             align: 'center',
+            slot: 'code',
             minWidth: 110,
             showOverflowTooltip: true
           },
@@ -229,8 +238,8 @@
       openEdit(type, data, isChange) {
         this.$refs.editRef.open(type, data, isChange);
       },
-      preview(row) {
-        this.$refs.previewRef.open('edit', row);
+      preview(row,type) {
+        this.$refs.previewRef.open(type, row);
       },
       async approvalSubmit(res) {
         this.processSubmitDialogFlag = true;