dvcp_v2_webapp/packages/publicity/AppContentManage/components/List.vue

<template>
  <ai-list class="notice">
    <template slot="title">
      <ai-title title="内容管理" isShowBottomBorder></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">添加模块</el-button>
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total" :dict="dict"
          style="margin-top: 6px;"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
              <el-button type="text" @click="getCateList(row.id),isShowAdd = true">分类</el-button>
              <el-button type="text" @click="remove(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
      <ai-dialog :visible.sync="isShowAdd" width="880px" height="580px" title="文章分类" @close="onClose" @onConfirm="submitCategory">
        <el-button icon="iconfont iconAdd" type="text" @click="cateList.push({error:false,categoryName:null})">添加分类</el-button>
        <ai-table v-if="moduleId" :tableData="cateList" :col-configs="cateColConfigs" :isShowPagination="false" @getList="getCateList">
          <el-table-column slot="category" label="分类名称" align="center">
            <template slot-scope="{row}">
              <ai-edit-input v-model="row.categoryName" :key="row.id" :error.sync="row.error"/>
            </template>
          </el-table-column>
          <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
            <template slot-scope="{ row,$index }">
              <el-button type="text" @click="handleMove(row,$index,-1)" :disabled="$index==0">上移</el-button>
              <el-button type="text" @click="handleMove(row,$index,1)" :disabled="$index==(cateList.length-1)">下移</el-button>
              <el-button type="text" @click="removeCate($index)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
import AiEditInput from "./AiEditInput";

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

  data() {
    return {
      search: {
        current: 1,
        size: 10,
        title: ''
      },
      moduleId: '',
      total: 10,
      cateList: [],
      colConfigs: [
        {prop: 'moduleName', label: '模块名称', align: 'left', width: '200px'},
        {prop: 'menuName', label: '关联菜单', align: 'center'},
        {prop: 'categoryStr', label: '文章分类', align: 'center'},
        {prop: 'needExamine', label: '是否审核', align: 'center', dict: 'yesOrNo'},
        {prop: 'isComment', label: '是否可以评论', align: 'center', dict: 'yesOrNo'}
      ],
      cateColConfigs: [
        {type: 'index', label: "排序", align: 'center'},
        {slot: 'category'}
      ],
      isShowAdd: false,
      tableData: []
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.instance.post(`/app/appcontentmoduleinfo/list`, null, {
        params: {
          ...this.search
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    getCateList(moduleId) {
      this.moduleId = moduleId
      this.instance.post(`/app/appcontentmodulecategory/list`, null, {
        params: {size: 99999, moduleId}
      }).then(res => {
        if (res?.data) {
          this.cateList = res.data.records.map(e => ({...e, error: false}))
        }
      })
    },
    removeCate(i) {
      this.$confirm('确定删除该数据？').then(() => {
        this.cateList.splice(i, 1)
      })
    },
    handleMove(row, i, forward) {
      const tmp = this.$copy(row), target = i + forward
      this.cateList.splice(i, 1, this.cateList[target])
      this.cateList.splice(target, 1, tmp)
    },
    remove(id) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/appcontentmoduleinfo/delete?ids=${id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },
    submitCategory() {
      if (!this.cateList.some((e, i, arr) => {
        arr[i].error = !e.categoryName
        if (!e.categoryName) {
          this.$message.error(`第${i + 1}行未填写分类名称!`)
          return true
        }
      })) {
        let {cateList: categorys, moduleId} = this
        categorys = categorys.map((e, i) => ({...e, showIndex: i * 1 + 1}))
        this.instance.post(`/app/appcontentmodulecategory/addOrUpdate2`, {
          categorys, moduleId
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success('提交成功')
            this.isShowAdd = false
            this.getList()
          }
        })
      }
    },
    onClose() {
      this.moduleId = ''
      this.cateList = []
    },

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

<style lang="scss" scoped>
.notice {
  .catewrapper {
    display: flex;
    align-items: center;
  }
}
</style>