├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── store
    │   └── index.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── components
    │   └── HelloWorld.vue
    └── App.vue
├── static
    └── formDesignTCD1.gif
├── object
    ├── formBuildTCD
    │   ├── index.js
    │   ├── build.vue
    │   └── buildFormNode.vue
    ├── formDesignTCD
    │   ├── contentFormTemplate
    │   │   ├── importJson.vue
    │   │   ├── index.vue
    │   │   └── topButton.vue
    │   ├── components
    │   │   ├── codemirrorVue.vue
    │   │   ├── uploadFileOrImg.vue
    │   │   ├── tMkeditor
    │   │   │   └── index.vue
    │   │   ├── tOptionAdd.vue
    │   │   ├── uploadImg
    │   │   │   └── index.vue
    │   │   ├── uploadFile
    │   │   │   └── index.vue
    │   │   ├── timeOrDateConfig.vue
    │   │   ├── tFormBuild
    │   │   │   └── index.vue
    │   │   ├── fromNode.vue
    │   │   └── tFormTemplate.vue
    │   ├── rightAside
    │   │   └── index.vue
    │   ├── controlList
    │   │   └── index.vue
    │   ├── baseConfig
    │   │   └── index.js
    │   ├── index.vue
    │   └── tFormControlConfig
    │   │   └── index.vue
    ├── eleComponents
    │   └── index.js
    └── index.js
├── vue.config.js
├── babel.config.js
├── .gitignore
├── .npmignore
├── .eslintrc.js
├── styles
    ├── T-Form-build.less
    ├── tMkeditor-chinesization.less
    └── tcd-form-design.less
├── LICENSE
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zimudehub/FormDesignTCD/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zimudehub/FormDesignTCD/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/static/formDesignTCD1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zimudehub/FormDesignTCD/HEAD/static/formDesignTCD1.gif


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/object/formBuildTCD/index.js:
--------------------------------------------------------------------------------
1 | import FormBuildTCD from "./build"
2 | FormBuildTCD.install = function (Vue) {
3 |     if (install.installed)return;
4 |     install.installed = true;
5 |     Vue.component(FormBuildTCD.name, FormBuildTCD)
6 | 
7 | };
8 | export default FormBuildTCD
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     productionSourceMap: false,
 3 |     css: {
 4 |         // extract: false,
 5 |         loaderOptions: {
 6 |             less: {
 7 |                 javascriptEnabled: true
 8 |             }
 9 |         }
10 |     }
11 | };
12 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset',
 4 |   ],
 5 |   "plugins": [
 6 |     [
 7 |       "component",
 8 |       {
 9 |         "libraryName": "element-ui",
10 |         "styleLibraryName": "theme-chalk"
11 |       }
12 |     ]
13 |   ]
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # 忽略目录
 2 | object/
 3 | public/
 4 | src/
 5 | static/
 6 | styles/
 7 | node_modules/
 8 | 
 9 | # 忽略指定文件
10 | vue.config.js
11 | babel.config.js
12 | .eslintrc.js
13 | 
14 | # Log files
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | # Editor directories and files
20 | .idea
21 | .vscode
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from '@/components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'Home',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     env: {
 4 |         node: true
 5 |     },
 6 |     'extends': [
 7 |         'plugin:vue/essential',
 8 |         // '@vue/standard'
 9 |     ],
10 |     parserOptions: {
11 |         parser: 'babel-eslint'
12 |     },
13 |     rules: {
14 |         'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 |         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import FormDesign from '../object'
 6 | import FormBuildTCD from '../object/formBuildTCD'
 7 | 
 8 | FormDesign.setDesignConfig({
 9 |   uploadImg:{
10 |     headers:{"auuu":"auuu"},
11 |     data:{wo:123}
12 |   }
13 | });
14 | Vue.use(FormDesign);
15 | 
16 | Vue.config.productionTip = false;
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: h => h(App)
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/contentFormTemplate/importJson.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="json-box-view">
 3 |     <codemirror
 4 |       style="height:100%;"
 5 |       ref="myEditor"
 6 |       v-model="importJson.json"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   import { codemirror } from 'vue-codemirror-lite'
13 |     export default {
14 |         name: "ImportJson",
15 |         components:{codemirror},
16 |         props:{
17 |             importJson:{
18 |                 type: Object,
19 |                 required: true
20 |             }
21 |         },
22 | 
23 |     }
24 | </script>
25 | 
26 | <style scoped>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 |   const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/codemirrorVue.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="json-box-view">
 3 |     <codemirror
 4 |       style="height:100%;"
 5 |       ref="myEditor"
 6 |       :value="json"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |     import { codemirror } from 'vue-codemirror-lite'
13 |     import('codemirror/mode/javascript/javascript');
14 |     import('codemirror/mode/vue/vue');
15 |     export default {
16 |         name: "codemirrorVue",
17 |         props:{
18 |             json:{
19 |                 type:String,
20 |             }
21 |         },
22 |         components:{codemirror},
23 |         data(){
24 |             return{
25 | 
26 |             }
27 |         }
28 |     }
29 | </script>
30 | 
31 | <style lang="less" scoped>
32 | 
33 | </style>
34 | 


--------------------------------------------------------------------------------
/styles/T-Form-build.less:
--------------------------------------------------------------------------------
 1 | 
 2 | .finalForm{
 3 |   .el-form-item__label{
 4 |     white-space: nowrap;
 5 |   }
 6 |   .form-build-grid{
 7 |     //格栅布局
 8 | 
 9 |   }
10 | 
11 |   .form-build-table{
12 |     width: 100%;
13 |     border: 1px solid #d6d8df;
14 |     tbody{
15 | 
16 |       tr{
17 | 
18 |         td{
19 |           .el-form-item{
20 |             min-width: 120px;
21 |           }
22 |           min-height: 40px;
23 |           &>div{
24 |             padding: 5px;
25 |           }
26 |           .el-form-item{
27 |             margin: 0;
28 |           }
29 |         }
30 |       }
31 |     }
32 |   }
33 |   .form-build-childTable{
34 |     margin: 10px 0;
35 |     .table-button{
36 |       display: inline-block;
37 |       padding: 5px;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 TanChengDuo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/uploadFileOrImg.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <el-divider v-if="options.hasOwnProperty('buttonText')"/>
 4 |       <el-form-item label="按钮文字" v-if="options.hasOwnProperty('buttonText')">
 5 |         <el-input v-model="options.buttonText" placeholder="请输入内容"></el-input>
 6 |       </el-form-item>
 7 |       <el-divider v-if="options.hasOwnProperty('warnText')"/>
 8 |       <el-form-item label="提示文字" v-if="options.hasOwnProperty('warnText')">
 9 |         <el-input v-model="options.warnText" placeholder="请输入内容"></el-input>
10 |       </el-form-item>
11 |       <el-divider/>
12 |       <el-form-item label="上传地址">
13 |         <el-input v-model="options.action" placeholder="请输入内容"></el-input>
14 |       </el-form-item>
15 |       <el-divider v-if="options.hasOwnProperty('listType')" />
16 |       <el-form-item label="上传地址" v-if="options.hasOwnProperty('listType')">
17 |         <el-radio-group v-model="options.listType"  size="mini">
18 |           <el-radio-button label="text">文本</el-radio-button>
19 |           <el-radio-button label="picture">文本图</el-radio-button>
20 |           <el-radio-button label="picture-card">照片墙</el-radio-button>
21 |         </el-radio-group>
22 |       </el-form-item>
23 |     </div>
24 | </template>
25 | 
26 | <script>
27 |     export default {
28 |         name: "index",
29 |         props:{
30 |             options:{
31 |                 type: Object,
32 |                 required: true
33 |             }
34 |         },
35 | 
36 |     }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/object/eleComponents/index.js:
--------------------------------------------------------------------------------
 1 | //按需配置formDesignTCD的element配置,减小输出体积
 2 | import Vue from 'vue';
 3 | import {
 4 |     Dialog,
 5 |     Input,
 6 |     InputNumber,
 7 |     Radio,
 8 |     RadioGroup,
 9 |     RadioButton,
10 |     Checkbox,
11 |     CheckboxButton,
12 |     CheckboxGroup,
13 |     Switch,
14 |     Select,
15 |     Option,
16 |     OptionGroup,
17 |     Button,
18 |     ButtonGroup,
19 |     Table,
20 |     TableColumn,
21 |     DatePicker,
22 |     TimeSelect,
23 |     TimePicker,
24 |     Popover,
25 |     Tooltip,
26 |     Form,
27 |     FormItem,
28 |     Slider,
29 |     Icon,
30 |     Row,
31 |     Col,
32 |     Upload,
33 |     Card,
34 |     Link,
35 |     Divider,
36 |     Cascader,
37 |     Message,
38 | } from 'element-ui';
39 | 
40 | Vue.use(Dialog);
41 | Vue.use(Cascader);
42 | Vue.use(Input);
43 | Vue.use(InputNumber);
44 | Vue.use(Radio);
45 | Vue.use(RadioGroup);
46 | Vue.use(RadioButton);
47 | Vue.use(Checkbox);
48 | Vue.use(CheckboxButton);
49 | Vue.use(CheckboxGroup);
50 | Vue.use(Switch);
51 | Vue.use(Select);
52 | Vue.use(Option);
53 | Vue.use(OptionGroup);
54 | Vue.use(Button);
55 | Vue.use(ButtonGroup);
56 | Vue.use(Table);
57 | Vue.use(TableColumn);
58 | Vue.use(DatePicker);
59 | Vue.use(TimeSelect);
60 | Vue.use(TimePicker);
61 | Vue.use(Popover);
62 | Vue.use(Tooltip);
63 | Vue.use(Form);
64 | Vue.use(FormItem);
65 | Vue.use(Slider);
66 | Vue.use(Icon);
67 | Vue.use(Row);
68 | Vue.use(Col);
69 | Vue.use(Upload);
70 | Vue.use(Card);
71 | Vue.use(Link);
72 | Vue.use(Divider);
73 | 
74 | 
75 | 
76 | Vue.prototype.$message = Message;
77 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/rightAside/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-form
 3 |     label-width="80px"
 4 |     :model="layoutData"
 5 |     class="left-form"
 6 |     size="mini"
 7 |   >
 8 | <!--    config: {-->
 9 | <!--    labelPosition: "horizontal",-->
10 | <!--    labelCol: 15,-->
11 | <!--    wrapperCol: { span: 18 },-->
12 | <!--    hideRequiredMark: false,-->
13 | <!--    customStyle: ""-->
14 | <!--    }-->
15 | 
16 |     <el-form-item label="label位置">
17 |       <el-radio-group v-model="layoutData.labelPosition" size="small">
18 |         <el-radio-button label="right">right</el-radio-button>
19 |         <el-radio-button label="left">left</el-radio-button>
20 |         <el-radio-button label="top">top</el-radio-button>
21 |       </el-radio-group>
22 |     </el-form-item>
23 |     <el-divider v-if="layoutData.labelPosition==='right'||layoutData.labelPosition==='left'"></el-divider>
24 |     <el-form-item v-if="layoutData.labelPosition==='right'||layoutData.labelPosition==='left'" label="label宽度(%)">
25 |       <el-slider
26 |         v-model="layoutData.labelWidth"
27 |         :max="80"
28 |         :min="0"
29 |       />
30 |     </el-form-item>
31 |     <el-divider></el-divider>
32 |     <el-form-item label="模态框宽度">
33 |       <el-input v-model="layoutData.customWidth"></el-input>
34 |     </el-form-item>
35 |   </el-form>
36 | </template>
37 | 
38 | <script>
39 |     export default {
40 |         name: "leftAside",
41 |         props:{
42 |             layoutData:{
43 |                 type:Object,
44 |                 required:true
45 |             }
46 |         }
47 |     }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/tMkeditor/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <quillEditor
 3 |     :style="{ height: record.options.height*100+'px' }"
 4 |     :value="value"
 5 |     ref="vueQuillEditor"
 6 |     class="ql-editor-class"
 7 |     :class="{ chinesization: record.options.chinesization }"
 8 |     :options="editorOption"
 9 |     :disabled="record.options.disabled || disabled"
10 |     @blur="onEditorBlur($event)"
11 |     @focus="onEditorFocus($event)"
12 |     @change="onEditorChange($event)"
13 |   >
14 |   </quillEditor>
15 | </template>
16 | <script>
17 |     import { quillEditor } from "vue-quill-editor"; //调用编辑器
18 |     import "quill/dist/quill.core.css";
19 |     import "quill/dist/quill.snow.css";
20 |     import "quill/dist/quill.bubble.css";
21 |     import "../../../../styles/tMkeditor-chinesization.less"
22 | 
23 |     export default {
24 |         name: "tMkeditor",
25 |         props: ["value", "record", "disabled"],
26 |         components: { quillEditor },
27 |         data() {
28 |             return {
29 |                 editorOption: {
30 |                     placeholder: this.record.options.placeholder
31 |                 }
32 |             };
33 |         },
34 |         methods: {
35 |             onEditorBlur() {}, // 失去焦点事件
36 |             onEditorFocus() {}, // 获得焦点事件
37 |             onEditorChange(e) {
38 |                 this.$emit("change", e.html);
39 |             }
40 |         }
41 |     };
42 | </script>
43 | <style lang="less" scoped>
44 |   .ql-editor-class {
45 |     -webkit-box-sizing: border-box;
46 |     box-sizing: border-box;
47 |     line-height: 1.42;
48 |     outline: none;
49 |     padding: 0 0 66px;
50 |     tab-size: 4;
51 |     -moz-tab-size: 4;
52 |     text-align: left;
53 |     word-wrap: break-word;
54 |   }
55 | 
56 | </style>
57 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/tOptionAdd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="margin-top: 8px" >
 3 |     <el-row v-for="(item,index) in value" :key="index" :gutter="5" style="margin-top: 6px">
 4 |       <el-col :span="9" >
 5 |         <el-input v-model="item.label" placeholder="请输入内容"></el-input>
 6 |       </el-col>
 7 |       <el-col :span="9">
 8 |         <el-input v-model="item.value" placeholder="请输入内容"></el-input>
 9 |       </el-col>
10 |       <el-col :span="6">
11 |         <el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(index)"></el-button>
12 |       </el-col>
13 |     </el-row>
14 |     <a href="#" @click="addItem">增加数据</a>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |     export default {
20 |         name: "tOptionAdd",
21 |         props:{
22 |             value:{
23 |                 type:Array,
24 |                 required:true
25 |             },
26 |         },
27 |         methods:{
28 |             deleteItem(index){
29 |               let options =[
30 |                   ...this.value
31 |               ];
32 |               if (options.length<=1){
33 |                   return
34 |               }
35 |               options.splice(index,1);
36 |               this.$emit("input", options)
37 |             },
38 |             addItem(){
39 |                 const key = new Date().getTime();
40 |                 const options = [
41 |                     ...this.value,
42 |                     {
43 |                         value: '',
44 |                         label: '',
45 |                         key
46 |                     }
47 |                 ];
48 |                 this.$emit("input", options)
49 |             }
50 |         }
51 |     }
52 | </script>
53 | <style scoped>
54 |   a{
55 |     text-decoration:none;
56 |   }
57 |   a:hover{
58 |     color: #409eff;
59 |   }
60 | </style>
61 | 
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "form-design-tcd",
 3 |   "version": "0.0.6",
 4 |   "private": false,
 5 |   "description": "基于element-ui的vue表单设计器",
 6 |   "main": "lib/form-design-tcd.umd.min.js",
 7 |   "author": "子沐",
 8 |   "keyword": [
 9 |     "element-ui",
10 |     "OA系统",
11 |     "FormDesignTCD",
12 |     "表单设计器",
13 |     "拖拽",
14 |     "工作流"
15 |   ],
16 |   "scripts": {
17 |     "serve": "vue-cli-service serve",
18 |     "build": "vue-cli-service build",
19 |     "lint": "vue-cli-service lint",
20 |     "lib": "vue-cli-service build --target lib --name form-design-tcd --dest lib object/index.js"
21 |   },
22 |   "dependencies": {
23 |     "babel-polyfill": "^6.26.0",
24 |     "core-js": "^3.6.5",
25 |     "element-ui": "^2.13.0",
26 |     "vue": "^2.6.11",
27 |     "vue-codemirror-lite": "^1.0.4",
28 |     "vue-quill-editor": "^3.0.6",
29 |     "vue-router": "^3.2.0",
30 |     "vuedraggable": "^2.23.2",
31 |     "vuex": "^3.4.0"
32 |   },
33 |   "devDependencies": {
34 |     "@vue/cli-plugin-babel": "~4.4.0",
35 |     "@vue/cli-plugin-eslint": "~4.4.0",
36 |     "@vue/cli-plugin-router": "~4.4.0",
37 |     "@vue/cli-plugin-vuex": "~4.4.0",
38 |     "@vue/cli-service": "~4.4.0",
39 |     "babel-eslint": "^10.1.0",
40 |     "babel-plugin-component": "^1.1.1",
41 |     "eslint": "^6.7.2",
42 |     "eslint-plugin-vue": "^6.2.2",
43 |     "less": "^3.0.4",
44 |     "less-loader": "^5.0.0",
45 |     "vue-template-compiler": "^2.6.11"
46 |   },
47 |   "eslintConfig": {
48 |     "root": true,
49 |     "env": {
50 |       "node": true
51 |     },
52 |     "extends": [
53 |       "plugin:vue/essential",
54 |       "eslint:recommended"
55 |     ],
56 |     "parserOptions": {
57 |       "parser": "babel-eslint"
58 |     },
59 |     "rules": {}
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions",
64 |     "not dead"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 指南 
 2 | 基于vue和element-ui实现的表单设计器，主要功能是使使用者在图形界面配置所需的表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速
 3 |   
 4 |   [预览地址](http://47.98.53.80:8005/)  
 5 |   [[GitHub]源码开源地址](https://github.com/zimudehub/FormDesignTCD)  
 6 |   [[码云]源码开源地址](https://gitee.com/tanchengduo/form-design-tcd)
 7 |   
 8 | ![An image](./img/formDesignTCD1.gif)
 9 | 特性
10 | - 可视化配置页面
11 | - 自由控制表单控件布局
12 | - 表单自定义样式(以行内样式插入)
13 | - 提供预览、保存、生成json、生成可执行代码等操作
14 | - 支持表单验证
15 | - 快速获取表单数据
16 | - 提供高级控件
17 |     <p align="center">
18 |       <a href="https://github.com/vuejs/vue">
19 |         <img src="https://img.shields.io/badge/vue-2.6.11-brightgreen.svg" alt="vue">
20 |       </a>
21 |       <a href="https://github.com/ElemeFE/element">
22 |         <img src="https://img.shields.io/badge/element%20ui-2.13.0-blue" alt="element-ui">
23 |       </a>
24 |       <a href="https://github.com/zimudehub/FormDesignTCD/blob/master/LICENSE">
25 |         <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
26 |       </a>
27 |     </p>
28 | ### 感谢
29 | 创作感谢k-form-design给予的灵感
30 | ### 版本
31 | <p align="center">
32 |       <a href="https://github.com/zimudehub/FormDesignTCD">
33 |         <img src="https://img.shields.io/badge/form%20design%20tcd-0.0.6-brightgreen.svg" alt="vue">
34 |       </a>
35 | </p>
36 | 
37 | ### 设计原则
38 | form-design-tcd本着所有表单控件特性尽可能可视化配置。
39 | ## 快速上手
40 | ### 1.安装vue-cli
41 | ```
42 |  npm install -g @vue/cli
43 |  # OR
44 |  yarn global add @vue/cli
45 | ```
46 | ### 2.创建一个项目
47 | 使用初始化项目命令
48 | ``` 
49 |  vue create myapp
50 | ```
51 | ### 3.安装form-design-tcd
52 | ``` 
53 |  npm i form-design-tcd --save
54 |  # OR
55 |  yarn add form-design-tcd
56 | ```
57 | 
58 | ### 4.使用form-design-tcd
59 | 在项目main.js中
60 | ``` 
61 |  import FormDesignTCD from 'form-design-tcd'
62 |  import "form-design-tcd/lib/form-design-tcd.css"
63 |  Vue.use(FormDesignTCD)
64 | ```
65 | 以上步骤便完成便可在项目中直接使用form-design-tcd。  
66 | form-design-tcd内置了两个组件分别为FormDesignTCD和FormBuildTCD。  
67 | ## 建议
68 | form-design-tcd基础组件样式引用的element-ui的组件库,在使用过程中一些表单控件特性可查阅element-ui官方文档
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/controlList/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="test">
 3 |       <div class="control-button-title">控件选择</div>
 4 | <!--      <div class="button-wrap">-->
 5 |       <draggable
 6 |           tag="ul"
 7 |           :value="baseArray"
 8 |           class="button-wrap-drg"
 9 |           v-bind="{
10 |             group: { name: 'form-draggable', pull: 'clone', put: false },
11 |             sort: false,
12 |             animation: 180,
13 |             ghostClass: 'leftMoving'
14 |           }"
15 |           @start="deepClone($event, baseArray)"
16 |       >
17 |           <li
18 |             v-for="(val, index) in baseArray"
19 |             :key="index"
20 |             @dragstart="$emit('generate', baseArray, index)"
21 |             @click="$emit('clickPushItem', baseArray, index)"
22 |           >
23 |               <i :class="val.icon"></i>
24 |               {{ val.label }}
25 |           </li>
26 |         </draggable>
27 |       <el-divider content-position="left">基础控件</el-divider>
28 |       <draggable
29 |           tag="ul"
30 |           :value="layoutList"
31 |           class="button-wrap-drg"
32 |           v-bind="{
33 |             group: { name: 'form-draggable', pull: 'clone', put: false },
34 |             sort: false,
35 |             animation: 180,
36 |             ghostClass: 'leftMoving'
37 |           }"
38 |           @start="deepClone($event, layoutList)"
39 |       >
40 |           <li
41 |             v-for="(val, index) in layoutList"
42 |             :key="index"
43 |             @dragstart="$emit('generate', layoutList, index)"
44 |             @click="$emit('clickPushItem', layoutList, index)"
45 |           >
46 |             <i :class="val.icon"></i>
47 |             {{ val.label }}
48 |           </li>
49 |       </draggable>
50 |       <el-divider content-position="left">布局控件</el-divider>
51 |     </div>
52 | </template>
53 | 
54 | <script>
55 |     import draggable from "vuedraggable";
56 |     export default {
57 |         name: "controlList",
58 |         components:{
59 |             draggable
60 |         },
61 |         props:{
62 |             baseArray:{
63 |                 type: Array,
64 |                 required: true
65 |             },
66 |             layoutList:{
67 |                 type: Array,
68 |                 required: true
69 |             }
70 |         },
71 |         data(){
72 |             return{
73 | 
74 |             }
75 |         },
76 |         methods:{
77 |             deepClone(e, list){
78 |               // console.log(e)
79 |             },
80 |         }
81 |     }
82 | </script>
83 | 
84 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 |     </ul>
16 |     <h3>Essential Links</h3>
17 |     <ul>
18 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
19 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
20 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
21 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
22 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
23 |     </ul>
24 |     <h3>Ecosystem</h3>
25 |     <ul>
26 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
27 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
28 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
29 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
30 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
31 |     </ul>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   name: 'HelloWorld',
38 |   props: {
39 |     msg: String
40 |   }
41 | }
42 | </script>
43 | 
44 | <!-- Add "scoped" attribute to limit CSS to this component only -->
45 | <style scoped lang="less">
46 | h3 {
47 |   margin: 40px 0 0;
48 | }
49 | ul {
50 |   list-style-type: none;
51 |   padding: 0;
52 | }
53 | li {
54 |   display: inline-block;
55 |   margin: 0 10px;
56 | }
57 | a {
58 |   color: #42b983;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/styles/tMkeditor-chinesization.less:
--------------------------------------------------------------------------------
 1 | //汉化编辑器
 2 | 
 3 | .chinesization{
 4 |   .ql-snow .ql-tooltip[data-mode="link"]::before {
 5 |     content: "请输入链接地址:";
 6 |   }
 7 |   .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
 8 |     border-right: 0px;
 9 |     content: "保存";
10 |     padding-right: 0px;
11 |   }
12 | 
13 |   .ql-snow .ql-tooltip[data-mode="video"]::before {
14 |     content: "请输入视频地址:";
15 |   }
16 | 
17 |   .ql-snow .ql-picker.ql-size .ql-picker-label::before,
18 |   .ql-snow .ql-picker.ql-size .ql-picker-item::before {
19 |     content: "14px";
20 |   }
21 |   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
22 |   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
23 |     content: "10px";
24 |   }
25 |   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
26 |   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
27 |     content: "18px";
28 |   }
29 |   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
30 |   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
31 |     content: "32px";
32 |   }
33 | 
34 |   .ql-snow .ql-picker.ql-header .ql-picker-label::before,
35 |   .ql-snow .ql-picker.ql-header .ql-picker-item::before {
36 |     content: "文本";
37 |   }
38 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
39 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
40 |     content: "标题1";
41 |   }
42 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
43 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
44 |     content: "标题2";
45 |   }
46 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
47 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
48 |     content: "标题3";
49 |   }
50 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
51 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
52 |     content: "标题4";
53 |   }
54 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
55 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
56 |     content: "标题5";
57 |   }
58 |   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
59 |   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
60 |     content: "标题6";
61 |   }
62 | 
63 |   .ql-snow .ql-picker.ql-font .ql-picker-label::before,
64 |   .ql-snow .ql-picker.ql-font .ql-picker-item::before {
65 |     content: "标准字体";
66 |   }
67 |   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
68 |   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
69 |     content: "衬线字体";
70 |   }
71 |   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
72 |   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
73 |     content: "等宽字体";
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app" style="height: 100vh;">
 3 |         <el-row style="height: 100%">
 4 |             <el-col :span="24" style="height: 100%">
 5 |                 <div
 6 |                     style="height: 60px; background: #dbeeff; line-height: 60px;text-align: center; font-size: 30px"
 7 |                 >formDesign-TCD 表单设计器</div>
 8 |                 <FormDesignTCD
 9 |                         @save="handleSave"
