fix: 删除一些多余的旧代码

buqiyuan · Dec 17, 2021 · 16042d2 · 16042d2
1 parent e164bf1
commit 16042d2
Show file tree

Hide file tree

Showing 21 changed files with 2,210 additions and 974 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@
 - [x] 动态表格(完善中)
 - [x] 动态表单(完善中)
 - [ ] 电商 SKU 功能演示
-- [ ] 纯前端导出 PDF 动态分页
+- [ ] 纯前端导出 PDF 自动分页
 - [ ] 其他...
 
 ## Project setup

diff --git a/src/api/demos/hero.ts b/src/api/demos/hero.ts
@@ -0,0 +1,15 @@
+import { request, BaseResponse } from '@/utils/request';
+
+export function getHeroList(query: API.PageParams) {
+  return request<BaseResponse<API.TableListResult>>(
+    {
+      url: '/demos/hero/list',
+      method: 'get',
+      params: query,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: false,
+    },
+  );
+}
diff --git a/src/components/JSON-schema-form/helper.ts b/src/components/JSON-schema-form/helper.ts
@@ -14,6 +14,7 @@ export function createPlaceholderMessage(component: ComponentMapType, label = ''
     'Select',
     'Cascader',
     'Checkbox',
+    'CheckboxGroup',
     'Switch',
     'TreeSelect',
   ];

diff --git a/src/components/JSON-schema-form/schema-form-item.vue b/src/components/JSON-schema-form/schema-form-item.vue
@@ -2,11 +2,11 @@
   <Col v-bind="schemaItem.colProps">
     <Form.Item
       v-bind="{ ...schemaItem.formItemProps }"
-      :label="renderLabelHelpMessage()"
+      :label="renderLabelHelpMessage"
       :name="schemaItem.field"
       :labelCol="itemLabelWidthProp.labelCol"
       :wrapperCol="itemLabelWidthProp.wrapperCol"
-      :rules="handleRules()"
+      :rules="getRules"
     >
       <slot v-if="schemaItem.slot" :name="schemaItem.slot" v-bind="getValues"> </slot>
       <component
@@ -148,7 +148,7 @@
     }, {});
   });
 
-  function renderLabelHelpMessage() {
+  const renderLabelHelpMessage = computed(() => {
     const { label, helpMessage, helpComponentProps, subLabel } = props.schemaItem;
     const renderLabel = subLabel ? (
       <span>
@@ -167,7 +167,7 @@
         <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
       </span>
     );
-  }
+  });
 
   const getComponentsProps = computed(() => {
     const { schemaItem, tableAction, formModel, formActionType } = props;
@@ -192,16 +192,21 @@
     }
   }
 
