dvcp_v2_webapp/packages/publicity/AppPublicizeInformation/List.vue

<template>
  <section class="List">
    <ai-list>
      <ai-title slot="title" title="宣传资讯" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
                @change="page.current=1,getTableData()">
      </ai-title>
      <template #content>
        <div class="flex fill">
          <div class="type">
            <div class="title">宣传板块
              <span>
              <el-button type="text" @click="addType(0, typeList.length+1, '')">添加</el-button></span>
            </div>
            <div class="list">
              <div class="item" v-for="(item, index) in typeList" :key="index"
                   :class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
                {{ item.categoryName }}
              </div>
              <div class="item" v-if="!typeList.length">暂无数据</div>
            </div>
          </div>
          <div class="type mini-type">
            <div class="title">模块名称<span><el-button type="text"
                                                    @click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span>
            </div>
            <div class="list">
              <div class="item" v-for="(item, index) in miniTypeList" :key="index"
                   :class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
                <span class="text">{{ item.categoryName }}</span>
                <span class="icon">
                  <i class="el-icon-circle-plus-outline" @click="addNewType(index)"></i>
                  <i class="el-icon-edit" @click="editMini(index)"></i>
                  <i class="el-icon-delete" @click="delMini(miniTypeList[index].id)"></i>
                </span>
              </div>
              <div class="item" v-if="!miniTypeList.length">暂无数据</div>
            </div>
          </div>
          <div class="content">
            <template v-if="typeList.length && miniTypeList.length">
              <ai-search-bar>
                <template #left>
                  <el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')">添加</el-button>
                  <!-- <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button> -->
                </template>
                <template #right>
                  <el-input size="small" placeholder="请输入标题" v-model="search.title" clearable
                            @change="page.current=1,getTableData()"/>
                </template>
              </ai-search-bar>
              <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                        @getList="getTableData" :col-configs="colConfigs" :dict="dict"
                        @selection-change="v=>ids=v.map(e=>e.id)">
                <el-table-column slot="options" label="操作" fixed="right" align="center" width='150px'>
                  <template slot-scope="{row}">
                    <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </ai-table>
            </template>
            <ai-empty v-else>请选择或者添加模块</ai-empty>
          </div>
        </div>
      </template>
    </ai-list>
    <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitDialog" width="600px">
      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="100px">
        <el-form-item :label="addLabelText" prop="categoryName">
          <el-input v-model.number="form.categoryName" placeholder="请输入" maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="排序" prop="showIndex" v-if="type != 2">
          <el-input-number v-model="form.showIndex" @change="handleChange" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current"
                :size.sync="newPage.size"
                :col-configs="colConfigsNew" v-if="type == 2">
        <el-table-column slot="options" label="操作" fixed="right" align="center">
          <template slot-scope="{row}">
            <el-button type="text" @click="editNew(row)">编辑</el-button>
            <el-button type="text" @click="delMini(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </ai-table>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "List",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      search: {title: ""},
      page: {current: 1, size: 10, total: 0},
      newPage: {current: 1, size: 10, total: 0},
      tableData: [],
      colConfigs: [
        {label: "标题", prop: "title"},
        {label: "地区", prop: "areaName", align: "center", width: '150px'},
        {label: "浏览次数", prop: "viewCount", align: "center", width: '100px'},
        {label: "发布人", prop: "createUserName", align: "center", width: '100px'},
        {label: "发布时间", prop: "createTime", align: "center", width: '100px'},
        {slot: "options"}
      ],
      colConfigsNew: [
        {label: "分类名称", prop: "categoryName", align: "center"},
        {slot: "options"}
      ],
      ids: [],
      dialog: false,
      form: {},
      rules: {
        categoryName: '',
        showIndex: [{required: true, message: "请输入排序", trigger: "change"}],
      },
      typeList: [], //大分类模块
      miniTypeList: [], //模块子
      newTypeList: [], //文章分类
      type: 0, //0、宣传板块；1、宣传模块；2、文章分类
      dialogTitle: '',
      addLabelText: '',
      parentId: '',
      typeIndex: 0,
      miniTypeIndex: 0
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/app/apppublicityinfo/list", null, {
        params: {...this.page, ...this.search, moduleId: this.miniTypeList[this.miniTypeIndex].id || ''}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    showEdit(id) {
      this.$router.push({
        query: {
          id: id,
          parentId: this.typeList[this.typeIndex].id,
          moduleId: this.miniTypeList[this.miniTypeIndex].id
        }, hash: "#add"
      })
    },
    handleDelete(ids) {
      this.$confirm("是否删除该条宣传资讯信息").then(() => {
        this.instance.post("/app/apppublicityinfo/delete", null, {
          params: {ids: ids?.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
    handleChange(value) {
      this.form.showIndex = value
    },
    submitDialog() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          this.form.categoryType = this.type
          this.form.parentId = this.parentId
          this.instance.post(`/app/apppublicitycategory/addPublicityCategory`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('添加成功');
              if (this.type == 0) {
                this.getTypeList()
              }
              if (this.type == 1) {
                this.getMiniTypeList(this.typeList[this.typeIndex].id)
              }
              this.dialog = false
            }
          })
        }
      })
    },
    addType(e, index, parentId) {
      this.type = e
      this.parentId = parentId
      this.form.showIndex = index
      this.dialogTitle = ['宣传板块', '宣传模块', '文章分类'][e]
      this.addLabelText = ['板块名称', '模块名称', '分类名称'][e]
      this.rules.categoryName = [{required: true, message: "请输入" + this.addLabelText, trigger: "change"}]
      this.dialog = true
    },
    getTypeList() {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=0&size=100`).then(res => {
        if (res.code == 0 && res.data.records && res.data.records.length) {
          this.typeList = res.data.records
          this.getMiniTypeList(res.data.records[0].id)
        }
      })
    },
    getMiniTypeList(parentId) {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=1&size=100&parentId=${parentId}`).then(res => {
        if (res.code == 0) {
          this.miniTypeList = res.data.records
          if (res.data.records && res.data.records.length) {
            this.miniTypeClick(0)
          }

        }
      })
    },
    getNewTypeList(parentId) {
      this.instance.post(`/app/apppublicitycategory/list?categoryType=2&size=10&parentId=${parentId}`).then(res => {
        if (res.code == 0) {
          this.newTypeList = res.data.records
          this.newPage.total = res.data.total
        }
      })
    },
    typeClick(e) {
      this.typeIndex = e
      this.getMiniTypeList(this.typeList[e].id)
    },
    miniTypeClick(e) {
      this.miniTypeIndex = e
      this.current = 1
      this.tableData = []
      this.getTableData()
    },
    editMini(index) {
      this.form = {...this.miniTypeList[index]}
      this.addType(this.miniTypeList[index].categoryType, this.miniTypeList[index].showIndex, this.typeList[this.typeIndex].id)
    },
    delMini(id) {
      this.$confirm("确认删除", {
        type: 'error'
      }).then(() => {
        this.instance.post(`/app/apppublicitycategory/delete?ids=${id}`).then(res => {
          if (res.code == 0) {
            this.getNewTypeList(this.miniTypeList[this.miniTypeIndex].id)
            this.getMiniTypeList(this.typeList[this.typeIndex].id)
            this.$message.success('删除成功');
          }
        }).catch((err) => {
          this.$message.error(err);
        })
      })
    },
    addNewType(index) {
      this.getNewTypeList(this.miniTypeList[index].id)
      this.addType(2, '', this.miniTypeList[index].id)
    },
    editNew(row) {
      this.form = {...row}
      this.addType(2, '', row.parentId)
    }
  },
  created() {
    this.search.areaId = this.user.info.areaId
    this.getTypeList()
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.List {
  height: 100%;

  .flex {
    display: flex;

    .type {
      width: 250px;
      border: 1px solid #ddd;
      box-sizing: border-box;

      .title {
        font-size: 16px;
        line-height: 40px;
        border-bottom: 1px solid #ddd;
        padding: 0 16px;
        font-weight: 600;

        span {
          color: #26f;
          font-size: 12px;
          font-weight: 400;
          float: right;
        }
      }

      .list {
        .item {
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          line-height: 32px;
          font-size: 14px;
          color: #333;
          box-sizing: border-box;

          .text {
            width: calc(100% - 70px);
            cursor: pointer;
          }

          .icon {
            width: 70px;
            text-align: right;

            i {
              font-size: 14px;
              cursor: pointer;
              margin-left: 8px;
            }

            .el-icon-delete {
              color: #f46;
            }

            .el-icon-circle-plus-outline {
              color: #26f;
            }
          }
        }

        .active {
          // color: #26f;
          background-color: #f3f6f9;
        }
      }
    }

    .mini-type {
      margin-right: 16px;
    }

    .content {
      width: calc(100% - 516px);
    }
  }

  :deep( .ai-list__content--right-wrapper ){
    min-height: calc(100% - 6px) !important;
    display: flex;
  }
}
</style>