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

<template>
  <!-- 通用表单 modify by ht 
	     @submit="formSubmit"-->
  <form>
    <view v-for="(item, index) in formData" :key="index">
      <view v-show="!item.hide">
        <!-- 是否显示-->
        <view
          style="min-height: 80rpx"
          :class="
            item.vertical === 2 ? 'as-layout-vertical' : 'as-layout-horizontal'
          "
        >
          <!-- 标题 -->
          <view
            class="as-gravity-center-start"
            :style="{
              minWidth: config.titleWidth + 'rpx',
              marginTop: `${item.bg || item.vertical === 2 ? '30rpx' : ''}`,
            }"
            style="
              margin-left: 20rpx;
              flex-direction: row;
              display: flex;
              flex-direction: row;
            "
          >
            <!-- <image class="img-size" :src="item.required ? '../must.png' : ''"></image> -->
            <!-- :class="item.vertical === 2 ? 'text-left' : 'text-justify'" -->
            <span v-if="item.star" style="color: red">*</span>
            <view
              class="text-title"
              :style="{
                color: `#${item.labelColor ?item.labelColor:'333333'}`,
                width: '100%',
              }"
            >
              {{ item.title }}
            </view>
          </view>

          <!-- 内容 -->
          <view class="as-weight as-gravity-center-start">
            <!-- 文本内容 -->
            <view
              v-if="item.type === 1"
              :class="item.bg ? 'bg' : 'notbg'"
              class="text-hint"
              :style="item.style"
              >{{ item[item.value] }}</view
            >

            <!-- 输入框 -->
            <view
              v-if="item.type === 2"
              style="width: 100%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <view class="as-layout-horizontal" style="align-items: center">
                <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"
                  :maxlength="item.maxlength"
                  :style="item.style"
                  style="min-height: 80rpx; word-break: break-all; flex: 1"
                  @input="inputChange($event, item)"
                />

                <view v-if="item.btn" class="as-gravity-center">
                  <!-- 验证码 -->
                  <verification-code
                    v-if="item.btnType === 'code'"
                    :mobile="item.codeValue"
                  ></verification-code>
                  <button
                    v-else
                    size="mini"
                    style="background-color: #2ce242; color: #fff"
                    @click="inputBtnClickHandle(item)"
                  >
                    {{ item.btnTitle }}
                  </button>
                </view>
              </view>
            </view>

            <!-- 多项选择器 -->
            <view v-if="item.type === 3" :class="item.bg ? 'bg' : 'notbg'">
              <checkbox-group
                @change="checkboxChange($event, item)"
                :disabled="item.disabled"
              >
                <view
                  class="as-layout-horizontal"
                  style="justify-content: right"
                >
                  <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%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <!-- range[范围] value[初始选择]-->
              <view class="as-layout-horizontal" style="align-items: center">
                <view
                  v-if="item.mode === 'custom'"
                  :class="item[item.value] ? 'text' : 'text-hint'"
                  style="flex: 1"
                  @click="emit('pickerCustom', item)"
                >
                  {{
                    item[item.value]
                      ? item.itemKey
                        ? item[item.value][item.itemKey]
                        : item[item.value]
                      : item.hint
                      ? item.hint
                      : "请选择" + item.title
                  }}
                </view>

                <template v-else-if="item.mode === 'search'">
                  <view
                    :disabled="item.disabled"
                    :class="item[item.value] ? 'text' : 'text-hint'"
                    style="flex: 1"
                    @click="item.searchPickerVisible = true"
                  >
                    {{
                      item[item.value]
                        ? item.itemKey
                          ? item[item.value][item.itemKey]
                          : item[item.value]
                        : item.hint
                        ? item.hint
                        : "请选择" + item.title
                    }}
                  </view>
                  <search-picker
                    :visible="item.searchPickerVisible"
                    :dataSource="item.itemData"
                    v-model="item[item.value]"
                    @hidePicker="item.searchPickerVisible = false"
                  ></search-picker>
                </template>

                <picker
                  v-else
                  :disabled="item.disabled"
                  :range-key="item.itemKey"
                  :mode="item.mode ? item.mode : 'selector'"
                  @change="bindPickerChange($event, item)"
                  :range="item.itemData"
                  style="flex: 1"
                >
                  <view :class="item[item.value] ? 'text' : 'text-hint'">
                    {{
                      item[item.value]
                        ? item.itemKey
                          ? item[item.value][item.itemKey]
                          : item[item.value]
                        : item.hint
                        ? item.hint
                        : "请选择" + item.title
                    }}
                  </view>
                </picker>

                <image
                  class="arror"
                  :src="`${$imgUrl}common/arror-right.png`"
                ></image>
              </view>
            </view>

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

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

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

            <!-- 证件照上传 -->
            <view
              v-if="item.type === 8"
              style="width: 100%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <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
                      :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)"
                    ></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%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <view style="margin: 20rpx -20rpx 10rpx">
                <car-num-ber-input
                  @numberInputResult="numberInputResult($event, item)"
                >
                </car-num-ber-input>
              </view>
            </view>

            <!-- 省市区选择 -->
            <view
              v-if="item.type === 10"
              style="width: 100%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <view class="as-layout-horizontal" style="align-items: center">
                <pick-regions
                  :defaultRegion="defaultRegionCode"
                  @getRegion="handleGetRegion($event, item)"
                  style="flex: 1"
                >
                  <view :class="item[item.value] ? 'text' : 'text-hint'">
                    {{
                      item[item.value]
                        ? item.itemKey
                          ? item[item.value][item.itemKey]
                          : item[item.value]
                        : item.hint
                        ? item.hint
                        : "请选择" + item.title
                    }}
                  </view>
                </pick-regions>
                <image
                  class="arror"
                  :src="`${$imgUrl}common/arror-right.png`"
                ></image>
              </view>
            </view>

            <!-- 车辆图片上传 -->
            <view
              v-if="item.type === 11"
              style="width: 100%"
              :class="item.bg ? 'bg' : 'notbg'"
            >
              <view class="imgs-box as-layout-horizontal">
                <view class="img-box" v-for="(img, index) in item.imgList">
                  <form-image
                    @backImg="backImg2($event, img, item)"
                    style="width: 100%"
                    :imgWidth="120"
                    :retract="-10"
                    :showTxt="false"
                    :count="1"
                    @removeImg="removeImg2($event, img, item)"
                  ></form-image>
                  <view class="img-hint">{{ img.hint }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

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

        <view class="divider" v-if="item.divider"></view>
      </view>
    </view>

    <view class="subBtn">
      <submit-button
        :title="config ? config.submitName : '提交'"
        form-type="submit"
        @submit="formSubmit"
      ></submit-button>
    </view>
  </form>
</template>
<script setup lang="ts">
import { TypeData, ImgData } 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 { onMounted, ref } from "vue";

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

//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;
  (e: "addressInfo", content: any): void;
  (e: "inputChange", event: any, item: TypeData): void;
  (e: "pickerCustom", 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];
  }
}

