update

src/hooks/datatable/index.ts

@@ -1,4 +1,4 @@
-import { reactive, ref, shallowRef, toRefs, computed, UnwrapRef } from 'vue'
+import { reactive, ref, shallowRef, computed, UnwrapRef } from 'vue'
 import { FilterValue, FilterOptions, DataTableOptions } from './interface'
 
 export function useDataTable<T>(options: DataTableOptions = {}) {
@@ -14,48 +14,6 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
     const pageCount = computed(() => Math.ceil(total.value / pageSize.value) || 1)
     // 过滤筛选值
     const filters = shallowRef<FilterValue<T>[]>([])
-    // 过滤选项
-    const filterOptons: FilterOptions<T> = reactive({
-        selectList: [],
-        inputList: [],
-        buttonList: [
-            {
-                lable: '重置',
-                onClick: () => {
-                    filterOptons.selectList.forEach((e) => {
-                        if (!e.noClear) {
-                            e.selectedValue = undefined
-                        }
-                    })
-                    filterOptons.inputList.forEach((e) => {
-                        if (!e.noClear) {
-                            e.value = undefined
-                        }
-                    })
-                    pageIndex.value = 1
-                    filterMethod.onReset()
-                }
-            },
-            {
-                lable: '查询',
-                className: 'el-button--primary', // 这里 className 不应该使用框架样式，以后再解决
-                onClick: () => {
-                    pageIndex.value = 1
-                    filterMethod.onSearch()
-                }
-            },
-        ]
-    })
-
-    // 数据过滤方法
-    const filterMethod = {
-        onReset: () => {
-            filters.value = []
-        },
-        onSearch: () => {
-            filters.value = getFilterParams()
-        }
-    }
 
     // 数据列表
     const dataList = computed<UnwrapRef<T[]>>({
@@ -75,7 +33,8 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
                 })
             })
             // 本地分页
-            if (options?.pagination) {
+            if (options.pagination) {
+                total.value = result.length
                 return result.slice((pageIndex.value - 1) * pageSize.value, pageIndex.value * pageSize.value)
             }
             return result
@@ -85,11 +44,45 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
         }
     })
 
