|
|
@@ -0,0 +1,365 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="m-container">
|
|
|
+ <h2>
|
|
|
+ <div class="squrt"></div>帮助中心
|
|
|
+ </h2>
|
|
|
+ <div class="m-core">
|
|
|
+ <!-- 搜索标题 -->
|
|
|
+ <el-form :inline="true"
|
|
|
+ class="searchForm"
|
|
|
+ v-model.trim="searchForm">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model.trim="searchForm.search"
|
|
|
+ @keyup.enter.native="search"
|
|
|
+ placeholder="乐团名称/编号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select class="multiple"
|
|
|
+ v-model.trim="searchForm.organId"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择分部">
|
|
|
+ <el-option v-for="(item,index) in organList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select class="multiple"
|
|
|
+ v-model.trim="searchForm.organId"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="申请类型">
|
|
|
+ <el-option v-for="(item,index) in organList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select class="multiple"
|
|
|
+ v-model.trim="searchForm.organId"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="审核状态">
|
|
|
+ <el-option v-for="(item,index) in organList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </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 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 store from '@/store'
|
|
|
+import {
|
|
|
+ helpCenterCatalogList,
|
|
|
+ helpCenterContentList,
|
|
|
+ helpCenterContentModify,
|
|
|
+ helpCenterContentDelete
|
|
|
+} from "@/api/appTenant";
|
|
|
+export default {
|
|
|
+ components: { pagination },
|
|
|
+ name: "helpCategory",
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ searchForm: {
|
|
|
+ catalogId: null
|
|
|
+ },
|
|
|
+ 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" }]
|
|
|
+ },
|
|
|
+ pageInfo: {
|
|
|
+ // 分页规则
|
|
|
+ limit: 10, // 限制显示条数
|
|
|
+ page: 1, // 当前页
|
|
|
+ total: 0, // 总条数
|
|
|
+ page_size: [10, 20, 40, 50] // 选择限制显示条数
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 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[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
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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.cascader.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>
|
