账户管理

src/views/setting/account/index.vue

@@ -1,149 +1,149 @@
 <template>
-  <div class="app-container">
-    <div class="setting_title">账户管理</div>
-    <el-divider></el-divider>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增账户</el-button>
-        </div>
-        <div class="fr">
-          <el-select v-model="screenForm.role" placeholder="全部" size="small" style="width: 120px; margin-right: 10px;"
-            @change="getListByScreen">
-            <el-option label="全部角色" value=""></el-option>
-            <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
-              :key="index"></el-option>
-          </el-select>
-          <el-select v-model="screenForm.status" placeholder="全部" size="small" style="width: 120px; margin-right: 10px;"
-            @change="getListByScreen">
-            <el-option label="全部状态" value=""></el-option>
-            <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status"
-              :key="index"></el-option>
-          </el-select>
-          <el-input placeholder="请输入内容" v-model="screenForm.keyword" size="small" style="width: 180px;">
-            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
-          </el-input>
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+    <template slot-scope="{activeKey, data}">
+      <div :style="{
+        width: '100%',
+        height: activeKey == 'list' ? '100%' : '0px',
+        overflow: 'hidden'
+      }">
+        <div class="app-container">
+          <div class="setting_title">账户管理</div>
+          <el-divider></el-divider>
+          <div class="mymain-container">
+            <div class="btn-group clearfix">
+              <div class="fl">
+                <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增账户</el-button>
+              </div>
+              <div class="fr">
+                <el-select v-model="screenForm.role" placeholder="全部" size="small"
+                  style="width: 120px; margin-right: 10px;" @change="getListByScreen">
+                  <el-option label="全部角色" value=""></el-option>
+                  <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
+                    :key="index"></el-option>
+                </el-select>
+                <el-select v-model="screenForm.status" placeholder="全部" size="small"
+                  style="width: 120px; margin-right: 10px;" @change="getListByScreen">
+                  <el-option label="全部状态" value=""></el-option>
+                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status"
+                    :key="index"></el-option>
+                </el-select>
+                <el-input placeholder="请输入内容" v-model="screenForm.keyword" size="small" style="width: 180px;">
+                  <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
+                </el-input>
+              </div>
+            </div>
+            <div class="table">
+              <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit
+                highlight-current-row stripe>
+                <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
+                <el-table-column align="center" label="账号" prop="userName" min-width="120"></el-table-column>
+                <el-table-column align="center" label="用户名" prop="nickName" min-width="120"></el-table-column>
+                <el-table-column align="center" label="角色" prop="roleName" min-width="100"></el-table-column>
+                <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
+                <el-table-column align="center" label="最后登录时间" prop="lastLoginTime" min-width="160"></el-table-column>
+                <el-table-column align="center" label="状态" class-name="status-col">
+                  <template slot-scope="scope">
+                    <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '正常' : '冻结' }}</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" min-width="160">
+                  <template slot-scope="scope">
+                    <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗？"
+                      @confirm="changeStatus(scope.row.adminUserId, 0)">
+                      <el-button slot="reference" type="text">冻结</el-button>
+                    </el-popconfirm>
+                    <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗？"
+                      @confirm="changeStatus(scope.row.adminUserId, 1)">
+                      <el-button slot="reference" type="text">恢复</el-button>
+                    </el-popconfirm>
+                    <el-button type="text" @click="addOrEdit('edit', scope.row.adminUserId)">编辑</el-button>
+                    <el-button type="text" @click="handleReset(scope.row.adminUserId)">重置密码</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="pagination clearfix">
+              <div class="fr">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                  :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                  layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
+                </el-pagination>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
-          stripe>
-          <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
-          <el-table-column align="center" label="账号" prop="userName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="用户名" prop="nickName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="角色" prop="roleName" min-width="100"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="最后登录时间" prop="lastLoginTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '正常' : '冻结' }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="操作" min-width="160">
-            <template slot-scope="scope">
-              <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗？"
-                @confirm="changeStatus(scope.row.adminUserId, 0)">
-                <el-button slot="reference" type="text">冻结</el-button>
-              </el-popconfirm>
-              <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗？"
-                @confirm="changeStatus(scope.row.adminUserId, 1)">
-                <el-button slot="reference" type="text">恢复</el-button>
-              </el-popconfirm>
-
-              <el-button type="text" @click="addOrEdit('edit', scope.row.adminUserId)">编辑</el-button>
-              <el-button type="text" @click="handleReset(scope.row.adminUserId)">重置密码</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
+      <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="120px">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
+          </el-form-item>
+          <el-form-item label="用户名" prop="nickName">
+            <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号" prop="linkPhone">
+            <el-input v-model="addForm.linkPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
+          </el-form-item>
+          <el-form-item label="角色组" prop="role">
+            <el-select v-model="addForm.role" placeholder="请选择角色组" style="width: 100%;">
+              <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
+                :key="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网点" prop="adminWebsitId">
+            <el-cascader style="width: 100%" :options="departmentList"
+              :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="addForm.adminWebsitId"
+              clearable>
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="密码" prop="newPassword">
+            <el-input v-model="addForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码"
+              :type="passwordType1"></el-input>
+            <span class="show-pwd" @click="showPwd(1)">
+              <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input v-model="addForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
+              :type="passwordType2"></el-input>
+            <span class="show-pwd" @click="showPwd(2)">
+              <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-form-item label="是否公众号通知" prop="pubNotice">
+            <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949">
+            </el-switch>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="data.removeTab()">取 消</el-button>
+          <el-button type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
         </div>
       </div>
