demo/demo-web-ui/src/views/system-admin/dictCommon.vue

<template>
  <div class="container">
    <div class="tab-header">
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="数据value">
              <el-input v-model="page.params.dictValue" clearable></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-button @click="$router.go(-1)">返 回</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">
    		<template slot-scope="scope">
          <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="dictType" label="字典分类编码" align="center">
    	</el-table-column>
    	<el-table-column prop="dictKey" label="数据key" align="center">
    	</el-table-column>
    	<el-table-column prop="dictValue" label="数据value" 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%">
      <table class="e-table" cellspacing="0">
      	<tr>
      		<td>字典分类编码</td>
      		<td>
      	    {{form.dictType}}
      		</td>
      	</tr>
        <tr>
      		<td>数据key</td>
      		<td>
            <el-input v-model="form.dictKey"></el-input>
      		</td>
      	</tr>
        <tr>
        	<td>数据value</td>
        	<td>
            <el-input v-model="form.dictValue"></el-input>
        	</td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()">保 存</el-button>
        <el-button @click="editDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { dictCommonList, savedictCommon, putdictCommon, deldictCommon } from '@/api/system/dictType/dictCommon.js'
	export default {
		data() {
			return {
				editDialog: false,
        dialogTitle: '',
				form: {
          dictKey: '',
          dictType: '',
          dictValue: '',
          parentSid: ''
        },
        formBackup: Object.assign({}, this.form),
				page: {
				  total: 0, // 默认数据总数
				  current: 1, // 默认开始页面
				  size: 10, // 每页的数据条数
          params:{
            dictKey: '',
            dictType: '',
            dictValue: '',
            parentSid: '',
            sidPath: '',
          }
				},
				tableData: []
			}
		},
    mounted() {
      this.page.params.dictType = this.$route.params.dictType
      this.getPageList(this.page)
    },
		methods: {
			pagination(val) { // 分页
			  this.page.current = val.pageNum
			  this.page.size = val.pageSize
			  this.getPageList(this.page)
			},
			onSearch() { //查询
			  this.getPageList(this.page)
			},
			resetSearch(){ // 重置
			  this.getPageList(this.page)
			},
			getPageList(data){ // 获取列表
			  dictCommonList(data).then((res)=>{
			    this.tableData = res.data.records
          this.page.total = res.data.total
			  })
			},
      add(){
        this.dialogTitle = '新增'
        this.editDialog = true
        this.form = Object.assign({}, this.formBackup)
        this.form.dictType = this.$route.params.dictType
      },
      editRow(row) {
        this.dialogTitle = '编辑'
        this.editDialog = true
        this.form = Object.assign({}, row)

      },
      save(){
        this.form.parentSid = this.$route.params.sid
        if(this.form.sid){
          putdictCommon(this.form).then(res => {
            this.editDialog = false
            this.getPageList(this.page)
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
        }else{
          savedictCommon(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(() => {
          deldictCommon({sid: row.sid}).then(res => {
            this.getPageList(this.page)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        })
      },
		},
	}
</script>

<style lang="scss">

</style>