Skip to content

9
912project
提交 c61b6f79 authored 作者: CRS's avatar CRS
浏览文件
操作

new

上级 2fa4d062
隐藏空白字符变更
内嵌 并排
正在显示 包含 1619 行增加 和 5 行删除
src/components/basicInformation/person/person.vue
浏览文件 @ c61b6f79
......@@ -128,7 +128,7 @@ export default {
this.$server.getRolefindAll().then((res) => { // 数据请求
if (res.data.code === 200) {
this.roleList = res.data.data;
this.$server.getUnitfindAll().then((res) => { // 数据请求
this.$server.getUnitFindAll().then((res) => { // 数据请求
if (res.data.code === 200) {
this.unitList = res.data.data;
if (this.$route.params.value !== undefined) { // 角色页面跳转过来所带参数
......
src/components/basicInformation/person/personPage.vue
浏览文件 @ c61b6f79
......@@ -46,8 +46,9 @@
</p>
</el-col>
<el-col :span="10">
<div class="upload">
<img src="./img/upload.png">
<div class="upload" @click="uploadHeadImg">
<img :src="imageUrl" style="width: 100px;"/>
<input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
<p>上传个人照片</p>
</div>
<div class="jump">
......@@ -75,7 +76,7 @@ export default {
status: 0
},
fileList: [],
dialogImageUrl: ''
imageUrl: require('./img/upload.png')
}
},
created() {
......@@ -101,6 +102,21 @@ export default {
}
},
methods: {
// 打开上传功能
uploadHeadImg() {
this.$el.querySelector('.hiddenInput').click();
},
// 将头像显示
handleFile(e) {
let $target = e.target || e.srcElement
let file = $target.files[0]
let reader = new FileReader()
reader.onload = (data) => {
let res = data.target || data.srcElement
this.imageUrl = res.result
}
reader.readAsDataURL(file)
}
},
components: {
},
......@@ -150,6 +166,9 @@ export default {
.personPage .content .upload p{
margin-top: 10px;
}
.personPage .hiddenInput{
display: none;
}
.personPage .content .jump{
display: inline-block;
vertical-align: top;
......
src/components/complaint/complaint/addComplaint.vue 0 → 100644
浏览文件 @ c61b6f79
<template>
<div class="addComplaint">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">新增建议</p>
<el-form :model="form" :rules="rules" ref="form" label-width="105px">
<p class="rowForm">
<el-form-item label="投诉对象:" class="inline" prop="objectVal">
<el-select v-model="form.objectVal" placeholder="请选择" clearable>
<el-option v-for="item in object" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="投诉单位:" class="inline" prop="unitVal">
<el-select v-model="form.unitVal" placeholder="请选择" clearable>
<el-option v-for="item in unit" :key="item.id" :label="item.name" :value="item.id" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="投诉项目:" class="inline" prop="projectVal">
<el-select v-model="form.projectVal" placeholder="请选择" clearable>
<el-option v-for="item in project" :key="item.id" :label="item.value" :value="item.id" ></el-option>
</el-select>
</el-form-item>
</p>
<p class="rowForm">
<el-form-item label="投诉类型:" class="inline" prop="typeVal">
<el-select v-model="form.typeVal" placeholder="请选择" clearable>
<el-option v-for="item in type" :key="item.id" :label="item.value" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="产品名称:" class="inline" prop="productVal" v-show="form.objectVal === 4 || form.objectVal === 5">
<el-select v-model="form.productVal" placeholder="请选择" clearable>
<el-option v-for="item in product" :key="item.id" :label="item.name" :value="item.id" ></el-option>
</el-select>
</el-form-item>
<span class="blank" v-show="form.objectVal === 4 || form.objectVal === 5"></span>
</p>
<p>
<el-form-item label="投诉内容:" class="inline" prop="content">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="form.content">
</el-input>
</el-form-item>
</p>
<div class="selectedList">
<span class="button" @click="resetForm('form')">取消</span>
<p>
<span class="button" @click="submitForm('form')">投诉</span>
<span @click="anonymousClick" style="cursor: pointer;">
<img src="./img/clickN.png" class="img" v-if="anonymous === -1">
<img src="./img/click.png" class="img" v-if="anonymous === 1">
匿名
</span>
</p>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
object: [
{
id: 1,
name: '集成商'
},
{
id: 2,
name: '开发商'
},
{
id: 3,
name: '监理方'
},
{
id: 4,
name: '产品(软件)'
},
{
id: 5,
name: '产品(硬件)'
},
{
id: 6,
name: '其他'
}
], // 投诉对象
unit: [], // 投诉单位
project: [
{
id: 1,
value: 'XXX项目'
},
{
id: 2,
value: '其他'
},
], // 投诉项目
type: [
{
id: 1,
value: '服务质量'
},
{
id: 2,
value: '服务态度'
},
{
id: 3,
value: '响应速度'
},
{
id: 4,
value: '其他'
}
], // 投诉类型
product: [], // 投诉产品
anonymous: -1, // 匿名
form: {
objectVal: '', // 对象值
unitVal: '', // 单位值
projectVal: '', // 项目值
typeVal: '', // 类型值
productVal: '', // 产品名称
content: '' // 投诉内容
},
rules: {
objectVal: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
unitVal: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
projectVal: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
typeVal: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}
}
},
created() {
},
mounted(){
let val = this.$store.getters.getSidebar;
if (val[val.length - 1].path !== 'addComplaint') {
val.push(
{
name: '新增建议',
path: 'addComplaint'
}
)
this.$store.commit('changeSidebar', val);
}
this.$server.getUnitFindAll().then(res => {
console.log(res.data.data)
this.unit = res.data.data;
this.$server.getProduceFindAll().then(res => {
console.log(res.data.data)
this.product = res.data.data;
})
})
},
methods: {
// 表单提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.form);
let val;
if (this.form.objectVal === 4 || this.form.objectVal === 5) {
val = {
'anonymity': this.anonymous,
'content': this.form.content,
'produceId': this.form.productVal,
'projectId': this.form.projectVal,
'target': this.form.objectVal,
'type': this.form.typeVal,
'unitId': this.form.unitVal
}
} else {
val = {
'anonymity': this.anonymous,
'content': this.form.content,
'projectId': this.form.projectVal,
'target': this.form.objectVal,
'type': this.form.typeVal,
'unitId': this.form.unitVal
}
}
console.log(val)
this.$server.postComplainAdd(val).then((res) => { // 数据请求
if (res.data.code === 200) {
this.$message.success('新增投诉成功！');
this.$router.push({name: 'complaint'});
}
})
} else {
return false;
}
});
},
// 取消
resetForm(formName) {
this.$refs[formName].resetFields();
this.$router.push({name: 'complaint'});
},
// 点击匿名
anonymousClick() {
if (this.anonymous === 1) {
this.anonymous = -1
} else {
this.anonymous = 1
}
}
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.addComplaint{
background: #ebf0f8;
width: 100%;
}
.addComplaint .content{
margin: 40px;
padding: 0 60px 0 60px;
height: 841px;
background: #fff;
overflow: hidden;
}
.addComplaint .content .title{
padding: 30px 0 30px 0;
font-size: 20px;
color: #233b6e;
}
.addComplaint .content .blank{
display: inline-block;
width: 390px;
}
.addComplaint .content .img{
margin: 0 3px 0 30px;
vertical-align: middle;
}
.addComplaint .textarea{
margin-top: 50px;
}
.addComplaint .content .selectedList{
display: flex;
justify-content: space-evenly;
margin-top: 150px;
}
.addComplaint .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.addComplaint .rowForm{
display: flex;
justify-content: space-between;
}
.addComplaint .content .button:hover{
background: rgba(72,119,230,.6);
}
.addComplaint>>>.el-form-item__label{
font-size: 18px;
color: #666;
}
.addComplaint>>>.el-select{
width: 290px;
}
.addComplaint>>>.el-input--suffix .el-input__inner{
color: #333;
font-size: 18px;
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
}
.addComplaint>>>.el-textarea{
width: 92%;
}
.addComplaint>>>.el-textarea textarea{
max-height: 290px;
min-height: 290px;
height: 290px;
font-size: 18px;
color: #333;
font-family: 'Regular';
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
}
</style>
src/components/complaint/complaint/complaint.vue 0 → 100644
浏览文件 @ c61b6f79
<template>
<div class="complaint">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">意见建议</p>
<p class="search">
<span class="searchVal">
<span>查询内容：</span>
<el-input v-model="searchVal" size="medium" placeholder="请输入查询内容"></el-input>
</span>
<span class="button" @click="search">查询</span>
<span class="button new" @click="addComplaint">新增意见</span>
</p>
<div class="common-table">
<el-table
highlight-current-row
max-height="840"
:data="allData"
stripe
style="width: 100%;margin-bottom: 10px;">
<el-table-column
prop="unitName"
label="投诉单位"
align="center">
</el-table-column>
<el-table-column
prop="target"
label="投诉对象"
align="center">
</el-table-column>
<el-table-column
prop="projectName"
label="投诉项目"
align="center">
</el-table-column>
<el-table-column
prop="produceName"
label="产品"
align="center">
</el-table-column>
<el-table-column
prop="type"
label="投诉类型"
align="center">
</el-table-column>
<el-table-column
prop="userName"
label="投诉人"
align="center">
</el-table-column>
<el-table-column
prop="time"
label="投诉时间"
align="center">
</el-table-column>
<el-table-column
prop="replyTime"
label="最近回复时间"
align="center">
<template slot-scope="scope">
<span class="change" @click="jump(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block" v-if="this.totleLength >= 10">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pagesize"
background
layout="prev, pager, next"
:total="totleLength">
</el-pagination>
</div>
<!-- 分页 -->
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
searchVal: '',
currentPage: 1, // 分页第一页
pagesize: 8, // 每页个数
totleLength: 0, // 获取后台传的所有数据的长度
allData:[] // 列表内容
}
},
created() {
},
mounted(){
let val = this.$store.getters.getSidebar;
if (val[val.length - 1].path !== 'complaint') {
val.push(
{
name: '投诉管理',
path: 'complaint'
}
)
this.$store.commit('changeSidebar', val);
}
this.init()
},
methods: {
// 初始请求
init() {
let val;
if (this.searchVal !== '') {
val = {
'page': this.currentPage,
'pageSize': this.pagesize
}
} else {
val = {
'page': this.currentPage,
'pageSize': this.pagesize
}
}
this.$server.postComplainSearchSelf(val).then((res) => { // 数据请求
if (res.data.code === 200) {
console.log(res.data.data);
this.allData = res.data.data.rows;
this.totleLength = res.data.data.total;
for (let item of this.allData) {
item.time = this.time(item.time);
item.replyTime = this.time(item.replyTime);
item.type = item.type === 1 ? '服务质量' : item.type === 2 ? '服务态度' : item.type === 3 ? '响应速度' : '其他';
item.target = item.target === 1 ? '集成商' : item.target === 2 ? '监理方' : item.target === 3 ? '开发商' : item.target === 4 ? '硬件产品' : item.target === 5 ? '软件产品' : '其他';
}
}
})
},
// 搜索栏
search() {
this.init();
},
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.init();
},
// 新增查询
addComplaint() {
this.$router.push({name: 'addComplaint'});
},
// 跳转
jump(row) {
this.$router.push({name: 'complaintDetail',params:{'value': row}});
},
// 时间换算
time(value) {
let date = new Date(value); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + ' ' + h + m + s;
},
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.complaint{
background: #ebf0f8;
width: 100%;
}
.complaint .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.complaint .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.complaint .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.complaint .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.complaint .content .searchVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.complaint .content .change{
color: #4877e6;
cursor: pointer;
}
.complaint .content .change>img{
margin-right: 3px;
}
.complaint .content .common-table{
box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
border: .5px solid transparent;
border-radius: 10px;
}
.complaint>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.complaint .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 100px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.complaint .content .button:hover{
background: rgba(72,119,230,.6);
}
.complaint .content .new{
position: absolute;
right: 70px;
}
/*表格样式*/
.complaint .content .common-table{
margin: 24px 70px 0 70px;
}
.complaint .content .common-table>>>.el-table th > .cell{
font-size: 18px;
color: #333;
font-weight: normal;
}
.complaint .content .common-table>>>.el-table th.is-leaf{
height: 70px;
}
.complaint .content .common-table>>>.el-table tr{
font-size: 18px;
}
.complaint .content .common-table>>>.el-table{
color: #233b6e;
}
.complaint .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
background-color: #fff;
}
.complaint .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #f5f8fd;
}
.complaint .content .common-table>>>.el-table th.is-leaf, .el-table td {
border-bottom: 1px solid #d5e3ff;
}
.complaint .content .common-table>>>.el-table__body tr, .el-table__body td {
padding: 0;
height: 60px;
background: #f5f8fd;
}
.complaint .content .block{
text-align: right;
padding: 30px 70px 0 0;
}
.complaint .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.complaint .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
.complaint .content>>>.el-table td{
border-bottom: 1px solid #d5e3ff;
}
.complaint .content>>>.btn-prev,.role .content>>>.btn-next{
background: #c5d5f7;
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.complaint .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
color: #C0C4CC;
}
.complaint .content>>>.el-table__body tr.current-row > td{
background: #f5f8fd;
}
</style>
src/components/complaint/complaint/complaintDetail.vue 0 → 100644
浏览文件 @ c61b6f79
<template>
<div class="complaintDetail">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">投诉详情</p>
<div class="selectedList">
<p class="selected">
<span>投诉人：</span>
<el-input v-model="name" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉时间：</span>
<el-input v-model="time" :disabled="true"></el-input>
</p>
<p class="selected">
<span>最近回复时间：</span>
<el-input v-model="replytime" :disabled="true"></el-input>
</p>
</div>
<div class="selectedList">
<p class="selected">
<span>投诉对象：</span>
<el-input v-model="objectVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉单位：</span>
<el-input v-model="unitVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉项目：</span>
<el-input v-model="projectVal" :disabled="true"></el-input>
</p>
</div>
<div class="selectedList">
<p class="selected">
<span>投诉类型：</span>
<el-input v-model="typeVal" :disabled="true"></el-input>
</p>
<p class="selected" v-show="valueAll.target === '硬件产品' || valueAll.target === '软件产品'">
<span>产品名称：</span>
<el-input v-model="unitVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>联系电话：</span>
<el-input v-model="phone" :disabled="true"></el-input>
</p>
<p class="selected blank" v-show="valueAll.target !== '硬件产品' && valueAll.target !== '软件产品'"></p>
</div>
<div class="textarea">
<p class="selected" style="display: flex">
<span>投诉内容：</span>
<el-input
type="textarea"
:rows="2"
:disabled="true"
v-model="content">
</el-input>
</p>
</div>
<p class="line"></p>
<div class="reply">
<span>回复列表：</span>
<span class="replyList"></span>
</div>
<p style="text-align: center;margin-top: 100px;">
<span class="button" @click="submit">确定</span>
</p>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
name: '', // 投诉人
time: '', // 投诉时间
replytime: '', // 回复时间
objectVal: '', // 对象值
unitVal: '', // 单位值
projectVal: '', // 项目值
typeVal: '', // 类型值
productVal: '', // 产品名称
phone: '', // 联系电话
content: '', // 投诉内容
valueAll: {
target: 0
}
}
},
created() {
},
mounted(){
// let val = this.$store.getters.getSidebar;
// if (val[val.length - 1].path !== 'complaintDetail') {
// val.push(
// {
// name: '投诉详情',
// path: 'complaintDetail'
// }
// )
// this.$store.commit('changeSidebar', val);
// }
this.$server.getUnitFindAll().then(res => {
console.log(res.data.data)
this.unit = res.data.data;
})
let value = this.$route.params.value;
if (value !== '' || value !== undefined) {
console.log(value);
this.name = value.userName;
this.time = value.time;
this.replytime = value.replyTime;
this.objectVal = value.target;
this.unitVal = value.unitName;
this.projectVal = value.projectName;
this.typeVal = value.type;
this.productVal = value.produceName;
this.phone = value.phone;
this.content = value.content;
this.valueAll = value;
}
},
methods: {
// 确定
submit() {
this.$router.push({name: 'complaint'});
}
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.complaintDetail{
background: #ebf0f8;
width: 100%;
}
.complaintDetail .content{
margin: 40px;
padding: 0 60px 0 60px;
height: 841px;
background: #fff;
overflow: hidden;
}
.complaintDetail .content .title{
padding: 30px 0 0 0;
font-size: 20px;
color: #233b6e;
}
.complaintDetail .content .selectedList{
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.complaintDetail .textarea{
margin-top: 50px;
}
.complaintDetail .content .blank{
width: 390px;
}
.complaintDetail .selected>span{
font-size: 18px;
line-height: 40px;
color: #666;
display: inline-block;
width: 124px;
text-align: right;
}
.complaintDetail .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.complaintDetail .content .button:hover{
background: rgba(72,119,230,.6);
}
.complaintDetail .content .line {
margin: 40px 0 40px 0;
height: 1px;
background: rgba(72,119,230,0.2);
}
.complaintDetail .content .reply{
font-size: 18px;
color: #666;
justify-content: space-between;
}
.complaintDetail .content .reply>span:nth-child(1){
width: 124px;
display: inline-block;
text-align: right;
vertical-align: top;
}
.complaintDetail .content .replyList{
display: inline-block;
width: 89%;
height: 100px;
background: #f5f8fd;
border: 1px solid rgba(8, 104, 157, .3);
border-radius: 2px;
}
.complaintDetail .selected>>>.el-input{
width: 270px;
}
.complaintDetail .selected>>>.el-input.is-disabled .el-input__inner{
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
font-size: 18px;
color: #333;
}
.complaintDetail .selected>>>.el-textarea{
width: 89%;
}
.complaintDetail .selected>>>.el-textarea textarea{
max-height: 70px;
min-height: 70px;
height: 70px;
font-size: 18px;
color: #333;
font-family: 'Regular';
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
}
</style>
src/components/complaint/complaintManagement/complaintManagement.vue 0 → 100644
浏览文件 @ c61b6f79
<template>
<div class="complaintManagement">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">意见建议</p>
<p class="search">
<span class="searchVal">
<span>查询内容：</span>
<el-input v-model="searchVal" size="medium" placeholder="请输入查询内容"></el-input>
</span>
<span class="button" @click="search">查询</span>
</p>
<div class="common-table">
<el-table
highlight-current-row
max-height="840"
:data="allData"
stripe
style="width: 100%;margin-bottom: 10px;">
<el-table-column
prop="unitName"
label="投诉单位"
align="center">
</el-table-column>
<el-table-column
prop="target"
label="投诉对象"
align="center">
</el-table-column>
<el-table-column
prop="projectName"
label="投诉项目"
align="center">
</el-table-column>
<el-table-column
prop="produceName"
label="产品"
align="center">
</el-table-column>
<el-table-column
prop="type"
label="投诉类型"
align="center">
</el-table-column>
<el-table-column
prop="userName"
label="投诉人"
align="center">
</el-table-column>
<el-table-column
prop="time"
label="投诉时间"
align="center">
</el-table-column>
<el-table-column
prop="replyTime"
label="最近回复时间"
align="center">
<template slot-scope="scope">
<span class="change" @click="jump(scope.row)">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block" v-if="this.totleLength >= 10">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pagesize"
background
layout="prev, pager, next"
:total="totleLength">
</el-pagination>
</div>
<!-- 分页 -->
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
searchVal: '',
currentPage: 1, // 分页第一页
pagesize: 8, // 每页个数
totleLength: 0, // 获取后台传的所有数据的长度
allData:[] // 列表内容
}
},
created() {
},
mounted(){
let val = this.$store.getters.getSidebar;
if (val[val.length - 1].path !== 'complaintManagement') {
val.push(
{
name: '投诉管理',
path: 'complaintManagement'
}
)
this.$store.commit('changeSidebar', val);
}
this.init()
},
methods: {
// 初始请求
init() {
let val;
if (this.searchVal !== '') {
val = {
'page': this.currentPage,
'pageSize': this.pagesize,
't': {
'content': this.searchVal
}
}
} else {
val = {
'page': this.currentPage,
'pageSize': this.pagesize
}
}
this.$server.postComplainSearch(val).then((res) => { // 数据请求
if (res.data.code === 200) {
console.log(res.data.data);
this.allData = res.data.data.rows;
this.totleLength = res.data.data.total;
for (let item of this.allData) {
item.time = this.time(item.time);
item.replyTime = this.time(item.replyTime);
item.type = item.type === 1 ? '服务质量' : item.type === 2 ? '服务态度' : item.type === 3 ? '响应速度' : '其他';
item.target = item.target === 1 ? '集成商' : item.target === 2 ? '监理方' : item.target === 3 ? '开发商' : item.target === 4 ? '硬件产品' : item.target === 5 ? '软件产品' : '其他';
}
}
})
},
// 搜索栏
search() {
this.init();
},
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.init();
},
// 跳转
jump(row) {
this.$router.push({name: 'complaintManagementDetail',params:{'value': row}});
},
// 时间换算
time(value) {
let date = new Date(value); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + ' ' + h + m + s;
}
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.complaintManagement{
background: #ebf0f8;
width: 100%;
}
.complaintManagement .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.complaintManagement .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.complaintManagement .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.complaintManagement .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.complaintManagement .content .searchVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.complaintManagement .content .change{
color: #4877e6;
cursor: pointer;
}
.complaintManagement .content .change>img{
margin-right: 3px;
}
.complaintManagement .content .common-table{
box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
border: .5px solid transparent;
border-radius: 10px;
}
.complaintManagement>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.complaintManagement .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 100px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.complaintManagement .content .button:hover{
background: rgba(72,119,230,.6);
}
.complaintManagement .content .new{
position: absolute;
right: 70px;
}
/*表格样式*/
.complaintManagement .content .common-table{
margin: 24px 70px 0 70px;
}
.complaintManagement .content .common-table>>>.el-table th > .cell{
font-size: 18px;
color: #333;
font-weight: normal;
}
.complaintManagement .content .common-table>>>.el-table th.is-leaf{
height: 70px;
}
.complaintManagement .content .common-table>>>.el-table tr{
font-size: 18px;
}
.complaintManagement .content .common-table>>>.el-table{
color: #233b6e;
}
.complaintManagement .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
background-color: #fff;
}
.complaintManagement .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #f5f8fd;
}
.complaintManagement .content .common-table>>>.el-table th.is-leaf, .el-table td {
border-bottom: 1px solid #d5e3ff;
}
.complaintManagement .content .common-table>>>.el-table__body tr, .el-table__body td {
padding: 0;
height: 60px;
background: #f5f8fd;
}
.complaintManagement .content .block{
text-align: right;
padding: 30px 70px 0 0;
}
.complaintManagement .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.complaintManagement .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
.complaintManagement .content>>>.el-table td{
border-bottom: 1px solid #d5e3ff;
}
.complaintManagement .content>>>.btn-prev,.role .content>>>.btn-next{
background: #c5d5f7;
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.complaintManagement .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
color: #C0C4CC;
}
.complaintManagement .content>>>.el-table__body tr.current-row > td{
background: #f5f8fd;
}
</style>
src/components/complaint/complaintManagement/complaintManagementDetail.vue 0 → 100644
浏览文件 @ c61b6f79
<template>
<div class="complaintManagementDetail">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">投诉详情</p>
<p style="margin-top: 30px;color: #666;font-size: 18px;">
<span @click="signClick" style="cursor: pointer;">
<img src="./img/clickN.png" class="img" v-if="sign === -1">
<img src="./img/click.png" class="img" v-if="sign === 1">
重要
</span>
<span @click="stickClick" style="cursor: pointer;">
<img src="./img/clickN.png" class="img" v-if="stick === -1">
<img src="./img/click.png" class="img" v-if="stick === 1">
置顶
</span>
</p>
<p class="line" style="margin: 20px 0 20px 0"></p>
<div class="selectedList">
<p class="selected">
<span>投诉人：</span>
<el-input v-model="name" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉时间：</span>
<el-input v-model="time" :disabled="true"></el-input>
</p>
<p class="selected">
<span>最近回复时间：</span>
<el-input v-model="replytime" :disabled="true"></el-input>
</p>
</div>
<div class="selectedList">
<p class="selected">
<span>投诉对象：</span>
<el-input v-model="objectVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉单位：</span>
<el-input v-model="unitVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>投诉项目：</span>
<el-input v-model="projectVal" :disabled="true"></el-input>
</p>
</div>
<div class="selectedList">
<p class="selected">
<span>投诉类型：</span>
<el-input v-model="typeVal" :disabled="true"></el-input>
</p>
<p class="selected" v-show="valueAll.target === '硬件产品' || valueAll.target === '软件产品'">
<span>产品名称：</span>
<el-input v-model="unitVal" :disabled="true"></el-input>
</p>
<p class="selected">
<span>联系电话：</span>
<el-input v-model="phone" :disabled="true"></el-input>
</p>
<p class="selected blank" v-show="valueAll.target !== '硬件产品' && valueAll.target !== '软件产品'"></p>
</div>
<div class="textarea">
<p class="selected" style="display: flex">
<span>投诉内容：</span>
<el-input
type="textarea"
:rows="2"
:disabled="true"
v-model="content">
</el-input>
</p>
</div>
<p class="line"></p>
<div class="reply">
<span>回复列表：</span>
<span class="replyList">
<el-scrollbar style="height: 100%">
<p v-for="item of replyList">
<span>{{item.content}}</span>
<span>{{this.time(item.time)}}</span>
</p>
</el-scrollbar>
</span>
</div>
<div class="textarea">
<p class="selected replyContent" style="display: flex">
<span>新增回复：</span>
<el-input
type="textarea"
:rows="2"
v-model="reply">
</el-input>
</p>
</div>
<p style="text-align: center;margin-top: 50px;">
<span class="button" @click="submit">确定</span>
</p>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
name: '', // 投诉人
time: '', // 投诉时间
replytime: '', // 回复时间
objectVal: '', // 对象值
unitVal: '', // 单位值
projectVal: '', // 项目值
typeVal: '', // 类型值
productVal: '', // 产品名称
phone: '', // 联系电话
content: '', // 投诉内容
sign: -1, // 是否重要
stick: -1, // 是否置顶
reply: '', // 回复
replyList: [], // 处理记录
valueAll: {
target: ''
}
}
},
created() {
},
mounted(){
// let val = this.$store.getters.getSidebar;
// if (val[val.length - 1].path !== 'complaintManagementDetail') {
// val.push(
// {
// name: '投诉详情',
// path: 'complaintManagementDetail'
// }
// )
// this.$store.commit('changeSidebar', val);
// }
this.$server.getUnitFindAll().then(res => {
console.log(res.data.data)
this.unit = res.data.data;
})
let value = this.$route.params.value;
if (value !== '' || value !== undefined) {
console.log(value);
this.name = value.userName;
this.time = value.time;
this.replytime = value.replyTime;
this.objectVal = value.target;
this.unitVal = value.unitName;
this.projectVal = value.projectName;
this.typeVal = value.type;
this.productVal = value.produceName;
this.phone = value.phone;
this.content = value.content;
this.valueAll = value;
this.sign = value.sign;
this.stick = value.stick;
this.replyList = value.replyList;
}
},
methods: {
// 确定
submit() {
let val = {
'id': this.valueAll.id,
'sign': this.sign,
'stick': this.stick,
'replyContent': this.reply
}
console.log(val)
this.$server.postComplainUpdate(val).then((res) => { // 数据请求
console.log(res.data.data)
if (res.data.code === 200) {
this.$message.success('投诉回复成功！')
this.$router.push({name: 'complaintManagement'});
}
})
},
// 重要
signClick() {
if (this.sign === -1) {
this.sign = 1
} else {
this.sign = -1
}
},
// 置顶
stickClick() {
if (this.stick === -1) {
this.stick = 1
} else {
this.stick = -1
}
},
// 时间换算
time(value) {
let date = new Date(value); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + ' ' + h + m + s;
}
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.complaintManagementDetail{
background: #ebf0f8;
width: 100%;
}
.complaintManagementDetail .content{
margin: 40px;
padding: 0 60px 0 60px;
height: 841px;
background: #fff;
overflow: hidden;
cursor: default;
}
.complaintManagementDetail .content .title{
padding: 30px 0 0 0;
font-size: 20px;
color: #233b6e;
}
.complaintManagementDetail .content .img{
margin-left: 20px;
}
.complaintManagementDetail .content .selectedList{
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.complaintManagementDetail .textarea{
margin-top: 25px;
}
.complaintManagementDetail .content .blank{
width: 390px;
}
.complaintManagementDetail .selected>span{
font-size: 18px;
line-height: 40px;
color: #666;
display: inline-block;
width: 124px;
text-align: right;
}
.complaintManagementDetail .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.complaintManagementDetail .content .button:hover{
background: rgba(72,119,230,.6);
}
.complaintManagementDetail .content .line {
margin: 40px 0 40px 0;
height: 1px;
background: rgba(72,119,230,0.2);
}
.complaintManagementDetail .content .reply{
font-size: 18px;
color: #666;
justify-content: space-between;
}
.complaintManagementDetail .content .reply>span:nth-child(1){
width: 124px;
display: inline-block;
text-align: right;
vertical-align: top;
}
.complaintManagementDetail .content .replyList{
display: inline-block;
width: 89%;
height: 100px;
background: #f5f8fd;
border: 1px solid rgba(8, 104, 157, .3);
border-radius: 2px;
}
.complaintManagementDetail .selected>>>.el-input{
width: 270px;
}
.complaintManagementDetail .selected>>>.el-input.is-disabled .el-input__inner{
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
font-size: 18px;
color: #333;
}
.complaintManagementDetail .selected>>>.el-textarea{
width: 89%;
}
.complaintManagementDetail .selected>>>.el-textarea textarea{
max-height: 70px;
min-height: 70px;
height: 70px;
font-size: 18px;
color: #333;
font-family: 'Regular';
border: 1px solid rgba(8, 104, 157, .3);
background: #f5f8fd;
}
.complaintManagementDetail .replyContent>>>.el-textarea textarea{
background: #fff;
}
.complaintManagementDetail>>>.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
src/router/index.js
浏览文件 @ c61b6f79
......@@ -74,6 +74,54 @@ export default new Router({
name: 'personPage',
component: resolve => require(['../components/basicInformation/person/personPage.vue'], resolve)
},
// 基础资料管理-单位管理
{
path: '/company',
name: 'company',
component: resolve => require(['../components/basicInformation/company/company.vue'], resolve)
},
// 基础资料管理-单位信息
{
path: '/companyDetails',
name: 'companyDetails',
component: resolve => require(['../components/basicInformation/company/companyDetails.vue'], resolve)
},
// 基础资料管理-单位信息
{
path: '/product',
name: 'product',
component: resolve => require(['../components/admittance/product/product.vue'], resolve)
},
// 投诉列表-客户端
{
path: '/complaint',
name: 'complaint',
component: resolve => require(['../components/complaint/complaint/complaint.vue'], resolve)
},
// 新增投诉
{
path: '/addComplaint',
name: 'addComplaint',
component: resolve => require(['../components/complaint/complaint/addComplaint.vue'], resolve)
},
// 投诉详情
{
path: '/complaintDetail',
name: 'complaintDetail',
component: resolve => require(['../components/complaint/complaint/complaintDetail.vue'], resolve)
},
// 投诉列表-管理端
{
path: '/complaintManagement',
name: 'complaintManagement',
component: resolve => require(['../components/complaint/complaintManagement/complaintManagement.vue'], resolve)
},
// 投诉详情-管理端
{
path: '/complaintManagementDetail',
name: 'complaintManagementDetail',
component: resolve => require(['../components/complaint/complaintManagement/complaintManagementDetail.vue'], resolve)
},
]
}
]
......
src/services/server.js
浏览文件 @ c61b6f79
......@@ -60,6 +60,54 @@ const server = {
method: 'post',
data: data
});
}
},
postComplainSearch(data) { // 投诉查询分页-管理端
return axios('/complain/search', {
method: 'post',
data: data
});
},
postComplainSearchSelf(data) { // 投诉查询分页-客户端
return axios('/complain/searchSelf', {
method: 'post',
data: data
});
},
postComplainAdd(data) { // 新增投诉
return axios('/complain/add', {
method: 'post',
data: data
});
},
getProduceFindAll() { // 获取所有产品列表
return axios('/produce/findAll', {
method: 'get'
});
},
postComplainUpdate(data) { // 新增投诉
return axios('/complain/update', {
method: 'put',
data: data
});
},
postUnitAdd(data) { // 新建单位
return axios('/unit/add', {
method: 'post',
data: data
});
},
postUserLogin(data) { // 用户登录
return axios('/user/login', {
method: 'post',
data: data
});
},
postUnitLoad(data) { // 单位导入
return axios('/unit/upload', {
method: 'post',
data: data,
headers: {'Content-Type': 'multipart/form-data'}
});
},
}
export default server;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论