feat(finance): 查询表单参数修改_封装全选选项下拉菜单

src/components/XLSelect/index.vue

+<template>
+  <el-select v-bind="$attrs"
+    v-model="selectedOptions"
+    @change="handleChange">
+    <el-option v-if="allOption"
+      :key="allSelectLabel"
+      :label="allSelectLabel"
+      :value="allSelectValue"></el-option>
+    <slot></slot>
+  </el-select>
+</template>
+
+<script setup>
+const selectedOptions = ref([])
+
+const props = defineProps({
+  allOption: { // 开启全选选项
+    type: Boolean,
+    default: false,
+  },
+  allSelectLabel: { // 全选文案
+    type: String,
+    default: '全选',
+  },
+  allSelectValue: { // 全选绑定值
+    type: [String, Number],
+    default: 'ALL',
+  },
+  allSingleValue: { // 全选模式（false：返回 option 组，true：返回 allSelectValue 值）
+    type: Boolean,
+    default: false,
+  },
+  modelValue: [String, Object, Array]
+});
+
+watch(() => props.modelValue, val => {
+  // if (props.allOption) {
+  //   // 判断不是数组则转成数组
+  //   if (!Array.isArray(val)) {
+  //     emits('update:modelValue', [val]);
+  //     selectedOptions.value = [val];
+  //   }
+  // }
+}, {
+  deep: true,
+  immediate: true
+})
+
+const handleChange = (val) => {
+  if (val.includes(props.allSelectValue)) {
+    selectedOptions.value = [props.allSelectValue];
+  } else {
+    selectedOptions.value = val;
+  }
+  // emit('update:modelValue', selectedOptions.value);
+}
+
+</script>

src/components/ToolTip/index.vue → src/components/XLToolTip/index.vue

@@ -12,19 +12,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MouseToolTip',
-  data() {
-    return {
-      show: false
-    }
-  }
-}
+<script setup
+  name="xl-tooltip">
+  const show = ref(false)
 </script>
 
-<style scoped lang="scss">
-.wrap{
+<style scoped
+  lang="scss">
+  .wrap {
     display: inline-block;
-}
+  }
 </style>
\ No newline at end of file

src/main.js

@@ -49,7 +49,9 @@ import CategoryTree from '@/components/CategoryTree'
 // 返回头部
 import BackToUp from '@/components/BackToUp'
 // 自定义 toolTip
-import CustomToolTip from '@/components/ToolTip'
+import XLToolTip from '@/components/XLToolTip'
+// 自定义 select
+import XlSelect from '@/components/XLSelect'
 // 开窗查询组件
 import OpenDialog from '@/components/OpenDialog'
 
@@ -80,7 +82,8 @@ app.component('GroupLegend', GroupLegend)
 app.component('NoData', NoData)
 app.component('CategoryTree', CategoryTree)
 app.component('BackToUp', BackToUp)
-app.component('CustomToolTip', CustomToolTip)
+app.component('XlToolTip', XLToolTip)
+app.component('XlSelect', XlSelect)
 app.component('OpenDialog', OpenDialog)
 
 // 全局插件

src/views/bi/finance/index.vue

@@ -7,7 +7,8 @@
         label-width="68px"
         inline>
         <el-form-item label="直播间">
-          <el-select v-model="queryParams.brand"
+          <xl-select v-model="queryParams.brand"
+            allOption
             multiple
             clearable
             collapse-tags
@@ -17,55 +18,55 @@
               :label="str"
               :value="str">
             </el-option>
-          </el-select>
+          </xl-select>
         </el-form-item>
         <el-form-item label="口味">
-          <el-select v-model="queryParams.brand"
+          <el-select v-model="queryParams.taste"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-            <el-option v-for="str in brandList"
+            <el-option v-for="str in tasteList"
               :label="str"
               :value="str">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="规格">
-          <el-select v-model="queryParams.brand"
+          <el-select v-model="queryParams.spec"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-            <el-option v-for="str in brandList"
+            <el-option v-for="str in specList"
               :label="str"
               :value="str">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="系列">
-          <el-select v-model="queryParams.brand"
+          <el-select v-model="queryParams.series"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-            <el-option v-for="str in brandList"
+            <el-option v-for="str in seriesList"
               :label="str"
               :value="str">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="商品">
-          <el-select v-model="queryParams.brand"
+          <el-select v-model="queryParams.goods"
             multiple
             clearable
             collapse-tags
             collapse-tags-tooltip
             @change="getList">
