yjhtgl-web/src/components/Dialog/index.vue

<template>
  <div
    v-if="modelValue || customShow"
    v-drag="{ draggable: draggable, position: 'fixed', scale: containerScale, handle: headerType === 'header2' ? '.dialog-header2' : '.dialog-header' }"
    class="common-dialog"
    :class="customClass"
    :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }"
  >
    <div :class="type === 'xs' || headerType === 'header2' ? 'dialog-header2' : 'dialog-header'">
      <div class="header-left">
        <div v-if="!hideTitle" class="dialog-title" :title="title ? title : '弹窗'">
          {{ title ? title : '弹窗' }}
        </div>
        <div v-if="!!getTagId" class="tags">
          <div v-for="(item, index) in tags" :key="index" class="tag">{{ item.dict_label }}</div>
          <i :class="tags && tags.length > 0 ? 'collectFill' : 'collect'" @click="handleShowAddTag" />
        </div>
      </div>
      <i class="decoration" />
      <i class="dialog-close" @click="closeDialog" />
    </div>
    <div class="dialog-content">
      <slot />
    </div>
    <template v-if="!hideFooter">
      <slot v-if="$slots.footer" name="footer" />
      <div v-else class="dialog-footer">
        <div :class="cancelClass ? cancelClass + ' common-btn' : 'common-btn'" @click="closeDialog">{{ cancelText }}</div>
        <div :class="confirmClass ? confirmClass + ' common-btn-primary' : 'common-btn-primary'" @click="confirm">{{ confirmText }}</div>
      </div>
    </template>
    <i class="triangle1" />
    <i class="triangle2" />
    <i class="triangle3" />
    <i class="triangle4" />
  </div>
  <VideoTagEdit v-if="showAddTag" v-model="showAddTag" :tags="tags" :id="getTagId" @updateVideoTag="getData2" />
</template>

<script lang="ts" setup name="Dialog">
import { getVideoTagInfo } from '@/api/videoMonitor';
import useAppStore from '@/store/modules/app';

interface Tag {
  dict_label: string;
  dict_value: string;
}
// type: xs、sm、md、lg、xl
interface Props {
  modelValue?: boolean;
  type?: string;
  title?: string;
  hideTitle?: boolean;
  width?: string;
  height?: string;
  cancelText?: string;
  cancelClass?: string;
  confirmText?: string;
  confirmClass?: string;
  hideFooter?: boolean;
  customShow?: boolean;
  headerType?: string;
  getTagId?: string;
  draggable?: boolean;
  customClass?: string;
}
const containerScale = inject('containerScale');
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  type: 'md',
  cancelText: '取消',
  confirmText: '确定',
  hideFooter: false
});
const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'changeTagsData']);
const computedWidth = computed(() => {
  if (!!props.width) {
    return props.width;
  } else if (!!props.width) {
    return props.width;
  } else if (props.type === 'xs') {
    return '404px';
  } else if (props.type === 'sm') {
    return '584px';
  } else if (props.type === 'lg') {
    return '1024px';
  } else if (props.type === 'xl') {
    return '1270px';
  } else {
    return '744px';
  }
});
const computedHeight = computed(() => {
  if (!!props.height) {
    return props.height;
  } else {
    return 'auto';
  }
  // else if (props.type === 'xs') {
  //   return '150px';
  // } else if (props.type === 'sm') {
  //   return '720px';
  // } else if (props.type === 'lg') {
  //   return '720px';
  // } else if (props.type === 'xl') {
  //   return '720px';
  // } else {
  //   return '760px';
  // }
});
const appStore = useAppStore();
let zIndex = ref(999);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue && !props.customShow) {
      zIndex.value = appStore.getZIndex();
    }
  },
  { immediate: true }
);
let tags = ref<Tag[]>([]);
// 关闭弹窗
const closeDialog = () => {
  emit('close');
  if (!props.customShow) {
    emit('update:modelValue', false);
  }
};
// 确认按钮
const confirm = () => {
  emit('confirm');
  if (!props.customShow) {
    emit('update:modelValue', false);
  }
};
// 显示添加标签
let showAddTag = ref(false);
const handleShowAddTag = () => {
  showAddTag.value = true;
};
const getData = (needUpdate?: boolean) => {
  getVideoTagInfo({ video_code: props.getTagId }).then((res) => {
    tags.value = res.data;
    if (!!needUpdate) {
      emit('changeTagsData', res.data);
    }
  });
};
const getData2 = () => {
  getData(true);
  showAddTag.value = false;
};
onMounted(() => {
  if (props.customShow) {
    zIndex.value = appStore.getZIndex();
  }
  if (props.getTagId) {
    getData();
  }
});
</script>

