web_dist/src/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/BaoCunXinXi.vue

<template>

  <div :style="style" class="main xc_box 小手指">
    <div ref="div" class="header">
      <div style="flex: 1">上传提示</div>
      <div class="circle_close " @click="close">
        <el-icon :size="21">
          <CircleClose/>
        </el-icon>
      </div>
    </div>

    <div class="box">

      <div v-for="(value, key) in tips"
           class="message"
           :class="currentKey === key ? 'current_selected' : '' "
           @click="clickToModify(key)">
        <div class="name">
          {{ value?.data?.orderName }}
        </div>

        <div v-if="value?.error" class="error">
          <div>
            错误信息:
          </div>
          <div v-for="(item,index) in value?.error">
            {{ index + 1 }}、 {{ item }}
          </div>
        </div>

        <div v-if="value?.warning" class="warning">
          <div>
            警告信息:
          </div>
          <div v-for="(item,index) in value?.warning">
            {{ index + 1 }}、 {{ item }}
          </div>
        </div>
      </div>
    </div>

  </div>


</template>

<script setup name='BaoCunXinXi' lang="ts">
import {useDraggable} from '@vueuse/core'
import {delCallback, setCallback} from "@/utils/websocket";
import {$ref} from "vue/macros";
// import {onMounted, onUnmounted, ref} from "vue";

const props = defineProps({
  data: Object
})

const div = ref(null)

const {x, y, style} = useDraggable(div, {
  initialValue: {x: 77, y: 494},
});

let tips: Object = $ref({})

const close = () => {
  console.log('关闭')
}

let currentKey: string = $ref('')
const clickToModify = (key) => {
  currentKey = key
}

onMounted(() => {
  setCallback('updatedOrder', async (data) => {
    tips = data
  })
})


onUnmounted(() => {
  delCallback('updatedOrder')
})


</script>

<style scoped lang="scss">

.main {
  position: fixed;
  width: 350px;
  z-index: 20;
  background-color: white;
  border-radius: 5px;


  .header {
    border-bottom: 1px solid #000;
    width: 100%;
    line-height: 35px;
    text-align: center;
    display: flex;
    position: relative;

    .circle_close {
      position: absolute;
      display: flex;
      right: 0;
      justify-content: center;
      align-items: center;
      width: 35px;
      height: 100%;
    }
  }

  .box {
    margin: 5px;
    padding: 4px;
    max-height: 300px;
    overflow: auto;

    .current_selected {
      border: 1px solid #0a84fd !important;

      .name {
        background-color: #0a84fd !important;
      }

    }

    .message {
      border: 1px dashed #000;
      padding: 5px;
      border-radius: 4px;
      margin: 5px 0;

      .name {
        padding: 5px;
        border-radius: 5px;
        background-color: #2c3e50;
        color: white;
      }

      .error {
        margin: 5px 0;
        padding: 4px;
        border-radius: 5px;
        background-color: #f89b9b;
      }

      .warning {
        margin: 5px 0;
        padding: 4px;
        border-radius: 5px;
        background-color: #f5e1b8;
      }

    }
  }
}


</style>