222 lines
9.1 KiB
Vue
222 lines
9.1 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="inOrderForm" class="form-panel" label-width="auto">
|
||
<!-- <ElFormItem label-width="90" label="编号" prop="sn">
|
||
<ElInput
|
||
v-model="formData.sn"
|
||
:disabled="status === 'view'"
|
||
placeholder="编号"/>
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="责任人" prop="responsibleId">
|
||
<!-- <ElInput
|
||
v-model="formData.responsibleId"
|
||
:disabled="status === 'view'"
|
||
placeholder="责任人"/> -->
|
||
<ASelect labelKey="nickname" :tableColumn="userColumn" v-model="formData.responsibleId" :api="UserApi.paging" :disabled="status === 'view'" placeholder="请选择负责人" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label-width="90" label="仓库" prop="warehouseId">
|
||
<!-- <ElInput
|
||
v-model="formData.warehouseId"
|
||
:disabled="status === 'view'"
|
||
placeholder="仓库"/> -->
|
||
<ASelect labelKey="warehouseName" v-model="formData.warehouseId" @change="warehouseChange" :tableColumn="warehouseColumn" :api="WarehouseApi.paging" :disabled="status === 'view'" placeholder="选择仓库" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="存放位置" prop="location">
|
||
<ElInput readonly v-model="formData.location" :disabled="status === 'view'" placeholder="存放位置" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="入库时间" prop="inTime">
|
||
<ElDatePicker v-model="formData.inTime" :disabled="status === 'view'" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择入库日期" />
|
||
<!-- <ElInput v-model="formData.inTime" :disabled="status === 'view'" placeholder="入库时间" /> -->
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="采购单" prop="orderId">
|
||
<ASelect labelKey="sn" @change="orderChange" :tableColumn="orderColumn" v-model="formData.orderId" :api="PurchaseOrderApi.paging" :disabled="status === 'view'" placeholder="请选择负责人" />
|
||
<!-- <ElInput v-model="formData.orderId" :disabled="status === 'view'" placeholder="采购单 Id；wh_purchase_order.id" /> -->
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="采购单单号" prop="orderSn">
|
||
<ElInput v-model="formData.orderSn" readonly :disabled="status === 'view'" placeholder="采购单单号；wh_purchase_order.sn" />
|
||
</ElFormItem>
|
||
<!-- <ElFormItem label-width="90" label="产品分类 Id" prop="goodsCategoryId">
|
||
<ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品分类 Id" />
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="分类名称" prop="goodsCategoryName">
|
||
<ElInput v-model="formData.goodsCategoryName" readonly :disabled="status === 'view'" placeholder="分类名称" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
||
<ElInput v-model="formData.goodsName" readonly :disabled="status === 'view'" placeholder="产品名称" />
|
||
</ElFormItem>
|
||
<!-- <ElFormItem label-width="90" label="商品编码" prop="goodSn">
|
||
<ElInput v-model="formData.goodSn" readonly :disabled="status === 'view'" placeholder="商品编码" />
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="数量" prop="quantity">
|
||
<ElInput v-model="formData.quantity" readonly :disabled="status === 'view'" placeholder="数量" />
|
||
</ElFormItem>
|
||
<!-- <ElFormItem label-width="90" label="计量单位；字典代码：unit" prop="unit">
|
||
<ElInput v-model="formData.unit" :disabled="status === 'view'" placeholder="计量单位；字典代码：unit" />
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="备注" prop="memo">
|
||
<ElInput v-model="formData.memo" readonly :disabled="status === 'view'" placeholder="备注" />
|
||
</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 InOrderApi from "@/pages/wh/in-order/in-order-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 ASelect from "@/components/a-select/ASelect.vue";
|
||
import UserApi from "@/pages/sys/user/user-api.ts";
|
||
import WarehouseApi from "@/pages/wh/warehouse/warehouse-api.ts";
|
||
import PurchaseOrderApi from "@/pages/wh/purchase-order/purchase-order-api.ts";
|
||
|
||
const emits = defineEmits(["editSucc"]);
|
||
const showDialog = ref(false);
|
||
const submiting = ref(false);
|
||
const status = ref<"add" | "view" | "modify">("add");
|
||
|
||
const inOrderFormIns = useTemplateRef<FormInstance>("inOrderForm");
|
||
|
||
const formData = Utils.resetAble(reactive<InOrderTypes.SearchInOrderResult>({}));
|
||
const rules = reactive<FormRules<InOrderTypes.SearchInOrderResult>>({
|
||
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||
sn: [{ required: true, message: "请填写编号", trigger: "blur" }],
|
||
responsibleId: [{ required: true, message: "请填写责任人", trigger: "blur" }],
|
||
warehouseId: [{ required: true, message: "请填写仓库", trigger: "blur" }],
|
||
location: [{ required: true, message: "请填写存放位置", trigger: "blur" }],
|
||
inTime: [{ required: true, message: "请填写入库时间", trigger: "blur" }],
|
||
orderId: [{ required: true, message: "请填写采购单", trigger: "blur" }],
|
||
orderSn: [{ required: true, message: "请填写采购单单号", trigger: "blur" }],
|
||
goodsCategoryId: [{ required: true, message: "请填写产品分类 Id", trigger: "blur" }],
|
||
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||
goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
||
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
||
unit: [{ required: true, message: "请填写计量单位；字典代码：unit", trigger: "blur" }],
|
||
memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
|
||
creatorId: [{ required: true, message: "请填写创建人 Id； sys_user.id", trigger: "blur" }],
|
||
modifierId: [{ required: true, message: "请填写修改人 Id； sys_user.id", trigger: "blur" }],
|
||
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
|
||
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
|
||
deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
|
||
});
|
||
|
||
const userColumn = [
|
||
{
|
||
label: "姓名",
|
||
prop: "nickname",
|
||
},
|
||
{
|
||
label: "联系电话",
|
||
prop: "phone",
|
||
},
|
||
{
|
||
label: "用户名",
|
||
prop: "account.username",
|
||
},
|
||
];
|
||
|
||
const orderColumn = [
|
||
{
|
||
label: "编号",
|
||
prop: "sn",
|
||
},
|
||
{
|
||
label: "产品名称",
|
||
prop: "goodsName",
|
||
},
|
||
{
|
||
label: "采购日期",
|
||
prop: "purchaseDate ",
|
||
},
|
||
{
|
||
label: "数量",
|
||
prop: "quantity",
|
||
},
|
||
];
|
||
|
||
const warehouseColumn = [
|
||
{
|
||
label: "名称",
|
||
prop: "warehouseName",
|
||
},
|
||
{
|
||
label: "位置",
|
||
prop: "location",
|
||
},
|
||
];
|
||
|
||
function warehouseChange(e: any) {
|
||
formData.location = e.location;
|
||
}
|
||
function orderChange(e: any) {
|
||
console.log(e, "ee");
|
||
formData.orderSn = e.sn;
|
||
formData.goodsCategoryId = e.goodsCategoryId;
|
||
formData.goodsCategoryName = e.goodsCategoryName;
|
||
formData.goodsName = e.goodsName;
|
||
formData.goodSn = e.goodSn;
|
||
formData.goodsId = e.goodsId;
|
||
formData.quantity = e.quantity;
|
||
formData.unit = e.unit;
|
||
}
|
||
|
||
function dialogCloseHandler() {
|
||
formData.$reset();
|
||
}
|
||
|
||
function submitHandler() {
|
||
if (status.value === "view") return;
|
||
submiting.value = true;
|
||
if (formData.id != null) {
|
||
FormUtil.submit(inOrderFormIns, () => InOrderApi.modify(formData))
|
||
.then(() => {
|
||
ElMessage.success("修改成功");
|
||
emits("editSucc");
|
||
showDialog.value = false;
|
||
})
|
||
.finally(() => {
|
||
submiting.value = false;
|
||
});
|
||
} else {
|
||
FormUtil.submit(inOrderFormIns, () => InOrderApi.add(formData))
|
||
.then(() => {
|
||
ElMessage.success("添加成功");
|
||
emits("editSucc");
|
||
showDialog.value = false;
|
||
})
|
||
.finally(() => {
|
||
submiting.value = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
defineExpose({
|
||
open(data: InOrderTypes.SearchInOrderResult = {}) {
|
||
showDialog.value = true;
|
||
if (!Strings.isBlank(data.id)) {
|
||
status.value = "modify";
|
||
InOrderApi.detail(data.id!).then((res) => {
|
||
formData.$reset(res.data);
|
||
});
|
||
} else {
|
||
status.value = "add";
|
||
formData.$reset(data);
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.form-panel {
|
||
padding 20px
|
||
}
|
||
</style>
|