<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModal, useModalInner } from '@jnpf/ui/modal';
|
import { buildUUID } from '@jnpf/utils';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import AddDetailExtraModal from './AddDetailExtraModal.vue';
|
|
interface State {
|
detailExtraList: any[];
|
drawingList: any[];
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
const state = reactive<State>({
|
detailExtraList: [],
|
drawingList: [],
|
});
|
const { detailExtraList } = toRefs(state);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const [registerAddDetailExtraModal, { openModal: openAddDetailExtraModal }] = useModal();
|
|
function init(data) {
|
state.drawingList = cloneDeep(data.drawingList);
|
state.detailExtraList = cloneDeep(data.detailExtraList || []);
|
}
|
function addOrUpdateHandle(data?) {
|
openAddDetailExtraModal(true, { drawingList: state.drawingList, data });
|
}
|
function onConfirm(data) {
|
if (data.id) {
|
state.detailExtraList = state.detailExtraList.map((o) => (o.id === data?.id ? { ...o, ...data } : o));
|
} else {
|
state.detailExtraList.push({ ...data, id: buildUUID() });
|
}
|
}
|
function handleSubmit() {
|
emit('confirm', state.detailExtraList);
|
closeModal();
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" width="600px" class="JNPF-detail-extra-Modal" @register="registerModal" title="页签管理" @ok="handleSubmit" destroy-on-close>
|
<div class="detail-extra-contain">
|
<div class="detail-extra-header">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">添加</a-button>
|
</div>
|
<div class="detail-extra-list">
|
<template v-if="detailExtraList.length">
|
<div class="detail-extra-item" v-for="(item, index) in detailExtraList" :key="item.id">
|
<div class="name">{{ item.fullName }}</div>
|
<div class="action">
|
<div class="edit-btn custom-line-icon" @click="addOrUpdateHandle(item)">
|
<i class="icon-ym icon-ym-btn-edit"></i>
|
</div>
|
<div class="close-btn custom-line-icon ml-[5px]" @click="detailExtraList.splice(index, 1)">
|
<i class="icon-ym icon-ym-btn-clearn"></i>
|
</div>
|
</div>
|
</div>
|
</template>
|
<jnpf-empty class="mt-[150px]" v-else />
|
</div>
|
</div>
|
</BasicModal>
|
<AddDetailExtraModal @register="registerAddDetailExtraModal" @confirm="onConfirm" />
|
</template>
|
<style lang="scss">
|
.JNPF-detail-extra-Modal {
|
.ant-modal-body {
|
& > .scrollbar {
|
padding: 20px;
|
overflow: hidden;
|
|
.detail-extra-contain {
|
display: flex;
|
flex-direction: column;
|
height: 450px;
|
border: 1px solid var(--border-color-base1);
|
border-radius: 4px;
|
|
.detail-extra-header {
|
padding: 4px 0;
|
text-align: right;
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
|
.detail-extra-list {
|
flex: 1;
|
height: 100%;
|
padding: 8px 0;
|
overflow: auto;
|
|
.detail-extra-item {
|
display: flex;
|
align-items: center;
|
height: 36px;
|
padding: 0 10px;
|
|
.name {
|
flex: 1;
|
min-width: 0;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.action {
|
display: flex;
|
|
.custom-line-icon {
|
padding: 0 4px;
|
font-size: 22px;
|
line-height: 32px;
|
color: #606266;
|
cursor: pointer;
|
}
|
|
i {
|
font-size: 18px !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
