Ben Lin
2024-06-13 28cd71d5ff26ca539e48a229eed4055df7cae5ad
打印模板更新
已删除1个文件
已修改7个文件
已添加4个文件
1432 ■■■■ 文件已修改
src/api/tigerapi/system.ts 35 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Upload/src/props.ts 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/components/CustModal.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/components/bizMesWo.ts 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/data.ts 49 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/detail/basLabelVar.ts 241 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/detail/data.ts 64 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/detail/index.vue 327 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/normal/index.vue 474 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/normal/normalDrawer.vue 114 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/normalDrawer.vue 106 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/tigerprojects/system/lowcode/setting/pageDetail.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/tigerapi/system.ts
@@ -31,7 +31,7 @@
  iSYS_ROLE_PROD,
} from './model/systemModel';
import { defHttp } from '/@/utils/http/axios';
import { isDate, isNullOrEmpty, isTimeType } from '/@/utils/is';
import { isArray, isDate, isNullOrEmpty, isTimeType } from '/@/utils/is';
import { MES_ROUTE_EDGE, MES_ROUTE_NODE } from './model/router';
export enum Api {
@@ -875,30 +875,17 @@
  );
};
/*
 * è½¬æ¢å·¥è‰ºè·¯çº¿ä¸ºæ ‘å½¢json
/**
 * @description: åˆ¤æ–­ä¿å­˜çš„值如果是[]数组的,就直接取[0]第一个值,一般针对上传模板的地址
 * @param {any} values
 * @return {*}
 */
function convertRouteToTreeData(
  nodes: MES_ROUTE_NODE[],
  edges: MES_ROUTE_EDGE[],
  parentId: string,
  id: string,
  pid?: string,
) {
  const result: treeParamsListItem[] = [];
  let temp: treeParamsListItem[] = [];
  const _pid = pid == undefined ? '' : pid;
  for (let i = 0; i < nodes.length; i++) {
    const currPid = data[i][parentId] == null ? '' : data[i][parentId];
    if (currPid === _pid) {
      const obj: treeParamsListItem = data[i];
      obj.PARAM_TYPE = _pid == '' ? '0' : '1'; //增加类型
      temp = convertToTreeData(data, parentId, id, data[i][id]);
      if (temp.length > 0) {
        obj.children = temp;
      }
      result.push(obj);
export function formatValues(values: any) {
  const Keys = Object.getOwnPropertyNames(values);
  for (const k in Keys) {
    if(isArray(values[Keys[k]])){
      values[Keys[k]] = values[Keys[k]][0];
    }
  }
  return result;
  return values;
}
src/components/Upload/src/props.ts
@@ -1,3 +1,11 @@
/*
 * @Description: file content
 * @Author: your name
 * @version:
 * @Date: 2024-03-24 11:16:46
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 14:47:33
 */
import type { PropType } from 'vue';
import { FileBasicColumn } from './typing';
src/views/components/CustModal.vue
@@ -3,8 +3,8 @@
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-06-05 15:46:07
 * @LastEditors: your name
 * @LastEditTime: 2024-06-10 23:48:05
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-13 09:28:27
-->
<template>
  <BasicModal
src/views/components/bizMesWo.ts
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-05 16:10:24
 * @LastEditors: your name
 * @LastEditTime: 2024-06-10 23:49:39
 * @LastEditTime: 2024-06-13 14:46:20
 */
/* å·¥å•相关自定义方法 */
import { FunctionType } from '/@/api/tigerapi/model/systemModel';
@@ -27,6 +27,7 @@
import AssemblyNode from '/@/components/FlowChart/src/AssemblyNode';
import PackingNode from '/@/components/FlowChart/src/PackingNode';
import RepairNode from '/@/components/FlowChart/src/RepairNode';
import { multiply } from 'lodash-es';
const { t } = useI18n();
const { getLocale } = useLocale();
@@ -335,6 +336,7 @@
    rules: [{ required: true, message: '请选择上传文件' }],
    componentProps: {
      api: uploadApi,
      multiple: false,
    },
  },
];
src/views/tigerprojects/system/lowcode/data.ts
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-02 17:52:35
 * @LastEditors: your name
 * @LastEditTime: 2024-06-11 01:59:13
 * @LastEditTime: 2024-06-13 22:44:43
 */
import { ref } from 'vue';
import {
@@ -21,6 +21,8 @@
import { isNullOrEmpty } from '/@/utils/is';
import { woCustFn, woformSchema } from '/@/views/components/bizMesWo';
import { useModal } from '/@/components/Modal';
import { useGo } from '/@/hooks/web/usePage';
import { goDetail, labelActionItem, labelGetSelectSuccess, labelOpenSelectItem } from './detail/basLabelVar';
const { t } = useI18n();
@@ -47,6 +49,7 @@
    },
  ] as ActionItem[];
  switch (params['entityName']) {
    /* ä¸è‰¯ä»£ç ç»„ */
    case 'BAS_DEFECT_GRP':
      const _d = dftGrpActionItem;
      _d[0].onClick = DftGrpRelease.bind(null, args, params);
@@ -63,6 +66,12 @@
          showActionButtonGroup: false,
        }),
      };
      break;
      /* æ ‡ç­¾æ¨¡æ¿ */
    case 'BAS_LABEL_TEMP':
      const _data = labelActionItem;
      _data[0].onClick = goDetail.bind(null, args[5], params['record'])
      data = [...data, ..._data];
      break;
  }
  return data;
