zhuxinbo 5 yıl önce
ebeveyn
işleme
2787d75967

+ 6 - 14
babel.config.js

@@ -1,22 +1,14 @@
 module.exports = {
-    "presets": [["es2015", { "modules": false }]],
-    "plugins": [
-      [
-        "component",
-        {
-          "libraryName": "element-ui",
-          "styleLibraryName": "theme-chalk"
-        }
-      ]
+    presets: [
+      '@vue/app'
     ]
   }
 
 
 
 
-// {
-//   presets: [
-//     '@vue/app'
-//   ]
-// }
+
+
+
+
 

+ 1 - 0
package.json

@@ -63,6 +63,7 @@
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.7.7",
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-eslint": "^3.3.0",
     "@vue/cli-service": "^3.3.0",

+ 117 - 117
src/components/AvatarList/List.vue

@@ -1,118 +1,118 @@
-<!--
-<template>
-  <div :class="[prefixCls]">
-    <ul>
-      <slot></slot>
-      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
-
-
-      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
-        <avatar-item :size="size">
-          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
-        </avatar-item>
-      </template>
-    </ul>
-  </div>
-</template>
--->
-
-<script>
-  import Avatar from 'ant-design-vue/es/avatar'
-  import AvatarItem from './Item'
-  import {filterEmpty} from '@/components/_util/util'
-
-  export default {
-    AvatarItem,
-    name: "AvatarList",
-    components: {
-      Avatar,
-      AvatarItem
-    },
-    props: {
-      prefixCls: {
-        type: String,
-        default: 'ant-pro-avatar-list'
-      },
-      /**
-       * 头像大小 类型: large、small 、mini, default
-       * 默认值: default
-       */
-      size: {
-        type: [String, Number],
-        default: 'default'
-      },
-      /**
-       * 要显示的最大项目
-       */
-      maxLength: {
-        type: Number,
-        default: 0
-      },
-      /**
-       * 多余的项目风格
-       */
-      excessItemsStyle: {
-        type: Object,
-        default: () => {
-          return {
-            color: '#f56a00',
-            backgroundColor: '#fde3cf'
-          }
-        }
-      }
-    },
-    data() {
-      return {}
-    },
-    methods: {
-      getItems(items) {
-        const classString = {
-          [`${this.prefixCls}-item`]: true,
-          [`${this.size}`]: true
-        }
-
-        if (this.maxLength > 0) {
-          items = items.slice(0, this.maxLength)
-          items.push(( < Avatar
-          size = {this.size}
-          style = {this.excessItemsStyle} > {`+${this.maxLength}`
-        }<
-          /Avatar>))
-        }
-        const itemList = items.map((item) => (
-          < li
-      class
-        = {classString} > {item} < /li>
-      ))
-        return itemList
-      }
-    },
-    render() {
-      const {prefixCls, size} = this.$props
-      const classString = {
-        [`${prefixCls}`]: true,
-        [`${size}`]: true,
-      }
-      const items = filterEmpty(this.$slots.default)
-      const itemsDom = items && items.length ?
-    <
-      ul
-    class
-      = {`${prefixCls}-items`
-    }>
-      {
-        this.getItems(items)
-      }
-    <
-      /ul> : null
-
-      return (
-        < div
-    class
-      = {classString} >
-        {itemsDom}
-        < /div>
-    )
-    }
-  }
+<!--
+<template>
+  <div :class="[prefixCls]">
+    <ul>
+      <slot></slot>
+      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
+
+
+      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
+        <avatar-item :size="size">
+          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
+        </avatar-item>
+      </template>
+    </ul>
+  </div>
+</template>
+-->
+
+<script>
+  import Avatar from 'ant-design-vue/es/avatar'
+  import AvatarItem from './Item'
+  import {filterEmpty} from '@/components/_util/util'
+
+  export default {
+    AvatarItem,
+    name: "AvatarList",
+    components: {
+      Avatar,
+      AvatarItem
+    },
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-avatar-list'
+      },
+      /**
+       * 头像大小 类型: large、small 、mini, default
+       * 默认值: default
+       */
+      size: {
+        type: [String, Number],
+        default: 'default'
+      },
+      /**
+       * 要显示的最大项目
+       */
+      maxLength: {
+        type: Number,
+        default: 0
+      },
+      /**
+       * 多余的项目风格
+       */
+      excessItemsStyle: {
+        type: Object,
+        default: () => {
+          return {
+            color: '#f56a00',
+            backgroundColor: '#fde3cf'
+          }
+        }
+      }
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      getItems(items) {
+        const classString = {
+          [`${this.prefixCls}-item`]: true,
+          [`${this.size}`]: true
+        }
+
+        if (this.maxLength > 0) {
+          items = items.slice(0, this.maxLength)
+          items.push(( < Avatar
+          size = {this.size}
+          style = {this.excessItemsStyle} > {`+${this.maxLength}`
+        }<
+          /Avatar>))
+        }
+        const itemList = items.map((item) => (
+          < li
+      class
+        = {classString} > {item} < /li>
+      ))
+        return itemList
+      }
+    },
+    render() {
+      const {prefixCls, size} = this.$props
+      const classString = {
+        [`${prefixCls}`]: true,
+        [`${size}`]: true,
+      }
+      const items = filterEmpty(this.$slots.default)
+      const itemsDom = items && items.length ?
+    <
+      ul
+    class
+      = {`${prefixCls}-items`
+    }>
+      {
+        this.getItems(items)
+      }
+    <
+      /ul> : null
+
+      return (
+        < div
+    class
+      = {classString} >
+        {itemsDom}
+        < /div>
+    )
+    }
+  }
 </script>

