demo/demo-web-ui/src/views/dictManage/dictCommon.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="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="closeDict">返 回</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="280px">
          <template slot-scope="scope">
            <!--          <el-button type="primary" size="mini" @click="add(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>
            <el-button type="primary" size="mini" @click="handleMap(scope.row)">
              映射
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dictType" label="字典分类编码" align="center">
        </el-table-column>
        <el-table-column prop="groupName" 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>数据分组</td>
            <td>
              <el-input v-model="form.groupName"></el-input>
            </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>
        <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>
    <dictMap v-show="viewState == 2" ref="divAdd" @doback="resetState"/>
  </div>
</template>

<script>
import { deldictCommon, dictCommonList, putdictCommon, savedictCommon } from '@/api/system/dictType/dictCommon.js'
import dictMap from './dictMap'
export default {
  components: {
    dictMap
  },
  data() {
    return {
      editDialog: false,
      dialogTitle: '',
      viewState: 1,
      form: {
        dictKey: '',
        dictType: '',
        groupName: '',
        dictValue: '',
        parentSid: ''
      },
      page: {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        params: {
          dictKey: '',
          dictType: '',
          dictValue: '',
          parentSid: '',
          sidPath: '',
        }
      },
      tableData: []
    }
  },
  props: ['dictData'],
  watch: {
    dictData: {
      handler(val) {
        this.form.parentSid = val.sid
        this.form.dictType = val.dictType
        this.form.groupName = val.groupName
        this.page.params.parentSid = val.sid
        this.page.params.dictType = val.dictType
        this.getPageList(this.page)
      },
      deep: true
    }
  },
  mounted() {
//  	if (this.$route.query.sid) {
//        sessionStorage.setItem('dictType', this.$route.query.dictType);
//        sessionStorage.setItem('parentSid', this.$route.query.sid);
//        this.page.params.dictType = this.$route.query.dictType
//        this.page.params.parentSid = this.$route.query.sid
//        this.form.dictType = this.$route.query.dictType;
//        this.form.parentSid = this.$route.query.sid
//    } else {
//    	  this.page.params.dictType = sessionStorage.getItem('dictType');
//        this.page.params.parentSid = sessionStorage.getItem('parentSid');
//        this.form.dictType = sessionStorage.getItem('dictType');
//        this.form.parentSid = sessionStorage.getItem('parentSid');
//    }
    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(row) {
      if (row) {
        this.form.dictType = row.dictType
        this.form.parentSid = row.sid
      } else {
        this.form.parentSid = 0
        //  this.form.dictType = row.dictType
      }
      this.dialogTitle = '新增'
      this.editDialog = true
      this.form.dictKey = ''
      this.form.groupName = ''
      this.form.dictValue = ''
      this.form.sid = ''
    },
    closeDict() {
      this.form.parentSid = ''
      this.form.dictType = ''
      this.form.groupName = ''
      this.page.params.parentSid = ''
      this.page.params.dictType = ''
      this.$emit('doback')
    },
    editRow(row) {
      this.dialogTitle = '编辑'
      this.editDialog = true
      this.form = Object.assign({}, row)
    },
    save() {
      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: '删除成功!'
          })
        })
      })
    },
    handleMap(row) {
      this.viewState = 2
      this.$refs['divAdd'].showAdd(row)
    },
    resetState() {
      this.viewState = 1
    }
  }
}
</script>

<style scoped>
</style>