格克

src/views/system/modules/DepartWindows.vue

@@ -0,0 +1,210 @@
+<template>
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    title="部门搜索"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    >
+    <!--部门树-->
+    <template>
+      <a-form :form="form">
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门">
+     <a-directory-tree
+         :expanded-keys="expandedKeys"
+         :auto-expand-parent="autoExpandParent"
+         :selected-keys="selectedKeys"
+         :tree-data="departTree"
+         @expand="onExpand"
+         @select="onSelect"
+       />
+      </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 {
+       expandedKeys: ['1'],
+        autoExpandParent: true,
+        checkedKeys: [],
+        selectedKeys: [],
+        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: {
+      onExpand(expandedKeys) {
+            console.log('onExpand', expandedKeys);
+            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+            // or, you can remove all expanded children keys.
+            this.expandedKeys = expandedKeys;
+            //this.autoExpandParent = false;
+          },
+          onCheck(checkedKeys) {
+            console.log('onCheck', checkedKeys);
+            this.checkedKeys = checkedKeys;
+          },
+          onSelect(selectedKeys, info) {
+            console.log('onSelect', selectedKeys);
+            this.selectedKeys = selectedKeys;
+            this.departList = [];
+            let selectedNodes = info.selectedNodes;
+            for (let i = 0; i < selectedNodes.length; i++) {
+              let de = selectedNodes[i]._props;
+              let depart = {key:"",value:"",title:""};
+              depart.key = de.value;
+              depart.value = de.value;
+              depart.title = de.title;
+              this.departList.push(depart);
+            }
+          },
+      add (checkedDepartKeys,userId) {
+        this.selectedKeys = checkedDepartKeys;
+        console.log(checkedDepartKeys)
+        //this.expandedKeysss=checkedDepartKeys;
+        this.userId = userId;
+        this.edit({});
+      },
+      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);
+        });
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.departList = [];
+        this.checkedKeys = [];
+      },
+      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}
+                  that.$emit('ok', formData);
+                }
+              }).finally(() => {
+                that.departList = [];
+                that.confirmLoading = false;
+                that.close();
+              })
+            }else {
+              let formData = {userId:this.userId,
+                departIdList:this.departList}
+              that.departList = [];
+              that.$emit('ok', formData);
+              that.confirmLoading = false;
+              that.close();
+            }
+          }
+        })
+      },
+      handleCancel () {
+        this.close()
+      },
+
+      // 选择部门时作用的API
+      onCheck(checkedKeys, info){
+        console.log(checkedKeys)
+        this.departList = [];
+        this.checkedKeys = checkedKeys.checked;
+        let selectedNodes = info.selectedNodes;
+        for (let i = 0; i < selectedNodes.length; i++) {
+          let de = selectedNodes[i]._props;
+          let depart = {key:"",value:"",title:""};
+          depart.key = de.value;
+          depart.value = de.value;
+          depart.title = de.title;
+          this.departList.push(depart);
+        }
+
+      },
+      queryDepartTree(){
+        queryIdTree().then((res)=>{
+          if(res.success){
+            this.departTree = res.result;
+            if(this.selectedKeys&&this.selectedKeys.length >0){
+             //  let treekey=[];
+             //  let arr=res.result;
+             //  if(arr&&arr.length>0){
+             //    arr.forEach(item => {
+             //      treekey.push(item.key);
+             // /*     if(item.children&&item.children.length>0){
+             //        item.children.forEach(item1 => {
+             //          treekey.push(item1.key);
+             //        })
+             //      }*/
+             //    })
+             //    this.expandedKeys = treekey
+             //  }
+             this.expandedKeys = this.selectedKeys;
+            }
+          }
+        })
+      },
+      // onExpand(expandedKeys){
+      //   this.expandedKeysss = expandedKeys;
+      // },
+      modalFormOk(){
+
+      }
+      },
+  }
+</script>
+
+<style lang="less" scoped>
+  .ant-table-tbody .ant-table-row td{
+    padding-top:10px;
+    padding-bottom:10px;
+  }
+  /deep/ .ant-modal{
+    height: 700px;
+  }
+</style>