JG-ADMIN-TEMP/src/views/quality/faultHandle/components/fault-detail.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>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />
  </div>
  <div class="fault" v-if="faultDetails1!=null">
    <div class="fault-detail" v-if="faultDetails1.trackingNumber!=null">不合格审理单号 :&nbsp;&nbsp;{{faultDetails1.trackingNumber}}</div>
    <div class="fault-detail" >序列号 :&nbsp;&nbsp;{{faultDetails1.seqNo}}</div>
    <div class="fault-detail" v-if="faultDetails1.remark!=''">故障描述 :&nbsp;&nbsp;{{faultDetails1.remark}}</div>
    <div class="fault-detail" v-if="faultDetails1.opinion!=''">线长意见 :&nbsp;&nbsp;{{faultDetails1.opinion}}</div>

    <div class="title-fault" style="margin-top: 10px">
      报故人:&nbsp;&nbsp;{{ getLabelByValue(faultDetails1.creator,'user_name_list') }}
    </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!=''">
      处理结果:&nbsp;&nbsp;{{faultDetails1.result}}
    </div>
  </div>
  <div class="mainContentBox" v-if="faultDetails1!=null&&faultDetails1.currentState==5">
    <avue-crud
      ref="formRef"
      v-model="form"
      :data="data2"
      :option="option2"
    >
    </avue-crud>
  </div>
</template>
<script setup>
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import { useCommonStoreHook, useDictionaryStore } from "@/store";
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  import {getFault,getFaultDetails,getSeqNoList} 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({
    escalationFaultId: {
      type: String,
      default: () => {
        return 0;
      }
    },
    dialog:{
      type:Object,
      default:()=>{
        return {};
      }
    }
  })
  const url=ref({});
  const srcList=ref([]);
  const drawingDetail=ref(null);
  const drawing=(row)=>{
    drawingDetail.value=row;
    dialog.visible=true;
  }
  // 传入一个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 formData1=ref({});
  const data2=ref([]);
  const option2=ref([]);
  const formFault=ref({});
  const faultDetails1=ref(null);
  onMounted(() => {
    // console.log("crudRef", crudRef)
    search.value.escalationFaultId=props.escalationFaultId;
    dataNoPageList();
    formData1.value.escalationFaultId=props.escalationFaultId;
    formFault.value.escalationFaultId=props.escalationFaultId;
    getFault(formData1.value).then((data) => {


      if(data.data.length>0){
        url.value=dictDataUtil.img_url+data.data[0].fileUrl;
        for(let i=0;i<data.data.length;i++){
          srcList.value[i]=dictDataUtil.img_url+data.data[i].fileUrl;
        }
      }

    });
    getFaultDetails(props.escalationFaultId).then((data) => {

      faultDetails1.value = data.data;
      if (dicts.disposal_measures_type.length>0) {

      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;
        }
      }
    }
      getSeqNoList(formFault.value).then((data) => {

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


  });



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


  // 设置表格列或者其他自定义的option
  option2.value = {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    menu:false,
    columnBtn: false,
    gridBtn: false,
    refreshBtn:false,
    column: [
      {
        label: "跟踪卡号",
        prop: "seqNo",
      },
      {
        label: "返工工序/报废",
        prop: "reworkOperationName",
        type:"select",
      },
    ],
  };

</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;
  }
</style>