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"
        >
          <FirstCheck :user-name="userInfo?.userName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="store.scanInfo.inspection == 0"
          label="巡检"
          name="second"
        >
          <RollCheck :user-name="userInfo?.userName" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </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";

const store = useProcessStore();
const inputValueC = ref("");
const userInfo = ref<any>(null);
const handleSubmit = async () => {
  console.log(inputValueC.value);
  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>