Merge branch 'master' of https://github.com/sendya/ant-design-pro-vue

Author: hzsrc

package-lock.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.1",
-    "ant-design-vue": "~1.3.8",
-    "axios": "^0.18.0",
+    "ant-design-vue": "~1.3.9",
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",

package.json

@@ -4,6 +4,7 @@
     trigger="click"
     placement="bottomRight"
     overlayClassName="header-notice-wrapper"
+    :getPopupContainer="() => $refs.noticeRef.parentElement"
     :autoAdjustOverflow="true"
     :arrowPointAtCenter="true"
     :overlayStyle="{ width: '300px', top: '50px' }"
@@ -39,7 +40,7 @@
         </a-tabs>
       </a-spin>
     </template>
-    <span @click="fetchNotice" class="header-notice">
+    <span @click="fetchNotice" class="header-notice" ref="noticeRef">
       <a-badge count="12">
         <a-icon style="font-size: 16px; padding: 4px" type="bell" />
       </a-badge>

src/components/NoticeIcon/NoticeIcon.vue

@@ -195,10 +195,7 @@ export default {
     setTimeout(() => {
       vm.visible = false
     }, 16)
-    // 当主题色不是默认色时，才进行主题编译
-    if (this.primaryColor !== config.primaryColor) {
-      updateTheme(this.primaryColor)
-    }
+    updateTheme(this.primaryColor)
     if (this.colorWeak !== config.colorWeak) {
       updateColorWeak(this.colorWeak)
     }

src/components/SettingDrawer/SettingDrawer.vue

@@ -109,7 +109,8 @@ export default {
       current: localPageNum,
       pageSize: this.pageSize,
       showSizeChanger: this.showSizeChanger
-    })
+    }) || false
+    console.log('this.localPagination', this.localPagination)
     this.needTotalList = this.initTotalList(this.columns)
     this.loadData()
   },
