├── mock
    ├── list.js
    └── index.js
├── docs-assets
    ├── er.png
    ├── models.jpg
    └── framework.png
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   └── images
    │   │   └── logo.png
    ├── shims-vue.d.ts
    ├── components
    │   ├── index.ts
    │   ├── common
    │   │   ├── Slider.vue
    │   │   ├── Switch.vue
    │   │   ├── Progress.vue
    │   │   ├── Tag.vue
    │   │   ├── Alert.vue
    │   │   ├── DatePicker.vue
    │   │   ├── Layout.vue
    │   │   ├── Pagination.vue
    │   │   ├── TimePicker.vue
    │   │   ├── Col.vue
    │   │   ├── Row.vue
    │   │   ├── Radio.vue
    │   │   ├── Block.vue
    │   │   ├── Checkbox.vue
    │   │   ├── Select.vue
    │   │   ├── TableColumnAction.vue
    │   │   ├── Text.vue
    │   │   ├── FormItem.vue
    │   │   ├── Input.vue
    │   │   ├── Form.vue
    │   │   ├── index.ts
    │   │   ├── Button.vue
    │   │   └── Table.vue
    │   ├── options
    │   │   ├── BaseOptions.ts
    │   │   ├── index.ts
    │   │   ├── Layout.vue
    │   │   ├── Slider.vue
    │   │   ├── DatePicker.vue
    │   │   ├── TimePicker.vue
    │   │   ├── Switch.vue
    │   │   ├── Col.vue
    │   │   ├── Block.vue
    │   │   ├── Pagination.vue
    │   │   ├── FormItem.vue
    │   │   ├── Table.vue
    │   │   ├── Radio.vue
    │   │   ├── Select.vue
    │   │   ├── Checkbox.vue
    │   │   ├── Form.vue
    │   │   ├── Progress.vue
    │   │   ├── Text.vue
    │   │   ├── Alert.vue
    │   │   ├── Tag.vue
    │   │   ├── Row.vue
    │   │   ├── Button.vue
    │   │   └── Input.vue
    │   ├── Test.vue
    │   ├── actions
    │   │   ├── components
    │   │   │   ├── GlobalActionDialog.vue
    │   │   │   └── GlobalActionFetch.vue
    │   │   └── Index.vue
    │   ├── icon-select
    │   │   ├── Index.vue
    │   │   └── icon.json
    │   ├── DragLayout.vue
    │   ├── aside-page
    │   │   └── Index.vue
    │   ├── DragContainer.vue
    │   ├── models
    │   │   └── Index.vue
    │   └── aside
    │   │   └── Index.vue
    ├── router
    │   └── index.ts
    ├── shims-tsx.d.ts
    ├── utils
    │   ├── page.ts
    │   └── index.ts
    ├── plugins
    │   ├── db
    │   │   └── index.ts
    │   └── actions
    │   │   ├── index.ts
    │   │   └── fetch.ts
    ├── main.ts
    ├── types
    │   └── Element.ts
    ├── store
    │   ├── entities
    │   │   └── Page.ts
    │   ├── modules
    │   │   └── page.ts
    │   └── index.ts
    ├── mixins
    │   └── index.ts
    └── App.vue
├── .gitignore
├── vue.config.js
├── tsconfig.json
├── package.json
└── README.md


/mock/list.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs-assets/er.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notbucai/lowcode/HEAD/docs-assets/er.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notbucai/lowcode/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/docs-assets/models.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notbucai/lowcode/HEAD/docs-assets/models.jpg


--------------------------------------------------------------------------------
/docs-assets/framework.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notbucai/lowcode/HEAD/docs-assets/framework.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notbucai/lowcode/HEAD/src/assets/images/logo.png


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | declare module '*.jpg';
6 | declare module '*.png';
7 | declare module '*.ts';


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import './common';
3 | import './options';
4 | import DragContainer from './DragContainer.vue';
5 | 
6 | Vue.component('drag-container', DragContainer)


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | 
 4 | Vue.use(Router);
 5 | 
 6 | export default new Router({
 7 |   mode: 'history',
 8 |   base: process.env.BASE_URL,
 9 |   routes: [],
10 | });


--------------------------------------------------------------------------------
/src/components/common/Slider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-slider v-model="value"> </el-slider>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |   },
 8 |   data () {
 9 |     return {
10 |       value: 30
11 |     };
12 |   },
13 | }
14 | </script>


--------------------------------------------------------------------------------
/src/components/common/Switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-switch v-model="value"> </el-switch>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |   },
 8 |   data () {
 9 |     return {
10 |       value: false
11 |     };
12 |   },
13 | }
14 | </script>


--------------------------------------------------------------------------------
/src/components/common/Progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-progress v-bind="$props"></el-progress>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: ['percentage', 'type', 'status', 'showText'],
 7 |   data () {
 8 |     return {
 9 |     };
10 |   },
11 | }
12 | </script>


--------------------------------------------------------------------------------
/src/components/common/Tag.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-tag v-bind="$props">{{ text }}</el-tag>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: ['text', 'type', 'closable', 'effect', 'size'],
 7 |   data () {
 8 |     return {
 9 |     };
10 |   },
11 | }
12 | </script>


--------------------------------------------------------------------------------
/src/components/options/BaseOptions.ts:
--------------------------------------------------------------------------------
 1 | import { LowElement } from '@/types/Element';
 2 | import { Prop, Vue } from 'vue-property-decorator';
 3 | 
 4 | export default class BaseOptions extends Vue{
 5 |   @Prop({
 6 |     required: true,
 7 |   })
 8 |   element?: LowElement;
 9 | 
10 | }


--------------------------------------------------------------------------------
/src/components/common/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-alert v-bind="$props"> </el-alert>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: ['title', 'description', 'type', 'closable', 'effect', 'center'],
 7 |   data () {
 8 |     return {
 9 |     };
10 |   },
11 | }
12 | </script>


--------------------------------------------------------------------------------
/src/components/common/DatePicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-date-picker
 3 |     v-model="value"
 4 |     placeholder="任意时间点"
 5 |   >
 6 |   </el-date-picker>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |   },
12 |   data () {
13 |     return {
14 |       value: new Date()
15 |     };
16 |   },
17 | }
18 | </script>


--------------------------------------------------------------------------------
/src/components/common/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="low-layout">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   data() {
 9 |     return {
10 |     };
11 |   },
12 |   created() {
13 |   },
14 |   methods: {
15 |   }
16 | }
17 | </script>
18 | <style lang="scss" scoped>
19 | </style>


--------------------------------------------------------------------------------
/src/components/common/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-pagination layout="prev, pager, next" v-bind="$props"></el-pagination>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: ['total', 'pageSize', 'background', 'hideOnSinglePage', 'currentPage'],
 7 |   data () {
 8 |     return {
 9 |     };
10 |   },
11 | }
12 | </script>


--------------------------------------------------------------------------------
/src/components/common/TimePicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-time-picker
 3 |     v-model="value"
 4 |     placeholder="任意时间点"
 5 |   >
 6 |   </el-time-picker>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |   },
12 |   data () {
13 |     return {
14 |       value: new Date()
15 |     };
16 |   },
17 | }
18 | </script>


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


--------------------------------------------------------------------------------
/src/components/Test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Test"></div>
 3 | </template>
 4 | <script lang="ts">
 5 | import { Component, Vue } from 'vue-property-decorator';
 6 | 
 7 | @Component({})
 8 | export default class Text extends Vue {
 9 | }
10 | 
11 | export const CONFIG = {
12 |   log: 12
13 | }
14 | 
15 | </script>
16 | <style lang="scss" scoped>
17 | </style>


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/actions/components/GlobalActionDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="GlobalActionDialog">
 3 | 
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   data() {
 9 |     return {
10 | 
11 |     };
12 |   },
13 |   created() {
14 |   },
15 |   methods: {
16 |   }
17 | }
18 | </script>
19 | <style lang="scss" scoped>
20 |   .GlobalActionDialog {
21 |   }
22 | </style>


--------------------------------------------------------------------------------
/src/components/common/Col.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-col :span="span" :offset="offset">
 3 |     <slot></slot>
 4 |   </el-col>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   components: {},
 9 |   props: {
10 |     span: [Number, String],
11 |     offset: [Number, String],
12 |   },
13 |   computed: {},
14 |   data () {
15 |     return {};
16 |   },
17 |   created () { },
18 |   mounted () { },
19 |   methods: {}
20 | }
21 | </script>
22 | <style lang="scss" scoped>
23 | </style>


--------------------------------------------------------------------------------
/src/components/common/Row.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-row v-bind="$props">
 3 |     <slot></slot>
 4 |   </el-row>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     gutter: Number,
10 |     type: String,
11 |     justify: String,
12 |     align: String,
13 |   },
14 |   components: {},
15 |   computed: {},
16 |   data () {
17 |     return {};
18 |   },
19 |   created () { },
20 |   mounted () { },
21 |   methods: {}
22 | }
23 | </script>
24 | <style lang="scss" scoped>
25 | </style>


--------------------------------------------------------------------------------
/src/utils/page.ts:
--------------------------------------------------------------------------------
 1 | export const getDataByModel = (data: any, key: string) => {
 2 |   if (!data) return undefined;
 3 |   return key.split('.').reduce((pv, key) => {
 4 |     if (!pv) return undefined;
 5 |     return pv[key];
 6 |   }, data);
 7 | }
 8 | export const setDataByModel = (data: any, key: string, value: any) => {
 9 |   const keys = key.split('.');
10 |   const _key = keys.pop();
11 |   if (!_key) return;
12 |   keys.reduce((pv, key) => {
13 |     return pv[key];
14 |   }, data)[_key] = value;
15 | }


--------------------------------------------------------------------------------
/src/components/common/Radio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-radio-group>
 3 |     <el-radio
 4 |       :label="item.value"
 5 |       v-for="(item, index) in options"
 6 |       :key="index"
 7 |       >{{ item.label }}</el-radio
 8 |     >
 9 |   </el-radio-group>
10 | </template>
11 | <script>
12 | export default {
13 |   props: {
14 |     options: {
15 |       type: Array,
16 |       default () {
17 |         return [];
18 |       }
19 |     }
20 |   },
21 |   data () {
22 |     return {};
23 |   },
24 | }
25 | </script>


--------------------------------------------------------------------------------
/src/plugins/db/index.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: bucai
 3 |  * @Date: 2021-04-13 11:17:31
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-06-25 16:07:08
 6 |  * @Description: 
 7 |  */
 8 | 
 9 | import lowdb from 'lowdb';
10 | 
11 | import LocalStorage from 'lowdb/adapters/LocalStorage'
12 | 
13 | const adapter = new LocalStorage('db')
14 | const db = lowdb(adapter)
15 | 
16 | db.defaults({
17 |   pages: [],
18 |   globalModels: [],
19 |   globalActions: {}
20 | })
21 |   .write()
22 | 
23 | 
24 | export default db;


--------------------------------------------------------------------------------
/src/components/common/Block.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="block" :style="styles">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: ['padding', 'margin'],
 9 |   computed: {
10 |     styles () {
11 |       return {
12 |         padding: this.padding,
13 |         margin: this.margin,
14 |       };
15 |     }
16 |   }
17 | }
18 | </script>
19 | <style lang="scss" scoped>
20 | .block {
21 |   display: block;
22 |   margin-bottom: 10px;
23 |   overflow: hidden;
24 | }
25 | </style>


--------------------------------------------------------------------------------
/src/components/common/Checkbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-checkbox-group v-model="select">
 3 |     <el-checkbox :label="item.value" v-for="item in options" :key="item.value">{{
 4 |       item.label
 5 |     }}</el-checkbox>
 6 |   </el-checkbox-group>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     options: {
12 |       type: Array,
13 |       default () {
14 |         return [];
15 |       }
16 |     }
17 |   },
18 |   data () {
19 |     return {
20 |       select: ''
21 |     };
22 |   },
23 | }
24 | </script>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: bucai
 3 |  * @Date: 2021-05-19 16:28:21
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-05-19 16:42:59
 6 |  * @Description: 
 7 |  */
 8 | const path = require('path')
 9 | const apiMocker = require('mocker-api')
