adweb3-web/src/views/adweb/enquiryPublicRules/publicBlackip/modules/XpRecycleBinModal.vue

<template>
  <a-modal
    :width="1200"
    :title="title"
    v-model:open="visible"
    :destroyOnClose="true"
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
  >
    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 15px">
      <a-form-item>
        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchQuery">查询</a-button>
        <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>

    <a-table ref="table" size="middle" :columns="columns" :loading="loading" :dataSource="dataSource">
      <!-- 显示头像 -->
      <template #avatarslot="text, record, index">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user" />
        </div>
      </template>
      <template #contactSlot="text, record">
        <div>
          <a-popover>
            <template #content>
              {{ text }}
            </template>
            <div style="width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
          </a-popover>
        </div>
      </template>
      <template #action="text, record">
        <span>
          <a @click="enquiryDetail(record)"> 详情</a>
        </span>
      </template>
    </a-table>
    <!--询盘详情-->
    <enquiry-detail ref="enquiryDetail" />
  </a-modal>
</template>

<script lang="js">
  import { getAction } from '/@/api/manage/manage';
  import { JeecgListMixin } from '/@/hooks/component/JeecgListMixin';
  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  export default {
    name: 'XpRecycleBinModal',
    components: { enquiryDetail },
    mixins: [JeecgListMixin],
    data() {
      return {
        title: '',
        loading: false,
        innerVisible: false,
        dataSource: [],
        visible: false,
        columns: [],
        url: {
          list: '/adweb/adwebEnquiry/getWastedEnquiry',
        },
        disableMixinCreated: true,
        ip: '',
      };
    },

    methods: {
      init(ip) {
        let that = this;
        that.columns = [
          { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' } },
          { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' } },
          { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
          { title: '电话', align: 'left', dataIndex: 'phone' },
          { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
          { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
        ];
        that.ip = ip;
        that.loadData(ip);
        console.log(ip);
        that.visible = true;
      },

      //询盘详情
      enquiryDetail(record) {
        this.$nextTick(() => {
          this.$refs.enquiryDetail.init(record);
        });
      },
      searchQuery() {
        this.loadData(this.ip);
      },

      searchReset() {
        this.queryParam = {};
        this.loadData(this.ip);
      },

      handleCancel() {
        this.queryParam = {};
        this.visible = false;
      },

      loadData(ip) {
        if (!this.url.list) {
          createMessage.error('请设置url.list属性!');
          return;
        }
        var params = this.getQueryParams(); //查询条件
        this.loading = true;
        params.ip = ip;
        params.wasteEnquiryType = 'ip';
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result;
          }
          if (res.code === 510) {
            createMessage.warning(res.message);
          }
          this.loading = false;
        });
      },
    },
  };
</script>

<style lang="less" scoped></style>