-  function handleRules(): ValidationRule[] {
+  const getRules = computed(() => {
     const {
       rules: defRules = [],
       component,
       rulesMessageJoinLabel,
       label,
       dynamicRules,
       required,
+      field,
     } = props.schemaItem;
 
+    if (field == 'field5') {
+      console.log('rules', props.schemaItem);
+    }
+
     if (isFunction(dynamicRules)) {
       return dynamicRules(unref(getValues)) as ValidationRule[];
     }
@@ -214,10 +219,11 @@
       : globalRulesMessageJoinLabel;
     const defaultMsg = isString(component)
       ? `${createPlaceholderMessage(component, label)}${joinLabel ? label : ''}`
-      : '';
+      : undefined;
 
     function validator(rule: any, value: any) {
       const msg = rule.message || defaultMsg;
+
       if (value === undefined || isNull(value)) {
         // 空值
         return Promise.reject(msg);
@@ -277,7 +283,7 @@
     }
 
     return rules;
-  }
+  });
 
   onMounted(async () => {
     if (getComponentProps.value?.request) {

diff --git a/src/components/dynamic-table/components/query-form/index.vue b/src/components/dynamic-table/components/query-form/index.vue
@@ -76,7 +76,10 @@
 
       const formItemSchemas = computed<FormItemSchema[]>(() => {
         return props.columns
-          .filter((n) => !n.hideInSearch && !!getColumnKey(n))
+          .filter((n) => {
+            const field = getColumnKey(n);
+            return !n.hideInSearch && !!field && field !== '$action';
+          })
           .map((n) => {
             return {
               field: n.formItemProps?.field ?? n.searchField ?? getColumnKey(n),

diff --git a/src/components/dynamic-table/components/table-settings/column-setting.vue b/src/components/dynamic-table/components/table-settings/column-setting.vue
@@ -3,7 +3,6 @@
     <template #title>
       <span>列设置</span>
     </template>
-
     <Popover
       placement="bottomLeft"
       trigger="click"
@@ -13,15 +12,15 @@
       <template #title>
         <div class="popover-title">
           <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll"> 列展示 </Checkbox>
-
           <Checkbox v-model:checked="checkIndex" @change="handleIndexCheckChange">
             序号列
           </Checkbox>
-
+          <Checkbox v-model:checked="checkBordered" @change="handleBorderedCheckChange">
+            边框
+          </Checkbox>
           <a-button size="small" type="link" @click="reset"> 重置 </a-button>
         </div>
       </template>
-
       <template #content>
         <div ref="columnListRef">
           <template v-for="item in tableColumns" :key="table.getColumnKey(item)">
@@ -36,7 +35,6 @@
                   {{ item.title }}
                 </Checkbox>
               </div>
-
               <div class="column-fixed">
                 <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
                   <template #title> 固定到左侧 </template>
@@ -66,7 +64,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, nextTick, ref, unref, watch } from 'vue';
+  import { computed, nextTick, ref, unref, watchEffect } from 'vue';
   import { Tooltip, Popover, Divider } from 'ant-design-vue';
   import {
     SettingOutlined,
@@ -98,6 +96,7 @@
   });
 
   const checkIndex = ref(defaultShowIndex);
+  const checkBordered = ref(table.bordered);
   const columnListRef = ref<HTMLDivElement>();
 
   // 初始化选中状态
@@ -116,17 +115,20 @@
     );
   });
 
-  watch(tableColumns.value, (columns) => {
-    table.setProps({ columns });
+  watchEffect(() => {
+    table.setProps({ columns: tableColumns.value });
   });
-
+  // 设置序号列
   const handleIndexCheckChange = (e) => {
     table.setProps({ showIndex: e.target.checked });
   };
+  // 设置边框
+  const handleBorderedCheckChange = (e) => {
+    table.setProps({ bordered: e.target.checked });
+  };
 
   const handleColumnFixed = (columItem: TableColumn, direction: 'left' | 'right') => {
     columItem.fixed = columItem.fixed === direction ? false : direction;
-    table.setProps({ columns: tableColumns.value });
   };
 
   async function handleVisibleChange() {
@@ -146,23 +148,16 @@
         }
         // Sort column
         const columns = tableColumns.value;
-        if (oldIndex > newIndex) {
-          columns.splice(newIndex, 0, columns[oldIndex]);
-          columns.splice(oldIndex + 1, 1);
-        } else {
-          columns.splice(newIndex + 1, 0, columns[oldIndex]);
-          columns.splice(oldIndex, 1);
-        }
-        table.setProps({ columns });
+        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
       },
     });
     initSortable();
     inited = true;
   }
 
   const reset = () => {
-    table.setProps({ columns: cloneDeep(defaultColumns), showIndex: defaultShowIndex });
     initCheckStatus();
+    table.setProps({ showIndex: defaultShowIndex });
   };
 </script>
 

diff --git a/src/components/dynamic-table/dynamic-table.vue b/src/components/dynamic-table/dynamic-table.vue
@@ -195,21 +195,6 @@
 
           state.tableData = data?.list || [];
         }
-
-        // const end = Math.max(pageSize, current * pageSize)
-        // .slice(end - pageSize, end) // 这里0，10是条数
-
-        // 是否开启了合计行
-        // if (props.showSummary) {
-        //   const { pageSize, current } = unref(pagination);
-        //   const end = Math.max(pageSize, current * pageSize);
-
-        //   const data = Object.is(props.dataSource, undefined)
-        //     ? state.tableData
-        //     : state.tableData.slice(end - pageSize, end);
-        // }
-        // 是否可以拖拽行
-        // props.dragRowEnable && (state.customRow = useDragRow<any>(state.tableData)!)
       };
 
       /**

diff --git a/src/components/dynamic-table/typing.ts b/src/components/dynamic-table/typing.ts
@@ -13,18 +13,6 @@ export interface LoadDataParams extends TableProps {
   limit?: number;
 }
 
-// export interface ActionOptions {
-//   type: 'select' | 'button' | 'text' | 'popconfirm' // 控制类型，默认为a,可选： select | button | text
-//   text: string
-//   permission?: {
-//     // 权限
-//     action?: 'create' | 'delete' | 'update' | 'retrieve' // CRUD权限：创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作
-//     effect?: 'disabled'
-//   }
-//   props?: any // 组件属性，v-bind="props"
-//   func?: ({ text, record, index }, callback: (...rest) => any) => any // 动作事件触发回调
-// }
-
 export type ColumnParams<T = any> = {
   record: T;
   text: string;
@@ -40,7 +28,7 @@ export type OnChangeCallbackParams = TableProps['onChange'];
  */
 export interface TableColumn<T = any> extends TableColumnType {
   title: string;
-  dataIndex: string;
+  dataIndex: string | '$action';
   width?: number;
   /** 指定搜索的字段 */
   searchField?: string;
@@ -50,18 +38,7 @@ export interface TableColumn<T = any> extends TableColumnType {
   hideInTable?: boolean;
   /** 传递给 Form.Item 的配置,可以配置 rules */
   formItemProps?: Partial<FormItemSchema>;
-  bodyCell?: (params: ColumnParams<T>) => VNode | string;
+  bodyCell?: (params: ColumnParams<T>) => VNode;
+  headerCell?: (params: ColumnParams<T>) => VNode;
   actions?: (params: ColumnParams<T>) => ActionItem[];
 }
-
-// export interface ActionItem {
-//   type: 'popconfirm' | 'select' | 'button' | 'text' // 控制类型，默认为a,可选： select | button | text
-//   text: string
-//   permission: {
-//     // 权限
-//     action: 'delete'
-//     effect: 'disabled'
-//   }
-//   props: ButtonProps | any
-//   func: ({ record }, refreshTableData) => any
-// }