@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/formComponents/phoneComponents/components/datePicker.vue

@@ -1,101 +0,0 @@
-<template>
-  <!-- 弹框选择时间或日期组件 -->
-  <van-popup v-model="showPicker" position="bottom" get-container="body">
-    <van-datetime-picker
-      v-model="currentDate"
-      :type="dateType"
-      :min-date="dMinDate"
-      :max-date="dMaxDate"
-      @confirm="onConfirm"
-      @cancel="showPicker = false"
-    />
-  </van-popup>
-</template>
-
-<script>
-import moment from "moment";
-export default {
-  props: {
-    // 限制时间选择器可以选择的最小日期
-    minDate: {
-      default: "",
-    },
-    maxDate: {
-      default: "",
-    },
-    // datehour 日期和小时，time 小时和分钟
-    // datetime 完整时间，包括年月日和小时、分钟。
-    // month-day 即可选择月份和日期（从 2.8.4 版本开始支持）
-    // year-month 年月
-    // date 年月日
-    type: {
-      type: String,
-      default: "date",
-    },
-    // 时间格式：yyyy-MM-dd
-    format: {
-      type: String,
-      default: "yyyy-MM-dd",
-    },
-  },
-  data() {
-    return {
-      currentDate: "", // 默认日期 当天
-      showPicker: false, // 弹框是否显示
-    };
-  },
-  computed: {
-    // 日期选择器可以选择的最大时间【没有设置的情况下为当前时间100年后】
-    dMaxDate() {
-      if (this.maxDate && new Date(this.maxDate).toString() != "Invalid Date") {
-        return new Date(this.maxDate);
-      }
-      return new Date(new Date().setFullYear(new Date().getFullYear() + 100));
-    },
-    // 日期选择器可以选择的最小时间
-    dMinDate() {
-      if (this.minDate && new Date(this.minDate).toString() != "Invalid Date") {
-        return new Date(this.minDate);
-      }
-      return new Date(1960, 0, 1);
-    },
-    // 日期类型
-    dateType() {
-      return {
-        date: "date",
-        daterange: "date",
-        week: "date",
-        month: "year-month",
-        year: "date",
-        datetime: "datetime",
-      }[this.type];
-    },
-  },
-  methods: {
-    // 从外部打开时间选择器,datetime-回显的时间
-    open(datetime) {
-      this.currentDate = new Date();
-      if (datetime) {
-        this.currentDate = new Date(moment(datetime).format());
-      }
-      this.toggle(true);
-    },
-
-    // 确认选择某一日期/时刻
-    onConfirm(value) {
-      // vant组件与elementUI组件对时间格式显示不一样，vantUI yyyy-mm-dd 必须大写 即 YYYY-MM-DD
-      let formatStr = this.format
-        .replace("yyyy", "YYYY")
-        .replace("mm", "MM")
-        .replace("dd", "DD");
-      let dateValue = moment(value, moment.ISO_8601).format(formatStr);
-      this.$emit("callBack", dateValue);
-      this.toggle(false);
-    },
-
-    toggle(type) {
-      this.showPicker = type;
-    },
-  },
-};
-</script>

package/src/components/formGenerator/formComponents/phoneComponents/components/esignDialog.vue