@@ -135,9 +136,9 @@ export default {
       this.localLoading = true
       const parameter = Object.assign({
         pageNo: (pagination && pagination.current) ||
-            this.localPagination.current || this.pageNum,
+          this.showPagination && this.localPagination.current || this.pageNum,
         pageSize: (pagination && pagination.pageSize) ||
-            this.localPagination.pageSize || this.pageSize
+          this.showPagination && this.localPagination.pageSize || this.pageSize
       },
       (sorter && sorter.field && {
         sortField: sorter.field
@@ -148,29 +149,36 @@ export default {
         ...filters
       }
       )
+      console.log('parameter', parameter)
       const result = this.data(parameter)
       // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
       // eslint-disable-next-line
       if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
         result.then(r => {
-          this.localPagination = Object.assign({}, this.localPagination, {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
             current: r.pageNo, // 返回结果中的当前分页数
             total: r.totalCount, // 返回结果中的总记录数
             showSizeChanger: this.showSizeChanger,
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
-          })
+          }) || false
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-          if (r.data.length === 0 && this.localPagination.current > 1) {
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
             this.localPagination.current--
             this.loadData()
             return
           }
 
-          // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
           // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
-
-          (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination.hideOnSinglePage = true)
+          try {
+            if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          console.log('loadData -> this.localPagination', this.localPagination)
           this.localDataSource = r.data // 返回结果中的数组数据
           this.localLoading = false
         })
@@ -272,7 +280,9 @@ export default {
       if (k === 'rowSelection') {
         if (showAlert && this.rowSelection) {
           // 如果需要使用alert，则重新绑定 rowSelection 事件
+          console.log('this.rowSelection', this.rowSelection)
           props[k] = {
+            ...this.rowSelection,
             selectedRows: this.selectedRows,
             selectedRowKeys: this.selectedRowKeys,
             onChange: (selectedRowKeys, selectedRows) => {

src/components/Table/index.js

@@ -1,6 +1,6 @@
 /**
  * 项目默认配置项
- * primaryColor - 默认主题色
+ * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
  * navTheme - sidebar theme ['dark', 'light'] 两种主题
  * colorWeak - 色盲模式
  * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
@@ -14,7 +14,7 @@
  */
 
 export default {
-  primaryColor: '#1890FF', // primary color of ant design
+  primaryColor: '#52C41A', // primary color of ant design
   navTheme: 'dark', // theme for nav menu
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu

src/config/defaultSettings.js

@@ -6,7 +6,7 @@
           <a-menu
             :mode="device == 'mobile' ? 'horizontal' : 'inline'"
             :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
-            :defaultSelectedKeys="defaultSelectedKeys"
+            :selectedKeys="selectedKeys"
             type="inner"
             @openChange="onOpenChange"
           >
@@ -64,7 +64,7 @@ export default {
       mode: 'inline',
 
       openKeys: [],
-      defaultSelectedKeys: [],
+      selectedKeys: [],
 
       // cropper
       preview: {},
@@ -96,7 +96,12 @@ export default {
     },
     updateMenu () {
       const routes = this.$route.matched.concat()
-      this.defaultSelectedKeys = [ routes.pop().path ]
+      this.selectedKeys = [ routes.pop().path ]
+    }
+  },
+  watch: {
+    '$route' (val) {
+      this.updateMenu()
     }
   }
 }

src/views/account/settings/Index.vue

@@ -84,13 +84,17 @@
       :data="loadData"
       :alert="options.alert"
       :rowSelection="options.rowSelection"
+      showPagination="auto"
     >
       <span slot="serial" slot-scope="text, record, index">
         {{ index + 1 }}
       </span>
       <span slot="status" slot-scope="text">
         <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
       </span>
+      <span slot="description" slot-scope="text">
+        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+      </span>
 
       <span slot="action" slot-scope="text, record">
         <template>
@@ -107,7 +111,7 @@
 
 <script>
 import moment from 'moment'
-import { STable } from '@/components'
+import { STable, Ellipsis } from '@/components'
 import StepByStepModal from './modules/StepByStepModal'
 import CreateForm from './modules/CreateForm'
 import { getRoleList, getServiceList } from '@/api/manage'
@@ -135,6 +139,7 @@ export default {
   name: 'TableList',
   components: {
     STable,
+    Ellipsis,
     CreateForm,
     StepByStepModal
   },
@@ -157,7 +162,8 @@ export default {
         },
         {
           title: '描述',
-          dataIndex: 'description'
+          dataIndex: 'description',
+          scopedSlots: { customRender: 'description' }
         },
         {
           title: '服务调用次数',
@@ -224,7 +230,13 @@ export default {
           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
           rowSelection: {
             selectedRowKeys: this.selectedRowKeys,
-            onChange: this.onSelectChange
+            onChange: this.onSelectChange,
+            getCheckboxProps: record => ({
+              props: {
+                disabled: record.no === 'No 2', // Column configuration not to be checked
+                name: record.no
+              }
+            })
           }
         }
         this.optionAlertShow = true

src/views/list/TableList.vue

@@ -11,7 +11,11 @@
         ></a-input>
       </a-form-item>
 
-      <a-popover placement="rightTop" trigger="click" :visible="state.passwordLevelChecked">
+      <a-popover
+        placement="rightTop"
+        :trigger="['focus']"
+        :getPopupContainer="(trigger) => trigger.parentElement"
+        v-model="state.passwordLevelChecked">
         <template slot="content">
           <div :style="{ width: '240px' }" >
             <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
@@ -148,7 +152,6 @@ export default {
     }
   },
   methods: {
-
     handlePasswordLevel (rule, value, callback) {
       let level = 0
 
@@ -208,9 +211,10 @@ export default {
     },
 
     handleSubmit () {
-      const { form: { validateFields }, $router } = this
+      const { form: { validateFields }, state, $router } = this
       validateFields({ force: true }, (err, values) => {
         if (!err) {
+          state.passwordLevelChecked = false
           $router.push({ name: 'registerResult', params: { ...values } })
         }
       })

src/views/user/Register.vue

@@ -9,25 +9,12 @@ function resolve (dir) {
 
 // vue.config.js
 module.exports = {
-  /*
-    Vue-cli3:
-    Crashed when using Webpack `import()` #2463
-    https://github.com/vuejs/vue-cli/issues/2463
-
-   */
-  /*
-  pages: {
-    index: {
-      entry: 'src/main.js',
-      chunks: ['chunk-vendors', 'chunk-common', 'index']
-    }
-  },
-  */
   configureWebpack: {
     plugins: [
       // Ignore all locale files of moment.js
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // 生成仅包含颜色的替换样式（主题色等）
+      // TODO 需要增加根据环境不开启主题需求
       new ThemeColorReplacer({
         fileName: 'css/theme-colors-[contenthash:8].css',
         matchColors: getAntdSerials('#1890ff'), // 主色系列
@@ -38,8 +25,13 @@ module.exports = {
               return ':not(.ant-calendar-selected-date)' + selector
             case '.ant-btn:focus,.ant-btn:hover':
               return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'
+            case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+              return null
             case '.ant-btn.active,.ant-btn:active':
               return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
+            case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
+            case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
+              return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
             default :
               return selector
           }