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

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

diff --git a/flower_admin_front/src/views/staffView.vue b/flower_admin_front/src/views/staffView.vue
new file mode 100644
index 0000000..c0dab5d
--- /dev/null
+++ b/flower_admin_front/src/views/staffView.vue
@@ -0,0 +1,566 @@
+<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="handleAdd" type="primary">添加员工</el-button>
+                <el-button @click="handleDeleteMul" type="danger">批量删除</el-button>
+            </div>
+            <!-- 表单 -->
+            <el-dialog title="员工信息" :visible.sync="dialogVisible" :before-close="handleClose">
+                <el-form align="left" ref="dialogForm" :rules="rules" :model="dialogForm" label-width="130px" style="margin-right: 150px">
+                    <el-form-item label="用户名" prop="staff_name">
+                        <el-input v-model="dialogForm.staff_name" placeholder="请输入员工用户名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="staff_pwd">
+                        <el-input v-model="dialogForm.staff_pwd" placeholder="请输入密码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="姓名">
+                        <el-input v-model="dialogForm.staff_full_name" placeholder="请输入员工姓名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话">
+                        <el-input v-model="dialogForm.staff_phone" placeholder="请输入员工联系电话"></el-input>
+                    </el-form-item>
+                    <el-form-item label="身份" prop="staff_role">
+                        <el-select v-model="dialogForm.staff_role" placeholder="请选择身份">
+                            <el-option label="店长" :value="1"></el-option>
+                            <el-option label="员工" :value="0"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="账号状态" required>
+                        <el-switch v-model="dialogForm.staff_state" active-text="正常" inactive-text="禁用"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="展示图">
+                        <el-upload
+                            class="upload-demo"
+                            :on-success="onSuccess"
+                            :on-error="onError"
+                            :action="request"
+                            :headers="headers"
+                            :before-remove="beforeRemove"
+                            :limit="1"
+                            :on-exceed="handleExceed"
+                            :file-list="fileList">
+                            <el-button size="small" type="primary">点击上传</el-button>
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+                        </el-upload>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button @click="handleClose">取 消</el-button>
+                    <el-button type="primary" @click="submitForm">确 定</el-button>
+                </div>
+            </el-dialog>
+        </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="staff_id" label="id" width="80"></el-table-column>
+            <el-table-column prop="staff_name" label="用户名" width="120"></el-table-column>
+            <el-table-column prop="staff_pwd" label="密码" width="120"></el-table-column>
+            <el-table-column prop="staff_full_name" label="姓名" width="120"></el-table-column>
+            <el-table-column prop="staff_phone" label="联系电话" width="180"></el-table-column>
+            <el-table-column prop="staff_role" label="身份" width="100"
+                             :filters="[{ text: '员工', value: 0 }, { text: '店长', value:1 }]"
+                             :filter-method="filterRole">
+                <template slot-scope="scope">
+                    <el-tag
+                        :type="scope.row.staff_role === 0 ? 'primary' : 'success'"
+                        disable-transitions>
+                            <span v-show="scope.row.staff_role===0">员工</span>
+                            <span v-show="scope.row.staff_role===1">店长</span>
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="staff_state" label="账号状态" width="200"
+                             :filters="[{ text: '禁用', value: 0 }, { text: '正常', value:1 }]"
+                             :filter-method="filterState">
+                <template slot-scope="scope">
+                    <el-switch
+                        @change="handleStateChange(scope.row)"
+                        v-model="scope.row.staff_state===1"
+                        active-text="正常"
+                        inactive-text="禁用">
+                    </el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="staff_pic" label="头像" width="150">
+                <template slot-scope="scope">
+                    <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.staff_pic)" style="height: 80px;width: 80px" alt="">
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" >
+                <template slot-scope="scope">
+                    <el-button @click="handleModify(scope.row)" type="primary" size="small" plain>修改</el-button>
+                    <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: [{
+                staff_id: 1,
+                staff_name: '',
+                staff_pwd: '',
+                staff_full_name:'',
+                staff_phone:'',
+                staff_state:1,
+                staff_role:1,
+                staff_pic:''
+            }],
+            dialogForm:[{
+                staff_id: 1,
+                staff_name: '',
+                staff_pwd: '',
+                staff_full_name:'',
+                staff_phone:'',
+                staff_state:1,
+                staff_role:1,
+                staff_pic:''
+            }],
+            //表单校验
+            rules:{
+                staff_name:[
+                    { required:true, trigger:'blur', message:'请输入员工用户名'}
+                ],
+                staff_pwd:[
+                    { required:true, trigger:'blur', message:'请输入密码'}
+                ],
+                staff_role:[
+                    { required:true, trigger:'blur', message:'请选择身份信息'}
+                ]
+            },
+            //数据处理
+            multipleSelection: [],
+            input: '',
+            dialogVisible:false,
+            modelType:0, //0表示新增弹窗，1表示修改弹窗
+            //分页相关
+            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/staff/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.staffs;
+                        _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.staff_role === value;
+        },
+        filterState(value, row) {
+            return row.staff_state === value;
+        },
+        //搜索
+        handleSearch(){
+            const _this = this
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/staff/query',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize,
+                        staff_name:_this.input
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有员工信息成功
+                        _this.tableData=response.data.data.staffs;
+                        _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;
+        },
+        //表单相关
+        //添加
+        handleAdd(){
+            this.modelType = 0
+            this.dialogVisible = true
+        },
+        //修改
+        handleModify(row){
+            const _this = this
+            this.modelType = 1
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/staff/info',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        staff_id: row.staff_id
+                    }
+                }).then(function (response){
+                    if (response.data.code===200) {
+                        //获取员工信息成功
+                        _this.dialogForm = response.data.data
+                        //将状态和身份信息转换为表单显示
+                        _this.dialogForm.staff_state = response.data.data.staff_state === 1;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            this.dialogVisible = true
+        },
+        handleStateChange(row){
+            const _this = this
+            axios({
+                method: 'post',
+                url: 'http://localhost:8181/staff/modifyState',
+                headers: {
+                    Authorization: Cookie.get('token'),
+                    'Content-Type': 'application/json'
+                },
+                data:{
+                    staff_id:row.staff_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: '确定'
+                    })
+                }
+            });
+        },
+        //提交添加或修改的表单
+        submitForm(){ //提交用户表单
+            const _this=this;
+            this.$refs.dialogForm.validate((valid) =>{
+                if(valid){
+                    if(_this.modelType===0){
+                        //提交添加员工表单
+                        //账号状态转换为数据库存储格式
+                        let state;
+                        if(_this.dialogForm.staff_state) state=1;
+                        else state=0;
+
+                        axios({
+                            method: 'post',
+                            url: 'http://localhost:8181/staff/add',
+                            headers: {
+                                Authorization: Cookie.get('token'),
+                                'Content-Type': 'application/json'
+                            },
+                            data:{
+                                staff_name:_this.dialogForm.staff_name,
+                                staff_pwd:_this.dialogForm.staff_pwd,
+                                staff_full_name:_this.dialogForm.staff_full_name,
+                                staff_phone:_this.dialogForm.staff_phone,
+                                staff_role:_this.dialogForm.staff_role,
+                                staff_state:state,
+                                staff_pic:_this.dialogForm.staff_pic,
+                            }
+                        }).then(function (response){
+                            if (response.data.code===200) {
+                                //添加员工信息成功
+                                _this.$message.success('添加成功!')
+                                //再次获取数据以更新页面
+                                _this.fetchData()
+                            }
+                            if (response.data.code===401){
+                                _this.$message.warning('身份验证失败,请重新登录!')
+                            }
+                            if (response.data.code===403){
+                                const message = response.data.msg;
+                                this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
+                                    confirmButtonText: '确定'
+                                })
+                            }
+                        });
+                    }
+                    else if(_this.modelType===1){
+                        //提交修改员工表单
+                        //账号状态和身份转换为数据库存储格式
+                        let state;
+                        if(_this.dialogForm.staff_state) state=1;
+                        else state=0;
+
+                        axios({
+                            method: 'post',
+                            url: 'http://localhost:8181/staff/modify',
+                            headers: {
+                                Authorization: Cookie.get('token'),
+                                'Content-Type': 'application/json'
+                            },
+                            data:{
+                                staff_id:_this.dialogForm.staff_id,
+                                staff_name:_this.dialogForm.staff_name,
+                                staff_pwd:_this.dialogForm.staff_pwd,
+                                staff_full_name:_this.dialogForm.staff_full_name,
+                                staff_phone:_this.dialogForm.staff_phone,
+                                staff_role:_this.dialogForm.staff_role,
+                                staff_state:state,
+                                staff_pic:_this.dialogForm.staff_pic,
+                            }
+                        }).then(function (response){
+                            if (response.data.code===200) {
+                                //修改员工信息成功
+                                _this.$message.success('修改成功!')
+                                //再次获取数据以更新页面
+                                _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.handleClose();
+                }
+            })
+
+        },
+        //删除
+        handleDelete(row){
+            const _this = this;
+            this.$confirm('此操作将永久删除该员工信息, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //确认删除
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/staff/deletePer',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        staff_id:row.staff_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].staff_id
+                }
+
+                this.$confirm('此操作将永久删除员工信息, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    //确认删除
+                    axios({
+                        method: 'post',
+                        url: 'http://localhost:8181/staff/deleteMul',
+                        headers: {
+                            Authorization: Cookie.get('token'),
+                            'Content-Type': 'application/json'
+                        },
+                        data:{
+                            staff_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: '已取消删除'});
+                });
+            }
+
+        },
+        //dialog弹窗关闭时触发该方法
+        handleClose(){
+            this.$refs.dialogForm.resetFields()
+            //重置表单
+            this.dialogForm.staff_id = 1;
+            this.dialogForm.staff_name='';
+            this.dialogForm.staff_pwd='';
+            this.dialogForm.staff_full_name='';
+            this.dialogForm.staff_phone='';
+            this.dialogForm.staff_state=1;
+            this.dialogForm.staff_role=1;
+            this.dialogForm.staff_pic='';
+            this.fileList = []
+
+            this.dialogVisible = false;
+        },
+        //图片相关
+        handleExceed(files, fileList) {
+            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+        },
+        beforeRemove(file) {
+            return this.$confirm(`确定移除 ${ file.name }？`);
+        },
+        onSuccess(response){
+            if(response.code===200){
+                this.dialogForm.staff_pic = response.data.url;
+            }else if (response.code===401){
+                this.$message.warning('身份验证失败,请重新登录!')
+            }else if (response.code===403)
+            {
+                this.$alert("上传失败,具体原因如下:\n"+response.msg, '上传失败', {
+                    confirmButtonText: '确定'
+                })
+            }
+        },
+        onError(){
+            this.$alert("网络请求失败", '上传失败', {
+                confirmButtonText: '确定'
+            })
+        },
+    }
+}
+</script>
+<style>
+.tableTop{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0 20px 50px;
+}
+</style>