mt-fe-group/pms-aomei
8
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
Show Stats 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;

19
src/views/modules/pms/order/components/ListSectionWithHead.vue
View File

@ -37,11 +37,11 @@
/> -->
<DialogWithMenu
modal-append-to-body
ref="order-dialog"
v-if="renderDialog"
ref="menu-dialog"
v-if="renderMenuDialog"
fullscreen
:configs="dialogConfig"
@destroy-dialog="renderDialog = false"
@destroy-dialog="renderMenuDialog = false"
/>
</section>
</template>
@ -114,6 +114,7 @@ export default {
dataList: [],
totalPage: 0,
renderDialog: false,
renderMenuDialog: false,
};
},
mounted() {
@ -298,6 +299,11 @@ export default {
this.openDialog(data, true);
break;
}
case "view-ongoing": {
console.log('view-ongoing', data)
this.openMenuDialog(data, false);
break;
}
}
},
@ -349,6 +355,13 @@ export default {
this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);
});
},
openMenuDialog(row, detail) {
this.renderMenuDialog = true;
this.$nextTick(() => {
this.$refs["menu-dialog"].init(/** some args... */ row, detail);
});
},
},
};
</script>

218
src/views/modules/pms/order/components/tabs/carDetail.vue
View File

@ -1,19 +1,223 @@
<template>
<div class="car-detail">
Car Detail
<BaseListTable
key="car-history-list"
v-loading="tableLoading"
:table-config="null"
:column-config="tableConfig"
:table-data="dataList"
@operate-event="handleOperate"
:refresh-layout-key="refreshLayoutKey"
/>
<el-pagination
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page.sync="listQuery.page"
:page-sizes="[1, 5, 10, 20]"
:page-size="listQuery.limit"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<!-- <DialogCarPayload
ref="car-payload-dialog"
v-if="!!carPayloadDialogConfigs"
:dialog-visible.sync="carPayloadDialogVisible"
:configs="carPayloadDialogConfigs"
/> -->
<!-- @refreshDataList="getList" -->
</div>
</template>
<script>
import BaseListTable from "../BaseListTable.vue";
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
// import StateSelect from '@/components/StateSelect.vue';
import { timeFilter } from "@/utils/filters";
import DialogCarPayload from "@/components/DialogCarPayload.vue";
export default {
name: "CarDetailTag",
props: {},
data() {
return {};
components: { BaseListTable, DialogCarPayload },
props: {
orderId: {
type: String,
default: null,
},
},
data() {
return {
dataList: [],
tableConfig: [
{ type: "index", label: "序号" },
// { prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "code", label: "窑车号" },
{ prop: "stateDictValue", label: "状态" }, // , subcomponent: StateSelect },
// { prop: "stateDictValue", label: "状态", filter: v => (v !== null && v !== undefined) ? ['没有数据', '正常', '判废', '过渡'][v] : '-' }, // subcomponent
// { prop: "orderCode", label: "订单号" },
{ prop: "posCode", label: "位置" },
{ prop: "startTime", label: "开始时间", filter: timeFilter },
{ prop: "endTime", label: "结束时间", filter: timeFilter },
// {
// prop: "operations",
// name: "操作",
// fixed: "right",
// width: 90,
// subcomponent: TableOperaionComponent,
// options: [
// { name: "to-car-payload", label: "装载详情", icon: "document" },
// { name: "delete", label: "删除", icon: "delete", emitFull: true, promptField: "code" },
// ],
// },
],
refreshLayoutKey: null,
tableLoading: false,
listQuery: {
limit: 20,
page: 1,
},
totalPage: 0,
carPayloadDialogVisible: false,
carPayloadDialogConfigs: {
dialogWidth: "70%",
carPayloadDialog: true,
clickModalToClose: true,
tableConfig: {
table: null,
column: [
// 窑车的 装载详情
{ width: 56, type: "index", label: "序号" },
{ prop: "orderCode", label: "订单号" },
{ width: 80, prop: "orderCate", label: "订单子号" },
{ prop: "bomCode", label: "配方" },
{ prop: "shapeCode", label: "砖型" },
{ width: 80, prop: "qty", label: "订单数量" },
{ width: 72, prop: "goodqty", label: "合格数" },
{ width: 72, prop: "badqty", label: "废砖数" },
],
},
},
};
},
watch: {
orderId: {
handler: function (val) {
if (val) {
console.log("get car list based on orderId: ", val);
this.getAList(val);
}
},
immediate: true,
},
},
methods: {
handleOperate({ type, data }) {
switch (type) {
case "delete": {
// 找到删除的 prompt 字段
const deleteConfig = data.head?.options?.find((item) => item.name === "delete");
let promptName = data.name ?? data.id;
if (deleteConfig && "promptField" in deleteConfig) {
promptName = data[deleteConfig.promptField];
}
// 确认是否删除
return this.$confirm(`确定要删除记录 "${promptName}" 吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
})
.then(() => {
// this.$http.delete(this.urls.base + `/${data}`).then((res) => {
this.$http({
url: this.urls.base,
method: "DELETE",
data: data.id,
// data: [`${data.id}`],
headers: {
"Content-Type": "application/json",
},
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message.success("删除成功!");
this.page = 1;
this.size = 10;
this.getList();
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
});
})
.catch((err) => {});
}
case "to-car-history": {
return this.$router.push({
name: "pms-carHistory",
query: {
code: data.code,
},
});
}
case "to-car-payload": {
// open dialog instead of redirect to a new page
this.openCarPayloadDialog(data);
}
}
},
openCarPayloadDialog(id) {
this.carPayloadDialogVisible = true;
this.$nextTick(() => {
this.$refs["car-payload-dialog"].init(id);
});
},
getAList(orderId) {
console.log("geting car list, ", orderId);
if (!orderId) orderId = this.orderId;
this.tableLoading = true;
this.$http.post("/pms/carHandle/pageHis", { ...this.listQuery, orderId }).then(({ data: res }) => {
if (res.code === 0 && res.data) {
if ("list" in res.data) {
this.dataList = res.data.list;
this.totalPage = res.data.total;
} else console.log("没有res.data.list属性");
} else {
this.dataList.splice(0);
this.totalPage = 0;
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
this.refreshLayoutKey = this.layoutTable();
this.tableLoading = false;
});
},
layoutTable() {
return Math.random();
},
/** 导航器的操作 */
handleSizeChange(newSize) {
this.listQuery.page = 1;
this.listQuery.limit = newSize;
this.getAList();
},
handlePageChange(newPage) {
this.getAList();
},
},
created() {},
mounted() {},
methods: {},
};
</script>

2
src/views/modules/pms/order/components/tabs/trayDetail.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tray-detail">
Tary Detail
托盘详情
</div>
</template>

2
src/views/modules/pms/order/config.js
View File

@ -24,7 +24,7 @@ export default function () {
const operations = {
ongoing: [
// { name: 'confirm-order', label: '确认', icon: 'success', showText: true },
{ name: 'view', label: '查看详情', icon: 'view' },
{ name: 'view-ongoing', label: '查看详情', icon: 'view', emitFull: true },
{ name: "end-order", label: "结束", icon: "finished" },
{ name: "move-up", label: "上移", icon: "arrow-up" },
{ name: "move-down", label: "下移", icon: "arrow-down" },