Commit 20bfc39e authored by 赵啸非's avatar 赵啸非

Merge remote-tracking branch 'origin/master'

parents c8f17197 b19f6f2a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
NODE_ENV = production NODE_ENV = production
# 地址 # 地址
VUE_APP_BASE_API = VUE_APP_API_BASE_URL =http://112.19.80.237:11039
# websocket地址 # websocket地址
VUE_APP_WEBSOCKET_API = VUE_APP_WEBSOCKET_API =
......
...@@ -6442,9 +6442,8 @@ ...@@ -6442,9 +6442,8 @@
}, },
"node_modules/echarts": { "node_modules/echarts": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz", "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"license": "Apache-2.0",
"dependencies": { "dependencies": {
"zrender": "4.3.2" "zrender": "4.3.2"
} }
...@@ -22404,8 +22403,8 @@ ...@@ -22404,8 +22403,8 @@
}, },
"echarts": { "echarts": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz", "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": { "requires": {
"zrender": "4.3.2" "zrender": "4.3.2"
} }
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"test": "vue-cli-service build --mode test", "test": "vue-cli-service build --mode test",
......
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -72 -264 )">
<path d="M 81 268.5 C 83.52 268.5 85.5 270.48 85.5 273 C 85.5 275.52 83.52 277.5 81 277.5 C 78.48 277.5 76.5 275.52 76.5 273 C 76.5 270.48 78.48 268.5 81 268.5 Z " fill-rule="nonzero" fill="#3377ff" stroke="none" />
<path d="M 81 266.5 C 84.64 266.5 87.5 269.36 87.5 273 C 87.5 276.64 84.64 279.5 81 279.5 C 77.36 279.5 74.5 276.64 74.5 273 C 74.5 269.36 77.36 266.5 81 266.5 Z " stroke-width="5" stroke="#3377ff" fill="none" stroke-opacity="0.247058823529412" />
</g>
</svg>
\ No newline at end of file
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
box-sizing: border-box;
}
html * {
outline: 0;
box-sizing: inherit;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
height: 100%;
min-height: 100%;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
}
body {
overflow-y: scroll;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
input,
select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
del {
text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
q:before,
q:after {
content: "";
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
.mt20 {
margin-top: 20px;
}
.mt10 {
margin-top: 10px;
}
.ml10 {
margin-left: 10px;
}
.ml20 {
margin-left: 20px;
}
ins,
a {
text-decoration: none;
cursor: pointer;
}
/* ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-v {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex_warp {
flex-wrap: wrap;
}
.flex_end {
justify-content: flex-end;
}
.clearfix:after {
content: "";
display: table;
clear: both;
font-size: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
.disabled {
pointer-events: none;
}
#app,
.pages {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
[v-cloak] {
display: none;
}
[disabled] {
pointer-events: none;
}
.el-dialog .el-checkbox-group .el-checkbox {
margin: 5px 0;
width: 33.33%;
}
.el-dialog .el-checkbox-group .pointBox {
width: 50%;
}
.el-table th {
user-select: all;
}
.el-progress-bar {
padding-right: 70px;
margin-right: -70px;
}
#operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important;
width: 100%;
}
#operatorUserCabinCheckBox .el-checkbox__label {
display: inline;
}
.page-statistics .chart {
margin-bottom: 80px;
border: 1px solid #ededed;
height: 400px;
}
.page-statistics .el-table th.color-gray,
.page-statistics .el-table tr.color-gray {
background-color: #f0f9eb;
}
@media screen and (max-width: 800px) {
.page {
margin: 5px 5px;
}
.el-dialog {
width: 98% !important;
}
.el-dialog .el-checkbox-group .el-checkbox {
margin: 5px 0;
width: 50%;
font-size: 12px;
}
.el-dialog .el-checkbox-group .el-checkbox .el-checkbox__label {
font-size: 12px;
}
}
.mobile-table-card {
margin: 10px auto;
padding: 10px;
box-shadow: 0 0 5px #ccc;
}
.mobile-table-card .mobile-table-cell {
padding: 5px 0;
border-bottom: 1px dotted #eee;
}
.mobile-table-card .mobile-table-cell .cell-title {
font-size: 13px;
color: #666;
}
.mobile-table-card .mobile-table-cell .cell-content {
padding-left: 5px;
text-align: right;
word-break: break-word;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
html * { html * {
outline: 0; outline: 0;
box-sizing: inherit; box-sizing: inherit;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
html,body { html,
height: 100%; body {
height: 100%;
min-height: 100%; min-height: 100%;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
sans-serif;
} }
body { body {
overflow-y: scroll; overflow-y: scroll;
} }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { body,
margin: 0; div,
padding: 0 dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
} }
input,select,textarea,button { input,
font-size: 100%; select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none; -webkit-appearance: none;
border:0; border: 0;
outline: 0; outline: 0;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0 border-spacing: 0;
} }
fieldset,img { fieldset,
border: 0 img {
border: 0;
} }
abbr,acronym { abbr,
border: 0; acronym {
font-variant: normal border: 0;
font-variant: normal;
} }
del { del {
text-decoration: line-through text-decoration: line-through;
} }
address,caption,cite,code,dfn,em,th,var { address,
font-style: normal; caption,
font-weight: 500 cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
} }
ol,ul { ol,
list-style: none ul {
list-style: none;
} }
caption,th { caption,
text-align: left th {
text-align: left;
} }
// h1,h2,h3,h4,h5,h6 { // h1,h2,h3,h4,h5,h6 {
...@@ -67,39 +120,42 @@ caption,th { ...@@ -67,39 +120,42 @@ caption,th {
// font-weight: 500 // font-weight: 500
// } // }
q:before,q:after { q:before,
content: '' q:after {
content: "";
} }
sub,sup { sub,
font-size: 75%; sup {
line-height: 0; font-size: 75%;
position: relative; line-height: 0;
vertical-align: baseline position: relative;
vertical-align: baseline;
} }
sup { sup {
top: -.5em top: -0.5em;
} }
sub { sub {
bottom: -.25em bottom: -0.25em;
} }
.mt20{ .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mt10{ .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.ml10{ .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.ml20{ .ml20 {
margin-left: 20px; margin-left: 20px;
} }
ins,a { ins,
text-decoration: none; a {
cursor: pointer; text-decoration: none;
cursor: pointer;
} }
/* ============================================================ /* ============================================================
flex:定义布局为盒模型 flex:定义布局为盒模型
...@@ -110,39 +166,78 @@ ins,a { ...@@ -110,39 +166,78 @@ ins,a {
flex-pack-justify:子元素两端对齐 flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+ 兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */ ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex {
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} display: -webkit-box;
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} display: -webkit-flex;
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} display: -ms-flexbox;
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} display: flex;
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;} }
.flex_warp{flex-wrap: wrap;} .flex-v {
.flex_end{ -webkit-box-orient: vertical;
justify-content: flex-end; -webkit-flex-direction: column;
} -ms-flex-direction: column;
.clearfix{ flex-direction: column;
&:after{ }
content: ''; .flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex_warp {
flex-wrap: wrap;
}
.flex_end {
justify-content: flex-end;
}
.clearfix {
&:after {
content: "";
display: table; display: table;
clear: both; clear: both;
font-size: 0; font-size: 0;
} }
} }
.fl{float: left}; .fl {
.fr{float: right}; float: left;
.hide{display: none;}
.disabled{
pointer-events: none;
} }
.fr {
#app,.pages{ float: right;
.flex; }
.flex-v; .hide {
height: 100%; display: none;
}
.disabled {
pointer-events: none;
} }
#app,
.pages {
.flex;
.flex-v;
height: 100%;
overflow: hidden;
}
.ellipsis{ .ellipsis {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -151,90 +246,89 @@ ins,a { ...@@ -151,90 +246,89 @@ ins,a {
display: none; display: none;
} }
[disabled] { [disabled] {
pointer-events: none; pointer-events: none;
} }
.el-dialog{ .el-dialog {
.el-checkbox-group{ .el-checkbox-group {
.el-checkbox{ .el-checkbox {
margin: 5px 0; margin: 5px 0;
width: 33.33%; width: 33.33%;
} }
.pointBox{ .pointBox {
width: 50%; width: 50%;
} }
} }
} }
.el-table th { .el-table th {
user-select: all; user-select: all;
} }
.el-progress-bar{ .el-progress-bar {
padding-right: 70px; padding-right: 70px;
margin-right: -70px; margin-right: -70px;
} }
#operatorUserCabinCheckBox .el-checkbox{ #operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important; white-space: normal !important;
width: 100% width: 100%;
} }
#operatorUserCabinCheckBox .el-checkbox__label{ #operatorUserCabinCheckBox .el-checkbox__label {
display: inline; display: inline;
} }
// 统计页面隔日期变色 // 统计页面隔日期变色
.page-statistics{ .page-statistics {
.chart{ .chart {
margin-bottom: 80px; margin-bottom: 80px;
border: 1px solid #ededed; border: 1px solid #ededed;
height: 400px; height: 400px;
} }
.el-table th, .el-table tr{ .el-table th,
&.color-gray{ .el-table tr {
&.color-gray {
background-color: #f0f9eb; background-color: #f0f9eb;
} }
} }
} }
@media screen and (max-width: 800px) {
.page {
@media screen and (max-width: 800px){ margin: 5px 5px;
.page{ }
margin: 5px 5px; .el-dialog {
} width: 98% !important;
.el-dialog{ .el-checkbox-group {
width: 98%!important; .el-checkbox {
.el-checkbox-group{ margin: 5px 0;
.el-checkbox{ width: 50%;
margin: 5px 0; font-size: 12px;
width: 50%; .el-checkbox__label {
font-size: 12px; font-size: 12px;
.el-checkbox__label{ }
font-size: 12px; }
} }
} }
}
}
} }
// .is-active{ // .is-active{
// background-color: red; // background-color: red;
// } // }
.mobile-table-card{ .mobile-table-card {
margin: 10px auto; margin: 10px auto;
padding: 10px; padding: 10px;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc;
.mobile-table-cell{ .mobile-table-cell {
padding: 5px 0; padding: 5px 0;
border-bottom: 1px dotted #eee; border-bottom: 1px dotted #eee;
.cell-title{ .cell-title {
font-size: 13px; font-size: 13px;
color: #666; color: #666;
} }
.cell-content{ .cell-content {
padding-left: 5px; padding-left: 5px;
text-align: right; text-align: right;
word-break: break-word; word-break: break-word;
} }
} }
} }
\ No newline at end of file
...@@ -8,15 +8,13 @@ export default { ...@@ -8,15 +8,13 @@ export default {
methods: { methods: {
// 渲染前置处理 // 渲染前置处理
beforeRender(data) { beforeRender(data) {
return data return data;
}, },
// 渲染后置处理 // 渲染后置处理
afterRender(data) { afterRender(data) {},
},
// 提交表单的前置处理 // 提交表单的前置处理
beforeSubmit(data) { beforeSubmit(data) {
return data return data;
}, },
// 提交表单的后置处理, 会阻断默认的回退行为 // 提交表单的后置处理, 会阻断默认的回退行为
afterSubmit(data) { afterSubmit(data) {
...@@ -39,16 +37,16 @@ export default { ...@@ -39,16 +37,16 @@ export default {
// 部门格式化处理 // 部门格式化处理
this.afterRender(res); this.afterRender(res);
}) })
.catch(error => { .catch((error) => {
console.error(error) console.error(error);
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 300); }, 300);
}) });
}, },
// 提交表单 // 提交表单
submitForm(ref) { submitForm(ref) {
...@@ -56,73 +54,82 @@ export default { ...@@ -56,73 +54,82 @@ export default {
el.validate((valid) => { el.validate((valid) => {
if (!valid) return; if (!valid) return;
this.loading = true; this.loading = true;
console.log('提交了') console.log("提交了");
this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, this.$post(
this.beforeSubmit(this.form) this.urls.saveUrl || this.pageInfo.saveUrl,
this.beforeSubmit(this.form)
) )
.then(res => { .then((res) => {
this.$message.success(res.msg); this.$message.success(res.msg);
this.afterSubmit(res); this.afterSubmit(res);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 200); }, 200);
}) });
}); });
}, },
// 复制一个数组或对象 // 复制一个数组或对象
util_copy(data) { util_copy(data) {
return JSON.parse(JSON.stringify(data)) return JSON.parse(JSON.stringify(data));
}, },
// 工具方法,把数字转化为字符串 // 工具方法,把数字转化为字符串
util_toString(data, array) { util_toString(data, array) {
//原始数据 //原始数据
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
//如果相等做操作 //如果相等做操作
dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + ''; dataCopy[item] =
}) dataCopy[item] === undefined ? "" : dataCopy[item] + "";
});
return dataCopy; return dataCopy;
}, },
// 工具方法,把字符串转化为数组 // 工具方法,把字符串转化为数组
util_toArrays(data, array) { util_toArrays(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(","); dataCopy[item] =
}) dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
});
return dataCopy; return dataCopy;
}, },
// 工具方法,把字符串转化为格式化日期 // 工具方法,把字符串转化为格式化日期
util_toDateStr(data, array) { util_toDateStr(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]); dataCopy[item] =
}) dataCopy[item] === undefined
? ""
: this.util_formatterDate(dataCopy[item]);
});
return dataCopy; return dataCopy;
}, },
util_formatterDate(time) { util_formatterDate(time) {
let date = new Date(Number(time)); let date = new Date(Number(time));
let Y = date.getFullYear() + '-'; let Y = date.getFullYear() + "-";
let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; let M =
let D = this.panLeft(date.getDate()) + ' '; (date.getMonth() + 1 < 10
let h = this.panLeft(date.getHours()) + ':'; ? "0" + (date.getMonth() + 1)
let m = this.panLeft(date.getMinutes()) + ':'; : date.getMonth() + 1) + "-";
let D = this.panLeft(date.getDate()) + " ";
let h = this.panLeft(date.getHours()) + ":";
let m = this.panLeft(date.getMinutes()) + ":";
let s = this.panLeft(date.getSeconds()); let s = this.panLeft(date.getSeconds());
return Y+M+D+h+m+s; return Y + M + D + h + m + s;
}, },
panLeft(num){ panLeft(num) {
return num < 10 ? '0'+num : num; return num < 10 ? "0" + num : num;
}, },
// 从dict字段暴力取值,取不到则返回原值 // 从dict字段暴力取值,取不到则返回原值
util_formatter(key, val) { util_formatter(key, val) {
try { try {
return this.dict[key][val] return this.dict[key][val];
} catch (error) { } catch (error) {
return val; return val;
} }
...@@ -135,24 +142,24 @@ export default { ...@@ -135,24 +142,24 @@ export default {
} }
}); });
}, 0); }, 0);
} },
}, },
computed: { computed: {
pageInfo() { pageInfo() {
let currUrl = this.$route.path; let currUrl = this.$route.path;
let urlArray = currUrl.split('/'); let urlArray = currUrl.split("/");
let type = urlArray.pop(); let type = urlArray.pop();
urlArray.push('save'); urlArray.push("save");
let saveUrl = urlArray.join('/'); let saveUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('edit'); urlArray.push("edit");
let editUrl = urlArray.join('/'); let editUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('add'); urlArray.push("add");
let addUrl = urlArray.join('/'); let addUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('view'); urlArray.push("view");
let viewUrl = urlArray.join('/'); let viewUrl = urlArray.join("/");
return { return {
type, type,
currUrl, currUrl,
...@@ -176,9 +183,6 @@ export default { ...@@ -176,9 +183,6 @@ export default {
toString: [], // 需要把number转化为string的表单字段name数组 toString: [], // 需要把number转化为string的表单字段name数组
toArrays: [], // 需要把number转化为arrays的表单字段name数组 toArrays: [], // 需要把number转化为arrays的表单字段name数组
toDate: [], // 需要把number转化为date的表单字段name数组 toDate: [], // 需要把number转化为date的表单字段name数组
} };
} },
} };
export default { export default {
created() { created() {
// this.getData(); // this.getData();
}, },
beforeDestroy() { beforeDestroy() {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
...@@ -8,29 +8,27 @@ export default { ...@@ -8,29 +8,27 @@ export default {
methods: { methods: {
// 渲染前置处理 // 渲染前置处理
beforeRender(data) { beforeRender(data) {
return data return data;
}, },
// 渲染后置处理 // 渲染后置处理
afterRender(data) { afterRender(data) {},
},
// 提交表单的前置处理 // 提交表单的前置处理
beforeSubmit(data) { beforeSubmit(data) {
return data return data;
}, },
// 提交表单的后置处理, 会阻断默认的回退行为 // 提交表单的后置处理, 会阻断默认的回退行为
afterSubmit(data) { afterSubmit(data) {
this.$router.go(-1); this.$router.go(-1);
}, },
// 开启、关闭 // 开启、关闭
changePath(path) { changePath(path) {
this.pageInfo.list = path + "/list"; this.pageInfo.list = path + "/list";
this.pageInfo.del = path + "/delete"; this.pageInfo.del = path + "/delete";
this.pageInfo.add = path + "/add"; this.pageInfo.add = path + "/add";
this.pageInfo.edit = path + "/edit"; this.pageInfo.edit = path + "/edit";
this.pageInfo.view = path + "/view"; this.pageInfo.view = path + "/view";
}, },
// 默认拉取数据 // 默认拉取数据
getData() { getData() {
...@@ -48,87 +46,101 @@ export default { ...@@ -48,87 +46,101 @@ export default {
this.dict = Object.assign({}, this.dict, res.dict); this.dict = Object.assign({}, this.dict, res.dict);
this.afterRender(res); this.afterRender(res);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message) this.$message.error(error.message);
throw error throw error;
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 300); }, 300);
}) });
}, },
// 提交表单 // 提交表单
submitForm(ref) { submitForm(ref) {
let url = this.urls.saveUrl || this.pageInfo.saveUrl;
if (url == "/staff/perform/stat/save") {
url = "/perform/perpose/save";
} else if (url == "/perform/rules/attend/save") {
url = "/perform/rules/category/save";
}
const el = this.$refs.form; const el = this.$refs.form;
el.validate((valid) => { el.validate((valid) => {
if (!valid) return; if (!valid) return;
this.loading = true; this.loading = true;
this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, this.beforeSubmit(this.form)) this.$post(url, this.beforeSubmit(this.form))
.then(res => { .then((res) => {
this.$message.success(res.msg); this.$message.success(res.msg);
this.afterSubmit(res); this.afterSubmit(res);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 200); }, 200);
}) });
}); });
}, },
// 复制一个数组或对象 // 复制一个数组或对象
util_copy(data) { util_copy(data) {
return JSON.parse(JSON.stringify(data)) return JSON.parse(JSON.stringify(data));
}, },
// 工具方法,把数字转化为字符串 // 工具方法,把数字转化为字符串
util_toString(data, array) { util_toString(data, array) {
//原始数据 //原始数据
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
//如果相等做操作 //如果相等做操作
dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + ''; dataCopy[item] =
}) dataCopy[item] === undefined ? "" : dataCopy[item] + "";
});
return dataCopy; return dataCopy;
}, },
// 工具方法,把字符串转化为数组 // 工具方法,把字符串转化为数组
util_toArrays(data, array) { util_toArrays(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(","); dataCopy[item] =
}) dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
});
return dataCopy; return dataCopy;
}, },
// 工具方法,把字符串转化为格式化日期 // 工具方法,把字符串转化为格式化日期
util_toDateStr(data, array) { util_toDateStr(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]); dataCopy[item] =
}) dataCopy[item] === undefined
? ""
: this.util_formatterDate(dataCopy[item]);
});
return dataCopy; return dataCopy;
}, },
util_formatterDate(time) { util_formatterDate(time) {
let date = new Date(Number(time)); let date = new Date(Number(time));
let Y = date.getFullYear() + '-'; let Y = date.getFullYear() + "-";
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; let M =
let D = this.panLeft(date.getDate()) + ' '; (date.getMonth() + 1 < 10
let h = this.panLeft(date.getHours()) + ':'; ? "0" + (date.getMonth() + 1)
let m = this.panLeft(date.getMinutes()) + ':'; : date.getMonth() + 1) + "-";
let D = this.panLeft(date.getDate()) + " ";
let h = this.panLeft(date.getHours()) + ":";
let m = this.panLeft(date.getMinutes()) + ":";
let s = this.panLeft(date.getSeconds()); let s = this.panLeft(date.getSeconds());
return Y + M + D + h + m + s; return Y + M + D + h + m + s;
}, },
panLeft(num) { panLeft(num) {
return num < 10 ? '0' + num : num; return num < 10 ? "0" + num : num;
}, },
// 从dict字段暴力取值,取不到则返回原值 // 从dict字段暴力取值,取不到则返回原值
util_formatter(key, val) { util_formatter(key, val) {
try { try {
return this.dict[key][val] return this.dict[key][val];
} catch (error) { } catch (error) {
return val; return val;
} }
...@@ -141,24 +153,24 @@ export default { ...@@ -141,24 +153,24 @@ export default {
} }
}); });
}, 0); }, 0);
} },
}, },
computed: { computed: {
pageInfo() { pageInfo() {
let currUrl = this.$route.path; let currUrl = this.$route.path;
let urlArray = currUrl.split('/'); let urlArray = currUrl.split("/");
let type = urlArray.pop(); let type = urlArray.pop();
urlArray.push('save'); urlArray.push("save");
let saveUrl = urlArray.join('/'); let saveUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('edit'); urlArray.push("edit");
let editUrl = urlArray.join('/'); let editUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('add'); urlArray.push("add");
let addUrl = urlArray.join('/'); let addUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('view'); urlArray.push("view");
let viewUrl = urlArray.join('/'); let viewUrl = urlArray.join("/");
return { return {
type, type,
currUrl, currUrl,
...@@ -182,9 +194,6 @@ export default { ...@@ -182,9 +194,6 @@ export default {
toString: [], // 需要把number转化为string的表单字段name数组 toString: [], // 需要把number转化为string的表单字段name数组
toArrays: [], // 需要把number转化为arrays的表单字段name数组 toArrays: [], // 需要把number转化为arrays的表单字段name数组
toDate: [], // 需要把number转化为date的表单字段name数组 toDate: [], // 需要把number转化为date的表单字段name数组
} };
} },
} };
import axios from 'axios'; import axios from "axios";
import { import {
formatter, formatterAmount, formatterDate, formatterDateOnly, find, formatter,
} from '@/assets/utils/table'; formatterAmount,
formatterDate,
formatterDateOnly,
find,
} from "@/assets/utils/table";
const tagsMap = { const tagsMap = {
1: 'danger', 1: "danger",
0: 'success' 0: "success",
}; };
const baseUrl= process.env.VUE_APP_API_BASE_URL+'/' const baseUrl = process.env.VUE_APP_API_BASE_URL + "/";
export default { export default {
mounted() { mounted() {
this.getData(); this.getData();
}, },
watch: { watch: {
'$route'(route) { $route(route) {
this.query = Object.assign({}, this.query, route.query); this.query = Object.assign({}, this.query, route.query);
this.getData(); this.getData();
} },
}, },
beforeDestroy() { beforeDestroy() {
this.source.cancel('自动取消ajax操作') this.source.cancel("自动取消ajax操作");
clearTimeout(this.loadingTimer) clearTimeout(this.loadingTimer);
}, },
methods: { methods: {
beforeUpload(file) { beforeUpload(file) {
if (file.size / 1024 / 1024 > 200) { if (file.size / 1024 / 1024 > 200) {
this.$message({ this.$message({
message: '上传文件大小不能超过 200MB!', message: "上传文件大小不能超过 200MB!",
type: 'error' type: "error",
}) });
return false return false;
} }
// 获取文件类型 // 获取文件类型
var test = file.name.substring(file.name.lastIndexOf('.') + 1) var test = file.name.substring(file.name.lastIndexOf(".") + 1);
if (test !== 'xlsx' && test !== 'xls') { if (test !== "xlsx" && test !== "xls") {
this.$message({ this.$message({
message: '上传文件只能是 zip、rar格式!', message: "上传文件只能是 zip、rar格式!",
type: 'warning' type: "warning",
}) });
return false return false;
} }
}, },
// 开启、关闭 // 开启、关闭
...@@ -53,11 +57,13 @@ export default { ...@@ -53,11 +57,13 @@ export default {
return Promise.resolve(); return Promise.resolve();
}, },
// 表格接收数据前 // 表格接收数据前
beforeRender(data) { return data }, beforeRender(data) {
return data;
},
// 表格接收数据后 // 表格接收数据后
afterRender(data) { }, afterRender(data) {},
// 删除动作发生后 // 删除动作发生后
afterDel(data) { }, afterDel(data) {},
// 默认拉取数据 // 默认拉取数据
async getData() { async getData() {
try { try {
...@@ -67,52 +73,60 @@ export default { ...@@ -67,52 +73,60 @@ export default {
} }
this.tableData.loading = true; this.tableData.loading = true;
this.$post(this.pageInfo.list, this.query, { this.$post(this.pageInfo.list, this.query, {
cancelToken: this.source.token cancelToken: this.source.token,
}) })
.then(({ data }) => { .then(({ data }) => {
this.tableData = this.beforeRender( this.tableData = this.beforeRender(
Object.assign({}, this.tableData, data) Object.assign({}, this.tableData, data)
) );
this.afterRender(this.tableData); this.afterRender(this.tableData);
}) })
.catch(error => { .catch((error) => {
if (error.message == '自动取消ajax操作') return if (error.message == "自动取消ajax操作") return;
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.tableData.loading = false; this.tableData.loading = false;
}, 300); }, 300);
}) });
}, },
// 复制一个数组或对象 // 复制一个数组或对象
util_copy(data) { util_copy(data) {
if (typeof data !== 'object') return data; if (typeof data !== "object") return data;
return JSON.parse(JSON.stringify(data)) return JSON.parse(JSON.stringify(data));
}, },
_showAll(item) { _showAll(item) {
let data = this.util_copy(item); let data = this.util_copy(item);
data.isShowAll = true; data.isShowAll = true;
this.util_update(item.id, data) this.util_update(item.id, data);
}, },
// 超长文本展开收起 // 超长文本展开收起
util_short(key, size) { util_short(key, size) {
return row => { return (row) => {
let string = row[key] || ''; let string = row[key] || "";
if (string.length < size || row.isShowAll) return string; if (string.length < size || row.isShowAll) return string;
return ( return (
<span> <span>
{string.substr(0, 50) + '...'} {string.substr(0, 50) + "..."}
<el-button size='mini' type='text' onClick={() => { this._showAll(row) }}>更多</el-button> <el-button
size="mini"
type="text"
onClick={() => {
this._showAll(row);
}}
>
更多
</el-button>
</span> </span>
) );
} };
}, },
// 从dict字段暴力取值,取不到则返回原值 // 从dict字段暴力取值,取不到则返回原值
util_formatter(key, val) { util_formatter(key, val) {
try { try {
return this.tableData.dict[key][val] return this.tableData.dict[key][val];
} catch (error) { } catch (error) {
return val; return val;
} }
...@@ -120,20 +134,24 @@ export default { ...@@ -120,20 +134,24 @@ export default {
// 通过id修改某条记录 // 通过id修改某条记录
util_update(id, newData, idColumnName) { util_update(id, newData, idColumnName) {
let table = this.tableData.data; let table = this.tableData.data;
let { index, data } = find(table, !idColumnName ? 'id' : idColumnName, id); let { index, data } = find(
table,
!idColumnName ? "id" : idColumnName,
id
);
table.splice(index, 1, Object.assign({}, data, newData)); table.splice(index, 1, Object.assign({}, data, newData));
}, },
// 工具方法,把数字转化为字符串 // 工具方法,把数字转化为字符串
util_toString(data, array) { util_toString(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
for (var item in data) { for (var item in data) {
dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + ''; dataCopy[item] =
dataCopy[item] === undefined ? "" : dataCopy[item] + "";
} }
return dataCopy; return dataCopy;
}, },
util_formatterDate(time, fmt) { util_formatterDate(time, fmt) {
if (!time) return ''; if (!time) return "";
let date = new Date(Number(time)); let date = new Date(Number(time));
var o = { var o = {
"M+": date.getMonth() + 1, //月份 "M+": date.getMonth() + 1, //月份
...@@ -142,11 +160,21 @@ export default { ...@@ -142,11 +160,21 @@ export default {
"m+": date.getMinutes(), //分 "m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒 "s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 "q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒 S: date.getMilliseconds(), //毫秒
}; };
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o) for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt; return fmt;
}, },
util_getPrevMonthDate() { util_getPrevMonthDate() {
...@@ -154,249 +182,311 @@ export default { ...@@ -154,249 +182,311 @@ export default {
var year = date.getFullYear(); var year = date.getFullYear();
var month = date.getMonth(); var month = date.getMonth();
var day = date.getDate(); var day = date.getDate();
if (month == 0) {//年份为0代表,是本年的第一月,所以不能减 if (month == 0) {
month = 11;//月份为上年的最后月份 //年份为0代表,是本年的第一月,所以不能减
year--;//年份减1 month = 11; //月份为上年的最后月份
year--; //年份减1
return new Date(year, month, day); return new Date(year, month, day);
} }
month--;//否则,只减去月份 month--; //否则,只减去月份
return new Date(year, month, day); return new Date(year, month, day);
}, },
// 格式化单元格数据 // 格式化单元格数据
formatter(row, column, val) { formatter(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val return content ? (
<el-tag type={"info"} size="mini">
{content}
</el-tag>
) : (
val
);
}, },
formatterYES(row, column, val) { formatterYES(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '0') { if (val == "0") {
return <el-tag type={'danger'} size='mini'>{content}</el-tag> return (
} else if (val == '1') { <el-tag type={"danger"} size="mini">
return <el-tag type={'success'} size='mini'>{content}</el-tag> {content}
</el-tag>
);
} else if (val == "1") {
return (
<el-tag type={"success"} size="mini">
{content}
</el-tag>
);
} }
} else { } else {
return val return val;
} }
}, },
formatterStatus(row, column, val) { formatterStatus(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '0') { if (val == "0") {
return <el-tag size='mini'>{content}</el-tag> return <el-tag size="mini">{content}</el-tag>;
} else if (val == '1') { } else if (val == "1") {
return <el-tag type={'danger'} size='mini'>{content}</el-tag> return (
} else if (val == '2') { <el-tag type={"danger"} size="mini">
return <el-tag type={'success'} size='mini'>{content}</el-tag> {content}
</el-tag>
);
} else if (val == "2") {
return (
<el-tag type={"success"} size="mini">
{content}
</el-tag>
);
} }
} else { } else {
return val return val;
} }
}, },
formatterDictLink(row, column, val) { formatterDictLink(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
let underline = false; let underline = false;
let type = "primary" let type = "primary";
if (val === 3) { if (val === 3) {
type = 'danger' type = "danger";
} }
return content ? <el-link type={type} underline={underline} onClick={() => { this.toDrawerMsg(row) }} size='mini'>{content}</el-link> : val return content ? (
<el-link
type={type}
underline={underline}
onClick={() => {
this.toDrawerMsg(row);
}}
size="mini"
>
{content}
</el-link>
) : (
val
);
}, },
formatters(row, column, val) { formatters(row, column, val) {
if (val) { if (val) {
return ( return val
val.split(',').map(v => { return formatter(this.tableData, column, v) }).join(",") .split(",")
) .map((v) => {
return formatter(this.tableData, column, v);
})
.join(",");
} }
return '--' return "--";
}, },
formatterLink(row, column, val) { formatterLink(row, column, val) {
//const content = formatter(this.tableData, column-2, val); //const content = formatter(this.tableData, column-2, val);
return <el-link type="primary" href={val} target="_blank">{row.fileName}</el-link> return (
<el-link type="primary" href={val} target="_blank">
{row.fileName}
</el-link>
);
//return content; //return content;
// return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val // return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
}, },
formatterString(row, column, val) { formatterString(row, column, val) {
return formatter(this.tableData, column, val) return formatter(this.tableData, column, val);
}, },
// 格式化单元格数据 0显示 0.00 // 格式化单元格数据 0显示 0.00
formatterAmount(row, column) { formatterAmount(row, column) {
return formatterAmount(row, column) return formatterAmount(row, column);
}, },
// 格式化单元格数据钱单位里换算成元 // 格式化单元格数据钱单位里换算成元
formatterMoney(row, column, val) { formatterMoney(row, column, val) {
return ((val || 0) / 1000).toFixed(2) return ((val || 0) / 1000).toFixed(2);
}, },
// 查看天数 // 查看天数
formatterDay(row, column, val) { formatterDay(row, column, val) {
return <el-tag onClick={() => { return (
this.handleCountDays(row,column,val) <el-tag
}}>{val}</el-tag> onClick={() => {
this.handleCountDays(row, column, val);
}}
>
{val}
</el-tag>
);
}, },
// 格式化单元格数据 // 格式化单元格数据
formatterDate(row, column) { formatterDate(row, column) {
//console.log("date:",row,column) //console.log("date:",row,column)
return formatterDate(row, column) return formatterDate(row, column);
}, },
// 格式化单元格数据 只要年月日 // 格式化单元格数据 只要年月日
formatterDateOnly(row, column) { formatterDateOnly(row, column) {
return formatterDateOnly(row, column) return formatterDateOnly(row, column);
}, },
// 格式化人员 // 格式化人员
formaterPeople(row, column, val) { formaterPeople(row, column, val) {
let info let info;
if (val) { if (val) {
if (typeof (val) === 'number') { if (typeof val === "number") {
info = <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', val)}</el-tag>
} else {
info = ( info = (
val.split(',').map(v => { <el-tag type={"info"} size="mini">
if (this.tableData.dict["assigneeList"][v] != undefined) { {this.util_formatter("assigneeList", val)}
return <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', v)}</el-tag> </el-tag>
} );
}) } else {
) info = val.split(",").map((v) => {
if (this.tableData.dict["assigneeList"][v] != undefined) {
return (
<el-tag type={"info"} size="mini">
{this.util_formatter("assigneeList", v)}
</el-tag>
);
}
});
} }
} else { } else {
info = '--' info = "--";
} }
return info return info;
}, },
// 格式化员工类型 // 格式化员工类型
formatterType(row, column, val){ formatterType(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '1') { if (val == "1") {
return <el-tag size='mini'>全职</el-tag> return <el-tag size="mini">全职</el-tag>;
} else if (val == '2') { } else if (val == "2") {
return <el-tag size='mini'>兼职</el-tag> return <el-tag size="mini">兼职</el-tag>;
} else if (val == '3') { } else if (val == "3") {
return <el-tag size='mini'>实习</el-tag> return <el-tag size="mini">实习</el-tag>;
}
} else {
return val
} }
} else {
return val;
}
}, },
// geshu // geshu
// 格式化是否在政务中心 // 格式化是否在政务中心
formatterSource(row, column, val){ formatterSource(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '1') { if (val == "1") {
return <el-tag size='mini'></el-tag> return <el-tag size="mini"></el-tag>;
} else if (val == '2') { } else if (val == "2") {
return <el-tag size='mini'></el-tag> return <el-tag size="mini"></el-tag>;
}
} else {
return val
} }
} else {
return val;
}
}, },
// 格式化处理异常状态 // 格式化处理异常状态
formattereErrorStatus(row,column,val){ formattereErrorStatus(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return (
return <el-tag size="mini" type="danger">{this.util_formatter('errorStatus', val)}</el-tag> <el-tag size="mini" type="danger">
{this.util_formatter("errorStatus", val)}
</el-tag>
);
} else { } else {
return val return val;
} }
}, },
// 格式化处理状态 // 格式化处理状态
formattereDealStatus(row,column,val){ formattereDealStatus(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return <el-tag size="mini">{this.util_formatter('processStatus', val)}</el-tag> return (
<el-tag size="mini">
{this.util_formatter("processStatus", val)}
</el-tag>
);
} else { } else {
return val return val;
} }
}, },
// 考勤组人数 // 考勤组人数
formatterGroupPerson(row,column,val){ formatterGroupPerson(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return Number(row.personNum) + Number(row.personNumNo) return Number(row.personNum) + Number(row.personNumNo);
} else { } else {
return val return val;
} }
}, },
// 考勤类型 // 考勤类型
formatterattendType(row,column,val){ formatterattendType(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return <el-tag size="mini">{this.util_formatter('type', val)}</el-tag> return <el-tag size="mini">{this.util_formatter("type", val)}</el-tag>;
} else { } else {
return val return val;
} }
}, },
// 请假类型 // 请假类型
formatterLeaveType(row,column,val){ formatterLeaveType(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return <el-tag size="mini">{this.util_formatter('leaveType', val)}</el-tag> return (
<el-tag size="mini">{this.util_formatter("leaveType", val)}</el-tag>
);
} else { } else {
return val return val;
} }
}, },
// 格式化图片展示 // 格式化图片展示
formatterPic(row, column, val){ formatterPic(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
return <el-image return (
src={val.indexOf('http') == -1?baseUrl+val:val} <el-image
preview-src-list={val.indexOf('http') == -1?baseUrl+val:val} src={val.indexOf("http") == -1 ? baseUrl + val : val}
style="width: 100px"></el-image> preview-src-list={val.indexOf("http") == -1 ? baseUrl + val : val}
style="width: 100px"
></el-image>
);
} else { } else {
return val return val;
} }
}, },
// 考勤组格式 // 考勤组格式
formatterBanci(row,column,val){ formatterBanci(row, column, val) {
const content = formatter(this.tableData, column, val) const content = formatter(this.tableData, column, val);
if (content) { if (content) {
// let string = row.attendanceTime.replace("、","<br>") // let string = row.attendanceTime.replace("、","<br>")
return <div> return (
<div> <div>
<el-tag type="info">{row.restTime}</el-tag> <div>
</div> <el-tag type="info">{row.restTime}</el-tag>
<div class="mt10" style="background:#ecf5ff;color:#409EFF"> </div>
<p>{row.attendanceTime}</p> <div class="mt10" style="background:#ecf5ff;color:#409EFF">
<p>{row.attendanceTime}</p>
</div>
</div> </div>
</div> );
} else { } else {
return val return val;
} }
}, },
// 多选表格行 // 多选表格行
handleSelectionChange(val) { handleSelectionChange(val) {
this.selection = val.map(i => i.id); this.selection = val.map((i) => i.id);
}, },
// 当某一行被点击时会触发该事件 // 当某一行被点击时会触发该事件
handleRowClick(row, column, event) { handleRowClick(row, column, event) {},
},
// 合并表格行列 // 合并表格行列
handleSpanMethod() { handleSpanMethod() {},
},
// 自定义表格排序 // 自定义表格排序
handleSortChange() { handleSortChange() {},
},
// 自定义索引号 // 自定义索引号
handleIndexMethod(index) { handleIndexMethod(index) {
//prePageResult 每页条数 //prePageResult 每页条数
// console.log("index:"+index) // console.log("index:"+index)
let size = this.tableData.pageInfo.prePageResult; let size = this.tableData.pageInfo.prePageResult;
let page = this.tableData.pageInfo.currPage; let page = this.tableData.pageInfo.currPage;
let count = parseInt(size) * (parseInt(page) - 1) let count = parseInt(size) * (parseInt(page) - 1);
return count + index + 1; return count + index + 1;
}, },
// 自定义表格选择行是否能勾选 // 自定义表格选择行是否能勾选
...@@ -405,100 +495,98 @@ export default { ...@@ -405,100 +495,98 @@ export default {
}, },
// 设置单元行样式 // 设置单元行样式
tableRowClassName() { }, tableRowClassName() {},
// 批量删除 // 批量删除
toBatchDel() { toBatchDel() {
this.toDel(this.selection.join(','), true); this.toDel(this.selection.join(","), true);
}, },
// 单个删除 // 单个删除
toDel(id, isBatch) { toDel(id, isBatch) {
if (!id) { if (!id) {
return this.$message.warning('请选中一条记录'); return this.$message.warning("请选中一条记录");
} }
this.$get(this.pageInfo.del, { id: id }) this.$get(this.pageInfo.del, { id: id })
.then(res => { .then((res) => {
this.$message.success(res.msg) this.$message.success(res.msg);
// 更新数据 // 更新数据
if (isBatch) { if (isBatch) {
// 批量删除,刷新页面 // 批量删除,刷新页面
this.getData(); this.getData();
} else { } else {
let table = this.tableData.data; let table = this.tableData.data;
let { index } = find(table, 'id', id); let { index } = find(table, "id", id);
table.splice(index, 1); table.splice(index, 1);
this.tableData.pageInfo.totalResult -= 1; this.tableData.pageInfo.totalResult -= 1;
} }
this.afterDel(id); this.afterDel(id);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) });
}, },
// 新增 // 新增
toAdd() { toAdd() {
this.$router.push({ this.$router.push({
path: this.pageInfo.add, path: this.pageInfo.add,
query: this.tableConfig.addQuery, query: this.tableConfig.addQuery,
}) });
}, },
// 编辑 // 编辑
toEdit(row, query) { toEdit(row, query) {
this.$router.push({ this.$router.push({
path: this.pageInfo.edit, path: this.pageInfo.edit,
query: Object.assign({}, { id: row.id }, query) query: Object.assign({}, { id: row.id }, query),
}) });
}, },
// 查看 // 查看
toView(row, query) { toView(row, query) {
console.log(this.pageInfo.view) console.log(this.pageInfo.view);
this.$router.push({ this.$router.push({
path: this.pageInfo.view, path: this.pageInfo.view,
query: Object.assign({}, { id: row.id }, query) query: Object.assign({}, { id: row.id }, query),
}) });
}, },
// 导入 // 导入
toImport() { toImport() {
this.$router.push({ this.$router.push({
path: this.pageInfo.importView, path: this.pageInfo.importView,
query: this.tableConfig.addQuery, query: this.tableConfig.addQuery,
}) });
}, },
// 导出 // 导出
toexport(){ toexport() {
this.$router.push({ this.$router.push({
path: this.pageInfo.importView, path: this.pageInfo.importView,
query: this.tableConfig.addQuery, query: this.tableConfig.addQuery,
}) });
}, },
// 返回 // 返回
toBack() { toBack() {
this.$router.push({ this.$router.push({
path: this.pageInfo.back path: this.pageInfo.back,
}) });
}, },
// 开启、关闭 // 开启、关闭
open() { open() {},
},
}, },
computed: { computed: {
tableConfig() { tableConfig() {
return Object.assign({}, this.defaultConfig, this.config) return Object.assign({}, this.defaultConfig, this.config);
}, },
pageInfo() { pageInfo() {
const urls = { // 操作所需的url地址,和url同路径 const urls = {
// 操作所需的url地址,和url同路径
list: this.$route.path, list: this.$route.path,
edit: this.$route.path.replace('/list', '/edit'), edit: this.$route.path.replace("/list", "/edit"),
save: this.$route.path.replace('/list', '/save'), save: this.$route.path.replace("/list", "/save"),
del: this.$route.path.replace('/list', '/delete'), del: this.$route.path.replace("/list", "/delete"),
add: this.$route.path.replace('/list', '/add'), add: this.$route.path.replace("/list", "/add"),
view: this.$route.path.replace('/list', '/view'), view: this.$route.path.replace("/list", "/view"),
importView: this.$route.path.replace('/list', '/importView'), importView: this.$route.path.replace("/list", "/importView"),
exclude: this.$route.path.replace('/list', '/list/exclude'), exclude: this.$route.path.replace("/list", "/list/exclude"),
} };
return Object.assign({}, urls, this.urls) return Object.assign({}, urls, this.urls);
}, },
}, },
data() { data() {
...@@ -528,17 +616,15 @@ export default { ...@@ -528,17 +616,15 @@ export default {
back: this.toBack, back: this.toBack,
importView: this.toImport, importView: this.toImport,
refresh: this.getData, refresh: this.getData,
} },
}, },
tableData: { // 表格数据 tableData: {
// 表格数据
loading: true, // ajax请求状态 loading: true, // ajax请求状态
dict: {}, dict: {},
result: [], result: [],
pageInfo: {}, pageInfo: {},
} },
} };
} },
} };
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
:default-expand-all="expand" :default-expand-all="expand"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
height="620"
> >
<el-table-column <el-table-column
......
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<template> <template>
<div class="layout-table" :loading="data.loading"> <div class="layout-table" :loading="data.loading">
<TabPane :thirdList="thirdList" :activeName="activeName" @handleClick="handleClick" v-if="config.isshowTabPane"></TabPane> <TabPane
:thirdList="thirdList"
:activeName="activeName"
@handleClick="handleClick"
v-if="config.isshowTabPane"
></TabPane>
<div class="table-head flex flex-pack-justify"> <div class="table-head flex flex-pack-justify">
<div class="table-head-left flex flex-align-center"> <div class="table-head-left flex flex-align-center">
<!-- <slot name="breadcrumb"> <!-- <slot name="breadcrumb">
...@@ -10,28 +15,29 @@ ...@@ -10,28 +15,29 @@
</slot> --> </slot> -->
<div class="buttons"> <div class="buttons">
<el-row> <el-row>
<slot name="table-head-left"></slot> <slot name="table-head-left"></slot>
<slot name="table-head-center"> <slot name="table-head-center">
<el-button <el-button
v-if="isShowButton('notAdd')" v-if="isShowButton('notAdd')"
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
plain plain
size="mini" size="mini"
@click="config.methods.add" @click="config.methods.add"
title="新增" title="新增"
>新增</el-button >新增</el-button
> >
<el-button <el-button
v-if="isShowBtn('import')" v-if="isShowBtn('import')"
size="mini" size="mini"
plain plain
@click="config.methods.importView" @click="config.methods.importView"
class="el-icon-upload2" class="el-icon-upload2"
title="导入" title="导入"
>导入</el-button> >导入</el-button
>
<!-- <el-button <!-- <el-button
v-if="isShowButton('notDel')" v-if="isShowButton('notDel')"
icon="el-icon-delete" icon="el-icon-delete"
type="danger" type="danger"
...@@ -41,36 +47,47 @@ ...@@ -41,36 +47,47 @@
title="批量删除" title="批量删除"
>删除</el-button >删除</el-button
> --> > -->
<Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗?'> <Confirm
<el-button icon="el-icon-delete" type="danger" size='mini' plain title="批量删除">批量删除</el-button> v-if="isShowButton('notDel')"
</Confirm> @confirm="config.methods.del"
<el-button message="确定要删除选中的多条记录吗?"
@click="item.method" >
size="mini" <el-button
:key="item.label" icon="el-icon-delete"
:icon="item.icon" type="danger"
:type="item.type" size="mini"
:loading="item.loading" plain
v-if="item.isShow" title="批量删除"
v-for="item in config.buttons" >批量删除</el-button
circle >
:title="item.label" </Confirm>
></el-button> <el-button
<el-button @click="item.method"
v-if="isShowBtn('back')" size="mini"
@click="config.methods.back" :key="item.label"
size="mini" :icon="item.icon"
icon="el-icon-back" :type="item.type"
circle :loading="item.loading"
title="返回" v-if="item.isShow"
></el-button> v-for="item in config.buttons"
</slot> circle
<slot name="table-head-left2"></slot> :title="item.label"
></el-button>
<el-button
v-if="isShowBtn('back')"
@click="config.methods.back"
size="mini"
icon="el-icon-back"
circle
title="返回"
></el-button>
</slot>
<slot name="table-head-left2"></slot>
</el-row> </el-row>
<el-row> <el-row>
<slot name="table-head-row2-left"></slot> <slot name="table-head-row2-left"></slot>
</el-row> </el-row>
</div> </div>
</div> </div>
...@@ -126,7 +143,6 @@ ...@@ -126,7 +143,6 @@
:downloadUrl="config.downloadUrl" :downloadUrl="config.downloadUrl"
:areaSelect="config.areaSelect" :areaSelect="config.areaSelect"
/> />
</div> </div>
</div> </div>
</div> </div>
...@@ -220,7 +236,7 @@ import DataTable from "@/components/DataTable.vue"; ...@@ -220,7 +236,7 @@ import DataTable from "@/components/DataTable.vue";
import DataTableMobile from "./DataTableMobile.js"; import DataTableMobile from "./DataTableMobile.js";
import DataTableFlow from "./DataTableFlow.vue"; import DataTableFlow from "./DataTableFlow.vue";
import DataTreeTable from "@/components/DataTreeTable.vue"; import DataTreeTable from "@/components/DataTreeTable.vue";
import TabPane from "@/components/tabPane.vue" import TabPane from "@/components/tabPane.vue";
export default { export default {
props: { props: {
data: { data: {
...@@ -242,7 +258,9 @@ export default { ...@@ -242,7 +258,9 @@ export default {
DataTableMobile, DataTableMobile,
DataTableFlow, DataTableFlow,
DataTreeTable, DataTreeTable,
TabPane TabPane,
},
mounted() {
}, },
methods: { methods: {
// 根据url的query参数判断是否展示查询条件 // 根据url的query参数判断是否展示查询条件
...@@ -268,12 +286,12 @@ export default { ...@@ -268,12 +286,12 @@ export default {
isShowBtn(name) { isShowBtn(name) {
return this.canShow.indexOf(name) !== -1; return this.canShow.indexOf(name) !== -1;
}, },
handleClick(key){ handleClick(key) {
this.$store.commit('setThirdPath',key) this.$store.commit("setThirdPath", key);
this.$router.push({ this.$router.push({
path:key path: key,
}) });
} },
}, },
watch: { watch: {
$route(route) { $route(route) {
...@@ -288,21 +306,21 @@ export default { ...@@ -288,21 +306,21 @@ export default {
this.showType = this.config.showType ? this.config.showType : "table"; this.showType = this.config.showType ? this.config.showType : "table";
return Object.keys(this.$attrs) || []; return Object.keys(this.$attrs) || [];
}, },
thirdList(){ thirdList() {
if(!this.$store.state.CurrentThirdArr) return [] if (!this.$store.state.CurrentThirdArr) return [];
return this.$store.state.CurrentThirdArr return this.$store.state.CurrentThirdArr;
},
activeName() {
return this.$store.state.ThirdPath;
}, },
activeName(){
return this.$store.state.ThirdPath
}
}, },
data() { data() {
return { return {
loading: this.config.loading, loading: this.config.loading,
showSearch: this.isShowSearch(this.$route.query), showSearch: this.isShowSearch(this.$route.query),
showType: "table", showType: "table",
} };
} },
}; };
</script> </script>
......
import Vue from 'vue' import Vue from "vue";
import ElementUI from 'element-ui' import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css' import "element-ui/lib/theme-chalk/index.css";
import './assets/less/base.less' import "./assets/less/base.less";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import store from './store' import store from "./store";
import Prototype from './assets/utils/prototype' import Prototype from "./assets/utils/prototype";
import Filter from './assets/utils/filter.js' import Filter from "./assets/utils/filter.js";
import GlobalComponents from './assets/utils/globalComponents.js' import GlobalComponents from "./assets/utils/globalComponents.js";
import Global from './assets/utils/global.js' import Global from "./assets/utils/global.js";
import VueClipboard from 'vue-clipboard2' import VueClipboard from "vue-clipboard2";
import VueAMap from 'vue-amap'; import VueAMap from "vue-amap";
import * as echarts from 'echarts' import * as echarts from "echarts";
// 将自动注册所有组件为全局组件 // 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view' import dataV from "@jiaminghi/data-view";
Vue.use(dataV) Vue.use(dataV);
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(Prototype); Vue.use(Prototype);
Vue.use(Filter); Vue.use(Filter);
Vue.use(GlobalComponents); // 全局组件 Vue.use(GlobalComponents); // 全局组件
Vue.use(VueClipboard) Vue.use(VueClipboard);
Vue.use(VueAMap) Vue.use(VueAMap);
VueAMap.initAMapApiLoader({ VueAMap.initAMapApiLoader({
key: 'f45cca59553214543a5a77e50a7e04df', key: "f45cca59553214543a5a77e50a7e04df",
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], plugin: [
v: '1.4.4', "AMap.Scale",
uiVersion: '1.0', "AMap.OverView",
}) "AMap.ToolBar",
"AMap.MapType",
"AMap.PlaceSearch",
"AMap.Geolocation",
"AMap.Geocoder",
],
v: "1.4.4",
uiVersion: "1.0",
});
Vue.prototype.Global = Global; Vue.prototype.Global = Global;
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
...@@ -125,7 +125,8 @@ const router = new Router({ ...@@ -125,7 +125,8 @@ const router = new Router({
...restBuilder("perform/attend/appeal/files", "perform/attend/appeal/files"), //绩效记录申诉信息附件列表 ...restBuilder("perform/attend/appeal/files", "perform/attend/appeal/files"), //绩效记录申诉信息附件列表
...restBuilder("feedback", "feedback"), //反馈信息 ...restBuilder("feedback", "feedback"), //反馈信息
...restBuilder("feedback/addQuestion", "feedback/addQuestion"), //新增反馈
...restBuilder("feedback/question", "feedback/question"), //反馈问题 ...restBuilder("feedback/question", "feedback/question"), //反馈问题
...restBuilder("feedback/option", "feedback/option"), //反馈选项 ...restBuilder("feedback/option", "feedback/option"), //反馈选项
...restBuilder("feedback/answer", "feedback/answer"), //回答问题 ...restBuilder("feedback/answer", "feedback/answer"), //回答问题
......
<template>
<div class="page">
<div class="top">
<el-tabs v-model="tabs">
<el-tab-pane label="设计问卷" name="1">
<iframe style="width: 100%;height: 80vh;" src="https://wurong19870715.gitee.io/formdesigner/#/" frameborder="0"></iframe>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: '1'
}
}
}
</script>
<style lang="less" scoped>
.top {}
</style>
\ No newline at end of file
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" notDel notSearch :config="tableConfig">
</LayoutTable> </LayoutTable>
<drawer-show ref="drawerform" @ok="getData" /> <drawer-show ref="drawerform" @ok="getData" />
...@@ -9,106 +9,113 @@ ...@@ -9,106 +9,113 @@
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "FeedbackList", name: "FeedbackList",
components: { components: {
drawerShow drawerShow
}, },
mixins: [table], mixins: [table],
created() { created() {
}, },
methods: { methods: {
renderTable(tableData) { renderTable(tableData) {
return ( return (
<el-table stripe data={tableData} class="total-table"> <el-table stripe data={tableData} class="total-table">
{this.columnSet.map((item) => this.renderTableColumn(item))} {this.columnSet.map((item) => this.renderTableColumn(item))}
</el-table> </el-table>
); );
}, },
renderTableColumn(options) { renderTableColumn(options) {
return ( return (
<el-table-column <el-table-column
prop={options.prop} prop={options.prop}
label={options.label} label={options.label}
width={options.width} width={options.width}
formatter={options.formatter} formatter={options.formatter}
> >
</el-table-column> </el-table-column>
); );
}, },
/** 重写新增方法 */ /** 重写新增方法 */
toAdd(row) { toAdd(row) {
this.$refs.drawerform.add(row); // this.$refs.drawerform.add(row);
}, this.$router.push("/feedback/addQuestion/list");
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
}, },
data() { /** 重写编辑方法 */
return { toEdit(row) {
/** 子表列元素 */ this.$refs.drawerform.edit(row);
columnSet:[ },
{label: "反馈问卷id号", prop: "feedbackId", formatter: this.formatter}, /** 重写查看方法 */
{label: "问题内容", prop: "content"}, toView(row) {
{label: "问题类型 ", prop: "questionType",formatter: this.formatter}, this.$refs.drawerform.view(row);
{label: "是否必填", prop: "require",formatter: this.formatter}, },
{label: "备注", prop: "remark"},
},
data() {
return {
/** 子表列元素 */
columnSet: [
{ label: "反馈问卷id号", prop: "feedbackId", formatter: this.formatter },
{ label: "问题内容", prop: "content" },
{ label: "问题类型 ", prop: "questionType", formatter: this.formatter },
{ label: "是否必填", prop: "require", formatter: this.formatter },
{ label: "备注", prop: "remark" },
],
config: {
isshowTabPane: true,
search: [
], ],
config: { columns: [
isshowTabPane:false, { type: "selection", width: 60 },
search: [ { type: "index", label: "序号", width: 50 },
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "问卷标题", prop: "title"}, { label: "问卷标题", prop: "title" },
{label: "反馈开始时间", prop: "feedbackTimeStart", formatter: this.formatterDate}, { label: "反馈开始时间", prop: "feedbackTimeStart", formatter: this.formatterDate },
{label: "反馈结束时间", prop: "feedbackTimeEnd", formatter: this.formatterDate}, { label: "反馈结束时间", prop: "feedbackTimeEnd", formatter: this.formatterDate },
{label: "邀请人数", prop: "inviteNum",formatter: this.formatter}, { label: "邀请人数", prop: "inviteNum", formatter: this.formatter },
{label: "反馈人数", prop: "feedbackNum",formatter: this.formatter}, { label: "反馈人数", prop: "feedbackNum", formatter: this.formatter },
{label: "创建用户", prop: "createUserId", formatter: this.formatter}, { label: "创建用户", prop: "createUserId", formatter: this.formatter },
{label: "绩效反馈问题", {
width: 120, label: "绩效反馈问题",
prop: "subColumns", width: 120,
formatter: (row) => { prop: "subColumns",
let widthsize = this.columnSet.reduce((pre, cur) => { formatter: (row) => {
return pre + Number(cur.width); let widthsize = this.columnSet.reduce((pre, cur) => {
}, 50); return pre + Number(cur.width);
return ( }, 50);
<el-popover placement="right" width={widthsize} trigger="click"> return (
{this.renderTable(row.feedbackQuestionList)} <el-popover placement="right" width={widthsize} trigger="click">
<el-button type="text" slot="reference">详细</el-button> {this.renderTable(row.feedbackQuestionList)}
</el-popover> <el-button type="text" slot="reference">详细</el-button>
); </el-popover>
}, );
}, },
{ },
label: "操作", {
width: 240, label: "操作",
formatter: row => { width: 240,
return ( formatter: row => {
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
); );
}
} }
] }
} ]
}; }
} };
}; }
};
</script> </script>
<style lang="less" scoped>
/deep/ .buttons {
margin-bottom: 10px;
}
</style>
...@@ -7,11 +7,15 @@ ...@@ -7,11 +7,15 @@
</div> </div>
<dv-scroll-ranking-board <dv-scroll-ranking-board
:config="config" :config="config"
style="width:100%;height:93%" style="width:100%;height:75%"
/> />
</div> </div>
<div class="left_mid"></div> <div class="left_mid">
<div class="left_down"></div> <div id="leida" style="width: 100%;height: 100%;"></div>
</div>
<div class="left_down">
<div id="rulePie" style="width: 100%;height: 100%;"></div>
</div>
</div> </div>
<div class="mid"> <div class="mid">
<div class="mid_top"> <div class="mid_top">
...@@ -125,7 +129,7 @@ ...@@ -125,7 +129,7 @@
<div class="down_content"> <div class="down_content">
<img class="content_title" src="../../../assets/images/title.png" /> <img class="content_title" src="../../../assets/images/title.png" />
<div style="margin: 20px 0;"> <div style="margin: 20px 0;">
<el-radio-group v-model="radio1"> <el-radio-group v-model="type" border>
<el-radio-button label="1">部门评估</el-radio-button> <el-radio-button label="1">部门评估</el-radio-button>
<el-radio-button label="2">个人评估</el-radio-button> <el-radio-button label="2">个人评估</el-radio-button>
</el-radio-group> </el-radio-group>
...@@ -173,15 +177,19 @@ ...@@ -173,15 +177,19 @@
<div class="right"> <div class="right">
<div class="right_top"> <div class="right_top">
<div class="title"> <div class="title">
部门绩效总分排名TOP10 个人绩效总分排名TOP10
</div> </div>
<dv-scroll-ranking-board <dv-scroll-ranking-board
:config="config" :config="personConfig"
style="width:100%;height:93%" style="width:100%;height:75%"
/> />
</div> </div>
<div class="right_mid"></div> <div class="right_mid">
<div class="right_down"></div> <div id="shensuPie" style="width: 100%;height: 100%;"></div>
</div>
<div class="right_down">
<div id="recordPie" style="width: 100%;height: 100%;"></div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -190,7 +198,7 @@ ...@@ -190,7 +198,7 @@
export default { export default {
data() { data() {
return { return {
radio1: "", type: "1",
form: { form: {
date1: "", date1: "",
type: [], type: [],
...@@ -199,41 +207,455 @@ export default { ...@@ -199,41 +207,455 @@ export default {
config: { config: {
data: [ data: [
{ {
name: "周口", name: "部门1",
value: 55, value: 95,
}, },
{ {
name: "南阳", name: "部门2",
value: 120, value: 90,
}, },
{ {
name: "西峡", name: "部门3",
value: 78, value: 98,
}, },
{ {
name: "驻马店", name: "部门4",
value: 66, value: 91,
}, },
{ {
name: "新乡", name: "部门5",
value: 80, value: 80,
}, },
{ {
name: "信阳", name: "部门6",
value: 45, value: 92,
},
{
name: "部门7",
value: 93,
},
{
name: "部门8",
value: 94,
}, },
{ {
name: "漯河", name: "部门9",
value: 29, value: 90,
},
{
name: "部门10",
value: 100,
}, },
], ],
}, },
personConfig: {
data: [
{
name: "个人1",
value: 95,
},
{
name: "个人2",
value: 90,
},
{
name: "个人3",
value: 98,
},
{
name: "个人4",
value: 91,
},
{
name: "个人5",
value: 80,
},
{
name: "个人6",
value: 92,
},
{
name: "个人7",
value: 93,
},
{
name: "个人8",
value: 94,
},
{
name: "个人9",
value: 90,
},
{
name: "个人10",
value: 100,
},
],
},
cricleData: [
{ value: 756, name: "考勤绩效" },
{ value: 690, name: "评价绩效" },
{ value: 559, name: "办件绩效" },
{ value: 1278, name: "效能绩效" },
],
}; };
}, },
mounted() {}, mounted() {
this.drawLeiDa();
this.drawRulePie();
this.drawCorePie();
this.drawRecordPie();
},
methods: {
drawLeiDa() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("leida"));
// 绘制图表
myChart.setOption({
title: {
text: "异常分值分布情况",
left: "left",
textStyle: {
fontSize: 18,
},
},
color: ["#56A3F1", "#FF917C"],
tooltip: {},
legend: {
data: ["加分", "扣分"],
right: 0,
},
radar: [
{
center: ["25%", "50%"],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: "circle",
axisName: {
formatter: "【{value}】",
color: "#428BD4",
},
axisLine: {
lineStyle: {
color: "rgba(211, 253, 250, 0.8)",
},
},
splitLine: {
lineStyle: {
color: "rgba(211, 253, 250, 0.8)",
},
},
},
{
indicator: [
{ text: "考勤绩效", max: 150 },
{ text: "办件绩效", max: 150 },
{ text: "评价绩效", max: 150 },
{ text: "效能绩效", max: 120 },
{ text: "其他绩效", max: 108 },
],
center: ["45%", "60%"],
radius: 80,
axisName: {
color: "#fff",
backgroundColor: "#666",
borderRadius: 10,
padding: [0, 1],
},
},
],
series: [
{
type: "radar",
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: "加分",
symbol: "rect",
symbolSize: 12,
areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色
label: {
show: true,
formatter: function(params) {
return params.value;
},
},
},
{
value: [100, 93, 50, 90, 70, 60],
areaStyle: { color: "#FF917C" }, //雷达覆盖区域背景颜色
name: "扣分",
},
],
},
],
});
},
drawRulePie() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("rulePie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
tooltip: {
trigger: "item",
},
legend: {
bottom: "0%",
right: "5%",
orient: "vertical",
textStyle: {
// 文字的样式
fontSize: 24, // 可控制每个legend项的间距
color: "#828282",
rich: {
// 通过富文本rich给每个项设置样式,下面的oneone、twotwo、threethree可以理解为"每一列"的样式
oneone: {
// 设置文字、数学、英语这一列的样式
width: 50,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
twotwo: {
// 设置10分、20分、30分这一列的样式
width: 35,
color: "#333",
fontSize: 12,
fontWeight: 600,
},
threethree: {
// 设置百分比这一列的样式
width: 20,
color: "#333",
fontSize: 12,
},
},
},
formatter: (name) => {
// formatter格式化函数动态呈现数据
console.log(name);
var total = 0; // 用于计算总数
var target; // 遍历拿到数据
for (var i = 0; i < this.cricleData.length; i++) {
total += this.cricleData[i].value;
if (this.cricleData[i].name == name) {
target = this.cricleData[i].value;
}
}
var v = ((target / total) * 100).toFixed(2);
return `{oneone|${name}} {twotwo|${target}分} {threethree|${v}%}`;
// 富文本第一列样式应用 富文本第二列样式应用 富文本第三列样式应用
},
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
// avoidLabelOverlap: false,
left: "-50%",
top: "10%",
label: {
position: "center",
fontSize: 16,
formatter: () => {
let str = "" + "\n" + `${756 + 690 + 559 + 1278}`;
return str;
},
},
labelLine: {
show: false,
},
data: this.cricleData,
},
],
});
},
drawCorePie() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("shensuPie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
tooltip: {
trigger: "item",
},
legend: {
bottom: "0%",
right: "5%",
orient: "vertical",
textStyle: {
// 文字的样式
fontSize: 24, // 可控制每个legend项的间距
color: "#828282",
rich: {
// 通过富文本rich给每个项设置样式,下面的oneone、twotwo、threethree可以理解为"每一列"的样式
oneone: {
width: 50,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
twotwo: {
width: 35,
color: "#333",
fontSize: 12,
fontWeight: 600,
},
threethree: {
// 设置百分比这一列的样式
width: 20,
color: "#333",
fontSize: 12,
},
},
},
formatter: (name) => {
// formatter格式化函数动态呈现数据
var total = 0; // 用于计算总数
var target; // 遍历拿到数据
for (var i = 0; i < this.cricleData.length; i++) {
total += this.cricleData[i].value;
if (this.cricleData[i].name == name) {
target = this.cricleData[i].value;
}
}
var v = ((target / total) * 100).toFixed(2);
return `{oneone|${name}}`;
// 富文本第一列样式应用 富文本第二列样式应用 富文本第三列样式应用
},
},
series: [
{
type: "pie",
// avoidLabelOverlap: false,
left: "-25%",
top: "10%",
label: {
normal: {
show: true,
position: "outside",
rich: {
// 通过富文本rich给每个项设置样式,下面的oneone、twotwo、threethree可以理解为"每一列"的样式
async: {
width: 50,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
hr: {
width: 35,
color: "#333",
fontSize: 12,
fontWeight: 600,
},
per: {
// 设置百分比这一列的样式
width: 20,
color: "#333",
fontSize: 12,
},
},
formatter: "{per|{d}%}",
},
},
labelLine: {
show: true,
},
data: this.cricleData,
},
],
});
},
methods: {}, drawRecordPie() {
let xData = ["未开始", "进行中", "已完结", "全部问卷"];
let yData = [2, 8, 116, 126];
let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"];
let visualMapPiecesData = [];
// visualMap: {
// pieces: [
// { value: 123, label: '123(自定义特殊颜色)', color: 'grey' }
// ]
// }
for (var i = 0; i < xData.length; i++) {
visualMapPiecesData.push({
value: yData[i],
label: xData[i],
color: colorList[i],
});
}
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("recordPie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
tooltip: {
trigger: "item",
},
polar: {
radius: [0, "90%"],
center: ["50%", "55%"],
},
angleAxis: {
show: false, // 隐藏刻度
max: 180,
startAngle: 90,
},
radiusAxis: {
show: true,
type: "category",
data: xData,
},
visualMap: {
top: 40,
x: "left",
orient: "vertical",
textStyle: {
color: "#000",
},
pieces: visualMapPiecesData,
outOfRange: {
color: "#999",
},
},
series: [
{
type: "bar",
data: yData,
coordinateSystem: "polar",
itemStyle: {
normal: {
// 定制显示(按顺序)
color: function(params) {
return colorList[params.dataIndex];
},
},
},
},
],
});
},
},
}; };
</script> </script>
...@@ -393,6 +815,21 @@ export default { ...@@ -393,6 +815,21 @@ export default {
height: 100%; height: 100%;
text-align: center; text-align: center;
padding: 40px 30px 10px 30px; padding: 40px 30px 10px 30px;
/deep/.el-radio-button {
width: 150px;
text-align: center;
border: 1px solid #eee;
}
/deep/.el-radio-button__inner {
width: 150px;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
width: 150px;
border: none;
background: #1890ff;
color: #fff;
border: 1px solid #eee;
}
.form { .form {
width: 70%; width: 70%;
margin: 0 auto; margin: 0 auto;
...@@ -411,6 +848,7 @@ export default { ...@@ -411,6 +848,7 @@ export default {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
overflow: hidden;
.title { .title {
font-weight: 600; font-weight: 600;
margin-bottom: 5px; margin-bottom: 5px;
......
<template>
<div>
<div :id="id" :style="styleObj"></div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
legendName: {
type: String,
default: "",
},
styleObj: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
watch: {
title(val) {
console.log(val);
this.drawLine();
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
myChart.setOption({
title: {
text: this.title,
left: this.legendName == "旷工率" ? "center" : "left",
textStyle: {
fontSize: this.legendName == "旷工率" ? 24 : 18,
},
},
color:'#6e98ed',
legend: {
orient: "horizontal",
right: "50px",
top: "0",
itemWidth: 20,
itemHeight: 10,
icon: "roundRect",
textStyle: {
fontSize: "14px",
color: "#000",
},
},
tooltip: {},
xAxis: {
data:
this.title == "申诉次数部门排名TOP20"
? [
"部门1",
"部门2",
"部门3",
"部门4",
"部门5",
"部门6",
"部门7",
"部门8",
"部门9",
"部门10",
"部门11",
"部门12",
"部门13",
"部门14",
"部门15",
"部门16",
"部门17",
"部门18",
"部门19",
"部门20",
]
: this.title == "申诉次数个人排名TOP20"
? [
"个人1",
"个人2",
"个人3",
"个人4",
"个人5",
"个人6",
"个人7",
"个人8",
"个人9",
"个人10",
"个人11",
"个人12",
"个人13",
"个人14",
"个人15",
"个人16",
"个人17",
"个人18",
"个人19",
"个人20",
]
: [
"规则1",
"规则2",
"规则3",
"规则4",
"规则5",
"规则6",
"规则7",
"规则8",
"规则9",
"规则10",
"规则11",
"规则12",
"规则13",
"规则14",
"规则15",
"规则16",
"规则17",
"规则18",
"规则19",
"规则20",
],
},
grid: {
left: "5%",
right: "4%",
bottom: "2%",
containLabel: true,
},
// color:[ "#61a0a8",],
yAxis: {},
series: [
{
name: this.legendName,
type: "bar",
data: [
1200,
1100,
900,
800,
1122,
1234,
1050,
1155,
1120,
1136,
1110,
1110,
1120,
1020,
1212,
1233,
1111,
1000,
1111,
1024,
],
itemStyle: {
// normal: {
// //这里是重点
// color: function(params) {
// //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
// var colorList = ["#6e98ed"];
// return colorList[params.dataIndex];
// },
// },
lineStyle: {
type: "dotted", //'dotted'虚线 'solid'实线
},
},
},
],
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig">
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
export default {
name: "PerformAttendAppealList",
components: {
drawerShow
},
mixins: [table],
created() {
},
methods: {
renderTable(tableData) {
return (
<el-table stripe data={tableData} class="total-table">
{this.columnSet.map((item) => this.renderTableColumn(item))}
</el-table>
);
},
renderTableColumn(options) {
return (
<el-table-column
prop={options.prop}
label={options.label}
width={options.width}
formatter={options.formatter}
>
</el-table-column>
);
},
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
/** 子表列元素 */
columnSet:[
{label: "申诉Id", prop: "appealId", formatter: this.formatter},
{label: "文件名称", prop: "fileName"},
{label: "文件地址", prop: "filePath"},
],
config: {
isshowTabPane:false,
search: [
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "姓名", prop: "staffName"},
{label: "窗口工号", prop: "workNum"},
{label: "所属部门", prop: "deptName"},
{label: "违规类型", prop: "ruleName"},
{label: "绩效规则", prop: "ruleName"},
{label: "扣分方式", prop: "subMethod",formatter: this.formatter},
{label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate },
{label: "扣分分值", prop: "score", formatter: this.formatter},
{label: "申诉时间", prop: "appealTime", formatter: this.formatterDate},
{label: "处理状态", prop: "processStatus",formatter: this.formatter},
/* {label: "绩效记录申诉附件信息",
width: 120,
prop: "subColumns",
formatter: (row) => {
let widthsize = this.columnSet.reduce((pre, cur) => {
return pre + Number(cur.width);
}, 50);
return (
<el-popover placement="right" width={widthsize} trigger="click">
{this.renderTable(row.performAttendAppealFilesList)}
<el-button type="text" slot="reference">详细</el-button>
</el-popover>
);
},
},*/
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
};
</script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <el-tabs v-model="activeName">
</LayoutTable> <el-tab-pane label="未处理" name="1">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" /> </el-tab-pane>
</div> <el-tab-pane label="已处理" name="2">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
</LayoutTable>
</el-tab-pane>
<el-tab-pane label="数据分析" name="3">
<div class="content">
<div class="search_box">
<div class="search">
<el-select
v-model="dateValue"
placeholder="请选择"
style="margin: 0 10px;"
>
<el-option
v-for="item in optionsMonths"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary">搜索</el-button>
</div>
</div>
<div class="data_box">
<div class="top">
<div class="box">
<bar-charts
:title="'申诉次数部门排名TOP20'"
:id="'dept_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div>
<div class="box">
<bar-charts
:title="'申诉次数个人排名TOP20'"
:id="'person_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div>
</div>
<div class="down">
<bar-charts
:title="'申诉次数规则排名TOP20'"
:id="'rule_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '1800px', height: '320px' }"
/>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- <bar-charts
:title="'部门扣分排名TOP10'"
:id="'koufen_10'"
:legendName="'部门扣分分值'"
:styleObj="{ width: '100%', height: '300px' }"
/> -->
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { import BarCharts from "./components/BarCharts.vue";
name: "PerformAttendAppealList", export default {
components: { name: "PerformAttendAppealList",
drawerShow components: {
}, drawerShow,
mixins: [table], BarCharts,
created() { },
}, mixins: [table],
methods: { created() {},
renderTable(tableData) { methods: {
return ( renderTable(tableData) {
<el-table stripe data={tableData} class="total-table"> return (
{this.columnSet.map((item) => this.renderTableColumn(item))} <el-table stripe data={tableData} class="total-table">
</el-table> {this.columnSet.map((item) => this.renderTableColumn(item))}
); </el-table>
}, );
renderTableColumn(options) { },
return ( renderTableColumn(options) {
<el-table-column return (
prop={options.prop} <el-table-column
label={options.label} prop={options.prop}
width={options.width} label={options.label}
formatter={options.formatter} width={options.width}
> formatter={options.formatter}
</el-table-column> ></el-table-column>
); );
}, },
/** 重写新增方法 */ /** 重写新增方法 */
toAdd(row) { toAdd(row) {
this.$refs.drawerform.add(row); this.$refs.drawerform.add(row);
}, },
/** 重写编辑方法 */ /** 重写编辑方法 */
toEdit(row) { toEdit(row) {
this.$refs.drawerform.edit(row); this.$refs.drawerform.edit(row);
}, },
/** 重写查看方法 */ /** 重写查看方法 */
toView(row) { toView(row) {
this.$refs.drawerform.view(row); this.$refs.drawerform.view(row);
}, },
},
}, data() {
data() { return {
return { /** 子表列元素 */
/** 子表列元素 */ columnSet: [
columnSet:[ { label: "申诉Id", prop: "appealId", formatter: this.formatter },
{label: "申诉Id", prop: "appealId", formatter: this.formatter}, { label: "文件名称", prop: "fileName" },
{label: "文件名称", prop: "fileName"}, { label: "文件地址", prop: "filePath" },
{label: "文件地址", prop: "filePath"}, ],
], config: {
config: { isshowTabPane: false,
isshowTabPane:false, search: [],
search: [ columns: [
], { type: "selection", width: 60 },
columns: [ { type: "index", label: "序号", width: 50 },
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "姓名", prop: "staffName"}, { label: "姓名", prop: "staffName" },
{label: "窗口工号", prop: "workNum"}, { label: "窗口工号", prop: "workNum" },
{label: "所属部门", prop: "deptName"}, { label: "所属部门", prop: "deptName" },
{label: "违规类型", prop: "ruleName"}, { label: "违规类型", prop: "ruleName" },
{label: "绩效规则", prop: "ruleName"}, { label: "绩效规则", prop: "ruleName" },
{label: "扣分方式", prop: "subMethod",formatter: this.formatter}, { label: "扣分方式", prop: "subMethod", formatter: this.formatter },
{label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate }, {
label: "扣分时间",
prop: "attendanceDate",
formatter: this.formatterDate,
},
{label: "扣分分值", prop: "score", formatter: this.formatter}, { label: "扣分分值", prop: "score", formatter: this.formatter },
{
label: "申诉时间",
prop: "appealTime",
formatter: this.formatterDate,
},
{label: "申诉时间", prop: "appealTime", formatter: this.formatterDate}, {
label: "处理状态",
prop: "processStatus",
formatter: this.formatter,
},
{label: "处理状态", prop: "processStatus",formatter: this.formatter}, /* {label: "绩效记录申诉附件信息",
/* {label: "绩效记录申诉附件信息",
width: 120, width: 120,
prop: "subColumns", prop: "subColumns",
formatter: (row) => { formatter: (row) => {
...@@ -104,18 +175,112 @@ ...@@ -104,18 +175,112 @@
); );
}, },
},*/ },*/
{ {
label: "操作", label: "操作",
width: 240, width: 240,
formatter: row => { formatter: (row) => {
return ( return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> <table-buttons
); noAdd
} row={row}
} onEdit={this.toEdit}
] onView={this.toView}
} onDel={this.toDel}
}; />
} );
},
},
],
},
activeName: "1",
optionsMonths: [
{
value: "1",
label: "1月",
},
{
value: "2",
label: "2月",
},
{
value: "3",
label: "3月",
},
{
value: "4",
label: "4月",
},
{
value: "5",
label: "5月",
},
{
value: "6",
label: "6月",
},
{
value: "7",
label: "7月",
},
{
value: "8",
label: "8月",
},
{
value: "9",
label: "9月",
},
{
value: "10",
label: "10月",
},
{
value: "11",
label: "11月",
},
{
value: "12",
label: "12月",
},
],
dateValue: "1",
}; };
},
};
</script> </script>
<style lang="less" scoped>
.page {
width: 100%;
height: 100%;
overflow: hidden;
/deep/.el-tabs__item {
width: 120px;
font-size: 18px;
text-align: center;
}
.content {
width: 100%;
height: 730px;
overflow: hidden;
.search_box {
width: 100%;
height: auto;
text-align: right;
}
.data_box {
width: 100%;
height: 100%;
.top {
width: 100%;
height: 380px;
display: flex;
justify-content: space-between;
.box {
width: 49%;
height: 100%;
}
}
}
}
}
</style>
<template>
<div>qwe</div>
</template>
<script>
export default {
name: "AdminList",
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped></style>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
</LayoutTable>
<dialog-show ref="dialogform" @ok="getData" />
<dialog-show ref="dialogform" @ok="getData" /> </div>
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "PerformPerposeList", name: "PerformPerposeList",
components: { components: {
dialogShow dialogShow,
}, },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
methods: { /** 重写新增方法 */
/** 重写新增方法 */ toAdd(row) {
toAdd(row) { this.$refs.dialogform.add(row);
this.$refs.dialogform.add(row); },
}, /** 重写编辑方法 */
/** 重写编辑方法 */ toEdit(row) {
toEdit(row) { this.$refs.dialogform.edit(row);
this.$refs.dialogform.edit(row); },
}, /** 重写查看方法 */
/** 重写查看方法 */ toView(row) {
toView(row) { this.$refs.dialogform.view(row);
this.$refs.dialogform.view(row); },
}, },
data() {
}, return {
data() { config: {
return { isshowTabPane: true,
config: { search: [],
isshowTabPane:true, columns: [
search: [ { type: "selection", width: 60 },
], { type: "index", label: "序号", width: 50 },
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "负责人名称", prop: "ownerName"}, { label: "负责人名称", prop: "ownerName" },
{label: "请假类型", prop: "assessmentType",formatter: this.formatter}, {
label: "请假类型",
prop: "assessmentType",
formatter: this.formatter,
},
{label: "比例", prop: "ratio", formatter: this.formatter}, { label: "比例", prop: "ratio", formatter: this.formatter },
{label: "创建时间", prop: "createTime", formatter: this.formatterDate}, {
{ label: "创建时间",
label: "操作", prop: "createTime",
width: 240, formatter: this.formatterDate,
formatter: row => { },
return ( {
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> label: "操作",
); width: 240,
} formatter: (row) => {
} return (
] <table-buttons
} noAdd
}; row={row}
} onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
],
},
}; };
},
};
</script> </script>
<template>
<div class="attend_page">
<div class="left_box">
<h3>分类管理</h3>
<el-button type="primary" style="margin:20px 0" @click="addCate">
+ 新增分类</el-button
>
<div class="left_content">
<div
:class="index == i ? 'category_box check' : 'category_box'"
v-for="(val, i) in dataArr"
:key="i"
@click="handleClick(val, i)"
>
<span>{{ val.name }}</span>
<div>
<i class="el-icon-edit-outline" @click="toEdit(val)"></i>
<i class="el-icon-delete" @click="toDel(val)"></i>
</div>
</div>
</div>
</div>
<div class="right_box">
<h3>规则管理</h3>
<div class="search_box">
<el-button type="primary" style="margin:20px 0" @click="addRules">
+ 新增规则</el-button
>
<div class="search">
<el-input
placeholder="请输入考核内容关键字搜索"
style="width: 300px;margin-right: 10px;"
></el-input>
<el-button type="primary"> 搜索 </el-button>
</div>
</div>
<div class="table_box">
<LayoutTable
:data="tableData"
notAdd
notDel
notSearch
:config="tableConfig"
>
</LayoutTable>
</div>
</div>
<drawer-show ref="drawerform" @ok="getData" />
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template>
<script>
import drawerShow from "../drawershow";
import dialogShow from "../dialogshow";
import table from "@/assets/mixins/table";
export default {
name: "AdminAttendIndex",
components: {
drawerShow,
dialogShow,
},
mixins: [table],
props: {
activeName: {
type: String,
default: () => "",
},
},
data() {
return {
index: -1,
dataArr: [],
config: {
isshowTabPane: false,
search: [],
columns: [
{ type: "selection", width: 60 },
{ type: "index", label: "序号", width: 50 },
{ label: "分类", prop: "categoryId", formatter: this.formatter },
{ label: "考核名称", prop: "name" },
{ label: "评分标准", prop: "content" },
{ label: "增减类型", prop: "subAddType", formatter: this.formatter },
{ label: "分值", prop: "score" },
{ label: "负责人分值", prop: "ownerScore" },
{
label: "创建用户",
prop: "createUserId",
formatter: this.formatter,
},
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noView
row={row}
onEdit={this.eddRules}
onDel={this.toDelRules}
/>
);
},
},
],
},
};
},
created() {
// this.getData();
},
methods: {
handleClick(val, i) {
this.index = i;
},
addRules() {
this.$refs.drawerform.add();
},
eddRules(row) {
this.$refs.drawerform.edit(row);
},
addCate() {
this.$refs.dialogform.add();
},
toDelRules(val) {
console.log(val);
this.$get("/perform/rules/delete", { id: val }).then((res) => {
this.$message.success(res.msg);
this.getKaoQin();
});
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.dialogform.edit(row);
},
toDel(val) {
this.$get("/perform/rules/category/delete", { id: val.id }).then(
(res) => {
this.$message.success(res.msg);
this.getData();
}
);
},
async getData() {
await this.$post("/perform/rules/category/list").then((res) => {
this.getKaoQin();
if (res.code == 1) {
this.dataArr = res.data.data;
} else {
this.dataArr = [];
}
});
},
async getKaoQin() {
await this.$post("/perform/rules/list", { type: this.activeName }).then(
(res) => {
if (res.code == 1) {
this.tableData = res.data;
console.log(res.data);
this.$forceUpdate(this.tableData);
} else {
this.tableData = {};
}
}
);
},
},
};
</script>
<style lang="less" scoped>
.attend_page {
width: 100%;
height: 100%;
display: flex;
h3 {
border-width: 0px;
display: flex;
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
font-weight: 700;
font-style: normal;
}
.left_box {
width: 344px;
height: 735px;
background-color: rgba(242, 247, 249, 0.447058823529412);
border: none;
border-radius: 8px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
padding: 20px;
.left_content {
width: 100%;
height: 600px;
overflow-y: auto;
.category_box {
display: flex;
justify-content: space-between;
align-items: center;
border-width: 0px;
width: 304px;
height: 48px;
background: inherit;
background: #ffffff;
border: none;
border-radius: 4px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #000;
text-align: left;
padding: 0 10px;
border: 1px solid #ddd;
margin-bottom: 20px;
&:hover {
background-color: rgba(22, 202, 122, 1);
color: #ffffff;
border: none;
}
i {
font-style: normal;
font-size: 18px;
margin: 0 5px;
cursor: pointer;
}
}
.check {
background-color: rgba(22, 202, 122, 1);
color: #ffffff;
border: none;
}
}
}
.right_box {
flex: 1;
padding: 20px;
.search_box {
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.table_box {
width: 100%;
height: 100%;
}
}
}
</style>
<template>
<!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field
label="绩效规则id"
prop="ruleId"
v-model="form.ruleId"
placeholder="请输入绩效规则id"
/>
<Field
label="规则简称"
prop="ruleBrief"
v-model="form.ruleBrief"
placeholder="请输入规则简称"
/>
<Field
label="分类名称"
prop="name"
v-model="form.name"
placeholder="请输入分类名称"
/>
<Field
label="规则类型"
prop="type"
v-model="form.type"
type="select"
:enumData="dict.type"
placeholder="请选择规则类型"
/>
<Field
label="备注"
prop="remark"
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
v-if="pageInfo.type !== 'view'"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
export default {
mixins: [form],
components: {
dialogShow,
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "绩效规则分类信息",
// 是否显示弹出层
open: false,
toString: ["type"],
// 表单校验
rules: {},
};
},
methods: {
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "perform/rules/category/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改绩效规则分类信息";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "perform/rules/category/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增绩效规则分类信息";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "perform/rules/category/view";
this.getData();
this.pageInfo.type = "view";
this.title = "绩效规则分类信息详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
ruleId: null,
ruleBrief: "",
name: "",
type: 1,
remark: "",
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
},
};
</script>
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-drawer <el-drawer
:title="title" :title="title"
:visible.sync="open" :visible.sync="open"
:direction="direction" :direction="direction"
size="50%"> size="50%"
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> >
<el-row> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<Field :span="20" label="分类" prop="categoryId" v-model="form.categoryId" :enumData="dict.categoryId" type="select" placeholder="请选择分类"/> <el-row>
<Field
:span="20"
label="分类"
prop="categoryId"
v-model="form.categoryId"
:enumData="dict.categoryId"
type="select"
placeholder="请选择分类"
/>
<Field :span="20" label="考核内容简称" prop="name" v-model="form.name" placeholder="请输入考核内容简称"/> <Field
<Field :span="20" label="评分标准" prop="content" v-model="form.content" type="textarea" placeholder="请输入评分标准"/> :span="20"
<Field :span="20" label="增减类型" prop="subAddType" v-model="form.subAddType" type="select" :enumData="dict.subAddType" placeholder="请选择增减类型"/> label="考核内容简称"
<Field :span="20" label="扣分" prop="score" v-model="form.score" placeholder="请输入扣分或增加分值"/> prop="name"
<Field :span="20" label="关联负责人" prop="assoOwner" v-model="form.assoOwner" type="radio" :enumData="dict.assoOwner" placeholder="请选择是否关联负责人"/> v-model="form.name"
<Field :span="20" v-if="form.assoOwner==1" label="负责人扣分" prop="ownerScore" v-model="form.ownerScore" placeholder="请输入负责人扣分或增加分值"/> placeholder="请输入考核内容简称"
<Field :span="20" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> />
<Field
:span="20"
label="评分标准"
prop="content"
v-model="form.content"
type="textarea"
placeholder="请输入评分标准"
/>
<Field
:span="20"
label="增减类型"
prop="subAddType"
v-model="form.subAddType"
type="select"
:enumData="dict.subAddType"
placeholder="请选择增减类型"
/>
<Field
:span="20"
label="扣分"
prop="score"
v-model="form.score"
placeholder="请输入扣分或增加分值"
/>
<Field
:span="20"
label="关联负责人"
prop="assoOwner"
v-model="form.assoOwner"
type="radio"
:enumData="dict.assoOwner"
placeholder="请选择是否关联负责人"
/>
<Field
:span="20"
v-if="form.assoOwner == 1"
label="负责人扣分"
prop="ownerScore"
v-model="form.ownerScore"
placeholder="请输入负责人扣分或增加分值"
/>
<Field
:span="20"
label="备注"
prop="remark"
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-row>
<form-buttons
</el-row> v-if="pageInfo.type != 'view'"
@submit="submitForm"
<form-buttons v-if="pageInfo.type!='view'" @submit='submitForm' noCancelBtn /> noCancelBtn
</el-form> />
</el-form>
</el-drawer> </el-drawer>
</template> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
export default { export default {
name: "PerformRulesDetail", name: "PerformRulesDetail",
mixins: [form], mixins: [form],
components: { components: {},
created() {},
}, data() {
created() { return {
// 遮罩层
}, loading: true,
data() { // 弹出层标题
return { title: "规则",
// 遮罩层 // 是否显示弹出层
loading: true, open: false,
// 弹出层标题 direction: "rtl",
title: "绩效规则信息", toString: ["subAddType", "assoOwner", "type", "categoryId"],
// 是否显示弹出层 toDate: [],
open: false, // 表单校验
direction:"rtl", rules: {},
toString:[ urls: {
"subAddType", currUrl: "/perform/rules/list",
"assoOwner", editUrl: "/perform/rules/edit",
"type", saveUrl: "/perform/rules/save",
"categoryId" },
], };
toDate:[ },
],
// 表单校验
rules: {
},
urls: {
currUrl: "/perform/rules/list",
editUrl: "/perform/rules/edit",
saveUrl: "/perform/rules/save",
},
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl ="perform/rules/edit"; this.urls.currUrl = "perform/rules/edit";
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改绩效规则信息"; this.title = "修改规则";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.urls.currUrl = "perform/rules/add"; this.urls.currUrl = "perform/rules/add";
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增绩效规则信息"; this.title = "新增规则";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl ="perform/rules/view"; this.urls.currUrl = "perform/rules/view";
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "绩效规则信息详细"; this.title = "规则信息详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.form.type=1 this.form.type = 1;
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
categoryId : null, categoryId: null,
categoryName : "", categoryName: "",
name : "", name: "",
content : "", content: "",
subAddType : 1, subAddType: 1,
score : 0.00, score: 0.0,
assoOwner : 0, assoOwner: 0,
ownerScore : 0.00, ownerScore: 0.0,
remark : "", remark: "",
type : 1, type: 1,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
<template>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
export default {
name: "PerformRulesList",
components: {
drawerShow,
},
mixins: [table],
created() {
console.log("route", this.$route);
this.changePath("/perform/rules");
this.query = Object.assign({}, this.query, { type: 1 });
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
config: {
isshowTabPane: true,
search: [],
columns: [
{ type: "selection", width: 60 },
{ type: "index", label: "序号", width: 50 },
{ label: "分类", prop: "categoryId", formatter: this.formatter },
{ label: "考核名称", prop: "name" },
{ label: "评分标准", prop: "content" },
{ label: "增减类型", prop: "subAddType", formatter: this.formatter },
{ label: "分值", prop: "score" },
{ label: "负责人分值", prop: "ownerScore" },
{
label: "创建用户",
prop: "createUserId",
formatter: this.formatter,
},
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
],
},
};
},
};
</script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <el-tabs v-model="activeName" @tab-click="handleClick">
</LayoutTable> <el-tab-pane label="考勤绩效指标" name="1">
<attend-index v-if="activeName == 1" :activeName="activeName" />
</el-tab-pane>
<drawer-show ref="drawerform" @ok="getData" /> <el-tab-pane label="评价绩效指标" name="2">
</div> <attend-index v-if="activeName == 2" :activeName="activeName" />
</el-tab-pane>
<el-tab-pane label="办件绩效指标" name="3">
<attend-index v-if="activeName == 3" :activeName="activeName" />
</el-tab-pane>
<el-tab-pane label="效能绩效指标" name="4">
<attend-index v-if="activeName == 4" :activeName="activeName" />
</el-tab-pane>
<el-tab-pane label="其他绩效指标" name="5">
<attend-index v-if="activeName == 5" :activeName="activeName" />
</el-tab-pane>
</el-tabs>
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ import AttendIndex from "./components/AttendIndex.vue";
import drawerShow from "./drawershow"; export default {
import table from "@/assets/mixins/table"; name: "PerformRulesList",
export default { components: { AttendIndex },
name: "PerformRulesList", created() {},
components: { methods: {
drawerShow handleClick(tab, event) {
},
mixins: [table], // this.$forceUpdate(this.activeName);
created() { },
console.log("route",this.$route) },
this.changePath("/perform/rules") data() {
this.query = Object.assign({}, this.query, {type:1}); return {
}, activeName: "1",
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
config: {
isshowTabPane:true,
search: [
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "分类", prop: "categoryId", formatter: this.formatter},
{label: "考核名称", prop: "name"},
{label: "评分标准", prop: "content"},
{label: "增减类型", prop: "subAddType",formatter: this.formatter},
{label: "分值", prop: "score"},
{label: "负责人分值", prop: "ownerScore"},
{label: "创建用户", prop: "createUserId", formatter: this.formatter},
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
}; };
},
};
</script> </script>
<style lang="less" scoped>
.page {
width: 100%;
height: 100%;
overflow: hidden;
/deep/.el-tabs__item {
width: 180px;
font-size: 18px;
text-align: center;
}
}
</style>
<template> <template>
<layout-view> <layout-view>
<el-descriptions :title="title" :column="column" :size="size" :colon="false" border> <el-descriptions
<template slot="title"> :title="title"
<i class="el-icon-tickets"></i> :column="column"
基本详细信息 :size="size"
</template> :colon="false"
<template slot="extra"> border
<el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button> >
</template> <template slot="title">
<el-descriptions-item label="分类id" label-class-name="labelClass" content-class-name="contentClass"> <i class="el-icon-tickets"></i>
{{form.categoryId}} 基本详细信息
</el-descriptions-item> </template>
<el-descriptions-item label="分类名称" label-class-name="labelClass" content-class-name="contentClass"> <template slot="extra">
{{form.categoryName}} <el-button type="primary" @click="$router.go(-1)" size="small"
</el-descriptions-item> >返回</el-button
<el-descriptions-item label="考核内容简称" label-class-name="labelClass" content-class-name="contentClass"> >
{{form.name}} </template>
</el-descriptions-item> <el-descriptions-item
<el-descriptions-item label="评分标准" label-class-name="labelClass" content-class-name="contentClass"> label="分类id"
{{form.content}} label-class-name="labelClass"
</el-descriptions-item> content-class-name="contentClass"
<el-descriptions-item label="增减类型" label-class-name="labelClass" content-class-name="contentClass"> >
{{ util_formatters("subAddType", form.subAddType) }} {{ form.categoryId }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="扣分或增加分值" label-class-name="labelClass" content-class-name="contentClass"> <el-descriptions-item
{{form.score}} label="分类名称"
</el-descriptions-item> label-class-name="labelClass"
<el-descriptions-item label="是否关联负责人" label-class-name="labelClass" content-class-name="contentClass"> content-class-name="contentClass"
{{ util_formatters("assoOwner", form.assoOwner) }} >
</el-descriptions-item> {{ form.categoryName }}
<el-descriptions-item label="负责人扣分或增加分值" label-class-name="labelClass" content-class-name="contentClass"> </el-descriptions-item>
{{form.ownerScore}} <el-descriptions-item
</el-descriptions-item> label="考核内容简称"
<el-descriptions-item label="备注" label-class-name="labelClass" content-class-name="contentClass"> label-class-name="labelClass"
{{form.remark}} content-class-name="contentClass"
</el-descriptions-item> >
<el-descriptions-item label="规则类型" label-class-name="labelClass" content-class-name="contentClass"> {{ form.name }}
{{ util_formatters("type", form.type) }} </el-descriptions-item>
</el-descriptions-item> <el-descriptions-item
</el-descriptions> label="评分标准"
label-class-name="labelClass"
</layout-view> content-class-name="contentClass"
>
{{ form.content }}
</el-descriptions-item>
<el-descriptions-item
label="增减类型"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ util_formatters("subAddType", form.subAddType) }}
</el-descriptions-item>
<el-descriptions-item
label="扣分或增加分值"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ form.score }}
</el-descriptions-item>
<el-descriptions-item
label="是否关联负责人"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ util_formatters("assoOwner", form.assoOwner) }}
</el-descriptions-item>
<el-descriptions-item
label="负责人扣分或增加分值"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ form.ownerScore }}
</el-descriptions-item>
<el-descriptions-item
label="备注"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ form.remark }}
</el-descriptions-item>
<el-descriptions-item
label="规则类型"
label-class-name="labelClass"
content-class-name="contentClass"
>
{{ util_formatters("type", form.type) }}
</el-descriptions-item>
</el-descriptions>
</layout-view>
</template> </template>
<script> <script>
import view from "@/assets/mixins/view"; import view from "@/assets/mixins/view";
export default { export default {
mixins: [view], mixins: [view],
components: { components: {},
}, methods: {},
methods: { data() {
return {
}, size: "small",
data() { column: 2,
return { toString: ["subAddType", "assoOwner", "type"],
size:"small", toArrays: [],
column:2, toDate: [],
toString:[ };
"subAddType", },
"assoOwner", };
"type",
],
toArrays: [
],
toDate: [
]
}
}
}
</script> </script>
<style lang="less"> <style lang="less">
.labelClass{ .labelClass {
width: 200px; width: 200px;
} }
.el-descriptions__body{ .el-descriptions__body {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
color: #606266; color: #606266;
background-color: #FFF; background-color: #fff;
} }
.contentClass{ .contentClass {
width: 600px; width: 600px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<Field label="绩效规则id" prop="ruleId" v-model="form.ruleId" placeholder="请输入绩效规则id"/> <Field
<Field label="规则简称" prop="ruleBrief" v-model="form.ruleBrief" placeholder="请输入规则简称"/> label="绩效规则id"
<Field label="分类名称" prop="name" v-model="form.name" placeholder="请输入分类名称"/> prop="ruleId"
<Field label="规则类型" prop="type" v-model="form.type" type="select" :enumData="dict.type" placeholder="请选择规则类型"/> v-model="form.ruleId"
<Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> placeholder="请输入绩效规则id"
/>
</el-row> <Field
label="规则简称"
</el-form> prop="ruleBrief"
<div slot="footer" class="dialog-footer"> v-model="form.ruleBrief"
<el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button> placeholder="请输入规则简称"
<el-button @click="cancel">取 消</el-button> />
</div> <Field
</el-dialog> label="分类名称"
prop="name"
v-model="form.name"
placeholder="请输入分类名称"
/>
<Field
label="规则类型"
prop="type"
v-model="form.type"
type="select"
:enumData="dict.type"
placeholder="请选择规则类型"
/>
<Field
label="备注"
prop="remark"
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
v-if="pageInfo.type !== 'view'"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
dialogShow , dialogShow,
}, },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 弹出层标题 // 弹出层标题
title: "绩效规则分类信息", title: "绩效规则分类信息",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
toString:[ toString: ["type"],
"type", // 表单校验
], rules: {},
// 表单校验 };
rules: { },
}
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl ="perform/rules/category/edit"; this.urls.currUrl = "perform/rules/category/edit";
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改绩效规则分类信息"; this.title = "修改绩效规则分类信息";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.urls.currUrl = "perform/rules/category/add"; this.urls.currUrl = "perform/rules/category/add";
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增绩效规则分类信息"; this.title = "新增绩效规则分类信息";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl ="perform/rules/category/view"; this.urls.currUrl = "perform/rules/category/view";
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "绩效规则分类信息详细"; this.title = "绩效规则分类信息详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
ruleId : null, ruleId: null,
ruleBrief : "", ruleBrief: "",
name : "", name: "",
type : 1, type: 1,
remark : "", remark: "",
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
</LayoutTable>
<dialog-show ref="dialogform" @ok="getData" />
<dialog-show ref="dialogform" @ok="getData" /> </div>
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "PerformRulesCategoryList", name: "PerformRulesCategoryList",
components: { components: {
dialogShow dialogShow,
}, },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
methods: { /** 重写新增方法 */
/** 重写新增方法 */ toAdd(row) {
toAdd(row) { this.$refs.dialogform.add(row);
this.$refs.dialogform.add(row); },
}, /** 重写编辑方法 */
/** 重写编辑方法 */ toEdit(row) {
toEdit(row) { this.$refs.dialogform.edit(row);
this.$refs.dialogform.edit(row); },
}, /** 重写查看方法 */
/** 重写查看方法 */ toView(row) {
toView(row) { this.$refs.dialogform.view(row);
this.$refs.dialogform.view(row); },
}, },
data() {
}, return {
data() { config: {
return { isshowTabPane: true,
config: { search: [],
isshowTabPane:true, columns: [
search: [ { type: "selection", width: 60 },
], { type: "index", label: "序号", width: 50 },
columns: [ { label: "分类名称", prop: "name" },
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "分类名称", prop: "name"},
{label: "规则类型", prop: "type",formatter: this.formatter}, { label: "规则类型", prop: "type", formatter: this.formatter },
{label: "创建用户", prop: "createUserId", formatter: this.formatter}, {
{ label: "创建用户",
label: "操作", prop: "createUserId",
width: 240, formatter: this.formatter,
formatter: row => { },
return ( {
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> label: "操作",
); width: 240,
} formatter: (row) => {
} return (
] <table-buttons
} noAdd
}; row={row}
} onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
],
},
}; };
},
};
</script> </script>
<template>
<div>
<div :id="id" :style="styleObj"></div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
legendName: {
type: String,
default: "",
},
styleObj: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
watch: {
title(val) {
console.log(val);
this.drawLine();
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
myChart.setOption({
title: {
text: this.title,
left: this.legendName == "旷工率" ? "center" : "left",
textStyle: {
fontSize: this.legendName == "旷工率" ? 24 : 18,
},
},
color:'#6e98ed',
legend: {
orient: "horizontal",
right: "50px",
top: "0",
itemWidth: 20,
itemHeight: 10,
icon: "roundRect",
textStyle: {
fontSize: "14px",
color: "#000",
},
},
tooltip: {},
xAxis: {
data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
},
grid: {
left: "5%",
right: "4%",
bottom: "2%",
containLabel: true,
},
// color:[ "#61a0a8",],
yAxis: {},
series: [
{
name: this.legendName,
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
lineStyle: {
type: "dotted", //'dotted'虚线 'solid'实线
},
},
},
],
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div>
<div :id="id" :style="styleObj"></div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
legendName: {
type: String,
default: "",
},
styleObj: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
watch: {
title(val) {
console.log(val);
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
myChart.setOption({
title: { text: this.title },
legend: {
orient: "horizontal",
left: "center",
top: "0",
itemWidth: 20,
itemHeight: 10,
icon: "roundRect",
textStyle: {
fontSize: "14px",
color: "#000",
},
},
tooltip: {},
color:'#6e98ed',
xAxis: {
type: "category",
data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
},
grid: {
left: "3%",
right: "4%",
bottom: "2%",
containLabel: true,
},
yAxis: {},
series: [
{
name: this.legendName,
type: "line",
data: [10, 20, 30, 90, 100, 100, 120],
smooth: true,
// itemStyle: {
// lineStyle: {
// type: "dotted", //'dotted'虚线 'solid'实线
// },
// },
},
],
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div>
<div :id="id" :style="styleObj"></div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
legendName: {
type: String,
default: "",
},
styleObj: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
watch: {
title(val) {
console.log(val);
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
myChart.setOption({
title: { text: this.title },
legend: {
orient: "vertical",
left: "right",
bottom: "0",
itemWidth: 20,
itemHeight: 10,
icon: "roundRect",
textStyle: {
fontSize: "14px",
color: "#000",
},
},
// color:'#6e98ed',
tooltip: {
trigger: "item",
},
grid: {
left: "3%",
right: "4%",
containLabel: true,
},
series: [
{
name: this.legendName,
type: "pie",
radius: "65%",
data: [
{ value: 1048, name: "部门1" },
{ value: 735, name: "部门2" },
{ value: 580, name: "部门3" },
{ value: 484, name: "部门4" },
{ value: 300, name: "部门5" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field
label="负责人id号"
prop="ownerId"
v-model="form.ownerId"
placeholder="请输入负责人id号"
/>
<Field
label="负责人名称"
prop="ownerName"
v-model="form.ownerName"
placeholder="请输入负责人名称"
/>
<Field
label="窗口工作人员id号"
prop="staffId"
v-model="form.staffId"
placeholder="请输入窗口工作人员id号"
/>
<Field
label="请假类型"
prop="assessmentType"
v-model="form.assessmentType"
type="select"
:enumData="dict.assessmentType"
placeholder="请选择请假类型"
/>
<Field
label="考核范围"
prop="assessmentScope"
v-model="form.assessmentScope"
type="select"
:enumData="dict.assessmentScope"
placeholder="请选择考核范围"
/>
<Field
label="考比较类型"
prop="compareScope"
v-model="form.compareScope"
type="select"
:enumData="dict.compareScope"
placeholder="请选择考比较类型"
/>
<Field
label="比例"
prop="ratio"
v-model="form.ratio"
placeholder="请输入比例"
/>
<Field
label="周期类型"
prop="periodType"
v-model="form.periodType"
type="select"
:enumData="dict.periodType"
placeholder="请选择周期类型"
/>
<Field
label="年"
prop="year"
v-model="form.year"
placeholder="请输入年"
/>
<Field
label="月"
prop="month"
v-model="form.month"
type="select"
:enumData="dict.month"
placeholder="请选择月"
/>
<Field
label="半年类型"
prop="halfYear"
v-model="form.halfYear"
type="select"
:enumData="dict.halfYear"
placeholder="请选择半年类型"
/>
<Field
label="半年类型"
prop="halfYear"
v-model="form.halfYear"
type="select"
:enumData="dict.halfYear"
placeholder="请选择半年类型"
/>
<Field
label="季度类型"
prop="quarter"
v-model="form.quarter"
type="select"
:enumData="dict.quarter"
placeholder="请选择季度类型"
/>
<Field
label="负责人,多个逗号分割"
prop="leaders"
v-model="form.leaders"
type="textarea"
placeholder="请输入负责人,多个逗号分割"
/>
<Field
label="负责人电话,多个逗号分割"
prop="leaderMobiles"
v-model="form.leaderMobiles"
type="textarea"
placeholder="请输入负责人电话,多个逗号分割"
/>
<Field
label="备注"
prop="remark"
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
v-if="pageInfo.type !== 'view'"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
export default {
mixins: [form],
components: {
dialogShow,
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "考核目标",
// 是否显示弹出层
open: false,
toString: [
"assessmentType",
"assessmentScope",
"compareScope",
"periodType",
"month",
"halfYear",
"halfYear",
"quarter",
],
// 表单校验
rules: {
year: [{ required: true, message: "请输入年", trigger: "blur" }],
month: [{ required: true, message: "请输入月", trigger: "blur" }],
},
};
},
methods: {
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "perform/perpose/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改考核目标";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "perform/perpose/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增考核目标";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "perform/perpose/view";
this.getData();
this.pageInfo.type = "view";
this.title = "考核目标详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
ownerId: null,
ownerName: "",
staffId: null,
assessmentType: null,
assessmentScope: 1,
compareScope: 1,
ratio: 0.0,
periodType: 1,
year: null,
month: null,
halfYear: 1,
halfYear: 1,
quarter: 1,
leaders: "",
leaderMobiles: "",
remark: "",
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
},
};
</script>
<template>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig">
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
export default {
name: "StaffPerformStatList",
components: {
drawerShow
},
mixins: [table],
created() {
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
config: {
isshowTabPane:true,
search: [
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "部门名称", prop: "deptName"},
{label: "考勤绩效指标增加分数", prop: "attendScoreAdd", formatter: this.formatter},
{label: "考勤绩效指标扣减分数", prop: "attendScoreSub", formatter: this.formatter},
{label: "评价绩效指标增加分数", prop: "assessScoreAdd", formatter: this.formatter},
{label: "评价绩效指标扣减分数", prop: "assessScoreSub", formatter: this.formatter},
{label: "办件绩效指标增加分数", prop: "workScoreAdd", formatter: this.formatter},
{label: "办件绩效指标扣减分数", prop: "workScoreSub", formatter: this.formatter},
{label: "效能绩效指标增加分数", prop: "effectScoreAdd", formatter: this.formatter},
{label: "效能绩效指标扣减分数", prop: "effectScoreSub", formatter: this.formatter},
{label: "其它绩效指标增加分数", prop: "otherScoreAdd", formatter: this.formatter},
{label: "其它绩效指标扣减分数", prop: "otherScoreSub", formatter: this.formatter},
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
};
</script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <el-tabs v-model="activeName" @tab-click="handleClick">
</LayoutTable> <el-tab-pane label="目标看板" name="1">
<div class="content">
<div class="top">
<drawer-show ref="drawerform" @ok="getData" /> <el-radio-group v-model="type">
</div> <el-radio-button label="1">按部门</el-radio-button>
<el-radio-button label="2">按个人</el-radio-button>
</el-radio-group>
</div>
<div class="mid">
<div class="mid_top">
<div class="jixiaozongfen">
<bar-charts
:title="'绩效总分排名'"
:id="'jixiaozongfen'"
:legendName="'绩效总分'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
<div class="jixiaopingjunfen">
<line-charts
:title="'绩效平均分排名'"
:id="'jixiaopingjunfen'"
:legendName="'绩效平均分'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
</div>
<div class="mid_down">
<div class="top_10 box">
<bar-charts
:title="'部门加分排名TOP10'"
:id="'top_10'"
:legendName="'部门加分分值'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
<div class="jiafen box">
<pie-charts
:title="'部门加分整体分布'"
:id="'jiafen'"
:legendName="'部门加分'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
<div class="koufen_10 box">
<bar-charts
:title="'部门扣分排名TOP10'"
:id="'koufen_10'"
:legendName="'部门扣分分值'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
<div class="koufen box">
<pie-charts
:title="'部门扣分整体分布'"
:id="'koufen'"
:legendName="'部门扣分'"
:styleObj="{ width: '100%', height: '300px' }"
/>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="目标对齐" name="2">
<div class="content">
<div class="top search_top">
<el-radio-group v-model="type">
<el-radio-button label="1">按部门</el-radio-button>
<el-radio-button label="2">按个人</el-radio-button>
</el-radio-group>
<div class="search_box">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="dateValue"
placeholder="请选择"
style="margin: 0 10px;"
>
<el-option
v-for="item in optionsMonths"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary">搜索</el-button>
</div>
</div>
<div class="bar_content">
<bar-charts
:title="
`${type == 1 ? '各部门' : '个人'}${dateValue}月旷工率对齐情况`
"
:id="'bar_content'"
:legendName="'旷工率'"
:styleObj="{ width: '1800px', height: '650px' }"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="目标管理" name="3">
<div class="content">
<div class="top">
<el-radio-group v-model="type">
<el-radio-button label="1">按部门</el-radio-button>
<el-radio-button label="2">按个人</el-radio-button>
</el-radio-group>
<el-button type="primary" style="margin: 0 20px;" @click="addGoal">
+ 创建目标</el-button
>
</div>
<div class="mid_content">
<div class="goal_box" v-for="(val, i) in dataList" :key="i">
<div class="goal_title">
<img src="../../../../assets/images/u17641.svg" alt="" />
<span>
旷工率不高于10%
</span>
</div>
<p class="goal_txt">
<span>{{ type == 1 ? "目标部门:" : "目标个人:" }}</span
><span>{{
type == 1 ? "全部部门" : "张三、李四、王武、陈真"
}}</span>
</p>
<p class="goal_txt">
<span>周期:</span><span>2023年/全年</span>
</p>
<p class="goal_txt">
<span>负责人:</span><span>张三、李四、王武 </span>
</p>
<p class="goal_txt">
<span>最近更新:</span><span>2023-05-11 10:00:00</span>
</p>
<p class="goal_txt"><span>更新人员:</span><span>言若海</span></p>
<div class="button_box">
<el-button
type="primary"
style="width: 150px;"
plain
@click="hanleEdit(val)"
>编辑</el-button
>
<el-button
type="danger"
style="width: 150px;"
plain
@click="hanleDel(val)"
>删除</el-button
>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ import BarCharts from "./components/BarCharts.vue";
import drawerShow from "./drawershow"; import LineCharts from "./components/LineCharts.vue";
import table from "@/assets/mixins/table"; import PieCharts from "./components/PieCharts.vue";
export default { import dialogShow from "./dialogshow";
name: "StaffPerformStatList",
components: {
drawerShow
},
mixins: [table],
created() {
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
config: {
isshowTabPane:true,
search: [
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "部门名称", prop: "deptName"},
{label: "考勤绩效指标增加分数", prop: "attendScoreAdd", formatter: this.formatter},
{label: "考勤绩效指标扣减分数", prop: "attendScoreSub", formatter: this.formatter},
{label: "评价绩效指标增加分数", prop: "assessScoreAdd", formatter: this.formatter},
{label: "评价绩效指标扣减分数", prop: "assessScoreSub", formatter: this.formatter},
{label: "办件绩效指标增加分数", prop: "workScoreAdd", formatter: this.formatter},
{label: "办件绩效指标扣减分数", prop: "workScoreSub", formatter: this.formatter},
{label: "效能绩效指标增加分数", prop: "effectScoreAdd", formatter: this.formatter}, export default {
components: {
BarCharts,
PieCharts,
LineCharts,
dialogShow,
},
name: "StaffPerformStatList",
{label: "效能绩效指标扣减分数", prop: "effectScoreSub", formatter: this.formatter}, created() {
this.getData();
{label: "其它绩效指标增加分数", prop: "otherScoreAdd", formatter: this.formatter}, },
methods: {
{label: "其它绩效指标扣减分数", prop: "otherScoreSub", formatter: this.formatter}, handleClick(tab, event) {
{ console.log(tab, event);
label: "操作", },
width: 240, addGoal() {
formatter: row => { this.$refs.dialogform.add();
return ( },
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> /** 编辑方法 */
); hanleEdit(row) {
} this.$refs.dialogform.edit(row);
} },
] hanleDel(val) {
} this.$get("/perform/perpose/delete", { id: val.id }).then((res) => {
}; this.$message.success(res.msg);
this.getData();
});
},
getData() {
this.$post("/perform/perpose/list").then((res) => {
console.log(res);
if (res.code == 1) {
this.dataList = res.data.data;
} else {
this.dataList = [];
} }
});
},
},
data() {
return {
activeName: "1",
type: "1",
dateValue: "1",
options: [
{
value: "1",
label: "旷工率",
},
{
value: "2",
label: "缺卡率",
},
{
value: "3",
label: "迟到率",
},
{
value: "4",
label: "早退率",
},
{
value: "5",
label: "请假率",
},
{
value: "6",
label: "离岗率",
},
{
value: "7",
label: "睡觉率",
},
{
value: "8",
label: "玩手机率",
},
{
value: "9",
label: "办件超期率",
},
{
value: "10",
label: "差评率",
},
],
optionsMonths: [
{
value: "1",
label: "1月",
},
{
value: "2",
label: "2月",
},
{
value: "3",
label: "3月",
},
{
value: "4",
label: "4月",
},
{
value: "5",
label: "5月",
},
{
value: "6",
label: "6月",
},
{
value: "7",
label: "7月",
},
{
value: "8",
label: "8月",
},
{
value: "9",
label: "9月",
},
{
value: "10",
label: "10月",
},
{
value: "11",
label: "11月",
},
{
value: "12",
label: "12月",
},
],
value: "",
dataList: [],
}; };
},
};
</script> </script>
<style lang="less" scoped>
.page {
width: 100%;
height: 100%;
overflow: hidden;
/deep/.el-tabs__item {
width: 120px;
font-size: 18px;
text-align: center;
}
.content {
width: 100%;
height: 100%;
.search_top {
width: 100%;
height: 1000%;
display: flex;
justify-content: space-between;
}
/deep/.el-radio-button {
width: 150px;
text-align: center;
border: 1px solid #eee;
}
/deep/.el-radio-button__inner {
width: 150px;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
width: 150px;
border: none;
background: #1890ff;
color: #fff;
border: 1px solid #eee;
}
.top {
width: 100%;
height: 60px;
}
.mid {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.mid_top {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
.jixiaozongfen,
.jixiaopingjunfen {
width: 48%;
height: 100%;
}
}
.mid_down {
width: 100%;
height: 380px;
display: flex;
justify-content: space-evenly;
padding-top: 50px;
.box {
width: 25%;
height: 100%;
}
}
}
.mid_content,
.bar_content {
width: 100%;
height: 700px;
overflow: hidden;
}
.mid_content {
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.goal_box {
width: 435px;
height: 238px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 8px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
margin: 0 20px 20px 0;
padding: 20px;
.goal_title {
width: 100%;
display: flex;
align-items: center;
img {
margin-right: 10px;
}
}
.goal_txt {
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #666666;
width: 100%;
margin: 10px 0;
}
.button_box {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
}
}
}
</style>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig"> <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
</LayoutTable> </LayoutTable>
<dialog-show ref="dialogform" @ok="getData" />
<dialog-show ref="dialogform" @ok="getData" /> </div>
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "StaffPerformSummaryList", name: "StaffPerformSummaryList",
components: { components: {
dialogShow dialogShow,
}, },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
methods: { /** 重写新增方法 */
/** 重写新增方法 */ toAdd(row) {
toAdd(row) { this.$refs.dialogform.add(row);
this.$refs.dialogform.add(row); },
}, /** 重写编辑方法 */
/** 重写编辑方法 */ toEdit(row) {
toEdit(row) { this.$refs.dialogform.edit(row);
this.$refs.dialogform.edit(row); },
}, /** 重写查看方法 */
/** 重写查看方法 */ toView(row) {
toView(row) { this.$refs.dialogform.view(row);
this.$refs.dialogform.view(row); },
},
data() {
return {
config: {
isshowTabPane: true,
search: [
{
name: "createTimeStart",
type: "date",
label: "月份",
},
{
name: "deptId",
type: "select",
label: "所属部门",
},
{
name: "staffName",
type: "text",
label: "员工姓名",
},
],
columns: [
{ type: "selection", width: 60 },
{ type: "index", label: "序号", width: 50 },
{ label: "姓名", prop: "staffName" },
{ label: "工号", prop: "workNum" },
{ label: "所属部门", prop: "deptName" },
{ label: "考勤绩效", prop: "attendScore", formatter: this.formatter },
{ label: "评价绩效", prop: "assessScore", formatter: this.formatter },
{ label: "办件绩效", prop: "workScore", formatter: this.formatter },
{ label: "效能绩效", prop: "effectScore", formatter: this.formatter },
{ label: "其它绩效", prop: "otherScore", formatter: this.formatter },
{
label: "累计异常分数",
prop: "errorScore",
formatter: this.formatter,
},
{
label: "本月得分数",
prop: "totalScore",
formatter: this.formatter,
},
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noEdit
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
}, },
},
}, ],
data() { },
return {
config: {
isshowTabPane:true,
search: [
{
name: "createTimeStart",
type: "date",
label: "月份"
},
{
name: "deptId",
type: "select",
label: "所属部门"
},
{
name: "staffName",
type: "text",
label: "员工姓名"
},
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "姓名", prop: "staffName"},
{label: "工号", prop: "workNum"},
{label: "所属部门", prop: "deptName"},
{label: "考勤绩效", prop: "attendScore", formatter: this.formatter},
{label: "评价绩效", prop: "assessScore", formatter: this.formatter},
{label: "办件绩效", prop: "workScore", formatter: this.formatter},
{label: "效能绩效", prop: "effectScore", formatter: this.formatter},
{label: "其它绩效", prop: "otherScore", formatter: this.formatter},
{label: "累计异常分数", prop: "errorScore", formatter: this.formatter},
{label: "本月得分数", prop: "totalScore", formatter: this.formatter},
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd noEdit noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
}; };
},
};
</script> </script>
...@@ -17,8 +17,8 @@ module.exports = { ...@@ -17,8 +17,8 @@ module.exports = {
hot: true,//自动保存 hot: true,//自动保存
proxy: { proxy: {
'/attendance': { '/attendance': {
//target: 'http://192.168.0.98:11039', target: 'http://192.168.0.98:11039',
target: 'http://localhost:17500', // target: 'http://localhost:17500',
changeOrigin: true, changeOrigin: true,
secure: false, secure: false,
cookieDomainRewrite: 'localhost', cookieDomainRewrite: 'localhost',
......
...@@ -3665,8 +3665,8 @@ ...@@ -3665,8 +3665,8 @@
"version" "1.1.3" "version" "1.1.3"
"echarts@^4.8.0", "echarts@^4.9.0", "echarts@>3.0.0": "echarts@^4.8.0", "echarts@^4.9.0", "echarts@>3.0.0":
"integrity" "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=" "integrity" "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA=="
"resolved" "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz" "resolved" "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz"
"version" "4.9.0" "version" "4.9.0"
dependencies: dependencies:
"zrender" "4.3.2" "zrender" "4.3.2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment