feat(form-components): 为详情页表单标签添加置灰样式
新增.info-page-label CSS类,在所有表单组件中添加page_type为info时自动应用该样式,统一详情页表单标签的展示效果。
Showing
29 changed files
with
172 additions
and
28 deletions
| ... | @@ -108,6 +108,10 @@ | ... | @@ -108,6 +108,10 @@ |
| 108 | border-bottom: 1px solid #05ae33; | 108 | border-bottom: 1px solid #05ae33; |
| 109 | } | 109 | } |
| 110 | 110 | ||
| 111 | +.info-page-label { | ||
| 112 | + color: #999; | ||
| 113 | +} | ||
| 114 | + | ||
| 111 | .toast-fail { | 115 | .toast-fail { |
| 112 | width: 30vw; | 116 | width: 30vw; |
| 113 | text-align: justify; | 117 | text-align: justify; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field :name="item.name" :rules="rules"> | 15 | <van-field :name="item.name" :rules="rules"> |
| 16 | <template #input> | 16 | <template #input> |
| ... | @@ -41,6 +41,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -41,6 +41,11 @@ const ReadonlyShow = computed(() => { |
| 41 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 41 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 42 | }); | 42 | }); |
| 43 | 43 | ||
| 44 | +// 详情页标签置灰 | ||
| 45 | +const InfoPageLabelShow = computed(() => { | ||
| 46 | + return $route.query.page_type === 'info'; | ||
| 47 | +}); | ||
| 48 | + | ||
| 44 | // 注入子组件属性 | 49 | // 注入子组件属性 |
| 45 | provide('props', props.item); | 50 | provide('props', props.item); |
| 46 | 51 | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field :name="item.key" :rules="rules" style="padding: 0;"> | 15 | <van-field :name="item.key" :rules="rules" style="padding: 0;"> |
| 16 | <template #input> | 16 | <template #input> |
| ... | @@ -36,6 +36,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -36,6 +36,11 @@ const ReadonlyShow = computed(() => { |
| 36 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 36 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 37 | }); | 37 | }); |
| 38 | 38 | ||
| 39 | +// 详情页标签置灰 | ||
| 40 | +const InfoPageLabelShow = computed(() => { | ||
| 41 | + return $route.query.page_type === 'info'; | ||
| 42 | +}); | ||
| 43 | + | ||
| 39 | if (props.item.component_props.default) { // 存在默认值时业务逻辑 | 44 | if (props.item.component_props.default) { // 存在默认值时业务逻辑 |
| 40 | if (!props.item.component_props.default?.city_code) { // 默认值为空 | 45 | if (!props.item.component_props.default?.city_code) { // 默认值为空 |
| 41 | props.item.component_props.default.picker_value = ''; | 46 | props.item.component_props.default.picker_value = ''; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field | 15 | <van-field |
| 16 | v-model="item.value" | 16 | v-model="item.value" |
| ... | @@ -49,6 +49,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -49,6 +49,11 @@ const ReadonlyShow = computed(() => { |
| 49 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 49 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 50 | }); | 50 | }); |
| 51 | 51 | ||
| 52 | +// 详情页标签置灰 | ||
| 53 | +const InfoPageLabelShow = computed(() => { | ||
| 54 | + return $route.query.page_type === 'info'; | ||
| 55 | +}); | ||
| 56 | + | ||
| 52 | const show = ref(false); | 57 | const show = ref(false); |
| 53 | 58 | ||
| 54 | const formatDate = (date) => | 59 | const formatDate = (date) => | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | <span v-if="item.component_props.max" style="color: gray"> | 14 | <span v-if="item.component_props.max" style="color: gray"> |
| 15 | (最多可选数: {{ item.component_props.max }}) | 15 | (最多可选数: {{ item.component_props.max }}) |
| 16 | </span> | 16 | </span> |
| ... | @@ -81,6 +81,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -81,6 +81,11 @@ const ReadonlyShow = computed(() => { |
| 81 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 81 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 82 | }); | 82 | }); |
| 83 | 83 | ||
| 84 | +// 详情页标签置灰 | ||
| 85 | +const InfoPageLabelShow = computed(() => { | ||
| 86 | + return $route.query.page_type === 'info'; | ||
| 87 | +}); | ||
| 88 | + | ||
| 84 | // 校验函数返回 true 表示校验通过,false 表示不通过 | 89 | // 校验函数返回 true 表示校验通过,false 表示不通过 |
| 85 | const required = props.item.component_props.required; | 90 | const required = props.item.component_props.required; |
| 86 | const validator = (val) => { | 91 | const validator = (val) => { | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem 1rem 0.3rem; font-size: 0.9rem;"> | 15 | <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem 1rem 0.3rem; font-size: 0.9rem;"> |
| 16 | {{ item.value }} | 16 | {{ item.value }} |
| ... | @@ -59,6 +59,11 @@ const HideShow = computed(() => { | ... | @@ -59,6 +59,11 @@ const HideShow = computed(() => { |
| 59 | const ReadonlyShow = computed(() => { | 59 | const ReadonlyShow = computed(() => { |
| 60 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 60 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 61 | }); | 61 | }); |
| 62 | + | ||
| 63 | +// 详情页标签置灰 | ||
| 64 | +const InfoPageLabelShow = computed(() => { | ||
| 65 | + return $route.query.page_type === 'info'; | ||
| 66 | +}); | ||
| 62 | const showPicker = ref(false); | 67 | const showPicker = ref(false); |
| 63 | const currentDate = ref([]); | 68 | const currentDate = ref([]); |
| 64 | const readonly = props.item.component_props.readonly; | 69 | const readonly = props.item.component_props.readonly; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field | 15 | <van-field |
| 16 | v-model="item.value" | 16 | v-model="item.value" |
| ... | @@ -55,6 +55,11 @@ const HideShow = computed(() => { | ... | @@ -55,6 +55,11 @@ const HideShow = computed(() => { |
| 55 | const ReadonlyShow = computed(() => { | 55 | const ReadonlyShow = computed(() => { |
| 56 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 56 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 57 | }); | 57 | }); |
| 58 | + | ||
| 59 | +// 详情页标签置灰 | ||
| 60 | +const InfoPageLabelShow = computed(() => { | ||
| 61 | + return $route.query.page_type === 'info'; | ||
| 62 | +}); | ||
| 58 | const showPicker = ref(false); | 63 | const showPicker = ref(false); |
| 59 | const readonly = props.item.component_props.readonly; | 64 | const readonly = props.item.component_props.readonly; |
| 60 | 65 | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field | 15 | <van-field |
| 16 | v-model="item.value" | 16 | v-model="item.value" |
| ... | @@ -43,6 +43,11 @@ const HideShow = computed(() => { | ... | @@ -43,6 +43,11 @@ const HideShow = computed(() => { |
| 43 | const ReadonlyShow = computed(() => { | 43 | const ReadonlyShow = computed(() => { |
| 44 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 44 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 45 | }); | 45 | }); |
| 46 | + | ||
| 47 | +// 详情页标签置灰 | ||
| 48 | +const InfoPageLabelShow = computed(() => { | ||
| 49 | + return $route.query.page_type === 'info'; | ||
| 50 | +}); | ||
| 46 | onMounted(() => { | 51 | onMounted(() => { |
| 47 | props.item.value = props.item.component_props.default; | 52 | props.item.value = props.item.component_props.default; |
| 48 | }) | 53 | }) | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div | 15 | <div |
| 16 | v-if="item.component_props.note" | 16 | v-if="item.component_props.note" |
| ... | @@ -123,6 +123,11 @@ const HideShow = computed(() => { | ... | @@ -123,6 +123,11 @@ const HideShow = computed(() => { |
| 123 | const ReadonlyShow = computed(() => { | 123 | const ReadonlyShow = computed(() => { |
| 124 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 124 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 125 | }); | 125 | }); |
| 126 | + | ||
| 127 | +// 详情页标签置灰 | ||
| 128 | +const InfoPageLabelShow = computed(() => { | ||
| 129 | + return $route.query.page_type === 'info'; | ||
| 130 | +}); | ||
| 126 | const emit = defineEmits(["active"]); | 131 | const emit = defineEmits(["active"]); |
| 127 | const show_empty = ref(false); | 132 | const show_empty = ref(false); |
| 128 | const default_file = ref(props.item.component_props.default); | 133 | const default_file = ref(props.item.component_props.default); | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> | 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> |
| 16 | <van-field | 16 | <van-field |
| ... | @@ -66,6 +66,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -66,6 +66,11 @@ const ReadonlyShow = computed(() => { |
| 66 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 66 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 67 | }); | 67 | }); |
| 68 | 68 | ||
| 69 | +// 详情页标签置灰 | ||
| 70 | +const InfoPageLabelShow = computed(() => { | ||
| 71 | + return $route.query.page_type === 'info'; | ||
| 72 | +}); | ||
| 73 | + | ||
| 69 | const gender_value = ref(props.item.component_props.default); | 74 | const gender_value = ref(props.item.component_props.default); |
| 70 | 75 | ||
| 71 | onMounted(() => { | 76 | onMounted(() => { | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> | 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> |
| 16 | <div> | 16 | <div> |
| ... | @@ -52,6 +52,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -52,6 +52,11 @@ const ReadonlyShow = computed(() => { |
| 52 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 52 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 53 | }); | 53 | }); |
| 54 | 54 | ||
| 55 | +// 详情页标签置灰 | ||
| 56 | +const InfoPageLabelShow = computed(() => { | ||
| 57 | + return $route.query.page_type === 'info'; | ||
| 58 | +}); | ||
| 59 | + | ||
| 55 | // let obj = { | 60 | // let obj = { |
| 56 | // "field_10_group[0]_7653" : "1", | 61 | // "field_10_group[0]_7653" : "1", |
| 57 | // "field_10_group[1]_4154" : "11", | 62 | // "field_10_group[1]_4154" : "11", | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> --> | 15 | <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> --> |
| 16 | <!-- <van-field | 16 | <!-- <van-field |
| ... | @@ -88,6 +88,11 @@ const HideShow = computed(() => { | ... | @@ -88,6 +88,11 @@ const HideShow = computed(() => { |
| 88 | const ReadonlyShow = computed(() => { | 88 | const ReadonlyShow = computed(() => { |
| 89 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 89 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 90 | }); | 90 | }); |
| 91 | + | ||
| 92 | +// 详情页标签置灰 | ||
| 93 | +const InfoPageLabelShow = computed(() => { | ||
| 94 | + return $route.query.page_type === 'info'; | ||
| 95 | +}); | ||
| 91 | // 是否显示编辑按钮 | 96 | // 是否显示编辑按钮 |
| 92 | const IdEditShow = computed(() => { | 97 | const IdEditShow = computed(() => { |
| 93 | return ($route.query.page_type === 'edit') && data_type === 'encrypt_mode'; | 98 | return ($route.query.page_type === 'edit') && data_type === 'encrypt_mode'; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div | 15 | <div |
| 16 | v-if="item.component_props.note" | 16 | v-if="item.component_props.note" |
| ... | @@ -92,6 +92,11 @@ const HideShow = computed(() => { | ... | @@ -92,6 +92,11 @@ const HideShow = computed(() => { |
| 92 | const ReadonlyShow = computed(() => { | 92 | const ReadonlyShow = computed(() => { |
| 93 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 93 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 94 | }); | 94 | }); |
| 95 | + | ||
| 96 | +// 详情页标签置灰 | ||
| 97 | +const InfoPageLabelShow = computed(() => { | ||
| 98 | + return $route.query.page_type === 'info'; | ||
| 99 | +}); | ||
| 95 | // 默认图片列表 | 100 | // 默认图片列表 |
| 96 | const default_tmp = ref(props.item.component_props.default) | 101 | const default_tmp = ref(props.item.component_props.default) |
| 97 | const default_list = ref([]); | 102 | const default_list = ref([]); | ... | ... |
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
| 9 | <div v-if="HideShow" class="multi-rule-field-page"> | 9 | <div v-if="HideShow" class="multi-rule-field-page"> |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.required" class="required" style="color: red"> *</span> | 11 | <span v-if="item.component_props.required" class="required" style="color: red"> *</span> |
| 12 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 12 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 13 | <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">(最少选{{ item.component_props.min_count }}项)</span> | 13 | <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">(最少选{{ item.component_props.min_count }}项)</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0"> | 15 | <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0"> |
| ... | @@ -75,6 +75,11 @@ const HideShow = computed(() => { | ... | @@ -75,6 +75,11 @@ const HideShow = computed(() => { |
| 75 | const ReadonlyShow = computed(() => { | 75 | const ReadonlyShow = computed(() => { |
| 76 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 76 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 77 | }); | 77 | }); |
| 78 | + | ||
| 79 | +// 详情页标签置灰 | ||
| 80 | +const InfoPageLabelShow = computed(() => { | ||
| 81 | + return $route.query.page_type === 'info'; | ||
| 82 | +}); | ||
| 78 | // TAG: 自定义主题颜色 | 83 | // TAG: 自定义主题颜色 |
| 79 | const themeVars = { | 84 | const themeVars = { |
| 80 | radioColor: styleColor.baseColor, | 85 | radioColor: styleColor.baseColor, | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div :class="[isGroup ? 'group-label' : 'label']"> | 10 | <div :class="[isGroup ? 'group-label' : 'label']"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="item.component_props.readonly" style="padding: 0.5rem 1.3rem; font-size: 0.9rem;"> | 15 | <div v-if="item.component_props.readonly" style="padding: 0.5rem 1.3rem; font-size: 0.9rem;"> |
| 16 | {{ item.value }} | 16 | {{ item.value }} |
| ... | @@ -51,6 +51,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -51,6 +51,11 @@ const ReadonlyShow = computed(() => { |
| 51 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 51 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 52 | }); | 52 | }); |
| 53 | 53 | ||
| 54 | +// 详情页标签置灰 | ||
| 55 | +const InfoPageLabelShow = computed(() => { | ||
| 56 | + return $route.query.page_type === 'info'; | ||
| 57 | +}); | ||
| 58 | + | ||
| 54 | // 集合组标识 | 59 | // 集合组标识 |
| 55 | const isGroup = computed(() => { | 60 | const isGroup = computed(() => { |
| 56 | return props.item.component_props.is_field_group | 61 | return props.item.component_props.is_field_group | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div | 15 | <div |
| 16 | v-if="item.component_props.note" | 16 | v-if="item.component_props.note" |
| ... | @@ -70,6 +70,11 @@ const HideShow = computed(() => { | ... | @@ -70,6 +70,11 @@ const HideShow = computed(() => { |
| 70 | const ReadonlyShow = computed(() => { | 70 | const ReadonlyShow = computed(() => { |
| 71 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 71 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 72 | }); | 72 | }); |
| 73 | + | ||
| 74 | +// 详情页标签置灰 | ||
| 75 | +const InfoPageLabelShow = computed(() => { | ||
| 76 | + return $route.query.page_type === 'info'; | ||
| 77 | +}); | ||
| 73 | let content = ""; | 78 | let content = ""; |
| 74 | 79 | ||
| 75 | onMounted(() => { | 80 | onMounted(() => { | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div :class="[isGroup ? 'group-label' : 'label']"> | 10 | <div :class="[isGroup ? 'group-label' : 'label']"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | 15 | ||
| 16 | <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;"> | 16 | <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;"> |
| ... | @@ -45,6 +45,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -45,6 +45,11 @@ const ReadonlyShow = computed(() => { |
| 45 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 45 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 46 | }); | 46 | }); |
| 47 | 47 | ||
| 48 | +// 详情页标签置灰 | ||
| 49 | +const InfoPageLabelShow = computed(() => { | ||
| 50 | + return $route.query.page_type === 'info'; | ||
| 51 | +}); | ||
| 52 | + | ||
| 48 | // 集合组标识 | 53 | // 集合组标识 |
| 49 | const isGroup = computed(() => { | 54 | const isGroup = computed(() => { |
| 50 | return props.item.component_props.is_field_group | 55 | return props.item.component_props.is_field_group | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div :class="[isGroup ? 'group-label' : 'label']"> | 10 | <div :class="[isGroup ? 'group-label' : 'label']"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | 15 | ||
| 16 | <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;"> | 16 | <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;"> |
| ... | @@ -43,6 +43,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -43,6 +43,11 @@ const ReadonlyShow = computed(() => { |
| 43 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 43 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 44 | }); | 44 | }); |
| 45 | 45 | ||
| 46 | +// 详情页标签置灰 | ||
| 47 | +const InfoPageLabelShow = computed(() => { | ||
| 48 | + return $route.query.page_type === 'info'; | ||
| 49 | +}); | ||
| 50 | + | ||
| 46 | // 集合组标识 | 51 | // 集合组标识 |
| 47 | const isGroup = computed(() => { | 52 | const isGroup = computed(() => { |
| 48 | return props.item.component_props.is_field_group; | 53 | return props.item.component_props.is_field_group; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <!-- <van-field | 15 | <!-- <van-field |
| 16 | :id="item.name" | 16 | :id="item.name" |
| ... | @@ -89,6 +89,11 @@ const HideShow = computed(() => { | ... | @@ -89,6 +89,11 @@ const HideShow = computed(() => { |
| 89 | const ReadonlyShow = computed(() => { | 89 | const ReadonlyShow = computed(() => { |
| 90 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 90 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 91 | }); | 91 | }); |
| 92 | + | ||
| 93 | +// 详情页标签置灰 | ||
| 94 | +const InfoPageLabelShow = computed(() => { | ||
| 95 | + return $route.query.page_type === 'info'; | ||
| 96 | +}); | ||
| 92 | onMounted(() => { | 97 | onMounted(() => { |
| 93 | props.item.value = props.item.component_props.default; | 98 | props.item.value = props.item.component_props.default; |
| 94 | }) | 99 | }) | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | <!-- TAG:显示分数时保留0分,仅在有值(非空字符串/非空/非undefined)时展示 --> | 14 | <!-- TAG:显示分数时保留0分,仅在有值(非空字符串/非空/非undefined)时展示 --> |
| 15 | <span | 15 | <span |
| 16 | v-if="item.component_props.x_score !== undefined && item.component_props.x_score !== null && item.component_props.x_score !== ''" | 16 | v-if="item.component_props.x_score !== undefined && item.component_props.x_score !== null && item.component_props.x_score !== ''" |
| ... | @@ -50,6 +50,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -50,6 +50,11 @@ const ReadonlyShow = computed(() => { |
| 50 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 50 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 51 | }); | 51 | }); |
| 52 | 52 | ||
| 53 | +// 详情页标签置灰 | ||
| 54 | +const InfoPageLabelShow = computed(() => { | ||
| 55 | + return $route.query.page_type === 'info'; | ||
| 56 | +}); | ||
| 57 | + | ||
| 53 | // 子组件通信,适配规则触发 | 58 | // 子组件通信,适配规则触发 |
| 54 | const onActive = (val) => { | 59 | const onActive = (val) => { |
| 55 | emit("active", val); | 60 | emit("active", val); | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | <!-- TAG:显示分数时保留0分,仅在有值(非空字符串/非空/非undefined)时展示 --> | 14 | <!-- TAG:显示分数时保留0分,仅在有值(非空字符串/非空/非undefined)时展示 --> |
| 15 | <span | 15 | <span |
| 16 | v-if="item.component_props.x_score !== undefined && item.component_props.x_score !== null && item.component_props.x_score !== ''" | 16 | v-if="item.component_props.x_score !== undefined && item.component_props.x_score !== null && item.component_props.x_score !== ''" |
| ... | @@ -106,6 +106,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -106,6 +106,11 @@ const ReadonlyShow = computed(() => { |
| 106 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 106 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 107 | }); | 107 | }); |
| 108 | 108 | ||
| 109 | +// 详情页标签置灰 | ||
| 110 | +const InfoPageLabelShow = computed(() => { | ||
| 111 | + return $route.query.page_type === 'info'; | ||
| 112 | +}); | ||
| 113 | + | ||
| 109 | // 校验函数返回 true 表示校验通过,false 表示不通过 | 114 | // 校验函数返回 true 表示校验通过,false 表示不通过 |
| 110 | const required = props.item.component_props.required; | 115 | const required = props.item.component_props.required; |
| 111 | const validator = (val) => { | 116 | const validator = (val) => { | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field :name="item.name" :rules="rules"> | 15 | <van-field :name="item.name" :rules="rules"> |
| 16 | <template #input> | 16 | <template #input> |
| ... | @@ -36,6 +36,11 @@ const HideShow = computed(() => { | ... | @@ -36,6 +36,11 @@ const HideShow = computed(() => { |
| 36 | const ReadonlyShow = computed(() => { | 36 | const ReadonlyShow = computed(() => { |
| 37 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 37 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 38 | }); | 38 | }); |
| 39 | + | ||
| 40 | +// 详情页标签置灰 | ||
| 41 | +const InfoPageLabelShow = computed(() => { | ||
| 42 | + return $route.query.page_type === 'info'; | ||
| 43 | +}); | ||
| 39 | // 注入子组件属性 | 44 | // 注入子组件属性 |
| 40 | provide('props', props.item); | 45 | provide('props', props.item); |
| 41 | 46 | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field | 15 | <van-field |
| 16 | :name="item.key" | 16 | :name="item.key" |
| ... | @@ -59,6 +59,11 @@ const show = ref(false); | ... | @@ -59,6 +59,11 @@ const show = ref(false); |
| 59 | const ReadonlyShow = computed(() => { | 59 | const ReadonlyShow = computed(() => { |
| 60 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 60 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 61 | }); | 61 | }); |
| 62 | + | ||
| 63 | +// 详情页标签置灰 | ||
| 64 | +const InfoPageLabelShow = computed(() => { | ||
| 65 | + return $route.query.page_type === 'info'; | ||
| 66 | +}); | ||
| 62 | </script> | 67 | </script> |
| 63 | 68 | ||
| 64 | <style lang="less" scoped> | 69 | <style lang="less" scoped> | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field :name="item.key" :rules="rules" style="padding: 0;"> | 15 | <van-field :name="item.key" :rules="rules" style="padding: 0;"> |
| 16 | <template #input> | 16 | <template #input> |
| ... | @@ -40,6 +40,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -40,6 +40,11 @@ const ReadonlyShow = computed(() => { |
| 40 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 40 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 41 | }); | 41 | }); |
| 42 | 42 | ||
| 43 | +// 详情页标签置灰 | ||
| 44 | +const InfoPageLabelShow = computed(() => { | ||
| 45 | + return $route.query.page_type === 'info'; | ||
| 46 | +}); | ||
| 47 | + | ||
| 43 | const refComponent = ref(null) | 48 | const refComponent = ref(null) |
| 44 | 49 | ||
| 45 | // 规则校验 | 50 | // 规则校验 | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="!item.component_props.readonly" class="tinymce-box"> | 15 | <div v-if="!item.component_props.readonly" class="tinymce-box"> |
| 16 | <TEditor ref="refEdit" @blur="onBlur" :table_html="table_html" :readonly="item.component_props.readonly"></TEditor> | 16 | <TEditor ref="refEdit" @blur="onBlur" :table_html="table_html" :readonly="item.component_props.readonly"></TEditor> |
| ... | @@ -55,6 +55,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -55,6 +55,11 @@ const ReadonlyShow = computed(() => { |
| 55 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 55 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 56 | }); | 56 | }); |
| 57 | 57 | ||
| 58 | +// 详情页标签置灰 | ||
| 59 | +const InfoPageLabelShow = computed(() => { | ||
| 60 | + return $route.query.page_type === 'info'; | ||
| 61 | +}); | ||
| 62 | + | ||
| 58 | onMounted(() => { | 63 | onMounted(() => { |
| 59 | // | 64 | // |
| 60 | table_html.value = props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note; | 65 | table_html.value = props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div :class="[isGroup ? 'group-label' : 'label']"> | 10 | <div :class="[isGroup ? 'group-label' : 'label']"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" /> | 15 | <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" /> |
| 16 | <div v-if="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)" style="padding: 0.5rem 1.3rem; font-size: 0.9rem;"> | 16 | <div v-if="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)" style="padding: 0.5rem 1.3rem; font-size: 0.9rem;"> |
| ... | @@ -50,6 +50,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -50,6 +50,11 @@ const ReadonlyShow = computed(() => { |
| 50 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 50 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 51 | }); | 51 | }); |
| 52 | 52 | ||
| 53 | +// 详情页标签置灰 | ||
| 54 | +const InfoPageLabelShow = computed(() => { | ||
| 55 | + return $route.query.page_type === 'info'; | ||
| 56 | +}); | ||
| 57 | + | ||
| 53 | // 集合组标识 | 58 | // 集合组标识 |
| 54 | const isGroup = computed(() => { | 59 | const isGroup = computed(() => { |
| 55 | return props.item.component_props.is_field_group | 60 | return props.item.component_props.is_field_group | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div | 15 | <div |
| 16 | v-if="item.component_props.note" | 16 | v-if="item.component_props.note" |
| ... | @@ -56,6 +56,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -56,6 +56,11 @@ const ReadonlyShow = computed(() => { |
| 56 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 56 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 57 | }); | 57 | }); |
| 58 | 58 | ||
| 59 | +// 详情页标签置灰 | ||
| 60 | +const InfoPageLabelShow = computed(() => { | ||
| 61 | + return $route.query.page_type === 'info'; | ||
| 62 | +}); | ||
| 63 | + | ||
| 59 | onMounted(() => { | 64 | onMounted(() => { |
| 60 | // 只读模式下默认值替换换行符 | 65 | // 只读模式下默认值替换换行符 |
| 61 | props.item.value = props.item.component_props.readonly ? props.item.component_props.default?.replace(/\n/g, "<br>") : props.item.component_props.default; | 66 | props.item.value = props.item.component_props.readonly ? props.item.component_props.default?.replace(/\n/g, "<br>") : props.item.component_props.default; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <van-field | 15 | <van-field |
| 16 | v-model="item.value" | 16 | v-model="item.value" |
| ... | @@ -47,6 +47,11 @@ const HideShow = computed(() => { | ... | @@ -47,6 +47,11 @@ const HideShow = computed(() => { |
| 47 | const ReadonlyShow = computed(() => { | 47 | const ReadonlyShow = computed(() => { |
| 48 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 48 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 49 | }); | 49 | }); |
| 50 | + | ||
| 51 | +// 详情页标签置灰 | ||
| 52 | +const InfoPageLabelShow = computed(() => { | ||
| 53 | + return $route.query.page_type === 'info'; | ||
| 54 | +}); | ||
| 50 | const showPicker = ref(false); | 55 | const showPicker = ref(false); |
| 51 | const currentTime = ref([]); | 56 | const currentTime = ref([]); |
| 52 | const readonly = props.item.component_props.readonly; | 57 | const readonly = props.item.component_props.readonly; | ... | ... |
| ... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
| 10 | <div class="label"> | 10 | <div class="label"> |
| 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> | 11 | <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span> |
| 12 | <span v-if="item.component_props.required" style="color: red">* </span> | 12 | <span v-if="item.component_props.required" style="color: red">* </span> |
| 13 | - <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> | 13 | + <span :class="[ReadonlyShow ? 'readonly-show' : '', InfoPageLabelShow ? 'info-page-label' : '']">{{ item.component_props.label }}</span> |
| 14 | </div> | 14 | </div> |
| 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> | 15 | <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> |
| 16 | <van-field :rules="item.rules"> | 16 | <van-field :rules="item.rules"> |
| ... | @@ -78,6 +78,11 @@ const ReadonlyShow = computed(() => { | ... | @@ -78,6 +78,11 @@ const ReadonlyShow = computed(() => { |
| 78 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; | 78 | return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly; |
| 79 | }); | 79 | }); |
| 80 | 80 | ||
| 81 | +// 详情页标签置灰 | ||
| 82 | +const InfoPageLabelShow = computed(() => { | ||
| 83 | + return $route.query.page_type === 'info'; | ||
| 84 | +}); | ||
| 85 | + | ||
| 81 | // 校验函数返回 true 表示校验通过,false 表示不通过 | 86 | // 校验函数返回 true 表示校验通过,false 表示不通过 |
| 82 | const required = props.item.component_props.required; | 87 | const required = props.item.component_props.required; |
| 83 | const validator = (val) => { | 88 | const validator = (val) => { | ... | ... |
-
Please register or login to post a comment