什么是Vdata？

vdata是青锋自定义功能模块的核心实现代码，前面讲解的拖拽表单和自定义菜单模块，最终生成的规则信息，会创建一个动态的功能模块，这个动态的、公用的动态模块的核心方法及实现类命名为：Vdata
自定义VData前端逻辑代码 - 图1

Vdata前端代码实现

Edit.vue：前端表单页面，新增表单和编辑表单。
Index.vue：前端主页。
Info.vue：前端详情页。
PEdit.vue：工作流编辑页面（工作流会讲解）
PInfo.vue：工作流详情页面（工作流会讲解）
image.png

首页核心代码

查询字段解析

1、如果字段开启查询，并且字段类型为：select、CheckBox、radio。统一采用下的方式进行查询。
image.png
2、如果查询字段开启查询，并且类型为：input,textarea,number,rate,slider,editor,switch,date,time，则使用输入框进行查看。
image.png
3、如果开启了状态查询
image.png
4、如果开启了时间段查询
image.png

操作按钮权限及控制

image.png
image.png

页面注入刷新

inject: [“reload”],
image.png
案例：
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
这种方式可以避免在使用props传值时，必须将每一个属性都传递给子组件的写法，当使用的公共组件不确定会被传递什么值的时候，使用这种写法非常方便。

  1. 在父组件中APP.Vue中
  2. <template>
  3.   <div id="app" style="height:100%;">
  4.     <router-view v-if="isRouterAlive"></router-view>
  5.   </div>
  6. </template>
  8. <script>
  9.   import axios from 'axios';
  10. export default {
  11.   name: 'App',
  12.   provide(){
  13.     return{
  14.       reload:this.reload
  15.     }
  16.   },
  17.   data(){
  18.     return{
  19.       isRouterAlive:true
  20.     }
  21.   },
  22.   methods:{
  23.     reload(){
  24.       this.isRouterAlive = false;
  25.       this.$nextTick(function(){
  26.         this.isRouterAlive = true;
  27.       })
  28.     }
  29.   }
  30. }
  31. </script>
  33. 在子组件中注入父组件中的变量在data（）之前注入
  35. inject:['reload'],
  37. 在哪里引用就调用
  38. this.reload()

