From cb9972642d4678845cf2f132483b3bf1e78c0ca4 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Thu, 12 Jan 2023 17:46:03 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E5=9F=BA=E7=A1=80=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=BB=84=E4=BB=B6=202.=E5=AE=8C=E5=96=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=AF=A6=E6=83=85=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/index.vue            | 209 +++++----------------
 src/views/system/user/profile/baseForm.vue | 192 +++++++++++++++++++
 2 files changed, 234 insertions(+), 167 deletions(-)
 create mode 100644 src/views/system/user/profile/baseForm.vue

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 327a34d..7f5d020 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -99,20 +99,14 @@
 
           <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
             <template slot-scope="scope" v-if="scope.row.userId !== 1">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']">修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']">删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
-                v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+              <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:edit']">详情</el-button>
+              <el-button size="mini" type="text"
+                @click="updateStatusByUserId(scope.row.status === '0' ? '1' : '0', scope.row.userId)"
+                v-hasPermi="['system:user:edit']">{{ scope.row.status === '0' ? '禁用' : '开启' }}</el-button>
+              <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:edit']">购买明细</el-button>
+
             </template>
           </el-table-column>
         </el-table>
@@ -122,96 +116,27 @@
       </el-col>
     </el-row>
 
-    <!-- 添加或修改用户配置对话框 -->
+    <!-- 添加对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-divider class="custom-divider" />
+      <base-form :reset="reset" :form="form" :onSuccess="() => { this.open = false; this.getList() }" />
+    </el-dialog>
 
-      <h3>基本信息</h3>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="18">
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="用户昵称" prop="nickName">
-                  <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="用户ID">
-                  <el-input value="自动生成" readonly />
-                </el-form-item>
-              </el-col>
-
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="手机号" prop="phonenumber">
-                  <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="微信昵称" prop="wechatNickName">
-                  <el-input v-model="form.wechatNickName" placeholder="请输入微信昵称" maxlength="50" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="性别">
-                  <el-select v-model="form.sex" placeholder="请选择性别">
-                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
-                      :value="dict.value"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="钱包余额" prop="balance">
-                  <el-input-number v-model="form.balance" :precision="2" :step="0.01" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item v-if="form.userId == undefined" label="登陆密码" prop="password">
-                  <el-input v-model="form.password" placeholder="默认123456" type="password" maxlength="20"
-                    show-password />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="推荐人">
-                  <el-autocomplete :fetch-suggestions="queryByPhone" :trigger-on-focus="false" clearable
-                    placeholder="请输入手机号" v-model="form.referrerPhone" @select="item => form.referrerId = item.userId" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="推荐人ID">
-                  <el-input v-model="form.referrerId" readonly />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="状态">
-                  <el-radio-group v-model="form.status">
-                    <el-radio v-for="dict in   dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{
-                      dict.label
-                    }}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-col>
-          <el-col :span="5" :offset="1">
-            <userAvatar :circle="false" show-bottom-label />
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer" style="text-align:center">
-        <el-button type="primary" @click="submitForm">保存</el-button>
-        <el-button @click="reset">重置</el-button>
-      </div>
+    <!-- 用户详情对话框 -->
+    <el-dialog :title="title" :visible.sync="detail.open" width="1000px" append-to-body>
+      <el-tabs v-model="detail.activeName" type="card">
+        <el-tab-pane label="基本信息" name="base">
+          <base-form :reset="reset" :form="form" show-detail />
+        </el-tab-pane>
+        <el-tab-pane label="钱包明细" name="balance">钱包明细</el-tab-pane>
+        <el-tab-pane label="购买明细" name="pay_detail">购买明细</el-tab-pane>
+        <el-tab-pane label="收货地址" name="address">收货地址</el-tab-pane>
+        <el-tab-pane label="浏览记录" name="browser_history">浏览记录</el-tab-pane>
+        <el-tab-pane label="收藏记录" name="star_history">收藏记录</el-tab-pane>
+        <el-tab-pane label="购物车" name="cart">购物车</el-tab-pane>
+        <el-tab-pane label="粉丝" name="fans">粉丝</el-tab-pane>
+        <el-tab-pane label="优惠券" name="discount_coupon">优惠券</el-tab-pane>
+      </el-tabs>
     </el-dialog>
 
     <!-- 用户导入对话框 -->
@@ -239,17 +164,15 @@
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, phoneSelect, updateStatus } from "@/api/system/user";
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, updateStatus } from "@/api/system/user";
 import { getToken } from "@/utils/auth";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { getAvatar } from "../../../utils";
