parking/src/views/backend/enterprise/members/entrust/auditDialog.vue

<template>
  <el-dialog title="委托详情" v-model="showDialog" width="1200px" @close="closeDialog">
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="border: #d9d9d9 1px solid">
          <div style="padding:10px;background-color: #d9d9d9">用户提交</div>
          <el-descriptions
            class="margin-top"

            :column="1"
            border
          >
            <el-descriptions-item width="250" label="区县">
              {{ data.districtName }}
            </el-descriptions-item>
            <el-descriptions-item width="250" label="小区">
              {{ data.communityName }}
            </el-descriptions-item>
            <el-descriptions-item width="250" label="楼号">
              {{ data.buildingNumber }}
            </el-descriptions-item>
            <el-descriptions-item width="250" label="车位编号">
              <el-tag>{{ data.parkingNumber }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item width="250" label="车位类型">
              {{ data.parkingType == 1 ? "车库" : "车位" }}
            </el-descriptions-item>
            <el-descriptions-item label="面积">
              {{ data.area }}
            </el-descriptions-item>
            <el-descriptions-item label="售卖方式">
              <el-tag style="margin: 0px 3px" v-if="data.entrustType==0">租售</el-tag>
              <el-tag style="margin: 0px 3px" v-if="data.entrustType==1">出租</el-tag>
              <el-tag style="margin: 0px 3px" v-if="data.entrustType==2">出售</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="售价">
              {{ data.salePrice }}
            </el-descriptions-item>
            <el-descriptions-item label="租金">
              {{ data.hirePrice }}
            </el-descriptions-item>
            <el-descriptions-item label="委托人联系电话">
              {{ data.contactNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="证明文件">
              <el-image v-if="data.evidenceFile.length>0"
                        style="width: 100px; height: 100px"
                        :src="data.evidenceFile[0].url"
                        :zoom-rate="1"
                        :preview-src-list="data.evidenceFile.map(item=> item.url)"
                        fit="cover"
              />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>


      <el-col :span="16">
        <div style="border: #d9d9d9 1px solid">
          <div style="padding:10px;background-color: #d9d9d9">审核登记</div>

          <el-form ref="formRef" :model="formData" label-position="right" label-width="100px"
                   :rules="formRules">
            <el-tabs style="margin: 0 20px" v-model="activeTab">
              <el-tab-pane name="first" label="车位信息">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="区县" prop="districtId">
                      <el-select v-model="formData.districtId" style="width: 50%" @change="getCommunity">
                        <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="小区" prop="communityName">
                      <el-select v-if="!communityNameCustom" v-model="formData.communityName" style="width: 50%">
                        <el-option v-for="item in communityList" :label="item.communityName"
                                   :value="item.communityName"></el-option>
                      </el-select>
                      <el-input v-else v-model="formData.communityName" style="width: 50%"></el-input>
                      <el-checkbox v-model="communityNameCustom" style="margin-left: 20px">自定义</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="楼号" prop="buildingNumber">
                      <el-select v-if="!buildingNumberCustom&&!communityNameCustom" v-model="formData.buildingNumber"
                                 @visible-change="getBuilding" style="width: 50%">
                        <el-option v-for="item in buildingList" :label="item.buildingNumber"
                                   :value="item.buildingNumber"></el-option>
                      </el-select>
                      <el-input v-else v-model="formData.buildingNumber" style="width: 50%"></el-input>
                      <el-checkbox v-model="buildingNumberCustom" style="margin-left: 20px">自定义</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="车位编号" prop="parkingNumber">
                      <el-input v-model="formData.parkingNumber" style="width: 50%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="pictureUrl" label="主展示图">
                      <pictureUpload v-model="formData.pictureUrl"></pictureUpload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="parkingUrl" label="车位照片">
                      <pictureUpload2 :limit="10" v-model="formData.parkingUrl"></pictureUpload2>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane name="second" label="车位简介">
                <el-form-item label="" prop="parkingShow" label-width="0">
                  <editor v-model="formData.parkingShow"></editor>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>

          </el-form>
        </div>
      </el-col>
    </el-row>


    <template #footer>
      <el-button type="success" @click="submit(true)">审核通过</el-button>
      <el-button type="danger" @click="submit(false)">拒绝</el-button>
    </template>

  </el-dialog>
</template>

<script setup>

import { reactive, ref } from "vue";
import request from "/@/api/request";
import { building_list, community_list, district_list, entrust } from "/@/api/controllerUrls";
import { ElMessage } from "element-plus";
import pictureUpload from "/@/components/pictureUpload/index.vue";
import pictureUpload2 from "/@/components/pictureUpload/multiple.vue";
import editor from "/@/components/editor/index.vue";


let showDialog = ref(false);


defineExpose({
  open
});


let data = ref({});

let communityNameCustom = ref(false); //小区名自定义
let buildingNumberCustom = ref(false); //楼号自定义

function open(event) {
  data.value = event;
  // data.value.evidenceFile = data.value.evidenceFile ? JSON.parse(data.value.evidenceFile) : [];

  formRef.value?.resetFields();
  formData.id = data.value.id;
  formData.parkingNumber = event.parkingNumber;
  showDialog.value = true;
  getDistrict();
}

function submit(event) {
  formData.operateType = event ? 1 : 0;
  if (event) {
    formRef.value.validate((valid) => {
      if (valid) {
        request.edit(entrust, formData, "release").then((res) => {
          if (res.code == 1) {
            showDialog.value = false;
          }
        });
      }
    });
  } else {
    request.edit(entrust, formData, "release").then((res) => {
      if (res.code == 1) {
        showDialog.value = false;
      }
    });
  }
}

let activeTab = ref("first");

let formRef = ref();

let formData = reactive({
  id: "",//委托单id
  operateType: 1,
  districtId: "",
  communityName: "",
  buildingNumber: "",
  parkingNumber: "",
  parkingUrl: "",//车位展示图片
  pictureUrl: "",//车位展示图片
  parkingShow: "<p><br></p>"//车位简介
});

let formRules = {
  districtId: [
    { required: true, message: "不能为空" }
  ],
  communityName: [
    { required: true, message: "不能为空" }
  ],
  buildingNumber: [
    { required: true, message: "不能为空" }
  ],
  parkingNumber: [
    { required: true, message: "不能为空" }
  ]
};


//区县列表
let districtList = ref([]);

function getDistrict() {
  request.index(district_list, {}, "").then((res) => {
    if (res.code == 1) {
      districtList.value = res.data;
    }
  });
}

//小区列表
let communityList = ref([]);

//选择区县，获取小区列表
function getCommunity(event) {
  if (!event) return;
  formData.communityName = "";

  request.index(community_list, {
    districtIds: formData.districtId
  }, "").then((res) => {

    if (res.code == 1) {
      communityList.value = res.data;
    }
  });
}

//楼号列表
let buildingList = ref([]);

//选择小区，获取楼号列表
function getBuilding(event) {
  if (!event) return;
  // if (!buildingNumberCustom.value) {
    let communityId = "";
    for (let r of communityList.value) {
      if (r.communityName = formData.communityName) {
        communityId = r.id;
        break;
      }
    }
    request.index(building_list, {
      communityIds: communityId
    }, "").then((res) => {
      if (res.code == 1) {
        buildingList.value = res.data;
      }
    });
  // }


}


const emit = defineEmits(["close"]);

function closeDialog() {
  emit("close");
}

</script>

<style scoped>

</style>