websocket更新，配置文件增加websocket地址

Ben Lin

2024-07-25 cdd0a28197fb9b432a45bbf9ebc0cfd8db939125

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

@@ -4,9 +4,9 @@
      <template #toolbar>
        <a-button
          type="primary"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          @click="handleCreate(item['DO_METHOD'])"
          :preIcon="item['ICON_URL']"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          :key="item"
        >
          {{ item['FUNC_NAME'] }}
@@ -30,24 +30,53 @@
        />
      </template>
    </BasicTable>
    <Suspense>
      <CustModal
        @register="registerCust"
        @success="custSuccess"
        @cancel="custCancel"
        :type="cType"
        :entityName="entityName"
        @modalInner="getdtlSlots"
      >
        <!-- 用插槽自定义多表单 -->
        <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]"
              />
              <GeneralModal
                @register="useModalData[name][0]"
                @success="(d, u) => handleEntSuccess(d, u, item.name)"
              />
            </template>
          </BasicForm>
          <!-- 自定义内容 -->
          <div class="h-full" style="height: 380px" v-if="isCustEl[item.name]">
            <FlowChartView :data="routeData" @init="init" />
            <RouteViewModal @register="registerRv" @success="RvItemSuccess" />
          </div>
        </template>
      </CustModal>
    </Suspense>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    FormSchema,
    ActionItem,
    PopConfirm,
  } from '/@/components/Table';
  import { Ref, inject, nextTick, onMounted, ref, unref, watch } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import RouteViewModal from '/@/views/components/RouteViewModal.vue';
  import { FlowChartView } from '/@/components/FlowChart';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
@@ -55,65 +84,100 @@
  import { useI18n } from '/@/hooks/web/useI18n';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { GenerateActionButton, initRoute, OpenCustModal } from '../data';
  import LogicFlow from '@logicflow/core';
  import { isFunction } from 'xe-utils';
