CZO_Boss/src/views/system/tableHead/index.vue

<template>
	<div class="page-container">
		<div class="search-container" v-show="menuId">
			<span style="margin-right: 12px"><strong>表头名称</strong></span>
			<el-input v-model="queryParams.columnName" placeholder="输入表头名称" clearable size="small" style="width: 150px" />
			<el-button type="primary" icon="el-icon-search" size="small " style="margin-left: 20px" @click="getList" v-hasPermi="['system:tableHead:listTable']">搜索</el-button>
		</div>
		<div class="content-container">
			<TreeChoice :dataList="menuList" nodeKey="id" nodeVal="menuName" @itemClick="menuClick" />
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag">表头管理</div>
					</div>
					<div class="actions">
						<el-button type="primary" icon="el-icon-plus" size="mini " style="margin: 0 0 10px 3px" @click="handleAdd" v-hasPermi="['system:tableHead:addTable']" :disabled="!menuId"
							>添加</el-button
						>
					</div>
				</div>
				<el-table v-loading="loading" :data="tableHeadList" border>
					<el-table-column type="index" width="100" align="center" label="序号" />
					<el-table-column label="列名称" prop="columnName" />
					<el-table-column label="前端列名" prop="uiColumn" :show-overflow-tooltip="true" width="300" />
					<el-table-column label="后端列名" prop="apiColum" :show-overflow-tooltip="true" width="300" />
					<el-table-column label="是否必须显示" align="center" width="100">
						<template slot-scope="scope">
							<input type="checkbox" :checked="scope.row.required == '0'" @change="handleStatusChange(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding" width="300">
						<template slot-scope="scope" v-if="scope.row.roleId !== 1">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:tableHead:updTable']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tableHead:delTable']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
			</div>
		</div>
		<el-dialog title="添加表头" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="所属菜单" prop="menuId">
					<el-input disabled :value="menuName" />
				</el-form-item>
				<el-form-item label="列名称" prop="columnName">
					<el-input v-model="form.columnName" placeholder="请输入列名称" />
				</el-form-item>
				<el-form-item label="前端列名" prop="uiColumn">
					<el-input v-model="form.uiColumn" placeholder="请输入列名称" />
				</el-form-item>
				<el-form-item label="后端列名" prop="apiColum">
					<el-input v-model="form.apiColum" placeholder="请输入列名称" />
				</el-form-item>
				<el-form-item label="排序" prop="orderNum">
					<el-input v-model.number="form.orderNum" placeholder="请输入排序值" />
				</el-form-item>
				<el-form-item label="是否必须显示" prop="required">
					<el-radio-group v-model="form.required">
						<el-radio v-for="dict in dict.type.sys_tableHead_required" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="cancel">取 消</el-button>
				<el-button size="small" type="primary" @click="submitForm">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { listMenu, tableHeadAdd, tableHeadList, tableHeadUpd, tableHeadDel } from '@/api/system/tableHead'
	import { checkPermi } from '@/utils/permission'
	import TreeChoice from '@/components/deptTreeChoice/index.vue'
	export default {
		name: 'TableHead',
		dicts: ['sys_tableHead_required'],
		components: {
			TreeChoice
		},
		data() {
			return {
				tabIndex: 1,
				//遮罩层
				loading: false,
				//菜单数据
				menuList: [],
				//选中的菜单id
				menuId: 0,
				//选中菜单名称
				menuName: '',
				//表头数据
				tableHeadList: [],
				//总条数
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					columnName: undefined
				},
				//弹窗显示
				open: false,
				form: {
					menuId: null,
					columnName: '',
					uiColumn: '',
					apiColum: '',
					required: '0',
					orderNum: ''
				},
				//表单验证
				rules: {
					columnName: [{ required: true, message: '列名称不能为空', trigger: 'submit' }],
					uiColumn: [{ required: true, message: '前端列名不能为空', trigger: 'submit' }],
					apiColum: [{ required: true, message: '后端列名不能为空', trigger: 'submit' }],
					orderNum: [
						{ required: true, message: '排序值不能为空', trigger: 'submit' },
						{ type: 'number', message: '排序值只能为数字', trigger: 'submit' }
					]
				}
			}
		},
		created() {
			this.getMenuList()
		},
		methods: {
			//获取菜单
			getMenuList() {
				listMenu().then((res) => {
					if (res.code == 200) {
						this.menuList = this.handleTree(res.data, 'menuId', 'parentId')
					}
				})
			},

			//点击菜单
			menuClick(data) {
				console.log(data)
				this.tableHeadList = []
				this.menuId = data.menuId
				this.menuName = data.menuName
				this.getList()
			},
			//获取表头数据
			getList() {
				if (!checkPermi(['system:tableHead:listTable']) || !this.menuId) {
					return
				}
				tableHeadList({ menuId: this.menuId, ...this.queryParams }).then((res) => {
					if (res.code == 200) {
						this.total = res.total
						this.tableHeadList = res.rows.sort((a, b) => {
							return a.orderNum - b.orderNum
						})
					}
				})
			},
			handleStatusChange(data) {
				tableHeadUpd({
					...data,
					required: Number(!data.required)
				}).then((res) => {
					if (res.code == 200) {
						this.$msg({ message: '修改成功' })
						this.updateData(data)
					}
				})
			},
			//新增表头数据
			handleAdd() {
				this.form.menuId = this.menuId
				this.open = true
			},
			//修改表头数据
			handleUpdate(data) {
				this.form = this.copyFormFiled(this.form, data, 'id')
				this.open = true
			},
			//删除表头数据
			handleDelete(data) {
				this.$modal
					.confirm('确定要删除吗')
					.then(() => {
						tableHeadDel(data.id).then((res) => {
							if (res.code == 200) {
								this.$msg({ message: '删除成功' })
								this.tableHeadList = this.tableHeadList.filter((item) => item.id != data.id)
							}
						})
					})
					.catch(() => {})
			},
			//弹窗确定
			submitForm() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						let checkFiled = this.checkName(this.form)
						if (checkFiled) {
							this.$msg({ type: 'error', message: checkFiled })
							return
						}
						if (this.form.id) {
							tableHeadUpd(this.form).then((res) => {
								if (res.code == 200) {
									this.$msg({ message: '修改成功' })
									this.updateData(this.form)
								} else {
									this.$msg({ type: 'error', message: res.msg })
								}
							})
						} else {
							tableHeadAdd(this.form).then((res) => {
								if (res.code == 200) {
									this.$msg({ message: '添加成功' })
									this.form.id = res.data
									this.updateData(this.form)
								} else {
									this.$msg({ type: 'error', message: res.msg })
								}
							})
						}
					} else {
						return false
					}
				})
			},
			//前端更新数据
			updateData(data) {
				let obj = this.tableHeadList.find((item) => item.id == data.id)
				if (obj) {
					this.tableHeadList = this.tableHeadList.map((item) => {
						if (item.id == data.id) {
							return {
								...this.copyFormFiled(item, data)
							}
						}
						return {
							...item
						}
					})
					this.tableHeadList.sort((a, b) => {
						return a.orderNum - b.orderNum
					})
				} else {
					this.tableHeadList.push(data)
				}
				this.cancel()
			},
			//弹窗取消
			cancel() {
				this.resetForm()
				this.open = false
			},
			//重名检测
			checkName(data) {
				let checkColumnName = this.tableHeadList.find((item) => item.columnName == data.columnName && item.id != data.id)
				let checkUiColumn = this.tableHeadList.find((item) => item.uiColumn == data.uiColumn && item.id != data.id)
				let checkApiColum = this.tableHeadList.find((item) => item.apiColum == data.apiColum && item.id != data.id)
				if (checkColumnName) {
					return '列名称重复'
				}
				if (checkUiColumn) {
					return '前端列名重复'
				}
				if (checkApiColum) {
					return '后端列名重复'
				}
				return false
			},
			//表单重置
			resetForm() {
				if (this.$refs.form) {
					this.$refs.form.clearValidate()
				}
				this.form = {
					menuId: null,
					columnName: '',
					uiColumn: '',
					apiColum: '',
					required: '0',
					orderNum: ''
				}
			}
		}
	}
</script>

<style scoped lang="scss"></style>