+ 70 - 70
src/components/Ellipsis/Ellipsis.vue

@@ -1,71 +1,71 @@
-<script>
-  import Tooltip from 'ant-design-vue/es/tooltip'
-  import {cutStrByFullLength, getStrFullLength} from '@/components/_util/StringUtil'
-  /*
-    const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
-
-    const TooltipOverlayStyle = {
-      overflowWrap: 'break-word',
-      wordWrap: 'break-word',
-    };
-  */
-
-  export default {
-    name: 'Ellipsis',
-    components: {
-      Tooltip
-    },
-    props: {
-      prefixCls: {
-        type: String,
-        default: 'ant-pro-ellipsis'
-      },
-      tooltip: {
-        type: Boolean
-      },
-      length: {
-        type: Number,
-        required: true
-      },
-      lines: {
-        type: Number,
-        default: 1
-      },
-      fullWidthRecognition: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      getStrDom(str) {
-        return (
-          < span > {cutStrByFullLength(str, this.length
-      )
-        +'...'
-      }<
-        /span>
-      )
-      },
-      getTooltip(fullStr) {
-        return (
-          < Tooltip >
-          < template
-        slot = "title" > {fullStr} < /template>
-        {
-          this.getStrDom(fullStr)
-        }
-      <
-        /Tooltip>
-      )
-      }
-    },
-    render() {
-      const {tooltip, length} = this.$props
-      let str = this.$slots.default.map(vNode => vNode.text).join("")
-      const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
-      return (
-        strDom
-      )
-    }
-  }
+<script>
+  import Tooltip from 'ant-design-vue/es/tooltip'
+  import {cutStrByFullLength, getStrFullLength} from '@/components/_util/StringUtil'
+  /*
+    const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+    const TooltipOverlayStyle = {
+      overflowWrap: 'break-word',
+      wordWrap: 'break-word',
+    };
+  */
+
+  export default {
+    name: 'Ellipsis',
+    components: {
+      Tooltip
+    },
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-ellipsis'
+      },
+      tooltip: {
+        type: Boolean
+      },
+      length: {
+        type: Number,
+        required: true
+      },
+      lines: {
+        type: Number,
+        default: 1
+      },
+      fullWidthRecognition: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      getStrDom(str) {
+        return (
+          < span > {cutStrByFullLength(str, this.length
+      )
+        +'...'
+      }<
+        /span>
+      )
+      },
+      getTooltip(fullStr) {
+        return (
+          < Tooltip >
+          < template
+        slot = "title" > {fullStr} < /template>
+        {
+          this.getStrDom(fullStr)
+        }
+      <
+        /Tooltip>
+      )
+      }
+    },
+    render() {
+      const {tooltip, length} = this.$props
+      let str = this.$slots.default.map(vNode => vNode.text).join("")
+      const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
+      return (
+        strDom
+      )
+    }
+  }
 </script>

