Skip to content

A
ant-design-pro-vue
Unverified Commit 862f9369 by Anan Yang Committed by GitHub
Options

Merge pull request #31 from sendya/feature/support-antdv-1.2.1 

Feature/support antd-vue 1.2.2
parents 6f39b55d 37002977
Showing with 227 additions and 176 deletions
package.json
......@@ -9,7 +9,7 @@
},
"dependencies": {
"@antv/data-set": "^0.10.1",
"ant-design-vue": "^1.1.10",
"ant-design-vue": "~1.2.2",
"axios": "^0.18.0",
"dayjs": "^1.7.5",
"enquire.js": "^2.1.6",
......
src/App.vue
......@@ -8,15 +8,18 @@
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import { version } from 'ant-design-vue'
export default {
data () {
return {
locale: zhCN,
version
}
},
created () {
const that = this
console.log('use Ant-Design Of Vue:', version)
enquireScreen(deviceType => {
// tablet
if (deviceType === 0) {
......
src/components/menu/SideMenu.vue
......@@ -10,8 +10,8 @@
:collapsed="collapsed"
:menu="menus"
:theme="theme"
@select="onSelect"
:mode="mode"
@select="onSelect"
style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
......
src/components/menu/index.js
......@@ -46,7 +46,7 @@ export default {
watch: {
collapsed(val) {
if (val) {
this.cachedOpenKeys = this.openKeys
this.cachedOpenKeys = this.openKeys.concat()
this.openKeys = []
} else {
this.openKeys = this.cachedOpenKeys
......@@ -107,6 +107,7 @@ export default {
},
updateMenu() {
const routes = this.$route.matched.concat()
if (routes.length >= 4 && this.$route.meta.hidden) {
routes.pop()
this.selectedKeys = [routes[2].path]
......
src/components/page/GlobalHeader.vue
......@@ -6,12 +6,12 @@
v-if="device==='mobile'"
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click.native="toggle"></a-icon>
@click="toggle"></a-icon>
<a-icon
v-else
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click.native="toggle"/>
@click="toggle"/>
<user-menu></user-menu>
</div>
......@@ -29,7 +29,7 @@
v-else
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click.native="toggle"></a-icon>
@click="toggle"></a-icon>
</div>
<user-menu class="header-index-right"></user-menu>
</div>
......
src/components/page/GlobalLayout.vue
......@@ -137,7 +137,7 @@
}
}
.layout {
.layout.ant-layout {
min-height: 100vh;
overflow-x: hidden;
......
src/views/account/settings/AvatarModal.vue
<template>
<a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800">
<a-modal
title="修改头像"
:visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading"
:width="800"
@cancel="cancelHandel">
<a-row>
<a-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
......
src/views/list/TableList.vue
......@@ -49,8 +49,8 @@
</template>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
<a-button type="primary" @click="$refs.table.refresh()">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
......
src/views/result/Result.vue
<template>
<div class="result">
<div>
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
<a-icon :class="{ 'icon': true, 'success': isSuccess, 'error': !isSuccess }" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
</div>
<div class="title" v-if="title">{{ title }}</div>
<div class="description" v-if="description">{{ description }}</div>
......@@ -17,7 +17,6 @@
<script>
export default {
name: 'Result',
// 'isSuccess', 'title', 'description'
props: {
isSuccess: {
type: Boolean,
......
src/views/role/RoleList.vue
<template>
<a-card :bordered="false" :style="{ height: '100%' }">
<a-row :gutter="24">
<a-col :md="4">
<a-list itemLayout="vertical" :dataSource="roles">
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
<a-list-item-meta :style="{ marginBottom: '0' }">
<span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
<a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-col>
<a-col :md="20">
<div style="max-width: 800px">
<a-divider v-if="isMobile()" />
<div v-if="mdl.id">
<h3>角色：{{ mdl.name }}</h3>
</div>
<a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
<a-form-item label="唯一键">
<a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
</a-form-item>
<a-form-item label="角色名称">
<a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item>
<a-form-item label="状态">
<a-select v-decorator="[ 'status', {rules: []} ]">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="2">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="备注说明">
<a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item>
<a-form-item label="拥有权限">
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
<a-col :xl="4" :lg="24">
{{ permission.name }}：
</a-col>
<a-col :xl="20" :lg="24">
<a-checkbox
v-if="permission.actionsOptions.length > 0"
:indeterminate="permission.indeterminate"
:checked="permission.checkedAll"
@change="onChangeCheckAll($event, permission)">
全选
</a-checkbox>
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
</a-col>
</a-row>
</a-form-item>
</a-form>
</div>
</a-col>
</a-row>
</a-card>
</template>
<script>
import { getRoleList, getPermissions } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'
export default {
name: 'RoleList',
mixins: [mixinDevice],
components: {},
data () {
return {
form: this.$form.createForm(this),
mdl: {},
roles: [],
permissions: []
}
},
created () {
getRoleList().then((res) => {
this.roles = res.result.data
this.roles.push({
id: '-1',
name: '新增角色',
describe: '新增一个角色'
})
console.log('this.roles', this.roles)
})
this.loadPermissions()
},
methods: {
callback (val) {
console.log(val)
},
add () {
this.edit({ id: 0 })
},
edit (record) {
this.mdl = Object.assign({}, record)
// 有权限表，处理勾选
if (this.mdl.permissions && this.permissions) {
// 先处理要勾选的权限结构
const permissionsAction = {}
this.mdl.permissions.forEach(permission => {
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
})
// 把权限表遍历一遍，设定要勾选的权限 action
this.permissions.forEach(permission => {
permission.selected = permissionsAction[permission.id]
})
}
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
})
console.log('this.mdl', this.mdl)
},
onChangeCheck (permission) {
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
},
onChangeCheckAll (e, permission) {
Object.assign(permission, {
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
indeterminate: false,
checkedAll: e.target.checked
})
},
loadPermissions () {
getPermissions().then(res => {
const result = res.result
this.permissions = result.map(permission => {
const options = actionToObject(permission.actionData)
permission.checkedAll = false
permission.selected = []
permission.indeterminate = false
permission.actionsOptions = options.map(option => {
return {
label: option.describe,
value: option.action
}
})
return permission
})
})
}
},
}
</script>
<style scoped>
<template>
<a-card :bordered="false" :style="{ height: '100%' }">
<a-row :gutter="24">
<a-col :md="4">
<a-list itemLayout="vertical" :dataSource="roles">
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
<a-list-item-meta :style="{ marginBottom: '0' }">
<span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
<a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-col>
<a-col :md="20">
<div style="max-width: 800px">
<a-divider v-if="isMobile()" />
<div v-if="mdl.id">
<h3>角色：{{ mdl.name }}</h3>
</div>
<a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
<a-form-item label="唯一键">
<a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
</a-form-item>
<a-form-item label="角色名称">
<a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item>
<a-form-item label="状态">
<a-select v-decorator="[ 'status', {rules: []} ]">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="2">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="备注说明">
<a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item>
<a-form-item label="拥有权限">
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
<a-col :xl="4" :lg="24">
{{ permission.name }}：
</a-col>
<a-col :xl="20" :lg="24">
<a-checkbox
v-if="permission.actionsOptions.length > 0"
:indeterminate="permission.indeterminate"
:checked="permission.checkedAll"
@change="onChangeCheckAll($event, permission)">
全选
</a-checkbox>
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
</a-col>
</a-row>
</a-form-item>
</a-form>
</div>
</a-col>
</a-row>
</a-card>
</template>
<script>
import { getRoleList, getPermissions } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'
export default {
name: 'RoleList',
mixins: [mixinDevice],
components: {},
data () {
return {
form: this.$form.createForm(this),
mdl: {},
roles: [],
permissions: []
}
},
created () {
getRoleList().then((res) => {
this.roles = res.result.data
this.roles.push({
id: '-1',
name: '新增角色',
describe: '新增一个角色'
})
console.log('this.roles', this.roles)
})
this.loadPermissions()
},
methods: {
callback (val) {
console.log(val)
},
add () {
this.edit({ id: 0 })
},
edit (record) {
this.mdl = Object.assign({}, record)
// 有权限表，处理勾选
if (this.mdl.permissions && this.permissions) {
// 先处理要勾选的权限结构
const permissionsAction = {}
this.mdl.permissions.forEach(permission => {
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
})
console.log('permissionsAction', permissionsAction)
// 把权限表遍历一遍，设定要勾选的权限 action
this.permissions.forEach(permission => {
const selected = permissionsAction[permission.id]
permission.selected = selected || []
})
console.log('this.permissions', this.permissions)
}
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
})
console.log('this.mdl', this.mdl)
},
onChangeCheck (permission) {
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
},
onChangeCheckAll (e, permission) {
console.log('permission:', permission)
Object.assign(permission, {
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
indeterminate: false,
checkedAll: e.target.checked
})
},
loadPermissions () {
getPermissions().then(res => {
const result = res.result
this.permissions = result.map(permission => {
const options = actionToObject(permission.actionData)
permission.checkedAll = false
permission.selected = []
permission.indeterminate = false
permission.actionsOptions = options.map(option => {
return {
label: option.describe,
value: option.action
}
})
return permission
})
})
}
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
yarn.lock
......@@ -2,6 +2,19 @@
# yarn lockfile v1
"@ant-design/icons-vue@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@ant-design/icons-vue/-/icons-vue-1.0.1.tgz#343579219c04190831c9ca3826aec7361bb8b4d4"
integrity sha512-WRlfa3t9/e2wwVw9FPRgJ/pan4Ttzd+JvgounFsXdpuyDm0q6djAwhjj7W/ZxWWU3XkArbcaXTMSslnn25804w==
dependencies:
ant-design-palettes "^1.1.3"
babel-runtime "^6.26.0"
"@ant-design/icons@^1.1.15":
version "1.1.16"
resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-1.1.16.tgz#ac6426216934e3f4bc108f2f48f92ed66789235e"
integrity sha512-0zNVP5JYBJkfMi9HotN6QBQjF3SFmUlumJNJXZIH+pZWp/5EbrCczzlG3YTmBWoyRHAsuOGIjSFIy8v/76DTPg==
"@antv/adjust@~0.1.0":
version "0.1.0"
resolved "http://registry.npm.taobao.org/@antv/adjust/download/@antv/adjust-0.1.0.tgz#c4bce8ba0aef7cd5b3bf271f75f434c07bd215a0"
......@@ -1366,11 +1379,20 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
dependencies:
color-convert "^1.9.0"
ant-design-vue@^1.1.10:
version "1.1.10"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.10.tgz#b9ebcbab6dc72e0576920f8dc3fe7498e9d4bf61"
integrity sha512-NJefmFr1WZO6HQVtENDyIquTYMx+3NLKgQdb0PY/U1+VYfnCw21TBl3eOLJTFDC7YKamnCH3pz0Ok0OKr7IVfw==
ant-design-palettes@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/ant-design-palettes/-/ant-design-palettes-1.1.3.tgz#84119b1a4d86363adc52a38d587e65336a0a27dd"
integrity sha512-UpkkTp8egEN21KZNvY7sTcabLlkHvLvS71EVPk4CYi77Z9AaGGCaVn7i72tbOgWDrQp2wjIg8WgMbKBdK7GtWA==
dependencies:
tinycolor2 "^1.4.1"
ant-design-vue@~1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.2.2.tgz#6c55c7236fc26a251c02cb839f02892c358ebf08"
integrity sha512-8xUCymEbYf6i0dmF6lVg4BpIdbj01jEqfp+u/ZTn2XLGbIuOJYnE6aDmjkWEeejyM5/XuJx0cvapVBZXJKgtHg==
dependencies:
"@ant-design/icons" "^1.1.15"
"@ant-design/icons-vue" "^1.0.1"
add-dom-event-listener "^1.0.2"
array-tree-filter "^2.1.0"
async-validator "^1.8.2"
......@@ -1387,6 +1409,7 @@ ant-design-vue@^1.1.10:
json2mq "^0.2.0"
lodash "^4.17.5"
moment "^2.21.0"
mutationobserver-shim "^0.3.2"
omit.js "^1.0.0"
raf "^3.4.0"
resize-observer-polyfill "^1.5.0"
......@@ -6018,6 +6041,11 @@ multicast-dns@^6.0.1:
dns-packet "^1.3.1"
thunky "^1.0.2"
mutationobserver-shim@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#f4d5dae7a4971a2207914fb5a90ebd514b65acca"
integrity sha1-9NXa56SXGiIHkU+1qQ69UUtlrMo=
mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
......@@ -8603,6 +8631,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment