From d0f16da00a441b824be4b60f041be5a2c1bd247d Mon Sep 17 00:00:00 2001 From: jxx <283591387@qq.com.com> Date: Sun, 31 May 2020 23:17:35 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E6=88=90iview=E7=BA=A7=E8=81=94?= =?UTF-8?q?=E7=BB=84=E4=BB=B6cascader=E5=88=B0=E6=A1=86=E6=9E=B6volform?= =?UTF-8?q?=E3=80=81viewgrid=E7=BB=84=E4=BB=B6=E4=B8=AD=EF=BC=9B=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E7=BA=A7=E8=81=94=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basic/ViewGridConfig/methods.js | 4 +- Vol.Vue/src/components/basic/VolForm.vue | 14 +- .../src/views/document/docApi/doc_volform.vue | 103 +- Vol.Vue/src/views/document/docApi/param.js | 2 +- .../src/views/document/docApi/sourceCode.js | 1232 +++++++++++++---- Vol.Vue/src/views/document/log.vue | 215 ++- Vol.Vue/src/views/document/vueDev.vue | 517 ++++++- 7 files changed, 1759 insertions(+), 328 deletions(-) diff --git a/Vol.Vue/src/components/basic/ViewGridConfig/methods.js b/Vol.Vue/src/components/basic/ViewGridConfig/methods.js index 17a55d3b..718b6243 100644 --- a/Vol.Vue/src/components/basic/ViewGridConfig/methods.js +++ b/Vol.Vue/src/components/basic/ViewGridConfig/methods.js @@ -367,8 +367,10 @@ let methods = { if (sourceObj.hasOwnProperty(key)) { let newVal = sourceObj[key]; let kv_type = this.keyValueType[keyLeft + key]; + if (kv_type == 'selectList' - || kv_type == 'checkbox') { + || kv_type == 'checkbox' + || kv_type == "cascader") { // 2020.05.31增加iview组件Cascader if (newVal != "" && newVal != undefined && typeof newVal == 'string') { newVal = newVal.split(','); } else if (kv_type == 'checkbox') { diff --git a/Vol.Vue/src/components/basic/VolForm.vue b/Vol.Vue/src/components/basic/VolForm.vue index 6bdb29d7..0d64526e 100644 --- a/Vol.Vue/src/components/basic/VolForm.vue +++ b/Vol.Vue/src/components/basic/VolForm.vue @@ -142,6 +142,15 @@ :remove-before="item.removeBefore" :down-load="item.downLoad?true:false" > + + { + const index = labels.length - 1; + const data = selectedData[index] || false; + if (data && data.label) { + return labels[index] + " - " + data.label + " - (格式化测试)"; + } + return labels[index]; + } + }, + { + title: "级联懒加载", //2020.05.31联级操作 + //如果这里绑定了data数据，后台不会加载此数据源 + data: [ + { + value: "zhejiang", + label: "浙江", + loading: false, + children: [] + } + ], + field: "cascader2", + required: true, + type: "cascader", + //懒加载数据源 + loadData: (item, callback) => { + if (item.children.length > 0) return; + item.loading = true; + setTimeout(() => { + item.loading = false; + item.children = [ + { + value: "hangzhou", + label: "杭州", + children: [ + { + value: "xihu", + label: "西湖", + code: 1000 + } + ] + } + ]; + callback(); + }, 1000); + // this.http.post("xxx").then(children => { + // item.loading = false; + // item.children = children; + // //children格式或参照iview组件cascader动态加载选项的配置 + // // [{ + // // value: 'hangzhou', + // // label: '杭州', + // // children: [{ + // // value: 'xihu', + // // label: '西湖', + // // code: 1000 + // // }] + // // }] + // }); + } + } + ], [ { title: "备注", @@ -256,4 +351,4 @@ export default { }; } }; - \ No newline at end of file + diff --git a/Vol.Vue/src/views/document/docApi/param.js b/Vol.Vue/src/views/document/docApi/param.js index dfe16234..82aeb42c 100644 --- a/Vol.Vue/src/views/document/docApi/param.js +++ b/Vol.Vue/src/views/document/docApi/param.js @@ -20,7 +20,7 @@ let param = { { name: "required", desc: "是否必填", type: "bool", default: "false" }, { name: "field", desc: "字段，与表单字段必须相同", type: "string", default: "" }, { name: "filter", desc: "启用搜索,只对select/selectList生效,默认下拉框数据源超出10个开启搜索", type: "bool", default: "false" }, - { name: "type", desc: "渲染的标签类型,可选值,mail、text、textarea、img、checkbox、number、decimal、date、datetime、phone、switch、select、selectList(多选下拉框)", type: "string", default: "text" }, + { name: "type", desc: "渲染的标签类型,可选值,mail、text、textarea、img、checkbox、number、decimal、date、datetime、phone、switch、select、selectList(多选下拉框)、cascader(Iview级联组件,具体配置见上面[查看代码],2020.05.31)", type: "string", default: "text" }, { name: "range", desc: "如果type是日期，需要选开始与结束日期", type: "bool", default: "false" }, { 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: "" }, diff --git a/Vol.Vue/src/views/document/docApi/sourceCode.js b/Vol.Vue/src/views/document/docApi/sourceCode.js index debc3d22..224c7dee 100644 --- a/Vol.Vue/src/views/document/docApi/sourceCode.js +++ b/Vol.Vue/src/views/document/docApi/sourceCode.js @@ -87,257 +87,981 @@ let codeString = { methods: {} }; // ]]>`, - form: `
- 
<template>
-    <div>
-      <div class="i-text">
-        <h2>组件引入方式</h2>
-      </div>
-      <pre class="bg-ms">
-          <code>
-           import VolForm from "@/components/basic/VolForm.vue";
-          </code>
-        </pre>
-      <div class="i-text">
-        <h2>表单</h2>
-      </div>
-      <VolForm
-        ref="myform"
-        :label-width="150"
-        :loadKey="true"
-        :formFileds="formFileds1"
-        :formRules="formRules1"
-      ></VolForm>
-      <div>
-        <Button type="info" long @click="reset">重置表单</Button>
-      </div>
-      <div>
-        <docParamTable name="form"></docParamTable>
-      </div>
-    </div>
-  </template>
-  <script>
-  import VolForm from "@/components/basic/VolForm.vue";
-  import docParamTable from "./doc_ParamTable.vue";
-  export default {
-    components: { VolForm, docParamTable },
-    methods: {
-      reset() {
-        this.$refs.myform.reset();
-        this.$Message.error("表单已重置");
-      }
-    },
-    data() {
-      return {
-        formFileds1: {
-          Variety: 1,
-          AgeRange: "",
-          DateRange: [],
-          City: "北京市",
-          AvgPrice: 8.88,
-          number1: 20,
-          mail: "",
-          Date: "",
-          IsTop: "",
-          Fruits: [],
-          Other: "",
-          extra1:"添加其他标签",
-          extra2:"添加其他标签可点击",
-          Switch: 1,
-          SelectList: ["北京市", "上海市", "天津市", "广州市", "重庆市"],
-          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,
-              type: "text",
-              field: "extra1",
-              extra: {
-                icon: "ios-search",
-                style: "color:red",
-                text: "这里可以显示额外标签"
-              }
-            },
-            {
-              title: "可点击额外标签",
-              field: "extra2",
-              type: "text",
-              extra: {
-                icon: "ios-search",
-                text: "点击可触发事件",
-                click: item => {
-                  this.$Message.error("点击标签触发的事件");
-                }
-              }
-            }
-          ],
-          [
-            {
-              dataKey: "city",
-              title: "多选",
-              required: true,
-              field: "SelectList",
-              data: [],
-              colSize: 12,
-              type: "selectList"
-            }
-          ],
-          [
-            {
-              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",
-              maxSize: 0.2, //最大0.2M图片
-              //上传参数可参照volupload组件
-              url: "/api/App_Appointment/Upload"
-            }
-          ]
-        ]
-      };
-    }
-  };
-  </script>
-
-

 

`, + form: `
+
+ <template> +
+
+   <div> +
+
+     <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 VolForm from "@/components/basic/VolForm.vue"; +
+
+ export default { +
+
+   components: { VolForm }, +
+
+   methods: { +
+
+     reset() { +
+
+       this.$refs.myform.reset(); +
+
+       this.$Message.error("表单已重置"); +
+
+     } +
+
+   }, +
+
+   data() { +
+
+     return { +
+
+       formFileds1: { +
+
+         Variety: 1, +
+
+         AgeRange: "", +
+
+         DateRange: [], +
+
+         City: "北京市", +
+
+         AvgPrice: 8.88, +
+
+         number1: 20, +
+
+         mail: "", +
+
+         Date: "", +
+
+         IsTop: "", +
+
+         Fruits: [], +
+
+         Other: "", +
+
+         extra1: "添加其他标签", +
+
+         extra2: "添加其他标签可点击", +
+
+         Switch: 1, +
+
+         SelectList: ["北京市", "上海市", "天津市", "广州市", "重庆市"], +
+
+         remoteSearch: "", +
+
+         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", +
+
+         cascader1: ["beijing", "tiantan"], //级联默认值2020.05.31 +
+
+         cascader2: [] //懒加载的级联默认值 +
+
+       }, +
+
+       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, +
+
+             type: "text", +
+
+             field: "extra1", +
+
+             extra: { +
+
+               icon: "ios-search", +
+
+               style: "color:red", +
+
+               text: "这里可以显示额外标签" +
+
+             } +
+
+           }, +
+
+           { +
+
+             title: "可点击额外标签", +
+
+             field: "extra2", +
+
+             type: "text", +
+
+             extra: { +
+
+               icon: "ios-search", //显示图标 +
+
+               text: "点击可触发事件", //显示文本 +
+
+               //触发事件 +
+
+               click: item => { +
+
+                 this.$Message.error("点击标签触发的事件"); +
+
+               } +
+
+             } +
+
+           } +
+
+         ], +
+
+         [ +
+
+           { +
+
+             dataKey: "city", +
+
+             title: "多选", +
+
+             required: true, +
+
+             field: "SelectList", +
+
+             data: [], +
+
+             type: "selectList" +
+
+           }, +
+
+           { +
+
+             dataKey: "city", +
+
+             title: "远程搜索", +
+
+             required: true, +
+
+             field: "remoteSearch", +
+
+             remote: true, //远程搜索(从后台字典搜索,只会搜索自定义sql,后台如果返回的数据量较大，请将字典维护的sql取top) +
+
+             //url:'api/xx/xx'从指定url搜索 返回格式必须是[{key:'xxxx',value:'xxx'}] +
+
+             data: [], +
+
+             type: "select" +
+
+           } +
+
+         ], +
+
+         [ +
+
+           { +
+
+             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" +
+
+           } +
+
+         ], +
+
+         [ +
+
+           //readonlyImg +
+
+           { +
+
+             title: "级联1", +
+
+             //如果这里绑定了data数据，后台不会加载此数据源 +
+
+             data: [ +
+
+               { +
+
+                 value: "beijing", +
+
+                 label: "北京", +
+
+                 loading: false, +
+
+                 children: [ +
+
+                   { +
+
+                     value: "gugong", +
+
+                     label: "故宫" +
+
+                   }, +
+
+                   { +
+
+                     value: "tiantan", +
+
+                     label: "天坛" +
+
+                   }, +
+
+                   { +
+
+                     value: "wangfujing", +
+
+                     label: "王府井" +
+
+                   } +
+
+                 ] +
+
+               } +
+
+             ], +
+
+             field: "cascader1", +
+
+             type: "cascader", +
+
+             required: true, +
+
+             //格式化显示(非必须) +
+
+             formatter: (labels, selectedData) => { +
+
+               const index = labels.length - 1; +
+
+               const data = selectedData[index] || false; +
+
+               if (data && data.label) { +
+
+                 return labels[index] + " - " + data.label + " - (格式化测试)"; +
+
+               } +
+
+               return labels[index]; +
+
+             } +
+
+           }, +
+
+           { +
+
+             title: "级联懒加载", +
+
+             //如果这里绑定了data数据，后台不会加载此数据源 +
+
+             data: [ +
+
+               { +
+
+                 value: "zhejiang", +
+
+                 label: "浙江", +
+
+                 loading: false, +
+
+                 children: [] +
+
+               } +
+
+             ], +
+
+             field: "cascader2", +
+
+             required: true, +
+
+             type: "cascader", +
+
+             //懒加载数据源 +
+
+             loadData: (item, callback) => { +
+
+               if (item.children.length > 0) return; +
+
+               item.loading = true; +
+
+               this.http.post("xxx").then(children => { +
+
+                 item.loading = false; +
+
+                 item.children = children; +
+
+                 //children格式或参照iview组件cascader动态加载选项的配置 +
+
+                 // item.children = [{ +
+
+                 //   value: 'hangzhou', +
+
+                 //   label: '杭州', +
+
+                 //   children: [{ +
+
+                 //     value: 'xihu', +
+
+                 //     label: '西湖', +
+
+                 //     code: 1000 +
+
+                 //   }] +
+
+                 // }] +
+
+                 callback(); +
+
+               }); +
+
+             } +
+
+           } +
+
+         ], +
+
+         [ +
+
+           { +
+
+             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", +
+
+             maxSize: 0.2, //最大0.2M图片 +
+
+             //上传参数可参照volupload组件 +
+
+             url: "/api/App_Appointment/Upload" +
+
+           } +
+
+         ] +
+
+       ] +
+
+     }; +
+
+   } +
+
+ }; +
+
+ </script> +
+
+
`, editTableKeep:`<template>
  <div>
    <div class="vol-demo keep-edit">
