kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移

Browse Source
This commit is contained in:
yanran200730
2022-02-09 10:15:39 +08:00
parent 8440693bbd
commit 407d8d4baa
31 changed files with 10557 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
project/sass/apps/AppCommunityManage/AppCommunityManage.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<section class="AppCommunityManage ailist-wrapper">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict" />
</section>
</template>
<script>
import List from './components/List'
import Add from './components/Add'
export default {
name: 'AppCommunityManage',
label: '小区管理',
props: {
instance: Function,
dict: Object,
},
data() {
return {
component: 'List',
params: {},
include: [],
}
},
components: {
Add,
List,
},
methods: {
onChange(data) {
if (data.type === 'add') {
this.component = 'Add'
this.params = data.params
}
if (data.type === 'list') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
}
})
}
},
},
}
</script>
<style lang="scss">
.AppCommunityManage {
height: 100%;
}
</style>

259
project/sass/apps/AppCommunityManage/components/Add.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<ai-detail showFooter class="add-detail">
<template slot="title">
<ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
:isShowBottomBorder="true"></ai-title>
</template>
<template slot="content">
<div class="add-form">
<ai-bar title="基础信息"></ai-bar>
<el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
<el-form-item label="小区名称" prop="communityName"
:rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
<el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
</el-form-item>
<el-form-item label="行政归属" prop="areaId" :rules="[
{ required: true, message: '请选择行政归属', trigger: 'blur' },
{ pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
<ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
@select="handleAreaSelect"/>
</el-form-item>
<el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
<el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
</el-form-item>
<el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
:rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
<el-tag
:key="index"
v-for="(tag,index) in form.girdInfoList"
closable
style="margin-right: 16px;"
:disable-transitions="false"
@close="handleClose(tag)">
{{ tag.girdName }}
</el-tag>
<el-button size="small" @click="showGrid=true">选择网格</el-button>
</el-form-item>
</el-form>
</div>
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
@opened="beforeSelectTree" border width="720px">
<div class="grid">
<el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree"
:check-strictly="true" show-checkbox
:default-checked-keys="treeObj.checkedKeys" default-expand-all highlight-current>
</el-tree>
</div>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showGrid=false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
</div>
</ai-dialog>
</template>
<template slot="footer" class="footer">
<el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
<el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
</template>
</ai-detail>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Add',
props: {
dict: Object,
params: Object,
instance: Function,
},
data() {
return {
gridList: [],
girdId: '',
subGridId: '',
subGridList: [],
sonGridList: [],
form: {
communityName: '',
areaName: '',
areaId: '',
girdId: '',
dealOpinion: '',
recordUser: '',
address: '',
girdInfoList: [],
girdName: '',
},
showGrid: false,
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
checkedKeys: [],
},
}
},
computed: {
...mapState(['user']),
isEdit() {
return !!this.params.id
},
},
created() {
this.dict.load('cardType', 'sex', 'nation').then(() => {
if (this.params && this.params.id) {
this.getInfo(this.params.id)
}
})
},
methods: {
beforeSelectTree() {
this.treeObj.checkedKeys = [];
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = res.data;
if (this.form.girdInfoList.length) {
this.form.girdInfoList.map((e) => {
this.treeObj.checkedKeys.push(e.id);
});
}
}
});
},
getCheckedTree() {
if (this.$refs.tree.getCheckedNodes().length > 1) {
return this.$message.error('不能绑定多个网格')
}
this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
this.showGrid = false;
},
handleClose(tag) {
this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
},
getInfo(id) {
this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
if (res.code === 0) {
this.girdId = res.data.girdId0
this.form.communityName = res.data.communityName
this.form.address = res.data.address
this.form.areaName = res.data.areaName
this.form.girdId = res.data.girdId
this.form.girdName = res.data.girdName
this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
this.$set(this.form, 'areaId', res.data.areaId)
}
})
},
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.girdInfoList.length > 1) {
return this.$message.error('不能绑定多个网格')
}
this.form.girdName = this.form.girdInfoList[0].girdName
this.form.girdId = this.form.girdInfoList[0].id
this.instance
.post(`/app/appcommunityinfo/addOrUpdate`, {
...this.form,
id: this.params ? this.params.id : '',
})
.then((res) => {
if (res.code === 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 800)
}
})
}
})
},
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
handleAreaSelect(v) {
this.form.areaName = v?.[0]?.label
},
},
}
</script>
<style lang="scss" scoped>
.add-detail {
height: 100%;
overflow: hidden;
background: #f2f4f6 !important;
.add-form__item {
display: flex;
align-items: center;
}
::v-deep .el-form-item__label {
padding-right: 40px;
}
::v-deep .ai-detail__footer {
background: #fff !important;
}
::v-deep .ai-detail__content--active {
padding: 20px;
.ai-detail__content--wrapper {
width: 100%;
}
.aibar {
padding: 0 16px;
}
.el-form {
padding: 0 96px 0 50px;
}
.add-form {
background: #fff;
}
}
::v-deep .ai-wrapper {
align-items: inherit !important;
}
.user-wrapper {
display: flex;
justify-content: space-between;
}
.avatar {
width: 100px;
height: 100px;
object-fit: contain;
border-radius: 10px;
}
.footer-btn {
width: 130px;
}
.el-form {
padding-bottom: 80px;
}
}
</style>

