starfish-form-custom 1.0.45 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{formAction-47da9ade.mjs → formAction-003dce29.mjs} +1 -1
- package/dist/{index-b3b75fee.mjs → index-8980a82d.mjs} +4 -4
- package/dist/{index-d029d3de.mjs → index-bf109006.mjs} +1 -1
- package/dist/{index-2d78c11c.mjs → index-ffe5a532.mjs} +2 -2
- package/dist/{main-c9f94a75.mjs → main-a9ce8be4.mjs} +133 -73
- package/dist/{starfish-form-ff99f526.mjs → starfish-form-dfa363ef.mjs} +11 -5
- package/dist/starfish-form.mjs +1 -1
- package/dist/style.css +5 -5
- package/dist/types/form/src/main.d.ts +9 -0
- package/dist/types/form/src/starfish-form.vue.d.ts +9 -0
- package/dist/types/form/src/utils/fieldProps.d.ts +4 -0
- package/package.json +1 -1
- package/src/components/CheckBox/index.vue +37 -4
- package/src/components/Date/index.vue +2 -2
- package/src/components/DateTime/index.vue +2 -2
- package/src/components/InputNumber/index.vue +2 -2
- package/src/components/Radio/index.vue +23 -3
- package/src/components/RichText/index.vue +2 -2
- package/src/components/Rule/rules.js +9 -4
- package/src/components/Selected/index.vue +28 -4
- package/src/components/Selecteds/index.vue +25 -25
- package/src/components/Switch/index.vue +23 -4
- package/src/components/Text/index.vue +2 -2
- package/src/components/TextArea/index.vue +2 -2
- package/src/starfish-form.vue +8 -2
- package/src/utils/fieldProps.ts +5 -1
- package/stats.html +1 -1
|
@@ -3,7 +3,7 @@ import 'element-plus/es/components/base/style/css';
|
|
|
3
3
|
import 'element-plus/es/components/form/style/css';
|
|
4
4
|
import 'element-plus/es/components/form-item/style/css';
|
|
5
5
|
import { defineComponent, getCurrentInstance, ref, onMounted, openBlock, createElementBlock, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, toRaw } from 'vue';
|
|
6
|
-
import { _ as _export_sfc } from './main-
|
|
6
|
+
import { _ as _export_sfc } from './main-a9ce8be4.mjs';
|
|
7
7
|
import 'element-plus/es/components/icon/style/css';
|
|
8
8
|
import 'element-plus/es/components/input/style/css';
|
|
9
9
|
import 'element-plus/es/components/checkbox/style/css';
|
|
@@ -60,6 +60,10 @@ const _sfc_main = defineComponent({
|
|
|
60
60
|
readonly: {
|
|
61
61
|
type: Boolean,
|
|
62
62
|
default: false
|
|
63
|
+
},
|
|
64
|
+
search: {
|
|
65
|
+
type: Boolean,
|
|
66
|
+
default: false
|
|
63
67
|
}
|
|
64
68
|
},
|
|
65
69
|
setup(props, { emit }) {
|
|
@@ -107,14 +111,14 @@ const _sfc_main = defineComponent({
|
|
|
107
111
|
function getRules(item2) {
|
|
108
112
|
if (!item2.layout) {
|
|
109
113
|
let rule = [];
|
|
110
|
-
if (item2.data.required) {
|
|
114
|
+
if (item2.data.required && !props.search) {
|
|
111
115
|
rule.push({
|
|
112
116
|
required: true,
|
|
113
117
|
message: "\u8BF7\u8F93\u5165" + item2.data.label,
|
|
114
118
|
trigger: "blur"
|
|
115
119
|
});
|
|
116
120
|
}
|
|
117
|
-
if (typeof item2.data.minLength === "number" && item2.data.minLength > 0) {
|
|
121
|
+
if (typeof item2.data.minLength === "number" && item2.data.minLength > 0 && !props.search) {
|
|
118
122
|
rule.push({
|
|
119
123
|
validator: (rule2, value, callback) => {
|
|
120
124
|
if (typeof value === "string" && value.length < item2.data.minLength) {
|
|
@@ -324,11 +328,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
324
328
|
onChange: _ctx.handleControlChange
|
|
325
329
|
}, { ref_for: true }, _ctx.globalConfig, {
|
|
326
330
|
readonly: _ctx.readonly,
|
|
331
|
+
search: _ctx.search,
|
|
327
332
|
item: item2,
|
|
328
333
|
data: _ctx.formResult || "{}",
|
|
329
334
|
drag: false,
|
|
330
335
|
size: "default"
|
|
331
|
-
}), null, 16, ["onChange", "readonly", "item", "data"]))
|
|
336
|
+
}), null, 16, ["onChange", "readonly", "search", "item", "data"]))
|
|
332
337
|
]),
|
|
333
338
|
_: 2
|
|
334
339
|
}, 1032, ["prop"])) : item2.show ? (openBlock(), createBlock(resolveDynamicComponent(item2.ControlType), mergeProps({
|
|
@@ -338,11 +343,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
338
343
|
key: item2.id
|
|
339
344
|
}, { ref_for: true }, _ctx.globalConfig, {
|
|
340
345
|
readonly: _ctx.readonly,
|
|
346
|
+
search: _ctx.search,
|
|
341
347
|
item: item2,
|
|
342
348
|
data: _ctx.formResult || "{}",
|
|
343
349
|
drag: false,
|
|
344
350
|
size: "default"
|
|
345
|
-
}), null, 16, ["onChange", "readonly", "item", "data"])) : createCommentVNode("", true)
|
|
351
|
+
}), null, 16, ["onChange", "readonly", "search", "item", "data"])) : createCommentVNode("", true)
|
|
346
352
|
], 64);
|
|
347
353
|
}), 256))
|
|
348
354
|
]),
|
package/dist/starfish-form.mjs
CHANGED
package/dist/style.css
CHANGED
|
@@ -424,15 +424,15 @@
|
|
|
424
424
|
width: 100%;
|
|
425
425
|
min-height: 60px;
|
|
426
426
|
height: 100%;
|
|
427
|
-
}.rich-text-editor[data-v-
|
|
427
|
+
}.rich-text-editor[data-v-2f76c2d0] {
|
|
428
428
|
min-height: 200px;
|
|
429
429
|
position: relative;
|
|
430
430
|
z-index: 1;
|
|
431
431
|
}
|
|
432
|
-
[data-v-
|
|
432
|
+
[data-v-2f76c2d0] .editor-content {
|
|
433
433
|
min-height: 200px;
|
|
434
434
|
}
|
|
435
|
-
[data-v-
|
|
435
|
+
[data-v-2f76c2d0] .editor-content .ql-toolbar {
|
|
436
436
|
z-index: 100;
|
|
437
437
|
background: white;
|
|
438
438
|
border: 1px solid #ccc;
|
|
@@ -440,7 +440,7 @@
|
|
|
440
440
|
border-top-right-radius: 4px;
|
|
441
441
|
position: relative;
|
|
442
442
|
}
|
|
443
|
-
[data-v-
|
|
443
|
+
[data-v-2f76c2d0] .editor-content .ql-container {
|
|
444
444
|
border: 1px solid #ccc;
|
|
445
445
|
border-top: none;
|
|
446
446
|
border-bottom-left-radius: 4px;
|
|
@@ -448,7 +448,7 @@
|
|
|
448
448
|
min-height: 200px;
|
|
449
449
|
z-index: 99;
|
|
450
450
|
}
|
|
451
|
-
[data-v-
|
|
451
|
+
[data-v-2f76c2d0] .shape .rich-text-editor {
|
|
452
452
|
pointer-events: auto !important;
|
|
453
453
|
}.cm-gutters.cm-gutters-before {
|
|
454
454
|
background: #133F63;
|
|
@@ -16,6 +16,10 @@ export declare const Dynamicform: DefineComponent<ExtractPropTypes<{
|
|
|
16
16
|
type: BooleanConstructor;
|
|
17
17
|
default: boolean;
|
|
18
18
|
};
|
|
19
|
+
search: {
|
|
20
|
+
type: BooleanConstructor;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
19
23
|
}>, {
|
|
20
24
|
rules: any;
|
|
21
25
|
ruleForm: Ref<any, any>;
|
|
@@ -40,7 +44,12 @@ export declare const Dynamicform: DefineComponent<ExtractPropTypes<{
|
|
|
40
44
|
type: BooleanConstructor;
|
|
41
45
|
default: boolean;
|
|
42
46
|
};
|
|
47
|
+
search: {
|
|
48
|
+
type: BooleanConstructor;
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
43
51
|
}>> & Readonly<{}>, {
|
|
52
|
+
search: boolean;
|
|
44
53
|
readonly: boolean;
|
|
45
54
|
allFormList: any;
|
|
46
55
|
formResult: Record<string, any>;
|
|
@@ -16,6 +16,10 @@ declare const _sfc_main: DefineComponent<ExtractPropTypes<{
|
|
|
16
16
|
type: BooleanConstructor;
|
|
17
17
|
default: boolean;
|
|
18
18
|
};
|
|
19
|
+
search: {
|
|
20
|
+
type: BooleanConstructor;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
19
23
|
}>, {
|
|
20
24
|
rules: any;
|
|
21
25
|
ruleForm: Ref<any, any>;
|
|
@@ -40,7 +44,12 @@ declare const _sfc_main: DefineComponent<ExtractPropTypes<{
|
|
|
40
44
|
type: BooleanConstructor;
|
|
41
45
|
default: boolean;
|
|
42
46
|
};
|
|
47
|
+
search: {
|
|
48
|
+
type: BooleanConstructor;
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
43
51
|
}>> & Readonly<{}>, {
|
|
52
|
+
search: boolean;
|
|
44
53
|
readonly: boolean;
|
|
45
54
|
allFormList: any;
|
|
46
55
|
formResult: Record<string, any>;
|
package/package.json
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
|
|
3
3
|
<div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
|
|
4
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
4
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
5
5
|
<label>{{ item.data.label }}{{suffix}}</label>
|
|
6
|
-
<el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
6
|
+
<el-tooltip v-if="item.data.tip && !readonly && !search" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
7
7
|
<span class="tip iconfontui icon-tishi"></span>
|
|
8
8
|
</el-tooltip>
|
|
9
9
|
</div>
|
|
10
10
|
<div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
|
|
11
11
|
<!-- 只读的时候就只展示文本 -->
|
|
12
|
-
<span v-if="!drag &&
|
|
12
|
+
<span v-if="!drag && (item.data.state === 'readonly' || readonly)">
|
|
13
|
+
{{ getDisplayText() }}
|
|
14
|
+
</span>
|
|
13
15
|
<el-checkbox-group v-model="data[item.data.fieldName]" :class="{'vertical-group': item.data.arrangeMent === 'vertical'}" v-else-if="!drag && data[item.data.fieldName]" :size="size" :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'">
|
|
14
16
|
<el-checkbox v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-checkbox>
|
|
15
17
|
</el-checkbox-group>
|
|
@@ -19,11 +21,13 @@
|
|
|
19
21
|
</div>
|
|
20
22
|
</div>
|
|
21
23
|
</template>
|
|
24
|
+
|
|
22
25
|
<script lang="ts">
|
|
23
26
|
import { defineComponent } from "vue";
|
|
24
27
|
import { getFormConfig } from "../../utils/fieldConfig";
|
|
25
28
|
import fieldProps from "../../utils/fieldProps";
|
|
26
29
|
import { useWatch } from "../../utils/customHooks";
|
|
30
|
+
|
|
27
31
|
export default defineComponent({
|
|
28
32
|
ControlType: "CheckBox", // 必须与文件名匹配
|
|
29
33
|
nameCn: "复选框",
|
|
@@ -40,5 +44,34 @@
|
|
|
40
44
|
setup(props) {
|
|
41
45
|
useWatch(props);
|
|
42
46
|
},
|
|
47
|
+
methods: {
|
|
48
|
+
getDisplayText() {
|
|
49
|
+
const fieldValue = this.data[this.item.data.fieldName];
|
|
50
|
+
const items = this.item.data.itemConfig?.items || [];
|
|
51
|
+
|
|
52
|
+
// 如果没有值,显示默认的 "--"
|
|
53
|
+
if (!fieldValue && fieldValue !== 0 && fieldValue !== false) {
|
|
54
|
+
return '--';
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// 如果是数组(多选)
|
|
58
|
+
if (Array.isArray(fieldValue)) {
|
|
59
|
+
if (fieldValue.length === 0) return '--';
|
|
60
|
+
|
|
61
|
+
// 根据选中的 value 查找对应的 label
|
|
62
|
+
const selectedLabels = fieldValue.map(value => {
|
|
63
|
+
const item = items.find(item => item.value === value);
|
|
64
|
+
return item ? item.label : value;
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
return selectedLabels.join(', ');
|
|
68
|
+
}
|
|
69
|
+
// 如果是单个值(单选模式)
|
|
70
|
+
else {
|
|
71
|
+
const item = items.find(item => item.value === fieldValue);
|
|
72
|
+
return item ? item.label : fieldValue;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
43
76
|
});
|
|
44
|
-
</script>
|
|
77
|
+
</script>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
|
|
3
3
|
<div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
|
|
4
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
4
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
5
5
|
<label>{{ item.data.label }}{{suffix}}</label>
|
|
6
|
-
<el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
6
|
+
<el-tooltip v-if="item.data.tip && !readonly && !search" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
7
7
|
<span class="tip iconfontui icon-tishi"></span>
|
|
8
8
|
</el-tooltip>
|
|
9
9
|
</div>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
|
|
3
3
|
<div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
|
|
4
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
4
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
5
5
|
<label>{{ item.data.label }}{{suffix}}</label>
|
|
6
|
-
<el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
6
|
+
<el-tooltip v-if="item.data.tip && !readonly && !search" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
7
7
|
<span class="tip iconfontui icon-tishi"></span>
|
|
8
8
|
</el-tooltip>
|
|
9
9
|
</div>
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
:class="'label_' + labelalign"
|
|
13
13
|
:style="{ width: labelWidth + 'px' }"
|
|
14
14
|
>
|
|
15
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
15
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly && !search"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
17
17
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
18
18
|
<el-tooltip
|
|
19
|
-
v-if="item.data.tip"
|
|
19
|
+
v-if="item.data.tip && !readonly"
|
|
20
20
|
class="item"
|
|
21
21
|
effect="dark"
|
|
22
22
|
:content="item.data.tip"
|
|
@@ -29,7 +29,10 @@
|
|
|
29
29
|
class="control"
|
|
30
30
|
:style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
|
|
31
31
|
>
|
|
32
|
-
|
|
32
|
+
<!-- 只读状态显示对应的 label -->
|
|
33
|
+
<span v-if="!drag && (item.data.state === 'readonly' || readonly)">
|
|
34
|
+
{{ getDisplayText() }}
|
|
35
|
+
</span>
|
|
33
36
|
<el-radio-group
|
|
34
37
|
v-else-if="!drag"
|
|
35
38
|
v-model="data[item.data.fieldName]"
|
|
@@ -82,5 +85,22 @@ export default defineComponent({
|
|
|
82
85
|
setup(props) {
|
|
83
86
|
useWatch(props);
|
|
84
87
|
},
|
|
88
|
+
methods: {
|
|
89
|
+
getDisplayText() {
|
|
90
|
+
const fieldValue = this.data[this.item.data.fieldName];
|
|
91
|
+
const items = this.item.data.itemConfig?.items || [];
|
|
92
|
+
|
|
93
|
+
// 如果没有值,显示默认的 "--"
|
|
94
|
+
if (fieldValue === undefined || fieldValue === null || fieldValue === '') {
|
|
95
|
+
return '--';
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// 查找对应的 label
|
|
99
|
+
const selectedItem = items.find(item => item.value === fieldValue);
|
|
100
|
+
|
|
101
|
+
// 如果找到对应的 label,显示 label,否则显示原始值
|
|
102
|
+
return selectedItem ? selectedItem.label : fieldValue;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
85
105
|
});
|
|
86
|
-
</script>
|
|
106
|
+
</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
|
|
8
8
|
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
9
9
|
<label>{{ item.data.label }}{{suffix}}</label>
|
|
10
|
-
<el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
10
|
+
<el-tooltip v-if="item.data.tip && !readonly" class="item" effect="dark" :content="item.data.tip" placement="top">
|
|
11
11
|
<span class="tip iconfontui icon-tishi"></span>
|
|
12
12
|
</el-tooltip>
|
|
13
13
|
</div>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
:content="content"
|
|
20
20
|
@update:content="handleContentChange"
|
|
21
21
|
toolbar="full"
|
|
22
|
-
:read-only="isReadonly"
|
|
22
|
+
:read-only="isReadonly || drag"
|
|
23
23
|
class="editor-content"
|
|
24
24
|
/>
|
|
25
25
|
</div>
|
|
@@ -23,9 +23,14 @@ const validateNumberD2 = `(rule, value, callback) => {
|
|
|
23
23
|
// 电话号码校验规则
|
|
24
24
|
const validatePhone = `(rule, value, callback) => {
|
|
25
25
|
if (value === "" || value == null) {
|
|
26
|
-
callback(new Error("
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
callback(new Error("请输入电话号码"));
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
|
|
30
|
+
|
|
31
|
+
if (!re.test(value)) {
|
|
32
|
+
callback(new Error("请输入正确的11位手机号码"));
|
|
33
|
+
return;
|
|
29
34
|
}
|
|
30
35
|
callback();
|
|
31
36
|
}`;
|
|
@@ -34,7 +39,7 @@ const validatePhone = `(rule, value, callback) => {
|
|
|
34
39
|
const validateIdCard = `(rule, value, callback) => {
|
|
35
40
|
if (value === "" || value == null) {
|
|
36
41
|
callback(new Error("请输入"));
|
|
37
|
-
} else if (!/^[1-9]
|
|
42
|
+
} else if (!/^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/.test(value)) {
|
|
38
43
|
callback(new Error("请输入正确的身份证号"));
|
|
39
44
|
}
|
|
40
45
|
callback();
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
:class="'label_' + labelalign"
|
|
13
13
|
:style="{ width: labelWidth + 'px' }"
|
|
14
14
|
>
|
|
15
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
15
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly && !search"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
style="width: 320px;"
|
|
34
34
|
:placeholder="item.data.placeholder"
|
|
35
35
|
v-if="drag"
|
|
36
|
+
clearable
|
|
36
37
|
:size="size"
|
|
37
38
|
:disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
|
|
38
39
|
>
|
|
@@ -43,13 +44,17 @@
|
|
|
43
44
|
:value="items.value"
|
|
44
45
|
/>
|
|
45
46
|
</el-select>
|
|
46
|
-
|
|
47
|
+
<!-- 只读状态显示对应的 label -->
|
|
48
|
+
<span v-if="!drag && (item.data.state === 'readonly' || readonly)">
|
|
49
|
+
{{ getDisplayText() }}
|
|
50
|
+
</span>
|
|
47
51
|
<el-select
|
|
48
52
|
v-model="data[item.data.fieldName]"
|
|
49
53
|
style="width: 320px;"
|
|
50
54
|
:placeholder="item.data.placeholder"
|
|
51
55
|
v-else-if="!drag"
|
|
52
56
|
:size="size"
|
|
57
|
+
clearable
|
|
53
58
|
:disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
|
|
54
59
|
@focus="execFunc('onFocus')"
|
|
55
60
|
@blur="execFunc('onBlur')"
|
|
@@ -64,6 +69,7 @@
|
|
|
64
69
|
</div>
|
|
65
70
|
</div>
|
|
66
71
|
</template>
|
|
72
|
+
|
|
67
73
|
<script lang="ts">
|
|
68
74
|
import {
|
|
69
75
|
defineComponent,
|
|
@@ -73,6 +79,7 @@ import {
|
|
|
73
79
|
import { getFormConfig } from "../../utils/fieldConfig";
|
|
74
80
|
import fieldProps from "../../utils/fieldProps";
|
|
75
81
|
import { useWatch } from "../../utils/customHooks";
|
|
82
|
+
|
|
76
83
|
export default defineComponent({
|
|
77
84
|
ControlType: "Selected", // 必须与文件名匹配
|
|
78
85
|
nameCn: "选择器",
|
|
@@ -99,5 +106,22 @@ export default defineComponent({
|
|
|
99
106
|
},
|
|
100
107
|
};
|
|
101
108
|
},
|
|
109
|
+
methods: {
|
|
110
|
+
getDisplayText() {
|
|
111
|
+
const fieldValue = this.data[this.item.data.fieldName];
|
|
112
|
+
const items = this.item.data.itemConfig?.items || [];
|
|
113
|
+
|
|
114
|
+
// 如果没有值,显示默认的 "--"
|
|
115
|
+
if (fieldValue === undefined || fieldValue === null || fieldValue === '') {
|
|
116
|
+
return this.item.data.placeholder || '--';
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// 查找对应的 label
|
|
120
|
+
const selectedItem = items.find(item => item.value === fieldValue);
|
|
121
|
+
|
|
122
|
+
// 如果找到对应的 label,显示 label,否则显示原始值
|
|
123
|
+
return selectedItem ? selectedItem.label : fieldValue;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
102
126
|
});
|
|
103
|
-
</script>
|
|
127
|
+
</script>
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
:class="'label_' + labelalign"
|
|
13
13
|
:style="{ width: labelWidth + 'px' }"
|
|
14
14
|
>
|
|
15
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
15
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly && !search"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|
|
@@ -44,8 +44,9 @@
|
|
|
44
44
|
:value="items.value"
|
|
45
45
|
/>
|
|
46
46
|
</el-select>
|
|
47
|
+
<!-- 只读状态显示对应的 label -->
|
|
47
48
|
<span v-else-if="!drag && (item.data.state === 'readonly' || readonly)">
|
|
48
|
-
{{
|
|
49
|
+
{{ getDisplayText() }}
|
|
49
50
|
</span>
|
|
50
51
|
<el-select
|
|
51
52
|
v-else
|
|
@@ -78,6 +79,7 @@ import {
|
|
|
78
79
|
import { getFormConfig } from "../../utils/fieldConfig";
|
|
79
80
|
import fieldProps from "../../utils/fieldProps";
|
|
80
81
|
import { useWatch } from "../../utils/customHooks";
|
|
82
|
+
|
|
81
83
|
export default defineComponent({
|
|
82
84
|
ControlType: "Selecteds", // 必须与文件名匹配
|
|
83
85
|
nameCn: "多选择器",
|
|
@@ -95,27 +97,6 @@ export default defineComponent({
|
|
|
95
97
|
const vm = getCurrentInstance() as ComponentInternalInstance;
|
|
96
98
|
useWatch(props);
|
|
97
99
|
|
|
98
|
-
const getReadonlyDisplayValue = () => {
|
|
99
|
-
try {
|
|
100
|
-
// 优先使用 data 中的值
|
|
101
|
-
const fieldValue = props.data[props.item.data.fieldName];
|
|
102
|
-
if (Array.isArray(fieldValue)) {
|
|
103
|
-
return fieldValue.length > 0 ? fieldValue.join(',') : '--';
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// 如果 data 中没有值,使用 itemConfig 中的默认值
|
|
107
|
-
const configValue = props.item.data.itemConfig?.value;
|
|
108
|
-
if (Array.isArray(configValue)) {
|
|
109
|
-
return configValue.length > 0 ? configValue.join(',') : '--';
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return '--';
|
|
113
|
-
} catch (error) {
|
|
114
|
-
console.error('Error getting readonly display value:', error);
|
|
115
|
-
return '--';
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
|
|
119
100
|
return {
|
|
120
101
|
execFunc(type: string) {
|
|
121
102
|
if (props.item.data.action && props.item.data.action[type]) {
|
|
@@ -124,8 +105,27 @@ export default defineComponent({
|
|
|
124
105
|
]);
|
|
125
106
|
}
|
|
126
107
|
},
|
|
127
|
-
getReadonlyDisplayValue
|
|
128
108
|
};
|
|
129
109
|
},
|
|
110
|
+
methods: {
|
|
111
|
+
getDisplayText() {
|
|
112
|
+
const fieldValue = this.data[this.item.data.fieldName];
|
|
113
|
+
const items = this.item.data.itemConfig?.items || [];
|
|
114
|
+
|
|
115
|
+
// 如果没有值,显示默认的 "--"
|
|
116
|
+
if (!fieldValue || !Array.isArray(fieldValue) || fieldValue.length === 0) {
|
|
117
|
+
return this.item.data.placeholder || '--';
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// 根据选中的 value 数组查找对应的 label
|
|
121
|
+
const selectedLabels = fieldValue.map(value => {
|
|
122
|
+
const item = items.find(item => item.value === value);
|
|
123
|
+
return item ? item.label : value;
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
// 返回用逗号分隔的 label 字符串
|
|
127
|
+
return selectedLabels.join(', ');
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
130
|
});
|
|
131
131
|
</script>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|
|
@@ -28,26 +28,32 @@
|
|
|
28
28
|
class="control"
|
|
29
29
|
:style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
|
|
30
30
|
>
|
|
31
|
+
<!-- 只读状态显示是或否 -->
|
|
32
|
+
<span v-if="!drag && (item.data.state === 'readonly' || readonly)">
|
|
33
|
+
{{ getDisplayText() }}
|
|
34
|
+
</span>
|
|
31
35
|
<el-switch
|
|
36
|
+
v-else-if="drag"
|
|
32
37
|
v-model="item.data.default"
|
|
33
|
-
v-if="drag"
|
|
34
38
|
:size="size"
|
|
35
39
|
:disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
|
|
36
40
|
/>
|
|
37
41
|
<el-switch
|
|
42
|
+
v-else
|
|
38
43
|
v-model="data[item.data.fieldName]"
|
|
39
|
-
v-if="!drag"
|
|
40
44
|
:size="size"
|
|
41
45
|
:disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
|
|
42
46
|
/>
|
|
43
47
|
</div>
|
|
44
48
|
</div>
|
|
45
49
|
</template>
|
|
50
|
+
|
|
46
51
|
<script lang="ts">
|
|
47
52
|
import { defineComponent } from "vue";
|
|
48
53
|
import { getFormConfig } from "../../utils/fieldConfig";
|
|
49
54
|
import fieldProps from "../../utils/fieldProps";
|
|
50
55
|
import { useWatch } from "../../utils/customHooks";
|
|
56
|
+
|
|
51
57
|
export default defineComponent({
|
|
52
58
|
ControlType: "Switch", // 必须与文件名匹配
|
|
53
59
|
nameCn: "开关",
|
|
@@ -63,5 +69,18 @@ export default defineComponent({
|
|
|
63
69
|
setup(props) {
|
|
64
70
|
useWatch(props);
|
|
65
71
|
},
|
|
72
|
+
methods: {
|
|
73
|
+
getDisplayText() {
|
|
74
|
+
const fieldValue = this.data[this.item.data.fieldName];
|
|
75
|
+
|
|
76
|
+
// 如果没有值,显示默认的 "--"
|
|
77
|
+
if (fieldValue === undefined || fieldValue === null) {
|
|
78
|
+
return '--';
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// 根据布尔值返回是或否
|
|
82
|
+
return fieldValue ? '是' : '否';
|
|
83
|
+
}
|
|
84
|
+
}
|
|
66
85
|
});
|
|
67
|
-
</script>
|
|
86
|
+
</script>
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
:class="'label_' + labelalign"
|
|
13
13
|
:style="{ width: labelWidth + 'px' }"
|
|
14
14
|
>
|
|
15
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
15
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly && !search"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
:class="'label_' + labelalign"
|
|
13
13
|
:style="{ width: labelWidth + 'px' }"
|
|
14
14
|
>
|
|
15
|
-
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
|
|
15
|
+
<span v-if="item.data.required && !readonly && item.data.state !== 'readonly' && !search" class="item_require">*</span>
|
|
16
16
|
<label>{{ item.data.label }}{{ suffix }}</label>
|
|
17
17
|
<el-tooltip
|
|
18
|
-
v-if="item.data.tip"
|
|
18
|
+
v-if="item.data.tip && !readonly && !search"
|
|
19
19
|
class="item"
|
|
20
20
|
effect="dark"
|
|
21
21
|
:content="item.data.tip"
|