adweb3-web/src/views/adweb/enquiry/AdwebEnquiryList.vue

<template>
  <div class="p-2 adweb-enquiry-list">
    <div class="search-form">
      <a-row class="r1 search-form-container" :gutter="8">
        <a-col :xl="7" :xxl="6">
          <div class="choose-site">
            <span class="t1">站点：</span>
            <select-site ref="selectSiteRef" @set-site-info="getSiteList" select-width="100%" />
          </div>
        </a-col>
        <a-col :xl="8" :xxl="6">
          <div class="choose-site">
            <span class="t1">询盘时间：</span>
            <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
          </div>
        </a-col>
        <a-col :xl="9" :xxl="12">
          <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间 </a-button>
          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天 </a-button>
          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周 </a-button>
          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日 </a-button>
          <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')"> 今日 </a-button>
        </a-col>
      </a-row>
    </div>

    <a-row class="r2">
      <a-col :span="6">
        <p class="t1"><img :src="toEffect" />有效询盘</p>
        <p class="t2" @click="getList('product')">{{ enquiryNums.product }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img :src="toReadImg" />待阅读询盘</p>
        <p class="t2" @click="getList('noRead')">{{ enquiryNums.noRead }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img :src="toClassified" />待分类询盘</p>
        <p class="t2" @click="getList('wait')">{{ enquiryNums.wait }}</p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img :src="toTotal" />累计询盘</p>
        <p class="t2" @click="getList('all')">{{ enquiryNums.all }}</p>
      </a-col>
    </a-row>

    <a-row class="r3" type="flex" :gutter="8">
      <a-col flex="2">
        <a-input placeholder="邮箱/姓名/国家" v-model:value="queryParam.searchText" />
      </a-col>
      <a-col flex="2">
        <a-input placeholder="询盘内容" v-model:value="queryParam.searchContent" />
      </a-col>
      <a-col flex="2">
        <a-select :allowClear="true" placeholder="全部分类" style="width: 100%" @change="filterCategory">
          <a-select-option :key="2" :value="2">待分类</a-select-option>
          <a-select-option :key="1" :value="1">有效询盘</a-select-option>
        </a-select>
      </a-col>
      <a-col flex="2">
        <a-select v-model="queryParam.readStatus" :allowClear="true" placeholder="全部阅读状态" style="width: 100%" @change="filterStatus">
          <a-select-option value="0"> 未读 </a-select-option>
          <a-select-option value="1"> 已读 </a-select-option>
        </a-select>
      </a-col>
      <a-col v-if="haveSubAccount" flex="2">
        <a-select placeholder="全部跟进人" v-model="queryParam.principalUid" showSearch allowClear style="width: 100%" :filterOption="filterOption">
          <a-select-option key="ALL" value="ALL">所有人</a-select-option>
          <a-select-option v-for="principal in subAccountOptions" :key="principal.id" :value="principal.id">
            {{ principal.username }}
          </a-select-option>
        </a-select>
      </a-col>

      <a-col flex="500px" style="text-align: right">
        <a-button type="primary" @click="searchQuery">查询</a-button>
        <a-button ghost type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
        <a-button ghost type="primary" @click="handleExportXlsLU()" style="margin-left: 8px" :loading="excelLoading">导出Excel </a-button>
        <a-button ghost type="primary" @click="recycleBinVisible" style="margin-left: 8px">回收站 </a-button>
        <a-button ghost type="primary" @click="showBlackList" style="margin-left: 8px">黑名单 </a-button>
      </a-col>
    </a-row>

    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #alertAfter>
        <a-divider type="vertical" />
        <a @click="enquiryReady">标为已读</a>

        <template v-if="haveSubAccount && !isForwardSite">
          <a-divider type="vertical" />
          <a
            :style="
              userRole.indexOf('admin') > -1 ||
              userRole.indexOf('adweb_admin') > -1 ||
              userRole.indexOf('adweb_seo_manager') > -1 ||
              userRole.indexOf('adweb_site_manager') > -1
                ? 'pointer-events: none;'
                : ''
            "
            @click="showEditPrincipalModal"
          >
            调整跟进人
          </a>
        </template>

        <template v-if="isForwardSite" @click="forwardDetailAll">
          <a-divider type="vertical" />
          <a @click="forwardDetailAll"> 转发 </a>
        </template>

        <a-divider type="vertical" />
        <a @click="batchHandleDelete">删除</a>
      </template>

      <!--插槽:table标题-->
      <template #tableTitle>
        <!-- TODO 高级查询 -->
        <!--        <super-query :config="superQueryConfig" @search="handleSuperQuery" />-->
      </template>
      <!--操作栏-->
      <!--      <template #action="{ record }">-->
      <!--        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />-->
      <!--      </template>-->

      <!-- 操作动作  -->
      <template #action="{ record }">
        <div style="padding: 5px 8px; display: flex; justify-content: space-around">
          <a-tag v-if="isForwardSite" color="blue" @click="forwardDetail(record)" style="cursor: pointer"> 转发 </a-tag>
          <a-tag color="purple" @click="showEnquiryDetail(record)" style="cursor: pointer"> 详情 </a-tag>
          <a-popconfirm
            title="确认拒收后，该用户会归入【黑名单】，后期不再接收该用户的询盘信息~"
            ok-text="是"
            cancel-text="否"
            placement="topRight"
            @confirm="enquiryAddBlackList(record)"
          >
            <a-tag color="orange" style="cursor: pointer"> 拒收 </a-tag>
          </a-popconfirm>
          <a-tag color="green" @click="showEnquiryTrackRecord(record)" style="cursor: pointer"> 跟踪 </a-tag>
          <a-tag
            color="blue"
            v-if="record.visitId !== null && record.visitId !== '' && record.visitId !== undefined"
            style="cursor: pointer"
            @click="enquiryTrack(record)"
          >
            访问记录
          </a-tag>
        </div>
      </template>

      <template #bodyCell="{ column, record, index, text }">
        <!-- 自定义显示字段       -->

        <!-- 询盘状态 -->
        <template v-if="column.key == 'userEffective'">
          <a class="theme-color" v-if="text === 2" @click="showEnquiryDetail(record)">{{ record.userEffectiveStr }}</a>
          <span v-else-if="text == 0" style="color: #fa8c16">{{ record.userEffectiveStr }}</span>
          <span v-else>{{ record.userEffectiveStr }}</span>
        </template>
        <!-- 阅读状态 -->
        <template v-if="column.key == 'readStatus'">
          <a v-if="text == 0" class="theme-color" @click="showEnquiryDetail(record)">未读</a>
          <span v-else>已读</span>
        </template>
        <!-- 询盘详情 -->
        <div v-if="column.key == 'details'">
          <a @click="showEnquiryDetail(record)" style="margin: 0 10px 0 10px"> {{ record.context ? record.context.substr(0, 50) : '--' }}</a>
        </div>
        <!-- 来源页面 -->

        <template v-if="column.key == 'fromPage'">
          <template v-if="!text">-</template>
          <template v-else-if="text.indexOf('http') < 0">-</template>
          <template v-else-if="text.indexOf('http') === 0">
            <template v-if="text.lastIndexOf('/') <= 7">
              <a :href="text" target="_blank" style="text-decoration: underline">Home</a>
            </template>
            <template v-else>
              <a :href="text" target="_blank" style="text-decoration: underline">{{
                text.substring(text.lastIndexOf('/') + 1).slice(0, 45) + (text.substring(text.lastIndexOf('/') + 1).length > 45 ? '...' : '')
              }}</a>
            </template>
          </template>
          <template v-else-if="text.indexOf('http') > 0">
            <a :href="text.substring(text.indexOf('http'))" target="_blank" style="text-decoration: underline">{{
              text.substring(0, text.indexOf('http')).slice(0, 45) + (text.substring(0, text.indexOf('http')).length > 45 ? '...' : '')
            }}</a>
          </template>
          <template v-else>-</template>
        </template>
        <!-- 邮箱 -->
        <div v-if="column.key == 'fromEmail'">
          <a-popover>
            <template #content>
              {{ text }}
            </template>
            <a @click.prevent="copyEmailFunction(text)" :href="'mailto:' + text" v-if="text">{{
              text.slice(0, 30) + (text.length > 30 ? '...' : '')
            }}</a>
            <div v-else>--</div>
          </a-popover>
        </div>
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <AdwebEnquiryModal ref="registerModal" @success="handleSuccess" />

    <!--回收站-->
    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" @ok="getTableAndNum" />

    <!--询盘详情   reload用于子组件删除询盘功能刷新父组件table showDelBtn用于展示删除按钮-->
    <enquiry-detail
      :userEffectiveOption="userEffectiveOption"
      :showDelBtn="true"
      @reload="getTableAndNum()"
      @ok="getTableAndNum"
      ref="enquiryDetailRef"
    />

    <!-- 转发询盘 -->
    <a-modal title="转发" v-model:open="forwardVisible" @ok="editForward" @cancel="cancelEditForward" :confirm-loading="forwardLoading">
      <a-radio-group v-model:value="selectedUserId">
        <a-radio v-for="item in subAccountOptions" style="display: block; height: 30px; lineheight: 30px" :value="item.id">
          {{ item.username }}
        </a-radio>
      </a-radio-group>
    </a-modal>

    <!--黑名单-->
    <black-list ref="blackListRef" @ok="getTableAndNum" />

    <!--跟踪记录-->
    <enquiry-track-record ref="enquiryTrackRecordRef" />
  </div>
</template>

<script lang="ts" name="adweb-adwebEnquiry" setup>
  import toEffect from '/@/assets/enquiry/enquiryListTop1.svg';
  import toReadImg from '/@/assets/enquiry/enquiryListTop3.svg';
  import toClassified from '/@/assets/enquiry/enquiryListTop2.svg';
  import toTotal from '/@/assets/enquiry/enquiryListTop4.svg';

  import selectSite from '/@/components/Adweb/selectSite.vue';
  import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns, superQuerySchema } from './AdwebEnquiry.data';
  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './AdwebEnquiry.api';
  import AdwebEnquiryModal from './components/AdwebEnquiryModal.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getAction, postAction } from '@/api/manage/manage';

  import { useMessage } from '@/hooks/web/useMessage';

  import dayjs, { Dayjs } from 'dayjs';
  const dateFormat = 'YYYY-MM-DD';
  type RangeValue = [Dayjs, Dayjs];
  // 过滤日期范围
  let rangeDate = ref<RangeValue>();

  import { filterOption } from 'ant-design-vue/es/vc-mentions/src/util';
  import enquiryDetail from '@/views/adweb/enquiry/modules/enquiryDetail.vue';
  import XpRecycleBinModal from '@/views/adweb/system/modules/XpRecycleBinModal.vue';
  import blackList from '@/views/adweb/enquiry/modules/blackList.vue';
  import enquiryTrackRecord from '@/views/adweb/enquiry/modules/enquiryTrackRecord.vue';

  const queryParam = reactive<any>({});

  const registerModal = ref();
  const selectSiteRef = ref(null);
  const { createMessage } = useMessage();
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '询盘信息存储表单',
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 180,
        fixed: 'right',
      },
      striped: true,
      bordered: false,
      immediate: false, // 不直接触发，通过reload事件触发接口
      beforeFetch: (params) => {
        //  如果查询条件中没有设置状态，则默认查出所有状态数据
        if (queryParam.userEffective == undefined) {
          queryParam.userEffective = '1,2';
        }

        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: '询盘列表',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });
  const [
    registerTable,
    { reload, clearSelectedRowKeys, updateTableDataRecord, findTableDataRecord, getDataSource },
    { rowSelection, selectedRowKeys },
  ] = tableContext;

  // const labelCol = reactive({
  //   xs: 24,
  //   sm: 4,
  //   xl: 6,
  //   xxl: 4,
  // });
  // const wrapperCol = reactive({
  //   xs: 24,
  //   sm: 20,
  // });
  //
  // let siteCode: string | null = ref('');

  // 站点列表
  let siteList = ref([{ id: '', code: '' }]);

  // 询盘数量
  const enquiryNums = ref({
    all: 0,
    noRead: 0,
    product: 0,
    wait: 0,
  });

  // 子账号列表
  let subAccountOptions = ref([{ id: '', username: '' }]);

  // 是否有子账户
  let haveSubAccount = ref(false);

  // 导出excel进度
  let excelLoading = ref<boolean>(false);

  // 编辑转发进度
  let forwardLoading = ref<boolean>(false);

  // 选中跟进人
  let selectedUserId = ref<any>(undefined);

  let userEffectiveOption = ref<[]>([]);

  // 当前用户角色
  const userRole = ref('');

  // 已经选择的站点code
  const siteCode = ref<any>('');

  const isForwardSite = ref<boolean>(false);

  //转发的询盘id
  const forwardEnquiryDetail = ref<any>(undefined);

  //转发是否可见
  const forwardVisible = ref(false);

  // 询盘详情子组件
  const enquiryDetailRef = ref(null);

  // 回收站子组件
  const XpRecycleBinModalRef = ref(null);

  // 黑名单子组件
  const blackListRef = ref(null);

  // 跟踪记录
  const enquiryTrackRecordRef = ref(null);

  onBeforeMount(() => {
    siteCode.value = localStorage.getItem('siteCode');
    getTurnInquiryCode();
  });

  onMounted(async () => {
    userRole.value = useUserStore().roleList;
    getEffectiveList();
  });

  function getSiteList(selectedSiteInfo: any) {
    queryParam.siteId = selectedSiteInfo.id;

    getTableAndNum(true);
  }

  function filterCategory(value: string) {
    queryParam.userEffective = value;
  }

  function filterStatus(value: number) {
    queryParam.readStatus = value;
  }

  //重新刷新页面数据及获取询盘数量
  function getTableAndNum(clearParam: boolean = false) {
    getEnquiryNums();
    getSubAccountOptions();
    if (clearParam) {
      if (queryParam.readStatus) {
        delete queryParam.readStatus;
      }
      if (queryParam.searchText) {
        delete queryParam.searchText;
      }
      if (queryParam.searchContent) {
        delete queryParam.searchContent;
      }
      if (queryParam.userEffective) {
        delete queryParam.userEffective;
      }
      if (queryParam.principalUid) {
        delete queryParam.principalUid;
      }
    }

    loadData();
  }

  //搜索条件部分的逻辑
  function onChangeDatePciker(date, dateString) {
    if (dateString.length > 0) {
      rangeDate.value = date;
      queryParam.start = dateString[0];
      queryParam.end = dateString[1];
      queryParam.dateType = undefined;

      getTableAndNum();
    }
  }

  //日期选择只能今天之前
  function disabledDate(current) {
    return current && current > dayjs().endOf('day');
  }

  //设置列表的时间查询条件
  function setTime(time) {
    queryParam.dateType = time;
    queryParam.start = '';
    queryParam.end = '';
    // sevenDay   thirtyDay  today  yesterday
    if (time == '') {
      rangeDate.value = undefined;
    } else if (time == 'sevenDay') {
      rangeDate.value = [dayjs().subtract(6, 'days'), dayjs()];
    } else if (time == 'thirtyDay') {
      rangeDate.value = [dayjs().subtract(29, 'days'), dayjs()];
    } else if (time == 'today') {
      rangeDate.value = [dayjs(), dayjs()];
    } else if (time == 'yesterday') {
      rangeDate.value = [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')];
    }

    if (rangeDate.value != undefined) {
      queryParam.start = rangeDate.value[0].format(dateFormat);
      queryParam.end = rangeDate.value[1].format(dateFormat);
    }

    getTableAndNum();
  }

  //获取不同状态询盘的数量
  function getEnquiryNums() {
    let siteId = '';

    if (queryParam.siteId && queryParam.siteId != '') {
      siteId = queryParam.siteId;
    } else {
      siteId = '';
    }
    let d = {
      siteId: siteId,
      dateType: queryParam.dateType,
      start: queryParam.start,
      end: queryParam.end,
    };
    getAction('/adweb/adwebEnquiry/getEnquiryNums', d).then((res) => {
      if (res.code == 200) {
        enquiryNums.value.all = res.result.all;
        enquiryNums.value.noRead = res.result.noRead;
        enquiryNums.value.product = res.result.product;
        enquiryNums.value.wait = res.result.wait;
      } else {
        enquiryNums.value.all = 0;
        enquiryNums.value.noRead = 0;
        enquiryNums.value.product = 0;
        enquiryNums.value.wait = 0;
      }
    });
  }

  // 获取子账户的下拉框选项
  function getSubAccountOptions() {
    getAction('/usercountry/subAccounts/options?siteId=' + queryParam.siteId, null).then((res) => {
      if (res.code === 200) {
        subAccountOptions.value = res.result;
        haveSubAccount.value = res.result !== null && res.result !== undefined && res.result.length > 0;
      }
    });
  }

  function getList(type: String) {
    //清空查询条件
    queryParam.principalUid = undefined;
    queryParam.searchText = undefined;
    queryParam.searchContent = undefined;
    if (type == 'noRead') {
      queryParam.readStatus = '0';
      queryParam.userEffective = undefined;
    }
    if (type == 'product') {
      queryParam.userEffective = 1;
      console.log('1', queryParam);

      queryParam.readStatus = undefined;
      console.log('2', queryParam);
    }
    if (type == 'wait') {
      queryParam.userEffective = 2;
      queryParam.readStatus = undefined;
    }
    if (type == 'all') {
      queryParam.userEffective = undefined;
      queryParam.readStatus = undefined;
    }
    loadData(1);
  }

  //批量设为已读
  function enquiryReady() {
    console.log(selectedRowKeys.value.length, 'selectedRowKeysselectedRowKeysselectedRowKeys');
    if (selectedRowKeys.value.length <= 0) {
      createMessage.warning('请选择至少一条记录！');
      return;
    }
    getAction('/adweb/adwebEnquiry/read', { id: selectedRowKeys.value.toString() }).then((res) => {
      if (res.success) {
        createMessage.success('批量设置已读成功！');
        getTableAndNum();
        clearSelectedRowKeys();
      } else {
        if (res.code == 403) {
          createMessage.warning(res.message);
        } else {
          createMessage.error('设置失败！');
        }
      }
    });
  }

  // 加载table列表数据
  function loadData(page: number = 1) {
    nextTick().then(() => {
      reload({ page: page });
    });
  }

  // 导出excel
  function handleExportXlsLU() {
    excelLoading.value = true;

    delete queryParam.userEffective;

    onExportXls().then(() => {
      excelLoading.value = false;
    });
  }
  //询盘详情
  async function showEnquiryDetail(record) {
    if (record.readStatus == 0) {
      getAction('/adweb/adwebEnquiry/read?id=' + record.id, null).then(() => {
        getTableAndNum();
      });
    }

    await nextTick();

    if (enquiryDetailRef.value && enquiryDetailRef.value.init) {
      enquiryDetailRef.value.init(record);
    }
  }

  //获取询盘分类列表
  function getEffectiveList() {
    getAction('/adweb/adwebEnquiry/getEnquiryCatalog', null)
      .then(function (res) {
        if (res.code == 200) {
          userEffectiveOption.value = JSON.parse(res.result);
        } else {
          createMessage.error('获取询盘分类失败！');
        }
      })
      .catch(function (err) {
        console.log(err);
      });
  }

  //复制email到剪切板
  function copyEmailFunction(text) {
    //复制email到剪切板
    if (!navigator.clipboard) {
      console.log('浏览器不支持navigator');
      let copy = (e) => {
        e.preventDefault();
        e.clipboardData.setData('text/plain', text);
        createMessage.success('复制成功');
        document.removeEventListener('copy', copy);
      };
      document.addEventListener('copy', copy);
      document.execCommand('Copy');
      return;
    }
    navigator.clipboard.writeText(text).then(
      function () {
        createMessage.success('复制成功');
      },
      function (err) {
        createMessage.error('复制失败', err);
      }
    );
  }

  //获取需要轮流询盘的站点code,判断哪个站点的询盘需要开启转发功能
  function getTurnInquiryCode() {
    // 站点code
    let dictSiteCode = [{ label: '', value: '' }];

    getAction('/adweb/adwebEnquiry/getTurnInquiryCode', null).then((res) => {
      if (res.code === 200) {
        Object.assign(dictSiteCode, res.result);

        for (let it in dictSiteCode) {
          if (dictSiteCode[it].value === siteCode.value) {
            isForwardSite.value = true;
          }
        }
      }
    });
  }

  //转发询盘
  function forwardDetail(record) {
    forwardEnquiryDetail.value = record.id;
    forwardVisible.value = true;
  }

  //拒收
  function enquiryAddBlackList(record) {
    delete record.wasteEnquiry;
    postAction('/enquiry/blacklist/addBlacklist', record, null).then((res) => {
      if (res.success) {
        createMessage.success(`拒收成功！`);
        this.getTableAndNum();
      } else {
        if (res.code == 403 || res.code == 500) {
          createMessage.warning(res.message);
        } else {
          createMessage.error('拒收失败！');
        }
      }
    });
  }

  // 编辑转发
  function editForward() {
    if (forwardEnquiryDetail.value === undefined) {
      createMessage.warning('请选择询盘信息！');
      return;
    }
    if (!selectedUserId.value) {
      createMessage.warning('请选择跟进人！');
      return;
    }

    forwardLoading.value = true;
    let param = {
      ids: forwardEnquiryDetail.value,
      uid: selectedUserId.value,
      code: siteCode.value,
    };
    getAction('/adweb/adwebEnquiry/setForward', param)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          loadData();
          cancelEditForward();
          getEnquiryNums();
          clearSelectedRowKeys();
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        forwardLoading.value = false;
      });
  }

  // 取消转发的编辑
  function cancelEditForward() {
    selectedUserId.value = undefined;
    forwardEnquiryDetail.value = undefined;
    forwardVisible.value = false;
  }

  //回收箱
  async function recycleBinVisible() {
    await nextTick();

    if (XpRecycleBinModalRef.value && XpRecycleBinModalRef.value.init) {
      XpRecycleBinModalRef.value.init(queryParam.siteId, '1,2');
    }
  }

  //黑名单
  async function showBlackList() {
    await nextTick();

    if (blackListRef.value && blackListRef.value.init) {
      blackListRef.value.init(queryParam.siteId);
    }
  }

  //跟踪记录
  async function showEnquiryTrackRecord(record) {
    await nextTick();

    if (enquiryTrackRecordRef.value && enquiryTrackRecordRef.value.init) {
      enquiryTrackRecordRef.value.init(record);
    }
  }

  // 高级查询配置
  const superQueryConfig = reactive(superQuerySchema);

  /**
   * 高级查询事件
   */
  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      queryParam[k] = params[k];
    });
    searchQuery();
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add();
  }

  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await batchDelete({ id: selectedRowKeys.value.join(',') }, handleSuccess);
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
      },
    ];
  }

  /**
   * 查询
   */
  function searchQuery() {
    reload();
  }

  /**
   * 重置
   */
  function searchReset() {
    selectedRowKeys.value = [];
    //刷新数据
    getTableAndNum(true);
  }
