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

<template>
	<div class="my-container">
		<transition-group name="fade" style="position: relative;width: 100%;display: flex;">
			<div class="bill-main" v-show="isShow==='ckb'" key="item">
				<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
					@resert="getDataList" @clickHandle="clickHandle" @detail="changeTab">
				</module-view>
				<!-- 新增/编辑弹窗 -->
				<el-dialog :title="popTitle+'仓库'" :visible.sync="dialogFormVisible" width="30%">
					<by-form :propConfig="addConfig" ref="addFormId"></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 class="bill-main" v-show="isShow==='cwb'" key="item2">
				<module-view :propConfig="config2" ref="moduleView2" @pagination="getDataList2" @search="getDataList2"
					@resert="getDataList2" @clickHandle="clickHandle2" @detail="openEdit2">
				</module-view>
				<!-- 新增/编辑弹窗 -->
				<el-dialog :title="popTitle+'仓位'" :visible.sync="dialogFormVisible2" width="30%">
					<by-form :propConfig="addConfig2" ref="addFormId2"></by-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="confirm2">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</transition-group>
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/currency";
	@Component
	export default class Depots extends Vue {
		isShow : any = 'ckb'
		timeNum = 0;
		timer : any = null
		timeNum2 = 0;
		timer2 : any = null
		popTitle : any = ''
		dialogFormVisible : boolean = false
		dialogFormVisible2 : boolean = false
		config : any = {
			search: {
				attr: {
					size: 'mini'
				},
				columns: [
					[{
						span: 6,
						label: '名称',
						prop: 'name',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入名称',
								clearable: true
							},
						},
					}, {
						span: 6,
						label: '地址',
						prop: 'address',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入地址',
								clearable: true
							}
						}
					},
					]
				]
			},
			tool: {
				tools: {
					add: true,
					// export: true,
					delete: true,
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					seq: true,
					align: 'center',
					checkbox: true,
					height: 630
				},
				columns: [{
					title: '名称',
					field: 'name',
					isDetail: true,
				}, {
					title: '地址',
					field: 'address',
				}, {
					width: 100,
					title: '仓位',
					action: true,
					plugins: [{
						icon: 'el-icon-edit',
						name: '查看',
						audit: '',
						event: {
							click: (item : any) => {
								(this as any).changeTab()
							}
						}
					}]
				}, {
					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).doDelete2(item, 'maindataStorehouse')
						}
					}]
				}]
			},
		}
		config2 : any = {
			search: {
				attr: {
					size: 'mini'
				},
				columns: [
					[
						{
							span: 6,
							label: '名称',
							prop: 'name',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入名称',
									clearable: true
								},
							},
						},
						{
							span: 6,
							label: '所属机构名称',
							prop: 'organizationName',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入所属机构名称',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '库存',
							prop: 'stock',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入库存',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '库存体积',
							prop: 'stockVolume',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入库存体积',
									clearable: true
								},
							},
						},
					],
					[
						{
							span: 6,
							label: '库存上限数量',
							prop: 'maxStockNumber',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入库存上限数量',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '库存体积上限',
							prop: 'maxStockVolume',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入库存体积上限',
									clearable: true
								}
							}
						},
					]
				]
			},
			tool: {
				tools: {
					return: true,
					add: true,
					// export: true,
					delete: true,
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					seq: true,
					align: 'center',
					checkbox: true,
					height: 590
				},
				columns: [{
					width: 300,
					title: '名称',
					field: 'name',
					isDetail: true,
				}, {
					title: '所属机构名称',
					field: 'organizationName',
				},
				{
					title: '库存',
					field: 'stock'
				},
				{
					title: '库存体积',
					field: 'stockVolume'
				},
				{
					title: '库存数量上限',
					field: 'maxStockNumber'
				},
				{
					title: '库存体积上限',
					field: 'maxStockVolume'
				}, {
					width: 120,
					title: '操作',
					action: true,
					plugins: [{
						icon: 'el-icon-edit',
						name: '编辑',
						audit: '',
						event: {
							click: (item : any) => {
								(this as any).openEdit2(item)
							}
						}
					}, {
						name: '删除',
						event: {
							click: (item : any) => (this as any).doDelete2(item, 'maindataStoringLocation')
						}
					}]
				}]
			},
		}
		addConfig = {
			attr: {
				size: 'small',
				rules: {
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}],
					shortName: [{
						required: true, message: '请输入简称', trigger: 'blur'
					}]
				}
			},
			columns: [
				[
					{
						span: 23,
						labelWidth: '70px',
						label: '名称',
						prop: 'name',
						component: 'by-input',
					},
					{
						span: 23,
						labelWidth: '70px',
						label: '地址',
						prop: 'address',
						component: 'by-input',
					},
				]
			]
		}
		addConfig2 = {
			attr: {
				size: 'small',
				rules: {
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}]
				}
			},
			columns: [
				[
					{
						span: 23,
						label: '名称',
						prop: 'name',
						component: 'by-input',
					},
					{
						span: 23,
						label: '所属机构名称',
						prop: 'organizationName',
						component: 'by-input',
					},
					{
						span: 23,
						label: '库存',
						prop: 'stock',
						component: 'by-input',
					},
					{
						span: 23,
						label: '库存体积',
						prop: 'stockVolume',
						component: 'by-input',
					},
					{
						span: 23,
						label: '库存数量上限',
						prop: 'maxStockNumber',
						component: 'by-input',
					},
					{
						span: 23,
						label: '库存体积上限',
						prop: 'maxStockVolume',
						component: 'by-input',
					},
				]
			]
		}
		created() {
			this.timer = setInterval(() => {
				this.getDataList()
			}, 500)
		}
		changeTab() {
			this.isShow = 'cwb';
			this.timer2 = setInterval(() => {
				this.getDataList2()
			}, 500)
		}
		// 确认新增/编辑
		confirm() {
			(this as any).$refs.addFormId.validate().then(() => {
				let query = (this as any).$refs.addFormId.getValue();
				this.dialogFormVisible = false;
				if (this.popTitle === '新增') {
					api.saveList(query, 'maindataStorehouse').then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.popTitle + '成功!'
							});
							this.getDataList();
						} else this.failHandle(res)
					})
				} else if (this.popTitle === '编辑') {
					api.updateList(query, 'maindataStorehouse').then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.popTitle + '成功!'
							});
							this.getDataList();
						} else this.failHandle(res)
					})
				}
			})
		}
		confirm2() {
			(this as any).$refs.addFormId2.validate().then(() => {
				let query = (this as any).$refs.addFormId2.getValue();
				this.dialogFormVisible2 = false;
				if (this.popTitle === '新增') {
					api.saveList(query, 'maindataStoringLocation').then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.popTitle + '成功!'
							});
							this.getDataList2();
						} else this.failHandle(res)
					})
				} else if (this.popTitle === '编辑') {
					api.updateList(query, 'maindataStoringLocation').then((res : any) => {
						if (res.code === 200) {
							this.$message({
								type: 'success',
								message: this.popTitle + '成功!'
							});
							this.getDataList2();
						} else this.failHandle(res)
					})
				}
			})
		}
		// 获取仓库列表数据
		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();
			api.pageList(query, 'maindataStorehouse').then((res : any) => {
				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)
				} else this.failHandle(res)
			})
		}
		// 获取仓位列表数据
		getDataList2() {
			if (!this.$refs.moduleView2) {
				if (this.timeNum2 > 5) {
					clearInterval(this.timer2)
				}
				this.timeNum2++;
				return
			}
			clearInterval(this.timer2)
			let query = (this.$refs.moduleView2 as any).getQuery();
			api.pageList(query, 'maindataStoringLocation').then((res : any) => {
				if (res.code === 200) {
					(this.$refs.moduleView2 as any).setTableValue(res.data.records);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.moduleView2 as any).setPage(page)
				} else this.failHandle(res)
			})
		}
		// 工具栏方法
		clickHandle(e : any) {
			console.log(e);
			if (e === 'onRefresh') (this.$refs.moduleView as any).resert();
			if (e === 'onAdd') this.onAdd();
			if (e === 'onDelete') this.onDelete('moduleView', 'maindataStorehouse');
			if (e === 'onExport') this.onExport();
		}
		clickHandle2(e : any) {
			console.log(e);
			if (e === 'onRefresh') (this.$refs.moduleView2 as any).resert();
			if (e === 'onAdd') this.onAdd2();
			if (e === 'onDelete') this.onDelete('moduleView2', 'maindataStoringLocation');
			if (e === 'onExport') this.onExport();
			if (e === 'onReturn') this.isShow = 'ckb';
		}
		// 打开新增
		onAdd() {
			this.popTitle = '新增'
			this.dialogFormVisible = true;
			setTimeout(() => {
				if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue({});
			}, 0)
		}
		onAdd2() {
			this.popTitle = '新增'
			this.dialogFormVisible2 = true;
			setTimeout(() => {
				if ((this as any).$refs.addFormId2) (this as any).$refs.addFormId2.setValue({});
			}, 0)
		}
		// 打开编辑
		openEdit(e : any) {
			this.popTitle = '编辑'
			this.dialogFormVisible = true;
			setTimeout(() => {
				if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue(e);
			}, 0)
		}
		// 打开编辑
		openEdit2(e : any) {
			this.popTitle = '编辑'
			this.dialogFormVisible2 = true;
			setTimeout(() => {
				if ((this as any).$refs.addFormId2) (this as any).$refs.addFormId2.setValue(e);
			}, 0)
		}
		// 工具栏删除
		onDelete(moduleView : any, url : any) {
			let selectData = (this.$refs[moduleView] as any).getSelectData()
			let ids = '';
			if (selectData.length > 0) {
				selectData.map((v : any) => {
					ids += v.id + ','
				})
			} else return this.$message({ type: 'warning', message: '请选择删除数据' })
			ids = ids.slice(0, ids.length - 1);
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.deleteList({ ids: ids }, url).then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		// 操作删除
		doDelete2(item : any, url : any) {
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				api.deleteList({ ids: item.id }, url).then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		//导出
		onExport() {
			let urlArr = '/maindata/maindataMaterial';
			let query = (this.$refs.moduleView as any).getQuery();
			(this as any).$download(urlArr + '/export', {
				...query
			}, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
		}
		// 运行错误
		failHandle(err : any) {
			let msg = err.msg ? err.msg : '运行错误！';
			this.$message.error(msg)
		}

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

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

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

		@media screen and (min-width: 1500px) {
			.bill-main {
				min-width: 1610px;
			}
		}
	}
</style>