admin/vue/src/views/operator/status.vue

<template>
  <div id="buffer">
    <div id="main">
      <el-tabs v-model="type">
        <el-tab-pane v-for="item in typeList" :label="item.name + '状态管理'" :name="item.type">
          <el-table :data="result.rows" :height="$store.state.sizes.pTableHei - 20" border style="width: 100%" stripe>
            <el-table-column v-for="cl in item.columns" :prop="cl.code" :label="cl.name" min-width="150"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="100" :formatter="getValue"></el-table-column>
            <el-table-column label="操作" :width="450" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="example.page"
            :page-sizes="[10, 20, 50, 100]" :page-size="example.size" layout="total, sizes, prev, pager, next, jumper"
            :total="result.total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="修改状态" :visible.sync="showEdit" :close-on-click-modal="false" top="15vh" width="30%" @keydown.enter.native="confirm()">
      <el-form class="full-item-form" label-width="100px" :model="param">
        <el-form-item label="状态">
          <el-select v-model="param.status" placeholder="请选择">
            <el-option v-for="(val, key, i) in status" :key="key" :value="key" :label="val"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消（Esc）</el-button>
        <el-button type="primary" @click="confirm">确 定（Enter）</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Component,
    Prop,
    Vue,
    Watch
  } from 'vue-property-decorator'

  @Component
  export default class Buffer extends Vue {
    example = {
      page: 1,
      size: 10
    };
    param = {};
    result = [];
    type = 'role';
    typeList = [{
      type: 'role',
      name: '角色',
      columns: [{
          code: 'code',
          name: '角色编号'
        },
        {
          code: 'name',
          name: '角色名称'
        }
      ]
    }, {
      type: 'user',
      name: '用户',
      columns: [{
          code: 'userId',
          name: '用户名'
        },
        {
          code: 'name',
          name: '用户姓名'
        }
      ]
    }];
    status = {};
    showEdit = false;

    handleSizeChange(val) {
      this.example.size = val;
      this.query();
    }

    handleCurrentChange(val) {
      this.example.page = val;
      this.query();
    }
    query(page) {
      if (page != null) {
        this.example.page = page;
      }
      const that = this;
      this.$get('admin/' + this.type + '/list/all', this.example).then(function(response) {
        if (response) {
          that.result = response;
        } else {
          that.result = [];
        }
      });
    }
    edit(row) {
      this.status = this.$store.state.dict[this.type + '_status'];
      this.param = JSON.parse(JSON.stringify(row));
      this.showEdit = true;
    }
    confirm() {
      const that = this;
      this.$post('admin/' + this.type + '/update', this.param).then(function(response) {
        if (response) {
          that.query();
          that.showEdit = false;
        }
      });
    }
    getValue(row, column, value, index) {
      const dict = this.$store.state.dict[this.type + '_status'];
      if (dict == null) {
        return value;
      }
      const val = dict[value];
      return val == null ? value : val;
    }

    @Watch('type', {
      immediate: true
    })
    typeChange(nVal, oVal) {
      this.query(1);
    }

    created() {
      const arr = new Array();
      for (var i = 0; i < this.typeList.length; i++) {
        arr.push(this.typeList[i].type + '_status');
      }
      this.$store.commit('getDictMap', arr)
      this.query();
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style>
  #main {
    padding: 10px 100px;
  }
</style>