@dhccmobile/vue3-lo-form 2.1.3 → 2.1.4

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhccmobile/vue3-lo-form",
3
- "version": "2.1.3",
3
+ "version": "2.1.4",
4
4
  "description": "VUE3动态表单",
5
5
  "private": false,
6
6
  "main": "dist/vue3-lo-form.umd.js",
package/src/App.vue CHANGED
@@ -1,138 +1,140 @@
1
1
  <template>
2
- <div class="lo-content p-3">
3
- <user-info-form />
4
- <div class="lo-title">form API测试</div>
5
- <div class="lo-ins">
6
- <div class="lo-api" v-if="false">
7
- <div class="lo-api-item">
8
- <div class="lo-item-title">编辑模式:</div>
9
- <div class="lo-item-opts">
10
- <a-switch v-model:checked="formApi.edit" checked-children="开" un-checked-children="关" />
2
+ <div class="lo-container" ref="scrollView">
3
+ <div class="lo-content">
4
+ <div class="lo-title">form API测试</div>
5
+ <div class="lo-ins">
6
+ <div class="lo-api">
7
+ <div class="lo-api-item">
8
+ <div class="lo-item-title">编辑模式:</div>
9
+ <div class="lo-item-opts">
10
+ <a-switch v-model:checked="formApi.edit" checked-children="开" un-checked-children="关" />
11
+ </div>
11
12
  </div>
12
13
  </div>
13
- </div>
14
- <div class="lo-api" v-if="false">
15
- <div class="lo-api-item">
16
- <div class="lo-item-title">控件对象key值:</div>
17
- <div class="lo-item-opts">
18
- <a-input v-model:value="controlKey" placeholder="请输入控件key值" />
14
+ <div class="lo-api">
15
+ <div class="lo-api-item">
16
+ <div class="lo-item-title">控件对象key值:</div>
17
+ <div class="lo-item-opts">
18
+ <a-input v-model:value="controlKey" placeholder="请输入控件key值" />
19
+ </div>
19
20
  </div>
20
- </div>
21
- <div class="lo-api-item">
22
- <div class="lo-item-title">目标属性:</div>
23
- <div class="lo-item-opts">
24
- <a-select v-model:value="controlAttr" show-search :filter-option="filterOption" style="width: 150px">
25
- <a-select-option :value="''">请选择</a-select-option>
26
- <a-select-option v-for="(propName, i) of Object.keys(attribute)" :value="attribute[propName]" :key="i" placeholder="属性名称">
27
- {{ propName }}
28
- </a-select-option>
29
- </a-select>
21
+ <div class="lo-api-item">
22
+ <div class="lo-item-title">目标属性:</div>
23
+ <div class="lo-item-opts">
24
+ <a-select v-model:value="controlAttr" show-search :filter-option="filterOption" style="width: 150px">
25
+ <a-select-option :value="''">请选择</a-select-option>
26
+ <a-select-option v-for="(propName, i) of Object.keys(attribute)" :value="attribute[propName]" :key="i" placeholder="属性名称">
27
+ {{ propName }}
28
+ </a-select-option>
29
+ </a-select>
30
+ </div>
30
31
  </div>
31
- </div>
32
- <div class="lo-api-item">
33
- <div class="lo-item-title">设置值:</div>
34
- <div class="lo-item-opts">
35
- <a-input v-model:value="controlvalue" placeholder="相关值" />
32
+ <div class="lo-api-item">
33
+ <div class="lo-item-title">设置值:</div>
34
+ <div class="lo-item-opts">
35
+ <a-input v-model:value="controlvalue" placeholder="相关值" />
36
+ </div>
36
37
  </div>
