<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
interface State {
|
innerValue: string;
|
separator: string;
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
const state = reactive<State>({
|
innerValue: '',
|
separator: '|',
|
});
|
const { innerValue } = toRefs(state);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
|
function init(data) {
|
state.innerValue = '';
|
if (!data.options.length) return;
|
const loop = (list, parentId?) => {
|
for (const e of list) {
|
let parent = '';
|
if (parentId) parent = state.separator + parentId;
|
state.innerValue += `${e.fullName + state.separator + e.id + parent}\n`;
|
if (e?.children && Array.isArray(e.children)) {
|
loop(e.children, e.id);
|
}
|
}
|
};
|
loop(data.options);
|
}
|
async function handleSubmit() {
|
const options: any[] = [];
|
if (!state.innerValue) return emit('confirm', options);
|
const list = state.innerValue.split('\n');
|
for (let i = 0; i < list.length; i++) {
|
const e = list[i]?.trim();
|
if (!e || !e.includes(state.separator)) continue;
|
const row = e.split(state.separator) || [];
|
if (row.length < 2) continue;
|
if (isRepeat(options, row[1])) continue;
|
if (row.length === 2) {
|
options.push({ fullName: row[0], id: row[1], children: [] });
|
continue;
|
}
|
if (row.length === 3) {
|
const getParentId = (list, row) => {
|
const parentId = row[row.length - 1];
|
for (const e of list) {
|
if (e.children && e.children.length) getParentId(e.children, row);
|
if (e.id == parentId) {
|
e.children.push({ fullName: row[0], id: row[1], children: [] });
|
break;
|
}
|
}
|
};
|
getParentId(options, row);
|
}
|
}
|
emit('confirm', options);
|
closeModal();
|
}
|
function isRepeat(options, id) {
|
let boo = false;
|
const loop = (list) => {
|
for (const e of list) {
|
if (e.id == id) {
|
boo = true;
|
break;
|
}
|
if (e.children && Array.isArray(e.children)) loop(e.children);
|
}
|
};
|
loop(options);
|
return boo;
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="批量编辑" show-ok-btn @ok="handleSubmit" :width="700">
|
<a-alert message="注意：每行对应一个选项；选项名、选项值和父级选项值之间用英文 | 隔开。格式如下：" type="warning" show-icon />
|
<div class="demo-box">
|
<div class="demo-box-cell">
|
<p class="w-[260px]">根节点格式：选项名|选项值</p>
|
<p>输入示例：<span>选项一|选项一的值</span></p>
|
</div>
|
<div class="demo-box-cell">
|
<p class="w-[260px]">子节点格式：选项名|选项值|父级选项值</p>
|
<p>输入示例：<span>选项一|选项一的值|选项一父级的值</span></p>
|
</div>
|
</div>
|
<jnpf-textarea v-model:value="innerValue" :rows="12" class="!mb-[20px] !leading-[30px]" />
|
</BasicModal>
|
</template>
|
<style lang="scss" scoped>
|
.demo-box {
|
margin: 10px 0;
|
border: 1px solid var(--border-color-base);
|
|
.demo-box-cell {
|
padding: 0 11px;
|
line-height: 36px;
|
border-bottom: 1px solid var(--border-color-base);
|
|
&:last-child {
|
border-bottom: 0;
|
}
|
|
p,
|
span {
|
display: inline-block;
|
}
|
|
span {
|
color: var(--primary-color);
|
}
|
}
|
}
|
</style>
|
