dvcp_v2_webapp/packages/grid/AppHomesteadManagement/components/List.vue

<template>
  <section class="AppPetitionManage">
    <ai-list>
      <!-- 标题 -->
      <ai-title slot="title" title="宅基地管理" isShowBottomBorder  isShowArea v-model="areaId" :instance="instance" @change="page.current=1,getList()"/>
      <template #content>
        <ai-search-bar bottomBorder>
          <template slot="left">
            <!-- 定位状态 -->
            <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('homesteadLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
          </template>

          <!-- 搜索 -->
          <template slot="right">
            <el-input v-model="search.name" size="small"
              v-throttle="() => {page.current = 1, getList()}" placeholder="户主/联系电话" clearable @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch" />
          </template>
        </ai-search-bar>

        <ai-search-bar class="ai-search-ba mar-t10">
          <template slot="left">
            <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加 </el-button>
            <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
          </template>

          <!-- 导入导出 -->
          <template #right>
            <ai-import :instance="instance" :dict="dict" type="apphomesteadinfo" :importParams="{ areaId: user.info && user.info.areaId }" name="宅基地管理" @success="getList()">
              <el-button icon="iconfont iconImport">导入</el-button>
            </ai-import>
            <ai-download :instance="instance" url="/app/apphomesteadinfo/export" :params="param" fileName="宅基地管理模板" :disabled="tableData.length == 0">
              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
            </ai-download>
          </template>
        </ai-search-bar>

        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
          <el-table-column slot="locationStatus" label="定位状态" align="center">
            <template slot-scope="{ row }">
              <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
              <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
            </template>
          </el-table-column>

          <el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
              <el-button type="text" @click="remove(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'List',
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },

  data() {
    return {
      isAdd: false,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      search: {
        locationStatus: '',
        name: '',
      },
      id: '',
      ids: [],
      colConfigs: [
        { type: 'selection', width: 100,  align: 'center'},
        {
          prop: 'areaName',
          label: '村/社区',
        },
        {
          prop: 'name',
          label: '户主',
          align: 'center',
        },
        { prop: 'phone', label: '联系电话', align: 'center' },
        {
          prop: 'sex',
          label: '性别',
          width: '100',
          align: 'center',
          render: (h, { row }) => {
            return h('span', null, this.dict.getLabel('sex', row.sex))
          },
        },
        { prop: 'age', label: '年龄', align: 'center' },
        {
          prop: 'idNumber',
          label: '身份证号',
          align: 'center',
        },
        { prop: 'liveBuildingArea', label: '建筑面积(m²)', align: 'center',width: 120 },
        {
          slot: 'locationStatus'
        },
        {
          slot: 'options',
          label: '操作',
          align: 'center',
        },
      ],
      tableData: [],
      areaId: '',
    }
  },

  computed: {
    ...mapState(['user']),

    param() {
      return {
        ...this.search,
        areaId: this.user.info?.areaId,
        ids: this.ids,
      }
    },
  },

  mounted() {
    this.areaId = this.user.info.areaId
    this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
      this.getList()
    })
  },

  methods: {
    getList() {
      this.instance
        .post(`/app/apphomesteadinfo/list`, null, {
          params: {
            ...this.page,
            ...this.search,
            areaId: this.areaId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            if(res.data.records.length) {
              res.data.records.map((item) => {
                item.idNumber = item.idNumber.substring(0,10) +  '****' + item.idNumber.substring(13,17)
              })
            }
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
    },

    // 添加
    onAdd(id) {
      this.$emit('change', {
        type: 'add',
        params: {
          id: id || '',
          areaId: this.areaId,
        },
      })
    },

    // 删除
    remove(id) {
      this.$confirm('确定删除该数据?').then(() => {
        this.instance.post(`/app/apphomesteadinfo/delete?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    removeAll() {
      var id = this.ids.join(',')
      this.remove(id)
    },
  },
}
</script>

<style lang="scss" scoped>
.AppPetitionManage {
  height: 100%;
  .mar-t10{
    margin-top: 10px;
  }
}
</style>