測試需求平臺8-Arco組件實現產品增改需求

?此系列為整理分享已完結入門搭建《TPM提測平臺》系列的迭代版，擁抱Vue3.0將前端框架替換成字節最新開源的arco.design，其中約60%重構和20%新增內容，定位為從 0-1手把手實現簡單的測試平臺開發教程，內容將囊括基礎、擴展和實戰，由淺入深帶你實現測試開發崗位中平臺工具技術能力入門和提升

👨?💻 作者：大奇 MegaQi ?
?? 專注測試開發實戰&車載方向干貨分享，歡迎訪問長期關注博客和公眾號。

1.組件用法學習

1.1 話框 Modal

在當前頁面打開一個浮層，承載相關操作，對話框用于關鍵信息錄入或信息確認，喚出對話框時會中斷用戶當前的任務流程，所以請謹慎使用對話框以避免對用戶過度干擾。

Arco Design - 企業級產品的完整設計和開發解決方案

組件構成和類型

標題（必有）：可以是純文字，也可以在文字前帶有icon來明示狀態；
正文（可選）：可包含文字描述、表單、表格、步驟條、通知；
行動按鈕（可選）：通知類彈窗一般只包含兩個按鈕，確認或信息錄入彈窗一般為兩個按鈕（一般是“確定、取消”）；
關閉按鈕（可選）：點擊可關閉彈窗；
黑色蒙層（必有）：黑色蒙層覆蓋全頁面，蒙層下方的頁面內容不響應滾動和點擊。

可實現部分相同功能的關聯組件還有：抽屜 Drawer 和 氣泡確認框 Popconfirm

何時使用建議

要求用戶立即響應：使用對話框請求阻止用戶繼續操作；
通知用戶緊急信息：使用對話框通知用戶有關其當前任務的緊急信息，通常用于報告系統錯誤或告知結果；
確認用戶決定：使用對話框來確認用戶的決定，清楚描述當前行為可能導致的潛在后果，如果該行為具有破壞性或不可逆轉性，則使用報錯警告色。

其中不建議使用情況：當對話框中內容過多，需要復雜的操作，甚至需要二次跳轉時，建議使用抽屜或 新開頁 ，而非對話框

基礎用法

從下邊的基礎代碼中需要了解幾點內容

<a-modal> 對話框組件綁定v-model變量，ok確定和cancel取消時間
通過變量visible控制顯隱，handleClick和handleCancel做其賦值方法

<template><a-button @click="handleClick">Open Modal</a-button><a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel"><template #title>Title</template><div>我是對話框的內容顯示</div></a-modal>
</template><script>
import { ref } from 'vue';export default {setup() {const visible = ref(false);const handleClick = () => {visible.value = true;};const handleOk = () => {visible.value = false;};const handleCancel = () => {visible.value = false;}return {visible,handleClick,handleOk,handleCancel}},
}
</script>

1.2 表單 Form

具有數據收集、校驗和提交功能的表單，內部組件包含復選框、單選框、輸入框、下拉選擇框等，根據需要進行自由基礎組件組合擴展

基礎用法

一個比較簡單由input、checkbox、button 組成的表單，在提交時候獲取表單項值

例子代碼參考如下：

<a-form>為表單主包包裹， :mode綁定組值對象
<a-form-item>為子項，filed（數據項必填）表單元素在數據對象中的path， label標簽的文本
@submit 表單提交時觸發事件，參數data 等同于mode綁定form集合值

更多API Arco Design Vue

<template><a-form :model="form" :style="{width:'600px'}" @submit="handleSubmit"><a-form-item field="name" label="Username"><a-input v-model="form.name" placeholder="please enter your username..." /></a-form-item><a-form-item field="post" label="Post"><a-input v-model="form.post" placeholder="please enter your post..." /></a-form-item><a-form-item field="isRead"><a-checkbox v-model="form.isRead">I have read the manual</a-checkbox></a-form-item><a-form-item><a-button html-type="submit">Submit</a-button></a-form-item></a-form>{{ form }}
</template><script>
import { reactive } from 'vue';export default {setup() {const form = reactive({name: '',post: '',isRead: false,})const handleSubmit = (data) => {console.log(data)}return {form,handleSubmit}},
}
</script>

表單支持三種布局方式： horizontal - 水平排列（默認）， vertical - 垂直排列， inline - 行內排列。通過form屬性layout=""設置.

1.3 輸入框 Input

光標位于輸入框時，允許用戶輸入或編輯文本內容的基本表單組件。

Arco Design - 企業級產品的完整設計和開發解決方案

組件構成

