###### tags: ``tutorial`` `YKKAP`.
# 顏色管理功能 教育訓練
## 顏色管理功能
:::info
[SA_BOM02: 顏色搭配資料管理]範例說明

- **目的:**
維護形材與部品顏色、其搭配的對應關係及購買國別價格。

- **畫面:**
- 查詢畫面

<!-- - 新增/修改畫面

- **開發架構介紹:**

- **Activti流程設計**:透過Eclipse 安裝Activiti Diagram即可透過圖形化介面進行流程設計
- **Activti後端程式開發**:使用IntelliJ進行EIP後端spring boot整合Activti與keycloak(SSO)專案開發
- **Activti前端程式開發**:使用VS Code進行EIP前端VUE畫面開發 -->

:::

### 1.查詢畫面(前端)
#### 1.1 前端查詢條件欄位區塊

<[範例檔案](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/eeda0f75-8c2b-4404-b930-83f78aec1ab8/ColorManage2.vue?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221223%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221223T095335Z&X-Amz-Expires=86400&X-Amz-Signature=ef73c9e6c09b83436222486dc571920f73057fbe350b176270d80b21e93a1876&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22ColorManage2.vue%22&x-id=GetObject)>

<template>
  <div class="input layout-margin">
    <q-card class="layout-padding">
      <q-card-section class="text-primary text-left q-pa-none q-mb-xs">
        <q-toolbar style="min-height:22px;">
          <q-toolbar-title style="font-size:15px; font-weight:600;">
            {{'顏色搭配資料查詢'}}
          </q-toolbar-title>
          <div class="row col-4 btnSpace justify-end">
            <f-btn-icon label="查詢" icon="search" color="primary" @click.native="findColors()"></f-btn-icon>
            <f-btn-icon label="清除" icon="clear_all" color='grey' @click.native="clearAll"></f-btn-icon>
          </div>
        </q-toolbar>
      </q-card-section>
      <!-- 搜尋欄位 -->
      <div class="row col-12 justify-start q-py-sm">
        <div class="col-10 row">
          <f-select class="col-2" label="類別"  v-model="search.partCat" :options="options.partCat" :useInput="false" ></f-select>
          <f-input class="col-2" label="色碼"  v-model="search.colorCode" isUpper></f-input>
          <f-input class="col-2" label="中文名"  v-model="search.colorCh" ></f-input>
          <f-input class="col-2" label="英文名"  v-model="search.colorEng" ></f-input>
          <f-select class="col-2" label="生效" labelWidth='100px' v-model="search.colorStatus" :options="options.colorStatus" :useInput="false" ></f-select>
          <f-select class="col-2" label="交期(快單用)" labelWidth='100px' v-model="search.isQuickOrder" :options="isQuickOrderOptions" :useInput="false" ></f-select>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script>
import { commonMixin } from '@/common/js/mixins'
export default {
  name: 'ColorManage',
  components: {
    'f-input': () => import('@/components/FInput.vue'),
    'f-select': () => import('@/components/FSelect.vue'),
    'f-btn-icon': () => import('@/components/FBtnIcon')
  },
  mixins: [commonMixin],
  data () {
    return {
      // 查詢欄位
      search: {
        partCat: '',
        colorCode: '',
        colorCh: '',
        colorEng: '',
        colorStatus: '',
        isQuickOrder: ''
      },
      // 下拉選項
      options: {
        partCat: [{ label: '部品', value: 'M' }, { label: '形材', value: 'B' }],
        colorStatus: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }]
      },
      isQuickOrderOptions: [{ label: '長交期', value: 'Y' }, { label: '不開放', value: 'N' }, { label: '短交期', value: 'E' }],
      booleanOptions: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }],
      partCatOptions: [{ label: '部品', value: 'M' }, { label: '形材', value: 'B' }]
    }
  },

  methods: {
    // API 查找所有顏色
    async findColors () {
    },
    // 清除
    clearAll () {
      this.search = {
        partCat: '',
        colorCode: '',
        colorCh: '',
        colorEng: '',
        colorStatus: '',
        isQuickOrder: ''
      }
    }
  },
  created () {
    this.saveToSessionInfo('/bom/color-manage')
  }
}

</script>

<style>
.custom-font-size {
  font-size: 15px;
}
</style>

- 執行前端專案

    $ npm run serve