@@ -83,26 +92,48 @@
  return data;
}
/**
 * @description: å…¬ç”¨ç¼–辑方法
 * @param {Fn} fn
 * @param {*} params
 * @return {*}
 */
function editRecord(fn: Fn, params: {}) {
  fn(true, params);
}
/**
 * @description: å…¬ç”¨åˆ é™¤æ–¹æ³•
 * @param {Fn} fn
 * @param {*} params
 * @return {*}
 */
function deleteRecord(fn: Fn, params: {}) {
  console.log(params['record']);
  //删除
  const apiAction = DeleteEntity(params['record'], params['entityName']);
  apiAction.then((action) => {
  DeleteEntity(params['record'], params['entityName']).then((action) => {
    if (action.IsSuccessed) {
      fn();
    }
  });
}
export function GetActionColumn(entityName: string) {
  let data: BasicColumn = {};
  switch (entityName) {
    case 'BAS_DEFECT_GRP':
      data = dftGrpactionColumn;
      break;
    case 'BAS_LABEL_TEMP':
      data = {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      };
      break;
    default:
      data = {
@@ -127,6 +158,9 @@
    case 'BAS_REASON_GRP':
      data = rsGrpGetSelectSuccess(d, u);
      break;
      case 'BAS_LABEL_PV':
        data = labelGetSelectSuccess(d, u);
        break;
    default:
      data = {
        ITEM_CODE: d.values['val'],
@@ -150,6 +184,9 @@
    case 'BAS_REASON_GRP':
      rsGrpOpenSelectItem(openItemModal);
      break;
      case 'BAS_LABEL_PV':
        labelOpenSelectItem(openItemModal);
        break;
    default:
      openItemModal(true, {
        title: '物料列表',
@@ -201,10 +238,10 @@
        break;
      default:
        break;
        (e) => {};
        (e) => { };
    }
  } else {
    (e) => {};
    (e) => { };
  }
}
@@ -282,7 +319,7 @@
    // break;
    default:
      break;
      (e) => {};
      (e) => { };
  }
  return _formSchema;
}
src/views/tigerprojects/system/lowcode/detail/basLabelVar.ts
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
/*
 * @Description: file content
 * @Author: Ben Lin
 * @version:
 * @Date: 2024-06-13 16:18:39
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 22:47:11
 */
import { h, unref } from "vue";
import { ActionItem, BasicColumn, FormSchema } from "/@/components/Table";
import { Tag, Tooltip } from "ant-design-vue";
import { GetEnum } from "/@/api/tigerapi/system";
import { useLocale } from "/@/locales/useLocale";
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const { getLocale } = useLocale();
export const firstColumns: BasicColumn[] = [
    {
        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,
    }];
export const secondColumns: BasicColumn[] = [];
let isShow = true;
export const firstFormSchemas: FormSchema[] = [
    {
        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',
        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",
        label:"1",
        defaultValue:"BAS_LABEL_PV",
        component:"Input",
        colProps:{"span":4},
        ifShow: ({ values }) => isShow,
        colSlot:"BAS_LABEL_PV1add"
    },
    {
        field: 'REMARK',
        label: '备注',
        component: 'Input',
        colProps: {
            span: 20,
        },
    },
];
export const secondFormSchemas: FormSchema[] = [];
export const firstSearchForm: FormSchema[] = [
    {
        field: 'VAR_NAME',
        label: t('变量名'),
        colProps: { span: 8 },
        component: 'Input',
    },
];
export const labelActionItem: ActionItem[] = [
    {
        icon: 'clarity:info-standard-line',
        tooltip: '模板变量',
        onClick: () => { },
    },
];
/**
 * @description: è·³è½¬åˆ°è¯¦æƒ…页面方法
 * @param {Fn} go
 * @return {*}
 */
export function goDetail(go: Fn, record: Recordable) {
    const id = {
        ID: 'BAS_LABEL_VAR',
        firstTabName: '标签模板变量',
        secondTabName:'', //'标签过程变量',
        firstTitle: '模板变量',
        secondTitle: '', //'过程变量',
        contentStr: '这里是标签模板变量管理页面,可以管理标签的模板变量或者打印过程中的变量',
        detailName: `模板[${record.LABEL_NAME}]`,
        others: { LABEL_ID: record.ID },
        colSlots: ['BAS_LABEL_PV1add'],
    };
    go(`/BAS_LABEL_VAR/${encodeURI(JSON.stringify(id))}`);
}
export function labelOpenSelectItem(openItemModal: Fn) {
    openItemModal(true, {
      title: '过程变量列表',
      schemas: [
        {
          field: 'VAR_CODE',
          component: 'Input',
          label: '过程变量编码',
          colProps: {
            span: 12,
          },
        },
      ],
      ItemColumns: [
        {
          title: t('过程变量编码'),
          dataIndex: 'VAR_CODE',
          resizable: true,
          sorter: true,
          width: 200,
        },
        {
          title: t('过程变量名称'),
          dataIndex: 'VAR_NAME',
          resizable: true,
          sorter: true,
          width: 180,
        },
      ],
      tableName: 'BAS_LABEL_PV',
      rowKey: 'VAR_CODE',
    });
  }
  /**
   * @description: é€‰æ‹©è¿‡ç¨‹å˜é‡å¼¹å‡ºé€‰æ‹©æ¡†æˆåŠŸè¿”å›žèµ‹å€¼æ–¹æ³•
   * @param {*} d
   * @param {*} u
   * @return {*}
   */
  export function labelGetSelectSuccess(d, u) {
    return {
        VAR_VALUE: d.values['val'],
    };
  }
src/views/tigerprojects/system/lowcode/detail/data.ts
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
/*
 * @Description: file content
 * @Author: Ben Lin
 * @version:
 * @Date: 2024-06-13 10:59:53
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 20:23:02
 */
import { firstColumns, firstFormSchemas, firstSearchForm, secondColumns, secondFormSchemas } from "./basLabelVar";
import { BasicColumn, FormSchema } from "/@/components/Table";
/**
 * @description: èŽ·å–è¡¨æ ¼å­—æ®µ
 * @param {string} entityName
 * @param {string} type
 * @return {*}
 */
export function GetBaseColumns(entityName: string, type: string) {
    let data: BasicColumn[] = [];
    switch (entityName) {
        case 'BAS_LABEL_VAR':
            data =type=='detailfirst'? firstColumns: secondColumns;
            break;
        default:
            break;
    }
    return data;
}
/**
 * @description: èŽ·å–å¢žåˆ æ”¹è¡¨å•å­—æ®µ
 * @param {string} entityName
 * @param {string} type
 * @return {*}
 */
export function GetFormColumns(entityName: string, type: string) {
    let data: FormSchema[] = [];
    switch (entityName) {
        case 'BAS_LABEL_VAR':
            data =type=='detailfirst'? firstFormSchemas: secondFormSchemas;
            break;
        default:
            break;
    }
    return data;
}
/**
 * @description: èŽ·å–æŸ¥è¯¢è¡¨å•å­—æ®µ
 * @param {string} entityName
 * @param {string} type
 * @return {*}
 */
export function GetSearchFormColumns(entityName: string, type: string) {
    let data: FormSchema[] = [];
    switch (entityName) {
        case 'BAS_LABEL_VAR':
            data =type=='detailfirst'? firstSearchForm: secondFormSchemas;
            break;
        default:
            break;
    }
    return data;
}
src/views/tigerprojects/system/lowcode/detail/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,327 @@
<!--
 * @Description: ä½Žä»£ç è¯¦æƒ…呈现页面
 * @Author: Ben Lin
 * @version:
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 22:08:57
-->
<template>
  <PageWrapper :title="title" :content="contentStr" contentBackground @back="goBack">
    <template #footer>
      <a-tabs default-active-key="detail" v-model:activeKey="currentKey" @tabClick="tabClkcallback">
        <a-tab-pane key="detailfirst" :tab="firstTabName" />
        <a-tab-pane key="detailsecond" :tab="secondTabName" />
      </a-tabs>
    </template>
    <div>
      <div v-if="currentKey == 'detailfirst'">
        <BasicTable @register="detailTable">
          <template #toolbar>
            <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> æ–°å¢ž </a-button>
          </template>
          <template #action="{ record }">
            <TableAction :actions="[
              {
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除?',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]" />
          </template>
          <template #[item]="{ field }" v-for="item in colSlots" :key="item">
            <a-button v-if="field" class="mt-1 ml-1" size="small" @click="handleSelectItem(item)"
              preIcon="search|svg" />
            <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
          </template>
        </BasicTable>
      </div>
      <div v-if="currentKey == 'detailsecond'">
        <BasicTable @register="detailsecondTable">
          <template #toolbar>
            <a-button type="primary" @click="secondCreate" preIcon="add_02|svg"> æ–°å¢ž </a-button>
          </template>
          <template #[item]="{ field }" v-for="item in secondColSlots" :key="item">
            <a-button v-if="field" class="mt-1 ml-1" size="small" @click="handleSelectItem(item)"
              preIcon="search|svg" />
            <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
          </template>
        </BasicTable>
      </div>
    </div>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <CustModal @register="registerCust" @success="custSuccess" :type="cType" :detailSlots="dtlSlots">
      <!-- ç”¨æ’槽自定义多表单 -->
      <template #[item.name] v-for="item in dtlSlots" :key="item.name">
        <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]">
          <!-- ç”¨æ’槽自定义弹出选择框 -->
          <template #[name]="{ field }" v-for="name in item.slots" :key="name">
            <a-button class="mt-1 ml-1" size="small" @click="handleCustClick(field)" :preIcon="item.preIcons[name]" />
            <NormalModal @register="useModalData[name][0]" @success="(d, u) => handleEntSuccess(d, u, item.name)" />
          </template>
        </BasicForm>
        <!-- è‡ªå®šä¹‰å†…容 -->
      </template>
    </CustModal>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { PageWrapper } from '/@/components/Page';
import { useTabs } from '/@/hooks/web/useTabs';
import { Tabs } from 'ant-design-vue';
import { useGo } from '/@/hooks/web/usePage';
//详情列表
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { GetSelectSuccess, OpenCustModal, OpenSelectItem, custOnChange } from '../data';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
import { useDrawer } from '/@/components/Drawer';
import normalDrawer from '../normalDrawer.vue';
import NormalModal from '/@/views/components/NormalModal.vue';
import CustModal from '/@/views/components/CustModal.vue';
import { BasicForm } from '/@/components/Form/index';
import { useGlobSetting } from '/@/hooks/setting';
import { useModal } from '/@/components/Modal';
import { GetBaseColumns, GetFormColumns, GetSearchFormColumns } from './data';
const { t: bt } = useI18n('');
const { createMessage } = useMessage();
const route = useRoute();
const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
const ATabs = ref(Tabs);
const ATabPane = ref(Tabs.TabPane);
var ITEM_CODE = ref('');
const go = useGo();
const title = ref(objParams.value.title);
const firstTitle = ref(objParams.value.firstTitle);
const secondTitle = ref(objParams.value.secondTitle);
const contentStr = ref(objParams.value.contentStr);
const firstTabName = ref(objParams.value.firstTabName);
const secondTabName = ref(objParams.value.secondTabName);
const entityName = ref(objParams.value.ID);
const detailName = ref(objParams.value.detailName);
const globSetting = useGlobSetting();
const _columns = ref([]);
const _searchFormSchema = ref([]);
const _crudFormSchema = ref([]);
const formSchemas = ref({}); //弹出框多表单结构
const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
const useFormData = ref({});
const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽
const secondColSlots = ref<any>(objParams.value.secondColSlots); //按钮插槽
const crudColSlots = ref<any>(objParams.value.colSlots);
const cType = ref('');
const dtlSlots = ref([] as any[]);
const selectVals = ref({});
//获取JobId
const BILLCODE = ref(route.params?.BillCode);
const [registerCust] = useModal();
const [registerItemAdd, { openModal: openItemModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
const [detailTable, { reload: reloadFirst }] = useTable({
  title: `${firstTitle.value}列表`,
  api: getListByPage,
  searchInfo: { TABLE_NAME: entityName.value, ...objParams.value.others},
  columns: GetBaseColumns(entityName.value, 'detailfirst'),
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  canResize: true,
  showIndexColumn: false,
  formConfig: {
    labelWidth: 120,
    schemas: GetSearchFormColumns(entityName.value, 'detailfirst'),
  },
  actionColumn: {
    width: 80,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right', //undefined,
  },
  // searchInfo: { BILLCODE },
});
const [detailsecondTable, { getForm, reload }] = useTable({
  title: `${secondTitle.value}列表`,
  api: getListByPage,
  columns: GetBaseColumns(entityName.value, 'detailsecond'),
  formConfig: {
    labelWidth: 120,
    schemas: GetFormColumns(entityName.value, 'detailsecond'),
    model: { ITEM_CODE: ITEM_CODE },
  },
  useSearchForm: true,
  // searchInfo: { BILLCODE },
  showTableSetting: false,
  bordered: true,
  canResize: true,
  showIndexColumn: false,
});
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    entityName: objParams.value.ID,
    formJson: GetFormColumns(entityName.value, 'detailfirst'),
    crudColSlots,
    others: objParams.value.others,
  });
}
function secondCreate() {
  openDrawer(true, {
    isUpdate: false,
    entityName: objParams.value.ID,
    formJson: _crudFormSchema.value,
    crudColSlots,
  });
}
// æ­¤å¤„可以得到用户ID
//const BILLCODE = ref(route.params?.BILLCODE.split(',')[1]);
var currentKey = ref('detailfirst');
const { setTitle } = useTabs();
// TODO
// æœ¬é¡µä»£ç ä»…作演示,实际应当通过userId从接口获得用户的相关资料
// è®¾ç½®Tab的标题(不会影响页面标题)
setTitle(`详情:${detailName.value}`);
// é¡µé¢å·¦ä¾§ç‚¹å‡»è¿”回链接时的操作
function goBack() {
  // æœ¬ä¾‹çš„æ•ˆæžœæ—¶ç‚¹å‡»è¿”回始终跳转到账号列表页,实际应用时可返回上一页
  go('/CheckRule');
}
const tabClkcallback = (val: string) => {
  if (val == 'detailfirst') {
    ITEM_CODE.value = '';
  }
};
/**
 * @description: detailfirst tab中的表格编辑记录弹出侧边框方法
 * @param {*} record
 * @return {*}
 */
function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    entityName: objParams.value.ID,
    formJson: GetFormColumns(entityName.value, 'detailfirst'),
    crudColSlots,
  });
}
/**
 * @description: detailfirst tab中的表格删除记录方法
 * @param {*} record
 * @return {*}
 */
