add 订单详情弹窗细化“

This commit is contained in:
lb 2023-03-28 11:24:33 +08:00
parent 041c30b78a
commit 4d3f34e441
6 changed files with 597 additions and 4 deletions

View File

@ -0,0 +1,504 @@
<template>
<el-dialog
class="dialog-just-form"
style="padding: 40px"
:fullscreen="fullscreen"
:visible="visible"
@close="handleClose"
: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-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>
<script>
import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie";
import moment from "moment";
import CarDetail from "./tabs/carDetail.vue";
import OrderDetail from "./tabs/orderDetail.vue";
import SubOrderDetail from "./tabs/subOrderDetail.vue";
import TrayDetail from "./tabs/trayDetail.vue";
export default {
name: "DialogWithMenu--OrderVersion",
components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
props: {
configs: {
type: Object,
default: () => null,
},
fullscreen: {
type: Boolean,
default: false,
},
},
inject: ["urls"],
data() {
const dataForm = {};
const watchList = [];
const cachedList = {};
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? null;
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
// console.log("[DialogJustForm fetchData -->]", res.data.list);
if (res.code === 0 && res.data.list) {
if ("injectTo" in col) {
//
cachedList[col.prop] = res.data.list;
}
this.$set(
col,
"options",
res.data.list.map((i) => ({
label: col.optionLabel ? i[col.optionLabel] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
// col.options = res.data.list;
} else {
col.options.splice(0);
}
// dataForm[col.prop] = col.default ?? null; // not perfect!
});
else if (col.fetchTreeData) {
// parentId 0
col.fetchTreeData().then(({ data: res }) => {
// console.log("[DialogJustForm fetchTreeData -->]", res.data);
if (res.code === 0 && res.data) {
if ("list" in res.data) {
this.$set(col, "options", res.data.list);
} else if (Array.isArray(res.data)) {
this.$set(col, "options", res.data);
}
} else {
col.options.splice(0);
}
});
}
});
});
return {
loadingStatus: false,
dataForm,
watchList,
cachedList,
detailMode: false,
baseDialogConfig: null,
visible: false,
activeTab: "子订单进度",
};
},
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);
});
}
});
});
},
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,
});
},
/** utitilities */
showButton(operate) {
const notDetailMode = !this.detailMode;
const showAlways = operate.showAlways ?? false;
const editMode = operate.showOnEdit && this.dataForm.id;
const addMode = !operate.showOnEdit && !this.dataForm.id;
const permission = operate.permission ? this.$hasPermission(operate.permission) : true;
return notDetailMode && (showAlways || ((editMode || addMode) && permission));
},
resetForm(excludeId = false, immediate = false) {
setTimeout(
() => {
Object.keys(this.dataForm).forEach((key) => {
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
// console.log("[DialogJustForm resetForm()] clearing form...");
this.$refs.dataForm.clearValidate();
this.$emit("dialog-closed"); //
this.watchList.map((unwatch) => unwatch());
this.cachedList = {};
},
immediate ? 0 : 200
);
},
/** init **/
init(id, detailMode) {
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();
}
this.detailMode = detailMode ?? false;
this.$nextTick(() => {
this.dataForm.id = id || null;
if (this.dataForm.id) {
//
this.loadingStatus = true;
//
this.$http
.get(this.urls.base + `/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res && res.code === 0) {
this.dataForm = __pick(res.data, Object.keys(this.dataForm));
/** 格式化文件上传列表 */
if (Array.isArray(this.dataForm.files)) {
this.dataForm.files = this.dataForm.files.map((file) => ({
id: file.id,
name: file.fileUrl.split("/").pop(),
typeCode: file.typeCode,
url: file.fileUrl,
}));
}
// console.log("[DialogJustForm] init():", this.dataForm);
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
this.loadingStatus = false;
})
.catch((err) => {
this.loadingStatus = false;
this.$message({
message: `${err}`,
type: "error",
duration: 1500,
});
});
} else {
//
this.loadingStatus = false;
}
});
},
/** handlers */
handleSelectChange(col, eventValue) {
// console.log("[dialog] select change: ", col, eventValue);
this.$forceUpdate();
},
handleSwitchChange(val) {
// console.log("[dialog] switch change: ", val, this.dataForm);
},
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
this.dataForm[propName] = JSON.stringify(data);
// console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
},
addOrUpdate(method = "POST") {
if ("parentId" in this.dataForm) {
// console.log("[DialogJustForm parentId]", this.dataForm.parentId);
// parentId cascader ["xxx"]xxx
const lastItem = this.dataForm.parentId.length - 1;
this.dataForm.parentId = this.dataForm.parentId[lastItem];
}
this.$refs.dataForm.validate((passed, result) => {
if (passed) {
this.loadingStatus = true;
let httpPayload = null;
/** 针对有文件上传选项的弹窗提供特殊的 payload */
if (this.dataForm.files) {
httpPayload = {
...this.dataForm,
fileIds: this.dataForm.files.map((file) => file.id),
};
} else {
httpPayload = this.dataForm;
}
/** 针对时间段设置 payload */
if ("startTime" in this.dataForm && "endTime" in this.dataForm) {
const { startTime, endTime } = this.dataForm;
httpPayload = {
...httpPayload,
startTime: startTime ? moment(startTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
endTime: endTime ? moment(endTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
};
}
// /** payload */
// if ("updateTime" in this.dataForm) {
// const { updateTime } = this.dataForm;
// httpPayload = {
// ...httpPayload,
// updateTime: updateTime ? moment(updateTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
// };
// }
/** 针对时间段设置 payload */
if ("deliveryTime" in this.dataForm) {
const { deliveryTime } = this.dataForm;
httpPayload = {
...httpPayload,
deliveryTime: deliveryTime ? moment(deliveryTime).format("YYYY-MM-DDTHH:mm:ss") : null,
};
}
/** 发送 */
return this.$http({
url: this.urls.base,
method,
data: httpPayload,
})
.then(({ data: res }) => {
// console.log("[add&update] res is: ", res);
this.loadingStatus = false;
if (res.code === 0) {
this.$message.success(method === "POST" ? "添加成功" : "更新成功");
this.$emit("refreshDataList");
if (method === "POST") this.handleClose();
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 2000,
});
}
})
.catch((errMsg) => {
this.$message.error("参数错误:" + errMsg);
if (this.loadingStatus) this.loadingStatus = false;
});
} else {
this.$message.error("请核查字段信息");
}
});
},
handleBtnClick(payload) {
// console.log("btn click payload: ", payload);
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "reset":
this.resetForm(true, true); // true means exclude id, immediate execution
break;
case "add":
case "update":
this.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
break;
}
} else {
console.log("[x] 不是这么用的! 缺少name属性");
}
},
handleUploadChange(file, fileList) {
// console.log("[Upload] handleUploadChange...", file, fileList);
},
handleClose() {
this.visible = false;
setTimeout(() => {
this.$emit("destroy-dialog");
// this.resetForm();
// this.$emit("update:dialogVisible", false);
}, 200);
},
},
};
</script>
<style scoped>
.dialog-just-form >>> .el-dialog__body {
/* padding-top: 16px !important;
padding-bottom: 16px !important; */
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
height: 100%;
}
.el-select,
.el-cascader,
.el-date-editor {
width: 100% !important;
}
.dialog-just-form >>> .el-dialog__header {
padding: 0;
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}
.dialog-just-form >>> .el-tabs {
height: 100%;
}
.h0 {
height: 0;
width: 0;
}
</style>

View File

@ -27,7 +27,15 @@
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
></el-pagination> ></el-pagination>
<DialogJustForm <!-- <DialogJustForm
modal-append-to-body
ref="order-dialog"
v-if="renderDialog"
fullscreen
:configs="dialogConfig"
@destroy-dialog="renderDialog = false"
/> -->
<DialogWithMenu
modal-append-to-body modal-append-to-body
ref="order-dialog" ref="order-dialog"
v-if="renderDialog" v-if="renderDialog"
@ -42,12 +50,13 @@
import BaseListTable from "./BaseListTable.vue"; import BaseListTable from "./BaseListTable.vue";
import BaseSearchForm from "./BaseSearchForm.vue"; import BaseSearchForm from "./BaseSearchForm.vue";
import DialogJustForm from "./DialogJustForm.vue"; import DialogJustForm from "./DialogJustForm.vue";
import DialogWithMenu from "./DialogWithMenu.vue";
import moment from "moment"; import moment from "moment";
const dictList = JSON.parse(localStorage.getItem("dictList")); const dictList = JSON.parse(localStorage.getItem("dictList"));
export default { export default {
name: "ListSectionWithHead", name: "ListSectionWithHead",
components: { BaseSearchForm, BaseListTable, DialogJustForm }, components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
props: { props: {
headConfig: { headConfig: {
type: Object, type: Object,
@ -104,7 +113,7 @@ export default {
}, },
dataList: [], dataList: [],
totalPage: 0, totalPage: 0,
renderDialog: false renderDialog: false,
}; };
}, },
mounted() { mounted() {

View File

@ -0,0 +1,20 @@
<template>
<div class="car-detail">
Car Detail
</div>
</template>
<script>
export default {
name: "CarDetailTag",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -0,0 +1,20 @@
<template>
<div class="order-detail">
Order Detail
</div>
</template>
<script>
export default {
name: "OrderDetailTag",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -0,0 +1,20 @@
<template>
<div class="suborder-detail">
Sub Order Detail
</div>
</template>
<script>
export default {
name: "SuborderDetailTag",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -0,0 +1,20 @@
<template>
<div class="tray-detail">
Tary Detail
</div>
</template>
<script>
export default {
name: "TrayDetailTag",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>