|
@@ -9,39 +9,59 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-for="(item, idx) in myArray" :key="item.categoryId" class="group_list">
|
|
|
- <div class="group_header flex flex-pack-justify flex-align-center">
|
|
|
- <div class="group_header_title">
|
|
|
- <span>
|
|
|
- <template v-if="!item.editor">
|
|
|
- {{ item.categoryName }}
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, idx)" />
|
|
|
- </template>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="group_header_nameOperate">
|
|
|
- <el-space>
|
|
|
- <el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, idx)"><EditPen /></el-icon>
|
|
|
- </el-space>
|
|
|
- <el-space style="margin-left: 10px">
|
|
|
- <el-tooltip effect="dark" content="删除" placement="top">
|
|
|
- <el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </el-space>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="group_body">
|
|
|
- <ul class="group_list_ul">
|
|
|
- <draggable :list="item.processList" item-key="id">
|
|
|
- <template #item="{ element }">
|
|
|
- <div>
|
|
|
+ <draggable
|
|
|
+ v-bind="dragOptions"
|
|
|
+ handle=".group_header"
|
|
|
+ v-model="categoryList"
|
|
|
+ item-key="categoryId"
|
|
|
+ @update:model-value="update_item_categoryList"
|
|
|
+ >
|
|
|
+ <template #item="{ element: item, index }">
|
|
|
+ <div class="group_list">
|
|
|
+ <div class="group_header flex flex-pack-justify flex-align-center">
|
|
|
+ <div class="group_header_title">
|
|
|
+ <span>
|
|
|
+ <template v-if="!item.editor">
|
|
|
+ {{ item.categoryName }}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, index)" />
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="group_header_nameOperate">
|
|
|
+ <el-space>
|
|
|
+ <el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, index)"><EditPen /></el-icon>
|
|
|
+ </el-space>
|
|
|
+ <el-space style="margin-left: 10px">
|
|
|
+ <el-tooltip effect="dark" content="删除" placement="top">
|
|
|
+ <el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="group_body">
|
|
|
+ <draggable
|
|
|
+ v-model="item.processList"
|
|
|
+ v-bind="dragOptions"
|
|
|
+ group="categoryId"
|
|
|
+ tag="ul"
|
|
|
+ class="group_list_ul"
|
|
|
+ :component-data="{
|
|
|
+ type: 'transition-group',
|
|
|
+ name: !drag ? 'flip-list' : null
|
|
|
+ }"
|
|
|
+ item-key="processId"
|
|
|
+ @update:model-value="update_item_processList"
|
|
|
+ @start="drag = true"
|
|
|
+ @end="drag = false"
|
|
|
+ >
|
|
|
+ <template #item="{ element }">
|
|
|
<li class="group_item flex flex-align-center">
|
|
|
<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
|
|
|
<!-- <div class="group_itemIcon">
|
|
|
- <img :src="getAssetsFile(element.processIcon + '.svg')" />
|
|
|
- </div>-->
|
|
|
+ <img :src="getAssetsFile(element.processIcon + '.svg')" />
|
|
|
+ </div>-->
|
|
|
<div class="group_itemLeft">
|
|
|
<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
|
|
|
<div class="group_itemName">
|
|
@@ -64,15 +84,15 @@
|
|
|
<el-icon :size="16" @click="updateEv(element)"><EditPen /></el-icon>
|
|
|
</el-tooltip>
|
|
|
</el-space>
|
|
|
- <el-space wrap style="margin-left: 10px">
|
|
|
- <el-tooltip effect="dark" content="复制" placement="top">
|
|
|
+ <el-tooltip effect="dark" content="复制" placement="top">
|
|
|
+ <el-space wrap style="margin-left: 10px">
|
|
|
<el-popconfirm title="确定复制 ?" @confirm="copyEv(element.processId)">
|
|
|
<template #reference>
|
|
|
<el-icon :size="16"><CopyDocument /></el-icon>
|
|
|
</template>
|
|
|
</el-popconfirm>
|
|
|
- </el-tooltip>
|
|
|
- </el-space>
|
|
|
+ </el-space>
|
|
|
+ </el-tooltip>
|
|
|
<el-space wrap style="margin-left: 10px">
|
|
|
<el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
|
|
|
<el-icon :size="16" @click="enabledEv(element.processId, 0)"><CircleClose /></el-icon>
|
|
@@ -90,29 +110,35 @@
|
|
|
</el-space>
|
|
|
</div>
|
|
|
</li>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </draggable>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="tsx" setup>
|
|
|
import Draggable from 'vuedraggable'
|
|
|
-import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-vue'
|
|
|
+// import { Delete, CircleClose, EditPen } from '@element-plus/icons-vue'
|
|
|
import { ref, onActivated, nextTick, onMounted } from 'vue'
|
|
|
import flowGroup from '@/api/flow/group'
|
|
|
import flowDefinition from '@/api/flow/definition'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import process from '@/api/flow/process'
|
|
|
import router from '@/router'
|
|
|
-import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
|
|
|
-const myArray = ref([])
|
|
|
+import { debounce, flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
|
|
|
+const categoryList = ref<any[]>([])
|
|
|
const hideAddInput = ref(true)
|
|
|
const listGroupName = ref('')
|
|
|
-
|
|
|
+const dragOptions = {
|
|
|
+ animation: 200,
|
|
|
+ group: 'processId',
|
|
|
+ disabled: false,
|
|
|
+ ghostClass: 'ghost'
|
|
|
+}
|
|
|
+const drag = ref(false)
|
|
|
// 显示隐藏添加流程组元素
|
|
|
const showAddInput = () => {
|
|
|
hideAddInput.value = !hideAddInput.value
|
|
@@ -136,12 +162,27 @@ const addFlowGroup = async () => {
|
|
|
console.log(e)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+const update_categoryListSort = debounce(() => {
|
|
|
+ // console.error('刷新数据........', xxx)
|
|
|
+ // {categoryId:string; processIds: string[]}[]
|
|
|
+ flowDefinition.updateProcessSortApi(categoryList.value.map(v => ({ categoryId: v.categoryId, processIds: v.processList.map(_v => _v.processId) })))
|
|
|
+ /*.then(res => {
|
|
|
+ console.warn(res, 'res......')
|
|
|
+ })*/
|
|
|
+}, 50)
|
|
|
+const update_item_categoryList = (values: any[]) => {
|
|
|
+ // console.warn(values, 'values update_item_categoryList', categoryList.value)
|
|
|
+ update_categoryListSort()
|
|
|
+}
|
|
|
+const update_item_processList = (values: any[]) => {
|
|
|
+ // console.warn(values, 'values update_item_processList', categoryList.value)
|
|
|
+ update_categoryListSort()
|
|
|
+}
|
|
|
// 流程组列表
|
|
|
const flowGroupListAll = async (item = {}) => {
|
|
|
try {
|
|
|
- const data = await flowDefinition.flowDefinitionListCategoryApi(item)
|
|
|
- myArray.value = data || []
|
|
|
+ const data: any = await flowDefinition.flowDefinitionListCategoryApi(item)
|
|
|
+ categoryList.value = data || []
|
|
|
console.log(data)
|
|
|
} catch (e) {
|
|
|
console.log(e)
|
|
@@ -184,15 +225,15 @@ const deleteFlowGroup = (item: any) => {
|
|
|
*/
|
|
|
const editFlowGroup = async (type, item, idx) => {
|
|
|
if (type === 'edit') {
|
|
|
- myArray.value[idx].editor = true
|
|
|
+ categoryList.value[idx].editor = true
|
|
|
return false
|
|
|
}
|
|
|
try {
|
|
|
- myArray.value[idx].editor = false
|
|
|
+ categoryList.value[idx].editor = false
|
|
|
const param = {
|
|
|
- id: myArray.value[idx].categoryId,
|
|
|
- name: myArray.value[idx].categoryName,
|
|
|
- sort: myArray.value[idx].categorySort
|
|
|
+ id: categoryList.value[idx].categoryId,
|
|
|
+ name: categoryList.value[idx].categoryName
|
|
|
+ // sort: categoryList.value[idx].categorySort
|
|
|
}
|
|
|
await flowGroup.flowGroupAddOrEditSaveApi(param)
|
|
|
flowGroupListAll()
|
|
@@ -376,5 +417,9 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .ghost {
|
|
|
+ opacity: 0.5;
|
|
|
+ box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .15);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|