@@ -1,156 +0,0 @@
-<template>
-  <!-- 签字的弹框 -->
-  <van-popup
-    class="pho-esign-dialog"
-    v-model="show"
-    v-if="show"
-    position="bottom"
-    closeable
-    round
-    get-container="body"
-  >
-    <!-- <div
-      class="pho-esign-content"
-      :style="{width:signHeight+'px',height:signWidth+'px',transform: `rotate(90deg) translateY(-${signWidth}px)`}"
-    >-->
-    <div class="pho-esign-content">
-      <div class="pho-esign-show">
-        <vue-esign
-          class="esign"
-          ref="esignRef"
-          :width="signWidth-32"
-          :height="(signWidth-32)*3/8"
-          :isCrop="isCrop"
-          v-bind="$attrs"
-        />
-      </div>
-      <div class="pho-esign-button">
-        <van-button block round @click="handleGenerate" type="info">生成签字图片</van-button>
-        <van-button block round @click="handleReset" type="warning">清空画板</van-button>
-        <!-- <van-button size="small" @click="handleBack">退出</van-button>
-        <div class="pho-esign-button--right">
-          <span class="pho-esign-button-text">画笔粗细</span>
-          <van-stepper v-model="lineWidth" min="1" max="10" />
-          <van-button size="small" @click="handleGenerate" type="info">生成签字图片</van-button>
-          <van-button size="small" @click="handleReset" type="warning">清空画板</van-button>
-        </div>-->
-      </div>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
-      <el-button @click="handleReset" type="warning">清空画板</el-button>
-      <el-button @click="show = false">取消</el-button>
-    </span>
-  </van-popup>
-</template>
-
-<script>
-import { Toast } from "vant";
-import VueEsign from "vue-esign";
-
-export default {
-  components: {
-    VueEsign,
-  },
-  data() {
-    return {
-      show: false, // 弹框是否开启
-      showPopover: false,
-      lineWidth: 4,
-      lineColor: "#000000",
-      bgColor: "",
-      isCrop: false,
-      signHeight: 0,
-      signWidth: 0,
-    };
-  },
-  computed: {
-    lineOpts() {
-      return new Array(10).fill(1).map((v, i) => {
-        return { text: ++i };
-      });
-    },
-  },
-  methods: {
-    open() {
-      this.show = true;
-      this.signHeight = document.body.clientHeight;
-      this.signWidth = document.body.clientWidth;
-    },
-    onSelect(action) {
-      Toast(action);
-    },
-    handleBack() {
-      this.show = false;
-    },
-    handleReset() {
-      // 清空画布
-      this.$refs.esignRef.reset();
-    },
-    handleGenerate() {
-      this.$refs.esignRef
-        .generate()
-        .then((res) => {
-          // 得到了签字生成的base64图片
-          Toast.success("生成成功");
-          this.$emit("update", res);
-          this.show = false;
-        })
-        .catch(() => {
-          //  没有签名，点击生成图片时调用
-          Toast.fail("未签名！");
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pho-esign-dialog {
-  // width: 100vw;
-  // height: 50vh;
-  // overflow: hidden;
-  .pho-esign-content {
-    // overflow: auto;
-    /* 设置旋转中心点 */
-    // transform-origin: left top;
-    padding: 16px;
-    padding-top: 53px;
-    box-sizing: border-box;
-    // display: flex;
-    // flex-direction: column;
-    // justify-content: space-between;
-  }
-  .pho-esign-button {
-    margin-top: 12px;
-    display: flex;
-    .van-button {
-      margin: 0 10px;
-    }
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    // font-size: 13px;
-    // .van-button + .van-button {
-    //   margin-left: 10px;
-    // }
-    // .van-stepper,
-    // .el-color-picker {
-    //   margin-right: 10px;
-    // }
-    // .pho-esign-button--right {
-    //   display: flex;
-    // }
-    // .pho-esign-button-text {
-    //   margin-right: 8px;
-    //   display: flex;
-    //   align-items: center;
-    // }
-  }
-  .pho-esign-show {
-    .esign {
-      border: 1px dashed #c2c1c1;
-    }
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/filesShow.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="file-show">
-    <van-cell
-      class="file-show-item"
-      center
-      v-for="(item, i) in value"
-      :key="i"
-      :title="item.name"
-      @click="openFile(item)"
-    >
-      <template #icon>
-        <svg-icon :iconClass="formatFile(item.name).svg" class="file-show-img" />
-      </template>
-      <template #right-icon v-if="!onlyShow">
-        <div v-if="item.url" @click.stop="clickDelete(i)">
-          <van-icon name="close" class="delete-icon" />
-        </div>
-        <van-loading v-else type="spinner" size="15px">正在上传</van-loading>
-      </template>
-    </van-cell>
-  </div>
-</template>
-
-<script>
-import { formatFile } from "../../../utils/index";
-import { downloadFile } from "@/api/data";
-import { Toast } from "vant";
-export default {
-  props: {
-    // 回显的文件列表
-    value: {
-      type: Array,
-      default: () => []
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: ""
-    },
-    // 文件下载地址
-    download: {
-      type: String,
-      default: ""
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      list: this.value
-    };
-  },
-
-  methods: {
-    formatFile,
-    openFile(item) {
-      if (!item.url) {
-        return;
-      }
-      // 文件下载
-      let formDate = new FormData();
-      formDate.append(this.dName, item.id);
-      formDate.append('filename', item.name);
-      Toast.loading({ forbidClick: true, duration: 15000 });
-      downloadFile(
-        this.download,
-        formDate,
-        () => {
-          setTimeout(() => {
-            Toast.clear();
-          }, 500);
-        },
-        msg => {
-          Toast.fail("下载失败");
-        }
-      );
-    },
-
-    // 删除文件
-    clickDelete(i) {
-      if (this.readonly) return;
-      const newFiles = this.value.filter((item, index) => index !== i);
-      this.$emit("update:value", newFiles);
-      this.$emit("change", newFiles);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.file-show {
-  width: 100%;
-  box-sizing: border-box;
-  .file-show-item {
-    text-align: left;
-    cursor: pointer;
-    background-color: rgba($color: $blue, $alpha: 0.05);
-    border-radius: 4px;
-    padding: 8px;
-    margin-bottom: 8px;
-    .file-show-img {
-      font-size: 25px;
-      margin-right: 5px;
-    }
-    .delete-icon {
-      font-size: 22px;
-      color: red;
-    }
-    .van-loading {
-      white-space: nowrap; //禁止换行
-      .van-loading__text {
-        font-size: 12px;
-        color: $blue;
-      }
-    }
-  }
-  .file-show-item:last-child {
-    margin-bottom: 0px;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/imageShow.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class>
-    <ul class="pho-image-show">
-      <li v-for="(item, i) in value" :key="i">
-        <van-image :src="item.url" @click="onPreview(item, i)"></van-image>
-        <div class="pho-image-show--mask" v-if="!item.url">
-          <van-loading size="20px" vertical></van-loading>
-        </div>
-        <div v-if="!onlyShow" class="pho-image-show--delete" @click.stop="clickDelete(i)">
-          <van-icon name="cross" />
-        </div>
-      </li>
-      <!-- <li v-if="!onlyShow"> -->
-      <slot name="default"></slot>
-      <!-- </li> -->
-    </ul>
-  </div>
-</template>
-
-<script>
-import { formatFile } from "../../../utils/index";
-import { ImagePreview } from "vant";
-export default {
-  props: {
-    // 回显的文件列表
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    // 只显示
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: "",
-    },
-    // 文件下载地址
-    download: {
-      type: String,
-      default: "",
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {};
-  },
-
-  methods: {
-    formatFile,
-    onPreview(item, startPosition) {
-      if (!item.url) return;
-      const images = this.value
-        .filter((item) => item.url)
-        .map((item) => item.url + "");
-      ImagePreview({ images, startPosition, closeable: true });
-    },
-
-    // 删除文件
-    clickDelete(i) {
-      if (this.readonly) return;
-      const value = this.value;
-      value.splice(i, 1);
-      this.$emit("update:value", value);
-      this.$emit("change", value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.pho-image-show {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 16px;
-  li {
-    position: relative;
-    margin: 0 8px 8px 0;
-    cursor: pointer;
-    width: 80px;
-    height: 80px;
-
-    .van-image {
-      width: 100%;
-      height: 100%;
-    }
-    .pho-image-show--mask {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: rgba(50, 50, 51, 0.88);
-      .van-loading__text {
-        font-size: 12px;
-        color: #fff;
-      }
-    }
-    .pho-image-show--delete {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 14px;
-      height: 14px;
-      text-align: center;
-      line-height: 14px;
-      background-color: rgba(0, 0, 0, 0.7);
-      border-radius: 0 0 0 12px;
-      font-size: 8px;
-      color: #fff;
-    }
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/nameShow.vue

@@ -1,84 +0,0 @@
-<template>
-  <van-row class="name-show">
-    <van-col class="name-show-item" span="6" v-for="item in value" :key="item[props.response.id]">
-      <FGNameImg
-        :portraitURL="item[props.response.avatar]"
-        :name="item[props.response.name]"
-        :defaultSvg="'default-'+item[props.response.type]"
-        layout="vertical"
-        imageWidth="30"
-      />
-      <van-icon
-        name="clear"
-        class="name-show-del"
-        v-if="!onlyShow"
-        @click="handleDelete(item[props.response.id])"
-      />
-    </van-col>
-  </van-row>
-</template>
-
-<script>
-import FGNameImg from "@/components/huComponents/FGNameImg.vue";
-export default {
-  components: {
-    FGNameImg,
-  },
-  name: "",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    props: {
-      type: Object,
-      default: () => {},
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    handleDelete(id) {
-      if (this.readonly) return;
-      const select = this.value.filter(
-        (item) => item[this.props.response.id] !== id
-      );
-      this.$emit("update", select);
-      this.$emit("change", select);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.name-show {
-  width: 100%;
-  box-sizing: border-box;
-  .hu-nameImg--vertical .hu-nameImg-text {
-    width: 100% !important;
-  }
-  .name-show-item {
-    position: relative;
-    .name-show-del {
-      position: absolute;
-      right: 14px;
-      top: -6px;
-      color: red;
-      cursor: pointer;
-    }
-  }
-}
-</style>