k-form-design源码修改 新增表格行选择组件的相关配置及数据获取

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

@@ -444,6 +444,31 @@ let tempData = [
         "key": "",
         "help": ""
       },
+      {
+        "type": "tableShow",
+        "label": "表格",
+        tableName: '',
+        "icon": "icon-table",
+        "list": [],
+        "options": {
+          // noFormItem: true,
+          showLabel: false,
+        },
+        "columns": [
+          // {
+          //   prop: "name",
+          //   label: "姓名",
+          //   width: 120,
+          // }
+        ],
+        "tableData": [
+          // {
+          //   name: "张三",
+          // }
+        ],
+        "model": "",
+        "key": "",
+      },
       {
         "type": "selectInputList",
         "label": "选择输入列",

zkqy-ui/src/components/kFormDesign/OptionsEdit.vue

@@ -447,7 +447,7 @@ export default {
     myDynamicKey: {
       handler(nval) {
         this.formData.dynamicName = nval;
-        console.log(this.formData.dynamicName);
+        // console.log(this.formData.dynamicName);
       },
       deep: true,
     },
@@ -470,7 +470,7 @@ export default {
     },
     myOptions: {
       handler(nval) {
-        console.log("options", nval);
+        // console.log("options", nval);
         this.btnList = [];
         this.reset();
         if (nval.sqlData && nval.sqlData.dynamicName == nval.dynamicKey) {
@@ -481,7 +481,7 @@ export default {
             };
           });
         }
-        console.log(this.btnList);
+        // console.log(this.btnList);
       },
       deep: true,
       immediate: true,
@@ -562,7 +562,7 @@ export default {
       // }
       this.editIndex = editIndex;
       let currentItem = this.btnList[editIndex];
-      console.log(currentItem, "currentItem");
+      // console.log(currentItem, "currentItem");
       if (currentItem?.echoData) {
         let { formData, filterTableData, flagFormData } = JSON.parse(
           currentItem.echoData
@@ -679,7 +679,7 @@ export default {
     },
   },
   async mounted() {
-    console.log(this.options, this.selectItem);
+    // console.log(this.options, this.selectItem);
     // if (this.selectItem.options.sqlData) {
     //   this.btnList = this.selectItem.options.sqlData.echoDatas.map((item) => {
     //     return {

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

@@ -104,6 +104,7 @@ export default {
       return this.record.list.filter(item => !item.options.hidden).length;
     },
     columns() {
+      console.log(this.record);
       const columns = [];
       if (!this.record.options.hideSequence) {
         columns.push({

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

@@ -3,7 +3,19 @@
     <a-row v-if="type === 'option' || type === 'tab'" :gutter="8">
       <div class="option-change-box" v-for="(val, index) in value" :key="index">
         <a-col :span="9"><Input v-model="val.label" placeholder="名称"/></a-col>
-        <a-col :span="9"><Input v-model="val.value" placeholder="值"/></a-col>
+        <a-col :span="9">
+          <!-- <Input v-model="val.value" placeholder="值"/> -->
+          <el-select v-model="val.value" placeholder="请选择" filterable>
+            <el-option
+              v-for="item in tableList"
+              :key="item.tableName"
+              :label="item.tableComment"
+              :value="item.tableName">
+              <span class="discribe" style="float: left">{{ item.tableComment }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tableName }}</span>
+            </el-option>
+          </el-select>
+          </a-col>
         <a-col :span="6"
           ><div @click="handleDelete(index)" class="option-delete-box">
             <a-icon type="delete" /></div
@@ -48,19 +60,23 @@
   </div>
 </template>
 <script>
+import { mounted } from 'vue2-ace-editor'
 /*
  * author kcz
  * date 2019-11-20
  * description 修改多选、下拉、单选等控件options的组件，添加移除校验规制的组件
  */
+import { getUncommonTable } from '@/utils/other';
 import { pluginManager } from "../../utils/index";
 const Input = pluginManager.getComponent("input").component;
 const InputNumber = pluginManager.getComponent("number").component;
+const Select = pluginManager.getComponent("select").component;
 export default {
   name: "KChangeOption",
   components: {
     Input,
-    InputNumber
+    InputNumber,
+    Select
   },
   props: {
     value: {
@@ -70,9 +86,29 @@ export default {
     type: {
       type: String,
       default: "option"
+    },
+    tableList:{
+      type: Array,
+      default:()=>[],
+    }
+  },
+  data() {
+    return {
+      // tableOptions: [],
     }
   },
+  mounted() {
+    // this.getTableList();
+  },
   methods: {
+    // 获取表格list
+    async getTableList() {
+      let par = {
+        ... this.$store.state.user.dataSource
+      }
+      let res = await getUncommonTable()
+      this.tableOptions=res||[]
+    },
     handleAdd() {
       // 添加
       const addData = [

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

@@ -101,6 +101,7 @@ export default {
       this.form.resetFields();
     },
     getData() {
+      console.log('this.form',this.form);
       // 提交函数，提供父级组件调用
       return new Promise((resolve, reject) => {
         try {
@@ -145,6 +146,7 @@ export default {
         }
       });
     },
+    getselectData(){},
     setData(json) {
       return new Promise((resolve, reject) => {
         lazyLoadTick.nextTick(() => {

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

@@ -83,7 +83,8 @@
               <slot name="right-action"></slot>
             </template>
           </operatingArea>
-          <!-- 操作区域 end -->
+          <!-- 操作区域 end --> 
+          <!-- 中间控件渲染区域 start -->
           <k-form-component-panel
             :class="{ 'no-toolbars-top': !toolbarsTop }"
             :data="data"
@@ -94,6 +95,8 @@
             ref="KFCP"
             @handleSetSelectItem="handleSetSelectItem"
           />
+          <!-- 中间控件渲染区域 end -->
+
           <!-- 操作区域 start -->
           <k-json-modal ref="jsonModal" />
           <k-code-modal ref="codeModal" />
@@ -302,6 +305,8 @@ export default {
     },
     handleListPush(item) {
       // 双击控件按钮push到list
+      console.log(this.selectItem);
+      console.log(item);
       // 生成key值
       if (!this.selectItem.key) {
         // 在没有选择表单时，将数据push到this.data.list

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

@@ -9,7 +9,7 @@
 
       <a-form v-show="selectItem.key !== ''">
         <a-form-item v-if="isDefined(selectItem.label)" label="标签">
-          <Input v-model="selectItem.label" placeholder="请输入" />
+          <Input v-model="selectItem.label" @input="seeSelectItem" placeholder="请输入" />
         </a-form-item>
 
         <!-- +++ -->
@@ -51,6 +51,22 @@
             </el-option>
           </el-select>
         </a-form-item>
+        <a-form-item
+          v-if="!hideModel && isDefined(selectItem.columns)"
+          label="编辑列"
+        >
+        <el-button type="primary" icon="el-icon-edit" @click="editTableColumns(selectItem)">编辑</el-button>
+          <!-- <el-select v-model="selectItem.model" @change="changeModel" filterable placeholder="请选择">
+            <el-option
+              v-for="item in formList.listName"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+              <span style="float: left">{{ item.label }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldDescription }}</span>
+            </el-option>
+          </el-select> -->
+        </a-form-item>
        
         <!-- input type start -->
         <a-form-item v-if="selectItem.type === 'input'" label="输入框type">
@@ -161,7 +177,7 @@
           v-if="['tabs', 'selectInputList'].includes(selectItem.type)"
           :label="selectItem.type === 'tabs' ? '页签配置' : '列选项配置'"
         >
-          <KChangeOption v-model="selectItem.columns" type="tab" />
+          <KChangeOption v-model="selectItem.columns" :tableList="formList.formName" type="tab" />
         </a-form-item>
         <!-- tabs配置 end -->
         <a-form-item v-if="selectItem.type === 'grid'" label="栅格间距">
@@ -562,10 +578,57 @@
         </a-form-item>
       </a-form>
     </div>
+    <!-- 表格展示数据弹窗 -->
+    <el-dialog
+      :visible.sync="tableShowData.isShow"
+      :modal-append-to-body="false"
+      :append-to-body="true"
+      title="表格展示数据"
+      width="500px"
+    >
+    <div class="ben-list mb5" >
+      <el-button type="primary" size="small" icon="el-icon-plus" @click="addOneColumn">添加一列</el-button>
+      <el-button size="small" icon="el-icon-close" @click="tableShowData.isShow=false">关闭</el-button>
+    </div>
+    
+    <div class="table-wrap">
+    <el-table v-if="selectItem" :data="selectItem.columns||[]" border stripe>
+    <el-table-column type="index" width="50" />
+    <el-table-column prop="prop" label="字段">
+      <template slot-scope="scope">
+        <el-select v-model="scope.row.prop" filterable size="mini">
+      <el-option
+              v-for="item in formList.listName"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+              <span style="float: left">{{ item.label }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldDescription }}</span>
+            </el-option>
+      </el-select>
+      </template>
+      
+    </el-table-column>
+    <el-table-column prop="label" label="描述">
+      <template slot-scope="scope">
+        <el-input v-model="scope.row.label"  size="mini" clearable ></el-input>
+        
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template slot-scope="scope">
+        <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除</el-button>
+      </template>
+    </el-table-column>
+    
+    </el-table>
+    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { message } from 'ant-design-vue'
 /*
  * author kcz
  * date 2019-11-20
@@ -688,6 +751,10 @@ export default {
         listName:[],
         tableName:""
       },
+      tableShowData: {
+        isShow: false,
+        columns:[]
+      }
     };
   },
   computed: {
@@ -707,9 +774,34 @@ export default {
     hideModel: {
       type: Boolean,
       default: false
-    }
+    },
+    
   },
   methods: {
+    // 删除一列
+    handleDelete(index){
+      this.selectItem.columns.splice(index,1)
+    },
+    // 添加一列
+    addOneColumn(){
+      this.selectItem.columns.push({
+        label:'',
+        prop:'',
+      })
+    },
+    // 编辑tableShow的列
+    editTableColumns() {
+      if(!this.selectItem.tableName){
+        this.$message.warning('请先选择表名')
+        return
+      }
+      console.log(this.selectItem)
+      this.tableShowData.isShow = true;
+      
+    },
+    seeSelectItem() {
+      console.log('selectItem',this.selectItem);
+    },
     // 列名变化回调
     changeModel() {
       console.log('列',this.selectItem);
@@ -725,12 +817,13 @@ export default {
      * @param {*} value
      */
     isDefined(value) {
+
       return typeof value !== "undefined";
     },
     // 判断是否需要列名
     isNeedColumn(value) {
       console.log(value.type);
-      let notNeedColumnList = ['batch', 'selectInputList'];
+      let notNeedColumnList = ['batch', 'selectInputList','tableShow'];
       if (notNeedColumnList.includes(value.type)) {
         return false;
       } else {
@@ -753,7 +846,9 @@ export default {
       let flag=notNeedColumnList.includes(item.type)
       if (flag) {
       item.model='batch.'+item.tableName
-      } else {
+      } else if(item.type){
+        item.model=item.tableName
+      }else {
       item.model=''
     }
       let par2 = {
@@ -796,5 +891,8 @@ export default {
   overflow:hidden;
   text-overflow:ellipsis;
 }
-
+.table-wrap{
+  max-height: 500px;
+  overflow-y: scroll
+}
 </style>

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

@@ -476,6 +476,58 @@
       </div>
     </template>
     <!-- 表格布局 end -->
+    <!-- 表格展示  start -->
+    <template v-else-if="record.type === 'tableShow'">
+      <div
+        class="table-box"
+        :class="{ active: record.key === selectItem.key }"
+        @click.stop="handleSelectItem(record)"
+        style="overflow: scroll;"
+
+      >
+        <table
+          class="table-layout kk-table-9136076486841527"
+          :class="{
+            bright: record.options.bright,
+            small: record.options.small,
+            bordered: record.options.bordered
+          }"
+          
+        >
+          <tr>
+            <td>
+              <input type="checkbox"></input>
+            </td>
+            <td
+              class="table-td"
+              v-for="(item, idnex) in record.columns"
+              :key="idnex"
+              style="padding: 0 10px;overflow:hidden;"
+              @contextmenu.prevent="
+                $emit('handleShowRightMenu', $event, record, trIndex, tdIndex)
+              "
+            >
+            <span style="display:block;white-space: nowrap;line-height:45px;">{{ item.label }}</span>
+            </td>
+          </tr>
+        </table>
+        <div
+          class="copy"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleCopy')"
+        >
+          <a-icon type="copy" />
+        </div>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="$emit('handleDelete')"
+        >
+          <a-icon type="delete" />
+        </div>
+      </div>
+    </template>
+    <!-- 表格展示  end -->
     <template v-else>
       <formNode
         :key="record.key"

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

@@ -11,6 +11,7 @@
     v-bind="getComponentProps"
     @hook:mounted="childMounted"
     :is="componentItem"
+    @change="handleChange"
   ></component>
   <!-- 可隐藏label -->
   <a-form-item
@@ -74,6 +75,7 @@
  */
 import { pluginManager, lazyLoadTick } from "../../utils/index";
 import textShow from '../KTextShow/index.js'
+import tableShow from '../KTableShow/index.js'
 const _ = require("lodash/object");
 let ComponentArray = pluginManager.getComponents();
 
@@ -193,11 +195,15 @@ export default {
      */
 
     componentItem() {
-      
+      // console.log(ComponentArray);
       ComponentArray.textShow = {
         component: textShow,
         bindModel:'value'
       }
+      ComponentArray.tableShow={
+        component: tableShow,
+        bindModel:'value'
+      }
       return ComponentArray[this.record.type].component;
     },
     componentOption() {
@@ -226,6 +232,7 @@ export default {
         value = e.target.value;
       }
       console.log(this.record);
+      console.log(e,this.record.model);
       // 传递change事件
       this.$emit("change", value, this.record.model);
     },

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

@@ -64,15 +64,20 @@ export default {
      * 手动验证获取表单数据
      */
     async handleGetData() {
+      // 获取表单数据
       this.$refs.KFormBuild.getData()
         .then(res => {
           console.log(res, "获取数据成功");
+          // 获取自定义  表格  勾选数据
+          let selectData= this.$refs.KFormBuild.getselectData()
           this.$refs.jsonModel.jsonData = res;
           this.$refs.jsonModel.visible = true;
         })
         .catch(err => {
           console.log(err, "获取数据失败");
         });
+      
+      
     },
     /**
      * 监听表单change 事件

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

@@ -26,6 +26,7 @@ export default {
         return this.value;
       },
       set(e) {
+        console.log(e);
         this.$emit("change", e);
       }
     }

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

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

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

@@ -0,0 +1,68 @@
+<!--
+ * @Description: 动态表格 用于批量填入数据
+ * @Author: kcz
+ * @Date: 2020-03-27 18:36:56
+ * @LastEditors: kcz
+ * @LastEditTime: 2022-10-31 20:40:41
+ -->
+<template>
+  <div class="table-wrap" >
+    <el-table :data="tempData" border stripe @selection-change="handleSelectionChange">
+    <el-table-column type="selection" width="55" />
+    <el-table-column type="index" width="50" label="序号"/>
+    <el-table-column align="center" v-for="col in record.columns"
+    :prop="col.prop"
+    :key="col.prop"
+    :label="col.label">
+    </el-table-column>
+    </el-table>
+    
+  </div>
+</template>
+
+<script>
+import KFormModelItem from "../KFormModelItem/KFormModelItem";
+import { pluginManager, getUUID } from "../../utils/index";
+const Button = pluginManager.getComponent("aButton").component;
+
+export default {
+  name: "KTableShow",
+
+  props: ["record", "value", "dynamicData", "config", "parentDisabled"],
+
+  components: {
+    KFormModelItem,
+    Button
+  },
+  watch: {
+    
+  },
+  data() {
+    return {
+      tempData:[
+        {
+          id:'1',
+          user_name:'张三',
+        }
+      ],
+    };
+  },
+  computed: {
+    
+  },
+  methods: {
+    handleSelectionChange(selection){
+      console.log('selection',selection);
+      this.$emit('change',selection.map(item=>item.id))
+    },
+    
+  },
+  created() {
+    console.log('record',this.record);
+    console.log('value',this.value);
+    console.log('dynamicData',this.dynamicData);
+    console.log('parentDisabled',this.parentDisabled);
+    console.log('config',this.config);
+  }
+};
+</script>