update 基本完成设备数采

src/components/base-dialog/AttrForm/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="attr-form">
-		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail" @click="showAddAttr = true">添加</el-button></h3>
+		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail && !showAddAttr" @click="showAddAttr = true">添加</el-button></h3>
 		<div v-if="!showAddAttr">
 			<component
 				key="sub-table"
 				:is="require('../../base-table/index.vue').default"
-				:table-head-configs="tableConfigs"
+				:table-head-configs="filterTableConfigs()"
 				:data="dataList"
 				:max-height="500"
 				@operate-event="handleOperations"
@@ -23,16 +23,23 @@
 		</div>
 		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
 			<el-row>
-				<el-col :span="10" :offset="7">
-					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
-						<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
-							<el-input v-model="AttrForm[field.prop]" clearable />
-							<!-- add more...  -->
-						</el-form-item>
+				<el-col>
+					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true" label-position="top">
+						<el-row :gutter="20" style="padding: 0 24px;">
+							<el-col :span="attrFormFields.length > 6 ? 6 : 12" v-for="field in attrFormFields" :key="field.prop + 'col'">
+								<el-form-item :key="field.prop" :prop="field.prop" :label="field.name" style="width: 100%">
+									<el-input v-if="field.formType === 'input' || !field.formType" v-model="AttrForm[field.prop]" placeholder="请填写" clearable />
+									<el-select v-if="field.formType === 'select'" v-model="AttrForm[field.prop]" clearable>
+										<el-option v-for="opt in field.formOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+									</el-select>
+									<!-- add more...  -->
+								</el-form-item>
+							</el-col>
+						</el-row>
 					</el-form>
 				</el-col>
 			</el-row>
-			<el-row style="text-align: center;">
+			<el-row style="text-align: right;">
 				<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
 				<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
 			</el-row>
@@ -114,6 +121,20 @@ export default {
 		}
 	},
 	methods: {
+		/** filter tableConfigs */
+		filterTableConfigs() {
+			// return this.tableConfigs.map(item => {
+			// 	const {prop, name, filter} = item
+			// 	const newConfigs = {prop,name,filter}
+			// 	if (item.type) newConfigs.type = item.type
+			// 	if (item.fixed) newConfigs.fixed = item.fixed
+			// 	if (item.width) newConfigs.width = item.width
+			// 	if (item.subcomponent) newConfigs.subcomponent = item.subcomponent
+			// 	if (item.options) newConfigs.options = item.options
+			// 	return newConfigs
+			// })
+			return this.tableConfigs
+		},
 		/** init dataform */
 		initAttrForm() {
 			Object.entries(this.AttrForm).forEach(([key, value]) => {
@@ -255,3 +276,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.attr-form >>> .el-form .el-form-item__label {
+	padding: 0;
+}
+</style>