10 |                 />
11 |             </el-col>
12 | <!--            <el-col :span="9">-->
13 | <!--                <div>-->
14 | <!--                    <FormBuildTCD-->
15 | <!--                        :ref="'fbt'"-->
16 | <!--                        :options="defaultValue"-->
17 | <!--                        :dynamicData="dynamicData"-->
18 | <!--                        @onSuccess="getData"-->
19 | <!--                    />-->
20 | <!--                </div>-->
21 | <!--            </el-col>-->
22 |         </el-row>
23 |     </div>
24 | </template>
25 | <script>
26 |     // import FormBuildTCD from "../object/formBuildTCD"
27 |     export default {
28 |       name: "App",
29 |       // components:{FormBuildTCD},
30 |       data(){
31 |         return{
32 |             formData:{
33 |                 name:"TCD",
34 |                 age:"23"
35 |             },
36 |             dynamicData:{
37 |                 a:[
38 |                     {
39 |                         value: "1",
40 |                         label: "动态数据1",
41 |                         children: [
42 |                             {
43 |                                 value: "11",
44 |                                 label: "动态数据1-1"
45 |                             }
46 |                         ]
47 |                     },
48 |                     {
49 |                         value: "2",
50 |                         label: "动态数据2",
51 |                         children: [
52 |                             {
53 |                                 value: "22",
54 |                                 label: "动态数据2-2"
55 |                             }
56 |                         ]
57 |                     }
58 |                 ]
59 |             },
60 |               defaultValue:{
61 |                   config: {
62 |                       labelPosition: "top",
63 |                       labelWidth: 15,
64 |                   },
65 |                   list: [
66 |                   ]
67 |               }
68 |           }
69 |         },
70 |       methods:{
71 |           getData(response, file, fileList,model){
72 |               console.log(response);
73 |               console.log(file);
74 |               console.log(fileList);
75 |               console.log(model);
76 |           },
77 |       handleSave(data){
78 |               console.log(data);
79 |         this.defaultValue = data
80 |       }
81 |     }
82 |   }
83 | </script>
84 | <style>
85 |   html,body{
86 |     margin: 0;
87 |     padding: 0;
88 |     overflow: hidden;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/contentFormTemplate/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-form
  3 |     :label-position="data.config.labelPosition"
  4 |   >
  5 |     <draggable
  6 |       tag="div"
  7 |       class= "wrapper"
  8 |       v-model= "data.list"
  9 |       v-bind= "{
 10 |         group: 'form-draggable',
 11 |         animation: 180,
 12 |         handle:'.dar-box',
 13 |         ghostClass: 'moving',
 14 |         sort: true,
 15 |       }"
 16 |       @add="addItem"
 17 |       @start="start"
 18 |     >
 19 |       <transition-group tag="div" name="list" class="list-main">
 20 |           <TFormTemplate
 21 |             v-for="(item,i) in data.list"
 22 |             :layout="data.config"
 23 |             :key="item.key"
 24 |             :item="item"
 25 |             :i = "i"
 26 |             :selectType="selectType"
 27 |             @handleStart="handleStart"
 28 |             @deleteItem="deleteItem"
 29 |             :selectItem.sync="selectItem"
 30 |             @onClick="handleSelectItem"
 31 |             @selectChange="selectChange"
 32 |           />
 33 |       </transition-group>
 34 |     </draggable>
 35 |   </el-form>
 36 | </template>
 37 | 
 38 | <script>
 39 |     import draggable from 'vuedraggable';
 40 |     import TFormTemplate from '../components/tFormTemplate'
 41 |     export default {
 42 |         name: "contentFormTemplate",
 43 |         props:{
 44 |             selectType:{
 45 |                 required: true
 46 |             },
 47 |             data:{
 48 |                 type: Object,
 49 |                 required: true
 50 |             },
 51 |             selectItem:{
 52 |                 required: true
 53 |             },
 54 |             noModel: {
 55 |                 type: Array,
 56 |                 default:()=>[
 57 |                     "button",
 58 |                     "divider",
 59 |                     "card",
 60 |                     "grid",
 61 |                     "table",
 62 |                     "alert",
 63 |                     "p",
 64 |                     "html"
 65 |                 ],
 66 |             }
 67 |         },
 68 |         components:{draggable, TFormTemplate},
 69 |         computed:{
 70 | 
 71 |         },
 72 |         data(){
 73 |             return{
 74 | 
 75 |             }
 76 |         },
 77 |         watch:{
 78 | 
 79 |         },
 80 |         methods: {
 81 |             start(e){
 82 |                 this.$emit("startChoose", e.oldIndex)
 83 |             },
 84 |             handleStart(e,list){
 85 |                 this.selectChange(list[e.oldIndex])
 86 |             },
 87 |             handleSelectItem(item){
 88 |                 this.$emit("choose", item)
 89 |             },
 90 |             selectChange(item){
 91 |                 this.$emit("selectChange", item)
 92 |             },
 93 |             addItem(e){
 94 |                 //当从左侧拖进来时,将拖进来的数据,克隆一份传给selectItem,保证操作区域的data.list值唯一
 95 |                 const item = JSON.parse(JSON.stringify(this.data.list[e.newIndex]));
 96 |                 delete item.icon;
 97 |                 if(this.noModel.includes(item.type)){
 98 |                     delete item.model
 99 |                 }
100 |                 this.$emit("selectItemChange", item, e.newIndex)
101 |             },
102 |             deleteItem(){
103 |                 this.$emit('deleteItem')
104 |             }
105 | 
106 |         }
107 |     }
108 | </script>
109 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/uploadImg/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-upload
  4 |             :action="action"
  5 |             :list-type="listType"
  6 |             :on-preview="handlePictureCardPreview"
  7 |             :on-remove="handleRemove"
  8 |             :on-success="handleOnSuccess"
  9 |             :before-upload="beforeUpload"
 10 |             :fileList="fileList"
 11 |             :limit="limit"
 12 |             :headers="headers"
 13 |             :data="data"
 14 |             :name="name"
 15 |             :disabled="disabled"
 16 |             ref="upload"
 17 |         >
 18 |             <i class="el-icon-plus"></i>
 19 |         </el-upload>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 |     export default {
 25 |         name: "uploadImg",
 26 |         props:{
 27 |             data: Object,
 28 |             name: {
 29 |                 type: String,
 30 |                 default: "img"
 31 |             },
 32 |             headers: Object,
 33 |             limit: Number,
 34 |             multiple:{
 35 |               type: Boolean
 36 |             },
 37 |             disabled:{
 38 |                 type: Boolean
 39 |             },
 40 |             listType: String,
 41 |             value:{
 42 |                 type: Array,
 43 |                 default:()=>[]
 44 |             },
 45 |             action:{
 46 |                 type: String,
 47 |                 default: "http://cdn.kcz66.com/uploadFile.txt"
 48 |             }
 49 |         },
 50 |         watch:{
 51 |             value:{
 52 |                 handler(newValue){
 53 |                     if(newValue.length === 0){
 54 |                         this.$refs.upload.clearFiles()
 55 |                     }
 56 |                     //监听value,变化时让fileList也变化
 57 |                     this.fileList = newValue;
 58 |                 },
 59 |                 deep:true
 60 |             },
 61 | 
 62 |         },
 63 |         data() {
 64 |             return {
 65 |                 fileList:this.value
 66 |             };
 67 |         },
 68 |         methods: {
 69 |             handleOnSuccess(response, file, fileList){
 70 |                 if (response.code === 0){
 71 |                     this.fileList.push({
 72 |                         name:file.name,
 73 |                         url:response.data.url,
 74 |                         fileId: response.data.fileId,
 75 |                         uid:file.uid
 76 |                     })
 77 |                 }else if (response.code === 1){
 78 |                     this.$message({
 79 |                         showClose: true,
 80 |                         message: `上传${file.name}图片服务器返回code为1`,
 81 |                         type: 'error',
 82 |                     })
 83 |                 }
 84 | 
 85 |                 this.$emit('input', this.fileList);
 86 |                 this.$emit('onSuccess',response, file, fileList)
 87 |             },
 88 |             beforeUpload(file){
 89 |                 this.$emit('beforeUpload', file)
 90 |             },
 91 |             handleRemove(file, fileList) {
 92 |                 this.fileList = [...fileList];
 93 |                 this.$emit('input', this.fileList);
 94 |                 this.$emit('onRemove', file, fileList)
 95 |             },
 96 | 
 97 |             handlePictureCardPreview(file) {
 98 |             }
 99 |         }
100 |     }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/uploadFile/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-upload
  3 |             :action="action"
  4 |             :list-type="listType"
  5 |             :ref="'uploadFile'"
  6 |             :on-preview="handlePictureCardPreview"
  7 |             :on-remove="handleRemove"
  8 |             :on-success="handleOnSuccess"
  9 |             :before-upload="beforeUpload"
 10 |             :fileList="fileList"
 11 |             :limit="limit"
 12 |             :headers="headers"
 13 |             :data="data"
 14 |             :name="name"
 15 |             :disabled="disabled"
 16 |     >
 17 |         <el-button size="small" type="primary">{{ buttonText }}</el-button>
 18 |         <div slot="tip" class="el-upload__tip">{{ warnText }}</div>
 19 |     </el-upload>
 20 | </template>
 21 | 
 22 | <script>
 23 |     export default {
 24 |         name: "uploadFile",
 25 |         props:{
 26 |             warnText: String,
 27 |             buttonText: String,
 28 |             data: Object,
 29 |             name: {
 30 |                 type: String,
 31 |                 default: "file"
 32 |             },
 33 |             headers: Object,
 34 |             limit: Number,
 35 |             multiple:{
 36 |                 type: Boolean
 37 |             },
 38 |             disabled:{
 39 |                 type: Boolean
 40 |             },
 41 |             listType: String,
 42 |             value:{
 43 |                 type: Array,
 44 |                 default:()=>[]
 45 |             },
 46 |             action:{
 47 |                 type: String,
 48 |                 default: "http://cdn.kcz66.com/uploadFile.txt"
 49 |             }
 50 |         },
 51 |         watch:{
 52 |             value:{
 53 |                 handler(newValue){
 54 |                     if(newValue.length === 0){
 55 |                         this.$refs.uploadFile.clearFiles()
 56 |                     }
 57 |                     //监听value,变化时让fileList也变化
 58 |                     this.fileList = newValue;
 59 |                 },
 60 |                 deep:true
 61 |             },
 62 | 
 63 |         },
 64 |         data() {
 65 |             return {
 66 |                 fileList:[]
 67 |             };
 68 |         },
 69 |         methods: {
 70 |             handleOnSuccess(response, file, fileList){
 71 |                 if (response.code === 0){
 72 |                     this.fileList.push({
 73 |                         name:file.name,
 74 |                         url:response.data.url,
 75 |                         fileId: response.data.fileId,
 76 |                         uid:file.uid
 77 |                     })
 78 |                 }else if (response.code === 1){
 79 |                     this.$message({
 80 |                         showClose: true,
 81 |                         message: `上传${file.name}文件服务器返回code为1`,
 82 |                         type: 'error',
 83 |                     })
 84 |                 }
 85 | 
 86 |                 this.$emit('input', this.fileList);
 87 |                 this.$emit('onSuccess',response, file, fileList)
 88 |             },
 89 |             beforeUpload(file){
 90 |                 this.$emit('beforeUpload', file)
 91 |             },
 92 |             handleRemove(file, fileList) {
 93 |                 this.fileList = [...fileList];
 94 |                 this.$emit('input', this.fileList);
 95 |                 this.$emit('onRemove', file, fileList)
 96 |             },
 97 | 
 98 |             handlePictureCardPreview(file) {
 99 |             }
100 |         }
101 |     }
102 | </script>
103 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/timeOrDateConfig.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |       <el-divider/>
  4 |       <el-form-item label="时间模式"  >
  5 |         <el-radio-group v-model="value.options.isChooseTimes"  >
  6 |           <el-radio-button label="1" >时间点选择</el-radio-button>
  7 |           <el-radio-button label="2" >区间段选择</el-radio-button>
  8 |         </el-radio-group>
  9 |       </el-form-item>
 10 |       <el-form-item label="默认值" v-if="value.options.isChooseTimes==='2'" >
 11 |         <el-date-picker
 12 |           v-if="value.type === 'date'"
 13 |           style="width: 280px"
 14 |           v-model="value.options.rangeDefaultValue"
 15 |           :type="'daterange'"
 16 |           :range-separator="value.options.rangeSeparator"
 17 |           :start-placeholder="value.options.startPlaceholder"
 18 |           :end-placeholder="value.options.endPlaceholder"
 19 |         >
 20 |         </el-date-picker>
 21 |         <el-time-picker
 22 |           v-if="value.type === 'time'"
 23 |           style="width: 280px"
 24 |           :is-range="value.options.isChooseTimes==='2'"
 25 |           v-model="value.options.defaultValue"
 26 |           :range-separator="value.options.rangeSeparator"
 27 |           :start-placeholder="value.options.startPlaceholder"
 28 |           :end-placeholder="value.options.endPlaceholder"
 29 |           :placeholder="value.options.isChooseTimes==='2'?'':value.options.placeholder"
 30 |           :disabled="value.options.disabled"
 31 |         />
 32 |         <el-form-item label="选择器中间文字"  >
 33 |           <el-input
 34 |             v-model="value.options.rangeSeparator"
 35 |             placeholder="选择器中间文字"
 36 |             maxlength="1"
 37 |           />
 38 |         </el-form-item>
 39 |         <el-form-item label="选择器结尾文字"  >
 40 |           <el-input
 41 |             v-model="value.options.endPlaceholder"
 42 |             placeholder="选择器结尾文字"
 43 |             maxlength="4"
 44 |           />
 45 |         </el-form-item>
 46 |         <el-form-item label="选择器开始文字"  >
 47 |           <el-input
 48 |             v-model="value.options.startPlaceholder"
 49 |             placeholder="选择器开始文字"
 50 |             maxlength="4"
 51 |           />
 52 |         </el-form-item>
 53 |       </el-form-item>
 54 |       <el-form-item label="默认值" v-if="value.options.isChooseTimes==='1'" >
 55 |         <el-date-picker
 56 |           v-if="value.type === 'date'"
 57 |           v-model="value.options.defaultValue"
 58 |           type="date"
 59 |           :placeholder="value.options.placeholder"
 60 |           :format="value.options.format"
 61 |           :value-format="value.options.valueFormat"
 62 |         />
 63 |         <el-time-picker
 64 |          v-if="value.type === 'time'"
 65 |          :is-range="value.options.isChooseTimes==='2'"
 66 |          v-model="value.options.defaultValue"
 67 |          :range-separator="value.options.rangeSeparator"
 68 |          :start-placeholder="value.options.startPlaceholder"
 69 |          :end-placeholder="value.options.endPlaceholder"
 70 |          :placeholder="value.options.isChooseTimes==='2'?'':value.options.placeholder"
 71 |          :disabled="value.options.disabled"
 72 |         />
 73 |         <el-form-item label="提示文字"  >
 74 |           <el-input
 75 |             v-model="value.options.placeholder"
 76 |             placeholder="请输入"
 77 |           />
 78 |         </el-form-item>
 79 |         <el-form-item label="展示格式"  >
 80 |           <el-input
 81 |             v-model="value.options.format"
 82 |             placeholder="请输入"
 83 |           />
 84 |         </el-form-item>
 85 |       </el-form-item>
 86 |     </div>
 87 | </template>
 88 | 
 89 | <script>
 90 |     export default {
 91 |         name: "timeOrDateConfig",
 92 |         props:{
 93 |             value:{
 94 |                 type:Object,
 95 |                 required:true
 96 |             }
 97 |         },
 98 | 
 99 |     }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/contentFormTemplate/topButton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content-top-button" >
  3 |     <el-tooltip class="item" effect="dark" content="保存" placement="top-start">
  4 |       <el-button icon="el-icon-document-checked" circle size="mini"  @click="save"/>
  5 |     </el-tooltip>
  6 |     <el-tooltip class="item" effect="dark" content="预览" placement="top-start">
  7 |       <el-button icon="el-icon-view" circle size="mini" @click="viewFrom"/>
  8 |     </el-tooltip>
  9 |     <el-dialog title="表单样式如下" v-if="formViewVisible" :visible.sync="formViewVisible" :top="'10vh'">
 10 |       <TFormBuild
 11 |         :options="data"
 12 |         :dynamicData="dynamicData"
 13 |       />
 14 |     </el-dialog>
 15 | <!--    导入Json-->
 16 |     <el-tooltip class="item" effect="dark" content="导入" placement="top-start">
 17 |       <el-button icon="el-icon-upload2" circle size="mini" @click="handleImportJson"/>
 18 |     </el-tooltip>
 19 |     <el-dialog title="导入Json(请注意数据格式)" v-if="importJsonView" :visible.sync="importJsonView" :top="'10vh'">
 20 |       <ImportJson
 21 |         :importJson="importJson"
 22 |       />
 23 |       <span slot="footer" class="dialog-footer">
 24 |         <el-button @click="importJsonView = false">取 消</el-button>
 25 |         <el-button type="primary" @click="handleEmitImportJson">确 定</el-button>
 26 |       </span>
 27 |     </el-dialog>
 28 | <!--    导入Json结束-->
 29 |     <el-tooltip class="item" effect="dark" content="生成Json" placement="top-start">
 30 |       <el-button icon="el-icon-tickets" circle size="mini" @click="jsonView"/>
 31 |     </el-tooltip>
 32 |     <el-dialog title="Json数据如下所示" v-if="jsonViewVisible" :visible.sync="jsonViewVisible" :top="'10vh'">
 33 |       <CodemirrorVue
 34 |         :json="JSON.stringify(data, null, '\t')"
 35 |       />
 36 |     </el-dialog>
 37 |     <el-tooltip class="item" effect="dark" content="清空" placement="top-start">
 38 |       <el-button icon="el-icon-delete" circle size="mini" @click="deleteAll"/>
 39 |     </el-tooltip>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 |     import ImportJson from "./importJson"
 45 |     import CodemirrorVue from "../components/codemirrorVue";
 46 |     import TFormBuild from "../components/tFormBuild"
 47 |     export default {
 48 |         name: "topButton",
 49 |         props:{
 50 |             data:{
 51 |                 type: Object,
 52 |                 required: true
 53 |             },
 54 |             dynamicData:{
 55 |                 type: Object,
 56 |                 default: ()=>{}
 57 |             }
 58 |         },
 59 |         components:{CodemirrorVue, TFormBuild, ImportJson},
 60 |         data(){
 61 |             return{
 62 |                 jsonViewVisible: false,
 63 |                 formViewVisible: false,
 64 |                 importJsonView:false,
 65 |                 importJson:{
 66 |                     //用对象实现一个父子组件的通信策略
 67 |                     json:`{
 68 |                       "config": {
 69 |                       "labelPosition": "top",
 70 |                       "labelWidth": 15,
 71 |                       "customWidth": ""
 72 |                       },
 73 |                       "list": []
 74 |                       }`
 75 |                 }
 76 |             }
 77 |         },
 78 |         methods:{
 79 |             save(){
 80 |                 this.$emit('save')
 81 |             },
 82 |             deleteAll(){
 83 |                 this.data.list=[];
 84 |             },
 85 |             viewFrom(){
 86 |                 this.formViewVisible = true
 87 |             },
 88 |             jsonView(){
 89 |                 this.jsonViewVisible = true
 90 |             },
 91 |             handleImportJson(){
 92 |                 this.importJsonView = true
 93 |             },
 94 |             handleEmitImportJson(){
 95 |                 this.$emit('importJson', this.importJson.json);
 96 |                 this.importJsonView = false
 97 |             }
 98 |         }
 99 |     }
