增加管理员版本管理页面

src/api/class-api.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+class API {
+    constructor(url, req) {
+        const map = {
+            add: 'POST',
+            del: 'DELETE',
+            update: 'PUT',
+            get: 'GET'
+        }
+        this.url = url
+        for (let key in map) {
+            this[key] = function (data) {
+                data = Array.isArray(data) ? data : {
+                    ...data, shopId: localStorage.getItem("shopId"),
+                }
+                if (key === 'del') {
+                    delete data.shopId
+                }
+                const par={ url, method: map[key] }
+                if(key==='get'){
+                    par.params=data
+                }else{
+                    par.data=data
+                }
+                return request(par)
+            }
+        }
+    }
+}
+
+export default API

src/api/version.js

@@ -0,0 +1,38 @@
+import $api from './class-api'
+import request from '@/utils/request'
+
+export const $version = new $api('/api/tbVersion')
+/**
+ * 修改当前选中 版本
+ * @returns
+ */
+export function $upSel(data) {
+    return request({
+        url: 'upSel',
+        method: "put",
+        data: {
+            shopId: localStorage.getItem("shopId"),
+            ...data
+        }
+    });
+}
+
+/**
+ * 上传版本文件
+ * @returns
+ */
+export function $uploadVersionFile(file, par) {
+    var data = new FormData()
+    data.append('file', file)
+    for(let i in par){
+        if(i!=='file'){
+            data.append(i, par[i])
+        }
+    }
+    return request({
+        url: 'api/qiNiuContent/uploadVersionFile',
+        method: "post",
+        data
+    });
+}
+

src/store/getters.js

