功能3：商品分類
功能2：商品品牌
功能1：搭建若依運行環境

前言

商品屬性功能類似若依自帶的字典管理，分兩步，先設置屬性名，再設置對應的屬性值。

一.操作步驟

1）數據庫表product_property和product_property_value

使用建表語句在數據庫中創建表

drop table if exists product_property;
CREATE TABLE IF NOT EXISTS `product_property` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '屬性id',`name` varchar(64) COMMENT '屬性名稱',`remark` varchar(255) COMMENT '備注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品屬性';drop table if exists product_property_value;
CREATE TABLE IF NOT EXISTS `product_property_value` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主鍵',`property_id` bigint COMMENT '屬性id',`name` varchar(64) COMMENT '屬性值',`remark` varchar(255) COMMENT '備注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='商品屬性值';

2）代碼生成

系統工具
代碼生成
導入

3）配置product_property

選中剛才創建的表product_property。點擊確定。
在操作列，點擊編輯圖標

基本信息

實體類名稱：對應java代碼中的實體類的類名。
作者：對應java代碼中的注釋

字段信息

插入列：控制新增頁面的顯示項。
顯示類型列：控制生成的組件類型。文本框，下拉框，單選框，復選框，圖片上傳等。
編輯列：控制修改頁面的顯示項。前期一般配置成跟插入列一致。
列表列：控制頁面表格的顯示列。
查詢列：控制頁面查詢條件項。勾選的字段會被生成頁面查詢條件。
必填列：控制新增和修改頁面中的對應字段是否必填。
具體配置需要參考項目的頁面原型。

生成信息

生成包路徑：生成的java代碼，會放在對應的包路徑下。
生成功能名：在頁面上顯示菜單名稱
上級菜單：選中之前新建的一級目錄，商品中心。

在操作列，點擊生成代碼圖標。
瀏覽器會下載一個zip壓縮包。

4）配置product_property_value

選中剛才創建的表product_property_value。點擊確定。
在操作列，點擊編輯圖標

基本信息

實體類名稱：對應java代碼中的實體類的類名。
作者：對應java代碼中的注釋

字段信息

插入列：控制新增頁面的顯示項。
顯示類型列：控制生成的組件類型。文本框，下拉框，單選框，復選框，圖片上傳等。
編輯列：控制修改頁面的顯示項。前期一般配置成跟插入列一致。
列表列：控制頁面表格的顯示列。
查詢列：控制頁面查詢條件項。勾選的字段會被生成頁面查詢條件。
必填列：控制新增和修改頁面中的對應字段是否必填。
具體配置需要參考項目的頁面原型。

生成信息

生成包路徑：生成的java代碼，會放在對應的包路徑下。
生成功能名：在頁面上顯示菜單名稱
上級菜單：選中之前新建的一級目錄，商品中心。

在操作列，點擊生成代碼圖標。
瀏覽器會下載一個zip壓縮包。

5）代碼附件-商品屬性頁面

將product_property表的java代碼和vue代碼放在對應的位置，sql語句也在數據庫中執行。
商品屬性頁面的單表增刪改查。

6）商品屬性值頁面

將商品屬性頁面中的屬性名稱列設置為可點擊，打開屬性值設置頁面。

      <el-table-column label="屬性名稱" align="center"><template #default="scope"><router-link :to="'/mall/property-data/index/' + scope.row.id" class="link-type"><span>{{ scope.row.name }}</span></router-link></template></el-table-column>

修改src\router\index.js，新增動態路由

  {path: '/mall/property-data',component: Layout,hidden: true,permissions: ['mall:property:list'],children: [{path: 'index/:propertyId(\\d+)',component: () => import('@/views/mall/property/data'),name: 'PropertyData',meta: { title: '商品屬性值', activeMenu: '/mall/property' }}]}

新建文件src\views\mall\property\data.vue。將product_property_value表生成的vue代碼復制到文件內。


生成的java代碼復制到對應路徑

新增查詢條件，實現商品屬性值頁面只顯示點擊的對應屬性下的值。
mapper/mall/ProductPropertyValueMapper.xml

    <select id="selectProductPropertyValueList" parameterType="ProductPropertyValue" resultMap="ProductPropertyValueResult"><include refid="selectProductPropertyValueVo"/><where><if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if><if test="propertyId != null">and property_id = #{propertyId}</if></where></select>

修改文件src\views\mall\property\data.vue。保存屬性ID，每次查詢時都要帶上。實現屬性值頁面只展示指定屬性ID下的。

const proId = ref("");/** 查詢商品屬性值列表 */
function getList() {loading.value = true;queryParams.value.propertyId = proId.valuelistProperty_value(queryParams.value).then((response) => {property_valueList.value = response.rows;total.value = response.total;loading.value = false;});
}function getListById(propertyId) {proId.value = propertyIdgetList()
}getListById(route.params && route.params.propertyId);

二.功能驗證

運行項目，瀏覽器訪問http://localhost/mall/property

點擊屬性名稱列的顏色，打開商品屬性值頁面。只顯示出顏色屬性下的屬性值。

點擊尺碼，只顯示出尺碼下的值。