Skip to content

A
ant-design-pro-vue
Unverified Commit 367e5f77 by Sendya
Options

update antd-vue 1.2.1

parent f56ca8b4
Showing with 182 additions and 171 deletions
package.json
......@@ -9,7 +9,7 @@
},
"dependencies": {
"@antv/data-set": "^0.10.1",
"ant-design-vue": "^1.2.1",
"ant-design-vue": "~1.2.1",
"axios": "^0.18.0",
"dayjs": "^1.7.5",
"enquire.js": "^2.1.6",
......
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
......@@ -44,14 +44,16 @@ export default {
this.updateMenu()
},
watch: {
/*
collapsed(val) {
if (val) {
this.cachedOpenKeys = this.openKeys
this.cachedOpenKeys = this.openKeys.concat()
this.openKeys = []
} else {
this.openKeys = this.cachedOpenKeys
}
},
*/
$route: function() {
this.updateMenu()
}
......@@ -107,6 +109,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]
......@@ -131,7 +134,7 @@ export default {
props: {
theme: this.$props.theme,
mode: this.$props.mode,
openKeys: this.openKeys,
// openKeys: this.openKeys,
selectedKeys: this.selectedKeys
},
on: {
......
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 :visible="visible" title="修改头像" :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
......@@ -1386,7 +1386,7 @@ ant-design-palettes@^1.1.3:
dependencies:
tinycolor2 "^1.4.1"
ant-design-vue@^1.2.1:
ant-design-vue@~1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.2.1.tgz#ce71c62c6c8080372b07718df0fb405ff1863680"
integrity sha512-boOtRgMIVi3c6E4EOwrF1bn3KFvpfJv75RLa0tTCZCe7ghmlN+WF0QeJPaL+LaY8dUbO8xJXiuNutzLEKNhZKQ==
......
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