受众添加成员逻辑

src/api/indexAudience.js

@@ -109,4 +109,20 @@ export const getAudienceMemberList = (obj) =>
 export const updateAudienceMember = (obj) =>
   http.post("/audience/update", obj, {
     headers: { 'Content-Type':'application/json', },
+});
+
+// 受众成员组织列表
+export const getAudienceOrgList = (obj) =>
+  http.post("/org/list", obj, {
+    headers: { 'Content-Type':'application/json', },
+});
+// 受众成员组织列表
+export const getAudienceOrgInfo = (obj) =>
+  http.post("/org/info", obj, {
+    headers: { 'Content-Type':'application/json', },
+});
+// 受众成员可选列表
+export const getAudienceUserList = (obj) =>
+  http.post("/user/list", obj, {
+    headers: { 'Content-Type':'application/json', },
 });

src/views/audience/audienceManage.vue

@@ -377,6 +377,105 @@
           </div>
       </div>
     </a-modal>
+    <a-modal
+      v-model:visible="visibleAudienceMember"
+      width="1100px"
+      title="添加学员"
+      @ok="handleAddAudienceMember"
+      okText="确认">
+      <div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
+        <div style="min-width: 800px">
+          左边
+          <div>
+            <div class="tab1">
+              <a-form-item label="姓名">
+                <a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
+                          placeholder="请输入姓名"/>
+                <a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
+                  <template #icon>
+                    <SearchOutlined/>
+                  </template>
+                  搜索
+                </a-button>
+                <a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
+                </a-button>
+              </a-form-item>
+            </div>
+            <div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
+              <div :style="{
+                      height: screenHeight - 180 + 'px',
+                      overflowY: 'auto',
+                    }" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
+                <div class="tree" style="margin: 10px 4px 20px 10px">
+                  <a-tree
+                    v-model:expandedKeys="expandedKeys"
+                    v-model:selectedKeys="selectedKeys"
+                    :tree-data="treeData"
+                    :load-data="onLoadData"
+                    @select="onOrgSelectChange"
+                    :fieldNames="{
+                          children: 'directChildList',
+                          key: 'id',
+                          title: 'name',
+                          value: 'name',
+                        }"
+                  >
+                  </a-tree>
+                </div>
+              </div>
+              <div>
+                <div class="tableBox tabb" style="
+                                margin: 0px 4px 20px 10px;
+                                border: 1px solid #f0f0f0;
+                              ">
+                  <a-table
+                    ref="userTableRef"
+                    style="border: 1px solid #f2f6fe"
+                    :columns="columnUser"
+                    :data-source="tableDataUser"
+                    :loading="loading"
+                    :scroll="{ x: 400,y:300 }"
+                    :pagination="false"
+                    :row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
+                  >
+                  </a-table>
+                </div>
+                <div class="pa" style="margin: 0px 10px 20px 10px;">
+                  <a-pagination
+                    :showSizeChanger="false"
+                    :showQuickJumper="true"
+                    :hideOnSinglePage="true"
+                    :pageSize="searchDataUser.pageSize"
+                    :current="searchDataUser.pageNo"
+                    :total="tableTotalUser"
+                    class="pagination"
+                    @change="handelChangePageUser"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
+          右边
+          <div class="onerow">
+            <div class="onleft">
+              <div class="already">已选</div>
+            </div>
+          </div>
+          <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
+            <div class="selecteds">
+              <div v-for="(item, i) in selectedRowUser" :key="i">
+                <div class="chose">
+                  {{ item.realName }}
+                  <div class="ch" @click="removeUserClick(i)"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script setup>
@@ -397,6 +496,10 @@ import {
   getAudienceMemberList,
   deleteAudienceMember,
   deleteBatchAudienceMember,
+  getAudienceUserList,
+  getAudienceOrgList,
+  getAudienceOrgInfo,
+  addAudienceMember,
 } from "@/api/indexAudience";
 import { checkPer } from "@/utils/utils";
 import { Form, message } from "ant-design-vue";
@@ -567,6 +670,56 @@ const columnAudience = [
     slots: { customRender: "operationAudience" },
   },
 ];
