打印模板更新为高级页面

Ben Lin

2024-07-27 a82003f4cf9ae6b69f70212374b3a71090f1770f

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

@@ -1,13 +1,26 @@
/*
 * @Description: 产品工艺路线相关
 * @Description: 模板变量相关
 * @Author: Ben Lin
 * @version:
 * @Date: 2024-06-19 20:34:27
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 00:28:56
 * @LastEditTime: 2024-07-27 13:22:30
 */

import { ActionItem, BasicColumn } from "/@/components/Table";
import { Tag, Tooltip } from 'ant-design-vue';
import { ActionItem, BasicColumn, FormSchema, useTable } from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';
import { h, Ref, unref } from 'vue';
import { AddAfterDelete, getEntity, GetEnum } from '/@/api/tigerapi/system';
import { useLocale } from '/@/locales/useLocale';
import { useDrawer } from '/@/components/Drawer';
import { formatTime } from '/@/utils/dateUtil';
import { Search } from '../data';
import { buildUUID } from '/@/utils/uuid';

const { getLocale } = useLocale();

const { t } = useI18n();

function _default() {
  const ActionColumn: BasicColumn = {
@@ -17,12 +30,17 @@
    slots: { customRender: 'action' },
    fixed: undefined,
  };

  /**
   * @description: 一些自定义方法
   * @return {*}
   */
  const methods = {
    /**
     * @description: 获取新增按钮的行为，必需要有的方法
     * @return {*}
     */
    CreateAction: () => {
    CreateAction: (fnName: string) => {
      return {
        action: 'drawer', //drawer(打开左侧抽屉框) | go(跳转到新的页面)
      };
@@ -34,9 +52,789 @@
    ActionItem: (params: Recordable<any>, data, ...args): ActionItem[] => {
      return data;
    },
    /**
     * @description: 高级表单和详情页面返回主页面的url
     * @return {*}
     */
    GetHomeUrl: () => {
      return `/BAS_LABEL_TEMP/LC/${encodeURI(JSON.stringify({ ID: 'BAS_LABEL_TEMP', colSlots: [], crudColSlots: [] }))}`;
    }
    },
    /**
     * @description: 获取主信息
     * @return {*}
     */
    GetBaseForm: () => {
      return [
        {
          field: 'LABEL_CODE',
          label: '标签模板编码',
          component: 'Input',
          required: true,
          colProps: {
            span: 8,
          },
        },
        {
          label: '标签模板名称',
          field: 'LABEL_NAME',
          required: true,
          component: 'Input',
          colProps: {
            span: 8,
          },
        },
        {
          label: '模板类型',
          field: 'TEMP_TYPE',
          required: true,
          component: 'ApiSelect',
          colProps: {
            span: 8,
          },
          componentProps: {
            api: GetEnum,
            params: { name: 'BAS_LABEL_TEMP+TEMP_TYPEs' },
            resultField: 'Data',
            labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
            valueField: 'Value',
          },
        },
        {
          field: 'TEMP_PATH',
          label: '标签模板相对路径',
          component: 'Upload',
          isexist: 'N',
          show: true,
          required: true,
          colProps: {
            span: 8,
          },
        },
        {
          label: '备注',
          field: 'REMARK',
          component: 'Input',
          colProps: {
            span: 16,
          },
        },
        {
          label: 'ID',
          field: 'ID',
          component: 'Input',
          colProps: {
            span: 8,
          },
          show: false,
        },
      ];
    },
    GetBaseColumns: () => {
      return [];
    },
    GetSearchForm: () => {
      return [
        {
          field: 'VAR_NAME',
          label: t('变量名'),
          colProps: { span: 8 },
          component: 'Input',
        },
      ];
    },
    GetCrudForm: () => {
      let isShow = false;
      return [
        {
          field: 'ID',
          label: '变量ID',
          component: 'Input',
          colProps: {
            span: 20,
          },
          show: false,
        },
        {
          field: 'LABEL_ID',
          label: '标签模板ID',
          component: 'Input',
          colProps: {
            span: 20,
          },
          show: false,
        },
        {
          field: 'VAR_NAME',
          label: '变量名',
          required: true,
          component: 'Input',
          isexist: 'Y',
          colProps: {
            span: 20,
          },
        },
        {
          field: 'VAR_TYPE',
          label: '变量类型',
          component: 'ApiSelect',
          colProps: {
            span: 20,
          },
          componentProps: {
            api: GetEnum,
            params: { name: 'BAS_LABEL_VAR+VAR_TYPEs' },
            resultField: 'Data',
            labelField: unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name',
            valueField: 'Value',
            onChange: (e) => {
              if (e == 1) {
                isShow = true;
              } else {
                isShow = false;
              }
            },
          },
        },
        {
          field: 'VAR_VALUE',
          label: '变量值',
          required: true,
          component: 'Input',
          colProps: {
            span: 20,
          },
        },
        {
          field: 'BAS_LABEL_PV1PSelect_0', //按低代码配置的规则，实体名+序号+PSelect_0，序号用来区分多个的时候，PSelect_0这是个固定后缀
          label: '1',
          defaultValue: 'BAS_LABEL_PV',
          component: 'Input',
          colProps: { span: 4 },
          ifShow: ({ values }) => isShow,
          colSlot: 'BAS_LABEL_PV1add', //按低代码配置的规则，实体名+序号+add，序号用来区分多个的时候，add这是个固定后缀
        },
        {
          field: 'REMARK',
          label: '备注',
          component: 'Input',
          colProps: {
            span: 20,
          },
        },
      ];
    },
    KeyFieldValues: (val: string, id: string) => {
      return { LABEL_ID: id };
    },
    GetUseForm: () => {
      return {};
    },
    /**
     * @description: 获取标题信息
     * @param {string} type
     * @return {*}
     */
    GetTitle: () => {
      return {
        pageTitle: '打印模板管理',
        pageContent: '这里可以添加和修改模板和模板变量及工单模板变量。',
        tableTitle: {
          BAS_LABEL_VAR: '模板变量管理',
          MES_SHIFT_PRD: '时段管理',
        },
      };
    },
    /**
     * @description: 获取卡片内配置列表，以循环显示多个卡片并配置多个插槽
     * @return {*}
     */
    GetBaseCards: (type: string) => {
      return [
        {
          name: 'BaseForm',
          slots: [],
          preIcons: {},
          title: '模板信息',
          entityName: 'BAS_LABEL_TEMP',
        },
      ];
    },
    /**
     * @description: 获取右侧边框use方法
     * @return {*}
     */
    GetUseDrawers: () => {
      return [
        {
          BAS_LABEL_VAR: useDrawer(),
        },
        // { MES_SHIFT_PRD: useDrawer() },
      ];
    } /**
     * @description: 获取表格use列表
     * @param {string} type
     * @param {array} args
     * @return {*}
     */,
    GetUseTables: (data: Ref<{}>, ...args) => {
      // _data = data;
      return {
        BAS_LABEL_VAR: useTable({
          title: '列表信息',
          dataSource: data.value['BAS_LABEL_VAR'],
          columns: baseColumns['BAS_LABEL_VAR'],
          maxHeight: 560,
          formConfig: {
            labelWidth: 140,
            schemas: searchForms['BAS_LABEL_VAR'],
            submitFunc: () => Search('BAS_LABEL_VAR', data, args[0]), //自定义查询提交按钮的方法，触发查询提交事件
          },
          useSearchForm: false,
          showTableSetting: false,
          bordered: true,
          canResize: true,
          showIndexColumn: false,
          actionColumn: {
            width: 130,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
            fixed: 'right',
          }, //自定义操作列
        }),
        //  MES_SHIFT_PRD: useTable({
        //    title: '列表信息',
        //    dataSource: data.value['MES_SHIFT_PRD'],
        //    columns: baseColumns['MES_SHIFT_PRD'],
        //    maxHeight: 550,
        //    formConfig: {
        //      labelWidth: 140,
        //      schemas: searchForms['MES_SHIFT_PRD'],
        //      submitFunc: () => Search('MES_SHIFT_PRD', data, args[0]), //自定义查询提交按钮的方法，触发查询提交事件
        //    },
        //    useSearchForm: false,
        //    showTableSetting: false,
        //    bordered: true,
        //    canResize: false,
        //    showIndexColumn: false,
        //    actionColumn: {
        //      width: 130,
        //      title: '操作',
        //      dataIndex: 'action',
        //      slots: { customRender: 'action' },
        //      fixed: 'right',
        //    }, //自定义操作列
        //  }),
      };
    },
    /**
     * @description: 提交所有
     * @return {*}
     */
    SubmitAll: (data: Ref<any[]>, keyFieldValues: Ref<{}>, ...args) => {
      const drawers = [
        { name: 'BAS_LABEL_VAR', code: 'LABEL_ID', type: 'one', keyName: 'BAS_LABEL_VAR', order: 'VAR_NAME' },
        // { name: 'MES_SHIFT_PRD', code: 'SFT_CODE', type: 'all', keyName: 'MES_SHIFT', order: '' },
      ];
      drawers.forEach((d) => {
        let where = `${d['code']} = '${keyFieldValues.value[d['code']]}'`;
        /* type: all-表示需要code的所有的值 */
        if (d['type'] == 'all' && data.value[d['keyName']].length > 0) {
          where = `${d['code']} in (${data.value[d['keyName']].map((value) => `'${value[d['code']]}'`).join(',')})`;
        }
        data.value[d['name']].map((item) => {
          item.ID = buildUUID();
          // if (d['name'] == 'MES_SHIFT') {
          //   item.SFT_BEGIN = tsToHHmm(item.SFT_BEGIN);
          //   item.SFT_END = tsToHHmm(item.SFT_END);
          // }
          // if (d['name'] == 'MES_SHIFT_PRD') {
          //   item.PRD_BEGIN = tsToHHmm(item.PRD_BEGIN);
          //   item.PRD_END = tsToHHmm(item.PRD_END);
          // }
        });
        AddAfterDelete(d['name'], data.value[d['name']], where).then((action) => {
          if (action.IsSuccessed) {
            args[0]();
          }
        });
      });
    },
  };

  /* 以下是内部方法，不export */

  /**
   * @description: 表格基本字段
   * @return {*}
   */
  const baseColumns = {
    BAS_LABEL_VAR: [
      {
        dataIndex: 'LABEL_ID',
        title: '标签模板ID',
        ifShow: false,
        sorter: true,
        resizable: true,
      },
      {
        dataIndex: 'VAR_NAME',
        title: '变量名称',
        ifShow: true,
        sorter: true,
        resizable: true,
        customRender: () => {},
      },
      {
        dataIndex: 'VAR_TYPE',
        title: '变量类型',
        ifShow: true,
        sorter: true,
        resizable: true,
        customRender: ({ record }) => {
          let color = '';
          let text = '';
          switch (record.VAR_TYPE) {
            case 0:
              text = '常量';
              color = 'green';
              break;
            case 1:
              text = '过程变量';
              color = 'orange';
              break;
            case 2:
              text = '日期变量';
              color = '#4f68b0';
              break;
            case 3:
              text = '自定义变量';
              color = '#bfbfbf';
              break;
          }
          return h(Tooltip, { title: text }, () => h(Tag, { color: color }, () => text));
        },
      },
      {
        dataIndex: 'VAR_VALUE',
        title: '变量值',
        ifShow: true,
        sorter: true,
        resizable: true,
      },
      {
        dataIndex: 'REMARK',
        title: '备注',
        ifShow: true,
        sorter: true,
        resizable: true,
      },
    ],
    MES_SHIFT_PRD: [
      {
        title: '时段编码',
        dataIndex: 'PRD_CODE',
        // ifShow: false,
        width: 180,
      },
      {
        title: '时段名称',
        dataIndex: 'PRD_NAME',
      },
      {
        title: '班次编码',
        dataIndex: 'SFT_CODE',
      },
      {
        title: '时段开始时间',
        dataIndex: 'PRD_BEGIN',
        customRender: ({ record }) => {
          return formatTime(new Date(record.PRD_BEGIN));
        },
      },
      {
        title: '时段结束时间',
        dataIndex: 'PRD_END',
        customRender: ({ record }) => {
          return formatTime(new Date(record.PRD_END));
        },
      },
      {
        title: '是否跨天',
        dataIndex: 'IS_ACROSS',
        customRender: ({ record }) => {
          const type = record.IS_ACROSS;
          var text = '';
          var color = 'green';
          switch (type) {
            case 'Y':
              text = '是';
              break;
            case 'N':
              color = 'blue';
              text = '否';
              break;
          }
          return h(Tag, { color: color }, () => text);
        },
      },
      {
        title: '是否休息时段',
        dataIndex: 'IS_REST',
        customRender: ({ record }) => {
          const type = record.IS_REST;
          var text = '';
          var color = 'green';
          switch (type) {
            case 'Y':
              text = '是';
              break;
            case 'N':
              color = 'blue';
              text = '否';
              break;
          }
          return h(Tag, { color: color }, () => text);
        },
      },
      {
        title: '时段排序',
        dataIndex: 'SEQ',
      },
      {
        title: '备注',
        dataIndex: 'REMARK',
      },
      {
        title: '更新时间',
        dataIndex: 'UPDATE_TIME',
      },
      {
        title: '更新人',
        dataIndex: 'UPDATE_USER',
      },
    ],
  };

  /**
   * @description: 查询字段
   * @return {*}
   */
  const searchForms = {
    MES_SHIFT: [
      {
        field: 'SFT_CODE',
        label: '班次编码',
        component: 'Input',
        colProps: {
          span: 8,
        },
      },
      {
        label: '班次名称',
        field: 'SFT_NAME',
        component: 'Input',
        colProps: {
          span: 8,
        },
      },
    ] as FormSchema[],
    MES_SHIFT_PRD: [
      {
        field: 'PRD_CODE',
        label: '时段编码',
        component: 'Input',
        colProps: {
          span: 8,
        },
      },
      {
        label: '时段名称',
        field: 'PRD_NAME',
        component: 'Input',
        colProps: {
          span: 8,
        },
      },
    ] as FormSchema[],
  };

  const crudForms = {
    MES_SHIFT: [
      {
        field: 'SFT_CODE',
        label: '班次编码',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
      },
      {
        label: '班次名称',
        field: 'SFT_NAME',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
      },
      {
        label: '班制编码',
        field: 'SFTS_CODE',
        component: 'ApiSelect',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: {
          api: getEntity,
          params: { entityName: 'MES_SHIFT_SYS', sqlcmd: ' 1=1 ' },
          resultField: 'Data.Items',
          labelField: 'SFTS_NAME',
          valueField: 'SFTS_CODE',
        },
        dynamicDisabled: ({ values }) => {
          return true;
        },
      },
      // {
      //   label: '班次时间范围',
      //   field: '[SFT_BEGIN, SFT_END]',
      //   component: 'TimeRangePicker',
      //   colProps: {
      //     span: 24,
      //   },
      //   componentProps: ({ formModel }) => {
      //     return {
      //       format: 'HH:mm',
      //       placeholder: ['开始时间', '结束时间'],
      //       onChange: (e) => {
      //         const timeRange: any = e;
      //         console.log(e);
      //         // if (timeRange) {
      //         //   formModel.SFT_BEGIN = Number(`${tsToHHmm(timeRange[0].$d)}`);
      //         //   formModel.SFT_END = Number(`${tsToHHmm(timeRange[1].$d)}`);
      //         // }
      //       },
      //     };
      //   },
      // },
      {
        label: '班次开始时间',
        field: 'SFT_BEGIN',
        component: 'TimePicker',
        colProps: {
          span: 12,
        },
        componentProps: ({ formModel }) => {
          return {
            format: 'HH:mm',
          };
        },
        // show: false,
      },
      {
        label: '结束时间',
        field: 'SFT_END',
        component: 'TimePicker',
        colProps: {
          span: 12,
        },
        componentProps: ({ formModel }) => {
          return {
            format: 'HH:mm',
          };
        },
        // show: false,
      },
      {
        label: '是否跨天',
        field: 'IS_ACROSS_DAY',
        component: 'Select',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: {
          options: [
            {
              label: '是',
              value: 'Y',
              key: 'Y',
            },
            {
              label: '否',
              value: 'N',
              key: 'N',
            },
          ],
        },
      },
      // {
      //   field: 'LOGIN_TIME',
      //   label: '登录时间',
      //   defaultValue: '',
      //   component: 'RangePicker',
      //   ifShow: true,
      //   colProps: { span: 8 },
      // },
      {
        label: '备注',
        field: 'REMARK',
        component: 'Input',
        colProps: {
          span: 24,
        },
      },
      {
        label: 'ID',
        field: 'ID',
        component: 'Input',
        colProps: {
          span: 24,
        },
        show: false,
      },
    ] as FormSchema[],
    MES_SHIFT_PRD: [
      {
        field: 'PRD_CODE',
        label: '时段编码',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
      },
      {
        label: '时段名称',
        field: 'PRD_NAME',
        component: 'Input',
        required: true,
        colProps: {
          span: 24,
        },
      },
      {
        label: '班次编码',
        field: 'SFT_CODE',
        component: 'Select',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: () => {
          const options = _data['MES_SHIFT'].map((entity) => ({
            value: entity.SFT_CODE,
            label: entity.SFT_NAME,
          }));
          return {
            options: options,
          };
        },
        // dynamicDisabled: ({ values }) => {
        //   return true;
        // },
      },
      {
        label: '时段开始时间',
        field: 'PRD_BEGIN',
        component: 'TimePicker',
        colProps: {
          span: 12,
        },
        componentProps: ({ formModel }) => {
          return {
            format: 'HH:mm',
          };
        },
      },
      {
        label: '结束时间',
        field: 'PRD_END',
        component: 'TimePicker',
        colProps: {
          span: 12,
        },
        componentProps: ({ formModel }) => {
          return {
            format: 'HH:mm',
          };
        },
      },
      {
        label: '时段排序',
        field: 'SEQ',
        component: 'InputNumber',
        colProps: {
          span: 24,
        },
      },
      {
        label: '是否跨天',
        field: 'IS_ACROSS',
        component: 'Select',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: {
          options: [
            {
              label: '是',
              value: 'Y',
              key: 'Y',
            },
            {
              label: '否',
              value: 'N',
              key: 'N',
            },
          ],
        },
      },
      {
        label: '是否休息时段',
        field: 'IS_REST',
        component: 'Select',
        required: true,
        colProps: {
          span: 24,
        },
        componentProps: {
          options: [
            {
              label: '是',
              value: 'Y',
              key: 'Y',
            },
            {
              label: '否',
              value: 'N',
              key: 'N',
            },
          ],
        },
      },
      {
        label: '备注',
        field: 'REMARK',
        component: 'Input',
        colProps: {
          span: 24,
        },
      },
      {
        label: 'ID',
        field: 'ID',
        component: 'Input',
        colProps: {
          span: 24,
        },
        show: false,
      },
    ] as FormSchema[],
  };

  return [methods, ActionColumn];