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

@@ -8,6 +8,7 @@
 // 文字颜色
 @base-font-color: #333333;
 @sub-font-color: #999999;
+@readonly-font-color: #05ae33;
 
 // 定义一个映射
 #colors() {
@@ -98,3 +99,11 @@
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
 }
+
+.readonly-show {
+  display: inline;
+  color: #05ae33;
+  display: inline-block;
+  padding: 0.25rem;
+  border-bottom: 1px solid #05ae33;
+}

@@ -8,8 +8,8 @@
 <template>
   <div class="Appointment-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field :name="item.name" :rules="rules">
       <template #input>
@@ -21,9 +21,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { provide } from 'vue'
 import MyComponent from './MyComponent.vue';
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -33,6 +35,11 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 // 注入子组件属性
 provide('props', props.item);
 

 <!--
  * @Date: 2022-08-30 14:32:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-06 22:51:15
+ * @LastEditTime: 2024-07-26 22:18:08
  * @FilePath: /data-table/src/components/AreaPickerField/index.vue
  * @Description: 省市区选择控件
 -->
 <template>
   <div v-if="HideShow" class="area-picker-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field :name="item.key" :rules="rules" style="padding: 0;">
       <template #input>
@@ -20,13 +20,20 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import MyComponent from './MyComponent.vue';
 import _ from 'lodash'
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 if (props.item.component_props.default) { // 存在默认值时业务逻辑
   if (!props.item.component_props.default?.city_code) { // 默认值为空
     props.item.component_props.default.picker_value = '';
@@ -82,10 +89,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 }
 

@@ -8,8 +8,8 @@
 <template>
   <div class="calendar-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -37,10 +37,17 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 const show = ref(false);
 
 const formatDate = (date) =>
@@ -110,10 +117,6 @@ const onMonthShow = ({ date, title }) => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 }
 </style>

@@ -9,7 +9,7 @@
   <div v-if="HideShow" class="checkbox-field-page">
     <div class="label">
       <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
       <span v-if="item.component_props.max" style="color: gray">
         (最多可选数:&nbsp;{{ item.component_props.max }})
       </span>
@@ -38,6 +38,9 @@
 
 <script setup>
 import { styleColor } from "@/constant.js";
