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

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