受众成员列表、删除、批量删除受众

src/views/audience/audienceManage.vue

@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="btns">
-        <div class="btn btn3" @click="handleNew">
+        <div class="btn btn3" @click="handleAddAudienceClick">
           <div class="search"></div>
           <div class="btnText">添加受众</div>
         </div>
@@ -250,9 +250,133 @@
         </div>
       </div>
     </a-modal> -->
-     <a-modal v-model:visible="visibleDeleteAudience" width="500px" title="删除受众" @ok="handleDelete">
+    <a-modal v-model:visible="visibleDeleteAudience" width="500px" title="删除受众" @ok="handleDelete">
       <div style="margin: 20px 50px">您确定要删除此受众吗？</div>
     </a-modal>
+    <a-modal v-model:visible="visibleDeleteAudienceMember" width="500px" title="删除受众成员" @ok="handleDeleteMember">
+      <div style="margin: 20px 50px">您确定要删除此受众成员吗？</div>
+    </a-modal>
+    <a-modal v-model:visible="visibleBatchDeleteAudienceMember" width="500px" title="批量删除受众成员" @ok="handleBatchDeleteMember">
+      <div style="margin: 20px 50px">您确定要批量删除所选数据吗？</div>
+    </a-modal>
+    <a-modal
+      v-model:visible="visibleAddAudience"
+      width="1100px"
+      title="添加受众"
+      @ok="handleAddAudienceNext"
+      okText="下一步">
+      <div style="margin: 20px 20px">
+        <a-form
+          :model="ruleForm"
+          name="basic"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 16 }"
+          autocomplete="off"
+          
+        >
+          <a-form-item
+            label="名称"
+            name="audienceName"
+            :rules="[{ required: true, message: '请填写名称!' }]"
+          >
+            <a-input style="width:300px" v-model:value="ruleForm.audienceName" placeholder="请填写名称" />
+          </a-form-item>
+
+          <a-form-item
+            label="描述"
+            name="description"
+            :rules="[{ required: false, message: '请填写描述!' }]"
+          >
+            <a-textarea style="width:300px" v-model:value="ruleForm.description" placeholder="请填写描述" />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+    <a-modal
+      v-model:visible="visibleAudienceInfo"
+      width="1100px"
+      title="受众信息"
+      :footer="null"
+      >
+      <div style="padding:10px" class="researchmanage">
+          <!-- 搜索框及按钮 -->
+          <div class="filter">
+            <div class="filterItems">
+              <div class="select">
+                <a-input
+                  v-model:value="searchDataMember.keyword"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="请输入姓名/工号"
+                  allowClear
+                />
+              </div>
+
+              <div style="display: flex; margin-bottom: 20px">
+                <div class="btn btn1" @click="handleSearchMember">
+                  <div class="search"></div>
+                  <div class="btnText">搜索</div>
+                </div>
+                <div class="btnn btn2" @click="handleRestMember" style="width: 105px">
+                  <div class="search"></div>
+                  <div class="btnText">重置</div>
+                </div>
+              </div>
+            </div>
+            <div class="btns">
+              <div style="margin-right:10px" class="btn btn3" @click="handleAddAudienceMemberClick">
+                <div class="search"></div>
+                <div class="btnText">添加</div>
+              </div>
+              <div style="margin-right:10px" class="btn btn3" @click="handleExportAudienceMemberClick">
+                <!-- <div class="search"></div> -->
+                <div class="btnText">导入</div>
+              </div>
+              <div class="btn btn3" @click="handleBatchDeleteMemberClick">
+                <!-- <div class="search"></div> -->
+                <div class="btnText">批量删除</div>
+              </div>
+            </div>
+          </div>
+          <!-- 搜索框及按钮 -->
+          <!-- 表格 -->
+          <div class="tableBox">
+            <a-table
+              style="border: 1px solid #f2f6fe"
+              :columns="columnAudience"
+              :data-source="tableDataMember"
+              :loading="loading"
+              :scroll="{ x: 1000 }"
+              :pagination="false"
+              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            >
+              <template #operationAudience="{ record }">
+                <a-space style="padding-right: 10px">
+                  <a-button
+                    @click="handleDeleteMemberClick(record)"
+                    type="link"
+                    >删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-table>
+          </div>
+          <div class="pa">
+            <a-pagination
+              :showSizeChanger="false"
+              :showQuickJumper="true"
+              :hideOnSinglePage="true"
+              :pageSize="searchDataMember.pageSize"
+              :current="searchDataMember.pageNo"
+              :total="tableTotalMember"
+              class="pagination"
+              @change="handelChangePageMember"
+            />
+          </div>
+          <div>
+            底部按键区
+          </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script setup>
@@ -269,6 +393,10 @@ import {
   publishAudience,
   stopAudience,
   deleteAudience,
+  createAudience,
+  getAudienceMemberList,
+  deleteAudienceMember,
+  deleteBatchAudienceMember,
 } from "@/api/indexAudience";
 import { checkPer } from "@/utils/utils";
 import { Form, message } from "ant-design-vue";
