瀏覽代碼

修改产品部分

yangg 6 月之前
父節點
當前提交
c7199a9b4d

+ 58 - 0
ui/src/api/ProductMent/product.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+// 产品规格
+export function getDcSpecList(query) {
+    return request({
+      url: '/spec/getDcSpecList',
+      method: 'get',
+      params: query
+    })
+  }
+
+  /* 添加内容 */
+
+  export function addProduct(data) {
+    return request({
+      url: '/product/add',
+      method: 'post',
+      data
+    })
+  }
+
+  /* 产品列表 */
+
+  export function productList(query) {
+    return request({
+      url: '/product/list',
+      method: 'get',
+      params: query
+    })
+  }
+
+  /* 获取产品信息/getInfo/{dcp_id} */
+
+  export function getInfo(query) {
+    return request({
+      url: `/product/getInfo/${query}`,
+      method: 'get'
+    })
+  }
+
+  /* 编辑产品 */
+
+  export function editProduct(data) {
+    return request({
+      url: '/product/edit',
+      method: 'post',
+      data
+    })
+  }
+
+  /* 删除产品 */
+
+  export function deleteProduct(data) {
+    return request({
+      url: `/product/delete/${data}`,
+      method: 'get'
+    })
+  }

+ 50 - 61
ui/src/views/ProductMent/ProductManagement.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-management">
     <!-- 左侧产品分类 -->
-    <div class="category-sidebar">
+    <!-- <div class="category-sidebar">
       <div class="category-header">
         <span>请选择产品分类</span>
         <el-button type="primary" size="small" @click="handleAddCategory"
@@ -19,7 +19,7 @@
           </span>
         </span>
       </el-tree>
-    </div>
+    </div> -->
 
     <!-- 右侧产品列表 -->
     <div class="product-content">
@@ -28,26 +28,24 @@
         <div class="search-area">
           <el-input
             v-model="searchKeyword"
-            placeholder="请输入关键字搜索"
+            placeholder="请输入产品应用编号"
             class="search-input"
+            @keyup.enter.native="handleSearch"
           >
-            <el-button slot="append" icon="el-icon-search"></el-button>
+            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
           </el-input>
-          <el-button type="primary" @click="handleAddProduct"
-            >新建产品</el-button
-          >
         </div>
+        <el-button type="primary" @click="handleAddProduct">新建产品</el-button>
       </div>
 
       <el-table :data="productList">
-        <el-table-column prop="oaNumber" label="OA编号" />
-        <el-table-column prop="productCode" label="产品编号" />
-        <el-table-column prop="productName" label="产品名称" />
-        <el-table-column prop="description" label="产品描述" />
-        <el-table-column prop="productType" label="产品型号" />
-        <el-table-column prop="length" label="长宽比" />
+        <el-table-column prop="dcp_oa_code" label="OA编号" />
+        <el-table-column prop="dcp_p_no" label="产品应用编号" />
+        <el-table-column prop="dcp_name" label="产品名称" />
+        <el-table-column prop="dcp_model" label="产品类型" />
+        <!--  <el-table-column prop="length" label="长宽比" />
         <el-table-column prop="resolution" label="刷新率" />
-        <el-table-column prop="screenMaterial" label="屏幕材质" />
+        <el-table-column prop="screenMaterial" label="屏幕材质" /> -->
         <el-table-column label="操作" width="200">
           <template slot-scope="scope">
             <el-button size="mini" @click="handleEditProduct(scope.row)"
@@ -107,7 +105,7 @@
         <el-form-item label="OA编号">
           <el-input v-model="productForm.oaNumber"></el-input>
         </el-form-item>
-        <el-form-item label="产品编号">
+        <el-form-item label="产品应用编号">
           <el-input v-model="productForm.productCode"></el-input>
         </el-form-item>
         <el-form-item label="产品名称">
@@ -141,6 +139,7 @@
 </template>
   
   <script>
+import { productList, deleteProduct } from "@/api/ProductMent/product";
 export default {
   name: "ProductManagement",
   data() {
@@ -176,18 +175,7 @@ export default {
           ],
         },
       ],
-      productList: [
-        {
-          oaNumber: "12345668",
-          productCode: "DLP11443",
-          productName: "DLP高级拼接屏",
-          description: "",
-          productType: "",
-          length: "",
-          resolution: "",
-          screenMaterial: "",
-        },
-      ],
+      productList: [],
       // 添加对话框控制变量
       categoryDialogVisible: false,
       productDialogVisible: false,
@@ -211,7 +199,7 @@ export default {
         categoryId: null,
       },
 
-      // 当前选中的
+      // 当前选中的��
       currentCategory: null,
 
       // 分页参数