#### 1.2 前端查詢結果區塊
- 使用table元件:

'f-edit-table': () => import('@/components/FEditTable.vue')

##### 1.2.1 顏色主檔Table
<[範例檔案](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4e74db6c-0f73-4fc4-899b-746a6e7bb8b9/ColorManage2.vue?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221225%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221225T142136Z&X-Amz-Expires=86400&X-Amz-Signature=dcb4862fc17f27b4e5160a400e9222a0e48db6829d8ff4cd57284df4d3ae514c&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22ColorManage2.vue%22&x-id=GetObject)>
- 顏色主檔Table Data設計


// 顏色主檔Table
      colorMasterTable: {
        rowkey: 'colorId',
        isPageable: true,
        selection: 'single',
        // request: this.findColors,
        data: [],
        visibleColumns: ['colorCode', 'colorCh', 'colorEng', 'partCat', 'isQuickOrder', 'colorRemark', 'colorStatus'],
        columns: [
          { name: 'colorId', field: 'colorId', align: 'center', style: 'width: 120px;' },
          { name: 'partCat', field: 'partCat', align: 'center', width: '60px', label: '類別', format: val => val === 'B' ? '形材' : val === 'M' ? '部品' : '未設定', sortable: true },
          { name: 'colorCode', field: 'colorCode', align: 'center', width: '100px;', label: '色碼', sortable: true },
          { name: 'colorCh', field: 'colorCh', align: 'center', width: '120px;', label: '顏色中文名', sortable: true },
          { name: 'colorEng', field: 'colorEng', align: 'center', width: '120px;', label: '顏色英文名', sortable: true },
          { name: 'colorStatus', field: 'colorStatus', align: 'center', width: '60px;', label: '生效', format: val => val === 'Y' ? '是' : '否', sortable: true },
          { name: 'isQuickOrder', field: 'isQuickOrder', align: 'center', width: '70px', label: '交期(快單用)', type: 'select', options: (row) => { return this.isQuickOrderOptions }, sortable: true },
          { name: 'colorRemark', field: 'colorRemark', align: 'center', width: '300px;', label: '備註', sortable: true },
          { name: 'createDate', field: 'createDate', align: 'center', width: '120px;', label: '啟用時間', sortable: true },
          { name: 'creator', field: 'creator', align: 'center', width: '120px;', label: '啟用者', sortable: true },
          { name: 'updateDate', field: 'updateDate', align: 'center', width: '120px;', label: '更新時間', sortable: true },
          { name: 'updater', field: 'updater', align: 'center', width: '120px;', label: '更新者', sortable: true }
        ],
        pagination: {
          sortBy: '',
          descending: false,
          page: 1,
          rowsPerPage: 10,
          rowsNumber: 20
        },
        selected: []
      },

- 顏色主檔Table methods設計

    onRequest (props) {
      this.colorMasterTable.pagination = props.pagination
      this.findColors()
    },

- 顏色主檔Table template設計

// 顏色主檔Table
      <div class="row">
        <q-expansion-item
          class="col-9"
          expand-icon-toggle
          default-opened
          switch-toggle-side
          label="顏色資料主檔"
          expand-icon-class="text-primary"
          header-class="text-bold text-primary text-left custom-font-size">
          <f-edit-table
            class="layout-contain"
            rowkey="colorId"
            :value="colorMasterTable"
            :data="colorMasterTable.data"
            :selection="colorMasterTable.selection"
            :selected.sync="colorMasterTable.selected"
            :pagination="colorMasterTable.pagination"
            :request= "onRequest"
            isPageable
            :max-height="'200px'">
          </f-edit-table>
        </q-expansion-item>
      </div>

##### 1.2.2 部品搭配色&顏色價格Table
<[範例檔案](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/8881924e-26c4-4d6c-ba66-f32bdeb8de79/ColorManage2.vue?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221225%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221225T142442Z&X-Amz-Expires=86400&X-Amz-Signature=f8bed825101f110d1cfb3d5789f07d3ed424151d870b2b688a68050fa889e9e0&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22ColorManage2.vue%22&x-id=GetObject)>
- 部品搭配色&顏色價格Table Data設計