-    </div>
-
-    <!-- 重置密码 -->
-    <el-dialog title="重置密码" :visible.sync="resetFormVisible" :show-close="false" width="40%"
-      :close-on-click-modal="false">
-      <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
-        <el-form-item label="输入新密码" prop="newPassword">
-          <el-input v-model="resetForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入新密码"
-            :type="passwordType1"></el-input>
-          <span class="show-pwd" @click="showPwd(1)">
-            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input v-model="resetForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入新密码"
-            :type="passwordType2"></el-input>
-          <span class="show-pwd" @click="showPwd(2)">
-            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelResetForm">取 消</el-button>
-        <el-button type="primary" @click="submitResetForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 新增编辑账户 -->
-    <el-dialog :title="addFormType == 'add' ? '新增账户' : '编辑账户'" :visible.sync="addFormVisible" :show-close="false"
-      width="500px" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="120px">
-        <el-form-item label="账号" prop="account">
-          <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
-        </el-form-item>
-        <el-form-item label="用户名" prop="nickName">
-          <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" prop="linkPhone">
-          <el-input v-model="addForm.linkPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
-        </el-form-item>
-        <el-form-item label="角色组" prop="role">
-          <el-select v-model="addForm.role" placeholder="请选择角色组" style="width: 100%;">
-            <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
-              :key="index"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网点" prop="adminWebsitId">
-          <el-cascader style="width: 100%" :options="departmentList"
-            :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="addForm.adminWebsitId" clearable>
-          </el-cascader>
-        </el-form-item>
-        <el-form-item label="密码" prop="newPassword">
-          <el-input v-model="addForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码"
-            :type="passwordType1"></el-input>
-          <span class="show-pwd" @click="showPwd(1)">
-            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input v-model="addForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
-            :type="passwordType2"></el-input>
-          <span class="show-pwd" @click="showPwd(2)">
-            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-        <el-form-item label="是否公众号通知" prop="pubNotice">
-          <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949">
-          </el-switch>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+      <div v-if="~['resetpassword'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+        <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
+          <el-form-item label="输入新密码" prop="newPassword">
+            <el-input v-model="resetForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入新密码"
+              :type="passwordType1"></el-input>
+            <span class="show-pwd" @click="showPwd(1)">
+              <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input v-model="resetForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入新密码"
+              :type="passwordType2"></el-input>
+            <span class="show-pwd" @click="showPwd(2)">
+              <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="data.removeTab()">取 消</el-button>
+          <el-button type="primary" @click="submitResetForm(data.removeTab)">确 定</el-button>
+        </div>
       </div>
-    </el-dialog>
-
-  </div>
+    </template>
+  </zj-tab-page>
 </template>
 
 <script>
@@ -216,9 +216,7 @@ export default {
         children: 'children',
       },
       merchantList: [], // 商户列表
-
       resetId: null,
-      resetFormVisible: false,
       resetForm: {
         newPassword: '', // 新密码
         confirmPassword: '', // 确认密码
@@ -231,10 +229,8 @@ export default {
           { required: true, validator: validatePass2, trigger: 'blur' }
         ],
       },
