Ben Lin
2024-06-23 8cfe56d782e4f8cddf0fa8f0cff84a5b4034aa3d
src/views/tigerprojects/system/lowcode/detail/index.vue
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-18 15:09:48
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-19 10:49:35
 * @LastEditTime: 2024-06-23 00:31:33
-->
<!--
 * @Description: 低代码详情呈现页面
@@ -29,26 +29,36 @@
            <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="[
                {
                  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)" />
            <a-button
              v-if="field"
              class="mt-1 ml-1"
              size="small"
              @click="handleSelectItem(item)"
              preIcon="search|svg"
            />
            <GeneralModal
              @register="registerItemAdd"
              @success="(d, u) => handleItemSuccess(d, u, item)"
            />
          </template>
        </BasicTable>
      </div>
@@ -58,22 +68,43 @@
            <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)" />
            <a-button
              v-if="field"
              class="mt-1 ml-1"
              size="small"
              @click="handleSelectItem(item)"
              preIcon="search|svg"
            />
            <GeneralModal
              @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">
    <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]"
            />
            <GeneralModal
              @register="useModalData[name][0]"
              @success="(d, u) => handleEntSuccess(d, u, item.name)"
            />
          </template>
        </BasicForm>
        <!-- 自定义内容 -->
@@ -83,252 +114,327 @@
</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, getHomeUrl } 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';
  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 { OpenCustModal, 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 GeneralModal from '/@/views/components/GeneralModal.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';
  import { isNullOrUnDef } from '/@/utils/is';
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 pageTitle = ref(objParams.value.pageTitle);
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,
});
  const { t } = useI18n();
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    entityName: objParams.value.ID,
    formJson: GetFormColumns(entityName.value, 'detailfirst'),
    crudColSlots,
    others: objParams.value.others,
  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 pageTitle = ref(objParams.value.pageTitle);
  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: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right', //undefined,
    },
    // searchInfo: { BILLCODE },
  });
}
function secondCreate() {
  openDrawer(true, {
    isUpdate: false,
    entityName: objParams.value.ID,
    formJson: _crudFormSchema.value,
    crudColSlots,
  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,
  });
}
// 此处可以得到用户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(getHomeUrl(entityName.value));
}
const tabClkcallback = (val: string) => {
  if (val == 'detailfirst') {
    ITEM_CODE.value = '';
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: GetFormColumns(entityName.value, 'detailfirst'),
      crudColSlots,
      others: objParams.value.others,
    });
  }
};
/**
 * @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,
  });
}
  function secondCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: _crudFormSchema.value,
      crudColSlots,
    });
  }
/**
 * @description: detailfirst tab中的表格删除记录方法
 * @param {*} record
 * @return {*}
 */
function handleDelete(record: Recordable) {
  console.log(record);
  //删除
  DeleteEntity(record, entityName.value).then((action) => {
    if (action.IsSuccessed) {
      reloadFirst();
  // 此处可以得到用户ID
  //const BILLCODE = ref(route.params?.BILLCODE.split(',')[1]);
  var currentKey = ref('detailfirst');
  const { setTitle } = useTabs();
  // TODO
  // 本页代码仅作演示,实际应当通过userId从接口获得用户的相关资料
  // 设置Tab的标题(不会影响页面标题)
  setTitle(`详情:${detailName.value}`);
  // 页面左侧点击返回链接时的操作
  function goBack() {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(/* @vite-ignore */ `../entityts/${entityName.value}`)
        .then((m) => {
          const [{ GetHomeUrl }] = m.default();
          // 本例的效果时点击返回始终跳转到账号列表页,实际应用时可返回上一页
          go(GetHomeUrl(entityName.value));
        })
        .catch(() => {});
    } catch (e) {}
  }
  const tabClkcallback = (val: string) => {
    if (val == 'detailfirst') {
      ITEM_CODE.value = '';
    }
  });
}
  };
/**
 * @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: 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: 自定义弹出框确定返回
 * @param {*} d
 * @return {*}
 */
function custSuccess(d) {
  reload();
}
  /**
   * @description: detailfirst tab中的表格删除记录方法
   * @param {*} record
   * @return {*}
   */
  function handleDelete(record: Recordable) {
    console.log(record);
    //删除
    DeleteEntity(record, entityName.value).then((action) => {
      if (action.IsSuccessed) {
        reloadFirst();
      }
    });
  }
/**
 * @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: detailfirst tab中增删改成功返回方法
   * @return {*}
   */
  function handleSuccess() {
    reloadFirst();
  }
/**
 * @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']这是自定义参数,按实际需求
}
  /**
   * @description: 弹出选择框选择成功后事件
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
  }
  /**
   * @description: 弹出选择框
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
        })
        .catch(() => {
          openItemModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
  }
  /**
   * @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) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(/* @vite-ignore */ `../entityts/${cType.value}`).then((m) => {
        const [{ GetSelectSuccess }] = m.default();
        var values = GetSelectSuccess(d, u);
        selectVals.value = values; //保存弹出框选择的结果
        let _val = {};
        _val[d.returnFieldName] = values[d.returnFieldName];
        useFormData.value[item][1].setFieldsValue(_val);
      });
    } catch (e) {}
  }
  /**
   * @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>