123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312 |
- <template>
- <div class="okrPage" v-loading="loading">
- <div class="topBox"></div>
- <div class="title">
- <!-- <p>{{time.year}}年第{{time.quarter}}季度OKR</p> -->
- <el-select
- v-model="yearValue"
- placeholder="年份"
- @change="yearChange"
- style="width: 80px"
- >
- <el-option
- v-for="item in yearsOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <span>年</span>
- <el-select v-model="cycleValue" placeholder="季度" @change="cycleChange">
- <el-option
- v-for="item in cycleOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- <div class="synchronization">
- <!-- <el-button type="warning" icon="el-icon-share" circle></el-button> -->
- <!-- <el-button type="warning" plain class="OKRSYNC" @click="okrSync">OKR同步</el-button> -->
- </div>
- <div class="openOkrSyncBox">
- <el-dialog
- title="添加同步人"
- :visible.sync="okrVisible"
- width="30%"
- center
- :before-close="OKRhandleClose"
- >
- <span>
- <div class="nowSelect">
- <div class="nowSelectLeft">现有同步人:</div>
- <div class="nowSelectRight">
- <span
- v-for="(item, index) in selectedPeople"
- :key="index"
- style="margin-right: 10px"
- class="nowSelectItem"
- >
- <el-link
- type="success"
- style="margin-top: -3px"
- class="nowSelectItemLink"
- >
- {{ item.label }}
- <el-popconfirm
- title="确定移除该同步人吗?"
- @onConfirm="deletePeople(item)"
- >
- <span slot="reference" class="deleteSelectedPeople">
- <i class="el-icon-circle-close"></i>
- </span>
- </el-popconfirm>
- </el-link>
- </span>
- </div>
- </div>
- <span>添加同步人:</span>
- <el-select
- v-model="syncPeopleValue"
- filterable
- placeholder="请选择需要同步的人"
- :multiple="true"
- style="width: 60%"
- >
- <el-option
- v-for="item in syncPeopleOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </span>
- <span slot="footer" class="dialog-footer">
- <el-button @click="okrVisible = false">取 消</el-button>
- <el-button type="primary" @click="syncOK">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- <div class="okrBody" v-if="okr.length > 0">
- <div class="okrBox first">
- <div class="okrBox-title">
- <!-- taskInfoListKey -->
- <p class="top-title">
- <el-radio-group v-model="taskInfoListKey" class="left-button" @change="changeWeek">
- <!-- taskInfoWeeks -->
- <el-radio-button v-for="(item, index) in taskInfoWeeks" :key="index" :label="item">{{'第'+item+'周'}}</el-radio-button>
- </el-radio-group>
- <span class="right-time">
- {{currentDate}}
- </span>
- </p>
- <!-- :disabled="
- time.year != time.currentYear ||
- time.quarter != time.currentQuarter
- " -->
- <el-button
- type="text"
- class="createTask"
- @click="createTask(1)"
- v-if="taskFourWeekKey >= currentMonth"
- >
- <i class="el-icon-plus"></i>新建任务
- </el-button>
- </div>
- <div class="okrbox-list">
- <ul>
- <li v-for="item in taskInfoList[taskInfoListKey]" :key="item.id">
- <el-popover
- placement="top-start"
- :title="'标题:' + item.taskTitle"
- width="300"
- trigger="hover"
- :content="'详细描述:' + item.taskInfo"
- >
- <span slot="reference" class="content">
- <span class="taskGrade">
- <!-- P{{item.priority}} -->
- <img
- src="../assets/image/1.png"
- alt
- v-if="item.priority == '1'"
- class="priorityIMg"
- />
- <img
- src="../assets/image/2.png"
- alt
- v-if="item.priority == '2'"
- class="priorityIMg"
- />
- <img
- src="../assets/image/3.png"
- alt
- v-if="item.priority == '3'"
- class="priorityIMg"
- />
- </span>
- <span class="taskTitle">
- {{ item.taskTitle }}
- <span
- v-for="element in item.remindVOS"
- :key="element.krId"
- class="remindSpan"
- >@<span v-if="element.remindId == '10086'">所有人</span
- ><span v-else>{{ element.name }}</span>
- </span>
- </span>
- </span>
- </el-popover>
- <!-- v-show="
- time.year == time.currentYear &&
- time.quarter == time.currentQuarter
- " -->
- <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 3">
- <el-tag
- type="success"
- effect="dark">
- 已完成
- </el-tag>
- </div>
- <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 2">
- <el-tag
- color="#a611e4"
- effect="dark">
- 延续
- </el-tag>
- </div>
-
- <div
- class="list-opt"
- v-if="taskFourWeekKey >= currentMonth"
- >
- <!-- <el-progress :percentage="30" ></el-progress> -->
- <!-- <div style="width:30%">
- <el-progress :percentage="50" color='#cc9966'></el-progress>
- </div>-->
-
- <el-button
- type="warning"
- icon="el-icon-edit"
- size="mini"
- circle
- @click="editTask(item)"
- style="margin-right: 5px"
- ></el-button>
- <el-popconfirm
- icon="el-icon-info"
- iconColor="red"
- title="确定删除吗?"
- @confirm="deleteTask(item)"
- >
- <!-- <el-button slot="reference">删除</el-button> -->
- <el-button
- type="danger"
- slot="reference"
- icon="el-icon-delete"
- size="mini"
- circle
- ></el-button>
- </el-popconfirm>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="okrBox second">
- <div class="okrBox-title">
- <p class="top-title">OKR</p>
- <!-- :disabled="
- time.year != time.currentYear ||
- time.quarter != time.currentQuarter
- " -->
- <el-button
- type="text"
- @click="openCreateKR"
- class="createTask"
-
- >
- <i class="el-icon-plus"></i>新建KR
- </el-button>
- </div>
- <div class="objectList" v-for="(item, index) in okr" :key="index">
- <div class="OBox">
- <span class="O-tip">目标</span>
- <span class="O-content" @click="changeObject(item.objectInfo)">
- {{ item.objectInfo.objectInfo }}
- <!-- <el-button type="warning" icon="el-icon-edit" size='mini' circle></el-button> -->
- <!-- v-show="
- time.year == time.currentYear &&
- time.quarter == time.currentQuarter
- " -->
- <span
- class="edit"
-
- >
- <i class="el-icon-edit"></i>
- </span>
- </span>
- <span class="O-opt">
- <el-progress
- type="circle"
- :width="60"
- :height="60"
- :percentage="item.objectInfo.completion"
- :color="colors"
- ></el-progress>
- </span>
- </div>
- <div class="KRBox">
- <ul>
- <li v-for="(ele, index) in item.krList" :key="index">
- <span class="KR-tip">KR</span>
- <el-popover
- placement="top-start"
- width="500"
- trigger="click"
- @show="getAlignmentList(ele)"
- >
- <!--
- :title="'KR:' + ele.krInfo"
- :content="'详细描述:' + (ele.krDesc || '暂无')" -->
- <h2>{{ "KR:" + ele.krInfo }}</h2>
- <p>{{ "详细描述:" + (ele.krDesc || "暂无") }}</p>
- <h2>我对齐的KR</h2>
- <div style="max-height: 200px; overflow: auto">
- <ul>
- <li
- v-for="(list, indexOne) in Alignment" :key="indexOne"
- style="display: flex; justify-content: space-between"
- >
- <p
- style="
- display: flex;
- justify-content: space-between;
- width: 100%;
- "
- >
- <span style="width: 60%">{{ list.krInfo }}</span
- ><span>{{ list.userName }}</span>
- <a
- @click="deleteAlignment(list.id, ele)"
- style="
- white-space: nowrap;
- margin-left: 20px;
- cursor: pointer;
- color: red;
- "
- >删除</a
- >
- </p>
- </li>
- </ul>
- <!-- <el-button size="mini" type="text" @click="visible = false"
- >取消</el-button
- >
- <el-button
- type="primary"
- size="mini"
- @click="visible = false"
- >确定</el-button
- > -->
- </div>
- <h2>对齐我的KR</h2>
- <div style="max-height: 200px; overflow: auto">
- <ul>
- <li v-for="(list, indexOne) in otherAligned" :key="indexOne"
- style="display: flex; justify-content: space-between"
- >
- <p
- style="
- display: flex;
- justify-content: space-between;
- width: 100%;
- "
- >
- {{ list.krInfo }}
- <span>{{ list.userName }}</span>
- <!-- <a
- @click="deleteAlignment(list.id, ele)"
- style="
- white-space: nowrap;
- margin-left: 20px;
- cursor: pointer;
- color: red;
- "
- >删除</a
- > -->
- </p>
- </li>
- </ul>
- <!-- <el-button size="mini" type="text" @click="visible = false"
- >取消</el-button
- >
- <el-button
- type="primary"
- size="mini"
- @click="visible = false"
- >确定</el-button
- > -->
- </div>
- <span slot="reference" class="content">
- <span class="KR-content">
- {{ ele.krInfo }}
- <span
- v-for="element in ele.remindVOS"
- :key="element.remindId"
- class="remindSpan"
- >@<span v-if="element.remindId == '10086'">所有人</span
- ><span v-else>{{ element.name }}</span>
- </span>
- </span>
- </span>
- </el-popover>
- <!-- v-show="
- time.year == time.currentYear &&
- time.quarter == time.currentQuarter
- " -->
- <span class="KR-opt">
- <span style="width: 50%">
- <el-progress
- :percentage="ele.completion"
- :color="itemColor"
- ></el-progress>
- </span>
- <el-button
- type="success"
- icon="el-icon-film"
- size="mini"
- circle
- @click="setAlignment(ele)"
-
- ></el-button>
- <!-- v-show="
- time.year == time.currentYear &&
- time.quarter == time.currentQuarter
- " -->
- <el-button
- type="warning"
- icon="el-icon-edit"
- size="mini"
- circle
- @click="editKR(ele)"
- style="margin-right: 5px"
-
- ></el-button>
- <el-popconfirm
- icon="el-icon-info"
- iconColor="red"
- title="确定删除吗?"
- @confirm="deleteKR(ele)"
- >
- <!-- <el-button slot="reference">删除</el-button> -->
- <!-- v-show="
- time.year == time.currentYear &&
- time.quarter == time.currentQuarter
- " -->
- <el-button
- type="danger"
- slot="reference"
- icon="el-icon-delete"
- size="mini"
- circle
-
- ></el-button>
- </el-popconfirm>
- </span>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="okrBox third">
- <div class="okrBox-title">
- <p class="top-title">
- <el-radio-group v-model="taskFourWeekKey" class="left-button" @change="changeMonth">
- <!-- taskInfoWeeks -->
- <el-radio-button v-for="(item, index) in taskInfoMonth" :key="index" :label="item">{{item+'月计划'}}</el-radio-button>
- </el-radio-group>
- </p>
- <!-- :disabled="
- time.year != time.currentYear ||
- time.quarter != time.currentQuarter
- " -->
- <el-button
- type="text"
- class="createTask"
- @click="createTask(2)"
- v-if="taskFourWeekKey >= currentMonth"
- >
- <i class="el-icon-plus"></i>新建任务
- </el-button>
- </div>
- <div class="okrbox-list">
- <ul>
- <li v-for="item in taskFourWeek[taskFourWeekKey]" :key="item.id">
- <el-popover
- placement="top-start"
- :title="'标题:' + item.taskTitle"
- width="300"
- trigger="hover"
- :content="'详细描述:' + item.taskInfo"
- >
- <span slot="reference" class="content">
- <span class="taskGrade">
- <!-- P{{item.priority}} -->
- <img
- src="../assets/image/1.png"
- alt
- v-if="item.priority == '1'"
- class="priorityIMg"
- />
- <img
- src="../assets/image/2.png"
- alt
- v-if="item.priority == '2'"
- class="priorityIMg"
- />
- <img
- src="../assets/image/3.png"
- alt
- v-if="item.priority == '3'"
- class="priorityIMg"
- />
- </span>
- <span class="taskTitle">
- {{ item.taskTitle }}
- <span
- v-for="element in item.remindVOS"
- :key="element.krId"
- class="remindSpan"
- >@{{ element.name }}</span
- >
- </span>
- </span>
- </el-popover>
- <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 3">
- <el-tag
- type="success"
- effect="dark">
- 已完成
- </el-tag>
- </div>
- <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 2">
- <el-tag
- color="#a611e4"
- effect="dark">
- 延续
- </el-tag>
- </div>
- <div
- class="list-opt"
- v-if="taskFourWeekKey >= currentMonth"
-
- >
- <!-- <el-progress :percentage="30" ></el-progress> -->
- <!-- <div style="width:30%">
- <el-progress :percentage="50" color='#cc9966'></el-progress>
- </div>-->
- <el-button
- type="warning"
- icon="el-icon-edit"
- size="mini"
- circle
- @click="editTask(item)"
- style="margin-right: 5px"
- ></el-button>
- <el-popconfirm
- icon="el-icon-info"
- iconColor="red"
- title="确定删除吗?"
- @confirm="deleteTask(item)"
- >
- <!-- <el-button slot="reference">删除</el-button> -->
- <el-button
- type="danger"
- slot="reference"
- icon="el-icon-delete"
- size="mini"
- circle
- ></el-button>
- </el-popconfirm>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="okrBox four">
- <div class="okrBox-title">
- <p class="top-title">状态指标</p>
- <el-button
- type="text"
- class="createTask"
- @click="createStatus"
-
- >
- <i class="el-icon-plus"></i>新建状态指标
- </el-button>
- </div>
- <div class="status-list">
- <li v-for="item in status" :key="item.id" class="status">
- <span
- class="itemStatus"
- :style="'background-color:' + item.color"
- @click="editSatus(item)"
- >{{ item.content }}</span
- >
- </li>
- </div>
- </div>
- </div>
- <div class="okrBody noOkr" v-else>
- <!-- {{time}} -->
- <p class="noObject">
- {{
- time.quarter == time.currentQuarter && time.year == time.currentYear
- ? "请先制定目标,才能进行okr工作板管理"
- : "该季度暂无OKR,换个季度试试吧"
- }}
- </p>
- <p
- v-show="
- time.quarter == time.currentQuarter && time.year == time.currentYear
- "
- >
- <el-button type="text" style="font-size: 20px" @click="createO"
- >立即创建</el-button
- >
- </p>
- <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
- <!-- <div class='kongbaiBackground'>
- <img src="../assets/image/shili.png" alt="" class="shili">
- </div>-->
- </div>
- <!-- 打开创建目标的模态框 -->
- <div class="openTargetBox">
- <el-dialog
- title="创建OKR目标"
- :visible.sync="targetVisible"
- width="50%"
- center
- :before-close="OKRhandleClose"
- >
- <div class="targetBody">
- <div class="targetO">
- <span class="target-tip">O</span>
- <span class="target-input">
- <el-input
- type="text"
- placeholder="请输入目标名称"
- v-model="targetName"
- maxlength="50"
- show-word-limit
- clearable
- @blur="checkedTargetName"
- ></el-input>
- </span>
- <span
- v-if="targetNameOk"
- style="font-size: 12px; color: red; margin-left: 50px"
- >目标名称时必须填写的</span
- >
- </div>
- <div class="targetKR" v-for="(item, index) in KRList" :key="index">
- <div class="kr" style="display: flex; align-items: center">
- <span class="tip">
- <span class="sc-bQduHL kArEgh"></span> KR
- </span>
- <span class="info">
- <el-input
- type="text"
- placeholder="请输入关键结果"
- v-model="item.krInfo"
- clearable
- maxlength="50"
- show-word-limit
- ></el-input>
- </span>
- </div>
- <div
- class="krdecs"
- style="margin-top: 15px; display: flex; align-items: center"
- >
- <span class="tip">
- <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
- </span>
- <span class="info">
- <el-input
- type="textarea"
- placeholder="您可对KR做进一步详细描述"
- v-model="item.krDesc"
- maxlength="1000"
- show-word-limit
- clearable
- size="small"
- ></el-input>
- </span>
- </div>
- <!-- <span class="tip">
- <span class="sc-bQduHL kArEgh"></span> KR
- </span>
- <span class="info">
- <el-input type="text" placeholder="请输入KR名称" v-model="item.krInfo" clearable></el-input>
- </span> -->
- <span class="progress">
- <span class="progressBar creatOxia">
- <span class="krtitle">KR的完成进度:</span>
- <el-slider
- v-model="item.completion"
- show-input
- style="width: 80%; margin-left: 10px"
- ></el-slider>
- </span>
- <span>
- <!-- <el-popconfirm
- icon="el-icon-info"
- iconColor="red"
- title="确定删除吗?"
- @onConfirm="deleteTask(item)"
- >
-
- <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
- </el-popconfirm>-->
- <el-button
- icon="el-icon-delete"
- circle
- class="delete"
- size="mini"
- @click="createdeleteKR(item, index)"
- ></el-button>
- <!-- <i class="el-icon-delete"></i> -->
- </span>
- </span>
- <div class="task-item">
- <span class="item-name">选择权限:</span>
- <el-radio-group
- v-model="item.KRPower"
- size="small"
- @change="ItemKRPowerChange(item)"
- >
- <el-radio label="1" border>公开</el-radio>
- <el-radio label="2" border>私密</el-radio>
- <el-radio label="3" border>指定人可见</el-radio>
- </el-radio-group>
- </div>
- <div class="task-item" v-if="item.KRPower == '1'">
- <span class="item-name">提醒谁看:</span>
- <treeselect
- v-model="item.KRremindValue"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择@的人或者部门"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="item.KRPower == '3'">
- <span class="item-name">指定可见:</span>
- <treeselect
- v-model="item.KRvisiblePerson"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择指定的可见人或者部门"
- @input="selectChange(item)"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="item.KRPower == '3'">
- <span class="item-name">提醒谁看:</span>
- <span
- class="display:block"
- v-if="item.KRTag && item.KRTag.length > 0"
- >
- <el-tag
- v-for="(tag, index) in item.KRTag"
- :key="tag.id"
- closable
- type="warning"
- @close="KRTagClose(tag, index, item)"
- style="margin-right: 8px; margin-bottom: 8px"
- >{{ tag.label }}</el-tag
- >
- </span>
- </div>
- </div>
- <div class="addKR">
- <el-button type="text" style="font-size: 16px" @click="addKR">
- <i class="el-icon-plus"></i>添加关键结果
- </el-button>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="targetVisible = false">取 消</el-button>
- <el-button type="primary" @click="createOKRcomplete">创 建</el-button>
- </span>
- </el-dialog>
- </div>
- <!-- 创建任务的模态框 -->
- <div class="openTaskBox">
- <el-dialog
- :title="taskTitle"
- :visible.sync="taskVisible"
- width="45%"
- center
- :before-close="OKRhandleClose"
- >
- <div class="taskBody">
- <div class="task-item">
- <!-- <span class="item-name">名称:</span> -->
- <el-input
- type="text"
- placeholder="请输入任务名称"
- v-model="taskName"
- maxlength="50"
- show-word-limit
- style="width: 100%"
- clearable
- @blur="checkTaskName"
- ></el-input>
- <span
- style="font-size: 12px; color: #CC6666; margin-left: 15px"
- v-if="taskNameOk"
- >任务名称是必须得填写的哦!</span
- >
- </div>
- <div class="task-item">
- <!-- <span class="item-name">描述</span> -->
- <el-input
- type="textarea"
- placeholder="您可对任务做进一步详细描述"
- v-model="taskDesc"
- maxlength="1000"
- show-word-limit
- clearable
- size="small"
- ></el-input>
- </div>
- <div class="task-item">
- <span class="item-name">选择等级:</span>
- <el-radio-group v-model="taskRange" size="small">
- <el-radio label="1" border>P1</el-radio>
- <el-radio label="2" border>P2</el-radio>
- <el-radio label="3" border>P3</el-radio>
- </el-radio-group>
- </div>
- <div class="task-item">
- <span class="item-name">选择权限:</span>
- <el-radio-group
- v-model="taskPower"
- size="small"
- @change="taskPowerChange"
- >
- <el-radio label="1" border>公开</el-radio>
- <el-radio label="2" border>私密</el-radio>
- <el-radio label="3" border>指定人可见</el-radio>
- </el-radio-group>
- </div>
- <div class="task-item" v-if="taskPower == '1'">
- <span class="item-name">提醒谁看:</span>
- <treeselect
- v-model="remindValue"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择@的人或者部门"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="taskPower == '3'">
- <span class="item-name">指定可见:</span>
- <treeselect
- v-model="visiblePerson"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择指定的可见人或者部门"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="taskPower == '3'">
- <span class="item-name">提醒谁看:</span>
- <span class="display:block">
- <el-tag
- v-for="(tag, index) in taskTag"
- :key="tag.id"
- closable
- type="warning"
- @close="handleClose(tag, index)"
- style="margin-right: 8px; margin-bottom: 8px"
- >{{ tag.label }}</el-tag
- >
- </span>
- </div>
- <div v-if="taskTitle == '修改任务'" class="task-item">
- <span class="item-name">当前状态:</span>
- <el-radio-group
- v-model="statusTask"
- size="small"
- >
- <el-radio :label="1" border>正常</el-radio>
- <el-radio :label="2" border>延续</el-radio>
- <el-radio :label="3" border>已完成</el-radio>
- </el-radio-group>
- </div>
- <!-- 完成的进度 -->
- <!-- <div class="task-item">
- <span class="item-name" >设置进度:</span>
- <el-slider
- v-model="taskProgress"
- show-input
- style="width:80%;margin-left:10px">
- </el-slider>
- </div>-->
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="taskVisible = false">取 消</el-button>
- <el-button
- type="warning"
- @click="taskOk"
- v-if="taskTitle == '创建任务'"
- :loading="taskVisibleLoading"
- >创 建</el-button
- >
- <el-button
- type="warning"
- @click="editTaskOk"
- v-if="taskTitle == '修改任务'"
- :loading="taskVisibleLoading"
- >修 改</el-button
- >
- </span>
- </el-dialog>
- </div>
- <!-- 创建和修改状态指标 -->
- <div class="openStatusBox">
- <el-dialog
- :title="statusTitle"
- :visible.sync="statusVisible"
- width="40%"
- center
- :before-close="OKRhandleClose"
- >
- <div class="taskBody StatusBody">
- <div class="task-item">
- <!-- <span class="item-name">名称:</span> -->
- <el-input
- type="text"
- placeholder="请输入状态指标"
- v-model="statusName"
- maxlength="15"
- show-word-limit
- style="width: 95%"
- clearable
- @blur="checkStatusName"
- ></el-input>
- <span
- style="
- font-size: 12px;
- color: #CC6666;
- margin-left: 15px;
- display: block;
- margin-top: 5px;
- "
- v-if="statusNameOk"
- >状态指标是必须得填写的哦!</span
- >
- </div>
- <div class="task-item">
- <span class="item-name">选择状态:</span>
- <el-radio-group v-model="statusType" size="small">
- <el-radio label="1" border class="first">较差</el-radio>
- <el-radio label="2" border class="second">一般</el-radio>
- <el-radio label="3" border class="third">良好</el-radio>
- </el-radio-group>
- </div>
- <div class="task-item" v-if="statusTitle == '修改状态指标'">
- <div
- style="
- width: 200px;
- height: 30px;
- margin: 0 auto;
- text-align: center;
- margin-top: 30px;
- "
- >
- <!-- <el-popconfirm
- icon="el-icon-info"
- iconColor="red"
- title="确定删除吗?"
- @onConfirm="deleteStatusOk"
- >
-
- <el-button type="warning" slot="reference" >删除本条状态指标</el-button>
- </el-popconfirm>-->
- <el-button type="warning" @click="deleteStatusOk"
- >删除本条状态指标</el-button
- >
- </div>
- </div>
- <!-- 完成的进度 -->
- <!-- <div class="task-item">
- <span class="item-name" >设置进度:</span>
- <el-slider
- v-model="taskProgress"
- show-input
- style="width:80%;margin-left:10px">
- </el-slider>
- </div>-->
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="statusVisible = false">取 消</el-button>
- <el-button
- type="warning"
- @click="statusOk"
- v-if="statusTitle == '创建状态指标'"
- >创 建</el-button
- >
- <el-button
- type="warning"
- @click="editStatusOk"
- v-if="statusTitle == '修改状态指标'"
- >修 改</el-button
- >
- </span>
- </el-dialog>
- </div>
- <!-- 创建和修改KR -->
- <div class="openKRBox">
- <el-dialog
- :title="KRTitle"
- :visible.sync="KRVisible"
- width="50%"
- center
- :before-close="OKRhandleClose"
- >
- <div class="taskBody targetBody editKRBody">
- <div class="targetO">
- <span class="target-tip">O</span>
- <span class="target-input">
- <div class="currentO">{{ okrObject.objectInfo }}</div>
- </span>
- <!-- <span v-if="targetNameOk" style="font-size:12px;color:red;margin-left:50px">目标名称时必须填写的</span> -->
- </div>
- <div class="task-item">
- <!-- <span class="item-name">名称:</span> -->
- <div class="targetKR">
- <div class="kr" style="display: flex; align-items: center">
- <span class="tip">
- <span class="sc-bQduHL kArEgh"></span> KR
- </span>
- <span class="info">
- <el-input
- type="text"
- placeholder="请输入关键结果"
- v-model="KRName"
- clearable
- maxlength="50"
- show-word-limit
- ></el-input>
- </span>
- </div>
- <span
- style="
- font-size: 12px;
- color: #CC6666;
- margin-left: 10%;
- display: block;
- margin-top: 5px;
- "
- v-if="KRNameOk"
- >KR是必须得填写的哦!</span
- >
- <div
- class="krdecs"
- style="margin-top: 15px; display: flex; align-items: center"
- >
- <span class="tip">
- <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
- </span>
- <span class="info">
- <el-input
- type="textarea"
- placeholder="您可对KR做进一步详细描述"
- v-model="KRDesc"
- maxlength="2000"
- show-word-limit
- clearable
- size="small"
- ></el-input>
- </span>
- </div>
- <span class="progress">
- <span class="krtitle">KR的完成进度:</span>
- <span class="progressBar">
- <el-slider
- v-model="KRProgress"
- show-input
- style="width: 100%; margin-left: 10px"
- ></el-slider>
- </span>
- </span>
- <div class="task-item">
- <span class="item-name">选择权限:</span>
- <el-radio-group
- v-model="KRPower"
- size="small"
- @change="KRPowerChange"
- >
- <el-radio label="1" border>公开</el-radio>
- <el-radio label="2" border>私密</el-radio>
- <el-radio label="3" border>指定人可见</el-radio>
- </el-radio-group>
- </div>
- <div class="task-item" v-if="KRPower == '1'">
- <span class="item-name">提醒谁看:</span>
- <treeselect
- v-model="KRremindValue"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择@的人或者部门"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="KRPower == '3'">
- <span class="item-name">指定可见:</span>
- <treeselect
- v-model="KRvisiblePerson"
- :multiple="true"
- :options="options"
- :clear-on-select="clearOnSelect"
- placeholder="选择指定的可见人或者部门"
- style="width: 80%; display: inline-block"
- />
- </div>
- <div class="task-item" v-if="KRPower == '3'">
- <span class="item-name">提醒谁看:</span>
- <span class="display:block">
- <el-tag
- v-for="(tag, index) in KRTag"
- :key="tag.id"
- closable
- type="warning"
- @close="KRhandleClose(tag, index)"
- style="margin-right: 8px; margin-bottom: 8px"
- >{{ tag.label }}</el-tag
- >
- </span>
- </div>
- </div>
- </div>
- <!-- <div class="task-item">
- <span class="item-name" >选择状态:</span>
- <el-radio-group v-model="statusType" size="small" >
- <el-radio label="1" border class="first">危险</el-radio>
- <el-radio label="2" border class="second">一般</el-radio>
- <el-radio label="3" border class="third">良好</el-radio>
-
- </el-radio-group>
- </div>-->
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="KRVisible = false">取 消</el-button>
- <el-button type="warning" @click="KROk" v-if="KRTitle == '新建KR'"
- :loading="KROKVisible">创 建</el-button
- >
- <el-button type="warning" @click="editKROk" v-if="KRTitle == '修改KR'"
- >修 改</el-button
- >
- </span>
- </el-dialog>
- </div>
- <!-- 修改O -->
- <div class="openTargetBox">
- <el-dialog
- title="修改OKR目标"
- :visible.sync="ObejectVisible"
- width="50%"
- center
- :before-close="OKRhandleClose"
- >
- <div class="targetBody editKRBody taskBody">
- <div class="targetO">
- <span class="target-tip">O</span>
- <span class="target-input currentO">
- <el-input
- type="text"
- placeholder="请输入目标名称"
- v-model="ObjectName"
- maxlength="30"
- show-word-limit
- clearable
- focus
- @blur="checkedObjectName"
- ></el-input>
- </span>
- <span
- v-if="ObjectNameOk"
- style="font-size: 12px; color: red; margin-left: 50px"
- >目标名称时必须填写的</span
- >
- </div>
- <div class="progress task-item" style="display: block">
- <span class="progress">
- <span class="progressBar">
- <span>目标的完成进度:</span>
- <el-slider
- v-model="ObjectProgress"
- show-input
- style="width: 80%; margin-left: 10px"
- ></el-slider>
- </span>
- </span>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="ObejectVisible = false">取 消</el-button>
- <el-button type="warning" @click="editObjectComplete"
- >修 改</el-button
- >
- </span>
- </el-dialog>
- </div>
- <el-dialog
- title="添加对齐"
- :visible.sync="AlignmentVisible"
- width="50%"
- center
- :before-close="OKRhandleClose"
- >
- <!--
- {{ checkedCities }} -->
- <div style="margin-bottom: 15px">
- 人员筛选:
- <el-select
- v-model="person"
- filterable
- placeholder="请选择"
- @change="getAlignmentPerson"
- >
- <el-option
- v-for="item in optionsPerson"
- :key="item.userId"
- :label="item.name"
- :value="item.userId"
- >
- </el-option>
- </el-select>
- </div>
- <ul
- class="infinite-list"
- v-infinite-scroll="getAlignmentPageList"
- :infinite-scroll-immediate="false"
- style="overflow: auto; height: 500px"
- >
- <el-checkbox-group v-model="checkedCities">
- <li v-for="(item, index) in alignmentList" :key="index" class="infinite-list-item">
- <el-checkbox :key="item.id" :label="item.id">
- <el-card class="box-card">
- <h3>
- {{ item.krInfo
- }}<span style="color: red">({{ item.userName }})</span>
- </h3>
- <p class="text item">
- {{ item.krDesc }}
- </p>
- </el-card>
- </el-checkbox>
- </li>
- </el-checkbox-group>
- </ul>
- <span slot="footer" class="dialog-footer">
- <el-button @click="AlignmentVisible = false">取 消</el-button>
- <el-button
- type="warning"
- @click="addAlignmentPageList"
- :loading="okLoading"
- >添 加</el-button
- >
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- // import { TreeSelect } from 'ant-design-vue';
- import Treeselect from "@riophae/vue-treeselect";
- // import the styles
- import "@riophae/vue-treeselect/dist/vue-treeselect.css";
- import { postAction, getAction } from "@/utils/api/http.js";
- // const SHOW_PARENT = TreeSelect.SHOW_PARENT;
- let cycleOptions = [
- // {
- // label:'全部',
- // value:0
- // },
- {
- label: "第一季度",
- value: 1,
- },
- {
- label: "第二季度",
- value: 2,
- },
- {
- label: "第三季度",
- value: 3,
- },
- {
- label: "第四季度",
- value: 4,
- },
- ];
- export default {
- components: { Treeselect },
- data() {
- return {
- KROKVisible:false,
- taskVisibleLoading:false,
- okLoading: false,
- optionsPerson: [],
- person: "",
- AlignmentVisible: false, //添加对齐
- alignmentList: [], //添加对齐列表
- alignmentPage: 1,
- checkedCities: [],
- krId: null,
- Alignment: [],
- otherAligned: [],
- yearValue: undefined,
- cycleValue: undefined,
- yearsOptions: [],
- cycleOptions,
- clearOnSelect: true,
- loading: false,
- options: [],
- // options2,
- taskTag: [],
- KRTag: [],
- remindValue: [], //@的人 任务
- visiblePerson: [], //指定可见人 任务
- statusTask: 1,
- // SHOW_PARENT,
- KRPower: "1", //kr的权限
- KRremindValue: [], //kr的提醒人
- KRvisiblePerson: [], //kr的可见人
- okrVisible: false, //同步okr的弹框是否可见
- targetVisible: false, //创建目标的弹框
- taskVisible: false, //创建的弹框是否可见
- syncPeopleValue: [],
- syncPeopleOptions: [],
- selectedPeople: [],
- okr: [],
- okrList: [],
- okrObject: {},
- allTime: null,
- taskInfoList: [],
- taskInfoListKey:null,
- taskFourWeekKey:null,
- currentMonth:null,
- currentWeek:null,
- currentDate:null,
- taskInfoWeeks:[],
- taskInfoMonth:[],
- taskFourWeek: [],
- status: [],
- time: {},
- currentTask: 0, //创建的类型 周1 月2
- taskTitle: "", //task的标题
- taskName: "", //名称
- taskDesc: "", //描述
- taskNameOk: false, //名称是否填写
- taskRange: "1", //等级
- taskPower: "1", //权限 1公开2私密3指定
- taskProgress: 0, //进度
- taskId: undefined, //id
- statusTitle: "", //状态模态框的标题
- statusVisible: false,
- statusName: "",
- statusNameOk: false,
- statusId: 0,
- statusType: "2",
- KRTitle: "", //kr模态框的标题
- KRNameOk: false,
- KRVisible: false,
- KRName: "",
- KRProgress: 0,
- KRId: 0,
- KRDesc: "",
- percentage: 0,
- colors: [
- { color: "#f56c6c", percentage: 30 },
- { color: "#e6a23c", percentage: 60 },
- { color: "#5cb87a", percentage: 80 },
- { color: "#5cb87a", percentage: 100 },
- ],
- itemColor: [
- { color: "#f56c6c", percentage: 30 },
- { color: "#e6a23c", percentage: 60 },
- { color: "#cc9966", percentage: 90 },
- { color: "#cc9966", percentage: 100 },
- { color: "#5cb87a", percentage: 100 },
- ],
- targetName: "", //目标的名字
- targetNameOk: false,
- KRList: [],
- krInfo: [],
- ObjectName: "",
- ObjectNameOk: false,
- ObjectProgress: 0,
- currentObjId: 0,
- ObejectVisible: false,
- currentKRitem: {},
- currentTaskitem: {},
- };
- },
- watch: {
- visiblePerson: {
- deep: true,
- handler(n, o) {
- this.taskTag = [];
- // this.taskTag=JSON.parse(JSON.stringify(n))
- console.log(n, o);
- if (n) {
- n.map((item) => {
- this.taskTag.push({
- id: item,
- label: this.filterName(item),
- });
- });
- }
- if (this.currentTaskitem.id) {
- if (this.currentTaskitem.permission == 3) {
- if (this.currentTaskitem.remindVOS) {
- this.taskTag = [];
- this.currentTaskitem.remindVOS.forEach((item) => {
- this.taskTag.push({
- id: item.remindId,
- label: item.name,
- });
- });
- }
- }
- }
- },
- },
- KRvisiblePerson: {
- deep: true,
- handler(n, o) {
- this.KRTag = [];
- // this.taskTag=JSON.parse(JSON.stringify(n))
- if (n) {
- n.map((item) => {
- this.KRTag.push({
- id: item,
- label: this.filterName(item),
- });
- });
- }
- if (this.currentKRitem.id) {
- if (this.currentKRitem.permission == 3) {
- if (this.currentKRitem.remindVOS) {
- this.KRTag = [];
- this.currentKRitem.remindVOS.forEach((ele) => {
- this.KRTag.push({
- id: ele.remindId,
- label: ele.name,
- });
- });
- }
- }
- }
- },
- },
- },
- methods: {
- //添加对齐
- addAlignmentPageList() {
- this.okLoading = true;
- postAction(
- `/okr/kr/addAlign?originId=${
- this.krId
- }&alignId=${this.checkedCities.join()}`
- ).then((res) => {
- if (res.success) {
- this.$message.success("添加对齐成功");
- this.AlignmentVisible = false;
- this.alignmentPage = 1;
- this.okLoading = false;
- } else {
- this.$message.success(res.message);
- this.okLoading = false;
- }
- });
- },
- //设置对齐的列表
- setAlignment(ele) {
- this.checkedCities = [];
- this.person = "";
- this.AlignmentVisible = true;
- this.krId = ele.id;
- getAction("/okr/kr/list", {
- year: this.yearValue,
- quarter: this.cycleValue,
- pageSize: 10,
- pageNo: 1,
- userId: this.person,
- }).then((res) => {
- if (res.success) {
- this.alignmentList = res.result.records;
- }
- });
- postAction("/okr/qywx/getUserListByName", {}).then((res) => {
- console.log(res);
- if (res.success) {
- this.optionsPerson = res.result;
- }
- });
- },
- getAlignmentPerson() {
- this.alignmentPage = 0;
- this.alignmentList = [];
- this.getAlignmentPageList();
- },
- //滚动加载
- getAlignmentPageList() {
- this.alignmentPage++;
- getAction("/okr/kr/list", {
- year: this.yearValue,
- quarter: this.cycleValue,
- pageSize: 10,
- pageNo: this.alignmentPage,
- userId: this.person,
- }).then((res) => {
- if (res.success) {
- this.alignmentList.push(...res.result.records);
- }
- });
- },
- //获取对齐的详情列表
- getAlignmentList(ele) {
- console.log(ele);
- this.Alignment = [];
- this.otherAligned = [];
- postAction(`/okr/kr/alignList?originId=${ele.id}`).then((res) => {
- if (res.success) {
- this.Alignment.push(...res.myAlign);
- this.otherAligned.push(...res.otherAligned);
- }
- });
- },
- //删除对齐
- deleteAlignment(id, ele) {
- postAction(`/okr/kr/deleteAlign?originId=${ele.id}&alignId=${id}`).then(
- (res) => {
- if (res.success) {
- this.$message.success("删除成功");
- this.getAlignmentList(ele);
- } else {
- this.$message.error("删除失败");
- }
- }
- );
- },
- taskPowerChange(val) {
- console.log(val);
- if (this.taskPower == "1") {
- this.remindValue = [];
- } else if (this.taskPower == "3") {
- this.visiblePerson = [];
- this.taskTag = [];
- } else if (this.taskPower == "2") {
- this.visiblePerson = [];
- this.taskTag = [];
- this.remindValue = [];
- }
- },
- KRPowerChange(val) {
- console.log(val);
- if (this.KRPower == "1") {
- this.KRremindValue = [];
- } else if (this.KRPower == "3") {
- this.KRvisiblePerson = [];
- this.KRTag = [];
- } else if (this.KRPower == "2") {
- this.KRvisiblePerson = [];
- this.KRTag = [];
- this.KRremindValue = [];
- }
- },
- handleClose(tag, index) {
- this.taskTag.splice(index, 1);
- // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
- console.log(this.taskTag);
- },
- KRhandleClose(tag, index) {
- this.KRTag.splice(index, 1);
- // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
- console.log(this.KRTag);
- },
- KRTagClose(tag, index, item) {
- console.log(tag, index, item);
- item.KRTag.splice(index, 1);
- // this.KRList.forEach(ele=>{
- // })
- },
- //查找人名-
- filterName(id) {
- let JSONArr = JSON.stringify(this.options);
- let arr = JSONArr.split(`"value":"${id}","label":"`)[1].split('"')[0];
- // console.log(arr)
- return arr;
- },
- filterOption(input, option) {
- console.log(input, option);
- return (
- option.componentOptions.children[0].text
- .toLowerCase()
- .indexOf(input.toLowerCase()) >= 0
- );
- },
- // 删除当前同步人
- deletePeople(item) {
- console.log(item);
- postAction("/okr/okr/deleteOkrMember", {
- memberId: item.value,
- }).then((res) => {
- console.log(res);
- if (res.success) {
- this.$message.success("同步人删除成功!");
- //请求已经同步的人
- postAction("/okr/okr/getMemberListByUserId", {}).then((res) => {
- this.selectedPeople = [];
- // console.log(res);
- res.result.forEach((item) => {
- this.selectedPeople.push({
- label: item.name,
- value: item.userId,
- });
- });
- });
- } else {
- this.$message.success("同步人删除失败,稍后再试");
- }
- });
- },
- // okr同步事件
- okrSync() {
- this.okrVisible = true;
- this.syncPeopleOptions = [];
- //请求所有的公司人
- postAction("/okr/qywx/getUserListByName", {}).then((res) => {
- // console.log(res)
- this.syncPeopleOptions = [];
- if (res.success) {
- // this.syncPeopleOptions=res.result
- res.result.forEach((item) => {
- this.syncPeopleOptions.push({
- label: item.name,
- value: item.userId,
- });
- });
- }
- });
- //请求已经同步的人
- postAction("/okr/okr/getMemberListByUserId", {}).then((res) => {
- this.selectedPeople = [];
- // console.log(res);
- res.result.forEach((item) => {
- this.selectedPeople.push({
- label: item.name,
- value: item.userId,
- });
- });
- });
- },
- syncOK() {
- if (this.syncPeopleValue.length > 0) {
- postAction("/okr/okr/saveOkrMember2", {
- userIdList: this.syncPeopleValue,
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.okrVisible = false;
- this.syncPeopleValue = [];
- } else {
- this.$message.error("同步失败!");
- }
- });
- } else {
- this.okrVisible = false;
- }
- },
- OKRhandleClose(done) {
- this.$confirm("当前内容并未保存,确定关闭么?")
- .then((_) => {
- done();
- })
- .catch((_) => {});
- },
- // 创建目标
- createO() {
- this.targetVisible = true;
- this.KRList = [];
- this.targetName = "";
- },
- addKR() {
- this.KRList.push({
- krInfo: "",
- completion: 0,
- KRPower: "1",
- KRremindValue: [],
- KRvisiblePerson: [],
- KRTag: [],
- });
- },
- createdeleteKR(item, index) {
- // console.log(item,index)
- this.KRList.splice(index, 1);
- // console.log(this.KRList)
- },
- checkedTargetName() {
- this.targetNameOk = this.targetName ? false : true;
- },
- // 每个KR中的指定人改变
- selectChange(item) {
- console.log(item);
- item.KRTag = [];
- this.$nextTick(() => {
- item.KRvisiblePerson.map((ele) => {
- item.KRTag.push({
- id: ele,
- label: this.filterName(ele),
- });
- this.$forceUpdate();
- if (item.KRTag.length == 0) {
- item.KRTag = [];
- this.$forceUpdate();
- }
- });
- });
- },
- ItemKRPowerChange(item) {
- console.log(item);
- if (item.KRPower == "1") {
- item.KRremindValue = [];
- } else if (item.KRPower == "3") {
- item.KRvisiblePerson = [];
- item.KRTag = [];
- } else if (item.KRPower == "2") {
- item.KRvisiblePerson = [];
- item.KRTag = [];
- item.KRremindValue = [];
- }
- this.$forceUpdate();
- },
- createOKRcomplete() {
- console.log(this.KRList);
- this.checkedTargetName();
- if (!this.targetNameOk) {
- postAction("/okr/okr/insertObjectAndKrList", {
- objectInfo: {
- objectInfo: this.targetName,
- completion: 0,
- },
- krList: this.KRList,
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.targetVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- //修改OKR的O
- checkedObjectName() {
- this.ObjectNameOk = this.ObjectName ? false : true;
- },
- changeObject(item) {
- // console.log(item)
- if (
- this.time.year == this.time.currentYear &&
- this.time.quarter == this.time.currentQuarter
- ) {
- this.ObjectName = item.objectInfo;
- this.ObjectProgress = item.completion;
- this.currentObjId = item.id;
- this.ObejectVisible = true;
- }
- },
- editObjectComplete() {
- this.checkedObjectName();
- if (!this.ObjectNameOk) {
- postAction("/okr/okr/updateObject", {
- objectInfo: {
- id: this.currentObjId,
- objectInfo: this.ObjectName,
- completion: this.ObjectProgress,
- },
- }).then((res) => {
- // console.log(res);
- if (res.success) {
- this.$message({
- message: "修改成功啦!",
- type: "success",
- });
- this.ObejectVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- // 目标和kr创建成功提交
- targeOKROk() {
- this.targetVisible = false;
- },
- // 创建任务
- createTask(val) {
- this.taskTitle = "创建任务";
- this.taskVisible = true;
- this.currentTask = val;
- this.taskName = "";
- this.taskDesc = "";
- this.taskRange = "1";
- this.taskPower = "1";
- this.visiblePerson = [];
- this.remindValue = [];
- this.taskTag = [];
- this.statusTask = 1
- // this.taskProgress=0;
- // console.log(val,this.currentTask)
- },
- // 创建提交
- taskOk() {
- // this.taskVisible=false;
- console.log(this.visiblePerson, this.remindValue);
- this.taskNameOk = this.taskName ? false : true;
- if (!this.taskNameOk) {
- if (this.taskPower == "3") {
- this.remindValue = [];
- this.taskTag.forEach((item) => {
- this.remindValue.push(item.id);
- });
- }
- this.taskVisibleLoading = true
- postAction("/okr/okr/insertTaskInfo", {
- taskInfo: {
- taskTitle: this.taskName,
- taskInfo: this.taskDesc,
- type: this.currentTask,
- priority: this.taskRange,
- permission: this.taskPower,
- publicIds: this.visiblePerson,
- remindIds: this.remindValue,
- status: this.statusTask,
- week: this.taskInfoListKey,
- year: this.yearValue
- },
- }).then((res) => {
- // console.log(res)
- this.taskVisibleLoading = false
- if (res.success) {
- this.taskVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- // 检查任务名字是否输入
- checkTaskName() {
- this.taskNameOk = this.taskName ? false : true;
- },
- checkStatusName() {
- this.statusNameOk = this.statusName ? false : true;
- },
- // 删除task
- deleteTask(val) {
- // console.log(val)
- postAction("/okr/okr/deleteTaskInfoById", {
- taskInfo: {
- id: val.id,
- },
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.$message({
- message: "删除成功啦!",
- type: "success",
- });
- this.getOkrPageList();
- }
- });
- },
- // 编辑任务
- editTask(val) {
- this.currentTaskitem = val;
- console.log(val);
- this.taskTitle = "修改任务";
- // this.currentTask=val;
- this.taskName = val.taskTitle;
- this.taskDesc = val.taskInfo;
- this.taskRange = val.priority;
- this.taskId = val.id;
- this.taskPower = val.permission + "";
- this.statusTask = val.status
- this.visiblePerson = val.publicIds;
- // this.remindValue=val.remindIds
- if (val.remindVOS) {
- this.remindValue = [];
- val.remindVOS.forEach((item) => {
- this.remindValue.push(item.remindId);
- });
- }
- if (val.publicVOS) {
- this.visiblePerson = [];
- val.publicVOS.forEach((item) => {
- this.visiblePerson.push(item.publicId);
- });
- }
- this.$nextTick(() => {
- this.currentTaskitem = {};
- });
- // this.taskProgress=0;
- this.taskVisible = true;
- },
- // 编辑提交
- editTaskOk() {
- this.taskNameOk = this.taskName ? false : true;
- if (!this.taskNameOk) {
- if (this.taskPower == "3") {
- this.remindValue = [];
- this.taskTag.forEach((item) => {
- this.remindValue.push(item.id);
- });
- }
- this.taskVisibleLoading = true
- postAction("/okr/okr/updateTaskInfo", {
- taskInfo: {
- id: this.taskId,
- taskTitle: this.taskName,
- taskInfo: this.taskDesc,
- priority: this.taskRange,
- permission: this.taskPower,
- publicIds: this.visiblePerson,
- remindIds: this.remindValue,
- status: this.statusTask
- },
- }).then((res) => {
- this.taskVisibleLoading = false
- // console.log(res)
- if (res.success) {
- this.$message({
- message: "任务修改成功啦!",
- type: "success",
- });
- this.taskVisible = false;
- this.getOkrPageList();
- } else {
- this.$message({
- message: "任务修改失败",
- type: "error",
- });
- }
- });
- }
- },
- createStatus() {
- this.statusVisible = true;
- this.statusTitle = "创建状态指标";
- this.statusName = "";
- this.statusType = "2";
- },
- editSatus(item) {
- // console.log(item);
-
- this.statusTitle = "修改状态指标";
- this.statusName = item.content;
- this.statusType = item.type;
- this.statusId = item.id;
- this.statusVisible = true;
-
- },
- // 创建状态指标提交
- statusOk() {
- this.checkStatusName();
- if (!this.statusNameOk) {
- postAction("/okr/okr/insertContentStatus", {
- content: {
- content: this.statusName,
- type: this.statusType,
- },
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.statusVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- // 修改状态指标提交
- editStatusOk() {
- this.checkStatusName();
- if (!this.statusNameOk) {
- postAction("/okr/okr/updateContentStatus", {
- content: {
- id: this.statusId,
- content: this.statusName,
- type: this.statusType,
- },
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.$message({
- message: "修改成功啦!",
- type: "success",
- });
- this.statusVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- deleteStatusOk() {
- this.$confirm("即将删除本状态, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(() => {
- postAction("/okr/okr/deleteContentStatusById", {
- content: {
- id: this.statusId,
- },
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- this.$message({
- message: "删除成功啦!",
- type: "success",
- });
- this.statusVisible = false;
- this.getOkrPageList();
- }
- });
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除",
- });
- });
- },
- deleteKR(item) {
- console.log(item);
- postAction("/okr/okr/deleteKrById", {
- krInfo: {
- id: item.id,
- },
- }).then((res) => {
- // console.log(res);
- if (res.success) {
- this.$message({
- message: "删除成功啦!",
- type: "success",
- });
- this.getOkrPageList();
- }
- });
- },
- openCreateKR() {
- this.KRTitle = "新建KR";
- this.KRVisible = true;
- this.KRName = "";
- this.KRProgress = 0;
- this.KRPower = "1"; //kr的权限
- this.KRremindValue = []; //kr的提醒人
- this.KRvisiblePerson = []; //kr的可见人
- this.KRDesc = "";
- },
- checkKRName() {
- this.KRNameOk = this.KRName ? false : true;
- },
- KROk() {
- this.checkKRName();
- if (!this.KRNameOk) {
- this.KROKVisible = true
- if (this.KRPower == "3") {
- this.KRremindValue = [];
- this.KRTag.forEach((item) => {
- this.KRremindValue.push(item.id);
- });
- }
- console.log(this.taskInfoListKey)
- postAction("/okr/okr/insertOkrKrInfo", {
- krInfo: {
- completion: this.KRProgress,
- krInfo: this.KRName,
- krDesc: this.KRDesc,
- objectId: this.okrObject.id,
- permission: this.KRPower,
- publicIds: this.KRvisiblePerson,
- remindIds: this.KRremindValue,
- week: this.taskInfoListKey,
- year: this.yearValue
- },
- }).then((res) => {
- this.KROKVisible = false
- // console.log(res)
- if (res.success) {
- this.KRVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- editKR(item) {
- console.log(item);
- this.currentKRitem = item;
- this.KRTitle = "修改KR";
- this.KRName = item.krInfo;
- this.KRDesc = item.krDesc;
- this.KRId = item.id;
- this.KRVisible = true;
- this.KRProgress = item.completion;
- this.KRPower = item.permission + ""; //kr的权限
- console.log(this.KRPower);
- // this.KRremindValue=item.remindIds//kr的提醒人
- // this.KRvisiblePerson=item.publicIds//kr的可见人
- this.KRremindValue = [];
- if (item.remindVOS) {
- item.remindVOS.forEach((ele) => {
- this.KRremindValue.push(ele.remindId);
- });
- }
- this.KRvisiblePerson = [];
- if (item.publicVOS) {
- item.publicVOS.forEach((ele) => {
- this.KRvisiblePerson.push(ele.publicId);
- });
- }
- this.$nextTick(() => {
- this.currentKRitem = {};
- });
- },
- editKROk() {
- this.checkKRName();
- if (!this.KRNameOk) {
- if (this.KRPower == "3") {
- this.KRremindValue = [];
- this.KRTag.forEach((item) => {
- this.KRremindValue.push(item.id);
- });
- }
- this.KROKVisible = true
- postAction("/okr/okr/updateKr", {
- krInfo: {
- completion: this.KRProgress,
- krInfo: this.KRName,
- id: this.KRId,
- permission: this.KRPower,
- publicIds: this.KRvisiblePerson,
- remindIds: this.KRremindValue,
- krDesc: this.KRDesc,
- },
- }).then((res) => {
- // console.log(res)
- this.KROKVisible = false
- if (res.success) {
- this.KRVisible = false;
- this.getOkrPageList();
- }
- });
- }
- },
- yearChange(key) {
- this.taskInfoListKey = this.taskInfoWeeks[0]
- this.getOkrPageList();
- },
- cycleChange(key) {
- if (this.yearValue == "" || this.yearValue == undefined) {
- this.$message({
- type: "warning",
- message: "记得先选择年份哟~",
- });
- this.cycleValue = undefined;
- } else {
- this.getOkrPageList();
- }
- },
- changeWeek(value){
- var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
- return item.week == value
- })[0]
- this.currentDate = data.startDate + '至' +data.endDate
- },
- changeMonth(value) {
- console.log(value)
- this.taskInfoWeeks = this.allTime.weeks[value].map(item=>{
- return item.week
- })
- this.taskInfoListKey = this.taskInfoWeeks[0]
- this.changeWeek(this.taskInfoListKey)
- },
- // 获取页面展示的list
- getOkrPageList() {
- this.loading = true;
- postAction("/okr/okr/detail", {
- year: this.yearValue,
- quarter: this.cycleValue,
- }).then((res) => {
- // console.log(res);
- this.loading = false;
- if (res.success) {
- if (res.result.okr) {
- this.okr = res.result.okr;
- this.taskInfoList = res.result.taskInfoList;
- this.taskFourWeek = res.result.taskFourWeekList;
- this.allTime = res.result.time;
- this.currentMonth = res.result.time.currentMonth
- this.currentWeek = res.result.time.currentWeek;
- this.taskInfoMonth = res.result.time.months
- if(res.result.time.currentQuarter == res.result.time.quarter){
-
-
- this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
- return item.week
- })
-
- if(this.taskInfoMonth.includes(this.taskFourWeekKey)){
- this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
- return item.week
- })
-
- }else{
- this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
- return item.week
- })
- this.taskFourWeekKey = res.result.time.currentMonth;
- if(this.taskInfoWeeks.includes(this.taskInfoListKey)){
- }else{
- this.taskInfoListKey = this.taskInfoWeeks[0]
- }
- }
-
- this.currentDate = res.result.time.currentDate
- }else{
- this.taskFourWeekKey = res.result.time.months[0];
- this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
- return item.week
- })
-
- this.taskInfoListKey = this.taskInfoWeeks[0]
-
-
- var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
- return item.week == this.taskInfoListKey
- })[0]
- this.currentDate = data.startDate + '至' +data.endDate
- }
-
-
- this.time = res.result.time;
- res.result.status.forEach((item, index) => {
- if (item.type == "1") {
- item.color = "#CC3300";
- } else if (item.type == "2") {
- item.color = "#FFCC33";
- } else {
- item.color = "#99CC99";
- }
- });
- this.status = res.result.status;
- this.okrObject = res.result.okr[0].objectInfo;
- this.yearValue = res.result.time.year;
- this.cycleValue = res.result.time.quarter;
- } else {
- this.okr = {};
- this.taskInfoList = {};
- this.taskFourWeek = {};
- this.time = res.result.time;
- this.status = {};
- this.okrObject = {};
- }
- }
- });
- },
- // h获取公司的部门和人员
- getPeople() {
- getAction("/okr/department/queryTreeList", {}).then((res) => {
- console.log(res);
- // this.options=res.result[0].children;
- this.options = this.HandleChildren(res.result[0].children);
- });
- },
- // 处理children的值
- HandleChildren(arr) {
- let newArr = arr.map((item) => {
- if (item.leaf) {
- // item.children=undefined
- delete item.children;
- } else {
- this.HandleChildren(item.children);
- }
- return item;
- });
- return newArr;
- },
- },
- mounted() {
- //请求list
- this.getOkrPageList();
- this.getPeople();
- postAction("/okr/okr/getObjectYear ", {}).then((res) => {
- // console.log(res);
- this.yearsOptions = [];
- res.result.forEach((item) => {
- this.yearsOptions.push({
- label: `${item}`,
- value: item,
- });
- });
- });
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .okrPage {
- width: 100%;
- height: 100%;
- background: #cc9966;
- box-sizing: border-box;
- position: relative;
- .nowSelect {
- // display: flex;
- padding-top: 5px;
- margin-bottom: 15px;
- overflow: hidden;
- }
- .nowSelectLeft {
- width: 84px;
- float: left;
- // display: inline-block;
- }
- .nowSelectRight {
- float: left;
- width: 400px;
- }
- .nowSelectItem {
- position: relative;
- // width: 70px;
- text-align: center;
- display: inline-block;
- margin-bottom: 6px;
- }
- .nowSelectItemLink {
- position: relative;
- padding-right: 15px;
- }
- .deleteSelectedPeople {
- display: none;
- position: absolute;
- right: -1px;
- top: -3px;
- font-size: 13px;
- }
- .nowSelectItem:hover .deleteSelectedPeople {
- display: block;
- }
- .topBox {
- height: 41px;
- }
- .title {
- height: 7%;
- margin-top: -50px;
- padding: 20px 0;
- margin-bottom: 9px;
- color: #fff;
- box-sizing: border-box;
- }
- .synchronization {
- position: absolute;
- top: 10px;
- right: 10px;
- .OKRSYNC {
- padding: 10px 15px;
- }
- }
- .okrBody {
- background: rgb(247, 247, 247);
- border-radius: 30px 30px 0 0;
- height: 93%;
- display: flex;
- flex-wrap: wrap;
- color: #000;
- .okrBox {
- width: 49.5%;
- height: 49%;
- margin-right: 1%;
- background: #fff;
- box-sizing: border-box;
- // overflow: auto;
- .okrBox-title {
- text-align: left;
- @media only screen and (min-width: 1315px) {
- .top-title {
- font-size: 16px;
- margin: 8px 0;
- padding: 0 20px;
- // text-align: left;
- display: flex;
- justify-content: space-between;
- }
- .right-time{
- margin-top: 10px;
- }
- }
- @media only screen and (max-width: 1314px) {
- .top-title {
- font-size: 16px;
- margin: 8px 0;
- padding: 0 20px;
- // text-align: left;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- }
- .right-time{
- margin-top: 10px;
- }
- }
-
- .createTask {
- font-size: 12px;
- margin: 5px 0;
- padding: 0 20px;
- text-align: left;
- }
- }
-
- .okrbox-list {
- width: 100%;
- overflow: auto;
- max-height: 80%;
- // margin-top: 10px;
- text-align: left;
- font-size: 14px;
- color: #333;
- box-sizing: border-box;
- ul {
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- li {
- width: 100%;
- height: 41px;
- padding: 8px 15px 8px;
- line-height: 20px;
- border-bottom: 1px solid rgb(240, 242, 245);
- box-sizing: border-box;
- cursor: pointer;
- position: relative;
- .list-opt {
- display: none;
- width: 50%;
- position: absolute;
- right: 10px;
- top: 5px;
- // display: flex;
- justify-content: flex-end;
- align-items: center;
- }
- // .taskprogress{
- // width:10px;
- // height: 10px;
- // }
- .content {
- display: inline-block;
- width: 100%;
- }
- .taskGrade {
- display: inline-block;
- width: 25px;
- height: 25px;
- border-radius: 50%;
- text-align: center;
- box-sizing: border-box;
- // background-color: turquoise;
- margin-right: 10px;
- }
- .priorityIMg {
- width: 25px;
- height: 25px;
- }
- .taskTitle {
- display: inline-block;
- width: 70%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- height: 25px;
- line-height: 25px;
- .remindSpan {
- color: #2e9cff;
- display: inline-block;
- margin-right: 3px;
- cursor: pointer;
- }
- }
- }
- li:hover .list-opt {
- display: flex;
- }
- li:hover .continuation-btn {
- right:78px
- }
- /deep/ .continuation-btn .el-tag--dark{
- border: 0px;
- }
-
- }
- .status-list {
- overflow: auto;
- max-height: 80%;
- // margin-top: 10px;
- text-align: left;
- font-size: 14px;
- color: #333;
- box-sizing: border-box;
- // align-content: center;
- .status {
- display: block;
- // width: 20%;
- width: auto;
- min-width: 120px;
- height: 60px;
- // padding: 10px 10px;
- box-sizing: border-box;
- justify-content: center;
- display: flex;
- // margin-bottom: 10px;
- .itemStatus {
- display: inline-block;
- height: 40px;
- line-height: 40px;
- padding: 0 15px;
- border-radius: 10px;
- margin: 0 auto;
- cursor: pointer;
- }
- }
- }
- .objectList {
- text-align: left;
- overflow: auto;
- height: 75%;
- max-height: 85%;
- .OBox {
- background: #fafbfc;
- height: 62px;
- margin-bottom: 8px;
- line-height: 62px;
- padding: 5px 20px;
- // padding-bottom: 10px;
- position: relative;
- span {
- display: inline-block;
- }
- .O-tip {
- width: 36px;
- height: 20px;
- background: #50e3c2;
- border-radius: 22px;
- color: #fff;
- margin-right: 8px;
- font-size: 12px;
- display: inline-block;
- line-height: 20px;
- text-align: center;
- position: absolute;
- top: 25px;
- }
- .O-content {
- width: 60%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- position: absolute;
- top: 5px;
- left: 70px;
- cursor: pointer;
- .edit {
- margin-left: 5px;
- display: none;
- }
- }
- .O-content:hover .edit {
- display: inline-block;
- }
- .O-opt {
- position: absolute;
- top: 5px;
- right: 20px;
- }
- }
- .KRBox {
- background: #fafbfc;
- font-size: 14px;
- ul {
- li {
- width: 100%;
- height: 40px;
- padding: 5px 20px;
- position: relative;
- box-sizing: border-box;
- line-height: 40px;
- position: relative;
- .KR-tip {
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- color: rgb(46, 156, 255);
- margin-right: 10px;
- background: rgba(46, 156, 255, 0.1);
- border-radius: 11.5px;
- padding: 3px 9px;
- position: absolute;
- top: 8px;
- }
- .KR-content {
- width: 60%;
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- height: 100%;
- line-height: 30px;
- padding-left: 40px;
- .remindSpan {
- color: #2e9cff;
- display: inline-block;
- margin-right: 3px;
- cursor: pointer;
- }
- }
- .KR-opt {
- position: absolute;
- right: 20px;
- top: 5px;
- display: flex;
- // display: none;
- width: 30%;
- position: absolute;
- justify-content: flex-end;
- align-items: center;
- }
- }
- li:hover .list-opt {
- display: flex;
- }
- li:hover .continuation-btn {
- right:78px
- }
- }
- }
- }
- }
- .first {
- border-radius: 30px 0 0 0;
- margin-bottom: 0.5%;
- .okrBox-title {
- border-bottom: 1px solid rgb(240, 242, 245);
- }
- }
- .second {
- margin-right: 0;
- border-radius: 0 30px 0 0;
- margin-bottom: 0.5%;
- }
- .third {
- .okrBox-title {
- border-bottom: 1px solid rgb(240, 242, 245);
- }
- }
- .four {
- margin-right: 0;
- }
- }
- .noOkr {
- display: block;
- // flex-direction: column;
- text-align: center;
- padding: 50px 0 0;
- box-sizing: border-box;
- background-color: #fafbfc;
- .noObject {
- font-family: PingFangSC-Regular;
- font-size: 20px;
- color: #bfc3c7;
- margin-bottom: 10px;
- }
- .kongbaiBackground {
- width: 766px;
- height: 443px;
- margin: auto;
- overflow: hidden;
- background: url(../assets/image/shili.png);
- background-size: 766px 443px;
- .shili {
- width: 100%;
- }
- }
- }
- .taskBody {
- padding: 0 20px;
- .task-item {
- display: flex;
- margin-bottom: 15px;
- vertical-align: middle;
- .item-name {
- font-size: 12px;
- color: #cc9966;
- flex-shrink: 0;
- display: block;
- margin-right: 15px;
- width: 60px;
- line-height: 32px;
- }
- }
- }
- .targetBody {
- .targetO {
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- flex-wrap: wrap;
- align-self: normal;
- padding: 10px;
- border-radius: 5px;
- background: #cc9966;
- margin-bottom: 30px;
- font-size: 18px;
- span {
- display: inline-block;
- font-size: 18px;
- }
- .target-tip {
- width: 35px;
- height: 35px;
- text-align: center;
- line-height: 36px;
- background-color: #9acb9a;
- color: rgb(255, 255, 255);
- font-size: 12px;
- border-radius: 50%;
- font-size: 18px;
- }
- .target-input {
- width: 90%;
- font-size: 18px;
- }
- }
- .addKR {
- padding: 0 80px;
- box-sizing: border-box;
- }
- .targetKR {
- width: 100%;
- // display: flex;
- flex-wrap: wrap;
- -webkit-box-align: center;
- align-items: center;
- align-self: normal;
- // padding: 10px;
- border-radius: 5px;
- // background: rgb(29, 134, 240);
- margin-bottom: 10px;
- .tip {
- width: 10%;
- text-align: center;
- // background-color: tomato;
- font-family: sans-serif;
- text-shadow: rgb(14, 17, 20) 0px 0px 0px;
- .kArEgh {
- display: inline-block;
- width: 6px;
- height: 6px;
- margin-right: 5px;
- position: relative;
- top: -3px;
- background: rgb(29, 134, 240);
- }
- }
- .info {
- width: 90%;
- font-size: 16px;
- font-weight: 500;
- color: rgb(131, 137, 143);
- padding: 6px 0px 6px 0px;
- border-radius: 5px;
- background: rgb(245, 246, 250);
- }
- .progress {
- margin-top: 15px;
- margin-bottom: 10px;
- display: flex;
- padding-left: 10%;
- box-sizing: border-box;
- width: 100%;
- font-size: 12px;
- position: relative;
- span {
- display: inline-block;
- line-height: 40px;
- }
- .krtitle {
- color: #cc9966;
- width: 90px;
- flex-shrink: 0;
- // margin-right: 15px;
- }
- .progressBar {
- width: 70%;
- display: flex;
- }
- .creatOxia {
- width: 85%;
- }
- .delete {
- // width: 25px;
- // height: 25px;
- // font-size: 12px;
- position: absolute;
- right: 5px;
- top: 5px;
- }
- }
- .task-item {
- display: flex;
- width: 100%;
- margin-bottom: 20px;
- padding-left: 10%;
- vertical-align: middle;
- .item-name {
- font-size: 12px;
- color: #cc9966;
- flex-shrink: 0;
- display: block;
- width: 90px;
- line-height: 32px;
- }
- }
- }
- }
- .editKRBody {
- .targetO {
- background-color: #cc9966;
- .target-tip {
- background-color: #99cc99;
- }
- .target-input {
- color: #fff;
- }
- }
- .targetKR .progress {
- .progressBar {
- width: 90%;
- display: flex;
- .krtitle {
- line-height: 40px;
- display: inline-block;
- width: 35%;
- }
- }
- }
- .currentO {
- color: #fff;
- font-size: 16px;
- line-height: 40px;
- padding-left: 15px;
- }
- }
- .openKRBox {
- .targetKR {
- .progress {
- margin-top: 15px;
- margin-bottom: 10px;
- display: flex;
- padding-left: 10%;
- box-sizing: border-box;
- width: 100%;
- font-size: 12px;
- position: relative;
- span {
- display: inline-block;
- line-height: 40px;
- }
- .krtitle {
- color: #cc9966;
- width: 90px;
- flex-shrink: 0;
- margin-right: 15px;
- }
- .progressBar {
- // width: 70%;
- display: flex;
- }
- .creatOxia {
- width: 85%;
- }
- .delete {
- // width: 25px;
- // height: 25px;
- // font-size: 12px;
- position: absolute;
- right: 5px;
- top: 5px;
- }
- }
- .task-item {
- display: flex;
- width: 100%;
- margin-bottom: 20px;
- padding-left: 10%;
- vertical-align: middle;
- .item-name {
- font-size: 12px;
- color: #cc9966;
- flex-shrink: 0;
- display: block;
- width: 90px;
- line-height: 32px;
- }
- }
- }
- }
- }
- </style>
- <style lang="less">
- .el-select-dropdown__item {
- font-size: 14px;
- padding: 0 20px;
- position: relative;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: #606266;
- height: 34px;
- line-height: 34px;
- box-sizing: border-box;
- cursor: pointer;
- text-align: center;
- }
- .el-select-dropdown {
- position: absolute;
- top: 88px;
- // left: 1082px !important;
- }
- .okrPage {
- .el-checkbox,
- .el-checkbox__label {
- width: 97% !important;
- }
- .el-checkbox {
- white-space: initial;
- display: flex;
- align-items: center;
- }
- .title {
- .el-input__inner {
- -webkit-appearance: none;
- background-color: transparent;
- background-image: none;
- border-radius: 4px;
- border: none;
- box-sizing: border-box;
- color: #fff;
- display: inline-block;
- font-size: 16px;
- height: 40px;
- line-height: 40px;
- outline: 0;
- padding: 0 15px;
- transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
- width: 110px;
- // text-align: center;
- }
- .el-select .el-input .el-select__caret {
- color: #fff;
- font-size: 14px;
- transition: transform 0.3s;
- transform: rotateZ(180deg);
- cursor: pointer;
- }
- }
- }
- .openTargetBox {
- .el-button--text {
- color: #cc9966;
- background: 0 0;
- padding-left: 0;
- padding-right: 0;
- }
- .el-button--primary {
- color: #fff;
- background-color: #cc9966;
- border-color: #cc9966;
- }
- .el-slider__button {
- width: 16px;
- height: 16px;
- border: 2px solid #cc9966;
- background-color: #fff;
- border-radius: 50%;
- transition: 0.2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .el-slider__bar {
- height: 6px;
- background-color: #cc9966;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- position: absolute;
- }
- .el-slider__button-wrapper {
- z-index: 2;
- }
- .el-radio {
- color: #606266;
- cursor: pointer;
- margin-right: 20px;
- min-width: 75px;
- }
- .el-radio.is-bordered + .el-radio.is-bordered {
- margin-left: 0px;
- }
- .el-radio.is-bordered.is-checked {
- border-color: #cc9966;
- }
- .el-radio__input.is-checked .el-radio__inner {
- border-color: #cc9966;
- background: #cc9966;
- }
- .el-radio__input.is-checked + .el-radio__label {
- color: #cc9966;
- }
- .el-input.is-active .el-input__inner,
- .el-input__inner:focus {
- border-color: #cc9966;
- outline: 0;
- }
- .el-textarea__inner:focus {
- outline: 0;
- border-color: #cc9966;
- }
- .number__increase:hover {
- color: #cc9966;
- }
- .el-input-number__decrease:hover,
- .el-input-number__increase:hover {
- color: #cc9966;
- }
- }
- .el-radio {
- color: #606266;
- cursor: pointer;
- margin-right: 30px;
- min-width: 75px;
- }
- .vue-treeselect__multi-value-item {
- cursor: pointer;
- display: inline-table;
- background: #cc9966;
- padding: 2px 0;
- border: 1px solid transparent;
- border-radius: 2px;
- color: white;
- font-size: 12px;
- vertical-align: top;
- }
- .vue-treeselect__value-remove {
- color: #fff;
- padding-left: 5px;
- border-left: 1px solid #fff;
- line-height: 0;
- }
- .taskBody {
- .el-radio.is-bordered.is-checked {
- border-color: #cc9966;
- }
- .el-radio__input.is-checked .el-radio__inner {
- border-color: #cc9966;
- background: #cc9966;
- }
- .el-radio__input.is-checked + .el-radio__label {
- color: #cc9966;
- }
- .el-input.is-active .el-input__inner,
- .el-input__inner:focus {
- border-color: #cc9966;
- outline: 0;
- }
- .el-textarea__inner:focus {
- outline: 0;
- border-color: #cc9966;
- }
- .number__increase:hover {
- color: #cc9966;
- }
- .el-input-number__decrease:hover,
- .el-input-number__increase:hover {
- color: #cc9966;
- }
- .el-slider__input:hover,
- .el-input-number:hover,
- .el-input-number--small:hover {
- border-color: #cc9966;
- outline: 0;
- }
- .el-slider__button {
- width: 16px;
- height: 16px;
- border: 2px solid #cc9966;
- background-color: #fff;
- border-radius: 50%;
- transition: 0.2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .el-slider__bar {
- height: 6px;
- background-color: #cc9966;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- position: absolute;
- }
- }
- .StatusBody {
- .second.el-radio.is-bordered.is-checked {
- border-color: #ffcc33;
- }
- .second .el-radio__input.is-checked .el-radio__inner {
- border-color: #ffcc33;
- background: #ffcc33;
- }
- .second .el-radio__input.is-checked + .el-radio__label {
- color: #ffcc33;
- }
- .first.el-radio.is-bordered.is-checked {
- border-color: #cc3300;
- }
- .first .el-radio__input.is-checked .el-radio__inner {
- border-color: #cc3300;
- background: #cc3300;
- }
- .first .el-radio__input.is-checked + .el-radio__label {
- color: #cc3300;
- }
- .third.el-radio.is-bordered.is-checked {
- border-color: #99cc99;
- }
- .third .el-radio__input.is-checked .el-radio__inner {
- border-color: #99cc99;
- background: #99cc99;
- }
- .third .el-radio__input.is-checked + .el-radio__label {
- color: #99cc99;
- }
- }
- .targetBody {
- .el-input__inner {
- border: none;
- background-color: transparent;
- color: #fff;
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- color: #fff;
- }
- .targetKR {
- .el-input__inner {
- border: none;
- background-color: transparent;
- color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- color: rgb(131, 137, 143);
- }
- .el-textarea__inner {
- border: none;
- background-color: transparent;
- color: rgb(131, 137, 143);
- }
- .el-textarea .el-textarea__count .el-textarea__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- color: rgb(131, 137, 143);
- }
- .el-textarea .el-input__count {
- color: #909399;
- /* background: #FFF; */
- position: absolute;
- font-size: 12px;
- bottom: 5px;
- right: 10px;
- }
- .progress {
- .el-input-number__decrease {
- border-right: none;
- }
- .el-input-number__increase {
- border-left: none;
- }
- .el-input-number__decrease,
- .el-input-number__increase {
- background: none;
- }
- }
- .el-input--suffix .el-input__inner {
- padding-right: 66px;
- }
- }
- .el-input--suffix .el-input__inner {
- padding-right: 50px;
- }
- }
- .editKRBody {
- .progress {
- .el-input-number__decrease {
- border-right: none;
- }
- .el-input-number__increase {
- border-left: none;
- }
- .el-input-number__decrease,
- .el-input-number__increase {
- background: none;
- }
- .el-input__inner {
- border: none;
- background-color: transparent;
- color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- // color:rgb(131, 137, 143);
- }
- }
- .el-input__inner {
- border: none;
- background-color: transparent;
- // color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- // color:rgb(131, 137, 143);
- }
- .el-input_icon .el-iocn-circle-close .el-input_clear {
- color: #fff;
- }
- }
- </style>
|