目录代码整合

packages/conv/AppVaccination/AppVaccination.vue

@@ -0,0 +1,205 @@
+<template>
+  <section class="AppVaccination">
+    <ai-list v-if="!showDetail">
+      <ai-title slot="title" title="疫苗接种" isShowBottomBorder isShowArea v-model="areaId" :instance="instance"
+                @change="page.current=1,getTableData()"/>
+      <template #blank>
+        <el-row type="flex">
+          <div class="dataPane" v-for="(op,i) in dataPanes" :key="i">
+            {{ [op.label, op.v].join(" ") }}
+          </div>
+        </el-row>
+        <div class="mainPane">
+          <ai-search-bar>
+            <template #left>
+              <ai-select placeholder="接种状况" v-model="search.inoculationType" @change="page.current=1,getTableData()"
+                         :selectList="dict.getDict('vaccineInoculationType')"/>
+            </template>
+            <template #right>
+              <el-input placeholder="姓名/身份证/联系方式"
+                        v-model="search.name"
+                        size="small"
+                        clearable
+                        @clear="page.current = 1,search.name = '', getTableData()"
+                        v-throttle="() => {page.current = 1, getTableData()}"
+                        suffix-icon="iconfont iconSearch"/>
+            </template>
+          </ai-search-bar>
+          <ai-search-bar>
+            <template #left>
+              <el-button type="primary" icon="iconfont iconAdd" @click="$router.push({hash:'#add'})">添加</el-button>
+              <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button>
+            </template>
+            <template #right>
+              <ai-import :instance="instance" :dict="dict" name="疫苗接种" suffixName="xlsx"
+                         type="appvaccineinoculationuser" @onSuccess="resetSearch"/>
+              <ai-download url="/app/appvaccineinoculationuser/export" :params="{...search,areaId,ids:ids.toString()}"
+                           :instance="instance" fileName="疫苗接种导出文件"/>
+            </template>
+          </ai-search-bar>
+          <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
+                    :size.sync="page.size" @getList="getTableData" :dict="dict"
+                    @selection-change="v=>ids=v.map(e=>e.id)">
+            <el-table-column slot="vaccinationDate" label="接种日期" align="center" class-name="vaccinationDate">
+              <el-table-column label="第一次" align="center" prop="firstDate"/>
+              <el-table-column label="第二次" align="center" prop="secondDate"/>
+              <el-table-column label="第三次" align="center" prop="thirdDate"/>
+            </el-table-column>
+            <el-table-column slot="options" label="操作" align="center" fixed="right">
+              <template slot-scope="{row:{id}}">
+                <el-button type="text" @click="$router.push({hash:'#add',query:{id}})">编辑</el-button>
+                <el-button type="text" @click="handleDelete(id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-list>
+    <add-vaccination v-else :dict="dict" :instance="instance"/>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import AddVaccination from "./addVaccination";
+
+export default {
+  name: "AppVaccination",
+  components: {AddVaccination},
+  label: "疫苗接种",
+  provide() {
+    return {
+      top: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      areaId: "",
+      page: {current: 1, size: 10, total: 0},
+      search: {inoculationType: "", name: ""},
+      ids: [],
+      tableData: [],
+      staData: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    showDetail() {
+      return this.$route.hash == "#add"
+    },
+    dataPanes() {
+      return [
+        {label: "总接种人数", v: this.staData.zjzrs || 0},
+        {label: "已接种第一针人数", v: this.staData.yjzdyzrs || 0},
+        {label: "已接种第二针人数", v: this.staData.yjzdezrs || 0},
+        {label: "已接种第三针人数", v: this.staData.yjzdszrs || 0},
+      ]
+    },
+    colConfigs() {
+      return [
+        {type: "selection", align: 'center'},
+        {label: "姓名", prop: "name", align: 'center'},
+        {label: "性别", prop: "sex", dict: 'sex', align: 'center'},
+        {label: "出生日期", prop: "birthday", align: 'center'},
+        {
+          label: "身份证号", width: "160px", align: 'center',
+          render: (h, {row}) => h('span', null, this.idCardNoUtil.hideId(row.idNumber))
+        },
+        {label: "所属地区", prop: "areaName", align: 'center'},
+        {label: "住址", prop: "address", width: "200px", align: 'center'},
+        {label: "联系方式", prop: "phone", align: 'center'},
+        {slot: 'vaccinationDate'},
+        {slot: "options"},
+      ]
+    }
+  },
+  created() {
+    this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+    this.dict.load('sex', 'vaccineInoculationType')
+    this.getTableData()
+  },
+  methods: {
+    getStaData() {
+      this.instance.post(`/app/appvaccineinoculationuser/countByAreaId`, null, {
+        params: {areaId: this.areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.staData = res.data
+        }
+      })
+    },
+    getTableData() {
+      this.page.current == 1 && this.getStaData()
+      this.instance.post(`/app/appvaccineinoculationuser/list`, null, {
+        params: {...this.search, ...this.page, areaId: this.areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleDelete(ids) {
+      ids = ids?.toString()
+      this.$confirm("确定要删除该条数据吗?").then(() => {
+        this.instance.post(`/app/appvaccineinoculationuser/delete`, null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!");
+            this.getTableData();
+          }
+        })
+      }).catch(() => 0)
+    },
+    resetSearch() {
+      this.page.current = 1
+      this.search = {}
+      this.getTableData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppVaccination {
+  height: 100%;
+
+  ::v-deep .dataPane {
+    flex: 1;
+    min-width: 0;
+    background: #FFFFFF;
+    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+    border-radius: 2px;
+    margin-bottom: 16px;
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  ::v-deep .mainPane {
+    background: #fff;
+    padding: 12px 16px;
+    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+
+    .vaccinationDate {
+      border-bottom: 1px solid #D0D4DC;
+    }
+
+    .ai-table__header {
+      padding: 2px 0;
+    }
+  }
+}
+</style>

packages/conv/AppVaccination/addVaccination.vue

@@ -0,0 +1,235 @@
+<template>
+  <section class="addVaccination">
+    <ai-detail>
+      <ai-title slot="title" :title="addTitle" isShowBottomBorder
+                isShowBack @onBackClick="back"/>
+      <template #content>
+        <el-form size="small" :model="form" ref="vaccinationForm" :rules="rules" label-width="100px">
+          <ai-card title="基本信息">
+            <template #content>
+              <el-form-item label="受种人姓名" prop="name">
+                <el-row type="flex" align="middle">
+                  <el-input placeholder="请输入" v-model="form.name" :disabled="isEdit" clearable
+                            style="margin-right: 8px"/>
+                  <ai-person-select v-if="!isEdit" :instance="instance" @selectPerson="handleSelectPerson"/>
+                </el-row>
+              </el-form-item>
+              <el-form-item label="身份证号码" prop="idNumber">
+                <ai-id v-model="form.idNumber" @change="getInfoByIdNumber" :disabled="isEdit"/>
+              </el-form-item>
+              <el-form-item label="性别" prop="sex">
+                <ai-select disabled v-model="form.sex" :selectList="dict.getDict('sex')"/>
+              </el-form-item>
+              <el-form-item label="出生日期" prop="birthday">
+                <el-date-picker v-model="form.birthday" type="date" disabled/>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="phone">
+                <el-input v-model="form.phone" placeholder="请输入"/>
+              </el-form-item>
+              <el-form-item label="所属地区" isLine prop="areaId">
+                <ai-area-select :instance="instance" v-model="form.areaId" always-show @name="v=>form.areaName=v"/>
+              </el-form-item>
+              <el-form-item label="住址" isLine prop="address">
+                <el-input v-model="form.address" placeholder="请输入"/>
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="接种情况">
+            <template #right>
+              <el-button icon="iconfont iconAdd" type="text" @click="dialog=true">添加</el-button>
+            </template>
+            <template #content>
+              <el-form-item isLine label-width="0">
+                <ai-table :tableData="form.detailList" :colConfigs="colConfigs" :isShowPagination="false" :dict="dict">
+                  <el-table-column slot="options" label="操作" align="center" fixed="right">
+                    <template v-slot="{row,$index}">
+                      <el-button type="text" @click="handleEdit(row,$index)">编辑</el-button>
+                      <el-button type="text" @click="handleDelete($index)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </ai-table>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="back">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog :visible.sync="dialog" title="接种情况" @closed="dialogForm={}" @onConfirm="handleConfirm">
+      <el-form ref="appvaccineinoculationuser" size="small" :model="dialogForm" label-width="100px" :rules="rules">
+        <el-form-item label="接种次数" prop="type">
+          <ai-select v-model="dialogForm.type" :selectList="dict.getDict('vaccineType')"/>
+        </el-form-item>
+        <el-form-item label="接种日期" prop="vaccinateDate">
+          <el-date-picker v-model="dialogForm.vaccinateDate" value-format="yyyy-MM-dd"/>
+        </el-form-item>
+        <el-form-item label="接种人员" prop="vaccinatePerson">
+          <el-input v-model="dialogForm.vaccinatePerson"/>
+        </el-form-item>
+        <el-form-item label="生产企业" prop="createCompany">
+          <el-input v-model="dialogForm.createCompany"/>
+        </el-form-item>
+        <el-form-item label="接种单位" prop="vaccinateUnit">
+          <el-input v-model="dialogForm.vaccinateUnit"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "addVaccination",
+  inject: ['top'],
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      form: {detailList: []},
+      dialog: false,
+      dialogForm: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isEdit() {
+      return !!this.$route.query.id
+    },
+    addTitle() {
+      return this.isEdit ? '编辑疫苗接种人员' : '新增疫苗接种人员'
+    },
+    rules() {
+      return {
+        vaccinateDate: {required: true, message: "请选择 接种日期"},
+        type: {required: true, message: "请选择 接种次数",},
+        areaId: [
+          {required: true, message: "请选择 所属地区"},
+          {trigger:'blur',validator: (r, v, cb) => /0{3}$/g.test(v) ? cb('请选择到村/社区') : cb()}
+        ],
+        name: {required: true, message: "请填写 受种人姓名"},
+        idNumber: {required: true, message: "请填写 身份号码"},
+        sex: {required: true, message: "请填写 性别"},
+        birthday: {required: true, message: "请填写 出生日期"},
+        phone: {required: true, message: "请填写 联系方式"},
+      }
+    },
+    colConfigs() {
+      return [
+        {label: "类型", align: 'center', prop: "type", dict: 'vaccineType'},
+        {label: "接种日期", align: 'center', prop: "vaccinateDate"},
+        {label: "接种人员", align: 'center', prop: "vaccinatePerson"},
+        {label: "生产企业", align: 'center', prop: "createCompany"},
+        {label: "接种单位", align: 'center', prop: "vaccinateUnit"},
+        {slot: "options"}
+      ]
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({})
+    },
+    getDetail() {
+      let {id} = this.$route.query
+      if (id) {
+        this.instance.post("/app/appvaccineinoculationuser/queryDetailById", null, {
+          params: {id}
+        }).then(res => {
+          if (res?.data) {
+            this.form = res.data
+          }
+        })
+      } else {
+        this.$set(this.form,'areaId',JSON.parse(JSON.stringify(this.top.areaId)))
+      }
+    },
+    handleSubmit() {
+      this.$refs.vaccinationForm?.validate(v => {
+        if (v) {
+          this.instance.post("/app/appvaccineinoculationuser/addOrUpdate", this.form).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功!")
+              this.top.resetSearch()
+              this.back()
+            }
+          })
+        }
+      })
+    },
+    handleEdit(row, index) {
+      this.dialogForm = JSON.parse(JSON.stringify({...row, index}))
+      this.dialog = true
+    },
+    handleConfirm() {
+      this.$refs.appvaccineinoculationuser.validate(v => {
+        if (v) {
+          if (this.dialogForm.index > -1) {
+            this.form.detailList.splice(this.dialogForm.index, 1, this.dialogForm)
+          } else {
+            this.form.detailList.push(this.dialogForm)
+          }
+          this.dialog = false
+        }
+      })
+    },
+    handleSelectPerson(v) {
+      let {name, idNumber, phone, currentAreaId:areaId, currentAddress:address} = v
+      this.form = {...this.form, name, idNumber, phone, areaId, address}
+    },
+    getInfoByIdNumber(code) {
+      if (this.idCardNoUtil.checkIdCardNo(code)) {
+        let info = this.idCardNoUtil.getIdCardInfo(code)
+        this.form.sex = this.dict.getValue('sex', info.gender)
+        this.form.birthday = info.birthday
+        this.$forceUpdate()
+      }
+    },
+    handleDelete(index) {
+      this.$confirm("是否要删除该条数据?").then(() => this.form.detailList.splice(index, 1)).catch(() => 0)
+    }
+  },
+  created() {
+    this.dict.load('vaccineType')
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.addVaccination {
+  height: 100%;
+
+  ::v-deep .ai-card__body, .el-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .ai-card {
+    width: 100%;
+  }
+
+  .el-form-item {
+    width: 50%;
+
+    &[isLine] {
+      width: 100%;
+    }
+
+    .el-date-editor {
+      width: 100%;
+    }
+  }
+
+  ::v-deep .el-button {
+    .iconfont {
+      color: inherit
+    }
+  }
+}
+</style>