demo/demo-web-ui/src/views/dictManage/dictManage.vue

<template>
  <div class="container">
    <div v-show="viewState == 1">
      <div class="tab-header">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="分类名称">
                <el-input clearable v-model="page.params.dictTypeName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="说明">
                <el-input clearable v-model="page.params.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item style="float: right;">
                <el-button type="primary" @click="onSearch()">查询</el-button>
                <el-button @click="add()">添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column label="序号" width="50px" type="index" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="guanli(scope.row)">
              管理
            </el-button>
            <el-button type="primary" size="mini" @click="editRow(scope.row)">
              修改
            </el-button>
            <el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dictTypeCode" label="字典分类编码" align="center">
        </el-table-column>
        <el-table-column prop="dictTypeName" label="字典分类名称" align="center">
        </el-table-column>
        <el-table-column prop="remarks" label="说明" align="center">
        </el-table-column>
      </el-table>
      <pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
      <!-- 分类编辑 -->
      <el-dialog :title="dialogTitle + '字典分类'" :visible.sync="editDialog" width="50%">
        <el-form>
          <table class="e-table" cellspacing="0">
            <tr>
              <td>数据字典code</td>
              <td>
                <el-input v-model="form.dictTypeCode"></el-input>
              </td>
            </tr>
            <tr>
              <td>数据分类名称</td>
              <td>
                <el-input v-model="form.dictTypeName"></el-input>
              </td>
            </tr>
            <tr>
              <td>说明</td>
              <td>
                <el-input type="textarea" v-model="form.remarks"></el-input>
              </td>
            </tr>
          </table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save()">保 存</el-button>
          <el-button @click="editDialog = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
    <dict-common @doback="resetState" :dictData='dictData' v-show="viewState == 2"/>
  </div>
</template>

<script>
import { pageList, saveDictType, putDictType, delDictType } from '@/api/system/dictType/index.js'
import dictCommon from './dictCommon.vue'

export default {
  data() {
    return {
      editDialog: false,
      dialogTitle: '',
      form: {},
      formBackup: Object.assign({}, this.form),
      page: {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        params: {
          dictTypeName: '',
          dictTypeCode: ''
        }
      },
      tableData: [],
      viewState: 1,
      dictData: {}
    }
  },
  components: {
    dictCommon
  },
  mounted() {
    this.getPageList(this.page)
  },
  methods: {
    pagination(val) { // 分页
      this.page.current = val.pageNum
      this.page.size = val.pageSize
      this.getPageList(this.page)
    },
    onSearch() { // 查询
      this.getPageList()
    },
    resetSearch() { // 重置
      this.page.current = 1
      this.getPageList()
    },
    getPageList() { // 获取列表
      pageList(this.page).then((res) => {
        if (res.success) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        } else {
          this.tableData = []
          this.page.total = 0
        }
      })
    },
    add() {
      this.dialogTitle = '新增'
      this.editDialog = true
      this.form = Object.assign({}, this.formBackup)
    },
    editRow(row) {
      this.dialogTitle = '编辑'
      this.editDialog = true
      this.form = Object.assign({}, row)
    },
    save() {
      if (this.form.sid) {
        putDictType(this.form).then(res => {
          this.editDialog = false
          this.getPageList(this.page)
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      } else {
        saveDictType(this.form).then(res => {
          this.editDialog = false
          this.getPageList(this.page)
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      }
    },
    deleteRow(row) {
      this.$confirm('确定要删除该条数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDictType({ sid: row.sid }).then(res => {
          this.getPageList(this.page)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    guanli(row) {
      this.dictData = { dictType: row.dictTypeCode }
      this.viewState = 2
    },
    resetState() {
      this.viewState = 1
    }
  }
}
</script>

<style scoped="scoped">
.my-tabs {
  margin-top: 10px;
}
</style>