✨ feat: 家具初版

gear-ui3/src/components/CustomerSelect/index.vue

@@ -1,11 +1,11 @@
 <template>
   <el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
-    <el-option v-for="item in customerList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
+    <el-option v-for="item in customerList" :key="item.customerId" :label="item.name" :value="item.customerId" />
   </el-select>
 </template>
 
 <script>
-  import { listSupplier } from '@/api/oa/supplier';
+  import { listCustomer } from '@/api/wms/customer';
 
   export default {
     name: 'CustomerSelect',
@@ -37,7 +37,7 @@
     methods: {
       remoteSearchCustomer(query) {
         this.customerLoading = true;
-        listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
+        listCustomer({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
           this.customerList = response.rows;
         }).finally(() => {
           this.customerLoading = false;

gear-ui3/src/components/FileUpload/index.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="upload-file">
+  <div class="upload-file" v-loading="loading" element-loading-text="正在获取文件">
     <el-upload
       multiple
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :data="data"
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
@@ -14,226 +13,205 @@
       :headers="headers"
       class="upload-file-uploader"
       ref="fileUpload"
-      v-if="!disabled"
     >
       <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
+      <el-button size="mini" type="primary">选取文件</el-button>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        的文件
+      </div>
     </el-upload>
-    <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip && !disabled">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
-    </div>
+
     <!-- 文件列表 -->
-    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;删除</el-link>
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
         </div>
       </li>
     </transition-group>
   </div>
 </template>
 
-<script setup>
-import { getToken } from "@/utils/auth"
-import Sortable from 'sortablejs'
+<script>
+import { getToken } from "@/utils/auth";
+import { listByIds, delOss } from "@/api/system/oss";
 
-const props = defineProps({
-  modelValue: [String, Object, Array],
-  // 上传接口地址
-  action: {
-    type: String,
-    default: "/common/upload"
-  },
-  // 上传携带的参数
-  data: {
-    type: Object
-  },
-  // 数量限制
-  limit: {
-    type: Number,
-    default: 5
-  },
-  // 大小限制(MB)
-  fileSize: {
-    type: Number,
-    default: 5
-  },
-  // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: {
-    type: Array,
-    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]
-  },
-  // 是否显示提示
-  isShowTip: {
-    type: Boolean,
-    default: true
-  },
-  // 禁用组件（仅查看文件）
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 拖动排序
-  drag: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const { proxy } = getCurrentInstance()
-const emit = defineEmits()
-const number = ref(0)
-const uploadList = ref([])
-const baseUrl = import.meta.env.VITE_APP_BASE_API
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传文件服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() })
-const fileList = ref([])
-const showTip = computed(
-  () => props.isShowTip && (props.fileType || props.fileSize)
-)
-
-watch(() => props.modelValue, val => {
-  if (val) {
-    let temp = 1
-    // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(',')
-    // 然后将数组转为对象数组
-    fileList.value = list.map(item => {
-      if (typeof item === "string") {
-        item = { name: item, url: item }
-      }
-      item.uid = item.uid || new Date().getTime() + temp++
-      return item
-    })
-  } else {
-    fileList.value = []
-    return []
-  }
-},{ deep: true, immediate: true })
-
-// 上传前校检格式和大小
-function handleBeforeUpload(file) {
-  // 校检文件类型
-  if (props.fileType.length) {
-    const fileName = file.name.split('.')
-    const fileExt = fileName[fileName.length - 1]
-    const isTypeOk = props.fileType.indexOf(fileExt) >= 0
-    if (!isTypeOk) {
-      proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`)
-      return false
+export default {
+  name: "FileUpload",
+  props: {
+    // 值
+    modelValue: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", 'png', 'jpg', 'jpeg', 'bmp', 'webp'],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
     }
-  }
-  // 校检文件名是否包含特殊字符
-  if (file.name.includes(',')) {
-    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
-    return false
-  }
-  // 校检文件大小
-  if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
-    if (!isLt) {
-      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
-      return false
-    }
-  }
-  proxy.$modal.loading("正在上传文件，请稍候...")
-  number.value++
-  return true
-}
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      baseUrl: import.meta.env.VITE_APP_BASE_API,
+      uploadFileUrl: import.meta.env.VITE_APP_BASE_API + "/system/oss/upload", // 上传文件服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      loading: false,
+    };
+  },
+  watch: {
+    modelValue: {
+      async handler(val) {
+        if (val) {
+          let temp = 1;
+          // 首先将值转为数组
+          let list;
+          if (Array.isArray(val)) {
+            list = val;
+          } else {
+            this.loading = true;
+            await listByIds(val).then(res => {
+              list = res.data.map(oss => {
+                oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
+                return oss;
+              });
 
-// 文件个数超出
-function handleExceed() {
-  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
-}
-
-// 上传失败
-function handleUploadError(err) {
-  proxy.$modal.msgError("上传文件失败")
-  proxy.$modal.closeLoading()
-}
-
-// 上传成功回调
-function handleUploadSuccess(res, file) {
-  if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName })
-    uploadedSuccessfully()
-  } else {
-    number.value--
-    proxy.$modal.closeLoading()
-    proxy.$modal.msgError(res.msg)
-    proxy.$refs.fileUpload.handleRemove(file)
-    uploadedSuccessfully()
-  }
-}
-
-// 删除文件
-function handleDelete(index) {
-  fileList.value.splice(index, 1)
-  emit("update:modelValue", listToString(fileList.value))
-}
-
-// 上传结束处理
-function uploadedSuccessfully() {
-  if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
-    uploadList.value = []
-    number.value = 0
-    emit("update:modelValue", listToString(fileList.value))
-    proxy.$modal.closeLoading()
-  }
-}
-
-// 获取文件名称
-function getFileName(name) {
-  // 如果是url那么取最后的名字 如果不是直接返回
-  if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1)
-  } else {
-    return name
-  }
-}
-
-// 对象转成指定字符串分隔
-function listToString(list, separator) {
-  let strs = ""
-  separator = separator || ","
-  for (let i in list) {
-    if (list[i].url) {
-      strs += list[i].url + separator
-    }
-  }
-  return strs != '' ? strs.substr(0, strs.length - 1) : ''
-}
-
-// 初始化拖拽排序
-onMounted(() => {
-  if (props.drag && !props.disabled) {
-    nextTick(() => {
-      const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
-      Sortable.create(element, {
-        ghostClass: 'file-upload-darg',
-        onEnd: (evt) => {
-          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
-          fileList.value.splice(evt.newIndex, 0, movedItem)
-          emit('update:modelValue', listToString(fileList.value))
+            }).finally(() => {
+              this.loading = false;
+            })
+          }
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            item = { name: item.name, url: item.url, ossId: item.ossId };
+            item.uid = item.uid || new Date().getTime() + temp++;
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
         }
-      })
-    })
-  }
-})
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        const fileName = file.name.split('.');
+        const fileExt = fileName[fileName.length - 1];
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+        if (!isTypeOk) {
+          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+          return false;
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传文件，请稍候...");
+      this.number++;
+      return true;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
+        this.uploadedSuccessfully();
+      } else {
+        this.number--;
+        this.$modal.closeLoading();
+        this.$modal.msgError(res.msg);
+        this.$refs.fileUpload.handleRemove(file);
+        this.uploadedSuccessfully();
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      let ossId = this.fileList[index].ossId;
+      delOss(ossId);
+      this.fileList.splice(index, 1);
+      this.$emit("update:modelValue", this.listToString(this.fileList));
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("update:modelValue", this.listToString(this.fileList));
+        this.$emit("success", this.fileList);
+        this.$modal.closeLoading();
+      }
+    },
+    // 获取文件名称
+    getFileName(name) {
+      // 如果是url那么取最后的名字 如果不是直接返回
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1);
+      } else {
+        return name;
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].ossId + separator;
+      }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
+};
 </script>
+
 <style scoped lang="scss">
-.file-upload-darg {
-  opacity: 0.5;
-  background: #c8ebfb;
-}
 .upload-file-uploader {
   margin-bottom: 5px;
 }
@@ -242,7 +220,6 @@ onMounted(() => {
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
-  transition: none !important;
 }
 .upload-file-list .ele-upload-list__item-content {
   display: flex;

gear-ui3/src/components/GearList/index.vue

@@ -257,7 +257,7 @@ export default {
 .klp-list-item {
   padding: 6px 8px;
   margin-bottom: 6px;
-  border-bottom: 1px solid #111;
+  border-bottom: 1px solid #fff;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
@@ -270,7 +270,7 @@ export default {
 /* 列表项选中状态（左侧高亮边框+背景色） */
 .klp-list-item.active {
   border-left: 3px solid #2bf;
-  background-color: #222;
+  background-color: #fff;
 }
 
 /* 列表标题区域（占满中间空间，让操作按钮靠右） */
@@ -284,7 +284,7 @@ export default {
 
 /* 标题前置标签样式 */
 .klp-list-title .title-label {
-  color: #ddd;
+  color: #232323;
   margin-right: 6px;
   font-size: 13px;
   white-space: nowrap; /* 标签不换行 */
@@ -293,7 +293,7 @@ export default {
 
 /* 标题内容样式（溢出省略） */
 .klp-list-title .title-value {
-  color: #ddd;
+  color: #232323;
   font-weight: 500;
   font-size: 14px;
   white-space: nowrap; /* 禁止换行 */

gear-ui3/src/components/GearTable/TableActionToolbar.vue

@@ -1,179 +0,0 @@
-<template>
-  <el-col :span="12" class="table-action-toolbar">
-    <el-button v-if="tools.includes('fullScreen')" size="mini" icon="el-icon-full-screen" circle
-      @click="handleFullScreen"></el-button>
-    <el-button v-if="tools.includes('refresh')" size="mini" icon="el-icon-refresh" circle
-      @click="handleRefresh"></el-button>
-    <el-button v-if="tools.includes('export')" size="mini" icon="el-icon-download" circle
-      @click="handleExport"></el-button>
-    <el-button v-if="tools.includes('print')" size="mini" icon="el-icon-printer" circle
-      @click="handlePrint"></el-button>
-
-    <!-- 设置按钮和弹出框 -->
-    <el-dropdown v-if="tools.includes('setting')" trigger="click" :hide-on-click="false" style="margin-left: 10px;">
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
-        <el-button size="mini" circle icon="el-icon-menu" />
-      </el-tooltip>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="column in columns" :key="column.prop">
-          <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </el-col>
-</template>
-
-<script>
-import XLSX from 'xlsx';
-import { saveAs } from 'file-saver';
-
-export default {
-  name: 'TableActionToolbar',
-  props: {
-    // 控制显示哪些工具按钮
-    tools: {
-      type: Array,
-      required: true
-    },
-    // 表格整体ref，用于获取DOM
-    tableRef: {
-      type: Object,
-      default: null
-    },
-    // 表格数据，用于导出
-    tableData: {
-      type: Array,
-      default: () => []
-    },
-    // 表格列定义，用于导出和设置
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    // 导出文件名
-    exportFileName: {
-      type: String,
-      default: '表格数据'
-    }
-  },
-  computed: {
-    _columns: {
-      get() {
-        console.log(this.columns);
-        return this.columns.filter(col => col.show);
-      },
-      set(value) {
-        this.$emit('columnChange', value);
-      }
-    }
-  },
-  methods: {
-    // 全屏处理
-    handleFullScreen() {
-      const tableEl = this.tableRef?.$el;
-      if (!tableEl) {
-        this.$emit('fullScreen');
-        return;
-      }
-
-      if (!document.fullscreenElement) {
-        tableEl.requestFullscreen().catch(err => {
-          this.$message.error(`全屏请求失败: ${err.message}`);
-        });
-      } else {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        }
-      }
-    },
-
-    // 刷新处理
-    handleRefresh() {
-      this.$emit('refresh');
-    },
-
-    // 导出Excel处理
-    handleExport() {
-      if (this.tableData.length === 0) {
-        this.$message.warning('没有数据可导出');
-        return;
-      }
-
-      // 准备导出数据 - 只包含列定义中指定的字段
-      const exportData = this.tableData.map(row => {
-        const formattedRow = {};
-        this.columns.forEach(col => {
-          if (col.prop && !col.hidden) {
-            // 使用列的label作为表头，prop对应的数据作为值
-            formattedRow[col.label || col.prop] = row[col.prop];
-          }
-        });
-        return formattedRow;
-      });
-
-      // 创建工作簿和工作表
-      const worksheet = XLSX.utils.json_to_sheet(exportData);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
-
-      // 生成Excel文件并下载
-      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
-      this.saveExcelFile(excelBuffer, this.exportFileName);
-    },
-
-    // 保存Excel文件
-    saveExcelFile(buffer, fileName) {
-      const blob = new Blob([buffer], { type: 'application/octet-stream' });
-      saveAs(blob, `${fileName}_${new Date().toLocaleDateString()}.xlsx`);
-    },
-
-    // 打印处理
-    handlePrint() {
-      this.$emit('print');
-    },
-
-    // 列显示状态变化处理
-    handleColumnChange(checked) {
-      // 找出所有列的显示状态变化
-      const columnChanges = this.visibleColumns.map(col => ({
-        prop: col.prop,
-        hidden: !checked.includes(col.prop)
-      }));
-
-      // 触发事件通知父组件更新列显示状态
-      this.$emit('columnChange', columnChanges);
-
-      // 刷新表格布局
-      if (this.tableRef && this.tableRef.doLayout) {
-        this.tableRef.doLayout();
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.table-action-toolbar {
-  text-align: left;
-  display: flex;
-  gap: 4px;
-}
-
-/* 按钮间距 */
-::v-deep .el-button {
-  margin-left: 4px;
-}
-
-.column-setting {
-  padding: 5px 0;
-}
-
-::v-deep .el-checkbox {
-  display: block;
-  margin-bottom: 8px;
-}
-
-::v-deep .el-checkbox:last-child {
-  margin-bottom: 0;
-}
-</style>

gear-ui3/src/components/GearTable/index.vue

@@ -6,30 +6,6 @@
       <p class="loading-text">{{ loadingText || "加载中..." }}</p>
     </div>
 
-    <el-row>
-      <!-- 自定义操作按钮，左对齐 -->
-      <el-col :span="12">
-        <slot name='actionRow'>
-          <!-- 分页 -->
-          <span style="color: #ccc;"></span>
-        </slot>
-      </el-col>
-      
-      <!-- 通用操作工具栏 -->
-      <TableActionToolbar 
-        :tools="actionTool"
-        :table-ref="getTableInstance()"
-        :table-data="tableData"
-        :columns="columns"
-        :export-file-name="exportFileName"
-        @fullScreen="handleFullScreen"
-        @refresh="handleRefresh"
-        @export="handleExport"
-        @print="handlePrint"
-        @columnChange="updateColumnsVisibility"
-      />
-    </el-row>
-
     <!-- 原生 Table 核心 -->
     <el-table
       :ref="tableRef"
@@ -105,14 +81,12 @@
 <script>
 import ColumnRender from './ColumnRender.vue';  
 import Eclipse from './renderer/eclipse.vue';
-import TableActionToolbar from './TableActionToolbar.vue';
 
 export default {
   name: "KLPTable",
   components: {
     ColumnRender,
     Eclipse,
-    TableActionToolbar
   },
   props: {
     // 基础扩展属性

gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue

@@ -5,8 +5,8 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
+          size="small"
           @click="handleAdd"
         >新增</el-button>
       </el-col>
@@ -14,8 +14,8 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
+          size="small"
           :disabled="single"
           @click="handleUpdate"
         >修改</el-button>
@@ -24,8 +24,8 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
+          size="small"
           :disabled="multiple"
           @click="handleDelete"
         >删除</el-button>
@@ -34,8 +34,8 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
+          size="small"
           @click="handleExport"
         >导出</el-button>
       </el-col>
@@ -48,17 +48,17 @@
       <el-table-column label="属性值" align="center" prop="attrValue" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
+            size="small"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
-            size="mini"
+            size="small"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -74,7 +74,7 @@
     />
 
     <!-- 添加或修改BOM 明细，存放属性–值对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="属性名称" prop="attrKey">
           <el-input v-model="form.attrKey" placeholder="请输入属性名称" />

gear-ui3/src/components/ProductSelect/index.vue

@@ -1,13 +1,24 @@
 <template>
   <span>
-    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
-      @change="onChange" :value-key="'productId'">
+    <el-select 
+      v-model="selected" 
+      :placeholder="placeholder" 
+      :disabled="disabled" 
+      filterable 
+      clearable
+      @change="onChange" 
+      value-key="productId"
+    >
       <template #empty>
-        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到产品，点击添加</el-button>
+        <el-button v-if="canAdd" @click="add" icon="Plus">未搜索到产品，点击添加</el-button>
         <div v-else style="padding: 10px;">未搜索到产品</div>
       </template>
-      <el-option v-for="item in productOptions" :key="item.productId"
-        :label="`${item.productName}（${item.productCode}）`" :value="item.productId">
+      <el-option 
+        v-for="item in productOptions" 
+        :key="item.productId"
+        :label="`${item.productName}（${item.productCode}）`" 
+        :value="item.productId"
+      >
         <div class="option-label">
           <span class="product-name">{{ item.productName }}</span>
           <span class="product-code">{{ item.productCode }}</span>
@@ -15,15 +26,25 @@
       </el-option>
     </el-select>
 
-    <el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加产品" width="700px" append-to-body>
+    <el-dialog 
+      v-if="canAdd" 
+      v-model="addDialogVisible" 
+      title="添加产品" 
+      width="700px" 
+      append-to-body
+    >
       <el-steps align-center :active="activeStep" finish-status="success">
-        <!-- 新增产品的步骤 -->
         <el-step title="创建产品"></el-step>
-        <!-- 创建BOM的步骤 -->
         <el-step title="填写BOM信息"></el-step>
       </el-steps>
 
-      <el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
+      <el-form 
+        ref="formRef" 
+        v-if="activeStep === 0" 
+        :model="addForm" 
+        :rules="rules" 
+        label-width="120px"
+      >
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="产品编号" prop="productCode">
@@ -37,7 +58,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="负责人" prop="owner">
-              <el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
+              <el-input v-model="addForm.owner" placeholder="请填写负责人" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -47,132 +68,164 @@
           </el-col>
         </el-row>
       </el-form>
-      <div v-if="activeStep === 0" slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">创建产品</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template v-if="activeStep === 0" #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">创建产品</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
 
-      <BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
+      <BomPanel 
+        v-if="activeStep === 1" 
+        :id="bomId" 
+        :itemId="itemId" 
+        :type="addForm.type" 
+        @addBom="handleBom" 
+      />
     </el-dialog>
   </span>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
 import { listProduct, addProduct } from '@/api/oa/product';
 import BomPanel from './BomPanel/index.vue';
+import { ElMessage } from 'element-plus';
 
-export default {
-  name: 'ProductSelect',
-  props: {
-    value: [String, null],
-    disabled: Boolean,
-    placeholder: {
-      type: String,
-      default: '请选择产品'
-    },
-    canAdd: {
-      default: false,
-      type: Boolean
-    },
+// 定义组件属性（适配Vue3 v-model规范）
+const props = defineProps({
+  // 关键修改：使用modelValue接收v-model绑定值
+  modelValue: {
+    type: [String, null],
+    default: null
   },
-  components: {
-    BomPanel
+  disabled: {
+    type: Boolean,
+    default: false
   },
-  data() {
-    return {
-      productOptions: [],
-      selected: this.value,
-      addForm: {
-        productCode: undefined,
-        productName: undefined,
-        owner: undefined,
-        unit: undefined,
-        type: 'product'
-      },
-      addDialogVisible: false,
-      rules: {
-        productCode: [
-          { required: true, message: "产品编号不能为空", trigger: "blur" }
-        ],
-        productName: [
-          { required: true, message: "产品名称不能为空", trigger: "blur" }
-        ],
-        owner: [
-          { required: true, message: "负责人不能为空", trigger: "blur" }
-        ],
-      },
-      buttonLoading: false,
-      itemId: undefined,
-      activeStep: 0,
-      bomId: undefined,
-    };
+  placeholder: {
+    type: String,
+    default: '请选择产品'
   },
-  watch: {
-    value(val) {
-      this.selected = val;
-    },
-    selected(val) {
-      this.$emit('input', val);
-    }
+  canAdd: {
+    type: Boolean,
+    default: false
   },
-  created() {
-    this.getProductOptions();
+});
+
+// 定义组件事件
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 响应式数据
+const productOptions = ref([]);
+const addDialogVisible = ref(false);
+const buttonLoading = ref(false);
+const itemId = ref(undefined);
+const activeStep = ref(0);
+const bomId = ref(undefined);
+const formRef = ref(null);
+
+// 计算属性实现双向绑定（适配Vue3规范）
+const selected = computed({
+  get() {
+    return props.modelValue; // 从modelValue获取值
   },
-  methods: {
-    getProductOptions() {
-      listProduct({ pageNum: 1, pageSize: 1000, type: 'product' }).then(res => {
-        this.productOptions = res.rows || [];
-      });
-    },
-    onChange(val) {
-      // 通过val找到item
-      const product = this.productOptions.find(p => p.productId === val);
-      this.$emit('change', product);
-    },
-    add() {
-      this.addDialogVisible = true;
-      this.addForm = {
-        productCode: undefined,
-        productName: undefined,
-        owner: undefined,
-        unit: undefined,
-        type: 'product'
-      };
-      this.bomId = undefined;
-      this.itemId = undefined;
-    },
-    handleBom(bom) {
-      this.bomId = bom.bomId;
-    },
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          // console.log(this.addForm);
-          addProduct(this.addForm).then(res => {
-            this.$modal && this.$modal.msgSuccess("创建产品成功");
-            this.getProductOptions();
-            console.log(res);
-            this.itemId = res.productId;
-            this.$emit('input', res.productId);
-            this.activeStep = 1;
-          }).finally(() => {
-            this.buttonLoading = false;
-          });
-        }
-      });
-    },
-    cancel() {
-      this.addDialogVisible = false;
-      this.addForm = {
-        productCode: undefined,
-        productName: undefined,
-        owner: undefined,
-        unit: undefined,
-        type: 'product'
-      };
-    }
+  set(val) {
+    emit('update:modelValue', val); // 通过update:modelValue事件更新值
   }
+});
+
+// 表单数据
+const addForm = reactive({
+  productCode: undefined,
+  productName: undefined,
+  owner: undefined,
+  unit: undefined,
+  type: 'product'
+});
+
+// 表单验证规则
+const rules = reactive({
+  productCode: [
+    { required: true, message: "产品编号不能为空", trigger: "blur" }
+  ],
+  productName: [
+    { required: true, message: "产品名称不能为空", trigger: "blur" }
+  ],
+  owner: [
+    { required: true, message: "负责人不能为空", trigger: "blur" }
+  ],
+});
+
+// 组件挂载时获取产品列表
+onMounted(() => {
+  getProductOptions();
+});
+
+// 获取产品选项列表
+const getProductOptions = () => {
+  listProduct({ pageNum: 1, pageSize: 1000, type: 'product' }).then(res => {
+    productOptions.value = res.rows || [];
+  });
+};
+
+// 选择变化时触发
+const onChange = (val) => {
+  const product = productOptions.value.find(p => p.productId === val);
+  emit('change', product);
+};
+
+// 打开添加产品对话框
+const add = () => {
+  addDialogVisible.value = true;
+  // 重置表单
+  Object.assign(addForm, {
+    productCode: undefined,
+    productName: undefined,
+    owner: undefined,
+    unit: undefined,
+    type: 'product'
+  });
+  bomId.value = undefined;
+  itemId.value = undefined;
+  activeStep.value = 0;
+};
+
+// 处理BOM信息
+const handleBom = (bom) => {
+  bomId.value = bom.bomId;
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value.validate(valid => {
+    if (valid) {
+      buttonLoading.value = true;
+      addProduct(addForm).then(res => {
+        ElMessage.success("创建产品成功");
+        getProductOptions();
+        itemId.value = res.productId;
+        // 关键修改：使用update:modelValue更新v-model绑定值
+        emit('update:modelValue', res.productId);
+        activeStep.value = 1;
+      }).finally(() => {
+        buttonLoading.value = false;
+      });
+    }
+  });
+};
+
+// 取消操作
+const cancel = () => {
+  addDialogVisible.value = false;
+  // 重置表单
+  Object.assign(addForm, {
+    productCode: undefined,
+    productName: undefined,
+    owner: undefined,
+    unit: undefined,
+    type: 'product'
+  });
 };
 </script>
 

gear-ui3/src/components/Renderer/BomInfoMini.vue

@@ -6,14 +6,13 @@
     </el-tooltip>
   </div>
   <div v-else>
-    <el-empty description="暂无BOM信息" />
+    无
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue';
 import useProductStore from '@/store/modules/product';
-import { ElEmpty } from 'element-plus';
 
 // 定义组件props
 const props = defineProps({

gear-ui3/src/components/Renderer/ProductInfo.vue

@@ -2,76 +2,80 @@
   <div>
     <span class="product-name" @click="clickHandle">
       <slot name="default" :product="product">
-        {{ product && product.productName ? product.productName : '--' }}
+        {{ product?.productName || '--' }}
       </slot>
     </span>
     <el-dialog 
-      :visible="showDetail" 
-      @close="showDetail = false" 
-      :title="product && product.productName ? product.productName : '--' " 
+      v-model="showDetail" 
+      @close="handleClose" 
+      :title="product?.productName || '--'" 
       width="500px"
       append-to-body
     >
       <el-descriptions :column="1" border>
         <el-descriptions-item label="产品ID">
-          {{ product.productId || '--' }}
+          {{ product?.productId || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="产品名称">
-          {{ product.productName || '--' }}
+          {{ product?.productName || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="产品编码">
-          {{ product.productCode || '--' }}
+          {{ product?.productCode || '--' }}
         </el-descriptions-item>
       </el-descriptions>
-      <BomInfo :bomId="product.bomId" />
+      <BomInfo :bomId="product?.bomId" />
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex';
+<script setup>
+import { ref, watch, computed } from 'vue';
+import useProductStore from '@/store/modules/product';
 import BomInfo from './BomInfo.vue';
 
-export default {
-  name: 'ProductInfo',
-  components: {
-    BomInfo
+// 定义组件属性
+const props = defineProps({
+  productId: {
+    type: [String, Number],
+    required: true
   },
-  props: {
-    productId: {
-      type: [String, Number],
-      required: true
-    },
-  },
-  data() {
-    return {
-      showDetail: false,
-      product: {},
-    };
-  },
-  computed: {
-    ...mapState({
-      productMap: state => state.category.productMap
-    }),
-  },
-  methods: {
-    clickHandle() {
-      this.showDetail = true;
-    }
-  },
-  watch: {
-    productId: {
-      handler(newVal) {
-        if (!newVal) {
-          this.product = {};
-        }
-        const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
-        this.product = res;
-      },
-      immediate: true
-    }
-  }
+});
+
+// 状态管理
+const productStore = useProductStore();
+
+// 响应式数据
+const showDetail = ref(false);
+const product = ref({});
+
+// 计算属性 - 获取产品映射表
+const productMap = computed(() => {
+  return productStore.productMap;
+});
+
+// 点击处理函数
+const clickHandle = () => {
+  showDetail.value = true;
 };
+
+// 关闭对话框处理
+const handleClose = () => {
+  showDetail.value = false;
+};
+
+// 监听productId变化，更新产品信息
+watch(
+  () => props.productId,
+  (newVal) => {
+    console.log('newVal', newVal, productMap.value);
+    if (!newVal) {
+      product.value = {};
+      return;
+    }
+    product.value = productMap.value[newVal] || {};
+  },
+  { immediate: true } // 立即执行一次
+);
 </script>
 
 <style scoped>
@@ -85,4 +89,4 @@ export default {
 :deep(.el-descriptions) {
   margin-top: -10px;
 }
-</style>
+</style>

gear-ui3/src/components/VendorSelect/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-select 
+    remote 
+    clearable 
+    filterable 
+    v-model="_value" 
+    :remote-method="remoteSearchVendor" 
+    :loading="vendorLoading" 
+    placeholder="请选择供应商"
+  >
+    <el-option v-for="item in vendorList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
+  </el-select>
+</template>
+
+<script>
+import { listSupplier } from "@/api/oa/supplier";
+
+export default {
+  name: "VendorSelect",
+  data() {
+    return {
+      vendorList: [],
+      vendorLoading: false,
+    }
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      }
+    }
+  },
+  mounted() {
+    this.remoteSearchVendor("");
+  },
+  methods: {
+    remoteSearchVendor(query) {
+      this.vendorLoading = true;
+      listSupplier({
+        pageNum: 1,
+        pageSize: 20,
+        name: query
+      }).then(response => {
+        this.vendorList = response.rows;
+        this.vendorLoading = false;
+      });
+    }
+  }
+}
+</script>