evaluationDeptStartFrom.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. <template>
  2. <div class="deptstartFrom">
  3. <el-dialog title="部门业绩指标计划" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false">
  4. <div class="startDetail">
  5. <p class="starttitleSty">单据信息:</p>
  6. <el-row class="danjuMsg">
  7. <el-col :span="6">
  8. <div class="danjuMsg_data">
  9. <span class="data_tit">业务编号:</span>
  10. <span>{{receiptMsg.code}}</span>
  11. </div>
  12. <div class="danjuMsg_data">
  13. <span class="data_tit">创建日期:</span>
  14. <span>{{receiptMsg.createDate}}</span>
  15. </div>
  16. </el-col>
  17. <el-col :span="6">
  18. <div class="danjuMsg_data">
  19. <span class="data_tit">业务简述:</span>
  20. <span>{{receiptMsg.des}}</span>
  21. </div>
  22. <div class="danjuMsg_data">
  23. <span class="data_tit">考评周期:</span>
  24. <span>{{receiptMsg.type}}</span>
  25. </div>
  26. </el-col>
  27. <el-col :span="6">
  28. <div class="danjuMsg_data">
  29. <span class="data_tit">流程状态:</span>
  30. <span>{{receiptMsg.stage}}</span>
  31. </div>
  32. <div class="danjuMsg_data">
  33. <span class="data_tit">年度:</span>
  34. <span>{{receiptMsg.year}}</span>
  35. </div>
  36. </el-col>
  37. <el-col :span="6">
  38. <div class="danjuMsg_data">
  39. <span class="data_tit">创建人:</span>
  40. <span>{{receiptMsg.createName}}</span>
  41. </div>
  42. <div class="danjuMsg_data">
  43. <span class="data_tit">单据状态:</span>
  44. <span>{{receiptMsg.recStage}}</span>
  45. </div>
  46. </el-col>
  47. </el-row>
  48. <div class="btnASeach">
  49. <div class="detaTableBtns">
  50. <div class="tableBtn add" @click="addTableDetail">
  51. <img :src="addIcon" alt="">
  52. <span>新增</span>
  53. </div>
  54. <div class="tableBtn save" @click="saveDetail">
  55. <img :src="saveIcon" alt="">
  56. <span>保存</span>
  57. </div>
  58. <div class="tableBtn import" @click="handleImport">
  59. <img :src="importIcon" alt="">
  60. <span>导入</span>
  61. </div>
  62. <div class="tableBtn export" @click="handleExport">
  63. <img :src="exportIcon" alt="">
  64. <span>导出</span>
  65. </div>
  66. </div>
  67. </div>
  68. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  69. <el-tab-pane label="考评指标项内容" name="first">
  70. <el-table :data="quantifiedList.slice((pageLeft.currentPage-1)*pageLeft.pagesize, pageLeft.currentPage*pageLeft.pagesize)"
  71. style="width: 100%" @select="rowClick" @select-all="rowClick">
  72. <el-table-column label="序号" type="index" width="80" />
  73. <el-table-column label="部门名称" prop="deptName" width="300">
  74. <template #default="scope">
  75. <el-select v-model="scope.row.deptName" placeholder="请选择所属部门" v-if="scope.row.showInput">
  76. <el-option
  77. v-for="item in departData"
  78. :key="item.id"
  79. :label="item.keyName"
  80. :value="item.id">
  81. </el-option>
  82. </el-select>
  83. <span v-else>{{scope.row.deptName}}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="排序" width="100" >
  87. <template #default="scope">
  88. <el-input v-model="scope.row.serialNumber"
  89. placeholder="请输入排序"></el-input>
  90. </template>
  91. </el-table-column>
  92. <el-table-column label="指标名称" >
  93. <template #default="scope">
  94. <el-input v-model="scope.row.targetName"
  95. placeholder="请输入指标名称"></el-input>
  96. </template>
  97. </el-table-column>
  98. <el-table-column label="目标值" width="500">
  99. <template #default="scope">
  100. <el-input v-model="scope.row.targetValue"
  101. type="textarea" :rows="2" placeholder="请输入目标值"></el-input>
  102. </template>
  103. </el-table-column>
  104. <el-table-column label="基础分" width="150">
  105. <template #default="scope">
  106. <el-input-number v-model="scope.row.baseScore" :precision="2" :step="0.1" :min="0" />
  107. </template>
  108. </el-table-column>
  109. <el-table-column label="评价标准" >
  110. <template #default="scope">
  111. <el-input v-model="scope.row.evaluationCriteria"
  112. placeholder="请输入评价标准"></el-input>
  113. </template>
  114. </el-table-column>
  115. <el-table-column label="审核状态" width="200" >
  116. <template #default="scope">
  117. <el-select v-model="scope.row.auditStatus" placeholder="请选择审核状态">
  118. <el-option
  119. v-for="item in statusData"
  120. :key="item.id"
  121. :label="item.name"
  122. :value="item.id">
  123. </el-option>
  124. </el-select>
  125. </template>
  126. </el-table-column>
  127. </el-table>
  128. <el-pagination
  129. @current-change="handleCurrentChangeLeft"
  130. :current-page="pageLeft.currentPage"
  131. :page-size="pageLeft.pagesize"
  132. layout="total, prev, pager, next, jumper"
  133. :total="pageLeft.total">
  134. </el-pagination>
  135. </el-tab-pane>
  136. </el-tabs>
  137. </div>
  138. <template #footer>
  139. <span class="dialog-footer">
  140. <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
  141. </span>
  142. </template>
  143. </el-dialog>
  144. <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
  145. </div>
  146. </template>
  147. <script>
  148. import importDailog from '../importPage/importDailog.vue'
  149. import {apiGetevaluationdeptplanDetail,apiGetevaluationdeptplanUpdate, apiPostIsdoAction} from '../../api/api'
  150. import ExcelJS from 'exceljs'
  151. import fileSave from 'file-saver'
  152. import addIcon from '../../assets/btnIcon/add.png'
  153. import saveIcon from '../../assets/btnIcon/save.png'
  154. import editIcon from '../../assets/btnIcon/edit.png'
  155. import deleteIcon from '../../assets/btnIcon/delete.png'
  156. import exportIcon from '../../assets/btnIcon/export.png'
  157. import importIcon from '../../assets/btnIcon/import.png'
  158. export default {
  159. components: {
  160. importDailog
  161. },
  162. data() {
  163. return {
  164. dialogVisible: false,
  165. activeName: 'first',
  166. quantifiedList: [],
  167. changeDateSelect: [],
  168. receiptMsg: {
  169. code: '',
  170. des: '',
  171. stage: '',
  172. createName: '',
  173. createDate: '',
  174. type: '',
  175. year: '',
  176. recStage: ''
  177. },
  178. addIcon: addIcon,
  179. saveIcon: saveIcon,
  180. editIcon: editIcon,
  181. deleteIcon: deleteIcon,
  182. exportIcon: exportIcon,
  183. importIcon: importIcon,
  184. rowMsg: {},
  185. orgruleData: [],
  186. indicItemoptions: [],
  187. sectionNameArr: [],
  188. deptNameArr: [],
  189. statusData: [],
  190. pageLeft:{
  191. pagesize: 15,
  192. currentPage: 1,
  193. total: 0
  194. },
  195. pageRight:{
  196. pagesize: 15,
  197. currentPage: 1,
  198. total: 0
  199. },
  200. departData: []
  201. }
  202. },
  203. created() {
  204. this.statusData = [
  205. {
  206. name: '已完成',
  207. id: '1'
  208. },
  209. {
  210. name: '待审核',
  211. id: '0'
  212. },
  213. {
  214. name: '未开始',
  215. id: '-1'
  216. }
  217. ]
  218. },
  219. methods: {
  220. init(row, deptData) {
  221. this.dialogVisible = true
  222. this.activeName = 'first'
  223. this.receiptMsg = {
  224. code: row.responsibilityCode,
  225. des: row.des,
  226. stage: row.stage,
  227. createName: row.createName,
  228. createDate: row.createTime,
  229. type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
  230. year: row.appraisalYear,
  231. recStage: '有效'
  232. }
  233. this.getDetails(row.id)
  234. this.getshowDepartDataFn(row, deptData)
  235. this.rowMsg = row
  236. },
  237. // 整合部门数据
  238. getshowDepartDataFn(row, deptData) {
  239. let deptIdArr = row.deptId.split(',')
  240. deptIdArr.forEach(it =>{
  241. deptData.forEach(itv =>{
  242. if (itv.id === it) {
  243. this.departData.push(itv)
  244. }
  245. })
  246. })
  247. },
  248. handleClick() {
  249. this.changeDateSelect = []
  250. },
  251. rowClick(selection, row) {
  252. this.changeDateSelect = selection
  253. },
  254. handleCurrentChangeLeft(val) {
  255. this.pageLeft.currentPage = val
  256. },
  257. handleCurrentChangeRight(val) {
  258. this.pageRight.currentPage = val
  259. },
  260. //获取详情
  261. getDetails(id) {
  262. let that = this
  263. that.quantifiedList = []
  264. apiGetevaluationdeptplanDetail(id).then(datas =>{
  265. if (datas && datas.data) {
  266. that.quantifiedList = datas.data
  267. that.pageLeft.total = datas.data.length
  268. }
  269. })
  270. },
  271. addTableDetail() {
  272. let obj = {
  273. showInput: true,
  274. businessPlanId: this.rowMsg.id,
  275. serialNumber: '1',
  276. deptName: '',
  277. targetName: '',
  278. targetValue: '',
  279. baseScore: 0,
  280. evaluationCriteria: '',
  281. auditStatus: '-1'
  282. }
  283. this.quantifiedList.unshift(obj)
  284. },
  285. saveDetail() {
  286. let that = this
  287. let params = []
  288. that.quantifiedList.forEach(item =>{
  289. let obj = {
  290. targetName: item.targetName,
  291. targetValue: item.targetValue,
  292. baseScore: item.baseScore.toString(),
  293. evaluationCriteria: item.evaluationCriteria,
  294. auditStatus: item.auditStatus,
  295. serialNumber: item.serialNumber
  296. }
  297. if (item.showInput) {
  298. obj.deptId = item.deptName
  299. obj.businessPlanId = item.businessPlanId
  300. } else {
  301. obj.id = item.id
  302. }
  303. params.push(obj)
  304. })
  305. apiGetevaluationdeptplanUpdate(params).then(datas =>{
  306. if (datas) {
  307. if (datas.success) {
  308. that.$message({
  309. message: '保存成功',
  310. type: 'success'
  311. });
  312. that.getDetails(that.rowMsg.id)
  313. } else {
  314. that.$message({
  315. message: datas.data,
  316. type: 'error'
  317. })
  318. }
  319. }
  320. })
  321. },
  322. handleImport() {
  323. this.$refs.importPage.upload.title = "本部部门业绩指标计划信息导入"
  324. this.$refs.importPage.upload.open = true
  325. this.$refs.importPage.upload.url = '/evaluation-dept-plan/import'
  326. },
  327. successImport(val) {
  328. this.getDetails(this.rowMsg.id)
  329. },
  330. handleExport() {
  331. let data = this.quantifiedList //接口返回数据
  332. const workbook = new ExcelJS.Workbook()
  333. const worksheet = workbook.addWorksheet('Sheet1')
  334. //根据数据自己调整
  335. let colums = []
  336. colums = [
  337. { header: 'ID', key: 'id', width: 26 },
  338. { header: '业务ID', key: 'businessPlanId', width: 26 },
  339. { header: '部门ID', key: 'deptId', width: 26 },
  340. { header: '部门名称', key: 'deptName', width: 26 },
  341. { header: '部门编码', key: 'deptCode', width: 26 },
  342. { header: '排序', key: 'serialNumber', width: 26 },
  343. { header: '指标名称', key: 'targetName', width: 18 },
  344. { header: '目标值', key: 'targetValue', width: 18 },
  345. { header: '基础分', key: 'baseScore', width: 18 },
  346. { header: '评价标准', key: 'evaluationCriteria', width: 18 }
  347. ]
  348. worksheet.columns = colums
  349. worksheet.getRow(1).font = {
  350. size: 12,
  351. bold: true
  352. }
  353. worksheet.addRows(data)
  354. workbook.xlsx.writeBuffer().then(buffer => {
  355. //这里为type
  356. const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
  357. fileSave(blob, `本部部门业绩指标计划数据导出.xlsx`)
  358. })
  359. },
  360. }
  361. }
  362. </script>
  363. <style lang="less">
  364. .deptstartFrom{
  365. .el-overlay{
  366. .el-dialog{
  367. // margin-top: 7vh;
  368. .el-dialog__body{
  369. padding: 0 20px !important;
  370. .startDetail{
  371. .starttitleSty{
  372. font-size: 18px;
  373. font-family: Microsoft YaHei;
  374. font-weight: bold;
  375. color: #3B7AD1;
  376. // line-height: 12px;
  377. margin: 20px 0 20px 10px;
  378. }
  379. .danjuMsg{
  380. border: 1px solid #D6DBEA;
  381. padding: 10px 20px;
  382. border-radius: 10px;
  383. margin-bottom: 20px;
  384. .danjuMsg_data{
  385. padding: 5px 0 10px 0;
  386. .data_tit{
  387. margin-right: 10px;
  388. font-weight: bold;
  389. font-size: 14px;
  390. font-family: Microsoft YaHei;
  391. color: #8991B0;
  392. }
  393. .data_tit_wd{
  394. display: inline-block;
  395. width: 90px;
  396. }
  397. .el-form-item--small{
  398. .el-input{
  399. height: 25px;
  400. width: 160px;
  401. }
  402. margin-bottom: 0;
  403. .el-input-number{
  404. height: 25px;
  405. .el-input-number__decrease, .el-input-number__increase{
  406. right: -39px;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. .el-select, .el-input{
  413. width: 100%;
  414. }
  415. .btnASeach{
  416. display: flex;
  417. z-index: 11111;
  418. justify-content: end;
  419. position: relative;
  420. top: 32px;
  421. left: 50vw;
  422. width: 50%;
  423. .detaTableBtns{
  424. display: flex;
  425. width: 300px;
  426. margin-top: 5px;
  427. .tableBtn {
  428. display: flex;
  429. height: 20px;
  430. margin: 0 10px;
  431. img{
  432. margin-right: 5px;
  433. margin-top: 1px;
  434. }
  435. span{
  436. font-size: 14px;
  437. font-family: Microsoft YaHei;
  438. font-weight: 400;
  439. }
  440. }
  441. .add{
  442. cursor: pointer;
  443. span{
  444. color: #3B7AD1;
  445. }
  446. }
  447. .save{
  448. cursor: pointer;
  449. span{
  450. color: #50C14E;
  451. }
  452. }
  453. .edit{
  454. span{
  455. color: #F5A623;
  456. }
  457. }
  458. .delete{
  459. cursor: no-drop;
  460. span{
  461. color: #F65177;
  462. }
  463. }
  464. .import{
  465. cursor: pointer;
  466. span{
  467. color: #ce1e78;
  468. }
  469. }
  470. .export{
  471. cursor: pointer;
  472. span{
  473. color: #2baa8a;
  474. }
  475. }
  476. }
  477. }
  478. .el-tabs{
  479. .el-tabs__header{
  480. .el-tabs__nav{
  481. .el-tabs__item{
  482. font-size: 18px;
  483. font-family: Microsoft YaHei;
  484. font-weight: bold;
  485. margin: 0 10px;
  486. color: #8991B0;
  487. }
  488. .is-active{
  489. font-size: 18px;
  490. font-family: Microsoft YaHei;
  491. font-weight: bold;
  492. color: #3B7AD1;
  493. margin: 0 10px;
  494. }
  495. }
  496. }
  497. .el-table{
  498. margin-bottom: 10px;
  499. .el-table__body-wrapper{
  500. height: 50vh;
  501. }
  502. .el-table__row{
  503. .cell{
  504. .el-input{
  505. height: 24px;
  506. .el-input__inner{
  507. height: 24px;
  508. }
  509. }
  510. }
  511. }
  512. }
  513. }
  514. }
  515. }
  516. .el-dialog__footer{
  517. .dialog-footer{
  518. display: flex;
  519. justify-content: center;
  520. .el-button{
  521. width: 180px !important;
  522. height: 40px !important;
  523. }
  524. }
  525. }
  526. }
  527. }
  528. }
  529. </style>