新增义工组别组件结构-API数据未处理

@@ -79,5 +79,6 @@ declare module '@vue/runtime-core' {
     VanTimePicker: typeof import('vant/es')['TimePicker']
     VanUploader: typeof import('vant/es')['Uploader']
     VideoField: typeof import('./src/components/VideoField/index.vue')['default']
+    VolunteerGroupField: typeof import('./src/components/VolunteerGroupField/index.vue')['default']
   }
 }

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-06-24 14:40:39
+ * @FilePath: /data-table/src/components/VolunteerGroupField/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 }}
+    </div>
+    <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
+    <van-field :rules="item.rules">
+      <template #input>
+        <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
+          style="width: 100%">
+          <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
+            <div v-if="item.component_props.readonly" class="readonly-show">
+              <div v-if="item.component_props.default === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-radio__label">{{ x.title }}</span></div>
+              <div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"><!----><!----><!----></i></div><span class="van-radio__label">{{ x.title }}</span></div>
+            </div>
+            <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
+              style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
+            <div v-if="x.desc_text" class="van-multi-ellipsis--l3 rule-desc-text">{{ x.desc_text }}</div>
+            <div v-if="x.desc_type === 'text'" class="rule-box" @click="showRule(x)">
+              {{ x.desc_btn_name }}&nbsp;>>
+            </div>
+            <div v-if="x.desc_type === 'url'" class="rule-box" @click="showUrl(x)">
+              {{ x.desc_btn_name }}&nbsp;<van-icon name="link-o" />
+            </div>
+            <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label=" " label-width="5px"
+              :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required"
+              class="affix-input" />
+          </div>
+        </van-radio-group>
+      </template>
+    </van-field>
+  </div>
+
+  <van-overlay :show="show" :lock-scroll="false">
+    <div class="rule-wrapper" @click.stop>
+      <div class="rule-block">
+        <div style="height: 70vh; min-height: 70vh; overflow: scroll; white-space: pre-wrap; line-height: 1.5;" v-html="rule_content"></div>
+        <div class="close-btn">
+          <van-button type="primary" block @click="closeRule"
+            >关&nbsp;&nbsp;闭</van-button
+          >
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+import $ from "jquery";
+
+const props = defineProps({
+  item: Object,
+});
+
+// TAG: 自定义主题颜色
+const themeVars = {
+  radioColor: styleColor.baseColor,
+};
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const required = props.item.component_props.required;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "补充信息不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
+const emit = defineEmits(["active"]);
+const radio_value = ref(props.item.component_props.default);
+const affix_value = ref('');
+
+const onChange = (item) => {
+  clearAffix()
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
+  emit("active", props.item.value);
+}
+const onBlur = (item) => {
+  clearAffix()
+  affix_value.value = item.affix ? `${item.title}: ${item.affix}` : '';
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
+  emit("active", props.item.value);
+}
+const clearAffix = () => {
+  const options = props.item.component_props.options;
+  // 为选中项目的补充清空
+  options.forEach(element => {
+    if (element.value !== radio_value.value) {
+      element.affix = ''
+    }
+  });
+}
+onMounted(() => {
+  radio_value.value = props.item.component_props.default ? props.item.component_props.default : '';
+  // TODO: 请求新的义工组别API获取组别的列表替换掉
+  props.item.component_props.options[0]['title'] = 'text1';
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
+  emit("active", props.item.value);
+  //
+  $(".rule-box").css("color", themeVars.radioColor);
+})
+
+// 补充信息弹框
+const show = ref(false);
+const showRule = (rule) => {
+  show.value = true;
+  rule.desc_text = rule.desc_text.replace(/\\n/g, "<br>")
+  rule_content.value = rule.desc_text;
+};
+const closeRule = () => {
+  show.value = false;
+  rule_content.value = "";
+};
+const showUrl = (rule) => {
+  location.href = rule.desc_url
+}
+const rule_content = ref("");
+</script>
+
+<style lang="less" scoped>
+.radio-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+
+  .note {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    color: gray;
+    padding-bottom: 0.5rem;
+    white-space: pre-wrap;
+  }
+
+  .radio-wrapper {
+    border: 1px solid #eaeaea;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+  .affix-input {
+    border: 1px solid #eaeaea;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+  .rule-desc-text {
+    margin: 0.35rem 0.5rem 0.5rem 1.75rem;
+    font-size: 0.8rem;
+    color: #808080;
+  }
+  .rule-box {
+    font-size: 0.85rem;
+    margin-left: 1.8rem;
+    padding-bottom: 0.5rem;
+    width: fit-content;
+  }
+}
+
+.rule-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.rule-block {
+  position: relative;
+  width: 80vw;
+  height: 80vh;
+  background-color: #fff;
+  overflow: scroll;
+  padding: 1rem;
+  .close-btn {
+    position: absolute;
+    bottom: 1rem;
+    // transform: translateX(100%);
+    width: calc(100% - 2rem);
+  }
+}
+.multi-rule-field-box {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 1rem 0.5rem 0 0.5rem;
+  // width: 100vw;
+  margin-bottom: 0.5rem;
+}
+
+:deep(.van-radio) {
+  // border: 1px solid #eaeaea;
+  // border-radius: 0.25rem;
+  // padding: 0.25rem 0.5rem;
+}
+</style>

