ShiJiTianKongDiPingTai/src/views/demo/caseauditing/module/HandleCase.vue

<template>
  <div>
    <a-form :model="caseHandlingData" name="basic" :label-col="{ span: 6 }" disabled>
      <a-form-item>
        <a-divider orientation="left">【案件核查信息】</a-divider>
      </a-form-item>
      <a-form-item label="核查人：">
        <a-input v-model:value="caseHandlingData.createusername" />
      </a-form-item>
      <a-form-item label="核查时间：">
        <a-input v-model:value="caseHandlingData.createtime" />
      </a-form-item>
      <a-form-item label="是否违法：">
        <a-radio-group v-model:value="illegal">
          <a-radio value="0">合法</a-radio>
          <a-radio value="1">违法</a-radio>
          <a-radio value="2">伪变化</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="现场照片：">
        <div
          v-for="(item, num) in imageList"
          :key="num"
          style="
            position: relative;
            width: 125px;
            height: 112px;
            overflow: hidden;
            float: left;
            background: #f9f9f9;
            margin-left: 6px;
            margin-bottom: 6px;
          "
        >
          <a-image :width="125" :src="item.s_filePath" />
        </div>
      </a-form-item>
      <a-form-item label="现场视频：">
        <div
          style="margin-top: 10px; width: 240px; height: 150px"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <video width="100%" height="100%" controls>
            <source :src="item" type="video/mp4" />
            您的浏览器不支持Video标签。
          </video>
        </div>
        <a-empty v-show="videoList.length <= 0">
          <template #description>
            <span>暂无视频</span>
          </template>
        </a-empty>
      </a-form-item>
      <a-form-item label="处理措施: " v-if="illegal == '1'">
        <a-select
          v-model:value="caseHandlingData.measure_name"
          placeholder="请选择处理措施"
          :options="dealMeasuresList"
        />
      </a-form-item>

      <a-col :span="24" v-if="illegal == '0'">
        <a-form-item label="项目名称: ">
          <a-input v-model:value="caseHandlingData.result_name" />
        </a-form-item>
        <a-form-item label="建设情况: ">
          <a-input v-model:value="caseHandlingData.actual_scene_case" />
        </a-form-item>
        <a-form-item label="建筑结构: ">
          <a-input v-model:value="caseHandlingData.build_structure" />
        </a-form-item>
        <a-form-item label="实际用途: ">
          <a-input v-model:value="caseHandlingData.actual_use_to" />
        </a-form-item>
        <a-form-item label="当事人: ">
          <a-input v-model:value="caseHandlingData.illegal_contact" />
        </a-form-item>
        <a-form-item label="当事人电话: ">
          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
        </a-form-item>

        <a-divider orientation="left">【案件办理信息-合法】</a-divider>
        <a-form-item label="批准文件名称: ">
          <a-input v-model:value="caseHandlingData.evidence_file_name" />
        </a-form-item>
        <a-form-item label="批准文件编号: ">
          <a-input v-model:value="caseHandlingData.evidence_file_number" />
        </a-form-item>
        <a-form-item label="批准文件有效期: ">
          <a-input v-model:value="caseHandlingData.evidence_file_indate" />
        </a-form-item>

        <a-form-item label="合法批准文件: " v-if="illegal == '0'">
          <div
            v-for="(item, num) in evidenceFileList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="evidenceFileList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>

        <a-form-item label="勘测定界图: " v-if="illegal == '0'">
          <div
            v-for="(item, num) in boundaryImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="boundaryImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>

        <a-form-item label="是否超范围: ">
          <a-radio-group v-model:value="caseHandlingData.is_out_boundary">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="是否超层: ">
          <a-radio-group v-model:value="caseHandlingData.is_over_floor">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="办理人: ">
          <a-input v-model:value="caseHandlingData.transactor_name" />
        </a-form-item>
        <a-form-item label="办理时间: ">
          <a-input v-model:value="caseHandlingData.transact_time" />
        </a-form-item>
      </a-col>

      <a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '拟拆除'">
        <a-form-item label="实际用途: ">
          <a-input v-model:value="caseHandlingData.actual_use_to" />
        </a-form-item>
        <a-form-item label="当事人: ">
          <a-input v-model:value="caseHandlingData.illegal_contact" />
        </a-form-item>
        <a-form-item label="当事人电话: ">
          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
        </a-form-item>
        <a-form-item label="建设情况: ">
          <a-radio-group v-model:value="caseHandlingData.is_build_complete">
            <a-radio :value="1">已建成</a-radio>
            <a-radio :value="0">建设中</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="建筑结构: ">
          <a-input v-model:value="caseHandlingData.build_structure" />
        </a-form-item>
        <a-divider orientation="left">【案件办理信息-拆除】</a-divider>
        <a-form-item label="拆除后照片: ">
          <div
            v-for="(item, num) in afterImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="afterImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>
        <a-form-item label="办理人: ">
          <a-input v-model:value="caseHandlingData.transactor_name" />
        </a-form-item>
        <a-form-item label="办理时间: ">
          <a-input v-model:value="caseHandlingData.transact_time" />
        </a-form-item>
      </a-col>

      <a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '查处'">
        <a-form-item label="实际用途: ">
          <a-input v-model:value="caseHandlingData.actual_use_to" />
        </a-form-item>
        <a-form-item label="当事人: ">
          <a-input v-model:value="caseHandlingData.illegal_contact" />
        </a-form-item>
        <a-form-item label="当事人电话: ">
          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
        </a-form-item>
        <a-form-item label="建筑结构: ">
          <a-input v-model:value="caseHandlingData.build_structure" />
        </a-form-item>
        <a-form-item label="违法类型: ">
          <a-radio-group v-model:value="caseHandlingData.illegal_type">
            <a-radio value="违法建筑类">违法建筑类</a-radio>
            <a-radio value="非法采矿类">非法采矿类</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-divider orientation="left">【案件办理信息-查处】</a-divider>

        <a-form-item label="立案号: ">
          <a-input v-model:value="caseHandlingData.registr_number" />
        </a-form-item>
        <a-form-item label="当事人姓名: ">
          <a-input v-model:value="caseHandlingData.illegal_contact" />
        </a-form-item>
        <a-form-item label="身份证号码: ">
          <a-input v-model:value="caseHandlingData.illegal_contact_idcard" />
        </a-form-item>

        <a-form-item label="处罚通知书: ">
          <div
            v-for="(item, num) in punishImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="punishImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>
        <a-form-item label="交款通知书: ">
          <div
            v-for="(item, num) in paymentImagesList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="paymentImagesList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>

        <a-form-item label="办理人: ">
          <a-input v-model:value="caseHandlingData.transactor_name" />
        </a-form-item>
        <a-form-item label="办理时间: ">
          <a-input v-model:value="caseHandlingData.transact_time" />
        </a-form-item>
      </a-col>

      <a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '拟完善手续'">
        <a-form-item label="实际用途: ">
          <a-input v-model:value="caseHandlingData.actual_use_to" />
        </a-form-item>
        <a-form-item label="当事人: ">
          <a-input v-model:value="caseHandlingData.illegal_contact" />
        </a-form-item>
        <a-form-item label="当事人电话: ">
          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
        </a-form-item>
        <a-form-item label="拟完善手续名称: ">
          <a-input v-model:value="caseHandlingData.result_name" />
        </a-form-item>
        <a-form-item label="完善手续条件: ">
          <a-radio-group v-model:value="caseHandlingData.is_have_checkout_condition">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-divider orientation="left">【案件办理信息-完善手续】</a-divider>

        <a-form-item label="政府同意完善手续证明: ">
          <div
            v-for="(item, num) in agreeImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="agreeImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>
        <a-form-item label="办理手续照片: ">
          <div
            v-for="(item, num) in checkoutImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="124" :src="item.s_filePath" />
          </div>
          <a-empty v-if="checkoutImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>
        <a-form-item label="勘测定界图: ">
          <div
            v-for="(item, num) in boundaryImageList"
            :key="num"
            style="
              position: relative;
              width: 125px;
              height: 112px;
              overflow: hidden;
              float: left;
              background: #f9f9f9;
              margin-left: 6px;
              margin-bottom: 6px;
            "
          >
            <a-image :width="125" :src="item.s_filePath" />
          </div>
          <a-empty v-if="boundaryImageList.length <= 0">
            <template #description>
              <span>暂无图片</span>
            </template>
          </a-empty>
        </a-form-item>
        <a-form-item label="手续有效期: ">
          <a-input v-model:value="caseHandlingData.procedure_indate" />
        </a-form-item>
        <a-form-item label="办理人: ">
          <a-input v-model:value="caseHandlingData.transactor_name" />
        </a-form-item>
        <a-form-item label="办理时间: ">
          <a-input v-model:value="caseHandlingData.transact_time" />
        </a-form-item>
      </a-col>

      <a-col :span="24" v-if="illegal == '2'">
        <a-form-item label="伪变化原因: ">
          <a-input v-model:value="caseHandlingData.pseudo_change_reason" />
        </a-form-item>
        <a-form-item label="实际用途: ">
          <a-input v-model:value="caseHandlingData.actual_use_to" />
        </a-form-item>
        <a-form-item label="实际面积: ">
          <a-input v-model:value="caseHandlingData.actual_area" />
        </a-form-item>
        <a-form-item label="是否有建筑物: ">
          <!-- <a-input v-model:value="caseHandlingData.is_have_build" /> -->
          <a-radio-group v-model:value="caseHandlingData.is_have_build">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否永久性建筑: " v-if="caseHandlingData.is_have_build == 1">
          <a-radio-group v-model:value="caseHandlingData.is_forever_build">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="办理人: ">
          <a-input v-model:value="caseHandlingData.transactor_name" />
        </a-form-item>
        <a-form-item label="办理时间: ">
          <a-input v-model:value="caseHandlingData.transact_time" />
        </a-form-item>
      </a-col>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineProps, watch } from 'vue';
  import { getUserInfoData, getCaseDealDetail } from '@/api/caseauditing/index';

  const caseId: any = ref();
  const props = defineProps({
    id: {
      default: null,
      type: String,
    },
  });
  watch(
    () => props.id,
    (newValue) => {
      caseId.value = newValue;
      getCaseHandlingDetail();
    },
    { immediate: true, deep: true },
  );
  const caseHandlingData: any = ref({
    id: '',
    measure_name: '',
    result_name: '',
    is_assist: 0,
    assist_people: '',
    assist_company: '',
    illegal_contact: null, //违法人
    illegal_contact_phone: null, //违法人联系方式
    actual_scene_case: null, //现场实际情况
  });
  const illegal: any = ref();
  const dealMeasuresList: any = ref([]);
  const evidenceFileList: any = ref([]);
  const boundaryImageList: any = ref([]);
  const afterImageList: any = ref([]);
  const punishImageList: any = ref([]);
  const paymentImagesList: any = ref([]);
  const agreeImageList: any = ref([]);
  const checkoutImageList: any = ref([]);
  const imageList: any = ref([]);
  const videoList: any = ref([]);

  function getUserInfo() {
    getUserInfoData().then((res) => {
      caseHandlingData.value.createusername = res.user.Name;
    });
  }
  function getCaseHandlingDetail() {
    getCaseDealDetail({ caseid: caseId.value }).then((res) => {
      illegal.value = JSON.stringify(res.is_illegal);
      caseHandlingData.value = res.info;
      imageList.value = [];
      if (res.pic_info_list.length > 0) {
        res.pic_info_list.forEach((item) => {
          item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
          item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
          imageList.value.push(item);
        });
      }
      afterImageList.value = [];
      if (res.after_pic_list.length > 0) {
        res.after_pic_list.forEach((item) => {
          item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
          item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
          afterImageList.value.push(item);
        });
      }
      //证明材料
      evidenceFileList.value = [];
      if (res.evidence_file_list.length > 0) {
        res.evidence_file_list.forEach((item) => {
          item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
          item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
          evidenceFileList.value.push(item);
        });
      }
      // 罚款通知书
      if (res.punish_pic_list.length > 0) {
        punishImageList.value = handleImageArray(res.punish_pic_list);
      }
      // 交款通知单
      if (res.payment_pic_list.length > 0) {
        paymentImagesList.value = handleImageArray(res.payment_pic_list);
      }
      // 政府同意证明
      if (res.agree_checkout_pic_list.length > 0) {
        agreeImageList.value = handleImageArray(res.agree_checkout_pic_list);
      }
      // 办理手续
      if (res.checkout_pic_list.length > 0) {
        checkoutImageList.value = handleImageArray(res.checkout_pic_list);
      }
      // 勘测定界照片
      if (res.boundary_pic_list.length > 0) {
        boundaryImageList.value = handleImageArray(res.boundary_pic_list);
      }
      if (res.video_list) {
        res.video_list.forEach((item) => {
          videoList.value.push('http://60.213.14.14:6070/' + item);
        });
      }
    });
  }
  function handleImageArray(imageArr) {
    let returnArray: any = ref([]);
    imageArr.forEach((item) => {
      let obj = {
        s_filePath: 'http://60.213.14.14:6070/' + '/S_' + item,
        filePath: 'http://60.213.14.14:6070/' + '/' + item,
      };
      returnArray.value.push(obj);
    });
    return returnArray.value;
  }
  onMounted(() => {
    getUserInfo();
  });
</script>