LanLingXiangMu/src/views/demo/projectchange/InfoModal/index.vue

<template>
  <div class="content">
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">项目编号：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.xiangmu_no"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">项目名称：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.xiangmu_name"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">乡镇：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.streetname"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">村庄：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.communityname"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">权利人：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.quanliren"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">行政区划：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.xingzhengquhua"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">备案编号：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.beian_no"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">项目当前用途：</div>
        <div class="item-input">
           <a-select style="width:100%" v-model:value="props.infoResult.xiangmu_yt" :options="xiangmuYTOptions" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">备案日期：</div>
        <div class="item-input"><a-date-picker v-model:value="props.infoResult.beianriqi"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">建筑结构：</div>
        <div class="item-input"><a-input v-model:value="props.infoResult.jianzhujiegou"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">项目开始事件：</div>
        <div class="item-input"><a-date-picker v-model:value="props.infoResult.start_time"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">项目结束时间：</div>
        <div class="item-input"><a-date-picker v-model:value="props.infoResult.end_time"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">设施农业申请用地面积(公顷)：</div>
        <div class="item-input"><a-input-number v-model:value="props.infoResult.shenqing_area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        <div class="label">生产设施用地(公顷)：</div>
        <div class="item-input"><a-input-number v-model:value="props.infoResult.shengchan_area"/></div>
      </div>
    </div>
    <div class="row">
      <div class="item" style="flex: 1;">
        <div class="label">辅助设施用地(公顷)：</div>
        <div class="item-input"><a-input-number v-model:value="props.infoResult.fuzhu_area"/></div>
      </div>
      <div class="item" style="flex: 1;">
        
      </div>
    </div>
    <div class="row">
      <div class="item" style="width: 100%;">
        <div class="label">上传SHP：</div>
        <div style="flex:9;display:flex;">
          <a-upload
            v-model:file-list="shpList"
            accept=".zip"
            :maxCount="1"
            :custom-request="shpCustomRequest"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              上传SHP
            </a-button>
            <template #itemRender="{ file, actions }">
              <a-space>
                <span>{{ file.name }}</span>
              </a-space>
            </template>
          </a-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue"
import dayjs from 'dayjs'

import { UploadOutlined } from '@ant-design/icons-vue';
import { uploadFile } from '@/api/formrender/index';
import { getLoad } from '@/api/sys/sysDataItemDetail';
const props = defineProps(['infoData','infoResult'])
const shpList = ref([])
const xiangmuYTOptions = ref([])
onMounted(() => {
  getLoad({ code: 'ssnyddqyt' }).then(res => {
    xiangmuYTOptions.value = res.map(item => {
      return {
        label: item.itemName,
        value: item.itemValue
      }
    })
  })
  const { id, xiangmu_no, xiangmu_name, streetname, communityname, quanliren, 
    xingzhengquhua, beian_no, xiangmu_yt, start_time, end_time, shenqing_area, shengchan_area, fuzhu_area
  } = props.infoData
  props.infoResult.id = id
  props.infoResult.xiangmu_no = xiangmu_no
  props.infoResult.xiangmu_name = xiangmu_name
  props.infoResult.streetname = streetname
  props.infoResult.communityname = communityname
  props.infoResult.quanliren = quanliren
  props.infoResult.xingzhengquhua = xingzhengquhua
  props.infoResult.beian_no = beian_no
  props.infoResult.xiangmu_yt = xiangmu_yt
  props.infoResult.start_time = start_time? dayjs(start_time): ''
  props.infoResult.end_time = end_time? dayjs(end_time): ''
  props.infoResult.shenqing_area = shenqing_area
  props.infoResult.shengchan_area = shengchan_area
  props.infoResult.fuzhu_area = fuzhu_area
  props.infoResult.shpPath = ''
})
const shpCustomRequest = (file) => {
  const formData = new FormData()
  formData.append('files', file.file)
  uploadFile(formData).then(res => {
    props.infoResult.shpPath = res[0].filePath
  })
}
</script>
<style lang="scss" scoped>
.content{
  padding: 20px;
  .row{
    display: flex;
    margin-bottom: 25px;
    .item{
      display: flex;
      .label{
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item-input{
        flex: 1,
      }
    }
  }
}
:deep(.ant-image){
  margin-right: 10px;
  margin-bottom: 10px;
}
.video-delete-btn {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-bottom-left-radius: 80%;
  background: rgb(0 0 0 / 20%);
  color: #fff;
  line-height: 30px;
  text-align: center;
  z-index: 999;
}
</style>