框架引入

李林

2023-12-23 5c5eccdb11df86dbd0200ffa316cddb7a671d839

框架引入

 src/App.vue

@@ -26,7 +26,7 @@
</script>
<style>
/* @import url("../static/img/alifont/iconfont.css"); */
@import url("//at.alicdn.com/t/c/font_4179845_pixkgb97c4p.css");
@import url("//at.alicdn.com/t/c/font_4379269_qfsjed5hzge.css");

* {
  margin: 0;
@@ -128,26 +128,30 @@
/* å…¨å±€è¡¨æ ¼æ ·å¼ */
.el-table th.el-table__cell,
.has-gutter .el-table__cell {
  background-color: #f0f1f5 !important;
  background-color: #F0F1F5 !important;
  color: #333;
}
.has-gutter .el-table__cell .cell {
  font-size: 16px;
  font-size: 14px !important;
  font-weight: 500;
}
.cell {
  color: rgb(51, 51, 51);
  padding-left: 17px !important;
  font-size: 14px;
  color: #333;
  padding: 0 17px !important;
  font-size: 12px;
}
.cell span {
  font-size: 14px;
  font-size: 12px;
  font-weight: 400;
}
.el-table .el-table__cell{
    padding: 0px 0;
}
.el-table th.el-table__cell > .cell {
  font-size: 16px;
  font-size: 14px;
  font-weight: 400;
  color: rgb(51, 51, 51);
  color: #333;
    padding: 6px 17px !important;
}
/* å…¨å±€åˆ†é¡µå™¨æ ·å¼ */
.el-pager .number {
@@ -159,9 +163,12 @@
  font-weight: 500;
}
.el-pager .number.active {
  background-color: #004ea2;
  background-color: #3A7BFA;
  color: #fff;
  border: 0;
}
.el-pager li.active+li{
    border-left: 10px !important;
}
/* å…¨å±€æ¨¡æ€æ¡†æ ·å¼ */
.el-dialog__header,.el-message-box__header {
@@ -177,7 +184,7 @@
  display: inline-block;
  width: 4px;
  height: 30.24px;
  background: rgb(0, 95, 201);
  background: #3A7BFA;
  border-radius: 10px;
  margin-left: 32px;
  margin-right: 8.5px;
@@ -188,7 +195,7 @@
  display: inline-block;
  width: 4px;
  height: 30.24px;
  background: rgb(0, 95, 201);
  background: #3A7BFA;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 8.5px;
@@ -208,8 +215,8 @@

.el-dialog__footer .el-button {
  height: 36px;
  border: 1px solid rgba(190, 190, 190, 0.44);
  box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
  /* border: 1px solid rgba(190, 190, 190, 0.44); */
  /* box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41); */
  padding: 0 14px;
}

@@ -236,6 +243,9 @@
  color: #666 !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}
.el-divider{
    margin: 5px 0;
}
/* å…¨å±€è¾“入框样式 */
/* å…¨å±€æŒ‰é’®æ ·å¼ */
</style>

 src/assets/api/controller.js

@@ -1,10 +1,26 @@
export default function(Vue) {
    //添加全局API
    Vue.prototype.$api = {
        login
        login,
        user,
        dataReporting
    }
}

const login = {
    enter: "/user/enter", //登录
}

const user = {
    selectUserList: "/user/selectUserList", //获取用户列表
    selectRoleList: "/role/selectRoleList", //获取角色列表
    updateUser: "/user/updateUser", //修改用户信息
    addUser: "/user/addUser", //添加用户信息
    selectRoleLists: "/role/selectRoleLists", //获取角色列表
    delRole: "/role/delRole", //添加用户信息
}

const dataReporting = {
    selectDataReportingList: "/dataReporting/selectDataReportingList", //获取数据上报列表
    upDataReporting: "/dataReporting/upDataReporting", //修改数据上报
}

 src/components/tool/value-table.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,422 @@
<style scoped>
    .value-table {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .table {
        width: 100%;
        height: calc(100% - 42px);
    }

    .page {
        width: 100%;
        height: 30px;
        text-align: right;
        margin-top: 10px;
    }
</style>

<template>
    <div class="value-table">
        <div class="table">
            <el-table ref="eltable" :data="tableData" style="width: 100%;" height="100%" tooltip-effect="dark" border
                @selection-change="selectChange" @select="select" v-loading="loading" @sort-change="sortChange"
                @row-click="rowClick">
                <el-table-column type="selection" width="50" v-if="data.showSelect">
                </el-table-column>
                <el-table-column align="center" type="index" label="序号" width="70" v-if="data.isIndex">
                </el-table-column>
                <el-table-column :prop="a.label" :label="a.value" sortable="custom" v-for="(a, ai) in tableHead" :key="ai"
                    show-overflow-tooltip min-width="145">
                    <template slot-scope="scope">
                        <div v-if="showType(a.label, data.tagField) != null">
                            <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == scope.row[a.label]"
                                :type="b.type" size="medium">{{b.label}}</el-tag>
                        </div>
                        <span v-else>{{scope.row[a.label]}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" :width="50 + data.do.length * 30"
                    v-if="data.do.length > 0">
                    <template slot-scope="scope">
                        <el-button v-for="(a, ai) in data.do" :key="ai" :type="a.type"
                            @click="main(scope.row, a)">{{a.font}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
                :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="编辑" :visible.sync="upDia" width="500px">
            <div class="body" v-if="upDia">
                <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
                    <el-col :span="5" style="text-align: right;">{{a.value}}：</el-col>
                    <el-col :span="17" :offset="1">
                        <el-input v-model="upData[a.label]" size="small" clearable
                            v-if="showType(a.label, data.tagField) == null"></el-input>
                        <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.tagField) != null"
                            style="width: 100%;">
                            <el-option v-for="(b, bi) in data.tagField[a.label].select" :key="bi" :value="b.value"
                                :label="b.label"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="saveUpData" :loading="upLoad">ç¡® å®š</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="addDia" width="500px">
            <div class="body" v-if="addDia">
                <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
                    <el-col :span="5" style="text-align: right;">{{a.value}}：</el-col>
                    <el-col :span="17" :offset="1">
                        <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
                            v-if="showType(a.label, data.tagField) == null"></el-input>
                        <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.tagField) != null"
                            style="width: 100%;" :placeholder="`请选择${a.value}`">
                            <el-option v-for="(b, bi) in data.tagField[a.label].select" :key="bi" :value="b.value"
                                :label="b.label"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDia = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="saveAddData" :loading="addLoad">ç¡® å®š</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        Page
    } from 'iview';
    export default {
        props: {
            url: {
                type: String,
                default: () => null
            },
            upUrl: {
                type: String,
                default: () => null
            },
            delUrl: {
                type: String,
                default: () => null
            },
            componentData: {
                type: Object,
                default: () => {
                    return {
                        entity: {
                            orderBy: {
                                field: 'id',
                                order: 'asc'
                            }
                        },
                        isIndex: true,
                        showSelect: true,
                        select: true,
                        do: [{
                            id: 'update',
                            font: '编辑',
                            type: 'text',
                            method: 'doDiy'
                        }, {
                            id: 'delete',
                            font: '删除',
                            type: 'text',
                            method: 'doDiy'
                        }],
                        doDiy: true,
                        tagField: [{
                            label: 'state',
                            select: [{
                                value: '1',
                                type: 'success',
                                label: '启用'
                            }, {
                                value: '0',
                                type: 'danger',
                                label: '停用'
                            }]
                        }]
                    }
                }
            }
        },
        data() {
            return {
                data: {
                    entity: {
                        orderBy: {
                            field: 'id',
                            order: 'asc'
                        }
                    },
                    isIndex: true,
                    showSelect: true,
                    select: true,
                    do: [{
                        font: '删除',
                        type: 'text'
                    }],
                    type: []
                },
                tableHead: [],
                tableData: [],
                multipleSelection: [],
                user: {},
                page: {
                    current: 1,
                    size: 20,
                },
                total: 0,
                loading: false,
                upDia: false,
                upData: {},
                upHead: [],
                upLoad: false,
                addDia: false,
                addUrl: null,
                addLoad: false,
                dataCopy: {}
            }
        },
        watch: {
            tableData: {
                deep: true,
                handler: function() {
                    this.$nextTick(() => {
                        this.$refs.eltable.doLayout()
                    })
                }
            }
        },
        mounted() {
            this.data = this.componentData
            this.dataCopy = this.HaveJson(this.componentData)
            this.selectList()
        },
        methods: {
            selectChange(val) {
                if (this.data.select) {
                    this.multipleSelection = val;
                } else {
                    this.multipleSelection = val[val.length - 1];
                }
            },
            select(val, row) {
                if (!this.data.select) {
                    this.$refs['eltable'].clearSelection()
                    this.$refs['eltable'].toggleRowSelection(row, true)
                }
            },
            rowClick(row, column, event) {
                if (this.data.select) {
                    this.$refs['eltable'].toggleRowSelection(row)
                } else {
                    this.$refs['eltable'].clearSelection()
                    this.$refs['eltable'].toggleRowSelection(row, true)
                }
            },
            sizeChange(val) {
                this.page.size = val
                this.selectList()
            },
            currentChange(val) {
                this.page.current = val
                this.selectList()
            },
            selectList() {
                this.loading = true
                this.$axios.post(this.url, {
                    page: this.page,
                    entity: this.data.entity
                }, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    if (res.code === 201) {
                        this.loading = false
                        return
                    }
                    this.total = res.data.body.total
                    this.tableHead = res.data.head
                    this.tableData = res.data.body.records
                    this.loading = false
                }).catch(e => {
                    this.loading = false
                    this.$message.error('请刷新页面再尝试')
                })
            },
            sortChange(ob) {
                this.data.entity.orderBy = {}
                this.data.entity.orderBy.field = ob.prop
                if (ob.order == 'ascending') {
                    this.data.entity.orderBy.order = 'asc'
                } else if (ob.order == 'descending') {
                    this.data.entity.orderBy.order = 'desc'
                } else {
                    if (this.componentData.entity.orderBy != undefined) {
                        this.data.entity.orderBy = this.HaveJson(this.dataCopy.entity.orderBy)
                    }
                }
                this.selectList()
            },
            showType(val, ob) {
                var str = ob[val]
                return str == undefined ? null : ob[val].select
            },
            main(row, val) {
                if (val.method == undefined) return
                else if (val.method == 'doDiy') {
                    if (val.id == 'update') {
                        this.upDia = true,
                            this.upData = this.HaveJson(row)
                        this.upHead = this.HaveJson(this.tableHead)
                        this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime')
                        delete this.upData.orderBy
                        delete this.upData.createTime
                        delete this.upData.updateTime
                        delete this.upData.createUser
                        delete this.upData.updateUser
                        val.field.forEach(a => {
                            if (this.upData[a] == undefined) {
                                this.upHead.push({
                                    value: a.split('=')[0],
                                    label: a.split('=')[1]
                                })
                            } else {
                                delete this.upData[a]
                                for (var i = 0; i < this.upHead.length; i++) {
                                    if (this.upHead[i].label == a) {
                                        this.upHead.splice(i, 1);
                                        i--
                                        break
                                    }
                                }
                            }
                        })
                    } else if (val.id == 'delete') {
                        if (this.delUrl == null) {
                            this.$message.error('请给删除请求地址')
                            return
                        }
                        this.$confirm('是否删除当前数据?', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.$axios.post(this.delUrl, {
                                id: row.id
                            }).then(res => {
                                if (res.code === 201) {
                                    return
                                }
                                this.$message.success('删除成功')
                                this.selectList()
                            }).catch(e => {
                                this.$message.error('删除失败')
                            })
                        }).catch(() => {})
                    }
                } else {
                    delete row.orderBy
                    this.$emit(val.method, row)
                }
            },
            saveUpData() {
                if (this.upUrl == null) {
                    this.$message.error('请给修改请求地址')
                    return
                }
                this.upLoad = true
                this.$axios.post(this.upUrl, this.upData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    if (res.code === 201) {
                        this.upLoad = false
                        return
                    }
                    this.$message.success('修改成功')
                    this.upDia = false
                    this.selectList()
                    this.upLoad = false
                }).catch(e => {
                    this.$message.error('修改失败')
                    this.upDia = false
                    this.upLoad = false
                })
            },
            openAddDia(addUrl) {
                this.addDia = true
                this.addUrl = addUrl
                this.upData = {}
                this.tableHead.forEach((k, v) => {
                    if (k.label != 'orderBy' && k.label != 'createTime' && k.label != 'updateTime' && k.label !=
                        'createUser' && k.label != 'updateUser')
                        this.upData[k.label] = null
                })
                this.upData = this.HaveJson(this.upData)
                this.upHead = this.HaveJson(this.tableHead)
                this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime')
                var val = this.data.do.filter(a => a.id == 'update')[0]
                val.field.forEach(a => {
                    if (JSON.stringify(this.upData[a]) == undefined) {
                        this.upHead.push({
                            value: a.split('=')[0],
                            label: a.split('=')[1]
                        })
                    } else {
                        delete this.upData[a]
                        for (var i = 0; i < this.upHead.length; i++) {
                            if (this.upHead[i].label == a) {
                                this.upHead.splice(i, 1);
                                i--
                                break
                            }
                        }
                    }
                })
            },
            saveAddData() {
                if (this.addUrl == null) {
                    this.$message.error('请给添加请求地址')
                    return
                }
                this.addLoad = true
                this.$axios.post(this.addUrl, this.upData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    if (res.code === 201) {
                        this.addLoad = false
                        return
                    }
                    this.$message.success('添加成功')
                    this.addDia = false
                    this.selectList()
                    this.addLoad = false
                }).catch(e => {
                    this.addDia = false
                    this.addLoad = false
                })
            }
        }
    }
