index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  5. <el-form-item label="状态" prop="status">
  6. <el-select v-model="queryParams.status" placeholder="请选择状态">
  7. <el-option
  8. v-for="dict in leaveStatusData"
  9. :key="parseInt(dict.value)"
  10. :label="dict.label"
  11. :value="parseInt(dict.value)"
  12. />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item>
  16. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  17. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  18. </el-form-item>
  19. </el-form>
  20. <!-- 列表 -->
  21. <el-table v-loading="loading" :data="list">
  22. <el-table-column label="任务Id" align="center" prop="id" />
  23. <el-table-column label="流程名称" align="center" prop="processName" />
  24. <el-table-column label="任务状态" align="center" :formatter="statusFormat" prop="status" />
  25. <!-- <el-table-column label="申请人id" align="center" prop="userId" />-->
  26. <!-- <el-table-column label="开始时间" align="center" prop="startTime" width="180">-->
  27. <!-- <template slot-scope="scope">-->
  28. <!-- <span>{{ parseTime(scope.row.startTime) }}</span>-->
  29. <!-- </template>-->
  30. <!-- </el-table-column>-->
  31. <!-- <el-table-column label="结束时间" align="center" prop="endTime" width="180">-->
  32. <!-- <template slot-scope="scope">-->
  33. <!-- <span>{{ parseTime(scope.row.endTime) }}</span>-->
  34. <!-- </template>-->
  35. <!-- </el-table-column>-->
  36. <!-- <el-table-column label="请假类型" align="center" prop="leaveType" />-->
  37. <!-- <el-table-column label="原因" align="center" prop="reason" />-->
  38. <!-- <el-table-column label="申请时间" align="center" prop="applyTime" width="180">-->
  39. <!-- <template slot-scope="scope">-->
  40. <!-- <span>{{ parseTime(scope.row.applyTime) }}</span>-->
  41. <!-- </template>-->
  42. <!-- </el-table-column>-->
  43. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  44. <template slot-scope="scope">
  45. <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.status == 1" @click="handleClaim(scope.row)">签收</el-button>
  46. <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.status == 2" @click="getTaskFormKey(scope.row)">办理</el-button>
  47. </template>
  48. </el-table-column>
  49. </el-table>
  50. <!-- 分页组件 -->
  51. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  52. @pagination="getList"/>
  53. <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  54. <el-tabs tab-position="left" style="height: 500px;">
  55. <el-tab-pane label="详情">
  56. <el-form ref="form" :model="handleTask.formObject" label-width="80px">
  57. <el-form-item label="状态" >
  58. {{ getDictDataLabel(DICT_TYPE.OA_LEAVE_STATUS, handleTask.formObject.status) }}
  59. </el-form-item>
  60. <el-form-item label="申请人id" >{{handleTask.formObject.userId}}</el-form-item>
  61. <el-form-item label="开始时间" >{{ parseTime(handleTask.formObject.startTime) }}</el-form-item>
  62. <el-form-item label="结束时间" prop="endTime">{{ parseTime(handleTask.formObject.endTime) }}</el-form-item>
  63. <el-form-item label="请假类型" prop="leaveType">
  64. {{ getDictDataLabel(DICT_TYPE.OA_LEAVE_TYPE, handleTask.formObject.leaveType) }}
  65. </el-form-item>
  66. <el-form-item label="原因" prop="reason">{{handleTask.formObject.reason}}</el-form-item>
  67. <el-form-item label="申请时间" prop="applyTime">{{ parseTime(handleTask.formObject.applyTime) }}</el-form-item>
  68. </el-form>
  69. </el-tab-pane>
  70. <el-tab-pane label="任务处理">
  71. <el-steps :active="handleTask.historyTask.length-1" simple finish-status="success">
  72. <el-step :title="item.stepName" icon="el-icon-edit" v-for="(item) in handleTask.historyTask" ></el-step>
  73. </el-steps>
  74. <br/>
  75. <el-steps direction="vertical" :active="handleTask.historyTask.length-1" finish-status="success" space="60px">
  76. <el-step :title="item.stepName" :description="item.comment" v-for="(item) in handleTask.historyTask" ></el-step>
  77. </el-steps>
  78. <br/>
  79. <el-form ref="taskForm" :model="task" label-width="80px" v-show="handleTask.taskVariable !=''">
  80. <el-form-item label="处理意见" prop="approved">
  81. <el-select v-model="task.approved" placeholder="处理意见">
  82. <el-option
  83. v-for="dict in approvedData"
  84. :key="parseInt(dict.value)"
  85. :label="dict.label"
  86. :value="parseInt(dict.value)"
  87. />
  88. </el-select>
  89. </el-form-item>
  90. <el-input
  91. type="textarea"
  92. :rows="2"
  93. v-model="task.comment">
  94. </el-input>
  95. </el-form>
  96. <br/>
  97. <el-button type="primary" @click="submitTask">提交</el-button>
  98. </el-tab-pane>
  99. </el-tabs>
  100. </el-dialog>
  101. </div>
  102. </template>
  103. <script>
  104. import { completeTask, taskSteps, getTaskFormKey,deleteLeave, getLeave, getTodoTaskPage, claimTask } from "@/api/oa/todo";
  105. import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
  106. export default {
  107. name: "Todo",
  108. components: {
  109. },
  110. data() {
  111. return {
  112. // 遮罩层
  113. loading: true,
  114. // 显示搜索条件
  115. showSearch: true,
  116. // 总条数
  117. total: 0,
  118. // 请假申请列表
  119. list: [],
  120. // 弹出层标题
  121. title: "",
  122. // 是否显示弹出层
  123. open: false,
  124. // 查询参数
  125. queryParams: {
  126. pageNo: 1,
  127. pageSize: 10
  128. },
  129. // 表单参数
  130. form: {},
  131. handleTask: {
  132. historyTask:[{
  133. stepName:"步骤一"
  134. }
  135. ],
  136. taskVariable: "",
  137. formObject: {}
  138. },
  139. steps:[{
  140. stepName:"步骤一"
  141. }],
  142. task: {
  143. approved : 1,
  144. variables: {},
  145. taskId: undefined,
  146. comment: ""
  147. },
  148. rules: {
  149. },
  150. leaveTypeDictData: getDictDatas(DICT_TYPE.OA_LEAVE_TYPE),
  151. leaveStatusData: getDictDatas(DICT_TYPE.OA_LEAVE_STATUS),
  152. approvedData: [
  153. {
  154. value: 1,
  155. label: '同意'
  156. },
  157. {
  158. value: 0,
  159. label: '不同意'
  160. }
  161. ]
  162. };
  163. },
  164. created() {
  165. this.getList();
  166. },
  167. methods: {
  168. /** 查询列表 */
  169. getList() {
  170. this.loading = true;
  171. // 处理查询参数
  172. let params = {...this.queryParams};
  173. // 执行查询
  174. getTodoTaskPage(params).then(response => {
  175. this.list = response.data.list;
  176. this.total = response.data.total;
  177. this.loading = false;
  178. });
  179. },
  180. /** 取消按钮 */
  181. cancel() {
  182. this.open = false;
  183. this.reset();
  184. },
  185. /** 表单重置 */
  186. reset() {
  187. this.form = {
  188. id: undefined,
  189. processInstanceId: undefined,
  190. status: undefined,
  191. userId: undefined,
  192. startTime: undefined,
  193. endTime: undefined,
  194. leaveType: undefined,
  195. reason: undefined,
  196. applyTime: undefined,
  197. };
  198. this.resetForm("form");
  199. },
  200. statusFormat(row, column) {
  201. return row.status == 1 ? "未签收" : "已签收";
  202. },
  203. /** 搜索按钮操作 */
  204. handleQuery() {
  205. this.queryParams.pageNo = 1;
  206. this.getList();
  207. },
  208. /** 重置按钮操作 */
  209. resetQuery() {
  210. this.dateRangeStartTime = [];
  211. this.dateRangeEndTime = [];
  212. this.dateRangeApplyTime = [];
  213. this.resetForm("queryForm");
  214. this.handleQuery();
  215. },
  216. getTaskFormKey(row) {
  217. const taskId = row.id;
  218. const data = {
  219. taskId : taskId
  220. }
  221. getTaskFormKey(data).then(response => {
  222. const resp = response.data;
  223. const path = resp.formKey;
  224. const taskId = resp.id;
  225. const businessKey = resp.businessKey;
  226. const route = {
  227. path: path,
  228. query: {
  229. businessKey: businessKey,
  230. taskId:taskId
  231. }
  232. }
  233. this.$router.replace(route);
  234. });
  235. },
  236. handleLeaveApprove(row) {
  237. this.reset();
  238. const businessKey = row.businessKey;
  239. const taskId = row.id;
  240. const processKey = row.processKey;
  241. const data = {
  242. taskId : taskId,
  243. businessKey: businessKey,
  244. processKey: processKey
  245. }
  246. taskSteps(data).then(response => {
  247. this.form = {};
  248. this.handleTask = response.data;
  249. this.task.taskId = taskId;
  250. this.open = true;
  251. this.title = "任务办理";
  252. });
  253. },
  254. /** 任务签收操作 */
  255. handleClaim(row) {
  256. this.reset();
  257. const id = row.id;
  258. claimTask(id).then(() => {
  259. this.getList();
  260. this.msgSuccess("签收成功");
  261. });
  262. },
  263. /** 提交任务 */
  264. submitTask() {
  265. const taskVariableName = this.handleTask.taskVariable;
  266. if (taskVariableName != "") {
  267. if (this.task.approved == 1) {
  268. this.task.variables[taskVariableName] = true;
  269. }
  270. if (this.task.approved == 0) {
  271. this.task.variables[taskVariableName] = false;
  272. }
  273. }
  274. completeTask(this.task).then(response => {
  275. this.msgSuccess("执行任务成功");
  276. this.open = false;
  277. this.getList();
  278. })
  279. },
  280. /** 删除按钮操作 */
  281. handleDelete(row) {
  282. const id = row.id;
  283. this.$confirm('是否确认删除请假申请编号为"' + id + '"的数据项?', "警告", {
  284. confirmButtonText: "确定",
  285. cancelButtonText: "取消",
  286. type: "warning"
  287. }).then(function() {
  288. return deleteLeave(id);
  289. }).then(() => {
  290. this.getList();
  291. this.msgSuccess("删除成功");
  292. })
  293. }
  294. }
  295. };
  296. </script>