yunzhupaas-web-vue3/src/views/mdm/mdmproject/Detail.vue

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="800px" showFooter :showOkBtn="false">
    <template #insertFooter> </template>
    <a-row class="p-10px dynamic-form">
      <!-- 表单 -->
      <a-form :colon="false" size="middle" layout="horizontal" labelAlign="right" :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef">
        <a-row :gutter="15">
          <!-- 具体表单 -->
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="project_code">
              <template #label>项目编码： </template>
              <YunzhupaasInput
                v-model:value="dataForm.project_code"
                placeholder="请输入项目编码"
                :maxlength="30"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.project_code">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="project_name">
              <template #label>项目名称： </template>
              <YunzhupaasInput
                v-model:value="dataForm.project_name"
                placeholder="请输入项目名称"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.project_name">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="parent_project_id">
              <template #label>上级项目： </template> <p>{{ dataForm.parent_project_id }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="org_id">
              <template #label>归属组织： </template> <p>{{ dataForm.org_id }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="project_type">
              <template #label>项目类型： </template> <p>{{ dataForm.project_type }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="project_start_date">
              <template #label>启动日期： </template> <p>{{ dataForm.project_start_date }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="project_state_id">
              <template #label>项目状态： </template> <p>{{ dataForm.project_state_id }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="seq_num">
              <template #label>顺序号： </template>
              <YunzhupaasInputNumber
                v-model:value="dataForm.seq_num"
                placeholder="请输入顺序号"
                disabled
                detailed
                :style="{ width: '100%' }"
                :step="1"
                :controls="false">
              </YunzhupaasInputNumber>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="remark">
              <template #label>备注： </template> <p>{{ dataForm.remark }}</p>
            </a-form-item>
          </a-col>
          <!-- 表单结束 -->
        </a-row>
      </a-form>
    </a-row>
  </BasicDrawer>
  <!-- 有关联表单详情：开始 -->
  <RelationDetail ref="relationDetailRef" />
  <!-- 有关联表单详情：结束 -->
</template>
<script lang="ts" setup>
  import { getDetailInfo } from './helper/api';
  import { getConfigData } from '@/api/onlineDev/visualDev';
  import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue';
  import { BasicModal, useModal } from '@/components/Modal';
  import { BasicDrawer, useDrawer } from '@/components/Drawer';
  // 有关联表单详情
  import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
  // 表单权限
  import { usePermission } from '@/hooks/web/usePermission';
  import { useMessage } from '@/hooks/web/useMessage';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { buildUUID } from '@/utils/uuid';
  import { useI18n } from '@/hooks/web/useI18n';
  import { getDataChange } from '@/api/onlineDev/visualDev';
  import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
  import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';

  interface State {
    dataForm: any;
    title: string;
    maskConfig: any;
    interfaceRes: any;
    locationScope: any;
    extraOptions: any;
    extraData: any;
  }

  defineOptions({ name: 'Detail' });
  const { createMessage, createConfirm } = useMessage();
  const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();

  const { t } = useI18n();
  const relationDetailRef = ref<any>(null);
  const state = reactive<State>({
    dataForm: {},
    title: t('common.detailText', '详情'),
    maskConfig: {
      project_code: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      project_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
    },
    interfaceRes: {
      project_type: [],
      org_id: [],
      project_state_id: [],
      project_code: [],
      remark: [],
      project_name: [],
      parent_project_id: [],
      seq_num: [],
      project_start_date: [],
    },
    locationScope: {},
    extraOptions: {},
    extraData: {},
  });
  const { title, dataForm, maskConfig } = toRefs(state);
  // 表单权限
  const { hasFormP } = usePermission();

  defineExpose({ init });

  function init(data) {
    state.dataForm.id = data.id;
    openDrawer();
    nextTick(() => {
      setTimeout(initData, 0);
    });
  }
  function initData() {
    changeLoading(true);
    if (state.dataForm.id) {
      getData(state.dataForm.id);
    } else {
      closeDrawer();
    }
  }
  function getData(id) {
    getDetailInfo(id).then(res => {
      state.dataForm = res.data || {};
      nextTick(() => {
        changeLoading(false);
      });
    });
  }

  function toDetail(modelId, id, propsValue) {
    if (!id) return;
    getConfigData(modelId).then(res => {
      if (!res.data || !res.data.formData) return;
      const formConf = JSON.parse(res.data.formData);
      formConf.popupType = 'general';
      formConf.hasPrintBtn = false;
      formConf.customBtns = [];
      const data = { id, formConf, modelId, propsValue };
      relationDetailRef.value?.init(data);
    });
  }
  function setFormProps(data) {
    setDrawerProps(data);
  }
  function changeLoading(loading) {
    setFormProps({ loading });
  }

  function getParamList(key) {
    let templateJson: any[] = state.interfaceRes[key];
    if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
    for (let i = 0; i < templateJson.length; i++) {
      if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
        templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
      }
    }
    return templateJson;
  }
</script>