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

<template>
	<div class="my-container">
		<div class="bill-left">
			<div class="bill-tab">
				<div class="tab-title">导航</div>
				<side-tree :propConfig="treeConfig" @onChange="onChangeTree" ref="sideTree" />
			</div>
		</div>
		<div class="bill-main">
			<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
				@resert="onRefresh" @clickHandle="clickHandle" @detail="openEdit" @onRefresh="onRefresh">
			</module-view>
		</div>
		<!-- 新增/编辑弹窗 -->
		<el-dialog :title="popTitle+'商品分类'" :visible.sync="dialogFormVisible" width="30%" :destroy-on-close="true">
			<by-form :propConfig="addConfig" ref="addFormId">
				<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>
			</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>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/currency";
	import Assembly from "@/components/Assembly/material.vue";
	@Component
	export default class ProductClassification extends Vue {
		// 左边
		parentId : any = 0
		parentIds : any = ''
		// 右边
		timeNum = 0;
		timer : any = null
		popTitle : any = ''
		radio : any = 0
		dialogFormVisible : boolean = false
		treeConfig = {
			attr: {
				retConfig: {
					id: 'id',
				},
				defaultExpandAll: true,
				label: 'name',
				// resType: 'data'
			},
			// request: {
			// 	url: '/maindata/maindataMaterialCategory/treeList',
			// 	method: 'GET'
			// }
		}
		config : any = {
			attr: {
				calculateH: true
			},
			search: {
				attr: {
					size: 'mini',
				},
				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-select',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请选择状态',
								clearable: true,
								size: 'small',
								data: [{
									value: 0,
									label: '正常'
								}, {
									value: 1,
									label: '禁用'
								}]
							}
						}
					},
					]
				]
			},
			tool: {
				tools: {
					add: true,
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					align: 'left',
					checkbox: false,
				},
				columns: [{
					width: 300,
					title: '名称',
					field: 'name',
					isDetail: true,
				}, {
					width: 300,
					title: '简称',
					field: 'shortName'
				},
				{
					width: 300,
					title: '备注',
					field: 'remark',
				}, {
					width: 80,
					title: '状态',
					field: 'status',
					align: 'center',
					component: Assembly,
				},{
					width: 120,
					title: '操作',
					action: true,
					plugins: [{
						icon: 'el-icon-edit',
						name: '编辑',
						audit: '',
						event: {
							click: (item : any) => {
								(this as any).openEdit(item)
							}
						}
					}, {
						name: '删除',
						event: {
							click: (item : any) => (this as any).doDelete(item)
						}
					}]
				}]
			},
		}
		addConfig = {
			attr: {
				size: 'small',
				rules: {
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}],
					// parentName: [{
					// 	required: true, message: '请选择上级', trigger: 'change'
					// }],
				}
			},
			columns: [
				[
					{
						span: 23,
						label: '上级',
						labelWidth: '70px',
						prop: 'parentName',
						component: 'select-tree',
						compConfig: {
							attr: {
								label: 'name',
								clearable: true,
								retConfig: {
									parentId: 'id',
									parentName: 'name',
								},
								defaultExpandAll: true
							},
							request: {
								url: '/maindata/maindataMaterialCategory/treeUseList',
								method: 'GET'
							}
						}
					},
					{
						span: 23,
						labelWidth: '70px',
						label: '名称',
						prop: 'name',
						component: 'by-input',
					},
					{
						span: 23,
						labelWidth: '70px',
						label: '简称',
						slot: true,
						prop: 'shortName',
						component: 'by-input',
					},
					{
						span: 23,
						labelWidth: '70px',
						label: '状态',
						slot: true,
						prop: 'status',
					},
					{
						span: 23,
						labelWidth: '70px',
						label: '备注',
						slot: true,
						prop: 'remark',
						component: 'by-input',
						compConfig: {
							attr: {
								size: 'mini',
								placeholder: '请输入备注',
								type: 'textarea'
							},
						}
					},
				],
			]
		}
		mounted() {
			this.timer = setInterval(() => {
				this.getDataList()
			}, 500)
		}
		//点击树获取数据
		onChangeTree(e : any) {
			// console.log(e)
			let data : any = {};
			e.isContain ? data.ids = e.id : data.parentId = e.id;
			this.parentIds = (this as any).$lodash.cloneDeep(e.id);
			this.parentId = e.id[0];
			this.parentIds.shift();
			data.pageSize = 20;
			data.pageNo = 1;
			let loading = this.$loading({ target: '.main-container' });
			api.childrenTreeList(data, 'maindataMaterialCategory').then((res : any) => {
				loading.close();
				if (res.code === 200) {
					(this.$refs.moduleView as any).setTableValue(res.data.records);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.moduleView as any).setPage(page);
				}
			}).catch(() => loading.close());
		}
		// 确认新增/编辑
		confirm() {
			(this as any).$refs.addFormId.validate().then(() => {
				let query = (this as any).$refs.addFormId.getValue();
				// console.log('确认新增/编辑 ==> ', query);
				query.status = this.radio;
				this.dialogFormVisible = false;
				if (this.popTitle === '新增') {
					if(!query.parentId){
						query.parentId=0
					}
					api.saveList(query, 'maindataMaterialCategory').then((res : any) => {
						if (res.code === 200) {
							this.$message.success(this.popTitle + '成功!');
							// (this as any).$refs.sideTree.request();
							this.getDataList();
						} else this.$message.error(res.msg);
					}).catch(() => {});
				} else if (this.popTitle === '编辑') {
					if(!query.parentId){
						query.parentId=0
					}
					if(query.parentId==query.id){
						this.$message.error('不能设置自己是自己的上级节点')
						return false
					}
					api.updateList(query, 'maindataMaterialCategory').then((res : any) => {
						if (res.code === 200) {
							this.$message.success(this.popTitle + '成功!');
							// (this as any).$refs.sideTree.request();
							this.getDataList();
						} else this.$message.error(res.msg);
					}).catch(() => {});
				}
			}).catch(() => {});
		}
		// 获取列表数据
		getDataList() {
			if (!this.$refs.moduleView) {
				if (this.timeNum > 5) {
					clearInterval(this.timer)
				}
				this.timeNum++;
				return
			}
			clearInterval(this.timer)
			let query = (this.$refs.moduleView as any).getQuery();
			if (this.parentIds.length > 0) query.parentIds = this.parentIds;
			console.log('表单字段 ==> ', query);
			this.getPageList(query);
		}
		getPageList(query : any) {
			let loading = this.$loading({ target: '.main-container' });
			api.treeList('maindataMaterialCategory').then((treeRes : any) => {
				if(treeRes.code==200){
					api.pageList(query, 'maindataMaterialCategory').then((res : any) => {
						var data:any = [{
							id: 0,
							name: '物料分类',
							children: treeRes.data
						}];
						(this as any).$refs.sideTree.setData(data);
						if (res.code === 200) {							
							(this.$refs.moduleView as any).setTableValue(res.data.records);
							let page = {
								pageNo: res.data.current, //当前页
								pageSize: res.data.size, //每页条数
								total: res.data.total //总条数
							};
							(this.$refs.moduleView as any).setPage(page);
							loading.close();
						} else this.$message.error(res.msg);
					}).catch(() => loading.close());
				}
			}).catch(() => loading.close());
		}
		// 工具栏方法
		clickHandle(e : any) {
			if (e === 'onAdd') this.onAdd();
		}
		// 打开新增
		onAdd() {
			this.popTitle = '新增'
			this.dialogFormVisible = true;
			this.radio = 0
			setTimeout(() => {
				if(this.parentId!=0){
					var data = {
						parentName: '',
						parentId: 0
					}
					api.single({ id: this.parentId }, 'maindataMaterialCategory').then((res : any) => {
						if (res.code === 200) {
							data.parentName = res.data.name;
							data.parentId = res.data.id;
							this.dialogFormVisible = true;
							setTimeout(() => { (this as any).$refs.addFormId.setValue(data) }, 0);
						}
					}).catch(() => {});
				}else{
					(this as any).$refs.addFormId.setValue();
					(this as any).$refs.addFormId.$refs['parentName--comp'][0].request();
				}
			}, 0)
		}
		// 打开编辑
		openEdit(e : any) {
			// console.log('打开编辑 ==> ', e);
			this.popTitle = '编辑'
			let loading = this.$loading({ target: '.main-container' });
			api.single({ id: e.id }, 'maindataMaterialCategory').then((res : any) => {
				if (res.code === 200) {
					let data = res.data;
					this.radio = data.status;
					if(data.parentId!=0){
						api.single({ id: data.parentId }, 'maindataMaterialCategory').then((res : any) => {
							loading.close();
							if (res.code === 200) {
								data.parentName = res.data.name;
								this.dialogFormVisible = true;
								setTimeout(() => { (this as any).$refs.addFormId.setValue(data) }, 0);
							}
						}).catch(() => loading.close());
					}else{
						loading.close();
						this.dialogFormVisible = true;
						setTimeout(() => { (this as any).$refs.addFormId.setValue(data) }, 0);
					}
				}
			}).catch(() => loading.close());
		}
		// 操作删除
		doDelete(item : any) {
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.delCategoryId({ id: item.id }, 'maindataMaterialCategory').then((res : any) => {
					if (res.code === 200) {
						// (this as any).$refs.sideTree.request();
						this.getDataList();
						this.$message.success('删除成功');
					} else this.$message.error(res.msg);
				})
			}).catch(() => this.$message.info('已取消删除'));
		}
		// 刷新/重置
		onRefresh() {
			(this as any).$refs.moduleView.clearSearch();
			// (this as any).$refs.sideTree.request();
			this.parentIds = '';
			this.getDataList();
		}
	}
</script>

<style>
	.bill-tab{max-height: 100%;overflow-y: auto !important;}
	.el-popover{max-height: 400px;overflow-y: auto;}
</style>
<style lang="scss" scoped>
	.my-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		padding: 16px;
		height: 100%;

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

			.bill-tab {
				width: 210px;
				height: 100%;
				transition: all .5s;
				overflow: auto;
			}

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

		.bill-main {
			width: calc(100% - 16px);
			box-sizing: border-box;
			margin-left: 16px;
			position: relative;
			height: 100%;
			overflow-y: hidden;
		}
	}
</style>