Source/plt-web/plt-web-ui/src/views/user/userManage.vue

@@ -1,131 +1,123 @@
<template>
  <basic-container>
    <avue-crud :data="data"
               :option="option">
    <avue-crud
      :data="tableData"
      :option="option"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getTableList"
      @refresh-change="handleRefresh"
      @search-change="handleSearch"
      @search-reset="handleReset"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="status" slot-scope="{row}">
        <el-tag v-if="row.status === 0" type="success">启用</el-tag>
        <el-tag v-if="row.status === 1" type="danger">停用</el-tag>
      </template>

      <template slot="lockFlag" slot-scope="{row}">
        <el-tag v-if="!row.lockFlag" type="success">未锁定</el-tag>
        <el-tag v-if="row.lockFlag" type="danger">锁定</el-tag>
      </template>

      <template #menu="{row,index,size}">
        <el-button size="small" type="text" @click="stopUserHandler(row)">
          <span style="color: #fa3434" v-if="row.status === 0"><i class="el-icon-video-pause"></i> 停用</span>
          <span style="color: #55b61d" v-if="row.status === 1"><i class="el-icon-video-pause"></i> 启用</span>
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import basicOption from '@/option/user/basic-option'
import basicOption from '@/util/basic-option'
import {getDataUsers, stopUser} from '@/api/user/userManageApi'
import {column} from "./userManage"
import func from '@/util/func'

export default {
  name: "userManage",
  data() {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        },
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        },
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }, {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      tableLoading: false,
      tableData: [],
      option: {
        ...basicOption,
        column: [
          {
            label: '姓名',
            prop: 'name',
            search:true
          }, {
            label: '性别',
            prop: 'sex',
            search:true
        calcHeight: -60,
        column: column
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 30, 50, 100],
      },
      searchParams: {},
    }
  },
  created() {
  },
  methods: {
    // 表格请求
    getTableList() {
      getDataUsers(this.page.currentPage, this.page.pageSize, this.searchParams).then(res => {
        const data = res.data.data;
        this.tableData = data;
        this.page.total = res.data.total;
      });
    },

    // 表格右侧刷新图标
    handleRefresh() {
      this.getTableList();
    },

    // 搜索查询
    handleSearch(params, done) {
      if (!func.isEmptyObject(params)) {
        for (let key in params) {
          if (params.hasOwnProperty(key)) {
            // 判断如果 key 是 'pkPersonName'，则改为 'pkPerson' 分别为显示值和保存值
            let newKey = key === 'pkPersonName' ? 'pkPerson' : key;
            this.searchParams[`conditionMap["${newKey}"]`] = params[key];
          }
        ]
        }
      } else {
        this.searchParams = {};
      }
      this.getTableList();
      done();
    },

    // 重置搜索条件
    handleReset() {
      this.searchParams = {};
      this.getTableList();
    },

    // 条数
    sizeChange(val) {
      this.page.pageSize = val;
    },

    // 页码
    currentChange(val) {
      this.page.currentPage = val;
    },

    // 停用启用
    stopUserHandler(row){
      let params = {};
      params = {
        idList:row.oid,
        flag: row.status === 0 ? true : false
      }
      stopUser(params).then(res => {
        console.log(res)
      })
    }
  }