dvcp_v2_webapp/packages/work/AppHelpedResident/hrList.vue

<template>
  <section class="hrList">
    <ai-list>
      <ai-title slot="title" title="监测对象" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
                @change="page.current=1,getTableData()" :hideLevel="hideLevel">
        <template #rightBtn>
          <el-button type="primary" icon="iconfont iconSetting" @click="dialog=true" v-if="$permissions('app_apppreventionreturntopovertyalarmconfig_edit')">
            预警规则
          </el-button>
        </template>
      </ai-title>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select placeholder="档案状态" v-model="search.status" :selectList="dict.getDict('fpPrtpStatus')" @change="page.current=1,getTableData()"/>
            <ai-select placeholder="监测对象类型" v-model="search.objectType" :selectList="dict.getDict('fpType')" @change="page.current=1,getTableData()"/>
            <ai-select placeholder="风险因素" v-model="search.riskType" :selectList="dict.getDict('fpRiskType')" @change="page.current=1,getTableData()"/>
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="search.birthStart" type="date" size="small" unlink-panels placeholder="选择出生开始日期"
                            @change="page.current=1,getTableData()"/>
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="search.birthEnd" type="date" size="small" placeholder="选择出生结束日期" unlink-panels
                            @change="page.current=1,getTableData()"/>
            <ai-select placeholder="性别" v-model="search.sex" :selectList="dict.getDict('sex')" @change="page.current=1,getTableData()"/>
            <!-- <ai-select placeholder="文化程度" v-model="search.education" :selectList="dict.getDict('fpEducation')" @change="page.current=1,getTableData()"/>
            <ai-select placeholder="民族" v-model="search.nation" :selectList="dict.getDict('fpNation')" @change="page.current=1,getTableData()"/>
            <ai-select placeholder="政治面貌" v-model="search.politicsStatus" :selectList="dict.getDict('fpPoliticalOutlook')" @change="page.current=1,getTableData()"/> -->
          </template>
          <template #right>
            <el-input size="small" placeholder="姓名/证件/联系方式" v-model="search.con" clearable @change="page.current=1,getTableData()"/>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="showEdit()" v-if="$permissions('app_apppreventionreturntopoverty_edit')">添加</el-button>
            <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)"
                       v-if="$permissions('app_apppreventionreturntopoverty_del')">删除
            </el-button>
          </template>
          <template #right>
            <ai-import :instance="instance" name="监测对象" title="导入监测对象"
                       suffixName="xlsx"
                       url="/app/apppreventionreturntopoverty/downloadTemplate"
                       importUrl="/app/apppreventionreturntopoverty/import"
                       @onSuccess="page.current=1,getTableData()"/>
            <ai-download url="/app/apppreventionreturntopoverty/export" :params="{...search,ids}"
                         :instance="instance" fileName="监测对象导出文件"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict"
                  @selection-change="v=>ids=v.map(e=>e.id)">
          <el-table-column slot="options" label="操作" fixed="right" align="center">
            <template slot-scope="{row}">
              <el-button type="text" @click="showDetail(row.id)" v-if="$permissions('app_apppreventionreturntopoverty_detail')">详情</el-button>
              <el-button type="text" @click="handleDelete(row.id)" v-if="$permissions('app_apppreventionreturntopoverty_del') &&/[34]/.test(row.status)">删除
              </el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog :visible.sync="dialog" title="预警规则设置" @closed="form={}" @onConfirm="submitDialog" width="600px">
      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="160px">
        <el-form-item label="家庭纯收入标准" prop="type0">
          <el-input v-model.number="form.type0" placeholder="请输入" maxlength="8" show-word-limit/>
        </el-form-item>
        <el-form-item label="家庭人均纯收入标准" prop="type1">
          <el-input v-model.number="form.type1" placeholder="请输入" maxlength="8" show-word-limit/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "hrList",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {type: 'selection'},
        {label: "姓名", prop: "name", align: "center"},
        {label: "性别", prop: "sex", dict: 'sex', align: "center"},
        {label: "证件号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber))},
        {label: "年龄", prop: "age", align: "center"},
        {label: "民族", prop: "nation", align: "center", dict: "fpNation"},
        {label: "文化程度", prop: "education", align: "center", dict: "fpEducation"},
        {label: "监测对象类型", prop: "objectType", align: "center", dict: "fpType"},
        {label: "风险因素", prop: "riskType", align: "center", dict: "fpRiskType"},
        {label: "档案状态", prop: "status", dict: "fpPrtpStatus", align: "center"},
        {slot: "options"}
      ]
    },
    hideLevel() {
      return this.user.info.areaList?.length - 1
    }
  },
  data() {
    return {
      search: {name: '', objectType: '', riskType: '', isHousehold: 1},
      page: {current: 1, size: 10, total: 0},
      tableData: [],
      ids: [],
      dialog: false,
      form: {},
      rules: {
        type0: [{required: true, message: "请输入家庭纯收入标准", trigger: "change"}],
        type1: [{required: true, message: "请输入家庭人均纯收入标准", trigger: "change"}],
      }
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/app/apppreventionreturntopoverty/list", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    showEdit(id) {
      this.$router.push({query: {id}, hash: "#add"})
    },
    showDetail(id) {
      this.$router.push({query: {id}})
    },
    handleDelete(ids) {
      this.$confirm("是否要删除监测对象").then(() => {
        this.instance.post("/app/apppreventionreturntopoverty/delete", null, {
          params: {ids: ids?.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
    submitDialog() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          let loading = this.$loading({text: "提交中..."})
          this.instance.post(`/app/apppreventionreturntopovertyalarmconfig/addOrUpdate`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('预警规则设置成功');
              this.getTableData()
              this.dialog = false
            }
          }).finally(() => {
            loading.close()
          })
        }
      })
    }
  },
  created() {
    this.search.areaId = this.user.info.areaId
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.hrList {
  height: 100%;
}
</style>