myTask.vue 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
  1. <template>
  2. <!-- <div class="app-container">-->
  3. <div>
  4. <el-card shadow="hover">
  5. <!-- 查询表单区域 -->
  6. <el-form :model="queryParams" ref="queryForm" size="small" inline label-position="top">
  7. <el-row :gutter="20">
  8. <el-col :span="6">
  9. <el-form-item label="项目名称" prop="projectName">
  10. <el-input v-model.trim="queryParams.projectName" placeholder="请输入项目名称" clearable
  11. @keyup.enter.native="handleQuery" />
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="6">
  15. <el-form-item label="项目负责人" prop="investHead">
  16. <el-input v-model.trim="queryParams.investHead" placeholder="请输入项目负责人" clearable
  17. @keyup.enter.native="handleQuery" />
  18. </el-form-item>
  19. </el-col>
  20. <el-col :span="6">
  21. <el-form-item label="公司联系人" prop="projectContacts">
  22. <el-input v-model.trim="queryParams.projectContacts" placeholder="请输入公司联系人" clearable
  23. @keyup.enter.native="handleQuery" />
  24. </el-form-item>
  25. </el-col>
  26. <el-col :span="6">
  27. <el-form-item label="渠道" prop="channel">
  28. <el-select v-model="queryParams.channel" placeholder="全部" clearable style="width: 100%;">
  29. <el-option v-for="item in channelList" :key="item.id" :label="item.channelName" :value="item.id" />
  30. <el-option label="无" value="-1" />
  31. </el-select>
  32. </el-form-item>
  33. </el-col>
  34. </el-row>
  35. <el-row :gutter="20">
  36. <el-col :span="6">
  37. <el-form-item label="所属组别" prop="projectGroup">
  38. <el-select v-model="queryParams.projectGroup" placeholder="全部" clearable style="width: 100%;">
  39. <el-option v-for="dict in dict.type.project_group" :key="dict.value" :label="dict.label"
  40. :value="dict.value" />
  41. </el-select>
  42. </el-form-item>
  43. </el-col>
  44. <el-col :span="6">
  45. <el-form-item label="项目公司" prop="company">
  46. <el-input v-model.trim="queryParams.company" placeholder="请输入项目所属公司" clearable
  47. @keyup.enter.native="handleQuery" />
  48. </el-form-item>
  49. </el-col>
  50. <el-col :span="6"></el-col>
  51. <el-col :span="6"></el-col>
  52. </el-row>
  53. <!-- 可继续扩展其他查询表单项目,比如项目编号、负责人等 -->
  54. <el-row :gutter="20">
  55. <el-col :span="6">
  56. <el-form-item label="搜索">
  57. <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  58. </el-form-item>
  59. </el-col>
  60. <el-col :span="6">
  61. <el-form-item label="重置">
  62. <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="6">
  66. <el-form-item label="导出">
  67. <el-button style="width: 100%;" type="warning" plain icon="el-icon-download"
  68. @click="exportQuery">导出</el-button>
  69. </el-form-item>
  70. </el-col>
  71. </el-row>
  72. </el-form>
  73. <!-- Tab 切换区域 -->
  74. <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
  75. <el-tab-pane label="待办任务" name="list1">
  76. <!-- 列表一内容 -->
  77. <el-table height="450" ref="dataTable" @row-click="clickRow" class="tableWrapper" v-loading="loading" border
  78. :data="myTaskList">
  79. <!-- <el-table-column type="selection" width="40" align="center" />-->
  80. <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
  81. <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
  82. <el-table-column label="项目名称" align="center" prop="projectName" width="200">
  83. <template slot-scope="scope">
  84. <div :title="scope.row.projectName">
  85. {{ scope.row.projectName }}
  86. </div>
  87. </template>
  88. </el-table-column>
  89. <el-table-column label="公司名称" align="center" prop="tProjectCompany.companyName">
  90. <template slot-scope="scope">
  91. <div :title="scope.row.tProjectCompany.companyName">
  92. {{ scope.row.tProjectCompany.companyName }}
  93. </div>
  94. </template>
  95. </el-table-column>
  96. <el-table-column label="所属行业" align="center" prop="industry"><template slot-scope="scope">
  97. <dict-tag :options="dict.type.CUSTOMER_TRADE" :value="scope.row.industry" />
  98. </template>
  99. </el-table-column>
  100. <!-- <el-table-column label="项目阶段" align="center" prop="projectStage">
  101. <template slot-scope="scope">
  102. <dict-tag
  103. :options="dict.type.project_stage"
  104. :value="scope.row.projectStage"
  105. />
  106. </template>
  107. </el-table-column>-->
  108. <!-- <el-table-column
  109. label="项目状态"
  110. align="center"
  111. prop="projectState"
  112. width="120"
  113. >
  114. <template slot-scope="scope">
  115. <dict-tag
  116. :options="dict.type.project_state"
  117. :value="scope.row.projectState"
  118. />
  119. </template>
  120. </el-table-column>-->
  121. <!-- <el-table-column
  122. label="备案时间"
  123. align="center"
  124. prop="tProjectCompany.filingTime"
  125. >
  126. <template slot-scope="scope">
  127. <span>{{
  128. parseTime(scope.row.tProjectCompany.filingTime, "{y}-{m}-{d}")
  129. }}</span>
  130. </template>
  131. </el-table-column>-->
  132. <!-- <el-table-column label="项目机会状态" align="center" prop="projectStatus">
  133. <template slot-scope="scope">
  134. &lt;!&ndash; 定义状态文本映射对象 &ndash;&gt;
  135. <el-tag
  136. :type="{
  137. 0: 'success',
  138. 1: 'danger',
  139. 2: 'warning'
  140. }[scope.row.projectStatus] || 'info'"
  141. >
  142. {{ {
  143. 0: '正常',
  144. 1: '终止',
  145. 2: '观望'
  146. }[scope.row.projectStatus] || '未知状态' }}
  147. </el-tag>
  148. </template>
  149. </el-table-column>-->
  150. <el-table-column label="项目负责人" align="center" prop="investHead">
  151. <template slot-scope="scope">
  152. <div :title="scope.row.investHead">
  153. {{ scope.row.investHead }}
  154. </div>
  155. </template>
  156. </el-table-column>
  157. <!-- <el-table-column label="项目编号" align="center" prop="projectCode" /> -->
  158. <el-table-column label="渠道" align="center" prop="tProjectChannel.channelName">
  159. <template slot-scope="scope">
  160. <div v-if="
  161. scope.row.tProjectChannel && scope.row.tProjectChannel.channelName
  162. " :title="scope.row.tProjectChannel.channelName">
  163. {{ scope.row.tProjectChannel.channelName }}
  164. </div>
  165. <div v-else-if="scope.row.channel=='1'" >
  166. 直接触达
  167. </div>
  168. <div v-else="scope.row.channel=='2'" >
  169. 内部推荐
  170. </div>
  171. </template>
  172. </el-table-column>
  173. <!-- delFlag -->
  174. <el-table-column label="状态" align="center" prop="delFlag">
  175. <template slot-scope="scope">
  176. <div :title="scope.row.delFlag === '1' ? '终止' : '正常'">
  177. {{ scope.row.delFlag === "1" ? "终止" : "正常" }}
  178. </div>
  179. </template>
  180. </el-table-column>
  181. <el-table-column label="申请人" align="center" prop="startUserName">
  182. <template slot-scope="scope">
  183. <div :title="scope.row.startUserName">
  184. {{ scope.row.startUserName }}
  185. </div>
  186. </template>
  187. </el-table-column>
  188. <!-- <el-table-column label="申请人" align="center" prop="startUserName">
  189. <template slot-scope="scope">
  190. <div :title="scope.row.startUserName">
  191. {{ scope.row.startUserName }}
  192. </div>
  193. </template>
  194. </el-table-column>-->
  195. <el-table-column label="申请日期" align="center" prop="createTime">
  196. <template slot-scope="scope">
  197. <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
  198. </template>
  199. </el-table-column>
  200. <el-table-column label="当前节点" align="center" prop="taskName">
  201. <template slot-scope="scope">
  202. <div :title="scope.row.taskName" class="public-text-blue public-cursor"
  203. @click="handleReadImage(scope.row)">
  204. {{ scope.row.taskName }}
  205. </div>
  206. </template>
  207. </el-table-column>
  208. <el-table-column label="当前处理人" align="center" prop="assigneeName">
  209. <template slot-scope="scope">
  210. <div :title="scope.row.assigneeName">
  211. {{ scope.row.assigneeName }}
  212. </div>
  213. </template>
  214. </el-table-column>
  215. <el-table-column label="流程状态" align="center" prop="status">
  216. <template slot-scope="scope">
  217. <div :title="scope.row.status">
  218. <span v-if="scope.row.status === 0">暂存</span>
  219. <span v-else-if="scope.row.status === 1">已提交</span>
  220. <span v-else-if="scope.row.status === 2">审批中</span>
  221. <span v-else-if="scope.row.status === 3">审批完成</span>
  222. <span v-else-if="scope.row.status === 4">关闭</span>
  223. </div>
  224. </template>
  225. </el-table-column>
  226. <el-table-column label="操作" align="center" width="90" class-name="small-padding fixed-width">
  227. <template slot-scope="scope">
  228. <el-button v-if="scope.row.taskDefKey == 'modifyApply'" type="text" size="small"
  229. @click="handleEdit(scope.row)">处理</el-button>
  230. <template v-else>
  231. <!-- 1. 签收按钮:无签收人时显示 -->
  232. <el-button v-if="!scope.row.assignee" type="text" size="small"
  233. @click="handleSign(scope.row)">签收</el-button>
  234. <!-- 2. 处理按钮:有签收人时显示 -->
  235. <el-button v-else type="text" size="small" @click="handleProcess(scope.row)">处理</el-button>
  236. <!-- 3. 撤回按钮:需补充逻辑(比如仅未签收可撤回,可结合 signPerson 判断) -->
  237. <!-- <el-button v-if="!scope.row.assignee" size="mini" type="text" icon="el-icon-refresh-right" @click="handleWithdraw(scope.row)">撤回</el-button>-->
  238. <!-- 4. 详情按钮:一直显示 -->
  239. </template>
  240. <el-button style="color:#1890ff" type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
  241. </template>
  242. </el-table-column>
  243. </el-table>
  244. <!-- 分页 -->
  245. <pagination v-show="myTaskTotal > 0" :total="myTaskTotal" :page.sync="queryParams.pageNum"
  246. :limit.sync="queryParams.pageSize" @pagination="getMyTaskList" />
  247. </el-tab-pane>
  248. <el-tab-pane label="已办任务" name="list2">
  249. <!-- 我的单据表格 -->
  250. <!-- 列表一内容 -->
  251. <el-table height="450" ref="dataTable" @row-click="clickRow" class="tableWrapper" v-loading="loading" border
  252. :data="myDoneTaskList">
  253. <!-- <el-table-column type="selection" width="40" align="center" />-->
  254. <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
  255. <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
  256. <el-table-column label="项目名称" align="center" prop="projectName" width="200">
  257. <template slot-scope="scope">
  258. <div :title="scope.row.projectName">
  259. {{ scope.row.projectName }}
  260. </div>
  261. </template>
  262. </el-table-column>
  263. <el-table-column label="公司名称" align="center" prop="tProjectCompany.companyName">
  264. <template slot-scope="scope">
  265. <div :title="scope.row.tProjectCompany.companyName">
  266. {{ scope.row.tProjectCompany.companyName }}
  267. </div>
  268. </template>
  269. </el-table-column>
  270. <el-table-column label="所属行业" align="center" prop="industry"><template slot-scope="scope">
  271. <dict-tag :options="dict.type.CUSTOMER_TRADE" :value="scope.row.industry" />
  272. </template>
  273. </el-table-column>
  274. <!-- <el-table-column label="项目阶段" align="center" prop="projectStage">
  275. <template slot-scope="scope">
  276. <dict-tag
  277. :options="dict.type.project_stage"
  278. :value="scope.row.projectStage"
  279. />
  280. </template>
  281. </el-table-column>-->
  282. <!-- <el-table-column
  283. label="项目状态"
  284. align="center"
  285. prop="projectState"
  286. width="120"
  287. >
  288. <template slot-scope="scope">
  289. <dict-tag
  290. :options="dict.type.project_state"
  291. :value="scope.row.projectState"
  292. />
  293. </template>
  294. </el-table-column>-->
  295. <!-- <el-table-column label="项目机会状态" align="center" prop="projectStatus">
  296. <template slot-scope="scope">
  297. &lt;!&ndash; 定义状态文本映射对象 &ndash;&gt;
  298. <el-tag
  299. :type="{
  300. 0: 'success',
  301. 1: 'danger',
  302. 2: 'warning'
  303. }[scope.row.projectStatus] || 'info'"
  304. >
  305. {{ {
  306. 0: '正常',
  307. 1: '终止',
  308. 2: '观望'
  309. }[scope.row.projectStatus] || '未知状态' }}
  310. </el-tag>
  311. </template>
  312. </el-table-column>-->
  313. <!-- <el-table-column
  314. label="备案时间"
  315. align="center"
  316. prop="tProjectCompany.filingTime"
  317. >
  318. <template slot-scope="scope">
  319. <span>{{
  320. parseTime(scope.row.tProjectCompany.filingTime, "{y}-{m}-{d}")
  321. }}</span>
  322. </template>
  323. </el-table-column>-->
  324. <el-table-column label="项目负责人" align="center" prop="investHead">
  325. <template slot-scope="scope">
  326. <div :title="scope.row.investHead">
  327. {{ scope.row.investHead }}
  328. </div>
  329. </template>
  330. </el-table-column>
  331. <el-table-column label="渠道" align="center" prop="tProjectChannel.channelName">
  332. <template slot-scope="scope">
  333. <div v-if="
  334. scope.row.tProjectChannel && scope.row.tProjectChannel.channelName
  335. " :title="scope.row.tProjectChannel.channelName">
  336. {{ scope.row.tProjectChannel.channelName }}
  337. </div>
  338. <div v-else-if="scope.row.channel=='1'" >
  339. 直接触达
  340. </div>
  341. <div v-else="scope.row.channel=='2'" >
  342. 内部推荐
  343. </div>
  344. </template>
  345. </el-table-column>
  346. <!-- delFlag -->
  347. <el-table-column label="状态" align="center" prop="delFlag">
  348. <template slot-scope="scope">
  349. <div :title="scope.row.delFlag === '1' ? '终止' : '正常'">
  350. {{ scope.row.delFlag === "1" ? "终止" : "正常" }}
  351. </div>
  352. </template>
  353. </el-table-column>
  354. <el-table-column label="申请人" align="center" prop="startUserName">
  355. <template slot-scope="scope">
  356. <div :title="scope.row.startUserName">
  357. {{ scope.row.startUserName }}
  358. </div>
  359. </template>
  360. </el-table-column>
  361. <el-table-column label="申请日期" align="center" prop="createTime">
  362. <template slot-scope="scope">
  363. <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
  364. </template>
  365. </el-table-column>
  366. <el-table-column label="当前节点" align="center" prop="taskName">
  367. <template slot-scope="scope">
  368. <div v-if="scope.row.deployId !== null && scope.row.deployId !== undefined && scope.row.deployId !== ''"
  369. :title="scope.row.taskName" class="public-text-blue public-cursor"
  370. @click="handleReadImage(scope.row)">
  371. {{ scope.row.taskName }}
  372. </div>
  373. <div v-else :title="scope.row.taskName">
  374. {{ scope.row.taskName }}
  375. </div>
  376. </template>
  377. </el-table-column>
  378. <el-table-column label="当前处理人" align="center" prop="assigneeName">
  379. <template slot-scope="scope">
  380. <div :title="scope.row.assigneeName">
  381. {{ scope.row.assigneeName }}
  382. </div>
  383. </template>
  384. </el-table-column>
  385. <el-table-column label="流程状态" align="center" prop="status">
  386. <template slot-scope="scope">
  387. <div :title="scope.row.status">
  388. <span v-if="scope.row.status === 0">暂存</span>
  389. <span v-else-if="scope.row.status === 1">已提交</span>
  390. <span v-else-if="scope.row.status === 2">审批中</span>
  391. <span v-else-if="scope.row.status === 3">审批完成</span>
  392. <span v-else-if="scope.row.status === 4">关闭</span>
  393. </div>
  394. </template>
  395. </el-table-column>
  396. <el-table-column label="操作" align="center" width="70" class-name="small-padding fixed-width">
  397. <template slot-scope="scope">
  398. <el-button style="color:#1890ff" type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
  399. </template>
  400. </el-table-column>
  401. </el-table>
  402. <!-- 分页 -->
  403. <pagination v-show="myDoneTaskTotal > 0" :total="myDoneTaskTotal" :page.sync="queryParams.pageNum"
  404. :limit.sync="queryParams.pageSize" @pagination="getMyDoneTaskList" />
  405. </el-tab-pane>
  406. <el-tab-pane label="我的单据" name="list3">
  407. <!-- 我的单据表格 -->
  408. <!-- 列表一内容 -->
  409. <el-table height="450" ref="dataTable" @row-click="clickRow" class="tableWrapper" v-loading="loading" border
  410. :data="myList">
  411. <!-- <el-table-column type="selection" width="40" align="center" />-->
  412. <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
  413. <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
  414. <el-table-column label="项目名称" align="center" prop="projectName" width="200">
  415. <template slot-scope="scope">
  416. <div :title="scope.row.projectName">
  417. {{ scope.row.projectName }}
  418. </div>
  419. </template>
  420. </el-table-column>
  421. <el-table-column label="公司名称" align="center" prop="tProjectCompany.companyName">
  422. <template slot-scope="scope">
  423. <div :title="scope.row.tProjectCompany.companyName">
  424. {{ scope.row.tProjectCompany.companyName }}
  425. </div>
  426. </template>
  427. </el-table-column>
  428. <el-table-column label="所属行业" align="center" prop="industry"><template slot-scope="scope">
  429. <dict-tag :options="dict.type.CUSTOMER_TRADE" :value="scope.row.industry" />
  430. </template>
  431. </el-table-column>
  432. <!-- <el-table-column label="项目阶段" align="center" prop="projectStage">
  433. <template slot-scope="scope">
  434. <dict-tag
  435. :options="dict.type.project_stage"
  436. :value="scope.row.projectStage"
  437. />
  438. </template>
  439. </el-table-column>-->
  440. <!-- <el-table-column
  441. label="项目状态"
  442. align="center"
  443. prop="projectState"
  444. width="120"
  445. >
  446. <template slot-scope="scope">
  447. <dict-tag
  448. :options="dict.type.project_state"
  449. :value="scope.row.projectState"
  450. />
  451. </template>
  452. </el-table-column>-->
  453. <!-- <el-table-column label="项目机会状态" align="center" prop="projectStatus">
  454. <template slot-scope="scope">
  455. &lt;!&ndash; 定义状态文本映射对象 &ndash;&gt;
  456. <el-tag
  457. :type="{
  458. 0: 'success',
  459. 1: 'danger',
  460. 2: 'warning'
  461. }[scope.row.projectStatus] || 'info'"
  462. >
  463. {{ {
  464. 0: '正常',
  465. 1: '终止',
  466. 2: '观望'
  467. }[scope.row.projectStatus] || '未知状态' }}
  468. </el-tag>
  469. </template>
  470. </el-table-column>-->
  471. <!-- <el-table-column
  472. label="备案时间"
  473. align="center"
  474. prop="tProjectCompany.filingTime"
  475. >
  476. <template slot-scope="scope">
  477. <span>{{
  478. parseTime(scope.row.tProjectCompany.filingTime, "{y}-{m}-{d}")
  479. }}</span>
  480. </template>
  481. </el-table-column>-->
  482. <el-table-column label="项目负责人" align="center" prop="investHead">
  483. <template slot-scope="scope">
  484. <div :title="scope.row.investHead">
  485. {{ scope.row.investHead }}
  486. </div>
  487. </template>
  488. </el-table-column>
  489. <el-table-column label="渠道" align="center" prop="tProjectChannel.channelName">
  490. <template slot-scope="scope">
  491. <div v-if="
  492. scope.row.tProjectChannel && scope.row.tProjectChannel.channelName
  493. " :title="scope.row.tProjectChannel.channelName">
  494. {{ scope.row.tProjectChannel.channelName }}
  495. </div>
  496. <div v-else-if="scope.row.channel=='1'" >
  497. 直接触达
  498. </div>
  499. <div v-else="scope.row.channel=='2'" >
  500. 内部推荐
  501. </div>
  502. </template>
  503. </el-table-column>
  504. <!-- delFlag -->
  505. <el-table-column label="状态" align="center" prop="delFlag">
  506. <template slot-scope="scope">
  507. <div :title="scope.row.delFlag === '1' ? '终止' : '正常'">
  508. {{ scope.row.delFlag === "1" ? "终止" : "正常" }}
  509. </div>
  510. </template>
  511. </el-table-column>
  512. <el-table-column label="申请人" align="center" prop="startUserName">
  513. <template slot-scope="scope">
  514. <div :title="scope.row.startUserName">
  515. {{ scope.row.startUserName }}
  516. </div>
  517. </template>
  518. </el-table-column>
  519. <el-table-column label="申请日期" align="center" prop="createTime">
  520. <template slot-scope="scope">
  521. <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
  522. </template>
  523. </el-table-column>
  524. <el-table-column label="当前节点" align="center" prop="taskName">
  525. <template slot-scope="scope">
  526. <div :title="scope.row.taskName" class="public-text-blue public-cursor"
  527. @click="handleReadImage(scope.row)">
  528. {{ scope.row.taskName }}
  529. </div>
  530. </template>
  531. </el-table-column>
  532. <el-table-column label="当前处理人" align="center" prop="assigneeName">
  533. <template slot-scope="scope">
  534. <div :title="scope.row.assigneeName">
  535. {{ scope.row.assigneeName }}
  536. </div>
  537. </template>
  538. </el-table-column>
  539. <el-table-column label="流程状态" align="center" prop="status">
  540. <template slot-scope="scope">
  541. <div :title="scope.row.status">
  542. <span v-if="scope.row.status === 0">暂存</span>
  543. <span v-else-if="scope.row.status === 1">已提交</span>
  544. <span v-else-if="scope.row.status === 2">审批中</span>
  545. <span v-else-if="scope.row.status === 3">审批完成</span>
  546. <span v-else-if="scope.row.status === 4">关闭</span>
  547. </div>
  548. </template>
  549. </el-table-column>
  550. <el-table-column label="操作" align="center" width="70" class-name="small-padding fixed-width">
  551. <template slot-scope="scope">
  552. <el-button style="color:#1890ff" type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
  553. </template>
  554. </el-table-column>
  555. </el-table>
  556. <!-- 分页 -->
  557. <pagination v-show="myTotal > 0" :total="myTotal" :page.sync="queryParams.pageNum"
  558. :limit.sync="queryParams.pageSize" @pagination="getMyList" />
  559. </el-tab-pane>
  560. </el-tabs>
  561. </el-card>
  562. <!-- Flowable 流程图弹窗 -->
  563. <!-- 流程图 -->
  564. <el-dialog :title="readImage.title" :visible.sync="readImage.open" width="70%" append-to-body>
  565. <!-- <el-image :src="readImage.src"></el-image> -->
  566. <flow :flowData="flowData" />
  567. </el-dialog>
  568. </div>
  569. </template>
  570. <script>
  571. import { getMyTaskList, getMyDoneTaskList, getMyList } from "@/api/project/investOpp/pool";
  572. import { flowXmlAndNode } from "@/api/flowable/definition";
  573. import { listChannel } from "@/api/invest/channel";
  574. import dueDiligenceList from "../../invest/components/dueDiligenceList.vue";
  575. import followList from "../../invest/components/followList.vue";
  576. import meetingList from "../../invest/components/meetingList.vue";
  577. import businessUpdate from "../../invest/components/businessUpdate.vue";
  578. import flow from '@/views/flowable/task/todo/detail/flow';
  579. import { mapGetters } from "vuex";
  580. export default {
  581. dicts: ["project_group", "project_stage", "project_state", "CUSTOMER_TRADE"],
  582. components: {
  583. dueDiligenceList,
  584. followList,
  585. meetingList,
  586. businessUpdate,
  587. flow
  588. },
  589. data() {
  590. return {
  591. // 当前激活的 Tab
  592. activeTab: "list1",
  593. // 遮罩层
  594. loading: false,
  595. // 查询参数
  596. queryParams: {
  597. id: null,
  598. pageNum: 1,
  599. pageSize: 10,
  600. projectName: null,
  601. projectGroup: "",
  602. projectCode: null,
  603. channel: null,
  604. contactDate: null,
  605. projectDate: null,
  606. decisionDate: null,
  607. industry: null,
  608. company: null,
  609. projectContacts: null,
  610. investHead: null,
  611. previousFinancing: null,
  612. financingStage: null,
  613. financingMoney: null,
  614. financingDate: null,
  615. investValuation: null,
  616. investMoney: null,
  617. investType: null,
  618. investPloy: null,
  619. investWorth: null,
  620. projectStage: null,
  621. projectState: null,
  622. orderByColumn: "createTime",
  623. isAsc: "desc",
  624. createTime: null,
  625. },
  626. // 数据列表(分开存储不同Tab的数据)
  627. myTaskList: [], // 待办任务数据
  628. // 待办任务总条数,用于分页
  629. myTaskTotal: 0,
  630. myDoneTaskList: [], // 已办任务数据
  631. // 已办任务总条数,用于分页
  632. myDoneTaskTotal: 0,
  633. myList: [], // 我的单据数据
  634. // 我的单据总条数,用于分页
  635. myTotal: 0,
  636. channelList: [], //渠道
  637. //流程图信息
  638. readImage: {
  639. open: false,
  640. src: "",
  641. },
  642. // xml
  643. flowData: {},
  644. };
  645. },
  646. computed: {
  647. ...mapGetters(["user"]),
  648. },
  649. created() {
  650. // 页面初始化时,加载当前激活Tab的数据
  651. this.initTabData();
  652. },
  653. mounted() {
  654. // 渠道
  655. listChannel({
  656. pageNum: 1,
  657. pageSize: 100,
  658. }).then((response) => {
  659. this.channelList = response.rows;
  660. });
  661. },
  662. methods: {
  663. // Tab切换事件处理
  664. handleTabClick(tab) {
  665. // tab为当前点击的Tab对象,tab.name即标识(list1/list2)
  666. this.activeTab = tab.name;
  667. // 根据Tab标识加载对应数据
  668. this.initTabData();
  669. },
  670. // 初始化当前Tab数据(支持传入Tab名,默认用activeTab)
  671. initTabData() {
  672. switch (this.activeTab) {
  673. case "list1":
  674. // 待办任务:调用待办查询方法
  675. this.getMyTaskList();
  676. break;
  677. case "list2":
  678. // 已办任务:调用已办查询方法
  679. this.getMyDoneTaskList();
  680. break;
  681. case "list3":
  682. // 我的单据:调用单据查询方法
  683. this.getMyList();
  684. break;
  685. default:
  686. break;
  687. }
  688. },
  689. // 1. 查询“我的待办任务”数据
  690. getMyTaskList() {
  691. this.loading = true;
  692. // 调用待办任务接口(示例)
  693. getMyTaskList(this.queryParams).then((response) => {
  694. this.myTaskList = response.rows; // 表格数据
  695. this.myTaskTotal = response.total; // 分页总条数
  696. this.loading = false;
  697. }).catch(() => {
  698. this.loading = false;
  699. });
  700. },
  701. // 2. 查询“我的已办任务”数据
  702. getMyDoneTaskList() {
  703. this.loading = true;
  704. // 调用待办任务接口(示例)
  705. getMyDoneTaskList(this.queryParams).then((response) => {
  706. this.myDoneTaskList = response.rows; // 表格数据
  707. this.myDoneTaskTotal = response.total; // 分页总条数
  708. this.loading = false;
  709. }).catch(() => {
  710. this.loading = false;
  711. });
  712. },
  713. // 3. 查询“我的单据”数据
  714. getMyList() {
  715. this.loading = true;
  716. // 调用我的单据接口(示例)
  717. getMyList(this.queryParams).then((response) => {
  718. this.myList = response.rows;
  719. this.myTotal = response.total;
  720. this.loading = false;
  721. }).catch(() => {
  722. this.loading = false;
  723. });
  724. },
  725. /** 搜索按钮操作 */
  726. handleQuery() {
  727. this.queryParams.pageNum = 1;
  728. this.initTabData();
  729. },
  730. /** 重置按钮操作 */
  731. resetQuery() {
  732. this.resetForm("queryForm");
  733. this.queryParams.orderByColumn = "createTime";
  734. this.queryParams.isAsc = "desc";
  735. this.queryParams.pageNum = 1;
  736. this.queryParams.pageSize = 10;
  737. this.handleQuery();
  738. },
  739. /*导出*/
  740. exportQuery() {
  741. switch (this.activeTab) {
  742. case "list1":
  743. // 待办任务:调用待办导出方法
  744. this.handleExportMyTask();
  745. break;
  746. case "list2":
  747. // 已办任务:调用已办导出方法
  748. this.handleExportMyDoneTask();
  749. break;
  750. case "list3":
  751. // 我的单据:调用单据导出方法
  752. this.handleExportMy();
  753. break;
  754. default:
  755. break;
  756. }
  757. },
  758. /** 导出按钮操作 */
  759. handleExportMyTask() {
  760. this.download(
  761. "project/investmentOpportunity/exportMyTask",
  762. {
  763. ...this.queryParams,
  764. },
  765. `MyTask_${new Date().getTime()}.xlsx`
  766. );
  767. },
  768. handleExportMyDoneTask() {
  769. this.download(
  770. "project/investmentOpportunity/exportMyDoneTask",
  771. {
  772. ...this.queryParams,
  773. },
  774. `MyDoneTask_${new Date().getTime()}.xlsx`
  775. );
  776. },
  777. handleExportMy() {
  778. this.download(
  779. "project/investmentOpportunity/exportMy",
  780. {
  781. ...this.queryParams,
  782. },
  783. `My_${new Date().getTime()}.xlsx`
  784. );
  785. },
  786. clickRow(row) {
  787. this.$refs.dataTable.toggleRowSelection(row);
  788. },
  789. // 跳转到处理页面(暂存节点页面)
  790. handleEdit(row) {
  791. const id = row.id || this.ids;
  792. const pInstId = row.procInstId;
  793. this.$router.push({ path: "/myTask/project/investOpp/edit", query: { id: id, pInstId: pInstId } });
  794. },
  795. // 签收操作
  796. handleSign(row) {
  797. // 标记签收人、更新状态等逻辑
  798. row.signPerson = '当前用户';
  799. this.$message.success('签收成功');
  800. },
  801. // 跳转到处理页面
  802. handleProcess(row) {
  803. /*this.$router.push({ path: '/flowable/task/todo/detail/index',
  804. query: {
  805. procInsId: row.procInsId,
  806. executionId: row.executionId,
  807. deployId: row.deployId,
  808. taskId: row.taskId,
  809. taskName: row.taskName,
  810. startUser: row.startUserName + '-' + row.startDeptName,
  811. }})*/
  812. const id = row.id || this.ids;
  813. const pInstId = row.procInstId;
  814. this.$router.push({ path: "/myTask/project/investOpp/audit", query: { id: id, pInstId: pInstId } });
  815. },
  816. // 撤回操作
  817. handleWithdraw(row) {
  818. // 撤回逻辑(比如清空签收人)
  819. row.signPerson = '';
  820. this.$message.success('已撤回');
  821. },
  822. // 详情操作
  823. /*handleFlowRecord(row) {
  824. // 查看流程详情逻辑
  825. console.log('流程详情:', row);
  826. }*/
  827. /*详情*/
  828. handleDetail(row) {
  829. const id = row.id || this.ids;
  830. const pInstId = row.procInstId;
  831. this.$router.push({ path: "/myTask/project/investOpp/detail", query: { id: id, pInstId: pInstId } });
  832. },
  833. /** 修改按钮操作 */
  834. handleUpdate(row) {
  835. const id = row.id;
  836. this.$router.push({ path: "/invest/pool/add", query: { id: id } });
  837. },
  838. /**终止按钮操作 */
  839. handleDelete(row) {
  840. const ids = row.id || this.ids;
  841. const idsName = row.projectName ? row.projectName : this.idsName;
  842. this.$modal
  843. .confirm('是否终止"' + idsName + '"项目?')
  844. .then(function () {
  845. return delPool(ids);
  846. })
  847. .then(() => {
  848. this.getList();
  849. this.$modal.msgSuccess("已终止");
  850. })
  851. .catch(() => { });
  852. },
  853. /** 流程图查看 */
  854. handleReadImage(row) {
  855. this.readImage.title = "流程图";
  856. this.readImage.open = true;
  857. // this.readImage.src = process.env.VUE_APP_BASE_API + "/flowable/definition/readImage/" + deploymentId;
  858. flowXmlAndNode({ procInsId: row.procInstId, deployId: row.deployId }).then(res => {
  859. this.flowData = res.data;
  860. })
  861. },
  862. },
  863. };
  864. </script>
  865. <style lang="scss" scoped>
  866. .tableWrapper {
  867. font-size: 12px;
  868. color: #000;
  869. ::v-deep .el-table__header-wrapper th {
  870. font-size: 12px;
  871. font-weight: bolder;
  872. color: #000;
  873. }
  874. ::v-deep td.el-table__cell:not(:last-child) div {
  875. text-overflow: -o-ellipsis-lastline;
  876. overflow: hidden;
  877. text-overflow: ellipsis;
  878. display: -webkit-box;
  879. -webkit-line-clamp: 1;
  880. line-clamp: 1;
  881. -webkit-box-orient: vertical;
  882. }
  883. }
  884. /**找到表头那一行,然后把里面的复选框隐藏掉**/
  885. .hideHeaderCheckBox::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
  886. display: none;
  887. }
  888. </style>