src/views/quality/base/qualityInspectionDet/index.vue

@@ -1,109 +1,26 @@
 <template>
 	<div class="app-container">
 		<!-- 搜索工作栏 -->
-		<el-form
-			:model="queryParams"
-			ref="queryForm"
-			size="small"
-			:inline="true"
-			v-show="showSearch"
-			label-width="68px">
-			<el-form-item label="检测内容" prop="content">
-				<el-input
-					v-model="queryParams.content"
-					placeholder="请输入检测内容"
-					clearable
-					@keyup.enter.native="handleQuery" />
-			</el-form-item>
-			<el-form-item label="创建时间" prop="createTime">
-				<el-date-picker
-					v-model="queryParams.createTime"
-					style="width: 240px"
-					value-format="yyyy-MM-dd HH:mm:ss"
-					type="daterange"
-					range-separator="-"
-					start-placeholder="开始日期"
-					end-placeholder="结束日期"
-					:default-time="['00:00:00', '23:59:59']" />
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
-					搜索
-				</el-button>
-				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-			</el-form-item>
-		</el-form>
-
-		<!-- 操作工具栏 -->
-		<el-row :gutter="10" class="mb8">
-			<el-col :span="1.5">
-				<el-button
-					type="primary"
-					plain
-					icon="el-icon-plus"
-					size="mini"
-					@click="handleAdd"
-					v-hasPermi="['base:quality-inspection-det:create']">
-					新增
-				</el-button>
-			</el-col>
-			<el-col :span="1.5">
-				<el-button
-					type="warning"
-					plain
-					icon="el-icon-download"
-					size="mini"
-					@click="handleExport"
-					:loading="exportLoading"
-					v-hasPermi="['base:quality-inspection-det:export']">
-					导出
-				</el-button>
-			</el-col>
-			<right-toolbar
-				:showSearch.sync="showSearch"
-				@queryTable="getList"></right-toolbar>
-		</el-row>
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
 
 		<!-- 列表 -->
-		<el-table v-loading="loading" :data="list">
-			<el-table-column label="ID" align="center" prop="id" />
-			<el-table-column label="检测类型id" align="center" prop="typeId" />
-			<el-table-column label="检测内容" align="center" prop="content" />
-			<el-table-column label="检测编码" align="center" prop="code" />
-			<el-table-column label="备注" align="center" prop="remark" />
-			<el-table-column
-				label="创建时间"
-				align="center"
-				prop="createTime"
-				width="180">
-				<template v-slot="scope">
-					<span>{{ parseTime(scope.row.createTime) }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emit-fun="handleEmitFun">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
 				label="操作"
-				align="center"
-				class-name="small-padding fixed-width">
-				<template v-slot="scope">
-					<el-button
-						size="mini"
-						type="text"
-						icon="el-icon-edit"
-						@click="handleUpdate(scope.row)"
-						v-hasPermi="['base:quality-inspection-det:update']">
-						修改
-					</el-button>
-					<el-button
-						size="mini"
-						type="text"
-						icon="el-icon-delete"
-						@click="handleDelete(scope.row)"
-						v-hasPermi="['base:quality-inspection-det:delete']">
-						删除
-					</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" />
+		</base-table>
+
 		<!-- 分页组件 -->
 		<pagination
 			v-show="total > 0"
@@ -113,13 +30,12 @@
 			@pagination="getList" />
 
 		<!-- 对话框(添加 / 修改) -->
-		<el-dialog
-			:title="title"
-			:visible.sync="open"
-			width="500px"
-			v-dialogDrag
-			append-to-body>
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
 				<el-form-item label="检测类型id" prop="typeId">
 					<el-select v-model="form.typeId" placeholder="请选择检测类型id">
 						<el-option label="请选择字典生成" value="" />
@@ -135,11 +51,8 @@
 					<el-input v-model="form.remark" placeholder="请输入备注" />
 				</el-form-item>
 			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="submitForm">确 定</el-button>
-				<el-button @click="cancel">取 消</el-button>
-			</div>
-		</el-dialog>
+		</base-dialog>
+
 	</div>
 </template>
 
@@ -158,6 +71,82 @@ export default {
 	components: {},
 	data() {
 		return {
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '检测内容',
+					placeholder: '请输入检测内容',
+					param: 'content',
+				},
+				{
+					type: 'datePicker',
+					label: '创建时间',
+					dateType: 'daterange', // datetimerange
+					format: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'yyyy-MM-ddTHH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'createTime',
+					width: 350,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '重置',
+				// 	name: 'reset',
+				// },
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:quality-inspection-det:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:quality-inspection-type:export')
+				// 		? 'button'
+				// 		: '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			tableBtn: [
+				this.$auth.hasPermi('base:quality-inspection-det:update') ? {
+					type: 'edit',
+					btnName: '修改',
+				} : undefined,
+				this.$auth.hasPermi('base:quality-inspection-det:delete') ? {
+					type: 'delete',
+					btnName: '删除',
+				} : undefined,
+			].filter(v=>v),
+			tableData: [],
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'typeId', label: '检测类型ID', align: 'center' },
+				{ prop: 'content', label: '检测类型内容', align: 'center' },
+				{ prop: 'code', label: '检测编码', align: 'center' },
+				{ prop: 'remark', label: '备注', align: 'center' },
+			],
 			// 遮罩层
 			loading: true,
 			// 导出遮罩层
@@ -196,6 +185,47 @@ export default {
 		this.getList();
 	},
 	methods: {
+		/** base table related */
+		handleTableBtnClick({ data, type }) {
+			switch (type) {
+				case 'edit':
+					this.handleUpdate(data);
+					break;
+				case 'delete':
+					this.handleDelete(data);
+					break;
+			}
+		},
+		/** search bar related */
+		handleSearchBarBtnClick(btn) {
+			const keys = ['name', 'createTime']; // timeVal
+			switch (btn.btnName) {
+				case 'search':
+					keys.forEach((key) => {
+						if (key == 'timeVal') {
+							this.queryParams['startTime'] = btn.timeVal[0];
+							this.queryParams['endTime'] = btn.timeVal[1];
+							return;
+						}
+						this.queryParams[key] = btn[key] || null;
+					});
+					this.handleQuery();
+					break;
+				case 'add':
+					this.handleAdd();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				case 'reset':
+					this.$refs['search-bar'].resetForm();
+					this.resetQuery();
+					break;
+			}
+		},
+		handleEmitFun(val) {
+			console.log('emit unf', val);
+		},
 		/** 查询列表 */
 		getList() {
 			this.loading = true;

src/views/quality/base/qualityInspectionType/index.vue

@@ -69,15 +69,15 @@ export default {
 	data() {
 		return {
 			tableBtn: [
-				{
+				this.$auth.hasPermi('base:quality-inspection-type:update') ? {
 					type: 'edit',
 					btnName: '修改',
-				},
-				{
+				} : undefined,
+				this.$auth.hasPermi('base:quality-inspection-type:delete') ? {
 					type: 'delete',
 					btnName: '删除',
-				},
-			],
+				} : undefined,
+			].filter(v=>v),
 			tableData: [],
 			tableProps: [
 				{