Skip to content

C
confucius
Commit 67958155 authored by zhengke's avatar zhengke
Browse files
Options

增加okr

parent b8d45904
Hide whitespace changes
Inline Side-by-side
Showing with 530 additions and 1 deletion
src/App.vue
View file @ 67958155
......@@ -12,7 +12,7 @@ export default {
<style>
@import url('~assets/css/font.css');
@import url('//at.alicdn.com/t/font_2077629_ctho1lelfhe.css');
@import url('//at.alicdn.com/t/font_2077629_1iixntypnch.css');
html,
body,
......
src/api/okr/index.js 0 → 100644
View file @ 67958155
import request from '../../utils/request'
/**
* 获取OKR周期配置信息
* @param {JSON参数} data
*/
export function GetOKRPeriodConfigInfo(data) {
return request({
url: '/OKRPeriod/GetOKRPeriodConfigInfo',
method: 'post',
data
})
}
/**
* 保存OKR周期配置
* @param {JSON参数} data
*/
export function SetOKRPeriodConfigInfo(data) {
return request({
url: '/OKRPeriod/SetOKRPeriodConfigInfo',
method: 'post',
data
})
}
src/components/system/basecycle-form.vue 0 → 100644
View file @ 67958155
<style>
.el-select-dropdown {
z-index: 9999 !important;
}
.w280 {
width: 280px !important;
}
.el-tooltip__popper {
z-index: 9999 !important;
}
.w80 {
width: 80px !important;
}
</style>
<template>
<q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeProcess">
<q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
<div class="baseSetForm_Dialog">
<div class="cycle_Title">周期设置</div>
<div class="Period-alert">
<i class="iconfont icon-tishi" style="color:#3370ff;margin-right:8px;"></i>
<span>本年度仅剩余 1 次修改机会。修改周期后，之前生效的周期将会保留</span>
</div>
<div class="Okr_Length">OKR 周期长度<span class="FormItem-asterisk">*</span></div>
<div style="width:130px;margin-top:10px;">
<el-radio-group v-model="addMsg.PeriodMonth" @change="getMonth(addMsg.PeriodMonth)">
<el-radio :label="1">1 个月</el-radio>
<el-radio :label="2">2 个月</el-radio>
<el-radio :label="3">3 个月（季度）</el-radio>
<el-radio :label="4">4 个月</el-radio>
<el-radio :label="6">半年</el-radio>
</el-radio-group>
</div>
<div class="Okr_Length">新生效周期
<span class="FormItem-asterisk">*</span>
<el-tooltip content="当前周期设置后的首个生效周期" placement="top" effect="light">
<i class="iconfont icon-tishi" style="margin-left:5px;"></i>
</el-tooltip>
</div>
<el-select v-model="ckedTime" class="baseDropdown w280" size="small" style="margin-top:10px;"
@change="getCycle(ckedTime)" placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<div class="Okr_Length" style="margin-top:20px;">新周期出现时间
<span class="FormItem-asterisk">*</span>
<el-tooltip content="提前 30 天展示下周期的 OKR 填写入口" placement="top" effect="light">
<i class="iconfont icon-tishi" style="margin-left:5px;"></i>
</el-tooltip>
</div>
<div style="display:flex;align-items:center;margin-top:20px;">
<span>上个周期结束前</span>
<el-input type="text" v-model="addMsg.BeforeNum" class="w80" style="margin:0 20px;" @keyup.native="checkInteger(addMsg,'BeforeNum')" size="small"></el-input>
<el-select v-model="addMsg.BeforeType" class="baseDropdown w80" size="small" placeholder="请选择">
<el-option label="天" :value="1"></el-option>
<el-option label="月" :value="2"></el-option>
</el-select>
</div>
<div class="Okr_Length" style="margin:20px 0;">
<div style="color:#1f2329">年度 OKR</div>
<div style="color:#646a73;margin-top:5px;">开启年度周期，对 OKR 进行长期规划</div>
</div>
<el-switch v-model="addMsg.YearOKR" :active-value="1" :inactive-value="2">
</el-switch>
<div class="Okr_Length" style="margin:20px 0;">
<div style="color:#1f2329">主管审核</div>
</div>
<el-switch v-model="addMsg.DirectorAudit" :active-value="1" :inactive-value="2">
</el-switch>
</div>
<div class="process_Btn_List">
<div class="processBtn_Cancel" @click="closeProcess">关闭</div>
<div class="processBtn_Save" @click="setBaseInfo">确定</div>
</div>
</q-card>
<div class="dialog-out-close" @click="closeProcess"
style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
<q-icon name="iconfont icon-jujue1" size="26px" />
</div>
</q-dialog>
</template>
<script>
import {
SetOKRPeriodConfigInfo
} from '../../api/okr/index';
export default {
props: {
saveObj: {
type: Object,
default: null
}
},
data() {
return {
persistent: true,
addMsg: {
Id: 0,
PeriodMonth: 1, //月份
StartDate: '', //开始时间
EndDate: '', // 结束时间
BeforeNum: '', // 新周期出现时间
BeforeType: 1, //类型 1天 2月
YearOKR: 1, //年度是否开启 1是 2否
DirectorAudit: 1 //主管审核 1开启 2不开启
},
ckedTime: '', //选中的日期
timeList: []
}
},
mounted() {
this.addMsg.Id = this.saveObj.Id;
this.addMsg.PeriodMonth = this.saveObj.PeriodMonth;
this.addMsg.StartDate = this.saveObj.StartDate;
this.addMsg.EndDate = this.saveObj.EndDate;
this.addMsg.BeforeNum = this.saveObj.BeforeNum;
this.addMsg.BeforeType = this.saveObj.BeforeType;
this.addMsg.YearOKR = this.saveObj.YearOKR;
this.addMsg.DirectorAudit = this.saveObj.DirectorAudit;
this.getMonth(this.addMsg.PeriodMonth);
},
created(){
this.$nextTick(() => {
var newEndDate = '';
var newStartDate = '';
if(this.addMsg.StartDate){
let StartTime = this.addMsg.StartDate.split('年');
let month = StartTime[1].split('月')[0];
if(parseInt(month)<10){
month = month.split('0')[1]
}
newStartDate = StartTime[0]+'年'+month+'月'
}
if(this.addMsg.EndDate){
let EndTime = this.addMsg.EndDate.split('年');
let month = EndTime[1].split('月')[0];
if(parseInt(month)<10){
month = month.split('0')[1]
}
newEndDate = EndTime[0]+'年'+month+'月'
}
this.timeList.forEach(x=>{
if(newStartDate===x.StartDate&&newEndDate===x.EndDate){
this.ckedTime=x.value;
}
})
});
},
methods: {
getMonth(num) {
var date = new Date;
var year = date.getFullYear();
var month = date.getMonth() + 1;
var StartDate = '';
var EndDate = '';
this.ckedTime = '';
this.timeList = [];
for (let i = 1; i <= 12; i++) {
let currentDate = year + '-' + i;
currentDate = new Date(currentDate);
// 月份减去一
let lastDate = currentDate.setMonth(currentDate.getMonth() - num); // 输出日期格式为毫秒形式1551398400000
lastDate = new Date(lastDate);
let lastYear = lastDate.getFullYear();
let lastMonth = lastDate.getMonth() + 2;
if (lastMonth > 12) {
lastMonth = 1;
lastYear = lastYear + 1;
}
if (num == 1) {
lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '月';
StartDate = lastYear + '年' + lastMonth + '月';
EndDate = lastYear + '年' + lastMonth + '月';
} else {
if (lastYear == year) {
lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '-' + ' ' + i + ' ' + '月'
StartDate = lastYear + '年' + lastMonth + '月';
EndDate = lastYear + '年' + i + '月';
} else {
lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '月' + ' ' + '-' + ' ' + year + ' ' + '年' + ' ' +
i + ' ' + '月'
StartDate = lastYear + '年' + lastMonth + '月';
EndDate = year + '年' + i + '月';
}
}
let obj = {
value: lastDate,
label: lastDate,
StartDate: StartDate,
EndDate: EndDate
}
this.timeList.push(obj);
}
},
getCycle(value) {
this.timeList.forEach(x => {
if (x.value == value) {
this.addMsg.StartDate = x.StartDate;
this.addMsg.EndDate = x.EndDate;
}
})
},
//关闭流程设置
closeProcess() {
this.persistent = false;
this.$emit('close');
},
//保存数据
setBaseInfo() {
if(this.ckedTime==''){
this.$q.notify({
type: 'negative',
position: "top",
message: `请选择新生效周期`
})
return;
}
if(this.addMsg.BeforeNum==''){
this.$q.notify({
type: 'negative',
position: "top",
message: `请填写上个周期结束天数`
})
return;
}
SetOKRPeriodConfigInfo(this.addMsg).then(res => {
if (res.Code == 1) {
this.$emit('success');
this.closeProcess();
}
})
}
}
}
</script>
src/components/system/baseset-form.vue 0 → 100644
View file @ 67958155
<style>
.baseSetForm .Period-rules {
display: flex;
margin-bottom: 24px;
padding-left: 20px;
}
.baseSetForm .Period_Spreate {
flex: 1;
min-width: 200px;
margin-right: 32px;
}
.baseSetForm .Period-rule-title {
color: #646a73;
margin-bottom: 4px;
display: flex;
align-items: center;
}
.baseSetForm .Period-info-icon {
margin-left: 8px;
color: #8f959e;
line-height: 1;
vertical-align: top;
}
.process_Btn_List {
display: flex;
justify-content: flex-end;
padding: 20px;
}
.processBtn_Cancel {
width: 90px;
height: 35px;
border: 1px solid #A1AAB2;
color: #000000;
background-color: #fff;
text-align: center;
line-height: 35px;
border-radius: 5px;
cursor: pointer;
margin-right: 20px;
}
.processBtn_Save {
width: 90px;
height: 35px;
background-color: #2961FE;
color: #FFF;
text-align: center;
line-height: 35px;
border-radius: 5px;
cursor: pointer;
}
.baseSetForm_Dialog {
margin: 20px;
}
.cycle_Title {
font-size: 20px;
font-weight: 500;
color: #1f2329;
}
.Period-alert {
padding: 9px 16px;
border-radius: 4px;
background-color: #f0f4ff;
line-height: 22px;
color: #1f2329;
display: flex;
align-items: center;
margin-top: 20px;
margin-bottom: 12px;
font-size: 13px;
}
.Okr_Length {
font-weight: 500;
color: #1f2329;
}
.FormItem-asterisk {
position: relative;
top: 3px;
margin-left: 3px;
color: #f54a45;
line-height: 1;
}
.baseSetForm_Dialog .el-radio {
display: block;
margin-bottom: 15px;
}
</style>
<template>
<div class="baseSetForm">
<div style="text-align:right;">
<q-btn color="accent" size="sm" class="q-mr-md" @click="isShowBaseSet=true" label="修改基础配置" />
</div>
<div class="Period-rules">
<div class="Period_Spreate">
<div class="Period-rule-title">周期长度</div>
<div>{{getPerodMonth(baseObj.PeriodMonth)}}</div>
</div>
<div class="Period_Spreate">
<div class="Period-rule-title">
新生效周期
<span class="Period-info-icon">
<el-tooltip content="当前周期设置后的首个生效周期" placement="top" effect="light">
<i class="iconfont icon-tishi"></i>
</el-tooltip>
</span>
</div>
<div>{{baseObj.StartDate}} - {{baseObj.EndDate}}</div>
</div>
</div>
<div class="Period-rules">
<div class="Period_Spreate">
<div class="Period-rule-title">新周期出现时间</div>
<div>上个周期结束前 {{baseObj.BeforeNum}} {{baseObj.BeforeType==1?'天':'月'}}</div>
</div>
<div class="Period_Spreate">
<div class="Period-rule-title">
年度 OKR
</div>
<div>
{{baseObj.YearOKR==1?'已开启':'未开启'}}
</div>
</div>
</div>
<div class="Period-rules">
<div class="Period_Spreate">
<div class="Period-rule-title">
主管审核
</div>
<div>
{{baseObj.DirectorAudit==1?'已开启':'未开启'}}
</div>
</div>
</div>
<basecycle-form v-if="isShowBaseSet" :save-obj="baseObj" @close="closeProcessForm" @success="refreshPage">
</basecycle-form>
</div>
</template>
<script>
import {
GetOKRPeriodConfigInfo
} from '../../api/okr/index';
import basecycleForm from '../../components/system/basecycle-form';
export default {
meta: {
title: ""
},
components: {
basecycleForm
},
data() {
return {
isShowBaseSet: false,
baseObj: {}
}
},
mounted() {
this.getList();
},
methods: {
//获取okr配置信息
getList() {
GetOKRPeriodConfigInfo({}).then(res => {
console.log(res, '数据');
if (res.Code == 1) {
this.baseObj = res.Data;
}
})
},
//返回组装数据
getPerodMonth(num) {
let str = ''
switch (num) {
case 1:
str = 1 + ' ' + '个月'
break;
case 2:
str = 2 + ' ' + '个月'
break;
case 3:
str = 3 + ' ' + '个月'+' '+'（季度）'
break;
case 4:
str = 4 + ' ' + '个月'
break;
case 6:
str = '半年'
break;
default:
}
return str;
},
//关闭流程设置
closeProcessForm() {
this.isShowBaseSet = false;
},
refreshPage() {
this.getList();
},
}
}
</script>
src/pages/system/okrmanage.vue 0 → 100644
View file @ 67958155
<style>
</style>
<template>
<div class="page-body">
<q-tabs style="margin-bottom:20px;" v-model="tabCheck" @input="tabChange()" narrow-indicator dense align="left"
class="text-primary">
<q-tab :ripple="false" name="first" label="规则设置" />
<q-tab :ripple="false" name="second" label="基础设置" />
<q-tab :ripple="false" name="third" label="提醒设置" />
<q-tab :ripple="false" name="fourth" label="分数规则" />
</q-tabs>
<baseset-form v-if="tabCheck=='second'"></baseset-form>
</div>
</template>
<script>
import basesetForm from '../../components/system/baseset-form';
export default {
meta: {
title: "OKR设置"
},
components: {
basesetForm
},
data() {
return {
tabCheck: 'first',
}
},
mounted() {
},
methods: {
tabChange() {
},
}
}
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
src/router/routes.js
View file @ 67958155
......@@ -92,6 +92,11 @@ const routes = [{
component: () =>
import("pages/system/processSet.vue")
},
{
path: "/system/okrmanage", //OKR设置
component: () =>
import("pages/system/okrmanage.vue")
},
{
path: "/course/catagory", //课程分类
component: () =>
......
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