From e174feeb7de3047386f8306e5f2533838a463c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Tue, 15 Oct 2024 20:01:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B7=A5=E5=8D=95=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/index.vue         |   3 +-
 src/style/app.scss                       |   6 +-
 src/views/order/components/infoSave.vue  |  87 ++++++++++++
 src/views/order/create-order.vue         | 170 +++++++++--------------
 src/views/order/orderList/detailView.vue |  40 ++----
 src/views/order/submit-order.vue         | 104 ++++++++------
 6 files changed, 230 insertions(+), 180 deletions(-)
 create mode 100644 src/views/order/components/infoSave.vue

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 916acfa..7be0354 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -24,7 +24,7 @@
 				</template>
 				<el-table-column min-width="1"></el-table-column>
 				<template #empty>
-					<el-empty :description="emptyText" :image-size="100"></el-empty>
+					<el-empty v-if="!hideEmpty" :description="emptyText" :image-size="100"></el-empty>
 				</template>
 			</el-table>
 		</div>
@@ -96,6 +96,7 @@
 			showPagination: { type: Boolean, default: true },
 			hideDo: { type: Boolean, default: false },
 			hideTotal: { type: Boolean, default: true },
+			hideEmpty: { type: Boolean, default: false },
 			hideRefresh: { type: Boolean, default: false },
 			hideSetting: { type: Boolean, default: false },
 			paginationLayout: { type: String, default: config.paginationLayout },
diff --git a/src/style/app.scss b/src/style/app.scss
index adcfe53..4dcd169 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -68,10 +68,10 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-side-bottom i {font-size: 16px;}
 .adminui-side-bottom:hover {color: var(--el-color-primary);}
 .aminui-side.isCollapse {width: 65px;}