function handleDelete(record: Recordable) {
  console.log(record);
  //删除
  DeleteEntity(record, entityName.value).then((action) => {
    if (action.IsSuccessed) {
      reloadFirst();
    }
  });
}
/**
 * @description: detailfirst tab中增删改成功返回方法
 * @return {*}
 */
function handleSuccess() {
  reloadFirst();
}
/**
 * @description: å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶
 * @param {*} d
 * @param {*} u
 * @param {*} item
 * @return {*}
 */
function handleItemSuccess(d, u, item) {
  getForm().setFieldsValue(GetSelectSuccess(d, u, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]));
}
/**
 * @description: å¼¹å‡ºé€‰æ‹©æ¡†
 * @param {*} item
 * @return {*}
 */
function handleSelectItem(item) {
  OpenSelectItem(openItemModal, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]);
}
/**
 * @description: Select è‡ªå®šä¹‰onChange方法
 * @param {*} obj
 * @return {*}
 */
function onChangeConfig(obj: any) {
  if (obj.component == 'Select') {
    var options = obj.componentProps.options;
    var onChange = obj.componentProps.onChange;
    obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
      return {
        options: options,
        onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
      };
    };
  }
}
/**
 * @description: è‡ªå®šä¹‰å¼¹å‡ºæ¡†ç¡®å®šè¿”回
 * @param {*} d
 * @return {*}
 */
