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

513 lines
17 KiB

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