<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { ScrollContainer } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import draggable from 'vuedraggable';
|
|
import { getSelectedList } from '#/api/permission/user';
|
|
const emit = defineEmits(['register', 'confirm']);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const globSetting = useGlobSetting();
|
const apiUrl = ref(globSetting.apiURL);
|
const list = ref<any[]>([]);
|
const loading = ref<boolean>(false);
|
|
function init(data) {
|
if (!data.ids || !data.ids.length) return;
|
loading.value = true;
|
list.value = [];
|
getSelectedList(data.ids).then((res) => {
|
list.value = res.data.list || [];
|
loading.value = false;
|
});
|
}
|
function handleSubmit() {
|
const ids = list.value.map((o) => `${o.id}--user`);
|
emit('confirm', ids);
|
closeModal();
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="设置依次审批顺序" :width="400" @ok="handleSubmit" destroy-on-close class="approvers-sort-modal">
|
<div class="approvers-sort-body">
|
<ScrollContainer class="list" v-loading="loading">
|
<draggable v-model="list" :animation="300" group="selectItem" handle=".option-drag" item-key="id">
|
<template #item="{ element }">
|
<div class="selected-item selected-item-user">
|
<div class="selected-item-main">
|
<a-avatar :size="36" :src="apiUrl + element.headIcon" class="selected-item-headIcon" />
|
<div class="selected-item-text">
|
<p class="name">{{ element.fullName }}</p>
|
<p class="organize" :title="element.organize">{{ element.organize }}</p>
|
</div>
|
<div class="option-drag">
|
<i class="icon-ym icon-ym-darg"></i>
|
</div>
|
</div>
|
</div>
|
</template>
|
</draggable>
|
</ScrollContainer>
|
</div>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.approvers-sort-modal {
|
.ant-modal-body > .scrollbar {
|
padding: 20px;
|
}
|
|
.approvers-sort-body {
|
.list {
|
height: 360px;
|
font-size: 14px;
|
border: 1px solid var(--border-color-base);
|
border-radius: var(--radius);
|
|
.selected-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
padding: 0 12px;
|
|
&.selected-item-user {
|
&:last-child {
|
.selected-item-main {
|
border-bottom-color: transparent;
|
}
|
}
|
|
.selected-item-main {
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 50px;
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
|
.selected-item-headIcon {
|
flex-shrink: 0;
|
}
|
|
.selected-item-text {
|
flex: 1;
|
min-width: 0;
|
margin-left: 10px;
|
|
.name {
|
height: 20px;
|
margin-bottom: 2px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 14px;
|
line-height: 20px;
|
white-space: nowrap;
|
}
|
|
.organize {
|
height: 17px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 12px;
|
line-height: 17px;
|
color: #999;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
&:hover {
|
background-color: var(--selected-hover-bg);
|
}
|
|
span {
|
max-width: 90%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.option-drag {
|
color: #606266;
|
cursor: move;
|
|
.icon-ym-darg {
|
display: inline-block;
|
font-size: 20px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