function custSuccess(d) {
  reload();
}
/**
 * @description: å„表单内弹出选择框选择成功后方法
 * @param {*} d
 * @param {*} u
 * @param {*} item
 * @return {*}
 */
function handleEntSuccess(d, u, item) {
  var values = GetSelectSuccess(d, u, cType.value);
  selectVals.value = values; //保存弹出框选择的结果
  let _val = {};
  _val[d.returnFieldName] = values[d.returnFieldName];
  useFormData.value[item][1].setFieldsValue(_val);
}
/**
 * @description: æ‰“开自定义模态框
 * @param {*} item
 * @return {*}
 */
function handleCustClick(item) {
  OpenCustModal(
    useModalData.value[item][1].openModal, //带入openModal方法
    cType.value,
    item,
    [],
    // selectVals.value['ROUTE_CODE'],
  ); //[openRvModal], selectVals.value['ID']这是自定义参数,按实际需求
}
</script>
src/views/tigerprojects/system/lowcode/normal/index.vue
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: your name
 * @LastEditTime: 2024-06-11 01:27:02
 * @LastEditTime: 2024-06-13 14:54:54
-->
<template>
  <div>
@@ -16,39 +16,20 @@
        <TableAction :actions="createActions(record)" />
      </template>
      <template #[item]="{ field }" v-for="item in colSlots" :key="item">
      <!-- <template #form-BAS_REASON3aadd="{ field }"> -->
        <a-button
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem(item)"
          preIcon="search|svg"
        />
        <!-- <template #form-BAS_REASON3aadd="{ field }"> -->
        <a-button v-if="field" class="mt-1 ml-1" size="small" @click="handleSelectItem(item)" preIcon="search|svg" />
        <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
      </template>
    </BasicTable>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <CustModal
      @register="registerCust"
      @success="custSuccess"
      :type="cType"
      :detailSlots="dtlSlots"
    >
    <CustModal @register="registerCust" @success="custSuccess" :type="cType" :detailSlots="dtlSlots">
      <!-- ç”¨æ’槽自定义多表单 -->
      <template #[item.name] v-for="item in dtlSlots" :key="item.name">
        <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]">
          <!-- ç”¨æ’槽自定义弹出选择框 -->
          <template #[name]="{ field }" v-for="name in item.slots" :key="name">
            <a-button
              class="mt-1 ml-1"
              size="small"
              @click="handleCustClick(field)"
              :preIcon="item.preIcons[name]"
            />
            <NormalModal
              @register="useModalData[name][0]"
              @success="(d, u) => handleEntSuccess(d, u, item.name)"
            />
            <a-button class="mt-1 ml-1" size="small" @click="handleCustClick(field)" :preIcon="item.preIcons[name]" />
            <NormalModal @register="useModalData[name][0]" @success="(d, u) => handleEntSuccess(d, u, item.name)" />
          </template>
        </BasicForm>
        <!-- è‡ªå®šä¹‰å†…容 -->