</script>

 src/components/view/data-reporting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
<style scoped>
    .title {
        height: 60px;
        line-height: 60px;
    }

    .search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 350px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 110px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 110px);
    }

    .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
</style>
<style>
    .data_reporting .data_reporting_dia .el-dialog__body{
        padding: 15px 0;
    }
</style>

<template>
    <div class="data_reporting">
        <div>
            <el-row class="title">
                <el-col :span="12" style="padding-left: 20px;">数据上报</el-col>
                <el-col :span="12" style="text-align: right;padding-right: 8px;">
                    <el-button size="small" @click="">
                        <i class="el-icon-download" style="color: #3A7BFA;"></i>
                        <span style="color: #3A7BFA;">导出</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div class="search">
            <div class="search_thing">
                <div class="search_label">系统日期：</div>
                <div class="search_input">
                    <el-date-picker size="small" v-model="componentData.entity.updateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                </div>
            </div>
            <div class="search_thing">
                <div class="search_label">登记人：</div>
                <div class="search_input">
                    <el-input size="small" v-model="componentData.entity.registrant" clearable placeholder="登记人" @keyup.enter.native="refreshTable()"></el-input>
                </div>
            </div>
            <div class="search_thing">
                <div class="search_label">项目：</div>
                <div class="search_input">
                    <el-select size="small" style="width: 100%;" placeholder="请选择" v-model="componentData.entity.product">
                        <el-option :value="null" label="全部"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
        </div>
        <div class="table">
            <ValueTable ref="ValueTable" :url="$api.dataReporting.selectDataReportingList" :componentData="componentData"
                :key="upIndex" @upRole="upRole" />
        </div>
        <el-dialog title="上报修改" :visible.sync="upDia" width="700px" class="data_reporting_dia">
            <div class="body" v-if="upDia">
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">系统日期</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.updateTime" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">登记人</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.registrant" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">部门</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.department" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">账户名</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.name" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">渠道</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.channel" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">项目</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.product" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">展现量</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.show" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">点击量</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.click" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">账户消费</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.accountConsumption" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">客户返点消费</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.rebateConsumption" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">消费</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.consumption" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">折后消费</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.discountedConsumption" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">进粉</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.fansAdd" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">实际成本</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.actualCost" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">利润</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.profit" size="small" disabled></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">代理返点</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.agentRebate" size="small" disabled></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">内部成本</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.internalCosts" size="small"></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">客户成本</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.customerCosts" size="small"></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 50px;">
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">客户返点</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.customerRebate" size="small"></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;padding-right: 8px;">备用字段</el-col>
                    <el-col :span="7">
                        <el-input v-model="upData.remark" size="small"></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer" style="margin-right: 18px;">
                <el-button type="primary" @click="saveUpData" :loading="upLoad">ç¡® å®š</el-button>
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import ValueTable from '../tool/value-table.vue'
    export default {
        components: {
            ValueTable
        },
        data() {
            return {
                componentData: {
                    entity: {
                        updateTime: null,
                        registrant: null,
                        product: null,
                        orderBy: {
                            field: 'id',
                            order: 'desc'
                        }
                    },
                    isIndex: true,
                    showSelect: true,
                    select: true,
                    do: [{
                        font: '编辑',
                        type: 'text',
                        method: 'upRole'
                    }],
                    tagField: {}
                },
                entityCopy: {},
                upIndex: 0,
                addDia: false,
                upDia: false,
                upLoad: false,
                upData: {}
            }
        },
        mounted() {
            this.entityCopy = this.HaveJson(this.componentData.entity)
        },
        methods: {
            refreshTable() {
                this.$refs['ValueTable'].selectList()
            },
            refresh() {
                this.componentData.entity = this.HaveJson(this.entityCopy)
                this.upIndex++
            },
            upRole(row) {
                this.upData = this.HaveJson(row)
                this.upDia = true
            },
            saveUpData(){
                this.upLoad = true
                delete this.upData.createTime
                delete this.upData.updateTime
                delete this.upData.createUser
                delete this.upData.updateUser
                this.$axios.post(this.$api.dataReporting.upDataReporting, this.upData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res=>{
                    this.upLoad = false
                    if(res.code == 201){
                        return
                    }
                    this.$message.success('修改成功')
                    this.upDia = false
                    this.refreshTable()
                })
            }
        }
    }
