@xfu0401/form-generator 1.1.18 → 1.1.19

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

@@ -1,25 +0,0 @@
-<template>
-  <div class="Fg-text-show">{{value}}</div>
-</template>
-
-<script>
-export default {
-  name: "TextShow",
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.Fg-text-show {
-  padding: 10px 16px;
-  padding-top: 0;
-  color: #323233;
-  word-break: break-all;
-}
-</style>

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

@@ -1,90 +0,0 @@
-<template>
-  <!-- 弹框选择时间或日期组件 -->
-  <van-popup v-model="showPicker" position="bottom" get-container="body">
-    <van-datetime-picker
-      v-model="currentDate"
-      type="time"
-      :min-hour="minHour"
-      :max-hour="maxHour"
-      :min-minute="minMinute"
-      :max-minute="maxMinute"
-      @confirm="onConfirm"
-      @cancel="showPicker = false"
-    />
-  </van-popup>
-</template>
-
-<script>
-import moment from "moment";
-
-export default {
-  props: {
-    // 可选择的最小时间，格式为 10:00 不包括秒
-    minTime: {
-      default: "",
-    },
-    // 可选择的最大时间，格式为 10:00 不包括秒
-    maxTime: {
-      default: "",
-    },
-
-    // 时间格式：HH:mm:ss
-    format: {
-      type: String,
-      default: "HH:mm:ss",
-    },
-  },
-  data() {
-    return {
-      currentDate: "", // 默认日期 当天
-      showPicker: false, // 弹框是否显示
-    };
-  },
-  computed: {
-    // 可选的最小小时
-    minHour() {
-      let times = this.minTime.split(":") || [];
-      return times[0] || 0;
-    },
-    // 可选的最大小时
-    maxHour() {
-      let times = this.maxTime.split(":") || [];
-      return times[0] || 23;
-    },
-    // 可选的最小分钟
-    minMinute() {
-      let times = this.minTime.split(":") || [];
-      return times[1] || 0;
-    },
-    // 可选的最大分钟
-    maxMinute() {
-      let times = this.maxTime.split(":") || [];
-      return times[1] || 59;
-    },
-  },
-  methods: {
-    // 从外部打开时间选择器,datetime-回显的时间
-    open(datetime) {
-      if (datetime) {
-        this.currentDate = datetime;
-      }
-      this.toggle(true);
-    },
-
-    // 确认选择某一时刻
-    onConfirm(value) {
-      // 带上日期的时间，moment无法识别仅有时间的格式
-      let datetime = moment().format("YYYY-MM-DD") + " " + value + ":00";
-      let dateValue = moment(datetime, moment.ISO_8601).format(
-        this.format.toUpperCase()
-      );
-      this.$emit("callBack", dateValue);
-      this.toggle(false);
-    },
-
-    toggle(type) {
-      this.showPicker = type;
-    },
-  },
-};
-</script>

package/src/components/formGenerator/formComponents/phoneComponents/inputComs/formAutocomplete.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-model="formValue"
-      :name="$attrs.__vModel__"
-      :rules="$attrs.rules"
-      :required="$attrs.required"
-      style="padding-bottom: 0"
-      :disabled="$attrs.disabled"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template slot="input">
-        <i
-          v-if="$attrs.prefixIcon"
-          :class="$attrs.prefixIcon"
-          style="color: #969799; margin-right: 8px"
-        />
-        <TextShow style="padding-left:0;padding-right:0" :value="value" v-if="$attrs.onlyShow" />
-        <van-popover
-          v-else
-          v-model="showPopover"
-          :actions="actions"
-          get-container="body"
-          trigger="click"
-          :style="{width:'100%','--fieldWidth':fieldWidth}"
-          @select="onSelect"
-        >
-          <template #reference>
-            <div ref="Field">
-              <van-field
-                v-model="formValue"
-                style="padding: 0"
-                :type="showPassword ? 'password' : type"
-                :placeholder="$attrs.placeholder"
-                :clearable="$attrs.clearable"
-                :maxlength="$attrs.maxlength"
-                :readonly="$attrs.readonly"
-                :disabled="$attrs.disabled"
-                @input="onInput"
-                @blur="onBlur"
-                @focus="onFocus"
-                @change="onChange"
-                @clear="onClear"
-              />
-            </div>
-          </template>
-        </van-popover>
-      </template>
-      <template slot="right-icon" v-if="$attrs.suffixIcon">
-        <i :class="$attrs.suffixIcon" />
-      </template>
-    </van-field>
-
-    <div
-      v-if="!$attrs.onlyShow"
-      :class="$attrs.disabled ? 'pho-disabled' : ''"
-      class="van-field__word-limit"
-      style="padding: 0 16px 10px; margin: 0"
-    >
-      <template v-if="$attrs.showWordLimit">
-        <span class="van-field__word-num" style="margin-top: 4px">
-          {{
-          formValue?.length || 0
-          }}
-        </span>
-        /{{ $attrs.maxlength }}
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  components: { TextShow },
-  mixins: [comMixin],
-  name: "phone-form-autocomplete",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-
-    // type: text-文本 textarea-文本域 password-密码框
-    type: {
-      type: String,
-      default: "text",
-    },
-    // 是否为密码输入框
-    showPassword: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      showPopover: false,
-    };
-  },
-  computed: {
-    formValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("update", val);
-      },
-    },
-    fieldWidth() {
-      const width = this.$refs?.Field?.offsetWidth;
-      return width + "px";
-    },
-    actions() {
-      const actions = this.querySearch(this.value);
-      return actions.map((item) => {
-        return {
-          text: item[this.dataObj.props.value],
-          className: "pho-autocomplete-item",
-        };
-      });
-    },
-  },
-  methods: {
-    onSelect(action) {
-      this.$emit("update", action.text);
-    },
-    querySearch(queryString) {
-      const results = queryString
-        ? this.resData.filter(this.createFilter(queryString))
-        : this.resData;
-      // 调用 callback 返回建议列表的数据
-      return results;
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        return (
-          restaurant[this.dataObj.props.value]
-            .toLowerCase()
-            .indexOf(queryString.toLowerCase()) === 0
-        );
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.pho-autocomplete-item {
-  // width: 100%;
-  white-space: nowrap; //禁止换行
-  // width: var(--fieldWidth);
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/inputComs/formInput.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-model="formValue"
-      :name="$attrs.__vModel__"
-      :rules="$attrs.rules"
-      :required="$attrs.required"
-      style="padding-bottom: 0"
-      :disabled="$attrs.disabled"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template slot="input">
-        <i
-          v-if="$attrs.prefixIcon"
-          :class="$attrs.prefixIcon"
-          style="color: #969799; margin-right: 8px"
-        />
-        <TextShow style="padding-left:0;padding-right:0" :value="value" v-if="$attrs.onlyShow" />
-        <van-field
-          v-else
-          v-model="formValue"
-          style="padding: 0"
-          :type="showPassword ? 'password' : type"
-          :placeholder="$attrs.placeholder"
-          :clearable="$attrs.clearable"
-          :maxlength="$attrs.maxlength"
-          :readonly="$attrs.readonly"
-          :disabled="$attrs.disabled"
-          :rows="rows"
-          @input="onInput"
-          @blur="onBlur"
-          @focus="onFocus"
-          @change="onChange"
-          @clear="onClear"
-        />
-      </template>
-      <template slot="right-icon" v-if="$attrs.suffixIcon">
-        <i :class="$attrs.suffixIcon" />
-      </template>
-    </van-field>
-
-    <div
-      v-if="!$attrs.onlyShow"
-      :class="$attrs.disabled ? 'pho-disabled' : ''"
-      class="van-field__word-limit"
-      style="padding: 0 16px 10px; margin: 0"
-    >
-      <template v-if="$attrs.showWordLimit">
-        <span class="van-field__word-num" style="margin-top: 4px">
-          {{
-          formValue?.length || 0
-          }}
-        </span>
-        /{{ $attrs.maxlength }}
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  components: { TextShow },
-  mixins: [comMixin],
-  name: "phone-form-input",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-
-    // type: text-文本 textarea-文本域 password-密码框
-    type: {
-      type: String,
-      default: "text",
-    },
-    // 是否为密码输入框
-    showPassword: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    rows: {
-      type: [Number, String],
-      default: "",
-    },
-  },
-
-  computed: {
-    formValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("update", val);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/inputComs/formInputNumber.vue

@@ -1,65 +0,0 @@
-<template>
-  <!-- 计数器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-model="formValue"
-      v-bind="$attrs"
-      :name="$attrs.__vModel__"
-      :required="$attrs.required"
-      :rules="$attrs.regList"
-      :placeholder="$attrs.placeholder"
-      input-align="right"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #input>
-        <span v-if="$attrs.onlyShow">{{value}}</span>
-        <van-stepper
-          v-else
-          v-model="formValue"
-          v-bind="$attrs"
-          :decimal-length="$attrs.precision"
-          @input="onInput"
-          @blur="onBlur"
-          @change="onChange"
-          @focus="onFocus"
-        />
-      </template>
-    </van-field>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-input-number",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: 0,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    formValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("update", val);
-        this.$emit("change", val);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/inputComs/formRichText.vue

@@ -1,147 +0,0 @@
-<template>
-  <!-- 富文本编辑器 -->
-  <div class="pho-form-item" :style="{...newStyle,scale:'none'}">
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :value="value"
-      :required="required"
-      :disabled="disabled"
-      readonly
-      input-align="right"
-    >
-      <template #label v-if="$attrs.showLabel">
-        <span :style="newStyle.font">{{label}}</span>
-      </template>
-    </van-field>
-    <div class="pho-form-cont">
-      <div class="form-components" v-if="!$attrs.onlyShow">
-        <div v-if="readonly" class="form-readonly"></div>
-        <div v-if="disabled" class="form-disabled"></div>
-        <RichEditor
-          :value="value"
-          :placeholder="placeholder"
-          :readonly="readonly || disabled"
-          :maxlength="parseInt(maxlength)"
-          :height="height"
-          :transcoding="transcoding"
-          @input="getRickTextContent"
-          @blur="onBlur"
-          @focus="onFocus"
-        />
-      </div>
-      <div v-else v-rich-text="value" class="rich-text-show"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import RichEditor from "@/plugins/richEditor/richEditorPhone";
-import { comMixin } from "../../../utils/comMixins";
-
-export default {
-  mixins: [comMixin],
-  name: "phone-form-rich-text",
-  components: {
-    RichEditor,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      default: "",
-    },
-
-    // 是否只读
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 占位语
-    placeholder: {
-      type: String,
-      default: "请输入",
-    },
-    // 最大输入长度
-    maxlength: {
-      type: String,
-      default: "20000",
-    },
-    height: {
-      type: [String, Number],
-      default: "",
-    },
-    // 是否开启转码
-    transcoding: {
-      type: Boolean,
-      default: true,
-    },
-    // label标题
-    label: {
-      type: String,
-      default: "",
-    },
-
-    // 是否必填
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {};
-  },
-
-  methods: {
-    //获取富文本内容
-    getRickTextContent(v) {
-      this.$emit("update", v);
-      this.$emit("input", v);
-      this.onInput(v);
-    },
-    // 获取语音内容
-    getVc(val) {
-      const vv = val;
-      this.$emit("update", vv);
-    },
-  },
-  directives: {
-    richText(el, binding) {
-      if (binding.value) {
-        let html = binding.value;
-        try {
-          html = decodeURIComponent(html.replace(/%(?!\d|[ABCDEF]+)/g, "%25"));
-        } catch (e) {}
-        html = "<div class='ql-editor'>" + html + "</div>";
-        html = html.replace(/position: fixed;/g, "position: relative;");
-        html = html.replace(/position: absolute;/g, "position: relative;");
-        el.innerHTML = html;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.hu-rich-text {
-  .van-field__label {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-.rich-text-show {
-  // line-height: 32px;
-  .ql-editor {
-    padding: 0 !important;
-    // line-height: 32px;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/layoutComs/formCard.vue

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <div class="Fg-pho-card" :class="`is-${$attrs.shadow}-shadow`" :style="styleObj">
-      <div class="Fg-pho-card__header">{{$attrs.header}}</div>
-      <div class="Fg-pho-card__body">
-        <phone-form-row-container :list.sync="list" :font="newStyle.font" v-bind="$attrs" />
-      </div>
-    </div>
-  </div>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-card",
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      deepClone,
-      toCamelCase,
-    };
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-pho-card.is-always-shadow,
-.Fg-pho-card.is-hover-shadow:focus,
-.Fg-pho-card.is-hover-shadow:hover {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.Fg-pho-card {
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  background-color: #fff;
-  overflow: hidden;
-  color: #303133;
-  transition: 0.3s;
-  .Fg-pho-card__header {
-    padding: 12px 16px;
-    border-bottom: 1px solid #ebeef5;
-    box-sizing: border-box;
-  }
-  display: flex;
-  flex-direction: column;
-
-  .Fg-pho-card__body {
-    overflow: auto;
-  }
-}
-</style>