云端开发者展示功能后台完成

src/module/main/components/dev_show.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="cloud-balance">
+    <el-button @click="clickAdd">添加</el-button>
     <div class="table">
       <el-table
         v-if="tableData.length"
@@ -29,7 +30,7 @@
               style="display: block; width: 100px; height: 80px;"
             >
             <section class="ctrls" v-else-if="prop === 'ctrls'">
-              <el-button type="text" @click="clickEdit(scope.row)">编辑</el-button>
+              <el-button type="text" @click="clickEdit(scope.$index, scope.row)">编辑</el-button>
               <el-button type="text" @click="clickDel(scope.row)">删除</el-button>
             </section>
             <span v-else>{{scope.row[prop]}}</span>
@@ -61,19 +62,19 @@
         <el-form-item label="配图" prop="url">
           <el-upload
             class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            action="/api/admin/developer/uploadImg"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
+            <img v-if="ruleForm.url" :src="ruleForm.url" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click="clickSubmit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -101,16 +102,11 @@ const tableProps = [
 export default {
   data() {
     return {
-      imageUrl: '',
       // 是否是编辑入口
       isEdit: false,
-      ruleForm: {
-        uid: '',
-        order: 0,
-        url: '',
-      },
+      ruleForm: {},
       rules: {
-        uid: [
+        id: [
           { required: true, message: '请填写开发者ID', trigger: 'blur' },
         ],
         url: [
@@ -134,8 +130,23 @@ export default {
     this.getTableData()
   },
   methods: {
+    // 点击新增或编辑框的确认
+    async clickSubmit() {
+      let url = '/api/admin/developer/addRecommendDeveloper';
+      if(this.isEdit) url = '/api/admin/developer/editRecommendDeveloper';
+      const res = await this.$post(url, this.ruleForm);
+      const data = res.data;
+      this.getTableData();
+      this.centerDialogVisible = false;
+    },
+    // 点击添加
+    clickAdd() {
+      if(this.isEdit) this.ruleForm = {};
+      this.isEdit = false;
+      this.centerDialogVisible = true;
+    },
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
+      this.ruleForm.url = res.data.file_url;
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -150,8 +161,8 @@ export default {
       return isJPG && isLt2M;
     },
     // 点击删除
-    clickDel(i) {
-      const id = i.id
+    clickDel(i, item) {
+      const id = item.id
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -172,9 +183,18 @@ export default {
       });
     },
     // 点击编辑
-    clickEdit(i) {
-      this.isEdit = true
-      this.centerDialogVisible = true
+    clickEdit(i, {uid, order, url, id}) {
+      // 获取编辑信息, 现在自带的全, 暂时不用了
+      // 接口：/api/admin/developer/getRecommendDeveloper
+      // 参数：id int 列表每条记录的id（不是uid）
+      if(!this.isEdit) this.ruleForm = {
+        uid,
+        order,
+        url,
+        id,
+      };
+      this.isEdit = true;
+      this.centerDialogVisible = true;
     },
     // 点击用户
     clickUID(i) {
@@ -196,7 +216,7 @@ export default {
     async getTableData(page = 1) {
       this.tableData = []
       const res = await this.$post('/api/admin/developer/getRecommendList', { page })
-      console.log(res)
+      // console.log(res)
       const data = res.data
       this.tableData = this.formatTableData(data)
       this.totalCount = Number(data.total)
@@ -209,7 +229,7 @@ export default {
 <style lang='less' scoped>
 #cloud-balance {
   .table {
-    height: calc(100% - 40px);
+    height: calc(100% - 80px);
   }
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;