100 | </script>
101 | 
102 | <style scoped>
103 | 
104 | </style>
105 | 


--------------------------------------------------------------------------------
/object/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | //处理兼容
  3 | import "@babel/polyfill";
  4 | //导入element
  5 | import "./eleComponents/index.js";
  6 | //导入FormDesignTCD样式
  7 | import 'codemirror/mode/javascript/javascript';
  8 | import 'codemirror/mode/vue/vue';
  9 | import "../styles/tcd-form-design.less";
 10 | import "../styles/T-Form-build.less";
 11 | import FormDesignTCD from "./formDesignTCD"
 12 | import FormBuildTCD from "./formBuildTCD"
 13 | 
 14 | import {
 15 |     baseList,
 16 |     layoutList
 17 | } from "./formDesignTCD/baseConfig"
 18 | 
 19 | let components = [FormDesignTCD, FormBuildTCD];
 20 | 
 21 | let install = function (Vue) {
 22 |     //检查是否已经注册过FormDesignTCD
 23 |     if (install.installed)return;
 24 |     install.installed = true;
 25 | 
 26 |     components.map(component=>{
 27 |         Vue.component(component.name, component)
 28 |     })
 29 | 
 30 | };
 31 | //当插件引入时,会自动注册组件,避免一些用户疏忽导致组件未注册
 32 | if (typeof window !== "undefined" && window.Vue) {
 33 |     install(window.Vue);
 34 | }
 35 | 
 36 | function setDesignConfig(config) {
 37 |     //全局前置函数配置formDesignTCD设计器
 38 |     if (Object.prototype.toString.call(config)!=="[object Object]"){
 39 |         throw "[formDesignTCD warn] Function setDesignConfig argument is not object"
 40 |     }
 41 |     baseList.forEach((item)=>{
 42 |         if(config[item.type]){
 43 |             item.options = {
 44 |                 ...item.options,
 45 |                 ...config[item.type]
 46 |             }
 47 |         }
 48 |     });
 49 | }
 50 | 
 51 | function serBuildConfig(buildArray, config, model = undefined) {
 52 |     //配置formBuildTCD解析器,配置不同表单
 53 |     if (Object.prototype.toString.call(config)!=="[object Object]"&&Object.prototype.toString.call(buildArray)!=="[object Array]"){
 54 |         throw "[formDesignTCD warn] Function setBuildConfig arguments type error"
 55 |     }
 56 |     if (model){
 57 |         //如果传入model则只修改对应model字段的控件,否则所有类型的控件都会被修改
 58 |         buildArray.forEach((item)=>{
 59 |             if(item.type === "card"){
 60 |                 serBuildConfig(item.list, config, model)
 61 |             }else if(item.type === "grid"){
 62 |                 item.columns.forEach((column)=>{
 63 |                     serBuildConfig(column.list, config, model)
 64 |                 })
 65 |             }else if (item.type === "table"){
 66 |                 item.trs.forEach((tr)=>{
 67 |                     tr.tds.forEach((td)=>{
 68 |                         serBuildConfig(td.list, config, model)
 69 |                     })
 70 |                 })
 71 |             }else if (item.type === "childTable"){
 72 |                 serBuildConfig(item.list, config, model)
 73 |             }else {
 74 |                 if(config[item.type]&&item.model === model){
 75 |                     item.options = {
 76 |                         ...item.options,
 77 |                         ...config[item.type]
 78 |                     }
 79 |                 }
 80 |             }
 81 |         })
 82 |     }else {
 83 |         buildArray.forEach((item)=>{
 84 |             if(item.type === "card"){
 85 |                 serBuildConfig(item.list, config, model)
 86 |             }else if(item.type === "grid"){
 87 |                 item.columns.forEach((column)=>{
 88 |                     serBuildConfig(column.list, config, model)
 89 |                 })
 90 |             }else if (item.type === "table"){
 91 |                 item.trs.forEach((tr)=>{
 92 |                     tr.tds.forEach((td)=>{
 93 |                         serBuildConfig(td.list, config, model)
 94 |                     })
 95 |                 })
 96 |             }else if (item.type === "childTable"){
 97 |                 serBuildConfig(item.list, config, model)
 98 |             }else {
 99 |                 if(config[item.type]){
100 |                     item.options = {
101 |                         ...item.options,
102 |                         ...config[item.type]
103 |                     }
104 |                 }
105 |             }
106 |         });
107 |     }
108 | }
109 | 
110 | //可以导入FormDesignTCD提供的单个组件,如果在项目中只需要使用FormDesignTCD的单个组件
111 | export {
112 |     FormDesignTCD,
113 |     FormBuildTCD,
114 |     setDesignConfig,
115 |     serBuildConfig
116 | }
117 | 
118 | export default {
119 |     install,
120 |     setDesignConfig,
121 |     serBuildConfig
122 | }
123 | 
124 | 
125 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/tFormBuild/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |       <div style="width: 100%; max-height: 600px; overflow-y: auto; overflow-x: hidden">
  4 |         <Codemirror
  5 |           v-if="formDataJsonView"
  6 |           :json="JSON.stringify(formData, null, '\t')"
  7 |         />
  8 |         <el-form
  9 |           v-else
 10 |           :model="formData"
 11 |           ref="buildForm"
 12 |           :label-position="formOptions.config.labelPosition"
 13 |           class="finalForm"
 14 |           :rules="rules"
 15 |         >
 16 |           <FinalForm
 17 |             v-for="(item, i) in formOptions.list"
 18 |             :item="item"
 19 |             :layout="formOptions.config"
 20 |             :key="i"
 21 |             :formData="formData"
 22 |             :dynamicData="dynamicData"
 23 |             :childTableColumns="childTableColumns"
 24 |             @onSuccess="(response, file, fileList)=>{$emit('onSuccess',response, file, fileList)}"
 25 |           />
 26 |         </el-form>
 27 |       </div>
 28 |       <el-button type="primary" @click="handleJsonView" style="margin-top: 10px">
 29 |         {{formDataJsonView?'展示表单':'展示数据'}}
 30 |       </el-button>
 31 |       <el-button v-if="!formDataJsonView" type="primary" @click="handleSubmit('buildForm')" style="margin-top: 10px">
 32 |         提交模拟
 33 |       </el-button>
 34 |     </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |   import FinalForm from "../../../formBuildTCD/buildFormNode"
 39 |   import Codemirror from "../codemirrorVue"
 40 |   import "../../../../styles/T-Form-build.less"
 41 |     export default {
 42 |         name: "index",
 43 |         components:{FinalForm, Codemirror},
 44 |         props:{
 45 |             options:{
 46 |                 type:Object,
 47 |                 required: true
 48 |             },
 49 |             defaultValue:{
 50 |                 type: Object,
 51 |                 default: ()=>{}
 52 |             },
 53 |             dynamicData:{
 54 |                 type: Object,
 55 |                 default: ()=>{}
 56 |             }
 57 |         },
 58 |         data(){
 59 |             return{
 60 |                 formData:{},
 61 |                 formOptions: JSON.parse(JSON.stringify(this.options)),
 62 |                 formDataJsonView: false,
 63 |                 childTableColumns:[],
 64 |                 rules: {}
 65 |             }
 66 |         },
 67 |         methods:{
 68 |             handleSubmit(formName){
 69 |                     if (!this.formDataJsonView){
 70 |                         this.$refs[formName].validate((valid) => {
 71 |                             if (valid) {
 72 |                                 this.$message({
 73 |                                     showClose: true,
 74 |                                     message: `模拟提交成功`,
 75 |                                     type: 'success',
 76 |                                 })
 77 |                             } else {
 78 |                                 return false;
 79 |                             }
 80 |                         })
 81 |                     }
 82 |             },
 83 |             handleJsonView(formName){
 84 |                 this.formDataJsonView = !this.formDataJsonView;
 85 |             }
 86 |         },
 87 |         created() {
 88 |             let duplicate = [];
 89 |             //根据模板formOptions映射出formData给予form组件进行数据联动
 90 |             const mapFormData = (formData, array)=>{
 91 |                 //查重model
 92 |                 const duplicating =(duplicate, control)=>{
 93 |                    if(duplicate.includes(control.model)){
 94 |                        this.$message({
 95 |                            showClose: true,
 96 |                            message: `${control.key}控件数据字段重复(会导致字段重复的控件value值联动)`,
 97 |                            type: 'error',
 98 |                            duration:0
 99 |                        })
100 |                    }else {
101 |                        duplicate.push(control.model)
102 |                    }
103 |                 };
104 |                 array.forEach((item,i) =>{
105 |                    if(item.model){
106 |                        if (item.type ==="number"||item.type ==="slider"){
107 |                            duplicating(duplicate, item);
108 |                            formData[item.model] = item.options.numberDefaultValue
109 |                        }else if (item.type === "checkbox"){
110 |                            duplicating(duplicate, item);
111 |                            formData[item.model] = item.options.checkboxDefaultValue
112 |                        }else if (item.type === "date"){
113 |                            if (item.options.isChooseTimes === "1"){
114 |                                duplicating(duplicate, item);
115 |                                formData[item.model] = item.options.defaultValue
116 |                            }else {
117 |                                duplicating(duplicate, item);
118 |                                formData[item.model] = item.options.rangeDefaultValue
119 |                            }
120 |                        }else if (item.type === "uploadImg"||item.type === "uploadFile"){
121 |                            duplicating(duplicate, item);
122 |                            formData[item.model] = item.options.fileList
123 |                        }else if (item.type === "switch"){
124 |                            duplicating(duplicate, item);
125 |                            formData[item.model] = item.options.switchValue
126 |                        }else if (item.type === "select"||item.type === "cascader"){
127 |                          duplicating(duplicate, item);
128 |                          formData[item.model] = item.options.multiple?item.options.multipleDefaultValue:item.options.defaultValue
129 |                        }else if (item.type === "childTable"){
130 |                            duplicating(duplicate, item);
131 |                            formData[item.model] = [];
132 |                            //映射出childTable增加一行的数据格式,保存到一个数组,并且添加model值以便遍历查取
133 |                            let childTableColumns = mapFormData({}, item.list);
134 |                            let obj = JSON.parse(JSON.stringify(childTableColumns));
135 |                            formData[item.model].push(obj);
136 |                            this.childTableColumns.push({
137 |                                ...obj,
138 |                                model:item.model
139 |                            })
140 |                        }else {
141 |                            duplicating(duplicate, item);
142 |                            formData[item.model] = item.options.defaultValue
143 |                        }
144 |                    }else if (item.type === "grid"){
145 |                        //处理格栅布局
146 |                        item.columns.forEach((item,i) =>{
147 |                            mapFormData(formData, item.list)
148 |                        })
149 |                    }else if (item.type === "card"){
150 |                        //处理卡片布局
151 |                        mapFormData(formData, item.list)
152 |                    }else if (item.type === "table"){
153 |                      //处理卡片布局
154 |                      item.trs.forEach((tr)=>{
155 |                        tr.tds.forEach((td)=>{
156 |                          mapFormData(formData, td.list)
157 |                        })
158 |                      })
159 |                    }
160 |                 });
161 |                 return formData
162 |             };
163 |             this.formData = mapFormData({},this.formOptions.list);
164 |             const ruleFn = (pattern, message) =>{
165 |                 //柯利化返回验证函数
166 |                 return (rule, value, callback) => {
167 |                     let reg = pattern?eval(pattern):"";
168 |                     if (reg&&!reg.test(value)) {
169 |                         callback(new Error(message))
170 |                     } else {
171 |                         callback()
172 |                     }
173 |                 };
174 |             };
175 |             const mapRules = (rules, array)=>{
176 |                 //映射出element需要的验证rules
177 |                 array.forEach((child, i)=>{
178 |                     if (child.model){
179 |                         if (child.type === "childTable"){
180 |                             return
181 |                         }
182 |                         //把rule深克隆
183 |                         let rule = JSON.parse(JSON.stringify(child.rules));
184 |                         rules[child.model] = rule.map((item,i)=>{
185 |                             if(i === 0){
186 |                                 return item
187 |                             }else {
188 |                                 return {
189 |                                     validator: ruleFn(item.pattern, item.message),
190 |                                     trigger: 'blur'
191 |                                 }
192 |                             }
193 |                         })
194 |                     }else if (child.type === "grid"){
195 |                         child.columns.forEach((item, i)=>{
196 |                             mapRules(rules, item.list)
197 |                         })
198 |                     }else if (child.type === "card"){
199 |                         mapRules(rules, child.list)
200 |                     }else if (child.type === "table"){
201 |                       //处理卡片布局
202 |                       child.trs.forEach((tr)=>{
203 |                         tr.tds.forEach((td)=>{
204 |                           mapRules(rules, td.list)
205 |                         })
206 |                       })
207 |                     }
208 |                 });
209 |                 return rules
210 |             };
211 |             this.rules = mapRules({}, this.formOptions.list)
212 |         },
213 |     }
214 | </script>
215 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/fromNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="width: 100%">
  3 |     <el-form-item
  4 |       :label="item.options.hidden||item.type==='tMKeditor'||isLabel?'':item.label"
  5 |       :required="item.rules?item.rules[0].required:false"
  6 |       :label-width="item.type==='tMKeditor'||isLabel?'0px':layout.labelWidth+'%'"
  7 |       :style="item.type==='tMKeditor'?'overflow:hidden':''"
  8 |     >
  9 | 
 10 |       <el-input
 11 |         v-if="item.type === 'input'"
 12 |         :placeholder="item.options.placeholder"
 13 |         :style="'width:'+item.options.width+'%'"
 14 |         v-model="item.options.defaultValue"
 15 |         :type="item.options.hidden?'hidden':'input'"
 16 |         :disabled="item.options.disabled"
 17 |         v-bind="{
 18 |               clearable:item.options.clearable,
 19 |             }"
 20 |       />
 21 |       <el-input
 22 |         v-if="item.type === 'text'"
 23 |         :placeholder="item.options.placeholder"
 24 |         :style="'width:'+item.options.width+'%'"
 25 |         v-model="item.options.defaultValue"
 26 |         :type="item.options.hidden?'hidden':'textarea'"
 27 |         :rows="item.options.height"
 28 |         :disabled="item.options.disabled"
 29 |         v-bind="{
 30 |               clearable:item.options.clearable,
 31 |             }"
 32 |       />
 33 |       <el-input-number
 34 |         v-if="item.type === 'number'"
 35 |         v-model="item.options.numberDefaultValue"
 36 |         :step="item.options.step"
 37 |         :style="'width:'+item.options.width+'%'"
 38 |         :min="item.options.min"
 39 |         :max="item.options.max"
 40 |         :precision="item.options.precision"
 41 |         :disabled="item.options.disabled"
 42 |       />
 43 |       <el-select
 44 |         v-if="item.type === 'select'"
 45 |         v-model="selectDefaultValue"
 46 |         :multiple="item.options.multiple"
 47 |         :placeholder="item.options.placeholder"
 48 |         :style="'width:'+item.options.width+'%'"
 49 |         :disabled="item.options.disabled"
 50 |         :clearable="item.options.clearable"
 51 |       >
 52 |         <el-option
 53 |           v-for="(items,index) in item.options.options"
 54 |           :key="index"
 55 |           :label="items.label"
 56 |           :value="items.value">
 57 |         </el-option>
 58 |       </el-select>
 59 |       <el-cascader
 60 |         v-if="item.type === 'cascader'"
 61 |         :options="item.options.options"
 62 |         v-model="selectDefaultValue"
 63 |         :props="{
 64 |           multiple:item.options.multiple
 65 |         }"
 66 |         :placeholder="item.options.placeholder"
 67 |         :style="'width:'+item.options.width+'%'"
 68 |         collapse-tags
 69 |         :disabled="item.options.disabled"
 70 |         :clearable="item.options.clearable"
 71 |       />
 72 |       <el-checkbox-group
 73 |         v-if="item.type === 'checkbox'"
 74 |         v-model="item.options.checkboxDefaultValue"
 75 |         :min="item.options.chooseMin"
 76 |         :max="item.options.chooseMax"
 77 |         :disabled="item.options.disabled"
 78 |       >
 79 |         <el-checkbox
 80 |                 v-for="(items, i) in item.options.options"
 81 |                 :label="items.value"
 82 |                 :key="i">{{items.label}}</el-checkbox>
 83 |       </el-checkbox-group>
 84 |       <el-radio-group
 85 |         v-if="item.type === 'radio'"
 86 |         v-model="item.options.defaultValue"
 87 |         :disabled="item.options.disabled"
 88 |       >
 89 |         <el-radio
 90 |           v-for="(items, index) in item.options.options"
 91 |           :label="items.value"
 92 |           :key="index"
 93 |         >
 94 |           {{items.label}}
 95 |         </el-radio>
 96 |       </el-radio-group>
 97 |       <el-date-picker
 98 |         v-if="item.type === 'date'&&item.options.isChooseTimes==='2'"
 99 |         v-model="item.options.rangeDefaultValue"
