提交 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>
<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="communityName">
<a-input v-model="model.communityName" placeholder="请输入小区名称"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useTo">
<a-select style="width: 100%" v-model="model.useTo" 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="communityArea">
<a-input v-model="model.communityArea" placeholder="请输入所属地区"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressInfo">
<a-input v-model="model.addressInfo" placeholder="请输入详细地址"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="建成日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="completedDate">
<j-date placeholder="请选择建成日期" v-model="model.completedDate" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="占地面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coverArea">
<a-input v-model="model.coverArea" 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="buildingNum">
<a-input v-model="model.buildingNum" 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="houseNum">
<a-input v-model="model.houseNum" 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="parkingSpace">
<a-input v-model="model.parkingSpace" 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="chargingStation">
<a-input type="number" v-model="model.chargingStation" placeholder="请输入充电桩" addon-after="个" ></a-input>
</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="communityImage">
<j-image-upload :isMultiple="true" text="点击上传" bizPath="scott/pic" v-model="model.communityImage"></j-image-upload>
<p style="line-height:1;margin:0">建议尺寸640*320,小于10M的JPG、PNG格式图片,可上传多张</p>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="小区简介" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="communityIntro">
<a-textarea placeholder="小区简介" v-model="model.communityIntro" allow-clear />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-model-item label="小区管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminName">
<a-input v-model="model.adminName" placeholder="请输入小区管理员"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="管理员联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPhone">
<a-input v-model="model.adminPhone" placeholder="请输入管理员联系电话"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="管理员登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPassword">
<a-input v-model="model.adminPassword" placeholder="请输入管理员登录密码"></a-input>
</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="adminAvatar">
<j-image-upload :isMultiple="false" text="点击上传" bizPath="scott/pic" v-model="model.adminAvatar"></j-image-upload>
</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'
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 {
model:{
communityName: '',
useTo: '',
communityArea: '',
addressInfo: '',
completedDate: '',
coverArea: '',
buildingNum: '',
houseNum: '',
parkingSpace: '',
chargingStation: '',
communityImage: '',
communityIntro: '',
adminName: '',
adminPhone: '',
adminPassword: '',
adminAvatar: '',
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
communityName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
useTo: [{ required: true, message: '请选择用途', trigger: 'change' }],
communityArea: [{ required: true, message: '请输入所属地区', trigger: 'blur' }],
coverArea: [{ required: true, message: '请输入占地面积', trigger: 'blur' }],
buildingNum: [{ required: true, message: '请输入楼栋数量', trigger: 'blur' }],
houseNum: [{ required: true, message: '请输入房屋数量', trigger: 'blur' }],
communityImage: [{ required: true, message: '请至少上传一张小区图片', trigger: 'change' }],
adminName: [{ required: true, message: '请输入小区管理员', trigger: 'blur' }],
adminPhone: [
{ required: true, message: '请输入管理员联系电话', trigger: 'blur' },
{ validator: validateToNextPhone }
],
adminPassword: [{ required: true, message: '请输入管理员登录密码', trigger: 'blur' }],
adminAvatar: [{ required: true, message: '请上传管理员头像', trigger: 'blur' }]
},
url: {
add: "/property-company/community/companyCommunity/add",
edit: "/property-company/community/companyCommunity/edit",
queryById: "/property-company/community/companyCommunity/queryById"
},
dictOptions: [
{label: '商用', value: 1},
{label: '普通住宅', value: 2},
{label: '商住合一', value: 3}
]
}
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
},
methods: {
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-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">
<div class="title-top">
<h3>{{title}}</h3>
<div class="button">
<a-button @click="onCancel">返回</a-button>
<a-button type="danger" @click="onExamine(2)" v-if="pageType == '2'">审核驳回</a-button>
<a-button type="primary" @click="onExamine(1)" v-if="pageType == '2'">审核通过</a-button>
<a-button type="primary" @click="onExamine(3)" v-if="pageType == '3'">确认</a-button>
</div>
</div>
<j-form-container :disabled="pageType !== '3'">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-card title="对账信息">
<a-row>
<a-col :span="12">
<a-form-model-item label="对账单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
<a-input v-model="model.propertyName" placeholder="请输入对账单号"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="对账开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="creditCode">
<a-input v-model="model.creditCode" placeholder="请输入对账开始时间"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="对账结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="legalName">
<a-input v-model="model.legalName" placeholder="请输入对账结束时间"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="操作人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
<a-input-number v-model="model.registCapital" :min="1" placeholder="请输入操作人" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="操作日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
<a-input v-model="model.contactName" placeholder="请输入操作日期"></a-input>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card title="对账明细">
<a-row>
<div>
<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
:dataSource="dataSource" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
</a-table>
</div>
</a-row>
</a-card>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { getPropertyChargruleListApi, getPropertyDetailApi, auditPropertyApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { isMobile } from '@/utils/validate'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
const columns = [
{
title: '所属小区',
dataIndex: 'propertyName',
key: 'propertyName',
align: 'center',
},
{
title: '费用项目',
dataIndex: 'creditCode',
key: 'creditCode',
align: 'center',
},
{
title: '业主',
dataIndex: 'reconciliationBeginDate',
key: 'reconciliationBeginDate',
align: 'center',
},
{
title: '与业主关系',
dataIndex: 'reaship',
key: 'reaship',
align: 'center',
},
{
title: '住户',
dataIndex: 'reconcilname',
key: 'reconcilname',
align: 'center',
},
{
title: '房屋编号',
dataIndex: 'reconciliationEndDate',
key: 'reconciliationEndDate',
align: 'center',
},
{
title: '费用',
dataIndex: 'reconciliationAmount',
key: 'reconciliationAmount',
align: 'center',
},
{
title: '缴费日期',
dataIndex: 'updateTime',
key: 'updateTime',
align: 'center',
},
{
title: '缴费单号',
dataIndex: 'empowerCommunityNum',
key: 'empowerCommunityNum',
// customRender: function (text) {
// return filterDictTextByCache('companyAuditStatus', text)
// },
},
{
title: '创建日期',
dataIndex: 'auditStatus',
key: 'auditStatus',
},
]
export default {
name: 'PropertySettledForm',
inject: ['closeCurrent'],
mixins: [JeecgListMixin],
data() {
const validateToNextPhone = (rule, value, callback) => {
if (value && isMobile(value)) {
callback()
} else {
callback('请输入正确的联系人电话!')
}
}
return {
title: '',
pageType: '',
pcaa: this.$Jpcaa,
model: {
propertyName: '234234234',
creditCode: '2023-03-22',
legalName: '2023-06-22',
registCapital: 'ADMIN',
contactName: '2023-06-23',
image: ''
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
creditCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
registCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
contactPhone: [
{ required: true, message: '请输入联系人电话', trigger: 'blur' },
{ validator: validateToNextPhone },
],
registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
addressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
logoUrl: [{ required: true, message: '请上传集团LOGO', trigger: 'change' }],
empowerBeginDate: [{ required: true, message: '请选择授权开始日期', trigger: 'change' }],
empowerEndDate: [{ required: true, message: '请选择权结束日期', trigger: 'change' }],
empowerCommunityNum: [{ required: true, message: '请输入授权小区数量', trigger: 'blur' }],
chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
adminLoginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }],
},
url: {
add: '/property-central/property/propertySettled/add',
edit: '/property-central/property/propertySettled/edit',
queryById: '/property-central/property/propertySettled/queryById',
list: '/property-central/property/communityReconciliation/communityAccountPage'
},
costList: [],
mapRef: null,
columns: columns,
loading: false,
dataSource: [
{id: 'DSF3453534',propertyName: '汉江之星小区', creditCode: '物业费', reconciliationBeginDate: '张飒,15198765634',reaship: '租户', reconcilname: '李白,15165245634', reconciliationEndDate: '2栋2单元101', reconciliationAmount: '345.23', updateTime: '2023-04-05', empowerCommunityNum: 'LD23423843223', auditStatus: '2023-05-06'},
{id: 'DSF32342334',propertyName: '汉江之星小区', creditCode: '水费', reconciliationBeginDate: '李生,1515235634',reaship: '本人', reconcilname: '李生,1515235634', reconciliationEndDate: '1栋2单元301', reconciliationAmount: '1345.45', updateTime: '2023-05-05', empowerCommunityNum: 'DFG2342342323', auditStatus: '2023-05-16'},
{id: 'DSF23423434',propertyName: '汉江之星小区', creditCode: '电费', reconciliationBeginDate: '李丽,19812348976',reaship: '租户', reconcilname: '张飒,15198765634', reconciliationEndDate: '9栋1单元401', reconciliationAmount: '34234', updateTime: '2023-02-06', empowerCommunityNum: 'JTR323422', auditStatus: '2023-03-06'},
{id: 'DSF36783434',propertyName: '汉江之星小区', creditCode: '水费', reconciliationBeginDate: '张盛,1890987567',reaship: '本人', reconcilname: '张盛,1890987567', reconciliationEndDate: '4栋2单元403', reconciliationAmount: '34', updateTime: '2023-06-07', empowerCommunityNum: 'DFGD32423423', auditStatus: '2023-04-23'},
{id: 'DS235345534',propertyName: '汉江之星小区', creditCode: '燃气费', reconciliationBeginDate: '李婷婷,18809875634',reaship: '租户', reconcilname: '话梅,15198765634', reconciliationEndDate: '9栋2单元1201', reconciliationAmount: '654', updateTime: '2023-05-06', empowerCommunityNum: 'FDBEWRW2342342', auditStatus: '2023-06-26'},
]
}
},
methods: {
async onLoadCostList() {
let data = await getPropertyChargruleListApi()
this.costList = data.result
},
async getPageDetail() {
let { result } = await getPropertyDetailApi({ id: this.$route.query.id })
this.edit(result)
if (result.provinceName) {
this.getLongitude(
result.provinceName,
result.provinceName + result.cityName + result.countyName + result.addressInfo,
mapZoom[3]
)
}
},
onCancel() {
this.closeCurrent()
},
contactPhoneChange(e) {
if(!this.model.adminLoginName) {
this.model.adminLoginName = e.target.value
}
},
edit(record) {
this.model = Object.assign({}, record)
this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
this.visible = true
},
onExamine(type) {
this.closeCurrent()
// const that = this
// if (type == 1) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'auditPass',
// }).then((res) => {
// that.$message.success('审核通过成功')
// that.$emit('ok')
// this.closeCurrent()
// })
// } else if (type == 2) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'refuse',
// }).then((res) => {
// that.$message.success('审核驳回成功')
// this.closeCurrent()
// })
// }
},
addressChange(val) {
const province = Object.keys(val[0])[0]
const city = Object.keys(val[1])[0]
const county = Object.keys(val[2])[0]
this.model.provinceName = val[0][province]
this.model.provinceCode = province
this.model.cityName = val[1][city]
this.model.cityCode = city
this.model.countyName = val[2][county]
this.model.countyCode = county
if (this.model.addressInfo) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo,
mapZoom[3]
)
}
},
addressBlur(val) {
if (this.model.provinceName) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value,
mapZoom[3]
)
}
},
getAddress(e) {
let _this = this
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder()
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function (result) {
if (result) {
_this.mapRef.clearOverlays()
_this.model.registAdress = [
result.addressComponents.province,
result.addressComponents.city,
result.addressComponents.district,
]
_this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
_this.model.longitude = result.point.lng
_this.model.latitude = result.point.lat
_this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
console.log(result)
}
})
},
positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
var point = new BMapGL.Point(mapCenterLng, mapCenterLat) // 创建点坐标
this.mapRef.centerAndZoom(point, mapzoom)
var marker = new BMapGL.Marker(point, { title: address }) // 创建标注
this.mapRef.addOverlay(marker) // 将标注添加到地图中
let _this = this
// marker.addEventListener("click", function(){
var label = new BMapGL.Label(address, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, -55), // 设置标注的偏移量
})
_this.mapRef.addOverlay(label) // 将标注添加到地图中
label.setStyle({
// 设置label的样式
color: '#333',
fontSize: '14px',
padding: '4px 10px',
border: '1px solid #1E90FF',
borderRadius: '4px',
transform: 'translateX(-40%)',
})
// });
},
getLongitude(city, address, zoom) {
let _this = this
var myGeo = new BMapGL.Geocoder()
myGeo.getPoint(
address,
function (point) {
if (point) {
_this.mapRef.clearOverlays()
_this.model.longitude = point.lng
_this.model.latitude = point.lat
_this.positionMap(point.lng, point.lat, zoom, address)
} else {
console.log('您选择的地址没有解析到结果!')
}
},
city
)
},
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'
}
//this.model.registAdress = undefined
httpAction(httpurl, this.model, method)
.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
this.closeCurrent()
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
})
}
})
},
loadData() {
console.log('不请求')
}
},
mounted() {
//备份model原始值
//this.modelDefault = JSON.parse(JSON.stringify(this.model))
// this.onLoadCostList()
this.pageType = this.$route.query.type
if (this.$route.query.type == '1') {
this.title = '详情'
} else if (this.$route.query.type == '2') {
this.title = '审核'
} else if (this.$route.query.type == '3') {
this.title = '新增对账'
}
console.log(this.title)
console.log(this.pageType)
// if (this.$route.query.id) {
// this.getPageDetail()
// }
}
}
</script>
<style lang="less" scoped>
.title-top {
background: #fff;
padding: 0 25px;
line-height: 50px;
height: 50px;
margin-bottom: 5px;
h3 {
font-weight: bold;
display: inline-block;
}
.button {
float: right;
.ant-btn {
margin-left: 15px;
}
}
}
</style>
<style>
.area-select {
width: 100% !important;
}
</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.name"></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>
<!-- table区域-begin -->
<div>
<div class="table-box">
<div class="box" v-for="item in dataSource" :key="item.id">
<div class="left">
<div class="img-box">
<img :src="item.image" alt="">
</div>
<div class="text">{{item.name}}</div>
<div class="text">{{item.phone}}</div>
<div class="text">{{item.job}}</div>
</div>
<div class="right">{{item.describe}}</div>
</div>
</div>
<div style="text-align:right">
<a-pagination
:total="85"
:show-total="total => `Total ${total} items`"
:page-size="20"
:default-current="1"
/>
</div>
</div>
<!-- table区域-end -->
</a-card>
</template>
<script>
import { auditPropertyApi, freezeOrPropertyApi } from '@/api/api'
export default {
name: 'PermissionListAsync',
data() {
return {
queryParam: {},
// 表头
loading: false,
dataSource: [
{id: 'JD239423', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1148', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'sdf23422', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=316030150,2128050393&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'kjkjkl23', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=3635386112,2958829611&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'n23n4234', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=1288389997,496132515&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'pok23424', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img0.baidu.com/it/u=2791418870,625924969&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'jh234h32', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img0.baidu.com/it/u=2405175533,3664722999&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: 'k2n3i234', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img2.baidu.com/it/u=428132418,1361442997&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改'},
{id: '9sdjwfjw', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=413302778,393661490&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', describe: '理员修改审核信息,然后点击通过/驳回,再次查看详情,信息未修改【SAAS总平台】物业公司入驻审核时候,saas管理员修改审核信息,然后点击通过/驳未修改'},
]
}
},
methods: {
searchQuery() {},
searchReset() {},
onLoadDetail(record, type) {
record['registAdress'] = [record.provinceCode, record.cityCode, record.countyCode]
if (type === 'edit') {
this.handleEdit(record)
} else {
this.handleDetail(record)
}
},
loadData() {
console.log('不请求')
}
},
}
</script>
<style scoped lang="less">
// @import '~@assets/less/common.less';
.table-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&::after {
content: " ";
width: 32%;
height: 0;
overflow: hidden;
}
.box {
width: 32%;
box-sizing: border-box;
padding: 5px;
border: 1px solid #c3c3c3;
display: flex;
margin-bottom: 20px;
.left {
.img-box {
width: 130px;
height: 145px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.text {
margin-top: 5px;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #c3c3c3;
}
}
.right {
word-break: break-all;
padding-left: 10px;
height: 250px;
overflow-y: auto;
}
}
}
</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
<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
ref="table"
size="default"
:columns="columns"
:data="loadData"
:scroll="{}"
>
<div
slot="expandedRowRender"
slot-scope="record"
style="margin: 0">
<a-row
:gutter="24"
:style="{ marginBottom: '12px' }">
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
<a-col :span="4">
<span>{{ role.permissionName }}</span>
</a-col>
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
</a-col>
<a-col :span="20" v-else>-</a-col>
</a-col>
</a-row>
</div>
<span slot="action" slot-scope="text, record">
<a @click="$refs.modal.edit(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>
<role-modal ref="modal" @ok="handleOk"></role-modal>
</a-card>
</template>
<script>
import STable from '@/components/table/'
import RoleModal from './modules/RoleModal'
export default {
name: "TableList",
components: {
STable,
RoleModal
},
data () {
return {
description: '列表使用场景:后台管理中的权限管理以及角色管理,可用于基于 RBAC 设计的角色权限控制,颗粒度细到每一个操作类型。',
visible: false,
form: null,
mdl: {},
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '唯一识别码',
dataIndex: 'id'
},
{
title: '角色名称',
dataIndex: 'name',
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true
}, {
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/mock/api/role', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
methods: {
handleEdit (record) {
this.mdl = Object.assign({}, record)
this.mdl.permissions.forEach(permission => {
permission.actionsOptions = permission.actionEntitySet.map(action => {
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
})
})
console.log(this.mdl)
this.visible = true
},
handleOk () {
// 新增/修改 成功时,重载列表
this.$refs.table.refresh()
},
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
<template>
<div>
<a-card :bordered="false">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="我的待办" content="8个任务" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周完成任务数" content="24个"/>
</a-col>
</a-row>
</a-card>
<a-card
style="margin-top: 24px"
:bordered="false"
title="标准列表">
<div slot="extra">
<a-radio-group>
<a-radio-button>全部</a-radio-button>
<a-radio-button>进行中</a-radio-button>
<a-radio-button>等待中</a-radio-button>
</a-radio-group>
<a-input-search style="margin-left: 16px; width: 272px;" />
</div>
<div class="operate">
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
</div>
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
<a-list-item :key="index" v-for="(item, index) in data">
<a-list-item-meta :description="item.description">
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
<a slot="title">{{ item.title }}</a>
</a-list-item-meta>
<div slot="actions">
<a>编辑</a>
</div>
<div slot="actions">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item><a>编辑</a></a-menu-item>
<a-menu-item><a>删除</a></a-menu-item>
</a-menu>
<a>更多<a-icon type="down"/></a>
</a-dropdown>
</div>
<div class="list-content">
<div class="list-content-item">
<span>Owner</span>
<p>{{ item.owner }}</p>
</div>
<div class="list-content-item">
<span>开始时间</span>
<p>{{ item.startAt }}</p>
</div>
<div class="list-content-item">
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
</div>
</div>
</a-list-item>
</a-list>
</a-card>
</div>
</template>
<script>
import HeadInfo from '@/components/tools/HeadInfo'
const data = []
data.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
description: '那是一种内在的东西, 他们到达不了,也无法触及的',
owner: '付晓晓',
startAt: '2018-07-26 22:44',
progress: {
value: 90
}
})
data.push({
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',
owner: '曲丽丽',
startAt: '2018-07-26 22:44',
progress: {
value: 54
}
})
data.push({
title: 'Ant Design',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
description: '生命就像一盒巧克力,结果往往出人意料',
owner: '林东东',
startAt: '2018-07-26 22:44',
progress: {
value: 66
}
})
data.push({
title: 'Ant Design Pro',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',
owner: '周星星',
startAt: '2018-07-26 22:44',
progress: {
value: 30
}
})
data.push({
title: 'Bootstrap',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
description: '那时候我只会想自己想要什么,从不想自己拥有什么',
owner: '吴加好',
startAt: '2018-07-26 22:44',
progress: {
status: 'exception',
value: 100
}
})
export default {
name: "StandardList",
components: {
HeadInfo
},
data () {
return {
data
}
}
}
</script>
<style lang="less" scoped>
.ant-avatar-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
.list-content-item {
color: rgba(0, 0, 0, .45);
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 40px;
span {
line-height: 20px;
}
p {
margin-top: 4px;
margin-bottom: 0;
line-height: 22px;
}
}
</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="规则编号">
<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>
<template v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="调用次数">
<a-input-number style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="更新日期">
<a-date-picker style="width: 100%" 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">
<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>
</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">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">
批量操作 <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:showAlertInfo="true"
@onSelect="onChange"
>
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
<div :key="index">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="action" slot-scope="text, record, index">
<div class="editable-row-operations">
<span v-if="record.editable">
<a @click="() => save(record)">保存</a>
<a-divider type="vertical" />
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a class="edit" @click="() => edit(record)">修改</a>
<a-divider type="vertical" />
<a class="delete" @click="() => del(record)">删除</a>
</span>
</div>
</template>
</s-table>
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
<!---->
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 }]}">
<a-input placeholder="请输入" />
</a-form-item>
</a-form>
</a-modal>
</a-card>
</template>
<script>
import STable from '@/components/table/'
export default {
name: "TableList",
components: {
STable
},
data () {
return {
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '规则编号',
dataIndex: 'no',
width: 90
},
{
title: '描述',
dataIndex: 'description',
scopedSlots: { customRender: 'description' },
},
{
title: '服务调用次数',
dataIndex: 'callNo',
width: '150px',
sorter: true,
needTotal: true,
scopedSlots: { customRender: 'callNo' },
// customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
width: '100px',
needTotal: true,
scopedSlots: { customRender: 'status' },
},
{
title: '更新时间',
dataIndex: 'updatedAt',
width: '150px',
sorter: true,
scopedSlots: { customRender: 'updatedAt' },
},
{
table: '操作',
dataIndex: 'action',
width: '120px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return this.$http.get('/mock/api/service', {
params: Object.assign(parameter, this.queryParam)
}).then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: [],
visibleCreateModal:false
}
},
methods: {
handleChange (value, key, column) {
console.log(value, key, column)
},
edit (row) {
row.editable = true
// row = Object.assign({}, row)
this.$refs.table.updateEdit()
},
// eslint-disable-next-line
del (row) {
this.$confirm({
title: '警告',
content: '真的要删除吗?',
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
console.log('OK');
// 在这里调用删除接口
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {
console.log('Cancel');
},
});
},
save (row) {
delete row.editable
this.$refs.table.updateEdit()
},
cancel (row) {
delete row.editable
this.$refs.table.updateEdit()
},
onChange (row) {
this.selectedRowKeys = row.selectedRowKeys
this.selectedRows = row.selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
//添加逻辑
handleModalVisible(isVisible) {
this.visibleCreateModal = isVisible;
},
handleCreateModalCancel() {
this.visibleCreateModal = false;
},
handleCreateModalOk() {
this.visibleCreateModal = false;
},
},
watch: {
/*
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce( (sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
*/
}
}
</script>
<style lang="less" scoped>
.search {
margin-bottom: 54px;
}
.fold {
width: calc(100% - 216px);
display: inline-block
}
.operator {
margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
.fold {
width: 100%;
}
}
</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="规则编号">
<a-input v-model="queryParam.id" placeholder=""/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.status" 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>
<template v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="调用次数">
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="更新日期">
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.useStatus" 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">
<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>
</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 @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">
批量操作 <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:showAlertInfo="true"
@onSelect="onChange"
>
<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.no" id="no" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="服务调用次数"
hasFeedback
validateStatus="success"
>
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
hasFeedback
validateStatus="warning"
>
<a-select defaultValue="1" v-model="mdl.status">
<a-select-option value="1">Option 1</a-select-option>
<a-select-option value="2">Option 2</a-select-option>
<a-select-option value="3">Option 3</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
help="请填写一段描述"
>
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="更新时间"
hasFeedback
validateStatus="error"
>
<a-date-picker
style="width: 100%"
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="Select Time"
/>
</a-form-item>
</a-form>
</a-modal>
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
<!---->
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 }]}">
<a-input placeholder="请输入" />
</a-form-item>
</a-form>
</a-modal>
</a-card>
</template>
<script>
import STable from '@/components/table/'
import ATextarea from "ant-design-vue/es/input/TextArea"
import AInput from "ant-design-vue/es/input/Input"
import moment from "moment"
import axios from 'axios';
import { getRoleList, getServiceList } from '@/api/manage'
export default {
name: "TableList",
components: {
AInput,
ATextarea,
STable
},
data () {
return {
visibleCreateModal:false,
visible: false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
form: null,
mdl: {},
// 高级搜索 展开/关闭
advanced: true,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
},
{
table: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return getServiceList(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
created () {
getRoleList({ t: new Date()})
},
methods: {
handleEdit (record) {
this.mdl = Object.assign({}, record)
console.log(this.mdl)
this.visible = true
},
handleOk () {
},
//添加逻辑
handleModalVisible(isVisible) {
this.visibleCreateModal = isVisible;
},
handleCreateModalOk() {
this.createForm.validateFields((err, fieldsValue) => {
if (err) {
return;
}
const description = this.createForm.getFieldValue('description');
axios.post('/saveRule', {
desc: description,
}).then((res) => {
this.createForm.resetFields();
this.visibleCreateModal = false;
this.loadRuleData();
});
});
},
handleCreateModalCancel() {
this.visibleCreateModal = false;
},
onChange (row) {
this.selectedRowKeys = row.selectedRowKeys
this.selectedRows = row.selectedRows
console.log(this.$refs.table)
},
toggleAdvanced () {
this.advanced = !this.advanced
},
resetSearchForm () {
this.queryParam = {
date: moment(new Date())
}
}
},
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
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item label="角色ID">
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="状态">
<a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary">查询</a-button>
<a-button style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<s-table
size="default"
:columns="columns"
:data="loadData"
:scroll="{}"
>
<div
slot="expandedRowRender"
slot-scope="record"
style="margin: 0">
<a-row
:gutter="24"
:style="{ marginBottom: '12px' }">
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
<a-col :lg="4" :md="24">
<span>{{ role.permissionName }}</span>
</a-col>
<a-col :lg="20" :md="24" v-if="role.actionEntitySet.length > 0">
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
</a-col>
<a-col :span="20" v-else>-</a-col>
</a-col>
</a-row>
</div>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">详情</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">禁用</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
<a-modal
title="操作"
style="top: 20px;"
:width="800"
v-model="visible"
@ok="handleOk"
>
<a-form :autoFormCreate="(form)=>{this.form = form}">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="唯一识别码"
hasFeedback
validateStatus="success"
>
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色名称"
hasFeedback
validateStatus="success"
>
<a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
hasFeedback
validateStatus="warning"
>
<a-select v-model="mdl.status">
<a-select-option value="1">正常</a-select-option>
<a-select-option value="2">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
>
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
</a-form-item>
<a-divider />
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="拥有权限"
hasFeedback
>
<a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
<a-col :span="4">
{{ permission.permissionName }}
</a-col>
<a-col :span="20">
<a-checkbox-group :options="permission.actionsOptions"/>
</a-col>
</a-row>
</a-form-item>
</a-form>
</a-modal>
</a-card>
</template>
<script>
import STable from '@/components/table/'
import { getRoleList, getServiceList } from '@/api/manage'
export default {
name: "TableList",
components: {
STable
},
data () {
return {
description: '列表使用场景:后台管理中的权限管理以及角色管理,可用于基于 RBAC 设计的角色权限控制,颗粒度细到每一个操作类型。',
visible: false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
form: null,
mdl: {},
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '唯一识别码',
dataIndex: 'id'
},
{
title: '角色名称',
dataIndex: 'name',
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true
}, {
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return getRoleList(parameter)
.then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
created () {
getServiceList().then(res => {
console.log('getServiceList.call()', res)
})
getRoleList().then(res => {
console.log('getRoleList.call()', res)
})
},
methods: {
handleEdit (record) {
this.mdl = Object.assign({}, record)
this.mdl.permissions.forEach(permission => {
permission.actionsOptions = permission.actionEntitySet.map(action => {
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
})
})
this.visible = true
},
handleOk () {
},
onChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
},
watch: {
/*
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce( (sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
*/
}
}
</script>
\ No newline at end of file
<template>
<a-modal
title="操作"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="唯一识别码"
hasFeedback
>
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色名称"
hasFeedback >
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗?' }] }]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
hasFeedback >
<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
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
>
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
</a-form-item>
<a-divider/>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="拥有权限"
hasFeedback
>
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
<a-col :span="4">
{{ permission.name }}
</a-col>
<a-col :span="20">
<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>
</a-spin>
</a-modal>
</template>
<script>
import { getPermissions } from '@/api/manage'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'
export default {
name: "RoleModal",
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
visible: false,
confirmLoading: false,
mdl: {},
form: this.$form.createForm(this),
permissions: []
}
},
created () {
this.loadPermissions()
},
methods: {
add () {
this.edit({ id: 0 })
},
edit (record) {
this.mdl = Object.assign({}, record)
this.visible = true
// 有权限表,处理勾选
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)
},
close () {
this.$emit('close')
this.visible = false
},
handleOk () {
const _this = this
// 触发表单验证
this.form.validateFields((err, values) => {
// 验证表单没错误
if (!err) {
console.log('form values', values)
_this.confirmLoading = true
// 模拟后端请求 2000 毫秒延迟
new Promise((resolve) => {
setTimeout(() => resolve(), 2000)
}).then(() => {
// Do something
_this.$message.success('保存成功')
_this.$emit('ok')
}).catch(() => {
// Do something
}).finally(() => {
_this.confirmLoading = false
_this.close()
})
}
})
},
handleCancel () {
this.close()
},
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 => {
let 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
<template>
<div class="search-content">
<router-view />
</div>
</template>
<script>
export default {
name: "SearchLayout",
data () {
return {
tabs: {
items: [
{
key: '1',
title: '文章'
},
{
key: '2',
title: '项目'
},
{
key: '3',
title: '应用'
},
],
active: () => {
switch (this.$route.path) {
case '/list/search/article':
return '1'
case '/list/search/project':
return '2'
case '/list/search/application':
return '3'
default:
return '1'
}
},
callback: (key) => {
switch (key) {
case '1':
this.$router.push('/list/search/article')
break
case '2':
this.$router.push('/list/search/project')
break
case '3':
this.$router.push('/list/search/application')
break
default:
this.$router.push('/workplace')
}
}
},
search: true
}
},
computed: {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.search-head{
background-color: #fff;
margin: -25px -24px -24px;
.search-input{
text-align: center;
margin-bottom: 16px;
}
}
.search-content{
margin-top: 48px;
}
</style>
\ No newline at end of file
<template>
<page-layout title="单号:234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
<detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
<detail-list-item term="创建人">曲丽丽</detail-list-item>
<detail-list-item term="订购产品">XX服务</detail-list-item>
<detail-list-item term="创建时间">2018-08-07</detail-list-item>
<detail-list-item term="关联单据"><a>12421</a></detail-list-item>
<detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
<detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
</detail-list>
<a-row slot="extra" class="status-list">
<a-col :xs="12" :sm="12">
<div class="text">状态</div>
<div class="heading">待审批</div>
</a-col>
<a-col :xs="12" :sm="12">
<div class="text">订单金额</div>
<div class="heading">¥ 568.08</div>
</a-col>
</a-row>
<!-- actions -->
<template slot="action">
<a-button-group style="margin-right: 4px;">
<a-button>操作</a-button>
<a-button>操作</a-button>
<a-button><a-icon type="ellipsis"/></a-button>
</a-button-group>
<a-button type="primary" >主操作</a-button>
</template>
<a-card :bordered="false" title="流程进度">
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
<a-step title="创建项目">
</a-step>
<a-step title="部门初审">
</a-step>
<a-step title="财务复核">
</a-step>
<a-step title="完成">
</a-step>
</a-steps>
</a-card>
<a-card style="margin-top: 24px" :bordered="false" title="用户信息">
<detail-list>
<detail-list-item term="用户姓名">付晓晓</detail-list-item>
<detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
<detail-list-item term="身份证">3321944288191034921</detail-list-item>
<detail-list-item term="联系方式">18112345678</detail-list-item>
<detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
</detail-list>
<detail-list title="信息组">
<detail-list-item term="某某数据">725</detail-list-item>
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
<detail-list-item >&nbsp;</detail-list-item>
<detail-list-item term="某某数据">725</detail-list-item>
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
<detail-list-item >&nbsp;</detail-list-item>
</detail-list>
<a-card type="inner" title="多层信息组">
<detail-list title="组名称" size="small">
<detail-list-item term="负责人">林东东</detail-list-item>
<detail-list-item term="角色码">1234567</detail-list-item>
<detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
<detail-list-item term="过期时间">2018-08-08</detail-list-item>
<detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
</detail-list>
<a-divider style="margin: 16px 0" />
<detail-list title="组名称" size="small" :col="1">
<detail-list-item term="学名"> Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗..</detail-list-item>
</detail-list>
<a-divider style="margin: 16px 0" />
<detail-list title="组名称" size="small" :col="2">
<detail-list-item term="负责人">付小小</detail-list-item>
<detail-list-item term="角色码">1234567</detail-list-item>
</detail-list>
</a-card>
</a-card>
<a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
<div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
</a-card>
<!-- 操作 -->
<a-card
style="margin-top: 24px"
:bordered="false"
:tabList="tabList"
:activeTabKey="activeTabKey"
@tabChange="(key) => {this.activeTabKey = key}"
>
<a-table
v-if="activeTabKey === '1'"
:columns="operationColumns"
:dataSource="operation1"
:pagination="false"
>
<template
slot="status"
slot-scope="status">
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
</template>
</a-table>
<a-table
v-if="activeTabKey === '2'"
:columns="operationColumns"
:dataSource="operation2"
:pagination="false"
>
<template
slot="status"
slot-scope="status">
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
</template>
</a-table>
<a-table
v-if="activeTabKey === '3'"
:columns="operationColumns"
:dataSource="operation3"
:pagination="false"
>
<template
slot="status"
slot-scope="status">
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
</template>
</a-table>
</a-card>
</page-layout>
</template>
<script>
import { mixinDevice } from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
name: "Advanced",
components: {
PageLayout,
DetailList,
DetailListItem
},
mixins: [mixinDevice],
data () {
return {
tabList: [
{
key: '1',
tab: '操作日志一'
},
{
key: '2',
tab: '操作日志二'
},
{
key: '3',
tab: '操作日志三'
}
],
activeTabKey: '1',
operationColumns: [
{
title: '操作类型',
dataIndex: 'type',
key: 'type'
},
{
title: '操作人',
dataIndex: 'name',
key: 'name'
},
{
title: '执行结果',
dataIndex: 'status',
key: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '操作时间',
dataIndex: 'updatedAt',
key: 'updatedAt'
},
{
title: '备注',
dataIndex: 'remark',
key: 'remark'
}
],
operation1: [
{
key: 'op1',
type: '订购关系生效',
name: '曲丽丽',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '-'
},
{
key: 'op2',
type: '财务复审',
name: '付小小',
status: 'reject',
updatedAt: '2017-10-03 19:23:12',
remark: '不通过原因'
},
{
key: 'op3',
type: '部门初审',
name: '周毛毛',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '-'
},
{
key: 'op4',
type: '提交订单',
name: '林东东',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '很棒'
},
{
key: 'op5',
type: '创建订单',
name: '汗牙牙',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '-'
}
],
operation2: [
{
key: 'op2',
type: '财务复审',
name: '付小小',
status: 'reject',
updatedAt: '2017-10-03 19:23:12',
remark: '不通过原因'
},
{
key: 'op3',
type: '部门初审',
name: '周毛毛',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '-'
},
{
key: 'op4',
type: '提交订单',
name: '林东东',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '很棒'
}
],
operation3: [
{
key: 'op2',
type: '财务复审',
name: '付小小',
status: 'reject',
updatedAt: '2017-10-03 19:23:12',
remark: '不通过原因'
},
{
key: 'op3',
type: '部门初审',
name: '周毛毛',
status: 'agree',
updatedAt: '2017-10-03 19:23:12',
remark: '-'
}
],
}
},
filters: {
statusFilter(status) {
const statusMap = {
'agree': '成功',
'reject': '驳回'
}
return statusMap[status]
},
statusTypeFilter(type) {
const statusTypeMap = {
'agree': 'success',
'reject': 'error'
}
return statusTypeMap[type]
}
}
}
</script>
<style lang="less" scoped>
.detail-layout {
margin-left: 44px;
}
.text {
color: rgba(0, 0, 0, .45);
}
.heading {
color: rgba(0, 0, 0, .85);
font-size: 20px;
}
.no-data {
color: rgba(0, 0, 0, .25);
text-align: center;
line-height: 64px;
font-size: 16px;
i {
font-size: 24px;
margin-right: 16px;
position: relative;
top: 3px;
}
}
.mobile {
.detail-layout {
margin-left: unset;
}
.text {
}
.status-list {
text-align: left;
}
}
</style>
\ No newline at end of file
<template>
<page-layout :title="title">
<a-card :bordered="false">
<detail-list title="退款申请">
<detail-list-item term="取货单号">1000000000</detail-list-item>
<detail-list-item term="状态">已取货</detail-list-item>
<detail-list-item term="销售单号">1234123421</detail-list-item>
<detail-list-item term="子订单">3214321432</detail-list-item>
</detail-list>
<a-divider style="margin-bottom: 32px"/>
<detail-list title="用户信息">
<detail-list-item term="用户姓名">付小小</detail-list-item>
<detail-list-item term="联系电话">18100000000</detail-list-item>
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
<detail-list-item term="备注"></detail-list-item>
</detail-list>
<a-divider style="margin-bottom: 32px"/>
<div class="title">退货商品</div>
<s-table
style="margin-bottom: 24px"
:columns="goodsColumns"
:data="loadGoodsData">
</s-table>
<div class="title">退货进度</div>
<s-table
style="margin-bottom: 24px"
:columns="scheduleColumns"
:data="loadScheduleData">
<template
slot="status"
slot-scope="status">
<a-badge :status="status" :text="status | statusFilter"/>
</template>
</s-table>
</a-card>
</page-layout>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from "ant-design-vue/es/badge/Badge"
const DetailListItem = DetailList.Item
export default {
components: {
PageLayout,
ABadge,
DetailList,
DetailListItem,
STable
},
data () {
return {
goodsColumns: [
{
title: '商品编号',
dataIndex: 'id',
key: 'id'
},
{
title: '商品名称',
dataIndex: 'name',
key: 'name'
},
{
title: '商品条码',
dataIndex: 'barcode',
key: 'barcode'
},
{
title: '单价',
dataIndex: 'price',
key: 'price',
align: 'right'
},
{
title: '数量(件)',
dataIndex: 'num',
key: 'num',
align: 'right'
},
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
align: 'right'
}
],
// 加载数据方法 必须为 Promise 对象
loadGoodsData: () => {
return new Promise((resolve => {
resolve({
data: [
{
id: '1234561',
name: '矿泉水 550ml',
barcode: '12421432143214321',
price: '2.00',
num: '1',
amount: '2.00'
},
{
id: '1234562',
name: '凉茶 300ml',
barcode: '12421432143214322',
price: '3.00',
num: '2',
amount: '6.00'
},
{
id: '1234563',
name: '好吃的薯片',
barcode: '12421432143214323',
price: '7.00',
num: '4',
amount: '28.00'
},
{
id: '1234564',
name: '特别好吃的蛋卷',
barcode: '12421432143214324',
price: '8.50',
num: '3',
amount: '25.50'
}
],
pageSize: 10,
pageNo: 1,
totalPage: 1,
totalCount: 10
})
})).then(res => {
return res
})
},
scheduleColumns: [
{
title: '时间',
dataIndex: 'time',
key: 'time'
},
{
title: '当前进度',
dataIndex: 'rate',
key: 'rate'
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '操作员ID',
dataIndex: 'operator',
key: 'operator'
},
{
title: '耗时',
dataIndex: 'cost',
key: 'cost'
}
],
loadScheduleData: () => {
return new Promise((resolve => {
resolve({
data: [
{
key: '1',
time: '2017-10-01 14:10',
rate: '联系客户',
status: 'processing',
operator: '取货员 ID1234',
cost: '5mins'
},
{
key: '2',
time: '2017-10-01 14:05',
rate: '取货员出发',
status: 'success',
operator: '取货员 ID1234',
cost: '1h'
},
{
key: '3',
time: '2017-10-01 13:05',
rate: '取货员接单',
status: 'success',
operator: '取货员 ID1234',
cost: '5mins'
},
{
key: '4',
time: '2017-10-01 13:00',
rate: '申请审批通过',
status: 'success',
operator: '系统',
cost: '1h'
},
{
key: '5',
time: '2017-10-01 12:00',
rate: '发起退货申请',
status: 'success',
operator: '用户',
cost: '5mins'
}
],
pageSize: 10,
pageNo: 1,
totalPage: 1,
totalCount: 10
})
})).then(res => {
return res
})
},
}
},
filters: {
statusFilter(status) {
const statusMap = {
'processing': '进行中',
'success': '完成',
'failed': '失败'
}
return statusMap[status]
}
},
computed: {
title () {
return this.$route.meta.title
}
},
}
</script>
<style lang="less" scoped>
.title {
color: rgba(0,0,0,.85);
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
}
</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.dataTable"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="数据ID">
<a-input placeholder="请输入ID" v-model="queryParam.dataId"></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>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button
@click="batchDel"
v-if="selectedRowKeys.length > 0"
ghost
type="primary"
icon="delete">批量删除
</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" @click="onClearSelected">清空</a>
</div>
<a-table
:columns="columns"
size="middle"
:dataSource="dataSource"
:loading="loading"
:pagination="pagination"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
>
<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:;" @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="handleAddSub(record)">添加下级</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="handleDataRule(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>
<!-- 字符串超长截取省略号显示 -->
<span slot="url" slot-scope="text">
<j-ellipsis :value="text" :length="25"/>
</span>
<!-- 字符串超长截取省略号显示-->
<span slot="component" slot-scope="text">
<j-ellipsis :value="text"/>
</span>
</a-table>
</div>
<!-- table区域-end -->
<!-- <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal> -->
<!-- <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list> -->
</a-card>
</template>
<script>
// import PermissionModal from './modules/PermissionModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import PermissionDataRuleList from './PermissionDataRuleList'
import JEllipsis from '@/components/jeecg/JEllipsis'
const columns = [
{
title: '菜单名称',
dataIndex: 'name',
key: 'name'
}, {
title: '菜单类型',
dataIndex: 'menuType',
key: 'menuType',
customRender: function(text) {
if (text == 0) {
return '菜单'
} else if (text == 1) {
return '菜单'
} else if (text == 2) {
return '按钮/权限'
} else {
return text
}
}
},/*{
title: '权限编码',
dataIndex: 'perms',
key: 'permissionCode',
},*/{
title: 'icon',
dataIndex: 'icon',
key: 'icon'
},
{
title: '组件',
dataIndex: 'component',
key: 'component',
scopedSlots: { customRender: 'component' }
},
{
title: '路径',
dataIndex: 'url',
key: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '排序',
dataIndex: 'sortNo',
key: 'sortNo'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'PermissionListAsync',
mixins: [JeecgListMixin],
components: {
// PermissionDataRuleList,
// PermissionModal,
JEllipsis
},
data() {
return {
description: '这是菜单管理页面',
// 表头
columns: columns,
loading: false,
pagination: {},
url: {
list: '/property/propertySettled/list',
delete: '/sys/permission/delete',
deleteBatch: '/sys/permission/deleteBatch'
}
}
},
methods: {
loadData() {
this.loading = true
getPropertyListApi({
pageNo: 1,
pageSize: 10
}).then((res) => {
if (res.success) {
const pagination = { ...this.pagination };
pagination.total = res.result.total
this.dataSource = res.result.records
}
}).finally(()=>{
this.loading = false
})
},
// 打开数据规则编辑
handleDataRule(record) {
this.$refs.PermissionDataRuleList.edit(record)
},
handleAddSub(record) {
this.$refs.modalForm.title = "添加子菜单";
this.$refs.modalForm.disableSubmit = false;
this.$refs.modalForm.edit({status:'1',permsType:'1',route:true,'parentId':record.id,menuType:1});
}
}
}
</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.propertyName"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="入驻时间">
<a-input placeholder="请选择入驻时间" v-model="queryParam.createTime"></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>
<!-- 操作按钮区域 -->
<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="empowerDate" slot-scope="text, record">
<span>{{record.empowerBeginDate}}{{record.empowerEndDate}}</span>
</span>
<span slot="action" slot-scope="text, record">
<a @click="onLoadDetail(record, 'edit')">编辑</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="onLoadDetail(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>
<!-- 字符串超长截取省略号显示 -->
<span slot="url" slot-scope="text">
<j-ellipsis :value="text" :length="25"/>
</span>
<!-- 字符串超长截取省略号显示-->
<span slot="component" slot-scope="text">
<j-ellipsis :value="text"/>
</span>
</a-table>
</div>
<!-- table区域-end -->
<property-settled-modal ref="modalForm" @ok="modalFormOk"></property-settled-modal>
<a-modal
:title="modalTitle + '入驻物业集团'"
width="60%"
:visible="visible"
:closable="false"
:maskClosable="false"
>
<template slot="footer">
<a-button @click="close">关闭</a-button>
<a-button type="primary" @click="onSubmit">确认</a-button>
</template>
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-card title="物业集团基本信息">
<a-row>
<a-col :span="12">
<a-form-model-item label="物业集团名称" prop="propertyName">
<a-input
v-model="form.propertyName"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="统一信用代码" prop="propertyCode">
<a-input
v-model="form.propertyCode"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="法人代表" prop="legalName">
<a-input
v-model="form.legalName"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="注册资本" prop="registCapital">
<a-input-number id="inputNumber" v-model="form.registCapital" :min="1" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系人" prop="contactName">
<a-input
v-model="form.contactName"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系人电话" prop="contactPhone">
<a-input
v-model="form.contactPhone"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="注册地址" prop="registAdress">
<a-input
v-model="form.registAdress"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="详细地址" prop="adressInfo" :labelCol="{ span: 3 }">
<a-input
v-model="form.adressInfo"
placeholder="请输入"
/>
</a-form-model-item>
</a-col>
<a-col :span="21" :offset="3">
<a-form-model-item label="" :labelCol="{ span: 3 }">
<div>
<div id="container" style="width:100%;height:100%"></div>
</div>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="集团LOGO" prop="logoUrl" :labelCol="{ span: 3 }">
<j-image-upload bizPath="scott/pic" v-model="form.logoUrl"></j-image-upload>
<span>只能上传jpg/png格式文件,文件不能超过50kb</span>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="集团介绍" prop="groupInfo" :labelCol="{ span: 3 }">
<a-textarea
v-model="form.groupInfo"
placeholder="请输入"
:auto-size="{ minRows: 3, maxRows: 5 }"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card title="授权信息">
<a-row>
<a-col :span="24">
<a-form-model-item label="授权日期" prop="empowerType" :labelCol="{ span: 3 }">
<a-radio-group v-model="form.empowerType">
<a-radio value="1">永久</a-radio>
<a-radio value="2">授权日期</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="21" :offset="3" v-if="form.empowerType === '2'">
<a-form-model-item label="" prop="empowerDate">
<a-range-picker v-model="form.empowerDate" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="授权物业数量" prop="empowerPropertyNum" :labelCol="{ span: 3 }">
<a-input-number id="inputNumber" v-model="form.empowerPropertyNum" :min="1" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="收费标准" prop="chargingStandardId" :labelCol="{ span: 3 }">
<a-select style="width: 120px" v-model="form.chargingStandardId">
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card title="合同附件">
<a-row>
<a-col :span="24">
<a-form-model-item label="合同附件" prop="contractUrl" :labelCol="{ span: 3 }">
<j-upload v-model="form.contractUrl"></j-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
</a-form-model>
</a-modal>
</a-card>
</template>
<script>
// import { getPropertyListApi, getSystemSubmenu, getSystemSubmenuBatch } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import PropertySettledModal from './modules/PropertySettledModal'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JImageUpload from '@/components/jeecg/JImageUpload'
import JUpload from '@/components/jeecg/JUpload'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
const columns = [
{
title: '物业名称',
dataIndex: 'propertyName',
key: 'propertyName'
},
{
title: '统一社会信用代码',
dataIndex: 'creditCode',
key: 'creditCode'
},
{
title: '联系人',
dataIndex: 'contactName',
key: 'contactName'
},
{
title: '电话',
dataIndex: 'contactPhone',
key: 'contactPhone'
},
{
title: '授权时间',
dataIndex: 'empowerDate',
key: 'empowerDate'
},
{
title: '授权物业数量',
dataIndex: 'ontrialCommunityNum',
key: 'ontrialCommunityNum'
},
{
title: '审核状态',
dataIndex: 'auditStatus',
key: 'auditStatus',
customRender: function(text) {
return filterDictTextByCache('auditStatus', text);
}
},
{
title: '到期提示',
dataIndex: 'ontrialEndDate',
key: 'ontrialEndDate'
},
{
title: '冻结/解冻',
dataIndex: 'refuseDesc',
key: 'refuseDesc'
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 150
}
]
export default {
name: 'PermissionListAsync',
mixins: [JeecgListMixin],
components: {
PropertySettledModal,
JEllipsis,
JUpload,
JImageUpload
},
data() {
return {
// 表头
columns: columns,
loading: false,
pagination: {
total: 0,
current: 1,
pageSize: 10,
showSizeChanger: true
},
url: {
list: "/property-company/property/propertySettled/list",
delete: '/property-company/sys/permission/delete',
deleteBatch: '/property-company/sys/permission/deleteBatch'
},
modalTitle: '新增',
visible: false,
labelCol: { span: 6 },
wrapperCol: { span: 14 },
other: '',
form: {
propertyName: '',
propertyCode: '',
legalName: '',
registCapital: undefined,
contactName: '',
contactPhone: '',
registAdress: '',
adressInfo: '',
logoUrl: [],
groupInfo: '',
empowerType: '1',
empowerDate: [],
empowerPropertyNum: undefined,
chargingStandardId: '',
contractUrl: []
},
rules: {
propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
propertyCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
registCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
adressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
logoUrl: [{ required: true, message: '请上传集团LOGO', trigger: 'change' }],
empowerPropertyNum: [{ required: true, message: '请输入授权物业数量', trigger: 'blur' }],
chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }]
},
uploadDisabled: false
}
},
methods: {
onLoadDetail(record, type) {
record['registAdress'] = [record.provinceCode, record.cityCode, record.countyCode]
if(type === 'edit') {
this.handleEdit(record)
} else {
this.handleDetail(record)
}
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
close() {
this.visible = false
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs.ruleForm.resetFields();
},
}
}
</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-card title="物业集团基本信息">
<a-row>
<a-col :span="12">
<a-form-model-item label="物业集团名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
<a-input v-model="model.propertyName" placeholder="请输入物业集团名称" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="统一信用代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="creditCode">
<a-input v-model="model.creditCode" placeholder="请输入统一信用代码" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="法人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="legalName">
<a-input v-model="model.legalName" placeholder="请输入法人姓名" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="注册资本" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
<a-input-number v-model="model.registCapital" :min="1" placeholder="请输入注册资本" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
<a-input v-model="model.contactName" placeholder="请输入联系人" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
<a-input v-model="model.contactPhone" placeholder="请输入联系人电话" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="注册地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registAdress">
<area-cascader
v-model="model.registAdress"
:data="pcaa"
:level="1"
type="all"
@change="addressChange"
style="width:100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="详细地址" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="addressInfo">
<a-input v-model="model.addressInfo" placeholder="请输入详细地址" @blur="addressBlur" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="" :offset="3" :pull="3" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }">
<div class="hhh">
<div id="container" style="width:100%;height:200px"></div>
</div>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="集团logo" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="logoUrl">
<j-image-upload bizPath="scott/pic" v-model="model.logoUrl"></j-image-upload>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="集团介绍" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="groupInfo">
<a-textarea v-model="model.groupInfo" placeholder="请输入集团介绍" :auto-size="{ minRows: 3, maxRows: 5 }" />
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card title="授权信息">
<a-row>
<!-- <a-col :span="12">
<a-form-model-item label="试用日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerType">
<a-range-picker v-model="model.empowerDate" placeholder="请选择试用日期" />
</a-form-model-item>
</a-col> -->
<a-col :span="12">
<a-form-model-item label="授权开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerBeginDate">
<j-date placeholder="请选择授权开始日期" v-model="model.empowerBeginDate" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="授权结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empowerEndDate">
<j-date placeholder="请选择授权结束日期" v-model="model.empowerEndDate" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="试用小区数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ontrialCommunityNum">
<a-input-number v-model="model.ontrialCommunityNum" placeholder="请输入试用小区数量" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="收费标准" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingStandardId">
<a-select v-model="model.chargingStandardId" placeholder="请选择收费标准" style="width: 100%">
<a-select-option v-for="item in costList" :key="item.id" :value="item.id">{{item.chargingName}}</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="adminLoginName">
<a-input v-model="model.adminLoginName" placeholder="请输入管理员账户" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="管理员密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPassword">
<a-input v-model="model.adminPassword" placeholder="请输入管理员密码" ></a-input>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card title="合同附件">
<a-row>
<a-col :span="24">
<a-form-model-item label="合同附件" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="contractUrl">
<j-upload v-model="model.contractUrl"></j-upload>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
const mapZoom = [5,8,10,12]
let timer = null;
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
export default {
name: 'PropertySettledForm',
props: {
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false
}
},
data () {
return {
pcaa: this.$Jpcaa,
model:{
propertyName: '',
creditCode: '',
legalName: '',
registCapital: undefined,
contactName: '',
contactPhone: '',
registAdress: [],
provinceName: '',
provinceCode: '',
cityName: '',
cityCode: '',
countyName: '',
countyCode: '',
addressInfo: '',
logoUrl: '',
groupInfo: '',
empowerBeginDate: '',
empowerEndDate: '',
ontrialCommunityNum: undefined,
chargingStandardId: '',
contractUrl: '',
adminLoginName: '',
adminPassword: '123456',
longitude: '',
latitude: ''
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
creditCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
registCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
addressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
logoUrl: [{ required: true, message: '请上传集团LOGO', trigger: 'change' }],
chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
adminLoginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }]
},
url: {
add: "/property-company/property/propertySettled/add",
edit: "/property-company/property/propertySettled/edit",
queryById: "/property-company/property/propertySettled/queryById"
},
costList: [],
mapRef: null,
}
},
computed: {
formDisabled(){
return this.disabled
},
},
watch: {
'model.contactPhone': {
handler(newV, oldV) {
this.model.adminLoginName = newV
}
},
'model.addressInfo': {
handler(newV) {
if(newV) {
clearTimeout(timer)
timer = setTimeout(()=> {
// this.getLongitude(this.model.categoryCodes[0], this.model.categoryCodes.join('') + newV, mapZoom[3])
}, 1000)
}
}
}
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
this.onLoadCostList()
},
mounted() {
this.mapRef = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(108.5525, 34.3237); // 创建点坐标
this.mapRef.centerAndZoom(point, mapZoom[0]);
// var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
// this.mapRef.addControl(zoomCtrl);
this.mapRef.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.mapRef.addEventListener('click', e=>this.getAddress(e));
},
methods: {
async onLoadCostList() {
let data = await getCostListApi({
pageNo: 1,
pageSize: 10
})
this.costList = data.result.records
},
add () {
this.edit(this.modelDefault);
},
edit (record) {
this.model = Object.assign({}, record);
this.visible = true;
},
addressChange(val) {
const province = Object.keys(val[0])[0]
const city = Object.keys(val[1])[0]
const county = Object.keys(val[2])[0]
this.model.provinceName = val[0][province]
this.model.provinceCode = province
this.model.cityName = val[1][city]
this.model.cityCode = city
this.model.countyName = val[2][county]
this.model.countyCode = county
if(this.model.addressInfo) {
this.getLongitude(this.model.provinceName, (this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo), mapZoom[3])
}
},
addressBlur(val) {
if(this.model.provinceName) {
this.getLongitude(this.model.provinceName, (this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value), mapZoom[3])
}
},
getAddress(e) {
let _this = this;
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function(result){
if(result) {
_this.mapRef.clearOverlays();
_this.model.registAdress = [result.addressComponents.province, result.addressComponents.city, result.addressComponents.district]
_this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
_this.model.longitude = result.point.lng
_this.model.latitude = result.point.lat
_this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
console.log(result)
}
});
},
positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
var point = new BMapGL.Point(mapCenterLng, mapCenterLat); // 创建点坐标
this.mapRef.centerAndZoom(point, mapzoom);
var marker = new BMapGL.Marker(point, {title: address}); // 创建标注
this.mapRef.addOverlay(marker); // 将标注添加到地图中
let _this = this;
// marker.addEventListener("click", function(){
var label = new BMapGL.Label(address, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, -55) // 设置标注的偏移量
})
_this.mapRef.addOverlay(label); // 将标注添加到地图中
label.setStyle({ // 设置label的样式
color: '#333',
fontSize: '14px',
padding: '4px 10px',
border: '1px solid #1E90FF',
borderRadius: '4px',
transform: 'translateX(-40%)'
})
// });
},
getLongitude(city, address, zoom) {
let _this = this
var myGeo = new BMapGL.Geocoder();
myGeo.getPoint(address, function(point){
if(point){
_this.mapRef.clearOverlays();
_this.positionMap(point.lng, point.lat, zoom, address)
}else{
console.log('您选择的地址没有解析到结果!');
}
}, city)
},
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';
}
this.model.registAdress = undefined
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;
})
}
})
},
},
beforeDestroy() {
clearTimeout(timer)
this.mapRef.removeEventListener('click', e=>this.getAddress(e));
}
}
</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 './PropertySettledForm'
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
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论