车辆信息和房屋信息完成

2022-04-19 17:59:14 +08:00
parent 4ec129a695
commit e854868514
2 changed files with 140 additions and 41 deletions
--- a/packages/meta/AppResident/components/personalAssets.vue
+++ b/packages/meta/AppResident/components/personalAssets.vue
@@ -0,0 +1,134 @@
+<template>
+  <section class="personalAssets">
+    <el-form ref="PersonalAssets" :model="form" size="small" label-width="0">
+      <ai-edit-card title="车辆信息" :show-btn="permissions('app_appresident_edit')"
+                    @save="submitCars" @cancel="getCars">
+        <template>
+          <el-form-item label-width="0">
+            <span v-for="car in form.cars" :key="car.id" v-text="car.vehicleNumber+'  '"/>
+            <ai-empty v-if="form.cars.length==0"/>
+          </el-form-item>
+        </template>
+        <template #edit>
+          <el-form-item v-for="(car,i) in form.cars" :key="i" :prop="`cars.${i}.vehicleNumber`"
+                        :rules="{required: true,message:'请输入车牌号'}">
+            <el-input v-model="car.vehicleNumber" clearable placeholder="请输入车牌号">
+              <el-button slot="append" type="text" @click="form.cars.splice(i,1)">删除</el-button>
+            </el-input>
+          </el-form-item>
+          <el-button type="text" @click="form.cars.push({})">新增车辆</el-button>
+        </template>
+      </ai-edit-card>
+      <ai-edit-card title="房屋信息" :show-btn="permissions('app_appresident_edit')"
+                    @save="submitHouses" @cancel="getHouses">
+        <template>
+          <el-form-item label-width="0">``
+            <div v-for="house in form.houses" :key="house.id" v-text="[house.areaName,house.address].join('')"/>
+            <ai-empty v-if="form.houses.length==0"/>
+          </el-form-item>
+        </template>
+        <template #edit>
+          <div v-for="(house,i) in form.houses" :key="i">
+            <el-form-item :prop="`houses.${i}.areaId`" :rules="{required: true,message:'请选择房屋地址'}">
+              <ai-area-get v-model="house.areaId" :instance="instance" :root="user.info.areaId"/>
+            </el-form-item>
+            <el-form-item :prop="`houses.${i}.address`" :rules="{required: true,message:'请输入详情地址'}">
+              <el-input v-model="house.address" clearable placeholder="请输入详情地址" size="small"/>
+            </el-form-item>
+          </div>
+          <el-button type="text" @click="form.houses.push({})">新增房屋</el-button>
+        </template>
+      </ai-edit-card>
+    </el-form>
+  </section>
+</template>
+
+<script>
+import AiEditCard from "./AiEditCard";
+import {mapState} from "vuex";
+
+export default {
+  name: "personalAssets",
+  components: {AiEditCard},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    residentId: {required: true, default: ""}
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      form: {
+        cars: [],
+        houses: []
+      }
+    }
+  },
+  methods: {
+    getCars() {
+      let {residentId} = this
+      this.instance.post("/app/appresidentvehicle/list", null, {
+        params: {residentId}
+      }).then(res => {
+        if (res?.data) {
+          this.form.cars = res.data.records || []
+        }
+      })
+    },
+    submitCars(cb) {
+      this.$refs.PersonalAssets.validate(v => {
+        if (v) {
+          let {residentId, form: {cars: residentVehicleList}} = this
+          this.instance.post("/app/appresidentvehicle/update", {
+            residentId, residentVehicleList
+          }).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功")
+              this.getCars()
+              cb?.()
+            }
+          })
+        }
+      })
+    },
+    getHouses() {
+      let {residentId} = this
+      this.instance.post("/app/appresidenthouse/list", null, {
+        params: {residentId}
+      }).then(res => {
+        if (res?.data) {
+          this.form.houses = res.data.records || []
+        }
+      })
+    },
+    submitHouses(cb) {
+      this.$refs.PersonalAssets.validate(v => {
+        if (v) {
+          let {residentId, form: {houses: residentHouseList}} = this
+          this.instance.post("/app/appresidenthouse/update", {
+            residentId, residentHouseList
+          }).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功")
+              this.getHouses()
+              cb?.()
+            }
+          })
+        }
+      })
+    }
+  },
+  created() {
+    this.getCars()
+    this.getHouses()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.personalAssets {
+}
+</style>