项目列表

src/views/project/list/detail.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="app-container">
-    <el-form class="form" :model="form_create" label-width="100px" size="small">
+    <!-- 项目表单 -->
+    <el-form class="form" :model="projectForm" label-width="100px">
       <el-form-item label="项目名称：">
-        <el-input v-model="form_create.name" placeholder="请输入项目名称"></el-input>
+        <el-input v-model="projectForm.name" placeholder="请输入项目名称" />
       </el-form-item>
       <el-form-item label="图标：">
-        <Upload :url="form_create.pic" @success="getUpload" @delete="getUpload" />
-        <span style="fontSize:12px; color:#909399">图片规格为256*256，大小在1MB以内的PNG图片</span>
+        <Upload :url="projectForm.pic" @success="getUpload($event, 'icon')" @delete="getUpload($event, 'icon')" />
       </el-form-item>
-      <el-form-item v-if="this.$route.query.key === 'edit'" label="版本管理：" style="width:1500px">
-        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible_create = true">新增</el-button>
-        <el-table :data="tableData_version" v-loading="loading" height="318px">
+      <el-form-item 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">
           <el-table-column type="index" label="序号" align="center" />
           <el-table-column prop="name" label="应用名称" align="center" />
           <el-table-column prop="version" label="最新版本" align="center" />
@@ -20,279 +21,207 @@
           <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <!-- <el-button type="text">上架</el-button>
-              <el-button type="text">下架</el-button>-->
-              <el-button type="text" @click="getRelease(scope.row)">发布</el-button>
-              <el-button type="text" @click="getChange(scope.row)">更新</el-button>
-              <el-dropdown @command="getCommand" style="margin-left: 10px">
+              <el-button v-if="scope.row.status === 0" type="text" @click="getDialog(scope.row, '上架')">上架</el-button>
+              <el-button v-else type="text" @click="getDialog(scope.row, '下架')">下架</el-button>
+              <el-button type="text" @click="getDialog(scope.row, '更新')">更新</el-button>
+              <el-button type="text" v-clipboard:copy="scope.row.downUrl">复制下载地址</el-button>
+              <!-- <el-dropdown @command="getCommand" style="margin-left: 10px">
                 <el-button type="text">更多</el-button>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
-                  <el-dropdown-item command="copy"  v-clipboard:copy="scope.row.downUrl">复制下载地址</el-dropdown-item>
+                  <el-dropdown-item command="copy" v-clipboard:copy="scope.row.downUrl">复制下载地址</el-dropdown-item>
                   <el-dropdown-item command="history">查看版本记录</el-dropdown-item>
                 </el-dropdown-menu>
-              </el-dropdown>
+              </el-dropdown>-->
             </template>
           </el-table-column>
         </el-table>
         <pagination
-          v-show="version_total>0"
-          :total="version_total"
-          :page.sync="form_version.pageNum"
-          :limit.sync="form_version.pageSize"
-          @pagination="getPage"
+          v-show="total>0"
+          :total="total"
+          :page.sync="versionForm.pageNum"
+          :limit.sync="versionForm.pageSize"
+          @pagination="getList"
         />
       </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </el-form-item>
     </el-form>
-    <div class="form-btn">
-      <el-button size="small" @click="getCancel">取消</el-button>
-      <el-button type="primary" size="small" @click="getSubmit">确定</el-button>
-    </div>
-    <!-- 新增 -->
-    <el-dialog :visible.sync="dialogVisible_create" title="新增" width="500px">
-      <el-form :model="formCreate" ref="formCreate" label-width="100px">
+
+    <!-- 新增弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" :before-close="getCancel" :title="title" width="500px">
+      <el-form :model="addForm" ref="addForm" label-width="100px">
         <el-form-item label="应用名称：">
-          <el-input v-model="formCreate.name" placeholder="请输入应用名称" />
+          <el-input v-model="addForm.name" placeholder="请输入应用名称" />
         </el-form-item>
-        <el-form-item label="系统类别：">
-          <el-select v-model="formCreate.os" placeholder="请选择系统类别">
+        <el-form-item label="系统类型：">
+          <el-select v-model="addForm.os" placeholder="请选择系统类型">
             <el-option v-for="item in osOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="应用Logo：">
