add ListSectionWithHead & 拆分组件
This commit is contained in:
父節點
3709d3a29f
當前提交
faa1daa343
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="base-search-form">
|
||||
<div class="brand-color-line"><span style="">{{ headTitle }}</span></div>
|
||||
<div class="brand-color-line"><span style="font-size: 20px;">{{ headTitle }}</span></div>
|
||||
|
||||
<div class="actual-form">
|
||||
<el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
|
||||
@ -165,8 +165,8 @@ export default {
|
||||
position: relative;
|
||||
/* background: red; */
|
||||
/* margin-top: 10px; */
|
||||
height: 20px;
|
||||
margin-bottom: 12px;
|
||||
height: 24px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.brand-color-line span {
|
||||
@ -192,6 +192,6 @@ export default {
|
||||
}
|
||||
|
||||
.actual-form >>> .el-form-item {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
252
src/views/modules/pms/order/components/ListSectionWithHead.vue
Normal file
252
src/views/modules/pms/order/components/ListSectionWithHead.vue
Normal file
@ -0,0 +1,252 @@
|
||||
<!--
|
||||
/**
|
||||
* 说明：表格页加上搜索条件 - <物料管理>模块的定制化版本
|
||||
*
|
||||
**/
|
||||
-->
|
||||
<template>
|
||||
<section class="list-section-with-head">
|
||||
<BaseSearchForm :id="$attrs.id" :head-title="headConfig.title" :head-config="{ fields: headConfig.form }" @btn-click="handleBtnClick" />
|
||||
<BaseListTable
|
||||
:key="headConfig.title"
|
||||
v-loading="tableLoading"
|
||||
:table-config="tableConfig.table"
|
||||
:column-config="tableConfig.column"
|
||||
: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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseListTable from "./BaseListTable.vue";
|
||||
import BaseSearchForm from "./BaseSearchForm.vue";
|
||||
import DialogWithMenu from "@/components/DialogWithMenu.vue";
|
||||
import DialogJustForm from "./DialogJustForm.vue";
|
||||
import moment from "moment";
|
||||
|
||||
const DIALOG_WITH_MENU = "DialogWithMenu";
|
||||
const DIALOG_JUST_FORM = "DialogJustForm";
|
||||
const dictList = JSON.parse(localStorage.getItem("dictList"));
|
||||
|
||||
export default {
|
||||
name: "ListSectionWithHead",
|
||||
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
|
||||
props: {
|
||||
headConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: "",
|
||||
form: null,
|
||||
}),
|
||||
},
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
table: null,
|
||||
column: null,
|
||||
}),
|
||||
},
|
||||
dialogConfig: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
pageUrl: {
|
||||
type: String,
|
||||
default: "#",
|
||||
},
|
||||
extraSearchConditions: {
|
||||
// 除了 limit 和 page 之外的查询参数
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dialogType() {
|
||||
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
refreshLayoutKey: null,
|
||||
DIALOG_WITH_MENU,
|
||||
DIALOG_JUST_FORM,
|
||||
dialogVisible: false,
|
||||
tableLoading: false,
|
||||
params: {}, // 由 search form 生成的查询条件
|
||||
listQuery: {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
},
|
||||
conditions: {
|
||||
ongoing: {
|
||||
limit: 20,
|
||||
code: "",
|
||||
page: 1,
|
||||
},
|
||||
pending: {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
},
|
||||
finished: {
|
||||
limit: 20,
|
||||
page: 1,
|
||||
},
|
||||
},
|
||||
dataList: [],
|
||||
totalPage: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions));
|
||||
},
|
||||
activated() {
|
||||
this.refreshLayoutKey = this.layoutTable();
|
||||
},
|
||||
methods: {
|
||||
getAList(payload) {
|
||||
if (this.pageUrl != "#") {
|
||||
this.tableLoading = true;
|
||||
this.$http.post(this.pageUrl, payload).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.tableLoading = false;
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: "请检查page url",
|
||||
type: "error",
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
layoutTable() {
|
||||
return Math.random();
|
||||
},
|
||||
|
||||
/** 处理 表格操作 */
|
||||
handleOperate({ type, data }) {
|
||||
console.log("payload", type, data);
|
||||
// 编辑、删除、跳转路由、打开弹窗（动态component）都可以在配置里加上 url
|
||||
// payload: { type: string, data: string | number | object }
|
||||
switch (type) {
|
||||
case "delete": {
|
||||
// 确认是否删除
|
||||
return this.$confirm(`确定要删除 "${data.name}" 吗?`, "提示", {
|
||||
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}`],
|
||||
}).then(({ data: res }) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success("删除成功!");
|
||||
// 获取数据
|
||||
this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
case "edit": {
|
||||
this.openDialog(data); /** data is ==> id */
|
||||
break;
|
||||
}
|
||||
case "view":
|
||||
case "view-detail-action": {
|
||||
this.openDialog(data, true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleRefreshDatalist() {
|
||||
location.reload();
|
||||
},
|
||||
|
||||
handleBtnClick({ btnName, payload }) {
|
||||
switch (btnName) {
|
||||
case "查询": {
|
||||
this.params = Object.assign({}, payload);
|
||||
console.log("this.params", this.params);
|
||||
if ("timerange" in payload) {
|
||||
// 处理时间段
|
||||
if (!!payload.timerange) {
|
||||
const [startTime, endTime] = payload["timerange"];
|
||||
this.params.startTime = moment(startTime).format("YYYY-MM-DDTHH:mm:ss");
|
||||
this.params.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss");
|
||||
}
|
||||
delete this.params.timerange;
|
||||
}
|
||||
// 发起请求
|
||||
this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
|
||||
}
|
||||
case "新增":
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/** 导航器的操作 */
|
||||
handleSizeChange(newSize) {
|
||||
this.listQuery.page = 1;
|
||||
this.listQuery.limit = newSize;
|
||||
this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
|
||||
},
|
||||
|
||||
handlePageChange(newPage) {
|
||||
this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
|
||||
},
|
||||
|
||||
/** 打开对话框 */
|
||||
openDialog(row_id, detail_mode) {
|
||||
this.dialogVisible = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
// this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
padding: 16px;
|
||||
padding-bottom: 3.125rem;
|
||||
}
|
||||
|
||||
section:not(:last-of-type) {
|
||||
/* margin-bottom: 1rem; */
|
||||
border-bottom: 1px solid #f1e3d5;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@
|
||||
**/
|
||||
-->
|
||||
<template>
|
||||
<div class="list-view-with-head">
|
||||
<div class="">
|
||||
<section class="ongoing-order" id="ongoing">
|
||||
<BaseSearchForm
|
||||
head-title="进行中的订单"
|
||||
@ -500,50 +500,7 @@ 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; */
|
||||
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;
|
||||
|
||||
@ -32,21 +32,16 @@ export default function () {
|
||||
{ name: 'destroy-order', label: '废除', icon: 'delete-solid', showText: true },
|
||||
],
|
||||
'pending': [
|
||||
{ name: 'confirm-order', label: '确认订单' },
|
||||
{ name: 'edit' },
|
||||
{ name: 'move-up', label: '上移', icon: 'caret-top' },
|
||||
{ name: 'move-down', label: '下移', icon: 'caret-bottom' },
|
||||
{ name: 'move-to-top', label: '移至顶部', icon: 'upload2' },
|
||||
{ name: 'move-to-bottom', label: '移至底部', icon: 'download' },
|
||||
// { name: 'move-to-top', label: 'to top' },
|
||||
// { name: 'move-up', label: 'up' },
|
||||
// { name: 'move-down', label: 'down' },
|
||||
// { name: 'move-to-bottom', label: 'to bottom' },
|
||||
{ name: 'delete' },
|
||||
|
||||
'edit',
|
||||
{ name: 'confirm-order', label: '确认订单', icon: 'success', showText: true },
|
||||
{ name: 'move-up', label: '上移', icon: 'caret-top', showText: true },
|
||||
{ name: 'move-down', label: '下移', icon: 'caret-bottom', showText: true },
|
||||
{ name: 'move-to-top', label: '至顶', icon: 'upload2', showText: true },
|
||||
{ name: 'move-to-bottom', label: '至底', icon: 'download', showText: true },
|
||||
'delete'
|
||||
],
|
||||
'finished': [
|
||||
// { name: 'view-detail', label: '查看详情' }
|
||||
{ name: 'end-order', label: '结束订单', icon: 'error', showText: true },
|
||||
]
|
||||
}
|
||||
|
||||
@ -88,7 +83,7 @@ export default function () {
|
||||
subcomponent: TableOperaionComponent,
|
||||
options: operations[type],
|
||||
width: operations[type].length * 64
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
@ -6,7 +6,33 @@
|
||||
<a href="#finished" :class="{ active: activeTable === '#finished' }">完成订单</a>
|
||||
</div>
|
||||
|
||||
<ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" />
|
||||
<div class="list-view-with-head-list">
|
||||
<!-- <ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" /> -->
|
||||
<ListSectionWithHead
|
||||
id="ongoing"
|
||||
:extra-search-conditions="{ code: '' }"
|
||||
:page-url="allUrls.confirmedOrder"
|
||||
:table-config="{ table: null, column: tableConfigs.ongoingTable }"
|
||||
:head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }"
|
||||
:dialog-config="null"
|
||||
/>
|
||||
<ListSectionWithHead
|
||||
id="pending"
|
||||
:extra-search-conditions="{ code: '' }"
|
||||
:page-url="allUrls.unConfirmedOrder"
|
||||
:table-config="{ table: null, column: tableConfigs.pendingTable }"
|
||||
:head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }"
|
||||
:dialog-config="null"
|
||||
/>
|
||||
<ListSectionWithHead
|
||||
id="finished"
|
||||
:extra-search-conditions="{ code: '' }"
|
||||
:page-url="allUrls.finishedOrder"
|
||||
:table-config="{ table: null, column: tableConfigs.finishedTable }"
|
||||
:head-config="{ title: '完成的订单', form: headFormConfigs.finishedTableSearch }"
|
||||
:dialog-config="null"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div style="padding: 16px; background: #fff; border-radius: 8px">
|
||||
@ -27,10 +53,10 @@
|
||||
<script>
|
||||
import initConfig from "./config";
|
||||
import ListViewWithHead from "./components/ListViewWithHead.vue";
|
||||
|
||||
import ListSectionWithHead from "./components/ListSectionWithHead.vue";
|
||||
export default {
|
||||
name: "OrderView",
|
||||
components: { ListViewWithHead },
|
||||
components: { ListViewWithHead, ListSectionWithHead },
|
||||
provide() {
|
||||
return {
|
||||
urls: this.allUrls,
|
||||
@ -43,6 +69,7 @@ export default {
|
||||
headFormConfigs,
|
||||
allUrls: urls,
|
||||
dialogConfigs,
|
||||
activeTable: "",
|
||||
};
|
||||
// return {
|
||||
// dataList: [
|
||||
@ -57,12 +84,16 @@ export default {
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
watch: {
|
||||
$route: function (route) {
|
||||
if (route.hash) {
|
||||
this.activeTable = route.hash;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleUp({ $index, row }) {
|
||||
console.log("row: ", $index, row);
|
||||
// const { id } = row;
|
||||
// const index = this.dataList.findIndex((o) => o.id === id);
|
||||
// console.log("index: ", index);
|
||||
if ($index === 0) return;
|
||||
const [item] = this.dataList.splice($index, 1);
|
||||
console.log("item: ", item);
|
||||
@ -80,4 +111,49 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<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-list {
|
||||
background: white;
|
||||
/* height: 100%; */
|
||||
/* min-height: inherit; */
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.list-view-with-head-list {
|
||||
width: 1px;
|
||||
margin-left: 256px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user