feat(plan): 完成计划上传

src/api/promotion/plan.js

@@ -26,4 +26,13 @@ export function addPlanAPI(data) {
     method: 'POST',
     data
   })
+}
+
+// 确认保存活动计划
+export function savePlanAPI(uuid) {
+  return request({
+    baseURL: VITE_APP_PROMOTION,
+    url: `/plan/v2/core/upload/${uuid}`,
+    method: 'GET'
+  }) 
 }
\ No newline at end of file

src/hooks/date.js

@@ -7,6 +7,8 @@ export const useDatePickerOptions = (type = -1) => {
   const last30Date = [new Date().setDate((new Date().getDate() - (30 - 1))), new Date().setDate((new Date().getDate() + type))]
   const last7Date = [new Date().setDate((new Date().getDate() - (7 - 1))), new Date().setDate((new Date().getDate() + type))]
   const lastDate = [new Date().setDate((new Date().getDate() + type)), new Date().setDate((new Date().getDate() + type))]
+  // 今年的 1.1 号到 12.31号
+  const thisYearDate = [new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear(), 11, 31)]
   const recentPickerOptions = ref([// 日期选项配置
     {
       text: '最近一周',
@@ -51,6 +53,7 @@ export const useDatePickerOptions = (type = -1) => {
     lastDate, // 昨天
     last30Date, // 前 30 天
     last7Date, // 前 7 天
+    thisYearDate, // 今年 1.1 号到 12.31 号
     recentPickerOptions, // 最近一周/一月
     lastPickerOptions // 上一周/上一月
   }

src/views/promotion/plan/index.vue

@@ -20,8 +20,7 @@
             action="#"
             accept=".xls,.xlsx"
             :http-request="uploadFile"
-            :show-file-list="false"
-            :limit="1">
+            :show-file-list="false">
             <template #trigger>
               <el-button type="primary">选择 Excel</el-button>
             </template>
@@ -48,34 +47,55 @@
       <!-- 弹窗确认上传计划 -->
       <el-dialog title="上传计划"
         v-model="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
         width="80%">
         <div>
           <!-- 计划表格 -->
           <el-table :data="planTableList"
+            :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
             border
-            style="width: 100%">
-            <el-table-column prop="name"
-              label="文件名"
-              width="200">
-            </el-table-column>
+            style="width: 100%"
+            show-overflow-tooltip
+            :row-class-name="tableRowClassName">
+            <el-table-column v-for="item in confirmTableColumns"
+              :key="item.label"
+              :prop="item.prop"
+              :label="item.label"
+              :width="item.width"
+              :formatter="formatterConfirm" />
           </el-table>
         </div>
+       
+        <template #footer>
+          <div class="dialog-footer">
+            <p style="color: red; float: left;">如果表格有红色行，请根据错误提示修改本地表格重新上传</p>
+            <el-button @click="dialogVisible = false">关闭本弹窗</el-button>
+            <el-button type="primary"
+              :disabled="!confirmExcelUUID"
+              @click="confirmPlanBtn">
+              确定保存
+            </el-button>
+          </div>
+        </template>
       </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import { getPlanListAPI, uploadFileToOSSAPI, addPlanAPI  } from '@/api'
+import { getPlanListAPI, uploadFileToOSSAPI, addPlanAPI, savePlanAPI } from '@/api'
 import { useDatePickerOptions } from '@/hooks'
 import { v4 as uuidv4 } from 'uuid';
 import store from '@/store'
+import { parseTime } from '@/utils'
+import { ElMessage } from 'element-plus';
 
-const { recentPickerOptions: pickerOptions, last7Date } = useDatePickerOptions(0)
+const { recentPickerOptions: pickerOptions, thisYearDate } = useDatePickerOptions(0)
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
-  activityDate: last7Date
+  activityDate: thisYearDate
 })
 
 // 任务列表
@@ -141,7 +161,7 @@ const columns = ref([
   {
     label: '操作',
     prop: ''
-  },
+  }
 ])
 const getPlanList = async () => {
   const res = await getPlanListAPI(queryParams)
@@ -151,6 +171,8 @@ getPlanList()
 const formatter = (row, col, value) => {
   if (col.property === 'planStatus') {
     return value == 0 ? '执行中' : '取消'
+  } else if (col.property === 'modifyTime') {
+    return parseTime(value)
   } else {
     return value
   }
@@ -158,7 +180,6 @@ const formatter = (row, col, value) => {
 
 // 上传计划
 const uploadFile = async (file) => {
-  console.log(store.state)
   // 拼接当前月数为文件夹名
   const date = new Date()
   const month = date.getMonth() + 1
@@ -167,14 +188,107 @@ const uploadFile = async (file) => {
     "excelUrl": excelUrl,
     "employeeNo": store.state.value.user.userInfo.userName
   })
-  console.log(res)
+  planTableList.value = res.data.table
+  confirmExcelUUID.value = res.data.uuid
   dialogVisible.value = true
+
+  return true
 }
 
 // 确认计划
 const planTableList = ref([])
 const dialogVisible = ref(false)
+const confirmExcelUUID = ref('')
+const confirmTableColumns = [
+  {
+    label: '门店编码',
+    prop: 'storeCode',
+    width: 120
+  },
+  {
+    label: '门店名称',
+    prop: 'storeName',
+    width: 200
+  },
+  {
+    label: '活动模式',
+    prop: 'pattern',
+    width: 100
+  },
+  {
+    label: '月份',
+    prop: 'month',
+    width: 80
+  },
+  {
+    label: '日期',
+    prop: 'date',
+    width: 180
+  },
+  {
+    label: '促销员上班时间',
+    prop: 'clockInTime',
+    width: 180
+  },
+  {
+    label: '促销员下班时间',
+    prop: 'clockOutTime',
+    width: 180
+  },
+  {
+    label: '促销员薪资',
+    prop: 'salary',
+    width: 100
+  },
+  {
+    label: '杂费',
+    prop: 'incidentals',
+    width: 80
+  },
+  {
+    label: '错误消息',
+    prop: 'errorMsg',
+    width: 450
+  }
+]
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (row.errorMsg) {
+    return 'error-row'
+  } else {
+    return ''
+  }
+}
+const formatterConfirm = (row, col, value) => {
+  if (col.property === 'clockInTime' || col.property === 'clockOutTime' || col.property === 'date') {
+    return parseTime(value)
+  } else {
+    return value
+  }
+}
+// 确认计划-保存表格到计划库
+const confirmPlanBtn = async () => {
+  await savePlanAPI(confirmExcelUUID.value)
+  ElMessage.success('保存成功')
+  dialogVisible.value = false
+  getPlanList()
+}
 </script>
 
 <style scoped
-  lang="scss"></style>
\ No newline at end of file
+  lang="scss">
+  .el-table {
+    ::v-deep(.error-row) {
+      --el-table-tr-bg-color: var(--el-color-error-light-9);
+    }
+  }
+
+  /* .el-table .warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+.el-table .error-row {
+  
+} */
+</style>
\ No newline at end of file