10 | 
11 | module.exports = {
12 |   devServer: {
13 |     before (app) {  // 注意，此处引用的是自定义的接口文件
14 |       apiMocker(app, path.resolve('./mock'), {
15 |         proxy: {
16 |           // '/repos/*': 'https://api.github.com/',
17 |         },
18 |         changeHost: true,
19 |       })
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/components/common/Select.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-select v-model="value" placeholder="请选择">
 3 |     <el-option
 4 |       v-for="item in options"
 5 |       :key="item.value"
 6 |       :label="item.label"
 7 |       :value="item.value"
 8 |     >
 9 |     </el-option>
10 |   </el-select>
11 | </template>
12 | <script>
13 | export default {
14 |   props: {
15 |     options: {
16 |       type: Array,
17 |       default () {
18 |         return [];
19 |       }
20 |     }
21 |   },
22 |   data () {
23 |     return {
24 |       value: ''
25 |     };
26 |   },
27 | }
28 | </script>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 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/components/common/TableColumnAction.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: bucai
 3 |  * @Date: 2021-03-24 11:31:05
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-03-24 21:27:11
 6 |  * @Description:
 7 | -->
 8 | 
 9 | <template>
10 |   <div>
11 |     <slot name="render" />
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   props: {
17 |     scopeData: Object
18 |   },
19 |   provide () {
20 |     return {
21 |       tableRowScopeData: this.scopeData
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 | 
27 |     };
28 |   },
29 |   created () {
30 |   },
31 |   methods: {
32 |   }
33 | }
34 | </script>
35 | <style lang="scss" scoped>
36 | .TableColumnAction {
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuedraggable from 'vuedraggable';
 4 | import ElementUI from 'element-ui';
 5 | import 'element-ui/lib/theme-chalk/index.css';
 6 | Vue.use(ElementUI);
 7 | Vue.component('draggable', vuedraggable);
 8 | import './components';
 9 | import store from './store'
10 | import router from './router'
11 | import actions from './plugins/actions';
12 | 
13 | Vue.config.productionTip = process.env.NODE_ENV !== 'production';
14 | 
15 | // store.subscribe((mutation, state) => {
16 | //   console.log(mutation.type)
17 | //   console.log(mutation.payload)
18 | // })
19 | 
20 | actions(store);
21 | 
22 | new Vue({
23 |   store,
24 |   router,
25 |   render: h => h(App)
26 | }).$mount('#app')
27 | 


--------------------------------------------------------------------------------
/src/components/common/Text.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span :style="style">{{ text }}</span>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     text: String,
 8 |     fontSize: String,
 9 |     color: String,
10 |     block: Boolean,
11 |     center: Boolean,
12 |     bold: Boolean,
13 |     lineHeight: String
14 |   },
15 |   computed: {
16 |     style () {
17 |       const { fontSize, color, center, block, bold, lineHeight } = this;
18 |       return {
19 |         'font-size': fontSize,
20 |         'color': color,
21 |         'text-align': center ? 'center' : '',
22 |         'display': block ? 'block' : '',
23 |         'font-weight': bold ? 'bold' : '',
24 |         'line-height': lineHeight
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/options/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | // 处理首字母大写 abc => Abc
 4 | function changeStr (str: string) {
 5 |   return str.charAt(0).toUpperCase() + str.slice(1)
 6 | }
 7 | 
 8 | const requireComponent = require.context('.', false, /\.vue$/)
 9 | 
10 | requireComponent.keys().forEach(fileName => {
11 |   const config = requireComponent(fileName)
12 |   // console.log('config:', config)  // 打印
13 |   const componentName = changeStr(
14 |     fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./child1.vue => child1
15 |   )
16 | 
17 |   Vue.component('Bc' + componentName + 'Option', config.default || config) // 动态注册该目录下的所有.vue文件
18 | });
19 | 
20 | console.log('%c成功加载配置组件数量:' + requireComponent.keys().length, "color:#409EFF;background-color:#ecf5ff;padding:0 10px;line-height:2;margin-bottom:4px;");
21 | 


--------------------------------------------------------------------------------
/mock/index.js:
--------------------------------------------------------------------------------
 1 | const Mock = require('mockjs');
 2 | 
 3 | module.exports = {
 4 |   'GET /api/list': (req, res) => {
 5 |     return res.json({
 6 |       total: 10,
 7 |       list: [{
 8 |         id: 1,
 9 |         name: Mock.mock('@ctitle') + '-' + req.query.keywords,
10 |         age: '23',
11 |         job: '前端工程师'
12 |       }, {
13 |         id: 2,
14 |         name: Mock.mock('@ctitle') + '-' + req.query.keywords,
15 |         age: '24',
16 |         job: '后端工程师'
17 |       }]
18 |     });
19 |   },
20 |   'DELETE /api/delete': (req, res) => {
21 |     return res.json({
22 |       total: 10,
23 |       list: [{
24 |         id: 1,
25 |         name: Mock.mock('@ctitle') + '-' + "删除",
26 |         age: '23',
27 |         job: '前端工程师'
28 |       }]
29 |     });
30 |   },
31 |   _proxy: {
32 |     changeHost: true,
33 |   }
34 | }


--------------------------------------------------------------------------------
/src/components/common/FormItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-form-item v-bind="$props" :prop="prop">
 3 |     <slot></slot>
 4 |   </el-form-item>
 5 | </template>
 6 | <script>
 7 | import { getDataByModel } from '@/utils/page';
 8 | import { mapState } from 'vuex';
 9 | export default {
10 |   props: ['size', 'label', 'label-width', 'models'],
11 |   modelOptions: [{
12 |     key: 'prop',
13 |     name: '表单域字段'
14 |   }],
15 |   computed: {
16 |     ...mapState({
17 |       data (state) {
18 |         return state.page.data
19 |       }
20 |     }),
21 |     prop () {
22 |       if (this.models && this.models.prop) {
23 |         // return getDataByModel(this.data, this.models.prop);
24 |         return this.models.prop.split('.')[this.models.prop.split('.').length-1];
25 |       }
26 |       return undefined;
27 |     }
28 |   }
29 | }
30 | </script>


--------------------------------------------------------------------------------
/src/types/Element.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 单个动作处理配置
 3 |  */
 4 | export type LowElementActionHandle = {
 5 |   key: string,
 6 |   name: string,
 7 |   link: string,
 8 |   data?: {
 9 |     bind?: string,
10 |     recv?: string,
11 |   }
12 | };
13 | /**
14 |  * 单个动作
15 |  */
16 | export type LowElementAction = {
17 |   key: string;
18 |   name: string;
19 |   event: string;
20 |   handle: LowElementActionHandle[];
21 | };
22 | 
23 | /**
24 |  * 元素类型
25 |  */
26 | export type LowElement = {
27 |   id: string;
28 |   element: string;
29 |   type: 'element' | 'container';
30 |   models?: {
31 |     [key: string]: string;
32 |   },
33 |   props?: {
34 |     [key: string]: any;
35 |     [key: number]: any;
36 |   };
37 |   children?: LowElement[];
38 |   actions?: LowElementAction[]
39 | }
40 | 
41 | export type LowDrapElement = LowElement & {
42 |   clone?: boolean;
43 |   disabled?: boolean;
44 | }


--------------------------------------------------------------------------------
/src/components/icon-select/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-select v-model="select" placeholder="请选择">
 3 |     <el-option v-for="item in icons" :key="item" :label="item" :value="item">
 4 |       <i :class="item"></i>
 5 |       <span style="padding-left: 10px;">{{item}}</span>
 6 |     </el-option>
 7 |   </el-select>
 8 | </template>
 9 | 
10 | <script>
11 | import icons from './icon.json';
12 | 
13 | export default {
14 |   props: {
15 |     value: String
16 |   },
17 |   data () {
18 |     return {
19 |       icons: icons.map(item => 'el-icon-' + item)
20 |     };
21 |   },
22 |   computed: {
23 |     select: {
24 |       get () {
25 |         return this.value;
26 | 
27 |       },
28 |       set (value) {
29 |         this.$emit('input', value);
30 |       }
31 |     }
32 |   },
33 |   created () {
34 |   },
35 |   methods: {
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 | .icon-select {
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/common/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-input v-bind="props" v-model="value"></el-input>
 3 | </template>
 4 | <script>
 5 | import { mapState } from 'vuex';
 6 | import { getDataByModel, setDataByModel } from '@/utils/page';
 7 | 
 8 | export default {
 9 |   props: ['props', 'models'],
10 |   modelOptions: [{
11 |     key: 'value',
12 |     name: '值'
13 |   }],
14 |   computed: {
15 |     value: {
16 |       get () {
17 |         if (this.models && this.models.value) {
18 |           return getDataByModel(this.data, this.models.value);
19 |         }
20 |         return '';
21 |       },
22 |       set (value) {
23 |         if (this.models && this.models.value) {
24 |           setDataByModel(this.data, this.models.value, value);
25 |         }
26 |       }
27 |     },
28 |     ...mapState({
29 |       data (state) {
30 |         return state.globalData
31 |       }
32 |     })
33 |   },
34 | 
35 | 
36 | }
37 | </script>
38 | <style lang="scss" scoped>
39 | </style>


--------------------------------------------------------------------------------
/src/components/options/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout-option">
 3 |     <el-alert title="无可配置项" type="info" :closable="false" center>
 4 |     </el-alert>
 5 | 
 6 |     <div class="footer-option">
 7 |       <el-button plain size="mini" @click="handleClose">取消</el-button>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script lang="ts">
12 | import { LowElement } from '@/types/Element';
13 | import { Component, Prop, Vue } from 'vue-property-decorator';
14 | import BaseOptions from './BaseOptions';
15 | 
16 | @Component({})
17 | export default class Layout extends BaseOptions {
18 |   /**
19 |    * 取消
20 |    */
21 |   handleClose () {
22 |     this.$store.commit("page/SET_CURRENT", undefined);
23 |   }
24 | }
25 | 
26 | </script>
27 | <style lang="scss" scoped>
28 | .layout-option {
29 |   padding: 10px;
30 |   .footer-option {
31 |     display: flex;
32 |     align-items: center;
33 |     justify-content: center;
34 |     margin-top: 10px;
35 |   }
36 | }
37 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "strictFunctionTypes": false,
12 |     "skipLibCheck": true,
13 |     "esModuleInterop": true,
14 |     "allowSyntheticDefaultImports": true,
15 |     "sourceMap": true,
16 |     "baseUrl": ".",
17 |     "types": [
18 |       "webpack-env"
19 |     ],
20 |     "paths": {
21 |       "@/*": [
22 |         "src/*"
23 |       ]
24 |     },
25 |     "lib": [
26 |       "esnext",
27 |       "dom",
28 |       "dom.iterable",
29 |       "scripthost"
30 |     ]
31 |   },
32 |   "include": [
33 |     "src/**/*.ts",
34 |     "src/**/*.tsx",
35 |     "src/**/*.vue",
36 |     "tests/**/*.ts",
37 |     "tests/**/*.tsx"
38 |   ],
39 |   "exclude": [
40 |     "node_modules"
41 |   ]
42 | }


--------------------------------------------------------------------------------
/src/components/DragLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="drag-layout">
 3 |     <drag-container
 4 |       v-bind="value"
 5 |       style="min-height: 600px"
 6 |       :show="show"
 7 |       @input="changeElement"
 8 |     />
 9 |   </div>
10 | </template>
11 | <script lang='ts'>
12 | import DragContainer from './DragContainer.vue';
13 | import { Component, Vue, Prop } from 'vue-property-decorator';
14 | import { LowDrapElement } from '@/types/Element';
15 | @Component({
16 |   components: {
17 |     'drag-container': DragContainer
18 |   }
19 | })
20 | export default class DragLayout extends Vue {
21 | 
22 |   @Prop({
23 |     type: Object
24 |   })
25 |   value?: object;
26 | 
27 |   @Prop({
28 |     type: Boolean
29 |   })
30 |   show?: boolean;
31 | 
32 |   changeElement (val: LowDrapElement) {
33 |     this.$store.dispatch('page/save');
34 |   }
35 | 
36 |   created () {
37 |   }
38 | }
39 | 
40 | </script>
41 | <style lang="scss">
42 | .drag-layout {
43 | }
44 | 
45 | .list-move {
46 |   transition: transform 0.1s;
47 | }
48 | </style>


--------------------------------------------------------------------------------
/src/store/entities/Page.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: bucai
 3 |  * @Date: 2021-06-24 14:31:33
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-06-25 16:39:44
 6 |  * @Description: 
 7 |  */
 8 | 
 9 | import { LowElement } from "@/types/Element";
10 | import { generateUUID } from "@/utils";
11 | 
12 | 
13 | export type EntityType = {
14 |   key: string; // 绑定的字段 输入
15 |   name: string; // 实体名称 输入
16 |   type: string, // 数据类型 选择
17 |   value: string, // 默认值 输入
18 | }
19 | 
20 | export type ModelType = {
21 |   name: string; // 数据源名称
22 |   key: string; // 绑定的字段 该字段创建的时候生成
23 |   // 实体
24 |   entities: EntityType[];
25 | }
26 | 
27 | export default class PageEntity {
28 | 
29 |   id: string = '';
30 |   title: string = 'HOME';
31 |   icon: string = 'el-icon-s-home';
32 | 
33 |   elements: LowElement = {
34 |     "id": "c6174605-fb74-4fcb-884e-1a52926d55f3",
35 |     "element": "layout", // 元素名称 or 类型
36 |     "type": "container", // container or element
37 |     "children": []
38 |   };
39 | 
40 |   constructor() {
41 |     this.id = 'page_' + generateUUID();
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/common/Form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-form ref="formEl" v-bind="$props" :model="model" :rules="rules">
 3 |     <slot></slot>
 4 |   </el-form>
 5 | </template>
 6 | <script>
 7 | import { getDataByModel } from '@/utils/page';
 8 | import { mapState } from 'vuex';
 9 | 
10 | export default {
11 |   props: ['size', 'label-position', 'inline', 'label-width', 'models'],
12 |   modelOptions: [{
13 |     key: 'model',
14 |     name: '模型',
15 |   }, {
16 |     key: 'rules',
17 |     name: '规则',
18 |   }],
19 | 
20 |   provide () {
21 |     return {
22 |       formCompoent: this
23 |     }
24 |   },
25 | 
26 |   computed: {
27 |     ...mapState({
28 |       data (state) {
29 |         return state.data
30 |       }
31 |     }),
32 |     model () {
33 |       if (this.models && this.models.model) {
34 |         return getDataByModel(this.data, this.models.model);
35 |       }
36 |       return undefined;
37 |     },
38 |     rules () {
39 |       if (this.models && this.models.rules) {
40 | 
41 |         return getDataByModel(this.data, this.models.rules);
42 |       }
43 |       return undefined;
44 |     }
45 |   },
46 |   methods: {
47 |     submit () {
48 |       return new Promise((resolve, reject) => {
49 |         this.$refs['formEl'].validate(async valid => {
50 |           if (valid) {
51 |             return resolve();
52 |           }
53 |           reject();
54 |         })
55 |       })
56 |     }
57 |   }
58 | 
59 | }
60 | </script>


--------------------------------------------------------------------------------
/src/components/common/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | export type ModelType = {
 4 |   key: string,
 5 |   name: string
 6 | };
 7 | export type ModelConfigType = {
 8 |   [key: string]: ModelType[]
 9 | };
10 | 
11 | export const modelConfig: ModelConfigType = {};
12 | 
13 | // 处理首字母大写 abc => Abc
14 | function changeStr (str: string) {
15 |   return str.charAt(0).toUpperCase() + str.slice(1)
16 | }
17 | 
18 | const requireComponent = require.context('.', false, /\.vue$/)
19 | 
20 | export default requireComponent.keys().map(fileName => {
21 |   const config = requireComponent(fileName)
22 |   // console.log('config:', config)  // 打印
23 |   const componentName = changeStr(
24 |     fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./child1.vue => child1
25 |   )
26 |   const component = config.default || config;
27 | 
28 |   const models: ModelType[] = component.modelOptions;
29 |   const element = componentName.replace(/([A-Z])/, (item) => {
30 |     return item.toLowerCase()
31 |   }).replace(/([A-Z])/g, (item) => {
32 |     return '-' + item.toLowerCase()
33 |   })
34 |   // componentName
35 |   modelConfig[element] = models;
36 |   Vue.component('Bc' + componentName, component); // 动态注册该目录下的所有.vue文件
37 |   return {
38 |     name: element,
39 |     component
40 |   }
41 | });
42 | 
43 | console.log('%c成功加载组件数量:' + requireComponent.keys().length, "color:#409EFF;background-color:#ecf5ff;padding:0 10px;line-height:2;margin-bottom:4px;");
44 | 
45 | // 在这里需要处理 一些东西


--------------------------------------------------------------------------------
/src/plugins/actions/index.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: bucai
 3 |  * @Date: 2021-03-22 20:59:50
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-03-25 15:38:33
 6 |  * @Description:
 7 |  */
 8 | import Vue from 'vue';
 9 | import { Store } from 'vuex';
10 | 
11 | import fetch from './fetch';
12 | 
13 | import { getFinderFunctionByChildKeyFromTree } from '../../utils'
14 | import { LowElement } from '@/types/Element';
15 | 
16 | export default (store: Store<any>) => {
17 |   const state = store.state;
18 | 
19 |   const execHandle = async (handle: any, options: unknown = {}) => {
20 |     const { link, data, key } = handle;
21 |     const [type, typeKey, handleKey] = link.split(/_|\./);
22 |     if (type === 'global') {
23 |       return fetch(store, link, options);
24 |     } else if (type === 'element') {
25 |       // 1. 找到element
26 |       // 2. 获取exec
27 |       const find = getFinderFunctionByChildKeyFromTree(state.elements);
28 |       const findData = find(typeKey);
29 |       const element = Array.isArray(findData) ? findData[1] : findData;
30 |       if (!element) {
31 |         throw new Error('element not found');
32 |       }
33 |       const actions = (element as LowElement).actions;
34 |       return execAction(actions, options);
35 |     }
36 |   };
37 | 
38 |   const execAction = async (action: any, options: unknown = {}) => {
39 |     for (let i = 0; i < action.handle.length; i++) {
40 |       const handle = action.handle[i];
41 |       await execHandle(handle, options);
42 |     }
43 |   };
44 | 
45 |   Vue.prototype.$actions = execAction;
46 | 
47 | }


--------------------------------------------------------------------------------
/src/components/common/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-button v-bind="$props" @click="handleClick">{{ text }}</el-button>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   props: ['text', 'size', 'type', 'plain', 'round', 'circle', 'disabled', 'icon', 'autofocus', 'native-type', 'loading', 'actions'],
 7 |   actioOptions: [
 8 |     {
 9 |       key: 'click',
10 |       name: '点击',
11 |     },
12 |     {
13 |       key: 'submit',
14 |       name: '提交',
15 |       beIncluded: 'form' // 被form包裹的前提下可以存在的操作
16 |     },
17 |     {
18 |       key: 'row',
19 |       name: '表格行操作',
20 |       beIncluded: 'table' // 被table包裹的前提下可以存在的操作
21 |     }
22 |   ],
23 | 
24 |   inject: {
25 |     tableRowScopeData: {
26 |       from: 'tableRowScopeData',
27 |       default: undefined
28 |     },
29 |     formCompoent: {
30 |       from: 'formCompoent',
31 |       default: undefined
32 |     },
33 |   },
34 | 
35 |   methods: {
36 |     async handleClick (e) {
37 |       // 检测一下是否在编辑状态
38 |       const preview = localStorage.getItem('preview')
39 |       if (!preview) return;
40 |       // 获取
41 |       if (!this.actions) return;
42 |       const clickAction = this.actions.find(item => item.event === 'click');
43 |       if (clickAction) {
44 |         await this.$actions(clickAction, {
45 |           index: this.tableRowScopeData ? this.tableRowScopeData.$index : undefined
46 |         });
47 |       }
48 |       const submitAction = this.actions.find(item => item.event === 'submit');
49 |       if (submitAction) {
50 |         // 检测一下表单
51 |         if (!this.formCompoent) throw new Error("出现问题，没有在父组件中找到表单");
52 |         await this.formCompoent.submit()
53 |         await this.$actions(submitAction);
54 |       }
55 | 
56 |     }
57 |   }
58 | 
59 | }
60 | </script>
61 | <style lang="scss" scoped>
62 | </style>


--------------------------------------------------------------------------------
/src/plugins/actions/fetch.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: bucai
 3 |  * @Date: 2021-03-22 20:59:57
 4 |  * @LastEditors: bucai
 5 |  * @LastEditTime: 2021-06-25 16:26:50
 6 |  * @Description:
 7 |  */
 8 | import { Store } from "vuex";
 9 | import axios from 'axios';
10 | import { getDataByModel, setDataByModel } from "@/utils/page";
11 | 
12 | export default async (store: Store<{ globalActions: any, globalData: any }>, handle: string, options: any = {}) => {
13 | 
14 |   const { globalActions: actions, globalData: modelData } = store.state;
15 |   const [location, key] = handle.split('.');
16 |   const [, namespace] = location.split('_')
17 |   console.log('key', key);
18 | 
19 |   const action: any = actions[namespace].actions.find((item: { key: string }) => {
20 |     return item.key === key;
21 |   });
22 | 
23 |   if (!action) return;
24 |   const { handle: order, data: orderData } = action;
25 |   const { bind, recv, replace } = orderData || {};
26 |   const [, method, url] = order.match(/([A-z]+)\[(.*?)\]/) as [string, string, string];
27 |   const requestOptions: any = {
28 |     method,
29 |     url,
30 |   }
31 |   if (bind) {
32 |     // 对bind 处理
33 |     let newBind = bind;
34 |     if (Array.isArray(replace)) {
35 |       replace.forEach(key => {
36 |         newBind = bind.replace('$[' + key + ']', options[key]);
37 |       });
38 |     }
39 |     const bindData = getDataByModel(modelData, newBind)
40 |     // 简单处理一下
41 |     if (method.toLowerCase() === 'get') {
42 |       requestOptions.params = bindData;
43 |     } else {
44 |       requestOptions.data = bindData;
45 |     }
46 |   }
47 |   const response = await axios.request(requestOptions);
48 |   if (recv) {
49 |     const recvData = response.data;
50 |     // const recvLocalData = getDataByModel(modelData, recv);
51 |     setDataByModel(modelData, recv, recvData);
52 |   }
53 | }


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { LowElement } from '@/types/Element';
 2 | 
 3 | interface AnyObjectType {
 4 |   [key: string]: any
 5 | }
 6 | 
 7 | export function findByCallback (object: AnyObjectType, currentKey: string, callback: (current: AnyObjectType, key: string, value: any) => boolean): any {
 8 |   const current = object[currentKey];
 9 |   for (let key in current) {
10 |     if (callback(current, key, current[key])) return [object, currentKey];
11 |     if (typeof current[key] === 'object') {
12 |       const value = findByCallback(current, key, callback);
13 |       if (value) return value;
14 |     }
15 |   }
16 | }
17 | /**
18 |  * 通过子元素key获取查找器函数
19 |  * @param childKey 子元素KEY
20 |  */
21 | export function getFinderFunctionByChildKeyFromTree (tree: LowElement) {
22 |   let current: LowElement | undefined;
23 |   let index = -1;
24 |   /**
25 |    * 查找数据
26 |    * @param id 元素ID
27 |    * @param item 当前遍历的数据
28 |    */
29 |   function findElementByIdFromTree (id: string, item: LowElement): LowElement | undefined {
30 |     if (item.id === id) {
31 |       return item;
32 |     }
33 |     if (Array.isArray(item.children)) {
34 |       for (let i = 0; i < item.children.length; i++) {
35 |         const resData = findElementByIdFromTree(id, item.children[i]);
36 |         if (!current && resData) {
37 |           current = item;
38 |           index = i;
39 |         }
40 |         if (resData) return resData;
41 |       }
42 |     }
43 |   }
44 | 
45 |   return function getElementById (id: string): (LowElement | undefined | number)[] {
46 |     const element = findElementByIdFromTree(id, tree);
47 |     const res = [current, element, index];
48 |     current = undefined;
49 |     index = -1;
50 |     return res;
51 |   }
52 | }
53 | 
54 | export function generateUUID (noSymbol: boolean = false) {
55 |   let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
56 |     let r = Math.random() * 16 | 0,
57 |       v = c == 'x' ? r : (r & 0x3 | 0x8);
58 |     return v.toString(16);
59 |   });
60 |   if (noSymbol) {
61 |     uuid = uuid.replace(/-/g, '');
62 |   }
63 |   return uuid;
64 | }


--------------------------------------------------------------------------------
/src/components/common/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-table :data="data" border size="mini">
 3 |     <el-table-column
 4 |       v-for="col in columns"
 5 |       :prop="col.id"
 6 |       :key="col.id"
 7 |       :label="col.label"
 8 |       :width="col.width"
 9 |     >
10 |     </el-table-column>
11 |     <el-table-column v-if="this.$slots.default">
12 |       <template slot-scope="scope">
13 |         <TableColumnAction :scope-data="scope">
14 |           <template slot="render">
15 |             <slot></slot>
16 |           </template>
17 |         </TableColumnAction>
18 |       </template>
19 |     </el-table-column>
20 |   </el-table>
21 | </template>
22 | 
23 | <script>
24 | import { getDataByModel } from '@/utils/page';
25 | import TableColumnAction from './TableColumnAction';
26 | import { mapState } from 'vuex';
27 | export default {
28 |   actioOptions: [
29 |     {
30 |       key: 'init',
31 |       name: '初始化',
32 |     }
33 |   ],
34 |   modelOptions: [{
35 |     key: 'data',
36 |     name: '数据列表',
37 |   }],
38 |   components: {
39 |     TableColumnAction
40 |   },
41 |   props: {
42 |     actions: Array,
43 |     columns: {
44 |       type: Array,
45 |       default () {
46 |         return [];
47 |       }
48 |     },
49 |     models: {
50 |       type: Object
51 |     }
52 |   },
53 |   computed: {
54 |     ...mapState({
55 |       globalData (state) {
56 |         return state.globalData
57 |       }
58 |     }),
59 |     data () {
60 |       if (this.models && this.models.data) {
61 |         const mList = getDataByModel(this.globalData, this.models.data);
62 |         return mList;
63 |       }
64 |       const list = [this.columns.reduce((pv, cv) => {
65 |         pv[cv.id] = cv.label;
66 |         return pv;
67 |       }, {})];
68 |       return list;
69 |     }
70 |   },
71 |   data () {
72 |     return {};
73 |   },
74 |   mounted () {
75 |     this.init();
76 |   },
77 |   methods: {
78 |     async init () {
79 |       // 检测一下是否在编辑状态
80 |       const preview = localStorage.getItem('preview')
81 |       if (!preview) return;
82 | 
83 |       if (!this.actions) return;
84 |       const initAction = this.actions.find(item => item.event === 'init');
85 | 
86 |       if (initAction) {
87 |         await this.$actions(initAction, {});
88 |       }
89 |     }
90 |   }
91 | }
92 | </script>
93 | <style lang="scss" scoped>
94 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lowcode",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "types": "./types",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint",
10 |     "commit": "git cz"
11 |   },
12 |   "dependencies": {
13 |     "@types/lodash": "^4.14.163",
14 |     "@types/prettier": "^2.1.5",
15 |     "axios": "^0.21.1",
16 |     "core-js": "^3.6.5",
17 |     "element-ui": "^2.13.2",
18 |     "ladash": "^1.2.0",
19 |     "lodash": "^4.17.20",
20 |     "lowdb": "^1.0.0",
21 |     "prettier": "^2.1.2",
22 |     "stateshot": "^1.3.3",
23 |     "tinykeys": "^1.1.1",
24 |     "v-clipboard": "^2.2.3",
25 |     "vue": "^2.6.11",
26 |     "vue-class-component": "^7.2.3",
27 |     "vue-property-decorator": "^8.4.2",
28 |     "vue-router": "^3.4.9",
29 |     "vuedraggable": "^2.24.2",
30 |     "vuex": "^3.4.0",
31 |     "vuex-class": "^0.3.2"
32 |   },
33 |   "devDependencies": {
34 |     "@types/lowdb": "^1.0.9",
35 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
36 |     "@typescript-eslint/parser": "^2.33.0",
37 |     "@vue/cli-plugin-babel": "~4.5.0",
38 |     "@vue/cli-plugin-eslint": "~4.5.0",
39 |     "@vue/cli-plugin-typescript": "^4.5.4",
40 |     "@vue/cli-plugin-vuex": "^4.5.7",
41 |     "@vue/cli-service": "~4.5.0",
42 |     "@vue/eslint-config-typescript": "^5.0.2",
43 |     "babel-eslint": "^10.1.0",
44 |     "eslint": "^6.7.2",
45 |     "eslint-plugin-vue": "^6.2.2",
46 |     "git-cz": "^4.7.1",
47 |     "mocker-api": "^2.8.3",
48 |     "mockjs": "^1.1.0",
49 |     "sass": "^1.26.10",
50 |     "sass-loader": "^10.0.1",
51 |     "typescript": "~3.9.3",
52 |     "vue-template-compiler": "^2.6.11",
53 |     "vuex-module-decorators": "^1.0.1"
54 |   },
55 |   "eslintConfig": {
56 |     "root": true,
57 |     "env": {
58 |       "node": true
59 |     },
60 |     "extends": [
61 |       "plugin:vue/essential",
62 |       "eslint:recommended",
63 |       "@vue/typescript"
64 |     ],
65 |     "parserOptions": {
66 |       "parser": "@typescript-eslint/parser"
67 |     },
68 |     "rules": {
69 |       "no-unused-vars": "off"
70 |     }
71 |   },
72 |   "browserslist": [
73 |     "> 1%",
74 |     "last 2 versions",
75 |     "not dead"
76 |   ],
77 |   "config": {
78 |     "commitizen": {
79 |       "path": "./node_modules/git-cz"
80 |     }
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/src/components/options/Slider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-form-item>
 11 |         <el-alert
 12 |           title="无属性"
 13 |           type="info"
 14 |           effect="light"
 15 |           :closable="false"
 16 |           center
 17 |         ></el-alert>
 18 |       </el-form-item>
 19 | 
 20 |       <el-form-item>
 21 |         <div class="formAction">
 22 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 23 |           <el-button @click="handleClose">取消</el-button>
 24 |         </div>
 25 |       </el-form-item>
 26 | 
 27 |       <el-form-item>
 28 |         <div class="formAction">
 29 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 30 |         </div>
 31 |       </el-form-item>
 32 |     </el-form>
 33 |   </div>
 34 | </template>
 35 | <script lang="ts">
 36 | import { LowElement } from '@/types/Element';
 37 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 38 | import BaseOptions from './BaseOptions';
 39 | 
 40 | type LowProps = {
 41 | }
 42 | 
 43 | @Component({
 44 | 
 45 | })
 46 | export default class Slider extends BaseOptions {
 47 | 
 48 |   get props () {
 49 |     return this.element ? this.element.props : null
 50 |   }
 51 | 
 52 |   rules = {
 53 | 
 54 |   };
 55 | 
 56 |   form: LowProps = {
 57 |   }
 58 |   defaultForm: any;
 59 | 
 60 |   timer: number = 0;
 61 | 
 62 |   created () {
 63 |     this.defaultForm = Object.assign({}, this.form);
 64 |     this.handleUpdateData();
 65 |   }
 66 | 
 67 |   handleUpdateData () {
 68 |     const props = this.props;
 69 | 
 70 |     Object.keys(this.form).forEach(key => {
 71 |       const val = props ? props[key] : this.defaultForm[key];
 72 |       this.$set(this.form, key, val);
 73 |     });
 74 |   }
 75 | 
 76 |   @Watch('props')
 77 |   elementWatch (newVal: Element, oldVal: Element) {
 78 |     if (newVal === oldVal) return;
 79 |     this.handleUpdateData();
 80 |   }
 81 | 
 82 |   @Watch('form', { deep: true })
 83 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 84 |     // 将参数添加进去
 85 |     this.handleUpdate();
 86 |   }
 87 |   handleUpdate () {
 88 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
 89 |   }
 90 |   onSubmit () {
 91 | 
 92 |   }
 93 |   /**
 94 |    * 取消
 95 |    */
 96 |   handleClose () {
 97 |     this.$store.commit("page/SET_CURRENT", undefined);
 98 |   }
 99 | 
100 |   handleRemove () {
101 |     this.$store.commit("page/REMOVE_CURRENT");
102 |     this.$store.commit("page/SET_CURRENT", undefined);
103 |   }
104 | }
105 | 
106 | </script>
107 | <style lang="scss" scoped>
108 | .row-option {
109 |   padding: 10px;
110 |   .formAction {
111 |     display: flex;
112 |     justify-content: center;
113 |     align-items: center;
114 |   }
115 | }
116 | </style>


--------------------------------------------------------------------------------
/src/components/options/DatePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-form-item>
 11 |         <el-alert
 12 |           title="无属性"
 13 |           type="info"
 14 |           effect="light"
 15 |           :closable="false"
 16 |           center
 17 |         ></el-alert>
 18 |       </el-form-item>
 19 | 
 20 |       <el-form-item>
 21 |         <div class="formAction">
 22 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 23 |           <el-button @click="handleClose">取消</el-button>
 24 |         </div>
 25 |       </el-form-item>
 26 | 
 27 |       <el-form-item>
 28 |         <div class="formAction">
 29 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 30 |         </div>
 31 |       </el-form-item>
 32 |     </el-form>
 33 |   </div>
 34 | </template>
 35 | <script lang="ts">
 36 | import { LowElement } from '@/types/Element';
 37 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 38 | import BaseOptions from './BaseOptions';
 39 | 
 40 | type LowProps = {
 41 | }
 42 | 
 43 | @Component({
 44 | 
 45 | })
 46 | export default class DatePicker extends BaseOptions {
 47 | 
 48 |   get props () {
 49 |     return this.element ? this.element.props : null
 50 |   }
 51 | 
 52 |   rules = {
 53 | 
 54 |   };
 55 | 
 56 |   form: LowProps = {
 57 |   }
 58 |   defaultForm: any;
 59 | 
 60 |   timer: number = 0;
 61 | 
 62 |   created () {
 63 |     this.defaultForm = Object.assign({}, this.form);
 64 |     this.handleUpdateData();
 65 |   }
 66 | 
 67 |   handleUpdateData () {
 68 |     const props = this.props;
 69 | 
 70 |     Object.keys(this.form).forEach(key => {
 71 |       const val = props ? props[key] : this.defaultForm[key];
 72 |       this.$set(this.form, key, val);
 73 |     });
 74 |   }
 75 | 
 76 |   @Watch('props')
 77 |   elementWatch (newVal: Element, oldVal: Element) {
 78 |     if (newVal === oldVal) return;
 79 |     this.handleUpdateData();
 80 |   }
 81 | 
 82 |   @Watch('form', { deep: true })
 83 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 84 |     // 将参数添加进去
 85 |     this.handleUpdate();
 86 |   }
 87 |   handleUpdate () {
 88 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
 89 |   }
 90 |   onSubmit () {
 91 | 
 92 |   }
 93 |   /**
 94 |    * 取消
 95 |    */
 96 |   handleClose () {
 97 |     this.$store.commit("page/SET_CURRENT", undefined);
 98 |   }
 99 | 
100 |   handleRemove () {
101 |     this.$store.commit("page/REMOVE_CURRENT");
102 |     this.$store.commit("page/SET_CURRENT", undefined);
103 |   }
104 | }
105 | 
106 | </script>
107 | <style lang="scss" scoped>
108 | .row-option {
109 |   padding: 10px;
110 |   .formAction {
111 |     display: flex;
112 |     justify-content: center;
113 |     align-items: center;
114 |   }
115 | }
116 | </style>


--------------------------------------------------------------------------------
/src/components/options/TimePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-form-item>
 11 |         <el-alert
 12 |           title="无属性"
 13 |           type="info"
 14 |           effect="light"
 15 |           :closable="false"
 16 |           center
 17 |         ></el-alert>
 18 |       </el-form-item>
 19 | 
 20 |       <el-form-item>
 21 |         <div class="formAction">
 22 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 23 |           <el-button @click="handleClose">取消</el-button>
 24 |         </div>
 25 |       </el-form-item>
 26 | 
 27 |       <el-form-item>
 28 |         <div class="formAction">
 29 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 30 |         </div>
 31 |       </el-form-item>
 32 |     </el-form>
 33 |   </div>
 34 | </template>
 35 | <script lang="ts">
 36 | import { LowElement } from '@/types/Element';
 37 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 38 | import BaseOptions from './BaseOptions';
 39 | 
 40 | type LowProps = {
 41 | }
 42 | 
 43 | @Component({
 44 | 
 45 | })
 46 | export default class TimePicker extends BaseOptions {
 47 | 
 48 |   get props () {
 49 |     return this.element ? this.element.props : null
 50 |   }
 51 | 
 52 |   rules = {
 53 | 
 54 |   };
 55 | 
 56 |   form: LowProps = {
 57 |   }
 58 |   defaultForm: any;
 59 | 
 60 |   timer: number = 0;
 61 | 
 62 |   created () {
 63 |     this.defaultForm = Object.assign({}, this.form);
 64 |     this.handleUpdateData();
 65 |   }
 66 | 
 67 |   handleUpdateData () {
 68 |     const props = this.props;
 69 | 
 70 |     Object.keys(this.form).forEach(key => {
 71 |       const val = props ? props[key] : this.defaultForm[key];
 72 |       this.$set(this.form, key, val);
 73 |     });
 74 |   }
 75 | 
 76 |   @Watch('props')
 77 |   elementWatch (newVal: Element, oldVal: Element) {
 78 |     if (newVal === oldVal) return;
 79 |     this.handleUpdateData();
 80 |   }
 81 | 
 82 |   @Watch('form', { deep: true })
 83 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 84 |     // 将参数添加进去
 85 |     this.handleUpdate();
 86 |   }
 87 |   handleUpdate () {
 88 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
 89 |   }
 90 |   onSubmit () {
 91 | 
 92 |   }
 93 |   /**
 94 |    * 取消
 95 |    */
 96 |   handleClose () {
 97 |     this.$store.commit("page/SET_CURRENT", undefined);
 98 |   }
 99 | 
100 |   handleRemove () {
101 |     this.$store.commit("page/REMOVE_CURRENT");
102 |     this.$store.commit("page/SET_CURRENT", undefined);
103 |   }
104 | }
105 | 
106 | </script>
107 | <style lang="scss" scoped>
108 | .row-option {
109 |   padding: 10px;
110 |   .formAction {
111 |     display: flex;
112 |     justify-content: center;
113 |     align-items: center;
114 |   }
115 | }
116 | </style>


--------------------------------------------------------------------------------
/src/components/options/Switch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-form-item>
 11 |         <el-alert
 12 |           title="无属性"
 13 |           type="info"
 14 |           effect="light"
 15 |           :closable="false"
 16 |           center
 17 |         ></el-alert>
 18 |       </el-form-item>
 19 | 
 20 |       <el-form-item>
 21 |         <div class="formAction">
 22 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 23 |           <el-button @click="handleClose">取消</el-button>
 24 |         </div>
 25 |       </el-form-item>
 26 | 
 27 |       <el-form-item>
 28 |         <div class="formAction">
 29 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 30 |         </div>
 31 |       </el-form-item>
 32 |     </el-form>
 33 |   </div>
 34 | </template>
 35 | <script lang="ts">
 36 | import { LowElement } from '@/types/Element';
 37 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 38 | import BaseOptions from './BaseOptions';
 39 | 
 40 | type LowProps = {
 41 | }
 42 | 
 43 | @Component({
 44 |   name:'bc-switch-option'
 45 | })
 46 | export default class Switch extends BaseOptions {
 47 | 
 48 |   get props () {
 49 |     return this.element ? this.element.props : null
 50 |   }
 51 | 
 52 |   rules = {
 53 | 
 54 |   };
 55 | 
 56 |   form: LowProps = {
 57 |   }
 58 |   defaultForm: any;
 59 | 
 60 |   timer: number = 0;
 61 | 
 62 |   created () {
 63 |     this.defaultForm = Object.assign({}, this.form);
 64 |     this.handleUpdateData();
 65 |   }
 66 | 
 67 |   handleUpdateData () {
 68 |     const props = this.props;
 69 | 
 70 |     Object.keys(this.form).forEach(key => {
 71 |       const val = props ? props[key] : this.defaultForm[key];
 72 |       this.$set(this.form, key, val);
 73 |     });
 74 |   }
 75 | 
 76 |   @Watch('props')
 77 |   elementWatch (newVal: Element, oldVal: Element) {
 78 |     if (newVal === oldVal) return;
 79 |     this.handleUpdateData();
 80 |   }
 81 | 
 82 |   @Watch('form', { deep: true })
 83 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 84 |     // 将参数添加进去
 85 |     this.handleUpdate();
 86 |   }
 87 |   handleUpdate () {
 88 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
 89 |   }
 90 |   onSubmit () {
 91 | 
 92 |   }
 93 |   /**
 94 |    * 取消
 95 |    */
 96 |   handleClose () {
 97 |     this.$store.commit("page/SET_CURRENT", undefined);
 98 |   }
 99 | 
100 |   handleRemove () {
101 |     this.$store.commit("page/REMOVE_CURRENT");
102 |     this.$store.commit("page/SET_CURRENT", undefined);
103 |   }
104 | }
105 | 
106 | </script>
107 | <style lang="scss" scoped>
108 | .row-option {
109 |   padding: 10px;
110 |   .formAction {
111 |     display: flex;
112 |     justify-content: center;
113 |     align-items: center;
114 |   }
115 | }
116 | </style>


--------------------------------------------------------------------------------
/src/mixins/index.ts:
--------------------------------------------------------------------------------
  1 | type MoveEventType = {
  2 |   dragged: HTMLElement;
  3 |   to: HTMLElement;
  4 |   draggedContext: any;
  5 |   relatedContext: any;
  6 | }
  7 | // TODO: 这里应该放在一个单独的配置中
  8 | // 可容纳 or 不可容纳
  9 | const putRules: any = {
 10 |   'row': {
 11 |     allow: ['col'],  // 二选一 ？
 12 |     notallow: [],  // 二选一 ？
 13 |   },
 14 | 
 15 |   // 'col': {
 16 |   //   allow: [],  // 二选一 ？
 17 |   //   notallow: ['row']  // 二选一 ？
 18 |   // }
 19 | };
 20 | // 可归属 or 不可归属
 21 | const pullRules: any = {
 22 |   'form-item': {
 23 |     // 父元素
 24 |     allow: [],
 25 |     notallow: [],
 26 |     // 爷父 元素
 27 |     parent: ['form'],
 28 |   },
 29 |   'col': {
 30 |     // 子元素
 31 |     allow: ['row'],
 32 |     notallow: []
 33 |   },
 34 | };
 35 | /**
 36 |  * 验证元素的拖动状态 
 37 |  * @param to 要拖动到的容器标签
 38 |  * @param from 来源的元素标签
 39 |  */
 40 | function hasElementDragState (to: string, from: string, toPath: string, fromPath: string) {
 41 | 
 42 |   const putHas = [true, false, true];
 43 |   const pullHas = [true, false, true];
 44 | 
 45 |   // TODO: 这里代码需要重写一下了，逻辑混乱
 46 |   const putNode = putRules[to];
 47 |   const pullNode = pullRules[from];
 48 | 
 49 |   if (putNode) {
 50 |     putHas[0] = putNode.allow.length ? putNode.allow.includes(from) : true;
 51 |     putHas[1] = putNode.notallow.length ? putNode.notallow.includes(from) : false;
 52 |   }
 53 | 
 54 |   if (pullNode) {
 55 |     pullHas[0] = pullNode.allow.length ? pullNode.allow.includes(to) : true;
 56 |     pullHas[1] = pullNode.notallow.length ? pullNode.notallow.includes(to) : false;
 57 | 
 58 |     if (Array.isArray(pullNode.parent) && pullNode.parent.length > 0) {
 59 |       const toPathArr = toPath.split('_');
 60 |       const list = pullNode.parent.filter((item: string) => {
 61 |         return toPathArr.includes(item);
 62 |       });
 63 | 
 64 |       pullHas[2] = list.length === pullNode.parent.length;
 65 | 
 66 |     }
 67 | 
 68 |   }
 69 | 
 70 |   return putHas[0] && pullHas[0] && !putHas[1] && !pullHas[1] && pullHas[2] && putHas[2];
 71 | }
 72 | 
 73 | 
 74 | export default {
 75 |   methods: {
 76 |     checkMove (e: MoveEventType) {
 77 |       const { dragged, to } = e;
 78 | 
 79 |       const fromContextElement = e.draggedContext.element; // 当前拖拽的元素
 80 |       const toContextElement = e.relatedContext.element; // 被替换 or 换位置的元素
 81 | 
 82 |       if (toContextElement) {
 83 |         const { type: toType, clone: toClone } = toContextElement;
 84 |         const { type: fromType } = fromContextElement;
 85 |         // 类型不同
 86 | 
 87 |         if (toType !== fromType) return false;
 88 |         if (toClone) return false;
 89 |       }
 90 |       // 验证元素是否可以拖动到当前元素
 91 |       const toTag = to.dataset.tag || '';
 92 |       const fromTag = dragged.dataset.tag || '';
 93 |       const toPath = to.dataset.path || '';
 94 |       const fromPath = dragged.dataset.path || '';
 95 | 
 96 |       const has = hasElementDragState(toTag, fromTag, toPath, fromPath);
 97 |       return has;
 98 |     }
 99 |   },
100 | }


--------------------------------------------------------------------------------
/src/components/options/Col.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="栅格占据的列数">
 11 |         <el-input-number
 12 |           v-model="form.span"
 13 |           :min="0"
 14 |           placeholder="栅格占据的列数"
 15 |           controls-position="right"
 16 |         ></el-input-number>
 17 |       </el-form-item>
 18 | 
 19 |       <el-form-item label="栅格左侧的间隔格数">
 20 |         <el-input-number
 21 |           v-model="form.offset"
 22 |           :min="0"
 23 |           placeholder="栅格左侧的间隔格数"
 24 |           controls-position="right"
 25 |         ></el-input-number>
 26 |       </el-form-item>
 27 |       <el-form-item>
 28 |         <div class="formAction">
 29 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 30 |           <el-button @click="handleClose">取消</el-button>
 31 |         </div>
 32 |       </el-form-item>
 33 |       <el-form-item>
 34 |         <div class="formAction">
 35 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 36 |         </div>
 37 |       </el-form-item>
 38 |     </el-form>
 39 |   </div>
 40 | </template>
 41 | <script lang="ts">
 42 | import { LowElement } from '@/types/Element';
 43 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 44 | import BaseOptions from './BaseOptions';
 45 | 
 46 | type LowProps = {
 47 |   span: number,
 48 |   offset: number
 49 | }
 50 | 
 51 | @Component({
 52 | 
 53 | })
 54 | export default class Col extends BaseOptions {
 55 | 
 56 |   get props () {
 57 |     return this.element ? this.element.props : null
 58 |   }
 59 | 
 60 |   rules = {
 61 | 
 62 |   };
 63 | 
 64 |   form: LowProps = {
 65 |     span: this.props ? this.props.span || 0 : 0,
 66 |     offset: this.props ? this.props.offset || 0 : 0,
 67 |   }
 68 | 
 69 |   timer: number = 0;
 70 | 
 71 |   @Watch('props')
 72 |   elementWatch (newVal: Element, oldVal: Element) {
 73 |     if (newVal === oldVal) return;
 74 | 
 75 |     this.form.span = this.props ? this.props.span || 0 : 0;
 76 |     this.form.offset = this.props ? this.props.offset || 0 : 0;
 77 |   }
 78 | 
 79 |   @Watch('form', { deep: true })
 80 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 81 |     // 将参数添加进去
 82 |     this.handleUpdate();
 83 |   }
 84 |   handleUpdate () {
 85 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form })
 86 |   }
 87 |   onSubmit () {
 88 | 
 89 |   }
 90 |   /**
 91 |    * 取消
 92 |    */
 93 |   handleClose () {
 94 |     this.$store.commit("page/SET_CURRENT", undefined);
 95 |   }
 96 | 
 97 |   handleRemove () {
 98 |     this.$store.commit("page/REMOVE_CURRENT");
 99 |     this.$store.commit("page/SET_CURRENT", undefined);
100 |   }
101 | }
102 | 
103 | </script>
104 | <style lang="scss" scoped>
105 | .row-option {
106 |   padding: 10px;
107 |   .formAction {
108 |     display: flex;
109 |     justify-content: center;
110 |     align-items: center;
111 |   }
112 | }
113 | </style>


