@xfu0401/form-generator 1.0.21 → 1.0.22

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

@@ -1,112 +0,0 @@
-<template>
-  <div class="Fg-pho-steps" :style="newStyle">
-    <van-steps :active="active" :active-color="blue">
-      <van-step v-for="item in list" :key="item.value" v-on="$listeners">
-        <span :style="newStyle.font">{{item.label}}</span>
-      </van-step>
-    </van-steps>
-    <div
-      class="Fg-pho-steps--content"
-      v-for="(item,i) in list"
-      :key="item.value"
-      v-show="i==active"
-    >
-      <phone-form-row-container :list.sync="item.children" :font="newStyle.font" v-bind="$attrs" />
-    </div>
-    <div class="Fg-pho-steps--button">
-      <van-button
-        type="info"
-        plain
-        block
-        round
-        v-show="active!==0"
-        size="small"
-        native-type="button"
-        @click.stop="pre"
-      >上一步</van-button>
-      <van-button
-        type="info"
-        block
-        round
-        plain
-        v-show="active!==list.length-1"
-        size="small"
-        native-type="button"
-        @click.stop="next"
-      >下一步</van-button>
-    </div>
-  </div>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { blue } from "@/style/color.scss";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-steps",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      active: 0,
-      deepClone,
-      toCamelCase,
-      blue,
-    };
-  },
-  methods: {
-    pre() {
-      this.active--;
-    },
-    next() {
-      this.active++;
-    },
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.active = this.list.findIndex((item) => item.value == newValue);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-pho-steps {
-  font-size: 14px;
-  // display: flex;
-  // flex-direction: column;
-  .Fg-pho-steps--button {
-    .van-button {
-      margin-top: 10px;
-    }
-  }
-  .van-steps {
-    max-height: 60px;
-  }
-  .Fg-pho-steps--content {
-    height: calc(100% - 90px);
-    overflow: auto;
-  }
-  .van-step__circle-container {
-    background: transparent !important;
-  }
-}
-</style>

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

@@ -1,130 +0,0 @@
-<template>
-  <div class="Fg-sub" style="padding:10px 16px">
-    <!-- <span>{{$attrs.__config__.componentName}}</span> -->
-    <div>
-      <div class="Fg-sub-item" v-for="(item,i) in formLists" :key="i" :style="newStyle">
-        <div class="Fg-sub-item--top">
-          第{{i+1}}项
-          <i
-            class="el-icon-close"
-            @click="handleDelete(i)"
-            v-if="!$attrs.onlyShow && formLists.length>1"
-          ></i>
-        </div>
-        <phone-form-row-container
-          :list.sync="item.children"
-          :formConf="$attrs"
-          :font="newStyle.font"
-          :onlyShow="$attrs.onlyShow"
-        />
-      </div>
-    </div>
-    <van-button
-      v-if="!$attrs.onlyShow"
-      icon="plus"
-      style="margin-top:10px"
-      native-type="button"
-      @click.stop="hadnleAdd"
-      size="small"
-      :disabled="formLists.length==$attrs.maxSize"
-    >添加数据</van-button>
-  </div>
-</template>
- 
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-sub",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      formLists: this.list.slice(1, this.list.length),
-    };
-  },
-  mounted() {
-    if (this.list.length <= 1) {
-      this.hadnleAdd();
-    }
-  },
-  methods: {
-    indexMethod(index) {
-      return index + 1;
-    },
-    onlyShowFun(item) {
-      return this.$attrs.onlyShow || item?.onlyShow;
-    },
-    hadnleAdd() {
-      const newItem = this.list[0]?.children.map((item) => {
-        return this.$utils.createFormItem(this.$utils.deepClone(item));
-      });
-      this.formLists.push({
-        value: this.$utils.getUuiKey(),
-        children: newItem,
-      });
-    },
-    handleDelete(i) {
-      this.formLists.splice(i, 1);
-    },
-  },
-  watch: {
-    formLists: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue && this.list.length) {
-          const list = [this.list[0]].concat(newValue);
-          this.$emit("update:list", list);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-@import "@/style/color";
-
-.Fg-sub {
-  .Fg-sub-item {
-    padding: 5px;
-    margin-bottom: 10px;
-    border-left: 3px solid #409eff !important;
-    border-radius: 5px;
-    background: #fafafa;
-    font-size: 14px;
-    overflow: auto;
-    color: $gray-7;
-    .van-cell {
-      background-color: transparent;
-    }
-    .Fg-sub-item--top {
-      position: relative;
-      padding: 10px 40px;
-      text-align: right;
-
-      .el-icon-close {
-        position: absolute;
-        top: 13px;
-        right: 10px;
-        z-index: 1;
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,93 +0,0 @@
-<template>
-  <div class="pho-form-table-container" :style="newStyle">
-    <table border="1" cellpadding="0" cellspacing="0" align="center">
-      <tr v-for="(tr,rIndex) in list" :key="rIndex">
-        <template v-for="(td,dIndex) in tr.children">
-          <td
-            v-if="td && td.colspan && td.rowspan"
-            :key="dIndex"
-            :colspan="td.colspan"
-            :rowspan="td.rowspan"
-            :style="{ width:100/tr.children.length+'%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor,padding:$attrs.cellpadding+'px'}"
-          >
-            <phone-form-row-container
-              :font="newStyle.font"
-              :list.sync="td.children"
-              v-bind="$attrs"
-            />
-          </td>
-        </template>
-      </tr>
-    </table>
-  </div>
-</template>
- 
-<script>
-import draggable from "vuedraggable";
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-table-container",
-  components: {
-    draggable,
-  },
-  props: {
-    // 当前选中表单
-    currentData: {
-      type: Object,
-      default: () => {},
-    },
-    height: {
-      type: String,
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    scale: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      activeData: {},
-      deepClone,
-      toCamelCase,
-      rows: [],
-    };
-  },
-  mounted() {},
-  watch: {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.pho-form-table-container {
-  padding: 10px 16px;
-  overflow-x: auto;
-  table {
-    width: 100%;
-    border: 1px solid #ebeef5;
-    border-width: 0;
-    border-collapse: collapse; /* 折叠边框，使其看起来更整洁 */
-  }
-  th,
-  td {
-    border: 1px solid #ebeef5;
-  }
-  td {
-    // height: 60px;
-    min-width: 100px;
-  }
-  .pho-form-item:last-child {
-    &::before {
-      display: none;
-    }
-  }
-}
-</style>

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>