赫艾前端
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.

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