From 5c5eccdb11df86dbd0200ffa316cddb7a671d839 Mon Sep 17 00:00:00 2001
From: 李林 <z1292839451@163.com>
Date: 星期六, 23 十二月 2023 23:11:26 +0800
Subject: [PATCH] 框架引入
---
src/components/tool/value-table.vue | 422 +++++++++++++++++++++
src/components/view/role-manage.vue | 129 ++++++
src/main.js | 3
src/App.vue | 38 +
src/components/view/person-manage.vue | 128 +++++-
src/components/view/data-reporting.vue | 271 +++++++++++++
src/view/index.vue | 144 +++++-
src/assets/api/controller.js | 18
8 files changed, 1,085 insertions(+), 68 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index d1dc40c..2b8184b 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/api/controller.js b/src/assets/api/controller.js
index 7c468f6..73c0d20 100644
--- a/src/assets/api/controller.js
+++ b/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", //淇敼鏁版嵁涓婃姤
}
\ No newline at end of file
diff --git a/src/components/tool/value-table.vue b/src/components/tool/value-table.vue
new file mode 100644
index 0000000..2d1868f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/view/data-reporting.vue b/src/components/view/data-reporting.vue
new file mode 100644
index 0000000..5708237
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/view/person-manage.vue b/src/components/view/person-manage.vue
index 289d313..89674b0 100644
--- a/src/components/view/person-manage.vue
+++ b/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);
}
}
}
diff --git a/src/components/view/role-manage.vue b/src/components/view/role-manage.vue
new file mode 100644
index 0000000..03dd0f3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a66b6be..e495279 100644
--- a/src/main.js
+++ b/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) {
diff --git a/src/view/index.vue b/src/view/index.vue
index 4ba58ec..342b566 100644
--- a/src/view/index.vue
+++ b/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)
}
}
};
--
Gitblit v1.9.3