// 部品搭配色優先順序
      colorMatchTable: {
        rowkey: 'colorMatchId',
        isPageable: false,
        selection: 'single',
        data: [],
        visibleColumns: ['priority', 'colorCode', 'colorCh'],
        columns: [{ name: 'index', field: 'index' },
          { name: 'colorMatchId', field: 'colorMatchId', align: 'center' },
          { name: 'colorId', field: 'colorId', align: 'center' },
          { name: 'priority', field: 'priority', align: 'center', width: '20%', label: '優先序' },
          { name: 'colorCode', field: 'colorCode', align: 'center', width: '40%', label: '搭配色碼' },
          { name: 'colorCh', field: 'colorCh', align: 'center', width: '40%', label: '搭配色名' }
        ],
        pagination: {
          rowsPerPage: 100
        },
        selected: []
      },
      // 顏色價格
      colorPriceTable: {
        rowkey: 'colorPriceId',
        isPageable: false,
        selection: 'single',
        data: [],
        visibleColumns: ['countryCh', 'price', 'createDate'],
        columns: [
          { name: 'colorPriceId', field: 'colorPriceId', align: 'center' },
          { name: 'colorId', field: 'colorId', align: 'center' },
          { name: 'countryCh', field: 'countryCh', align: 'center', width: 'width: 33%;', label: '國家' },
          { name: 'countryCode', field: 'countryCode', align: 'center' },
          { name: 'price', field: 'price', align: 'center', width: 'width: 33%;', label: '價格', type: 'number' },
          { name: 'createDate', field: 'createDate', align: 'center', width: 'width: 33%;', label: '建立日期', format: val => moment(val).format('YYYY-MM-DD') }
        ],
        pagination: {
          rowsPerPage: 100
        },
        selected: []
      },

- 部品搭配色&顏色價格Table template設計

<div class="row layout-contain q-pt-sm">
        <q-expansion-item
          class="col-4"
          expand-icon-toggle
          default-opened
          switch-toggle-side
          label="部品搭配色優先序"
          expand-icon-class="text-primary"
          header-class="text-bold text-primary text-left custom-font-size">
          <f-edit-table
            class="q-pr-xs"
            rowkey="colorMatchId"
            :value="colorMatchTable"
            :data="colorMatchTable.data"
            :selection="colorMatchTable.selection"
            :selected.sync="colorMatchTable.selected"
            :pagination="colorMatchTable.pagination"
            :isSearchFilter = false></f-edit-table>
        </q-expansion-item>
        <q-expansion-item
          class="col-4"
          expand-icon-toggle
          default-opened
          switch-toggle-side
          label="顏色價格資訊"
          expand-icon-class="text-primary"
          header-class="text-bold text-primary text-left custom-font-size">
          <f-edit-table
            class="q-pl-md"
            rowkey="colorPriceId"
            :value="colorPriceTable"
            :data="colorPriceTable.data"
            :selection="colorPriceTable.selection"
            :selected.sync="colorPriceTable.selected"
            :pagination="colorPriceTable.pagination"
            :isSearchFilter = false>
            <template v-slot:top="">
              <div class="text-warning text-bold q-ml-sm"> {{ '台灣：NTD$/KG，其他國家：US$/TON' }}</div>
            </template>
          </f-edit-table>
        </q-expansion-item>
      </div>

### 2.查詢畫面(後端)
- **API清單:**

| API URL | 說明 |
| -------- | -------- |
| bom/color-manage/page/find-color-master | 根據查詢條件查詢顏色基本資料且有分頁功能 |
| bom/color-manage/page/find-color-detail | 根據顏色基本資料id查詢對應的[部品搭配顏色]&[顏色價格]資料 |

digraph flow{
    node[shape=rect fixedsize=true width=1]
    rankdir=LR
    edge[dir=both minlen=1]
    subgraph cluster_0 {
        label="spring boot"
        controller
        service
        repository
    }
    user->controller[label="VM"]
    controller->service
    service->repository[label="domain"]
    repository->database
}

#### 2.1 建立顏色相關VM物件

package com.ykkap.pro.bom.vm;

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;

import java.time.Instant;
import java.util.List;

@Data
public class FindColorMatchAndPriceVM {
    @JsonProperty("colorMatchList")
    List<colorMatch> colorMatchList;

    @JsonProperty("colorPriceList")
    List<colorPrice> colorPriceList;
    @Data
    public static class colorMatch{
        private Long colorMatchId;

        private Long colorId;

        private Long materColorId;

        private String colorCode;

        private String colorCh;