37
- </div>
38
- <div class="lo-api-item">
39
- <div class="lo-item-title">读操作:</div>
40
- <div class="lo-item-opts">
41
- <a-button type="primary" class="ml-5" @click="getControl()">获取控件对象</a-button>
42
- <a-button type="primary" class="ml-5" @click="getControlEl()">获取控件dom对象</a-button>
43
- <a-button type="primary" class="ml-5" @click="getValue()">获取值</a-button>
44
- <a-button type="primary" class="ml-5" @click="getText()">获取文本</a-button>
45
- <a-button type="primary" class="ml-5" @click="getOptions()">获取可选项</a-button>
46
- <a-button type="primary" class="ml-5" @click="getValidate()">获取校验</a-button>
47
- <a-button type="primary" class="ml-5" @click="removeValidate()">移除校验</a-button>
48
- <a-button type="primary" class="ml-5" @click="getValidates()">获取校验集合</a-button>
49
- <a-button type="primary" class="ml-5" @click="refreshValidate()">校验指定控件</a-button>
50
- <a-button type="primary" class="ml-5" @click="validateReport()">校验表单</a-button>
51
- <a-button type="primary" class="ml-5" @click="validateTips()">校验表单并弹出提示</a-button>
38
+ <div class="lo-api-item">
39
+ <div class="lo-item-title">读操作:</div>
40
+ <div class="lo-item-opts">
41
+ <a-button type="primary" class="ml-5" @click="getControl()">获取控件对象</a-button>
42
+ <a-button type="primary" class="ml-5" @click="getControlEl()">获取控件dom对象</a-button>
43
+ <a-button type="primary" class="ml-5" @click="getValue()">获取值</a-button>
44
+ <a-button type="primary" class="ml-5" @click="getText()">获取文本</a-button>
45
+ <a-button type="primary" class="ml-5" @click="getOptions()">获取可选项</a-button>
46
+ <a-button type="primary" class="ml-5" @click="getValidate()">获取校验</a-button>
47
+ <a-button type="primary" class="ml-5" @click="removeValidate()">移除校验</a-button>
48
+ <a-button type="primary" class="ml-5" @click="getValidates()">获取校验集合</a-button>
49
+ <a-button type="primary" class="ml-5" @click="refreshValidate()">校验指定控件</a-button>
50
+ <a-button type="primary" class="ml-5" @click="validateReport()">校验表单</a-button>
51
+ <a-button type="primary" class="ml-5" @click="validateTips()">校验表单并弹出提示</a-button>
52
+ </div>
52
53
  </div>
53
54
  </div>
54
- </div>
55
- <div class="lo-api" v-if="false">
56
- <div class="lo-api-item">
57
- <div class="lo-item-title">写操作:</div>
58
- <div class="lo-item-opts">
59
- <a-button type="primary" class="ml-5" @click="setValue()">设置值</a-button>
60
- <a-button type="primary" class="ml-5" @click="setOptions()">设置可选项</a-button>
61
- <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
62
- <a-button type="primary" class="ml-5" @click="setValidate()">设置校验</a-button>
63
- <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
64
- <a-button type="primary" class="ml-5" @click="setFormData()">赋值整个表单</a-button>
65
- <a-button type="primary" class="ml-5" @click="setFormOldData()">赋值整个表单-新旧值对比</a-button>
66
- <a-button type="primary" class="ml-5" @click="resetValue()">重置整个表单</a-button>
67
- <a-button type="primary" class="ml-5" @click="refreshAndUpdateData()">刷新与更新整个表单</a-button>
68
- <a-button type="primary" class="ml-5" @click="resetFormValidateState()">重置表单校验状态</a-button>
69
- <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
70
- <a-button type="primary" class="ml-5" @click="setFieldChangeHistory()">设置变更历史</a-button>
71
- <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
72
- <a-button type="primary" class="ml-5" @click="setAutoCompleteOptions()">设置自动完成数据</a-button>
73
- <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
74
- <a-button type="primary" class="ml-5" @click="setControl()">api方式新增控件对象</a-button>
55
+ <div class="lo-api">
56
+ <div class="lo-api-item">
57
+ <div class="lo-item-title">写操作:</div>
58
+ <div class="lo-item-opts">
59
+ <a-button type="primary" class="ml-5" @click="setValue()">设置值</a-button>
60
+ <a-button type="primary" class="ml-5" @click="setOptions()">设置可选项</a-button>
61
+ <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
62
+ <a-button type="primary" class="ml-5" @click="setValidate()">设置校验</a-button>
63
+ <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
64
+ <a-button type="primary" class="ml-5" @click="setFormData()">赋值整个表单</a-button>
65
+ <a-button type="primary" class="ml-5" @click="setFormOldData()">赋值整个表单-新旧值对比</a-button>
66
+ <a-button type="primary" class="ml-5" @click="resetValue()">重置整个表单</a-button>
67
+ <a-button type="primary" class="ml-5" @click="refreshAndUpdateData()">刷新与更新整个表单</a-button>
68
+ <a-button type="primary" class="ml-5" @click="resetFormValidateState()">重置表单校验状态</a-button>
69
+ <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
70
+ <a-button type="primary" class="ml-5" @click="setFieldChangeHistory()">设置变更历史</a-button>
71
+ <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
72
+ <a-button type="primary" class="ml-5" @click="setAutoCompleteOptions()">设置自动完成数据</a-button>
73
+ <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
74
+ <a-button type="primary" class="ml-5" @click="setControl()">api方式新增控件对象</a-button>
75
+ </div>
75
76
  </div>
