🎨 feat<任务列表>: 消息通知修改

src/views/reportManage/TaskManage/index.vue

@@ -19,7 +19,7 @@ import { labelInner } from 'echarts/types/src/label/labelStyle';
 import { dateType } from '/@/views/reportManage/TaskManage/utils/enum';
 
 const selectorRef = ref(null);
-const message = ref('day');
+const message = ref('');
 
 //表单
 interface taskRuleForm {
@@ -564,12 +564,12 @@ const headerCellStyle = () => {
 };
 
 //发送通知
-async function sendMessage() {
+async function sendMessage(selectedValue: string) {
   const body = {
-    date_type: message.value,
+    date_type: selectedValue,
   };
   try {
-    //console.log('body', body);
+    console.log('body', body);
     const response = await postSendMessage(body);
     if (response.code === 2000) {
       ElMessage.success('发送成功');
@@ -598,29 +598,19 @@ onMounted(() => {
       <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
                 v-on="gridEvents">
         <template #toolbar_buttons>
-          <el-button :icon="Plus" plain type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
+          <el-button :icon="Plus" plain type="success" @click="dialogFormVisible = true"> 添加任务</el-button>
+          <el-dropdown style="padding: 0 10px;" trigger="click">
+            <el-button type="primary" plain>
+              <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-select-->
-          <!--    v-model="message"-->
-          <!--    placeholder="Select"-->
-          <!--    style="width: 100px;padding-left: 10px"-->
-          <!--&gt;-->
-          <!--  <el-option-->
-          <!--      v-for="item in options"-->
-          <!--      :key="item.value"-->
-          <!--      :label="item.label"-->
-          <!--      :value="item.value"-->
-          <!--  />-->
-          <!--</el-select>-->
-          <el-popover :width="75">
-            <template #reference>
-              <el-button :icon="Send" plain @click="sendMessage">发送通知</el-button>
-            </template>
-            <div class="popver-content">
-              <span class="popver-content-item" v-for="info of dateType" @click="sendMessage(info.value)">{{ info.label }}</span>
-            </div>
-          </el-popover>
         </template>
         <template #toolbar_tools>
           <div class="mx-3.5">
@@ -809,24 +799,4 @@ onMounted(() => {
   transition: all 0.2s ease-in-out;
 }
 
-.popver-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .popver-content-item {
-    padding: 5px 0;
-    /* text-align: center; */
-    &:hover {
-      background-color: #f4f7fd;
-      color: blue;
-      cursor: pointer;
-    }
-  }
-}
-
-::v-deep(.el-popover) {
-  max-width: 75px !important;
-  min-width: 75px !important;
-  width: 75px !important;
-}
 </style>