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

<template>
  <section class="resourceClassification">
    <ai-list>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="dialog = true">&nbsp;添加分类</el-button>
          </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">

          <el-table-column label="分类图标" slot="categoryIcon" align="center">
            <template v-slot="{ row }">
              <ai-uploader :disabled="true" valueIsUrl :instance="instance" v-model="row.categoryIcon" :limit="1"></ai-uploader>
            </template>
          </el-table-column>

          <el-table-column slot="options" label="状态" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" title="详情" @click="toEdit(row.id)">编辑</el-button>
              <el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>

        </ai-table>
      </template>
    </ai-list>

    <ai-dialog title="添加资源分类" :visible.sync="dialog" :customFooter="true" :destroyOnClose="true" width="720px" @onConfirm="onConfirm" @closed="form={}">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model.trim="form.categoryName" placeholder="请输入" type="text" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="分类图标" prop="categoryIcon">
          <ai-uploader :instance="instance" valueIsUrl isShowTip v-model="form.categoryIcon" :limit="1"></ai-uploader>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog=false;form={}">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </ai-dialog>

  </section>
</template>

<script>
export default {
  name: "resourceClassification",
  props: {
    instance: Function,
    dict: Object,
    areaId: String,
    permissions: Function,
  },
  data() {
    return {
      search: {
        current: 1,
        categoryId: '',
        size: 10,
        resourceName: ''
      },
      total: 0,
      tableData: [],
      dialog: false,
      form: {
        categoryName: '',
        categoryIcon: '',
      }
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'categoryName', label: '分类名称', width: '300px'},
        {prop: 'resourceNum', label: '资源数量', align: 'center'},
        {slot: "categoryIcon"},
        {slot: 'option'},
      ]
    },
    rules() {
      return {
        categoryName: [{required: true, message: "请输入分类名称"}],
        categoryIcon: [{required: true, message: "请上传分类图标"}],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.instance.post(`/app/appresourcecategory/list`,null,{
        params: {
          ...this.search,
          areaId: this.areaId,
        }
      }).then(res=> {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    onConfirm() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.instance.post(`/app/appresourcecategory/addOrUpdate`, {...this.form}).then(res=> {
            if(res.code == 0) {
              this.$message.success('新增成功')
              this.dialog = false
              this.getList()
            }
          })
        }
      })
    },
    handleDelete(ids) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/appresourcecategory/delete?ids=${ids}`).then(res=> {
          if (res.code== 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },
    toEdit(id) {
      this.getDetail(id)
      this.dialog = true
    },
    getDetail(ids) {
      this.instance.post(`/app/appresourcecategory/queryDetailById?id=${ids}`).then(res=> {
        if(res.data) {
          console.log(res.data);
          this.form = res.data
        }
      })
    }
  },
}
</script>

<style lang="scss" scope>
.resourceClassification {

}
</style>