-
       editId: null,
       addFormType: 'add',
-      addFormVisible: false,
       addForm: {
         account: '', // 账号
         nickName: '', // 用户名
@@ -243,7 +239,7 @@ export default {
         newPassword: '', // 新密码
         confirmPassword: '', // 确认密码
         pubNotice: true,
-        linkPhone:"",
+        linkPhone: "",
       },
       addFormRules: {
         account: [
@@ -268,7 +264,6 @@ export default {
           { required: true, validator: validatePass4, trigger: 'blur' }
         ],
       },
-
       passwordType1: 'password',
       passwordType2: 'password',
     }
@@ -394,20 +389,31 @@ export default {
 
     // 重置密码
     handleReset(id) {
-      this.resetId = id;
-      this.resetFormVisible = true;
+      this.$refs.tabPage.addTab({
+				activeKey: "resetpassword",
+				key: "resetpassword",
+				label: "重置密码",
+				triggerEvent: () => {
+					this.cancelResetForm()
+					this.$nextTick(() => {
+						this.resetId = id;
+					})
+				},
+				closeEvent: () => {
+          this.cancelResetForm()
+				}
+			})
     },
 
     // 取消重置密码
     cancelResetForm() {
-      this.resetFormVisible = false;
       this.passwordType1 = 'password';
       this.passwordType2 = 'password';
-      this.$refs.resetForm.resetFields();
+      this.$refs?.resetForm?.resetFields();
     },
 
     // 提交重置密码
-    submitResetForm() {
+    submitResetForm(removeTab) {
       this.$refs.resetForm.validate((valid) => {
         if (valid) {
           let params = {
@@ -415,7 +421,7 @@ export default {
             adminUserId: this.resetId
           }
           resetPassword(params).then(res => {
-            this.cancelResetForm();
+            removeTab('list');
             this.getList();
             this.$successMsg();
           })
@@ -425,35 +431,44 @@ export default {
 
     // 新增编辑 账户
     async addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      this.departmentList = await this.getDepartmentList();
-
-      if (type == 'edit') {
-        this.editId = id;
-        getUserInfo({ adminUserId: id }).then(res => {
-          this.addForm = {
-            account: res.data.userName,
-            role: res.data.roleId,
-            nickName: res.data.nickName,
-            pubNotice: res.data.pubNotice,
-            adminWebsitId: res.data.adminWebsitId,
-            linkPhone: res.data.linkPhone
+      this.$refs.tabPage.addTab({
+				activeKey: type,
+        key: type,
+        label: ({ add: "新增", edit: "编辑" })[type],
+				triggerEvent: async () => {
+          this.cancelAddForm()
+					this.addFormType = type;
+          this.departmentList = await this.getDepartmentList();
+          if (type == 'edit') {
+            this.editId = id;
+            getUserInfo({ adminUserId: id }).then(res => {
+              this.addForm = {
+                account: res.data.userName,
+                role: res.data.roleId,
+                nickName: res.data.nickName,
+                pubNotice: res.data.pubNotice,
+                adminWebsitId: res.data.adminWebsitId,
+                linkPhone: res.data.linkPhone
+              }
+            })
           }
-        })
-      }
+				},
+				closeEvent: () => {
+          
+				}
+			})
     },
 
     // 取消 新增编辑账户
     cancelAddForm() {
-      this.addFormVisible = false;
       this.passwordType1 = 'password';
       this.passwordType2 = 'password';
-      this.$refs.addForm.resetFields();
+      this.$refs?.addForm?.resetFields();
+      this.$data.addForm = this.$options.data().addForm
     },
 
     // 提交 新增编辑账户
-    submitAddForm() {
+    submitAddForm(removeTab) {
       this.$refs.addForm.validate((valid) => {
         if (valid) {
           let adminWebsitId = null
@@ -474,13 +489,13 @@ export default {
           if (this.addFormType == 'edit') {
             params.adminUserId = this.editId;
             editAccount(params).then(res => {
-              this.cancelAddForm();
+              removeTab('list');
               this.getList();
               this.$successMsg('编辑成功');
             })
           } else {
             addAccount(params).then(res => {
-              this.cancelAddForm();
+              removeTab('list');
               this.getList();
               this.$successMsg('新增成功');
             })