JG-CLIENT-TEMP/src/views/pro-steps/components/shebeijilu.vue

<template>
  <div class="stepsViewScroll">
    <div class="recordBox" v-for="(item, index) in equitListData" :key="index">
      <div class="headerText titleText">{{ item.equitType }}</div>
      <div class="describeBox">
        <div class="describeText">精度要求</div>
        <div class="describeText" style="color: black">
          {{ item.accuracy }}
        </div>
      </div>
      <!-- 变量控制样式 -->
      <div class="footerBtn">
        <el-button
          v-if="!item.equitCode"
          class="bottomBtn"
          style="background-color: #0a59f7"
          @click="openScanCode(index)"
          >点击扫描设备</el-button
        >
        <div v-else class="infoBox">
          <div class="info">
            <div>
              <div class="describeText" style="text-align: left">
                {{ item.equitName }}
              </div>
              <div class="describeText" style="text-align: left">
                {{ item.equitCode }}
              </div>
            </div>
          </div>
          <div class="info">
            <div></div>
            <div>
              <div class="describeText" style="text-align: right">
                检定有效期
              </div>
              <div class="describeText" style="text-align: right">
                {{ item.validDate }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PopScanCode
      v-model:inputValue="inputValueVal"
      v-model:showStatus="showStatusVal"
      @submit="scanCode"
      title="请扫描设备"
    />
  </div>
</template>

<script lang="ts" setup>
import { equitList, equitUpdate, queryByCode } from "@/api/prosteps/shebeijilu";
import { useProcessStore } from "@/store";
defineOptions({ name: "Shebeijilu" });
const store = useProcessStore();
const equitListData = ref([]);
const selectIndex = ref(null);
const getEquitList = async () => {
  const { data } = await equitList({
    seqNo: store.scanInfo.seqNo,
    operationId: store.odersData.operationId,
    processId: store.scanInfo.id,
    pageSize: 9999,
    pageNo: 1,
  });
  equitListData.value = data;
};
const inputValueVal = ref("");
const showStatusVal = ref(false);
const equitCheck = async () => {
  await equitUpdate({});
};
const openScanCode = (index) => {
  showStatusVal.value = true;
  selectIndex.value = index;
};
const scanCode = async () => {
  const { data, code } = await queryByCode({
    deviceNo: inputValueVal.value,
    recordId: equitListData.value[selectIndex.value].id,
  });
  if (code == "200") {
    ElMessage.success("绑定成功！");
    equitListData.value[selectIndex.value] = data;
    inputValueVal.value = "";
    showStatusVal.value = false;
  }
};
onMounted(() => {
  getEquitList();
});
</script>

<style lang="scss" scoped>
.recordBox {
  min-width: 600px;
  height: 210px;
  background-color: white;
  border-radius: 16px;
  display: flex;
  padding: $p20;
  flex-direction: column;
  justify-content: space-between;

  .headerText {
  }

  .describeBox {
  }

  //按钮样式
  .footerBtn {
    width: 100%;
    height: 70px;
    background-color: #00000015;
    border-radius: 16px;
    overflow: hidden;

    .bottomBtn {
      width: 100%;
      height: 100%;
      font-size: $f24;
      color: white;
    }

    .footerInfo {
      width: 100%;
      height: 70px;
      background-color: #00000015;
      border-radius: 16px;
      overflow: hidden;
    }

    .infoBox {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: $p20 $p10;

      .info {
        width: 50%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  //描述样式
}
</style>