@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/views/coms/comsDesiger.vue

@@ -1,224 +0,0 @@
-<template>
-  <div class="coms-page">
-    <h1>FGDesigner 表单编辑器</h1>
-    <div class="text1">可以通过拖拽的方式将单个组件组成一个完整的表单，生成JSON字符串</div>
-    <el-card header="演示">
-      <div slot="header" style="display:flex;justify-content:space-between">
-        <span>演示</span>
-        <div>
-          <el-form :inline="true">
-            <!-- <el-form-item label="enabled">
-              <el-switch v-model="enabled" />
-            </el-form-item>
-            <el-form-item label="hideSaveBtn">
-              <el-switch v-model="hideSaveBtn" />
-            </el-form-item>-->
-            <!-- <el-form-item> -->
-            <el-button size="mini" round @click="handleValid">校验</el-button>
-            <el-button size="mini" round @click="dialogVisible=true">
-              <el-tooltip content="点击此处查看表单编辑器生成的JSON表单数据" placement="top">
-                <i class="el-icon-view" style="margin-right:5px"></i>
-              </el-tooltip>表单数据
-            </el-button>
-            <!-- </el-form-item> -->
-            <!-- <el-form-item> -->
-            <el-button size="mini" icon="el-icon-user" circle @click="dialogLogin = true" />
-            <!-- </el-form-item> -->
-            <!-- <el-form-item>
-              <el-button
-                size="mini"
-                icon="el-icon-full-screen"
-                circle
-                @click="maxScreen=!maxScreen"
-              />
-            </el-form-item>-->
-          </el-form>
-        </div>
-      </div>
-      <FGDesigner
-        v-if="!loading"
-        ref="FGDesigner"
-        class="comsDesiger"
-        :class="maxScreen?'max-screen':''"
-        :enabled="enabled"
-        :hideSaveBtn="hideSaveBtn"
-        :options="options"
-        v-model="value"
-        @save="handleSave"
-      />
-      <div class="introduce">
-        表单编辑器分为组件库、表单画板、属性面板三个区域：
-        <h4>1. 组件库</h4>
-        <div
-          class="introduce-item"
-        >组件库面板提供两种方式添加组件：点击（组件置于最下方）和拖拽（可手动拖拽到任意位置），将一个组件添加到画板中后，它会被自动选中，配置面板会显示该组件的所有属性，并且可以任意更改这些属性，例如组件类型、字段名称、标题、校验规则等。</div>
-        <h4>2. 表单画板</h4>
-        <div
-          class="introduce-item"
-        >表单画板是表单编辑器的主要工作区域，提供了一种直观的方式来构建和设计表单，在表单画板中，可以使用拖放和单击等交互式操作，完成复制、删除和移动表单组件</div>
-        <h4>3. 属性面板（组件属性+表单属性）</h4>
-        <div class="introduce-item">表单属性：用于配置表单属性的区域。</div>
-        <div class="introduce-item">组件属性：用于配置组件属性的区域。当添加或选择表单中的一个组件时，该组件的属性将在属性面板中显示，可以任意修改该组件的属性配置。</div>
-        <el-link href="#/config" type="primary" :underline="false">组件配置属性说明</el-link>
-      </div>
-    </el-card>
-
-    <el-card header="代码">
-      <Code :code="desigerCode" />
-    </el-card>
-    <el-card header="Attributes">
-      <Attributes :data="desigerAttributes" />
-    </el-card>
-    <!-- <el-card header="Methods">
-      <Methods :data="desigerMethods" />
-    </el-card>-->
-    <el-card header="Events">
-      <Events :data="desigerEvents" />
-    </el-card>
-    <el-dialog
-      title="表单编辑器生成的JSON表单数据"
-      class="form-dialog"
-      width="1000px"
-      v-if="dialogVisible"
-      :visible.sync="dialogVisible"
-    >
-      <Code :code="value" />
-    </el-dialog>
-    <el-dialog title="登录" :visible.sync="dialogLogin" width="30%">
-      <el-form :model="login" label-width="100px">
-        <el-form-item label="账号" prop="cellphone">
-          <el-input type="cellphone" v-model="login.cellphone"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input type="password" v-model="login.password"></el-input>
-        </el-form-item>
-        <el-form-item label="验证码" prop="code">
-          <el-input type="code" v-model="login.code"></el-input>
-          <img ref="vcImg" :src="codeUrl" alt @click="getLoginCode" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogLogin = false">取 消</el-button>
-        <el-button type="primary" @click="handleLogin">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  desigerAttributes,
-  desigerMethods,
-  desigerCode,
-  desigerEvents,
-} from "@/utils/comsData";
-import Attributes from "./components/Attributes";
-import Methods from "./components/Methods";
-import FGDesigner from "@/package/FGDesigner";
-import Events from "./components/Events";
-import Code from "@/components/code/Code";
-import { deepClone } from "../../components/formGenerator/utils";
-import { requestPost2 } from "@/api/data";
-import store from "@/store";
-import { Message } from "element-ui";
-
-export default {
-  components: { Attributes, FGDesigner, Methods, Events, Code },
-  data() {
-    return {
-      desigerAttributes,
-      desigerMethods,
-      desigerCode,
-      desigerEvents,
-      dialogVisible: false,
-      value: JSON.parse(store.state.app.formData),
-      enabled: false,
-      hideSaveBtn: false,
-      maxScreen: false,
-      dialogLogin: false,
-      login: {},
-      loading: false,
-      codeUrl: "",
-      codeNumber: Math.random(), // 随机数
-    };
-  },
-  computed: {
-    options() {
-      return {
-        header: {
-          "access-ecs-token": store.state.user.token,
-          "system-type": store.state.user.systemType,
-        },
-        // hideTemps: true,
-        // hideOutline: true,
-        // hidePhone: true,
-      };
-    },
-  },
-  mounted() {
-    this.getLoginCode();
-  },
-  methods: {
-    // 更新验证码
-    getLoginCode() {
-      this.codeUrl = `${window.APLURL}/getCode?code=${
-        this.codeNumber
-      }&id=${Math.random()}`;
-    },
-    handleLogin() {
-      const formData = {
-        cellphone: this.login.cellphone,
-        password: this.$md5(this.login.password),
-        code: this.login.code,
-        codeNumber: this.codeNumber,
-      };
-      this.loading = true;
-      requestPost2(window.APLURL + "/sys/user/userLogin", formData)
-        .then((res) => {
-          if (res.code == 1) {
-            Message.success("登录成功");
-            this.dialogLogin = false;
-            store.commit("SET_SYSTEMTYPE", res.result.actionCode);
-          } else Message.error(res.msg);
-        })
-        .catch(() => {
-          Message.error("登录失败");
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSave(form) {
-      console.log("数据：", form);
-      // this.$messageBox.
-      store.commit("SET_FORMDATA", deepClone(JSON.stringify(form)));
-    },
-    // 校验
-    handleValid() {
-      this.$refs.FGDesigner.validate((valid, message) => {
-        if (!valid) return this.$message.error(message);
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scope>
-.comsDesiger {
-  height: 800px;
-  // border: 1px solid #f1e8e8;
-  box-shadow: 0 0 4px #0000001a;
-  border-radius: 5px;
-  margin-bottom: 20px;
-}
-// .max-screen {
-//   position: fixed;
-//   top: 0;
-//   left: 0;
-//   right: 0;
-//   bottom: 0;
-//   height: 100vh;
-//   z-index: 100;
-//   background-color: #fff;
-// }
-</style>

package/src/views/coms/comsFormPc.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="coms-page">
-    <h1>FGPcForm PC端表单渲染</h1>
-    <div class="text1">
-      用于展示、填报由表单编辑器生成的表单，表单样式基于
-      <ELink />
-    </div>
-    <el-card header="演示">
-      <FGPcForm ref="FGPcForm" v-model="form" :options="options" />
-      <div style="text-align: center">
-        <el-button type="primary" @click="submitForm">提交</el-button>
-        <el-button @click="resetForm">重置</el-button>
-      </div>
-    </el-card>
-    <el-card header="代码">
-      <Code :code="pcFormCode" />
-    </el-card>
-    <el-card header="Attributes">
-      <Attributes :data="formAttributes" />
-    </el-card>
-    <el-card header="Methods">
-      <Methods :data="formMethods" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { formAttributes, formMethods, pcFormCode } from "@/utils/comsData";
-import { data } from "@/utils/defaultValue";
-import Attributes from "./components/Attributes";
-import Methods from "./components/Methods";
-import FGPcForm from "@/package/FGPcForm";
-import Code from "@/components/code/Code.vue";
-import { deepClone } from "../../components/formGenerator/utils";
-import store from "@/store";
-
-export default {
-  components: { Attributes, Methods, FGPcForm, Code },
-  data() {
-    return {
-      formAttributes,
-      formMethods,
-      pcFormCode,
-      form: store.state.app.formData || JSON.stringify(data),
-    };
-  },
-  computed: {
-    options() {
-      return {
-        header: {
-          "access-ecs-token": store.state.user.token,
-          "system-type": store.state.user.systemType,
-        },
-      };
-    },
-  },
-  methods: {
-    submitForm() {
-      this.$refs["FGPcForm"].validateForm((valid, form, value) => {
-        if (valid) {
-          console.log("提交", form, JSON.parse(value));
-          // 表单校验通过
-          store.commit("SET_FORMDATA", deepClone(value));
-        } else {
-          console.log("表单校验失败");
-        }
-      });
-    },
-    resetForm() {
-      this.$refs["FGPcForm"].resetForm();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/views/coms/comsFormPhone.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="coms-page">
-    <h1>FGPhoneForm 移动端表单渲染</h1>
-    <div class="text1">
-      用于展示、填报由表单编辑器生成的表单，表单样式基于
-      <VLink />
-    </div>
-
-    <div class="coms-form-phone">
-      <el-card header="代码" class="coms-form-phone-left">
-        <Code :code="phoneFormCode" />
-      </el-card>
-      <el-card header="演示" class="coms-form-phone-right phone-scroll">
-        <FGPhoneForm ref="FGPhoneForm" v-model="form" :options="options" />
-        <div style="margin: 16px">
-          <van-button round block type="info" @click="submitForm">提交</van-button>
-          <van-button round plain block style="margin-top: 15px" type="info" @click="resetForm">重置</van-button>
-        </div>
-      </el-card>
-    </div>
-    <el-card header="Attributes">
-      <Attributes :data="formAttributes" />
-    </el-card>
-    <el-card header="Methods">
-      <Methods :data="formMethods" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { formAttributes, formMethods, phoneFormCode } from "@/utils/comsData";
-import { data } from "@/utils/defaultValue";
-import Attributes from "./components/Attributes";
-import Methods from "./components/Methods";
-import FGPhoneForm from "@/package/FGPhoneForm";
-import Code from "@/components/code/Code.vue";
-import store from "@/store";
-
-export default {
-  components: { Attributes, Methods, FGPhoneForm, Code },
-  data() {
-    return {
-      formAttributes,
-      formMethods,
-      phoneFormCode,
-      form: this.$store.state.app.formData || JSON.stringify(data),
-    };
-  },
-  computed: {
-    options() {
-      return {
-        header: {
-          "access-ecs-token": store.state.user.token,
-          "system-type": store.state.user.systemType,
-        },
-      };
-    },
-  },
-  methods: {
-    submitForm() {
-      this.$refs["FGPhoneForm"].validateForm((valid, form, value) => {
-        if (valid) {
-          console.log("提交", form, JSON.parse(value));
-
-          // 表单校验通过
-          this.$store.commit("SET_FORMDATA", value);
-        } else {
-          console.log("表单校验失败");
-        }
-      });
-    },
-    resetForm() {
-      this.$refs["FGPhoneForm"].resetForm();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.coms-form-phone {
-  width: 100%;
-  position: relative;
-  .coms-form-phone-left {
-    width: calc(100% - 395px);
-  }
-  .coms-form-phone-right {
-    position: absolute;
-    right: 0;
-    top: -20px;
-    bottom: 0;
-  }
-}
-/* 隐藏滚动条 */
-::-webkit-scrollbar {
-  display: none;
-}
-
-/* 启用滚动 */
-.phone-scroll {
-  overflow: auto;
-  width: 375px;
-}
-</style>

package/src/views/coms/comsShowPc.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="coms-page">
-    <h1>FGPcShow PC端表单详情</h1>
-    <div class="text1">用于展示已填报表单详情</div>
-    <el-card header="演示">
-      <FGPcShow ref="FGPcShow" :value="form" :options="options" @selectHis="selectHis" />
-    </el-card>
-    <el-card header="代码">
-      <Code :code="pcShowCode" />
-    </el-card>
-    <el-card header="Attributes">
-      <Attributes :data="showAttributes" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { showAttributes, pcShowCode } from "@/utils/comsData";
-import { data } from "@/utils/defaultValue";
-import Attributes from "./components/Attributes";
-import FGPcShow from "@/package/FGPcShow";
-import Code from "@/components/code/Code.vue";
-import store from "@/store";
-
-export default {
-  components: { Attributes, FGPcShow, Code },
-  data() {
-    return {
-      showAttributes,
-      pcShowCode,
-      form: this.$store.state.app.formData || JSON.stringify(data),
-    };
-  },
-  computed: {
-    options() {
-      return {
-        header: {
-          "access-ecs-token": store.state.user.token,
-          "system-type": store.state.user.systemType,
-        },
-      };
-    },
-  },
-  mounted() {
-    console.log();
-  },
-  methods: {
-    selectHis(value) {
-      this.$message.success('222')
-      console.log('外3' + value)
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/views/coms/comsShowPhone.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="coms-page">
-    <h1>FGPhoneShow 移动端表单详情</h1>
-    <div class="text1">用于展示已填报表单详情</div>
-    <div class="coms-form-phone">
-      <el-card header="代码" class="coms-form-phone-left">
-        <Code :code="phoneShowCode" />
-      </el-card>
-      <el-card header="演示" class="coms-form-phone-right phone-scroll">
-        <FGPhoneShow ref="FGPhoneShow" :value="form" :options="options" />
-      </el-card>
-    </div>
-
-    <el-card header="Attributes">
-      <Attributes :data="showAttributes" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { showAttributes, phoneShowCode } from "@/utils/comsData";
-import { data } from "@/utils/defaultValue";
-import Attributes from "./components/Attributes";
-import FGPhoneShow from "@/package/FGPhoneShow";
-import Code from "@/components/code/Code.vue";
-import store from "@/store";
-
-export default {
-  components: { Attributes, FGPhoneShow, Code },
-  data() {
-    return {
-      showAttributes,
-      phoneShowCode,
-      form: this.$store.state.app.formData || JSON.stringify(data),
-    };
-  },
-  mounted() {
-    console.log();
-  },
-  computed: {
-    options() {
-      return {
-        header: {
-          "access-ecs-token": store.state.user.token,
-          "system-type": store.state.user.systemType,
-        },
-      };
-    },
-  },
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.coms-form-phone {
-  width: 100%;
-  position: relative;
-  height: 667px;
-  .coms-form-phone-left {
-    width: calc(100% - 395px);
-    height: 100%;
-    ::v-deep .el-card__body {
-      height: calc(100% - 62px);
-      box-sizing: border-box;
-      pre,
-      code {
-        height: 100%;
-        box-sizing: border-box;
-      }
-    }
-  }
-  .coms-form-phone-right {
-    position: absolute;
-    right: 0;
-    top: -20px;
-    bottom: 0;
-  }
-}
-/* 隐藏滚动条 */
-::-webkit-scrollbar {
-  display: none;
-}
-
-/* 启用滚动 */
-.phone-scroll {
-  overflow: auto;
-  width: 375px;
-}
-</style>

package/src/views/config/components/configCell.vue

@@ -1,111 +0,0 @@
-<template>
-  <el-tabs v-model="active" tab-position="left" @input="handleInput">
-    <el-tab-pane
-      v-for="(item,i) in list"
-      :key="i"
-      :label="item.__config__.label"
-      :name="item.__config__.label"
-    >
-      <el-row :gutter="20" v-if="active==item.__config__.label">
-        <el-col :span="16">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <FGPcForm v-if="!loading" v-model="form" />
-            </el-col>
-            <el-col :span="12">
-              <FGPhoneForm v-if="!loading" v-model="form" />
-            </el-col>
-          </el-row>
-
-          <Code :code="value" />
-        </el-col>
-        <el-col :span="8">
-          <FormGeneratorAttrField :fieldConf.sync="value" @tag-change="handleChange" />
-        </el-col>
-      </el-row>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-import Code from "@/components/code/Code";
-import FGPcForm from "@/package/FGPcForm";
-import FGPhoneForm from "@/package/FGPhoneForm";
-
-import {
-  formConf,
-  inputComponents,
-  selectComponents,
-  layoutComponents,
-  assistComponents,
-} from "@/components/formGenerator/utils/config";
-
-import FormGeneratorAttrField from "@/components/formGenerator/components/formGeneratorAttrField.vue";
-import { deepClone } from "@/components/formGenerator/utils";
-export default {
-  components: {
-    Code,
-    FGPcForm,
-    FGPhoneForm,
-    FormGeneratorAttrField,
-  },
-  data() {
-    return {
-      value: inputComponents[0],
-      active: inputComponents[0].__config__.label,
-      form: "",
-      loading: false,
-    };
-  },
-  computed: {
-    list() {
-      return [
-        ...inputComponents,
-        ...selectComponents,
-        ...layoutComponents,
-        ...assistComponents,
-      ].map((item, i) => {
-        return {
-          ...item,
-          __vModel__: "field" + i,
-          formId: "field" + i,
-        };
-      });
-    },
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.form = JSON.stringify({
-            ...formConf,
-            labelPosition: "top",
-            list: [this.value],
-          });
-          this.$store.commit("SET_ACTIVEDATA", this.value);
-          this.loading = true;
-          this.$nextTick(() => {
-            this.loading = false;
-          });
-        }
-      },
-    },
-  },
-  methods: {
-    handleInput(val) {
-      this.value = this.list.find((item) => item.__config__.label == val);
-    },
-    handleChange(value) {
-      this.value = value;
-      this.active = value.__config__.label;
-    },
-  },
-};
-</script>
-
-
-<style lang="scss" scoped>
-</style>