</script>

 src/components/view/person-manage.vue

@@ -3,28 +3,36 @@
        height: 60px;
        line-height: 60px;
    }
	
    .search{

    .search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }
	
    .search_thing{

    .search_thing {
        width: 350px;
        display: flex;
        align-items: center;
    }
	
    .search_label{

    .search_label {
        width: 110px;
        font-size: 14px;
        text-align: right;
    }
	
    .search_input{

    .search_input {
        width: calc(100% - 110px);
    }

    .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
</style>

@@ -34,20 +42,21 @@
            <el-row class="title">
                <el-col :span="12" style="padding-left: 20px;">人员管理</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button size="medium" type="primary">新增人员</el-button>
                    <el-button size="medium" type="primary" @click="opeaAdd">新增人员</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="search">
            <div class="search_thing">
                <div class="search_label">客户名称：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="search.customer"></el-input></div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
            <div class="search_thing">
                <div class="search_label">账号状态：</div>
                <div class="search_input">
                    <el-select size="small" v-model="search.state" style="width: 100%;">
                        <el-option label="全部" :value="2"></el-option>
                    <el-select size="small" v-model="componentData.entity.state" style="width: 100%;">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
@@ -55,25 +64,100 @@
            </div>
            <div class="search_thing">
                <div class="search_label">公司名称：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="search.company"></el-input></div>
                <div class="search_input">
                    <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.company" @keyup.enter.native="refreshTable()"></el-input>
                </div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small">重 ç½®</el-button>
                <el-button size="small" type="primary">查 è¯¢</el-button>
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
        </div>
        <div class="table">
            <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/>
        </div>
    </div>
</template>

<script>
    export default{
    import ValueTable from '../tool/value-table.vue'
    export default {
        components: {
            ValueTable
        },
        data() {
            return{
                search: {
                    customer: null,
                    state: 2,
                    company: null
                }
            return {
                componentData: {
                    entity: {
                        name: null,
                        state: null,
                        company: null,
                        orderBy:{
                            field: 'id',
                            order: 'asc'
                        }
                    },
                    isIndex: false,
                    showSelect: true,
                    select: true,
                    do: [{
                        id: 'update',
                        font: '编辑',
                        type: 'text',
                        method: 'doDiy',
                        field:['createUserName','updateUserName','roleName','角色=roleId','密码=password']
                    }],
                    tagField: {
                        state: {
                            select: [{
                                value: 1,
                                type: 'success',
                                label: '启用'
                            },{
                                value: 0,
                                type: 'danger',
                                label: '停用'
                            }]
                        },
                        roleId: {
                            select: []
                        }
                    }
                },
                entityCopy: {},
                upIndex: 0,
                addDia: false
            }
        },
        mounted() {
            this.selectRole()
            this.entityCopy = this.HaveJson(this.componentData.entity)
        },
        methods: {
            refreshTable() {
                this.$refs['ValueTable'].selectList()
            },
            refresh() {
                this.componentData.entity = this.HaveJson(this.entityCopy)
                this.upIndex++
            },
            upUser(row){
                console.log(row);
            },
            selectRole(){
                this.$axios.get(this.$api.user.selectRoleList).then(res=>{
                    var str = []
                    res.data.forEach(a=>{
                        str.push({
                            label: a.name,
                            value: a.id
                        })
                    })
                    this.componentData.tagField.roleId.select = str
                })
            },
            opeaAdd(){
                this.$refs.ValueTable.openAddDia(this.$api.user.addUser);
            }
        }
    }

 src/components/view/role-manage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,129 @@
<style scoped>
    .title {
        height: 60px;
        line-height: 60px;
    }

    .search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 350px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 110px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 110px);
    }

    .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
</style>

<template>
    <div class="role_manage">
        <div>
            <el-row class="title">
                <el-col :span="12" style="padding-left: 20px;">角色管理</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button size="medium" type="primary" @click="opeaAdd">新增角色</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="search">
            <div class="search_thing">
                <div class="search_label">角色名称：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
        </div>
        <div class="table">
            <ValueTable ref="ValueTable" :url="$api.user.selectRoleLists" :delUrl="$api.user.delRole" :componentData="componentData" :key="upIndex"
                @upRole="upRole" @selectRole="selectRole"/>
        </div>
    </div>
</template>

<script>
    import ValueTable from '../tool/value-table.vue'
    export default {
        components: {
            ValueTable
        },
        data() {
            return {
                componentData: {
                    entity: {
                        name: null,
                        orderBy: {
                            field: 'id',
                            order: 'asc'
                        }
                    },
                    isIndex: true,
                    showSelect: true,
                    select: true,
                    do: [{
                        font: '编辑',
                        type: 'text',
                        method: 'upRole',
                    },{
                        id: 'delete',
                        font: '删除',
                        type: 'text',
                        method: 'doDiy',
                    },{
                        font: '查看',
                        type: 'text',
                        method: 'selectRole',
                    }],
                    tagField: {}
                },
                entityCopy: {},
                upIndex: 0,
                addDia: false
            }
        },
        mounted() {
            this.entityCopy = this.HaveJson(this.componentData.entity)
        },
        methods: {
            refreshTable() {
                this.$refs['ValueTable'].selectList()
            },
            refresh() {
                this.componentData.entity = this.HaveJson(this.entityCopy)
                this.upIndex++
            },
            upRole(row) {
                console.log(row);
            },
            selectRole(row){
                console.log(row);
            },
            opeaAdd() {

            }
        }
    }
</script>

 src/main.js

@@ -56,6 +56,9 @@
})

axios.interceptors.response.use(res => {
    if(res.data.code === 201){
        Message.error(res.data.message)
    }
    return res.data
}, async function(err) {
    if (JSON.stringify(err).indexOf('timeout of') > -1) {

 src/view/index.vue

@@ -62,6 +62,16 @@
        padding: 20px 0;
        transition: .3s;
        overflow-y: auto;
        user-select: none;
    }

    .left::-webkit-scrollbar {
        width: 0px;
    }

    .left::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 3px;
    }

    .left .box {
@@ -87,8 +97,8 @@
    }

    .left .box i {
        font-size: 32px;
        margin-bottom: 8px;
        font-size: 28px;
        margin-bottom: 4px;
    }

    .left .box div {
@@ -177,6 +187,10 @@
        user-select: none;
        flex-shrink: 0;
    }
	
    .tab:hover{
        color: #3A7BFA;
    }

    .tab i {
        font-size: 12px;
@@ -204,10 +218,36 @@
        width: 100%;
        height: 100%;
    }

    .right_key_menu {
        width: 120px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 999;
    }

    .right_key_menu li {
        list-style-type: none;
        padding: 5px 0;
        padding-left: 10px;
        font-size: 0.9rem;
        transition: .5s;
        cursor: pointer;
    }
	
    .right_key_menu li i{
        margin-right: 20px;
    }

    .right_key_menu li:hover {
        background-color: #dedede;
    }
</style>
<style></style>
<template>
    <div class="all">
    <div class="all" @click="closeRightKey">
        <div class="title">
            <div class="logo">
                <!-- <img src="../../static/img/logo 1.png" /> -->
@@ -244,7 +284,7 @@
                <i :class="`${leftOpen?'el-icon-s-unfold':'el-icon-s-fold'}`" @click="leftOpen = !leftOpen"></i>
                <div class="tabs">
                    <div :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" v-for="(a, ai) in tabs" :key="ai"
                        @click="upTabActive(a.k)">
                        @click="upTabActive(a.k)" @contextmenu.prevent="rightKeyMenu(ai, $event)">
                        {{ a.v }}
                        <i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive!=0"></i>
                    </div>
@@ -252,10 +292,22 @@
                <i class="el-icon-delete" @click="allDel" title="删除所有标签页"></i>
            </div>
            <div class="component_view">
                <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="upIndex + '|' + index"
                    v-show="com.k == tabActive">
                <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="index"
                    v-show="com.k == tabActive" :ref="`com-${com.k}`">
                </component>
            </div>
        </div>
        <!-- å³é”®èœå• -->
        <div class="right_key_menu">
            <el-col :span="24">
                <el-card :body-style="{padding: '6px 0'}">
                    <ul>
                        <li style="color: red;" @click="removeTab(activeIndex)"><i class="el-icon-close"></i>关闭</li>
                        <el-divider></el-divider>
                        <li @click="refreshTable"><i class="el-icon-refresh"></i>刷新</li>
                    </ul>
                </el-card>
            </el-col>
        </div>
    </div>
</template>
@@ -280,89 +332,93 @@
                menu: [{
                        k: 0,
                        v: "首页",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 0,
                            v: "首页",
                            i: "font icon-shouye",
                            i: "font icon-a-Group1124",
                            u: "index-index"
                        }]
                    },
                    {
                        k: 2,
                        v: "数据上报",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 2,
                            v: "数据上报",
                            i: "font icon-shouye",
                            u: "index-index"
                            i: "font icon-a-Group1124",
                            u: "data-reporting"
                        }]
                    },
                    {
                        k: 3,
                        v: "数据统计",
                        i: "font icon-shouye",
                        self: true,
                        i: "font icon-a-Group1124",
                        c: [{
                            k: 3,
                            v: "数据统计",
                            i: "font icon-shouye",
                            k: 9,
                            v: "项目数据统计",
                            i: "font icon-a-Group1124",
                            u: "index-index"
                        },{
                            k: 10,
                            v: "员工数据统计",
                            i: "font icon-a-Group1124",
                            u: "index-index"
                        }]
                    },
                    {
                        k: 5,
                        v: "进粉上报",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 5,
                            v: "进粉上报",
                            i: "font icon-shouye",
                            i: "font icon-a-Group1124",
                            u: "index-index"
                        }]
                    },
                    {
                        k: 6,
                        v: "财务上报",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 6,
                            v: "财务上报",
                            i: "font icon-shouye",
                            i: "font icon-a-Group1124",
                            u: "index-index"
                        }]
                    },
                    {
                        k: 7,
                        v: "角色管理",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 7,
                            v: "角色管理",
                            i: "font icon-shouye",
                            u: "index-index"
                            i: "font icon-a-Group1124",
                            u: "role-manage"
                        }]
                    },
                    {
                        k: 4,
                        v: "数据字典",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        c: [{
                                k: 4,
                                v: "客户管理",
                                i: "font icon-shouye",
                                i: "font icon-a-Group1124",
                                u: ""
                            },
                            {
                                k: 5,
                                v: "病种管理",
                                i: "font icon-shouye",
                                i: "font icon-a-Group1124",
                                u: ""
                            }
                        ]
@@ -370,12 +426,12 @@
                    {
                        k: 8,
                        v: "人员管理",
                        i: "font icon-shouye",
                        i: "font icon-a-Group1124",
                        self: true,
                        c: [{
                            k: 8,
                            v: "人员管理",
                            i: "font icon-shouye",
                            i: "font icon-a-Group1124",
                            u: "person-manage"
                        }]
                    }
@@ -386,10 +442,11 @@
                tabs: [{
                    k: 0,
                    v: "首页",
                    i: "font icon-shouye",
                    i: "font icon-a-Group1124",
                    u: "index-index"
                }],
                upIndex: 0
                upIndex: 0,
                activeIndex: 0
            };
        },
        created() {},
@@ -425,7 +482,7 @@
                this.tabs = [{
                    k: 0,
                    v: " é¦–页",
                    i: "font icon-shouye",
                    i: "font icon-a-Group1124",
                    u: "index-index"
                }]
            },
@@ -445,6 +502,31 @@
                sessionStorage.clear();
                localStorage.removeItem("autoenter");
                this.$router.push("/enter");
            },
            // å…³é—­å³é”®èœå•
            closeRightKey() {
                $('.right_key_menu').css({
                    'display': 'none'
                })
            },
            // å³é”®èœå•
            rightKeyMenu(id, e) {
                if (id == 0) return
                this.activeIndex = id
                var x = e.clientX + 'px'
                var y = e.clientY + 'px'
                $('.right_key_menu').css({
                    'top': y,
                    'left': x,
                    'display': 'block'
                })
            },
            // åˆ·æ–°è¡¨æ ¼å†…容
            refreshTable(){
                var thing = this.tabs.splice(this.activeIndex, 1)
                setTimeout(()=>{
                    this.tabs.splice(this.activeIndex, 0, thing[0])
                }, 0)
            }
        }
    };