@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/package/FGPcShow.vue

@@ -1,69 +0,0 @@
-<template>
-  <PcShow :formList="formLists" :formConf="formAttrs" :onlyShow="true" @selectHis="handleSelectHis" />
-</template>
-
-<script>
-import PcShow from "@/components/formGenerator/formComponents/pcForm.vue";
-import {
-  deepClone,
-  setFormValue,
-  arrayToObject,
-} from "@/components/formGenerator/utils";
-import "./common/initPc";
-import store from "@/store";
-import mixins from "./common/mixins";
-
-export default {
-  name: "FGPcShow",
-  mixins: [mixins],
-  components: {
-    PcShow,
-  },
-  props: {
-    value: {
-      type: [String, Object],
-      default: "",
-    },
-    // 传入对应的key & value
-    form: {
-      type: Object,
-      default: () => {},
-    },
-    // 传入的对应的[key:'',value:'']
-    formArray: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    formLists() {
-      if (this.formAttrs && this.formAttrs.list) {
-        let form = this.form;
-        if (this.formArray.length) form = arrayToObject(this.formArray);
-        return setFormValue(deepClone(this.formAttrs.list || []), form);
-      }
-      return [];
-    },
-    formAttrs() {
-      let value = deepClone(this.value);
-      if (typeof this.value === "string") {
-        value = JSON.parse(this.value || "{}");
-      }
-      return value;
-    }
-  },
-  methods: {
-    handleSelectHis(value) {
-      console.log('pchis', value)
-      this.$emit("selectHis", value)
-    }
-  },
-  // 销毁组件时清空store
-  destroyed() {
-    store.commit("SET_CSSLIST", []);
-    store.commit("SET_EVENTLIST", []);
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/package/FGPhoneForm.vue

@@ -1,106 +0,0 @@
-<template>
-  <PhoneForm ref="PhoneForm" :formList.sync="formLists" :formConf="formAttrs" />
-</template>
-
-<script>
-import PhoneForm from "@/components/formGenerator/formComponents/phoneForm.vue";
-import {
-  deepClone,
-  setFormValue,
-  arrayToObject,
-} from "@/components/formGenerator/utils";
-import "./common/initPhone";
-import store from "@/store";
-import mixins from "./common/mixins";
-
-export default {
-  name: "FGPhoneForm",
-  mixins: [mixins],
-  components: {
-    PhoneForm,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [String, Object],
-      default: "",
-    },
-    // 传入对应的key & value
-    form: {
-      type: Object,
-      default: () => {},
-    },
-    // 传入的对应的[key:'',value:'']
-    formArray: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      formLists: [],
-      formAttrs: {},
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  computed: {
-    // 传的value值是否为String类型
-    isString() {
-      return typeof this.value === "string";
-    },
-  },
-  methods: {
-    init() {
-      let value = deepClone(this.value);
-      let form = this.form;
-      if (this.formArray.length) form = arrayToObject(this.formArray);
-      if (this.isString) {
-        value = JSON.parse(this.value || "{}");
-      }
-      if (value && value.list) {
-        this.formLists = setFormValue(deepClone(value?.list || []), form);
-        this.formAttrs = deepClone(value);
-        delete this.formAttrs?.list;
-      }
-    },
-    validateForm(cb) {
-      this.$refs["PhoneForm"].validateForm((valid, form, list) => {
-        let newValue = deepClone({ ...this.formAttrs, list });
-        if (this.isString) {
-          newValue = JSON.stringify(newValue);
-        }
-        this.$emit("update", newValue);
-        this.$emit("submit", form, newValue);
-        cb(valid, form, newValue);
-      });
-    },
-    submitForm(cb) {
-      this.$refs["PhoneForm"].submitForm((form, list) => {
-        let newValue = deepClone({ ...this.formAttrs, list });
-        if (this.isString) {
-          newValue = JSON.stringify(newValue);
-        }
-        this.$emit("update", newValue);
-        this.$emit("submit", form, newValue);
-        cb(form, newValue);
-      });
-    },
-    // 重置
-    resetForm() {
-      this.$refs["PhoneForm"].resetForm();
-    },
-  },
-  // 销毁组件时清空store
-  destroyed() {
-    store.commit("SET_CSSLIST", []);
-    store.commit("SET_EVENTLIST", []);
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/package/FGPhoneShow.vue

@@ -1,69 +0,0 @@
-<template>
-  <PhoneShow :formList="formLists" :formConf="formAttrs" :onlyShow="true" @selectHis="handleSelectHis" />
-</template>
-
-<script>
-import PhoneShow from "@/components/formGenerator/formComponents/phoneForm.vue";
-import {
-  deepClone,
-  setFormValue,
-  arrayToObject,
-} from "@/components/formGenerator/utils";
-import "./common/initPhone";
-import store from "@/store";
-import mixins from "./common/mixins";
-
-export default {
-  name: "FGPhoneShow",
-  mixins: [mixins],
-  components: {
-    PhoneShow,
-  },
-  props: {
-    value: {
-      type: [String, Object],
-      default: "",
-    },
-    // 传入对应的key & value
-    form: {
-      type: Object,
-      default: () => {},
-    },
-    // 传入的对应的[key:'',value:'']
-    formArray: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    formLists() {
-      if (this.formAttrs && this.formAttrs.list) {
-        let form = this.form;
-        if (this.formArray.length) form = arrayToObject(this.formArray);
-        return setFormValue(deepClone(this.formAttrs.list || []), form);
-      }
-      return [];
-    },
-    formAttrs() {
-      let value = deepClone(this.value);
-      if (typeof this.value === "string") {
-        value = JSON.parse(this.value || "{}");
-      }
-      return value;
-    },
-  },
-  methods: {
-    handleSelectHis(value) {
-      console.log('phonehis', value)
-      this.$emit("selectHis", value)
-    }
-  },
-  // 销毁组件时清空store
-  destroyed() {
-    store.commit("SET_CSSLIST", []);
-    store.commit("SET_EVENTLIST", []);
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/package/common/init.js

@@ -1,23 +0,0 @@
-import Vue from "vue";
-// 接口前缀
-window.APLURL = '/MCAPI'
-import "@/icons"; // icon
-// 引入全局组件
-import componentsAll from '@/components'
-Vue.use(componentsAll)
-
-import axios from 'axios';
-Vue.prototype.$axios = axios;
-import * as utils from "@/components/formGenerator/utils/index"
-Vue.prototype.$utils = utils
-import * as form from "@/components/formGenerator/utils/formEvent"
-Vue.prototype.$form = form
-import "@/components/formGenerator/styles/index.scss";
-import "@/components/formGenerator/styles/generator.scss";
-// import "@/components/formGenerator/styles/theme.scss";
-import "@/components/formGenerator/utils/component";
-
-
-
-
-

package/src/package/common/initPc.js

@@ -1,26 +0,0 @@
-import Vue from "vue";
-import "./init";
-import "element-ui/lib/theme-chalk/index.css";
-import {
-  Container, Aside, Main, Menu, MenuItem, Submenu,
-  Card, Divider, Button, Select, Row, Col, Form, FormItem,
-  Scrollbar, Empty, Tabs, TabPane, Input, InputNumber, Switch,
-  RadioGroup, Radio, RadioButton, CheckboxGroup, Checkbox, CheckboxButton,
-  Table, TableColumn, Tag, DatePicker, Dialog,
-  Rate, Upload, Image, Slider, Cascader, Option, OptionGroup,
-  Tree, Transfer, ColorPicker, TimePicker, Link,
-  Message, MessageBox, Tooltip, Alert, Collapse, CollapseItem,
-  Dropdown, DropdownMenu, DropdownItem, Popover, Steps, Step,
-  Carousel, CarouselItem, Avatar, Autocomplete, Pagination, Loading
-} from 'element-ui';
-Vue.use(Container).use(Aside).use(Main).use(Menu).use(MenuItem).use(Submenu)
-Vue.use(Card).use(Divider).use(Button).use(Select).use(Row).use(Col).use(Form).use(FormItem)
-Vue.use(Scrollbar).use(Empty).use(Tabs).use(TabPane).use(Input).use(InputNumber).use(Switch)
-Vue.use(RadioGroup).use(Radio).use(RadioButton).use(CheckboxGroup).use(Checkbox).use(CheckboxButton).use(Switch)
-Vue.use(Table).use(TableColumn).use(Tag).use(DatePicker).use(Dialog)
-Vue.use(Rate).use(Upload).use(Image).use(Cascader).use(Slider).use(Option).use(OptionGroup)
-Vue.use(Tree).use(Transfer).use(ColorPicker).use(TimePicker).use(Link).use(Tooltip).use(Alert)
-Vue.use(Collapse).use(CollapseItem).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(Popover)
-Vue.use(Steps).use(Step).use(Carousel).use(CarouselItem).use(Avatar).use(Autocomplete).use(Pagination).use(Loading)
-Vue.prototype.$message = Message;
-Vue.prototype.$messageBox = MessageBox;

package/src/package/common/initPhone.js

@@ -1,28 +0,0 @@
-import Vue from "vue";
-import "./init";
-import "@/components/formGenerator/styles/phone.scss";
-
-import {
-  List, NavBar, Tab, Tabs, Sticky, Button, Search, Icon, Popover, Cell, CellGroup, Tag, Step, Steps, Image as VanImage, ActionSheet,
-  Picker, Popup, Field, Empty, Toast, Dialog, Checkbox, CheckboxGroup, Switch, PullRefresh, NoticeBar, Swipe, SwipeItem, Pagination,
-  Grid, GridItem, SwipeCell, Form, DatetimePicker, IndexBar, IndexAnchor, Col, Row, RadioGroup, Radio, Collapse, CollapseItem, Loading,
-  Stepper, Overlay, Badge, Cascader, Uploader, Tabbar, TabbarItem, CountDown, Divider, Sidebar, SidebarItem, TreeSelect, Slider, Rate,
-} from 'vant';
-
-Vue.use(List).use(NavBar).use(Tab).use(Tabs).use(Sticky);
-Vue.use(Button).use(Search).use(Icon).use(Popover).use(Cell).use(CellGroup).use(Tag).use(Col).use(Row).use(Pagination).use(ActionSheet);
-Vue.use(Step).use(Steps).use(VanImage).use(Picker).use(Popup).use(Field).use(Empty).use(Toast).use(NoticeBar).use(Swipe).use(SwipeItem).use(Grid).use(GridItem)
-Vue.use(Dialog).use(Checkbox).use(CheckboxGroup).use(Switch).use(PullRefresh).use(SwipeCell).use(Form).use(DatetimePicker).use(IndexBar).use(IndexAnchor)
-Vue.use(RadioGroup).use(Radio).use(Grid).use(GridItem).use(Collapse).use(CollapseItem).use(Loading).use(Overlay).use(Badge);
-Vue.use(Stepper).use(Cascader).use(Uploader).use(Tabbar).use(TabbarItem).use(CountDown).use(Divider).use(Sidebar).use(SidebarItem).use(TreeSelect)
-Vue.use(Slider).use(Rate)
-
-
-
-
-
-
-
-
-
-

package/src/package/common/mixins.js

@@ -1,57 +0,0 @@
-import store from "../../store"
-
-export default {
-  props: {
-    // 表单编辑器的配置内容
-    options: {
-      type: Object,
-      default: () => {
-        return {
-          // 主题色:只支持rgb和hex格式
-          themeColor: "#409EFF",
-          // 接口请求头内容，如果存在则将其放置到表单编辑器的接口请求头上
-          header: {},
-          hideTemps: false,// 是否隐藏模板
-          hideOutline: false,// 是否隐藏大纲
-          hidePhone: false // 是否隐藏手机端
-        }
-      }
-    },
-  },
-  computed: {
-    // 主题色:只支持rgb和hex格式
-    themeColor() {
-      return this.options?.themeColor || '#409EFF'
-    },
-    // 接口请求头内容，如果存在则将其放置到表单编辑器的接口请求头上
-    header() {
-      return this.options?.header || {}
-    },
-    // 是否隐藏模板
-    hideTemps() {
-      return this.options?.hideTemps || false
-    },
-    // 是否隐藏大纲
-    hideOutline() {
-      return this.options?.hideOutline || false
-    },
-    // 是否隐藏手机端
-    hidePhone() {
-      return this.options?.hidePhone || false
-    },
-  },
-  mounted() {
-    // 将配置内容存放在store中
-    this.handleStore();
-
-  },
-  methods: {
-    handleStore() {
-      if (this.themeColor)
-        store.commit('SET_THEMECOLOR', this.themeColor)
-      if (Object.keys(this.header).length) store.commit('SET_HEADER', this.header)
-
-    }
-  },
-
-};

package/src/package/index.js

@@ -1,40 +0,0 @@
-import FGDesigner from "./FGDesigner";// 引入封装好的组件
-import FGPcForm from "./FGPcForm";// 引入封装好的组件
-import FGPcShow from "./FGPcShow";// 引入封装好的组件
-import FGPhoneForm from "./FGPhoneForm";// 引入封装好的组件
-import FGPhoneShow from "./FGPhoneShow";// 引入封装好的组件
-
-
-const coms = [FGDesigner, FGPcForm, FGPcShow, FGPhoneForm, FGPhoneShow]; // 将来如果有其它组件,都可以写到这个数组里
-
-// 批量组件注册
-const install = function (Vue) {
-  coms.forEach((com) => {
-    Vue.component(com.name, com);
-  });
-};
-export default install; // 这个方法以后再使用的时候可以被use调用
-
-// 按需加载的写法
-// import FGDesignerCom from "./FGDesigner";// 引入封装好的组件
-// import FGPcFormCom from "./FGPcForm";// 引入封装好的组件
-// import FGPcShowCom from "./FGPcShow";// 引入封装好的组件
-// import FGPhoneFormCom from "./FGPhoneForm";// 引入封装好的组件
-// import FGPhoneShowCom from "./FGPhoneShow";// 引入封装好的组件
-
-// export const FGDesigner = function (Vue) {
-//   Vue.component(FGDesignerCom.name, FGDesignerCom);
-// };
-// export const FGPcForm = function (Vue) {
-//   Vue.component(FGPcFormCom.name, FGPcFormCom);
-// };
-// export const FGPcShow = function (Vue) {
-//   Vue.component(FGPcShowCom.name, FGPcShowCom);
-// };
-// export const FGPhoneForm = function (Vue) {
-//   Vue.component(FGPhoneFormCom.name, FGPhoneFormCom);
-// };
-// export const FGPhoneShow = function (Vue) {
-//   Vue.component(FGPhoneShowCom.name, FGPhoneShowCom);
-// };
-