@xfu0401/form-generator 1.0.1 → 1.0.2

package/src/components/formGenerator/formComponents/pcComponents/selectComs/formUserPicker.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="form-user-picker">
-    <div v-if="!$attrs.onlyShow" style="margin-bottom: 5px">
-      <el-button
-        :disabled="disabled"
-        type="primary"
-        icon="el-icon-user"
-        round
-        size="small"
-        :style="newStyle"
-        @click="handleClick"
-      >选择人员</el-button>
-      <span class="form-user-picker--text">{{ placeholder }}</span>
-    </div>
-    <NameShow
-      v-if="selected.length"
-      :value="selected"
-      :props="dataObj.props"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="readonly || disabled"
-      @change="handleDelete"
-    />
-    <UserPicker
-      ref="userPicker"
-      :data="dataObj"
-      :search="search"
-      :multiple="multiple"
-      type="user"
-      @callBack="handleSelect"
-    />
-  </div>
-</template>
-
-<script>
-import UserPicker from "../components/userPicker.vue";
-import NameShow from "../components/nameShow.vue";
-
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-user-picker",
-  components: {
-    UserPicker,
-    NameShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String],
-      default: "",
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 可打印
-    enablePrint: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    __config__: {
-      type: Object,
-      default: () => {},
-    },
-    // 搜索配置
-    search: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      selected: JSON.parse(this.values || "[]"),
-    };
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.selected = JSON.parse(newValue || "[]");
-      },
-    },
-  },
-  methods: {
-    // 此处是为了不调用comMixins混入中的init方法
-    init() {},
-    handleClick() {
-      if (this.readonly) return;
-      this.$refs.userPicker.open(this.selected);
-    },
-    handleSelect(values) {
-      this.selected = values;
-      let newValue = null;
-      if (values.length) {
-        newValue = JSON.stringify(values);
-      }
-      this.$emit("update", newValue);
-      this.$emit("confirm", newValue);
-      this.$emit("validate", newValue);
-      this.onConfirm(newValue);
-    },
-    handleDelete(values) {
-      this.selected = values;
-      let newValue = null;
-      if (values.length) {
-        newValue = JSON.stringify(values);
-      }
-      this.$emit("update", newValue);
-      this.$emit("delete", newValue);
-      this.$emit("validate", newValue);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.form-user-picker {
-  .form-user-picker--text {
-    margin-left: 10px;
-    color: #c0c4cc;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcForm.vue

@@ -1,151 +0,0 @@
-<template>
-  <!-- 中间表单内容 -->
-  <el-form
-    class="pcForm"
-    :ref="formConf.formRef"
-    :size="formConf.size"
-    :model="formModel"
-    :label-position="formConf.labelPosition"
-    :disabled="formConf.disabled"
-    :label-width="formConf.labelWidth + 'px'"
-  >
-    <form-row-container
-      :list.sync="list"
-      :formConf="formConf"
-      :isEdit="false"
-      enabled
-      :isPreview="isPreview"
-      :onlyShow="onlyShow"
-      @validate="validateItem"
-    />
-    <!-- <el-form-item v-if="formConf.formBtns">
-      <el-button type="primary" @click="validateForm(() => {})">提交</el-button>
-      <el-button @click="resetForm()">重置</el-button>
-    </el-form-item>-->
-  </el-form>
-</template>
-
-<script>
-import { deepClone, toCamelCase, traverseTree } from "../utils/index";
-export default {
-  name: "pcForm",
-  props: {
-    formList: {
-      type: Array,
-      default: () => [],
-    },
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    isPreview: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formModel: {},
-      formArray: [],
-      list: [],
-    };
-  },
-
-  watch: {
-    formList: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.list = deepClone(newValue);
-        }
-      },
-    },
-    list: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          // 将表单列表数据存储
-          this.$form.setForm(newValue);
-          // 根据表单列表生成动态表单模型数据
-          this.formArray = [];
-          this.getFormModel(newValue);
-        }
-      },
-    },
-  },
-  computed: {},
-
-  methods: {
-    toCamelCase,
-    // 根据表单列表生成动态表单模型数据
-    getFormModel(list) {
-      list.forEach((el) => {
-        if (el?.__vModel__ && el.__config__) {
-          let obj = JSON.parse(JSON.stringify(this.formModel));
-          this.formModel = Object.assign(obj, {
-            [el.__vModel__]: el.__config__.defaultValue,
-          });
-          this.formArray.push({
-            fieldId: el.__vModel__,
-            fieldKey: el.__config__.formKey,
-            tag: el.__config__.tag,
-            defaultValue: el.__config__.defaultValue,
-            type: typeof el.__config__.defaultValue,
-            formCode: this.formConf.formCode,
-          });
-        }
-        if (el?.children) {
-          this.getFormModel(el.children);
-        }
-      });
-    },
-    submitForm(cb) {
-      this.$emit("update:formList", this.list);
-      this.$emit("submit", this.list);
-      cb(this.formArray, deepClone(this.list));
-    },
-    validateForm(cb) {
-      this.$emit("update:formList", this.list);
-      this.$refs[this.formConf.formRef].validate((valid) => {
-        this.$emit("submit", this.list);
-        // 可以从外部传递方法
-        cb(valid, this.formArray, deepClone(this.list));
-      });
-    },
-    // 重置
-    resetForm() {
-      this.$refs[this.formConf.formRef].resetFields();
-      traverseTree(this.list, (node) => {
-        if (
-          node &&
-          node.__config__ &&
-          node.disabled !== true &&
-          node.readonly !== true &&
-          node.__config__.tagType != "assist"
-        ) {
-          node.__config__.defaultValue = null;
-        }
-      }); // 从根节点开始遍历整个树
-      this.$emit("update:formList", this.list);
-    },
-    // 单独校验某一个组件
-    validateItem(item) {
-      this.$nextTick(() => {
-        // 此处是为了解决级联组件只校验上一次结果，不校验当前结果的bug
-        if (this.$refs[this.formConf.formRef]) {
-          this.$refs[this.formConf.formRef].validateField([item.__vModel__]);
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-</style>

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

@@ -1,36 +0,0 @@
-<template>
-  <van-button
-    v-if="!$attrs.onlyShow"
-    :type="$attrs.type"
-    :round="$attrs.round"
-    :plain="$attrs.plain"
-    :size="$attrs.size=='medium'?'normal':$attrs.size"
-    :style="newStyle"
-    :disabled="$attrs.disabled"
-    native-type="button"
-    @click.stop="onClick"
-  >
-    <template #icon v-if="$attrs.icon">
-      <i :class="$attrs.icon"></i>
-    </template>
-    {{$attrs.value}}
-  </van-button>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-button",
-  props: {
-    __slot__: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

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

@@ -1,41 +0,0 @@
-<template>
-  <div class="pho-form-divider" :style="newStyle">
-    <van-divider v-bind="$attrs" :content-position="contentPosition">
-      <i :class="icon" v-if="icon" />
-      {{value}}
-    </van-divider>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-divider",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    contentPosition: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.pho-form-divider {
-  border-color: #ebedf0;
-  padding: 0;
-  .van-divider {
-    border-color: inherit;
-    margin: 0;
-  }
-}
-</style>

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

@@ -1,37 +0,0 @@
-<template>
-  <!-- 说明组件 -->
-  <div class="Fg-html" :style="newStyle" v-html="html"></div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-html",
-  props: {
-    html: {
-      type: String,
-      default: "",
-    },
-    css: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    HTML() {
-      return this.html;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-html {
-  width: 100%;
-  word-break: break-all;
-}
-</style>

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

@@ -1,49 +0,0 @@
-<template>
-  <!-- 链接组件 -->
-  <div :style="newStyle" class="pho-link" :class="{'pho-disabled':$attrs.disabled}">
-    <a v-bind="$attrs" :class="className">
-      <span class="pho-link--inner">
-        <i v-if="$attrs.icon" :class="$attrs.icon" style="margin-right:5px"></i>
-        <span :style="newStyle.font">{{value}}</span>
-      </span>
-    </a>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-link",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-  computed: {
-    className() {
-      const classArr = ["pho-text-" + this.$attrs.type];
-      if (this.$attrs.underline) {
-        classArr.push("pho-link--underline pho-border-" + this.$attrs.type);
-      }
-      return classArr.join(" ");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pho-link {
-  a {
-    border: none;
-  }
-  .pho-link--underline {
-    border: none;
-    &:hover,
-    &:active {
-      border-bottom: 1px solid;
-    }
-  }
-}
-</style>

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

@@ -1,43 +0,0 @@
-<template>
-  <van-notice-bar
-    :mode="$attrs.closable?'closeable':''"
-    :color="$attrs.color"
-    :background="$attrs.bgColor"
-    v-bind="$attrs"
-    class="pho-notice"
-    :style="newStyle"
-  >
-    <div class="pho-notice--content">
-      <i style="margin-right:8px" v-if="$attrs.icon" :class="$attrs.icon" class="el-alert__icon"></i>
-      <span>{{value}}</span>
-    </div>
-  </van-notice-bar>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-notice",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pho-notice {
-  .pho-notice--content {
-    display: flex;
-    align-items: center;
-    word-break: break-all;
-  }
-  // height: auto;
-}
-</style>

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

@@ -1,39 +0,0 @@
-<template>
-  <!-- 说明 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      readonly
-      :label="showLabel ? $attrs.label : ''"
-      :required="$attrs.required"
-      input-align="right"
-    >
-      <template slot="input">
-        <div>
-          <i v-if="this.$attrs.icon" :class="this.$attrs.icon" style="margin-right: 5px" />
-          <span>{{ value }}</span>
-        </div>
-      </template>
-    </van-field>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-remark",
-  props: {
-    value: {
-      type: [Number, String],
-      default: 0,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,34 +0,0 @@
-<template>
-  <van-swipe
-    class="pho-swipe"
-    v-bind="$attrs"
-    :style="newStyle"
-    :autoplay="$attrs.autoplay?$attrs.interval:0"
-    indicator-color="white"
-    touchable
-    v-on="$listeners"
-  >
-    <van-swipe-item v-for="(item,i) in resData" :key="i">
-      <img :src="item.path" alt="首页轮播图" />
-    </van-swipe-item>
-  </van-swipe>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  name: "phone-form-swipe",
-  mixins: [comMixin],
-};
-</script>
-
-<style lang="scss" >
-.pho-swipe {
-  .van-swipe-item {
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>

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

@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <TableShow :head="headData" :data="data" v-bind="$attrs" />
-    <van-pagination
-      v-if="isPage"
-      :value="current"
-      :total-items="total"
-      :items-per-page="size"
-      @change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TableShow from "../components/tableShow";
-
-export default {
-  name: "phone-form-table",
-  mixins: [comMixin],
-  components: {
-    TableShow,
-  },
-  props: {
-    // 分页配置
-    pagination: {
-      type: Object,
-      default: () => {},
-    },
-    // 是否分页
-    isPage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      total: 0,
-      data: [],
-      current: 1,
-      size: 10,
-    };
-  },
-  computed: {
-    headData() {
-      return this.dataObj.head;
-    },
-  },
-  methods: {
-    // 请求数据
-    handleSuccess(data) {
-      // 分页的情况
-      this.data = data[this.props.records || "records"];
-      this.total = data[this.props.total || "total"];
-      this.current =
-        parseInt(data[this.props.current || "current"]) || this.current;
-      this.size = parseInt(data[this.props.size || "size"]) || this.size;
-    },
-    handleError(err) {
-      this.data = [];
-    },
-    handleSizeChange(val) {
-      this.current = 1;
-      this.size = val;
-      const queryForm = {};
-      queryForm[this.props.current] = this.current;
-      queryForm[this.props.size] = this.size;
-      this.loadData(queryForm);
-    },
-    handleCurrentChange(val) {
-      this.current = val;
-      const queryForm = {};
-      queryForm[this.props.current] = this.current;
-      queryForm[this.props.size] = this.size;
-      this.loadData(queryForm);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-pho-table {
-  .Fg-pho-table__header {
-    color: #909399;
-  }
-  .Fg-pho-table__cell {
-    padding-left: 10px;
-    padding-right: 10px;
-    line-height: 23px;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .Fg-pho-table--striped {
-    background-color: #fafafa;
-  }
-}
-.Fg-pho-table--border {
-  .Fg-pho-table__header {
-    .Fg-pho-table__cell {
-      border-top: 1px solid #ebeef5;
-    }
-  }
-
-  .Fg-pho-table__header,
-  .Fg-pho-table__body {
-    .Fg-pho-table__cell {
-      border-left: 1px solid #ebeef5;
-    }
-    .Fg-pho-table__cell:last-child {
-      border-right: 1px solid #ebeef5;
-    }
-  }
-}
-.Fg-pho-table--mini {
-  font-size: 12px;
-  .Fg-pho-table__cell {
-    padding: 6px 0;
-  }
-}
-.Fg-pho-table--small {
-  font-size: 12px;
-  .Fg-pho-table__cell {
-    padding: 8px 0;
-  }
-}
-.Fg-pho-table--medium {
-  font-size: 14px;
-  .Fg-pho-table__cell {
-    padding: 10px 0;
-  }
-}
-</style>