初始化

ny

23 小时以前 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
<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 { createMessage, createConfirm } = useMessage();
const processStatusOptions = [
  { id: 'wait', fullName: '等待' },
  { id: 'process', fullName: '进行中' },
  { id: 'finish', fullName: '完成' },
  { id: 'error', fullName: '错误' },
];
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: `新步骤${uuid}`,
    name: uuid,
    icon: '',
    __config__: {
      jnpfKey: 'stepItem',
      children: [],
    },
  });
}
function delItem(index) {
  const list = props.activeData.__config__.children;
  if (list.length < 3) return createMessage.warning('最后两项不能删除');
  createConfirm({
    iconType: 'warning',
    title: $t('common.tipTitle'),
    content: '删除后不能撤销，确定要删除吗?',
    onOk: () => {
      props.activeData.__config__.children.splice(index, 1);
    },
  });
}
</script>
<template>
  <a-form-item label="简洁风格">
    <a-switch v-model:checked="activeData.simple" />
  </a-form-item>
  <a-form-item label="当前状态" v-show="showType === 'pc'">
    <jnpf-select v-model:value="activeData.processStatus" :options="processStatusOptions" />
  </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="步骤名称" />
          <jnpf-icon-picker v-model:value="element.icon" placeholder="请选择" v-show="showType === 'pc'" />
          <div class="close-btn select-line-icon" @click="delItem(index)">
            <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>