-          <Upload :url="formCreate.pic" @success="getUploadCreate" @delete="getUploadCreate" />
-        </el-form-item>
-        <el-form-item label="版本号：">
-          <el-input v-model="formCreate.version" placeholder="请输入版本号" />
-        </el-form-item>
-        <el-form-item label="更新内容：">
-          <el-input v-model="formCreate.updateContent" type="textarea" rows="4" placeholder="请输入更新内容" />
-        </el-form-item>
-        <el-form-item label="安装包：">
-          <Upload type="file" @success="getUploadFile" />
+          <Upload :url="addForm.pic" @success="getUpload($event, 'logo')" @delete="getUpload($event, 'logo')" />
         </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button type="primary" @click="getAdd">确定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 更新版本 -->
-    <el-dialog :visible.sync="dialogVisible_update" title="更新版本" width="500px">
-      <el-form :model="formUpdate" label-width="100px">
         <el-form-item label="版本号：">
-          <el-input v-model="formUpdate.version" placeholder="请输入版本号" />
+          <el-input v-model="addForm.version" placeholder="请输入版本号" />
         </el-form-item>
         <el-form-item label="更新内容：">
-          <el-input v-model="formUpdate.updateContent" type="textarea" rows="4" placeholder="请输入更新内容" />
+          <el-input v-model="addForm.updateContent" type="textarea" rows="4" placeholder="请输入更新内容"></el-input>
         </el-form-item>
         <el-form-item label="安装包：">
-          <Upload type="file" />
+          <Upload type="file" @success="getUpload($event, 'file')" />
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button type="primary" @click="getUpdate">确定</el-button>
+        <el-button @click="getCancel">取消</el-button>
+        <el-button type="primary" @click="getChange">确定</el-button>
       </div>
     </el-dialog>
-
-    <!-- 编辑 -->
-    <el-dialog :visible.sync="dialogVisible_edit" title="编辑" width="500px">
-      <el-form label-width="100px">
-        <el-form-item label="应用名称：">
-          <el-input placeholder="请输入应用名称" />
-        </el-form-item>
-        <el-form-item label="应用Logo：">
-          <Upload />
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button type="primary">确定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 版本记录 -->
-    <el-dialog :visible.sync="dialogVisible_history" title="版本记录" width="1000px">
-      <el-table :data="tableData_history">
-        <el-table-column label="序号" align="center" type="index" />
-        <el-table-column label="版本号" align="center" />
-        <el-table-column label="更新内容" align="center" />
-        <el-table-column label="安装包大小" align="center" />
-        <el-table-column label="创建时间" align="center" />
-        <el-table-column label="当前状态" align="center" />
-        <el-table-column label="操作" align="center">
-          <template>
-            <el-button>下架</el-button>
-            <el-button>上架</el-button>
-            <el-button>编辑</el-button>
-            <el-button>发布</el-button>
-            <el-button>删除</el-button>
-            <el-button>复制下载链接</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import { add, edit, update, updateAdd, updatePage } from "@/api/project/list";
-import { statusMixin } from '../mixin/index';
 import Upload from "@/components/Upload";
