JG-CLIENT-TEMP/src/views/process/components/transferNum.vue

<template>
  <div class="commonTitle">流转卡号</div>
  <div class="body">
    <el-scrollbar class="scrollbar">
      <div
        v-if="selectSeqArray.length < 1"
        class="titleText"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: calc(100vh - 210px);
        "
      >
        请选择工序
      </div>
      <Transition>
        <div v-if="selectSeqArray.length > 0">
          <div
            v-for="(item, index) in selectSeqArray"
            :key="index"
            class="row"
            @click="clickCardNum(index)"
          >
            <el-tooltip
              :content="item.seqNo"
              effect="dark"
              placement="left"
              trigger="hover"
            >
              <span
                :class="
                  index == selectSeqIndex
                    ? 'describeText active'
                    : 'describeText'
                "
                >{{ item.seqNo }}</span
              >
            </el-tooltip>
            <div
              :class="
                dictS.getLableByValue(
                  'work_order_seq_state',
                  String(item.state)
                ) == '完成'
                  ? 'status success'
                  : 'status'
              "
            >
              {{
                dictS.getLableByValue(
                  "work_order_seq_state",
                  String(item.state)
                )
              }}
            </div>
          </div>
        </div>
      </Transition>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { useDictionaryStore, useProcessStore } from "@/store";
import { Transition } from "vue";

const store = useProcessStore();
const dictS = useDictionaryStore();
const selectSeqIndex = inject("selectSeqIndex");
const selectSeqArray = inject("selectSeqArray");
const clickCardNum = (index: number) => {
  selectSeqIndex.value = index;
  store.useSeqNo = selectSeqArray.value[selectSeqIndex.value].seqNo;
};
onMounted(() => {
  if (!selectSeqIndex.value) store.useSeqNo = "";
});
</script>

<style lang="scss" scoped>
.success {
  color: #64bb5c;
}

.body {
  width: 100%;
  background-color: white;
  border-radius: 16px;
  padding: 20px;

  .row {
    display: flex;
    justify-content: space-between;
    align-items: bottom;
    vertical-align: center;

    .status {
      width: 50px;
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}

.describeText {
  color: black;
  font-weight: $Medium;
  font-size: 22px;
  margin-bottom: $p10;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  cursor: pointer;
}

.active {
  color: $select-hover;
  animation-name: cardHover;
  animation-duration: 0.5s;
}

.scrollbar {
  height: calc(100vh - 210px);
}
</style>