tree

src/components/ATree/atree.jsx

-import { Menu, Icon, Input } from 'ant-design-vue'
-
-const { Item, ItemGroup, SubMenu } = Menu
-const { Search } = Input
-
-
-
-function TreeProps() {
-  return {
-    showLine: PropTypes.bool,
-    /** 是否支持多选 */
-    multiple: PropTypes.bool,
-    /** 是否自动展开父节点 */
-    autoExpandParent: PropTypes.bool,
-    /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
-    checkStrictly: PropTypes.bool,
-    /** 是否支持选中 */
-    checkable: PropTypes.bool,
-    /** 是否禁用树 */
-    disabled: PropTypes.bool,
-    /** 默认展开所有树节点 */
-    defaultExpandAll: PropTypes.bool,
-    /** 默认展开对应树节点 */
-    defaultExpandParent: PropTypes.bool,
-    /** 默认展开指定的树节点 */
-    defaultExpandedKeys: PropTypes.array,
-    /** （受控）展开指定的树节点 */
-    expandedKeys: PropTypes.array,
-    /** （受控）选中复选框的树节点 */
-    checkedKeys: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.shape({
-        checked: PropTypes.array,
-        halfChecked: PropTypes.array,
-      }).loose,
-    ]),
-    /** 默认选中复选框的树节点 */
-    defaultCheckedKeys: PropTypes.array,
-    /** （受控）设置选中的树节点 */
-    selectedKeys: PropTypes.array,
-    /** 默认选中的树节点 */
-    defaultSelectedKeys: PropTypes.array,
-    selectable: PropTypes.bool,
-    /** 展开/收起节点时触发 */
-    // onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
-    /** 点击复选框触发 */
-    // onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
-    /** 点击树节点触发 */
-    // onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
-    /** 单击树节点触发 */
-    // onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
-    /** 双击树节点触发 */
-    // onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
-    /** filter some AntTreeNodes as you need. it should return true */
-    filterAntTreeNode: PropTypes.func,
-    /** 异步加载数据 */
-    loadData: PropTypes.func,
-    loadedKeys: PropTypes.array,
-    // onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
-    /** 响应右键点击 */
-    // onRightClick: (options: AntTreeNodeMouseEvent) => void,
-    /** 设置节点可拖拽（IE>8）*/
-    draggable: PropTypes.bool,
-    // /** 开始拖拽时调用 */
-    // onDragStart: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragenter 触发时调用 */
-    // onDragEnter: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragover 触发时调用 */
-    // onDragOver: (options: AntTreeNodeMouseEvent) => void,
-    // /** dragleave 触发时调用 */
-    // onDragLeave: (options: AntTreeNodeMouseEvent) => void,
-    // /** drop 触发时调用 */
-    // onDrop: (options: AntTreeNodeMouseEvent) => void,
-    showIcon: PropTypes.bool,
-    icon: PropTypes.func,
-    switcherIcon: PropTypes.any,
-    prefixCls: PropTypes.string,
-    filterTreeNode: PropTypes.func,
-    openAnimation: PropTypes.any,
-    treeNodes: PropTypes.array,
-    treeData: PropTypes.array,
-    /**
-     * @default{title,key,children}
-     * 替换treeNode中 title,key,children字段为treeData中对应的字段
-     */
-    replaceFields: PropTypes.object,
-  };
-}
-
-export { TreeProps };
-
-export default {
-  name: 'Tree',
-  model: {
-    prop: 'checkedKeys',
-    event: 'check',
-  },
-  props: initDefaultProps(TreeProps(), {
-    checkable: false,
-    showIcon: false,
-    openAnimation: {
-      on: animation,
-      props: { appear: null },
-    },
-  }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
-  created() {
-    warning(
-      !('treeNodes' in getOptionProps(this)),
-      '`treeNodes` is deprecated. please use treeData instead.',
-    );
-  },
-  TreeNode,
-  methods: {
-    renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, expanded, loading }) {
-      const { showLine } = this.$props;
-      if (loading) {
-        return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
-      }
-      if (showLine) {
-        if (isLeaf) {
-          return <Icon type="file" class={`${prefixCls}-switcher-line-icon`} />;
-        }
-        return (
-          <Icon
-            type={expanded ? 'minus-square' : 'plus-square'}
-            class={`${prefixCls}-switcher-line-icon`}
-            theme="outlined"
-          />
-        );
-      } else {
-        const switcherCls = `${prefixCls}-switcher-icon`;
-        if (isLeaf) {
-          return null;
-        } else if (switcherIcon) {
-          const switcherOriginCls = getClass(switcherIcon[0]);
-          return cloneElement(switcherIcon, {
-            class: {
-              [switcherCls]: true,
-            },
-          });
-        } else {
-          return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} theme="filled" />;
-        }
-      }
-    },
-    updateTreeData(treeData) {
-      const { $slots, $scopedSlots } = this;
-      const defaultFields = { children: 'children', title: 'title', key: 'key' };
-      const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
-      return treeData.map(item => {
-        const key = item[replaceFields.key];
-        const children = item[replaceFields.children];
-        const {
-          on = {},
-          slots = {},
-          scopedSlots = {},
-          class: cls,
-          style,
-          ...restProps
-        } = item;
-        const treeNodeProps = {
-          ...restProps,
-          icon:
-            $slots[slots.icon] ||
-            ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]) ||
-            restProps.icon,
-          title:
-            $slots[slots.title] ||
-            ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) ||
-            restProps[replaceFields.title],
-          dataRef: item,
-          on,
-          key,
-          class: cls,
-          style,
-        };
-        if (children) {
-          return { ...treeNodeProps, children: this.updateTreeData(children) };
-        }
-        return treeNodeProps;
-      });
-    },
-  },
-  render() {
-    const props = getOptionProps(this);
-    const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('tree', customizePrefixCls);
-    const switcherIcon = getComponentFromProp(this, 'switcherIcon');
-    const checkable = props.checkable;
-    let treeData = props.treeData || treeNodes;
-    if (treeData) {
-      treeData = this.updateTreeData(treeData);
-    }
-    const vcTreeProps = {
-      props: {
-        ...props,
-        prefixCls,
-        checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
-        children: filterEmpty(this.$slots.default || []),
-        __propsSymbol__: Symbol(),
-        switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
-      },
-      on: this.$listeners,
-      ref: 'tree',
-      class: !showIcon && `${prefixCls}-icon-hide`,
-    };
-    if (treeData) {
-      vcTreeProps.props.treeData = treeData;
-    }
-    return <VcTree {...vcTreeProps} />;
-  },
-};
\ No newline at end of file

