|
|
@@ -8,157 +8,225 @@
|
|
|
@cancel="handleCancel"
|
|
|
cancelText="关闭"
|
|
|
wrapClassName="ant-modal-cust-warp"
|
|
|
- >
|
|
|
+ >
|
|
|
<!--部门树-->
|
|
|
<template>
|
|
|
<a-form :form="form">
|
|
|
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
|
|
- <a-tree
|
|
|
- multiple
|
|
|
- treeCheckable="tree"
|
|
|
- checkable
|
|
|
- :checkedKeys="checkedKeys"
|
|
|
- allowClear="true"
|
|
|
- :checkStrictly="true"
|
|
|
- @check="onCheck"
|
|
|
- :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
|
|
- :treeData="departTree"
|
|
|
- placeholder="请选择上级部门"
|
|
|
- >
|
|
|
- </a-tree>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属公司">
|
|
|
+ <a-checkbox-group @change="onChange" :value="orgDefaultValue" style="width:100%;margin-top:9px">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8" v-for="(item,index) in orgList" :key="index">
|
|
|
+ <a-checkbox :value="item.key">{{item.title}}</a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属部门">
|
|
|
+ <a-tree
|
|
|
+ multiple
|
|
|
+ treeCheckable="tree"
|
|
|
+ checkable
|
|
|
+ :checkedKeys="checkedKeys"
|
|
|
+ allowClear="true"
|
|
|
+ :checkStrictly="true"
|
|
|
+ @check="onCheck"
|
|
|
+ :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
|
|
+ :treeData="departTree"
|
|
|
+ placeholder="请选择上级部门"
|
|
|
+ ></a-tree>
|
|
|
+ </a-form-item>
|
|
|
</a-form>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import pick from 'lodash.pick'
|
|
|
- import { getAction } from '@/api/manage'
|
|
|
- import { queryIdTree } from '@/api/api'
|
|
|
- import userModal from './UserModal'
|
|
|
- export default {
|
|
|
- name: "DepartWindow",
|
|
|
- components: {
|
|
|
- userModal,
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- checkedKeys:[], // 存储选中的部门id
|
|
|
- userId:"", // 存储用户id
|
|
|
- model:{}, // 存储SysUserDepartsVO表
|
|
|
- userDepartModel:{userId:'',departIdList:[]}, // 存储用户id一对多部门信息的对象
|
|
|
- departList:[], // 存储部门信息
|
|
|
- modalWidth:400,
|
|
|
- departTree:[],
|
|
|
- title:"操作",
|
|
|
- visible: false,
|
|
|
- labelCol: {
|
|
|
- xs: { span: 24 },
|
|
|
- sm: { span: 5 },
|
|
|
- },
|
|
|
- wrapperCol: {
|
|
|
- xs: { span: 24 },
|
|
|
- sm: { span: 16 },
|
|
|
- },
|
|
|
- confirmLoading: false,
|
|
|
- headers:{},
|
|
|
- form:this.$form.createForm(this),
|
|
|
- url: {
|
|
|
- userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- add (checkedDepartKeys,userId) {
|
|
|
- this.checkedKeys = checkedDepartKeys;
|
|
|
- this.userId = userId;
|
|
|
- this.edit({});
|
|
|
+import pick from 'lodash.pick'
|
|
|
+import { getAction } from '@/api/manage'
|
|
|
+import { queryIdTree } from '@/api/api'
|
|
|
+import userModal from './UserModal'
|
|
|
+export default {
|
|
|
+ name: 'DepartWindow',
|
|
|
+ components: {
|
|
|
+ userModal
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkedKeys: [], // 存储选中的部门id
|
|
|
+ userId: '', // 存储用户id
|
|
|
+ model: {}, // 存储SysUserDepartsVO表
|
|
|
+ userDepartModel: { userId: '', departIdList: [] }, // 存储用户id一对多部门信息的对象
|
|
|
+ departList: [], // 存储部门信息
|
|
|
+ modalWidth: 800,
|
|
|
+ departTree: [],
|
|
|
+ title: '操作',
|
|
|
+ visible: false,
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 }
|
|
|
},
|
|
|
- edit (record) {
|
|
|
- this.departList = [];
|
|
|
- this.queryDepartTree();
|
|
|
- this.form.resetFields();
|
|
|
- this.visible = true;
|
|
|
- this.model = Object.assign({}, record);
|
|
|
- let filedsVal = pick(this.model,'id','userId','departIdList');
|
|
|
- this.$nextTick(() => {
|
|
|
- this.form.setFieldsValue(filedsVal);
|
|
|
- });
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 19 }
|
|
|
},
|
|
|
- close () {
|
|
|
- this.$emit('close');
|
|
|
- this.visible = false;
|
|
|
- this.departList = [];
|
|
|
- this.checkedKeys = [];
|
|
|
+ confirmLoading: false,
|
|
|
+ headers: {},
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ url: {
|
|
|
+ userId: '/sys/user/generateUserId' // 引入生成添加用户情况下的url
|
|
|
},
|
|
|
- handleSubmit () {
|
|
|
- const that = this;
|
|
|
- // 触发表单验证
|
|
|
- this.form.validateFields((err) => {
|
|
|
- if (!err) {
|
|
|
- that.confirmLoading = true;
|
|
|
- if(this.userId == null){
|
|
|
- getAction(this.url.userId).then((res)=>{
|
|
|
- if(res.success){
|
|
|
- let formData = {userId:res.result,
|
|
|
- departIdList:this.departList}
|
|
|
+ orgList: [], //公司集合
|
|
|
+ orgObject: {
|
|
|
+ pkOrg: '', //选中的公司id
|
|
|
+ pkOrgName: '' //选中的公司名称
|
|
|
+ }
|
|
|
+ ,orgDefaultValue:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add(checkedDepartKeys, userId, userObject) {
|
|
|
+ this.checkedKeys = checkedDepartKeys
|
|
|
+ this.userId = userId
|
|
|
+
|
|
|
+ if(userObject&&userObject.pkOrg){
|
|
|
+ this.orgDefaultValue=[]
|
|
|
+ this.orgDefaultValue=userObject.pkOrg.split(',');
|
|
|
+ }
|
|
|
+ console.log(this.orgDefaultValue)
|
|
|
+ this.edit(userObject)
|
|
|
+ },
|
|
|
+ edit(record) {
|
|
|
+ this.departList = []
|
|
|
+ this.queryDepartTree(record)
|
|
|
+ this.form.resetFields()
|
|
|
+ this.visible = true
|
|
|
+ this.model = Object.assign({}, record)
|
|
|
+ let filedsVal = pick(this.model, 'id', 'userId', 'departIdList')
|
|
|
+ console.log(filedsVal)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(filedsVal)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('close')
|
|
|
+ this.visible = false
|
|
|
+ this.departList = []
|
|
|
+ this.checkedKeys = []
|
|
|
+ this.orgList=[]
|
|
|
+ this.orgObject=[]
|
|
|
+ this.orgDefaultValue=[]
|
|
|
+ this.departTree=[]
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ const that = this
|
|
|
+ // 触发表单验证
|
|
|
+ this.form.validateFields(err => {
|
|
|
+ if (!err) {
|
|
|
+ that.confirmLoading = true
|
|
|
+ if (this.userId == null) {
|
|
|
+ getAction(this.url.userId)
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ let formData = { userId: res.result, departIdList: this.departList, orgObject: this.orgObject }
|
|
|
console.log(formData)
|
|
|
- that.$emit('ok', formData);
|
|
|
+ that.$emit('ok', formData)
|
|
|
}
|
|
|
- }).finally(() => {
|
|
|
- that.departList = [];
|
|
|
- that.confirmLoading = false;
|
|
|
- that.close();
|
|
|
})
|
|
|
- }else {
|
|
|
- let formData = {userId:this.userId,
|
|
|
- departIdList:this.departList}
|
|
|
- console.log(formData)
|
|
|
- that.departList = [];
|
|
|
- that.$emit('ok', formData);
|
|
|
- that.confirmLoading = false;
|
|
|
- that.close();
|
|
|
- }
|
|
|
+ .finally(() => {
|
|
|
+ that.departList = []
|
|
|
+ that.confirmLoading = false
|
|
|
+ that.close()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let formData = { userId: this.userId, departIdList: this.departList, orgObject: this.orgObject }
|
|
|
+ console.log(formData)
|
|
|
+ that.departList = []
|
|
|
+ that.$emit('ok', formData)
|
|
|
+ that.confirmLoading = false
|
|
|
+ that.close()
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- handleCancel () {
|
|
|
- this.close()
|
|
|
- },
|
|
|
-
|
|
|
- // 选择部门时作用的API
|
|
|
- onCheck(checkedKeys, info){
|
|
|
- this.departList = [];
|
|
|
- this.checkedKeys = checkedKeys.checked;
|
|
|
- let checkedNodes = info.checkedNodes;
|
|
|
- for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
- let de = checkedNodes[i].data.props;
|
|
|
- let depart = {key:"",value:"",title:""};
|
|
|
- depart.key = de.value;
|
|
|
- depart.value = de.value;
|
|
|
- depart.title = de.title;
|
|
|
- this.departList.push(depart);
|
|
|
}
|
|
|
- console.log('onCheck', checkedKeys, info);
|
|
|
- },
|
|
|
- queryDepartTree(){
|
|
|
- queryIdTree().then((res)=>{
|
|
|
- if(res.success){
|
|
|
- this.departTree = res.result;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择部门时作用的API
|
|
|
+ onCheck(checkedKeys, info) {
|
|
|
+ this.departList = []
|
|
|
+ this.checkedKeys = checkedKeys.checked
|
|
|
+ let checkedNodes = info.checkedNodes
|
|
|
+ for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
+ let de = checkedNodes[i].data.props
|
|
|
+ let depart = { key: '', value: '', title: '' }
|
|
|
+ depart.key = de.value
|
|
|
+ depart.value = de.value
|
|
|
+ depart.title = de.title
|
|
|
+ this.departList.push(depart)
|
|
|
+ }
|
|
|
+ console.log('onCheck', checkedKeys, info)
|
|
|
+ },
|
|
|
+ queryDepartTree(record) {
|
|
|
+ console.log(record)
|
|
|
+
|
|
|
+ console.log(this.orgDefaultValue)
|
|
|
+ queryIdTree().then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ // this.departTree = res.result
|
|
|
+ this.orgList = JSON.parse(JSON.stringify(res.result))
|
|
|
+ //处理修改进来显示公司
|
|
|
+ if (record&&record.pkOrg) {
|
|
|
+ this.departTree=[];
|
|
|
+ var orgSelects = record.pkOrg.split(',')
|
|
|
+ orgSelects.forEach(value => {
|
|
|
+ this.orgList.forEach(org => {
|
|
|
+ if (value == org.key) {
|
|
|
+ //显示可选部门
|
|
|
+ org.disabled = true //部门一级设置禁选
|
|
|
+ this.departTree.push(org)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modalFormOk() {},
|
|
|
+ onChange(checkedValues) {
|
|
|
+ this.orgDefaultValue=checkedValues
|
|
|
+ //清空
|
|
|
+ this.departTree = []
|
|
|
+ this.orgObject = {
|
|
|
+ pkOrg: '', //选中的公司id
|
|
|
+ pkOrgName: '' //选中的公司名称
|
|
|
+ }
|
|
|
+ if (checkedValues) {
|
|
|
+ //获取公司id和公司名称
|
|
|
+ checkedValues.forEach(value => {
|
|
|
+ this.orgList.forEach(org => {
|
|
|
+ if (value == org.key) {
|
|
|
+ //显示可选部门
|
|
|
+ org.disabled = true //部门一级设置禁选
|
|
|
+ this.departTree.push(org)
|
|
|
+ //获取公司数据
|
|
|
+ this.orgObject.pkOrg = this.orgObject.pkOrg + org.key + ','
|
|
|
+ this.orgObject.pkOrgName = this.orgObject.pkOrgName + org.title + ','
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
- },
|
|
|
- modalFormOk(){
|
|
|
-
|
|
|
+ //去掉最后一位符号
|
|
|
+ this.orgObject.pkOrg = this.orgObject.pkOrg.slice(0, this.orgObject.pkOrg.length - 1)
|
|
|
+ this.orgObject.pkOrgName = this.orgObject.pkOrgName.slice(0, this.orgObject.pkOrgName.length - 1)
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .ant-table-tbody .ant-table-row td{
|
|
|
- padding-top:10px;
|
|
|
- padding-bottom:10px;
|
|
|
- }
|
|
|
+.ant-table-tbody .ant-table-row td {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
</style>
|
