elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

分类首页

shibei_master
jiangyy 4 years ago
parent
54b3d0838c
commit
756abbbe00
4 changed files with 611 additions and 554 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 194
      src/assets/scss/modules/management/categoryMain.scss
  2. 202
      src/views/modules/base/category/addCategory.vue
  3. 326
      src/views/modules/base/category/main.vue
  4. 443
      src/views/modules/base/resi.vue

194
src/assets/scss/modules/management/categoryMain.scss
View File

@ -4,90 +4,154 @@
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
border-radius: 5px; border-radius: 5px;
padding: 35px 0; padding: 35px 0 15px;
}
.div_tip { .div_tip {
font-size: 24px; font-size: 24px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-left: 42px; margin-left: 42px;
} }
.div_room_bar { .div_list {
box-sizing: border-box; box-sizing: border-box;
margin-top: 5px; margin-top: 5px;
height: calc(100vh - 230px); height: calc(100vh - 210px);
} }
.div_room { .div_all_list {
// height: calc(88vh - 40px); height: calc(100vh - 260px);
// margin-top: 9px; }
.div_room {
// height: calc(88vh - 40px);
// margin-top: 9px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-left: 42px;
// margin: 0 21px 0 21px;
.item {
width: 340px;
height: 120px;
background: #ffffff;
box-shadow: 0px 0px 17px 3px #eaeaea;
border-radius: 6px;
margin: 15px 25px 15px 0;
display: flex; display: flex;
flex-wrap: wrap; position: relative;
justify-content: flex-start;
margin-left: 42px;
// margin: 0 21px 0 21px;
.item {
width: 340px;
height: 120px;
background: #ffffff;
box-shadow: 0px 0px 17px 3px #eaeaea;
border-radius: 6px;
margin-top: 30px;
display: flex;
.item_category { .item_category {
width: 100%;
display: flex;
align-items: center;
padding: 17px 16px;
> img {
width: 86px;
height: 86px;
}
.item_content {
margin-left: 16px;
width: 100%;
text-align: left;
display: flex; display: flex;
align-items: center; flex-direction: column;
padding: 17px 16px; justify-content: flex-start;
> img {
width: 86px; .item_count {
height: 86px; font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
} }
.item_content { .item_row2 {
margin-left: 16px; margin-top: 21px;
text-align: left; display: flex;
justify-content: space-between;
.row_left {
font-size: 20px;
font-family: PingFang SC;
font-weight: 500;
color: #202020;
}
.item_count { .row_right {
margin-top: 29px; margin: 5px 10px 0 0;
font-size: 28px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: 500;
color: #333333; text-decoration: underline;
color: #00a7a9;
cursor: pointer;
} }
} }
} }
.item_add { > span {
margin-left: 16px;
font-size: 24px;
}
}
.item_add {
cursor: pointer;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
padding: 17px 16px;
> img {
width: 86px;
height: 86px;
}
> span {
font-size: 24px; font-size: 24px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 350px;
display: flex;
align-items: center;
padding: 17px 16px;
> img {
width: 86px;
height: 86px;
}
> span { margin-left: 16px;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 350px;
margin-left: 16px;
}
} }
} }
.icon_circle {
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
height: 23px;
width: 23px;
background-color: #ffffff;
border-radius: 50%;
border: 1px solid #a5a5a5;
}
.icon_sel {
cursor: pointer;
background-color: #6bb9f8;
border: 1px solid #6bb9f8;
}
} }
}
.div_room::after {
content: '';
flex: 1;
}
.div_btn {
margin-top: 15px;
display: flex;
width: 100%;
justify-content: center;
.div_room::after { .btn_right {
content: ''; margin-left: 50px;
flex: 1;
} }
} }

202
src/views/modules/base/category/addCategory.vue
View File