+import { statusMixin, osMixin } from "../mixin/index";
 export default {
-  mixins: [statusMixin],
+  mixins: [statusMixin, osMixin],
   components: {
     Upload,
   },
   data() {
     return {
       // 遮罩层
-      loading: true,
-      // 表单
-      form_create: {},
-      form_version: {
+      loading: false,
+
+      // 项目表单
+      projectForm: {},
+      // 新增表单
+      addForm: {
+        projectId: this.$route.query.row.id,
+      },
+
+      // app列表
+      versionData: [],
+      versionForm: {
+        projectId: this.$route.query.row.id,
         pageNum: 1,
         pageSize: 10,
       },
-      formUpdate: {},
-      formCreate: {},
-      // 列表
-      tableData_version: [
-        {
-          name: "测试",
-        },
-      ],
-      version_total: 0,
-      tableData_history: [
-        {
-          version: 0.1,
-        },
-      ],
-      osOptions: [
-        {
-          value: "IOS",
-          label: "IOS ",
-        },
-        {
-          value: "Android",
-          label: "Android",
-        },
-      ],
-      // 弹窗
-      dialogVisible_create: false,
-      dialogVisible_update: false,
-      dialogVisible_edit: false,
-      dialogVisible_history: false,
+      total: 0,
+
+      // 新增弹窗
+      dialogVisible: false,
+      title: "",
     };
   },
   mounted() {
-    if (this.$route.query.row) {
-      this.form_create = this.$route.query.row;
-      this.formCreate.projectId = this.form_version.projectId =
-        this.$route.query.row.id;
-      this.getPage();
+    let row = this.$route.query.row;
+    if (row) {
+      this.projectForm = row;
+      this.getList();
     }
   },
   methods: {
-    // 更多
-    getCommand(e) {
-      if (e === "edit") {
-        this.dialogVisible_edit = true;
-      } else if (e === "copy") {
-      } else {
-        this.dialogVisible_history = true;
-      }
-    },
-
-    // 上传图标
-    getUpload(e) {
-      this.form_create.pic = e.file;
-    },
-
-    // 上传logo
-    getUploadCreate(e) {
-      this.formCreate.pic = e.file;
-    },
-
-    // 上传安装包
-    getUploadFile(e) {
-      this.formCreate.downUrl = e.file;
-      this.formCreate.size = e.size;
-    },
-
-    // 应用分页
-    getPage() {
+    // 获取版本管理分页
+    getList() {
       this.loading = true;
-      updatePage(this.form_version).then((res) => {
+      updatePage(this.versionForm).then((res) => {
         if (res.code === 0) {
-          this.tableData_version = res.data.records;
-          this.version_total = res.data.total;
+          this.versionData = res.data.records;
+          this.total = res.data.total;
           this.loading = false;
         }
       });
     },
 
-    // 新增
-    getAdd() {
-      updateAdd(this.formCreate).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("新增成功！");
-          this.dialogVisible_create = false;
-          this.getPage();
-        }
-      });
+    // 打开弹窗
+    getDialog(e, key) {
+      this.title = key ? key : "新增";
+      if (e) {
+        this.addForm = e;
+      }
+
+      if (key === "上架") {
+        this.loading = true
+        this.addForm.status = 1;
+        this.getChange();
+      } else if (key === "下架") {
+        this.loading = true
+        this.addForm.status = 0;
+        this.getChange();
+      } else {
+        this.dialogVisible = true;
+      }
     },
 
-    // 发布
-    getRelease(row){
-      this.formUpdate = row
-      this.formUpdate.status = 1
-      this.getUpdate()
+    // 上传
+    getUpload(e, key) {
+      if (key === "icon") {
+        this.projectForm.pic = e.file;
+      } else if (key === "logo") {
+        this.addForm.pic = e.file;
+      } else if (key === "file") {
+        this.addForm.downUrl = e.file;
+        this.addForm.size = e.size;
+      }
     },
 
-    // 更新弹窗
-    getChange(row) {
-      this.dialogVisible_update = true;
-      this.formUpdate = row;
+    // 新增 / 更新版本
+    getChange() {
+      if (this.title === "新增") {
+        updateAdd(this.addForm).then((res) => {
+          if (res.code === 0) {
+            this.$message.success("新增成功！");
+            this.dialogVisible = false;
+            this.getList();
+          }
+        });
+      } else {
+        update(this.addForm).then((res) => {
+          if (res.code === 0) {
+            this.$message.success(`${this.title}成功！`);
+            this.dialogVisible = false;
+            this.getList();
+          }
+        });
+      }
     },
 
-    // 更新
-    getUpdate() {
-      update(this.formUpdate).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("更新成功！");
-          this.dialogVisible_update = false;
-          this.getPage();
-        }
-      });
+    // 取消
+    getCancel() {
+      this.addForm = {
+        projectId: this.$route.query.row.id,
+      };
+      this.dialogVisible = false;
     },
 
-    // 确定
+    // 新建项目
     getSubmit() {
       if (this.$route.query.row) {
-        edit(this.form_create).then((res) => {
+        edit(this.projectForm).then((res) => {
           if (res.code === 0) {
             this.$message.success("修改成功！");
-            this.getCancel();
+            this.cancel();
           }
         });
       } else {
-        add(this.form_create).then((res) => {
+        add(this.projectForm).then((res) => {
           if (res.code === 0) {
             this.$message.success("新增成功！");
-            this.getCancel();
+            this.cancel();
           }
         });
       }
     },
 
-    // 取消
-    getCancel() {
+    // 取消新建项目
+    cancel() {
       this.$tab.closeOpenPage("/project/list");
     },
 
+    // 字典翻译
     statusFormatter(row) {
       return this.selectDictLabel(this.statusOptions, row.status);
     },