fix 依赖文件

@@ -7,9 +7,42 @@ export {}
 
 
 declare module '@vue/runtime-core' {
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
   export interface GlobalComponents {
+    AreaPickerField: typeof import('./src/components/AreaPickerField/index.vue')['default']
+    ButtonField: typeof import('./src/components/ButtonField/index.vue')['default']
+    CalendarField: typeof import('./src/components/CalendarField/index.vue')['default']
+    CheckboxField: typeof import('./src/components/CheckboxField/index.vue')['default']
+    ContactField: typeof import('./src/components/ContactField/index.vue')['default']
+    DatePickerField: typeof import('./src/components/DatePickerField/index.vue')['default']
+    DateTimePickerField: typeof import('./src/components/DateTimePickerField/index.vue')['default']
+    DesField: typeof import('./src/components/DesField/index.vue')['default']
+    DividerField: typeof import('./src/components/DividerField/index.vue')['default']
+    EmailField: typeof import('./src/components/EmailField/index.vue')['default']
+    FileUploaderField: typeof import('./src/components/FileUploaderField/index.vue')['default']
+    GenderField: typeof import('./src/components/GenderField/index.vue')['default']
+    IdentityField: typeof import('./src/components/IdentityField/index.vue')['default']
+    ImageUploaderField: typeof import('./src/components/ImageUploaderField/index.vue')['default']
+    MarqueeField: typeof import('./src/components/MarqueeField/index.vue')['default']
+    MultiRuleField: typeof import('./src/components/MultiRuleField/index.vue')['default']
+    NameField: typeof import('./src/components/NameField/index.vue')['default']
+    NoteField: typeof import('./src/components/NoteField/index.vue')['default']
+    NumberField: typeof import('./src/components/NumberField/index.vue')['default']
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
     NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
     NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
+    NutInput: typeof import('@nutui/nutui-taro')['Input']
+    NutNoticebar: typeof import('@nutui/nutui-taro')['Noticebar']
+    PhoneField: typeof import('./src/components/PhoneField/index.vue')['default']
+    PickerField: typeof import('./src/components/PickerField/index.vue')['default']
+    RadioField: typeof import('./src/components/RadioField/index.vue')['default']
+    RatePickerField: typeof import('./src/components/RatePickerField/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RouterView: typeof import('vue-router')['RouterView']
+    RuleField: typeof import('./src/components/RuleField/index.vue')['default']
+    SignField: typeof import('./src/components/SignField/index.vue')['default']
+    TableField: typeof import('./src/components/TableField/index.vue')['default']
+    Test: typeof import('./src/components/VideoField/test.vue')['default']
+    TextareaField: typeof import('./src/components/TextareaField/index.vue')['default']
+    TextField: typeof import('./src/components/TextField/index.vue')['default']
+    TimePickerField: typeof import('./src/components/TimePickerField/index.vue')['default']
+    VideoField: typeof import('./src/components/VideoField/index.vue')['default']
   }
   }
 }
 }

@@ -40,6 +40,7 @@
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/nutui-taro": "^4.0.0",
     "@nutui/nutui-taro": "^4.0.0",
     "@tarojs/components": "3.6.2",
     "@tarojs/components": "3.6.2",
+    "@tarojs/extend": "^3.6.2",
     "@tarojs/helper": "3.6.2",
     "@tarojs/helper": "3.6.2",
     "@tarojs/plugin-framework-vue3": "3.6.2",
     "@tarojs/plugin-framework-vue3": "3.6.2",
     "@tarojs/plugin-html": "3.6.2",
     "@tarojs/plugin-html": "3.6.2",

+<!--
+ * @Date: 2022-08-30 14:32:11
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-14 14:37:45
+ * @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 }}</div>
+    <van-field
+      name="ignore"
+      v-model="fieldValue"
+      is-link
+      readonly
+      :required="item.component_props.required"
+      placeholder="请选择省市区"
+      :rules="item.rules"
+      @click="showPicker = true"
+      :border="show_address ? true : false"
+    />
+    <van-field
+      v-if="show_address"
+      name="ignore"
+      v-model="address"
+      placeholder="请填写详细地址"
+      @blur="onBlur"
+      :rules="item.rules"
+      :border="false"
+    />
+    <!-- <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      地址不能为空
+    </div> -->
+    <van-divider />
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-area
+        v-model="item.city_code"
+        title=""
+        :area-list="areaList"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { areaList } from "@vant/area-data";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const emit = defineEmits(["active"]);
+const show_empty = ref(false);
+
+const show_address = ref(!props.item.component_props.no_street)
+
+const address = ref("");
+const city_code = ref("");
+const showPicker = ref(false);
+let fieldValue = ref("");
+
+const onConfirm = ({ selectedOptions }) => {
+  fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
+  city_code.value = selectedOptions[2]?.value;
+  props.item.value = {
+    key: "area_picker",
+    filed_name: props.item.key,
+    value: {
+      address: fieldValue.value + ' ' + address.value,
+      city_code: city_code.value
+    },
+  };
+  emit("active", props.item.value);
+  showPicker.value = false;
+};
+
+const onBlur = () => {
+  props.item.value = {
+    key: "area_picker",
+    filed_name: props.item.key,
+    value: {
+      address: fieldValue.value + ' ' + address.value,
+      city_code: city_code.value
+    },
+  };
+  emit("active", props.item.value);
+}
+
+// 校验模块
+const validAreaPicker = () => {
+  // 必填项
+  if (props.item.component_props.required && !fieldValue.value) {
+    show_empty.value = true;
+  } else if (props.item.component_props.required && !address.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validAreaPicker });
+</script>
+
+<style lang="less" scoped>
+.area-picker-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-22 14:23:49
+ * @FilePath: /data-table/src/components/DividerField/index.vue
+ * @Description: 按钮组件
+-->
+<template>
+  <div class="button-field-page">
+    <van-row justify="center" gutter="20">
+      <van-col v-for="item in props.item.component_props.config" key="index">
+        <van-button
+          @click="handleButton(item)"
+          :icon="iconType(item)"
+          :color="item.background ? item.background : backgroundColor"
+          >{{ item.text }}
+        </van-button>
+      </van-col>
+    </van-row>
+  </div>
+  <van-overlay :show="show" @click="onClose">
+    <div class="wrapper">
+      <div class="block">
+        <van-image width="100%" fit="cover" :src="qr_url" />
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+const backgroundColor = styleColor.baseColor;
+
+const iconType = (item) => {
+  if (item.type === "tel") return "phone-o";
+  if (item.type === "link") return "link-o";
+  if (item.type === "qr") return "qr";
+};
+
+const qr_url = ref("");
+const handleButton = ({ type, content }) => {
+  if (type === "tel") {
+    location.href = "tel://" + content;
+  }
+  if (type === "link") {
+    location.href = content;
+  }
+  if (type === "qr") {
+    show.value = true;
+    qr_url.value = content;
+  }
+};
+
+const onClose = () => {
+  show.value = false;
+};
+
+onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+.button-field-page {
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 10rem;
+  height: 10rem;
+  background-color: #fff;
+}
+</style>

