大屏设计新增图片素材管理

packages/bigscreen/designer/components/Layout.vue

@@ -7,6 +7,7 @@
         <h2>{{ dashboard.title }}</h2>
       </div>
       <div class="layout-header__right">
+        <span type="text" @click="isShowImg = true">图片素材</span>
         <span type="text" @click="back">退出</span>
         <span type="text" @click="save">保存</span>
       </div>
@@ -282,6 +283,43 @@
         <span>置底图层</span>
       </div>
     </div>
+    <ai-dialog :visible.sync="isShowImg" append-to-body title="图片素材" @onConfirm="isShowImg = false">
+      <el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加图片</el-button>
+      <ai-table
+        :tableData="images"
+        :total="images.length"
+        :colConfigs="colConfigs"
+        @getList="() => {}">
+        <el-table-column slot="img" label="图片" align="center">
+          <template slot-scope="{ row }">
+            <ai-uploader
+              :instance="instance"
+              :value="[{url: row.url}]"
+              disabled
+              :limit="1">
+            </ai-uploader>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row, $index }">
+            <div class="table-options">
+              <el-button type="text" @click="removeImg($index)">删除</el-button>
+              <el-button type="text" @click="copy(row.url)">复制链接</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </ai-dialog>
+    <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加图片" @closed="form.images = []" @onConfirm="onImageConfirm">
+      <ai-uploader
+        :instance="instance"
+        v-model="form.images"
+        :limit="9">
+        <template slot="tips">
+          <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
+        </template>
+      </ai-uploader>
+    </ai-dialog>
   </div>
 </template>
 
@@ -303,6 +341,15 @@ export default {
 
     data() {
       return {
+        colConfigs: [
+          // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
+          { slot: 'img', label: '图片' }
+        ],
+        form: {
+          images: []
+        },
+        isShowAddImg: false,
+        isShowImg: false,
         parentIndex: 0,
         subIndex: 0,
         sonIndex: 0,
@@ -337,6 +384,7 @@ export default {
           label: '否',
           value: '0'
         }],
+        images: [],
         summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
         borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
       }
@@ -369,9 +417,6 @@ export default {
       }
     },
 
-  created() {
-  },
-
     mounted() {
       if (this.params && this.params.id) {
         this.getInfo(this.params.id)
@@ -393,6 +438,33 @@ export default {
         })
       },
 
+      copy (link) {
+        let oInput = document.createElement('input')
+        oInput.value = link
+        document.body.appendChild(oInput)
+        oInput.select()
+        document.execCommand('Copy')
+        this.$message({
+          message: '已复制',
+          type: 'success'
+        })
+        oInput.remove()
+      },
+
+      removeImg (index) {
+        this.images.splice(index, 1)
+      }, 
+
+      onImageConfirm () {
+        if (!this.form.images.length) {
+          return this.$message.error('请上传图片')
+        }
+
+        this.images.push(this.form.images)
+        this.form.images = []
+        this.isShowAddImg = false
+      },
+
       setTop() {
         const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
           return item.zIndex
@@ -410,8 +482,10 @@ export default {
       getInfo(id) {
         this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
-          this.componentList = JSON.parse(res.data.config).config
-          this.dashboard = JSON.parse(res.data.config).dashboard
+            const data = JSON.parse(res.data.config)
+            this.componentList = data.config
+            this.dashboard = data.dashboard
+            this.images = data.images || []
           }
         })
       },
@@ -424,7 +498,8 @@ export default {
         this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
           config: JSON.stringify({
             config: this.componentList,
-          dashboard: this.dashboard
+            dashboard: this.dashboard,
+            images: this.images
           }),
           status: 1,
           title: this.dashboard.title,