初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script lang="ts" setup>
import { computed, inject } from 'vue';
 
import { useMessage } from '@jnpf/hooks';
import { buildBitUUID } from '@jnpf/utils';
 
import draggable from 'vuedraggable';
 
import { $t } from '#/locales';
 
defineOptions({ inheritAttrs: false });
const props = defineProps(['activeData']);
const typeOptions = [
  { id: '', fullName: '默认' },
  { id: 'card', fullName: '选项卡' },
];
const positionOptions = [
  { id: 'top', fullName: '顶部' },
  { id: 'left', fullName: '左侧' },
  { id: 'right', fullName: '右侧' },
  { id: 'bottom', fullName: '底部' },
];
 
const { createMessage, createConfirm } = useMessage();
 
const getShowType: (() => string | undefined) | undefined = inject('getShowType');
const showType = computed(() => (getShowType as () => string | undefined)());
 
function addItem() {
  const uuid = buildBitUUID();
  props.activeData.__config__.children.push({
    title: `New Tab ${uuid}`,
    titleI18nCode: '',
    name: uuid,
    __config__: {
      jnpfKey: 'tabItem',
      children: [],
    },
  });
}
function delItem(index, item) {
  const list = props.activeData.__config__.children;
  if (list.length < 2) return createMessage.warning('最后一项不能删除');
  createConfirm({
    iconType: 'warning',
    title: $t('common.tipTitle'),
    content: '删除后不能撤销，确定要删除吗?',
    onOk: () => {
      if (props.activeData.__config__.active === item.name) {
        const nextTab = list[index + 1] || list[index - 1];
        if (nextTab) props.activeData.__config__.active = nextTab.name;
      }
      props.activeData.__config__.children.splice(index, 1);
    },
  });
}
</script>
<template>
  <a-form-item label="风格类型" v-if="showType === 'pc'">
    <jnpf-radio v-model:value="activeData.type" :options="typeOptions" option-type="button" button-style="solid" class="right-radio" />
  </a-form-item>
  <a-form-item label="选项卡位置" v-if="showType === 'pc'">
    <jnpf-radio v-model:value="activeData.tabPosition" :options="positionOptions" option-type="button" button-style="solid" class="right-radio" />
  </a-form-item>
  <a-divider>标签页配置</a-divider>
  <div class="options-list">
    <draggable v-model="activeData.__config__.children" :animation="300" group="selectItem" handle=".option-drag" item-key="uuid">
      <template #item="{ element, index }">
        <div class="select-item">
          <div class="select-line-icon option-drag">
            <i class="icon-ym icon-ym-darg"></i>
          </div>
          <jnpf-i18n-input v-model:value="element.title" v-model:i18n="element.titleI18nCode" placeholder="标签名称" />
          <div class="close-btn select-line-icon" @click="delItem(index, element)">
            <i class="icon-ym icon-ym-btn-clearn"></i>
          </div>
        </div>
      </template>
    </draggable>
    <div class="add-btn">
      <a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addItem" class="!px-0">添加标签页</a-button>
    </div>
  </div>
</template>