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

<template>
  <el-drawer
    v-model="checkVisible"
    :close-on-click-modal="false"
    destroy-on-close
    direction="rtl"
    size="990px"
    style="background-color: #f1f3f5"
  >
    <template #header>
      <div class="drawerTitle">检验</div>
    </template>
    <div>
      <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 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 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>
  </el-drawer>
</template>

<script 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 checkVisible = ref(false);
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, rowData) => {
  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(null);
const handleSubmit = async () => {
  let res = await checkUserLogin(inputValueC.value);
  userInfo.value = res.data;
};

onMounted(() => {
  // inputValueC.value = "";
});

const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
const openDrawer = () => {
  inputValueC.value = "";
  checkVisible.value = true;
};
defineExpose({
  openDrawer,
});
</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% - 200px);
  //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>