Prechádzať zdrojové kódy

fix: 优化动态报表表单的查看模式交互

1. 给SpreadEditor组件添加formType参数,隐藏查看模式下的保存按钮
2. 动态表格列表页根据状态切换按钮文本和权限
3. 表单页所有输入项在查看模式下禁用,调整按钮显示逻辑
xuzhancheng 3 dní pred
rodič
commit
74c03c5082

+ 5 - 1
yudao-ui-admin-vue3/src/components/DynamicReport/SpreadEditor.vue

@@ -6,7 +6,7 @@
       <template #toolbar>
         <el-button type="warning" @click="handleConfig">模版配置</el-button>
         <el-button type="primary" @click="handlePreview">模版预览</el-button>
-        <el-button type="primary" @click="handleSave">保存</el-button>
+        <el-button type="primary" v-if="formType !== 'view'" @click="handleSave">保存</el-button>
         <el-button type="default" @click="handleCancel">取消</el-button>
 <!--        <el-switch v-model="autoCopy" active-text="复制模式" />-->
       </template>
@@ -124,6 +124,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
     required: false
+  },formType:{
+    type: String,
+    default: '',
+    required: false
   }
 });
 

+ 21 - 15
yudao-ui-admin-vue3/src/views/pressure2/dynamictb/DynamicTbForm.vue

@@ -12,40 +12,40 @@
         <div class="form-container">
           <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
           <el-form-item label="模板名字" prop="tbName">
-            <el-input v-model="formData.tbName" placeholder="请输入模板名字" />
+            <el-input v-model="formData.tbName" placeholder="请输入模板名字" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="模板编号" prop="tbCode">
-            <el-input v-model="formData.tbCode" placeholder="请输入模板编号" />
+            <el-input v-model="formData.tbCode" placeholder="请输入模板编号" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="模板分类" prop="tbType">
-            <el-select v-model="formData.tbType" placeholder="请选择模板分类">
+            <el-select v-model="formData.tbType" placeholder="请选择模板分类" :disabled="formType === 'view'">
               <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_TB_TYPE)" :key="dict.value"
                 :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="模板类型" prop="reportType">
-            <el-select v-model="formData.reportType" placeholder="请选择模板类型">
+            <el-select v-model="formData.reportType" placeholder="请选择模板类型" :disabled="formType === 'view'">
               <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_DYNAMIC_REPORT_TYPE)" :key="dict.value"
                          :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="项目分类" prop="pjType">
-            <el-select v-model="formData.pjType" placeholder="请选择项目分类">
+            <el-select v-model="formData.pjType" placeholder="请选择项目分类" :disabled="formType === 'view'">
               <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_DYNAMIC_PROJECT_TYPE)"
                 :key="dict.value" :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item v-if="false" label="模板地址" prop="tbUrl">
-            <el-input v-model="formData.tbUrl" placeholder="请输入模板地址" />
+            <el-input v-model="formData.tbUrl" placeholder="请输入模板地址" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="版本号" prop="versionNo">
-            <el-input v-model="formData.versionNo" placeholder="请输入版本号" />
+            <el-input v-model="formData.versionNo" placeholder="请输入版本号" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="模板说明" prop="tbNote">
-            <el-input v-model="formData.tbNote" type="textarea" placeholder="请输入模板说明" />
+            <el-input v-model="formData.tbNote" type="textarea" placeholder="请输入模板说明" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="创建人名" prop="creatorName">
-            <el-input v-model="formData.creatorName" placeholder="请输入创建人名" />
+            <el-input v-model="formData.creatorName" placeholder="请输入创建人名" :disabled="formType === 'view'" />
           </el-form-item>
           <el-form-item label="报告原件" prop="filePaths">
             <CustomUploadFile
@@ -53,6 +53,7 @@
               apiUrl="infra/file/upload"
               accept=".pdf,.jpg,.png,.doc,.wps,.docx,.DOC"
               list-type="text"
+              :disabled="formType === 'view'"
             />
           </el-form-item>
         </el-form>
@@ -60,12 +61,12 @@
       </el-tab-pane>
       <el-tab-pane label="模板文件" name="模板文件">
         <!--<SpreadView v-if="isSpredaShow" :dtParams="dtParams" :formData="formData" @success="getData" />-->
-        <SpreadEditor v-if="isSpredaShow" :dtParams="dtParams" :formData="formData" @success="getData" />
+        <SpreadEditor v-if="isSpredaShow" :formType="formType" :dtParams="dtParams" :formData="formData" @success="getData" />
       </el-tab-pane>
       <el-tab-pane label="模板pdf" name="模板pdf">
         <div class="default-toolbar">
-          <el-button type="primary" @click="handleOpenFileUploadModal">上传模板</el-button>
-          <el-button type="primary" @click="saveDocument">保存模板</el-button>
+          <el-button type="primary" @click="handleOpenFileUploadModal" :disabled="formType === 'view'">上传模板</el-button>
+          <el-button type="primary" @click="saveDocument" :disabled="formType === 'view'">保存模板</el-button>
         </div>
         <docEditor :config="officeConfig" @docReady="onDocumentReady" @docCreate="onCreateDoc" ref="officeEvents"/>
 
@@ -97,8 +98,8 @@
       </el-tab-pane>
     </el-tabs>
     <div class="unit-footer-btns">
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="handleClose">取 消</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="formType !== 'view'">确 定</el-button>
+      <el-button @click="handleClose">{{ formType === 'view' ? '关 闭' : '取 消' }}</el-button>
     </div>
     <FileUploadModal ref="fileUploadModalRef" @success="handleFileUploadSuccess" />
   </div>
@@ -131,7 +132,7 @@ const {getUser} = useUserStore()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
-const formType = ref('') // 表单的类型:create - 新增;update - 修改
+const formType = ref('') // 表单的类型:create - 新增;update - 修改;view - 查看
 const formData = ref({
   id: undefined,
   tbName: undefined,
@@ -502,6 +503,11 @@ open();
 /** 提交表单 */
 const emit = defineEmits(['success', 'update:visible']) // 定义 success 事件,用于操作成功后的回调
 const submitForm = async () => {
+  // view 模式下直接关闭
+  if (formType.value === 'view') {
+    handleClose()
+    return
+  }
   // 校验表单
   await formRef.value.validate()
   // 提交请求

+ 4 - 5
yudao-ui-admin-vue3/src/views/pressure2/dynamictb/index.vue

@@ -164,14 +164,13 @@
           <el-button
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
-            :disabled="scope.row.status == 200"
+            @click="openForm(scope.row.status == 200 ? 'view' : 'update', scope.row.id)"
           >
-            编辑
+            {{ scope.row.status == 200 ? '查看' : '编辑' }}
           </el-button>
           <router-link :to="'/cybggl/dynamic-tb-col/'+scope.row.id">
-            <!-- <el-button link type="primary" >数据</el-button> -->
-            <el-button link type="primary"  :disabled="scope.row.status == 200">数据</el-button>
+            <el-button link type="primary" >数据</el-button>
+            <!-- <el-button link type="primary"  :disabled="scope.row.status == 200">数据</el-button> -->
           </router-link>
           <el-button
             link