1

src/api/system/stockLocation.js

@@ -1,8 +1,32 @@
 import request from '@/utils/request'
-//获取部门树
-export function deptList() {
+//增
+export function stockAdd(data) {
 	return request({
-		url: '/system/dept/treeselect',
-		method: 'get'
+		url: '/system/location',
+		method: 'post',
+		data
+	})
+}
+//删
+export function stockDel(data) {
+	return request({
+		url: '/system/location/' + data,
+		method: 'delete'
+	})
+}
+//改
+export function stockUpd(data) {
+	return request({
+		url: '/system/location',
+		method: 'put',
+		data
+	})
+}
+//查
+export function stockList(params) {
+	return request({
+		url: '/system/location/list',
+		method: 'get',
+		params
 	})
 }

src/components/RightToolbar/index.vue

@@ -1,87 +1,86 @@
 <template>
-  <div class="top-right-btn">
-    <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
-      </el-tooltip>
-    </el-row>
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-transfer
-        :titles="['显示', '隐藏']"
-        v-model="value"
-        :data="columns"
-        @change="dataChange"
-      ></el-transfer>
-    </el-dialog>
-  </div>
+	<div class="top-right-btn">
+		<el-row>
+			<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="isShowSearch">
+				<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+			</el-tooltip>
+			<el-tooltip class="item" effect="dark" content="刷新" placement="top">
+				<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+			</el-tooltip>
+			<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+				<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+			</el-tooltip>
+		</el-row>
+		<el-dialog :title="title" :visible.sync="open" append-to-body>
+			<el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
+		</el-dialog>
+	</div>
 </template>
 <script>
-export default {
-  name: "RightToolbar",
-  data() {
-    return {
-      // 显隐数据
-      value: [],
-      // 弹出层标题
-      title: "显示/隐藏",
-      // 是否显示弹出层
-      open: false,
-    };
-  },
-  props: {
-    showSearch: {
-      type: Boolean,
-      default: true,
-    },
-    columns: {
-      type: Array,
-    },
-  },
-  created() {
-    // 显隐列初始默认隐藏列
-    for (let item in this.columns) {
-      if (this.columns[item].visible === false) {
-        this.value.push(parseInt(item));
-      }
-    }
-  },
-  methods: {
-    // 搜索
-    toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch);
-    },
-    // 刷新
-    refresh() {
-      this.$emit("queryTable");
-    },
-    // 右侧列表元素变化
-    dataChange(data) {
-      for (let item in this.columns) {
-        const key = this.columns[item].key;
-        this.columns[item].visible = !data.includes(key);
-      }
-    },
-    // 打开显隐列dialog
-    showColumn() {
-      this.open = true;
-    },
-  },
-};
+	export default {
+		name: 'RightToolbar',
+		data() {
+			return {
+				// 显隐数据
+				value: [],
+				// 弹出层标题
+				title: '显示/隐藏',
+				// 是否显示弹出层
+				open: false
+			}
+		},
+		props: {
+			showSearch: {
+				type: Boolean,
+				default: true
+			},
+			columns: {
+				type: Array
+			},
+			isShowSearch: {
+				type: Boolean,
+				default: true
+			}
+		},
+		created() {
+			// 显隐列初始默认隐藏列
+			for (let item in this.columns) {
+				if (this.columns[item].visible === false) {
+					this.value.push(parseInt(item))
+				}
+			}
+		},
+		methods: {
+			// 搜索
+			toggleSearch() {
+				this.$emit('update:showSearch', !this.showSearch)
+			},
+			// 刷新
+			refresh() {
+				this.$emit('queryTable')
+			},
+			// 右侧列表元素变化
+			dataChange(data) {
+				for (let item in this.columns) {
+					const key = this.columns[item].key
+					this.columns[item].visible = !data.includes(key)
+				}
+			},
+			// 打开显隐列dialog
+			showColumn() {
+				this.open = true
+			}
+		}
+	}
 </script>
 <style lang="scss" scoped>
-::v-deep .el-transfer__button {
-  border-radius: 50%;
-  padding: 12px;
-  display: block;
-  margin-left: 0px;
-}
-::v-deep .el-transfer__button:first-child {
-  margin-bottom: 10px;
-}
+	::v-deep .el-transfer__button {
+		border-radius: 50%;
+		padding: 12px;
+		display: block;
+		margin-left: 0px;
+	}
+	::v-deep .el-transfer__button:first-child {
+		margin-bottom: 10px;
+	}
 </style>

src/components/deptTreeChoice/index.vue

@@ -11,32 +11,24 @@
 			ref="tree"
 			@node-click="nodeClick"
 			show-checkbox
-			:default-checked-keys="defaultChecked"
+			:default-checked-keys="checkeds"
 			:props="{ disabled: () => true }"
 		>
 			<span class="custom-tree-node" slot-scope="{ data }">
