老产品前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

357 lines
13 KiB

<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-rent__rentDeath} resi-container">
<el-card ref="searchCard" class="search-card">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="姓名"
prop="name">
<el-input v-model="dataForm.name"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入姓名">
</el-input>
</el-form-item>
<el-form-item label="身份证"
prop="idCard">
<el-input v-model="dataForm.idCard"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入身份证">
</el-input>
</el-form-item>
<el-form-item label="手机"
prop="mobile">
<el-input v-model="dataForm.mobile"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入手机">
</el-input>
</el-form-item>
<el-form-item label="加入时间"
prop="startTime">
<el-date-picker v-model="timeRange"
type="daterange"
clearable
size="small"
range-separator="至"
start-placeholder="选择日期"
end-placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button class="diy-button--reset" size="small" @click="resetForm">重置</el-button>
</el-form-item>
<!--<el-form-item>-->
<!--<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>-->
<!--</el-form-item>-->
</el-form>
</el-card>
<el-card class="resi-card-table">
<!-- <div class="resi-row-btn">-->
<!-- <el-button type="warning" size="small" class="diy-button&#45;&#45;add" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>-->
<!-- </div>-->
<div class="resi-row-btn">
<el-button type="warning" size="small" class="diy-button--reset" @click="exportHandle()">{{ $t('export') }}</el-button>
</div>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
<!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
<el-table-column label="序号"
type="index"
fixed="left"
align="center"
width="50">
</el-table-column>
<!--<el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="userId" label="epmet用户主键" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="gridId" label="epmet网格ID" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="name" label="姓名" header-align="center" align="center">
<template slot-scope="scope">
<el-button @click="handleLook(scope.row)" type="text" size="small" class="btn-color-look">{{scope.row.name}}</el-button>
</template>
</el-table-column>
<el-table-column prop="idCard" label="身份证" header-align="center" align="center"></el-table-column>
<el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
<el-table-column prop="gender" label="性别" header-align="center" align="center">
<template slot-scope="scope">
{{
scope.row.gender == '2'
? "女"
: scope.row.gender
}}
</template>
</el-table-column>
<!--<el-table-column prop="type" label="类型" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="joinDate" label="加入时间" header-align="center" align="center"></el-table-column>
<!--<el-table-column prop="joinReason" label="加入原因" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="removeDate" label="移除时间" header-align="center" align="center" width="100"></el-table-column>-->
<!--<el-table-column prop="removeReason" label="移除原因" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>-->
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<!--<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>-->
<!--<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>-->
<el-button @click="handleLook(scope.row)" type="text" size="small" class="btn-color-look">查看</el-button>
<el-button @click="removeHandleList(scope.row)"
type="text"
size="small"
class="div-table-button--detail">移除福利人员</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
</el-card>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<people-more v-if="showedPeopleMoreInfo && lookInfo.userId"
:userId="lookInfo.userId"
:gridName="lookInfo.gridName"
@close="handleCancleLook" />
<el-dialog
title="移除原因"
:visible.sync="removeVisible"
width="40%">
<textarea v-model="removeReason" placeholder="请输入移除福利人员的原因" class="blacklist-reason"></textarea>
<span slot="footer" class="dialog-footer">
<el-button @click="removeVisible = false">取 消</el-button>
<el-button type="primary" @click="removeHandle"> </el-button>
</span>
</el-dialog>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './changewelfare-add-or-update'
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import { requestPost } from "@/js/dai/request";
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/epmetuser/changeWelfare/page',
getDataListIsPage: true,
deleteURL: '/epmetuser/changeWelfare',
deleteIsBatch: true,
exportURL: '/epmetuser/changeWelfare/export'
},
dataForm: {
id: ''
},
timeRange: '',
// 显示人员详情
showedPeopleMoreInfo: false,
lookInfo: {
userId: '',
gridName: ''
},
removeReason: '',
removeVisible: false,
rowData: {},
}
},
components: {
AddOrUpdate,
peopleMore
},
watch: {
timeRange (val) {
if (Array.isArray(val) && val.length == 2) {
this.dataForm.startTime = val[0];
this.dataForm.endTime = val[1];
} else {
this.dataForm.startTime = "";
this.dataForm.endTime = "";
}
}
},
methods: {
exportHandle () {
const url = this.mixinViewModuleOptions.exportURL
this.$http({
method: 'GET',
url,
responseType: 'blob',
params: this.dataForm
}).then(res => {
// this.download(res.data, title + '.xls')
if (res.headers["content-disposition"]) {
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
console.log('filename', fileName)
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
var url = window.URL.createObjectURL(blob)
var aLink = document.createElement('a')
aLink.style.display = 'none'
aLink.href = url
aLink.setAttribute('download', fileName)
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象
} else this.$message.error('下载失败')
}).catch(err => {
console.log('err', err)
return this.$message.error('网络错误')
})
},
resetForm(formName) {
for(const n in this.dataForm) {
this.dataForm[n] = ''
}
this.timeRange = ''
this.getDataList()
},
async handleLook (row) {
if(row.gridId !== ''){
const url = '/gov/org/grid/griddetail'
let params = {
gridId : row.gridId,
}
const { data, code, msg } = await requestPost(url, params)
if(code === 0){
this.lookInfo.gridName = data.gridName
} else {
this.$message.error(msg)
}
}else{
this.lookInfo.gridName = ''
}
if(row.userId === '' || row.userId === null){
this.$message.error('未查询到该用户的相关信息')
return false
}
this.lookInfo.userId = row.userId
this.showedPeopleMoreInfo = true
},
handleCancleLook() {
this.lookInfo.userId = ''
this.lookInfo.gridName = ''
this.showedPeopleMoreInfo = false
},
removeHandleList (row) {
this.removeVisible = true
this.removeReason = ''
this.rowData = { ...row }
},
removeHandle () {
const params = {
id: this.rowData.id,
removeReason: this.removeReason
}
this.$http.post('/epmetuser/changeWelfare/removeWelfare', params).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.removeVisible = false
this.getDataList()
}
})
}).catch(err => {
this.$message.error(err.message)
})
},
}
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
.resi-container .resi-card-table {
::v-deep .el-table th {
color: #fff;
background-color: rgba(33, 149, 254, 1);
// border-right: 1px solid rgba(33, 149, 254, 1);
}
}
.resi-table {
::v-deep .el-button--text {
text-decoration: underline;
}
::v-deep .btn-color-del {
margin-left: 10px;
color: rgba(213, 16, 16, 1);
}
::v-deep .btn-color-edit {
color: rgba(0, 167, 169, 1);
}
}
.form-wr {
.input-width {
width: 260px;
}
.input-width-textarea {
width: 500px;
}
.imsg-list {
display: flex;
align-items: center;
.imgs-item {
position: relative;
margin-right: 10px;
.el-icon-delete {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
color: red;
z-index: 3;
cursor: pointer;
}
}
}
}
.div-content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blacklist-reason {
width: 100%;
height: 80px;
border: 1px solid #e4e4e4;
border-radius: 4px;
resize: none;
padding: 8px;
box-sizing: border-box;
}
.resi-row-btn {
display: flex;
margin-bottom: 13px;
.el-button {
margin-left: 10px;
border: 0;
}
// .el-button--success {
// background: rgba(34, 193, 195, 1);
// }
// .el-button--warning {
// background: rgba(254, 179, 73, 1);
// }
// .el-button--danger {
// background: rgba(254, 98, 82, 1);
// }
}
</style>