evaluationAmendmentFrom.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. <template>
  2. <div class="startFrom">
  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="detaTableBtns">
  49. <div class="tableBtn add" @click="addTableDetail">
  50. <img :src="addIcon" alt="">
  51. <span>修订</span>
  52. </div>
  53. <div class="tableBtn save" @click="saveDetail">
  54. <img :src="saveIcon" alt="">
  55. <span>保存</span>
  56. </div>
  57. <div class="tableBtn import" @click="handleImport">
  58. <img :src="importIcon" alt="">
  59. <span>导入</span>
  60. </div>
  61. <div class="tableBtn export" @click="handleExport">
  62. <img :src="exportIcon" alt="">
  63. <span>导出</span>
  64. </div>
  65. </div>
  66. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  67. <el-tab-pane label="考评指标项内容" name="first">
  68. <el-table :data="quantifiedList.slice((pageLeft.currentPage-1)*pageLeft.pagesize, pageLeft.currentPage*pageLeft.pagesize)" style="width: 100%" @select="rowClick" @select-all="rowClick">
  69. <el-table-column type="selection" label="操作" align="center"></el-table-column>
  70. <el-table-column type="index" label="序号" width="80" />
  71. <el-table-column label="单位名称" prop="organizationName" width="300" />
  72. <el-table-column label="指标分类" prop="typeName" />
  73. <el-table-column label="业务阶段" prop="stageName" />
  74. <el-table-column label="业务属性" prop="sectionName" />
  75. <el-table-column label="指标名称" prop="indicatorName" />
  76. <el-table-column label="填报部门" prop="deptName" width="260" />
  77. <el-table-column label="目标值">
  78. <template #default="scope">
  79. <el-input-number v-model="scope.row.quantifiedValue"
  80. :precision="2" :step="0.1" />
  81. </template>
  82. </el-table-column>
  83. <el-table-column label="单位" prop="unit" />
  84. <el-table-column label="审核状态">
  85. <template #default="scope">
  86. <el-select v-model="scope.row.state" placeholder="请选择审核状态">
  87. <el-option
  88. v-for="item in statusData"
  89. :key="item.id"
  90. :label="item.name"
  91. :value="item.id">
  92. </el-option>
  93. </el-select>
  94. </template>
  95. </el-table-column>
  96. </el-table>
  97. <el-pagination
  98. @current-change="handleCurrentChangeLeft"
  99. :current-page="pageLeft.currentPage"
  100. :page-size="pageLeft.pagesize"
  101. layout="total, prev, pager, next, jumper"
  102. :total="pageLeft.total">
  103. </el-pagination>
  104. </el-tab-pane>
  105. <el-tab-pane label="考评评价指标内容" name="second">
  106. <el-table :data="nonQuantifiedList.slice((pageRight.currentPage-1)*pageRight.pagesize, pageRight.currentPage*pageRight.pagesize)" style="width: 100%">
  107. <el-table-column type="index" label="序号" width="80" />
  108. <el-table-column label="单位名称" prop="organizationName" width="300" />
  109. <el-table-column label="指标分类" prop="typeName" />
  110. <el-table-column label="业务阶段" prop="stageName" />
  111. <el-table-column label="业务属性" prop="sectionName" />
  112. <el-table-column label="指标名称" prop="childName" />
  113. <el-table-column label="填报部门" prop="deptName" width="260" />
  114. <el-table-column label="值">
  115. <template #default="scope">
  116. <el-input v-model="scope.row.nonQuantifiedValue" />
  117. </template>
  118. </el-table-column>
  119. <el-table-column label="审核状态">
  120. <template #default="scope">
  121. <el-select v-model="scope.row.state" placeholder="请选择审核状态">
  122. <el-option
  123. v-for="item in statusData"
  124. :key="item.id"
  125. :label="item.name"
  126. :value="item.id">
  127. </el-option>
  128. </el-select>
  129. </template>
  130. </el-table-column>
  131. </el-table>
  132. <el-pagination
  133. @current-change="handleCurrentChangeRight"
  134. :current-page="pageRight.currentPage"
  135. :page-size="pageRight.pagesize"
  136. layout="total, prev, pager, next, jumper"
  137. :total="pageRight.total">
  138. </el-pagination>
  139. </el-tab-pane>
  140. </el-tabs>
  141. </div>
  142. <template #footer>
  143. <span class="dialog-footer">
  144. <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
  145. </span>
  146. </template>
  147. </el-dialog>
  148. <el-dialog title="修订数据" v-model="revisionVisible" width="70vw" custom-class="revisionClass" :close-on-click-modal="false">
  149. <div class="revisionSty">
  150. <el-table :data="revisionData" style="width: 100%" @select="revisionClick" @select-all="revisionClick">
  151. <el-table-column type="selection" label="操作" align="center"></el-table-column>
  152. <el-table-column label="单位名称" prop="organizationName" />
  153. <el-table-column label="指标分类" prop="typeName" />
  154. <el-table-column label="业务阶段" prop="stageName" />
  155. <el-table-column label="业务属性" prop="sectionName" />
  156. <el-table-column label="指标名称" prop="indicatorName" />
  157. <el-table-column label="填报部门" prop="deptName" />
  158. <el-table-column label="目标值" prop="quantifiedValue" v-if="activeName === 'first'" />
  159. <el-table-column label="值" prop="nonquantifiedValue" v-if="activeName !== 'first'" />
  160. <el-table-column label="单位" prop="unit" v-if="activeName === 'first'" />
  161. <el-table-column label="审核状态" prop="state" />
  162. </el-table>
  163. </div>
  164. <template #footer>
  165. <span class="dialog-footer">
  166. <el-button type="primary" @click="revisionOk">确 认</el-button>
  167. </span>
  168. </template>
  169. </el-dialog>
  170. <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
  171. </div>
  172. </template>
  173. <script>
  174. import importDailog from '../importPage/importDailog.vue'
  175. import {apiGetevaluationrevisionDetails,apiPostevaluationrevisionSave, apiPostIsdoAction,
  176. apiGetevaluationrevisionPopUpData} from '../../api/api'
  177. import ExcelJS from 'exceljs'
  178. import fileSave from 'file-saver'
  179. import addIcon from '../../assets/btnIcon/add.png'
  180. import saveIcon from '../../assets/btnIcon/save.png'
  181. import editIcon from '../../assets/btnIcon/edit.png'
  182. import deleteIcon from '../../assets/btnIcon/delete.png'
  183. import exportIcon from '../../assets/btnIcon/export.png'
  184. import importIcon from '../../assets/btnIcon/import.png'
  185. export default {
  186. components: {
  187. importDailog
  188. },
  189. data() {
  190. return {
  191. dialogVisible: false,
  192. revisionVisible: false,
  193. revisionData: [],
  194. activeName: 'first',
  195. quantifiedList: [],
  196. nonQuantifiedList: [],
  197. changeDateSelect: [],
  198. revisioDataSelect: [],
  199. receiptMsg: {
  200. code: '',
  201. des: '',
  202. stage: '',
  203. createName: '',
  204. createDate: '',
  205. type: '',
  206. year: '',
  207. recStage: ''
  208. },
  209. addIcon: addIcon,
  210. saveIcon: saveIcon,
  211. editIcon: editIcon,
  212. deleteIcon: deleteIcon,
  213. exportIcon: exportIcon,
  214. importIcon: importIcon,
  215. rowMsg: {},
  216. indicItemoptions: [],
  217. statusData: [],
  218. pageLeft:{
  219. pagesize: 15,
  220. currentPage: 1,
  221. total: 0
  222. },
  223. pageRight:{
  224. pagesize: 15,
  225. currentPage: 1,
  226. total: 0
  227. },
  228. }
  229. },
  230. created() {
  231. this.statusData = [
  232. {
  233. name: '已完成',
  234. id: '1'
  235. },
  236. {
  237. name: '待审核',
  238. id: '0'
  239. },
  240. {
  241. name: '未开始',
  242. id: '-1'
  243. }
  244. ]
  245. },
  246. methods: {
  247. init(row) {
  248. this.dialogVisible = true
  249. this.activeName = 'first'
  250. this.receiptMsg = {
  251. code: row.responsibilityCode,
  252. des: row.des,
  253. stage: row.stage,
  254. createName: row.createName,
  255. createDate: row.createTime,
  256. type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
  257. year: row.year,
  258. recStage: '有效'
  259. }
  260. this.getDetails(row.deptResponsibilityId)
  261. this.rowMsg = row
  262. },
  263. handleClick() {
  264. this.changeDateSelect = []
  265. },
  266. rowClick(selection, row) {
  267. this.changeDateSelect = selection
  268. },
  269. revisionClick(selection, row) {
  270. this.revisioDataSelect = selection
  271. },
  272. revisionOk() {
  273. this.revisionVisible = false
  274. if (this.activeName === 'first') {
  275. this.quantifiedList = this.quantifiedList.length>0?this.quantifiedList:[]
  276. this.quantifiedList = this.quantifiedList.concat(this.revisioDataSelect)
  277. } else {
  278. this.nonQuantifiedList = this.nonQuantifiedList.length>0?this.nonQuantifiedList:[]
  279. this.nonQuantifiedList = this.nonQuantifiedList.concat(this.revisioDataSelect)
  280. }
  281. },
  282. handleCurrentChangeLeft(val) {
  283. this.pageLeft.currentPage = val
  284. },
  285. handleCurrentChangeRight(val) {
  286. this.pageRight.currentPage = val
  287. },
  288. //获取详情
  289. getDetails(id) {
  290. let that = this
  291. that.quantifiedList = []
  292. that.nonQuantifiedList = []
  293. apiGetevaluationrevisionDetails(id).then(datas =>{
  294. if (datas && datas.data) {
  295. that.quantifiedList = datas.data.quantifiedList
  296. that.pageLeft.total = datas.data.quantifiedList.length
  297. if (datas.data.nonQuantifiedList.length>0) {
  298. datas.data.nonQuantifiedList.forEach(it =>{
  299. it.childName = it.indicatorName //指标id
  300. // nonarr.push(obj)
  301. })
  302. }
  303. that.nonQuantifiedList = datas.data.nonQuantifiedList.length>0?datas.data.nonQuantifiedList:[]
  304. that.pageRight.total = datas.data.nonQuantifiedList.length
  305. }
  306. })
  307. },
  308. addTableDetail() {
  309. this.revisionVisible = true
  310. this.getrevisionDataFn(this.rowMsg)
  311. // let obj = {
  312. // showInput: true,
  313. // stageName: '',
  314. // sectionName: '',
  315. // organizationName: '',
  316. // deptName: '',
  317. // typeName: '',
  318. // optionName: '',
  319. // nonQuantifiedValue: ''
  320. // }
  321. // this.nonQuantifiedList.unshift(obj)
  322. },
  323. // 修订数据
  324. getrevisionDataFn(row) {
  325. let that = this
  326. that.revisionData = []
  327. let params = {
  328. deptResponsibilityId: row.deptResponsibilityId,
  329. isQuantified: this.activeName === 'first'?'是':'否'
  330. }
  331. apiGetevaluationrevisionPopUpData(params).then(datas =>{
  332. if (datas && datas.data) {
  333. that.revisionData = datas.data
  334. }
  335. })
  336. },
  337. saveDetail() {
  338. let that = this
  339. let params = []
  340. if (that.activeName === 'first') {
  341. that.quantifiedList.forEach(item =>{
  342. let obj = {
  343. id: item.id,
  344. isQuantified: '是',
  345. quantifiedValue: item.quantifiedValue,
  346. state: item.state
  347. }
  348. params.push(obj)
  349. })
  350. } else {
  351. that.nonQuantifiedList.forEach(item =>{
  352. let obj = {
  353. id: item.id,
  354. isQuantified: '否',
  355. quantifiedValue: 0.0,
  356. nonQuantifiedValue: item.nonQuantifiedValue,
  357. state: item.state
  358. }
  359. params.push(obj)
  360. })
  361. }
  362. apiPostevaluationrevisionSave(params).then(datas =>{
  363. if (datas) {
  364. if (datas.success) {
  365. that.$message({
  366. message: '保存成功',
  367. type: 'success'
  368. });
  369. that.getDetails(that.rowMsg.deptResponsibilityId)
  370. } else {
  371. that.$message({
  372. message: datas.data,
  373. type: 'error'
  374. })
  375. }
  376. }
  377. })
  378. },
  379. examineAndApprove(type) {
  380. let that = this
  381. let actionCS = ''
  382. if (type === 'agree') {
  383. if (that.rowMsg.taskType === 'SIGN') {
  384. actionCS = 'signAgree'
  385. } else if (that.rowMsg.taskType === 'NORMAL') {
  386. actionCS = 'agree'
  387. }
  388. } else {
  389. if (that.rowMsg.taskType === 'SIGN') {
  390. actionCS = 'signReject'
  391. } else if (that.rowMsg.taskType === 'NORMAL') {
  392. actionCS = 'reject'
  393. }
  394. }
  395. let params = {
  396. taskId: that.rowMsg.id, //任务ID
  397. nodeId: that.rowMsg.nodeId, //节点ID
  398. action: actionCS, //固定值
  399. instanceId: that.rowMsg.instId, //流程实例ID
  400. opinion: that.descMsg, //审批意见
  401. iamCode: window.localStorage.getItem('code'), //认证后code值
  402. taskName: that.rowMsg.name,
  403. defKey: that.instanceChild.defKey,
  404. bizKey: that.instanceChild.bizKey
  405. }
  406. apiPostIsdoAction(params).then(datas =>{
  407. if (datas && datas.data) {
  408. if (datas.data.isOk) {
  409. that.$message({
  410. message: datas.data.data,
  411. type: 'success'
  412. })
  413. that.dialogVisible = false
  414. that.$emit('approveMsg', datas.data.isOk)
  415. } else {
  416. that.$message({
  417. message: datas.data.msg,
  418. type: 'error'
  419. })
  420. }
  421. }
  422. })
  423. },
  424. handleImport() {
  425. this.$refs.importPage.upload.title = "考评修订信息导入"
  426. this.$refs.importPage.upload.open = true
  427. this.$refs.importPage.upload.data = {
  428. isQuantified: this.activeName === 'first'?'是':'否'
  429. }
  430. this.$refs.importPage.upload.url = `/evaluation-revision/import`
  431. },
  432. successImport(val) {
  433. this.getDetails(this.rowMsg.deptResponsibilityId)
  434. },
  435. handleExport() {
  436. let data = [] //接口返回数据
  437. const workbook = new ExcelJS.Workbook()
  438. const worksheet = workbook.addWorksheet('Sheet1')
  439. //根据数据自己调整
  440. let colums = []
  441. colums = [
  442. { header: 'ID', key: 'id', width: 26 },
  443. { header: '单位名称', key: 'organizationName', width: 26 },
  444. { header: '指标分类', key: 'typeName', width: 18 },
  445. { header: '业务阶段', key: 'stageName', width: 18 },
  446. { header: '业务属性', key: 'sectionName', width: 18 },
  447. { header: '指标名称', key: 'childName', width: 18 },
  448. { header: '填报部门', key: 'deptName', width: 26 },
  449. ]
  450. if (this.activeName === 'first') {
  451. colums.push(
  452. { header: '目标值', key: 'quantifiedValue', width: 18 },
  453. { header: '单位', key: 'unit', width: 18 },
  454. { header: '审核状态', key: 'state', width: 18 }
  455. )
  456. this.quantifiedList.forEach(item =>{
  457. data.push(item)
  458. })
  459. } else {
  460. colums.push(
  461. { header: '值', key: 'nonQuantifiedValue', width: 18 },
  462. { header: '审核状态', key: 'state', width: 18 }
  463. )
  464. this.nonQuantifiedList.forEach(item =>{
  465. data.push(item)
  466. })
  467. }
  468. worksheet.columns = colums
  469. worksheet.getRow(1).font = {
  470. size: 12,
  471. bold: true
  472. }
  473. worksheet.addRows(data)
  474. workbook.xlsx.writeBuffer().then(buffer => {
  475. //这里为type
  476. const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
  477. fileSave(blob, `数据导出.xlsx`)
  478. })
  479. },
  480. }
  481. }
  482. </script>
  483. <style lang="less">
  484. .startFrom{
  485. .el-overlay{
  486. .el-dialog{
  487. // margin-top: 7vh;
  488. .el-dialog__body{
  489. padding: 0 20px !important;
  490. .startDetail{
  491. .starttitleSty{
  492. font-size: 18px;
  493. font-family: Microsoft YaHei;
  494. font-weight: bold;
  495. color: #3B7AD1;
  496. // line-height: 12px;
  497. margin: 20px 0 20px 10px;
  498. }
  499. .danjuMsg{
  500. border: 1px solid #D6DBEA;
  501. padding: 10px 20px;
  502. border-radius: 10px;
  503. margin-bottom: 20px;
  504. .danjuMsg_data{
  505. padding: 5px 0 10px 0;
  506. .data_tit{
  507. margin-right: 10px;
  508. font-weight: bold;
  509. font-size: 14px;
  510. font-family: Microsoft YaHei;
  511. color: #8991B0;
  512. }
  513. .data_tit_wd{
  514. display: inline-block;
  515. width: 90px;
  516. }
  517. .el-form-item--small{
  518. .el-input{
  519. height: 25px;
  520. width: 160px;
  521. }
  522. margin-bottom: 0;
  523. .el-input-number{
  524. height: 25px;
  525. .el-input-number__decrease, .el-input-number__increase{
  526. right: -39px;
  527. }
  528. }
  529. }
  530. }
  531. }
  532. .el-select, .el-input{
  533. width: 100%;
  534. }
  535. .detaTableBtns{
  536. display: flex;
  537. width: 340px;
  538. position: relative;
  539. top: 32px;
  540. left: 80vw;
  541. z-index: 11111;
  542. .tableBtn {
  543. display: flex;
  544. margin-right: 30px;
  545. width: 13%;
  546. img{
  547. margin-right: 5px;
  548. margin-top: 1px;
  549. }
  550. span{
  551. font-size: 14px;
  552. font-family: Microsoft YaHei;
  553. font-weight: 400;
  554. }
  555. }
  556. .add{
  557. cursor: pointer;
  558. span{
  559. color: #3B7AD1;
  560. }
  561. }
  562. .save{
  563. cursor: pointer;
  564. span{
  565. color: #50C14E;
  566. }
  567. }
  568. .edit{
  569. span{
  570. color: #F5A623;
  571. }
  572. }
  573. .delete{
  574. cursor: no-drop;
  575. span{
  576. color: #F65177;
  577. }
  578. }
  579. .export{
  580. cursor: pointer;
  581. span{
  582. color: #2baa8a;
  583. }
  584. }
  585. .import{
  586. cursor: pointer;
  587. span{
  588. color: #ce1e78;
  589. }
  590. }
  591. }
  592. .el-tabs{
  593. .el-tabs__header{
  594. .el-tabs__nav{
  595. .el-tabs__item{
  596. font-size: 18px;
  597. font-family: Microsoft YaHei;
  598. font-weight: bold;
  599. margin: 0 10px;
  600. color: #8991B0;
  601. }
  602. .is-active{
  603. font-size: 18px;
  604. font-family: Microsoft YaHei;
  605. font-weight: bold;
  606. color: #3B7AD1;
  607. margin: 0 10px;
  608. }
  609. }
  610. }
  611. .el-table{
  612. margin-bottom: 10px;
  613. .el-table__body-wrapper{
  614. height: 50vh;
  615. }
  616. .el-table__row{
  617. .cell{
  618. .el-input{
  619. height: 24px;
  620. .el-input__inner{
  621. height: 24px;
  622. }
  623. }
  624. }
  625. }
  626. }
  627. }
  628. }
  629. }
  630. .el-dialog__footer{
  631. .dialog-footer{
  632. display: flex;
  633. justify-content: center;
  634. .el-button{
  635. width: 180px !important;
  636. height: 40px !important;
  637. }
  638. }
  639. }
  640. }
  641. }
  642. .revisionClass{
  643. margin-top: 7vh;
  644. .el-table{
  645. margin-bottom: 10px;
  646. .el-table__body-wrapper{
  647. height: 50vh;
  648. }
  649. }
  650. }
  651. }
  652. </style>