-.el-menu .menu-tag {position: absolute;height: 18px;line-height: 18px;background: var(--el-color-danger);font-size: 12px;color: #fff;right: 20px;border-radius:18px;padding:0 6px;}
-.el-menu .el-sub-menu__title .menu-tag {right: 35px;top: 5px;}
+.el-menu .menu-tag {position: absolute;height: 15px;line-height: 15px;background: var(--el-color-danger);font-size: 10px;color: #fff;right: 20px;border-radius:14px;padding:0 4px;}
+.el-menu .el-sub-menu__title .menu-tag {right: 40px;top: 10px;}
 .el-menu--horizontal > li .menu-tag {display: none;}
-.aminui-side.isCollapse .el-menu > li .menu-tag{display: inline-block;width: auto;height: 18px;line-height: 18px;padding: 0 6px;visibility: initial;right: 15px;top: 2px;}
+.aminui-side.isCollapse .el-menu > li .menu-tag{display: inline-block;width: auto;height: 15px;line-height: 15px;padding: 0 4px;visibility: initial;right: 18px;top: 4px;}
 
 /* 右侧内容 */
 .aminui-body {flex: 1;display: flex;flex-flow: column;}
diff --git a/src/views/order/components/infoSave.vue b/src/views/order/components/infoSave.vue
new file mode 100644
index 0000000..c98c0ee
--- /dev/null
+++ b/src/views/order/components/infoSave.vue
@@ -0,0 +1,87 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="right">
+			<el-form-item label="部件SN/Sp" prop="component_serial_no">
+				<el-input class="input" v-model="form.component_serial_no" placeholder="部件SN/Se"></el-input>
+			</el-form-item>
+			<el-form-item label="部件厂商" prop="component_manufacturer">
+				<el-input class="input" v-model="form.component_manufacturer" type="text" placeholder="请输入部件厂商"></el-input>
+			</el-form-item>
+			<el-form-item label="部件型号" prop="component_model">
+				<el-input class="input" v-model="form.component_model" type="text" placeholder="请输入部件型号"></el-input>
+			</el-form-item>
+			<el-form-item label="部件PN/Sp" prop="component_pn">
+				<el-input class="input" v-model="form.component_pn" type="text" placeholder="请输入部件SN/Sp"></el-input>
+			</el-form-item>
+			<el-form-item label="SLA截止时间" prop="sla_expiration">
+				<el-date-picker class="input" v-model="form.sla_expiration" type="date" value-format="YYYY-MM-DD" placeholder="请选择SLA截止时间" style="width: 100%"></el-date-picker>
+			</el-form-item>
+			<el-form-item label="剩余BD数" prop="bd_backup_count">
+				<el-input class="input" v-model="form.bd_backup_count" type="text" placeholder="请输入剩余BD数"></el-input>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增部件信息',
+				},
+				visible: false,
+				isSave: false,
+				//表单数据
+				form: {
+					component_serial_no:"",
+					component_manufacturer:"",
+					component_model:"",
+					component_pn:""
+				},
+				rules:{},
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.$emit('success', this.form, this.mode);
+						this.visible = false;
+
+						// this.isSave = true;
+						// const res = await this.$API.system.role.add.post(this.form);
+						// this.isSave = false;
+						// if(res.code == 200){
+						// 	this.$message.success("操作成功")
+						// }
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/order/create-order.vue b/src/views/order/create-order.vue
index 3b6a1cd..0e0a274 100644
--- a/src/views/order/create-order.vue
+++ b/src/views/order/create-order.vue
@@ -1,15 +1,15 @@
 <template>
-	<el-container>
-		<el-main>
-			<el-scrollbar>
+	<el-container class="mainView">
+		<el-scrollbar style="width: 100%">
+			<el-main>
 				<el-form ref="form" :size="size" :rules="rules" label-width="95px" :model="form">
 					<div class="boxMain">
-						<div class="title">工作时间</div>
+						<div class="title">工单时间</div>
 						<div class="boxCom">
 							<el-row>
 								<el-col :span="8" :lg="6">
 									<el-form-item label="报修客户" prop="customer">
-										<el-select class="input" v-model="form.customer" @visible-change="getCustomerSelect('customer')" placeholder="请选择报修客户">
+										<el-select class="input" v-model="form.customer_id" @visible-change="getCustomerSelect('customer')" placeholder="请选择报修客户">
 											<el-option v-for="(item,index) in setMap['customer']" :key="index" :value="item.id" :label="item.customer_name"></el-option>
 										</el-select>
 									</el-form-item>
@@ -143,8 +143,11 @@
 							</el-row>
 						</div>
 					</div>
-					<div class="boxMain">
-						<div class="title">维保工单信息</div>
+					<div class="boxMain boxMainNoBorder">
+						<div class="title titleFlex">
+							<span class="name">维保部件信息</span>
+							<el-button type="primary" plain :size="size" icon="el-icon-Plus" @click="addOrder">添加部件信息</el-button>
+						</div>
 						<div class="boxCom">
 							<el-row>
 								<el-col :span="25" :lg="24">
@@ -156,100 +159,40 @@
 									</el-form-item>
 								</el-col>
 							</el-row>
-							<div class="orderView" v-if="!form.is_verify_erp_inventory">
-								<el-row>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="部件SN/Sp" prop="component_serial_no">
-											<el-input class="input" v-model="form.component_serial_no" placeholder="部件SN/Se"></el-input>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="部件厂商" prop="component_manufacturer">
-											<el-input class="input" v-model="form.component_manufacturer" type="text" placeholder="请输入部件厂商"></el-input>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="部件型号" prop="component_model">
-											<el-input class="input" v-model="form.component_model" type="text" placeholder="请输入部件型号"></el-input>
-										</el-form-item>
-									</el-col>
-								</el-row>
-								<el-row>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="部件PN/Sp" prop="component_pn">
-											<el-input class="input" v-model="form.component_pn" type="text" placeholder="请输入部件SN/Sp"></el-input>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="SLA截止时间" prop="sla_expiration">
-											<el-date-picker class="input" v-model="form.sla_expiration" type="date" value-format="YYYY-MM-DD" placeholder="请选择SLA截止时间"></el-date-picker>
-										</el-form-item>
-									</el-col>
-									<el-col :span="8" :lg="6">
-										<el-form-item label="剩余BD数" prop="bd_backup_count">
-											<el-input class="input" v-model="form.bd_backup_count" type="text" placeholder="请输入剩余BD数"></el-input>
-										</el-form-item>
-									</el-col>
-								</el-row>
-							</div>
-							<div v-else>
-								<div v-for="(item,index) in form.component_info" :key="index">
-									<el-row>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="部件SN/Sp" :prop="'form.component_info.'+index+'.component_serial_no'">
-												<el-input class="input" v-model="item.component_serial_no" placeholder="部件SN/Se"></el-input>
-											</el-form-item>
-										</el-col>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="部件厂商" :prop="'form.component_info.'+index+'.component_manufacturer'">
-												<el-input class="input" v-model="item.component_manufacturer" type="text" placeholder="请输入部件厂商"></el-input>
-											</el-form-item>
-										</el-col>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="部件型号" :prop="'form.component_info.'+index+'.component_model'">
-												<el-input class="input" v-model="item.component_model" type="text" placeholder="请输入部件型号"></el-input>
-											</el-form-item>
-										</el-col>
-									</el-row>
-									<el-row>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="部件PN/Sp" :prop="'form.component_info.'+index+'.component_pn'">
-												<el-input class="input" v-model="item.component_pn" type="text" placeholder="请输入部件SN/Sp"></el-input>
-											</el-form-item>
-										</el-col>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="SLA截止时间" :prop="'form.component_info.'+index+'.sla_expiration'">
-												<el-date-picker class="input" v-model="item.sla_expiration" type="date" value-format="YYYY-MM-DD" placeholder="请选择SLA截止时间"></el-date-picker>
-											</el-form-item>
-										</el-col>
-										<el-col :span="8" :lg="6">
-											<el-form-item label="剩余BD数" :prop="'form.component_info.'+index+'.bd_backup_count'">
-												<el-input class="input" v-model="item.bd_backup_count" type="text" placeholder="请输入剩余BD数"></el-input>
-											</el-form-item>
-										</el-col>
-									</el-row>
-								</div>
-							</div>
-							<el-row v-if="form.is_verify_erp_inventory">
-								<div style="padding-left: 105px">
-									<el-button type="primary" size="small" icon="el-icon-Plus" @click="addOrder"></el-button>
-									<el-button type="danger" size="small" icon="el-icon-Minus" @click="deleteOrder" v-if="form.component_info.length>1"></el-button>
-								</div>
-							</el-row>
+							<sc-table ref="table" :data="form.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
+								<sc-table-column type="index" label="序号" width="65"></sc-table-column>
+								<sc-table-column prop="component_serial_no" label="部件SN/Sp"></sc-table-column>
+								<sc-table-column prop="component_manufacturer" label="部件厂商"></sc-table-column>
+								<sc-table-column prop="component_model" label="部件型号"></sc-table-column>
+								<sc-table-column prop="component_pn" label="部件PN/Sp"></sc-table-column>
+								<sc-table-column prop="sla_expiration" label="SLA截止时间"></sc-table-column>
+								<sc-table-column prop="bd_backup_count" label="甚于BD数"></sc-table-column>
+								<sc-table-column label="操作" fixed="right" width="120">
+									<template #default="scope">
+										<el-button link type="danger" :size="size" @click="deleteOrder(scope.row,scope.$index)">删除</el-button>
+									</template>
+								</sc-table-column>
+							</sc-table>
 						</div>
 					</div>
 					<div class="btnBox">
 						<el-button type="primary" :size="size" @click="save" :loading="isSave">确认保存</el-button>
 					</div>
 				</el-form>
-			</el-scrollbar>
-		</el-main>
+			</el-main>
+		</el-scrollbar>
 	</el-container>
+
+	<info-save-dialog ref="saveDialog" v-if="dialog.save" @success="handleSaveSuccess" @closed="dialog.save=false"></info-save-dialog>
 </template>
 
 <script>
+import infoSaveDialog from "@/views/order/components/infoSave";
 export default {
-	name: "create-order",
+	name: "",
+	components:{
+		infoSaveDialog
+	},
 	data(){
 		return{
 			size:"small",
@@ -259,7 +202,7 @@ export default {
 				fault_type:[],
 			},
 			form:{
-				customer:"",  // 客户
+				customer_id:"",  // 客户
 				standard_model:"", // 标准机型
 				repair_order_no:"",
 				maintenance_grade:"", // 维修等级
@@ -285,12 +228,12 @@ export default {
 				maintenance_plan: '', // 维保等级：1-铜牌；常量维护项
 				is_verify_erp_inventory:true,
 				component_info:[
-					{
-						component_serial_no:"",
-						component_manufacturer:"",
-						component_model:"",
-						component_pn:""
-					}
+					// {
+					// 	component_serial_no:"",
+					// 	component_manufacturer:"",
+					// 	component_model:"",
+					// 	component_pn:""
+					// }
 				]
 			},
 			rules:{
@@ -303,6 +246,10 @@ export default {
 				sla_expiration:[{required:true,trigger:"change",message:"SLA截止时间不能为空"}],
 				bd_backup_count:[{required:true,trigger:"blur",message:"剩余BD数不能为空"}],
 			},
+
+			dialog: {
+				save: false,
+			},
 		}
 	},
 	mounted() {
@@ -329,16 +276,22 @@ export default {
 			}
 		},
 		addOrder(){
-			this.form.component_info.push({
-				component_serial_no:"",
-				component_manufacturer:"",
-				component_model:"",
-				component_pn:""
+			this.dialog.save = true;
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open()
 			})
 		},
-		deleteOrder(){
-			this.form.component_info.pop();
+		handleSaveSuccess(data){
+			this.form.component_info.push(data);
 		},
+		deleteOrder(row,num){
+			this.form.component_info.forEach((em,index)=>{
+				if(index === num){
+					this.form.component_info.splice(index,1);
+				}
+			});
+		},
+
 		save(){
 			this.$refs.form.validate(async (valid) => {
 				if (valid) {
@@ -356,12 +309,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.mainView{
+	background: var(--el-color-white);
+}
 .boxMain{
 	border-bottom: 1px solid #f2f2f2;
 	padding: 10px 0 5px 0;
 	.title{
 		margin-bottom: 10px;
 	}
+	.titleFlex{
+		display: flex;align-items: stretch;justify-content: space-between;
+	}
 	.boxCom{
 		.el-row{
 			.el-col{
@@ -373,6 +332,9 @@ export default {
 		}
 	}
 }
+.boxMainNoBorder{
+	border-bottom: 0;
+}
 .btnBox{
 	margin-top: 15px;
 	text-align: left;
diff --git a/src/views/order/orderList/detailView.vue b/src/views/order/orderList/detailView.vue
index 6d5e790..2c9ae6b 100644
--- a/src/views/order/orderList/detailView.vue
+++ b/src/views/order/orderList/detailView.vue
@@ -127,36 +127,23 @@
 			</div>
 		</div>
 		<div class="cardItem">
-			<div class="title">部件信息</div>
+			<div class="title">维保部件信息</div>
 			<div class="cardBody">
 				<el-row>
-					<el-col :span="8" :lg="6">
-						<span class="label">部件SN/Sp：</span>
-						<span class="text">{{info.component_serial_no}}</span>
-					</el-col>
-					<el-col :span="8" :lg="6">
-						<span class="label">部件厂商：</span>
-						<span class="text">{{info.component_manufacturer}}</span>
-					</el-col>
-					<el-col :span="8" :lg="6">
-						<span class="label">部件型号：</span>
-						<span class="text">{{info.component_model}}</span>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="8" :lg="6">
-						<span class="label">部件PN/Sp：</span>
-						<span class="text">{{info.component_pn}}</span>
-					</el-col>
-					<el-col :span="8" :lg="6">
-						<span class="label">SLA截止时间：</span>
-						<span class="text">{{info.sla_expiration}}</span>
-					</el-col>
-					<el-col :span="8" :lg="6">
-						<span class="label">剩余BD数：</span>
-						<span class="text">{{info.bd_backup_count}}</span>
+					<el-col :span="24" :lg="24">
+						<span class="label">验证ERP库存：</span>
+						<span class="text">{{info.is_verify_erp_inventory?'是':'否'}}</span>
 					</el-col>
 				</el-row>
+				<sc-table ref="table" :data="info.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
+					<sc-table-column type="index" label="序号" width="65"></sc-table-column>
+					<sc-table-column prop="component_serial_no" label="部件SN/Sp"></sc-table-column>
+					<sc-table-column prop="component_manufacturer" label="部件厂商"></sc-table-column>
+					<sc-table-column prop="component_model" label="部件型号"></sc-table-column>
+					<sc-table-column prop="component_pn" label="部件PN/Sp"></sc-table-column>
+					<sc-table-column prop="sla_expiration" label="SLA截止时间"></sc-table-column>
+					<sc-table-column prop="bd_backup_count" label="甚于BD数"></sc-table-column>
+				</sc-table>
 			</div>
 		</div>
 		<slot name="review"></slot>
@@ -178,6 +165,7 @@ export default {
 	},
 	data(){
 		return{
+			size:'small',
 			info:{},
 			statusList:[]
 		}
diff --git a/src/views/order/submit-order.vue b/src/views/order/submit-order.vue
index 54ce9ab..ad48759 100644
--- a/src/views/order/submit-order.vue
+++ b/src/views/order/submit-order.vue
@@ -120,48 +120,31 @@
 						</div>
 					</div>
 					<div class="cardItem">
-						<div class="title">部件信息</div>
+						<div class="title titleFlex">
+							<span class="name">维保部件信息</span>
+							<el-button type="primary" plain :size="size" icon="el-icon-Plus" @click="addOrder">添加部件信息</el-button>
+						</div>
+						<el-row>
+							<el-col :span="24" :lg="24">
+								<span class="label labelText">验证ERP库存：</span>
+								<span class="text">{{info.is_verify_erp_inventory?'是':'否'}}</span>
+							</el-col>
+						</el-row>
 						<div class="cardBody">
-							<el-row>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">部件SN/Sp：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.component_serial_no" placeholder="部件SN/Sp"></el-input>
-									</span>
-								</el-col>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">部件厂商：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.component_manufacturer" placeholder="部件厂商"></el-input>
-									</span>
-								</el-col>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">部件型号：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.component_model" placeholder="部件型号"></el-input>
-									</span>
-								</el-col>
-							</el-row>
-							<el-row>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">部件PN/Sp：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.component_pn" placeholder="部件PN/Sp"></el-input>
-									</span>
-								</el-col>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">SLA截止时间：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.sla_expiration" placeholder="SLA截止时间"></el-input>
-									</span>
-								</el-col>
-								<el-col :span="8" :lg="6">
-									<span class="label labelText">剩余BD数：</span>
-									<span class="text">
-										<el-input :size="size" v-model="info.bd_backup_count" placeholder="剩余BD数"></el-input>
-									</span>
-								</el-col>
-							</el-row>
+							<sc-table ref="table" :data="info.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
+								<sc-table-column type="index" label="序号" width="65"></sc-table-column>
+								<sc-table-column prop="component_serial_no" label="部件SN/Sp"></sc-table-column>
+								<sc-table-column prop="component_manufacturer" label="部件厂商"></sc-table-column>
+								<sc-table-column prop="component_model" label="部件型号"></sc-table-column>
+								<sc-table-column prop="component_pn" label="部件PN/Sp"></sc-table-column>
+								<sc-table-column prop="sla_expiration" label="SLA截止时间"></sc-table-column>
+								<sc-table-column prop="bd_backup_count" label="甚于BD数"></sc-table-column>
+								<sc-table-column label="操作" fixed="right" width="120">
+									<template #default="scope">
+										<el-button link type="danger" :size="size" @click="deleteOrder(scope.row,scope.$index)">删除</el-button>
+									</template>
+								</sc-table-column>
+							</sc-table>
 						</div>
 					</div>
 					<div class="btnView">
@@ -171,11 +154,17 @@
 			</el-scrollbar>
 		</el-main>
 	</el-container>
+
+	<info-save-dialog ref="saveDialog" v-if="dialog.save" @success="handleSaveSuccess" @closed="dialog.save=false"></info-save-dialog>
 </template>
 
 <script>
+import infoSaveDialog from "@/views/order/components/infoSave";
 export default {
-	name: "submit-order",
+	name: "",
+	components:{
+		infoSaveDialog
+	},
 	data(){
 		return{
 			size:"small",
@@ -185,7 +174,11 @@ export default {
 				order_id:Number(this.$route.query.id)
 			},
 			info:{},
-			statusList:[]
+			statusList:[],
+
+			dialog: {
+				save: false,
+			},
 		}
 	},
 	mounted() {
@@ -239,12 +232,31 @@ export default {
 				this.statusList = res.data;
 			}
 		},
+		addOrder(){
+			this.dialog.save = true;
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open()
+			})
+		},
+		handleSaveSuccess(data){
+			this.form.component_info.push(data);
+		},
+		deleteOrder(row,num){
+			this.form.component_info.forEach((em,index)=>{
+				if(index === num){
+					this.form.component_info.splice(index,1);
+				}
+			});
+		},
 	}
 }
 </script>
 
 <style scoped lang="scss">
-.btnView{
-	text-align: left;
-}
+	.btnView{
+		text-align: left;
+	}
+	.titleFlex{
+		display: flex;align-items: stretch;justify-content: space-between;
+	}
 </style>