From 359029c67351e164569e86bc27cf5971e26adabe Mon Sep 17 00:00:00 2001
From: xwb <717567226@qq.com>
Date: Wed, 29 Apr 2020 16:39:39 +0800
Subject: [PATCH] =?UTF-8?q?#I1FWLV=20bug:=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=B4=A0=E6=9D=90=E5=BA=93=E6=89=B9=E9=87=8F=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=A4=9A=E5=BC=A0=EF=BC=8C=E5=8F=AA=E4=BC=9A=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F1-2=E5=BC=A0=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/material/index.vue | 584 +++++++++++++++---------------
 1 file changed, 295 insertions(+), 289 deletions(-)

diff --git a/src/components/material/index.vue b/src/components/material/index.vue
index e7a7647..cfaf25c 100644
--- a/src/components/material/index.vue
+++ b/src/components/material/index.vue
@@ -145,319 +145,325 @@
 </template>
 
 <script>
-  import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
-  import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
-  import { getToken } from '@/utils/auth'
-  import { mapGetters } from 'vuex'
+import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
+import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
+import { getToken } from '@/utils/auth'
+import { mapGetters } from 'vuex'
 
-  export default {
-    name: 'MaterialList',
-    props: {
-      // 素材数据
-      value: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      // 素材类型
-      type: {
-        type: String
-      },
-      // 素材限制数量，默认5个
-      num: {
-        type: Number,
-        default() {
-          return 5
-        }
-      },
-      // 宽度
-      width: {
-        type: Number,
-        default() {
-          return 150
-        }
-      },
-      // 宽度
-      height: {
-        type: Number,
-        default() {
-          return 150
-        }
+export default {
+  name: 'MaterialList',
+  props: {
+    // 素材数据
+    value: {
+      type: Array,
+      default() {
+        return []
       }
     },
-    data() {
-      return {
-        headers: {
-          Authorization: getToken()
-        },
-        dialogVisible: false,
-        url: '',
-        listDialogVisible: false,
-        materialgroupList: [],
-        materialgroupObjId: '',
-        materialgroupObj: {},
-        materialgroupLoading: false,
-        tableData: [],
-        page: {
-          total: 0, // 总页数
-          currentPage: 1, // 当前页数
-          pageSize: 12, // 每页显示多少条
-          ascs: [], // 升序字段
-          descs: 'create_time'// 降序字段
-        },
-        tableLoading: false,
-        groupId: null,
-        urls: []
+    // 素材类型
+    type: {
+      type: String
+    },
+    // 素材限制数量，默认5个
+    num: {
+      type: Number,
+      default() {
+        return 5
       }
     },
-    computed: {
-      ...mapGetters([
-        'uploadApi'
-      ])
+    // 宽度
+    width: {
+      type: Number,
+      default() {
+        return 150
+      }
     },
-    methods: {
-      moveMaterial(index, type) {
-        if (type == 'up') {
-          const tempOption = this.value[index - 1]
-          this.$set(this.value, index - 1, this.value[index])
-          this.$set(this.value, index, tempOption)
-        }
-        if (type == 'down') {
-          const tempOption = this.value[index + 1]
-          this.$set(this.value, index + 1, this.value[index])
-          this.$set(this.value, index, tempOption)
-        }
-      },
-      zoomMaterial(index) {
-        this.dialogVisible = true
-        this.url = this.value[index]
-      },
-      deleteMaterial(index) {
-        const that = this
-        this.$confirm('是否确认删除？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(function() {
-          that.value.splice(index, 1)
-          that.urls = []
-        })
-      },
-      toSeleteMaterial() {
-        this.listDialogVisible = true
-        if (this.tableData.length <= 0) {
-          this.materialgroupPage()
-        }
-      },
-      materialgroupPage() {
-        this.materialgroupLoading = true
-        materialgroupPage({
-          total: 0, // 总页数
-          currentPage: 1, // 当前页数
-          pageSize: 100, // 每页显示多少条
-          ascs: [], // 升序字段
-          descs: 'create_time'// 降序字段
-        }).then(response => {
-          this.materialgroupLoading = false
-          const materialgroupList = response.content
-          materialgroupList.unshift({
-            id: '-1',
-            name: '全部分组'
-          })
-          this.materialgroupList = materialgroupList
-          this.tabClick({
-            index: 0
-          })
-        })
+    // 宽度
+    height: {
+      type: Number,
+      default() {
+        return 150
+      }
+    }
+  },
+  data() {
+    return {
+      headers: {
+        Authorization: getToken()
       },
-      materialgroupDelete(materialgroupObj) {
-        const that = this
-        this.$confirm('是否确认删除该分组？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(function() {
-          materialgroupDel(materialgroupObj.id)
-            .then(function() {
-              that.$delete(that.materialgroupList, materialgroupObj.index)
-            })
-        })
+      dialogVisible: false,
+      url: '',
+      listDialogVisible: false,
+      materialgroupList: [],
+      materialgroupObjId: '',
+      materialgroupObj: {},
+      materialgroupLoading: false,
+      tableData: [],
+      resultNumber: 0,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 12, // 每页显示多少条
+        ascs: [], // 升序字段
+        descs: 'create_time'// 降序字段
       },
-      materialgroupEdit(materialgroupObj) {
-        const that = this
-        this.$prompt('请输入分组名', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputValue: materialgroupObj.name
-        }).then(({ value }) => {
-          materialgroupEdit({
-            id: materialgroupObj.id,
-            name: value
-          }).then(function() {
-            materialgroupObj.name = value
-            that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
-          })
-        }).catch(() => {
-
-        })
-      },
-      materialgroupAdd() {
-        const that = this
-        this.$prompt('请输入分组名', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消'
-        }).then(({ value }) => {
-          materialgroupAdd({
-            name: value
-          }).then(function() {
-            that.materialgroupPage()
-          })
-        }).catch(() => {
-
+      tableLoading: false,
+      groupId: null,
+      urls: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'uploadApi'
+    ])
+  },
+  methods: {
+    moveMaterial(index, type) {
+      if (type == 'up') {
+        const tempOption = this.value[index - 1]
+        this.$set(this.value, index - 1, this.value[index])
+        this.$set(this.value, index, tempOption)
+      }
+      if (type == 'down') {
+        const tempOption = this.value[index + 1]
+        this.$set(this.value, index + 1, this.value[index])
+        this.$set(this.value, index, tempOption)
+      }
+    },
+    zoomMaterial(index) {
+      this.dialogVisible = true
+      this.url = this.value[index]
+    },
+    deleteMaterial(index) {
+      const that = this
+      this.$confirm('是否确认删除？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        that.value.splice(index, 1)
+        that.urls = []
+      })
+    },
+    toSeleteMaterial() {
+      this.listDialogVisible = true
+      if (this.tableData.length <= 0) {
+        this.materialgroupPage()
+      }
+    },
+    materialgroupPage() {
+      this.materialgroupLoading = true
+      materialgroupPage({
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 100, // 每页显示多少条
+        ascs: [], // 升序字段
+        descs: 'create_time'// 降序字段
+      }).then(response => {
+        this.materialgroupLoading = false
+        const materialgroupList = response.content
+        materialgroupList.unshift({
+          id: '-1',
+          name: '全部分组'
         })
-      },
-      tabClick(tab, event) {
-        this.urls = []
-        const index = Number(tab.index)
-        const materialgroupObj = this.materialgroupList[index]
-        materialgroupObj.index = index
-        this.materialgroupObj = materialgroupObj
-        this.materialgroupObjId = materialgroupObj.id
-        this.page.currentPage = 1
-        this.page.total = 0
-        if (materialgroupObj.id != '-1') {
-          this.groupId = materialgroupObj.id
-        } else {
-          this.groupId = null
-        }
-        this.getPage(this.page)
-      },
-      getPage(page, params) {
-        this.tableLoading = true
-        getPage(Object.assign({
-          page: page.currentPage - 1,
-          size: page.pageSize,
-          descs: this.page.descs,
-          ascs: this.page.ascs,
-          sort: 'createTime,desc'
-        }, {
-          groupId: this.groupId
-        })).then(response => {
-          const tableData = response.content
-          this.page.total = response.totalElements
-          this.page.currentPage = page.currentPage
-          this.page.pageSize = page.pageSize
-          this.tableData = tableData
-          this.tableLoading = false
-        }).catch(() => {
-          this.tableLoading = false
+        this.materialgroupList = materialgroupList
+        this.tabClick({
+          index: 0
         })
-      },
-      sizeChange(val) {
-        console.log(val)
-        this.page.currentPage = 1
-        this.page.pageSize = val
-        this.getPage(this.page)
-      },
-      pageChange(val) {
-        console.log(val)
-        this.page.currentPage = val
-        // this.page.pageSize = val
-        this.getPage(this.page)
-      },
-      materialRename(item) {
-        const that = this
-        this.$prompt('请输入素材名', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputValue: item.name
-        }).then(({ value }) => {
-          putObj({
-            id: item.id,
-            name: value
-          }).then(function() {
-            that.getPage(that.page)
+      })
+    },
+    materialgroupDelete(materialgroupObj) {
+      const that = this
+      this.$confirm('是否确认删除该分组？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        materialgroupDel(materialgroupObj.id)
+          .then(function() {
+            that.$delete(that.materialgroupList, materialgroupObj.index)
           })
-        }).catch(() => {
-
+      })
+    },
+    materialgroupEdit(materialgroupObj) {
+      const that = this
+      this.$prompt('请输入分组名', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: materialgroupObj.name
+      }).then(({ value }) => {
+        materialgroupEdit({
+          id: materialgroupObj.id,
+          name: value
+        }).then(function() {
+          materialgroupObj.name = value
+          that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
         })
-      },
-      materialUrl(item) {
-        const that = this
-        this.$prompt('素材链接', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputValue: item.url
-        }).then(({ value }) => {
+      }).catch(() => {
 
-        }).catch(() => {
-
-        })
-      },
-      materialDel(item) {
-        const that = this
-        this.$confirm('是否确认删除该素材？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
+      })
+    },
+    materialgroupAdd() {
+      const that = this
+      this.$prompt('请输入分组名', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(({ value }) => {
+        materialgroupAdd({
+          name: value
         }).then(function() {
-          delObj(item.id)
-            .then(function() {
-              that.getPage(that.page)
-            })
+          that.materialgroupPage()
         })
-      },
-      handleCommand(command) {
-        const that = this
-        const s = command.split('-')
+      }).catch(() => {
+
+      })
+    },
+    tabClick(tab, event) {
+      this.urls = []
+      const index = Number(tab.index)
+      const materialgroupObj = this.materialgroupList[index]
+      materialgroupObj.index = index
+      this.materialgroupObj = materialgroupObj
+      this.materialgroupObjId = materialgroupObj.id
+      this.page.currentPage = 1
+      this.page.total = 0
+      if (materialgroupObj.id != '-1') {
+        this.groupId = materialgroupObj.id
+      } else {
+        this.groupId = null
+      }
+      this.getPage(this.page)
+    },
+    getPage(page, params) {
+      this.tableLoading = true
+      getPage(Object.assign({
+        page: page.currentPage - 1,
+        size: page.pageSize,
+        descs: this.page.descs,
+        ascs: this.page.ascs,
+        sort: 'createTime,desc'
+      }, {
+        groupId: this.groupId
+      })).then(response => {
+        const tableData = response.content
+        this.page.total = response.totalElements
+        this.page.currentPage = page.currentPage
+        this.page.pageSize = page.pageSize
+        this.tableData = tableData
+        this.tableLoading = false
+      }).catch(() => {
+        this.tableLoading = false
+      })
+    },
+    sizeChange(val) {
+      console.log(val)
+      this.page.currentPage = 1
+      this.page.pageSize = val
+      this.getPage(this.page)
+    },
+    pageChange(val) {
+      console.log(val)
+      this.page.currentPage = val
+      // this.page.pageSize = val
+      this.getPage(this.page)
+    },
+    materialRename(item) {
+      const that = this
+      this.$prompt('请输入素材名', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: item.name
+      }).then(({ value }) => {
         putObj({
-          id: s[0],
-          groupId: s[1]
+          id: item.id,
+          name: value
         }).then(function() {
           that.getPage(that.page)
         })
-      },
-      handleProgress(event, file, fileList) {
-        // let uploadProgress = file.percentage.toFixed(0)
-        // this.uploadProgress = uploadProgress
-      },
-      handleSuccess(response, file, fileList) {
-        const that = this
-        this.uploadProgress = 0
-        addObj({
-          type: '1',
-          groupId: this.groupId != '-1' ? this.groupId : null,
-          name: file.name,
-          url: response.link
-        }).then(function() {
+      }).catch(() => {
+
+      })
+    },
+    materialUrl(item) {
+      const that = this
+      this.$prompt('素材链接', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: item.url
+      }).then(({ value }) => {
+
+      }).catch(() => {
+
+      })
+    },
+    materialDel(item) {
+      const that = this
+      this.$confirm('是否确认删除该素材？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        delObj(item.id)
+          .then(function() {
+            that.getPage(that.page)
+          })
+      })
+    },
+    handleCommand(command) {
+      const that = this
+      const s = command.split('-')
+      putObj({
+        id: s[0],
+        groupId: s[1]
+      }).then(function() {
+        that.getPage(that.page)
+      })
+    },
+    handleProgress(event, file, fileList) {
+      console.log(event)
+      // let uploadProgress = file.percentage.toFixed(0)
+      // this.uploadProgress = uploadProgress
+    },
+    handleSuccess(response, file, fileList) {
+      const that = this
+      this.uploadProgress = 0
+      addObj({
+        type: '1',
+        groupId: this.groupId != '-1' ? this.groupId : null,
+        name: file.name,
+        url: response.link
+      }).then(() => {
+        this.resultNumber++
+        if (fileList.length === this.resultNumber) {
           that.getPage(that.page)
-        })
-      },
-      beforeUpload(file) {
-        const isPic =
-          file.type === 'image/jpeg' ||
-          file.type === 'image/png' ||
-          file.type === 'image/gif' ||
-          file.type === 'image/jpg'
-        const isLt2M = file.size / 1024 / 1024 < 2
-        if (!isPic) {
-          this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
-          return false
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!')
+          this.resultNumber = 0
         }
-        return isPic && isLt2M
-      },
-      sureUrls() {
-        this.urls.forEach(item => {
-          this.$set(this.value, this.value.length, item)
-        })
-        this.listDialogVisible = false
+      })
+    },
+    beforeUpload(file) {
+      const isPic =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/gif' ||
+        file.type === 'image/jpg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isPic) {
+        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
+        return false
       }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isPic && isLt2M
+    },
+    sureUrls() {
+      this.urls.forEach(item => {
+        this.$set(this.value, this.value.length, item)
+      })
+      this.listDialogVisible = false
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>