LinYeFangHuo/src/views/demo/layer/BatchProcessingModal/ImportComponent/index.vue

<template>
  <div class="item-content">
    <div class="procedure-div">
      <div class="procedure-0" v-if="procedure == 0">
        <div>
          <div class="upload-image"></div>
          <div class="upload-span">上传shp/Excel文件</div>
          <div class="upload-button-div">
            <a-button type="primary" class="upload-button" :icon="h(PlusOutlined)" @click="procedure++">上传</a-button>
          </div>
        </div>
      </div>
      <div class="procedure-1" v-if="procedure == 1">
        <a-table :dataSource="dataSource" :columns="columns" :pagination="{ pageSize: 50 }"
        :scroll="{ y: 490 }" :footer="null"/>
      </div>
    </div>
    <div class="footer">
      <a-button v-if="procedure == 1" type="primary" class="operation-button">重新上传</a-button>
      <a-button class="operation-button">关闭</a-button>
      <a-button v-if="procedure == 0" class="operation-button">取消</a-button>
      <a-button v-if="procedure == 1" type="primary" class="operation-button" @click="submit">导入</a-button>
    </div>
  </div>
  <a-modal
      class="BatchProcessingModal"
      width="1660px"
      v-model:open="mergeSourceModal"
      :footer="null"
      :closable="false"
      :destroyOnClose="true"
      style="top: 50px"
    >
    <MergeSourceModal @closemergeSourceModal="closemergeSourceModal"/>
    </a-modal>
</template>

<script setup lang="ts">
import { ref, h, } from "vue"
import { PlusOutlined } from '@ant-design/icons-vue';
import MergeSourceModal from './MergeSourceModal/index.vue'


const procedure = ref(0)
const mergeSourceModal = ref(false)
const dataSource = ref([
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ])
const columns = ref([
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ])
const submit = () => {
  mergeSourceModal.value = true
}
const closemergeSourceModal = () => {
  mergeSourceModal.value = false
}
</script>

<style lang="scss" scoped>
.item-content{
  width: 100%;
  height: 100%;
  .procedure-div{
    height: 590px;
    .procedure-0{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .upload-image{
        width: 200px;
        height: 200px;
        background-color: red;
        margin: auto;
        margin-bottom: 10px;
      }
      .upload-span{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 24px;
      }
      .upload-button-div{
        display: flex;
        justify-content: center;
        .upload-button{
          width: 200px;
          margin-right: 10px;
          background: linear-gradient( 270deg, #3338D2 0%, #0563D2 100%);
          border-radius: 10px;
          height: 64px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 33px;
        }
      }
    }
    .procedure-1{
      padding-top: 10px;
    }
  }
  .footer{
    width: 100%;
    height: 91px;
    padding-top: 31px;
    display: flex;
    align-items: center;
    justify-content: end;
    .operation-button{
      width: 169px;
      height: 60px;
      margin-right: 10px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 24px;
      line-height: 33px;
    }
  }
}
</style>