| | |
| | | <a-row> |
| | | <a-col :span="span"> |
| | | <a-form-model-item label="出库单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="outNum"> |
| | | <a-input :readOnly="inputReadOnly" v-model="tableRowRecord.outNum"></a-input> |
| | | <a-input disabled v-model="tableRowRecord.outNum"></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 :readOnly="inputReadOnly" type="list" |
| | | <j-dict-select-tag disabled type="list" |
| | | v-model="tableRowRecord.outStorehouseType" dictCode="out_storehouse_type" /> |
| | | </a-form-model-item> |
| | | </a-col> |
| | |
| | | <a-col :span="span"> |
| | | <a-form-model-item label="出库时间" :labelCol="labelCol" :wrapperCol="wrapperCol" |
| | | prop="outboundTime"> |
| | | <j-date :readOnly="inputReadOnly" v-model="tableRowRecord.outboundTime" :show-time="true" |
| | | <j-date disabled 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"> |
| | | <a-form-model-item label="领用事由" :labelCol="labelCol" :wrapperCol="wrapperCol" |
| | | prop="subjectMatter"> |
| | | <a-input :readOnly="inputReadOnly" v-model="tableRowRecord.subjectMatter"></a-input> |
| | | <a-input disabled v-model="tableRowRecord.subjectMatter"></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"> |
| | | <a-input :readOnly="inputReadOnly" v-model="tableRowRecord.handler_dictText"></a-input> |
| | | <a-input disabled 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="remark"> |
| | | <a-textarea :readOnly="inputReadOnly" v-model="tableRowRecord.remark" rows="4" /> |
| | | <a-textarea disabled v-model="tableRowRecord.remark" rows="4" /> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | </a-col> |
| | | </a-row> |
| | | <div class="table-operator" style="text-align: right;"> |
| | | <a-button @click="handleQueXiaoTask" type="primary" icon="close">取消</a-button> |
| | | <a-button :disabled="disableSubmit" @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> |
| | |
| | | }, |
| | | dictOptions: {}, |
| | | superFieldList: [], |
| | | workflowSource: [] |
| | | workflowSource: [], |
| | | isSubmitting: false, |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | } |
| | | }, |
| | | 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 |
| | |
| | | } |
| | | // 触发表单验证 |
| | | this.form.validateFields((err, values) => { |
| | | if (err) { |
| | | resetState(); // 验证失败,恢复状态 |
| | | return; |
| | | } |
| | | if (!err) { |
| | | that.confirmLoading = true |
| | | let url = this.url.approve |
| | |
| | | } else { |
| | | that.$message.warning(res.message) |
| | | } |
| | | }).finally(() => { |
| | | that.confirmLoading = false |
| | | }) |
| | | .catch((error) => { |
| | | console.error(error); |
| | | that.$message.error('提交失败'); |
| | | }) |
| | | .finally(() => { |
| | | that.confirmLoading = false; |
| | | resetState(); // 请求结束,恢复状态 |
| | | }); |
| | | } |
| | | |
| | | }) |
| | | }, |
| | | /** |
| | |
| | | } |
| | | </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; /* 分界线的高度 */ |