@@ -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> |
@@ -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> |