src/components/index.js

@@ -18,8 +18,7 @@ import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import NumberInfo from '@/components/NumberInfo'
 import DescriptionList from '@/components/DescriptionList'
-// import Tree from '@/components/Tree/Tree'
-import Tree from '@/components/ATree/atree'
+import Tree from '@/components/Tree/Tree'
 import Trend from '@/components/Trend'
 import STable from '@/components/Table'
 import MultiTab from '@/components/MultiTab'

src/views/delivery/details/deliveryDetails.vue

@@ -231,7 +231,6 @@ import moment from 'moment'
 import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin'
 import { STable } from '@/components'
-import { Tree } from '@/components/ATree/atree'
 import { getTransportList,getProvincialList,addDelivery,getEditDetails,getAllCity } from '@/api/delivery'
 import { getUListUserGroup } from '@/api/userstaff'
 import { loadAddress } from '@/api/store'
@@ -326,7 +325,7 @@ export default {
         this.getTransport();
         this.getUserGroup();
         // this.getProvince();
-        // this.getAllCity()
+        this.getAllCity()
         var goId=this.$route.query.goid;
         if(goId==0){
             this.getDetails(this.$route.query.GUID)
@@ -349,7 +348,14 @@ export default {
                     if(deliveryData.LIMIT_MEMBER_GROUP_GUID){
                         deliveryData.LIMIT_MEMBER_GROUP_GUID=deliveryData.LIMIT_MEMBER_GROUP_GUID.join(',')
                     }
-                    deliveryData.SELECT_AREA=this.modalTree.checkedKeys.join(',')
+                    if(this.modalTree.checkedKeys){
+                        this.modalTree.checkedKeys.map(function(item,index){
+                            if(item.split('').includes('P')){
+                                that.modalTree.checkedKeys.splice(index,1)
+                            }
+                        })
+                        deliveryData.SELECT_AREA=this.modalTree.checkedKeys.join(',')
+                    }
                     if(this.tableData.length>0){
                         const BRANCHES_INFO=[]
                         this.tableData.forEach(item => {
@@ -373,22 +379,23 @@ export default {
         },
         // 编辑获取详情
         getDetails(value){
-            // getEditDetails({GUID:value}).then(res => {
-            //      this.$nextTick(() => {
-            //         this.modalForm.setFieldsValue(res)
-            //         if(res.SELECT_AREA.length>0){
-            //             setTimeout(() => {
-            //                 this.expand([res.PROVINCES,res.SELECT_AREA],{})
-            //             },1000)
-            //         }
-            //         this.tableData=res.BRANCHES_INFO;
-            //         res.BRANCHES_INFO.forEach(item => {
-            //             this.selectedRowKeys.push(item.CODE)
-            //         })
-            //     })
-            // }).catch(err => {
+            getEditDetails({GUID:value}).then(res => {
+                 this.$nextTick(() => {
+                    this.modalForm.setFieldsValue(res)
+                    if(res.SELECT_AREA.length>0){
+                        // setTimeout(() => {
+                        //     this.expand([res.PROVINCES,res.SELECT_AREA],{})
+                        // },1000)
+                        this.modalTree.checkedKeys=res.SELECT_AREA;
+                    }
+                    this.tableData=res.BRANCHES_INFO;
+                    res.BRANCHES_INFO.forEach(item => {
+                        this.selectedRowKeys.push(item.CODE)
+                    })
+                })
+            }).catch(err => {
 
-            // })
+            })
         },
         // modal打开时默认选择
         getCheckboxProps(record){
@@ -486,14 +493,23 @@ export default {
                 this.modalTree.treeData=[];
                 this.modalTree.checkedKeys=[];
                 this.modalTree.treeData=[{
-                    GUID:'P0',
-                    NAME:'全国通用',
+                    key:'P0',
+                    title:'全国通用',
                     PARENT_GUID:'',
-                    CITY:[]
+                    isLeaf:false,
+                    children:[]
                 }]
                 for(let item in res){
-                    this.modalTree.treeData[0].CITY.push(res[item])
-
+                    res[item].key=res[item].GUID;
+                    res[item].title=res[item].NAME;
+                    res[item].isLeaf=false;
+                    res[item].CITY.map(function(item){
+                        item.key=item.GUID;
+                        item.title=item.NAME;
+                        item.isLeaf=true;
+                    })
+                    res[item].children=res[item].CITY;
+                    this.modalTree.treeData[0].children.push(res[item])
                 }
                 this.modalTree.treeData=[...this.modalTree.treeData]
             }).catch(err => {