100 |         :style="'width:'+item.options.width+'%'"
101 |         :type="item.options.isChooseTimes?'daterange':'date'"
102 |         :range-separator="item.options.rangeSeparator"
103 |         :start-placeholder="item.options.startPlaceholder"
104 |         :end-placeholder="item.options.endPlaceholder"
105 |         :disabled="item.options.disabled"
106 |         :placeholder="item.options.isChooseTimes==='2'?'':item.options.placeholder"
107 |         />
108 |       <el-date-picker
109 |         v-if="item.type === 'date'&&item.options.isChooseTimes==='1'"
110 |         v-model="item.options.defaultValue"
111 |         :style="'width:'+item.options.width+'%'"
112 |         type="date"
113 |         :placeholder="item.options.placeholder"
114 |         :format="item.options.format"
115 |         :value-format="item.options.valueFormat"
116 |         :disabled="item.options.disabled"
117 |       />
118 |       <el-time-picker
119 |         v-if="item.type === 'time'"
120 |         :style="'width:'+item.options.width+'%'"
121 |         :is-range="item.options.isChooseTimes==='2'"
122 |         v-model="item.options.defaultValue"
123 |         :range-separator="item.options.rangeSeparator"
124 |         :start-placeholder="item.options.startPlaceholder"
125 |         :end-placeholder="item.options.endPlaceholder"
126 |         :placeholder="item.options.isChooseTimes==='2'?'':item.options.placeholder"
127 |         :disabled="item.options.disabled"
128 |       />
129 |       <el-upload
130 |         v-if="item.type === 'uploadFile'"
131 |         :style="'width:'+item.options.width+'%'"
132 |         class="upload-demo"
133 |         :action="item.options.action"
134 |         :limit="item.options.limit"
135 |         disabled
136 |       >
137 |         <el-button size="small" type="primary">{{ item.options.buttonText }}</el-button>
138 |         <div slot="tip" class="el-upload__tip">{{ item.options.warnText }}</div>
139 |       </el-upload>
140 |       <el-upload
141 |         v-if="item.type === 'uploadImg'"
142 |         :action="item.options.action"
143 |         :limit="item.options.limit"
144 |         :list-type="item.options.listType"
145 |         disabled
146 |       >
147 |         <i class="el-icon-plus"></i>
148 |       </el-upload>
149 |       <div
150 |         v-if="item.type === 'super'"
151 |       >
152 |         <a
153 |           :href="'https://'+item.options.url"
154 |           target="_blank"
155 |         >
156 |           {{item.options.defaultValue}}
157 |         </a>
158 |       </div>
159 |       <el-divider
160 |         v-if="item.type === 'divider'"
161 |         content-position="left"
162 |       >
163 |         布局控件
164 |       </el-divider>
165 |   <!--    <TipsWindow-->
166 |   <!--      v-if="item.type === 'tipsWindow'"-->
167 |   <!--    />-->
168 |       <el-dialog :visible.sync="item.options.dialogVisible"  v-if="item.type === 'uploadImg'">
169 |         <img width="100%" :src="item.options.dialogImageUrl" alt="">
170 |       </el-dialog>
171 | <!--      <TMKeditor-->
172 | <!--        v-if="item.type==='tMKeditor'"-->
173 | <!--        ref="KEditor"-->
174 | <!--        :style="`width:${item.options.width}%`"-->
175 | <!--        :record="item"-->
176 | <!--        :disabled="true"-->
177 | <!--      />-->
178 |       <el-switch
179 |         v-if="item.type === 'switch'"
180 |         v-model="item.options.switchValue"
181 |         :active-text="item.options.activeText"
182 |         :inactive-text="item.options.inactiveText"
183 |         :disabled="item.options.disabled"
184 |       />
185 |       <div class="block"
186 |            v-if="item.type === 'slider'"
187 |       >
188 |         <el-slider
189 |           v-model="item.options.numberDefaultValue"
190 |           :disabled="item.options.disabled"
191 |           :show-input="item.options.showInput"
192 |           :step="item.options.step"
193 |         />
194 |       </div>
195 |       <div
196 |         v-if="item.type==='p'"
197 |         :style="'width:'+item.options.width+'%; margin: 0; padding: 0; line-height: 20px; '"
198 |         v-text="item.label"
199 |       />
200 |       <el-button
201 |         v-if="item.type === 'button'"
202 |         :type="item.options.buttonType"
203 |         :disabled="item.options.disabled"
204 |         :style="'margin-left:'+ item.options.width + '%'"
205 |       >{{item.label}}</el-button>
206 |     </el-form-item>
207 |     <p id="control-key">{{item.key}}</p>
208 |   </div>
209 | </template>
210 | 
211 | <script>
212 |   import TMKeditor from './tMkeditor'
213 |     export default {
214 |         name: "formNode",
215 |         // components:{TMKeditor, },
216 |         props:{
217 |             typeList:{
218 |                 type: Array,
219 |                 default: ()=>[
220 |                     "button",
221 |                     "divider",
222 |                     "card",
223 |                     "grid",
224 |                     "table",
225 |                     "alert",
226 |                     "html",
227 |                     "p",
228 |                     "divider"
229 |                 ]
230 |             },
231 |             layout:{
232 |                 type: Object,
233 |                 required: true
234 |             },
235 |             item:{
236 |                 type: Object,
237 |                 required: true
238 |             }
239 |         },
240 |         computed:{
241 |             isLabel(){
242 |                 //判断是否是需要label的Node
243 |                 return this.typeList.includes(this.item.type);
244 |             },
245 |             selectDefaultValue: {
246 |               get() {
247 |                 return this.item.options.multiple?this.item.options.multipleDefaultValue:this.item.options.defaultValue
248 |               },
249 |               set(val) {
250 |                 this.item.options.multiple?this.item.options.multipleDefaultValue=val:this.item.options.defaultValue=val
251 |               }
252 |             }
253 |         },
254 |         data(){
255 |             return {
256 |             };
257 |         },
258 |     }
259 | </script>
260 | 


--------------------------------------------------------------------------------
/object/formBuildTCD/build.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
  4 |       <el-form
  5 |         :model="formData"
  6 |         ref="buildForm"
  7 |         :label-position="formOptions.config.labelPosition"
  8 |         class="finalForm"
  9 |         :rules="rules"
 10 |       >
 11 |         <FinalForm
 12 |           ref="a"
 13 |           v-for="(item, i) in formOptions.list"
 14 |           :item="item"
 15 |           :layout="formOptions.config"
 16 |           :key="i"
 17 |           :formData="formData"
 18 |           :dynamicData="dynamicData"
 19 |           :childTableColumns="childTableColumns"
 20 |           @clickFormButton="clickFormButton"
 21 |           @onSuccess="(response, file, fileList, model)=>{$emit('onSuccess',response, file, fileList,model)}"
 22 |           @beforeUpload="(file, model)=>{$emit('beforeUpload', file,model)}"
 23 |         />
 24 |       </el-form>
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 |     import FinalForm from "./buildFormNode"
 31 |     export default {
 32 |         name: "FormBuildTCD",
 33 |         components:{FinalForm},
 34 |         props:{
 35 |             options:{
 36 |                 type:Object,
 37 |                 required: true
 38 |             },
 39 |             defaultValue:{
 40 |                 type: Object,
 41 |                 default: ()=>({})
 42 |             },
 43 |             dynamicData:{
 44 |                 type: Object,
 45 |                 default: ()=>({})
 46 |             }
 47 |         },
 48 |         watch:{
 49 |           defaultValue:{
 50 |             handler(newValue){
 51 |               this.formData = newValue
 52 |             },
 53 |             deep:true
 54 |           },
 55 |           options:{
 56 |             handler(newValue){
 57 |               //当传入数据改变时,formDesignTCD会基于传入数据的克隆副本做一系列改变,formDesignTCD的数据流是单向的,不管传入的是引用类型还是普通类型
 58 |               this.formOptions = JSON.parse(JSON.stringify(newValue));
 59 |               this.formDataMap();
 60 |               this.rulesMap();
 61 |             },
 62 |             immediate: true,
 63 |             deep: true
 64 |           },
 65 |         },
 66 |         data(){
 67 |             return{
 68 |                 formOptions: {},
 69 |                 formDataJsonView: false,
 70 |                 formData:{},
 71 |                 childTableColumns:[],//子表添加一行的数据
 72 |                 clearFormData:{},
 73 |                 rules:{}
 74 |             }
 75 |         },
 76 |         created(){
 77 |           this.formDataMap();
 78 |           this.rulesMap()
 79 |         },
 80 |         methods:{
 81 |             getFormData(){
 82 |               return this.formData
 83 |             },
 84 |             clickFormButton(type){
 85 |                 if(type === "submit"){
 86 |                     this.$refs.buildForm.validate((valid) => {
 87 |                         if (valid) {
 88 |                           this.$emit('buildSubmit',this.formData);
 89 |                         } else {
 90 |                           return false;
 91 |                         }
 92 |                     })
 93 |                 }
 94 |                 if(type === "clear"){
 95 |                   this.$refs.buildForm.resetFields();
 96 |                 }
 97 |             },
 98 |             formDataMap(){
 99 |               if (JSON.stringify(this.defaultValue ) !== "{}"){
100 |                 this.formData = JSON.parse(JSON.stringify(this.defaultValue));
101 |                 return
102 |               }
103 |               let duplicate = [];
104 |               const mapFormData = (formData, array)=>{
105 |                 //查重model
106 |                 const duplicating =(duplicate, control)=>{
107 |                   if(duplicate.includes(control.model)){
108 |                     this.$message({
109 |                       showClose: true,
110 |                       message: `${control.key}控件数据字段重复(会导致字段重复的控件value值联动)`,
111 |                       type: 'error',
112 |                       duration:0
113 |                     })
114 |                   }else {
115 |                     duplicate.push(control.model)
116 |                   }
117 |                 };
118 |                   array.forEach((item) =>{
119 |                     if(item.model){
120 |                       if (item.type ==="number"||item.type ==="slider"){
121 |                         duplicating(duplicate, item);
122 |                         formData[item.model] = item.options.numberDefaultValue
123 |                       }else if (item.type === "uploadImg"){
124 |                         duplicating(duplicate, item);
125 |                         formData[item.model] = item.options.fileList
126 |                       }else if (item.type === "checkbox"){
127 |                         duplicating(duplicate, item);
128 |                         formData[item.model] = item.options.checkboxDefaultValue
129 |                       }else if (item.type === "date"||item.type === "time"){
130 |                         if (item.options.isChooseTimes === "1"){
131 |                           duplicating(duplicate, item);
132 |                           formData[item.model] = item.options.defaultValue
133 |                         }else {
134 |                           duplicating(duplicate, item);
135 |                           formData[item.model] = item.options.rangeDefaultValue
136 |                         }
137 |                       }else if (item.type === "uploadImg"||item.type === "uploadFile"){
138 |                         duplicating(duplicate, item);
139 |                         formData[item.model] = item.options.fileList
140 |                       }else if (item.type === "switch"){
141 |                         duplicating(duplicate, item);
142 |                         formData[item.model] = item.options.switchValue
143 |                       }else if (item.type === "select"||item.type === "cascader"){
144 |                         duplicating(duplicate, item);
145 |                         item.options.multiple?formData[item.model] = item.options.multipleDefaultValue:formData[item.model] = item.options.defaultValue
146 |                       }else if (item.type === "childTable"){
147 |                         duplicating(duplicate, item);
148 |                         formData[item.model] = [];
149 |                         //映射出childTable增加一行的数据格式,保存到一个数组,并且添加model值以便遍历查取
150 |                         let childTableColumns = mapFormData({}, item.list);
151 |                         let obj = JSON.parse(JSON.stringify(childTableColumns));
152 |                         formData[item.model].push(obj);
153 |                         this.childTableColumns.push({
154 |                           ...obj,
155 |                           model:item.model
156 |                         })
157 |                       }else {
158 |                         duplicating(duplicate, item);
159 |                         formData[item.model] = item.options.defaultValue
160 |                       }
161 |                     }else if (item.type === "grid"){
162 |                       //处理格栅布局
163 |                       item.columns.forEach((item,i) =>{
164 |                         mapFormData(formData, item.list)
165 |                       })
166 |                     }else if (item.type === "card"){
167 |                       //处理卡片布局
168 |                       mapFormData(formData, item.list)
169 |                     }else if (item.type === "table"){
170 |                       //处理卡片布局
171 |                       item.trs.forEach((tr)=>{
172 |                         tr.tds.forEach((td)=>{
173 |                           mapFormData(formData, td.list)
174 |                         })
175 |                       })
176 |                     }
177 |                   });
178 |                   return formData
179 |               };
180 |               this.formData = mapFormData({},this.formOptions.list);
181 |             },
182 |             rulesMap(){
183 |               const ruleFn = (pattern, message) =>{
184 |                 //柯利化返回验证函数
185 |                 return (rule, value, callback) => {
186 |                   let reg = pattern?eval(pattern):"";
187 |                   if (reg&&!reg.test(value)) {
188 |                     callback(new Error(message))
189 |                   } else {
190 |                     callback()
191 |                   }
192 |                 };
193 |               };
194 |               const mapRules = (rules, array)=>{
195 |                 //映射出element需要的验证rules
196 |                 array.forEach((child, i)=>{
197 |                   if (child.model){
198 |                     if (child.type === "childTable"){
199 |                       return
200 |                     }
201 |                     //把rule深克隆
202 |                     let rule = JSON.parse(JSON.stringify(child.rules));
203 |                     rules[child.model] = rule.map((item,i)=>{
204 |                       if(i === 0){
205 |                         return item
206 |                       }else {
207 |                         return {
208 |                           validator: ruleFn(item.pattern, item.message),
209 |                           trigger: 'blur'
210 |                         }
211 |                       }
212 |                     })
213 |                   }else if (child.type === "grid"){
214 |                     child.columns.forEach((item, i)=>{
215 |                       mapRules(rules, item.list)
216 |                     })
217 |                   }else if (child.type === "card"){
218 |                     mapRules(rules, child.list)
219 |                   }else if (child.type === "table"){
220 |                     //处理卡片布局
221 |                     child.trs.forEach((tr)=>{
222 |                       tr.tds.forEach((td)=>{
223 |                         mapRules(rules, td.list)
224 |                       })
225 |                     })
226 |                   }
227 |                 });
228 |                 return rules
229 |               };
230 |               this.rules = mapRules({}, this.formOptions.list)
231 |             }
232 |         },
233 |     }
234 | </script>
235 | 


