update order
This commit is contained in:
parent
af69a4d53f
commit
bbfd450c9f
@ -73,7 +73,7 @@ export function addDynamicRoute (routeParams, router) {
|
||||
}
|
||||
|
||||
const router = new Router({
|
||||
mode: 'hash',
|
||||
mode: 'history',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: pageRoutes.concat(moduleRoutes)
|
||||
})
|
||||
|
||||
197
src/views/modules/pms/order/components/BaseSearchForm.vue
Normal file
197
src/views/modules/pms/order/components/BaseSearchForm.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="base-search-form">
|
||||
<div class="brand-color-line"><span style="">{{ headTitle }}</span></div>
|
||||
|
||||
<div class="actual-form">
|
||||
<el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
|
||||
<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
|
||||
<el-form-item
|
||||
v-for="(opt, index) in headConfig.fields"
|
||||
:key="opt.prop"
|
||||
:label="opt.label ? opt.label : null"
|
||||
:prop="opt.prop ?? '' + index"
|
||||
:rules="opt.bind?.rules ? opt.bind.rules : undefined"
|
||||
>
|
||||
<el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
|
||||
<el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small">
|
||||
<el-option v-for="item in opt.select" :key="item.value + Math.random().toString()" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
|
||||
<el-upload
|
||||
v-if="opt.upload"
|
||||
size="small"
|
||||
:key="'upload_' + Math.random().toString()"
|
||||
class="inline-block pl-3"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<el-button type="primary">上传文件</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
|
||||
:key="'button' + Math.random().toString()"
|
||||
size="small"
|
||||
:type="opt.button.type"
|
||||
v-bind="opt.bind"
|
||||
@click="handleBtnClick(opt.button.name)"
|
||||
>{{ opt.button.name }}</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSearchForm",
|
||||
props: {
|
||||
headConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
headTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm: {},
|
||||
};
|
||||
},
|
||||
|
||||
// 这个 watch 出现得没啥必要......
|
||||
// watch: {
|
||||
// dataForm: {
|
||||
// handler: (val) => {
|
||||
// console.log("[BaseSearchForm::watcher::dataForm]", val);
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
// },
|
||||
|
||||
created() {},
|
||||
mounted() {
|
||||
console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
|
||||
|
||||
this.headConfig.fields.forEach((field, index) => {
|
||||
// 没有 field.prop ，则为按钮之类的
|
||||
if (!field.prop) return;
|
||||
|
||||
if (!this.dataForm[field.prop]) {
|
||||
this.$set(this.dataForm, field.prop, null);
|
||||
}
|
||||
|
||||
if (field.default) {
|
||||
// default 必须有个 value 属性！哪怕是 input 输入框
|
||||
this.dataForm[field.prop] = field.default.value;
|
||||
}
|
||||
|
||||
// 更新选项列表
|
||||
if (!field.watch && field.fn && typeof field.fn === "function") {
|
||||
const optionLabel = field.fieldOptionLabel;
|
||||
const optionValue = field.fieldOptionValue;
|
||||
// 设置自身的选项列表
|
||||
field.fn().then(({ data: res }) => {
|
||||
if (res.code === 0 && res.data) {
|
||||
// TODO: 此处需要随具体情况再做更新
|
||||
if ("list" in res.data) {
|
||||
this.$set(
|
||||
field,
|
||||
"select",
|
||||
res.data.list.map((item) => ({
|
||||
label: optionLabel ? item[optionLabel] : item.name,
|
||||
value: optionValue ? item[optionValue] : item.id,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${field.label} 数据获取出错: ${res.code} - ${res.msg}`,
|
||||
type: "error",
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
|
||||
// TODO: 此处也需要修改，碰到具体业务需求才更新...
|
||||
if (field.watch) {
|
||||
// const { index: innerIdx, condition } = field.watch;
|
||||
// console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
|
||||
// // 设置监听器
|
||||
// this.$watch(
|
||||
// () => this.searchForm[innerIdx],
|
||||
// (val) => {
|
||||
// const queryParams = { [condition]: val };
|
||||
// // field.watch.condition.forEach(c => {
|
||||
// // queryParams
|
||||
// // })
|
||||
// this.$http(field.url, queryParams).then((res) => {
|
||||
// console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
|
||||
// // 此处是外部的 index
|
||||
// this.searchForm[index] = Math.floor(Math.random() * 10);
|
||||
// });
|
||||
// }
|
||||
// );
|
||||
// console.log("[BaseSearchForm] mounted(): ", this.searchForm);
|
||||
// // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
|
||||
// if (this.searchForm[innerIdx]) {
|
||||
// // TODO: 这个判断好像不太需要...
|
||||
// console.log("TODO: 这个判断好像不太需要...");
|
||||
// } else {
|
||||
// console.log("TODO: 监听的字段还没来得及设置值呢...");
|
||||
// }
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleBtnClick(name) {
|
||||
this.$emit("btn-click", { btnName: name, payload: this.dataForm });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-search-form {
|
||||
/* display: flex; */
|
||||
/* align-items: center; */
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.brand-color-line {
|
||||
position: relative;
|
||||
/* background: red; */
|
||||
/* margin-top: 10px; */
|
||||
height: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.brand-color-line span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 2px 0;
|
||||
margin-left: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-color-line::before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: #0b58ff;
|
||||
/* margin-right: 8px; */
|
||||
/* position: absolute; */
|
||||
}
|
||||
|
||||
.actual-form >>> .el-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -5,92 +5,103 @@
|
||||
**/
|
||||
-->
|
||||
<template>
|
||||
<div class="list-view-with-head">
|
||||
<!-- TODO: delete these demo links -->
|
||||
<ul>
|
||||
<li><a href="#ongoing">ongoing</a></li>
|
||||
<li><a href="#pending">pending</a></li>
|
||||
<li><a href="#finished">finished</a></li>
|
||||
</ul>
|
||||
<div class="main-container">
|
||||
<div class="inner-sidebar">
|
||||
<a href="#ongoing" :class="{ active: activeTable === '#ongoing' }">进行中的订单</a>
|
||||
<a href="#pending" :class="{ active: activeTable === '#pending' }">等待订单</a>
|
||||
<a href="#finished" :class="{ active: activeTable === '#finished' }">完成订单</a>
|
||||
</div>
|
||||
|
||||
<div class="list-view-with-head">
|
||||
<section class="ongoing-order" id="ongoing">
|
||||
<BaseSearchForm
|
||||
head-title="进行中的订单"
|
||||
:head-config="{ fields: headConfigs.ongoingTableSearch }"
|
||||
@btn-click="handleBtnClick('ongoing', $event)"
|
||||
/>
|
||||
<BaseListTable
|
||||
key="confirmed"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.ongoingTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
|
||||
<section class="ongoing-order" id="ongoing">
|
||||
<BaseSearchForm :head-config="{ fields: headConfigs.ongoingTableSearch }" @btn-click="handleBtnClick('ongoing', $event)" />
|
||||
<BaseListTable
|
||||
key="confirmed"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.ongoingTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</section>
|
||||
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</section>
|
||||
<section class="pending-order" id="pending">
|
||||
<BaseSearchForm
|
||||
head-title="等待中的订单"
|
||||
:head-config="{ fields: headConfigs.pendingTableSearch }"
|
||||
@btn-click="handleBtnClick('pending', $event)"
|
||||
/>
|
||||
<BaseListTable
|
||||
key="unconfirmed"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.pendingTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</section>
|
||||
|
||||
<section class="pending-order" id="pending">
|
||||
<BaseSearchForm :head-config="{ fields: headConfigs.pendingTableSearch }" @btn-click="handleBtnClick('pending', $event)" />
|
||||
<BaseListTable
|
||||
key="unconfirmed"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.pendingTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</section>
|
||||
<section class="finished-order" id="finished">
|
||||
<BaseSearchForm
|
||||
head-title="已完成订单"
|
||||
:head-config="{ fields: headConfigs.finishedTableSearch }"
|
||||
@btn-click="handleBtnClick('finished', $event)"
|
||||
/>
|
||||
<BaseListTable
|
||||
key="ended"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.finishedTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
|
||||
<section class="finished-order" id="finished">
|
||||
<BaseSearchForm :head-config="{ fields: headConfigs.finishedTableSearch }" @btn-click="handleBtnClick('finished', $event)" />
|
||||
<BaseListTable
|
||||
key="ended"
|
||||
v-loading="tableLoading"
|
||||
:table-config="null"
|
||||
:column-config="tableConfigs.finishedTable"
|
||||
:table-data="dataList"
|
||||
@operate-event="handleOperate"
|
||||
@load-sub="handleLoadSub"
|
||||
:refresh-layout-key="refreshLayoutKey"
|
||||
/>
|
||||
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
<!-- :current-page.sync="currentPage"
|
||||
<el-pagination
|
||||
class="mt-5 flex justify-end"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page.sync="page"
|
||||
:page-sizes="[1, 5, 10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
<!-- :current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize" -->
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- <DialogWithMenu
|
||||
<!-- <DialogWithMenu
|
||||
ref="edit-dialog"
|
||||
v-if="dialogType === DIALOG_WITH_MENU"
|
||||
:dialog-visible.sync="dialogVisible"
|
||||
@ -104,12 +115,13 @@
|
||||
:configs="subdialogConfigs"
|
||||
@refreshDataList="handleRefreshDatalist"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseListTable from "./BaseListTable.vue";
|
||||
import BaseSearchForm from "@/components/BaseSearchForm.vue";
|
||||
import BaseSearchForm from "./BaseSearchForm.vue";
|
||||
import DialogWithMenu from "@/components/DialogWithMenu.vue";
|
||||
import DialogJustForm from "./DialogJustForm.vue";
|
||||
|
||||
@ -154,8 +166,17 @@ export default {
|
||||
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route: function (route) {
|
||||
if (route.hash) {
|
||||
console.log("acitive hash", route.hash);
|
||||
this.activeTable = route.hash;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTable: "",
|
||||
refreshLayoutKey: null,
|
||||
DIALOG_WITH_MENU,
|
||||
DIALOG_JUST_FORM,
|
||||
@ -459,14 +480,51 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-container {
|
||||
min-height: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inner-sidebar {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
margin-right: 16px;
|
||||
padding: 8px 0;
|
||||
/* min-height: inherit; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inner-sidebar a {
|
||||
text-decoration: unset;
|
||||
color: #777c;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inner-sidebar a.active,
|
||||
.inner-sidebar a:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.inner-sidebar,
|
||||
.list-view-with-head {
|
||||
background: white;
|
||||
/* height: 100%; */
|
||||
min-height: inherit;
|
||||
/* min-height: inherit; */
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.list-view-with-head {
|
||||
width: 1px;
|
||||
margin-left: 256px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 16px;
|
||||
padding-bottom: 3.125rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user