--------------------------------------------------------------------------------
/src/components/options/Block.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="外边距">
 11 |         <el-input v-model="form.margin" placeholder="请输入,如10px"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="内边距">
 15 |         <el-input v-model="form.padding" placeholder="请输入,如10px"></el-input>
 16 |       </el-form-item>
 17 |       
 18 |       <el-form-item>
 19 |         <div class="formAction">
 20 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 21 |           <el-button @click="handleClose">取消</el-button>
 22 |         </div>
 23 |       </el-form-item>
 24 | 
 25 |       <el-form-item>
 26 |         <div class="formAction">
 27 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 28 |         </div>
 29 |       </el-form-item>
 30 |     </el-form>
 31 |   </div>
 32 | </template>
 33 | <script lang="ts">
 34 | import { LowElement } from '@/types/Element';
 35 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 36 | import BaseOptions from './BaseOptions';
 37 | 
 38 | type LowProps = {
 39 |   margin: string;
 40 |   padding: string;
 41 | }
 42 | 
 43 | @Component({
 44 | 
 45 | })
 46 | export default class Tag extends BaseOptions {
 47 | 
 48 |   get props () {
 49 |     return this.element ? this.element.props : null
 50 |   }
 51 | 
 52 |   rules = {
 53 | 
 54 |   };
 55 | 
 56 |   form: LowProps = {
 57 |     margin: '',
 58 |     padding: ''
 59 |   }
 60 |   defaultForm: any;
 61 | 
 62 |   timer: number = 0;
 63 | 
 64 |   created () {
 65 |     this.defaultForm = Object.assign({}, this.form);
 66 |     this.handleUpdateData();
 67 |   }
 68 | 
 69 |   handleUpdateData () {
 70 |     const props = this.props;
 71 |     Object.keys(this.form).forEach(key => {
 72 |       const val = props ? props[key] : this.defaultForm[key];
 73 |       this.$set(this.form, key, val);
 74 |     });
 75 |   }
 76 | 
 77 |   @Watch('props')
 78 |   elementWatch (newVal: Element, oldVal: Element) {
 79 |     if (newVal === oldVal) return;
 80 |     this.handleUpdateData();
 81 |   }
 82 | 
 83 |   @Watch('form', { deep: true })
 84 |   formWatch (newVal: LowProps, oldVal: LowProps) {
 85 |     // 将参数添加进去
 86 |     this.handleUpdate();
 87 |   }
 88 |   handleUpdate () {
 89 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
 90 |   }
 91 |   onSubmit () {
 92 | 
 93 |   }
 94 |   /**
 95 |    * 取消
 96 |    */
 97 |   handleClose () {
 98 |     this.$store.commit("page/SET_CURRENT", undefined);
 99 |   }
100 | 
101 |   handleRemove () {
102 |     this.$store.commit("page/REMOVE_CURRENT");
103 |     this.$store.commit("page/SET_CURRENT", undefined);
104 |   }
105 | }
106 | 
107 | </script>
108 | <style lang="scss" scoped>
109 | .row-option {
110 |   padding: 10px;
111 |   .formAction {
112 |     display: flex;
113 |     justify-content: center;
114 |     align-items: center;
115 |   }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/components/options/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="是否开启背景">
 11 |         <el-switch v-model="form.background"></el-switch>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="只有一页时是否隐藏">
 15 |         <el-switch v-model="form.hideOnSinglePage"></el-switch>
 16 |       </el-form-item>
 17 | 
 18 |       <el-form-item label="页面数量">
 19 |         <el-input-number v-model="form.pageSize" :min="0"></el-input-number>
 20 |       </el-form-item>
 21 | 
 22 |       <el-form-item label="总数量">
 23 |         <el-input-number v-model="form.total" :min="0"></el-input-number>
 24 |       </el-form-item>
 25 | 
 26 |       <el-form-item label="第N页">
 27 |         <el-input-number v-model="form.currentPage" :min="0"></el-input-number>
 28 |       </el-form-item>
 29 | 
 30 |       <el-form-item>
 31 |         <div class="formAction">
 32 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 33 |           <el-button @click="handleClose">取消</el-button>
 34 |         </div>
 35 |       </el-form-item>
 36 | 
 37 |       <el-form-item>
 38 |         <div class="formAction">
 39 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 40 |         </div>
 41 |       </el-form-item>
 42 |     </el-form>
 43 |   </div>
 44 | </template>
 45 | <script lang="ts">
 46 | import { LowElement } from '@/types/Element';
 47 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 48 | import BaseOptions from './BaseOptions';
 49 | 
 50 | type LowProps = {
 51 |   background: boolean;
 52 |   pageSize: number;
 53 |   currentPage: number;
 54 |   total: number;
 55 |   hideOnSinglePage: boolean;
 56 | }
 57 | 
 58 | @Component({
 59 | 
 60 | })
 61 | export default class Tag extends BaseOptions {
 62 | 
 63 |   get props () {
 64 |     return this.element ? this.element.props : null
 65 |   }
 66 | 
 67 |   rules = {
 68 | 
 69 |   };
 70 | 
 71 |   form: LowProps = {
 72 |     background: false,
 73 |     pageSize: 0,
 74 |     currentPage: 0,
 75 |     total: 0,
 76 |     hideOnSinglePage: false,
 77 |   }
 78 |   defaultForm: any;
 79 | 
 80 |   timer: number = 0;
 81 | 
 82 |   created () {
 83 |     this.defaultForm = Object.assign({}, this.form);
 84 |     this.handleUpdateData();
 85 |   }
 86 | 
 87 |   handleUpdateData () {
 88 |     const props = this.props;
 89 | 
 90 |     Object.keys(this.form).forEach(key => {
 91 |       const val = props ? props[key] : this.defaultForm[key];
 92 |       this.$set(this.form, key, val);
 93 |     });
 94 |   }
 95 | 
 96 |   @Watch('props')
 97 |   elementWatch (newVal: Element, oldVal: Element) {
 98 |     if (newVal === oldVal) return;
 99 |     this.handleUpdateData();
100 |   }
101 | 
102 |   @Watch('form', { deep: true })
103 |   formWatch (newVal: LowProps, oldVal: LowProps) {
104 |     // 将参数添加进去
105 |     this.handleUpdate();
106 |   }
107 |   handleUpdate () {
108 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
109 |   }
110 |   onSubmit () {
111 | 
112 |   }
113 |   /**
114 |    * 取消
115 |    */
116 |   handleClose () {
117 |     this.$store.commit("page/SET_CURRENT", undefined);
118 |   }
119 | 
120 |   handleRemove () {
121 |     this.$store.commit("page/REMOVE_CURRENT");
122 |     this.$store.commit("page/SET_CURRENT", undefined);
123 |   }
124 | }
125 | 
126 | </script>
127 | <style lang="scss" scoped>
128 | .row-option {
129 |   padding: 10px;
130 |   .formAction {
131 |     display: flex;
132 |     justify-content: center;
133 |     align-items: center;
134 |   }
135 | }
136 | </style>


--------------------------------------------------------------------------------
/src/components/options/FormItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="标签文本">
 11 |         <el-input
 12 |           v-model="form.label"
 13 |           placeholder="请输入"
 14 |         ></el-input>
 15 |       </el-form-item>
 16 | 
 17 |       <el-form-item label="尺寸">
 18 |         <el-select v-model="form.size">
 19 |           <el-option label="默认" value=""> </el-option>
 20 |           <el-option label="中等" value="medium"> </el-option>
 21 |           <el-option label="小" value="small"> </el-option>
 22 |           <el-option label="迷你" value="mini"> </el-option>
 23 |         </el-select>
 24 |       </el-form-item>
 25 | 
 26 |       <el-form-item label="表单域标签的宽度">
 27 |         <el-input
 28 |           v-model="form.labelWidth"
 29 |           placeholder="请输入，如50px"
 30 |         ></el-input>
 31 |       </el-form-item>
 32 | 
 33 |       <el-form-item>
 34 |         <div class="formAction">
 35 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 36 |           <el-button @click="handleClose">取消</el-button>
 37 |         </div>
 38 |       </el-form-item>
 39 |       <el-form-item>
 40 |         <div class="formAction">
 41 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 42 |         </div>
 43 |       </el-form-item>
 44 |     </el-form>
 45 |   </div>
 46 | </template>
 47 | <script lang="ts">
 48 | import { LowElement } from '@/types/Element';
 49 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 50 | import BaseOptions from './BaseOptions';
 51 | 
 52 | type LowProps = {
 53 |   size: "medium" | "small" | "mini" | '';
 54 | 
 55 |   labelWidth: string;
 56 | 
 57 |   label: string;
 58 | }
 59 | 
 60 | @Component({
 61 | 
 62 | })
 63 | export default class FormItem extends BaseOptions {
 64 | 
 65 |   get props () {
 66 |     return this.element ? this.element.props : null
 67 |   }
 68 | 
 69 |   rules = {
 70 | 
 71 |   };
 72 | 
 73 |   form: LowProps = {
 74 |     size: '',
 75 |     labelWidth: '',
 76 |     label: '',
 77 |   }
 78 |   defaultForm: any;
 79 | 
 80 |   timer: number = 0;
 81 | 
 82 |   created () {
 83 |     this.defaultForm = Object.assign({}, this.form);
 84 |     this.handleUpdateData();
 85 |   }
 86 | 
 87 |   handleUpdateData () {
 88 |     const props = this.props;
 89 |     const form: any = {};
 90 |     Object.keys(this.form).forEach(key => {
 91 |       const val = props ? props[key] : this.defaultForm[key];
 92 |       this.$set(this.form, key, val);
 93 |       form[key] = val;
 94 |     });
 95 |     // this.form = form;
 96 |   }
 97 | 
 98 |   @Watch('props')
 99 |   elementWatch (newVal: Element, oldVal: Element) {
100 |     if (newVal === oldVal) return;
101 |     this.handleUpdateData();
102 |   }
103 | 
104 |   @Watch('form', { deep: true })
105 |   formWatch (newVal: LowProps, oldVal: LowProps) {
106 |     // 将参数添加进去
107 |     this.handleUpdate();
108 |   }
109 |   handleUpdate () {
110 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
111 |   }
112 |   onSubmit () {
113 | 
114 |   }
115 |   /**
116 |    * 取消
117 |    */
118 |   handleClose () {
119 |     this.$store.commit("page/SET_CURRENT", undefined);
120 |   }
121 | 
122 |   handleRemove () {
123 |     this.$store.commit("page/REMOVE_CURRENT");
124 |     this.$store.commit("page/SET_CURRENT", undefined);
125 |   }
126 | }
127 | 
128 | </script>
129 | <style lang="scss" scoped>
130 | .row-option {
131 |   padding: 10px;
132 |   .formAction {
133 |     display: flex;
134 |     justify-content: center;
135 |     align-items: center;
136 |   }
137 | }
138 | </style>


--------------------------------------------------------------------------------
/src/components/options/Table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="接口数据">
 11 |         <el-input
 12 |           type="textarea"
 13 |           :rows="10"
 14 |           v-model="apiJSONData"
 15 |           placeholder="接口对象"
 16 |         ></el-input>
 17 |       </el-form-item>
 18 | 
 19 |       <el-form-item>
 20 |         <div class="formAction">
 21 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 22 |           <el-button @click="handleClose">取消</el-button>
 23 |         </div>
 24 |       </el-form-item>
 25 |       <el-form-item>
 26 |         <div class="formAction">
 27 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 28 |         </div>
 29 |       </el-form-item>
 30 |     </el-form>
 31 |   </div>
 32 | </template>
 33 | <script lang="ts">
 34 | import { LowElement } from '@/types/Element';
 35 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 36 | import BaseOptions from './BaseOptions';
 37 | 
 38 | export type LowTableColumn = {
 39 |   id: string | number;
 40 |   label: string;
 41 |   width?: string;
 42 | }
 43 | 
 44 | type LowProps = {
 45 |   columns: LowTableColumn[]
 46 | }
 47 | 
 48 | @Component({
 49 | 
 50 | })
 51 | export default class Table extends BaseOptions {
 52 | 
 53 |   get props () {
 54 |     return this.element ? this.element.props : null
 55 |   }
 56 | 
 57 |   apiJSONData: string = '';
 58 | 
 59 |   rules = {
 60 | 
 61 |   };
 62 | 
 63 |   form: LowProps = {
 64 |     columns: []
 65 |   }
 66 |   defaultForm: any;
 67 | 
 68 |   timer: number = 0;
 69 | 
 70 |   created () {
 71 |     this.defaultForm = Object.assign({}, this.form);
 72 |     this.handleUpdateData();
 73 |   }
 74 | 
 75 |   handleUpdateData () {
 76 |     const props = this.props;
 77 |     const form: any = {};
 78 |     Object.keys(this.form).forEach(key => {
 79 |       const val = props ? props[key] : this.defaultForm[key];
 80 |       this.$set(this.form, key, val);
 81 |       form[key] = val;
 82 |     });
 83 | 
 84 |     this.apiJSONData = JSON.stringify(this.form.columns.reduce<{ [key: string]: string }>((pv, cv) => {
 85 |       pv[cv.id] = cv.label;
 86 |       return pv;
 87 |     }, {}), null, 2);
 88 |   }
 89 | 
 90 |   // @Watch('apiJSONData')
 91 |   // apiJSONDataWatch (newVal: string, oldVal: string) {
 92 | 
 93 |   // }
 94 | 
 95 |   @Watch('props')
 96 |   elementWatch (newVal: Element, oldVal: Element) {
 97 |     if (newVal === oldVal) return;
 98 |     this.handleUpdateData();
 99 |   }
100 | 
101 |   @Watch('form', { deep: true })
102 |   formWatch (newVal: LowProps, oldVal: LowProps) {
103 |     // 将参数添加进去
104 |     this.handleUpdate();
105 |   }
106 |   handleUpdate () {
107 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
108 |   }
109 |   onSubmit () {
110 | 
111 |     try {
112 |       const newObj = JSON.parse(this.apiJSONData);
113 | 
114 |       const columns: LowTableColumn[] = Object.keys(newObj).map(key => {
115 |         return {
116 |           id: key,
117 |           label: newObj[key]
118 |         }
119 |       });
120 |       this.form.columns = columns;
121 |       this.$notify.success("保存成功");
122 |     } catch (error) {
123 |       this.$message.error(error.message);
124 |     }
125 | 
126 |   }
127 |   /**
128 |    * 取消
129 |    */
130 |   handleClose () {
131 |     this.$store.commit("page/SET_CURRENT", undefined);
132 |   }
133 | 
134 |   handleRemove () {
135 |     this.$store.commit("page/REMOVE_CURRENT");
136 |     this.$store.commit("page/SET_CURRENT", undefined);
137 |   }
138 | }
139 | 
140 | </script>
141 | <style lang="scss" scoped>
142 | .row-option {
143 |   padding: 10px;
144 |   .formAction {
145 |     display: flex;
146 |     justify-content: center;
147 |     align-items: center;
148 |   }
149 | }
150 | </style>


--------------------------------------------------------------------------------
/src/components/options/Radio.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-row :gutter="2" v-for="(item, index) in form.options" :key="index">
 11 |         <el-col :span="9" :offset="0">
 12 |           <el-form-item label="标签">
 13 |             <el-input v-model="item.label"> </el-input>
 14 |           </el-form-item>
 15 |         </el-col>
 16 |         <el-col :span="8" :offset="0">
 17 |           <el-form-item label="值">
 18 |             <el-input v-model="item.value"> </el-input>
 19 |           </el-form-item>
 20 |         </el-col>
 21 |         <el-col :span="5" :offset="0">
 22 |           <el-form-item label=" 操作 ">
 23 |             <el-button
 24 |               type="text"
 25 |               size="medium"
 26 |               @click="form.options.splice(index, 1)"
 27 |               icon="el-icon-remove-outline"
 28 |             ></el-button>
 29 |             <el-button
 30 |               type="text"
 31 |               size="medium"
 32 |               icon="el-icon-circle-plus-outline"
 33 |               v-if="index + 1 == form.options.length"
 34 |               @click="
 35 |                 form.options.push({
 36 |                   label: '备选项' + String(form.options.length * index),
 37 |                   value: String(form.options.length * index),
 38 |                 })
 39 |               "
 40 |             ></el-button>
 41 |           </el-form-item>
 42 |         </el-col>
 43 |       </el-row>
 44 | 
 45 |       <el-form-item>
 46 |         <div class="formAction">
 47 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 48 |           <el-button @click="handleClose">取消</el-button>
 49 |         </div>
 50 |       </el-form-item>
 51 | 
 52 |       <el-form-item>
 53 |         <div class="formAction">
 54 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 55 |         </div>
 56 |       </el-form-item>
 57 |     </el-form>
 58 |   </div>
 59 | </template>
 60 | <script lang="ts">
 61 | import { LowElement } from '@/types/Element';
 62 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 63 | import BaseOptions from './BaseOptions';
 64 | 
 65 | type LowProps = {
 66 |   options: any[]
 67 | }
 68 | 
 69 | @Component({
 70 | 
 71 | })
 72 | export default class Radio extends BaseOptions {
 73 | 
 74 |   get props () {
 75 |     return this.element ? this.element.props : null
 76 |   }
 77 | 
 78 |   rules = {
 79 | 
 80 |   };
 81 | 
 82 |   form: LowProps = {
 83 |     options: [],
 84 |   }
 85 |   defaultForm: any;
 86 | 
 87 |   timer: number = 0;
 88 | 
 89 |   created () {
 90 |     this.defaultForm = Object.assign({}, this.form);
 91 |     this.handleUpdateData();
 92 |   }
 93 | 
 94 |   handleUpdateData () {
 95 |     const props = this.props;
 96 | 
 97 |     Object.keys(this.form).forEach(key => {
 98 |       const val = props ? props[key] : this.defaultForm[key];
 99 |       this.$set(this.form, key, val);
100 |     });
101 |   }
102 | 
103 |   @Watch('props')
104 |   elementWatch (newVal: Element, oldVal: Element) {
105 |     if (newVal === oldVal) return;
106 |     this.handleUpdateData();
107 |   }
108 | 
109 |   @Watch('form', { deep: true })
110 |   formWatch (newVal: LowProps, oldVal: LowProps) {
111 |     // 将参数添加进去
112 |     this.handleUpdate();
113 |   }
114 |   handleUpdate () {
115 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
116 |   }
117 |   onSubmit () {
118 | 
119 |   }
120 |   /**
121 |    * 取消
122 |    */
123 |   handleClose () {
124 |     this.$store.commit("page/SET_CURRENT", undefined);
125 |   }
126 | 
127 |   handleRemove () {
128 |     this.$store.commit("page/REMOVE_CURRENT");
129 |     this.$store.commit("page/SET_CURRENT", undefined);
130 |   }
131 | }
132 | 
133 | </script>
134 | <style lang="scss" scoped>
135 | .row-option {
136 |   padding: 10px;
137 |   .formAction {
138 |     display: flex;
139 |     justify-content: center;
140 |     align-items: center;
141 |   }
142 | }
143 | </style>


--------------------------------------------------------------------------------
/src/components/options/Select.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-row :gutter="2" v-for="(item, index) in form.options" :key="index">
 11 |         <el-col :span="9" :offset="0">
 12 |           <el-form-item label="标签">
 13 |             <el-input v-model="item.label"> </el-input>
 14 |           </el-form-item>
 15 |         </el-col>
 16 |         <el-col :span="8" :offset="0">
 17 |           <el-form-item label="值">
 18 |             <el-input v-model="item.value"> </el-input>
 19 |           </el-form-item>
 20 |         </el-col>
 21 |         <el-col :span="5" :offset="0">
 22 |           <el-form-item label=" 操作 ">
 23 |             <el-button
 24 |               type="text"
 25 |               size="medium"
 26 |               @click="form.options.splice(index, 1)"
 27 |               icon="el-icon-remove-outline"
 28 |             ></el-button>
 29 |             <el-button
 30 |               type="text"
 31 |               size="medium"
 32 |               icon="el-icon-circle-plus-outline"
 33 |               v-if="index + 1 == form.options.length"
 34 |               @click="
 35 |                 form.options.push({
 36 |                   label: '备选项' + String(form.options.length * index),
 37 |                   value: String(form.options.length * index),
 38 |                 })
 39 |               "
 40 |             ></el-button>
 41 |           </el-form-item>
 42 |         </el-col>
 43 |       </el-row>
 44 | 
 45 |       <el-form-item>
 46 |         <div class="formAction">
 47 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 48 |           <el-button @click="handleClose">取消</el-button>
 49 |         </div>
 50 |       </el-form-item>
 51 | 
 52 |       <el-form-item>
 53 |         <div class="formAction">
 54 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 55 |         </div>
 56 |       </el-form-item>
 57 |     </el-form>
 58 |   </div>
 59 | </template>
 60 | <script lang="ts">
 61 | import { LowElement } from '@/types/Element';
 62 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 63 | import BaseOptions from './BaseOptions';
 64 | 
 65 | type LowProps = {
 66 |   options: any[]
 67 | }
 68 | 
 69 | @Component({
 70 | 
 71 | })
 72 | export default class Select extends BaseOptions {
 73 | 
 74 |   get props () {
 75 |     return this.element ? this.element.props : null
 76 |   }
 77 | 
 78 |   rules = {
 79 | 
 80 |   };
 81 | 
 82 |   form: LowProps = {
 83 |     options: [],
 84 |   }
 85 |   defaultForm: any;
 86 | 
 87 |   timer: number = 0;
 88 | 
 89 |   created () {
 90 |     this.defaultForm = Object.assign({}, this.form);
 91 |     this.handleUpdateData();
 92 |   }
 93 | 
 94 |   handleUpdateData () {
 95 |     const props = this.props;
 96 | 
 97 |     Object.keys(this.form).forEach(key => {
 98 |       const val = props ? props[key] : this.defaultForm[key];
 99 |       this.$set(this.form, key, val);
100 |     });
101 |   }
102 | 
103 |   @Watch('props')
104 |   elementWatch (newVal: Element, oldVal: Element) {
105 |     if (newVal === oldVal) return;
106 |     this.handleUpdateData();
107 |   }
108 | 
109 |   @Watch('form', { deep: true })
110 |   formWatch (newVal: LowProps, oldVal: LowProps) {
111 |     // 将参数添加进去
112 |     this.handleUpdate();
113 |   }
114 |   handleUpdate () {
115 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
116 |   }
117 |   onSubmit () {
118 | 
119 |   }
120 |   /**
121 |    * 取消
122 |    */
123 |   handleClose () {
124 |     this.$store.commit("page/SET_CURRENT", undefined);
125 |   }
126 | 
127 |   handleRemove () {
128 |     this.$store.commit("page/REMOVE_CURRENT");
129 |     this.$store.commit("page/SET_CURRENT", undefined);
130 |   }
131 | }
132 | 
133 | </script>
134 | <style lang="scss" scoped>
135 | .row-option {
136 |   padding: 10px;
137 |   .formAction {
138 |     display: flex;
139 |     justify-content: center;
140 |     align-items: center;
141 |   }
142 | }
143 | </style>


--------------------------------------------------------------------------------
/src/components/options/Checkbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       size="mini"
  8 |       label-position="top"
  9 |     >
 10 |       <el-row :gutter="2" v-for="(item, index) in form.options" :key="index">
 11 |         <el-col :span="9" :offset="0">
 12 |           <el-form-item label="标签">
 13 |             <el-input v-model="item.label"> </el-input>
 14 |           </el-form-item>
 15 |         </el-col>
 16 |         <el-col :span="8" :offset="0">
 17 |           <el-form-item label="值">
 18 |             <el-input v-model="item.value"> </el-input>
 19 |           </el-form-item>
 20 |         </el-col>
 21 |         <el-col :span="5" :offset="0">
 22 |           <el-form-item label=" 操作 ">
 23 |             <el-button
 24 |               type="text"
 25 |               size="medium"
 26 |               @click="form.options.splice(index, 1)"
 27 |               icon="el-icon-remove-outline"
 28 |             ></el-button>
 29 |             <el-button
 30 |               type="text"
 31 |               size="medium"
 32 |               icon="el-icon-circle-plus-outline"
 33 |               v-if="index + 1 == form.options.length"
 34 |               @click="
 35 |                 form.options.push({
 36 |                   label: '备选项' + String(form.options.length * index),
 37 |                   value: String(form.options.length * index),
 38 |                 })
 39 |               "
 40 |             ></el-button>
 41 |           </el-form-item>
 42 |         </el-col>
 43 |       </el-row>
 44 | 
 45 |       <el-form-item>
 46 |         <div class="formAction">
 47 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 48 |           <el-button @click="handleClose">取消</el-button>
 49 |         </div>
 50 |       </el-form-item>
 51 | 
 52 |       <el-form-item>
 53 |         <div class="formAction">
 54 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 55 |         </div>
 56 |       </el-form-item>
 57 |     </el-form>
 58 |   </div>
 59 | </template>
 60 | <script lang="ts">
 61 | import { LowElement } from '@/types/Element';
 62 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 63 | import BaseOptions from './BaseOptions';
 64 | 
 65 | type LowProps = {
 66 |   options: any[]
 67 | }
 68 | 
 69 | @Component({
 70 | 
 71 | })
 72 | export default class Checkbox extends BaseOptions {
 73 | 
 74 |   get props () {
 75 |     return this.element ? this.element.props : null
 76 |   }
 77 | 
 78 |   rules = {
 79 | 
 80 |   };
 81 | 
 82 |   form: LowProps = {
 83 |     options: [],
 84 |   }
 85 |   defaultForm: any;
 86 | 
 87 |   timer: number = 0;
 88 | 
 89 |   created () {
 90 |     this.defaultForm = Object.assign({}, this.form);
 91 |     this.handleUpdateData();
 92 |   }
 93 | 
 94 |   handleUpdateData () {
 95 |     const props = this.props;
 96 | 
 97 |     Object.keys(this.form).forEach(key => {
 98 |       const val = props ? props[key] : this.defaultForm[key];
 99 |       this.$set(this.form, key, val);
100 |     });
101 |   }
102 | 
103 |   @Watch('props')
104 |   elementWatch (newVal: Element, oldVal: Element) {
105 |     if (newVal === oldVal) return;
106 |     this.handleUpdateData();
107 |   }
108 | 
109 |   @Watch('form', { deep: true })
110 |   formWatch (newVal: LowProps, oldVal: LowProps) {
111 |     // 将参数添加进去
112 |     this.handleUpdate();
113 |   }
114 |   handleUpdate () {
115 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
116 |   }
117 |   onSubmit () {
118 | 
119 |   }
120 |   /**
121 |    * 取消
122 |    */
123 |   handleClose () {
124 |     this.$store.commit("page/SET_CURRENT", undefined);
125 |   }
126 | 
127 |   handleRemove () {
128 |     this.$store.commit("page/REMOVE_CURRENT");
129 |     this.$store.commit("page/SET_CURRENT", undefined);
130 |   }
131 | }
132 | 
133 | </script>
134 | <style lang="scss" scoped>
135 | .row-option {
136 |   padding: 10px;
137 |   .formAction {
138 |     display: flex;
139 |     justify-content: center;
140 |     align-items: center;
141 |   }
142 | }
143 | </style>


--------------------------------------------------------------------------------
/src/components/options/Form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="尺寸">
 11 |         <el-select v-model="form.size">
 12 |           <el-option label="默认" value=""> </el-option>
 13 |           <el-option label="中等" value="medium"> </el-option>
 14 |           <el-option label="小" value="small"> </el-option>
 15 |           <el-option label="迷你" value="mini"> </el-option>
 16 |         </el-select>
 17 |       </el-form-item>
 18 | 
 19 |       <el-form-item label="表单域标签的位置">
 20 |         <el-select v-model="form.labelPosition">
 21 |           <el-option label="默认" value=""> </el-option>
 22 |           <el-option label="右" value="right"> </el-option>
 23 |           <el-option label="左" value="left"> </el-option>
 24 |           <el-option label="上" value="top"> </el-option>
 25 |         </el-select>
 26 |       </el-form-item>
 27 | 
 28 |       <el-form-item label="行内表单模式">
 29 |         <el-switch v-model="form.inline"> </el-switch>
 30 |       </el-form-item>
 31 | 
 32 |       <el-form-item label="表单域标签的宽度">
 33 |         <el-input
 34 |           v-model="form.labelWidth"
 35 |           placeholder="请输入，如50px"
 36 |         ></el-input>
 37 |       </el-form-item>
 38 | 
 39 |       <el-form-item>
 40 |         <div class="formAction">
 41 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 42 |           <el-button @click="handleClose">取消</el-button>
 43 |         </div>
 44 |       </el-form-item>
 45 |       <el-form-item>
 46 |         <div class="formAction">
 47 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 48 |         </div>
 49 |       </el-form-item>
 50 |     </el-form>
 51 |   </div>
 52 | </template>
 53 | <script lang="ts">
 54 | import { LowElement } from '@/types/Element';
 55 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 56 | import BaseOptions from './BaseOptions';
 57 | 
 58 | type LowProps = {
 59 |   size: "medium" | "small" | "mini" | '';
 60 | 
 61 |   inline: boolean;
 62 | 
 63 |   labelWidth: string;
 64 |   labelPosition: 'right' | 'left' | 'top' | '';
 65 | 
 66 | }
 67 | 
 68 | @Component({
 69 | 
 70 | })
 71 | export default class Form extends BaseOptions {
 72 | 
 73 |   get props () {
 74 |     return this.element ? this.element.props : null
 75 |   }
 76 | 
 77 |   rules = {
 78 | 
 79 |   };
 80 | 
 81 |   form: LowProps = {
 82 |     size: '',
 83 |     inline: false,
 84 |     labelWidth: '',
 85 |     labelPosition: ''
 86 |   }
 87 |   defaultForm: any;
 88 | 
 89 |   timer: number = 0;
 90 | 
 91 |   created () {
 92 |     this.defaultForm = Object.assign({}, this.form);
 93 |     this.handleUpdateData();
 94 |   }
 95 | 
 96 |   handleUpdateData () {
 97 |     const props = this.props;
 98 |     const form: any = {};
 99 |     Object.keys(this.form).forEach(key => {
100 |       const val = props ? props[key] : this.defaultForm[key];
101 |       this.$set(this.form, key, val);
102 |       form[key] = val;
103 |     });
104 |     // this.form = form;
105 |   }
106 | 
107 |   @Watch('props')
108 |   elementWatch (newVal: Element, oldVal: Element) {
109 |     if (newVal === oldVal) return;
110 |     this.handleUpdateData();
111 |   }
112 | 
113 |   @Watch('form', { deep: true })
114 |   formWatch (newVal: LowProps, oldVal: LowProps) {
115 |     // 将参数添加进去
116 |     this.handleUpdate();
117 |   }
118 |   handleUpdate () {
119 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
120 |   }
121 |   onSubmit () {
122 | 
123 |   }
124 |   /**
125 |    * 取消
126 |    */
127 |   handleClose () {
128 |     this.$store.commit("page/SET_CURRENT", undefined);
129 |   }
130 | 
131 |   handleRemove () {
132 |     this.$store.commit("page/REMOVE_CURRENT");
133 |     this.$store.commit("page/SET_CURRENT", undefined);
134 |   }
135 | }
136 | 
137 | </script>
138 | <style lang="scss" scoped>
139 | .row-option {
140 |   padding: 10px;
141 |   .formAction {
142 |     display: flex;
143 |     justify-content: center;
144 |     align-items: center;
145 |   }
146 | }
147 | </style>


--------------------------------------------------------------------------------
/src/components/options/Progress.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="百分比">
 11 |         <el-input-number
 12 |           v-model="form.percentage"
 13 |           :min="0"
 14 |           :max="100"
 15 |           :step="1"
 16 |           :controls="true"
 17 |           controls-position="both"
 18 |         >
 19 |         </el-input-number>
 20 |       </el-form-item>
 21 | 
 22 |       <el-form-item label="类型">
 23 |         <el-select v-model="form.type">
 24 |           <el-option label="线" value="line"> </el-option>
 25 |           <el-option label="圆" value="circle"> </el-option>
 26 |           <el-option label="指示板" value="dashboard"> </el-option>
 27 |         </el-select>
 28 |       </el-form-item>
 29 | 
 30 |       <el-form-item label="主题">
 31 |         <el-select v-model="form.status">
 32 |           <el-option label="默认" :value="undefined"> </el-option>
 33 |           <el-option label="成功" value="success"> </el-option>
 34 |           <el-option label="异常" value="exception"> </el-option>
 35 |           <el-option label="警告" value="warning"> </el-option>
 36 |         </el-select>
 37 |       </el-form-item>
 38 | 
 39 |       <el-form-item label="显示进度条文字">
 40 |         <el-switch v-model="form.showText"></el-switch>
 41 |       </el-form-item>
 42 | 
 43 |       <el-form-item>
 44 |         <div class="formAction">
 45 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 46 |           <el-button @click="handleClose">取消</el-button>
 47 |         </div>
 48 |       </el-form-item>
 49 | 
 50 |       <el-form-item>
 51 |         <div class="formAction">
 52 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 53 |         </div>
 54 |       </el-form-item>
 55 |     </el-form>
 56 |   </div>
 57 | </template>
 58 | <script lang="ts">
 59 | import { LowElement } from '@/types/Element';
 60 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 61 | import BaseOptions from './BaseOptions';
 62 | 
 63 | type LowProps = {
 64 |   percentage: number;
 65 |   status: "success" | "exception" | "warning" | '';
 66 |   showText: boolean;
 67 |   type: "line" | "circle" | "dashboard" | '',
 68 | }
 69 | 
 70 | @Component({
 71 | 
 72 | })
 73 | export default class Progress extends BaseOptions {
 74 | 
 75 |   get props () {
 76 |     return this.element ? this.element.props : null
 77 |   }
 78 | 
 79 |   rules = {
 80 | 
 81 |   };
 82 | 
 83 |   form: LowProps = {
 84 |     percentage: 0,
 85 |     status: '',
 86 |     showText: false,
 87 |     type: 'line',
 88 |   }
 89 |   defaultForm: any;
 90 | 
 91 |   timer: number = 0;
 92 | 
 93 |   created () {
 94 |     this.defaultForm = Object.assign({}, this.form);
 95 |     this.handleUpdateData();
 96 |   }
 97 | 
 98 |   handleUpdateData () {
 99 |     const props = this.props;
100 |     Object.keys(this.form).forEach(key => {
101 |       const val = props ? props[key] : this.defaultForm[key];
102 |       this.$set(this.form, key, val);
103 |     });
104 |   }
105 | 
106 |   @Watch('props')
107 |   elementWatch (newVal: Element, oldVal: Element) {
108 |     if (newVal === oldVal) return;
109 |     this.handleUpdateData();
110 |   }
111 | 
112 |   @Watch('form', { deep: true })
113 |   formWatch (newVal: LowProps, oldVal: LowProps) {
114 |     // 将参数添加进去
115 |     this.handleUpdate();
116 |   }
117 |   handleUpdate () {
118 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
119 |   }
120 |   onSubmit () {
121 | 
122 |   }
123 |   /**
124 |    * 取消
125 |    */
126 |   handleClose () {
127 |     this.$store.commit("page/SET_CURRENT", undefined);
128 |   }
129 | 
130 |   handleRemove () {
131 |     this.$store.commit("page/REMOVE_CURRENT");
132 |     this.$store.commit("page/SET_CURRENT", undefined);
133 |   }
134 | }
135 | 
136 | </script>
137 | <style lang="scss" scoped>
138 | .row-option {
139 |   padding: 10px;
140 |   .formAction {
141 |     display: flex;
142 |     justify-content: center;
143 |     align-items: center;
144 |   }
145 | }
146 | </style>


--------------------------------------------------------------------------------
/src/components/options/Text.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="文本">
 11 |         <el-input v-model="form.text" placeholder="请输入"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="颜色">
 15 |         <el-color-picker v-model="form.color"></el-color-picker>
 16 |       </el-form-item>
 17 | 
 18 |       <el-form-item label="大小">
 19 |         <el-input
 20 |           v-model="form.fontSize"
 21 |           placeholder="请输入,如 16px"
 22 |         ></el-input>
 23 |       </el-form-item>
 24 | 
 25 |       <el-form-item label="行高">
 26 |         <el-input
 27 |           v-model="form.lineHeight"
 28 |           placeholder="请输入,如 16px"
 29 |         ></el-input>
 30 |       </el-form-item>
 31 | 
 32 |       <el-form-item label="居中">
 33 |         <el-switch v-model="form.center"></el-switch>
 34 |       </el-form-item>
 35 | 
 36 |       <el-form-item label="块">
 37 |         <el-switch v-model="form.block"></el-switch>
 38 |       </el-form-item>
 39 | 
 40 |       <el-form-item label="粗体">
 41 |         <el-switch v-model="form.bold"></el-switch>
 42 |       </el-form-item>
 43 | 
 44 |       <el-form-item>
 45 |         <div class="formAction">
 46 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 47 |           <el-button @click="handleClose">取消</el-button>
 48 |         </div>
 49 |       </el-form-item>
 50 | 
 51 |       <el-form-item>
 52 |         <div class="formAction">
 53 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 54 |         </div>
 55 |       </el-form-item>
 56 |     </el-form>
 57 |   </div>
 58 | </template>
 59 | <script lang="ts">
 60 | import { LowElement } from '@/types/Element';
 61 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 62 | import BaseOptions from './BaseOptions';
 63 | 
 64 | type LowProps = {
 65 |   text: string;
 66 |   fontSize: string;
 67 |   color: string;
 68 |   center: boolean;
 69 |   block: boolean;
 70 |   bold: boolean;
 71 |   lineHeight: string;
 72 | }
 73 | 
 74 | @Component({
 75 |   name: 'bc-text-option'
 76 | })
 77 | export default class Text extends BaseOptions {
 78 | 
 79 |   get props () {
 80 |     return this.element ? this.element.props : null
 81 |   }
 82 | 
 83 |   rules = {
 84 | 
 85 |   };
 86 | 
 87 |   form: LowProps = {
 88 |     text: '',
 89 |     fontSize: '',
 90 |     color: '',
 91 |     center: false,
 92 |     block: false,
 93 |     bold: false,
 94 |     lineHeight: '1'
 95 |   }
 96 |   defaultForm: any;
 97 | 
 98 |   timer: number = 0;
 99 | 
100 |   created () {
101 |     this.defaultForm = Object.assign({}, this.form);
102 |     this.handleUpdateData();
103 |   }
104 | 
105 |   handleUpdateData () {
106 |     const props = this.props;
107 |     const form: any = {};
108 |     Object.keys(this.form).forEach(key => {
109 |       const val = props ? props[key] : this.defaultForm[key];
110 |       this.$set(this.form, key, val);
111 |       form[key] = val;
112 |     });
113 |     // this.form = form;
114 |   }
115 | 
116 |   @Watch('props')
117 |   elementWatch (newVal: Element, oldVal: Element) {
118 |     if (newVal === oldVal) return;
119 |     this.handleUpdateData();
120 |   }
121 | 
122 |   @Watch('form', { deep: true })
123 |   formWatch (newVal: LowProps, oldVal: LowProps) {
124 |     // 将参数添加进去
125 |     this.handleUpdate();
126 |   }
127 |   handleUpdate () {
128 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
129 |   }
130 |   onSubmit () {
131 | 
132 |   }
133 |   /**
134 |    * 取消
135 |    */
136 |   handleClose () {
137 |     this.$store.commit("page/SET_CURRENT", undefined);
138 |   }
139 | 
140 |   handleRemove () {
141 |     this.$store.commit("page/REMOVE_CURRENT");
142 |     this.$store.commit("page/SET_CURRENT", undefined);
143 |   }
144 | }
145 | 
146 | </script>
147 | <style lang="scss" scoped>
148 | .row-option {
149 |   padding: 10px;
150 |   .formAction {
151 |     display: flex;
152 |     justify-content: center;
153 |     align-items: center;
154 |   }
155 | }
156 | </style>


--------------------------------------------------------------------------------
/src/components/options/Alert.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="文本">
 11 |         <el-input v-model="form.title" placeholder="请输入"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="辅助性文字">
 15 |         <el-input type="textarea" v-model="form.description" placeholder="请输入"></el-input>
 16 |       </el-form-item>
 17 | 
 18 |       <el-form-item label="类型">
 19 |         <el-select v-model="form.type">
 20 |           <el-option label="成功" value="success"> </el-option>
 21 |           <el-option label="警告" value="warning"> </el-option>
 22 |           <el-option label="错误" value="error"> </el-option>
 23 |           <el-option label="提示" value="info"> </el-option>
 24 |         </el-select>
 25 |       </el-form-item>
 26 | 
 27 |       <el-form-item label="主题">
 28 |         <el-select v-model="form.effect">
 29 |           <el-option label="dark" value="dark"> </el-option>
 30 |           <el-option label="light" value="light"> </el-option>
 31 |         </el-select>
 32 |       </el-form-item>
 33 | 
 34 |       <el-form-item label="是否可关闭">
 35 |         <el-switch v-model="form.closable"></el-switch>
 36 |       </el-form-item>
 37 | 
 38 |       <el-form-item label="居中">
 39 |         <el-switch v-model="form.center"></el-switch>
 40 |       </el-form-item>
 41 | 
 42 |       <el-form-item>
 43 |         <div class="formAction">
 44 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 45 |           <el-button @click="handleClose">取消</el-button>
 46 |         </div>
 47 |       </el-form-item>
 48 | 
 49 |       <el-form-item>
 50 |         <div class="formAction">
 51 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 52 |         </div>
 53 |       </el-form-item>
 54 |     </el-form>
 55 |   </div>
 56 | </template>
 57 | <script lang="ts">
 58 | import { LowElement } from '@/types/Element';
 59 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 60 | import BaseOptions from './BaseOptions';
 61 | 
 62 | type LowProps = {
 63 |   title: string;
 64 |   description: string;
 65 |   center: boolean;
 66 |   type: "success" | "info" | "warning" | "error" | undefined;
 67 |   closable: boolean;
 68 |   effect: "dark" | "light" | '',
 69 | }
 70 | 
 71 | @Component({
 72 | 
 73 | })
 74 | export default class Tag extends BaseOptions {
 75 | 
 76 |   get props () {
 77 |     return this.element ? this.element.props : null
 78 |   }
 79 | 
 80 |   rules = {
 81 | 
 82 |   };
 83 | 
 84 |   form: LowProps = {
 85 |     title: '',
 86 |     description:'',
 87 |     type: undefined,
 88 |     closable: false,
 89 |     effect: '',
 90 |     center: false
 91 |   }
 92 |   defaultForm: any;
 93 | 
 94 |   timer: number = 0;
 95 | 
 96 |   created () {
 97 |     this.defaultForm = Object.assign({}, this.form);
 98 |     this.handleUpdateData();
 99 |   }
100 | 
101 |   handleUpdateData () {
102 |     const props = this.props;
103 |     
104 |     Object.keys(this.form).forEach(key => {
105 |       const val = props ? props[key] : this.defaultForm[key];
106 |       this.$set(this.form, key, val);
107 |     });
108 |   }
109 | 
110 |   @Watch('props')
111 |   elementWatch (newVal: Element, oldVal: Element) {
112 |     if (newVal === oldVal) return;
113 |     this.handleUpdateData();
114 |   }
115 | 
116 |   @Watch('form', { deep: true })
117 |   formWatch (newVal: LowProps, oldVal: LowProps) {
118 |     // 将参数添加进去
119 |     this.handleUpdate();
120 |   }
121 |   handleUpdate () {
122 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
123 |   }
124 |   onSubmit () {
125 | 
126 |   }
127 |   /**
128 |    * 取消
129 |    */
130 |   handleClose () {
131 |     this.$store.commit("page/SET_CURRENT", undefined);
132 |   }
133 | 
134 |   handleRemove () {
135 |     this.$store.commit("page/REMOVE_CURRENT");
136 |     this.$store.commit("page/SET_CURRENT", undefined);
137 |   }
138 | }
139 | 
140 | </script>
141 | <style lang="scss" scoped>
142 | .row-option {
143 |   padding: 10px;
144 |   .formAction {
145 |     display: flex;
146 |     justify-content: center;
147 |     align-items: center;
148 |   }
149 | }
150 | </style>


--------------------------------------------------------------------------------
/src/components/options/Tag.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="文本">
 11 |         <el-input v-model="form.text" placeholder="请输入"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="类型">
 15 |         <el-select v-model="form.type">
 16 |           <el-option label="默认" value=""> </el-option>
 17 |           <el-option label="主要" value="primary"> </el-option>
 18 |           <el-option label="成功" value="success"> </el-option>
 19 |           <el-option label="警告" value="warning"> </el-option>
 20 |           <el-option label="危险" value="danger"> </el-option>
 21 |           <el-option label="提示" value="info"> </el-option>
 22 |           <el-option label="文字" value="text"> </el-option>
 23 |         </el-select>
 24 |       </el-form-item>
 25 | 
 26 |       <el-form-item label="尺寸">
 27 |         <el-select v-model="form.size">
 28 |           <el-option label="默认" value=""> </el-option>
 29 |           <el-option label="中等" value="medium"> </el-option>
 30 |           <el-option label="小" value="small"> </el-option>
 31 |           <el-option label="迷你" value="mini"> </el-option>
 32 |         </el-select>
 33 |       </el-form-item>
 34 | 
 35 |       <el-form-item label="主题">
 36 |         <el-select v-model="form.effect">
 37 |           <!-- "dark" | "light" | "plain"  -->
 38 |           <el-option label="默认" value=""> </el-option>
 39 |           <el-option label="dark" value="dark"> </el-option>
 40 |           <el-option label="light" value="light"> </el-option>
 41 |           <el-option label="plain" value="plain"> </el-option>
 42 |         </el-select>
 43 |       </el-form-item>
 44 | 
 45 |       <el-form-item label="是否可关闭">
 46 |         <el-switch v-model="form.closable"></el-switch>
 47 |       </el-form-item>
 48 | 
 49 |       <el-form-item>
 50 |         <div class="formAction">
 51 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 52 |           <el-button @click="handleClose">取消</el-button>
 53 |         </div>
 54 |       </el-form-item>
 55 | 
 56 |       <el-form-item>
 57 |         <div class="formAction">
 58 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 59 |         </div>
 60 |       </el-form-item>
 61 |     </el-form>
 62 |   </div>
 63 | </template>
 64 | <script lang="ts">
 65 | import { LowElement } from '@/types/Element';
 66 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 67 | import BaseOptions from './BaseOptions';
 68 | 
 69 | type LowProps = {
 70 |   text: string;
 71 |   type: "success" | "info" | "warning" | "danger" | '';
 72 |   closable: boolean;
 73 |   effect: "dark" | "light" | "plain" | '',
 74 |   size: "medium" | "small" | "mini" | '',
 75 | }
 76 | 
 77 | @Component({
 78 | 
 79 | })
 80 | export default class Tag extends BaseOptions {
 81 | 
 82 |   get props () {
 83 |     return this.element ? this.element.props : null
 84 |   }
 85 | 
 86 |   rules = {
 87 | 
 88 |   };
 89 | 
 90 |   form: LowProps = {
 91 |     text: '',
 92 |     type: '',
 93 |     closable: false,
 94 |     effect: '',
 95 |     size: ''
 96 |   }
 97 |   defaultForm: any;
 98 | 
 99 |   timer: number = 0;
100 | 
101 |   created () {
102 |     this.defaultForm = Object.assign({}, this.form);
103 |     this.handleUpdateData();
104 |   }
105 | 
106 |   handleUpdateData () {
107 |     const props = this.props;
108 |     Object.keys(this.form).forEach(key => {
109 |       const val = props ? props[key] : this.defaultForm[key];
110 |       this.$set(this.form, key, val);
111 |     });
112 |   }
113 | 
114 |   @Watch('props')
115 |   elementWatch (newVal: Element, oldVal: Element) {
116 |     if (newVal === oldVal) return;
117 |     this.handleUpdateData();
118 |   }
119 | 
120 |   @Watch('form', { deep: true })
121 |   formWatch (newVal: LowProps, oldVal: LowProps) {
122 |     // 将参数添加进去
123 |     this.handleUpdate();
124 |   }
125 |   handleUpdate () {
126 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
127 |   }
128 |   onSubmit () {
129 | 
130 |   }
131 |   /**
132 |    * 取消
133 |    */
134 |   handleClose () {
135 |     this.$store.commit("page/SET_CURRENT", undefined);
136 |   }
137 | 
138 |   handleRemove () {
139 |     this.$store.commit("page/REMOVE_CURRENT");
140 |     this.$store.commit("page/SET_CURRENT", undefined);
141 |   }
142 | }
143 | 
144 | </script>
145 | <style lang="scss" scoped>
146 | .row-option {
147 |   padding: 10px;
148 |   .formAction {
149 |     display: flex;
150 |     justify-content: center;
151 |     align-items: center;
152 |   }
153 | }
154 | </style>


--------------------------------------------------------------------------------
/src/components/aside-page/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="aside-pages">
  3 |     <div class="aside-pages-header">
  4 |       <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  5 |     </div>
  6 | 
  7 |     <el-tree
  8 |       :data="pages"
  9 |       :props="defaultProps"
 10 |       :default-checked-keys="[currentPageId]"
 11 |       @node-click="handleNodeClick"
 12 |       node-key="id"
 13 |       highlight-current
 14 |     >
 15 |       <template slot-scope="props">
 16 |         <div class="tree-node">
 17 |           <span class="tree-icon" :class="props.data.icon ? '' : 'none'"
 18 |             ><i :class="props.data.icon || 'el-icon-remove-outline'"></i
 19 |           ></span>
 20 |           <span class="tree-title">{{ props.data.title }}</span>
 21 |         </div>
 22 |       </template>
 23 |     </el-tree>
 24 | 
 25 |     <el-dialog
 26 |       title="增加/修改页面"
 27 |       :visible.sync="dialogVisible"
 28 |       :before-close="dialogBeforeClose"
 29 |       width="400px"
 30 |     >
 31 |       <div>
 32 |         <el-form
 33 |           :model="form"
 34 |           ref="form"
 35 |           :rules="rules"
 36 |           label-width="60px"
 37 |           :inline="false"
 38 |           size="mini"
 39 |         >
 40 |           <el-form-item label="标题" prop="title">
 41 |             <el-input v-model="form.title" placeholder="标题"></el-input>
 42 |           </el-form-item>
 43 |           <el-form-item label="图标" prop="icon">
 44 |             <IconSelect v-model="form.icon" />
 45 |           </el-form-item>
 46 |         </el-form>
 47 |       </div>
 48 |       <div slot="footer">
 49 |         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
 50 |         <el-button size="mini" type="primary" @click="handleSubmit"
 51 |           >确 定</el-button
 52 |         >
 53 |       </div>
 54 |     </el-dialog>
 55 |   </div>
 56 | </template>
 57 | <script>
 58 | import { mapState } from 'vuex';
 59 | import IconSelect from '@/components/icon-select/Index.vue';
 60 | export default {
 61 |   components: { IconSelect },
 62 |   data () {
 63 |     return {
 64 |       dialogVisible: false,
 65 |       defaultProps: {
 66 |         children: 'children',
 67 |         label: 'title'
 68 |       },
 69 |       form: {
 70 |         title: '',
 71 |         icon: ''
 72 |       },
 73 |       rules: {
 74 |         title: [{ required: true, message: '不能为空', trigger: 'blur' }]
 75 |       }
 76 |     };
 77 |   },
 78 |   computed: {
 79 |     ...mapState(['pages']),
 80 |     currentPageId () {
 81 |       return this.$store.state.page.id;
 82 |     }
 83 |   },
 84 |   created () {
 85 |   },
 86 |   filters: {
 87 |   },
 88 |   methods: {
 89 |     dialogBeforeClose () {
 90 | 
 91 |     },
 92 |     handleNodeClick (e) {
 93 |       this.$store.dispatch('selectPage', e.id)
 94 |     },
 95 |     handleAdd (e) {
 96 |       this.dialogVisible = true;
 97 |       this.form = {
 98 |         title: '',
 99 |         icon: ''
100 |       };
101 |     },
102 |     handleEdit (data) {
103 |       this.form = {
104 |         ...data
105 |       };
106 |       this.dialogVisible = true;
107 |     },
108 |     async handleSubmit () {
109 |       this.$refs['form'].validate(async (valid) => {
110 |         if (!valid) return;
111 |         if (!this.form.id) {
112 |           await this.$store.dispatch('addPage', this.form);
113 |         } else {
114 |           await this.$store.dispatch('updatePage', this.form);
115 |         }
116 |         this.$notify.success("操作成功");
117 |         this.dialogVisible = false;
118 |       });
119 |     },
120 |   }
121 | }
122 | </script>
123 | <style lang="scss">
124 | .aside-pages {
125 |   .el-tree {
126 |     .el-tree-node__content {
127 |       height: auto !important;
128 |     }
129 |     .is-current {
130 |       .el-tree-node__content {
131 |         background-color: #fff;
132 |       }
133 |     }
134 |   }
135 | }
136 | </style>
137 | <style lang="scss" scoped>
138 | .tree-node {
139 |   margin: 10px 0;
140 |   display: flex;
141 |   align-items: center;
142 |   position: relative;
143 |   .tree-icon {
144 |     position: absolute;
145 |     width: 24px;
146 |     height: 24px;
147 |     font-size: 16px;
148 |     border-radius: 2px;
149 |     background-color: #409eff;
150 |     color: #fff;
151 |     display: flex;
152 |     align-items: center;
153 |     justify-content: center;
154 |     &.none {
155 |       color: #888;
156 |       background-color: #eee;
157 |     }
158 |   }
159 |   .tree-title {
160 |     margin-left: 28px;
161 |     color: #333;
162 |   }
163 | }
164 | .aside-pages {
165 |   .aside-pages-header {
166 |     display: flex;
167 |     align-items: center;
168 |     justify-content: center;
169 |     padding: 10px;
170 |   }
171 | }
172 | </style>


--------------------------------------------------------------------------------
/src/components/options/Row.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="栅格间隔">
 11 |         <el-input-number
 12 |           v-model="form.gutter"
 13 |           :min="0"
 14 |           placeholder="栅格间隔"
 15 |           controls-position="right"
 16 |         ></el-input-number>
 17 |         px
 18 |       </el-form-item>
 19 |       <el-form-item label="布局模式">
 20 |         <el-select v-model="form.type" placeholder="布局模式">
 21 |           <el-option label="DEFAULT" :value="undefined"> </el-option>
 22 |           <el-option label="FLEX" value="flex"> </el-option>
 23 |         </el-select>
 24 |       </el-form-item>
 25 |       <el-form-item label="水平排列" v-if="form.type === 'flex'">
 26 |         <el-select v-model="form.justify" placeholder="水平排列布局模式">
 27 |           <el-option label="start" value="start"> </el-option>
 28 |           <el-option label="end" value="end"> </el-option>
 29 |           <el-option label="center" value="center"> </el-option>
 30 |           <el-option label="space-around" value="space-around"> </el-option>
 31 |           <el-option label="space-between" value="space-between"> </el-option>
 32 |         </el-select>
 33 |       </el-form-item>
 34 |       <el-form-item label="垂直排列" v-if="form.type === 'flex'">
 35 |         <el-select v-model="form.align" placeholder="垂直排列布局模式">
 36 |           <el-option label="top" value="top"> </el-option>
 37 |           <el-option label="middle" value="middle"> </el-option>
 38 |           <el-option label="bottom" value="bottom"> </el-option>
 39 |         </el-select>
 40 |       </el-form-item>
 41 | 
 42 |       <el-form-item>
 43 |         <div class="formAction">
 44 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 45 |           <el-button @click="handleClose">取消</el-button>
 46 |         </div>
 47 |       </el-form-item>
 48 |       <el-form-item>
 49 |         <div class="formAction">
 50 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 51 |         </div>
 52 |       </el-form-item>
 53 |     </el-form>
 54 |   </div>
 55 | </template>
 56 | <script lang="ts">
 57 | import { LowElement } from '@/types/Element';
 58 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 59 | import BaseOptions from './BaseOptions';
 60 | 
 61 | type LowProps = {
 62 |   gutter: number;
 63 |   type: 'flex' | undefined;
 64 |   justify: "start" | "end" | "center" | "space-around" | "space-between" | undefined;
 65 |   align: "top" | "middle" | "bottom" | undefined;
 66 | }
 67 | 
 68 | @Component({
 69 | 
 70 | })
 71 | export default class Row extends BaseOptions {
 72 | 
 73 |   get props () {
 74 |     return this.element ? this.element.props : null
 75 |   }
 76 | 
 77 |   rules = {
 78 | 
 79 |   };
 80 | 
 81 |   form: LowProps = {
 82 |     gutter: this.props ? this.props.gutter : 0,
 83 |     type: this.props ? this.props.type : undefined,
 84 |     justify: this.props ? this.props.justify : undefined,
 85 |     align: this.props ? this.props.align : undefined
 86 |   }
 87 | 
 88 |   timer: number = 0;
 89 | 
 90 |   @Watch('props')
 91 |   elementWatch (newVal: Element, oldVal: Element) {
 92 |     if (newVal === oldVal) return;
 93 | 
 94 |     this.form.gutter = this.props ? this.props.gutter : 0;
 95 |     this.form.type = this.props ? this.props.type : undefined;
 96 |     this.form.justify = this.props ? this.props.justify : undefined;
 97 |     this.form.align = this.props ? this.props.align : undefined
 98 |   }
 99 | 
100 |   @Watch('form.type')
101 |   formTypeWatch (newVal: string, oldVal: string) {
102 |     if (newVal !== oldVal) {
103 |       if (newVal === 'flex') {
104 |         this.form.justify = 'start';
105 |         this.form.align = 'top';
106 |       } else {
107 |         this.form.justify = undefined;
108 |         this.form.align = undefined;
109 |       }
110 |     }
111 |   }
112 | 
113 |   @Watch('form', { deep: true })
114 |   formWatch (newVal: LowProps, oldVal: LowProps) {
115 |     // 将参数添加进去
116 |     this.handleUpdate();
117 |   }
118 |   handleUpdate () {
119 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form })
120 |   }
121 |   onSubmit () {
122 | 
123 |   }
124 |   /**
125 |    * 取消
126 |    */
127 |   handleClose () {
128 |     this.$store.commit("page/SET_CURRENT", undefined);
129 |   }
130 | 
131 |   handleRemove () {
132 |     this.$store.commit("page/REMOVE_CURRENT");
133 |     this.$store.commit("page/SET_CURRENT", undefined);
134 |   }
135 | }
136 | 
137 | </script>
138 | <style lang="scss" scoped>
139 | .row-option {
140 |   padding: 10px;
141 |   .formAction {
142 |     display: flex;
143 |     justify-content: center;
144 |     align-items: center;
145 |   }
146 | }
147 | </style>