@@ -379,6 +507,66 @@ const column = [
     slots: { customRender: "operation" },
   },
 ];
+const columnAudience = [
+  {
+    title: "姓名",
+    dataIndex: "userName",
+    key: "userName",
+    // width: "20%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "工号",
+    dataIndex: "workNum",
+    key: "workNum",
+    // 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 : "-";
+    },
+  },
+  {
+    title: "组织路径",
+    dataIndex: "orgPath",
+    key: "orgPath",
+    // width: "5%",
+    align: "center",
+    ellipsis: true,
+    className: "h",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
+  {
+    title: "操作",
+    // width: "5%",
+    className: "h",
+    dataIndex: "id",
+    key: "id",
+    // fixed: "right",
+    // align: "right",
+    slots: { customRender: "operationAudience" },
+  },
+];
 const searchData = ref({
   pageNo: 1,
   pageSize: 10,
@@ -387,6 +575,12 @@ const searchData = ref({
   searchEndTime: "",
   searchStartTime: "",
 });
+const searchDataMember = ref({
+  pageNo: 1,
+  pageSize: 10,
+  keyword: "",
+  audienceId: "",
+});
 const formData = ref({
   assessmentName: "",
   id: "",
@@ -396,13 +590,28 @@ const formData = ref({
 
 const tableData = ref([
 
+]);
+const tableDataMember = ref([
+
 ]);
 
 const tableTotal = ref(0);
+const tableTotalMember = ref(0);
 const visibleCopyAudience = ref(false);
 const visibleDeleteAudience = ref(false);
-const audienceId = ref("");
+const visibleDeleteAudienceMember = ref(false);
+const visibleBatchDeleteAudienceMember = ref(false);
+const audienceId = ref("1073279922736201728");
 const audienceName = ref("");
+const memberId = ref("");
+const memberIdList = ref([]);
+const visibleAddAudience = ref(false);
+const visibleAudienceInfo = ref(true);
+const ruleForm = ref({
+  audienceName: "",
+  description: "",
+});
+const selectedRowKeys = ref([]);
 
 onMounted(() => {
   // 是否需要触发新建弹框
@@ -537,6 +746,13 @@ const handelChangePage = (page) => {
   // fetch();
 };
 
+const handelChangePageMember = (page) => {
+  console.log("handelChangePageMember page:",page);
+  searchDataMember.value.pageNo = page;
+  getAudienceMemberPageList();
+  // fetch();
+};
+
 function timeChange(time, timeStr) {
   searchData.value.searchStartTime = timeStr[0];
   searchData.value.searchEndTime = timeStr[1];
@@ -547,17 +763,29 @@ const handleSearch = () => {
   getAudiencePageList();
   // fetch();
 
+};
+const handleSearchMember = () => {
+  console.log("handleSearch searchDate:",searchDataMember.value);
+  getAudienceMemberPageList();
+  // fetch();
+
 };
 const handleRest = () => {
   // dateTime.value = [];
   // resetFields();
   // fetch();
-  console.log("handleRest searchDate:",searchData.value);
+  console.log("handleRest searchData:",searchData.value);
   searchData.value.pageNo = 1;
   searchData.value.audienceName = '';
   searchData.value.status = null;
   getAudiencePageList();
 };
+const handleRestMember = () => {
+  console.log("handleRestMember searchDataMember:",searchData.value);
+  searchDataMember.value.pageNo = 1;
+  searchDataMember.value.keyword = '';
+  getAudienceMemberPageList();
+};
 
 function handleCancel() {
   resetFormFields();
@@ -682,10 +910,23 @@ const handleDeleteClick = (record) => {
   audienceId.value = record.audienceId;
   visibleDeleteAudience.value = true;
 }
+const handleDeleteMemberClick = (record) => {
+  console.log("handleDeleteMemberClick record:",record);
+  memberId.value = record.userId;
+  visibleDeleteAudienceMember.value = true;
+}
+const handleBatchDeleteMemberClick = () => {
+  console.log("handleBatchDeleteMemberClick");
+  visibleBatchDeleteAudienceMember.value = true;
+}
 const handleDeleteCancel = () => {
   console.log("handleDeleteCancel");
   visibleDeleteAudience.value = false;
 }
+const handleDeleteMemberCancel = () => {
+  console.log("handleDeleteMemberCancel");
+  visibleDeleteAudienceMember.value = false;
+}
 const handleDelete = async () => {
   console.log("handleDelete audienceId:",audienceId.value);
   let res = await deleteAudience({
@@ -700,6 +941,101 @@ const handleDelete = async () => {
     message.error(res.data.message);
   }
 }
+const handleDeleteMember = async () => {
+  console.log("handleDeleteMember memberId:",memberId.value, "audienceId:",audienceId.value);
+  let res = await deleteAudienceMember({
+    audienceId: audienceId.value,
+    memberId: memberId.value,
+  })
+  console.log("deleteAudienceMember res:",res);
+  if(res&&res.data.status==200){
+    message.success("删除成功");
+    visibleDeleteAudienceMember.value = false;
+    getAudienceMemberPageList();
+  }else{
+    message.error(res.data.message);
+  }
+}
+const handleBatchDeleteMember = async () => {
+  memberIdList.value = selectedRowKeys.value;
+  console.log("handleBatchDeleteMember memberIdList:",memberIdList.value, "audienceId:",audienceId.value);
+  let res = await deleteBatchAudienceMember({
+    audienceId: audienceId.value,
+    memberIdList: memberIdList.value,
+  })
+  console.log("batch deleteAudienceMember res:",res);
+  if(res&&res.data.status==200){
+    message.success("删除成功");
+    visibleBatchDeleteAudienceMember.value = false;
+    getAudienceMemberPageList();
+  }else{
+    message.error(res.data.message);
+  }
+}
+const handleAddAudienceClick = () => {
+  visibleAddAudience.value = true;
+
+}
+const handleAddAudienceNext = async () => {
+  if(!ruleForm.value.audienceName){
+    message.warning("请填写受众名称");
+    return;
+  }
+  console.log("handleAddAudienceNext ruleForm:",ruleForm.value);
+  let res = await createAudience({
+    ...ruleForm.value
+  })
+  console.log("createAudience res:",res);
+  if(res&&res.data.status==200){
+    message.success("创建受众成功");
+    visibleAddAudience.value = false;
+    getAudiencePageList();
+  }else{
+    message.error(res.data.message);
+  }
+
+}
+
+const onSelectChange = (keys) => {
+  console.log('selectedRowKeys changed: ', keys);
+  // state.selectedRowKeys = selectedRowKeys;
+  selectedRowKeys.value = keys;
+};
+
+const  getAudienceMemberPageList = async () => {
+  console.log("getAudienceMemberPageList searchData:",searchData.value);
+  console.log("getAudienceMemberPageList searchData pageSize:",searchData.value.pageSize);
+  let res = await getAudienceMemberList({
+    audienceId: audienceId.value,
+    keyword: searchDataMember.value.keyword,
+    pageNo: searchDataMember.value.pageNo,
+    pageSize: searchDataMember.value.pageSize,
+  })
+  console.log("getAudienceMemberPageList res:",res);
+  if(res&&res.data.status==200){
+    let dataList=[];
+    res.data.result.list.forEach(item=>{
+      let oneItem = {
+        ...item,
+        key:item.userId,
+      }
+      dataList.push(oneItem);
+    });
+    tableDataMember.value = dataList;
+    tableTotalMember.value = res.data.result.total;
+  }
+};
+// 后面要删除
+getAudienceMemberPageList();
+
+const handleAddAudienceMemberClick = () => {
+  // visibleAddAudience.value = true;
+
+}
+const handleExportAudienceMemberClick = () => {
+  // visibleAddAudience.value = true;
+
+}
 
 
 </script>