@@ -33,6 +33,7 @@ import AppointmentField from '@/components/AppointmentField/index.vue';
 import CustomField from '@/components/CustomField/index.vue';
 import GroupField from '@/components/GroupField/index.vue';
 import OrgPickerField from '@/components/OrgPickerField/index.vue';
+import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
 
 /**
  * 生成自定义组件类型
@@ -65,6 +66,7 @@ import OrgPickerField from '@/components/OrgPickerField/index.vue';
  * @type appointment 预约控件 AppointmentField
  * @type group 组集合输入控件 GroupField
  * @type org_picker 树形选择控件 OrgPickerField
+ * @type volunteer_group 义工组别选择控件 VolunteerGroupField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -201,5 +203,8 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = OrgPickerField;
     }
+    if (item.component_props.tag === 'volunteer_group') {
+      item.component = VolunteerGroupField;
+    }
   })
 }

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-20 10:17:01
+ * @LastEditTime: 2024-06-24 16:30:22
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -433,6 +433,48 @@ onMounted(async () => {
   //     "placeholder": "请输入",
   //     "interaction_type": "h5edit"
   // })
+
+  // page_form.push({
+  //   data_type: "text",
+  //   default: "选项标题1",
+  //   direction: "vertical",
+  //   disabled: false,
+  //   field_id: 800207,
+  //   field_name: "field_62",
+  //   index: 61,
+  //   interaction_type: "h5edit",
+  //   label: "义工组别",
+  //   name: "radio_61",
+  //   note: "",
+  //   required: false,
+  //   tag: "volunteer_group",
+  //   options: [
+  //     {
+  //       checked: true,
+  //       desc_btn_name: "",
+  //       desc_text: "",
+  //       desc_type: "",
+  //       desc_url: "",
+  //       input_placeholder: "请输入补充信息",
+  //       input_required: false,
+  //       is_input: false,
+  //       title: "选项标题1",
+  //       value: "选项标题1"
+  //     },
+  //     {
+  //       checked: false,
+  //       desc_btn_name: "",
+  //       desc_text: "",
+  //       desc_type: "",
+  //       desc_url: "",
+  //       input_placeholder: "请输入补充信息",
+  //       input_required: false,
+  //       is_input: false,
+  //       title: "选项标题2",
+  //       value: "选项标题2"
+  //     }
+  //   ]
+  // })
   formData.value = formatData(page_form);
 
   // TAG：获取原来表单数据
@@ -734,6 +776,9 @@ const onActive = (item) => {
     });
     postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
   }
+  if (item?.type === "volunteer_group") { // 义工组别选择控件
+    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
+  }
   // 检查规则，会影响字段显示
   checkRules();
 };

@@ -3630,9 +3630,9 @@ uuid@^8.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-vant@^4.9.0:
+vant@^4.9.1:
   version "4.9.1"
-  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.9.1.tgz"
+  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.9.1.tgz#d042702b0d14da987e4b17e46e4297dabb5fae01"
   integrity sha512-p7iAKJyACYVwrmrkf3COmbuvzjHrFJ+FAmlyOWbxTS2ovkRs+tNKYjX2iibAl4XnHXBQD+qpX0ogUqE3jE7Isg==
   dependencies:
     "@vant/popperjs" "^1.3.0"