住户信息结构完成

src/views/system/resident/addResident.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader :title="userid ? '编辑用户' : '添加用户'"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="130px">
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="楼栋房屋" prop="houseId">
+                <el-cascader v-model="userHousepath" :options="treedata" @change="handleChange" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="住户姓名" prop="name">
+                <el-input v-model="form.name" placeholder="请输入住户姓名" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="住户性别" prop="gender">
+                <el-radio-group v-model="form.gender">
+                  <el-radio :value="1">男</el-radio>
+                  <el-radio :value="0">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="身份证号码" prop="idCard">
+                <el-input v-model="form.idCard" placeholder="请输入证件号码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="与业主的关系" prop="type">
+                <el-select v-model.number="form.type" class="m-2" placeholder="请选择">
+                  <el-option v-for="item in ownerRelationshiplist" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="手机号码" prop="phone">
+                <el-input v-model.number="form.phone" placeholder="请输入手机号码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="身份证正面照" prop="cardImageFront">
+                <el-upload
+                  ref="upload"
+                  class="avatar-uploader"
+                  :action="uploadUrl"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :on-exceed="handleExceed"
+                  :on-error="handleError"
+                  :limit="1"
+                >
+                  <img v-if="form.cardImageFront" :src="form.cardImageFront" class="avatar" />
+                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="身份证背面照" prop="cardImageBack">
+                <el-upload
+                  ref="upload2"
+                  class="avatar-uploader"
+                  :action="uploadUrl"
+                  :show-file-list="false"
+                  :limit="1"
+                  :on-exceed="handleExceed2"
+                  :on-success="handleAvatar2Success"
+                  :on-error="handleError2"
+                >
+                  <img v-if="form.cardImageBack" :src="form.cardImageBack" class="avatar" />
+                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" :row="5" v-model.number="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+          <el-form-item style="margin-top: 30px">
+            <el-button type="primary" @click="submitForm">确定</el-button>
+            <el-button @click="cancelForm">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import { useHouseStore } from '@/store/modules/house';
+import { addHouseAPI, EditHouseApi, getHouseApi, getHouselistAPI, getVillageTree } from '@/api/system/house';
+import { convertBuildingToTree, getHousePathById, ownerRelationshiplist } from './index';
+import { ResidentForm } from '@/api/system/resident/type';
+import { CascaderValue, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
+import { genFileId } from 'element-plus';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { addResident, getResident, updateResident } from '@/api/system/resident';
+
+const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/resident/uploadImage';
+
+const router = useRouter();
+const route = useRoute();
+const formRef = ref();
+const form = ref<ResidentForm>({
+  houseId: null,
+  name: '',
+  gender: 1,
+  idCard: '',
+  type: 0, //  与业主关系 0业主
+  phone: null, //手机号
+  cardImageFront: '',
+  cardImageBack: '',
+  remark: '' //备注
+});
+const userHousepath = ref<CascaderValue>([]);
+const rules = ref({
+  houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
+  cardImageFront: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
+  cardImageBack: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
+  idCard: [
+    { required: true, message: '请输入身份证号', trigger: 'blur' },
+    {
+      validator(_, value) {
+        const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
+        return reg.test(value);
+      },
+      message: '请输入正确的18位身份证号码',
+      trigger: 'blur'
+    }
+  ],
+  type: [{ required: true, message: '请选择与业主关系', trigger: 'blur' }],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    {
+      validator: (_, value) => {
+        return /^1[3-9]\d{9}$/.test(value);
+      },
+      message: '请输入正确的手机号码',
+      trigger: 'blur'
+    }
+  ]
+});
+
+// !==  楼栋房屋  =============================================================================
+const userid = ref(null);
+const treedata = ref([]);
+function gettreedata() {
+  getCommunitylistAPI().then((res) => {
+    const currentviliage = res.rows.find((item) => item.choiceStatus === 0);
+    if (currentviliage.villageId) {
+      getVillageTree(currentviliage.villageId).then((res) => {
+        treedata.value = convertBuildingToTree(res.data.buildings);
+        console.log(treedata.value);
+        // !== 编辑用户 =============================================================================
+        if (route.query.id) {
+          userid.value = route.query.id;
+          getResident(userid.value).then((res) => {
+            form.value = {
+              ...res.data
+            };
+            const arr = getHousePathById(treedata.value, form.value.houseId);
+            console.log(arr);
+            userHousepath.value = arr;
+          });
+        }
+      });
+    }
+  });
+}
+gettreedata();
+function handleChange(val: CascaderValue) {
+  userHousepath.value = val;
+  form.value.villageId = val[0];
+  form.value.buildingId = val[1];
+  form.value.houseId = val[2];
+}
+
+// !== 上传文件 =============================================================================
+// 上传文件成功
+const upload = ref<UploadInstance>();
+const upload2 = ref<UploadInstance>();
+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  if (response.data && response.data.url) {
+    form.value.cardImageFront = response.data.url;
+  } else {
+    ElMessage.error('短时间内不允许重复提交，请稍候再试');
+  }
+};
+const handleAvatar2Success: UploadProps['onSuccess'] = (response, uploadFile) => {
+  if (response.data && response.data.url) {
+    form.value.cardImageBack = response.data.url;
+  } else {
+    ElMessage.error('短时间内不允许重复提交，请稍候再试');
+  }
+};
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  upload.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  upload.value!.handleStart(file);
+  upload.value?.submit();
+};
+const handleExceed2: UploadProps['onExceed'] = (files) => {
+  upload2.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  upload2.value!.handleStart(file);
+  upload2.value?.submit();
+};
+const handleError: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  console.log(error);
+};
+const handleError2: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  console.log(error);
+};
+// !== 提交 =============================================================================
+
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (!form.value.cardImageFront.trim()) {
+        return ElMessage.error('请上传身份证正面照片');
+      }
+      if (!form.value.cardImageBack.trim()) {
+        return ElMessage.error('请上传身份证背面照片');
+      }
+
+      if (userid.value) {
+        console.log('edit');
+        updateResident(form.value).then(() => {
+          ElMessage.success('修改成功');
+          cancelForm();
+        });
+      } else {
+        console.log('add');
+        addResident(form.value).then(() => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
+      console.log(form.value);
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.push({
+    path: '/house/resident'
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.avatar-uploader {
+  border: 1px solid #ccc;
+}
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+  object-fit: cover;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+
+  .formBody {
+    width: 1050px;
+    margin: 0 auto;
+
+    &:deep(.el-form-item__content, .el-select, .el-input) {
+      width: 350px !important;
+      margin-right: 10px;
+      .el-cascader {
+        width: 100%;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 20px;
+      align-items: center;
+    }
+    .unitBox {
+      .el-input {
+        width: 440px;
+        margin-right: 10px;
+      }
+    }
+    .el-button {
+      width: 80px;
+      height: 35px;
+      margin-right: 20px;
+    }
+
+    .houseTypebox {
+      display: flex;
+      align-items: center;
+      .el-input {
+        width: 100px;
+        margin-right: 0px;
+      }
+      span {
+        margin: 0 20px;
+      }
+    }
+  }
+}
+</style>