JG-ADMIN-TEMP/src/views/quality/faultHandle/components/fault-handle.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" >序列号:&nbsp;&nbsp;{{faultDetails.seqNo}}</div>
    <div class="fault-detail">故障描述:&nbsp;&nbsp;{{faultDetails.remark}}</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">
      报故数量:&nbsp;&nbsp;{{faultDetails.unqualifiedNum}}
    </div>
    <div class="title-fault" style="margin-top: 10px">
      处理结果:&nbsp;&nbsp;{{faultDetails.disposalMeasures}}
    </div>
  </div>
</template>
<script setup>
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import ButtonPermKeys from "@/common/configs/buttonPermission";
  import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  import {getFault,getFaultDetails} from "@/api/fault"
  import dictDataUtil from "@/common/configs/dictDataUtil";
  // 数据字典相关
  const { dicts } = useDictionaryStoreHook();

  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };
  const props = defineProps({
    escalationId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    dialog1:{
      type:Object,
      default:()=>{
        return {};
      }
    }
  })
  // 传入一个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 faultImg=ref(null);
  const formData=ref({});
  const faultDetails=ref(null);
  onMounted(() => {
    // console.log("crudRef", crudRef)

    search.value.escalationFaultId=props.escalationId;
    dataNoPageList();
    formData.value.escalationFaultId=props.escalationId;
    getFault(formData).then((data) => {

      faultImg.value=data.data;
      console.info(faultImg.value);
    });
    getFaultDetails(props.escalationId).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;
        }
      }
    });

  });




  // 设置表格列或者其他自定义的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",
      },
    ],
  });


</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>