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

<template>
	<div class="page-container">
		<div class="content-container">
			<TreeChoice v-model="hasDeptIds" @click="getList" @getDeptInfo="getDeptInfo" />
			<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" v-hasPermi="['system:dataPermissions:addRole']" style="margin-right: 10px" @click="addStockShow" v-if="hasDeptIds.length">添加</el-button>
						<right-toolbar @queryTable="getList" :isShowSearch="false"></right-toolbar>
					</div>
				</div>
				<!-- 数据角色表格 -->
				<el-table v-loading="loading" :data="dataList" border highlight-current-row>
					<el-table-column label="库位" prop="locationName" width="200"></el-table-column>
					<el-table-column label="公司部门" prop="deptName" width="300"></el-table-column>
					<el-table-column label="保管员" prop="keeperName" width="200"></el-table-column>
					<el-table-column label="描述" prop="remark" />
					<el-table-column label="操作" class-name="small-padding fixed-width" width="300" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="choiceUser(scope.row)" v-hasPermi="['system:dataPermissions:updRole']">保管员</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="updStock(scope.row)" v-hasPermi="['system:dataPermissions:updRole']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="delStock(scope.row)" v-hasPermi="['system:dataPermissions:delRole']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 编辑弹窗 -->
				<el-dialog :title="title" :visible.sync="stockShow" width="30%">
					<el-form ref="stockForm" :model="stockForm" :rules="stockRules" label-width="100px">
						<el-form-item label="名称" prop="locationName">
							<div style="width: 300px"><el-input v-model="stockForm.locationName" placeholder="请输入名称" /></div>
						</el-form-item>
						<el-form-item label="描述">
							<div style="width: 300px"><el-input maxlength="80" v-model="stockForm.remark" placeholder="请输入描述" /></div>
						</el-form-item>
						<el-form-item label="公司部门">
							<div style="width: 300px"><el-input maxlength="80" disabled v-model="stockForm.deptName" /></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="stockCancel">取 消</el-button>
						<el-button type="primary" size="small" @click="stockSub">保 存</el-button>
					</div>
				</el-dialog>
				<UserChoice ref="userChoice" @selectedPerson="selectedPerson" />
			</div>
		</div>
	</div>
</template>

<script>
import { stockList, stockAdd, stockUpd, stockDel, updateKeeper } from '@/api/system/stockLocation.js'
import { treeselect } from '@/api/system/dept'
import TreeChoice from '@/components/deptTreeChoice/index.vue'
import UserChoice from '@/components/userChoice/index.vue'
export default {
	name: 'stockLocation',
	components: {
		TreeChoice,
		UserChoice
	},
	data() {
		return {
			loading: false,
			//拥有权限的部门id数组
			hasDeptIds: [],
			//数据
			dataList: [],
			//库位编辑弹窗显示
			stockShow: false,
			//库位编辑弹窗标题
			title: '',
			// 部门信息
			deptOptions: [],
			//库位表单
			stockForm: { deptId: '', locationName: '', remark: '', deptName: '' },
			//库位表单验证
			stockRules: { locationName: [{ required: true, message: '名称不能为空', trigger: 'blur' }] },
			locationId: '' // 库位id
		}
	},
	methods: {
		//获取数据
		getList() {
			if (!this.hasDeptIds.length) {
				this.dataList = []
				return
			}
			this.loading = true
			stockList({ deptIds: this.hasDeptIds }).then(res => {
				if (res.code === 200) {
					this.dataList = res.data
					this.loading = false
				}
			})
		},
		//获取部门信息
		getDeptInfo(d) {
			this.stockForm.deptId = d.deptId
			this.stockForm.deptName = d.deptName
		},
		//显示库位弹窗
		addStockShow() {
			this.title = '库位添加'
			this.stockShow = true
		},
		//表单重置
		resetForm() {
			this.stockForm = { deptId: '', locationName: '', remark: '', deptName: '' }
		},
		//检测重名
		checkName(data) {
			let o = this.dataList.find(item => item.locationName == data.locationName && item.locationId != data.locationId)
			if (o) {
				return '库位名称重复'
			}
			return false
		},
		//库位弹窗取消
		stockCancel() {
			this.resetForm()
			this.stockShow = false
		},
		//库位弹窗提交
		stockSub() {
			this.$refs.stockForm.validate(valid => {
				if (valid) {
					let checkFiled = this.checkName(this.stockForm)
					if (checkFiled) {
						this.$msg({ type: 'error', message: checkFiled })
						return
					}
					if (this.stockForm.locationId) {
						stockUpd(this.stockForm).then(res => {
							if (res.code === 200) {
								this.$msg({ message: '修改成功' })
								this.dataList = this.dataList.map(item => {
									if (item.locationId == this.stockForm.locationId) {
										return {
											...item,
											...this.stockForm
										}
									}
									return {
										...item
									}
								})
								this.stockCancel()
							}
						})
					} else {
						stockAdd(this.stockForm).then(res => {
							if (res.code === 200) {
								this.$msg({ message: '添加成功' })
								this.getList()
								this.stockCancel()
							}
						})
					}
				}
			})
		},
		//选择人员
		choiceUser(row) {
			this.locationId = row.locationId
			treeselect().then(response => {
				this.deptOptions = response.data
				this.deptOptions.unshift({ id: '0', label: '全部部门' })
				this.$refs.userChoice.init(true, this.deptOptions)
			})
		},
		//人员回调
		selectedPerson(data) {
			updateKeeper({ keeper: data, locationId: this.locationId }).then(res => {
				this.getList()
			})
		},
		//修改
		updStock(row) {
			this.stockForm = {
				deptId: row.deptId,
				locationName: row.locationName,
				remark: row.remark,
				deptName: row.deptName,
				locationId: row.locationId
			}
			this.title = '库位修改'
			this.stockShow = true
		},
		//删除
		delStock(row) {
			this.$modal
				.confirm('确定要删除吗')
				.then(() => {
					stockDel(row.locationId).then(res => {
						if (res.code == 200) {
							this.$msg({ message: '删除成功' })
							this.dataList = this.dataList.filter(item => item.locationId != row.locationId)
						} else {
							this.$msg({ type: 'error', message: res.msg })
						}
					})
				})
				.catch(() => {})
		}
	}
}
</script>

<style></style>