管理后台添加版本更新

.project

+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>Vmatrix-admin</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1569403728185</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

src/api/template.js

@@ -126,3 +126,26 @@ export function templateUploadZipResourse(resourse) {
 export function templateUploadZipUrl() {
   return process.env.VUE_APP_BASE_API + '/template/upload/zip/resource'
 }
+/**
+ *
+ * @param {*} templateId
+ * 获取版本详情
+ */
+export function getVersion(templateId) {
+  return request({
+    url: `/template/get/version/list/${templateId}`,
+    method: 'get'
+  })
+}
+/**
+ *
+ * @param {*} templateId
+ * 更新版本
+ */
+export function updateVersion(data) {
+  return request({
+    url: '/template/update/version/info',
+    method: 'post',
+    data
+  })
+}

src/router/modules/templates.js

@@ -44,6 +44,20 @@ const templatesRouter = {
       name: 'TemplateDetail',
       hidden: true,
       meta: { title: '模板详情' }
+    },
+    {
+      path: 'version',
+      component: () => import('@/views/template/template-version'),
+      name: 'versionUpdate',
+      hidden: true,
+      meta: { title: '版本详情' }
+    },
+    {
+      path: 'updateVersion',
+      component: () => import('@/views/template/template-version'),
+      name: 'versionUpdate',
+      hidden: true,
+      meta: { title: '更新版本' }
     }
   ]
 }

src/views/template/template-list.vue

@@ -26,15 +26,7 @@
       </el-checkbox> -->
     </div>
 
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-    >
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
       <el-table-column label="序号" prop="id" align="center" width="80" type="index" :class-name="getSortClass('id')" />
       <el-table-column label="模板类型" width="150px" align="center">
         <template slot-scope="scope">
@@ -53,7 +45,7 @@
       </el-table-column>
       <el-table-column label="资源路径" width="210px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.frameUrl.split('/').splice(-2, 3)[0]}}</span>
+          <span>{{ scope.row.frameUrl.split('/').splice(-2, 3)[0] }}</span>
         </template>
       </el-table-column>
       <!-- <el-table-column label="状态" class-name="status-col" width="100">
@@ -63,7 +55,7 @@
           </el-tag>
         </template>
       </el-table-column> -->
-      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini">
             <a :href="row.frameUrl" target="_blank">预览</a>
@@ -77,6 +69,9 @@
           <!-- <el-button v-if="row.status!='draft'" size="mini" @click="handleDelete(row,'draft')">
             禁用
           </el-button> -->
+          <el-button type="primary" size="mini" @click="versionNameUpdate(row)">
+            版本
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -92,8 +87,12 @@ import Pagination from '@/components/Pagination' // secondary package based on e
 
 export default {
   name: 'ComplexTable',
-  components: { Pagination },
-  directives: { waves },
+  components: {
+    Pagination
+  },
+  directives: {
+    waves
+  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -121,7 +120,13 @@ export default {
         sort: '+id'
       },
       importanceOptions: [1, 2, 3],
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      sortOptions: [{
+        label: 'ID Ascending',
+        key: '+id'
+      }, {
+        label: 'ID Descending',
+        key: '-id'
+      }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       temp: {
@@ -142,9 +147,22 @@ export default {
       dialogPvVisible: false,
       pvData: [],
       rules: {
-        type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+        type: [{
+          required: true,
+          message: 'type is required',
+          trigger: 'change'
+        }],
+        timestamp: [{
+          type: 'date',
+          required: true,
+          message: 'timestamp is required',
+          trigger: 'change'
+        }],
+        title: [{
+          required: true,
+          message: 'title is required',
+          trigger: 'blur'
+        }]
       },
       downloadLoading: false
     }
@@ -197,6 +215,15 @@ export default {
         }
       })
     },
+    versionNameUpdate(row) {
+      console.log(row)
+      this.$router.push({
+        name: 'versionUpdate',
+        query: {
+          templateId: row.templateId
+        }
+      })
+    },
     handleDelete(row) {
       this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
         confirmButtonText: '确定',

src/views/template/template-version.vue

+<template>
+  <div class="app-container">
+    <el-button type="primary" size="mini" @click="update()">
+      更新版本
+    </el-button>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="versionId" label="版本ID" width="280" />
+      <el-table-column prop="versionName" label="版本描述" width="180" />
+      <el-table-column prop="versionNum" label="版本号" />
+      <el-table-column prop="versionState" label="版本状态" />
+
+      <el-table-column fixed="right" label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button size="small" type="warning" @click="load(scope.row.zipUrl)">下载</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog title="更新模板包" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="模板描述" prop="typeMenuOrder">
+          <el-input v-model="temp.typeMenuOrder" />
+        </el-form-item>
+        <el-form-item label="上传模板包">
+          <el-upload class="upload-demo" drag name="resource" accept=".zip" :show-file-list="false" :on-success="uploadZipSuccess" :on-progress="onProgress" :action="templateUploadZipUrl">
+            <i class="el-icon-upload" />
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+            <div slot="tip" class="el-upload__tip">只能上传zip包 {{ temp.templateCount ? '上传成功' : '' }}</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="updateVersionHandle()">
+          确认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getVersion,
+  updateVersion,
+  templateUploadZipUrl
+} from '@/api/template'
+
+export default {
+  name: 'Version',
+  data() {
+    return {
+      temp: {
+        templateId: '',
+        frameUrl: '',
+        resourceUrl: '',
+        pictureUrl: '',
+        zipUrl: '',
+        versionName: '',
+        versionType: ''
+      },
+      dialogStatus: '',
+      dialogFormVisible: false,
+      templateUploadZipUrl: templateUploadZipUrl(),
+      tableData: [{
+        versionId: '',
+        versionName: '',
+        versionNum: '',
+        versionState: '',
+        zipUrl: ''
+      }]
+    }
+  },
+  created() {
+    this.temp.templateId = this.$route.query.templateId
+    this.getVersion()
+  },
+  methods: {
+    getVersion() {
+      this.listLoading = true
+      getVersion(this.temp.templateId).then(
+        response => {
+          console.log(response)
+          this.tableData = response
+          // Just to simulate the time of the request
+          setTimeout(() => {
+            this.listLoading = false
+          }, 1.5 * 1000)
+        }
+      )
+    },
+    load(a) {
+      window.open(a)
+    },
+    resetTemp() {
+      this.temp = {
+        typeMenuName: '',
+        typeMenuOrder: 0
+      }
+    },
+    update() {
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+    },
+    uploadZipSuccess(e) {
+      this.fullscreenLoading = false
+      if (e.code && e.code !== '0') {
+        this.$message.error(e.msg)
+      } else {
+        this.fullscreenLoading = false
+        this.$message('上传成功')
+        this.temp.frameUrl = e.frameUrl
+        this.temp.resourceUrl = e.resourceUrl
+        this.temp.pictureUrl = e.pictureUrl.map(item => {
+          if (item.indexOf('http') !== -1 || item.indexOf('https') !== -1) {
+            return item + ''
+          } else {
+            return e.url + item + ''
+          }
+        })
+          .join(',')
+        this.temp.zipUrl = e.zipUrl
+        console.log(this.temp)
+      }
+      console.log(e)
+    },
+    onProgress(event) {
+      console.log(event)
+      this.fullscreenLoading = true
+      // if (event.percent === 100) {
+      //   this.fullscreenLoading = false
+      // }
+    },
+    updateVersionHandle() {
+      updateVersion(this.temp)
+        .then(response => {
+          this.getVersion()
+        })
+      /* .catch(() => {
+						console.log('cathch')
+						this.listLoading = false
+					})*/
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>