Просмотр исходного кода

feat: 显式绑定按钮禁用状态,确保查看态表单中的附件按钮可点击

xieyong 2 дней назад
Родитель
Сommit
80bb374b4f

+ 33 - 0
src/components/addDoc/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div>
     <el-badge :value="value.length" class="item">
+      <!--
+        disabled 必须显式绑定:element-ui 的 el-button 在未显式传 disabled 时会继承祖先 el-form 的
+        disabled 状态,导致表单整体禁用(如作业票查看态)时「查看」按钮点不动
+      -->
       <el-button
         icon="el-icon-plus"
         v-if="type != 'view'"
         type="primary"
+        :disabled="disabled"
         @click="handleUpload"
         :size="size"
       >
@@ -14,7 +19,9 @@
         icon="el-icon-view"
         v-else
         type="primary"
+        :disabled="disabled"
         @click="handleUpload"
+        :size="size"
       >
         查看</el-button
       >
@@ -48,6 +55,11 @@
       size: {
         type: String,
         default: 'mini'
+      },
+      // 按钮是否禁用:由组件自身控制,不受祖先 el-form 的 disabled 影响
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -55,6 +67,27 @@
         selectVal: ''
       };
     },
+    inject: {
+      // 祖先 el-form(可能处于 disabled 状态),仅用于取 size/type 传给子组件
+      elForm: {
+        default: ''
+      }
+    },
+    provide() {
+      // 覆盖祖先 el-form 的 disabled:
+      // element-ui 的 el-input / el-select / el-button 都会继承 elForm.disabled,
+      // 祖先表单禁用(如作业票查看态)时,附件弹框内的控件会全部不可操作,
+      // 导致「查看」按钮点不动、弹框里的「取消」按钮也关不掉。
+      // provide/inject 走的是组件树,弹框即使 append-to-body 也仍受祖先表单影响,所以在这里覆盖。
+      const form = this.elForm || {};
+      return {
+        elForm: {
+          disabled: false,
+          size: form.size,
+          type: form.type
+        }
+      };
+    },
     watch: {
       value: {
         handler(newVal) {

+ 2 - 0
src/views/DangerousWorkList/components/workTicketForm.vue

@@ -129,9 +129,11 @@
                 />
                 <!-- 附件上传(项目通用 fileMain 组件,值为文件 id 数组) -->
                 <div v-else-if="field.type === 'file'" class="field-upload">
+                  <!-- disabled 显式传 false:查看态表单整体禁用,附件按钮仍可点击查看详情 -->
                   <file-main
                     :value="getFileValue(field)"
                     :type="isView ? 'view' : 'add'"
+                    :disabled="false"
                     @updateVal="onFileChange(field, $event)"
                   />
                 </div>