@ -0,0 +1,202 @@
<template>
<div>
<div class="div_tip">
全部类别
</div>
<div class="div_list div_all_list">
<el-scrollbar style="height:100%">
<div class="div_room">
<div v-for="(item,index) in defaultList"
:key="index"
class="item"
@click="handelSelCategory(index)">
<div v-if="item.selected"
class="icon_circle icon_sel">
<!-- <icon name="el-icon-check"
scale="20"></icon> -->
<i class="el-icon-check"
style="font-size: 17px; color: #5d5d5d ;margin-left:1px;margin-top:2px" />
</div>
<div v-if="!item.selected"
class="icon_circle"></div>
<div class="item_category">
<img :src="item.managementIcon"
alt />
<span>{{item.label}}</span>
</div>
</div>
</div>
</el-scrollbar>
</div>
<div class="div_btn">
<el-button type="warning"
@click="handleCancle">取消</el-button>
<el-button type="primary"
class="btn_right"
@click="handleConfirm">确定</el-button>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
let loading;//加载动画
export default {
data () {
return {
defaultList: [],
addList: []
}
},
async mounted () {
},
methods: {
async initData () {
await this.getDefaultCategoryList()
this.addList = [...this.categoryList]
this.addList.pop()
},
//获取默认分类信息
async getDefaultCategoryList () {
const url = "/oper/customize/icindividualcategorymanage/individualcategoryalllist"
// const url = "http://yapi.elinkservice.cn/mock/245/oper/customize/icindividualcategorymanage/individualcategoryalllist"
let params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
// this.defaultList = []
this.defaultList = [...data]
} else {
this.$message.error(msg)
}
},
handelSelCategory (index) {
let obj = JSON.parse(JSON.stringify(this.defaultList[index]))
if (!obj.selected) {//原状态不是选中状态，在数组最后添加
this.addList.push(obj)
} else {//原状态是选中状态，从数组里找到并去除
for (let itemIndex in this.addList) {
// debugger
let tempObj = this.addList[itemIndex]
if (obj.columnName === tempObj.columnName) {
this.addList.splice(itemIndex, 1);
break
}
}
this.addList.forEach(element => {
console.log(element.label)
});
}
obj.selected = !obj.selected
this.$set(this.defaultList, index, obj)
},
async handleConfirm () {
this.addList.forEach((element, index) => {
element.sort = index
element.columnId = element.id
});
const url = "/oper/customize/icindividualcategorymanage/editindividualcategory"
const { data, code, msg } = await requestPost(url, this.addList)
if (code === 0) {
this.$emit('handleConfirm')
} else {
this.$message.error(msg)
}
},
handleCancle () {
this.$emit('handleCancle')
},
//开启加载动画
startLoading () {
loading = Loading.service({
lock: true, //是否锁定
text: '正在加载……', //加载中需要显示的文字
background: 'rgba(0,0,0,.7)' //背景颜色
});
},
//结束加载动画
endLoading () {
//clearTimeout(timer);
if (loading) {
loading.close();
}
},
},
props: {
categoryList: {
type: Array,
default () {
return []
}
}
},
computed: {
// selectWidth () {
// let width = this.selHouseName.length * 200
// console.log(width)
// return width + 'px';
// },
mapHeight () {
return this.clientHeight - 120;
},
...mapGetters(["clientHeight"])
},
components: {},
}
</script>
<style
lang="scss"
src="@/assets/scss/modules/management/categoryMain.scss"
scoped
></style>
<style lang=scss >
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
</style>

326
src/views/modules/base/category/main.vue
View File

