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

src/settings/componentSetting.ts

@@ -25,18 +25,23 @@ export default {
  defaultPageSize: 10,
  // 默认排序方法
  defaultSortFn: (sortInfo: SorterResult) => {
- const { field, order } = sortInfo;
- if (field && order) {
- let sortType = 'ascend' == order ? 'asc' : 'desc';
+ //update-begin-author:taoyan date:2022-10-21 for: VUEN-2199【表单设计器】多字段排序
+ if(sortInfo instanceof Array){
+ let sortInfoArray:any[] = []
+ for(let item of sortInfo){
+ let info = getSort(item);
+ if(info){
+ sortInfoArray.push(info)
+ }
+ }
  return {
- // 排序字段
- column: field,
- // 排序方式 asc/desc
- order: sortType,
- };
- } else {
- return {};
+ sortInfoString: JSON.stringify(sortInfoArray)
+ }
+ }else{
+ let info = getSort(sortInfo)
+ return info || {}
  }
+ //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,17 +1,27 @@
 <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';
  import { saveOrUpdateDemo, getDemoById } from './demo.api';
  // 声明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,
- sorter: true
+ width: 140,
+ 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" />
- <JImportModal @register="registerModal1" :url="getImportUrl" online />
+ <DemoModal @register="registerModal" @success="reload" :isDisabled="isDisabled"/>
+ <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,