-import userAvatar from "./profile/userAvatar";
+import baseForm from "./profile/baseForm"
 
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { userAvatar, Treeselect },
+  components: { baseForm },
   data() {
     return {
       // 遮罩层
@@ -284,6 +207,13 @@ export default {
         children: "children",
         label: "label"
       },
+      //用户详情
+      detail: {
+        // 是否显示弹出层
+        open: false,
+        //激活标签页
+        activeName: "base"
+      },
       // 用户导入参数
       upload: {
         // 是否显示弹出层（用户导入）
@@ -319,30 +249,7 @@ export default {
         { key: 5, label: `状态`, visible: true },
         { key: 6, label: `创建时间`, visible: true }
       ],
-      // 表单校验
-      rules: {
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
+
     };
   },
   created() {
@@ -353,27 +260,16 @@ export default {
   },
   methods: {
     //批量更新用户状态
-    updateStatusByUserId(status) {
+    updateStatusByUserId(status, userId) {
       updateStatus({
-        userIds: this.ids.join(","),
+        userIds: userId === undefined ? this.ids.join(",") : userId,
         status
       }).then(response => {
         this.$modal.msgSuccess(`批量${status === "0" ? "开启" : "禁用"}成功`);
         this.getList()
       })
     },
-    // 模糊查询手机号
-    queryByPhone(queryString, cb) {
-      phoneSelect(queryString).then(response => {
-        const data = response.data.map(item => {
-          return {
-            value: item.phonenumber,
-            userId: item.userId
-          }
-        })
-        cb(data)
-      })
-    },
+
     getAvatar,
     /** 查询用户列表 */
     getList() {
@@ -481,8 +377,8 @@ export default {
         this.roleOptions = response.roles;
         this.$set(this.form, "postIds", response.postIds);
         this.$set(this.form, "roleIds", response.roleIds);
-        this.open = true;
-        this.title = "修改用户";
+        this.detail.open = true;
+        this.title = "用户详情";
         this.form.password = "";
       });
     },
@@ -505,27 +401,6 @@ export default {
       const userId = row.userId;
       this.$router.push("/system/user-auth/role/" + userId);
     },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '')
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const userIds = row.userId || this.ids;
diff --git a/src/views/system/user/profile/baseForm.vue b/src/views/system/user/profile/baseForm.vue
new file mode 100644
index 0000000..7b9a053
--- /dev/null
+++ b/src/views/system/user/profile/baseForm.vue
@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <h3>基本信息</h3>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                <el-col :span="18">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="用户昵称" prop="nickName">
+                                <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="showDetail">
+                            <el-form-item label="用户ID">
+                                <el-input v-model="form.userId" readonly />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="手机号" prop="phonenumber">
+                                <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="微信昵称" prop="wechatNickName">
+                                <el-input v-model="form.wechatNickName" placeholder="请输入微信昵称" maxlength="50" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="性别">
+                                <el-select v-model="form.sex" placeholder="请选择性别">
+                                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value"
+                                        :label="dict.label" :value="dict.value"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="钱包余额" prop="balance">
+                                <el-input-number v-model="form.balance" :precision="2" :step="0.01" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item v-if="form.userId == undefined" label="登陆密码" prop="password">
+                                <el-input v-model="form.password" placeholder="默认123456" type="password" maxlength="20"
+                                    show-password />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="推荐人">
+                                <el-autocomplete :fetch-suggestions="queryByPhone" :trigger-on-focus="false" clearable
+                                    placeholder="请输入手机号" v-model="form.referrerPhone"
+                                    @select="item => form.referrerId = item.userId" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="推荐人ID">
+                                <el-input v-model="form.referrerId" readonly />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <template v-if="showDetail">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="注册时间">
+                                    <el-input :value="parseTime(form.createTime)" readonly disable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="最近登陆时间">
+                                    <el-input :value="parseTime(form.loginDate)" readonly disable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </template>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="状态">
+                                <el-radio-group v-model="form.status">
+                                    <el-radio v-for="dict in   dict.type.sys_normal_disable" :key="dict.value"
+                                        :label="dict.value">{{
+                                            dict.label
+                                        }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="5" :offset="1">
+                    <user-avatar :circle="false" show-bottom-label />
+                </el-col>
+            </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer" style="text-align:center">
+            <el-button type="primary" @click="submitForm">保存</el-button>
+            <el-button @click="reset">重置</el-button>
+        </div>
+    </div>
+</template>
+<script>
+
+import userAvatar from "./userAvatar";
+import { phoneSelect, addUser, updateUser } from "@/api/system/user";
+
+export default {
+    name: 'BaseForm',
+    components: { userAvatar },
+    dicts: ['sys_normal_disable', 'sys_user_sex'],
+    props: {
+        reset: Function,
+        form: Object,
+        showDetail: {
+            type: Boolean,
+            default: false
+        },
+        onSuccess: {
+            type: Function,
+            required: false
+        }
+    },
+    data() {
+        return {
+            // 表单校验
+            rules: {
+                nickName: [
+                    { required: true, message: "用户昵称不能为空", trigger: "blur" }
+                ],
+                password: [
+                    { required: true, message: "用户密码不能为空", trigger: "blur" },
+                    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+                ],
+                email: [
+                    {
+                        type: "email",
+                        message: "请输入正确的邮箱地址",
+                        trigger: ["blur", "change"]
+                    }
+                ],
+                phonenumber: [
+                    {
+                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+                        message: "请输入正确的手机号码",
+                        trigger: "blur"
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        // 模糊查询手机号
+        queryByPhone(queryString, cb) {
+            phoneSelect(queryString).then(response => {
+                const data = response.data.map(item => {
+                    return {
+                        value: item.phonenumber,
+                        userId: item.userId
+                    }
+                })
+                cb(data)
+            })
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.userId != undefined) {
+                        updateUser(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.onSuccess && this.onSuccess()
+                        });
+                    } else {
+                        this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '')
+                        addUser(this.form).then(response => {
+                            console.info(this.onSuccess)
+                            this.$modal.msgSuccess("新增成功");
+                            this.onSuccess && this.onSuccess()
+                        });
+                    }
+                }
+            });
+        },
+    }
+}
+</script>
\ No newline at end of file