@@ -57,238 +38,249 @@
  </div>
</template>
<script lang="ts" setup>
  import { h, onMounted, ref, unref } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
  import { useDrawer } from '/@/components/Drawer';
  import normalDrawer from './normalDrawer.vue';
  import NormalModal from '/@/views/components/NormalModal.vue';
  import { GetEnum, getEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useRoute } from 'vue-router';
  import { Tag, Tooltip } from 'ant-design-vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { BasicForm, FormActionType, useForm } from '/@/components/Form/index';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import {
    GetActionColumn,
    GetActionsData,
    OpenSelectItem,
    GetSelectSuccess,
    custOnChange,
    getFormSchema,
    OpenCustModal,
    GetUseModalData,
  } from '../data';
  import { useModal } from '/@/components/Modal';
  import { useLocale } from '/@/locales/useLocale';
import { h, onMounted, ref, unref } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import normalDrawer from '../normalDrawer.vue';
import NormalModal from '/@/views/components/NormalModal.vue';
import { GetEnum, getEntity, getListByPage } from '/@/api/tigerapi/system';
import { useGlobSetting } from '/@/hooks/setting';
import { useRoute } from 'vue-router';
import { Tag, Tooltip } from 'ant-design-vue';
import CustModal from '/@/views/components/CustModal.vue';
import { BasicForm, FormActionType, useForm } from '/@/components/Form/index';
import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
import {
  GetActionColumn,
  GetActionsData,
  OpenSelectItem,
  GetSelectSuccess,
  custOnChange,
  getFormSchema,
  OpenCustModal,
  GetUseModalData,
} from '../data';
import { useModal } from '/@/components/Modal';
import { useLocale } from '/@/locales/useLocale';
import { uploadApi } from '/@/api/sys/upload';
import { useGo } from '/@/hooks/web/usePage';
  const { getLocale } = useLocale();
  const route = useRoute();
  const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
  const entityName = ref(objParams.value.ID);
  const globSetting = useGlobSetting();
  const _columns = ref([]);
  const _searchFormSchema = ref([]);
  const _crudFormSchema = ref([]);
  const formSchemas = ref({}); //弹出框多表单结构
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽
  const crudColSlots = ref<any>(objParams.value.crudColSlots);
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const selectVals = ref({});
const { getLocale } = useLocale();
const route = useRoute();
const go = useGo();
const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
const entityName = ref(objParams.value.ID);
const globSetting = useGlobSetting();
const _columns = ref([]);
const _searchFormSchema = ref([]);
const _crudFormSchema = ref([]);
const formSchemas = ref({}); //弹出框多表单结构
const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
const useFormData = ref({});
const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽
const crudColSlots = ref<any>(objParams.value.crudColSlots);
const cType = ref('');
const dtlSlots = ref([] as any[]);
const selectVals = ref({});
  const [registerCust, { openModal: openCustomModal, closeModal }] = useModal();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { getForm, reload }] = useTable({
    title: '列表信息',
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams.value.ID },
    columns: _columns as unknown as BasicColumn[],
    formConfig: {
      labelWidth: 140,
      schemas: _searchFormSchema as unknown as FormSchema[],
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: GetActionColumn(objParams.value.ID), //自定义操作列
  });
  /* ç”Ÿæˆåˆ—表中操作项的按钮 */
  function createActions(record) {
    return GetActionsData(
      {
        record,
        isUpdate: true,
        entityName: objParams.value.ID,
        formJson: _crudFormSchema.value,
        cType,
        dtlSlots,
        formSchemas,
        useModalData,
        useFormData,
        crudColSlots,
      },
      openDrawer,
      reload,
      openCustomModal,
      useForm,
      useModal,
    );
  }
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
const [registerCust, { openModal: openCustomModal, closeModal }] = useModal();
const [registerItemAdd, { openModal: openItemModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable, { getForm, reload }] = useTable({
  title: '列表信息',
  api: getListByPage,
  searchInfo: { TABLE_NAME: objParams.value.ID },
  columns: _columns as unknown as BasicColumn[],
  formConfig: {
    labelWidth: 140,
    schemas: _searchFormSchema as unknown as FormSchema[],
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  canResize: true,
  showIndexColumn: false,
  actionColumn: GetActionColumn(objParams.value.ID), //自定义操作列
});
/* ç”Ÿæˆåˆ—表中操作项的按钮 */
function createActions(record) {
  return GetActionsData(
    {
      record,
      isUpdate: true,
      entityName: objParams.value.ID,
      formJson: _crudFormSchema.value,
      cType,
      dtlSlots,
      formSchemas,
      useModalData,
      useFormData,
      crudColSlots,
    });
  }
    },
    openDrawer,
    reload,
    openCustomModal,
    useForm,
    useModal,
    go,
  );
}
  function handleSuccess() {
    reload();
  }
  onMounted(async () => {
    /* ç”¨json获取列 */
    // _searchFormSchema.value = await fetchJson(
    //   `${globSetting.downloadUrl}/LowCode/${objParams.value.ID}/${objParams.value.ID}_Searchform.json`,
    // );
    // var objs = await fetchJson(
    //   `${globSetting.downloadUrl}/LowCode/${objParams.value.ID}/${objParams.value.ID}_Baseform.json`,
    // );
    // for (const i in objs) {
    //   if (!isNullOrEmpty(objs[i].customRender)) {
    //     const func = new Function(objs[i].customRender)();
    //     objs[i].customRender = ({ record }) => {
    //       let texts = func(record);
    //       return h(Tooltip, { title: texts.text }, () =>
    //         h(Tag, { color: texts.color }, () => texts.text),
    //       );
    //     };
    //   }
    // }
    // _columns.value = objs;
    //获取表单中插槽渲染的按钮点击弹出模态窗口的实例
    useModalData.value = GetUseModalData(objParams.value.ID);
    const data = await getEntity({
      sqlcmd: "ASSEMBLY_NAME ='" + objParams.value.ID + "'",
      entityName: 'SYS_LOW_CODE',
    });
    var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON);
    for (const i in searchForms) {
      if (
        !isNullOrEmpty(searchForms[i].componentProps) &&
        !isNullOrEmpty(searchForms[i].componentProps.api) &&
        searchForms[i].componentProps.api == 'GetEnum'
      ) {
        searchForms[i].componentProps.api = GetEnum;
        searchForms[
          i
        ].componentProps.params.name = `${objParams.value.ID}+${searchForms[i].field}s`;
        searchForms[i].componentProps.labelField = unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name';
      }
      if (
        !isNullOrEmpty(searchForms[i].componentProps) &&
        !isNullOrEmpty(searchForms[i].componentProps.api) &&
        searchForms[i].componentProps.api == 'getEntity'
      ) {
        searchForms[i].componentProps.api = getEntity;
        searchForms[i].componentProps.resultField = 'Data.Items';
      }
      onChangeConfig(searchForms[i]);
    }
    _searchFormSchema.value = searchForms;
    var _cruds = JSON.parse(data.Data.Items[0].FORM_JSON);
    for (const i in _cruds) {
      if (
        !isNullOrEmpty(_cruds[i].componentProps) &&
        !isNullOrEmpty(_cruds[i].componentProps.api) &&
        _cruds[i].componentProps.api == 'GetEnum'
      ) {
        _cruds[i].componentProps.api = GetEnum;
        _cruds[i].componentProps.params.name = `${objParams.value.ID}+${_cruds[i].field}s`;
        _cruds[i].componentProps.labelField = unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name';
      }
      if (
        !isNullOrEmpty(_cruds[i].componentProps) &&
        !isNullOrEmpty(_cruds[i].componentProps.api) &&
        _cruds[i].componentProps.api == 'getEntity'
      ) {
        _cruds[i].componentProps.api = getEntity;
        _cruds[i].componentProps.resultField = 'Data.Items';
      }
      onChangeConfig(_cruds[i]);
    }
    _crudFormSchema.value = _cruds;
    var objs = JSON.parse(data.Data.Items[0].BASE_FORM_JSON);
    for (const i in objs) {
      if (!isNullOrEmpty(objs[i].customRender)) {
        const func = new Function(objs[i].customRender)();
        objs[i].customRender = ({ record }) => {
          let texts = func(record);
          return h(Tooltip, { title: texts.text }, () =>
            h(Tag, { color: texts.color }, () => texts.text),
          );
        };
      }
    }
    _columns.value = objs;
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    entityName: objParams.value.ID,
    formJson: _crudFormSchema.value,
    crudColSlots,
  });
}
  /* å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶ */
  function handleItemSuccess(d, u, item) {
    getForm().setFieldsValue(GetSelectSuccess(d, u, getForm().getFieldsValue()[`${item.replace(/form-/,'').replace(/add/,'')}PSelect_0`]));
function handleSuccess() {
  reload();
}
onMounted(async () => {
  /* ç”¨json获取列 */
  // _searchFormSchema.value = await fetchJson(
  //   `${globSetting.downloadUrl}/LowCode/${objParams.value.ID}/${objParams.value.ID}_Searchform.json`,
  // );
  // var objs = await fetchJson(
  //   `${globSetting.downloadUrl}/LowCode/${objParams.value.ID}/${objParams.value.ID}_Baseform.json`,
  // );
  // for (const i in objs) {
  //   if (!isNullOrEmpty(objs[i].customRender)) {
  //     const func = new Function(objs[i].customRender)();
  //     objs[i].customRender = ({ record }) => {
  //       let texts = func(record);
  //       return h(Tooltip, { title: texts.text }, () =>
  //         h(Tag, { color: texts.color }, () => texts.text),
  //       );
  //     };
  //   }
  // }
  // _columns.value = objs;
  //获取表单中插槽渲染的按钮点击弹出模态窗口的实例
  useModalData.value = GetUseModalData(objParams.value.ID);
  const data = await getEntity({
    sqlcmd: "ASSEMBLY_NAME ='" + objParams.value.ID + "'",
    entityName: 'SYS_LOW_CODE',
  });
  var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON);
  for (const i in searchForms) {
    if (
      !isNullOrEmpty(searchForms[i].componentProps) &&
      !isNullOrEmpty(searchForms[i].componentProps.api) &&
      searchForms[i].componentProps.api == 'GetEnum'
    ) {
      searchForms[i].componentProps.api = GetEnum;
      searchForms[
        i
      ].componentProps.params.name = `${objParams.value.ID}+${searchForms[i].field}s`;
      searchForms[i].componentProps.labelField = unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name';
    }
    if (
      !isNullOrEmpty(searchForms[i].componentProps) &&
      !isNullOrEmpty(searchForms[i].componentProps.api) &&
      searchForms[i].componentProps.api == 'getEntity'
    ) {
      searchForms[i].componentProps.api = getEntity;
      searchForms[i].componentProps.resultField = 'Data.Items';
    }
    onChangeConfig(searchForms[i]);
  }
  /* å¼¹å‡ºé€‰æ‹©æ¡† */
  function handleSelectItem(item) {
    OpenSelectItem(openItemModal, getForm().getFieldsValue()[`${item.replace(/form-/,'').replace(/add/,'')}PSelect_0`]);
  _searchFormSchema.value = searchForms;
  var _cruds = JSON.parse(data.Data.Items[0].FORM_JSON);
  for (const i in _cruds) {
    if (
      !isNullOrEmpty(_cruds[i].componentProps) &&
      !isNullOrEmpty(_cruds[i].componentProps.api) &&
      _cruds[i].componentProps.api == 'GetEnum'
    ) {
      _cruds[i].componentProps.api = GetEnum;
      _cruds[i].componentProps.params.name = `${objParams.value.ID}+${_cruds[i].field}s`;
      _cruds[i].componentProps.labelField = unref(getLocale) == 'zh_CN' ? 'Desc' : 'Name';
    }
    if (
      !isNullOrEmpty(_cruds[i].componentProps) &&
      !isNullOrEmpty(_cruds[i].componentProps.api) &&
      _cruds[i].componentProps.api == 'getEntity'
    ) {
      _cruds[i].componentProps.api = getEntity;
      _cruds[i].componentProps.resultField = 'Data.Items';
    }
    if (_cruds[i].component == 'Upload') {
      _cruds[i].componentProps = {};
      _cruds[i].componentProps.api = uploadApi;
      _cruds[i].componentProps.multiple = false;
      _cruds[i].componentProps.maxNumber = 1;
      _cruds[i].rules = [{ required: true, message: '请选择上传文件' }];
    }
    onChangeConfig(_cruds[i]);
  }
  _crudFormSchema.value = _cruds;
  /* Select è‡ªå®šä¹‰onChange方法 */
  function onChangeConfig(obj: any) {
    if (obj.component == 'Select') {
      var options = obj.componentProps.options;
      var onChange = obj.componentProps.onChange;
      obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
        return {
          options: options,
          onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
        };
  var objs = JSON.parse(data.Data.Items[0].BASE_FORM_JSON);
  for (const i in objs) {
    if (!isNullOrEmpty(objs[i].customRender)) {
      const func = new Function(objs[i].customRender)();
      objs[i].customRender = ({ record }) => {
        let texts = func(record);
        return h(Tooltip, { title: texts.text }, () =>
          h(Tag, { color: texts.color }, () => texts.text),
        );
      };
    }
  }
  _columns.value = objs;
});
  //弹出框确定返回
  function custSuccess(d) {
    reload();
  }
/* å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶ */
function handleItemSuccess(d, u, item) {
  getForm().setFieldsValue(GetSelectSuccess(d, u, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]));
}
  /* å„表单内弹出选择框选择成功后方法 */
  function handleEntSuccess(d, u, item) {
    var values = GetSelectSuccess(d, u, cType.value);
    selectVals.value = values; //保存弹出框选择的结果
    let _val = {};
    _val[d.returnFieldName] = values[d.returnFieldName];
    useFormData.value[item][1].setFieldsValue(_val);
  }
/* å¼¹å‡ºé€‰æ‹©æ¡† */
function handleSelectItem(item) {
  OpenSelectItem(openItemModal, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]);
}
  /* æ‰“开自定义模态框 */
  function handleCustClick(item) {
    OpenCustModal(
      useModalData.value[item][1].openModal, //带入openModal方法
      cType.value,
      item,
      [],
      // selectVals.value['ROUTE_CODE'],
    ); //[openRvModal], selectVals.value['ID']这是自定义参数,按实际需求
/* Select è‡ªå®šä¹‰onChange方法 */
function onChangeConfig(obj: any) {
  if (obj.component == 'Select') {
    var options = obj.componentProps.options;
    var onChange = obj.componentProps.onChange;
    obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
      return {
        options: options,
        onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
      };
    };
  }
}
//弹出框确定返回
function custSuccess(d) {
  reload();
}
/* å„表单内弹出选择框选择成功后方法 */
function handleEntSuccess(d, u, item) {
  var values = GetSelectSuccess(d, u, cType.value);
  selectVals.value = values; //保存弹出框选择的结果
  let _val = {};
  _val[d.returnFieldName] = values[d.returnFieldName];
  useFormData.value[item][1].setFieldsValue(_val);
}
/* æ‰“开自定义模态框 */
function handleCustClick(item) {
  OpenCustModal(
    useModalData.value[item][1].openModal, //带入openModal方法
    cType.value,
    item,
    [],
    // selectVals.value['ROUTE_CODE'],
  ); //[openRvModal], selectVals.value['ID']这是自定义参数,按实际需求
}
</script>
src/views/tigerprojects/system/lowcode/normal/normalDrawer.vue
ÎļþÒÑɾ³ý
src/views/tigerprojects/system/lowcode/normalDrawer.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,106 @@
<!--
 * @Description: file content
 * @Author: your name
 * @version:
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 20:36:33
-->
<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="600px" @ok="handleSubmit">
    <BasicForm @register="registerForm">
      <template #[item]="{ field }" v-for="item in crudColSlots" :key="item">
        <a-button v-if="field" class="mt-1 ml-1" size="small" @click="handleSelectItem(item)" preIcon="search|svg" />
        <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, onMounted } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { useGlobSetting } from '/@/hooks/setting';
