系统管理-用户管理：部门搜索组件固定高度，增加搜索栏

src/views/system/modules/DepartWindow.vue

@@ -1,182 +1,206 @@
-<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-tree
-        :multiple="multipe"
-        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 {
-        multipe: false,
-        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({});
-      },
-      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}
-                  console.log(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();
-            }
-          }
-        })
-      },
-      handleCancel () {
-        this.close()
-      },
-
-      // 选择部门时作用的API
-      onCheck(checkedKeys, info){
-        this.departList = [];
-        if(!this.multipe) {//单选
-          let arr = checkedKeys.checked.filter(item=>{
-            return this.checkedKeys.indexOf(item)<0
-          })
-          this.checkedKeys = [...arr]
-          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[0] = depart;
-          }
-        }else{//多选
-          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;
-          }
-        })
-      },
-      modalFormOk(){
-
-      }
-      },
-  }
-</script>
-
-<style scoped>
-  .ant-table-tbody .ant-table-row td{
-    padding-top:10px;
-    padding-bottom:10px;
-  }
+<template>
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    :bodyStyle ="bodyStyle"
+    title="部门搜索"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    >
+    <!--部门树-->
+    <template>
+      <a-form :form="form">
+        <a-input-search style="margin-bottom: 8px" placeholder="请输入部门名称" @search="onSearch" />
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
+          <a-tree
+            :multiple="multipe"
+            treeCheckable="tree"
+            checkable
+            :checkedKeys="checkedKeys"
+            allowClear="true"
+            :checkStrictly="true"
+            @check="onCheck"
+            :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,searchByKeywords } from '@/api/api'
+  import userModal from './UserModal'
+  export default {
+    name: "DepartWindow",
+    components: {
+      userModal,
+    },
+    data () {
+      return {
+        multipe: false,
+        checkedKeys:[], // 存储选中的部门id
+        userId:"", // 存储用户id
+        model:{}, // 存储SysUserDepartsVO表
+        userDepartModel:{userId:'',departIdList:[]}, // 存储用户id一对多部门信息的对象
+        departList:[], // 存储部门信息
+        modalWidth:400,
+        bodyStyle:{
+          maxHeight:"400px",
+          "overflow-y":"auto",
+        },
+        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({});
+      },
+      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}
+                  console.log(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();
+            }
+          }
+        })
+      },
+      handleCancel () {
+        this.close()
+      },
+
+      // 选择部门时作用的API
+      onCheck(checkedKeys, info){
+        this.departList = [];
+        if(!this.multipe) {//单选
+          let arr = checkedKeys.checked.filter(item=>{
+            return this.checkedKeys.indexOf(item)<0
+          })
+          this.checkedKeys = [...arr]
+          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[0] = depart;
+          }
+        }else{//多选
+          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;
+          }
+        })
+      },
+      modalFormOk(){
+
+      },
+      onSearch(value) {
+        let that = this
+        if (value) {
+          searchByKeywords({keyWord: value}).then((res) => {
+            if (res.success) {
+              that.departTree = []
+              for (let i = 0; i < res.result.length; i++) {
+                let temp = res.result[i]
+                that.departTree.push(temp)
+              }
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+        } else {
+          that.queryDepartTree()
+        }
+
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .ant-table-tbody .ant-table-row td{
+    padding-top:10px;
+    padding-bottom:10px;
+  }
 </style>