素材库交互优化

src/components/ShareLib/index.vue

@@ -12,7 +12,10 @@
         :gutter="24"
         class="mgb-20"
       >
-        <el-col :span="24">
+        <el-col
+          :span="24"
+          v-if="!useAsCom"
+        >
           <el-button
             type="primary"
             size="mini"
@@ -114,7 +117,10 @@
         :gutter="24"
         class="mgb-20"
       >
-        <el-col :span="24">
+        <el-col
+          :span="24"
+          v-if="!useAsCom"
+        >
           <el-button
             type="danger"
             size="mini"
@@ -138,6 +144,9 @@
           <el-input
             placeholder="请输入分享语"
             v-model="tempText"
+            autofocus
+            ref="shareIpt"
+            @keyup.enter.native="addText"
           >
             <el-button
               slot="append"
@@ -150,7 +159,10 @@
         :gutter="24"
         class="mgt-20 mgb-20"
       >
-        <el-col :span="24">
+        <el-col
+          :span="24"
+          :class="useAsCom ? 'hide-checkbox' : ''"
+        >
           <el-table
             ref="textTable"
             :data="textList"
@@ -159,7 +171,6 @@
             size="mini"
             @selection-change="textTableSelectionChange"
             @row-click="textRowClick"
-            highlight-current-row
           >
             <el-table-column
               type="selection"
