ngds/backendEle/src/views/config/dec-role.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column prop="SORT" label="序号" width="80">
          <template slot-scope="scope">
            {{scope.row.SORT}}
          </template>
        </el-table-column>
        <el-table-column prop="ROLE_NAME" label="级别名称">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.ROLE_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="FW_BONUS_PERCENT" label="服务费(%)">
          <template slot-scope="scope">
            <el-tag type="danger" size="small" class="no-border">{{scope.row.FW_BONUS_PERCENT}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="editHandle(scope.row)">Edit</el-button>
            <el-button type="danger" plain size="small" @click="delHandle(scope)" v-if="false">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="muliDelHandle" v-if="false">
          <el-button type="primary" size="small">
            Selected data<!--所选数据--><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">Delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="onAdd" v-if="false">添加级别</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'

export default {
  name: 'dec-role',
  created () {

  },
  mounted () {
    network.getData('config/dec-role').then(response => {
      this.tableData = response.list
      this.loading = false
    })
  },
  data () {
    return {
      tableData: null,
      loading: true,
      tool: tool,
      multipleSelection: []
    }
  },
  methods: {
    editHandle (row) {
      this.$router.push({path: `/config/dec-role-edit/${row.ID}`})
    },
    onAdd () {
      this.$router.push({path: `/config/dec-role-add`})
    },
    delHandle (scope) {
      network.getData(`config/dec-role-delete/${scope.row.ID}`).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        Vue.delete(this.tableData, scope.$index)
      })
    },
    muliDelHandle (command) {
      if (command === 'delete') {
        let selectedIds = []
        for (let val of this.multipleSelection) {
          selectedIds.push(val.ID)
        }
        network.postData(`config/dec-role-delete`, {
          selected: selectedIds
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          let tempNewTableData = []
          for (let i in this.tableData) {
            if (!tool.isInArray(selectedIds, this.tableData[i].ID)) {
              tempNewTableData.push(this.tableData[i])
            }
          }
          this.tableData = tempNewTableData
        })

      }

    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>