feat: 新增厂商管理模块

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

+<template>
+  <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"
+    >
+      <h3 class="mb-5">{{ tagName }}</h3>
+      <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
+              class="w-[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-col :span="12">
+          <el-form-item>
+            <!-- 搜索按钮，点击触发搜索操作 -->
+            <el-button
+              type="primary"
+              :icon="useRenderIcon('ri/search-line')"
+              :loading="loading"
+              @click="onSearch"
+            >
+              搜索
+            </el-button>
+            <!-- 重置按钮，点击触发重置表单并重新搜索 -->
+            <el-button
+              :icon="useRenderIcon(Refresh)"
+              @click="resetForm(formRef)"
+            >
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </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 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";
+
+/**
+ * 定义组件选项
+ * 设置组件名称为 SystemRole，方便调试和组件识别
+ */
+defineOptions({
+  name: "Fac-Create"
+});
+
+// 创建表单引用
+const formRef = ref();
+
+const count = ref(0);
+
+const {
+  form,
+  loading,
+  onSearch,
+  resetForm,
+  tagName,
+  handleAvatarSuccess,
+  beforeAvatarUpload
+} = useFacForm();
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</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";
+
+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(true);
+  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 imageUrl = ref("");
+
+  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 !== "image/jpeg") {
+      ElMessage.error("Avatar picture must be JPG format!");
+      return false;
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+      ElMessage.error("Avatar picture size can not exceed 2MB!");
+      return false;
+    }
+    return true;
+  };
+  return {
+    tagName,
+    form,
+    loading,
+    onSearch,
+    resetForm,
+    imageUrl,
+    handleAvatarSuccess,
+    beforeAvatarUpload
+  };
+}

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

+<template>
+  <div class="systems">
+    <h2>fac-list</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/fac-manage/fac-select/index.vue

+<template>
+  <div class="systems">
+    <h2>fac-select</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>