@@ -749,7 +1473,7 @@ let codeString = { <script> import VolTable from "@/components/basic/VolTable.vue"; import VolHeader from "@/components/basic/VolHeader.vue"; - + export default { components: { VolTable, VolHeader }, created() {}, @@ -1026,7 +1750,7 @@ let codeString = { </VolUpload> </div> </div> - + <div class="upload-container"> <div class="upload-item"> <VolUpload @@ -1142,4 +1866,4 @@ let codeString = {

 

`, uploadExcel: ``, uploadImg: ``, volmenu: ``, viewGrid: `` } -export default codeString \ No newline at end of file +export default codeString diff --git a/Vol.Vue/src/views/document/log.vue b/Vol.Vue/src/views/document/log.vue index fc8bd978..ddb31be0 100644 --- a/Vol.Vue/src/views/document/log.vue +++ b/Vol.Vue/src/views/document/log.vue @@ -44,61 +44,163 @@ export default { return { active: 0, log: [ -{"date":"2020-05-07 14:46:08","desc":"增加(导入、下载导入模板、导出表数据)时可以指定导入与导出字段(默认为界面上可以看到的字段)"}, - {"date":"2020-05-03 12:12:08","desc":"增加代码生成页面对checkbox编辑时多选的支持"}, - {"date":"2020-05-02 20:03:49","desc":"完善编辑器静态页面发布上传图片功能"}, - {"date":"2020-05-01 21:43:26","desc":"增加可根据用户信息自定义数据源"}, - {"date":"2020-04-27 11:00:50","desc":"更新数据库最新菜单表的脚本"}, - {"date":"2020-04-27 10:36:55","desc":"添加全局缓存与读写分离文档"}, - {"date":"2020-04-27 10:02:28","desc":"优化用户保存"}, - {"date":"2020-04-26 20:08:41","desc":"增加树形菜单与table"}, - {"date":"2020-04-25 20:36:49","desc":"文档整理"}, - {"date":"2020-04-25 20:00:56","desc":"预留非对称主外键关系配置功能，待开发"}, - {"date":"2020-04-25 11:16:57","desc":"优化白色主题菜单颜色"}, - {"date":"2020-04-25 10:18:45","desc":"添加获取用户权限的重载方法"}, - {"date":"2020-04-25 10:09:10","desc":"优化上传组件图片选择器默认大小图"}, - {"date":"2020-04-24 18:10:44","desc":"增加EF更新时并发重试处理"}, - {"date":"2020-04-24 11:45:29","desc":"修复导出数据源为自定义sql,类型转换异常的问题"}, - {"date":"2020-04-21 23:00:06","desc":"增加没有编辑或新建权限时，也可以通过buttons属性添加自定义弹出框按钮"}, - {"date":"2020-04-21 20:17:25","desc":"修复首页字符拼写错误"}, - {"date":"2020-04-21 10:58:15","desc":"将默认皮肤黑色改为蓝色"}, - {"date":"2020-04-20 14:43:39","desc":"修复动态刷新数据源文档描述错误的问题"}, - {"date":"2020-04-14 19:55:14","desc":"增加Mysql数据库使用Dapper批量修改实体功能"}, - {"date":"2020-04-11 21:20:04","desc":"增加项目部署及部署错误处理文档"}, - {"date":"2020-04-11 18:49:33","desc":"移除使用了C#8.0语法的代码"}, -{"date":"2020-04-10 13:05:23","desc":"修复自定义sql数据源key为数字时，表单查询时条件不起作用的问题"}, -{"date":"2020-04-10 10:01:43","desc":"添加table列为编辑列时可formatter操作"}, -{"date":"2020-04-07 23:43:16","desc":"完善文档"}, -{"date":"2020-04-07 22:02:49","desc":"增加数字排版"}, -{"date":"2020-04-07 21:41:24","desc":"增加主从表，可单独对从表上传图片(文件)功能"}, -{"date":"2020-04-05 21:21:18","desc":"优化菜单保存后提示信息"}, -{"date":"2020-04-05 20:48:02","desc":"优化排序字段"}, -{"date":"2020-04-05 11:29:36","desc":"修复实体全属性校验判断错误的问题"}, -{"date":"2020-04-04 12:44:56","desc":"优化voltable组件单独使用时数据绑定select的key类型"}, -{"date":"2020-04-03 23:13:05","desc":"移除无用代码，增加一对多(不限从表数量)实战开发"}, -{"date":"2020-04-03 23:07:04","desc":"添加最新菜单脚本"}, -{"date":"2020-04-02 18:26:41","desc":"优化皮肤样式"}, -{"date":"2020-04-02 17:47:23","desc":"增加换皮肤功能"}, -{"date":"2020-04-02 17:43:59","desc":"修复点击非标准菜单可以重复显示的问题"}, -{"date":"2020-04-02 17:36:23","desc":"增加皮肤切换功能"}, -{"date":"2020-03-31 18:37:56","desc":"增加Dapper对mysql数据库Guid映射"}, -{"date":"2020-03-31 13:47:14","desc":"增加查询按钮组非递归深拷贝"}, -{"date":"2020-03-30 20:42:58","desc":"添加一对一从表编辑或新建时，可设置hidden属性控制按钮显示/隐藏"}, -{"date":"2020-03-29 09:56:00","desc":"优化菜单保存验证"}, -{"date":"2020-03-28 19:30:39","desc":"增加文件上传时可选择追加文件"}, -{"date":"2020-03-27 20:17:57","desc":"优化axios请求失败提示"}, -{"date":"2020-03-25 17:10:01","desc":"优化扩展排序"}, -{"date":"2020-03-24 10:10:30","desc":"移除mysql连接字符串AllowLoadLocalInfile属性"}, -{"date":"2020-03-23 19:10:26","desc":"修改代码生成器文档参数描述"}, -{"date":"2020-03-19 23:28:22","desc":"文档整理"}, -{"date":"2020-03-19 21:50:16","desc":"修复table表格属性为img多图片时不能预览大图的问题"}, -{"date":"2020-03-18 22:10:29","desc":"导出数据时，默认导出table上可见的列"}, -{"date":"2020-03-18 22:07:11","desc":"修改备注说明"}, -{"date":"2020-03-17 13:00:17","desc":"优化菜单自定义按权限按钮显示"}, -{"date":"2020-03-15 21:55:10","desc":"添加预请求过期时间"}, -{"date":"2020-03-15 20:42:55","desc":"移除后台校验日期限制"}, -{"date":"2020-03-15 20:42:13","desc":"优化多值in查询"}, -{"date":"2020-03-15 20:41:41","desc":"优化table图片显示"}, + { + date: "2020-05-31 23:15:20", + desc: + "集成iview级联组件cascader到框架volform、viewgrid组件中；增加级联操作文档" + }, + { date: "2020-05-31 21:15:33", desc: "移除无用文件夹test" }, + { + date: "2020-05-31 15:45:37", + desc: "优化角色管理页面及角色service代码" + }, + { date: "2020-05-30 20:13:09", desc: "mysql最新脚本" }, + { date: "2020-05-29 14:57:23", desc: "修复mysql异常说明" }, + { + date: "2020-05-25 00:43:43", + desc: "角色权限分配，权限列表改为树形菜单" + }, + { + date: "2020-05-25 00:16:10", + desc: "修复http同时发起多个请求时，遮罩层不能正确关闭的问题" + }, + { date: "2020-05-24 20:35:15", desc: "增加代码生成器常用问题描述" }, + { date: "2020-05-17 15:17:01", desc: "优化首页tab选项卡border样式" }, + { + date: "2020-05-17 15:04:17", + desc: + "修复代码生成器mysql获取表结构没有区分数据库的问题(感谢jerry指正)" + }, + { date: "2020-05-12 10:08:23", desc: "优化手动上传组件图片选择器" }, + { + date: "2020-05-08 11:16:44", + desc: "添加mysql写入日志异常提示解决办法" + }, + { date: "2020-05-08 11:13:09", desc: "补全mysql数据库字典编号" }, + { + date: "2020-05-07 18:43:31", + desc: "修改菜单与角色的父级id出现循环依赖时，给出提示并禁止修改" + }, + { + date: "2020-05-07 14:46:08", + desc: + "增加(导入、下载导入模板、导出表数据)时可以指定导入与导出字段(默认为界面上可以看到的字段)" + }, + { + date: "2020-05-03 12:12:08", + desc: "增加代码生成页面对checkbox编辑时多选的支持" + }, + { + date: "2020-05-02 20:03:49", + desc: "完善编辑器静态页面发布上传图片功能" + }, + { date: "2020-05-01 21:43:26", desc: "增加可根据用户信息自定义数据源" }, + { date: "2020-04-27 11:00:50", desc: "更新数据库最新菜单表的脚本" }, + { date: "2020-04-27 10:36:55", desc: "添加全局缓存与读写分离文档" }, + { date: "2020-04-27 10:02:28", desc: "优化用户保存" }, + { date: "2020-04-26 20:08:41", desc: "增加树形菜单与table" }, + { date: "2020-04-25 20:36:49", desc: "文档整理" }, + { + date: "2020-04-25 20:00:56", + desc: "预留非对称主外键关系配置功能，待开发" + }, + { date: "2020-04-25 11:16:57", desc: "优化白色主题菜单颜色" }, + { date: "2020-04-25 10:18:45", desc: "添加获取用户权限的重载方法" }, + { + date: "2020-04-25 10:09:10", + desc: "优化上传组件图片选择器默认大小图" + }, + { date: "2020-04-24 18:10:44", desc: "增加EF更新时并发重试处理" }, + { + date: "2020-04-24 11:45:29", + desc: "修复导出数据源为自定义sql,类型转换异常的问题" + }, + { + date: "2020-04-21 23:00:06", + desc: + "增加没有编辑或新建权限时，也可以通过buttons属性添加自定义弹出框按钮" + }, + { date: "2020-04-21 20:17:25", desc: "修复首页字符拼写错误" }, + { date: "2020-04-21 10:58:15", desc: "将默认皮肤黑色改为蓝色" }, + { + date: "2020-04-20 14:43:39", + desc: "修复动态刷新数据源文档描述错误的问题" + }, + { + date: "2020-04-14 19:55:14", + desc: "增加Mysql数据库使用Dapper批量修改实体功能" + }, + { date: "2020-04-11 21:20:04", desc: "增加项目部署及部署错误处理文档" }, + { date: "2020-04-11 18:49:33", desc: "移除使用了C#8.0语法的代码" }, + { + date: "2020-04-10 13:05:23", + desc: "修复自定义sql数据源key为数字时，表单查询时条件不起作用的问题" + }, + { + date: "2020-04-10 10:01:43", + desc: "添加table列为编辑列时可formatter操作" + }, + { date: "2020-04-07 23:43:16", desc: "完善文档" }, + { date: "2020-04-07 22:02:49", desc: "增加数字排版" }, + { + date: "2020-04-07 21:41:24", + desc: "增加主从表，可单独对从表上传图片(文件)功能" + }, + { date: "2020-04-05 21:21:18", desc: "优化菜单保存后提示信息" }, + { date: "2020-04-05 20:48:02", desc: "优化排序字段" }, + { + date: "2020-04-05 11:29:36", + desc: "修复实体全属性校验判断错误的问题" + }, + { + date: "2020-04-04 12:44:56", + desc: "优化voltable组件单独使用时数据绑定select的key类型" + }, + { + date: "2020-04-03 23:13:05", + desc: "移除无用代码，增加一对多(不限从表数量)实战开发" + }, + { date: "2020-04-03 23:07:04", desc: "添加最新菜单脚本" }, + { date: "2020-04-02 18:26:41", desc: "优化皮肤样式" }, + { date: "2020-04-02 17:47:23", desc: "增加换皮肤功能" }, + { + date: "2020-04-02 17:43:59", + desc: "修复点击非标准菜单可以重复显示的问题" + }, + { date: "2020-04-02 17:36:23", desc: "增加皮肤切换功能" }, + { + date: "2020-03-31 18:37:56", + desc: "增加Dapper对mysql数据库Guid映射" + }, + { date: "2020-03-31 13:47:14", desc: "增加查询按钮组非递归深拷贝" }, + { + date: "2020-03-30 20:42:58", + desc: "添加一对一从表编辑或新建时，可设置hidden属性控制按钮显示/隐藏" + }, + { date: "2020-03-29 09:56:00", desc: "优化菜单保存验证" }, + { date: "2020-03-28 19:30:39", desc: "增加文件上传时可选择追加文件" }, + { date: "2020-03-27 20:17:57", desc: "优化axios请求失败提示" }, + { date: "2020-03-25 17:10:01", desc: "优化扩展排序" }, + { + date: "2020-03-24 10:10:30", + desc: "移除mysql连接字符串AllowLoadLocalInfile属性" + }, + { date: "2020-03-23 19:10:26", desc: "修改代码生成器文档参数描述" }, + { date: "2020-03-19 23:28:22", desc: "文档整理" }, + { + date: "2020-03-19 21:50:16", + desc: "修复table表格属性为img多图片时不能预览大图的问题" + }, + { + date: "2020-03-18 22:10:29", + desc: "导出数据时，默认导出table上可见的列" + }, + { date: "2020-03-18 22:07:11", desc: "修改备注说明" }, + { date: "2020-03-17 13:00:17", desc: "优化菜单自定义按权限按钮显示" }, + { date: "2020-03-15 21:55:10", desc: "添加预请求过期时间" }, + { date: "2020-03-15 20:42:55", desc: "移除后台校验日期限制" }, + { date: "2020-03-15 20:42:13", desc: "优化多值in查询" }, + { date: "2020-03-15 20:41:41", desc: "优化table图片显示" }, { date: "2020-03-14 14:32:50", desc: "添加table编辑demo，增加文档说明" @@ -442,8 +544,7 @@ export default { }, { date: "2019-11-13 23:46:01", - desc: - "增加代码生成器页面手动同步表结构的功能" + desc: "增加代码生成器页面手动同步表结构的功能" }, { date: "2019-11-13 23:38:35", diff --git a/Vol.Vue/src/views/document/vueDev.vue b/Vol.Vue/src/views/document/vueDev.vue index 4e43c07c..83a5f39a 100644 --- a/Vol.Vue/src/views/document/vueDev.vue +++ b/Vol.Vue/src/views/document/vueDev.vue @@ -76,6 +76,14 @@ export default { return { active: 0, items: [ + { + title: "完整前端功能扩展", + content: [ + `其他功能扩展，如：查询前后，保存前后等，参照sellOrder.js或viewGrid组件api` + ], + tips: ` 前端功能扩展覆盖了常用操作，可通过扩展实现任意功能`, + img: "" + }, { title: "第一个扩展：动态添加按钮", content: [ @@ -627,6 +635,505 @@ export default { tips: `在前端表的扩展js中,onInit与onInited初始化要统计的字段，后台在xxxService.cs中重写查询方法，并实现要统计的字段即可完成表格统计，无需其他操作`, img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/09.png" }, + { + title: "级联操作", + content: [ + `
+
+     /* +
+
+         详细配置数据源及格式见Iview组件 +
+
+         https://iviewui.com/components/cascader +
+
+       */ +
+
+     onInit() { +
+
+       //级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置)span> +
+
+       //设置表单的默认值,没有值就设置为空数组(必须) +
+
+       //在数据库中保存后的多个值实际是以逗号的字符串 +
+
+       this.editFormFileds.ExpertName = []; //["北京","天坛"] +
+
+       //设置数据源(必须) +
+
+       this.editFormOptions.forEach(x => { +
+
+         x.forEach(item => { +
+
+           if (item.field == 'ExpertName') { +
+
+             //设置为级联类型(必须) +
+
+             item.type = "cascader"; +
+
+             //初始数据源对象,格式见iview原生cascader组件(必须) +
+
+             //注意：value与label不同时，保存后存储的就是value值，在table上显示的就是value +
+
+             //解决办法：需要在table(this.columns)中设置formatter处理(建议value与lable相同) +
+
+             item.data = [{ +
+
+               value: "北京", +
+
+               label: "北京", +
+
+               children: [ +
+
+                 { value: "天坛", label: "天坛" }, +
+
+                 { value: "王府井", label: "王府井" } +
+
+               ] +
+
+             }]; +
+
+             //格式化显示(非必须) +
+
+             // item.formatter=(labels, selectedData)=>{ +
+
+             //   const index = labels.length - 1; +
+
+             //   const data = selectedData[index] || false; +
+
+             //   if (data && data.label) { +
+
+             //     return labels[index] + ' - ' + data.label+"888"; +
+
+             //   } +
+
+             //   return labels[index]; +
+
+             // } +
+
+           } +
+
+         }) +
+
+       }) +
+
+     } +
+
` + ], + tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`, + img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/14.png" + + },{ + title: "级联(后台加载数据源)", + content: [`
+
+   onInit() { +
+
+       //设置表单的默认值,没有值就设置为空数组(必须) +
+
+       //在数据库中保存后的多个值实际是以逗号的字符串 +
+
+       this.editFormFileds.ExpertName = []; //["北京","天坛"] +
+
+       //设置数据源(必须) +
+
+       this.editFormOptions.forEach(x => { +
+
+         x.forEach(item => { +
+
+           if (item.field == 'ExpertName') { +
+
+             //设置为级联类型(必须) +
+
+             item.type = "cascader"; +
+
+             //初始一个空的数据源(必须) +
+
+             item.data = []; +
+
+             //从后台接口返回数据源,格式见iview组件result(建议在modelOpenBefore方法中设置数据源) +
+
+             this.http.post("xxx").then(result=>{ +
+
+                 item.data.push(...result); +
+
+                 //result数据格式或见iview组件cascader数据源配置格式 +
+
+                 // [{ +
+
+                 //   value: "北京", +
+
+                 //   label: "北京", +
+
+                 //   children: [ +
+
+                 //     { value: "天坛", label: "天坛" }, +
+
+                 //     { value: "王府井", label: "王府井" } +
+
+                 //   ] +
+
+                 // }]; +
+
+             }) +
+
+           } +
+
+         }) +
+
+       }) +
+
+     }, +
+
+     modelOpenBefore(){//打开弹出框时 +
+
+         //如果考虑性能，建议在此处调用 this.http.post设置级联数据源 +
+
+     }, +
+
`], tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`, + img: "" + }, + { + title: "级联赖(动态)加载", + content: [`
+
+  /* +
+
+      详细配置数据源及格式见Iview组件 +
+
+      https://iviewui.com/components/cascader +
+
+    */ +
+
+     onInit() { +
+
+       this.editFormFileds.ExpertName = []; //["北京","天坛"] +
+
+       //设置数据源(必须) +
+
+       this.editFormOptions.forEach(x => { +
+
+         x.forEach(option => { +
+
+           if (option.field == 'ExpertName') { +
+
+             //设置为级联类型(必须) +
+
+             option.type = "cascader"; +
+
+             //初始数据源对象,格式见iview原生cascader组件(必须) +
+
+             //懒加载必须初始化一级选择项(可以从后台加载出来data一级选项) +
+
+             option.data = [{ +
+
+               value: "北京", +
+
+               loading: false, //懒加载此属性必须设置 +
+
+               label: "北京", +
+
+               children: [] +
+
+             }]; +
+
+
+             //触发懒加载 +
+
+             option.loadData = (item, callback) => { +
+
+               if (item.children.length > 0) return; +
+
+               item.loading = true; +
+
+               this.http.post("xxx").then(children => { +
+
+                 item.loading = false; +
+
+                 item.children = children; +
+
+                 callback()loading = false; +
+
+                 //children格式或参照iview组件cascader动态加载选项的配置 +
+
+                 // [{ +
+
+                 //   value: 'hangzhou', +
+
+                 //   label: '杭州', +
+
+                 //   children: [{ +
+
+                 //     value: 'xihu', +
+
+                 //     label: '西湖', +
+
+                 //     code: 1000 +
+
+                 //   }] +
+
+                 // }] +
+
+               }) +
+
+             } +
+
+           } +
+
+         }) +
+
+       }) +
+
+     } +
+
+
+  /* +
+
+      详细配置数据源及格式见Iview组件 +
+
+      https://iviewui.com/components/cascader +
+
+    */ +
+
+     onInit() { +
+
+       this.editFormFileds.ExpertName = []; //["北京","天坛"] +
+
+       //设置数据源(必须) +
+
+       this.editFormOptions.forEach(x => { +
+
+         x.forEach(option => { +
+
+           if (option.field == 'ExpertName') { +
+
+             //设置为级联类型(必须) +
+
+             option.type = "cascader"; +
+
+             //初始数据源对象,格式见iview原生cascader组件(必须) +
+
+             //懒加载必须初始化一级选择项(可以从后台加载出来data一级选项) +
+
+             option.data = [{ +
+
+               value: "北京", +
+
+               loading: false, //懒加载此属性必须设置 +
+
+               label: "北京", +
+
+               children: [] +
+
+             }]; +
+
+
+             //触发懒加载 +
+
+             option.loadData = (item, callback) => { +
+
+               if (item.children.length > 0) return; +
+
+               item.loading = true; +
+
+               this.http.post("xxx").then(children => { +
+
+                 item.loading = false; +
+
+                 item.children = children; +
+
+                 //children格式或参照iview组件cascader动态加载选项的配置 +
+
+                 // [{ +
+
+                 //   value: 'hangzhou', +
+
+                 //   label: '杭州', +
+
+                 //   children: [{ +
+
+                 //     value: 'xihu', +
+
+                 //     label: '西湖', +
+
+                 //     code: 1000 +
+
+                 //   }] +
+
+                 // }] +
+
+               }) +
+
+             } +
+
+           } +
+
+         }) +
+
+       }) +
+
+     } +
+
`], + tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`, + img: "" + }, { title: "编辑多图/文件上传", content: [ @@ -895,14 +1402,6 @@ export default { img: "" }, { - title: "完整前端功能扩展", - content: [ - `其他功能扩展，如：查询前后，保存前后等，参照sellOrder.js或viewGrid组件api` - ], - tips: ` 前端功能扩展覆盖了常用操作，可通过扩展实现任意功能`, - img: "" - }, - { title: "自动绑定表单/表数据源", content: [ ` @@ -914,7 +1413,7 @@ export default { tips: `字典绑定数据还支持远程模糊查询与自动模糊查询,提前在菜单[下拉框绑定设置]配置好，不需要写任何代码`, img: "" }, - { + { title: "select远程搜索", content: [ `