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

<template>
  <div class="container-macthing">
    <mDialog :show.sync="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>
      <div slot="title" 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>
      <div slot="footer" style="margin-top: 40px">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="primary" @click="closeDlg">取消</el-button>
      </div>
    </mDialog>
  </div>
</template>

<script>
import mDialog from "@/components/mDialog.vue";
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {
    mDialog,
  },
  props: {
    matchingDlgShow: {
      type: Boolean,
      default: false,
    },
    matchingId:{
        type: Number, 
    }
  },
  data() {
    return {
      dataQueryList: [],
      matchingValue: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    closeDlg() {
      this.matchingValue=''
      this.dataQueryList = [];
      this.$parent.matchingDlgShow = false;
    },
    //作者的搜索
    async remoteMethod(query) {
      if (query !== "") {
        this.dataQueryList = [];
        const res = await raiInterface.activityMeetMatchingList({ KeyWord: query, ActivityId: this.matchingId, });
        if (res.Ret === 200) {
          let obj = {};
          res.Data.List &&
            res.Data.List.forEach((item) => {
              obj = {
                ...item,
                value: item.RoadshowTitle + `【` + item.ActivityTime + "】",
              };
              this.dataQueryList.push(obj);
            });
        }
      } else {
        this.dataQueryList = [];
      }
    },
    async confirm() {
      if(!this.matchingValue) return this.$message.error("请输入活动名称关键字")
      const res = await raiInterface.activityMeetMatchingByHand({
        ActivityId: this.matchingId,
        KeyWord: this.matchingValue,
      });
      if(res.Ret === 200){
        this.dataQueryList = [];
        this.matchingValue=''
        this.$message.success('操作成功!')
        this.$emit('update:matchingDlgShow',false)
        this.$parent.getsDataList()
      }
    },
  },
};
</script>
<style scoped lang="scss">
.content-macthing {
  margin: 30px;
}
</style>