import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
import { values } from 'lodash-es';

  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const props = defineProps({
    colSlots: { type: Array as PropType<any[]> },
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    crudColSlots: { type: Object as PropType<any> },
  });
  const objParams = inject('objParams') as Ref<any>;
  const colSlots = ref(objParams.value['colSlots']);
  const _columns = inject('_columns') as Ref<any[]>;
  const _searchFormSchema = inject('_searchFormSchema') as Ref<any[]>;
  const _crudFormSchema = inject('_crudFormSchema') as Ref<any[]>;
  const buttons = ref<[]>(await getRoleButtons(currentRoute.value.meta.menuCode as string));
  const isExistSql = inject('isExistSql') as Ref<string>;
  const others = inject('others') as Ref<Recordable[]>;
  const entityName = ref(objParams['ID']);
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;
  const AuthOption = inject('AuthOption') as Ref<{}>;
  const entityName = ref(objParams.value['ID']);
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerRv, { openModal: openRvModal, closeModal: RvcloseModal }] = useModal();
  const [registerCust, { openModal: openCustModal }] = useModal();
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const formSchemas = ref({}); //弹出框多表单结构
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const routeData = ref({
    nodes: [],
    edges: [],
  });
  const selectVals = ref({});
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      ActionItem(params, data, ...args) {},
      EditOperation(data, d, u) {},
      GetBaseColumns(type: string | undefined) {},
      GetSearchForm(type: string | undefined) {},
      GetCrudForm(type: string | undefined, ...args) {},
      OthersValues(val, id) {},
      KeyFieldValues(val, id) {},
      OpenSelectItem(openItemModal: Fn, ...args) {},
      GetSelectSuccess(d, u, ...args) {},
      GetUseForm(...args) {},
      CustFunc(param: CustModalParams) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${objParams['ID']}.ts`);
    custImport.value = await import(`../entityts/${objParams.value['ID']}.ts`);
  } catch (e) {}
  const [
    {
      ActionItem: nActionItem,
      EditOperation,
      GetBaseColumns,
      GetSearchForm,
      GetCrudForm,
      OthersValues,
      KeyFieldValues,
      GetUseForm,
      GetUseModals,
      GetCustData,
      OpenSelectItem: OpenSelectCust,
      GetSelectSuccess,
      CustFunc,
    },
    ActionColumn,
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  others.value = isNullOrUnDef(OthersValues)

  keyFieldValues.value = isNullOrUnDef(KeyFieldValues)
    ? {}
    : OthersValues(objParams['CODE'], objParams['ID']);
    : KeyFieldValues(objParams.value['CODE'], objParams.value['ID']);
  const dtlSlots = ref<any[]>([]);
  const useformdata = GetUseForm && isFunction(GetUseForm) ? GetUseForm() : {};
  const useFormData = ref<any>(useformdata);
  /* 表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
  /* 获取自定义数据 */
  const custData = GetCustData && isFunction(GetCustData) ? GetCustData() : { isCustEl: {} };
  const isCustEl = ref(custData['isCustEl']);
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: '列表信息',
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams['ID'] },
    searchInfo: {
      TABLE_NAME: objParams.value['ID'],
      option:
        AuthOption.value['BY_ORG'] == 'Y'
          ? {
              //根据据点查询，必需带这个参数
              UserId: useUserStore().getUserInfo.userId,
              ByOrg: true,
              CurOrg: useUserStore().getUserInfo.orgCode,
            }
          : '',
    },
    columns: _columns as unknown as BasicColumn[],
    formConfig: {
      labelWidth: 140,
@@ -124,16 +188,46 @@
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    }, //自定义操作列
    actionColumn: ActionColumn, //自定义操作列
  });

  watch(
    () => AuthOption.value,
    (newVal, oldVal) => {
      nextTick(() => {
        if (!isNullOrEmpty(newVal.BY_ORG)) {
          setProps({
            searchInfo: {
              TABLE_NAME: objParams.value['ID'],
              option:
                AuthOption.value['BY_ORG'] == 'Y'
                  ? {
                      //根据据点查询，必需带这个参数
                      UserId: useUserStore().getUserInfo.userId,
                      ByOrg: true,
                      CurOrg: useUserStore().getUserInfo.orgCode,
                    }
                  : '',
            },
          });
          reload();
        }
      });
    },
    { deep: true, immediate: true },
  );

  onMounted(() => {});

  const currlf = ref(null) as Ref<LogicFlow | null>;
  /**
   * @description: 工艺路线初始化
   * @param {*} lf
   * @return {*}
   */
  async function init(lf, rotId) {
    initRoute(lf, rotId, routeData, currlf);
  }

  /**
   * @description: 生成列表中操作项的按钮
@@ -144,17 +238,21 @@
    const params = {
      record,
      isUpdate: true,
      entityName: objParams['ID'],
      entityName: objParams.value['ID'],
      formJson: _crudFormSchema.value,
      cType,
      dtlSlots,
      formSchemas,
      useModalData,
      useFormData,
      crudColSlots: objParams['crudColSlots'],
      crudColSlots: objParams.value['crudColSlots'],
      routeData,
      currlf,
      selectVals,
      colSlots,
    };

    const actionItem = GenerateActionButton(params);
    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload);
    if (isNullOrUnDef(custImport.value['default'])) {
      return actionItem;
    }
@@ -168,72 +266,21 @@
      useModal,
      go,
      setProps,
      openCustModal,
    );
  }

  /**
   * @description: 获取权限按钮列表
   * @param {*} params
   * @description: 获取多表单插槽列表
   * @param {*} d
   * @return {*}
   */
  function GenerateActionButton(params: any) {
    let actionItem = [] as ActionItem[];
    buttons.value.map((x) => {
      if (x['BUTTON_TYPE'] == 1) {
        let url = '';
        let color = undefined as 'success' | 'error' | 'warning' | undefined;
        let _click = null as any;
        let _popConfirm = undefined as PopConfirm | undefined;
        if (x['DO_METHOD'] == 'Edit') {
          url = 'clarity:note-edit-line';
          _click = editRecord.bind(null, openDrawer, params);
        } else {
          _click = x['ICON_URL'];
          if (x['DO_METHOD'] == 'Delete') {
            url = 'ant-design:delete-outlined';
            color = 'error';
            _popConfirm = {
              title: '是否确认删除?',
              placement: 'left',
              confirm: deleteRecord.bind(null, reload, params),
            };
          }
        }
        actionItem.push({
          icon: isNullOrEmpty(x['ICON_URL']) ? url : x['ICON_URL'],
          onClick: _click,
          color: color,
          popConfirm: _popConfirm,
        });
      }
    });
    return actionItem;
  }

  /**
   * @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']);
    //删除
    DeleteEntity(params['record'], params['entityName']).then((action) => {
      if (action.IsSuccessed) {
        fn();
      }
    });
  function getdtlSlots(d, callback) {
    dtlSlots.value = d;
    callback();
    // setTimeout(() => {
    //   callback();
    // }, 100);
  }

  /**
@@ -246,7 +293,7 @@
        isUpdate: false,
        entityName: entityName.value,
        formJson: _crudFormSchema.value,
        crudColSlots: objParams['crudColSlots'],
        crudColSlots: objParams.value['crudColSlots'],
        isExistSql: isExistSql.value,
      });
    } else {
@@ -255,15 +302,20 @@
      switch (result.action) {
        case 'go':
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(`${result.params.Name}_params`, encodeURI(JSON.stringify(result.params)));
          go(`/${result.url}/${encodeURI(JSON.stringify({ sName: result.params.Name, Name: result.params.Name }))}`);
          sessionStorage.setItem(
            `${result.params.Name}_params`,
            encodeURI(JSON.stringify(result.params)),
          );
          go(
            `/${result.url}/${encodeURI(JSON.stringify({ sName: result.params.Name, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
          openDrawer(true, {
            isUpdate: false,
            entityName: entityName.value,
            formJson: _crudFormSchema.value,
            crudColSlots: objParams['crudColSlots'],
            crudColSlots: objParams.value['crudColSlots'],
            isExistSql: isExistSql.value,
          });
          break;
@@ -278,6 +330,11 @@
   * @return {*}
   */
  function handleSuccess(d, u) {
    if(CustFunc && isFunction(CustFunc)){
      CustFunc({
        values: d,
      });
    }
    reload();
  }

@@ -295,8 +352,8 @@
        `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}.ts`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
          const [{ GetSelectSuccess: GetSelectSuccess2 }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess2(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
@@ -357,4 +414,69 @@
        });
    } catch (e) {}
  }

  /**
   * @description: 弹出框确定返回
   * @param {*} d
   * @return {*}
   */  
  function custSuccess(d) {
    reload();
  }

  /**
   * @description: 弹出框取消返回
   * @param {*} reload
   * @return {*}
   */  
  function custCancel() {reload();}

  /**
   * @description: 各表单内弹出选择框选择成功后方法
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleEntSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      var values = GetSelectSuccess(d, u);
      selectVals.value = values; //保存弹出框选择的结果
      let _val = {};
      d.returnFieldName.map((x) => {
          _val[x] = values[x];
        });
      useFormData.value[item][1].setFieldsValue(_val);
      /* 针对工单的方法 */
      if (d.returnFieldName.filter((x) => x == 'ROUTE_CODE') && item == 'prodinfo' ) {
        routeData.value = {
          nodes: [],
          edges: [],
        };

        init(currlf, selectVals.value['ROUTE_CODE']);
        const { transformModel, width, height } = unref(currlf).graphModel;
        transformModel.focusOn(565, 200, width, height);
      }
    } catch (e) {}
  }

  /**
   * @description: 打开表单中的模态框
   * @param {*} item
   * @return {*}
   */
  function handleCustClick(item) {
    OpenSelectCust(
      useModalData.value[item][1].openModal, //带入openModal方法
      item,
      openRvModal,
      selectVals,
    );
  }

  function RvItemSuccess(d, u) {
    RvcloseModal();
  }
</script>