系统运维：版本升级页面提交

src/api/system/version.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+import {exportFile} from '@/utils/request'
+
+// 升级包版本列表
+export function listVersion(query) {
+  return request({
+    url: '/system/version/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询升级包详情
+export function getVersionDetail(versionId) {
+  return request({
+    url: '/system/version/detail/' + versionId,
+    method: 'get'
+  })
+}
+
+// 查询平台下拉
+export function appTypeSelect() {
+  return request({
+    url: '/system/version/treeselect',
+    method: 'get'
+  })
+}
+
+// 新增版本升级
+export function addVersion(data) {
+  return request({
+    url: '/system/version/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改版本升级包
+export function updateVersion(data) {
+  return request({
+    url: '/system/version/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 版本包下载
+export function downloadFile(id,fileName) {
+	return exportFile(
+		'/system/version/download/'+id,
+	   null,
+	   'get',
+	  fileName,null,null
+	)
+  }

src/views/system/version/index.vue

@@ -0,0 +1,370 @@
+<template>
+	<div class="app-container">
+	  <div class="main-right-box">
+		<!--    搜索条件    -->
+		<div class="main-search-box">
+		  <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
+			<el-form-item label="版本" prop="version">
+			  <el-input v-model="queryParams.version" :maxlength="50" clearable placeholder="请输入版本"
+						style="width: 240px"
+						@keyup.enter.native="handleQuery"/>
+			</el-form-item>
+  
+			<el-form-item label="平台" prop="type">
+			  <el-select v-model="queryParams.type" clearable placeholder="请选择平台" style="width: 240px">
+				<el-option v-for="dict in dict.type.sys_version_type" :key="dict.value" :label="dict.label"
+						   :value="dict.value"/>
+			  </el-select>
+			</el-form-item>
+  
+		  </el-form>
+  
+		  <el-row :gutter="10">
+			<el-col :span="1.5">
+			  <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"
+			  >搜索
+			  </el-button>
+			</el-col>
+			<el-col :span="1.5">
+			  <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery"
+			  >重置
+			  </el-button>
+			</el-col>
+  
+			<el-col :span="1.5">
+			  <el-button v-hasPermi="['system:version:add']" icon="el-icon-plus" size="mini" type="primary"
+						 @click="handleAdd">新增
+			  </el-button>
+			</el-col>
+  
+			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+		  </el-row>
+		</div>
+  
+		<el-table
+		  v-loading="loading"
+		  :data="versionList"
+		  border
+		  height="646" size="small" @selection-change="handleSelectionChange">
+		  <!-- <el-table-column type="selection" width="50" align="center" /> -->
+		  <el-table-column align="center" label="序号" width="100">
+			<template v-slot:default="scope">
+			  <span v-text="getPageIndex(scope.$index)"> </span>
+			</template>
+		  </el-table-column>
+		  <el-table-column :show-overflow-tooltip="true" label="版本" prop="version"/>
+		  <el-table-column align="center" label="平台" prop="type">
+			<template slot-scope="scope">
+			  <dict-tag :options="dict.type.sys_version_type" :value="scope.row.type"/>
+			</template>
+		  </el-table-column>
+		  <el-table-column  align="center" label="当前使用" prop="isUse">
+			<template slot-scope="scope">
+				<div>
+					<span class="el-tag el-tag--medium" v-if="scope.row.isUse">是</span>
+					<span class="el-tag el-tag--danger" v-else>否</span>
+				</div>
+			</template>
+		  </el-table-column>
+		  <el-table-column  align="center" label="强制更新" prop="isForce">
+			<template slot-scope="scope">
+				<div>
+					<span class="el-tag el-tag--medium" v-if="scope.row.isForce">是</span>
+					<span class="el-tag el-tag--danger" v-else>否</span>
+				</div>
+			</template>
+		  </el-table-column>
+		  <el-table-column  align="center" label="下载地址" prop="path">
+			<template v-if="scope.row.type !== 3" slot-scope="scope">
+				<el-button size="mini" type="text"
+						 @click="downloadVersionFile(scope.row)">点击下载
+			    </el-button>
+			</template>
+		  </el-table-column>
+		  <el-table-column align="center" label="说明" prop="note" width="200">
+		  </el-table-column>
+		  <el-table-column align="center" label="创建时间" prop="createTime" width="200">
+		  </el-table-column>
+		  <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
+			<template v-if="scope.row.id !== 1" slot-scope="scope">
+			  <el-button v-hasPermi="['system:version:edit']" icon="el-icon-edit-outline" size="mini" type="text"
+						 @click="handleUpdate(scope.row)">编辑
+			  </el-button>
+			</template>
+		  </el-table-column>
+		</el-table>
+  
+		<pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
+					@pagination="getList"/>
+  
+	  </div>
+  
+  
+	  <!-- 添加或修改版本号对话框 -->
+	  <DialogCom :title="title" :visible.sync="open" append-to-body width="750px">
+		<el-form ref="form" :model="form" :rules="rules" label-width="100px">
+
+			<el-form-item label="版本" prop="version">
+			<el-input v-model="form.version" :maxlength="50" placeholder="请输入角色名称"/>
+			</el-form-item>
+
+			<el-form-item label="类型" prop="type">
+			<el-select v-model="form.type"
+						placeholder="请选择类型"
+						@change="selectedType()"
+						style="width: 100%">
+				<el-option
+					v-for="dict in dict.type.sys_version_type"
+					:key="dict.value"
+					:label="dict.label"
+					:value="dict.value"
+				></el-option>
+			</el-select>
+			</el-form-item>
+
+			<el-form-item label="使用" prop="isUse">
+				<el-checkbox v-model="form.isUse"></el-checkbox>
+			</el-form-item>
+
+			<el-form-item label="强制更新" prop="isForce">
+				<el-checkbox v-model="form.isForce"></el-checkbox>
+			</el-form-item>
+	
+			<el-form-item v-if="form.type!=='3'" label="上传文件" ref="files" prop="fileList">
+              <K-file-upload
+                ref="upload"
+                :defaultValue="formFileListDefualtValue"
+                v-model="form.fileList"
+                :limit="1"
+                :fileType="['apk']"
+				:fileSize="50"
+                @input="fileListChanged"
+              />
+            </el-form-item>
+
+			<el-form-item label="说明" prop="note">
+				<k-textarea
+					v-model="form.note"
+					placeholder="请输入说明"
+					:length="200"
+				/>
+			</el-form-item>
+		</el-form>
+		<div slot="footer" class="dialog-footer">
+		  <el-button type="primary" @click="submitForm">确 定</el-button>
+		  <el-button @click="cancel">取 消</el-button>
+		</div>
+	  </DialogCom>
+	</div>
+  </template>
+  
+  <script>
+  import {
+	listVersion,
+	getVersionDetail,
+	addVersion,
+	updateVersion,
+	downloadFile
+  } from "@/api/system/version";
+  import KFileUpload from "@/components/K-FileUpload/index.vue";
+  import KTextarea from "@/components/common/textarea.vue";
+
+  export default {
+	name: "Version",
+	components: {KFileUpload,KTextarea},
+	dicts: ['sys_version_type','sys_true_false'],
+	data() {
+	  return {
+		// 遮罩层
+		loading: true,
+		formFileListDefualtValue: [],
+		// 选中数组
+		ids: [],
+		// 非单个停用
+		single: true,
+		// 非多个停用
+		multiple: true,
+		// 显示搜索条件
+		showSearch: true,
+		// 总条数
+		total: 0,
+		// 表数据
+		versionList: [],
+		// 弹出层标题
+		title: "",
+		// 是否显示弹出层
+		open: false,
+		// 日期范围
+		dateRange: [],
+		// 查询参数
+		queryParams: {
+		  pageNum: 1,
+		  pageSize: 10,
+		  version: null,
+		  type: null
+		},
+		// 表单参数
+		form: {},
+		defaultProps: {
+		  children: "children",
+		  label: "name"
+		},
+		// 表单校验
+		rules: {
+		  version: [
+			{required: true, message: "版本号不能为空", trigger: "blur"},
+			{validator: validatorVersion, trigger: "blur"}
+		  ],
+		  type: [
+			{required: true, message: "请选择机构类型", trigger: "blur"}
+		  ],
+		  isUse: [
+			{required: true, message: "请输入使用", trigger: "blur"}
+		  ],
+		  isForce: [
+			{required: true, message: "请输入强制更新", trigger: "blur"}
+		  ],
+		  note: [
+			{required: true, message: "请输入说明", trigger: "blur"}
+		  ]
+		},
+	  };
+	},
+	created() {
+	  this.getList();
+	},
+	methods: {
+	  fileListChanged(list) {
+        this.$refs.files.clearValidate();
+      },
+	  selectedType() {
+        this.$refs["form"].clearValidate(["type"]);
+      },
+	  handleSelectionChange(selection) {
+        this.$emit('handleSelectionChange', selection)
+      },
+	  async downloadVersionFile(row) {
+		if(row.type === 3){
+			return;
+		}
+		
+		await downloadFile(row.id,row.packageName);
+
+      },
+	  getPageIndex($index) {
+		//表格序号
+		return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+  
+	  },
+	  /** 查询角色列表 */
+	  getList() {
+		this.loading = true;
+		listVersion(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+			this.versionList= response.rows;
+			this.total = response.total;
+			this.loading = false;
+		  }
+		);
+	  },
+	  
+	  // 取消按钮
+	  cancel() {
+		this.open = false;
+		this.reset();
+	  },
+	  // 表单重置
+	  reset() {
+		this.formFileListDefualtValue = [],
+		this.form = {
+			version: null,
+			type: null,
+			note: null,
+			isUse: false,
+			isForce: false
+		};
+		this.resetForm("form");
+	  },
+	  /** 搜索按钮操作 */
+	  handleQuery() {
+		this.queryParams.pageNum = 1;
+		this.getList();
+	  },
+	  /** 重置按钮操作 */
+	  resetQuery() {
+		this.dateRange = [];
+		this.resetForm("queryForm");
+		this.handleQuery();
+	  },
+	  /** 新增按钮操作 */
+	  handleAdd() {
+		this.reset();
+		this.open = true;
+		this.title = "新增版本号";
+	  },
+	  /** 修改按钮操作 */
+	  handleUpdate(row) {
+		this.reset();
+		const id = row.id;
+		getVersionDetail(id).then(response => {
+		  	this.form = response.data;
+		  	let file = {url:this.form.path,name:this.form.packageName};
+        	let fileList = [];
+        	fileList.push(JSON.stringify(file));
+        	this.form.fileList = fileList;
+        	this.formFileListDefualtValue = fileList;
+			this.form.type = this.form.type + '';
+		  	this.open = true;
+		  	this.title = "编辑版本号";
+		});
+	  },
+	  /** 提交按钮 */
+	  submitForm: function () {
+		this.$refs["form"].validate(valid => {
+		  if (valid) {
+			if(this.form.type !== `3` &&  this.form.fileList.length === 0){
+            	this.$modal.msgError("请上传文件！");
+            	throw new Error("请上传文件！");
+            }
+			if (this.form.type !== `3`) {
+				let file = JSON.parse(this.form.fileList[0]);
+            	this.form.path = file.url;
+            	this.form.packageName = file.name;
+			}
+			if (this.form.id != undefined) {
+			  	updateVersion(this.form).then(response => {
+					this.$modal.msgSuccess("处理成功");
+					this.open = false;
+					this.getList();
+			  	});
+			} else {
+			  	addVersion(this.form).then(response => {
+					this.$modal.msgSuccess("处理成功");
+					this.open = false;
+					this.getList();
+			  	});
+			}
+		  }
+		});
+	  }
+	}
+  };
+
+  export function validatorVersion(rule, value, callback) {
+	const reg = /^(?!0)\d+\.(?!0)\d+\.(?!0)\d+$/ ;
+		if(value == '' || value == undefined || value ==null){
+			callback();
+		}else{
+			if(!reg.test(value)){
+				callback(new Error("请输入正确的版本号! 例如: 1.12.1"));
+			}else{
+				callback();
+			}
+		}
+  }
+  </script>
+  <style lang="scss">
+ .el-checkbox {
+	display: -webkit-box !important;
+  }
+  </style>
+