update

src/business/customs/bonded.ts

@@ -50,14 +50,14 @@ export function useBSFWOrderDetail(selectedRow: Ermcp.GZBSFWOrderRsp) {
     const detailList = shallowRef<Ermcp.GZBSFWOrderDetailRsp[]>([])
 
     const columns: Ermcp.TableColumn[] = [
-        { prop: 'ordercontent', label: '内容', show: true },
-        { prop: 'netweigthct', label: '净重(克拉)', show: true },
-        { prop: 'netweigthgm', label: '净重(克)', show: true },
-        { prop: 'grossweightgm', label: '毛重(克)', show: true },
-        { prop: 'perprice', label: '单价(美元/克拉)', width: 180, show: true },
-        { prop: 'totalamount', label: '总值(美元)', show: true },
-        { prop: 'colorinfo', label: '彩钻颜色', show: true },
-        { prop: 'remark', label: '其它', show: true },
+        { prop: 'ordercontent', label: '内容' },
+        { prop: 'netweigthct', label: '净重(克拉)' },
+        { prop: 'netweigthgm', label: '净重(克)' },
+        { prop: 'grossweightgm', label: '毛重(克)' },
+        { prop: 'perprice', label: '单价(美元/克拉)', width: 180 },
+        { prop: 'totalamount', label: '总值(美元)' },
+        { prop: 'colorinfo', label: '彩钻颜色' },
+        { prop: 'remark', label: '其它' },
     ]
 
     const getBSFWOrderDetailList = () => {
@@ -125,8 +125,13 @@ export function useBSFWOrderOperate({ orderid, gzbsstatus }: Ermcp.GZBSFWOrderRs
     const getFworderoperate = () => {
         queryFworderoperate({
             data: {
-                orderid: orderid.toString(),
+                orderid,
                 status: gzbsstatus
+            },
+            success: (res) => {
+                if (res.data.length) {
+                    details.value = res.data[0]
+                }
             }
         })
     }

src/business/customs/exit.ts

@@ -53,26 +53,26 @@ export function useGZCJJCOrderDetail(selectedRow: Ermcp.GZCJJCOrderRsp) {
         switch (selectedRow.gzcjaccounttype) {
             case 1: {
                 return [
-                    { prop: 'gzno', label: '货物编号', show: true },
-                    { prop: 'gzcjshapetypestring', label: '形状', width: 200, show: true },
-                    { prop: 'weight', label: '重量ct', show: true },
-                    { prop: 'amount', label: '参考货值USD', show: true },
-                    { prop: 'colorinfo', label: '彩钻信息', show: true },
-                    { prop: 'remark', label: '其他', show: true },
+                    { prop: 'gzno', label: '货物编号' },
+                    { prop: 'gzcjshapetypestring', label: '形状', width: 200 },
+                    { prop: 'weight', label: '重量ct' },
+                    { prop: 'amount', label: '参考货值USD' },
+                    { prop: 'colorinfo', label: '彩钻信息' },
+                    { prop: 'remark', label: '其他' },
                 ]
             }
             case 2: {
                 return [
-                    { prop: 'gzno', label: '货物编号', show: true },
-                    { prop: 'gzcjshapetypestring', label: '形状', width: 200, show: true },
-                    { prop: 'weight', label: '重量ct', show: true },
-                    { prop: 'amount', label: '参考货值USD', show: true },
-                    { prop: 'gzcjmarktype', label: '刻印服务(证书号/ 其他/ 无)', width: 220, show: true },
-                    { prop: 'gzcjpublishtypestring', label: '是否披露处理', show: true },
-                    { prop: 'gzcjservicetypestring', label: '服务类别', show: true },
-                    { prop: 'OriginCertNo', label: '原证书号', show: true },
-                    { prop: 'colorinfo', label: '彩钻信息', show: true },
-                    { prop: 'remark', label: '其他', show: true },
+                    { prop: 'gzno', label: '货物编号' },
+                    { prop: 'gzcjshapetypestring', label: '形状', width: 200 },
+                    { prop: 'weight', label: '重量ct' },
+                    { prop: 'amount', label: '参考货值USD' },
+                    { prop: 'gzcjmarktype', label: '刻印服务(证书号/ 其他/ 无)', width: 220 },
+                    { prop: 'gzcjpublishtypestring', label: '是否披露处理' },
+                    { prop: 'gzcjservicetypestring', label: '服务类别' },
+                    { prop: 'OriginCertNo', label: '原证书号' },
+                    { prop: 'colorinfo', label: '彩钻信息' },
+                    { prop: 'remark', label: '其他' },
                 ]
             }
         }

src/business/table/columns.ts

@@ -0,0 +1,357 @@
+const tableColumnKeys = ['system_menu', 'system_role', 'warehousing_diamond', 'warehousing_warehouse', 'mine_capital', 'listing_sellorder', 'listing_buyorder', 'listing_saleorder', 'listing_purchaseorder', 'listing_delisting', 'listing_bargain_buy', 'listing_bargain_sell', 'mine_address', 'mine_invoice', 'favorite', 'order', 'order_step', 'bargain_buy', 'bargain_sell', 'customs_cjjc', 'customs_bsfw', 'customs_bsfw_file', 'report_member', 'report_warehousing', 'report_trade'] as const
+
+export type TableColumnKey = typeof tableColumnKeys[number]
+
+/**
+ * PC端表格列
+ */
+export const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
+    // 系统管理-菜单管理
+    ['system_menu', [
+        { prop: 'resourcename', label: '菜单' },
+        { prop: 'resourcecode', label: '代码' },
+        { prop: 'component', label: '组件' },
+        { prop: 'iconame', label: '图标' },
+        { prop: 'operate', label: '操作' }
+    ]],
+    // 系统管理-角色管理
+    ['system_role', [
+        { prop: 'id', label: '序号', width: 100 },
+        { prop: 'roleName', label: '角色名称' },
+        { prop: 'createdAt', label: '创建时间' },
+        { prop: 'updatedAt', label: '更新时间' },
+        { prop: 'operate', label: '操作', width: 300 }
+    ]],
+    // 我的仓储-我的库存
+    ['warehousing_diamond', [
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'weight', label: '克拉重量' },
+        { prop: 'priceper', label: '克拉单价' },
+        { prop: 'marketflag', label: '是否上架' },
+        { prop: 'operate', label: '操作', width: 240 }
+    ]],
+    // 我的仓储-我的仓库
+    ['warehousing_warehouse', [
+        { prop: 'warehousecode', label: '仓库代码' },
+        { prop: 'warehousename', label: '仓库名称' },
+        { prop: 'address', label: '仓库地址' },
+        { prop: 'contactname', label: '联系人' },
+        { prop: 'contactnum', label: '联系电话' },
+        { prop: 'createtime', label: '创建时间' },
+        { prop: 'operate', label: '操作' }
+    ]],
+    // 挂牌大厅-出售大厅
+    ['listing_sellorder', [
+        { prop: 'sellusername', label: '卖方' },
+        { prop: 'warehousenamedisplay', label: '仓库', width: 180 },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'totalqty', label: '克拉重量' },
+        { prop: 'fixedprice', label: '克拉单价' },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 挂牌大厅-求购大厅
+    ['listing_buyorder', [
+        { prop: 'buyusername', label: '买方' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortypedisplay', label: '颜色' },
+        { prop: 'zsclaritytypedisplay', label: '净度' },
+        { prop: 'zscuttypedisplay', label: '切工' },
+        { prop: 'zspolishtypedisplay', label: '抛光' },
+        { prop: 'zssymmetrytypedisplay', label: '对称' },
+        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
+        { prop: 'zssize', label: '尺寸' },
+    ]],
+    // 挂牌大厅-我的出售
+    ['listing_saleorder', [
+        { prop: 'warehousenamedisplay', label: '仓库', width: 180 },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'totalqty', label: '克拉重量' },
+        { prop: 'fixedprice', label: '克拉单价' },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 挂牌大厅-我的求购
+    ['listing_purchaseorder', [
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortypedisplay', label: '颜色' },
+        { prop: 'zsclaritytypedisplay', label: '净度' },
+        { prop: 'zscuttypedisplay', label: '切工' },
+        { prop: 'zspolishtypedisplay', label: '抛光' },
+        { prop: 'zssymmetrytypedisplay', label: '对称' },
+        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
+        { prop: 'zssize', label: '尺寸' },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 挂牌大厅-我的摘牌
+    ['listing_delisting', [
+        { prop: 'buyorsell', label: '类型' },
+        { prop: 'matchusername', label: '对手方' },
+        { prop: 'zsshapetypedisplay', label: '形状' },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'qty', label: '重量' },
+        { prop: 'price', label: '价格' },
+        { prop: 'exchangerate', label: '汇率' },
+        { prop: 'tradeprice', label: '成交价格' },
+        { prop: 'tradetime', label: '成交时间', width: 200 },
+        { prop: 'operate', label: '操作' }
+    ]],
+    // 挂牌大厅-我的询价-求购
+    ['listing_bargain_buy', [
+        { prop: 'sellusername', label: '卖方' },
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'qty', label: '克拉重量' },
+        { prop: 'priceper', label: '克拉单价' },
+        { prop: 'applyprice', label: '我的出价' },
+        { prop: 'applystatus', label: '申请状态' },
+        { prop: 'applytime', label: '申请时间', width: 200 },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 挂牌大厅-我的询价-出售
+    ['listing_bargain_sell', [
+        { prop: 'buyusername', label: '买方' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortypedisplay', label: '颜色' },
+        { prop: 'zsclaritytypedisplay', label: '净度' },
+        { prop: 'zscuttypedisplay', label: '切工' },
+        { prop: 'zspolishtypedisplay', label: '抛光' },
+        { prop: 'zssymmetrytypedisplay', label: '对称' },
+        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
+        { prop: 'zssizedisplay', label: '尺寸' },
+        { prop: 'goodsno', label: '我的商品' },
+        { prop: 'applyqty', label: '克拉重量' },
+        { prop: 'applyprice', label: '我的出价' },
+        { prop: 'applystatus', label: '申请状态' },
+        { prop: 'applytime', label: '申请时间', width: 200 },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 会员中心-我的出入金
+    ['mine_capital', [
+        { prop: 'accountcode', label: '资金账户' },
+        { prop: 'cusbankname', label: '托管银行' },
+        { prop: 'executetype', label: '申请类型' },
+        { prop: 'amount', label: '金额' },
+        { prop: 'charge', label: '服务费' },
+        { prop: 'updatetime', label: '申请时间' },
+        { prop: 'applystatus', label: '状态' },
+    ]],
+    // 会员中心-我的地址
+    ['mine_address', [
+        { prop: 'receivername', label: '收货人' },
+        { prop: 'cardtypeid', label: '证件类型' },
+        { prop: 'cardnum', label: '证件号码' },
+        { prop: 'phonenum', label: '联系电话' },
+        { prop: 'address', label: '收货地址', width: 300 },
+        { prop: 'isdefault', label: '是否默认' },
+        { prop: 'operate', label: '操作', width: 250 }
+    ]],
+    // 会员中心-我的发票
+    ['mine_invoice', [
+        { prop: 'receipttype', label: '发票类型' },
+        { prop: 'username', label: '发票抬头' },
+        { prop: 'taxpayerid', label: '税号' },
+        { prop: 'contactinfo', label: '企业电话' },
+        { prop: 'information', label: '企业信息' },
+        { prop: 'operate', label: '操作' }
+    ]],
+    // 我的收藏
+    ['favorite', [
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状' },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'weight', label: '克拉重量' },
+        { prop: 'priceper', label: '克拉单价' },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 订单管理
+    ['order', [
+        { prop: 'zscategorydisplay', label: '商品分类' },
+        { prop: 'goodsno', label: '商品编号' },
+        { prop: 'zsshapetypedisplay', label: '形状' },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'zspolishtype1display', label: '重量' },
+        { prop: 'price', label: '价格' },
+        { prop: 'accountname', label: '对手方' },
+        { prop: 'paidamount', label: '已付/已付金额' },
+        { prop: 'freezeamountremain', label: '履约剩余冻结' },
+        { prop: 'performancestatus', label: '履约状态' },
+        { prop: 'steptypeid', label: '当前步骤' },
+        { prop: 'remaindays', label: '剩余天数' },
+        { prop: 'operate', label: '操作', width: 380 }
+    ]],
+    // 订单履约步骤
+    ['order_step', [
+        { prop: 'steptypename', label: '名称' },
+        { prop: 'stepdays', label: '天数' },
+        { prop: 'remaindays', label: '剩余天数' },
+        { prop: 'stepvalue', label: '步骤值(%)' },
+        { prop: 'stepamount', label: '金额' },
+        { prop: 'realamount', label: '完成金额' },
+        { prop: 'isauto', label: '是否自动' },
+        { prop: 'steplanchtype', label: '启动类型' },
+        { prop: 'starttime', label: '开始日期' },
+        { prop: 'endtime', label: '结束日期' },
+        { prop: 'stepstatus', label: '步骤状态' },
+        { prop: 'remark', label: '步骤备注' },
+    ]],
+    // 询价消息-求购
+    ['bargain_buy', [
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'qty', label: '克拉重量' },
+        { prop: 'priceper', label: '克拉单价' },
+        { prop: 'buyusername', label: '买方' },
+        { prop: 'applyprice', label: '买方出价' },
+        { prop: 'applystatus', label: '申请状态' },
+        { prop: 'applytime', label: '申请时间', width: 200 },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 询价消息-出售
+    ['bargain_sell', [
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortypedisplay', label: '颜色' },
+        { prop: 'zsclaritytypedisplay', label: '净度' },
+        { prop: 'zscuttypedisplay', label: '切工' },
+        { prop: 'zspolishtypedisplay', label: '抛光' },
+        { prop: 'zssymmetrytypedisplay', label: '对称' },
+        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
+        { prop: 'zssizedisplay', label: '尺寸' },
+        { prop: 'sellusername', label: '卖方' },
+        { prop: 'goodsno', label: '卖方商品' },
+        { prop: 'applyqty', label: '克拉重量' },
+        { prop: 'applyprice', label: '卖方出价' },
+        { prop: 'applystatus', label: '申请状态' },
+        { prop: 'applytime', label: '申请时间', width: 200 },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 交易服务-出境检测
+    ['customs_cjjc', [
+        { prop: 'orderno', label: '单据编号', width: 180 },
+        { prop: 'gzcjcategorytypedisplay', label: '货物品类' },
+        { prop: 'gzcjdeliverytypedisplay', label: '收货方式', width: 200 },
+        { prop: 'gzcjaccount', label: '送检账户' },
+        { prop: 'undefined', label: '总数量(粒)' },
+        { prop: 'undefined', label: '总重量(ct)' },
+        { prop: 'totalamount', label: '总参考值(US$)' },
+        { prop: 'contactname', label: '联系人姓名' },
+        { prop: 'contactphoneno', label: '联系人电话' },
+        { prop: 'gzcjstatusdisplay', label: '单据状态' },
+        { prop: 'operate', label: '操作', width: 260 }
+    ]],
+    // 交易服务-保税服务
+    ['customs_bsfw', [
+        { prop: 'orderno', label: '单据编号', width: 180 },
+        { prop: 'contentrange', label: '内容' },
+        { prop: 'totalnetweigthct', label: '总净重(克拉)' },
+        { prop: 'totalnetweightgm', label: '总净重(克)' },
+        { prop: 'totalgrossweightgm', label: '总毛重(克)' },
+        { prop: 'totalamount', label: '总值(美元)' },
+        { prop: 'priceper', label: '单价(美元/克拉)', width: 160 },
+        { prop: 'undefined', label: '备注' },
+        { prop: 'gzbsstatusdisplay', label: '单据状态' },
+        { prop: 'operate', label: '操作', width: 280 }
+    ]],
+    // 交易服务-保税服务-文件下载
+    ['customs_bsfw_file', [
+        { prop: 'filename', label: '文件名' },
+        { prop: 'operatetime', label: '生成时间' },
+        { prop: 'operate', label: '操作', width: 180 }
+    ]],
+    // 报表-会员报表
+    ['report_member', [
+        { prop: 'reckondate', label: '日期' },
+        { prop: 'accountid', label: '资金账户' },
+        { prop: 'balance', label: '期初余额' },
+        { prop: 'currentbalance', label: '期末余额' },
+        { prop: 'avaiablemoney', label: '可用资金' },
+        { prop: 'avaiableoutmoney', label: '可出资金' },
+        { prop: 'netvalue', label: '当前净值' },
+        { prop: 'inamount', label: '入金金额' },
+        { prop: 'outamount', label: '出金金额' },
+        { prop: 'paycharge', label: '手续费支出' },
+        { prop: 'deliveryamountin', label: '销售收入' },
+        { prop: 'deliveryamountout', label: '购买支出' },
+        { prop: 'otherfreezemargin', label: '其他冻结' },
+        { prop: 'outamountfreeze', label: '出金冻结' },
+    ]],
+    // 报表-仓储报表
+    ['report_warehousing', [
+        { prop: 'reckondate', label: '日期' },
+        { prop: 'zscategorydisplay', label: '商品分类' },
+        { prop: 'zscurrencytypedisplay', label: '商品货币' },
+        { prop: 'totalweight', label: '库存重量(ct)' },
+        { prop: 'totalprice', label: '库存金额' },
+        { prop: 'buytradeqty', label: '购买重量(ct)' },
+        { prop: 'buytradeamount', label: '购买金额(￥)' },
+        { prop: 'selltradeqty', label: '销售重量(ct)' },
+        { prop: 'selltradeamount', label: '销售金额(￥)' },
+    ]],
+    // 报表-交易报表
+    ['report_trade', [
+        { prop: 'reckondate', label: '日期' },
+        { prop: 'zscategorydisplay', label: '商品分类' },
+        { prop: 'zscurrencytypedisplay', label: '商品货币' },
+        { prop: 'buylistinglot', label: '买挂牌宗数' },
+        { prop: 'selllistinglot', label: '卖挂牌宗数' },
+        { prop: 'selllistingqty', label: '卖挂牌数量' },
+        { prop: 'selltradeamount', label: '卖挂牌金额' },
+        { prop: 'buytradeqty', label: '购买重量(ct)' },
+        { prop: 'buytradeamount', label: '购买金额(￥)' },
+        { prop: 'selltradeqty', label: '销售重量(ct)' },
+        { prop: 'selltradeamount', label: '销售金额(￥)' },
+    ]],
+])

src/business/table/index.ts

@@ -1,22 +1,6 @@
 import { shallowRef } from 'vue'
 import { useTableColumnStore } from '@/stores'
-
-/**
- * 获取表格列数据
- * @param tableKey 
- * @returns 
- */
-export function getTableColumns(tableKey: TableColumnKey) {
-    const tableColumns = pcTableColumnMap.get(tableKey) ?? [] // *这里应该判断终端类型，有空再处理*
-
-    return tableColumns.map((e) => {
-        e.show = true
-        if (e.prop === 'operate') {
-            e.fixed = 'right'
-        }
-        return e
-    })
-}
+import { TableColumnKey, pcTableColumnMap } from './columns'
 
 export function useTableColumns(tableKey: string, operateColumn = true) {
     const { tableColumns } = useTableColumnStore()
@@ -53,360 +37,20 @@ export function useTableColumns(tableKey: string, operateColumn = true) {
     }
 }
 
-type TableColumnKey = typeof tableColumnKeys[number]
-const tableColumnKeys = ['system_menu', 'system_role', 'warehousing_diamond', 'warehousing_warehouse', 'mine_capital', 'listing_sellorder', 'listing_buyorder', 'listing_saleorder', 'listing_purchaseorder', 'listing_delisting', 'listing_bargain_buy', 'listing_bargain_sell', 'mine_address', 'mine_invoice', 'favorite', 'order', 'order_step', 'bargain_buy', 'bargain_sell', 'customs_cjjc', 'customs_bsfw', 'customs_bsfw_file', 'report_member', 'report_warehousing', 'report_trade'] as const
-
 /**
- * PC端表格列
+ * 获取表格列数据
+ * @param tableKey 
+ * @returns 
  */
-const pcTableColumnMap = new Map<TableColumnKey, Ermcp.TableColumn[]>([
-    // 系统管理-菜单管理
-    ['system_menu', [
-        { prop: 'resourcename', label: '菜单' },
-        { prop: 'resourcecode', label: '代码' },
-        { prop: 'component', label: '组件' },
-        { prop: 'iconame', label: '图标' },
-        { prop: 'operate', label: '操作' }
-    ]],
-    // 系统管理-角色管理
-    ['system_role', [
-        { prop: 'id', label: '序号', width: 100 },
-        { prop: 'roleName', label: '角色名称' },
-        { prop: 'createdAt', label: '创建时间' },
-        { prop: 'updatedAt', label: '更新时间' },
-        { prop: 'operate', label: '操作', width: 300 }
-    ]],
-    // 我的仓储-我的库存
-    ['warehousing_diamond', [
-        { prop: 'warehousenamedisplay', label: '仓库' },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'weight', label: '克拉重量' },
-        { prop: 'priceper', label: '克拉单价' },
-        { prop: 'marketflag', label: '是否上架' },
-        { prop: 'operate', label: '操作', width: 240 }
-    ]],
-    // 我的仓储-我的仓库
-    ['warehousing_warehouse', [
-        { prop: 'warehousecode', label: '仓库代码' },
-        { prop: 'warehousename', label: '仓库名称' },
-        { prop: 'address', label: '仓库地址' },
-        { prop: 'contactname', label: '联系人' },
-        { prop: 'contactnum', label: '联系电话' },
-        { prop: 'createtime', label: '创建时间' },
-        { prop: 'operate', label: '操作' }
-    ]],
-    // 挂牌大厅-出售大厅
-    ['listing_sellorder', [
-        { prop: 'sellusername', label: '卖方' },
-        { prop: 'warehousenamedisplay', label: '仓库', width: 180 },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'totalqty', label: '克拉重量' },
-        { prop: 'fixedprice', label: '克拉单价' },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 挂牌大厅-求购大厅
-    ['listing_buyorder', [
-        { prop: 'buyusername', label: '买方' },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortypedisplay', label: '颜色' },
-        { prop: 'zsclaritytypedisplay', label: '净度' },
-        { prop: 'zscuttypedisplay', label: '切工' },
-        { prop: 'zspolishtypedisplay', label: '抛光' },
-        { prop: 'zssymmetrytypedisplay', label: '对称' },
-        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
-        { prop: 'zssize', label: '尺寸' },
-        { prop: 'operate', label: '操作' }
-    ]],
-    // 挂牌大厅-我的出售
-    ['listing_saleorder', [
-        { prop: 'warehousenamedisplay', label: '仓库', width: 180 },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'totalqty', label: '克拉重量' },
-        { prop: 'fixedprice', label: '克拉单价' },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 挂牌大厅-我的求购
-    ['listing_purchaseorder', [
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortypedisplay', label: '颜色' },
-        { prop: 'zsclaritytypedisplay', label: '净度' },
-        { prop: 'zscuttypedisplay', label: '切工' },
-        { prop: 'zspolishtypedisplay', label: '抛光' },
-        { prop: 'zssymmetrytypedisplay', label: '对称' },
-        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
-        { prop: 'zssize', label: '尺寸' },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 挂牌大厅-我的摘牌
-    ['listing_delisting', [
-        { prop: 'buyorsell', label: '类型' },
-        { prop: 'matchusername', label: '对手方' },
-        { prop: 'zsshapetypedisplay', label: '形状' },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'qty', label: '重量' },
-        { prop: 'price', label: '价格' },
-        { prop: 'exchangerate', label: '汇率' },
-        { prop: 'tradeprice', label: '成交价格' },
-        { prop: 'tradetime', label: '成交时间', width: 200 },
-        { prop: 'operate', label: '操作' }
-    ]],
-    // 挂牌大厅-我的询价-求购
-    ['listing_bargain_buy', [
-        { prop: 'sellusername', label: '卖方' },
-        { prop: 'warehousenamedisplay', label: '仓库' },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'qty', label: '克拉重量' },
-        { prop: 'priceper', label: '克拉单价' },
-        { prop: 'applyprice', label: '我的出价' },
-        { prop: 'applystatus', label: '申请状态' },
-        { prop: 'applytime', label: '申请时间', width: 200 },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 挂牌大厅-我的询价-出售
-    ['listing_bargain_sell', [
-        { prop: 'buyusername', label: '买方' },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortypedisplay', label: '颜色' },
-        { prop: 'zsclaritytypedisplay', label: '净度' },
-        { prop: 'zscuttypedisplay', label: '切工' },
-        { prop: 'zspolishtypedisplay', label: '抛光' },
-        { prop: 'zssymmetrytypedisplay', label: '对称' },
-        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
-        { prop: 'zssizedisplay', label: '尺寸' },
-        { prop: 'goodsno', label: '我的商品' },
-        { prop: 'applyqty', label: '克拉重量' },
-        { prop: 'applyprice', label: '我的出价' },
-        { prop: 'applystatus', label: '申请状态' },
-        { prop: 'applytime', label: '申请时间', width: 200 },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 会员中心-我的出入金
-    ['mine_capital', [
-        { prop: 'accountcode', label: '资金账户' },
-        { prop: 'cusbankname', label: '托管银行' },
-        { prop: 'executetype', label: '申请类型' },
-        { prop: 'amount', label: '金额' },
-        { prop: 'charge', label: '服务费' },
-        { prop: 'updatetime', label: '申请时间' },
-        { prop: 'applystatus', label: '状态' },
-    ]],
-    // 会员中心-我的地址
-    ['mine_address', [
-        { prop: 'receivername', label: '收货人' },
-        { prop: 'cardtypeid', label: '证件类型' },
-        { prop: 'cardnum', label: '证件号码' },
-        { prop: 'phonenum', label: '联系电话' },
-        { prop: 'address', label: '收货地址', width: 300 },
-        { prop: 'isdefault', label: '是否默认' },
-        { prop: 'operate', label: '操作', width: 250 }
-    ]],
-    // 会员中心-我的发票
-    ['mine_invoice', [
-        { prop: 'receipttype', label: '发票类型' },
-        { prop: 'username', label: '发票抬头' },
-        { prop: 'taxpayerid', label: '税号' },
-        { prop: 'contactinfo', label: '企业电话' },
-        { prop: 'information', label: '企业信息' },
-        { prop: 'operate', label: '操作' }
-    ]],
-    // 我的收藏
-    ['favorite', [
-        { prop: 'warehousenamedisplay', label: '仓库' },
-        { prop: 'zsshapetypedisplay', label: '形状' },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'weight', label: '克拉重量' },
-        { prop: 'priceper', label: '克拉单价' },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 订单管理
-    ['order', [
-        { prop: 'zscategorydisplay', label: '商品分类' },
-        { prop: 'goodsno', label: '商品编号' },
-        { prop: 'zsshapetypedisplay', label: '形状' },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'zspolishtype1display', label: '重量' },
-        { prop: 'price', label: '价格' },
-        { prop: 'accountname', label: '对手方' },
-        { prop: 'paidamount', label: '已付/已付金额' },
-        { prop: 'freezeamountremain', label: '履约剩余冻结' },
-        { prop: 'performancestatus', label: '履约状态' },
-        { prop: 'steptypeid', label: '当前步骤' },
-        { prop: 'remaindays', label: '剩余天数' },
-        { prop: 'operate', label: '操作', width: 380 }
-    ]],
-    // 订单履约步骤
-    ['order_step', [
-        { prop: 'steptypename', label: '名称' },
-        { prop: 'stepdays', label: '天数' },
-        { prop: 'remaindays', label: '剩余天数' },
-        { prop: 'stepvalue', label: '步骤值(%)' },
-        { prop: 'stepamount', label: '金额' },
-        { prop: 'realamount', label: '完成金额' },
-        { prop: 'isauto', label: '是否自动' },
-        { prop: 'steplanchtype', label: '启动类型' },
-        { prop: 'starttime', label: '开始日期' },
-        { prop: 'endtime', label: '结束日期' },
-        { prop: 'stepstatus', label: '步骤状态' },
-        { prop: 'remark', label: '步骤备注' },
-    ]],
-    // 询价消息-求购
-    ['bargain_buy', [
-        { prop: 'warehousenamedisplay', label: '仓库' },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortype1display', label: '颜色' },
-        { prop: 'zsclaritytype1display', label: '净度' },
-        { prop: 'zscuttype1display', label: '切工' },
-        { prop: 'zspolishtype1display', label: '抛光' },
-        { prop: 'zssymmetrytype1display', label: '对称' },
-        { prop: 'zsfluorescencetype1display', label: '荧光' },
-        { prop: 'sizedisplay', label: '尺寸' },
-        { prop: 'price', label: '价格' },
-        { prop: 'qty', label: '克拉重量' },
-        { prop: 'priceper', label: '克拉单价' },
-        { prop: 'buyusername', label: '买方' },
-        { prop: 'applyprice', label: '买方出价' },
-        { prop: 'applystatus', label: '申请状态' },
-        { prop: 'applytime', label: '申请时间', width: 200 },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 询价消息-出售
-    ['bargain_sell', [
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
-        { prop: 'zscolortypedisplay', label: '颜色' },
-        { prop: 'zsclaritytypedisplay', label: '净度' },
-        { prop: 'zscuttypedisplay', label: '切工' },
-        { prop: 'zspolishtypedisplay', label: '抛光' },
-        { prop: 'zssymmetrytypedisplay', label: '对称' },
-        { prop: 'zsfluorescencetypedisplay', label: '荧光' },
-        { prop: 'zssizedisplay', label: '尺寸' },
-        { prop: 'sellusername', label: '卖方' },
-        { prop: 'goodsno', label: '卖方商品' },
-        { prop: 'applyqty', label: '克拉重量' },
-        { prop: 'applyprice', label: '卖方出价' },
-        { prop: 'applystatus', label: '申请状态' },
-        { prop: 'applytime', label: '申请时间', width: 200 },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 交易服务-出境检测
-    ['customs_cjjc', [
-        { prop: 'orderno', label: '单据编号', width: 180 },
-        { prop: 'gzcjcategorytypedisplay', label: '货物品类' },
-        { prop: 'gzcjdeliverytypedisplay', label: '收货方式', width: 200 },
-        { prop: 'gzcjaccount', label: '送检账户' },
-        { prop: 'undefined', label: '总数量(粒)' },
-        { prop: 'undefined', label: '总重量(ct)' },
-        { prop: 'totalamount', label: '总参考值(US$)' },
-        { prop: 'contactname', label: '联系人姓名' },
-        { prop: 'contactphoneno', label: '联系人电话' },
-        { prop: 'gzcjstatusdisplay', label: '单据状态' },
-        { prop: 'operate', label: '操作', width: 260 }
-    ]],
-    // 交易服务-保税服务
-    ['customs_bsfw', [
-        { prop: 'orderno', label: '单据编号', width: 180 },
-        { prop: 'contentrange', label: '内容' },
-        { prop: 'totalnetweigthct', label: '总净重(克拉)' },
-        { prop: 'totalnetweightgm', label: '总净重(克)' },
-        { prop: 'totalgrossweightgm', label: '总毛重(克)' },
-        { prop: 'totalamount', label: '总值(美元)' },
-        { prop: 'priceper', label: '单价(美元/克拉)', width: 160 },
-        { prop: 'undefined', label: '备注' },
-        { prop: 'gzbsstatusdisplay', label: '单据状态' },
-        { prop: 'operate', label: '操作', width: 280 }
-    ]],
-    // 交易服务-保税服务-文件下载
-    ['customs_bsfw_file', [
-        { prop: 'filename', label: '文件名' },
-        { prop: 'operatetime', label: '生成时间' },
-        { prop: 'operate', label: '操作', width: 180 }
-    ]],
-    // 报表-会员报表
-    ['report_member', [
-        { prop: 'reckondate', label: '日期' },
-        { prop: 'accountid', label: '资金账户' },
-        { prop: 'balance', label: '期初余额' },
-        { prop: 'currentbalance', label: '期末余额' },
-        { prop: 'avaiablemoney', label: '可用资金' },
-        { prop: 'avaiableoutmoney', label: '可出资金' },
-        { prop: 'netvalue', label: '当前净值' },
-        { prop: 'inamount', label: '入金金额' },
-        { prop: 'outamount', label: '出金金额' },
-        { prop: 'paycharge', label: '手续费支出' },
-        { prop: 'deliveryamountin', label: '销售收入' },
-        { prop: 'deliveryamountout', label: '购买支出' },
-        { prop: 'otherfreezemargin', label: '其他冻结' },
-        { prop: 'outamountfreeze', label: '出金冻结' },
-    ]],
-    // 报表-仓储报表
-    ['report_warehousing', [
-        { prop: 'reckondate', label: '日期' },
-        { prop: 'zscategorydisplay', label: '商品分类' },
-        { prop: 'zscurrencytypedisplay', label: '商品货币' },
-        { prop: 'totalweight', label: '库存重量(ct)' },
-        { prop: 'totalprice', label: '库存金额' },
-        { prop: 'buytradeqty', label: '购买重量(ct)' },
-        { prop: 'buytradeamount', label: '购买金额(￥)' },
-        { prop: 'selltradeqty', label: '销售重量(ct)' },
-        { prop: 'selltradeamount', label: '销售金额(￥)' },
-    ]],
-    // 报表-交易报表
-    ['report_trade', [
-        { prop: 'reckondate', label: '日期' },
-        { prop: 'zscategorydisplay', label: '商品分类' },
-        { prop: 'zscurrencytypedisplay', label: '商品货币' },
-        { prop: 'buylistinglot', label: '买挂牌宗数' },
-        { prop: 'selllistinglot', label: '卖挂牌宗数' },
-        { prop: 'selllistingqty', label: '卖挂牌数量' },
-        { prop: 'selltradeamount', label: '卖挂牌金额' },
-        { prop: 'buytradeqty', label: '购买重量(ct)' },
-        { prop: 'buytradeamount', label: '购买金额(￥)' },
-        { prop: 'selltradeqty', label: '销售重量(ct)' },
-        { prop: 'selltradeamount', label: '销售金额(￥)' },
-    ]],
-])
+export function getTableColumns(tableKey?: TableColumnKey) {
+    if (tableKey) {
+        const tableColumns = pcTableColumnMap.get(tableKey) ?? [] // *这里应该判断终端类型，有空再处理*
+        return tableColumns.map((e) => {
+            if (e.prop === 'operate') {
+                e.fixed = 'right'
+            }
+            return e
+        })
+    }
+    return []
+}

src/business/trade/desting.ts

@@ -109,18 +109,18 @@ export function useSellOrderBargain(selectedRow: Ermcp.BuyOrderRsp) {
     })
 
     const columns = shallowRef<Ermcp.TableColumn[]>([
-        { prop: 'warehousenamedisplay', label: '仓库', show: true },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200, show: true },
-        { prop: 'zscolortype1display', label: '颜色', show: true },
-        { prop: 'zsclaritytype1display', label: '净度', show: true },
-        { prop: 'zscuttype1display', label: '切工', show: true },
-        { prop: 'zspolishtype1display', label: '抛光', show: true },
-        { prop: 'zssymmetrytype1display', label: '对称', show: true },
-        { prop: 'zsfluorescencetype1display', label: '荧光', show: true },
-        { prop: 'sizedisplay', label: '尺寸', show: true },
-        { prop: 'price', label: '价格', show: true },
-        { prop: 'weight', label: '克拉重量', show: true },
-        { prop: 'priceper', label: '克拉单价', show: true },
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'weight', label: '克拉重量' },
+        { prop: 'priceper', label: '克拉单价' },
     ])
 
     const formSubmit = () => {

src/business/trade/list.ts

@@ -61,7 +61,6 @@ export function useBuyOrder() {
 export function useSellOrder() {
     const { dataList, total, pageIndex, pageSize } = useDataTable<Ermcp.SellOrderRsp>()
     const loading = shallowRef(false)
-    const columns = shallowRef(getTableColumns('listing_sellorder'))
 
     // 获取出售大厅委托单
     const getSellOrderList = async (params: Partial<Ermcp.SellOrderReq> = {}) => {
@@ -91,7 +90,6 @@ export function useSellOrder() {
         total,
         pageIndex,
         pageSize,
-        columns,
         categoryList,
         getSellOrderList,
     }

src/business/trade/listing.ts

@@ -119,17 +119,17 @@ export function useSellOrderListing(selectedRow?: Ermcp.MyWRPositionRsp) {
     ]
 
     const columns = shallowRef<Ermcp.TableColumn[]>([
-        { prop: 'warehousenamedisplay', label: '仓库', show: true },
-        { prop: 'zsshapetypedisplay', label: '形状', width: 200, show: true },
-        { prop: 'zscolortype1display', label: '颜色', show: true },
-        { prop: 'zsclaritytype1display', label: '净度', show: true },
-        { prop: 'zscuttype1display', label: '切工', show: true },
-        { prop: 'zspolishtype1display', label: '抛光', show: true },
-        { prop: 'zssymmetrytype1display', label: '对称', show: true },
-        { prop: 'zsfluorescencetype1display', label: '荧光', show: true },
-        { prop: 'sizedisplay', label: '尺寸', show: true },
-        { prop: 'price', label: '价格', show: true },
-        { prop: 'weight', label: '克拉重量', show: true },
+        { prop: 'warehousenamedisplay', label: '仓库' },
+        { prop: 'zsshapetypedisplay', label: '形状', width: 200 },
+        { prop: 'zscolortype1display', label: '颜色' },
+        { prop: 'zsclaritytype1display', label: '净度' },
+        { prop: 'zscuttype1display', label: '切工' },
+        { prop: 'zspolishtype1display', label: '抛光' },
+        { prop: 'zssymmetrytype1display', label: '对称' },
+        { prop: 'zsfluorescencetype1display', label: '荧光' },
+        { prop: 'sizedisplay', label: '尺寸' },
+        { prop: 'price', label: '价格' },
+        { prop: 'weight', label: '克拉重量' },
     ])
 
     const formData = reactive<Proto.ZSSellOrderListingReq>({

src/hooks/menu/index.ts

@@ -1,4 +1,4 @@
-import { shallowRef, defineAsyncComponent, Component } from 'vue'
+import { defineAsyncComponent, Component } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores'
 import { AuthType } from '@/constants/menu'
@@ -8,7 +8,6 @@ export function useMenu(authCode?: string) {
     const route = useRoute()
     const router = useRouter()
     const componentMap = new Map<string, Component>()
-    const componentId = shallowRef<string>() // 当前选中的组件
 
     // 过滤菜单
     const filterMenu = (data: Ermcp.UserMenu[], parentPath = '') => {
@@ -132,7 +131,6 @@ export function useMenu(authCode?: string) {
         router,
         userMenus,
         componentMap,
-        componentId,
         getMenus,
         getChildrenMenus,
         getAuthButtons,

src/mock/router.ts

@@ -116,16 +116,14 @@ const appmenu = {
                                 title: '详情',
                                 code: 'trade_sell_details',
                                 component: 'views/warehousing/goods/components/details/index.vue',
-                                buttonName: 'details',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                             },
                             {
                                 authType: 3,
                                 title: '收藏',
                                 code: 'trade_sell_favorite',
                                 component: 'views/warehousing/goods/components/favorite/index.vue',
-                                buttonName: 'favorite',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                             },
                         ]
                     },
@@ -143,16 +141,14 @@ const appmenu = {
                                 title: '详情',
                                 code: 'trade_buy_details',
                                 component: 'views/trade/buy/components/details/index.vue',
-                                buttonName: 'details',
-                                buttonType: 'primary',
+                                className: 'el-button--primary',
                                 children: [
                                     {
                                         authType: 2,
                                         title: '摘牌',
                                         code: 'trade_buy_delisting',
                                         component: 'views/trade/buy/components/delisting/index.vue',
-                                        buttonName: 'delisting',
-                                        buttonType: 'primary',
+                                        className: 'el-button--primary',
                                     },
                                 ]
                             },

src/packages/pc/components/base/table/index.less

@@ -1,16 +1,20 @@
 .app-table {
     &__header {
-        margin-bottom: 20px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
 
-        >div {
-            display: flex;
+        >.block {
+            display: inline-flex;
             align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
 
-            >*:not(:first-child):last-child {
-                margin-left: 10px;
+            &:empty {
+                display: none;
+            }
+
+            &--right {
+                margin-left: auto;
             }
         }
     }
@@ -65,8 +69,11 @@
         }
 
         &__expanded-cell {
-            .app-auth__button {
-                text-align: right;
+            .app-action-menu {
+                position: sticky;
+                right: 5px;
+                display: table;
+                margin-left: auto;
             }
         }
     }

src/packages/pc/components/base/table/index.ts

@@ -1,42 +1,47 @@
 import { ref, shallowRef } from 'vue'
 import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
+import { getTableColumns } from '@/business/table'
+import { ComposeTableOptions } from './interface'
 
 /**
- * 处理表格组件
+ * 组合表格函数
  * @param rowKey 表格主键key
  */
-export function useTable<T>(rowKey: keyof T) {
+export function useComposeTable<T>({ rowKey, columnKey }: ComposeTableOptions<T>) {
     // 表格选中的行数据
-    const selectedRow = ref<T>();
+    const selectedRow = ref<T>()
+
+    // 获取表格列数据
+    const tableColumns = shallowRef(getTableColumns(columnKey))
 
     // 表格展开行，对应 row-key 中的值
-    const expandKeys = shallowRef<T[keyof T][]>([]);
+    const expandKeys = shallowRef<T[keyof T][]>([])
 
     // 右键菜单
     const contextmenu = ref({
         show: false,
         clientX: 0,
         clientY: 0,
-    });
+    })
 
     // 表格行点击事件
     const rowClick = (row: T) => {
-        const keyValue = row[rowKey];
+        const keyValue = row[rowKey]
         if (expandKeys.value.includes(keyValue)) {
-            expandKeys.value = [];
+            expandKeys.value = []
         } else {
-            expandKeys.value = [keyValue];
+            expandKeys.value = [keyValue]
         }
-        selectedRow.value = row;
+        selectedRow.value = row
     }
 
     // 表格右键事件
     const rowContextmenu = (row: T, column: TableColumnCtx<T>, event: MouseEvent) => {
         // 阻止浏览器右键
-        event.preventDefault();
+        event.preventDefault()
 
         // 表格选中的行数据
-        selectedRow.value = row;
+        selectedRow.value = row
 
         // 显示表格右键菜单
         contextmenu.value = {
@@ -48,6 +53,7 @@ export function useTable<T>(rowKey: keyof T) {
 
     return {
         rowKey,
+        tableColumns,
         expandKeys,
         selectedRow,
         contextmenu,

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

@@ -1,15 +1,17 @@
 <template>
   <div class="app-table" v-loading="loading">
-    <div class="app-table__header" v-if="showHeader">
-      <div>
+    <div class="app-table__header">
+      <div class="block block--left">
         <slot name="header"></slot>
       </div>
-      <!-- <div>
-        <el-button-group>
-          <el-button icon="Refresh" @click="refresh" />
-          <el-button icon="Setting" @click="showTableSetting = true" />
-        </el-button-group>
-      </div> -->
+      <div class="block block--right" v-if="showToolbar">
+        <slot name="toolbar">
+          <el-button-group>
+            <el-button icon="Refresh" @click="refresh" />
+            <el-button icon="Setting" @click="showTableSetting = true" />
+          </el-button-group>
+        </slot>
+      </div>
     </div>
     <div class="app-table__container">
       <el-table ref="tableRef" :header-cell-class-name="selectionType" v-bind="$attrs" highlight-current-row
@@ -26,7 +28,7 @@
         <template v-for="(item, index) in columns" :key="index">
           <el-table-column :class-name="item.className" :align="item.align ?? 'center'" :min-width="120"
             :width="item.width" :label="item.label" :prop="item.prop" :fixed="item.fixed || false"
-            :sortable="item.sortable" show-overflow-tooltip v-if="item.show">
+            :sortable="item.sortable" show-overflow-tooltip v-if="item.show ?? true">
             <template #default="{ row, $index }">
               <slot :name="item.prop" :row="row" :value="row[item.prop]" :index="$index">
                 {{ handleNoneValue(row[item.prop]) }}
@@ -60,7 +62,8 @@ export default defineComponent({
       type: Array as PropType<Ermcp.TableColumn[]>,
       default: () => ([])
     },
-    showHeader: {
+    // 是否显示头部工具栏
+    showToolbar: {
       type: Boolean,
       default: true
     },

src/packages/pc/components/base/table/interface.ts

@@ -0,0 +1,9 @@
+import { TableColumnKey } from '@/business/table/columns'
+
+/**
+ * 组合表格配置项
+ */
+export interface ComposeTableOptions<T> {
+    rowKey: keyof T;
+    columnKey?: TableColumnKey;
+}

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

@@ -0,0 +1,47 @@
+.app-action-menu {
+    &__contextmenu {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        ul {
+            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;
+
+            li {
+                display: flex;
+                align-items: center;
+                color: var(--el-text-color-regular);
+                cursor: pointer;
+                padding: 10px 24px;
+
+                &:hover {
+                    color: var(--el-color-primary);
+                    background-color: var(--el-color-primary-light-9);
+                }
+
+                .el-icon {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    &__button {
+        ul {
+            display: inline-flex;
+
+            li:not(:first-child) {
+                margin-left: 10px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+import { shallowRef, computed } from 'vue'
+import { useMenu } from '@/hooks/menu'
+import { ActionMenu, ActionMenuOptions } from './interface'
+
+export function useActionMenu<T>(options: ActionMenuOptions = {}) {
+    const { authCode, preventDefault = true, queryFn } = options
+    const { componentMap, getAuthButtons } = useMenu(authCode)
+
+    // 当前激活的菜单
+    const activeMenu = shallowRef<Partial<ActionMenu<T>>>({})
+
+    // 当前打开的组件
+    const asyncComponent = computed(() => {
+        const { name = '' } = activeMenu.value
+        return componentMap.get(name)
+    })
+
+    // 打开组件
+    const openComponent = (e: ActionMenu<T>) => {
+        if (preventDefault) {
+            e.disabled = true
+        }
+        activeMenu.value = e
+    }
+
+    // 关闭组件
+    const closeComponent = (refresh: boolean) => {
+        const name = activeMenu.value.name
+        if (preventDefault) {
+            activeMenu.value.disabled = false
+        }
+        activeMenu.value = {}
+        refresh && queryFn && queryFn(name)
+    }
+
+    return {
+        componentMap,
+        asyncComponent,
+        activeMenu,
+        getAuthButtons,
+        openComponent,
+        closeComponent,
+    }
+}

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

@@ -1,7 +1,7 @@
 <template>
-    <div class="app-auth-group">
+    <div class="app-action-menu">
         <teleport to="body" v-if="type === 'contextmenu'">
-            <div class="app-auth-group__contextmenu" @contextmenu.prevent.capture @click="closeContextmenu"
+            <div class="app-action-menu__contextmenu" @contextmenu.prevent.capture @click="closeContextmenu"
                 v-show="contextmenuOptions.show">
                 <ul :style="styles">
                     <li :class="item.className" v-for="(item, index) in actionMenus" :key="index"
@@ -14,21 +14,21 @@
                 </ul>
             </div>
         </teleport>
-        <el-dropdown class="app-auth-group__dropdown" v-else-if="type === 'dropdown'">
+        <el-dropdown class="app-action-menu__dropdown" v-else-if="type === 'dropdown'">
             <el-button type="info" icon="Setting" />
             <template #dropdown>
                 <el-dropdown-menu>
                     <el-dropdown-item :class="item.className" v-for="(item, index) in actionMenus" :key="index"
-                        :icon="item.icon" @click="onClick(item, index)">
+                        :icon="item.icon" @click.stop="onClick(item, index)">
                         {{ item.label }}
                     </el-dropdown-item>
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <div class="app-auth-group__btnbar" v-else>
+        <div class="app-action-menu__btnbar" v-else>
             <template v-for="(item, index) in actionMenus" :key="index">
                 <el-button :class="item.className" :type="item.type" :disabled="item.disabled"
-                    @click="onClick(item, index)" :link="linkButton">
+                    @click.stop="onClick(item, index)" :link="linkButton">
                     <el-icon v-if="item.icon">
                         <component :is="item.icon" />
                     </el-icon>
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, reactive, computed, watch, PropType, onMounted } from 'vue'
+import { ref, shallowRef, computed, PropType, watchEffect } from 'vue'
 import { ActionMenu } from './interface'
 
 const props = defineProps({
@@ -73,7 +73,7 @@ const props = defineProps({
 
 const emit = defineEmits(['click'])
 const contextmenuOptions = shallowRef(props.contextmenu)
-const actionMenus = reactive<ActionMenu[]>([])
+const actionMenus = ref<ActionMenu[]>([])
 
 // 右键菜单坐标
 const styles = computed(() => {
@@ -90,21 +90,23 @@ const closeContextmenu = () => {
 }
 
 const onClick = (item: ActionMenu, index: number) => {
+    item.record = props.record
     closeContextmenu()
-    emit('click', item, props.record, index)
+    emit('click', item, index)
 }
 
-onMounted(() => {
-    props.menus.forEach((e) => {
-        actionMenus.push({
-            name: e.code,
-            label: e.title,
-            icon: e.icon,
-            className: e.className,
-            hide: e.hidden,
-        })
-    })
+watchEffect(() => {
+    actionMenus.value = props.menus.map((e) => ({
+        name: e.code,
+        label: e.title,
+        icon: e.icon,
+        className: e.className,
+        hide: e.hidden,
+    }))
+    contextmenuOptions.value = props.contextmenu
 })
+</script>
 
-watch(() => props.contextmenu, (options) => contextmenuOptions.value = options)
-</script>
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/components/modules/action-menu/interface.ts

@@ -0,0 +1,16 @@
+export interface ActionMenu<T = unknown> {
+    name: string;
+    label: string;
+    type?: string;
+    className?: string;
+    icon?: string;
+    disabled?: boolean;
+    hide?: boolean;
+    record?: T;
+}
+
+export interface ActionMenuOptions {
+    authCode?: string;
+    queryFn?: (name?: string) => void;
+    preventDefault?: boolean; // 阻止按钮事件重复提交
+}

src/packages/pc/components/modules/auth-group/interface.ts

@@ -1,9 +0,0 @@
-export interface ActionMenu {
-    name: string;
-    label: string;
-    type?: string;
-    className?: string;
-    icon?: string;
-    disabled?: boolean;
-    hide?: boolean;
-}

src/packages/pc/views/customs/bonded/components/details/index.vue

@@ -1,7 +1,7 @@
 <!-- 交易服务-保税服务-详情 -->
 <template>
     <app-drawer class="bonded-exit-details" title="详情" :width="960" v-model:show="show">
-        <app-table :data="detailList" :columns="columns" :loading="loading" :show-header="false" border />
+        <app-table :data="detailList" :columns="columns" :loading="loading" :show-toolbar="false" border />
     </app-drawer>
 </template>
 

src/packages/pc/views/customs/bonded/components/download/index.vue

@@ -1,7 +1,7 @@
 <!-- 交易服务-出境检测-文件下载 -->
 <template>
     <app-drawer title="下载" :width="800" v-model:show="show">
-        <app-table :data="dataList" :loading="loading" :columns="columns" :show-header="false" border>
+        <app-table :data="dataList" :loading="loading" :columns="columns" :show-toolbar="false" border>
             <!-- 生成时间 -->
             <template #operatetime="{ value }">
                 {{ formatDate(value) }}

src/packages/pc/views/customs/exit/components/advance-payment/index.vue

@@ -3,7 +3,7 @@
     <app-drawer title="确认预付款" :width="800" v-model:show="show" :loading="loading" :refresh="refresh">
         <el-descriptions :column="2" border v-if="details">
             <el-descriptions-item label="单据编号">{{ selectedRow.orderidstr }}</el-descriptions-item>
-            <el-descriptions-item label="GIA检测费">{{ details.giausdfee }}{{ details.giarmbfee }}</el-descriptions-item>
+            <el-descriptions-item label="GIA检测费">{{ details.giarmbfee }}</el-descriptions-item>
             <el-descriptions-item label="海关税费">{{ details.customsfee }}</el-descriptions-item>
             <el-descriptions-item label="汇款银行手续费">{{ details.bankfee }}</el-descriptions-item>
             <el-descriptions-item label="代缴物流保险费">{{ details.logisticsfee }}</el-descriptions-item>

src/packages/pc/views/customs/exit/components/details/index.vue

@@ -29,7 +29,7 @@
         <h3 class="el-descriptions__header">
             <span class="el-descriptions__title">批次信息</span>
         </h3>
-        <app-table :data="detailList" :columns="columns" :loading="loading" :show-header="false" border>
+        <app-table :data="detailList" :columns="columns" :loading="loading" :show-toolbar="false" border>
             <!-- 刻印服务(证书号/ 其他/ 无) -->
             <template #gzcjmarktype="{ value }">
                 {{ getGZCJMarkTypeName(value) }}

src/packages/pc/views/customs/exit/components/download/index.vue

@@ -1,7 +1,7 @@
 <!-- 交易服务-出境检测-文件下载 -->
 <template>
     <app-drawer title="下载" :width="800" v-model:show="show">
-        <app-table :data="dataList" :loading="loading" :columns="columns" :show-header="false" border>
+        <app-table :data="dataList" :loading="loading" :columns="columns" :show-toolbar="false" border>
             <!-- 生成时间 -->
             <template #operatetime="{ value }">
                 {{ formatDate(value) }}

src/packages/pc/views/customs/exit/components/edit/index.less

@@ -7,11 +7,4 @@
         padding: 15px;
         margin-bottom: 20px;
     }
-
-    &__table {
-        .btnbar {
-            text-align: right;
-            margin-bottom: 12px;
-        }
-    }
 }

src/packages/pc/views/customs/exit/components/edit/index.vue

@@ -63,13 +63,14 @@
         </el-form>
         <div class="customs-exit-edit__table"
             v-if="formData.GZCJAccountType === 2 ? !!formData.GZCJCategoryType : !!formData.GZCJAccountType">
-            <div class="btnbar">
-                <!-- <el-button size="small">导入</el-button> -->
-                <el-button size="small" @click="openEdit()">新增</el-button>
-                <el-button size="small" @click="clearList()">清空</el-button>
-            </div>
-            <app-table :data="formData.GZCJCategoryDetails" :columns="columns" :max-height="400" :show-header="false"
-                border>
+            <app-table :data="formData.GZCJCategoryDetails" :columns="columns" :max-height="400" border>
+                <template #toolbar>
+                    <el-button-group>
+                        <!-- <el-button size="small">导入</el-button> -->
+                        <el-button size="small" @click="openEdit()">新增</el-button>
+                        <el-button size="small" @click="clearList()">清空</el-button>
+                    </el-button-group>
+                </template>
                 <!-- 形状 -->
                 <template #GZCJShapeType="{ value }">
                     {{ getGZCJShapeTypeName(value) }}
@@ -136,28 +137,28 @@ const columns = computed<Ermcp.TableColumn[]>(() => {
     switch (formData.GZCJAccountType) {
         case 1: {
             return [
-                { prop: 'GZNo', label: '货物编号', show: true },
-                { prop: 'GZCJShapeType', label: '形状', width: 200, show: true },
-                { prop: 'Weight', label: '重量ct', show: true },
-                { prop: 'Amount', label: '参考货值USD', show: true },
-                { prop: 'ColorInfo', label: '彩钻信息', show: true },
-                { prop: 'Remark', label: '其他', show: true },
-                { prop: 'operate', label: '操作', width: 160, fixed: 'right', show: true }
+                { prop: 'GZNo', label: '货物编号' },
+                { prop: 'GZCJShapeType', label: '形状', width: 200 },
+                { prop: 'Weight', label: '重量ct' },
+                { prop: 'Amount', label: '参考货值USD' },
+                { prop: 'ColorInfo', label: '彩钻信息' },
+                { prop: 'Remark', label: '其他' },
+                { prop: 'operate', label: '操作', width: 160, fixed: 'right' }
             ]
         }
         case 2: {
             return [
-                { prop: 'GZNo', label: '货物编号', show: true },
-                { prop: 'GZCJShapeType', label: '形状', width: 200, show: true },
-                { prop: 'Weight', label: '重量ct', show: true },
-                { prop: 'Amount', label: '参考货值USD', show: true },
-                { prop: 'GZCJMarkType', label: '刻印服务(证书号/ 其他/ 无)', width: 220, show: true },
-                { prop: 'GZCJPublishType', label: '是否披露处理', show: true },
-                { prop: 'GZCJServiceType', label: '服务类别', show: true },
-                { prop: 'OriginCertNo', label: '原证书号', show: true },
-                { prop: 'ColorInfo', label: '彩钻信息', show: true },
-                { prop: 'Remark', label: '其他', show: true },
-                { prop: 'operate', label: '操作', width: 160, fixed: 'right', show: true }
+                { prop: 'GZNo', label: '货物编号' },
+                { prop: 'GZCJShapeType', label: '形状', width: 200 },
+                { prop: 'Weight', label: '重量ct' },
+                { prop: 'Amount', label: '参考货值USD' },
+                { prop: 'GZCJMarkType', label: '刻印服务(证书号/ 其他/ 无)', width: 220 },
+                { prop: 'GZCJPublishType', label: '是否披露处理' },
+                { prop: 'GZCJServiceType', label: '服务类别' },
+                { prop: 'OriginCertNo', label: '原证书号' },
+                { prop: 'ColorInfo', label: '彩钻信息' },
+                { prop: 'Remark', label: '其他' },
+                { prop: 'operate', label: '操作', width: 160, fixed: 'right' }
             ]
         }
     }

src/packages/pc/views/customs/exit/components/payment/index.vue

@@ -5,7 +5,7 @@
             <el-descriptions-item label="单据编号">{{ selectedRow.orderidstr }}</el-descriptions-item>
             <el-descriptions-item label="综合服务费">{{ details.servicefee }}</el-descriptions-item>
             <el-descriptions-item label="代缴物流保险费">{{ details.logisticsfee }}</el-descriptions-item>
-            <el-descriptions-item label="GIA检测费">{{ details.giausdfee }}{{ details.giarmbfee }}</el-descriptions-item>
+            <el-descriptions-item label="GIA检测费">{{ details.giarmbfee }}</el-descriptions-item>
             <el-descriptions-item label="海关税费">{{ details.customsfee }}</el-descriptions-item>
             <el-descriptions-item label="汇款银行手续费">{{ details.bankfee }}</el-descriptions-item>
             <el-descriptions-item label="其它费用">{{ details.otherfee }}</el-descriptions-item>

src/packages/pc/views/order/main/components/details/index.vue

@@ -73,7 +73,7 @@
                             <span>步骤列表</span>
                         </div>
                     </template>
-                    <app-table :data="dataList" :columns="columns" :show-header="false" :row-style="rowStyle" border>
+                    <app-table :data="dataList" :columns="columns" :show-toolbar="false" :row-style="rowStyle" border>
                         <!-- 步骤值 -->
                         <template #stepvalue="{ value }">
                             {{ (value * 100).toFixed(1) }}

src/packages/pc/views/search/diamond/index.vue

@@ -50,7 +50,7 @@
                 </el-form-item>
             </el-form>
         </template>
-        <app-table :data="dataList" v-model:columns="columns" :show-header="false" :loading="loading">
+        <app-table :data="dataList" v-model:columns="columns" :show-toolbar="false" :loading="loading">
             <!-- 价格 -->
             <template #price="{ row }">
                 {{ row.zscurrencytypedisplayunit + formatDecimal(row.price) }}

src/packages/pc/views/search/fancy/index.vue

@@ -47,7 +47,7 @@
                 </el-form-item>
             </el-form>
         </template>
-        <app-table :data="dataList" v-model:columns="columns" :show-header="false" :loading="loading">
+        <app-table :data="dataList" v-model:columns="columns" :show-toolbar="false" :loading="loading">
             <!-- 价格 -->
             <template #price="{ row }">
                 {{ row.zscurrencytypedisplayunit + formatDecimal(row.price) }}

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

@@ -6,7 +6,7 @@
                 <span>我的钻石</span>
             </div>
         </template>
-        <app-table :data="dataList" :columns="columns" :show-header="false" selection-type="single" border
+        <app-table :data="dataList" :columns="columns" :show-toolbar="false" selection-type="single" border
             @select="onTableSelect">
             <!-- 价格 -->
             <template #price="{ row }">

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

@@ -1,94 +0,0 @@
-<!-- 挂牌大厅-求购大厅 -->
-<template>
-    <app-view>
-        <template #header>
-            <app-filter :options="filterOptons" :loading="loading" />
-        </template>
-        <!-- 表格数据 -->
-        <app-table :data="dataList" v-model:columns="columns" :loading="loading">
-            <!-- 操作 -->
-            <template #operate="{ row }">
-                <app-auth-group :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="componentMap.get(componentId)" v-bind="{ selectedRow }"
-            @closed="closeComponent" v-if="componentId" />
-    </app-view>
-</template>
-
-<script lang="ts" setup>
-import { ElMessage } from 'element-plus'
-import { useDataFilter } from '@/hooks/datatable'
-import { useBuyOrder } from '@/business/trade/list'
-import { useLoginStore } from '@/stores'
-import { useMenu } from '@/hooks/menu'
-import { useTable } from '@pc/components/base/table'
-import { ActionMenu } from '@pc/components/modules/auth-group/interface'
-import AppAuthGroup from '@pc/components/modules/auth-group/index.vue'
-import AppTable from '@pc/components/base/table/index.vue'
-import AppPagination from '@pc/components/base/pagination/index.vue'
-import AppFilter from '@pc/components/base/table-filter/index.vue'
-
-const { getUserId } = useLoginStore()
-const { componentMap, componentId, getAuthButtons } = useMenu()
-const { selectedRow } = useTable<Ermcp.SellOrderRsp>('uuid')
-const { loading, dataList, columns, total, pageIndex, pageSize, categoryList, getBuyOrderList } = useBuyOrder()
-const { filterOptons, getQueryParams } = useDataFilter<Ermcp.BuyOrderReq>()
-const actionMenus = getAuthButtons()
-
-filterOptons.selectList = [
-    {
-        label: '商品分类',
-        key: 'zscategorys',
-        options: categoryList,
-    },
-]
-
-filterOptons.inputList = [
-    { label: '买方', keys: ['buyusername'] },
-    { label: '商品', keys: ['zsallproperties'] },
-]
-
-filterOptons.buttonList = [
-    { lable: '重置', onClick: () => onSearch(true) },
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() }
-]
-
-const handleOperateButtons = (row: Ermcp.SellOrderRsp) => {
-    if (row.userid === getUserId()) {
-        // 自己上架的商品不能摘牌
-        return actionMenus.filter((e) => !['trade_buy_delisting'].includes(e.code))
-    }
-    return actionMenus
-}
-
-const openComponent = (e: ActionMenu, row: Ermcp.SellOrderRsp) => {
-    selectedRow.value = row
-    componentId.value = e.name
-}
-
-const closeComponent = (refresh: boolean) => {
-    componentId.value = undefined
-    selectedRow.value = undefined
-    refresh && onRefresh()
-}
-
-const onSearch = (clear = false) => {
-    getQueryParams((qs) => {
-        pageIndex.value = 1
-        getBuyOrderList(qs)
-    }, clear)
-}
-
-const onRefresh = () => {
-    getQueryParams((qs) => {
-        getBuyOrderList(qs).catch((err) => ElMessage.error(err))
-    })
-}
-
-onRefresh()
-</script>

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

@@ -5,17 +5,20 @@
             <app-filter :options="filterOptons" :loading="loading" />
         </template>
         <!-- 表格数据 -->
-        <app-table :data="dataList" v-model:columns="columns" :loading="loading">
-            <!-- 操作 -->
+        <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
+            :expand-row-keys="expandKeys" @row-click="rowClick">
+            <!-- 展开行 -->
             <template #expand="{ row }">
-                <app-auth-operation :menus="handleOperateButtons(row)" :options="{ selectedRow: row }"
-                    @closed="onRefresh" />
+                <app-action-menu :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="{ code: activeMenu.name, selectedRow: activeMenu.record }" @closed="closeComponent"
+            v-if="asyncComponent" />
     </app-view>
 </template>
 
@@ -24,36 +27,19 @@ import { ElMessage } from 'element-plus'
 import { useDataFilter } from '@/hooks/datatable'
 import { useBuyOrder } from '@/business/trade/list'
 import { useLoginStore } from '@/stores'
-import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
+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 AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { getUserId } = useLoginStore()
-const { loading, dataList, columns, total, pageIndex, pageSize, categoryList, getBuyOrderList } = useBuyOrder()
+const { loading, dataList, total, pageIndex, pageSize, categoryList, getBuyOrderList } = useBuyOrder()
+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 operateButtons = ['details', 'delisting']
-
-const handleOperateButtons = (row: Ermcp.SellOrderRsp) => {
-    if (row.userid === getUserId()) {
-        // 自己上架的商品不能摘牌
-        return operateButtons.filter((code) => !['delisting'].includes(code))
-    }
-    return operateButtons
-}
-
-const onSearch = (clear = false) => {
-    getQueryParams((qs) => {
-        pageIndex.value = 1
-        getBuyOrderList(qs)
-    }, clear)
-}
-
-const onRefresh = () => {
-    getQueryParams((qs) => {
-        getBuyOrderList(qs).catch((err) => ElMessage.error(err))
-    })
-}
+const authMenus = getAuthButtons()
 
 filterOptons.selectList = [
     {
@@ -73,5 +59,26 @@ filterOptons.buttonList = [
     { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() }
 ]
 
+const handleOperateButtons = (row?: Ermcp.BuyOrderRsp) => {
+    if (row?.userid === getUserId()) {
+        // 自己上架的商品不能摘牌
+        return authMenus.filter((e) => !['trade_buy_delisting'].includes(e.code))
+    }
+    return authMenus
+}
+
+const onSearch = (clear = false) => {
+    getQueryParams((qs) => {
+        pageIndex.value = 1
+        getBuyOrderList(qs)
+    }, clear)
+}
+
+const onRefresh = () => {
+    getQueryParams((qs) => {
+        getBuyOrderList(qs).catch((err) => ElMessage.error(err))
+    })
+}
+
 onRefresh()
 </script>

src/packages/pc/views/trade/purchase/components/details/index.vue

@@ -74,7 +74,7 @@
                             <span>询价信息</span>
                         </div>
                     </template>
-                    <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
+                    <app-table :data="dataList" v-model:columns="columns" :show-toolbar="false" border>
                         <!-- 申请状态 -->
                         <template #applystatus="{ value }">
                             {{ getApplyStatusName(value) }}
@@ -123,13 +123,13 @@ const { getPerformanceTemplateById } = usePerformanceStore()
 
 const dataList = shallowRef<Ermcp.MyDelistingApplyRsp[]>([])
 const columns = shallowRef<Ermcp.TableColumn[]>([
-    { prop: 'selldelistingapplyid', label: '询价单号', width: 200, show: true },
-    { prop: 'sellusername', label: '卖方', show: true },
-    { prop: 'goodsno', label: '商品编号', show: true },
-    { prop: 'applyqty', label: '申请重量', show: true },
-    { prop: 'applyprice', label: '总价', show: true },
-    { prop: 'applystatus', label: '申请状态', show: true },
-    { prop: 'applytime', label: '申请时间', width: 200, show: true },
+    { prop: 'selldelistingapplyid', label: '询价单号', width: 200 },
+    { prop: 'sellusername', label: '卖方' },
+    { prop: 'goodsno', label: '商品编号' },
+    { prop: 'applyqty', label: '申请重量' },
+    { prop: 'applyprice', label: '总价' },
+    { prop: 'applystatus', label: '申请状态' },
+    { prop: 'applytime', label: '申请时间', width: 200 },
 ])
 
 queryMyDelistingApply({

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

@@ -12,7 +12,7 @@
                 <component :is="components.performance" v-model="formData.PerformanceTemplateID" />
             </el-form-item>
         </el-form>
-        <app-table :data="dataList" :columns="columns" :max-height="400" :show-header="false" :loading="tableLoading"
+        <app-table :data="dataList" :columns="columns" :max-height="400" :show-toolbar="false" :loading="tableLoading"
             selection-type="single" border @select="onTableSelect">
             <!-- 价格 -->
             <template #price="{ row }">

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

@@ -66,7 +66,7 @@
                             <span>询价信息</span>
                         </div>
                     </template>
-                    <app-table :data="dataList" v-model:columns="columns" :show-header="false" border>
+                    <app-table :data="dataList" v-model:columns="columns" :show-toolbar="false" border>
                         <!-- 申请状态 -->
                         <template #applystatus="{ value }">
                             {{ getApplyStatusName(value) }}
@@ -115,11 +115,11 @@ const { getPerformanceTemplateById } = usePerformanceStore()
 
 const dataList = shallowRef<Ermcp.MyBargainApplyRsp[]>([])
 const columns = shallowRef<Ermcp.TableColumn[]>([
-    { prop: 'wrbargainid', label: '询价单号', show: true },
-    { prop: 'buyusername', label: '买方', show: true },
-    { prop: 'applyprice', label: '价格', show: true },
-    { prop: 'applystatus', label: '申请状态', show: true },
-    { prop: 'applytime', label: '申请时间', show: true },
+    { prop: 'wrbargainid', label: '询价单号' },
+    { prop: 'buyusername', label: '买方' },
+    { prop: 'applyprice', label: '价格' },
+    { prop: 'applystatus', label: '申请状态' },
+    { prop: 'applytime', label: '申请时间' },
 ])
 
 queryMyBargainApply({

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

@@ -5,7 +5,12 @@
             <app-filter :options="filterOptons" :loading="loading" />
         </template>
         <!-- 表格数据 -->
-        <app-table :data="dataList" v-model:columns="columns" :loading="loading">
+        <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
+            :expand-row-keys="expandKeys" @row-click="rowClick">
+            <!-- 展开行 -->
+            <template #expand="{ row }">
+                <app-action-menu :menus="handleOperateButtons(row)" :record="row" @click="openComponent" />
+            </template>
             <!-- 价格 -->
             <template #price="{ row }">
                 {{ row.zscurrencytypedisplayunit + formatDecimal(row.price) }}
@@ -14,16 +19,14 @@
             <template #fixedprice="{ row }">
                 {{ row.zscurrencytypedisplayunit + formatDecimal(row.fixedprice) }}
             </template>
-            <!-- 操作 -->
-            <template #operate="{ row }">
-                <app-auth-operation :menus="handleTableButtons(row)" :options="{ selectedRow: row }"
-                    @closed="onRefresh" />
-            </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="{ code: activeMenu.name, selectedRow: activeMenu.record }" @closed="closeComponent"
+            v-if="asyncComponent" />
     </app-view>
 </template>
 
@@ -33,22 +36,27 @@ import { formatDecimal } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
 import { useLoginStore, useFavoriteStore } from '@/stores'
 import { useSellOrder } from '@/business/trade/list'
-import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
+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 AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { getUserId } = useLoginStore()
 const { hasFavorite } = useFavoriteStore()
-const { loading, dataList, columns, total, pageIndex, pageSize, categoryList, getSellOrderList } = useSellOrder()
+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 { filterOptons, getQueryParams } = useDataFilter<Ermcp.SellOrderReq>()
+const authMenus = getAuthButtons()
 
 // 未收藏的卖委托有收藏按钮
-const handleTableButtons = (row: Ermcp.SellOrderRsp) => {
+const handleOperateButtons = (row: Ermcp.SellOrderRsp) => {
     if (hasFavorite(row.goodsno) || row.userid === getUserId()) {
-        return ['details']
+        return authMenus.filter((e) => e.code !== 'trade_sell_details')
     }
-    return ['details', 'favorite']
+    return authMenus
 }
 
 const onSearch = (clear = false) => {

src/packages/pc/views/warehousing/goods/components/edit/diamond.vue

@@ -98,7 +98,7 @@
         <el-form-item label="证书编号" prop="CerNo">
             <el-input placeholder="请输入" v-model="formData.CerNo" />
         </el-form-item>
-        <el-form-item label="商品照片" prop="ImagePath">
+        <el-form-item label="商品图片" prop="ImagePath">
             <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
         </el-form-item>
         <el-form-item class="el-form-item--row" label="备注" prop="Remark">

src/packages/pc/views/warehousing/goods/components/edit/diamonds.vue

@@ -69,7 +69,7 @@
                 <template #append>{{ currencyInfo?.enumitemvalue }}</template>
             </el-input>
         </el-form-item>
-        <el-form-item label="商品照片" prop="ImagePath">
+        <el-form-item label="商品图片" prop="ImagePath">
             <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
         </el-form-item>
         <el-form-item class="el-form-item--row" label="备注" prop="Remark">

src/packages/pc/views/warehousing/goods/components/edit/fancy.vue

@@ -102,7 +102,7 @@
         <el-form-item label="证书编号" prop="CerNo">
             <el-input placeholder="请输入" v-model="formData.CerNo" />
         </el-form-item>
-        <el-form-item label="商品照片" prop="ImagePath">
+        <el-form-item label="商品图片" prop="ImagePath">
             <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
         </el-form-item>
         <el-form-item class="el-form-item--row" label="备注" prop="Remark">

src/packages/pc/views/warehousing/goods/components/edit/jewelry.vue

@@ -107,7 +107,7 @@
         <el-form-item label="配石描述" prop="StoneDesc">
             <el-input placeholder="请输入" v-model="formData.StoneDesc" />
         </el-form-item>
-        <el-form-item label="商品照片" prop="ImagePath">
+        <el-form-item label="商品图片" prop="ImagePath">
             <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
         </el-form-item>
         <el-form-item class="el-form-item--row" label="备注" prop="Remark">

src/packages/pc/views/warehousing/goods/components/edit/rough.vue

@@ -69,7 +69,7 @@
                 <template #append>(克拉)</template>
             </el-input>
         </el-form-item>
-        <el-form-item label="商品照片" prop="ImagePath">
+        <el-form-item label="商品图片" prop="ImagePath">
             <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="onUploadChange" />
         </el-form-item>
         <el-form-item label="金伯利图片" prop="KPPath">

src/stores/modules/menu.ts

@@ -53,6 +53,7 @@ const store = new (class extends VueStore<StoreState>{
                                         icon: e.iconame,
                                         buttonName: e.buttonname,
                                         buttonType: e.buttontype,
+                                        className: '',
                                         sort: e.sort,
                                         hidden: Boolean(e.hidden),
                                         remark: e.remark,

src/types/ermcp/account.d.ts

@@ -283,6 +283,7 @@ declare global {
             icon: string; // 菜单图标
             buttonName: string; // 按钮名称
             buttonType: string; // 按钮类型
+            className: string; // 菜单样式
             hidden: boolean; // 是否隐藏
             sort: number; // 排序
             remark: string; // 备注