✨ feat: 家具初版

gear-ui3/src/views/product/info/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="产品编号" prop="productCode">
         <el-input v-model="queryParams.productCode" placeholder="请输入产品编号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
@@ -21,25 +21,25 @@
         </el-select>
       </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" size="mini" @click="handleAdd">新增</el-button>
+        <el-button type="primary" plain icon="Plus" size="small" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" size="mini" :disabled="single"
+        <el-button type="success" plain icon="Edit" size="small" :disabled="single"
           @click="handleUpdate">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple"
+        <el-button type="danger" plain icon="Delete" size="small" :disabled="multiple"
           @click="handleDelete">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
+        <el-button type="warning" plain icon="Download" size="small" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -49,18 +49,19 @@
       <el-table-column label="产品编号" align="center" prop="productCode" />
       <el-table-column label="产品名称" align="center" prop="productName" />
       <el-table-column label="负责人" align="center" prop="owner" />
+      <el-table-column label="单位" align="center" prop="unit" />
       <el-table-column label="BOM" align="center">
-        <template slot-scope="scope">
+        <template #default="scope">
           <BomInfoMini :bomId="scope.row.bomId" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-          <el-button size="mini" type="text" icon="Document"
+        <template #default="scope">
+          <el-button size="small" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="small" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button size="small" type="text" icon="Document"
             @click="handleInstallManual(scope.row)">安装说明书</el-button>
-          <el-button size="mini" type="text" icon="DataAnalysis" @click="handleBom(scope.row)">BOM</el-button>
+          <el-button size="small" type="text" icon="DataAnalysis" @click="handleBom(scope.row)">BOM</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -77,8 +78,14 @@
         <el-form-item label="产品名称" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入产品名称" />
         </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="form.unit" placeholder="请输入单位" />
+        </el-form-item>
         <el-form-item label="产品分类" prop="categoryId">
-          <el-input v-model="form.categoryId" placeholder="请输入产品分类" />
+          <!-- <el-tree-select v-model="form.categoryId" :data="categoryList" :props="defaultProps" /> -->
+          <el-select v-model="form.categoryId" placeholder="请选择产品分类">
+            <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
+          </el-select>
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
           <el-input v-model="form.owner" :multiple="false" placeholder="请填写负责人" />
@@ -93,11 +100,18 @@
     <el-dialog title="BOM" @close="bomDialogVisible = false" v-model="bomDialogVisible" width="900px" append-to-body>
       <BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
     </el-dialog>
+
+    <el-dialog title="安装说明书" @close="installManualDialogVisible = false" v-model="installManualDialogVisible" width="900px" append-to-body>
+      <file-upload v-model="form.accessory" />
+      <el-button v-loading="buttonLoading" type="primary" @click="submitInstallManual">提交</el-button>
+      <el-button @click="cancelInstallManual">取消</el-button>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/oa/product";
+import { listProductCategory } from "@/api/oa/productCategory";
 import UserSelect from '@/components/UserSelect';
 import BomPanel from '../components/BomPanel.vue';
 import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
@@ -166,12 +180,33 @@ export default {
       bomDialogVisible: false,
       bomId: undefined,
       itemId: undefined,
+
+      installManualDialogVisible: false,
     };
   },
   created() {
     this.getList();
+    this.getCategoryList();
   },
   methods: {
+    cancelInstallManual() {
+      this.installManualDialogVisible = false;
+    },
+    submitInstallManual() {
+      this.buttonLoading = true;
+      updateProduct(this.form).then(_ => {
+        this.$message.success('提交成功');
+        this.installManualDialogVisible = false;
+        this.getList()
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    },
+    getCategoryList() {
+      listProductCategory().then(response => {
+        this.categoryList = response.data;
+      });
+    },
     /** 查询产品列表 */
     getList() {
       this.loading = true;
@@ -211,7 +246,8 @@ export default {
         createBy: undefined,
         updateTime: undefined,
         updateBy: undefined,
-        type: 'product'
+        type: 'product',
+        accessory: '',
       };
       this.resetForm("form");
     },
@@ -227,6 +263,8 @@ export default {
     },
     handleInstallManual(row) {
       console.log(row);
+      this.form = row;
+      this.installManualDialogVisible = true;
     },
     handleBom(row) {
       this.bomDialogVisible = true;