资源分类

project/pengliuyang/apps/AppCommunityResource/components/resourceClassification.vue

@@ -9,13 +9,12 @@
         </ai-search-bar>
         <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                   @getList="getList()" :col-configs="colConfigs" :dict="dict">
-                  <!-- @sort-change="changeTableSort" -->
 
-          <!-- <el-table-column label="商品图" slot="merchandisePhoto" align="center" width="130">
+          <el-table-column label="分类图标" slot="categoryIcon" align="center">
             <template v-slot="{ row }">
-              <ai-uploader :disabled="true" :instance="instance" v-model="row.merchandisePhoto" :limit="9"></ai-uploader>
+              <ai-uploader :disabled="true" :instance="instance" v-model="row.categoryIconArr" :limit="1"></ai-uploader>
             </template>
-          </el-table-column> -->
+          </el-table-column>
 
           <el-table-column slot="options" label="状态" align="center">
             <template slot-scope="{ row }">
@@ -23,25 +22,26 @@
               <el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button>
             </template>
           </el-table-column>
+
         </ai-table>
       </template>
     </ai-list>
+
     <ai-dialog title="添加资源分类" :visible.sync="dialog" :customFooter="true" :destroyOnClose="true" width="720px" @onConfirm="onConfirm" @closed="form={}">
-      
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="分类名称" prop="categoryName">
           <el-input v-model.trim="form.categoryName" placeholder="请输入" type="text" maxlength="20"></el-input>
         </el-form-item>
-        <el-form-item label="分类图标" prop="categoryIcon">
+        <el-form-item label="分类图标" prop="categoryIconArr">
-          <ai-uploader :instance="instance" isShowTip v-model="form.categoryIcon" :limit="1"></ai-uploader>
+          <ai-uploader :instance="instance" isShowTip v-model="form.categoryIconArr" :limit="1"></ai-uploader>
         </el-form-item>
       </el-form>
-
       <div class="dialog-footer" slot="footer">
         <el-button @click="dialog=false;form={}">取消</el-button>
         <el-button type="primary" @click="onConfirm">确定</el-button>
       </div>
     </ai-dialog>
+
   </section>
 </template>
 
@@ -67,23 +67,24 @@ export default {
       dialog: false,
       form: {
         categoryName: '',
-        categoryIcon: ''
+        categoryIcon: '',
+        categoryIconArr: []
       }
     }
   },
   computed: {
     colConfigs() {
       return [
-        {prop: 'resourceName', label: '分类名称', width: '300px'},
+        {prop: 'categoryName', label: '分类名称', width: '300px'},
-        {prop: 'categoryName', label: '资源数量', align: 'center'},
+        {prop: 'resourceNum', label: '资源数量', align: 'center'},
-        // {prop: "merchandisePhoto",slot: "merchandisePhoto",align: "center",label: "商品图"},
+        {slot: "categoryIcon"},
-        {prop: 'option'}
+        {slot: 'option'},
       ]
     },
     rules() {
       return {
         categoryName: [{required: true, message: "请输入分类名称"}],
-        categoryIcon: [{required: true, message: "请上传分类图标"}],
+        categoryIconArr: [{required: true, message: "请上传分类图标"}],
       }
     }
   },
@@ -99,8 +100,17 @@ export default {
         }
       }).then(res=> {
         if(res?.data) {
-          this.tableData = res.data.records
+          this.tableData = res.data.records.map(e=> {
-          this.total = res.total
+            return {
+              categoryName: e.categoryName,
+              resourceNum: e.resourceNum,
+              categoryIcon: e.categoryIcon,
+              id: e.id,
+              categoryIconArr: [{0:e.categoryIcon}]
+            }
+          })
+          this.total = res.data.total
+          console.log(this.tableData);
         }
       })
     },
@@ -108,13 +118,42 @@ export default {
     onConfirm() {
       this.$refs.form.validate((valid) => {
         if(valid) {
-          this.instance.post(`/app/appresourcecategory/addOrUpdate`, ...this.form).then(res=> {
+          if(this.form.categoryIconArr.length) {
-            console.log(res,this.form.categoryIcon);
+            this.form.categoryIcon = this.form.categoryIconArr[0].url
+          }
+          this.instance.post(`/app/appresourcecategory/addOrUpdate`, {...this.form}).then(res=> {
+            if(res.code == 0) {
+              this.$message.success('新增成功')
+              this.dialog = false
+              this.getList()
+            }
           })
         }
       })
     },
-  }
+    handleDelete(ids) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appresourcecategory/delete?ids=${ids}`).then(res=> {
+          if (res.code== 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+    toEdit(id) {
+      this.getDetail(id)
+      this.dialog = true
+    },
+    getDetail(ids) {
+      this.instance.post(`/app/appresourcecategory/queryDetailById?id=${ids}`).then(res=> {
+        if(res.data) {
+          this.form = res.data
+          // this.form.categoryIconArr = [...res.data.categoryIcon]
+        }
+      })
+    }
+  },
 }
 </script>