Procházet zdrojové kódy

fix(components): 修复自定义表格组件的问题

- 优化 BasicTable 组件的属性设置
- 改进表格数据的处理逻辑
- 调整表格行的键值生成方式
- 优化数据删除操作
- 移除不必要的控制台日志
zhangtao před 3 týdny
rodič
revize
7e0150ca45

+ 21 - 15
src/components/ZtCustomTable/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <BasicTable @register="registerTable" @edit-change="onEditChange" :pagination="false" :data-source="modelValue">
+  <BasicTable
+    @register="registerTable"
+    @edit-change="onEditChange"
+    :pagination="false"
+    :row-key="handleKey"
+    :autoCreateKey="false"
+    :data-source="modelValue"
+  >
     <template #headerCell="{ column }">
       <template v-if="column.dataIndex == 'operation' && showAction">
         <div class="text-18px cursor-pointer" @click="handleAdd">
@@ -20,7 +27,7 @@
   </BasicTable>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, withDefaults, nextTick } from 'vue';
+  import { computed, withDefaults, nextTick } from 'vue';
   import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, BasicColumn } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
@@ -47,12 +54,12 @@
   const emit = defineEmits(['update:value', 'update:deleteId']);
   const modelValue = computed({
     get() {
-      console.log(props.value, 'get得到值');
+      // console.log(props.value, 'get-------------props.value');
+
       return props.value;
     },
     set(val) {
-      console.log(val, 'set得到值');
-
+      // console.log(val, 'set-------------props.value');
       emit('update:value', val);
     },
   });
@@ -81,7 +88,8 @@
   });
 
   //BasicTable绑定注册
