dy-admin-manager/src/views/helpCenter/helpContent.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>帮助中心
    </h2>
    <div class="m-core">
      <div class="newBand"
           v-permission="'helpCenterContent/modify'"
           @click="openTypes('create')">添加</div>
      <div class="newBand"
           v-permission="'/helpCategory'"
           @click="onToUrl()">分类管理</div>
      <!-- 搜索标题 -->
      <save-form :inline="true"
               class="searchForm"
               @submit="search"
               :model="searchForm">
        <el-form-item prop="hasPracticeCourse">
          <el-cascader ref="cascader"
                       :show-all-levels="false"
                       :options="treeList"
                       v-model="searchForm.catalogId"
                       :props="{ checkStrictly: true }"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table :data="tableList"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">>
          <el-table-column width="120px"
                           align="center"
                           prop="id"
                           label="编号"></el-table-column>
          <el-table-column align="center"
                           prop="title"
                           label="标题"></el-table-column>
          <el-table-column align="center"
                           prop="content"
                           label="内容">
            <template slot-scope="scope">
              <!-- <overflow-text :text="scope.row.content"></overflow-text> -->
              <Tooltip :content="scope.row.content"></Tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="catalog.text"
                           label="分类名"></el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <el-button v-permission="'helpCenterContent/modify'"
                         @click="openTypes('update', scope.row)"
                         type="text">修改</el-button>
              <el-button @click="onTypeDelOpeation(scope.row)"
                         v-permission="'helpCenterContent/delete'"
                         type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination sync :total.sync="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog :title="formTitle[formActionTitle]"
               :visible.sync="typeStatus"
               @close="onFormClose('ruleForm')"
               width="500px">
      <el-form :model="form"
               :rules="rules"
               ref="ruleForm">
        <el-form-item label="标题"
                      prop="title"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.title"
                    autocomplete="off"
                    placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="分类"
                      prop="catalogId"
                      :label-width="formLabelWidth">
          <el-cascader v-if="typeStatus"
                       style="width: 100%;"
                       :show-all-levels="false"
                       ref="formCascader"
                       :options="treeList"
                       v-model="form.catalogId"
                       :props="{ checkStrictly: true }"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item label="内容"
                      prop="content"
                      :label-width="formLabelWidth">
          <el-input type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="form.content">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="typeStatus = false">取 消</el-button>
        <el-button type="primary"
                   @click="onTypeSubmit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import Tooltip from '@/components/Tooltip'
// import store from '@/store'
import {
  helpCenterCatalogList,
  helpCenterContentList,
  helpCenterContentModify,
  helpCenterContentDelete
} from "@/api/appTenant";
export default {
  components: { pagination, Tooltip },
  name: "helpCategory",
  data () {
    return {
      searchForm: {
        catalogId: null
      },
      treeList: [],
      tableList: [],
      formActionTitle: "create",
      formTitle: {
        create: "添加帮助中心",
        update: "修改帮助中心"
      },
      typeStatus: false, // 添加教学点
      formLabelWidth: "100px",
      form: {
        title: null, // 标题
        content: null, // 内容
        catalogId: null, // 分类编号
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        catalogId: [{ required: true, message: "请输入选择分类", trigger: "blur" }]
        // subjectIds: [{ required: true, message: "请选择声部组合", trigger: "change" }]
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      tempTreeList: []
    };
  },
  mounted () {
    this.getList();
    this.getTreeList()
  },
  methods: {
    search() {
      this.pageInfo.page = 1
      this.getList()
    },
    onTypeDelOpeation (row) {
      this.$confirm('您是否删除该内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        helpCenterContentDelete({ id: row.id }).then(res => {
          this.messageTips('删除', res)
        })
      }).catch(() => {
      })

    },
    onTypeSubmit (formName) {
      // 添加数据
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formActionTitle == "create") {
            let params = {
              title: this.form.title, // 标题
              content: this.form.content, // 内容
              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
            }
            helpCenterContentModify(params).then(res => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            let params = {
              id: this.form.id,
              title: this.form.title, // 标题
              content: this.form.content, // 内容
              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
            }
            helpCenterContentModify(params).then(res => {
              this.messageTips("修改", res);
            });
          }
        } else {
          return false;
        }
      });
    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.typeStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    getList () {
      let catalogId = this.searchForm.catalogId ? this.searchForm.catalogId : null
      if (catalogId) {
        catalogId = catalogId[catalogId.length - 1]
      }
      let params = {
        catalogIds: catalogId,
        page: this.pageInfo.page,
        rows: this.pageInfo.limit
      }
      helpCenterContentList(params).then(res => {
        let result = res.data;
        if (res.code == 200) {
          this.tableList = result.rows;
          this.pageInfo.total = result.total
        }
      });
    },
    getTreeList () {
      helpCenterCatalogList({
        parentId: 0
      }).then(res => {
        let result = res.data;
        if (res.code == 200) {
          this.treeList = this.setTableData(result);
        }
      });
    },
    setTableData (result) {
      let list = []
      list = result.map(res => {
        let tempList = {}
        tempList = {
          value: res.id,
          label: res.text,
          parentId: res.parentId
        }
        if (res.children && res.children.length > 0) {
          tempList.children = this.setTableData(res.children)
        }
        return tempList
      })
      return list
    },
    openTypes (type, row) {
      this.typeStatus = true
      this.formActionTitle = type
      if (type == "update") {
        // 修改的时候赋值
        this.form = {
          id: row.id,
          title: row.title, // 标题
          content: row.content, // 内容
          catalogId: this.getAllIds(row), // 分类编号
        };
      }
    },
    onToUrl () {
      this.$router.push('/insideSetting/helpCategory')
    },
    getAllIds (row) {
      let idAndParent = [];// idAndParent保存 Tree所有节点的id和parentId
      this.getIdAndParent(this.treeList, idAndParent);
      let parentIds = []; // 用于保存选中节点的父节点及父节点的父节点
      this.getId(row.catalogId, parentIds, idAndParent);
      return parentIds.reverse(); //反转数组
    },
    getIdAndParent (tree, idAndParentIds) {// idAndParentIds用来保存所有节点的id，parentId
      // 对原有的数据结构进行遍历，拿出所有节点的id，parentId到一个一维数组中。
      tree.forEach(item => {
        let mid = {
          id: item.value,
          parentId: item.parentId,
        };
        idAndParentIds.push(mid);
        if (item.children) {
          this.getIdAndParent(item.children, idAndParentIds);
        }
      });
    },
    getId (id, parentIds, idAndParent) {
      idAndParent.forEach(item => {
        if (item.id == id) {
          parentIds.push(id);
          if (item.parentId != -1) {
            this.getId(item.parentId, parentIds, idAndParent);
          }
        }
      });
    },
    onFormClose (formName) {
      // 关闭弹窗重置验证
      this.form = {
        title: null, // 标题
        content: null, // 内容
        catalogId: [], // 分类编号
      }
      this.$refs.formCascader.handleClear()
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}
</style>