parking/src/views/backend/enterprise/project/building/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" :model="baTable.form.items"
                 label-position="right" :label-width="'80px'" :rules="rules"
                 v-if="!baTable.form.loading">
          <el-form-item prop="communityId" label="所在小区">
            <!--            <el-tree-select v-model="baTable.form.items!.communityId" placeholder="请选择" :data="treeDate"-->
            <!--                            :props="defaultProps"-->
            <!--                            style="width: 100%"-->
            <!--                            clearable>-->
            <!--            </el-tree-select>-->
            <el-select v-model="baTable.form.items!.communityId" placeholder="请选择" style="width: 100%">
              <el-option-group v-for="i in treeDate" :label="i.label">
                <el-option v-for="j in i.children" :label="j.label" :value="j.id"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item prop="buildingNumber" label="楼号">
            <el-input v-model="baTable.form.items!.buildingNumber" placeholder="请输入"></el-input>
          </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="baTable.onSubmit(formRef)"
                   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 } from "vue";

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

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


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

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

//区县列表
let communityList = ref([]);
let treeDate = ref<array>([]);
let defaultProps = {
  label: "label",
  value: "id"
};


function getInitData() {
  request.index(buildingTree, {}, "").then((res: any) => {
    if (res.code == 1) {
      treeDate.value = [];
      for (let i in res.data) {
        if (res.data[i].children.length > 0) {
          treeDate.value.push(res.data[i]);
        }
      }
    }
  });
}

</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>