完善页面功能
This commit is contained in:
TS-QD1
parent
a8fdf27a63
commit
1269f11f33
36
package-lock.json
generated
36
package-lock.json
generated
@ -14,7 +14,8 @@
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"naive-ui": "^2.34.3",
|
||||
"stylus": "^0.59.0",
|
||||
"vite": "^4.3.2"
|
||||
"vite": "^4.3.2",
|
||||
"vue-router": "^4.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -496,6 +497,12 @@
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
|
||||
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.47.tgz",
|
||||
@ -1028,6 +1035,18 @@
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
|
||||
"integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.4.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vueuc": {
|
||||
"version": "0.4.51",
|
||||
"resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.51.tgz",
|
||||
@ -1319,6 +1338,12 @@
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/devtools-api": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
|
||||
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.47.tgz",
|
||||
@ -1736,6 +1761,15 @@
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
|
||||
"integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.4.5"
|
||||
}
|
||||
},
|
||||
"vueuc": {
|
||||
"version": "0.4.51",
|
||||
"resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.51.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"naive-ui": "^2.34.3",
|
||||
"stylus": "^0.59.0",
|
||||
"vite": "^4.3.2"
|
||||
"vite": "^4.3.2",
|
||||
"vue-router": "^4.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
46
src/App.vue
46
src/App.vue
@ -1,18 +1,46 @@
|
||||
<template>
|
||||
<n-message-provider>
|
||||
<!-- <wgy /> -->
|
||||
<wgy-3/>
|
||||
<zf-ga/>
|
||||
<ddy/>
|
||||
<n-layout>
|
||||
<n-layout-header bordered>
|
||||
<n-space align="center" style="padding: 10px">
|
||||
<span>工作考核细则：</span>
|
||||
<n-button ghost @click="onWgyClick">街道社区4-5级网格</n-button>
|
||||
<n-button ghost @click="onDdyClick">区级与街道指挥调度中心（调度专管员）</n-button>
|
||||
<n-button ghost @click="onZfGAClick">执法局、公安分局</n-button>
|
||||
<n-button ghost @click="onWgy3Click">3 级网格长</n-button>
|
||||
<n-button ghost @click="onZnbmClick">其他职能部门</n-button>
|
||||
</n-space>
|
||||
</n-layout-header>
|
||||
<n-layout-content>
|
||||
<router-view></router-view>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
</n-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NMessageProvider } from 'naive-ui';
|
||||
import Wgy from './components/table/Wgy.vue';
|
||||
import Ddy from './components/table/Ddy.vue';
|
||||
import ZfGa from './components/table/ZfGa.vue';
|
||||
import Wgy3 from './components/table/Wgy3.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { NMessageProvider, NLayout, NLayoutHeader, NLayoutContent, NSpace, NButton} from 'naive-ui';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const onWgyClick = () => {
|
||||
router.push({ name: 'wgy' });
|
||||
}
|
||||
const onDdyClick = () => {
|
||||
router.push({ name: 'ddy' });
|
||||
}
|
||||
const onZfGAClick = () => {
|
||||
router.push({ name: 'zfga' });
|
||||
}
|
||||
const onWgy3Click = () => {
|
||||
router.push({ name: 'wgy3' });
|
||||
}
|
||||
const onZnbmClick = () => {
|
||||
router.push({ name: 'znbm' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<n-space class="container" vertical>
|
||||
<n-space justify="center">
|
||||
<h1>区级与街道指挥调度中心（调度专管员）网格化工作考核细则（以季度为考核周期）</h1>
|
||||
</n-space>
|
||||
<n-space class="search" vertical>
|
||||
<n-grid :cols="7" :x-gap="10">
|
||||
<n-grid-item>
|
||||
@ -80,6 +83,7 @@ export default {
|
||||
data() {
|
||||
let vueSelf = this;
|
||||
return {
|
||||
|
||||
search: {
|
||||
select: {
|
||||
street: {
|
||||
@ -416,7 +420,7 @@ export default {
|
||||
H: d.timeout,
|
||||
reasonH: d.reasonTimeout,
|
||||
I: d.others,
|
||||
reasonI: d. reasonOthers,
|
||||
reasonI: d.reasonOthers,
|
||||
J: d.orgEvalution,
|
||||
reasonJ: d.reasonOrgEvalution,
|
||||
K: d.totalScore,
|
||||
@ -425,16 +429,28 @@ export default {
|
||||
});
|
||||
}
|
||||
this.table.data = data;
|
||||
},
|
||||
resize() {
|
||||
let body = document.body;
|
||||
this.table.minHeight = body.clientHeight - 365;
|
||||
this.table.maxHeight = body.clientHeight - 365;
|
||||
this.table.scrollX = body.clientWidth;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let vueSelf = this;
|
||||
this.listTestData();
|
||||
vueSelf.listTestData();
|
||||
vueSelf.resize();
|
||||
window.onresize = this.resize;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
padding 10px
|
||||
padding 0 10px
|
||||
:deep(.score-plus)
|
||||
background-color yellow
|
||||
:deep(.score-minus)
|
||||
background-color red
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<n-space class="container" vertical>
|
||||
<n-space justify="center">
|
||||
<h1>街道社区4-5级网格工作考核细则（以季度为考核周期）</h1>
|
||||
</n-space>
|
||||
<n-space class="search" vertical>
|
||||
<n-grid :cols="7" :x-gap="10">
|
||||
<n-grid-item>
|
||||
@ -22,16 +25,8 @@
|
||||
:options="search.select.month.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-space style="height: 100%;" align="center">
|
||||
<n-radio :checked="search.radio.level.value === 4" value="4"
|
||||
@change="onSearchRadioLevelValueChange">
|
||||
4级网格员
|
||||
</n-radio>
|
||||
<n-radio :checked="search.radio.level.value === 5" value="5"
|
||||
@change="onSearchRadioLevelValueChange">
|
||||
5级网格员
|
||||
</n-radio>
|
||||
</n-space>
|
||||
<n-select placeholder="请选择网格员级别" v-model:value="search.select.wgy.value"
|
||||
:options="search.select.wgy.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-space>
|
||||
@ -124,11 +119,13 @@ export default {
|
||||
options: [
|
||||
{ label: '1月', value: '1' }
|
||||
]
|
||||
}
|
||||
},
|
||||
radio: {
|
||||
level: {
|
||||
value: 5,
|
||||
wgy: {
|
||||
value: 4,
|
||||
options: [
|
||||
{ label: '5级网格员', value: '5' },
|
||||
{ label: '4级网格员', value: '4' }
|
||||
]
|
||||
}
|
||||
},
|
||||
input: {
|
||||
@ -973,26 +970,28 @@ export default {
|
||||
});
|
||||
}
|
||||
this.table.data = data;
|
||||
},
|
||||
resize() {
|
||||
let body = document.body;
|
||||
this.table.minHeight = body.clientHeight - 408;
|
||||
this.table.maxHeight = body.clientHeight - 408;
|
||||
this.table.scrollX = body.clientWidth;
|
||||
}
|
||||
},
|
||||
computed() {
|
||||
},
|
||||
mounted() {
|
||||
let vueSelf = this;
|
||||
this.listTestData();
|
||||
setTimeout(() => {
|
||||
vueSelf.table.data[0].C = 300
|
||||
}, 1000)
|
||||
vueSelf.listTestData();
|
||||
vueSelf.resize();
|
||||
window.onresize = this.resize
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
.search
|
||||
padding 10px 10px 0 10px
|
||||
.body
|
||||
padding 0 10px 10px 10px
|
||||
padding 0 10px
|
||||
:deep(.score-plus)
|
||||
background-color yellow
|
||||
:deep(.score-minus)
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<n-space justify="center">
|
||||
<h1>级网格长网格化工作考核细则（以季度为考核周期）</h1>
|
||||
</n-space>
|
||||
<n-space class="container" vertical>
|
||||
<n-space class="search" vertical>
|
||||
<n-grid :cols="7" :x-gap="10">
|
||||
@ -75,6 +78,7 @@ export default {
|
||||
Scoring,
|
||||
},
|
||||
data() {
|
||||
let vueSelf = this;
|
||||
return {
|
||||
search: {
|
||||
select: {
|
||||
@ -204,17 +208,33 @@ export default {
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '不合格扣分',
|
||||
title: '未上报案件造成严重影响',
|
||||
key: 'J',
|
||||
keyName: 'unReportError',
|
||||
width: 60
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onUnReportErrorClick(row, index);
|
||||
}
|
||||
}, row.J);
|
||||
}
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '其它情况',
|
||||
key: 'K',
|
||||
keyName: 'others',
|
||||
width: 60
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onOthersClick(row, index);
|
||||
}
|
||||
}, row.K);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
@ -234,6 +254,12 @@ export default {
|
||||
keyName: 'quarter',
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onQuarterClick(row, index);
|
||||
}
|
||||
}, row.M);
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -295,14 +321,118 @@ export default {
|
||||
onScroingCloseClick() {
|
||||
this.modal.scoring.show = false;
|
||||
},
|
||||
// 未上报案件造成严重影响 -
|
||||
onUnReportErrorClick(row, index) {
|
||||
let unReportError = row.J;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'J';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = unReportError;
|
||||
this.modal.scoring.reason = row.reasonJ;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '未上报案件造成严重影响';
|
||||
},
|
||||
// 其它情况 -
|
||||
onOthersClick(row, index) {
|
||||
let others = row.K;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'K';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = others;
|
||||
this.modal.scoring.reason = row.reasonK;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '其它情况';
|
||||
},
|
||||
// 网格工作季度考核 +
|
||||
onQuarterClick(row, index) {
|
||||
let quarter = row.M;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'M';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = quarter;
|
||||
this.modal.scoring.reason = row.reasonM;
|
||||
this.modal.scoring.maxScore = 30;
|
||||
this.modal.scoring.minScore = 0;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '网格工作季度考核';
|
||||
},
|
||||
computeN(row) {
|
||||
return row.C - row.E + row.L + row.M
|
||||
},
|
||||
listTestData() {
|
||||
let data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
let d = {
|
||||
userId: 'userId',
|
||||
key: i + 1,
|
||||
name: i + 'name',
|
||||
signBaseScore: i,
|
||||
signUnPassCount: Math.floor(Math.random() * 100),
|
||||
signUnPassScore: 30,
|
||||
gridBaseScore: 2,
|
||||
gridUnPassCount: Math.floor(Math.random() * 10),
|
||||
gridUnPassScore: Math.floor(Math.random() * 10),
|
||||
unComplete: Math.floor(Math.random() * 10),
|
||||
unReportError: Math.floor(Math.random() * 10),
|
||||
reasonUnReportError: '',
|
||||
others: Math.floor(Math.random() * 10),
|
||||
reasonOthers: '',
|
||||
unComplete: Math.floor(Math.random() * 10),
|
||||
reasonUnComplete: '',
|
||||
quarter: Math.floor(Math.random() * 10),
|
||||
totalScore: Math.floor(Math.random() * 10),
|
||||
shouldPay: Math.floor(Math.random() * 10),
|
||||
actualPay: Math.floor(Math.random() * 10),
|
||||
}
|
||||
data.push({
|
||||
A: d.key,
|
||||
B: d.name,
|
||||
C: d.signBaseScore,
|
||||
D: d.signUnPassCount,
|
||||
E: d.signUnPassScore,
|
||||
F: d.gridBaseScore,
|
||||
G: d.gridUnPassCount,
|
||||
H: d.gridUnPassScore,
|
||||
I: d.unComplete,
|
||||
J: d.unReportError,
|
||||
reasonJ: d.reasonUnReportError,
|
||||
K: d.others,
|
||||
reasonJ: d.reasonOthers,
|
||||
L: d.unComplete,
|
||||
reasonJ: d.reasonUnComplete,
|
||||
M: d.quarter,
|
||||
N: d.totalScore,
|
||||
O: d.shouldPay,
|
||||
P: d.actualPay,
|
||||
});
|
||||
}
|
||||
this.table.data = data;
|
||||
},
|
||||
resize() {
|
||||
let body = document.body;
|
||||
this.table.minHeight = body.clientHeight - 355;
|
||||
this.table.maxHeight = body.clientHeight - 355;
|
||||
this.table.scrollX = body.clientWidth;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let vueSelf = this;
|
||||
vueSelf.listTestData();
|
||||
vueSelf.resize();
|
||||
window.onresize = this.resize
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
padding 10px
|
||||
padding 0 10px
|
||||
:deep(.score-plus)
|
||||
background-color yellow
|
||||
:deep(.score-minus)
|
||||
background-color red
|
||||
</style>
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<n-space justify="center">
|
||||
<h1>执法局、公安分局网格化工作考核细则（以季度为考核周期）</h1>
|
||||
</n-space>
|
||||
<n-space class="container" vertical>
|
||||
<n-space class="search" vertical>
|
||||
<n-grid :cols="7" :x-gap="10">
|
||||
@ -486,16 +489,28 @@ export default {
|
||||
});
|
||||
}
|
||||
this.table.data = data;
|
||||
},
|
||||
resize() {
|
||||
let body = document.body;
|
||||
this.table.minHeight = body.clientHeight - 379;
|
||||
this.table.maxHeight = body.clientHeight - 379;
|
||||
this.table.scrollX = body.clientWidth;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let vueSelf = this;
|
||||
vueSelf.listTestData();
|
||||
vueSelf.resize();
|
||||
window.onresize = this.resize
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
padding 10px
|
||||
padding 0 10px
|
||||
:deep(.score-plus)
|
||||
background-color yellow
|
||||
:deep(.score-minus)
|
||||
background-color red
|
||||
</style>
|
||||
460
src/components/table/Znbm.vue
Normal file
460
src/components/table/Znbm.vue
Normal file
@ -0,0 +1,460 @@
|
||||
<template>
|
||||
<n-space justify="center">
|
||||
<h1>其他职能部门网格化工作考核细则（以季度为考核周期）</h1>
|
||||
</n-space>
|
||||
<n-space class="container" vertical>
|
||||
<n-space class="search" vertical>
|
||||
<n-grid :cols="7" :x-gap="10">
|
||||
<n-grid-item>
|
||||
<n-select placeholder="请选择街道" v-model:value="search.select.street.value"
|
||||
:options="search.select.street.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-select placeholder="请选择社区" v-model:value="search.select.community.value"
|
||||
:options="search.select.community.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-input v-model:value="search.input.keywords" type="text" placeholder="姓名|手机号" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-select placeholder="请选择年份" v-model:value="search.select.year.value"
|
||||
:options="search.select.year.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-select placeholder="请选择月份" v-model:value="search.select.month.value"
|
||||
:options="search.select.month.options" :clearable="true" />
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-space>
|
||||
<n-button type="primary">搜索</n-button>
|
||||
<n-button type="info">导出</n-button>
|
||||
</n-space>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-space>
|
||||
<n-space class="body">
|
||||
<n-data-table size="small" :columns="table.columns" :data="table.data" :bordered="true" :single-line="false"
|
||||
:min-height="table.minHeight" :max-height="table.maxHeight" :scroll-x="table.scrollX" />
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-modal preset="dialog" style="width: 600px" :title="`【${modal.scoring.userName}】${modal.scoring.title}打分`"
|
||||
:show="modal.scoring.show" :show-icon="false" :mask-closable="true" :closable="false"
|
||||
:on-update-show="onScroingCloseClick">
|
||||
<scoring :row-key="modal.scoring.rowKey" :row-index="modal.scoring.rowIndex" :score="modal.scoring.score"
|
||||
:reason="modal.scoring.reason" :min-score="modal.scoring.minScore" :max-score="modal.scoring.maxScore"
|
||||
@confirm="onScroingConfimClick" />
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h } from 'vue';
|
||||
import {
|
||||
NSpace,
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NSelect,
|
||||
NRadio,
|
||||
NInput,
|
||||
NButton,
|
||||
NDataTable,
|
||||
NModal,
|
||||
} from 'naive-ui';
|
||||
import Scoring from '../common/Scoring.vue';
|
||||
|
||||
export default {
|
||||
name: 'Znbm',
|
||||
components: {
|
||||
NSpace,
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NSelect,
|
||||
NRadio,
|
||||
NInput,
|
||||
NButton,
|
||||
NDataTable,
|
||||
NModal,
|
||||
|
||||
Scoring,
|
||||
},
|
||||
data() {
|
||||
let vueSelf = this;
|
||||
return {
|
||||
search: {
|
||||
select: {
|
||||
street: {
|
||||
value: null,
|
||||
options: [
|
||||
{ label: '稀土路街道', value: 'xtl' }
|
||||
]
|
||||
},
|
||||
community: {
|
||||
value: null,
|
||||
options: [
|
||||
{ label: '社区', value: 'sq' }
|
||||
]
|
||||
},
|
||||
year: {
|
||||
value: null,
|
||||
options: [
|
||||
{ label: '2023年', value: '2023' }
|
||||
]
|
||||
},
|
||||
month: {
|
||||
value: null,
|
||||
options: [
|
||||
{ label: '1月', value: '1' }
|
||||
]
|
||||
}
|
||||
},
|
||||
radio: {
|
||||
level: {
|
||||
value: 5,
|
||||
}
|
||||
},
|
||||
input: {
|
||||
keywords: ''
|
||||
}
|
||||
},
|
||||
table: {
|
||||
minHeight: 300,
|
||||
maxHeight: 300,
|
||||
scrollX: 900,
|
||||
columns: [
|
||||
{
|
||||
align: 'center',
|
||||
title: '序号',
|
||||
key: 'A',
|
||||
keyName: 'key',
|
||||
fixed: 'left',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '姓名',
|
||||
key: 'B',
|
||||
keyName: 'name',
|
||||
fixed: 'left',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件受理数量',
|
||||
children: [
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件办理得分与奖励金额',
|
||||
children: [
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件总数',
|
||||
key: 'C',
|
||||
keyName: 'caseCount',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '办结并验收',
|
||||
key: 'D',
|
||||
keyName: 'handleCheck',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '办结未验收',
|
||||
key: 'E',
|
||||
keyName: 'handleUnCheck',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件积分奖励（元）',
|
||||
key: 'F',
|
||||
keyName: 'reward',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '得分',
|
||||
key: 'G',
|
||||
keyName: 'score',
|
||||
width: 60,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件受理数量及过程质量',
|
||||
children: [
|
||||
{
|
||||
align: 'center',
|
||||
title: '未在规定的时限内退单，影响处置时效',
|
||||
key: 'H',
|
||||
keyName: 'unBackError',
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onUnBackErrorClick(row, index);
|
||||
}
|
||||
}, row.H);
|
||||
}
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '自行上报案件没完成',
|
||||
key: 'I',
|
||||
keyName: 'selfReportUnComplete',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '自行上报案件没完成扣分',
|
||||
key: 'J',
|
||||
keyName: 'selfReportUnCompleteDeduct',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '其他情况',
|
||||
key: 'K',
|
||||
keyName: 'others',
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onOthersClick(row, index);
|
||||
}
|
||||
}, row.K);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '案件处置实效',
|
||||
children: [
|
||||
{
|
||||
align: 'center',
|
||||
title: '处理情况',
|
||||
key: 'L',
|
||||
keyName: 'handleResult',
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onHandleResultClick(row, index);
|
||||
}
|
||||
}, row.L);
|
||||
}
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '督察案件',
|
||||
key: 'M',
|
||||
keyName: 'superviseResult',
|
||||
width: 60,
|
||||
render(row, index) {
|
||||
return h('a', {
|
||||
href: 'javascript:void(0);',
|
||||
onClick() {
|
||||
vueSelf.onSuperviseResultClick(row, index);
|
||||
}
|
||||
}, row.M);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '总得分',
|
||||
key: 'N',
|
||||
keyName: 'totalScore',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render(row, index) {
|
||||
return vueSelf.computeN(row);
|
||||
}
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '应发绩效工资',
|
||||
key: 'O',
|
||||
keyName: 'shouldPay',
|
||||
fixed: 'right',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
title: '实发绩效工资',
|
||||
key: 'P',
|
||||
keyName: 'actualPay',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render(row, index) {
|
||||
return vueSelf.computeN(row) * row.O / 100;
|
||||
}
|
||||
}
|
||||
],
|
||||
data: []
|
||||
},
|
||||
modal: {
|
||||
scoring: {
|
||||
show: false,
|
||||
userName: null,
|
||||
title: null,
|
||||
rowKey: null,
|
||||
rowIndex: null,
|
||||
score: 0,
|
||||
reason: '',
|
||||
minScore: null,
|
||||
maxScore: null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打分确定
|
||||
onScroingConfimClick(key, index, { score, reason, userId, userName, date }) {
|
||||
this.modal.scoring.show = false;
|
||||
this.table.data[index][key] = score;
|
||||
this.table.data[index][`reason${key}`] = reason;
|
||||
},
|
||||
// 打分关闭
|
||||
onScroingCloseClick() {
|
||||
this.modal.scoring.show = false;
|
||||
},
|
||||
// 未在规定的时限内退单，影响处置时效 -
|
||||
onUnBackErrorClick(row, index) {
|
||||
let unBackError = row.H;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'J';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = unBackError;
|
||||
this.modal.scoring.reason = row.reasonH;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '未在规定的时限内退单，影响处置时效';
|
||||
},
|
||||
// 自行上报案件没完成扣分 -
|
||||
onOthersClick(row, index) {
|
||||
let handleResult = row.K;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'K';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = handleResult;
|
||||
this.modal.scoring.reason = row.reasonK;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '自行上报案件没完成扣分';
|
||||
},
|
||||
// 处理情况 -
|
||||
onHandleResultClick(row, index) {
|
||||
let others = row.L;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'L';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = others;
|
||||
this.modal.scoring.reason = row.reasonL;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '处理情况';
|
||||
},
|
||||
// 督察案件 -
|
||||
onSuperviseResultClick(row, index) {
|
||||
let superviseResult = row.M;
|
||||
this.modal.scoring.show = true;
|
||||
this.modal.scoring.rowKey = 'M';
|
||||
this.modal.scoring.rowIndex = index;
|
||||
this.modal.scoring.score = superviseResult;
|
||||
this.modal.scoring.reason = row.reasonM;
|
||||
this.modal.scoring.maxScore = null;
|
||||
this.modal.scoring.minScore = null;
|
||||
this.modal.scoring.userName = row.B;
|
||||
this.modal.scoring.title = '督察案件';
|
||||
},
|
||||
computeN(row) {
|
||||
return row.G - row.H - row.J - row.K + row.L + row.M;
|
||||
},
|
||||
listTestData() {
|
||||
let data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
let d = {
|
||||
userId: 'userId',
|
||||
key: i + 1,
|
||||
name: i + 'name',
|
||||
caseCount: i,
|
||||
handleCheck: Math.floor(Math.random() * 100),
|
||||
handleUnCheck: 30,
|
||||
reward: 2,
|
||||
unBackError: Math.floor(Math.random() * 10),
|
||||
reasonUnBackError: '',
|
||||
selfReportUnComplete: Math.floor(Math.random() * 10),
|
||||
selfReportUnCompleteDeduct: Math.floor(Math.random() * 10),
|
||||
others: Math.floor(Math.random() * 10),
|
||||
reasonOthers: '',
|
||||
handleResult: Math.floor(Math.random() * 10),
|
||||
reasonHandleResult: '',
|
||||
superviseResult: Math.floor(Math.random() * 10),
|
||||
reasonSuperviseResult: '',
|
||||
totalScore: Math.floor(Math.random() * 10),
|
||||
shouldPay: Math.floor(Math.random() * 10),
|
||||
actualPay: Math.floor(Math.random() * 10),
|
||||
}
|
||||
data.push({
|
||||
A: d.key,
|
||||
B: d.name,
|
||||
C: d.caseCount,
|
||||
D: d.handleCheck,
|
||||
E: d.handleUnCheck,
|
||||
F: d.reward,
|
||||
G: d.unBackError,
|
||||
reasonG: d.reasonUnBackError,
|
||||
H: d.selfReportUnComplete,
|
||||
I: d.selfReportUnCompleteDeduct,
|
||||
J: d.others,
|
||||
reasonJ: d.reasonOthers,
|
||||
K: d.handleResult,
|
||||
reasonJ: d.reasonHandleResult,
|
||||
L: d.superviseResult,
|
||||
reasonJ: d.reasonSuperviseResult,
|
||||
M: d.superviseResult,
|
||||
reasonM: d.reasonSuperviseResult,
|
||||
N: d.totalScore,
|
||||
O: d.shouldPay,
|
||||
P: d.actualPay,
|
||||
});
|
||||
}
|
||||
this.table.data = data;
|
||||
},
|
||||
resize() {
|
||||
let body = document.body;
|
||||
this.table.minHeight = body.clientHeight - 378;
|
||||
this.table.maxHeight = body.clientHeight - 378;
|
||||
this.table.scrollX = body.clientWidth;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let vueSelf = this;
|
||||
vueSelf.listTestData();
|
||||
vueSelf.resize();
|
||||
window.onresize = this.resize
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
padding 0 10px
|
||||
:deep(.score-plus)
|
||||
background-color yellow
|
||||
:deep(.score-minus)
|
||||
background-color red
|
||||
</style>
|
||||
22
src/main.js
22
src/main.js
@ -1,5 +1,25 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import Wgy from './components/table/Wgy.vue';
|
||||
import Ddy from './components/table/Ddy.vue';
|
||||
import ZfGa from './components/table/ZfGa.vue';
|
||||
import Wgy3 from './components/table/Wgy3.vue';
|
||||
import Znbm from './components/table/Znbm.vue';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{ name: 'wgy', path: '/', component: Wgy },
|
||||
{ name: 'ddy', path: '/ddy', component: Ddy },
|
||||
{ name: 'zfga', path: '/zfga', component: ZfGa },
|
||||
{ name: 'wgy3', path: '/wgy3', component: Wgy3 },
|
||||
{ name: 'znbm', path: '/znbm', component: Znbm },
|
||||
]
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user