76
77
  </div>
77
- </div>
78
- <div class="lo-api" v-if="false">
79
- <div class="lo-api-item">
80
- <div class="lo-item-title">写操作:</div>
81
- <div class="lo-item-opts">
82
- <a-button type="primary" class="ml-5" @click="getAttribute()">获取常规属性</a-button>
83
- <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
78
+ <div class="lo-api">
79
+ <div class="lo-api-item">
80
+ <div class="lo-item-title">写操作:</div>
81
+ <div class="lo-item-opts">
82
+ <a-button type="primary" class="ml-5" @click="getAttribute()">获取常规属性</a-button>
83
+ <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
84
+ </div>
84
85
  </div>
85
86
  </div>
86
- </div>
87
- <div class="lo-api" v-if="false">
88
- <div class="lo-api-item">
89
- <div class="lo-item-title">自定义类型:</div>
90
- <div class="lo-item-opts">
91
- <a-input v-model:value="controlCustomType" placeholder="相关值" />
87
+ <div class="lo-api">
88
+ <div class="lo-api-item">
89
+ <div class="lo-item-title">自定义类型:</div>
90
+ <div class="lo-item-opts">
91
+ <a-input v-model:value="controlCustomType" placeholder="相关值" />
92
+ </div>
92
93
  </div>
93
- </div>
94
- <div class="lo-api-item">
95
- <div class="lo-item-title">操作:</div>
96
- <div class="lo-item-opts">
97
- <a-button type="primary" class="ml-5" @click="setFormatDisplayAndOutput()">设置自定义控件格式化显示和输出</a-button>
98
- |
99
- <a-button type="primary" class="ml-5" @click="submit()">提交表单显示</a-button>
94
+ <div class="lo-api-item">
95
+ <div class="lo-item-title">操作:</div>
96
+ <div class="lo-item-opts">
97
+ <a-button type="primary" class="ml-5" @click="setFormatDisplayAndOutput()">设置自定义控件格式化显示和输出</a-button>
98
+ |
99
+ <a-button type="primary" class="ml-5" @click="submit()">提交表单显示</a-button>
100
+ </div>
100
101
  </div>
101
102
  </div>
102
- </div>
103
- <div class="lo-input">
104
- <!--styleMode="credit-rd" :formId="'984119606230257664'"-->
105
- <dy-form v-if="showForm" :formId="'984119606230257664'" v-model:edit="formApi.edit" :formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
106
- <template #combinationSelector="{ control, onChange }">
107
- <div class="lo-custom-control-box">
108
- <a-input v-model:value="control.formControl.value" @input="onChange(control.formControl)" v-if="control && control.formControl" />
109
- <!-- <a-input-number style="flex-grow: 1" v-model="control.formControl.value" :min="1" :max="100" @change="onChange(control)" />
103
+ <div class="lo-input">
104
+ <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
105
+ <dy-form v-if="showForm" :formId="'995416144285929472'" v-model:edit="formApi.edit" v-model:formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
106
+ <template #combinationSelector="{ control, onChange }">
107
+ <div class="lo-custom-control-box">
108
+ <a-input v-model:value="control.formControl.value" @input="onChange(control.formControl)" v-if="control && control.formControl" />
109
+ <!-- <a-input-number style="flex-grow: 1" v-model="control.formControl.value" :min="1" :max="100" @change="onChange(control)" />
110
110
  <a-select style="flex-basis: 100px; max-width: 100px">
111
111
  <a-select-option value="jack"> Jack </a-select-option>
112
112
  <a-select-option value="lucy"> Lucy </a-select-option>
113
113
  </a-select>-->
