dvcp_v2_webapp/packages/conv/AppVaccination/AppVaccination.vue

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