fix: 增加选项的禁用配置，增加dictSwitch,部分ie兼容性问题修复

packages/d2-crud-plus-example/src/business/index.js

@@ -1,6 +1,8 @@
-import './fix.ie'
 import './lib'
 import './components'
 import './filters'
 import './modules'
 import './style/common.scss'
+
+// 兼容ie11，要放到lib后面
+import './fix.ie'

packages/d2-crud-plus-example/src/business/mock/base.js

@@ -1,15 +1,42 @@
-function copyList (originList, newList, options) {
+function copyList (originList, newList, options, parentId) {
   for (let item of originList) {
-    let newItem = { ...item }
+    let newItem = { ...item, parentId }
     newItem.id = ++options.idGenerator
     newList.push(newItem)
     if (item.children != null) {
       newItem.children = []
-      copyList(item.children, newItem.children, options)
+      copyList(item.children, newItem.children, options, newItem.id)
+    }
+  }
+}
+
+function delById (req, list) {
+  for (let i = 0; i < list.length; i++) {
+    let item = list[i]
+    if ((item.id) === parseInt(req.params.id)) {
+      console.log('remove i')
+      list.splice(i, 1)
+      break
+    }
+    if (item.children != null && item.children.length > 0) {
+      delById(req, item.children)
     }
   }
 }
 export default {
+  findById (id, list) {
+    for (let item of list) {
+      if (item.id === id) {
+        return item
+      }
+      if (item.children != null && item.children.length > 0) {
+        let sub = this.findById(id, item.children)
+        if (sub != null) {
+          return sub
+        }
+      }
+    }
+  },
   buildMock (options) {
     let name = options.name
     if (options.copyTimes == null) {
@@ -19,6 +46,7 @@ export default {
     for (let i = 0; i < options.copyTimes; i++) {
       copyList(options.list, list, options)
     }
+    options.list = list
     return [
       {
         path: 'api/' + name + '/page',
@@ -27,6 +55,12 @@ export default {
           let data = list
           let size = 20
           let current = 1
+          for (let item of list) {
+            if (item.children != null && item.children.length === 0) {
+              item.hasChildren = false
+              item.lazy = false
+            }
+          }
           if (req != null && req.body != null) {
             if (req.body.size != null) {
               size = parseInt(req.body.size)
@@ -156,14 +190,7 @@ export default {
         path: 'api/' + name + '/delete',
         method: 'post',
         handle (req) {
-          for (let i = 0; i < list.length; i++) {
-            let item = list[i]
-            if ((item.id) === parseInt(req.params.id)) {
-              console.log('remove i')
-              list.splice(i, 1)
-              break
-            }
-          }
+          delById(req, list)
           console.log('req', req, list)
           return {
             code: 0,

packages/d2-crud-plus-example/src/business/modules/example/views/form/area/crud.js

@@ -73,6 +73,18 @@ export const crudOptions = {
             },
             helper: '树形，不忽略完全选中节点的子节点，只需要叶子节点'
           }
+        }, {
+          title: '树形选择3',
+          key: 'tree3',
+          type: 'tree-selector',
+          dict: { url: '/area/tree', isTree: true, value: 'id' },
+          form: {
+            component: {
+              span: 24,
+              props: { ignoreFullCheckedChildren: false, leafOnly: true, includeHalfChecked: false }
+            },
+            helper: '自定义获取省市区数据'
+          }
         }
       ]
     }

packages/d2-crud-plus-example/src/business/modules/example/views/form/area/mock.js

@@ -11,5 +11,21 @@ const list = [
   { 'id': ++options.idGenerator, 'pca': ['11', '1101', '110101'], 'pca2': ['北京市', '市辖区', '东城区'], 'pca3': [['北京市', '市辖区', '东城区'], ['北京市', '市辖区', '西城区']], 'pca4': [['北京市', '市辖区', '东城区'], ['北京市', '市辖区', '西城区']], 'pcaTree': ['11'], 'pcaTree2': [ '110101', '110102' ] }
 ]
 options.list = list
+
 let mock = mockUtil.buildMock(options)
+mock.push({
+  path: 'api/area/tree',
+  method: 'get',
+  handle (req) {
+    const tree = [
+      { 'id': 10000, label: '北京市', children: [{ 'id': 100003, label: '市辖区', children: [{ 'id': 100004, label: '东城区' }, { 'id': 100005, label: '西城区' }] }] },
+      { 'id': 10010, label: '天津市', children: [{ 'id': 100013, label: '市辖区', children: [{ 'id': 100014, label: '天津湾' }, { 'id': 100015, label: '渤海湾' }] }] }
+    ]
+    return {
+      code: 0,
+      msg: 'success',
+      data: tree
+    }
+  }
+})
 export default mock

packages/d2-crud-plus-example/src/business/modules/example/views/form/column/crud.js

@@ -1,3 +1,5 @@
+import request from '@/plugin/axios'
+
 export const crudOptions = {
   rowHandle: {
     // columnHeader: '操作',
@@ -16,6 +18,17 @@ export const crudOptions = {
   options: {
     highlightCurrentRow: true,
     rowKey: 'id',
+    lazy: true,
+    load: (tree, treeNode, resolve) => {
+      console.log('--------', tree, treeNode)
+      request({
+        url: '/column/children?id=' + tree.id,
+        method: 'get'
+      }).then(ret => {
+        console.log('懒加载数据', ret.data)
+        resolve(ret.data)
+      })
+    },
     showSummary: true,
     summaryMethod (param) {
       const { columns, data } = param

packages/d2-crud-plus-example/src/business/modules/example/views/form/column/index.vue

@@ -83,7 +83,19 @@ export default {
       return UpdateObj(row)
     },
     delRequest (row) {
-      return DelObj(row.id)
+      return DelObj(row.id).then(ret => {
+        // 手动更新加载项
+        let data = this.getD2Crud().$refs.elTable['store'].states.treeData
+        if (data != null) {
+          let item = data[row.parentId]
+          console.log('tree Data', data, item, row.id)
+          if (item != null) {
+            item.loaded = false
+            item.expanded = false
+          }
+        }
+        return ret
+      })
     },
     batchDelRequest (ids) {
       return BatchDel(ids)

packages/d2-crud-plus-example/src/business/modules/example/views/form/column/mock.js

@@ -6,10 +6,26 @@ let options = {
 }
 const list = [
   {
-    data: 'data1',
+    data: '我会懒加载',
     time: '2020-01-01 11:11:11',
     province: 'wh',
-    amount: 100
+    amount: 100,
+    hasChildren: true,
+    loaded: false,
+    children: [
+      {
+        data: '懒加载的子数据',
+        province: ['sh', 'gz'],
+        time: '2020-01-01 11:11:11',
+        amount: 100
+      },
+      {
+        data: '懒加载的子数据2',
+        province: ['sh', 'sz'],
+        time: '2020-01-01 11:11:11',
+        amount: 100
+      }
+    ]
   },
   {
     data: 'data2',
@@ -62,4 +78,20 @@ const list = [
 ]
 options.list = list
 let mock = mockUtil.buildMock(options)
+
+mock.push({
+  path: '/api/column/children',
+  method: 'get',
+  handle (req) {
+    console.log('req', req)
+    let id = parseInt(req.params.id)
+    let item = mockUtil.findById(id, options.list)
+    console.log('children:', item.children)
+    return {
+      code: 0,
+      msg: 'success',
+      data: item.children
+    }
+  }
+})
 export default mock

packages/d2-crud-plus-example/src/business/modules/example/views/form/select/crud.js

@@ -19,6 +19,20 @@ function radioOptionsChanged (vm, value) {
   vm.crud.columnsMap['checkbox'].dict.dataMap
   console.log('component.dict', vm.crud.columnsMap['checkbox'].component.props.dict.data)
 }
+function disabledAllChanged (vm, key, value, form) {
+  for (let formKey in form) {
+    if (formKey === key) {
+      continue
+    }
+    let column = vm.getEditFormTemplate(formKey)
+    if (column && column.component.props) {
+      column.component.props.disabled = value
+      if (column.component.props.elProps) {
+        column.component.props.elProps.disabled = value
+      }
+    }
+  }
+}
 export const crudOptions = (vm) => {
   return {
     columns: [
@@ -203,7 +217,18 @@ export const crudOptions = (vm) => {
             vm.getEditFormTemplate('show_ret').component.show = value
             // vm.$set(vm.getEditFormTemplate('show_ret').component, 'show', value)
           },
-          helper: '点击显示与隐藏右边整个字段'
+          component: {
+            props: {
+              dict: {
+                onReady: (data, dict) => {
+                  let value = vm.getEditForm().show
+                  vm.getEditFormTemplate('show_ret').component.show = value
+                }
+              }
+            }
+          },
+          helper: '点击显示与隐藏右边整个字段',
+          span: 24
         }
       },
       {
@@ -214,7 +239,32 @@ export const crudOptions = (vm) => {
         disabled: true,
         form: {
           component: {
-            show: true
+            show: true,
+            props: {
+              disabled: false
+            }
+          }
+        }
+      },
+      {
+        title: '禁用启用',
+        key: 'disableAll',
+        sortable: true,
+        search: { disabled: false },
+        type: 'dict-switch',
+        dict: { data: [{ value: true, label: '禁用全部' }, { value: false, label: '启用' }] },
+        form: {
+          component: {
+            span: 24,
+            dict: {
+              onReady () {
+                disabledAllChanged(vm, 'disableAll', vm.getEditForm().disableAll, vm.getEditForm())
+              }
+            }
+          },
+          valueChange (key, value, form) {
+            console.log('您选中了：', value)
+            disabledAllChanged(vm, key, value, form)
           }
         }
       }

packages/d2-crud-plus-example/src/business/modules/example/views/form/select/index.vue

@@ -21,7 +21,9 @@
         @row-add="handleRowAdd"
         @row-remove="handleRowRemove"
         @dialog-cancel="handleDialogCancel"
-        @form-data-change="handleFormDataChange">
+        @form-data-change="handleFormDataChange"
+        @form-dialog-opened="handleFormDialogOpened"
+    >
       <el-button slot="header" style="margin-bottom: 5px" size="small" type="primary" @click="addRow">新增</el-button>
     </d2-crud>
     <crud-footer ref="footer"
@@ -57,6 +59,12 @@ export default {
     delRequest (row) {
       return DelObj(row.id)
     }
+    // handleFormDialogOpened ({ event, form }) {
+    //   console.log('form dialog opened')
+    //   this.getEditFormTemplate('disableAll').valueChange('disableAll', form.disableAll, form)
+    //   this.getEditFormTemplate('checkbox').valueChange('checkbox', form.checkbox, form)
+    //   this.getEditFormTemplate('show').valueChange('show', form.show, form)
+    // }
   }
 }
 </script>

packages/d2-crud-plus/src/lib/components/form/CascadeSelect.vue

@@ -1,5 +1,6 @@
 <template>
   <el-cascader
+    class="d2p-cascade"
     :value="selectValue"
     :options="_options"
     v-bind="_elProps"
@@ -111,3 +112,11 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.d2p-cascade {
+  /*兼容ie11*/
+  .el-cascader__tags .el-tag>span{
+    flex:auto
+  }
+}
+</style>

packages/d2-crud-plus/src/lib/components/form/DictCheckbox.vue

@@ -2,7 +2,9 @@
   <el-checkbox-group :value="selectValue" v-bind="_elProps" style="width:100%" @input="doInput"  @change="doChange">
     <el-checkbox v-for="option in _options"
                  :key="option[dict.value]"
-                 :label="option[dict.value]" >{{option[dict.label]}}</el-checkbox>
+                 :label="option[dict.value]"
+                 v-bind="option"
+    >{{option[dict.label]}}</el-checkbox>
   </el-checkbox-group>
 </template>
 

packages/d2-crud-plus/src/lib/components/form/DictRadio.vue

@@ -1,8 +1,10 @@
 <template>
-  <el-radio-group class="dict_radio" :value="value" v-bind="_elProps" style="width:100%" @input="doInput" @change="doChange">
+  <el-radio-group class="dict_radio" :value="value" v-bind="_elProps"  @input="doInput" @change="doChange">
     <el-radio v-for="option in _options"
               :key="option[dict.value]"
-              :label="option[dict.value]">{{option[dict.label]}}</el-radio>
+              :label="option[dict.value]"
+              v-bind="option"
+    >{{option[dict.label]}}</el-radio>
   </el-radio-group>
 </template>
 
@@ -81,6 +83,9 @@ export default {
 }
 </script>
 <style lang="scss">
+  .dict_radio{
+    width:100%
+  }
   .dict_radio.el-radio-button__inner, .dict_radio.el-radio-group {
       line-height: 40px;
     .el-radio, .el-radio__input{