优化表格配置

src/api/model/orders.js

@@ -0,0 +1,56 @@
+import config from "@/config";
+import http from "@/utils/request";
+
+export default {
+	order:{
+		list: {
+			url: `${config.API_URL}/order.list`,
+			name: "获取加工单列表",
+			get: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		add: {
+			url: `${config.API_URL}/order.add`,
+			name: "获取加工单添加",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		delete: {
+			url: `${config.API_URL}/order.delete`,
+			name: "获取加工单删除",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		cancel:{
+			url: `${config.API_URL}/order.cancel`,
+			name: "加工单撤回",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		info:{
+			url: `${config.API_URL}/order.info`,
+			name: "加工单详情",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		review: {
+			url: `${config.API_URL}/order.review`,
+			name: "加工单审核",
+			post: async function (params) {
+				return await http.post(this.url, params);
+			},
+		},
+		active: {
+			url: `${config.API_URL}/order.active.list`,
+			name: "已排期工单",
+			get: async function (params) {
+				return await http.post(this.url, params);
+			},
+		}
+	}
+};

src/components/scTable/index.vue

@@ -113,7 +113,7 @@
 				return Number(this.height)?Number(this.height)+'px':this.height
 			},
 			_table_height() {
-				return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
+				return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 51px)"
 			}
 		},
 		data() {

src/config/route.js

@@ -64,7 +64,7 @@ const routes = [
 		children: [{
 			name: "order",
 			path: "/order",
-			component: "home",
+			component: "order/workOrder",
 			meta: {
 				icon: "sc-icon-Console",
 				title: "维保工单",

src/style/app.scss

@@ -82,7 +82,7 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e8e8e8;}
 .adminui-tags ul {display: flex;overflow: hidden;}
 .adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
-.adminui-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
+.adminui-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0;background-image: linear-gradient(#fff, #e6e6e6);}
 .adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;display: flex;align-items: center;}
 .adminui-tags li i {margin-left:10px;border-radius: 50%;width:15px;height:15px;display: flex;align-items: center;justify-content: center;}
 .adminui-tags li i:hover {background: var(--el-color-danger);color: #fff;}
@@ -90,7 +90,7 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-tags li.active a {color: #409EFF;}
 .adminui-tags li.sortable-ghost {opacity: 0;}
 
-.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;padding: 10px;box-sizing: border-box;}
+.adminui-main {background-color: #f6f8f9;height: 100%; flex: 1;padding: 10px;box-sizing: border-box;}
 .adminui-main .mainBox{height: calc(100%);overflow: auto;background-color: #FFFFFF;padding: 0 10px;border-radius: 6px;}
 
 /*页面最大化*/

src/style/fix.scss

@@ -25,6 +25,15 @@
 	--el-color-primary-dark-9: #010a13;
 
 	--el-menu-item-height:50px;
+	--el-component-size-small:28px;
+}
+
+.el-button--small{
+	height: 28px;
+}
+.el-pagination{
+	--el-pagination-button-width-small:28px;
+	--el-pagination-button-height-small:28px;
 }
 
 .el-menu {border: none!important;}
@@ -33,14 +42,26 @@
 .el-container {height: 100%;}
 .el-aside {border-right: 1px solid var(--el-border-color-light);}
 .el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
-.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 0;display: flex;justify-content: space-between;align-items: center;}
+.el-header {background: #fff;border-bottom: 1px solid #F6F6F6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
-.mainBox .el-header{margin-bottom: 10px;}
+//.mainBox .el-header{margin-bottom: 10px;}
+.mainBoxHeaderNoBorder .el-header{border-bottom: 0;padding: 0;}
+.mainHeaderNoPadding .el-header{padding-left: 0;padding-right: 0;}
 .el-header .left-panel {display: flex;align-items: center;}
 .el-header .right-panel {display: flex;align-items: center;}
 .el-header .right-panel > * + * {margin-left:10px;}
 .el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;}
 .el-main {padding:10px;width: 100%;height: 100%;box-sizing: border-box;background: var(--el-color-white);border-radius: 4px;}
-.el-main.nopadding {padding:0;background: #fff;}
+.el-main.nopadding {padding:0;background: #fff;display: flex;flex-direction: column;}
+.el-main.nopadding .scTable{flex: 1;overflow: hidden;}
+
+/** 列表上面的检索 */
+.el-main.nopadding .searchMain{display: flex;flex-wrap: wrap;align-items: self-end;padding-bottom: 10px;margin: 20px 0 0 0; border-bottom: 1px solid var(--el-border-color-light);}
+.el-main.nopadding .searchMainNoTop{margin-top: 0;}
+.el-main.nopadding .searchMain .searchItem{display: flex;flex-direction: column;align-items: flex-start;margin-right: 20px;margin-bottom: 10px;}
+.el-main.nopadding .searchMain .searchItem .name{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #303133;padding-bottom: 5px;text-align: right;}
+.el-main.nopadding .searchMain .searchItem .input{width: 230px;}
+.el-main.nopadding .searchMain .searchItem.searchBtn{display: flex;flex-direction: row;}
+
 .el-drawer__body {overflow: auto;padding:0;}
 .el-popconfirm__main {margin: 14px 0;}
 .el-card__header {border-bottom: 0;font-size: 17px;font-weight: bold;padding:15px 20px 0px 20px;}

src/style/home.scss

@@ -132,7 +132,7 @@
 			.comMain{
 				.num{
 					color: var(--el-color-dark);
-					font-size: 30px;
+					font-size: 28px;
 					font-weight: 500;
 					.unit{
 						font-weight: normal;

src/views/document/document.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-container class="">
+	<el-container class="mainHeaderNoPadding">
 		<el-header>
 			<div class="left-panel">
 				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增</el-button>
@@ -12,12 +12,12 @@
 		</el-header>
 		<el-main class="nopadding">
 			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
-				<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
+				<el-table-column label="工单号" prop="order_sn" width="150"></el-table-column>
 				<el-table-column label="别名" prop="alias" width="200"></el-table-column>
 				<el-table-column label="排序" prop="sort" width="80"></el-table-column>
 				<el-table-column label="状态" prop="status" width="80">
 					<template #default="scope">
-						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
+						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
 					</template>
 				</el-table-column>
 				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>

src/views/early/list.vue

@@ -1,26 +1,43 @@
 <template>
-	<el-container class="mainBox">
+	<el-container class="mainBox mainBoxHeaderNoBorder">
-		<el-header>
-			<div class="left-panel">
-				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增</el-button>
-				<el-button  :size="size" plain icon="el-icon-plus" @click="permission">上传</el-button>
-				<el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
-			</div>
-			<div class="right-panel">
-
-			</div>
-		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
+			<div class="searchMain">
-				<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
+				<div class="searchItem">
+					<label class="name">时间</label>
+					<el-date-picker class="input" type="daterange" :size="size" v-model="params.keyword" align="right" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
+				</div>
+				<div class="searchItem">
+					<label class="name">工单号</label>
+					<el-input class="input" :size="size" v-model="params.keyword" placeholder="工单号" clearable></el-input>
+				</div>
+				<div class="searchItem">
+					<label class="name">维保供应商</label>
+					<el-select class="input" :size="size" v-model="params.keyword" placeholder="维保供应商" clearable>
+						<el-option v-for="item in setMap.status" :key="item" :label="item.name" :value="item.value"></el-option>
+					</el-select>
+				</div>
+				<div class="searchItem">
+					<label class="name">状态</label>
+					<el-select class="input" :size="size" v-model="params.keyword" placeholder="状态" clearable>
+						<el-option v-for="item in setMap.status" :key="item" :label="item.name" :value="item.value"></el-option>
+					</el-select>
+				</div>
+				<div class="searchItem searchBtn">
+					<el-button :size="size" type="primary" icon="el-icon-search" @click="upsearch">查询</el-button>
+					<el-button :size="size" type="info" icon="el-icon-RefreshRight">重置</el-button>
+				</div>
+			</div>
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe :size="size">
+				<el-table-column label="序号" type="index" width="50"></el-table-column>
+				<el-table-column label="工单号" prop="order_sn" width="150"></el-table-column>
 				<el-table-column label="别名" prop="alias" width="200"></el-table-column>
 				<el-table-column label="排序" prop="sort" width="80"></el-table-column>
+				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
 				<el-table-column label="状态" prop="status" width="80">
 					<template #default="scope">
-						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
+						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
 					</template>
 				</el-table-column>
-				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
 				<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
 				<el-table-column label="操作" fixed="right" align="right" width="170">
 					<template #default="scope">
@@ -58,15 +75,17 @@ export default {
 	data() {
 		return {
 			size:'small',
+			setMap:{
+				status:[]
+			},
+
 			dialog: {
 				save: false,
 				permission: false
 			},
-			apiObj: [
+			apiObj: this.$API.orders.order.list,
-				{},{},{}
-			],
 			selection: [],
-			search: {
+			params: {
 				keyword: null
 			}
 		}

src/views/order/workOrder.vue

@@ -0,0 +1,212 @@
+<template>
+	<el-container class="mainBox mainBoxHeaderNoBorder">
+				<el-header>
+					<div class="left-panel">
+						<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增</el-button>
+						<el-button  :size="size" plain icon="el-icon-plus" @click="permission">上传</el-button>
+					</div>
+					<div class="right-panel">
+
+					</div>
+				</el-header>
+		<el-main class="nopadding">
+			<div class="searchMain searchMainNoTop">
+				<div class="searchItem">
+					<label class="name">生产日期</label>
+					<el-date-picker class="input" type="date" :size="size" v-model="params.keyword" value-format="yyyy-MM-dd" placeholder="生产日期" clearable></el-date-picker>
+				</div>
+				<div class="searchItem">
+					<label class="name">返场日期</label>
+					<el-date-picker class="input" type="date" :size="size" v-model="params.keyword" value-format="yyyy-MM-dd" placeholder="返场日期" clearable></el-date-picker>
+				</div>
+				<div class="searchItem">
+					<label class="name">处理日期</label>
+					<el-date-picker class="input" type="date" :size="size" v-model="params.keyword" value-format="yyyy-MM-dd" placeholder="处理日期" clearable></el-date-picker>
+				</div>
+				<div class="searchItem">
+					<label class="name">客户名称</label>
+					<el-input class="input" :size="size" v-model="params.keyword" placeholder="维保供应商" clearable></el-input>
+				</div>
+				<div class="searchItem">
+					<label class="name">状态</label>
+					<el-select class="input" :size="size" v-model="params.keyword" placeholder="状态" clearable>
+						<el-option v-for="item in setMap.status" :key="item" :label="item.name" :value="item.value"></el-option>
+					</el-select>
+				</div>
+				<div class="searchItem">
+					<label class="name">工单号</label>
+					<el-input class="input" :size="size" v-model="params.keyword" placeholder="工单号" clearable></el-input>
+				</div>
+				<div class="searchItem">
+					<label class="name">工单号</label>
+					<el-input class="input" :size="size" v-model="params.keyword" placeholder="工单号" clearable></el-input>
+				</div>
+				<div class="searchItem searchBtn">
+					<el-button :size="size" type="primary" icon="el-icon-search" @click="upsearch">查询</el-button>
+					<el-button :size="size" type="info" icon="el-icon-RefreshRight">重置</el-button>
+				</div>
+			</div>
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe :size="size">
+				<el-table-column label="序号" type="index" width="50"></el-table-column>
+				<el-table-column label="工单号" prop="order_sn" width="150"></el-table-column>
+				<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
+				<el-table-column label="别名" prop="alias" width="200"></el-table-column>
+				<el-table-column label="排序" prop="sort" width="80"></el-table-column>
+				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
+				<el-table-column label="状态" prop="status" width="80">
+					<template #default="scope">
+						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
+					</template>
+				</el-table-column>
+				<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="right" width="170">
+					<template #default="scope">
+						<el-button-group>
+							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+								<template #reference>
+									<el-button text type="primary" size="small">删除</el-button>
+								</template>
+							</el-popconfirm>
+						</el-button-group>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<!--	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>-->
+
+	<!--	<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>-->
+
+</template>
+
+<script>
+// import saveDialog from './save'
+// import permissionDialog from './permission'
+
+export default {
+	name: 'document',
+	components: {
+		// saveDialog,
+		// permissionDialog
+	},
+	data() {
+		return {
+			size:'small',
+			setMap:{
+				status:[]
+			},
+
+			dialog: {
+				save: false,
+				permission: false
+			},
+			apiObj:this.$API.orders.order.list,
+			selection: [],
+			params: {
+				keyword: null
+			}
+		}
+	},
+	methods: {
+		//添加
+		add(){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open()
+			})
+		},
+		//编辑
+		table_edit(row){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('edit').setData(row)
+			})
+		},
+		//查看
+		table_show(row){
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('show').setData(row)
+			})
+		},
+		//权限设置
+		permission(){
+			this.dialog.permission = true
+			this.$nextTick(() => {
+				this.$refs.permissionDialog.open()
+			})
+		},
+		//删除
+		async table_del(row){
+			const reqData = {id: row.id}
+			const res = await this.$API.demo.post.post(reqData);
+			if(res.code == 200){
+				this.$refs.table.refresh()
+				this.$message.success("删除成功")
+			}
+		},
+		//批量删除
+		async batch_del(){
+			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+				type: 'warning'
+			}).then(() => {
+				const loading = this.$loading();
+				this.$refs.table.refresh()
+				loading.close();
+				this.$message.success("操作成功")
+			}).catch(() => {
+
+			})
+		},
+		//表格选择后回调事件
+		selectionChange(selection){
+			this.selection = selection;
+		},
+		//表格内开关
+		changeSwitch(val, row){
+			row.status = row.status == '1'?'0':'1'
+			row.$switch_status = true;
+			setTimeout(()=>{
+				delete row.$switch_status;
+				row.status = val;
+				this.$message.success("操作成功")
+			}, 500)
+		},
+		//搜索
+		upsearch(){
+
+		},
+		//根据ID获取树结构
+		filterTree(id){
+			var target = null;
+			function filter(tree){
+				tree.forEach(item => {
+					if(item.id == id){
+						target = item
+					}
+					if(item.children){
+						filter(item.children)
+					}
+				})
+			}
+			filter(this.$refs.table.tableData)
+			return target
+		},
+		//本地更新数据
+		handleSaveSuccess(data, mode){
+			if(mode=='add'){
+				this.$refs.table.refresh()
+			}else if(mode=='edit'){
+				this.$refs.table.refresh()
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/userCenter/user/bind.vue

@@ -95,7 +95,7 @@
 export default {
 	data() {
 		return {
-			size:'', // small
+			size:'small',
 			wechat:{
 				avatar:'',
 				nick_name:'',