+<!--
+ * @Date: 2022-09-14 11:00:01
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 10:06:27
+ * @FilePath: /data-table/src/components/CalendarField/index.vue
+ * @Description: 日历选择控件
+-->
+<template>
+  <div class="calendar-page">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-field
+      v-model="item.value"
+      is-link
+      readonly
+      :name="item.key"
+      :required="item.component_props.required"
+      :placeholder="item.component_props.placeholder"
+      :rules="item.rules"
+      @click="show = true"
+    />
+    <van-calendar
+      v-model:show="show"
+      :type="item.component_props.type"
+      :max-range="item.component_props.max_range"
+      :min-date="item.component_props.min_date"
+      :max-date="item.component_props.max_date"
+      :formatter="formatter"
+      first-day-of-week="1"
+      @month-show="onMonthShow"
+      @confirm="onConfirm"
+      allow-same-day
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+
+const formatDate = (date) =>
+  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+const onConfirm = (value) => {
+  console.warn(props.item.component_props.type);
+  show.value = false;
+  if (props.item.component_props.type === "range") {
+    // 日期区间
+    const [start, end] = value;
+    props.item.value = `${formatDate(start)} ~ ${formatDate(end)}`;
+  } else if (props.item.component_props.type === "multiple") {
+    // 多个日期
+    const arr = [];
+    value.forEach((element) => {
+      arr.push(formatDate(element));
+    });
+    props.item.value = arr.join(",");
+  } else {
+    props.item.value = formatDate(value);
+  }
+};
+
+// 每一格内容格式化
+const formatter = (day) => {
+  const month = day.date.getMonth() + 1;
+  const date = day.date.getDate();
+  const year = day.date.getFullYear();
+
+  if (month === 5) {
+    if (date === 1) {
+      day.topInfo = "劳动节";
+    } else if (date === 4) {
+      day.topInfo = "青年节";
+    } else if (date === 11) {
+      day.text = "今天";
+    }
+  }
+
+  if (month === 10) {
+    if (date === 1) {
+      day.topInfo = "国庆节";
+      day.type = "disabled";
+    }
+  }
+
+  if (day.type === "start") {
+    day.bottomInfo = "开始";
+  } else if (day.type === "end") {
+    day.bottomInfo = "结束";
+  }
+
+  return day;
+};
+
+const onMonthShow = ({ date, title }) => {
+  // console.warn(date);
+  // console.warn(title);
+  if (title === "2022年12月") {
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.calendar-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 10:06:43
+ * @FilePath: /data-table/src/components/CheckboxField/index.vue
+ * @Description: 多项选择控件
+-->
+<template>
+  <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 v-if="item.component_props.max" style="color: gray">
+        (最多可选数:&nbsp;{{ item.component_props.max }})
+      </span>
+    </div>
+    <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
+    <van-field :rules="item.rules" :border="false">
+      <template #input>
+        <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
+          :max="item.component_props.max" style="width: 100%">
+          <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper">
+            <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
+              :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
+            <van-field v-if="checkbox_value.includes(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-checkbox-group>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+// TAG: 自定义主题颜色
+const themeVars = {
+  radioColor: styleColor.baseColor,
+};
+onMounted(() => {
+  // 默认值为数组
+  props.item.value = props.item.component_props.default;
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+
+// TODO: 等待数据结构更新，看看怎么判断必填
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const validator = (val) => {
+  if (!val) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (!val) {
+    return "补充信息不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
+const emit = defineEmits(["active"]);
+const checkbox_value = ref(props.item.component_props.default);
+const affix_value = ref({});
+
+const onClick = (item) => {
+  item.checked = !item.checked;
+  handleEmit(item)
+}
+const onBlur = (item) => {
+  handleEmit(item)
+}
+const handleEmit = (item) => {
+  // 选中状态添加属性
+  if (item.checked) {
+    affix_value.value[item.value] = item.affix ? `${item.title}: ${item.affix}` : '';
+  } else {
+    // 为选中删除属性
+    delete affix_value.value[item.value]
+  }
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
+  emit("active", props.item.value);
+}
+onMounted(() => {
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
+  emit("active", props.item.value);
+})
+</script>
+
+<style lang="less" scoped>
+.checkbox-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+  }
+
+  .note {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    color: gray;
+    padding-bottom: 0.5rem;
+    white-space: pre-wrap;
+  }
+
+  .checkbox-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;
+  }
+}
+
+:deep(.van-checkbox) {
+  // border: 1px solid #eaeaea;
+  // border-radius: 0.25rem;
+  // padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-11-23 14:41:53
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-01-06 19:04:00
+ * @FilePath: /data-table/src/components/ContactField/index.vue
+ * @Description: 联系我们控件
+-->
+<template>
+  <div v-if="HideShow" class="contact-field-page">
+    <van-popover v-model:show="showPopover" placement="left">
+      <div class="contact-content">
+        <div class="text-tel">电话联系</div>
+        <div>
+          <a
+            :style="{ color: styleColor.baseColor }"
+            :href="`tel:${item.component_props.tel}`"
+          >
+            {{ item.component_props.tel }}
+          </a>
+        </div>
+        <div v-if="item.component_props.image_url">
+          <div class="text-qr_code">微信联系</div>
+          <van-image width="100" height="100" :src="item.component_props.image_url" />
+        </div>
+      </div>
+      <template #reference>
+        <div class="wrapper">
+          <van-icon name="phone-o" size="2rem" :color="styleColor.baseColor" />
+        </div>
+      </template>
+    </van-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const showPopover = ref(false);
+</script>
+
+<style lang="less" scoped>
+.contact-field-page {
+  position: fixed;
+  bottom: 10rem;
+  right: 0.5rem;
+  // height: 100%;
+  z-index: 9;
+  .wrapper {
+    background: white;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    text-align: center;
+    box-shadow: 0rem -0.17rem 0.67rem 0.08rem rgba(0, 0, 0, 0.05);
+    :deep(.van-icon) {
+      line-height: 1.5;
+    }
+  }
+}
+
+.contact-content {
+  padding: 1rem 0.85rem;
+  text-align: center;
+  .text-tel {
+    color: gray;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+  .text-qr_code {
+    color: gray;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-31 11:45:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 10:07:31
+ * @FilePath: /data-table/src/components/DatePickerField/index.vue
+ * @Description: 日期选择组件
+-->
+<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 }}
+    </div>
+    <van-field
+      v-model="item.value"
+      is-link
+      readonly
+      :name="item.key"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'"
+      :rules="rules"
+      @click="onTap"
+      :border="false"
+    />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-date-picker
+        v-model="currentDate"
+        title="日期选择"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :columns-type="columns_type"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  item: Object,
+});
+
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const showPicker = ref(false);
+const currentDate = ref([]);
+const readonly = props.item.component_props.readonly;
+
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  props.item.value = selectedValues.join("-");
+  showPicker.value = false;
+};
+
+const columns_type = ref([]);
+const date_format = props.item.component_props.data_dateformat; // YYYY-MM=年月，YYYY-MM-DD=年月日
+// 数字前面补位
+const formatZero = (num, len) => {
+  if (String(num).length > len) {
+    return num;
+  }
+  return (Array(len).join(0) + num).slice(-len)
+}
+
+const minDate = ref()
+const maxDate = ref()
+
+onMounted(() => {
+  // 根据默认值时间调整显示
+  currentDate.value = props.item.component_props.default ? props.item.component_props.default.split("-") : props.item.value.split("-");
+  let Year = '';
+  let Month = '';
+  let Day = '';
+  if (!props.item.component_props.default) {
+    Year = String(dayjs().year());
+    Month = formatZero(dayjs().month(), 2);
+    Day = formatZero(dayjs().date(), 2);
+  } else {
+    Year = currentDate.value[0];
+    Month = formatZero(currentDate.value[1], 2);
+    Day = formatZero(currentDate.value[2], 2);
+  }
+  switch (date_format) {
+    case "YYYY-MM":
+      columns_type.value = ['year', 'month']
+      // 设置默认值
+      currentDate.value = [Year, Month];
+      break;
+    case "YYYY-MM-DD":
+      columns_type.value = ['year', 'month', 'day']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      break;
+  }
+  // 设置默认最大最小日期
+  if (data_minvalue.length) {
+    const min = data_minvalue.split("-")
+    minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
+  }
+  if (data_maxvalue.length) {
+    const max = data_maxvalue.split("-")
+    maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
+  }
+});
+
+const required = props.item.component_props.required;
+const data_minvalue = props.item.component_props.data_minvalue;
+const data_maxvalue = props.item.component_props.data_maxvalue;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return false;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return "最小可选：" + data_minvalue;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return "最大可选：" + data_maxvalue;
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.date-picker-field {
+  margin: 1rem;
+  .label {
+    // 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);
+    line-height: var(--van-cell-line-height);
+  }
+}
+
+:deep(.van-cell--clickable) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  input {
+    color: #323233;
+  }
+}
+</style>

+<!--
+ * @Date: 2022-09-08 15:02:45
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-07 16:46:30
+ * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
+ * @Description: 日期时间选择器
+-->
+<template>
+  <div v-if="HideShow" class="datetime-picker">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-field
+      v-model="item.value"
+      is-link
+      readonly
+      :name="item.key"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
+      :rules="rules"
+      @click="onTap"
+      :border="false"
+    />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker-group
+        title="请选择日期时间"
+        :tabs="['选择日期', '选择时间']"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      >
+        <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
+        <van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
+      </van-picker-group>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { showToast } from "vant";
+import dayjs from "dayjs";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const showPicker = ref(false);
+const readonly = props.item.component_props.readonly;
+
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
+const currentDate = ref([]);
+const currentTime = ref([]);
+
+const onConfirm = () => {
+  props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
+  showPicker.value = false;
+};
+const onCancel = () => {
+  showPicker.value = false;
+};
+
+const columns_date_type = ref([]);
+const columns_time_type = ref([]);
+const date_format = props.item.component_props.data_dateformat;
+// 数字前面补位
+const formatZero = (num, len) => {
+  if (String(num).length > len) {
+    return num;
+  }
+  return (Array(len).join(0) + num).slice(-len)
+}
+
+const minDate = ref()
+const maxDate = ref()
+
+onMounted(() => {
+  // 根据默认值时间调整显示
+  const datetime = props.item.component_props.default ? props.item.component_props.default.split(" ") : props.item.value.split(" ");
+  currentDate.value = datetime[0]?.split("-");
+  currentTime.value = datetime[1]?.split(":");
+  // YYYY=年，YYYY-MM=年月，YYYY-MM-DD=年月日，YYYY-MM-DD HH=年月日时，YYYY-MM-DD HH:mm=年月日时分，YYYY-MM-DD HH:mm:ss=年月日时分秒
+  let Year = '';
+  let Month = '';
+  let Day = '';
+  if (!props.item.component_props.default) {
+    Year = String(dayjs().year());
+    Month = formatZero(dayjs().month(), 2);
+    Day = formatZero(dayjs().date(), 2);
+  } else {
+    Year = currentDate.value[0];
+    Month = formatZero(currentDate.value[1], 2);
+    Day = formatZero(currentDate.value[2], 2);
+  }
+  let Hour = ''
+  let Minute = ''
+  let Second = ''
+  if (!props.item.component_props.default) {
+    Hour = String(dayjs().hour());
+    Minute = String(dayjs().minute());
+    Second = String(dayjs().second());
+  } else {
+    Hour = currentTime.value[0];
+    Minute = currentTime.value[1];
+    Second = currentTime.value[2];
+  }
+  switch (date_format) {
+    case "YYYY":
+      columns_date_type.value = ['year']
+      // 设置默认值
+      currentDate.value = [Year];
+      break;
+    case "YYYY-MM":
+      columns_date_type.value = ['year', 'month']
+      // 设置默认值
+      currentDate.value = [Year, Month];
+      break;
+    case "YYYY-MM-DD":
+      columns_date_type.value = ['year', 'month', 'day']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      break;
+    case "YYYY-MM-DD HH":
+      columns_date_type.value = ['year', 'month', 'day']
+      columns_time_type.value = ['hour']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour];
+      break;
+    case "YYYY-MM-DD HH:mm":
+      columns_date_type.value = ['year', 'month', 'day']
+      columns_time_type.value = ['hour', 'minute']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour, Minute];
+      break;
+    case "YYYY-MM-DD HH:mm:ss":
+      columns_date_type.value = ['year', 'month', 'day']
+      columns_time_type.value = ['hour', 'minute', 'second']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour, Minute, Second];
+      break;
+  }
+  // 设置默认最大最小日期
+  if (data_minvalue.split(" ")[0].length) {
+    const min = data_minvalue.split(" ")[0].split("-")
+    minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
+  }
+  if (data_maxvalue.split(" ")[0].length) {
+    const max = data_maxvalue.split(" ")[0].split("-")
+    maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
+  }
+});
+
+const required = props.item.component_props.required;
+const data_minvalue = props.item.component_props.data_minvalue;
+const data_maxvalue = props.item.component_props.data_maxvalue;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return false;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return "最小可选：" + data_minvalue;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return "最大可选：" + data_maxvalue;
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.datetime-picker {
+  margin: 1rem;
+  .label {
+    // 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);
+    line-height: var(--van-cell-line-height);
+  }
+}
+
+:deep(.van-cell--clickable) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  input {
+    color: #323233;
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-12-08 14:52:48
+ * @FilePath: /data-table/src/components/DesField/index.vue
+ * @Description: 描述文本控件
+-->
+<template>
+  <div class="des-field-page">
+    <div class="label">{{ item.component_props.label }}</div>
+    <van-field
+      v-model="item.component_props.desc"
+      name="ignore"
+      :readonly="true"
+      :border="false"
+    />
+  </div>
+  <van-divider />
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+</script>
+
+<style lang="less" scoped>
+.des-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-22 14:23:49
+ * @FilePath: /data-table/src/components/DividerField/index.vue
+ * @Description: 分隔线组件
+-->
+<template>
+  <div class="divider-field-page">
+    <van-divider :style="styleObj">
+      {{ item.component_props.content }}
+    </van-divider>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const styleObj = ref({});
+onMounted(() => {
+  styleObj.value = {
+    color: props.item.component_props.color,
+    borderColor: props.item.component_props.color,
+    padding: props.item.component_props.padding,
+  };
+});
+</script>
+
+<style lang="less" scoped>
+.divider-field-page {
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-01-18 15:58:11
+ * @FilePath: /data-table/src/components/EmailField/index.vue
+ * @Description: 邮箱输入框
+-->
+<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 }}
+    </div>
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      type="email"
+      :placeholder="item.component_props.placeholder"
+      :rules="rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.disabled"
+      :readonly="item.component_props.readonly"
+      clearable
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const required = props.item.component_props.required;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else if (val && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  } else if (val && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)) { // 小于最小值
+    return "请输入正确邮箱";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.text-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-31 16:16:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 11:17:21
+ * @FilePath: /data-table/src/components/FileUploaderField/index.vue
+ * @Description: 文件上传控件
+-->
+<template>
+  <div v-if="HideShow" class="file-uploader-field">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <div
+      v-if="item.component_props.note"
+      v-html="item.component_props.note"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
+    />
+    <div>
+      <p
+        v-for="(file, index) in fileList"
+        :key="index"
+        style="padding-left: 1rem; margin-bottom: 0.5rem"
+      >
+        <p style="font-size: 1rem; word-break: break-all; margin-right: 0.75rem;">
+          <span>{{ index + 1 }}.&nbsp;{{ file.filename }}&nbsp;&nbsp;{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
+          &nbsp;&nbsp;
+          <span style="color: #e32525; font-size: 0.85rem" @click="beforeDelete(file)">移除</span>
+        </p>
+      </p>
+    </div>
+    <div style="padding: 1rem">
+      <van-uploader
+        :name="item.name"
+        upload-icon="add"
+        accept="*"
+        :before-read="beforeRead"
+        :after-read="afterRead"
+        :before-delete="beforeDelete"
+        :multiple="item.component_props.max_size > 1"
+      >
+        <van-button icon="plus" type="primary">上传文件</van-button>
+      </van-uploader>
+    </div>
+    <!-- <div class="type-text">上传格式：{{ type_text }}</div> -->
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      文件上传不能为空
+    </div>
+    <van-divider />
+  </div>
+
+  <van-overlay :show="loading">
+    <div class="wrapper" @click.stop>
+      <van-loading vertical color="#FFFFFF">上传中...</van-loading>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+/**
+ * 文件上传
+ * @param name[String] 组件名称
+ * @param file_type[Array] 文件上传类型
+ * @param multiple[Boolean] 文件多选
+ */
+import { showSuccessToast, showFailToast, showToast } from "vant";
+import _ from "lodash";
+import { v4 as uuidv4 } from "uuid";
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
+import BMF from "browser-md5-file";
+import { useRoute } from "vue-router";
+import axios from "axios";
+import { getEtag } from "@/utils/qetag.js"; // 生成hash值
+
+const $route = useRoute();
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const emit = defineEmits(["active"]);
+const show_empty = ref(false);
+
+// 文件类型中文页面显示
+const type_text = computed(() => {
+  return props.item.component_props.file_type;
+});
+// 上传文件集合
+const fileList = ref([
+  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
+  // Uploader 根据文件后缀来判断是否为文件文件
+  // 如果文件 URL 中不包含类型信息，可以添加 isImage 标记来声明
+  // { url: 'https://cloud-image', isImage: true },
+]);
+
+// 上传前置处理
+const beforeRead = (file) => {
+  // TODO: 需要file_type集合
+  // 类型限制
+  // const file_types = _.map(
+  //   props.item.component_props.file_type.split("/"),
+  //   (item) => `video/${item}`
+  // );
+  let flag = true;
+  if (file.length + 1 > props.item.component_props.max_count) {
+    // 数量限制
+    flag = false;
+    showToast(`最大上传数量为${props.item.component_props.max_count}个`);
+  }
+  if (fileList.value.length + 1 > props.item.component_props.max_count) {
+    // 数量限制
+    flag = false;
+    showToast(`最大上传数量为${props.item.component_props.max_count}个`);
+  }
+  if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
+    // 体积限制
+    flag = false;
+    showToast(
+      `最大文件体积为${props.item.component_props.max_size}MB`
+    );
+  }
+  // if (_.isArray(file)) {
+  //   // 多张文件
+  //   const types = _.difference(_.uniq(_.map(file, (item) => item.type)), file_types); // 数组返回不能上传的类型
+  //   if (types.length) {
+  //     flag = false;
+  //     showFailToast("请上传指定格式文件");
+  //   }
+  // } else {
+  //   if (!_.includes(file_types, file.type)) {
+  //     showFailToast("请上传指定格式文件");
+  //     flag = false;
+  //   }
+  // }
+  return flag;
+};
+
+// 文件读取完成后的回调函数
+const afterRead = async (files) => {
+  if (Array.isArray(files)) {
+    // 多张文件上传files是一个数组
+    muliUpload(files);
+  } else {
+    const imgUrl = await handleUpload(files);
+    // 上传失败提示
+    if (!imgUrl.src) {
+      files.status = "failed";
+      files.message = "上传失败";
+      loading.value = false;
+    } else {
+      files.status = "";
+      files.message = "";
+      fileList.value.push({
+        // meta_id: imgUrl.meta_id,
+        name: files.file.name,
+        url: imgUrl.src,
+        size: files.file.size
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+  // 过滤非包含URL的文件
+  fileList.value = fileList.value.filter((item) => {
+    if (item.url) return item;
+  });
+  props.item.value = {
+    key: "file_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
+  };
+  show_empty.value = false;
+  // 完整数据回调到表单上
+  emit("active", props.item.value);
+};
+
+// 文件删除前的回调函数
+const beforeDelete = (files) => {
+  fileList.value = fileList.value.filter((item) => {
+    if (item.url !== files.url) return item;
+  });
+  props.item.value = {
+    key: "file_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
+  };
+  // 完整数据回调到表单上
+  emit("active", props.item.value);
+};
+
+/********** 上传七牛云获取文件地址 ***********/
+const loading = ref(false);
+const formCode = $route.query.code; // 表单code
+
+// 上传文件返回文件URL
+const handleUpload = async (files) => {
+  loading.value = true;
+  // 获取HASH值
+  // const hash = getEtag(files.content);
+  return new Promise((resolve, reject) => {
+    // 获取MD5值
+    const bmf = new BMF();
+    bmf.md5(
+      files.file,
+      async (err, md5) => {
+        if (err) {
+          console.log(err);
+          reject(err);
+        }
+        // 获取七牛token
+        const filename = files.file.name; // 真实文件名
+        const getToken = await qiniuTokenAPI({
+          name: filename,
+          hash: md5,
+        });
+        // 文件上传七牛云
+        let imgUrl = "";
+        // 第一次上传
+        if (getToken.token) {
+          files.status = "uploading";
+          files.message = "上传中...";
+          // 返回数据库真实文件地址
+          imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+        }
+        // 重复上传
+        if (getToken.data) {
+          imgUrl = getToken.data;
+        }
+        resolve(imgUrl);
+      },
+      (process) => {
+        //计算进度
+      }
+    );
+  });
+};
+
+// 多选文件上传遍历
+var muliUpload = async (files) => {
+  for (let item of files) {
+    const res = await handleUpload(item);
+    // 上传失败提示
+    if (!res.src) {
+      item.status = "failed";
+      item.message = "上传失败";
+      loading.value = false;
+    } else {
+      item.status = "";
+      item.message = "";
+      fileList.value.push({
+        // meta_id: res.meta_id,
+        name: item.file.name,
+        url: res.src,
+        size: files.file.size
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+};
+
+// 生成数据库真实文件地址
+const uploadQiniu = async (file, token, name, md5) => {
+  let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
+  // let affix = uuidv4();
+  let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
+  let formData = new FormData();
+  formData.append("file", file); // 通过append向form对象添加数据
+  formData.append("token", token);
+  formData.append("key", fileName);
+  let config = {
+    headers: { "Content-Type": "multipart/form-data" },
+  };
+  // 自拍文件上传七牛服务器
+  let qiniuUploadUrl;
+  if (window.location.protocol === 'https:') {
+      qiniuUploadUrl = 'https://up.qbox.me';
+  } else {
+      qiniuUploadUrl = 'http://upload.qiniu.com';
+  }
+  const { filekey, hash, image_info } = await qiniuUploadAPI(
+    qiniuUploadUrl,
+    formData,
+    config
+  );
+  if (filekey) {
+    // 保存文件
+    const { data } = await saveFileAPI({
+      name,
+      filekey,
+      hash: md5,
+      // format: image_info.format,
+      // height: image_info.height,
+      // width: image_info.width,
+    });
+    return data;
+  }
+};
+
+/****************** END *******************/
+
+// 校验模块
+const validFileUploader = () => {
+  // 必填项 未上传文件
+  if (props.item.component_props.required && !fileList.value.length) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validFileUploader });
+</script>
+
+<style lang="less" scoped>
+.file-uploader-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+
+  .type-text {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    padding-bottom: 1rem;
+    color: gray;
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-01 11:18:31
+ * @FilePath: /data-table/src/components/GenderField/index.vue
+ * @Description: 性别选择控件
+-->
+<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 }}
+    </div>
+    <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
+    <van-field
+      :name="item.name"
+      :rules="item.rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.disabled"
+    >
+      <template #input>
+        <van-radio-group v-model="item.value" direction="horizontal">
+          <van-radio name="男" :checked-color="themeVars.radioColor">男</van-radio>
+          <van-radio name="女" :checked-color="themeVars.radioColor">女</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+
+// TAG: 自定义主题颜色
+const themeVars = {
+  radioColor: styleColor.baseColor,
+};
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+})
+</script>
+
+<style lang="less" scoped>
+.gender-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;
+  }
+}
+</style>

+<!--
+ * @Date: 2022-09-14 14:44:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-01 15:07:15
+ * @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 }}
+    </div>
+    <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> -->
+    <van-field
+      v-model="item.value"
+      :id="item.name"
+      :name="item.name"
+      :placeholder="item.component_props.placeholder"
+      :rules="rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      readonly
+      @touchstart.stop="openKeyboard($event)"
+      :border="false"
+    >
+    </van-field>
+    <!-- <div v-if="gender" class="gender"><span>性别：</span>{{ gender }}</div> -->
+    <van-number-keyboard
+      v-model="item.value"
+      :show="show"
+      extra-key="X"
+      close-button-text="完成"
+      @blur="blurKeyboard()"
+      @input="onInput"
+      @delete="onDelete"
+      safe-area-inset-bottom
+    />
+  </div>
+</template>
+
+<script setup>
+import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
+import { showSuccessToast, showFailToast } from "vant";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const show = ref(false);
+let content = "";
+
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
+      show.value = false;
+      document.getElementById("app").style.paddingBottom = "0";
+    }
+  }
+);
+const readonly = props.item.component_props.readonly;
+const openKeyboard = (e) => {
+  if (readonly) return false; // 如果为只读，不能设置
+  // // 键盘上移动
+  // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
+  // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
+  // let scroll_height = "";
+  // console.warn(target_top);
+  // if (target_top < 250) {
+  //   document.getElementById("app").style.paddingBottom = "250px";
+  //   window.scrollTo(0, $("#app").height());
+  // } else {
+  //   // 向上滚动位置
+  //   document.documentElement.scrollTop = (target_top > 250 ? 0 : target_top) + 250;
+  // }
+  // 键盘上移动
+  const target_to_view_height =
+    window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
+  const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
+  let scroll_height = "";
+  if (target_to_view_height <= 250) {
+    document.getElementById("app").style.paddingBottom = "250px";
+    // 向上滚动位置
+    document.documentElement.scrollTop = $(e.target).offset().top - 244;
+  }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    show.value = true;
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
+};
+const blurKeyboard = () => {
+  show.value = false;
+  document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
+  // 键盘失焦检查输入和添加性别显示
+  const input_val = props.item.value;
+  if (required && !input_val) {
+    showFailToast("身份证号码不能为空");
+  } else if (input_val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(input_val)) {
+    showFailToast("请输入正确身份证号码");
+  } else {
+    // gender.value = getGenderByIdNumber(input_val)
+  }
+};
+
+// 校验函数返回 true 表示校验通过，false 表示不通过
+// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+const required = props.item.component_props.required;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "身份证号码不能为空";
+  } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+    return "请输入正确身份证号码";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
+const onInput = (value) => {};
+const onDelete = () => {};
+
+const gender = ref('');
+
+/**
+ * 按身份证号码获取性别
+ * @idNumber 身份证号码
+ * @return 男：male；女：female；异常（身份证号码为空或长度、格式错误）：undefined
+ */
+const getGenderByIdNumber = (idNumber) => {
+  if (idNumber) {
+    let genderCode; // 性别代码
+    if (idNumber.length == 18) { // 二代身份证号码长度为18位（第17位为性别代码）
+      genderCode = idNumber.charAt(16);
+    } else if (idNumber.length == 15) { // 一代身份证号码长度为15位（第15位为性别代码）
+      genderCode = idNumber.charAt(14);
+    }
+    if (genderCode && !isNaN(genderCode)) {
+      // 两代身份证号码的性别代码都为男奇女偶
+      if (parseInt(genderCode) % 2 == 0) {
+        return '女';
+      }
+      return '男';
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.identity-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+  .gender {
+    padding: 0 1rem 0 1rem;
+    font-size: 0.9rem;
+    span {
+      font-weight: bold;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-31 16:16:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-01-17 16:44:32
+ * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
+ * @Description: 图片上传控件
+-->
+<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 }}
+    </div>
+    <div
+      v-if="item.component_props.note"
+      v-html="item.component_props.note"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre;"
+    />
+    <div style="padding: 1rem">
+      <van-uploader
+        :name="item.name"
+        upload-icon="add"
+        :before-read="beforeRead"
+        :after-read="afterRead"
+        :before-delete="beforeDelete"
+        v-model="fileList"
+        :multiple="item.component_props.max_size > 1"
+      />
+    </div>
+    <div class="type-text">上传类型:&nbsp;{{ type_text }}</div>
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      图片上传不能为空
+    </div>
+    <van-divider />
+  </div>
+
+  <van-overlay :show="loading">
+    <div class="wrapper" @click.stop>
+      <van-loading vertical color="#FFFFFF">上传中...</van-loading>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+/**
+ * 图片上传
+ * @param name[String] 组件名称
+ * @param image_type[Array] 图片上传类型
+ * @param multiple[Boolean] 图片多选
+ */
+import { showSuccessToast, showFailToast, showToast } from "vant";
+import _ from "lodash";
+import { v4 as uuidv4 } from "uuid";
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
+import BMF from "browser-md5-file";
+import { useRoute } from "vue-router";
+import axios from "axios";
+import { getEtag } from "@/utils/qetag.js"; // 生成hash值
+
+const $route = useRoute();
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const emit = defineEmits(["active"]);
+const show_empty = ref(false);
+
+// 固定类型限制
+const imageTypes = "jpg/jpeg/png/gif/bmp/psd/tif";
+
+// 文件类型中文页面显示
+const type_text = computed(() => {
+  // return props.item.component_props.image_type;
+  return imageTypes;
+});
+// 上传图片集合
+const fileList = ref([
+  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
+  // Uploader 根据文件后缀来判断是否为图片文件
+  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
+  // { url: 'https://cloud-image', isImage: true },
+]);
+
+// 上传前置处理
+const beforeRead = (file) => {
+  // 类型限制
+  // const image_types = _.map(
+  //   props.item.component_props.image_type.split("/"),
+  //   (item) => `image/${item}`
+  // );
+  const image_types = _.map(imageTypes.split("/"), (item) => `image/${item}`);
+
+  let flag = true;
+  if (_.isArray(file)) {
+    // 多张图片
+    const types = _.difference(_.uniq(_.map(file, (item) => item.type)), image_types); // 数组返回不能上传的类型
+    if (types.length) {
+      flag = false;
+      showFailToast("请上传指定格式图片");
+    }
+    if (fileList.value.length + file.length > props.item.component_props.max_count) {
+      // 数量限制
+      flag = false;
+      showToast(`最大上传数量为${props.item.component_props.max_count}张`);
+    }
+  } else {
+    if (!_.includes(image_types, file.type)) {
+      showFailToast("请上传指定格式图片");
+      flag = false;
+    }
+    if (fileList.value.length + 1 > props.item.component_props.max_count) {
+      // 数量限制
+      flag = false;
+      showToast(`最大上传数量为${props.item.component_props.max_count}张`);
+    }
+    if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
+      // 体积限制
+      flag = false;
+      showToast(
+        `最大文件体积为${props.item.component_props.max_size}MB`
+      );
+    }
+  }
+  return flag;
+};
+
+// 文件读取完成后的回调函数
+const afterRead = async (files) => {
+  if (Array.isArray(files)) {
+    // 多张图片上传files是一个数组
+    muliUpload(files);
+  } else {
+    const imgUrl = await handleUpload(files);
+    // 上传失败提示
+    if (!imgUrl.src) {
+      files.status = "failed";
+      files.message = "上传失败";
+      loading.value = false;
+    } else {
+      files.status = "";
+      files.message = "";
+      fileList.value.push({
+        // meta_id: imgUrl.meta_id,
+        name: files.file.name,
+        url: imgUrl.src,
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+  // 过滤非包含URL的图片
+  fileList.value = fileList.value.filter((item) => {
+    if (item.url) return item;
+  });
+  props.item.value = {
+    key: "image_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
+  };
+  show_empty.value = false;
+  // 完整数据回调到表单上
+  emit("active", props.item.value);
+};
+
+// 文件删除前的回调函数
+const beforeDelete = (files) => {
+  fileList.value = fileList.value.filter((item) => {
+    if (item.url !== files.url) return item;
+  });
+  props.item.value = {
+    key: "image_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
+  };
+  // 完整数据回调到表单上
+  emit("active", props.item.value);
+};
+
+/********** 上传七牛云获取图片地址 ***********/
+const loading = ref(false);
+const formCode = $route.query.code; // 表单code
+// const uuid = () => {
+//   let s = [];
+//   let hexDigits = "0123456789abcdef";
+//   for (var i = 0; i < 36; i++) {
+//     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+//   }
+//   s[14] = "4";
+//   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+//   s[8] = s[13] = s[18] = s[23] = "-";
+
+//   var uuid = s.join("");
+//   return uuid;
+// };
+
+// 上传图片返回图片URL
+const handleUpload = async (files) => {
+  loading.value = true;
+  // 获取HASH值
+  // const hash = getEtag(files.content);
+  return new Promise((resolve, reject) => {
+    // 获取MD5值
+    const bmf = new BMF();
+    bmf.md5(
+      files.file,
+      async (err, md5) => {
+        if (err) {
+          console.log(err);
+          reject(err);
+        }
+        // 获取七牛token
+        const filename = files.file.name; // 真实文件名
+        const getToken = await qiniuTokenAPI({
+          name: filename,
+          hash: md5,
+        });
+        // 文件上传七牛云
+        let imgUrl = "";
+        // 第一次上传
+        if (getToken.token) {
+          files.status = "uploading";
+          files.message = "上传中...";
+          // 返回数据库真实图片地址
+          imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+        }
+        // 重复上传
+        if (getToken.data) {
+          imgUrl = getToken.data;
+        }
+        resolve(imgUrl);
+      },
+      (process) => {
+        //计算进度
+      }
+    );
+  });
+};
+
+// 多选图片上传遍历
+var muliUpload = async (files) => {
+  for (let item of files) {
+    const res = await handleUpload(item);
+    // 上传失败提示
+    if (!res.src) {
+      item.status = "failed";
+      item.message = "上传失败";
+      loading.value = false;
+    } else {
+      item.status = "";
+      item.message = "";
+      fileList.value.push({
+        // meta_id: res.meta_id,
+        name: item.file.name,
+        url: res.src,
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+};
+
+
+
+const getType = (file, name) => {
+  var index1 = name.lastIndexOf(".");
+  var index2 = file.length;
+  var type = file.substring(index1, index2).toUpperCase();
+  return type;
+}
+
+// 生成数据库真实图片地址
+const uploadQiniu = async (file, token, name, md5) => {
+  let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
+  // let affix = uuidv4();
+  let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
+  let formData = new FormData();
+  formData.append("file", file); // 通过append向form对象添加数据
+  formData.append("token", token);
+  formData.append("key", fileName);
+  let config = {
+    headers: { "Content-Type": "multipart/form-data" },
+  };
+  // 自拍图片上传七牛服务器
+  let qiniuUploadUrl;
+  if (window.location.protocol === 'https:') {
+      qiniuUploadUrl = 'https://up.qbox.me';
+  } else {
+      qiniuUploadUrl = 'http://upload.qiniu.com';
+  }
+  const { filekey, hash, image_info } = await qiniuUploadAPI(
+    qiniuUploadUrl,
+    formData,
+    config
+  );
+  if (filekey) {
+    // 保存图片
+    const { data } = await saveFileAPI({
+      name,
+      filekey,
+      hash: md5,
+      // format: image_info.format,
+      height: image_info.height,
+      width: image_info.width,
+    });
+    return data;
+  }
+};
+
+/****************** END *******************/
+
+// 校验模块
+const validImageUploader = () => {
+  // 必填项 未上传图片
+  if (props.item.component_props.required && !fileList.value.length) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validImageUploader });
+</script>
+
+<style lang="less" scoped>
+.image-uploader-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+
+  .type-text {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    padding-bottom: 1rem;
+    color: gray;
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-23 10:49:41
+ * @FilePath: /data-table/src/components/MarqueeField/index.vue
+ * @Description: 跑马灯控件
+-->
+<template>
+  <div class="marquee-field-page">
+    <div class="title">- {{ item.component_props.title }} -</div>
+    <div class="scroll-wrap">
+      <div class="scroll-content" :style="{ top }">
+        <p v-for="x in marqueeList">
+          <van-row>
+            <van-col span="8">{{ x.name }}</van-col>
+            <van-col span="8">{{ x.tel }}</van-col>
+            <van-col span="8">{{ x.time }}</van-col>
+          </van-row>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+onMounted(() => {
+  getList();
+  ScrollUp();
+});
+
+const top = computed(() => {
+  return -activeIndex.value * 30 + "px";
+});
+
+const activeIndex = ref(0);
+const intNum = ref(0);
+const marqueeList = ref([]);
+// 查询名单
+// TODO: 数据从哪里来？
+const getList = () => {
+  const arr = [];
+  for (let index = 0; index < 100; index++) {
+    arr.push({
+      name: `abc${index}`,
+      tel: "137***3456",
+      time: `${index}分钟前`,
+    });
+  }
+  console.warn(arr);
+  marqueeList.value = arr;
+};
+//滚动播报方法
+const ScrollUp = () => {
+  intNum.value = setInterval(() => {
+    if (activeIndex.value < marqueeList.value.length) {
+      activeIndex.value += 1;
+    } else {
+      activeIndex.value = 0;
+    }
+  }, 1000);
+};
+</script>
+
+<style lang="less" scoped>
+.marquee-field-page {
+  padding-bottom: 1rem;
+  .title {
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    font-size: 1rem;
+    padding: 1rem 0;
+  }
+  .scroll-wrap {
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    .scroll-content {
+      position: relative;
+      transition: top 0.5s;
+      height: 10rem;
+    }
+    .scroll-content p {
+      /* 每行信息间隔高度 */
+      line-height: 2;
+      font-size: 1rem;
+      text-align: center;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 14:41:52
+ * @FilePath: /data-table/src/components/MultiRuleField/index.vue
+ * @Description: 多选规则确认控件
+-->
+<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>
+    </div>
+    <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
+      <template #input>
+        <van-checkbox-group v-model="item.value" style="width: 100%">
+          <template v-for="(rule, idx) in item.component_props.options" :key="idx">
+            <div class="multi-rule-field-box">
+              <van-checkbox
+                :name="rule.value"
+                shape="square"
+                :checked-color="themeVars.radioColor"
+                >{{ rule.title }}</van-checkbox
+              >
+              <div class="van-multi-ellipsis--l3 rule-desc-text">{{ rule.desc_text }}</div>
+              <div v-if="rule.desc_type === 'text'" class="rule-box" @click="showRule(rule)">
+                {{ rule.desc_btn_name }}&nbsp;>>
+              </div>
+              <div v-if="rule.desc_type === 'url'" class="rule-box" @click="showUrl(rule)">
+                {{ rule.desc_btn_name }}&nbsp;<van-icon name="link-o" />
+              </div>
+            </div>
+          </template>
+        </van-checkbox-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,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+// TAG: 自定义主题颜色
+const themeVars = {
+  radioColor: styleColor.baseColor,
+};
+onMounted(() => {
+  $(".rule-box").css("color", themeVars.radioColor);
+});
+const show = ref(false);
+const checked = ref([]);
+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("");
+const required = props.item.component_props.required;
+const min_count = props.item.component_props.min_count;
+const max_count = props.item.component_props.max_count;
+const validator = (val) => {
+  if (required && !val.length) {
+    return false;
+  } else if (min_count && props.item.value.length < min_count) {
+    return false;
+  } else if (max_count && props.item.value.length > max_count) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val.length) {
+    return "选择项不能为空";
+  } else if (min_count && props.item.value.length < min_count) {
+    return `最少选择${min_count}项`;
+  } else if (max_count && props.item.value.length > max_count) {
+    return `最多选择${max_count}项`;
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.multi-rule-field-page {
+  .label {
+    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;
+    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;
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-01 11:21:00
+ * @FilePath: /data-table/src/components/NameField/index.vue
+ * @Description: 姓名输入框
+-->
+<template>
+  <div v-if="HideShow" class="name-field-page">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      :type="item.type"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
+      :rules="item.rules"
+      :required="item.required"
+      :readonly="item.component_props.readonly"
+      :disabled="item.component_props.disabled"
+      :input-align="item.component_props.align"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+})
+</script>
+
+<style lang="less" scoped>
+.name-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-08 15:28:33
+ * @FilePath: /data-table/src/components/NoteField/index.vue
+ * @Description: 富文本组件
+-->
+<template>
+  <div v-if="HideShow" class="note-field-page">
+    <div class="label">
+      <span v-if="item.component_props.required" class="required">&nbsp;*</span>
+      <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
+    </div>
+    <div class="html" style="padding: 0.5rem 1rem 0 1rem;" v-html="item.component_props.note"></div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+</script>
+
+<style lang="less">
+.note-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span.required {
+      color: red;
+    }
+  }
+  .html {
+    img {
+      width: 100%;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-09-14 14:44:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-09 15:54:02
+ * @FilePath: /data-table/src/components/NumberField/index.vue
+ * @Description: 数字输入框
+-->
+<template>
+  <div v-if="HideShow" class="number-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"
+      v-html="item.component_props.note"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
+    />
+    <van-field
+      v-model="item.value"
+      :id="item.name"
+      :name="item.name"
+      :placeholder="item.component_props.placeholder"
+      :rules="rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      readonly
+      @touchstart.stop="showKeyboard($event)"
+      :border="false"
+    >
+    </van-field>
+    <van-number-keyboard
+      v-model="item.value"
+      :show="showInteger"
+      @blur="blurKeyboard()"
+      @input="onInput"
+      @delete="onDelete"
+      safe-area-inset-bottom
+    />
+    <van-number-keyboard
+      v-model="item.value"
+      :show="showDecimal"
+      theme="custom"
+      extra-key="."
+      close-button-text="完成"
+      @blur="blurKeyboard()"
+      @input="onInput"
+      @delete="onDelete"
+      safe-area-inset-bottom
+    />
+  </div>
+</template>
+
+<script setup>
+import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+let content = "";
+
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
+      if (props.item.component_props.max_fraction_count === 0) {
+        // 显示整数键盘
+        showInteger.value = false;
+      } else {
+        // 显示小数键盘
+        showDecimal.value = false;
+      }
+      document.getElementById("app").style.paddingBottom = "0";
+    }
+  }
+);
+const readonly = props.item.component_props.readonly;
+const showKeyboard = (e) => {
+  if (readonly) return false; // 如果为只读，不能设置
+  // 键盘上移动
+  const target_to_view_height =
+    window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
+  const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
+  let scroll_height = "";
+  if (target_to_view_height <= 250) {
+    document.getElementById("app").style.paddingBottom = "250px";
+    // 向上滚动位置
+    document.documentElement.scrollTop = $(e.target).offset().top - 244;
+  }
+  // if (target_top < 250) {
+  //   window.scrollTo(0, $("#app").height());
+  // } else {
+  //   // 向上滚动位置
+  //   document.documentElement.scrollTop = (target_top > 500 ? 0 : target_top) + 250;
+  // }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    if (props.item.component_props.max_fraction_count === 0) {
+      // 显示整数键盘
+      showInteger.value = true;
+    } else {
+      // 显示小数键盘
+      showDecimal.value = true;
+    }
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
+};
+const blurKeyboard = () => {
+  if (props.item.component_props.max_fraction_count === 0) {
+    // 显示整数键盘
+    showInteger.value = false;
+  } else {
+    // 显示小数键盘
+    showDecimal.value = false;
+  }
+  document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
+};
+
+const showDecimal = ref(false);
+const showInteger = ref(false);
+
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const required = props.item.component_props.required;
+const min = props.item.component_props.min;
+const max = props.item.component_props.max;
+const max_count = props.item.component_props.max_fraction_count; // 保留小数个数 null=不限，0=没有小数，大于0=最多只能输入的小数个数
+const reg = new RegExp("^([0-9]+)(\\.(\\d){" + max_count +"," + max_count +"})$", "g");
+const validator = (val) => {
+  if (required && !val) { // 必填
+    return false;
+  } else if (val && min && (val < min)) { // 小于最小值
+    return false;
+  } else if (val && max && (val > max)) { // 大于最大值
+    return false;
+  } else if (val && max_count && !reg.test(val)) { // 不符合保留小数个数
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  } else if (val && min && (val < min)) { // 小于最小值
+    return "最小值为" + min;
+  } else if (val && max && (val > max)) { // 大于最大值
+    return "最大值为" + max;
+  } else if (val && max_count && !reg.test(val)) { // 不符合保留小数个数
+    return "保留小数点后" + max_count + "位";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
+const onInput = (value) => {};
+const onDelete = () => {};
+</script>
+
+<style lang="less" scoped>
+.number-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  input {
+    color: #323233;
+  }
+}
+
+:deep(.van-number-keyboard__title) {
+  font-size: 1.05rem;
+}
+</style>

+<!--
+ * @Date: 2022-09-02 10:46:03
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-20 07:45:28
+ * @FilePath: /data-table/src/components/PhoneField/index.vue
+ * @Description: 手机输入框
+-->
+<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 }}
+    </div>
+    <!-- <van-field
+      :id="item.name"
+      v-model="item.value"
+      :name="item.name"
+      type="digit"
+      maxlength="11"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入手机号码'"
+      :rules="rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      :readonly="readonly"
+      @touchstart.stop="openKeyboard($event)"
+      :border="false"
+    > -->
+    <van-field
+      :id="item.name"
+      v-model="item.value"
+      :name="item.name"
+      type="digit"
+      maxlength="11"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入手机号码'"
+      :rules="rules"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      :border="false"
+    >
+    </van-field>
+    <van-field
+      v-if="is_sms"
+      name="ignore"
+      v-model="sms"
+      center
+      clearable
+      label=""
+      placeholder="请输入短信验证码"
+      :border="false"
+    >
+      <template #button>
+        <van-button size="small" type="primary">发送验证码</van-button>
+      </template>
+    </van-field>
+    <van-number-keyboard
+      v-model="item.value"
+      :show="show"
+      :maxlength="11"
+      @blur="blurKeyboard()"
+      safe-area-inset-bottom
+    />
+  </div>
+</template>
+
+<script setup>
+import { wxInfo } from "@/utils/tools";
+import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+// web端判断
+const readonly = computed(() => wxInfo().isMobile);
+// 打开短信验证模式
+const is_sms = ref(false);
+
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const validator = (val) => {
+  if (props.item.component_props.required && !val) {
+    return false;
+  } else if (val && !/1\d{10}/.test(val)) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (props.item.component_props.required && !val) {
+    return "手机号码不能为空";
+  } else if (val && !/1\d{10}/.test(val)) {
+    return "请输入正确手机号码";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
+const show = ref(false);
+let content = "";
+
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
+      show.value = false;
+      document.getElementById("app").style.paddingBottom = "0";
+    }
+  }
+);
+
+const openKeyboard = (e) => {
+  if (props.item.component_props.readonly) return false; // 如果为只读，不能设置
+  // 键盘上移动
+  const target_to_view_height =
+    window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
+  const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
+  let scroll_height = "";
+  if (target_to_view_height <= 250) {
+    document.getElementById("app").style.paddingBottom = "250px";
+    // 向上滚动位置
+    document.documentElement.scrollTop = $(e.target).offset().top - 244;
+  }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    show.value = true;
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
+};
+const blurKeyboard = () => {
+  show.value = false;
+  document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
+};
+</script>
+
+<style lang="less" scoped>
+.phone-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+
+  :deep(.van-field__body) {
+    border: 1px solid #eaeaea;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    input {
+      color: #323233;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-30 13:46:51
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-03 21:11:24
+ * @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 }}
+    </div>
+    <van-field
+      v-model="picker_value"
+      is-link
+      readonly
+      :name="item.key"
+      :required="item.component_props.required"
+      :placeholder="item.component_props.placeholder"
+      :rules="item.rules"
+      @click="showPicker = true"
+      :border="false"
+    />
+    <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker
+        :columns="item.component_props.options"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+const emit = defineEmits(["active"]);
+
+// 绑定值发生变化时回调，处理选项为其他时的输入项录入
+// const has_add_info = ref(false); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+// const add_info = ref('');
+// const add_info_name = ref(props.item.key + '#');
+// const add_info_key = ref('其他'); // TODO: 以后动态获取
+
+onMounted(() => {
+  // add_info_name.value = `${props.item.key}#${add_info_key.value}`
+  // props.item.component_props.options = props.item.component_props.options.map((opt) => {
+  //   return {
+  //     text: opt,
+  //     value: opt,
+  //   };
+  // });
+});
+
+const selectedValues = ref("");
+const showPicker = ref(false);
+const picker_value = ref(props.item.component_props.default);
+
+const onConfirm = ({ selectedOptions }) => {
+  picker_value.value = selectedOptions[0]?.value;
+  showPicker.value = false;
+  // 触发点自定义监听事件，配合规则显示隐藏其他字段
+  props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
+  emit("active", props.item.value);
+  // if (add_info_key.value === props.item.value) {
+  //   has_add_info.value = true;
+  // }
+};
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+</script>
+
+<style lang="less" scoped>
+.picker-field-page {
+  margin: 1rem;
+  .label {
+    // padding: 1rem 1rem 0 0;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+
+:deep(.van-cell--clickable) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-22 11:02:05
+ * @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 }}
+    </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">
+            <van-radio :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
+})
+
+// TODO: 等待数据结构更新，看看怎么判断必填
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const validator = (val) => {
+  if (!val) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (!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 : '';
+  // 发送自定义数据结构
+  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>

+<!--
+ * @Date: 2022-09-08 15:47:54
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-01-31 22:57:40
+ * @FilePath: /data-table/src/components/RatePickerField/index.vue
+ * @Description: 评分选择控件
+-->
+<template>
+  <div v-if="HideShow" class="rate-field">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-rate
+      v-model="rate_value"
+      :count="item.component_props.data_length"
+      :readonly="item.component_props.readonly"
+      :color="styleColor.baseColor"
+      @change="onChange"
+      style="padding: 1rem"
+    />
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      评分不能为空
+    </div>
+    <van-divider />
+  </div>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const emit = defineEmits(["active"]);
+const show_empty = ref(false);
+const rate_value = ref(props.item.component_props.default);
+
+const onChange = (value) => {
+  props.item.value = { key: props.item.key, value, type: "rate" };
+  emit("active", props.item.value);
+};
+
+onMounted(() => {
+  props.item.value = { key: props.item.key, value: rate_value.value, type: "rate" };
+  emit("active", props.item.value);
+});
+
+const validRate = () => {
+  // 必填项
+  if (props.item.component_props.required && !rate_value.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validRate });
+</script>
+
+<style lang="less" scoped>
+.rate-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-09 16:07:40
+ * @FilePath: /data-table/src/components/RuleField/index.vue
+ * @Description: 规则确认控件
+-->
+<template>
+  <div class="rule-field-page">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-field
+      :name="item.key"
+      :rules="item.rules"
+      :border="false"
+      style="padding-bottom: 0"
+    >
+      <template #input>
+        <van-radio-group v-model="item.value">
+          <van-radio name="1">{{ item.component_props.rule_desc }}</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+    <div class="rule-box" @click="show = true">
+      {{ item.component_props.rule_link }}&nbsp;>>
+    </div>
+  </div>
+
+  <van-overlay :show="show" @click="show = false" :lock-scroll="false">
+    <div class="rule-wrapper" @click.stop>
+      <div class="rule-block">
+        <div
+          style="height: 70vh; overflow: scroll"
+          v-html="item.component_props.rule_content"
+        ></div>
+        <div class="close-btn">
+          <van-button type="primary" block @click="show = false"
+            >关&nbsp;&nbsp;闭</van-button
+          >
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const show = ref(false);
+</script>
+
+<style lang="less" scoped>
+.rule-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+  .rule-box {
+    font-size: 0.85rem;
+    margin-left: 2.7rem;
+    padding-bottom: 1rem;
+    color: #1989fa;
+  }
+}
+.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);
+  }
+}
+</style>

+<!--
+ * @Date: 2022-09-06 16:29:31
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-23 15:50:45
+ * @FilePath: /data-table/src/components/SignField/index.vue
+ * @Description: 电子签名控件
+-->
+<template>
+  <div v-if="HideShow" class="sign-page">
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+      {{ valid }}
+    </div>
+    <div ref="wrapperRef" class="esign-wrapper">
+      <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> -->
+      <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop"
+        :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
+      <div v-if="show_sign" class="whiteboard">
+        <div class="text" @click="startSign">
+          <van-icon name="edit" />&nbsp;点击开始签署电子签名
+        </div>
+      </div>
+    </div>
+    <div v-if="!show_sign">
+      <div v-if="show_control" class="control-sign">
+        <van-row gutter="20" style="padding: 0 1rem">
+          <van-col :span="12">
+            <van-button type="default" block @click="handleGenerate">确认签名</van-button>
+          </van-col>
+          <van-col :span="12">
+            <van-button type="default" block @click="cancelSign">取消签名</van-button>
+          </van-col>
+        </van-row>
+      </div>
+      <div v-else style="padding: 0 1rem">
+        <van-button type="danger" block @click="handleReset">删除签名</van-button>
+      </div>
+    </div>
+    <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem">
+      电子签名不能为空
+    </div>
+    <van-divider />
+  </div>
+
+  <van-overlay :show="loading">
+    <div class="wrapper" @click.stop>
+      <van-loading vertical color="#FFFFFF">生成中...</van-loading>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { v4 as uuidv4 } from "uuid";
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
+import { showSuccessToast, showFailToast } from "vant";
+import { useRoute } from "vue-router";
+import BMF from "browser-md5-file";
+import { getEtag } from "@/utils/qetag.js"; // 生成hash值
+import dayjs from "dayjs";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const $route = useRoute();
+const emit = defineEmits(["active"]);
+
+const esign = ref(null);
+
+let esignWidth = ref();
+let esignHeight = ref();
+const wrapperRef = ref(null)
+onMounted(() => {
+  // 动态计算画板canvas宽度/高度
+  setTimeout(() => {
+    esignWidth.value = wrapperRef.value.offsetWidth - 32;
+    esignHeight.value = (window.innerHeight) / 5;
+  }, 100);
+})
+const lineWidth = ref(6);
+const lineColor = ref("#000000");
+const bgColor = ref("#FCFCFC");
+const isCrop = ref(false);
+const show_control = ref(true);
+const image_url = ref("");
+const show_empty = ref(false);
+
+const handleReset = () => {
+  // 清空画板
+  esign.value.reset();
+  show_control.value = true;
+  // 删除可能存在的签名
+  image_url.value = "";
+  props.item.value = {
+    key: "sign",
+    filed_name: props.item.key,
+    value: "",
+  };
+  emit("active", props.item.value);
+};
+
+/********** 上传七牛云获取图片地址 ***********/
+const loading = ref(false);
+const formCode = $route.query.code; // 表单code
+const uuid = () => {
+  let s = [];
+  let hexDigits = "0123456789abcdef";
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = "4";
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+  s[8] = s[13] = s[18] = s[23] = "-";
+
+  var uuid = s.join("");
+  return uuid;
+};
+
+const uploadQiniu = async (file, token, filename) => {
+  let formData = new FormData();
+  formData.append("file", file); // 通过append向form对象添加数据
+  formData.append("token", token);
+  formData.append("key", filename);
+  let config = {
+    headers: { "Content-Type": "multipart/form-data" },
+  };
+  // 自拍图片上传七牛服务器
+  let qiniuUploadUrl;
+  if (window.location.protocol === 'https:') {
+    qiniuUploadUrl = 'https://up.qbox.me';
+  } else {
+    qiniuUploadUrl = 'http://upload.qiniu.com';
+  }
+  const { filekey, hash, image_info } = await qiniuUploadAPI(
+    qiniuUploadUrl,
+    formData,
+    config
+  );
+  if (filekey) {
+    // 保存图片
+    const { data } = await saveFileAPI({
+      filekey,
+      hash,
+      format: image_info.format,
+      height: image_info.height,
+      width: image_info.width,
+    });
+    return data;
+  }
+};
+/****************** END *******************/
+
+const handleUpload = async (files, filename) => {
+  // 上传图片流程
+  loading.value = true;
+  // 获取HASH值
+  const hash = getEtag(files);
+  // 获取七牛token
+  const { token, key, code } = await qiniuTokenAPI({
+    name: filename,
+    hash,
+  });
+  // 文件上传七牛云
+  const imgUrl = await uploadQiniu(files, token, filename);
+  return imgUrl;
+};
+
+const handleGenerate = () => {
+  esign.value
+    .generate()
+    .then(async (res) => {
+      let affix = uuidv4();
+      let fileName = `uploadForm/${formCode}/${affix}_sign.png`;
+      let file = dataURLtoFile(res, fileName); // 生成文件
+      const imgUrl = await handleUpload(file, fileName);
+      loading.value = false;
+      props.item.value = {
+        key: "sign",
+        filed_name: props.item.key,
+        value: { name: `电子签名${dayjs().format('YYYYMMDDHHmmss')}.png`, url: imgUrl.src},
+      };
+      image_url.value = imgUrl.src;
+      show_control.value = false;
+      show_empty.value = false;
+      emit("active", props.item.value);
+    })
+    .catch((err) => {
+      loading.value = false;
+      // 签名生成失败
+      console.warn(err);
+      if (err) {
+        showFailToast("签名生成失败");
+      }
+    });
+};
+
+//将图片base64转换为文件
+const dataURLtoFile = (dataurl, filename) => {
+  var arr = dataurl.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+};
+
+const show_sign = ref(true);
+const startSign = () => {
+  show_sign.value = false;
+  show_empty.value = false;
+};
+const cancelSign = () => {
+  show_sign.value = true;
+  show_empty.value = false;
+  handleReset();
+};
+
+const validSign = () => {
+  // 必填项 未生成签名
+  if (props.item.component_props.required && !image_url.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validSign });
+</script>
+
+<!-- <script>
+export default {
+  methods: {
+    validSign () {
+      console.warn(0);
+    }
+  }
+}
+</script> -->
+
+<style lang="less" scoped>
+.sign-page {
+
+  // padding-bottom: 1rem;
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+
+  .esign-wrapper {
+    padding: 1rem;
+    position: relative;
+    box-sizing: border-box;
+
+    .sign-wrapper {
+      border: 1px solid #eaeaea;
+      border-radius: 5px;
+    }
+
+    .whiteboard {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+
+      .text {
+        position: absolute;
+        width: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+  }
+
+  .control-sign {
+    padding-bottom: 1rem;
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-29 16:44:53
+ * @FilePath: /data-table/src/components/TableField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <van-field v-if="item.component_type === 'radio'" :name="item.key" :label="item.label">
+    <template #input>
+      <van-radio-group v-model="item.value" direction="horizontal">
+        <van-radio v-for="x in item.sub" :key="index" :name="x.key">{{ x.value }}</van-radio>
+      </van-radio-group>
+    </template>
+  </van-field>
+  <van-field v-else v-model="item.value" :name="item.name" :label="item.label" :type="item.type"
+    :placeholder="item.placeholder" :rules="item.rules" :required="item.required" :autosize="item.autosize"
+    :row="item.row" />
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style lang="less" scoped>
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-24 15:04:18
+ * @FilePath: /custom_form/src/components/TextField/index.vue
+ * @Description: 单行文本输入框(微信扫描功能)
+-->
+<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 }}
+    </div>
+    <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" />
+    <nut-input v-model="item.value" :name="item.name" :type="item.type"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'" :rules="item.rules"
+      :required="item.required"
+      :readonly="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)"
+      :disabled="item.component_props.disabled" :input-align="item.component_props.align"
+      :right-icon="item.component_props.is_camera_scan ? 'scan' : ''" @click-right-icon="clickRightIcon" />
+  </div>
+</template>
+
+<script setup>
+import { getUrlParams } from "@/utils/tools";
+import Taro from '@tarojs/taro'
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+
+// 默认识别类型
+const scan_type_code = ref('ALL_CODE');
+// 微信二维码扫描功能判断
+const scanType = (scan_type_code) => {
+  switch (scan_type_code) {
+    case 'ALL_CODE':
+      return ["qrCode", "barCode"]
+    case 'QR_CODE':
+      return ["qrCode"]
+    case 'BAR_CODE':
+      return ["barCode"]
+  }
+}
+
+// 预览模式
+const model = getUrlParams(location.href) ? getUrlParams(location.href).model : '';
+const clickRightIcon = async () => {
+  // 预览模式屏蔽微信功能
+  if (model === 'preview') return false;
+  Taro.ready(() => {
+    Taro.scanQRCode({
+      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+      scanType: scanType(props.item.camera_scan_type), // 可以指定扫二维码还是一维码，默认二者都有
+      success: function (res) {
+        if (res.errMsg === 'scanQRCode:ok') {
+          let code = res.resultStr;
+          let code_arr = code.split(",");
+          props.item.value = code_arr[1];
+          Taro.showToast({
+            title: '扫描成功',
+            icon: 'success',
+            duration: 2000
+          })
+        } else {
+          console.warn(res);
+          Taro.showToast({
+            title: '扫描失败',
+            icon: 'error',
+            duration: 2000
+          })
+        }
+      },
+      error: function (res) {
+        if (res.errMsg.indexOf('function_not_exist') > 0) {
+          alert('版本过低请升级')
+        }
+        alert(res.errMsg);
+      },
+    });
+  });
+}
+</script>
+
+<style lang="less" scoped>
+.text-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+
+    .note-wrapper {
+      font-size: 0.9rem;
+      margin-left: 1rem;
+      color: gray;
+      padding-bottom: 0.5rem;
+      padding-top: 0.25rem;
+      white-space: pre-wrap;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-22 09:13:58
+ * @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 }}
+    </div>
+    <div
+      v-if="item.component_props.note"
+      v-html="item.component_props.note"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
+    />
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      :type="item.type"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
+      :rules="item.rules"
+      :required="item.component_props.required"
+      :readonly="item.component_props.readonly"
+      :rows="item.component_props.rows"
+      autosize
+      :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
+      :show-word-limit="item.component_props.maxlength"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+</script>
+
+<style lang="less" scoped>
+.textarea-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+
+// :deep(.van-field__body) {
+  // border: 1px solid #eaeaea;
+  // border-radius: 0.25rem;
+  // padding: 0.25rem 0.5rem;
+// }
+:deep(.van-cell__value) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2022-08-31 11:45:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-10 10:11:05
+ * @FilePath: /data-table/src/components/TimePickerField/index.vue
+ * @Description: 时间选择组件
+-->
+<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 }}
+    </div>
+    <van-field
+      v-model="item.value"
+      is-link
+      readonly
+      :name="item.key"
+      :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'"
+      :rules="rules"
+      @click="onTap"
+      :border="false"
+    />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-time-picker
+        v-model="currentTime"
+        title="请选择时间"
+        :columns-type="columns_type"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+const showPicker = ref(false);
+const currentTime = ref([]);
+const readonly = props.item.component_props.readonly;
+
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
+
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  props.item.value = selectedValues.join(":");
+  showPicker.value = false;
+};
+
+const columns_type = ref([]);
+const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
+onMounted(() => {
+  // 根据默认值时间调整显示
+  currentTime.value = props.item.component_props.default ? props.item.component_props.default.split(":") : props.item.value.split(":");
+  let Hour = ''
+  let Minute = ''
+  let Second = ''
+  if (!props.item.component_props.default) {
+    Hour = String(dayjs().hour());
+    Minute = String(dayjs().minute());
+    Second = String(dayjs().second());
+  } else {
+    Hour = currentTime.value[0];
+    Minute = currentTime.value[1];
+    Second = currentTime.value[2];
+  }
+  switch (date_format) {
+    case "HH:mm":
+      columns_type.value = ['hour', 'minute'];
+      // 设置默认值
+      currentTime.value = [Hour, Minute];
+      break;
+    case "HH:mm:ss":
+      columns_type.value = ['hour', 'minute', 'second'];
+      // 设置默认值
+      currentTime.value = [Hour, Minute, Second];
+      break;
+  }
+});
+
+const required = props.item.component_props.required;
+const data_minvalue = props.item.component_props.data_minvalue;
+const data_maxvalue = props.item.component_props.data_maxvalue;
+const validator = (val) => {
+  if (required && !val) {
+    return false;
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return false;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "必填项不能为空";
+  } else if (val && data_minvalue && val < data_minvalue) {
+    return "最小可选：" + data_minvalue;
+  } else if (val && data_maxvalue && val > data_maxvalue) {
+    return "最大可选：" + data_maxvalue;
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.time-picker-field {
+  margin: 1rem;
+  .label {
+    // 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);
+    line-height: var(--van-cell-line-height);
+  }
+}
+
+:deep(.van-cell--clickable) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  input {
+    color: #323233;
+  }
+}
+</style>

+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-23 13:42:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-22 17:12:52
+ * @FilePath: /data-table/src/components/VideoField/index.vue
+ * @Description:
+-->
+<template>
+  <div class="video-wrapper">
+    <div class="label">
+      {{ item.component_props.label }}
+    </div>
+    <div id="mui-player" class="video-div" />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 视频组件通用模块
+ */
+import "mui-player/dist/mui-player.min.css";
+import MuiPlayer from "mui-player";
+import { onMounted } from "vue";
+import { useEventListener } from "@/composables";
+
+// 视频基础属性
+const props = defineProps({
+  item: Object,
+});
+// 视频播放事件回调
+const emit = defineEmits(["active"]);
+let video = null;
+onMounted(() => {
+  const mp = new MuiPlayer({
+    container: "#mui-player",
+    // title: props.item.component_props.title,
+    src: props.item.component_props.src,
+    poster: props.item.component_props.cover,
+    autoFit: false,
+    videoAttribute: [
+      // 声明启用同层播放, 不让会自动全屏播放
+      { attrKey: "webkit-playsinline", attrValue: "webkit-playsinline" },
+      { attrKey: "playsinline", attrValue: "playsinline" },
+      { attrKey: "x5-video-player-type", attrValue: "h5-page" },
+    ],
+  });
+  video = mp.video();
+  //视频播放事件监听
+  video.addEventListener("play", function () {
+    props.item.value = { key: "video", value: "play" };
+    emit("active", props.item.value);
+  });
+  // 配置16:9高度比
+  const width = document.getElementById("mui-player").clientWidth;
+  const height = (width * 9) / 16;
+  document.getElementById("mui-player").height = height;
+});
+
+onUnmounted(() => {
+  video.removeEventListener("play", function () {});
+});
+</script>
+
+<style lang="less" scoped>
+.video-wrapper {
+  position: relative;
+  margin: 1rem 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+
+  .video-div {
+    // border-top-left-radius: 5px;
+    // border-top-right-radius: 5px;
+    border-radius: 5px;
+  }
+
+  .video-bar {
+    color: #713610;
+    padding: 1rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
+:deep(.back-button) {
+  display: none !important;
+}
+</style>

+export default [
+  {
+    "id": 315040,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095780.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:3kZFL-LK1CP0k8Iiewr6d4_kCas=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU3ODAucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095775.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2gmHTr1opoFCeuYjRPvxabflLZM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU3NzUubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315041,
+    "localism_type": "沪语",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095788.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:km1-cl6r3X9BwYekqZHyo4kzbWo=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU3ODgucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095786.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9kK2Nf96oLV0_t5dKXLnEC0QBLM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU3ODYubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315036,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095579.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:TbYtglmAQrmsCpKulfIkdjrYsjc=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU1NzkucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095576.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:CIcNhT-g-lmC1mv253Nnoz7EVKQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU1NzYubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315037,
+    "localism_type": "沪语",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095586.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:MaeVQ6AUQNzcWKDaMExdr7pFpZU=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU1ODYucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095584.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:Ox6WCAeG4ImThDZaoEc2v3mrcb8=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU1ODQubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315033,
+    "localism_type": "沪语",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095145.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:dzCQntH7aBmPGYyxvmiOTwgr8WY=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTUxNDUucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095142.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:IygI0aLGuFR_DEgRtmsbNjAhVS0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTUxNDIubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
+    "note": "2",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315032,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
+    "note": "1",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315024,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094501.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:0fDZL_C8youKy-IftSFwyr3c36g=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ1MDEucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094499.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:BHD2B4D_CDzu9Tw48SvPAgfuJ90=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0OTkubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
+    "note": "1",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315025,
+    "localism_type": "沪语",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094509.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:qSjAFNlU3o6SduJzStxg49A8SK0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ1MDkucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094506.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2Khn4cIo2mJo6Ty6qRvLB0Uus48=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ1MDYubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
+    "note": "2",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315021,
+    "localism_type": "沪语",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094433.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:AfRlQR8HGWV0y9kAeEAKd7jhj6I=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ0MzMucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094431.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PjpJx-lC2kILJPBlpPJuJMqslrE=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ0MzEubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  },
+  {
+    "id": 315020,
+    "localism_type": "普通话",
+    "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094425.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9BOVLskMMLE-pbqmb5rK_5qncNQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ0MjUucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
+    "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094423.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:uEz_Ke-BuliSvPQkvdwOAe42Hyk=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0MjMubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
+    "note": "Z",
+    "status": "apply",
+    "check_note": null,
+    "kg_id": 314048,
+    "kg_name": "上海市杨浦区科技幼儿园",
+    "perf_id": 314880,
+    "name": "王申羽",
+    "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
+    "book_id": 314483,
+    "book_name": "《它们从哪里来》",
+    "comment_num": 0,
+    "like_num": 0,
+    "favor_num": 0,
+    "play_num": 0,
+    "is_like": 0
+  }
+]

+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-23 18:00:39
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-02 17:41:38
+ * @FilePath: /tswj/src/components/MuiVideo/test.vue
+ * @Description: 视频播放通用组件演示组件
+ * @Description: type: video 为纯视频播放框，bookDetail为定制模式
+-->
+<template>
+  <mui-video
+    v-for="(item, index) in mock"
+    :key="index"
+    :item="item"
+    type="video"
+    @on-play="onPlay"
+  />
+</template>
+
+<script setup>
+  import mock from '@/components/MuiVideo/mock';
+  import MuiVideo from '@/components/MuiVideo/index';
+  import { ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import {
+    Cookies,
+    $,
+    _,
+    axios,
+    storeToRefs,
+    mainStore,
+    Toast,
+    useTitle,
+  } from '@/utils/generatePackage.js';
+  //import { } from '@/utils/generateModules.js'
+  //import { } from '@/utils/generateIcons.js'
+  //import { } from '@/composables'
+  const $route = useRoute();
+  const $router = useRouter();
+  useTitle($route.meta.title);
+
+  const onPlay = ({ event, props }) => {
+    console.warn(event);
+    console.warn(props);
+  };
+</script>
+
+<style
+  lang="less"
+  scoped></style>

+/**
+ * 依赖注入命名集合
+ */
+export const myInjectionKey = Symbol()
+export const fooInjectionKey = Symbol()

+import _ from '@/utils/lodash'
+import TextField from '@/components/TextField/index.vue'
+// import TextareaField from '@/components/TextareaField/index.vue'
+// import RadioField from '@/components/RadioField/index.vue'
+// import CheckboxField from '@/components/CheckboxField/index.vue'
+// import PickerField from '@/components/PickerField/index.vue'
+// import AreaPickerField from '@/components/AreaPickerField/index.vue'
+// import DatePickerField from '@/components/DatePickerField/index.vue'
+// import TimePickerField from '@/components/TimePickerField/index.vue'
+// import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
+// import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
+// import FileUploaderField from '@/components/FileUploaderField/index.vue'
+// import PhoneField from '@/components/PhoneField/index.vue'
+// import EmailField from '@/components/EmailField/index.vue'
+// import SignField from '@/components/SignField/index.vue'
+// import RatePickerField from '@/components/RatePickerField/index.vue'
+// import CalendarField from '@/components/CalendarField/index.vue'
+// import IdentityField from '@/components/IdentityField/index.vue'
+// import NumberField from '@/components/NumberField/index.vue'
+// import DesField from '@/components/DesField/index.vue'
+// import DividerField from '@/components/DividerField/index.vue'
+// import VideoField from '@/components/VideoField/index.vue'
+// import MarqueeField from '@/components/MarqueeField/index.vue'
+// import ContactField from '@/components/ContactField/index.vue'
+// import RuleField from '@/components/RuleField/index.vue'
+// import MultiRuleField from '@/components/MultiRuleField/index.vue'
+// import ButtonField from '@/components/ButtonField/index.vue'
+// import NoteField from '@/components/NoteField/index.vue'
+// import NameField from '@/components/NameField/index.vue'
+// import GenderField from '@/components/GenderField/index.vue'
+
+/**
+ * 生成自定义组件类型
+ * @param {*} data
+ * @type input 单行文本 TextField
+ * @type textarea 多行文本 TextareaField
+ * @type radio 单项选择 RadioField
+ * @type checkbox 多项选择 CheckboxField
+ * @type select 单列选择器 PickerField
+ * @type area_picker 地址选择器 AreaPickerField
+ * @type date_picker 日期选择器 DatePickerField
+ * @type time_picker 时间选择器 TimePickerField
+ * @type datetime_picker 日期时间选择器 DateTimePickerField
+ * @type image_uploader 图片上传 ImageUploaderField
+ * @type phone 手机输入框 PhoneField
+ * @type email 邮箱输入框 EmailField
+ * @type sign 电子签名输入框 SignField
+ * @type rate_picker 评分选择器 RatePickerField
+ * @type calendar 日历选择器 CalendarField
+ * @type id_code 身份证输入框 IdentityField
+ * @type desc 文字描述 DesField
+ * @type divider 分割线 DividerField
+ * @type video 视频控件 VideoField
+ * @type marquee 跑马灯控件 MarqueeField
+ * @type rule 活动规则控件 RuleField
+ * @type multi_rule 活动规则控件 MultiRuleField
+ * @type note 富文本控件 NoteField
+ * @type name 姓名控件 NameField
+ * @type gender 性别控件 GenderField
+ */
+export function createComponentType(data) {
+  // 判断类型和使用组件
+  _.each(data, (item, index) => {
+    // 必填项规则添加
+    if (item.component_props.required) {
+      item.rules = [
+        {
+          required: true,
+          message: item.placeholder ? item.placeholder : '必填项不能为空',
+        },
+      ]
+    }
+    if (item.component_props.tag === 'input') {
+      item.type = 'text'
+      item.name = item.key
+      item.component = TextField
+    }
+    // if (item.component_props.tag === 'textarea') {
+    //   item.type = 'textarea'
+    //   item.name = item.key
+    //   // item.rows = 10;
+    //   item.autosize = true
+    //   item.component = TextareaField
+    // }
+    // if (item.component_props.tag === 'number') {
+    //   item.name = item.key
+    //   item.component = NumberField
+    // }
+    // if (item.component_props.tag === 'radio') {
+    //   item.component = RadioField
+    // }
+    // if (item.component_props.tag === 'checkbox') {
+    //   item.component = CheckboxField
+    // }
+    // if (item.component_props.tag === 'select') {
+    //   item.component = PickerField
+    // }
+    // if (item.component_props.tag === 'address') {
+    //   item.component = AreaPickerField
+    // }
+    // if (item.component_props.tag === 'date') {
+    //   item.component = DatePickerField
+    // }
+    // if (item.component_props.tag === 'time') {
+    //   item.component = TimePickerField
+    // }
+    // if (item.component_props.tag === 'datetime') {
+    //   item.component = DateTimePickerField
+    // }
+    // if (item.component_props.tag === 'image_uploader') {
+    //   item.component = ImageUploaderField
+    // }
+    // if (item.component_props.tag === 'file_uploader') {
+    //   item.component = FileUploaderField
+    // }
+    // if (item.component_props.tag === 'phone') {
+    //   item.name = item.key
+    //   item.component = PhoneField
+    // }
+    // if (item.component_props.tag === 'email') {
+    //   item.name = item.key
+    //   item.component = EmailField
+    // }
+    // if (item.component_props.tag === 'sign') {
+    //   item.name = item.key
+    //   item.component = SignField
+    // }
+    // if (item.component_props.tag === 'rate') {
+    //   item.name = item.key
+    //   item.component = RatePickerField
+    // }
+    // if (item.component_props.tag === 'calendar') {
+    //   item.name = item.key
+    //   item.component = CalendarField
+    // }
+    // if (item.component_props.tag === 'id_card') {
+    //   item.name = item.key
+    //   item.component = IdentityField
+    // }
+    // if (item.component_props.tag === 'desc') {
+    //   item.name = item.key
+    //   item.component = DesField
+    // }
+    // if (item.component_props.tag === 'divider') {
+    //   item.name = item.key
+    //   item.component = DividerField
+    // }
+    // if (item.component_props.tag === 'video') {
+    //   item.name = item.key
+    //   item.component = VideoField
+    // }
+    // if (item.component_props.tag === 'marquee') {
+    //   item.name = item.key
+    //   item.component = MarqueeField
+    // }
+    // if (item.component_props.tag === 'contact') {
+    //   item.name = item.key
+    //   item.component = ContactField
+    // }
+    // if (item.component_props.tag === 'rule') {
+    //   item.name = item.key
+    //   item.component = RuleField
+    // }
+    // if (item.component_props.tag === 'button') {
+    //   item.name = item.key
+    //   item.component = ButtonField
+    // }
+    // if (item.component_props.tag === 'multi_rule') {
+    //   item.name = item.key
+    //   item.value = []
+    //   item.component = MultiRuleField
+    // }
+    // if (item.component_props.tag === 'note') {
+    //   item.name = item.key
+    //   item.component = NoteField
+    // }
+    // if (item.component_props.tag === 'name') {
+    //   item.name = item.key
+    //   item.component = NameField
+    // }
+    // if (item.component_props.tag === 'gender') {
+    //   item.name = item.key
+    //   item.component = GenderField
+    // }
+  })
+}

+import { provide, inject } from "vue";
+
+// const key = Symbol();
+
+/**
+ * 创建全局变量
+ * @param {*} context 
+ * @param {*} key 
+ */
+export function createContext(context, key) {
+  provide(key, context)
+}
+/**
+ * 使用全局变量
+ * @param {*} key 
+ * @returns 
+ */
+export function useContext(key) {
+  return inject(key)
+}

+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-28 22:31:25
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-05-30 10:18:09
+ * @FilePath: /tswj/src/hooks/useDebounce.js
+ * @Description: 
+ */
+import _ from 'lodash';
+/**
+ * 封装lodash防抖
+ * @param {*} fn 执行函数
+ * @param {*} timestamp 执行间隔
+ * @param {*} options 函数配置 - 在延迟开始前调用，在延迟结束后不调用
+ * @returns 返回新的 debounced（防抖动）函数。
+ */
+export const useDebounce = (fn, timestamp = 500, options = { leading: true, trailing: false }) => {
+  return _.debounce(fn, timestamp, options);
+}

+
+/**
+ * @description 封装简化滚动查询列表执行流程
+ * @param {*} data 接口返回列表数据
+ * @param {*} list 自定义列表
+ * @param {*} offset 
+ * @param {*} loading 
+ * @param {*} finished 
+ * @param {*} finishedTextStatus 
+ * @param {*} emptyStatus 
+ */
+import _ from 'lodash'
+
+export const flowFn = (data, list, offset, loading, finished, finishedTextStatus, emptyStatus) => {
+  list.value = _.concat(list.value, data);
+  list.value = _.uniqBy(list.value, 'id');
+  offset.value = list.value.length;
+  loading.value = false;
+  // 数据全部加载完成
+  if (!data.length) {
+    // 加载状态结束
+    finished.value = true;
+  }
+  // 空数据提示
+  if (!list.value.length) {
+    finishedTextStatus.value = false;
+  }
+  emptyStatus.value = Object.is(list.value.length, 0);
+}

+/*
+ * @Date: 2022-07-21 13:28:05
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-22 09:51:52
+ * @FilePath: /front/src/hooks/useGo.js
+ * @Description: 文件描述
+ */
+import { useRouter } from 'vue-router';
+import { getArticleAPI } from '@/api'
+import { Cookies } from '@/utils/generatePackage'
+import { parseQueryString } from '@/utils/tools'
+
+/**
+ * 封装路由跳转方便行内调用
+ * @returns
+ */
+export function useGo () {
+  let router = useRouter()
+  function go (path, query) {
+    router.push({
+      path: path,
+      query: query
+    })
+  }
+  return go
+}
+
+/**
+ * 封装跳转文章详情页
+ * @param id 文章ID
+ * @param cid 栏目ID
+ * @param column 栏目名称
+ * @param section 二级栏目名称
+ * @param name 子栏目名称
+ * @returns
+ */
+export function useGoTo () {
+  let router = useRouter()
+  // function detail({ id, cid, column, section, name, post_link }) {
+  function detail(item) {
+    // 保存点击位置
+    // Cookies.set('scrollTop', getScrollTop());
+    // Cookies.set('scrollTopId', id);
+    // 判断是否跳转URL
+    // const { code, data } = await getArticleAPI({ f: 'article', i: id, cid });
+    // if (code) {
+    //   if (data.post_link) { // 优先显示链接文章
+    //     location.href = data.post_link;
+    //     return false;
+    //   }
+    //   router.push({
+    //     path: '/detail',
+    //     query: { cid, id, column, section, name }
+    //   });
+    // }
+    if (item) {
+      if (item.post_link) {
+        if (item.post_link.indexOf('f/guanzong/web')) {
+          item.post_link = item.post_link.replace('web', 'front');
+        }
+        if (item.post_link.indexOf('f/guanzong/web/#/list') > 0 || item.post_link.indexOf('f/guanzong/front/#/list') > 0) {
+          router.push({
+            path: '/list',
+            query: parseQueryString(item.post_link)
+          });
+          return false;
+        } else if (item.post_link) { // 优先显示链接文章
+          location.href = item.post_link;
+          return false;
+        }
+      } else {
+        router.push({
+          path: '/detail',
+          query: { cid: item.item, id: item.id, column: item.column, section: item.section, name: item.name }
+        });
+      }
+    }
+  }
+  return detail
+}
+
+export function useReplace () {
+  let router = useRouter()
+  function replace (path, query) {
+    router.replace({
+      path: path,
+      query: query
+    })
+  }
+  return replace
+}
+
+export function getScrollTop () {
+  var scroll_top = 0;
+  if (document.documentElement && document.documentElement.scrollTop) {
+    scroll_top = document.documentElement.scrollTop;
+  }
+  else if (document.body) {
+    scroll_top = document.body.scrollTop;
+  }
+  return scroll_top;
+}

+import { mainStore } from '@/utils/generatePackage.js'
+
+// 删除 keep-alive 缓存
+export const store = mainStore();
+
+export const killPages = () => {
+  store.changeKeepPages();
+}
+
+export const addPages = () => {
+  store.keepThisPage();
+}

 <template>
 <template>
-  <view class="index">
+  <view class="index-page">
     <nut-config-provider :theme-vars="themeVars">
     <nut-config-provider :theme-vars="themeVars">
       <nut-dialog no-cancel-btn title="温馨提示" content="表单收集量已达到限额，无法再提交数据。" v-model:visible="show_reach_sjsj_max_count" @ok="onOk" />
       <nut-dialog no-cancel-btn title="温馨提示" content="表单收集量已达到限额，无法再提交数据。" v-model:visible="show_reach_sjsj_max_count" @ok="onOk" />
     </nut-config-provider>
     </nut-config-provider>
@@ -23,9 +23,6 @@ const themeVars = {
   primaryColor: styleColor.baseColor,
   primaryColor: styleColor.baseColor,
 };
 };
 
 
-// web端判断
-const is_pc = computed(() => process.env.TARO_ENV === 'h5' && wxInfo().isPC);
-
 const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
 const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
 const model = getUrlParams(location.href) ? getUrlParams(location.href).model : '';
 const model = getUrlParams(location.href) ? getUrlParams(location.href).model : '';
 
 

 <!--
 <!--
  * @Date: 2023-03-24 09:19:27
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-24 14:21:47
+ * @LastEditTime: 2023-03-24 15:19:34
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
-  <div class="">table</div>
+  <div class="table-page">
+    <nut-noticebar v-if="formSetting.sjsj_is_count_down" :text="notice_text" :scrollable="true"
+    :closeMode="true"  right-icon="circle-close" />{{ formSetting }}
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import wx from 'weixin-js-sdk'
-import { ref, computed } from 'vue'
+import Taro from '@tarojs/taro'
+import { $ } from '@tarojs/extend'
+import { createComponentType } from "@/hooks/useComponentType";
+import { ref, computed, watchEffect, onMounted } from "vue";
 import _ from "@/utils/lodash";
 import _ from "@/utils/lodash";
 import { storeToRefs } from 'pinia'
 import { storeToRefs } from 'pinia'
 import { mainStore } from '@/stores'
 import { mainStore } from '@/stores'
@@ -24,8 +29,10 @@ import { sharePage } from '@/composables/useShare.js'
 // // 获取表单设置
 // // 获取表单设置
 const store = mainStore();
 const store = mainStore();
 const { formSetting, formInfo } = storeToRefs(store);
 const { formSetting, formInfo } = storeToRefs(store);
+
 // web端判断封面图片高度
 // web端判断封面图片高度
 const is_pc = computed(() => process.env.TARO_ENV === 'h5' && wxInfo().isPC);
 const is_pc = computed(() => process.env.TARO_ENV === 'h5' && wxInfo().isPC);
+
 const PHeaderHeight = computed(() => {
 const PHeaderHeight = computed(() => {
   if (is_pc.value) {
   if (is_pc.value) {
     return "35vh";
     return "35vh";
@@ -38,8 +45,488 @@ const themeVars = {
   buttonPrimaryBackground: styleColor.baseColor,
   buttonPrimaryBackground: styleColor.baseColor,
   buttonPrimaryBorderColor: styleColor.baseColor,
   buttonPrimaryBorderColor: styleColor.baseColor,
 };
 };
+
+const PHeader = ref({});
+const PCommit = ref({});
+const PHeader_cover = ref("");
+const PHeader_title = ref("");
+const mockData = ref([]);
+const formData = ref([]);
+const postData = ref({});
+
+const form_code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
+// 编辑模式不能提交操作
+const model = getUrlParams(location.href) ? getUrlParams(location.href).model : '';
+// 模仿金数据的扩展参数
+const x_field_1 = getUrlParams(location.href) ? getUrlParams(location.href).x_field_1 : null;
+// 周期ID标识
+const x_cycle = getUrlParams(location.href) ? getUrlParams(location.href).x_cycle : null;
+
+// 格式化表单数据结构
+const formatData = (data) => {
+  const arr = [];
+  data.forEach((field) => {
+    const { interaction_type, data_type, field_id, field_name, ...component_props } = field;
+    // 生成组件属性
+    const temp = {
+      key: field_name,
+      value: component_props.default ? component_props.default : "",
+      component_props,
+    };
+    arr.push(temp);
+  });
+  return arr;
+};
+
+// 处理没有绑定值的组件的赋值
+// 省市区选择，图片上传，文件上传，电子签名，评分组件
+const area_picker = ref([]);
+const image_uploader = ref([]);
+const file_uploader = ref([]);
+const sign = ref([]);
+const rate_picker = ref([]);
+// 动态绑定ref数据
+const setRefMap = (el, item) => {
+  if (el) {
+    if (item.component_props.tag === "area_picker") {
+      area_picker.value.push(el);
+    }
+    if (item.component_props.tag === "image_uploader") {
+      image_uploader.value.push(el);
+    }
+    if (item.component_props.tag === "file_uploader") {
+      file_uploader.value.push(el);
+    }
+    if (item.component_props.tag === "sign") {
+      sign.value.push(el);
+    }
+    if (item.component_props.tag === "rate_picker") {
+      rate_picker.value.push(el);
+    }
+  }
+};
+
+const notice_text = ref("");
+const show = ref(false);
+const qr_url = ref("");
+const pwd_show = ref(false);
+const mmtx_password = ref('');
+const form_name = ref('')
+
+// 提交表单密码
+const onSubmitPwd = async () => {
+  const { code } = await postVerifyPasswordAPI({ form_code, mmtx_password: mmtx_password.value });
+  if (code) {
+    pwd_show.value = false;
+  }
+}
+
+onMounted(async () => {
+  // TAG: 全局背景色
+  $('body').css('background-color', styleColor.backgroundColor)
+  const { data } = await queryFormAPI({ form_code });
+  const form_data = data;
+  // 动态修改标题
+  Taro.setNavigationBarTitle({
+    title: form_data.name
+  });
+  form_name.value = form_data.name;
+  // 重构数据结构
+  let page_header = {};
+  let page_commit = {};
+  let page_form = [];
+  form_data.field_list.forEach((element) => {
+    if (element.tag === "page_header") {
+      // 页眉组件
+      page_header = element;
+    } else if (element.tag === "page_commit") {
+      // 提交按钮
+      page_commit = element;
+    } else {
+      page_form.push(element);
+    }
+  });
+  /** 页眉属性
+   * @param label 表单标题
+   * @param banner_type 页眉类型：["文字", "单张图", "轮播图"] text=文字，image=单张图，carousel=轮播图
+   * @param banner_url 页眉图片地址
+   * @param description 描述内容
+   * @param invisible 页眉展示
+   */
+  if (page_header) {
+    PHeader.value = {
+      label: page_header.label,
+      description: page_header.description,
+      type: page_header.banner_type,
+      cover: page_header.banner_url,
+      banner: page_header.banner,
+      visible: !page_header.invisible,
+    };
+  }
+  if (page_commit) {
+    PCommit.value = {
+      text: page_commit.text,
+      visible: !page_commit.invisible,
+    };
+  }
+  formData.value = formatData(page_form);
+  mockData.value = [
+    {
+      key: "111",
+      value: "",
+      component: "",
+      component_props: {
+        name: "name",
+        tag: "name",
+        label: "姓名",
+        required: true,
+      },
+    },
+    {
+      key: "222",
+      value: "",
+      component: "",
+      component_props: {
+        name: "gender",
+        tag: "gender",
+        label: "性别",
+        default: '男',
+        required: true,
+      },
+    },
+  ];
+  // 生成自定义组件
+  createComponentType(mockData.value);
+  createComponentType(formData.value);
+  // 过期时间显示
+  notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
+  // 判断是否需要关注公众号, 弹出二维码识别
+  if (formSetting.value.wxzq_must_follow && !formSetting.value.x_field_weixin_subscribe) {
+    show.value = true;
+    qr_url.value = formSetting.value.wxzq_mp_qrcode;
+    // 标记用户还未关注
+    localStorage.setItem('weixin_subscribe', 0);
+  }
+  // 判断是否弹出密码输入框
+  checkUserPassword();
+  // 启用分享功能，非预览模式
+  if (formSetting.value.wxzq_is_share && model !== 'preview') {
+    Taro.ready(() => {
+      /**
+       * 微信分享卡片标题模式
+       * form_name=使用表单名称作为分享标题，customize=自定义分享标题
+       */
+      const title = formSetting.value.wxzq_share_title_mode === 'form_name' ? form_name.value : formSetting.value.wxzq_share_custom_title;
+      // 自定义分享内容
+      sharePage({ title, desc: formSetting.value.wxzq_share_slogan, imgUrl: formSetting.value.wxzq_share_logo });
+    });
+  }
+});
+
+// 打开轮询用户是否关注
+const onTap = () => {
+  if (localStorage.getItem('weixin_subscribe') === '0') {
+    setInterval(() => {
+      checkUserSubscribe()
+    }, 1000);
+  }
+}
+
+// 检查数据收集设置
+const checkUserSubscribe = () => {
+  // 判断是否需要关注公众号, 弹出二维码识别
+  if (formSetting.value.wxzq_must_follow && formSetting.value.x_field_weixin_subscribe) {
+    // 标记用户已关注
+    localStorage.setItem('weixin_subscribe', 1);
+    show.value = false;
+  }
+  // 凭密码填写设置
+  if (formSetting.value.mmtx_enable) {
+    pwd_show.value = true;
+  } else {
+    pwd_show.value = false;
+  }
+}
+
+// 检查密码验证功能
+const checkUserPassword = () => {
+  // 凭密码填写设置
+  if (formSetting.value.mmtx_enable) {
+    pwd_show.value = true;
+  } else {
+    pwd_show.value = false;
+  }
+}
+
+// 根据规则隐藏相应字段
+const checkRules = () => {
+  const rule_list = formInfo.value['rule_list'] ? [...formInfo.value['rule_list']] : [];
+  formData.value.forEach(item => {
+    // 给受作用的字段绑定判断规则
+    // 规则失效需要踢出
+    rule_list.forEach(rule => {
+      if (rule.field_names?.includes(item.key) && !rule.is_invalid) {
+        item.field_rules = {
+          mode: rule.mode,
+          logical_op: rule.logical_op,
+          expr_list: rule.expr_list,
+        }
+      }
+    });
+    // 只检查存在规则的字段
+    if (item.field_rules) {
+      let condition = '';
+      // 多个规则的满足条件，为全且或者全或
+      const op = item.field_rules?.logical_op === 'AND' ? '&&' : '||';
+      item.field_rules?.expr_list.forEach(expr => {
+        if (typeof postData.value[expr['field_name']] === 'string') { // 表单值为字符串（单选，下拉）
+          const k = !!expr['values'].includes(postData.value[expr['field_name']])
+          condition += `${k}${op}`
+        }
+        if (typeof postData.value[expr['field_name']] === 'object') { // 表单值为数组（多选）
+          const k = !!(_.intersection(expr['values'], postData.value[expr['field_name']])).length;
+          condition += `${k}${op}`
+        }
+      });
+      // 把结果转换为布尔值
+      if (item.field_rules?.logical_op === 'AND') {
+        if (condition.indexOf('false') >= 0) {
+          condition = false;
+        } else {
+          condition = true;
+        }
+      }
+      if (item.field_rules?.logical_op === 'OR') {
+        if (condition.indexOf('true') >= 0) {
+          condition = true;
+        } else {
+          condition = false;
+        }
+      }
+      item['component_props']['disabled'] = item.field_rules?.mode === 'SHOW' ? !condition : condition;
+    }
+  })
+}
+
+// 操作绑定自定义字段回调
+const onActive = (item) => {
+  if (item.key === "area_picker") {
+    postData.value[item.filed_name] = item.value;
+  }
+  if (item.key === "image_uploader") {
+    postData.value[item.filed_name] = item.value;
+  }
+  if (item.key === "file_uploader") {
+    postData.value[item.filed_name] = item.value;
+  }
+  if (item.key === "sign") {
+    postData.value[item.filed_name] = item.value;
+  }
+  if (item.type === "rate") {
+    postData.value = _.assign(postData.value, { [item.key]: item.value });
+  }
+  if (item.type === "picker") { // 下拉框控件
+    postData.value = _.assign(postData.value, { [item.key]: item.value });
+  }
+  if (item.type === "radio") { // 单选控件
+    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
+  }
+  if (item.type === "checkbox") { // 多选控件
+    const checkbox_value = _.cloneDeep(item.value)
+    checkbox_value.forEach((element, index) => {
+      for (const key in item.affix) {
+        if (item.affix[key] && element === key) {
+          checkbox_value[index] = item.affix[key]
+        }
+      }
+    });
+    postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
+  }
+  // 检查规则，会影响字段显示
+  checkRules();
+};
+
+// 检验没有绑定name的输入项
+const validOther = () => {
+  let valid = {
+    status: true,
+    key: "",
+  };
+  if (area_picker.value) {
+    // 省市区地址
+    area_picker.value.forEach((item, index) => {
+      if (!area_picker.value[index].validAreaPicker()) {
+        valid = {
+          status: area_picker.value[index].validAreaPicker(),
+          key: "area_picker",
+        };
+        return false;
+      }
+    });
+  }
+  if (image_uploader.value) {
+    // 图片上传
+    image_uploader.value.forEach((item, index) => {
+      if (!image_uploader.value[index].validImageUploader()) {
+        valid = {
+          status: image_uploader.value[index].validImageUploader(),
+          key: "image_uploader",
+        };
+        return false;
+      }
+    });
+  }
+  if (file_uploader.value) {
+    // 文件上传
+    file_uploader.value.forEach((item, index) => {
+      if (!file_uploader.value[index].validFileUploader()) {
+        valid = {
+          status: file_uploader.value[index].validFileUploader(),
+          key: "file_uploader",
+        };
+        return false;
+      }
+    });
+  }
+  if (sign.value) {
+    // 电子签名
+    sign.value.forEach((item, index) => {
+      if (!sign.value[index].validSign()) {
+        valid = {
+          status: sign.value[index].validSign(),
+          key: "sign",
+        };
+        return false;
+      }
+    });
+  }
+  if (rate_picker.value) {
+    // 评分组件
+    rate_picker.value.forEach((item, index) => {
+      if (!rate_picker.value[index].validRate()) {
+        valid = {
+          status: rate_picker.value[index].validRate(),
+          key: "rate_picker",
+        };
+        return false;
+      }
+    });
+  }
+  return valid;
+};
+
+// 预处理表单数据
+const preValidData = (values) => {
+  // 过滤掉标识为 ignore，undefined 的字段数据
+  let { ignore, undefined, ...rest_data } = values;
+  // 合并自定义字段到提交表单字段
+  return _.assign(postData.value, rest_data);
+}
+
+const onSubmit = async (values) => {
+  // 表单数据处理
+  postData.value = preValidData(values);
+  // 合并扩展字段
+  postData.value = { ...postData.value, x_field_1, x_cycle };
+  // 检查非表单输入项
+  if (validOther().status) {
+    // 编辑模式不能提交数据
+    if (model === 'edit') {
+      console.warn(postData.value);
+    }
+    if (model === 'edit' || model === 'preview') return false;
+    // 通过验证
+    const result = await addFormDataAPI({
+      form_code,
+      data: postData.value,
+    });
+    if (result.code) {
+      showSuccessToast("提交成功");
+      // 缓存表单返回值
+      store.changeSuccessInfo(result.data);
+      // 如果类型为跳转网页
+      if (result.data.commit_action === 'url') {
+        window.location.href = result.data.commit_url;
+      } else {
+        // 跳转成功页面
+        Taro.navigateTo({
+          url: '../success/index'
+        })
+      }
+    }
+  } else {
+    console.warn(validOther().key + "不通过验证");
+    // // 图片上传控件报错提示
+    // if (validOther().key === "image_uploader") {
+    //   showFailToast("图片上传为空");
+    // }
+    // // 文件上传控件报错提示
+    // if (validOther().key === "file_uploader") {
+    //   showFailToast("文件上传为空");
+    // }
+  }
+};
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+.table-title {
+  padding: 1rem;
+  font-size: 1.15rem;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+.table-desc {
+  padding: 0rem 1rem;
+  color: #666;
+  font-size: 0.9rem;
+  white-space: pre-wrap;
+
+  img {
+    width: 100%;
+  }
+}
+
+.table-box {
+  background-color: #ffffff;
+  padding-bottom: 1rem;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 10rem;
+  // height: 10rem;
+  background-color: #fff;
+}
+
+.pwd-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .block {
+    width: 80vw;
+    background-color: #fff;
+    padding: 1rem;
+    border-radius: 5px;
+  }
+}
+
+.PHeader-Text {
+  padding: 1rem;
+  font-weight: bold;
+  white-space: pre;
+}
 
 
+// :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
+//   font-size: var(--van-cell-icon-size);
+//   line-height: var(--van-cell-line-height);
+// }
 </style>
 </style>

@@ -1633,6 +1633,11 @@
     swiper "6.8.0"
     swiper "6.8.0"
     weui "^1.1.2"
     weui "^1.1.2"
 
 
+"@tarojs/extend@^3.6.2":
+  version "3.6.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/@tarojs/extend/-/extend-3.6.2.tgz#f7badc3e322b76b616e10194f030cd5126ce4a6a"
+  integrity sha512-lKClhLFk9CPfT2z+djdzX4dBr3KLCzVystjC4KnZ00EAW7j6DlyiudwVUXmPwHAyEkq7n99qKZBy/lWQ3+p+cw==
+
 "@tarojs/helper@3.6.2":
 "@tarojs/helper@3.6.2":
   version "3.6.2"
   version "3.6.2"
   resolved "https://mirrors.cloud.tencent.com/npm/@tarojs/helper/-/helper-3.6.2.tgz#f1f2e1225a8b3cdfa99ffd62349279350d2c01a2"
   resolved "https://mirrors.cloud.tencent.com/npm/@tarojs/helper/-/helper-3.6.2.tgz#f1f2e1225a8b3cdfa99ffd62349279350d2c01a2"