Skip to content

E
EMS
提交 81598b93 authored 作者: hejie's avatar hejie
浏览文件
操作

style: 🎨 合并代码

上级 b54b8144 a0106c02
隐藏空白字符变更
内嵌 并排
正在显示 包含 377 行增加 和 45 行删除
src/views/fac-manage/fac-create/index.vue
浏览文件 @ 81598b93
......@@ -5,9 +5,8 @@
ref="formRef"
:inline="true"
:model="form"
class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
class="search-form bg-bg_color w-full h-full pl-8 pt-[12px] overflow-auto"
>
<h3 class="mb-5">{{ tagName }}</h3>
<el-row>
<el-col :span="6">
<!-- 角色名称输入项 -->
......@@ -130,7 +129,6 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">111</el-col>
</el-row>
<el-row>
<el-col :span="12">
......@@ -154,7 +152,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-row class="fixed-bottom">
<div class="flex flex-row-reverse w-full">
<el-form-item>
<!-- 搜索按钮，点击触发搜索操作 -->
......@@ -184,6 +182,13 @@ import { ref } from "vue";
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";
......@@ -195,6 +200,7 @@ 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";
/**
* 定义组件选项
......@@ -216,17 +222,34 @@ const {
resetForm,
tagName,
handleAvatarSuccess,
beforeAvatarUpload
beforeAvatarUpload,
goBack
} = useFacForm();
const increment = () => {
count.value++;
};
</script>
<style scoped lang="scss">
.systems {
padding: 20px;
border: 1px solid #ccc;
/* 定义主容器样式 */
.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>
src/views/fac-manage/fac-create/utils/hook.tsx
浏览文件 @ 81598b93
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";
import { useRouter } from "vue-router";
export function useFacForm() {
const form = reactive({
......@@ -27,6 +28,9 @@ export function useFacForm() {
});
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));
......@@ -41,7 +45,6 @@ export function useFacForm() {
formEl.resetFields();
onSearch();
};
const imageUrl = ref("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response,
......@@ -63,6 +66,10 @@ export function useFacForm() {
}
return true;
};
const goBack = () => {
router.push("/welcome");
};
return {
tagName,
form,
......@@ -71,6 +78,7 @@ export function useFacForm() {
resetForm,
imageUrl,
handleAvatarSuccess,
beforeAvatarUpload
beforeAvatarUpload,
goBack
};
}
src/views/fac-manage/fac-list/index.vue
浏览文件 @ 81598b93
<template>
<div class="systems">
<h2>fac-list</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-form-item>
<el-button type="success">新建</el-button>
<el-button>编辑</el-button>
<el-button>删除</el-button>
<el-button>导入</el-button>
<el-button>导出</el-button>
</el-form-item>
<el-form-item class="absolute right-0 top-1">
<el-input
v-model="form.searchName"
class="w-50 m-2"
placeholder="厂商名称/简称/总部地址"
>
<template #append> <el-button :icon="Search" /> </template
></el-input>
</el-form-item>
</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";
// 引入图标
import Search from "~icons/ep/search";
const count = ref(0);
/**
* 定义组件选项
* 设置组件名称为 SystemRole，方便调试和组件识别
*/
defineOptions({
name: "Fac-Create"
});
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>
......
src/views/fac-manage/fac-list/utils/hook.tsx 0 → 100644
浏览文件 @ 81598b93
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({
searchName: ""
});
const loading = ref(false);
const imageUrl = ref("");
const router = useRouter();
const curRow = ref();
const searchName = ref("");
const dataList = ref([]);
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: "厂商类型" },
{ prop: "address", label: "总部地址" },
{ prop: "officalAddress", label: "官网地址" },
{ prop: "assDevice", label: "关联设备" }
];
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: "设备A1, 设备A2"
},
{
orderNumber: 2,
name: "厂商B",
abbreviation: "B厂",
creditCode: "987654321098765432",
facType: "类型2",
address: "上海市浦东新区",
officalAddress: "https://www.changshangB.com",
assDevice: "设备B1, 设备B2"
},
{
orderNumber: 3,
name: "厂商C",
abbreviation: "C厂",
creditCode: "112233445566778899",
facType: "类型1",
address: "广州市天河区",
officalAddress: "https://www.changshangC.com",
assDevice: "设备C1, 设备C2"
},
{
orderNumber: 4,
name: "厂商D",
abbreviation: "D厂",
creditCode: "998877665544332211",
facType: "类型3",
address: "深圳市南山区",
officalAddress: "https://www.changshangD.com",
assDevice: "设备D1, 设备D2"
},
{
orderNumber: 5,
name: "厂商E",
abbreviation: "E厂",
creditCode: "556677889900112233",
facType: "类型2",
address: "杭州市西湖区",
officalAddress: "https://www.changshangE.com",
assDevice: "设备E1, 设备E2"
},
{
orderNumber: 6,
name: "厂商F",
abbreviation: "F厂",
creditCode: "334455667788990011",
facType: "类型1",
address: "成都市武侯区",
officalAddress: "https://www.changshangF.com",
assDevice: "设备F1, 设备F2"
},
{
orderNumber: 7,
name: "厂商G",
abbreviation: "G厂",
creditCode: "778899001122334455",
facType: "类型3",
address: "南京市鼓楼区",
officalAddress: "https://www.changshangG.com",
assDevice: "设备G1, 设备G2"
},
{
orderNumber: 8,
name: "厂商H",
abbreviation: "H厂",
creditCode: "990011223344556677",
facType: "类型2",
address: "武汉市洪山区",
officalAddress: "https://www.changshangH.com",
assDevice: "设备H1, 设备H2"
}
];
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);
}
const multipleSelection = ref([]);
// 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");
};
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,
rowStyle,
handleSizeChange,
handleCurrentChange,
handleSelectionChange
};
}
src/views/systems/index.vue deleted 100644 → 0
浏览文件 @ b54b8144
<template>
<div class="systems">
<h2>Systems</h2>
<slot />
</div>
</template>
<script setup lang="ts">
// 组件逻辑部分
import { ref } from "vue";
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
<style scoped lang="scss">
.systems {
padding: 20px;
border: 1px solid #ccc;
}
</style>
src/views/systems/menu/utils/hook.tsx
浏览文件 @ 81598b93
......@@ -47,7 +47,7 @@ export function useMenu() {
};
// 定义表格列配置，用于渲染菜单表格
const columns = [
const columns: TableColumnList = [
{
label: "菜单名称",
prop: "name",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论