<template>
|
<el-descriptions
|
class="margin-top"
|
title="With border"
|
:column="3"
|
:size="size"
|
border
|
>
|
<template #extra>
|
<el-button type="primary">Operation</el-button>
|
</template>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
<el-icon :style="iconStyle">
|
<user />
|
</el-icon>
|
Username
|
</div>
|
</template>
|
kooriookami
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
<el-icon :style="iconStyle">
|
<iphone />
|
</el-icon>
|
Telephone
|
</div>
|
</template>
|
18100000000
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
<el-icon :style="iconStyle">
|
<location />
|
</el-icon>
|
Place
|
</div>
|
</template>
|
Suzhou
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
<el-icon :style="iconStyle">
|
<tickets />
|
</el-icon>
|
Remarks
|
</div>
|
</template>
|
<el-tag size="small">School</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
<el-icon :style="iconStyle">
|
<office-building />
|
</el-icon>
|
Address
|
</div>
|
</template>
|
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
|
</el-descriptions-item>
|
</el-descriptions>
|
|
|
<!-- 清单详情 -->
|
<el-descriptions
|
class=""
|
title="线索清单详情"
|
:column="1"
|
:size="size"
|
border
|
>
|
<!-- <el-descriptions-item class="inventory-descriptions-item" v-for="item in 10" :key="item" >
|
<template #label>
|
<span>{{ item }}</span>
|
</template>
|
{{ item }}
|
</el-descriptions-item> -->
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
主键
|
</div>
|
</template>
|
{{ clueData.id }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
线索名称
|
</div>
|
</template>
|
{{ clueData.clueName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
线索结论
|
</div>
|
</template>
|
{{ clueData.conclusion }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
创建时间
|
</div>
|
</template>
|
{{ clueData.createTime }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
报警站点名称
|
</div>
|
</template>
|
{{ clueData.siteName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
站点类型
|
</div>
|
</template>
|
{{ clueData.sitetype }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
下发时间
|
</div>
|
</template>
|
{{ clueData.xfsj }}
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">
|
站点类型
|
</div>
|
</template>
|
{{ clueData.airCheckedOptions }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<el-button type="primary" @click="reportButton">反馈上报</el-button>
|
<el-dialog v-if="!this.isClueHave" v-model="isShow" width="50%" :before-close="handleClose">
|
<template #title>
|
<span> 反馈上报</span>
|
</template>
|
<el-form label-width="120px" label-position="left">
|
<el-form-item label="问题类型" >
|
<el-radio-group v-model="form.radio">
|
<el-radio label="有问题">有问题</el-radio>
|
<el-radio label="无问题">无问题</el-radio>
|
<el-radio label="已解决">已解决</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="线索id">
|
<el-input v-model.number="form.id"></el-input>
|
</el-form-item>
|
<el-form-item label="线索结论">
|
<el-input v-model="form.conclusion"></el-input>
|
</el-form-item>
|
<el-form-item label="详细描述">
|
<el-input v-model="form.details" type="textarea" placeholder="请输入详情"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="" @click="isShow=false">取消</el-button>
|
<el-button @click="report">确定</el-button>
|
</template>
|
</el-dialog>
|
<el-button type="primary" @click="reportPhoto">图片上传</el-button>
|
<el-dialog v-model="isShowReportPhoto">
|
<el-form>
|
<el-form-item label="线索id">
|
<el-input v-model=""></el-input>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
|
<script>
|
import axios from 'axios'
|
export default {
|
// 布尔类型 控制反馈上报的样式
|
// fasle代表无数据 true代表有数据
|
props:{
|
isClueHave:{
|
type:Boolean,
|
default:false
|
}
|
},
|
name: 'HomePage',
|
data(){
|
return{
|
// 保存下发线索查询后返回的数组数据
|
// 或者是点击的展示结果对应的对象数据
|
clueData:{},
|
// 上报弹出框
|
isShow:false,
|
// 图片上传的弹出框
|
isShowReportPhoto:false,
|
// 表单中
|
form:{
|
// 问题类型 单选按钮的值
|
radio:'',
|
// 线索id
|
id:0,
|
// 线索结论
|
conclusion:'',
|
// 详细描述
|
details:'',
|
// 保存提交后的返回结果
|
result:''
|
},
|
photoForm:{
|
clueId:0,
|
questionDescription:'',
|
|
}
|
}
|
},
|
methods:{
|
// 点击上报按钮
|
reportButton(){
|
// 当该线索id已经有结论了
|
if(this.isClueHave === true){
|
alert('该线索已经有结论了，不可重复上报')
|
}
|
else if(this.isClueHave === false){
|
this.isShow = !this.isShow
|
}
|
},
|
// 点击反馈上报时
|
report(){
|
//发出请求
|
axios.post('').then(response =>{
|
// 获取结果
|
this.result = response.data.data
|
if(this.result =='上报成功'){
|
ElMessage.success(this.result);
|
// 只有上传成功时才关闭对话框
|
this.isShow = false
|
}
|
else if(this.result =='上报失败'){
|
ElMessage.error(this.result);
|
// 否则暂时不关闭对话框
|
}
|
})
|
|
},
|
reportPhoto(){
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
