index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. <template xmlns="http://www.w3.org/1999/html">
  2. <div class="app-container">
  3. <el-form :inline="true">
  4. <el-form-item label="标题">
  5. <el-input
  6. v-model="queryParams.title"
  7. placeholder="请输入标题"
  8. clearable
  9. size="small"
  10. style="width: 240px"
  11. @keyup.enter.native="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  16. <el-button type="info" icon="el-icon-refresh-right" size="mini" @click="reList">清空</el-button>
  17. <el-button type="success" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增</el-button>
  18. </el-form-item>
  19. </el-form>
  20. <el-table v-loading="loading" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
  21. <el-table-column
  22. type="selection"
  23. width="55">
  24. </el-table-column>
  25. <el-table-column label="序号" type="index" align="center">
  26. <template slot-scope="scope">
  27. <span>{{ (queryParams.pageNum-1) * queryParams.pageSize + (scope.$index + 1) }}</span>
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="模型key" prop="modelKey"/>
  31. <el-table-column label="表单名称" prop="fName"/>
  32. <el-table-column label="创建时间" prop="createTime"/>
  33. <el-table-column label="操作" align="center">
  34. <template slot-scope="scope">
  35. <template v-if="scope.row.instanceId==null">
  36. <el-button
  37. size="mini" type="success"
  38. @click="handleSumbit(scope.$index, scope.row)">提交流程
  39. </el-button>
  40. <el-button
  41. size="mini" type="primary"
  42. @click="handleUpdate(scope.$index, scope.row)">编辑
  43. </el-button>
  44. <el-button
  45. size="mini"
  46. type="danger"
  47. @click="handleDelete(scope.$index, scope.row)">删除
  48. </el-button>
  49. </template>
  50. <template v-else>
  51. <el-button
  52. size="mini" type="success"
  53. @click="showForms(scope.$index, scope.row)">查看
  54. </el-button>
  55. <el-button
  56. size="mini" type="warning"
  57. @click="showImage(scope.$index, scope.row)">进度查看
  58. </el-button>
  59. </template>
  60. </template>
  61. </el-table-column>
  62. </el-table>
  63. <pagination
  64. v-show="total>0"
  65. :total="total"
  66. :page.sync="queryParams.pageNum"
  67. :limit.sync="queryParams.pageSize"
  68. @pagination="getList"
  69. />
  70. <el-dialog
  71. title="选择流程模型"
  72. :visible.sync="dialogVisible"
  73. width="350px"
  74. >
  75. <template>
  76. <el-select v-model="processKey" placeholder="请选择">
  77. <el-option
  78. v-for="item in leaveSelect"
  79. :key="item.value"
  80. :label="item.text"
  81. :value="item.value">
  82. </el-option>
  83. </el-select>
  84. </template>
  85. <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">下一步</el-button>
  86. </el-dialog>
  87. <!-- 添加或修改角色配置对话框 -->
  88. <el-dialog :title="title" :visible.sync="open" width="1000px">
  89. <template>
  90. <ele-form
  91. :isShowSubmitBtn=true
  92. :isShowBackBtn=false
  93. :isShowResetBtn=true
  94. :rules="formObj.rules"
  95. :form-desc="formObj.formDesc"
  96. :form-data="formObj.formData"
  97. :request-fn="handleRequest"
  98. @request-success="handleRequestSuccess"
  99. ></ele-form>
  100. </template>
  101. </el-dialog>
  102. <!--查看审核流程表单-->
  103. <el-dialog :title="forms.title" :visible.sync="forms.open" width="1000px">
  104. <!--历史表单组件-->
  105. <addEnterprise ref="addEnterprise"/>
  106. </el-dialog>
  107. <!--显示流程图标签-->
  108. <el-dialog :title="activitiImg.title" :visible.sync="activitiImg.open" width="1000px">
  109. <el-image :src="activitiImg.src"></el-image>
  110. </el-dialog>
  111. </div>
  112. </template>
  113. <script>
  114. import { select, add, list, get, getForm, update, delTitle, submitApply, } from '@/api/activiti/leaveNew.js';
  115. //流程历史表单组件
  116. import addEnterprise from "@/views/activiti/formsActiviti/index.vue";
  117. export default {
  118. components:{
  119. addEnterprise
  120. },
  121. data: function() {
  122. return {
  123. instanceId:'',
  124. dialogVisible: false,
  125. //表格数据
  126. // 查询参数
  127. queryParams: {
  128. pageNum: 1,
  129. pageSize: 10
  130. },
  131. // 分页参数
  132. total: 0,
  133. pageNum: 1,
  134. pageSize: 10,
  135. tableData: [],
  136. //删除id
  137. multipleSelection: [],
  138. // 表单参数
  139. // 弹出层标题
  140. title: '',
  141. // 是否显示弹出层
  142. open: false,
  143. processKey: '',
  144. //部署文件下拉
  145. leaveSelect: [],
  146. // 表单数据
  147. formEntity: {
  148. fId: {},
  149. modelKey: {},
  150. modulId: {},
  151. fName: {},
  152. instanceId: {},
  153. fKey: {},
  154. fVersion: {},
  155. applyUser: {},
  156. jsonData: {}
  157. },
  158. //动态表单数据
  159. formObj: {
  160. // 表单数据
  161. formData: {},
  162. formDesc: {},
  163. rules: {}
  164. },
  165. forms: {
  166. title: '查看审核流程',
  167. open: false,
  168. data: []
  169. },
  170. activitiImg: {
  171. title: '查看审核流程图',
  172. open: false,
  173. src: ''
  174. }
  175. }
  176. },
  177. // 初始化方法
  178. created() {
  179. //表格初始化
  180. this.getList()
  181. //下拉框初始化
  182. this.select()
  183. },
  184. methods: {
  185. handleSelectionChange(val) {
  186. this.multipleSelection = []
  187. for (let i = 0; i < val.length; i++) {
  188. this.multipleSelection[i] = val[i].id
  189. }
  190. },
  191. //部署文件下啦方法
  192. select() {
  193. select().then(
  194. response => {
  195. console.log(response)
  196. this.leaveSelect = response.data
  197. }
  198. )
  199. },
  200. /** 查询角色列表 */
  201. getList() {
  202. this.loading = true
  203. list(this.addDateRange(this.queryParams)).then(
  204. response => {
  205. this.tableData = response.rows
  206. this.total = response.total
  207. this.loading = false
  208. }
  209. )
  210. }
  211. ,
  212. deleteTi() {
  213. this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  214. confirmButtonText: '确定 ',
  215. cancelButtonText: '取消 ',
  216. type: 'warning',
  217. center: true
  218. }).then(() => {
  219. let ids = this.multipleSelection
  220. if (ids.length === 0) {
  221. this.msgError('你没有选择文章')
  222. return
  223. }
  224. delTitle(ids)
  225. this.msgSuccess('成功')
  226. this.reIds()
  227. this.reList()
  228. }).catch(() => {
  229. this.msgSuccess('已取消删除')
  230. })
  231. }
  232. ,
  233. reIds() {
  234. this.multipleSelection = []
  235. }
  236. ,
  237. /** 搜索按钮操作 */
  238. handleQuery() {
  239. this.queryParams.pageNum = 1
  240. this.getList()
  241. }
  242. ,
  243. reList() {
  244. this.queryParams = {
  245. pageNum: 1,
  246. pageSize: 10
  247. }
  248. this.getList()
  249. },
  250. // 重置表单新增使用
  251. reset() {
  252. this.formObj.formDesc = {}
  253. this.formObj.rules = {}
  254. this.formObj.formData = {}
  255. this.resetForm('form')
  256. },
  257. //表单
  258. handleAdd() {
  259. dialogVisible: false
  260. this.reset()
  261. getForm(this.processKey).then(
  262. response => {
  263. this.formEntity = response.data
  264. this.formEntity.fId = undefined
  265. let jsonData = response.data.jsonData
  266. let parse = JSON.parse(jsonData)
  267. this.formObj.formDesc = parse.formDesc
  268. this.formObj.rules = parse.rules
  269. let formData = parse.formData
  270. if (null != formData) {
  271. this.formObj.formData = parse.formData
  272. }
  273. this.open = true
  274. this.title = '添加文章'
  275. }
  276. )
  277. },
  278. /*
  279. 打开编辑表单窗口
  280. * */
  281. handleUpdate(index, row) {
  282. dialogVisible: false
  283. this.reset()
  284. get(row.fId).then(
  285. response => {
  286. this.formEntity = response.data
  287. let jsonData = response.data.jsonData
  288. let parse = JSON.parse(jsonData)
  289. this.formObj.formDesc = parse.formDesc
  290. this.formObj.rules = parse.rules
  291. let formData = parse.formData
  292. if (null != formData) {
  293. this.formObj.formData = parse.formData
  294. }
  295. this.open = true
  296. this.title = '修改'
  297. }
  298. )
  299. },
  300. /*删除数据*/
  301. handleDelete(index, row) {
  302. var ids = []
  303. ids[0] = row.fId
  304. delTitle(ids).then(response => {
  305. if (response.code === 200) {
  306. this.msgSuccess('成功')
  307. this.open = false
  308. this.getList()
  309. } else {
  310. this.msgError(response.msg)
  311. }
  312. })
  313. },
  314. /*
  315. *显示流程表单
  316. * */
  317. showForms(index, row) {
  318. this.forms.open = true
  319. this.forms.title = '查看审核流程'
  320. this.$nextTick(()=>{
  321. this.$refs.addEnterprise.showForms(row.instanceId)
  322. })
  323. },
  324. showImage(index, row) {
  325. let instanceId = row.instanceId
  326. let modelKey = row.modelKey
  327. let version = row.modelVersion
  328. instanceId = process.env.VUE_APP_BASE_URL + '/leaveNew/read-resource?processDefinitionKey=' + modelKey +'&version=' +version+ '&processInstanceId=' + instanceId+ '&t='+Math.random()
  329. this.activitiImg.open = true
  330. this.activitiImg.src = instanceId
  331. },
  332. /**
  333. * 新增或跟新表单数据
  334. */
  335. handleRequest(data) {
  336. this.dialogVisible = false
  337. this.formObj.formData = data
  338. let s = JSON.stringify(this.formObj)
  339. this.formEntity.jsonData = s
  340. if (this.formEntity.fId === undefined) {
  341. add(this.formEntity).then(response => {
  342. if (response.code === 200) {
  343. this.getList()
  344. } else {
  345. this.msgError(response.msg)
  346. }
  347. })
  348. } else {
  349. update(this.formEntity).then(response => {
  350. if (response.code === 200) {
  351. this.msgSuccess(response.msg)
  352. this.getList()
  353. } else {
  354. this.msgError(response.msg)
  355. }
  356. })
  357. }
  358. return Promise.resolve()
  359. },
  360. handleRequestSuccess() {
  361. this.$message.success('发送成功')
  362. this.getList()
  363. this.open = false
  364. },
  365. /**
  366. * 提交审核信息
  367. * @param index
  368. * @param row
  369. */
  370. handleSumbit(index, row) {
  371. console.log(index, row)
  372. submitApply(row.fId).then(response => {
  373. if (response.code === 200) {
  374. this.msgSuccess(response.msg)
  375. this.getList()
  376. } else {
  377. this.msgError(response.msg)
  378. }
  379. })
  380. },
  381. }
  382. }
  383. </script>