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

<template>
  <ai-list class="AppPetitionManage">
    <template slot="title">
      <ai-title title="小区管理" isShowBottomBorder />
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar" bottomBorder>
        <template slot="left">
          <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
          <el-button :disabled="!ids.length" icon="iconfont iconDelete" size="small" @click="removeAll">删除</el-button>
        </template>
        <template slot="right">
          <el-input @clear=";(search.current = 1), (search.communityName = ''), getList()" v-throttle="() => {search.current=1,getList()}" v-model="search.communityName" class="search-input" size="small" placeholder="小区名称" suffix-icon="iconfont iconSearch" clearable />
        </template>
      </ai-search-bar>

      <ai-search-bar style="margin-top: 15px;">
        <template #right>
          <!-- :importParams="{ areaId: user.info && user.info.areaId }" -->
          <ai-import :instance="instance" :dict="dict" type="appcommunityinfo" name="小区管理" @success="getList()">
            <el-button icon="iconfont iconImport">导入</el-button>
          </ai-import>
          <ai-download :instance="instance" url="/app/appcommunityinfo/listExport" :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="search.current" @selection-change="handleSelectionChange"> -->
      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="(v) => (ids = v.map((e) => e.id))" :size.sync="search.size" @getList="getList">
        <el-table-column slot="options" label="操作" align="center">
          <template slot-scope="{ row }">
            <span class="table-btn" title="编辑" @click="toEdit(row.id)">编辑</span>
            <span class="table-btn table-btn__remove" title="删除" @click="remove(row.id)">删除</span>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: 'List',

  props: {
    instance: Function,
    dict: Object,
  },

  data() {
    return {
      search: {
        current: 1,
        size: 10,
        communityName: '',
      },
      ids: [],
      total: 0,
      colConfigs: [
        { type: 'selection' },
        { prop: 'communityName', label: '小区名称', align: 'center', width: '200' },
        { prop: 'areaName', label: '行政划分' },
        { prop: 'address', label: '小区地址' },
        { prop: 'girdName', label: '所属网格' },
        { prop: 'buildingNumber', label: '总楼栋数（栋）', align: 'center' },
        { prop: 'createUserName', label: '创建人', align: 'center' },
        { prop: 'createTime', label: '创建时间', align: 'center' },
        { slot: 'options', label: '操作', align: 'center' },
      ],
      tableData: [],
    }
  },

  computed: {
    importParams() {
      return {
        name: this.search.name,
        ids: this.ids.map((v) => v.id).join(','),
      }
    },

    param() {
      let params = {}

      if (this.ids.length) {
        params = {
          ...params,
          ids: this.ids,
        }
      } else {
        params = {
          ...params,
          ...this.search,
          ids: this.ids,
        }
      }
      return params
    },
  },

  created() {
    this.getList()
  },

  methods: {
    getList() {
      this.instance
        .post(`/app/appcommunityinfo/list`, null, {
          params: {
            ...this.search,
          },
        })
        .then((res) => {
          if (res?.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
    },
    handleSelectionChange(e) {
      this.ids = e
    },

    toEdit(id) {
      this.$emit('change', {
        type: 'add',
        params: {
          id: id,
        },
      })
    },

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

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

    onReset() {
      this.search.current = 1
      this.search.communityName = ''

      this.getList()
    },

    onAdd(id) {
      this.$emit('change', {
        type: 'add',
        params: {
          id: id,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.AppPetitionManage {
  :deep( th ){
    font-weight: bold !important;
  }

  .table-btn {
    color: #2266ff;
    font-size: 14px;
    cursor: pointer;

    &:last-child:hover {
      color: #f46;
    }

    &:first-child {
      margin-right: 16px;

      &:hover {
        opacity: 0.6;
      }
    }
  }

  .icon-color89B {
    margin-right: 8px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>