fix : 修复新增需求征集所属公司选择弹框

2024-06-14 23:17:32 +08:00
parent 58cbceb747
commit 532ef440ce
3 changed files with 131 additions and 149 deletions
--- a/src/components/DetailComponent/CompanyPicker.vue
+++ b/src/components/DetailComponent/CompanyPicker.vue
@@ -4,10 +4,10 @@
             :destroy-on-close="true">
    <div class="picker">
      <div class="candidate" v-loading="loading">
-        <el-input v-model="filterText" @change="getList(1)"
-                  clearable placeholder="输入部门/昵称进行搜索">
+        <el-input v-model="filterText" @change="getList()"
+                  clearable placeholder="输入部门进行搜索">
          <template #append>
-            <el-button @click="getList(1)">搜索</el-button>
+            <el-button @click="getList()">搜索</el-button>
          </template>
        </el-input>
        <!-- 人员选择 -->
@@ -15,26 +15,12 @@
        <el-scrollbar style="height:90%;">
          <div class="tree">
            <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     :default-expanded-keys="expandedKeys" lazy accordion
-                     @node-click="handleChange" @node-expand="handleChange">
+                     default-expand-all :show-checkbox="showCheckbox" highlight-current :default-checked-keys="defaultChecked"
+                     :check-strictly="multiple===false" @node-click="(node,check)=>handle(node,check)"
+                     @check-change="handleChange" :filter-node-method="filterNode">
              <template #default="{ node, data }">
                <div class="tree-node">
-                  <div v-if="data.type === 0" style="display: flex;align-items: center;padding: 3px 0">
-                    <el-icon>
-                      <UserFilled/>
-                    </el-icon>
-                    {{ node.label }}-{{ data.companyName }}
-                  </div>
-                  <div v-else-if="data.type ===1">
-                    <el-icon>
-                      <UserFilled/>
-                    </el-icon>
-                    {{ node.label }}
-                  </div>
-                  <div v-else>
-                    <el-icon>
-                      <FolderOpened/>
-                    </el-icon>
+                  <div style="display: flex;align-items: center;padding: 3px 0">
                    {{ node.label }}
                  </div>
                </div>
@@ -51,8 +37,9 @@
        <div class="org-items">
          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
          <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
-            {{ selectItem.name }}-{{ selectItem.companyName }}
-            <el-icon @click="noSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;">
+            {{ selectItem.label }}
+            <el-icon @click="noSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;"
+                     v-if="showCheckbox===false">
              <CircleClose/>
            </el-icon>
          </div>
@@ -67,9 +54,8 @@
 </template>

 <script setup>
-import {computed, defineProps, defineExpose} from "vue";
 import {ElMessageBox} from "element-plus";
