@xfu0401/form-generator 1.0.1 → 1.0.2

package/src/components/formGenerator/formComponents/phoneComponents/assistComs/formTableExport.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="pho-form-item">
-    <div class="pho-form-item-title" v-if="$attrs.showLabel">{{$attrs.label}}</div>
-    <div class="Fg-sub" style="padding:10px 16px">
-      <div class="Fg-sub-item" v-for="(item,i) in data" :key="i">
-        <div class="Fg-sub-item--top">
-          第{{i+1}}项
-          <i class="el-icon-close" @click="handleDelete(i)" v-if="!$attrs.onlyShow "></i>
-        </div>
-        <div class="pho-form-item">
-          <van-field
-            v-for="cell in head"
-            :key="cell.prop"
-            :label="cell.label"
-            clearable
-            maxlength="200"
-            :placeholder="'请输入' + cell.label"
-            v-model="item[cell.prop]"
-          >
-            <div slot="input" v-if="$attrs.onlyShow">{{item[cell.prop]}}</div>
-          </van-field>
-        </div>
-      </div>
-      <div v-if="!$attrs.onlyShow">
-        <van-button
-          icon="plus"
-          native-type="button"
-          @click.stop="handleAdd(data.length)"
-          size="small"
-        >添加</van-button>
-        <van-button
-          icon="replay"
-          native-type="button"
-          @click.stop="handleReset"
-          size="small"
-          style="margin-left:10px"
-        >重置</van-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { deepClone } from "@/components/formGenerator/utils";
-import { Dialog } from "vant";
-
-export default {
-  name: "phone-form-table-export",
-  components: {},
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-    // 表格相关数据
-    dataObj: {
-      type: Object,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      data: this.value || [],
-    };
-  },
-  watch: {
-    value(newValue, oldValue) {
-      this.data = this.value || [];
-    },
-  },
-  computed: {
-    // 表格头部数据
-    head() {
-      return this.dataObj.head || [];
-    },
-    // 提取表格头部数据的prop形成的对象
-    headObj() {
-      let obj = {};
-      this.head.forEach((item) => {
-        if (item.prop) {
-          obj[item.prop] = "";
-        }
-      });
-      return obj;
-    },
-  },
-  methods: {
-    // 新增
-    handleAdd(index) {
-      this.data.splice(index, 0, deepClone(this.headObj));
-      this.handleEmit();
-    },
-    handleDelete(index) {
-      this.data.splice(index, 1);
-      this.handleEmit();
-    },
-    // 重置
-    handleReset() {
-      Dialog.confirm({
-        title: "提示",
-        message: "重置后将会清空所有数据，是否继续？",
-        confirmButtonText: "继续",
-      }).then(() => {
-        this.data = [];
-        this.handleEmit();
-      });
-    },
-    handleEmit() {
-      this.$emit("input", this.data);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/assistComs/formTag.vue

@@ -1,147 +0,0 @@
-<template>
-  <div>
-    <span v-show="show" :class="tagClass" :style="newStyle">
-      <span>{{ $attrs.value }}</span>
-      <van-icon
-        v-if="$attrs.closable"
-        name="cross"
-        style="margin-left:5px;cursor: pointer;"
-        @click="show=!show"
-      />
-    </span>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-tag",
-  data() {
-    return {
-      show: true,
-    };
-  },
-  computed: {
-    plain() {
-      return this.$attrs.effect.plain;
-    },
-    tagClass() {
-      const className = "Fg-pho-tag--";
-      const type = className + this.$attrs.type;
-      const size = className + this.$attrs.size;
-      const round = this.$attrs.round ? className + "round" : "";
-      const hit = this.$attrs.hit ? "is-hit" : "";
-      const effect = className + this.$attrs.effect;
-      return `Fg-pho-tag ${size} ${type} ${round} ${hit} ${effect}`;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../../styles/phone.scss";
-$primary: $blue-1;
-$success: $green;
-$danger: $red;
-$info: $gray-6;
-$warning: $orange;
-
-.Fg-pho-tag {
-  background-color: #ecf5ff;
-  display: inline-block;
-  padding: 2px 6px;
-  line-height: 16px;
-  font-size: 12px;
-  color: $primary;
-  border: 1px solid #d9ecff;
-  border-radius: 4px;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  &.Fg-pho-tag--primary {
-    border-color: #d9ecff;
-    color: $primary;
-    &.is-hit {
-      border-color: $primary;
-    }
-    &.Fg-pho-tag--dark {
-      background-color: $primary;
-    }
-  }
-  &.Fg-pho-tag--success {
-    background-color: #f0f9eb;
-    border-color: #e1f3d8;
-    color: $success;
-    &.is-hit {
-      border-color: $success;
-    }
-    &.Fg-pho-tag--dark {
-      background-color: $success;
-    }
-  }
-  &.Fg-pho-tag--info {
-    background-color: #f4f4f5;
-    border-color: #e9e9eb;
-    color: $info;
-    &.is-hit {
-      border-color: $info;
-    }
-    &.Fg-pho-tag--dark {
-      background-color: $info;
-    }
-  }
-  &.Fg-pho-tag--danger {
-    background-color: #fef0f0;
-    border-color: #fde2e2;
-    color: $danger;
-    &.is-hit {
-      border-color: $danger;
-    }
-    &.Fg-pho-tag--dark {
-      background-color: $danger;
-    }
-  }
-  &.Fg-pho-tag--warning {
-    background-color: #fdf6ec;
-    border-color: #faecd8;
-    color: $warning;
-    &.is-hit {
-      border-color: $warning;
-    }
-    &.Fg-pho-tag--dark {
-      background-color: $warning;
-    }
-  }
-  &.Fg-pho-tag--plain {
-    background-color: #fff;
-  }
-  &.Fg-pho-tag--dark {
-    color: #fff;
-  }
-}
-
-.Fg-pho-tag--dark {
-  background-color: $primary;
-  border-color: $primary;
-}
-.Fg-pho-tag--round {
-  border-radius: 999px;
-}
-
-.Fg-pho-tag--mini {
-  height: 20px;
-  padding: 0 5px;
-  line-height: 19px;
-}
-.Fg-pho-tag--small {
-  height: 24px;
-  padding: 0 8px;
-  line-height: 22px;
-}
-
-.Fg-pho-tag--medium {
-  height: 28px;
-  line-height: 24px;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/assistComs/formText.vue

@@ -1,27 +0,0 @@
-<template>
-  <!-- 说明组件 -->
-  <div class="Fg-text" :style="newStyle">
-    <span>{{ value }}</span>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-text",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-  computed: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-text {
-  word-break: break-all;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/assistComs/formTree.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="pho-tree pho-empty">移动端暂不支持树组件</div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-tree",
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {},
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

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

@@ -1,81 +0,0 @@
-<template>
-  <!-- 自定义级联选择框 -->
-  <van-popup v-model="show" round position="bottom" get-container="body">
-    <!-- 多选 -->
-    <van-checkbox-group v-if="multiple" :value="checked" shape="square" @change="handleCheck">
-      <van-cascader
-        v-model="formValue"
-        v-bind="$attrs"
-        :options="options"
-        :field-names="fieldNames"
-        active-color="#478df4"
-        @close="show = false"
-        @change="handleChange"
-        @finish="handleConfirm"
-      >
-        <template #option="{option,selected}">
-          <div @click.stop style="width:28px">
-            <van-checkbox :name="option[props.value]" />
-          </div>
-          <span style="width:100%">{{option[props.label]}}</span>
-        </template>
-      </van-cascader>
-    </van-checkbox-group>
-    <van-radio-group v-model="checked" v-else>
-      <van-cascader
-        v-model="formValue"
-        v-bind="$attrs"
-        :options="resData"
-        :field-names="fieldNames"
-        active-color="#478df4"
-        @close="show = false"
-        @change="handleChange"
-        @finish="handleConfirm"
-      >
-        <template #option="{option,selected}">
-          <div @click.stop style="width:28px">
-            <van-radio :name="option[props.value]" />
-          </div>
-          <span style="width:100%">{{option[props.label]}}</span>
-        </template>
-      </van-cascader>
-    </van-radio-group>
-  </van-popup>
-</template>
-
-<script>
-export default {
-  props: {
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否选择任意一级
-    checkStrictly: {
-      type: Boolean,
-      default: false,
-    },
-    fieldNames: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      show: true,
-    };
-  },
-  methods: {
-    open() {
-      this.show = true;
-    },
-    close() {
-      this.show = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

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>