apt-nl/src/pages/modules/systemmanage/user.vue

<template>
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
        <button class="button button--primary" @click="showDialog('1')">添加用户</button>
      </div>
    </div>
    <div class="grid_wrapper">
      <table>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>姓名</th>
          <th>电话</th>
          <th>性别</th>
          <th>创建日期</th>
          <th>操作</th>
        </tr>
        <tr v-for="(e, i) in datalist" :key="i">
          <td>{{i+1}}</td>
          <td>{{ e.username }}</td>
          <td>{{ e.personName }}</td>
          <td>{{ e.phone }}</td>
          <td>{{ e.gender }}</td>
          <td>{{ e.createTime }}</td>
          <td>
            <div class="row">
              <button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
              <button class="button button--primary grid_button" @click="showDialog('3', e)">重置密码</button>
              <button class="button button--primary grid_button" @click="showDialog('4', e)">删除</button>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <jxDialog
    ref="child"
    :title="title"
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>用户名</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="username">
          </div>
        </div>
        <div class="form_item">
          <div class="form_item__label">电话</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="phone">
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item">
          <div class="form_item__label">姓名</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="name">
          </div>
        </div>
        <div class="form_item">
          <div class="form_item__label">性别</div>
          <div class="form_item__content">
            <div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
              <div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
                <i class="icon_radio"></i>
                <input type="radio" class="radio__original" v-model="e.value">
              </div>
              <div class="radio__label">{{ e.label }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="form">
        <div v-if="type === '1'" class="form_item">
          <div class="form_item__label"><i>*</i>密码</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="password">
          </div>
        </div>
        <div class="form_item">
          <div class="form_item__label">角色</div>
          <div class="form_item__content">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.roleId"
                :label="item.name"
                :value="item.roleId">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div v-if="type === '3'" class="form_wraper">确定重置密码吗？</div>
    <div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
import {usersQuery, sysRoleQuery, usersAdd, usersEdit, usersDelete} from '@config/getData2.js'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      datalist: [],
      active: false,
      type: '',
      title: '',
      username: '',
      phone: '',
      name: '',
      sexArr: [{label: '男', value: '男'}, {label: '女', value: '女'}],
      sex: '',
      password: '',
      options: [],
      value: '',
      disabled1: false,
      pkObj: {},
      unclick: false
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case '1':
          this.title = '添加用户'
          break
        case '2':
          this.title = '修改用户'
          break
        case '3':
          this.title = ''
          break
        case '4':
          this.title = ''
          break
        default:
          this.title = ''
      }
    },
    username (val) {
      if (this.type === '1' && (this.password === '' || val === '')) {
        this.unclick = true
      } else if (this.type === '2' && val === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    password (val) {
      if (this.type === '1' && (this.password === '' || val === '')) {
        this.unclick = true
      } else {
        this.unclick = false
      }
    }
  },
  created () {
    this._usersQuery()
    this._sysRoleQuery()
  },
  methods: {
    async _usersQuery () {
      let res = await usersQuery('0', '100')
      this.datalist = [...res]
    },
    async _sysRoleQuery () {
      let res = await sysRoleQuery('0', '100')
      this.options = [...res]
    },
    showDialog (type, e) {
      this.type = type
      this.$refs.child.active = true
      switch (type) {
        case '1':
          this.username = ''
          this.phone = ''
          this.name = ''
          this.sex = ''
          this.password = ''
          this.value = ''
          this.unclick = true
          break
        case '2':
          this.pkObj = e
          this.username = e.username
          this.phone = e.phone
          this.name = e.personName
          this.sex = this.gender
          this.options.map(el => {
            if (el.roleId === e.roles[0].roleId) {
              this.value = el.roleId
            }
          })
          if (this.username === '') {
            this.unclick = true
          }
          break
        case '3':
          this.pkObj = e
          this.unclick = false
          break
        case '4':
          this.pkObj = e
          this.unclick = false
          break
      }
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          this._usersAdd()
          break
        case '2':
          this._usersEdit()
          break
        case '3':
          this.resetPassword()
          break
        case '4':
          this._usersDelete()
          break
      }
    },
    toRadio (e) {
      this.sex = e.value
    },
    async _usersAdd () {
      this.$refs.child.disabled = true
      if (!this.username) {
        this.toast('用户名不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.password) {
        this.toast('密码不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let rolesIds = []
        this.options.map(el => {
          if (el.roleId === this.value) {
            rolesIds.push(el)
          }
        })
        await usersAdd(this.username, this.name, this.sex, this.phone, rolesIds, this.password)
        this.toast('操作成功')
        this._usersQuery()
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _usersEdit () {
      this.$refs.child.disabled = true
      if (!this.username) {
        this.toast('用户名不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let rolesIds = []
        this.options.map(el => {
          if (el.roleId === this.value) {
            rolesIds.push(el)
          }
        })
        let obj = {
          userId: this.pkObj.userId,
          username: this.username,
          personName: this.name,
          gender: this.sex,
          phone: this.phone,
          rolesIds: rolesIds
        }
        await usersEdit(obj)
        this.toast('操作成功')
        this._usersQuery()
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async resetPassword () {
      this.$refs.child.disabled = true
      try {
        let obj = {
          userId: this.pkObj.userId,
          password: '123456'
        }
        await usersEdit(obj)
        this.toast('操作成功')
        this._usersQuery()
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _usersDelete () {
      this.$refs.child.disabled = true
      try {
        await usersDelete([this.pkObj.userId])
        this.toast('操作成功')
        this._usersQuery()
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.grid_wrapper
  height calc(100% - 50px)
  overflow-y auto
</style>