mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 订单详情-窑车tag

Browse Source
This commit is contained in:
lb
2023-03-28 15:49:50 +08:00
parent 4d3f34e441
commit b62db4d40c
5 changed files with 285 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/views/modules/pms/order/components/DialogWithMenu.vue
View File

@@ -8,94 +8,20 @@
:destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? true"
>
<!-- title -->
<!-- {{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }} -->
<!-- <div slot="title" class="dialog-title" style="padding: 40px 40px 0">
<h1 class="">
查看详情
</h1>
</div> -->
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick" style="z-index: -1;">
<el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name" :label="tab.name">
<!-- icons -->
<!-- <span class="slot" slot="label">
<i
:class="{
'el-icon-edit': tab.key === 'info',
'el-icon-s-data': tab.key === 'attr',
'el-icon-folder-opened': tab.key === 'attachment',
}"
></i>
{{ tab.name }}
</span> -->
<!-- tabs -->
<SubOrderDetail v-if="tab.key === 'sub'" />
<CarDetail v-if="tab.key === 'car'" />
<TrayDetail v-if="tab.key === 'tray'" />
<OrderDetail v-if="tab.key === 'order'" />
<!-- form -->
<!-- <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" style="padding: 0 40px">
<el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
<el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
<el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
<el-cascader
v-if="col.cascader"
v-model="dataForm[col.prop]"
:options="col.options"
:disabled="detailMode"
v-bind="col.elparams"
></el-cascader>
<el-select
v-if="col.select"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
v-bind="col.elparams"
@change="handleSelectChange(col, $event)"
>
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
</el-select>
<el-switch
v-if="col.switch"
v-model="dataForm[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.activeValue ?? 0"
@change="handleSwitchChange"
:disabled="detailMode"
/>
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<div class="" v-if="col.component" style="margin: 42px 0 0">
<component
:is="col.component"
:key="'component_' + col.prop"
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
:modelValue="dataForm[col.prop] ?? ''"
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
v-bind="col.bind"
/>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form> -->
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
<el-tab-pane name="sub" label="子订单进度">
<SubOrderDetail />
</el-tab-pane>
<el-tab-pane name="car" label="窑车详情">
<CarDetail :order-id="orderId" />
</el-tab-pane>
<el-tab-pane name="tray" label="托盘详情">
<TrayDetail />
</el-tab-pane>
<el-tab-pane name="order" label="订单详情">
<OrderDetail />
</el-tab-pane>
</el-tabs>
<!-- footer -->
<!-- <div slot="footer" style="padding: 0 40px 0">
<template v-for="(operate, index) in configs.form.operations">
<el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
operate.label
}}</el-button>
</template>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div> -->
</el-dialog>
</template>
@@ -180,76 +106,49 @@ export default {
detailMode: false,
baseDialogConfig: null,
visible: false,
activeTab: "子订单进度",
activeTab: "sub",
orderId: null,
orderSubId: null,
carLayoutKey: 0
};
},
mounted() {
/** 处理 injectTo 选项 */
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
if ("injectTo" in col && Array.isArray(col.injectTo)) {
// console.log("watching options ..... ", col);
col.injectTo.map((item) => {
const unwatch = this.$watch(
() => this.dataForm[col.prop],
(newVal) => {
const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
if (chosenObject) {
// 如果找到了
this.$set(this.dataForm, item[0], chosenObject[item[1]]);
}
},
{
immediate: false,
}
);
this.watchList.push(unwatch);
});
}
});
});
// this.configs.form.rows.forEach((row) => {
// row.forEach((col) => {
// if ("injectTo" in col && Array.isArray(col.injectTo)) {
// // console.log("watching options ..... ", col);
// col.injectTo.map((item) => {
// const unwatch = this.$watch(
// () => this.dataForm[col.prop],
// (newVal) => {
// const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
// if (chosenObject) {
// // 如果找到了
// this.$set(this.dataForm, item[0], chosenObject[item[1]]);
// }
// },
// {
// immediate: false,
// }
// );
// this.watchList.push(unwatch);
// });
// }
// });
// });
},
computed: {
uploadHeaders() {
return {
token: Cookies.get("token") || "",
};
},
actualMenus() {
// return this.configs.menu.filter((m) => {
// if (m.onlyEditMode && !this.dataForm.id) {
// return false;
// }
// return true;
// });
return [
{ name: "子订单进度", key: "sub" },
{ name: "窑车详情", key: "car" },
{ name: "托盘详情", key: "tray" },
{ name: "订单详情", key: "order" },
];
},
},
methods: {
handleTabClick(payload) {},
handleFilelistUpdate(newFilelist) {
// TODO: 直接访问 .files 可能不太合适
this.dataForm.files = newFilelist.map((file) => ({
id: file.id,
name: file.name,
url: file.url,
typeCode: file.typeCode,
}));
// 更新请求
if ("id" in this.dataForm && this.dataForm.id !== null && this.dataForm.id !== undefined) this.addOrUpdate("PUT");
else
this.$notify({
title: "等待保存",
message: "已添加文件，请手动点击保存！",
type: "warning",
duration: 2500,
});
methods: {
handleTabClick(tab, event) {
console.log('handle tab click', tab, event)
// tab.getAList(this.orderId)
switch (tab.label) {
case "子订单进度": break;
case "窑车详情": this.carLayoutKey = Math.random(); break;
case "托盘详情": break;
case "订单详情": break;
}
},
/** utitilities */
@@ -280,18 +179,17 @@ export default {
},
/** init **/
init(id, detailMode) {
init(order, detailMode) {
this.orderId = order.id;
console.log("init menu dialog,", order);
this.visible = true;
// console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
if (this.$refs.dataForm) {
// console.log("[DialogJustForm] clearing form validation...");
// 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
this.$refs.dataForm.clearValidate();
}
// if (this.$refs.dataForm) {
// this.$refs.dataForm.clearValidate();
// }
this.detailMode = detailMode ?? false;
this.$nextTick(() => {
this.dataForm.id = id || null;
// this.dataForm.id = id || null;
if (this.dataForm.id) {
// 如果是编辑
this.loadingStatus = true;