taskCenterEvlNewFrom.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867
  1. <template>
  2. <div class="taskEvalFrom">
  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="monthQuarterYear">
  49. <el-tabs v-model="activeName" class="tableMain" @tab-click="handleClick">
  50. <el-tab-pane v-for="it in stageData" :key="it.id" :label="it.stageName" :name="it.stageCode">
  51. <div class="detailsHeader">
  52. <div class="headerLeft">
  53. <el-tag v-for="tag in indicatorList" :key="tag.id" size="large" class="tagArr"
  54. effect="dark" :type="tag.id === isClickTagId ? '': 'info'" @click="handleShowPage(tag)">
  55. <span>{{ tag.indicator_name }}</span>
  56. </el-tag>
  57. </div>
  58. <div class="headerRight">
  59. <div class="seachFor">
  60. <el-input v-model="compNameSa" placeholder="请输入单位名称" @keyup.enter="getTableData(isClickTagId)"></el-input>
  61. <!-- <el-icon :size="20" color="#3B7AD1" @click="getTableData(isClickTagId)"><Search /></el-icon> -->
  62. </div>
  63. <div class="tableBtn add" @click="addTableDetail"
  64. v-if="(activeName === 'ZDZX' || activeName === 'GLSX') && indicatorList.length > 0">
  65. <img :src="addIcon" alt="">
  66. <span>新增</span>
  67. </div>
  68. <div class="tableBtn save" @click="saveAddDetail"
  69. v-if="(activeName === 'ZDZX' || activeName === 'GLSX') && indicatorList.length > 0">
  70. <img :src="saveIcon" alt="">
  71. <span>保存</span>
  72. </div>
  73. <div class="tableBtn save" @click="saveDetail" v-else>
  74. <img :src="saveIcon" alt="">
  75. <span>保存</span>
  76. </div>
  77. <div class="tableBtn import" @click="handleImport">
  78. <img :src="importIcon" alt="">
  79. <span>导入</span>
  80. </div>
  81. <div class="tableBtn export" @click="handleExport">
  82. <img :src="exportIcon" alt="">
  83. <span>导出</span>
  84. </div>
  85. </div>
  86. </div>
  87. <el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT"
  88. :row-class-name="tableRowClassName" :border="true" >
  89. <el-table-column type="index" label="排名" align="center"></el-table-column>
  90. <el-table-column label="考评单位" prop="organizationShortName" width="300">
  91. <template #default="scope">
  92. <el-select v-model="scope.row.organizationShortName" placeholder="请选择审核状态">
  93. <el-option
  94. v-for="item in organizationData"
  95. :key="item.organizationId"
  96. :label="item.organizationShortName"
  97. :value="item.organizationId">
  98. </el-option>
  99. </el-select>
  100. </template>
  101. </el-table-column>
  102. <el-table-column v-for="(it, index) in monthQuarterYearHeader" :key="index" :label="it.name" align="center">
  103. <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.key"
  104. align="center" width="150" sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)">
  105. <template #default="scope">
  106. <el-select v-model="scope.row[iv.code]" placeholder="请选择审核状态" v-if="scope.row['IS_LH_'+iv.code] === '3'">
  107. <el-option
  108. v-for="item in statusData"
  109. :key="item.id"
  110. :label="item.name"
  111. :value="item.id">
  112. </el-option>
  113. </el-select>
  114. <el-input v-model="scope.row[iv.code]" v-else-if="scope.row['IS_LH_'+iv.code] === '2'"></el-input>
  115. <el-input-number v-model="scope.row[iv.code]" :precision="2" :step="0.1" v-else />
  116. </template>
  117. </el-table-column>
  118. </el-table-column>
  119. </el-table>
  120. </el-tab-pane>
  121. </el-tabs>
  122. <div class="tableSeach">
  123. <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
  124. :class="item.showClick? 'seachTypeCha':''" @click="changType(item)">
  125. <img :src="item.img" alt="" v-if="!item.showClick">
  126. <img :src="item.clickImg" alt="" v-else>
  127. <p :style="item.showClick? 'color: #3B7AD1' : ''">{{item.isName}}</p>
  128. </div>
  129. </div>
  130. </div>
  131. <div>
  132. <p class="starttitleSty">审批意见:</p>
  133. <el-input v-model="descMsg" :rows="3" type="textarea" placeholder="请输入审批意见"></el-input>
  134. </div>
  135. </div>
  136. <!-- <template #footer>
  137. <span class="dialog-footer">
  138. <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
  139. </span>
  140. </template> -->
  141. <template #footer>
  142. <span class="dialog-footer">
  143. <el-button type="primary" @click="examineAndApprove('agree')">同 意</el-button>
  144. <el-button @click="examineAndApprove('reject')">拒 绝</el-button>
  145. </span>
  146. </template>
  147. </el-dialog>
  148. <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
  149. </div>
  150. </template>
  151. <script>
  152. import importDailog from '../importPage/importDailog.vue'
  153. import {apiGetEvaluationIndicatorList,apiGetgetEvaluationInfoDataList,apiGetbinsectionList, apiGetbinstageList,apiGetExportMsg,
  154. apiPostorganizationUpdateEvaluationInfo, apiPostorganizationUpdateAddEvaluationInfo,apiGetHeaderOrganizationEvaluation,
  155. apiPostIsdoAction} from '../../api/api'
  156. import * as XLSX from 'xlsx'
  157. import { saveAs } from 'file-saver'
  158. import * as XLSXD from 'xlsx-js-style'
  159. import sectionDef from '../../assets/benchmarkImg/sectionDef.png'
  160. import sectionCha from '../../assets/benchmarkImg/sectionCha.png'
  161. import addIcon from '../../assets/btnIcon/add.png'
  162. import saveIcon from '../../assets/btnIcon/save.png'
  163. import exportIcon from '../../assets/btnIcon/export.png'
  164. import importIcon from '../../assets/btnIcon/import.png'
  165. export default {
  166. components: {
  167. importDailog
  168. },
  169. data() {
  170. return {
  171. dialogVisible: false,
  172. activeName: '',
  173. monthQuarterYearData: [],
  174. monthQuarterYearHeader: [],
  175. indicatorList: [],
  176. isClickTagId: '',
  177. compNameSa: '',
  178. receiptMsg: {
  179. code: '',
  180. des: '',
  181. stage: '',
  182. createName: '',
  183. createDate: '',
  184. type: '',
  185. year: '',
  186. recStage: ''
  187. },
  188. rowMsg: {},
  189. moduleData: [],
  190. stageData: [],
  191. titleMsgArr: [],
  192. binSectionStr: '',
  193. addIcon: addIcon,
  194. saveIcon: saveIcon,
  195. exportIcon: exportIcon,
  196. importIcon: importIcon,
  197. addstageId: '',
  198. tastbizKey: '',
  199. taskDefKey: '',
  200. instanceChild: {},
  201. descMsg: '',
  202. statusData: [],
  203. organizationData: [],
  204. }
  205. },
  206. created() {
  207. this.statusData = [
  208. {
  209. name: '已确认',
  210. id: '1'
  211. },
  212. {
  213. name: '待确认',
  214. id: '0'
  215. },
  216. {
  217. name: '不合格',
  218. id: '-1'
  219. }
  220. ]
  221. },
  222. methods: {
  223. init(row, allData) {
  224. this.dialogVisible = true
  225. this.instanceChild = allData
  226. this.tastbizKey = allData.bizKey
  227. this.taskDefKey = allData.defKey
  228. this.getevalHeaderDetails(this.tastbizKey, this.taskDefKey)
  229. this.getModelData(this.taskDefKey)
  230. this.rowMsg = row
  231. },
  232. sortMethods(a, b, it) {
  233. if (a[it] < b[it]) {
  234. return -1
  235. }
  236. },
  237. //获取头部详情
  238. getevalHeaderDetails(id, defKey) {
  239. let that = this
  240. let params = {
  241. id: id
  242. }
  243. apiGetHeaderOrganizationEvaluation(params).then(datas =>{
  244. that.getDataMsg(defKey, datas)
  245. })
  246. },
  247. getDataMsg(types, datas) {
  248. if (datas && datas.data) {
  249. let item = datas.data
  250. this.receiptMsg = {
  251. code: types === 'dwkpmbqd'?item.responsibilityCode:item.organizationEvaluationCode,
  252. des: item.des,
  253. stage: item.stage,
  254. createName: item.createName,
  255. createDate: item.createTime,
  256. type: item.checkCycle === 'YDKP'?'月度考评':item.checkCycle === 'JDKP'?'季度考评':'年度考评',
  257. year: item.year,
  258. recStage: '有效'
  259. }
  260. }
  261. },
  262. // 获取业务属性
  263. getModelData(type) {
  264. let that = this
  265. that.titleMsgArr = []
  266. let params = {
  267. type: type === 'nddwkplc' ? '3' : '2'
  268. }
  269. apiGetbinsectionList(params).then(datas =>{
  270. if (datas && datas.data) {
  271. that.moduleData = datas.data
  272. that.moduleData.forEach(item =>{
  273. let obj = {
  274. id: item.id,
  275. isName: item.sectionName === '新能源(光电)' ? '新能源光电' : item.sectionName === '新能源(风电)' ? '新能源风电' : item.sectionName,
  276. isNameEn: item.sectionCode,
  277. showClick: false,
  278. isClass: 'sectionDef',
  279. img: sectionDef,
  280. isClassC: 'sectionCha',
  281. clickImg: sectionCha
  282. }
  283. that.titleMsgArr.push(obj)
  284. })
  285. that.titleMsgArr[0].showClick = true
  286. that.binSectionStr = that.titleMsgArr[0].id
  287. that.getStageData(type)
  288. that.getorganizationData(type)
  289. }
  290. })
  291. },
  292. //获取单位数据
  293. getorganizationData(type) {
  294. let that = this
  295. let params = {
  296. evaluationCycle: type ==='nddwkplc' ? 'NDKP': type ==='jddwkplc' ? 'JDKP' : 'YDKP',
  297. organizationType: 'DWKP',
  298. binSection: that.binSectionStr
  299. }
  300. apiGetOrganizationListAll(params).then(datas => {
  301. if (datas && datas.data) {
  302. that.organizationData = datas.data
  303. }
  304. })
  305. },
  306. //根据业务属性获取业务阶段
  307. getStageData(type) {
  308. let that = this
  309. let params = {}
  310. if (type !== 'nddwkplc') {
  311. params = {
  312. type: '3'
  313. }
  314. }
  315. apiGetbinstageList(params).then(datas =>{
  316. if (datas && datas.data) {
  317. that.stageData = datas.data
  318. that.activeName = datas.data[0].stageCode
  319. that.getTableHeaderData(datas.data[0].id)
  320. }
  321. })
  322. },
  323. //获取指标数据
  324. getTableHeaderData(id) {
  325. let that = this
  326. that.monthQuarterYearHeader = []
  327. that.monthQuarterYearData = []
  328. that.isClickTagId = ''
  329. let params = {
  330. organizationEvaluationId: that.tastbizKey,
  331. binSection: that.binSectionStr,
  332. binStage: id
  333. }
  334. apiGetEvaluationIndicatorList(params).then(datas =>{
  335. if (datas && datas.data) {
  336. that.indicatorList = datas.data
  337. if (datas.data.length>0) {
  338. that.isClickTagId = datas.data[0].id
  339. that.getTableData(that.isClickTagId)
  340. }
  341. }
  342. })
  343. },
  344. tableRowClassName(row, rowIndex) {
  345. if (!row.row.valueFlag) {
  346. return 'error-row'
  347. }
  348. },
  349. handleClick(val) {
  350. let stageId = ''
  351. this.stageData.forEach(it =>{
  352. if (it.stageCode === val.props.name) {
  353. stageId = it.id
  354. }
  355. })
  356. this.getTableHeaderData(stageId)
  357. },
  358. //获取表格数据
  359. getTableData(id) {
  360. let that = this
  361. let params = {
  362. organizationEvaluationId: that.tastbizKey,
  363. indicatorId: id,
  364. organizationShortName: that.compNameSa
  365. }
  366. apiGetgetEvaluationInfoDataList(params).then(datas =>{
  367. if (datas && datas.data) {
  368. if (datas.data.title) {
  369. let header = []
  370. for(let i in datas.data.title) {
  371. let obj = {
  372. name: i,
  373. children: datas.data.title[i]
  374. }
  375. header.push(obj)
  376. }
  377. that.monthQuarterYearHeader = header
  378. }
  379. that.monthQuarterYearData = datas.data.value
  380. }
  381. })
  382. },
  383. handleShowPage(tag) {
  384. this.isClickTagId = tag.id
  385. this.monthQuarterYearHeader = []
  386. this.monthQuarterYearData = []
  387. this.getTableData(tag.id)
  388. },
  389. changType(data) {
  390. this.titleMsgArr.forEach(it =>{
  391. it.showClick = false
  392. if (it.isName === data.isName) {
  393. it.showClick = true
  394. this.binSectionStr = it.id
  395. }
  396. })
  397. let stageId = ''
  398. this.stageData.forEach(it =>{
  399. if (it.stageCode === this.activeName) {
  400. stageId = it.id
  401. }
  402. })
  403. this.getTableHeaderData(stageId)
  404. this.getorganizationData(this.taskDefKey)
  405. },
  406. addTableDetail() {
  407. console.log('表头数据11====>>>>>>>', this.monthQuarterYearHeader)
  408. if (this.monthQuarterYearHeader.length>0) {
  409. let headerArr = []
  410. this.monthQuarterYearHeader.forEach(item =>{
  411. headerArr = headerArr.concat(item.children)
  412. })
  413. console.log('表头数据22====>>>>>>>', headerArr)
  414. this.addstageId = ''
  415. this.stageData.forEach(it =>{
  416. if (it.stageCode === this.activeName) {
  417. this.addstageId = it.id
  418. }
  419. })
  420. let obj = {
  421. isAdd: true,
  422. }
  423. headerArr.forEach(it =>{
  424. obj[it.code] = ''
  425. obj['IS_LH_'+it.code] = it.flag
  426. })
  427. this.monthQuarterYearData.unshift(obj)
  428. }
  429. console.log('表格数据====>>>>>>>', this.monthQuarterYearData)
  430. },
  431. saveAddDetail() {
  432. let that = this
  433. let addParams = []
  434. let saveParams = []
  435. let addObj = {
  436. organizationEvaluationId: that.tastbizKey,
  437. indicatorId: that.isClickTagId,
  438. binSection: that.binSectionStr,
  439. binStage: that.addstageId,
  440. optionMap: {}
  441. }
  442. that.monthQuarterYearData.forEach(it =>{
  443. if (it.isAdd) {
  444. addObj.organizationId = it.organizationShortName
  445. addObj.optionMap = it
  446. addParams.push(addObj)
  447. } else {
  448. saveParams.push(it)
  449. }
  450. })
  451. if (addParams.length > 0) {
  452. apiPostorganizationUpdateAddEvaluationInfo(addParams).then(datas =>{
  453. if (datas) {
  454. that.responseData(datas)
  455. }
  456. })
  457. }
  458. if (saveParams.length > 0) {
  459. apiPostorganizationUpdateEvaluationInfo(saveParams).then(datas =>{
  460. if (datas) {
  461. that.responseData(datas)
  462. }
  463. })
  464. }
  465. },
  466. // 返回数据
  467. responseData(datas) {
  468. if (datas.message === '成功') {
  469. this.$message({
  470. message: '考评详情信息保存成功',
  471. type: 'success'
  472. });
  473. } else {
  474. this.$message({
  475. message: datas.message,
  476. type: 'error'
  477. });
  478. }
  479. this.getTableData(this.isClickTagId)
  480. },
  481. saveDetail() {
  482. let that = this
  483. apiPostorganizationUpdateEvaluationInfo(that.monthQuarterYearData).then(datas =>{
  484. if (datas) {
  485. if (datas.message === '成功') {
  486. that.$message({
  487. message: '考评详情信息保存成功',
  488. type: 'success'
  489. });
  490. } else {
  491. that.$message({
  492. message: datas.message,
  493. type: 'error'
  494. });
  495. }
  496. that.getTableData(that.isClickTagId)
  497. }
  498. })
  499. },
  500. handleImport() {
  501. this.$refs.importPage.upload.title = "考评详情信息导入"
  502. this.$refs.importPage.upload.open = true
  503. this.$refs.importPage.upload.url = '/organization-evaluation-info/import-excel'
  504. },
  505. successImport(val) {
  506. that.getTableData(that.isClickTagId)
  507. },
  508. handleExport() {
  509. let that = this
  510. let url = 'organization-evaluation-info/download-excel'
  511. let params = {
  512. organizationEvaluationId: that.tastbizKey,
  513. indicatorId: that.isClickTagId
  514. }
  515. apiGetExportMsg(url,params).then(datas =>{
  516. let blob = new Blob([datas])
  517. saveAs(blob, '考评详情数据导出.xlsx')
  518. }).catch((r) => {
  519. console.error(r)
  520. })
  521. },
  522. examineAndApprove(type) {
  523. let that = this
  524. let actionCS = ''
  525. if (type === 'agree') {
  526. if (that.rowMsg.taskType === 'SIGN') {
  527. actionCS = 'signAgree'
  528. } else if (that.rowMsg.taskType === 'NORMAL') {
  529. actionCS = 'agree'
  530. }
  531. } else {
  532. // if (that.rowMsg.taskType === 'SIGN') {
  533. // actionCS = 'signReject'
  534. // } else if (that.rowMsg.taskType === 'NORMAL') {
  535. // }
  536. actionCS = 'reject'
  537. }
  538. let params = {
  539. taskId: that.rowMsg.id, //任务ID
  540. nodeId: that.rowMsg.nodeId, //节点ID
  541. action: actionCS, //固定值
  542. instanceId: that.rowMsg.instId, //流程实例ID
  543. opinion: that.descMsg, //审批意见
  544. iamCode: window.localStorage.getItem('code'), //认证后code值
  545. taskName: that.rowMsg.name,
  546. defKey: that.instanceChild.defKey,
  547. bizKey: that.instanceChild.bizKey
  548. }
  549. apiPostIsdoAction(params).then(datas =>{
  550. if (datas && datas.data) {
  551. if (datas.data.isOk) {
  552. that.$message({
  553. message: datas.data.data,
  554. type: 'success'
  555. })
  556. that.dialogVisible = false
  557. that.$emit('approveMsg', datas.data.isOk)
  558. } else {
  559. that.$message({
  560. message: datas.data.msg,
  561. type: 'error'
  562. })
  563. }
  564. }
  565. })
  566. },
  567. }
  568. }
  569. </script>
  570. <style lang="less">
  571. .taskEvalFrom{
  572. .el-overlay{
  573. .el-dialog{
  574. // margin-top: 7vh;
  575. .el-dialog__body{
  576. padding: 0 20px !important;
  577. .startDetail{
  578. .starttitleSty{
  579. font-size: 18px;
  580. font-family: Microsoft YaHei;
  581. font-weight: bold;
  582. color: #3B7AD1;
  583. // line-height: 12px;
  584. margin: 20px 0 20px 10px;
  585. }
  586. .danjuMsg{
  587. border: 1px solid #D6DBEA;
  588. padding: 10px 20px;
  589. border-radius: 10px;
  590. // margin-bottom: 20px;
  591. .danjuMsg_data{
  592. padding: 5px 0 10px 0;
  593. .data_tit{
  594. margin-right: 10px;
  595. font-weight: bold;
  596. font-size: 14px;
  597. font-family: Microsoft YaHei;
  598. color: #8991B0;
  599. }
  600. .data_tit_wd{
  601. display: inline-block;
  602. width: 90px;
  603. }
  604. .el-form-item--small{
  605. .el-input{
  606. height: 25px;
  607. width: 160px;
  608. }
  609. margin-bottom: 0;
  610. .el-input-number{
  611. height: 25px;
  612. .el-input-number__decrease, .el-input-number__increase{
  613. right: -39px;
  614. }
  615. }
  616. }
  617. }
  618. }
  619. .el-select, .el-input{
  620. width: 100%;
  621. }
  622. .monthQuarterYear{
  623. display: flex;
  624. width: 100%;
  625. margin-top: 20px;
  626. .tableMain{
  627. width: calc(100% - 100px);
  628. .el-tabs__header{
  629. .el-tabs__nav{
  630. .el-tabs__item{
  631. font-size: 18px;
  632. font-family: Microsoft YaHei;
  633. font-weight: bold;
  634. margin: 0 10px;
  635. color: #8991B0;
  636. }
  637. .is-active{
  638. font-size: 18px;
  639. font-family: Microsoft YaHei;
  640. font-weight: bold;
  641. color: #3B7AD1;
  642. margin: 0 10px;
  643. }
  644. }
  645. }
  646. .detailsHeader{
  647. width: 100%;
  648. display: flex;
  649. justify-content: space-between;
  650. .headerLeft{
  651. display: flex;
  652. width: 65%;
  653. overflow-x: auto;
  654. .tagArr {
  655. height: 33px;
  656. margin-right: 10px;
  657. cursor: pointer;
  658. margin-bottom: 10px;
  659. }
  660. .el-tag--dark {
  661. background-color: #184FB4;
  662. border: 1px solid #184FB4;
  663. }
  664. .el-tag--info {
  665. background-color: #E6EBF5;
  666. border: 1px solid #E6EBF5;
  667. color: #9DA5BE;
  668. .el-tag__close {
  669. color: #9DA5BE;
  670. }
  671. }
  672. }
  673. .headerRight{
  674. display: flex;
  675. justify-content: end;
  676. width: 35%;
  677. margin-bottom: 5px;
  678. .seachFor{
  679. display: flex;
  680. .el-input{
  681. height: 30px;
  682. .el-input__inner{
  683. height:30px;
  684. }
  685. .el-input__suffix{
  686. .el-select__caret{
  687. line-height:30px;
  688. }
  689. }
  690. }
  691. .el-icon{
  692. margin: 5px 10px 0 10px;
  693. cursor: pointer;
  694. }
  695. }
  696. .tableBtn {
  697. display: flex;
  698. height: 20px;
  699. margin: 5px 8px 0 8px;
  700. width: 20%;
  701. img{
  702. margin-right: 5px;
  703. margin-top: 1px;
  704. }
  705. span{
  706. display: inline-block;
  707. width: 100%;
  708. font-size: 14px;
  709. font-family: Microsoft YaHei;
  710. font-weight: 400;
  711. }
  712. }
  713. .add{
  714. cursor: pointer;
  715. span{
  716. color: #3B7AD1;
  717. }
  718. }
  719. .save{
  720. cursor: pointer;
  721. span{
  722. color: #50C14E;
  723. }
  724. }
  725. .import{
  726. cursor: pointer;
  727. span{
  728. color: #ce1e78;
  729. }
  730. }
  731. .export{
  732. cursor: pointer;
  733. span{
  734. color: #2baa8a;
  735. }
  736. }
  737. }
  738. }
  739. .el-table {
  740. .el-table__header-wrapper{
  741. .el-table__header{
  742. .el-table__cell {
  743. border-bottom: none !important;
  744. }
  745. thead{
  746. tr{
  747. th{
  748. .cell{
  749. line-height: 16px;
  750. }
  751. }
  752. }
  753. }
  754. }
  755. }
  756. .el-table__body-wrapper {
  757. height: 35vh !important;
  758. .el-scrollbar{
  759. .is-horizontal{
  760. .el-scrollbar__thumb{
  761. // width: 100% !important;
  762. }
  763. }
  764. .el-table__body{
  765. .error-row {
  766. --el-table-tr-bg-color: #fdecec;
  767. &:hover > td{
  768. background: #fdecec !important;
  769. }
  770. }
  771. tr{
  772. td{
  773. padding: 0;
  774. .cell{
  775. // background: #F6F7FA;
  776. line-height: 47px;
  777. height: 47px;
  778. }
  779. }
  780. td:hover {
  781. line-height: 45px;
  782. height: 45px;
  783. }
  784. }
  785. }
  786. }
  787. }
  788. .el-table--border .el-table__cell{
  789. border: none;
  790. }
  791. .el-table thead.is-group th.el-table__cell{
  792. background: transparent;
  793. }
  794. .tooltipCC {
  795. width: 180px;
  796. display: inline-block;
  797. overflow: hidden;
  798. text-overflow: ellipsis;
  799. white-space: nowrap;
  800. }
  801. }
  802. .el-pagination {
  803. margin-top: 20px;
  804. text-align: end;
  805. position: relative;
  806. }
  807. }
  808. .tableSeach{
  809. width: 88px;
  810. height: 50vh;
  811. margin-left: 10px;
  812. margin-top: 37px;
  813. border: 1px solid #D6DBEA;
  814. padding: 5px 0;
  815. border-radius: 5px;
  816. overflow-y: auto;
  817. .seachType{
  818. width: 78px;
  819. height: 78px;
  820. cursor: pointer;
  821. border-left: 3px solid transparent;
  822. img{
  823. margin-top: 17px;
  824. margin-left: 27px;
  825. }
  826. p{
  827. text-align: center;
  828. font-size: 14px;
  829. }
  830. }
  831. .seachTypeCha{
  832. background: #E6EBF5;
  833. cursor: pointer;
  834. border-left: 3px solid #3B7AD1;
  835. }
  836. }
  837. }
  838. }
  839. }
  840. .el-dialog__footer{
  841. .dialog-footer{
  842. display: flex;
  843. justify-content: center;
  844. .el-button{
  845. width: 180px !important;
  846. height: 40px !important;
  847. }
  848. }
  849. }
  850. }
  851. }
  852. }
  853. </style>