支持多字段排序&表格列字段拖拽

src/settings/componentSetting.ts

@@ -25,18 +25,23 @@ export default {
     defaultPageSize: 10,
     // 默认排序方法
     defaultSortFn: (sortInfo: SorterResult) => {
-      const { field, order } = sortInfo;
+      //update-begin-author:taoyan date:2022-10-21 for: VUEN-2199【表单设计器】多字段排序
-      if (field && order) {
+      if(sortInfo instanceof Array){
-        let sortType = 'ascend' == order ? 'asc' : 'desc';
+        let sortInfoArray:any[] = []
+        for(let item of sortInfo){
+          let info = getSort(item);
+          if(info){
+            sortInfoArray.push(info)
+          }
+        }
         return {
-          // 排序字段
+          sortInfoString: JSON.stringify(sortInfoArray)
-          column: field,
+        }
-          // 排序方式 asc/desc
+      }else{
-          order: sortType,
+        let info = getSort(sortInfo)
-        };
+        return info || {}
-      } else {
-        return {};
       }
+      //update-end-author:taoyan date:2022-10-21 for: VUEN-2199【表单设计器】多字段排序
     },
     // 自定义过滤方法
     defaultFilterFn: (data: Partial<Recordable<string[]>>) => {
@@ -63,3 +68,21 @@ export default {
     colon: true,
   },
 };
+
+/**
+ * 获取排序信息
+ * @param item
+ */
+function getSort(item){
+  const { field, order } = item;
+  if (field && order) {
+    let sortType = 'ascend' == order ? 'asc' : 'desc';
+    return {
+      // 排序字段
+      column: field,
+      // 排序方式 asc/desc
+      order: sortType,
+    };
+  }
+  return ''
+}

src/views/system/examples/demo/DemoModal.vue

@@ -1,10 +1,10 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm" :disabled="isDisabled" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
+  import { ref, computed, unref, defineProps } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './demo.data';
@@ -12,6 +12,16 @@
   // 声明Emits
   const emit = defineEmits(['register', 'success']);
   const isUpdate = ref(true);
+
+  //自定义接受参数
+  const props = defineProps({
+    //是否禁用页面
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
   //表单配置
   const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
     //labelWidth: 150,
@@ -22,7 +32,7 @@
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     //重置表单
     await resetFields();
-    setModalProps({ confirmLoading: false });
+    setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled});
     isUpdate.value = !!data?.isUpdate;
     if(data.createBy){
       await setFieldsValue({createBy: data.createBy})
@@ -40,7 +50,7 @@
     }
   });
   //设置标题
-  const title = computed(() => (!unref(isUpdate) ? '新增租户' : '编辑租户'));
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
   //表单提交事件
   async function handleSubmit(v) {
     try {

src/views/system/examples/demo/demo.data.ts

@@ -6,56 +6,71 @@ export const columns: BasicColumn[] = [
   {
     title: '姓名',
     dataIndex: 'name',
-    width: 70,
+    width: 170,
     align: 'left',
-    sorter: true
+    resizable: true,
+    sorter: {
+      multiple:1
+    }
   },
   {
     title: '关键词',
     dataIndex: 'keyWord',
-    width: 30,
+    width: 130,
+    resizable: true,
   },
   {
     title: '打卡时间',
     dataIndex: 'punchTime',
-    width: 40,
+    width: 140,
+    resizable: true,
   },
   {
     title: '工资',
     dataIndex: 'salaryMoney',
-    width: 40,
+    width: 140,
-    sorter: true
+    resizable: true,
+    sorter: {
+      multiple: 2
+    }
   },
   {
     title: '奖金',
     dataIndex: 'bonusMoney',
-    width: 40,
+    width: 140,
+    resizable: true,
   },
   {
     title: '性别',
     dataIndex: 'sex',
-    sorter: true,
+    sorter: {
+      multiple: 3
+    },
     customRender: ({ record }) => {
       return render.renderDict(record.sex, 'sex');
       // let v = record.sex ? (record.sex == '1' ? '男' : '女') : '';
       // return h('span', v);
     },
-    width: 20,
+    width: 120,
+    resizable: true,
   },
   {
     title: '生日',
     dataIndex: 'birthday',
-    width: 20,
+    width: 120,
+    resizable: true,
   },
   {
     title: '邮箱',
     dataIndex: 'email',
-    width: 20,
+    width: 120,
+    resizable: true,
   },
   {
     title: '个人简介',
     dataIndex: 'content',
-    width: 20,
+    width: 120,
+    resizable: true,
   },
 ];
 

src/views/system/examples/demo/index.vue

@@ -78,8 +78,8 @@
         <TableAction :actions="getActions(record)" />
       </template>
     </BasicTable>
-    <DemoModal @register="registerModal" @success="reload" />
+    <DemoModal @register="registerModal" @success="reload" :isDisabled="isDisabled"/>
-    <JImportModal @register="registerModal1" :url="getImportUrl" online />
+    <JImportModal @register="registerModalJimport" :url="getImportUrl" online />
   </div>
 </template>
 <script lang="ts" setup>
@@ -100,10 +100,12 @@
   const go = useGo();
   const checkedKeys = ref<Array<string | number>>([]);
   const [registerModal, { openModal }] = useModal();
-  const [registerModal1, { openModal: openModal1 }] = useModal();
+  const [registerModalJimport, { openModal: openModalJimport }] = useModal();
   const { handleExportXls, handleImportXls } = useMethods();
   const min = ref();
   const max = ref();
+  const isDisabled = ref(false);
+  
   const [registerTable, { reload, setProps }] = useTable({
     title: '单表示例',
     api: getDemoList,
@@ -133,7 +135,7 @@
     canResize: false,
     rowKey: 'id',
     actionColumn: {
-      width: 30,
+      width: 180,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },
@@ -145,13 +147,13 @@
    */
   const rowSelection = {
     type: 'checkbox',
-    columnWidth: 20,
+    columnWidth: 40,
     selectedRowKeys: checkedKeys,
     onChange: onSelectChange,
   };
 
   function handleImport() {
-    openModal1(true);
+    openModalJimport(true);
   }
 
   const exportParams = computed(()=>{
@@ -171,6 +173,10 @@
         label: '编辑',
         onClick: handleEdit.bind(null, record),
       },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
       {
         label: '删除',
         popConfirm: {
@@ -181,7 +187,6 @@
     ];
   }
 
-
   /**
    * 选择事件
    */
@@ -194,6 +199,7 @@
    * 新增事件
    */
   function handleAdd() {
+    isDisabled.value = false;
     openModal(true, {
       isUpdate: false,
     });
@@ -203,6 +209,18 @@
    * 编辑事件
    */
   function handleEdit(record) {
+    isDisabled.value = false;
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 详情页面
+   */
+  function handleDetail(record) {
+    isDisabled.value = true;
     openModal(true, {
       record,
       isUpdate: true,