debug
This commit is contained in:
make
@@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="ListApi">
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader="scope">
|
||||
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增广告</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
>
|
||||
批量删除广告
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="EditPen"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchModify(scope.selectedList)"
|
||||
>
|
||||
批量编辑广告
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="EditPen" plain @click="batchReplaceModify()"> 批量替换广告内容 </el-button>
|
||||
<el-button type="primary" :icon="EditPen" plain @click="batchCloneModify()"> 克隆站点广告 </el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
<ModifyDrawer ref="modifyDrawerRef" />
|
||||
<ReplaceDrawer ref="replaceDrawerRef" />
|
||||
<CloneDrawer ref="cloneDrawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup name="adList">
|
||||
import { adList } from "@/api/interface/ad/list";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
|
||||
import { reactive, ref } from "vue";
|
||||
import { DelApi, ListApi, SaveApi, batchData, batchReplaceData, batchCloneData } from "@/api/modules/ad/list";
|
||||
import Drawer from "./components/Drawer.vue";
|
||||
import ModifyDrawer from "./modifyDrawer.vue";
|
||||
import ReplaceDrawer from "./replaceDrawer.vue";
|
||||
import CloneDrawer from "./cloneDrawer.vue";
|
||||
import { CirclePlus, EditPen, Delete } from "@element-plus/icons-vue";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import { arrPermissionStatus } from "@/utils/serviceDict";
|
||||
import { adTemAllListApi } from "@/api/modules/ad/template";
|
||||
import { adGroupAllListApi } from "@/api/modules/ad/group";
|
||||
import { getAllList } from "@/api/modules/site/list";
|
||||
import { ElMessage } from "element-plus";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<adList.List>[]>([
|
||||
{ type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "查询关键字",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "a_id",
|
||||
label: "ID",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: "a_title",
|
||||
label: "广告标题"
|
||||
},
|
||||
{
|
||||
prop: "value",
|
||||
label: "广告图",
|
||||
width: 120,
|
||||
render(scope) {
|
||||
if (scope.row.a_content) {
|
||||
if (scope.row.a_content.cover?.value?.length > 0) {
|
||||
const data = scope.row.a_content.cover.value;
|
||||
const modifiedArray = [] as any;
|
||||
modifiedArray.push(data);
|
||||
return (
|
||||
<el-image
|
||||
style="width: 98%; height: 30px;display: flex;align-items: center;"
|
||||
src={modifiedArray[0]}
|
||||
preview-src-list={modifiedArray}
|
||||
hide-on-click-modal={true}
|
||||
z-index={999999999}
|
||||
preview-teleported={true}
|
||||
fit="fill"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return "--";
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "a_status",
|
||||
label: "是否显示",
|
||||
search: { el: "select", props: { filterable: true } },
|
||||
enum: arrPermissionStatus,
|
||||
render(scope) {
|
||||
return (
|
||||
<el-tag type={scope.row.a_status === 0 ? "danger" : "success"}>
|
||||
{scope.row.a_status === 0 ? "隐藏" : "显示"}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "ag_name",
|
||||
label: "广告分组"
|
||||
},
|
||||
{
|
||||
prop: "ag_id",
|
||||
isShow: false,
|
||||
label: "广告分组",
|
||||
search: { el: "select", props: { filterable: true } },
|
||||
fieldNames: { label: "ag_name", value: "ag_id" },
|
||||
enum: adGroupAllListApi
|
||||
},
|
||||
|
||||
{
|
||||
prop: "value",
|
||||
label: "广告类型",
|
||||
render(scope) {
|
||||
return (
|
||||
<el-tag type={scope.row.a_content.link_type.value === 0 ? "info" : "success"}>
|
||||
{scope.row.a_content.link_type.value === 0 ? "站内" : "站外"}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "at_name",
|
||||
label: "广告模板"
|
||||
},
|
||||
{
|
||||
prop: "at_id",
|
||||
label: "广告模板",
|
||||
isShow: false,
|
||||
search: { el: "select", props: { filterable: true } },
|
||||
fieldNames: { label: "at_name", value: "at_id" },
|
||||
enum: adTemAllListApi
|
||||
},
|
||||
{
|
||||
prop: "si_name",
|
||||
label: "广告站点"
|
||||
},
|
||||
|
||||
{
|
||||
prop: "si_id",
|
||||
label: "广告站点",
|
||||
isShow: false,
|
||||
search: { el: "select", props: { filterable: true } },
|
||||
fieldNames: { label: "si_name", value: "si_id" },
|
||||
enum: getAllList
|
||||
},
|
||||
{
|
||||
prop: "a_description",
|
||||
label: "广告描述",
|
||||
render(scope) {
|
||||
if (scope.row.a_description.length > 0) {
|
||||
return <p>{scope.row.a_description} </p>;
|
||||
}
|
||||
return "--";
|
||||
}
|
||||
},
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 230 }
|
||||
]);
|
||||
|
||||
// 打开 drawer(新增、查看、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
const openDrawer = (title: string, row: Partial<adList.List> = {}) => {
|
||||
const params = {
|
||||
title,
|
||||
api: SaveApi,
|
||||
getTableList: proTable.value?.getTableList,
|
||||
isView: title === "查看",
|
||||
row: { ...row }
|
||||
};
|
||||
drawerRef.value?.acceptParams(params);
|
||||
};
|
||||
|
||||
// 删除广告
|
||||
const deleteAccount = async (params: adList.List) => {
|
||||
await useHandleData(DelApi, { a_id: params.a_id }, `删除【${params.a_title}】的广告`);
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 批量删除广告
|
||||
const batchDelete = async (id: any[]) => {
|
||||
const ids = id.map((item: adList.List) => item.a_id);
|
||||
await useHandleData(DelApi, { a_id: ids.join(",") }, "删除所选信息");
|
||||
proTable.value?.clearSelection();
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
|
||||
// 批量修改广告信息
|
||||
const modifyDrawerRef = ref<InstanceType<typeof ModifyDrawer> | null>(null);
|
||||
const batchModify = async (id: any[], row: Partial<adList.List> = {}) => {
|
||||
const Sids = id.map((item: adList.List) => item.si_id);
|
||||
const isAllSame = Sids.every((value, index, array) => value === array[0]);
|
||||
if (isAllSame) {
|
||||
row.si_id = Sids[0];
|
||||
} else {
|
||||
ElMessage.warning({ message: `广告站点不一致！` });
|
||||
return;
|
||||
}
|
||||
const ids = id.map((item: adList.List) => item.a_id);
|
||||
row.a_id = ids.join(",");
|
||||
const params = {
|
||||
title: "批量编辑广告",
|
||||
row: { ...row },
|
||||
api: batchData,
|
||||
getTableList: proTable.value?.getTableList,
|
||||
clearSelection: proTable.value?.clearSelection
|
||||
};
|
||||
modifyDrawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
// 批量替换广告信息
|
||||
const replaceDrawerRef = ref<InstanceType<typeof ReplaceDrawer> | null>(null);
|
||||
const batchReplaceModify = async (row: Partial<adList.List> = {}) => {
|
||||
const params = {
|
||||
title: "批量替换广告内容",
|
||||
row: { ...row },
|
||||
api: batchReplaceData,
|
||||
getTableList: proTable.value?.getTableList,
|
||||
clearSelection: proTable.value?.clearSelection
|
||||
};
|
||||
replaceDrawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
const cloneDrawerRef = ref<InstanceType<typeof CloneDrawer> | null>(null);
|
||||
const batchCloneModify = async (row: Partial<adList.List> = {}) => {
|
||||
const params = {
|
||||
title: "克隆站点广告",
|
||||
row: { ...row },
|
||||
api: batchCloneData,
|
||||
getTableList: proTable.value?.getTableList,
|
||||
clearSelection: proTable.value?.clearSelection
|
||||
};
|
||||
cloneDrawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user