修改kformdesign源码 添加自定义数据展示组件

zkqy-ui/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset', '@babel/preset-env'
   ],
   'env': {
     'development': {

zkqy-ui/package.json

@@ -99,10 +99,13 @@
     "xml2js": "^0.6.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",

zkqy-ui/src/assets/js/kFormDesign.js

@@ -0,0 +1,659 @@
+let tempData = [
+  {
+    "title": "基础组件",
+    "list": [
+      {
+        "type": "input",
+        "label": "输入框",
+        "icon": "icon-write",
+        "options": {
+          "type": "text",
+          "width": "100%",
+          "defaultValue": "",
+          "placeholder": "请输入",
+          "clearable": false,
+          "maxLength": null,
+          "addonBefore": "",
+          "addonAfter": "",
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "textarea",
+        "label": "文本框",
+        "icon": "icon-edit",
+        "options": {
+          "width": "100%",
+          "minRows": 4,
+          "maxRows": 6,
+          "maxLength": null,
+          "defaultValue": "",
+          "clearable": false,
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false,
+          "placeholder": "请输入"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "number",
+        "label": "数字输入框",
+        "icon": "icon-number",
+        "options": {
+          "width": "100%",
+          "defaultValue": 0,
+          "min": null,
+          "max": null,
+          "precision": null,
+          "step": 1,
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false,
+          "placeholder": "请输入"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "下拉选择器",
+        "icon": "icon-xiala",
+        "options": {
+          "width": "100%",
+          "multiple": false,
+          "disabled": false,
+          "clearable": false,
+          "showLabel": true,
+          "hidden": false,
+          "placeholder": "请选择",
+          "dynamicKey": "",
+          "dynamic": false,
+          "options": [
+            {
+              "value": "1",
+              "label": "下拉框1"
+            },
+            {
+              "value": "2",
+              "label": "下拉框2"
+            }
+          ],
+          "showSearch": false
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "checkbox",
+        "label": "多选框",
+        "icon": "icon-duoxuan1",
+        "options": {
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "defaultValue": [],
+          "dynamicKey": "",
+          "dynamic": false,
+          "options": [
+            {
+              "value": "1",
+              "label": "选项1"
+            },
+            {
+              "value": "2",
+              "label": "选项2"
+            },
+            {
+              "value": "3",
+              "label": "选项3"
+            }
+          ]
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "radio",
+        "label": "单选框",
+        "icon": "icon-danxuan-cuxiantiao",
+        "options": {
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "defaultValue": "",
+          "dynamicKey": "",
+          "dynamic": false,
+          "options": [
+            {
+              "value": "1",
+              "label": "选项1"
+            },
+            {
+              "value": "2",
+              "label": "选项2"
+            },
+            {
+              "value": "3",
+              "label": "选项3"
+            }
+          ]
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "date",
+        "label": "日期选择框",
+        "icon": "icon-calendar",
+        "options": {
+          "width": "100%",
+          "defaultValue": "",
+          "rangeDefaultValue": [],
+          "range": false,
+          "showTime": false,
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "clearable": false,
+          "placeholder": "请选择",
+          "rangePlaceholder": ["开始时间", "结束时间"],
+          "format": "YYYY-MM-DD"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "time",
+        "label": "时间选择框",
+        "icon": "icon-time",
+        "options": {
+          "width": "100%",
+          "defaultValue": "",
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "clearable": false,
+          "placeholder": "请选择",
+          "format": "HH:mm:ss"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "slider",
+        "label": "滑动输入条",
+        "icon": "icon-menu",
+        "options": {
+          "width": "100%",
+          "defaultValue": 0,
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "showInput": false
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "uploadFile",
+        "label": "上传文件",
+        "icon": "icon-upload",
+        "options": {
+          "defaultValue": "[]",
+          "multiple": false,
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "drag": false,
+          "downloadWay": "a",
+          "dynamicFun": "",
+          "width": "100%",
+          "limit": 3,
+          "data": "{}",
+          "fileName": "file",
+          "headers": {},
+          "action": "http://cdn.kcz66.com/uploadFile.txt",
+          "placeholder": "上传"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "uploadImg",
+        "label": "上传图片",
+        "icon": "icon-image",
+        "options": {
+          "defaultValue": "[]",
+          "multiple": false,
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false,
+          "width": "100%",
+          "data": "{}",
+          "limit": 3,
+          "placeholder": "上传",
+          "fileName": "image",
+          "headers": {},
+          "action": "http://cdn.kcz66.com/upload-img.txt",
+          "listType": "picture-card"
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "treeSelect",
+        "label": "树选择器",
+        "icon": "icon-tree",
+        "options": {
+          "disabled": false,
+          "multiple": false,
+          "showLabel": true,
+          "hidden": false,
+          "clearable": false,
+          "showSearch": false,
+          "treeCheckable": false,
+          "placeholder": "请选择",
+          "dynamicKey": "",
+          "dynamic": false,
+          "options": [
+            {
+              "value": "1",
+              "label": "选项1",
+              "children": [
+                {
+                  "value": "11",
+                  "label": "选项11"
+                }
+              ]
+            },
+            {
+              "value": "2",
+              "label": "选项2",
+              "children": [
+                {
+                  "value": "22",
+                  "label": "选项22"
+                }
+              ]
+            }
+          ]
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "cascader",
+        "label": "级联选择器",
+        "icon": "icon-guanlian",
+        "options": {
+          "disabled": false,
+          "showLabel": true,
+          "hidden": false,
+          "showSearch": false,
+          "placeholder": "请选择",
+          "clearable": false,
+          "dynamicKey": "",
+          "dynamic": false,
+          "options": [
+            {
+              "value": "1",
+              "label": "选项1",
+              "children": [
+                {
+                  "value": "11",
+                  "label": "选项11"
+                }
+              ]
+            },
+            {
+              "value": "2",
+              "label": "选项2",
+              "children": [
+                {
+                  "value": "22",
+                  "label": "选项22"
+                }
+              ]
+            }
+          ]
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "batch",
+        "label": "动态表格",
+        "icon": "icon-biaoge",
+        "list": [],
+        "options": {
+          "scrollY": 0,
+          "minLimit": 1,
+          "disabled": false,
+          "hidden": false,
+          "showLabel": false,
+          "hideSequence": false,
+          "width": "100%"
+        },
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ],
+        "model": "",
+        "key": "",
+        "help": ""
+      },
+      {
+        "type": "selectInputList",
+        "label": "选择输入列",
+        "icon": "icon-biaoge",
+        "columns": [
+          {
+            "value": "1",
+            "label": "选项1",
+            "list": []
+          },
+          {
+            "value": "2",
+            "label": "选项2",
+            "list": []
+          }
+        ],
+        "options": {
+          "disabled": false,
+          "multiple": true,
+          "hidden": false,
+          "showLabel": false,
+          "width": "100%"
+        },
+        "model": "",
+        "key": "",
+        "help": ""
+      },
+      {
+        "type": "switch",
+        "label": "开关",
+        "icon": "icon-kaiguan3",
+        "options": {
+          "defaultValue": false,
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      },
+      {
+        "type": "text",
+        "label": "文字",
+        "icon": "icon-zihao",
+        "options": {
+          "textAlign": "left",
+          "hidden": false,
+          "showRequiredMark": false,
+          "noFormItem": true,
+          "color": "rgba(0, 0, 0, 0.9)",
+          "fontFamily": "",
+          "fontSize": "10.5pt"
+        },
+        "key": ""
+      },
+      {
+        "type": "textShow",
+        "label": "文本展示",
+        "icon": "icon-pingfen_moren",
+        "options": {
+          "type": "text",
+          "width": "100%",
+          "defaultValue": "",
+          "placeholder": "请输入",
+          "clearable": false,
+          "maxLength": null,
+          "addonBefore": "",
+          "addonAfter": "",
+          "showLabel": true,
+          "hidden": false,
+          "disabled": false
+        },
+        "model": "",
+        "key": "",
+        "help": "",
+        "rules": [
+          {
+            "required": false,
+            "message": "必填项"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "title": "布局组件",
+    "list": [
+      {
+        "type": "divider",
+        "label": "分割线",
+        "icon": "icon-fengexian",
+        "options": {
+          "orientation": "left",
+          "noFormItem": true
+        },
+        "key": "",
+        "model": ""
+      },
+      {
+        "type": "card",
+        "label": "卡片布局",
+        "icon": "icon-qiapian",
+        "list": [],
+        "options": {
+          "noFormItem": true
+        },
+        "key": "",
+        "model": ""
+      },
+      {
+        "type": "tabs",
+        "label": "标签页布局",
+        "icon": "icon-tabs",
+        "options": {
+          "tabBarGutter": null,
+          "type": "line",
+          "tabPosition": "top",
+          "size": "default",
+          "noFormItem": true,
+          "animated": true
+        },
+        "columns": [
+          {
+            "value": "1",
+            "label": "选项1",
+            "list": []
+          },
+          {
+            "value": "2",
+            "label": "选项2",
+            "list": []
+          }
+        ],
+        "key": "",
+        "model": ""
+      },
+      {
+        "type": "grid",
+        "label": "栅格布局",
+        "icon": "icon-zhage",
+        "columns": [
+          {
+            "span": 12,
+            "list": []
+          },
+          {
+            "span": 12,
+            "list": []
+          }
+        ],
+        "options": {
+          "noFormItem": true,
+          "gutter": 0
+        },
+        "key": "",
+        "model": ""
+      },
+      {
+        "type": "table",
+        "label": "表格布局",
+        "icon": "icon-biaoge",
+        "trs": [
+          {
+            "tds": [
+              {
+                "colspan": 1,
+                "rowspan": 1,
+                "list": []
+              },
+              {
+                "colspan": 1,
+                "rowspan": 1,
+                "list": []
+              }
+            ]
+          },
+          {
+            "tds": [
+              {
+                "colspan": 1,
+                "rowspan": 1,
+                "list": []
+              },
+              {
+                "colspan": 1,
+                "rowspan": 1,
+                "list": []
+              }
+            ]
+          }
+        ],
+        "options": {
+          "width": "100%",
+          "bordered": true,
+          "bright": false,
+          "small": true,
+          "noFormItem": true,
+          "customStyle": ""
+        },
+        "key": "",
+        "model": ""
+      }
+    ]
+  }
+]
+export default tempData

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/config/formItemsConfig.js

@@ -591,6 +591,34 @@ export const defaultSchemaList = [
     },
     key: ""
   },
+  {
+    type: "textShow", // 表单类型
+    label: "文本展示", // 标题文字
+    icon: "icon-pingfen_moren",
+    options: {
+      type: "text",
+      width: "100%", // 宽度
+      defaultValue: "", // 默认值
+      placeholder: "请输入", // 没有输入时，提示文字
+      clearable: false,
+      maxLength: null,
+      addonBefore: "",
+      addonAfter: "",
+      showLabel: true,
+      hidden: false, // 是否隐藏，false显示，true隐藏
+      disabled: false // 是否禁用，false不禁用，true禁用
+    },
+    model: "", // 数据字段
+    key: "",
+    help: "",
+    rules: [
+      //验证规则
+      {
+        required: false, // 必须填写
+        message: "必填项"
+      }
+    ]
+  },
   {
     type: "html",
     label: "HTML",

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/index.vue

@@ -153,6 +153,8 @@ import { revoke, nodeSchema } from "../../utils/index";
 import formItemProperties from "./module/formItemProperties";
 import formProperties from "./module/formProperties";
 import { black } from '@/components/updateModule/bpmn-js/lib/draw/BpmnRenderUtil'
+import stringify from 'uuid/dist/stringify'
+import tempData from '@/assets/js/kFormDesign.js'
 
 
 export default {
@@ -525,6 +527,8 @@ export default {
     let blackList=['评分','警告提示','HTML','富文本','按钮']
     this.loadState = true;
     nodeSchema.addComputed(this.schemaGroup);
+    this.schemaGroup = tempData;
+    console.log('this.schemaGroup',this.schemaGroup);
     this.schemaGroup[0].list = this.schemaGroup[0].list.filter(item => {
       return !blackList.some(v=>v==item.label)
     })

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/module/formItemProperties.vue

@@ -40,7 +40,7 @@
           v-if="!hideModel && isDefined(selectItem.model)"
           label="列名"
         >
-          <el-select v-model="selectItem.model" filterable placeholder="请选择">
+          <el-select v-model="selectItem.model" @change="changeModel" filterable placeholder="请选择">
             <el-option
               v-for="item in formList.listName"
               :key="item.value"
@@ -710,6 +710,10 @@ export default {
     }
   },
   methods: {
+    // 列名变化回调
+    changeModel() {
+      console.log('列',this.selectItem);
+    },
     setDynamicKey(sqlData) {
       console.log('sqlData',sqlData);
       this.options.dynamicKey = sqlData.dynamicName;
@@ -754,6 +758,7 @@ export default {
   },
   mounted() {
     this.getFormList();
+    console.log('this.selectItem',this.selectItem);
     if (this.selectItem.tableName) {
       this.getListName()
     }

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KFormItem/index.vue

@@ -73,8 +73,9 @@
  * date 2019-11-20
  */
 import { pluginManager, lazyLoadTick } from "../../utils/index";
+import textShow from '../KTextShow/index.js'
 const _ = require("lodash/object");
-const ComponentArray = pluginManager.getComponents();
+let ComponentArray = pluginManager.getComponents();
 
 export default {
   name: "KFormItem",
@@ -192,6 +193,11 @@ export default {
      */
 
     componentItem() {
+      
+      ComponentArray.textShow = {
+        component: textShow,
+        bindModel:'value'
+      }
       return ComponentArray[this.record.type].component;
     },
     componentOption() {

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KTextShow/KTextShow.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    :style="{
+      textAlign: record.options.textAlign,
+      transform: 'translateY(-2px)',
+      paddingRight: '8px'
+    }"
+  >
+    <label
+      :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
+      :style="{
+        fontFamily: record.options.fontFamily,
+        fontSize: record.options.fontSize,
+        color: record.options.color
+      }"
+      v-text="record.value"
+    ></label>{{ value }}
+  </div>
+</template>
+<script>
+export default {
+  name: "KTextShow",
+  props: ["record", 'value'],
+  computed: {
+    sliderValue: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        this.$emit("change", e);
+      }
+    }
+  }
+};
+</script>

zkqy-ui/src/components/updateModule/k-form-design/packages/components/KTextShow/index.js

@@ -0,0 +1,2 @@
+import KTextShow from "./KTextShow.vue";
+export default KTextShow;

zkqy-ui/src/components/updateModule/k-form-design/packages/utils/NodeSchema.js

@@ -30,6 +30,7 @@ class NodeSchema {
         "button",
         "alert",
         "text",
+        'textShow',
         "html"
       ]
     },