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

<template>
  <div class="fault" v-if="faultDetails!=null">
    <div class="title-fault" >
      产品名称:&nbsp;&nbsp;{{faultDetails.materialName}}
    </div>
    <div class="title-fault">
      产品编码:&nbsp;&nbsp;{{faultDetails.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 faultImg" :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="faultDetails!=null">
    <div class="fault-detail" v-if="faultDetails.trackingNumber!=null">不合格审理单号 :&nbsp;&nbsp;{{faultDetails.trackingNumber}}</div>
    <div class="fault-detail" >序列号 :&nbsp;&nbsp;{{faultDetails.seqNo}}</div>
    <div class="fault-detail">故障描述 :&nbsp;&nbsp;{{faultDetails.remark}}</div>
    <div class="fault-detail" v-if="faultDetails.opinion!=null">线长意见 :&nbsp;&nbsp;{{faultDetails.opinion}}</div>

    <div class="title-fault" style="margin-top: 10px">
      报故人:&nbsp;&nbsp;{{faultDetails.creator}}
    </div>
    <div class="title-fault" style="margin-top: 10px">
      报故工位:&nbsp;&nbsp;{{faultDetails.stationName}}
    </div>
    <div class="title-fault" style="margin-top: 10px;margin-bottom: 10px">
      报故数量:&nbsp;&nbsp;{{faultDetails.unqualifiedNum}}
    </div>
    <div class="title-fault" style="margin-top: 10px;margin-bottom: 10px" v-if="faultDetails.result!=undefined&&faultDetails.result!=null">
      处理结果:&nbsp;&nbsp;{{faultDetails.result}}
    </div>
  </div>
  <div class="mainContentBox">
    <avue-crud
      ref="formRef"
      v-model="form"
      :data="data2"
      :option="option2"
    >
      <template #processInfo="{row,index,type}">
        <el-select v-model="value[row.$index]" placeholder="请选择" @click="getFaults(row)" @change="listData(row)">
          <el-option
            v-for="item in optionFault[row.$index]"
            :key="item.value"
            :label="item.operationName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </template>
    </avue-crud>
  </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,getSeqNoList,getProcessInfoList,rework} from "@/api/fault"
  import dictDataUtil from "@/common/configs/dictDataUtil";
  // 数据字典相关
  const { dicts } = useDictionaryStore();

  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };
  const props = defineProps({
    faultId: {
      type: String,
      default: () => {
        return 0;
      }
    },
    dial:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    workOrderCode: {
      type: String,
      default: () => {
        return 0;
      }
    },
  })

  // 传入一个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 radio1=ref('repair');
  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  const router = useRouter();
  const formRef=ref(null);
  const data2=ref([]);
  const faultImg=ref(null);
  const formData=ref({});
  const formFault=ref({});
  const faultDetails=ref(null);
  const postDetail=ref([]);
  onMounted(() => {
    // console.log("crudRef", crudRef)
    search.value.escalationFaultId=props.faultId;
    dataNoPageList();
    formData.value.escalationFaultId=props.faultId;
    formFault.value.escalationFaultId=props.faultId;
    getFault(formData.value).then((data) => {

      faultImg.value=data.data;
    });
    getFaultDetails(props.faultId).then((data) => {

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

      data2.value=data.data;
      for(let i=0;i<data2.value.length;i++){
        data2.value[i].$cellEdit=true;
      }
      postDetail.value=Array.from(data2.value);
    });

  });

const listData=(row)=>{

  postDetail.value[row.$index].reworkProcessId=value.value[row.$index];

  postDetail.value[row.$index].workOrderCode=props.workOrderCode;
  for(let i=0;i<optionFault.value[row.$index].length;i++){
    if(value.value[row.$index]==optionFault.value[row.$index][i].id){
      postDetail.value[row.$index].reworkOperationName=optionFault.value[row.$index][i].operationName;
    }
  }
  console.info(postDetail.value[row.$index]);
 }
const faultHandle=ref({});
 const onHandle=()=>{
   for(let i=0;i<postDetail.value.length;i++){
     if(undefined===postDetail.value[i].reworkProcessId){
       ElMessage({
         message:postDetail.value[i].seqNo+"没选择返工工序",
         type: "error",
       });
       return;
     }
   }
   faultHandle.value.reworkList=Array.from(postDetail.value);
   faultHandle.value.faultId=props.faultId;
   rework(faultHandle.value).then(
     (data)=> {
       if (data.code === "200") {
         ElMessage({
           message: data.msg,
           type: "success",
         });
         props.dial.visible = false;
       }
       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 optionFault=ref([]);
  const processFault=ref({});
  const getFaults=(row)=>{

    processFault.value.seqNo=row.seqNo;
    processFault.value.workOrderCode=props.workOrderCode;
    getProcessInfoList(processFault.value).then(
      (data)=>{
        optionFault.value[row.$index]=data.data;
      }
    )
  }
  const option2=ref(null);
  const value=ref([]);

  // 设置表格列或者其他自定义的option
  option2.value = {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    submitBtn:false,
    emptyBtn:false,
    menu:false,
    slot:true,
    column: [
      {
        label: "跟踪卡号",
        prop: "seqNo",
        labelWidth:130,
      },
      {
        label: "返工工序",
        prop: "processInfo",
        labelWidth:130,
        type:"select",
      },

    ],
  };
  const cancelWindow=()=>{
    props.dial.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>