@@ -17,6 +17,7 @@ const getters = {
   fileUploadApi: state => state.api.fileUploadApi,
   updateAvatarApi: state => state.api.updateAvatarApi,
   qiNiuUploadApi: state => state.api.qiNiuUploadApi,
+  versionUploadApi: state => state.api.versonUploadApi,
   sqlApi: state => state.api.sqlApi,
   swaggerApi: state => state.api.swaggerApi,
   sidebarRouters: state => state.permission.sidebarRouters

src/store/modules/api.js

@@ -18,6 +18,8 @@ const api = {
     swaggerApi: baseUrl + '/doc.html',
     // 文件上传
     fileUploadApi: baseUrl + '/api/localStorage',
+    // 上传版本文件
+    versonUploadApi: baseUrl + '/api/uploadVersionFile',
     // baseUrl，
     baseApi: baseUrl
   }

src/views/system/version/components/add-version-file.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="500px"
+    :visible.sync="dialogVisible"
+    @close="diaClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+      <el-form-item label="版本文件">
+        <uploadFile ref="uploadImg" :limit="1" @remove="uploadRemove" />
+        <div class="tips"></div>
+      </el-form-item>
+      <el-form-item label="版本号" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="onSubmitHandle">确 定 上 传</el-button>
+    </span>
+  </el-dialog>
+</template>
+  
+  <script>
+import uploadFile from "./upload-file";
+import { $uploadVersionFile } from "@/api/version";
+
+const form = {
+  file: "",
+  name: "",
+};
+export default {
+  components: {
+    uploadFile,
+  },
+  data() {
+    return {
+      title: "",
+      dialogVisible: false,
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "版本号必填",
+            trigger: "blur",
+          },
+        ],
+      },
+      form: { ...form },
+    };
+  },
+  mounted() {},
+  methods: {
+    restForm() {
+      console.log("restForm");
+      console.log(form);
+      this.form = { ...form };
+      this.$refs.uploadImg.clearFiles();
+    },
+    diaClose() {
+      this.restForm();
+    },
+    uploadSuccess(res) {
+      this.form.img = res[0];
+      console.log(this.form.img);
+    },
+    uploadRemove() {
+      this.form.img = "";
+    },
+    // 提交
+    onSubmitHandle() {
+      console.log(this.form);
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            let res = "";
+            if (this.form.id) {
+              //编辑
+             
+              res = await tbShopSongEdit(this.form);
+              this.$notify({
+                title: "成功",
+                message: `修改成功`,
+                type: "success",
+              });
+            } else {
+              //添加
+              const file=this.$refs.uploadImg.getFileList()[0]
+              console.log(this.form)
+              res = await $uploadVersionFile(file,this.form);
+              this.$notify({
+                title: "成功",
+                message: `添加成功`,
+                type: "success",
+              });
+            }
+            this.close();
+
+            this.$emit("success", res);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      });
+    },
+    async show(obj = {}) {
+      console.log(obj);
+      // this.form=this.$options.data().form
+      this.dialogVisible = true;
+      this.title = "上传版本文件";
+
+      if (obj && obj.id) {
+        this.title = "编辑版本文件";
+        this.form = {
+          ...obj,
+        };
+      }
+      if (obj && obj.hasOwnProperty("img") && obj.img) {
+        console.log(obj.img);
+        this.form.img = obj.img;
+        requestAnimationFrame(() => {
+          this.$refs.uploadImg.fileList = [
+            {
+              url: obj.img,
+            },
+          ];
+        });
+      }
+    },
+    close() {
+      this.restForm();
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+  
+  <style scoped lang="scss">
+.goods_info {
+  background-color: #f9f9f9;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+
+  .info {
+    flex: 1;
+    padding-left: 10px;
+  }
+}
+</style>
+  

src/views/system/version/components/add-version.vue

@@ -0,0 +1,211 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="500px"
+    :visible.sync="dialogVisible"
+    @close="diaClose"
+  >
+    <el-form
+      v-loading="loading"
+      :element-loading-text="loadingText"
+    element-loading-spinner="el-icon-loading"
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+      <el-form-item label="平台">
+        <el-select
+          v-model="form.source"
+          placeholder="请选择平台"
+          style="width: 100%"
+        >
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in sources"
+            :key="item.value"
+          />
+        </el-select>
+        <div class="tips"></div>
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="form.version"></el-input>
+      </el-form-item>
+      <el-form-item label="是否强制更新" prop="isUp">
+        <el-radio-group v-model="form.isUp">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="更新提示内容" prop="message">
+        <el-input type="textarea" v-model="form.message"></el-input>
+      </el-form-item>
+
+      <el-form-item label="版本文件">
+        <uploadFile ref="uploadFile" @success="changeHasUpload" :limit="1" @remove="uploadRemove" />
+        <div class="tips"></div>
+      </el-form-item>
+      <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+        </div>
+    </el-form>
+  </el-dialog>
+</template>
+  
+  <script>
+import uploadFile from "./upload-file";
+import { $uploadVersionFile, $version } from "@/api/version";
+
+const form = {
+  source: "PC",
+  version: "",
+  isUp: 0,
+  message: "",
+  url: "",
+};
+export default {
+  components: {
+    uploadFile,
+  },
+  data() {
+    return {
+      loading: false,
+      loadingText:'',
+      sources: [
+        { label: "PC", value: "PC" },
+        { label: "APP", value: "APP" },
+      ],
+      title: "",
+      dialogVisible: false,
+      rules: {
+        version: [
+          {
+            required: true,
+            message: "版本号必填",
+            trigger: "blur",
+          },
+        ],
+      },
+      form: { ...form },
+      //文件是否已经上传过
+      hasUpload:true
+    };
+  },
+  mounted() {},
+  methods: {
+    changeHasUpload(){
+      this.hasUpload=false
+    },
+    restForm() {
+      console.log("restForm");
+      console.log(form);
+      this.form = { ...form };
+      this.loadingText=''
+      this.loading=false
+      this.$refs.uploadFile.clearFiles();
+    },
+    diaClose() {
+      this.restForm();
+    },
+    uploadSuccess(res) {
+      this.form.img = res[0];
+      console.log(this.form.img);
+    },
+    uploadRemove() {
+      this.form.img = "";
+    },
+    // 提交
+    onSubmitHandle() {
+      console.log(this.form);
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            const { version } = this.form;
+            let fileRes=''
+            const file = this.$refs.uploadFile.getFileList();
+            if(!this.hasUpload&&file){
+              this.loadingText='文件上传中，请耐心等待。。。！'
+              this.loading = true;
+               fileRes = await $uploadVersionFile(file, { name:version });
+              this.loading = false;
+            }
+            let res = "";
+            if (this.form.id) {
+              //编辑
+              res = await $version.update({...this.form,url:fileRes?fileRes.data:this.form.url});
+              this.$notify({
+                title: "成功",
+                message: `修改成功`,
+                type: "success",
+              });
+
+            } else {
+              //添加
+              if (file) {
+                console.log(1);
+              }
+              res = await $version.add({...this.form,url:fileRes?fileRes.data:this.form.url});
+              this.$notify({
+                title: "成功",
+                message: `添加成功`,
+                type: "success",
+              });
+            }
+            this.close();
+
+            this.$emit("success", res);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      });
+    },
+    async show(obj = {}) {
+      console.log(obj);
+      // this.form=this.$options.data().form
+      this.dialogVisible = true;
+      this.title = "新增版本";
+
+      if (obj && obj.id) {
+        this.title = "编辑版本";
+        this.form = {
+          ...obj,
+        };
+        requestAnimationFrame(()=>{
+            this.$refs.uploadFile.fileList = [{
+              url: obj.url,
+              name: obj.url,
+            }]
+          })
+      }
+    },
+    close() {
+      this.restForm();
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+  
+  <style scoped lang="scss">
+  .dialog-footer{
+    display: flex;
+    margin-top: 30px;
+    justify-content: right;
+  }
+.goods_info {
+  background-color: #f9f9f9;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+
+  .info {
+    flex: 1;
+    padding-left: 10px;
+  }
+}
+</style>
+  

src/views/system/version/components/upload-file.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-upload
+      ref="upload"
+      :action="versionUploadApi"
+      :auto-upload="true"
+      :headers="headers"
+      :file-list="fileList"
+      :limit="limit"
+      :show-file-list="true"
+      :http-request="uploadVersionFile"
+      :list-type="type"
+      :multiple="limit > 1"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :on-exceed="onExceed"
+      :on-remove="handleRemove"
+      :before-upload="beforeUpload"
+    >
+      <el-button size="small" type="primary">选择文件</el-button>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" :z-index="99">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getToken } from "@/utils/auth";
+import { Notification } from "element-ui";
+export default {
+  computed: {
+    ...mapGetters(["versionUploadApi"]),
+  },
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+    limit: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      fileList: [],
+      // files: [],
+      headers: {
+        Authorization: getToken(),
+      },
+    };
+  },
+  methods: {
+    beforeUpload(file) {
+    //   const isExe = file.name.endsWith(".exe");
+    //   if (!isExe) {
+    //     this.$message.error("只允许上传.exe文件！");
+    //     return false; // 阻止上传
+    //   }
+      return true; // 允许上传
+    },
+    uploadVersionFile(e) {
+      this.fileList.push(e.file);
+      this.$emit("success");
+    },
+    getFileList() {
+      if (this.limit == 1) {
+        return this.fileList[0];
+      } else {
+        return this.fileList;
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      console.log("handleSuccess");
+      setTimeout(() => {
+        this.fileList.push({
+          url: response.data[0],
+          id: response.data.id,
+        });
+      }, 100);
+      // this.files = response.data
+      this.$emit("success", response.data);
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      // console.log(e)
+      const m = JSON.parse(e.message);
+      Notification.error({
+        title: m.message,
+        duration: 5000,
+      });
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    onExceed() {
+      this.$notify.error({
+        title: "错误",
+        message: `最多上传${this.limit}个文件`,
+      });
+    },
+    handleRemove(file, fileList) {
+      console.log(file);
+      let arr = fileList.map((item) => item.url);
+      // 删除数据
+      let index = this.fileList.findIndex((ele) => ele.url == file.url);
+      this.fileList.splice(index, 1);
+      this.$emit("remove", arr);
+    },
+    clearFiles() {
+      this.$refs.upload.clearFiles();
+    },
+  },
+};
+</script>
+<style>
+/* .el-upload-list__item {
+  transition: none;
+} */
+</style>

src/views/system/version/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <el-input
+            v-model="query.version"
+            size="small"
+            clearable
+            placeholder="请输入版本号"
+            style="width: 100%"
+            class="filter-item"
+            @keyup.enter.native="getTableData"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="queryHandle">查询</el-button>
+          <el-button @click="resetHandle">重置</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="head-container">
+      <el-row>
+        <el-col>
+          <el-button @click="addVersionShow" type="primary" icon="el-icon-plus"
+            >新增版本</el-button
+          >
+        </el-col>
+      </el-row>
+    </div>
+    <div class="head-container" id="table_drag">
+      <el-table
+        ref="table"
+        :data="tableData.data"
+        v-loading="tableData.loading"
+        row-key="id"
+      >
+        <el-table-column prop="id" label="ID" width="50px"></el-table-column>
+        <el-table-column prop="source" label="平台"></el-table-column>
+        
+        <el-table-column prop="version" label="版本号"></el-table-column>
+        <el-table-column label="当前选中版本" prop="sel">
+          <template v-slot="scope">
+            <el-switch
+            v-if="scope.row.sel"
+            disabled
+             @change="changeSel($event, scope.row)"
+              v-model="scope.row.sel"
+              :active-value="1"
+              :inactive-value="0"
+            ></el-switch>
+            <el-button @click="changeSel(scope.row)" v-else type="primary" size="mini">设置为当前版本</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否强制更新" prop="createdAt">
+          <template v-slot="scope">
+            <el-switch
+              v-model="scope.row.isUp"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeIsup($event, scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新提示内容" prop="message"> </el-table-column>
+
+        <el-table-column label="下载地址" prop="url">
+          <template v-slot="scope">
+            <a :href="scope.row.url">{{ scope.row.url }}</a>
+          </template>
+        </el-table-column>
+
+   
+        <el-table-column label="创建时间" prop="createdAt">
+          <template v-slot="scope">
+            {{ dayjs(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" prop="updatedAt">
+          <template v-slot="scope">
+            <span v-if="scope.row.updatedAt">{{
+              dayjs(scope.row.updatedAt).format("YYYY-MM-DD HH:mm:ss")
+            }}</span>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="200">
+          <template v-slot="scope">
+            <el-button type="text" @click="editClick(scope.row)" icon="el-icon-edit">编辑</el-button>
+            <el-popconfirm
+              title="确定删除吗？"
+              @confirm="delTableHandle([scope.row.id])"
+            >
+              <el-button
+                type="text"
+                icon="el-icon-delete"
+                style="margin-left: 20px !important"
+                slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        @size-change="handleSizeChange"
+        :current-page="tableData.page + 1"
+        :page-size="tableData.size"
+        @current-change="paginationChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </div>
+
+    <add-version ref="refAddVersion" @success="refresh"></add-version>
+  </div>
+</template>
+  
+  <script>
+import dayjs from "dayjs";
+import { $version,$upSel } from "@/api/version";
+import addVersion from "./components/add-version";
+export default {
+  components: {  addVersion },
+  data() {
+    return {
+      dayjs,
+      query: {
+        version: "",
+      },
+      categorys: [],
+      tableData: {
+        data: [],
+        page: 0,
+        size: 30,
+        loading: false,
+        total: 0,
+      },
+    };
+  },
+  async mounted() {
+    await this.getTableData();
+  },
+  methods: {
+   
+    addVersionShow() {
+      this.$refs.refAddVersion.show();
+    },
+    editClick(item){
+        this.$refs.refAddVersion.show(item);
+    },
+    // 选择分类
+    queryHandle() {
+      localStorage.setItem("shopIndexQuery", JSON.stringify(this.query));
+      this.getTableData();
+    },
+    async changeIsup(e,item){
+        const res= await $version.update(item)
+        this.getTableData()
+    },
+    async changeSel(item){
+        const res= await $upSel(item)
+        this.getTableData()
+    },
+   
+    // 重置查询
+    resetHandle() {
+      this.query.name = "";
+      this.query.categoryId = "";
+      this.query.typeEnum = "";
+      this.query.productId = "";
+      this.tableData.page = 0;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    refresh(){
+        this.tableData.page=0
+        this.getTableData()
+    },
+    // 获取商品列表
+    async getTableData() {
+      try {
+        this.tableData.loading = true;
+        const res = await $version.get({
+          page: this.tableData.page,
+          pageSize: this.tableData.size,
+          version: this.query.version,
+        });
+        this.tableData.loading = false;
+        this.tableData.data = res.content;
+        this.tableData.total = res.totalElements;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    handleSizeChange(val) {
+      this.tableData.size = val;
+      this.getTableData();
+    },
+    // 删除商品
+    async delTableHandle(ids) {
+      try {
+        await $version.del(ids);
+        this.getTableData();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+  
+  <style scoped lang="scss">
+.handle {
+  font-size: 18px;
+  color: #999;
+
+  &:hover {
+    cursor: grab;
+  }
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 8px;
+    display: flex;
+    flex-direction: column;
+
+    .tag_wrap {
+      display: flex;
+    }
+  }
+}
+</style>
+