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="addData">添加用户</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.name}}</td>
          <td>{{e.name}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <div class="row">
              <button class="button button--primary">修改</button>
              <button class="button button--primary">分配角色</button>
              <button class="button button--primary" @click="setPass">重置密码</button>
              <button class="button button--primary">删除</button>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <jxDialog
    ref="child1"
    title="添加用户">
    <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">
        </div>
      </div>
      <div class="form_item">
        <div class="form_item__label">电话</div>
        <div class="form_item__content">
          <input type="text" class="form_item__input">
        </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">
        </div>
      </div>
      <div class="form_item">
        <div class="form_item__label">性别</div>
        <div class="form_item__content">
          <div class="form_item__radio">
            <div class="radio__input"><i class="iconfont icon_radio icon_radio_checked"></i></div>
            <div class="radio__label">男</div>
          </div>
          <div class="form_item__radio">
            <div class="radio__input"><i class="iconfont icon_radio"></i></div>
            <div class="radio__label">女</div>
          </div>
        </div>
      </div>
    </div>
    <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">
        </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.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    </jxDialog>
    <jxDialog ref="child2">确定重置密码吗？</jxDialog>
  </div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      datalist: [{name: 'a氪金大佬发家里的饭交流交流'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ac'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ad'}],
      options: [{
        value: '选项1',
        label: '超级管理员'
      }, {
        value: '选项2',
        label: '系统管理员'
      }, {
        value: '选项3',
        label: '普通用户'
      }, {
        value: '选项4',
        label: '开发人员'
      }],
      value: '',
      active: false
    }
  },
  methods: {
    addData () {
      this.$refs.child1.active = true
    },
    setPass () {
      this.$refs.child2.active = true
    }
  }
}
</script>

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