添加后台新增用户操作

sso-manage-console-web/src/components/accounts/common/CommonHome.vue

@@ -41,6 +41,8 @@
             刷新
           </button>
 
+          <slot name="actions"></slot>
+
           <div class="pagination-area">
             <el-pagination
               background

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

@@ -1,91 +1,147 @@
 <template>
-  <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="lastLogin"
-        label="上次登录">
-      </el-table-column>
-      <el-table-column
-        prop="fromApp"
-        label="注册来源">
-      </el-table-column>
-    </el-table>
-  </common-home>
+  <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="lastLogin"
+          label="上次登录">
+        </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">
+          新增
+        </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>
@@ -109,6 +165,11 @@
     }
   ]
 
+  function addNewUserInfo (user) {
+    return axios.post('/api/user//addNewUser', user)
+      .then(user => { return user })
+  }
+
   export default {
     name: 'user-home',
     components: {
@@ -127,7 +188,9 @@
         pageContent: [],
         total: 0,
         mobileValidCodeOptions: ValidCode,
-        searchKeys: searchKeys
+        searchKeys: searchKeys,
+        isAddNewUser: false,
+        newUserInfo: {}
       }
     },
     created () {
@@ -179,6 +242,23 @@
         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 ''
@@ -227,4 +307,77 @@
   .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>