149 lines
4.4 KiB
Vue
149 lines
4.4 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 #operation="scope">
|
||
<div class="operate-option"></div>
|
||
</template>
|
||
<template #state="{ row }">
|
||
<span :class="row.state === 1 ? '' : 'redText'">{{ row.state === 1 ? "启用" : "禁用" }}</span>
|
||
</template>
|
||
<template #authProject="{ row }">
|
||
{{ (row.installProject ? row.installProject : 0) + "/" + row.authProject }}
|
||
</template>
|
||
<template #diffDay="{ row }">
|
||
{{ row.expireTime === null ? "永久有效" : row.diffDay }}
|
||
</template>
|
||
</ProTable>
|
||
<!-- 图层新增/编辑 -->
|
||
<operateDialog v-model:operateVisible="operateVisible" :relativeId="relativeId"></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 { getGovermentTreeList } from "@/api/modules/jxjview";
|
||
import operateDialog from "./components/operateDialog.vue";
|
||
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: "governmentName",
|
||
label: "ID",
|
||
search: { el: "input" }
|
||
},
|
||
// 多级 prop
|
||
{ prop: "createTime", label: "名称" },
|
||
{ prop: "governmentTel", label: "是否启用" },
|
||
{ prop: "state", label: "飞到该白膜" },
|
||
{ prop: "diffDay", label: "白膜颜色" },
|
||
{ prop: "authProject", label: "开启打光效果" },
|
||
{ prop: "authProject", label: "创建时间" },
|
||
{ prop: "authProject", label: "更新时间" },
|
||
{ prop: "operation", label: "操作", fixed: "right", width: 260 }
|
||
];
|
||
// const AuthIdData = ref([]);
|
||
|
||
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||
const initParam = reactive({
|
||
// type: 1
|
||
});
|
||
// 添加数据按钮
|
||
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 getGovermentTreeList(newParams);
|
||
};
|
||
onMounted(async () => {});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.operate-option {
|
||
display: flex;
|
||
align-items: center;
|
||
:deep() {
|
||
.el-button + .el-button {
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
}
|
||
.littleTitle {
|
||
border-left: 3px solid #008bff;
|
||
padding-left: 6px;
|
||
}
|
||
.allModular {
|
||
width: 100%;
|
||
margin: 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.modularItem {
|
||
padding-right: 50px;
|
||
}
|
||
}
|
||
.select-all {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.radio-select {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
:deep(.el-dialog__footer) {
|
||
text-align: center;
|
||
}
|
||
:focus-visible {
|
||
outline: none;
|
||
}
|
||
// .redText {
|
||
// color: red;
|
||
// }
|
||
</style>
|