OKRpage.vue 95 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312
  1. <template>
  2. <div class="okrPage" v-loading="loading">
  3. <div class="topBox"></div>
  4. <div class="title">
  5. <!-- <p>{{time.year}}年第{{time.quarter}}季度OKR</p> -->
  6. <el-select
  7. v-model="yearValue"
  8. placeholder="年份"
  9. @change="yearChange"
  10. style="width: 80px"
  11. >
  12. <el-option
  13. v-for="item in yearsOptions"
  14. :key="item.value"
  15. :label="item.label"
  16. :value="item.value"
  17. >
  18. </el-option>
  19. </el-select>
  20. <span>年</span>
  21. <el-select v-model="cycleValue" placeholder="季度" @change="cycleChange">
  22. <el-option
  23. v-for="item in cycleOptions"
  24. :key="item.value"
  25. :label="item.label"
  26. :value="item.value"
  27. >
  28. </el-option>
  29. </el-select>
  30. </div>
  31. <div class="synchronization">
  32. <!-- <el-button type="warning" icon="el-icon-share" circle></el-button> -->
  33. <!-- <el-button type="warning" plain class="OKRSYNC" @click="okrSync">OKR同步</el-button> -->
  34. </div>
  35. <div class="openOkrSyncBox">
  36. <el-dialog
  37. title="添加同步人"
  38. :visible.sync="okrVisible"
  39. width="30%"
  40. center
  41. :before-close="OKRhandleClose"
  42. >
  43. <span>
  44. <div class="nowSelect">
  45. <div class="nowSelectLeft">现有同步人:</div>
  46. <div class="nowSelectRight">
  47. <span
  48. v-for="(item, index) in selectedPeople"
  49. :key="index"
  50. style="margin-right: 10px"
  51. class="nowSelectItem"
  52. >
  53. <el-link
  54. type="success"
  55. style="margin-top: -3px"
  56. class="nowSelectItemLink"
  57. >
  58. {{ item.label }}
  59. <el-popconfirm
  60. title="确定移除该同步人吗?"
  61. @onConfirm="deletePeople(item)"
  62. >
  63. <span slot="reference" class="deleteSelectedPeople">
  64. <i class="el-icon-circle-close"></i>
  65. </span>
  66. </el-popconfirm>
  67. </el-link>
  68. </span>
  69. </div>
  70. </div>
  71. <span>添加同步人:</span>
  72. <el-select
  73. v-model="syncPeopleValue"
  74. filterable
  75. placeholder="请选择需要同步的人"
  76. :multiple="true"
  77. style="width: 60%"
  78. >
  79. <el-option
  80. v-for="item in syncPeopleOptions"
  81. :key="item.value"
  82. :label="item.label"
  83. :value="item.value"
  84. ></el-option>
  85. </el-select>
  86. </span>
  87. <span slot="footer" class="dialog-footer">
  88. <el-button @click="okrVisible = false">取 消</el-button>
  89. <el-button type="primary" @click="syncOK">确 定</el-button>
  90. </span>
  91. </el-dialog>
  92. </div>
  93. <div class="okrBody" v-if="okr.length > 0">
  94. <div class="okrBox first">
  95. <div class="okrBox-title">
  96. <!-- taskInfoListKey -->
  97. <p class="top-title">
  98. <el-radio-group v-model="taskInfoListKey" class="left-button" @change="changeWeek">
  99. <!-- taskInfoWeeks -->
  100. <el-radio-button v-for="(item, index) in taskInfoWeeks" :key="index" :label="item">{{'第'+item+'周'}}</el-radio-button>
  101. </el-radio-group>
  102. <span class="right-time">
  103. {{currentDate}}
  104. </span>
  105. </p>
  106. <!-- :disabled="
  107. time.year != time.currentYear ||
  108. time.quarter != time.currentQuarter
  109. " -->
  110. <el-button
  111. type="text"
  112. class="createTask"
  113. @click="createTask(1)"
  114. v-if="taskFourWeekKey >= currentMonth"
  115. >
  116. <i class="el-icon-plus"></i>新建任务
  117. </el-button>
  118. </div>
  119. <div class="okrbox-list">
  120. <ul>
  121. <li v-for="item in taskInfoList[taskInfoListKey]" :key="item.id">
  122. <el-popover
  123. placement="top-start"
  124. :title="'标题:' + item.taskTitle"
  125. width="300"
  126. trigger="hover"
  127. :content="'详细描述:' + item.taskInfo"
  128. >
  129. <span slot="reference" class="content">
  130. <span class="taskGrade">
  131. <!-- P{{item.priority}} -->
  132. <img
  133. src="../assets/image/1.png"
  134. alt
  135. v-if="item.priority == '1'"
  136. class="priorityIMg"
  137. />
  138. <img
  139. src="../assets/image/2.png"
  140. alt
  141. v-if="item.priority == '2'"
  142. class="priorityIMg"
  143. />
  144. <img
  145. src="../assets/image/3.png"
  146. alt
  147. v-if="item.priority == '3'"
  148. class="priorityIMg"
  149. />
  150. </span>
  151. <span class="taskTitle">
  152. {{ item.taskTitle }}
  153. <span
  154. v-for="element in item.remindVOS"
  155. :key="element.krId"
  156. class="remindSpan"
  157. >@<span v-if="element.remindId == '10086'">所有人</span
  158. ><span v-else>{{ element.name }}</span>
  159. </span>
  160. </span>
  161. </span>
  162. </el-popover>
  163. <!-- v-show="
  164. time.year == time.currentYear &&
  165. time.quarter == time.currentQuarter
  166. " -->
  167. <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 3">
  168. <el-tag
  169. type="success"
  170. effect="dark">
  171. 已完成
  172. </el-tag>
  173. </div>
  174. <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 2">
  175. <el-tag
  176. color="#a611e4"
  177. effect="dark">
  178. 延续
  179. </el-tag>
  180. </div>
  181. <div
  182. class="list-opt"
  183. v-if="taskFourWeekKey >= currentMonth"
  184. >
  185. <!-- <el-progress :percentage="30" ></el-progress> -->
  186. <!-- <div style="width:30%">
  187. <el-progress :percentage="50" color='#cc9966'></el-progress>
  188. </div>-->
  189. <el-button
  190. type="warning"
  191. icon="el-icon-edit"
  192. size="mini"
  193. circle
  194. @click="editTask(item)"
  195. style="margin-right: 5px"
  196. ></el-button>
  197. <el-popconfirm
  198. icon="el-icon-info"
  199. iconColor="red"
  200. title="确定删除吗?"
  201. @confirm="deleteTask(item)"
  202. >
  203. <!-- <el-button slot="reference">删除</el-button> -->
  204. <el-button
  205. type="danger"
  206. slot="reference"
  207. icon="el-icon-delete"
  208. size="mini"
  209. circle
  210. ></el-button>
  211. </el-popconfirm>
  212. </div>
  213. </li>
  214. </ul>
  215. </div>
  216. </div>
  217. <div class="okrBox second">
  218. <div class="okrBox-title">
  219. <p class="top-title">OKR</p>
  220. <!-- :disabled="
  221. time.year != time.currentYear ||
  222. time.quarter != time.currentQuarter
  223. " -->
  224. <el-button
  225. type="text"
  226. @click="openCreateKR"
  227. class="createTask"
  228. >
  229. <i class="el-icon-plus"></i>新建KR
  230. </el-button>
  231. </div>
  232. <div class="objectList" v-for="(item, index) in okr" :key="index">
  233. <div class="OBox">
  234. <span class="O-tip">目标</span>
  235. <span class="O-content" @click="changeObject(item.objectInfo)">
  236. {{ item.objectInfo.objectInfo }}
  237. <!-- <el-button type="warning" icon="el-icon-edit" size='mini' circle></el-button> -->
  238. <!-- v-show="
  239. time.year == time.currentYear &&
  240. time.quarter == time.currentQuarter
  241. " -->
  242. <span
  243. class="edit"
  244. >
  245. <i class="el-icon-edit"></i>
  246. </span>
  247. </span>
  248. <span class="O-opt">
  249. <el-progress
  250. type="circle"
  251. :width="60"
  252. :height="60"
  253. :percentage="item.objectInfo.completion"
  254. :color="colors"
  255. ></el-progress>
  256. </span>
  257. </div>
  258. <div class="KRBox">
  259. <ul>
  260. <li v-for="(ele, index) in item.krList" :key="index">
  261. <span class="KR-tip">KR</span>
  262. <el-popover
  263. placement="top-start"
  264. width="500"
  265. trigger="click"
  266. @show="getAlignmentList(ele)"
  267. >
  268. <!--
  269. :title="'KR:' + ele.krInfo"
  270. :content="'详细描述:' + (ele.krDesc || '暂无')" -->
  271. <h2>{{ "KR:" + ele.krInfo }}</h2>
  272. <p>{{ "详细描述:" + (ele.krDesc || "暂无") }}</p>
  273. <h2>我对齐的KR</h2>
  274. <div style="max-height: 200px; overflow: auto">
  275. <ul>
  276. <li
  277. v-for="(list, indexOne) in Alignment" :key="indexOne"
  278. style="display: flex; justify-content: space-between"
  279. >
  280. <p
  281. style="
  282. display: flex;
  283. justify-content: space-between;
  284. width: 100%;
  285. "
  286. >
  287. <span style="width: 60%">{{ list.krInfo }}</span
  288. ><span>{{ list.userName }}</span>
  289. <a
  290. @click="deleteAlignment(list.id, ele)"
  291. style="
  292. white-space: nowrap;
  293. margin-left: 20px;
  294. cursor: pointer;
  295. color: red;
  296. "
  297. >删除</a
  298. >
  299. </p>
  300. </li>
  301. </ul>
  302. <!-- <el-button size="mini" type="text" @click="visible = false"
  303. >取消</el-button
  304. >
  305. <el-button
  306. type="primary"
  307. size="mini"
  308. @click="visible = false"
  309. >确定</el-button
  310. > -->
  311. </div>
  312. <h2>对齐我的KR</h2>
  313. <div style="max-height: 200px; overflow: auto">
  314. <ul>
  315. <li v-for="(list, indexOne) in otherAligned" :key="indexOne"
  316. style="display: flex; justify-content: space-between"
  317. >
  318. <p
  319. style="
  320. display: flex;
  321. justify-content: space-between;
  322. width: 100%;
  323. "
  324. >
  325. {{ list.krInfo }}
  326. <span>{{ list.userName }}</span>
  327. <!-- <a
  328. @click="deleteAlignment(list.id, ele)"
  329. style="
  330. white-space: nowrap;
  331. margin-left: 20px;
  332. cursor: pointer;
  333. color: red;
  334. "
  335. >删除</a
  336. > -->
  337. </p>
  338. </li>
  339. </ul>
  340. <!-- <el-button size="mini" type="text" @click="visible = false"
  341. >取消</el-button
  342. >
  343. <el-button
  344. type="primary"
  345. size="mini"
  346. @click="visible = false"
  347. >确定</el-button
  348. > -->
  349. </div>
  350. <span slot="reference" class="content">
  351. <span class="KR-content">
  352. {{ ele.krInfo }}
  353. <span
  354. v-for="element in ele.remindVOS"
  355. :key="element.remindId"
  356. class="remindSpan"
  357. >@<span v-if="element.remindId == '10086'">所有人</span
  358. ><span v-else>{{ element.name }}</span>
  359. </span>
  360. </span>
  361. </span>
  362. </el-popover>
  363. <!-- v-show="
  364. time.year == time.currentYear &&
  365. time.quarter == time.currentQuarter
  366. " -->
  367. <span class="KR-opt">
  368. <span style="width: 50%">
  369. <el-progress
  370. :percentage="ele.completion"
  371. :color="itemColor"
  372. ></el-progress>
  373. </span>
  374. <el-button
  375. type="success"
  376. icon="el-icon-film"
  377. size="mini"
  378. circle
  379. @click="setAlignment(ele)"
  380. ></el-button>
  381. <!-- v-show="
  382. time.year == time.currentYear &&
  383. time.quarter == time.currentQuarter
  384. " -->
  385. <el-button
  386. type="warning"
  387. icon="el-icon-edit"
  388. size="mini"
  389. circle
  390. @click="editKR(ele)"
  391. style="margin-right: 5px"
  392. ></el-button>
  393. <el-popconfirm
  394. icon="el-icon-info"
  395. iconColor="red"
  396. title="确定删除吗?"
  397. @confirm="deleteKR(ele)"
  398. >
  399. <!-- <el-button slot="reference">删除</el-button> -->
  400. <!-- v-show="
  401. time.year == time.currentYear &&
  402. time.quarter == time.currentQuarter
  403. " -->
  404. <el-button
  405. type="danger"
  406. slot="reference"
  407. icon="el-icon-delete"
  408. size="mini"
  409. circle
  410. ></el-button>
  411. </el-popconfirm>
  412. </span>
  413. </li>
  414. </ul>
  415. </div>
  416. </div>
  417. </div>
  418. <div class="okrBox third">
  419. <div class="okrBox-title">
  420. <p class="top-title">
  421. <el-radio-group v-model="taskFourWeekKey" class="left-button" @change="changeMonth">
  422. <!-- taskInfoWeeks -->
  423. <el-radio-button v-for="(item, index) in taskInfoMonth" :key="index" :label="item">{{item+'月计划'}}</el-radio-button>
  424. </el-radio-group>
  425. </p>
  426. <!-- :disabled="
  427. time.year != time.currentYear ||
  428. time.quarter != time.currentQuarter
  429. " -->
  430. <el-button
  431. type="text"
  432. class="createTask"
  433. @click="createTask(2)"
  434. v-if="taskFourWeekKey >= currentMonth"
  435. >
  436. <i class="el-icon-plus"></i>新建任务
  437. </el-button>
  438. </div>
  439. <div class="okrbox-list">
  440. <ul>
  441. <li v-for="item in taskFourWeek[taskFourWeekKey]" :key="item.id">
  442. <el-popover
  443. placement="top-start"
  444. :title="'标题:' + item.taskTitle"
  445. width="300"
  446. trigger="hover"
  447. :content="'详细描述:' + item.taskInfo"
  448. >
  449. <span slot="reference" class="content">
  450. <span class="taskGrade">
  451. <!-- P{{item.priority}} -->
  452. <img
  453. src="../assets/image/1.png"
  454. alt
  455. v-if="item.priority == '1'"
  456. class="priorityIMg"
  457. />
  458. <img
  459. src="../assets/image/2.png"
  460. alt
  461. v-if="item.priority == '2'"
  462. class="priorityIMg"
  463. />
  464. <img
  465. src="../assets/image/3.png"
  466. alt
  467. v-if="item.priority == '3'"
  468. class="priorityIMg"
  469. />
  470. </span>
  471. <span class="taskTitle">
  472. {{ item.taskTitle }}
  473. <span
  474. v-for="element in item.remindVOS"
  475. :key="element.krId"
  476. class="remindSpan"
  477. >@{{ element.name }}</span
  478. >
  479. </span>
  480. </span>
  481. </el-popover>
  482. <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 3">
  483. <el-tag
  484. type="success"
  485. effect="dark">
  486. 已完成
  487. </el-tag>
  488. </div>
  489. <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 2">
  490. <el-tag
  491. color="#a611e4"
  492. effect="dark">
  493. 延续
  494. </el-tag>
  495. </div>
  496. <div
  497. class="list-opt"
  498. v-if="taskFourWeekKey >= currentMonth"
  499. >
  500. <!-- <el-progress :percentage="30" ></el-progress> -->
  501. <!-- <div style="width:30%">
  502. <el-progress :percentage="50" color='#cc9966'></el-progress>
  503. </div>-->
  504. <el-button
  505. type="warning"
  506. icon="el-icon-edit"
  507. size="mini"
  508. circle
  509. @click="editTask(item)"
  510. style="margin-right: 5px"
  511. ></el-button>
  512. <el-popconfirm
  513. icon="el-icon-info"
  514. iconColor="red"
  515. title="确定删除吗?"
  516. @confirm="deleteTask(item)"
  517. >
  518. <!-- <el-button slot="reference">删除</el-button> -->
  519. <el-button
  520. type="danger"
  521. slot="reference"
  522. icon="el-icon-delete"
  523. size="mini"
  524. circle
  525. ></el-button>
  526. </el-popconfirm>
  527. </div>
  528. </li>
  529. </ul>
  530. </div>
  531. </div>
  532. <div class="okrBox four">
  533. <div class="okrBox-title">
  534. <p class="top-title">状态指标</p>
  535. <el-button
  536. type="text"
  537. class="createTask"
  538. @click="createStatus"
  539. >
  540. <i class="el-icon-plus"></i>新建状态指标
  541. </el-button>
  542. </div>
  543. <div class="status-list">
  544. <li v-for="item in status" :key="item.id" class="status">
  545. <span
  546. class="itemStatus"
  547. :style="'background-color:' + item.color"
  548. @click="editSatus(item)"
  549. >{{ item.content }}</span
  550. >
  551. </li>
  552. </div>
  553. </div>
  554. </div>
  555. <div class="okrBody noOkr" v-else>
  556. <!-- {{time}} -->
  557. <p class="noObject">
  558. {{
  559. time.quarter == time.currentQuarter && time.year == time.currentYear
  560. ? "请先制定目标,才能进行okr工作板管理"
  561. : "该季度暂无OKR,换个季度试试吧"
  562. }}
  563. </p>
  564. <p
  565. v-show="
  566. time.quarter == time.currentQuarter && time.year == time.currentYear
  567. "
  568. >
  569. <el-button type="text" style="font-size: 20px" @click="createO"
  570. >立即创建</el-button
  571. >
  572. </p>
  573. <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
  574. <!-- <div class='kongbaiBackground'>
  575. <img src="../assets/image/shili.png" alt="" class="shili">
  576. </div>-->
  577. </div>
  578. <!-- 打开创建目标的模态框 -->
  579. <div class="openTargetBox">
  580. <el-dialog
  581. title="创建OKR目标"
  582. :visible.sync="targetVisible"
  583. width="50%"
  584. center
  585. :before-close="OKRhandleClose"
  586. >
  587. <div class="targetBody">
  588. <div class="targetO">
  589. <span class="target-tip">O</span>
  590. <span class="target-input">
  591. <el-input
  592. type="text"
  593. placeholder="请输入目标名称"
  594. v-model="targetName"
  595. maxlength="50"
  596. show-word-limit
  597. clearable
  598. @blur="checkedTargetName"
  599. ></el-input>
  600. </span>
  601. <span
  602. v-if="targetNameOk"
  603. style="font-size: 12px; color: red; margin-left: 50px"
  604. >目标名称时必须填写的</span
  605. >
  606. </div>
  607. <div class="targetKR" v-for="(item, index) in KRList" :key="index">
  608. <div class="kr" style="display: flex; align-items: center">
  609. <span class="tip">
  610. <span class="sc-bQduHL kArEgh"></span> KR
  611. </span>
  612. <span class="info">
  613. <el-input
  614. type="text"
  615. placeholder="请输入关键结果"
  616. v-model="item.krInfo"
  617. clearable
  618. maxlength="50"
  619. show-word-limit
  620. ></el-input>
  621. </span>
  622. </div>
  623. <div
  624. class="krdecs"
  625. style="margin-top: 15px; display: flex; align-items: center"
  626. >
  627. <span class="tip">
  628. <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
  629. </span>
  630. <span class="info">
  631. <el-input
  632. type="textarea"
  633. placeholder="您可对KR做进一步详细描述"
  634. v-model="item.krDesc"
  635. maxlength="1000"
  636. show-word-limit
  637. clearable
  638. size="small"
  639. ></el-input>
  640. </span>
  641. </div>
  642. <!-- <span class="tip">
  643. <span class="sc-bQduHL kArEgh"></span> KR
  644. </span>
  645. <span class="info">
  646. <el-input type="text" placeholder="请输入KR名称" v-model="item.krInfo" clearable></el-input>
  647. </span> -->
  648. <span class="progress">
  649. <span class="progressBar creatOxia">
  650. <span class="krtitle">KR的完成进度:</span>
  651. <el-slider
  652. v-model="item.completion"
  653. show-input
  654. style="width: 80%; margin-left: 10px"
  655. ></el-slider>
  656. </span>
  657. <span>
  658. <!-- <el-popconfirm
  659. icon="el-icon-info"
  660. iconColor="red"
  661. title="确定删除吗?"
  662. @onConfirm="deleteTask(item)"
  663. >
  664. <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
  665. </el-popconfirm>-->
  666. <el-button
  667. icon="el-icon-delete"
  668. circle
  669. class="delete"
  670. size="mini"
  671. @click="createdeleteKR(item, index)"
  672. ></el-button>
  673. <!-- <i class="el-icon-delete"></i> -->
  674. </span>
  675. </span>
  676. <div class="task-item">
  677. <span class="item-name">选择权限:</span>
  678. <el-radio-group
  679. v-model="item.KRPower"
  680. size="small"
  681. @change="ItemKRPowerChange(item)"
  682. >
  683. <el-radio label="1" border>公开</el-radio>
  684. <el-radio label="2" border>私密</el-radio>
  685. <el-radio label="3" border>指定人可见</el-radio>
  686. </el-radio-group>
  687. </div>
  688. <div class="task-item" v-if="item.KRPower == '1'">
  689. <span class="item-name">提醒谁看:</span>
  690. <treeselect
  691. v-model="item.KRremindValue"
  692. :multiple="true"
  693. :options="options"
  694. :clear-on-select="clearOnSelect"
  695. placeholder="选择@的人或者部门"
  696. style="width: 80%; display: inline-block"
  697. />
  698. </div>
  699. <div class="task-item" v-if="item.KRPower == '3'">
  700. <span class="item-name">指定可见:</span>
  701. <treeselect
  702. v-model="item.KRvisiblePerson"
  703. :multiple="true"
  704. :options="options"
  705. :clear-on-select="clearOnSelect"
  706. placeholder="选择指定的可见人或者部门"
  707. @input="selectChange(item)"
  708. style="width: 80%; display: inline-block"
  709. />
  710. </div>
  711. <div class="task-item" v-if="item.KRPower == '3'">
  712. <span class="item-name">提醒谁看:</span>
  713. <span
  714. class="display:block"
  715. v-if="item.KRTag && item.KRTag.length > 0"
  716. >
  717. <el-tag
  718. v-for="(tag, index) in item.KRTag"
  719. :key="tag.id"
  720. closable
  721. type="warning"
  722. @close="KRTagClose(tag, index, item)"
  723. style="margin-right: 8px; margin-bottom: 8px"
  724. >{{ tag.label }}</el-tag
  725. >
  726. </span>
  727. </div>
  728. </div>
  729. <div class="addKR">
  730. <el-button type="text" style="font-size: 16px" @click="addKR">
  731. <i class="el-icon-plus"></i>添加关键结果
  732. </el-button>
  733. </div>
  734. </div>
  735. <span slot="footer" class="dialog-footer">
  736. <el-button @click="targetVisible = false">取 消</el-button>
  737. <el-button type="primary" @click="createOKRcomplete">创 建</el-button>
  738. </span>
  739. </el-dialog>
  740. </div>
  741. <!-- 创建任务的模态框 -->
  742. <div class="openTaskBox">
  743. <el-dialog
  744. :title="taskTitle"
  745. :visible.sync="taskVisible"
  746. width="45%"
  747. center
  748. :before-close="OKRhandleClose"
  749. >
  750. <div class="taskBody">
  751. <div class="task-item">
  752. <!-- <span class="item-name">名称:</span> -->
  753. <el-input
  754. type="text"
  755. placeholder="请输入任务名称"
  756. v-model="taskName"
  757. maxlength="50"
  758. show-word-limit
  759. style="width: 100%"
  760. clearable
  761. @blur="checkTaskName"
  762. ></el-input>
  763. <span
  764. style="font-size: 12px; color: #CC6666; margin-left: 15px"
  765. v-if="taskNameOk"
  766. >任务名称是必须得填写的哦!</span
  767. >
  768. </div>
  769. <div class="task-item">
  770. <!-- <span class="item-name">描述</span> -->
  771. <el-input
  772. type="textarea"
  773. placeholder="您可对任务做进一步详细描述"
  774. v-model="taskDesc"
  775. maxlength="1000"
  776. show-word-limit
  777. clearable
  778. size="small"
  779. ></el-input>
  780. </div>
  781. <div class="task-item">
  782. <span class="item-name">选择等级:</span>
  783. <el-radio-group v-model="taskRange" size="small">
  784. <el-radio label="1" border>P1</el-radio>
  785. <el-radio label="2" border>P2</el-radio>
  786. <el-radio label="3" border>P3</el-radio>
  787. </el-radio-group>
  788. </div>
  789. <div class="task-item">
  790. <span class="item-name">选择权限:</span>
  791. <el-radio-group
  792. v-model="taskPower"
  793. size="small"
  794. @change="taskPowerChange"
  795. >
  796. <el-radio label="1" border>公开</el-radio>
  797. <el-radio label="2" border>私密</el-radio>
  798. <el-radio label="3" border>指定人可见</el-radio>
  799. </el-radio-group>
  800. </div>
  801. <div class="task-item" v-if="taskPower == '1'">
  802. <span class="item-name">提醒谁看:</span>
  803. <treeselect
  804. v-model="remindValue"
  805. :multiple="true"
  806. :options="options"
  807. :clear-on-select="clearOnSelect"
  808. placeholder="选择@的人或者部门"
  809. style="width: 80%; display: inline-block"
  810. />
  811. </div>
  812. <div class="task-item" v-if="taskPower == '3'">
  813. <span class="item-name">指定可见:</span>
  814. <treeselect
  815. v-model="visiblePerson"
  816. :multiple="true"
  817. :options="options"
  818. :clear-on-select="clearOnSelect"
  819. placeholder="选择指定的可见人或者部门"
  820. style="width: 80%; display: inline-block"
  821. />
  822. </div>
  823. <div class="task-item" v-if="taskPower == '3'">
  824. <span class="item-name">提醒谁看:</span>
  825. <span class="display:block">
  826. <el-tag
  827. v-for="(tag, index) in taskTag"
  828. :key="tag.id"
  829. closable
  830. type="warning"
  831. @close="handleClose(tag, index)"
  832. style="margin-right: 8px; margin-bottom: 8px"
  833. >{{ tag.label }}</el-tag
  834. >
  835. </span>
  836. </div>
  837. <div v-if="taskTitle == '修改任务'" class="task-item">
  838. <span class="item-name">当前状态:</span>
  839. <el-radio-group
  840. v-model="statusTask"
  841. size="small"
  842. >
  843. <el-radio :label="1" border>正常</el-radio>
  844. <el-radio :label="2" border>延续</el-radio>
  845. <el-radio :label="3" border>已完成</el-radio>
  846. </el-radio-group>
  847. </div>
  848. <!-- 完成的进度 -->
  849. <!-- <div class="task-item">
  850. <span class="item-name" >设置进度:</span>
  851. <el-slider
  852. v-model="taskProgress"
  853. show-input
  854. style="width:80%;margin-left:10px">
  855. </el-slider>
  856. </div>-->
  857. </div>
  858. <span slot="footer" class="dialog-footer">
  859. <el-button @click="taskVisible = false">取 消</el-button>
  860. <el-button
  861. type="warning"
  862. @click="taskOk"
  863. v-if="taskTitle == '创建任务'"
  864. :loading="taskVisibleLoading"
  865. >创 建</el-button
  866. >
  867. <el-button
  868. type="warning"
  869. @click="editTaskOk"
  870. v-if="taskTitle == '修改任务'"
  871. :loading="taskVisibleLoading"
  872. >修 改</el-button
  873. >
  874. </span>
  875. </el-dialog>
  876. </div>
  877. <!-- 创建和修改状态指标 -->
  878. <div class="openStatusBox">
  879. <el-dialog
  880. :title="statusTitle"
  881. :visible.sync="statusVisible"
  882. width="40%"
  883. center
  884. :before-close="OKRhandleClose"
  885. >
  886. <div class="taskBody StatusBody">
  887. <div class="task-item">
  888. <!-- <span class="item-name">名称:</span> -->
  889. <el-input
  890. type="text"
  891. placeholder="请输入状态指标"
  892. v-model="statusName"
  893. maxlength="15"
  894. show-word-limit
  895. style="width: 95%"
  896. clearable
  897. @blur="checkStatusName"
  898. ></el-input>
  899. <span
  900. style="
  901. font-size: 12px;
  902. color: #CC6666;
  903. margin-left: 15px;
  904. display: block;
  905. margin-top: 5px;
  906. "
  907. v-if="statusNameOk"
  908. >状态指标是必须得填写的哦!</span
  909. >
  910. </div>
  911. <div class="task-item">
  912. <span class="item-name">选择状态:</span>
  913. <el-radio-group v-model="statusType" size="small">
  914. <el-radio label="1" border class="first">较差</el-radio>
  915. <el-radio label="2" border class="second">一般</el-radio>
  916. <el-radio label="3" border class="third">良好</el-radio>
  917. </el-radio-group>
  918. </div>
  919. <div class="task-item" v-if="statusTitle == '修改状态指标'">
  920. <div
  921. style="
  922. width: 200px;
  923. height: 30px;
  924. margin: 0 auto;
  925. text-align: center;
  926. margin-top: 30px;
  927. "
  928. >
  929. <!-- <el-popconfirm
  930. icon="el-icon-info"
  931. iconColor="red"
  932. title="确定删除吗?"
  933. @onConfirm="deleteStatusOk"
  934. >
  935. <el-button type="warning" slot="reference" >删除本条状态指标</el-button>
  936. </el-popconfirm>-->
  937. <el-button type="warning" @click="deleteStatusOk"
  938. >删除本条状态指标</el-button
  939. >
  940. </div>
  941. </div>
  942. <!-- 完成的进度 -->
  943. <!-- <div class="task-item">
  944. <span class="item-name" >设置进度:</span>
  945. <el-slider
  946. v-model="taskProgress"
  947. show-input
  948. style="width:80%;margin-left:10px">
  949. </el-slider>
  950. </div>-->
  951. </div>
  952. <span slot="footer" class="dialog-footer">
  953. <el-button @click="statusVisible = false">取 消</el-button>
  954. <el-button
  955. type="warning"
  956. @click="statusOk"
  957. v-if="statusTitle == '创建状态指标'"
  958. >创 建</el-button
  959. >
  960. <el-button
  961. type="warning"
  962. @click="editStatusOk"
  963. v-if="statusTitle == '修改状态指标'"
  964. >修 改</el-button
  965. >
  966. </span>
  967. </el-dialog>
  968. </div>
  969. <!-- 创建和修改KR -->
  970. <div class="openKRBox">
  971. <el-dialog
  972. :title="KRTitle"
  973. :visible.sync="KRVisible"
  974. width="50%"
  975. center
  976. :before-close="OKRhandleClose"
  977. >
  978. <div class="taskBody targetBody editKRBody">
  979. <div class="targetO">
  980. <span class="target-tip">O</span>
  981. <span class="target-input">
  982. <div class="currentO">{{ okrObject.objectInfo }}</div>
  983. </span>
  984. <!-- <span v-if="targetNameOk" style="font-size:12px;color:red;margin-left:50px">目标名称时必须填写的</span> -->
  985. </div>
  986. <div class="task-item">
  987. <!-- <span class="item-name">名称:</span> -->
  988. <div class="targetKR">
  989. <div class="kr" style="display: flex; align-items: center">
  990. <span class="tip">
  991. <span class="sc-bQduHL kArEgh"></span> KR
  992. </span>
  993. <span class="info">
  994. <el-input
  995. type="text"
  996. placeholder="请输入关键结果"
  997. v-model="KRName"
  998. clearable
  999. maxlength="50"
  1000. show-word-limit
  1001. ></el-input>
  1002. </span>
  1003. </div>
  1004. <span
  1005. style="
  1006. font-size: 12px;
  1007. color: #CC6666;
  1008. margin-left: 10%;
  1009. display: block;
  1010. margin-top: 5px;
  1011. "
  1012. v-if="KRNameOk"
  1013. >KR是必须得填写的哦!</span
  1014. >
  1015. <div
  1016. class="krdecs"
  1017. style="margin-top: 15px; display: flex; align-items: center"
  1018. >
  1019. <span class="tip">
  1020. <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
  1021. </span>
  1022. <span class="info">
  1023. <el-input
  1024. type="textarea"
  1025. placeholder="您可对KR做进一步详细描述"
  1026. v-model="KRDesc"
  1027. maxlength="2000"
  1028. show-word-limit
  1029. clearable
  1030. size="small"
  1031. ></el-input>
  1032. </span>
  1033. </div>
  1034. <span class="progress">
  1035. <span class="krtitle">KR的完成进度:</span>
  1036. <span class="progressBar">
  1037. <el-slider
  1038. v-model="KRProgress"
  1039. show-input
  1040. style="width: 100%; margin-left: 10px"
  1041. ></el-slider>
  1042. </span>
  1043. </span>
  1044. <div class="task-item">
  1045. <span class="item-name">选择权限:</span>
  1046. <el-radio-group
  1047. v-model="KRPower"
  1048. size="small"
  1049. @change="KRPowerChange"
  1050. >
  1051. <el-radio label="1" border>公开</el-radio>
  1052. <el-radio label="2" border>私密</el-radio>
  1053. <el-radio label="3" border>指定人可见</el-radio>
  1054. </el-radio-group>
  1055. </div>
  1056. <div class="task-item" v-if="KRPower == '1'">
  1057. <span class="item-name">提醒谁看:</span>
  1058. <treeselect
  1059. v-model="KRremindValue"
  1060. :multiple="true"
  1061. :options="options"
  1062. :clear-on-select="clearOnSelect"
  1063. placeholder="选择@的人或者部门"
  1064. style="width: 80%; display: inline-block"
  1065. />
  1066. </div>
  1067. <div class="task-item" v-if="KRPower == '3'">
  1068. <span class="item-name">指定可见:</span>
  1069. <treeselect
  1070. v-model="KRvisiblePerson"
  1071. :multiple="true"
  1072. :options="options"
  1073. :clear-on-select="clearOnSelect"
  1074. placeholder="选择指定的可见人或者部门"
  1075. style="width: 80%; display: inline-block"
  1076. />
  1077. </div>
  1078. <div class="task-item" v-if="KRPower == '3'">
  1079. <span class="item-name">提醒谁看:</span>
  1080. <span class="display:block">
  1081. <el-tag
  1082. v-for="(tag, index) in KRTag"
  1083. :key="tag.id"
  1084. closable
  1085. type="warning"
  1086. @close="KRhandleClose(tag, index)"
  1087. style="margin-right: 8px; margin-bottom: 8px"
  1088. >{{ tag.label }}</el-tag
  1089. >
  1090. </span>
  1091. </div>
  1092. </div>
  1093. </div>
  1094. <!-- <div class="task-item">
  1095. <span class="item-name" >选择状态:</span>
  1096. <el-radio-group v-model="statusType" size="small" >
  1097. <el-radio label="1" border class="first">危险</el-radio>
  1098. <el-radio label="2" border class="second">一般</el-radio>
  1099. <el-radio label="3" border class="third">良好</el-radio>
  1100. </el-radio-group>
  1101. </div>-->
  1102. </div>
  1103. <span slot="footer" class="dialog-footer">
  1104. <el-button @click="KRVisible = false">取 消</el-button>
  1105. <el-button type="warning" @click="KROk" v-if="KRTitle == '新建KR'"
  1106. :loading="KROKVisible">创 建</el-button
  1107. >
  1108. <el-button type="warning" @click="editKROk" v-if="KRTitle == '修改KR'"
  1109. >修 改</el-button
  1110. >
  1111. </span>
  1112. </el-dialog>
  1113. </div>
  1114. <!-- 修改O -->
  1115. <div class="openTargetBox">
  1116. <el-dialog
  1117. title="修改OKR目标"
  1118. :visible.sync="ObejectVisible"
  1119. width="50%"
  1120. center
  1121. :before-close="OKRhandleClose"
  1122. >
  1123. <div class="targetBody editKRBody taskBody">
  1124. <div class="targetO">
  1125. <span class="target-tip">O</span>
  1126. <span class="target-input currentO">
  1127. <el-input
  1128. type="text"
  1129. placeholder="请输入目标名称"
  1130. v-model="ObjectName"
  1131. maxlength="30"
  1132. show-word-limit
  1133. clearable
  1134. focus
  1135. @blur="checkedObjectName"
  1136. ></el-input>
  1137. </span>
  1138. <span
  1139. v-if="ObjectNameOk"
  1140. style="font-size: 12px; color: red; margin-left: 50px"
  1141. >目标名称时必须填写的</span
  1142. >
  1143. </div>
  1144. <div class="progress task-item" style="display: block">
  1145. <span class="progress">
  1146. <span class="progressBar">
  1147. <span>目标的完成进度:</span>
  1148. <el-slider
  1149. v-model="ObjectProgress"
  1150. show-input
  1151. style="width: 80%; margin-left: 10px"
  1152. ></el-slider>
  1153. </span>
  1154. </span>
  1155. </div>
  1156. </div>
  1157. <span slot="footer" class="dialog-footer">
  1158. <el-button @click="ObejectVisible = false">取 消</el-button>
  1159. <el-button type="warning" @click="editObjectComplete"
  1160. >修 改</el-button
  1161. >
  1162. </span>
  1163. </el-dialog>
  1164. </div>
  1165. <el-dialog
  1166. title="添加对齐"
  1167. :visible.sync="AlignmentVisible"
  1168. width="50%"
  1169. center
  1170. :before-close="OKRhandleClose"
  1171. >
  1172. <!--
  1173. {{ checkedCities }} -->
  1174. <div style="margin-bottom: 15px">
  1175. 人员筛选:
  1176. <el-select
  1177. v-model="person"
  1178. filterable
  1179. placeholder="请选择"
  1180. @change="getAlignmentPerson"
  1181. >
  1182. <el-option
  1183. v-for="item in optionsPerson"
  1184. :key="item.userId"
  1185. :label="item.name"
  1186. :value="item.userId"
  1187. >
  1188. </el-option>
  1189. </el-select>
  1190. </div>
  1191. <ul
  1192. class="infinite-list"
  1193. v-infinite-scroll="getAlignmentPageList"
  1194. :infinite-scroll-immediate="false"
  1195. style="overflow: auto; height: 500px"
  1196. >
  1197. <el-checkbox-group v-model="checkedCities">
  1198. <li v-for="(item, index) in alignmentList" :key="index" class="infinite-list-item">
  1199. <el-checkbox :key="item.id" :label="item.id">
  1200. <el-card class="box-card">
  1201. <h3>
  1202. {{ item.krInfo
  1203. }}<span style="color: red">({{ item.userName }})</span>
  1204. </h3>
  1205. <p class="text item">
  1206. {{ item.krDesc }}
  1207. </p>
  1208. </el-card>
  1209. </el-checkbox>
  1210. </li>
  1211. </el-checkbox-group>
  1212. </ul>
  1213. <span slot="footer" class="dialog-footer">
  1214. <el-button @click="AlignmentVisible = false">取 消</el-button>
  1215. <el-button
  1216. type="warning"
  1217. @click="addAlignmentPageList"
  1218. :loading="okLoading"
  1219. >添 加</el-button
  1220. >
  1221. </span>
  1222. </el-dialog>
  1223. </div>
  1224. </template>
  1225. <script>
  1226. // import { TreeSelect } from 'ant-design-vue';
  1227. import Treeselect from "@riophae/vue-treeselect";
  1228. // import the styles
  1229. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  1230. import { postAction, getAction } from "@/utils/api/http.js";
  1231. // const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  1232. let cycleOptions = [
  1233. // {
  1234. // label:'全部',
  1235. // value:0
  1236. // },
  1237. {
  1238. label: "第一季度",
  1239. value: 1,
  1240. },
  1241. {
  1242. label: "第二季度",
  1243. value: 2,
  1244. },
  1245. {
  1246. label: "第三季度",
  1247. value: 3,
  1248. },
  1249. {
  1250. label: "第四季度",
  1251. value: 4,
  1252. },
  1253. ];
  1254. export default {
  1255. components: { Treeselect },
  1256. data() {
  1257. return {
  1258. KROKVisible:false,
  1259. taskVisibleLoading:false,
  1260. okLoading: false,
  1261. optionsPerson: [],
  1262. person: "",
  1263. AlignmentVisible: false, //添加对齐
  1264. alignmentList: [], //添加对齐列表
  1265. alignmentPage: 1,
  1266. checkedCities: [],
  1267. krId: null,
  1268. Alignment: [],
  1269. otherAligned: [],
  1270. yearValue: undefined,
  1271. cycleValue: undefined,
  1272. yearsOptions: [],
  1273. cycleOptions,
  1274. clearOnSelect: true,
  1275. loading: false,
  1276. options: [],
  1277. // options2,
  1278. taskTag: [],
  1279. KRTag: [],
  1280. remindValue: [], //@的人 任务
  1281. visiblePerson: [], //指定可见人 任务
  1282. statusTask: 1,
  1283. // SHOW_PARENT,
  1284. KRPower: "1", //kr的权限
  1285. KRremindValue: [], //kr的提醒人
  1286. KRvisiblePerson: [], //kr的可见人
  1287. okrVisible: false, //同步okr的弹框是否可见
  1288. targetVisible: false, //创建目标的弹框
  1289. taskVisible: false, //创建的弹框是否可见
  1290. syncPeopleValue: [],
  1291. syncPeopleOptions: [],
  1292. selectedPeople: [],
  1293. okr: [],
  1294. okrList: [],
  1295. okrObject: {},
  1296. allTime: null,
  1297. taskInfoList: [],
  1298. taskInfoListKey:null,
  1299. taskFourWeekKey:null,
  1300. currentMonth:null,
  1301. currentWeek:null,
  1302. currentDate:null,
  1303. taskInfoWeeks:[],
  1304. taskInfoMonth:[],
  1305. taskFourWeek: [],
  1306. status: [],
  1307. time: {},
  1308. currentTask: 0, //创建的类型 周1 月2
  1309. taskTitle: "", //task的标题
  1310. taskName: "", //名称
  1311. taskDesc: "", //描述
  1312. taskNameOk: false, //名称是否填写
  1313. taskRange: "1", //等级
  1314. taskPower: "1", //权限 1公开2私密3指定
  1315. taskProgress: 0, //进度
  1316. taskId: undefined, //id
  1317. statusTitle: "", //状态模态框的标题
  1318. statusVisible: false,
  1319. statusName: "",
  1320. statusNameOk: false,
  1321. statusId: 0,
  1322. statusType: "2",
  1323. KRTitle: "", //kr模态框的标题
  1324. KRNameOk: false,
  1325. KRVisible: false,
  1326. KRName: "",
  1327. KRProgress: 0,
  1328. KRId: 0,
  1329. KRDesc: "",
  1330. percentage: 0,
  1331. colors: [
  1332. { color: "#f56c6c", percentage: 30 },
  1333. { color: "#e6a23c", percentage: 60 },
  1334. { color: "#5cb87a", percentage: 80 },
  1335. { color: "#5cb87a", percentage: 100 },
  1336. ],
  1337. itemColor: [
  1338. { color: "#f56c6c", percentage: 30 },
  1339. { color: "#e6a23c", percentage: 60 },
  1340. { color: "#cc9966", percentage: 90 },
  1341. { color: "#cc9966", percentage: 100 },
  1342. { color: "#5cb87a", percentage: 100 },
  1343. ],
  1344. targetName: "", //目标的名字
  1345. targetNameOk: false,
  1346. KRList: [],
  1347. krInfo: [],
  1348. ObjectName: "",
  1349. ObjectNameOk: false,
  1350. ObjectProgress: 0,
  1351. currentObjId: 0,
  1352. ObejectVisible: false,
  1353. currentKRitem: {},
  1354. currentTaskitem: {},
  1355. };
  1356. },
  1357. watch: {
  1358. visiblePerson: {
  1359. deep: true,
  1360. handler(n, o) {
  1361. this.taskTag = [];
  1362. // this.taskTag=JSON.parse(JSON.stringify(n))
  1363. console.log(n, o);
  1364. if (n) {
  1365. n.map((item) => {
  1366. this.taskTag.push({
  1367. id: item,
  1368. label: this.filterName(item),
  1369. });
  1370. });
  1371. }
  1372. if (this.currentTaskitem.id) {
  1373. if (this.currentTaskitem.permission == 3) {
  1374. if (this.currentTaskitem.remindVOS) {
  1375. this.taskTag = [];
  1376. this.currentTaskitem.remindVOS.forEach((item) => {
  1377. this.taskTag.push({
  1378. id: item.remindId,
  1379. label: item.name,
  1380. });
  1381. });
  1382. }
  1383. }
  1384. }
  1385. },
  1386. },
  1387. KRvisiblePerson: {
  1388. deep: true,
  1389. handler(n, o) {
  1390. this.KRTag = [];
  1391. // this.taskTag=JSON.parse(JSON.stringify(n))
  1392. if (n) {
  1393. n.map((item) => {
  1394. this.KRTag.push({
  1395. id: item,
  1396. label: this.filterName(item),
  1397. });
  1398. });
  1399. }
  1400. if (this.currentKRitem.id) {
  1401. if (this.currentKRitem.permission == 3) {
  1402. if (this.currentKRitem.remindVOS) {
  1403. this.KRTag = [];
  1404. this.currentKRitem.remindVOS.forEach((ele) => {
  1405. this.KRTag.push({
  1406. id: ele.remindId,
  1407. label: ele.name,
  1408. });
  1409. });
  1410. }
  1411. }
  1412. }
  1413. },
  1414. },
  1415. },
  1416. methods: {
  1417. //添加对齐
  1418. addAlignmentPageList() {
  1419. this.okLoading = true;
  1420. postAction(
  1421. `/okr/kr/addAlign?originId=${
  1422. this.krId
  1423. }&alignId=${this.checkedCities.join()}`
  1424. ).then((res) => {
  1425. if (res.success) {
  1426. this.$message.success("添加对齐成功");
  1427. this.AlignmentVisible = false;
  1428. this.alignmentPage = 1;
  1429. this.okLoading = false;
  1430. } else {
  1431. this.$message.success(res.message);
  1432. this.okLoading = false;
  1433. }
  1434. });
  1435. },
  1436. //设置对齐的列表
  1437. setAlignment(ele) {
  1438. this.checkedCities = [];
  1439. this.person = "";
  1440. this.AlignmentVisible = true;
  1441. this.krId = ele.id;
  1442. getAction("/okr/kr/list", {
  1443. year: this.yearValue,
  1444. quarter: this.cycleValue,
  1445. pageSize: 10,
  1446. pageNo: 1,
  1447. userId: this.person,
  1448. }).then((res) => {
  1449. if (res.success) {
  1450. this.alignmentList = res.result.records;
  1451. }
  1452. });
  1453. postAction("/okr/qywx/getUserListByName", {}).then((res) => {
  1454. console.log(res);
  1455. if (res.success) {
  1456. this.optionsPerson = res.result;
  1457. }
  1458. });
  1459. },
  1460. getAlignmentPerson() {
  1461. this.alignmentPage = 0;
  1462. this.alignmentList = [];
  1463. this.getAlignmentPageList();
  1464. },
  1465. //滚动加载
  1466. getAlignmentPageList() {
  1467. this.alignmentPage++;
  1468. getAction("/okr/kr/list", {
  1469. year: this.yearValue,
  1470. quarter: this.cycleValue,
  1471. pageSize: 10,
  1472. pageNo: this.alignmentPage,
  1473. userId: this.person,
  1474. }).then((res) => {
  1475. if (res.success) {
  1476. this.alignmentList.push(...res.result.records);
  1477. }
  1478. });
  1479. },
  1480. //获取对齐的详情列表
  1481. getAlignmentList(ele) {
  1482. console.log(ele);
  1483. this.Alignment = [];
  1484. this.otherAligned = [];
  1485. postAction(`/okr/kr/alignList?originId=${ele.id}`).then((res) => {
  1486. if (res.success) {
  1487. this.Alignment.push(...res.myAlign);
  1488. this.otherAligned.push(...res.otherAligned);
  1489. }
  1490. });
  1491. },
  1492. //删除对齐
  1493. deleteAlignment(id, ele) {
  1494. postAction(`/okr/kr/deleteAlign?originId=${ele.id}&alignId=${id}`).then(
  1495. (res) => {
  1496. if (res.success) {
  1497. this.$message.success("删除成功");
  1498. this.getAlignmentList(ele);
  1499. } else {
  1500. this.$message.error("删除失败");
  1501. }
  1502. }
  1503. );
  1504. },
  1505. taskPowerChange(val) {
  1506. console.log(val);
  1507. if (this.taskPower == "1") {
  1508. this.remindValue = [];
  1509. } else if (this.taskPower == "3") {
  1510. this.visiblePerson = [];
  1511. this.taskTag = [];
  1512. } else if (this.taskPower == "2") {
  1513. this.visiblePerson = [];
  1514. this.taskTag = [];
  1515. this.remindValue = [];
  1516. }
  1517. },
  1518. KRPowerChange(val) {
  1519. console.log(val);
  1520. if (this.KRPower == "1") {
  1521. this.KRremindValue = [];
  1522. } else if (this.KRPower == "3") {
  1523. this.KRvisiblePerson = [];
  1524. this.KRTag = [];
  1525. } else if (this.KRPower == "2") {
  1526. this.KRvisiblePerson = [];
  1527. this.KRTag = [];
  1528. this.KRremindValue = [];
  1529. }
  1530. },
  1531. handleClose(tag, index) {
  1532. this.taskTag.splice(index, 1);
  1533. // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
  1534. console.log(this.taskTag);
  1535. },
  1536. KRhandleClose(tag, index) {
  1537. this.KRTag.splice(index, 1);
  1538. // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
  1539. console.log(this.KRTag);
  1540. },
  1541. KRTagClose(tag, index, item) {
  1542. console.log(tag, index, item);
  1543. item.KRTag.splice(index, 1);
  1544. // this.KRList.forEach(ele=>{
  1545. // })
  1546. },
  1547. //查找人名-
  1548. filterName(id) {
  1549. let JSONArr = JSON.stringify(this.options);
  1550. let arr = JSONArr.split(`"value":"${id}","label":"`)[1].split('"')[0];
  1551. // console.log(arr)
  1552. return arr;
  1553. },
  1554. filterOption(input, option) {
  1555. console.log(input, option);
  1556. return (
  1557. option.componentOptions.children[0].text
  1558. .toLowerCase()
  1559. .indexOf(input.toLowerCase()) >= 0
  1560. );
  1561. },
  1562. // 删除当前同步人
  1563. deletePeople(item) {
  1564. console.log(item);
  1565. postAction("/okr/okr/deleteOkrMember", {
  1566. memberId: item.value,
  1567. }).then((res) => {
  1568. console.log(res);
  1569. if (res.success) {
  1570. this.$message.success("同步人删除成功!");
  1571. //请求已经同步的人
  1572. postAction("/okr/okr/getMemberListByUserId", {}).then((res) => {
  1573. this.selectedPeople = [];
  1574. // console.log(res);
  1575. res.result.forEach((item) => {
  1576. this.selectedPeople.push({
  1577. label: item.name,
  1578. value: item.userId,
  1579. });
  1580. });
  1581. });
  1582. } else {
  1583. this.$message.success("同步人删除失败,稍后再试");
  1584. }
  1585. });
  1586. },
  1587. // okr同步事件
  1588. okrSync() {
  1589. this.okrVisible = true;
  1590. this.syncPeopleOptions = [];
  1591. //请求所有的公司人
  1592. postAction("/okr/qywx/getUserListByName", {}).then((res) => {
  1593. // console.log(res)
  1594. this.syncPeopleOptions = [];
  1595. if (res.success) {
  1596. // this.syncPeopleOptions=res.result
  1597. res.result.forEach((item) => {
  1598. this.syncPeopleOptions.push({
  1599. label: item.name,
  1600. value: item.userId,
  1601. });
  1602. });
  1603. }
  1604. });
  1605. //请求已经同步的人
  1606. postAction("/okr/okr/getMemberListByUserId", {}).then((res) => {
  1607. this.selectedPeople = [];
  1608. // console.log(res);
  1609. res.result.forEach((item) => {
  1610. this.selectedPeople.push({
  1611. label: item.name,
  1612. value: item.userId,
  1613. });
  1614. });
  1615. });
  1616. },
  1617. syncOK() {
  1618. if (this.syncPeopleValue.length > 0) {
  1619. postAction("/okr/okr/saveOkrMember2", {
  1620. userIdList: this.syncPeopleValue,
  1621. }).then((res) => {
  1622. // console.log(res)
  1623. if (res.success) {
  1624. this.okrVisible = false;
  1625. this.syncPeopleValue = [];
  1626. } else {
  1627. this.$message.error("同步失败!");
  1628. }
  1629. });
  1630. } else {
  1631. this.okrVisible = false;
  1632. }
  1633. },
  1634. OKRhandleClose(done) {
  1635. this.$confirm("当前内容并未保存,确定关闭么?")
  1636. .then((_) => {
  1637. done();
  1638. })
  1639. .catch((_) => {});
  1640. },
  1641. // 创建目标
  1642. createO() {
  1643. this.targetVisible = true;
  1644. this.KRList = [];
  1645. this.targetName = "";
  1646. },
  1647. addKR() {
  1648. this.KRList.push({
  1649. krInfo: "",
  1650. completion: 0,
  1651. KRPower: "1",
  1652. KRremindValue: [],
  1653. KRvisiblePerson: [],
  1654. KRTag: [],
  1655. });
  1656. },
  1657. createdeleteKR(item, index) {
  1658. // console.log(item,index)
  1659. this.KRList.splice(index, 1);
  1660. // console.log(this.KRList)
  1661. },
  1662. checkedTargetName() {
  1663. this.targetNameOk = this.targetName ? false : true;
  1664. },
  1665. // 每个KR中的指定人改变
  1666. selectChange(item) {
  1667. console.log(item);
  1668. item.KRTag = [];
  1669. this.$nextTick(() => {
  1670. item.KRvisiblePerson.map((ele) => {
  1671. item.KRTag.push({
  1672. id: ele,
  1673. label: this.filterName(ele),
  1674. });
  1675. this.$forceUpdate();
  1676. if (item.KRTag.length == 0) {
  1677. item.KRTag = [];
  1678. this.$forceUpdate();
  1679. }
  1680. });
  1681. });
  1682. },
  1683. ItemKRPowerChange(item) {
  1684. console.log(item);
  1685. if (item.KRPower == "1") {
  1686. item.KRremindValue = [];
  1687. } else if (item.KRPower == "3") {
  1688. item.KRvisiblePerson = [];
  1689. item.KRTag = [];
  1690. } else if (item.KRPower == "2") {
  1691. item.KRvisiblePerson = [];
  1692. item.KRTag = [];
  1693. item.KRremindValue = [];
  1694. }
  1695. this.$forceUpdate();
  1696. },
  1697. createOKRcomplete() {
  1698. console.log(this.KRList);
  1699. this.checkedTargetName();
  1700. if (!this.targetNameOk) {
  1701. postAction("/okr/okr/insertObjectAndKrList", {
  1702. objectInfo: {
  1703. objectInfo: this.targetName,
  1704. completion: 0,
  1705. },
  1706. krList: this.KRList,
  1707. }).then((res) => {
  1708. // console.log(res)
  1709. if (res.success) {
  1710. this.targetVisible = false;
  1711. this.getOkrPageList();
  1712. }
  1713. });
  1714. }
  1715. },
  1716. //修改OKR的O
  1717. checkedObjectName() {
  1718. this.ObjectNameOk = this.ObjectName ? false : true;
  1719. },
  1720. changeObject(item) {
  1721. // console.log(item)
  1722. if (
  1723. this.time.year == this.time.currentYear &&
  1724. this.time.quarter == this.time.currentQuarter
  1725. ) {
  1726. this.ObjectName = item.objectInfo;
  1727. this.ObjectProgress = item.completion;
  1728. this.currentObjId = item.id;
  1729. this.ObejectVisible = true;
  1730. }
  1731. },
  1732. editObjectComplete() {
  1733. this.checkedObjectName();
  1734. if (!this.ObjectNameOk) {
  1735. postAction("/okr/okr/updateObject", {
  1736. objectInfo: {
  1737. id: this.currentObjId,
  1738. objectInfo: this.ObjectName,
  1739. completion: this.ObjectProgress,
  1740. },
  1741. }).then((res) => {
  1742. // console.log(res);
  1743. if (res.success) {
  1744. this.$message({
  1745. message: "修改成功啦!",
  1746. type: "success",
  1747. });
  1748. this.ObejectVisible = false;
  1749. this.getOkrPageList();
  1750. }
  1751. });
  1752. }
  1753. },
  1754. // 目标和kr创建成功提交
  1755. targeOKROk() {
  1756. this.targetVisible = false;
  1757. },
  1758. // 创建任务
  1759. createTask(val) {
  1760. this.taskTitle = "创建任务";
  1761. this.taskVisible = true;
  1762. this.currentTask = val;
  1763. this.taskName = "";
  1764. this.taskDesc = "";
  1765. this.taskRange = "1";
  1766. this.taskPower = "1";
  1767. this.visiblePerson = [];
  1768. this.remindValue = [];
  1769. this.taskTag = [];
  1770. this.statusTask = 1
  1771. // this.taskProgress=0;
  1772. // console.log(val,this.currentTask)
  1773. },
  1774. // 创建提交
  1775. taskOk() {
  1776. // this.taskVisible=false;
  1777. console.log(this.visiblePerson, this.remindValue);
  1778. this.taskNameOk = this.taskName ? false : true;
  1779. if (!this.taskNameOk) {
  1780. if (this.taskPower == "3") {
  1781. this.remindValue = [];
  1782. this.taskTag.forEach((item) => {
  1783. this.remindValue.push(item.id);
  1784. });
  1785. }
  1786. this.taskVisibleLoading = true
  1787. postAction("/okr/okr/insertTaskInfo", {
  1788. taskInfo: {
  1789. taskTitle: this.taskName,
  1790. taskInfo: this.taskDesc,
  1791. type: this.currentTask,
  1792. priority: this.taskRange,
  1793. permission: this.taskPower,
  1794. publicIds: this.visiblePerson,
  1795. remindIds: this.remindValue,
  1796. status: this.statusTask,
  1797. week: this.taskInfoListKey,
  1798. year: this.yearValue
  1799. },
  1800. }).then((res) => {
  1801. // console.log(res)
  1802. this.taskVisibleLoading = false
  1803. if (res.success) {
  1804. this.taskVisible = false;
  1805. this.getOkrPageList();
  1806. }
  1807. });
  1808. }
  1809. },
  1810. // 检查任务名字是否输入
  1811. checkTaskName() {
  1812. this.taskNameOk = this.taskName ? false : true;
  1813. },
  1814. checkStatusName() {
  1815. this.statusNameOk = this.statusName ? false : true;
  1816. },
  1817. // 删除task
  1818. deleteTask(val) {
  1819. // console.log(val)
  1820. postAction("/okr/okr/deleteTaskInfoById", {
  1821. taskInfo: {
  1822. id: val.id,
  1823. },
  1824. }).then((res) => {
  1825. // console.log(res)
  1826. if (res.success) {
  1827. this.$message({
  1828. message: "删除成功啦!",
  1829. type: "success",
  1830. });
  1831. this.getOkrPageList();
  1832. }
  1833. });
  1834. },
  1835. // 编辑任务
  1836. editTask(val) {
  1837. this.currentTaskitem = val;
  1838. console.log(val);
  1839. this.taskTitle = "修改任务";
  1840. // this.currentTask=val;
  1841. this.taskName = val.taskTitle;
  1842. this.taskDesc = val.taskInfo;
  1843. this.taskRange = val.priority;
  1844. this.taskId = val.id;
  1845. this.taskPower = val.permission + "";
  1846. this.statusTask = val.status
  1847. this.visiblePerson = val.publicIds;
  1848. // this.remindValue=val.remindIds
  1849. if (val.remindVOS) {
  1850. this.remindValue = [];
  1851. val.remindVOS.forEach((item) => {
  1852. this.remindValue.push(item.remindId);
  1853. });
  1854. }
  1855. if (val.publicVOS) {
  1856. this.visiblePerson = [];
  1857. val.publicVOS.forEach((item) => {
  1858. this.visiblePerson.push(item.publicId);
  1859. });
  1860. }
  1861. this.$nextTick(() => {
  1862. this.currentTaskitem = {};
  1863. });
  1864. // this.taskProgress=0;
  1865. this.taskVisible = true;
  1866. },
  1867. // 编辑提交
  1868. editTaskOk() {
  1869. this.taskNameOk = this.taskName ? false : true;
  1870. if (!this.taskNameOk) {
  1871. if (this.taskPower == "3") {
  1872. this.remindValue = [];
  1873. this.taskTag.forEach((item) => {
  1874. this.remindValue.push(item.id);
  1875. });
  1876. }
  1877. this.taskVisibleLoading = true
  1878. postAction("/okr/okr/updateTaskInfo", {
  1879. taskInfo: {
  1880. id: this.taskId,
  1881. taskTitle: this.taskName,
  1882. taskInfo: this.taskDesc,
  1883. priority: this.taskRange,
  1884. permission: this.taskPower,
  1885. publicIds: this.visiblePerson,
  1886. remindIds: this.remindValue,
  1887. status: this.statusTask
  1888. },
  1889. }).then((res) => {
  1890. this.taskVisibleLoading = false
  1891. // console.log(res)
  1892. if (res.success) {
  1893. this.$message({
  1894. message: "任务修改成功啦!",
  1895. type: "success",
  1896. });
  1897. this.taskVisible = false;
  1898. this.getOkrPageList();
  1899. } else {
  1900. this.$message({
  1901. message: "任务修改失败",
  1902. type: "error",
  1903. });
  1904. }
  1905. });
  1906. }
  1907. },
  1908. createStatus() {
  1909. this.statusVisible = true;
  1910. this.statusTitle = "创建状态指标";
  1911. this.statusName = "";
  1912. this.statusType = "2";
  1913. },
  1914. editSatus(item) {
  1915. // console.log(item);
  1916. this.statusTitle = "修改状态指标";
  1917. this.statusName = item.content;
  1918. this.statusType = item.type;
  1919. this.statusId = item.id;
  1920. this.statusVisible = true;
  1921. },
  1922. // 创建状态指标提交
  1923. statusOk() {
  1924. this.checkStatusName();
  1925. if (!this.statusNameOk) {
  1926. postAction("/okr/okr/insertContentStatus", {
  1927. content: {
  1928. content: this.statusName,
  1929. type: this.statusType,
  1930. },
  1931. }).then((res) => {
  1932. // console.log(res)
  1933. if (res.success) {
  1934. this.statusVisible = false;
  1935. this.getOkrPageList();
  1936. }
  1937. });
  1938. }
  1939. },
  1940. // 修改状态指标提交
  1941. editStatusOk() {
  1942. this.checkStatusName();
  1943. if (!this.statusNameOk) {
  1944. postAction("/okr/okr/updateContentStatus", {
  1945. content: {
  1946. id: this.statusId,
  1947. content: this.statusName,
  1948. type: this.statusType,
  1949. },
  1950. }).then((res) => {
  1951. // console.log(res)
  1952. if (res.success) {
  1953. this.$message({
  1954. message: "修改成功啦!",
  1955. type: "success",
  1956. });
  1957. this.statusVisible = false;
  1958. this.getOkrPageList();
  1959. }
  1960. });
  1961. }
  1962. },
  1963. deleteStatusOk() {
  1964. this.$confirm("即将删除本状态, 是否继续?", "提示", {
  1965. confirmButtonText: "确定",
  1966. cancelButtonText: "取消",
  1967. type: "warning",
  1968. })
  1969. .then(() => {
  1970. postAction("/okr/okr/deleteContentStatusById", {
  1971. content: {
  1972. id: this.statusId,
  1973. },
  1974. }).then((res) => {
  1975. // console.log(res)
  1976. if (res.success) {
  1977. this.$message({
  1978. message: "删除成功啦!",
  1979. type: "success",
  1980. });
  1981. this.statusVisible = false;
  1982. this.getOkrPageList();
  1983. }
  1984. });
  1985. })
  1986. .catch(() => {
  1987. this.$message({
  1988. type: "info",
  1989. message: "已取消删除",
  1990. });
  1991. });
  1992. },
  1993. deleteKR(item) {
  1994. console.log(item);
  1995. postAction("/okr/okr/deleteKrById", {
  1996. krInfo: {
  1997. id: item.id,
  1998. },
  1999. }).then((res) => {
  2000. // console.log(res);
  2001. if (res.success) {
  2002. this.$message({
  2003. message: "删除成功啦!",
  2004. type: "success",
  2005. });
  2006. this.getOkrPageList();
  2007. }
  2008. });
  2009. },
  2010. openCreateKR() {
  2011. this.KRTitle = "新建KR";
  2012. this.KRVisible = true;
  2013. this.KRName = "";
  2014. this.KRProgress = 0;
  2015. this.KRPower = "1"; //kr的权限
  2016. this.KRremindValue = []; //kr的提醒人
  2017. this.KRvisiblePerson = []; //kr的可见人
  2018. this.KRDesc = "";
  2019. },
  2020. checkKRName() {
  2021. this.KRNameOk = this.KRName ? false : true;
  2022. },
  2023. KROk() {
  2024. this.checkKRName();
  2025. if (!this.KRNameOk) {
  2026. this.KROKVisible = true
  2027. if (this.KRPower == "3") {
  2028. this.KRremindValue = [];
  2029. this.KRTag.forEach((item) => {
  2030. this.KRremindValue.push(item.id);
  2031. });
  2032. }
  2033. console.log(this.taskInfoListKey)
  2034. postAction("/okr/okr/insertOkrKrInfo", {
  2035. krInfo: {
  2036. completion: this.KRProgress,
  2037. krInfo: this.KRName,
  2038. krDesc: this.KRDesc,
  2039. objectId: this.okrObject.id,
  2040. permission: this.KRPower,
  2041. publicIds: this.KRvisiblePerson,
  2042. remindIds: this.KRremindValue,
  2043. week: this.taskInfoListKey,
  2044. year: this.yearValue
  2045. },
  2046. }).then((res) => {
  2047. this.KROKVisible = false
  2048. // console.log(res)
  2049. if (res.success) {
  2050. this.KRVisible = false;
  2051. this.getOkrPageList();
  2052. }
  2053. });
  2054. }
  2055. },
  2056. editKR(item) {
  2057. console.log(item);
  2058. this.currentKRitem = item;
  2059. this.KRTitle = "修改KR";
  2060. this.KRName = item.krInfo;
  2061. this.KRDesc = item.krDesc;
  2062. this.KRId = item.id;
  2063. this.KRVisible = true;
  2064. this.KRProgress = item.completion;
  2065. this.KRPower = item.permission + ""; //kr的权限
  2066. console.log(this.KRPower);
  2067. // this.KRremindValue=item.remindIds//kr的提醒人
  2068. // this.KRvisiblePerson=item.publicIds//kr的可见人
  2069. this.KRremindValue = [];
  2070. if (item.remindVOS) {
  2071. item.remindVOS.forEach((ele) => {
  2072. this.KRremindValue.push(ele.remindId);
  2073. });
  2074. }
  2075. this.KRvisiblePerson = [];
  2076. if (item.publicVOS) {
  2077. item.publicVOS.forEach((ele) => {
  2078. this.KRvisiblePerson.push(ele.publicId);
  2079. });
  2080. }
  2081. this.$nextTick(() => {
  2082. this.currentKRitem = {};
  2083. });
  2084. },
  2085. editKROk() {
  2086. this.checkKRName();
  2087. if (!this.KRNameOk) {
  2088. if (this.KRPower == "3") {
  2089. this.KRremindValue = [];
  2090. this.KRTag.forEach((item) => {
  2091. this.KRremindValue.push(item.id);
  2092. });
  2093. }
  2094. this.KROKVisible = true
  2095. postAction("/okr/okr/updateKr", {
  2096. krInfo: {
  2097. completion: this.KRProgress,
  2098. krInfo: this.KRName,
  2099. id: this.KRId,
  2100. permission: this.KRPower,
  2101. publicIds: this.KRvisiblePerson,
  2102. remindIds: this.KRremindValue,
  2103. krDesc: this.KRDesc,
  2104. },
  2105. }).then((res) => {
  2106. // console.log(res)
  2107. this.KROKVisible = false
  2108. if (res.success) {
  2109. this.KRVisible = false;
  2110. this.getOkrPageList();
  2111. }
  2112. });
  2113. }
  2114. },
  2115. yearChange(key) {
  2116. this.taskInfoListKey = this.taskInfoWeeks[0]
  2117. this.getOkrPageList();
  2118. },
  2119. cycleChange(key) {
  2120. if (this.yearValue == "" || this.yearValue == undefined) {
  2121. this.$message({
  2122. type: "warning",
  2123. message: "记得先选择年份哟~",
  2124. });
  2125. this.cycleValue = undefined;
  2126. } else {
  2127. this.getOkrPageList();
  2128. }
  2129. },
  2130. changeWeek(value){
  2131. var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
  2132. return item.week == value
  2133. })[0]
  2134. this.currentDate = data.startDate + '至' +data.endDate
  2135. },
  2136. changeMonth(value) {
  2137. console.log(value)
  2138. this.taskInfoWeeks = this.allTime.weeks[value].map(item=>{
  2139. return item.week
  2140. })
  2141. this.taskInfoListKey = this.taskInfoWeeks[0]
  2142. this.changeWeek(this.taskInfoListKey)
  2143. },
  2144. // 获取页面展示的list
  2145. getOkrPageList() {
  2146. this.loading = true;
  2147. postAction("/okr/okr/detail", {
  2148. year: this.yearValue,
  2149. quarter: this.cycleValue,
  2150. }).then((res) => {
  2151. // console.log(res);
  2152. this.loading = false;
  2153. if (res.success) {
  2154. if (res.result.okr) {
  2155. this.okr = res.result.okr;
  2156. this.taskInfoList = res.result.taskInfoList;
  2157. this.taskFourWeek = res.result.taskFourWeekList;
  2158. this.allTime = res.result.time;
  2159. this.currentMonth = res.result.time.currentMonth
  2160. this.currentWeek = res.result.time.currentWeek;
  2161. this.taskInfoMonth = res.result.time.months
  2162. if(res.result.time.currentQuarter == res.result.time.quarter){
  2163. this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
  2164. return item.week
  2165. })
  2166. if(this.taskInfoMonth.includes(this.taskFourWeekKey)){
  2167. this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
  2168. return item.week
  2169. })
  2170. }else{
  2171. this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
  2172. return item.week
  2173. })
  2174. this.taskFourWeekKey = res.result.time.currentMonth;
  2175. if(this.taskInfoWeeks.includes(this.taskInfoListKey)){
  2176. }else{
  2177. this.taskInfoListKey = this.taskInfoWeeks[0]
  2178. }
  2179. }
  2180. this.currentDate = res.result.time.currentDate
  2181. }else{
  2182. this.taskFourWeekKey = res.result.time.months[0];
  2183. this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
  2184. return item.week
  2185. })
  2186. this.taskInfoListKey = this.taskInfoWeeks[0]
  2187. var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
  2188. return item.week == this.taskInfoListKey
  2189. })[0]
  2190. this.currentDate = data.startDate + '至' +data.endDate
  2191. }
  2192. this.time = res.result.time;
  2193. res.result.status.forEach((item, index) => {
  2194. if (item.type == "1") {
  2195. item.color = "#CC3300";
  2196. } else if (item.type == "2") {
  2197. item.color = "#FFCC33";
  2198. } else {
  2199. item.color = "#99CC99";
  2200. }
  2201. });
  2202. this.status = res.result.status;
  2203. this.okrObject = res.result.okr[0].objectInfo;
  2204. this.yearValue = res.result.time.year;
  2205. this.cycleValue = res.result.time.quarter;
  2206. } else {
  2207. this.okr = {};
  2208. this.taskInfoList = {};
  2209. this.taskFourWeek = {};
  2210. this.time = res.result.time;
  2211. this.status = {};
  2212. this.okrObject = {};
  2213. }
  2214. }
  2215. });
  2216. },
  2217. // h获取公司的部门和人员
  2218. getPeople() {
  2219. getAction("/okr/department/queryTreeList", {}).then((res) => {
  2220. console.log(res);
  2221. // this.options=res.result[0].children;
  2222. this.options = this.HandleChildren(res.result[0].children);
  2223. });
  2224. },
  2225. // 处理children的值
  2226. HandleChildren(arr) {
  2227. let newArr = arr.map((item) => {
  2228. if (item.leaf) {
  2229. // item.children=undefined
  2230. delete item.children;
  2231. } else {
  2232. this.HandleChildren(item.children);
  2233. }
  2234. return item;
  2235. });
  2236. return newArr;
  2237. },
  2238. },
  2239. mounted() {
  2240. //请求list
  2241. this.getOkrPageList();
  2242. this.getPeople();
  2243. postAction("/okr/okr/getObjectYear ", {}).then((res) => {
  2244. // console.log(res);
  2245. this.yearsOptions = [];
  2246. res.result.forEach((item) => {
  2247. this.yearsOptions.push({
  2248. label: `${item}`,
  2249. value: item,
  2250. });
  2251. });
  2252. });
  2253. },
  2254. };
  2255. </script>
  2256. <style lang="less" scoped>
  2257. ul,
  2258. li {
  2259. margin: 0;
  2260. padding: 0;
  2261. list-style: none;
  2262. }
  2263. .okrPage {
  2264. width: 100%;
  2265. height: 100%;
  2266. background: #cc9966;
  2267. box-sizing: border-box;
  2268. position: relative;
  2269. .nowSelect {
  2270. // display: flex;
  2271. padding-top: 5px;
  2272. margin-bottom: 15px;
  2273. overflow: hidden;
  2274. }
  2275. .nowSelectLeft {
  2276. width: 84px;
  2277. float: left;
  2278. // display: inline-block;
  2279. }
  2280. .nowSelectRight {
  2281. float: left;
  2282. width: 400px;
  2283. }
  2284. .nowSelectItem {
  2285. position: relative;
  2286. // width: 70px;
  2287. text-align: center;
  2288. display: inline-block;
  2289. margin-bottom: 6px;
  2290. }
  2291. .nowSelectItemLink {
  2292. position: relative;
  2293. padding-right: 15px;
  2294. }
  2295. .deleteSelectedPeople {
  2296. display: none;
  2297. position: absolute;
  2298. right: -1px;
  2299. top: -3px;
  2300. font-size: 13px;
  2301. }
  2302. .nowSelectItem:hover .deleteSelectedPeople {
  2303. display: block;
  2304. }
  2305. .topBox {
  2306. height: 41px;
  2307. }
  2308. .title {
  2309. height: 7%;
  2310. margin-top: -50px;
  2311. padding: 20px 0;
  2312. margin-bottom: 9px;
  2313. color: #fff;
  2314. box-sizing: border-box;
  2315. }
  2316. .synchronization {
  2317. position: absolute;
  2318. top: 10px;
  2319. right: 10px;
  2320. .OKRSYNC {
  2321. padding: 10px 15px;
  2322. }
  2323. }
  2324. .okrBody {
  2325. background: rgb(247, 247, 247);
  2326. border-radius: 30px 30px 0 0;
  2327. height: 93%;
  2328. display: flex;
  2329. flex-wrap: wrap;
  2330. color: #000;
  2331. .okrBox {
  2332. width: 49.5%;
  2333. height: 49%;
  2334. margin-right: 1%;
  2335. background: #fff;
  2336. box-sizing: border-box;
  2337. // overflow: auto;
  2338. .okrBox-title {
  2339. text-align: left;
  2340. @media only screen and (min-width: 1315px) {
  2341. .top-title {
  2342. font-size: 16px;
  2343. margin: 8px 0;
  2344. padding: 0 20px;
  2345. // text-align: left;
  2346. display: flex;
  2347. justify-content: space-between;
  2348. }
  2349. .right-time{
  2350. margin-top: 10px;
  2351. }
  2352. }
  2353. @media only screen and (max-width: 1314px) {
  2354. .top-title {
  2355. font-size: 16px;
  2356. margin: 8px 0;
  2357. padding: 0 20px;
  2358. // text-align: left;
  2359. display: flex;
  2360. justify-content: space-between;
  2361. flex-direction: column;
  2362. }
  2363. .right-time{
  2364. margin-top: 10px;
  2365. }
  2366. }
  2367. .createTask {
  2368. font-size: 12px;
  2369. margin: 5px 0;
  2370. padding: 0 20px;
  2371. text-align: left;
  2372. }
  2373. }
  2374. .okrbox-list {
  2375. width: 100%;
  2376. overflow: auto;
  2377. max-height: 80%;
  2378. // margin-top: 10px;
  2379. text-align: left;
  2380. font-size: 14px;
  2381. color: #333;
  2382. box-sizing: border-box;
  2383. ul {
  2384. width: 100%;
  2385. height: 100%;
  2386. overflow: auto;
  2387. }
  2388. li {
  2389. width: 100%;
  2390. height: 41px;
  2391. padding: 8px 15px 8px;
  2392. line-height: 20px;
  2393. border-bottom: 1px solid rgb(240, 242, 245);
  2394. box-sizing: border-box;
  2395. cursor: pointer;
  2396. position: relative;
  2397. .list-opt {
  2398. display: none;
  2399. width: 50%;
  2400. position: absolute;
  2401. right: 10px;
  2402. top: 5px;
  2403. // display: flex;
  2404. justify-content: flex-end;
  2405. align-items: center;
  2406. }
  2407. // .taskprogress{
  2408. // width:10px;
  2409. // height: 10px;
  2410. // }
  2411. .content {
  2412. display: inline-block;
  2413. width: 100%;
  2414. }
  2415. .taskGrade {
  2416. display: inline-block;
  2417. width: 25px;
  2418. height: 25px;
  2419. border-radius: 50%;
  2420. text-align: center;
  2421. box-sizing: border-box;
  2422. // background-color: turquoise;
  2423. margin-right: 10px;
  2424. }
  2425. .priorityIMg {
  2426. width: 25px;
  2427. height: 25px;
  2428. }
  2429. .taskTitle {
  2430. display: inline-block;
  2431. width: 70%;
  2432. overflow: hidden;
  2433. text-overflow: ellipsis;
  2434. white-space: nowrap;
  2435. height: 25px;
  2436. line-height: 25px;
  2437. .remindSpan {
  2438. color: #2e9cff;
  2439. display: inline-block;
  2440. margin-right: 3px;
  2441. cursor: pointer;
  2442. }
  2443. }
  2444. }
  2445. li:hover .list-opt {
  2446. display: flex;
  2447. }
  2448. li:hover .continuation-btn {
  2449. right:78px
  2450. }
  2451. /deep/ .continuation-btn .el-tag--dark{
  2452. border: 0px;
  2453. }
  2454. }
  2455. .status-list {
  2456. overflow: auto;
  2457. max-height: 80%;
  2458. // margin-top: 10px;
  2459. text-align: left;
  2460. font-size: 14px;
  2461. color: #333;
  2462. box-sizing: border-box;
  2463. // align-content: center;
  2464. .status {
  2465. display: block;
  2466. // width: 20%;
  2467. width: auto;
  2468. min-width: 120px;
  2469. height: 60px;
  2470. // padding: 10px 10px;
  2471. box-sizing: border-box;
  2472. justify-content: center;
  2473. display: flex;
  2474. // margin-bottom: 10px;
  2475. .itemStatus {
  2476. display: inline-block;
  2477. height: 40px;
  2478. line-height: 40px;
  2479. padding: 0 15px;
  2480. border-radius: 10px;
  2481. margin: 0 auto;
  2482. cursor: pointer;
  2483. }
  2484. }
  2485. }
  2486. .objectList {
  2487. text-align: left;
  2488. overflow: auto;
  2489. height: 75%;
  2490. max-height: 85%;
  2491. .OBox {
  2492. background: #fafbfc;
  2493. height: 62px;
  2494. margin-bottom: 8px;
  2495. line-height: 62px;
  2496. padding: 5px 20px;
  2497. // padding-bottom: 10px;
  2498. position: relative;
  2499. span {
  2500. display: inline-block;
  2501. }
  2502. .O-tip {
  2503. width: 36px;
  2504. height: 20px;
  2505. background: #50e3c2;
  2506. border-radius: 22px;
  2507. color: #fff;
  2508. margin-right: 8px;
  2509. font-size: 12px;
  2510. display: inline-block;
  2511. line-height: 20px;
  2512. text-align: center;
  2513. position: absolute;
  2514. top: 25px;
  2515. }
  2516. .O-content {
  2517. width: 60%;
  2518. white-space: nowrap;
  2519. overflow: hidden;
  2520. text-overflow: ellipsis;
  2521. position: absolute;
  2522. top: 5px;
  2523. left: 70px;
  2524. cursor: pointer;
  2525. .edit {
  2526. margin-left: 5px;
  2527. display: none;
  2528. }
  2529. }
  2530. .O-content:hover .edit {
  2531. display: inline-block;
  2532. }
  2533. .O-opt {
  2534. position: absolute;
  2535. top: 5px;
  2536. right: 20px;
  2537. }
  2538. }
  2539. .KRBox {
  2540. background: #fafbfc;
  2541. font-size: 14px;
  2542. ul {
  2543. li {
  2544. width: 100%;
  2545. height: 40px;
  2546. padding: 5px 20px;
  2547. position: relative;
  2548. box-sizing: border-box;
  2549. line-height: 40px;
  2550. position: relative;
  2551. .KR-tip {
  2552. height: 20px;
  2553. line-height: 20px;
  2554. font-size: 12px;
  2555. color: rgb(46, 156, 255);
  2556. margin-right: 10px;
  2557. background: rgba(46, 156, 255, 0.1);
  2558. border-radius: 11.5px;
  2559. padding: 3px 9px;
  2560. position: absolute;
  2561. top: 8px;
  2562. }
  2563. .KR-content {
  2564. width: 60%;
  2565. display: inline-block;
  2566. overflow: hidden;
  2567. white-space: nowrap;
  2568. text-overflow: ellipsis;
  2569. height: 100%;
  2570. line-height: 30px;
  2571. padding-left: 40px;
  2572. .remindSpan {
  2573. color: #2e9cff;
  2574. display: inline-block;
  2575. margin-right: 3px;
  2576. cursor: pointer;
  2577. }
  2578. }
  2579. .KR-opt {
  2580. position: absolute;
  2581. right: 20px;
  2582. top: 5px;
  2583. display: flex;
  2584. // display: none;
  2585. width: 30%;
  2586. position: absolute;
  2587. justify-content: flex-end;
  2588. align-items: center;
  2589. }
  2590. }
  2591. li:hover .list-opt {
  2592. display: flex;
  2593. }
  2594. li:hover .continuation-btn {
  2595. right:78px
  2596. }
  2597. }
  2598. }
  2599. }
  2600. }
  2601. .first {
  2602. border-radius: 30px 0 0 0;
  2603. margin-bottom: 0.5%;
  2604. .okrBox-title {
  2605. border-bottom: 1px solid rgb(240, 242, 245);
  2606. }
  2607. }
  2608. .second {
  2609. margin-right: 0;
  2610. border-radius: 0 30px 0 0;
  2611. margin-bottom: 0.5%;
  2612. }
  2613. .third {
  2614. .okrBox-title {
  2615. border-bottom: 1px solid rgb(240, 242, 245);
  2616. }
  2617. }
  2618. .four {
  2619. margin-right: 0;
  2620. }
  2621. }
  2622. .noOkr {
  2623. display: block;
  2624. // flex-direction: column;
  2625. text-align: center;
  2626. padding: 50px 0 0;
  2627. box-sizing: border-box;
  2628. background-color: #fafbfc;
  2629. .noObject {
  2630. font-family: PingFangSC-Regular;
  2631. font-size: 20px;
  2632. color: #bfc3c7;
  2633. margin-bottom: 10px;
  2634. }
  2635. .kongbaiBackground {
  2636. width: 766px;
  2637. height: 443px;
  2638. margin: auto;
  2639. overflow: hidden;
  2640. background: url(../assets/image/shili.png);
  2641. background-size: 766px 443px;
  2642. .shili {
  2643. width: 100%;
  2644. }
  2645. }
  2646. }
  2647. .taskBody {
  2648. padding: 0 20px;
  2649. .task-item {
  2650. display: flex;
  2651. margin-bottom: 15px;
  2652. vertical-align: middle;
  2653. .item-name {
  2654. font-size: 12px;
  2655. color: #cc9966;
  2656. flex-shrink: 0;
  2657. display: block;
  2658. margin-right: 15px;
  2659. width: 60px;
  2660. line-height: 32px;
  2661. }
  2662. }
  2663. }
  2664. .targetBody {
  2665. .targetO {
  2666. display: flex;
  2667. -webkit-box-align: center;
  2668. align-items: center;
  2669. flex-wrap: wrap;
  2670. align-self: normal;
  2671. padding: 10px;
  2672. border-radius: 5px;
  2673. background: #cc9966;
  2674. margin-bottom: 30px;
  2675. font-size: 18px;
  2676. span {
  2677. display: inline-block;
  2678. font-size: 18px;
  2679. }
  2680. .target-tip {
  2681. width: 35px;
  2682. height: 35px;
  2683. text-align: center;
  2684. line-height: 36px;
  2685. background-color: #9acb9a;
  2686. color: rgb(255, 255, 255);
  2687. font-size: 12px;
  2688. border-radius: 50%;
  2689. font-size: 18px;
  2690. }
  2691. .target-input {
  2692. width: 90%;
  2693. font-size: 18px;
  2694. }
  2695. }
  2696. .addKR {
  2697. padding: 0 80px;
  2698. box-sizing: border-box;
  2699. }
  2700. .targetKR {
  2701. width: 100%;
  2702. // display: flex;
  2703. flex-wrap: wrap;
  2704. -webkit-box-align: center;
  2705. align-items: center;
  2706. align-self: normal;
  2707. // padding: 10px;
  2708. border-radius: 5px;
  2709. // background: rgb(29, 134, 240);
  2710. margin-bottom: 10px;
  2711. .tip {
  2712. width: 10%;
  2713. text-align: center;
  2714. // background-color: tomato;
  2715. font-family: sans-serif;
  2716. text-shadow: rgb(14, 17, 20) 0px 0px 0px;
  2717. .kArEgh {
  2718. display: inline-block;
  2719. width: 6px;
  2720. height: 6px;
  2721. margin-right: 5px;
  2722. position: relative;
  2723. top: -3px;
  2724. background: rgb(29, 134, 240);
  2725. }
  2726. }
  2727. .info {
  2728. width: 90%;
  2729. font-size: 16px;
  2730. font-weight: 500;
  2731. color: rgb(131, 137, 143);
  2732. padding: 6px 0px 6px 0px;
  2733. border-radius: 5px;
  2734. background: rgb(245, 246, 250);
  2735. }
  2736. .progress {
  2737. margin-top: 15px;
  2738. margin-bottom: 10px;
  2739. display: flex;
  2740. padding-left: 10%;
  2741. box-sizing: border-box;
  2742. width: 100%;
  2743. font-size: 12px;
  2744. position: relative;
  2745. span {
  2746. display: inline-block;
  2747. line-height: 40px;
  2748. }
  2749. .krtitle {
  2750. color: #cc9966;
  2751. width: 90px;
  2752. flex-shrink: 0;
  2753. // margin-right: 15px;
  2754. }
  2755. .progressBar {
  2756. width: 70%;
  2757. display: flex;
  2758. }
  2759. .creatOxia {
  2760. width: 85%;
  2761. }
  2762. .delete {
  2763. // width: 25px;
  2764. // height: 25px;
  2765. // font-size: 12px;
  2766. position: absolute;
  2767. right: 5px;
  2768. top: 5px;
  2769. }
  2770. }
  2771. .task-item {
  2772. display: flex;
  2773. width: 100%;
  2774. margin-bottom: 20px;
  2775. padding-left: 10%;
  2776. vertical-align: middle;
  2777. .item-name {
  2778. font-size: 12px;
  2779. color: #cc9966;
  2780. flex-shrink: 0;
  2781. display: block;
  2782. width: 90px;
  2783. line-height: 32px;
  2784. }
  2785. }
  2786. }
  2787. }
  2788. .editKRBody {
  2789. .targetO {
  2790. background-color: #cc9966;
  2791. .target-tip {
  2792. background-color: #99cc99;
  2793. }
  2794. .target-input {
  2795. color: #fff;
  2796. }
  2797. }
  2798. .targetKR .progress {
  2799. .progressBar {
  2800. width: 90%;
  2801. display: flex;
  2802. .krtitle {
  2803. line-height: 40px;
  2804. display: inline-block;
  2805. width: 35%;
  2806. }
  2807. }
  2808. }
  2809. .currentO {
  2810. color: #fff;
  2811. font-size: 16px;
  2812. line-height: 40px;
  2813. padding-left: 15px;
  2814. }
  2815. }
  2816. .openKRBox {
  2817. .targetKR {
  2818. .progress {
  2819. margin-top: 15px;
  2820. margin-bottom: 10px;
  2821. display: flex;
  2822. padding-left: 10%;
  2823. box-sizing: border-box;
  2824. width: 100%;
  2825. font-size: 12px;
  2826. position: relative;
  2827. span {
  2828. display: inline-block;
  2829. line-height: 40px;
  2830. }
  2831. .krtitle {
  2832. color: #cc9966;
  2833. width: 90px;
  2834. flex-shrink: 0;
  2835. margin-right: 15px;
  2836. }
  2837. .progressBar {
  2838. // width: 70%;
  2839. display: flex;
  2840. }
  2841. .creatOxia {
  2842. width: 85%;
  2843. }
  2844. .delete {
  2845. // width: 25px;
  2846. // height: 25px;
  2847. // font-size: 12px;
  2848. position: absolute;
  2849. right: 5px;
  2850. top: 5px;
  2851. }
  2852. }
  2853. .task-item {
  2854. display: flex;
  2855. width: 100%;
  2856. margin-bottom: 20px;
  2857. padding-left: 10%;
  2858. vertical-align: middle;
  2859. .item-name {
  2860. font-size: 12px;
  2861. color: #cc9966;
  2862. flex-shrink: 0;
  2863. display: block;
  2864. width: 90px;
  2865. line-height: 32px;
  2866. }
  2867. }
  2868. }
  2869. }
  2870. }
  2871. </style>
  2872. <style lang="less">
  2873. .el-select-dropdown__item {
  2874. font-size: 14px;
  2875. padding: 0 20px;
  2876. position: relative;
  2877. white-space: nowrap;
  2878. overflow: hidden;
  2879. text-overflow: ellipsis;
  2880. color: #606266;
  2881. height: 34px;
  2882. line-height: 34px;
  2883. box-sizing: border-box;
  2884. cursor: pointer;
  2885. text-align: center;
  2886. }
  2887. .el-select-dropdown {
  2888. position: absolute;
  2889. top: 88px;
  2890. // left: 1082px !important;
  2891. }
  2892. .okrPage {
  2893. .el-checkbox,
  2894. .el-checkbox__label {
  2895. width: 97% !important;
  2896. }
  2897. .el-checkbox {
  2898. white-space: initial;
  2899. display: flex;
  2900. align-items: center;
  2901. }
  2902. .title {
  2903. .el-input__inner {
  2904. -webkit-appearance: none;
  2905. background-color: transparent;
  2906. background-image: none;
  2907. border-radius: 4px;
  2908. border: none;
  2909. box-sizing: border-box;
  2910. color: #fff;
  2911. display: inline-block;
  2912. font-size: 16px;
  2913. height: 40px;
  2914. line-height: 40px;
  2915. outline: 0;
  2916. padding: 0 15px;
  2917. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  2918. width: 110px;
  2919. // text-align: center;
  2920. }
  2921. .el-select .el-input .el-select__caret {
  2922. color: #fff;
  2923. font-size: 14px;
  2924. transition: transform 0.3s;
  2925. transform: rotateZ(180deg);
  2926. cursor: pointer;
  2927. }
  2928. }
  2929. }
  2930. .openTargetBox {
  2931. .el-button--text {
  2932. color: #cc9966;
  2933. background: 0 0;
  2934. padding-left: 0;
  2935. padding-right: 0;
  2936. }
  2937. .el-button--primary {
  2938. color: #fff;
  2939. background-color: #cc9966;
  2940. border-color: #cc9966;
  2941. }
  2942. .el-slider__button {
  2943. width: 16px;
  2944. height: 16px;
  2945. border: 2px solid #cc9966;
  2946. background-color: #fff;
  2947. border-radius: 50%;
  2948. transition: 0.2s;
  2949. -webkit-user-select: none;
  2950. -moz-user-select: none;
  2951. -ms-user-select: none;
  2952. user-select: none;
  2953. }
  2954. .el-slider__bar {
  2955. height: 6px;
  2956. background-color: #cc9966;
  2957. border-top-left-radius: 3px;
  2958. border-bottom-left-radius: 3px;
  2959. position: absolute;
  2960. }
  2961. .el-slider__button-wrapper {
  2962. z-index: 2;
  2963. }
  2964. .el-radio {
  2965. color: #606266;
  2966. cursor: pointer;
  2967. margin-right: 20px;
  2968. min-width: 75px;
  2969. }
  2970. .el-radio.is-bordered + .el-radio.is-bordered {
  2971. margin-left: 0px;
  2972. }
  2973. .el-radio.is-bordered.is-checked {
  2974. border-color: #cc9966;
  2975. }
  2976. .el-radio__input.is-checked .el-radio__inner {
  2977. border-color: #cc9966;
  2978. background: #cc9966;
  2979. }
  2980. .el-radio__input.is-checked + .el-radio__label {
  2981. color: #cc9966;
  2982. }
  2983. .el-input.is-active .el-input__inner,
  2984. .el-input__inner:focus {
  2985. border-color: #cc9966;
  2986. outline: 0;
  2987. }
  2988. .el-textarea__inner:focus {
  2989. outline: 0;
  2990. border-color: #cc9966;
  2991. }
  2992. .number__increase:hover {
  2993. color: #cc9966;
  2994. }
  2995. .el-input-number__decrease:hover,
  2996. .el-input-number__increase:hover {
  2997. color: #cc9966;
  2998. }
  2999. }
  3000. .el-radio {
  3001. color: #606266;
  3002. cursor: pointer;
  3003. margin-right: 30px;
  3004. min-width: 75px;
  3005. }
  3006. .vue-treeselect__multi-value-item {
  3007. cursor: pointer;
  3008. display: inline-table;
  3009. background: #cc9966;
  3010. padding: 2px 0;
  3011. border: 1px solid transparent;
  3012. border-radius: 2px;
  3013. color: white;
  3014. font-size: 12px;
  3015. vertical-align: top;
  3016. }
  3017. .vue-treeselect__value-remove {
  3018. color: #fff;
  3019. padding-left: 5px;
  3020. border-left: 1px solid #fff;
  3021. line-height: 0;
  3022. }
  3023. .taskBody {
  3024. .el-radio.is-bordered.is-checked {
  3025. border-color: #cc9966;
  3026. }
  3027. .el-radio__input.is-checked .el-radio__inner {
  3028. border-color: #cc9966;
  3029. background: #cc9966;
  3030. }
  3031. .el-radio__input.is-checked + .el-radio__label {
  3032. color: #cc9966;
  3033. }
  3034. .el-input.is-active .el-input__inner,
  3035. .el-input__inner:focus {
  3036. border-color: #cc9966;
  3037. outline: 0;
  3038. }
  3039. .el-textarea__inner:focus {
  3040. outline: 0;
  3041. border-color: #cc9966;
  3042. }
  3043. .number__increase:hover {
  3044. color: #cc9966;
  3045. }
  3046. .el-input-number__decrease:hover,
  3047. .el-input-number__increase:hover {
  3048. color: #cc9966;
  3049. }
  3050. .el-slider__input:hover,
  3051. .el-input-number:hover,
  3052. .el-input-number--small:hover {
  3053. border-color: #cc9966;
  3054. outline: 0;
  3055. }
  3056. .el-slider__button {
  3057. width: 16px;
  3058. height: 16px;
  3059. border: 2px solid #cc9966;
  3060. background-color: #fff;
  3061. border-radius: 50%;
  3062. transition: 0.2s;
  3063. -webkit-user-select: none;
  3064. -moz-user-select: none;
  3065. -ms-user-select: none;
  3066. user-select: none;
  3067. }
  3068. .el-slider__bar {
  3069. height: 6px;
  3070. background-color: #cc9966;
  3071. border-top-left-radius: 3px;
  3072. border-bottom-left-radius: 3px;
  3073. position: absolute;
  3074. }
  3075. }
  3076. .StatusBody {
  3077. .second.el-radio.is-bordered.is-checked {
  3078. border-color: #ffcc33;
  3079. }
  3080. .second .el-radio__input.is-checked .el-radio__inner {
  3081. border-color: #ffcc33;
  3082. background: #ffcc33;
  3083. }
  3084. .second .el-radio__input.is-checked + .el-radio__label {
  3085. color: #ffcc33;
  3086. }
  3087. .first.el-radio.is-bordered.is-checked {
  3088. border-color: #cc3300;
  3089. }
  3090. .first .el-radio__input.is-checked .el-radio__inner {
  3091. border-color: #cc3300;
  3092. background: #cc3300;
  3093. }
  3094. .first .el-radio__input.is-checked + .el-radio__label {
  3095. color: #cc3300;
  3096. }
  3097. .third.el-radio.is-bordered.is-checked {
  3098. border-color: #99cc99;
  3099. }
  3100. .third .el-radio__input.is-checked .el-radio__inner {
  3101. border-color: #99cc99;
  3102. background: #99cc99;
  3103. }
  3104. .third .el-radio__input.is-checked + .el-radio__label {
  3105. color: #99cc99;
  3106. }
  3107. }
  3108. .targetBody {
  3109. .el-input__inner {
  3110. border: none;
  3111. background-color: transparent;
  3112. color: #fff;
  3113. }
  3114. .el-input .el-input__count .el-input__count-inner {
  3115. background-color: transparent;
  3116. line-height: initial;
  3117. display: inline-block;
  3118. padding: 0 5px;
  3119. color: #fff;
  3120. }
  3121. .targetKR {
  3122. .el-input__inner {
  3123. border: none;
  3124. background-color: transparent;
  3125. color: rgb(131, 137, 143);
  3126. }
  3127. .el-input .el-input__count .el-input__count-inner {
  3128. background-color: transparent;
  3129. line-height: initial;
  3130. display: inline-block;
  3131. padding: 0 5px;
  3132. color: rgb(131, 137, 143);
  3133. }
  3134. .el-textarea__inner {
  3135. border: none;
  3136. background-color: transparent;
  3137. color: rgb(131, 137, 143);
  3138. }
  3139. .el-textarea .el-textarea__count .el-textarea__count-inner {
  3140. background-color: transparent;
  3141. line-height: initial;
  3142. display: inline-block;
  3143. padding: 0 5px;
  3144. color: rgb(131, 137, 143);
  3145. }
  3146. .el-textarea .el-input__count {
  3147. color: #909399;
  3148. /* background: #FFF; */
  3149. position: absolute;
  3150. font-size: 12px;
  3151. bottom: 5px;
  3152. right: 10px;
  3153. }
  3154. .progress {
  3155. .el-input-number__decrease {
  3156. border-right: none;
  3157. }
  3158. .el-input-number__increase {
  3159. border-left: none;
  3160. }
  3161. .el-input-number__decrease,
  3162. .el-input-number__increase {
  3163. background: none;
  3164. }
  3165. }
  3166. .el-input--suffix .el-input__inner {
  3167. padding-right: 66px;
  3168. }
  3169. }
  3170. .el-input--suffix .el-input__inner {
  3171. padding-right: 50px;
  3172. }
  3173. }
  3174. .editKRBody {
  3175. .progress {
  3176. .el-input-number__decrease {
  3177. border-right: none;
  3178. }
  3179. .el-input-number__increase {
  3180. border-left: none;
  3181. }
  3182. .el-input-number__decrease,
  3183. .el-input-number__increase {
  3184. background: none;
  3185. }
  3186. .el-input__inner {
  3187. border: none;
  3188. background-color: transparent;
  3189. color: rgb(131, 137, 143);
  3190. }
  3191. .el-input .el-input__count .el-input__count-inner {
  3192. background-color: transparent;
  3193. line-height: initial;
  3194. display: inline-block;
  3195. padding: 0 5px;
  3196. // color:rgb(131, 137, 143);
  3197. }
  3198. }
  3199. .el-input__inner {
  3200. border: none;
  3201. background-color: transparent;
  3202. // color: rgb(131, 137, 143);
  3203. }
  3204. .el-input .el-input__count .el-input__count-inner {
  3205. background-color: transparent;
  3206. line-height: initial;
  3207. display: inline-block;
  3208. padding: 0 5px;
  3209. // color:rgb(131, 137, 143);
  3210. }
  3211. .el-input_icon .el-iocn-circle-close .el-input_clear {
  3212. color: #fff;
  3213. }
  3214. }
  3215. </style>