<template>
|
<div class="fy-h2">线索结论</div>
|
<DescriptionsList v-if="conclusion">
|
<!-- <template #extra>
|
<el-button
|
v-if="conclusion"
|
type="warning"
|
size="small"
|
plain
|
icon="Upload"
|
@click="pushConclusion"
|
:disabled="pushing ? true : conclusion.ccUploaded"
|
>{{ pushing ? '推送中' : pushText }}</el-button
|
>
|
</template> -->
|
<DescriptionsListItem
|
label="问题类型"
|
:content="conclusion.ccQuestionType"
|
/>
|
<DescriptionsListItem
|
label="线索结论"
|
:content="conclusion.ccConclusion"
|
/>
|
<DescriptionsListItem
|
label="详细描述"
|
:content="conclusion.ccDetails"
|
/>
|
</DescriptionsList>
|
<div v-else class="fy-dashed-border">
|
<el-empty :image-size="50" description="线索结论未上传">
|
<el-button type="primary" @click="openDialog"
|
>反馈上报</el-button
|
>
|
</el-empty>
|
</div>
|
<el-dialog
|
v-model="dialogShow"
|
width="50%"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<template #header>
|
<span> 反馈结论</span>
|
</template>
|
<el-form
|
label-width="120px"
|
label-position="left"
|
:rules="rules"
|
:model="formObj"
|
ref="formRef"
|
>
|
<el-form-item label="问题类型" prop="ccQuestionType">
|
<el-radio-group v-model="formObj.ccQuestionType">
|
<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="线索结论" prop="ccConclusion">
|
<el-input v-model="formObj.ccConclusion"></el-input>
|
</el-form-item>
|
<el-form-item label="详细描述" prop="ccDetails">
|
<el-input
|
v-model="formObj.ccDetails"
|
type="textarea"
|
placeholder="请输入详情"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="onCancel">取消</el-button>
|
<el-button type="primary" :loading="loading" @click="onSubmit"
|
>确定</el-button
|
>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { reactive, ref, watch, computed } from 'vue';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import clueConclusionApi from '@/api/clue/clueConclusionApi';
|
|
const props = defineProps({
|
clueId: Number
|
});
|
|
watch(
|
() => props.clueId,
|
() => {
|
getConclusion();
|
}
|
);
|
|
// 推送状态
|
const pushing = ref(false);
|
|
// 线索结论
|
const conclusion = ref({});
|
|
// 上报弹出框
|
const dialogShow = ref(false);
|
const { formObj, formRef, onSubmit, onCancel, clear } =
|
useFormConfirm({
|
submit: {
|
do: submit
|
},
|
cancel: {
|
do: cancel
|
}
|
});
|
const loading = ref(false);
|
// 表单检查规则
|
const rules = reactive({
|
ccQuestionType: [
|
{
|
required: true,
|
message: '问题类型不能为空',
|
trigger: 'change'
|
}
|
],
|
ccConclusion: [
|
{
|
required: true,
|
message: '线索结论不能为空',
|
trigger: 'blur'
|
}
|
],
|
ccDetails: [
|
{
|
required: true,
|
message: '详细描述不能为空',
|
trigger: 'blur'
|
}
|
]
|
});
|
|
// 打开上报反馈对话框
|
function openDialog() {
|
dialogShow.value = true;
|
}
|
|
function submit() {
|
formObj.value.cid = props.clueId;
|
return uploadConclusion();
|
}
|
function cancel() {
|
dialogShow.value = false;
|
}
|
|
/**
|
* 上传线索结论
|
*/
|
function uploadConclusion() {
|
loading.value = true;
|
return clueConclusionApi
|
.uploadConclusion(formObj.value)
|
.then(() => {
|
dialogShow.value = false;
|
clear();
|
getConclusion();
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
/**
|
* 获取线索结论
|
*/
|
function getConclusion() {
|
clueConclusionApi.getConclusion(props.clueId).then((res) => {
|
conclusion.value = res;
|
});
|
}
|
|
function pushConclusion() {
|
clueConclusionApi
|
.pushConclusion([conclusion.value.ccId])
|
.then(() => {
|
pushing.value = true;
|
});
|
}
|
|
const pushText = computed(() => {
|
return conclusion.value.ccUploaded ? '已推送' : '推送问题';
|
});
|
</script>
|
<style scoped>
|
|
</style>
|
