listGroup.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <template>
  2. <div class="list_group_container">
  3. <div v-if="!hideAddInput" class="group_list">
  4. <div class="group_header flex flex-pack-justify flex-align-center">
  5. <div class="group_header_title">
  6. <span>
  7. <el-input v-model="listGroupName" v-autoFocus placeholder="请输入流程组名称" @blur="addFlowGroup" />
  8. </span>
  9. </div>
  10. </div>
  11. </div>
  12. <div v-for="(item, idx) in myArray" :key="item.categoryId" class="group_list">
  13. <div class="group_header flex flex-pack-justify flex-align-center">
  14. <div class="group_header_title">
  15. <span>
  16. <template v-if="!item.editor">
  17. {{ item.categoryName }}
  18. </template>
  19. <template v-else>
  20. <el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, idx)" />
  21. </template>
  22. </span>
  23. </div>
  24. <div class="group_header_nameOperate">
  25. <el-space>
  26. <el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, idx)"><EditPen /></el-icon>
  27. </el-space>
  28. <el-space style="margin-left: 10px">
  29. <el-tooltip effect="dark" content="删除" placement="top">
  30. <el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
  31. </el-tooltip>
  32. </el-space>
  33. </div>
  34. </div>
  35. <div class="group_body">
  36. <ul class="group_list_ul">
  37. <draggable :list="item.processList" item-key="id">
  38. <template #item="{ element }">
  39. <div>
  40. <li class="group_item flex flex-align-center">
  41. <LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
  42. <!-- <div class="group_itemIcon">
  43. <img :src="getAssetsFile(element.processIcon + '.svg')" />
  44. </div>-->
  45. <div class="group_itemLeft">
  46. <div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
  47. <div class="group_itemName">
  48. <span>{{ element.processName }}</span>
  49. </div>
  50. </div>
  51. <div class="group_itemIntro">{{ element.title }}</div>
  52. </div>
  53. <div class="group_itemSeeable">
  54. <el-tag round>V{{ element.processVersion }}</el-tag>
  55. <el-tag v-if="element.processState === 0" type="danger" round>已停用</el-tag>
  56. </div>
  57. <div class="group_itemSeeable">{{ element.processKey }}</div>
  58. <div class="group_itemOperations">
  59. <el-space wrap>
  60. <el-tooltip effect="dark" content="编辑" placement="top">
  61. <el-icon :size="16" @click="updateEv(element.processId)"><EditPen /></el-icon>
  62. </el-tooltip>
  63. </el-space>
  64. <el-space wrap style="margin-left: 10px">
  65. <el-tooltip effect="dark" content="复制" placement="top">
  66. <el-icon :size="16" @click="copyEv(element.processId)"><CopyDocument /></el-icon>
  67. </el-tooltip>
  68. </el-space>
  69. <el-space wrap style="margin-left: 10px">
  70. <el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
  71. <el-icon :size="16" @click="enabledEv(element.processId, 0)"><CircleClose /></el-icon>
  72. </el-tooltip>
  73. <el-tooltip v-if="element.processState === 0" effect="dark" content="启用" placement="top">
  74. <el-icon :size="16" @click="enabledEv(element.processId, 1)"><Check /></el-icon>
  75. </el-tooltip>
  76. </el-space>
  77. <el-space wrap>
  78. <el-popconfirm title="确定删除?" @confirm="stopEv(element.processId)">
  79. <template #reference>
  80. <el-icon :size="16"><Delete /></el-icon>
  81. </template>
  82. </el-popconfirm>
  83. </el-space>
  84. </div>
  85. </li>
  86. </div>
  87. </template>
  88. </draggable>
  89. </ul>
  90. </div>
  91. </div>
  92. </div>
  93. </template>
  94. <script lang="tsx" setup>
  95. import Draggable from 'vuedraggable'
  96. import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-vue'
  97. import { ref, onActivated, nextTick, onMounted } from 'vue'
  98. import flowGroup from '@/api/flow/group'
  99. import flowDefinition from '@/api/flow/definition'
  100. import { ElMessage, ElMessageBox } from 'element-plus'
  101. import process from '@/api/flow/process'
  102. import router from '@/router'
  103. import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
  104. const myArray = ref([])
  105. const hideAddInput = ref(true)
  106. const listGroupName = ref('')
  107. // 显示隐藏添加流程组元素
  108. const showAddInput = () => {
  109. hideAddInput.value = !hideAddInput.value
  110. }
  111. // 新增流程组
  112. const addFlowGroup = async () => {
  113. if (!listGroupName.value.trim()) {
  114. showAddInput()
  115. return false
  116. }
  117. try {
  118. const param = {
  119. name: listGroupName.value,
  120. categorySort: 0
  121. }
  122. await flowGroup.flowGroupAddOrEditSaveApi(param)
  123. showAddInput()
  124. flowGroupListAll()
  125. } catch (e) {
  126. console.log(e)
  127. }
  128. }
  129. // 流程组列表
  130. const flowGroupListAll = async (item = {}) => {
  131. try {
  132. const data = await flowDefinition.flowDefinitionListCategoryApi(item)
  133. myArray.value = data || []
  134. console.log(data)
  135. } catch (e) {
  136. console.log(e)
  137. }
  138. }
  139. // 流程组删除
  140. const deleteFlowGroup = (item: any) => {
  141. try {
  142. // todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
  143. ElMessageBox.confirm('是否删除该分组?', '提示', {
  144. confirmButtonText: '确认',
  145. cancelButtonText: '取消',
  146. type: 'error',
  147. buttonSize: 'default'
  148. })
  149. .then(async () => {
  150. ElMessage({
  151. message: '删除成功!',
  152. type: 'success'
  153. })
  154. await flowGroup.flowGroupDeleteApi([item.categoryId])
  155. flowGroupListAll()
  156. })
  157. .catch(() => {
  158. console.log('取消')
  159. })
  160. } catch (e) {
  161. console.log(e)
  162. }
  163. }
  164. /**
  165. * 编辑流程组函数
  166. *
  167. * @param type 操作类型,'edit'表示编辑,其他表示保存
  168. * @param item 当前项
  169. * @param idx 当前项的索引
  170. * @returns 如果type为'edit',则返回false;否则返回undefined
  171. */
  172. const editFlowGroup = async (type, item, idx) => {
  173. if (type === 'edit') {
  174. myArray.value[idx].editor = true
  175. return false
  176. }
  177. try {
  178. myArray.value[idx].editor = false
  179. const param = {
  180. id: myArray.value[idx].categoryId,
  181. name: myArray.value[idx].categoryName,
  182. sort: myArray.value[idx].categorySort
  183. }
  184. await flowGroup.flowGroupAddOrEditSaveApi(param)
  185. flowGroupListAll()
  186. } catch (e) {
  187. console.log(e)
  188. }
  189. }
  190. // 删除
  191. const stopEv = async (id: any) => {
  192. await process.progressDeleteApi({ id })
  193. flowGroupListAll()
  194. }
  195. /**
  196. * 启用/禁用事件处理函数
  197. *
  198. * @param id 要启用/禁用的元素的ID
  199. * @param state 启用/禁用的状态,1表示启用,0表示禁用
  200. * @returns 无返回值,执行异步操作
  201. */
  202. const enabledEv = async (id: any, state: number) => {
  203. await process.processUpdateStateApi({ id, state: state })
  204. flowGroupListAll()
  205. }
  206. /**
  207. * 复制事件处理函数
  208. *
  209. * @param id 要复制的元素的ID
  210. * @returns 无返回值,执行异步操作
  211. */
  212. const copyEv = async (id: any) => {
  213. await process.progressCloneApi({ id })
  214. flowGroupListAll()
  215. }
  216. // 修改
  217. const updateEv = async (id: any) => {
  218. router.push('/flow_create?id=' + id)
  219. }
  220. // keep-alive缓存树,防止创建完流程过后,回到当前窗口未刷新
  221. onActivated(() => {
  222. flowGroupListAll()
  223. })
  224. /**
  225. * 当组件被挂载到 DOM 后,执行回调函数
  226. */
  227. onMounted(() => {
  228. nextTick(() => {
  229. flowGroupListAll()
  230. })
  231. })
  232. // 父组件使用的话需要导出
  233. defineExpose({
  234. showAddInput,
  235. searchProcessEv: flowGroupListAll
  236. })
  237. </script>
  238. <style scoped lang="scss">
  239. .list_group_container {
  240. // 同sortGroup一样的样式
  241. .group_list {
  242. border-radius: 4px;
  243. margin-bottom: 16px;
  244. box-shadow: 0px 0px 3px 1px rgb(238, 238, 238);
  245. background-color: var(--el-bg-color);
  246. font-family: PingFangSC-Regular;
  247. .group_header {
  248. height: 54px;
  249. padding: 0px 16px 0px 12px;
  250. font-size: 16px;
  251. line-height: 24px;
  252. background-color: rgba(244, 245, 246, 0.5);
  253. &_title {
  254. position: relative;
  255. font-family: PingFangSC-Medium;
  256. display: flex;
  257. align-items: center;
  258. &.disabled {
  259. color: var(--el-text-color-disabled);
  260. }
  261. .edit_line {
  262. display: inline-block;
  263. width: 200px;
  264. border: 1px solid var(--el-text-color-primary);
  265. visibility: hidden;
  266. height: 36px;
  267. position: absolute;
  268. left: -5px;
  269. }
  270. .edit_icon {
  271. right: -170px;
  272. visibility: hidden;
  273. }
  274. &:hover {
  275. .edit_line,
  276. .edit_icon {
  277. visibility: visible;
  278. }
  279. }
  280. }
  281. &_nameOperate {
  282. cursor: pointer;
  283. }
  284. }
  285. .group_body,
  286. .group_list_ul {
  287. box-sizing: border-box;
  288. padding: 0;
  289. //width: 1000px;
  290. }
  291. .group_item {
  292. justify-content: flex-start;
  293. padding: 8px 12px;
  294. &:not(.group_item-disabled):hover {
  295. background-color: var(--el-fill-color-lighter);
  296. }
  297. .group_itemIcon {
  298. flex-shrink: 0;
  299. margin-right: 8px;
  300. height: 42px;
  301. width: 42px;
  302. border-radius: 50%;
  303. overflow: hidden;
  304. font-size: 42px;
  305. /*img {
  306. width: 100%;
  307. height: 100%;
  308. object-fit: cover;
  309. }*/
  310. }
  311. .group_itemLeft {
  312. width: 426px;
  313. //flex-shrink: 0;
  314. padding-right: 8px;
  315. }
  316. .group_itemSeeable {
  317. min-width: 175px;
  318. font-size: 14px;
  319. overflow: hidden;
  320. text-overflow: ellipsis;
  321. white-space: nowrap;
  322. flex: 1 1;
  323. .el-tag + .el-tag {
  324. margin-left: 4px;
  325. }
  326. }
  327. .group_itemOperations {
  328. max-width: 350px;
  329. flex-shrink: 0;
  330. display: flex;
  331. cursor: pointer;
  332. }
  333. .group_itemIntro {
  334. font-size: 14px;
  335. text-overflow: ellipsis;
  336. overflow: hidden;
  337. white-space: nowrap;
  338. line-height: 17px;
  339. font-family: PingFangSC-Regular;
  340. }
  341. .group_itemNameWrapper {
  342. justify-content: flex-start;
  343. }
  344. .group_itemName {
  345. max-width: 418px;
  346. font-size: 14px;
  347. text-overflow: ellipsis;
  348. overflow: hidden;
  349. white-space: nowrap;
  350. line-height: 16px;
  351. font-weight: 500;
  352. font-family: PingFangSC-Medium;
  353. }
  354. }
  355. }
  356. }
  357. </style>