完成分类的对接

.gitignore

@@ -2,4 +2,4 @@
 node_modules
 client-dist
 .idea
-.package-lock.json
+package-lock.json

src/api/categories.js

@@ -12,3 +12,19 @@ export function addCategory(data) {
   }
   return httpRequest.post('/api/opera/v2/training/category', data, { headers })
 }
+
+// 删除分类
+export function deleteCategory(id, params = {}) {
+  var headers = {
+    'Content-Type': 'application/json'
+  }
+  return httpRequest.delete(`/api/opera/v2/training/${id}/category`, { params }, { headers })
+}
+
+// 更新分类
+export function updateCategory(id, data) {
+  var headers = {
+    'Content-Type': 'application/json'
+  }
+  return httpRequest.put(`/api/opera/v2/training/${id}/category`, data, { headers })
+}

src/pages/v2/categories/category.vue

@@ -28,11 +28,25 @@
               <span>{{ scope.row.name }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="背景图">
+            <template slot-scope="scope">
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.tag }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column
             label="分类标签">
             <template slot-scope="scope">
               <div slot="reference" class="name-wrapper">
-                <el-tag size="medium">{{ scope.row.tag }}</el-tag>
+                <div class="demo-image__preview">
+                  <el-image
+                    style="width: 100px; height: 100px;"
+                    fit="scale-down"
+                    :src="scope.row.url"
+                    :preview-src-list="[scope.row.url]">
+                  </el-image>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -51,7 +65,7 @@
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
-                <el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
+<!--                <el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>-->
                 <el-option :value="{ tag: 'edit', row: scope.row }" label="编辑"></el-option>
                 <el-option :value="{ tag: 'addChild', row: scope.row }" label="添加子分类"></el-option>
                 <el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
@@ -83,6 +97,26 @@
               <el-option label="case" value="case"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="背景图" prop="url">
+            <el-upload
+              action="/api/opera/v1/file/upload"
+              list-type="picture-card"
+              name="file"
+              :limit="1"
+              :multiple="false"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-success="uploadSuccess"
+              :on-error="uploadError"
+              :data="{ type: 'image' }"
+              :disabled="urlDisabled">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="visible">
+              <img width="100%" :src="mainForm.url" alt="">
+              <el-input :v-model="mainForm.url" :value="mainForm.url"></el-input>
+            </el-dialog>
+          </el-form-item>
           <el-form-item label="排序码" label-width="80px">
             <el-input v-model="mainForm.order" autocomplete="off"></el-input>
           </el-form-item>
@@ -107,6 +141,26 @@
               <el-option label="case" value="case"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="背景图" label-width="100px" prop="url">
+            <el-upload
+              action="/api/opera/v1/file/upload"
+              list-type="picture-card"
+              name="file"
+              :limit="1"
+              :multiple="false"
+              :on-preview="handlePictureCardPreview1"
+              :on-remove="handleRemove1"
+              :on-success="uploadSuccess1"
+              :on-error="uploadError1"
+              :data="{ type: 'image' }"
+              :disabled="urlDisabled">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="visible">
+              <img width="100%" :src="childForm.url" alt="">
+              <el-input :v-model="childForm.url" :value="childForm.url"></el-input>
+            </el-dialog>
+          </el-form-item>
           <el-form-item label="排序码" label-width="100px">
             <el-input v-model="childForm.order" autocomplete="off"></el-input>
           </el-form-item>
@@ -117,6 +171,47 @@
         </div>
       </el-dialog>
     </div>
+    <div>
+      <el-dialog title="编辑分类" :visible.sync="editCategoryDialogFormVisible">
+        <el-form size="mini" :model="updateForm">
+          <el-form-item label="名称" label-width="100px">
+            <el-input v-model="updateForm.name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="标签" label-width="100px">
+            <el-select v-model="updateForm.tag" placeholder="请选标签" disabled>
+              <el-option label="case" value="case"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="背景图" label-width="100px" prop="url">
+            <el-upload
+              action="/api/opera/v1/file/upload"
+              list-type="picture-card"
+              name="file"
+              :limit="1"
+              :multiple="false"
+              :on-preview="handlePictureCardPreview2"
+              :on-remove="handleRemove2"
+              :on-success="uploadSuccess2"
+              :on-error="uploadError2"
+              :data="{ type: 'image' }"
+              :disabled="urlDisabled">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="visible">
+              <img width="100%" :src="updateForm.url" alt="">
+              <el-input :v-model="updateForm.url" :value="updateForm.url"></el-input>
+            </el-dialog>
+          </el-form-item>
+          <el-form-item label="排序码" label-width="100px">
+            <el-input v-model="updateForm.order" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="editCategoryDialogFormVisible = false">取 消</el-button>
+          <el-button size="mini" type="primary" @click="handleEdit">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -132,19 +227,32 @@ export default {
       limit: 20,
       totalPage: 0,
       parentName: '',
+      urlDisabled: false,
       mainCategoryDialogFormVisible: false,
       mainForm: {
         name: '',
         tag: '',
         pid: 0,
-        order: 0
+        order: 0,
+        url: ''
       },
       childCategoryDialogFormVisible: false,
       childForm: {
         name: '',
         tag: '',
         pid: 0,
-        order: 0
+        order: 0,
+        url: ''
+      },
+      visible: false,
+      editCategoryDialogFormVisible: false,
+      updateForm: {
+        id: '',
+        name: '',
+        tag: '',
+        pid: 0,
+        order: 0,
+        url: ''
       }
     }
   },
