update style

This commit is contained in:
lb 2023-03-08 11:17:52 +08:00
parent a55d708a72
commit af69a4d53f
4 changed files with 213 additions and 169 deletions

View File

@ -35,7 +35,8 @@ export default {
<style> <style>
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px !important; width: 8px !important;
height: 8px !important;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -43,7 +44,10 @@ export default {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgb(188, 188, 188); height: 8px !important;
width: 8px !important;
background: rgba(200, 200, 200, 0.6);
border-radius: 4px !important;
} }
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {

View File

@ -6,61 +6,89 @@
--> -->
<template> <template>
<div class="list-view-with-head"> <div class="list-view-with-head">
<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> --> <!-- TODO: delete these demo links -->
<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" /> <ul>
<li><a href="#ongoing">ongoing</a></li>
<li><a href="#pending">pending</a></li>
<li><a href="#finished">finished</a></li>
</ul>
<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"
/>
<br>
<hr>
<br>
<BaseListTable <section class="ongoing-order" id="ongoing">
key="ended" <BaseSearchForm :head-config="{ fields: headConfigs.ongoingTableSearch }" @btn-click="handleBtnClick('ongoing', $event)" />
v-loading="tableLoading" <BaseListTable
:table-config="null" key="confirmed"
:column-config="tableConfigs.finishedTable" v-loading="tableLoading"
:table-data="dataList" :table-config="null"
@operate-event="handleOperate" :column-config="tableConfigs.ongoingTable"
@load-sub="handleLoadSub" :table-data="dataList"
:refresh-layout-key="refreshLayoutKey" @operate-event="handleOperate"
/> @load-sub="handleLoadSub"
<br> :refresh-layout-key="refreshLayoutKey"
<hr> />
<br>
<BaseListTable <el-pagination
key="unconfirmed" class="mt-5 flex justify-end"
v-loading="tableLoading" @size-change="handleSizeChange"
:table-config="null" @current-change="handlePageChange"
:column-config="tableConfigs.pendingTable" :current-page.sync="page"
:table-data="dataList" :page-sizes="[1, 5, 10, 20, 50, 100]"
@operate-event="handleOperate" :page-size="size"
@load-sub="handleLoadSub" :total="totalPage"
:refresh-layout-key="refreshLayoutKey" layout="total, sizes, prev, pager, next, jumper"
/> ></el-pagination>
</section>
<el-pagination <section class="pending-order" id="pending">
class="mt-5 flex justify-end" <BaseSearchForm :head-config="{ fields: headConfigs.pendingTableSearch }" @btn-click="handleBtnClick('pending', $event)" />
@size-change="handleSizeChange" <BaseListTable
@current-change="handlePageChange" key="unconfirmed"
:current-page.sync="page" v-loading="tableLoading"
:page-sizes="[1, 5, 10, 20, 50, 100]" :table-config="null"
:page-size="size" :column-config="tableConfigs.pendingTable"
:total="totalPage" :table-data="dataList"
layout="total, sizes, prev, pager, next, jumper" @operate-event="handleOperate"
></el-pagination> @load-sub="handleLoadSub"
<!-- :current-page.sync="currentPage" :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-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"
:page-size.sync="pageSize" --> :page-size.sync="pageSize" -->
</section>
<!-- <DialogWithMenu <!-- <DialogWithMenu
ref="edit-dialog" ref="edit-dialog"
@ -96,14 +124,18 @@ export default {
tableConfigs: { tableConfigs: {
type: Object, type: Object,
default: () => ({ default: () => ({
ongoingTable: null, ongoingTable: null,
finishedTable: null, finishedTable: null,
pendingTable: null pendingTable: null,
}) }),
}, },
headConfig: { headConfigs: {
type: Object, type: Object,
default: () => ({}), default: () => ({
ongoingTableSearch: null,
pendingTableSearch: null,
finishedTableSearch: null,
}),
}, },
/** 请求page接口的时候有些字段是必填的没有会报500把相关字段名传入这个prop: */ /** 请求page接口的时候有些字段是必填的没有会报500把相关字段名传入这个prop: */
listQueryExtra: { listQueryExtra: {
@ -211,46 +243,48 @@ export default {
}, },
inject: ["urls"], inject: ["urls"],
mounted() { mounted() {
this.getConfirmedList() this.getConfirmedList();
console.log("[list view with head]", this.headConfigs);
}, },
activated() { activated() {
this.refreshLayoutKey = this.layoutTable(); this.refreshLayoutKey = this.layoutTable();
}, },
methods: { methods: {
// get confirmed list // get confirmed list
getConfirmedList(){ getConfirmedList() {
this.$http.post(this.urls.confirmedOrder, { this.$http
bomId: "0", .post(this.urls.confirmedOrder, {
cate: "1", bomId: "0",
code: "39999", cate: "1",
startTime: '2022-02-05T22:00:00', code: "39999",
endTime: '2022-02-06T22:00:00', startTime: "2022-02-05T22:00:00",
id: "0", endTime: "2022-02-06T22:00:00",
limit: 10, id: "0",
page: 1, limit: 10,
shapeId: "1", page: 1,
techId: "0", shapeId: "1",
types: 1 // 0 , 1 , 2 , 3 , 4 5 , 6 techId: "0",
}).then(({data: res}) => { types: 1, // 0 , 1 , 2 , 3 , 4 5 , 6
if (res.code === 0) { })
console.log('[get confirmed list]', res) .then(({ data: res }) => {
} else { if (res.code === 0) {
this.$message({ console.log("[get confirmed list]", res);
message: `${res.code}: ${res.msg}`, } else {
type: 'error', this.$message({
duration: 1500 message: `${res.code}: ${res.msg}`,
}) type: "error",
} duration: 1500,
}) });
}
});
}, },
// get unconfirmed list // get unconfirmed list
getUnConfirmedList(){}, getUnConfirmedList() {},
// get ended list // get ended list
getEndedList(){ getEndedList() {
// //
}, },
handleLoadSub({ tree, treeNode, resolve }) { handleLoadSub({ tree, treeNode, resolve }) {
// console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve); // console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve);
this.$http.get(`${this.urls.tree}?rootId=${tree.id}`).then(({ data: res }) => { this.$http.get(`${this.urls.tree}?rootId=${tree.id}`).then(({ data: res }) => {
@ -430,7 +464,16 @@ export default {
/* height: 100%; */ /* height: 100%; */
min-height: inherit; min-height: inherit;
border-radius: 6px; border-radius: 6px;
padding: 16px;
box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125); box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
} }
section {
padding: 16px;
padding-bottom: 3.125rem;
}
section:not(:last-of-type) {
/* margin-bottom: 1rem; */
border-bottom: 1px solid #f1e3d5;
}
</style> </style>

View File

@ -150,9 +150,15 @@ export default function () {
plain: true plain: true
} }
}, },
], ],
'finished': [ 'finished': [
{
label: '订单号',
prop: 'code',
input: true,
bind: { placeholder: '请输入订单号' }
},
{ {
// 查询 // 查询
button: { button: {
@ -160,88 +166,10 @@ export default function () {
name: "查询", name: "查询",
}, },
}, },
{
label: '订单号',
prop: 'code',
input: true,
bind: { placeholder: '请输入订单号' }
},
] ]
})[type] })[type]
// const headFormFields = [
// {
// label: '订单号',
// prop: 'code',
// input: true,
// bind: { placeholder: '请输入订单号' }
// },
// // {
// // label: '子订单号',
// // prop: 'cate',
// // input: true,
// // bind: { placeholder: '请输入子订单号', rules: [{ type: 'number', message: '请输入整数', trigger: 'blur', transform: val => Number(val) }] }
// // },
// // {
// // label: "配方",
// // prop: "bomId",
// // select: [],
// // fn: () => this.$http.get('/pms/bom/page', { params: { key: '', limit: 999, page: 1 } }),
// // bind: { placeholder: "请选择配方" },
// // },
// // {
// // label: '砖型',
// // prop: 'shapeId',
// // select: [],
// // fn: () => this.$http.get('/pms/shape/page', { params: { key: '', limit: 999, page: 1 } }),
// // bind: { placeholder: "请选择砖型" },
// // },
// // {
// // label: '工艺',
// // prop: 'techId',
// // select: [],
// // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
// // bind: { placeholder: "请选择砖型" },
// // },
// // {
// // label: '订单状态',
// // prop: 'types', // 0等待, 1确认, 2生产3暂停, 4结束, 5接受, 6拒绝
// // select: [
// // {label: '等待', value: 0},
// // {label: '确认', value: 1},
// // {label: '生产', value: 2},
// // {label: '暂停', value: 3},
// // {label: '结束', value: 4},
// // {label: '接受', value: 5},
// // {label: '拒绝', value: 6},
// // ],
// // // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
// // bind: { placeholder: "请选择订单状态" },
// // },
// {
// button: {
// type: "primary",
// name: "查询",
// },
// },
// {
// button: {
// type: "primary",
// name: "新增",
// permission: "",
// },
// bind: {
// plain: true,
// },
// },
// ];
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dictList = JSON.parse(localStorage.getItem("dictList")); const dictList = JSON.parse(localStorage.getItem("dictList"));
const dialogConfigs = { const dialogConfigs = {
menu: [ menu: [
@ -417,3 +345,72 @@ export default function () {
}, },
}; };
} }
// const headFormFields = [
// {
// label: '订单号',
// prop: 'code',
// input: true,
// bind: { placeholder: '请输入订单号' }
// },
// // {
// // label: '子订单号',
// // prop: 'cate',
// // input: true,
// // bind: { placeholder: '请输入子订单号', rules: [{ type: 'number', message: '请输入整数', trigger: 'blur', transform: val => Number(val) }] }
// // },
// // {
// // label: "配方",
// // prop: "bomId",
// // select: [],
// // fn: () => this.$http.get('/pms/bom/page', { params: { key: '', limit: 999, page: 1 } }),
// // bind: { placeholder: "请选择配方" },
// // },
// // {
// // label: '砖型',
// // prop: 'shapeId',
// // select: [],
// // fn: () => this.$http.get('/pms/shape/page', { params: { key: '', limit: 999, page: 1 } }),
// // bind: { placeholder: "请选择砖型" },
// // },
// // {
// // label: '工艺',
// // prop: 'techId',
// // select: [],
// // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
// // bind: { placeholder: "请选择砖型" },
// // },
// // {
// // label: '订单状态',
// // prop: 'types', // 0等待, 1确认, 2生产3暂停, 4结束, 5接受, 6拒绝
// // select: [
// // {label: '等待', value: 0},
// // {label: '确认', value: 1},
// // {label: '生产', value: 2},
// // {label: '暂停', value: 3},
// // {label: '结束', value: 4},
// // {label: '接受', value: 5},
// // {label: '拒绝', value: 6},
// // ],
// // // fn: () => this.$http.post('/pms/equipmentTech/pageView', { key: '', shape: '', wsId: 0, limit: 999, page: 1 }),
// // bind: { placeholder: "请选择订单状态" },
// // },
// {
// button: {
// type: "primary",
// name: "查询",
// },
// },
// {
// button: {
// type: "primary",
// name: "新增",
// permission: "",
// },
// bind: {
// plain: true,
// },
// },
// ];

View File

@ -1,5 +1,5 @@
<template> <template>
<ListViewWithHead :table-configs="tableConfigs" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" /> <ListViewWithHead :table-configs="tableConfigs" :head-configs="headFormConfigs" :dialog-configs="dialogConfigs" />
<!-- <div style="padding: 16px; background: #fff; border-radius: 8px"> <!-- <div style="padding: 16px; background: #fff; border-radius: 8px">
<el-table :data="dataList"> <el-table :data="dataList">
<el-table-column key="id" prop="id" label="ID"></el-table-column> <el-table-column key="id" prop="id" label="ID"></el-table-column>