parking/src/views/backend/enterprise/project/map/popupForm.vue

<template>
  <!-- 对话框表单 -->
  <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
             :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm"
             width="30%"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        {{ baTable.form.operate ? baTable.form.operate == "edit" ? "编辑" : "添加" : "无标题" }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading">
      <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
           style="width: calc(100% - 40px);margin-bottom: 40px;">
        <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                 label-position="right" :label-width="'100px'" :rules="rules"
                 v-if="!baTable.form.loading">
          <el-form-item label="所在区（县）" v-if="baTable.form.operate == 'add'">
            <el-select v-model="districtId" placeholder="请选择" style="width: 100%" @change="selectDstrict"
            >
              <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="communityId" label="所在小区">
            <el-select v-model="baTable.form.items!.communityId" placeholder="请选择" style="width: 100%"
                       @change="selectCommunity" v-if="baTable.form.operate == 'add'">
              <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-input v-else :disabled="true" v-model="baTable.form.items!.communityName"></el-input>
          </el-form-item>
          <el-form-item prop="buildingIds" label="相关楼号">
            <el-select v-model="baTable.form.items!.buildingIds" placeholder="请选择" style="width: 100%" clearable
                       multiple>
              <el-option v-for="item in buildingList" :label="item.buildingNumber" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="mapUrl" label="上传地图">
            <pictureUpload v-model:fileUrl="baTable.form.items!.mapUrl"></pictureUpload>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button v-blur :loading="baTable.form.submitLoading" @click="onSubmit" type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted, watch } from "vue";

import type baTableClass from "/@/utils/baTable";
import type { ElForm, FormItemRule } from "element-plus";
import FormItem from "/@/components/formItem/index.vue";
import { building_list, community_list, district_list, orderExpress } from "/@/api/controllerUrls";
import { ElNotification } from "element-plus/es";
import pictureUpload from "/@/components/pictureUpload/multiple.vue";
import request from "/@/api/request";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;

console.log(baTable.mapInfo);


const rules: Partial<Record<string, FormItemRule[]>> = reactive({
  communityId: [
    {
      required: true,
      message: "请选择",
      trigger: "blur"
    }
  ],
  buildingIds: [
    {
      required: true,
      message: "请选择",
      trigger: "blur"
    }
  ],
  mapUrl: [
    {
      required: true,
      message: "请上传",
      trigger: "blur"
    }
  ]
});

onMounted(() => {
  getInitData();
});


watch(() => baTable.mapInfo.value, (nValue, oValue) => {
  if (baTable.form.operate == "edit") {
    selectCommunity(nValue.communityId);
  }
});

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

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

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

//选择区县，获取小区列表
function selectDstrict(event: any) {
  request.index(community_list, {
    districtIds: event
  }, "").then((res: any) => {
    if (res.code == 1) {
      communityList.value = res.data;
    }
  });
}

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

//选择小区，获取楼号列表
function selectCommunity(event: any) {
  request.index(building_list, {
    communityIds: event
  }, "").then((res: any) => {
    if (res.code == 1) {
      buildingList.value = res.data;
    }
  });
}


function onSubmit(){
  delete baTable.form.items!.communityName
  baTable.onSubmit(formRef.value)
}

</script>

<style scoped lang="scss">
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-box-shadow-light);
  border: 1px dashed var(--color-sub-1);
  cursor: pointer;
  overflow: hidden;
  width: 110px;
  height: 110px;
}

.avatar-uploader:hover {
  border-color: var(--color-primary);
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>