151 lines
4.9 KiB
Vue
151 lines
4.9 KiB
Vue
<template>
|
||
<div class="table-box">
|
||
<ProTable
|
||
ref="proTable"
|
||
title="白膜图层列表"
|
||
:columns="columns"
|
||
:requestApi="getTableList"
|
||
:initParam="initParam"
|
||
:dataCallback="dataCallback"
|
||
:tool-button="false"
|
||
:pagination="true"
|
||
:treeProps="treeProps"
|
||
selectId="governmentId"
|
||
background
|
||
onReset
|
||
>
|
||
<template #formButton="scope">
|
||
<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
|
||
</template>
|
||
<!-- 是否启用 -->
|
||
<template #show="scope">
|
||
<el-switch v-model="scope.row.show" disabled style="--el-switch-on-color: #13ce66" />
|
||
</template>
|
||
<!-- 是否飞到该白膜 -->
|
||
<template #flyTo="scope">
|
||
<el-switch v-model="scope.row.flyTo" disabled style="--el-switch-on-color: #13ce66" />
|
||
</template>
|
||
<!-- 表格操作 -->
|
||
<template #operation="scope">
|
||
<div class="operate-option">
|
||
<el-button type="primary" link @click="handleEditItem(scope.row)">
|
||
<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
|
||
<span>编辑</span>
|
||
</el-button>
|
||
<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.row)">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</ProTable>
|
||
<!-- 图层新增/编辑 -->
|
||
<operateDialog
|
||
v-model:operateVisible="operateVisible"
|
||
:relativeId="relativeId"
|
||
:title="title"
|
||
@confirm="requestTable"
|
||
></operateDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="tsx" name="jxjGovernMent">
|
||
import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
||
import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
|
||
import { useRouter } from "vue-router";
|
||
import { User } from "@/api/interface";
|
||
import { ColumnProps } from "@/components/ProTable/interface";
|
||
import ProTable from "@/components/ProTable/index.vue";
|
||
import operateDialog from "./components/operateDialog.vue";
|
||
import { Delete } from "@element-plus/icons-vue";
|
||
import { useHandleData } from "@/hooks/useHandleData";
|
||
import { albugineaMapPage, albugineaMapDelete } from "@/api/modules/mapCommon";
|
||
import { jxj_User } from "@/api/types";
|
||
const relativeId = ref("");
|
||
const operateVisible = ref(false);
|
||
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
|
||
const router = useRouter();
|
||
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
||
const proTable = ref();
|
||
const title = ref("");
|
||
|
||
const visible = ref(false);
|
||
const formData = ref({});
|
||
|
||
// 表格配置项
|
||
const columns: ColumnProps[] = [
|
||
{
|
||
prop: "id",
|
||
label: "ID"
|
||
},
|
||
// 多级 prop
|
||
{ prop: "name", label: "名称", search: { el: "input" } },
|
||
{ prop: "show", label: "是否启用" },
|
||
{ prop: "flyTo", label: "飞到该白膜" },
|
||
{ prop: "color", label: "白膜颜色" },
|
||
// { prop: "authProject", label: "开启打光效果" },
|
||
{ prop: "createTime", label: "创建时间" },
|
||
{ prop: "updateTime", label: "更新时间" },
|
||
{ prop: "operation", label: "操作", fixed: "right", width: 160 }
|
||
];
|
||
// const AuthIdData = ref([]);
|
||
|
||
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||
const initParam = reactive({
|
||
// type: 1
|
||
});
|
||
|
||
// 刷新列表数据
|
||
const requestTable = () => {
|
||
proTable.value.getTableList();
|
||
};
|
||
// 删除白膜图层
|
||
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
|
||
await useHandleData(albugineaMapDelete, { id: params.id }, `删除【${params.name}】`);
|
||
proTable.value.getTableList();
|
||
};
|
||
// 编辑
|
||
const handleEditItem = (row: any) => {
|
||
operateVisible.value = true;
|
||
title.value = "编辑白膜图层";
|
||
relativeId.value = row.id;
|
||
};
|
||
// 添加数据按钮
|
||
const handleAddItem = () => {
|
||
operateVisible.value = true;
|
||
title.value = "新增白膜图层";
|
||
formData.value = reactive({});
|
||
};
|
||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||
const dataCallback = (data: any) => {
|
||
// console.log(data);
|
||
return {
|
||
list: data.records,
|
||
total: Number(data.total),
|
||
pageNo: Number(data.current),
|
||
pageSize: Number(data.size)
|
||
};
|
||
};
|
||
|
||
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||
const getTableList = (params: any) => {
|
||
let newParams = JSON.parse(JSON.stringify(params));
|
||
return albugineaMapPage(newParams);
|
||
};
|
||
onMounted(async () => {});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.table-box {
|
||
position: relative;
|
||
}
|
||
.operate-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
:deep() {
|
||
.el-button + .el-button {
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|