zhywpt-sp/components/form-builder/form-builder-vue3.vue

<template>
  <!-- 表单 -->
  <form @submit="formSubmit">
    <view v-for="(item, index) in formData" :key="index">
      <view v-show="!item.show">
        <!-- 是否显示-->
        <view
          style="min-height: 90rpx"
          :class="
            item.vertical === 2 ? 'as-layout-vertical' : 'as-layout-horizontal'
          "
        >
          <!-- 标题 -->
          <view
            class="as-gravity-center-start"
            :style="'min-width:' + config.titleWidth + 'rpx'"
            style="
              margin: 0 20rpx;
              flex-direction: row;
              display: flex;
              flex-direction: row;
            "
          >
            <image
              class="img-size"
              :src="item.required ? `${$imgUrl}must.png` : ''"
			  mode="aspectFill"
            ></image>
            <view
              :class="item.vertical === 2 ? 'text-left' : 'text-justify'"
              class="text-title"
              style="width: 100%"
            >
              {{ item.title }}
            </view>
          </view>

          <!-- 内容 -->
          <view class="as-weight as-gravity-center-start">
            <!-- 文本内容 -->
            <view v-if="item.type === 1" class="text" :style="item.style">{{
              item[item.value]
            }}</view>
            <!-- 输入框 -->
            <view v-if="item.type === 2" style="width: 100%">
              <input
                :disabled="item.disabled"
                v-model="item[item.value]"
                :type="item.inputType"
                :placeholder="item.hint ? item.hint : '请输入' + item.title"
                placeholder-class="text-hint"
                class="text as-gravity-center-start"
                :maxlength="item.maxlength"
                :style="item.style"
                style="min-height: 90rpx; word-break: break-all"
              />
            </view>
            <!-- 多项选择器 -->
            <view v-if="item.type === 3">
              <checkbox-group
                @change="checkboxChange($event, item)"
                :disabled="item.disabled"
              >
                <view class="as-layout-horizontal">
                  <label
                    style="
                      display: flex;
                      flex-direction: row;
                      margin-right: 30rpx;
                    "
                    v-for="(itemData, index) in item.itemData"
                    :key="index"
                  >
                    <checkbox
                      style="transform: scale(0.7)"
                      :value="itemData.value"
                      :checked="itemData.checked"
                    />
                    <view>{{ itemData.name }}</view>
                  </label>
                </view>
              </checkbox-group>
            </view>
            <!-- 普通选择器 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容  :range-key="item[item.value]"-->
            <view v-if="item.type === 4" style="width: 100%">
              <!-- range[范围] value[初始选择]-->
              <picker
                :disabled="item.disabled"
                :range-key="item.itemKey"
                :mode="item.mode ? item.mode : 'selector'"
                @change="bindPickerChange($event, item)"
                :range="item.itemData"
              >
                <view class="text">
                  {{
                    item[item.value]
                      ? item.itemKey
                        ? item[item.value][item.itemKey]
                        : item[item.value]
                      : item.hint
                      ? item.hint
                      : "请选择" + item.title
                  }}
                </view>
              </picker>
            </view>

            <!-- 富文本框 -->
            <view v-if="item.type === 5" style="width: 100%">
              <view>
                <textarea
                  :disabled="item.disabled"
                  class="text"
                  v-model="item[item.value]"
                  @input="textareaInput($event, item)"
                  placeholder-class="text-hint"
                  style="width: 100%"
                  :maxlength="item.maxlength"
                  auto-height
                  :placeholder="item.hint ? item.hint : '请输入' + item.title"
                >
                </textarea>
                <view
                  v-if="item.maxlength"
                  class="as-gravity-center-end"
                  style="display: flex; flex-direction: row; height: 20%"
                >
                  <view class="text">{{ !item.num ? "0" : item.num }}</view>
                  <view class="text"
                    >/{{ item.maxlength ? item.maxlength : 100 }}</view
                  >
                </view>
              </view>
            </view>

            <!-- 图片选择器  :imgWidth="imgWidth ? imgWidth : 0"-->
            <view v-if="item.type === 6" style="width: 100%">
              <form-image
                @backImg="backImg($event, item)"
                style="width: 100%"
                :retract="40"
              ></form-image>
            </view>

            <!-- 单向选择器 -->
            <view v-if="item.type === 7" style="width: 100%">
              <radio-group @change="radioChange($event, item)">
                <view class="as-layout-horizontal">
                  <label
                    style="
                      display: flex;
                      flex-direction: row;
                      margin-right: 30rpx;
                    "
                    v-for="(itemData, index) in item.itemData"
                    :key="index"
                  >
                    <radio
                      style="transform: scale(0.7)"
                      :value="itemData.value"
                      :checked="itemData.checked"
                    />
                    <view>{{ itemData.name }}</view>
                  </label>
                </view>
              </radio-group>
            </view>

            <!-- 证件照上传 -->
            <view v-if="item.type === 8" style="width: 100%">
              <view style="margin: 0 40rpx">
                <view class="text-error">{{ item.hint }}</view>
                <view
                  class="as-layout-horizontal as-gravity-center"
                  style="height: 250rpx; margin-top: 20rpx"
                >
                  <view
                    class="as-layout-vertical"
                    style="width: 90%; height: 100%"
                  >
                    <image
					  mode="aspectFill"
                      :src="
                        item.placeholderImg1
                          ? item.placeholderImg1
                          : `${$imgUrl}license2.png`
                      "
                      style="width: 100%; height: 80%"
                      @tap="ImageSelection(item, 1)"
                    ></image>
                    <view
                      class="as-gravity-center text-hint"
                      style="margin-top: 5rpx"
                    >
                      {{ item.hint1 }}
                    </view>
                  </view>
                  <view style="width: 40rpx"></view>
                  <view
                    class="as-layout-vertical"
                    style="width: 90%; height: 100%"
                  >
                    <image
                      :src="
                        item.placeholderImg2
                          ? item.placeholderImg2
                          : `${$imgUrl}license2.png`
                      "
                      style="width: 100%; height: 80%"
                      @tap="ImageSelection(item, 2)"
					  mode="aspectFill"
                    ></image>
                    <view
                      class="as-gravity-center text-hint"
                      style="margin-top: 5rpx"
                    >
                      {{ item.hint2 }}
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 车牌号输入 -->
            <view v-if="item.type === 9" style="width: 100%">
              <view style="margin: 20rpx 30rpx 0 30rpx">
                <car-num-ber-input
                  @numberInputResult="numberInputResult($event, item)"
                >
                </car-num-ber-input>
              </view>
            </view>

            <!-- 车牌号输入 -->
            <view v-if="item.type === 10" style="width: 100%">
              <pick-regions
                :defaultRegion="defaultRegionCode"
                @getRegion="handleGetRegion($event, item)"
              >
                <view class="text">
                  {{
                    item[item.value]
                      ? item.itemKey
                        ? item[item.value][item.itemKey]
                        : item[item.value]
                      : item.hint
                      ? item.hint
                      : "请选择" + item.title
                  }}
                </view>
              </pick-regions>
            </view>
          </view>
        </view>

        <view
          v-show="index !== formData.length - 1 && !item.underline"
          class="as-line3"
          style="margin: 0rpx 20rpx 0rpx 20rpx"
        ></view>
      </view>
    </view>

    <button class="btn btn-text as-gravity-center" form-type="submit">
      {{ config ? config.submitName : "提交" }}
    </button>
  </form>