+const columnUser = [
+  {
+    title: "姓名",
+    dataIndex: "realName",
+    key: "realName",
+    // width: "20%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "工号",
+    dataIndex: "userNo",
+    key: "userNo",
+    // width: "5%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "归属组织",
+    dataIndex: "orgName",
+    key: "orgName",
+    // width: "5%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "部门",
+    dataIndex: "departName",
+    key: "departName",
+    // width: "5%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+];
 const searchData = ref({
   pageNo: 1,
   pageSize: 10,
@@ -581,6 +734,12 @@ const searchDataMember = ref({
   keyword: "",
   audienceId: "",
 });
+const searchDataUser = ref({
+  pageNo: 1,
+  pageSize: 10,
+  keyword: "",
+  departId: "",
+});
 const formData = ref({
   assessmentName: "",
   id: "",
@@ -593,10 +752,14 @@ const tableData = ref([
 ]);
 const tableDataMember = ref([
 
+]);
+const tableDataUser = ref([
+
 ]);
 
 const tableTotal = ref(0);
 const tableTotalMember = ref(0);
+const tableTotalUser = ref(0);
 const visibleCopyAudience = ref(false);
 const visibleDeleteAudience = ref(false);
 const visibleDeleteAudienceMember = ref(false);
@@ -607,11 +770,40 @@ const memberId = ref("");
 const memberIdList = ref([]);
 const visibleAddAudience = ref(false);
 const visibleAudienceInfo = ref(true);
+const visibleAudienceMember = ref(false);
 const ruleForm = ref({
   audienceName: "",
   description: "",
 });
 const selectedRowKeys = ref([]);
+const selectedRowKeysUser = ref([]);
+const selectedRowUser = ref([]);
+const selectedRowKeysUserTotal = ref([]);
+const selectedRowUserTotal = ref([]);
+const userTableRef = ref();
+
+const treeData  = ref([
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        disabled: true,
+        children: [
+          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+          { title: 'leaf', key: '0-0-0-1' },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{ key: '0-0-1-0', title: 'sss' }],
+      },
+    ],
+  },
+]);
 
 onMounted(() => {
   // 是否需要触发新建弹框
@@ -752,6 +944,11 @@ const handelChangePageMember = (page) => {
   getAudienceMemberPageList();
   // fetch();
 };
+const handelChangePageUser = (page) => {
+  console.log("handelChangePageUser page:",page);
+  searchDataUser.value.pageNo = page;
+  getAudienceUserListFun();
+};
 
 function timeChange(time, timeStr) {
   searchData.value.searchStartTime = timeStr[0];
@@ -1001,6 +1198,18 @@ const onSelectChange = (keys) => {
   // state.selectedRowKeys = selectedRowKeys;
   selectedRowKeys.value = keys;
 };
+const onSelectChangeUser = (keys, rows) => {
+  console.log('selectedRowKeysUser changed: ', keys,"rows:",rows);
+  console.log('selectedRowKeysUser rows1: ', rows[0]);
+  // console.log('selectedRowKeysUser rows2: ', rows[0].id);
+  selectedRowKeysUser.value = keys;
+  selectedRowUser.value = rows;
+  console.log('selectedRowKeysUser selectedRowUser: ', selectedRowUser.value);
+};
+const removeUserClick = (index) => {
+  selectedRowKeysUser.value.splice(index,1);
+  selectedRowUser.value.splice(index,1);
+}
 
 const  getAudienceMemberPageList = async () => {
   console.log("getAudienceMemberPageList searchData:",searchData.value);
@@ -1028,14 +1237,96 @@ const  getAudienceMemberPageList = async () => {
 // 后面要删除
 getAudienceMemberPageList();
 
-const handleAddAudienceMemberClick = () => {
+const handleAddAudienceMemberClick = async () => {
   // visibleAddAudience.value = true;
+  getAudienceUserListFun();
+  getAudienceOrgListFun();
+  visibleAudienceMember.value = true;
 
 }
+const getAudienceOrgListFun = async () => {
+  let res = await getAudienceOrgList({})
+  console.log("getAudienceOrgList res:",res);
+  if(res&&res.data.status==200){
+    treeData.value = res.data.result;
+  }
+}
+const getAudienceUserListFun = async () => {
+  let res = await getAudienceUserList({
+    departId: searchDataUser.value.departId,
+    keyword: searchDataUser.value.keyword,
+    pageNo: searchDataUser.value.pageNo,
+    pageSize: searchDataUser.value.pageSize,
+  })
+  console.log("getAudienceUserList res:",res);
+  if(res&&res.data.status==200){
+    let dataList=[];
+    res.data.result.list.forEach(item=>{
+      let oneItem = {
+        ...item,
+        key:item.id,
+      }
+      dataList.push(oneItem);
+    });
+    tableDataUser.value = dataList;
+    tableTotalUser.value = res.data.result.total;
+  }
+}
+const onLoadData = async (treeNode) => {
+  console.log("onLoadData treeNode:",treeNode);
+  var nodes = [];
+  let res = await getAudienceOrgInfo({
+    orgId: treeNode.dataRef.id,
+  })
+  console.log("getAudienceOrgInfo res:",res);
+  if(res&&res.data.status==200){
+    nodes = res.data.result.directChildList;
+  }
+  return new Promise(resolve => {
+    if (treeNode.dataRef.directChildList) {
+      resolve();
+      return;
+    }
+    setTimeout(() => {
+      // treeNode.dataRef.directChildList = [
+      //   { name: 'Child Node', id: `${treeNode.eventKey}-0` },
+      //   { name: 'Child Node', id: `${treeNode.eventKey}-1` },
+      // ];
+      treeNode.dataRef.directChildList = nodes;
+      treeData.value = [...treeData.value];
+      resolve();
+    }, 1000);
+  });
+};
+const onOrgSelectChange = (e, l) => {
+  console.log("onOrgSelectChange e:",e,"l:",l)
+  searchDataUser.value.departId = e[0];
+  getAudienceUserListFun();
+}
+const onSearchUser = () => {
+  getAudienceUserListFun();
+}
+const onResetUser = () => {
+  searchDataUser.value.departId = "";
+  searchDataUser.value.keyword = "";
+  searchDataUser.value.pageNo = 1;
+  getAudienceUserListFun();
+}
 const handleExportAudienceMemberClick = () => {
   // visibleAddAudience.value = true;
 
 }
+const handleAddAudienceMember = async () => {
+  let res = await addAudienceMember({
+    audienceId: audienceId.value,
+    memberIdList: selectedRowKeysUser.value,
+  })
+  console.log("addAudienceMember res:",res);
+  if(res&&res.data.status==200){
+    getAudienceMemberPageList();
+    visibleAudienceMember.value = false;
+  }
+}
 
 
 </script>
@@ -1535,4 +1826,191 @@ const handleExportAudienceMemberClick = () => {
     }
   }
 }
+.onerow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 40px;
+  flex-wrap: wrap;
+
+  width: 100%;
+
+  .onleft {
+    display: flex;
+    text-align: center;
+
+    .already {
+      color: rgba(51, 51, 51, 1);
+      font-size: 16px;
+      font-weight: 500;
+      margin-left: 32px;
+      white-space: nowrap;
+      // margin-bottom: 20px;
+    }
+
+    .count {
+      color: #4ea6ff;
+      font-size: 16px;
+      margin: 0 6px;
+    }
+
+    .peo {
+      color: rgba(51, 51, 51, 1);
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .clbox {
+    margin-right: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    width: 104px;
+    height: 32px;
+    border-radius: 4px;
+    background: #4ea6ff;
+
+    .colose {
+      width: 16px;
+      height: 16px;
+      // border-radius: 8px;
+      // background: #ffffff;
+      // position: relative;
+      background-image: url(../../assets/images/basicinfo/ch.png);
+      background-size: 100%;
+      margin-right: 4px;
+    }
+
+    .allclear {
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+    }
+  }
+}
+.selecteds {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 32px;
+
+  .person {
+    width: 100%;
+    margin-top: 20px;
+    border-top: 1px solid #f2f6fe;
+  }
+
+  .chose {
+    width: 64px;
+    height: 24px;
+    margin-top: 25px;
+    margin-right: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    border: 1px solid rgba(56, 139, 225, 1);
+    color: rgba(56, 139, 225, 1);
+    font-size: 12px;
+    position: relative;
+
+    .ch {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-image: url(../../assets/images/basicinfo/ch.png);
+      right: -8px;
+      top: -8px;
+    }
+  }
+
+  .ifsw {
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    color: #4ea6ff;
+  }
+
+  .sw {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: justify;
+    color: #4ea6ff;
+    margin-top: 23px;
+    margin-left: 10px;
+  }
+
+  .dept {
+    width: 100%;
+    margin-top: 30px;
+    border-top: 1px solid #f2f6fe;
+  }
+
+  .chose1 {
+    //width: 90px;
+    height: 24px;
+    margin-top: 25px;
+    margin-right: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    border: 1px solid rgba(56, 139, 225, 1);
+    color: rgba(56, 139, 225, 1);
+    font-size: 12px;
+    position: relative;
+
+    .span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ch1 {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-image: url(../../assets/images/basicinfo/ch.png);
+      right: -8px;
+      top: -8px;
+    }
+  }
+
+  .group {
+    width: 100%;
+    margin-top: 30px;
+    border-top: 1px solid #f2f6fe;
+  }
+
+  .chose2 {
+    //width: 120px;
+    height: 24px;
+    margin-top: 25px;
+    margin-right: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    border: 1px solid rgba(56, 139, 225, 1);
+    color: rgba(56, 139, 225, 1);
+    font-size: 12px;
+    position: relative;
+
+    .span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ch2 {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-image: url(../../assets/images/basicinfo/ch.png);
+      right: -8px;
+      top: -8px;
+    }
+  }
+}
 </style>