crm_front_v3/src/views/rai_manage/components/matchingDlg.vue

<script setup>
import { ref, watch, nextTick } from "vue";

import { raiInterface } from "@/api/api.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  matchingDlgShow: {
    type: Boolean,
    default: false,
  },
  matchingId: {
    type: Number,
  },
});

const dataQueryList = ref([]);
const matchingValue = ref("");

const $emit = defineEmits(["getsDataList"]);
function closeDlg() {
  matchingValue.value = "";
  dataQueryList.value = [];
  $emit("update:matchingDlgShow", false);
}
//作者的搜索
async function remoteMethod(query) {
  if (query !== "") {
    dataQueryList.value = [];
    const res = await raiInterface.activityMeetMatchingList({ KeyWord: query });
    if (res.Ret === 200) {
      let obj = {};
      res.Data.List &&
        res.Data.List.forEach((item) => {
          obj = {
            ...item,
            value: item.RoadshowTitle + `【` + item.ActivityTime + "】",
          };
          dataQueryList.value.push(obj);
        });
    }
  } else {
    dataQueryList.value = [];
  }
}
async function confirm() {
  if (!matchingValue) return ElMessage.error("请输入活动名称关键字");
  const res = await raiInterface.activityMeetMatchingByHand({
    ActivityId: props.matchingId,
    KeyWord: matchingValue.value,
  });
  if (res.Ret === 200) {
    dataQueryList.value = [];
    matchingValuev.value = "";
    ElMessage.success("操作成功!");
    $emit("update:matchingDlgShow", false);
    $emit("getsDataList");
  }
}
</script>

<template>
  <div class="container-macthing">
    <el-dialog draggable :modal-append-to-body="false" center v-model="props.matchingDlgShow" @beforeClose="closeDlg" :width="'40%'">
      <div class="content-macthing">
        <el-select style="width: 100%" v-model="matchingValue" filterable clearable :filter-method="remoteMethod" placeholder="请输入活动名称关键字">
          <el-option v-for="item in dataQueryList" :key="item.RoadshowTitle + item.ActivityTime" :label="item.value" :value="item.RoadshowTitle + '{|}' + item.ActivityTime"> </el-option>
        </el-select>
      </div>
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="fontsize: 16px">手动匹配</span>
        </div>
      </template>
      <template #footer>
        <div style="margin-top: 40px">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button type="primary" @click="closeDlg">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.content-macthing {
  margin: 30px;
}
</style>