sso-parent/sso-manage-console-web/src/components/accounts/users/UserHome.vue

<template>
  <div>
    <common-home
      :pageSize="pageParams.size"
      :total="total"
      :searchKeys="searchKeys"
      :searchKey="pageParams.key"
      :searchKeyword="pageParams.keyword"
      @current-change="handleCurrentChange"
      @refresh-data="handleRefreshData"
      @search="handleSearchAction">
      <div slot="screen-type">
        <!-- 注册来源 -->
        <label>注册来源</label>
        <el-select v-model="pageParams.fromApp" clearable placeholder="不限" @change="handleRefreshData">
          <el-option
            v-for="item in fromAppOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <!-- 手机认证状态 -->
        <label>手机认证状态</label>
        <el-select v-model="pageParams.mobileValidCode" clearable placeholder="不限" @change="handleRefreshData">
          <el-option
            v-for="item in mobileValidCodeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="vipName"
          label="用户名称">
        </el-table-column>
        <el-table-column
          prop="userUU"
          label="个人UU">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          width="170">
          <template slot-scope="scope">
            {{ scope.row.mobile }}
            <span class="valid-code1" v-if="scope.row.mobileValidCode === 2">(已认证)</span>
            <span class="valid-code0" v-if="scope.row.mobileValidCode !== 2">(未认证)</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="250">
          <template slot-scope="scope" v-if="scope.row.email">
            {{ scope.row.email }}
            <span class="valid-code1" v-if="scope.row.emailValidCode === 2">(已认证)</span>
            <span class="valid-code0" v-if="scope.row.emailValidCode !== 2">(未认证)</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="registerDate"
          label="注册时间"
          :formatter="formatDate"
          width="160">
        </el-table-column>
        <el-table-column
          prop="lastLoginTime"
          label="上次登录"
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          prop="fromApp"
          label="注册来源">
        </el-table-column>
      </el-table>

      <div class="user-actions" slot="actions">
        <button
          type="button"
          class="btn btn-default btn-refresh"
          @click="isAddNewUser = true; newUserInfo = {}">
          新增
        </button>
      </div>
    </common-home>

    <!-- 新增用户对话框 -->
    <el-dialog
      title="新增用户"
      :visible.sync="isAddNewUser"
      width="450px"
      :show-close="true"
      :append-to-body="true">
      <!-- 用户信息展示 -->
      <div class="new-user-info">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" title="vipName" v-model="newUserInfo.vipName" required/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">手机号</label>
            <div class="col-sm-10">
              <input type="tel" class="form-control" title="mobile" v-model="newUserInfo.mobile" required/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" title="email" v-model="newUserInfo.email"/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <!-- 暂时使用文本 -->
              <input type="text" class="form-control" title="password" v-model="newUserInfo.password" required/>
            </div>
          </div>
        </form>
      </div>
      <!-- 对话框尾部 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewUser">保 存</el-button>
        <el-button @click="isAddNewUser = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import _ from 'lodash'
  import axios from '@/assets/js/axios'
  import {ValidCode} from '@/Constant'
  import CommonHome from '../common/CommonHome'

  const searchKeys = [
    {
      label: '用户名称',
      value: 'vipName'
    },
    {
      label: '个人UU',
      value: 'userUU'
    },
    {
      label: '手机号',
      value: 'mobile'
    }
  ]

  function addNewUserInfo (user) {
    return axios.post('/api/user//addNewUser', user)
      .then(user => { return user })
  }

  export default {
    name: 'user-home',
    components: {
      CommonHome
    },
    data () {
      return {
        pageParams: {
          page: 1,
          size: 8,
          fromApp: null,
          mobileValidCode: null,
          key: 'vipName',
          keyword: null
        },
        pageContent: [],
        total: 0,
        mobileValidCodeOptions: ValidCode,
        searchKeys: searchKeys,
        isAddNewUser: false,
        newUserInfo: {}
      }
    },
    created () {
      this.fetchData()
    },
    computed: {
      tableData () {
        return this.pageContent
      },
      fromAppOptions () {
        return this.$store.getters.fromAppOptions
      }
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        const params = _.defaultsDeep({}, this.pageParams)
        params.page = params.page - 1

        const success = page => {
          this.pageContent = page.content || []
          this.total = page.totalElements
        }
        const error = response => {
          this.$message.error(response)
        }

        axios.get('/api/user//showUserByPagination', { params }).then(success).catch(
          error)
      },
      handleCurrentChange (currentPage) {
        this.pageParams.page = currentPage
        this.fetchData()
      },
      handleRefreshData () {
        console.log(this.pageParams)
        this.fetchData()
      },
      handleSearchAction (key, keyword) {
        console.log(key, keyword)
        this.pageParams.key = key
        this.pageParams.keyword = keyword

        this.fetchData()
      },
      handleClick (row) {
        const routeLocation = {name: 'UserBasicInfo', params: row}
        this.$router.push(routeLocation)
      },
      addNewUser () {
        const body = _.defaultsDeep({}, this.newUserInfo)

        const error = response => {
          this.$message.error(response)
        }

        addNewUserInfo(body)
          .then(user => {
            console.log(user)
            this.$message.success('新增成功')
            this.isAddNewUser = false

            // 刷新页面数据
            this.fetchData()
          }).catch(error)
      },
      formatDate (row, column, value) {
        if (!value) {
          return ''
        }

        const date = new Date(value)
        let str = ''
        str += date.getFullYear() + '-'
        if (date.getMonth() + 1 < 10) {
          str += '0'
        }
        str += (date.getMonth() + 1) + '-'
        if (date.getDate() < 10) {
          str += '0'
        }
        str += date.getDate() + ' '
        if (date.getHours() < 10) {
          str += '0'
        }
        str += date.getHours() + ':'
        if (date.getMinutes() < 10) {
          str += '0'
        }
        str += date.getMinutes() + ':'
        if (date.getSeconds() < 10) {
          str += '0'
        }
        str += date.getSeconds()
        return str
      }
    }
  }
