refactor(sale): 简单过了下商品明细

src/views/bi/sale/index.vue

@@ -2,11 +2,10 @@
   <div class="app-container">
     <!-- 套表 Item -->
     <div class="excel_charts_item"
-      v-for="item, index in platformSalesList"
-      :key="index">
+      v-for="item, index in platformSalesList">
       <!-- 查询表单 -->
       <el-form :model="item.queryParams"
-        :inline="true"
+        inline
         label-width="68px"
         v-show="item.showSearch">
         <el-form-item label="商品标签">
@@ -54,7 +53,7 @@
         <el-form-item class="del_excel_charts"
           v-if="index !== 0">
           <el-button type="danger"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="platformSalesList.splice(index, 1)">删除表</el-button>
         </el-form-item>
       </el-form>
@@ -262,7 +261,7 @@
       @click="createTableAndECharts">新增套表</div>
     <!-- 上传货需弹框 -->
     <el-dialog title="上传货需"
-      v-model:visible="uploadDemandImportVisible">
+      v-model="uploadDemandImportVisible">
       <el-form :model="uploadDemand"
         label-width="150px">
         <el-form-item label="年份">
@@ -277,7 +276,7 @@
             action="#"
             :http-request="uploadDemandImportFn">
             <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__text">货需表格模板，拖到此处，或<em>点击上传</em></div>
             <div class="el-upload__tip">只能上传 excel 文件</div>
           </el-upload>
         </el-form-item>
@@ -291,8 +290,8 @@
     <levitated-sphere>
       <el-button type="primary"
         @click="createTableAndECharts">新增套表</el-button>
-      <el-button type="warning"
-        @click="uploadDemandImportVisible = true">上传货需</el-button>
+      <!-- <el-button type="warning"
+        @click="uploadDemandImportVisible = true">上传货需</el-button> -->
       <el-button type="danger"
         @click="reset">重置本页</el-button>
     </levitated-sphere>
@@ -353,12 +352,36 @@ const platformSalesObj = reactive({ // 平台销售数据对象（一套表图
 })
 const { pickerOptions } = useDatePickerOptions()
 const uploadDemandImportVisible = ref(false)
-const uploadDemand = ref({ // 上传货需数据对象
-  year: '',
+const uploadDemand = reactive({ // 上传货需数据对象
+  // 默认设置当前年份
+  year: new Date(),
   file: ''
 })
 
-/** 获取销售数据列表 */
+
+// 商品标签列表
+const getSeriesGoodsTagList = async () => {
+  const { data: { total } } = await getSeriesGoodsTagListAPI()
+  const { data: { rows } } = await getSeriesGoodsTagListAPI({
+    pageSize: total
+  })
+  prdTagList.value = rows
+}
+
+// 系列列表
+const getSeriesList = async () => {
+  const res = await getSeriesListAPI()
+  allSeriesList.value = res.data
+}
+
+// 商品列表
+const getProductList = async (item) => {
+  const { data: { total } } = await getProductListAPI({ seriesId: item.queryParams.seriesId })
+  const res = await getProductListAPI({ seriesId: item.queryParams.seriesId, pageSize: total })
+  item.prdList = res.data.rows
+}
+
+// 销售表格数据
 const getSaleList = async (item) => {
   item.loading = true
   const res = await getSaleListAPI({
@@ -426,35 +449,15 @@ const getSaleList = async (item) => {
   // 默认先显示销售量数据
 
   item.chartData.data = item.chartData.saleCount
-
   item.loading = false
 }
 
-// 商品标签列表
-const getSeriesGoodsTagList = async () => {
-  const { data: { total } } = await getSeriesGoodsTagListAPI()
-  const { data: { rows } } = await getSeriesGoodsTagListAPI({
-    pageSize: total
-  })
-  prdTagList.value = rows
-}
-// 获取所有系列列表
-const getSeriesList = async () => {
-  const res = await getSeriesListAPI()
-  allSeriesList.value = res.data
-}
-// 平台 id 值换平台中文名字
-const getProductList = async (item) => {
-  const { data: { total } } = await getProductListAPI({ seriesId: item.queryParams.seriesId })
-  const res = await getProductListAPI({ seriesId: item.queryParams.seriesId, pageSize: total })
-  item.prdList = res.data.rows
-  return res.data.rows
-}
 // 格式化平台名字
 const formatterPlatForm = (row, cell, cellValue) => {
   return dict.sale_platform.value.find(o => o.value == cellValue)?.label
 }
-// 商品标签改变时
+
+// 表格合计
 const getSummaries = (param) => {
   const { columns, data } = param;
   const sums = [];
@@ -513,6 +516,7 @@ const getSummaries = (param) => {
   return sums;
 }
 
+// 商品标签改变
 const prdTagChange = async (item) => {
   // 获取标签对应下属的商品 code 集合
   const response = await getPrdTagDetailAPI({
@@ -521,18 +525,14 @@ const prdTagChange = async (item) => {
   const prdCodes = response.data.map(o => o.prdCode)
   item.queryParams.prdCodes = prdCodes
 
-  // 查询对应销售数据
+  // 查询销售数据
   getSaleList(item)
 }
 
 // 系列改变时
 const seriesChange = async (item) => {
   // 对应商品列表改变
-  const res = await getProductList(item)
-  // 商品列表里是否有刚才选择的数据，有就不清空，否则清空刚才选中的选项
-  if (!res.find(o => o.prdCode === item.queryParams.prdCode)) {
-    item.queryParams.prdCode = ''
-  }
+  await getProductList(item)
   // 对应销售数据改变
   getSaleList(item)
 }
@@ -542,12 +542,13 @@ const prdChange = async (item) => {
   // 对应销售数据改变
   getSaleList(item)
 }
-// 创建查询某个系列/商品的套表
+
+// 创建套表
 const createTableAndECharts = () => {
   let item = reactive(deepClone(toRaw(platformSalesObj)))
-  // 如果是第一套套表，默认填写日期
+  // 第一套表，默认填写日期
   if (platformSalesList.value.length === 0) {
-    item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))] // 默认查询和显示的是当月 1 号到 T-1 日期
+    item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))]
   } else {
     // 非第一套图表，滚动到底
     nextTick(() => {
@@ -578,14 +579,14 @@ const uploadDemandImportFn = (obj) => {
 // 确认上传货需
 const submitUploadDemandFn = async () => {
   const fd = new FormData()
+  console.log(uploadDemand.year)
   fd.append('file', uploadDemand.file)
-  fd.append('year', uploadDemand?.year.getFullYear())
+  fd.append('year', uploadDemand.year.getFullYear())
   const res = await uploadDemandImportAPI(fd)
   $message.success(res.msg)
   uploadDemandImportVisible.value = false
 }
 
-
 const init = async () => {
   // 默认创建第一个表格
   const item = createTableAndECharts()