//输入框后按钮点击
const inputBtnClickHandle = (item: TypeData) => {
  if (item.btnType === "address") {
    //#ifdef MP-WEIXIN
    uni.chooseAddress({
      success: (res) => {
        emit("addressInfo", res);
      },
      fail: (err) => {
        showToast("获取失败!");
      },
    });
    //#endif
  } else if (item.btnType === "code") {
    //获取验证码
    showToast("获取验证码");
  }
};

// 获取选择的地区
function handleGetRegion(e: any, item: TypeData) {
  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 inputChange(e: Event, item: TypeData) {
  emit("inputChange", e, item);
}

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

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

//点击图片按钮2
function backImg2(e: Event, imgItem: ImgData, item: TypeData) {
  imgItem[imgItem.value] = e;
  let all = true;
  let srcUrl = "";
  item.imgList.map((temp) => {
    if (!temp[temp.value]) {
      all = false;
      return;
    } else {
      srcUrl = srcUrl + temp[temp.value] + ",";
    }
  });

  if (all) {
    item[item.value] = srcUrl;
    // console.log('--------总图片路径------------');
    // console.log(item[item.value])
  }
}

//删除图片
const removeImg2 = (e: Event, imgItem: ImgData, item: TypeData) => {
  imgItem[imgItem.value] = "";
  item[item.value] = "";
};

//车牌输入
function numberInputResult(e: Event, item: TypeData) {
  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,
  });
}

//内容提交
const formSubmit = () => {
  let content = {};
  /* 整理数据对象返回内容 */
  for (var i = 0; i < props.formData.length; i++) {
    let data = props.formData[i];
    /* 时间另外判断 */
    if (data.required && !data.hide) {
      //隐藏的不用进行判断
      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.emptyHint ?data.emptyHint :`${data.hint1}不能为空`);
          return;
        } else if (!data[data.value.split(",")[1]]) {
          showToast(data.emptyHint ? data.emptyHint:`${data.hint2}不能为空`);
          return;
        }
      } else if (!data[data.value]) {
        showToast(data.emptyHint ?data.emptyHint: `${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) {
      // for (var i = 0; i < data.value.split(',').length; i++) {
      // 	content[data.value.split(',')[i]] = data[data.value].split('-')[i]
      // }
      content[data.value] = data[data.value];
    } 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;
}

.notbg {
  background-color: #ffffff;
  border-radius: 20rpx;
  min-height: 80rpx;
  line-height: 80rpx;
  padding: 8rpx 28rpx;
}

.bg {
  background-color: #f1f1f1;
  border-radius: 20rpx;
  min-height: 80rpx;
  line-height: 80rpx;
  padding: 0 28rpx;
  margin-right: 29rpx;
  margin-left: 25rpx;
  margin-top: 30rpx;
}

.textarea-bg {
  background-color: #f1f1f1;
  border-radius: 20rpx;
  height: 245rpx;
  padding: 30rpx;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*Firefox*/
  -webkit-box-sizing: border-box;
  /*Safari*/
}

.text-hint {
  font-size: 28rpx;
  color: #999999;
}

.text-title {
  font-size: 28rpx;
  color: #333333;
}

.subBtn {
  margin: 112rpx 30rpx 30rpx;
}

.divider {
  border-bottom: 1px solid #dcdcdc;
}

.arror {
  width: 35rpx;
  height: 35rpx;
}
.imgs-box {
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-bottom: -35rpx;
  padding-right: 110rpx;
  justify-content: space-between;
  .img-box {
    margin-bottom: 35rpx;
  }
  .img-hint {
    font-size: 24rpx;
    color: #333333;
    text-align: center;
  }
}
</style>