hlt_gis_admin/src/views/dataAdmin/assembly/MapSourceModal.vue

<template>
  <BasicModal width="1200px" v-bind="$attrs" @register="registerModal" @cancel="handleCancel" :title="getTitle"
    @ok="handleSubmit">
    <div style="height: 60vh" class="res-form-container">
      <a-tabs v-model:activeKey="activeKey" class="res-a-tabs">
        <a-tab-pane key="1" tab="组件信息">
          <!-- <BasicForm @register="registerForm"></BasicForm> -->
          <source-detail ref="refSourceDetail" @RtnMain="RtnMain" :formData="formData" :isUpdate="isUpdate"
            :isView="isView"></source-detail>
        </a-tab-pane>
        <a-tab-pane key="2" tab="流程信息" force-render>
          <FlowStep :flowTitle="'组件资源上传'" :flowCode="flowCode" :formData="formData"></FlowStep>
        </a-tab-pane>
      </a-tabs>
    </div>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm } from '/@/components/Form/index';
import { BasicTree } from '/@/components/Tree';
import { PlusOutlined } from '@ant-design/icons-vue';
import SourceDetail from './SourceDetail.vue';
import FlowStep from './flowStep/index.vue';
import { queryFlowInfoPage } from '/@/api/resource/examine';


export default defineComponent({
  name: 'AccountModal',
  components: {
    BasicModal,
    BasicForm,
    BasicTree,
    PlusOutlined,
    FlowStep,
    SourceDetail,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
  },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const activeKey = ref('1')
    const flowCode = ref('20220523001');
    const refSourceDetail = ref(null);
    let formData = ref(null)
    const isUpdate = ref(true);
    const isView = ref(false);
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;
      isView.value = !!data?.see;
      if (isUpdate.value) formData.value = data.record
    });
    const getTitle = computed(() => {
      if (isUpdate.value && !isView.value) {
        return '编辑组件资源'
      } else if (isView.value) {
        return '查看组件资源'
      } else {
        return '新增组件资源'
      }
    });

    async function handleSubmit() {
      refSourceDetail.value.submitForm();
    }
    const RtnMain = (status) => {
      emit('success')
    }



    function getFlow() {
      queryFlowInfoPage({
        page: 1,
        rows: 1000000
      }).then(flowRes => {
        if (flowRes && flowRes.length) {
          var flow = flowRes.filter(i => i.FLOWNAME === '组件资源上传');
          if (flow && flow.length) flowCode.value = flow[0].id;
        }
      })
    }

    onMounted(() => getFlow());

    function handleCancel() {
      formData.value = null;
      closeModal();
    }


    return {
      handleCancel,
      isView,
      flowCode,
      activeKey,
      registerModal,
      handleSubmit,
      getTitle,
      refSourceDetail,
      isUpdate,
      formData,
      RtnMain,
    };
  },
});
</script>
<style scoped lang="less">
:deep(.vben-basic-tree) {
  width: 100% !important;
}

:deep(.is-unflod) {
  display: none !important;
}

:deep(.is-flod) {
  display: none !important;
}

:deep(.res-form-container) {
  .res-a-tabs {
    margin-top: 61px !important;
  }
}
</style>