反馈上报页面

zmc

2023-07-12 56790836e0060850a34f24ea7868a5cc826c328d

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

@@ -20,6 +20,7 @@
      </template>
      kooriookami
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
@@ -65,10 +66,205 @@
      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>