核心方法findVMenuData

  1.  //查询菜单功能信息，根据菜单功能信息初始化页面信息（查询字段、展示字段等）
  2.     findVMenuData(menu_id) {
  3.       const columns = [];
  4.       findVMenuInfo({ menu_id: menu_id }).then((response) => {
  5.         this.menu_data = response.data;
  6.         if (this.menu_data.open_process == "0") {
  7.           this.process_key = this.menu_data.process_id;
  8.         }
  9.         this.menu_data.fieldPdList.forEach((item) => {
  10.           if (item.field_query == "true" || item.field_list == "true") {
  11.             if (item.dynamic == "false") {
  12.               let options = JSON.parse(item.options);
  13.               item.options = options;
  14.             } else if (item.dynamic == "true") {
  15.               findDictionaryList({ parent_code: item.dynamicKey }).then(
  16.                 (response) => {
  17.                   item.options = response.data.data;
  18.                   item.options.forEach((op) => {
  19.                     op.label = op.name;
  20.                     op.value = op.id;
  21.                   });
  22.                   this.dynamicData[item.dynamicKey] = item.options;
  23.                 }
  24.               );
  25.             }
  26.           }
  28.           if (item.field_list == "true") {
  29.             if (
  30.               "input,textarea,number,rate,slider,editor,switch,date,time".indexOf(
  31.                 item.field_type
  32.               ) != -1
  33.             ) {
  34.               let data = {
  35.                 title: item.field_comment,
  36.                 dataIndex: item.field_name,
  37.                 ellipsis: true,
  38.               };
  39.               if (
  40.                 item.field_width != "" &&
  41.                 item.field_width != undefined &&
  42.                 isNumber(item.field_width)
  43.               ) {
  44.                 data.width = item.field_width + "px";
  45.               }
  46.               if (item.field_link == "true") {
  47.                 data.scopedSlots = { customRender: "name" };
  48.               }
  49.               columns.push(data);
  50.             } else if ("select,checkbox,radio".indexOf(item.field_type) != -1) {
  51.               let data = {
  52.                 title: item.field_comment,
  53.                 dataIndex: item.field_name,
  54.                 ellipsis: true,
  55.                 customRender: (text, row, index) => {
  56.                   let label = "";
  57.                   if (Array.isArray(item.options)) {
  58.                     item.options.forEach((op) => {
  59.                       if (op.value == text) {
  60.                         label = op.label;
  61.                       }
  62.                     });
  63.                   }
  64.                   return label;
  65.                 },
  66.               };
  67.               if (
  68.                 item.field_width != "" &&
  69.                 item.field_width != undefined &&
  70.                 isNumber(item.field_width)
  71.               ) {
  72.                 data.width = item.field_width + "px";
  73.               }
  74.               if (item.field_link == "true") {
  75.                 data.scopedSlots = { customRender: "name" };
  76.               }
  77.               columns.push(data);
  78.             }
  79.           }
  80.         });
  81.         let dealStatus = {
  82.           title: "当前办理状态",
  83.           dataIndex: "dealStatus",
  84.           ellipsis: true,
  85.         };
  86.         let assignee = {
  87.           title: "当前办理人",
  88.           dataIndex: "assignee",
  89.           ellipsis: true,
  90.         };
  91.         let dealTime = {
  92.           title: "起办时间",
  93.           dataIndex: "dealTime",
  94.           ellipsis: true,
  95.         };
  96.         if (
  97.           this.menu_data.status_type == "1" ||
  98.           this.menu_data.status_type == "2"
  99.         ) {
  100.           let status = {
  101.             title: "状态",
  102.             dataIndex: "status",
  103.             customRender: (text, row, index) => {
  104.               if (text == "0") {
  105.                 return "启用";
  106.               } else {
  107.                 return "停用";
  108.               }
  109.             },
  110.           };
  111.           columns.push(status);
  112.         }
  114.         let time = {
  115.           title: "创建时间",
  116.           dataIndex: "create_time",
  117.         };
  118.         let width = 200;
  119.         if (
  120.           this.menu_data.status_type == "1" ||
  121.           this.menu_data.status_type == "2"
  122.         ) {
  123.           width = 250;
  124.         }
  125.         let operate = {
  126.           title: "操作",
  127.           dataIndex: "operation",
  128.           scopedSlots: { customRender: "operation" },
  129.           width: width + "px",
  130.         };
  131.         if (this.menu_data.open_process == "0") {
  132.           columns.push(dealStatus);
  133.           columns.push(assignee);
  134.           columns.push(dealTime);
  135.         } else {
  136.           columns.push(time);
  137.         }
  138.         columns.push(operate);
  139.         //查询初始化关联表信息
  140.         this.initLinkFormList(this.menu_data.table_id);
  141.         this.columns = columns;
  142.         this.fetch({ pageSize: 10 });
  143.       });
  144.     },

关联表查询：

  1. initLinkFormList(table_id) {
  2.       //查询关联表-处理关联表的动态数据信息
  3.       findLinkFormList({ table_id: table_id }).then((response) => {
  4.         let linkFormData = response.data;
  5.         linkFormData.forEach((form_data) => {
  6.           form_data.vfields.forEach((item) => {
  7.             if ("select,checkbox,radio".indexOf(item.field_type) != -1) {
  8.               if (item.dynamic == "true") {
  9.                 findDictionaryList({ parent_code: item.dynamicKey }).then(
  10.                   (response) => {
  11.                     item.options = response.data.data;
  12.                     item.options.forEach((op) => {
  13.                       op.label = op.name;
  14.                       op.value = op.id;
  15.                     });
  16.                     this.dynamicData[item.dynamicKey] = item.options;
  17.                     this.$forceUpdate();
  18.                   }
  19.                 );
  20.               }
  21.             }
  22.           });
  23.         });
  24.       });
  25.     },
  26.     handleTableChange(paginat

新增/编辑页面核心代码

k-form-design表单初始化

动态展示拖拽的表单信息。

  1.     <k-form-build
  2.       ref="kfb"
  3.       :value="jsonData"
  4.       :dynamicData="dynamicData"
  5.     />
  7.     mounted() {
  8.       this.form = this.record;
  9.       //查询菜单配置信息
  10.       // this.initData(this.record.menu_id);
  11.       this.jsonData = JSON.parse(this.record.table_content);
  12.     },

image.png

数据获取及保存方法

image.png

详情页面初始化及展现

  1.  <k-form-build
  2.       ref="kfb"
  3.       :value="jsonData"
  4.       :dynamicData="dynamicData"
  5.       :disabled="true"
  6.       v-show="initStatus"
  7.     />
  9.   this.form = this.record;
  10. //查询菜单配置信息
  11. this.jsonData = JSON.parse(this.record.table_content);
  12. this.initStatus = true;

image.png

更多k-form-design的API请查阅

http://kcz66.gitee.io/k-form-design/#/zh-cn/guide/start