114
- </div>
115
- </template>
116
- <!--<template v-slot:input:prefix:testx1-1>¥</template>
114
+ </div>
115
+ </template>
116
+ <!--<template v-slot:input:prefix:testx1-1>¥</template>
117
117
  <template v-slot:input:suffix:testx1-1>RMB</template>
118
118
  <template v-slot:input:addonBefore:testx1-1>https://</template>
119
119
  <template v-slot:input:addonAfter:testx1-1>.cn</template>
120
120
  <template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
121
- <!--<template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
122
- <template v-slot:select:suffixIcon:productName>
123
- <div class="lo-multiple-select-suffix-icon" @click="handleMultiChoiceEmbeddedCustomization">
124
- <img :src="dropDownListSvg" />
125
- </div>
126
- </template>
127
- </dy-form>
128
- </div>
129
- <div class="lo-value" v-if="false">
130
- <span class="lo-title">输出: {{ formApi.formData }}</span>
131
- </div>
132
- <div v-if="false">
133
- <pre>
121
+ <!--<template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
122
+ <template v-slot:select:suffixIcon:productName>
123
+ <div class="lo-multiple-select-suffix-icon" @click="handleMultiChoiceEmbeddedCustomization">
124
+ <img :src="dropDownListSvg" />
125
+ </div>
126
+ </template>
127
+ </dy-form>
128
+ </div>
129
+ <div class="lo-value">
130
+ <span class="lo-title">输出: {{ formApi.formData }}</span>
131
+ </div>
132
+ <div>
133
+ <pre>
134
134
  {{ dictionaryFormatCollection.sysDictTreeDetailOptions }}
135
- </pre>
135
+ </pre
136
+ >
137
+ </div>
136
138
  </div>
137
139
  </div>
138
140
  </div>
@@ -150,12 +152,9 @@ import { DROP_DOWN_LIST_SVG_XML } from "./constants/encode-assets/svg";
150
152
  import { formTemplate } from "./constants/config/form-template.config";
151
153
  import { DictionaryFormatCollection, formToolsService } from "./services/form-tools.service";
152
154
  import { Options, Vue } from "vue-property-decorator";
