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.
@@ -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-c9f94a75.mjs';
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
  ]),
@@ -1,4 +1,4 @@
1
- export { D as Dynamicform, m as default } from './main-c9f94a75.mjs';
1
+ export { D as Dynamicform, m as default } from './main-a9ce8be4.mjs';
2
2
  import 'vue';
3
3
  import 'element-plus/es';
4
4
  import 'element-plus/es/components/base/style/css';
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-44f321dd] {
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-44f321dd] .editor-content {
432
+ [data-v-2f76c2d0] .editor-content {
433
433
  min-height: 200px;
434
434
  }
435
- [data-v-44f321dd] .editor-content .ql-toolbar {
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-44f321dd] .editor-content .ql-container {
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-44f321dd] .shape .rich-text-editor {
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>;
@@ -20,6 +20,10 @@ declare const _default: {
20
20
  type: BooleanConstructor;
21
21
  default: boolean;
22
22
  };
23
+ search: {
24
+ type: BooleanConstructor;
25
+ default: boolean;
26
+ };
23
27
  labelalign: {
24
28
  type: StringConstructor;
25
29
  default: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "starfish-form-custom",
3
- "version": "1.0.45",
3
+ "version": "1.0.47",
4
4
  "main": "dist/starfish-form.mjs",
5
5
  "style": "dist/style.css",
6
6
  "module": "dist/starfish-form.mjs",
@@ -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 && data[item.data.fieldName] && (item.data.state === 'readonly' || readonly)">{{ Array.isArray(data[item.data.fieldName]) ? data[item.data.fieldName].join(',') || '--' : data[item.data.fieldName] || '--' }}</span>
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
- <span v-if="!drag && (item.data.state === 'readonly' || readonly)">{{ data[item.data.fieldName] || '--' }}</span>
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
- } else if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
28
- callback(new Error("请输入正确的电话号码"));
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]\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)) {
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
- <span v-if="!drag && (item.data.state === 'readonly' || readonly)">{{ data[item.data.fieldName] || '--' }}</span>
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
- {{ getReadonlyDisplayValue() }}
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"