JG-CLIENT-TEMP/src/views/pro-operation/check-out/index.vue

<template>
  <div class="mainContentBox">
    <div class="header">
      <ScanCodeInput
        v-model="inputValueC"
        placeholder="请扫码或输入当前用户信息，按回车键确认"
        style="width: 550px"
        @keyup.enter="handleSubmit"
      />
      <div v-if="userInfo" class="info">
        当前检验用户：{{ userInfo?.userName }}
      </div>
    </div>
    <div class="bottom-container">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-if="store.scanInfo.firstCheck == 1"
          label="首检"
          name="first"
          ><el-button
            type="primary"
            @click="addOpen(1)"
            class="titleText"
            style="
              width: 260px;
              height: 50px;
              border-radius: 16px;
              margin-bottom: 20px;
            "
            >新增
          </el-button>
          <FirstCheck
            ref="firstRef"
            @edit-open="editOpen"
            @get-page="getPage1"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="store.scanInfo.inspection == 1"
          label="过程检验"
          name="second"
          ><el-button
            type="primary"
            @click="addOpen(2)"
            class="titleText"
            style="
              width: 260px;
              height: 50px;
              border-radius: 16px;
              margin-bottom: 20px;
            "
            >新增
          </el-button>
          <RollCheck ref="rollRef" @edit-open="editOpen" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <Info
      ref="infoRef"
      :addStatus
      :checkType
      :checkUser="userInfo?.userName"
      @get-page1="getPage1"
      @get-page2="getPage2"
    />
  </div>
</template>

<script lang="ts" setup>
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
import { useProcessStore } from "@/store";
import { checkUserLogin } from "@/api/prosteps/dianjian";
import FirstCheck from "./first-check.vue";
import RollCheck from "./roll-check.vue";
import Info from "./info.vue";

const store = useProcessStore();
const addStatus = ref(true);
const inputValueC = ref("");
const checkType = ref(1);
const infoRef = ref(null);
const rollRef = ref(null);
const firstRef = ref(null);
const rowData = ref({});
const editOpen = (checkType: any, rowData: any) => {
  if (checkType == 1) {
    rowData.value = rowData;
    infoRef.value.open();
  } else {
    rowData.value = rowData;
    infoRef.value.open();
  }
};
const addOpen = (type) => {
  checkType.value = type;
  addStatus.value = true;
  infoRef.value.open();
};
const getPage1 = () => {
  firstRef.value.dataList();
};
const getPage2 = () => {
  rollRef.value.dataList();
};
const userInfo = ref<any>(null);
const handleSubmit = async () => {
  let res: any = await checkUserLogin(inputValueC.value);
  userInfo.value = res.data;
};

onMounted(() => {
  inputValueC.value = "";
  console.log("mounted");
});

const activeName = ref("first");

const handleClick = (tab: any, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: start;
  //border: 1px solid #ccc;

  .info {
    margin-left: 20px;
    font-size: 16px;
    color: #666;
    font-weight: bold;
  }
}

.bottom-container {
  margin-top: 10px;
  height: calc(100% - 70px);
  //border: 1px solid #ccc;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  border: 0;
}

:deep(.el-tabs--card > .el-tabs__header) {
  height: 80px;
  border: 0;
  overflow: hidden;
  border-radius: 16px 16px 16px 16px;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  width: 290px;
  height: 80px;
  border-radius: 0;
  font-weight: 500;
  font-size: 24px;
  overflow: hidden;
  background: transparent;
  border-color: transparent;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  background: white;
  border-radius: 16px 16px 16px 16px;
  border-color: transparent;
  overflow: hidden;
}
</style>