✨ feat<任务列表>: 批量修改填写人

src/views/reportManage/TaskManage/components/createTaskDialog.vue

@@ -1,178 +0,0 @@
-<script lang="ts" setup>/**
- * @Name: createTaskDialog.vue
- * @Description: 创建任务弹窗
- * @Author: xinyan
- */
-import { reactive, ref } from 'vue';
-import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
-
-//表单
-interface taskRuleForm {
-  number: string;
-  name: string;
-  country: string;
-  brand: string;
-  operation: string[];
-  operater: string[];
-  currency: string;
-  currencyCodePlatform: string;
-  line: string;
-  ipaddress: string;
-  company: string;
-  platform: string;
-}
-
-const formSize = ref<ComponentSize>('default');
-const dialogFormVisible = ref(false);
-const taskRuleFormRef = ref<FormInstance>();
-const taskRuleForm = reactive({
-  number: '',
-  name: '',
-  country: '',
-  brand: '',
-  operation: [],
-  operater: [],
-  currency: '',
-  currencyCodePlatform: '',
-});
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-const rules = reactive<FormRules>({
-  number: [{ required: true, message: '请输入平台编号', trigger: 'blur' },],
-  name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
-  country: [{ required: true, message: '请输入国家', trigger: 'blur' }],
-  brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
-  operation: [{ required: true, message: '请选择填写人', trigger: 'change' }],
-  operater: [{ required: true, message: '请输入运营', trigger: 'change' }],
-  currency: [{ required: true, message: '请输入回款/余额币种', trigger: 'blur' }],
-  currencyCodePlatform: [{ required: true, message: '请输入平台货币', trigger: 'blur' }],
-  line: [{ required: true, message: '请输入线路', trigger: 'blur' }],
-  ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
-  company: [{ required: true, message: '请输入注册公司', trigger: 'blur' }],
-  platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
-});
-
-function handleClose(done: Function) {
-  if (taskRuleFormRef.value) taskRuleFormRef.value.resetFields();
-  done();
-}
-
-const submitForm = async (formEl) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const isDuplicate = allTasks.some(task => String(task.platformNumber) === String(taskRuleForm.number));
-      if (isDuplicate) {
-        await ElMessage({ message: '平台编号已存在，请重新输入', type: 'warning' });
-        return;
-      }
-
-      if (!currencyList.value.includes(taskRuleForm.currency)) {
-        await ElMessage({ message: '回款币种无效，请重新选择', type: 'warning' });
-        return;
-      }
-
-      if (!currencyList.value.includes(taskRuleForm.currencyCodePlatform)) {
-        await ElMessage({ message: '回款/余额币种无效，请重新选择', type: 'warning' });
-        return;
-      }
-
-      await createTask();
-      taskRuleFormRef.value.resetFields();
-    }
-  });
-};
-
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="新建任务"
-             width="500">
-    <el-form
-        ref="taskRuleFormRef"
-        :model="taskRuleForm"
-        :rules="rules"
-        :size="formSize"
-        class="demo-taskRuleForm"
-        label-width="auto"
-        status-icon
-        style="max-width: 600px">
-      <el-form-item label="平台编号" prop="number">
-        <el-input v-model="taskRuleForm.number" placeholder="请输入平台编号" />
-      </el-form-item>
-      <el-form-item label="平台名称" prop="name">
-        <el-input v-model="taskRuleForm.name" placeholder="请输入平台名称" />
-      </el-form-item>
-      <el-form-item label="国家" prop="country">
-        <el-input v-model="taskRuleForm.country" placeholder="请输入国家" />
-      </el-form-item>
-      <el-form-item label="品牌" prop="brand">
-        <el-input v-model="taskRuleForm.brand" placeholder="请输入品牌" />
-      </el-form-item>
-      <el-form-item label="录入人员" prop="operation">
-        <el-select v-model="taskRuleForm.operation" collapse-tags collapse-tags-tooltip multiple
-                   placeholder="请选择录入人员">
-          <el-option v-for="item in operationList" :key="item.value" :label="item.label"
-                     :value="item.value"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="运营" prop="operater">
-        <el-input v-model="taskRuleForm.operater" placeholder="请输入运营" />
-      </el-form-item>
-      <el-form-item label="平台币种" prop="currency">
-        <el-autocomplete
-            v-model="taskRuleForm.currency"
-            :debounce="100"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            clearable
-            placeholder="请输入回款币种"
-            @select="handleSelect"
-        >
-          <template v-slot="{ item }">
-            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <el-form-item label="回款/余额币种" prop="currencyCodePlatform">
-        <el-autocomplete
-            v-model="taskRuleForm.currencyCodePlatform"
-            :debounce="100"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            clearable
-            placeholder="请输入回款/余额币种"
-            @select="handleCurrencyCodePlatformSelect"
-        >
-          <template v-slot="{ item }">
-            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <el-form-item label="线路" prop="line">
-        <el-input v-model="taskRuleForm.line" placeholder="请输入线路" />
-      </el-form-item>
-      <el-form-item label="IP地址" prop="ipaddress">
-        <el-input v-model="taskRuleForm.ipaddress" placeholder="请输入IP地址" />
-      </el-form-item>
-      <el-form-item label="注册公司" prop="company">
-        <el-input v-model="taskRuleForm.company" placeholder="请输入注册公司" />
-      </el-form-item>
-      <el-form-item label="平台" prop="platform">
-        <el-input v-model="taskRuleForm.platform" placeholder="请输入平台" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogFormVisible = false ;resetForm(taskRuleFormRef)">取消</el-button>
-        <el-button type="primary" @click="submitForm(taskRuleFormRef)"> 确认</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style scoped>
-
-</style>

