vxe

src/api/common/index.ts

@@ -67,8 +67,6 @@ enum Api {
   GetSupplierAndClientListByCode = '/mainApi/ClientCommon/GetSupplierAndClientListByCode',
   // 供应商客户类型
   GetSupplierListByCode = '/mainApi/ClientCommon/GetSupplierListByCode',
-  // 全部单位下拉
-  GetSupplierAndClientListByCode = '/mainApi/ClientCommon/GetSupplierAndClientListByCode',
   // 费用名称下拉数据
   GetFeeCodeSelectList = '/mainApi/ClientCommon/GetFeeCodeSelectList',
   // 获取箱型下拉数据
@@ -227,14 +225,6 @@ export function GetSupplierListByCode(params) {
     params,
   })
 }
-// 全部单位下拉
-export function GetSupplierAndClientListByCode(params) {
-  return request<DataResult>({
-    url: Api.GetSupplierAndClientListByCode,
-    method: 'get',
-    params,
-  })
-}
 // 获取费用名称下拉数据
 export function GetFeeCodeSelectList() {
   return request<DataResult>({

src/components/HColSet/components/tableColDrag.vue

@@ -90,11 +90,11 @@
   // 表单校验规则
   const rules = {
     title: [
-      {
+      // {
-        required: true,
+      //   required: true,
-        message: '请输入列头中文标题',
+      //   message: '请输入列头中文标题',
-        trigger: 'blur'
+      //   trigger: 'blur'
-      }
+      // }
     ],
     // enTitle: [
     //   {
@@ -133,7 +133,10 @@
   }
   // 拖动结束处理数据
   const handleDragEnd = () => {
-    if ((ending.data === dragging.data) || (ending.dataIndex === dragging.dataIndex)) {
+    if (tbType.value === 'excel' && ending.data === dragging.data) {
+      return
+    }
+    if (tbType.value === 'vxe' && ending.dataIndex === dragging.dataIndex) {
       return
     }
     // 新的数组
@@ -152,11 +155,19 @@
   const tbType = ref('excel')
   const init = (list, type) => {
     if (type) tbType.value = type
+    list.forEach((item, index) => {
+      if (item.visible == undefined) item.visible = true
+      // 删除操作列，操作列，只在前端控制
+      if (item.dataIndex == 'action') {
+        list.splice(index, 1)
+      }
+    })
     colData.value = list
   }
   defineExpose({
     getColList,
-    init
+    init,
+    colData
   })
 </script>
 

src/components/HColSet/index.vue

@@ -50,15 +50,23 @@
   </span>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, watch, nextTick, defineProps, defineEmits } from 'vue'
+  import { onMounted, ref, watch, nextTick } from 'vue'
   import { useI18n } from '/@/hooks/web/useI18n'
   // 引入表格列容器组件
   import TableColDrag from './components/tableColDrag.vue'
   import { EditCustomColumnSet } from './api'
+  // 引入表格权限信息（包含id和name）
+  import { permissionsInfo } from '/@/hooks/web/usePermission'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { editColumnSet } from '/@/components/Table/src/components/settings/ColumnSettingApi'
   const { createMessage } = useMessage()
   const { t } = useI18n()
   const props = defineProps({
+    // 查询设置列的id (vxe表格使用)
+    id: {
+      type: String,
+      default: '0'
+    },
     // 表格列数据
     columns: {
       type: Object,
@@ -108,14 +116,31 @@
         if (!b) visible.value = false
       })
     } else {
+      loading.value = true
+      const columnData =  TableColDragRef.value.colData
       // vxe设置
-
+      const Apidata = {
+        id: props.id,
+        tagNo: props.code,
+        templateName: '列表设置',
+        content: JSON.stringify({
+          columns: columnData
+        })
+      }
+      editColumnSet(Object.assign(Apidata, permissionsInfo())).then((res) => {
+        loading.value = false
+        createMessage.success(res.message)
+        emits('updateCol', TableColDragRef.value.colData)
+        if (!b) visible.value = false
+      }).catch(() => {
+        loading.value = false
+      })
     }
   }
   watch(
     () => props.columns,
     (v) => {
-      colData.value = v.data
+      colData.value = v.data || v
     },
     {
       deep: true

src/components/Table/src/BasicTable.vue

@@ -16,9 +16,11 @@
         </a-button>
         <!-- 列设置 -->
         <HColSet
+          :id="vxeSetId"
           :code="getBindValues.id"
-          :columns="columns"
+          :columns="getBindValues.columns"
           type="vxe"
+          @updateCol="updateCol"
         />
       </div>
     </div>
@@ -42,22 +44,27 @@
         :loading="getBindValues.loading"
         @cell-dblclick="dbclickVxeRow"
         @sort-change="sortChangeEvent"
+        @resizable-change="resizableChangeEvent"
       >
         <vxe-column type="checkbox" width="40"></vxe-column>
         <!-- <vxe-column type="seq" width="40"></vxe-column> -->
-        <vxe-column
+        <template
           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 }">
+          <vxe-column
-            <slot name="bodyCell" :column="item" :record="row">{{ row[item.dataIndex] }}</slot>
+            v-if="item.visible !== false"
-          </template>
+            :key="`${item.dataIndex}-${index}`"
-        </vxe-column>
+            :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>
+            </template>
+          </vxe-column>
+        </template>
         <template #loading>
           <a-spin />
         </template>
@@ -94,7 +101,7 @@
 </template>
 <script lang="ts">
 import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table'
-import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue'
+import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect, onMounted } from 'vue'
 import { Table, Pagination } from 'ant-design-vue'
 import { BasicForm, useForm } from '/@/components/Form/index'
 import { PageWrapperFixedHeightKey } from '/@/components/Page'
@@ -122,6 +129,10 @@ import { omit } from 'lodash-es'
 import { basicProps } from './props'
 import { isFunction } from '/@/utils/is'
 import { warn } from '/@/utils/log'
+// vxe列设置接口
+import { getColumnSetInfoByModule } from '/@/views/baseinfo/columnset/api'
+// 引入表格权限信息（包含id和name）
+import { permissionsInfo } from '/@/hooks/web/usePermission'
 
 export default defineComponent({
   name: 'BasicTable',
@@ -311,7 +322,6 @@ export default defineComponent({
       // if (slots.expandedRowRender) {
       //   propsData = omit(propsData, 'scroll');
       // }
-
       propsData = omit(propsData, ['class', 'onChange'])
       return propsData
     })
@@ -345,7 +355,22 @@ export default defineComponent({
       setPagination(pageConfig)
       reload()
     }
-    
+    const vxeSetId = ref('0')
+    // vxe 列设置数据查询
+    const getVxeColSetData = () => {
+      if (props.id) {
+        getColumnSetInfoByModule({ permissionId: permissionsInfo().permissionId, columnNo: props.id }).then(res => {
+          console.log(res)
+          const { data } = res
+          const columns = JSON.parse(data.content).columns
+          columns.forEach(item => {
+            item['title'] = item.customTitle
+          })
+          setColumns(columns)
+          vxeSetId.value = data.id
+        })
+      }
+    }
     const tableAction: TableActionType = {
       reload,
       getSelectRows,
@@ -405,6 +430,21 @@ export default defineComponent({
         fetch()
       }
     }
+    // vxe拖动列触发实时保存
+    const resizableChangeEvent = (item) => {
+
+      console.log(item)
+    }
+    // 更新vxe列设置
+    const updateCol = (data) => {
+      data.forEach(item => {
+        item['title'] = item.customTitle
+      })
+      setColumns(data)
+    }
+    onMounted(() => {
+      getVxeColSetData()
+    })
     // 初始化列设置
     const initColSet = () => {
       
@@ -419,6 +459,7 @@ export default defineComponent({
     //   }
     // }
     return {
+      vxeSetId,
       formRef,
       tableElRef,
       getBindValues,
@@ -427,6 +468,7 @@ export default defineComponent({
       handleSearchInfoChange,
       getEmptyDataIsShowTable,
       sortChangeEvent,
+      resizableChangeEvent,
       // filterChangeEvent,
       handleTableChange,
       getRowClassName,
@@ -445,7 +487,8 @@ export default defineComponent({
       getWrapperClass,
       columns: getViewColumns,
       resizeColumn,
-      reload
+      reload,
+      updateCol
     }
   },
 })

src/views/operation/seaexport/index.vue

@@ -510,7 +510,7 @@ const [registerTable, { reload, getVxeSelectRows, setLoading, setColumns }] = us
   resizeHeightOffset: 75,
   immediate: false,
   tableComponent: 'vxe',
-  id: 'order-ledger',
+  id: '0',
   actionColumn: {
     width: 60,
     title: '操作',