<style lang="scss" scoped>
.common-dialog {
  border: 4px solid #2c81ff;
  padding-bottom: 10px;
  color: #ffffff;
  background-color: rgba(5, 18, 53, 0.85);
  box-shadow: inset 0 0 40px 10px rgba(26, 144, 255, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 100px);
  z-index: 99;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  .dialog-header,
  .dialog-header2 {
    position: relative;
    min-height: 50px;
    line-height: 28px;
    padding-bottom: 15px;
    .dialog-title {
      width: 500px;
      color: transparent;
      background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      display: inline-block;
      font-family: 'YouSheBiaoTiHei';
      font-size: 24px;
      padding-left: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dialog-close {
      position: absolute;
      top: 6px;
      right: 10px;
      width: 12px;
      height: 12px;
      background: url('@/assets/images/common/close.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      display: block;
    }
    .decoration {
      position: absolute;
      top: 6px;
      right: 26px;
      width: 46px;
      height: 10px;
      background: url('@/assets/images/common/decoration.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      display: block;
    }
  }
  .dialog-header {
    padding-top: 6px;
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 287px;
      height: 47px;
      background: url('@/assets/images/common/line1.png') no-repeat;
      background-size: 100% 100%;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 24.5px;
      left: 286px;
      width: calc(100% - 280px);
      height: 2.1px;
      background-image: linear-gradient(to right, rgba(10, 154, 196, 1) 0%, rgba(10, 154, 196, 0) 100%);
      background-size: 100% 100%;
    }
  }
  .dialog-header2 {
    display: flex;
    .dialog-title {
      width: auto;
    }
    .header-left {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 47px;
        height: 20px;
        background: url('@/assets/images/line.png') no-repeat;
        background-size: 100% 100%;
      }
      &::after {
        content: '';
        position: absolute;
        bottom: 15px;
        left: 52px;
        width: calc(100% - 47px);
        height: 2px;
        background-image: linear-gradient(to right, rgba(10, 154, 196, 1) 0%, rgba(10, 154, 196, 0) 100%);
        background-size: 100% 100%;
      }
    }
    .tags {
      display: flex;
      align-items: center;
      margin-top: -18px;
      .tag {
        width: 126px;
        height: 26px;
        background: url('@/assets/images/map/tag.png') no-repeat;
        background-size: 100% 100%;
        flex-shrink: 0;
        color: #ffffff;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .collect {
        background: url('@/assets/images/video/collect.png') no-repeat;
      }
      .collectFill {
        background: url('@/assets/images/video/collectFill.png') no-repeat;
      }
      .collect,
      .collectFill {
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-size: 100% 100%;
        cursor: pointer;
        margin-left: 6px;
      }
    }
  }
  .el-form-item__label {
    font-size: 38px;
    color: #fff;
  }
}

.common-dialog {
  .dialog-content {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 0 10px;
  }
  .dialog-footer {
    padding: 0 10px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: none;
  }
}
.triangle1,
.triangle2,
.triangle3,
.triangle4 {
  width: 12px;
  height: 12px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
}
.triangle1 {
  top: 6px;
  left: 6px;
  background-image: url('@/assets/images/common/triangle1.png');
}
.triangle2 {
  top: 6px;
  right: 6px;
  background-image: url('@/assets/images/common/triangle2.png');
}
.triangle3 {
  bottom: 6px;
  left: 6px;
  background-image: url('@/assets/images/common/triangle3.png');
}
.triangle4 {
  bottom: 6px;
  right: 6px;
  background-image: url('@/assets/images/common/triangle4.png');
}
.common-btn-danger {
  margin-left: 20px;
}
.header-left {
  display: flex;
  flex-wrap: wrap;
}
</style>