252 lines
7.1 KiB
Vue
252 lines
7.1 KiB
Vue
<template>
|
||
<div class="personCard relative flex mb10 pointer">
|
||
<div class="cxbq f14 lh50 tc absolute" v-if="props.item.czzt == '03'">已完成</div>
|
||
<el-button color="#0072ff" size="small" @click="handleQs(props.item)" v-if="props.item.czzt == '01'" class="btn_qs f14 tc absolute">签收</el-button>
|
||
<el-button color="#0072ff" size="small" v-if="props.item.czzt == '02'" ref="buttonRef" @click.stop="onClickOutside" class="btn_qs f14 tc absolute">反馈</el-button>
|
||
<div class="avatarBox relative">
|
||
<div class="marks f12 absolute" :class="changeBg(props.item.yjJb)">
|
||
<span>{{ changetText(props.item.yjJb) }}</span>
|
||
</div>
|
||
<div>
|
||
<el-image :preview-teleported="true" style="width: 80px; height: 110px" :src="props.item.yjTp" :preview-src-list="[props.item.yjTp]"/>
|
||
</div>
|
||
<span class="smallbtn">全息档案</span>
|
||
</div>
|
||
<div class="infoBox">
|
||
<div class="items">
|
||
<div class="infoItem flex nowrap mb10">{{ props.item.yjRyxm }} <span class="bqbox ml6">{{ props.item.yjbq }}</span></div>
|
||
<div class="infoItem ellipsis">性别：<span class="value">{{ IdCard(props.item.yjRysfzh , 2 )}}</span></div>
|
||
<div class="infoItem ellipsis">身份证号：<span class="value">{{ props.item.yjRysfzh }}</span></div>
|
||
<div class="infoItem ellipsis">出生日期：<span class="value">{{ IdCard(props.item.yjRysfzh , 1 )}}</span></div>
|
||
<div class="infoItem ellipsis">相似度：<span class="value">{{ props.item.xsd * 100 }}%</span></div>
|
||
<div class="infoItem ellipsis">预警次数：<span class="value"><span class="num">{{ props.item.yjCs }}</span> 次</span></div>
|
||
</div>
|
||
<div class="items">
|
||
<div class="infoItem ellipsis">预警级别：<span class="value">{{ props.item.yjJb }}</span></div>
|
||
<div class="infoItem ellipsis">预警标题:<span class="value">{{ props.item.yjBt }}</span></div>
|
||
<div class="infoItem ellipsis">预警内容：<span class="value">{{ props.item.yjNr }}</span></div>
|
||
<div class="infoItem ellipsis">预警地址：<span class="value">{{ props.item.yjDz }}</span></div>
|
||
<div class="infoItem ellipsis">预警时间：<span class="value">{{ props.item.yjSj }}</span></div>
|
||
<div class="infoItem ellipsis">签收时间：<span class="value">{{ props.item.qssj }}</span></div>
|
||
<div class="infoItem ellipsis">反馈时间：<span class="value">{{ props.item.fksj }}</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 虚拟触发 -->
|
||
<el-popover ref="popoverRef" :visible="isShowVisble" :width="400" :virtual-ref="buttonRef" trigger="click" title="反馈" virtual-triggering >
|
||
<el-form :model="chooseRow" ref="elRowForm" :inline="true" label-width="100px" :rules="rules">
|
||
<el-form-item label="反馈内容" prop="fknr" style="width: 100%;">
|
||
<MOSTY.Other style="width: 100%;" clearable v-model="chooseRow.fknr" type="textarea" placeholder="请输入不通过原因"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="flex just-center mt10">
|
||
<el-button @click.stop="cancelRowSp">取消</el-button>
|
||
<el-button type="primary" @click.stop="handleSendSp(props.item)" v-loading="btnloading">确定</el-button>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import { IdCard } from '@/utils/validate.js'
|
||
import { defineProps ,ref, reactive,getCurrentInstance } from "vue";
|
||
const { proxy } = getCurrentInstance();
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
dic: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
});
|
||
|
||
const buttonRef = ref()
|
||
const popoverRef = ref()
|
||
const elRowForm = ref()
|
||
const isShowVisble = ref(false)
|
||
const chooseRow = ref({})
|
||
const rules = reactive({
|
||
fknr: [{ required: true, message: "请输入反馈内容", trigger: "blur" }],
|
||
})
|
||
|
||
|
||
const onClickOutside = () => {
|
||
isShowVisble.value = true;
|
||
}
|
||
|
||
|
||
// 处理签收
|
||
const handleQs = (val) =>{
|
||
proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
|
||
qcckPost({id:val.id}, "/mosty-jmxf/tbYjxx/yjqs").then(() => {
|
||
val.czzt = '02'
|
||
proxy.$message({ type: "success", message: "签收成功" });
|
||
});
|
||
})
|
||
}
|
||
|
||
// 签收
|
||
const handleSendSp = (val) =>{
|
||
elRowForm.value.validate((valid) => {
|
||
if(!valid) return;
|
||
let data = { id:val.id,...chooseRow.value }
|
||
qcckPost(data, "/mosty-jmxf/tbYjxx/yjfk").then(() => {
|
||
val.czzt = '03';
|
||
proxy.$message({ type: "success", message: "反馈成功" });
|
||
cancelRowSp()
|
||
});
|
||
})
|
||
}
|
||
const cancelRowSp = () =>{
|
||
chooseRow.value.fknr = '';
|
||
isShowVisble.value = false;
|
||
}
|
||
|
||
// 切换背景
|
||
const changeBg = (type) => {
|
||
switch (type) {
|
||
case "10":
|
||
return "marks_red";
|
||
case "20":
|
||
return "marks_orange";
|
||
case "30":
|
||
return "marks_yellow";
|
||
case "40":
|
||
return "marks_blue";
|
||
default:
|
||
return "marks_blue";
|
||
}
|
||
};
|
||
const changetText = (type) => {
|
||
switch (type) {
|
||
case "10":
|
||
return "处置";
|
||
case "20":
|
||
return "关注";
|
||
case "30":
|
||
return "提醒";
|
||
case "40":
|
||
return "不关注";
|
||
default:
|
||
return "不关注";
|
||
}
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.personCard {
|
||
background: rgba(10, 49, 88, 0.6);
|
||
box-shadow: inset 0px 0px 10px 0px rgba(56, 119, 242, 0.5);
|
||
border-radius: 0px 0px 0px 0px;
|
||
border: 1px solid #0072ff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba(17, 66, 96, 0.8);
|
||
}
|
||
|
||
.cxbq {
|
||
right: 5px;
|
||
top: 5px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 255, 255, 0.3);
|
||
border: 1px solid #00ffff;
|
||
color: #00ffff;
|
||
transform: rotate(-48deg);
|
||
}
|
||
|
||
.btn_qs {
|
||
left: 94px;
|
||
bottom: 11px;
|
||
}
|
||
::v-deep .el-button{
|
||
span{
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.avatarBox {
|
||
margin-right: 5px;
|
||
overflow: hidden;
|
||
width: 80px;
|
||
.marks {
|
||
width: 70px;
|
||
height: 32px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background: rgba(255, 62, 62, 0.75);
|
||
top: -4px;
|
||
left: -24px;
|
||
transform: rotate(-45deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
.marks_red {
|
||
background: rgba(255, 62, 62, 0.35);
|
||
}
|
||
|
||
.marks_orange {
|
||
background: rgba(255, 155, 62, 0.35);
|
||
}
|
||
|
||
.marks_yellow {
|
||
background: rgba(255, 239, 62, 0.35);
|
||
}
|
||
|
||
.marks_blue {
|
||
background: rgba(0, 114, 255, 0.35);
|
||
}
|
||
}
|
||
|
||
.bqbox {
|
||
color: #ff0000;
|
||
padding: 0px 6px;
|
||
background: rgba(255, 0, 0, 0.3);
|
||
border-radius: 1px 1px 1px 1px;
|
||
border: 1px solid #ff0000;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.infoBox {
|
||
width: calc(100% - 90px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.items{
|
||
width: 50%;
|
||
}
|
||
.infoItem {
|
||
font-size: 13px;
|
||
margin-bottom: 2px;
|
||
color: #fff;
|
||
.value {
|
||
color: #89afcf;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.smallbtn {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
background: #0072ff;
|
||
border-radius: 5px 5px 5px 5px;
|
||
margin-top: 6px;
|
||
}
|
||
.num{
|
||
color: #00ffff;
|
||
}
|
||
</style> |