--------------------------------------------------------------------------------
/src/components/DragContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <draggable
  3 |     :list="children"
  4 |     :group="group"
  5 |     :class="dragClassName"
  6 |     :move="checkMove"
  7 |     :clone="handleClone"
  8 |     :disabled="disabled"
  9 |     :sort="sort"
 10 |     :data-tag="element"
 11 |     :data-name="name"
 12 |     :data-path="currentPath"
 13 |     @change="emitter"
 14 |   >
 15 |     <component
 16 |       v-for="item in children"
 17 |       :key="item.id"
 18 |       v-bind="item.props"
 19 |       :actions="item.actions"
 20 |       :is="'bc-' + item.element"
 21 |       :data-tag="item.element"
 22 |       :props="item.props"
 23 |       :models="item.models"
 24 |       @click.native.stop.prevent="handleClickItem(item)"
 25 |     >
 26 |       <drag-container
 27 |         v-bind="item"
 28 |         :path="currentPath"
 29 |         :show="show"
 30 |         @input="emitter"
 31 |       />
 32 |     </component>
 33 |   </draggable>
 34 | </template>
 35 | <script lang='ts'>
 36 | import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
 37 | import { State } from 'vuex-class'
 38 | import { cloneDeep } from 'lodash';
 39 | 
 40 | import mixins from '@/mixins';
 41 | import { LowDrapElement, LowElement } from '@/types/Element';
 42 | import { generateUUID } from '@/utils';
 43 | @Component({
 44 |   components: {
 45 |   },
 46 |   mixins: [mixins],
 47 | })
 48 | export default class DragLayout extends Vue {
 49 | 
 50 |   @State('currentId', { namespace: 'page' })
 51 |   current?: string;
 52 | 
 53 |   @Prop({
 54 |     type: Boolean,
 55 |     default: false
 56 |   })
 57 |   show?: boolean;
 58 | 
 59 |   @Prop({
 60 |     type: String,
 61 |     default: ''
 62 |   })
 63 |   path?: string;
 64 | 
 65 |   @Prop({
 66 |     type: Boolean
 67 |   })
 68 |   disabled?: boolean;
 69 | 
 70 |   @Prop({
 71 |     type: String
 72 |   })
 73 |   id?: string; // 元素名称 or 类型
 74 | 
 75 |   @Prop({
 76 |     type: String,
 77 |   })
 78 |   name?: string; // 名称
 79 | 
 80 |   @Prop({
 81 |     type: String,
 82 |   })
 83 |   element?: string; // 元素名称 or 类型
 84 |   @Prop({
 85 |     type: String,
 86 |   })
 87 |   type!: 'container' | 'element'; // container or element
 88 |   @Prop({
 89 |     type: Object,
 90 |   })
 91 |   props: any; // 参数
 92 |   @Prop({
 93 |     type: Array
 94 |   })
 95 |   children!: any[];
 96 | 
 97 | 
 98 |   @Inject({
 99 |     from: 'draggableOptions',
100 |     default: {}
101 |   })
102 |   // @Provide('draggableOptions')
103 |   draggableOptions: any;
104 | 
105 |   get currentDisabled () {
106 |     const draggableOptions = this.draggableOptions;
107 |     let res = draggableOptions && draggableOptions.clone;
108 | 
109 |     return res;
110 |   }
111 |   get sort () {
112 |     const draggableOptions = this.draggableOptions;
113 |     let res = !draggableOptions || !draggableOptions.clone;
114 |     // 用于固定
115 |     if (res && this.current) {
116 |       res = this.current === this.id;
117 |     }
118 | 
119 |     return res;
120 |   }
121 | 
122 |   get currentPath () {
123 |     return [this.path, this.element].filter(item => item).join('_');
124 |   }
125 | 
126 |   get dragClassName () {
127 |     const list = ['drag-wrapper', 'drag-' + this.type];
128 |     if (!this.draggableOptions.clone && this.current === this.id) {
129 |       list.push('low-active');
130 |     }
131 |     if (this.show) {
132 |       list.push('show')
133 |     }
134 |     return list.join(' ');
135 |   }
136 | 
137 |   get group () {
138 |     let group = this.type;
139 |     if (this.draggableOptions.group) {
140 |       group = Object.assign({}, this.draggableOptions.group);
141 |     }
142 |     return group;
143 |   }
144 | 
145 |   emitter (value: LowDrapElement) {
146 |     this.$emit("input", value);
147 |   }
148 | 
149 |   handleCloneTree (oldElement: LowDrapElement) {
150 |     const element: LowDrapElement = cloneDeep(oldElement);
151 |     delete element.clone;
152 |     delete element.disabled;
153 |     element.props = Object.assign({}, element.props);
154 | 
155 |     element.id = generateUUID();
156 |     if (element.type === 'container') {
157 |       element.children = (element.children || []).map<LowDrapElement>((item: LowDrapElement) => {
158 |         return this.handleCloneTree(item);
159 |       });
160 |     }
161 |     return element;
162 |   }
163 |   handleClone (item: any = {}) {
164 |     if (!this.draggableOptions.group) {
165 |       return item;
166 |     }
167 | 
168 |     return this.handleCloneTree(item);
169 |   }
170 | 
171 |   handleClickItem (element: LowElement) {
172 |     // this.active = !this.active;
173 |     // 推送id
174 |     if (!this.draggableOptions.clone) {
175 |       this.$store.commit('page/SET_CURRENT', element.id);
176 |     }
177 |   }
178 | 
179 | }
180 | 
181 | </script>
182 | <style lang="scss" scoped>
183 | .low-active {
184 |   border-style: solid !important;
185 |   border-width: 2px !important;
186 |   border-color: #009688 !important;
187 | }
188 | .drag-wrapper {
189 |   position: relative;
190 |   &::before {
191 |     position: absolute;
192 |     content: attr(data-name);
193 |     font-size: 12px;
194 |     left: 0;
195 |     top: 0;
196 |     transform: translate(20%, 0%);
197 |     color: #98d2ff;
198 |   }
199 | }
200 | .drag-container {
201 |   min-height: 30px;
202 |   padding: 5px;
203 |   border: 1px dashed;
204 |   border-color: #cde9ff;
205 |   margin: 5px;
206 |   overflow: hidden;
207 |   transition: border 50ms;
208 | 
209 |   &.show {
210 |     padding: 0;
211 |     margin: 0;
212 |     border: 0;
213 |     overflow: visible;
214 |     min-height: 0;
215 |     &::before {
216 |       display: none;
217 |     }
218 |   }
219 | }
220 | </style>