153
- import UserInfoForm from "@/UserInfoForm.vue";
154
-
155
155
  @Options({
156
156
  name: "vf-app",
157
157
  components: {
158
- UserInfoForm,
159
158
  DyForm,
160
159
  [Switch.name]: Switch,
161
160
  [Button.name]: Button,
@@ -189,12 +188,7 @@ export default class App extends Vue {
189
188
  ],
190
189
  };
191
190
  formApi: FormApi = new FormApi({
192
- edit: false,
193
- desParams: {
194
- businessId: "123", // 业务编号
195
- bizType: "project", // 业务对象类型
196
- formLabel: "项目管理", //表单中文
197
- },
191
+ edit: true,
198
192
  });
199
193
  dictionaryFormatCollection: DictionaryFormatCollection = {
200
194
  sysDictDetailOptions: [],
@@ -274,14 +268,14 @@ export default class App extends Vue {
274
268
  this.srcDesForm = formToolsService.formatDesForm(desForm);
275
269
  this.$formToolsService.init().then((res: FormRestfulResponse) => {
276
270
  this.showForm = true;
277
- setTimeout(() => {
278
- this.formApi.setFormData({ phoneNo: "138****0000", phoneNoEnc: "13800000000", appIcon: "2021" });
279
- }, 1000);
280
271
  // this.formApi.setAttribute("testx1-1-1", Attribute.TextFold, true);
281
272
  // this.formApi.setAttribute("testx1-1-1", Attribute.HiddenDropdown, true);
282
273
  });
283
274
  // this.dictLocalcConvert();
284
275
  }
276
+
277
+ created() {}
278
+
285
279
  onChange(e: any): void {
286
280
  if (e instanceof FormControl) {
287
281
  e.formControl = e;
@@ -173,7 +173,10 @@
173
173
  </span>
174
174
  </template>
175
175
  <template v-if="control.code === formFieldType.Select.code">
176
+ <!-- 脱敏值在编辑模式下直接显示文本,不渲染下拉控件 -->
177
+ <span v-if="isMaskedValue(formControl.value)">{{ formControl.value }}</span>
176
178
  <a-select
179
+ v-else
177
180
  class="lo-select"
178
181
  :dropdownClassName="controlAttr.hiddenDropdown ? 'lo-select-hide-drop-down-content' : ''"
179
182
  :class="{
@@ -236,46 +239,58 @@
236
239
  <a-switch v-model:checked="formControl.value" :checked-children="controlAttr.onOpeningText" :un-checked-children="controlAttr.whenClosedText" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)" />
237
240
  </template>
238
241
  <template v-if="control.code === formFieldType.TimePicker.code">
239
- <a-time-picker class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :use12-hours="is12Hours" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
242
+ <!-- 脱敏值在编辑模式下直接显示文本,不渲染时间控件 -->
243
+ <span v-if="isMaskedValue(formControl.value)">{{ formControl.value }}</span>
244
+ <a-time-picker v-else class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :use12-hours="is12Hours" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
240
245
  </template>
241
246
  <template v-if="control.code === formFieldType.DatePicker.code">
242
- <a-month-picker v-if="useMonthPicker" class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
243
- <a-date-picker v-else-if="controlAttr.isShowHoliday" class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)">
244
- <template #dateRender="{ current }">
245
- <div class="ant-picker-cell-inner calendar-control-style">
246
- <div class="date-control-style">
247
- <div class="eest-day-style"></div>
248
- <div class="date-style">{{ current.date() }}</div>
249
- <div class="eest-day-style">
250
- <div class="holidays-style" v-if="isRest(current)">休</div>
251
- <div class="weekday-style" v-else-if="isWeekday(current)">班</div>
247
+ <!-- 脱敏值在编辑模式下直接显示文本,不渲染日期控件 -->
248
+ <span v-if="isMaskedValue(formControl.value)">{{ formControl.value }}</span>
249
+ <template v-else>
250
+ <a-month-picker v-if="useMonthPicker" class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
251
+ <a-date-picker v-else-if="controlAttr.isShowHoliday" class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)">
252
+ <template #dateRender="{ current }">
253
+ <div class="ant-picker-cell-inner calendar-control-style">
254
+ <div class="date-control-style">
255
+ <div class="eest-day-style"></div>
256
+ <div class="date-style">{{ current.date() }}</div>
257
+ <div class="eest-day-style">
258
+ <div class="holidays-style" v-if="isRest(current)">休</div>
259
+ <div class="weekday-style" v-else-if="isWeekday(current)">班</div>
260
+ </div>
261
+ </div>
262
+ <div class="date-type-style">
263
+ <!-- 交易日 -->
264
+ <div class="trading-day-style" v-if="isRadingDay(current)"></div>
252
265
  </div>
253
266
  </div>
254
- <div class="date-type-style">
255
- <!-- 交易日 -->
256
- <div class="trading-day-style" v-if="isRadingDay(current)"></div>
257
- </div>
258
- </div>
259
- </template>
260
- <template #renderExtraFooter>
261
- <div class="legend">
262
- <div class="day-explain-style">
263
- <div class="trading-day-icon"></div>
264
- <div class="day-explain">交易日</div>
267
+ </template>
268
+ <template #renderExtraFooter>
269
+ <div class="legend">
270
+ <div class="day-explain-style">
271
+ <div class="trading-day-icon"></div>
272
+ <div class="day-explain">交易日</div>
273
+ </div>
265
274
  </div>
266
- </div>
267
- </template>
268
- </a-date-picker>
269
- <a-date-picker v-else class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
275
+ </template>
276
+ </a-date-picker>
277
+ <a-date-picker v-else class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
278
+ </template>
270
279
  </template>
271
280
  <template v-if="control.code === formFieldType.Slider.code">
272
281
  <a-slider v-model:value="formControl.value" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)" />
273
282
  </template>
274
283
  <template v-if="control.code === formFieldType.Cascader.code">
275
- <a-cascader :get-popup-container="getPopupContainer" :changeOnSelect="controlAttr.changeOnSelect" :placeholder="controlAttr.placeholder" :show-search="{ cascaderFilter }" :disabled="controlAttr.isNotEdit" :options="cascaderOptions" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
284
+ <!-- 脱敏值在编辑模式下直接显示文本,不渲染级联控件 -->
285
+ <!-- Cascader value 是数组,脱敏时后端可能返回字符串或带 * 的数组元素 -->
286
+ <span v-if="isMaskedValue(Array.isArray(formControl.value) ? formControl.value.join() : formControl.value)">{{ Array.isArray(formControl.value) ? formControl.value.join("/") : formControl.value }}</span>
287
+ <a-cascader v-else :get-popup-container="getPopupContainer" :changeOnSelect="controlAttr.changeOnSelect" :placeholder="controlAttr.placeholder" :show-search="{ cascaderFilter }" :disabled="controlAttr.isNotEdit" :options="cascaderOptions" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
276
288
  </template>
277
289
  <template v-if="control.code === formFieldType.TreeSelect.code">
290
+ <!-- 脱敏值在编辑模式下直接显示文本,不渲染树形控件 -->
291
+ <span v-if="isMaskedValue(formControl.value)">{{ formControl.value }}</span>
278
292
  <a-tree-select
293
+ v-else
279
294
  :get-popup-container="getPopupContainer"
280
295
  v-model:value="formControl.value"
281
296
  :show-search="true"
@@ -901,6 +916,15 @@ export default class DvFormLayout extends Vue {
901
916
  return !!(this.controlAttr as DesFormControl).timeFormat && (this.controlAttr as DesFormControl).timeFormat.indexOf(":ss") < 0;
902
917
  }
903
918
 
919
+ /**
920
+ * @description: 判断值是否是脱敏值(包含 * )
921
+ * @author 调试
922
+ * @date 2026/7/7
923
+ */
924
+ isMaskedValue(val: any): boolean {
925
+ return typeof val === "string" && /\*/.test(val);
926
+ }
927
+
904
928
  /**
905
929
  * @description: 是否添加反馈
906
930
  * @author ChenRui
@@ -983,7 +1007,14 @@ export default class DvFormLayout extends Vue {
983
1007
  return context.join(",");
984
1008
  } else {
985
1009
  const option = this.options.find((item) => item.value === data);
986
- return option ? option.title : "";
1010
+ if (option) {
1011
+ return option.title;
1012
+ }
1013
+ // 脱敏值(包含 * )不在选项中时,直接返回原始值展示
1014
+ if (data != null && typeof data === "string" && /\*/.test(data)) {
1015
+ return data;
1016
+ }
1017
+ return "";
987
1018
  }