+ 233 - 233
src/components/menu/index.js

@@ -1,233 +1,233 @@
-import Menu from 'ant-design-vue/es/menu'
-import Icon from 'ant-design-vue/es/icon'
-
-const {Item, SubMenu} = Menu
-
-export default {
-  name: 'SMenu',
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
-    },
-    mode: {
-      type: String,
-      required: false,
-      default: 'inline'
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      openKeys: [],
-      selectedKeys: [],
-      cachedOpenKeys: []
-    }
-  },
-  computed: {
-    rootSubmenuKeys: vm => {
-      const keys = []
-      vm.menu.forEach(item => keys.push(item.path))
-      return keys
-    }
-  },
-  mounted() {
-    this.updateMenu()
-  },
-  watch: {
-    collapsed(val) {
-      if (val) {
-        this.cachedOpenKeys = this.openKeys.concat()
-        this.openKeys = []
-      } else {
-        this.openKeys = this.cachedOpenKeys
-      }
-    },
-    $route: function () {
-      this.updateMenu()
-    }
-  },
-  methods: {
-    // select menu item
-    onOpenChange(openKeys) {
-
-      // 在水平模式下时执行,并且不再执行后续
-      if (this.mode === 'horizontal') {
-        this.openKeys = openKeys
-        return
-      }
-      // 非水平模式时
-      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
-      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
-        this.openKeys = openKeys
-      } else {
-        this.openKeys = latestOpenKey ? [latestOpenKey] : []
-      }
-    },
-    updateMenu() {
-      const routes = this.$route.matched.concat()
-      const {hidden} = this.$route.meta
-      if (routes.length >= 3 && hidden) {
-        routes.pop()
-        this.selectedKeys = [routes[routes.length - 1].path]
-      } else {
-        this.selectedKeys = [routes.pop().path]
-      }
-      const openKeys = []
-      if (this.mode === 'inline') {
-        routes.forEach(item => {
-          openKeys.push(item.path)
-        })
-      }
-      //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-      if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) {
-        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
-      }
-      //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-    },
-
-    // render
-    renderItem(menu) {
-      if (!menu.hidden) {
-        return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
-      }
-      return null
-    },
-    renderMenuItem(menu) {
-      const target = menu.meta.target || null
-      const tag = target && 'a' || 'router-link'
-      let props = {to: {name: menu.name}}
-      if (menu.route && menu.route === '0') {
-        props = {to: {path: menu.path}}
-      }
-
-      const attrs = {href: menu.path, target: menu.meta.target}
-
-      if (menu.children && menu.alwaysShow) {
-        // 把有子菜单的 并且 父菜单是要隐藏子菜单的
-        // 都给子菜单增加一个 hidden 属性
-        // 用来给刷新页面时, selectedKeys 做控制用
-        menu.children.forEach(item => {
-          item.meta = Object.assign(item.meta, {hidden: true})
-        })
-      }
-
-      return (
-        < Item
-      {...
-        {
-          key: menu.path
-        }
-      }
-    >
-    <
-      tag
-      {...
-        {
-          props, attrs
-        }
-      }
-    >
-      {
-        this.renderIcon(menu.meta.icon)
-      }
-    <
-      span > {menu.meta.title} < /span>
-      < /tag>
-      < /Item>
-    )
-    },
-    renderSubMenu(menu) {
-      const itemArr = []
-      if (!menu.alwaysShow) {
-        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
-      }
-      return (
-        < SubMenu
-      {...
-        {
-          key: menu.path
-        }
-      }
-    >
-    <
-      span
-      slot = "title" >
-        {this.renderIcon(menu.meta.icon)}
-        < span > {menu.meta.title} < /span>
-        < /span>
-      {
-        itemArr
-      }
-    <
-      /SubMenu>
-    )
-    },
-    renderIcon(icon) {
-      if (icon === 'none' || icon === undefined) {
-        return null
-      }
-      const props = {}
-      typeof (icon) === 'object' ? props.component = icon : props.type = icon
-      return (
-        < Icon
-      {...
-        {
-          props
-        }
-      }
-      />
-    )
-    }
-  },
-
-  render() {
-    const {mode, theme, menu} = this
-    const props = {
-      mode: mode,
-      theme: theme,
-      openKeys: this.openKeys
-    }
-    const on = {
-      select: obj => {
-        this.selectedKeys = obj.selectedKeys
-        this.$emit('select', obj)
-      },
-      openChange: this.onOpenChange
-    }
-
-    const menuTree = menu.map(item => {
-      if (item.hidden) {
-        return null
-      }
-      return this.renderItem(item)
-    })
-    // {...{ props, on: on }}
-    return (
-      < Menu
-    vModel = {this.selectedKeys}
-    {...
-      {
-        props, on
-      :
-        on
-      }
-    }
-  >
-    {
-      menuTree
-    }
-  <
-    /Menu>
-  )
-  }
-}
+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+
+const {Item, SubMenu} = Menu
+
+export default {
+  name: 'SMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: []
+    }
+  },
+  computed: {
+    rootSubmenuKeys: vm => {
+      const keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  mounted() {
+    this.updateMenu()
+  },
+  watch: {
+    collapsed(val) {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys.concat()
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    },
+    $route: function () {
+      this.updateMenu()
+    }
+  },
+  methods: {
+    // select menu item
+    onOpenChange(openKeys) {
+
+      // 在水平模式下时执行,并且不再执行后续
+      if (this.mode === 'horizontal') {
+        this.openKeys = openKeys
+        return
+      }
+      // 非水平模式时
+      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
+      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+    updateMenu() {
+      const routes = this.$route.matched.concat()
+      const {hidden} = this.$route.meta
+      if (routes.length >= 3 && hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[routes.length - 1].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+      const openKeys = []
+      if (this.mode === 'inline') {
+        routes.forEach(item => {
+          openKeys.push(item.path)
+        })
+      }
+      //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+      if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) {
+        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+      }
+      //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+    },
+
+    // render
+    renderItem(menu) {
+      if (!menu.hidden) {
+        return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+      }
+      return null
+    },
+    renderMenuItem(menu) {
+      const target = menu.meta.target || null
+      const tag = target && 'a' || 'router-link'
+      let props = {to: {name: menu.name}}
+      if (menu.route && menu.route === '0') {
+        props = {to: {path: menu.path}}
+      }
+
+      const attrs = {href: menu.path, target: menu.meta.target}
+
+      if (menu.children && menu.alwaysShow) {
+        // 把有子菜单的 并且 父菜单是要隐藏子菜单的
+        // 都给子菜单增加一个 hidden 属性
+        // 用来给刷新页面时, selectedKeys 做控制用
+        menu.children.forEach(item => {
+          item.meta = Object.assign(item.meta, {hidden: true})
+        })
+      }
+
+      return (
+        < Item
+      {...
+        {
+          key: menu.path
+        }
+      }
+    >
+    <
+      tag
+      {...
+        {
+          props, attrs
+        }
+      }
+    >
+      {
+        this.renderIcon(menu.meta.icon)
+      }
+    <
+      span > {menu.meta.title} < /span>
+      < /tag>
+      < /Item>
+    )
+    },
+    renderSubMenu(menu) {
+      const itemArr = []
+      if (!menu.alwaysShow) {
+        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
+      }
+      return (
+        < SubMenu
+      {...
+        {
+          key: menu.path
+        }
+      }
+    >
+    <
+      span
+      slot = "title" >
+        {this.renderIcon(menu.meta.icon)}
+        < span > {menu.meta.title} < /span>
+        < /span>
+      {
+        itemArr
+      }
+    <
+      /SubMenu>
+    )
+    },
+    renderIcon(icon) {
+      if (icon === 'none' || icon === undefined) {
+        return null
+      }
+      const props = {}
+      typeof (icon) === 'object' ? props.component = icon : props.type = icon
+      return (
+        < Icon
+      {...
+        {
+          props
+        }
+      }
+      />
+    )
+    }
+  },
+
+  render() {
+    const {mode, theme, menu} = this
+    const props = {
+      mode: mode,
+      theme: theme,
+      openKeys: this.openKeys
+    }
+    const on = {
+      select: obj => {
+        this.selectedKeys = obj.selectedKeys
+        this.$emit('select', obj)
+      },
+      openChange: this.onOpenChange
+    }
+
+    const menuTree = menu.map(item => {
+      if (item.hidden) {
+        return null
+      }
+      return this.renderItem(item)
+    })
+    // {...{ props, on: on }}
+    return (
+      < Menu
+    vModel = {this.selectedKeys}
+    {...
+      {
+        props, on
+      :
+        on
+      }
+    }
+  >
+    {
+      menuTree
+    }
+  <
+    /Menu>
+  )
+  }
+}

+ 159 - 159
src/components/tools/DetailList.vue

@@ -1,160 +1,160 @@
-<template>
-  <div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
-    <div v-if="title" class="title">{{ title }}</div>
-    <a-row>
-      <slot></slot>
-    </a-row>
-  </div>
-</template>
-
-<script>
-  import {Col} from 'ant-design-vue/es/grid/'
-
-  const Item = {
-    name: 'DetailListItem',
-    props: {
-      term: {
-        type: String,
-        default: '',
-        required: false
-      },
-    },
-    inject: {
-      col: {
-        type: Number
-      }
-    },
-    render() {
-      return (
-        < Col
-      {...
-        {
-          props: responsive[this.col]
-        }
-      }
-    >
-    <
-      div
-    class
-      = "term" > {this.$props.term} < /div>
-        < div
-    class
-      = "content" > {this.$slots.default} < /div>
-        < /Col>
-    )
-    }
-  }
-
-  const responsive = {
-    1: {xs: 24},
-    2: {xs: 24, sm: 12},
-    3: {xs: 24, sm: 12, md: 8},
-    4: {xs: 24, sm: 12, md: 6}
-  }
-
-  export default {
-    name: "DetailList",
-    Item: Item,
-    components: {
-      Col
-    },
-    props: {
-      title: {
-        type: String,
-        default: '',
-        required: false
-      },
-      col: {
-        type: Number,
-        required: false,
-        default: 3
-      },
-      size: {
-        type: String,
-        required: false,
-        default: 'large'
-      },
-      layout: {
-        type: String,
-        required: false,
-        default: 'horizontal'
-      }
-    },
-    provide() {
-      return {
-        col: this.col > 4 ? 4 : this.col
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-
-  .detail-list {
-
-    .title {
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      font-weight: 500;
-      margin-bottom: 16px;
-    }
-
-    .term {
-      color: rgba(0, 0, 0, .85);
-      display: table-cell;
-      line-height: 20px;
-      margin-right: 8px;
-      padding-bottom: 16px;
-      white-space: nowrap;
-
-      &:after {
-        content: ":";
-        margin: 0 8px 0 2px;
-        position: relative;
-        top: -.5px;
-      }
-    }
-
-    .content {
-      color: rgba(0, 0, 0, .65);
-      display: table-cell;
-      line-height: 22px;
-      padding-bottom: 16px;
-      width: 100%;
-    }
-
-    &.small {
-
-      .title {
-        font-size: 14px;
-        color: rgba(0, 0, 0, .65);
-        font-weight: normal;
-        margin-bottom: 12px;
-      }
-
-      .term, .content {
-        padding-bottom: 8px;
-      }
-    }
-
-    &.large {
-      .term, .content {
-        padding-bottom: 16px;
-      }
-
-      .title {
-        font-size: 16px;
-      }
-    }
-
-    &.vertical {
-      .term {
-        padding-bottom: 8px;
-      }
-
-      .term, .content {
-        display: block;
-      }
-    }
-  }
+<template>
+  <div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+  import {Col} from 'ant-design-vue/es/grid/'
+
+  const Item = {
+    name: 'DetailListItem',
+    props: {
+      term: {
+        type: String,
+        default: '',
+        required: false
+      },
+    },
+    inject: {
+      col: {
+        type: Number
+      }
+    },
+    render() {
+      return (
+        < Col
+      {...
+        {
+          props: responsive[this.col]
+        }
+      }
+    >
+    <
+      div
+    class
+      = "term" > {this.$props.term} < /div>
+        < div
+    class
+      = "content" > {this.$slots.default} < /div>
+        < /Col>
+    )
+    }
+  }
+
+  const responsive = {
+    1: {xs: 24},
+    2: {xs: 24, sm: 12},
+    3: {xs: 24, sm: 12, md: 8},
+    4: {xs: 24, sm: 12, md: 6}
+  }
+
+  export default {
+    name: "DetailList",
+    Item: Item,
+    components: {
+      Col
+    },
+    props: {
+      title: {
+        type: String,
+        default: '',
+        required: false
+      },
+      col: {
+        type: Number,
+        required: false,
+        default: 3
+      },
+      size: {
+        type: String,
+        required: false,
+        default: 'large'
+      },
+      layout: {
+        type: String,
+        required: false,
+        default: 'horizontal'
+      }
+    },
+    provide() {
+      return {
+        col: this.col > 4 ? 4 : this.col
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+  .detail-list {
+
+    .title {
+      color: rgba(0, 0, 0, .85);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    .term {
+      color: rgba(0, 0, 0, .85);
+      display: table-cell;
+      line-height: 20px;
+      margin-right: 8px;
+      padding-bottom: 16px;
+      white-space: nowrap;
+
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -.5px;
+      }
+    }
+
+    .content {
+      color: rgba(0, 0, 0, .65);
+      display: table-cell;
+      line-height: 22px;
+      padding-bottom: 16px;
+      width: 100%;
+    }
+
+    &.small {
+
+      .title {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+
+      .term, .content {
+        padding-bottom: 8px;
+      }
+    }
+
+    &.large {
+      .term, .content {
+        padding-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+      }
+    }
+
+    &.vertical {
+      .term {
+        padding-bottom: 8px;
+      }
+
+      .term, .content {
+        display: block;
+      }
+    }
+  }
 </style>

+ 2 - 3
src/main.js

@@ -48,11 +48,10 @@ import JeecgComponents from '@/components/jeecg/index'
 // import iView from 'iview'
 import '!style-loader!css-loader!less-loader!./theme/index.less'
 
+import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import { Cascader,CascaderPanel } from 'element-ui';
 
-Vue.use(Cascader)
-Vue.use(CascaderPanel)
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 // Vue.use(iView)

+ 87 - 87
src/views/account/settings/Custom.vue

@@ -1,88 +1,88 @@
-<script>
-  import {colorList} from '@/components/tools/setting'
-  import ASwitch from 'ant-design-vue/es/switch'
-  import AList from "ant-design-vue/es/list"
-  import AListItem from "ant-design-vue/es/list/Item"
-  import {mixin} from '@/utils/mixin.js'
-
-  const Meta = AListItem.Meta
-
-  export default {
-    components: {
-      AListItem,
-      AList,
-      ASwitch,
-      Meta
-    },
-    mixins: [mixin],
-    data() {
-      return {}
-    },
-    filters: {
-      themeFilter(theme) {
-        const themeMap = {
-          'dark': '暗色',
-          'light': '白色'
-        }
-        return themeMap[theme]
-      },
-    },
-    methods: {
-      colorFilter(color) {
-        const c = colorList.filter(o => o.color === color)[0]
-        return c && c.key
-      },
-
-      onChange(checked) {
-        if (checked) {
-          this.$store.dispatch('ToggleTheme', 'dark')
-        } else {
-          this.$store.dispatch('ToggleTheme', 'light')
-        }
-      }
-    },
-    render() {
-      return (
-        < AList
-      itemLayout = "horizontal" >
-        < AListItem >
-        < Meta >
-        < a
-      slot = "title" > 风格配色 < /a>
-        < span
-      slot = "description" >
-        整体风格配色设置
-        < /span>
-        < /Meta>
-        < div
-      slot = "actions" >
-        < ASwitch
-      checkedChildren = "暗色"
-      unCheckedChildren = "白色"
-      defaultChecked = {this.navTheme === 'dark' && true || false}
-      onChange = {this.onChange}
-      />
-      < /div>
-      < /AListItem>
-      < AListItem >
-      < Meta >
-      < a
-      slot = "title" > 主题色 < /a>
-        < span
-      slot = "description" >
-        页面风格配色: <
-      a
-      domPropsInnerHTML = {this.colorFilter(this.primaryColor)}
-      />
-      < /span>
-      < /Meta>
-      < /AListItem>
-      < /AList>
-    )
-    }
-  }
-</script>
-
-<style scoped>
-
+<script>
+  import {colorList} from '@/components/tools/setting'
+  import ASwitch from 'ant-design-vue/es/switch'
+  import AList from "ant-design-vue/es/list"
+  import AListItem from "ant-design-vue/es/list/Item"
+  import {mixin} from '@/utils/mixin.js'
+
+  const Meta = AListItem.Meta
+
+  export default {
+    components: {
+      AListItem,
+      AList,
+      ASwitch,
+      Meta
+    },
+    mixins: [mixin],
+    data() {
+      return {}
+    },
+    filters: {
+      themeFilter(theme) {
+        const themeMap = {
+          'dark': '暗色',
+          'light': '白色'
+        }
+        return themeMap[theme]
+      },
+    },
+    methods: {
+      colorFilter(color) {
+        const c = colorList.filter(o => o.color === color)[0]
+        return c && c.key
+      },
+
+      onChange(checked) {
+        if (checked) {
+          this.$store.dispatch('ToggleTheme', 'dark')
+        } else {
+          this.$store.dispatch('ToggleTheme', 'light')
+        }
+      }
+    },
+    render() {
+      return (
+        < AList
+      itemLayout = "horizontal" >
+        < AListItem >
+        < Meta >
+        < a
+      slot = "title" > 风格配色 < /a>
+        < span
+      slot = "description" >
+        整体风格配色设置
+        < /span>
+        < /Meta>
+        < div
+      slot = "actions" >
+        < ASwitch
+      checkedChildren = "暗色"
+      unCheckedChildren = "白色"
+      defaultChecked = {this.navTheme === 'dark' && true || false}
+      onChange = {this.onChange}
+      />
+      < /div>
+      < /AListItem>
+      < AListItem >
+      < Meta >
+      < a
+      slot = "title" > 主题色 < /a>
+        < span
+      slot = "description" >
+        页面风格配色: <
+      a
+      domPropsInnerHTML = {this.colorFilter(this.primaryColor)}
+      />
+      < /span>
+      < /Meta>
+      < /AListItem>
+      < /AList>
+    )
+    }
+  }
+</script>
+
+<style scoped>
+
 </style>