</template>
<script setup lang="ts">
import { TypeData } from "./tools";
import { request } from "@/utils/network/request.js";
import carNumBerInput from "@/components/car-number-input/car-number-input";
import { pathToBase64 } from "@/utils/util/imageTool.js";
import pickRegions from "@/components/pick-regions/pick-regions.vue";
import { fileURL } from "@/datas/fileURL.js";

const defaultRegionCode = "520115";
const props = defineProps({
  formData: {
    type: Array as () => Array<TypeData>,
    default: () => [],
  },
  config: {
    type: Object,
    default: function () {
      return {
        submitName: "提交", //提交按钮名称
        titleWidth: 160, //标题宽度
      };
    },
  },
});

//defineEmits
const emit = defineEmits<{
  (e: "submit", content: any): void;
  (e: "uploadImg", content: any, item: TypeData, index: Number): void;
  (e: "radioChange", event: any, item: TypeData): void;
}>();
//defineExpose 可宏来显式指定在 <script setup> 组件中要暴露出去的属性。

//普通选择器
function bindPickerChange(e: any, item: TypeData) {
  let select = e.target.value;
  // #ifdef H5
  select = e.detail.value;
  // #endif
  if (item.mode === "date" || item.mode === "time") {
    /* 日期选择器*/
    item[item.value] = select;
  } else {
    /* 普通选择器*/
    item[item.value] = item.itemData[select];
  }
}

