update

src/business/table/columns.ts

@@ -64,7 +64,6 @@ export const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
         { prop: 'price', label: '价格' },
         { prop: 'totalqty', label: '克拉重量' },
         { prop: 'fixedprice', label: '克拉单价' },
-        { prop: 'operate', label: '操作', width: 180 }
     ]],
     // 挂牌大厅-求购大厅
     ['listing_buyorder', [
@@ -92,7 +91,7 @@ export const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
         { prop: 'price', label: '价格' },
         { prop: 'totalqty', label: '克拉重量' },
         { prop: 'fixedprice', label: '克拉单价' },
-        { prop: 'operate', label: '操作', width: 180 }
+        { prop: 'operate', label: '操作' }
     ]],
     // 挂牌大厅-我的求购
     ['listing_purchaseorder', [

src/business/trade/list.ts

@@ -102,7 +102,6 @@ export function useSaleOrder() {
     const { getUserId } = useLoginStore()
     const { dataList, total, pageIndex, pageSize } = useDataTable<Ermcp.MySellOrderRsp>()
     const loading = shallowRef(false)
-    const columns = shallowRef(getTableColumns('listing_saleorder'))
 
     const filterData = ref<{ history: boolean, date: string[] }>({
         history: false,
@@ -143,7 +142,6 @@ export function useSaleOrder() {
         total,
         pageIndex,
         pageSize,
-        columns,
         filterData,
         categoryList,
         getSaleOrderList,

src/mock/router.ts

@@ -168,24 +168,21 @@ const appmenu = {
                                 title: '我要出售',
                                 code: 'trade_sale_add',
                                 component: 'views/trade/sale/components/add/index.vue',
-                                buttonName: 'add',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                             },
                             {
                                 authType: 3,
                                 title: '详情',
                                 code: 'trade_sale_details',
                                 component: 'views/trade/sale/components/details/index.vue',
-                                buttonName: 'details',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                             },
                             {
                                 authType: 3,
                                 title: '撤销',
                                 code: 'trade_sale_cancel',
                                 component: 'views/trade/sale/components/cancel/index.vue',
-                                buttonName: 'cancel',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                             },
                         ]
                     },

src/packages/pc/App.vue

@@ -1,6 +1,6 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <app-page v-if="isLogin" />
+    <app-page v-if="hasLogin" />
     <router-view v-else />
   </el-config-provider>
 </template>
@@ -23,7 +23,7 @@ import eventBus from '@/services/bus'
 const { getToken } = useLoginStore()
 const route = useRoute()
 const router = useRouter()
-const isLogin = ref(false)
+const hasLogin = ref(false)
 
 // 接收用户登出通知
 eventBus.$on('LogoutNotify', (msg) => {
@@ -38,9 +38,9 @@ eventBus.$on('LogoutNotify', (msg) => {
 watch(() => route.name, (routeName) => {
   const token = getToken()
   if (routeName === 'boot' || routeName === 'login' || !token) {
-    isLogin.value = false
+    hasLogin.value = false
   } else {
-    isLogin.value = true
+    hasLogin.value = true
   }
 })
 </script>

src/packages/pc/components/modules/action-menu/index.vue

@@ -14,8 +14,8 @@
                 </ul>
             </div>
         </teleport>
-        <el-dropdown class="app-action-menu__dropdown" v-else-if="type === 'dropdown'">
-            <el-button type="info" icon="Setting" />
+        <el-dropdown trigger="click" class="app-action-menu__dropdown" v-else-if="type === 'dropdown'">
+            <el-button size="small" icon="MoreFilled" round />
             <template #dropdown>
                 <el-dropdown-menu>
                     <el-dropdown-item :class="item.className" v-for="(item, index) in actionMenus" :key="index"

src/packages/pc/components/modules/auth-operation/index.less

@@ -1,30 +1,30 @@
 .app-auth {
     &__contextmenu {
         position: fixed;
-        z-index : 1000;
-        top     : 0;
-        left    : 0;
-        width   : 100%;
-        height  : 100%;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
 
         ul {
-            position        : absolute;
-            border          : 1px solid #e4e7ed;
-            border-radius   : 4px;
+            position: absolute;
+            border: 1px solid #e4e7ed;
+            border-radius: 4px;
             background-color: #fff;
-            box-shadow      : 0 0 12px 0 rgba(0, 0, 0, .12);
-            overflow        : hidden;
-            padding         : 10px 0;
+            box-shadow: 0 0 12px 0 rgba(0, 0, 0, .12);
+            overflow: hidden;
+            padding: 10px 0;
 
             li {
-                display    : flex;
+                display: flex;
                 align-items: center;
-                color      : var(--el-text-color-regular);
-                cursor     : pointer;
-                padding    : 10px 24px;
+                color: var(--el-text-color-regular);
+                cursor: pointer;
+                padding: 10px 24px;
 
                 &:hover {
-                    color           : var(--el-color-primary);
+                    color: var(--el-color-primary);
                     background-color: var(--el-color-primary-light-9);
                 }
 

src/packages/pc/components/modules/auth-operation/index.vue

@@ -16,8 +16,8 @@
             </div>
         </teleport>
         <div class="app-auth__button" v-else>
-            <el-dropdown v-if="type === 'dropdown'">
-                <el-button type="info" icon="Setting" />
+            <el-dropdown trigger="click" v-if="type === 'dropdown'">
+                <el-button size="small" icon="MoreFilled" round />
                 <template #dropdown>
                     <el-dropdown-menu>
                         <el-dropdown-item :class="item.code" v-for="(item, index) in dataList" :key="index"

src/packages/pc/views/trade/buy/index.vue

@@ -39,7 +39,7 @@ const { loading, dataList, total, pageIndex, pageSize, categoryList, getBuyOrder
 const { tableColumns, rowKey, expandKeys, rowClick } = useComposeTable<Ermcp.BuyOrderRsp>({ rowKey: 'wrtradeorderid', columnKey: 'listing_buyorder' })
 const { asyncComponent, activeMenu, getAuthButtons, openComponent, closeComponent } = useActionMenu<Ermcp.BuyOrderRsp>()
 const { filterOptons, getQueryParams } = useDataFilter<Ermcp.BuyOrderReq>()
-const authMenus = getAuthButtons()
+const tableButtons = getAuthButtons()
 
 filterOptons.selectList = [
     {
@@ -62,9 +62,9 @@ filterOptons.buttonList = [
 const handleOperateButtons = (row?: Ermcp.BuyOrderRsp) => {
     if (row?.userid === getUserId()) {
         // 自己上架的商品不能摘牌
-        return authMenus.filter((e) => !['trade_buy_delisting'].includes(e.code))
+        return tableButtons.filter((e) => !['trade_buy_delisting'].includes(e.code))
     }
-    return authMenus
+    return tableButtons
 }
 
 const onSearch = (clear = false) => {

src/packages/pc/views/trade/sale/index.vue

@@ -12,9 +12,9 @@
             </app-filter>
         </template>
         <!-- 表格数据 -->
-        <app-table :data="dataList" v-model:columns="columns" :loading="loading">
+        <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
             <template #header>
-                <app-auth-operation :menus="['add']" @closed="onRefresh" />
+                <app-action-menu :menus="headerButtons" @click="openComponent" />
             </template>
             <!-- 价格 -->
             <template #price="{ row }">
@@ -26,14 +26,16 @@
             </template>
             <!-- 操作 -->
             <template #operate="{ row }">
-                <app-auth-operation :menus="handleTableButtons(row)" :options="{ selectedRow: row }"
-                    @closed="onRefresh" />
+                <app-action-menu type="dropdown" :menus="handleOperateButtons(row)" :record="row"
+                    @click="openComponent" />
             </template>
             <template #footer>
                 <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                     @change="onRefresh" />
             </template>
         </app-table>
+        <component ref="componentRef" :is="asyncComponent" v-bind="{ selectedRow: activeMenu.record }"
+            @closed="closeComponent" v-if="asyncComponent" />
     </app-view>
 </template>
 
@@ -42,20 +44,27 @@ import { ElMessage } from 'element-plus'
 import { formatDecimal } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
 import { useSaleOrder } from '@/business/trade/list'
+import { useActionMenu } from '@pc/components/modules/action-menu'
+import AppActionMenu from '@pc/components/modules/action-menu/index.vue'
+import { useComposeTable } from '@pc/components/base/table'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
-import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
-const { loading, dataList, total, pageIndex, pageSize, filterData, columns, categoryList, getSaleOrderList } = useSaleOrder()
+const { loading, dataList, total, pageIndex, pageSize, filterData, categoryList, getSaleOrderList } = useSaleOrder()
+const { tableColumns } = useComposeTable<Ermcp.MySellOrderRsp>({ rowKey: 'wrtradeorderid', columnKey: 'listing_saleorder' })
+const { asyncComponent, activeMenu, getAuthButtons, openComponent, closeComponent } = useActionMenu<Ermcp.MySellOrderRsp>({ queryFn: () => onRefresh() })
 const { filterOptons, getQueryParams } = useDataFilter<Ermcp.MySellOrderReq>()
 
+const headerButtons = getAuthButtons(['trade_sale_add'])
+const tableButtons = getAuthButtons(['trade_sale_details', 'trade_sale_cancel'])
+
 // 3:委托成功 7:部成 -  状态有撤销
-const handleTableButtons = (row: Ermcp.MySellOrderRsp) => {
+const handleOperateButtons = (row: Ermcp.MySellOrderRsp) => {
     if ([3, 7].includes(row.wrtradeorderstatus)) {
-        return ['details', 'cancel']
+        return tableButtons
     }
-    return ['details']
+    return tableButtons.filter((e) => e.code !== 'trade_sale_cancel')
 }
 
 const onSearch = (clear = false) => {

src/packages/pc/views/trade/sell/index.vue

@@ -46,17 +46,17 @@ import AppFilter from '@pc/components/base/table-filter/index.vue'
 const { getUserId } = useLoginStore()
 const { hasFavorite } = useFavoriteStore()
 const { loading, dataList, total, pageIndex, pageSize, categoryList, getSellOrderList } = useSellOrder()
-const { tableColumns, rowKey, expandKeys, rowClick } = useComposeTable<Ermcp.SellOrderReq>({ rowKey: 'wrtradeorderid', columnKey: 'listing_sellorder' })
-const { asyncComponent, activeMenu, getAuthButtons, openComponent, closeComponent } = useActionMenu<Ermcp.SellOrderReq>({ queryFn: () => onRefresh() })
+const { tableColumns, rowKey, expandKeys, rowClick } = useComposeTable<Ermcp.SellOrderRsp>({ rowKey: 'wrtradeorderid', columnKey: 'listing_sellorder' })
+const { asyncComponent, activeMenu, getAuthButtons, openComponent, closeComponent } = useActionMenu<Ermcp.SellOrderRsp>({ queryFn: () => onRefresh() })
 const { filterOptons, getQueryParams } = useDataFilter<Ermcp.SellOrderReq>()
-const authMenus = getAuthButtons()
+const tableButtons = getAuthButtons()
 
 // 未收藏的卖委托有收藏按钮
 const handleOperateButtons = (row: Ermcp.SellOrderRsp) => {
     if (hasFavorite(row.goodsno) || row.userid === getUserId()) {
-        return authMenus.filter((e) => e.code !== 'trade_sell_details')
+        return tableButtons.filter((e) => e.code === 'trade_sell_details')
     }
-    return authMenus
+    return tableButtons
 }
 
 const onSearch = (clear = false) => {

src/stores/@next.ts

@@ -1,13 +1,13 @@
 import { reactive, toRefs, UnwrapNestedRefs } from 'vue'
 
 type Getters<T> = {
-    [key in keyof T]: () => unknown
+    [key in keyof T]: () => void
 }
 
 interface Store<S extends object, G extends Getters<G>, A extends object, M extends object> {
     state: UnwrapNestedRefs<S>;
     //getters: { [key in keyof G]: ComputedRef<ReturnType<G[key]>> };
-    getters: G;
+    getters: { readonly [key in keyof G]: ReturnType<G[key]> };
     actions: A;
     methods: M;
 }
@@ -30,11 +30,11 @@ interface StoreOptions<S extends object, G extends Getters<G>, A extends object,
  */
 export function createStore<S extends object, G extends Getters<G>, A extends object, M extends object>(options: StoreOptions<S, G, A, M>) {
     const state = reactive(options.state())
-    const getters = (options.getters ?? {}) as { [key in keyof G]: G[key] }
+    const getters = (options.getters ?? {}) as { readonly [key in keyof G]: ReturnType<G[key]> }
     const actions = (options.actions ?? {}) as { [key in keyof A]: A[key] }
     const methods = (options.methods ?? {}) as { [key in keyof M]: M[key] }
 
-    const store = {
+    const store: Store<S, G, A, M> = {
         state,
         getters,
         actions,
@@ -70,7 +70,7 @@ const store = createStore({
     },
     getters: {
         getUserid() {
-            return 10086
+            return this.state.id
         },
     },
     actions: {
@@ -88,6 +88,7 @@ store.actions.getAllEnumList(10086)
 
 setTimeout(() => {
     console.log(store.state)
+    console.log(store.getters.getUserid)
 }, 2000);
 
 

src/stores/index.ts

@@ -44,4 +44,6 @@ export function useStore() {
         performanceStore: usePerformanceStore(),
         exrateStore: useExrateStore(),
     }
-}
+}
+
+import './@next.ts'