oms/src/views/audit/productClassification/index.vue

<template>
	<div class="my-container">
		<div class="bill-left">
			<div class="bill-tab">
				<div class="title">导航</div>
				<el-tree :data="data" :props="props" @node-click="handleNodeClick"></el-tree>
			</div>
		</div>
		<div class="bill-main">
			<div v-show="!hideSearch">
				<by-form :propConfig="config" ref="formId" />
				<div class="search-btn">
					<el-button type="primary" size="mini" icon="el-icon-search" @click="searchHandle">搜索</el-button>
					<el-button size="mini" icon="el-icon-refresh" @click="resertHandle">重置</el-button>
				</div>
			</div>
			<by-tool :propConfig="toolConfig" ref="toolId" @clickHandle="clickHandle" />
			<el-table :data="tableData" v-loading="loading" style="width: 100%;margin: 20px 0;" :show-overflow-tooltip="true"
				row-key="id" ref="tableId" :tree-props="{children: 'children'}" @cell-click="doClick">
				<!-- <el-table-column type="selection" width="55" /> -->
				<el-table-column prop="name" label="名称" width="200" @click="clickMy" />
				<el-table-column prop="shortName" label="简称" width="200" />
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status===0?'primary':'danger'"
							disable-transitions>{{scope.row.status===0?'正常':'禁用'}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="100" style="text-align: center;">
					<template>
						<el-button type="text" size="small" icon="el-icon-edit" @click="dialogEdit">编辑</el-button>
						<el-button type="text" size="small" @click="doDelete">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 新增/编辑弹窗 -->
			<el-dialog :title="title+'分类'" :visible.sync="dialogFormVisible" width="30%">
				<by-form :propConfig="addConfig" ref="addFormId" style="height:250px;">
					<!-- 					<template v-slot:uploadImg>
						<div class="upload-img">+</div>
					</template> -->
					<template v-slot:status class="clearfix">
						<el-radio class="fl" style="margin-top: 8px;" v-model="radio" label="0">显示</el-radio>
						<el-radio class="fl" style="margin-top: 8px;" v-model="radio" label="1">禁用</el-radio>
					</template>
					<template v-slot:category>
						<el-cascader style="width: 100%;" v-model="cascaderValue" :options="options" :props="props"
							:show-all-levels="false" clearable @change="getChange" />
					</template>
				</by-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/materialClass";
	@Component({})
	export default class ProductClassification extends Vue {
		hideSearch = false
		title = '新增'
		loading : boolean = true
		dialogFormVisible : boolean = false
		cellsData : any = ''
		cascaderValue : any = ''
		radio = '0'
		data : any = []
		props = {
			label: 'name',
			value: 'id',
			children: 'children',
			checkStrictly: true
		}
		options : Array<any> = []
		tableData : Array<any> = []
		toolConfig = {
			tools: {
				add: true,
				export: true,
				search: true,
				refresh: true
			},
			audit: {
				add: 'audit:collaborationLog:add',
				export: 'audit:collaborationLog:export'
			}
		}
		config = {
			attr: {
				size: 'small',
				height: 40
			},
			columns: [
				[{
					span: 6,
					label: '名称',
					prop: 'name',
					component: 'by-input',
					labelWidth: '70px',
					compConfig: {
						attr: {
							placeholder: '请输入名称',
							clearable: true
						}
					},
				}, {
					span: 6,
					label: '简称',
					prop: 'shortName',
					component: 'by-input',
					labelWidth: '70px',
					compConfig: {
						attr: {
							placeholder: '请输入简称',
							clearable: true
						}
					}
				},
				{
					span: 6,
					label: '状态',
					prop: 'status',
					component: 'by-input',
					labelWidth: '70px',
					compConfig: {
						attr: {
							placeholder: '请输入状态',
							clearable: true
						}
					}
				},
				{
					span: 6,
					label: '备注',
					prop: 'remark',
					component: 'by-input',
					labelWidth: '70px',
					compConfig: {
						attr: {
							placeholder: '请输入状态',
							clearable: true
						}
					}
				},
				]
			]
		}
		addConfig = {
			attr: {
				size: 'small',
				height: 60
			},
			columns: [
				[
					{
						labelWidth: '80px',
						span: 20,
						label: '上级分类',
						slot: true,
						prop: 'category',
					},
					{
						span: 20,
						label: '分类名称',
						prop: 'name',
						component: 'by-input',
						labelWidth: '80px',
					},
					{
						span: 20,
						label: '简称',
						prop: 'shortName',
						component: 'by-input',
						labelWidth: '80px',
					},
					{
						span: 20,
						label: '显示状态',
						slot: true,
						prop: 'status',
					},
					{
						span: 20,
						label: '备注',
						prop: 'remark',
						component: 'by-input',
						labelWidth: '80px',
					},]
			]
		}
		created() {
			this.getDataList()
		}
		clickMy(e:any){
			console.log(e);
		}
		// 获取列表数据
		getDataList() {
			api.treeList().then((res : any) => {
				// console.log(res.data[0]);
				if (res.code === 200) {
					this.tableData = res.data[0].children;
					this.data = res.data[0].children;
					let arr : any = [{
						name: '顶级',
						id: 0,
						children: res.data
					}]
					this.options = arr;
					this.loading = false;
				} else this.failHandle(res)
			})
		}
		// 工具栏方法
		clickHandle(e : any) {
			console.log('工具栏方法 ==> ', e);
			if (e === 'toggleSearch') this.toggleSearch();
			if (e === 'onRefresh') this.onRefresh();
			if (e === 'onExport') this.onExport();
			if (e === 'onAdd') this.onAdd();
		}
		// 单元格点击
		doClick(e : any) {
			console.log('单元格点击 ==> ', e);
			this.cellsData = e;
			this.radio = e.status.toString();
			if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue(e);
		}
		// 新增
		onAdd() {
			this.title = '新增';
			this.radio = '0';
			this.cascaderValue = [0];
			setTimeout(() => {
				if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue({});
				this.dialogFormVisible = true;
			}, 0)
		}
		// 编辑
		dialogEdit() {
			this.title = '编辑';
			this.cascaderValue = [0];
			this.dialogFormVisible = true;
		}
		// 获取选择节点
		getChange(e : any) {
			console.log('获取选择节点 ==> ', e);
			// this.cascaderValue = e;
		}
		// 确认新增/编辑
		confirm() {
			let query = (this as any).$refs.addFormId.getValue();
			let pareteId : any = this.cascaderValue[this.cascaderValue.length - 1];
			if (pareteId !== 0) if (!this.cascaderValue[this.cascaderValue.length - 1]) return this.$message({
				type: 'error',
				message: '请输入完整字段'
			})
			if (query.name?.length > 0 && query.shortName?.length > 0 && query.remark?.length > 0) {
				// console.log(pareteId, this.radio);
				this.dialogFormVisible = false;
				if (this.title === '新增') {
					api.saveCategory({
						name: query.name,
						shortName: query.shortName,
						status: this.radio,
						remark: query.remark,
						parentId: pareteId// 父级id
					}).then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.title + '成功!'
							});
							this.getDataList();
						} else this.failHandle(res)
					})
				} else if (this.title === '编辑') {
					api.updateCategory({
						id: this.cellsData.id,
						name: query.name,
						shortName: query.shortName,
						status: this.radio,
						remark: query.remark,
						parentId: pareteId // 父级id
					}).then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.title + '成功!'
							});
							this.getDataList();
						} else this.failHandle(res)
					})
				}

			} else this.$message({
				type: 'error',
				message: '请输入完整字段'
			})
		}

		// 删除
		doDelete() {
			setTimeout(() => {
				if (this.cellsData.children.length > 0) return this.$message({
					type: 'error',
					message: '此节点还有子集，不能做此操作'
				});
				this.$confirm('确定删除吗,此操作不能撤销！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					api.classDelete({
						ids: this.cellsData.id
					}).then((res : any) => {
						if (res.code === 200) {
							this.getDataList();
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}, 0)
		}
		// 导航切换
		handleNodeClick(e : any) {
			console.log('导航切换id ==> ',e.id);
			this.loading = true;
			api.childrenTreeList(e.id).then((res : any) => {
				if (res.code === 200) {
					this.tableData = res.data;
					this.loading = false;
				}
			})
		}
		//重置
		resertHandle() {
			this.loading = true;
			(this.$refs.formId as any).setValue({});
			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
			this.getDataList();
		}
		//刷新
		onRefresh() {
			this.loading = true;
			// (this.$refs.formId as any).setValue({});
			// (this.$refs.tableId as any).setPage({ pageNo: 1, total: 0 });
			this.getDataList();
		}
		// 搜索
		searchHandle() {
			this.loading = true;
			let query : any = (this.$refs.formId as any).getValue();
			if (!query.name) return this.getDataList();
			api.searchTreeList({ name: query.name || query.shortName }).then((res : any) => {
				if (res.code === 200) {
					this.tableData = [];
					this.tableData = res.data.records;
					this.loading = false;
				};
			})
		}
		//获取查询值
		getQuery() {
			let query : any = (this.$refs.formId as any).getValue();
			// const page:any = (this.$refs.tableId as any).getPage();
			// query.pageNum = page.pageNo;
			// query.pageSize = page.pageSize;
			return query;
		}
		//导出
		onExport() {
			let urlArr = '/maindata/maindataMaterialOrganizationCategory';
			let query = this.getQuery();
			(this as any).$download(urlArr + '/export', {
				...query
			}, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)

		}
		//显示/隐藏搜索
		toggleSearch() {
			this.hideSearch = !this.hideSearch
		}
		// 运行错误
		failHandle(err : any) {
			let msg = err.msg ? err.msg : '运行错误！';
			this.$message.error(msg)
		}
	}
</script>
<style lang="scss">
	.my-container {
		.el-form-item__label {
			text-align: center;
		}

		.el-form-item__content {
			margin-right: 20px;
		}

		.has-gutter .is-leaf.el-table__cell:nth-of-type(5) {
			text-align: center;
		}

		.form-row.el-row>div {
			margin-bottom: 10px;
		}
	}

	.el-dialog:not(.is-fullscreen) {
		margin-top: 15vh !important;
	}

	.el-message-box {
		vertical-align: baseline;
	}
</style>
<style lang="scss" scoped>
	.my-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		padding: 16px;

		.bill-left {
			position: relative;
			border-right: solid #EEE 1px;
			padding-right: 16px;
			flex-shrink: 0;

			// box-sizing: border-box;
			.bill-tab {
				width: 150px;
				height: 100%;
				transition: all .5s;
				overflow: hidden;
			}

			.title {
				font-size: 16px;
				padding-bottom: 16px;
				width: 200px;
			}

			.bill-nav {
				font-size: 14px;
				height: 30px;
				line-height: 30px;
				width: 200px;
				box-sizing: border-box;
				padding: 0 8px;
				cursor: pointer;
				margin-bottom: 2px;
				border-radius: 5px;
			}

			.onBill {
				background-color: #bde3f7;
			}

			.bill-nav:hover {
				background-color: #bde3f7;
			}

			.close {
				height: 22px;
				width: 22px;
				border-radius: 50%;
				border: solid #EEE 1px;
				position: absolute;
				top: 30px;
				right: -11px;
				background-color: #FFF;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
		}

		.bill-main {
			width: calc(100% - 16px);
			box-sizing: border-box;
			margin-left: 16px;
			position: relative;

			.upload-img {
				width: 150px;
				height: 150px;
				line-height: 150px;
				text-align: center;
				border-radius: 5px;
				background-color: #fbfdff;
				color: #8c939d;
				border: 1px dashed #c0ccda;
				font-size: 28px;
			}

			.upload-img:hover {
				border-color: #1890ff;
			}

			.search-btn {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-bottom: 20px;
			}

			.bill-box {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: -1;
				transition: all .5s;

				.bill-tool,
				.table-tool {
					width: 100%;
					padding-bottom: 16px;
				}

				.form {
					margin-bottom: 8px;
				}
			}

			.on-show {
				opacity: 1;
				z-index: 1;
			}
		}
	}
</style>