index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <div class="pageWrap">
  3. <div class="content-warp flex-column-page-wrap">
  4. <!-- 公用搜索组件 -->
  5. <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
  6. <!-- LeTable 组件使用 -->
  7. <LeTable
  8. ref="tableRef"
  9. v-model:searchParams="tableOpts.searchParams"
  10. v-bind="tableOpts"
  11. v-model:curRow="tableOpts.curRow"
  12. v-model:checked-options="checkedColumns"
  13. :columns="activeColumns"
  14. >
  15. <template #toolLeft>
  16. <el-button type="primary">撤回</el-button>
  17. <el-button type="primary">定位</el-button>
  18. <el-button type="primary">激活</el-button>
  19. <el-button type="primary">挂起</el-button>
  20. <el-button type="danger">作废</el-button>
  21. </template>
  22. <template #identificationSlot="scope">
  23. <el-dropdown>
  24. <span class="el-dropdown-link">
  25. {{ scope.row.name }}
  26. <el-icon class="el-icon--right">
  27. <ArrowDown />
  28. </el-icon>
  29. </span>
  30. <template #dropdown>
  31. <el-dropdown-menu>
  32. <el-dropdown-item @click="test1Ev">审批流</el-dropdown-item>
  33. <el-dropdown-item @click="test2Ev">详情</el-dropdown-item>
  34. </el-dropdown-menu>
  35. </template>
  36. </el-dropdown>
  37. </template>
  38. <template #statusSlot="scope">
  39. <status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
  40. <status-indicator v-else pulse type="danger"></status-indicator>
  41. </template>
  42. </LeTable>
  43. </div>
  44. <instance-detail v-if="detailVisibile" v-model="detailVisibile"></instance-detail>
  45. </div>
  46. </template>
  47. <script lang="tsx" setup name="flow_instance">
  48. import app from '@/api/system/app'
  49. import { nextTick, ref } from 'vue'
  50. import { useTablePage } from '@/hooks/useTablePage'
  51. import StatusIndicator from '@/components/StatusIndicator'
  52. import { ArrowDown } from '@element-plus/icons-vue'
  53. import InstanceDetail from './instance-detail.vue'
  54. const detailVisibile = ref(false)
  55. // 表格搜索条件
  56. const forms = ref([
  57. {
  58. prop: 'keyword',
  59. label: '审批标题:',
  60. itemType: 'input',
  61. placeholder: '请输入审批标题'
  62. },
  63. {
  64. prop: 'keyword',
  65. label: '单据名称:',
  66. itemType: 'input',
  67. placeholder: '请输入单据名称'
  68. },
  69. {
  70. prop: 'keyword',
  71. label: '类型:',
  72. itemType: 'input',
  73. placeholder: '请输入类型'
  74. }
  75. ])
  76. // table列表数据请求
  77. const queryList = async () => {
  78. const { options, searchParams } = tableOpts
  79. options.loading = true
  80. try {
  81. const { records: list, total } = await app.appPageApi(searchParams)
  82. tableOpts.total = total
  83. tableOpts.list = list
  84. } catch {
  85. console.log('获取列表数据失败')
  86. tableOpts.total = 0
  87. tableOpts.list = []
  88. options.loading = false // 更改加载中的 loading值
  89. } finally {
  90. options.loading = false
  91. }
  92. }
  93. // table 参数
  94. const columns = [
  95. {
  96. prop: 'name',
  97. label: '审批标题',
  98. minWidth: 150,
  99. showOverflowTooltip: true,
  100. slots: {
  101. default: 'identificationSlot'
  102. }
  103. },
  104. {
  105. prop: 'name1',
  106. label: '单据名称',
  107. minWidth: 100
  108. },
  109. {
  110. prop: 'secretKey',
  111. label: '类型',
  112. minWidth: 100
  113. },
  114. {
  115. prop: 'sort',
  116. label: '子类型',
  117. minWidth: 80
  118. },
  119. {
  120. prop: 'sort1',
  121. label: '机构',
  122. minWidth: 80
  123. },
  124. {
  125. prop: 'sort2',
  126. label: '岗位',
  127. minWidth: 80
  128. },
  129. {
  130. prop: 'sort3',
  131. label: '提交人',
  132. minWidth: 80
  133. },
  134. {
  135. prop: 'sort4',
  136. label: '代理人',
  137. minWidth: 80
  138. },
  139. {
  140. prop: 'sort5',
  141. label: '发起时间',
  142. minWidth: 80
  143. },
  144. {
  145. prop: 'sort6',
  146. label: '完成时间',
  147. minWidth: 80
  148. },
  149. {
  150. prop: 'status',
  151. label: '流程状态',
  152. minWidth: 50,
  153. slots: {
  154. default: 'statusSlot'
  155. }
  156. },
  157. {
  158. prop: 'sort7',
  159. label: '流程版本',
  160. minWidth: 80
  161. }
  162. ]
  163. const test1Ev = () => {
  164. detailVisibile.value = true
  165. }
  166. const test2Ev = () => {}
  167. const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
  168. {
  169. options: {
  170. showIndex: false
  171. },
  172. // 需要展示的列
  173. columns,
  174. // 控制列配置
  175. columnsConfig: {
  176. columns
  177. }
  178. },
  179. {
  180. queryList,
  181. fetchImmediate: false
  182. }
  183. )
  184. nextTick(() => {
  185. queryList()
  186. })
  187. </script>
  188. <style scoped lang="scss">
  189. .pageWrap {
  190. flex: 1;
  191. display: flex;
  192. height: 100%;
  193. //background: #fff;
  194. }
  195. .content-warp {
  196. flex: 1;
  197. //width: calc(100% - 250px);
  198. width: calc(100% - 210px);
  199. }
  200. // 单独自己写的
  201. /*:deep(.box-card) {
  202. height: 100%;
  203. .el-card__body {
  204. padding: 0;
  205. }
  206. }*/
  207. // 应用的树结构样式
  208. :deep(.menu-tree) {
  209. .el-tree-node__content {
  210. height: 36px;
  211. }
  212. .el-tree-node__content .el-tree-node__label .icon {
  213. margin-right: 5px;
  214. }
  215. }
  216. .nopadding {
  217. padding: 0px;
  218. }
  219. </style>