njzscloud-dispose-web/src/pages/order/trans-order/OutForm.vue

114 lines
3.7 KiB
Vue

<template>
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
<ElForm :model="formData" :rules="rules" ref="transForm" class="form-panel" label-width="auto">
<ElFormItem label="磅重" prop="weight">
<ElInput v-model="formData.weight" type="number" :disabled="status === 'view'" placeholder="请输入磅重">
<template #append>吨</template>
</ElInput>
</ElFormItem>
<ElFormItem label="车头照" prop="cargoPhoto">
<Uploader v-model:file="formData.cargoPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
</ElFormItem>
<ElFormItem label="车斗照" prop="bodyPhoto">
<Uploader v-model:file="formData.bodyPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
<span style="font-size: 50px; padding: 0 40px">+</span>
</Uploader>
</ElFormItem>
</ElForm>
<template #footer>
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
</template>
</ElDialog>
</template>
<script lang="ts" setup>
import TransApi from "@/pages/order/trans-order/trans-api.ts";
import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Uploader from "@/components/uploader/Uploader.vue";
const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");
const transFormIns = useTemplateRef<FormInstance>("transForm");
const formData = Utils.resetAble(
reactive<TransTypes.InOutResult>({
weight: 0,
})
);
const rules = reactive<FormRules<TransTypes.InOutResult>>({
orderTransId: [{ required: true, message: "请填写Id", trigger: "blur" }],
cargoPhoto: [{ required: true, message: "请上传车头照", trigger: "blur" }],
bodyPhoto: [{ required: true, message: "请上传车尾照", trigger: "blur" }],
weight: [{ required: true, message: "请输入磅重", trigger: "blur" }],
});
function dialogCloseHandler() {
formData.$reset();
}
function submitHandler() {
if (status.value === "view") return;
submiting.value = true;
FormUtil.submit(transFormIns, () => {
let data = Object.assign({}, formData);
data.weight = data.weight * 1000;
return TransApi.leaving(data);
})
.then(() => {
ElMessage.success("出场成功");
emits("editSucc");
showDialog.value = false;
})
.finally(() => {
submiting.value = false;
});
// if (formData.id != null) {
// FormUtil.submit(transFormIns, () => TransApi.modify(formData))
// .then(() => {
// ElMessage.success("修改成功");
// emits("editSucc");
// showDialog.value = false;
// })
// .finally(() => {
// submiting.value = false;
// });
// } else {
// FormUtil.submit(transFormIns, () => TransApi.add(formData))
// .then(() => {
// ElMessage.success("添加成功");
// emits("editSucc");
// showDialog.value = false;
// })
// .finally(() => {
// submiting.value = false;
// });
// }
}
defineExpose({
open(data: TransTypes.SearchTransResult = {}) {
formData.orderTransId = data.id;
showDialog.value = true;
},
});
</script>
<style lang="stylus" scoped>
.form-panel {
padding 20px
}
</style>