线索下发及提交结论和问题模块基本完成

riku

2023-07-20 d22ce1ad1c4656f5c2212bbabb35ba498300aced

 src/views/overlay-clue/components/ClueReport.vue

@@ -1,270 +1,104 @@
<template>
  <!-- 清单详情 -->
  <el-descriptions
    class="margin-top"
    title="With border"
    :column="3"
    :size="size"
    class=""
    title="线索清单详情"
    :column="1"
    size="small"
    border
  >
    <template #extra>
      <el-button type="primary">Operation</el-button>
      <el-button
        type="primary"
        text
        size="small"
        @click="openPDF"
        >查看PDF</el-button
      >
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          Username
        </div>
        <div class="cell-item">线索编号</div>
      </template>
      kooriookami
      {{ clueData.cid }}
    </el-descriptions-item>

    <el-descriptions-item>
    <el-descriptions-item width="65px" min-width="50px">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          Telephone
        </div>
        <div class="cell-item">线索名称</div>
      </template>
      18100000000
      {{ clueData.cclueName }}
    </el-descriptions-item>
    <el-descriptions-item>
    <!-- <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          Place
        </div>
        <div class="cell-item">创建时间</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 }}
      {{ clueData.ccreateTime }}
    </el-descriptions-item> -->
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          主键
        </div>
        <div class="cell-item">下发时间</div>
      </template>
      {{ clueData.id }}
      {{ clueData.creleaseTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          线索名称
        </div>
        <div class="cell-item">报警站点</div>
      </template>
      {{ clueData.clueName }}
      {{ clueData.csiteName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          线索结论
        </div>
        <div class="cell-item">站点类型</div>
      </template>
      {{ clueData.conclusion }}
      {{ clueData.csiteType }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          创建时间
        </div>
        <div class="cell-item">线索结论</div>
      </template>
      {{ clueData.createTime }}
      {{ clueData.cconclusion }}
    </el-descriptions-item>
    <el-descriptions-item>
    <!-- <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          报警站点名称
        </div>
        <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>
      {{ clueData.cairCheckedOptions }}
    </el-descriptions-item> -->
  </el-descriptions>
  <ClueReportConclusion :clueId="clueData.cid"></ClueReportConclusion>
  <ClueReportQuestion :clueId="clueData.cid"></ClueReportQuestion>
</template>


<script>
import axios from 'axios'
import ClueReportConclusion from './ClueReportConclusion.vue';
import ClueReportQuestion from './ClueReportQuestion.vue';
export default {
  // 布尔类型 控制反馈上报的样式
  // fasle代表无数据 true代表有数据
  props:{
    isClueHave:{
      type:Boolean,
      default:false
  components: { ClueReportConclusion, ClueReportQuestion },
  props: {
    clueData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  name: 'HomePage',
  data(){
    return{
      // 保存下发线索查询后返回的数组数据
      // 或者是点击的展示结果对应的对象数据
      clueData:{},
      // 上报弹出框
      isShow:false,
  data() {
    return {
      // 图片上传的弹出框
      isShowReportPhoto:false,
      // 表单中
      form:{
        // 问题类型 单选按钮的值
        radio:'',
        // 线索id
        id:0,
        // 线索结论
        conclusion:'',
        // 详细描述
        details:'',
        // 保存提交后的返回结果 
        result:''
      },
      photoForm:{
        clueId:0,
        questionDescription:'',
        
      isShowReportPhoto: false,
      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(){

}
  methods: {
    openPDF() {
      
    }
  }
}
};
</script>

<style>

</style>
<style></style>