123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <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>
|