202
project/sass/apps/AppCommunityManage/components/List.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<ai-list class="AppPetitionManage">
<template slot="title">
<ai-title title="小区管理" isShowBottomBorder />
</template>
<template slot="content">
<ai-search-bar class="search-bar" bottomBorder>
<template slot="left">
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
<el-button :disabled="!ids.length" icon="iconfont iconDelete" size="small" @click="removeAll">删除</el-button>
</template>
<template slot="right">
<el-input v-model="search.communityName" class="search-input" size="small" @change=";(search.current = 1), getList()" placeholder="小区名称" suffix-icon="iconfont iconSearch" clearable />
</template>
</ai-search-bar>
<ai-search-bar style="margin-top: 15px;">
<template #right>
<!-- :importParams="{ areaId: user.info && user.info.areaId }" -->
<ai-import :instance="instance" :dict="dict" type="appcommunityinfo" name="小区管理" @success="getList()">
<el-button icon="iconfont iconImport">导入</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appcommunityinfo/listExport" :params="param" fileName="小区管理模板" :disabled="tableData.length == 0">
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
</ai-download>
</template>
</ai-search-bar>
<!-- <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="handleSelectionChange"> -->
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="(v) => (ids = v.map((e) => e.id))" :size.sync="search.size" @getList="getList">
<el-table-column slot="options" label="操作" align="center">
<template slot-scope="{ row }">
<span class="table-btn" title="编辑" @click="toEdit(row.id)">编辑</span>
<span class="table-btn table-btn__remove" title="删除" @click="remove(row.id)">删除</span>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
export default {
name: 'List',
props: {
instance: Function,
dict: Object,
},
data() {
return {
search: {
current: 1,
size: 10,
communityName: '',
},
ids: [],
total: 0,
colConfigs: [
{ type: 'selection' },
{ prop: 'communityName', label: '小区名称', align: 'center', width: '200' },
{ prop: 'areaName', label: '行政划分' },
{ prop: 'address', label: '小区地址' },
{ prop: 'girdName', label: '所属网格' },
{ prop: 'buildingNumber', label: '总楼栋数（栋）', align: 'center' },
{ prop: 'createUserName', label: '创建人', align: 'center' },
{ prop: 'createTime', label: '创建时间', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' },
],
tableData: [],
}
},
computed: {
importParams() {
return {
name: this.search.name,
ids: this.ids.map((v) => v.id).join(','),
}
},
param() {
let params = {}
if (this.ids.length) {
params = {
...params,
ids: this.ids,
}
} else {
params = {
...params,
...this.search,
ids: this.ids,
}
}
return params
},
},
created() {
this.getList()
},
methods: {
getList() {
this.instance
.post(`/app/appcommunityinfo/list`, null, {
params: {
...this.search,
},
})
.then((res) => {
if (res?.data) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
handleSelectionChange(e) {
this.ids = e
},
toEdit(id) {
this.$emit('change', {
type: 'add',
params: {
id: id,
},
})
},
removeAll() {
// this.remove(this.ids.map((v) => v.id).join(','))
var id = this.ids.join(',')
this.remove(id)
},
remove(id) {
this.$confirm('确定删除该数据？').then(() => {
this.instance.post(`/app/appcommunityinfo/delete?ids=${id}`).then((res) => {
if (res.code == 0) {
this.$message.success('删除成功！')
this.getList()
}
})
})
},
onReset() {
this.search.current = 1
this.search.communityName = ''
this.getList()
},
onAdd(id) {
this.$emit('change', {
type: 'add',
params: {
id: id,
},
})
},
},
}
</script>
<style lang="scss" scoped>
.AppPetitionManage {
::v-deep th {
font-weight: bold !important;
}
.table-btn {
color: #2266ff;
font-size: 14px;
cursor: pointer;
&:last-child:hover {
color: #f46;
}
&:first-child {
margin-right: 16px;
&:hover {
opacity: 0.6;
}
}
}
.icon-color89B {
margin-right: 8px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
}
</style>