wms_vue/src/view/wms/warehouse/track/modal/edit.vue

140 lines
3.6 KiB
Vue

<template>
<a-modal :open="visible" title="编辑通道" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
<a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item ref="trackCode" label="通道号" name="trackCode">
<a-input v-model:value="formState.trackCode" placeholder="请输入通道号" />
</a-form-item>
<a-form-item ref="sourceLoc" label="WMS源地址" name="sourceLoc">
<a-input v-model:value="formState.sourceLoc" placeholder="请输入WMS源地址" />
</a-form-item>
<a-form-item ref="targetLoc" label="WMS目标地址" name="targetLoc">
<a-input v-model:value="formState.targetLoc" placeholder="请输入WMS目标地址" />
</a-form-item>
<a-form-item ref="equipCode" label="关键设备" name="equipCode">
<a-input v-model:value="formState.equipCode" placeholder="请输入关键设备" />
</a-form-item>
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script>
import {
message
} from '@hwork/ant-design-vue';
import {
edit
} from "@/api/wms/track";
import {
defineComponent,
reactive,
ref,
toRaw,
watch
} from "vue";
export default defineComponent({
props: {
visible: {
type: Boolean,
},
record: {
type: Object,
}
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formState = reactive({});
watch(props, (props) => {
formState.id = props.record.id
formState.trackCode = props.record.trackCode;
formState.sourceLoc = props.record.sourceLoc;
formState.targetLoc = props.record.targetLoc;
formState.equipCode = props.record.equipCode;
formState.equipStatus = props.record.equipStatus;
formState.remark = props.record.remark;
})
const formRules = {
trackCode: [{
required: true,
message: '请输入通道号(必填)',
trigger: 'blur'
}],
};
const editKey = "add";
const equipStatus = ref([{
value: 'true',
label: '正常',
},
{
value: 'false',
label: '故障',
},
]);
const submit = (e) => {
formRef.value
.validate()
.then(() => {
message.loading({
content: '提交中...',
key: editKey
});
edit(toRaw(formState)).then((response) => {
if (response.success) {
message.success({
content: '保存成功',
key: editKey,
duration: 1
}).then(() => {
cancel();
});
} else {
message.error({
content: response.msg,
key: editKey,
duration: 1
}).then(() => {
// cancel();
});
}
});
})
.catch(error => {
console.log('error', error);
});
};
const cancel = (e) => {
formRef.value.resetFields();
context.emit("close", false);
};
return {
submit,
cancel,
equipStatus,
formRef,
formState,
formRules,
labelCol: {
span: 8
},
wrapperCol: {
span: 12
},
};
},
});
</script>