</script>

<style lang="less" scoped>
  .ant-form-item {
    flex: 1;
  }
  .jeecg-basic-table-form-container {
    padding: 0;

    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }

    .query-group-cust {
      min-width: 100px !important;
    }

    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }

    .ant-form-item:not(.ant-form-item-with-help) {
      margin-bottom: 16px;
      height: 32px;
    }

    :deep(.ant-picker),
    :deep(.ant-input-number) {
      width: 100%;
    }
  }

  .theme-color {
    color: @primary-color;
  }

  .r1 {
    .choose-site {
      display: flex;
    }

    .t1 {
      font-size: 18px;
    }

    .ant-calendar-picker {
      margin-right: 20px;
    }
  }

  .r2 {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;

    .ant-col:not(:last-child) {
      border-right: 1px solid #e6e6e6;
    }

    p {
      margin: 0;
      text-align: center;

      &.t1 {
        color: #333;
        margin-bottom: 15px;

        img {
          margin-right: 10px;
          width: 15px;
          margin-top: -5px;
        }
      }

      &.t2 {
        color: @primary-color;
        font-size: 30px;
        font-weight: 500;
        line-height: 1;
        text-decoration: underline;
        cursor: pointer;
        padding-left: 25px;
      }
    }
  }

  .r3 {
    margin-top: 20px;
  }
</style>