-				<span>{{ data[nodeVal] }}</span>
+				<span>{{ data.label }}</span>
 			</span>
 		</el-tree>
 	</div>
 </template>
 
 <script>
+	import { treeselect } from '@/api/system/dept.js'
 	export default {
 		model: {
 			prop: 'modelValue',
 			event: 'dataChange'
 		},
 		props: {
-			dataList: Array,
-			nodeKey: {
-				type: String,
-				default: 'id'
-			},
-			nodeVal: {
-				type: String,
-				default: 'name'
-			},
 			modelValue: {
 				type: Array,
 				required: true
@@ -45,7 +37,13 @@
 		data() {
 			return {
 				//搜索字段
-				filterText: ''
+				filterText: '',
+				//拥有权限的id数组
+				checkeds: [],
+				//部门数据
+				dataList: [],
+				//选中的部门信息
+				deptInfo: {}
 			}
 		},
 		computed: {
@@ -57,15 +55,6 @@
 					this.$emit('dataChange', val)
 					this.$emit('click')
 				}
-			},
-			//选中节点
-			defaultChecked() {
-				let ids = this.$store.state.user.dataPermissions
-				if (ids.includes('*')) {
-					return this.getAllIds(this.dataList)
-				} else {
-					return ids
-				}
 			}
 		},
 		watch: {
@@ -73,22 +62,55 @@
 				this.$refs.tree.filter(val)
 			}
 		},