-  const [registerTable, { getDataSource }] = tableContext;
+  const [registerTable] = tableContext;
+
   function onEditChange({ column, value, record }) {
     if (column.dataIndex == 'time') {
       record.editValueRefs.time.value = value;
@@ -97,23 +105,18 @@
     const newRow: DataRow = {};
     inputFields.forEach((field) => {
       newRow[String(field)] = null;
-      newRow['key'] = `table-${dayjs().valueOf()}`;
+      newRow['key'] = dayjs().valueOf();
     });
     return newRow;
   };
   function handleAdd() {
     if (props.count == modelValue.value.length) return useMessage().createMessage.error('最多添加' + props.count + '行数据');
-    modelValue.value.push(JSON.parse(JSON.stringify(addEmptyRow(props.tableColumn))));
+    modelValue.value.push(addEmptyRow(props.tableColumn));
     modelValue.value = [].concat(modelValue.value);
   }
   function handleRemove(index, column) {
-    const newData = cloneDeep(
-      getDataSource()
-        .filter((it) => it.key !== column.key)
-        .map((it) => {
-          return { ...it.editValueRefs, key: it.key };
-        })
-    );
+    modelValue.value.splice(index, 1);
+    const newData = cloneDeep(modelValue.value.map((it) => it.editValueRefs));
     modelValue.value = [];
     nextTick(() => {
       modelValue.value = newData;
@@ -123,4 +126,7 @@
       deletIdVaule.value = ([] as string[]).concat(deletIdVaule.value);
     }
   }
+  function handleKey(row) {
+    return row.key;
+  }
 </script>

+ 0 - 2
src/utils/index.ts

@@ -647,8 +647,6 @@ export function areAllItemsAllFieldsFilled(arr: Array<Record<string, any>>): boo
   // return arr.every((item) => areAllFieldsFilled(item));
   //修复新增的时候id校验
   return arr.every((item) => {
-    console.log(item, 'it饿迷糊好几十');
-
     const { coursesId, id, ...rest } = item;
     return areAllFieldsFilled(rest);
   });

+ 4 - 3
src/views/businessManagement/courses/courses.data.ts

@@ -9,7 +9,7 @@ import { getCoachList } from './courses.api';
 import { useUserStore } from '/@/store/modules/user';
 import ZtCustomTable from '/@/components/ZtCustomTable/index.vue';
 import { h } from 'vue';
-import { Business } from '../gymnasiumBag/gymnasiumBag.api';
+import { Business, getProject } from '../gymnasiumBag/gymnasiumBag.api';
 import { storeToRefs } from 'pinia';
 const { userInfo } = storeToRefs(useUserStore());
 //列表数据
@@ -65,7 +65,7 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
   {
-    field: '上下架状态',
+    field: 'rackingStatus',
     label: '上下架状态',
     component: 'Select',
     colProps: { span: 6 },
@@ -103,6 +103,7 @@ export const searchFormSchema: FormSchema[] = [
       labelField: 'name',
       valueField: 'id',
       resultField: 'records',
+      numberToString: true,
     },
   },
 ];
@@ -120,7 +121,7 @@ export const formSchema: FormSchema[] = [
     component: 'ApiSelect',
     required: true,
     componentProps: {
-      api: getSprotProject,
+      api: getProject,
       labelField: 'name',
       valueField: 'id',
       mode: 'tags',

+ 5 - 0
src/views/businessManagement/gymnasiumBag/gymnasiumBag.api.ts

@@ -8,6 +8,7 @@ enum Api {
   detaile = 'app/appCourese/queryById',
   queryById = '/app/appSitePlace/queryPack',
   Business = '/app/appSitePlace/queryByOrgCode',
+  getProject = '/app/appCategory/queryCategories',
 }
 export const list = (params) => defHttp.get({ url: Api.list, params });
 
@@ -44,3 +45,7 @@ export const queryById = (params) => {
 export const Business = (params) => {
   return defHttp.post({ url: `${Api.Business}`, data: params });
 };
+
+export const getProject = () => {
+  return defHttp.get({ url: Api.getProject });
+};

+ 3 - 3
src/views/businessManagement/gymnasiumBag/index.vue

@@ -57,7 +57,7 @@
   import { DemoOptionsItem } from '/@/api/demo/model/optionsModel';
   import ZtCustomTable from '/@/components/ZtCustomTable/index.vue';
   import { ScheduleArrangementColums } from './gymnasiumBag.data';
-  import { saveOrUpdate, queryById, Business } from './gymnasiumBag.api';
+  import { saveOrUpdate, queryById, Business, getProject } from './gymnasiumBag.api';
   import { ref } from 'vue';
   import { OriginalItem } from '/#/utils';
   import { areAllItemsAllFieldsFilled, extractRefs } from '/@/utils';
@@ -301,8 +301,8 @@
     }
   }
   async function getProjectData() {
-    const res = await getSprotProject({ pageSize: 100 });
-    projectList.value = res.records.map((it) => {
+    const res = await getProject();
+    projectList.value = res.map((it) => {
       return { value: it.id, label: it.name };
     });
     renderTable();

+ 2 - 0
src/views/businessManagement/schoolOpen/index.vue

@@ -69,6 +69,8 @@
     await validate();
     isSubmit.value = true;
     const form = await getFieldsValue();
+    console.log(form, 'formData');
+
     const newObj = {
       ...form,
       noTeachingDay: JSON.stringify({

+ 1 - 0
src/views/informationManagement/shopInfo/shopInfo.data.ts

@@ -291,6 +291,7 @@ export const formSchema: FormSchema[] = [
       aspectRatioW: 5,
       aspectRatioH: 4,
       isProportion: true,
+      fileMax: 10,
     },
   },
   {

+ 8 - 13
src/views/orderManagement/order/order.data.ts

@@ -54,44 +54,39 @@ export const columns: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     label: '手机号码',
-    field: 'phone',
+    field: 'userPhone',
     component: 'Input',
   },
   {
     label: '订单编号',
-    field: 'phone',
-    component: 'Input',
-  },
-  {
-    label: '店铺名称',
-    field: 'phone',
+    field: 'orderCode',
     component: 'Input',
   },
   {
     label: '订单状态',
-    field: 'phone',
+    field: 'orderStatus',
     component: 'Select',
     componentProps: {
       options: [
         {
           label: '待付款',
-          value: 1,
+          value: 0,
         },
         {
           label: '待使用',
-          value: 2,
+          value: 1,
         },
         {
           label: '已使用',
-          value: 3,
+          value: 2,
         },
         {
           label: '已到期',
-          value: 4,
+          value: 3,
         },
         {
           label: '已取消',
-          value: 5,
+          value: 4,
         },
       ],
     },