</script>

<style scoped>
  .el-button--text {
    color: #228EE1;
    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .el-table td span.valid-code0 {
    color: #E68717;
  }
  .el-table td span.valid-code1,
  .el-table td span.valid-code2,
  .el-table td span.valid-code3{
    color: #606266;
  }
  .user-actions {
    padding: 17px;
  }
  .user-actions button {
    height: 28px;
    line-height: 14px;
    border-radius: 0;
  }
  .new-user-info {
    width: 420px;
  }
  .new-user-info .form-horizontal .row {
    margin: 0;
  }
  .new-user-info .form-horizontal .control-label {
    text-align: left;

    color: #000000;
  }
  .new-user-info .form-horizontal .form-control {
    width: 300px;
    border-radius: 0;
    height: 34px;
    line-height: 14px;

    color: #646464;
  }
  .new-user-info .form-horizontal .control-label,
  .new-user-info .form-horizontal .form-control {
    font-size: 14px;
    font-weight: normal;
    font-family: "Microsoft YaHei", sans-serif;
  }
</style>

<style>
  .el-dialog {
    border-radius: 5px;
  }
  .el-dialog__header {
    padding: 14px 20px;
    height: 44px;
    line-height: 16px;
    border: 1px none #D2D2D2;
    border-bottom-style: solid;
  }
  .el-dialog__header .el-dialog__title {
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    font-family: "SimHei", sans-serif;
  }
  .el-dialog__body {
    padding: 22px 0 22px 40px;
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-dialog__footer .el-button {
    width: 180px;
    height: 30px;
    border-radius: 15px;
    line-height: 14px;
    padding: 8px 0;

    background: none;

    color: #656565;
  }
  .el-dialog__footer .el-button--primary {
    background-color: #4E8EFC;
    color: #FFFFFF;
  }
</style>