@xfu0401/form-generator 1.0.21 → 1.0.22

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>

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

@@ -1,71 +0,0 @@
-<template>
-  <van-collapse v-model="activeNames" class="pho-form-collapse" :style="newStyle" v-on="$listeners">
-    <van-collapse-item
-      v-for="item in list"
-      :key="item.value"
-      :name="item.value"
-      :title="item.label"
-    >
-      <phone-form-row-container :list.sync="item.children" :font="newStyle.font" v-bind="$attrs" />
-    </van-collapse-item>
-  </van-collapse>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-collapse",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      activeNames: [],
-      deepClone,
-      toCamelCase,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        try {
-          this.activeNames = newValue.split(",");
-        } catch (error) {
-          console.log(error);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.pho-form-collapse {
-  color: #323233;
-  font-size: 14px;
-  line-height: 24px;
-  background-color: #fff;
-  padding: 0;
-  .van-cell {
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    background-color: transparent;
-  }
-}
-</style>

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

@@ -1,94 +0,0 @@
-<template>
-  <div class="Fg-phone" :style="newStyle">
-    <component
-      v-show="!item.isHide"
-      :class="item.readonly ? 'Fg-pho-mask-layer' : ''"
-      v-for="item in list"
-      :key="item.__config__.formId"
-      v-model="item.__config__.defaultValue"
-      v-bind="bindAttr(item)"
-      :is="isComName(item)"
-      :formConf="formConf"
-      :rules="formRules({...item,onlyShow:onlyShowFun(item)})"
-      :font="newStyle.font"
-      :list.sync="item.children"
-      labelPosition="top"
-      :isTop="true"
-      :onlyShow="onlyShowFun(item)"
-      :disabled="item.disabled || formConf.disabled"
-      :required="item.__config__.required && !item.disabled && !item.readonly && !item.isHide && !onlyShowFun(item)"
-      @selectHis="handleSelectHis"
-    />
-  </div>
-</template>
-
-<script>
-import {
-  deepClone,
-  toCamelCase,
-  formRules,
-  handleEvent,
-} from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-row-container",
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    // 表单列表
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    __config__: {
-      type: Object,
-      default: () => {},
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    formRules,
-    toCamelCase,
-    deepClone,
-    handleEvent,
-    // 组件名称
-    isComName(item) {
-      let comName = item.__config__.tag; // 组件名称
-      return "phone-" + comName;
-    },
-    // 对属性进行处理，将__config__ 和__slot__中的属性拿到外层
-    bindAttr(item) {
-      let attr = deepClone(item);
-      if (item.__config__) {
-        attr = { ...attr, ...attr.__config__ };
-        // delete attr.__config__;
-      }
-      if (item.__slot__) {
-        attr = { ...attr, ...attr.__slot__ };
-        // delete attr.__slot__;
-      }
-      // 将类似"label-width"的属性名改为驼峰命名法
-      return toCamelCase(attr);
-    },
-    onlyShowFun(item) {
-      return this.onlyShow || item?.onlyShow;
-    },
-    handleSelectHis(value) {
-      this.$emit("selectHis", value)
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-phone {
-  overflow: auto;
-}
-</style>