JG-CLIENT-TEMP/src/views/pro-operation/report-break/index.vue

<template>
  <el-drawer
    v-model="drawerVisible"
    :close-on-click-modal="false"
    :show-close="false"
    :with-header="false"
    destroy-on-close
    direction="rtl"
    size="990px"
  >
    <!--    <template #header>-->
    <!--      <div class="drawerTitle">报故</div>-->
    <!--    </template>-->
    <template #default>
      <el-scrollbar>
        <div id="drawContent">
          <el-form
            ref="formRef"
            :model="formLabelAlign"
            :rules="rules"
            label-position="top"
            label-width="auto"
          >
            <el-form-item label="基本信息">
              <div class="base-info">
                <div class="info-item">
                  <div class="item-label">产品名称</div>
                  <div class="item-value">{{ infoData?.materialName }}</div>
                </div>
                <div class="info-item">
                  <div class="item-label">产品型号</div>
                  <div class="item-value">{{ infoData?.spec }}</div>
                </div>
                <div class="info-item">
                  <div class="item-label">阶段</div>
                  <div class="item-value">
                    {{
                      dictStroe.getLableByValue(
                        "stage",
                        infoData?.stageDictValue
                      )
                    }}
                  </div>
                </div>
                <div class="info-item">
                  <div class="item-label">生产数量</div>
                  <div class="item-value">{{ infoData?.planNum }}</div>
                </div>
              </div>
            </el-form-item>

            <el-row>
              <el-col :span="11">
                <el-form-item
                  :label="`报故数量[${formLabelAlign.seqNoList.length}]`"
                  prop="seqNoList"
                >
                  <el-select
                    v-model="formLabelAlign.seqNoList"
                    multiple
                    placeholder="请选择"
                    value-key="value"
                    @change="selectProcessWorkSeqChange"
                  >
                    <el-option
                      v-for="item in infoData?.processWorkSeq"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="12">
                <el-form-item label="是否首检" prop="firstInspection">
                  <el-radio-group v-model="formLabelAlign.firstInspection">
                    <el-radio :value="0" border>否</el-radio>
                    <el-radio :value="1" border>是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="缺陷分类" prop="reasonType">
                  <el-select
                    v-model="formLabelAlign.reasonType"
                    placeholder="请选择"
                    value-key="dictValue"
                    @change="selectQuexianType"
                  >
                    <el-option
                      v-for="item in dictStroe.dicts.defect_mana"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="12">
                <el-form-item label="缺陷名称" prop="reasonList">
                  <el-select
                    v-model="formLabelAlign.reasonList"
                    filterable
                    multiple
                    placeholder="请选择"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in quexianList"
                      :key="item.id"
                      :label="item.bugName"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="不合格品分布情况及工序"
                  prop="processesList"
                >
                  <el-select
                    v-model="formLabelAlign.processesList"
                    multiple
                    placeholder="请选择"
                    value-key="operationId"
                  >
                    <el-option
                      v-for="item in operationList"
                      :key="item.operationId"
                      :label="item.operationName"
                      :value="item.operationId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="12">
                <el-form-item label="责任/经办者" prop="personResponsible">
                  <el-select
                    v-model="formLabelAlign.personResponsible"
                    filterable
                    placeholder="请选择"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in dictStroe.allUsers"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.userName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="缺陷图片" prop="fileList">
              <div>
                <div>
                  <el-button style="margin-bottom: 8px" @click="camera_ohos"
                    >上传图片
                  </el-button>
                </div>
                <div v-if="formLabelAlign.fileList?.length > 0">
                  <el-image
                    v-for="url in formLabelAlign.fileList"
                    :src="url"
                    fit="cover"
                    style="width: 100px; height: 100px; margin-right: 10px"
                  />
                </div>
              </div>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formLabelAlign.remark"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-btns">
          <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
          <el-button class="sureBtn" type="primary" @click="confirmClick"
            >报故
          </el-button>
        </div>
      </el-scrollbar>
    </template>
    <template #footer></template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {
  addBreakReport,
  basebugsByType,
  breakReportInfoById,
  operationListByIds,
} from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import { useDictionaryStore } from "@/store/modules/dictionary";
import { getProcessInfo } from "@/api/prosteps";

