完善组件

src/assets/icons/divider.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621348464972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1892" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M153.6 153.6h716.8a51.2 51.2 0 0 1 0 102.4H153.6a51.2 51.2 0 1 1 0-102.4z m0 614.4h716.8a51.2 51.2 0 0 1 0 102.4H153.6a51.2 51.2 0 0 1 0-102.4z m0-307.2h131.6352a51.2 51.2 0 1 1 0 102.4H153.6a51.2 51.2 0 0 1 0-102.4z m292.5568 0h131.6864a51.2 51.2 0 0 1 0 102.4H446.1568a51.2 51.2 0 0 1 0-102.4z m292.608 0H870.4a51.2 51.2 0 0 1 0 102.4h-131.6352a51.2 51.2 0 0 1 0-102.4z" fill="#666666" p-id="1893"></path></svg>

src/assets/icons/page.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621347642757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2440" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912 64v256H112V64h66.688v192h666.688V64zM112 960v-256h800v256h-66.624v-192H178.688v192zM64 448h896v128H64z" p-id="2441"></path></svg>

src/assets/icons/sign-pad.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621345672113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2050" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M667.68154392 174.22287399c55.18774932-13.41286797 107.36203501-1.12266277 148.66421523 25.23037447 77.16830956 59.64885778 97.81939907 170.82203839 21.83284114 269.08459354l-32.55722748 42.12940601c-11.66978618 7.82909676-38.76141769 42.92708794-44.93606291 43.69522609-55.86725599 57.7580569-75.92747151 98.26255638-67.98019947 160.54080815 8.77449781 68.39381176 70.37324412 104.76218362 183.90992554 102.81229507 6.2632779-0.76813812 13.23560626 4.66791399 20.29656487 10.04487969 0.79768195 6.23373406 1.56581886 12.46746814-3.89977706 19.49888292-5.37696447 6.97232837-11.61069852 7.79955293-17.81488879 8.5972361-139.26929961-1.09311894-214.84224529-48.33359625-226.83701227-141.66234425-9.54263593-74.65708965 15.92408789-122.19300394 76.40017143-193.18666709 6.20419024-0.79768195 33.3253644-35.89567193 44.96560673-43.69522487 10.84256164-14.00374316 22.51234777-21.86238495 33.3253644-35.86612812 53.44466755-76.40017143 42.27712511-163.52472799-13.85602408-206.89497326-21.09424682-16.27861374-41.33172406-26.32349339-66.20757267-23.1327668l21.03515918 16.24906989c21.09424682 16.24906992 24.28497341 41.18400617 7.17913391 55.98543127l-403.71552181 500.76678398c-5.43605211 6.97232837-22.51234777 21.83284113-34.92072827 23.42820381l-144.52808881 56.4581312c-24.10771049 9.39491682-38.14099867-1.44764479-35.09799-27.12117414l18.99663919-147.8665345c-1.59536269-12.43792431 9.24719771-26.47121129 14.68324983-33.5026273L570.36438857 155.0785157c16.27861374-21.06470299 41.95214308-18.02169552 62.18962032-8.00635967l35.12753503 27.15071796zM200.91963101 676.70319593s-4.63837136 13.23560626-10.04487967 20.26702226l-16.75131365 115.95926988 114.21618807-46.23598981c6.20419024-0.73859431 11.64024236-7.79955293 17.04675188-14.83096895l403.74506563-500.76678396-104.49629047-75.12978958L200.91963101 676.70319593z m376.59434765-465.60970512l104.49629045 75.10024574-27.09163152 35.09798999-104.49628923-75.12978954 27.0916303-35.06844619zM250.52360913 619.77236481l104.49629044 75.10024575-27.12117536 35.0979912-104.49628923-75.15933339 27.12117415-35.03890356z" p-id="2051"></path></svg>

src/components/form/SignPad/index.vue

@@ -26,6 +26,15 @@ export default {
         value: {
             type: String,
             default: ''
+        },
+        color: {
+            type: String,
+            default: ''
+        },
+        // 文件上传地址
+        action: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -36,7 +45,7 @@ export default {
             config: {
                 minWidth: 1,
                 maxWidth: 3,
-                penColor: 'rgb(66, 133, 244)'
+                penColor: this.color
             }
         }
     },
