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="domainSelected">
            <el-select placeholder="请选择应用类型" v-model="state.queryForm.domainSelected">
              <el-option v-for="item in domainTypeOptions" :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.remark" />
          </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" :disabled="activeName === 'tab2'">{{ 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="table-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" v-if="activeName == 'tab1'" />
        <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: 80px; height: 80px; border-radius: 10px;" :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="domainType" width="110" show-overflow-tooltip>
          <template #default="{ row }">
            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.domainType" placeholder="" style="width: 80px">
              <el-option v-for="item in domainTypeOptions" :key="item.value" :label="item.description" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="营销投放" prop="launch" width="120">
          <template #default="{ row }">
            <el-switch :disabled="activeName === 'tab2'" v-model="row.launch" inline-prompt :active-value="true"
              :inactive-value="false" @change="handleChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="域名限制" prop="domainLimit" width="120">
          <template #default="{ row }">
            <el-switch :disabled="activeName === 'tab2'" v-model="row.domainLimit" inline-prompt :active-value="true"
              :inactive-value="false" @change="handleChange(row)" />
          </template>
        </el-table-column>
        <el-table-column :label="'域名集合'" prop="domains" width="280" show-overflow-tooltip>
          <template #default="{ row }">
            <DomainCell :domainList="row.domains" :rowData="row" @refresh="getDataList()" />
          </template>
        </el-table-column>
        <el-table-column :label="'IP集合'" prop="ips" width="320">
          <template #default="{ row }">
            <IpCell :ipList="row.ips" :rowData="row" @refresh="getDataList()" />
          </template>
        </el-table-column>
        <el-table-column :label="'触发频率'" prop="triggerNum" 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="140" prop="triggerRule" show-overflow-tooltip>
          <template #default="{ row }">
            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.triggerRule" placeholder="" style="width: 100px">
              <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 :label="'备注'" prop="remark" width="150" show-overflow-tooltip>
          <template #default="{ row }">
             {{ row.remark }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="t('common.action')" width="200">
          <template #default="scope">
            <div class="action" style="text-align: left;">
              <el-button :disabled="activeName == 'tab2'" style="margin-right: 0px;" @click="onOpenEditMenu('edit', scope.row)" text type="primary"
                v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <mask id="mask0_362_1714" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                  <rect width="16" height="16" fill="#D9D9D9"/>
                  </mask>
                  <g mask="url(#mask0_362_1714)">
                  <path d="M4.60017 12.2954L5.97782 12.2954C6.50827 12.2955 7.017 12.0847 7.39208 11.7097L13.7925 5.30925C14.4017 4.70003 14.4017 3.71229 13.7925 3.10308V3.10308C13.1833 2.49386 12.1955 2.49387 11.5863 3.10308L5.18591 9.5035C4.81082 9.87859 4.60011 10.3873 4.60012 10.9178L4.60017 12.2954Z" stroke="#167AF0" stroke-linejoin="round"/>
                  <path d="M10.4832 4.20593L12.6893 6.41211" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M8.5 2H4C2.89543 2 2 2.89543 2 4V13C2 14.1046 2.89543 15 4 15H13C14.1046 15 15 14.1046 15 13V8.5" stroke="#167AF0" stroke-linecap="round"/>
                  </g>
                </svg>
                修改</el-button>
              <el-button style="margin-right: 0px;" @click="onOpenStatistical(scope.row)" text type="primary"
                v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M2 6V3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V6" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M10.6667 8V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M8 5V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M5.33325 6.33334V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 10V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V10" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                统计</el-button>
              <el-button v-if="activeName == 'tab1'" style="margin-right: 0px;" @click="handleDelete(scope.row)" text type="danger"
                v-auth="'sys_menu_edit'">
                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <g clip-path="url(#clip0_35_722)">
                  <path d="M3 3.33334V12.6667C3 13.7712 3.89543 14.6667 5 14.6667H11C12.1046 14.6667 13 13.7712 13 12.6667V3.33334H3Z" stroke="#E64242" stroke-linejoin="round"/>
                  <path d="M6.66675 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M9.33325 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M1.33325 3.33334H14.6666" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M5.33325 3.33334L6.42959 1.33334H9.59229L10.6666 3.33334H5.33325Z" stroke="#E64242" stroke-linejoin="round"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_35_722">
                  <rect width="16" height="16" fill="white"/>
                  </clipPath>
                  </defs>
                </svg>
                拉黑</el-button>
              <el-button v-if="activeName == 'tab2'" style="margin-right: 0px;" icon="refresh" @click="handleDelete(scope.row)" text type="success"
                v-auth="'sys_menu_edit'">还原</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
    <EditDialog @refresh="getDataList()" ref="EditDialogRef" />
    <StatisticalDialog @refresh="getDataList()" ref="statisticalDialogRef" />
  </div>
</template>

<script lang="ts" name="marketingApps" setup>
import { pageList, pageDel, delAppById, setAppInfo } 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 EditDialog = defineAsyncComponent(() => import('./components/form.vue'));
const StatisticalDialog = defineAsyncComponent(() => import('./components/statistical.vue'));
const IpCell = defineAsyncComponent(() => import('./components/ipCell.vue'));
const DomainCell = defineAsyncComponent(() => import('./components/domainCell.vue'));

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

const activeName = ref('tab1')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.paneName as string;
  query();
}

const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const EditDialogRef = 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,
  createdIsNeed: false,
  queryForm: {
    appId: '',
    appName: '',
    domainSelected: '0',
    domainType: '',
    remark: '',
  }
});

const domainTypeOptions = ref([]) as any;
const getDomianTypeList = async () => {
  const { data } = await fetchItemList({
    dictType: 'DomianType'
  });
  domainTypeOptions.value = data?.records || [];
  domainTypeOptions.value.map((item)=>{
    item.value = Number(item.value);
  })
  domainTypeOptions.value.unshift({
    description: '全部',
    value: '0'
  })
}
getDomianTypeList();

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

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

// 搜索事件
const query = () => {
  activeName.value == 'tab1' ? state.pageList = pageList : state.pageList = pageDel;
  state.dataList = [];
  state.queryForm.domainType = state.queryForm.domainSelected == 0 ? '' : state.queryForm.domainSelected;
  getDataList();
};

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

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

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

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

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

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

// 拉黑操作
const handleDelete = async (row: any) => {
	try {
      await useMessageBox().confirm('是否确认拉黑该应用');
      await delAppById({
        id: row.id,
        status: activeName.value == 'tab2'
      });
      ElMessage.success(activeName.value == 'tab2' ? '还原成功！' : '拉黑成功！');    
	} catch {
		return;
	}
  query();
};

onMounted(()=>{
  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;
}

.table-tabs {
  margin-bottom: 10px;
}
</style>