容器：承載文本內容的容器，通過包裹文本并與文本在顏色上形成對比來提高輸入區域的可發現性;
標簽文字 ：容器頂部或左側的簡短說明文字，用于說明需要輸入的內容，盡量不超過6個漢字;
輔助文字 ：容器底部的幫助性文字，動態展示能夠幫助用戶完成輸入的相關信息；
占位文字 ：容器中的次級提示文字，提供與輸入內容相關的提示或例子，一般為不帶標點符號的陳述句，不應包含完成任務所需的重要信息;
前綴圖標：用于描述輸入框中可輸入的內容及格式（如：電話、日期圖標）；
后綴圖標：根據不同場景具有多樣的功能，常用場景如下：
錯誤提示，可與輔助文字中的錯誤提示結合出現；
內容清除按鈕，可點擊一鍵清除輸入框中已輸入的內容；
語音輸入按鈕，點擊觸發語音輸入功能；
密碼隱藏按鈕；
前后置標簽：在輸入框前后添加的預置內容，常見標簽有網址前后信息和計數單位.

組件類型

單行輸入框 : 僅可輸入一行文本，需當輸入內容超出輸入框時，內容截斷;
多行輸入框: 高度自適應的輸入框，支持輸入多行文本，當輸入多行文本時，輸入框容器隨內容向下擴展;
文本域：可拉動右下角調節標來調節寬高尺寸的多行文本輸入框；

基本用法

使用方法很簡單，一般在對應父組件內引用<a-input/>并配置對應的屬性或者方法，比如allow-clear支持清空輸入，其他更多參考API。

<template><a-input placeholder="請輸入內容" allow-clear />
</template>

1.4 按鈕 Button

一種命令組件，可發起一個即時操作，通用組件。

Arco Design Vue

按鈕類型

此組件是最基本的組件之一，幾乎頁面交互的事件動作都要通過按鈕完成，在Arco樣式除了默認按鈕，還包含但不限于如下類型：

圖標按鈕按鈕可以嵌入圖標。在只設置圖標時，按鈕的寬高相等
樣式按鈕 可以指定大小、形狀和狀態、線性、文本等
組合按鈕 通過 <a-button-group> 組件使按鈕以組合方式出現。可用在同級多項操作中

基本用法

在需要渲染位置上引用<a-button></a-button>，其<>內為Props`Events\Slots`配置，><內為文本

<template><a-space><a-button type="primary">主要按鈕</a-button><a-button>次要按鈕</a-button><a-button type="dashed">虛線按鈕</a-button><a-button type="outline">線性按鈕</a-button><a-button type="text">文本按鈕</a-button></a-space>
</template>

以上基本參考官方文檔給與使用方法，在后續的開發文章中對于初期使用的組件還會采用此方式，目的主要是牢固掌握正確的使用方法。

2.應用與需求實現

上述幾個組將成為本篇實現產品管理的核心組件，將利用這幾個組件完成增、改、刪的交互操作。

2.1 產品添加實現

通過按鈕、對話框、表單帶大家一步步分解實現產品添加的功能。

步驟1: 完成基礎對話框

在產品管理vue文件中<template>繼續一個按鈕和對話框組件，并分別綁定事件，對話框的顯示和隱藏通過v-model: visible控制。

<template><a-button type="primary" @click="addButtonClick">添加產品線</a-button><a-modal v-model:visible="addModalVisible" title="添加產品"  @before-ok="addModalOk" @cancel="addModalCancel"><div>todo...</div></a-modal><a-table :columns="columns" :data="renderList" :pagination="false" />
</template>

步驟2: 定義變量和方法

在<script lang="ts" setup>定義addModalVisible，實現addButtonClick觸發賦值true（顯示對話框），addModalCancel觸發賦值為false（關閉對話框），其addModalOk將會實現表單提交暫時寫個日志打印，證明測試觸發有效。

/* 產品添加對話框start */const addModalVisible = ref(false); // 控制顯示和隱藏布爾值，默認為flaseconst addButtonClick = () => {  // 添加產品線按鈕觸發事件addModalVisible.value = true; // 賦值為True顯示};const addModalOk = () => { // 對話框確定按鈕，提交數據操作console.log("todo添加接口請求處理")};const addModalCancel = () => { // 對話框取消按鈕，賦值使其關閉對話框addModalVisible.value = false;}/* 產品添加對話框end */

步驟3: 添加模版顯關測試

測試通過點擊“添加產品線”按鈕觸發顯示對話框，點擊取消關閉對話框，再次打開點擊確定按鈕確認日志有輸出。

步驟4: Madel增加表單項

表單數據需要綁定的數據，所以需要先在<script>中定義個JSON對象，所有默認為空。

// 定義產品表單數據對象
const productForm = { id: undefined,title: undefined,keyCode: undefined,desc: undefined,operator: ""
};// 為了驗證表單數據有效，將點擊OK事件打印換成輸出productForm
const addModalOk = () => { console.log(productForm)
};

接著實現form及內表單項用<a-input>，Model的表單整體數據綁定通過 :model，各項通過v-model指定產品表單數據屬性，代碼里有個描述項是用的<a-textarea>文本域，雖然在組件學習中沒有講，但其實完全可以看成多行的input。

Arco Design Vue

<a-modal v-model:visible="addModalVisible" title="添加產品"  @before-ok="addModalOk" @cancel="addModalCancel"><a-form :model="productForm"><a-form-item field="title" label="名稱"><a-input v-model="productForm.title" placeholder="產品線名稱"/></a-form-item><a-form-item field="keyCode" label="唯一嗎"><a-input v-model="productForm.keyCode" placeholder="keycode不可重復"/></a-form-item><a-form-item field="desc" label="備注"><a-textarea v-model="productForm.desc" placeholder="一些備注說明"/></a-form-item></a-form>
</a-modal>

