feat: 修复场景详情，及优化样式

src/views/iot/scene/manage/component/actionItem.vue

@@ -9,16 +9,15 @@
       <div class="title flex">
         <div class="icon"></div>串行动作
       </div>
-      <div class="product flex flex-warp">
+      <div class="product flex flex-warp" style="flex-flow: row wrap;justify-content: flex-start;align-items: flex-start !important">
         <ActionSerialItem :index="index" :serial="item.serial" :sourceData="sourceData" @saveData="saveData" @delData="delData"></ActionSerialItem>
       </div>
 
       <div class="title flex">
         <div class="icon"></div>并行动作
       </div>
-      <div class="product flex flex-warp">
+      <div class="product flex flex-warp" style="flex-flow: row wrap;justify-content: flex-start;align-items: flex-start  !important;">
         <ActionParallelItem :index="index" :parallel="item.parallel" :sourceData="sourceData" @saveData="saveData" @delData="delData"></ActionParallelItem>
-
       </div>
     </div>
     <div>
@@ -40,12 +39,12 @@ import api from '/@/api/scene';
 const loading = ref(false)
 //初始化数据
 const actionList_temp = ref([{
-  serial: [{}],
-  parallel: [{}],
+  serial: [{ actionType: '' }],
+  parallel: [{ actionType: '' }],
 }]);
 const actionList = ref([{
-  serial: [{}],
-  parallel: [{}],
+  serial: [{ actionType: '' }],
+  parallel: [{ actionType: '' }],
 }]);
 const originalSceneList = ref([{
   id: 0
@@ -67,6 +66,10 @@ const props = defineProps({
   }
 })
 
+const defaultObj = {
+  actionType: ''
+}
+
 const getOneDetail = () => {
   loading.value = true
   api.manage.getOneDetail({ "sceneId": props.scene_id, 'group': 'action' }).then((res: any) => {
@@ -79,16 +82,36 @@ const getOneDetail = () => {
     const combinedArray = res.map((scene: any) => {
       const parsedBodyJson = JSON.parse(scene.bodyjson);
       if (Array.isArray(parsedBodyJson)) {
-        const serial = parsedBodyJson.map(item => item.serial).flat();
-        const parallel = parsedBodyJson.map(item => item.parallel).flat();
+        const serial = parsedBodyJson.map(item => {
+          if (['{}', 'null'].includes(JSON.stringify(item.serial[0]))) {
+            return JSON.parse(JSON.stringify(defaultObj))
+          }
+          return item.serial
+        }).flat();
+        const parallel = parsedBodyJson.map(item => {
+          if (['{}', 'null'].includes(JSON.stringify(item.parallel[0]))) {
+            return JSON.parse(JSON.stringify(defaultObj))
+          }
+          return item.parallel
+        }).flat();
         return {
           serial,
           parallel
         };
       } else {
         return {
-          serial: [parsedBodyJson.serial].flat(),
-          parallel: [parsedBodyJson.parallel].flat()
+          serial: [parsedBodyJson.serial.map((item: any) => {
+            if (['{}', 'null'].includes(JSON.stringify(item))) {
+              return JSON.parse(JSON.stringify(defaultObj))
+            }
+            return item;
+          })].flat(),
+          parallel: [parsedBodyJson.parallel.map((item: any) => {
+            if (['{}', 'null'].includes(JSON.stringify(item))) {
+              return JSON.parse(JSON.stringify(defaultObj))
+            }
+            return item;
+          })].flat()
         };
       }
     });

src/views/iot/scene/manage/component/actionParallelItem.vue

@@ -6,9 +6,9 @@
           <CircleClose />
         </el-icon>
       </div>
-      <div class="product flex flex-warp" v-if="item?.actionType">
-        <el-form-item label="动作类型：" prop="actionType">
-          <el-select v-model="item.actionType" filterable clearable placeholder="请选择动作类型" @change="saveData">
+      <div class="product flex flex-warp" style="flex-flow: row wrap;justify-content: flex-start;align-items: flex-start !important">
+        <el-form-item label="动作类型：" prop="actionType" class="form-item">
+          <el-select v-model="item.actionType" filterable clearable placeholder="请选择动作类型" @change="saveData" style="width: 100%;">
             <el-option v-for="it in sence_action_type" :key="it.value" :label="it.label" :value="it.value">
               <span style="float: left">{{ it.label }}</span>
               <span style="float: right; font-size: 13px">{{ it.value }}</span>
@@ -25,7 +25,7 @@
     </div>
     <div>
       <div class=" flex-center">
-        <el-button :icon="DocumentAdd" @click="addScene()" style="border: 1px solid #409eff;color: #409eff;">新增串行动作</el-button>
+        <el-button :icon="DocumentAdd" @click="addScene()" style="border: 1px solid #409eff;color: #409eff;">新增并行动作</el-button>
       </div>
     </div>
   </div>
@@ -153,11 +153,20 @@ const delScene = (index: number) => {
   .product {
     margin-bottom: 20px;
 
-    .el-form-item {
+    :deep(.el-form-item) {
       margin-left: 30px;
       margin-bottom: 10px;
     }
   }
 
 }
+
+.form-item {
+  // flex: 0 0 25%;
+  // flex: 1;
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+  overflow: hidden;
+}
 </style>

src/views/iot/scene/manage/component/actionSerialItem.vue

@@ -6,9 +6,9 @@
           <CircleClose />
         </el-icon>
       </div>
-      <div class="product flex flex-warp" v-if="item?.actionType">
-        <el-form-item label="动作类型：" prop="actionType">
-          <el-select v-model="item.actionType" filterable clearable placeholder="请选择动作类型" @change="saveData">
+      <div class="product flex flex-warp" style="flex-flow: row wrap;justify-content: flex-start;align-items: flex-start !important">
+        <el-form-item label="动作类型：" prop="actionType" class="form-item">
+          <el-select v-model="item.actionType" filterable clearable placeholder="请选择动作类型" @change="saveData" style="width: 100%;">
             <el-option v-for="it in sence_action_type" :key="it.value" :label="it.label" :value="it.value">
               <span style="float: left">{{ it.label }}</span>
               <span style="float: right; font-size: 13px">{{ it.value }}</span>
@@ -156,4 +156,13 @@ const delScene = (index: number) => {
   }
 
 }
+
+.form-item {
+  // flex: 0 0 25%;
+  // flex: 1;
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+  overflow: hidden;
+}
 </style>

src/views/iot/scene/manage/component/actionType/deviceOut.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-form-item label="产品：" prop="productKey" class="form-item">
-    <el-select v-model="fromData.productKey" filterable clearable placeholder="请选择产品" @change="seletChange">
+  <el-form-item label="产品：" label-width="82px" prop="productKey" class="form-item">
+    <el-select v-model="fromData.productKey" filterable clearable placeholder="请选择产品" @change="seletChange" style="width: 100%;">
       <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
         <span style="float: left">{{ it.name }}</span>
         <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -8,10 +8,9 @@
     </el-select>
   </el-form-item>
 
-  <el-form-item label="设备：" prop="deviceKey" class="form-item">
-    <el-select v-model="fromData.deviceKey" filterable clearable placeholder="请选择设备" @change="saveData">
+  <el-form-item label="设备：" label-width="60px" prop="deviceKey" class="form-item">
+    <el-select v-model="fromData.deviceKey" filterable clearable placeholder="请选择设备" @change="saveData" style="width: 100%;">
       <el-option label="全部" value="all">全部</el-option>
-
       <el-option v-for="it in deviceListData" :key="it.key" :label="it.name" :value="it.key">
         <span style="float: left">{{ it.name }}</span>
         <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -20,7 +19,7 @@
   </el-form-item>
 
   <el-form-item label="触发类型：" prop="executeAction" class="form-item">
-    <el-select v-model="fromData.executeAction" filterable placeholder="请选择触发类型" @change="selectAction">
+    <el-select v-model="fromData.executeAction" filterable placeholder="请选择触发类型" @change="selectAction" style="width: 100%;">
       <el-option v-for="it in sourceActionTypeData" :key="it.key" :label="it.name" :value="it.key">
         <span style="float: left">{{ it.name }}</span>
         <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -29,8 +28,8 @@
   </el-form-item>
 
   <template v-if="fromData.executeAction == 'functionCall'">
-    <el-form-item label="功能调用" prop="type" class="form-item">
-      <el-select v-model="fromData.functionCall.functionName" filterable placeholder="请选择功能调用" @change="changeFunc">
+    <el-form-item label="功能调用：" prop="type" class="form-item">
+      <el-select v-model="fromData.functionCall.functionName" filterable placeholder="请选择功能调用" @change="changeFunc" style="width: 100%;">
         <el-option v-for="it in functionCallList" :key="it.key" :label="it.name" :value="it.key">
           <span style="float: left">{{ it.name }}</span>
           <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -38,9 +37,9 @@
       </el-select>
     </el-form-item>
 
-    <el-form-item label="参数" prop="type" class="form-item">
+    <el-form-item label="参数：" label-width="82px" prop="type" class="form-item">
       <!-- <el-input v-model="fromData.functionCall.parameter" placeholder="请输入参数" @input="saveData" /> -->
-      <el-table :data="inputs" border>
+      <el-table :data="inputs" border style="width: 100%;">
         <el-table-column prop="name" label="参数名称" />
         <el-table-column prop="valueType.type" label="输入类型" />
         <el-table-column prop="name" label="值" min-width="200">
@@ -57,8 +56,8 @@
     </el-form-item>
   </template>
 
-  <el-form-item label="读取属性" prop="getProperties" class="form-item" v-else-if="fromData.executeAction == 'getProperties'">
-    <el-select v-model="fromData.getProperties" filterable multiple placeholder="请选择读取属性" @change="saveData">
+  <el-form-item label="读取属性：" prop="getProperties" class="form-item" v-else-if="fromData.executeAction == 'getProperties'">
+    <el-select v-model="fromData.getProperties" filterable multiple placeholder="请选择读取属性" @change="saveData" style="width: 100%;">
       <el-option v-for="it in propertyCallList" :key="it.key" :label="it.name" :value="it.key">
         <span style="float: left">{{ it.name }}</span>
         <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -67,8 +66,8 @@
   </el-form-item>
 
   <template v-else-if="fromData.executeAction == 'setProperties'">
-    <el-form-item label="设置属性" prop="setProperties_temp" class="form-item">
-      <el-select v-model="fromData.setProperties_temp" filterable multiple placeholder="请选择设置属性" @change="setProperties">
+    <el-form-item label="设置属性：" prop="setProperties_temp" class="form-item">
+      <el-select v-model="fromData.setProperties_temp" filterable multiple placeholder="请选择设置属性" @change="setProperties" style="width: 100%;">
         <el-option v-for="it in propertyCallList" :key="it.key" :label="it.name" :value="it.key">
           <span style="float: left">{{ it.name }}</span>
           <span style="float: right; font-size: 13px">{{ it.key }}</span>
@@ -76,8 +75,8 @@
       </el-select>
     </el-form-item>
 
-    <div class="form-item">
-      <el-table :data="setPropertiesItem">
+    <el-form-item class="form-item" label-width="0">
+      <el-table :data="setPropertiesItem" style="width: 100%;">
         <el-table-column>
           <template #default="{ row }">
             <span v-for="val, key in row" :key="key">{{ key }}</span>
@@ -89,7 +88,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </el-form-item>
   </template>
 </template>
 
@@ -175,7 +174,7 @@ const getAction = (val: string) => {
       functionCallList.value = []
       product.tabDeviceFucntion.getList({ productKey: productKey.value }).then((res: any) => {
         functionCallList.value = res
-        if(fromData.value.functionCall?.functionName) changeFunc(fromData.value.functionCall?.functionName)
+        if (fromData.value.functionCall?.functionName) changeFunc(fromData.value.functionCall?.functionName)
       })
       break;
     case 'getProperties':
@@ -271,6 +270,11 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .form-item {
-  flex: 0 0 25%;
+  // flex: 0 0 25%;
+  // flex: 1;
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+  overflow: hidden;
 }
 </style>