@@ -158,6 +266,87 @@ export default {
     handleCurrentChange(val) {
       this.list({ page: val, limit: this.currentPage })
     },
+    handlePictureCardPreview(file) {
+      if (!this.mainForm.url) {
+        this.mainForm.url = file.url
+      }
+      this.visible = true
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    uploadSuccess(response, file, fileList) {
+      console.log('文件上传成功')
+      console.log(response, file, fileList)
+      if (response.code === 0) {
+        var data = response.data
+        var imageInfo = data[0]
+        this.mainForm.url = imageInfo.url
+        this.visible = false
+      } else {
+        console.log('文件上传失败')
+        this.$message.error('文件上传失败')
+      }
+    },
+    uploadError(err, file, fileList) {
+      console.log('文件上传失败')
+      console.log(err)
+      this.$message.error('文件上传失败')
+    },
+    handlePictureCardPreview1(file) {
+      if (!this.childForm.url) {
+        this.childForm.url = file.url
+      }
+      this.visible = true
+    },
+    handleRemove1(file, fileList) {
+      console.log(file, fileList)
+    },
+    uploadSuccess1(response, file, fileList) {
+      console.log('文件上传成功')
+      console.log(response, file, fileList)
+      if (response.code === 0) {
+        var data = response.data
+        var imageInfo = data[0]
+        this.childForm.url = imageInfo.url
+        this.visible = false
+      } else {
+        console.log('文件上传失败')
+        this.$message.error('文件上传失败')
+      }
+    },
+    uploadError1(err, file, fileList) {
+      console.log('文件上传失败')
+      console.log(err)
+      this.$message.error('文件上传失败')
+    },
+    handlePictureCardPreview2(file) {
+      if (!this.updateForm.url) {
+        this.updateForm.url = file.url
+      }
+      this.visible = true
+    },
+    handleRemove2(file, fileList) {
+      console.log(file, fileList)
+    },
+    uploadSuccess2(response, file, fileList) {
+      console.log('文件上传成功')
+      console.log(response, file, fileList)
+      if (response.code === 0) {
+        var data = response.data
+        var imageInfo = data[0]
+        this.updateForm.url = imageInfo.url
+        this.visible = false
+      } else {
+        console.log('文件上传失败')
+        this.$message.error('文件上传失败')
+      }
+    },
+    uploadError2(err, file, fileList) {
+      console.log('文件上传失败')
+      console.log(err)
+      this.$message.error('文件上传失败')
+    },
     list(params = {}) {
       categoryApi.categories(params).then(res => {
         if (res.code === 0) {
@@ -170,15 +359,52 @@ export default {
         }
       })
     },
-    handleEdit(index, row) {
+    handleEdit() {
+      categoryApi.updateCategory(this.updateForm.id, {
+        name: this.updateForm.name,
+        url: this.updateForm.url,
+        order: this.updateForm.order
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('编辑成功')
+          this.editCategoryDialogFormVisible = false
+          this.list({ page: this.currentPage, limit: this.limit })
+          return true
+        } else {
+          this.$message.error(res.message)
+          return false
+        }
+      })
     },
-    handleDelete(index, row) {
+    handleDelete(id) {
+      this.$confirm('确认删除？', '提示').then(_ => {
+        categoryApi.deleteCategory(id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.list({ page: this.currentPage, limit: this.limit })
+            return true
+          } else {
+            this.$message.error(res.message)
+            return false
+          }
+        }).catch(error => {
+          console.log(error)
+          this.$message.error('删除失败')
+          return false
+        })
+      })
     },
     operation(opera) {
       switch (opera.tag) {
         case 'detail':
           break
         case 'edit':
+          this.updateForm.id = opera.row.id
+          this.updateForm.name = opera.row.name
+          this.updateForm.tag = opera.row.tag
+          this.updateForm.url = opera.row.url
+          this.updateForm.order = opera.row.order
+          this.editCategoryDialogFormVisible = true
           break
         case 'addChild':
           this.childForm.tag = opera.row.tag
@@ -187,6 +413,7 @@ export default {
           this.childCategoryDialogFormVisible = true
           break
         case 'delete':
+          this.handleDelete(opera.row.id)
           break
       }
     },