@xfu0401/form-generator 1.1.24 → 1.1.25

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

@@ -1,114 +0,0 @@
-<template>
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :name="$attrs.__vModel__"
-      :value="selected.length ? value : ''"
-      :label="$attrs.showLabel ? $attrs.label : ''"
-      input-align="right"
-      readonly
-      right-icon="plus"
-    >
-      <span v-if="$attrs.showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-    </van-field>
-    <div
-      v-if="!$attrs.onlyShow"
-      class="user-picker-add form-placeholder"
-      :style="newStyle.font"
-      @click="handleClick"
-    >
-      {{ $attrs.placeholder }}
-      <van-icon name="plus" />
-    </div>
-    <!-- 展示栏 -->
-    <NameShow
-      v-if="selected.length"
-      style="padding: 0 12px 12px 12px"
-      v-model="selected"
-      :props="dataObj.props"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="$attrs.readonly || $attrs.disabled"
-      @change="handleDelete"
-    />
-    <OrgPicker
-      ref="OrgPicker"
-      :data="dataObj"
-      :multiple="$attrs.multiple"
-      :search="search"
-      type="user"
-      @callBack="callBack"
-    />
-  </div>
-</template>
-
-<script>
-import OrgPicker from "../components/orgPicker.vue";
-import NameShow from "../components/nameShow.vue";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-user-picker",
-  components: {
-    OrgPicker,
-    NameShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String],
-      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.$attrs.disabled || this.$attrs.readonly) return;
-      this.$refs.OrgPicker.open(this.selected);
-    },
-    callBack(value) {
-      this.$emit("update", value.length ? JSON.stringify(value) : null);
-      this.$emit("confirm", value.length ? JSON.stringify(value) : null);
-      this.onConfirm(value.length ? JSON.stringify(value) : null);
-    },
-    handleDelete(value) {
-      this.$emit("update", value.length ? JSON.stringify(value) : null);
-      this.$emit("delete", value.length ? JSON.stringify(value) : null);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.user-picker-add {
-  padding: 12px 16px;
-  padding-top: 0;
-  cursor: pointer;
-  font-size: 13px;
-}
-</style>

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

@@ -1,137 +0,0 @@
-<template>
-  <!-- 移动端预览 -->
-  <van-form
-    v-if="formConf && formList.length"
-    :model="formModel"
-    :ref="formConf.formRef"
-    :label-width="formConf.labelWidth"
-    label-align="top"
-    :disabled="formConf.disabled"
-    show-error-message
-  >
-    <phone-form-row-container :list.sync="list" :formConf="formConf" :onlyShow="onlyShow" @selectHis="handleSelectHis" @openUrl="openUrl" />
-  </van-form>
-</template>
-
-<script>
-import { deepClone, toCamelCase, traverseTree } from "../utils/index";
-export default {
-  name: "phoneForm",
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    // 表单列表
-    formList: {
-      type: Array,
-      default: () => [],
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formModel: {},
-      formArray: [],
-      list: [],
-    };
-  },
-  watch: {
-    formList: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        if (newValue) {
-          this.list = deepClone(newValue);
-          this.$form.setForm(this.list);
-        }
-      },
-    },
-    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()
-        .then(() => {
-          this.$emit("submit", this.list);
-          cb(true, this.formArray, deepClone(this.list));
-        })
-        .catch((error) => {
-          //检验失败
-          cb(false, this.formModel, deepClone(this.list));
-        });
-    },
-    // 重置
-    resetForm() {
-      this.$refs[this.formConf.formRef].resetValidation();
-      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);
-    },
-    handleSelectHis(value) {
-      this.$emit("selectHis", value)
-    },
-    openUrl(item) {
-      this.$emit("openUrl", item)
-    }
-  },
-};
-</script>
-
-<style lang="scss"></style>

package/src/components/formGenerator/formGenerator.vue

