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"
    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"
            size="large"
          >
            <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-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-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-form-item label="是否首检" prop="firstInspection">
              <el-radio-group v-model="formLabelAlign.firstInspection">
                <el-radio :value="0" border size="large">否</el-radio>
                <el-radio :value="1" border size="large">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <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-form-item label="责任/经办者" prop="personResponsible">
              <el-tree-select
                v-model="formLabelAlign.personResponsible"
                :data="userList"
                placeholder="请选择人员"
                :default-expand-all="false"
                filterable
                clearable
              />
            </el-form-item>
            <el-form-item label="缺陷图片" prop="fileList">
              <MultiUpload v-model="formLabelAlign.fileList" />
            </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>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="bottom-btns">
        <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
        <el-button class="sureBtn" type="primary" @click="confirmClick">报故 </el-button>
      </div>
    </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";
import MultiUpload from "@/components/Upload/MultiUpload.vue";
import { getUserTree } from "@/api/user";

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 userList = ref([]);
const queryUserList = () => {
  getUserTree().then((data) => {
    userList.value = data.data;
  });
};
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;
      });
    }
  });
  queryUserList();
};

// 报故数量，选择工序号相关. 选择之后获取工序列表
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;
      }
    });
};

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: 64px;

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

    .item-value {
      font-weight: 500;
      font-size: 24px;
      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: 80px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 76px 76px 76px 76px;
  }

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