初始化

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script lang="ts" setup>
import type { TreeActionType } from '@jnpf/ui';
 
import { ref, unref } from 'vue';
 
import { BasicTree, MonacoEditor } from '@jnpf/ui';
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
 
import ScriptDemo from './ScriptDemo.vue';
 
const props = defineProps(['treeTitle', 'drawingList', 'type']);
const emit = defineEmits(['register', 'confirm']);
const [registerModal, { closeModal }] = useModalInner(init);
const editorRef = ref(null);
const leftTreeRef = ref<Nullable<TreeActionType>>(null);
const text = ref('');
const treeData = ref<any[]>([]);
 
function init(data) {
  text.value = data.text;
  getTreeList();
}
function getTreeList() {
  const list: any[] = [];
  const loop = (data, parent?) => {
    if (!data) return;
    if (data.__config__ && data.__config__.jnpfKey !== 'table' && data.__config__.children && Array.isArray(data.__config__.children)) {
      loop(data.__config__.children, data);
    }
    if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
    if (data.__vModel__) {
      if (data.__config__.jnpfKey === 'table') {
        const item: Recordable = {
          id: data.__vModel__,
          fullName: data.__config__.label,
          children: [],
        };
        const children: any[] = [];
        if (data.__config__.children && Array.isArray(data.__config__.children) && data.__config__.children.length) {
          for (let i = 0; i < data.__config__.children.length; i++) {
            const child = data.__config__.children[i];
            if (child.__vModel__) {
              children.push({ id: `${data.__vModel__}.${child.__vModel__}`, fullName: child.__config__.label });
            }
          }
        }
        item.children = children;
        list.push(item);
      } else {
        list.push({ id: data.__vModel__, fullName: data.__config__.label });
      }
    }
  };
  loop(unref(props.drawingList));
  const topItem = {
    id: Date.now().toString(),
    fullName: props.treeTitle,
    top: true,
    children: list,
  };
  treeData.value = [topItem];
}
 
function handleTreeSelect(keys) {
  if (!keys.length) return;
  const leftTree = unref(leftTreeRef);
  const selectedNode: any = leftTree?.getSelectedNode(keys[0]);
  if (selectedNode.top || selectedNode.children) return;
  (editorRef.value as any)?.insert(keys[0]);
}
function handleSubmit() {
  emit('confirm', text.value);
  closeModal();
}
</script>
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="表单脚本"
    help-message="小程序不支持在线JS脚本"
    :width="1000"
    @ok="handleSubmit"
    destroy-on-close
    class="form-script-modal">
    <div class="form-script-modal-body">
      <div class="left-board">
        <BasicTree ref="leftTreeRef" class="remove-active-tree" :tree-data="treeData" default-expand-all @select="handleTreeSelect" />
      </div>
      <div class="main-board">
        <div class="main-board-editor">
          <MonacoEditor ref="editorRef" v-model="text" />
        </div>
        <div class="main-board-tips">
          <p>请从左侧面板选择的字段名，支持JavaScript的脚本，<ScriptDemo :type="type" /></p>
        </div>
      </div>
    </div>
  </BasicModal>
</template>