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

lyh

2025-06-27 f2ce587e752798a2a454e0f029069b4e82a41bc8

 src/views/flowable/workflow/outBoundOrder/OutBoundOrderHandle.vue

@@ -17,7 +17,7 @@
        <br>
        <br>
        <a-tag color="blue">
          处理人 {{ selectShenpiData.assignee }}
          处理人 {{ selectShenpiData.assignee_dictText }}
        </a-tag>
        <a-tag color="blue">
          创建时间 {{ selectShenpiData.createTime }}
@@ -37,7 +37,7 @@
          <a-spin :spinning="spinning">
            <a-tabs default-active-key='1' @change='callback'>
              <a-tab-pane key='1' tab='申请基本信息'>
                <a-form-model ref='form' :model='tableRowRecord' :rules='validatorRules'>
                <a-form-model ref='form' :model='tableRowRecord'>
                  <a-row>
                    <a-col :span='span'>
                      <a-form-model-item label='出库单编号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='outNum'>
@@ -53,7 +53,7 @@
                  <a-row>
                    <a-col :span='span'>
                      <a-form-model-item label='出库时间' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='outboundTime'>
                        <j-date :disabled="coldisabled" :show-time="true" dateFormat="YYYY-MM-DD HH:mm" v-model="tableRowRecord.outboundTime"/>
                        <j-date :disabled="coldisabled" v-model="tableRowRecord.outboundTime" :show-time="true" dateFormat="YYYY-MM-DD HH:mm" style="width: 100%"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span='span'>
@@ -65,7 +65,7 @@
                  <a-row>
                    <a-col :span='span'>
                      <a-form-model-item label='经手人' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='handler'>
                        <j-select-user-by-dep :disabled='coldisabled' v-model="tableRowRecord.handler" :store="'id'" :text="'realname'" :multi="false"/>
                        <a-input :disabled='coldisabled' v-model='tableRowRecord.handler_dictText'></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span='span'>
@@ -107,7 +107,7 @@
          </a-spin>
        </a-form>
      </div>
      <div>
      <div v-if="auditVisible">
        <hr class="shallow-hr">
        <br>
        <b>审批详情</b>
@@ -126,18 +126,33 @@
            </a-col>
            <a-col :span="24" class="btxx">
              <a-form-item label="审批状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag  type='list' v-model='assignFileStream.status' dictCode='dnc_assign_stream_status' placeholder="请选择审批状态"  />
                <a-select v-model='assignFileStream.status' placeholder="请选择审批结果">
                  <a-select-option value="3">通过</a-select-option>
                  <a-select-option value="4">驳回</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24" class="btxx">
              <a-form-model-item  label="审批意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea v-model="assignFileStream.approveContent" rows="4" placeholder="请输入审批意见"/>
                <a-textarea 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>
@@ -176,9 +191,9 @@
      hitaskDataSource:[],
      dataSource: [],
      bomForm: {},
      approveContent:"",
      imageSrc: null,
      drawerVisible: true,
      auditVisible: true,
      loading: false,
      labelCol: {
        xs: { span: 24 },
@@ -278,26 +293,6 @@
        }
      ],
      validatorRules: {
        version: {
          rules: [
            { required: true, message: '请输入文档版本!'},
          ]
        },
        applyUser: {
          rules: [
            { required: true, message: '请选择申请人!'},
          ]
        },
        approveContent: {
          rules: [
            { required: true, message: '请输入审批意见!'},
          ]
        },
        docName: {
          rules: [
            { required: true, message: '请输入文档名称!'},
          ]
        },
        status: {
          rules: [
            { required: true, message: '请选择审批状态!'},
@@ -313,14 +308,14 @@
      url: {
        queryOutBoundOrder: '/tms/outboundOrder/queryById',
        queryOutBoundDetailList: '/tms/outboundOrder/listOutboundDetailByMainId',
        queryBomDataById: '/nc/activit/selectVoById',
        diagramView: '/assign/flow/diagramView',
        queryHisTaskList:'/assign/flow/queryHisTaskList',
        approve:"/nc/activit/assign/file/approve",
        approve:"/tms/outboundOrder/approval",
      },
      dictOptions: {},
      superFieldList: [],
      workflowSource: []
      workflowSource: [],
      isSubmitting: false,
    }
  },
  created() {
@@ -330,6 +325,7 @@
    callback() {
    },
    handCancel() {
      this.assignFileStream = {}
      this.visible = false
    },
    clearTableSource() {
@@ -354,31 +350,49 @@
        alert('无法加载图片，请稍后再试。')
      }
    },
    handleQueXiaoTask(){
      this.visible = false
      this.routeReload()
    handleQueXiaoTask() {
      // 如果正在提交，阻止取消操作
      if (this.isSubmitting) return;
      this.visible = false;
      this.routeReload();
    },
    submitForm () {
      // 如果正在提交，阻止重复点击
      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;
      }
      if (!that.assignFileStream.approveContent==null || that.assignFileStream.approveContent===undefined) {
      if (!that.assignFileStream.approvalOpinion==null || that.assignFileStream.approvalOpinion===undefined) {
        this.$message.warning('请输入审批意见！')
        return false;
      }
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (err) {
          resetState(); // 验证失败，恢复状态
          return;
        }
        if (!err) {
          that.confirmLoading = true;
          let url=this.url.approve
          let method = 'post';
          let flowTaskVo = {}
          flowTaskVo.status=that.assignFileStream.status;
          flowTaskVo.approveContent =that.assignFileStream.approveContent;
          flowTaskVo.comment =that.assignFileStream.approveContent;
          flowTaskVo.secretLevel = that.assignFileStream.secretLevel;
          flowTaskVo.approvalOpinion =that.assignFileStream.approvalOpinion;
          flowTaskVo.comment =that.assignFileStream.approvalOpinion;
          flowTaskVo.dataId = this.selectShenpiData.dataId
          flowTaskVo.taskId = this.selectShenpiData.id
          flowTaskVo.userId = this.selectShenpiData.assignee
@@ -386,22 +400,26 @@
          flowTaskVo.targetKey = this.selectShenpiData.taskDefKey
          flowTaskVo.values = this.selectShenpiData.variables
          flowTaskVo.assignee = this.selectShenpiData.assignee
          flowTaskVo.secretLevel = that.assignFileStream.secretLevel;
          console.log("表单提交数据",flowTaskVo)
          httpAction(url,flowTaskVo,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.visible = false
              this.handCancel()
              //刷新表格
              that.$emit('searchReset')
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
            .catch((error) => {
              console.error(error);
              that.$message.error('提交失败');
            })
            .finally(() => {
              that.confirmLoading = false;
              resetState(); // 请求结束，恢复状态
            });
        }

      })
    },
    getAllApproveData(item) {
@@ -438,6 +456,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; /* 分界线的高度 */