SEONexusAdmin/src/views/site/template.vue

<template>
    <div class="table-box">
        <ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="getTableList"
        :data-callback="dataCallback">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="openDrawer(true)">新增</el-button>
                <el-button
                    type="danger"
                    :icon="Delete"
                    style="display: none"
                    plain
                    :disabled="!scope.isSelected"
                    @click="batchDelete(scope.selectedList)"
                >
                    批量删除站点
                </el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <!-- <div class="c-right-pad">
                    <div>
                        <el-button
                            type="success"
                            style="width: 72px"
                            v-if="scope.row.si_deploy_site_jenkins?.length > 0"
                            link
                            :icon="Refresh"
                            @click="structureDrawer(scope.row)"
                        >
                            H5构建
                        </el-button>
                        <el-button
                            v-if="scope.row.si_deploy_site_jenkins?.length == 0"
                            style="width: 72px; background: none; border: none"
                            >--
                        </el-button>
                        <el-button type="primary" link :icon="EditPen" @click="openDrawer(false, scope.row)">编辑</el-button>
                    </div>
                    <div>
                        <el-button
                            type="success"
                            style="width: 72px"
                            v-if="scope.row.si_deploy_landing_jenkins?.length > 0"
                            link
                            :icon="Refresh"
                            @click="landingDrawer(scope.row)"
                        >
                            引导页
                        </el-button>
                        <el-button
                            v-if="scope.row.si_deploy_landing_jenkins?.length == 0"
                            style="width: 72px; background: none; border: none"
                            >--
                        </el-button>
                        <el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
                    </div>
                </div> -->
            </template>
        </ProTable>
        <Drawer ref="drawerRef" />
    </div>
</template>

<script setup lang="tsx" name="complexProTable">
import { reactive, ref } from "vue";
import { SiteList } from "@/api/interface/site/list";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { Delete, EditPen, CirclePlus, Refresh } from "@element-plus/icons-vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getList, saveData, deleteItem, buildItem, landingItem } from "@/api/modules/site/template";
import Drawer from "./drawer.vue";
import { arrColorType } from "@/utils/serviceDict";
// ProTable 实例
const proTable = ref<ProTableInstance>();
  
    const initParam = reactive({
    limit: 15,
    page: 1
});

const dataCallback = (data: any) => {
    // 转换为数组
    const arr = data.items;
    return {
        items: arr,
        total: data.total,
        total_page: 1,
        page: initParam.page,
        limit: initParam.limit
    };
};

const getTableList = (params: any) => {
    let newParams = JSON.parse(JSON.stringify(params));
    initParam.page = newParams.page;
    initParam.limit = newParams.limit;
    return getList(newParams);
};

// 表格配置项
const columns = reactive<ColumnProps<SiteList.ResList>[]>([
    { type: "selection", fixed: "left", width: 50 },
    {
        prop: "key",
        label: "搜索内容",
        isShow: false,
        search: {
            el: "input"
        }
    },
    {
        prop: "t_id",
        label: "ID",
        width: 100
    },
    {
        prop: "t_code",
        width: 170,
        label: "模板编码"
    },


    {
        prop: "t_default",
        width: 120,
        label: "是否默认模板",
        enum: [
            { label: "否", value: 0 },
            { label: "是", value: 1 }
        ],
    },
    {
        prop: "t_path",
        width: 270,
        label: "模板路径"
    },
    {
        prop: "t_cfg_template",
        label: "模板配置",
        render(scope) {
            return JSON.stringify(scope.row.t_cfg_template);
        }
    },
   
    // { prop: "created_at", label: "添加时间", width: 170 },
    { prop: "operation", label: "操作", fixed: "right", width: 165 }
]);

// 删除站点信息
const deleteAccount = async (params: SiteList.ResList) => {
    await useHandleData(deleteItem, { si_id: params.si_id }, "删除所选信息");
    proTable.value?.getTableList();
};

// 批量删除站点信息
const batchDelete = async (id: any[]) => {
    const ids = id.map((item: SiteList.ResList) => item.si_id);
    await useHandleData(deleteItem, { si_id: ids.join(",") }, "删除所选信息");
    proTable.value?.clearSelection();
    proTable.value?.getTableList();
};
// 打开 drawer(新增、编辑)
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);

const openDrawer = (isEdit: boolean, row: Partial<SiteList.ResList> = {}) => {
    const params = {
        title: isEdit ? "新增站点" : "编辑站点",
        row: { ...row },
        api: saveData,
        getTableList: proTable.value?.getTableList
    };
    drawerRef.value?.acceptParams(params as any);
};

//构建站点
const structureDrawer = async (params: SiteList.ResList) => {
    await useHandleData(buildItem, { si_id: params.si_id }, "对此站点项目进行构建?", "后台正在打包中，请3分钟后查看H5前端站点！");
    proTable.value?.getTableList();
};
// 引导页
const landingDrawer = async (params: SiteList.ResList) => {
    await useHandleData(
        landingItem,
        { si_id: params.si_id },
        "对此站点项目进行构建?",
        "后台正在打包中，请3分钟后查看引导页前端站点！"
    );
    proTable.value?.getTableList();
};
</script>

<style lang="scss">
.el-table .warning-row,
.el-table .warning-row .el-table-fixed-column--right,
.el-table .warning-row .el-table-fixed-column--left {
    background-color: var(--el-color-warning-light-9);
}
.el-table .success-row,
.el-table .success-row .el-table-fixed-column--right,
.el-table .success-row .el-table-fixed-column--left {
    background-color: var(--el-color-success-light-9);
}
.tagTextColor {
    // color: red;
    border: none;
}
.c-right-pad .el-table--default .cell {
    padding: 0 5px !important;
}
</style>