data-marketing-platform/src/views/marketing/apps/index.vue

<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" v-show="showSearch" class="ml10">
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
          <el-form-item :label="$t('marketingApps.name')" prop="domain">
            <el-input :placeholder="$t('marketingApps.inputNameTip')" clearable
              v-model="state.queryForm.domain" />
          </el-form-item>
          <el-form-item :label="'应用ID'" prop="appId">
            <el-input :placeholder="'请输入应用ID'" clearable v-model="state.queryForm.appId" />
          </el-form-item>
          <el-form-item :label="'应用类型'" prop="appType">
            <el-select placeholder="请选择应用类型" v-model="state.queryForm.appType">
              <el-option :key="''" :label="'全部'" :value="''" />
              <el-option v-for="item in appTypes" :key="item.value" :label="item.description" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="'备注'" prop="remark">
            <el-input :placeholder="'请输入备注'" clearable v-model="state.queryForm.domain" />
          </el-form-item>
          <el-form-item>
            <el-button @click="query" class="ml10" icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
            <el-button @click="handleEdit" icon="EditPen">{{ $t('common.editBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right; margin-right: 20px"
            @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row> -->

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="使用中" name="tab1"></el-tab-pane>
          <el-tab-pane label="回收站" name="tab2"></el-tab-pane>
      </el-tabs>

      <el-table @selection-change="handleSelectionChange" ref="tableRef" :data="state.dataList" row-key="path"
        style="width: 100%" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle?.headerCellStyle">
        <el-table-column type="selection" fixed="left" width="55" />
        <el-table-column fixed="left" :label="$t('marketingApps.id')" prop="id" width="80" show-overflow-tooltip>
          <template #default="{ row }">{{ row.id }}</template>
        </el-table-column>
        <el-table-column :label="$t('marketingApps.appId')" prop="appId" width="120" show-overflow-tooltip>
          <template #default="{ row }">{{ row.appId }}</template>
        </el-table-column>
        <el-table-column :label="$t('marketingApps.appImg')" prop="appImg" width="150" show-overflow-tooltip>
          <template #default="{ row }" style="display: flex; align-self: center;">
            <el-image style="width: 100px; height: 100px" :src="row.appImg" :fit="fit" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('marketingApps.name')" prop="appName" width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <el-link :href="row.url">{{ row.appName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('marketingApps.appType')" prop="appType" width="110" show-overflow-tooltip>
          <template #default="{ row }">
            <el-select v-model="row.appType" placeholder="" style="width: 80px">
              <el-option v-for="item in appTypes" :key="item.value" :label="item.description" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="营销投放" prop="isMarketing" width="120">
          <template #default="{ row }">
            <el-switch v-model="row.isMarketing" inline-prompt :active-value="1"
              :inactive-value="0" @change="handleChange(row)" />
              <!--  active-text="开启" inactive-text="关闭" -->
          </template>
        </el-table-column>
        <el-table-column label="域名限制" prop="isHttp" width="120">
          <template #default="{ row }">
            <el-switch v-model="row.isHttp" inline-prompt :active-value="1"
              :inactive-value="0" @change="handleChange(row)" />
              <!--  active-text="开启" inactive-text="关闭" -->
          </template>
        </el-table-column>
        <el-table-column prop="domains" width="240" show-overflow-tooltip>
          <template #header>
            <span style="display: inline-block; align-items: center;">
              域名集合
              <el-tooltip effect="light" content="鼠标悬浮查看域名分组详情" placement="top">
                <el-icon><Warning /></el-icon>
              </el-tooltip>
            </span>
          </template>
          <template #default="{ row }">
            <div style="
                  padding: 0 20px;
                  text-wrap: auto;
                  text-align: left;
                ">
              <el-tooltip effect="light">
                <template #content>
                  <div v-for="(item, index) in row.domains" :key="index">{{ item.domain }};</div>
                </template>
                <el-text line-clamp="6">
                  <template v-for="(item, index) in row.domains" :key="index">
                    <div>{{ item.domain }};</div>
                  </template>
                </el-text>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ips" width="300">
          <template #header>
            <span style="display: inline-block; align-items: center;">
              IP集合
              <el-tooltip effect="light" content="鼠标悬浮查看ip分组详情" placement="top">
                <el-icon><Warning /></el-icon>
              </el-tooltip>
            </span>
          </template>
          <template #default="{ row }">
            <div style="
                  padding: 0 20px;
                  text-wrap: auto;
                  text-align: left;
                ">
              <div style="text-align: left;">白名单:</div>
              <el-tooltip effect="light">
                <template #content>
                  <div v-for="(item, index) in row.ips" :key="index">
                    {{ item.ipType == 1 ? item.startIp + ';' : '' }}
                  </div>
                </template>
                <el-text line-clamp="4">
                  <template v-for="(item, index) in row.ips" :key="index">
                    <div>{{ item.ipType == 1 ? item.startIp + ';' : '' }}</div>
                  </template>
                </el-text>
              </el-tooltip>
              <div style="text-align: left;">黑名单:</div>
              <el-tooltip effect="light">
                <template #content>
                  <div v-for="(item, index) in row.ips" :key="index">
                    {{ item.ipType == 2 ? item.startIp + ';' : '' }}
                  </div>
                </template>
                <el-text line-clamp="4">
                  <template v-for="(item, index) in row.ips" :key="index">
                    <div>{{ item.ipType == 2 ? item.startIp + ';' : '' }}</div>
                  </template>
                </el-text>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="'触发频率'" prop="triggerRule" width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <!-- <el-input-number v-model="row.triggerNum" :max=20 /> -->
             {{ row.triggerNum }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('marketingApps.triggerRule')" width="200" prop="triggerRule" show-overflow-tooltip>
          <template #default="{ row }">
            <el-select v-model="row.triggerRule" placeholder="" style="width: 160px">
              <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.action')" width="80">
          <template #default="scope">
            <div class="action" style="text-align: left;">
              <el-button style="margin-left: 0;" icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary"
                v-auth="'sys_menu_edit'">修改
              </el-button>
              <el-button style="margin-left: 0;" icon="TrendCharts" @click="onOpenStatistical(scope.row)" text type="primary"
                v-auth="'sys_menu_edit'">统计
              </el-button>
              <el-button
                :type="activeName == 'tab1' ? 'danger' : 'success'"
                style="margin-left: 0;"
                :icon="activeName == 'tab1' ? 'delete' : 'refresh'"
                @click="handleDelete(scope.row)" text
                v-auth="'sys_menu_edit'">
                  {{ activeName == 'tab1' ? '拉黑' : '还原' }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
    <MenuDialog @refresh="getDataList()" ref="menuDialogRef" />
    <StatisticalDialog @refresh="getDataList()" ref="statisticalDialogRef" />
  </div>
</template>

<script lang="ts" name="marketingApps" setup>
import { pageList } from '/@/api/marketing/apps';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { fetchItemList } from '/@/api/admin/dict';
import { ref } from 'vue'
const MenuDialog = defineAsyncComponent(() => import('./components/form.vue'));
const StatisticalDialog = defineAsyncComponent(() => import('./components/statistical.vue'));

import { ElMessage, ElNotification, messageConfig, type TabsPaneContext } from 'element-plus'

const activeName = ref('tab1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
  query();
}

const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const menuDialogRef = ref();
const statisticalDialogRef = ref();
const queryRef = ref();
const showSearch = ref(true);
// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);
const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: pageList, // H
  queryForm: {
    domain: '',
    appType: '',
    appId: '',
    remark: '',
  }
});

const appTypes = ref([]) as any;
const getAppTypes = async () => {
  const { data } = await fetchItemList({
    dictType: 'DomianType'
  });
  appTypes.value = data?.records || [];
}
getAppTypes();

const triggerRules = [
  {
    label: '仅一次',
    value: 1,
  },
  {
    label: '多次',
    value: 2,
  },
]

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 搜索事件
const query = () => {
  state.dataList = [];
  getDataList();
};

// 修改单条配置信息
const handleChange = (row: any) => {
  // update(row).then(() => {
  //   useMessage().success(t('common.updateSuccessText'));
  //   getDataList();
  // }).catch((err: any) => {
  //   useMessage().error(err.msg);
  // });
};

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  state.dataList = [];
  getDataList();
};

// 批量修改配置
const handleEdit = () => {
  if (selectObjs.value.length === 0) {
    useMessage().warning('请选择要修改的项');
    return;
  }
  menuDialogRef.value.openDialog('', {});
  // menuDialogRef.value.openDialog('edit', selectObjs.value);
};

// 多选
const handleSelectionChange = (selection: any) => {
  selectObjs.value = selection;
};

// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: any) => {
  menuDialogRef.value.openDialog(type, row);
};

// 打开统计弹窗
const onOpenStatistical = (row: any) => {
  statisticalDialogRef.value.openDialog(row);
};

// 删除操作
const handleDelete = async (row: any) => {
	try {
    if(activeName.value == 'tab1'){
      await useMessageBox().confirm('是否确认拉黑该应用');
    }else{
      ElMessage.success('还原成功！');
    }
	} catch {
		return;
	}

	// try {
	// 	await delObj(ids);
	// 	getDataList();
	// 	useMessage().success(t('common.delSuccessText'));
	// } catch (err: any) {
	// 	useMessage().error(err.msg);
	// }
  query();
};

</script>
<style scoped lang="scss">
:deep(.el-link__inner) {
  display: inline-block;
  width: 100%;
  justify-content: start;
}

:deep(.el-link.is-underline:hover:after) {
  display: none;
}
</style>