--------------------------------------------------------------------------------
/styles/tcd-form-design.less:
--------------------------------------------------------------------------------
  1 | .CodeMirror{
  2 |   height: 450px !important;
  3 | }
  4 | .el-upload__tip{
  5 |   white-space: normal;
  6 | }
  7 | .el-radio-group{
  8 |   white-space: normal;
  9 | }
 10 | li{
 11 |   list-style: none;
 12 | }
 13 | ::-webkit-scrollbar {
 14 |   /*滚动条整体样式*/
 15 |   width: 6px;
 16 |   /*高宽分别对应横竖滚动条的尺寸*/
 17 |   height               : 6px;
 18 |   scrollbar-arrow-color: red;
 19 | 
 20 | }
 21 | 
 22 | ::-webkit-scrollbar-thumb {
 23 |   /*滚动条里面小方块*/
 24 |   border-radius        : 5px;
 25 |   box-shadow           : inset 0 0 5px rgba(0, 0, 0, 0.2);
 26 |   background           : rgba(0, 0, 0, 0.2);
 27 |   scrollbar-arrow-color: red;
 28 | }
 29 | 
 30 | ::-webkit-scrollbar-track {
 31 |   /*滚动条里面轨道*/
 32 |   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
 33 |   border-radius: 0;
 34 |   background   : rgba(0, 0, 0, 0.1);
 35 | }
 36 | 
 37 |   #T-form-wrap{
 38 |     position: relative;
 39 |     max-width: 100%;
 40 |     height: 100%;
 41 |     min-width: 860px;
 42 |     display: flex;
 43 |     flex-direction: row;
 44 |     min-height: 62vh;
 45 |     background: white;
 46 | 
 47 | 
 48 |     .button-wrap{
 49 |       //左侧待拖入展示控件
 50 |       width: 300px;
 51 |       min-width: 300px;
 52 |       height: 100%;
 53 |       .test{
 54 |         width: 100%;
 55 | 
 56 |         .control-button-title{
 57 |           width: 100%;
 58 |           height: 30px;
 59 |           border-bottom: 3px solid #edeff1;
 60 |           text-align: center;
 61 |           font-size: 14px;
 62 |           line-height: 30px;
 63 |           color: black;
 64 |           font-weight: 600;
 65 |         }
 66 | 
 67 |         .button-wrap-drg{
 68 |           //控件栏拖拽区
 69 |           padding: 0;
 70 |           display: flex;
 71 |           flex-direction: row;
 72 |           flex-wrap: wrap;
 73 |           justify-content: space-around;
 74 | 
 75 |           li{
 76 |             list-style: none;
 77 |             text-align: left;
 78 |             width: 40%;
 79 |             display: inline-block;
 80 |             line-height: 1;
 81 |             white-space: nowrap;
 82 |             cursor: pointer;
 83 |             background: #fff;
 84 |             border: 1px solid #dcdfe6;
 85 |             color: #606266;
 86 |             -webkit-appearance: none;
 87 |             box-sizing: border-box;
 88 |             outline: none;
 89 |             margin: 0 0 6px 0;
 90 |             transition: .1s;
 91 |             font-weight: 500;
 92 |             -moz-user-select: none;
 93 |             -webkit-user-select: none;
 94 |             -ms-user-select: none;
 95 |             padding: 12px 20px 12px 6px;
 96 |             font-size: 14px;
 97 |             border-radius: 4px;
 98 |           }
 99 | 
100 |         }
101 |       }
102 | 
103 | 
104 | 
105 |     }
106 | 
107 |     .T-form-main{
108 |       //中间展示层
109 |       position: relative;
110 |       flex: 1 0 auto;
111 |       border-right: 5px solid #edeff1;
112 |       border-left: 5px solid #edeff1;
113 |       height: 100%;
114 |       min-height: 72vh;
115 | 
116 |       .form-enter-active {
117 |         transition: all .5s;
118 |       }
119 | 
120 |       .form-leave-active {
121 |         transition: all .3s;
122 |       }
123 | 
124 |       .form-enter,
125 |       .form-leave-to /* .list-leave-active for below version 2.1.8 */ {
126 |         opacity  : 0;
127 |         transform: translateX(100%);
128 |       }
129 | 
130 |       .right-template-form{
131 |         //右侧控件属性
132 |         position: absolute;
133 |         width: 300px;
134 |         min-width: 300px;
135 |         top:33px;
136 |         height: calc(100% - 40px);
137 |         right: -305px;
138 |         background: white;
139 |         overflow-y: auto;
140 |         z-index: 999;
141 | 
142 |         .el-divider--horizontal{
143 |           margin: 12px 0;
144 |         }
145 |         .shrink-button{
146 |           position: absolute;
147 |           padding: 8px;
148 |           right: 0;
149 |           top: 0;
150 |           z-index: 99999999999999;
151 |         }
152 |         .control-config-form{
153 |           width: 92%;
154 |           margin: 15px auto 0;
155 | 
156 | 
157 |         }
158 |       }
159 | 
160 |       .content-top-button{
161 |         padding: 6px;
162 |         border-bottom: 5px solid #edeff1;
163 |         button{
164 |           margin: 0 5px;
165 |         }
166 |       }
167 | 
168 |       .control-center-wrap{
169 |         height: calc(100% - 65px);
170 | 
171 |         form{
172 |           height: 100%;
173 |           .wrapper{
174 |             width: 100%;
175 |             height: 100%;
176 |             overflow: auto ;
177 |             .moving{
178 |               position: relative;
179 |               //控件选择栏移动样式
180 |               &.moving::before{
181 |                 content: '';
182 |                 position: absolute;
183 |                 top: 0;
184 |                 width: 100%;
185 |                 height: 5px;
186 |                 background: #409eff;
187 |                 display: block;
188 |               }
189 |             }
190 |             .list-main{
191 |               height: 100%;
192 |               min-height: 62vh;
193 |               overflow-y: auto;
194 |               .list-enter-active {
195 |                 transition: all .5s;
196 |               }
197 | 
198 |               .list-leave-active {
199 |                 transition: all .3s;
200 |               }
201 | 
202 |               .list-enter,
203 |               .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
204 |                 opacity  : 0;
205 |                 transform: translateX(-100px);
206 |               }
207 |               .list-enter {
208 |                 height: 30px;
209 |               }
210 |               .item-wrap:hover{
211 |                 background: rgba(183,221,255,0.5);
212 |               }
213 |               .item-wrap{
214 |                 position: relative;
215 |                 padding: 16px 0;
216 |                 &:hover{
217 |                   background: rgba(183,221,255,0.5);
218 | 
219 |                 }
220 |                 &::before{
221 |                   content: '';
222 |                   display: block;
223 |                   position: absolute;
224 |                   top: 1px;
225 |                   height: 5px;
226 |                   right: 0;
227 |                   width: 1%;
228 |                   transition: width 0.5s;
229 |                 }
230 | 
231 |                 &.active{
232 |                   background: rgba(183,221,255,0.5);
233 |                   &::before{
234 |                     width: 100%;
235 |                     background: #409eff;
236 |                   }
237 |                 }
238 |                 .delete{
239 |                   display: none;
240 |                 }
241 |                 .delete-active{
242 |                   position: absolute;
243 |                   top:4px;
244 |                   right: 0;
245 |                   padding: 7px 9px;
246 |                 }
247 |                 #control-key{
248 |                   position: absolute;
249 |                   padding: 0;
250 |                   margin: 0;
251 |                   height: 14px;
252 |                   font-size: 12px;
253 |                   color: black;
254 |                   line-height: 14px;
255 |                   right: 3px;
256 |                 }
257 |                 .grid-box{
258 |                   padding: 5px;
259 |                   background: #fadce6;
260 |                   .grid-box-dra{
261 |                     min-height: 60px;
262 |                   }
263 |                   .grid-item{
264 |                     min-height: 60px;
265 |                     border: 1px #ccc dashed;
266 |                   }
267 |                 }
268 |                 .table-rightClick-wrap{
269 |                   padding: 0;
270 |                   margin: 0;
271 |                   position: fixed;
272 |                   top: 0;
273 |                   left: 0;
274 |                   background: #ffffff;
275 |                   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
276 |                   z-index: 99999999999;
277 |                   &>li{
278 |                     padding: 8px;
279 |                   }
280 |                   &>li:hover{
281 |                     background: #d6d8df;
282 |                   }
283 |                 }
284 |                 .table-layout{
285 |                   //表格布局
286 |                   background: #fadce6;
287 |                   width: calc(100% - 10px);
288 |                   td{
289 |                     vertical-align: top;
290 |                   }
291 |                   .table-dra{
292 |                     min-height: 80px;
293 |                     .table-item{
294 |                       min-height: 80px;
295 |                       min-width: 40px;
296 |                     }
297 |                   }
298 |                 }
299 |                 .childTable-layout{
300 |                   //子表布局
301 |                   background:#fadce6;
302 |                   .el-card__body{
303 |                     padding: 6px;
304 |                     .childTable-card-dra {
305 |                       min-height: 60px;
306 |                       width     : 100%;
307 |                       border    : 1px #ccc dashed;
308 |                       background: #fff;
309 | 
310 |                       .childTable-main {
311 |                         min-height : 60px;
312 |                         position   : relative;
313 |                         border     : 1px #ccc dashed;
314 |                         overflow-x : auto;
315 |                         overflow-y : auto;
316 |                         white-space: nowrap;
317 | 
318 |                         .gridMoving {
319 |                           // 拖放移动中
320 |                           width     : 175px;
321 |                           min-height: 94px;
322 |                           display   : inline-block;
323 |                           &.gridMoving::before{
324 |                             content: '';
325 |                             position: absolute;
326 |                             top: 0;
327 |                             min-width: 185px;
328 |                             height: 5px;
329 |                             background: #409eff;
330 |                             display: block;
331 |                           }
332 |                         }
333 |                         >div {
334 |                           min-width     : 185px;
335 |                           display       : inline-block;
336 |                           vertical-align: top;
337 |                         }
338 |                       }
339 |                     }
340 |                   }
341 |                 }
342 |                 .card-layout{
343 |                   background:#fadce6;
344 | 
345 |                   .grid-card-dra{
346 |                     min-height: 60px;
347 |                   }
348 |                   .card-item{
349 |                     min-height: 60px;
350 |                   }
351 |                 }
352 |                 .el-form-item{
353 |                   width: 86%;
354 |                   margin: auto;
355 |                   white-space: nowrap;
356 | 
357 |                   label{
358 |                     white-space: nowrap;
359 |                   }
360 |                 }
361 |               }
362 |             }
363 |           }
364 |         }
365 | 
366 |       }
367 |     }
368 | 
369 |     .right-form-layout{
370 |       //右侧布局表单
371 |       width: 300px;
372 |       min-width: 300px;
373 |       overflow-y: auto;
374 | 
375 |       .control-props{
376 |         width: 100%;
377 |         height: 30px;
378 |         border-bottom: 3px solid #edeff1;
379 |         text-align: center;
380 |         font-size: 14px;
381 |         line-height: 30px;
382 |         color: black;
383 |         font-weight: 600;
384 | 
385 |       }
386 |       form{
387 |         .el-form-item{
388 |           margin-top: 15px;
389 |           white-space: nowrap;
390 |         }
391 |       }
392 | 
393 |     }
394 |   }
395 | 
396 | 
397 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/baseConfig/index.js:
--------------------------------------------------------------------------------
  1 | export const baseList=[
  2 |   {
  3 |     type: "input",//控件类型
  4 |     icon: "el-icon-edit",//图标
  5 |     label: "输入框",//控件名字
  6 |     options: {
  7 |       label: "输入框",
  8 |       minWidth:10,
  9 |       width: 100, // 宽度
 10 |       defaultValue: "", // 默认值
 11 |       placeholder: "请输入", // 没有输入时，提示文字
 12 |       clearable: false,
 13 |       hidden: false, // 是否隐藏，false显示，true隐藏
 14 |       disabled: false // 是否禁用，false不禁用，true禁用
 15 |     },
 16 |     model: "", // 数据字段
 17 |     key: "",
 18 |     rules: [
 19 |       //验证规则
 20 |       {
 21 |         required: false, // 必须填写
 22 |         message: "必填项",
 23 |         trigger: 'blur'
 24 |       }
 25 |     ]
 26 |   },
 27 |   {
 28 |     type: "text",//控件类型
 29 |     icon: "el-icon-edit-outline",//图标
 30 |     label: "文本域",//控件名字
 31 |     options: {
 32 |       minWidth:10,
 33 |       width: 100, // 宽度
 34 |       height:3,//高度
 35 |       defaultValue: "", // 默认值
 36 |       placeholder: "请输入", // 没有输入时，提示文字
 37 |       clearable: false,
 38 |       hidden: false, // 是否隐藏，false显示，true隐藏
 39 |       disabled: false // 是否禁用，false不禁用，true禁用
 40 |     },
 41 |     model: "", // 数据字段
 42 |     key: "",
 43 |     rules: [
 44 |       //验证规则
 45 |       {
 46 |         required: false, // 必须填写
 47 |         message: "必填项",
 48 |         trigger: 'blur'
 49 |       }
 50 |     ]
 51 |   },
 52 |   {
 53 |     type: "number",//控件类型
 54 |     icon: "el-icon-c-scale-to-original",//图标
 55 |     label: "计数器",//控件名字
 56 |     options: {
 57 |       minWidth:40,
 58 |       width: 40, // 宽度
 59 |       numberDefaultValue: 0, // 默认值
 60 |       min: -999999999, // 可输入最小值
 61 |       max: 99999999999,
 62 |       step:1,
 63 |       precision:null,
 64 |       disabled: false // 是否禁用，false不禁用，true禁用
 65 |     },
 66 |     model: "", // 数据字段
 67 |     key: "",
 68 |     rules: [
 69 |       {
 70 |         required: false,
 71 |         message: "必填项",
 72 |         trigger: 'blur'
 73 |       }
 74 |     ]
 75 |   },
 76 |   {
 77 |     type: "select",//控件类型
 78 |     icon: "el-icon-caret-bottom",//图标
 79 |     label: "下拉选择框",//控件名字
 80 |     options: {
 81 |       width: 100, // 宽度
 82 |       minWidth:20,
 83 |       multiple:false,
 84 |       defaultValue: "1", // 下拉选框请使用null为默认值
 85 |       multipleDefaultValue:[],
 86 |       disabled: false, // 是否禁用
 87 |       clearable: false, // 是否显示清除按钮
 88 |       placeholder: "请选择", // 默认提示文字
 89 |       dynamicKey: "",
 90 |       dynamic: false,
 91 |       options: [
 92 |         // 下拉选择项配置
 93 |         {
 94 |           value: "1",
 95 |           label: "选项1",
 96 |         },
 97 |         {
 98 |           value: "2",
 99 |           label: "选项2",
100 |         },
101 |       ],
102 |       showSearch: false // 是否显示搜索框，搜索选择的项的值，而不是文字
103 |     },
104 |     model: "",
105 |     key: "",
106 |     rules: [
107 |       {
108 |         required: false,
109 |         message: "必填项",
110 |         trigger: 'blur'
111 |       }
112 |     ]
113 |   },
114 |   {
115 |     type: "cascader", // 表单类型
116 |     label: "级联选择器", // 标题文字
117 |     icon: "el-icon-office-building",
118 |     options: {
119 |       width: 100,
120 |       multipleDefaultValue:[],
121 |       multiple:false,
122 |       disabled: false, //是否禁用
123 |       defaultValue: "1", // 默认值
124 |       showSearch: false, // 是否显示搜索框，搜索选择的项的值，而不是文字
125 |       placeholder: "请选择",
126 |       clearable: false, // 是否显示清除按钮
127 |       dynamicKey: "",
128 |       dynamic: true,
129 |       options: [
130 |         {
131 |           value: "1",
132 |           label: "选项1",
133 |           children: [
134 |             {
135 |               value: "11",
136 |               label: "选项11"
137 |             }
138 |           ]
139 |         },
140 |         {
141 |           value: "2",
142 |           label: "选项2",
143 |           children: [
144 |             {
145 |               value: "22",
146 |               label: "选项22"
147 |             }
148 |           ]
149 |         }
150 |       ]
151 |     },
152 |     model: "",
153 |     key: "",
154 |     rules: [
155 |       {
156 |         required: false,
157 |         message: "必填项"
158 |       }
159 |     ]
160 |   },
161 |   {
162 |     type: "checkbox",//控件类型
163 |     icon: "el-icon-tickets",//图标
164 |     label: "多选框",//控件名字
165 |     options: {
166 |       disabled: false, //是否禁用
167 |       checkboxDefaultValue: [],
168 |       chooseMin:0,
169 |       chooseMax:3,
170 |       dynamicKey: "",
171 |       dynamic: false,
172 |       options: [
173 |         {
174 |           value: "1",
175 |           label: "选项1",
176 |         },
177 |         {
178 |           value: "2",
179 |           label: "选项2",
180 |         },
181 |         {
182 |           value: "3",
183 |           label: "选项3",
184 |         }
185 |       ]
186 |     },
187 |     model: "",
188 |     key: "",
189 |     rules: [
190 |       {
191 |         required: false,
192 |         message: "必填项",
193 |         trigger: 'blur'
194 |       }
195 |     ]
196 |   },
197 |   {
198 |     type: "radio",//控件类型
199 |     icon: "el-icon-remove-outline",//图标
200 |     label: "单选框",
201 |     options: {
202 |       disabled: false, //是否禁用
203 |       defaultValue: null, // 默认值
204 |       dynamicKey: "",
205 |       dynamic: false,
206 |       options: [
207 |         {
208 |           value: "1",
209 |           label: "选项1",
210 |         },
211 |         {
212 |           value: "2",
213 |           label: "选项2",
214 |         },
215 |       ]
216 |     },
217 |     model: "",
218 |     key: "",
219 |     rules: [
220 |       {
221 |         required: false,
222 |         message: "必填项",
223 |         trigger: 'blur'
224 |       }
225 |     ]
226 |   },
227 |   {
228 |     type: "date",//控件类型
229 |     icon: "el-icon-stopwatch",//图标
230 |     label: "日期选择器",
231 |     options: {
232 |       width: 100, // 宽度
233 |       defaultValue: "", // 默认值，字符串 12:00:00
234 |       rangeDefaultValue: [ "", "" ], // 默认值，字符串 12:00:00
235 |       disabled: false, // 是否禁用
236 |       placeholder: "请选择日期点",
237 |       format:"yyyy 年 MM 月 dd 日",//展示格式
238 |       isChooseTimes: "1",//是否是选择一个时间段1是时间点
239 |       valueFormat:"timestamp",//解析格式
240 |       rangeSeparator:"至",//时间段选择中间文字
241 |       startPlaceholder:"开始日期",//时间段选择前文字
242 |       endPlaceholder:"结束日期",//时间段选择后文字
243 |     },
244 |     model: "",
245 |     key: "",
246 |     rules: [
247 |       {
248 |         required: false,
249 |         message: "必填项",
250 |         trigger: 'blur'
251 |       }
252 |     ]
253 |   },
254 |   {
255 |     type: "time",//控件类型
256 |     icon: "el-icon-date",//图标
257 |     label: "时间选择器",
258 |     options: {
259 |       isChooseTimes: "1",//是否是选择一个时间段
260 |       width: 100, // 宽度
261 |       defaultValue: "", // 默认值，字符串 12:00:00
262 |       clearable: false, // 是否显示清除按钮
263 |       placeholder: "请选择时间点",
264 |       format: "HH:mm:ss", // 展示格式
265 |       rangeSeparator:"至",//时间段选择中间文字
266 |       startPlaceholder:"开始时间",//时间段选择前文字
267 |       endPlaceholder:"结束时间",//时间段选择后文字
268 |     },
269 |     model: "",
270 |     key: "",
271 |     rules: [
272 |       {
273 |         required: false,
274 |         message: "必填项",
275 |         trigger: 'blur'
276 |       }
277 |     ]
278 |   },
279 |   {
280 |     type: "uploadFile",//控件类型
281 |     icon: "el-icon-upload2",//图标
282 |     label: "上传文件",
283 |     options: {
284 |       fileList:[],
285 |       multiple: true,
286 |       disabled: false,
287 |       width: 100,
288 |       limit: 3,
289 |       buttonText:"点击上传",
290 |       warnText:"只能上传jpg/png文件，且不超过500kb",
291 |       action: "http://cdn.kcz66.com/uploadFile.txt",
292 |     },
293 |     model: "",
294 |     key: "",
295 |     rules: [
296 |       {
297 |         required: false,
298 |         message: "必填项",
299 |         trigger: 'blur'
300 |       }
301 |     ]
302 |   },
303 |   {
304 |     type: "uploadImg",//控件类型
305 |     icon: "el-icon-picture-outline",//图标
306 |     label: "上传图片",
307 |     options: {
308 |       fileList:[],
309 |       multiple: true,
310 |       disabled: false,
311 |       width: 100,
312 |       limit: 3,
313 |       action: "http://cdn.kcz66.com/uploadFile.txt",
314 |       listType: "picture-card",
315 |     },
316 |     model: "",
317 |     key: "",
318 |     rules: [
319 |       {
320 |         required: false,
321 |         message: "必填项",
322 |         trigger: 'blur'
323 |       }
324 |     ]
325 |   },
326 |   {
327 |     type: "button",//控件类型
328 |     icon: "el-icon-thumb",//图标
329 |     label: "按钮",
330 |     options: {
331 |       width:0,
332 |       maxWidth:80,
333 |       buttonType: "primary",
334 |       handle: "submit",
335 |       dynamicFun: "",
336 |       disabled:false
337 |     },
338 |     key: ""
339 |   },
340 |   {
341 |     type: "switch",//控件类型
342 |     icon: "el-icon-open",//图标
343 |     label: "开关",
344 |     options: {
345 |       switchValue: "1", // 默认值 Boolean 类型
346 |       disabled: false, // 是否禁用
347 |       activeText:"开",
348 |       inactiveText:"关"
349 |     },
350 |     model: "",
351 |     key: "",
352 |     rules: [
353 |       {
354 |         required: false,
355 |         message: "必填项",
356 |         trigger: 'blur'
357 |       }
358 |     ]
359 |   },
360 |   {
361 |     type: "slider",//控件类型
362 |     icon: "el-icon-set-up",//图标
363 |     label: "滑动输入条",
364 |     options: {
365 |       width: 100, // 宽度
366 |       numberDefaultValue: 0, // 默认值， 如果range为true的时候，则需要改成数组,如：[12,15]
367 |       disabled: false, // 是否禁用
368 |       min: 0, // 最小值
369 |       max: 100, // 最大值
370 |       step: 1, // 步长，取值必须大于 0，并且可被 (max - min) 整除
371 |       showInput: true // 是否显示输入框，range为true时，请勿开启
372 |     },
373 |     model: "",
374 |     key: "",
375 |     rules: [
376 |       {
377 |         required: false,
378 |         message: "必填项",
379 |         trigger: 'blur'
380 |       }
381 |     ]
382 |   },
383 |   // {
384 |   //   type: "tipsWindow",//控件类型
385 |   //   icon: "el-icon-copy-document",//图标
386 |   //   label: "弹出选择框",
387 |   //   options: {
388 |   //     width: 100, // 宽度
389 |   //     defaultValue: "", // 默认值
390 |   //     placeholder: "请输入", // 没有输入时，提示文字
391 |   //     clearable: false,
392 |   //     hidden: false, // 是否隐藏，false显示，true隐藏
393 |   //     disabled: false // 是否禁用，false不禁用，true禁用
394 |   //   },
395 |   // },
396 |   {
397 |     type: "childTable",
398 |     label: "子表",
399 |     icon: "el-icon-menu",
400 |     list: [],
401 |     options: {
402 | 
403 |     },
404 |     model: "",
405 |     key: ""
406 |   },
407 |   {
408 |     type: "p",//控件类型
409 |     icon: "el-icon-notebook-2",//图标
410 |     label: "文字",
411 |     options: {
412 |       width: 100, // 宽度
413 |     },
414 |   },
415 |   {
416 |     type: "super",//控件类型
417 |     icon: "el-icon-link",//图标
418 |     label: "超链接",
419 |     options: {
420 |       defaultValue: "点击这跳转", // 默认值
421 |       url:"",//跳转连接
422 |     },
423 |   },
424 |   // {
425 |   //   type: "tMKeditor",//控件类型
426 |   //   icon: "el-icon-s-grid",//图标
427 |   //   label: "富文本",
428 |   //   list: [],
429 |   //   options: {
430 |   //     height: 3,
431 |   //     placeholder: "请dada",
432 |   //     chinesization: true,
433 |   //     hidden: false, // 是否隐藏，false显示，true隐藏
434 |   //     disabled: false,
435 |   //     showLabel: false,
436 |   //     width: 100
437 |   //   },
438 |   //   model: "",
439 |   //   key: "",
440 |   //   rules: [
441 |   //     {
442 |   //       required: false,
443 |   //       message: "必填项"
444 |   //     }
445 |   //   ]
446 |   // },
447 | ];
448 | //布局控件
449 | export const layoutList = [
450 |   {
451 |     type: "divider",
452 |     label: "分割线",
453 |     icon: "el-icon-minus",
454 |     options: {
455 |       orientation: "left"
456 |     },
457 |     key: "",
458 |     model: ""
459 |   },
460 |   {
461 |     type: "card",
462 |     label: "卡片布局",
463 |     icon: "el-icon-postcard",
464 |     list: [],
465 |     key: "",
466 |     model: "",
467 |     options: {
468 |     },
469 |   },
470 |   {
471 |     type: "grid",
472 |     label: "栅格布局",
473 |     icon: "el-icon-s-grid",
474 |     columns: [
475 |       {
476 |         span: 12,
477 |         list: []
478 |       },
479 |       {
480 |         span: 12,
481 |         list: []
482 |       },
483 |     ],
484 |     options: {
485 |       gutter: 0
486 |     },
487 |     key: "",
488 |     model: ""
489 |   },
490 |   {
491 |     type: "table",
492 |     label: "表格布局",
493 |     icon: "el-icon-menu",
494 |     trs: [
495 |       {
496 |         tds: [
497 |           {
498 |             colspan: 1,
499 |             rowspan: 1,
500 |             list: []
501 |           },
502 |           {
503 |             colspan: 1,
504 |             rowspan: 1,
505 |             list: []
506 |           }
507 |         ]
508 |       },
509 |       {
510 |         tds: [
511 |           {
512 |             colspan: 1,
513 |             rowspan: 1,
514 |             list: []
515 |           },
516 |           {
517 |             colspan: 1,
518 |             rowspan: 1,
519 |             list: []
520 |           }
521 |         ]
522 |       }
523 |     ],
524 |     options: {
525 |       bordered: true,
526 |       bright: false,
527 |       small: true,
528 |       customStyle: ""
529 |     },
530 |     key: "",
531 |     model: ""
532 |   }
533 | ];
534 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/components/tFormTemplate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="dar-box"
  4 |     :class="{
  5 |       itemWrapTableChild: type === 'childTable'
  6 |     }"
  7 |   >
  8 |     <div
  9 |       class="item-wrap"
 10 |       :class="{
 11 |         active : selectItem.key===item.key,
 12 | 
 13 |       }"
 14 |       @click.stop="$emit('onClick',item)"
 15 |     >
 16 |       <template v-if="item.type === 'table'">
 17 |         <ul
 18 |           class="table-rightClick-wrap"
 19 |           v-show="tableHandleShow"
 20 |           :style="`top:${top}px; left:${left}px`"
 21 |           @contextmenu.prevent ="()=>{return false}"
 22 |         >
 23 |           <li ref="mergeRight"><i class="el-icon-caret-right"/>向右合并</li>
 24 |           <li ref="addCol"><i class="el-icon-right"/>增加一列</li>
 25 |           <li ref="mergeDown"><i class="el-icon-caret-bottom"/>向下合并</li>
 26 |           <li ref="addRow"><i class="el-icon-bottom"/>增加一行</li>
 27 |           <li ref="repeal"><i class="el-icon-refresh-left"/>回退</li>
 28 |         </ul>
 29 |         <table style="width: 100%" @contextmenu.prevent ="()=>{return false}" ref="FDTCDtable">
 30 |           <tbody class="table-layout">
 31 |             <tr v-for="(tr,tri) in item.trs" :key="tri">
 32 |               <td
 33 |                 v-for="(td,tdi) in tr.tds"
 34 |                 :colspan="td.colspan"
 35 |                 :rowspan="td.rowspan"
 36 |                 :key="tdi"
 37 |                 @contextmenu.prevent ="()=>{return false}"
 38 |                 @mouseup="tableHandle($event, item.trs, tri, tdi )"
 39 |               >
 40 |                 <draggable
 41 |                   tag="div"
 42 |                   class="table-dra"
 43 |                   v-model= "td.list"
 44 |                   v-bind= "{
 45 |                     group: 'form-draggable',
 46 |                     animation: 180,
 47 |                     handle:'.dar-box',
 48 |                     ghostClass: 'moving',
 49 |                   }"
 50 |                   @add="addItem($event,td.list)"
 51 |                   @start="start($event,td.list)"
 52 |                 >
 53 |                   <transition-group tag="div" name="list" class="table-item">
 54 |                     <TFormTemplate
 55 |                       v-for="(r, i) in td.list"
 56 |                       :key="r.key"
 57 |                       :item="r"
 58 |                       :i="i"
 59 |                       :layout="layout"
 60 |                       :selectItem="selectItem"
 61 |                       @onClick="onClick"
 62 |                       @deleteItem="deleteItem"
 63 |                       @selectChange="selectChange"
 64 |                       @handleStart="start"
 65 |                       :selectType="selectType"
 66 |                     />
 67 |                   </transition-group>
 68 |                 </draggable>
 69 |               </td>
 70 |             </tr>
 71 |           </tbody>
 72 |         </table>
 73 |       </template>
 74 | <!--      格栅布局-->
 75 |       <template v-if="item.type === 'grid'">
 76 |         <div class="grid-box">
 77 |           <el-row
 78 |             :gutter="item.options.gutter"
 79 |           >
 80 |             <el-col
 81 |               v-for="(column, i) in item.columns"
 82 |               :span="column.span"
 83 |               :key="i"
 84 |             >
 85 |               <draggable
 86 |                 tag="div"
 87 |                 class="grid-box-dra"
 88 |                 v-model= "column.list"
 89 |                 v-bind= "{
 90 |                   group: 'form-draggable',
 91 |                   animation: 180,
 92 |                   handle:'.dar-box',
 93 |                   ghostClass: 'moving',
 94 |                 }"
 95 |                 @add="addItem($event,column.list)"
 96 |                 @start="start($event,column.list)"
 97 |               >
 98 |                 <transition-group tag="div" name="list" class="grid-item">
 99 |                   <TFormTemplate
