@xfu0401/form-generator 1.0.1 → 1.0.2

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

@@ -1,64 +0,0 @@
-<template>
-  <div class="pho-form-item">
-    <van-tabs class="pho-tabs" :type="defaultType" v-model="activeName" :style="newStyle">
-      <van-tab v-for="item in list" :key="item.value" :title="item.label" :name="item.value">
-        <span slot="title" :style="newStyle.font">{{item.label}}</span>
-        <phone-form-row-container :list.sync="item.children" :font="newStyle.font" v-bind="$attrs" />
-      </van-tab>
-    </van-tabs>
-  </div>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-tabs-container",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      activeName: this.value || this.list[0]?.value,
-      deepClone,
-      toCamelCase,
-    };
-  },
-  computed: {
-    defaultType() {
-      if (this.type == "card" || this.type == "border-card") return "card";
-      return "line";
-    },
-  },
-  watch: {
-    value(newValue) {
-      this.activeName = newValue;
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.pho-tabs {
-  .van-tabs__nav {
-    background-color: transparent;
-  }
-  .van-tabs__content {
-    height: calc(100% - 44px);
-    overflow: auto;
-  }
-}
-</style>

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

@@ -1,210 +0,0 @@
-<template>
-  <!-- 级联选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <!-- {{checked}} -->
-    <van-field
-      :value="cascaderText"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :required="$attrs.required"
-      :rules="$attrs.rules"
-      :placeholder="$attrs.placeholder"
-      input-align="right"
-      :disabled="$attrs.disabled"
-      :is-link="!isTop"
-      readonly
-      :clickable="!$attrs.onlyShow"
-      @click="handleClick"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #right-icon v-if="clearable">
-        <div @click.stop="onClear">
-          <van-icon name="clear" />
-        </div>
-      </template>
-    </van-field>
-    <!-- <CascaderPicker
-      v-model="formValue"
-      :options="resData"
-      :multiple="multiple"
-      :field-names="fieldNames"
-      :checkStrictly="checkStrictly"
-    />-->
-    <van-popup v-model="show" round position="bottom" get-container="body">
-      <van-cascader
-        v-model="formValue"
-        v-bind="$attrs"
-        :options="resData"
-        :field-names="fieldNames"
-        active-color="#478df4"
-        @close="show = false"
-        @change="handleChange"
-        @finish="handleConfirm"
-      />
-      <!-- 多选 -->
-      <!-- <van-checkbox-group v-if="multiple" :value="checked" shape="square" @change="handleCheck">
-        <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-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>
-  </div>
-</template>
-
-<script>
-import { getPathById } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-import CascaderPicker from "../components/cascaderPicker.vue";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-cascader",
-  components: {
-    CascaderPicker,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      default: "",
-    },
-    // 是否为上下布局
-    isTop: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否选择任意一级
-    checkStrictly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formValue: "",
-      show: false,
-      checked: [],
-    };
-  },
-  computed: {
-    // 自定义 options 结构中的字段	object	{ text: 'text', value: 'value', children: 'children' }
-    fieldNames() {
-      const props = this.dataObj.props;
-      return {
-        text: props.label || "text",
-        value: props.value || "value",
-        children: props.children || "children",
-      };
-    },
-    // 选中后显示的文字
-    cascaderText() {
-      let text = "";
-      if (this.formValue && this.resData.length) {
-        // 显示的文字
-        const path =
-          getPathById(this.resData, this.formValue, this.fieldNames)?.map(
-            (it) => it[this.fieldNames.text]
-          ) || [];
-        // 间隔符
-        const separator = this.$attrs.separator;
-        // 是否展示全路径
-        const showAllLevels = this.$attrs.showAllLevels;
-        text = showAllLevels ? path.join(separator) : path[path.length - 1];
-      }
-
-      return text;
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = "";
-        if (newValue && newValue.length) {
-          this.formValue = newValue[newValue.length - 1];
-        }
-      },
-    },
-  },
-
-  methods: {
-    // 多选/单选
-    handleCheck(val) {
-      console.log("val", val);
-      // if (!this.multiple) {
-      //   this.checked = val.length ? [val[val.length - 1]] : [];
-      // }
-    },
-    handleClick() {
-      if (this.$attrs.disabled || this.$attrs.readonly || this.$attrs.onlyShow)
-        return;
-      this.show = true;
-    },
-    handleChange() {
-      // 获取选中节点的全路径
-      const path =
-        getPathById(this.resData, this.formValue, this.fieldNames)?.map(
-          (it) => it[this.fieldNames.value]
-        ) || [];
-      this.$emit("update", path);
-      this.$emit("change", path);
-      this.onChange(path);
-    },
-    handleConfirm() {
-      this.handleChange();
-      this.show = false;
-    },
-    onClear() {
-      this.$emit("update", "");
-      this.$emit("clear");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,86 +0,0 @@
-<template>
-  <!-- 多选框组 -->
-  <div
-    class="pho-form-item pho-form-flex"
-    :style="{...newStyle,flexDirection:$attrs.isTop ? 'column' : ''}"
-  >
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :value="value"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :placeholder="$attrs.placeholder"
-      input-align="right"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-    </van-field>
-    <TextShow v-if="$attrs.onlyShow" :value="$utils.getOptionsText(value,resData,props)" />
-    <van-checkbox-group
-      v-else
-      class="right-box"
-      v-model="formValue"
-      direction="horizontal"
-      v-bind="$attrs"
-      @change="handleChange"
-    >
-      <van-checkbox
-        v-for="item in resData"
-        :key="item[props.value]"
-        :name="item[props.value]"
-        :icon-size="16"
-        shape="square"
-        style="margin-bottom: 5px"
-      >{{ item[props.label] }}</van-checkbox>
-    </van-checkbox-group>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  components: { TextShow },
-  mixins: [comMixin],
-  name: "phone-form-checkbox-group",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: [],
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = this.value ? this.value.split(",") : [];
-      },
-    },
-  },
-  methods: {
-    handleChange(value) {
-      const newValue = value ? value.join(",") : "";
-      this.$emit("update", newValue);
-      this.$emit("change", newValue);
-      this.onChange(newValue);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,63 +0,0 @@
-<template>
-  <!-- 颜色选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-bind="$attrs"
-      :label="showLabel ? $attrs.label : ''"
-      :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></template>
-    </van-field>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-color-picker",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: "",
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = newValue;
-      },
-    },
-  },
-  methods: {
-    handleChange(val) {
-      this.$emit("update", val);
-      this.$emit("change", val);
-      this.onChange(val);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,100 +0,0 @@
-<template>
-  <!-- 日期时间选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      :value="value"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :required="$attrs.required"
-      :rules="$attrs.rules"
-      input-align="right"
-      :disabled="$attrs.disabled"
-      :clearable="$attrs.clearable"
-      :is-link="!isTop"
-      :placeholder="$attrs.placeholder"
-      readonly
-      @click="handleClick"
-    >
-      <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>
-
-    <DatePicker
-      ref="DatePicker"
-      :type="$attrs.type"
-      :format="$attrs.format"
-      @callBack="handleConfirm"
-    />
-  </div>
-</template>
-
-<script>
-import DatePicker from "../components/datePicker.vue";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-date-picker",
-  components: {
-    DatePicker,
-  },
-  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 || "";
-      },
-    },
-  },
-
-  methods: {
-    handleClick() {
-      if (this.$attrs.disabled || this.$attrs.readonly || this.$attrs.onlyShow)
-        return;
-      this.$refs.DatePicker.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/formDateRangePicker.vue

@@ -1,136 +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__"
-      readonly
-      input-align="right"
-      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="right-box form-range-picker" 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>
-      <DatePicker
-        ref="DatePicker"
-        :type="$attrs.type"
-        :format="$attrs.format"
-        @callBack="handleConfirm"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import DatePicker from "../components/datePicker.vue";
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-daterange-picker",
-  components: {
-    DatePicker,
-    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 || ["", ""];
-      },
-    },
-  },
-
-  methods: {
-    // type 0-开始时间 1-结束时间
-    handleClick(type) {
-      this.type = type;
-      if (this.$attrs.disabled || this.$attrs.readonly) return;
-      this.$refs.DatePicker.open(this.formValue[type]);
-    },
-    handleConfirm(val) {
-      this.$set(this.formValue, this.type, val);
-      this.$emit("update", this.formValue);
-      this.$emit("change", this.formValue);
-      this.onChange(this.formValue);
-      this.$emit("confirm", this.formValue);
-    },
-    handleClear() {
-      this.$emit("update", "");
-      this.$emit("clear");
-      this.onClear();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>