// 获取选择的地区
function handleGetRegion(e: any, item: TypeData) {
  console.log("输出内容", e);
  item[item.value] = e[0].name + "-" + e[1].name + "-" + e[2].name;
}

//多项选择器
function checkboxChange(e: any, item: TypeData) {
  item[item.value] = e.detail.value; /* 赋值*/
}

//单项选择器
function radioChange(e: any, item: TypeData) {
  item[item.value] = e.detail.value; /* 赋值*/
  emit("radioChange", e, item);
}

//富文本框输入内容
function textareaInput(e: Event, item: TypeData) {
  item.num = item[item.value].length;
}

//点击图片按钮
function backImg(e: Event, item: TypeData) {
  item[item.value] = e;
}

//车牌输入
function numberInputResult(e: Event, item: TypeData) {
  console.log("输出内容", e);
  item[item.value] = e;
}

//选择图片按钮
function ImageSelection(item: TypeData, index: number) {
  uni.chooseImage({
    count: 1, //最多可以选择的文件个数
    sourceType: ["camera"], //album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
    success(res: any) {
      if (res.tempFiles[0].size > 2000000) {
        uni.showToast({
          title: "图片大于2M，请重新上传",
          icon: "none",
          duration: 1500,
        });
        return;
      }

      // #ifdef MP-WEIXIN
      uni.getFileSystemManager().readFile({
        filePath: res.tempFiles[0].tempFilePath, //要读取的文件的路径
        encoding: "base64", //编码格式
        success: (res) => {
          let imgBase64 = res.data;
          let reqData = {
            imageBase: imgBase64,
            accountNum: "qtzl_xcx",
            secretKey: "4DE47302-EDC7-41D4-888F-59A79DF4EA46",
          };
          //上传给服务器
          uni.showLoading({
            title: "正在加载中...",
            mask: true,
          });
          //文件上传
          request("", {
            baseUrl: "https://etcfile.etcjz.cn/v1/file/uploadImageBaseFile",
            data: reqData,
          }).then((content) => {
            uni.hideLoading();
            if (content.rc != "00") {
              uni.showModal({
                title: "请求错误",
                content: "图片上传失败",
                showCancel: false,
                confirmText: "取消",
              });
            }
            //处理后的 Data
            let data = {
              source: 2, //来源
              imageBase64: imgBase64,
              imageType: index,
              imageUrl: content.data.fileUrl,
            };
            emit("uploadImg", data, item, index);
          });
        },
        fail: (err) => {
          console.log("错误提示", err);
        },
      });
      // #endif

      // #ifdef H5
      pathToBase64(res.tempFilePaths[0]).then((data) => {
        let base64 = data.replaceAll("data:image/jpeg;base64,", "");
        base64 = base64.replaceAll("data:image/png;base64,", "");
        base64 = base64.replaceAll("data:image/jpg;base64,", "");
        let reqData = {
          imageBase: base64,
          accountNum: "qtzl_xcx",
          secretKey: "4DE47302-EDC7-41D4-888F-59A79DF4EA46",
        };
        //上传给服务器
        uni.showLoading({
          title: "文件上传中...",
          mask: true,
        });
        //文件上传
        request("", {
          baseUrl: "https://etcfile.etcjz.cn/v1/file/uploadImageBaseFile",
          data: reqData,
        })
          .then((content) => {
            console.log("上传结果", content);
            uni.hideLoading();
            if (content.rc != "00" && content.rc != 0) {
              uni.showModal({
                title: "请求错误",
                content: "图片上传失败",
                showCancel: false,
                confirmText: "取消",
              });
            }
            //展示缩略图
            if (index % 2 != 0) {
              //奇数第一张 偶数第二张
              item.placeholderImg1 = content.data.fileUrl;
              item[item.value.split(",")[0]] = content.data.fileUrl;
            } else {
              item.placeholderImg2 = content.data.fileUrl;
              item[item.value.split(",")[1]] = content.data.fileUrl;
            }
            //只展示缩略图
            if (!item.inputType) {
              emit("uploadImg", data, item, index);
            } else {
              //if(item.type === 1)
              //证件OCR识别
              uni.showLoading({
                title: "证件识别中...",
                mask: true,
              });
              let reqData2 = {
                imageDriveBase: "",
                imageBase64: base64,
                imageType: index % 2 != 0 ? 1 : 2, //1代表身份证正面，2代表反面
                imageUrl: content.data.fileUrl,
              };
              //默认身份证
              let code = "IF010012019070410001";
              if (item.inputType == "2") {
                //2为行驶证
                code = "IF010012019070410002";
                reqData2.imageBase64 = "";
                reqData2.imageDriveBase = base64;
              }
              request(code, {
                data: reqData2,
              }).then((ocr) => {
                uni.hideLoading();
                if (ocr.rc !== "00") {
                  uni.showModal({
                    title: "请求错误",
                    content: "证件识别失败",
                    showCancel: false,
                    confirmText: "取消",
                  });
                }
                let data = ocr.rd;
                //[身份证正面]姓名(name) 住址(address) 出生日期(birthday) 身份证号(idno) 民族(nation)
                //[身份证反面]证件机关(agency) 有效起始日期(begindate) 有效结束日期(enddate)
                emit("uploadImg", data, item, index);
              });
            }
          })
          .catch((e) => {
            console.log("输出内容", e);
          });
      });
      // #endif
    },
    fail(res: any) {
      if (!res.authSetting["scope.album"]) {
        uni.showModal({
          title: "授权失败",
          content: "需要从您的相机或相册获取图片，请在设置界面打开相关权限",
          success: (res) => {
            if (res.confirm) {
              uni.openSetting();
            }
          },
        });
      }
    },
  });
}

