first
This commit is contained in:
make
212
src/views/site/template.vue
Normal file
212
src/views/site/template.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user