大屏表格新增配置

packages/bigscreen/designer/components/Layout.vue

@@ -997,11 +997,12 @@ export default {
         }
 
         .el-select, .el-cascader {
+          width: 232px;
           color: #fff;
           background: transparent;
 
           input {
-            width: 232px;
+            width: 100%;
             background: #262C33;
             font-size: 12px;
             color: #fff;

packages/bigscreen/designer/components/form/componentConfig.vue

@@ -39,10 +39,10 @@
           <div class="layout-config__item--right">
             <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
               <el-option
-                  v-for="(item, index) in borderList"
+                v-for="(item, index) in borderList"
-                  :key="index"
+                :key="index"
-                  :label="item"
+                :label="item"
-                  :value="item">
+                :value="item">
               </el-option>
             </el-select>
           </div>
@@ -93,12 +93,24 @@
               </el-select>
             </div>
           </div>
-          <div class="layout-config__item">
+          <div class="layout-config__item" v-if="config.type !== 'AiDvTable'">
             <label>表格行数</label>
             <div class="layout-config__item--right">
               <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
             </div>
           </div>
+          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in data" :key="index">
+            <label>第{{ index + 1 }}列</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
+                <el-option label="居中" value="center"></el-option>
+                <el-option label="居左" value="left"></el-option>
+                <el-option label="居右" value="right"></el-option>
+              </el-select>
+              <el-color-picker v-model="item.color" style="margin: 0 10px;"></el-color-picker>
+              <el-input-number v-model="item.width" :min="1" label="描述文字" controls-position="right"></el-input-number>
+            </div>
+          </div>
         </template>
         <template v-if="config.type === 'map'">
           <div class="layout-config__item">
@@ -158,10 +170,10 @@
           <div class="layout-config__item--right">
             <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
               <el-option
-                  v-for="(item, index) in summaryList"
+                v-for="(item, index) in summaryList"
-                  :key="index"
+                :key="index"
-                  :label="item"
+                :label="item"
-                  :value="item">
+                :value="item">
               </el-option>
             </el-select>
           </div>
@@ -173,13 +185,15 @@
 
 <script>
 export default {
-  name: "componentConfig",
+  name: 'componentConfig',
+
   props: {
     config: {default: () => ({})},
     instance: Function,
     dict: Object,
   },
-  data() {
+
+  data () {
     return {
       borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6'],//边框待选项
       summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
@@ -189,15 +203,44 @@ export default {
         {label: '是', value: '1'},
         {label: '否', value: '0'}
       ],
+      data: []
     }
   },
-  methods: {},
+
   created() {
+    this.data = this.config[this.config.dataType]
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.componentConfig {
+  .componentConfig {
-}
+    .table-config {
+      & > div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 232px;
+
+        :deep( .el-select ) {
+          width: 80px
+          input {
+            width: 80px;
+          }
+        }
+
+        .el-select {
+          width: 100%;
+
+          .el-input {
+            width: 100%;
+
+            :deep( input ) {
+              width: 80px
+            }
+          }
+        }
+      }
+    }
+  }
 </style>

packages/bigscreen/designer/config.js

@@ -505,6 +505,7 @@ const components = [
             isShowIndex: '1',
             sourceDataId: '',
             api: '',
+            config: [],
             apiData: [],
             dataType: 'staticData',
             dynamicData: [],