@@ -218,6 +229,13 @@ import { getMaterials, saveMaterials, delMaterials } from '@/api/lib'
 import { Promise, reject } from 'q'
 export default {
   name: 'ShareLib',
+  props: {
+    // 用作组件 只可单选
+    useAsCom: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       // common
@@ -265,7 +283,7 @@ export default {
   watch: {
     selectedData: {
       handler: function(nVal) {
-        this.exportData()
+        if (this.useAsCom) this.exportData()
       },
       immediate: true,
       deep: true
@@ -322,9 +340,10 @@ export default {
         imgs: [],
         texts: []
       }
+      this.$refs.textTable.clearSelection()
     },
     // share_img
-    getImgs() {
+    getImgs(cb) {
       this.getMaterials({
         type: 'image',
         currentPage: this.imgCurrentPage,
@@ -333,6 +352,8 @@ export default {
         .then(data => {
           this.imgList = data.records
           this.imgsNum = data.total
+          this.imgsSelected = []
+          this.selectedData.imgs = []
         })
         .catch(err => {
           console.log(err)
@@ -344,10 +365,17 @@ export default {
         type: 'image',
         url: url
       })
-        .then(() => {
+        .then(data => {
           this.$message.success('图片上传成功!')
           this.imgCurrentPage = 1
-          this.getImgs()
+          if (this.useAsCom) {
+            this.imgList.unshift(data.result)
+            this.selectedData.imgs = [data.result]
+            this.imgsSelected = [0]
+            this.imgsNum += 1
+          } else {
+            this.getImgs()
+          }
         })
         .catch(err => {
           this.$message.error('图片保存失败！')
@@ -370,8 +398,14 @@ export default {
         const idx = this.imgsSelected.indexOf(index)
         this.imgsSelected.splice(idx, 1)
       } else {
+        // 用作组件则只可单选
+        if (this.useAsCom) {
+          this.imgsSelected = []
+          this.selectedData.imgs = []
+        }
         this.imgsSelected.push(index)
       }
+
       const selectedImgs = []
       this.imgsSelected.map(item => {
         selectedImgs.push(this.imgList[item])
@@ -459,8 +493,16 @@ export default {
         })
     },
     textTableSelectionChange(val) {
-      this.textsSelected = val
-      this.selectedData.texts = val
+      if (this.useAsCom && val.length > 1) {
+        const temp = val.pop()
+        this.$refs.textTable.clearSelection()
+        this.$refs.textTable.toggleRowSelection(temp)
+        this.textsSelected = [temp]
+        this.selectedData.texts = [temp]
+      } else {
+        this.textsSelected = val
+        this.selectedData.texts = val
+      }
     },
     textRowClick(row, column, event) {
       this.$refs.textTable.toggleRowSelection(row)
@@ -531,11 +573,18 @@ export default {
         type: 'text',
         text: this.tempText
       })
-        .then(() => {
+        .then(data => {
           this.$message.success('分享语保存成功!')
           this.tempText = ''
           this.textCurrentPage = 1
-          this.getTexts()
+
+          if (this.useAsCom) {
+            this.textList.unshift(data.result)
+            this.$refs.textTable.toggleRowSelection(this.textList[0])
+            this.textsNum += 1
+          } else {
+            this.getImgs()
+          }
         })
         .catch(err => {
           this.$message.error('分享语保存成功！')
@@ -601,6 +650,10 @@ export default {
   line-height: 0;
   text-align: center;
 }
+
+.hide-checkbox >>> .el-table th > .cell .el-checkbox__inner {
+  display: none;
+}
 </style>
 
 

src/views/games/details/share/edit.vue

@@ -448,14 +448,21 @@
               class="el-icon-plus uploader-icon"
             />
           </el-upload>
-          <el-button size="mini" style="margin-top: 6px" @click="openLib('share_img')">从素材库中选择</el-button>
+          <el-button
+            size="mini"
+            style="margin-top: 6px"
+            @click="openLib('share_img')"
+          >从素材库中选择</el-button>
         </el-form-item>
         <el-form-item
           label="分享语"
           prop="share_word"
         >
           <el-input v-model="shareGroupForm.share_word" />
-          <el-button size="mini" @click="openLib('share_word')">从素材库中选择</el-button>
+          <el-button
+            size="mini"
+            @click="openLib('share_word')"
+          >从素材库中选择</el-button>
         </el-form-item>
       </el-form>
       <span slot="footer">
@@ -471,7 +478,6 @@
       title="素材库"
       :visible.sync="modalLibVisible"
       width="700px"
-      append-to-body
       top="3vh"
       :before-close="closeLib"
     >
@@ -483,13 +489,14 @@
       <share-lib
         @selectMaterial="getMaterial"
         ref="shareLib"
+        :useAsCom="true"
       />
       <span slot="footer">
         <el-button @click="closeLib">取 消</el-button>
         <el-button
           v-if="permEdit"
           type="primary"
-          @click="saveTempShare"
+          @click="saveShareGroup"
         >确 定</el-button>
       </span>
     </el-dialog>
@@ -789,9 +796,7 @@ export default {
                 if (data.errcode === 0) {
                   this.$message.success('分享图保存成功！')
                   this.$router.push(
-                    `/games/details/${this.uid}/share/edit?id=${
-                      data.result._id
-                    }`
+                    `/games/details/${this.uid}/share/edit?id=${data.result._id}`
                   )
                 }
               })
@@ -896,9 +901,7 @@ export default {
               this.$message.success('分享图保存成功！')
               this.$refs['shareForm'].clearValidate()
               this.$router.push(
-                `/games/details/${
-                  this.uid
-                }/share/edit?id=${shareId}&data_type=dev`
+                `/games/details/${this.uid}/share/edit?id=${shareId}&data_type=dev`
               )
             })
             .catch(err => {
@@ -948,9 +951,7 @@ export default {
         this.$router.go(0)
       } else {
         this.$router.push(
-          `/games/details/${this.uid}/share/edit?id=${
-            this.$route.query.id
-          }&data_type=pro`
+          `/games/details/${this.uid}/share/edit?id=${this.$route.query.id}&data_type=pro`
         )
       }
     },
@@ -1108,13 +1109,14 @@ export default {
         share_image: ''
       }
       this.isNewGroup = true
-      this.openModalShareGroup()
+      this.openLib('share_img')
+      // this.openModalShareGroup()
     },
     editShareGroup(group, index) {
       this.shareGroupForm = JSON.parse(JSON.stringify(group))
       this.isNewGroup = false
       this.groupIndex = index
-      this.openModalShareGroup()
+      this.openLib('share_img')
     },
     delShareGroup(index) {
       this.$confirm('是否要删除该分享组?', '提示', {
@@ -1137,19 +1139,18 @@ export default {
       this.shareGroupForm.share_image = res.url
     },
     saveShareGroup() {
-      this.$refs['shareGroupForm'].validate(valid => {
-        if (valid) {
-          if (this.isNewGroup) {
-            this.shareGroups.push(this.shareGroupForm)
-            this.closeModalShareGroup()
-          } else {
-            this.shareGroups.splice(this.groupIndex, 1, this.shareGroupForm)
-            this.closeModalShareGroup()
-          }
-        } else {
-          this.$message.error('请完整填写表单！')
-        }
-      })
+      this.saveTempShare()
+      if (!this.shareGroupForm.share_word || !this.shareGroupForm.share_image) {
+        this.$message.error('必须选择一个分享图和一句分享语！')
+        return
+      }
+      if (this.isNewGroup) {
+        this.shareGroups.push(this.shareGroupForm)
+        this.closeLib()
+      } else {
+        this.shareGroups.splice(this.groupIndex, 1, this.shareGroupForm)
+        this.closeLib()
+      }
     },
     uploadErr() {
       this.$message.error('图片上传失败！')
@@ -1166,7 +1167,7 @@ export default {
       this.modalLibVisible = true
       setTimeout(() => {
         this.$refs.shareLib.switchTab(name)
-      }, 0);
+      }, 0)
     },
     closeLib() {
       this.modalLibVisible = false
@@ -1184,7 +1185,6 @@ export default {
       if (data.imgs.length > 0) {
         this.shareGroupForm.share_image = data.imgs[0].url
       }
-      this.closeLib()
     }
   }
 }