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>
      <!-- 搜索标题 -->
      <el-form :inline="true" class="searchForm" v-model.trim="searchForm">
        <el-form-item prop="hasPracticeCourse">
          <el-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 @click="getList" type="danger">搜索</el-button>
        </el-form-item>
      </el-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="内容"></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
          :total="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 style="width: 100%;"
            :show-all-levels="false"
            :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 store from '@/store'
import {
  helpCenterCatalogList,
  helpCenterContentList,
  helpCenterContentModify,
  helpCenterContentDelete
} from "@/api/appTenant";
export default {
  components: { pagination },
  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] // 选择限制显示条数
      }
    };
  },
  activated() {
    this.getTreeList()
  },
  mounted() {
    this.getList();
    this.getTreeList()
  },
  methods: {
    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[0], // 分类编号
            }
            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[0], // 分类编号
            }
            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 params = {
        catalogIds: this.searchForm.catalogId ? this.searchForm.catalogId[0] : null
      }
      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,
        }
        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") {
        // 修改的时候赋值
        console.log(row)
        this.form = {
          id: row.id,
          title: row.title, // 标题
          content: row.content, // 内容
          catalogId: [row.catalogId], // 分类编号
        };
      }
    },
    onFormClose(formName) {
      // 关闭弹窗重置验证
      this.form = {
        name: null, // 作业模块名称
        subjectIds: []
      };
      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;
}
</style>