@ -1,50 +1,64 @@
<template> <template>
<div class="div_main"> <div class="div_main">
<div class="div_tip"> <div v-if="!showAddForm">
类别信息 <div class="div_tip">
</div> 类别信息
<div class="div_room_bar"> </div>
<el-scrollbar style="height:100%"> <div class="div_list">
<div class="div_room"> <el-scrollbar style="height:100%">
<div class="div_room">
<div v-for="(item,index) in categoryList"
:key="index"
class="item">
<div v-if="index==(categoryList.length-1)"
class="item_add"
@click="handleAddCategory">
<img :src="item.managementIcon"
alt />
<span>{{item.label}}</span>
</div>
<div v-else
class="item_category">
<img :src="item.managementIcon"
alt />
<div v-for="(item,index) in categoryList" <div class="item_content">
:key="index" <div class="item_count">{{item.count}}</div>
class="item"
@click="handleClickRoom(index)">
<div v-if="index==(categoryList.length-1)"
class="item_add">
<img :src="item.managementIcon" <div class="item_row2">
alt /> <div class="row_left">{{item.label}}</div>
<span>{{item.label}}</span> <div class="row_right"
@click="toPersonList(item)">管理</div>
</div>
</div>
</div>
<div v-else
class="item_category">
<img :src="item.managementIcon"
alt />
<div class="item_content">
<div class="item_count">{{item.count}}</div>
<div class="item_name">{{item.columnName}}</div>
</div> </div>
<span>{{item.label}}</span>
</div> </div>
</div> </div>
</el-scrollbar>
</div> </div>
</el-scrollbar>
</div> </div>
<add-category v-if="showAddForm"
ref="ref_add"
:categoryList="categoryList"
@handleCancle="handleCancle"
@handleConfirm="handleConfirm"></add-category>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import nextTick from 'dai-js/tools/nextTick'
import { Loading } from 'element-ui'; //引入Loading服务 import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import addCategory from "./addCategory";
let loading;//加载动画 let loading;//加载动画
@ -52,33 +66,8 @@ export default {
data () { data () {
return { return {
//父组件传过来的小区id categoryList: [],
neighborHoodId: '', showAddForm: false,
neighborHoodName: '',
buildingArray: [],//楼栋下拉框数据
selBuildingId: '',
selBuildingName: '',
roomArray: [],
selHouseId: '',
selHouseName: '',
selHouseIndex: 0,
userArray: [],
selUserName: '',
selUserId: '',
orgData: {},//当前组织对象
orgId: '',
orgLevel: '',
//下钻层级记录
runNum: 0,
runAgencyArray: [],
categoryList: []
} }
}, },
async mounted () { async mounted () {
@ -107,134 +96,33 @@ export default {
} }
}, },
//选择房间 async handleAddCategory () {
handleClickRoom (index) { this.showAddForm = true
this.selHouseIndex = index await nextTick(200)
this.selHouseId = this.roomArray[index].houseId
this.selHouseName = this.roomArray[index].houseName
// this.$emit('refreshInfoList', this.selHouseId, 'room') this.$refs['ref_add'].initData()
}, },
handleConfirm () {
this.showAddForm = false
//点击用户 this.getCategoryList()
handleClickUser (userId) {
this.$emit('toSubAgency', 'people', userId, "")
}, },
//获取右侧infolist数据
async loadList () {
handleCancle () {
this.showAddForm = false
}, },
//加载楼栋数据 toPersonList (item) {
async loadBuilding () { this.$router.push({
const url = "/gov/org/agency/baseinfofamilybuilding" path: "/main/base-resi",
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding" query: {
let params = { columnName: item.columnName
neighborHoodId: this.neighborHoodId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.buildingArray = data
this.buildingArray.forEach(item => {
if (!this.buildingArray[0].buildingName) {
item.buildingName = '楼'
}
});
if (this.buildingArray.length > 0) {
this.selBuildingId = this.buildingArray[0].buildingId
this.selBuildingName = this.buildingArray[0].buildingName
} else {
this.selBuildingId = ''
this.selBuildingName = ''
} }
})
} else {
this.$message.error(msg)
}
}, },
//加载房间数据
async loadRoom () {
const url = "/gov/org/ichouse/houselist"
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
let params = {
buildingId: this.selBuildingId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.roomArray = data
if (this.roomArray.length > 0) {
this.roomArray.forEach(roomItem => {
let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
let iconArray = []
if (iconArrayShow.length > 0) {
if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
roomItem.isParty = true
roomItem.partyUrl = iconArrayShow[0].iconUrl
iconArrayShow.shift();//删除第一个数据
} else {
roomItem.isParty = false
}
}
if (iconArrayShow.length > 4) {//去前四个
for (let i = 0; i < 4; i++) {
iconArray.push(iconArrayShow[i])
}
} else {
iconArray = iconArrayShow
}
this.$nextTick(() => {
// ref_tree 元素的ref value 绑定的node-key
roomItem.iconArrayShow = iconArray
});
roomItem.showAllUser = false
});
}
} else {
this.$message.error(msg)
}
},
//加载成员数据
async loadUser (houseId, index) {
const url = "/epmetuser/icresiuser/getpeoplebyroom"
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
let params = {
homeId: houseId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.userArray = data
if (this.userArray.length === 0) {
this.$message.warning('该房间下没有住户')
}
} else {
this.$message.error(msg)
}
},
//开启加载动画 //开启加载动画
startLoading () { startLoading () {
loading = Loading.service({ loading = Loading.service({
@ -268,22 +156,11 @@ export default {
return this.clientHeight - 120; return this.clientHeight - 120;
}, },
// zoom: {
// get () {
// //根据不同屏幕分辨率，控制zoom大小
// if (this.clientHeight < 900) {
// return 2.3
// } else {
// return 2.8
// }
// },
// set (value) {
// }
// },
...mapGetters(["clientHeight"]) ...mapGetters(["clientHeight"])
}, },
components: {}, components: { addCategory },
} }
</script> </script>
@ -294,87 +171,6 @@ export default {
scoped scoped
></style> ></style>
<style lang=scss scoped>
.customer_select {
/* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
/deep/ input::-webkit-input-placeholder {
color: #fff;
}
/deep/ input::-moz-input-placeholder {
color: #fff;
}
/deep/ input::-ms-input-placeholder {
color: #fff;
}
/* 修改的是el-input的样式 */
/* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
/* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
/deep/ .el-select,
/deep/ .el-input,
/deep/ .el-input__inner {
background-color: #08164d00;
color: #fff;
border: 0px;
border-radius: 0px;
text-align: left;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
display: flex;
}
/* el-input聚焦的时候 外层的border会有一个样式 */
/deep/ .el-select .el-input.is-focus .el-input__inner {
border: 0px;
}
/* 修改的是el-input上下的小图标的颜色 */
/deep/ .el-select .el-input .el-select__caret::before {
color: #fff;
content: "";
background: url("../../../../assets/img/xiala.png") center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 修改总体选项的样式 最外层 */
/deep/ .el-select-dropdown {
background-color: #08164d;
margin: 0px;
border: 0px;
border-radius: 0px;
}
/* 修改选项整体的样式 */
/deep/ .el-select-dropdown__list {
padding: 6px 0 20px 0;
}
/* 修改单个的选项的样式 */
/deep/ .el-select-dropdown__item {
background-color: transparent;
color: #fff;
}
/* item选项的hover样式 */
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改的是下拉框选项内容上方的尖角 */
/deep/ .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
display: none;
}
}
</style>
<style lang=scss > <style lang=scss >
.el-scrollbar__wrap { .el-scrollbar__wrap {
overflow-x: hidden !important; overflow-x: hidden !important;

443
src/views/modules/base/resi.vue
View File

@ -1,203 +1,180 @@
<template> <template>
<div v-if="pageLoading" class="resi-container"> <div v-if="pageLoading"
<resi-search class="resi-container">
v-if="searchList.length > 0" <resi-search v-if="searchList.length > 0"
ref="resiSearch" ref="resiSearch"
:form-list="searchList" :form-list="searchList"
@search="handleSearch" @search="handleSearch" />
/>
<el-card class="resi-card-table"> <el-card class="resi-card-table">
<div class="resi-row-btn"> <div class="resi-row-btn">
<el-button type="success" size="small" @click="handleAdd">新增</el-button> <el-button type="success"
<el-button type="warning" size="small" :loading="exportBtn" @click="handleExport">{{exportBtnTitle}}</el-button> size="small"
@click="handleAdd">新增</el-button>
<el-button type="warning"
size="small"
:loading="exportBtn"
@click="handleExport">{{exportBtnTitle}}</el-button>
<!-- <el-button type="primary" size="small">下载人口模板</el-button> --> <!-- <el-button type="primary" size="small">下载人口模板</el-button> -->
<el-upload <el-upload ref="upload"
ref="upload" class="upload-demo"
class="upload-demo" action="uploadUlr"
action="uploadUlr" :limit="1"
:limit="1" :with-credentials="true"
:with-credentials="true" :show-file-list="false"
:show-file-list="false" :auto-upload="true"
:auto-upload="true" :on-progress="handleProgress"
:on-progress="handleProgress" :on-success="handleExcelSuccess"
:on-success="handleExcelSuccess" :before-upload="beforeExcelUpload"
:before-upload="beforeExcelUpload" :http-request="uploadHttpRequest">
:http-request="uploadHttpRequest" <el-button type="danger"
> size="small"
<el-button type="danger" size="small" :loading="importLoading">{{importBtnTitle}}</el-button> :loading="importLoading">{{importBtnTitle}}</el-button>
</el-upload> </el-upload>
</div> </div>
<el-table <el-table :data="tableData"
:data="tableData" v-loading="tableLoading"
v-loading="tableLoading" border
border style="width: 100%"
style="width: 100%" class="resi-table">
class="resi-table" <el-table-column label="序号"
> type="index"
<el-table-column label="序号" type="index" align="center" width="50"> align="center"
width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-for="item in tableHeader"
v-for="item in tableHeader" :key="item.columnName"
:key="item.columnName" :prop="item.columnName"
:prop="item.columnName" :label="item.label"
:label="item.label" align="center"
align="center" :show-overflow-tooltip="true"
:show-overflow-tooltip="true" :width="item.itemType === 'radio' ? computedWidth(item.label) : 180">
:width="item.itemType === 'radio' ? computedWidth(item.label) : 180"
>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span> <span>{{ handleFilterSpan(scope.row, item) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="120"> <el-table-column fixed="right"
label="操作"
align="center"
width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button @click="handleLook(scope.row)"
@click="handleLook(scope.row)" type="text"
type="text" size="small"
size="small" class="btn-color-look">查看</el-button>
class="btn-color-look"
>查看</el-button
>
<template v-if="filterEdit(scope.row.ORG_ID)"> <template v-if="filterEdit(scope.row.ORG_ID)">
<el-button <el-button @click="handleEdit(scope.row)"
@click="handleEdit(scope.row)" type="text"
type="text" size="small"
size="small" class="btn-color-edit">编辑</el-button>
class="btn-color-edit" <el-popconfirm title="删除之后无法回复，确认删除？"
>编辑</el-button @onConfirm="handleDel(scope.row)">
> <el-button slot="reference"
<el-popconfirm type="text"
title="删除之后无法回复，确认删除？" size="small"
@onConfirm="handleDel(scope.row)" class="btn-color-del">删除</el-button>
>
<el-button
slot="reference"
type="text"
size="small"
class="btn-color-del"
>删除</el-button
>
</el-popconfirm> </el-popconfirm>
</template> </template>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div> <div>
<el-pagination <el-pagination @size-change="handleSizeChange"
@size-change="handleSizeChange" @current-change="handleCurrentChange"
@current-change="handleCurrentChange" :current-page.sync="currentPage"
:current-page.sync="currentPage" :page-sizes="[20, 50, 100, 200]"
:page-sizes="[20, 50, 100, 200]" :page-size="pageSize"
:page-size="pageSize" layout="sizes, prev, pager, next"
layout="sizes, prev, pager, next" :total="total">
:total="total"
>
</el-pagination> </el-pagination>
</div> </div>
</el-card> </el-card>
<el-dialog <el-dialog :title="formName"
:title="formName" :visible.sync="dialogVisible"
:visible.sync="dialogVisible" width="80%"
width="80%" append-to-body
append-to-body :close-on-click-modal="false"
:close-on-click-modal="false" :before-close="handlerCancle">
:before-close="handlerCancle" <resi-form v-if="dialogVisible"
> ref="baseForm"
<resi-form :fixed="true"
v-if="dialogVisible" :form-list="formList"
ref="baseForm" @changegroup="handleChangeGroup" />
:fixed="true" <div v-if="dialogVisible"
:form-list="formList" class="resi-other">
@changegroup="handleChangeGroup"
/>
<div v-if="dialogVisible" class="resi-other">
<div class="resi-other-title">其他</div> <div class="resi-other-title">其他</div>
<div class="tabs-other-info"> <div class="tabs-other-info">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName"
<el-tab-pane @tab-click="handleClick">
v-for="item in tabsList" <el-tab-pane v-for="item in tabsList"
:key="item.columnName" :key="item.columnName"
:label="item.label" :label="item.label"
:name="'group' + item.groupId" :name="'group' + item.groupId">
> <resi-form :ref="'group' + item.groupId"
<resi-form :columns="3"
:ref="'group' + item.groupId" :support-add="item.supportAdd"
:columns="3" :form-id="item.columnName"
:support-add="item.supportAdd" :form-list="item.itemList" />
:form-id="item.columnName"
:form-list="item.itemList"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
<div class="resi-btns"> <div class="resi-btns">
<el-button size="small" @click="handlerCancle">取消</el-button> <el-button size="small"
<el-button @click="handlerCancle">取消</el-button>
type="primary" <el-button type="primary"
size="small" size="small"
:loading="btnLoading" :loading="btnLoading"
@click="handleSUbmit" @click="handleSUbmit">提交</el-button>
>提交</el-button
>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog :title="formName"
:title="formName" :visible.sync="dialogEditVisible"
:visible.sync="dialogEditVisible" width="80%"
width="80%" append-to-body
append-to-body :close-on-click-modal="false"
:close-on-click-modal="false" :before-close="handlerEditCancle">
:before-close="handlerEditCancle" <edit-resi v-if="dialogEditVisible"
> ref="baseForm"
<edit-resi :disabled="disabled"
v-if="dialogEditVisible" :form-info="editForm"
ref="baseForm" :fixed="true"
:disabled="disabled" :form-list="formList"
:form-info="editForm" :agency-id="editAgencyId"
:fixed="true" @changegroup="handleChangeGroup" />
:form-list="formList" <div v-if="dialogEditVisible"
:agency-id="editAgencyId" class="resi-other">
@changegroup="handleChangeGroup"
/>
<div v-if="dialogEditVisible" class="resi-other">
<div class="resi-other-title">其他</div> <div class="resi-other-title">其他</div>
<div class="tabs-other-info"> <div class="tabs-other-info">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName"
<el-tab-pane @tab-click="handleClick">
v-for="item in tabsList" <el-tab-pane v-for="item in tabsList"
:key="item.columnName" :key="item.columnName"
:label="item.label" :label="item.label"
:name="'group' + item.groupId" :name="'group' + item.groupId">
> <edit-resi :ref="'group' + item.groupId"
<edit-resi :columns="3"
:ref="'group' + item.groupId" :support-add="item.supportAdd"
:columns="3" :form-id="item.columnName"
:support-add="item.supportAdd" :muti-list="item.mutiList"
:form-id="item.columnName" :form-list="item.itemList"
:muti-list="item.mutiList" :disabled="disabled"
:form-list="item.itemList" :label-width="'140px'"
:disabled="disabled" :agency-id="editAgencyId" />
:label-width="'140px'"
:agency-id="editAgencyId"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
<div class="resi-btns"> <div class="resi-btns">
<el-button size="small" @click="handlerEditCancle">取消</el-button> <el-button size="small"
<el-button @click="handlerEditCancle">取消</el-button>
v-if="!disabled" <el-button v-if="!disabled"
type="primary" type="primary"
size="small" size="small"
:loading="btnLoading" :loading="btnLoading"
@click="handleEditSUbmit" @click="handleEditSUbmit">提交</el-button>
>提交</el-button
>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -214,7 +191,7 @@ export default {
resiForm, resiForm,
editResi editResi
}, },
data() { data () {
return { return {
exportBtn: false, exportBtn: false,
exportBtnTitle: '导出', exportBtnTitle: '导出',
@ -246,10 +223,28 @@ export default {
formName: '', formName: '',
formList: [], formList: [],
tableHeader: [], tableHeader: [],
tabsList: [] tabsList: [],
defaultCategotyKey: ''
}
},
props: {
},
activated () {
if (this.$route.query) {
let query = this.$route.query
this.defaultCategotyKey = query.columnName
} }
}, },
async created() { async created () {
if (this.$route.query) {
let query = this.$route.query
this.defaultCategotyKey = query.columnName
}
await this.getSearchList() await this.getSearchList()
// await this.getFormList() // await this.getFormList()
await this.getTableHeader() await this.getTableHeader()
@ -258,25 +253,25 @@ export default {
console.log('storeoooo----0000', this.$store) console.log('storeoooo----0000', this.$store)
}, },
methods: { methods: {
computedWidth(label) { computedWidth (label) {
const wd = 20 * label.length const wd = 20 * label.length
return wd > 80 ? wd : 80 return wd > 80 ? wd : 80
}, },
filterEdit(id) { filterEdit (id) {
const { user } = this.$store.state const { user } = this.$store.state
return id === user.agencyId return id === user.agencyId
}, },
handleSizeChange(val) { handleSizeChange (val) {
console.log(`每页 ${val} 条`) console.log(`每页 ${val} 条`)
this.pageSize = val this.pageSize = val
this.getTableData() this.getTableData()
}, },
handleCurrentChange(val) { handleCurrentChange (val) {
console.log(`当前页: ${val}`) console.log(`当前页: ${val}`)
this.currentPage = val this.currentPage = val
this.getTableData() this.getTableData()
}, },
handleFilterSpan(row, item) { handleFilterSpan (row, item) {
let _val = '' let _val = ''
if (item.itemType === 'radio' && item.options.length > 0) { if (item.itemType === 'radio' && item.options.length > 0) {
item.options.forEach((n) => { item.options.forEach((n) => {
@ -285,14 +280,14 @@ export default {
} }
return _val || row[item.columnName] return _val || row[item.columnName]
}, },
handleSearch(val) { handleSearch (val) {
console.log('searchhh--', val) console.log('searchhh--', val)
this.currentPage = 1 this.currentPage = 1
this.conditions = val this.conditions = val
this.getTableData() this.getTableData()
}, },
// 下载文件 // 下载文件
download(data, fileName) { download (data, fileName) {
console.log('data', data) console.log('data', data)
if (!data) { if (!data) {
return return
@ -316,7 +311,7 @@ export default {
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
} }
}, },
async handleExport() { async handleExport () {
this.exportBtn = true this.exportBtn = true
this.exportBtnTitle = '正在导出...' this.exportBtnTitle = '正在导出...'
let params = { let params = {
@ -333,7 +328,7 @@ export default {
responseType: 'blob' responseType: 'blob'
}) })
.then(res => { .then(res => {
console.log('resllll', res) console.log('resllll', res)
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]) let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
console.log('filename', fileName) console.log('filename', fileName)
@ -352,8 +347,8 @@ export default {
console.log('获取导出情失败', err) console.log('获取导出情失败', err)
this.$message.error('获取导出失败') this.$message.error('获取导出失败')
}) })
this.exportBtnTitle = '导出' this.exportBtnTitle = '导出'
this.exportBtn = false this.exportBtn = false
}, },
// 上传大图标成功 // 上传大图标成功
handleExcelSuccess (res, file) { handleExcelSuccess (res, file) {
@ -365,7 +360,7 @@ export default {
this.$message.error(res.msg) this.$message.error(res.msg)
} }
}, },
handleProgress(event, file, fileList) { handleProgress (event, file, fileList) {
console.log('percentage', file.percentage) console.log('percentage', file.percentage)
}, },
@ -375,16 +370,16 @@ export default {
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileType = isType || isTypeComputer const fileType = isType || isTypeComputer
const isLt1M = (file.size / 1024 / 1024) < 10 const isLt1M = (file.size / 1024 / 1024) < 10
if(!fileType) { if (!fileType) {
this.$message.error('上传文件只能是xls/xlsx格式！') this.$message.error('上传文件只能是xls/xlsx格式！')
} }
if (!isLt1M) { if (!isLt1M) {
this.$message.error('上传文件大小不能超过 10MB!') this.$message.error('上传文件大小不能超过 10MB!')
} }
return fileType && isLt1M return fileType && isLt1M
}, },
async uploadHttpRequest(file) { async uploadHttpRequest (file) {
this.importLoading = true this.importLoading = true
this.importBtnTitle = '正在上传中...' this.importBtnTitle = '正在上传中...'
const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加 const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
@ -395,53 +390,53 @@ export default {
data: formData, data: formData,
responseType: 'blob' responseType: 'blob'
}) })
.then((res) => { .then((res) => {
if (res.headers["content-disposition"]) { if (res.headers["content-disposition"]) {
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]) let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
console.log('filename', fileName) console.log('filename', fileName)
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
var url = window.URL.createObjectURL(blob) var url = window.URL.createObjectURL(blob)
var aLink = document.createElement('a') var aLink = document.createElement('a')
aLink.style.display = 'none' aLink.style.display = 'none'
aLink.href = url aLink.href = url
aLink.setAttribute('download', fileName) aLink.setAttribute('download', fileName)
document.body.appendChild(aLink) document.body.appendChild(aLink)
aLink.click() aLink.click()
document.body.removeChild(aLink) //下载完成移除元素 document.body.removeChild(aLink) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象 window.URL.revokeObjectURL(url) //释放掉blob对象
} }
this.getTableData() this.getTableData()
}) })
.catch( err => { .catch(err => {
console.log('失败', err) console.log('失败', err)
file.onError() //上传失败的文件会从文件列表中删除 file.onError() //上传失败的文件会从文件列表中删除
this.$message.error('导入失败') this.$message.error('导入失败')
}) })
this.importLoading = false this.importLoading = false
this.importBtnTitle = '导入人员数据' this.importBtnTitle = '导入人员数据'
this.$refs.upload.clearFiles() this.$refs.upload.clearFiles()
}, },
handleClick(tab, event) { handleClick (tab, event) {
console.log(tab, event) console.log(tab, event)
}, },
async handleLook(row) { async handleLook (row) {
this.disabled = true this.disabled = true
this.editAgencyId = row.ORG_ID this.editAgencyId = row.ORG_ID
await this.getFormList('edit') await this.getFormList('edit')
this.getrowInfo(row.icResiUserId) this.getrowInfo(row.icResiUserId)
}, },
async handleEdit(row) { async handleEdit (row) {
this.disabled = false this.disabled = false
this.editAgencyId = row.ORG_ID this.editAgencyId = row.ORG_ID
await this.getFormList('edit') await this.getFormList('edit')
await this.getrowInfo(row.icResiUserId) await this.getrowInfo(row.icResiUserId)
}, },
async handleAdd() { async handleAdd () {
await this.getFormList() await this.getFormList()
this.dialogVisible = true this.dialogVisible = true
}, },
async handleChangeGroup(val) { async handleChangeGroup (val) {
console.log('changeguoprrrrr----', val) console.log('changeguoprrrrr----', val)
let { childGroup, value } = val let { childGroup, value } = val
let hasT = false let hasT = false
@ -471,7 +466,7 @@ export default {
if (hasT) this.tabsList.splice(i, 1) if (hasT) this.tabsList.splice(i, 1)
} }
}, },
formetForm() { formetForm () {
const _baseForm = this.$refs.baseForm.handleForm() const _baseForm = this.$refs.baseForm.handleForm()
let arr = [] let arr = []
if (_baseForm.length === 0) return false if (_baseForm.length === 0) return false
@ -527,15 +522,15 @@ export default {
console.log('finalArr', finalArr) console.log('finalArr', finalArr)
return finalArr return finalArr
}, },
async handleEditSUbmit() { async handleEditSUbmit () {
const arr = await this.formetForm() const arr = await this.formetForm()
if (arr) this.submitEdit(arr) if (arr) this.submitEdit(arr)
}, },
async handleSUbmit() { async handleSUbmit () {
const arr = await this.formetForm() const arr = await this.formetForm()
if (arr) this.submitAdd(arr) if (arr) this.submitAdd(arr)
}, },
handleDel(row) { handleDel (row) {
let params = { let params = {
formCode: 'resi_base_info', formCode: 'resi_base_info',
icResiUserId: row.icResiUserId icResiUserId: row.icResiUserId
@ -558,24 +553,24 @@ export default {
return this.$message.error('网络错误') return this.$message.error('网络错误')
}) })
}, },
handleFormatUrl(url) { handleFormatUrl (url) {
return url.includes('?') return url.includes('?')
}, },
handlerEditCancle() { handlerEditCancle () {
this.$refs.baseForm.resetForm() this.$refs.baseForm.resetForm()
this.tabsList.forEach((item) => { this.tabsList.forEach((item) => {
this.$refs['group' + item.groupId][0].resetForm() this.$refs['group' + item.groupId][0].resetForm()
}) })
this.dialogEditVisible = false this.dialogEditVisible = false
}, },
handlerCancle() { handlerCancle () {
this.$refs.baseForm.resetForm() this.$refs.baseForm.resetForm()
this.tabsList.forEach((item) => { this.tabsList.forEach((item) => {
this.$refs['group' + item.groupId][0].resetForm() this.$refs['group' + item.groupId][0].resetForm()
}) })
this.dialogVisible = false this.dialogVisible = false
}, },
async submitAdd(arr) { async submitAdd (arr) {
this.btnLoading = true this.btnLoading = true
await this.$http await this.$http
.post('/epmetuser/icresiuser/add', arr) .post('/epmetuser/icresiuser/add', arr)
@ -598,13 +593,13 @@ export default {
}) })
this.btnLoading = false this.btnLoading = false
}, },
async submitEdit(arr) { async submitEdit (arr) {
this.btnLoading = true this.btnLoading = true
await this.$http await this.$http
.post('/epmetuser/icresiuser/edit', arr) .post('/epmetuser/icresiuser/edit', arr)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} else { } else {
this.$message.success('提交成功') this.$message.success('提交成功')
@ -622,7 +617,7 @@ export default {
}) })
this.btnLoading = false this.btnLoading = false
}, },
getTableHeader() { getTableHeader () {
this.$http this.$http
.post('/oper/customize/icform/tableheaders', { .post('/oper/customize/icform/tableheaders', {
formCode: 'resi_base_info' formCode: 'resi_base_info'
@ -638,7 +633,7 @@ export default {
return this.$message.error('网络错误') return this.$message.error('网络错误')
}) })
}, },
async getTableData() { async getTableData () {
this.tableLoading = true this.tableLoading = true
let params = { let params = {
formCode: 'resi_base_info', formCode: 'resi_base_info',
@ -661,7 +656,7 @@ export default {
}) })
this.tableLoading = false this.tableLoading = false
}, },
getrowInfo(id) { getrowInfo (id) {
let params = { let params = {
formCode: 'resi_base_info', formCode: 'resi_base_info',
icResiUserId: id icResiUserId: id
@ -737,7 +732,7 @@ export default {
return this.$message.error('网络错误') return this.$message.error('网络错误')
}) })
}, },
async getOptionsList(url) { async getOptionsList (url) {
let options = [] let options = []
// console.log('getOptionsList----', url) // console.log('getOptionsList----', url)
await this.$http await this.$http
@ -754,7 +749,7 @@ export default {
}) })
return options return options
}, },
getSearchList() { getSearchList () {
this.$http this.$http
.post('/oper/customize/icform/conditionlist', { .post('/oper/customize/icform/conditionlist', {
formCode: 'resi_base_info', formCode: 'resi_base_info',
@ -780,13 +775,13 @@ export default {
return this.$message.error('网络错误') return this.$message.error('网络错误')
}) })
}, },
getTreeData(data){ getTreeData (data) {
if (!Array.isArray(data)) return [] if (!Array.isArray(data)) return []
let arr = data.map(item => { let arr = data.map(item => {
let _item = {} let _item = {}
if (item.children) { if (item.children) {
if (item.children.length === 0) _item = { ...item, children: undefined } if (item.children.length === 0) _item = { ...item, children: undefined }
else _item = { ...item, children: this.getTreeData(item.children)} else _item = { ...item, children: this.getTreeData(item.children) }
} else { } else {
_item = { ...item } _item = { ...item }
} }
@ -794,7 +789,7 @@ export default {
}) })
return arr return arr
}, },
async getFormList(type) { async getFormList (type) {
await this.$http await this.$http
.post('/oper/customize/icform/getcustomerform', { .post('/oper/customize/icform/getcustomerform', {
formCode: 'resi_base_info', formCode: 'resi_base_info',
@ -867,12 +862,12 @@ export default {
// height: 12px; // height: 12px;
color: rgba(30, 122, 254, 1); color: rgba(30, 122, 254, 1);
line-height: 20px; line-height: 20px;
background: rgba(30, 122, 254, .2); background: rgba(30, 122, 254, 0.2);
// border-radius: 50%; // border-radius: 50%;
} }
::v-deep .el-tabs__item.is-active { ::v-deep .el-tabs__item.is-active {
color: #fff; color: #fff;
background: linear-gradient(90deg, #1A5AFD, #26C4FF); background: linear-gradient(90deg, #1a5afd, #26c4ff);
} }
} }
.resi-container .resi-card-table { .resi-container .resi-card-table {

Write Preview
Loading…
Cancel
Save