index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <template>
  2. <div class="tenant">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable
  6. :source="sourceList.data"
  7. :pagination="sourceList.pagination"
  8. :config="config"
  9. :loading="loading"
  10. highlight-current-row
  11. :selectConfig="selectConfig"
  12. :table-events="{
  13. //element talbe事件都能传
  14. select: select,
  15. }"
  16. @get-list="getList"
  17. >
  18. <template #slotName="{ item }">
  19. {{ item.createTime }}
  20. </template>
  21. </byTable>
  22. </div>
  23. <el-dialog
  24. :title="modalType == 'add' ? '新增' : '编辑'"
  25. v-model="dialogVisible"
  26. width="400"
  27. v-loading="loading"
  28. >
  29. <byForm
  30. :formConfig="formConfig"
  31. :formOption="formOption"
  32. v-model="formData.data"
  33. :rules="rules"
  34. ref="byform"
  35. >
  36. </byForm>
  37. <template #footer>
  38. <el-button @click="dialogVisible = false" size="large"
  39. >取 消</el-button
  40. >
  41. <el-button
  42. type="primary"
  43. @click="submitForm('byform')"
  44. size="large"
  45. :loading="submitLoading"
  46. >
  47. 确 定
  48. </el-button>
  49. </template>
  50. </el-dialog>
  51. </div>
  52. </template>
  53. <script setup name="DealWith">
  54. /* eslint-disable vue/no-unused-components */
  55. import { ElMessage, ElMessageBox } from 'element-plus'
  56. import byTable from '@/components/byTable/index'
  57. import byForm from '@/components/byForm/index'
  58. import { computed, defineComponent, ref } from 'vue'
  59. const loading = ref(false)
  60. const submitLoading = ref(false)
  61. const dictCommonModal = ref(false)
  62. const sourceList = ref({
  63. data: [],
  64. pagination: {
  65. total: 3,
  66. pageNum: 1,
  67. pageSize: 10,
  68. status:1,
  69. },
  70. })
  71. let dialogVisible = ref(false)
  72. let roomDialogVisible = ref(false)
  73. let modalType = ref('add')
  74. let rules = ref({
  75. classifyName: [
  76. { required: true, message: '请输入功能模块', trigger: 'blur' },
  77. ],
  78. flowKey: [{ required: true, message: '请输入流程标识', trigger: 'blur' }],
  79. flowName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
  80. })
  81. const { proxy } = getCurrentInstance()
  82. const selectConfig = computed(() => {
  83. return [
  84. {
  85. label: '流程类型',
  86. prop: 'flowInfoId',
  87. data: [],
  88. },
  89. {
  90. label: '流程状态',
  91. prop: 'status',
  92. isShowAll:false,
  93. data: [
  94. {
  95. label: '已发起',
  96. value: '2',
  97. },
  98. {
  99. label: '已处理',
  100. value: '3',
  101. },
  102. ],
  103. },
  104. ]
  105. })
  106. const config = computed(() => {
  107. return [
  108. {
  109. attrs: {
  110. label: '流程类型',
  111. prop: 'flowName',
  112. },
  113. },
  114. {
  115. attrs: {
  116. label: '流程标题',
  117. prop: 'title',
  118. },
  119. },
  120. {
  121. attrs: {
  122. label: '流程状态',
  123. width: 100,
  124. prop: 'status',
  125. },
  126. render(status) {
  127. return status == 0 || status == 1 ? '待处理' : status == 2 ? '已通过' : '已驳回'
  128. },
  129. },
  130. {
  131. attrs: {
  132. label: '发起人',
  133. prop: 'createUserName',
  134. },
  135. },
  136. {
  137. attrs: {
  138. label: '发起时间',
  139. prop: 'createTime',
  140. },
  141. },
  142. {
  143. attrs: {
  144. label: '操作',
  145. width: '200',
  146. align: 'right',
  147. },
  148. // 渲染 el-button,一般用在最后一列。
  149. renderHTML(row) {
  150. return [
  151. {
  152. attrs: {
  153. label: row.status == 0 || row.status == 1 ? '办理' : '查看',
  154. type: 'primary',
  155. text: true,
  156. bg: true,
  157. disabled: false,
  158. },
  159. el: 'button',
  160. click() {
  161. if(row.status != 1 && row.status != 0) {
  162. proxy.$router.push({
  163. path: "/platform_manage/process/processApproval",
  164. query: {
  165. flowKey: row.flowKey,
  166. id: row.id,
  167. processType:20,
  168. version:row.version
  169. },
  170. });
  171. return
  172. }
  173. proxy.post('flowExample/getApprovalRecord',{id:row.id}).then(res=>{
  174. if(res.recordList.length > 0) {
  175. let data = res.recordList.filter(item => item.status === 2)
  176. let nodeType= 0
  177. if (data && data.length > 0) {
  178. nodeType = data[0].nodeType
  179. }
  180. proxy.$router.push({
  181. path: "/platform_manage/process/processApproval",
  182. query: {
  183. flowKey: row.flowKey,
  184. id: row.id,
  185. processType:nodeType == 1 ? 30 : 10,
  186. businessId:row.businessId,
  187. version:row.version
  188. },
  189. });
  190. }
  191. })
  192. },
  193. }
  194. ]
  195. },
  196. },
  197. ]
  198. })
  199. let dtlData = reactive({
  200. data: {},
  201. })
  202. let formData = reactive({
  203. data: {},
  204. treeData: [],
  205. })
  206. const formOption = reactive({
  207. inline: true,
  208. labelWidth: 100,
  209. itemWidth: 100,
  210. rules: [],
  211. })
  212. const byform = ref(null)
  213. const treeData = ref([])
  214. const formConfig = computed(() => {
  215. return [
  216. {
  217. type: 'input',
  218. prop: 'classifyName',
  219. label: '功能模块',
  220. },
  221. {
  222. type: 'input',
  223. prop: 'flowKey',
  224. label: '流程标识',
  225. isHide: modalType.value == 'edit',
  226. },
  227. {
  228. type: 'input',
  229. prop: 'flowName',
  230. label: '流程名称',
  231. },
  232. ]
  233. })
  234. const flowJump = (row,type) => {
  235. proxy.post('/flowProcess/jump', {flowId:row.id,handleType:type,version:row.version,data:{}}).then((message) => {
  236. console.log(message)
  237. if(message){
  238. ElMessage.success('操作成功')
  239. getList()
  240. }
  241. })
  242. }
  243. const getFlowType = () => {
  244. proxy
  245. .post('/flowExample/getFlowType')
  246. .then((message) => {
  247. console.log(message)
  248. selectConfig.value[0].data = message.map((item) => {
  249. return {
  250. label: item.flowName,
  251. value: item.id,
  252. }
  253. })
  254. })
  255. }
  256. getFlowType()
  257. const getUrlObj = {
  258. 1:'/flowExample/getToBeProcessedPage',
  259. 2:'/flowExample/getHaveInitiatedPage',
  260. 3:'/flowExample/getProcessedPage',
  261. }
  262. const getList = async (req) => {
  263. sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
  264. loading.value = true
  265. proxy
  266. .post( getUrlObj[sourceList.value.pagination.status], sourceList.value.pagination)
  267. .then((message) => {
  268. console.log(message)
  269. sourceList.value.data = message.rows
  270. sourceList.value.pagination.total = message.total
  271. setTimeout(() => {
  272. loading.value = false
  273. }, 200)
  274. })
  275. }
  276. const openModal = () => {
  277. dialogVisible.value = true
  278. modalType.value = 'add'
  279. formData.data = {}
  280. }
  281. const selection = ref({
  282. data: [],
  283. })
  284. const select = (_selection, row) => {
  285. selection.value.data = _selection
  286. console.log(_selection.length)
  287. }
  288. const tree = ref(null)
  289. const submitTree = () => {
  290. proxy
  291. .post('/tenantInfo/bindingMenu', {
  292. tenantId: selection.value.data[0].tenantId,
  293. menuIdList: tree.value.getCheckedKeys(),
  294. })
  295. .then((res) => {
  296. ElMessage({
  297. message: '保存成功',
  298. type: 'success',
  299. })
  300. roomDialogVisible.value = false
  301. })
  302. }
  303. const submitForm = () => {
  304. byform.value.handleSubmit((valid) => {
  305. submitLoading.value = true
  306. proxy
  307. .post('/flowInfo/' + modalType.value, formData.data)
  308. .then((res) => {
  309. ElMessage({
  310. message: modalType.value == 'add' ? '添加成功' : '编辑成功',
  311. type: 'success',
  312. })
  313. dialogVisible.value = false
  314. submitLoading.value = false
  315. getList()
  316. })
  317. })
  318. }
  319. const getDtl = (row) => {
  320. formData.data = { ...row }
  321. modalType.value = 'edit'
  322. dialogVisible.value = true
  323. }
  324. const changeStatus = (row) => {
  325. modalType.value = 'edit'
  326. proxy
  327. .post('/flowInfo/edit', { ...row, status: row.status === 0 ? 1 : 0 })
  328. .then((res) => {
  329. ElMessage({
  330. message: '操作成功',
  331. type: 'success',
  332. })
  333. getList()
  334. })
  335. }
  336. onMounted(() => {
  337. const route = useRoute();
  338. sourceList.value.pagination.status = route.query.type ? route.query.type : 1
  339. getList()
  340. })
  341. </script>
  342. <style lang="scss" scoped>
  343. .tenant {
  344. padding: 20px;
  345. }
  346. </style>