@@ -242,17 +230,18 @@ export default {
     // 获取产品列表
     async fetchProductList() {
       try {
-        // const params = {
-        //   categoryId: this.currentCategory?.id,
-        //   keyword: this.searchKeyword,
-        //   page: this.pagination.currentPage,
-        //   pageSize: this.pagination.pageSize
-        // }
-        // const { data, total } = await this.$api.product.getList(params)
-        // this.productList = data
-        // this.pagination.total = total
-        // 模拟API调用
-        console.log("获取产品列表");
+        // 添加分页参数
+        const params = {
+          pageNum: this.pagination.currentPage,
+          pageSize: this.pagination.pageSize,
+          // 可以添加搜索关键字
+          dcp_p_no: this.searchKeyword,
+        };
+
+        productList(params).then((res) => {
+          this.productList = res.rows;
+          this.pagination.total = res.total; // 设置总数
+        });
       } catch (error) {
         this.$message.error("获取产品列表失败");
       }
@@ -316,26 +305,20 @@ export default {
 
     // 产品相关方法
     handleAddProduct() {
-       this.$router.push("ProductMent/newProduct/index")
-     /*  this.dialogType = "add";
-      this.productForm = {
-        oaNumber: "",
-        productCode: "",
-        productName: "",
-        description: "",
-        productType: "",
-        length: "",
-        resolution: "",
-        screenMaterial: "",
-        categoryId: this.currentCategory?.id,
-      };
-      this.productDialogVisible = true; */
+      this.$router.push({
+        path: "/cpk/ProductMent/newProduct/index",
+        query: { title: "新建产品" }, // 添加标题参数
+      });
     },
     /* 编辑产品 */
     handleEditProduct(row) {
-      this.dialogType = "edit";
-      this.productForm = { ...row };
-      this.productDialogVisible = true;
+      this.$router.push({
+        path: "/cpk/ProductMent/newProduct/editor",
+        query: {
+          id: row.dcp_id,
+          title: "编辑产品", // 添加标题参数
+        },
+      });
     },
 
     async handleProductSubmit() {
@@ -358,16 +341,17 @@ export default {
         this.$message.error("操作失败");
       }
     },
-    /* 删除产列表 */
+    /* 删除产��列表 */
     async handleDeleteProduct(row) {
       try {
         await this.$confirm("确认删除该产品吗?删除后无法恢复", "提示", {
           type: "warning",
         });
 
-        // await this.$api.product.delete(row.id)
+        // 调用删除API
+        await deleteProduct(row.dcp_id);
         this.$message.success("删除成功");
-        this.fetchProductList();
+        this.fetchProductList(); // 重新加载列表
       } catch (error) {
         if (error !== "cancel") {
           this.$message.error("删除失败");
@@ -377,7 +361,11 @@ export default {
 
     // 搜索和分页
     handleSearch() {
-      this.pagination.currentPage = 1;
+      if (!this.searchKeyword.trim()) {
+        this.$message.warning('请输入搜索关键词');
+        return;
+      }
+      this.pagination.currentPage = 1; // 重置到第一页
       this.fetchProductList();
     },
 
@@ -404,6 +392,7 @@ export default {
 
 .category-sidebar {
   width: 250px;
+  height: 91vh;
   border-right: 1px solid #ebeef5;
   padding: 20px;
 }
@@ -427,7 +416,7 @@ export default {
 .search-area {
   display: flex;
   justify-content: space-between;
-  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .search-input {

+ 899 - 0
ui/src/views/ProductMent/newProduct/editor.vue

@@ -0,0 +1,899 @@
+<template>
+    <div class="product-container">
+      <el-form
+        :model="productForm"
+        :rules="rules"
+        ref="productForm"
+        label-width="100px"
+      >
+        <div class="section-title">产品基本信息</div>
+        <!-- 使用 el-row 和 el-col 创建三列布局 -->
+        <el-row :gutter="20">
+          <!-- 第一列 -->
+          <el-col :span="8">
+            <el-form-item label="OA编号">
+              <el-input v-model="productForm.dcp_oa_code" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="工程" prop="wr_id">
+              <el-select v-model="productForm.wr_id" placeholder="请选择">
+                <el-option
+                  v-for="item in projectTypes"
+                  :key="item.wkId"
+                  :label="item.wkName"
+                  :value="item.wkId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="公开价">
+              <el-input
+                v-model="productForm.dcp_price1"
+                type="number"
+                placeholder="请输入公开价"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="标准价">
+              <el-input
+                v-model="productForm.dcp_price3"
+                type="number"
+                placeholder="请输入标准价"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+  
+          <!-- 第二列 -->
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input v-model="productForm.dcp_name" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="系统类别" prop="sys_no">
+              <el-select v-model="productForm.sys_no" placeholder="请选择">
+                <el-option
+                  v-for="item in systemTypes"
+                  :key="item.sysId"
+                  :label="item.sysName"
+                  :value="item.sysId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="销售价">
+              <el-input
+                v-model="productForm.dcp_price2"
+                type="number"
+                placeholder="请输入销售价"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="大区价">
+              <el-input
+                v-model="productForm.dcp_price4"
+                type="number"
+                placeholder="请输入大区价"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+  
+          <!-- 第三列 -->
+          <el-col :span="8">
+            <el-form-item label="产品应用编号">
+              <el-input v-model="productForm.dcp_p_no" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="产品类型">
+              <el-input v-model="productForm.dcp_model" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="产品区分代码">
+              <el-input v-model="productForm.dcp_diff" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="成本价">
+              <el-input
+                v-model="productForm.dcp_cost_price"
+                type="number"
+                placeholder="请输入成本价"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+  
+        <!-- 新增规格表单部分 -->
+        <el-collapse v-model="activeCollapse">
+          <el-collapse-item title="批量添加功能" name="1">
+            <div class="section-title" style="margin: 15px 0 0 0">
+              产品规格及型号
+            </div>
+            <div class="specs-form">
+              <el-form-item label="产品规格:">
+                <div class="product-specs">
+                  <el-tag
+                    v-for="(item, index) in productSpec"
+                    :key="`tag_${item.ps_no}_${index}`"
+                    type="warning"
+                    effect="plain"
+                  >
+                    {{ item.psp_name }}
+                  </el-tag>
+                  <el-button
+                    type="text"
+                    icon="el-icon-plus"
+                    @click="showSpecDialog"
+                  ></el-button>
+                </div>
+              </el-form-item>
+  
+              <!-- 修改规格表单部分 -->
+              <div class="specs-form">
+                <el-form-item
+                  v-for="(spec, index) in productSpec"
+                  :key="`spec_${spec.ps_no}_${index}`"
+                  :label="spec.psp_name + ':'"
+                >
+                  <!-- 长宽比输入处理 -->
+                  <template v-if="spec.psp_name.includes('长宽比')">
+                    <el-input
+                      v-model="specForm[spec.ps_no].value1"
+                      style="width: 200px"
+                      placeholder="如:19"
+                      @input="(val) => handleSpecInput(spec.ps_no, 'value1', val)"
+                    ></el-input>
+                    <span class="ratio-separator">:</span>
+                    <el-input
+                      v-model="specForm[spec.ps_no].value2"
+                      style="width: 200px"
+                      placeholder="如:6"
+                      @input="(val) => handleSpecInput(spec.ps_no, 'value2', val)"
+                    ></el-input>
+                  </template>
+  
+                  <!-- 其他规格输入处理 -->
+                  <template v-else>
+                    <!-- 单选框 -->
+                    <el-select
+                      v-if="spec.psp_type === '单选'"
+                      v-model="specForm[spec.ps_no]"
+                      style="width: 200px"
+                      placeholder="请选择"
+                      @change="(val) => handleSpecInput(spec.ps_no, null, val)"
+                    >
+                      <el-option
+                        v-for="(value, index) in spec.psp_value.split(',')"
+                        :key="`option_${spec.ps_no}_${index}`"
+                        :label="value"
+                        :value="value"
+                      />
+                    </el-select>
+  
+                    <!-- 多选框 -->
+                    <el-select
+                      v-else-if="spec.psp_type === '多选'"
+                      v-model="specForm[spec.ps_no]"
+                      multiple
+                      style="width: 200px"
+                      placeholder="请选择"
+                      @change="(val) => handleSpecInput(spec.ps_no, null, val)"
+                    >
+                      <el-option
+                        v-for="(value, index) in spec.psp_value.split(',')"
+                        :key="`option_${spec.ps_no}_${index}`"
+                        :label="value"
+                        :value="value"
+                      />
+                    </el-select>
+  
+                    <!-- 输入框 -->
+                    <el-input
+                      v-else
+                      v-model="specForm[spec.ps_no]"
+                      style="width: 200px"
+                      placeholder="请输入"
+                      @input="(val) => handleSpecInput(spec.ps_no, null, val)"
+                    ></el-input>
+                  </template>
+                </el-form-item>
+              </div>
+  
+              <div class="button-group">
+                <el-button type="primary" @click="generateSpec">生成</el-button>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+  
+        <!-- 规格列表表格 -->
+        <el-table
+          ref="specTable"
+          :data="specsList"
+          border
+          style="width: 100%; margin-top: 20px"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="dcp_oa_code" label="OA编号" />
+          <el-table-column prop="dcp_p_no" label="产品应用编号" />
+          <el-table-column prop="dcp_name" label="产品名称" />
+          <el-table-column prop="dcp_model" label="产品型号" />
+          <el-table-column label="长宽比">
+            <template slot-scope="scope">
+              {{ scope.row["长宽比"] || "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column label="刷新率">
+            <template slot-scope="scope">
+              {{ scope.row["刷新率"] || "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column label="屏幕材质">
+            <template slot-scope="scope">
+              {{ scope.row["屏幕材质"] || "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150">
+            <template slot-scope="scope">
+              <!--  <el-button type="text" size="small" @click="handleAdd(scope.row)"
+                >添加</el-button
+              > -->
+              <el-button
+                type="text"
+                size="small"
+                @click="handleDelete(scope.$index)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+  
+        <div class="button-group">
+          <el-button type="primary" @click="batchAdd">保存</el-button>
+        </div>
+      </el-form>
+  
+      <!-- 添加规格弹窗 -->
+      <el-dialog title="添加规格" :visible.sync="specDialogVisible" width="50%">
+        <el-form :model="specDialogForm" label-width="120px">
+          <el-form-item label="规格编号:">
+            <el-input
+              v-model="specDialogForm.code"
+              style="width: 45%"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="规格名称:">
+            <el-input
+              v-model="specDialogForm.name"
+              style="width: 45%"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="规格类型:">
+            <el-select
+              v-model="specDialogForm.type"
+              style="width: 45%"
+              placeholder="请选择"
+            >
+              <el-option label="输入" value="输入"></el-option>
+              <el-option label="单选" value="单选"></el-option>
+              <el-option label="复选" value="复选"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="规格值">
+            <el-input
+              v-model="specDialogForm.value"
+              style="width: 45%"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="产品分类:">
+            <el-select
+              v-model="specDialogForm.category"
+              style="width: 45%"
+              placeholder="请选择"
+            >
+              <el-option label="全部" value=""></el-option>
+              <el-option label="LED" value="LED"></el-option>
+              <el-option label="LCD" value="LCD"></el-option>
+              <el-option label="DLP" value="DLP"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="specDialogVisible = false">返回</el-button>
+          <el-button type="primary" @click="handleSpecSubmit">确认</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+    
+    <script>
+  import {
+    getDcSpecList,
+    addProduct,
+    getInfo,
+    editProduct,
+  } from "@/api/ProductMent/product";
+  import { list } from "@/api/sysCategory/sysCategory";
+  import { listWork } from "@/api/worksCategory/worksCategory";
+  export default {
+    name: "NewProduct",
+    data() {
+      return {
+        activeCollapse: ["1"],
+        activeTab: "basic",
+        productForm: {
+          wr_id: "",
+          sys_no: "",
+          dcp_oa_code: "",
+          /*      productType: "", */
+          dcp_name: "",
+          dcp_p_no: "",
+          dcp_price1: "",
+          dcp_price2: "",
+          dcp_price3: "",
+          dcp_price4: "",
+          dcp_cost_price: "",
+          dcp_model: "",
+          dcp_diff: "",
+        },
+        // 规格相关数据
+        specs: {
+          aspectRatio: { width: "", height: "" },
+          refreshRate: "",
+          resolution: "",
+          material: "",
+        },
+        specsList: [], // 规格列表
+        rules: {
+          wr_id: [
+            { required: true, message: "请选择工程类别", trigger: "change" },
+          ],
+          sys_no: [
+            { required: true, message: "请选择系统类别", trigger: "change" },
+          ],
+        },
+        // 新增数据
+        specForm: {}, // 将改为动态对象
+        // 添加一个临时存储生成规格的数组
+        generatedSpecs: [],
+        specDialogVisible: false,
+        specDialogForm: {
+          code: "",
+          name: "",
+          type: "",
+          value: "",
+          category: "",
+        },
+        /* 产品规格 */
+        productSpec: [],
+        /* 系统类别 */
+        systemTypes: [],
+        /* 工程类别 */
+        projectTypes: [],
+        /* 存储数据 */
+        multipleSelection: [], // 用于存储多选的数据
+        selectedSpecs: [], // 存储选中的规格
+  
+        /* id */
+        dcp_id: "",
+        isEdit: false, // 添加标识是否为编辑模式
+      };
+    },
+    computed: {
+      hasAspectRatio() {
+        return this.specs.aspectRatio.width || this.specs.aspectRatio.height;
+      },
+    },
+    mounted() {
+      this.dcp_id = this.$route.query.id;
+      this.isEdit = !!this.dcp_id; // 根据是否有 ID 判断是编辑还是新增
+      this.init();
+    },
+    methods: {
+      /* 列表选中 */
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      // 添加规格
+      addSpec(type) {
+        if (type === "aspectRatio") {
+          this.specs.aspectRatio = { width: "19", height: "6" };
+        }
+        // 其他规格类型处理...
+      },
+  
+      // 移除规格
+      removeSpec(type) {
+        if (type === "aspectRatio") {
+          this.specs.aspectRatio = { width: "", height: "" };
+        }
+      },
+  
+      // 添加到列表
+      addToList(row) {
+        this.specsList.push({
+          oaNumber: "12345668",
+          dcp_p_no: "DLP11443",
+          dcp_name: "DLP高拼屏",
+          ...row,
+        });
+      },
+  
+      // 从列表中除
+      removeFromList(index) {
+        this.specsList.splice(index, 1);
+      },
+  
+      // 批量添加
+      batchAdd() {
+        if (this.multipleSelection.length === 0) {
+          this.$message.warning("请选择要添加的规格");
+          return;
+        }
+  
+        const baseData = {
+          wr_id: this.productForm.wr_id,
+          sys_no: this.productForm.sys_no,
+          dcp_oa_code: this.productForm.dcp_oa_code,
+          dcp_name: this.productForm.dcp_name,
+          dcp_p_no: this.productForm.dcp_p_no,
+          dcp_price1: this.productForm.dcp_price1,
+          dcp_price2: this.productForm.dcp_price2,
+          dcp_price3: this.productForm.dcp_price3,
+          dcp_price4: this.productForm.dcp_price4,
+          dcp_cost_price: this.productForm.dcp_cost_price,
+          dcp_diff: this.productForm.dcp_diff,
+          dcp_model: this.productForm.dcp_model,
+        };
+  
+        // 如果是编辑模式,将 dcp_id 添加到 baseData 中
+        if (this.isEdit) {
+          baseData.dcp_id = this.dcp_id;
+        }
+  
+        const submitData = {
+          content: baseData,
+          specs: this.productSpec,
+        };
+  
+        // 根据模式调用不同的接口
+        const request = this.isEdit
+          ? editProduct(submitData)
+          : addProduct(submitData);
+  
+        request
+          .then((res) => {
+            if (res.status === 200) {
+              this.$message.success(`${this.isEdit ? "编辑" : "添加"}成功`);
+              this.$router.push("/cpk/ProductMent/ProductManagement");
+            } else {
+              this.$message.error(
+                res.msg || `${this.isEdit ? "编辑" : "添加"}失败`
+              );
+            }
+          })
+          .catch((error) => {
+            this.$message.error(
+              `${this.isEdit ? "编辑" : "添加"}失败:${error.message}`
+            );
+          });
+      },
+  
+      // 保存所有数据
+      saveAll() {
+        this.$refs.productForm.validate((valid) => {
+          if (valid) {
+            // 实现保存逻辑
+            console.log("保存数据", this.productForm, this.specsList);
+          }
+        });
+      },
+      // 添加新规格
+      addNewSpec() {
+        // 实现添加新规格的逻辑
+      },
+  
+      // 初始化规格表单
+      initSpecForm() {
+        const newSpecForm = {};
+        this.productSpec.forEach((spec) => {
+          if (spec.psp_name.includes("长宽比")) {
+            newSpecForm[spec.ps_no] = {
+              value1: "",
+              value2: "",
+            };
+          } else {
+            newSpecForm[spec.ps_no] = spec.psp_type === "多选" ? [] : "";
+          }
+        });
+        this.specForm = newSpecForm;
+      },
+  
+      // 修改生成规格方法
+      generateSpec() {
+        if (!this.productForm.dcp_oa_code || !this.productForm.dcp_name) {
+          this.$message.warning("请先填写OA编号和产品名称");
+          return;
+        }
+  
+        // 构建规格描述
+        const specValues = {};
+        this.productSpec.forEach((spec) => {
+          // 从 specForm 中获取当前值
+          let currentValue = "";
+  
+          if (spec.psp_name.includes("长宽比")) {
+            const values = this.specForm[spec.ps_no];
+            currentValue =
+              values.value1 && values.value2
+                ? `${values.value1}:${values.value2}`
+                : "";
+          } else if (Array.isArray(this.specForm[spec.ps_no])) {
+            currentValue = this.specForm[spec.ps_no].join(",");
+          } else {
+            currentValue = this.specForm[spec.ps_no] || "";
+          }
+  
+          // 更新规格的 ps_name
+          spec.ps_name = currentValue;
+          // 添加到规格值对象
+          specValues[spec.psp_name] = currentValue;
+        });
+  
+        // 创建新规格对象
+        const newSpec = {
+          dcp_oa_code: this.productForm.dcp_oa_code,
+          dcp_p_no: this.productForm.dcp_p_no,
+          dcp_name: this.productForm.dcp_name,
+          dcp_model: this.productForm.dcp_model,
+          ...specValues,
+        };
+  
+        // 清空现有列表并添加新规格
+        this.specsList.push(newSpec);
+  
+        // 自动选中新生成的规格
+        this.$nextTick(() => {
+          if (this.$refs.specTable) {
+            this.$refs.specTable.toggleRowSelection(newSpec, true);
+          }
+        });
+  
+        this.$message.success("规格生成成功");
+      },
+  
+      // 重置规格表
+      resetSpecForm() {
+        this.initSpecForm();
+      },
+  
+      // 处理添加操作
+      handleAdd(row) {
+        // 实现添加逻辑
+      },
+  
+      // 处理删除操作
+      handleDelete(index) {
+        this.specsList.splice(index, 1);
+      },
+  
+      showSpecDialog() {
+        this.specDialogVisible = true;
+      },
+  
+      handleSpecSubmit() {
+        // 创建新的规格对象
+        const newSpec = {
+          psp_name: this.specDialogForm.name, // 规格名称
+          ps_no: this.specDialogForm.code, // 规格编号
+          psp_type: this.specDialogForm.type, // 规格类型
+          psp_value: this.specDialogForm.value, // 规格值
+          psp_category: this.specDialogForm.category, // 产品分类
+        };
+  
+        // 将新规格添加到 productSpec 数组中
+        this.productSpec.push(newSpec);
+        console.log(this.productSpec);
+        // 清空表单
+        this.specDialogForm = {
+          code: "",
+          name: "",
+          type: "",
+          value: "",
+          category: "",
+        };
+  
+        // 关闭弹窗
+        this.specDialogVisible = false;
+      },
+      /* 初始化数据获取 */
+      init() {
+        // 获取系统类别和产品类别
+        Promise.all([
+          list(),
+          listWork(),
+          // 编辑模式下获取产品详情,新增模式下获取规格列表
+          this.isEdit ? getInfo(this.dcp_id) : getDcSpecList(),
+        ]).then(([sysRes, workRes, specRes]) => {
+          this.systemTypes = sysRes.rows;
+          this.projectTypes = workRes.rows;
+  
+          if (this.isEdit) {
+            // 处理编辑模式数据
+            this.handleEditData(specRes.data);
+          } else {
+            // 处理新增模式数据
+            this.productSpec = specRes;
+            this.initSpecForm();
+          }
+        });
+      },
+  
+      // 添加处理编辑模式数据的方法
+      handleEditData(data) {
+        if (!data) return;
+  
+        // 填充基本信息
+        const content = data.content;
+        this.productForm = {
+          ...this.productForm,
+          wr_id: content.wr_id,
+          sys_no: Number(content.sys_no),
+          dcp_model: content.dcp_model,
+          dcp_name: content.dcp_name,
+          dcp_p_no: content.dcp_p_no,
+          dcp_oa_code: content.dcp_oa_code,
+          dcp_price1: content.dcp_price1,
+          dcp_price2: content.dcp_price2,
+          dcp_price3: content.dcp_price3,
+          dcp_price4: content.dcp_price4,
+          dcp_cost_price: content.dcp_cost_price,
+          dcp_diff: content.dcp_diff,
+        };
+  
+        // 处理规格数据
+        if (data.specs && data.specs.length > 0) {
+          // 更新 productSpec,统一使用 ps_no
+          this.productSpec = data.specs.map((spec) => ({
+            ps_no: spec.ps_no, //用 ps_no
+            psp_name: spec.psp_name,
+            ps_name: spec.ps_name,
+            psp_value: spec.psp_value,
+            psp_type: spec.psp_type,
+          }));
+  
+          // 初始化 specForm
+          this.specForm = {};
+          data.specs.forEach((spec) => {
+            if (spec.psp_name.includes("长宽比")) {
+              const [value1, value2] = (spec.ps_name || "").split(":");
+              this.specForm[spec.ps_no] = {
+                // 使用 ps_no
+                value1: value1 || "",
+                value2: value2 || "",
+              };
+            } else if (spec.psp_type === "多选" && spec.ps_name) {
+              this.specForm[spec.ps_no] = spec.ps_name.split(","); // 使用 ps_no
+            } else {
+              this.specForm[spec.ps_no] = spec.ps_name || ""; // 使用 ps_no
+            }
+          });
+  
+          // 编辑模式下初始化时不显示列表数据
+          this.specsList = [];
+        }
+      },
+  
+      // 添加处理规格输入的方法
+      handleSpecInput(specNo, field, value) {
+        // 找到当前操作的规格对象
+        const currentSpec = this.productSpec.find(
+          (spec) => spec.ps_no === specNo
+        );
+        if (!currentSpec) return;
+  
+        if (field) {
+          // 处理长宽比输入
+          this.$set(this.specForm[specNo], field, value);
+          // 立即更新 ps_name
+          if (this.specForm[specNo].value1 && this.specForm[specNo].value2) {
+            this.$set(
+              currentSpec,
+              "ps_name",
+              `${this.specForm[specNo].value1}:${this.specForm[specNo].value2}`
+            );
+          }
+        } else {
+          // 处理其他类型输入
+          this.$set(this.specForm, specNo, value);
+          // 立即更新 ps_name
+          if (Array.isArray(value)) {
+            this.$set(currentSpec, "ps_name", value.join(","));
+          } else {
+            this.$set(currentSpec, "ps_name", value);
+          }
+        }
+  
+        // 强制更新 specsList
+        if (this.specsList.length > 0) {
+          const updatedSpec = { ...this.specsList[0] };
+          updatedSpec[currentSpec.psp_name] = currentSpec.ps_name;
+          this.$set(this.specsList, 0, updatedSpec);
+        }
+  
+        // 触发视图更新
+        this.$forceUpdate();
+      },
+      /* 获取详细信息 */
+      getInfo() {
+        getInfo(this.dcp_id).then((res) => {
+          if (res.status === 200 && res.data) {
+            // 填充基本信息表
+            const content = res.data.content;
+            this.productForm = {
+              ...this.productForm,
+              dcp_model: content.dcp_model, // 产品型号
+              dcp_name: content.dcp_name, // 产品名称
+              dcp_p_no: content.dcp_p_no, // 产品编号
+              dcp_oa_code: content.dcp_oa_code, // OA编号
+              dcp_price1: content.dcp_price1, // 公开价
+              dcp_price2: content.dcp_price2, // 销售价
+              dcp_price3: content.dcp_price3, // 标准价
+              dcp_price4: content.dcp_price4, // 大区价
+              dcp_cost_price: content.dcp_cost_price, // 成本价
+              dcp_diff: content.dcp_diff, // 产品区分代码
+            };
+  
+            // 处理规格信息
+            if (res.data.specs && res.data.specs.length > 0) {
+              const specs = res.data.specs[0]; // 获取第一个规格信息
+  
+              // 更新规格表单
+              if (this.specForm[specs.ps_no]) {
+                // 处理长宽比等特殊规格
+                if (specs.psp_name.includes("长宽比")) {
+                  const [value1, value2] = specs.ps_name.split(":");
+                  this.specForm[specs.ps_no] = {
+                    value1: value1,
+                    value2: value2,
+                  };
+                }
+                // 处理多选规格
+                else if (specs.psp_type === "多选" && specs.ps_name) {
+                  this.specForm[specs.ps_no] = specs.ps_name.split(",");
+                }
+                // 处理普通规格
+                else {
+                  this.specForm[specs.ps_no] = specs.ps_name;
+                }
+              }
+  
+              // 更新产品规格数
+              const existingSpecIndex = this.productSpec.findIndex(
+                (spec) => spec.ps_no === specs.ps_no
+              );
+  
+              if (existingSpecIndex !== -1) {
+                // 更新已存在的规格
+                this.productSpec[existingSpecIndex] = {
+                  ...this.productSpec[existingSpecIndex],
+                  ps_name: specs.ps_name,
+                  psp_value: specs.psp_value,
+                  ps_no: specs.ps_no,
+                  psp_name: specs.psp_name,
+                  psp_type: specs.psp_type,
+                };
+              } else {
+                // 添加新规格
+                this.productSpec.push({
+                  ps_name: specs.ps_name,
+                  psp_value: specs.psp_value,
+                  ps_no: specs.ps_no,
+                  psp_name: specs.psp_name,
+                  psp_type: specs.psp_type,
+                });
+              }
+  
+              // 初始化规格表单
+              this.initSpecForm();
+            }
+          }
+        });
+      },
+    },
+  };
+  </script>
+    
+    <style scoped>
+  .product-container {
+    padding: 20px;
+  }
+  
+  .specs-container {
+    margin-top: 20px;
+  }
+  
+  .specs-header {
+    margin-bottom: 20px;
+  }
+  
+  .button-container {
+    margin-top: 20px;
+    text-align: center;
+  }
+  .specs-form {
+    padding: 20px;
+  }
+  
+  .specs-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .ratio-separator {
+    margin: 0 10px;
+    font-size: 20px;
+    color: #909399;
+  }
+  
+  .operation-buttons {
+    margin-left: 10px;
+    display: inline-block;
+  }
+  
+  .button-group {
+    margin-top: 20px;
+    text-align: center;
+  }
+  
+  .spec-tags {
+    margin-bottom: 15px;
+  }
+  
+  /* .product-specs {
+    margin-bottom: 20px;
+  } */
+  
+  .product-specs .el-tag {
+    margin-right: 10px;
+  }
+  
+  .product-specs .el-button {
+    padding: 0 4px;
+  }
+  
+  /* 调整折叠面板式 */
+  ::v-deep .el-collapse-item__header {
+    font-size: 16px;
+    padding-left: 10px;
+    background-color: #f5f7fa;
+  }
+  
+  ::v-deep .el-collapse-item__content {
+    padding: 0;
+  }
+  
+  /* 添加标题样式 */
+  .section-title {
+    font-size: 14px;
+    color: #606266;
+    line-height: 25px;
+    padding-left: 8px;
+    margin-bottom: 16px;
+  }
+  
+  /* 修改表单项样式以适应三列布局 */
+  ::v-deep .el-form-item {
+    margin-bottom: 18px;
+  }
+  
+  ::v-deep .el-input,
+  ::v-deep .el-select {
+    width: 100%; /* 使输入框和选择框占满列宽 */
+  }
+  </style>

文件差異過大導致無法顯示
+ 677 - 226
ui/src/views/ProductMent/newProduct/index.vue


+ 128 - 41
ui/src/views/ProductMent/specMent/index.vue

@@ -11,20 +11,19 @@
         </el-form-item>
         <el-form-item label="规格名称">
           <el-input
-            v-model="searchForm.ps_name"
+            v-model="searchForm.psp_name"
             placeholder="规格名称"
           ></el-input>
         </el-form-item>
         <el-form-item label="规格类型">
-          <el-select v-model="searchForm.psp_name" placeholder="规格类型">
-            <el-option label="全部" value=""></el-option>
+          <el-select v-model="searchForm.psp_type" placeholder="规格类型">
             <el-option label="输入" value="输入"></el-option>
             <el-option label="单选" value="单选"></el-option>
             <el-option label="复选" value="复选"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="所属分类">
-          <el-select v-model="searchForm.ps_category" placeholder="所属分类">
+          <el-select v-model="searchForm.psp_category" placeholder="所属分类">
             <el-option label="全部" value=""></el-option>
             <el-option label="LED" value="LED"></el-option>
             <el-option label="LCD" value="LCD"></el-option>
@@ -45,20 +44,20 @@
     <!-- 表格区域 -->
     <el-table :data="tableData" style="width: 100%; margin-top: 20px">
       <el-table-column prop="ps_no" label="规格编号"></el-table-column>
-      <el-table-column prop="ps_name" label="规格名称"></el-table-column>
-      <el-table-column prop="psp_name" label="规格值类型" width="120">
+      <el-table-column prop="psp_name" label="规格名称"></el-table-column>
+      <el-table-column prop="psp_type" label="规格值类型" width="120">
         <template slot-scope="scope">
           <el-tag
-            v-if="scope.row.psp_name"
+            v-if="scope.row.psp_type"
             :type="
-              scope.row.psp_name === '输入'
+              scope.row.psp_type === '输入'
                 ? 'primary'
-                : scope.row.psp_name === '单选'
+                : scope.row.psp_type === '单选'
                 ? 'success'
                 : 'warning'
             "
           >
-            {{ scope.row.psp_name }}
+            {{ scope.row.psp_type }}
           </el-tag>
           <span v-else ></span>
         </template>
@@ -67,8 +66,12 @@
         prop="psp_value"
         label="规格值"
         width="180"
-      ></el-table-column>
-      <el-table-column prop="ps_category" label="所属分类"></el-table-column>
+      >
+        <template slot-scope="scope">
+          {{ Array.isArray(scope.row.psp_value) ? scope.row.psp_value.join(',') : scope.row.psp_value }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="psp_category" label="所属分类"></el-table-column>
       <el-table-column label="操作" width="250">
         <template slot-scope="scope">
           <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
@@ -101,27 +104,41 @@
         <el-form-item label="规格编号" prop="ps_no">
           <el-input v-model="form.ps_no" :disabled="dialogTitle=='编辑规格'"></el-input>
         </el-form-item>
-        <el-form-item label="规格名称" prop="ps_name">
-          <el-input v-model="form.ps_name"></el-input>
+        <el-form-item label="规格名称" prop="psp_name">
+          <el-input v-model="form.psp_name"></el-input>
         </el-form-item>
-        <el-form-item label="规格值类型" prop="psp_name">
-          <el-select v-model="form.psp_name" style="width: 100%">
+        <el-form-item label="规格值类型" prop="psp_type">
+          <el-select v-model="form.psp_type" style="width: 100%">
             <el-option label="输入" value="输入"></el-option>
             <el-option label="单选" value="单选"></el-option>
             <el-option label="复选" value="复选"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="规格值" prop="psp_value">
-          <el-input
+          <!-- <el-input
             v-model="form.psp_value"
             type="textarea"
             placeholder="多个值请用逗号分隔"
-          ></el-input>
+          ></el-input> -->
+          <el-select
+            ref="categorySelect"
+            v-model="form.psp_value"
+            multiple
+            filterable
+            allow-create
+            default-first-option
+            placeholder="点击enter创建选择标签"
+            style="width: 100%"
+            popper-class="custom-select-dropdown"
+            class="hide-arrow-select"
+          >
+          </el-select>
         </el-form-item>
-        <el-form-item label="所属分类" prop="ps_category">
-          <el-select v-model="form.ps_category" style="width: 100%">
+        <el-form-item label="所属分类" prop="psp_category">
+          <el-select v-model="form.psp_category" style="width: 100%">
             <el-option label="全部" value="全部"></el-option>
-            <el-option label="LCD,LED" value="LCD,LED"></el-option>
+            <el-option label="LED" value="LED"></el-option>
+            <el-option label="LCD" value="LCD"></el-option>
             <el-option label="DLP" value="DLP"></el-option>
           </el-select>
         </el-form-item>
@@ -143,7 +160,10 @@
           viewForm.ps_no
         }}</el-descriptions-item>
         <el-descriptions-item label="规格名称">{{
-          viewForm.ps_name
+          viewForm.psp_name
+        }}</el-descriptions-item>
+        <el-descriptions-item label="规格类型">{{
+          viewForm.psp_type
         }}</el-descriptions-item>
       </el-descriptions>
       <div slot="footer">
@@ -168,9 +188,9 @@ export default {
     return {
       searchForm: {
         ps_no: "",
-        ps_name: "",
         psp_name: "",
-        ps_category: "",
+        psp_type: "",
+        psp_category: "",
         pageNum: 1,
         pageSize: 10,
       },
@@ -184,28 +204,58 @@ export default {
       dialogTitle: "",
       form: {
         ps_no: "",
-        ps_name: "",
         psp_name: "",
+        psp_type: "",
         psp_value: "",
-        ps_category: "",
+        psp_category: "",
       },
       rules: {
         ps_no: [{ required: true, message: "请输入规格编号", trigger: "blur" }],
-        ps_name: [
+        psp_name: [
           { required: true, message: "请输入规格名称", trigger: "blur" },
         ],
-        psp_name: [
+        psp_type: [
           { required: true, message: "请选择规格值类型", trigger: "change" },
         ],
       },
       viewDialogVisible: false,
       viewForm: {
         ps_no: "",
-        ps_name: "",
+        psp_name: "",
       },
+      hideDropdown:false,
     };
   },
+
+  watch:{
+    hideDropdown(newVal) {
+      const dropdown = document.querySelector(".custom-select-dropdown");
+      if (dropdown) {
+        dropdown.style.display = newVal ? "none" : "";
+      }
+    },
+  },
+
   methods: {
+    /*  */
+    handleSelectFocus(event) {
+      this.$refs.categorySelect.blur();
+    },
+    /* 创建规格项 */
+    createTag() {
+      // Logic to create a tag
+      console.log(
+        "Enter key pressed, create a tag with:",
+        this.form.psp_value
+      );
+      // Example: Add the value to a tags array
+      if (this.form.psp_value.trim() !== "") {
+        this.tags.push(this.form.psp_value.trim());
+        this.form.psp_value = ""; // Clear the input
+      }
+      console.log(this.tags);
+    },
+
     handleSearch() {
       this.pagination.currentPage = 1;
       this.loadData();
@@ -214,9 +264,9 @@ export default {
     resetSearch() {
       this.searchForm = {
         ps_no: "",
-        ps_name: "",
         psp_name: "",
-        ps_category: "",
+        psp_type: "",
+        psp_category: "",
         pageNum: 1,
         pageSize: this.pagination.pageSize,
       };
@@ -228,10 +278,10 @@ export default {
       this.dialogTitle = "新增规格";
       this.form = {
         ps_no: "",
-        ps_name: "",
         psp_name: "",
+        psp_type: "",
         psp_value: "",
-        ps_category: "",
+        psp_category: "",
       };
       this.dialogVisible = true;
     },
@@ -240,7 +290,14 @@ export default {
       this.form = {
         ps_id: row.ps_id,
         ps_no: row.ps_no,
-        ps_name: row.ps_name,
+        psp_name: row.psp_name,
+        psp_type: row.psp_type,
+        psp_value: typeof row.psp_value === 'string' 
+          ? row.psp_value.split(',')
+          : Array.isArray(row.psp_value)
+            ? row.psp_value
+            : [],
+        psp_category: row.psp_category,
       };
       this.dialogVisible = true;
     },
@@ -310,7 +367,7 @@ export default {
           }
         })
         .catch((err) => {
-          // 只有用户点击取消��钮时才显示取消删除的提示
+          // 只有用户点击取消钮时才显示取消删除的提示
           if (err === "cancel" || err.toString().includes("cancel")) {
             this.$message({
               type: "info",
@@ -322,7 +379,7 @@ export default {
     handleView(row) {
       this.viewForm = {
         ps_no: row.ps_no,
-        ps_name: row.ps_name,
+        psp_name: row.psp_name,
       };
       this.viewDialogVisible = true;
     },
@@ -341,10 +398,18 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           const api = this.dialogTitle === "新增规格" ? addSpec : updateSpec;
-          const message =
-            this.dialogTitle === "新增规格" ? "添加成功" : "更新成功";
+          const message = this.dialogTitle === "新增规格" ? "添加成功" : "更新成功";
+
+          // 创建一个新对象,处理 psp_value 的转换
+          const submitData = {
+            ...this.form,
+            // 将数组转换为逗号分隔的字符串
+            psp_value: Array.isArray(this.form.psp_value) 
+              ? this.form.psp_value.join(',') 
+              : this.form.psp_value
+          };
 
-          api(this.form)
+          api(submitData)
             .then((res) => {
               if (res.code === 200) {
                 this.$message.success(message);
@@ -371,7 +436,15 @@ export default {
       specList(params)
         .then((res) => {
           if (res.code === 200) {
-            this.tableData = res.rows || [];
+            // 添加类型检查,确保字符串处理的安全性
+            this.tableData = (res.rows || []).map(item => ({
+              ...item,
+              psp_value: typeof item.psp_value === 'string'
+                ? item.psp_value.split(',')
+                : Array.isArray(item.psp_value)
+                  ? item.psp_value
+                  : []
+            }));
             this.pagination.total = res.total || 0;
           } else {
             this.$message.error(res.message || "获取数据失败");
@@ -389,7 +462,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .spec-container {
   padding: 20px;
 }
@@ -408,4 +481,18 @@ export default {
 ::v-deep .el-textarea__inner:focus {
   border: 1px solid #409EFF !important;
 }
+.custom-select-dropdown {
+  display: none !important;
+}
+.el-select-dropdown.custom-select-dropdown {
+  display: none !important;
+}
+
+/* 或者使用新的深度选择器语法 */
+::v-deep .hide-arrow-select  .el-input .el-input__suffix {
+  display: none !important;
+}
+.hide-arrow-select .el-input .el-input__suffix {
+ display: none !important;
+}
 </style>

+ 75 - 63
ui/src/views/login.vue

@@ -190,7 +190,7 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss" scoped>
 .login {
   display: flex;
   justify-content: center;
@@ -198,26 +198,23 @@ export default {
   height: 100%;
   background-image: url("../assets/images/login_background.jpg");
   background-size: cover;
+}
 
-  .login-form {
-    width: 400px;
-    padding: 30px;
-    background: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-    .el-form-item {
-      margin-bottom: 20px;
-    }
-  }
+// 将重复的 .login-form 合并
+.login-form {
+  border-radius: 12px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 
-  // 自定义输入框样式
   .el-input {
-    .el-input__inner {
-      height: 45px;
-      background: #f0f2f5;  // 浅灰色背景
+    height: 38px;
+    input {
+      height: 38px;
+      background: #f0f2f5;
       border: none;
-      border-radius: 25px;  // 大圆角
+      border-radius: 25px;
       padding: 0 20px;
       font-size: 14px;
       color: #333;
@@ -227,49 +224,81 @@ export default {
       }
 
       &:focus {
-        background: #e8eaed;  // 聚焦时稍微深一点的背景色
+        background: #e8eaed;
         box-shadow: none;
       }
     }
   }
 
-  // 验证码输入框特殊处理
-  .captcha-container {
-    display: flex;
-    gap: 10px;
-    align-items: center;
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
 
-    .el-input {
-      flex: 1;
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+}
+
+// 使用 :deep() 来影响 Element UI 组件的内部元素
+::v-deep .el-input {
+  .el-input__inner {
+    height: 45px;
+    background: #f0f2f5;
+    border: none;
+    border-radius: 25px;
+    padding: 0 20px;
+    font-size: 14px;
+    color: #333;
+
+    &::placeholder {
+      color: #999;
     }
 
-    .captcha-img {
-      height: 45px;  // 与输入框等高
-      border-radius: 25px;  // 同样的圆角
-      overflow: hidden;
+    &:focus {
+      background: #e8eaed;
+      box-shadow: none;
     }
   }
+}
 
-  // 验证码输入框
-  .captcha-input {
-    .el-input__inner {
-      border-radius: 25px;
-    }
+// 验证码输入框特殊处理
+.captcha-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  .el-input {
+    flex: 1;
   }
 
-  // 登录按钮样式
-  .login-button {
-    width: 100%;
-    height: 45px;
-    background: #ff0000;
-    border: none;
-    border-radius: 25px;  // 与输入框相同的圆角
-    font-size: 16px;
-    margin-top: 20px;
+  .captcha-img {
+    height: 45px;  // 与输入框等高
+    border-radius: 25px;  // 同样的圆角
+    overflow: hidden;
+  }
+}
 
-    &:hover {
-      background: #ff1a1a;
-    }
+// 验证码输入框
+.captcha-input {
+  .el-input__inner {
+    border-radius: 25px;
+  }
+}
+
+// 登录按钮样式
+::v-deep .login-button{
+  width: 100%;
+  height: 45px;
+  background: #ff0000;
+  border: none;
+  border-radius: 25px;
+  font-size: 16px;
+  margin-top: 20px;
+
+  &:hover {
+    background: #ff1a1a;
   }
 }
 
@@ -301,23 +330,6 @@ export default {
   margin-bottom: 20px;
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
 .title {
   font-size: 28px;
   color: #ff0000;

部分文件因文件數量過多而無法顯示