280 lines
8.4 KiB
Vue
280 lines
8.4 KiB
Vue
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default {
|
||
|
|
name: 'interaction' // 互动管理
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import Page from '@/components/Pagination/page.vue';
|
||
|
|
import {queryAppQuestionAnswerPage,updateAppQuestionAnswer} from '@/api/appmanage'
|
||
|
|
import { ElMessage} from "element-plus";
|
||
|
|
import { useUserStore } from '@/store/modules/user';
|
||
|
|
const userStore = useUserStore();
|
||
|
|
const queryInfo :any = ref({
|
||
|
|
current:1,
|
||
|
|
size:10,
|
||
|
|
total:0
|
||
|
|
})
|
||
|
|
const searchval = ref('')
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const chooseinfo:any = ref({})
|
||
|
|
const textarea = ref('')
|
||
|
|
const contentdata:any = ref([])
|
||
|
|
const contentdatas:any = ref([])
|
||
|
|
const isSwitch = ref(false)
|
||
|
|
onMounted(() => {
|
||
|
|
getData();
|
||
|
|
getunData()
|
||
|
|
});
|
||
|
|
//搜索
|
||
|
|
function getData(){
|
||
|
|
const params:any = {
|
||
|
|
current: queryInfo.value.current,
|
||
|
|
size:queryInfo.value.size,
|
||
|
|
status:'02',
|
||
|
|
name:searchval.value
|
||
|
|
}
|
||
|
|
if(userStore.institutionId !=null&&userStore.institutionId !=''){
|
||
|
|
params.institutionId = userStore.institutionId
|
||
|
|
}
|
||
|
|
queryAppQuestionAnswerPage(params).then((res:any) => {
|
||
|
|
contentdata.value = res.data.records
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
})
|
||
|
|
}
|
||
|
|
function getunData(){
|
||
|
|
const params:any = {
|
||
|
|
current: queryInfo.value.current,
|
||
|
|
size:9999,
|
||
|
|
status:'01',
|
||
|
|
}
|
||
|
|
if(userStore.institutionId !=null&&userStore.institutionId !=''){
|
||
|
|
params.institutionId = userStore.institutionId
|
||
|
|
}
|
||
|
|
queryAppQuestionAnswerPage(params).then((res:any) => {
|
||
|
|
contentdatas.value = res.data.records
|
||
|
|
queryInfo.value.total = res.data.total
|
||
|
|
})
|
||
|
|
}
|
||
|
|
//点击回答按钮
|
||
|
|
function answerclick(val:any){
|
||
|
|
isSwitch.value = false
|
||
|
|
chooseinfo.value = val
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
function handleClose(){
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
//确认按钮
|
||
|
|
function answersubmit(){
|
||
|
|
if(isSwitch.value == true){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
isSwitch.value = true
|
||
|
|
const params = chooseinfo.value
|
||
|
|
params.answer = textarea.value
|
||
|
|
params.questionStatus = '02'
|
||
|
|
updateAppQuestionAnswer(params).then((res:any) => {
|
||
|
|
ElMessage({
|
||
|
|
message: "回答成功",
|
||
|
|
type: "success",
|
||
|
|
});
|
||
|
|
getData()
|
||
|
|
getunData()
|
||
|
|
dialogVisible.value = false
|
||
|
|
isSwitch.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
function dateFormat(row: any) { // 时间方法
|
||
|
|
const daterc = row;
|
||
|
|
if (daterc != null) {
|
||
|
|
var date = new Date(daterc);
|
||
|
|
var year = date.getFullYear();
|
||
|
|
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
|
|
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||
|
|
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||
|
|
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||
|
|
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||
|
|
// 拼接
|
||
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="interaction-box">
|
||
|
|
<div class="interaction-box-left">
|
||
|
|
<div class="box-left-top">
|
||
|
|
<el-input v-model="searchval" placeholder="请输入关键字" style="width:240px" clearable />
|
||
|
|
<el-button type="primary" class="ml-[10px]" @click="getData">搜索</el-button>
|
||
|
|
</div>
|
||
|
|
<div class="box-left-bottom">
|
||
|
|
<div class="problem-box" v-for="(item,index) in contentdata" :key="index">
|
||
|
|
<div class="problem-text">{{ item.question }}</div>
|
||
|
|
<div class="answer-text">{{ item.answer }}</div>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="tel-text">{{ item.mobile }}</div>
|
||
|
|
<div class="time-text">{{ dateFormat(item.answer_time) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
|
||
|
|
@pagination="getData" />
|
||
|
|
</div>
|
||
|
|
<div class="interaction-box-right">
|
||
|
|
<div class="box-right-top">
|
||
|
|
<div class="unproblem-title">未解决问题</div>
|
||
|
|
<div class="unproblem-line"></div>
|
||
|
|
</div>
|
||
|
|
<div class="box-right-bottom">
|
||
|
|
<div class="problem-box mt-[18px]" v-for="(items,indexs) in contentdatas" :key="indexs">
|
||
|
|
<div class="problem-text">{{ items.question }}</div>
|
||
|
|
<div class="flex mt-[5px] items-center justify-between">
|
||
|
|
<div class="flex">
|
||
|
|
<div class="tel-text">{{ items.mobile }}</div>
|
||
|
|
<div class="time-text">{{ dateFormat(items.question_time) }}</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="answer-button" @click="answerclick(items)">回答</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="回答" :before-close="handleClose" width="40%" draggable append-to-body>
|
||
|
|
<div>
|
||
|
|
<div class="dialog-title">{{chooseinfo.question}}</div>
|
||
|
|
<el-input v-model="textarea" :autosize="{ minRows: 18 }" type="textarea" class="mb-[20px]"/>
|
||
|
|
</div>
|
||
|
|
<span class="dialog-footer flex justify-end">
|
||
|
|
<el-button @click="handleClose">取消</el-button>
|
||
|
|
<el-button type="primary" @click="answersubmit">确定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.interaction-box{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
height: calc(100vh - 130px);
|
||
|
|
.interaction-box-left{
|
||
|
|
width: 70%;
|
||
|
|
height: 100%;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.498039215686275);
|
||
|
|
padding: 20px;
|
||
|
|
.box-left-top{
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
.box-left-bottom{
|
||
|
|
height: calc(100vh - 270px);
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.interaction-box-right{
|
||
|
|
width: 30%;
|
||
|
|
height: 100%;
|
||
|
|
margin-left: 15px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.498039215686275);
|
||
|
|
padding: 20px;
|
||
|
|
.box-right-top{
|
||
|
|
border-bottom: 1px solid #ececec;
|
||
|
|
position: relative;
|
||
|
|
.unproblem-title{
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #1B1B1B;
|
||
|
|
padding-bottom: 13px;
|
||
|
|
}
|
||
|
|
.unproblem-line{
|
||
|
|
height: 3px;
|
||
|
|
width: 84px;
|
||
|
|
background: #4099ff;
|
||
|
|
position: absolute;
|
||
|
|
bottom:-2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box-right-bottom{
|
||
|
|
height: calc(100vh - 205px);
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.problem-text{
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #363636;
|
||
|
|
line-height: 24px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
background: url('../../assets/appmanage/Q.png') no-repeat;
|
||
|
|
padding-left: 30px;
|
||
|
|
background-position: 2px 4px;
|
||
|
|
min-height: 20px;
|
||
|
|
}
|
||
|
|
.answer-text{
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #363636;
|
||
|
|
line-height: 24px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
background: url('../../assets/appmanage/A.png') no-repeat;
|
||
|
|
padding-left: 30px;
|
||
|
|
background-position: 2px 2px;
|
||
|
|
min-height: 30px;
|
||
|
|
}
|
||
|
|
.tel-text{
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #949494;
|
||
|
|
background: url('../../assets/appmanage/tel.png') no-repeat;
|
||
|
|
padding-left: 25px;
|
||
|
|
background-position: 2px 3px;
|
||
|
|
}
|
||
|
|
.time-text{
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #949494;
|
||
|
|
background: url('../../assets/appmanage/time.png') no-repeat;
|
||
|
|
padding-left: 25px;
|
||
|
|
background-position: 2px 3px;
|
||
|
|
margin-left: 35px;
|
||
|
|
}
|
||
|
|
.problem-box{
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 1px solid #ececec;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.answer-button{
|
||
|
|
width: 50px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
background: inherit;
|
||
|
|
background-color: rgba(255, 153, 0, 1);
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-size: 12px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.dialog-title{
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #363636;
|
||
|
|
line-height: 24px;
|
||
|
|
background: url('../../assets/appmanage/Q.png') no-repeat;
|
||
|
|
padding-left: 30px;
|
||
|
|
background-position: 2px 4px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
</style>
|