142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<template>
|
||
<el-form inline label-width="100px">
|
||
<el-form-item label="调整优先级" prop="level">
|
||
<el-popover placement="right" title="拖拽条件调整优先级顺序" width="250" trigger="click">
|
||
<draggable style="width: 100%; min-height:25px" :list="prioritySortList" group="from"
|
||
@end="onEnd"
|
||
:options="sortOption">
|
||
<template #item="{ index,element }">
|
||
<div :class="{'drag-no-choose': true, 'drag-hover': element.id === selectedNode.id}">
|
||
<ellipsis style="width: 80px;" hover-tip :content="element.name"/>
|
||
<div>优先级 {{ index + 1 }}</div>
|
||
</div>
|
||
</template>
|
||
</draggable>
|
||
|
||
<template #reference>
|
||
<el-button slot="reference">第{{ nowNodeLeave + 1 }}级</el-button>
|
||
</template>
|
||
</el-popover>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="条件组关系" label-width="150px">-->
|
||
<!-- <el-switch v-model="selectedNode.props.groupsType" active-color="#409EFF"-->
|
||
<!-- inactive-color="#c1c1c1" active-value="AND" inactive-value="OR"-->
|
||
<!-- active-text="且" inactive-text="或">-->
|
||
<!-- </el-switch>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="条件组表达式">-->
|
||
<!-- <el-input v-model="config.expression" placeholder="输入条件组关系表达式 &为与，|为或"/>-->
|
||
<!-- <span class="item-desc">使用表达式构建复杂逻辑，例如: (A & B) | C</span>-->
|
||
<!-- </el-form-item>-->
|
||
</el-form>
|
||
<!-- <div>-->
|
||
<!-- <el-button type="primary" icon="Plus" style="margin: 0 15px 15px 0" round-->
|
||
<!-- @click="addConditionGroup">-->
|
||
<!-- 添加条件组-->
|
||
<!-- </el-button>-->
|
||
<!-- <span class="item-desc">只有必填选项才能作为审批条件</span>-->
|
||
<!-- </div>-->
|
||
<group-item/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import draggable from 'vuedraggable';
|
||
import Ellipsis from '../common/Ellipsis.vue'
|
||
import {computed, defineProps, ref,defineEmits} from 'vue'
|
||
import {useProcessStore} from '@/stores/processStore.js'
|
||
const emit = defineEmits()
|
||
|
||
const processStore = useProcessStore()
|
||
import GroupItem from "./ConditionGroupItemConfig.vue"
|
||
|
||
const props = defineProps({
|
||
config: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
})
|
||
|
||
const sortOption = reactive({
|
||
animation: 300,
|
||
chosenClass: 'choose',
|
||
scroll: true,
|
||
sort: true
|
||
})
|
||
|
||
const selectedNode = computed(() => {
|
||
//当前选择的节点
|
||
return processStore.getSelectedNode()
|
||
})
|
||
|
||
|
||
//条件节点
|
||
const prioritySortList = computed(() => {
|
||
let node = processStore.nodeMap.get(processStore.getSelectedNode().parentId)
|
||
if (node) {
|
||
return node.branchs || []
|
||
}
|
||
return []
|
||
})
|
||
|
||
const nowNodeLeave = computed(() => {
|
||
let node = processStore.nodeMap.get(processStore.getSelectedNode().parentId)
|
||
let list = []
|
||
if (node) {
|
||
list = node.branchs || []
|
||
}
|
||
return list.indexOf(processStore.getSelectedNode())
|
||
})
|
||
|
||
|
||
const onEnd = () => {
|
||
emit('initRender')
|
||
}
|
||
const addConditionGroup = (select) => {
|
||
props.config.groups.push({
|
||
cids: [],
|
||
groupType: "OR",
|
||
conditions: []
|
||
})
|
||
}
|
||
|
||
|
||
// const selected = (select) => {
|
||
// select.forEach(val => processStore.addAssignedUser(val))
|
||
// }
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.choose {
|
||
border-radius: 5px;
|
||
margin-top: 2px;
|
||
background: #f4f4f4;
|
||
border: 1px dashed #1890FF !important;
|
||
}
|
||
|
||
.drag-hover {
|
||
color: #1890FF
|
||
}
|
||
|
||
.drag-no-choose {
|
||
cursor: move;
|
||
background: #f8f8f8;
|
||
border-radius: 5px;
|
||
margin: 5px 0;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #ffffff;
|
||
|
||
div {
|
||
display: inline-block;
|
||
font-size: small !important;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
float: right !important;
|
||
}
|
||
}
|
||
</style>
|