代碼保存后自動編譯，如果沒有頁面或者終端輸出錯誤，點擊“添加產品線”按鈕可以看到增加了表單后的最終效果。

步驟5: 表單數據落庫

在實現真正的添加前，先驗證下對話框表單正確輸入內容后表單數據能否正常打印，從Console打印日志來看符合預期。

需要先完成 src/api/product.ts 創建接口定義，因為我們目前使用的TypeScript所以一般都會同步定義interface即面向對象的編程，它定義了行為和動作規范。

export interface productData {id: number;title: string;keyCode: string;desc: string;operator: string;
};export function apiProductAdd(data: productData) {return axios.post('/api/product/create', data);
}

完善添加方法，將最終的表單數據調用接口，實現新增產品數據的落庫，代碼邏輯中不能忘記接口返回成功后調用fetchData()刷新下產品里表。

import { apiProductAdd } from '@/api/product';const addModalOk = async () => { // 對話框確定按鈕，提交數據操作const res = await apiProductAdd(productForm);if (res.code === 20000) {addModalVisible.value = false; // 關閉對話框fetchData(); // 添加成功重新請求列表} else {console.log("產品添加失敗")}};

步驟6 測試驗證

上述頁面步驟代碼一路順下vue檢查和變編譯沒有報錯的話，此處大奇通過一個gif演示下正向操作的效果。

2.2 產品修改實現

在實現產品線添加的前端交互功能上詳細做了分步講解，對于產品的修改對話框功能上，除了編輯內容數據要做個初始化外幾乎可以套用，因此這里不在做分步講解，只給出不一樣的地方以及最參考代碼，大家可按照2.1步驟自行分解，爭取熟練掌握組件使用和交互的開發。

表行編輯菜單

產品線修改是對列表數據行的操作，對此需要增加一個行菜單按鈕，方式是通過Table組件自定義渲染，具體表格組件的時候將在后邊詳細講，這里先參考下圖進行功能添加。

稍微解釋下slot表示插槽，template中{record}便是所在行數據，即在點擊編輯處方法時將整行數據透傳過去，增加了操作列后的成果如下：

代碼實現與演示

編輯產品邏輯代碼中需要注意兩點，其余直接參考實現代碼：

需要對productFrom做reactive包裹，因為它是Vue3中提供響應式的方法，而vue2中是直接通過defineProperty實現，這個邏輯很不同注意區分。
編輯對話框需要額外增加一個表單項ID，并且不可編輯

代碼1： src/api/product.ts

export function apiProductUpdate(data: productData) {return axios.post('/api/product/update', data);
}

代碼2：src/views/product/index.vue

<template>...省略...<a-modal v-model:visible="editModalVisible" title="編輯產品"  @before-ok="editModalOk" @cancel="editModalCancel"><a-form :model="productForm"><a-form-item field="id" label="編號" disabled><a-input v-model="productForm.id" /></a-form-item><a-form-item field="title" label="名稱"><a-input v-model="productForm.title" placeholder="產品線名稱"/></a-form-item><a-form-item field="keyCode" label="唯一嗎"><a-input v-model="productForm.keyCode" placeholder="keycode不可重復"/></a-form-item><a-form-item field="desc" label="備注"><a-textarea v-model="productForm.desc" placeholder="一些備注說明"/></a-form-item></a-form></a-modal><a-table :columns="columns" :data="renderList" :pagination="false" ><template #optional="{ record }"><a-button type="text" @click="editButtonClick(record)">編輯</a-button></template></a-table>
</template><script lang="ts" setup>// 注意引入編輯接口方法import { apiProductList, apiProductAdd, apiProductUpdate } from '@/api/product';// 從vue引入reactiveimport { ref, reactive } from 'vue';...省略...// 添加或編輯使用表單對象vue3使用reactive使其對象編程響應式，否則form表單不會反填數據const productForm=reactive({id: undefined,title: undefined,keyCode: undefined,desc: undefined,operator: 'Mega Qi'})/* 產品編輯部分start */// 控制顯示和隱藏編輯對話框布爾值，默認為flaseconst editModalVisible = ref(false); // 修改產品線按鈕觸發事件  const editButtonClick = (record) => {  // 將行數據數據賦值給productFormproductForm.id = record.id;productForm.title = record.title;productForm.keyCode = record.keyCode;productForm.desc = record.desc;// 編輯顯隱賦值為True顯示editModalVisible.value = true; };// 編輯對話框確定按鈕，提交數據操作const editModalOk = async () => {const res = await apiProductUpdate(productForm);if (res.code === 20000) {editModalVisible.value = false; // 修改成功重新請求列表fetchData(); } else {console.log("產品修改失敗");}};// 編輯對話框取消按鈕，賦值使其關閉對話框const editModalCancel = () => { editModalVisible.value = false;}/* 產品編輯部分end */</script>

演示：對產品編輯操作做個測試