--------------------------------------------------------------------------------
/src/components/icon-select/icon.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   "platform-eleme",
  3 |   "eleme",
  4 |   "delete-solid",
  5 |   "delete",
  6 |   "s-tools",
  7 |   "setting",
  8 |   "user-solid",
  9 |   "user",
 10 |   "phone",
 11 |   "phone-outline",
 12 |   "more",
 13 |   "more-outline",
 14 |   "star-on",
 15 |   "star-off",
 16 |   "s-goods",
 17 |   "goods",
 18 |   "warning",
 19 |   "warning-outline",
 20 |   "question",
 21 |   "info",
 22 |   "remove",
 23 |   "circle-plus",
 24 |   "success",
 25 |   "error",
 26 |   "zoom-in",
 27 |   "zoom-out",
 28 |   "remove-outline",
 29 |   "circle-plus-outline",
 30 |   "circle-check",
 31 |   "circle-close",
 32 |   "s-help",
 33 |   "help",
 34 |   "minus",
 35 |   "plus",
 36 |   "check",
 37 |   "close",
 38 |   "picture",
 39 |   "picture-outline",
 40 |   "picture-outline-round",
 41 |   "upload",
 42 |   "upload2",
 43 |   "download",
 44 |   "camera-solid",
 45 |   "camera",
 46 |   "video-camera-solid",
 47 |   "video-camera",
 48 |   "message-solid",
 49 |   "bell",
 50 |   "s-cooperation",
 51 |   "s-order",
 52 |   "s-platform",
 53 |   "s-fold",
 54 |   "s-unfold",
 55 |   "s-operation",
 56 |   "s-promotion",
 57 |   "s-home",
 58 |   "s-release",
 59 |   "s-ticket",
 60 |   "s-management",
 61 |   "s-open",
 62 |   "s-shop",
 63 |   "s-marketing",
 64 |   "s-flag",
 65 |   "s-comment",
 66 |   "s-finance",
 67 |   "s-claim",
 68 |   "s-custom",
 69 |   "s-opportunity",
 70 |   "s-data",
 71 |   "s-check",
 72 |   "s-grid",
 73 |   "menu",
 74 |   "share",
 75 |   "d-caret",
 76 |   "caret-left",
 77 |   "caret-right",
 78 |   "caret-bottom",
 79 |   "caret-top",
 80 |   "bottom-left",
 81 |   "bottom-right",
 82 |   "back",
 83 |   "right",
 84 |   "bottom",
 85 |   "top",
 86 |   "top-left",
 87 |   "top-right",
 88 |   "arrow-left",
 89 |   "arrow-right",
 90 |   "arrow-down",
 91 |   "arrow-up",
 92 |   "d-arrow-left",
 93 |   "d-arrow-right",
 94 |   "video-pause",
 95 |   "video-play",
 96 |   "refresh",
 97 |   "refresh-right",
 98 |   "refresh-left",
 99 |   "finished",
100 |   "sort",
101 |   "sort-up",
102 |   "sort-down",
103 |   "rank",
104 |   "loading",
105 |   "view",
106 |   "c-scale-to-original",
107 |   "date",
108 |   "edit",
109 |   "edit-outline",
110 |   "folder",
111 |   "folder-opened",
112 |   "folder-add",
113 |   "folder-remove",
114 |   "folder-delete",
115 |   "folder-checked",
116 |   "tickets",
117 |   "document-remove",
118 |   "document-delete",
119 |   "document-copy",
120 |   "document-checked",
121 |   "document",
122 |   "document-add",
123 |   "printer",
124 |   "paperclip",
125 |   "takeaway-box",
126 |   "search",
127 |   "monitor",
128 |   "attract",
129 |   "mobile",
130 |   "scissors",
131 |   "umbrella",
132 |   "headset",
133 |   "brush",
134 |   "mouse",
135 |   "coordinate",
136 |   "magic-stick",
137 |   "reading",
138 |   "data-line",
139 |   "data-board",
140 |   "pie-chart",
141 |   "data-analysis",
142 |   "collection-tag",
143 |   "film",
144 |   "suitcase",
145 |   "suitcase-1",
146 |   "receiving",
147 |   "collection",
148 |   "files",
149 |   "notebook-1",
150 |   "notebook-2",
151 |   "toilet-paper",
152 |   "office-building",
153 |   "school",
154 |   "table-lamp",
155 |   "house",
156 |   "no-smoking",
157 |   "smoking",
158 |   "shopping-cart-full",
159 |   "shopping-cart-1",
160 |   "shopping-cart-2",
161 |   "shopping-bag-1",
162 |   "shopping-bag-2",
163 |   "sold-out",
164 |   "sell",
165 |   "present",
166 |   "box",
167 |   "bank-card",
168 |   "money",
169 |   "coin",
170 |   "wallet",
171 |   "discount",
172 |   "price-tag",
173 |   "news",
174 |   "guide",
175 |   "male",
176 |   "female",
177 |   "thumb",
178 |   "cpu",
179 |   "link",
180 |   "connection",
181 |   "open",
182 |   "turn-off",
183 |   "set-up",
184 |   "chat-round",
185 |   "chat-line-round",
186 |   "chat-square",
187 |   "chat-dot-round",
188 |   "chat-dot-square",
189 |   "chat-line-square",
190 |   "message",
191 |   "postcard",
192 |   "position",
193 |   "turn-off-microphone",
194 |   "microphone",
195 |   "close-notification",
196 |   "bangzhu",
197 |   "time",
198 |   "odometer",
199 |   "crop",
200 |   "aim",
201 |   "switch-button",
202 |   "full-screen",
203 |   "copy-document",
204 |   "mic",
205 |   "stopwatch",
206 |   "medal-1",
207 |   "medal",
208 |   "trophy",
209 |   "trophy-1",
210 |   "first-aid-kit",
211 |   "discover",
212 |   "place",
213 |   "location",
214 |   "location-outline",
215 |   "location-information",
216 |   "add-location",
217 |   "delete-location",
218 |   "map-location",
219 |   "alarm-clock",
220 |   "timer",
221 |   "watch-1",
222 |   "watch",
223 |   "lock",
224 |   "unlock",
225 |   "key",
226 |   "service",
227 |   "mobile-phone",
228 |   "bicycle",
229 |   "truck",
230 |   "ship",
231 |   "basketball",
232 |   "football",
233 |   "soccer",
234 |   "baseball",
235 |   "wind-power",
236 |   "light-rain",
237 |   "lightning",
238 |   "heavy-rain",
239 |   "sunrise",
240 |   "sunrise-1",
241 |   "sunset",
242 |   "sunny",
243 |   "cloudy",
244 |   "partly-cloudy",
245 |   "cloudy-and-sunny",
246 |   "moon",
247 |   "moon-night",
248 |   "dish",
249 |   "dish-1",
250 |   "food",
251 |   "chicken",
252 |   "fork-spoon",
253 |   "knife-fork",
254 |   "burger",
255 |   "tableware",
256 |   "sugar",
257 |   "dessert",
258 |   "ice-cream",
259 |   "hot-water",
260 |   "water-cup",
261 |   "coffee-cup",
262 |   "cold-drink",
263 |   "goblet",
264 |   "goblet-full",
265 |   "goblet-square",
266 |   "goblet-square-full",
267 |   "refrigerator",
268 |   "grape",
269 |   "watermelon",
270 |   "cherry",
271 |   "apple",
272 |   "pear",
273 |   "orange",
274 |   "coffee",
275 |   "ice-tea",
276 |   "ice-drink",
277 |   "milk-tea",
278 |   "potato-strips",
279 |   "lollipop",
280 |   "ice-cream-square",
281 |   "ice-cream-round"
282 | ]


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 又开一坑推荐跨iframe组件拖拽 [d2g](https://github.com/notbucai/d2g)
  2 | 
  3 | # Low Code 
  4 | 
  5 | 个人低代码（可能是伪低代码，毕竟不是很懂）的一个玩具
  6 | 
  7 | ![./docs-assets/framework.png](./docs-assets/framework.png)
  8 | 
  9 | ![./docs-assets/er.png](./docs-assets/er.png)
 10 | 
 11 | 
 12 | ## 项目依赖
 13 | 
 14 | ### Vuejs
 15 | 渐进式 JavaScript 框架
 16 | 
 17 | ### ElementUI
 18 | Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
 19 | 
 20 | ### Vue.Draggable
 21 | 基于 Sortable.js 的 Vue 拖放组件
 22 | 
 23 | ## 元素结构
 24 | > 使用JSON作为结构化的处理 是不是最终可以抛弃组件库的依赖 只需要做兼容性的 `代理组件`？
 25 | 
 26 | ```TypeScript
 27 | // 分两种 用type作为区分
 28 | // 1. 功能元素（组件）
 29 | // 2. 容器元素（组件）
 30 | type Element = {
 31 |   // 唯一ID便于操作 一切以 id 为主
 32 |   id: string;
 33 |   // (功能 / 容器) 名称
 34 |   element: string;
 35 |   // 字面意思
 36 |   type: 'element' | 'container';
 37 |   // props 这里放元素（组件）的 参数
 38 |   props?: {
 39 |     // 这里由于其他一些问题暂时这样写了
 40 |     [key: string]: any;
 41 |     [key: number]: any;
 42 |   };
 43 |   // 容器组件 存放的子元素
 44 |   children?: LowElement[];
 45 |   models: {
 46 |     [key: string]: '[model_key].?[key].?[key]', // key 为自定义
 47 |   },
 48 |   // 动作，这一块比较复杂
 49 |   // 原本设计为[key:value]，由于可能存在描述信息，所以目前改成{xxx}
 50 |   actions: [
 51 |     {
 52 |       key: string, // 随机生成
 53 |       // 事件名称 按组件动态创建
 54 |       name: string,
 55 |       // event: 'click' | 'change' | 'submit', // 对应的可能是 @[event]="" 这个操作
 56 |       event?: string, // 目前只有组件中才有意义
 57 |       // 动作 目前按同步执行
 58 |       handle: [
 59 |         {
 60 |           key: string, // 随机生成
 61 |           name: string,
 62 |           // location表示动作存在的位置 一般为element、global, type 表示类型 （如 fetch 发送请求）
 63 |           // location 可能还有些复杂的设计 如元素可能绑定一个id，全局中是global_[namespace] 元素中可能是 element_[id]
 64 |           // 例子: global_dialog.b2d12 | element_1e4sa.12342
 65 |           link: '[location].[key]', // 关联 的触发动作 可能是发送请求 可能是 触发其他元素的动作
 66 |           // 这个可用于接口方法和传输 以及 Open dialog
 67 |           data?: {
 68 |             // 参考 models
 69 |             bind?: string, // 绑定的数据源 接口请求、打开dialog或者其他需要数据关联的操作
 70 |             recv?: string, // 接受响应的数据源
 71 |           }
 72 |         },
 73 |         // ... more
 74 |       ]
 75 |     },
 76 |     // ... more
 77 |   ]
 78 | }
 79 | ```
 80 | 
 81 | ## 数据源结构
 82 | 
 83 | > 模型、类型 的值（默认值） 均为序列数据 需要反序列成对应类型数据
 84 | 
 85 | ```TypeScript
 86 | /**
 87 | * 数据类型
 88 | */
 89 | types = [
 90 |   {
 91 |     type: 'string',
 92 |     value: '""',
 93 |     label: "字符串"
 94 |   },
 95 |   {
 96 |     type: 'number',
 97 |     value: '0',
 98 |     label: "数字"
 99 |   },
100 |   {
101 |     type: 'boolean',
102 |     value: 'false',
103 |     label: "布尔"
104 |   },
105 |   {
106 |     type: 'array',
107 |     value: '[]',
108 |     label: "数组"
109 |   },
110 | ];
111 | /**
112 | * 模型
113 | */
114 | models = [
115 |   {
116 |     name: "表单", // 数据源名称
117 |     key: 'model_1a52926d55f3', // 绑定的字段 该字段创建的时候生成
118 |     // 实体
119 |     entities: [
120 |       {
121 |         key: 'username', // 绑定的字段 输入
122 |         name: "用户名", // 实体名称 输入
123 |         type: 'string', // 数据类型 选择
124 |         value: '""', // 默认值 输入
125 |       },
126 |       {
127 |         key: 'password', // 绑定的字段 输入
128 |         name: "密码", // 实体名称 输入
129 |         type: 'string', // 数据类型 选择
130 |         value: '""', // 默认值 输入
131 |       },
132 |       // ...more
133 |     ]
134 |   }
135 | ]
136 | 
137 | /**
138 | * 数据 通过该 模型生成的结构体
139 | */
140 | data = {
141 |   model_1a52926d55f3: {
142 |     username: '',
143 |     password: ''
144 |   }
145 | }
146 | 
147 | /**
148 | * 全局动作
149 | * 用于定义如打开dialog, 发送请求
150 | */
151 | actions = {
152 |   // namespace为命名空间 一般已经内置命名空间 如 dialog fetch 等
153 |   // 每个命名空间对应一个 解析/执行 器
154 |   [namespace: string]: {
155 |     name: string,
156 |     actions: [
157 |       {
158 |         key: string, // 随机生成
159 |         //  eventName 事件名称 按组件/自定义名称动态创建
160 |         name: string,
161 |         // event: 'click' | 'change' | 'submit', // 对应的可能是 @[event]="" 这个操作
162 |         event?: string, // 目前只有组件中才有意义
163 |         // 动作 目前按同步执行
164 |         handle: [
165 |           // 需要根据解析器具体操作
166 |           // ... more
167 |         ],
168 |         data: {
169 |           bind: '',
170 |           recv: '', // 获取
171 |           replace: [], // 需要取代的值，目前用于数组中（项）的下标
172 |         }
173 |       }
174 |     ],
175 |     // ... more
176 |   }
177 | }
178 | ```
179 | 
180 | ## 操作方面
181 | 
182 | ### FIRST 产生的一些问题/想法
183 | 
184 | 采用拖拽的方式，非容器组件不能存在其他组件，指定组件只能存在指定组件中？  
185 | 点击元素进行一些数据关联、属性增删、事件监听？  
186 | 
187 | 突然发现嵌套关系应该有祖先关系的 比如 `el-form-item` 只要在 `el-form` 的子孙就行  
188 | 
189 | 固定画布元素避免匹配排序问题   
190 | 
191 | 拖动节点的时候带走子孙节点 间接导致出现的问题
192 | 
193 | 最终还是需要模版化才是最优的
194 | 
195 | 历史栈/快照  
196 | 
197 | 多Slot的情况  
198 | 
199 | 实际上从待定组件列表中拖动到画布中的时候有些待定组件的属性应该去除或者更改  
200 | 
201 | 必须有一个可以选择边距的元素才行  
202 | 
203 | ### NEXT 产生的问题/想法
204 | 
205 | 想这个的时候脑子爆栈了, 所以用笔辅助了一下，字很差，看个灵魂就好。
206 | ![models](./docs-assets/models.jpg)  
207 | 
208 | 感觉操作逐渐复杂起来  
209 | 
210 | 感觉还得有个替换父级的功能  
211 | 
212 |   
213 | 需要做到职责分明  
214 | 如果提交、重置应该放在表单  
215 | 表格只需要绑定数据源剩下数据应该由其他相关事件获取（如分页操作、搜索、初始化）  
216 | 
217 | 所以表单完成后需要一些操作如清空表单、更新数据源     
218 | 
219 | 一个接口可以对应多个数据源  
220 | 
221 | 数据源添加/设置中模型可能会有点问题，
222 | 
223 | 数据源的序列数据 目前使用JSON进行序列还存在一些问题。
224 | 
225 | 页面管理基本完成
226 | 
227 | ### 动作
228 | 
229 | 一、类型  
230 | 1. 组件创建进入获取初始化数据
231 | 2. 增删改，分页
232 | 3. 弹框 
233 | 4. 表单提交    
234 | 5. 页面跳转 可能带参数
235 | 
236 | 二、其他
237 | 1. 时机   无非分为多个动作
238 | 2. 动作   无非是（操作/提交）数据源 和 API调用
239 | 
240 | ## 进度
241 | 
242 | ### ✅ FIRST 生成前端代码
243 | 
244 | 目前正在做第一步，生成Vue代码。  
245 | 预计 `十月底` 完成。
246 | 
247 | > 目前进度：   
248 | > 1. 拖拽使用`Vue.Draggable`库基本功能完善  
249 | > 2. 丰富 `代理组件` 便于以后解耦  
250 | > 3. JSON 转换成Vue + element 组件代码
251 | 
252 | ### 🙆 NEXT ING
253 | 
254 | 预计`十一月中旬`动工 （有些个人的事情要处理）
255 | 
256 | 1. 数据源 （用于表单数据绑定）   
257 | 2. 事件  
258 | 3. 简单关联的接口
259 | 4. 权限
260 | 5. thinking
261 | 


--------------------------------------------------------------------------------
/src/components/options/Button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="文案">
 11 |         <el-input v-model="form.text" placeholder="请输入文案"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="图标">
 15 |         <el-input v-model="form.icon" placeholder="请输入图标名称"></el-input>
 16 |       </el-form-item>
 17 | 
 18 |       <el-form-item label="尺寸">
 19 |         <el-select v-model="form.size">
 20 |           <el-option label="默认" value=""> </el-option>
 21 |           <el-option label="中等" value="medium"> </el-option>
 22 |           <el-option label="小" value="small"> </el-option>
 23 |           <el-option label="迷你" value="mini"> </el-option>
 24 |         </el-select>
 25 |       </el-form-item>
 26 |       <el-form-item label="类型">
 27 |         <el-select v-model="form.type">
 28 |           <el-option label="默认" value=""> </el-option>
 29 |           <el-option label="主要" value="primary"> </el-option>
 30 |           <el-option label="成功" value="success"> </el-option>
 31 |           <el-option label="警告" value="warning"> </el-option>
 32 |           <el-option label="危险" value="danger"> </el-option>
 33 |           <el-option label="提示" value="info"> </el-option>
 34 |           <el-option label="文字" value="text"> </el-option>
 35 |         </el-select>
 36 |       </el-form-item>
 37 | 
 38 |       <el-form-item label="原生 type 属性">
 39 |         <el-select v-model="form.nativeType">
 40 |           <el-option label="默认" value=""> </el-option>
 41 |           <el-option label="按钮" value="button"> </el-option>
 42 |           <el-option label="提交" value="submit"> </el-option>
 43 |           <el-option label="重置" value="reset"> </el-option>
 44 |         </el-select>
 45 |       </el-form-item>
 46 | 
 47 |       <el-form-item label="朴素">
 48 |         <el-switch v-model="form.plain"> </el-switch>
 49 |       </el-form-item>
 50 | 
 51 |       <el-form-item label="圆角">
 52 |         <el-switch v-model="form.round"> </el-switch>
 53 |       </el-form-item>
 54 | 
 55 |       <el-form-item label="圆形">
 56 |         <el-switch v-model="form.circle"> </el-switch>
 57 |       </el-form-item>
 58 | 
 59 |       <el-form-item label="禁用">
 60 |         <el-switch v-model="form.disabled"> </el-switch>
 61 |       </el-form-item>
 62 | 
 63 |       <el-form-item label="默认聚焦">
 64 |         <el-switch v-model="form.autofocus"> </el-switch>
 65 |       </el-form-item>
 66 | 
 67 |       <el-form-item>
 68 |         <div class="formAction">
 69 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 70 |           <el-button @click="handleClose">取消</el-button>
 71 |         </div>
 72 |       </el-form-item>
 73 |       <el-form-item>
 74 |         <div class="formAction">
 75 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 76 |         </div>
 77 |       </el-form-item>
 78 |     </el-form>
 79 |   </div>
 80 | </template>
 81 | <script lang="ts">
 82 | import { LowElement } from '@/types/Element';
 83 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 84 | import BaseOptions from './BaseOptions';
 85 | 
 86 | type LowProps = {
 87 |   size: "medium" | "small" | "mini" | '';
 88 |   type: "primary" | "success" | "warning" | "danger" | "info" | "text" | '';
 89 |   plain: boolean;
 90 |   round: boolean;
 91 |   circle: boolean;
 92 |   disabled: boolean;
 93 |   icon: string;
 94 |   autofocus: boolean;
 95 |   nativeType: boolean;
 96 |   text: string;
 97 | }
 98 | 
 99 | @Component({
100 | 
101 | })
102 | export default class Button extends BaseOptions {
103 | 
104 |   get props () {
105 |     return this.element ? this.element.props : null
106 |   }
107 | 
108 |   rules = {
109 | 
110 |   };
111 | 
112 |   form: LowProps = {
113 |     size: this.props ? this.props.size || '' : '',
114 |     type: this.props ? this.props.type || '' : '',
115 |     plain: this.props ? this.props.plain || false : false,
116 |     round: this.props ? this.props.round || false : false,
117 |     circle: this.props ? this.props.circle || false : false,
118 |     disabled: this.props ? this.props.disabled || false : false,
119 |     icon: this.props ? this.props.icon || '' : '',
120 |     autofocus: this.props ? this.props.autofocus || false : false,
121 |     nativeType: this.props ? this.props.nativeType || '' : '',
122 |     text: this.props ? this.props.text || '' : ''
123 |   }
124 | 
125 |   timer: number = 0;
126 | 
127 |   @Watch('props')
128 |   elementWatch (newVal: Element, oldVal: Element) {
129 |     if (newVal === oldVal) return;
130 | 
131 |     this.form.size = this.props ? this.props.size || '' : '';
132 |     this.form.type = this.props ? this.props.type || '' : '';
133 |     this.form.plain = this.props ? this.props.plain || false : false;
134 |     this.form.round = this.props ? this.props.round || false : false;
135 |     this.form.circle = this.props ? this.props.circle || false : false;
136 |     this.form.disabled = this.props ? this.props.disabled || false : false;
137 |     this.form.icon = this.props ? this.props.icon || '' : '';
138 |     this.form.autofocus = this.props ? this.props.autofocus || false : false;
139 |     this.form.nativeType = this.props ? this.props.nativeType || '' : '';
140 |     this.form.text = this.props ? this.props.text || '' : '';
141 | 
142 |   }
143 | 
144 |   @Watch('form', { deep: true })
145 |   formWatch (newVal: LowProps, oldVal: LowProps) {
146 |     // 将参数添加进去
147 |     this.handleUpdate();
148 |   }
149 |   handleUpdate () {
150 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form })
151 |   }
152 |   onSubmit () {
153 | 
154 |   }
155 |   /**
156 |    * 取消
157 |    */
158 |   handleClose () {
159 |     this.$store.commit("page/SET_CURRENT", undefined);
160 |   }
161 | 
162 |   handleRemove () {
163 |     this.$store.commit("page/REMOVE_CURRENT");
164 |     this.$store.commit("page/SET_CURRENT", undefined);
165 |   }
166 | }
167 | 
168 | </script>
169 | <style lang="scss" scoped>
170 | .row-option {
171 |   padding: 10px;
172 |   .formAction {
173 |     display: flex;
174 |     justify-content: center;
175 |     align-items: center;
176 |   }
177 | }
178 | </style>