const processStore = useProcessStore();
const dictStroe = useDictionaryStore();

const drawerVisible = ref(false);

const infoData = ref<any>({});

const formRef = ref<InstanceType<typeof ElForm>>();
const formLabelAlign = reactive({
  seqNoList: [],
  reasonType: "",
  reasonList: [],
  processesList: [],
  fileList: [],
  firstInspection: 0,
  personResponsible: "",
  remark: "",
});
const rules = reactive({
  trackingNumber: [
    { required: true, message: "请输入 追踪卡号", trigger: "blur" },
  ],
  workOrderNumber: [
    { required: true, message: "请输入 工作令号", trigger: "blur" },
  ],
  archiveNumber: [
    { required: true, message: "请输入 归档编号", trigger: "blur" },
  ],
  seqNoList: [{ required: true, message: "请选择 ", trigger: "blur" }],
});

const openReportBreakDrawer = () => {
  getProcessInfo(processStore.scanInfo.id).then((res) => {
    processStore.scanInfo.currentState = res.data.currentState;
    if (res.data.currentState !== "start") {
      ElMessage.error("当前工单状态不允许报故");
      return;
    } else {
      drawerVisible.value = true;
      breakReportInfoById(processStore.scanInfo.id).then((res) => {
        infoData.value = res.data;
      });
    }
  });
};

// 报故数量，选择工序号相关. 选择之后获取工序列表
const operationList = ref<any[]>([]);
const selectProcessWorkSeqChange = useDebounceFn(() => {
  operationListByIds(formLabelAlign.seqNoList).then((res) => {
    operationList.value = res.data;
  });
}, 2000);

const quexianList = ref<any>([]);
const selectQuexianType = (value: string) => {
  basebugsByType(value).then((res) => {
    quexianList.value = res.data || [];
  });
};

const cancelClick = () => {
  drawerVisible.value = false;
};

const confirmClick = () => {
  formRef.value &&
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        let params = {
          processId: processStore.scanInfo.id,
          ...formLabelAlign,
        };
        addBreakReport(params).then(() => {
          ElMessage.success("报故成功");
          drawerVisible.value = false;
        });
      } else {
        return false;
      }
    });
};

const camera_ohos = () => {
  let p = {
    token: localStorage.getItem("token"),
    method: "post",
    methodName: "startCamera",
    messageKey: "report_bad",
  };
  if (window.openHarmonyBridge && window.openHarmonyBridge.startCamera) {
    window.openHarmonyBridge.startCamera(JSON.stringify(p));
  }
};

window.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  if (data.fullUrl && data.messageKey && data.messageKey === "report_bad") {
    formLabelAlign.fileList.push(data.fullUrl);
  }
});

defineExpose({
  openReportBreakDrawer,
});
</script>

<style lang="scss" scoped>
#drawContent {
  width: 100%;
  //:deep(.el-form--large.el-form--label-top .el-form-item .el-form-item__label) {
  //  font-weight: 500;
  //  font-size: 22px;
  //  color: rgba(0, 0, 0, 0.9);
  //  text-align: left;
  //}
}

.base-info {
  width: 100%;
  background: #e3e5e7;
  border-radius: 16px 16px 16px 16px;
  padding: 0 30px;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;

    .item-label {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.6);
    }

    .item-value {
      font-weight: 500;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .info-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}

.bottom-btns {
  display: flex;
  justify-content: center;
  //margin-top: 20px;
  //margin-bottom: 20px;

  .button {
    margin-right: 20px;
  }

  .cancelBtn {
    width: 292px;
    height: 40px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 76px 76px 76px 76px;
  }

  .sureBtn {
    width: 292px;
    height: 40px;
    background: #0a59f7;
    border-radius: 76px 76px 76px 76px;
  }
}
</style>