项目列表

src/views/project/list/detail.vue

@@ -8,7 +8,7 @@
       <el-form-item label="图标：">
         <Upload :url="projectForm.pic" @success="getUpload($event, 'icon')" @delete="getUpload($event, 'icon')" />
       </el-form-item>
-      <el-form-item label="版本管理：" style="width: 1500px">
+      <el-form-item v-if="projectForm.id" label="版本管理：" style="width: 1500px">
         <!-- app列表 -->
         <el-button type="primary" icon="el-icon-plus" @click="getDialog()">新增</el-button>
         <el-table :data="versionData" v-loading="loading" height="342px">
@@ -98,14 +98,11 @@ export default {
       // 项目表单
       projectForm: {},
       // 新增表单
-      addForm: {
-        projectId: this.$route.query.row.id,
-      },
+      addForm: {},
 
       // app列表
       versionData: [],
       versionForm: {
-        projectId: this.$route.query.row.id,
         pageNum: 1,
         pageSize: 10,
       },
@@ -120,6 +117,8 @@ export default {
     let row = this.$route.query.row;
     if (row) {
       this.projectForm = row;
+      console.log(row);
+      this.addForm.projectId = this.versionForm.projectId = row.id
       this.getList();
     }
   },
@@ -225,7 +224,7 @@ export default {
     statusFormatter(row) {
       return this.selectDictLabel(this.statusOptions, row.status);
     },
-  },
+  }
 };
 </script>
 

src/views/project/list/index.vue

@@ -19,67 +19,87 @@
     <!-- 列表 -->
     <el-table :data="tableData">
       <el-table-column prop="name" label="项目名称" align="center" />
-      <el-table-column label="创建时间" align="center" />
-      <el-table-column label="创建人" align="center" />
-      <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter"/>
+      <el-table-column label="图标" align="center" width="150px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.pic" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="text" @click="getDetail(scope.row, 'edit')">管理</el-button>
-          <el-button type="text">下架</el-button>
-          <el-button type="text">上架</el-button>
+          <el-button v-if="scope.row.status === 1" type="text" @click="getChange(scope.row, '上架')">上架</el-button>
+          <el-button v-else type="text" @click="getChange(scope.row, '下架')">下架</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
-      @pagination="getList" />
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="form.pageNum"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-import { page } from '@/api/project/list'
-import { statusMixin } from '../mixin/index';
+import { page, edit } from "@/api/project/list";
 export default {
-  mixins: [statusMixin],
   data() {
     return {
+      // 遮罩层
+      loading: false,
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       total: 0,
       // 列表
-      tableData: []
-    }
+      tableData: [],
+      statusOptions: [
+        {
+          value: 0,
+          label: "上架",
+        },
+        {
+          value: 1,
+          label: "下架",
+        },
+      ],
+    };
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      page(this.form).then(res => {
+      this.loading = true
+      page(this.form).then((res) => {
         if (res.code === 0) {
-          this.tableData = res.data.records
-          this.total = res.data.total
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+          this.loading = false
         }
-      })
+      });
     },
 
     // 搜索
     getSearch() {
-      this.form.pageNum = 1
-      this.getList()
+      this.form.pageNum = 1;
+      this.getList();
     },
 
     // 重置
     getRefresh() {
       this.form = {
         pageNum: 1,
-        pageSize: 10
-      }
-      this.getList()
+        pageSize: 10,
+      };
+      this.getList();
     },
 
     // 新增 / 管理
@@ -88,17 +108,30 @@ export default {
         path: `/project/list/detail`,
         query: {
           row: row,
-          key: key
+          key: key,
+        },
+      });
+    },
+
+    getChange(row, key) {
+      row.status = key === "上架" ? 0 : 1;
+      edit(row).then((res) => {
+        if (res.code === 0) {
+          this.$message.success("修改成功！");
+          this.getList()
         }
-      })
+      });
     },
-    
+
     statusFormatter(row) {
       return this.selectDictLabel(this.statusOptions, row.status);
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.el-image {
+  border-radius: 20px;
+}
 </style>