Commit adcd440a authored by 姬鋆屾's avatar 姬鋆屾

推添加绩效系统功能

parent 9d25b0a7
...@@ -6444,9 +6444,8 @@ ...@@ -6444,9 +6444,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"
} }
...@@ -22406,8 +22405,8 @@ ...@@ -22406,8 +22405,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"
} }
<?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,100 @@ export default { ...@@ -48,87 +46,100 @@ 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) {
console.log(123);
return;
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(
.then(res => { this.urls.saveUrl || this.pageInfo.saveUrl,
this.beforeSubmit(this.form)
)
.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 +152,24 @@ export default { ...@@ -141,24 +152,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 +193,6 @@ export default { ...@@ -182,9 +193,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 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");
...@@ -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 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"></i>
<i class="el-icon-delete"></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"></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";
export default {
name: "AdminAttendIndex",
components: {
drawerShow,
dialogShow,
},
data() {
return {
index: -1,
dataArr: [
{
name: "工作纪律",
},
],
};
},
mounted() {},
methods: {
handleClick(val, i) {
this.index = i;
},
addRules() {
this.$refs.drawerform.add();
},
addCate() {
this.$refs.dialogform.add();
},
},
};
</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;
&: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 />
</el-tab-pane>
<drawer-show ref="drawerform" @ok="getData" /> <el-tab-pane label="评价绩效指标" name="2">
</div> <attend-index />
</el-tab-pane>
<el-tab-pane label="办件绩效指标" name="3">
<attend-index />
</el-tab-pane>
<el-tab-pane label="效能绩效指标" name="4">
<attend-index />
</el-tab-pane>
<el-tab-pane label="其他绩效指标" name="5">
<attend-index />
</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) {
}, console.log(tab, event);
mixins: [table], },
created() { },
console.log("route",this.$route) data() {
this.changePath("/perform/rules") return {
this.query = Object.assign({}, this.query, {type:1}); 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);
},
},
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,
},
},
// legend: {
// orient: "horizontal",
// right: "10px",
// 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,
},
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: {},
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",
},
},
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>
<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="value"
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="'各部门1月旷工率对齐情况'"
: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;">
+ 创建目标</el-button
>
</div>
<div class="mid_content">
<div class="goal_box">
<div class="goal_title">
<img src="../../../../assets/images/u17641.svg" alt="" />
<span>
旷工率不高于10%
</span>
</div>
<p class="goal_txt">
<span>目标部门:</span><span>全部部门</span>
</p>
<p class="goal_txt"><span>周期:</span><span>全部部门</span></p>
<p class="goal_txt"><span>负责人:</span><span>全部部门</span></p>
<p class="goal_txt">
<span>最近更新:</span><span>全部部门</span>
</p>
<p class="goal_txt">
<span>更新人员:</span><span>全部部门</span>
</p>
<div class="button_box">
<el-button type="primary" style="width: 150px;" plain
>编辑</el-button
>
<el-button type="danger" style="width: 150px;" plain
>删除</el-button
>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</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 { export default {
name: "StaffPerformStatList", components: {
components: { BarCharts,
drawerShow PieCharts,
}, LineCharts,
mixins: [table], },
created() { name: "StaffPerformStatList",
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
created() {},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
},
data() {
return {
activeName: "1",
type: "1",
options: [
{
value: "1",
label: "旷工率",
}, },
data() { {
return { value: "2",
config: { label: "缺卡率",
isshowTabPane:true, },
search: [ {
], value: "3",
columns: [ label: "迟到率",
{type: "selection", width: 60}, },
{type: "index",label: "序号",width: 50}, {
value: "4",
{label: "部门名称", prop: "deptName"}, label: "早退率",
},
{label: "考勤绩效指标增加分数", prop: "attendScoreAdd", formatter: this.formatter}, {
value: "5",
{label: "考勤绩效指标扣减分数", prop: "attendScoreSub", formatter: this.formatter}, label: "请假率",
},
{label: "评价绩效指标增加分数", prop: "assessScoreAdd", formatter: this.formatter}, {
value: "6",
{label: "评价绩效指标扣减分数", prop: "assessScoreSub", formatter: this.formatter}, label: "离岗率",
},
{label: "办件绩效指标增加分数", prop: "workScoreAdd", formatter: this.formatter}, {
value: "7",
{label: "办件绩效指标扣减分数", prop: "workScoreSub", formatter: this.formatter}, label: "睡觉率",
},
{label: "效能绩效指标增加分数", prop: "effectScoreAdd", formatter: this.formatter}, {
value: "8",
{label: "效能绩效指标扣减分数", prop: "effectScoreSub", formatter: this.formatter}, label: "玩手机率",
},
{label: "其它绩效指标增加分数", prop: "otherScoreAdd", formatter: this.formatter}, {
value: "9",
{label: "其它绩效指标扣减分数", prop: "otherScoreSub", formatter: this.formatter}, label: "办件超期率",
{ },
label: "操作", {
width: 240, value: "10",
formatter: row => { label: "差评率",
return ( },
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> ],
); 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: "",
}; };
},
};
</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>
...@@ -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