cmanager/src/views/manage/policies/article/classify/index.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="createTime" slot-scope="{row}">
        <div>{{dateFormat(new Date(row.createTime), "yyyy/MM/dd")}}</div>
      </template>
      <template slot="menuLeft">
        <el-button size="small" type="primary" @click="add">新增分类</el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button size="small" type="text" @click="modify(row)">编辑</el-button>
        <el-button size="small" type="text" @click="del(row)">删除</el-button>
      </template>
    </avue-crud>
    <!-- 新增、编辑 -->
    <el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%">
      <el-form :model="formOption" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="formOption.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="btnLoading">保存</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>

      </el-form>
    </el-drawer>
  </basic-container>
</template>

<script>
  import { dateFormat } from "@/util/date";
  import {getArticleCategoryList, articleCategoryAdd, articleCategoryEdit, articleCategoryDel} from '@/api/help/article/classify'

  export default {
    name: "index",
    data () {
      return {
        btnLoading:false,
        loading:false,
        viewDrawer:false,
        drawerTitle: '新增分类',
        formOption: {},
        rules: {
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { max: 6, message: '最大输入6个汉字', trigger: 'blur'}
          ]
        },
        option: {
          height: "auto",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          border: true,
          index: true,
          indexLabel: "序号",
          columnBtn: false,
          selection: false,
          viewBtn: false,
          addBtn: false,
          editBtn:false,
          delBtn: false,
          menuWidth: 300,
          labelWidth: 151,
          dialogClickModal: false,
          dialogType: "drawer",
          dialogFullscreen: true,

          column: [
            {
              label: "分类名称",
              prop: "name",
              display: false,
            },
            {
              label: "创建日期",
              prop: "createTime",
              display: false,
              slot: true
            }
          ]
        },
        data: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 100,
        },
      }
    },
    methods: {
      dateFormat,
      add () {
        this.formOption = {}
        this.drawerTitle = '新增分类'
        this.viewDrawer = true
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        })
      },
      modify (row) {
        this.formOption = JSON.parse(JSON.stringify(row))
        this.drawerTitle = '编辑分类'
        this.viewDrawer = true
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        })
      },
      del (row) {
        this.$confirm('是否删除此数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          articleCategoryDel(JSON.stringify(row)).then(res => {
            this.$message({
              message: res.data.msg,
              type: 'success',
            })
            this.refreshChange()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            if (this.drawerTitle === '新增分类') {
              articleCategoryAdd(this.formOption).then(res => {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                this.refreshChange()
                this.viewDrawer = false
                this.btnLoading = false
              })
            } else if (this.drawerTitle === '编辑分类') {
              var data = {
                name: this.formOption.name,
                id: this.formOption.id
              }
              articleCategoryEdit(data).then(res => {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                this.refreshChange()
                this.viewDrawer = false
                this.btnLoading = false
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.viewDrawer = false

      },
      /* 表格方法 */
      onLoad(page, params = {}) {
        this.loading = true;
        var data = {
          current: page.currentPage,
          size: page.pageSize
        }
        getArticleCategoryList(data).then((res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        });
      },
      searchChange(params,done) {},
      currentChange(val) {
        this.page.currentPage = val
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
      },
      refreshChange () {
        this.page.currentPage = 1;
        this.onLoad(this.page)
      }
    }
  }
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 22px !important;
  }
</style>