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