From 591847e299a5211e0c345325f9fb46679d734ab3 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sat, 18 Sep 2021 15:08:32 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E8=A1=A8=E6=A0=BC=E5=88=97=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/system.js           |  16 +++
 src/router/systemRouter.js        |   9 ++
 src/views/setting/table/index.vue | 118 ++++++++++++++++++++
 src/views/setting/table/save.vue  | 180 ++++++++++++++++++++++++++++++
 4 files changed, 323 insertions(+)
 create mode 100644 src/views/setting/table/index.vue
 create mode 100644 src/views/setting/table/save.vue

diff --git a/src/api/model/system.js b/src/api/model/system.js
index b646cd36..2fe9849e 100644
--- a/src/api/model/system.js
+++ b/src/api/model/system.js
@@ -76,5 +76,21 @@ export default {
 				return await http.get(this.url, params);
 			}
 		}
+	},
+	table: {
+		list: {
+			url: `${config.API_URL}/system/table/list`,
+			name: "表格列管理列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		},
+		info: {
+			url: `${config.API_URL}/system/table/info`,
+			name: "表格列管理详情",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
 	}
 }
diff --git a/src/router/systemRouter.js b/src/router/systemRouter.js
index df3705d9..a032cfae 100644
--- a/src/router/systemRouter.js
+++ b/src/router/systemRouter.js
@@ -32,6 +32,15 @@ const routes = [{
 							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
+					},
+					{
+						name: "tableSetting",
+						path: "/setting/table",
+						meta: {
+							title: "表格列管理",
+							icon: "el-icon-s-fold",
+						},
+						component: () => import(/* webpackChunkName: "tableSetting" */ '@/views/setting/table'),
 					}
 				]
 			}
diff --git a/src/views/setting/table/index.vue b/src/views/setting/table/index.vue
new file mode 100644
index 00000000..8fea26c2
--- /dev/null
+++ b/src/views/setting/table/index.vue
@@ -0,0 +1,118 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="标识" prop="code" width="150"></el-table-column>
+				<el-table-column label="表格名称" prop="name" width="250"></el-table-column>
+
+				<el-table-column label="操作" fixed="right" align="right" width="120">
+					<template #default="scope">
+						<el-button type="text" 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 type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+	
+</template>
+
+<script>
+	import saveDialog from './save'
+	
+	export default {
+		name: 'tableSetting',
+		components: {
+			saveDialog
+		},
+		data() {
+			return {
+				dialog: {
+					save: false
+				},
+				apiObj: this.$API.system.table.list,
+				selection: []
+			}
+		},
+		mounted() {
+
+		},
+		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)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/setting/table/save.vue b/src/views/setting/table/save.vue
new file mode 100644
index 00000000..dafc0d06
--- /dev/null
+++ b/src/views/setting/table/save.vue
@@ -0,0 +1,180 @@
+<template>
+	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
+		<el-container v-loading="loading">
+			<el-main style="padding:0 20px 20px 20px">
+
+				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="top">
+					<el-row :gutter="20">
+						<el-col :span="16">
+							<el-form-item label="表格名称" prop="name">
+								<el-input v-model="form.name" placeholder="请输入中文描述标题"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="标识" prop="code">
+								<el-input v-model="form.code" placeholder="请输入唯一标识"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-form-item>
+						<el-checkbox v-model="form.remoteSort" label="远程排序"></el-checkbox>
+						<el-checkbox v-model="form.remoteFilter" label="远程过滤"></el-checkbox>
+					</el-form-item>
+					<el-form-item label="表格列" prop="column">
+						<sc-form-table v-model="form.column" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
+							<el-table-column prop="label" label="名称">
+								<template #default="scope">
+									<el-input v-model="scope.row.label" placeholder="请输入名称"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="prop" label="字段" width="150">
+								<template #default="scope">
+									<el-input v-model="scope.row.prop" placeholder="请输入字段"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="width" label="宽度" width="100">
+								<template #default="scope">
+									<el-input v-model="scope.row.width" placeholder="请输入宽度"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="hide" label="隐藏" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.hide"></el-checkbox>
+								</template>
+							</el-table-column>
+							<el-table-column prop="sortable" label="排序" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.sortable"></el-checkbox>
+								</template>
+							</el-table-column>
+							<el-table-column prop="filters" label="过滤项" width="80" align="center">
+								<template #default="scope">
+									<el-button type="text" :style="{'color':scope.row.filters.length==0?'#bbb':null}" @click="setFilters(scope.row.filters)">过滤项</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column prop="fixed" label="固定" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.fixed"></el-checkbox>
+								</template>
+							</el-table-column>
+						</sc-form-table>
+					</el-form-item>
+				</el-form>
+			</el-main>
+			<el-footer>
+				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
+				<el-button @click="visible=false">取消</el-button>
+			</el-footer>
+		</el-container>
+
+		<el-drawer title="过滤项配置" v-model="setFiltersVisible" :size="500" destroy-on-close>
+			<el-main style="padding:0 20px 20px 20px">
+				<sc-form-table v-model="selectionFilters" :addTemplate="filtersAddTemplate" drag-sort placeholder="暂无数据">
+					<el-table-column prop="text" label="名称">
+						<template #default="scope">
+							<el-input v-model="scope.row.text" placeholder="请输入名称"></el-input>
+						</template>
+					</el-table-column>
+					<el-table-column prop="value" label="值" width="150">
+						<template #default="scope">
+							<el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
+						</template>
+					</el-table-column>
+				</sc-form-table>
+			</el-main>
+		</el-drawer>
+
+
+	</el-drawer>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				loading: false,
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑'
+				},
+				form: {},
+				rules: {
+					name: [
+						{required: true, message: '请输入表格名称', trigger: 'blur'}
+					],
+					code: [
+						{required: true, message: '请输入唯一标识', trigger: 'blur'}
+					]
+				},
+				addTemplate: {
+					label: '',
+					prop: '',
+					width: '100',
+					hide: false,
+					sortable: false,
+					fixed: false,
+					filters: []
+				},
+				visible: false,
+				isSaveing: false,
+				selectionFilters: [],
+				filtersAddTemplate: {
+					text: '',
+					value: ''
+				},
+				setFiltersVisible: false
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.loading = true
+				const params = {
+					id: data.id
+				}
+				setTimeout(async ()=>{
+					var res = await this.$API.system.table.info.get(params)
+					this.loading = false
+					this.form = res.data
+				},400)
+
+			},
+			//设置过滤项
+			setFilters(filters){
+				this.selectionFilters = filters
+				this.setFiltersVisible = true
+			}
+		}
+	}
+</script>
+
+<style>
+</style>