--------------------------------------------------------------------------------
/src/components/options/Input.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row-option">
  3 |     <el-form
  4 |       :model="form"
  5 |       ref="form"
  6 |       :rules="rules"
  7 |       :inline="false"
  8 |       size="mini"
  9 |     >
 10 |       <el-form-item label="输入框占位文本">
 11 |         <el-input v-model="form.placeholder" placeholder="请输入"></el-input>
 12 |       </el-form-item>
 13 | 
 14 |       <el-form-item label="最大输入长度">
 15 |         <el-input-number
 16 |           v-model="form.maxlength"
 17 |           placeholder="请输入"
 18 |         ></el-input-number>
 19 |       </el-form-item>
 20 | 
 21 |       <el-form-item label="最小输入长度">
 22 |         <el-input-number
 23 |           v-model="form.minlength"
 24 |           placeholder="请输入"
 25 |         ></el-input-number>
 26 |       </el-form-item>
 27 | 
 28 |       <el-form-item label="输入框头部图标">
 29 |         <el-input v-model="form.prefixIcon"></el-input>
 30 |       </el-form-item>
 31 | 
 32 |       <el-form-item label="输入框尾部图标">
 33 |         <el-input v-model="form.suffixIcon"></el-input>
 34 |       </el-form-item>
 35 | 
 36 |       <el-form-item label="输入框行数" v-if="form.type === 'textarea'">
 37 |         <el-input-number :min="1" v-model="form.rows"></el-input-number>
 38 |       </el-form-item>
 39 | 
 40 |       <el-form-item label="输入框的tabindex">
 41 |         <el-input-number :min="0" v-model="form.tabindex"></el-input-number>
 42 |       </el-form-item>
 43 | 
 44 |       <el-form-item label="类型">
 45 |         <el-select v-model="form.type">
 46 |           <el-option label="默认" value=""> </el-option>
 47 |           <el-option label="主要" value="text"> </el-option>
 48 |           <el-option label="成功" value="textarea"> </el-option>
 49 |         </el-select>
 50 |       </el-form-item>
 51 | 
 52 |       <el-form-item label="尺寸">
 53 |         <el-select v-model="form.size">
 54 |           <el-option label="默认" value=""> </el-option>
 55 |           <el-option label="中等" value="medium"> </el-option>
 56 |           <el-option label="小" value="small"> </el-option>
 57 |           <el-option label="迷你" value="mini"> </el-option>
 58 |         </el-select>
 59 |       </el-form-item>
 60 | 
 61 |       <el-form-item label="显示输入字数统计">
 62 |         <el-switch v-model="form.showWordLimit"> </el-switch>
 63 |       </el-form-item>
 64 | 
 65 |       <el-form-item label="可清空">
 66 |         <el-switch v-model="form.clearable"> </el-switch>
 67 |       </el-form-item>
 68 | 
 69 |       <el-form-item label="显示切换密码图标">
 70 |         <el-switch v-model="form.showPassword"> </el-switch>
 71 |       </el-form-item>
 72 | 
 73 |       <el-form-item label="禁用">
 74 |         <el-switch v-model="form.disabled"> </el-switch>
 75 |       </el-form-item>
 76 | 
 77 |       <el-form-item label="默认聚焦">
 78 |         <el-switch v-model="form.autofocus"> </el-switch>
 79 |       </el-form-item>
 80 | 
 81 |       <el-form-item label="只读">
 82 |         <el-switch v-model="form.readonly"> </el-switch>
 83 |       </el-form-item>
 84 | 
 85 |       <el-form-item>
 86 |         <div class="formAction">
 87 |           <el-button type="primary" @click="onSubmit">完成</el-button>
 88 |           <el-button @click="handleClose">取消</el-button>
 89 |         </div>
 90 |       </el-form-item>
 91 |       <el-form-item>
 92 |         <div class="formAction">
 93 |           <el-button type="danger" @click="handleRemove">删除</el-button>
 94 |         </div>
 95 |       </el-form-item>
 96 |     </el-form>
 97 |   </div>
 98 | </template>
 99 | <script lang="ts">
100 | import { LowElement } from '@/types/Element';
101 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
102 | import BaseOptions from './BaseOptions';
103 | 
104 | type LowProps = {
105 |   size: "medium" | "small" | "mini" | '';
106 |   type: "text" | "textarea" | '';
107 | 
108 |   disabled: boolean;
109 |   autofocus: boolean;
110 | 
111 |   maxlength: number | undefined;
112 |   minlength: number | undefined;
113 |   showWordLimit: boolean;
114 |   placeholder: string;
115 |   clearable: boolean;
116 |   showPassword: boolean;
117 |   prefixIcon: string;
118 |   suffixIcon: string;
119 |   rows: number | undefined;
120 |   readonly: boolean;
121 |   tabindex: number | undefined;
122 | 
123 | }
124 | 
125 | @Component({
126 | 
127 | })
128 | export default class Input extends BaseOptions {
129 | 
130 |   get props () {
131 |     return this.element ? this.element.props : null
132 |   }
133 | 
134 |   rules = {
135 | 
136 |   };
137 | 
138 |   form: LowProps = {
139 |     size: '',
140 |     type: '',
141 |     disabled: false,
142 |     autofocus: false,
143 |     maxlength: undefined,
144 |     minlength: undefined,
145 |     showWordLimit: false,
146 |     placeholder: '',
147 |     clearable: false,
148 |     showPassword: false,
149 |     prefixIcon: '',
150 |     suffixIcon: '',
151 |     rows: undefined,
152 |     readonly: false,
153 |     tabindex: undefined,
154 |   }
155 |   defaultForm: any;
156 | 
157 |   timer: number = 0;
158 | 
159 |   created () {
160 |     this.defaultForm = Object.assign({}, this.form);
161 |     this.handleUpdateData();
162 |   }
163 | 
164 |   handleUpdateData () {
165 |     const props = this.props;
166 |     const form: any = {};
167 |     Object.keys(this.form).forEach(key => {
168 |       const val = props ? props[key] : this.defaultForm[key];
169 |       this.$set(this.form, key, val);
170 |       form[key] = val;
171 |     });
172 |     // this.form = form;
173 |   }
174 | 
175 |   @Watch('props')
176 |   elementWatch (newVal: Element, oldVal: Element) {
177 |     if (newVal === oldVal) return;
178 |     this.handleUpdateData();
179 |   }
180 | 
181 |   @Watch('form', { deep: true })
182 |   formWatch (newVal: LowProps, oldVal: LowProps) {
183 |     // 将参数添加进去
184 |     this.handleUpdate();
185 |   }
186 |   handleUpdate () {
187 |     this.$store.commit('page/UPDATE_CURRENT_PROPS', { ...this.form });
188 |   }
189 |   onSubmit () {
190 | 
191 |   }
192 |   /**
193 |    * 取消
194 |    */
195 |   handleClose () {
196 |     this.$store.commit("page/SET_CURRENT", undefined);
197 |   }
198 | 
199 |   handleRemove () {
200 |     this.$store.commit("page/REMOVE_CURRENT");
201 |     this.$store.commit("page/SET_CURRENT", undefined);
202 |   }
203 | }
204 | 
205 | </script>
206 | <style lang="scss" scoped>
207 | .row-option {
208 |   padding: 10px;
209 |   .formAction {
210 |     display: flex;
211 |     justify-content: center;
212 |     align-items: center;
213 |   }
214 | }
215 | </style>


--------------------------------------------------------------------------------
/src/store/modules/page.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @description 模型、类型 的值（默认值） 均为序列数据 需要反序列成对应类型数据
  3 |  */
  4 | import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';
  5 | import { cloneDeep } from 'lodash'
  6 | import { History } from 'stateshot'
  7 | 
  8 | import { getFinderFunctionByChildKeyFromTree } from '@/utils'
  9 | import { LowElement } from '@/types/Element';
 10 | import PageEntity from '../entities/Page';
 11 | 
 12 | const history = new History();
 13 | 
 14 | const flattenElementsDeep = (element: LowElement) => {
 15 |    const arr = [element];
 16 | 
 17 |    element.children?.forEach(item => {
 18 |       const list = flattenElementsDeep(item);
 19 |       arr.push(...list);
 20 |    });
 21 | 
 22 |    return arr;
 23 | }
 24 | 
 25 | @Module({
 26 |    namespaced: true,
 27 | })
 28 | class PageStore extends VuexModule {
 29 | 
 30 |    id: string = '';
 31 |    title: string = '';
 32 |    icon: string = '';
 33 |    update_time = Date.now();
 34 |    /**
 35 |     * 页面当前选中id
 36 |     */
 37 |    currentId: string | undefined | null = undefined;
 38 |    /**
 39 |     * 页面当前元素列表
 40 |     */
 41 |    elements: LowElement = {
 42 |       "id": "c6174605-fb74-4fcb-884e-1a52926d55f3",
 43 |       "element": "layout", // 元素名称 or 类型
 44 |       "type": "container", // container or element
 45 |       "children": []
 46 |    };
 47 | 
 48 |    // ---------------------------------------------
 49 |    // -----------------getters--------------------
 50 |    // ---------------------------------------------
 51 |    /**
 52 |     * 当前选择元素
 53 |     */
 54 |    get current () {
 55 |       const state = this;
 56 |       if (typeof state.currentId === 'string') {
 57 |          const find = getFinderFunctionByChildKeyFromTree(state.elements);
 58 |          const resData = find(state.currentId)
 59 |          return Array.isArray(resData) ? resData[1] : resData;
 60 |       }
 61 |       return null;
 62 |    }
 63 | 
 64 |    /**
 65 |     * 扁平后元素列表
 66 |     */
 67 |    get flatElements () {
 68 |       const state = this;
 69 |       return flattenElementsDeep(state.elements);
 70 |    }
 71 | 
 72 |    // ---------------------------------------------
 73 |    // -----------------Action--------------------
 74 |    // ---------------------------------------------
 75 | 
 76 |    /**
 77 |     * 初始化页面
 78 |     */
 79 |    @Action
 80 |    init (pageEntity: PageEntity) {
 81 |       this.context.commit('INIT_PAGE', pageEntity);
 82 |    }
 83 | 
 84 |    /**
 85 |     * 刷新
 86 |     */
 87 |    @Action
 88 |    refresh () {
 89 |       this.context.commit('REFRESH_ELEMENTS');
 90 |    }
 91 | 
 92 |    /**
 93 |     * 保存
 94 |     */
 95 |    @Action
 96 |    save () {
 97 |       // 发送保存请求
 98 |       this.context.commit('SAVE');
 99 |    }
100 | 
101 | 
102 |    /**
103 |     * 清空画布
104 |     */
105 |    @Action
106 |    clear_canvas () {
107 |       this.context.commit('CLEAR_ELEMENTS')
108 |    }
109 |    // ---------------------------------------------
110 |    // -----------------Mutation--------------------
111 |    // ---------------------------------------------
112 | 
113 |    @Mutation
114 |    SAVE () {
115 |    }
116 |    @Mutation
117 |    INIT_ELEMENT (payload: LowElement) {
118 |       this.elements = payload;
119 |    }
120 |    @Mutation
121 |    INIT_PAGE (payload: PageEntity) {
122 |       this.id = payload.id;
123 |       this.icon = payload.icon;
124 |       this.title = payload.title;
125 |       this.elements = payload.elements;
126 | 
127 |       history.reset();
128 |    }
129 |    /**
130 |     * 清除元素
131 |     */
132 |    @Mutation
133 |    CLEAR_ELEMENTS () {
134 |       const state = this;
135 |       history.reset();
136 | 
137 |       state.elements = {
138 |          "id": "c6174605-fb74-4fcb-884e-1a52926d55f3",
139 |          "element": "layout", // 元素名称 or 类型
140 |          "type": "container", // container or element
141 |          "children": []
142 |       };
143 |    }
144 |    /**
145 |     * 更新历史
146 |     */
147 |    @Mutation
148 |    UPDATE () {
149 |       const state = this;
150 |       // 添加到历史
151 |       // console.log('history', history.get());
152 |       history.pushSync(state.elements);
153 |       // console.log('history', history.get());
154 | 
155 |    }
156 |    /**
157 |     * 撤回
158 |     */
159 |    @Mutation
160 |    UNDO () {
161 |       this.elements = history.undo().get();
162 |    }
163 |    /**
164 |     * 取消撤回（反相撤回）
165 |     */
166 |    @Mutation
167 |    REDO () {
168 |       this.elements = history.redo().get();
169 |    }
170 |    /**
171 |     * 设置当前元素
172 |     * @param payload 
173 |     */
174 |    @Mutation
175 |    SET_CURRENT (payload: string) {
176 |       this.currentId = payload;
177 |    }
178 |    /**
179 |     * 绑定模型
180 |     * @param payload 
181 |     */
182 |    @Mutation
183 |    BIND_MODELS (payload: any) {
184 |       if (typeof this.currentId !== 'string') return;
185 |       const find = getFinderFunctionByChildKeyFromTree(this.elements);
186 |       let [parent, current] = find(this.currentId);
187 | 
188 |       if (current) {
189 |          current = current as LowElement;
190 |          current.models = payload;
191 |       }
192 |    }
193 |    /**
194 |     * 更新当前选中元素的参数
195 |     * @param payload 
196 |     */
197 |    @Mutation
198 |    UPDATE_CURRENT_PROPS (payload: any) {
199 |       if (typeof this.currentId !== 'string') return;
200 |       const find = getFinderFunctionByChildKeyFromTree(this.elements);
201 |       let [parent, current, index] = find(this.currentId);
202 |       if (current) {
203 |          current = current as LowElement;
204 |          parent = parent as LowElement;
205 |          // index = index as number;
206 | 
207 |          current.props = payload;
208 |          // const id = current.id;
209 |          // TODO: 这里有问题
210 |          // if (parent && Array.isArray(parent.children)) {
211 |          //   // index = parent.children.findIndex(item => item.id === id)
212 |          //   // parent.children.splice(index, 1, current);
213 |          // }
214 |       }
215 |    }
216 |    /**
217 |     * 移除当前元素
218 |     */
219 |    @Mutation
220 |    REMOVE_CURRENT () {
221 |       if (typeof this.currentId !== 'string') return;
222 |       const find = getFinderFunctionByChildKeyFromTree(this.elements);
223 |       let [parent, current, index] = find(this.currentId);
224 |       if (current) {
225 |          current = current as LowElement;
226 |          parent = parent as LowElement;
227 |          // index = index as number;
228 |          const id = current.id;
229 | 
230 |          if (parent && Array.isArray(parent.children)) {
231 |             index = parent.children.findIndex(item => item.id === id)
232 |             parent.children.splice(index, 1);
233 |          }
234 |       }
235 |    }
236 |    /**
237 |     * 刷新缓存
238 |     */
239 |    @Mutation
240 |    REFRESH_ELEMENTS () {
241 |       this.elements = cloneDeep(this.elements);
242 |    }
243 | }
244 | 
245 | export default PageStore;
246 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" v-if="!refresh">
  3 |     <el-container class="layout">
  4 |       <el-header height="50px">
  5 |         <div class="layout-header">
  6 |           <img src="@/assets/images/logo.png" alt />
  7 |           <p>LowCode</p>
  8 |           <div class="tools-bar">
  9 |             <el-button
 10 |               type="primary"
 11 |               size="mini"
 12 |               icon="el-icon-document"
 13 |               plain
 14 |               circle
 15 |               @click="handleShowCodeData"
 16 |             ></el-button>
 17 |             <el-button
 18 |               type="primary"
 19 |               size="mini"
 20 |               icon="el-icon-view"
 21 |               plain
 22 |               circle
 23 |               @click="handleChangeShow"
 24 |             ></el-button>
 25 |             <el-button
 26 |               type="danger"
 27 |               size="mini"
 28 |               icon="el-icon-refresh"
 29 |               plain
 30 |               circle
 31 |               @click="handleClearCanvas"
 32 |             ></el-button>
 33 |           </div>
 34 |         </div>
 35 |       </el-header>
 36 |       <el-container>
 37 |         <el-aside width="280px">
 38 |           <low-aside />
 39 |         </el-aside>
 40 |         <el-main>
 41 |           <div class="layout-main">
 42 |             <drag-layout v-model="elements" :show="show" />
 43 |           </div>
 44 |         </el-main>
 45 |       </el-container>
 46 |     </el-container>
 47 |     <el-dialog
 48 |       title="代码"
 49 |       :visible.sync="showCode"
 50 |       width="680px"
 51 |       @close="showCode = false"
 52 |     >
 53 |       <el-tabs>
 54 |         <el-tab-pane label="CODE">
 55 |           <textarea
 56 |             style="width: 100%; box-sizing: border-box; padding: 10px"
 57 |             rows="20"
 58 |             :value="code"
 59 |             disabled
 60 |           ></textarea>
 61 |         </el-tab-pane>
 62 |         <el-tab-pane label="JSON">
 63 |           <textarea
 64 |             style="width: 100%; box-sizing: border-box; padding: 10px"
 65 |             rows="20"
 66 |             :value="JSON.stringify(elements, null, 2)"
 67 |             disabled
 68 |           ></textarea>
 69 |         </el-tab-pane>
 70 |       </el-tabs>
 71 | 
 72 |       <span slot="footer">
 73 |         <el-button size="mini" @click="showCode = false">Cancel</el-button>
 74 |         <el-button type="primary" size="mini" v-clipboard="code"
 75 |           >Copy</el-button
 76 |         >
 77 |       </span>
 78 |     </el-dialog>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script lang="ts">
 83 | import DragLayout from './components/DragLayout.vue'
 84 | import Aside from '@/components/aside/Index.vue';
 85 | import prettier from 'prettier/standalone';
 86 | import parserHtml from 'prettier/parser-html';
 87 | import { Component, Vue, Watch } from 'vue-property-decorator';
 88 | import mixins from '@/mixins';
 89 | import { State } from 'vuex-class';
 90 | import { LowElement } from './types/Element';
 91 | import Clipboard from 'v-clipboard'
 92 | import tinykeys from 'tinykeys';
 93 | 
 94 | Vue.use(Clipboard);
 95 | 
 96 | @Component({
 97 |   components: {
 98 |     'drag-layout': DragLayout,
 99 |     'low-aside': Aside
100 |   },
101 |   mixins: [mixins],
102 | })
103 | export default class App extends Vue {
104 | 
105 |   private created () {
106 |     this.$store.dispatch('init');
107 |     // localStorage.removeItem('preview');
108 |     //
109 |     tinykeys(window, {
110 |       "$mod+z": () => {
111 |         this.$store.commit('page/UNDO');
112 |       },
113 |       "$mod+Shift+z": () => {
114 |         // 反撤回
115 |         this.$store.commit('page/REDO');
116 |       },
117 |       "$mod+d": event => {
118 |         event.preventDefault()
119 |         if (typeof this.$store.state.page.currentId === 'undefined') return;
120 |         this.$store.commit("page/REMOVE_CURRENT");
121 |         this.$store.commit("page/SET_CURRENT", undefined);
122 |       }
123 |     })
124 |   }
125 | 
126 |   refresh: boolean = false;
127 | 
128 |   isMove: boolean = false;
129 |   currentId: string | number | null = null;
130 |   // @State('elements')
131 |   // elements: any;
132 | 
133 |   // @Watch('$store')
134 |   // elementsWatch(){
135 |   //   console.log(1);
136 |   // }
137 | 
138 |   get elements () {
139 |     return this.$store.state.page.elements;
140 |   }
141 |   set elements (val) {
142 |   }
143 | 
144 | 
145 |   show: boolean = !!localStorage.getItem('preview');;
146 | 
147 |   code: string = '';
148 | 
149 |   showCode: boolean = false;
150 | 
151 |   handleChangeShow () {
152 |     this.show = !this.show;
153 |     if (this.show) {
154 |       localStorage.setItem('preview', 'true');
155 |       // 直接整体更新一下sotre 同时强制更新一下更新视图
156 |       this.$store.dispatch("page/refresh")
157 |       this.refresh = true;
158 |       this.$nextTick(() => {
159 |         this.refresh = false;
160 |       })
161 |     } else {
162 |       localStorage.removeItem('preview');
163 |     }
164 |   }
165 |   async handleClearCanvas () {
166 |     await this.$confirm(`是否确认清除画布？`);
167 |     await this.$store.dispatch('page/clear_canvas');
168 |     this.$notify.success('清除成功');
169 |   }
170 |   handleShowCodeData () {
171 |     function generate (item: LowElement) {
172 |       const props = item.props || {};
173 |       const tagName = `el-${item.element}`;
174 | 
175 |       let children: string = (item.children || []).map(item => {
176 |         return generate(item);
177 |       }).join('\n');
178 | 
179 |       if (children) {
180 |         children = '\n' + children + '\n';
181 |       }
182 |       const atter = Object.keys(props).filter(key => props[key]).reduce((pv: string, key: string) => {
183 | 
184 |         const value = JSON.stringify(props[key]);
185 | 
186 |         pv += ` :${key}='${value}'`
187 | 
188 |         return pv;
189 |       }, '');
190 |       const element = `<${tagName} ${atter}>${children}</${tagName}>`;
191 | 
192 |       return element;
193 |     }
194 |     const code = prettier.format(generate(this.$store.state.page.elements), {
195 |       parser: "html",
196 |       plugins: [parserHtml],
197 |     });
198 | 
199 |     this.code = code;
200 |     this.showCode = true;
201 | 
202 |   }
203 | 
204 |   // handle
205 | 
206 | }
207 | </script>
208 | 
209 | <style lang="scss">
210 | $layout-bgc: #ffffff;
211 | #app {
212 |   .move-test {
213 |     cursor: pointer;
214 |     user-select: none;
215 |     padding: 10px;
216 |     &:hover {
217 |       border: 1px solid #ccc;
218 |       border-radius: 4px;
219 |     }
220 |   }
221 |   .layout {
222 |     box-sizing: border-box;
223 |     height: 100vh;
224 |     display: flex;
225 |     .el-header {
226 |       background-color: $layout-bgc;
227 |       border-bottom: 1px solid #f0f0f0;
228 |       box-shadow: 0 0 6px #f0f0f0;
229 |       position: relative;
230 |       z-index: 10;
231 |     }
232 |     .el-aside {
233 |       /* color: #fff; */
234 |       background-color: #fafafa;
235 |       border-right: 1px solid #f0f0f0;
236 |       box-shadow: 0 6px 5px rgba($color: #888, $alpha: 0.1);
237 |     }
238 |     .layout-main {
239 |       position: relative;
240 |     }
241 |     .layout-header {
242 |       display: flex;
243 |       align-items: center;
244 |       color: #333;
245 |       height: 100%;
246 | 
247 |       img {
248 |         /* filter: invert(1); */
249 |         width: 38px;
250 |       }
251 |       p {
252 |         margin-left: 12px;
253 |         font-weight: bold;
254 |         font-size: 16px;
255 |         color: #212121;
256 |       }
257 |       .tools-bar {
258 |         display: flex;
259 |         align-items: center;
260 |         padding-left: 20px;
261 |       }
262 |     }
263 |   }
264 | }
265 | * {
266 |   padding: 0;
267 |   margin: 0;
268 | }
269 | </style>
270 | 


--------------------------------------------------------------------------------
/src/components/actions/components/GlobalActionFetch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="action-fetch" v-if="actions.actions">
  3 |     <!-- addAction -->
  4 |     <div class="action-header-tools">
  5 |       <el-button type="primary" size="mini" @click="handleAddAction"
  6 |         >添加动作</el-button
  7 |       >
  8 |     </div>
  9 |     <div v-for="action in actions.actions" :key="action.key" class="fetch-item">
 10 |       <p class="item-name">{{ action.name }}</p>
 11 |       <div class="item-operate">
 12 |         <i class="el-icon-edit fetch-edit" @click="handleEditItem(action)"></i>
 13 |         <i
 14 |           class="el-icon-close fetch-remove"
 15 |           @click="handleDeleteItem(action)"
 16 |         ></i>
 17 |       </div>
 18 |     </div>
 19 |     <el-dialog
 20 |       title="操作"
 21 |       :visible.sync="dialogVisible"
 22 |       width="480px"
 23 |       :before-close="dialogBeforeClose"
 24 |     >
 25 |       <el-form
 26 |         :model="form"
 27 |         ref="form"
 28 |         :rules="rules"
 29 |         label-width="80px"
 30 |         :inline="false"
 31 |         size="mini"
 32 |       >
 33 |         <el-form-item label="名称" prop="name">
 34 |           <el-input v-model="form.name" placeholder="请输入名称"></el-input>
 35 |         </el-form-item>
 36 | 
 37 |         <el-form-item label="接口" prop="api">
 38 |           <el-input placeholder="请输入接口地址" v-model="form.api">
 39 |             <el-select
 40 |               v-model="form.method"
 41 |               slot="prepend"
 42 |               placeholder="请接口类型"
 43 |             >
 44 |               <el-option label="GET" value="GET"></el-option>
 45 |               <el-option label="POST" value="POST">POST</el-option>
 46 |               <el-option label="DELETE" value="DELETE"></el-option>
 47 |               <el-option label="PUT" value="PUT"></el-option>
 48 |             </el-select>
 49 |             <el-button slot="append" icon="el-icon-search"></el-button>
 50 |           </el-input>
 51 |         </el-form-item>
 52 | 
 53 |         <el-form-item label="数据" prop="data">
 54 |           <div class="dialog-data-box" v-if="form.data">
 55 |             <el-form-item
 56 |               label="请求数据"
 57 |               prop="data.bind"
 58 |               :rules="{
 59 |                 required: true,
 60 |                 message: '不能为空',
 61 |                 trigger: 'change',
 62 |               }"
 63 |             >
 64 |               <el-cascader
 65 |                 clearable
 66 |                 :props="{
 67 |                   checkStrictly: true,
 68 |                   children: 'entities',
 69 |                   label: 'name',
 70 |                   value: 'key',
 71 |                   expandTrigger: 'hover',
 72 |                 }"
 73 |                 placeholder="请选择绑定的请求数据"
 74 |                 @change="handleBindChange"
 75 |                 v-model="form.data.bind"
 76 |                 :options="cascaderOptions"
 77 |               ></el-cascader>
 78 |             </el-form-item>
 79 | 
 80 |             <el-form-item
 81 |               label="单个数据"
 82 |               v-if="form.data.bindType === 'array'"
 83 |             >
 84 |               <el-switch label="" v-model="form.data.one"></el-switch>
 85 |             </el-form-item>
 86 | 
 87 |             <el-form-item label="响应数据">
 88 |               <el-cascader
 89 |                 clearable
 90 |                 :props="{
 91 |                   checkStrictly: true,
 92 |                   children: 'entities',
 93 |                   label: 'name',
 94 |                   value: 'key',
 95 |                   expandTrigger: 'hover',
 96 |                 }"
 97 |                 placeholder="请选择接收响应的结果的数据"
 98 |                 v-model="form.data.recv"
 99 |                 :options="cascaderOptions"
