water_dealer-agent/src/views/permissions/Index.vue

<template>
  <page-header-wrapper>
    <!-- 有操作权限 -->
    <!-- v-if="$store.getters.hasPromissionsShow.permission" -->
    <a-card :bordered="false" class="card" v-if="isManage">
      <a-row>
        <a-col :span="24">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :md="6" :sm="24">
                  <a-form-item label="用户姓名">
                    <a-input v-model="queryParam.name" placeholder="" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="登录账号">
                    <a-input v-model="queryParam.username" placeholder="" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button class="ml8" type="primary" @click="addPromissions">新增</a-button>
                  <a-button class="ml8" @click="resetSearch" >重置</a-button>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            :rowKey="row => row.middleground_id"
            showPagination="auto"
            bordered
            size="default"
          >
            <div slot="status" slot-scope="text, record">
              <a-switch :default-checked="record.status.value ===1? true : false" checked-children="可以登录" un-checked-children="禁止登录" @change="switchChange(record,$event)" />
            </div>

            <div slot="actions" slot-scope="text, record">
              <a @click="EditPromissions(record)">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm
                placement="left"
                title="是否确认删除该用户?"
                ok-text="OK"
                cancel-text="NO"
                @confirm="delPromissions(record)"
              >
                <a>删除</a>
              </a-popconfirm>
            </div>
          </s-table>
        </a-col>
      </a-row>
    </a-card>
    <!-- 没有操作权限限制 -->
    <NoRight v-else />
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import { getMiddlesManageUsers, delMiddlesManageUser, setMiddlesManageUserStatus } from '@/api/permissions'
import AddPromissions from './modules/AddPromissions'
import EditPromissions from './modules/EditPromissions'
import NoRight from '@/views/exception/noRight'

const columns = [
  {
    title: '用户ID',
    dataIndex: 'middleground_id',
    align: 'center',
    width: 120
  },
  {
    title: '用户姓名',
    key: 'name',
    dataIndex: 'name',
    align: 'center',
    width: 200
  },
  {
    title: '登录账号',
    dataIndex: 'username',
    align: 'center',
    width: 160
  },
  {
    title: '用户状态',
    scopedSlots: { customRender: 'status' },
    align: 'center',
    width: 120
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    align: 'center',
    width: 140
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'actions' },
    align: 'center',
    width: 120
  }
]

export default {
    name: 'PermissionsIndex',
    components: {
    STable,
    UserInfo,
    DeriveButton,
    AddPromissions,
    EditPromissions,
    NoRight
    },
    data () {
    this.columns = columns
    return {
        queryParam: {
            name: undefined,
            username: undefined
        },
        isManage: this.$store.getters.isManage, // 展示展示分配权限
        loadData: parameter => {
            const requestParameters = Object.assign({}, parameter, this.queryParam)
            return getMiddlesManageUsers(requestParameters)
        }
    }
},
    methods: {

    // 新增用户
    addPromissions () {
        this.$dialog(
        AddPromissions,
        {
            on: {
                ok: () => {
                    this.$refs.table.refresh(true)
                }
            }
        },
        {
            title: '新增用户',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认新增',
            cancelText: '取消'
        }
        )
    },
    // 编辑用户
    EditPromissions (item) {
        this.$dialog(
        EditPromissions,
        {
            item,
            on: {
            ok: () => {
                this.$refs.table.loadData()
            }
            }
        },
        {
            title: '编辑权限',
            width: 500,
            maskClosable: true,
            closable: true,
            okText: '确认修改',
            cancelText: '取消'
        }
        )
    },
     // 删除
    delPromissions (item) {
      delMiddlesManageUser(item.middleground_id).then(res => {
            this.$refs.table.loadData()
            this.$notification.success({
              message: '成功',
              description: '删除成功'
            })
        }).catch(err => {
          this.$notification.error(err)
        })
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
          username: undefined,
          name: undefined
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 更改状态
    switchChange (record, e) {
      const data = {
        status: (e ? 1 : 0)
      }
      setMiddlesManageUserStatus(record.middleground_id, data).then(res => {
        this.$notification.success({
          message: '成功',
          description: res
        })
        this.$refs.table.loadData()
      }).catch(err => {
          this.$notification.error(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}

.right {
  min-height: 80vh;
  margin-right: 30px;
  background-color: #f9f9f9;
  padding: 20px;
}

.ant-card-body {
  padding: 0px !important;
}

.title_left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: solid 1px rgba(#1890ff, 0.2);
}

.icon_title {
  padding: 10px 0;
}

.a_tree_title {
  font-weight: bold;
  font-size: 15px;
}

.a_tree_node {
  margin-top: 10px;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;

  .status-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: wrap;
    // div{
    //   width: 49%;
    //   display: flex;
    //   flex-direction: row;
    //   align-items: center;
    //   justify-content: center;
    //   box-sizing: border-box;
    //   flex-wrap: wrap;
    //   margin: 2px 10px;
    // }
  }
}
</style>