@@ -98,7 +107,7 @@ export default {
             let config = {
                 headers: {'Content-Type': 'multipart/form-data'}
             }
-            this.$api.post('/project/file/upload/77f1648542af4caf98deb8345a3d0406', param, config).then(res => {
+            this.$api.post(this.action, param, config).then(res => {
                 this.signImageUrl = res.data
                 this.$emit('input', res.data)
             })

src/components/form/pagination/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="page-container">
+        <div>
+            <el-button v-if="prev" size="mini" type="primary" icon="el-icon-arrow-left">上一页</el-button>
+            <el-button size="mini" type="primary">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
+        </div>
+        <div style="text-align: center;">
+            <span v-if="currPage" class="desc-text">第2页，</span>
+            <span v-if="totalPage" class="desc-text">共5页</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Pagination',
+    props: {
+        // 上一页按钮
+        prev: {
+            type: Boolean,
+            default: true
+        },
+        currPage: {
+            type: Boolean,
+            default: true
+        },
+        totalPage: {
+            type: Boolean,
+            default: true
+        }
+    }
+}
+</script>
+<style scoped>
+.page-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+</style>

src/components/generator/config.js

@@ -595,6 +595,28 @@ export const assistComponents = [
         textAlign: 'left',
         style: {width: '100%'}
     },
+    {
+        typeId: 'DIVIDER',
+        __config__: {
+            label: '分割线',
+            defaultValue: '分割线',
+            showLabel: false,
+            showDefaultValue: false,
+            showRequired: false,
+            showClearable: false,
+            showRegList: false,
+            tag: 'el-divider',
+            tagIcon: 'divider',
+            layout: 'colFormItem',
+            span: 24,
+            required: false,
+            regList: [],
+            changeTag: false
+        },
+        color: '#000000',
+        style: {width: '100%'},
+        action: '/project/file/upload/'
+    },
     {
         typeId: 'SIGN_PAD',
         __config__: {
@@ -606,15 +628,35 @@ export const assistComponents = [
             showClearable: false,
             showRegList: false,
             tag: 'sign-pad',
-            tagIcon: 'text',
+            tagIcon: 'sign-pad',
             layout: 'colFormItem',
             span: 24,
             required: true,
             regList: [],
             changeTag: false
         },
-        color: '',
-        textAlign: 'left',
+        color: '#000000',
+        style: {width: '100%'},
+        action: '/project/file/upload/'
+    },
+    {
+        typeId: 'PAGINATION',
+        __config__: {
+            label: '分页',
+            defaultValue: '分页',
+            showLabel: false,
+            showDefaultValue: false,
+            showRequired: false,
+            showClearable: false,
+            showRegList: false,
+            tag: 'pagination',
+            tagIcon: 'page',
+            layout: 'colFormItem',
+            span: 24,
+            required: false,
+            regList: [],
+            changeTag: false
+        },
         style: {width: '100%'}
     }
 ]

src/utils/convert.js

@@ -78,7 +78,7 @@ export function dbDataConvertForItemJson(data) {
         }
     }
     // 不同项目地址区分 动态修改上传地址
-    if (jsonItem.__config__.tag === 'el-upload') {
+    if (jsonItem.action) {
         jsonItem.action = jsonItem.action + data.projectKey
     }
     jsonItem.regList = data.regList
@@ -177,6 +177,15 @@ const dataParams = {
     // 图片轮播
     'IMAGE_CAROUSEL': {
         'options': '__slot__.options'
+    },
+    // 文字描述
+    'DESC_TEXT': {
+        'color': 'color',
+        'textAlign': 'textAlign'
+    },
+    // 手写签名
+    'SIGN_PAD': {
+        'color': 'color'
     }
 }
 

src/views/form/RightPanel.vue

@@ -679,7 +679,7 @@
                     <el-form-item v-if="activeData['color'] !== undefined" label="颜色">
                         <el-color-picker v-model="activeData['color']"/>
                     </el-form-item>
-                    <el-form-item v-if="activeData['textAlign'] !== undefined" label="颜色">
+                    <el-form-item v-if="activeData['textAlign'] !== undefined" label="对齐方式">
                         <el-radio-group v-model="activeData.textAlign">
                             <el-radio-button label="left">
                                 左对齐

src/views/test.vue

@@ -1,16 +1,18 @@
 <template>
     <div>
         <sign-pad />
+        <pagination />
     </div>
 </template>
 
 <script>
 import SignPad from '../components/form/SignPad'
-
+import pagination from '../components/form/pagination'
 export default {
     name: 'App',
     components: {
-        SignPad
+        SignPad,
+        pagination
     },
     data() {
         return {