pms-aomei/src/views/modules/pms/finishedOrder/components/tabs/orderDetail.vue

737 lines
25 KiB
Vue

<template>
<div class="order-detail" style="padding-bottom: 6px">
<el-skeleton v-if="optionsLoading || formLoading" />
<el-form ref="dataForm" :model="dataForm" v-else size="small" style="padding: 0">
<InputsArea title="生产订单">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="订单状态" prop="statusDictValue" :rules="null">
<span style="display: block; margin-top: 32px">
{{ ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][dataForm.statusDictValue] }}
</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="订单号"
prop="code"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-input
v-model="dataForm.code"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入订单号' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="订单子号"
prop="cate"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.cate"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入订单子号' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="计划开始时间"
prop="planStartTime"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-date-picker
v-model="dataForm.planStartTime"
v-bind="{
placeholder: '选择计划开始时间',
type: 'datetime',
'value-format': 'yyyy-MM-ddTHH:mm:ss',
}"
:disabled="mode.includes('detail')"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</InputsArea>
<InputsArea title="设备与参数">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item
label="压机"
prop="press"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-select
v-model="dataForm.press"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择压机', filterable: true }">
<el-option
v-for="opt in pressOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[0].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="混料机号"
prop="blender"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-select
v-model="dataForm.blender"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择混料机', filterable: true }">
<el-option
v-for="opt in blenderOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[1].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="隧道窑号" prop="kiln" :rules="null">
<el-select
v-model="dataForm.kiln"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择隧道窑', filterable: true }">
<el-option
v-for="opt in kilnOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[2].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Add on" prop="sapParam1" :rules="null">
<el-input
v-model="dataForm.sapParam1"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入addon' }"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="配方号" prop="bomId" :rules="null">
<el-select
v-model="dataForm.bomId"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择配方号', filterable: true }">
<el-option
v-for="opt in bomOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value"
style="display: flex; align-items: center">
<span style="display: inline-block; width: 128px; text-overflow: ellipsis">{{ opt.label }}</span>
<span
v-if="requestList[3].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="牌号" prop="brand" :rules="null">
<span style="display: block; margin-top: 32px">{{ dataForm.brand }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="版本号" prop="ai" :rules="null">
<!-- <span style="display: block; margin-top: 32px">{{ dataForm.ai }}</span> -->
<el-select
v-model="dataForm.ai"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '请选择版本' }">
<el-option
v-for="opt in versionList"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="包装代码" prop="packTech" :rules="null">
<el-select
v-model="dataForm.packTech"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择包装代码', filterable: true }">
<el-option
v-for="opt in packOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[4].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="物料" prop="productId" :rules="null">
<el-select
v-model="dataForm.productId"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择物料', filterable: true }">
<el-option
v-for="opt in productOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[5].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="砖型" prop="shape" :rules="null">
<el-select
v-model="dataForm.shape"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择砖型', filterable: true }">
<el-option
v-for="opt in shapeOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[6].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.code }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="烧成温度"
prop="sapParam6"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.sapParam6"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入烧成温度' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="烧成时间 H"
prop="sapParam7"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.sapParam7"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入烧成时间' }"></el-input>
</el-form-item>
</el-col>
</el-row>
</InputsArea>
<InputsArea title="其他">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="生产订单类型" prop="specifications" :rules="null">
<el-input
v-model="dataForm.specifications"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入生产订单类型' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="生产订单砖数"
prop="prodqty"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.prodqty"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入要求生产的数量' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="已生产数"
prop="yieldqty"
:rules="[
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.yieldqty"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入已经生产的数量' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="托盘码放砖数"
prop="pcsKilnCar"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.pcsKilnCar"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入托盘码放砖数' }"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item
label="销售订单号"
prop="saleNo"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-input
v-model="dataForm.saleNo"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入销售订单号' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="销售订单item号" prop="saleOrderItem" :rules="null">
<el-input
v-model="dataForm.saleOrderItem"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入销售订单item号' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="销售订单砖数"
prop="soqty"
:rules="[
{ required: true, message: '必填项不能为空', trigger: 'blur' },
{
type: 'number',
message: '输入正确的数字类型',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.soqty"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '输入销售订单砖数' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="销售时间"
prop="deliveryTime"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-date-picker
v-model="dataForm.deliveryTime"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择销售时间' }"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item
label="客户"
prop="customerId"
:rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
<el-select
v-model="dataForm.customerId"
filterable
clearable
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '选择客户' }">
<el-option
v-for="opt in clientOptions"
:key="opt.label + opt.value"
:label="opt.label"
:value="opt.value">
<span>{{ opt.label }}</span>
<span
v-if="requestList[7].extraLabel"
style="display: inline-block; margin-left: 12px; font-size: 0.9em">
{{ opt.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="物料号销售文本" prop="shortDesc" :rules="null">
<span style="display: block; margin-top: 32px">{{ dataForm.shortDesc }}</span>
</el-form-item>
</el-col>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="备注" prop="remark" :rules="null">
<el-input
v-model="dataForm.remark"
:disabled="mode.includes('detail')"
v-bind="{ placeholder: '备注' }"></el-input>
</el-form-item>
</el-col>
</el-row>
</InputsArea>
</el-form>
</div>
</template>
<script>
import { pick as __pick } from "@/utils/filters";
import InputsArea from "./InputsArea.vue";
export default {
name: "OrderDetailTag",
components: { InputsArea },
props: {},
inject: ["urls"],
data() {
return {
mode: "#detail",
formLoading: false,
optionsLoading: false,
pressOptions: [], // 压机列表
blenderOptions: [], // 混料机列表
kilnOptions: [], // 窑炉列表
bomOptions: [], // 牌号列表
packOptions: [], // 包装代码列表
productOptions: [], // 物料代码
shapeOptions: [], // 砖型代码
clientOptions: [], // 客户礼拜
versionList: [], // 版本列表
cachedList: {}, // 用来缓存请求回来的原始列表数据
dataForm: {
statusDictValue: null,
code: null,
cate: null,
planStartTime: null,
press: null,
blender: null,
kiln: null,
sapParam1: null,
bomId: null,
brand: null, // 牌号
ai: null, // 版本号
packTech: null,
productId: null,
shape: null,
sapParam6: null,
sapParam7: null,
specifications: null,
prodqty: null,
yieldqty: null,
pcsKilnCar: null,
saleNo: null,
saleOrderItem: null,
soqty: null,
deliveryTime: null,
customerId: null,
shortDesc: null,
remark: null,
},
requestList: [
{
url: "/pms/equipment/search",
params: {
equipmentTypeCode: "Press",
},
method: "get",
target: "pressOptions",
label: "code",
},
{
url: "/pms/equipment/search",
params: {
equipmentTypeCode: "Mix",
},
method: "get",
target: "blenderOptions",
label: "code",
},
{
url: "/pms/equipment/search",
params: {
equipmentTypeCode: "Kiln",
},
method: "get",
target: "kilnOptions",
label: "code",
},
{
url: "/pms/bom/page",
params: {
limit: 999,
page: 1,
key: "",
externalCode: "",
},
method: "get",
target: "bomOptions",
label: "code",
extraLabel: "name",
cache: true,
},
{
url: "/pms/equipmentTech/pageView",
params: {
limit: 999,
page: 1,
key: "",
shape: "",
wsId: 5,
},
method: "post",
target: "packOptions",
label: "code",
},
{
url: "/pms/product/page",
params: {
limit: 999,
page: 1,
key: "",
},
method: "get",
target: "productOptions",
label: "code",
},
{
url: "/pms/shape/page",
params: {
limit: 999,
page: 1,
key: "",
},
method: "get",
target: "shapeOptions",
label: "code",
},
{
url: "/pms/customer/page",
params: {
limit: 999,
page: 1,
name: "",
},
method: "get",
target: "clientOptions",
label: "name",
},
],
promiseList: [],
};
},
methods: {
/**
* 打开弹窗后,准备下拉选项数据
* 复用方式:
* 1. 在 data 里定义 requestList
* 2. 复制本方法到组件中去
* 3. requestList 参考上面的 data
*/
async prepareSelectOptions() {
this.optionsLoading = true;
this.requestList.forEach((req) => {
this.promiseList.push(async () => {
const { data: res } = await this.$http[req.method](
req.url,
req.method.toLowerCase() == "post" ? req.params : { params: req.params }
);
if (res.code == 0) {
if ("list" in res.data) {
// 从 target 中抽取缓存名称
if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data.list;
this[req.target] = res.data.list.map((item) =>
req.extraLabel
? {
[req.extraLabel]: item[req.extraLabel],
label: item[req.label],
value: item.id,
}
: {
label: item[req.label],
value: item.id,
}
);
} else if (Array.isArray(res.data)) {
if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data;
this[req.target] = res.data.map((item) =>
req.extraLabel
? {
[req.extraLabel]: item[req.extraLabel],
label: item[req.label],
value: item.id,
}
: {
label: item[req.label],
value: item.id,
}
);
}
}
});
});
try {
await Promise.all(this.promiseList.map((fn) => fn()));
} catch (err) {
this.$message.error("获取数据失败,请刷新页面重试");
this.optionsLoading = false;
}
this.optionsLoading = false;
},
async init(id, detail_mode) {
this.visible = true;
this.mode = "#detail"; // 强制预览模式
await this.prepareSelectOptions();
this.$nextTick(() => {
this.dataForm.id = id || null;
if (this.dataForm.id) {
// 如果是编辑
this.formLoading = true;
// 获取基本信息
this.$http
.get(this.urls.base + `/${this.dataForm.id}`)
.then(({ data: res }) => {
// 特供 emit
this.$emit("detail-loaded");
if (res && res.code === 0) {
this.dataForm = __pick(res.data, Object.keys(this.dataForm));
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
this.formLoading = false;
})
.catch((err) => {
this.formLoading = false;
this.$message({
message: `${err}`,
type: "error",
duration: 1500,
});
});
} else {
// 如果不是编辑
this.formLoading = false;
}
});
},
},
};
</script>
<style scoped>
.el-select,
.el-cascader,
.el-date-editor {
width: 100% !important;
}
</style>