vxetable

src/components/Table/src/BasicTable.vue

@@ -9,6 +9,16 @@
     </BasicForm>
     <div class="ds-vxe-tb-header" v-if="getBindValues.tableComponent === 'vxe'">
       <slot name="tableTitle"></slot>
+      <div style="padding-right: 10px;">
+        <a-button type="link" @click="reload">
+          <span class="iconfont icon-refresh-1-copy"></span>
+          刷新
+        </a-button>
+        <a-button type="link" @click="initColSet">
+          <span class="iconfont icon-shuliebiao"></span>
+          列设置
+        </a-button>
+      </div>
     </div>
     <div class="table-wrapper" >
       <slot name="left" class="left" ></slot>
@@ -20,23 +30,27 @@
         show-header-overflow
         show-footer-overflow
         :height="tableHeightRef + 35"
-        :row-config="{isCurrent: true, isHover: true}"
-        :column-config="{resizable: true}"
-        :scroll-y="{enabled: true, gt: 0}"
-        :scroll-x="{enabled: true, gt: 0}"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :column-config="{ resizable: true }"
+        :scroll-y="{ enabled: true, gt: 0 }"
+        :scroll-x="{ enabled: true, gt: 0 }"
+        :sort-config="{ trigger: 'cell', remote: true }"
         rowSelection
         size="mini"
         :loading="getBindValues.loading"
         @cell-dblclick="dbclickVxeRow"
-        @checkbox-change="vxeCheckBoxChange"
+        @sort-change="sortChangeEvent"
       >
         <vxe-column type="checkbox" width="40"></vxe-column>
+        <!-- <vxe-column type="seq" width="40"></vxe-column> -->
         <vxe-column
           v-for="(item, index) in getBindValues.columns"
           :key="`${item.dataIndex}-${index}`"
           :title="item.customTitle"
           :field="item.dataIndex"
           :width="item.width"
+          :sortable="item.sorter"
+          :filters="item.filters"
         >
           <template #default="{ row }">
             <slot name="bodyCell" :column="item" :record="row">{{ row[item.dataIndex] }}</slot>