        private Integer priority;
    }
    @Data
    public static class colorPrice{
        private Long colorPriceId;

        private Long colorId;

        private String countryCode;

        private String countryCh;

        private Double price;

        private Instant createDate;
    }
}

### 2.2 建立顏色相關Domain物件
#### 2.2.1 顏色主檔

package com.ykkap.pro.common.domain;

import javax.persistence.*;


import lombok.Data;
import lombok.EqualsAndHashCode;

@Entity
@Table(name = "COLOR_MASTER", uniqueConstraints = @UniqueConstraint(name= "colorMasterUk1", columnNames = "colorCode"))
@Data
@EqualsAndHashCode(callSuper = false)
public class ColorMaster extends AbstractAuditEntity {

  @Id
  @Column(columnDefinition = "NUMBER")
  @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "COLOR_ID_SEQ")
  @SequenceGenerator(sequenceName = "COLOR_ID_SEQ", allocationSize = 1, name = "COLOR_ID_SEQ")
  private Long colorId;

  @Column(columnDefinition = "VARCHAR2(6 BYTE)", nullable = false, updatable = false)
  private String colorCode;

  @Column(columnDefinition = "VARCHAR2(40 BYTE)")
  private String colorCh;

  @Column(columnDefinition = "VARCHAR2(40 BYTE)")
  private String colorEng;


  @Column(columnDefinition = "CHAR(1)", updatable = false)
  private String partCat;

  @Column(columnDefinition = "CHAR(1) DEFAULT 'N'")
  private String isQuickOrder = "N";

  @Column(columnDefinition = "VARCHAR2(255 BYTE)")
  private String colorRemark;

  @Column(columnDefinition = "CHAR(1) DEFAULT 'Y'")
  private String colorStatus = "Y";


}

#### 2.2.2 部品搭配色明細

package com.ykkap.pro.common.domain;

import javax.persistence.*;
import javax.validation.constraints.Digits;


import lombok.Data;
import lombok.EqualsAndHashCode;

@Entity
@Table(name = "COLOR_MATCH")
@Data
@EqualsAndHashCode(callSuper = false)
public class ColorMatch extends AbstractAuditEntity {

  @Id
  @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "COLOR_MATCH_ID_SEQ")
  @SequenceGenerator(sequenceName = "COLOR_MATCH_ID_SEQ", allocationSize = 1, name = "COLOR_MATCH_ID_SEQ")
  @Column(columnDefinition = "NUMBER")
  private Long colorMatchId;

  @Column(columnDefinition = "NUMBER", nullable = false, updatable = false)
  private Long colorId;

  @Column(columnDefinition = "NUMBER")
  private Long materColorId;

  @Column(columnDefinition = "NUMBER(2)", nullable = false)
  @Digits(integer = 2, fraction = 0)
  private Integer priority;


}

#### 2.2.3 顏色價格明細

package com.ykkap.pro.common.domain;


import javax.persistence.*;
import lombok.Data;
import lombok.EqualsAndHashCode;

@Entity
@Table(name = "COLOR_PRICE")
@Data
@EqualsAndHashCode(callSuper = false)
public class ColorPrice extends AbstractAuditEntity {

  @Id
  @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "COLOR_PRICE_ID_SEQ")
  @SequenceGenerator(sequenceName = "COLOR_PRICE_ID_SEQ", allocationSize = 1, name = "COLOR_PRICE_ID_SEQ")
  @Column(columnDefinition = "NUMBER")
  private Long colorPriceId;

  @Column(columnDefinition = "NUMBER", nullable = false, updatable = false)
  private Long colorId;

  @Column(columnDefinition = "VARCHAR2(3 BYTE)", nullable = false)
  private String countryCode;

  @Column(columnDefinition = "NUMBER")
  private Double price;


}