100 |               ></el-cascader>
101 |             </el-form-item>
102 |           </div>
103 |         </el-form-item>
104 |       </el-form>
105 | 
106 |       <div slot="footer">
107 |         <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
108 |         <el-button size="mini" type="primary" @click="handleConfirm"
109 |           >确 定</el-button
110 |         >
111 |       </div>
112 |     </el-dialog>
113 |   </div>
114 | </template>
115 | <script>
116 | import { generateUUID } from '@/utils';
117 | import { cloneDeep } from 'lodash'
118 | import actions from '@/plugins/actions';
119 | export default {
120 |   props: {
121 |     actions: Object
122 |   },
123 |   data () {
124 |     return {
125 |       dialogVisible: false,
126 |       form: {
127 |         api: '',
128 |         name: '',
129 |         method: 'POST',
130 |         data: {
131 |           bind: '',
132 |           recv: '',
133 |           one: false,
134 |           bindType: null,
135 |           replace: []
136 |         }
137 |       },
138 |       rules: {
139 |         name: [{
140 |           required: true,
141 |           message: '不能为空',
142 |           trigger: 'blur',
143 |         }],
144 |         api: [{
145 |           required: true,
146 |           message: '不能为空',
147 |           trigger: 'blur',
148 |         }],
149 |         data: [{
150 |           required: true,
151 |           message: '不能为空',
152 |           trigger: 'blur',
153 |         }]
154 |       },
155 |     };
156 |   },
157 |   computed: {
158 |     cascaderOptions () {
159 |       return this.$store.state.globalModels;
160 |     }
161 |   },
162 |   created () {
163 |   },
164 |   methods: {
165 |     dialogBeforeClose () {
166 |       this.dialogVisible = false;
167 |     },
168 |     handleAddAction () {
169 |       this.form = {
170 |         name: '',
171 |         api: '',
172 |         method: "POST",
173 |         data: {
174 |           one: false,
175 |           bind: [],
176 |           recv: []
177 |         }
178 |       };
179 |       this.dialogVisible = true;
180 |     },
181 |     handleEditItem (action) {
182 |       console.log('action', action);
183 |       const _item = cloneDeep(action);
184 |       const [, method, api] = _item.handle.match(/^([A-z]+)\[(.*?)\]$/);
185 |       const bind = _item.data.bind.replace(/\.\$\[(.*?)\]$/g, '').split('.');
186 |       const recv = (_item.data.recv || '').split('.')
187 | 
188 |       this.form.key = _item.key;
189 |       this.form.name = _item.name;
190 |       this.form.api = api;
191 |       this.form.method = method.toUpperCase();
192 |       this.form.data = {
193 |         one: !!(Array.isArray(_item.data.replace) && _item.data.replace.length),
194 |         bind: bind,
195 |         recv: recv
196 |       };
197 |       this.form.data.bindType = this.form.data.one ? 'array' : '';
198 |       this.dialogVisible = true;
199 |     },
200 |     async handleDeleteItem (action) {
201 |       await this.$confirm(`是否删除“${action.name}”？`);
202 |       this.$store.commit('REMOVE_ACTION', {
203 |         type: 'fetch',
204 |         key: action.key
205 |       });
206 |       this.$message.success("删除成功");
207 |     },
208 |     handleBindChange (e) {
209 |       const currentBindData = e.reduce((pv, cv) => {
210 |         let list = pv;
211 |         if (!Array.isArray(pv)) {
212 |           list = pv.entities;
213 |         }
214 |         return list.find(item => item.key === cv);
215 |       }, this.cascaderOptions);
216 |       this.form.data.bindType = currentBindData.type;
217 |       this.form.data.one = false;
218 |     },
219 |     handleConfirm () {
220 |       this.$refs['form'].validate(async (valid) => {
221 |         if (!valid) return;
222 | 
223 |         const form = this.form;
224 | 
225 |         const action = {
226 |           key: form.key,
227 |           name: form.name,
228 |           handle: `${form.method}[${form.api}]`,
229 |           data: {
230 |             bind: form.data.bind.join('.') + (form.data.one ? '.$[index]' : ''),
231 |             recv: form.data.recv.join('.'),
232 |             replace: form.data.one ? ['index'] : ''
233 |           }
234 |         };
235 | 
236 |         if (!action.key) {
237 |           action.key = 'action_' + generateUUID(true);
238 |         }
239 | 
240 |         this.$store.commit('UPDATE_ACTION', {
241 |           type: 'fetch',
242 |           key: action.key,
243 |           data: action
244 |         });
245 | 
246 |         this.$message.success('成功');
247 |         this.form = {
248 |           name: '',
249 |           api: '',
250 |           method: "POST",
251 |           data: {
252 |             one: false,
253 |             bind: [],
254 |             recv: []
255 |           }
256 |         };
257 |         this.dialogVisible = false;
258 |       });
259 |     }
260 |   }
261 | }
262 | </script>
263 | <style lang="scss" scoped>
264 | .action-fetch {
265 |   .action-header-tools {
266 |     display: flex;
267 |     align-items: center;
268 |     justify-content: center;
269 |     padding-top: 10px;
270 |   }
271 |   .fetch-item {
272 |     padding: 8px 14px;
273 |     border-radius: 4px;
274 |     background-color: #f4f5f6;
275 |     margin: 10px;
276 |     font-weight: bold;
277 |     cursor: pointer;
278 |     transition: all 0.2s;
279 |     display: flex;
280 |     align-items: center;
281 |     justify-content: space-between;
282 |     color: #03a9f4;
283 | 
284 |     &:hover {
285 |       background-color: #f1f1f1;
286 |     }
287 |     .item-operate {
288 |       min-width: 50px;
289 |       max-width: 50px;
290 |       display: flex;
291 |       align-items: center;
292 |       height: 100%;
293 |       color: #999;
294 |       i {
295 |         flex: 1;
296 |         text-align: center;
297 |         transition: all 0.2s;
298 |         font-weight: bold;
299 |         &:hover {
300 |           color: #2196f3;
301 |         }
302 |       }
303 |     }
304 |   }
305 |   .dialog-data-box {
306 |     background-color: #f4f5f6;
307 |     padding: 10px;
308 |     border-radius: 4px;
309 |   }
310 | }
311 | </style>


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
  1 | import { LowElement, LowElementAction } from '@/types/Element'
  2 | // import LowElement from '../types/Element'
  3 | import Vue from 'vue'
  4 | import Vuex from 'vuex'
  5 | import PageStore from './modules/page';
  6 | import db from '@/plugins/db'
  7 | import PageEntity, { ModelType } from './entities/Page';
  8 | import { generateUUID } from '@/utils';
  9 | import { cloneDeep, throttle } from 'lodash';
 10 | 
 11 | export type TypeType = {
 12 |   type: string;
 13 |   value: string;
 14 |   label: string;
 15 | }
 16 | 
 17 | Vue.use(Vuex);
 18 | 
 19 | const pages = db.get('pages').value();
 20 | const globalModels = db.get('globalModels').value();
 21 | const globalActions = db.get('globalActions').value();
 22 | 
 23 | const flattenElementsDeep = (element: LowElement) => {
 24 |   const arr = [element];
 25 | 
 26 |   element.children?.forEach(item => {
 27 |     const list = flattenElementsDeep(item);
 28 |     arr.push(...list);
 29 |   });
 30 | 
 31 |   return arr;
 32 | }
 33 | 
 34 | type StateType = {
 35 |   pages: PageEntity[],
 36 |   globalData: any,
 37 |   globalActions: any,
 38 |   globalModels: ModelType[],
 39 |   types: TypeType[],
 40 | }
 41 | 
 42 | const store = new Vuex.Store<StateType>({
 43 |   modules: {
 44 |     page: PageStore,
 45 |   },
 46 |   state: {
 47 | 
 48 |     /**
 49 |      * 数据类型
 50 |      */
 51 |     types: [
 52 |       {
 53 |         type: 'string',
 54 |         value: '""',
 55 |         label: "字符串"
 56 |       },
 57 |       {
 58 |         type: 'number',
 59 |         value: '0',
 60 |         label: "数字"
 61 |       },
 62 |       {
 63 |         type: 'boolean',
 64 |         value: 'false',
 65 |         label: "布尔"
 66 |       },
 67 |       {
 68 |         type: 'array',
 69 |         value: '[]',
 70 |         label: "数组"
 71 |       },
 72 |     ],
 73 |     pages: [],
 74 |     /**
 75 |  * 数据
 76 |  */
 77 |     globalData: {
 78 |       // model_1a52926d55f3: {
 79 |       //    username: '默认1',
 80 |       //    password: '默认2'
 81 |       // },
 82 |       // model_42124s1ar2: {
 83 |       //    token: ''
 84 |       // }
 85 |     },
 86 |     globalActions: {
 87 |       fetch: {
 88 |         name: '接口请求',
 89 |         actions: []
 90 |       },
 91 |       dialog: {
 92 |         name: '对话框',
 93 |         actions: []
 94 |       }
 95 |     },
 96 |     /**
 97 |      * 模型
 98 |      */
 99 |     globalModels: [
100 |       // {
101 |       //    name: "表单", // 数据源名称
102 |       //    key: 'model_1a52926d55f3', // 绑定的字段 该字段创建的时候生成
103 |       //    // 实体
104 |       //    entities: [
105 |       //       {
106 |       //          key: 'username', // 绑定的字段 输入
107 |       //          name: "用户名", // 实体名称 输入
108 |       //          type: 'string', // 数据类型 选择
109 |       //          value: '""', // 默认值 输入
110 |       //       },
111 |       //       {
112 |       //          key: 'password', // 绑定的字段 输入
113 |       //          name: "密码", // 实体名称 输入
114 |       //          type: 'string', // 数据类型 选择
115 |       //          value: '""', // 默认值 输入
116 |       //       },
117 |       //       // ...more
118 |       //    ]
119 |       // },
120 |       // {
121 |       //    name: "测试", // 数据源名称
122 |       //    key: 'model_42124s1ar2', // 绑定的字段 该字段创建的时候生成
123 |       //    // 实体
124 |       //    entities: [
125 |       //       {
126 |       //          key: 'token', // 绑定的字段 输入
127 |       //          name: "token", // 实体名称 输入
128 |       //          type: 'string', // 数据类型 选择
129 |       //          value: '""', // 默认值 输入
130 |       //       },
131 |       //       // ...more
132 |       //    ]
133 |       // }
134 |     ],
135 |   },
136 |   getters: {
137 | 
138 |   },
139 |   mutations: {
140 |     INIT_PAGE (state, payload) {
141 |       state.pages = payload;
142 |     },
143 | 
144 |     ADD_PAGE (state, payload) {
145 |       state.pages.push(payload);
146 |     },
147 | 
148 |     UPDATE_PAGE (state, payload) {
149 |       const index = state.pages.findIndex(item => item.id === payload.id);
150 |       const page = state.pages[index];
151 |       if (page) {
152 |         page.title = payload.title;
153 |         page.icon = payload.icon;
154 |         state.pages.splice(index, 1, payload);
155 |       }
156 |     },
157 | 
158 |     REMOVE_PAGE (state, id) {
159 |       const index = state.pages.findIndex(item => item.id === id);
160 |       state.pages.splice(index, 1);
161 |     },
162 | 
163 |     INIT_GLOBAL_ACTIONS (state) {
164 | 
165 |     },
166 |     /**
167 |     * 删除动作
168 |     */
169 |     REMOVE_ACTION (state, { type, key }: { type: string, key: string }) {
170 |       const index = state.globalActions[type].actions.findIndex((item: any) => {
171 |         return item.key == key;
172 |       });
173 |       state.globalActions[type].actions.splice(index, 1);
174 |       // db.set('actions', state.globalActions).write();
175 |     },
176 | 
177 |     /**
178 |     * 更新动作
179 |     */
180 |     UPDATE_ACTION (state, { type, key, data }: {
181 |       type: string, key: string, data: object
182 |     }) {
183 |       const index = state.globalActions[type].actions.findIndex((item: any) => {
184 |         return item.key == key;
185 |       });
186 |       if (index === -1) {
187 |         state.globalActions[type].actions.push(data);
188 |       } else {
189 |         state.globalActions[type].actions.splice(index, 1, data);
190 |       }
191 |       // db.set('actions', state.globalActions).write();
192 |     },
193 |     /**
194 |      * 清空数据
195 |      */
196 |     CLEAR_MODELS (state) {
197 |       state.globalModels = [];
198 |       state.globalData = {};
199 |     },
200 | 
201 |     /**
202 |      * 生成数据结构
203 |      * @param model 模型
204 |      */
205 |     GENERATE_DATA (state, model: ModelType) {
206 |       // 生成数据
207 |       return
208 |     },
209 |     /**
210 |      * 增加模型
211 |      * @param model 模型
212 |      */
213 |     ADD_MODEL (state, model: ModelType) {
214 |       state.globalModels.push(model);
215 |       // 生成数据
216 |       state.globalData[model.key] = model.entities.reduce((pv: any, cv) => {
217 |         // 反序列数据
218 |         pv[cv.key] = JSON.parse(cv.value);
219 |         return pv;
220 |       }, {});
221 |       state.globalData = Object.assign({}, state.globalData);
222 |       // db.set('models', state.globalModels).write();
223 |     },
224 |     /**
225 |      * 更新模型
226 |      * @param model 模型
227 |      */
228 |     UPDATE_MODEL (state, model: ModelType) {
229 |       const index = state.globalModels.findIndex(item => {
230 |         return item.key === model.key;
231 |       });
232 | 
233 |       if (index === -1) {
234 |         return;
235 |       }
236 |       // 修改模型
237 |       state.globalModels.splice(index, 1, model);
238 |       // 生成数据
239 |       state.globalData[model.key] = model.entities.reduce((pv: any, cv) => {
240 |         // 反序列数据
241 |         pv[cv.key] = JSON.parse(cv.value);
242 |         return pv;
243 |       }, {});
244 |       state.globalData = Object.assign({}, state.globalData);
245 |       // db.set('models', state.globalModels).write();
246 |     },
247 |     /**
248 |      * 删除模型
249 |      * @param model 模型
250 |      */
251 |     REMOVE_MODEL (state, key: string) {
252 |       const index = state.globalModels.findIndex(item => {
253 |         return item.key === key;
254 |       });
255 |       state.globalModels.splice(index, 1);
256 |       // db.set('models', state.globalModels).write();
257 |     }
258 |   },
259 |   actions: {
260 |     init ({ dispatch }) {
261 |       // 初始化models
262 |       dispatch('initPages');
263 |       dispatch('initGlobalModels');
264 |       dispatch('initGlobalActions');
265 | 
266 |       let page = new PageEntity();
267 |       const pages = db.get('pages').value();
268 |       if (Array.isArray(pages) && pages.length) {
269 |         page = pages[0];
270 |       } else {
271 |         dispatch('addPage', page);
272 |       }
273 |       dispatch('page/init', page);
274 |     },
275 | 
276 |     initPages (state) {
277 |       // const pages = db.get('pages').value();
278 |       // INIT_PAGE
279 |       if (pages && Object.keys(pages).length) {
280 |         state.commit('INIT_PAGE', pages);
281 |       }
282 |     },
283 |     addPage (state, payload) {
284 |       let page = new PageEntity();
285 |       page.title = payload.title;
286 |       page.icon = payload.icon;
287 | 
288 |       state.commit('ADD_PAGE', page);
289 |     },
290 |     updatePage (state, payload) {
291 |       state.commit('UPDATE_PAGE', payload);
292 |     },
293 |     removePage (state, id) {
294 |       state.commit('REMOVE_PAGE', id);
295 |     },
296 |     async selectPage (state, id) {
297 |       const index = state.state.pages.findIndex(item => item.id === id);
298 |       const page = state.state.pages[index];
299 |       if (!page) throw new Error('page is no find');
300 |       // 保存当前页面
301 |       await state.dispatch('page/save');
302 |       // 切换到新页面
303 |       await state.dispatch('page/init', page);
304 |     },
305 | 
306 | 
307 |     initGlobalModels (state) {
308 |       state.commit('CLEAR_MODELS');
309 | 
310 |       const models = globalModels;
311 |       if (models && Object.keys(models).length) {
312 |         models.forEach((item: ModelType) => {
313 |           state.commit('ADD_MODEL', item);
314 |         });
315 |       }
316 |     },
317 | 
318 |     /**
319 |      * 编辑或添加模型
320 |      * @param payload 
321 |      */
322 |     handleEditOrAddModel (store, payload: ModelType) {
323 |       const findModel = store.state.globalModels.find(model => {
324 |         return model.key === payload.key;
325 |       });
326 | 
327 |       if (findModel) {
328 |         store.commit('UPDATE_MODEL', payload);
329 |       } else {
330 |         store.commit('ADD_MODEL', payload);
331 |       }
332 |     },
333 | 
334 |     initGlobalActions (state) {
335 |       // 初始化示例动作
336 |       const actions = globalActions;
337 |       if (actions && Object.keys(actions).length) {
338 |         Object.keys(actions).forEach((key: any) => {
339 |           actions[key].actions.forEach((aItem: any) => {
340 |             state.commit('UPDATE_ACTION', {
341 |               type: key,
342 |               key: aItem.key,
343 |               data: aItem
344 |             });
345 |           });
346 | 
347 |         });
348 |       } else {
349 |         const globalActions: any = {
350 |           fetch: {
351 |             name: "接口请求",
352 |             actions: [
353 |               {
354 |                 key: 'action_efhj123sadufk235ur',
355 |                 name: "登录",
356 |                 handle: 'POST[/api/login]',
357 |                 data: {
358 |                   bind: 'model_1a52926d55f3',
359 |                   recv: 'model_2345423.token'
360 |                 }
361 |               },
362 |               {
363 |                 key: 'action_sjy723nju431sew234d',
364 |                 name: "删除单个用户",
365 |                 handle: 'POST[/api/table/delete]',
366 |                 data: {
367 |                   bind: 'model_123midn3u1s.list.$[index]',
368 |                   replace: ['index']
369 |                 }
370 |               }
371 |             ]
372 |           },
373 |           dialog: {
374 |             name: "对话框",
375 |             handle: []
376 |           }
377 |         };
378 |         Object.keys(globalActions).forEach((key: string) => {
379 | 
380 |           globalActions[key].actions.forEach((aItem: any) => {
381 |             state.commit('UPDATE_ACTION', {
382 |               type: key,
383 |               key: aItem.key,
384 |               data: aItem
385 |             });
386 |           });
387 |         });
388 | 
389 |       }
390 |     }
391 |   },
392 | 
393 | });
394 | 
395 | store.subscribe(throttle((mutation, state: any) => {
396 | 
397 |   const currentPage: PageEntity = state.page;
398 |   const pages: PageEntity[] = cloneDeep(state.pages);
399 | 
400 |   const findPage = pages.find(item => item.id === currentPage.id);
401 | 
402 |   if (findPage) {
403 |     findPage.title = currentPage.title;
404 |     findPage.icon = currentPage.icon;
405 |     findPage.elements = currentPage.elements;
406 |   }
407 |   console.log('subscribe -> throttle -> state');
408 | 
409 |   db.set('pages', state.pages).write();
410 |   db.set('globalModels', state.globalModels).write();
411 |   db.set('globalActions', state.globalActions).write();
412 | 
413 | }, 300));
414 | 
415 | export default store;
416 | 


--------------------------------------------------------------------------------
/src/components/models/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 数据源相关 -->
  3 |   <div class="models-wrap">
  4 |     <el-scrollbar class="aside-scrollbar">
  5 |       <div v-show="!current">
  6 |         <div class="model-toolbar">
  7 |           <el-button
  8 |             type="primary"
  9 |             size="mini"
 10 |             @click="handleShowModelEditAndAddDialog()"
 11 |             >添加</el-button
 12 |           >
 13 |         </div>
 14 |         <el-collapse>
 15 |           <el-collapse-item
 16 |             :title="item.name"
 17 |             :name="item.key"
 18 |             v-for="item in models"
 19 |             :key="item.key"
 20 |           >
 21 |             <template slot="title">
 22 |               <div class="model-item-title">
 23 |                 <span>{{ item.name }}</span>
 24 |                 <div class="model-actions">
 25 |                   <i
 26 |                     class="el-icon-edit"
 27 |                     @click="handleShowModelEditAndAddDialog(item)"
 28 |                   ></i>
 29 |                   <i
 30 |                     class="el-icon-delete"
 31 |                     @click="handleDeleteItemModel(item)"
 32 |                   ></i>
 33 |                 </div>
 34 |               </div>
 35 |             </template>
 36 |             <div
 37 |               class="low-model-item"
 38 |               v-for="entity in item.entities"
 39 |               :key="entity.key"
 40 |             >
 41 |               <pre
 42 |                 style="font-size: 12px; line-height: 1.4; padding: 4px 10px"
 43 |                 >{{ JSON.stringify(entity, null, 2) }}</pre
 44 |               >
 45 |             </div>
 46 |           </el-collapse-item>
 47 |         </el-collapse>
 48 |       </div>
 49 |       <!-- 配置页 -->
 50 |       <div v-if="current">
 51 |         <div>
 52 |           <el-form
 53 |             :model="form"
 54 |             ref="form"
 55 |             :rules="rules"
 56 |             label-width="60px"
 57 |             :inline="false"
 58 |             size="mini"
 59 |           >
 60 |             <el-form-item label="">
 61 |               <h1>数据源绑定</h1>
 62 |             </el-form-item>
 63 | 
 64 |             <el-form-item
 65 |               :label="item.name"
 66 |               v-for="item in modelConfigFormItems"
 67 |               :key="item.key"
 68 |             >
 69 |               <div>
 70 |                 <el-cascader
 71 |                   clearable
 72 |                   :props="{
 73 |                     checkStrictly: true,
 74 |                     children: 'entities',
 75 |                     label: 'name',
 76 |                     value: 'key',
 77 |                     expandTrigger: 'hover',
 78 |                   }"
 79 |                   v-model="form.models[item.key]"
 80 |                   :options="cascaderOptions"
 81 |                 ></el-cascader>
 82 |               </div>
 83 |             </el-form-item>
 84 |             <el-form-item>
 85 |               <el-button type="primary" @click="onSubmit">确定</el-button>
 86 |               <el-button @click="onClose">取消</el-button>
 87 |             </el-form-item>
 88 |           </el-form>
 89 |         </div>
 90 |       </div>
 91 |     </el-scrollbar>
 92 | 
 93 |     <el-dialog
 94 |       title="添加/修改数据源"
 95 |       :visible.sync="createAndEditModelDialog"
 96 |       width="500px"
 97 |       @close="handleCreateAndEditModelDialogClose"
 98 |     >
 99 |       <el-form
100 |         ref="modelForm"
101 |         :model="modelForm"
102 |         size="mini"
103 |         label-width="120px"
104 |       >
105 |         <el-form-item
106 |           label="数据源名称"
107 |           prop="name"
108 |           :rules="{
109 |             required: true,
110 |             message: '不能为空',
111 |             trigger: 'change',
112 |           }"
113 |         >
114 |           <el-input
115 |             v-model="modelForm.name"
116 |             placeholder="请输入数据源名称"
117 |           ></el-input>
118 |         </el-form-item>
119 | 
120 |         <!-- <el-form-item label="数据源键">
121 |           <el-input v-model="modelForm.key" placeholder="请输入数据源键"></el-input>
122 |         </el-form-item> -->
123 | 
124 |         <div
125 |           v-for="(entity, index) in modelForm.entities"
126 |           :key="index"
127 |           class="model-form-entity"
128 |         >
129 |           <el-form-item
130 |             label="实体名称"
131 |             :prop="`entities.${index}.name`"
132 |             :rules="{
133 |               required: true,
134 |               message: '不能为空',
135 |               trigger: 'change',
136 |             }"
137 |           >
138 |             <el-input
139 |               v-model="entity.name"
140 |               placeholder="请输入实体名称"
141 |             ></el-input>
142 |           </el-form-item>
143 |           <el-form-item
144 |             label="实体字段"
145 |             :prop="`entities.${index}.key`"
146 |             :rules="{
147 |               required: true,
148 |               message: '不能为空',
149 |               trigger: 'change',
150 |             }"
151 |           >
152 |             <el-input
153 |               v-model="entity.key"
154 |               placeholder="请输入实体字段"
155 |             ></el-input>
156 |           </el-form-item>
157 |           <el-form-item
158 |             label="数据类型"
159 |             :prop="`entities.${index}.type`"
160 |             :rules="{
161 |               required: true,
162 |               message: '请选择',
163 |               trigger: 'change',
164 |             }"
165 |           >
166 |             <el-select v-model="entity.type" placeholder="请选择数据类型">
167 |               <el-option
168 |                 v-for="type in modelTypes"
169 |                 :key="type.value"
170 |                 :label="type.label"
171 |                 :value="type.type"
172 |               >
173 |               </el-option>
174 |             </el-select>
175 |           </el-form-item>
176 |           <el-form-item label="默认数据" :prop="`entities.${index}.value`">
177 |             <el-input
178 |               v-model="entity.value"
179 |               placeholder="请输入实体默认数据，不填则为对应类型数据"
180 |             ></el-input>
181 |           </el-form-item>
182 |           <el-form-item>
183 |             <el-button type="warning" @click="handleRemoveEntityItem(index)"
184 |               >删除</el-button
185 |             >
186 |           </el-form-item>
187 |         </div>
188 | 
189 |         <el-form-item>
190 |           <el-button type="primary" @click="handleAddFormEntity"
191 |             >添加实体</el-button
192 |           >
193 |         </el-form-item>
194 |       </el-form>
195 | 
196 |       <span slot="footer">
197 |         <el-button @click="createAndEditModelDialog = false" size="mini"
198 |           >取消</el-button
199 |         >
200 |         <el-button
201 |           type="primary"
202 |           size="mini"
203 |           @click="handleCreateAndEditModelDialogSubmit"
204 |           >提交</el-button
205 |         >
206 |       </span>
207 |     </el-dialog>
208 |   </div>
209 | </template>
210 | <script lang="ts">
211 | import { Component, Vue, Provide, Watch } from 'vue-property-decorator';
212 | import { Getter, State } from 'vuex-class';
213 | import { LowElement } from '@/types/Element';
214 | import { ModelType } from '@/store/entities/Page';
215 | import { TypeType } from '@/store/index';
216 | 
217 | import { modelConfig } from '@/components/common/index';
218 | import { cloneDeep } from 'lodash'
219 | import { generateUUID } from '@/utils';
220 | @Component({
221 |   name: 'low-model',
222 | })
223 | export default class LowModel extends Vue {
224 | 
225 |   createAndEditModelDialog = false;
226 | 
227 |   modelForm = {
228 |     name: '',
229 |     key: '',
230 |     entities: [{
231 |       name: '',
232 |       value: '',
233 |       type: 'string',
234 |       key: ''
235 |     }],
236 |   };
237 | 
238 |   @State('globalModels')
239 |   models?: ModelType[];
240 | 
241 |   @State('types')
242 |   modelTypes?: TypeType[];
243 | 
244 |   @State('currentId', { namespace: 'page' })
245 |   currentId?: string;
246 | 
247 |   @Getter('current', { namespace: 'page' })
248 |   current?: LowElement;
249 | 
250 |   @Watch('currentId')
251 |   currentWatch () {
252 | 
253 |     if (!this.current) return;
254 |     const models = this.current.models;
255 |     if (!models) {
256 |       this.form.models = {};
257 |       return;
258 |     }
259 | 
260 |     this.form.models = Object.keys(models).reduce((pv: any, key: string) => {
261 |       pv[key] = models[key].split('.');
262 |       return pv;
263 |     }, {});
264 |     console.log('this.form.models ', this.form.models);
265 | 
266 |   }
267 | 
268 |   get cascaderOptions () {
269 |     return this.models;
270 |   }
271 | 
272 |   get modelConfigFormItems () {
273 |     if (!this.current) return [];
274 |     return modelConfig[this.current.element];
275 |   }
276 | 
277 |   get rules () {
278 |     return {
279 |       model: [
280 |         { required: true, message: '请选择', trigger: 'change' },
281 |       ],
282 |     }
283 |   }
284 | 
285 |   form = {
286 |     models: {}
287 |   }
288 | 
289 | 
290 |   created () {
291 |     this.currentWatch();
292 |   }
293 | 
294 |   onSubmit () {
295 |     const formModels: any = this.form.models;
296 | 
297 |     const models = Object.keys(formModels).reduce((pv: any, key: string) => {
298 |       pv[key] = (formModels[key] || []).join('.');
299 |       return pv;
300 |     }, {});
301 |     this.$store.commit("page/BIND_MODELS", models);
302 |     this.onClose();
303 |   }
304 |   onClose () {
305 |     this.$store.commit("page/SET_CURRENT", undefined);
306 |   }
307 | 
308 |   handleDeleteItemModel (data: ModelType) {
309 |     this.$store.commit('REMOVE_MODEL', data.key);
310 |     this.$message.success("成功");
311 |   }
312 | 
313 |   handleShowModelEditAndAddDialog (data?: ModelType) {
314 |     this.createAndEditModelDialog = true;
315 |     if (!data) return; // 表示直接打开
316 | 
317 |     data = cloneDeep(data);
318 |     const entities = data.entities;
319 | 
320 |     data.entities = entities.map(item => {
321 |       // item.value = JSON.parse(item.value);
322 |       // item.value = item.value;
323 |       return item;
324 |     });
325 | 
326 |     this.modelForm = data;
327 |   }
328 | 
329 |   handleAddFormEntity () {
330 |     this.modelForm.entities.push({
331 |       key: '',
332 |       name: '',
333 |       value: '',
334 |       type: 'string'
335 |     });
336 |   }
337 |   handleRemoveEntityItem (index: number) {
338 |     this.modelForm.entities.splice(index, 1);
339 |   }
340 | 
341 |   handleCreateAndEditModelDialogClose () {
342 |     // TODO: 目前只要是关闭就直接清空
343 |     this.modelForm = {
344 |       name: '',
345 |       key: '',
346 |       entities: [{
347 |         name: '',
348 |         value: '',
349 |         type: 'string',
350 |         key: ''
351 |       }]
352 |     };
353 |   }
354 | 
355 |   handleCreateAndEditModelDialogSubmit () {
356 |     (this.$refs['modelForm'] as any).validate(async (valid: boolean) => {
357 |       if (!valid) return;
358 |       // TODO: 保存
359 |       // 转换数据
360 |       const modelTypes = this.modelTypes || [];
361 |       const modelForm = cloneDeep(this.modelForm);
362 |       const entities = modelForm.entities;
363 | 
364 |       if (!modelForm.key) {
365 |         modelForm.key = generateUUID(true);
366 |       }
367 | 
368 |       try {
369 |         // 得到keys,判断entitykey是否唯一
370 |         const keys = modelForm.entities.map(item => item.key);
371 |         const size = new Set(keys).size;
372 |         if (size !== modelForm.entities.length) {
373 |           throw new Error("实体中存在重复的实体字段，请确保字段唯一");
374 |         }
375 |         modelForm.entities = entities.map(entity => {
376 |           // 处理value 
377 |           // TODO: 校验数据 还需要复杂一点
378 |           if (!entity.value) {
379 |             const type = modelTypes.find(type => type.type === entity.type);
380 |             entity.value = type?.value || '';
381 |           } else {
382 |             if (entity.type === 'string') {
383 |               entity.value = JSON.stringify(entity.value);
384 |             } else {
385 |               try {
386 |                 // 校验
387 |                 entity.value = JSON.stringify(JSON.parse(entity.value));
388 |               } catch (error) {
389 |                 throw new Error(entity.name + "的数据错误，请检查");
390 |               }
391 |             }
392 |           }
393 |           return entity;
394 |         });
395 |       } catch (error) {
396 |         this.$message.warning(error.message);
397 |         throw error;
398 |       }
399 |       try {
400 |         // 执行添加模型
401 |         await this.$store.dispatch('handleEditOrAddModel', modelForm);
402 |         this.$message.success("操作成功");
403 |         this.$nextTick(() => {
404 |           this.createAndEditModelDialog = false;
405 |         });
406 |       } catch (error) {
407 |         this.$message.error(error.message);
408 |       }
409 |     });
410 |   }
411 | 
412 | }
413 | </script>
414 | <style lang="scss" scoped>
415 | .models-wrap {
416 |   padding: 10px;
417 |   .model-toolbar {
418 |     margin-bottom: 12px;
419 |     display: flex;
420 |     align-items: center;
421 |   }
422 |   .model-item-title {
423 |     flex: 1;
424 |     display: flex;
425 |     align-items: center;
426 |     justify-content: space-between;
427 |     .model-actions {
428 |       i {
429 |         margin: 0 2px;
430 |         padding: 6px;
431 |         cursor: pointer;
432 |         transition: all 0.1s;
433 |         border-radius: 2px;
434 |         opacity: 0.7;
435 |         font-weight: bold;
436 |         &:hover {
437 |           opacity: 1;
438 |           background-color: #f1f1f1;
439 |         }
440 |         &.el-icon-delete {
441 |           color: #f44336;
442 |         }
443 |         &.el-icon-edit {
444 |           color: #2196f3;
445 |         }
446 |       }
447 |     }
448 |   }
449 |   .model-form-entity {
450 |     padding: 12px;
451 |     border: 1px solid #ddd;
452 |     border-radius: 2px;
453 |     position: relative;
454 |     margin-bottom: 12px;
455 |   }
456 | }
457 | </style>


