riku
2023-07-20 d22ce1ad1c4656f5c2212bbabb35ba498300aced
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
  <div class="fy-h2">线索问题</div>
  <template v-if="questionList.length > 0">
    <el-descriptions
      v-for="(item, index) in questionList"
      :title="'问题 ' + item.cqUid"
      :key="index"
      :column="2"
      size="small"
      border
    >
      <template #extra>
        <el-button-group>
          <el-button
            type="warning"
            size="small"
            plain
            icon="Upload"
            @click="pushQuestion(item)"
            :disabled="item.pushing ? true : item.cqUploaded"
            >{{
              item.cqUploaded
                ? '已推送'
                : item.pushing
                ? '推送中'
                : '推送问题'
            }}</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="checkQuestion(item)"
            >问题详情</el-button
          >
        </el-button-group>
      </template>
      <el-descriptions-item
        width="1px"
        min-width="70px"
        label="问题编号"
      >
        {{ item.cqUid }}
      </el-descriptions-item>
      <el-descriptions-item label="所在街镇">
        {{ item.cqStreet }}
      </el-descriptions-item>
      <el-descriptions-item label="问题描述">
        {{ item.cqDescription }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="详细地址">
        {{ item.cqAddress }}
      </el-descriptions-item>
      <el-descriptions-item label="经度">
        {{ item.cqLongitude }}
      </el-descriptions-item>
      <el-descriptions-item label="纬度">
        {{ item.cqLatitude }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ item.cqCreateTime }}
      </el-descriptions-item> -->
    </el-descriptions>
    <div class="btn-wrap">
      <el-button type="primary" @click="openDialog"
        >添加问题</el-button
      >
    </div>
  </template>
  <div v-else class="fy-dashed-border">
    <el-empty :image-size="50" description="无线索问题">
      <el-button type="primary" @click="openDialog"
        >反馈上报</el-button
      >
    </el-empty>
  </div>
  <QuestionDetail
    :clueId="clueId"
    v-model:show="dialogShow"
    :question="selectedQuestion"
    @on-submit="getQuestion"
  ></QuestionDetail>
</template>
 
<script setup>
import { ref, watch, computed } from 'vue';
import clueQuestionApi from '@/api/clue/clueQuestionApi';
import QuestionDetail from './QuestionDetail.vue';
 
const props = defineProps({
  clueId: Number
});
 
// 线索结论
const questionList = ref([]);
// 上报弹出框
const dialogShow = ref(false);
const selectedQuestion = ref();
 
watch(
  () => props.clueId,
  () => {
    getQuestion();
  }
);
 
// 打开上报反馈对话框
function openDialog() {
  selectedQuestion.value = undefined;
  dialogShow.value = true;
}
 
// 查看问题详情
function checkQuestion(item) {
  selectedQuestion.value = item;
  dialogShow.value = true;
}
/**
 * 获取线索结论
 */
function getQuestion() {
  clueQuestionApi.getQuestion(props.clueId).then((res) => {
    questionList.value = res;
  });
}
 
function pushQuestion(item) {
  clueQuestionApi.pushQuestion([item.cqId]).then(() => {
    item.pushing = true;
  });
}
 
</script>
<style scoped>
.btn-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
}
</style>