高级表单优化

Ben Lin

2024-07-06 e23fdf87e6c3bc6d42198b9309617195f2efd6c0

 src/views/tigerprojects/system/lowcode/entityts/BAS_PKG_DTL.ts

@@ -4,18 +4,15 @@
 * @version:
 * @Date: 2024-06-19 20:34:27
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-07-02 19:59:52
 * @LastEditTime: 2024-07-06 23:15:08
 */

import { Ref } from 'vue';
import { Ref, ref } from 'vue';
import { DeleteEntity, getEntity } from '/@/api/tigerapi/system';
import { ActionItem, BasicColumn, FormSchema, useTable } from '/@/components/Table';
import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
import { buildUUID } from '/@/utils/uuid';
import { useUserStore } from '/@/store/modules/user';
import { formatToDateTime } from '/@/utils/dateUtil';
import { useDrawer } from '/@/components/Drawer';
import { EditOperation, Search } from '../data';
import { EditOperation, Search, custDel } from '../data';

function _default(): any[] {
  const ActionColumn: BasicColumn = {
@@ -26,6 +23,8 @@
    fixed: undefined,
  };

  let _data = ref<any>({});
  let record = {};
  /**
   * @description: 一些自定义方法
   * @return {*}
@@ -47,7 +46,7 @@
    ActionItem: (params: Recordable<any>, data, ...args): ActionItem[] => {
      /* 重写删除方法 */
      if (!isNullOrUnDef(data[1])) {
        data[1].popConfirm.confirm = custDel.bind(null, args, params);
        data[1].popConfirm.confirm = Del.bind(null, args, params);
      }
      return data;
    },
@@ -65,6 +64,7 @@
          return {
            ...item,
            PKG_CODE: d.PKG_CODE,
            PKG_NAME: d.PKG_NAME,
            PKG_LEVEL: d.PKG_LEVEL,
            PKG_QTY: d.PKG_QTY,
            LABEL_CODE: d.LABEL_CODE,
@@ -72,7 +72,7 @@
          };
        return item;
      });
      EditOperation(data,d, u, item, _data);
      EditOperation(data, d, u, item, _data);
    },
    /**
     * @description: 高级表单和详情页面返回主页面的url
@@ -99,10 +99,12 @@
     * @description: 高级表单增删改表单字段
     * @return {*}
     */
    GetCrudForm: (type: string) => {
    GetCrudForm: (type: string, ...args) => {
      _data = args[0];
      record = args[1];
      return crudForms[type];
    },
    OthersValues: (val: string, id: string) => {
    KeyFieldValues: (val: string, id: string) => {
      return { PKG_RULE_ID: id };
    },
    /**
@@ -215,7 +217,7 @@
            submitFunc: () => Search('BAS_PKG_DTL', data, args[0]), //自定义查询提交按钮的方法，触发查询提交事件
          },
          useSearchForm: true,
          showTableSetting: true,
          showTableSetting: false,
          bordered: true,
          canResize: true,
          showIndexColumn: false,
@@ -270,21 +272,32 @@
   * @param {*} params
   * @return {*}
   */
  function custDel(args: Fn[], params: {}) {
  function Del(args: Fn[], params: {}) {
    const name = params['name'];
    const useTables = args[1];
    if (!isNullOrEmpty(params['data'])) {
      var _data = params['data'].value.filter((item) => item['ID'] != params['record']['ID']);
      params['data'].value = _data;
      args[6]({
      var _data = params['data'].value[name]
        .filter((x) => x['ID'] != params['record']['ID']) //过滤掉删除掉的记录
        .map((item) => {
          //如果序号大于删除掉的记录的序号的，则序号减1
          item['PKG_LEVEL'] =
            item['PKG_LEVEL'] > params['record']['PKG_LEVEL']
              ? item['PKG_LEVEL'] - 1
              : item['PKG_LEVEL'];
          return item;
        });
      params['data'].value[name] = _data;
      useTables[name][1].setProps({
        dataSource: [],
      });
      args[6]({
        dataSource: params['data'],
      useTables[name][1].setProps({
        dataSource: params['data'].value[name],
      });
      args[1]();
      useTables[name][1].reload();
    } else {
      DeleteEntity(params['record'], params['entityName']).then((action) => {
        if (action.IsSuccessed) {
          args[1]();
          useTables[name][1].reload();
        }
      });
    }
@@ -308,8 +321,22 @@
      {
        title: '包装/载具编码',
        dataIndex: 'PKG_CODE',
        // ifShow: false,
        ifShow: false,
        width: 180,
      },
      {
        title: '包装/载具名称',
        dataIndex: 'PKG_NAME',
        ifShow: false,
        width: 180,
      },
      {
        title: '包装/载具',
        dataIndex: 'PKG_FULL',
        width: 180,
        customRender: ({ record }) => {
          return `${record.PKG_CODE} - ${record.PKG_NAME}`;
        },
      },
      {
        title: '包装层级',
@@ -342,31 +369,6 @@
  const crudForms = {
    BAS_PKG_DTL: [
      {
        field: 'PKG_CODE',
        label: '包装/载具编码',
        component: 'ApiSelect',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: {
          api: getEntity,
          params: { entityName: 'BAS_PKG_TYPE', sqlcmd: ' 1=1 ' },
          resultField: 'Data.Items',
          labelField: 'PKG_NAME',
          valueField: 'PKG_CODE',
        },
      },
      {
        label: '包装层级',
        field: 'PKG_LEVEL',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
      },
      {
        label: '包装规则ID',
        field: 'PKG_RULE_ID',
        component: 'Input',
@@ -378,6 +380,59 @@
        },
      },
      {
        label: '包装层级',
        field: 'PKG_LEVEL',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: ({ formModel }) => {
          formModel.PKG_LEVEL =
            _data['BAS_PKG_DTL'].reduce((max, item) => {
              return max < Number(item.PKG_LEVEL) ? Number(item.PKG_LEVEL) : max;
            }, 0) + 1;
          return {
            onChange: (e) => {},
          };
        },
        dynamicDisabled: ({ values }) => {
          return true;
        },
      },
      {
        field: 'PKG_CODE',
        label: '包装/载具编码',
        component: 'ApiSelect',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: ({ formModel }) => {
          let sqlcmd = ' 1=1 ';
          if (!isNullOrEmpty(record) && record['PKG_LEVEL'] == 1) {
            sqlcmd += ` And IS_MIN_PKG = 'Y'`;
          } else {
            if (formModel.PKG_LEVEL == 1) {
              sqlcmd += ` And IS_MIN_PKG = 'Y'`;
            } else {
              sqlcmd += ` And IS_MIN_PKG != 'Y'`;
            }
          }
          return {
            api: getEntity,
            params: { entityName: 'BAS_PKG_TYPE', sqlcmd: sqlcmd },
            resultField: 'Data.Items',
            labelField: 'PKG_NAME',
            valueField: 'PKG_CODE',
            onChange: (e, v) => {
              console.log('ApiSelect====>:', e, v);
              formModel.PKG_NAME = isNullOrUnDef(v) ? formModel.PKG_NAME : v.label;
            },
          };
        },
      },
      {
        label: '包装数量',
        field: 'PKG_QTY',
        component: 'Input',
@@ -386,6 +441,15 @@
        },
      },
      {
        label: '包装名称',
        field: 'PKG_NAME',
        component: 'Input',
        colProps: {
          span: 24,
        },
        show: false,
      },
      {
        label: '备注',
        field: 'REMARK',
        component: 'Input',