--------------------------------------------------------------------------------
/src/components/actions/Index.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: bucai
  3 |  * @Date: 2021-02-19 15:58:38
  4 |  * @LastEditors: bucai
  5 |  * @LastEditTime: 2021-06-25 16:34:21
  6 |  * @Description:
  7 | -->
  8 | <template>
  9 |   <div class="Index" style="margin-top: 10px">
 10 |     <div v-if="current">
 11 |       <div
 12 |         style="
 13 |           display: flex;
 14 |           align-items: center;
 15 |           justify-content: center;
 16 |           border-bottom: 1px solid #eee;
 17 |           padding-bottom: 8px;
 18 |         "
 19 |       >
 20 |         <el-button type="success" @click="handleCreateAction()" size="mini"
 21 |           >添加</el-button
 22 |         >
 23 |       </div>
 24 |       <div
 25 |         v-for="action in current.actions"
 26 |         :key="action.key"
 27 |         style="padding: 10px; margin-bottom: 12px"
 28 |       >
 29 |         <div
 30 |           style="
 31 |             display: flex;
 32 |             align-items: center;
 33 |             justify-content: space-between;
 34 |             border-bottom: 1px solid #eee;
 35 |             padding-bottom: 8px;
 36 |           "
 37 |         >
 38 |           <span>{{ action.name }}</span>
 39 |           <div>
 40 |             <el-button
 41 |               type="primary"
 42 |               @click="handleEditAction(action)"
 43 |               size="mini"
 44 |               >编辑</el-button
 45 |             >
 46 |             <el-button
 47 |               type="danger"
 48 |               @click="handleRemoveAction(action)"
 49 |               size="mini"
 50 |               >删除</el-button
 51 |             >
 52 |           </div>
 53 |         </div>
 54 |         <div
 55 |           v-for="(handle, index) in action.handle"
 56 |           :key="handle.key"
 57 |           style="
 58 |             padding: 6px 10px;
 59 |             border: 1px solid #eee;
 60 |             margin-top: 8px;
 61 |             color: #878769;
 62 |             font-size: 14px;
 63 |           "
 64 |         >
 65 |           <div>{{ index + 1 }}. {{ handle.name }}</div>
 66 |         </div>
 67 |       </div>
 68 |       <div
 69 |         class="formAction"
 70 |         style="
 71 |           display: flex;
 72 |           align-items: center;
 73 |           justify-content: center;
 74 |           padding-bottom: 8px;
 75 |         "
 76 |       >
 77 |         <el-button size="mini" @click="handleClose">取消</el-button>
 78 |       </div>
 79 |     </div>
 80 |     <div v-else>
 81 |       <!-- 全局 事件 列表 -->
 82 |       <el-scrollbar class="aside-scrollbar">
 83 |         <el-collapse v-if="!current">
 84 |           <el-collapse-item
 85 |             :title="actions[key].name"
 86 |             :name="actions[key].name"
 87 |             v-for="key in actionsKeys"
 88 |             :key="key"
 89 |           >
 90 |             <component
 91 |               :is="'action-' + key"
 92 |               :actions="actions[key]"
 93 |             ></component>
 94 |             <!-- <div
 95 |               class="low-model-item"
 96 |               v-for="action in actions[key].actions"
 97 |               :key="action.key"
 98 |             >
 99 |               <pre
100 |                 style="font-size: 12px; line-height: 1.4; padding: 4px 10px"
101 |                 >{{ JSON.stringify(action, null, 2) }}</pre
102 |               >
103 |             </div> -->
104 |           </el-collapse-item>
105 |         </el-collapse>
106 |       </el-scrollbar>
107 |     </div>
108 |     <el-dialog
109 |       title="添加/编辑 动作"
110 |       :visible.sync="visible"
111 |       width="500px"
112 |       @close="visible = false"
113 |     >
114 |       <el-form
115 |         :model="form"
116 |         ref="form"
117 |         :rules="rules"
118 |         label-width="80px"
119 |         :inline="false"
120 |         size="mini"
121 |       >
122 |         <el-form-item label="事件" prop="event">
123 |           <!-- <el-input v-model="form.event"></el-input> -->
124 |           <el-select
125 |             v-model="form.event"
126 |             placeholder="请选择组件内部事件"
127 |             clearable
128 |             filterable
129 |           >
130 |             <el-option
131 |               v-for="item in optionalOptions"
132 |               :key="item.key"
133 |               :label="item.name"
134 |               :value="item.key"
135 |             >
136 |             </el-option>
137 |           </el-select>
138 |         </el-form-item>
139 |         <el-form-item label="事件名称" prop="name">
140 |           <el-input v-model="form.name" placeholder="事件名称"></el-input>
141 |         </el-form-item>
142 |         <div
143 |           style="
144 |             padding: 10px;
145 |             margin-left: 24px;
146 |             margin-bottom: 10px;
147 |             border: 1px solid #f4f5f6;
148 |           "
149 |           v-for="(handle, index) in form.handle"
150 |           :key="index"
151 |         >
152 |           <el-form-item
153 |             label="动作名称"
154 |             :prop="'handle.' + index + '.name'"
155 |             :rules="{ required: true, message: '不能为空', trigger: 'blur' }"
156 |           >
157 |             <el-input v-model="handle.name" placeholder="动作名称"></el-input>
158 |           </el-form-item>
159 |           <el-form-item
160 |             label="链接动作"
161 |             :prop="'handle.' + index + '.link'"
162 |             :rules="{
163 |               required: true,
164 |               message: '请选择链接动作',
165 |               trigger: 'change',
166 |             }"
167 |           >
168 |             <!-- <el-input v-model="handle.link" placeholder="链接动作"></el-input> -->
169 |             <el-cascader
170 |               v-model="handle.link"
171 |               :options="linkOptions"
172 |             ></el-cascader>
173 |           </el-form-item>
174 |           <div style="text-align: center">
175 |             <el-button
176 |               type="warning"
177 |               size="mini"
178 |               @click="handleRemoveActionHandle(index)"
179 |               >移除</el-button
180 |             >
181 |           </div>
182 |         </div>
183 |         <div style="text-align: center">
184 |           <el-button
185 |             type="primary"
186 |             size="mini"
187 |             @click="
188 |               form.handle.push({
189 |                 name: '',
190 |                 link: [],
191 |               })
192 |             "
193 |             >添加</el-button
194 |           >
195 |         </div>
196 |       </el-form>
197 |       <span slot="footer">
198 |         <el-button size="mini" @click="visible = false">取消</el-button>
199 |         <el-button size="mini" type="primary" @click="handleSaveOrEdit"
200 |           >保存</el-button
201 |         >
202 |       </span>
203 |     </el-dialog>
204 |   </div>
205 | </template>
206 | <script lang="ts">
207 | import { cloneDeep } from 'lodash';
208 | 
209 | import { LowElement, LowElementAction } from '@/types/Element';
210 | import { Component, Vue, Provide, Watch } from 'vue-property-decorator';
211 | import { Getter, State } from 'vuex-class';
212 | 
213 | import components from '../common'
214 | import { generateUUID } from '@/utils';
215 | 
216 | // action components
217 | import GlobalActionFetch from './components/GlobalActionFetch.vue';
218 | import GlobalActionDialog from './components/GlobalActionDialog.vue';
219 | 
220 | let initLinkOptionsWatchTimer = -1;
221 | let currentWatchTimer = -1;
222 | 
223 | 
224 | @Component({
225 |   name: 'low-actions',
226 |   components: {
227 |     'action-fetch': GlobalActionFetch,
228 |     'action-dialog': GlobalActionDialog
229 |   }
230 | })
231 | export default class LowActions extends Vue {
232 | 
233 |   @Getter('current', { namespace: 'page' })
234 |   current?: LowElement;
235 | 
236 |   @Getter('flatElements', { namespace: 'page' })
237 |   flatElements?: LowElement[];
238 | 
239 |   @State('elements', { namespace: 'page' })
240 |   elements?: LowElement;
241 | 
242 |   @State('globalActions')
243 |   actions?: any;
244 | 
245 |   get actionsKeys () {
246 |     return Object.keys(this.actions || {});
247 |   }
248 | 
249 |   get actionsValues () {
250 |     return Object.values(this.actions || {});
251 |   }
252 | 
253 |   visible = false;
254 | 
255 |   options: any[] = [];
256 | 
257 |   get optionalOptions () {
258 |     const actions = this.current?.actions;
259 |     if (!actions) {
260 |       return this.options;
261 |     }
262 |     if ((this.form as any).key) {
263 |       return this.options;
264 |     }
265 |     return this.options.filter(item => {
266 |       return !actions.find(action => action.event === item.key)
267 |     });
268 |   }
269 | 
270 |   form = {
271 |     name: '',
272 |     event: '',
273 |     handle: [
274 |       {
275 |         name: '',
276 |         link: [],
277 |       }
278 |     ]
279 |   };
280 | 
281 |   rules: any = {
282 |     event: [
283 |       { required: true, message: '请选择', trigger: 'change' },
284 |     ],
285 |     name: [
286 |       { required: true, message: '请输入', trigger: 'blur' },
287 |     ],
288 |     handle: [
289 |       { type: 'array', required: true, message: '至少有一个具体动作', trigger: 'change' }
290 |     ],
291 |   };
292 | 
293 |   linkOptions: any[] = [];
294 | 
295 |   @Watch('actions', { deep: true })
296 |   flatElementsWatch () {
297 | 
298 |     clearTimeout(initLinkOptionsWatchTimer);
299 |     initLinkOptionsWatchTimer = setTimeout(() => {
300 |       this.initLinkOptions();
301 |     }, 300);
302 |   }
303 | 
304 |   @Watch('current')
305 |   currentWatch () {
306 |     clearTimeout(currentWatchTimer);
307 |     currentWatchTimer = setTimeout(() => {
308 |       this.initActionOptions();
309 |     }, 300);
310 |   }
311 | 
312 |   created () {
313 |     this.initLinkOptions();
314 |     this.initActionOptions();
315 |   }
316 | 
317 |   initActionOptions () {
318 |     const element = this.current?.element;
319 |     if (!element) return;
320 |     const component = components.find(item => item.name === element)
321 |     if (!component) return;
322 |     this.options = (component.component.actioOptions || []).filter((item: any) => {
323 |       return !item.beIncluded || this.hasElementExistParentsByElement(item.beIncluded)
324 |     });
325 |   }
326 | 
327 |   initLinkOptions () {
328 |     if (this.flatElements) {
329 | 
330 |       const elementActions: any = cloneDeep(this.flatElements).filter(item => item.actions && item.actions.length).map((item: any) => {
331 |         item.value = item.id;
332 |         item.label = item.element;
333 |         item.children = (item.actions || []).map((item: any) => {
334 |           item.label = item.name;
335 |           item.value = item.key;
336 |           return item;
337 |         });
338 |         return item;
339 |       });
340 |       const globalActions: any = cloneDeep(this.actionsKeys).map((key: string) => {
341 |         const item = this.actions[key];
342 |         item.value = key;
343 |         item.label = item.name;
344 |         item.children = (item.actions || []).map((item: any) => {
345 |           item.label = item.name;
346 |           item.value = item.key;
347 |           return item;
348 |         });
349 |         return item;
350 |       });
351 | 
352 |       this.linkOptions = [{
353 |         label: "全局",
354 |         value: 'global',
355 |         children: globalActions || []
356 |       }, {
357 |         label: "元素",
358 |         value: 'element',
359 |         children: elementActions
360 |       }];
361 |     }
362 |   }
363 |   handleCreateAction () {
364 | 
365 |     this.form = {
366 |       name: '',
367 |       event: '',
368 |       handle: [
369 |         {
370 |           name: '',
371 |           link: []
372 |         }
373 |       ]
374 |     };
375 |     this.$nextTick(() => {
376 |       if (!this.optionalOptions.length) {
377 |         this.$message.warning('组件上没有可用的动作了');
378 |         return;
379 |       }
380 |       this.visible = true;
381 |     });
382 |   }
383 |   handleSaveOrEdit () {
384 |     (this.$refs['form'] as any).validate((valid: boolean) => {
385 |       if (!valid) return false;
386 |       const form = cloneDeep(this.form as any);
387 |       if (!form.handle || !form.handle.length) {
388 |         return this.$message.warning("至少要添加一个具体动作");
389 |       }
390 |       const isEdit = form.key;
391 |       if (!form.key) {
392 |         form.key = generateUUID();
393 |       }
394 |       form.handle = form.handle.map((item: any) => {
395 |         const [type, namespace, key] = item.link;
396 |         item.link = `${type}_${namespace}.${key}`;
397 |         if (!item.key) {
398 |           item.key = generateUUID();
399 |         }
400 |         return item;
401 |       });
402 |       const actions: LowElementAction = form;
403 |       if (this.current) {
404 |         if (!this.current.actions) {
405 |           this.current.actions = [];
406 |         }
407 |         if (isEdit) {
408 |           const index = this.current.actions.findIndex((item) => item.key === form.key);
409 |           this.current.actions.splice(index, 1, actions);
410 |         } else {
411 |           this.current.actions.push(actions);
412 |         }
413 |       }
414 |       this.visible = false;
415 |     });
416 |   }
417 | 
418 |   handleEditAction (action: any) {
419 |     const cloneAction = cloneDeep(action);
420 | 
421 |     cloneAction.handle = cloneAction.handle.map((item: any) => {
422 |       const [location, key] = item.link.split('.');
423 |       const [type, namespace] = location.split('_');
424 |       item.link = [type, namespace, key];
425 |       return item;
426 |     });
427 | 
428 |     this.form = cloneAction;
429 |     this.visible = true;
430 |   }
431 | 
432 |   handleRemoveAction (action: any) {
433 |     if (!this.current) return;
434 |     const index = this.current?.actions?.findIndex(item => {
435 |       return item.key === action.key;
436 |     });
437 |     if (typeof index === 'undefined') return;
438 | 
439 |     this.current?.actions?.splice(index, 1);
440 |   }
441 | 
442 |   handleRemoveActionHandle (index: number) {
443 |     console.log('index', index);
444 |     // this.current?.actions?.splice(index, 1);
445 |     this.form.handle.splice(index, 1);
446 |   }
447 | 
448 |   handleClose () {
449 |     this.$store.commit("page/SET_CURRENT", undefined);
450 |   }
451 | 
452 |   hasElementExistParentsByElement (element: string) {
453 |     const current = this.current;
454 |     if (!current) return false;
455 | 
456 |     const find = (list: any[], id: string) => {
457 |       let resList: any[] = [];
458 |       list.forEach(item => {
459 |         if (item.children && item.children.length) {
460 |           const res = find(item.children, id);
461 |           if (res && res.length) {
462 |             resList.push(item, ...res);
463 |           }
464 |         }
465 |         if (item.id === id) {
466 |           resList.push(item);
467 |         }
468 |       });
469 | 
470 |       return resList;
471 |     };
472 |     const id = current.id;
473 | 
474 |     const chainList = find(this.elements?.children || [], id);
475 |     // 去掉当前的元素
476 |     chainList.pop();
477 |     const is = chainList.find(item => item.element === element);
478 |     return is;
479 |   }
480 | }
481 | </script>
482 | <style lang="scss" scoped>
483 | </style>


--------------------------------------------------------------------------------
/src/components/aside/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="low-aside">
  3 |     <div class="aside-action">
  4 |       <div
  5 |         class="action-item"
  6 |         :class="{ active: activeAction === 'page' }"
  7 |         @click="activeAction = 'page'"
  8 |       >
  9 |         <span class="el-icon-document"></span>
 10 |       </div>
 11 |       <div
 12 |         class="action-item"
 13 |         :class="{ active: activeAction === 'components' }"
 14 |         @click="activeAction = 'components'"
 15 |       >
 16 |         <span class="el-icon-s-grid"></span>
 17 |       </div>
 18 |       <div
 19 |         class="action-item"
 20 |         @click="activeAction = 'models'"
 21 |         :class="{ active: activeAction === 'models' }"
 22 |       >
 23 |         <span class="el-icon-s-data"></span>
 24 |       </div>
 25 |       <div
 26 |         class="action-item"
 27 |         @click="activeAction = 'actions'"
 28 |         :class="{ active: activeAction === 'actions' }"
 29 |       >
 30 |         <span class="el-icon-video-play"></span>
 31 |       </div>
 32 |     </div>
 33 |     <!-- 页面源 -->
 34 |     <div class="aside-handle" v-if="activeAction == 'page'">
 35 |       <low-aside-page />
 36 |     </div>
 37 |     <!-- 组件相关 -->
 38 |     <div class="aside-handle" v-if="activeAction == 'components'">
 39 |       <el-scrollbar class="aside-scrollbar">
 40 |         <el-collapse v-show="!current">
 41 |           <el-collapse-item
 42 |             :title="item.label"
 43 |             :name="item.label"
 44 |             v-for="item in elements"
 45 |             :key="item.label"
 46 |           >
 47 |             <div class="low-component-item">
 48 |               <drag-container v-bind="item" />
 49 |             </div>
 50 |           </el-collapse-item>
 51 |         </el-collapse>
 52 |         <!-- 配置页 -->
 53 |         <div v-if="current">
 54 |           <component
 55 |             :is="'bc-' + current.element + '-option'"
 56 |             :element="current"
 57 |           ></component>
 58 |         </div>
 59 |       </el-scrollbar>
 60 |     </div>
 61 |     <!-- 数据源 -->
 62 |     <div class="aside-handle" v-if="activeAction == 'models'">
 63 |       <low-model />
 64 |     </div>
 65 |     <!-- 数据源相关 -->
 66 |     <div class="aside-handle" v-if="activeAction == 'actions'">
 67 |       <el-scrollbar class="aside-scrollbar">
 68 |         <low-actions />
 69 |       </el-scrollbar>
 70 |     </div>
 71 |   </div>
 72 | </template>
 73 | <script lang='ts'>
 74 | import LowModel from '@/components/models/Index.vue'
 75 | import LowAsidePage from '@/components/aside-page/Index.vue'
 76 | import LowActions from '@/components/actions/Index.vue'
 77 | import { Component, Vue, Provide } from 'vue-property-decorator';
 78 | import { Getter, State } from 'vuex-class';
 79 | import { LowElement } from '@/types/Element';
 80 | import { ModelType } from '@/store/entities/Page';
 81 | @Component({
 82 |   name: 'low-aside',
 83 |   components: {
 84 |     LowModel,
 85 |     LowActions,
 86 |     LowAsidePage
 87 |   }
 88 | })
 89 | export default class LowAside extends Vue {
 90 | 
 91 |   activeAction: 'components' | 'models' | 'actions' | 'page' = 'page';
 92 | 
 93 |   @State('globalModels')
 94 |   models?: ModelType[];
 95 | 
 96 |   @State('currentId', { namespace: 'page' })
 97 |   currentId?: string;
 98 | 
 99 |   @Getter('current', { namespace: 'page' })
100 |   current?: LowElement;
101 | 
102 |   @Provide('draggableOptions')
103 |   draggableOptions = {
104 |     clone: true,
105 |     group: {
106 |       name: 'container',
107 |       pull: 'clone',
108 |       put: false,
109 |       disabled: true,
110 |     }
111 |   }
112 | 
113 |   elements = [
114 |     {
115 |       type: 'layout',
116 |       element: 'layout',
117 |       label: "功能",
118 |       disabled: true,
119 |       children: [
120 |         {
121 |           element: 'block',
122 |           type: 'contailner',
123 |           children: [
124 |             {
125 |               "element": "input",
126 |               "type": "element",
127 |               "name": "输入框组件",
128 |               "clone": true,
129 |               "props": {}
130 |             },
131 |           ]
132 |         },
133 |         {
134 |           element: 'block',
135 |           type: 'contailner',
136 |           children: [
137 |             {
138 |               "element": "button",
139 |               "type": "element",
140 |               "name": "按钮组件",
141 |               "clone": true,
142 |               "props": {
143 |                 "text": '按钮名称'
144 |               }, // 参数
145 |             }
146 |           ]
147 |         },
148 |         {
149 |           element: 'block',
150 |           type: 'contailner',
151 |           children: [
152 |             {
153 |               "element": "text",
154 |               "type": "element",
155 |               "name": "文字组件",
156 |               "clone": true,
157 |               "props": {
158 |                 "text": '文字组件'
159 |               }, // 参数
160 |             },
161 |           ]
162 |         },
163 |         {
164 |           element: 'block',
165 |           type: 'contailner',
166 |           children: [
167 |             {
168 |               "element": "tag",
169 |               "type": "element",
170 |               "name": "标签",
171 |               "clone": true,
172 |               "props": {
173 |                 "text": '标签一'
174 |               }, // 参数
175 |             },
176 |           ]
177 |         },
178 |         {
179 |           element: 'block',
180 |           type: 'contailner',
181 |           children: [
182 |             {
183 |               "element": "progress",
184 |               "type": "element",
185 |               "name": "进度条",
186 |               "clone": true,
187 |               "props": {
188 |                 percentage: 43
189 |               }, // 参数
190 |             },
191 |           ]
192 |         },
193 |         {
194 |           element: 'block',
195 |           type: 'contailner',
196 |           children: [
197 |             {
198 |               "element": "pagination",
199 |               "type": "element",
200 |               "name": "分页",
201 |               "clone": true,
202 |               "props": {
203 |                 total: 100
204 |               }, // 参数
205 |             },
206 |           ]
207 |         },
208 |         {
209 |           element: 'block',
210 |           type: 'contailner',
211 |           children: [
212 |             {
213 |               "element": "alert",
214 |               "type": "element",
215 |               "name": "警告",
216 |               "clone": true,
217 |               "props": {
218 |                 title: "提示的文案"
219 |               }, // 参数
220 |             },
221 |           ]
222 |         },
223 |       ]
224 |     },
225 |     {
226 |       type: 'layout',
227 |       element: 'layout',
228 |       label: "容器",
229 |       disabled: true,
230 |       children: [
231 |         {
232 |           element: 'block',
233 |           type: 'contailner',
234 |           children: [
235 |             {
236 |               name: "行",
237 |               "element": "row", // 元素名称 or 类型
238 |               "type": "container", // container or element
239 |               "clone": true,
240 |               disabled: true,
241 |               children: [
242 |                 {
243 |                   "element": "col", // 元素名称 or 类型
244 |                   "type": "container", // container or element
245 |                   "clone": true,
246 |                   name: "列",
247 | 
248 |                   props: {
249 |                     span: 12
250 |                   }
251 |                 }, {
252 |                   "element": "col", // 元素名称 or 类型
253 |                   "type": "container", // container or element
254 |                   "clone": true,
255 |                   name: "列",
256 | 
257 |                   props: {
258 |                     span: 12
259 |                   }
260 |                 },
261 |               ]
262 |             },
263 |           ]
264 |         },
265 |         {
266 |           element: 'block',
267 |           type: 'contailner',
268 |           children: [
269 |             {
270 |               "element": "col", // 元素名称 or 类型
271 |               "type": "container", // container or element
272 |               "clone": true,
273 |               name: "列",
274 | 
275 |               props: {
276 |                 span: 6
277 |               }
278 |             },
279 |           ]
280 |         }, {
281 |           element: 'block',
282 |           type: 'contailner',
283 |           children: [
284 |             {
285 |               "element": "block", // 元素名称 or 类型
286 |               "type": "container", // container or element
287 |               "clone": true,
288 |               name: "块元素",
289 | 
290 |               props: {}
291 |             },
292 |           ]
293 |         },
294 |         {
295 |           element: 'block',
296 |           type: 'contailner',
297 |           children: [
298 |             {
299 |               name: "表单",
300 |               "element": "form", // 元素名称 or 类型
301 |               "type": "container", // container or element
302 |               "clone": true,
303 |               disabled: true,
304 |               props: {
305 |                 size: 'mini'
306 |               },
307 |               children: [
308 |                 {
309 |                   "element": "form-item", // 元素名称 or 类型
310 |                   "type": "container", // container or element
311 |                   disabled: true,
312 |                   props: {
313 |                     label: "表单项"
314 |                   },
315 |                   children: [
316 |                     {
317 |                       disabled: true,
318 |                       "element": "input", // 元素名称 or 类型
319 |                       "type": "element", // container or element
320 |                       props: {
321 |                       },
322 |                     },
323 |                   ]
324 |                 },
325 |                 {
326 |                   "element": "form-item", // 元素名称 or 类型
327 |                   "type": "container", // container or element
328 |                   disabled: true,
329 |                   props: {
330 |                     label: "表单项"
331 |                   },
332 |                   children: [
333 |                     {
334 |                       disabled: true,
335 |                       "element": "input", // 元素名称 or 类型
336 |                       "type": "element", // container or element
337 |                       props: {
338 |                       },
339 |                     },
340 |                   ]
341 |                 },
342 |                 {
343 |                   "element": "form-item", // 元素名称 or 类型
344 |                   "type": "container", // container or element
345 |                   disabled: true,
346 |                   props: {
347 |                     label: "表单项"
348 |                   },
349 |                   children: [
350 |                     {
351 |                       disabled: true,
352 |                       "element": "button", // 元素名称 or 类型
353 |                       "type": "element", // container or element
354 |                       props: {
355 |                         text: "按钮",
356 |                       },
357 |                     },
358 |                   ]
359 |                 },
360 |               ]
361 |             },
362 |           ]
363 |         },
364 |         {
365 |           element: 'block',
366 |           type: 'contailner',
367 |           children: [
368 |             {
369 |               "element": "table", // 元素名称 or 类型
370 |               "type": "container", // container or element
371 |               "clone": true,
372 |               disabled: true,
373 |               props: {
374 |                 columns: [
375 |                   {
376 |                     id: "id",
377 |                     label: "编号"
378 |                   },
379 |                   {
380 |                     id: "name",
381 |                     label: "名称"
382 |                   }
383 |                 ]
384 |               },
385 |               children: [
386 |                 {
387 |                   "element": "button", // 元素名称 or 类型
388 |                   "type": "element", // container or element
389 |                   disabled: true,
390 |                   props: {
391 |                     type: "text",
392 |                     size: 'mini',
393 |                     text: '查看'
394 |                   },
395 |                 },
396 |               ]
397 |             },
398 |           ]
399 |         }
400 | 
401 |       ]
402 |     },
403 |     {
404 |       type: 'layout',
405 |       element: 'layout',
406 |       label: "表单",
407 |       disabled: true,
408 |       children: [
409 |         {
410 |           element: 'block',
411 |           type: 'contailner',
412 |           disabled: true,
413 |           children: [
414 |             {
415 |               "element": "form", // 元素名称 or 类型
416 |               "type": "container", // container or element
417 |               "clone": true,
418 |               // disabled: true,
419 |               props: {
420 |                 size: 'mini'
421 |               },
422 |               children: [
423 |                 {
424 |                   "element": "form-item", // 元素名称 or 类型
425 |                   "type": "container", // container or element
426 |                   disabled: true,
427 |                   props: {
428 |                     label: "表单项"
429 |                   },
430 |                   children: [
431 |                     {
432 |                       disabled: true,
433 |                       "element": "input", // 元素名称 or 类型
434 |                       "type": "element", // container or element
435 |                       props: {
436 |                       },
437 |                     },
438 |                   ]
439 |                 },
440 |               ]
441 |             },
442 |           ]
443 |         },
444 |         {
445 |           element: 'block',
446 |           type: 'contailner',
447 |           children: [
448 |             {
449 |               "element": "radio",
450 |               "type": "element",
451 |               "name": "单选框",
452 |               "clone": true,
453 |               "props": {
454 |                 options: [
455 |                   {
456 |                     label: "备选项1",
457 |                     value: "1",
458 |                   },
459 |                   {
460 |                     label: "备选项2",
461 |                     value: "2",
462 |                   }
463 |                 ]
464 |               }, // 参数
465 |             },
466 | 
467 |           ]
468 |         },
469 |         {
470 |           element: 'block',
471 |           type: 'contailner',
472 |           children: [{
473 |             "element": "checkbox",
474 |             "type": "element",
475 |             "name": "多选框",
476 |             "clone": true,
477 |             "props": {
478 |               options: [
479 |                 {
480 |                   label: "备选项1",
481 |                   value: "12",
482 |                 },
483 |                 {
484 |                   label: "备选项2",
485 |                   value: "23",
486 |                 }
487 |               ]
488 |             }, // 参数
489 |           }]
490 |         },
491 |         {
492 |           element: 'block',
493 |           type: 'contailner',
494 |           children: [{
495 |             "element": "select",
496 |             "type": "element",
497 |             "name": "多选框",
498 |             "clone": true,
499 |             "props": {
500 |               options: [
501 |                 {
502 |                   label: "备选项1",
503 |                   value: "12",
504 |                 },
505 |                 {
506 |                   label: "备选项2",
507 |                   value: "23",
508 |                 }
509 |               ]
510 |             }, // 参数
511 |           },]
512 |         },
513 |         {
514 |           element: 'block',
515 |           type: 'contailner',
516 |           children: [{
517 |             "element": "switch",
518 |             "type": "element",
519 |             "name": "开关",
520 |             "clone": true,
521 |             "props": {}, // 参数
522 |           }]
523 |         },
524 |         {
525 |           element: 'block',
526 |           type: 'contailner',
527 |           children: [{
528 |             "element": "slider",
529 |             "type": "element",
530 |             "name": "滑块",
531 |             "clone": true,
532 |             "props": {}, // 参数
533 |           }]
534 |         },
535 |         {
536 |           element: 'block',
537 |           type: 'contailner',
538 |           children: [{
539 |             "element": "time-picker",
540 |             "type": "element",
541 |             "name": "时间选择器",
542 |             "clone": true,
543 |             "props": {}, // 参数
544 |           }]
545 |         },
546 |         {
547 |           element: 'block',
548 |           type: 'contailner',
549 |           children: [{
550 |             "element": "date-picker",
551 |             "type": "element",
552 |             "name": "日期选择器",
553 |             "clone": true,
554 |             "props": {}, // 参数
555 |           }]
556 |         }
557 |       ]
558 |     }
559 |   ]
560 | }
561 | </script>
562 | <style lang="scss" scoped>
563 | .low-aside {
564 |   height: calc(100vh - 50px);
565 |   display: flex;
566 |   .aside-action {
567 |     width: 46px;
568 |     min-width: 46px;
569 |     position: relative;
570 |     z-index: 1;
571 |     background-color: #fff;
572 |     border-right: 1px solid #eee;
573 |     box-shadow: 0px 0 8px rgba($color: #888, $alpha: 0.2);
574 |     .action-item {
575 |       width: 46px;
576 |       height: 46px;
577 |       display: flex;
578 |       align-items: center;
579 |       justify-content: center;
580 |       color: rgb(97, 92, 92);
581 |       cursor: pointer;
582 |       user-select: none;
583 |       &.active {
584 |         color: #2196f3;
585 |         background-color: #ecf5ff;
586 |       }
587 |       span {
588 |         font-size: 20px;
589 |       }
590 |     }
591 |   }
592 |   .aside-handle {
593 |     flex: 1;
594 |     overflow: hidden;
595 |   }
596 |   .low-component-item {
597 |     position: relative;
598 |     padding: 18px 10px;
599 |     display: block;
600 |   }
601 |   ::v-deep {
602 |     .el-collapse-item__header {
603 |       height: auto;
604 |       line-height: 2.4;
605 |       padding: 0 10px;
606 |     }
607 |   }
608 |   .aside-scrollbar {
609 |     overflow-y: hidden;
610 |     height: 100%;
611 |   }
612 | }
613 | </style>


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