+    return {
+        dataList,
+        total,
+        pageIndex,
+        pageSize,
+        pageCount,
+        filters,
+    }
+}
+
+export function useDataFilter<T extends object>() {
+    const filterOptons: FilterOptions<T> = reactive({
+        selectList: [],
+        inputList: [],
+        buttonList: [],
+    })
+
+    // 清空所有过滤条件
+    const clearAll = () => {
+        filterOptons.selectList.forEach((e) => {
+            if (!e.locked) {
+                e.selectedValue = undefined
+            }
+        })
+
+        filterOptons.inputList.forEach((e) => {
+            if (!e.locked) {
+                e.value = undefined
+            }
+        })
+    }
+
     // 获取过滤参数，支持多条件查询
-    const getFilterParams = () => {
+    const getFilterParams = (callback: (params: FilterValue<T>[]) => void, clear = false) => {
+        clear && clearAll()
         const options: FilterValue<T>[] = []
+
         filterOptons.selectList.forEach((e) => {
-            const { key, selectedValue } = e;
+            const { key, selectedValue } = e
             if (selectedValue !== undefined) {
                 options.push({
                     keys: [key],
@@ -97,8 +90,9 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
                 })
             }
         })
+
         filterOptons.inputList.forEach((e) => {
-            const { keys, value } = e;
+            const { keys, value } = e
             if (value) {
                 options.push({
                     keys,
@@ -106,17 +100,21 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
                 })
             }
         })
-        return options
+
+        callback && callback(options)
     }
 
     // 获取查询参数，支持多条件查询
-    const getQueryParams = () => {
-        const params: { [K in keyof T]?: T[K] } = {}
+    const getQueryParams = (callback: (params: Partial<T>) => void, clear = false) => {
+        clear && clearAll()
+        const params: Partial<T> = {}
+
         filterOptons.selectList.forEach((e) => {
             if (e.selectedValue !== undefined) {
                 params[e.key] = e.selectedValue
             }
         })
+
         filterOptons.inputList.forEach((e) => {
             e.keys.forEach((key) => {
                 if (e.value) {
@@ -124,17 +122,13 @@ export function useDataTable<T>(options: DataTableOptions = {}) {
                 }
             })
         })
-        return params
+
+        callback && callback(params)
     }
 
     return {
-        dataList,
-        total,
-        pageIndex,
-        pageSize,
-        pageCount,
-        filterMethod,
+        filterOptons,
+        getFilterParams,
         getQueryParams,
-        ...toRefs(filterOptons),
     }
 }

src/hooks/datatable/interface.ts

@@ -22,7 +22,7 @@ export interface FilterSelect<T> {
     key: keyof T,
     label?: string,
     selectedValue?: T[keyof T],
-    noClear?: boolean, // 重置时是否阻止清空当前值
+    locked?: boolean, // 重置时是否阻止清空当前值
     placeholder?: string,
     options: {
         label: string,
@@ -38,7 +38,7 @@ export interface FilterInput<T> {
     keys: (keyof T)[],
     label?: string,
     value?: T[keyof T],
-    noClear?: boolean, // 重置时是否阻止清空当前值
+    locked?: boolean, // 重置时是否阻止清空当前值
     type?: 'text' | 'number',
     placeholder?: string
 }

src/packages/mobile/views/home/components/main/index.vue

@@ -57,14 +57,14 @@
           </Swipe>
         </div>
       </div>
-      <div class="home-main__banner home-main__banner--body">
+      <div class="home-main__banner home-main__banner--body" v-if="false">
         <Swipe :autoplay="5000" indicator-color="white" lazy-render>
           <SwipeItem v-for="(item, index) in bodyBanners" :key="index">
             <img :src="getImageUrl(item.imagepath)" />
           </SwipeItem>
         </Swipe>
       </div>
-      <div class="home-main__news">
+      <div class="home-main__news" style="margin-top:.2rem">
         <Cell class="titlebar" title-class="titlebar-title" value-class="titlebar-more" title="市场资讯" value="更多资讯"
           :to="{ name: 'news-list' }" is-link />
         <CellGroup class="article">

src/packages/mobile/views/mine/order/detail/purchasetrade/index.vue

@@ -9,7 +9,7 @@
                 <Cell title="参考价" :value="detail.tradeprice.toFixed(2)" />
                 <Cell title="数量" :value="detail.tradeqty" />
                 <Cell title="预付款(含定金)" :value="handleNumberValue(detail.payeddeposit.toFixed(2))" />
-                <Cell title="定金比例" :value="parsePercent(detail.depositrate)" />
+                <Cell title="付款比例" :value="parsePercent(detail.depositrate)" />
                 <Cell title="购买价" :value="handleNumberValue(detail.transferprice.toFixed(2))" />
                 <Cell title="实际价" :value="handleNumberValue(detail.lastprice.toFixed(2))" />
                 <Cell title="尾款" :value="handleNumberValue(detail.remainamount.toFixed(2))" />

src/packages/mobile/views/mine/order/detail/transfer/index.vue

@@ -11,7 +11,7 @@
                 <Cell title="数量" :value="details.transferqty" />
                 <Cell title="转让金额" :value="details.transferamount.toFixed(2)" />
                 <Cell title="预付款(含定金)" :value="handleNumberValue(details.payeddeposit.toFixed(2))" />
-                <Cell title="定金比例" :value="parsePercent(details.depositrate)" />
+                <Cell title="付款比例" :value="parsePercent(details.depositrate)" />
                 <Cell title="状态" :value="getTHJTransferStatusName(details.transferstatus)" />
                 <Cell title="转让时间" :value="formatDate(details.createtime)" />
                 <Cell title="到期日期" :value="details.enddate" />

src/packages/pc/App.vue

@@ -12,10 +12,11 @@ export default {
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import { logout } from '@/business/common'
+import { useAuth } from '@/business/auth'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import eventBus from '@/services/bus'
 
+const { logout } = useAuth()
 const router = useRouter()
 
 // 接收用户登出通知

src/packages/pc/components/base/table-filter/index.vue

@@ -3,19 +3,19 @@
     <el-form-item v-if="$slots.before">
       <slot name="before"></slot>
     </el-form-item>
-    <el-form-item v-for="item in selectList" :key="item.key" :label="item.label">
+    <el-form-item v-for="item in options.selectList" :key="item.key" :label="item.label">
       <el-select :placeholder="item.placeholder ?? '请选择'" v-model="item.selectedValue" @change="item.onChange">
         <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
       </el-select>
     </el-form-item>
-    <el-form-item v-for="(item, i) in inputList" :key="i" :label="item.label">
-      <el-input :placeholder="item.placeholder ?? '请输入关键字'" v-model="item.value" />
+    <el-form-item v-for="(item, i) in options.inputList" :key="i" :label="item.label">
+      <el-input :type="item.type" :placeholder="item.placeholder ?? '请输入关键字'" v-model="item.value" />
     </el-form-item>
     <el-form-item v-if="$slots.after">
       <slot name="after"></slot>
     </el-form-item>
     <el-form-item>
-      <el-button :class="item.className" v-for="(item, i) in buttonList" :key="i" :disabled="loading"
+      <el-button :class="item.className" v-for="(item, i) in options.buttonList" :key="i" :disabled="loading"
         @click="item.onClick">{{ item.lable }}
       </el-button>
     </el-form-item>
@@ -27,20 +27,12 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { FilterSelect, FilterInput, FilterButton } from '@/hooks/datatable/interface'
+import { FilterOptions } from '@/hooks/datatable/interface'
 
 defineProps({
-  selectList: {
-    type: Array as PropType<FilterSelect[]>,
-    default: () => [],
-  },
-  inputList: {
-    type: Array as PropType<FilterInput[]>,
-    default: () => [],
-  },
-  buttonList: {
-    type: Array as PropType<FilterButton[]>,
-    default: () => [],
+  options: {
+    type: Object as PropType<FilterOptions>,
+    default: () => ({}),
   },
   loading: {
     type: Boolean,

src/packages/pc/views/market/quote/index.vue

@@ -1,7 +1,7 @@
 <template>
   <app-view class="market-quote">
     <template #header>
-      <app-filter v-bind="{ selectList, inputList, buttonList }" />
+      <app-filter :options="filterOptons" />
     </template>
     <!-- 表格数据 -->
     <app-table :data="dataList" v-model:columns="columns" :row-key="rowKey" :expand-row-keys="expandKeys"
@@ -25,7 +25,7 @@
 
 <script lang="ts" setup>
 import { ref, onActivated } from 'vue'
-import { useDataTable } from '@/hooks/datatable'
+import { useDataTable, useDataFilter } from '@/hooks/datatable'
 import { onBeforeRouteLeave } from 'vue-router'
 import { queryGoodsList } from '@/services/api/goods'
 import { useTable } from '@pc/components/base/table'
@@ -36,25 +36,11 @@ import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { selectedRow, rowKey, expandKeys, contextmenu, rowClick, rowContextmenu } = useTable<Model.GoodsRsp>('id');
-const { dataList, selectList, inputList, buttonList } = useDataTable<Model.GoodsRsp>();
+const { dataList, filters } = useDataTable<Model.GoodsRsp>();
+const { filterOptons, getFilterParams } = useDataFilter<Model.GoodsRsp>();
 const quoteSubscribe = subscribe.addQuoteSubscribe(['cu2206', 'cu2207', 'cu2208', 'cu2209', 'cu2301', 'cu2303', 'cu2304']);
 const headerButtons = ['market_quote_add', 'market_quote_delete'];
 
-selectList.value = [
-  {
-    key: 'id',
-    placeholder: '商品合约',
-    options: [
-      { label: '黄金', value: 1000 },
-      { label: '昆特牌', value: 1001 }
-    ],
-  },
-]
-
-inputList.value = [
-  { placeholder: '模糊搜索商品名称', keys: ['goodsName', 'goodsCode'] },
-]
-
 const columns = ref([
   {
     prop: 'id',
@@ -94,6 +80,32 @@ const handleTableButton = (item?: Model.GoodsRsp) => {
   }
 }
 
+const onSearch = (clear = false) => {
+  getFilterParams((params) => {
+    filters.value = params
+  }, clear)
+}
+
+filterOptons.selectList = [
+  {
+    key: 'id',
+    placeholder: '商品合约',
+    options: [
+      { label: '黄金', value: 1000 },
+      { label: '昆特牌', value: 1001 }
+    ],
+  },
+]
+
+filterOptons.inputList = [
+  { placeholder: '模糊搜索商品名称', keys: ['goodsName', 'goodsCode'] },
+]
+
+filterOptons.buttonList = [
+  { lable: '重置', onClick: () => onSearch(true) },
+  { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() }
+]
+
 queryGoodsList({
   success: (res) => {
     dataList.value = res.data;