-import {getMosrDept} from "@/api/workflow/process-user";
+import {getSubCompOpt} from "@/api/user/user";

 const props = defineProps({
  value: {
@@ -93,28 +79,22 @@ let selectItem = reactive({
  type: -1,
  value: "0"
 });
-const activeNames = ref(["1"]);
 const visible = ref(false);
 const loading = ref(false);
 const title = ref("请选择");
 const selectList = ref([]);
 const filterText = ref("");
 const dataList = ref([]);
+const defaultChecked = ref([]);
 const tree = ref([]);
 const isSearch = ref(false);
 const expandedKeys = ref([]);
 const defaultProps = {
  value: "value",
-  label: "name",
-  children: "children",
-  isLeaf: (data) => {
-    if (data.type === 0) {
-      return true
-    }
-  }
+  label: "label",
+  children: "children"
 };
 const emit = defineEmits();
-
 const _value = computed({
  get() {
    return props.value;
@@ -125,135 +105,102 @@ const _value = computed({
 });

 watch(() => filterText.value, (newVal) => {
-  console.log('filterText.value', newVal)
-  filterText.value = newVal
+  tree.value.filter(newVal);
 });

-const getList = (flag) => {
-  let params = {}
-  if (flag === 1) {
-    isSearch.value = true;
-    params = {
-      chooseId: 0,
-      chooseName: filterText.value
-    }
-    selectItem = {
-      type: -1,
-      value: "0"
-    };
-  } else {
-
-    params = {
-      chooseId: radio.value,
-      chooseName: filterText.value
-    }
-  }
-  getMosrDept(params).then(res => {
-    console.log('selectItem.type', selectItem.type)
-    // if (res.data) {
-    if (selectItem.type === -1) {
-      dataList.value = res.data;
-    } else if (selectItem.type === 1) {
-      selectItem.children = res.data;
-      if (res.data.length === 0) {
-        selectItem.children = [{
-          type: 1,
-          name: '暂无数据'
-        }]
-      }
-    } else if (selectItem.type === 2) {
-      selectItem.children = res.data;
-    }
-    // }
+const getList = () => {
+  getSubCompOpt().then(res => {
+    dataList.value = res.data;
  });
 };

-const setData = (source) => {
-  // for (let item of source) {
-  //   this.$set(item, "value", selectItem.value + "-" + item.id)
-  // }
-  return source;
-};
-
 //通过关键字过滤树节点
-// filterNode(value, data) {
-//   if (!value) return true;
-//   return data.name.indexOf(value) !== -1;
-// },
-//用于用户选择
-const showUserPicker = () => {
-  selectItem = {
-    type: -1,
-    value: "0"
-  };
-  dataList.value = [];
-  selectList.value = []
-  chooseId.value = 0;
-  radio.value = 0;
-  visible.value = true;
-  expandedKeys.value = [];
-  getList();
+const filterNode = (value, data) => {
+  //通过关键字过滤树节点
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
 };
-const handleChange = (item, data) => {
-  selectItem = item;
-  if (isSearch.value && item.type !== 0) {
-    filterText.value = ""
-    radio.value = item.id;
-    getList();
-    return;
-  } else if (!isSearch.value) {
-    //渲染子节点用户或部门及用户数据
-    if (data.expanded) {
-      if (expandedKeys.value.indexOf(item.value) === -1) {
-        expandedKeys.value.push(item.value);
-        if (item.type !== 0) {
-          radio.value = item.id;
-          getList();
-          return;
-        }
-      }
-    }
-  }
-
-  // if(expandedKeys.value.indexOf(item.value)==-1){
-  //   expandedKeys.value.push(item.value);
-  // }else {
-  //   if (data.expanded === true) {
-  //     if (item.type !== 0) {
-  //       chooseId.value = item.id;
-  //       getList();
-  //       return;
-  //     }
-  //   }
-  // }
-
-  //仅选择用户
-  if (item.type === 0) {
+//用于用户选择
+const show = () => {
+  //用于弹开部门选择
+  visible.value = true;
+  selectList.value=_value.value
+  defaultChecked.value=_value.value.map(item=>item.value)
+  getList()
+};
+const handleChange = (data, checked) => {
+  // 左侧有选择框
+  if (props.showCheckbox) {
+    // 左侧有选择框 + 多选
    if (props.multiple) {
      //不添加重复的数据到右边
      for (let i = 0; i < selectList.value.length; i++) {
-        if (selectList.value[i].id === item.id) {
+        if (selectList.value[i].value === data.value) {
          selectList.value.splice(i, 1);
          break;
        }
      }
-      selectList.value.push(item);
-    } else {
-      selectList.value = [item];
+      if (checked) {
+        if (data.children === undefined) {
+          selectList.value.push(data);
+        }
+      } else if (data === "1") {
+        tree.value.setCheckedKeys([]);
+        selectList.value = [];
+      }
+    } else {// 左侧有选择框 + 单选
+      //不添加重复的数据到右边
+      for (let i = 0; i < selectList.value.length; i++) {
+        if (selectList.value[i].value === data.value) {
+          selectList.value.splice(i, 1);
+          break;
+        }
+      }
+      if (checked) {
+        tree.value.setCheckedNodes([data]);
+        // this.$refs.tree.setCheckedKeys([]);
+        selectList.value = [data];
+      } else if (data === "1") {
+        selectList.value = [];
+        tree.value.setCheckedKeys([]);
+      }
    }
  }
-  // _value = selectList.value
 };
-
+const handle = (node, check) => {
+  if (check.isLeaf !== false) {
+    if (props.multiple) {
+      //不添加重复的数据到右边
+      for (let i = 0; i < selectList.value.length; i++) {
+        if (selectList.value[i].value === node.value) {
+          selectList.value.splice(i, 1);
+          break;
+        }
+      }
+      check.checked = true;
+      selectList.value.push(node);
+    } else {
+      check.checked = true;
+      selectList.value = [node];
+    }
+  }
+  // _value.value = selectList.value
+};
 const noSelected = (selectItem) => {
-  //右侧的x
+  //左侧无选择框时,右侧显示×
  for (let i = 0; i < selectList.value.length; i++) {
    if (selectList.value[i].value === selectItem.value) {
      selectList.value.splice(i, 1);
+      tree.value.setCheckedKeys(i);
      break;
    }
  }
-  selectItem.selected = false;
+  if (props.showCheckbox) {
+    // 左侧有选择框 + 单选
+    if (props.multiple === false) {
+      tree.value.setCheckedKeys([]);
+    }
+  }
 };
 const clearSelected = () => {
  //清空
@@ -262,7 +209,11 @@ const clearSelected = () => {
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
-    selectList.value = [];
+    if (!props.showCheckbox) {
+      selectList.value = [];
+    } else {
+      handleChange("1");
+    }
  });
 };
 const selectConfirm = () => {
@@ -272,8 +223,9 @@ const selectConfirm = () => {
  visible.value = false;
 };
 defineExpose({
-  showUserPicker
+  show
 });
+getList()
 </script>

 <style lang="scss" scoped>
--- a/src/utils/matterTree.js
+++ b/src/utils/matterTree.js
@@ -5,7 +5,7 @@ export const matterTree = (array,data, id) => {
        array.push(data[i].label);
      }
      if (data[i].children && data[i].children.length > 0) {
-        matterTree(data[i].children)
+        matterTree(array,data[i].children,id)
      }
    }
    return array;
--- a/src/views/project-demand/requirement/add.vue
+++ b/src/views/project-demand/requirement/add.vue
@@ -34,9 +34,10 @@
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属公司" prop="companyIds" class="tree-select">
-            <!--            <el-button @click="showCompany">请选择</el-button>-->
-            <el-tree-select v-model="formData.companyIds" :data="companyOption"
-                            filterable clearable :check-strictly="true" multiple/>
+            <div>{{ getName(companyList) }}</div>
+            <el-button @click="showCompany">{{companyList.length===0?'请选择':'更改'}}</el-button>
+<!--                        <el-tree-select v-model="formData.companyIds" :data="companyOption"-->
+<!--                                        filterable clearable :check-strictly="true" multiple/>-->
          </el-form-item>
        </el-col>
        <el-col :span="6">
@@ -93,6 +94,7 @@
      <el-button color="#DED0B2" v-else @click="handleResubmit">重新提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
+    <company-picker :multiple="true" ref="companyRef" title="请选择所属公司" v-model:value="companyList" @ok="selected"/>
  </div>
 </template>

@@ -109,12 +111,15 @@ import {
 } from "@/api/project-demand/index.js";
 import FileUpload from "@/components/FileUpload.vue";
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
-import {ElMessageBox, ElNotification} from "element-plus";
+import {ElNotification} from "element-plus";
 import {useRoute, useRouter} from 'vue-router'
 import {getSubCompOpt} from '@/api/user/user.js'
 import {useTagsView} from '@/stores/tagsview.js'
 import {getFundOption} from "@/api/special-fund";
+import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";

+const companyRef = ref()
+const companyList = ref([])
 const changeDiagram = ref(false)
 const tagsViewStore = useTagsView()
 const authStore = useAuthStore()
@@ -124,7 +129,7 @@ const demandForm = ref()
 const dateValue = ref()
 const formData = ref({
  requirementName: '',
-  companyIds: '',
+  companyIds: [],
  collectType: '',
  deadline: '',
  collectExplain: '',
@@ -200,7 +205,24 @@ const tableConfig = reactive({
    }
  ]
 })
-
+const getName = (list) => {
+  return list.map(item => item.label).join('，')
+}
+const showCompany = () => {
+  companyRef.value.show()
+}
+const selected = (select) => {
+  let companyInfoList = []
+  for (let val of select) {
+    let companyInfo = {
+      value: val.value,
+      label: val.label
+    }
+    companyInfoList.push(companyInfo)
+    formData.value.companyIds.push(val.value)
+  }
+  companyList.value = companyInfoList
+}
 const checkFormPrem = (formKey) => {
  if (formPermMap.value.hasOwnProperty(formKey)) {
    let formItem = formPermMap.value[formKey];
@@ -208,7 +230,6 @@ const checkFormPrem = (formKey) => {
  } else {
    return true;
  }
-
 }

 const handleDownload = (row) => {
@@ -291,6 +312,15 @@ const init = async () => {
  })
 }
 const submitParam = (item) => {
+  console.log('item..',item.companyIds)
+  if(item.companyIds.length===0){
+    ElNotification({
+      title: '提示',
+      message: '请选择所属公司',
+      type: 'error'
+    })
+    return;
+  }
  let files = []
  item.fileList.forEach(item => {
    let obj = {