Skip to content

C
confucius
Commit 2f92d143 authored by 罗超's avatar 罗超
Browse files
Options

OKR页面功能

parent 719ca88b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4714 additions and 13 deletions
package.json
View file @ 2f92d143
......@@ -20,12 +20,14 @@
"element-ui": "^2.14.1",
"js-md5": "^0.7.3",
"lockr": "^0.8.5",
"mavon-editor": "^2.9.1",
"quasar": "^1.0.0",
"relation-graph": "^1.0.8",
"v-viewer": "^1.5.1",
"vue-amap": "^0.5.10",
"vue-easytable": "^1.7.2",
"vue-i18n": "^8.0.0",
"vue-inline-svg": "^2.0.0",
"xlsx": "^0.16.8",
"xlsx-style": "^0.8.13"
},
......
public/static/UE/ueditor.all.js
View file @ 2f92d143
......@@ -6920,9 +6920,11 @@ var fillCharReg = new RegExp(domUtils.fillChar, 'g');
'.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +
//设置默认字体和字号
//font-family不能呢随便改，在safari下fillchar会有解析问题
'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
'body{margin:8px;font-family:sans-serif;font-size:14px;}' +
//图片最大宽度
'img{max-width: 100%;height:auto;}' +
'a{border-bottom:1px solid #1296db;cursor: pointer;}' +
"li::marker{color:#2961fe;font-family:pingfang;font-weight:bold}"+
//设置段落间距
'p{margin:5px 0;}</style>' +
( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +
quasar.conf.js
View file @ 2f92d143
......@@ -145,7 +145,8 @@ module.exports = function (ctx) {
'QCheckbox',
'QTree',
'QOptionGroup',
'QRadio'
'QRadio',
'QBtnGroup'
],
// directives: [],
......
src/App.vue
View file @ 2f92d143
......@@ -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_r9bz8pay7o.css');
html,
body,
......@@ -23,6 +23,9 @@ body,
font-family: -apple-system,BlinkMacSystemFont,'pingfang',' Microsoft YaHei',"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
color: #3f4254;
}
.q-position-engine{
z-index: 9999;
}
.remark-font{
font-size:12px;
font-family: Poppins,Helvetica,sans-serif;
......@@ -39,7 +42,7 @@ body,
}
.svg-icon.svg-icon-grey g [fill] {
transition: fill .3s ease;
fill:grey!important;
fill:#ccc!important;
}
.svg-icon.svg-icon-warning g [fill] {
transition: fill .3s ease;
......@@ -53,10 +56,84 @@ body,
transition: fill .3s ease;
fill:var(--q-color-accent) !important;
}
.svg-icon.svg-icon-dark g [fill] {
transition: fill .3s ease;
fill:var(--q-color-dark) !important;
}
.svg-icon.svg-icon-orange g [fill] {
transition: fill .3s ease;
fill:rgb(255, 152, 0) !important;
}
.svg-icon.svg-icon-positive g [fill] {
transition: fill .3s ease;
fill:var(--q-color-positive) !important;
}
.svg-icon.svg-icon-white g [fill] {
transition: fill .3s ease;
fill:white !important;
}
.svg-icon.svg-icon-g-p g [fill] {
transition: fill .3s ease;
fill:grey !important;
}
.svg-icon.svg-icon-g-p{
cursor: pointer;
}
.svg-icon.svg-icon-g-p:hover g [fill] {
transition: fill .3s ease;
fill:var(--q-color-primary) !important;
}
.svg-icon.svg-icon-b-p g [fill] {
transition: fill .3s ease;
fill:#000 !important;
}
.svg-icon.svg-icon-b-p{
cursor: pointer;
}
.svg-icon.svg-icon-b-p:hover g [fill] {
transition: fill .3s ease;
fill:var(--q-color-primary) !important;
}
.hover-primary:hover .svg-icon g [fill]{
transition: fill .3s ease;
fill:white !important;
}
.hover-primary:hover .q-avatar{
background-color: var(--q-color-primary) !important;
}
.hover-primary:hover{
color: var(--q-color-primary) !important;
}
.hover-d-p{
cursor: pointer;
color:var(--q-color-dark) !important;
}
.hover-d-p .svg-icon g [fill]{
transition: fill .3s ease;
fill:var(--q-color-dark) !important;
}
.hover-d-p:hover{
color:var(--q-color-primary) !important;
}
.hover-d-p:hover .svg-icon g [fill]{
transition: fill .3s ease;
fill:var(--q-color-primary) !important;
}
.hover-g-p{
cursor: pointer;
color:#ccc !important;
}
.hover-g-p .svg-icon g [fill]{
transition: fill .3s ease;
fill:#ccc !important;
}
.hover-g-p:hover{
color:var(--q-color-primary) !important;
}
.hover-g-p:hover .svg-icon g [fill]{
transition: fill .3s ease;
fill:var(--q-color-primary) !important;
}
.text-muted {
color: #B5B5C3 !important;
}
......@@ -75,22 +152,24 @@ body,
font-family: "perfectFont";
}
.page-content .q-table__container .scroll::-webkit-scrollbar {
.page-content .q-table__container .scroll::-webkit-scrollbar,
.myscroll::-webkit-scrollbar {
width: 10px;
height: 5px;
}
.page-content .q-table__container .scroll::-webkit-scrollbar-thumb {
.page-content .q-table__container .scroll::-webkit-scrollbar-thumb,
.myscroll::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #535353;
}
.page-content .q-table__container .scroll::-webkit-scrollbar-track {
.page-content .q-table__container .scroll::-webkit-scrollbar-track,
.myscroll::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #EDEDED;
}
.micfont {
......
src/api/okr/work.js 0 → 100644
View file @ 2f92d143
import request from '../../utils/request'
/**
* 获取OKR左侧人员列表
* @param {JSON参数} data
*/
export function queryOKRMyEmployeeList(data) {
return request({
url: '/OKRPeriod/GetOKRMyEmployeeList',
method: 'post',
data
})
}
/**
* 查询已存在的指定人员的Objective
* @param {*} data
*/
export function queryOKRPeriodList(data) {
return request({
url: '/OKRPeriod/GetOKRPeriodList',
method: 'post',
data
})
}
/**
* 新增目标
* @param {*} data
*/
export function saveMyObjective(data) {
return request({
url: '/OKRPeriod/SgetOKRMyObjectiveInfo',
method: 'post',
data
})
}
/**
* 新增KR
* @param {*} data
*/
export function saveMyKR(data) {
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultInfo',
method: 'post',
data
})
}
export function queryMyOKR(data) {
return request({
url: '/OKRPeriod/GetOKRMyObjectiveList',
method: 'post',
data
})
}
export function deleteMyKR(data){
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultDel',
method: 'post',
data
})
}
export function querySignObject(data){
return request({
url: '/OKRPeriod/GetOKRMyObjectiveInfo',
method: 'post',
data
})
}
export function saveKRWeight(data){
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultWeight',
method: 'post',
data
})
}
export function setKRProgressState(data){
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultState',
method: 'post',
data
})
}
export function setKRProgress(data){
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultProgress',
method: 'post',
data
})
}
export function setKRScore(data){
return request({
url: '/OKRPeriod/SgetOKRMyKeyResultScore',
method: 'post',
data
})
}
export function setObjectiveProgress(data){
return request({
url: '/OKRPeriod/SgetOKRMyObjectiveState',
method: 'post',
data
})
}
export function queryPower(data){
return request({
url: '/OKRPeriod/GetOKRPermissionList',
method: 'post',
data
})
}
export function setPower(data){
return request({
url: '/OKRPeriod/SgetOKRPermissionInfo',
method: 'post',
data
})
}
export function queryDefaultStatus(data){
return request({
url: '/OKRPeriod/GetOKRDefaultPermissionInfo',
method: 'post',
data
})
}
export function setDefaultStatus(data){
return request({
url: '/OKRPeriod/SgetOKRDefaultPermissionInfo',
method: 'post',
data
})
}
export function queryObjectiveBySearch(data){
return request({
url: '/OKRPeriod/GetOKROthersObjectiveDropListByName',
method: 'post',
data
})
}
export function setAlign(data){
return request({
url: '/OKRPeriod/SgetOKRMyObjectiveParent',
method: 'post',
data
})
}
export function deleteAlign(data){
return request({
url: '/OKRPeriod/SgetOKRMyObjectiveParentCancel',
method: 'post',
data
})
}
export function setComment(data){
return request({
url: '/OKRPeriod/SetComment',
method: 'post',
data
})
}
export function queryComment(data){
return request({
url: '/OKRPeriod/GetCommentPageList',
method: 'post',
data
})
}
export function setCommentStatus(data){
return request({
url: '/OKRPeriod/SetCommentStatus',
method: 'post',
data
})
}
export function queryAlignList(data){
return request({
url: '/OKRPeriod/GetOKRMyEmployeeAlignList',
method: 'post',
data
})
}
export function queryOtherObjectiveList(data){
return request({
url: '/OKRPeriod/GetOKROthersObjectiveList',
method: 'post',
data
})
}
export function setUserLike(data){
return request({
url: '/OKRPeriod/SgetOKREmployeeAttention',
method: 'post',
data
})
}
export function queryUserIsLike(data){
return request({
url: '/OKRPeriod/GetOKREmployeeAttention',
method: 'post',
data
})
}
export function setObjectiveState(data){
return request({
url: '/OKRPeriod/SetOKRObjectiveAuditAgain',
method: 'post',
data
})
}
export function getMyAuditUsersList(data){
return request({
url: '/OKRPeriod/GetOKRMyEmployeeAuditList',
method: 'post',
data
})
}
export function getMyAuditList(data){
return request({
url: '/OKRPeriod/GetOKRObjectiveAuditList',
method: 'post',
data
})
}
export function setObjectiveStatus(data){
return request({
url: '/OKRPeriod/SetOKRObjectiveAudit',
method: 'post',
data
})
}
src/components/editor/UeEditor.vue
View file @ 2f92d143
......@@ -21,7 +21,7 @@
//插入图片图标
labelIcon: {
type: String,
default: '插入图片',
default: '插入图片',
},
//是否显示插入图片
isShowInsertImage: {
......@@ -42,6 +42,14 @@
config: {
type: Object
},
noMargin: {
type: Boolean,
default: false
},
placeHolder: {
type: String,
default: '请输入内容',
},
},
components: {
appAttachment
......@@ -62,6 +70,7 @@
if (this.ue) {
if (this.ue.isReady !== 1) {
let self = this;
let time = setInterval(() => {
//循环查
if (self.ue.isReady === 1) {
......@@ -84,6 +93,9 @@
this.loadUe();
},
methods: {
focus(){
this.ue.focus(true)
},
//关闭上传文件弹窗
attachmentClosed() {
this.attachmentDialogVisible = false;
......@@ -208,10 +220,17 @@
});
}
this.ue = UE.getEditor(this.id, this.config);
this.ue.addListener('ready', editor => {
this.$emit("ready")
if (this.tempContent) {
this.ue.setContent(this.tempContent);
}
if(this.noMargin){
UE.dom.domUtils.setStyles(this.ue.body, {
'margin': '0px'
});
}
});
this.ue.addListener('keyup', editor => {
this.isInputChange = true;
......@@ -221,6 +240,13 @@
this.isInputChange = true;
this.$emit('input', this.ue.getContent());
});
this.ue.addListener('blur', editor => {
this.isInputChange = true;
this.$emit('blur',this.ue.getContent());
});
this.ue.addListener('focus', editor => {
this.$emit('focus');
});
}
},
}
......
src/components/global/none-data.vue
View file @ 2f92d143
<template>
<div class="q-mt-lg flex column justify-center items-center">
<inline-svg class="svg-icon svg-icon-positive" src="icons/svg/General/Clipboard.svg" width="50px" height="50px"></inline-svg>
<inline-svg class="svg-icon svg-icon-info" src="icons/svg/General/Clipboard.svg" width="50px" height="50px"></inline-svg>
<span class="q-mt-md remark-font">没有找到相关数据信息</span>
</div>
</template>
......
src/components/okr/align-info.vue 0 → 100644
View file @ 2f92d143
<template>
<div style="width:480px">
<div class="q-pa-md flex row items-center">
<q-avatar
size="34px"
font-size="18px"
rounded
color="blue-2"
text-color="blue-13"
>
<img :src="align.Icon" v-if="align.Icon" />
<span v-else-if="align.AccountName">{{
align.AccountName.substring(0, 1)
}}</span>
</q-avatar>
<div class="col text-subtitle2 q-ml-md">{{ align.AccountName }}</div>
<div class="text-primary cursor-pointer" @click="openObjective(align)">查看详情</div>
</div>
<div
class="q-py-md"
style="border-top:1px solid #eee"
v-for="(x, i) in align.AlignList"
:key="i"
>
<div class="flex row item-center">
<div style="width:26px;padding-left:6px;">
<inline-svg
v-if="x.IsLock == 1"
class="svg-icon svg-icon-grey"
src="icons/svg/General/Lock.svg"
width="14px"
height="14px"
style="margin-top: 5px;"
></inline-svg>
<q-tooltip content-class="bg-dark text-white" v-if="x.IsLock == 1"
>已设保密，请勿外出</q-tooltip
>
</div>
<div class="col text-subtitle2 text-weight-bold">{{ x.Title }}</div>
<div class="text-primary q-mx-md cursor-pointer" @click="cancelAlign(x.Id,i)" v-if="canDel && !showOnly">取消对齐</div>
</div>
<template v-for="(y, yi) in x.KeyResultList">
<div
class="flex q-pa-xs flex row items-center"
v-if="y.IsNotLook != 1"
:key="yi"
>
<div style="width:20px;margin-left: 20px;">
<inline-svg
class="svg-icon svg-icon-primary"
src="icons/svg/Design/Circle.svg"
width="8px"
height="8px"
v-if="y.IsLock == 2"
></inline-svg>
<inline-svg
class="svg-icon svg-icon-grey"
src="icons/svg/General/Lock.svg"
width="14px"
height="14px"
style="margin-top:5px"
v-if="y.IsLock == 1"
></inline-svg>
<q-tooltip content-class="bg-dark text-white" v-if="y.IsLock == 1"
>已设保密，请勿外出</q-tooltip
>
</div>
<div class="col">{{ y.Name }}</div>
</div>
</template>
</div>
</div>
</template>
<script>
import {deleteAlign} from "../../api/okr/work";
export default {
props: ["align", "sourceId",'num','canDel','showOnly'],
data() {
return {};
},
methods: {
openObjective(x){
let obj={
Id:x.AccountId,
EmployeeName:x.AccountName,
UserIcon:x.Icon
}
this.$root.$emit("openUserObj",obj)
},
cancelAlign(id, i) {
deleteAlign({
ObjectiveId: this.sourceId,
ParentId: id
}).then(r => {
this.align.AlignList.splice(i, 1);
let t={
num:this.num,
AlignList:this.align.AlignList
}
this.$$emit('delete',t)
this.$forceUpdate()
});
}
}
};
</script>
<style></style>
src/components/okr/history-comment.vue 0 → 100644
View file @ 2f92d143
<template>
<div style="width:360px;max-height:480px">
<div class="q-pa-md" style="border:1px solid #eee;" v-for="(x,i) in commitsList">
<div class="flex row items-center">
<div class="col">{{x.UpdateByName}}已解决此评论</div>
<div class="text-primary q-mx-md cursor-pointer col-auto" @click="deleteCommmit(x.Id,i)">重新打开</div>
</div>
<div
class="q-pa-xs bg-grey-3 rounded-borders q-mt-xs"
style="padding-left:8px;"
>
<div
class="text-grey-7 q-pl-md"
style="border-left:2px solid #9e9e9e;height:20px;"
>
评论
</div>
</div>
<div class="flex row items-center q-mt-md">
<q-avatar
size="25px"
font-size="16px"
rounded
color="orange-2"
text-color="orange"
class="q-mr-xs"
>
<img :src="x.CreateByIco" v-if="x.CreateByIco" />
<span v-else-if="x.CreateByName">{{
x.CreateByName.substring(0, 1)
}}</span>
</q-avatar>
<div class="remark-font col q-mx-xs">{{ x.CreateByName }}</div>
<div class="remark-font">{{x.CreateTimeStr}}</div>
</div>
<div style="padding-left:30px;margin-top:10px;">
{{decodeURIComponent(x.Content)}}
</div>
</div>
<div class="q-my-lg text-center" v-if="commitsList.length==0">
<img src="../../assets/images/history.png" width="80px" />
<div class="text-center q-mt-md remark-font">已解决的评论会存档在这里</div>
</div>
</div>
</template>
<script>
import {queryComment,setCommentStatus } from "../../api/okr/work";
export default {
props: ["periodId", "accountId"],
data() {
return {
CreateByIco: null,
CreateByName: "罗超",
commitsList:[],
queryParmam: {
PageIndex: 1,
PageSize: 1000,
School_Id: 0,
PeriodId: 0,
State: 2,
AccountId:0
}
};
},
watch: {
periodId: {
handler(newV, oldV) {
this.queryParmam.PeriodId = newV;
this.queryCommit();
},
deep: true
}
},
mounted() {
this.queryParmam.PeriodId = this.periodId;
this.queryParmam.AccountId = this.accountId;
this.queryCommit();
},
methods: {
deleteCommmit(Id, i) {
setCommentStatus({
Id,
State:1
}).then(r => {
this.commitsList.splice(i, 1);
this.$emit('change')
});
},
queryCommit() {
queryComment(this.queryParmam).then(r => {
this.commitsList = r.Data.PageData;
});
}
}
};
</script>
<style></style>
src/components/okr/kr-power.vue 0 → 100644
View file @ 2f92d143
This diff is collapsed.
src/components/okr/objective-process.vue 0 → 100644
View file @ 2f92d143
<template>
<q-card class="q-pa-md">
<div class="text-subtitle2 text-weight-bold flex row">
<span class="q-mr-md">当前进度：{{obj.Progress}}%</span>
<span style="padding-top:2px;">
<inline-svg
class="svg-icon svg-icon-g-p"
src="icons/svg/Code/Warning-1-circle.svg"
width="16px"
height="16px"
></inline-svg>
<q-tooltip content-class="bg-black text-white">
根据 Key Result 的进度和权重计算得出
</q-tooltip>
</span>
</div>
<q-separator class="q-my-md"></q-separator>
<div class="text-subtitle2 text-weight-bold q-mb-md">默认状态</div>
<div class="q-mb-md">
<q-radio
keep-color
v-model="status"
size="xs"
val="0"
label="风险最高的 Key Result 状态"
color="black"
/>
</div>
<div class="text-subtitle2 text-weight-bold q-mb-md">自定义状态</div>
<div>
<q-radio
keep-color
v-model="status"
size="xs"
val="1"
label="正常"
color="primary"
/>
</div>
<div>
<q-radio
keep-color
v-model="status"
size="xs"
val="2"
label="有风险"
color="warning"
/>
</div>
<div>
<q-radio
keep-color
v-model="status"
size="xs"
val="3"
label="已延期"
color="negative"
/>
</div>
</q-card>
</template>
<script>
export default {
props:["obj"],
data() {
return {
status:0
}
},
mounted() {
console.log(this.obj)
if(this.obj.IsDefaultState==1){
this.status='0'
}else{
this.status=this.obj.ProgressState.toString()
}
},
beforeDestroy() {
this.$emit("close",this.status)
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/okr/okr-add.vue 0 → 100644
View file @ 2f92d143
This diff is collapsed.
src/components/okr/okr-align.vue 0 → 100644
View file @ 2f92d143
<template>
<div class="absolute flex row " style="width:500px;z-index:999;" :style="{'left':direction=='up'?'15px':'15px','top':direction=='up'?'-16px':'11px'}">
<svg
width="24px"
height="24px"
style="margin-right:8px"
:style="{'transform':direction=='up'?'rotate(0deg)':'rotateX(180deg)','margin-top':direction=='up'?'7px':'4px'}"
viewBox="0 0 24 24"
version="1.1"
v-if="!showOnly || (showOnly && obj.ParentList.length>0 && direction=='up')||(showOnly && obj.ChildList.length>0 && direction=='down')"
>
<g
id="shangduiqi"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<path
d="M21.1160533,2.07953591 C9.847689,3.03519298 1,12.4843522 1,24 L0,24 C0,11.9510478 9.2650232,2.06605774 21.0593866,1.08071282 C21.2407969,0.456342432 21.8171062,0 22.5,0 C23.3284271,0 24,0.671572875 24,1.5 C24,2.32842712 23.3284271,3 22.5,3 C21.8770146,3 21.3427332,2.62021284 21.1160533,2.07953591 Z"
id="Combined-Shape"
fill="rgb(191,208,255)"
fill-rule="nonzero"
></path>
</g>
</svg>
<template v-for="(x, i) in obj.ParentList">
<div
class="hover-primary remark-font cursor-pointer q-mr-xs"
:style="{'margin-top':direction=='up'?'0px':'20px'}"
v-if="x.AlignList.length > 0 && direction=='up'"
:key="i"
>
<span>{{ x.AccountName }}</span
><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
<q-popup-proxy>
<align-info
:align="x"
:source-id="obj.Id"
:num="i"
@delete="delAlign"
:ref="`align_info_${i}`"
:can-del="true"
:show-only="showOnly"
></align-info>
</q-popup-proxy>
</div>
</template>
<template v-for="(x, i) in obj.ChildList">
<div
class="hover-primary remark-font cursor-pointer q-mr-xs"
:style="{'margin-top':direction=='up'?'0px':'18px'}"
v-if="x.AlignList.length > 0 && direction=='down'"
:key="i"
>
<span>{{ x.AccountName }}</span
><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
<q-popup-proxy>
<align-info
:align="x"
:source-id="obj.Id"
:num="i"
@delete="delAlign"
:ref="`align_info_${i}`"
:can-del="false"
></align-info>
</q-popup-proxy>
</div>
</template>
<div class="hover-primary remark-font cursor-pointer" v-if="direction=='up' && !showOnly">
<q-icon
name="iconfont icon-add"
class="cursor-pointer"
size="12px"
></q-icon>
<span>添加对齐</span>
<q-popup-proxy style="z-index: 9999;">
<search-okr :period-id="periodId" :source-id="obj.Id" @add="addNewAlign"></search-okr>
</q-popup-proxy>
</div>
</div>
</template>
<script>
import searchOkr from "./search-okr";
import alignInfo from "./align-info";
export default {
props: ["obj", "periodId",'direction','showOnly'],
components: {
searchOkr,
alignInfo
},
methods: {
delAlign(r) {
obj.ParentList[r.num].AlignList = r.AlignList ? r.AlignList : [];
if (!r.AlignList || r.AlignList.length == 0) {
this.$refs[`align_info_${r.num}`].hide();
}
},
addNewAlign(r) {
let isHave = false;
this.obj.ParentList.forEach(x => {
if (x.AccountName == r.AccountName) {
x.AlignList.push(r.AlignList[0]);
isHave = true;
}
});
if (!isHave) {
this.obj.ParentList.push(r);
}
}
}
};
</script>
<style></style>
src/components/okr/okr-commit.vue 0 → 100644
View file @ 2f92d143
<template>
<div class="q-my-xl q-mr-md">
<div class="text-h6 q-pb-md" style="border-bottom:1px solid #dedede" v-if="commitsList && commitsList.length>0">
评论
</div>
<q-card flat v-for="(x, i) in commitsList" :key="i" class=" q-mt-md">
<q-card-section>
<div class="flex row items-center">
<q-avatar
size="40px"
font-size="18px"
rounded
color="orange-2"
text-color="orange"
class="text-weight-bold"
>
<img :src="x.CreateByIco" v-if="x.CreateByIco" />
<span v-else-if="x.CreateByName">{{
x.CreateByName.substring(0, 1)
}}</span>
</q-avatar>
<div class="col q-ml-md">
<div class="text-subtitle1">{{ x.CreateByName }}</div>
<div class="remark-font">{{ x.CreateTimeStr }}</div>
</div>
<div class="col-auto flex row" v-if="!showOnly">
<div
class="q-mr-md"
style="margin-top:3px;"
@click="deleteCommmit(x.Id, 2, i)"
>
<q-icon
color="dark"
size="16px;"
name="iconfont icon-dagou"
></q-icon>
<q-tooltip content-class="bg-dark text-white"
>标为解决并隐藏评论</q-tooltip
>
</div>
<q-btn dense flat color="white" text-color="dark">
<inline-svg
class="svg-icon svg-icon-g-p"
src="icons/svg/General/Other2.svg"
width="16px"
height="16px"
></inline-svg>
<q-popup-proxy :offset="[0, 5]">
<q-list separator style="width:120px;">
<q-item
class="items-center"
clickable
v-ripple
@click="deleteCommmit(x.Id, 3, i)"
>
<q-item-section avatar>
<inline-svg
class="svg-icon svg-icon-g-p"
src="icons/svg/Home/Trash.svg"
width="20px"
height="20px"
></inline-svg>
</q-item-section>
<q-item-section>删除</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
</div>
</div>
<div class="q-mt-md">
{{ decodeURIComponent(x.Content) }}
</div>
</q-card-section>
</q-card>
<!--<none-data v-if="!commitsList || commitsList.length == 0"></none-data>-->
<q-card flat class=" q-mt-md">
<q-card-section>
<div class="flex row items-start">
<q-avatar
size="40px"
font-size="18px"
rounded
color="orange-2"
text-color="orange"
class="text-weight-bold"
>
<img :src="userInfo.UserIcon" v-if="userInfo.UserIcon" />
<span v-else-if="userInfo.AccountName">{{
userInfo.AccountName.substring(0, 1)
}}</span>
</q-avatar>
<div class="col q-ml-md">
<q-input
flat
dense
outlined
v-model="comment"
:type="commitFocusStatus == 1 ? 'textarea' : 'input'"
autogrow
:placeholder="
commitFocusStatus == 1 ? '输入评论（按Enter换行）' : '添加评论'
"
@focus="commitFocusStatus = 1"
@blur="commitFocusStatus = 0"
></q-input>
</div>
</div>
</q-card-section>
<q-card-actions
align="right"
class="q-pr-md q-pb-md"
v-if="comment.trim().length > 0"
>
<q-btn flat color="dark" @click="comment = ''">取消</q-btn>
<q-btn color="primary" :loading="isAdding" @click="setCommit">发 送</q-btn>
</q-card-actions>
</q-card>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { setComment, queryComment, setCommentStatus } from "../../api/okr/work";
import noneData from "../global/none-data";
export default {
props: ["periodId",'showOnly','currentId'],
computed: {
...mapGetters(["userInfo"])
},
components: {
noneData
},
data() {
return {
commitsList: [],
commitFocusStatus: 0,
comment: "",
queryParmam: {
PageIndex: 1,
PageSize: 1000,
School_Id: 0,
PeriodId: this.periodId,
State: 1
},
isAdding: false
};
},
watch: {
periodId: {
handler(newV, oldV) {
this.queryParmam.PeriodId = newV;
this.queryCommit();
},
deep: true
},
currentId: {
handler(newV, oldV) {
this.queryParmam.AccountId = newV;
this.queryCommit();
},
deep: true
}
},
mounted() {
this.queryParmam.PeriodId = this.periodId;
this.queryParmam.AccountId = this.currentId?this.currentId:this.userInfo.Id;
this.queryCommit();
},
methods: {
deleteCommmit(Id, State, i) {
setCommentStatus({
Id,
State
}).then(r => {
this.commitsList.splice(i, 1);
});
},
setCommit() {
if (!this.isAdding) {
this.isAdding=true
if (this.comment.trim() != "") {
let msg = {
School_Id: 0,
PeriodId: this.periodId,
Content: encodeURIComponent(this.comment),
AccountId: this.currentId?this.currentId:this.userInfo.Id,
Type: 4,
ParentId: 0
};
setComment(msg).then(r => {
this.queryCommit();
});
}
}
},
queryCommit() {
if(!this.isAdding){
this.commitsList = null;
}
queryComment(this.queryParmam).then(r => {
this.commitsList = r.Data.PageData;
this.isAdding=false
this.comment = "";
// this.commitsList.push({
// Id:r.Data,
// CreateByName:this.userInfo.AccountName,
// CreateByIco:this.userInfo.UserIcon,
// UpdateByName:'',
// Content:this.comment,
// CreateTimeStr:'刚刚'
// })
});
}
}
};
</script>
<style></style>
src/components/okr/okr-emp-info.vue 0 → 100644
View file @ 2f92d143
<template>
<div class="">
<div class="flex row q-mb-md" v-if="user">
<div class="col flex items-center row">
<q-avatar
size="40px"
font-size="18px"
rounded
color="positive"
text-color="white"
>
<img :src="user.UserIcon" v-if="user.UserIcon" />
<span v-else-if="user.EmployeeName">{{
user.EmployeeName.substring(0, 1)
}}</span>
</q-avatar>
<div class="text-h5 text-black q-ml-md">
{{ user.EmployeeName }}
</div>
<div class="q-ml-md cursor-pointer" @click="setLikeUser">
<inline-svg
class="svg-icon svg-icon-grey"
src="icons/svg/General/Star.svg"
v-if="!likeStatus"
></inline-svg>
<inline-svg
class="svg-icon svg-icon-primary"
src="icons/svg/General/Star.svg"
v-if="likeStatus"
></inline-svg>
<q-tooltip content-class="bg-dark">
{{ !likeStatus ? "关注" : "取消关注" }}
</q-tooltip>
</div>
<div class="col">&nbsp;</div>
<div class="flex row q-mr-md">
<q-btn-group outline class="q-mr-md">
<template v-for="(x, i) in periodList">
<q-btn
@click="changePeriod(i)"
:key="i"
class="no-border-radius relative-position"
outline
color="grey-4"
:class="[periodId == i ? 'action-btn' : 'no-action-btn']"
:label="x.Name"
>
<div
class="absolute"
v-if="x.isHaveAudit"
style="top:-3px;right:6px;width:10px;height:10px;"
>
<inline-svg
class="svg-icon svg-icon-negative"
src="icons/svg/Design/Circle.svg"
width="10"
height="10"
></inline-svg>
</div>
</q-btn>
<q-separator
vertical
v-if="i < periodList.length - 1"
color="grey"
></q-separator>
</template>
</q-btn-group>
<q-btn unelevated color="white icon-btn q-mr-md">
<inline-svg
class="svg-icon svg-icon-secondary"
src="icons/svg/Communication/Chat6.svg"
></inline-svg>
<q-tooltip content-class="bg-dark">
评论
</q-tooltip>
</q-btn>
<q-btn unelevated color="white icon-btn q-mr-md">
<inline-svg
class="svg-icon svg-icon-secondary"
src="icons/svg/Code/Spy.svg"
></inline-svg>
<q-tooltip content-class="bg-dark">
填写助手
</q-tooltip>
</q-btn>
<q-btn unelevated color="white icon-btn">
<inline-svg
class="svg-icon svg-icon-dark"
src="icons/svg/General/Other2.svg"
></inline-svg>
<q-popup-proxy :offset="[0, 5]" ref="showMoreOption">
<q-list separator>
<q-item
class="items-center"
@click="showHistory"
clickable
v-ripple
>
<div>历史评论</div>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
<q-popup-proxy
ref="historyBox"
v-if="isShowBox"
@hide="hideHistory"
:offset="[-250, 5]"
>
<history-comment
:periodId="periodList[periodId].Id"
v-if="periodList && periodList.length > 0"
:accountId="user.Id"
@change="reloadComment"
></history-comment>
</q-popup-proxy>
</div>
</div>
</div>
<div v-if="!reloading">
<okr-add
v-for="(x, i) in objectiveList"
:key="i"
:objective="x"
:show-only="true"
class="q-mb-lg"
:ref="`object_${i}`"
:audit-mode="auditMode"
@audit-notify="deleteObjective"
:user-id="userId"
@reset-audit-notify="resetStatus"
></okr-add>
</div>
<div
style="margin-top:200px;"
v-if="objectiveList.length == 0 && !reloading"
>
<div class="q-mb-lg text-center">
<img src="../../assets/images/nonedata.png" width="250px" />
</div>
<div class="q-mb-lg text-center">暂无数据</div>
</div>
<okr-commit
:periodId="periodList[periodId].Id"
v-if="periodList && periodList.length > 0 && objectiveList.length > 0"
ref="commentBox"
:show-only="true"
:current-id="user.Id"
></okr-commit>
</div>
</template>
<script>
import {
queryOKRPeriodList,
queryOtherObjectiveList,
setUserLike,
queryUserIsLike,
getMyAuditList
} from "../../api/okr/work";
import okrAdd from "./okr-query";
import okrCommit from "./okr-commit";
import historyComment from "./history-comment";
export default {
props: ["userObj", "auditMode", "peroids",'userId'],
components: {
okrAdd,
okrCommit,
historyComment
},
data() {
return {
periodList: [],
user: {},
periodId: 0,
objectiveList: [],
newObjective: {},
reloading: true,
isShowBox: false,
likeStatus: false,
auditPeroids: []
};
},
watch: {
userObj: {
handler(newV, oldV) {
console.log(newV);
this.user = newV;
this.init();
this.queryLikeState();
},
deep: true
},
auditMode: {
handler(newV, oldV) {
this.init();
if (newV) {
this.auditPeroids = this.peroids.split(",");
} else {
this.auditPeroids = [];
}
},
deep: true
}
},
created() {
this.user = this.userObj;
console.log(this.auditMode);
if (this.auditMode) {
this.auditPeroids = this.peroids.split(",");
console.log(this.auditPeroids);
}
},
mounted() {
this.init();
this.queryLikeState();
},
methods: {
queryLikeState() {
queryUserIsLike({ UserId: this.user.Id }).then(r => {
this.likeStatus = r.Data;
});
},
hideHistory() {
this.isShowBox = false;
},
showHistory() {
this.isShowBox = true;
setTimeout(() => {
this.$refs.historyBox.show();
this.$refs.showMoreOption.hide();
}, 200);
},
changePeriod(id) {
this.periodId = id;
this.$emit("change", this.periodList[this.periodId].Id);
this.reloading = true;
if (this.auditMode) {
this.queryMyAudits();
} else {
this.queryMyObjective();
}
},
deleteObjective(id) {
let index = 0;
this.objectiveList.forEach((x, i) => {
if (x.Id == id) {
index = i;
}
});
this.objectiveList.splice(index, 1);
if(this.objectiveList.length==0){
this.auditPeroids.splice(this.auditPeroids.indexOf(id.toString()),1)
if(this.auditPeroids.length==0) {
this.$emit('finish',this.user.Id)
}
}
},
resetStatus(id){
let index = 0;
this.objectiveList.forEach((x, i) => {
if (x.Id == id) {
index = i;
}
});
let obj=this.user
obj.PeriodIds=this.periodList[this.periodId].Id.toString()
this.$emit('addAudit', obj)
},
init() {
queryOKRPeriodList().then(r => {
this.periodList = r.Data;
this.periodList.forEach(x => {
x.isHaveAudit = this.auditPeroids.indexOf(x.Id.toString()) != -1;
});
console.log(this.periodList);
this.$emit("change", this.periodList[this.periodId].Id);
if (!this.auditMode) {
this.queryMyObjective();
} else {
this.queryMyAudits();
}
});
},
queryMyAudits() {
getMyAuditList({
UserId: this.user.Id,
PeriodId: this.periodList[this.periodId].Id
}).then(r => {
this.objectiveList = r.Data;
this.reloading = false;
});
},
queryMyObjective() {
let msg = {
PeriodId: this.periodList[this.periodId].Id,
UserId: this.user.Id
};
queryOtherObjectiveList(msg).then(r => {
console.log(r);
if (r.Data.List && r.Data.List.length > 0) {
r.Data.List.forEach(x => {
x.PeriodId = this.periodList[this.periodId].Id;
});
this.objectiveList = r.Data.List;
} else {
this.objectiveList = [];
}
this.reloading = false;
});
},
reloadComment() {
this.$refs.commentBox.queryCommit();
},
setLikeUser() {
setUserLike({
Type: this.likeStatus ? 2 : 1,
UserId: this.user.Id
}).then(r => {
let obj = {
status: this.likeStatus ? 2 : 1,
user: this.user
};
this.$root.$emit("setLikes", obj);
this.likeStatus = !this.likeStatus;
});
}
}
};
</script>
<style>
.action-btn .q-btn__content .block {
color: var(--q-color-primary) !important;
font-weight: bold !important;
}
.no-action-btn .q-btn__content .block {
color: var(--q-color-dark) !important;
}
.icon-btn .q-btn__wrapper {
padding: 4px 8px !important;
}
</style>
src/components/okr/okr-info.vue 0 → 100644
View file @ 2f92d143
<template>
<div class="">
<div class="flex row q-mb-md" v-if="user">
<div class="col flex items-center row">
<q-avatar
size="40px"
font-size="18px"
rounded
color="positive"
text-color="white"
>
<img :src="user.UserIcon" v-if="user.UserIcon" />
<span v-else-if="user.EmployeeName">{{
user.EmployeeName.substring(0, 1)
}}</span>
</q-avatar>
<div class="text-h5 text-black q-ml-md col">
{{ user.EmployeeName }}
</div>
<div class="flex row q-mr-md">
<q-btn-group outline class="q-mr-md">
<template v-for="(x, i) in periodList">
<q-btn
@click="changePeriod(i)"
:key="i"
class="no-border-radius"
outline
color="grey-4"
:class="[periodId == i ? 'action-btn' : 'no-action-btn']"
:label="x.Name"
/>
<q-separator
vertical
v-if="i < periodList.length - 1"
color="grey"
></q-separator>
</template>
</q-btn-group>
<q-btn unelevated color="white icon-btn q-mr-md">
<inline-svg
class="svg-icon svg-icon-secondary"
src="icons/svg/Communication/Chat6.svg"
></inline-svg>
<q-tooltip content-class="bg-dark">
评论
</q-tooltip>
</q-btn>
<q-btn unelevated color="white icon-btn q-mr-md">
<inline-svg
class="svg-icon svg-icon-secondary"
src="icons/svg/Code/Spy.svg"
></inline-svg>
<q-tooltip content-class="bg-dark">
填写助手
</q-tooltip>
</q-btn>
<q-btn unelevated color="white icon-btn">
<inline-svg
class="svg-icon svg-icon-dark"
src="icons/svg/General/Other2.svg"
></inline-svg>
<q-popup-proxy :offset="[0, 5]" ref="showMoreOption">
<q-list separator>
<q-item
class="items-center"
clickable
v-ripple
@click="openPower"
>周期权限设置</q-item
>
<q-item class="items-center" clickable v-ripple
>历史版本</q-item
>
<q-item
class="items-center"
@click="showHistory"
clickable
v-ripple
>
<div>历史评价</div>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
<q-popup-proxy ref="historyBox" v-if="isShowBox" @hide="hideHistory" :offset="[-250,5]">
<history-comment :periodId="periodList[periodId].Id" v-if="periodList && periodList.length > 0" :accountId="user.Id" @change="reloadComment"></history-comment>
</q-popup-proxy>
</div>
</div>
</div>
<div v-if="!reloading">
<okr-add
v-for="(x, i) in objectiveList"
:key="i"
:objective="x"
@delete="deleteObjective"
@cancel="changeUpdate"
class="q-mb-lg"
:ref="`object_${i}`"
></okr-add>
</div>
<!-- <okr-add
:objective="newObjective"
v-if="adding && !reloading"
@cancel="changeUpdate"
></okr-add> -->
<div
style="margin-top:200px;"
v-if="objectiveList.length == 0 && !reloading"
>
<div class="q-mb-lg text-center">
<img src="../../assets/images/nonedata.png" width="250px" />
</div>
<div class="q-mb-lg text-center">暂无数据</div>
<div class="q-mb-lg text-center">
<q-btn unelevated color="primary" @click="createNewObjective()">
<inline-svg
class="svg-icon svg-icon-white q-mr-xs"
src="icons/svg/Navigation/Plus.svg"
></inline-svg>
添加 Objective
</q-btn>
</div>
</div>
<div
class="q-my-md q-mr-md cursor-pointer"
@click="createNewObjective"
v-else
>
<q-banner class="bg-white" rounded>
<div class="row items-center hover-primary">
<q-avatar
style="background-color: #eaeaea;"
rounded
size="30px"
class="q-mr-md"
>
<inline-svg
class="svg-icon svg-icon-white q-mr-xs"
src="icons/svg/Navigation/Plus.svg"
></inline-svg>
</q-avatar>
<span class="text-subtitle2">添加 Objective</span>
</div>
</q-banner>
</div>
<okr-commit
:periodId="periodList[periodId].Id"
v-if="periodList && periodList.length > 0"
ref="commentBox"
></okr-commit>
<q-dialog v-model="showPower">
<kr-power
:kr="krPwoerInfo"
:type="powerType"
@save="saveFinish"
></kr-power>
</q-dialog>
</div>
</template>
<script>
import { queryOKRPeriodList, queryMyOKR } from "../../api/okr/work";
import okrAdd from "./okr-add";
import krPower from "./kr-power";
import okrCommit from "./okr-commit";
import historyComment from "./history-comment";
export default {
props: ["userObj"],
components: {
okrAdd,
krPower,
okrCommit,
historyComment
},
data() {
return {
periodList: [],
user: {},
periodId: 0,
objectiveList: [],
newObjective: {},
reloading: true,
showPower: false,
krPwoerInfo: {},
powerType: 3,
isShowBox: false
};
},
watch: {
userObj: {
handler(newV, oldV) {
this.user = newV;
},
deep: true
}
},
mounted() {
this.init();
this.user =this.userObj
},
methods: {
hideHistory() {
this.isShowBox = false;
},
showHistory() {
this.isShowBox = true;
setTimeout(() => {
this.$refs.historyBox.show();
this.$refs.showMoreOption.hide();
}, 200);
},
changePeriod(id) {
this.periodId = id;
this.$emit("change",this.periodList[this.periodId].Id)
this.reloading = true;
this.queryMyObjective();
},
deleteObjective(id) {
let index = 0;
this.objectiveList.forEach((x, i) => {
if (x.Id == id) {
index = i;
}
});
this.objectiveList.splice(index, 1);
},
openPower() {
this.krPwoerInfo = this.periodList[this.periodId];
this.powerType = 1;
this.showPower = true;
},
saveFinish() {
this.showPower = false;
},
init() {
queryOKRPeriodList().then(r => {
this.periodList = r.Data;
this.$emit("change",this.periodList[this.periodId].Id)
this.queryMyObjective();
});
},
queryMyObjective() {
let msg = {
PeriodId: this.periodList[this.periodId].Id
};
queryMyOKR(msg).then(r => {
r.Data.forEach(x => {
x.PeriodId = this.periodList[this.periodId].Id;
});
this.objectiveList = r.Data;
this.reloading = false;
});
},
createNewObjective() {
if (
this.objectiveList.length == 0 ||
this.objectiveList[this.objectiveList.length - 1].Id != 0
) {
this.newObjective = {
Id: 0,
Title: "",
PeriodId: this.periodList[this.periodId].Id,
ProgressRemark: "",
placeHolder: ""
};
this.objectiveList.push(this.newObjective);
setTimeout(() => {
let keyn = `object_${this.objectiveList.length - 1}`;
this.$refs[keyn][0].$refs.obj_content.focus();
}, 200);
} else {
let keyn = `object_${this.objectiveList.length - 1}`;
console.log(this.$refs[keyn]);
this.$refs[keyn][0].$refs.obj_content.focus();
}
},
changeUpdate() {
this.objectiveList.splice(this.objectiveList.length - 1, 1);
},
reloadComment(){
this.$refs.commentBox.queryCommit()
}
}
};
</script>
<style>
.action-btn .q-btn__content .block {
color: var(--q-color-primary) !important;
font-weight: bold !important;
}
.no-action-btn .q-btn__content .block {
color: var(--q-color-dark) !important;
}
.icon-btn .q-btn__wrapper {
padding: 4px 8px !important;
}
</style>
src/components/okr/okr-process.vue 0 → 100644
View file @ 2f92d143
<template>
<q-card class="q-pa-md">
<div v-if="kr.IsEasyMode == 1">
<div class="text-subtitle2 text-weight-bold">当前进度</div>
<q-input
dense
autofocus
v-model="kr.progressTemp"
@keyup="validateInput2"
>
<template v-slot:append>
<inline-svg
class="svg-icon svg-icon-primary"
src="icons/svg/Shopping/Sale1.svg"
></inline-svg>
</template>
</q-input>
</div>
<div
v-if="kr.IsEasyMode == 2"
class="flex row items-center"
style="width:240px;"
>
<div class="col">
<div class="text-subtitle2 text-weight-bold">起始值</div>
<q-input
dense
style="height:30px"
v-model="kr.StartValue"
@keyup="validateInput('StartValue')"
>
</q-input>
</div>
<div class="col q-mx-md">
<div class="text-subtitle2 text-weight-bold">当前值</div>
<q-input
dense
style="height:30px"
v-model="kr.CurrentValue"
@keyup="validateInput('CurrentValue')"
>
</q-input>
</div>
<div class="col">
<div class="text-subtitle2 text-weight-bold">目标值</div>
<q-input
dense
style="height:30px"
v-model="kr.EndValue"
@keyup="validateInput('EndValue')"
>
</q-input>
</div>
</div>
<div class="q-mt-lg text-subtitle2 text-weight-bold">状态</div>
<div>
<q-radio
keep-color
v-model="kr.ProgressState"
size="xs"
val="1"
label="正常"
color="primary"
/>
</div>
<div>
<q-radio
keep-color
v-model="kr.ProgressState"
size="xs"
val="2"
label="有风险"
color="warning"
/>
</div>
<div>
<q-radio
keep-color
v-model="kr.ProgressState"
size="xs"
val="3"
label="已延期"
color="negative"
/>
</div>
<div
class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
v-if="kr.IsEasyMode == 1"
@click="changeMode(2)"
>
切换为高级模式
</div>
<div
class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
v-if="kr.IsEasyMode == 2"
@click="changeMode(1)"
>
切换为简单模式
</div>
</q-card>
</template>
<script>
export default {
props: ["kr"],
data() {
return {
processStatus: "0",
modeType: 0
};
},
mounted() {
this.kr.ProgressState = this.kr.ProgressState.toString();
this.kr.progressTemp = this.kr.Progress;
},
methods: {
changeMode(t) {
this.kr.IsEasyMode = t;
},
validateInput(key) {
let obj = this.kr[key];
if (obj.length == 1) {
obj = obj.replace(/[^1-9]/g, "");
} else if (obj && obj != "") {
obj = obj.replace(/\D/g, "");
}
this.kr[key] = !obj || obj == "" ? "0" : obj;
this.calcProcess();
},
validateInput2() {
let obj = this.kr.progressTemp;
if (obj.length == 1) {
obj = obj.replace(/[^1-9]/g, "");
} else if (obj && obj != "") {
obj = obj.replace(/\D/g, "");
}
obj = !obj || obj == "" ? "0" : obj;
obj = obj > 100 ? 100 : obj;
this.kr.progressTemp = Number.parseInt(obj);
this.kr.Progress = this.kr.progressTemp;
},
calcProcess() {
let crt = this.kr.CurrentValue - this.kr.StartValue;
if (crt > 0) {
this.kr.Progress = (crt * 100) / this.kr.EndValue;
} else {
this.kr.Progress = 0;
}
}
}
};
</script>
<style></style>
src/components/okr/okr-query.vue 0 → 100644
View file @ 2f92d143
This diff is collapsed.
src/components/okr/progressRemark.vue 0 → 100644
View file @ 2f92d143
This diff is collapsed.
src/components/okr/search-okr.vue 0 → 100644
View file @ 2f92d143
<template>
<div style="width:420px;">
<q-input
flat
v-model="searchText"
style="margin:0 12px;"
borderless
placeholder="按姓名搜索同事"
@input="querySearchResult"
>
<template v-slot:append>
<inline-svg
class="svg-icon svg-icon-primary"
src="icons/svg/General/Search.svg"
></inline-svg>
</template>
</q-input>
<div class="results">
<div class="result-item" v-for="(x, i) in usersList" :key="i">
<div class="bg-grey-3 flex row items-center" style="padding:6px 12px">
<q-avatar
size="20px"
font-size="14px"
rounded
color="blue-2"
text-color="blue-13"
>
<img :src="x.UserPhoto" v-if="x.UserPhoto" />
<span v-else-if="x.UserName">{{ x.UserName.substring(0, 1) }}</span>
</q-avatar>
<div class="q-mx-md remark-font">{{ x.UserName }}</div>
<div class="col remark-font">{{ x.DeptName }}·{{ x.PostName }}</div>
</div>
<q-list v-if="x.List && x.List.length > 0">
<template v-for="(y, yi) in x.List">
<q-item
class="rounded-borders"
clickable
v-ripple
v-if="y.IsNotLook != 1"
:key="yi"
active-class="bg-red"
:disable="y.IsParent == 1"
@click="setAlign(x, y)"
>
<div class="flex row items-center">
<div style="width:30px;margin-top:5px;">
<inline-svg
v-if="y.IsLock == 1"
class="svg-icon svg-icon-grey"
src="icons/svg/General/Lock.svg"
width="14px"
height="14px"
></inline-svg>
<q-tooltip
content-class="bg-dark text-white"
v-if="y.IsLock == 1"
>已设保密，请勿外出</q-tooltip
>
</div>
<div class="col">
<span>Objective{{ yi + 1 }}:{{ y.Title }}</span>
<q-tooltip
content-class="bg-dark text-white"
v-if="y.IsParent == 1"
>已对其，无需再次对齐</q-tooltip
>
</div>
</div>
</q-item>
</template>
</q-list>
<div v-else class="q-pa-md text-center remark-font">暂无objective</div>
</div>
</div>
</div>
</template>
<script>
import { queryObjectiveBySearch, setAlign } from "../../api/okr/work";
export default {
props: ["periodId", "sourceId"],
data() {
return {
searchText: "",
usersList: []
};
},
methods: {
querySearchResult() {
this.usersList = [];
this.searchText = this.searchText.trim();
if (this.searchText != "") {
queryObjectiveBySearch({
PeriodId: this.periodId,
UserName: this.searchText,
ObjectiveId: this.sourceId
}).then(r => {
this.usersList = r.Data;
});
}
},
setAlign(x, y) {
if (y.IsNotLook == 2 && y.IsParent == 2) {
let temp = JSON.parse(JSON.stringify(y));
setAlign({
ObjectiveId: this.sourceId,
ParentId: y.Id
}).then(r => {
this.$q.notify({
message: "对齐成功",
color: "#21ba45",
position: "top"
});
y.IsParent=1;
let newObj = {
AccountId: 0,
AccountName: x.UserName,
AlignList: [y],
Icon:x.UserPhoto
};
this.$emit('add',newObj)
});
}
}
}
};
</script>
<style></style>
src/css/quasar.variables.sass
View file @ 2f92d143
......@@ -14,7 +14,7 @@
$primary : #2961fe
$secondary : #1bc5bd
$accent : #8950fc
$accent : #232125
$dark : #1d1d1d
......
src/layouts/MainLayout.vue
View file @ 2f92d143
......@@ -65,7 +65,7 @@
</div>
<div class="col" style="background: #f2f4f7;">
<q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
<router-view style="margin:20px" />
<router-view />
</q-scroll-area>
</div>
</div>
......
src/pages/Index.vue → src/pages/Work.vue
View file @ 2f92d143
<template>
<div class="home flex column " style="height:calc(100vh - 101px);margin:0px !important;flex-wrap: nowrap">
<div class="flex column full-height" style="padding-top:54px !important;">
<!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
<div class="box" v-if="AccountType==2 || ispower==true">
<div style="margin: 0 auto;width: 130px;">
<div class="sub-header" v-if="AccountType==2 || ispower==true">
<!-- <div style="margin: 0 auto;width: 130px;">
<el-tabs v-model="model" >
<el-tab-pane :label="item.label" :name="item.value" :key="item.value" v-for="(item, index) in options"></el-tab-pane>
</el-tabs>
</div>
</div> -->
<q-btn @click="changeMenu(1)" flat :color="chosenMenu==1?'primary':'blue-grey-14'" :class="[chosenMenu==1?'text-weight-bold':'']" label="OKR 工作区">
<q-menu v-if="chosenMenu==1">
<q-list>
<q-item clickable>
<q-item-section q-item-section avatar>
<inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Text/Edit-text.svg"></inline-svg>
</q-item-section>
<q-item-section>OKR</q-item-section>
</q-item>
<q-separator />
<q-item clickable>
<q-item-section q-item-section avatar>
<inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/General/Visible.svg"></inline-svg>
</q-item-section>
<q-item-section>对齐视图</q-item-section>
</q-item>
<q-item clickable>
<q-item-section q-item-section avatar>
<inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Shopping/Chart-pie.svg"></inline-svg>
</q-item-section>
<q-item-section>数据看板</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn @click="changeMenu(2)" flat :color="chosenMenu==2?'primary':'blue-grey-14'" :class="[chosenMenu==2?'text-weight-bold':'']" label="备课管理">
</q-btn>
</div>
<div v-if="model=='one'" class="flex flex-center col" style="flex: 1;min-height: 750px">
<img style="width:250px;" alt="Quasar logo" src="../assets/images/logo.png" />
<div v-if="chosenMenu==1" class="flex col" style="flex: 1">
<okr></okr>
</div>
<div v-if="model=='two'" class="col" style="overflow: auto">
<div v-if="chosenMenu==2" class="col" style="height: 750px;overflow: auto">
<teachplan></teachplan>
</div>
</div>
......@@ -19,9 +46,11 @@
<script>
import teachplan from './course/teacherLesson'
import okr from './okr/index'
export default {
components:{
teachplan
teachplan,
okr
},
name: 'PageIndex',
data(){
......@@ -33,7 +62,7 @@
model: 'one',
AccountType:1,
ispower:false,//是否显示备课管理
chosenMenu:1
}
},
created() {
......@@ -60,6 +89,9 @@
}
},
methods:{
changeMenu(i){
this.chosenMenu=i
},
getMapList(list){
list.forEach(x=>{
if(x.MenuUrl == '/course/teacherLesson'){
......@@ -83,7 +115,25 @@
.homebx {
margin: 0;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.box .el-tabs__header{
margin: 0;
}
.sub-header{
position: fixed;
height: 56px;
top: 60px;
left: 0;
right: 0;
transition: top .3s ease;
z-index: 95;
box-shadow: 0 10px 30px 0 rgba(82,63,105,.08);
background-color: #fff;
border-top: 1px solid #ebedf3;
margin: 0;
padding: 10px 20px;
}
</style>
src/pages/okr/index.vue 0 → 100644
View file @ 2f92d143
This diff is collapsed.
src/router/routes.js
View file @ 2f92d143
......@@ -15,7 +15,7 @@ const routes = [{
children: [{
path: "",
component: () =>
import("pages/Index.vue")
import("src/pages/Work.vue")
},
{
path: "/school/manager",
......
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