增加提交样式，新增批量处理dnc审签

lyh

2025-06-27 f2ce587e752798a2a454e0f029069b4e82a41bc8

 src/views/flowable/workflow/lossBound/lossBoundHandle.vue

@@ -36,13 +36,13 @@
                  <a-row>
                    <a-col :span="span">
                      <a-form-model-item label="报损单单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="outNum">
                        <a-input :disabled="coldisabled" v-model="tableRowRecord.orderCode"></a-input>
                        <a-input disabled v-model="tableRowRecord.orderCode"></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="span">
                      <a-form-model-item label="报损人" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                         prop="outStorehouseType">
                        <j-dict-select-tag :disabled="coldisabled"
                        <j-dict-select-tag disabled
                                           v-model="tableRowRecord.losser" dictCode="sys_user,realname,id"
                                           placeholder="请选择" />
                      </a-form-model-item>
@@ -52,28 +52,28 @@
                    <a-col :span="span">
                      <a-form-model-item label="报损时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                         prop="outboundTime">
                        <j-date :disabled="coldisabled" v-model="tableRowRecord.lossTime" :show-time="true"
                        <j-date disabled v-model="tableRowRecord.lossTime" :show-time="true"
                                dateFormat="YYYY-MM-DD HH:mm" style="width: 100%" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="span">
                      <a-form-model-item label="报损原因" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                         prop="subjectMatter">
                        <a-input :disabled="coldisabled" v-model="tableRowRecord.lossReason"></a-input>
                        <a-input disabled v-model="tableRowRecord.lossReason"></a-input>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col :span="span">
                      <a-form-model-item label="经手人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handler">
                        <j-dict-select-tag :disabled="coldisabled"
                        <j-dict-select-tag disabled
                                           v-model="tableRowRecord.handler" dictCode="sys_user,realname,id"
                                           placeholder="请选择" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="span">
                      <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                        <a-textarea :disabled="coldisabled" v-model="tableRowRecord.remark" rows="4" />
                        <a-textarea disabled v-model="tableRowRecord.remark" rows="4" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
@@ -119,17 +119,17 @@
          <a-row>
            <a-col ::span="span">
              <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handler_dictText">
                <a-input :disabled="coldisabled" v-model="tableRowRecord.handler_dictText"></a-input>
                <a-input :readOnly="inputReadOnly" v-model="tableRowRecord.handler_dictText"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col ::span="span">
              <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <a-input :disabled="coldisabled" v-model="tableRowRecord.createTime"></a-input>
                <a-input :readOnly="inputReadOnly" v-model="tableRowRecord.createTime"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" class="btxx">
              <a-form-item label="审批状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model="assignFileStream.status" placeholder="请选择审批结果">
                <a-select :disabled="disableSubmit" v-model="assignFileStream.status" placeholder="请选择审批结果">
                  <a-select-option value="3">通过</a-select-option>
                  <a-select-option value="4">驳回</a-select-option>
                </a-select>
@@ -137,13 +137,26 @@
            </a-col>
            <a-col :span="24" class="btxx">
              <a-form-model-item label="审批意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea v-model="assignFileStream.approvalOpinion" rows="4" placeholder="请输入审批意见" />
                <a-textarea :disabled="disableSubmit" v-model="assignFileStream.approvalOpinion" rows="4"
                            placeholder="请输入审批意见" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <div class="table-operator" style="text-align: right;">
            <a-button @click="handleQueXiaoTask" type="primary" icon="close">取消</a-button>
            <a-button @click="submitForm">提 交</a-button>
            <a-button
              @click="handleQueXiaoTask"
              icon="close"
              :disabled="isSubmitting"
              :class="{'disabled-btn': isSubmitting}"
            >取消</a-button>
            <a-button
              @click="submitForm"
              type="primary"
              :disabled="isSubmitting"
              :loading="isSubmitting"
            >
              提 交
            </a-button>
          </div>
        </a-form-model>
      </div>
@@ -174,7 +187,8 @@
      form: this.$form.createForm(this),
      span: 12,
      span1: 8,
      coldisabled: true,
      disableSubmit: false,
      inputReadOnly: true,
      spinning: false,
      tableRowRecord: {},
      assignFileStream: {},
@@ -294,15 +308,16 @@
      visible: false,
      // 表头
      url: {
        queryOutBoundOrder: '/tms/toolsLossBound/queryById',
        queryOutBoundDetailList: '/tms/toolsLossBound/listlossboundDetailByMainId',
        queryLossBoundOrder: '/tms/toolsLossBound/queryById',
        queryLossBoundDetailList: '/tms/toolsLossBound/listlossboundDetailByMainId',
        diagramView: '/assign/flow/diagramView',
        queryHisTaskList: '/assign/flow/queryHisTaskList',
        approve: '/tms/outboundOrder/approval'
        approve: '/tms/toolsLossBound/approval'
      },
      dictOptions: {},
      superFieldList: [],
      workflowSource: []
      workflowSource: [],
      isSubmitting: false,
    }
  },
  created() {
@@ -337,11 +352,27 @@
      }
    },
    handleQueXiaoTask() {
      this.visible = false
      this.routeReload()
      // 如果正在提交，阻止取消操作
      if (this.isSubmitting) return;
      this.visible = false;
      this.routeReload();
    },
    submitForm() {
      const that = this
      // 如果正在提交，阻止重复点击
      if (this.isSubmitting) return;

      // 开启全局禁选
      this.isSubmitting = true;
      document.body.classList.add('submitting');

      const that = this;

      // 定义一个恢复状态的函数
      const resetState = () => {
        that.isSubmitting = false;
        document.body.classList.remove('submitting');
      };

      if (!that.assignFileStream.status == null || that.assignFileStream.status === undefined) {
        this.$message.warning('请选择审批状态！')
        return false
@@ -352,6 +383,10 @@
      }
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (err) {
          resetState(); // 验证失败，恢复状态
          return;
        }
        if (!err) {
          that.confirmLoading = true
          let url = this.url.approve
@@ -377,13 +412,23 @@
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
            .catch((error) => {
              console.error(error);
              that.$message.error('提交失败');
            })
            .finally(() => {
              that.confirmLoading = false;
              resetState(); // 请求结束，恢复状态
            });
        }

      })
    },
    /**
     * 获取流程节点和流程图
     * @param record 待办记录信息
     */
    getAllApproveData(item) {
      this.visible = true
      this.loading = true
@@ -394,12 +439,12 @@
          this.hitaskDataSource = res.result
        }
      })
      getAction(this.url.queryOutBoundOrder, { id: item.dataId }).then((res => {
      getAction(this.url.queryLossBoundOrder, { id: item.dataId }).then((res => {
        if (res.success) {
          this.tableRowRecord = res.result
        }
      }))
      getAction(this.url.queryOutBoundDetailList, { lossBoundId: item.dataId }).then(res => {
      getAction(this.url.queryLossBoundDetailList, { lossBoundId: item.dataId }).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          if (res.result.total) {
@@ -418,6 +463,44 @@
}
</script>
<style scoped>
/* 全局禁选样式 - 作用于整个页面 */
html.submitting,
html.submitting body {
  pointer-events: none !important;
  cursor: wait !important;
}

/* 蒙层效果增强 */
html.submitting::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 9998;
}

/* 加载指示器 - 更明显的视觉反馈 */
html.submitting::after {
  content: '提交中...';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1890ff;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 9999;
}

/* 禁用状态按钮样式 */
.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed !important;
}
.shallow-hr {
  border: 0;
  height: 1px; /* 分界线的高度 */