+		created() {
+			this.getDeptList()
+		},
 		methods: {
+			//获取部门数据
+			getDeptList() {
+				treeselect().then((res) => {
+					if (res.code === 200) {
+						this.dataList = res.data
+						this.checkeds = this.getDeptIds()
+					}
+				})
+			},
 			//搜索过滤节点
 			filterNode(value, data) {
 				if (!value) return true
-				return data[this.nodeVal].indexOf(value) !== -1
+				return data.label.indexOf(value) !== -1
 			},
-			nodeClick(data) {
-				let ids
-				if (data.children && data.children.length) {
-					ids = this.getAllIds(data.children)
+			//获取拥有的数据权限
+			getDeptIds() {
+				let ids = this.$store.state.user.dataPermissions
+				if (ids.includes('*')) {
+					return this.getAllIds(this.dataList)
 				} else {
-					ids = []
+					return ids
 				}
+			},
+			//节点点击
+			nodeClick(data, node) {
+				let ids = data.children && data.children.length ? this.getAllIds(data.children) : []
 				ids.push(data.id)
-				this.deptIds = ids.filter((item) => this.defaultChecked.includes(item))
+				ids = ids.filter((item) => this.checkeds.includes(item))
+				if (!ids.length) {
+					return
+				}
+				this.deptIds = ids
+				let deptNames = data.label
+				let parent = node.parent
+				while (parent.data.constructor === Object) {
+					deptNames = parent.data.label + '\\' + deptNames
+					parent = parent.parent
+				}
+				this.$emit('getDeptInfo', {
+					deptId: data.id,
+					deptName: data.label,
+					deptNames
+				})
 			},
+			//递归获取所有部门id
 			getAllIds(parents) {
 				if (!parents) return []
 				let arrs = []

src/components/treeChoice/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="tree-choice">
+		<el-input placeholder="输入名称搜索" v-model="filterText" style="margin-bottom: 10px"></el-input>
+		<el-tree :data="dataList" :node-key="nodeKey" default-expand-all :highlight-current="true" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" @node-click="nodeClick">
+			<span class="custom-tree-node" slot-scope="{ data }">
+				<span>{{ data[nodeVal] }}</span>
+			</span>
+		</el-tree>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			dataList: {
+				type: Array,
+				required: true
+			},
+			nodeKey: {
+				type: String,
+				default: 'id'
+			},
+			nodeVal: {
+				type: String,
+				default: 'label'
+			}
+		},
+		data() {
+			return {
+				//搜索字段
+				filterText: ''
+			}
+		},
+		watch: {
+			filterText(val) {
+				this.$refs.tree.filter(val)
+			}
+		},
+		methods: {
+			//搜索过滤节点
+			filterNode(value, data) {
+				if (!value) return true
+				return data[this.nodeVal].indexOf(value) !== -1
+			},
+			//节点点击
+			nodeClick(data) {
+				this.$emit('itemClick', data)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.tree-choice {
+		background-color: #fff;
+		padding: 10px 10px;
+		width: 280px;
+		margin-right: 7px;
+		flex-shrink: 0;
+		height: 100%;
+		overflow-y: auto;
+	}
+</style>

src/components/userChoice/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="main">
+    <el-card class="box-card" v-show="list.length">
+      <div slot="header" class="header">
+        <span class="title">{{ title }}</span>
+      </div>
+      <div class="list_item">
+        <div v-for="(item, index) in list" :key="index" class="text item">
+          <el-button size="small" class="btn">{{ item }}</el-button>
+        </div>
+      </div>
+      <div class="footer">
+        <span slot="footer" class="btn_foot">
+          <el-button size="small">取 消</el-button>
+          <el-button type="primary" size="small">确 定</el-button>
+        </span>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      title: "",
+    };
+  },
+  created() {
+    this.inin();
+  },
+  methods: {
+    inin(val, title) {
+      if (val) {
+        this.list = val;
+        this.title = title;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.main{
+  margin-left: 100px;
+}
+.box-card {
+  width: 510px;
+}
+.list_item {
+  height: 200px;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 10px;
+}
+.text{
+  margin-top: 8px;
+}
+.el-button{
+  font-size: 14px;
+}
+.btn {
+  width: 85px;
+  margin-left: 9px;
+}
+.btn_foot{
+  padding-right: 50px;
+  display: flex;
+  justify-content: flex-end;
+}
+.title{
+  font-size: 18px;
+  font-weight: bold;
+}
+.footer{
+  border-top: #EBEEF5 solid 1px;
+  padding: 8px 0;
+}
+</style>
+<style scoped>
+.el-card >>> .el-card__body{
+  padding: 0;
+}
+</style>

src/store/modules/user.js

@@ -77,7 +77,8 @@ const user = {
 							} else {
 								commit('SET_ROLES', ['ROLE_DEFAULT'])
 							}
-							commit('SET_DATA_PERMISSIONS', user.dataJurisdictionIds.split(','))
+							let deptids = user.dataJurisdictionIds && user.dataJurisdictionIds.split(',')
+							commit('SET_DATA_PERMISSIONS', deptids)
 							commit('SET_NAME', user.userName)
 							commit('SET_AVATAR', avatar)
 							resolve(res)

src/views/system/dataPermissions/index.vue

@@ -175,7 +175,7 @@
 			rowHandler(e) {
 				this.dataRoleId = e.dataRoleId
 				if (e.deptIds && e.deptIds != '') {
-					this.authIds = e.deptIds.split(',').map((item) => Number(item))
+					this.authIds = e.deptIds.split(',')
 				} else {
 					this.authIds = []
 				}

src/views/system/employeenInfo/index.vue

@@ -639,7 +639,7 @@
 					pageSize: 10,
 					realName: undefined,
 					phonenumber: undefined,
-					deptIds: [],
+					deptIds: []
 				},
 				// 列信息
 				columns: [

src/views/system/stockLocation/index.vue

@@ -1,39 +1,201 @@
 <template>
 	<div class="page-container">
 		<div class="content-container">
-			<TreeChoice :dataList="deptList" nodeKey="id" nodeVal="label" v-model="hasDeptIds" />
-			<div class="main"> </div>
+			<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="deptNames" 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 />
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	import { deptList } from '@/api/system/stockLocation.js'
+	import { stockList, stockAdd, stockUpd, stockDel } from '@/api/system/stockLocation.js'
 	import TreeChoice from '@/components/deptTreeChoice/index.vue'
+	import UserChoice from '@/components/userChoice/index.vue'
 	export default {
 		name: 'stockLocation',
 		components: {
-			TreeChoice
+			TreeChoice,
+			UserChoice
 		},
 		data() {
 			return {
-				//部门数据
-				deptList: [],
+				loading: false,
 				//拥有权限的部门id数组
-				hasDeptIds: []
+				hasDeptIds: [],
+				//数据
+				dataList: [],
+				//库位编辑弹窗显示
+				stockShow: false,
+				//库位编辑弹窗标题
+				title: '',
+				//库位表单
+				stockForm: { deptId: '', locationName: '', remark: '', deptName: '' },
+				//库位表单验证
+				stockRules: { locationName: [{ required: true, message: '名称不能为空', trigger: 'blur' }] }
 			}
 		},
-		created() {
-			this.init()
-		},
 		methods: {
-			//页面初始化
-			init() {
-				deptList().then((res) => {
+			//获取数据
+			getList() {
+				if (!this.hasDeptIds.length) {
+					this.dataList = []
+					return
+				}
+				this.loading = true
+				stockList({ deptIds: this.hasDeptIds }).then((res) => {
 					if (res.code === 200) {
-						this.deptList = res.data
+						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() {},
+			//修改
+			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(() => {})
 			}
 		}
 	}

src/views/system/tableHead/index.vue

@@ -73,7 +73,7 @@
 <script>
 	import { listMenu, tableHeadAdd, tableHeadList, tableHeadUpd, tableHeadDel } from '@/api/system/tableHead'
 	import { checkPermi } from '@/utils/permission'
-	import TreeChoice from '@/components/deptTreeChoice/index.vue'
+	import TreeChoice from '@/components/treeChoice/index.vue'
 	export default {
 		name: 'TableHead',
 		dicts: ['sys_tableHead_required'],
@@ -138,7 +138,6 @@
 
 			//点击菜单
 			menuClick(data) {
-				console.log(data)
 				this.tableHeadList = []
 				this.menuId = data.menuId
 				this.menuName = data.menuName