框架文档1.0编写中..

Vol.Vue/src/components/basic/ViewGridConfig/methods.js

@@ -657,14 +657,6 @@ let methods = {
         //let defaultOption = { key: "", value: "请选择" };
         formOptions.forEach(item => {
             item.forEach(d => {
-                //如果是必填项的数字，设置一个最大与最值小
-                if (setMinVal&&d.required) {
-                    if ((d.type == 'number'
-                        || d.type == 'decimal')
-                        && !d.hasOwnProperty('min')) {
-                        d.min = d.type == 'number' ? 1 : 0.1;
-                    }
-                }
                 if (!d.dataKey) return true;
                 if (keys.indexOf(d.dataKey) == -1) {
                     keys.push(d.dataKey);

Vol.Vue/src/components/basic/VolForm.vue

@@ -17,10 +17,13 @@
             :placeholder="formFileds[item.field]||'--'"
           ></Input>-->
           <img
-            v-if="item.disabled&&(item.type=='img'||item.columnType=='img')"
+            v-if="(item.disabled||item.readonly)&&(item.type=='img'||item.columnType=='img')"
             :src="formFileds[item.field]"
           />
-          <label v-else-if="item.disabled" class="readonly-input">{{getText(formFileds,item)}}</label>
+          <label
+            v-else-if="item.disabled||item.readonly"
+            class="readonly-input"
+          >{{getText(formFileds,item)}}</label>
 
           <!--下拉框绑定时如果key为数字，请将key+''转换为字符串-->
           <Select
@@ -75,7 +78,10 @@
             >{{kv.value}}</Checkbox>
           </CheckboxGroup>
 
-          <UploadImg v-else-if="item.type=='img'||item.columnType=='img'" :src="formFileds[item.field]"></UploadImg>
+          <UploadImg
+            v-else-if="item.type=='img'||item.columnType=='img'"
+            :src="formFileds[item.field]"
+          ></UploadImg>
           <!-- <img v-else-if="item.columnType=='img'" :src="formFileds[item.field]" /> -->
           <!-- <FormItem v-else-if="item.columnType=='img'" :prop="item.field">
             <img :src="formFileds[item.field]" />
@@ -105,7 +111,7 @@
             @on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
             v-model.number="formFileds[item.field]"
             :placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
-          ></Input> -->
+          ></Input>-->
           <Input
             clearable
             v-else
@@ -374,6 +380,15 @@ export default {
         item.columnType == "int" ||
         item.type == "decimal"
       ) {
+        //如果是必填项的数字，设置一个默认最大与最值小
+        if (item.required && typeof item.min != "number") {
+          if (item.type == "decimal") {
+            item.min = 0.1;
+          } else {
+            item.min = 1;
+          }
+        }
+
         return {
           required: item.required,
           message: item.title,
@@ -391,7 +406,7 @@ export default {
                 return callback();
               }
             }
-            if (value == ""||value==undefined) return callback();
+            if (value == "" || value == undefined) return callback();
             if (rule.type == "number") {
               if (!this.rule.number.test(value)) {
                 rule.message = rule.title + "只能是整数";
@@ -518,7 +533,7 @@ export default {
       }
 
       //if (item.type == "checkbox" || item.type == "select") {
-      if (item.type == "select"||item.type == "drop" ) {
+      if (item.type == "select" || item.type == "drop") {
         let _rule = {
           required: true,
           message: "请选择" + item.title,

Vol.Vue/src/views/charts/formOptions.js

@@ -12,7 +12,6 @@ let formRules1 = [
     [
         {
             link:true,
-            columnType: "string",
             dataKey: "city",
             title: "城市",
             required: true,
@@ -21,7 +20,6 @@ let formRules1 = [
             type: "select"
         },
         {
-            columnType: "datetime",
             title: "多选日期",
             range: true, //设置为true可以选择开始与结束日期
             required: false,
@@ -32,7 +30,6 @@ let formRules1 = [
     ],
     [
         {
-            columnType: "string",
             dataKey: "age", //后台下拉框对应的数据字典编号
             data: [], //loadKey设置为true,会根据dataKey从后台的下拉框数据源中自动加载数据
             title: "月龄",
@@ -41,7 +38,6 @@ let formRules1 = [
             type: "select"
         },
         {
-            columnType: "datetime",
             title: "日期",
             required: true,
             field: "Date",
@@ -52,7 +48,6 @@ let formRules1 = [
     ],
     [
         {
-            columnType: "string",
             title: "品种",
             dataKey: "age",
             placeholder: "此处数据源为手动绑定",
@@ -63,7 +58,7 @@ let formRules1 = [
             type: "select"
         },
         {
-            columnType: "decimal",
+            type: "decimal",
             title: "价格",
             required: true,
             placeholder: "你可以自己定义placeholder显示的文字",
@@ -72,7 +67,6 @@ let formRules1 = [
     ],
     [
         {
-            columnType: "int",
             title: "备注",
             required: true,
             field: "IsTop",

Vol.Vue/src/views/document/docApi/api.vue

@@ -24,6 +24,11 @@ export default {
     DocForm: () => import("./doc_volform"),
     VolHeader: () => import("./doc_header"),
     box: () => import("./doc_box"),
+    uploadExcel: () => import("./doc_uploadExcel"),
+    uploadImg: () => import("./doc_uploadImg"),
+    volmenu: () => import("./doc_menu"),
+    voltable: () => import("./doc_table"),
+    viewGrid: () => import("./doc_viewGrid"),
     other: () => import("./doc_other")
   }, //
   methods: {
@@ -34,23 +39,43 @@ export default {
   },
   data() {
     return {
-      active: -1,
+      active: 0,
       data: [
         {
           com_name: "Icons",
           title: "图标组件"
         },
+        {
+          com_name: "box",
+          title: "弹出框组件"
+        },
         {
           com_name: "DocForm",
-          title: "表单组件"
+          title: "form表单组件"
         }, //
         {
           com_name: "VolHeader",
           title: "VolHeader"
         },
         {
-          com_name: "box",
-          title: "弹出框"
+          com_name: "viewGrid",
+          title: "代码生成后页面viewGrid"
+        },
+        {
+          com_name: "volmenu",
+          title: "菜单组件"
+        },
+           {
+          com_name: "voltable",
+          title: "table组件"
+        },
+        {
+          com_name: "uploadExcel",
+          title: "excel上传"
+        },
+        {
+          com_name: "uploadImg",
+          title: "图片上传"
         },
         {
           com_name: "other",
@@ -70,11 +95,11 @@ export default {
   > .nav {
     border-right: 1px solid #ccc3c3;
     margin-right: 10px;
-    width: 120px;
+    width: 180px;
     position: fixed;
     .n-item {
       text-align: right;
-      padding-right: 29px;
+      padding-right: 15px;
       list-style: none;
       a {
         font-size: 15px;
@@ -93,7 +118,7 @@ export default {
   }
   > .list {
     flex: 1;
-    margin-left: 140px;
+    margin-left: 195px;
   }
 }
 .active {

Vol.Vue/src/views/document/docApi/doc_viewGrid.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Alert type="warning">
+      关于ViewGird组件
+      <template slot="desc">
+        <p>1、ViewGird组件也是前端框架的核心，所有由代码生成的页面的基础功能全部依赖此组件，也可以单独使用此组件。</p>
+        <p>2、组件默认包括(单表、主从表)：查询、添加、修改、删除、导入、导出、审核功能</p>
+        <p>3、组件支持方法与属性扩展,如：动态按钮、动态控制table列显示、表单动态显示、弹出框动态控制、现有事件进行拦截等，更支持对此组件进行其他组件扩展，组件扩展可实现任何自己想写的代码，具体用法与扩展操作与代码生成后的页面操作相同。</p>
+         <p>4、如果需要一对多或多对多表单等操作，在ViewGrid提供的位置进行扩展组件编写即可。</p>
+      </template>
+    </Alert>
+  </div>
+</template>

Vol.Vue/src/views/document/docApi/doc_volform.vue

@@ -48,10 +48,13 @@ export default {
         number1: 20,
         mail: "",
         Date: "",
-        IsTop: "还没想好...",
+        IsTop: "",
         Fruits: [],
         Other: "",
         Switch: 1,
+        readonlyText: "还没想好....",
+        readonlyImg:
+          "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg",
         ProImg:
           "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
       },
@@ -150,21 +153,7 @@ export default {
           }
         ],
         [
-          {
-            title: "备注",
-            required: true,
-            field: "IsTop",
-            colSize: 12, //设置12，此列占100%宽度
-            type: "textarea"
-          }
-        ],
-        [
-          {
-            title: "图片",
-            disabled: true, //必须设置此属性
-            field: "ProImg",
-            type: "img"
-          },
+          //readonlyImg
           {
             title: "checkbox",
             //如果这里绑定了data数据，后台不会加载此数据源
@@ -176,6 +165,36 @@ export default {
             ],
             field: "Fruits",
             type: "checkbox"
+          },
+          {
+            title: "字段只读",
+            readonly: true, //设置readonly或disabled都行
+            field: "readonlyText",
+            type: "text"
+          }
+        ],    [
+          {
+            title: "备注",
+            required: true,
+            field: "IsTop",
+            min: 3,
+            max: 5,
+            placeholder: "至少输入3个字符,最多只能输入5个字符",
+            colSize: 12, //设置12，此列占100%宽度
+            type: "textarea"
+          }
+        ],
+        [
+          {
+            title: "图片只读",
+            readonly: true, //设置readonly或disabled都行
+            field: "readonlyImg",
+            type: "img"
+          },
+          {
+            title: "可修改图片",
+            field: "ProImg",
+            type: "img"
           }
         ]
       ]

Vol.Vue/src/views/document/docApi/param.js

@@ -13,14 +13,16 @@ let param = {
         { name: "formRules", desc: "表单字段的参数配置说明(数组的元素个数决定了表单每行显示的标签个数)", type: "array", default: "[]" },
         { name: "{", desc: "表单字段formRules的参数配置说明", type: "", default: "" },
         { name: "dataKey", desc: "数据源字典编号(菜单->系统->下拉框绑定中的字典编号)", type: "string", default: "" },
-        { name: "data", desc: "数据源，可以手动绑定格式[{key:1,value:'是'}]也可以自动绑定,自定绑定需要设置属性loadKey='true'", type: "array", default: "[]" },
+        { name: "data", desc: "数据源，可以手动绑定格式[{key:1,value:'是'}],也可以自动绑定,自定绑定需要设置属性loadKey='true'", type: "array", default: "[]" },
         { name: "title", desc: "标签名称", type: "string", default: "" },
+        //
+        { name: "readonly/readonly", desc: "是否只读", type: "bool", default: "false" },
         { name: "required", desc: "是否必填", type: "bool", default: "false" },
         { name: "field", desc: "字段，与表单字段必须相同", type: "string", default: "" },
         { name: "type", desc: "渲染的标签类型,可选值,mail、text、textarea、img、checkbox、number、decimal、date、datetime、phone、switch", type: "string", default: "text" },
         { name: "range", desc: "如果type是日期，需要选开始与结束日期", type: "bool", default: "false" },
-        { name: "min", desc: "最小值,如果是int类型，默认验证最小值是1(decimal最小默认值0.1)，如果在代码生后的页面需要修改默认值，在扩展js的方法onInit中遍历form对象，可参考SellOrder.js中onInit方法", type: "number", default: "" },
-        { name: "max", desc: "最大值", type: "number", default: "" },
+        { name: "min", desc: "1、数字类型标签：最小值,如果是type=number(整数)类型，默认验证最小值是1(decimal最小默认值0.1)，如果在代码生后的页面需要修改默认值，在扩展js的方法onInit中遍历form对象，可参考SellOrder.js中onInit方法。    2、其他标签,如：input/textarea设置min就是指的字符的最大长度", type: "number", default: "" },
+        { name: "max", desc: "最大值,操作与min相同", type: "number", default: "" },
         {
             name: "validator", desc: "对标签的值进行自定义验证，如：    validator: (rule, val, callback) => {\
             if (val != '234') {\
@@ -58,6 +60,21 @@ let param = {
         { name: "数据槽slot", desc: "弹出框内容", type: "", default: "" },
         { name: "数据槽footer", desc: "弹出框底部按钮，默认只有一个关闭按钮，如果加了 <div slot='footer'></div>关闭按钮不会显示，需要自己添加", type: "", default: "" }],
         methods: []
-    }
+    }, uploadExcel: {
+        attr: [],
+        methods: []
+    }, uploadImg: {
+        attr: [],
+        methods: []
+    }, volmenu: {
+        attr: [],
+        methods: []
+    }, voltable: {
+        attr: [],
+        methods: []
+    }, viewGrid: {
+        attr: [],
+        methods: []
+    } 
 }
-export default param;
+export default param;  

Vol.Vue/src/views/document/docApi/sourceCode.js

@@ -36,14 +36,28 @@ let codeString = {
   form: `<div class="cnblogs_code">
   <pre>&lt;template&gt;
     &lt;div&gt;
-      &lt;VolForm :label-width="150" :loadKey="true" :formFileds="formFileds1" :formRules="formRules1"&gt;&lt;/VolForm&gt;
+      &lt;<span style="color: #000000;">VolForm
+        ref</span>="myform"<span style="color: #000000;">
+        :label</span>-width="150"<span style="color: #000000;">
+        :loadKey</span>="true"<span style="color: #000000;">
+        :formFileds</span>="formFileds1"<span style="color: #000000;">
+        :formRules</span>="formRules1"
+      &gt;&lt;/VolForm&gt;
+      &lt;div&gt;
+        &lt;Button type="info" <span style="color: #0000ff;">long</span> @click="reset"&gt;重置表单&lt;/Button&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/template&gt;
   &lt;script&gt;<span style="color: #000000;">
   import VolForm from </span>"@/components/basic/VolForm.vue"<span style="color: #000000;">;
   export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
     components: { VolForm },
-    methods: {},
+    methods: {
+      reset() {
+        </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.$refs.myform.reset();
+        </span><span style="color: #0000ff;">this</span>.$Message.error("表单已重置"<span style="color: #000000;">);
+      }
+    },
     data() {
       </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> {
         formFileds1: {
@@ -55,10 +69,13 @@ let codeString = {
           number1: </span>20<span style="color: #000000;">,
           mail: </span>""<span style="color: #000000;">,
           Date: </span>""<span style="color: #000000;">,
-          IsTop: </span>"还没想好..."<span style="color: #000000;">,
+          IsTop: </span>""<span style="color: #000000;">,
           Fruits: [],
           Other: </span>""<span style="color: #000000;">,
           Switch: </span>1<span style="color: #000000;">,
+          readonlyText: </span>"还没想好...."<span style="color: #000000;">,
+          readonlyImg:
+            </span>"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"<span style="color: #000000;">,
           ProImg:
             </span>"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"<span style="color: #000000;">
         },
@@ -89,7 +106,12 @@ let codeString = {
               title: </span>"手机号"<span style="color: #000000;">,
               required: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">设置为必选项</span>
               field: "AgeRange"<span style="color: #000000;">,
-              type: </span>"phone"<span style="color: #000000;">
+              type: </span>"phone"<span style="color: #000000;">,
+              onKeyPress: $event </span>=&gt;<span style="color: #000000;"> {
+                </span><span style="color: #0000ff;">if</span> ($event.keyCode == 13<span style="color: #000000;">) {
+                  </span><span style="color: #0000ff;">this</span>.$Message.error(<span style="color: #0000ff;">this</span>.formFileds1.AgeRange + ""<span style="color: #000000;">);
+                }
+              }
             },
             {
               title: </span>"date日期"<span style="color: #000000;">,
@@ -135,11 +157,11 @@ let codeString = {
               title: </span>"自定义验证"<span style="color: #000000;">,
               required: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
               field: </span>"Other"<span style="color: #000000;">,
-              validator: (rule, val, callback) </span>=&gt;<span style="color: #000000;"> {
+              validator: (rule, val) </span>=&gt;<span style="color: #000000;"> {
                 </span><span style="color: #0000ff;">if</span> (val != "234"<span style="color: #000000;">) {
-                  </span><span style="color: #0000ff;">return</span> callback(<span style="color: #0000ff;">new</span> Error("必须输入【234】"<span style="color: #000000;">));
+                  </span><span style="color: #0000ff;">return</span> "必须输入【234】"<span style="color: #000000;">;
                 }
-                </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> callback();
+                </span><span style="color: #0000ff;">return</span> ""<span style="color: #000000;">;
               }
             },
             {
@@ -152,22 +174,8 @@ let codeString = {
             }
           ],
           [
-            {
-              title: </span>"备注"<span style="color: #000000;">,
-              required: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
-              field: </span>"IsTop"<span style="color: #000000;">,
-              colSize: </span>12, <span style="color: #008000;">//</span><span style="color: #008000;">设置12，此列占100%宽度</span>
-              type: "textarea"<span style="color: #000000;">
-            }
-          ],
-          [
-            {
-              title: </span>"图片"<span style="color: #000000;">,
-              disabled: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">必须设置此属性</span>
-              field: "ProImg"<span style="color: #000000;">,
-              type: </span>"img"<span style="color: #000000;">
-            },
-            {
+            </span><span style="color: #008000;">//</span><span style="color: #008000;">readonlyImg</span>
+  <span style="color: #000000;">          {
               title: </span>"checkbox"<span style="color: #000000;">,
               </span><span style="color: #008000;">//</span><span style="color: #008000;">如果这里绑定了data数据，后台不会加载此数据源</span>
   <span style="color: #000000;">            data: [
@@ -178,6 +186,37 @@ let codeString = {
               ],
               field: </span>"Fruits"<span style="color: #000000;">,
               type: </span>"checkbox"<span style="color: #000000;">
+            },
+            {
+              title: </span>"字段只读"<span style="color: #000000;">,
+              readonly: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">设置readonly或disabled都行</span>
+              field: "readonlyText"<span style="color: #000000;">,
+              type: </span>"text"<span style="color: #000000;">
+            }
+          ],
+          [
+            {
+              title: </span>"备注"<span style="color: #000000;">,
+              required: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
+              field: </span>"IsTop"<span style="color: #000000;">,
+              min: </span>3<span style="color: #000000;">,
+              max: </span>5<span style="color: #000000;">,
+              placeholder: </span>"至少输入3个字符,最多只能输入5个字符"<span style="color: #000000;">,
+              colSize: </span>12, <span style="color: #008000;">//</span><span style="color: #008000;">设置12，此列占100%宽度</span>
+              type: "textarea"<span style="color: #000000;">
+            }
+          ],
+          [
+            {
+              title: </span>"图片只读"<span style="color: #000000;">,
+              readonly: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">设置readonly或disabled都行</span>
+              field: "readonlyImg"<span style="color: #000000;">,
+              type: </span>"img"<span style="color: #000000;">
+            },
+            {
+              title: </span>"可修改图片"<span style="color: #000000;">,
+              field: </span>"ProImg"<span style="color: #000000;">,
+              type: </span>"img"<span style="color: #000000;">
             }
           ]
         ]
@@ -215,7 +254,7 @@ let codeString = {
   </span>&lt;/script&gt;</pre>
   </div>
   <p>&nbsp;</p>`,
-  box:`<div class="cnblogs_code">
+  box: `<div class="cnblogs_code">
   <pre>&lt;template&gt;
     &lt;div&gt;
       &lt;Button type="info" @click="model=!model"&gt;弹出框&lt;/Button&gt;
@@ -242,6 +281,7 @@ let codeString = {
   };
   </span>&lt;/script&gt;</pre>
   </div>
-  <p>&nbsp;</p>`
+  <p>&nbsp;</p>`,
+  uploadExcel: ``, uploadImg: ``, volmenu: ``, voltable: ``, viewGrid: ``
 }
 export default codeString

Vol.Vue/src/views/document/docApi/test.vue

@@ -1,25 +1,190 @@
 <template>
   <div>
-    <Button type="info" @click="model=!model">弹出框</Button>
-    <VolBox :model.sync="model" title="弹出框标题" :height="400" :width="700" :padding="15">
-      <div>弹出框内容</div>
-      <!-- footer 这里不写，默认有一个关闭按钮 -->
-      <div slot="footer">
-        <Button type="default" @click="()=>{this.$Message.error('点击确认')}">确认</Button>
-        <Button type="default" @click="()=>{model=false}">点击关闭弹出框</Button>
-      </div>
-    </VolBox>
+    <VolForm
+      ref="myform"
+      :label-width="150"
+      :loadKey="true"
+      :formFileds="formFileds1"
+      :formRules="formRules1"
+    ></VolForm>
+    <div>
+      <Button type="info" long @click="reset">重置表单</Button>
+    </div>
   </div>
 </template>
 <script>
-import VolBox from "@/components/basic/VolBox.vue";
+import VolForm from "@/components/basic/VolForm.vue";
 export default {
+  components: { VolForm },
+  methods: {
+    reset() {
+      this.$refs.myform.reset();
+      this.$Message.error("表单已重置");
+    }
+  },
   data() {
     return {
-      model: false
+      formFileds1: {
+        Variety: 1,
+        AgeRange: "",
+        DateRange: [],
+        City: "北京市",
+        AvgPrice: 8.88,
+        number1: 20,
+        mail: "",
+        Date: "",
+        IsTop: "",
+        Fruits: [],
+        Other: "",
+        Switch: 1,
+        readonlyText: "还没想好....",
+        readonlyImg:
+          "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg",
+        ProImg:
+          "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
+      },
+      formRules1: [
+        //两列的表单，formRules数据格式为:[[{},{}]]
+        [
+          {
+            dataKey: "city",
+            title: "自动绑定数据源",
+            required: true,
+            field: "City",
+            data: [],
+            type: "select"
+          },
+          {
+            title: "手动绑定数据源",
+            dataKey: "age",
+            placeholder: "在这里可设置提示描述",
+            //如果这里绑定了data数据，后台不会加载此数据源
+            data: [{ key: 1, value: "是" }, { key: 0, value: "否" }],
+            required: false,
+            field: "Variety",
+            type: "select"
+          }
+        ],
+        [
+          {
+            title: "手机号",
+            required: true, //设置为必选项
+            field: "AgeRange",
+            type: "phone",
+            onKeyPress: $event => {
+              if ($event.keyCode == 13) {
+                this.$Message.error(this.formFileds1.AgeRange + "");
+              }
+            }
+          },
+          {
+            title: "date日期",
+            field: "Date",
+            type: "datetime"
+          }
+        ],
+        [
+          {
+            title: "多选日期",
+            range: true, //设置为true可以选择开始与结束日期
+            required: false,
+            field: "DateRange",
+            type: "date"
+          },
+          {
+            type: "number",
+            title: "数字",
+            required: true,
+            placeholder: "你可以自己定义placeholder显示的文字",
+            field: "number1"
+          }
+        ],
+        [
+          {
+            type: "decimal",
+            title: "最大最小decimal值",
+            max: 10,
+            min: 2,
+            required: true,
+            field: "AvgPrice"
+          },
+          {
+            title: "邮箱",
+            field: "mail",
+            range: true, //设置为true可以选择开始与结束日期
+            required: false,
+            type: "mail"
+          }
+        ],
+        [
+          {
+            title: "自定义验证",
+            required: true,
+            field: "Other",
+            validator: (rule, val) => {
+              if (val != "234") {
+                return "必须输入【234】";
+              }
+              return "";
+            }
+          },
+          {
+            title: "Switch",
+            field: "Switch",
+            dataKey: "enable", //这里会从后台自动绑定数据源
+            data: [],
+            required: false,
+            type: "switch"
+          }
+        ],
+        [
+          //readonlyImg
+          {
+            title: "checkbox",
+            //如果这里绑定了data数据，后台不会加载此数据源
+            data: [
+              { key: 0, value: "冬瓜" },
+              { key: 1, value: "西瓜" },
+              { key: 2, value: "南瓜" },
+              { key: 3, value: "哈密瓜" }
+            ],
+            field: "Fruits",
+            type: "checkbox"
+          },
+          {
+            title: "字段只读",
+            readonly: true, //设置readonly或disabled都行
+            field: "readonlyText",
+            type: "text"
+          }
+        ],
+        [
+          {
+            title: "备注",
+            required: true,
+            field: "IsTop",
+            min: 3,
+            max: 5,
+            placeholder: "至少输入3个字符,最多只能输入5个字符",
+            colSize: 12, //设置12，此列占100%宽度
+            type: "textarea"
+          }
+        ],
+        [
+          {
+            title: "图片只读",
+            readonly: true, //设置readonly或disabled都行
+            field: "readonlyImg",
+            type: "img"
+          },
+          {
+            title: "可修改图片",
+            field: "ProImg",
+            type: "img"
+          }
+        ]
+      ]
     };
-  },
-  components: { VolBox },
-  methods: {}
+  }
 };
 </script>

Vol.Vue/src/views/document/document.vue

@@ -175,7 +175,7 @@ export default {
   left: 0;
   right: 0;
   margin: 0 auto;
-  padding: 30px;
+  padding: 10px;
   padding-top: 80px;
 }
 </style>