低代码更新

Ben Lin

2024-06-03 8f5009a3d57821c2c97690b8419e428967b5e981

 src/views/tigerprojects/system/lowcode/normal/index.vue

@@ -5,51 +5,54 @@
        <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),
              },
            },
          ]"
        <TableAction :actions="createActions(record)" />
      </template>
      <template #form-add="{ field }">
        <a-button
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem"
          preIcon="search|svg"
        />
        <NormalModal @register="registerItemAdd" @success="handleItemSuccess" />
      </template>
    </BasicTable>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  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 { DeleteRegion } from '/@/api/tigerapi/wms/region';
  import { fetchJson, getListByPage } from '/@/api/tigerapi/system';
  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 { isNullOrEmpty } from '/@/utils/is';
  import { GetActionColumn, GetActionsData, OpenSelectItem, GetSelectSuccess } from './data';
  import { useModal } from '/@/components/Modal';
  import { useLocale } from '/@/locales/useLocale';

  const { getLocale } = useLocale();
  const route = useRoute();
  const RuleObj = ref(JSON.parse(decodeURI(route.params?.id as string)));
  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 [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload }] = useTable({
    title: '储区列表',
  const [registerTable, { getForm, reload }] = useTable({
    title: '列表信息',
    api: getListByPage,
    searchInfo: { TABLE_NAME: RuleObj.value.ID },
    searchInfo: { TABLE_NAME: objParams.value.ID },
    columns: _columns as unknown as BasicColumn[],
    formConfig: {
      labelWidth: 120,
      labelWidth: 140,
      schemas: _searchFormSchema as unknown as FormSchema[],
    },
    useSearchForm: true,
@@ -57,36 +60,28 @@
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    actionColumn: GetActionColumn(objParams.value.ID), //自定义操作列
  });

  /* 生成列表中操作项的按钮 */
  function createActions(record) {
    return GetActionsData(
      {
        record,
        isUpdate: true,
        entityName: objParams.value.ID,
        formJson: _crudFormSchema.value,
      },
      openDrawer,
      reload,
    );
  }

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  function handleEdit(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }

  function handleDelete(record: Recordable) {
    console.log(record);
    //删除
    const apiAction = DeleteRegion(record);
    apiAction.then((action) => {
      if (action.IsSuccessed) {
        reload();
      }
      entityName: objParams.value.ID,
      formJson: _crudFormSchema.value,
    });
  }

@@ -95,9 +90,94 @@
  }

  onMounted(async () => {
    _searchFormSchema.value = await fetchJson(
      `${globSetting.downloadUrl}/LowCode/regionSearchform.json`,
    );
    _columns.value = await fetchJson(`${globSetting.downloadUrl}/LowCode/regionBaseform.json`);
    /* 用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;
    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';
      }
    }
    _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';
      }
    }
    _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 handleItemSuccess(d, u) {
    getForm().setFieldsValue(GetSelectSuccess(d, u, getForm().getFieldsValue()['0']));
  }

  /* 弹出选择框 */
  function handleSelectItem() {
    OpenSelectItem(openItemModal, getForm().getFieldsValue()['0']);
  }
</script>