dvcp_v2_webapp/project/pengliuyang/apps/AppCommunityResource/components/resourceManagement.vue

<template>
  <section class="resourceManagement">
    <ai-list>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="addResource">&nbsp;添加资源</el-button>
            <ai-select v-model="search.categoryId" @change="search.current = 1, getList()" placeholder="资源种类" :selectList="categoryList" />
          </template>
          <template #right>
            <el-input size="small" placeholder="资源姓名" v-model="search.resourceName" clearable
              @clear="current = 1, search.resourceName = '', getList()" suffix-icon="iconfont iconSearch"
              v-throttle="() => {(current = 1), getList();}"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getList()" :col-configs="colConfigs" :dict="dict">
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
export default {
  name: "resourceManagement",
  props: {
    instance: Function,
    dict: Object,
    areaId: String,
    permissions: Function,
  },
  data() {
    return {
      search: {
        current: 1,
        categoryId: '',
        size: 10,
        resourceName: ''
      },
      total: 0,
      tableData: [],
      categoryList: [],
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'resourceName', label: '资源名称', width: '300px'},
        {prop: 'categoryName', label: '资源种类', align: 'center'},
        {prop: 'areaName', label: '行政归属', align: 'center'},
        {prop: 'createTime', label: '添加时间', align: 'center'},
      ]
    }
  },
  created() {
    this.getList()
    this.getCategoryList()
  },
  methods: {
    getList() {
      this.instance.post(`/app/appresourceinfo/list`,null,{
        params: {
          ...this.search,
          areaId: this.areaId,
        }
      }).then(res=> {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    addResource() {
      this.$router.push({hash: "#addResource", query: {}})
    },
    getCategoryList() {
      this.instance.post(`/app/appresourcecategory/list`,null,{
        params: {
          current: 1,
          size: 3000,
        }
      }).then(res=> {
        if(res?.data) {
          this.categoryList = res.data.records.map(item=> {
            return {
              dictName: item.categoryName,
              dictValue: item.id
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scope>
.resourceManagement {}
</style>