#### 2.3 建立顏色相關Repository物件
##### 2.3.1 顏色主檔
[ColorMasterRepository.java](https://drive.google.com/file/d/1RMKuxgsVAem4By_QmwU5qDm_NTt9vdZl/view?usp=share_link)

##### 2.3.2 部品搭配色明細
[ColorMatchRepository.java](https://drive.google.com/file/d/1ZP-5jYq91LOqYNzu5IIoKTVw0kEhvgk-/view?usp=share_link)
##### 2.3.3 顏色價格明細
[ColorPriceRepository.java](https://drive.google.com/file/d/1kgW0kwdMHDUsdU_z6NuNc86jpjK-bXvF/view?usp=share_link)

#### 2.4 建立顏色相關Service物件

##### 2.3.1 查詢[顏色主檔]&[部品搭配顏色&顏色價格]方法

package com.ykkap.pro.bom.service;

import java.util.*;
import java.util.List;
import com.ykkap.pro.bom.repository.ColorMasterRepository;
import com.ykkap.pro.bom.repository.ColorMatchRepository;
import com.ykkap.pro.bom.repository.ColorPriceRepository;
import com.ykkap.pro.bom.vm.*;
import com.ykkap.pro.common.domain.*;
import com.ykkap.pro.common.repository.LookupsRepository;
import com.ykkap.pro.common.utils.ObjectExtensions;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
@Slf4j
public class ColorManageService {

  private final ColorMasterRepository colorMasterRepository;
  private final ColorMatchRepository colorMatchRepository;
  private final ColorPriceRepository colorPriceRepository;
  private final LookupsRepository lookupsRepository;
    //查詢主檔
  public Page<Map<String,Object>> findColorMaster( String partCat, String colorCode, String colorCh, String colorEng, String isQuickOrder, String colorStatus,Pageable pageable){
    String[] field = new String[]{"colorId", "colorCode", "colorCh", "colorEng", "partCat","isQuickOrder","colorRemark","colorStatus"};
    return ObjectExtensions.mapping(colorMasterRepository.findColorMaster(partCat, colorCode, colorCh, colorEng, isQuickOrder, colorStatus, pageable),field);
  }
//查詢搭配色與價格
    public FindColorMatchAndPriceVM findColorDetail(Long colorId){
        List<ColorMatch> colorMatchList=colorMatchRepository.findByColorIdOrderByPriorityAsc(colorId);
        List<ColorPrice> colorPriceList=colorPriceRepository.findByColorIdOrderByCountryCodeDescCreateDateDesc(colorId);
        FindColorMatchAndPriceVM findColorMatchAndPriceVM=new FindColorMatchAndPriceVM();
        List<FindColorMatchAndPriceVM.colorMatch> matchList=new ArrayList<>();
        List<FindColorMatchAndPriceVM.colorPrice> priceList=new ArrayList<>();
        //搭配色
        colorMatchList.forEach( match -> {
            FindColorMatchAndPriceVM.colorMatch colorMatch = new FindColorMatchAndPriceVM.colorMatch();
            BeanUtils.copyProperties(match,colorMatch);
            ColorMaster colorDetail=colorMasterRepository.findByColorId(colorMatch.getMaterColorId());
            colorMatch.setColorCode(colorDetail.getColorCode());
            colorMatch.setColorCh(colorDetail.getColorCh());
            matchList.add(colorMatch);
        });
        //價格
        colorPriceList.forEach( price -> {
            FindColorMatchAndPriceVM.colorPrice colorPrice = new FindColorMatchAndPriceVM.colorPrice();
            BeanUtils.copyProperties(price,colorPrice);
            Lookups countryInfo=lookupsRepository.findByLookupTypeAndLookupCode("COLOR_PRICE_COUNTRY",price.getCountryCode());
            colorPrice.setCountryCh(countryInfo.getLookupValues());
            priceList.add(colorPrice);
        });
        findColorMatchAndPriceVM.setColorMatchList(matchList);
        findColorMatchAndPriceVM.setColorPriceList(priceList);

        return findColorMatchAndPriceVM;
    }
    //查詢色碼
    public Page<Map<String,Object>> findColorCode(Pageable pageable,String filterVal){
        String[] field = new String[]{"colorId", "colorCode", "colorCh", "colorEng", "partCat","isQuickOrder","colorRemark","colorStatus"};
        return ObjectExtensions.mapping(colorMasterRepository.findColorCodeLov(pageable,filterVal),field);
    }
    

}

#### 2.4 建立顏色相關Controller物件

##### 2.4.1 查詢[顏色主檔]&[部品搭配顏色&顏色價格]API 接口

package com.ykkap.pro.bom.controller;


import java.util.Map;
import com.ykkap.pro.bom.service.ColorManageService;
import com.ykkap.pro.bom.vm.*;
import com.ykkap.pro.common.domain.ColorMaster;
import io.swagger.v3.oas.annotations.responses.ApiResponse;
import lombok.extern.slf4j.Slf4j;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.lang.Nullable;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;

import io.swagger.v3.oas.annotations.Operation;
import lombok.RequiredArgsConstructor;
@Slf4j
@RestController
@RequestMapping("/api/bom/color-manage")
@RequiredArgsConstructor
public class ColorManageController {
  public final ColorManageService colorManageService;
  @ApiResponse(description = "顏色資料主檔查詢")
  @GetMapping("/page/find-color-master")
  public Page<Map<String,Object>> findColorMaster(@RequestParam("partCat") String partCat,
                                                   @RequestParam("colorCode") String colorCode,
                                                   @RequestParam("colorCh") String colorCh,
                                                   @RequestParam("colorEng") String colorEng,
                                                   @RequestParam("isQuickOrder") String isQuickOrder,
                                                   @RequestParam("colorStatus") String colorStatus,Pageable pageable){
    return colorManageService.findColorMaster(partCat,colorCode,colorCh,colorEng,isQuickOrder,colorStatus,pageable);
  }
  @ApiResponse(description = "顏色資料部品搭配查詢")
  @GetMapping("/page/find-color-detail")
  public FindColorMatchAndPriceVM findColorDetail(@RequestParam("colorId") Long colorId){
    return colorManageService.findColorDetail(colorId);
  }

  
}

- 執行後端專案

    $ .\gradlew clean server:bootrun -Pdev -Dfile.encoding=UTF-8

### 3 查詢畫面(前後端整合)

#### 3.1 查詢按鈕 method findColors

<[範例檔案](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/8c73e07e-29dd-4975-a173-180d00e2c7f6/ColorManage2.vue?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221225%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221225T144123Z&X-Amz-Expires=86400&X-Amz-Signature=47edd91a3f50913b9ae4bc0b7be1215cbfe5c9aba630a6aaa94758d11aaa1717&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22ColorManage2.vue%22&x-id=GetObject)>

   // API 查找所有顏色
    async findColors () {
      let sortCondition = ''
      if (this.colorMasterTable.pagination.sortBy) {
        if (this.colorMasterTable.pagination.descending) {
          sortCondition = this.colorMasterTable.pagination.sortBy + ',' + 'desc'
        } else {
          sortCondition = this.colorMasterTable.pagination.sortBy
        }
      }
      this.search.size = this.colorMasterTable.pagination.rowsPerPage
      this.search.page = this.colorMasterTable.pagination.page - 1
      this.search.sort = sortCondition
      await this.get('bom/color-manage/page/find-color-master', this.search, res => {
        this.colorMasterTable.data = res.content
        this.colorMasterTable.pagination.rowsNumber = res.totalElements
      })
    }
  

#### 3.2 點選顏色資料顯示[部品搭配色]&[顏色價格]資訊

<[範例檔案](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/32a7eadd-967d-4632-bfc0-0a0809af1934/ColorManage2.vue?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221225%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221225T150200Z&X-Amz-Expires=86400&X-Amz-Signature=c97dd6689dac5a64eba1c6bc11538c0f4011836f68b8b15d2346a1a76fc68e3f&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22ColorManage2.vue%22&x-id=GetObject)>

- 使用lodash 套件:

import _ from 'lodash'

- 查詢[部品搭配色]&[顏色價格]資訊 method findColorDetail

   // API 查找所有顏色
    // 搜尋部品顏色搭配與顏色價格
     findColorDetail (colorId) {
      this.get('bom/color-manage/page/find-color-detail', { colorId: colorId }, res => {
        this.colorMatchTable.data = _.sortBy(JSON.parse(JSON.stringify(res.colorMatchList)), ['colorCode'])
        this.colorPriceTable.data = JSON.parse(JSON.stringify(res.colorPriceList))
      })
    }
  

- 新增 watch監控

   watch: {
    'colorMasterTable.selected': {
      handler (nval) {
        console.log(nval[0])
        if (nval[0]) {
          if (this.colorMasterTable.selected.length > 0 && nval[0].partCat === 'B') {
            this.findColorDetail(nval[0].colorId)
          }
          if (this.colorMasterTable.selected.length > 0 && nval[0].partCat === 'M') {
            this.colorMatchTable.data = []
            this.colorPriceTable.data = []
          }
        }
      }
    }
  }