Vue 编辑和新增 弹窗页面复用
Vue 编辑和新增 弹窗页面复用
- 样式创建
-
-
- 列表图片
- 弹框图片
-
- 逻辑编写
- 抽取函数进行优化，并增加分页逻辑
-
- 抽取一个js函数，在页面的js中进行调用
- js代码中的编写
样式创建
在div中创建一个表格，该表格具有新增和编辑的功能
<div>
<el-button type="primary" icon="el-icon-circle-plus" @click="createForm">新增</el-button>
<el-table
:data="tableData1"
style="width: 100%"
>
<el-table-column label="编号" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column label="客户端">
<template slot-scope="scope">{{getClientType(scope.row.clientType)}}</template>
</el-table-column>
<el-table-column label="版本号">
<template slot-scope="scope">{{ scope.row.version}}</template>
</el-table-column>
<el-table-column label="版本说明">
<template slot-scope="scope">{{scope.row.explain}}</template>
</el-table-column>
<el-table-column label="启用状态">
<template slot-scope="scope">{{ getState(scope.row.state)}}</template>
</el-table-column>
<el-table-column label="覆盖版本">
<template slot-scope="scope">{{scope.row.coverVersion}}</template>
</el-table-column>
<el-table-column prop="opt" label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="open(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="buttonStatus?'编辑':'新增'" :visible.sync="dialogFormVisibleEdit" with="30%" center>
<el-form :model="formData" :rules="rules">
<el-form-item label="客户端类型" :label-width="formLabelWidth">
<el-select v-model="formData.clientType" placeholder="Android" prop="clientType">
<el-option label="Android" :value="2"></el-option>
<el-option label="Apad" :value="4"></el-option>
<el-option label="iphone" :value="1"></el-option>
<el-option label="IPad" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
<el-input v-model.trim="formData.version" placeholder="请输入版本号"></el-input>
</el-form-item>
<el-form-item label="更新路径" :label-width="formLabelWidth" prop="url" placeholder="更新路径将在上传完成后显示">
<el-input v-model.trim="formData.url" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="版本说明" :label-width="formLabelWidth" >
<el-input v-model.trim="formData.explain" placeholder="请输入版本说明"></el-input>
</el-form-item>
<el-form-item label="启用状态" :label-width="formLabelWidth" prop="state">
<el-select v-model="formData.state" placeholder="不启用">
<el-option label="启用" :value="1"></el-option>
<el-option label="不启用" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否强制升级" :label-width="formLabelWidth" prop="isForce">
<el-select v-model="formData.isForce" placeholder="非强制">
<el-option label="强制" value="1"></el-option>
<el-option label="非强制" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否弹窗" :label-width="formLabelWidth" prop="isPop">
<el-select v-model="formData.isPop" placeholder="弹窗">
<el-option label="弹窗" value="1"></el-option>
<el-option label="不弹窗" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="覆盖机构" :label-width="formLabelWidth" prop="coverCity">
<el-input v-model.trim="formData.coverCity" placeholder="请输入覆盖机构"></el-input>
</el-form-item>
<el-form-item label="覆盖版本号" :label-width="formLabelWidth" prop="coverVersion">
<el-input v-model.trim="formData.coverVersion" placeholder="用半角,隔开。全部：1;之前版本<6.7.0"></el-input>
</el-form-item>
<el-form-item label="上传附件" :label-width="formLabelWidth" prop="fileList">
<el-upload
class="upload-demo"
ref="upload"
:http-request="fileUpload"
action=""
:auto-upload="true"
:limit="1"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传xxx.apk文件，且大小不超过500M</div>
</el-upload>
</el-form-item>
<el-form-item label="升级包大小(kb)" :label-width="formLabelWidth">
<el-input v-model="formData.size" autocomplete="off" placeholder="文件大小将在上传完成后显示"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
<el-button type="primary" @click="changeUpgradeInfo">确 定</el-button>
</div>
</el-dialog>
</div>
列表图片
弹框图片
逻辑编写
<script>
import http from "../../../utils/http.js";
import axios from 'axios'
export default {
data() {
return {
row:"",
fileMd5:"",
fileList:[],
dialogVisible: false,
minimumApiLevel:"",
tableData1:[],
formData: {
clientType: '',
version: '',
url: '', /*接口返回数据*/
explain:'',
state: '',
isForce:'',
isPop: '',
coverCity:'',
coverVersion:'',
fileList:[],
size:'', /*接口返回数据*/
// headers: { Authorization: getToken() }, // 请求头token信息
fileNames: "", // 自定义上传时参数
file: "", // 用来判断文件是否上传
},
buttonStatus:false,
Button: false,
formLabelWidth: '120px',
dialogFormVisibleEdit:false,
dialogFormVisible:false
};
},
beforeMount() {
// 在未渲染之前 请求数据
this.getTableList()
},
methods: {
// 获取后端数据，展示在前端页面上的方法
getTableList(){
let data1 = {};
axios.post(`http://127.0.0.1:8000/xxxxx`,data1)
.then(res=>{
// 获取后端的数据
// console.log(res.data);
this.tableData1 = res.data;
});
console.log(this.tableData1)
},
// 删除该条数据的方法
open(row) {
console.log('row',row);
let data1 = {"id":row.id};
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(row.id);
axios.post(`http://127.0.0.1:8000/xxxxx`,data1)
.then(res=>{
console.log("~~~~~~~~~", row.id);
// 删除假数据
// this.tableData.splice(row.id-1,1);
// 实际是删除之后，刷新后端数据，重新展示页面
this.getTableList();
this.$message({
type: 'success',
message: '删除成功!'
})
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 编辑页面
Update(index, row){
// console.log(this.dialogFormVisibleEdit)
this.dialogFormVisibleEdit = true; //要让弹框打开
let _row = row;
this.formData.clientType = row.clientType;
this.formData.version = row.version;
this.formData.explain = row.explain;
this.formData.state = row.state;
this.formData.isForce = row.isForce;
this.formData.isPop = row.isPop;
this.formData.coverCity = row.coverCity;
this.formData.coverVersion = row.coverVersion;
// 编辑这里要清空
this.formData.url = " ";
this.formData.fileList = [];
this.formData.size = "";
},
// 新增页面
handleCreate() {
// console.log(index, row);
this.dialogFormVisibleEdit = true; // 打开弹框，其余置空
this.row = '';
this.formData.clientType = '';
this.formData.version = '';
this.formData.url = '';
this.formData.explain = '';
this.formData.state = '';
this.formData.isForce = '';
this.formData.isPop = '';
this.formData.coverCity = '';
this.formData.coverVersion = '';
// this.value = row.value;
this.formData.size = '';
},
//创建配置方法，也就是点击弹框的确认按钮调用的方法
changeUpgradeInfo() {
let data1 = {
"id": this.row.id,
"clientType": this.formData.clientType,
"version": this.formData.version,
"explain": this.formData.explain,
"state": this.formData.state,
"isForce":this.formData.isForce,
"isPop": this.formData.isPop,
"coverCity": this.formData.coverCity,
"coverVersion": this.formData.coverVersion,
"url": this.formData.url,
"size": this.formData.size,
"fileMd5": this.fileMd5,
"minimumApiLevel": this.minimumApiLevel
};
if(this.buttonStatus){
console.log(this.formData);
axios.post(`http://127.0.0.1:8000/xxxx`,data1)
.then(res=>{
this.dialogFormVisibleEdit = false;
console.log('res=>',res);
this.getTableList();
});
}else {
axios.post(`http://127.0.0.1:8000/xxxx`,data1)
.then(res=>{
// this.tableData.push(data1)
this.dialogFormVisibleEdit = false;
// 获取后端的数据
// this.tabl.dataeData = res
this.getTableList();
});
console.log(this.formData);
}
},
fileUpload(file) {
console.log(file.file);
this.updateFile( file).then(res => {
console.log(res);
this.formData.size = res.data.fileSize;
this.formData.url = res.data.filePath;
this.fileMd5 = res.data.fileMd5;
})
},
// 上传文件调用的方法
updateFile(file) {
console.log(file);
let param = new FormData();
// param.append('file', file) // 手动上传
param.append('file', file.file) ;// 自动上传
param.append('version', this.formData.version) ;// 自动上传
console.log(param)
return http({
url: `http://127.0.0.1:8000/api/xxx`,
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
data: param
});
},
// 获取客户端对应的枚举值
getClientType(type) {
if(type === 1) {
return 'Iphone'
}else if(type === 2) {
return 'Android'
}else if(type === 3) {
return 'Ipad'
}else if(type === 4) {
return 'Apad'
}else {
return ''
}
},
getState(type){
if(type===1){return '启用'}
else if(type===0){return '不启用'}
else{
return ''
}
},
createForm(){
this.buttonStatus = false;
this.handleCreate();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
// 点击编辑按钮
handleEdit(index, row) {
console.log(index, row);
this.buttonStatus = true;
this.dialogFormVisibleEdit = true;
this.row = row;
this.formData.clientType = row.clientType;
this.formData.version = row.version;
this.formData.url = "";
this.formData.explain = row.explain;
this.formData.state = row.state;
this.formData.isForce = row.isForce;
this.formData.isPop = row.isPop;
this.formData.coverCity = row.coverCity;
this.formData.coverVersion = row.coverVersion;
// this.value = row.value;
this.formData.fileList = [];
this.formData.size = "";
},
}
}
</script>
抽取函数进行优化，并增加分页逻辑
抽取一个js函数，在页面的js中进行调用
import http from '../utils/http';
import md5 from 'js-md5';
// 综合到一个接口，页面的增删改查
// 页面列表展示
export function QueryUpgrade(data) {
return http({
url: '/xxx/app/upgrade',
method: 'post',
headers: {
token: 'StudyApp_Upgrade',
'Content-Type': 'application/json'
},
baseURL: 'http://127.0.0.1:8000',
data: data
})}
//上传文件
export function upgradeFile(params) {
return http({
url: '/xxx/app/upload',
method: 'post',
headers: {'Content-Type': 'multipart/form-data', token: 'StudyApp_Upgrade'},
baseURL: 'http://127.0.0.1:8000',
data: params
});
}
js代码中的编写
<script>
import {
upgradeFile, //上传文件
QueryUpgrade,
}from '@/api/upgrade.js'
export default {
data() {
return {
// 当前页
currentPage: 1,
// 每页多少条
pageSize: 10,
loading:false,
queryText: "查询",
Button: false,
formLabelWidth: '120px',
dialogFormVisibleEdit:false,
dialogFormVisible:false,
queryLoading: false,
total1: 0,
environmentList: [{
value: 0,
label: '测试环境'
}, {
value: 1,
label: '线上环境'
}],
row:"",
fileMd5:"",
fileList:[],
dialogVisible: false,
minimumApiLevel:"",
tableData1:[],
formData: {
clientType: '',
version: '',
url: '', /*接口返回数据*/
explain:'',
state: '',
isForce:'',
isPop: '',
coverCity:'',
coverVersion:'',
fileList:[],
size:'', /*接口返回数据*/
fileNames: "", // 自定义上传时参数
file: "", // 用来判断文件是否上传，
OperationType: 0
},
buttonStatus:false,
// 只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
rules: {
clientType: [ { required: true, message: '请选择客户端类型', trigger: 'change' }],
version: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
explain: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
isForce: [{ required: true, message: '请选择是否强制升级', trigger: 'change' }],
isPop: [{ required: true, message: '请选择是否强制弹窗', trigger: 'change' }],
coverCity: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
coverVersion: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
fileList: [],
},
};
},
beforeMount() {
// 在未渲染之前 请求数据
this.getTableList()
},
methods: {
// ～～～～～分页逻辑～～～～～～～～～
// 每页多少条
handleSizeChange(val) {
this.pageSize = val;
this.queryData()
},
// 当前页
handleCurrentChange(val) {
this.currentPage = val;
this.getTableList();
console.log(`每页 ${val} 条`);
},
// 很多获取请求参数并且可以传入接口的字段可以复用，所以在这里进行请求参数的封装，后续缺少就可以进行调用时再增加
getParam(params){
const returnData = {
// id: this.row.id || '',
username: localStorage.getItem('ms_username') || '', // #默认当前用户名
environment: this.formData.environment || 0, // #1是仿真,2是线上
version: this.formData.version,
state: this.formData.state,
isForce:this.formData.isForce,
coverVersion: this.formData.coverVersion,
downloadUrl: this.formData.url,
clientType: this.formData.clientType,
isPop: this.formData.isPop,
explain: this.formData.explain,
size: this.formData.size
}
// 这样写函数调用时，参数可进行增加并会进行对应的返回
return {...returnData, ...params}
},
// 获取页面数据
async getTableList() {
try {
const params = this.getParam({OperationType: 0, pageNum: this.currentPage,});
const res = await QueryUpgrade(params);
this.tableData1 = res.data.data;
this.total1 = this.tableData1.length;
return res
}catch (error) {
this.$message.error('获取数据库数据失败' + error.response.data.data)
}
},
async open(row) {
console.log('row',row);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(row.id);
const params = this.getParam({id: row.id, OperationType: 3})
const res = QueryUpgrade(params);
this.$message({
type: 'success',
message: '删除成功!'
});
this.getTableList();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 新增配置，通过buttonStatus字段区分是新增还是创建
createForm(){
this.buttonStatus = false;
this.handleCreate();
},
fileUpload(file) {
try{
this.queryLoading = true
this.queryText = "上传中..."
this.updateFile(file).then(res => {
let that = this;
this.formData.size = res.data.data.fileSize;
this.formData.url = res.data.data.filePath;
this.fileMd5 = res.data.data.fileMd5;
that.queryLoading = false
}
).catch(()=>{
let that = this;
that.queryLoading = false
that.queryText = "上传失败..."
that.$message.error('文件上传失败: ' + error.response.data.data.error)
})
}catch(error){
let that = this;
that.queryLoading = false
that.queryText = "上传失败..."
that.$message.error('文件上传失败: ' + error.response.data.data.error)
}
},
// 区分编辑和新增，编辑时打开对应的编辑弹窗
handleEdit(index, row) {
console.log(index, row);
this.buttonStatus = true;
this.dialogFormVisibleEdit = true;
this.row = row;
this.formData.clientType = row.clientType;
this.formData.version = row.version;
this.formData.url = row.url;
this.formData.explain = row.explain;
this.formData.state = row.state;
this.formData.isForce = row.isForce;
this.formData.isPop = row.isPop;
this.formData.coverCity = row.coverCity;
this.formData.coverVersion = row.coverVersion;
this.formData.fileList = [];
this.formData.size = row.size;
},
// 新增时，打开的页面上面是没有数据的才对
handleCreate() {
this.dialogFormVisibleEdit = true;
this.row = '';
this.formData.clientType = '';
this.formData.version = '';
this.formData.url = '';
this.formData.explain = '';
this.formData.state = '';
this.formData.isForce = '';
this.formData.isPop = '';
this.formData.coverCity = '';
this.formData.coverVersion = '';
this.formData.size = '';
},
//创建配置方法（新增/编辑时去调用接口），点击确认按钮时，调用的函数
async changeUpgradeInfo() {
console.log('woyap');
// 编辑
if(this.buttonStatus){
this.OperationType = 2
try{
const params = this.getParam({id: this.row.id, OperationType: 2})
const res = await QueryUpgrade(params);
this.dialogFormVisibleEdit = false;
if(res.data.status == 200){
this.$message({
type: 'success',
message: '修改成功!'
});
this.getTableList();
}
}catch(error){
console.log("********this***",this)
console.log("********error*****",error)
that.$message.error('修改失败: ' + error.response.data.msg)
}
}else {
const params = this.getParam({id: this.row.id, OperationType: 1})
const res = await QueryUpgrade(params);
if(res.data.status == 200){
this.$message.success("新增成功");
this.dialogFormVisibleEdit = false;
this.getTableList();
}
console.log(this.formData);
}
},
updateFile(file) {
let param = new FormData();
param.append('file', file.file) ;// 自动上传
param.append('version', this.formData.version) ;
param.append('username', localStorage.getItem('ms_username') || '')
const res = upgradeFile(param);
return res
},
// 获取客户端对应的枚举值
getClientType(type) {
if(type === 1) {
return 'Iphone'
}else if(type === 2) {
return 'Android'
}else if(type === 3) {
return 'Ipad'
}else if(type === 4) {
return 'Apad'
}else {
return ''
}
},
getState(type){
if(type===1){return '启用'}
else if(type===0){return '不启用'}
else{
return ''
}
},
}
}
</script>