import NormalModal from '/@/views/components/NormalModal.vue';
import { SaveEntity, fetchJson, formatValues } from '/@/api/tigerapi/system';
import { useModal } from '/@/components/Modal';
import { GetSelectSuccess, OpenSelectItem } from './data';
import { isArray, isNullOrEmpty } from '/@/utils/is';
const emit = defineEmits(['success', 'register']);
const globSetting = useGlobSetting();
const isUpdate = ref(true);
const entityName = ref('');
const formSchema = ref([]);
const crudColSlots = ref<any>([]);
const [registerItemAdd, { openModal: openItemModal }] = useModal();
const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
  labelWidth: 140,
  schemas: formSchema as unknown as FormSchema[],
  actionColOptions: {
    span: 24,
  },
  showActionButtonGroup: false,
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  isUpdate.value = !!data?.isUpdate;
  entityName.value = data?.entityName;
  // formSchema.value = await fetchJson(
  //   `${globSetting.downloadUrl}/LowCode/${unref(entityName)}/${
  //     entityName.value
  //   }_addEditform.json`,
  // );
  formSchema.value = data?.formJson;
  crudColSlots.value = data?.crudColSlots;
  resetFields();
  setDrawerProps({ confirmLoading: false });
  if (unref(isUpdate)) {
    setFieldsValue({
      ...data.record,
    });
  }else{
    if(!isNullOrEmpty(data?.others)){}
    setFieldsValue(data?.others);
  }
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
onMounted(async () => { });
async function handleSubmit() {
  try {
    let values = await validate();
    //判断保存的值如果是[]数组的,就直接取[0]第一个值,一般针对上传模板的地址
    values = formatValues(values);
    setDrawerProps({ confirmLoading: true });
    // TODO custom api
    //保存
    SaveEntity(values, unref(isUpdate), unref(entityName)).then((action) => {
      if (action.IsSuccessed) {
        closeDrawer();
        emit('success');
      }
    });
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
/**
 * @description: å¼¹å‡ºé€‰æ‹©æ¡†é€‰æ‹©æˆåŠŸåŽäº‹ä»¶
 * @param {*} d
 * @param {*} u
 * @param {*} item
 * @return {*}
 */
function handleItemSuccess(d, u, item) {
  setFieldsValue(GetSelectSuccess(d, u, getFieldsValue()[`${item.replace(/add/, '')}PSelect_0`]));
}
/* å¼¹å‡ºé€‰æ‹©æ¡† */
function handleSelectItem(item) {
  OpenSelectItem(openItemModal, getFieldsValue()[`${item.replace(/add/, '')}PSelect_0`]);
}
</script>
src/views/tigerprojects/system/lowcode/setting/pageDetail.vue
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-05-30 22:00:44
 * @LastEditors: your name
 * @LastEditTime: 2024-06-11 01:50:33
 * @LastEditTime: 2024-06-13 14:21:16
-->
<!-- eslint-disable prettier/prettier -->
<template>
@@ -420,6 +420,10 @@
      label: 'Checkbox',
    },
    {
      value: 'Upload',
      label: '文件上传',
    },
    {
      value: 'RangePicker',
      label: '时间选择器',
    },