src/views/reportManage/TaskManage/index.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { VxeGridInstance, VxeGridListeners, VxeGridProps, VXETable } from 'vxe-table';
 import {
   exportTaskData,
   getCurrencyCodeSelect,
   getOperationSelect,
   getTasks,
-  postCreateTask,
   postDeleteTask,
-  postSendMessage, postUpdateManyTask,
+  postSendMessage,
+  postUpdateManyTask,
   postUpdateTask,
   postUpdateTaskStatus
 } from '/src/views/reportManage/TaskManage/api.ts';
@@ -19,6 +19,8 @@ import { dateType, requiredFields } from '/@/views/reportManage/TaskManage/utils
 
 const selectorRef = ref(null);
 const message = ref('');
+const currencyList = ref([]);// 货币列表
+const updateSelect = ref(1)
 
 //表单
 interface taskRuleForm {
@@ -27,7 +29,7 @@ interface taskRuleForm {
   country: string;
   brand: string;
   operation: string[];
-  operater: string[];
+  operater: [];
   currency: string;
   currencyCodePlatform: string;
   line: string;
@@ -67,7 +69,9 @@ const rules = reactive<FormRules>({
   company: [{ required: true, message: '请输入注册公司', trigger: 'blur' }],
   platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
 });
-const currencyList = ref([]);
+
+// 修改填写人弹窗
+const userDialogFormVisible = ref(false);
 
 //表格
 interface RowVO {
@@ -76,7 +80,7 @@ interface RowVO {
   country: string;
   brandName: string;
   user_name: string;
-  operater: string;
+  operater: [];
   currencyCode: string;
   currencyCodePlatform: string;
   child_user_number: number;
@@ -90,8 +94,8 @@ interface RowVO {
 const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
 let allTasks = []; // 用于存储所有任务数据
-const operationList = ref([]);//填写人列表
-const filter = ref({});
+const operationList = ref([]);// 填写人列表
+const filter = ref({}); // 筛选条件
 
 const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: 'inner',
@@ -171,7 +175,8 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
       field: 'user_name',
       title: '填写人',
       editRender: {},
-      slots: { edit: 'operation_edit' ,
+      slots: {
+        edit: 'operation_edit',
         //default: 'operation_default'
       },
       align: 'center',
@@ -235,35 +240,6 @@ const gridEvents: VxeGridListeners<RowVO> = {
   },
 };
 
-// 获取任务列表
-async function getTaskList() {
-  try {
-    gridOptions.loading = true;
-    const response = await getTasks({
-      page: gridOptions.pagerConfig.currentPage,
-      limit: gridOptions.pagerConfig.pageSize,
-      ...filter.value,
-    });
-    gridOptions.data = response.data;
-    gridOptions.pagerConfig.total = response.total;
-  } catch (error) {
-    console.error('Error fetching task data:', error);
-  } finally {
-    gridOptions.loading = false;
-  }
-}
-
-// 筛选器变化
-function filteredDataChange(newList) {
-  filter.value = newList.value;
-  if (selectorRef.value) {
-    if (gridOptions.pagerConfig) {
-      gridOptions.pagerConfig.currentPage = 1;
-    }
-    getTaskList(newList.value);
-  }
-}
-
 const hasActiveEditRow = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -281,18 +257,46 @@ const editRowEvent = (row: RowVO) => {
     if (!row.user || row.user.length === 0) {
       row.user = userNameToUser(row.user_name); // 转换 user_name 到 user
     }
-    console.log('row.user',row.user);
     $grid.setEditRow(row);
   }
 };
 
+const handleEditActived = ({ row, column }) => {
+    if (!row.user || row.user.length === 0) {
+      row.user = userNameToUser(row.user_name); // 转换 user_name 到 user
+    }
+};
+
+const handleEditClosed = ({ row, column }) => {
+  if (column.property === 'user_name') {
+    // 将 user 转换为 user_name 并更新 row
+    row.user_name = userToUserName(row.user);
+    // 强制刷新视图
+    $grid.refreshRow(row);
+  }
+};
+
+// 将 user 数组转换为 user_name 字符串
+function userToUserName(user: string[]): string {
+  return operationList.value
+      .filter(op => user.includes(op.value))
+      .map(op => op.label)
+      .join(', ');
+}
+
+// 将 user_name 字符串转换为 user 数组
+function userNameToUser(user_name: string): string[] {
+  return operationList.value
+      .filter(op => user_name.includes(op.label))
+      .map(op => op.value);
+}
+
 // 清除编辑状态并保存已编辑的数据
 const clearRowEvent = (row) => {
   const $grid = xGrid.value;
   if ($grid) {
     // 手动保存当前行的数据
     const editRecord = $grid.getEditRecord();
-    console.log("1editRecord", editRecord);
     if (editRecord) {
       const { row: editedRow } = editRecord;
       // 更新原始 row 数据，确保编辑的值被保存
@@ -304,19 +308,55 @@ const clearRowEvent = (row) => {
   }
 };
 
-async function saveEvent (row) {
+// 获取任务列表
+async function getTaskList() {
+  try {
+    gridOptions.loading = true;
+    const response = await getTasks({
+      page: gridOptions.pagerConfig.currentPage,
+      limit: gridOptions.pagerConfig.pageSize,
+      ...filter.value,
+    });
+    gridOptions.data = response.data;
+    gridOptions.pagerConfig.total = response.total;
+  } catch (error) {
+    console.error('Error fetching task data:', error);
+  } finally {
+    gridOptions.loading = false;
+  }
+}
+
+// 筛选器变化
+function filteredDataChange(newList) {
+  filter.value = newList.value;
+  if (selectorRef.value) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
+    getTaskList(newList.value);
+  }
+}
+
+// 全部保存按钮
+async function saveEvent(row) {
   const $grid = xGrid.value;
   if ($grid) {
     try {
       const { updateRecords } = $grid.getRecordset();
       updateRecords.forEach(record => {
+        // 转换 user_name 到 user
         if (!record.user || record.user.length === 0) {
-          record.user = userNameToUser(record.user_name); // 转换 user_name 到 user
+          record.user = userNameToUser(record.user_name);
         }
-      });
 
+        // 转换 operater 到数组
+        if (typeof record.operater === 'string') {
+          record.operater = record.operater.split('，').map(item => item.trim()); // 按照中文逗号 '，' 分割并去掉空格
+        } else if (Array.isArray(record.operater) && typeof record.operater[0] === 'string') {
+          record.operater = record.operater[0].split('，').map(item => item.trim());
+        }
+      });
       await postUpdateManyTask(updateRecords);
-      console.log("=>(index.vue:325) updateRecords", updateRecords);
       await getTaskList();
       await VXETable.modal.message({
         content: `更新 ${updateRecords.length} 条`,
@@ -324,19 +364,66 @@ async function saveEvent (row) {
       });
 
     } catch (e) {
-      console.log('error',e);
+      console.log('error', e);
     }
+  }
+}
 
+// 批量修改填写人
+async function updateUser() {
+  const $grid = xGrid.value;
+  if ($grid) {
+    const selectRecords = $grid.getCheckboxRecords(); // 获取勾选的表格行
+    const selectedUsers = taskRuleForm.operation; // 获取选择的填写人
+    const operationType = updateSelect.value; // 获取选择的操作类型
+
+    const updateData = selectRecords.map(record => {
+      const existingUsers = userNameToUser(record.user_name) || [];
+      let updatedUsers;
+      if (operationType === 1) { // 添加操作
+        updatedUsers = Array.from(new Set([...existingUsers, ...selectedUsers]));
+      } else if (operationType === 2) { // 删除操作
+        updatedUsers = existingUsers.filter(user => !selectedUsers.includes(user));
+      }
+      return {
+        id: record.id,
+        user: updatedUsers, // 更新后的 user 数组
+      };
+    });
+    try {
+      // 调用接口批量保存修改的数据
+      await postUpdateManyTask(updateData);
+      if (operationType === 1) { // 添加操作
+        ElMessage.success('添加成功');
+      } else if (operationType === 2) { // 删除操作
+        ElMessage.success('删除成功');
+
+      }
+      userDialogFormVisible.value = false; // 关闭弹窗
+      await getTaskList(); // 重新加载表格数据
+    } catch (error) {
+      console.error('修改失败', error);
+      ElMessage.error('修改失败');
+    }finally {
+      // 清除表单数据
+      taskRuleForm.operation = []; // 清除选择的填写人
+      updateSelect.value = 1; // 清除操作类型
+    }
   }
 }
 
+function updateUserCancel(){
+  taskRuleForm.operation = [];
+  updateSelect.value = 1;
+  userDialogFormVisible.value = false;
+}
+
 // 删除任务
 async function deleteTask() {
   const $grid = xGrid.value;
   if ($grid) {
     const selectRecords = $grid.getCheckboxRecords();
     const selectedIds = selectRecords.map(record => record.id);
-    // console.log(selectedIds);
     const obj = { keys: selectedIds };
     try {
       const resp = await postDeleteTask(obj);
@@ -377,6 +464,7 @@ const removeEvent = async () => {
   }
 };
 
+// 数据校验
 const validateRow = (row) => {
   for (const { field, title } of requiredFields) {
     if (!row[field] || (Array.isArray(row[field]) && row[field].length === 0)) {
@@ -405,7 +493,7 @@ async function updateRow(row) {
       country: row.country,
       brandName: row.brandName,
       user: row.user,
-      operater: row.operater,
+      operater: row.operater[0]?.split('，').map(item => item.trim()),
       currencyCode: row.currencyCode,
       currencyCodePlatform: row.currencyCodePlatform,
       line: row.line,
@@ -413,6 +501,8 @@ async function updateRow(row) {
       company: row.company,
       platform: row.platform,
     };
+    console.log("=>(index.vue:442) updatedRowData", updatedRowData);
+
     try {
       const response = await postUpdateTask(updatedRowData);
       if (response.code === 2000) {
@@ -428,6 +518,23 @@ async function updateRow(row) {
   }
 }
 
+// 更新行任务保存按钮
+const saveRowEvent = async (row: RowVO) => {
+  const $grid = xGrid.value;
+  if ($grid) {
+    if (!validateRow(row)) {
+      return;
+    }
+    await $grid.clearEdit();
+    await updateRow(row);
+    await getTaskList();
+    gridOptions.loading = true;
+    setTimeout(() => {
+      gridOptions.loading = false;
+    }, 300);
+  }
+};
+
 // 更新状态
 async function handleStatusChange(row) {
   const $grid = xGrid.value;
@@ -453,23 +560,7 @@ async function handleStatusChange(row) {
   }
 }
 
-// 更新任务保存按钮
-const saveRowEvent = async (row: RowVO) => {
-  const $grid = xGrid.value;
-  if ($grid) {
-    if (!validateRow(row)) {
-      return;
-    }
-    await $grid.clearEdit();
-    await updateRow(row);
-    await getTaskList();
-    gridOptions.loading = true;
-    setTimeout(() => {
-      gridOptions.loading = false;
-    }, 300);
-  }
-};
-
+// 创建任务
 async function createTask() {
   const body = {
     country: taskRuleForm.country,
@@ -497,6 +588,7 @@ async function createTask() {
   }
 }
 
+// 提交任务确认按钮
 const submitForm = async (formEl) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
@@ -523,9 +615,34 @@ const submitForm = async (formEl) => {
   });
 };
 
+function handleClose(done: Function) {
+  if (taskRuleFormRef.value) taskRuleFormRef.value.resetFields();
+  done();
+}
+
+//发送通知
+async function sendMessage(selectedValue: string) {
+  const body = {
+    date_type: selectedValue,
+  };
+  try {
+    const response = await postSendMessage(body);
+    if (response.code === 2000) {
+      ElMessage.success('发送成功');
+    } else if (response.code == 400) {
+      ElMessage.warning(`${ response.data.description }`);
+    } else {
+      ElMessage.error('发送失败');
+    }
+  } catch (error) {
+  }
+}
+
+// 导出接口
 async function handleExport() {
   gridOptions.loading = true;
   const response = await exportTaskData();
+
   const url = window.URL.createObjectURL(new Blob([response.data]));
   const link = document.createElement('a');
   link.href = url;
@@ -536,11 +653,7 @@ async function handleExport() {
   ElMessage.success('导出数据成功');
 }
 
-function handleClose(done: Function) {
-  if (taskRuleFormRef.value) taskRuleFormRef.value.resetFields();
-  done();
-}
-
+// 获取填写人下拉框
 async function fetchOperationSelect() {
   try {
     const resp = await getOperationSelect();
@@ -552,6 +665,7 @@ async function fetchOperationSelect() {
   }
 }
 
+// 获取币种下拉框
 async function fetchCurrencyList() {
   try {
     const response = await getCurrencyCodeSelect(); // 替换为你的后端接口
@@ -584,6 +698,7 @@ function handelRowCurrencyCodePlatformSelect(item, row) {
   row.currencyCodePlatform = item;
 }
 
+// 表格样式
 const cellStyle = () => {
   return {
     fontSize: '13px',
@@ -597,56 +712,12 @@ const headerCellStyle = () => {
   };
 };
 
-//发送通知
-async function sendMessage(selectedValue: string) {
-  const body = {
-    date_type: selectedValue,
-  };
-  try {
-    const response = await postSendMessage(body);
-    if (response.code === 2000) {
-      ElMessage.success('发送成功');
-    } else if (response.code == 400) {
-      ElMessage.warning(`${ response.data.description }`);
-    } else {
-      ElMessage.error('发送失败');
-    }
-  } catch (error) {
-  }
-}
-// 将 user 数组转换为 user_name 字符串
-function userToUserName(user: string[]): string {
-  return operationList.value
-      .filter(op => user.includes(op.value))
-      .map(op => op.label)
-      .join(', ');
-}
-// 将 user_name 字符串转换为 user 数组
-function userNameToUser(user_name: string): string[] {
-  return operationList.value
-      .filter(op => user_name.includes(op.label))
-      .map(op => op.value);
-}
-const handleEditActived = ({ row, column }) => {
-  if (column.property === 'user_name') {
-    if (!row.user || row.user.length === 0) {
-      row.user = userNameToUser(row.user_name); // 转换 user_name 到 user
-    }
-  }
-};
-const handleEditClosed = ({ row, column }) => {
-  if (column.property === 'user_name') {
-    // 将 user 转换为 user_name 并更新 row
-    row.user_name = userToUserName(row.user);
-    // 强制刷新视图
-    $grid.refreshRow(row);
-  }
-};
 onMounted(() => {
   //getTaskList();
   fetchOperationSelect();
   fetchCurrencyList();
 });
+
 </script>
 
 <template>
@@ -655,124 +726,122 @@ onMounted(() => {
       <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
     </el-card>
     <el-card class="my-3" shadow="hover">
-      <div style="position: relative">
-        <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
-                  v-on="gridEvents" @edit-actived="handleEditActived" @edit-closed="handleEditClosed">
-          <template #toolbar_buttons>
-            <el-button :icon="Plus" plain type="success" @click="dialogFormVisible = true"> 添加任务</el-button>
-            <el-dropdown style="padding: 0 10px;" trigger="click">
-              <el-button plain type="primary">
-                <el-icon class="el-icon--left">
-                  <arrow-down />
-                </el-icon>
-                发送通知
-              </el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item v-for="info of dateType" @click="sendMessage(info.value)">{{
-                      info.label
-                    }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-            <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除</el-button>
-            <el-button :icon="Save" @click="saveEvent">保存</el-button>
-          </template>
-          <template #toolbar_tools>
-            <div class="mx-3.5">
+      <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
+                v-on="gridEvents" @edit-actived="handleEditActived" @edit-closed="handleEditClosed">
+        <template #toolbar_buttons>
+          <el-button :icon="Plus" plain type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
+          <!--<el-button plain type="success" @click="saveEvent">保存</el-button>-->
+          <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除
+          </el-button>
+          <el-button v-if ="!isDeleteDisabled" @click="userDialogFormVisible =true" plain type="success" round>修改填写人</el-button>
+        </template>
+        <template #toolbar_tools>
+          <div class="pr-2.5">
+            <el-tooltip content="保存" placement="top">
+              <vxe-button circle icon="vxe-icon-save" @click="saveEvent"></vxe-button>
+            </el-tooltip>
+            <el-tooltip content="发送通知" placement="top">
+              <el-dropdown style="padding: 0 10px;" trigger="click">
+                <vxe-button circle icon="vxe-icon-bell"></vxe-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="info of dateType" @click="sendMessage(info.value)">{{
+                        info.label
+                      }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-tooltip>
+            <el-tooltip content="下载表格" placement="top">
               <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
-            </div>
+            </el-tooltip>
+          </div>
+        </template>
+        <template #operate="{ row }">
+          <template v-if="hasActiveEditRow(row)">
+            <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
+            <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
           </template>
-          <template #operate="{ row }">
-            <template v-if="hasActiveEditRow(row)">
-              <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
-              <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
-            </template>
-            <template v-else>
+          <template v-else>
+            <el-tooltip content="编辑" placement="top">
               <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
-            </template>
-          </template>
-          <template #number_edit="{ row }">
-            <vxe-input v-model="row.platformNumber"></vxe-input>
-          </template>
-          <template #name_edit="{ row }">
-            <vxe-input v-model="row.platformName"></vxe-input>
-          </template>
-          <template #country_edit="{ row }">
-            <vxe-input v-model="row.country"></vxe-input>
-          </template>
-          <template #brand_edit="{ row }">
-            <vxe-input v-model="row.brandName"></vxe-input>
-          </template>
-          <template #line_edit="{ row }">
-            <vxe-input v-model="row.line"></vxe-input>
-          </template>
-          <template #ipaddress_edit="{ row }">
-            <vxe-input v-model="row.ipaddress"></vxe-input>
-          </template>
-          <template #company_edit="{ row }">
-            <vxe-input v-model="row.company"></vxe-input>
+            </el-tooltip>
           </template>
-          <template #platform_edit="{ row }">
-            <vxe-input v-model="row.platform"></vxe-input>
-          </template>
-          <template #status_default="{ row }">
-            <el-switch
-                v-model="row.status"
-                :active-value="1"
-                :inactive-value="0"
-                inline-prompt
-                size="small"
-                @change="handleStatusChange(row)"
-            />
-          </template>
-          <template #operation_edit="{ row }">
-            <vxe-select v-model="row.user" multiple>
-              <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
-                          :value="item.value"></vxe-option>
-            </vxe-select>
-          </template>
-          <template #operater_name_edit="{ row }">
-            <vxe-input v-model="row.operater"></vxe-input>
-          </template>
-          <template #currency_edit="{ row }">
-            <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
-            <el-autocomplete
-                v-model="row.currencyCode"
-                :debounce="100"
-                :fetch-suggestions="querySearch"
-                :trigger-on-focus="false"
-                clearable
-                @select="item => handleRowSelect(item, row)"
-            >
-              <template v-slot="{ item }">
-                <div>{{ item }}</div>
-              </template>
-            </el-autocomplete>
-          </template>
-          <template #currencyCodePlatform_edit="{ row }">
-            <el-autocomplete
-                v-model="row.currencyCodePlatform"
-                :debounce="100"
-                :fetch-suggestions="querySearch"
-                :trigger-on-focus="false"
-                clearable
-                @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
-            >
-              <template v-slot="{ item }">
-                <div>{{ item }}</div>
-              </template>
-            </el-autocomplete>
-          </template>
-          <!--<template #operation_default="{ row }">-->
-          <!--  <vxe-select v-model="row.user_name" multiple>-->
-          <!--    <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"-->
-          <!--                :value="item.value"></vxe-option>-->
-          <!--  </vxe-select>-->
-          <!--</template>-->
-        </vxe-grid>
-      </div>
+        </template>
+        <template #number_edit="{ row }">
+          <vxe-input v-model="row.platformNumber"></vxe-input>
+        </template>
+        <template #name_edit="{ row }">
+          <vxe-input v-model="row.platformName"></vxe-input>
+        </template>
+        <template #country_edit="{ row }">
+          <vxe-input v-model="row.country"></vxe-input>
+        </template>
+        <template #brand_edit="{ row }">
+          <vxe-input v-model="row.brandName"></vxe-input>
+        </template>
+        <template #line_edit="{ row }">
+          <vxe-input v-model="row.line"></vxe-input>
+        </template>
+        <template #ipaddress_edit="{ row }">
+          <vxe-input v-model="row.ipaddress"></vxe-input>
+        </template>
+        <template #company_edit="{ row }">
+          <vxe-input v-model="row.company"></vxe-input>
+        </template>
+        <template #platform_edit="{ row }">
+          <vxe-input v-model="row.platform"></vxe-input>
+        </template>
+        <template #status_default="{ row }">
+          <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              inline-prompt
+              size="small"
+              @change="handleStatusChange(row)"
+          />
+        </template>
+        <template #operation_edit="{ row }">
+          <vxe-select v-model="row.user" multiple>
+            <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
+                        :value="item.value"></vxe-option>
+          </vxe-select>
+        </template>
+        <template #operater_name_edit="{ row }">
+          <vxe-input v-model="row.operater"></vxe-input>
+        </template>
+        <template #currency_edit="{ row }">
+          <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
+          <el-autocomplete
+              v-model="row.currencyCode"
+              :debounce="100"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              clearable
+              @select="item => handleRowSelect(item, row)"
+          >
+            <template v-slot="{ item }">
+              <div>{{ item }}</div>
+            </template>
+          </el-autocomplete>
+        </template>
+        <template #currencyCodePlatform_edit="{ row }">
+          <el-autocomplete
+              v-model="row.currencyCodePlatform"
+              :debounce="100"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              clearable
+              @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
+          >
+            <template v-slot="{ item }">
+              <div>{{ item }}</div>
+            </template>
+          </el-autocomplete>
+        </template>
+      </vxe-grid>
     </el-card>
   </div>
   <el-dialog v-model="dialogFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="新建任务"
@@ -858,6 +927,28 @@ onMounted(() => {
       </div>
     </template>
   </el-dialog>
+  <el-dialog v-model="userDialogFormVisible" :before-close="updateUserCancel" style="border-radius: 10px;"
+             title="修改填写人"  width="500" align-center>
+    <div class="mb-3">
+      <el-radio-group v-model="updateSelect">
+        <el-radio :label="1">添加</el-radio>
+        <el-radio :label="2">删除</el-radio>
+      </el-radio-group>
+    </div>
+    <el-form-item label="录入人员:" prop="operation"  width="500" align-center>
+      <el-select v-model="taskRuleForm.operation" collapse-tags collapse-tags-tooltip multiple
+                 placeholder="请选择录入人员">
+        <el-option v-for="item in operationList" :key="item.value" :label="item.label"
+                   :value="item.value"></el-option>
+      </el-select>
+    </el-form-item>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="updateUserCancel">取消</el-button>
+        <el-button type="primary" @click="updateUser"> 确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>