feat: 新增厂商列表

src/views/fac-manage/fac-create/index.vue

@@ -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">
           <!-- 角色名称输入项 -->
@@ -153,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>
             <!-- 搜索按钮，点击触发搜索操作 -->
@@ -183,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";
@@ -194,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";
 
 /**
  * 定义组件选项
@@ -215,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

 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

 <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";
+
+/**
+ * 定义组件选项
+ * 设置组件名称为 SystemRole，方便调试和组件识别
+ */
+defineOptions({
+  name: "Fac-Create"
+});
 
-const count = ref(0);
+// 创建表单引用
+const formRef = ref();
+const {
+  form,
+  columns,
+  loading,
+  dataList,
+  pagination,
+  rowStyle,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useFacList();
+const tableRef = ref();
 
-const increment = () => {
-  count.value++;
+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

+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 = [
+    { prop: "orderNumber", label: "序号" },
+    { prop: "name", label: "厂商名称" },
+    { 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

-<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>