<template>
|
<div class="main-box">
|
<TreeFilter
|
label="name"
|
:title="t('Person.companyList')"
|
:request-api="getUserDepartment"
|
@change="changeTreeFilter"
|
:labeltext="t('treeFilter.searchPlaceholder')"
|
:zhankai="t('treeFilter.expandAll')"
|
:zhedie="t('treeFilter.collapseAll')"
|
/>
|
<div class="table-box">
|
<ProTable
|
v-loading="loading"
|
ref="proTable"
|
:columns="columns"
|
:request-api="getMaterialsList"
|
:init-param="initParam"
|
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
|
>
|
<!-- 表格 header 按钮 -->
|
<template #tableHeader> </template>
|
<!-- 电量 -->
|
<template #ppower="scope">
|
<VueUiGizmo :config="config" :dataset="scope.row.ppower" />
|
</template>
|
<!-- 表格操作 -->
|
<template #operation="scope">
|
<el-button type="primary" link :icon="View" @click="viewDrawer($t('Config.view'), scope.row)">{{
|
$t("Config.view")
|
}}</el-button>
|
<el-button type="primary" v-if="BUTTONS.edit" link :icon="EditPen" @click="openDrawer($t('Config.update'), scope.row)">
|
{{ $t("Config.update") }}
|
</el-button>
|
<el-button type="primary" v-if="BUTTONS.delete" link :icon="Delete" @click="deleteAccount(scope.row)">{{
|
$t("Config.delete")
|
}}</el-button>
|
</template>
|
</ProTable>
|
<PersonDrawer ref="drawerRef" />
|
<PersonInfoCard ref="viewRef" />
|
<ImportExcel ref="dialogRef" />
|
</div>
|
</div>
|
</template>
|
<script setup lang="tsx" name="useTreeFilter">
|
import { ref, reactive } from "vue";
|
import { User } from "@/api/interface";
|
import { useHandleData } from "@/hooks/useHandleData";
|
import ProTable from "@/components/ProTable/index.vue";
|
import TreeFilter from "@/components/TreeFilter/index.vue";
|
import { useAuthButtons } from "@/hooks/useAuthButtons";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import { ElMessage } from "element-plus";
|
|
import PersonInfoCard from "@/views/proTable/components/hxzk/person/PersonInfoCard.vue";
|
import PersonDrawer from "@/views/proTable/components/hxzk/person/MaterialsDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import { Delete, EditPen, View } from "@element-plus/icons-vue";
|
import { getMaterialsList, addPerson, editPerson, deletePerson } from "@/api/modules/hxzk/person/person";
|
import { getUserDepartment } from "@/api/modules/hxzk/user/user";
|
import { useI18n } from "vue-i18n";
|
import { VueUiGizmo } from "vue-data-ui";
|
import "vue-data-ui/style.css";
|
import notData from "@/assets/images/notData.png";
|
// 使用 useI18n 获取 i18n 实例
|
const { t } = useI18n({
|
useScope: "global"
|
});
|
const { BUTTONS } = useAuthButtons();
|
console.log(BUTTONS);
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
|
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
const initParam = reactive({ departmentId: "" });
|
const loading = ref(true);
|
// 树形筛选切换
|
const changeTreeFilter = (val: string) => {
|
proTable.value!.pageable.pageNum = 1;
|
initParam.departmentId = val;
|
ElMessage({
|
message: t("Config.Checked"),
|
grouping: true,
|
type: "success"
|
});
|
};
|
|
// 电量配置项
|
const config = ref({
|
type: "battery",
|
size: 70,
|
stroke: "#8a8a8aff",
|
color: "#33ff57ff",
|
useGradient: false,
|
gradientColor: "rgba(255, 0, 0, 1)",
|
showPercentage: true,
|
textColor: "rgba(26, 26, 26, 1)",
|
fontFamily: "inherit",
|
formatter: null
|
});
|
|
// 表格配置项
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
{ type: "index", label: "", width: 80 },
|
|
{
|
prop: "ptagid",
|
label: t("Person.tagid"),
|
search: { el: "input", span: 3 },
|
render: scope => {
|
return (
|
<el-tag size="large" effect="light">
|
{scope.row.ptagid}
|
</el-tag>
|
);
|
}
|
},
|
|
{
|
prop: "pname",
|
label: t("Materials.name"),
|
search: { el: "input", span: 3 }
|
},
|
{
|
prop: "pdepartment",
|
label: t("Person.department")
|
},
|
{ prop: "ppower", label: t("Person.power") },
|
{
|
prop: "ponline",
|
label: t("Person.online"),
|
render: scope => {
|
const statusText = scope.row.ponline === "1" ? t("Person.status.online") : t("Person.status.offline");
|
const tagType = scope.row.ponline === "1" ? "primary" : "danger";
|
return (
|
<el-tag size="large" effect="plain" type={tagType}>
|
{statusText}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "baoliu1",
|
label: t("Person.cardNumber"),
|
width: 190,
|
render: scope => {
|
return <el-tag size="large">{scope.row.baoliu1}</el-tag>;
|
}
|
},
|
{
|
prop: "company",
|
label: t("Person.company"),
|
width: 100,
|
render: scope => {
|
return <el-tag size="large">{scope.row.company}</el-tag>;
|
}
|
},
|
{ prop: "paddtiem", label: t("Config.time"), width: 160 },
|
|
{
|
prop: "baoliu38",
|
label: t("Materials.photo"),
|
render: scope => {
|
const handleError = e => {
|
e.target.src = notData;
|
e.target.onerror = null; // 防止默认图片也加载失败时无限循环
|
};
|
|
return <img style={{ width: "30px", height: "30px" }} src={scope.row.baoliu38} onError={handleError} />;
|
}
|
},
|
{ prop: "operation", label: t("Config.operation"), width: 260 }
|
]);
|
|
// 删除终端信息
|
const deleteAccount = async (params: User.ResUserList) => {
|
await useHandleData(
|
deletePerson,
|
{ ptagid: params.ptagid, pname: params.pname },
|
t("Materials.deleteConfirm", { name: params.pname }),
|
t
|
);
|
proTable.value?.getTableList();
|
};
|
|
// 批量添加用户
|
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
|
|
// 打开 drawer(新增、编辑)
|
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
|
// 打开 viewRef(查看)
|
const viewRef = ref<InstanceType<typeof UserDrawer> | null>(null);
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === "查看",
|
row: { ...row },
|
api: title === "新增" ? addPerson : title === "编辑" ? editPerson : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
drawerRef.value?.acceptParams(params);
|
};
|
const viewDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const params = {
|
title,
|
initParam,
|
isView: title === "查看",
|
row: { ...row },
|
api: title === "新增" ? addPerson : title === "编辑" ? editPerson : undefined,
|
getTableList: proTable.value?.getTableList
|
};
|
viewRef.value?.acceptParams(params);
|
};
|
</script>
|
<style scoped>
|
.example-showcase .el-loading-mask {
|
z-index: 9;
|
}
|
</style>
|
