@xfu0401/form-generator 1.1.24 → 1.1.25

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formTimePicker.vue

@@ -1,112 +0,0 @@
-<template>
-  <!-- 时间选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      :value="value"
-      v-bind="$attrs"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      input-align="right"
-      :is-link="!isTop"
-      readonly
-      @click="handleClick"
-      @clear.stop
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #right-icon v-if="clearable">
-        <div @click.stop="handleClear">
-          <van-icon name="clear" />
-        </div>
-      </template>
-    </van-field>
-    <TimePicker
-      ref="TimePicker"
-      :minTime="minTime"
-      :maxTime="maxTime"
-      :format="$attrs.format"
-      @callBack="handleConfirm"
-    />
-  </div>
-</template>
-
-<script>
-import TimePicker from "../components/timePicker.vue";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-time-picker",
-  components: {
-    TimePicker,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [String, Array],
-      default: "",
-    },
-    // 是否为上下布局
-    isTop: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: "",
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = newValue || "";
-      },
-    },
-  },
-  computed: {
-    // 获取时间范围
-    selectableRange() {
-      let selectableRange = this.$attrs.pickerOptions?.selectableRange || "";
-      let rangeArray = selectableRange.split("-");
-      return rangeArray;
-    },
-    // 可选择的最小时间，格式为 10:00 不包括秒
-    minTime() {
-      return this.selectableRange[0];
-    },
-    // 可选择的最大时间，格式为 10:00 不包括秒
-    maxTime() {
-      return this.selectableRange[1];
-    },
-  },
-  methods: {
-    handleClick() {
-      if (this.$attrs.disabled || this.$attrs.readonly || this.$attrs.onlyShow)
-        return;
-      this.$refs.TimePicker.open(this.formValue);
-    },
-    handleConfirm(val) {
-      this.$emit("update", val);
-      this.$emit("change", val);
-      this.onChange(val);
-      this.$emit("confirm", val);
-    },
-    handleClear() {
-      this.$emit("update", "");
-      this.$emit("clear");
-      this.onClear();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formTimeRangePicker.vue

@@ -1,155 +0,0 @@
-<template>
-  <!-- 时间范围选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :value="formValue.join('')"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :disabled="$attrs.disabled"
-      input-align="left"
-      label-align="left"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #right-icon v-if="clearable">
-        <div @click.stop="handleClear">
-          <van-icon name="clear" />
-        </div>
-      </template>
-    </van-field>
-    <TextShow v-if="$attrs.onlyShow" :value="$utils.getDateText($attrs)" />
-    <template v-else>
-      <div class="form-range-picker right-box" v-if="!isTop">
-        <div @click="handleClick(0)" class="startPlaceholder">
-          <span v-if="formValue[0]">{{ formValue[0] }}</span>
-          <span v-else class="van-gray5">{{ $attrs.startPlaceholder }}</span>
-        </div>
-        <div class="rangeSeparator">{{ $attrs.rangeSeparator }}</div>
-        <div @click="handleClick(1)" class="endPlaceholder">
-          <span v-if="formValue[1]">{{ formValue[1] }}</span>
-          <span v-else class="van-gray5">{{ $attrs.endPlaceholder }}</span>
-        </div>
-      </div>
-      <template v-else>
-        <van-cell
-          class="date-range-cell"
-          :class="{ 'form-cell--disabled': $attrs.disabled }"
-          :title="$attrs.startPlaceholder"
-          :value="formValue[0]"
-          is-link
-          center
-          @click="handleClick(0)"
-        />
-        <van-cell
-          class="date-range-cell"
-          :class="{ 'form-cell--disabled': $attrs.disabled }"
-          :title="$attrs.endPlaceholder"
-          :value="formValue[1]"
-          is-link
-          center
-          @click="handleClick(1)"
-        />
-      </template>
-      <TimePicker
-        ref="TimePicker"
-        :minTime="minTime"
-        :maxTime="maxTime"
-        :format="$attrs.format"
-        @callBack="handleConfirm"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import TimePicker from "../components/timePicker.vue";
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-timerange-picker",
-  components: {
-    TimePicker,
-    TextShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [String, Array],
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否为上下布局
-    isTop: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      startDate: "", // 开始时间
-      endDate: "", // 结束时间
-      formValue: ["", ""], // 时间范围
-      type: 0, // 0-开始时间 1-结束时间
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = newValue || ["", ""];
-      },
-    },
-  },
-
-  computed: {
-    // 获取时间范围
-    selectableRange() {
-      let selectableRange = this.$attrs.pickerOptions?.selectableRange || "";
-      let rangeArray = selectableRange.split("-");
-      return rangeArray;
-    },
-    // 可选择的最小时间，格式为 10:00 不包括秒
-    minTime() {
-      return this.selectableRange[0];
-    },
-    // 可选择的最大时间，格式为 10:00 不包括秒
-
-    maxTime() {
-      return this.selectableRange[1];
-    },
-  },
-
-  methods: {
-    // type 0-开始时间 1-结束时间
-    handleClick(type) {
-      this.type = type;
-      if (this.$attrs.disabled || this.$attrs.readonly) return;
-      this.$refs.TimePicker.open(this.formValue[type]);
-    },
-    handleConfirm(val) {
-      this.$set(this.formValue, this.type, val);
-      this.$emit("update", this.formValue);
-      this.$emit("change", this.formValue);
-      this.$emit("confirm", this.formValue);
-      this.onChange(this.formValue);
-    },
-    handleClear() {
-      this.$emit("update", "");
-      this.$emit("clear");
-      this.onClear();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formUpload.vue

@@ -1,367 +0,0 @@
-<template>
-  <!-- 文件上传 -->
-  <div class="pho-form-item" :style="newStyle">
-    <div
-      style="display: flex; justify-content: space-between"
-      :style="isTop ? 'flex-direction: column;' : ''"
-    >
-      <van-field
-        class="form-input-hidden"
-        v-bind="$attrs"
-        :value="value"
-        :name="$attrs.__vModel__"
-        readonly
-        :label="showLabel ? label : ''"
-        :label-width="labelWidth"
-        :required="required"
-        input-align="right"
-      >
-        <span v-if="showLabel" slot="label" :style="newStyle.font">{{label}}</span>
-      </van-field>
-
-      <van-uploader
-        v-if="!$attrs.onlyShow"
-        style="padding: 0 16px 10px 16px"
-        :readonly="readonly"
-        :disabled="disabled"
-        :multiple="multiple"
-        :max-size="maxSize"
-        :max-count="limit"
-        :accept="acceptStr"
-        :preview-image="false"
-        :after-read="afterRead"
-        @oversize="onOversize"
-      >
-        <div class="form-upload-button">
-          <svg-icon iconClass="addSold" />
-        </div>
-        <div class="form-upload-tips" v-if="showTip" :style="newStyle.font">*{{ tips }}</div>
-      </van-uploader>
-    </div>
-    <!-- 展示栏 -->
-    <FilesShow
-      v-if="fileList.length"
-      :value.sync="fileList"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="readonly"
-      :dName="dName"
-      :download="download"
-      style="padding: 0 16px 10px 16px"
-      @change="handleChange"
-      @openUrl="openUrl"
-    />
-  </div>
-</template>
-
-<script>
-import { formatFile } from "../../../utils/index";
-import { Toast } from "vant";
-import OSS from 'ali-oss'
-import {requestPostJson} from "@/api/data";
-import FilesShow from "../components/filesShow";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-upload",
-  components: {
-    FilesShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // value 和 formValue 存储的都是选择的文件，前者是字符串形式，后者为数组形式
-    // 选择的文件的字符串形式
-    value: {
-      default: "",
-    },
-    // 是否为上下布局
-    isTop: {
-      type: Boolean,
-      default: false,
-    },
-    // 标签
-    label: {
-      type: String,
-      default: "",
-    },
-    // 是否必填
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    // 文件上传地址
-    action: {
-      type: String,
-      default: "",
-    },
-    // 下载地址
-    download: {
-      type: String,
-      default: "",
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: "",
-    },
-
-    // 文件大小
-    fileSize: {
-      type: [String, Number],
-      default: 50,
-    },
-    // 文件单位
-    sizeUnit: {
-      type: String,
-      default: "MB",
-    },
-    // 是否只读，仅作展示
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示文件提示语,默认展示
-    showTip: {
-      type: Boolean,
-      default: true,
-    },
-    // 文件类型
-    accept: {
-      type: [String, Array],
-      default: "",
-    },
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // label标题的宽度
-    labelWidth: {
-      type: [String, Number],
-      default: "100%",
-    },
-    // 	上传的文件字段名
-    name: {
-      type: String,
-      default: "",
-    },
-    // 最大允许上传个数
-    limit: {
-      type: Number,
-      default: 10,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      fileList: [
-        // {
-        //   name: "food.jpeg",
-        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        // },
-        // {
-        //   name: "food2.jpeg",
-        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        // },
-      ],
-      formatFile,
-    };
-  },
-
-  computed: {
-    maxSize() {
-      const fileSize = this.fileSize; // 文件大小
-      const fileUnit = this.sizeUnit; // 文件单位
-      // 实际上传的文件大小单位为B，需要将文件大小限制的单位转换为B
-      const maxSize =
-        fileSize *
-        { KB: 1024, MB: Math.pow(1024, 2), GB: Math.pow(1024, 3) }[fileUnit];
-      return maxSize;
-    },
-    acceptStr() {
-      if (!this.accept) return "";
-      return this.accept?.join(",");
-    },
-    tips() {
-      // 最大上传文件+单位
-      const sizeUnit = this.fileSize + this.sizeUnit;
-      if (this.accept) {
-        return `只能上传${this.accept}文件，且不超过${sizeUnit}的文件${
-          this.$attrs.remark || ""
-        }`;
-      }
-      return `只能上传不超过${sizeUnit}的文件${this.$attrs.remark || ""}`;
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function (nd, od) {
-        try {
-          // 回显
-          this.fileList = JSON.parse(nd || "[]");
-        } catch (error) {
-          console.log("error", error);
-        }
-      },
-    },
-  },
-
-  methods: {
-    onOversize() {
-      Toast.fail("文件大小不允许上传！");
-    },
-
-    // 文件读取完成后的回调函数
-    afterRead(param) {
-      if (this.fileList.length >= this.limit) {
-        return Toast(`最多允许上传${this.limit}个文件`);
-      }
-      // 只能上传一个文件，将原文件清空再添加
-      if (!this.multiple) this.fileList = [];
-      const file = param.file
-      const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
-      const _this = this
-      requestPostJson("/MCAPI/sts_token", {filename: file.name, ext: ext}).then(res => {
-        if (!res.result) {
-          _this.onError()
-          return
-        }
-        const credentials = res.data
-        console.log("初始化oss")
-        const client = new OSS({
-          // 将<YOUR_BUCKET>设置为OSS Bucket名称。
-          bucket: "dhmp-file",
-          // 将<YOUR_REGION>设置为OSS Bucket所在地域，例如region: 'oss-cn-hangzhou'。
-          region: "oss-cn-chengdu",
-          accessKeyId: credentials.AccessKeyId,
-          accessKeySecret: credentials.AccessKeySecret,
-          stsToken: credentials.SecurityToken
-        });
-        // img 文件夹下  obj.file.name 文件的名字 obj.file文件对象
-        client.multipartUpload(credentials.path, file, {
-          // 进度条的配置项
-          progress: function (percentage) { // 获取进度条的值
-            const percent = percentage * 100
-            Toast(`上传中${percent.toFixed(2)}%..`)
-          },
-          // 每传输完一个分片 进度条会走一个百分比 不设置的话由于partsize过大 可能导致很长时间进度条都看不到效果
-          partSize: 102400 // 指定上传的每个分片的大小，范围为100 KB~5 GB。单个分片默认大小为1 * 1024 * 1024（即1 MB）
-        }).then(async response => {
-          console.log(response)
-          if (response.res.status === 200) {
-            _this.loading = false
-            let fileArr = [];
-            if (_this.multiple) {
-              fileArr = JSON.parse(this.value || "[]");
-            }
-            fileArr.push({
-              id: credentials.path,
-              name: file.name,
-              url: credentials.pathAll
-            });
-            _this.handleChange(fileArr);
-            Toast.success("上传成功！");
-          }
-        }).catch(function (err) {
-          console.error('error: ', err)
-          _this.onError()
-        })
-      }).catch(err => {
-        console.error('error: ', err)
-        this.onError()
-      })
-      // let formData = new FormData();
-      // if (Array.isArray(file)) {
-      //   // 选择多个文件
-      //   file.forEach((item) => {
-      //     formData.append(this.name, item.file);
-      //     this.fileList.push({
-      //       id: item.file?.lastModified,
-      //       name: item.file?.name,
-      //       url: "",
-      //     });
-      //   });
-      // } else {
-      //   // 选择单个文件
-      //   formData.append(this.name, file.file);
-      //   this.fileList.push({
-      //     id: file.file?.lastModified,
-      //     name: file.file?.name,
-      //     url: "",
-      //   });
-      // }
-      // requestPost2(this.action, formData)
-      //   .then((res) => {
-      //     if (res.code == 1) {
-      //       let fileArr = [];
-      //       if (this.multiple) {
-      //         fileArr = JSON.parse(this.value || "[]");
-      //       }
-      //       Toast.success("上传成功！");
-      //       try {
-      //         res.result.mFilePath.forEach((path, index) => {
-      //           fileArr.push({
-      //             id: res.result.idList[index],
-      //             name: res.result.mFileName[index],
-      //             url: path,
-      //             size: res.result.fileLengths[index] || "", // 文件大小
-      //           });
-      //           this.handleChange(fileArr);
-      //         });
-      //       } catch (error) {
-      //         this.onError(error);
-      //       }
-      //     } else {
-      //       this.onError(res);
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     this.onError(err);
-      //   });
-    },
-    // 上传失败
-    onError(err) {
-      console.log(err);
-      Toast.fail(err.msg || `上传失败！`);
-      this.fileList = JSON.parse(this.value || "[]");
-    },
-
-    handleChange(fileArr) {
-      const value = fileArr.length ? JSON.stringify(fileArr) : null;
-      this.$emit("update", value);
-      this.$emit("change", value);
-      this.onChange(value);
-    },
-    openUrl(item) {
-      this.$emit('openUrl', item)
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.form-upload-tips {
-  margin-top: 5px;
-  font-size: 13px;
-  color: $blue;
-}
-.form-upload-button {
-  color: $blue;
-  font-size: 48px;
-  display: inline-block;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formUploadTemp.vue

@@ -1,81 +0,0 @@
-<template>
-  <!-- 附件上传控件 -->
-  <div class="pho-upload-temp">
-    <FormUpload v-model="formValue" v-bind="$attrs" @change="handleChange" />
-    <phone-form-link
-      v-if="!$attrs.onlyShow"
-      :value="linkName"
-      class="pho-upload-temp-link"
-      :href="href"
-      :type="type"
-      :icon="icon"
-      target="_blank"
-      :underline="false"
-    ></phone-form-link>
-  </div>
-</template>
-<script>
-import FormUpload from "./formUpload.vue";
-export default {
-  name: "phone-form-upload-temp",
-  components: {
-    FormUpload,
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    linkName: {
-      type: String,
-      default: "",
-    },
-    href: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      formValue: "",
-      loading: false,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function (nd, od) {
-        this.formValue = nd;
-      },
-    },
-  },
-  methods: {
-    handleChange(value) {
-      this.$emit("input", value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pho-upload-temp {
-  position: relative;
-  .pho-upload-temp-link {
-    position: absolute;
-    top: 12px;
-    right: 16px;
-  }
-}
-</style>