提交 f99a1479 authored 作者: 詹银鑫's avatar 詹银鑫

Merge branch 'zyxdev' of https://t.clxkj.cn/hejie/EMS into feature-20250411

<template>
<div class="main">
<!-- 搜索表单 -->
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-full h-full pl-8 pt-[12px] overflow-auto"
>
<el-row>
<el-col :span="6">
<!-- 角色名称输入项 -->
<el-form-item label="厂商名称:" prop="name">
<el-input
v-model="form.name"
placeholder="请输入厂商名称"
clearable
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<!-- 角色名称输入项 -->
<el-form-item label="厂商简称:" prop="abbreviation">
<el-input
v-model="form.abbreviation"
placeholder="请输入厂商简称"
clearable
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<!-- 角色名称输入项 -->
<el-form-item label="设备联系人:" prop="contactPerson">
<el-input
v-model="form.name"
placeholder="请输入设备联系人"
clearable
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<!-- 角色名称输入项 -->
<el-form-item label="厂商类型:" prop="facType">
<el-select
v-model="form.facType"
clearable
class="w-[180px]!"
placeholder="请选择厂商类型"
>
<el-option
v-for="item in form.facTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<!-- 角色名称输入项 -->
<el-form-item label="统一社会信用代号/税号:" prop="creditCode">
<el-input
v-model="form.creditCode"
placeholder="请输入统一社会信用代号/税号"
clearable
class="w-[500px]!"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 角色名称输入项 -->
<el-form-item label="总部地址:" prop="address">
<el-input
v-model="form.hqAddress"
placeholder="请输入地址"
clearable
class="w-[500px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<!-- 角色名称输入项 -->
<el-form-item label="官网地址:" prop="officalAddress">
<el-input
v-model="form.officalAddress"
placeholder="请输入官网地址"
clearable
style="width: 500px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 角色名称输入项 -->
<el-form-item label="关联设备:" prop="assDevice">
<el-select
v-model="form.assDevice"
clearable
class="w-[180px]!"
placeholder="请选择关联设备"
>
<el-option
v-for="item in form.assDeviceList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<!-- 角色名称输入项 -->
<el-form-item label="备注:" prop="remark" label-width="80px">
<el-input
v-model="form.notes"
:autosize="{ minRows: 4, maxRows: 6 }"
type="textarea"
placeholder="请输入备注"
clearable
class="w-[500px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="合同文件:" prop="remark">
<el-upload
class="upload-demo"
drag
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将您的文件拖放到此处,或者 <em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">2M以内,支持xlsx、xls格式</div>
</template>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row class="fixed-bottom">
<div class="flex flex-row-reverse w-full">
<el-form-item>
<!-- 搜索按钮,点击触发搜索操作 -->
<el-button
type="primary"
:icon="useRenderIcon(Check)"
:loading="loading"
@click="onSearch"
>
确定
</el-button>
<!-- 重置按钮,点击触发重置表单并重新搜索 -->
<el-button :icon="useRenderIcon(Close)" @click="resetForm(formRef)">
取消
</el-button>
</el-form-item>
</div>
</el-row>
</el-form>
</div>
</template>
<script setup lang="ts">
// 组件逻辑部分
import { ref } from "vue";
// 引入图标渲染 hook
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useFacForm } from "./utils/hook";
import { UploadFilled } from "@element-plus/icons-vue";
// 引入工具函数
import {
delay,
subBefore,
deviceDetection,
useResizeObserver
} from "@pureadmin/utils";
// 引入图标
// import Database from "~icons/ri/database-2-line";
// import More from "~icons/ep/more-filled";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import Refresh from "~icons/ep/refresh";
import Menu from "~icons/ep/menu";
import AddFill from "~icons/ri/add-circle-line";
import Close from "~icons/ep/close";
import Check from "~icons/ep/check";
import Back from "~icons/ep/back";
/**
* 定义组件选项
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions({
name: "Fac-Create"
});
// 创建表单引用
const formRef = ref();
const count = ref(0);
const {
form,
loading,
onSearch,
resetForm,
tagName,
handleAvatarSuccess,
beforeAvatarUpload,
goBack
} = useFacForm();
</script>
<style scoped lang="scss">
/* 定义主容器样式 */
.main {
position: relative;
height: 95%;
overflow: auto;
}
/* 设置搜索表单内表单项的底部外边距 */
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
/* 设置搜索表单内表单项的底部外边距 */
.fixed-bottom {
position: absolute;
bottom: 0;
left: 0;
z-index: 10; /* 确保在其他内容之上 */
width: 100%;
padding: 10px; /* 可选,增加内边距 */
background-color: #fff; /* 可选,设置背景色 */
}
</style>
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";
import { useRouter } from "vue-router";
export function useFacForm() {
const form = reactive({
name: "",
abbreviation: "",
creditCode: "",
contactPerson: "",
facType: "hardware",
facTypeList: [
{ label: "硬件", value: "hardware" },
{ label: "软件", value: "software" },
{ label: "云服务", value: "cloud" },
{ label: "解决方案", value: "solution" }
],
hqAddress: "",
officalAddress: "",
notes: "",
assDevice: "device1",
assDeviceList: [
{ label: "设备1", value: "device1" },
{ label: "设备2", value: "device2" },
{ label: "设备3", value: "device3" }
]
});
const tagName = ref("厂商信息");
const loading = ref(false);
const imageUrl = ref("");
const router = useRouter();
async function onSearch() {
loading.value = true;
// const { data } = await getRoleList(toRaw(form));
setTimeout(() => {
loading.value = false;
}, 500);
}
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
console.log("uploadFile", uploadFile);
imageUrl.value = URL.createObjectURL(uploadFile.raw!);
console.log("imageUrl.value", imageUrl.value);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
console.log("rawFile", rawFile);
if (rawFile.type !== "xlsx/xls") {
ElMessage.error("文件上传类型只支持xlsx/xls!");
return false;
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error("文件不能超过2MB!");
return false;
}
return true;
};
const goBack = () => {
router.push("/welcome");
};
const fetchFacDetails = editItem => {
console.log("editItem", editItem);
if (editItem) {
form.name = editItem.name;
form.abbreviation = editItem.abbreviation;
form.creditCode = editItem.creditCode;
form.contactPerson = editItem.contactPerson;
form.facType = editItem.facType;
form.hqAddress = editItem.address;
form.officalAddress = editItem.officalAddress;
}
};
const route = useRoute();
const editItem = JSON.parse(
Array.isArray(route.query.editItem)
? route.query.editItem[0]
: route.query.editItem || "{}"
);
onMounted(() => {
fetchFacDetails(editItem);
});
return {
tagName,
form,
loading,
onSearch,
resetForm,
imageUrl,
handleAvatarSuccess,
beforeAvatarUpload,
goBack
};
}
......@@ -8,8 +8,8 @@
class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto relative"
>
<el-form-item>
<el-button type="success">新建</el-button>
<el-button>编辑</el-button>
<el-button type="success" @click="goFacCreate">新建</el-button>
<el-button @click="handleEdit">编辑</el-button>
<el-button>删除</el-button>
<el-button>导入</el-button>
<el-button>导出</el-button>
......@@ -88,7 +88,7 @@ import Search from "~icons/ep/search";
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions({
name: "Fac-Create"
name: "Fac-List"
});
// 创建表单引用
......@@ -101,9 +101,11 @@ const {
pagination,
rowStyle,
onSearch,
goFacCreate,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
handleSelectionChange,
handleEdit
} = useFacList();
const tableRef = ref();
......
......@@ -14,6 +14,15 @@ export function useFacList() {
const curRow = ref();
const searchName = ref("");
const dataList = ref([]);
const multipleSelection = ref([]);
const filterFacType = (value, row) => {
return row.facType === value;
};
const filterassDevice = (value, row) => {
return row.assDevice === value;
};
const columns: TableColumnList = [
{
......@@ -24,10 +33,31 @@ export function useFacList() {
{ prop: "name", label: "厂商名称", width: 80 },
{ prop: "abbreviation", label: "厂商简称" },
{ prop: "creditCode", label: "统一社会信用代号/税号" },
{ prop: "facType", label: "厂商类型" },
{
prop: "facType",
label: "厂商类型",
filters: [
{ text: "类型1", value: "类型1" },
{ text: "类型2", value: "类型2" },
{ text: "类型3", value: "类型3" }
],
filterMethod: filterFacType,
filterPlacement: "bottom-end",
slot: "tag"
},
{ prop: "address", label: "总部地址" },
{ prop: "officalAddress", label: "官网地址" },
{ prop: "assDevice", label: "关联设备" }
{
prop: "assDevice",
label: "关联设备",
filters: [
{ text: "水质检测", value: "水质检测" },
{ text: "噪声检测", value: "噪声检测" }
],
filterMethod: filterassDevice,
filterPlacement: "bottom-end",
slot: "tag"
}
];
const pagination = reactive<PaginationProps>({
......@@ -77,7 +107,7 @@ export function useFacList() {
facType: "类型1",
address: "北京市朝阳区",
officalAddress: "https://www.changshangA.com",
assDevice: "设备A1, 设备A2"
assDevice: "水质检测"
},
{
orderNumber: 2,
......@@ -87,7 +117,7 @@ export function useFacList() {
facType: "类型2",
address: "上海市浦东新区",
officalAddress: "https://www.changshangB.com",
assDevice: "设备B1, 设备B2"
assDevice: "噪声检测"
},
{
orderNumber: 3,
......@@ -97,7 +127,7 @@ export function useFacList() {
facType: "类型1",
address: "广州市天河区",
officalAddress: "https://www.changshangC.com",
assDevice: "设备C1, 设备C2"
assDevice: "水质检测"
},
{
orderNumber: 4,
......@@ -107,7 +137,7 @@ export function useFacList() {
facType: "类型3",
address: "深圳市南山区",
officalAddress: "https://www.changshangD.com",
assDevice: "设备D1, 设备D2"
assDevice: "水质检测"
},
{
orderNumber: 5,
......@@ -117,7 +147,7 @@ export function useFacList() {
facType: "类型2",
address: "杭州市西湖区",
officalAddress: "https://www.changshangE.com",
assDevice: "设备E1, 设备E2"
assDevice: "噪声检测"
},
{
orderNumber: 6,
......@@ -127,7 +157,7 @@ export function useFacList() {
facType: "类型1",
address: "成都市武侯区",
officalAddress: "https://www.changshangF.com",
assDevice: "设备F1, 设备F2"
assDevice: "噪声检测"
},
{
orderNumber: 7,
......@@ -137,7 +167,7 @@ export function useFacList() {
facType: "类型3",
address: "南京市鼓楼区",
officalAddress: "https://www.changshangG.com",
assDevice: "设备G1, 设备G2"
assDevice: "噪声检测"
},
{
orderNumber: 8,
......@@ -147,7 +177,7 @@ export function useFacList() {
facType: "类型2",
address: "武汉市洪山区",
officalAddress: "https://www.changshangH.com",
assDevice: "设备H1, 设备H2"
assDevice: "水质检测"
}
];
dataList.value = testData;
......@@ -177,10 +207,25 @@ export function useFacList() {
function handleSelectionChange(val) {
multipleSelection.value = val;
console.log("handleSelectionChange", val);
// console.log("handleSelectionChange", val);
}
/** 编辑按钮事件 */
function handleEdit() {
if (multipleSelection.value.length === 0) {
ElMessage.warning("请选择一条数据进行编辑");
return;
} else if (multipleSelection.value.length > 1) {
ElMessage.warning("只能选择一条数据进行编辑");
return;
}
router.push({
path: "/fac-manage/fac-edit",
query: { editItem: JSON.stringify(multipleSelection.value[0]) }
});
console.log("multipleSelection", multipleSelection.value);
}
const multipleSelection = ref([]);
// const toggleSelection = (rows?: any) => {
// const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
// if (rows) {
......@@ -196,6 +241,10 @@ export function useFacList() {
router.push("/welcome");
};
const goFacCreate = () => {
router.push("/fac-manage/fac-create");
};
onMounted(async () => {
onSearch();
// const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
......@@ -214,9 +263,11 @@ export function useFacList() {
handleAvatarSuccess,
beforeAvatarUpload,
goBack,
goFacCreate,
rowStyle,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
handleSelectionChange,
handleEdit
};
}
<template>
<div class="systems">
<h2>fac-select</h2>
<slot />
<div class="main">
<!-- 搜索表单 -->
<el-form
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto relative"
>
<el-row>
<el-col :span="6">
<el-form-item label="厂商名称" prop="name">
<el-input
v-model="form.name"
placeholder="请输入厂商名称"
clearable
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="厂商简称" prop="abbreviation">
<el-input
v-model="form.abbreviation"
placeholder="请输入厂商简称"
clearable
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="统一社会名称代号/税号" prop="creditCode">
<el-input
v-model="form.creditCode"
placeholder="请输入统一社会名称代号/税号"
class="w-[280px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="厂商类型" prop="facType">
<el-select
v-model="form.facType"
clearable
class="w-[180px]!"
placeholder="请选择厂商类型"
>
<el-option
v-for="item in form.facTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="关联设备" prop="assDevice">
<el-input
v-model="form.assDevice"
placeholder="请输入关联设备"
class="w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="总部地址:" prop="hqAddress">
<el-input
v-model="form.hqAddress"
placeholder="请输入总部地址"
class="w-[180px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row class="mb-2">
<el-col :span="12" :offset="8">
<el-button type="success">查询</el-button>
<el-button>取消</el-button>
<el-button>重置</el-button>
</el-col>
</el-row>
</el-form>
<!-- 内容区域 -->
<div
ref="contentRef"
:class="['flex', deviceDetection() ? 'flex-wrap' : '']"
>
<!-- 自定义表格栏组件 -->
<PureTableBar
:class="'w-full'"
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
title="厂商列表"
:columns="columns"
@refresh="onSearch"
>
<!-- 表格插槽 -->
<template v-slot="{ size, dynamicColumns }">
<!-- 自定义表格组件 -->
<pure-table
ref="tableRef"
align-whole="center"
showOverflowTooltip
table-layout="auto"
:loading="loading"
:size="size"
adaptive
:row-style="rowStyle"
:adaptiveConfig="{ offsetBottom: 108 }"
:data="dataList"
:columns="dynamicColumns"
:pagination="{ ...pagination, size }"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
/>
</template>
</PureTableBar>
</div>
</div>
</template>
<script setup lang="ts">
// 组件逻辑部分
import { ref } from "vue";
import { useFacList } from "./utils/hook";
import { UploadFilled } from "@element-plus/icons-vue";
import {
delay,
subBefore,
deviceDetection,
useResizeObserver
} from "@pureadmin/utils";
// 引入自定义表格栏组件
import { PureTableBar } from "@/components/RePureTableBar";
const count = ref(0);
/**
* 定义组件选项
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions({
name: "Fac-List"
});
const increment = () => {
count.value++;
// 创建表单引用
const formRef = ref();
const {
form,
columns,
loading,
dataList,
pagination,
rowStyle,
onSearch,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
} = useFacList();
const tableRef = ref();
const toggleSelection = (rows?: any) => {
const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
if (rows) {
rows.forEach(row => {
toggleRowSelection(row, undefined);
});
} else {
clearSelection();
}
};
</script>
<style scoped lang="scss">
.systems {
padding: 20px;
border: 1px solid #ccc;
/* 设置搜索表单内表单项的底部外边距 */
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";
import { useRouter } from "vue-router";
import type { PaginationProps } from "@pureadmin/table";
export function useFacList() {
const form = reactive({
name: "",
abbreviation: "",
creditCode: "",
contactPerson: "",
facType: "hardware",
facTypeList: [
{ label: "硬件", value: "hardware" },
{ label: "软件", value: "software" },
{ label: "云服务", value: "cloud" },
{ label: "解决方案", value: "solution" }
],
hqAddress: "",
officalAddress: "",
notes: "",
assDevice: "device1",
assDeviceList: [
{ label: "设备1", value: "device1" },
{ label: "设备2", value: "device2" },
{ label: "设备3", value: "device3" }
]
});
const loading = ref(false);
const imageUrl = ref("");
const router = useRouter();
const curRow = ref();
const searchName = ref("");
const dataList = ref([]);
const multipleSelection = ref([]);
const filterFacType = (value, row) => {
return row.facType === value;
};
const filterassDevice = (value, row) => {
return row.assDevice === value;
};
const columns: TableColumnList = [
{
type: "selection",
align: "left"
},
{ prop: "orderNumber", label: "序号", width: 70 },
{ prop: "name", label: "厂商名称", width: 80 },
{ prop: "abbreviation", label: "厂商简称" },
{ prop: "creditCode", label: "统一社会信用代号/税号" },
{
prop: "facType",
label: "厂商类型",
filters: [
{ text: "类型1", value: "类型1" },
{ text: "类型2", value: "类型2" },
{ text: "类型3", value: "类型3" }
],
filterMethod: filterFacType,
filterPlacement: "bottom-end",
slot: "tag"
},
{ prop: "address", label: "总部地址" },
{ prop: "officalAddress", label: "官网地址" },
{
prop: "assDevice",
label: "关联设备",
filters: [
{ text: "水质检测", value: "水质检测" },
{ text: "噪声检测", value: "噪声检测" }
],
filterMethod: filterassDevice,
filterPlacement: "bottom-end",
slot: "tag"
}
];
const pagination = reactive<PaginationProps>({
total: 0,
pageSize: 10,
currentPage: 1,
background: true
});
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response,
uploadFile
) => {
console.log("uploadFile", uploadFile);
imageUrl.value = URL.createObjectURL(uploadFile.raw!);
console.log("imageUrl.value", imageUrl.value);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
console.log("rawFile", rawFile);
if (rawFile.type !== "xlsx/xls") {
ElMessage.error("文件上传类型只支持xlsx/xls!");
return false;
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error("文件不能超过2MB!");
return false;
}
return true;
};
async function onSearch() {
loading.value = true;
// const { data } = await getRoleList(toRaw(form));
// dataList.value = data.records;
const testData = [
{
orderNumber: 1,
name: "厂商A",
abbreviation: "A厂",
creditCode: "123456789012345678",
facType: "类型1",
address: "北京市朝阳区",
officalAddress: "https://www.changshangA.com",
assDevice: "水质检测"
},
{
orderNumber: 2,
name: "厂商B",
abbreviation: "B厂",
creditCode: "987654321098765432",
facType: "类型2",
address: "上海市浦东新区",
officalAddress: "https://www.changshangB.com",
assDevice: "噪声检测"
},
{
orderNumber: 3,
name: "厂商C",
abbreviation: "C厂",
creditCode: "112233445566778899",
facType: "类型1",
address: "广州市天河区",
officalAddress: "https://www.changshangC.com",
assDevice: "水质检测"
},
{
orderNumber: 4,
name: "厂商D",
abbreviation: "D厂",
creditCode: "998877665544332211",
facType: "类型3",
address: "深圳市南山区",
officalAddress: "https://www.changshangD.com",
assDevice: "水质检测"
},
{
orderNumber: 5,
name: "厂商E",
abbreviation: "E厂",
creditCode: "556677889900112233",
facType: "类型2",
address: "杭州市西湖区",
officalAddress: "https://www.changshangE.com",
assDevice: "噪声检测"
},
{
orderNumber: 6,
name: "厂商F",
abbreviation: "F厂",
creditCode: "334455667788990011",
facType: "类型1",
address: "成都市武侯区",
officalAddress: "https://www.changshangF.com",
assDevice: "噪声检测"
},
{
orderNumber: 7,
name: "厂商G",
abbreviation: "G厂",
creditCode: "778899001122334455",
facType: "类型3",
address: "南京市鼓楼区",
officalAddress: "https://www.changshangG.com",
assDevice: "噪声检测"
},
{
orderNumber: 8,
name: "厂商H",
abbreviation: "H厂",
creditCode: "990011223344556677",
facType: "类型2",
address: "武汉市洪山区",
officalAddress: "https://www.changshangH.com",
assDevice: "水质检测"
}
];
dataList.value = testData;
// pagination.total = data.total;
// pagination.pageSize = data.pageSize;
// pagination.currentPage = data.currentPage;
setTimeout(() => {
loading.value = false;
}, 500);
}
/** 高亮当前权限选中行 */
function rowStyle({ row: { id } }) {
return {
cursor: "pointer",
background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
};
}
function handleSizeChange(val: number) {
console.log(`${val} items per page`);
}
function handleCurrentChange(val: number) {
console.log(`current page: ${val}`);
}
function handleSelectionChange(val) {
multipleSelection.value = val;
// console.log("handleSelectionChange", val);
}
/** 编辑按钮事件 */
function handleEdit() {
if (multipleSelection.value.length === 0) {
ElMessage.warning("请选择一条数据进行编辑");
return;
} else if (multipleSelection.value.length > 1) {
ElMessage.warning("只能选择一条数据进行编辑");
return;
}
router.push({
path: "/fac-manage/fac-edit",
query: { editItem: JSON.stringify(multipleSelection.value[0]) }
});
console.log("multipleSelection", multipleSelection.value);
}
// const toggleSelection = (rows?: any) => {
// const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
// if (rows) {
// rows.forEach(row => {
// toggleRowSelection(row, undefined);
// });
// } else {
// clearSelection();
// }
// };
const goBack = () => {
router.push("/welcome");
};
const goFacCreate = () => {
router.push("/fac-manage/fac-create");
};
onMounted(async () => {
onSearch();
// const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
});
return {
columns,
form,
loading,
searchName,
dataList,
imageUrl,
pagination,
multipleSelection,
onSearch,
resetForm,
handleAvatarSuccess,
beforeAvatarUpload,
goBack,
goFacCreate,
rowStyle,
handleSizeChange,
handleCurrentChange,
handleSelectionChange,
handleEdit
};
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论