JG-CLIENT-TEMP/src/views/pro-operation/appoint-out/applyFor.vue

<template>
  <div class="commonTitle">申请</div>
  <el-scrollbar class="barHeight">
    <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">
                {{ processStore.scanInfo?.materialName }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">产品型号</div>
              <div class="item-value">
                {{ processStore.scanInfo?.materialModel }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">当前工序</div>
              <div class="item-value">
                {{ processStore.scanInfo?.operationName }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">开工时间</div>
              <div class="item-value">
                {{ processStore.scanInfo?.realStartWhen }}
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          :label="`委外产品[${formLabelAlign.details.length}]`"
          prop="details"
        >
          <el-select
            v-model="formLabelAlign.details"
            multiple
            placeholder="请选择"
            value-key="value"
          >
            <el-option
              v-for="item in processWorkSeq"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="选择工序" prop="operations">
          <el-select
            v-model="formLabelAlign.operations"
            multiple
            placeholder="请选择连续的工序"
            value-key="value"
          >
            <el-option
              v-for="item in processOps"
              :key="item"
              :label="item.operationName"
              :value="item.operationId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="供应商" prop="manufacturers">
          <el-input v-model="formLabelAlign.manufacturers" />
        </el-form-item>

        <el-form-item label="审核人" prop="auditUser">
          <el-select
            v-model="formLabelAlign.auditUser"
            filterable
            placeholder="请选择人员"
            value-key="id"
          >
            <el-option
              v-for="item in dictStroe.allUsers"
              :key="item.id"
              :label="item.nickName"
              :value="item.userName"
            />
          </el-select>
        </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 class="bottom-btns">
        <el-button class="cancelBtn el-button-big" @click="cancelClick"
          >重置</el-button
        >
        <el-button
          class="sureBtn el-button-big"
          type="primary"
          @click="confirmClick"
          >发起申请
        </el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { breakReportInfoById } from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import { addAppointOut, getProcessOpInfo } from "@/api/process/appointOut";
import { emitter, EventsNames } from "@/utils/common";
import { useDictionaryStore } from "@/store";

const dictStroe = useDictionaryStore();

const processStore = useProcessStore();

const formRef = ref<InstanceType<typeof ElForm>>();

const formLabelAlign = reactive({
  details: [],
  manufacturers: "",
  remark: "",
  operations: [],
  auditUser: "",
});
const rules = reactive({
  manufacturers: [
    { required: true, message: "请输入 委外厂商", trigger: "blur" },
  ],
  auditUser: [{ required: true, message: "请选择 ", trigger: "blur" }],
});

const processWorkSeq = ref<any>([]);

const cancelClick = () => {
  formRef.value && formRef.value.resetFields();
};

const processOps = ref<any[]>([]); //工序列表

onMounted(() => {
  breakReportInfoById(processStore.scanInfo.id).then((res: any) => {
    processWorkSeq.value = res.data.processWorkSeq || [];
  });
  getProcessOpInfo(processStore.scanInfo.id).then((res: any) => {
    processOps.value = res.data || [];
  });
});

const confirmClick = () => {
  // drawerVisible.value = false;
  formRef.value &&
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        const seqs: any[] = [];
        formLabelAlign.details.forEach((item) => {
          seqs.push({ seqNo: item });
        });
        let params = {
          processId: processStore.scanInfo.id,
          outNum: formLabelAlign.details.length,
          details: seqs,
          operations: formLabelAlign.operations,
          auditUser: formLabelAlign.auditUser,
          manufacturers: formLabelAlign.manufacturers,
          remark: formLabelAlign.remark,
        };

        addAppointOut(params).then(() => {
          ElMessage.success("申请成功");
          emitter.emit(EventsNames.APPOINT_OUT);
        });
      }
    });
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: $f20;
}
#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: space-between;
  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;
  }
}

.barHeight {
  height: calc(100vh - 170px);
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

<style lang="scss" scoped></style>