Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f7b764e4 1 parent c4cf1fc0

更新组件流程模式下，可编辑的标题样式修改

Inline Side-by-side
Showing 25 changed files with 214 additions and 131 deletions
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 // 文字颜色 8 // 文字颜色
9 @base-font-color: #333333; 9 @base-font-color: #333333;
10 @sub-font-color: #999999; 10 @sub-font-color: #999999;
11 +@readonly-font-color: #05ae33;
11 12
12 // 定义一个映射 13 // 定义一个映射
13 #colors() { 14 #colors() {
...@@ -98,3 +99,11 @@ ...@@ -98,3 +99,11 @@
98 -webkit-line-clamp: 6; 99 -webkit-line-clamp: 6;
99 -webkit-box-orient: vertical; 100 -webkit-box-orient: vertical;
100 } 101 }
102 +
103 +.readonly-show {
104 + display: inline;
105 + color: #05ae33;
106 + display: inline-block;
107 + padding: 0.25rem;
108 + border-bottom: 1px solid #05ae33;
109 +}
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div class="Appointment-field-page"> 9 <div class="Appointment-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field :name="item.name" :rules="rules"> 14 <van-field :name="item.name" :rules="rules">
15 <template #input> 15 <template #input>
...@@ -21,9 +21,11 @@ ...@@ -21,9 +21,11 @@
21 </template> 21 </template>
22 22
23 <script setup> 23 <script setup>
24 +import { useRoute } from "vue-router";
24 import { provide } from 'vue' 25 import { provide } from 'vue'
25 import MyComponent from './MyComponent.vue'; 26 import MyComponent from './MyComponent.vue';
26 27
28 +const $route = useRoute();
27 const props = defineProps({ 29 const props = defineProps({
28 item: Object, 30 item: Object,
29 }); 31 });
...@@ -33,6 +35,11 @@ const HideShow = computed(() => { ...@@ -33,6 +35,11 @@ const HideShow = computed(() => {
33 return !props.item.component_props.disabled 35 return !props.item.component_props.disabled
34 }) 36 })
35 37
38 +// 只读显示-流程模式
39 +const ReadonlyShow = computed(() => {
40 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
41 +});
42 +
36 // 注入子组件属性 43 // 注入子组件属性
37 provide('props', props.item); 44 provide('props', props.item);
38 45
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 14:32:11 2 * @Date: 2022-08-30 14:32:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-06 22:51:15 4 + * @LastEditTime: 2024-07-26 22:18:08
5 * @FilePath: /data-table/src/components/AreaPickerField/index.vue 5 * @FilePath: /data-table/src/components/AreaPickerField/index.vue
6 * @Description: 省市区选择控件 6 * @Description: 省市区选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="area-picker-field"> 9 <div v-if="HideShow" class="area-picker-field">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field :name="item.key" :rules="rules" style="padding: 0;"> 14 <van-field :name="item.key" :rules="rules" style="padding: 0;">
15 <template #input> 15 <template #input>
...@@ -20,13 +20,20 @@ ...@@ -20,13 +20,20 @@
20 </template> 20 </template>
21 21
22 <script setup> 22 <script setup>
23 +import { useRoute } from "vue-router";
23 import MyComponent from './MyComponent.vue'; 24 import MyComponent from './MyComponent.vue';
24 import _ from 'lodash' 25 import _ from 'lodash'
25 26
27 +const $route = useRoute();
26 const props = defineProps({ 28 const props = defineProps({
27 item: Object, 29 item: Object,
28 }); 30 });
29 31
32 +// 只读显示-流程模式
33 +const ReadonlyShow = computed(() => {
34 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
35 +});
36 +
30 if (props.item.component_props.default) { // 存在默认值时业务逻辑 37 if (props.item.component_props.default) { // 存在默认值时业务逻辑
31 if (!props.item.component_props.default?.city_code) { // 默认值为空 38 if (!props.item.component_props.default?.city_code) { // 默认值为空
32 props.item.component_props.default.picker_value = ''; 39 props.item.component_props.default.picker_value = '';
...@@ -82,10 +89,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -82,10 +89,6 @@ const rules = [{ validator, message: validatorMessage }];
82 padding: 1rem 1rem 0 1rem; 89 padding: 1rem 1rem 0 1rem;
83 font-size: 0.9rem; 90 font-size: 0.9rem;
84 font-weight: bold; 91 font-weight: bold;
85 -
86 - span {
87 - color: red;
88 - }
89 } 92 }
90 } 93 }
91 94
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div class="calendar-page"> 9 <div class="calendar-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -37,10 +37,17 @@ ...@@ -37,10 +37,17 @@
37 </template> 37 </template>
38 38
39 <script setup> 39 <script setup>
40 +import { useRoute } from "vue-router";
41 +const $route = useRoute();
40 const props = defineProps({ 42 const props = defineProps({
41 item: Object, 43 item: Object,
42 }); 44 });
43 45
46 +// 只读显示-流程模式
47 +const ReadonlyShow = computed(() => {
48 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
49 +});
50 +
44 const show = ref(false); 51 const show = ref(false);
45 52
46 const formatDate = (date) => 53 const formatDate = (date) =>
...@@ -110,10 +117,6 @@ const onMonthShow = ({ date, title }) => { ...@@ -110,10 +117,6 @@ const onMonthShow = ({ date, title }) => {
110 padding: 1rem 1rem 0 1rem; 117 padding: 1rem 1rem 0 1rem;
111 font-size: 0.9rem; 118 font-size: 0.9rem;
112 font-weight: bold; 119 font-weight: bold;
113 -
114 - span {
115 - color: red;
116 - }
117 } 120 }
118 } 121 }
119 </style> 122 </style>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <div v-if="HideShow" class="checkbox-field-page"> 9 <div v-if="HideShow" class="checkbox-field-page">
10 <div class="label"> 10 <div class="label">
11 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span> 11 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 <span v-if="item.component_props.max" style="color: gray"> 13 <span v-if="item.component_props.max" style="color: gray">
14 (最多可选数:&nbsp;{{ item.component_props.max }}) 14 (最多可选数:&nbsp;{{ item.component_props.max }})
15 </span> 15 </span>
...@@ -38,6 +38,9 @@ ...@@ -38,6 +38,9 @@
38 38
39 <script setup> 39 <script setup>
40 import { styleColor } from "@/constant.js"; 40 import { styleColor } from "@/constant.js";
41 +import { useRoute } from "vue-router";
42 +
43 +const $route = useRoute();
41 44
42 const props = defineProps({ 45 const props = defineProps({
43 item: Object, 46 item: Object,
...@@ -54,6 +57,10 @@ onMounted(() => { ...@@ -54,6 +57,10 @@ onMounted(() => {
54 const HideShow = computed(() => { 57 const HideShow = computed(() => {
55 return !props.item.component_props.disabled 58 return !props.item.component_props.disabled
56 }) 59 })
60 +// 只读显示-流程模式
61 +const ReadonlyShow = computed(() => {
62 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
63 +});
57 64
58 // 校验函数返回 true 表示校验通过，false 表示不通过 65 // 校验函数返回 true 表示校验通过，false 表示不通过
59 const required = props.item.component_props.required; 66 const required = props.item.component_props.required;
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="date-picker-field"> 9 <div v-if="HideShow" class="date-picker-field">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -37,8 +37,10 @@ ...@@ -37,8 +37,10 @@
37 </template> 37 </template>
38 38
39 <script setup> 39 <script setup>
40 +import { useRoute } from "vue-router";
40 import dayjs from "dayjs"; 41 import dayjs from "dayjs";
41 42
43 +const $route = useRoute();
42 const props = defineProps({ 44 const props = defineProps({
43 item: Object, 45 item: Object,
44 }); 46 });
...@@ -47,6 +49,10 @@ const props = defineProps({ ...@@ -47,6 +49,10 @@ const props = defineProps({
47 const HideShow = computed(() => { 49 const HideShow = computed(() => {
48 return !props.item.component_props.disabled 50 return !props.item.component_props.disabled
49 }) 51 })
52 +// 只读显示-流程模式
53 +const ReadonlyShow = computed(() => {
54 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
55 +});
50 const showPicker = ref(false); 56 const showPicker = ref(false);
51 const currentDate = ref([]); 57 const currentDate = ref([]);
52 const readonly = props.item.component_props.readonly; 58 const readonly = props.item.component_props.readonly;
...@@ -146,10 +152,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -146,10 +152,6 @@ const rules = [{ validator, message: validatorMessage }];
146 // padding: 1rem 1rem 0 1rem; 152 // padding: 1rem 1rem 0 1rem;
147 font-size: 0.9rem; 153 font-size: 0.9rem;
148 font-weight: bold; 154 font-weight: bold;
149 -
150 - span {
151 - color: red;
152 - }
153 } 155 }
154 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题 156 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
155 font-size: var(--van-cell-icon-size); 157 font-size: var(--van-cell-icon-size);
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="datetime-picker"> 9 <div v-if="HideShow" class="datetime-picker">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -37,9 +37,11 @@ ...@@ -37,9 +37,11 @@
37 </template> 37 </template>
38 38
39 <script setup> 39 <script setup>
40 +import { useRoute } from "vue-router";
40 import { showToast } from "vant"; 41 import { showToast } from "vant";
41 import dayjs from "dayjs"; 42 import dayjs from "dayjs";
42 43
44 +const $route = useRoute();
43 const props = defineProps({ 45 const props = defineProps({
44 item: Object, 46 item: Object,
45 }); 47 });
...@@ -47,6 +49,10 @@ const props = defineProps({ ...@@ -47,6 +49,10 @@ const props = defineProps({
47 const HideShow = computed(() => { 49 const HideShow = computed(() => {
48 return !props.item.component_props.disabled 50 return !props.item.component_props.disabled
49 }) 51 })
52 +// 只读显示-流程模式
53 +const ReadonlyShow = computed(() => {
54 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
55 +});
50 const showPicker = ref(false); 56 const showPicker = ref(false);
51 const readonly = props.item.component_props.readonly; 57 const readonly = props.item.component_props.readonly;
52 58
...@@ -193,10 +199,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -193,10 +199,6 @@ const rules = [{ validator, message: validatorMessage }];
193 // padding: 1rem 1rem 0 1rem; 199 // padding: 1rem 1rem 0 1rem;
194 font-size: 0.9rem; 200 font-size: 0.9rem;
195 font-weight: bold; 201 font-weight: bold;
196 -
197 - span {
198 - color: red;
199 - }
200 } 202 }
201 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题 203 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
202 font-size: var(--van-cell-icon-size); 204 font-size: var(--van-cell-icon-size);
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="text-field-page"> 9 <div v-if="HideShow" class="text-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -26,6 +26,8 @@ ...@@ -26,6 +26,8 @@
26 </template> 26 </template>
27 27
28 <script setup> 28 <script setup>
29 +import { useRoute } from "vue-router";
30 +const $route = useRoute();
29 const props = defineProps({ 31 const props = defineProps({
30 item: Object, 32 item: Object,
31 }); 33 });
...@@ -33,6 +35,10 @@ const props = defineProps({ ...@@ -33,6 +35,10 @@ const props = defineProps({
33 const HideShow = computed(() => { 35 const HideShow = computed(() => {
34 return !props.item.component_props.disabled 36 return !props.item.component_props.disabled
35 }) 37 })
38 +// 只读显示-流程模式
39 +const ReadonlyShow = computed(() => {
40 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
41 +});
36 onMounted(() => { 42 onMounted(() => {
37 props.item.value = props.item.component_props.default; 43 props.item.value = props.item.component_props.default;
38 }) 44 })
...@@ -63,9 +69,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -63,9 +69,6 @@ const rules = [{ validator, message: validatorMessage }];
63 padding: 1rem 1rem 0 1rem; 69 padding: 1rem 1rem 0 1rem;
64 font-size: 0.9rem; 70 font-size: 0.9rem;
65 font-weight: bold; 71 font-weight: bold;
66 - span {
67 - color: red;
68 - }
69 } 72 }
70 } 73 }
71 74
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="gender-field-page"> 9 <div v-if="HideShow" class="gender-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 <van-field 15 <van-field
...@@ -35,8 +35,10 @@ ...@@ -35,8 +35,10 @@
35 </template> 35 </template>
36 36
37 <script setup> 37 <script setup>
38 +import { useRoute } from "vue-router";
38 import { styleColor } from "@/constant.js"; 39 import { styleColor } from "@/constant.js";
39 40
41 +const $route = useRoute();
40 const props = defineProps({ 42 const props = defineProps({
41 item: Object, 43 item: Object,
42 }); 44 });
...@@ -49,6 +51,9 @@ const themeVars = { ...@@ -49,6 +51,9 @@ const themeVars = {
49 const HideShow = computed(() => { 51 const HideShow = computed(() => {
50 return !props.item.component_props.disabled 52 return !props.item.component_props.disabled
51 }) 53 })
54 +const ReadonlyShow = computed(() => {
55 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
56 +});
52 57
53 const gender_value = ref(props.item.component_props.default); 58 const gender_value = ref(props.item.component_props.default);
54 59
...@@ -74,9 +79,6 @@ const onChange = (item) => { ...@@ -74,9 +79,6 @@ const onChange = (item) => {
74 padding: 1rem 1rem 0 1rem; 79 padding: 1rem 1rem 0 1rem;
75 font-size: 0.9rem; 80 font-size: 0.9rem;
76 font-weight: bold; 81 font-weight: bold;
77 - span {
78 - color: red;
79 - }
80 } 82 }
81 .note { 83 .note {
82 font-size: 0.9rem; 84 font-size: 0.9rem;
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="group-field-page"> 9 <div v-if="HideShow" class="group-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 <div> 15 <div>
...@@ -47,6 +47,10 @@ const themeVars = { ...@@ -47,6 +47,10 @@ const themeVars = {
47 const HideShow = computed(() => { 47 const HideShow = computed(() => {
48 return !props.item.component_props.disabled 48 return !props.item.component_props.disabled
49 }); 49 });
50 +// 只读显示-流程模式
51 +const ReadonlyShow = computed(() => {
52 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
53 +});
50 54
51 // let obj = { 55 // let obj = {
52 // "field_10_group[0]_7653" : "1", 56 // "field_10_group[0]_7653" : "1",
...@@ -142,9 +146,6 @@ const onActive = (item) => { ...@@ -142,9 +146,6 @@ const onActive = (item) => {
142 padding: 1rem 1rem 0 1rem; 146 padding: 1rem 1rem 0 1rem;
143 font-size: 0.9rem; 147 font-size: 0.9rem;
144 font-weight: bold; 148 font-weight: bold;
145 - span {
146 - color: red;
147 - }
148 } 149 }
149 .note { 150 .note {
150 font-size: 0.9rem; 151 font-size: 0.9rem;
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-06-06 18:17:34 4 + * @LastEditTime: 2024-07-26 22:37:11
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 * @Description: 身份证输入控件 6 * @Description: 身份证输入控件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="identity-page"> 9 <div v-if="HideShow" class="identity-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> --> 14 <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> -->
15 <!-- <van-field 15 <!-- <van-field
...@@ -54,11 +54,13 @@ ...@@ -54,11 +54,13 @@
54 </template> 54 </template>
55 55
56 <script setup> 56 <script setup>
57 +import { useRoute } from "vue-router";
57 import $ from "jquery"; 58 import $ from "jquery";
58 import { storeToRefs, mainStore } from "@/utils/generatePackage"; 59 import { storeToRefs, mainStore } from "@/utils/generatePackage";
59 import { showSuccessToast, showFailToast } from "vant"; 60 import { showSuccessToast, showFailToast } from "vant";
60 import idCard from "idcard"; 61 import idCard from "idcard";
61 62
63 +const $route = useRoute();
62 const props = defineProps({ 64 const props = defineProps({
63 item: Object, 65 item: Object,
64 }); 66 });
...@@ -66,6 +68,10 @@ const props = defineProps({ ...@@ -66,6 +68,10 @@ const props = defineProps({
66 const HideShow = computed(() => { 68 const HideShow = computed(() => {
67 return !props.item.component_props.disabled 69 return !props.item.component_props.disabled
68 }); 70 });
71 +// 只读显示-流程模式
72 +const ReadonlyShow = computed(() => {
73 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
74 +});
69 onMounted(() => { 75 onMounted(() => {
70 props.item.value = props.item.component_props.default; 76 props.item.value = props.item.component_props.default;
71 }) 77 })
...@@ -204,9 +210,6 @@ const getGenderByIdNumber = (idNumber) => { ...@@ -204,9 +210,6 @@ const getGenderByIdNumber = (idNumber) => {
204 padding: 1rem 1rem 0 1rem; 210 padding: 1rem 1rem 0 1rem;
205 font-size: 0.9rem; 211 font-size: 0.9rem;
206 font-weight: bold; 212 font-weight: bold;
207 - span {
208 - color: red;
209 - }
210 } 213 }
211 .gender { 214 .gender {
212 padding: 0 1rem 0 1rem; 215 padding: 0 1rem 0 1rem;
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="image-uploader-field"> 9 <div v-if="HideShow" class="image-uploader-field">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div 14 <div
15 v-if="item.component_props.note" 15 v-if="item.component_props.note"
...@@ -88,6 +88,10 @@ const props = defineProps({ ...@@ -88,6 +88,10 @@ const props = defineProps({
88 const HideShow = computed(() => { 88 const HideShow = computed(() => {
89 return !props.item.component_props.disabled 89 return !props.item.component_props.disabled
90 }); 90 });
91 +// 只读显示-流程模式
92 +const ReadonlyShow = computed(() => {
93 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
94 +});
91 // 默认图片列表 95 // 默认图片列表
92 const default_tmp = ref(props.item.component_props.default) 96 const default_tmp = ref(props.item.component_props.default)
93 const default_list = ref([]); 97 const default_list = ref([]);
...@@ -386,10 +390,6 @@ defineExpose({ validImageUploader }); ...@@ -386,10 +390,6 @@ defineExpose({ validImageUploader });
386 padding: 1rem 1rem 0 1rem; 390 padding: 1rem 1rem 0 1rem;
387 font-size: 0.9rem; 391 font-size: 0.9rem;
388 font-weight: bold; 392 font-weight: bold;
389 -
390 - span {
391 - color: red;
392 - }
393 } 393 }
394 394
395 .type-text { 395 .type-text {
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
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">&nbsp;*</span> 11 + <span v-if="item.component_props.required" class="required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ 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">
...@@ -58,9 +58,11 @@ ...@@ -58,9 +58,11 @@
58 </template> 58 </template>
59 59
60 <script setup> 60 <script setup>
61 +import { useRoute } from "vue-router";
61 import { styleColor } from "@/constant.js"; 62 import { styleColor } from "@/constant.js";
62 import $ from "jquery"; 63 import $ from "jquery";
63 64
65 +const $route = useRoute();
64 const props = defineProps({ 66 const props = defineProps({
65 item: Object, 67 item: Object,
66 }); 68 });
...@@ -68,6 +70,10 @@ const props = defineProps({ ...@@ -68,6 +70,10 @@ const props = defineProps({
68 const HideShow = computed(() => { 70 const HideShow = computed(() => {
69 return !props.item.component_props.disabled 71 return !props.item.component_props.disabled
70 }) 72 })
73 +// 只读显示-流程模式
74 +const ReadonlyShow = computed(() => {
75 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
76 +});
71 // TAG: 自定义主题颜色 77 // TAG: 自定义主题颜色
72 const themeVars = { 78 const themeVars = {
73 radioColor: styleColor.baseColor, 79 radioColor: styleColor.baseColor,
...@@ -126,9 +132,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -126,9 +132,6 @@ const rules = [{ validator, message: validatorMessage }];
126 padding: 1rem 1rem 0 1rem; 132 padding: 1rem 1rem 0 1rem;
127 font-size: 0.9rem; 133 font-size: 0.9rem;
128 font-weight: bold; 134 font-weight: bold;
129 - span.required {
130 - color: red;
131 - }
132 } 135 }
133 .rule-desc-text { 136 .rule-desc-text {
134 margin: 0.35rem 0.5rem 0.5rem 1.75rem; 137 margin: 0.35rem 0.5rem 0.5rem 1.75rem;
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="name-field-page"> 9 <div v-if="HideShow" class="name-field-page">
10 <div :class="[isGroup ? 'group-label' : 'label']"> 10 <div :class="[isGroup ? 'group-label' : 'label']">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -26,6 +26,8 @@ ...@@ -26,6 +26,8 @@
26 </template> 26 </template>
27 27
28 <script setup> 28 <script setup>
29 +import { useRoute } from "vue-router";
30 +const $route = useRoute();
29 const props = defineProps({ 31 const props = defineProps({
30 item: Object, 32 item: Object,
31 }); 33 });
...@@ -35,6 +37,11 @@ const HideShow = computed(() => { ...@@ -35,6 +37,11 @@ const HideShow = computed(() => {
35 return !props.item.component_props.disabled 37 return !props.item.component_props.disabled
36 }); 38 });
37 39
40 +// 只读显示-流程模式
41 +const ReadonlyShow = computed(() => {
42 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
43 +});
44 +
38 // 集合组标识 45 // 集合组标识
39 const isGroup = computed(() => { 46 const isGroup = computed(() => {
40 return props.item.component_props.is_field_group 47 return props.item.component_props.is_field_group
...@@ -51,9 +58,6 @@ onMounted(() => { ...@@ -51,9 +58,6 @@ onMounted(() => {
51 padding: 1rem 1rem 0 1rem; 58 padding: 1rem 1rem 0 1rem;
52 font-size: 0.9rem; 59 font-size: 0.9rem;
53 font-weight: bold; 60 font-weight: bold;
54 - span {
55 - color: red;
56 - }
57 } 61 }
58 62
59 .group-label { 63 .group-label {
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="name-field-page"> 9 <div v-if="HideShow" class="name-field-page">
10 <div :class="[isGroup ? 'group-label' : 'label']"> 10 <div :class="[isGroup ? 'group-label' : 'label']">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 14
15 <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;"> 15 <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;">
...@@ -22,8 +22,10 @@ ...@@ -22,8 +22,10 @@
22 </template> 22 </template>
23 23
24 <script setup> 24 <script setup>
25 +import { useRoute } from "vue-router";
25 import MyComponent from './MyComponent.vue'; 26 import MyComponent from './MyComponent.vue';
26 27
28 +const $route = useRoute();
27 const props = defineProps({ 29 const props = defineProps({
28 item: Object, 30 item: Object,
29 }); 31 });
...@@ -37,6 +39,11 @@ const HideShow = computed(() => { ...@@ -37,6 +39,11 @@ const HideShow = computed(() => {
37 return !props.item.component_props.disabled 39 return !props.item.component_props.disabled
38 }); 40 });
39 41
42 +// 只读显示-流程模式
43 +const ReadonlyShow = computed(() => {
44 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
45 +});
46 +
40 // 集合组标识 47 // 集合组标识
41 const isGroup = computed(() => { 48 const isGroup = computed(() => {
42 return props.item.component_props.is_field_group 49 return props.item.component_props.is_field_group
...@@ -70,9 +77,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -70,9 +77,6 @@ const rules = [{ validator, message: validatorMessage }];
70 padding: 1rem 1rem 0 1rem; 77 padding: 1rem 1rem 0 1rem;
71 font-size: 0.9rem; 78 font-size: 0.9rem;
72 font-weight: bold; 79 font-weight: bold;
73 - span {
74 - color: red;
75 - }
76 } 80 }
77 81
78 .group-label { 82 .group-label {
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="phone-field-page"> 9 <div v-if="HideShow" class="phone-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <!-- <van-field 14 <!-- <van-field
15 :id="item.name" 15 :id="item.name"
...@@ -63,10 +63,12 @@ ...@@ -63,10 +63,12 @@
63 </template> 63 </template>
64 64
65 <script setup> 65 <script setup>
66 +import { useRoute } from "vue-router";
66 import { wxInfo } from "@/utils/tools"; 67 import { wxInfo } from "@/utils/tools";
67 import $ from "jquery"; 68 import $ from "jquery";
68 import { storeToRefs, mainStore } from "@/utils/generatePackage"; 69 import { storeToRefs, mainStore } from "@/utils/generatePackage";
69 70
71 +const $route = useRoute();
70 const props = defineProps({ 72 const props = defineProps({
71 item: Object, 73 item: Object,
72 }); 74 });
...@@ -74,6 +76,10 @@ const props = defineProps({ ...@@ -74,6 +76,10 @@ const props = defineProps({
74 const HideShow = computed(() => { 76 const HideShow = computed(() => {
75 return !props.item.component_props.disabled 77 return !props.item.component_props.disabled
76 }); 78 });
79 +// 只读显示-流程模式
80 +const ReadonlyShow = computed(() => {
81 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
82 +});
77 onMounted(() => { 83 onMounted(() => {
78 props.item.value = props.item.component_props.default; 84 props.item.value = props.item.component_props.default;
79 }) 85 })
...@@ -158,9 +164,6 @@ const blurKeyboard = () => { ...@@ -158,9 +164,6 @@ const blurKeyboard = () => {
158 padding: 1rem 1rem 0 1rem; 164 padding: 1rem 1rem 0 1rem;
159 font-size: 0.9rem; 165 font-size: 0.9rem;
160 font-weight: bold; 166 font-weight: bold;
161 - span {
162 - color: red;
163 - }
164 } 167 }
165 168
166 :deep(.van-field__body) { 169 :deep(.van-field__body) {
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 13:46:51 2 * @Date: 2022-08-30 13:46:51
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-01 12:33:33 4 + * @LastEditTime: 2024-07-26 22:16:14
5 * @FilePath: /data-table/src/components/PickerField/index.vue 5 * @FilePath: /data-table/src/components/PickerField/index.vue
6 * @Description: 单列选择器组件 6 * @Description: 单列选择器组件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="picker-field-page"> 9 <div v-if="HideShow" class="picker-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field :name="item.name" :rules="item.rules" style="padding: 0;"> 14 <van-field :name="item.name" :rules="item.rules" style="padding: 0;">
15 <template #input> 15 <template #input>
...@@ -20,8 +20,11 @@ ...@@ -20,8 +20,11 @@
20 </template> 20 </template>
21 21
22 <script setup> 22 <script setup>
23 +import { useRoute } from "vue-router";
23 import MyComponent from './MyComponent.vue'; 24 import MyComponent from './MyComponent.vue';
24 25
26 +const $route = useRoute();
27 +
25 const props = defineProps({ 28 const props = defineProps({
26 item: Object, 29 item: Object,
27 }); 30 });
...@@ -35,6 +38,11 @@ const HideShow = computed(() => { ...@@ -35,6 +38,11 @@ const HideShow = computed(() => {
35 return !props.item.component_props.disabled 38 return !props.item.component_props.disabled
36 }); 39 });
37 40
41 +// 只读显示-流程模式
42 +const ReadonlyShow = computed(() => {
43 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
44 +});
45 +
38 // 子组件通信，适配规则触发 46 // 子组件通信，适配规则触发
39 const onActive = (val) => { 47 const onActive = (val) => {
40 emit("active", val); 48 emit("active", val);
...@@ -49,10 +57,6 @@ const onActive = (val) => { ...@@ -49,10 +57,6 @@ const onActive = (val) => {
49 // padding: 1rem 1rem 0 0; 57 // padding: 1rem 1rem 0 0;
50 font-size: 0.9rem; 58 font-size: 0.9rem;
51 font-weight: bold; 59 font-weight: bold;
52 -
53 - span {
54 - color: red;
55 - }
56 } 60 }
57 } 61 }
58 62
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-19 17:01:48 4 + * @LastEditTime: 2024-07-26 22:13:18
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="radio-field-page"> 9 <div v-if="HideShow" class="radio-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 <van-field :rules="item.rules"> 15 <van-field :rules="item.rules">
...@@ -61,6 +61,9 @@ ...@@ -61,6 +61,9 @@
61 <script setup> 61 <script setup>
62 import { styleColor } from "@/constant.js"; 62 import { styleColor } from "@/constant.js";
63 import $ from "jquery"; 63 import $ from "jquery";
64 +import { useRoute } from "vue-router";
65 +
66 +const $route = useRoute();
64 67
65 const props = defineProps({ 68 const props = defineProps({
66 item: Object, 69 item: Object,
...@@ -74,6 +77,10 @@ const themeVars = { ...@@ -74,6 +77,10 @@ const themeVars = {
74 const HideShow = computed(() => { 77 const HideShow = computed(() => {
75 return !props.item.component_props.disabled 78 return !props.item.component_props.disabled
76 }) 79 })
80 +// 只读显示-流程模式
81 +const ReadonlyShow = computed(() => {
82 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
83 +});
77 84
78 // 校验函数返回 true 表示校验通过，false 表示不通过 85 // 校验函数返回 true 表示校验通过，false 表示不通过
79 const required = props.item.component_props.required; 86 const required = props.item.component_props.required;
...@@ -170,10 +177,6 @@ const rule_content = ref(""); ...@@ -170,10 +177,6 @@ const rule_content = ref("");
170 padding: 1rem 1rem 0 1rem; 177 padding: 1rem 1rem 0 1rem;
171 font-size: 0.9rem; 178 font-size: 0.9rem;
172 font-weight: bold; 179 font-weight: bold;
173 -
174 - span {
175 - color: red;
176 - }
177 } 180 }
178 181
179 .note { 182 .note {
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="rate-field"> 9 <div v-if="HideShow" class="rate-field">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field :name="item.name" :rules="rules"> 14 <van-field :name="item.name" :rules="rules">
15 <template #input> 15 <template #input>
...@@ -20,8 +20,10 @@ ...@@ -20,8 +20,10 @@
20 </template> 20 </template>
21 21
22 <script setup> 22 <script setup>
23 +import { useRoute } from "vue-router";
23 import MyComponent from './MyComponent.vue'; 24 import MyComponent from './MyComponent.vue';
24 25
26 +const $route = useRoute();
25 const props = defineProps({ 27 const props = defineProps({
26 item: Object, 28 item: Object,
27 }); 29 });
...@@ -29,7 +31,10 @@ const props = defineProps({ ...@@ -29,7 +31,10 @@ const props = defineProps({
29 const HideShow = computed(() => { 31 const HideShow = computed(() => {
30 return !props.item.component_props.disabled 32 return !props.item.component_props.disabled
31 }) 33 })
32 - 34 +// 只读显示-流程模式
35 +const ReadonlyShow = computed(() => {
36 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
37 +});
33 // 注入子组件属性 38 // 注入子组件属性
34 provide('props', props.item); 39 provide('props', props.item);
35 40
...@@ -57,10 +62,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -57,10 +62,6 @@ const rules = [{ validator, message: validatorMessage }];
57 padding: 1rem 1rem 0 1rem; 62 padding: 1rem 1rem 0 1rem;
58 font-size: 0.9rem; 63 font-size: 0.9rem;
59 font-weight: bold; 64 font-weight: bold;
60 -
61 - span {
62 - color: red;
63 - }
64 } 65 }
65 } 66 }
66 </style> 67 </style>
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div class="rule-field-page"> 9 <div class="rule-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 :name="item.key" 15 :name="item.key"
...@@ -47,11 +47,17 @@ ...@@ -47,11 +47,17 @@
47 </template> 47 </template>
48 48
49 <script setup> 49 <script setup>
50 +import { useRoute } from "vue-router";
51 +const $route = useRoute();
50 const props = defineProps({ 52 const props = defineProps({
51 item: Object, 53 item: Object,
52 }); 54 });
53 55
54 const show = ref(false); 56 const show = ref(false);
57 +// 只读显示-流程模式
58 +const ReadonlyShow = computed(() => {
59 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
60 +});
55 </script> 61 </script>
56 62
57 <style lang="less" scoped> 63 <style lang="less" scoped>
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="sign-page"> 9 <div v-if="HideShow" class="sign-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field :name="item.key" :rules="rules" style="padding: 0;"> 14 <van-field :name="item.key" :rules="rules" style="padding: 0;">
15 <template #input> 15 <template #input>
...@@ -20,9 +20,11 @@ ...@@ -20,9 +20,11 @@
20 </template> 20 </template>
21 21
22 <script setup> 22 <script setup>
23 +import { useRoute } from "vue-router";
23 import { showSuccessToast, showFailToast } from 'vant'; 24 import { showSuccessToast, showFailToast } from 'vant';
24 import MyComponent from './MyComponent.vue'; 25 import MyComponent from './MyComponent.vue';
25 26
27 +const $route = useRoute();
26 const props = defineProps({ 28 const props = defineProps({
27 item: Object, 29 item: Object,
28 }); 30 });
...@@ -32,6 +34,10 @@ provide('props', props.item); ...@@ -32,6 +34,10 @@ provide('props', props.item);
32 const HideShow = computed(() => { 34 const HideShow = computed(() => {
33 return !props.item.component_props.disabled 35 return !props.item.component_props.disabled
34 }) 36 })
37 +// 只读显示-流程模式
38 +const ReadonlyShow = computed(() => {
39 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
40 +});
35 41
36 const refComponent = ref(null) 42 const refComponent = ref(null)
37 43
...@@ -65,10 +71,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -65,10 +71,6 @@ const rules = [{ validator, message: validatorMessage }];
65 padding: 1rem 1rem 0 1rem; 71 padding: 1rem 1rem 0 1rem;
66 font-size: 0.9rem; 72 font-size: 0.9rem;
67 font-weight: bold; 73 font-weight: bold;
68 -
69 - span {
70 - color: red;
71 - }
72 } 74 }
73 } 75 }
74 76
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-05-28 10:05:08 4 + * @LastEditTime: 2024-07-26 22:37:33
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框(微信扫描功能) 6 * @Description: 单行文本输入框(微信扫描功能)
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="text-field-page"> 9 <div v-if="HideShow" class="text-field-page">
10 <div :class="[isGroup ? 'group-label' : 'label']"> 10 <div :class="[isGroup ? 'group-label' : 'label']">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" /> 14 <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" />
15 <van-field v-model="item.value" :name="item.name" :type="item.type" 15 <van-field v-model="item.value" :name="item.name" :type="item.type"
...@@ -27,6 +27,7 @@ import { showSuccessToast, showFailToast } from 'vant'; ...@@ -27,6 +27,7 @@ import { showSuccessToast, showFailToast } from 'vant';
27 // 初始化WX环境 27 // 初始化WX环境
28 import wx from 'weixin-js-sdk' 28 import wx from 'weixin-js-sdk'
29 29
30 +const $route = useRoute();
30 const props = defineProps({ 31 const props = defineProps({
31 item: Object, 32 item: Object,
32 }); 33 });
...@@ -36,6 +37,11 @@ const HideShow = computed(() => { ...@@ -36,6 +37,11 @@ const HideShow = computed(() => {
36 return !props.item.component_props.disabled 37 return !props.item.component_props.disabled
37 }); 38 });
38 39
40 +// 只读显示-流程模式
41 +const ReadonlyShow = computed(() => {
42 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
43 +});
44 +
39 // 集合组标识 45 // 集合组标识
40 const isGroup = computed(() => { 46 const isGroup = computed(() => {
41 return props.item.component_props.is_field_group 47 return props.item.component_props.is_field_group
...@@ -45,7 +51,6 @@ onMounted(() => { ...@@ -45,7 +51,6 @@ onMounted(() => {
45 props.item.value = props.item.component_props.default; 51 props.item.value = props.item.component_props.default;
46 }); 52 });
47 53
48 -const $route = useRoute();
49 // 默认识别类型 54 // 默认识别类型
50 const scan_type_code = ref('ALL_CODE'); 55 const scan_type_code = ref('ALL_CODE');
51 // 微信二维码扫描功能判断 56 // 微信二维码扫描功能判断
...@@ -98,10 +103,6 @@ const clickRightIcon = async () => { ...@@ -98,10 +103,6 @@ const clickRightIcon = async () => {
98 padding: 1rem 1rem 0 1rem; 103 padding: 1rem 1rem 0 1rem;
99 font-size: 0.9rem; 104 font-size: 0.9rem;
100 font-weight: bold; 105 font-weight: bold;
101 -
102 - span {
103 - color: red;
104 - }
105 } 106 }
106 107
107 .group-label { 108 .group-label {
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-06-06 13:58:02 4 + * @LastEditTime: 2024-07-26 22:13:05
5 * @FilePath: /data-table/src/components/TextareaField/index.vue 5 * @FilePath: /data-table/src/components/TextareaField/index.vue
6 * @Description: 多行文本输入框 6 * @Description: 多行文本输入框
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="textarea-field-page"> 9 <div v-if="HideShow" class="textarea-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div 14 <div
15 v-if="item.component_props.note" 15 v-if="item.component_props.note"
...@@ -33,15 +33,24 @@ ...@@ -33,15 +33,24 @@
33 </template> 33 </template>
34 34
35 <script setup> 35 <script setup>
36 +import { useRoute } from "vue-router";
37 +
36 const props = defineProps({ 38 const props = defineProps({
37 item: Object, 39 item: Object,
38 }); 40 });
39 41
42 +const $route = useRoute();
43 +
40 // 隐藏显示 44 // 隐藏显示
41 const HideShow = computed(() => { 45 const HideShow = computed(() => {
42 return !props.item.component_props.disabled 46 return !props.item.component_props.disabled
43 }); 47 });
44 48
49 +// 只读显示-流程模式
50 +const ReadonlyShow = computed(() => {
51 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
52 +});
53 +
45 onMounted(() => { 54 onMounted(() => {
46 props.item.value = props.item.component_props.default; 55 props.item.value = props.item.component_props.default;
47 }) 56 })
...@@ -53,9 +62,6 @@ onMounted(() => { ...@@ -53,9 +62,6 @@ onMounted(() => {
53 padding: 1rem 1rem 0 1rem; 62 padding: 1rem 1rem 0 1rem;
54 font-size: 0.9rem; 63 font-size: 0.9rem;
55 font-weight: bold; 64 font-weight: bold;
56 - span {
57 - color: red;
58 - }
59 } 65 }
60 } 66 }
61 67
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
8 <template> 8 <template>
9 <div v-if="HideShow" class="time-picker-field"> 9 <div v-if="HideShow" class="time-picker-field">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
...@@ -35,8 +35,10 @@ ...@@ -35,8 +35,10 @@
35 </template> 35 </template>
36 36
37 <script setup> 37 <script setup>
38 +import { useRoute } from "vue-router";
38 import dayjs from "dayjs"; 39 import dayjs from "dayjs";
39 40
41 +const $route = useRoute();
40 const props = defineProps({ 42 const props = defineProps({
41 item: Object, 43 item: Object,
42 }); 44 });
...@@ -44,6 +46,10 @@ const props = defineProps({ ...@@ -44,6 +46,10 @@ const props = defineProps({
44 const HideShow = computed(() => { 46 const HideShow = computed(() => {
45 return !props.item.component_props.disabled 47 return !props.item.component_props.disabled
46 }) 48 })
49 +// 只读显示-流程模式
50 +const ReadonlyShow = computed(() => {
51 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
52 +});
47 const showPicker = ref(false); 53 const showPicker = ref(false);
48 const currentTime = ref([]); 54 const currentTime = ref([]);
49 const readonly = props.item.component_props.readonly; 55 const readonly = props.item.component_props.readonly;
...@@ -124,10 +130,6 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -124,10 +130,6 @@ const rules = [{ validator, message: validatorMessage }];
124 // padding: 1rem 1rem 0 1rem; 130 // padding: 1rem 1rem 0 1rem;
125 font-size: 0.9rem; 131 font-size: 0.9rem;
126 font-weight: bold; 132 font-weight: bold;
127 -
128 - span {
129 - color: red;
130 - }
131 } 133 }
132 134
133 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题 135 :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
......
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 * @LastEditTime: 2024-06-24 14:40:39 4 * @LastEditTime: 2024-06-24 14:40:39
5 * @FilePath: /data-table/src/components/VolunteerGroupField/index.vue 5 * @FilePath: /data-table/src/components/VolunteerGroupField/index.vue
6 - * @Description: 单项选择控件 6 + * @Description: 义工组别选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="radio-field-page"> 9 <div v-if="HideShow" class="radio-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required">&nbsp;*</span> 11 + <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
12 - {{ item.component_props.label }} 12 + <span :class="[!ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 <van-field :rules="item.rules"> 15 <van-field :rules="item.rules">
...@@ -55,9 +55,11 @@ ...@@ -55,9 +55,11 @@
55 </template> 55 </template>
56 56
57 <script setup> 57 <script setup>
58 +import { useRoute } from "vue-router";
58 import { styleColor } from "@/constant.js"; 59 import { styleColor } from "@/constant.js";
59 import $ from "jquery"; 60 import $ from "jquery";
60 61
62 +const $route = useRoute();
61 const props = defineProps({ 63 const props = defineProps({
62 item: Object, 64 item: Object,
63 }); 65 });
...@@ -70,6 +72,10 @@ const themeVars = { ...@@ -70,6 +72,10 @@ const themeVars = {
70 const HideShow = computed(() => { 72 const HideShow = computed(() => {
71 return !props.item.component_props.disabled 73 return !props.item.component_props.disabled
72 }) 74 })
75 +// 只读显示-流程模式
76 +const ReadonlyShow = computed(() => {
77 + return $route.query.page_type === 'flow' && props.item.component_props.readonly;
78 +});
73 79
74 // 校验函数返回 true 表示校验通过，false 表示不通过 80 // 校验函数返回 true 表示校验通过，false 表示不通过
75 const required = props.item.component_props.required; 81 const required = props.item.component_props.required;
...@@ -148,10 +154,6 @@ const rule_content = ref(""); ...@@ -148,10 +154,6 @@ const rule_content = ref("");
148 padding: 1rem 1rem 0 1rem; 154 padding: 1rem 1rem 0 1rem;
149 font-size: 0.9rem; 155 font-size: 0.9rem;
150 font-weight: bold; 156 font-weight: bold;
151 -
152 - span {
153 - color: red;
154 - }
155 } 157 }
156 158
157 .note { 159 .note {
......