logpm_page/src/components/MultiConditionSearch/MultiConditionSearch.vue

<template>
  <!-- 搜索弹窗 -->
  <div class="Searchboxpop-upwindow">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :show-close="false"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      :draggable="true"
      :overflow="false"
      width="50%"
    >
      <template #header>
        <div class="title">
          <span>{{ title }}</span>
        </div>
        <div class="div_icon">
          <el-icon @click="minimize"><Minus /></el-icon>
          <el-icon @click="maximize"><FullScreen /></el-icon>
          <el-icon @click="close"><CloseBold /></el-icon>
        </div>
      </template>
      <el-input
        v-model="localInputValue"
        style="width: 100%; height: 100%"
        :autosize="{ minRows: 24, maxRows: 24 }"
        type="textarea"
        placeholder="每一行算一个搜索单位“多个请【换行】输入"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogSearchSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 最小化窗口 -->
  <div class="minimize_windows" v-if="minimizeState">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div class="div_icon">
      <el-icon @click="expandWindow"><FullScreen /></el-icon>
      <el-icon @click="destroyWindow"><Close /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import { Minus, FullScreen, CloseBold, Close } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  inputValue: {
    type: String,
    required: false,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue', 'dialogSearchSubmit', 'update:inputValue']);

const dialogVisible = ref(props.modelValue);
const fullscreen = ref(false);
const minimizeState = ref(false);
const localInputValue = ref(props.inputValue);

watch(
  () => props.modelValue,
  newVal => {
    dialogVisible.value = newVal;
  }
);

watch(
  () => props.inputValue,
  newVal => {
    localInputValue.value = newVal;
  }
);

const minimize = () => {
  minimizeState.value = true;
  dialogVisible.value = false;
  emit('update:modelValue', false);
};

const maximize = () => {
  fullscreen.value = !fullscreen.value;
};

const close = () => {
  emit('update:modelValue', false);
};

const expandWindow = () => {
  minimizeState.value = false;
  dialogVisible.value = true;
  emit('update:modelValue', true);
};

const destroyWindow = () => {
  minimizeState.value = false;
  emit('update:modelValue', false);
};

const dialogSearchSubmit = () => {
  const lines = localInputValue.value
    .split('\n') // 按换行分割
    .map(line => line.trim()) // 移除每一行前后的空格
    .filter(line => line !== ''); // 过滤掉空行

  const joinedLines = lines.join(','); // 使用逗号连接，无空格
  localInputValue.value = joinedLines;
  emit('dialogSearchSubmit', localInputValue.value);
};
</script>

<style scoped lang="scss">
.Searchboxpop-upwindow {
  :deep(.el-overlay) {
    position: absolute;

    .el-dialog {
      min-height: 70%;
    }
    .el-overlay-dialog {
      position: absolute;
    }
    .el-dialog__header {
      display: flex !important;
      justify-content: space-between;
      .title {
        position: relative;
        padding: 0 10px;
      }
      .title::after {
        content: '*';
        color: #172e60;
        position: absolute;
        font-size: 20px;
        top: 0;
        left: 0;
      }
      .div_icon {
        width: 100px;
        display: flex;
        justify-content: space-between;
        font-size: 19px;
        cursor: pointer;
      }
    }

    .el-dialog__footer {
      display: flex;
      justify-content: center;
      padding: 6px;
      .el-button {
        width: 160px;
        height: 35px;
      }
    }
  }
}

.minimize_windows {
  width: 200px;
  height: 35px;
  border: 1px solid #cccccc82;
  position: absolute;
  bottom: 5px;
  left: 5px;
  box-shadow: 2px -1px 0.15625vw #c1c1c187;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  .title {
    height: 100%;
    display: flex;
    align-items: center;
    span {
      font-size: 18px;
    }
  }
  span {
    font-size: 14px;
  }
  .div_icon {
    display: flex;
    align-items: center;
    width: 54px;
    justify-content: space-between;
    font-size: 20px;
  }
}

:deep(.el_exportSelection) {
  width: 30%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .el-dialog__body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 12px;
    .el-button {
      width: 30%;
      height: 44%;
    }
  }
}
</style>