From 949c725cb112b27682980cb9a3d881ad70fa04a7 Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:07:57 +0800
Subject: [PATCH] ADD file via upload

---
 flower_admin_front/src/views/userView.vue | 318 ++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 flower_admin_front/src/views/userView.vue

diff --git a/flower_admin_front/src/views/userView.vue b/flower_admin_front/src/views/userView.vue
new file mode 100644
index 0000000..e0db4dd
--- /dev/null
+++ b/flower_admin_front/src/views/userView.vue
@@ -0,0 +1,318 @@
+<template>
+    <div>
+        <div class="tableTop">
+            <div>
+                <el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索关键字" v-model="input" clearable></el-input>
+            </div>
+            <div>
+                <el-button @click="handleDeleteMul" type="danger">批量删除</el-button>
+            </div>
+        </div>
+        <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                style="width: 100%"
+                @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="60"></el-table-column>
+            <el-table-column prop="user_id" label="id" width="100"></el-table-column>
+            <el-table-column prop="user_name" label="用户名" width="120"></el-table-column>
+            <el-table-column prop="user_phone" label="联系电话" width="180"></el-table-column>
+            <el-table-column prop="user_role" label="身份" width="150"
+                             :filters="[{ text: '普通用户', value: 0 }, { text: '会员', value:1 }]"
+                             :filter-method="filterRole">
+                <template slot-scope="scope">
+                    <el-tag
+                        :type="scope.row.user_role === 0 ? 'primary' : 'success'"
+                        disable-transitions>
+                        <span v-show="scope.row.user_role===0">普通用户</span>
+                        <span v-show="scope.row.user_role===1">会员</span>
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="member_time" label="会员截止日期" width="180"></el-table-column>
+            <el-table-column prop="user_state" label="账号状态" width="220"
+                             :filters="[{ text: '禁用', value: 0 }, { text: '正常', value:1 }]"
+                             :filter-method="filterState">
+                <template slot-scope="scope">
+                    <el-switch
+                        @change="handleStateChange(scope.row)"
+                        v-model="scope.row.user_state===1"
+                        active-text="正常"
+                        inactive-text="禁用">
+                    </el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="user_pic" label="用户头像" width="180">
+                <template slot-scope="scope">
+                    <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.user_pic)" style="height: 60px;width: 60px" alt="">
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+                background
+                :current-page="currentPage"
+                :page-size="pageSize"
+                layout="total, prev, pager, next, jumper"
+                :total="total"
+                :page-count="page_number"
+                style="margin-top: 30px"
+                @current-change="handleCurrentChange">
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+import {http} from "@/js/http";
+export default {
+    data() {
+        return {
+            tableData: [{
+                user_id: 1,
+                user_name: '',
+                user_pwd: '',
+                user_phone:'',
+                user_state:1,
+                user_role:1,
+                user_pic:'/10001/20240307170114539.jpg',
+                member_time:''
+            }],
+            multipleSelection: [],
+            input: '',
+
+            currentPage:1,
+            pageSize:8,
+            page_number:1,//总页数
+            total:10,//总条数
+            //图片相关
+            // request:http+'/upload',
+            // headers:{ Authorization: Cookie.get('token') },
+            // fileList: []
+        }
+    },
+    created() {
+        this.currentPage=1;
+        this.fetchData();
+    },
+    methods: {
+        fetchData(){
+            //页面首次加载时获取所有用户信息
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/user/list',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有用户信息成功
+                        _this.tableData=response.data.data.users;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        handleCurrentChange(page) {
+            this.currentPage = page;
+            this.fetchData();
+        },
+        //多选
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        //修改
+        handleStateChange(row){
+            const _this = this
+            axios({
+                method: 'post',
+                url: 'http://localhost:8181/user/modifyState',
+                headers: {
+                    Authorization: Cookie.get('token'),
+                    'Content-Type': 'application/json'
+                },
+                data:{
+                    user_id:row.user_id
+                }
+            }).then(function (response){
+                if (response.data.code===200) {
+                    //修改用户状态信息成功
+                    _this.handleSearch()
+                }
+                if (response.data.code===401){
+                    _this.$message.warning('身份验证失败,请重新登录!')
+                }
+                if (response.data.code===403){
+                    const message = response.data.msg;
+                    this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                        confirmButtonText: '确定'
+                    })
+                }
+            });
+        },
+        //搜索
+        handleSearch(){
+            const _this = this
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/user/query',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize,
+                        user_name:_this.input
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询用户信息成功
+                        _this.tableData=response.data.data.users;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //表格筛选相关
+        filterRole(value, row) {
+            return row.user_role === value;
+        },
+        filterState(value, row) {
+            return row.user_state === value;
+        },
+        //删除
+        handleDelete(row){
+            const _this = this
+            this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //确认删除
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/user/deletePer',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        user_id:row.user_id
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //删除用户成功
+                        _this.handleSearch()
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+                this.$message({type: 'success', message: '删除成功!'});
+            }).catch(() => {
+                this.$message({type: 'info', message: '已取消删除'});
+            });
+        },
+        handleDeleteMul(){
+            const _this = this
+            if(_this.multipleSelection.length===0)
+                this.$message({type: 'warning', message: '请选择用户'});
+            else{
+                let ids = []
+                for (let i=0; i<_this.multipleSelection.length; i++){
+                    ids[i] = _this.multipleSelection[i].user_id
+                }
+
+                this.$confirm('此操作将永久删除用户信息, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    //确认删除
+                    axios({
+                        method: 'post',
+                        url: 'http://localhost:8181/user/deleteMul',
+                        headers: {
+                            Authorization: Cookie.get('token'),
+                            'Content-Type': 'application/json'
+                        },
+                        data:{
+                            user_ids:ids
+                        }
+                    }).then(function (response){
+                        if (response.data.code===200) {
+                            //删除用户成功
+                            _this.handleSearch()
+                        }
+                        if (response.data.code===401){
+                            _this.$message.warning('身份验证失败,请重新登录!')
+                        }
+                        if (response.data.code===403){
+                            const message = response.data.msg;
+                            this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                                confirmButtonText: '确定'
+                            })
+                        }
+                    });
+                    this.$message({type: 'success', message: '批量删除成功!'});
+                }).catch(() => {
+                    this.$message({type: 'info', message: '已取消删除'});
+                });
+            }
+        }
+    }
+}
+</script>
+<style>
+.tableTop{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0 20px 50px;
+}
+</style>