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

<template>
  <div class="m-container">
    <h2>
      <!-- <div class="squrt"></div>帮助中心分类 -->
      <el-page-header @back="onCancel"
                      content="帮助中心分类"></el-page-header>
    </h2>
    <div class="m-core">
      <div class="newBand"
           v-permission="'helpCenterCatalog/modify'"
           @click="openTypes('create')">添加</div>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data="tableList"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  row-key="id"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">>
          <el-table-column width="120px"
                           align="center"
                           prop="id"
                           label="分类编号"></el-table-column>
          <el-table-column align="center"
                           prop="text"
                           label="分类名称"></el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <el-button v-permission="'helpCenterCatalog/modify'"
                         @click="openTypes('add', scope.row)"
                         type="text">添加</el-button>
              <el-button v-permission="'helpCenterCatalog/modify'"
                         @click="openTypes('update', scope.row)"
                         type="text">修改</el-button>
              <el-button v-permission="'helpCenterCatalog/delete'"
                         @click="onTypeDelOpeation(scope.row)"
                         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="text"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.text"
                    autocomplete="off"></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,
  helpCenterCatalogModify,
  helpCenterCatalogDelete
} from "@/api/appTenant";
export default {
  components: { pagination },
  name: "helpCategory",
  data () {
    return {
      tableList: [],
      subjectList: [], // 声部列表
      formActionTitle: "create",
      formTitle: {
        create: "添加帮助中心分类",
        add: "添加帮助中心分类",
        update: "修改帮助中心分类"
      },
      typeStatus: false, // 添加教学点
      formLabelWidth: "120px",
      form: {
        text: null, // 作业模块名称
        parentId: 0
      },
      rules: {
        text: [{ 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.getList()
  },
  mounted () {
    // this.getList()
  },
  methods: {
    onTypeDelOpeation (row) {
      this.$confirm('您是否删除该分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        helpCenterCatalogDelete({ id: row.id }).then(res => {
          this.messageTips('删除', res)
        })
      }).catch(() => {
      })

    },
    onTypeSubmit (formName) {
      // 添加数据
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formActionTitle == "create" || this.formActionTitle == "add") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            helpCenterCatalogModify(this.form).then(res => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            helpCenterCatalogModify(this.form).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 () {
      // {
      //   delFlag: 0
      //   rows: this.pageInfo.limit,
      //   page: this.pageInfo.page
      // }
      helpCenterCatalogList({
        parentId: 0
      }).then(res => {
        let result = res.data;
        if (res.code == 200) {
          this.tableList = this.setTableData(result);

        }
      });
    },
    setTableData (result) {
      let list = []
      list = result.map(res => {
        let tempList = {}
        tempList = {
          id: res.id,
          text: 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 == 'create') {
        // 添加时,默认添加一级分类
        this.form.parentId = 0
      } else if (type == "update") {
        // 修改的时候赋值
        this.form = {
          id: row.id,
          text: row.text, // 作业模块名称
          parentId: 0
        };
      } else if (type == 'add') {
        this.form.parentId = row.id
      }
    },
    onCancel () {
      this.$router.push({
        path: "/insideSetting/helpContent"
      });
    },
    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;
}
</style>