监测对象界面完成

packages/jianping/AppHelpedResident/hrAdd.vue

@@ -0,0 +1,213 @@
+<template>
+  <section class="hrAdd">
+    <ai-detail>
+      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
+      <template #content>
+        <el-form :model="form" ref="ruleForm" :rules="rules" label-width="130px" label-position="right" size="small">
+          <ai-card title="基本信息">
+            <template #content>
+              <div flex class="half wrap">
+                <div flex class="column">
+                  <el-form-item label="姓名" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入姓名" maxlength="20" show-word-limit/>
+                  </el-form-item>
+                  <el-form-item label="身份证号" prop="idNumber">
+                    <el-input v-model="form.idNumber" placeholder="请输入身份证号" :maxlength="18"
+                              @change="handleIdNumberAutocomplete"/>
+                  </el-form-item>
+                  <el-form-item label="性别" prop="sex">
+                    <ai-select v-model="form.sex" :selectList="dict.getDict('sex')" disabled/>
+                  </el-form-item>
+                </div>
+                <el-form-item label="个人照片" prop="photo">
+                  <ai-avatar :instance="instance" v-model="form.photo"/>
+                </el-form-item>
+                <el-form-item label="出生日期" prop="birthday">
+                  <el-date-picker disabled value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"
+                                  v-model="form.birthday" type="date" placeholder="选择日期"/>
+                </el-form-item>
+                <el-form-item label="年龄" prop="age">
+                  <el-input disabled v-model="form.age" placeholder="请输入年龄" type="number"/>
+                </el-form-item>
+                <el-form-item label="文化程度" prop="education">
+                  <ai-select v-model="form.education" :selectList="dict.getDict('education')"/>
+                </el-form-item>
+                <el-form-item label="民族" prop="nation">
+                  <ai-select v-model="form.nation" :selectList="dict.getDict('nation')"/>
+                </el-form-item>
+                <el-form-item label="政治面貌" prop="politicsStatus">
+                  <ai-select v-model="form.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
+                </el-form-item>
+
+                <el-form-item label="在校生状况" prop="job">
+                  <ai-select v-model="form.job" :selectList="dict.getDict('job')"/>
+                </el-form-item>
+                <el-form-item label="健康状况" prop="faithType">
+                  <ai-select v-model="form.faithType" :selectList="dict.getDict('faithType')"/>
+                </el-form-item>
+                <el-form-item label="务工时间(月)" prop="idNumber">
+                  <el-input v-model="form.idNumber" placeholder="请输入" clearable/>
+                </el-form-item>
+                <el-form-item label="劳动技能" prop="maritalStatus">
+                  <ai-select v-model="form.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
+                </el-form-item>
+                <el-form-item label="务工区域" prop="idNumber">
+                  <el-input v-model="form.idNumber" placeholder="请输入" clearable maxlength="30" show-word-limit/>
+                </el-form-item>
+                <el-form-item label="是否参加大病保险" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('yesOrNo')"/>
+                </el-form-item>
+                <el-form-item label="是否参加基本医保" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('yesOrNo')"/>
+                </el-form-item>
+                <el-form-item label="是否参加基本医保" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                </el-form-item>
+                <el-form-item label="享受最低生活保障" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                </el-form-item>
+                <el-form-item label="是否参加养老保险" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                </el-form-item>
+                <el-form-item label="是否特困供养" prop="militaryStatus">
+                  <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                </el-form-item>
+              </div>
+            </template>
+          </ai-card>
+          <ai-card title="联络信息">
+            <template slot="content">
+              <el-form-item label="联系方式" prop="phone">
+                <el-input v-model="form.phone" placeholder="请输入联系方式" :maxlength="11" show-word-limit/>
+              </el-form-item>
+              <el-form-item label="现住址" prop="currentAreaId">
+                <ai-area-select :instance="instance" v-model="form.currentAreaId"/>
+                <el-form-item prop="currentAddress">
+                  <el-input v-model="form.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit clearable/>
+                </el-form-item>
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="户籍信息">
+            <template slot="content">
+              <div flex class="half wrap">
+                <el-form-item label="是否户主" prop="householdName">
+                  <ai-select v-model="form.householdName" :selectList="dict.getDict('householdName')"
+                             @change="form.householdRelation=null"/>
+                </el-form-item>
+                <template v-if="form.householdName==1">
+                  <el-form-item label="监测对象类型" prop="militaryStatus">
+                    <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                  </el-form-item>
+                  <el-form-item label="是否危房" prop="militaryStatus">
+                    <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                  </el-form-item>
+                  <el-form-item label="是否饮用水安全" prop="militaryStatus">
+                    <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                  </el-form-item>
+                  <el-form-item label="是否搬迁" prop="militaryStatus">
+                    <ai-select v-model="form.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                  </el-form-item>
+                </template>
+                <template v-if="form.householdName==0">
+                  <el-form-item label="与户主关系" prop="householdRelation">
+                    <ai-select v-model="form.householdRelation" :selectList="dict.getDict('householdRelation')"/>
+                  </el-form-item>
+                  <el-form-item label="户主身份证号" prop="householdIdNumber">
+                    <el-input v-model="form.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18" clearable/>
+                  </el-form-item>
+                </template>
+              </div>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="back">取消</el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "hrAdd",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    addTitle() {
+      return !!this.$route.query.id ? "编辑检测对象" : "添加检测对象"
+    },
+    rules() {
+      return {
+        idNumber: [{required: true, message: "请输入身份证号"}],
+        name: [{required: true, message: "请输入姓名"}],
+        sex: [{required: true, message: "请选择性别"}],
+        currentAreaId: [{required: true, message: "请选择户籍地"}],
+        householdName: [{required: true, message: "请选择是否户主"}],
+      }
+    }
+  },
+  data() {
+    return {
+      form: {}
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({})
+    },
+    getDetail() {
+      let {id} = this.$route.query
+      id && this.instance.post("/appportaluserenterprise/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
+    },
+    handleIdNumberAutocomplete(v) {
+      let {birthday, sex} = this.idCardNoUtil.getIdCardInfo(v)
+      this.form = {...this.form, birthday, sex}
+    },
+    submit() {
+      this.$refs.ruleForm.validate(v => {
+        if (v) {
+
+        }
+      })
+    }
+  },
+  created() {
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrAdd {
+  height: 100%;
+
+  .half {
+    align-items: flex-start;
+
+    & > .el-form-item, & > div {
+      width: 50%;
+
+      .el-form-item {
+        width: 100%;
+      }
+    }
+  }
+
+  .el-date-editor {
+    width: 100%;
+  }
+}
+</style>