提交 24d5546f authored 作者: 宋雄's avatar 宋雄

delete

上级 3bd6fd58
NODE_ENV=development
VUE_APP_API_BASE_URL='http://192.168.0.105:9999'
# VUE_APP_API_BASE_URL='http://220.203.25.212:9999'
# VUE_APP_API_BASE_URL='http://192.168.0.101:9999'
VUE_APP_API_BASE_URL='http://220.203.25.212:9998'
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
......
......@@ -252,7 +252,6 @@
<div class="load_title">加载中,请稍等</div>
</div>
</div>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=CHUN0HYsI6BBdicixQPL6dFLOFICXDkm"></script>
</body>
</html>
\ No newline at end of file
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-row :gutter="24">
<a-col :md="24" :lg="7">
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
<img :src="getAvatar()"/>
</div>
<div class="username">{{ nickname() }}</div>
<div class="bio">海纳百川,有容乃大</div>
</div>
<div class="account-center-detail">
<p>
<i class="title"></i>交互专家
</p>
<p>
<i class="group"></i>蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED
</p>
<p>
<i class="address"></i><span>浙江省</span><span>杭州市</span>
</p>
</div>
<a-divider />
<div class="account-center-tags">
<div class="tagsTitle">标签</div>
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
</template>
<a-input
v-if="tagInputVisible"
ref="tagInput"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputChange"
@blur="handleTagInputConfirm"
@keyup.enter="handleTagInputConfirm"
/>
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
<a-icon type="plus" /> New Tag
</a-tag>
</div>
</div>
<a-divider :dashed="true" />
<div class="account-center-team">
<div class="teamTitle">团队</div>
<a-spin :spinning="teamSpinning">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
</div>
</a-spin>
</div>
</a-card>
</a-col>
<a-col :md="24" :lg="17">
<a-card
style="width:100%"
:bordered="false"
:tabList="tabListNoTitle"
:activeTabKey="noTitleKey"
@tabChange="key => handleTabChange(key, 'noTitleKey')"
>
<article-page v-if="noTitleKey === 'article'"></article-page>
<app-page v-else-if="noTitleKey === 'app'"></app-page>
<project-page v-else-if="noTitleKey === 'project'"></project-page>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import { AppPage, ArticlePage, ProjectPage } from './page'
import { mapGetters } from 'vuex'
import { getFileAccessHttpUrl } from '@/api/manage';
export default {
components: {
RouteView,
PageLayout,
AppPage,
ArticlePage,
ProjectPage
},
data() {
return {
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
tagInputVisible: false,
tagInputValue: '',
teams: [],
teamSpinning: true,
tabListNoTitle: [{
key: 'article',
tab: '文章(8)',
}, {
key: 'app',
tab: '应用(8)',
}, {
key: 'project',
tab: '项目(8)',
}
],
noTitleKey: 'app',
}
},
mounted () {
this.getTeams()
},
methods: {
...mapGetters(["nickname", "avatar"]),
getAvatar(){
return getFileAccessHttpUrl(this.avatar());
},
getTeams() {
this.$http.get('/mock/api/workplace/teams')
.then(res => {
this.teams = res.result
this.teamSpinning = false
})
},
handleTabChange (key, type) {
this[type] = key
},
handleTagClose (removeTag) {
const tags = this.tags.filter(tag => tag != removeTag)
this.tags = tags
},
showTagInput () {
this.tagInputVisible = true
this.$nextTick(() => {
this.$refs.tagInput.focus()
})
},
handleInputChange (e) {
this.tagInputValue = e.target.value
},
handleTagInputConfirm () {
const inputValue = this.tagInputValue
let tags = this.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
}
},
}
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: .3s;
.account-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
img {
height: 100%;
width: 100%;
}
}
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
}
}
.account-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
}
.title {
background-position: 0 0;
}
.group {
background-position: 0 -22px;
}
.address {
background-position: 0 -44px;
}
}
.account-center-tags {
.ant-tag {
margin-bottom: 8px;
}
}
.account-center-team {
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
}
.tagsTitle, .teamTitle {
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 12px;
}
}
</style>
\ No newline at end of file
<template>
<div class="app-list">
<a-list
:grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
:dataSource="dataSource">
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
<div class="meta-cardInfo" slot="description">
<div>
<p>活跃用户</p>
<p>
<span>{{ item.activeUser }}<span></span></span>
</p>
</div>
<div>
<p>新增用户</p>
<p>{{ item.newUser | NumberFormat }}</p>
</div>
</div>
</a-card-meta>
<template class="ant-card-actions" slot="actions">
<a>
<a-icon type="download"/>
</a>
<a>
<a-icon type="edit"/>
</a>
<a>
<a-icon type="share-alt"/>
</a>
<a>
<a-dropdown>
<a class="ant-dropdown-link" href="javascript:;">
<a-icon type="ellipsis"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">3rd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</a>
</template>
</a-card>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
activeUser: 17,
newUser: 1700
})
}
export default {
name: "Article",
components: {},
data() {
return {
dataSource,
}
}
}
</script>
<style lang="less" scoped>
.app-list {
.meta-cardInfo {
zoom: 1;
margin-top: 16px;
> div {
position: relative;
text-align: left;
float: left;
width: 50%;
p {
line-height: 32px;
font-size: 24px;
margin: 0;
&:first-child {
color: rgba(0, 0, 0, .45);
font-size: 12px;
line-height: 20px;
margin-bottom: 4px;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
import AList from 'ant-design-vue/es/list'
import AListItem from 'ant-design-vue/es/list/Item'
export default {
name: "Article",
components: {
AList,
AListItem
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-list>
<a-list-item>
</a-list-item>
</a-list>
</template>
<script>
export default {
name: "Project"
}
</script>
<style scoped>
</style>
\ No newline at end of file
import AppPage from './App'
import ArticlePage from './Article'
import ProjectPage from './Project'
export { AppPage, ArticlePage, ProjectPage }
\ No newline at end of file
<template>
<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
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
>
</vue-cropper>
</a-col>
<a-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img"/>
</div>
</a-col>
</a-row>
<template slot="footer">
<a-button key="back" @click="cancelHandel">取消</a-button>
<a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
</template>
</a-modal>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
components: {
VueCropper
},
data() {
return {
visible: false,
id: null,
confirmLoading: false,
options: {
img: '/avatar2.jpg',
autoCrop: true,
autoCropWidth: 200,
autoCropHeight: 200,
fixedBox: true
},
previews: {},
};
},
methods: {
edit(id) {
this.visible = true;
this.id = id;
/* 获取原始头像 */
},
close() {
this.id = null;
this.visible = false;
},
cancelHandel() {
this.close();
},
okHandel() {
const vm = this
vm.confirmLoading = true
setTimeout(() => {
vm.confirmLoading = false
vm.close()
vm.$message.success('上传头像成功');
}, 2000)
},
realTime(data) {
this.previews = data
}
}
};
</script>
<style lang="less" scoped>
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
<template>
<div class="account-settings-info-view">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登录密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div>
</a-col>
</a-row>
<avatar-modal ref="modal">
</avatar-modal>
</div>
</template>
<script>
import AvatarModal from './AvatarModal'
export default {
components: {
AvatarModal
},
data () {
return {
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
}
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.avatar-upload-wrapper {
height: 200px;
width: 100%;
}
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.mask {
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.4);
cursor: pointer;
transition: opacity 0.4s;
&:hover {
opacity: 1;
}
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
}
}
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
}
</style>
\ No newline at end of file
<template>
<a-list
itemLayout="horizontal"
:dataSource="data"
>
</a-list>
</template>
<script>
export default {
data () {
return {
data: []
}
},
methods: {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<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>
\ No newline at end of file
<template>
<div class="page-header-index-wide">
<a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
<div class="account-settings-info-main" :class="device" :style=" 'min-height:'+ mainInfoHeight ">
<div class="account-settings-info-left">
<a-menu
:mode="device == 'mobile' ? 'horizontal' : 'inline'"
:default-selected-keys="['settings']"
:style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
type="inner"
@openChange="onOpenChange"
>
<a-menu-item key="settings">
<a @click="settingsClick()">
基本设置
</a>
</a-menu-item>
<a-menu-item key="security">
<a @click="securityClick()">安全设置</a>
</a-menu-item>
<a-menu-item key="custom">
<a @click="customClick()"> 个性化</a>
</a-menu-item>
<a-menu-item key="binding">
<a @click="bindingClick()">账户绑定</a>
</a-menu-item>
<a-menu-item key="notification">
<a @click="notificationClick()">新消息通知</a>
</a-menu-item>
</a-menu>
</div>
<div class="account-settings-info-right">
<div class="account-settings-info-title">
<span>{{ title }}</span>
</div>
<security ref="security" v-if="security"></security>
<base-setting ref="baseSetting" v-if="baseSetting"></base-setting>
<custom ref="custom" v-if="custom"></custom>
<notification ref="notification" v-if="notification"></notification>
<binding ref="binding" v-if="binding"></binding>
</div>
</div>
</a-card>
</div>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import { mixinDevice } from '@/utils/mixin.js'
import security from './Security'
import baseSetting from './BaseSetting'
import custom from './Custom'
import notification from './Notification'
import binding from './Binding'
export default {
components: {
RouteView,
PageLayout,
security,
baseSetting,
custom,
notification,
binding
},
mixins: [mixinDevice],
data () {
return {
// horizontal inline
mode: 'inline',
mainInfoHeight:"100%",
openKeys: [],
defaultSelectedKeys: [],
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
},
pageTitle: '',
title:"基本设置",
security:false,
baseSetting:true,
custom:false,
notification:false,
binding:false
}
},
created () {
this.updateMenu()
},
mounted(){
this.mainInfoHeight = (window.innerHeight-285)+"px";
},
methods: {
onOpenChange (openKeys) {
this.openKeys = openKeys
},
updateMenu () {
let routes = this.$route.matched.concat()
this.defaultSelectedKeys = [ routes.pop().path ]
},
//update-begin--Author:wangshuai Date:20200729 for:聚合路由错误 issues#1441--------------------
settingsClick(){
this.security=false
this.custom=false
this.notification=false
this.binding=false
this.baseSetting=true
this.title="基本设置"
},
securityClick(){
this.baseSetting=false
this.custom=false;
this.notification=false
this.binding=false
this.security=true
this.title="安全设置"
},
notificationClick(){
this.security=false
this.custom=false
this.baseSetting=false
this.binding=false
this.notification=true
this.title="新消息通知"
},
bindingClick(){
this.security=false
this.baseSetting=false
this.notification=false;
this.custom=false;
this.binding=true
this.title="账号绑定"
},
customClick(){
this.security=false
this.baseSetting=false
this.notification=false;
this.binding=false
this.custom=true;
this.title="个性化"
}
//update-end--Author:wangshuai Date:20200729 for:聚合路由错误 issues#1441--------------------
},
}
</script>
<style lang="less" scoped>
.account-settings-info-main {
width: 100%;
display: flex;
height: 100%;
overflow: auto;
&.mobile {
display: block;
.account-settings-info-left {
border-right: unset;
border-bottom: 1px solid #e8e8e8;
width: 100%;
height: 50px;
overflow-x: auto;
overflow-y: scroll;
}
.account-settings-info-right {
padding: 20px 40px;
}
}
.account-settings-info-left {
border-right: 1px solid #e8e8e8;
width: 224px;
}
.account-settings-info-right {
flex: 1 1;
padding: 8px 40px;
.account-settings-info-title {
color: rgba(0,0,0,.85);
font-size: 20px;
font-weight: 500;
line-height: 28px;
margin-bottom: 12px;
}
.account-settings-info-view {
padding-top: 12px;
}
}
}
</style>
\ No newline at end of file
<template>
<a-list
itemLayout="horizontal"
:dataSource="data"
>
</a-list>
</template>
<script>
export default {
data () {
return {
data: []
}
},
methods: {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-list
itemLayout="horizontal"
:dataSource="data"
>
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
<a-list-item-meta>
<a slot="title">{{ item.title }}</a>
<span slot="description">
<span class="security-list-description">{{ item.description }}</span>
<span v-if="item.value"> : </span>
<span class="security-list-value">{{ item.value }}</span>
</span>
</a-list-item-meta>
<template v-if="item.actions">
<a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
</template>
</a-list-item>
</a-list>
</template>
<script>
export default {
data () {
return {
data: [
{ title: '账户密码' , description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
{ title: '密保手机' , description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success'); } } },
{ title: '密保问题' , description: '未设置密保问题,密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error'); } } },
{ title: '备用邮箱' , description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning'); } } },
{ title: 'MFA 设备' , description: '未绑定 MFA 设备,绑定后,可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message'); } } },
]
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="设备名称">
<j-input placeholder="请输入设备名称" v-model="queryParam.assetName"></j-input>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
<!-- <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button> -->
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<span slot="employeeStatus" slot-scope="text, record">
<span :style="{'color': record.employeeStatus === '1' ? 'green' : 'red'}">{{record.employeeStatus === '1' ? '在职' : '离职'}}</span>
</span>
<span slot="action" slot-scope="text, record">
<!-- <a @click="handleEdit(record)">编辑</a> -->
<a @click="onChangeHouse(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:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<notice-modal ref="modalForm" @ok="modalFormOk"></notice-modal>
<a-modal
title="资产调用"
width="60%"
:visible="capitalVisible"
:closable="false"
:maskClosable="false"
>
<template slot="footer">
<a-button @click="capitalVisible = false">关闭</a-button>
<a-button type="primary" @click="onCapitalSubmit" :disabled="!capitalForm.newCommunity.key">确认</a-button>
</template>
<a-form-model
ref="capitalForm"
:model="capitalForm"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-row>
<a-col :span="24">
<a-form-model-item label="设备名称" prop="assetName">
<a-input
disabled
v-model="capitalForm.assetName"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="设备编码" prop="assetCode">
<a-input
disabled
v-model="capitalForm.assetCode"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="所属小区" prop="platformName">
<a-input
disabled
v-model="capitalForm.platformName"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="调用至" prop="newCommunity">
<a-select style="width: 100%" v-model="capitalForm.newCommunity" placeholder="请选择所属小区" labelInValue>
<a-select-option v-for="item in communityList" :disabled="item.communityCode === capitalForm.platformCode" :key="item.communityCode" :value="item.communityCode">{{item.communityName}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</a-modal>
</a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import NoticeModal from './modules/NoticeModal'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
import {getCapitalCommunityListApi, callAssetSubmitApi} from '@/api/api'
const columns = [
{
title: '设备名称',
dataIndex: 'assetName',
key: 'assetName',
align: 'center'
},
{
title: '设备编码',
dataIndex: 'assetCode',
key: 'assetCode',
align: 'center'
},
{
title: '设备品牌',
dataIndex: 'assetBrand',
key: 'assetBrand',
align: 'center'
},
{
title: '设备型号',
dataIndex: 'assetModel',
key: 'assetModel',
align: 'center'
},
{
title: '设备状态',
dataIndex: 'assetStatus',
key: 'assetStatus',
align: 'center',
customRender: function(text) {
return filterDictTextByCache('device_status', text);
}
},
{
title: '首次使用时间',
dataIndex: 'firstUseDate',
key: 'firstUseDate',
align: 'center'
},
{
title: '使用年限',
dataIndex: 'useLife',
key: 'useLife',
align: 'center'
},
{
title: '所在位置',
dataIndex: 'assetPosition',
key: 'assetPosition',
align: 'center'
},
{
title: '所属小区',
dataIndex: 'platformName',
key: 'platformName',
align: 'center'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'PermissionListAsync',
mixins: [JeecgListMixin],
components: {NoticeModal},
data() {
return {
// 表头
columns: columns,
url: {
// list: "/property-company/asset/propertyAsset/list",
list: "/property-community/asset/propertyAsset/companyList",
delete: '/property-community/asset/propertyAsset/delete',
deleteBatch: '/property-community/asset/propertyAsset/delete'
},
capitalVisible: false,
labelCol: { span: 6 },
wrapperCol: { span: 14 },
capitalForm: {
id: '',
assetName: '',
assetCode: '',
platformCode: '',
platformName: '',
newCommunity: {}
},
communityList: []
}
},
created () {
// this.getCommunityList()
},
methods: {
onChangeHouse(row) {
let {id, assetName, assetCode, platformCode, platformName} = row
this.capitalForm.id = id
this.capitalForm.assetName = assetName
this.capitalForm.assetCode = assetCode
this.capitalForm.platformCode = platformCode
this.capitalForm.platformName = platformName
this.capitalForm.newCommunity = {}
this.capitalVisible = true
this.onCapitalCommunityList()
},
async onCapitalSubmit() {
let res = await callAssetSubmitApi({
id: this.capitalForm.id,
platformCode: this.capitalForm.newCommunity.key,
platformName: this.capitalForm.newCommunity.label
})
this.$message.success(res.message);
this.capitalVisible = false
this.searchQuery()
},
async onCapitalCommunityList() {
let {result} = await getCapitalCommunityListApi()
this.communityList = result
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
\ No newline at end of file
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="12">
<a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetName">
<a-input v-model="model.assetName" placeholder="请输入设备名称"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetCode">
<a-input v-model="model.assetCode" placeholder="请输入设备编码"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备品牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetBrand">
<a-input v-model="model.assetBrand" placeholder="请输入设备品牌"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetModel">
<a-input v-model="model.assetModel" placeholder="请输入设备型号"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="设备状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetStatus">
<a-select style="width: 100%" v-model="model.assetStatus" placeholder="请选择设备状态">
<a-select-option v-for="item in dictOptions" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="首次使用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstUseDate">
<j-date placeholder="请选择首次使用时间" v-model="model.firstUseDate" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="使用年限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useLife">
<a-input type="number" v-model="model.useLife" placeholder="请输入使用年限" addon-after="年" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="采购价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchasePrice">
<a-input v-model="model.purchasePrice" placeholder="请输入采购价格" addon-after="元" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="所在位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assetPosition">
<a-input v-model="model.assetPosition" placeholder="请输入所在位置"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformName">
<a-input v-model="model.platformName" placeholder="请输入所属小区"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="headName">
<a-input v-model="model.headName" placeholder="请输入负责人"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="headPhone">
<a-input v-model="model.headPhone" placeholder="请输入联系方式"></a-input>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
export default {
name: 'PropertyChargruleForm',
components: {
},
props: {
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false
}
},
data () {
return {
model:{
assetName: '',
assetCode: '',
assetBrand: '',
assetModel: '',
assetStatus: '1',
firstUseDate: '',
useLife: '',
purchasePrice: '',
assetPosition: '',
communityCode: 'P00039',
headName: '',
headPhone: ''
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
assetName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
assetCode: [{ required: true, message: '请输入设备编码', trigger: 'change' }],
assetPosition: [{ required: true, message: '请输入所在位置', trigger: 'blur' }],
communityCode: [{ required: true, message: '请输入所属小区', trigger: 'blur' }]
},
url: {
add: "/property-company/asset/propertyAsset/add",
edit: "/property-company/asset/propertyAsset/edit",
queryById: "/property-company/asset/propertyAsset/queryById"
},
dictOptions: []
}
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
this.initDictData()
},
methods: {
initDictData() {
//优先从缓存中读取字典配置
if(getDictItemsFromCache('device_status')){
this.dictOptions = getDictItemsFromCache('device_status');
return
}
// //根据字典Code, 初始化字典数组
ajaxGetDictItems('device_status', null).then((res) => {
if (res.success) {
this.dictOptions = res.result;
}
})
},
ruleNumberInput(event) {
let rateValue = event.target.value.replace(/[^\d]/g,"");//清除"数字"和"."和"-"以外的字符
this.model['empowerDays'] = rateValue
},
add () {
this.edit(this.modelDefault);
},
edit (record) {
console.log(record)
this.model = Object.assign({}, record);
this.visible = true;
},
submitForm () {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
}
}
</script>
\ No newline at end of file
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<property-settled-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></property-settled-form>
</j-modal>
</template>
<script>
import PropertySettledForm from './NoticeForm'
export default {
name: 'PropertySettledModal',
components: {
PropertySettledForm
},
data () {
return {
title:'',
width: '70%',
visible: false,
disableSubmit: false
}
},
methods: {
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.add();
})
},
edit (record) {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.edit(record);
})
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.$refs.realForm.submitForm();
},
submitCallback(){
this.$emit('ok');
this.visible = false;
},
handleCancel () {
this.close()
}
}
}
</script>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="业主姓名">
<j-input placeholder="请输入业主姓名" v-model="queryParam.ownerName"></j-input>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<div style="display:flex">
<div style="flex: none;width:200px">
<a-tree :load-data="onLoadData" :tree-data="treeData" @select="onClickTree" />
</div>
<div style="flex:auto;width:80%;">
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button type="primary" icon="download">设置业委会</a-button>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
</div>
<a-table ref="table" size="middle" :scroll="{ x: 1500}" bordered rowKey="id" :columns="columns"
:dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
getCheckboxProps: onCheckboxProps
}" class="j-table-force-nowrap" @change="handleTableChange">
<span slot="ownerId" slot-scope="text, record">
<span>{{record.ownerName}}{{record.ownerPhone}}</span>
</span>
<span slot="residentPhone" slot-scope="text, record">
<span>{{record.residentName}}{{record.residentPhone}}</span>
</span>
<span slot="roomId" slot-scope="text, record">
<span>{{record.buildingName}}{{record.unitName}}{{record.roomName}}</span>
</span>
<span slot="action" slot-scope="text, record">
<a @click="onDetail(record.id)">查看</a>
<template v-if="record.paymentStatus === 'unPaid'">
<a-divider type="vertical" />
<a @click="handleDelete(record.id)">删除</a>
</template>
</span>
</a-table>
</div>
<!-- table区域-end -->
</div>
</div>
<notice-modal ref="modalForm" @ok="modalFormOk"></notice-modal>
</a-card>
</template>
<script>
import { getBuildingListApi, getUnitListApi, getRoomListApi, callPayMentApi, getTotalMoneyApi } from '@/api/api'
import { downFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import NoticeModal from './modules/NoticeModal'
import { filterDictTextByStatic } from '@/assets/static.js'
const columns = [
{
title: '业主',
dataIndex: 'ownerId',
key: 'ownerId',
width: 160,
scopedSlots: { customRender: 'ownerId' },
align: 'center',
},
{
title: '与业主关系',
dataIndex: 'relationShip',
key: 'relationShip',
width: 120,
align: 'center'
},
{
title: '住户',
dataIndex: 'residentPhone',
key: 'residentPhone',
width: 160,
scopedSlots: { customRender: 'residentPhone' },
align: 'center',
},
{
title: '房屋编号',
dataIndex: 'roomId',
scopedSlots: { customRender: 'roomId' },
key: 'roomId',
width: 140,
align: 'center',
},
{
title: '金额(元)',
dataIndex: 'totalAmount',
key: 'totalAmount',
width: 120,
align: 'center',
},
{
title: '本期读表时间',
dataIndex: 'meterReadingTime',
key: 'meterReadingTime',
width: 150,
align: 'center',
},
{
title: '缴费状态',
dataIndex: 'paymentStatus',
key: 'paymentStatus',
width: 120,
align: 'center'
},
{
title: '缴费单号',
dataIndex: 'paymentNum',
key: 'paymentNum',
width: 120,
align: 'center',
},
{
title: '缴费日期',
dataIndex: 'paymentTime',
key: 'paymentTime',
width: 150,
align: 'center',
},
{
title: '创建日期',
dataIndex: 'createTime',
key: 'createTime',
width: 150,
align: 'center',
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150,
fixed: 'right',
},
]
export default {
name: 'PermissionListAsync',
mixins: [JeecgListMixin],
components: { NoticeModal },
data() {
return {
// 表头
columns: columns,
url: {
list: '/property-community/payment/communityPayment/propertyFeeList',
deleteBatch: '/property-community/payment/communityPayment/deleteBatch',
},
treeData: [],
statistical: {},
}
},
created() {
this.onLoadData()
},
methods: {
onCheckboxProps(record) {
let props = {
disabled: record.paymentStatus === 'paid',
name: record.chargeTypeName,
}
return props
},
onLoadData(treeNode) {
},
onClickTree(value, option) {
console.log(value, option)
let level = option.node.pos.split('-').length
if (level === 2) {
this.queryParam['buildingId'] = value[0]
this.queryParam['unitId'] = undefined
this.queryParam['roomId'] = undefined
}
if (level === 3) {
this.queryParam['buildingId'] = undefined
this.queryParam['unitId'] = value[0]
this.queryParam['roomId'] = undefined
}
if (level === 4) {
this.queryParam['buildingId'] = undefined
this.queryParam['unitId'] = undefined
this.queryParam['roomId'] = value[0]
}
this.searchQuery()
},
onBatchCallpay() {
// console.log(this.selectionRows)
let chooseIds = this.selectedRowKeys.join(',')
},
onDetail(id) {
this.$router.push({
path: '/property/propertyfee-detail?id=' + id,
})
}
},
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
\ No newline at end of file
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<property-settled-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></property-settled-form>
</j-modal>
</template>
<script>
import PropertySettledForm from './NoticeForm'
export default {
name: 'PropertySettledModal',
components: {
PropertySettledForm
},
data () {
return {
title:'',
width: '70%',
visible: false,
disableSubmit: false
}
},
methods: {
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.add();
})
},
edit (record) {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.edit(record);
})
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.$refs.realForm.submitForm();
},
submitCallback(){
this.$emit('ok');
this.visible = false;
},
handleCancel () {
this.close()
}
}
}
</script>
\ No newline at end of file
<template>
<a-drawer
title="数据规则/按钮权限配置"
width="365"
:closable="false"
@close="onClose"
:visible="visible"
>
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="数据规则" key="1">
<a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0">
<a-row>
<a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
</a-col>
<a-col :span="24">
<div style="width: 100%;margin-top: 15px">
<a-button @click="saveDataruleForRole" type="primary" size="small" icon="save">点击保存</a-button>
</div>
</a-col>
</a-row>
</a-checkbox-group>
<div v-else><h3>无配置信息!</h3></div>
</a-tab-pane>
<!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
</a-tabs>
</a-drawer>
</template>
<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction,postAction } from '@/api/manage'
export default {
name: 'RoleDataruleModal',
components: { ACol, ARow },
data(){
return {
functionId:'',
roleId:'',
visible:false,
tabList: [{
key: '1',
tab: '数据规则',
}, {
key: '2',
tab: '按钮权限',
}],
activeTabKey: '1',
url:{
datarule:"/sys/role/datarule",
},
dataruleList:[],
dataruleChecked:[]
}
},
methods:{
loadData(){
getAction(`${this.url.datarule}/${this.functionId}/${this.roleId}`).then(res=>{
console.log(res)
if(res.success){
this.dataruleList = res.result.datarule
let drChecked = res.result.drChecked
if(drChecked){
this.dataruleChecked = drChecked.split(",")
}
}
})
},
saveDataruleForRole(){
if(!this.dataruleChecked || this.dataruleChecked.length==0){
this.$message.warning("请注意,现未勾选任何数据权限!")
}
let params = {
permissionId:this.functionId,
roleId:this.roleId,
dataRuleIds:this.dataruleChecked.join(",")
}
console.log("保存数据权限",params)
postAction(this.url.datarule,params).then(res=>{
if(res.success){
this.$message.success(res.message)
}else{
this.$message.error(res.message)
}
})
},
show(functionId,roleId){
this.onReset()
this.functionId = functionId
this.roleId = roleId
this.visible=true
this.loadData()
},
onClose(){
this.visible=false
this.onReset()
},
onTabChange (key) {
this.activeTabKey = key
},
onReset(){
this.functionId=''
this.roleId=''
this.dataruleList=[]
this.dataruleChecked=[]
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-drawer
:title="title"
:maskClosable="true"
width=650
placement="right"
:closable="true"
@close="close"
:visible="visible"
style="overflow: auto;padding-bottom: 53px;">
<a-form>
<a-form-item label='所拥有的权限'>
<a-tree
checkable
@check="onCheck"
:checkedKeys="checkedKeys"
:treeData="treeData"
@expand="onExpand"
@select="onTreeNodeSelect"
:selectedKeys="selectedKeys"
:expandedKeys="expandedKeysss"
:checkStrictly="checkStrictly">
<span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
{{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
</span>
</a-tree>
</a-form-item>
</a-form>
<div class="drawer-bootom-button">
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
<a-menu slot="overlay">
<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
</a-menu>
<a-button>
树操作 <a-icon type="up" />
</a-button>
</a-dropdown>
<a-popconfirm title="确定放弃编辑?" @confirm="close" okText="确定" cancelText="取消">
<a-button style="margin-right: .8rem">取消</a-button>
</a-popconfirm>
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
</div>
<role-datarule-modal ref="datarule"></role-datarule-modal>
</a-drawer>
</template>
<script>
import {queryTreeListByTypeForRole,queryRolePermission,saveRolePermission} from '@/api/api'
import RoleDataruleModal from './RoleDataruleModal.vue'
export default {
name: "RoleModal",
components:{
RoleDataruleModal
},
data(){
return {
roleId:"",
treeData: [],
defaultCheckedKeys:[],
checkedKeys:[],
expandedKeysss:[],
allTreeKeys:[],
autoExpandParent: true,
checkStrictly: false,
title:"物业权限配置",
visible: false,
loading: false,
selectedKeys:[]
}
},
methods: {
onTreeNodeSelect(id){
if(id && id.length>0){
this.selectedKeys = id
}
this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
},
onCheck (o) {
if(this.checkStrictly){
this.checkedKeys = o.checked;
}else{
this.checkedKeys = o
}
},
show(roleId){
this.roleId=roleId
this.visible = true;
},
close () {
this.reset()
this.$emit('close');
this.visible = false;
},
onExpand(expandedKeys){
this.expandedKeysss = expandedKeys;
this.autoExpandParent = false
},
reset () {
this.expandedKeysss = []
this.checkedKeys = []
this.defaultCheckedKeys = []
this.loading = false
},
expandAll () {
this.expandedKeysss = this.allTreeKeys
},
closeAll () {
this.expandedKeysss = []
},
checkALL () {
this.checkedKeys = this.allTreeKeys
},
cancelCheckALL () {
//this.checkedKeys = this.defaultCheckedKeys
this.checkedKeys = []
},
switchCheckStrictly (v) {
if(v==1){
this.checkStrictly = false
}else if(v==2){
this.checkStrictly = true
}
},
handleCancel () {
this.close()
},
handleSubmit(exit) {
let that = this;
let params = {
roleId:that.roleId,
permissionIds:that.checkedKeys.join(","),
lastpermissionIds:that.defaultCheckedKeys.join(","),
};
that.loading = true;
console.log("请求参数:",params);
saveRolePermission(params).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.loading = false;
if (exit) {
that.close()
}
}else {
that.$message.error(res.message);
that.loading = false;
if (exit) {
that.close()
}
}
this.loadData();
})
},
loadData(){
queryTreeListByTypeForRole().then((res) => {
this.treeData = res.result.treeList
this.allTreeKeys = res.result.ids
queryRolePermission({roleId:this.roleId}).then((res)=>{
this.checkedKeys = [...res.result];
this.defaultCheckedKeys = [...res.result];
this.expandedKeysss = this.allTreeKeys;
console.log(this.defaultCheckedKeys)
})
})
}
},
watch: {
visible () {
if (this.visible) {
this.loadData();
}
}
}
}
</script>
<style lang="less" scoped>
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
</style>
\ No newline at end of file
差异被折叠。
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="12">
<a-form-model-item label="员工姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="employeeName">
<a-input v-model="model.employeeName" placeholder="请输入员工姓名"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="employeePhone">
<a-input v-model="model.employeePhone" placeholder="请输入联系电话"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="员工职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="employeeDuties">
<a-select style="width: 100%" v-model="model.employeeDuties" placeholder="请选择员工职务">
<a-select-option v-for="item in dictOptions" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="community">
<a-select style="width: 100%" mode="multiple" v-model="model.community" placeholder="请选择所属小区">
<a-select-option v-for="item in communityList" :key="item.communityCode" :value="item.communityCode">{{item.communityName}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="employeeStatus">
<a-select style="width: 100%" v-model="model.employeeStatus" placeholder="请选择状态">
<a-select-option value="1">在职</a-select-option>
<a-select-option value="0">离职</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-model-item label="员工头像" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="employeeAvatar">
<j-image-upload :isMultiple="false" text="点击上传" bizPath="scott/pic" v-model="model.employeeAvatar"></j-image-upload>
<p style="line-height:1;margin:0">建议尺寸640*320,小于10M的JPG、PNG格式图片</p>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import {ajaxGetDictItems,getDictItemsFromCache, getCapitalCommunityListApi} from '@/api/api'
import { isMobile } from '@/utils/validate'
export default {
name: 'PropertyChargruleForm',
components: {
},
props: {
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false
}
},
data () {
const validateToNextPhone = (rule, value, callback)=> {
if (value && isMobile(value)) {
callback();
} else {
callback('请输入正确的联系电话!');
}
}
return {
dictOptions: [],
model:{
employeeName: '',
employeePhone: '',
employeeDuties: '',
community: [],
employeeStatus: '1',
employeeAvatar: ''
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
employeePhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ validator: validateToNextPhone }
],
employeeDuties: [{ required: true, message: '请选择员工职务', trigger: 'change' }],
community: [{ required: true, message: '请选择所属小区', trigger: 'change' }],
employeeAvatar: [{ required: true, message: '请上传员工头像', trigger: 'change' }]
},
url: {
add: "/property-company/employee/companyEmployee/add",
edit: "/property-company/employee/companyEmployee/edit",
queryById: "/property-company/employee/companyEmployee/queryById"
},
communityList: []
}
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
this.initDictData()
this.getCommunityList()
},
methods: {
initDictData() {
//优先从缓存中读取字典配置
if(getDictItemsFromCache('duties')){
this.dictOptions = getDictItemsFromCache('duties');
return
}
// //根据字典Code, 初始化字典数组
ajaxGetDictItems('duties', null).then((res) => {
if (res.success) {
this.dictOptions = res.result;
}
})
},
async getCommunityList() {
let {result} = await getCapitalCommunityListApi()
this.communityList = result
},
ruleNumberInput(event) {
let rateValue = event.target.value.replace(/[^\d]/g,"");//清除"数字"和"."和"-"以外的字符
this.model['empowerDays'] = rateValue
},
add () {
this.edit(this.modelDefault);
},
edit (record) {
this.model = Object.assign({}, record);
this.visible = true;
},
submitForm () {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
let communityCodes = this.model.community.join(',')
httpAction(httpurl,{...this.model, communityCodes},method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
}
}
</script>
\ No newline at end of file
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<property-settled-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></property-settled-form>
</j-modal>
</template>
<script>
import PropertySettledForm from './NoticeForm'
export default {
name: 'PropertySettledModal',
components: {
PropertySettledForm
},
data () {
return {
title:'',
width: '70%',
visible: false,
disableSubmit: false
}
},
methods: {
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.add();
})
},
edit (record) {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.edit(record);
})
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.$refs.realForm.submitForm();
},
submitCallback(){
this.$emit('ok');
this.visible = false;
},
handleCancel () {
this.close()
}
}
}
</script>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="姓名">
<j-input placeholder="请输入姓名" v-model="queryParam.employeeName"></j-input>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<!-- <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button> -->
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
selectedRowKeys.length }}</a>&nbsp;&nbsp;
<a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<span slot="employeeStatus" slot-scope="text, record">
<span :style="{'color': record.employeeStatus === '1' ? 'green' : 'red'}">{{record.employeeStatus === '1' ? '在职' : '离职'}}</span>
</span>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit({...record, community: record.communityCodes.split(',')})">编辑</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:;" @click="handleDetail({...record, community: record.communityCodes.split(',')})">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<notice-modal ref="modalForm" @ok="modalFormOk"></notice-modal>
</a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import NoticeModal from './modules/NoticeModal'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
const columns = [
{
title: '姓名',
dataIndex: 'employeeName',
key: 'employeeName',
align: 'center'
},
{
title: '联系方式',
dataIndex: 'employeePhone',
key: 'employeePhone',
align: 'center'
},
{
title: '职务',
dataIndex: 'employeeDuties',
key: 'employeeDuties',
align: 'center',
customRender: function(text) {
return filterDictTextByCache('duties', text);
}
},
{
title: '所属小区',
dataIndex: 'communityNames',
key: 'communityNames',
align: 'center'
},
{
title: '在职状态',
dataIndex: 'employeeStatus',
scopedSlots: { customRender: 'employeeStatus' },
align: 'center'
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'PermissionListAsync',
mixins: [JeecgListMixin],
components: {NoticeModal},
data() {
return {
// 表头
columns: columns,
pagination: {
total: 0,
current: 1,
pageSize: 10,
showSizeChanger: true
},
url: {
list: "/property-company/employee/companyEmployee/list",
delete: '/property-company/employee/companyEmployee/delete',
deleteBatch: '/property-company/employee/companyEmployee/deleteBatch'
}
}
},
methods: {}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="收费名称">
<a-input placeholder="请输入收费名称" v-model="queryParam.chargingName"></a-input>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- <div style="text-align:right;margin-bottom:10px;">
<a-button type="primary" @click="visible = true">新增就收费标准</a-button>
</div> -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('t_property_chargrule')">导出</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
<a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<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 @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="record.auditStatus === 'waitAudit'">
<a-popconfirm title="确定审核吗?" ok-text="通过" cancel-text="驳回" @cancel="() => handleVerify(record.id, 'notPass')" @confirm="() => handleVerify(record.id, 'auditPass')">
<a>审核</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- table区域-end -->
<property-chargrule-modal ref="modalForm" @ok="modalFormOk"></property-chargrule-modal>
</a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
import PropertyChargruleModal from './modules/PropertyChargruleModal'
const columns = [
{
title: '收费名称',
dataIndex: 'chargingName',
key: 'chargingName'
}, {
title: '收费方式',
dataIndex: 'chargingCycle',
key: 'chargingCycle',
customRender: function(text) {
return filterDictTextByCache('chargingCycle', text);
}
},{
title: '授权物业数量',
dataIndex: 'empowerNum',
key: 'empowerNum'
},{
title: '添加人',
dataIndex: 'createBy',
key: 'createBy'
},{
title: '收费金额(元)',
dataIndex: 'chargingMoney',
key: 'chargingMoney'
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime'
},
{
title: '审核状态',
dataIndex: 'auditStatus',
key: 'auditStatus',
customRender: function(text) {
return filterDictTextByCache('auditStatus', text);
}
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'costListAsync',
components: {
PropertyChargruleModal
},
mixins: [JeecgListMixin],
data() {
return {
// 表头
columns: columns,
loading: false,
pagination: {
total: 0,
current: 1,
pageSize: 10,
showSizeChanger: true
},
url: {
list: "/property-company/property/propertyChargrule/list",
delete: '/property-company/property/propertyChargrule/delete',
deleteBatch: '/property-company/property/propertyChargrule/deleteBatch',
exportXlsUrl: "/property-company/property/propertyChargrule/exportXls"
},
dictOptions: [],
}
},
methods: {
handleVerify(id, auditStatus) {
AuditUpdateCostApi({
id,
auditStatus
}).then(()=> {
this.$message.success(`${auditStatus === 'auditPass' ? '审核成功' : '驳回成功'}`);
this.loadData();
})
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
\ No newline at end of file
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="24">
<a-form-model-item label="收费名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingName">
<a-input v-model="model.chargingName" placeholder="请输入收费名称"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="收费方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingCycle">
<a-select style="width: 100%" v-model="model.chargingCycle" placeholder="请选择收费方式">
<a-select-option v-for="item in dictOptions" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="授权天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerDays">
<a-input :disabled="model.chargingCycle !== '4'" v-model="model.empowerDays" @blur="ruleNumberInput" placeholder="请输入授权天数">
<div slot="addonAfter"></div>
</a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="授权小区数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerNum">
<a-input-number v-model="model.empowerNum" :min="1" :precision="0" placeholder="请输入授权小区数量" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="收费金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingMoney">
<a-input-number v-model="model.chargingMoney" :min="0.01" :precision="2" placeholder="请输入收费金额" style="width: 100%" />
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
export default {
name: 'PropertyChargruleForm',
components: {
},
props: {
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false
}
},
data () {
return {
model:{
chargingName: '',
chargingMoney: '',
chargingCycle: '',
empowerNum: '',
empowerDays: ''
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
chargingName: [{ required: true, message: '请输入收费名称', trigger: 'blur' }],
chargingCycle: [{ required: true, message: '请选择收费方式', trigger: 'change' }],
empowerDays: [{ required: true, message: '请输入授权日期', trigger: 'blur' }],
empowerNum: [{ required: true, message: '请输入授权小区数量', trigger: 'blur' }],
chargingMoney: [{ required: true, message: '请输入收费金额', trigger: 'blur' }]
},
url: {
add: "/property-company/property/propertyChargrule/add",
edit: "/property-company/property/propertyChargrule/edit",
queryById: "/property-company/property/propertyChargrule/queryById"
},
dictOptions: []
}
},
watch: {
'model.chargingCycle': {
handler(newV, oldV) {
switch(newV) {
case '1':
this.model.empowerDays = '30'
break
case '2':
this.model.empowerDays = '90'
break
case '3':
this.model.empowerDays = '365'
break
default:
if(oldV) {
this.model.empowerDays = ''
}
}
}
}
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
this.initDictData()
},
methods: {
initDictData() {
//优先从缓存中读取字典配置
if(getDictItemsFromCache('chargingCycle')){
this.dictOptions = getDictItemsFromCache('chargingCycle');
return
}
// //根据字典Code, 初始化字典数组
ajaxGetDictItems('chargingCycle', null).then((res) => {
if (res.success) {
this.dictOptions = res.result;
}
})
},
ruleNumberInput(event) {
let rateValue = event.target.value.replace(/[^\d]/g,"");//清除"数字"和"."和"-"以外的字符
this.model['empowerDays'] = rateValue
},
add () {
this.edit(this.modelDefault);
},
edit (record) {
console.log(record)
this.model = Object.assign({}, record);
this.visible = true;
},
submitForm () {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
}
}
</script>
\ No newline at end of file
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<property-chargrule-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></property-chargrule-form>
</j-modal>
</template>
<script>
import PropertyChargruleForm from './PropertyChargruleForm'
export default {
name: 'PropertyChargruleModal',
components: {
PropertyChargruleForm
},
data () {
return {
title:'',
width:800,
visible: false,
disableSubmit: false
}
},
methods: {
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.add();
})
},
edit (record) {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.edit(record);
})
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
this.$refs.realForm.submitForm();
},
submitCallback(){
this.$emit('ok');
this.visible = false;
},
handleCancel () {
this.close()
}
}
}
</script>
\ No newline at end of file
<template>
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
<a-form @submit="handleSubmit" :form="form">
<a-form-item
label="标题"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
v-decorator="[
'name',
{rules: [{ required: true, message: '请输入标题' }]}
]"
name="name"
placeholder="给目标起个名字" />
</a-form-item>
<a-form-item
label="起止日期"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-range-picker
name="buildTime"
style="width: 100%"
v-decorator="[
'buildTime',
{rules: [{ required: true, message: '请选择起止日期' }]}
]" />
</a-form-item>
<a-form-item
label="目标描述"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
rows="4"
placeholder="请输入你阶段性工作目标"
v-decorator="[
'description',
{rules: [{ required: true, message: '请输入目标描述' }]}
]" />
</a-form-item>
<a-form-item
label="衡量标准"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
rows="4"
placeholder="请输入衡量标准"
v-decorator="[
'type',
{rules: [{ required: true, message: '请输入衡量标准' }]}
]" />
</a-form-item>
<a-form-item
label="客户"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
placeholder="请描述你服务的客户,内部客户直接 @姓名/工号"
v-decorator="[
'customer',
{rules: [{ required: true, message: '请描述你服务的客户' }]}
]" />
</a-form-item>
<a-form-item
label="邀评人"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
<a-input placeholder="请直接 @姓名/工号,最多可邀请 5 人" />
</a-form-item>
<a-form-item
label="权重"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
<a-input-number :min="0" :max="100" />
<span> %</span>
</a-form-item>
<a-form-item
label="目标公开"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
help="客户、邀评人默认被分享"
>
<a-radio-group v-model="value">
<a-radio :value="1">公开</a-radio>
<a-radio :value="2">部分公开</a-radio>
<a-radio :value="3">不公开</a-radio>
</a-radio-group>
<a-form-item>
<a-select mode="multiple" v-if="value === 2">
<a-select-option value="4">同事一</a-select-option>
<a-select-option value="5">同事二</a-select-option>
<a-select-option value="6">同事三</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
<a-form-item
:wrapperCol="{ span: 24 }"
style="text-align: center"
>
<a-button htmlType="submit" type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</template>
<script>
export default {
name: 'BaseForm',
data () {
return {
description: '表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。',
value: 1,
// form
form: this.$form.createForm(this),
}
},
methods: {
// handler
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
// eslint-disable-next-line no-console
console.log('Received values of form: ', values)
}
})
}
}
}
</script>
\ No newline at end of file
<template>
<div>
<a-card class="card" title="仓库管理" :bordered="false">
<repository-form ref="repository" :showSubmit="false" />
</a-card>
<a-card class="card" title="任务管理" :bordered="false">
<task-form ref="task" :showSubmit="false" />
</a-card>
<!-- table -->
<a-card>
<form :autoFormCreate="(form) => this.form = form">
<a-table
:columns="columns"
:dataSource="data"
:pagination="false"
>
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
<a-input
:key="col"
v-if="record.editable"
style="margin: -5px 0"
:value="text"
:placeholder="columns[i].title"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</template>
<template slot="operation" slot-scope="text, record, index">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record.key)">添加</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行?" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical" />
<a @click="cancel(record.key)">取消</a>
</span>
</template>
<span v-else>
<a @click="toggle(record.key)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行?" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
</form>
</a-card>
<!-- fixed footer toolbar -->
<footer-tool-bar>
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
</footer-tool-bar>
</div>
</template>
<script>
import RepositoryForm from './RepositoryForm'
import TaskForm from './TaskForm'
import FooterToolBar from '@/components/tools/FooterToolBar'
export default {
name: "AdvancedForm",
components: {
FooterToolBar,
RepositoryForm,
TaskForm
},
data () {
return {
description: '高级表单常见于一次性输入和提交大批量数据的场景。',
loading: false,
// table
columns: [
{
title: '成员姓名',
dataIndex: 'name',
key: 'name',
width: '20%',
scopedSlots: { customRender: 'name' }
},
{
title: '工号',
dataIndex: 'workId',
key: 'workId',
width: '20%',
scopedSlots: { customRender: 'workId' }
},
{
title: '所属部门',
dataIndex: 'department',
key: 'department',
width: '40%',
scopedSlots: { customRender: 'department' }
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'operation' }
}
],
data: [
{
key: '1',
name: '小明',
workId: '001',
editable: false,
department: '行政部'
},
{
key: '2',
name: '李莉',
workId: '002',
editable: false,
department: 'IT部'
},
{
key: '3',
name: '王小帅',
workId: '003',
editable: false,
department: '财务部'
}
]
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
},
newMember () {
this.data.push({
key: '-1',
name: '',
workId: '',
department: '',
editable: true,
isNew: true
})
},
remove (key) {
const newData = this.data.filter(item => item.key !== key)
this.data = newData
},
saveRow (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = false
target.isNew = false
},
toggle (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = !target.editable
},
getRowByKey (key, newData) {
const data = this.data
return (newData || data).filter(item => item.key === key)[0]
},
cancel (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = false
},
handleChange (value, key, column) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
target[column] = value
this.data = newData
}
},
// 最终全页面提交
validate () {
this.$refs.repository.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
this.$refs.task.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
}
}
}
</script>
<style lang="less" scoped>
.card{
margin-bottom: 24px;
}
</style>
\ No newline at end of file
<template>
<a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item label="仓库名">
<a-input
placeholder="请输入仓库名称"
v-decorator="[
'repository.name',
{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="仓库域名">
<a-input
addonBefore="http://"
addonAfter=".com"
placeholder="请输入"
v-decorator="[
'repository.domain',
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库管理员">
<a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
<a-select-option value="王同学">王同学</a-select-option>
<a-select-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="审批人">
<a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
<a-select-option value="王晓丽">王晓丽</a-select-option>
<a-select-option value="李军">李军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="生效日期">
<a-range-picker
style="width: 100%"
v-decorator="[
'repository.effectiveDate',
{rules: [{ required: true, message: '请选择生效日期'}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库类型">
<a-select
placeholder="请选择仓库类型"
v-decorator="[
'repository.type',
{rules: [{ required: true, message: '请选择仓库类型'}]}
]" >
<a-select-option value="公开">公开</a-select-option>
<a-select-option value="私密">私密</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "RepositoryForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
data () {
return {
form: this.$form.createForm(this)
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
},
validate (rule, value, callback) {
const regex = /^user-(.*)$/
if (!regex.test(value)) {
callback('需要以 user- 开头')
}
callback()
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="任务名">
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="任务描述">
<a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="执行人">
<a-select
placeholder="请选择执行人"
v-decorator="[
'task.executor',
{rules: [{ required: true, message: '请选择执行人'}]}
]" >
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="责任人">
<a-select
placeholder="请选择责任人"
v-decorator="[
'task.manager',
{rules: [{ required: true, message: '请选择责任人'}]}
]" >
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="提醒时间">
<a-time-picker
style="width: 100%"
v-decorator="[
'task.time',
{rules: [{ required: true, message: '请选择提醒时间'}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="任务类型">
<a-select
placeholder="请选择任务类型"
v-decorator="[ 'task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "TaskForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
data () {
return {
form: this.$form.createForm(this)
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-form style="max-width: 500px; margin: 40px auto 0;">
<a-form-item
label="付款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-select value="1" placeholder="ant-design@alipay.com">
<a-select-option value="1">ant-design@alipay.com</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="收款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
<a-select defaultValue="alipay" style="width: 100px">
<a-select-option value="alipay">支付宝</a-select-option>
<a-select-option value="wexinpay">微信</a-select-option>
</a-select>
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
</a-input-group>
</a-form-item>
<a-form-item
label="收款人姓名"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input value="Alex" />
</a-form-item>
<a-form-item
label="转账金额"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input prefix="¥" value="5000" />
</a-form-item>
<a-form-item :wrapperCol="{span: 19, offset: 5}">
<a-button type="primary" @click="nextStep">下一步</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: "Step1",
methods: {
nextStep () {
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-form style="max-width: 500px; margin: 40px auto 0;">
<a-alert
:closable="true"
message="确认转账后,资金将直接打入对方账户,无法退回。"
style="margin-bottom: 24px;"
/>
<a-form-item
label="付款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
ant-design@alipay.com
</a-form-item>
<a-form-item
label="收款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
test@example.com
</a-form-item>
<a-form-item
label="收款人姓名"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
Alex
</a-form-item>
<a-form-item
label="转账金额"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
¥ 5,000.00
</a-form-item>
<a-form-item :wrapperCol="{span: 19, offset: 5}">
<a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: "Step2",
data () {
return {
loading: false
}
},
methods: {
nextStep () {
let that = this
that.loading = true
setTimeout(function () {
that.$emit('nextStep')
}, 1500)
},
prevStep () {
this.$emit('prevStep')
}
}
}
</script>
<style lang="less" scoped>
.stepFormText {
margin-bottom: 24px;
.ant-form-item-label,
.ant-form-item-control {
line-height: 22px;
}
}
</style>
\ No newline at end of file
<template>
<div>
<a-form style="margin: 40px auto 0;">
<result title="操作成功" :is-success="true" description="预计两小时内到账">
<div class="information">
<a-row>
<a-col :sm="8" :xs="24">付款账户:</a-col>
<a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">收款账户:</a-col>
<a-col :sm="16" :xs="24">test@example.com</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">收款人姓名:</a-col>
<a-col :sm="16" :xs="24">辉夜</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">转账金额:</a-col>
<a-col :sm="16" :xs="24"><span class="money">500</span></a-col>
</a-row>
</div>
<div slot="action">
<a-button type="primary" @click="finish">再转一笔</a-button>
<a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
</div>
</result>
</a-form>
</div>
</template>
<script>
import Result from '../../../result/Result'
export default {
name: "Step3",
components: {
Result
},
data () {
return {
loading: false
}
},
methods: {
finish () {
this.$emit('finish')
},
toOrderList () {
this.$router.push('/list/query-list')
}
}
}
</script>
<style lang="less" scoped>
.information {
line-height: 22px;
.ant-row:not(:last-child) {
margin-bottom: 24px;
}
}
.money {
font-family: "Helvetica Neue",sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 14px;
}
</style>
\ No newline at end of file
<template>
<a-card :bordered="false">
<a-steps class="steps" :current="currentTab">
<a-step title="填写转账信息" />
<a-step title="确认转账信息" />
<a-step title="完成" />
</a-steps>
<div class="content">
<step1 v-if="currentTab === 0" @nextStep="nextStep"/>
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
<step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
</div>
</a-card>
</template>
<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
export default {
name: "StepForm",
components: {
Step1,
Step2,
Step3
},
data () {
return {
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤,指导用户完成。',
currentTab: 0,
// form
form: null,
}
},
methods: {
// handler
nextStep () {
if (this.currentTab < 2) {
this.currentTab += 1
}
},
prevStep () {
if (this.currentTab > 0) {
this.currentTab -= 1
}
},
finish () {
this.currentTab = 0
}
}
}
</script>
<style lang="less" scoped>
.steps {
max-width: 750px;
margin: 16px auto;
}
</style>
\ No newline at end of file
<template>
<div class="card-list" ref="content">
<a-list
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource"
>
<a-list-item slot="renderItem" slot-scope="item, index">
<template v-if="index === 0">
<a-button class="new-btn" type="dashed">
<a-icon type="plus"/>
新增产品
</a-button>
</template>
<template v-else>
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
<div class="meta-content" slot="description">{{ item.content }}</div>
</a-card-meta>
<template class="ant-card-actions" slot="actions">
<a>操作一</a>
<a>操作二</a>
</template>
</a-card>
</template>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
for (let i = 0; i < 12; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
content: '在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。'
})
}
export default {
name: "CardList",
data () {
return {
description: '段落示意:蚂蚁金服务设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态, 提供跨越设计与开发的体验解决方案。',
linkList: [
{ icon: 'rocket', href: '#', title: '快速开始' },
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
{ icon: 'file-text', href: '#', title: '产品文档' }
],
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
dataSource
}
}
}
</script>
<style lang="less" scoped>
.card-avatar {
width: 48px;
height: 48px;
border-radius: 48px;
}
.ant-card-actions {
background: #f7f9fa;
li {
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0, 0, 0, 0.45);
width: 50%;
&:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
a {
color: rgba(0, 0, 0, .45);
line-height: 22px;
display: inline-block;
width: 100%;
&:hover {
color: #1890ff;
}
}
}
}
.new-btn {
background-color: #fff;
border-radius: 2px;
width: 100%;
height: 186px;
}
.meta-content {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 64px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
\ No newline at end of file
<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 :columns="columns" :data="loadData">
<span slot="actions" slot-scope="text, record">
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
</span>
<span slot="status" slot-scope="text">
{{ text | statusFilter }}
</span>
<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="操作"
: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="permission_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-select
style="width: 100%"
mode="multiple"
v-model="mdl.actions"
:allowClear="true"
>
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-modal>
</a-card>
</template>
<script>
import STable from '@/components/table/'
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: 'actions',
scopedSlots: { customRender: 'actions' },
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
}
],
// 向后端拉取可以用的操作列表
permissionList: null,
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/mock/api/permission', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
let result = res.result
result.data.map(permission => {
permission.actionList = JSON.parse(permission.actionData)
return permission
})
return result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
filters: {
statusFilter(status) {
const statusMap = {
1: '正常',
2: '禁用'
}
return statusMap[status]
}
},
created () {
this.loadPermissionList()
},
methods: {
loadPermissionList () {
// permissionList
new Promise((resolve => {
const data = [
{ label: '新增', value: 'add', defaultChecked: false },
{ label: '查询', value: 'get', defaultChecked: false },
{ label: '修改', value: 'update', defaultChecked: false },
{ label: '列表', value: 'query', defaultChecked: false },
{ label: '删除', value: 'delete', defaultChecked: false },
{ label: '导入', value: 'import', defaultChecked: false },
{ label: '导出', value: 'export', defaultChecked: false }
]
setTimeout(resolve(data), 1500)
})).then(res => {
this.permissionList = res
})
},
handleEdit (record) {
this.mdl = Object.assign({}, record)
console.log(this.mdl)
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>
\ No newline at end of file
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论