赫艾前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

578 lines
19 KiB

  1. <template>
  2. <div class="mod-config">
  3. <el-row>
  4. <el-col :span="24">
  5. <el-button @click="getDataList()" type="primary">查询</el-button>
  6. <download-excel
  7. :fields="fields()"
  8. type="xls"
  9. :name="exportName"
  10. :fetch="createExportData"
  11. worksheet="导出信息"
  12. class="el-button el-button--primary el-button--medium">
  13. {{ '导出' }}
  14. </download-excel>
  15. <el-button v-if="isAuth('taskmanage:tasklist:save')" @click="addOrUpdateHandle()" type="primary">发起任务
  16. </el-button>
  17. </el-col>
  18. </el-row>
  19. <el-row>
  20. <el-col :span="24">
  21. <el-form :inline="true" label-position="top" :model="dataForm" @keyup.enter.native="getDataList()">
  22. <el-row>
  23. <el-col :span="24">
  24. <el-form-item label="责任部门">
  25. <el-input style="width: 120px" v-model="dataForm.department" clearable></el-input>
  26. </el-form-item>
  27. <el-form-item label="责任人">
  28. <el-input style="width: 120px" v-model="dataForm.responsiblePerson" clearable></el-input>
  29. </el-form-item>
  30. <el-form-item label="客户">
  31. <el-input style="width: 120px" v-model="dataForm.customer" clearable></el-input>
  32. </el-form-item>
  33. <el-form-item label="状态">
  34. <el-select v-model="dataForm.status" style="width: 120px">
  35. <el-option label="全部" value=""></el-option>
  36. <el-option label="未受理" value="未受理"></el-option>
  37. <el-option label="已受理" value="已受理"></el-option>
  38. <el-option label="已结束" value="已结束"></el-option>
  39. </el-select>
  40. </el-form-item>
  41. <el-form-item label="发起日期">
  42. <el-date-picker style="width: 120px" v-model="dataForm.startDate"
  43. value-format='yyyy-MM-dd 00:00:00'
  44. format='yyyy-MM-dd'
  45. ></el-date-picker>
  46. -
  47. <el-date-picker style="width: 120px" v-model="dataForm.endDate"
  48. value-format='yyyy-MM-dd 23:59:59'
  49. format='yyyy-MM-dd'
  50. ></el-date-picker>
  51. </el-form-item>
  52. <el-form-item label="要求完成日期">
  53. <el-date-picker style="width: 120px" v-model="dataForm.finishStartDate"
  54. value-format='yyyy-MM-dd 00:00:00'
  55. format='yyyy-MM-dd'
  56. ></el-date-picker>
  57. -
  58. <el-date-picker style="width: 120px" v-model="dataForm.finishEndDate"
  59. value-format='yyyy-MM-dd 23:59:59'
  60. format='yyyy-MM-dd'
  61. ></el-date-picker>
  62. </el-form-item>
  63. </el-col>
  64. </el-row>
  65. </el-form>
  66. </el-col>
  67. </el-row>
  68. <el-row>
  69. <el-col :span="24">
  70. <el-table
  71. :data="dataList"
  72. border
  73. :height="height"
  74. v-loading="dataListLoading"
  75. @selection-change="selectionChangeHandle"
  76. highlight-current-row
  77. style="width: 100%;">
  78. <el-table-column
  79. v-for="(item,index) in columnList" :key="index"
  80. :sortable="item.columnSortable"
  81. :prop="item.columnProp"
  82. :header-align="'center'"
  83. :show-overflow-tooltip="item.showOverflowTooltip"
  84. :align="item.align"
  85. :fixed="item.fixed==''?false:item.fixed"
  86. :width="item.columnWidth"
  87. :label="item.columnLabel">
  88. <template slot-scope="scope">
  89. <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
  90. <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
  91. style="width: 100px; height: 80px"/></span>
  92. </template>
  93. </el-table-column>
  94. <el-table-column
  95. fixed="right"
  96. header-align="center"
  97. align="center"
  98. width="300"
  99. label="操作">
  100. <template slot-scope="scope">
  101. <el-link type="text" size="small" @click="addOrUpdateHandle(scope.row.taskId)">修改 |</el-link>
  102. <el-link type="text" size="small" @click="updateStatusDialog(scope.row)">更改最终状态 |</el-link>
  103. <el-link type="text" size="small" @click="chatHistoryDialog(scope.row.id)">沟通 |</el-link>
  104. <el-link type="text" size="small" @click="annex(scope.row.taskId)">任务附件 |</el-link>
  105. <el-link type="text" size="small" @click="annex(scope.row.id)"> 沟通附件</el-link>
  106. <el-link type="text" size="small"
  107. @click="deleteHandle(scope.row.id)">删除
  108. </el-link>
  109. </template>
  110. </el-table-column>
  111. </el-table>
  112. </el-col>
  113. </el-row>
  114. <el-dialog
  115. v-drag
  116. :title="'更改状态'"
  117. :close-on-click-modal="false"
  118. width="139px"
  119. :visible.sync="statusVisible">
  120. <el-form :model="dataForm" :inline="true" label-position="top"
  121. label-width="80px">
  122. <el-form-item label="状态">
  123. <el-select v-model="selectRow.finalStatus" style="width: 120px">
  124. <el-option label="未完成" value="未完成"></el-option>
  125. <el-option label="已完成" value="已完成"></el-option>
  126. </el-select>
  127. </el-form-item>
  128. </el-form>
  129. <span slot="footer" class="dialog-footer">
  130. <el-button type="primary" @click="updateStatus()">确定</el-button>
  131. <el-button type="primary" @click="statusVisible = false">取消</el-button>
  132. </span>
  133. </el-dialog>
  134. <!-- 沟通记录 -->
  135. <chat-history v-if="chatHistoryVisible" ref="chatHistory" ></chat-history>
  136. <!-- 文件列表 -->
  137. <task-file-list v-if="taskFileVisible" ref="taskFileList"></task-file-list>
  138. <!-- 弹窗, 新增 / 修改 -->
  139. <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  140. </div>
  141. </template>
  142. <script>
  143. import ChatHistory from './chat-history.vue'
  144. import {getTaskDetailList,updateTask} from '@/api/taskmanage/tasklist.js'
  145. import TaskFileList from './task-file-upload-list.vue'
  146. import AddOrUpdate from "./tasklist-add-or-update";
  147. export default {
  148. data() {
  149. return {
  150. height: 200,
  151. dataForm: {
  152. site: this.$store.state.user.site,
  153. customer: '',
  154. taskHeader: '',
  155. project: '',
  156. taskDescription: '',
  157. taskInitiator: this.$store.state.user.name,
  158. finalStatus: '',
  159. department: '',
  160. responsiblePerson: '',
  161. startDate: '',
  162. endDate: '',
  163. finishStartDate: '',
  164. finishEndDate: '',
  165. status: '',
  166. },
  167. // 展示列集
  168. columnList: [
  169. {
  170. tableId: "ProjectInfo",
  171. tableName: this.$route.meta.title,
  172. columnProp: "taskStartDate",
  173. columnLabel: "发起日期",
  174. columnHidden: false,
  175. columnImage: false,
  176. columnSortable: false,
  177. columnWidth: null,
  178. format: null,
  179. functionId: this.$route.meta.menuId,
  180. sortLv: 0,
  181. status: true,
  182. fixed: '',
  183. serialNumber: null,
  184. columnType: null,
  185. align: null
  186. },
  187. {
  188. tableId: "ProjectInfo",
  189. tableName: this.$route.meta.title,
  190. columnProp: "taskInitiator",
  191. columnLabel: "任务发起人",
  192. columnHidden: false,
  193. columnImage: false,
  194. columnSortable: false,
  195. columnWidth: null,
  196. format: null,
  197. functionId: this.$route.meta.menuId,
  198. sortLv: 0,
  199. status: true,
  200. fixed: '',
  201. serialNumber: null,
  202. columnType: null,
  203. align: null
  204. },
  205. {
  206. tableId: "ProjectInfo",
  207. tableName: this.$route.meta.title,
  208. columnProp: "customer",
  209. columnLabel: "客户",
  210. columnHidden: false,
  211. columnImage: false,
  212. columnSortable: false,
  213. columnWidth: null,
  214. format: null,
  215. functionId: this.$route.meta.menuId,
  216. sortLv: 0,
  217. status: true,
  218. fixed: '',
  219. serialNumber: null,
  220. columnType: null,
  221. align: null
  222. },
  223. {
  224. tableId: "ProjectInfo",
  225. tableName: this.$route.meta.title,
  226. columnProp: "taskHeader",
  227. columnLabel: "任务主题",
  228. columnHidden: false,
  229. columnImage: false,
  230. columnSortable: false,
  231. columnWidth: null,
  232. format: null,
  233. functionId: this.$route.meta.menuId,
  234. sortLv: 0,
  235. status: true,
  236. fixed: '',
  237. serialNumber: null,
  238. columnType: null,
  239. align: null
  240. },
  241. {
  242. tableId: "ProjectInfo",
  243. tableName: this.$route.meta.title,
  244. columnProp: "project",
  245. columnLabel: "项目",
  246. columnHidden: false,
  247. columnImage: false,
  248. columnSortable: false,
  249. columnWidth: null,
  250. format: null,
  251. functionId: this.$route.meta.menuId,
  252. sortLv: 0,
  253. status: true,
  254. fixed: '',
  255. serialNumber: null,
  256. columnType: null,
  257. align: null
  258. },
  259. {
  260. tableId: "ProjectInfo",
  261. tableName: this.$route.meta.title,
  262. columnProp: "taskDescription",
  263. columnLabel: "任务描述",
  264. columnHidden: false,
  265. columnImage: false,
  266. columnSortable: false,
  267. columnWidth: null,
  268. format: null,
  269. functionId: this.$route.meta.menuId,
  270. sortLv: 0,
  271. status: true,
  272. fixed: '',
  273. serialNumber: null,
  274. columnType: null,
  275. align: null
  276. },
  277. {
  278. tableId: "ProjectInfo",
  279. tableName: this.$route.meta.title,
  280. columnProp: "department",
  281. columnLabel: "责任部门",
  282. columnHidden: false,
  283. columnImage: false,
  284. columnSortable: false,
  285. columnWidth: null,
  286. format: null,
  287. functionId: this.$route.meta.menuId,
  288. sortLv: 0,
  289. status: true,
  290. fixed: '',
  291. serialNumber: null,
  292. columnType: null,
  293. align: null
  294. },
  295. {
  296. tableId: "ProjectInfo",
  297. tableName: this.$route.meta.title,
  298. columnProp: "responsiblePerson",
  299. columnLabel: "责任人",
  300. columnHidden: false,
  301. columnImage: false,
  302. columnSortable: false,
  303. columnWidth: null,
  304. format: null,
  305. functionId: this.$route.meta.menuId,
  306. sortLv: 0,
  307. status: true,
  308. fixed: '',
  309. serialNumber: null,
  310. columnType: null,
  311. align: null
  312. },
  313. {
  314. tableId: "ProjectInfo",
  315. tableName: this.$route.meta.title,
  316. columnProp: "requiredCompletionDate",
  317. columnLabel: "要求完成日期",
  318. columnHidden: false,
  319. columnImage: false,
  320. columnSortable: false,
  321. columnWidth: null,
  322. format: null,
  323. functionId: this.$route.meta.menuId,
  324. sortLv: 0,
  325. status: true,
  326. fixed: '',
  327. serialNumber: null,
  328. columnType: null,
  329. align: null
  330. },
  331. {
  332. tableId: "ProjectInfo",
  333. tableName: this.$route.meta.title,
  334. columnProp: "status",
  335. columnLabel: "状态",
  336. columnHidden: false,
  337. columnImage: false,
  338. columnSortable: false,
  339. columnWidth: null,
  340. format: null,
  341. functionId: this.$route.meta.menuId,
  342. sortLv: 0,
  343. status: true,
  344. fixed: '',
  345. serialNumber: null,
  346. columnType: null,
  347. align: null
  348. },
  349. {
  350. tableId: "ProjectInfo",
  351. tableName: this.$route.meta.title,
  352. columnProp: "finalStatus",
  353. columnLabel: "最终状态",
  354. columnHidden: false,
  355. columnImage: false,
  356. columnSortable: false,
  357. columnWidth: null,
  358. format: null,
  359. functionId: this.$route.meta.menuId,
  360. sortLv: 0,
  361. status: true,
  362. fixed: '',
  363. serialNumber: null,
  364. columnType: null,
  365. align: null
  366. },
  367. {
  368. tableId: "ProjectInfo",
  369. tableName: this.$route.meta.title,
  370. columnProp: "createdBy",
  371. columnLabel: "创建人",
  372. columnHidden: false,
  373. columnImage: false,
  374. columnSortable: false,
  375. columnWidth: null,
  376. format: null,
  377. functionId: this.$route.meta.menuId,
  378. sortLv: 0,
  379. status: true,
  380. fixed: '',
  381. serialNumber: null,
  382. columnType: null,
  383. align: null
  384. },
  385. {
  386. tableId: "ProjectInfo",
  387. tableName: this.$route.meta.title,
  388. columnProp: "createdDate",
  389. columnLabel: "创建时间",
  390. columnHidden: false,
  391. columnImage: false,
  392. columnSortable: false,
  393. columnWidth: 140,
  394. format: null,
  395. functionId: this.$route.meta.menuId,
  396. sortLv: 0,
  397. status: true,
  398. fixed: '',
  399. serialNumber: null,
  400. columnType: null,
  401. align: null
  402. },
  403. {
  404. tableId: "ProjectInfo",
  405. tableName: this.$route.meta.title,
  406. columnProp: "updatedBy",
  407. columnLabel: "修改人",
  408. columnHidden: false,
  409. columnImage: false,
  410. columnSortable: false,
  411. columnWidth: null,
  412. format: null,
  413. functionId: this.$route.meta.menuId,
  414. sortLv: 0,
  415. status: true,
  416. fixed: '',
  417. serialNumber: null,
  418. columnType: null,
  419. align: null
  420. },
  421. {
  422. tableId: "ProjectInfo",
  423. tableName: this.$route.meta.title,
  424. columnProp: "updatedDate",
  425. columnLabel: "修改时间",
  426. columnHidden: false,
  427. columnImage: false,
  428. columnSortable: false,
  429. columnWidth: 140,
  430. format: null,
  431. functionId: this.$route.meta.menuId,
  432. sortLv: 0,
  433. status: true,
  434. fixed: '',
  435. serialNumber: null,
  436. columnType: null,
  437. align: null
  438. },
  439. ],
  440. dataList: [],
  441. selectRow: {
  442. id: 0,
  443. finalStatus: '',
  444. },
  445. dataListLoading: false,
  446. dataListSelections: [],
  447. chatHistoryVisible: false,
  448. statusVisible: false,
  449. taskFileVisible: false,
  450. addOrUpdateVisible: false,
  451. exportName: this.$route.meta.title + this.dayjs().format('YYYYMMDDHHmmss')
  452. }
  453. },
  454. components: {
  455. ChatHistory,
  456. TaskFileList,
  457. AddOrUpdate,
  458. },
  459. activated() {
  460. // this.getDataList()
  461. },
  462. mounted() {
  463. this.$nextTick(() => {
  464. this.height = window.innerHeight - 200;
  465. })
  466. },
  467. methods: {
  468. // 获取数据列表
  469. getDataList() {
  470. this.dataListLoading = true
  471. getTaskDetailList(this.dataForm).then(({data}) => {
  472. if (data && data.code === 0) {
  473. this.dataList = data.data
  474. } else {
  475. this.dataList = []
  476. }
  477. this.dataListLoading = false
  478. })
  479. },
  480. // 多选
  481. selectionChangeHandle(val) {
  482. this.dataListSelections = val
  483. },
  484. // 更改状态模态框
  485. updateStatusDialog(row) {
  486. this.selectRow.finalStatus = row.finalStatus
  487. this.selectRow.id = row.taskId
  488. this.statusVisible = true;
  489. },
  490. // 更改状态提交
  491. updateStatus() {
  492. updateTask(this.selectRow).then(({data}) =>{
  493. if (data && data.code == 0 ){
  494. this.statusVisible = false
  495. this.$message.success(data.msg)
  496. this.getDataList()
  497. }else {
  498. this.$message.warning(data.msg)
  499. }
  500. })
  501. },
  502. // 沟通记录
  503. chatHistoryDialog(id){
  504. this.chatHistoryVisible = true
  505. this.$nextTick(() => {
  506. this.$refs.chatHistory.init(id)
  507. })
  508. },
  509. // 附件
  510. annex(id) {
  511. this.taskFileVisible = true
  512. let dto = {
  513. fileTypeCode: 'TASK',
  514. orderRef2:id
  515. }
  516. this.$nextTick(() => {
  517. this.$refs.taskFileList.init(dto)
  518. })
  519. },
  520. // 删除
  521. deleteHandle(id) {
  522. var ids = id ? [id] : this.dataListSelections.map(item => {
  523. return item.id
  524. })
  525. this.$confirm(`确定进行删除操作?`, '提示', {
  526. confirmButtonText: '确定',
  527. cancelButtonText: '取消',
  528. type: 'warning'
  529. }).then(() => {
  530. this.$http({
  531. url: this.$http.adornUrl('/taskmanage/taskDetail/delete'),
  532. method: 'post',
  533. data: this.$http.adornData(ids, false)
  534. }).then(({data}) => {
  535. if (data && data.code === 0) {
  536. this.$message.success('操作成功')
  537. this.getDataList()
  538. } else {
  539. this.$message.error(data.msg)
  540. }
  541. })
  542. })
  543. },
  544. // 新增 / 修改
  545. addOrUpdateHandle(id) {
  546. this.addOrUpdateVisible = true
  547. this.$nextTick(() => {
  548. this.$refs.addOrUpdate.init(id)
  549. })
  550. },
  551. // 导出
  552. fields() {
  553. let json = "{"
  554. this.columnList.forEach((item, index) => {
  555. if (index == this.columnList.length - 1) {
  556. json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
  557. } else {
  558. json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
  559. }
  560. })
  561. json += "}"
  562. let s = eval("(" + json + ")")
  563. return s
  564. },
  565. createExportData() {
  566. // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
  567. return this.dataList;
  568. },
  569. }
  570. }
  571. </script>
  572. <style>
  573. </style>