瀏覽代碼

kformdesign源码暂存

lph 1 年之前
父節點
當前提交
cd4bdfc12c

+ 28 - 0
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",

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

@@ -152,6 +152,10 @@ import { Modal, message } from "ant-design-vue";
 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 {
   name: "KFormDesign",
@@ -520,8 +524,14 @@ export default {
     }
   },
   created() {
+    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)
+    })
   }
 };
 </script>

+ 6 - 1
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()
     }

+ 9 - 5
zkqy-ui/src/components/updateModule/k-form-design/packages/components/KFormDesign/module/formProperties.vue

@@ -16,7 +16,7 @@
 
         <a-form-item label="绑定表名称(主表)">
             <!-- <Input style="width:100%;" v-model="config.mainTableName" /> -->
-            <el-select v-model="config.mainTableName" placeholder="请选择实际操作表">
+            <el-select v-model="config.mainTableName" placeholder="请选择实际操作表" clearable filterable>
             <el-option
               v-for="item in tableList"
               :key="item.tableName"
@@ -31,16 +31,16 @@
         <a-form-item
           label="关联的自定义表格"
         >
-          <el-select v-model="config.tdId" @change="relationTableChange" filterable placeholder="请选择拖拽table">
+          <el-select v-model="config.tdId" @change="relationTableChange" clearable filterable placeholder="请选择拖拽table">
             <el-option
               v-for="item in dragTableList"
               :key="item.tId"
               :label="item.dtName"
               :value="item.tId">
-              <!-- <span v-show="false">{{ $sessionStorage.setItem('sqlKey',item.sqlKey) }}</span> -->
             </el-option>
           </el-select>
         </a-form-item>
+        
         <a-form-item label="表单描述">
             <Textarea v-model="config.formDescription" />
         </a-form-item>
@@ -196,7 +196,8 @@ export default {
         nickFormName: [
             { required: true, message: '请输入表单别名', trigger: 'blur' }
           ],
-        }
+      },
+      
     }
   },
   components: {
@@ -232,7 +233,10 @@ export default {
         24 - e;
     },
     relationTableChange(tId) {
-      let sqlKey = this.dragTableList.filter(item => item.tId == tId)[0].sqlKey;
+      // if (!tId) {
+      //   return 
+      // }
+      let sqlKey = this.dragTableList.filter(item => item.tId == tId)[0]?.sqlKey;
 sessionStorage.setItem('sqlKey',sqlKey)
   }
   },

+ 7 - 1
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() {

+ 35 - 0
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>

+ 2 - 0
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;

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

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