节点负责人选择框新增多选类型

hookehuyr
Commit ec4b0c94369040a86875ca5cd40323a099ec219a ec4b0c94 1 parent da859a8c
Showing 1 changed file with 76 additions and 3 deletions
doc/selectUserView.vue
--- a/doc/selectUserView.vue
View file @ec4b0c9
+++ b/doc/selectUserView.vue
View file @ec4b0c9
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-15 17:27:42
+ * @LastEditTime: 2023-11-16 17:46:07
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 成员列表选择控件
 -->
@@ -81,6 +81,25 @@
       <!-- 未激活搜索框 -->
       <div v-if="!is_active_search">
         <div v-for="(item, index) in userTabs" :key="index">
+          <div v-if="item.id === activeTabId && item.type === 'select'">
+            <el-row>
+              <el-col :span="24">
+                <el-checkbox-group
+                  class="flow-checkbox-group"
+                  v-model="checkedUserList"
+                >
+                  <el-checkbox
+                    v-for="(user, idx) in userList"
+                    :key="idx"
+                    :label="user.id"
+                    :disabled="user.disabled"
+                    @change="handleCheckedUserListChange(user, $event)"
+                    >{{ user.label }}</el-checkbox
+                  >
+                </el-checkbox-group>
+                </el-col>
+              </el-row>
+          </div>
           <div v-if="item.id === activeTabId && item.type === 'tree'">
             <el-row>
               <el-col :span="8">
@@ -186,7 +205,7 @@ const emit = defineEmits(["close", "confirm"]);
 const dialogUserFormVisible = ref(false);
 const userTags = ref([]);
 const currentNodeKey = ref([]); // 当前展开的节点
-const activeTabId = ref("tab-1"); // TODO: 需要获取默认第一个ID
+const activeTabId = ref("tab-0"); // TODO: 需要获取默认第一个ID
 const activeTabContent = ref("");
 const userTabs = ref([]);
 const tabSelectData = ref([]);
@@ -216,8 +235,28 @@ onMounted(() => {
   // TODO: 查询到的用户列表数据
   userTabs.value = [
     {
+      id: "tab-0",
+      label: "组织结构",
+      type: "select",
+      data: [
+        {
+          id: "corp-1",
+          label: "",
+          children: [],
+          list: [
+            {
+              id: "corp-1-1",
+              label: "组织结构1-1",
+              checked: false,
+              disabled: false
+            }
+          ]
+        },
+      ]
+    },
+    {
       id: "tab-1",
-      label: "组织架构",
+      label: "成员",
       type: "tree",
       data: [
         {
@@ -345,6 +384,23 @@ watch(() => {
   // 监听弹框状态
   if (props.visible) {
     dialogUserFormVisible.value = true;
+    // 第一个类型为多选，获取类型为多选的数据结构
+    if (userTabs.value[0]['type'] === 'select') {
+      userTabs.value.forEach(ele => {
+        if (ele.type === "select") {
+          ele.data.forEach(ele => {
+            userList.value = ele.list;
+            checkedUserList.value = ele.list
+              .filter(ele => {
+                return ele.checked;
+              })
+              .map(ele => {
+                return ele.id;
+              });
+          });
+        }
+      });
+    }
   } else {
     dialogUserFormVisible.value = false;
   }
@@ -374,6 +430,23 @@ const handleTabClick = (tab, event, idx) => {
   }
   // 文字宽度
   tabTextWidth.value = $("#" + tab.id).width() + "px";
+  // 获取类型为多选的数据结构
+  if (tab.type === 'select') {
+    userTabs.value.forEach(ele => {
+      if (ele.type === "select") {
+        ele.data.forEach(ele => {
+          userList.value = ele.list;
+          checkedUserList.value = ele.list
+            .filter(ele => {
+              return ele.checked;
+            })
+            .map(ele => {
+              return ele.id;
+            });
+        });
+      }
+    });
+  }
   // 检查列表第一项是否有值
   // if (tab?.data[0]?.list) {
   //   let list = tab.data[0].list;