-            <el-option v-for="str in brandList"
+            <el-option v-for="str in goodsList"
               :label="str"
               :value="str">
             </el-option>
@@ -79,7 +80,7 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :shortcuts="pickerOptions"
-            @change="queryChangeFn('date')">
+            @change="queryChangeFn()">
           </el-date-picker>
         </el-form-item>
       </el-form>
@@ -118,10 +119,34 @@
 
 <script setup>
 import { getFinanceListAPI } from '@/api'
+import { useDatePickerOptions } from '@/hooks'
+
+const { pickerOptions } = useDatePickerOptions()
+const detailVisible = ref(false) // 详情
+const brandList = ref(['a', 'b', 'c']) // 直播间
+const tasteList = ref([]) // 口味
+const specList = ref([]) // 规则
+const seriesList = ref([]) // 系列
+const goodsList = ref([]) // 商品
+
+const data = reactive({
+  queryParams: {
+    brand: 'a', // 直播间
+    taste: '', // 口味
+    spec: '', // 规格
+    series: '', // 系列
+    goods: '', // 商品
+    date: [] // 日期
+  }
+})
 
-const detailVisible = ref(false)
-const aggregationList = ref(['料号', '规格', '口味', '直播间类型']) // 聚合条件
-const brandList = ref([]) // 直播间列表
+const { queryParams } = toRefs(data)
+
+const queryChange = () => {
+
+}
+
+// 获取数据
 const columns = ref([
   {
     label: '直播间',
@@ -166,13 +191,14 @@ const columns = ref([
 ])
 const tableData = ref([
 ])
-const data = reactive({
-  queryParams: {
-    // aggregation: '料号', // 聚合条件
-    // brand: '' // 直播间
-  },
-  detailTableData: [],
-  detailColumns: [
+const getList = async () => {
+  const res = await getFinanceListAPI(queryParams.value)
+  tableData.value = res.data.list
+}
+getList()
+
+const detailTableData = ref([])
+const detailColumns = ref([
   {
     label: '订单编号',
     prop: 'id'
@@ -250,21 +276,7 @@ const data = reactive({
     label: '平台货品名称',
     prop: ''
   }
-  ]
-})
-
-const { queryParams } = toRefs(data)
-
-const queryChange = () => {
-
-}
-
-// 获取数据
-const getList = async () => {
-  const res = await getFinanceListAPI(queryParams.value)
-  tableData.value = res.data.list
-}
-getList()
+])
 
 </script>
 
@@ -272,7 +284,8 @@ getList()
   lang="scss">
   ::v-deep(.el-form-item) {
     width: 250px;
-    &:last-of-type{
+
+    &:last-of-type {
       width: 350px;
     }
   }

src/views/system/user/index.vue

@@ -162,7 +162,7 @@
             class-name="small-padding fixed-width"
             align="left">
             <template #default="scope">
-              <custom-tool-tip content="修改"
+              <xl-tool-tip content="修改"
                 placement="top"
                 v-if="scope.row.userId !== 1">
                 <el-button link
@@ -170,8 +170,8 @@
                   icon="Edit"
                   @click="handleUpdate(scope.row)"
                   v-hasPermi="['system:user:edit']"></el-button>
-              </custom-tool-tip>
-              <custom-tool-tip content="删除"
+              </xl-tool-tip>
+              <xl-tool-tip content="删除"
                 placement="top"
                 v-if="scope.row.userId !== 1">
                 <el-button link
@@ -179,8 +179,8 @@
                   icon="Delete"
                   @click="handleDelete(scope.row)"
                   v-hasPermi="['system:user:remove']"></el-button>
-              </custom-tool-tip>
-              <custom-tool-tip content="重置密码"
+              </xl-tool-tip>
+              <xl-tool-tip content="重置密码"
                 placement="top"
                 v-if="scope.row.userId !== 1">
                 <el-button link
@@ -188,8 +188,8 @@
                   icon="Key"
                   @click="handleResetPwd(scope.row)"
                   v-hasPermi="['system:user:resetPwd']"></el-button>
-              </custom-tool-tip>
-              <custom-tool-tip content="分配角色"
+              </xl-tool-tip>
+              <xl-tool-tip content="分配角色"
                 placement="top"
                 v-if="scope.row.userId !== 1">
                 <el-button link
@@ -197,7 +197,7 @@
                   icon="CircleCheck"
                   @click="handleAuthRole(scope.row)"
                   v-hasPermi="['system:user:edit']"></el-button>
-              </custom-tool-tip>
+              </xl-tool-tip>
             </template>
           </el-table-column>
         </el-table>