100 |                     v-for="(r, i) in column.list"
101 |                     :key="r.key"
102 |                     :item="r"
103 |                     :i="i"
104 |                     :layout="layout"
105 |                     :selectItem="selectItem"
106 |                     @onClick="onClick"
107 |                     @deleteItem="deleteItem"
108 |                     @selectChange="selectChange"
109 |                     @handleStart="start"
110 |                     :selectType="selectType"
111 |                   />
112 |                 </transition-group>
113 |               </draggable>
114 |             </el-col>
115 |           </el-row>
116 |         </div>
117 |       </template>
118 | <!--      格栅布局结束-->
119 | <!--      卡片布局-->
120 |       <template v-if="item.type === 'card'">
121 |         <div style="padding: 0 5px">
122 |           <el-card class="card-layout" >
123 |             <div slot="header" >
124 |               <span>{{item.label}}</span>
125 |             </div>
126 |             <div>
127 |               <draggable
128 |                 tag="div"
129 |                 class="grid-card-dra"
130 |                 v-model= "item.list"
131 |                 v-bind= "{
132 |                   group: 'form-draggable',
133 |                   animation: 180,
134 |                   handle:'.dar-box',
135 |                   ghostClass: 'moving',
136 |                 }"
137 |                 @add="addItem($event,item.list)"
138 |                 @start="start($event,item.list)"
139 |               >
140 |                 <transition-group tag="div" name="list" class="card-item">
141 |                   <TFormTemplate
142 |                     v-for="(r, i) in item.list"
143 |                     :key="r.key"
144 |                     :item="r"
145 |                     :i="i"
146 |                     :layout="layout"
147 |                     :selectItem="selectItem"
148 |                     @onClick="onClick"
149 |                     @deleteItem="deleteItem"
150 |                     @selectChange="selectChange"
151 |                     @handleStart="start"
152 |                     :selectType="selectType"
153 |                   />
154 |                 </transition-group>
155 |               </draggable>
156 |             </div>
157 |           </el-card>
158 |         </div>
159 |       </template>
160 | <!--      卡片布局结束-->
161 | <!--      子表-->
162 |       <template v-if="item.type === 'childTable'">
163 |         <div style="padding: 0 5px">
164 |           <el-card class="childTable-layout" >
165 |             <div slot="header" >
166 |               <span>子表</span>
167 |             </div>
168 |             <draggable
169 |               class="childTable-card-dra"
170 |               v-model= "item.list"
171 |               v-bind= "{
172 |                  group: unInterFlow?'no':'form-draggable',
173 |                  animation: 180,
174 |                  handle:'.dar-box',
175 |                  ghostClass: 'gridMoving',
176 |                }"
177 |               @add="addItem($event,item.list)"
178 |               @start="start($event,item.list)"
179 |             >
180 |               <transition-group tag="div" name="list" class="childTable-main">
181 |                 <TFormTemplate
182 |                   v-for="(r, i) in item.list"
183 |                   :key="r.key"
184 |                   :item="r"
185 |                   :i="i"
186 |                   :layout="layout"
187 |                   :selectType="selectType"
188 |                   :selectItem="selectItem"
189 |                   :type="'childTable'"
190 |                   @onClick="onClick"
191 |                   @deleteItem="deleteItem"
192 |                   @selectChange="selectChange"
193 |                   @handleStart="start"
194 |                 />
195 |               </transition-group>
196 |             </draggable>
197 |           </el-card>
198 |         </div>
199 |       </template>
200 | <!--      子表结束-->
201 |       <template v-else>
202 |         <FormNode
203 |           :item="item"
204 |           :layout="layout"
205 |         />
206 |       </template>
207 |       <el-button
208 |         size="mini"
209 |         type="primary"
210 |         icon="el-icon-delete"
211 |         :class="selectItem.key===item.key?'delete-active':'delete'"
212 |         @click.stop="$emit('deleteItem')"
213 |       />
214 |     </div>
215 |   </div>
216 | </template>
217 | 
218 | <script>
219 |   import FormNode from './fromNode'
220 |   import draggable from 'vuedraggable';
221 |     export default {
222 |         name: "TFormTemplate",
223 |         components:{FormNode, draggable},
224 |         props:{
225 |             selectType:{
226 |                 required:true,
227 |                 default:""
228 |             },
229 |             childTableBans:{
230 |                 type: Array,
231 |                 default: ()=>[
232 |                     "button",
233 |                     "divider",
234 |                     "card",
235 |                     "grid",
236 |                     "table",
237 |                     "super",
238 |                     "childTable",
239 |                     "tMKeditor"
240 |                 ]
241 |             },
242 |             layout:{
243 |                 type:Object,
244 |                 required:true,
245 |             },
246 |             item:{
247 |                 type: Object,
248 |                 required: true
249 |             },
250 |             i:{
251 |                 type: Number,
252 |                 required:true
253 |             },
254 |             selectItem:{
255 |                 required:true
256 |             },
257 |             type:{
258 |                 default: "",
259 |             }
260 |         },
261 |         data(){
262 |           return{
263 |             tableHandleShow: false,
264 |             left:0,
265 |             top:0,
266 |           }
267 |         },
268 |         computed:{
269 |             unInterFlow(){
270 |                 return this.childTableBans.includes(this.selectType)
271 |             }
272 |         },
273 |         methods:{
274 |             tableHandle(e, table, tri, tdi ){
275 |               if (e.button === 2){
276 |                 this.top = e.clientY;
277 |                 this.left = e.clientX;
278 |                 this.tableHandleShow = !this.tableHandleShow
279 |               }else {
280 |                 this.tableHandleShow = false
281 |               }
282 |               this.$refs.mergeRight.onclick = ()=>{
283 |                   //向右合并
284 |                 ( () =>{
285 |                   if (table[tri].tds.length-1 === tdi){
286 |                     this.$message({
287 |                       showClose: true,
288 |                       message: `已是最后一列,无法向右合并`,
289 |                       type: 'error',
290 |                       duration:1500
291 |                     })
292 |                   } else if(table[tri].tds[tdi].rowspan!==table[tri].tds[tdi+1].rowspan){
293 |                     this.$message({
294 |                       showClose: true,
295 |                       message: `该单元无法向右合并`,
296 |                       type: 'error',
297 |                       duration:1500
298 |                     })
299 |                   }else {
300 |                     table[tri].tds[tdi].colspan++;
301 |                     table[tri].tds.splice(tdi+1,1)
302 |                   }
303 |                 })()
304 |               };
305 |               this.$refs.addCol.onclick = ()=>{
306 |                 //增加一列
307 |                 ( () =>{
308 |                   table.forEach((tr)=>{
309 |                     tr.tds.push({
310 |                       colspan: 1,
311 |                       rowspan: 1,
312 |                       list: []
313 |                     })
314 |                   });
315 |                 })()
316 |               };
317 |               this.$refs.mergeDown.onclick = ()=>{
318 |                 //向下合并
319 |                 ( () =>{
320 |                   if (table.length-1 === tri){
321 |                     this.$message({
322 |                       showClose: true,
323 |                       message: `已是最后一行,无法向下合并`,
324 |                       type: 'error',
325 |                       duration:1500
326 |                     })
327 |                   }else if(table[tri].tds[tdi].colspan!==table[tri+1].tds[tdi].colspan){
328 |                     this.$message({
329 |                       showClose: true,
330 |                       message: `当前单元格无法向下合并`,
331 |                       type: 'error',
332 |                       duration:1500
333 |                     })
334 |                   }else {
335 |                     table[tri].tds[tdi].rowspan++;
336 |                     table[tri+1].tds.splice(tdi,1)
337 |                   }
338 |                 })()
339 |               };
340 |               this.$refs.addRow.onclick = ()=>{
341 |                 //增加一行
342 |                 ( () =>{
343 |                   const cells = table[0].tds.reduce((pre,cur)=>pre+cur.colspan,0);
344 |                   let rows = [];
345 |                   for (let i =0; i<cells; i++){
346 |                     rows.push({
347 |                       colspan: 1,
348 |                       rowspan: 1,
349 |                       list: []
350 |                     })
351 |                   }
352 |                   table.push({
353 |                     tds: rows
354 |                   })
355 |                 })()
356 |               };
357 |             },
358 |             start(e,list){
359 |                 this.$emit('handleStart', e, list)
360 |             },
361 |             deleteItem(){
362 |                 this.$emit('deleteItem')
363 |             },
364 |             selectChange(item){
365 |                 this.$emit("selectChange", item)
366 |             },
367 |             addItem(e,list,type){
368 |                 let item = JSON.parse(JSON.stringify(list[e.newIndex]));
369 |                 this.$set(list,e.newIndex, item);
370 |                 this.selectChange(item)
371 |             },
372 |             onClick(r){
373 |                 this.$emit("onClick",r)
374 |             }
375 |         }
376 |     }
377 | </script>
378 | 
379 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="T-form-wrap" ref="allWrap">
  3 |             <!--      控件按钮栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
  4 |             <aside class="button-wrap" >
  5 |                 <ControlList
  6 |                         :baseArray="baseArray"
  7 |                         :layoutList="layoutList"
  8 |                         @generate="generate"
  9 |                         @clickPushItem="clickPushItem"
 10 |                 />
 11 |             </aside>
 12 |             <!--      中间控件展示栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
 13 |             <section class="T-form-main" ref="contentWrap">
 14 |                 <TopButton
 15 |                      :data="data"
 16 |                      @importJson="importJson"
 17 |                      :dynamicData="dynamicData"
 18 |                      @save="save"
 19 |                 />
 20 |                 <div class="control-center-wrap">
 21 |                     <ContentFormTemplate
 22 |                         :data="data"
 23 |                         @selectItemChange="selectItemChange"
 24 |                         :selectItem="selectItem"
 25 |                         @deleteItem="deleteItem"
 26 |                         @choose="choose"
 27 |                         @startChoose="startChoose"
 28 |                         @selectChange="selectChange"
 29 |                         :selectType="selectType"
 30 |                     />
 31 |                 </div>
 32 |                 <transition name="form">
 33 |                     <div  v-if="isShrink" class="right-template-form">
 34 |                         <TFormControlConfig
 35 |                             :config="selectItem"
 36 |                             @shrink="shrink"
 37 |                             @addModel="addModel"
 38 |                         />
 39 |                     </div>
 40 |                 </transition>
 41 |             </section>
 42 |             <!--      属性栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
 43 |             <aside  class="right-form-layout">
 44 |                 <div class="control-props">表单/控件属性</div>
 45 |                 <LayoutForm
 46 |                         v-if="!isShrink"
 47 |                         :layoutData="data.config"
 48 |                 />
 49 |             </aside>
 50 |         </div>
 51 | </template>
 52 | 
 53 | <script>
 54 |     import {baseList, layoutList} from './baseConfig'
 55 |     import ContentFormTemplate from './contentFormTemplate'
 56 |     import ControlList from './controlList'
 57 |     import LayoutForm from './rightAside'
 58 |     import TFormControlConfig from './tFormControlConfig'
 59 |     import TopButton from './contentFormTemplate/topButton'
 60 |     export default {
 61 |         name: "FormDesignTCD",
 62 |         components: {ControlList, ContentFormTemplate, LayoutForm, TFormControlConfig, TopButton},
 63 |         // mounted(){
 64 |         //     //这里的代码为富文本编辑器服务,因为布局关系会导致富文本编辑器被拖入的时候造成页面被撑开,这里做监听
 65 |         //     this.$refs.contentWrap.style.width = this.$refs.allWrap.scrollWidth-640+"px";
 66 |         //     addEventListener('resize',()=>{
 67 |         //         this.$refs.contentWrap.style.width = this.$refs.allWrap.scrollWidth-640+"px"
 68 |         //     })
 69 |         // },
 70 |         // destroyed(){
 71 |         //     removeEventListener('resize',()=>{
 72 |         //         this.$refs.contentWrap.style.width = this.$refs.allWrap.scrollWidth-640+"px"
 73 |         //     })
 74 |         // },
 75 |         props: {
 76 |             defaultValue:{
 77 |                 type: Object,
 78 |                 default: ()=>{
 79 |                     return{
 80 |                         config: {
 81 |                             labelPosition: "top",
 82 |                                 labelWidth: 15,
 83 |                                 // customWidth: ""
 84 |                         },
 85 |                         list: []
 86 |                     }
 87 |                 }
 88 |             },
 89 |             childTableBans:{
 90 |                 type: Array,
 91 |                 default: ()=>[
 92 |                     "button",
 93 |                     "divider",
 94 |                     "card",
 95 |                     "grid",
 96 |                     "table",
 97 |                     "super",
 98 |                     "childTable",
 99 |                     "tMKeditor"
100 |                 ]
101 |             },
102 |             layoutBaseList:{
103 |                 type: Array,
104 |                 default: ()=>[
105 |                     "divider",
106 |                     "card",
107 |                     "grid",
108 |                     "table"
109 |                 ]
110 |             },
111 |             baseList: {
112 |                 type: Array,
113 |                 default: () => [
114 |                     "input",
115 |                     "text",
116 |                     "number",
117 |                     "select",
118 |                     "checkbox",
119 |                     "radio",
120 |                     "date",
121 |                     "time",
122 |                     "uploadFile",
123 |                     "uploadImg",
124 |                     "tMKeditor",
125 |                     "button",
126 |                     "switch",
127 |                     "slider",
128 |                     "p",
129 |                     "super",
130 |                     "tipsWindow",
131 |                     "childTable",
132 |                     "cascader"
133 |                 ]
134 |             }
135 |         },
136 |         created(){
137 |             //初始化data数据如果父组件传进来默认值,formDesignTCD会是data等于默认值的克隆副本,避免造成子父联动
138 |             this.data = JSON.parse(JSON.stringify(this.defaultValue))
139 |         },
140 |         data() {
141 |             return {
142 |                 dynamicData:{
143 |                     type: Object,
144 |                     default: ()=>{}
145 |                 },
146 |                 noModel: [
147 |                     "button",
148 |                     "divider",
149 |                     "card",
150 |                     "grid",
151 |                     "table",
152 |                     "alert",
153 |                     "p",
154 |                     "html",
155 |                     "super"
156 |                 ],
157 |                 isShrink:false,
158 |                 selectItem:{
159 |                     key:""
160 |                 },//当前激活项
161 |                 selectType:"",
162 |                 data: {
163 |                     config: {
164 |                         labelPosition: "top",
165 |                         labelWidth: 15,
166 |                         customWidth: ""
167 |                     },
168 |                     list: []
169 |                 },
170 |             }
171 |         },
172 |         watch:{
173 |             data:{
174 |                 //监听data.list如果没值将isShrink置为false,为操作栏中的清除按钮服务
175 |                 handler(newValue){
176 |                     if (newValue.list.length===0){
177 |                         this.isShrink = false;
178 |                         this.selectItem={
179 |                             key: ""
180 |                         }
181 |                     }
182 |                 },
183 |                 deep:true,
184 |                 immediate:true
185 |             },
186 |             selectItem:{
187 |                 //监听selectItem变化时将isShrink置为true,如果selectItem没有值置为false
188 |                 handler(newValue){
189 |                     if (!newValue.hasOwnProperty('options')){
190 |                         this.isShrink = false;
191 |                         return
192 |                     }
193 |                     this.isShrink = true
194 |                 }
195 |             }
196 |         },
197 |         computed:{
198 |             layoutList(){
199 |                 //计算返回布局控件
200 |                 return layoutList.filter((item)=>this.layoutBaseList.includes(item.type))
201 |             },
202 |             baseArray(){
203 |                 //计算返回基础控件传入子组件的值
204 |                 return baseList.filter((item)=>this.baseList.includes(item.type))
205 |             }
206 |         },
207 |         methods: {
208 |             setDesignData(data){
209 |                 this.data = data
210 |             },
211 |             save(){
212 |                 //保存按钮,传出formDesignTCD中的data克隆副本
213 |                 this.$emit('save',JSON.parse(JSON.stringify(this.data)))
214 |             },
215 |             importJson(json){
216 |                 this.data = JSON.parse(json)
217 |             },
218 |             selectChange(item){
219 |                 this.selectItem=item
220 |             },
221 |             startChoose(i){
222 |                 this.selectItem = this.data.list[i]
223 |             },
224 |             choose(item){
225 |                 //拿到子组件传过来的激活项
226 |                 this.selectItem = item;
227 |                 this.isShrink = true
228 |             },
229 |             clickPushItem(list,i){
230 |                 let item = list[i];
231 |                 item = JSON.parse(JSON.stringify(item));
232 |                 delete item.icon;
233 |                 const key = item.type +"_"+new Date().getTime();
234 |                 //给item做一个深克隆
235 |                 item = {
236 |                     ...item,
237 |                     key,
238 |                     model: key
239 |                 };
240 |                 if(this.noModel.includes(item.type)){
241 |                     delete item.model
242 |                 }
243 |                 if (!this.selectItem.key){
244 |                     this.data.list.push(item);
245 |                     this.selectItem = item;
246 |                     return
247 |                 }
248 |                 const putItem = array =>{
249 |                     //如果this.selectItem有值,找到selectItem所在位置
250 |                     array.forEach((child,i)=>{
251 |                         if(child.type === "grid"){
252 |                             //如果是格栅布局
253 |                             child.columns.forEach((item,i)=>{
254 |                                 putItem(item.list)
255 |                             })
256 |                         }
257 |                         if(child.type === "card"){
258 |                             putItem(child.list)
259 |                         }
260 |                         if(child.type === "table"){
261 |                             child.trs.forEach((trsObj)=>{
262 |                                 trsObj.tds.forEach((tds)=>{
263 |                                     putItem(tds.list)
264 |                                 })
265 |                             })
266 |                         }
267 |                         if (child.type === "childTable"){
268 |                             child.list.forEach((items,i)=>{
269 |                                 if (this.childTableBans.includes(item.type)){
270 |                                     //屏蔽掉不可放入子表的控件
271 |                                     item=this.selectItem;
272 |                                 }else {
273 |                                     if(items.key===this.selectItem.key){
274 |                                         child.list.splice(i+1,0,item);
275 |                                     }
276 |                                 }
277 |                             });
278 | 
279 |                         }
280 |                         if(child.key===this.selectItem.key){
281 |                             array.splice(i+1,0,item);
282 |                         }else if(this.selectItem.key===''){
283 |                             array.push(item)
284 |                         }
285 |                     });
286 |                 };
287 |                 putItem(this.data.list);
288 |                 this.selectItem = item
289 |             },
290 |             deleteItem(){
291 |                 const delItem = array =>{
292 |                     array.forEach((child,i)=>{
293 |                         if (child.type === "grid"){
294 |                             child.columns.forEach((item,i)=>{
295 |                                 delItem(item.list)
296 |                             })
297 |                         }
298 |                         if(child.type === "card"){
299 |                             delItem(child.list)
300 |                         }
301 |                         if(child.type === "childTable"){
302 |                             delItem(child.list)
303 |                         }
304 |                         if(child.type === "table"){
305 |                             child.trs.forEach((trsObj)=>{
306 |                                 trsObj.tds.forEach((tds)=>{
307 |                                     delItem(tds.list)
308 |                                 })
309 |                             })
310 |                         }
311 |                         if (child.key === this.selectItem.key){
312 |                             array.splice(i,1);
313 |                             if (array.length===0){
314 |                                 this.selectItem = {key: ''};
315 | 
316 |                             }else if(array.length === i) {
317 |                                 this.selectItem = array[i-1]
318 |                             }else {
319 |                                 this.selectItem = array[i]
320 |                             }
321 |                         }
322 |                     })
323 |                 };
324 |                 delItem(this.data.list)
325 |             },
326 |             selectItemChange(item, i){
327 |                 this.$set(this.data.list,i, item);
328 |                 this.selectItem = item
329 |             },
330 |             generate(list,i){
331 |                 let item = list[i];
332 |                 //生成key
333 |                 const key = item.type +"_"+new Date().getTime();
334 |                 item = JSON.parse(JSON.stringify(item));
335 |                 //把总线的list里的key赋值,并且让数据联动字段等于key
336 |                 this.$set(list,i,{
337 |                     ...item,
338 |                     key,
339 |                     model:key
340 |                 });
341 |                 //删除不需要model属性的控件
342 |                 if(this.noModel.includes(item.type)){
343 |                     delete list[i].model
344 |                 }
345 |                 delete list[i].icon;
346 |                 this.selectType = item.type
347 |             },
348 |             shrink(){
349 |                 this.isShrink = false
350 |             },
351 |             addModel(){
352 |                 this.selectItem.options.options.push({
353 |                     value: "",
354 |                     label: ""
355 |                 })
356 |             },
357 |         }
358 |     }
359 | </script>
360 | 


