refactor(all): 取消全选-选项使用

src/api/bi/finance.js

@@ -9,6 +9,12 @@ export const getFinanceListAPI = (data) => {
   return request({
     url: '/bi/finance/cost/list',
     method: 'POST',
-    data
+    data: {
+      zbjQdType: data.brand,
+      flavor: data.taste,
+      specName: data.spec,
+      series: data.series,
+      goodsName: data.goods
+    }
   })
 }
\ No newline at end of file

src/components/XLSelect/index.vue

@@ -2,15 +2,17 @@
   <el-select v-bind="$attrs"
     v-model="selectedOptions"
     @change="handleChange">
-    <li class="el-select-dropdown__item all_item "
-      :class="{ 'is-selected': isAll }"
-      @click="selectAll">
-      <span>全选</span>
-    </li>
     <el-option v-for="str in options"
       :label="str"
       :value="str">
     </el-option>
+    <li class="el-select-dropdown__item all_item"
+      :class="{ 'is-selected': isAll }"
+      @click.stop="selectAll"
+      @mouseenter.stop="over"
+      @mouseleave.stop="out">
+      <span>全选</span>
+    </li>
   </el-select>
 </template>
 
@@ -26,7 +28,7 @@ const props = defineProps({
     default: () => [],
   },
   modelValue: {
-    type: Array,
+    type: [Array, String],
     default: () => []
   }
 })
@@ -38,6 +40,12 @@ watch(() => props.modelValue, val => {
   deep: true,
   immediate: true
 })
+// 设置样式
+const noHover = () => {
+
+  const list = document.querySelectorAll('.el-select-dropdown .el-select-dropdown__item')
+  list.forEach(el => el.classList.add('no-hovering'))
+}
 
 // 全选点击
 const selectAll = () => {
@@ -49,12 +57,22 @@ const selectAll = () => {
     selectedOptions.value = [];
     emits('update:modelValue', selectedOptions.value);
   }
+  nextTick(() => {
+    noHover()
+  })
 }
 
 const handleChange = (val) => {
   isAll.value = val.length === props.options.length
   emits('update:modelValue', val)
 }
+
+const over = () => {
+  noHover()
+}
+const out = () => {
+  noHover()
+}
 </script>
 
 <style scoped
@@ -68,7 +86,7 @@ const handleChange = (val) => {
     background-color: var(--el-fill-color-light);
   }
 
-  .all_item:hover+.is-hovering {
+  .no-hovering {
     background-color: transparent;
   }
 

src/utils/math.js

@@ -77,8 +77,12 @@ export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = t
     resultNum = Math.abs(resultNum);
   }
   if (comma) {
-    // 是否添加千分位符号
-    resultNum = resultNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // 将整数部分和小数部分分开
+    const parts = resultNum.toString().split('.');
+    // 只在整数部分添加逗号
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // 重新组合整数部分和小数部分
+    resultNum = parts.join('.');
   }
   return `${resultNum} ${unit}${des}`;
 }

src/views/bi/finance/index.vue

@@ -6,15 +6,18 @@
         label-position="right"
         label-width="68px"
         inline>
-        <el-form-item label="直播间" ref="ab">
-          <xl-select v-model="queryParams.brand"
-            :options="brandList"
+        <el-form-item label="直播间">
+          <el-select v-model="queryParams.brand"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-          </xl-select>
+            <el-option v-for="str in brandList"
+              :label="str"
+              :value="str">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="口味">
           <el-select v-model="queryParams.taste"
@@ -87,10 +90,8 @@
           <el-table-column v-for="item in columns"
             :key="item.prop"
             :label="item.label"
-            :prop="item.prop">
-            <template v-slot="scope">
-              {{ scope.row[item.prop] }}
-            </template>
+            :prop="item.prop"
+            :formatter="formatter">
           </el-table-column>
         </el-table>
       </div>
@@ -116,22 +117,23 @@
 <script setup>
 import { getFinanceListAPI } from '@/api'
 import { useDatePickerOptions } from '@/hooks'
+import { formatNumberWithUnit } from '@/utils'
 
 const { pickerOptions } = useDatePickerOptions()
 const detailVisible = ref(false) // 详情
-const brandList = ref(['a', 'b', 'c']) // 直播间
-const tasteList = ref([]) // 口味
+const brandList = ref(["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"]) // 直播间
+const tasteList = ref(["香辣", "原味", "椒麻", "混合"]) // 口味
 const specList = ref([]) // 规则
 const seriesList = ref([]) // 系列
 const goodsList = ref([]) // 商品
 
 const data = reactive({
   queryParams: {
-    brand: ['a', 'b', 'c'], // 直播间
-    taste: '', // 口味
-    spec: '', // 规格
-    series: '', // 系列
-    goods: '', // 商品
+    brand: ["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"], // 直播间
+    taste: ["香辣", "原味", "椒麻", "混合"], // 口味
+    spec: [], // 规格
+    series: [], // 系列
+    goods: [], // 商品
     date: [] // 日期
   }
 })
@@ -142,27 +144,27 @@ const queryChange = () => {
 
 }
 
-// 获取数据
+// 表格数据
 const columns = ref([
   {
     label: '直播间',
-    prop: 'queryType'
+    prop: 'zbjQdType'
   },
   {
     label: '口味',
-    prop: 'queryType'
+    prop: 'flavorErp'
   },
   {
     label: '规格',
-    prop: 'queryType'
+    prop: 'specNameErp'
   },
   {
     label: '系列',
-    prop: 'queryType'
+    prop: ''
   },
   {
     label: '商品',
-    prop: 'queryType'
+    prop: 'goodsName'
   },
   {
     label: '分摊后总价',
@@ -173,16 +175,16 @@ const columns = ref([
     prop: 'actualCostSum'
   },
   {
-    label: '标准成本',
-    prop: 'standardCostSum'
+    label: '实际成本毛利',
+    prop: 'actualCostGrossProfitSum'
   },
   {
-    label: '实际成本毛利',
+    label: '标准成本',
     prop: 'standardCostSum'
   },
   {
     label: '标准成本毛利',
-    prop: 'standardCostSum'
+    prop: 'standardCostGrossProfitSum'
   }
 ])
 const tableData = ref([
@@ -193,6 +195,16 @@ const getList = async () => {
 }
 getList()
 
+const formatter = (row, column, value) => {
+  if (['shareAmountSum', 'actualCostSum', 'actualCostGrossProfitSum', 'standardCostSum', 'standardCostGrossProfitSum'].includes(column.property)) {
+    console.log(value)
+    return formatNumberWithUnit({ value, carry: false, fixed: 4, round: false, post: false, comma: true, des: '' })
+  } else {
+    return value
+  }
+}
+
+// 详情数据
 const detailTableData = ref([])
 const detailColumns = ref([
   {
@@ -273,7 +285,6 @@ const detailColumns = ref([
     prop: ''
   }
 ])
-const ab = ref(null)
 </script>
 
 <style scoped