12/2

src/api/version.js

@@ -7,7 +7,7 @@ export default {
      * @returns 
      */
     getVersionList(data){
-        return axios.post('/permission/api/version/query',data)
+        return axios.post('/permission/api/version/queryVersionList',data)
     },
 
     /**
@@ -19,6 +19,15 @@ export default {
         return axios.get('/permission/api/version/queryById',{params})
     },
 
+    /**
+     * 获取应用版本详情
+     * @param {*} data 
+     * @returns 
+     */
+    getVersionInfo(data){
+        return axios.post('/permission/api/version/queryVersionInfo',data)
+    },
+
     //添加应用版本
     addVersion(data){
         return axios.post('/permission/api/version/add', data)
@@ -29,4 +38,8 @@ export default {
         return axios.post('/permission/api/version/update', data)
     },
 
+    //删除应用版本
+    removeVersions(data){
+        return axios.post('/permission/api/version/delete', data)
+    }
 }

src/utils/model/upload/index.vue

@@ -0,0 +1,491 @@
+<template>
+  <div class="myUpload">
+    <div class="myUpload1" v-if="show">
+      <div class="myDemo">
+        <el-upload
+          ref="uploadRef"
+          class="upload-demo"
+          action="#"
+          :auto-upload="false"
+          :drag="drag"
+          :multiple="multiple"
+          :data="data"
+          :name="name"
+          :show-file-list="false" 
+          :accept="accept"
+          :list-type="listType"
+          :disabled="disabled"
+          :limit="limit"
+          :on-preview="onPreview"
+          :on-remove="onRemove"
+          :on-success="onSuccess"
+          :on-error="onError"
+          :on-progress="onProgress"
+          :on-change="onChange"
+          :on-exceed="onExceed"
+          style="width: 100%"
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            <div>将文件拖到此处，或<em>点击上传</em></div>
+            <div v-if="accept"><span>只能上传{{ accept }}文件</span></div>
+          </div>
+        </el-upload>
+      </div>
+      <div class="line" v-if="fileList.length > 0"></div>
+      <div class="fileList" v-if="fileList.length > 0">
+        <ul>
+          <li v-for="item in fileList" :key="item.guid" @dblclick="ondblclick(item)">
+            <myTooltip :content="item.name ? item.name : item.originalName">
+              <div class="noWrap">
+                <i class="el-icon-document" style="margin-right: 10px"></i
+                ><span class="name" @click="checkFiles(item)">{{
+                  item.name ? item.name : item.originalName
+                }}</span>
+              </div>
+            </myTooltip>
+            <div class="type" v-if="autoUpload">{{ item.guid ? "已上传" : "待上传" }}</div>
+            <div class="icon" @click="onRemove(item, fileList)">
+              <i class="el-icon-close"></i>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <el-dialog
+      custom-class="myUpload_dialog"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :before-close="handleClose"
+      :append-to-body="true" 
+      :close-on-click-modal="false">
+      <div slot="title">提示信息<span class="title" ><i class="el-icon-warning"></i></span></div>
+      <div>
+        <div v-if="discontent.length>0">
+          <div  class="content">
+            <div>
+              <i class="el-icon-error red"></i>
+            </div>
+            <div @click="showDiscontent = !showDiscontent">
+              <i class="el-icon-caret-right" v-if="!showDiscontent"></i>
+              <i class="el-icon-caret-bottom" v-else></i>
+            </div>
+            <div>
+              上传文件格式不正确
+            </div>
+          </div>
+          <div v-if="showDiscontent" class="list showList">
+            <div v-for="(item,index) in discontent" :key="item.name">{{ item.name }}<span v-if="index != discontent.length-1">，</span></div>
+          </div>
+        </div>
+        <div v-if="exist.length>0">
+          <div class="content">
+            <div>
+              <i class="el-icon-error red"></i>
+            </div>
+            <div @click="showExist = !showExist">
+              <i class="el-icon-caret-right" v-if="!showExist"></i>
+              <i class="el-icon-caret-bottom" v-else></i>
+            </div>
+            <div>
+              上传文件名称重复
+            </div>
+          </div>
+          <div v-if="showExist" class="showList">
+            <div class="list">{{ exist.map((item) => { return item.name;}).join('，') }}</div>
+            <div class="menu">
+              <div @click="choose(1)">
+                <i class="el-icon-check"></i>
+                <span>替换目标中的文件</span>
+              </div>
+              <div @click="choose(2)">
+                <i class="iconfont icon--skip"></i>
+                <span>跳过这些文件</span>
+              </div>
+              <!-- <div @click="choose(3)">
+                <i class="iconfont icon-wenbentihuan"></i>
+                <span>让我决定每个文件</span>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        
+      </div>
+      <div slot="footer">
+        <el-button type="primary" size="small" @click="handleClose" >我知道了</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import myTooltip from '../tooltip/index'
+export default {
+  components: {
+    myTooltip
+  },
+  props: {
+    //上传的接口或地址
+    action: {
+      type: String,
+      default: "",
+    },
+    multiple: {
+      type: Boolean,
+    },
+    data: {
+      type: Object,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    showFileList: {
+      type: Boolean,
+    },
+    drag: {
+      type: Boolean,
+      default: true,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    listType: {
+      type: String,
+      default: "text",
+    },
+    //是否立即上传
+    autoUpload: {
+      type: Boolean,
+      default: false,
+    },
+    //文件列表
+    fileList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    limit: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      discontent: [],
+      showDiscontent:false,
+      exist:[],
+      exist2:[],
+      showExist:false,
+      dialogVisible:false,
+      show : false
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.show = true
+  },
+  mounted() {
+  },
+  methods: {
+    // 双击已上传的文件
+    ondblclick(file) {
+      if(file.guid){
+        var fileName = file.name || file.referencesName || file.fileName
+        var type = fileName.split('.').pop()
+        this.$commonJS.previewFile({fileName:fileName},file.guid,type.toLowerCase())
+      }
+      this.$emit('on-dblclick',file)
+    },
+    onPreview(file) {
+      this.$emit("on-preview", file);
+    },
+    onRemove(file, fileList) {
+      this.$emit("on-remove", file, fileList);
+    },
+    onSuccess(response, file, fileList) {
+      this.$emit("on-success", response, file, fileList);
+    },
+    onError(err, file, fileList) {
+      this.$emit("on-error", err, file, fileList);
+    },
+    onProgress(event, file, fileList) {
+      this.$emit("on-progress", event, file, fileList);
+    },
+    onChange(file, fileList) {
+      if(this.limit){
+        if(this.fileList.length>=this.limit){
+          this.$message.warning(`只能上传${this.$limit}个文件`)
+          return false
+        }
+      }
+      this.$nextTick(() => {
+        if(this.discontent.length>0 || this.exist.length>0){
+          this.open()
+        }
+      });
+      //审核上传文件类型
+      if (this.accept) {
+        var arr = this.accept.split(/,|，/g);
+        var fileType = file.name.substring(file.name.lastIndexOf("."));
+        var index = arr.findIndex((item) => {
+          return item == fileType;
+        });
+        if (index == -1) {
+          this.discontent.push(file);
+          return false;
+        }
+      }
+      //验证是否有重复文件
+      if(this.fileList.length>0){
+        var index = this.fileList.findIndex(item =>{
+          return item.name == file.name || item.originalName == file.name
+        })
+        if(index != -1){
+          this.exist.push(file)
+          this.exist2.push(this.fileList[index])
+          return false
+        }
+      }
+      this.$emit("on-change", file);
+      this.$refs.uploadRef.clearFiles()
+      //是否立即上传
+      if (this.autoUpload) {
+        this.uploadFile(file)
+        return false
+      }
+      
+    
+    },
+    onExceed(file, fileList) {
+      this.$emit("on-exceed", file, fileList);
+    },
+    //查看文件
+    checkFiles(file) {
+      if(file.guid){
+
+      }else{
+
+      }
+    },
+    //上传附件
+    uploadFile(file){
+      let formData = new FormData()
+      formData.append('sourceId',this.$constants.sourceId)
+      formData.append('files',file.raw)
+      this.$api.uploadFile(formData).then(response=>{
+        if(response.code == 200){
+          file.guid = response.data[0]
+          file.raw.guid = response.data[0]
+          this.$emit("on-change", file)
+        }
+      })
+    },
+    //打开提示弹窗
+    open(){
+      this.dialogVisible = true
+    },
+    //关闭弹窗
+    handleClose(){
+      this.dialogVisible = false
+      this.discontent = []
+      this.exist = []
+      this.exist2=[]
+      this.showDiscontent=false
+      this.showExist = false
+    },
+    //操作
+    choose(type){
+      switch(type){
+        case 1:
+          this.exist2.forEach((item,index)=>{
+            this.onRemove(item,this.fileList)
+            this.$emit("on-change", this.exist[index]);
+            this.uploadFile(this.exist[index])
+          })
+          this.handleClose()
+          break;
+        case 2:
+          this.handleClose()
+          break;
+        case 3:
+          break;
+      }
+    },
+ 
+  },
+  destroyed(){
+    this.show = false
+  },
+};
+</script>
+<style lang="scss">
+.myUpload1 {
+  .el-upload {
+    width: 100%;
+    height: 100%;
+    .el-upload-dragger {
+      width: 100% !important;
+      height: 100%;
+      border: none;
+      border-radius: 0px;
+    }
+    .el-upload-dragger:hover {
+      border: none;
+    }
+  }
+  .el-upload-list {
+    display: none;
+  }
+}
+.myUpload_dialog{
+  border: 2px solid var(--bg);
+  box-shadow: none;
+  --fs:15px;
+  i{
+    cursor: pointer;
+  }
+  .el-dialog__close{
+    color: black;
+    font-weight: bold;
+  }
+  .el-dialog__headerbtn{
+    top: 14px;
+  }
+  .el-dialog__header{
+    border-bottom: 2px solid var(--bg) !important;
+    color: red;
+    padding: 10px;
+  }
+  .el-dialog__body{
+    padding: 20px 10px;
+  }
+  .el-dialog__footer{
+    border-top:none !important;
+  }
+  .title{
+    margin-left: 10px;
+  }
+  .content{
+    display: flex;
+    align-items: center;
+    padding: 5px 0px;
+    color: var(--bg);
+    font-size: var(--fs);
+    font-family: var(--fm);
+    font-weight: bold;
+  }
+  .red{
+    color: red;
+  }
+  .showList{
+    padding-left:var(--fs) ;
+  }
+  .list{
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-size: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    // overflow: hidden;
+    // white-space: nowrap;
+    // text-overflow:ellipsis;
+  }
+  .menu{
+    font-size: 14px;
+    i{
+      font-size: 14px;
+    }
+    div{
+      font-family: var(--fm);
+      padding: 5px 0;
+      cursor: pointer;
+      color: var(--bg);
+      i{
+        color: blue;
+      }
+        span{
+          margin-left:10px
+        }
+    }
+    div:hover{
+      background: #85afd9;
+    }
+  }
+  
+}
+</style>
+<style lang="scss" scoped>
+.myUpload {
+  width: calc(100% - 0px);
+  height: 185px;
+  padding: 5px;
+}
+.myUpload1 {
+  width: calc(100% - 20px);
+  height: 100%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  background: white;
+  border: 1px dashed var(--bg);
+  border-radius: 10px;
+  .myDemo {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+  .line {
+    width: 1px;
+    height: 100%;
+    background: var(--bg);
+  }
+  .fileList {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    flex: 2;
+    ul {
+      list-style-type: none;
+      padding: 0 10px;
+      li {
+        line-height: initial;
+        padding: 5px 10px;
+        border-radius: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .type {
+          min-width:75px;
+          display: block;
+          color: #57a5f7;
+        }
+        .icon {
+          display: none;
+        }
+      }
+      li:hover {
+        background: #f4f4f4;
+        .name {
+          color: #57a5f7;
+          cursor: pointer;
+        }
+        .type {
+          min-width:75px;
+          display: none;
+        }
+        .icon {
+          display: block;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/backStageManage/application/vision/addVersion.vue

@@ -1,58 +1,24 @@
 <template>
     <div>
-        <version-form></version-form>
+        <version-form model="add"></version-form>
     </div>
 </template>
 
 <script>
 import VersionForm from './components/versionForm.vue';
 export default {
-components: {
-    'version-form': VersionForm
-},
-props: {},
-data() {
-    return {
-        fileList: [],
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-            versionName: [
-                { required: true, message: "版本名称不能为空", trigger: "blur" }
-            ],
-            versionNum: [
-                { required: true, message: "版本号不能为空", trigger: "blur" }
-            ]
-        }
-    };
-},
-watch: {},
-computed: {},
-created() {},
-mounted() {},
-methods: {
-    /** 提交按钮 */
-    submitForm: function() {
-        this.$refs.form.validate((valid) => {
-            if (valid) {
-                this.$api.addVersion(this.form)
-                    .then(response => {
-                        if (response.code === 200) {
-                            this.$message.success('提交成功');
-                            this.resetForm();
-                        } else {
-                            this.$message.error('提交失败');
-                        }
-                    })
-                    .catch(error => {
-                        this.$message.error('提交失败');
-                        console.error(error);
-                    });
-            }
-        });
+    components: {
+        'version-form': VersionForm
     },
-},
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {},
 };
 </script>
 <style lang="scss" scoped>

src/views/backStageManage/application/vision/components/functionTable.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    components: {},
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss">
+</style>

src/views/backStageManage/application/vision/components/versionForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="form_center">
         <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px">
             <el-form-item label="版本名称" prop="versionName">
                 <el-input v-model="form.versionName" placeholder="请输入版本名称" maxlength="20" />
@@ -13,26 +13,12 @@
                 <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" />
             </el-form-item>
 
-            <el-form-item label="是否授权" prop="authType">
-                <el-tooltip :content="'Switch value: ' + value" placement="top">
-                    <el-switch
-                        v-model="form.authType"
-                        active-color="#13ce66"
-                        inactive-color="#ff4949"
-                        active-value="1"
-                        inactive-value="2">
-                    </el-switch>
-                </el-tooltip>
+            <el-form-item label="上传文件" class="margin-bottom_0">
+                <myUpload :file-list="[form.systemFileList]" @on-change="onchangeFile" @on-remove="onRemove" :multiple="false" :limit="1"
+                    style="height: 185px;" :autoUpload="true">
+                </myUpload>
             </el-form-item>
 
-            <el-form-item label="版本文件" prop="versionFile">
-                <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
-                    <i class="el-icon-upload"></i>
-                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                </el-upload>
-            </el-form-item>
-
-
         </el-form>
         <div class="button-container">
             <el-button type="primary" :loading="btnLoading" @click="submitForm">提 交</el-button>
@@ -42,53 +28,80 @@
 </template>
 
 <script>
+
+
 const currentForm = {
     id:null,
     versionName:null,
     versionNum:null,
     remark:null,
-    versionFile:null,
+    systemFileList:{}
 }
 export default {
-    components: {
-        switchValue() {
-            return this.form.authType === 1 ? '授权' : '未授权';
-        }
-    },
+    components: {},
     props: {
-        versionData: {
-            type:Object,
-            default:()=>{
-                return {}
-            }
-        },
+        versionId:"",
+        model:{
+            type:String,
+            default:"add"
+        }
     },
     data() {
         return {
             btnLoading: false,
-            fileList: [],
             // 表单参数
-            form: this.versionData,
+            form: {},
             // 表单校验
             rules: {
                 versionName: [
                     { required: true, message: "版本名称不能为空", trigger: "blur" }
+                ],
+                versionNum: [
+                    { required: true, message: "版本号不能为空", trigger: "blur" }
                 ]
             }
         };
     },
     watch: {
-        versionData(val){
-            this.form = val
+        versionId(){
+            this.init()
         }
     },
     computed: {},
     created() {},
-    mounted() {},
+    mounted() {
+       this.init()
+    },
     methods: {
+        //初始化当前页面
+        init(){
+            if(this.model == 'add'){
+                this.resetForm()
+            }else if(this.model == 'edit'){
+                //查询数据并检验
+                this.getById()
+            }
+        },
+        //查询数据并校验
+        getById(){
+            if(!this.versionId){
+                this.$message.error('编辑缺少参数')
+                return
+            }
+            var params = {
+                id: this.versionId,
+            };
+            this.$api.getVersionById(params).then(response=>{
+                if(response.code == 200){
+                    this.form = response.data.records
+                }
+            }).catch(error=>{
+                this.resetForm()
+            })
+        },
         //重置表单
         resetForm(){
-            this.form = Object.assign({},currentForm)
+            this.form = Object.assign({}, currentForm)
             this.$refs['form'].resetFields();
         },
         /** 提交按钮 */
@@ -98,7 +111,7 @@ export default {
                     this.btnLoading = true
                     var a = '添加'
                     var api = 'addVersion'
-                    if(this.form.id){
+                    if(this.model == "edit"){
                         a = '编辑'
                         api = 'updateVersion'
                     }
@@ -120,11 +133,12 @@ export default {
 };
 </script>
 <style lang="scss">
-.el-form {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+.form_center {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
+
 .button-container {
     display: flex;
     justify-content: center;

src/views/backStageManage/application/vision/editVersion.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <version-form :versionData="versionForm"></version-form>
+        <version-form :versionId="versionId" model="edit"></version-form>
     </div>
 </template>
 
@@ -12,17 +12,7 @@ export default {
     },
     props: {},
     data() {
-        return {
-            fileList: [],
-            // 表单参数
-            versionForm: {},
-            // 表单校验
-            rules: {
-                versionName: [
-                    { required: true, message: "版本名称不能为空", trigger: "blur" }
-                ]
-            },
-        };
+        return {};
     },
     watch: {},
     computed: {
@@ -31,23 +21,8 @@ export default {
         },
     },
     created() {},
-    mounted() {
-        this.getById()
-    },
-    methods: {
-        getById() {
-            var params = {
-                id: this.versionId,
-            };
-            this.$api.getVersionById(params).then(response=>{
-                if(response.code == 200){
-                    this.versionForm = response.data.records
-                }
-            }).catch(error=>{
-                this.versionForm = []
-            })
-        },
-    },
+    mounted() {},
+    methods: {},
 };
 </script>
 <style lang="scss" scoped>

src/views/backStageManage/application/vision/index.vue

@@ -98,8 +98,8 @@ export default {
       tableData: [],
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
+        current: 1,
+        size: 10,
         versionNum: '',
         versionName: ''
       },
@@ -155,9 +155,10 @@ export default {
     //切换也大小
     handleSizeChange(val){
         this.queryParams.current = 1
-        this.queryParams.size = 10
+        this.queryParams.size = val
         this.getList()
     },
+
     //排序
     sortChange({ column, prop, order }){},
     /** 新增按钮操作 */
@@ -182,13 +183,16 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryParams.current = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.handleQuery();
     },
+    handleDelete(row){
+      this.removeVersions([row.id])
+    },
   },
 };
 </script>