--------------------------------------------------------------------------------
/object/formDesignTCD/tFormControlConfig/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-form
  3 |       label-width="80px"
  4 |       :model="config"
  5 |       class="control-config-form"
  6 |       label-position="top"
  7 |       size="mini"
  8 |     >
  9 |       <p style="text-align: center; margin: 6px 0; font-size: 12px">{{config.key}}</p>
 10 |       <el-button
 11 |           type="primary"
 12 |           icon="el-icon-s-unfold"
 13 |           class="shrink-button"
 14 |           @click="handleShrink"
 15 |         />
 16 |       <el-form-item label="标签" v-if="config.hasOwnProperty('label')">
 17 |           <el-input v-model="config.label" clearable/>
 18 |       </el-form-item>
 19 |       <el-divider v-if="config.options.hasOwnProperty('buttonType')"/>
 20 |       <el-form-item v-if="config.options.hasOwnProperty('buttonType')" label="按钮类型">
 21 |         <el-radio-group v-model="config.options.buttonType" size="mini">
 22 |           <el-radio-button label="primary" type="primary">primary</el-radio-button>
 23 |           <el-radio-button label="success" type="success">success</el-radio-button>
 24 |           <el-radio-button label="danger" type="danger">danger</el-radio-button>
 25 |           <el-radio-button label="info" type="info">info</el-radio-button>
 26 |         </el-radio-group>
 27 |       </el-form-item>
 28 |       <el-divider v-if="config.options.hasOwnProperty('handle')"/>
 29 |       <el-form-item v-if="config.options.hasOwnProperty('handle')" label="按钮类型">
 30 |         <el-radio-group v-model="config.options.handle" size="mini">
 31 |           <el-radio-button label="submit">提交</el-radio-button>
 32 |           <el-radio-button label="clear">重置</el-radio-button>
 33 |           <el-radio-button label="doSomething">自定义</el-radio-button>
 34 |         </el-radio-group>
 35 |       </el-form-item>
 36 |       <el-divider v-if="config.options.hasOwnProperty('url')"/>
 37 |       <el-form-item v-if="config.options.hasOwnProperty('url')" label="连接地址">
 38 |         <el-input
 39 |           v-model="config.options.url"
 40 |           clearable
 41 |         />
 42 |       </el-form-item>
 43 |       <el-form-item v-if="config.options.hasOwnProperty('handle')&&config.options.handle==='doSomething'" label="自定义事件">
 44 |         <el-input
 45 |           type="textarea"
 46 |           :rows="6"
 47 |           v-model="config.options.dynamicFun"
 48 |         />
 49 |       </el-form-item>
 50 |       <el-divider v-if="config.hasOwnProperty('model')"/>
 51 |       <el-form-item v-if="config.hasOwnProperty('model')" label="数据字段">
 52 |           <el-input
 53 |             v-model="config.model"
 54 |             clearable
 55 |           />
 56 |         </el-form-item>
 57 |       <el-divider v-if="config.options.hasOwnProperty('width')" />
 58 |       <el-form-item v-if="config.options.hasOwnProperty('width')" :label="config.type==='button'?'按钮位置':'宽度(子表中控件宽度不生效)'">
 59 |           <div class="block">
 60 |             <el-slider
 61 |               v-model="config.options.width"
 62 |               :min="config.options.minWidth"
 63 |               :max="config.options.maxWidth?config.options.maxWidth:100"
 64 |               show-input>
 65 |             </el-slider>
 66 |           </div>
 67 |         </el-form-item>
 68 |       <el-form-item v-if="config.options.hasOwnProperty('height')" label="高度">
 69 |           <div class="block">
 70 |             <el-slider
 71 |               v-model="config.options.height"
 72 |               :min="3"
 73 |               :max="7"
 74 |               show-input>
 75 |             </el-slider>
 76 |           </div>
 77 |         </el-form-item>
 78 |       <UploadFileOrImg
 79 |           v-if="config.type==='uploadFile'||config.type==='uploadImg'"
 80 |           :options="config.options"
 81 |       />
 82 |       <el-divider v-if="config.options.hasOwnProperty('gutter')" />
 83 |       <el-form-item v-if="config.options.hasOwnProperty('gutter')" label="格栅间距">
 84 |         <el-input-number
 85 |           v-model="config.options.gutter"
 86 |           :min="0"
 87 |           controls-position="right"
 88 |           size="mini"
 89 |         />
 90 |       </el-form-item>
 91 |       <div style="margin-top: 8px" v-if="config.hasOwnProperty('columns')">
 92 |         <div style="font-size: 14px">格栅配置</div>
 93 |         <el-row v-for="(item,index) in config.columns" :key="index" :gutter="5" style="margin-top: 6px">
 94 |           <el-col :span="12" >
 95 |             <el-input-number
 96 |               v-model="item.span"
 97 |               :max="24"
 98 |               :min="0"
 99 |               controls-position="right"
100 |               size="mini"
101 |             />
102 |           </el-col>
103 |           <el-col :span="6">
104 |             <el-button style="padding: 7px" type="danger" icon="el-icon-delete" circle @click="deleteItem(config.columns,index)"></el-button>
105 |           </el-col>
106 |         </el-row>
107 |         <a href="#" @click="addItem(config.columns)" style="text-decoration:none; font-size: 14px">增加数据</a>
108 |       </div>
109 |       <el-divider v-if="config.options.hasOwnProperty('options')"/>
110 |       <el-form-item label="下拉框数据" v-if="config.options.hasOwnProperty('options')" >
111 |           <el-radio-group v-model="config.options.dynamic"  >
112 |             <el-radio-button :label="false" >静态数据</el-radio-button>
113 |             <el-radio-button :label="true" >动态数据</el-radio-button>
114 |           </el-radio-group>
115 |           <TOptionAdd v-model="config.options.options" v-if="!config.options.dynamic"/>
116 |           <el-input style="margin-top: 10px" v-else v-model="config.options.dynamicKey" placeholder="请输入动态数据地址"></el-input>
117 |         </el-form-item>
118 |       <el-divider v-if="config.options.hasOwnProperty('chooseMax')"></el-divider>
119 |       <el-form-item v-if="config.options.hasOwnProperty('chooseMax')" label="最多可选数">
120 |           <el-input-number
121 |             v-model="config.options.chooseMax"
122 |             :min="0"
123 |             :max="config.options.options.length"
124 |           />
125 |         </el-form-item>
126 |       <el-divider v-if="config.options.hasOwnProperty('chooseMin')"></el-divider>
127 |       <el-form-item v-if="config.options.hasOwnProperty('chooseMin')" label="最少可选数">
128 |           <el-input-number
129 |             v-model="config.options.chooseMin"
130 |             :min="0"
131 |             :max="config.options.options.length-1"
132 |           />
133 |         </el-form-item>
134 |       <el-divider v-if="config.options.hasOwnProperty('defaultValue')&&!config.options.hasOwnProperty('isChooseTimes')"></el-divider>
135 |       <el-form-item v-if="config.options.hasOwnProperty('defaultValue')&&!config.options.hasOwnProperty('isChooseTimes')" :label="config.type==='number'?'默认值(必须为数字)':'默认值'">
136 |         <el-select
137 |           v-if="config.type === 'select'"
138 |           v-model="selectDefaultValue"
139 |           :multiple="config.options.multiple"
140 |         >
141 |           <el-option
142 |             v-for="(items,index) in config.options.options"
143 |             :key="index"
144 |             :label="items.label"
145 |             :value="items.value">
146 |           </el-option>
147 |         </el-select>
148 |         <el-cascader
149 |           v-else-if="config.type === 'cascader'"
150 |           :options="config.options.options"
151 |           v-model="selectDefaultValue"
152 |           :props="{
153 |             multiple:config.options.multiple
154 |           }"
155 |           collapse-tags
156 |           filterable
157 |         />
158 |         <el-input
159 |           v-else
160 |           v-model="config.options.defaultValue"
161 |           clearable
162 |         />
163 |       </el-form-item>
164 |       <el-divider v-if="config.options.hasOwnProperty('showInput')" />
165 |       <el-form-item v-if="config.options.hasOwnProperty('showInput')" label="是否显示计数器">
166 |         <el-switch
167 |           v-model="config.options.showInput"
168 |           active-text="显示"
169 |           inactive-text="不显示"
170 |         />
171 |       </el-form-item>
172 |       <el-divider v-if="config.options.hasOwnProperty('switchValue')" />
173 |       <el-form-item v-if="config.options.hasOwnProperty('switchValue')" label="默认值">
174 |         <el-switch
175 |           v-model="config.options.switchValue"
176 |           :active-text="config.options.activeText"
177 |           :inactive-text="config.options.inactiveText"
178 |           :disabled="config.options.disabled"
179 |         />
180 |       </el-form-item>
181 |       <el-divider v-if="config.options.hasOwnProperty('inactiveText')"/>
182 |       <el-form-item v-if="config.options.hasOwnProperty('inactiveText')" label="左侧提示文字">
183 |         <el-input v-model="config.options.inactiveText"/>
184 |       </el-form-item>
185 |       <el-divider v-if="config.options.hasOwnProperty('activeText')"/>
186 |       <el-form-item v-if="config.options.hasOwnProperty('activeText')" label="右侧提示文字">
187 |         <el-input v-model="config.options.activeText"/>
188 |       </el-form-item>
189 |       <TimeOrDate v-if="config.options.hasOwnProperty('isChooseTimes')" v-model="config"/>
190 |       <el-divider v-if="config.options.hasOwnProperty('min')"></el-divider>
191 |       <el-form-item v-if="config.options.hasOwnProperty('min')" label="最小值">
192 |           <el-input-number v-model="config.options.min" ></el-input-number>
193 |         </el-form-item>
194 |       <el-divider v-if="config.options.hasOwnProperty('max')"></el-divider>
195 |       <el-form-item v-if="config.options.hasOwnProperty('max')" label="最大值">
196 |           <el-input-number v-model="config.options.max" ></el-input-number>
197 |         </el-form-item>
198 |       <el-divider v-if="config.options.hasOwnProperty('numberDefaultValue')"></el-divider>
199 |       <el-form-item v-if="config.options.hasOwnProperty('numberDefaultValue')" label="默认值">
200 |         <el-input-number
201 |           v-model="config.options.numberDefaultValue"
202 |           :min="config.options.min"
203 |           :max="config.options.max"
204 |         />
205 |       </el-form-item>
206 |       <el-divider v-if="config.options.hasOwnProperty('precision')"></el-divider>
207 |       <el-form-item v-if="config.options.hasOwnProperty('precision')" label="精度(小数位数)">
208 |           <el-input-number v-model="config.options.precision" :min="0"></el-input-number>
209 |         </el-form-item>
210 |       <el-divider v-if="config.options.hasOwnProperty('step')"></el-divider>
211 |       <el-form-item v-if="config.options.hasOwnProperty('step')" label="步数">
212 |           <el-input-number v-model="config.options.step" ></el-input-number>
213 |         </el-form-item>
214 |       <el-divider v-if="config.options.hasOwnProperty('placeholder')&&!config.options.hasOwnProperty('isChooseTimes')"></el-divider>
215 |       <el-form-item label="提示信息" v-if="config.options.hasOwnProperty('placeholder')&&!config.options.hasOwnProperty('isChooseTimes')">
216 |           <el-input v-model="config.options.placeholder"></el-input>
217 |         </el-form-item>
218 |       <el-divider v-if="showCheckbox"></el-divider>
219 |       <el-form-item label="操作" v-if="showCheckbox">
220 |         <el-checkbox v-model="config.options.disabled" v-if="config.options.hasOwnProperty('disabled')">禁用</el-checkbox>
221 |         <el-checkbox v-model="config.options.hidden" v-if="config.options.hasOwnProperty('hidden')">隐藏</el-checkbox>
222 |         <el-checkbox v-model="config.options.clearable" v-if="config.options.hasOwnProperty('clearable')">可清除</el-checkbox>
223 |         <el-checkbox v-model="config.options.multiple" v-if="config.options.hasOwnProperty('multiple')">可多选</el-checkbox>
224 |       </el-form-item>
225 |       <el-divider v-if="config.hasOwnProperty('rules')"></el-divider>
226 |       <el-form-item label="校验规则(子表中校验规则不生效)" v-if="config.hasOwnProperty('rules')">
227 |         <div v-for="(item,index) in config.rules" :key="index" style="margin-top: 6px">
228 |           <el-row v-if="index === 0">
229 |             <el-col  :span="24" >
230 |               <el-checkbox v-if="config.hasOwnProperty('rules')" v-model="config.rules[0].required">必填项</el-checkbox>
231 |             </el-col>
232 |           </el-row>
233 |           <el-row v-else>
234 |             <el-col  :span="18" >
235 |               <el-input
236 |                 v-model="item.pattern"
237 |                 placeholder="请输入正则"
238 |               />
239 |             </el-col>
240 |             <el-col :span="18">
241 |               <el-input
242 |                 v-model="item.message"
243 |                 placeholder="请输入提示内容"
244 |               />
245 |             </el-col>
246 |             <el-col :span="6">
247 |               <el-button type="danger" icon="el-icon-delete" circle @click="deleteRule(config.rules,index)"></el-button>
248 |             </el-col>
249 |           </el-row>
250 |         </div>
251 |         <div>
252 |           <a href="#" @click="handleAddRules(config.rules)">增加验证规则</a>
253 |         </div>
254 |       </el-form-item>
255 |     </el-form>
256 | </template>
257 | 
258 | <script>
259 |   import TOptionAdd from '../components/tOptionAdd';
260 |   import TimeOrDate from '../components/timeOrDateConfig'
261 |   import UploadFileOrImg from '../components/uploadFileOrImg'
262 |     export default {
263 |         name: "tFormControlConfig",
264 |         components:{TOptionAdd, TimeOrDate, UploadFileOrImg},
265 |         props:{
266 |             config:{
267 |                 type: Object,
268 |                 required: true
269 |             },
270 |         },
271 | 
272 |         data(){
273 |             return{
274 |                 radio:'1',
275 |             }
276 |         },
277 |         computed:{
278 |             showCheckbox(){
279 |                 const options = this.config.options;
280 |                 return options.hasOwnProperty('clearable') || options.hasOwnProperty('hidden') || options.hasOwnProperty('disabled');
281 |             },
282 |           selectDefaultValue: {
283 |             get() {
284 |               return this.config.options.multiple?this.config.options.multipleDefaultValue:this.config.options.defaultValue
285 |             },
286 |             set(val) {
287 |               this.config.options.multiple?this.config.options.multipleDefaultValue=val:this.config.options.defaultValue=val
288 |             }
289 |           }
290 |         },
291 |         methods:{
292 |             addItem(columns){
293 |                 columns.push({
294 |                     span: 12,
295 |                     list: []
296 |                 })
297 |             },
298 |             addModel(){
299 |                 // this.$emit('addModel')
300 |             },
301 |             handleShrink(){
302 |                 this.$emit('shrink')
303 |             },
304 |             handleAddRules(array){
305 |                 array.push({
306 |                     pattern: "",
307 |                     message: ""
308 |                 })
309 |             },
310 |             deleteRule(array,i){
311 |                 array.splice(i,1)
312 |             },
313 |             deleteItem(columns,i){
314 |                 columns.splice(i,1)
315 |             }
316 |         }
317 |     }
318 | </script>
319 | 


--------------------------------------------------------------------------------
/object/formBuildTCD/buildFormNode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!--    表格布局-->
  4 |     <template v-if="item.type === 'table'">
  5 |       <table border="1" style="border-collapse: collapse;" class="form-build-table">
  6 |         <tbody>
  7 |           <tr v-for="(tr,tri) in item.trs" :key="tri">
  8 |             <td
  9 |               v-for="(td,tdi) in tr.tds"
 10 |               :key="tdi"
 11 |               :width="100/(tr.tds.length)+'%'"
 12 |               :colspan="td.colspan"
 13 |               :rowspan="td.rowspan"
 14 |             >
 15 |               <FinalForm
 16 |                 v-for="(item, i) in td.list"
 17 |                 :item="item"
 18 |                 :dynamicData="dynamicData"
 19 |                 :layout="layout"
 20 |                 :key="i"
 21 |                 :formData="formData"
 22 |                 :childTableColumns="childTableColumns"
 23 |                 @clickFormButton="handleFormButton"
 24 |                 @onSuccess="(response, file, fileList)=>{const model= item.model; $emit('onSuccess',response, file, fileList, model)}"
 25 |                 @beforeUpload="(file)=>{const model= item.model;$emit('beforeUpload', file, model)}"
 26 |               />
 27 |             </td>
 28 |           </tr>
 29 |         </tbody>
 30 |       </table>
 31 |     </template>
 32 |     <!--    表格布局结束-->
 33 |     <!--    格栅布局-->
 34 |     <template v-if="item.type ==='grid'">
 35 |       <div class="form-build-grid">
 36 |         <el-row
 37 |           :gutter="item.options.gutter"
 38 |         >
 39 |           <el-col
 40 |             v-for="(column, i) in item.columns"
 41 |             :span="column.span"
 42 |             :key="i"
 43 |           >
 44 |             <FinalForm
 45 |               v-for="(item, i) in column.list"
 46 |               :item="item"
 47 |               :dynamicData="dynamicData"
 48 |               :layout="layout"
 49 |               :key="i"
 50 |               :formData="formData"
 51 |               :childTableColumns="childTableColumns"
 52 |               @clickFormButton="handleFormButton"
 53 |               @onSuccess="(response, file, fileList)=>{const model= item.model; $emit('onSuccess',response, file, fileList, model)}"
 54 |               @beforeUpload="(file)=>{const model= item.model;$emit('beforeUpload', file, model)}"
 55 |             />
 56 |           </el-col>
 57 |         </el-row>
 58 |       </div>
 59 |     </template>
 60 |     <!--    格栅布局结束-->
 61 |     <!--    子表-->
 62 |     <template v-else-if="item.type === 'childTable'">
 63 |       <el-table
 64 |         class="form-build-childTable"
 65 |         :data="formData[item.model]"
 66 |         border
 67 |         style="width: 100%">
 68 |         <el-table-column
 69 |           v-for="(column,i) in item.list"
 70 |           :key="i"
 71 |           :label="column.label"
 72 |           min-width="170">
 73 |           <template slot-scope="scope">
 74 |             <el-input
 75 |               v-model="formData[item.model][scope.$index][column.model]"
 76 |               v-if="column.type === 'input'"
 77 |               :placeholder="column.options.placeholder"
 78 |               :style="'width:'+column.options.width+'%'"
 79 |               :defaultValue="column.options.defaultValue"
 80 |               :type="column.options.hidden?'hidden':'input'"
 81 |               :disabled="column.options.disabled"
 82 |               v-bind="{
 83 |                 clearable:column.options.clearable,
 84 |               }"
 85 |             />
 86 |             <el-input
 87 |               v-model="formData[item.model][scope.$index][column.model]"
 88 |               v-if="column.type === 'text'"
 89 |               :placeholder="column.options.placeholder"
 90 |               :style="'width:'+column.options.width+'%'"
 91 |               :defaultValue="column.options.defaultValue"
 92 |               :type="column.options.hidden?'hidden':'textarea'"
 93 |               :rows="column.options.height"
 94 |               :disabled="column.options.disabled"
 95 |               v-bind="{
 96 |                 clearable:column.options.clearable,
 97 |               }"
 98 |             />
 99 |             <el-input-number
