JG-ADMIN-TEMP/src/views/quality/faultHandle/components/fault-examine.vue

<template>
  <div class="fault" v-if="faultDetails1!=null">
    <div class="title-fault" >
      产品名称:&nbsp;&nbsp;{{faultDetails1.materialName}}
    </div>
    <div class="title-fault">
      产品编码:&nbsp;&nbsp;{{faultDetails1.materialCode}}
    </div>
  </div>
  <div class="mainContentBox">

    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @selection-change="selectionChange"
    >



    </avue-crud>

  </div>
  <div class="fault">
    <div class="image-title">图片</div>
      <div v-for="(image, index) in faultImg1" :key="index" class="fault-image">
        <!-- 使用v-for循环渲染图片列表 -->
        <img :src="dictDataUtil.img_url+image.fileUrl" alt="图片" width="150px" class="fault-img">
      </div>

  </div>
  <div class="fault" v-if="faultDetails1!=null">
    <div class="fault-detail" >序列号:&nbsp;&nbsp;{{faultDetails1.seqNo}}</div>
    <div class="fault-detail">故障描述:&nbsp;&nbsp;{{faultDetails1.remark}}</div>

    <div class="title-fault" style="margin-top: 10px">
      报故人:&nbsp;&nbsp;{{getLabelByValue('user_name_list',faultDetails1.creator)}}
    </div>
    <div class="title-fault" style="margin-top: 10px">
      报故工位:&nbsp;&nbsp;{{faultDetails1.stationName}}
    </div>
    <div class="title-fault" style="margin-top: 10px">
      报故数量:&nbsp;&nbsp;{{faultDetails1.unqualifiedNum}}
    </div>
    <div class="title-fault" style="margin-top: 10px;margin-bottom: 10px" v-if="faultDetails1.result!=undefined&&faultDetails1.result!=null">
      处理结果:&nbsp;&nbsp;{{faultDetails1.result}}
    </div>
  </div>
  <div class="fault" v-if="faultDetails1!=null">



    <el-radio-group v-model="radio1" size="large">
      <el-radio-button label="审核通过" value="6" />
      <el-radio-button label="驳回" value="2" />
    </el-radio-group>
  </div>

  <div class="fault" v-if="faultDetails1!=null" style="margin-top: 15px;margin-bottom: 15px">

    <el-input
      type="textarea"
      :autosize="{ minRows: 3, maxRows: 6}"
      placeholder="请输入处理意见"
      v-model="textarea2"
    >
    </el-input>


  </div>
  <div style="overflow: hidden">
    <div class="detail-footer">
      <el-button type="primary" @click="onHandle"> 确定 </el-button>
      <el-button @click="cancelWindow">取消</el-button>

    </div>
  </div>

</template>
<script setup>
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import ButtonPermKeys from "@/common/configs/buttonPermission";
  import { useCommonStoreHook, useDictionaryStore } from "@/store";
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  import {getFault,getFaultDetails,updateFault} from "@/api/fault"
  import dictDataUtil from "@/common/configs/dictDataUtil";
  // 数据字典相关
  const { dicts,getLabelByValue } = useDictionaryStore();

  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };
  const props = defineProps({
    escFaultId: {
      type: String,
      default: () => {
        return 0;
      }
    },
    dialogPs:{
      type:Object,
      default:()=>{
        return {};
      }
    },
  })
  const drawingDetail=ref(null);

  // 传入一个url，后面不带/
  const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
    useCrud({
      src: "/api/v1/process/escalationDefects",
    });
  const { dataNoPageList, createRow, updateRow, deleteRow, searchChange, resetChange } =
    Methords; //增删改查
  const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  // const permission = reactive({
  //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  //   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  //   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  //   menu: true,
  // });

  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  const router = useRouter();
  const radio1=ref("6");
  const faultImg1=ref(null);
  const formData1=ref({});
  const faultDetails1=ref(null);
  const textarea2=ref('');
  onMounted(() => {
    // console.log("crudRef", crudRef)
    search.value.escalationFaultId=props.escFaultId;
    dataNoPageList();
    formData1.value.escalationFaultId=props.escFaultId;
    getFault(formData1.value).then((data) => {

      faultImg1.value=data.data;
      console.info(faultImg1.value);
    });
    getFaultDetails(props.escFaultId).then((data) => {

      faultDetails1.value=data.data;
      for(let i=0;i<dicts.disposal_measures_type.length;i++){
        if(faultDetails1.value.disposalMeasures===dicts.disposal_measures_type[i].dictValue){
          faultDetails1.value.disposalMeasures=dicts.disposal_measures_type[i].dictLabel;
        }
      }
    });

  });

  const onHandle=()=>{
    const updateFaultData=ref({id:faultDetails1.value.id,currentState:radio1.value,opinion:textarea2.value});
    updateFault(updateFaultData.value).then(
      (data)=>{
        if(data.code==="200") {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          props.dialogPs.visible=false;
          dataList();
        }
        else {
          ElMessage({
            message: data.msg,
            type: "error",
          });
        }
      }
    )
  }


  // 设置表格列或者其他自定义的option
  option.value = Object.assign(option.value, {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    menu:false,
    column: [
      {
        label: "缺陷大类",
        prop: "bugType",
        dicData:dicts.defect_mana,
        props: { label: "dictLabel", value: "dictValue" },
      },
      {
        label: "缺陷小类",
        prop: "bugName",
      },
    ],
  });

 const cancelWindow=()=>{
   props.dialogPs.visible=false;
 }
</script>
<style>
  .title-fault{
    float: left;
    width: 300px;
  }
  .fault{
    margin-left: 15px;
    margin-top: 10px;
    display: block;
    overflow: hidden;
  }
  .fault-image{
    width: 150px;
    float: left;
    margin-left: 10px;
    overflow: hidden;
  }
  .image-title{
    margin-bottom: 15px;
  }
  .fault-img{
    display: inline-block;
  }
  .fault-detail{
    margin-top: 20px;
  }
  .detail-footer{
    float: right;
    overflow: hidden;
  }
</style>