+import { useRoute } from "vue-router";
+
+const $route = useRoute();
 
 const props = defineProps({
   item: Object,
@@ -54,6 +57,10 @@ onMounted(() => {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 const required = props.item.component_props.required;

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="date-picker-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -37,8 +37,10 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import dayjs from "dayjs";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -47,6 +49,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 const showPicker = ref(false);
 const currentDate = ref([]);
 const readonly = props.item.component_props.readonly;
@@ -146,10 +152,6 @@ const rules = [{ validator, message: validatorMessage }];
     // padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
   :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
     font-size: var(--van-cell-icon-size);

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="datetime-picker">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -37,9 +37,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { showToast } from "vant";
 import dayjs from "dayjs";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -47,6 +49,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 const showPicker = ref(false);
 const readonly = props.item.component_props.readonly;
 
@@ -193,10 +199,6 @@ const rules = [{ validator, message: validatorMessage }];
     // padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
   :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
     font-size: var(--van-cell-icon-size);

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="text-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -26,6 +26,8 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -33,6 +35,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 onMounted(() => {
   props.item.value = props.item.component_props.default;
 })
@@ -63,9 +69,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 }
 

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="gender-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
     <van-field
@@ -35,8 +35,10 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { styleColor } from "@/constant.js";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -49,6 +51,9 @@ const themeVars = {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 const gender_value = ref(props.item.component_props.default);
 
@@ -74,9 +79,6 @@ const onChange = (item) => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
   .note {
     font-size: 0.9rem;

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="group-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
     <div>
@@ -47,6 +47,10 @@ const themeVars = {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 // let obj = {
 //   "field_10_group[0]_7653" : "1",
@@ -142,9 +146,6 @@ const onActive = (item) => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
   .note {
     font-size: 0.9rem;

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-06 18:17:34
+ * @LastEditTime: 2024-07-26 22:37:11
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
 <template>
   <div v-if="HideShow" class="identity-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> -->
     <!-- <van-field
@@ -54,11 +54,13 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 import { showSuccessToast, showFailToast } from "vant";
 import idCard from "idcard";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -66,6 +68,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 onMounted(() => {
   props.item.value = props.item.component_props.default;
 })
@@ -204,9 +210,6 @@ const getGenderByIdNumber = (idNumber) => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
   .gender {
     padding: 0 1rem 0 1rem;

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="image-uploader-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div
       v-if="item.component_props.note"
@@ -88,6 +88,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 // 默认图片列表
 const default_tmp = ref(props.item.component_props.default)
 const default_list = ref([]);
@@ -386,10 +390,6 @@ defineExpose({ validImageUploader });
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 
   .type-text {

@@ -8,9 +8,9 @@
 <template>
   <div v-if="HideShow" class="multi-rule-field-page">
     <div class="label">
-      <span v-if="item.component_props.required" class="required">&nbsp;*</span>
-      {{ item.component_props.label }}
-    <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">（最少选{{ item.component_props.min_count }}项）</span>
+      <span v-if="item.component_props.required" class="required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
+      <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">（最少选{{ item.component_props.min_count }}项）</span>
     </div>
     <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
       <template #input>
@@ -58,9 +58,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { styleColor } from "@/constant.js";
 import $ from "jquery";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -68,6 +70,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 // TAG: 自定义主题颜色
 const themeVars = {
   radioColor: styleColor.baseColor,
@@ -126,9 +132,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span.required {
-      color: red;
-    }
   }
   .rule-desc-text {
     margin: 0.35rem 0.5rem 0.5rem 1.75rem;

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="name-field-page">
     <div :class="[isGroup ? 'group-label' : 'label']">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -26,6 +26,8 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -35,6 +37,11 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 // 集合组标识
 const isGroup = computed(() => {
   return props.item.component_props.is_field_group
@@ -51,9 +58,6 @@ onMounted(() => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 
   .group-label {

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="name-field-page">
     <div :class="[isGroup ? 'group-label' : 'label']">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
 
     <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;">
@@ -22,8 +22,10 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import MyComponent from './MyComponent.vue';
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -37,6 +39,11 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 // 集合组标识
 const isGroup = computed(() => {
   return props.item.component_props.is_field_group
@@ -70,9 +77,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 
   .group-label {

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="phone-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <!-- <van-field
       :id="item.name"
@@ -63,10 +63,12 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { wxInfo } from "@/utils/tools";
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -74,6 +76,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 onMounted(() => {
   props.item.value = props.item.component_props.default;
 })
@@ -158,9 +164,6 @@ const blurKeyboard = () => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 
   :deep(.van-field__body) {

 <!--
  * @Date: 2022-08-30 13:46:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-01 12:33:33
+ * @LastEditTime: 2024-07-26 22:16:14
  * @FilePath: /data-table/src/components/PickerField/index.vue
  * @Description: 单列选择器组件
 -->
 <template>
   <div v-if="HideShow" class="picker-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field :name="item.name" :rules="item.rules" style="padding: 0;">
       <template #input>
@@ -20,8 +20,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import MyComponent from './MyComponent.vue';
 
+const $route = useRoute();
+
 const props = defineProps({
   item: Object,
 });
@@ -35,6 +38,11 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 // 子组件通信，适配规则触发
 const onActive = (val) => {
   emit("active", val);
@@ -49,10 +57,6 @@ const onActive = (val) => {
     // padding: 1rem 1rem 0 0;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 }
 

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-19 17:01:48
+ * @LastEditTime: 2024-07-26 22:13:18
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
 <template>
   <div v-if="HideShow" class="radio-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
     <van-field :rules="item.rules">
@@ -61,6 +61,9 @@
 <script setup>
 import { styleColor } from "@/constant.js";
 import $ from "jquery";
+import { useRoute } from "vue-router";
+
+const $route = useRoute();
 
 const props = defineProps({
   item: Object,
@@ -74,6 +77,10 @@ const themeVars = {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 const required = props.item.component_props.required;
@@ -170,10 +177,6 @@ const rule_content = ref("");
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 
   .note {

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="rate-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field :name="item.name" :rules="rules">
       <template #input>
@@ -20,8 +20,10 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import MyComponent from './MyComponent.vue';
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -29,7 +31,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
-
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 // 注入子组件属性
 provide('props', props.item);
 
@@ -57,10 +62,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 }
 </style>

@@ -8,8 +8,8 @@
 <template>
   <div class="rule-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       :name="item.key"
@@ -47,11 +47,17 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
 
 const show = ref(false);
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 </script>
 
 <style lang="less" scoped>

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="sign-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field :name="item.key" :rules="rules" style="padding: 0;">
       <template #input>
@@ -20,9 +20,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { showSuccessToast, showFailToast } from 'vant';
 import MyComponent from './MyComponent.vue';
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -32,6 +34,10 @@ provide('props', props.item);
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 const refComponent = ref(null)
 
@@ -65,10 +71,6 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 }
 

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-28 10:05:08
+ * @LastEditTime: 2024-07-26 22:37:33
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框(微信扫描功能)
 -->
 <template>
   <div v-if="HideShow" class="text-field-page">
     <div :class="[isGroup ? 'group-label' : 'label']">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" />
     <van-field v-model="item.value" :name="item.name" :type="item.type"
@@ -27,6 +27,7 @@ import { showSuccessToast, showFailToast } from 'vant';
 // 初始化WX环境
 import wx from 'weixin-js-sdk'
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -36,6 +37,11 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 // 集合组标识
 const isGroup = computed(() => {
   return props.item.component_props.is_field_group
@@ -45,7 +51,6 @@ onMounted(() => {
   props.item.value = props.item.component_props.default;
 });
 
-const $route = useRoute();
 // 默认识别类型
 const scan_type_code = ref('ALL_CODE');
 // 微信二维码扫描功能判断
@@ -98,10 +103,6 @@ const clickRightIcon = async () => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 
   .group-label {

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-06 13:58:02
+ * @LastEditTime: 2024-07-26 22:13:05
  * @FilePath: /data-table/src/components/TextareaField/index.vue
  * @Description: 多行文本输入框
 -->
 <template>
   <div v-if="HideShow" class="textarea-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div
       v-if="item.component_props.note"
@@ -33,15 +33,24 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
+
 const props = defineProps({
   item: Object,
 });
 
+const $route = useRoute();
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
+
 onMounted(() => {
   props.item.value = props.item.component_props.default;
 })
@@ -53,9 +62,6 @@ onMounted(() => {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 }
 

@@ -8,8 +8,8 @@
 <template>
   <div v-if="HideShow" class="time-picker-field">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <van-field
       v-model="item.value"
@@ -35,8 +35,10 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import dayjs from "dayjs";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -44,6 +46,10 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 const showPicker = ref(false);
 const currentTime = ref([]);
 const readonly = props.item.component_props.readonly;
@@ -124,10 +130,6 @@ const rules = [{ validator, message: validatorMessage }];
     // padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 
   :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题

@@ -3,13 +3,13 @@
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditTime: 2024-06-24 14:40:39
  * @FilePath: /data-table/src/components/VolunteerGroupField/index.vue
- * @Description: 单项选择控件
+ * @Description: 义工组别选择控件
 -->
 <template>
   <div v-if="HideShow" class="radio-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
-      {{ item.component_props.label }}
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[!ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
     <van-field :rules="item.rules">
@@ -55,9 +55,11 @@
 </template>
 
 <script setup>
+import { useRoute } from "vue-router";
 import { styleColor } from "@/constant.js";
 import $ from "jquery";
 
+const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
@@ -70,6 +72,10 @@ const themeVars = {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && props.item.component_props.readonly;
+});
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 const required = props.item.component_props.required;
@@ -148,10 +154,6 @@ const rule_content = ref("");
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-
-    span {
-      color: red;
-    }
   }
 
   .note {