988
1019
  case FormFieldType.Checkbox.code:
989
1020
  options = data || [];
@@ -1009,21 +1040,37 @@ export default class DvFormLayout extends Vue {
1009
1040
  return "";
1010
1041
  case FormFieldType.TimePicker.code:
1011
1042
  if (data != null) {
1043
+ // 脱敏值直接返回原始字符串
1044
+ if (typeof data === "string") {
1045
+ return data;
1046
+ }
1012
1047
  return dayjs(data).format(controlAttr.timeFormat || "HH:mm:ss");
1013
1048
  }
1014
1049
  return "";
1015
1050
  case FormFieldType.DatePicker.code:
1016
1051
  if (data != null) {
1052
+ // 脱敏值直接返回原始字符串,避免 dayjs 格式化输出 Invalid Date
1053
+ if (typeof data === "string") {
1054
+ return data;
1055
+ }
1017
1056
  return dayjs(data).format(controlAttr.dateFormat || "YYYY-MM-dd");
1018
1057
  }
1019
1058
  return "";
1020
1059
  case FormFieldType.Cascader.code:
1021
1060
  if (data != null) {
1061
+ // 脱敏值直接返回原始字符串
1062
+ if (/\*/.test(data)) {
1063
+ return data[0];
1064
+ }
1022
1065
  return this.cascaderContextRecursion(data, this.cascaderOptions);
1023
1066
  }
1024
1067
  return "";
1025
1068
  case FormFieldType.TreeSelect.code:
1026
1069
  if (data != null) {
1070
+ // 脱敏值直接返回原始字符串
1071
+ if (typeof data === "string" && /\*/.test(data)) {
1072
+ return data;
1073
+ }
1027
1074
  return this.treeSelectContextRecursion(data, this.treeSelectOptions);
1028
1075
  }
1029
1076
  return "";
@@ -1301,7 +1348,10 @@ export default class DvFormLayout extends Vue {
1301
1348
  if (this.control && this.control.formControl) {
1302
1349
  if (this.control!.code === FormFieldType.DatePicker.code || this.control!.code === FormFieldType.TimePicker.code) {
1303
1350
  if (this.control.formControl.value) {
1304
- if (typeof this.control.formControl.value === "string") {
1351
+ // 脱敏值(包含 * )不做 dayjs 转换,直接保留原始字符串
1352
+ if (typeof this.control.formControl.value === "string" && /\*/.test(this.control.formControl.value)) {
1353
+ // 保持原始脱敏字符串不变
1354
+ } else if (typeof this.control.formControl.value === "string") {
1305
1355
  this.control.formControl.value = dayjs(new Date(this.control.formControl.value));
1306
1356
  } else if (this.control.formControl.value instanceof Date) {
1307
1357
  this.control.formControl.value = dayjs(this.control.formControl.value);
@@ -723,11 +723,17 @@ export class FormApi {
723
723
  case FormFieldType.TimePicker.code:
724
724
  if (val) {
725
725
  if (typeof val === "string") {
726
- val = dayjs(new Date(this.nowDateStr() + " " + val));
726
+ // 脱敏值(包含 * )不做 dayjs 转换,直接存储原始字符串
727
+ if (/\*/.test(val)) {
728
+ control.value = val;
729
+ } else {
730
+ val = dayjs(new Date(this.nowDateStr() + " " + val));
731
+ control.value = val;
732
+ }
727
733
  } else if (val instanceof Date) {
728
734
  val = dayjs(val);
735
+ control.value = val;
729
736
  }
730
- control.value = val;
731
737
  } else {
732
738
  control.value = null;
733
739
  }
@@ -735,11 +741,17 @@ export class FormApi {
735
741
  case FormFieldType.DatePicker.code:
736
742
  if (val) {
737
743
  if (typeof val === "string") {
738
- val = dayjs(val, control.dateFormat);
744
+ // 脱敏值(包含 * )不做 dayjs 转换,直接存储原始字符串
745
+ if (/\*/.test(val)) {
746
+ control.value = val;
747
+ } else {
748
+ val = dayjs(val, control.dateFormat);
749
+ control.value = val;
750
+ }
739
751
  } else if (val instanceof Date) {
740
752
  val = dayjs(val);
753
+ control.value = val;
741
754
  }
742
- control.value = val;
743
755
  } else {
744
756
  control.value = null;
745
757
  }
@@ -856,17 +868,38 @@ export class FormApi {
856
868
  break;
857
869
  case FormFieldType.TimePicker.code:
858
870
  if (data) {
859
- data = dayjs(data).format(formControl.controlAttr.timeFormat || "LTS");
871
+ // 脱敏值(包含 * )直接返回原始字符串,不做 dayjs 格式化
872
+ if (typeof data === "string" && /\*/.test(data)) {
873
+ // 保持原始脱敏字符串
874
+ } else {
875
+ data = dayjs(data).format(formControl.controlAttr.timeFormat || "LTS");
876
+ }
860
877
  }
861
878
  break;
862
879
  case FormFieldType.DatePicker.code:
863
880
  if (data) {
864
- data = dayjs(data).format(formControl.controlAttr.dateFormat || "YYYY-MM-DD");
881
+ // 脱敏值(包含 * )直接返回原始字符串,不做 dayjs 格式化
882
+ if (typeof data === "string" && /\*/.test(data)) {
883
+ // 保持原始脱敏字符串
884
+ } else {
885
+ data = dayjs(data).format(formControl.controlAttr.dateFormat || "YYYY-MM-DD");
886
+ }
865
887
  }
866
888
  break;
867
889
  case FormFieldType.Cascader.code:
868
890
  if (data) {
869
- data = data.join(",");
891
+ // 脱敏值(包含 * )直接返回原始字符串
892
+ if (typeof data === "string" && /\*/.test(data)) {
893
+ // 保持原始脱敏字符串
894
+ } else {
895
+ data = data.join(",");
896
+ }
897
+ }
898
+ break;
899
+ case FormFieldType.TreeSelect.code:
900
+ // 脱敏值(包含 * )直接返回原始字符串
901
+ if (typeof data === "string" && /\*/.test(data)) {
902
+ // 保持原始脱敏字符串
870
903
  }
871
904
  break;
872
905
  case FormFieldType.Switch.code: