需求管理-选择企业：企业搜索组件，列表固定高度，移除搜索条件

系统管理-用户管理：部分搜索组件优化，移除搜索条件

src/views/requiremanager/modules/CompanySelectWindow.vue

@@ -1,172 +1,228 @@
-<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"
-            checkable
-            :checkedKeys="checkedKeys"
-            allowClear="true"
-            :checkStrictly="true"
-            @check="onCheck"
-            :dropdownStyle="dropDownStyle"
-            :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 { queryDepartTreeList } from '@/api/api'
-
-
-  export default {
-    name: 'CompanySelectWindow',
-    components: {},
-    data() {
-      return {
-        multipe: false,
-        checkedKeys: [], // 存储选中的服务商id
-        departList: [], // 存储选中的服务商信息
-        modalWidth: 400,
-        departTree: [],
-        title: '操作',
-        visible: false,
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 }
-        },
-        dropDownStyle:{
-          maxHeight:'200px',
-          overflow:'auto'
-        },
-        confirmLoading: false,
-        headers: {},
-        form: this.$form.createForm(this),
-        url: {
-          list: '/hlgcompany/hlgCompany/allCompanyList',//查询所有企业
-        }
-      }
-    },
-    methods: {
-      add(checkedDepartKeys) {
-        this.checkedKeys = checkedDepartKeys;
-        this.edit({})
-      },
-      edit() {
-        this.departList = []
-        this.queryCompanyDepartList()
-        this.form.resetFields()
-        this.visible = true
-      },
-      close() {
-        this.$emit('close')
-        this.visible = false
-        this.departList = []
-        this.checkedKeys = []
-      },
-      handleSubmit() {
-        const that = this
-        // 触发表单验证
-        this.form.validateFields((err) => {
-          if (!err) {
-            that.confirmLoading = true
-            let formData = {
-              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
-            console.log(1111,de)
-            //只能选择企业，一级平台选择无效
-            if(!de.parentId){
-              this.checkedKeys = [];
-              return;
-            }
-            let depart = { key: '', value: '',title:""}
-            depart.key = de.id
-            depart.value = de.id
-            depart.title = de.departName;
-            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.id
-            depart.value = de.id
-            depart.title = de.departName;
-            this.departList.push(depart)
-          }
-        }
-        console.log('onCheck', checkedKeys, info)
-      },
-      //查询所有企业列表
-      queryCompanyDepartList() {
-        queryDepartTreeList().then((res) => {
-          if (res.success) {
-            for(let i = 0;i<res.result.length;i++){
-              res.result[i].title = res.result[i].departName;
-              //只能选择企业，一级平台默认不能选择
-              if(!res.result[i].parentId){
-                res.result[i].disabled = true;
-              }
-            }
-            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 v-model="keyword" style="margin-bottom: 8px" placeholder="请输入企业名称" @search="onSearch" />
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业">
+          <a-tree
+            :multiple="multipe"
+            checkable
+            :checkedKeys="checkedKeys"
+            allowClear="true"
+            :checkStrictly="true"
+            @check="onCheck"
+            @expand="onExpand"
+            :autoExpandParent="autoExpandParent"
+            :expandedKeys="expandedKeys"
+            :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 { queryDepartTreeList } from '@/api/api'
+
+
+  export default {
+    name: 'CompanySelectWindow',
+    components: {},
+    data() {
+      return {
+        multipe: false,
+        checkedKeys: [], // 存储选中的服务商id
+        departList: [], // 存储选中的服务商信息
+        modalWidth: 400,
+        bodyStyle:{
+          maxHeight:"400px",
+          "overflow-y":"auto",
+        },
+        departTree: [],
+        title: '操作',
+        visible: false,
+        keyword: '',
+        autoExpandParent: true,
+        expandedKeys: [],
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        },
+        dropDownStyle:{
+          maxHeight:'200px',
+          overflow:'auto'
+        },
+        confirmLoading: false,
+        headers: {},
+        form: this.$form.createForm(this),
+        url: {
+          list: '/hlgcompany/hlgCompany/allCompanyList',//查询所有企业
+        }
+      }
+    },
+    methods: {
+      add(checkedDepartKeys) {
+        this.checkedKeys = checkedDepartKeys;
+        this.edit({})
+      },
+      edit() {
+        this.keyword = '';
+        this.departList = []
+        this.queryCompanyDepartList()
+        this.form.resetFields()
+        this.visible = true
+      },
+      close() {
+        this.$emit('close')
+        this.visible = false
+        this.departList = []
+        this.checkedKeys = []
+      },
+      handleSubmit() {
+        const that = this
+        // 触发表单验证
+        this.form.validateFields((err) => {
+          if (!err) {
+            that.confirmLoading = true
+            let formData = {
+              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
+            console.log(1111,de)
+            //只能选择企业，一级平台选择无效
+            if(!de.parentId){
+              this.checkedKeys = [];
+              return;
+            }
+            let depart = { key: '', value: '',title:""}
+            depart.key = de.id
+            depart.value = de.id
+            depart.title = de.departName;
+            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.id
+            depart.value = de.id
+            depart.title = de.departName;
+            this.departList.push(depart)
+          }
+        }
+        console.log('onCheck', checkedKeys, info)
+      },
+      //查询所有企业列表
+      queryCompanyDepartList() {
+        queryDepartTreeList().then((res) => {
+          if (res.success) {
+            for(let i = 0;i<res.result.length;i++){
+              res.result[i].title = res.result[i].departName;
+              //只能选择企业，一级平台默认不能选择
+              if(!res.result[i].parentId){
+                res.result[i].disabled = true;
+              }
+            }
+            this.departTree = res.result
+            this.initExpandedKeys(res.result)
+          }
+        })
+      },
+      initExpandedKeys(arr){
+        if(arr && arr.length>0){
+          let keys = []
+          for(let item of arr){
+            if(item.children && item.children.length>0){
+              keys.push(item.id)
+            }
+          }
+          this.expandedKeys=[...keys]
+        }else{
+          this.expandedKeys=[]
+        }
+      },
+      onExpand (expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      modalFormOk() {
+
+      },
+      onSearch(value) {
+        let that = this
+        if (value) {
+          //模糊搜索
+          value = '*' + value + '*';
+          queryDepartTreeList({departName: value}).then((res) => {
+            if (res.success) {
+              that.departTree = []
+              for (let i = 0; i < res.result.length; i++) {
+                res.result[i].title = res.result[i].departName;
+                //只能选择企业，一级平台默认不能选择
+                if(!res.result[i].parentId){
+                  res.result[i].disabled = true;
+                }
+                let temp = res.result[i]
+                that.departTree.push(temp)
+              }
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+        } else {
+          that.queryCompanyDepartList()
+        }
+
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
 </style>

src/views/system/modules/DepartWindow.vue

@@ -13,7 +13,7 @@
     <!--部门树-->
     <template>
       <a-form :form="form">
-        <a-input-search style="margin-bottom: 8px" placeholder="请输入部门名称" @search="onSearch" />
+        <a-input-search v-model="keyword" style="margin-bottom: 8px" placeholder="请输入部门名称" @search="onSearch" />
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
           <a-tree
             :multiple="multipe"
@@ -59,6 +59,7 @@
         departTree:[],
         title:"操作",
         visible: false,
+        keyword: '',
         labelCol: {
           xs: { span: 24 },
           sm: { span: 5 },
@@ -82,6 +83,7 @@
         this.edit({});
       },
       edit (record) {
+        this.keyword = '';
         this.departList = [];
         this.queryDepartTree();
         this.form.resetFields();
@@ -178,6 +180,7 @@
       onSearch(value) {
         let that = this
         if (value) {
+          //模糊搜索
           value = '*' + value + '*';
           queryIdTree({departName: value}).then((res) => {
             if (res.success) {