@@ -326,7 +340,7 @@ export default defineComponent({
       setPagination(pageConfig)
       reload()
     }
-
+    
     const tableAction: TableActionType = {
       reload,
       getSelectRows,
@@ -378,17 +392,37 @@ export default defineComponent({
       emit('row-dbClick', row)
       // props.rowDbClick(row)
     }
-    const vxeCheckBoxChange = (v) => {
+    // vxe服务端排序
+    const sortChangeEvent = ({ field, order }) => {
+      if (order) {
+        fetch({ sortInfo: { field, order: order == 'asc' ? 'ascend' : order }})
+      } else {
+        fetch()
+      }
+    }
+    // 初始化列设置
+    const initColSet = () => {
+      
     }
+    // vxe服务端筛选
+    // const filterChangeEvent = ({ filterList }) => {
+    //   console.log(filterList)
+    //   if (filterList) {
+    //     fetch({ filterInfo: filterList})
+    //   } else {
+    //     fetch()
+    //   }
+    // }
     return {
       formRef,
       tableElRef,
       getBindValues,
       getLoading,
       registerForm,
-      vxeCheckBoxChange,
       handleSearchInfoChange,
       getEmptyDataIsShowTable,
+      sortChangeEvent,
+      // filterChangeEvent,
       handleTableChange,
       getRowClassName,
       getVxeSelectRows,
@@ -398,13 +432,15 @@ export default defineComponent({
       dbclickVxeRow,
       redoHeight,
       fetch,
+      initColSet,
       getFormProps: getFormProps as any,
       replaceFormSlotKey,
       getFormSlotKeys,
       pageChange,
       getWrapperClass,
       columns: getViewColumns,
-      resizeColumn
+      resizeColumn,
+      reload
     }
   },
 })
@@ -430,6 +466,7 @@ export default defineComponent({
   .ds-vxe-tb-header {
     height: 48px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
     padding-left: 10px;
   }
@@ -535,4 +572,14 @@ export default defineComponent({
     width: 100%;
   }
 }
+.vxe-icon-checkbox-checked {
+  color: #257afa!important;
+}
+.vxe-cell--sort {
+  font-size: 0.8em!important;
+  height: 1.5em!important;
+}
+.vxe-header--row {
+  background: #f0f4fa!important;
+}
 </style>

src/components/Table/src/hooks/useColumns.ts

@@ -165,6 +165,7 @@ export function useColumns(
       if ((edit || editRow) && !isDefaultAction) {
         column.customRender = renderEditCell(column)
       }
+      console.log(reactive(column))
       return reactive(column)
     }
 

src/components/Table/src/hooks/useDataSource.ts

@@ -336,7 +336,6 @@ export function useDataSource(
             ap.Value.ConditionalList.push(obj)
           }
         })
-        console.log(ap)
         if (ap.Value.ConditionalList.length) {
           params['advancedSearchParams'] = { ConditionalList: [ap] }
         } else {

src/views/operation/seaexport/columns.tsx

@@ -535,43 +535,43 @@ export const columns: BasicColumn[] = [
     sorter: true,
     filters: [
       {
-        text: '审核通过',
+        label: '审核通过',
         value: '0',
       },
       {
-        text: '录入状态',
+        label: '录入状态',
         value: '1',
       },
       {
-        text: '提交审核',
+        label: '提交审核',
         value: '2',
       },
       {
-        text: '申请修改',
+        label: '申请修改',
         value: '3',
       },
       {
-        text: '申请删除',
+        label: '申请删除',
         value: '4',
       },
       {
-        text: '撤销申请',
+        label: '撤销申请',
         value: '5',
       },
       {
-        text: '驳回提交',
+        label: '驳回提交',
         value: '6',
       },
       {
-        text: '驳回申请',
+        label: '驳回申请',
         value: '7',
       },
       {
-        text: '部分结算',
+        label: '部分结算',
         value: '8',
       },
       {
-        text: '结算完毕',
+        label: '结算完毕',
         value: '9',
       },
     ],
@@ -583,43 +583,43 @@ export const columns: BasicColumn[] = [
     sorter: true,
     filters: [
       {
-        text: '审核通过',
+        label: '审核通过',
         value: '0',
       },
       {
-        text: '录入状态',
+        label: '录入状态',
         value: '1',
       },
       {
-        text: '提交审核',
+        label: '提交审核',
         value: '2',
       },
       {
-        text: '申请修改',
+        label: '申请修改',
         value: '3',
       },
       {
-        text: '申请删除',
+        label: '申请删除',
         value: '4',
       },
       {
-        text: '撤销申请',
+        label: '撤销申请',
         value: '5',
       },
       {
-        text: '驳回提交',
+        label: '驳回提交',
         value: '6',
       },
       {
-        text: '驳回申请',
+        label: '驳回申请',
         value: '7',
       },
       {
-        text: '部分结算',
+        label: '部分结算',
         value: '8',
       },
       {
-        text: '结算完毕',
+        label: '结算完毕',
         value: '9',
       },
     ],

src/views/operation/seaexport/index.vue

@@ -421,15 +421,20 @@ const calcColumns = [
     title: '其他箱型',
     dataIndex: 'otherCntr',
     width: 120,
-  },
+  }
 ]
+// 只调用一次设置列接口
+const fieldFlag = ref(true)
 // 合计数据
 const calcData = ref([{}])
 const [registerTable, { reload, getVxeSelectRows, setLoading, setColumns }] = useTable({
   title: '',
   api: async (p) => {
     // 如果存在改变的列，设置列
-    updateTableField(setColumns)
+    if (fieldFlag.value) {
+      updateTableField(setColumns)
+      fieldFlag.value = false
+    }
     const res: API.DataResult = await PageDataByBooking(p)
     calcData.value = [res.data?.dataTotal]
     return new Promise((resolve) => {
@@ -473,6 +478,7 @@ const [registerTable, { reload, getVxeSelectRows, setLoading, setColumns }] = us
   },
   // 请求前的参数格式化
   beforeFetch: (p) => {
+    console.log(p)
     return formatParams(p)
   },
   afterFetch: () => {