@@ -1,401 +0,0 @@
-<template>
-  <div class="Fg-gener" :style="{'--themeColor':themeColor,'--selectedColor':selectedColor}">
-    <div class="Fg-gener-left" :class="toLeft?'Fg-gener-side-close':''">
-      <!-- <div class="Fg-gener-left-title">组件库</div> -->
-      <el-tabs v-model="leftTab" stretch>
-        <el-tab-pane label="组件" name="coms" />
-        <el-tab-pane label="模板" name="temps" v-if="!hideTemps" />
-        <el-tab-pane label="大纲" name="outline" v-if="!hideOutline" />
-      </el-tabs>
-      <!-- 左侧组件 -->
-      <div class="Fg-gener-left-cont">
-        <FormGeneratorCom
-          v-show="leftTab=='coms'"
-          :formConf="formAttrData"
-          @add="handleAdd"
-          @drag="handleDrag"
-        />
-        <FormGeneratorOutline :list.sync="drawingList" v-show="leftTab=='outline'" />
-        <FormGeneratorTemp v-if="leftTab=='temps'" @change="handleTemp" />
-      </div>
-    </div>
-    <div class="Fg-gener-content" :style="contentStyle">
-      <div class="Fg-gener-button">
-        <div class="Fg-gener-button-left">
-          <FormExport :value="formObj" />
-          <FormImport :value="formObj" @confirm="handleImport" />
-
-          <!-- <el-button type="text" icon="el-icon-refresh-left"></el-button>
-          <el-button type="text" icon="el-icon-refresh-right"></el-button>-->
-        </div>
-        <div>
-          <el-button
-            v-if="!hideSaveBtn"
-            type="success"
-            plain
-            icon="el-icon-folder-checked"
-            size="mini"
-            @click="handleSave"
-          >保存</el-button>
-          <el-button type="primary" plain size="mini" icon="el-icon-view" @click="handleView">预览</el-button>
-          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClear">清空</el-button>
-        </div>
-      </div>
-      <!-- 中间表单内容 -->
-      <el-form
-        class="Fg-gener-form"
-        :ref="formAttrData.formRef"
-        :size="formAttrData.size"
-        :label-position="formAttrData.labelPosition"
-        :disabled="formAttrData.disabled"
-        :label-width="formAttrData.labelWidth + 'px'"
-      >
-        <form-row-container
-          :enabled="enabled"
-          :list.sync="drawingList"
-          :formConf="formAttrData"
-          height="100%"
-          @clone="handleClone"
-        />
-        <el-empty class="form-empty" v-show="!drawingList.length" description="从左侧拖入或点选组件进行表单设计"></el-empty>
-      </el-form>
-      <i class="el-icon-arrow-left toLeft" @click="toLeft=!toLeft" />
-      <i class="el-icon-arrow-right toRight" @click="toRight=!toRight" />
-    </div>
-    <div class="Fg-gener-right" :class="toRight?'Fg-gener-side-close':''">
-      <!-- 右侧表单属性 -->
-      <el-tabs v-model="rightTab" stretch>
-        <el-tab-pane label="组件属性" name="field" />
-        <el-tab-pane label="表单属性" name="form" />
-      </el-tabs>
-      <div class="Fg-gener-attr-cont">
-        <FormGeneratorAttrField v-show="rightTab == 'field'" :formConf="formAttrData" />
-        <FormGeneratorAttrForm v-show="rightTab == 'form'" :formConf.sync="formAttrData" />
-      </div>
-    </div>
-
-    <FormPreview ref="FormPreview" :hidePhone="hidePhone" />
-  </div>
-</template>
-
-<script>
-import FormGeneratorCom from "./components/formGeneratorCom.vue";
-import FormGeneratorOutline from "./components/formGeneratorOutline.vue";
-import FormGeneratorAttrField from "./components/formGeneratorAttrField.vue";
-import FormGeneratorAttrForm from "./components/formGeneratorAttrForm.vue";
-import FormGeneratorTemp from "./components/formGeneratorTemp.vue";
-import FormPreview from "./components/formPreview.vue";
-import FormExport from "./components/formExport.vue";
-import FormImport from "./components/formImport.vue";
-import { formConf } from "./utils/config";
-import { Message, MessageBox } from "element-ui";
-import { deepClone, validateForm, getUuiKey, formTreeToArray } from "./utils";
-import store from "@/store";
-export default {
-  components: {
-    FormGeneratorCom,
-    FormGeneratorOutline,
-    FormGeneratorAttrField,
-    FormGeneratorAttrForm,
-    FormGeneratorTemp,
-    FormPreview,
-    FormExport,
-    FormImport,
-  },
-
-  props: {
-    // 用于回显的旧数据表单列表
-    formLists: {
-      type: Array,
-      default: () => [],
-    },
-    // 用于回显的旧数据表单属性
-    formAttrs: {
-      type: Object,
-      default: () => {},
-    },
-    // 隐藏保存按钮
-    hideSaveBtn: {
-      type: Boolean,
-      default: false,
-    },
-    // 编辑器时是否可以点击操作
-    enabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 主题色:只支持rgb和hex格式
-    themeColor: {
-      type: String,
-      default: "#409EFF", // #409EFF
-    },
-    hideOutline: {
-      type: Boolean,
-      default: false,
-    },
-    hideTemps: {
-      type: Boolean,
-      default: false,
-    },
-    hidePhone: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      drawingList: this.formLists, // 初始化时默认选中表单组件
-      formAttrData: {
-        ...{ ...formConf, formId: getUuiKey(), formCode: "form" + getUuiKey() },
-        ...this.formAttrs,
-      }, // 当前的表单属性
-      leftTab: "coms",
-      rightTab: "field",
-      toLeft: false,
-      toRight: false,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  computed: {
-    contentStyle() {
-      const left = this.toLeft ? 0 : 260;
-      const right = this.toRight ? 0 : 350;
-      return {
-        width: `calc(100% - ${left}px - ${right}px)`,
-      };
-    },
-    selectedColor() {
-      return store.state.app.selectedColor;
-    },
-    formObj() {
-      return { ...this.formAttrData, list: this.drawingList };
-    },
-  },
-  methods: {
-    init() {
-      // 给初始值表单设置表单项id formId
-      store.commit("SET_ACTIVEDATA", this.drawingList[0] || {});
-      store.commit("SET_THEMECOLOR", this.themeColor);
-    },
-
-    // 校验
-    validate(cb) {
-      // 1. 不允许为空
-      if (!this.drawingList.length) {
-        cb(false, ["表单为空，请添加组件"]);
-        return;
-      }
-      // 2. 表单名称不能为空
-      const obj = validateForm(this.drawingList);
-      cb(obj.valid, obj.errorMsg);
-    },
-
-    // 导入
-    handleImport(formConfig, list) {
-      this.formAttrData = formConfig;
-      this.drawingList = list;
-    },
-
-    // 从左侧控件点击某一控件添加表单项
-    handleAdd(item) {
-      this.drawingList.push(item);
-      store.commit("SET_ACTIVEDATA", item);
-    },
-    // 从左侧控件拖拽某一控件添加表单项，拖拽会自动添加，无须手动添加表单项，只需要更新当前选中表单项
-    handleDrag(item) {
-      store.commit("SET_ACTIVEDATA", deepClone(item));
-    },
-    // 选择模板
-    handleTemp(temp) {
-      this.drawingList = deepClone(temp);
-    },
-    // 清空表单
-    handleClear() {
-      // 平铺表单
-      const list = formTreeToArray(this.drawingList);
-      // 获取表单中被锁定的表单
-      const lockForm = list.find((item) => item.isLock);
-      if (lockForm) return Message.error("存在已锁定组件，无法清空！");
-      MessageBox.confirm("确定要清空所有组件吗？", {
-        type: "warning",
-      }).then(() => {
-        this.drawingList = [];
-        store.commit("SET_ACTIVEDATA", {});
-      });
-    },
-    // 预览表单
-    handleView() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      this.$refs.FormPreview.open(this.drawingList, this.formAttrData);
-    },
-    // 预览表单(移动端)
-    handleViewPhone() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      this.$refs.FormPhoneDialog.open(this.drawingList, this.formAttrData);
-    },
-    handleClone(clone) {
-      this.drawingList.push(clone);
-    },
-    // 保存
-    handleSave() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      // MessageBox.confirm("确定保存该表单吗？", {
-      //   type: "warning",
-      // }).then(() => {
-      // Message.success("保存成功！");
-      const list = deepClone(this.drawingList);
-      const attrs = deepClone(this.formAttrData);
-      this.$emit("save", list, attrs);
-      // });
-    },
-  },
-  watch: {
-    drawingList(newValue) {
-      this.$emit("update:formLists", newValue);
-      this.$emit("update", this.drawingList, this.formAttrData);
-    },
-    formAttrData(newValue) {
-      this.$emit("update:formAttrs", newValue);
-      this.$emit("update", this.drawingList, this.formAttrData);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "./styles/index.scss";
-@import "./styles/generator.scss";
-@import "./styles/theme.scss";
-
-.Fg-gener {
-  font-size: 14px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  .el-tabs__header {
-    margin: 0;
-  }
-  .el-tabs__item {
-    height: 44px;
-  }
-  .Fg-gener-left,
-  .Fg-gener-right {
-    background-color: #fff;
-    z-index: 1;
-    overflow: hidden;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-  }
-
-  .Fg-gener-left {
-    width: 260px;
-    box-shadow: 0 0 8px $shadowColor;
-    .Fg-gener-left-title {
-      height: 42px;
-      line-height: 42px;
-      text-align: center;
-      font-size: 14px;
-      color: $themeColor;
-    }
-    .Fg-gener-left-cont {
-      height: calc(100% - 43px);
-      overflow: auto;
-    }
-  }
-  .Fg-gener-content {
-    flex: 1;
-    position: relative;
-    > .toLeft,
-    > .toRight {
-      display: inline-block;
-      // box-shadow: 2px 0 12px $shadowColor;
-      border-radius: 0 6px 6px 0;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-16px);
-      color: #666;
-      outline: none;
-      height: 32px;
-      width: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-    }
-    > .toLeft {
-      left: 0;
-      box-shadow: 3px 0 3px $shadowColor;
-      -webkit-transform: perspective(10px) rotateY(9deg);
-      transform: perspective(10px) rotateY(9deg);
-    }
-    > .toRight {
-      -webkit-transform: perspective(10px) rotateY(-9deg);
-      transform: perspective(10px) rotateY(-9deg);
-      right: 0;
-      box-shadow: -3px 0 3px $shadowColor;
-    }
-    .Fg-gener-button {
-      height: 42px;
-      box-shadow: 0 0 8px $shadowColor;
-      padding: 0 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      // // border-bottom: 1px solid $borderColor;
-      .Fg-gener-button-left {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .Fg-gener-form {
-      padding: 16px;
-      height: calc(100% - 43px);
-      overflow-y: auto;
-      box-sizing: border-box;
-      position: relative;
-    }
-    .form-empty {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .Fg-gener-right {
-    // border-left: 1px solid $borderColor;
-    box-shadow: 0 0 8px $shadowColor;
-    width: 350px;
-    height: 100%;
-
-    .Fg-gener-attr-cont {
-      height: calc(100% - 44px);
-      padding: 16px;
-      box-sizing: border-box;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-  .Fg-gener-side-close {
-    width: 0;
-  }
-}
-</style>