add import func test view

src/config/router.config.js

@@ -87,6 +87,12 @@ export const asyncRouterMap = [
             component: () => import('@/views/list/TableInnerEditList'),
             meta: { title: '内联编辑表格', permission: [ 'table' ] }
           },
+          {
+            path: '/list/user-list',
+            name: 'UserList',
+            component: () => import('@/views/list/UserList'),
+            meta: { title: '用户列表', permission: [ 'table' ] }
+          },
           {
             path: '/list/role-list',
             name: 'RoleList',

src/views/list/UserList.vue

@@ -0,0 +1,264 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="角色ID">
+              <a-input placeholder="请输入"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <s-table
+      size="default"
+      :columns="columns"
+      :data="loadData"
+    >
+      <div
+        slot="expandedRowRender"
+        slot-scope="record"
+        style="margin: 0">
+        <a-row
+          :gutter="24"
+          :style="{ marginBottom: '12px' }">
+          <a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
+            <a-col :span="4">
+              <span>{{ role.permissionName }}：</span>
+            </a-col>
+            <a-col :span="20" v-if="role.actionEntitySet.length > 0">
+              <a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
+            </a-col>
+            <a-col :span="20" v-else>-</a-col>
+          </a-col>
+        </a-row>
+      </div>
+      <span slot="action" slot-scope="text, record">
+        <a @click="handleEdit(record)">编辑</a>
+        <a-divider type="vertical" />
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+
+    <a-modal
+      title="操作"
+      style="top: 20px;"
+      :width="800"
+      v-model="visible"
+      @ok="handleOk"
+    >
+      <a-form :autoFormCreate="(form)=>{this.form = form}">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='唯一识别码'
+          hasFeedback
+          validateStatus='success'
+        >
+          <a-input placeholder='唯一识别码' v-model="mdl.id" id='no' disabled="disabled" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='角色名称'
+          hasFeedback
+          validateStatus='success'
+        >
+          <a-input placeholder='起一个名字' v-model="mdl.name" id='role_name' />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='状态'
+          hasFeedback
+          validateStatus='warning'
+        >
+          <a-select v-model="mdl.status">
+            <a-select-option value='1'>正常</a-select-option>
+            <a-select-option value='2'>禁用</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='描述'
+          hasFeedback
+        >
+          <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id='describe'/>
+        </a-form-item>
+
+        <a-divider />
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label='拥有权限'
+          hasFeedback
+        >
+          <a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
+            <a-col :span="4">
+              {{ permission.permissionName }}：
+            </a-col>
+            <a-col :span="20">
+              <a-checkbox-group :options="permission.actionsOptions"/>
+            </a-col>
+          </a-row>
+
+        </a-form-item>
+
+      </a-form>
+    </a-modal>
+
+  </a-card>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+  import { getRoleList, getServiceList } from '@/api/manage'
+
+  export default {
+    name: "TableList",
+    components: {
+      STable
+    },
+    data () {
+      return {
+        description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
+
+        visible: false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        form: null,
+        mdl: {},
+
+        // 高级搜索 展开/关闭
+        advanced: false,
+        // 查询参数
+        queryParam: {},
+        // 表头
+        columns: [
+          {
+            title: '唯一识别码',
+            dataIndex: 'id'
+          },
+          {
+            title: '角色名称',
+            dataIndex: 'name',
+          },
+          {
+            title: '状态',
+            dataIndex: 'status'
+          },
+          {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            sorter: true
+          }, {
+            title: '操作',
+            width: '150px',
+            dataIndex: 'action',
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return getRoleList(parameter)
+            .then(res => {
+              return res.result
+            })
+        },
+
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    created () {
+      getServiceList().then(res => {
+        console.log('getServiceList.call()', res)
+      })
+
+      getRoleList().then(res => {
+        console.log('getRoleList.call()', res)
+      })
+    },
+    methods: {
+      handleEdit (record) {
+        this.mdl = Object.assign({}, record)
+
+        this.mdl.permissions.forEach(permission => {
+          permission.actionsOptions = permission.actionEntitySet.map(action => {
+            return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
+          })
+        })
+
+        this.visible = true
+      },
+      handleOk () {
+
+      },
+      onChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      },
+    },
+    watch: {
+      /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+    }
+  }
+</script>

src/views/user/Register.vue

@@ -11,9 +11,19 @@
 
       <a-form-item
         fieldDecoratorId="password"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }], validateTrigger: 'blur'}">
-
-        <a-input size="large" type="password" placeholder="至少6位密码，区分大小写"></a-input>
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordLevel }], validateTrigger: 'change'}">
+        <a-popover placement="right">
+          <template slot="content">
+            <div :style="{ width: '240px' }">
+              <div :class="['user-register', getPasswordLevelClass()]">强度：<span>低</span></div>
+              <a-progress :percent="30" :showInfo="false" strokeColor="#FF0000" />
+              <div style="margin-top: 10px;">
+                <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
+              </div>
+            </div>
+          </template>
+          <a-input size="large" type="password" placeholder="至少6位密码，区分大小写"></a-input>
+        </a-popover>
       </a-form-item>
 
       <a-form-item
@@ -87,12 +97,36 @@
         state: {
           time: 60,
           smsSendBtn: false,
+          passwordLevel: 0
         },
         registerBtn: false
       }
     },
     methods: {
 
+      handlePasswordLevel (rule, value, callback) {
+        let level = 0
+
+        // 判断这个字符串中有没有数字
+        if (/[0-9]/.test(value)) {
+          level++
+        }
+        // 判断字符串中有没有字母
+        if (/[a-zA-Z]/.test(value)) {
+          level++
+        }
+        // 判断字符串中有没有特殊符号
+        if (/[^0-9a-zA-Z_]/.test(value)) {
+          level++
+        }
+        this.state.passwordLevel = level
+        if (level >= 2) {
+          callback()
+        } else {
+          callback(new Error('密码强度不够'))
+        }
+      },
+
       handlePasswordCheck (rule, value, callback) {
         let password = this.form.getFieldValue('password')
         if (value && password && value.trim() !== password.trim()) {
@@ -109,6 +143,16 @@
         })
       },
 
+      getPasswordLevelClass () {
+        const c = {
+          0: 'error',
+          1: 'error',
+          2: 'warning',
+          3: 'success'
+        }
+        return c[this.state.passwordLevel]
+      },
+
       getCaptcha(e) {
         e.preventDefault()
         let that = this
@@ -154,10 +198,30 @@
         });
         this.registerBtn = false;
       },
+    },
+    watch: {
+      'state.passwordLevel' (val) {
+
+      }
     }
   }
 </script>
+<style lang="scss">
+  .user-register {
 
+    &.error {
+      color: #ff0000;
+    }
+
+    &.warning {
+      color: #ff7e05;
+    }
+
+    &.success {
+      color: #52c41a;
+    }
+  }
+</style>
 <style lang="scss" scoped>
   .user-layout-register {
 
@@ -166,6 +230,8 @@
       margin-bottom: 20px;
     }
 
+
+
     .getCaptcha {
       display: block;
       width: 100%;