100 |               v-model="formData[item.model][scope.$index][column.model]"
101 |               v-if="column.type === 'number'"
102 |               :defaultValue="column.options.numberDefaultValue"
103 |               :step="column.options.step"
104 |               :style="'width:'+column.options.width+'%'"
105 |               :min="column.options.min"
106 |               :max="column.options.max"
107 |               :precision="column.options.precision"
108 |               :disabled="column.options.disabled"
109 |             />
110 |             <el-cascader
111 |               v-if="column.type === 'cascader'"
112 |               :options="column.options.dynamic&&dynamicData[column.options.dynamicKey]?dynamicData[column.options.dynamicKey]:column.options.options"
113 |               v-model="formData[item.model][scope.$index][column.model]"
114 |               :props="{
115 |                 multiple:column.options.multiple
116 |               }"
117 |               :placeholder="column.options.placeholder"
118 |               :style="'width:'+column.options.width+'%'"
119 |               collapse-tags
120 |               :disabled="column.options.disabled"
121 |               :clearable="column.options.clearable"
122 |             />
123 |             <el-select
124 |               v-model="formData[item.model][scope.$index][column.model]"
125 |               v-if="column.type === 'select'"
126 |               :defaultValue="column.options.defaultValue"
127 |               :multiple="item.options.multiple"
128 |               :placeholder="column.options.placeholder"
129 |               :style="'width:'+column.options.width+'%'"
130 |               :disabled="column.options.disabled"
131 |               :clearable="column.options.clearable"
132 |             >
133 |               <el-option
134 |                 v-for="(items,index) in (column.options.dynamic&&dynamicData[column.options.dynamicKey]?dynamicData[column.options.dynamicKey]:column.options.options)"
135 |                 :key="index"
136 |                 :label="items.label"
137 |                 :value="items.value">
138 |               </el-option>
139 |             </el-select>
140 |             <el-checkbox-group
141 |               v-model="formData[item.model][scope.$index][column.model]"
142 |               v-if="column.type === 'checkbox'"
143 |               :defaultValue="column.options.checkboxDefaultValue"
144 |               :min="column.options.chooseMin"
145 |               :max="column.options.chooseMax"
146 |               :disabled="column.options.disabled"
147 |             >
148 |               <el-checkbox
149 |                 v-for="(items,index) in (column.options.dynamic&&dynamicData[column.options.dynamicKey]?dynamicData[column.options.dynamicKey]:column.options.options)"
150 |                 :label="items.value"
151 |                 :key="index"
152 |               >
153 |                 {{items.label}}
154 |               </el-checkbox>
155 |             </el-checkbox-group>
156 |             <el-radio-group
157 |               v-model="formData[item.model][scope.$index][column.model]"
158 |               v-if="column.type === 'radio'"
159 |               :defaultValue="column.options.defaultValue"
160 |               :disabled="column.options.disabled"
161 |             >
162 |               <el-radio
163 |                 v-for="(items,index) in (column.options.dynamic&&dynamicData[column.options.dynamicKey]?dynamicData[column.options.dynamicKey]:column.options.options)"
164 |                 :label="items.value"
165 |                 :key="index"
166 |               >
167 |                 {{items.label}}
168 |               </el-radio>
169 |             </el-radio-group>
170 |             <el-date-picker
171 |               v-model="formData[item.model][scope.$index][column.model]"
172 |               v-if="column.type === 'date'&&column.options.isChooseTimes==='2'"
173 |               :defaultValue="column.options.rangeDefaultValue"
174 |               :style="'width:'+column.options.width+'%'"
175 |               :type="column.options.isChooseTimes?'daterange':'date'"
176 |               :range-separator="column.options.rangeSeparator"
177 |               :start-placeholder="column.options.startPlaceholder"
178 |               :end-placeholder="column.options.endPlaceholder"
179 |               :disabled="column.options.disabled"
180 |               :placeholder="column.options.isChooseTimes==='2'?'':column.options.placeholder"
181 |             />
182 |             <el-date-picker
183 |               v-model="formData[item.model][scope.$index][column.model]"
184 |               v-if="column.type === 'date'&&column.options.isChooseTimes==='1'"
185 |               :defaultValue="column.options.defaultValue"
186 |               :style="'width:'+column.options.width+'%'"
187 |               type="date"
188 |               :placeholder="column.options.placeholder"
189 |               :format="column.options.format"
190 |               :value-format="column.options.valueFormat"
191 |               :disabled="column.options.disabled"
192 |             />
193 |             <el-time-picker
194 |               v-model="formData[item.model][scope.$index][column.model]"
195 |               v-if="column.type === 'time'"
196 |               :style="'width:'+column.options.width+'%'"
197 |               :is-range="column.options.isChooseTimes==='2'"
198 |               :defaultValue="column.options.defaultValue"
199 |               :range-separator="column.options.rangeSeparator"
200 |               :start-placeholder="column.options.startPlaceholder"
201 |               :end-placeholder="column.options.endPlaceholder"
202 |               :placeholder="column.options.isChooseTimes==='2'?'':column.options.placeholder"
203 |               :disabled="column.options.disabled"
204 |             />
205 |             <UploadFile
206 |               v-model="formData[item.model][scope.$index][column.model]"
207 |               v-if="column.type === 'uploadFile'"
208 |               :warnText="column.options.warnText"
209 |               :buttonText="column.options.buttonText"
210 |               :style="'width:'+column.options.width+'%'"
211 |               :action="column.options.action"
212 |               :multiple="column.options.multiple"
213 |               :limit="column.options.limit"
214 |               :disabled="column.options.disabled"
215 |               :list-type="column.options.listType"
216 |               :headers="column.options.headers?column.options.headers:{}"
217 |               :data="column.options.data?column.options.data:{}"
218 |               :name="column.options.name?column.options.name:''"
219 |               @onSuccess="(response, file, fileList)=>{const model= column.model; $emit('onSuccess',response, file, fileList, model)}"
220 |               @beforeUpload="(file)=>{const model= column.model;$emit('beforeUpload', file, model)}"
221 |             />
222 |             <UploadImg
223 |               v-model="formData[item.model][scope.$index][column.model]"
224 |               v-if="column.type === 'uploadImg'"
225 |               :style="'width:'+column.options.width+'%'"
226 |               :action="column.options.action"
227 |               :multiple="column.options.multiple"
228 |               :limit="column.options.limit"
229 |               :disabled="column.options.disabled"
230 |               :list-type="column.options.listType"
231 |               :headers="column.options.headers?column.options.headers:{}"
232 |               :data="column.options.data?column.options.data:{}"
233 |               :name="column.options.name?column.options.name:''"
234 |               @onSuccess="(response, file, fileList)=>{const model= column.model; $emit('onSuccess',response, file, fileList, model)}"
235 |               @beforeUpload="(file)=>{const model= column.model;$emit('beforeUpload', file, model)}"
236 |             />
237 |             <el-switch
238 |               v-model="formData[item.model][scope.$index][column.model]"
239 |               v-if="column.type === 'switch'"
240 |               :defaultValue="column.options.switchValue"
241 |               :active-text="column.options.activeText"
242 |               :inactive-text="column.options.inactiveText"
243 |               :disabled="column.options.disabled"
244 |             />
245 |             <div class="block"
246 |                  v-if="column.type === 'slider'"
247 |             >
248 |               <el-slider
249 |                 v-model="formData[item.model][scope.$index][column.model]"
250 |                 :defaultValue="column.options.numberDefaultValue"
251 |                 :disabled="column.options.disabled"
252 |                 :show-input="column.options.showInput"
253 |                 :step="column.options.step"
254 |               />
255 |             </div>
256 |             <div
257 |               v-if="column.type==='p'"
258 |               :style="'width:'+column.options.width+'%; margin: 0; padding: 0; line-height: 20px; '"
259 |               v-text="column.label"
260 |             />
261 |           </template>
262 |         </el-table-column>
263 |         <el-table-column
264 |           fixed="right"
265 |           label="操作"
266 |           width="100">
267 |           <template slot-scope="scope">
268 |             <el-button
269 |               icon="el-icon-minus"
270 |               circle
271 |               class="table-button"
272 |               @click="handleDelete(scope.$index, formData[item.model], item.model)"
273 |             />
274 |             <el-button
275 |               icon="el-icon-plus"
276 |               circle
277 |               class="table-button"
278 |               @click="handleAdd(scope.$index,formData[item.model], item.model)"
279 |             />
280 |           </template>
281 |         </el-table-column>
282 |       </el-table>
283 |     </template>
284 |     <!--    子表结束-->
285 |     <!--    卡片布局-->
286 |     <template v-else-if="item.type === 'card'">
287 |       <div>
288 |         <el-card class="card-layout" >
289 |           <div slot="header" >
290 |             <span>{{item.label}}</span>
291 |           </div>
292 |           <div>
293 |             <FinalForm
294 |               v-for="(items, i) in item.list"
295 |               :item="items"
296 |               :dynamicData="dynamicData"
297 |               :layout="layout"
298 |               :key="i"
299 |               :formData="formData"
300 |               :childTableColumns="childTableColumns"
301 |               @clickFormButton="handleFormButton"
302 |               @onSuccess="(response, file, fileList)=>{const model= items.model; $emit('onSuccess',response, file, fileList, model)}"
303 |               @beforeUpload="(file)=>{const model= items.model;$emit('beforeUpload', file, model)}"
304 |             />
305 |           </div>
306 |         </el-card>
307 |       </div>
308 |     </template>
309 |     <!--    卡片布局结束-->
310 |     <template v-else>
311 |       <el-form-item
312 |         :prop="item.model"
313 |         :label="item.options.hidden||item.type==='tMKeditor'||isLabel?'':item.label"
314 |         :required="item.rules?item.rules[0].required:false"
315 |         :label-width="item.type==='tMKeditor'||isLabel?'0px':layout.labelWidth+'%'"
316 |         :style="item.type==='tMKeditor'?'overflow:hidden':''"
317 |       >
318 |         <el-input
319 |           v-if="item.type === 'input'"
320 |           :placeholder="item.options.placeholder"
321 |           :style="'width:'+item.options.width+'%'"
322 |           :defaultValue="item.options.defaultValue"
323 |           v-model="formData[item.model]"
324 |           :type="item.options.hidden?'hidden':'input'"
325 |           :disabled="item.options.disabled"
326 |           v-bind="{
327 |                 clearable:item.options.clearable,
328 |               }"
329 |         />
330 |         <el-input
331 |           v-model="formData[item.model]"
332 |           v-if="item.type === 'text'"
333 |           :placeholder="item.options.placeholder"
334 |           :style="'width:'+item.options.width+'%'"
335 |           :defaultValue="item.options.defaultValue"
336 |           :type="item.options.hidden?'hidden':'textarea'"
337 |           :rows="item.options.height"
338 |           :disabled="item.options.disabled"
339 |           v-bind="{
340 |                 clearable:item.options.clearable,
341 |               }"
342 |         />
343 |         <el-input-number
344 |           v-model="formData[item.model]"
345 |           v-if="item.type === 'number'"
346 |           :defaultValue="item.options.numberDefaultValue"
347 |           :step="item.options.step"
348 |           :style="'width:'+item.options.width+'%'"
349 |           :min="item.options.min"
350 |           :max="item.options.max"
351 |           :precision="item.options.precision"
352 |           :disabled="item.options.disabled"
353 |         />
354 |         <el-cascader
355 |           v-if="item.type === 'cascader'"
356 |           :options="item.options.dynamic&&dynamicData[item.options.dynamicKey]?dynamicData[item.options.dynamicKey]:item.options.options"
357 |           v-model="formData[item.model]"
358 |           :props="{
359 |             multiple:item.options.multiple
360 |           }"
361 |           :placeholder="item.options.placeholder"
362 |           :style="'width:'+item.options.width+'%'"
363 |           collapse-tags
364 |           :disabled="item.options.disabled"
365 |           :clearable="item.options.clearable"
366 |         />
367 |         <el-select
368 |           v-model="formData[item.model]"
369 |           v-if="item.type === 'select'"
370 |           :multiple="item.options.multiple"
371 |           :defaultValue="item.options.multiple?item.options.multipleDefaultValue:item.options.defaultValue"
372 |           :placeholder="item.options.placeholder"
373 |           :style="'width:'+item.options.width+'%'"
374 |           :disabled="item.options.disabled"
375 |           :clearable="item.options.clearable"
376 |         >
377 |           <el-option
378 |             v-for="(items,index) in (item.options.dynamic&&dynamicData[item.options.dynamicKey]?dynamicData[item.options.dynamicKey]:item.options.options)"
379 |             :key="index"
380 |             :label="items.label"
381 |             :value="items.value">
382 |           </el-option>
383 |         </el-select>
384 |         <el-checkbox-group
385 |           v-model="formData[item.model]"
386 |           v-if="item.type === 'checkbox'"
387 |           :defaultValue="item.options.checkboxDefaultValue"
388 | 
389 |           :disabled="item.options.disabled"
390 |         >
391 |           <el-checkbox
392 |             v-for="(items,index) in (item.options.dynamic&&dynamicData[item.options.dynamicKey]?dynamicData[item.options.dynamicKey]:item.options.options)"
393 |             :label="items.value"
394 |             :key="index"
395 |           >
396 |             {{items.label}}
397 |           </el-checkbox>
398 |         </el-checkbox-group>
399 |         <el-radio-group
400 |           v-model="formData[item.model]"
401 |           v-if="item.type === 'radio'"
402 |           :defaultValue="item.options.defaultValue"
403 |           :disabled="item.options.disabled"
404 |         >
405 |           <el-radio
406 |             v-for="(items,index) in (item.options.dynamic&&dynamicData[item.options.dynamicKey]?dynamicData[item.options.dynamicKey]:item.options.options)"
407 |             :label="items.value"
408 |             :key="index"
409 |           >
410 |             {{items.label}}
411 |           </el-radio>
412 |         </el-radio-group>
413 |         <el-date-picker
414 |           v-model="formData[item.model]"
415 |           v-if="item.type === 'date'&&item.options.isChooseTimes==='2'"
416 |           :defaultValue="item.options.rangeDefaultValue"
417 |           :style="'width:'+item.options.width+'%'"
418 |           :type="item.options.isChooseTimes?'daterange':'date'"
419 |           :range-separator="item.options.rangeSeparator"
420 |           :start-placeholder="item.options.startPlaceholder"
421 |           :end-placeholder="item.options.endPlaceholder"
422 |           :disabled="item.options.disabled"
423 |           :placeholder="item.options.isChooseTimes==='2'?'':item.options.placeholder"
424 |         />
425 |         <el-date-picker
426 |           v-model="formData[item.model]"
427 |           v-if="item.type === 'date'&&item.options.isChooseTimes==='1'"
428 |           :defaultValue="item.options.defaultValue"
429 |           :style="'width:'+item.options.width+'%'"
430 |           type="date"
431 |           :placeholder="item.options.placeholder"
432 |           :format="item.options.format"
433 |           :value-format="item.options.valueFormat"
434 |           :disabled="item.options.disabled"
435 |         />
436 |         <el-time-picker
437 |           v-model="formData[item.model]"
438 |           v-if="item.type === 'time'"
439 |           :style="'width:'+item.options.width+'%'"
440 |           :is-range="item.options.isChooseTimes==='2'"
441 |           :defaultValue="item.options.defaultValue"
442 |           :range-separator="item.options.rangeSeparator"
443 |           :start-placeholder="item.options.startPlaceholder"
444 |           :end-placeholder="item.options.endPlaceholder"
445 |           :placeholder="item.options.isChooseTimes==='2'?'':item.options.placeholder"
446 |           :disabled="item.options.disabled"
447 |         />
448 |         <UploadFile
449 |           v-model="formData[item.model]"
450 |           v-if="item.type === 'uploadFile'"
451 |           :warnText="item.options.warnText"
452 |           :buttonText="item.options.buttonText"
453 |           :style="'width:'+item.options.width+'%'"
454 |           :action="item.options.action"
455 |           :multiple="item.options.multiple"
456 |           :limit="item.options.limit"
457 |           :disabled="item.options.disabled"
458 |           :list-type="item.options.listType"
459 |           :headers="item.options.headers?item.options.headers:{}"
460 |           :data="item.options.data?item.options.data:{}"
461 |           :name="item.options.name?item.options.name:''"
462 |           @onSuccess="(response, file, fileList)=>{const model= item.model; $emit('onSuccess',response, file, fileList, model)}"
463 |           @beforeUpload="(file)=>{const model= item.model;$emit('beforeUpload', file, model)}"
464 |         />
465 |         <UploadImg
466 |           ref="b"
467 |           v-model="formData[item.model]"
468 |           v-if="item.type === 'uploadImg'"
469 |           :style="'width:'+item.options.width+'%'"
470 |           :action="item.options.action"
471 |           :multiple="item.options.multiple"
472 |           :limit="item.options.limit"
473 |           :disabled="item.options.disabled"
474 |           :list-type="item.options.listType"
475 |           :headers="item.options.headers?item.options.headers:{}"
476 |           :data="item.options.data?item.options.data:{}"
477 |           :name="item.options.name?item.options.name:''"
478 |           @onSuccess="(response, file, fileList)=>{const model= item.model; $emit('onSuccess',response, file, fileList, model)}"
479 |           @beforeUpload="(file)=>{const model= item.model;$emit('beforeUpload', file, model)}"
480 |         />
481 |         <div
482 |           v-if="item.type === 'super'"
483 |         >
484 |           <a
485 |             :href="'https://'+item.options.url"
486 |             target="_blank"
487 |           >
488 |             {{item.options.defaultValue}}
489 |           </a>
490 |         </div>
491 |         <el-divider
492 |           v-if="item.type === 'divider'"
493 |           content-position="left"
494 |         >
495 |           {{item.label}}
496 |         </el-divider>
497 |         <TMKeditor
498 |           v-if="item.type==='tMKeditor'"
499 |           ref="KEditor"
500 |           :style="`width:${item.options.width}%`"
501 |           :record="item"
502 |           :disabled="true"
503 |         />
504 |         <el-switch
505 |           v-model="formData[item.model]"
506 |           v-if="item.type === 'switch'"
507 |           :defaultValue="item.options.switchValue"
508 |           :active-text="item.options.activeText"
509 |           :inactive-text="item.options.inactiveText"
510 |           :disabled="item.options.disabled"
511 |         />
512 |         <div class="block"
513 |              v-if="item.type === 'slider'"
514 |         >
515 |           <el-slider
516 |             v-model="formData[item.model]"
517 |             :defaultValue="item.options.numberDefaultValue"
518 |             :disabled="item.options.disabled"
519 |             :show-input="item.options.showInput"
520 |             :step="item.options.step"
521 |           />
522 |         </div>
523 |         <div
524 |           v-if="item.type==='p'"
525 |           :style="'width:'+item.options.width+'%; margin: 0; padding: 0; line-height: 20px; '"
526 |           v-text="item.label"
527 |         />
528 |         <el-button
529 |           v-if="item.type === 'button'"
530 |           :type="item.options.buttonType"
531 |           :disabled="item.options.disabled"
532 |           :style="'margin-left:'+ item.options.width + '%'"
533 |           @click="handleFormButton(item.options.handle)"
534 |         >{{item.label}}</el-button>
535 |       </el-form-item>
536 |     </template>
537 |   </div>
538 | </template>
539 | 
540 | <script>
541 |     import UploadImg from "../formDesignTCD/components/uploadImg"
542 |     import UploadFile from "../formDesignTCD/components/uploadFile"
543 |     export default {
544 |         name: "FinalForm",
545 |         components:{UploadImg,UploadFile},
546 |         props:{
547 |             typeList:{
548 |                 type: Array,
549 |                 default: ()=>[
550 |                     "button",
551 |                     "divider",
552 |                     "card",
553 |                     "grid",
554 |                     "table",
555 |                     "alert",
556 |                     "html",
557 |                     "p",
558 |                     "divider"
559 |                 ]
560 |             },
561 |             dynamicData:{
562 |                 type: Object,
563 |                 default: ()=>{}
564 |             },
565 |             childTableColumns:{
566 |                 type: Array,
567 |                 default: ()=>[]
568 |             },
569 |             formData:{
570 |                 type: Object,
571 |                 required: true
572 |             },
573 |             item:{
574 |                 type: Object,
575 |                 required: true
576 |             },
577 |             layout:{
578 |                 type: Object,
579 |                 required: true
580 |             }
581 |         },
582 |         data(){
583 |             return{
584 | 
585 |             }
586 |         },
587 |         computed:{
588 |             isLabel(){
589 |                 //判断是否是需要label的Node
590 |                 return this.typeList.includes(this.item.type);
591 |             },
592 |         },
593 |         methods:{
594 |             handleFormButton(type){
595 |               this.$emit("clickFormButton", type)
596 |             },
597 |             handleAdd(index,array, model){
598 |                 //操作子表添加一行
599 |                 let item = {};
600 |                 this.childTableColumns.forEach((child,i)=>{
601 |                     if(model === child.model){
602 |                         item = JSON.parse(JSON.stringify(child))
603 |                     }
604 |                 });
605 |                 delete item.model;
606 |                 array.splice(index,0,item)
607 | 
608 |             },
609 |             handleDelete(index,array) {
610 |                 //操作子表删除指定行
611 |                 if (array.length>1){
612 |                     array.splice(index,1)
613 |                 }
614 |             }
615 |         }
616 |     }
617 | </script>
618 | 


--------------------------------------------------------------------------------