function showToast(hint: string) {
  uni.showToast({
    icon: "none",
    title: hint,
  });
}

//内容提交
function formSubmit() {
  let content = {};
  /* 整理数据对象返回内容 */
  for (var i = 0; i < props.formData.length; i++) {
    let data = props.formData[i];
    /* 时间另外判断 */
    if (data.required) {
      let reg = new RegExp("：", "g"); //g代表全部
      let newMsg = data.title.replace(reg, "");
      if (data.value.indexOf(",") != -1 && data.type === 8) {
        if (!data[data.value.split(",")[0]]) {
          showToast(data.hint1 + "不能为空");
          return;
        } else if (!data[data.value.split(",")[1]]) {
          showToast(data.hint2 + "不能为空");
          return;
        }
      } else if (!data[data.value]) {
        showToast(newMsg + "不能为空");
        return;
      }
    }
    if (data.value.indexOf(",") != -1 && data.type === 8) {
      if (data[data.value.split(",")[0]]) {
        content[data.value.split(",")[0]] = data[data.value.split(",")[0]];
      }
      if (data[data.value.split(",")[1]]) {
        content[data.value.split(",")[1]] = data[data.value.split(",")[1]];
      }
    } else if (data.type === 10) {
      console.log("输出内容========", data);
      for (var i = 0; i < data.value.split(",").length; i++) {
        content[data.value.split(",")[i]] = data[data.value].split("-")[i];
      }
    } else {
      if (data.type === 4 && data.name) {
        content[data.value] = data[data.value][data.name];
      } else {
        content[data.value] = data[data.value];
      }
    }
  }
  emit("submit", content);
}
</script>
<style lang="scss" scoped>
.img-size {
  width: 30rpx;
  height: 30rpx;
}

.btn {
  height: 80rpx;
  background: #307afe;
  opacity: 1;
  border-radius: 100rpx;
  margin: 20rpx 20rpx 20rpx 20rpx;
}

.btn-text {
  color: #ffffff;
  font-size: 28rpx;
}
</style>