#list.vue中打开独立的dialog.vue(新增与编辑按钮打开的WarArtEditVue),在dialog.vue中添加数据,隐藏dialog.vue后实时刷新数据该怎么做?
#list.vue代码
<template>
<div id="mainSkList">
<el-form :inline="true" :model="warArtQuery" ref="warArtQuery" class="demo-form-inline"
style="line-height: 40px;font-size: 8px; text-align: right;" required>
<el-form-item label="名称:" prop="likeName">
<el-input v-model="warArtQuery.likeName" placeholder="名称:"></el-input>
</el-form-item>
<el-form-item label="类型:" prop="wtype">
<el-input v-model="warArtQuery.wtype" placeholder="类型"></el-input>
</el-form-item>
<el-form-item label="兵书:" prop="wart ">
<el-input v-model="warArtQuery.wart" placeholder="兵书"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onQuery">查询</el-button>
<el-button type="warning" @click="resetForm('warArtQuery')">重置</el-button>
</el-form-item>
</el-form>
<el-row style="display: flex;justify-content: flex-start;">
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="insertWarArt">新增</el-button>
<!--新增的对话框-->
<WarArtEditVue ref="WarArtEditVue"></WarArtEditVue>
<el-form id="fenYe" style="position: absolute;right: 0;">
<!-- 分页-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
</el-pagination>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%;font-size:10px" :row-class-name="tableRowClassName"
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="40" style="text-align: center;"></el-table-column>
<el-table-column type="index" width="54" :index="getIndex" center></el-table-column>
<!-- <el-table-column prop="wid" label="序号" width="50" align="center"></el-table-column> -->
<el-table-column prop="wname" label="名称" width="150" align="center"></el-table-column>
<el-table-column prop="wtype" label="类型" width="160" align="center"></el-table-column>
<el-table-column label="兵书" width="150" align="center">
<template slot-scope="scope">
<el-link :style="getArtNameStyle(scope.row.wtype)" @click="viewWarArt(scope.row.wart)">{{ scope.row.wart }}</el-link>
</template>
</el-table-column>
<el-table-column prop="wclassics" label="典籍" width="300" align="center"></el-table-column>
<el-table-column prop="weffect" label="效果" width="400" align="center"></el-table-column>
<el-table-column label="操作" align="center" >
<template slot-scope="scope">
<el-button type="primary" plain @click="warArtEdit(scope.row)" style="padding:10px;size: mini;">编辑</el-button>
<el-button type="danger" plain @click="deleteById(scope.row)" style="padding:10px;size: mini;">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
const reqWarArt = require("@/api/requests/reqWarArt")
import { MessageBox } from 'element-ui';
import WarArtEditVue from '@/components/dialogs/warart/WarArtEdit.vue'
export default {
components: {
WarArtEditVue
},
data() {
return {
warArtQuery: {},
tableData: [],
// 分页
currPage: 1,
pageSize: 10,
totalCount: 0,
// 批量
multipleSelection: [],
}
},
mounted() {
this.onQuery();
},
methods: {
getTalentNameStyle(tRate){
console.log(tRate);
return getTalentStyle(tRate);
},
getSkillNameStyle(level){
return getSkillStyle(level);
},
onQuery() {
reqWarArt.warArtPage(this.currPage,this.pageSize,this.warArtQuery).then((resp) => {
if (resp.code == 1) {
this.tableData = resp.data.rows;
this.totalCount = resp.data.total;
}else{
this.$message.warning("抱歉,没有获取到数据!")
}
})
},
resetForm(form) {
this.$refs[form].resetFields();
this.onQuery();
},
insertWarArt(){
this.$nextTick(() => {
this.$refs.WarArtEditVue.init(-1, "新增...", "insert",()=>this.onQuery);
});
},
deleteById(row){
var ids = [row.wid];
var names = [row.wname];
this.deleteWarArt(ids, names);
},
deleteByIds(){
// 从this.multipleSelection中获取选中
// 检查是否有勾选
if (this.multipleSelection.length == 0) {
this.$message.warning("请先勾选删除项!");
return;
}
var ids = [];
var names = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids[i] = this.multipleSelection[i].wid;
names[i] = this.multipleSelection[i].wname;
}
this.deleteWarArt(ids, names)
},
deleteWarArt(ids,names){
MessageBox.confirm("确定要删除数据[" + names + "]吗?", '删除提示', {
iconClass: 'el-icon-delete',
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose: true,
type: 'warning'
}).then(() => {
reqWarArt.deleteWarArt(ids).then(resp => {
if (resp.code == 1) {
this.$message.success("删除成功");
this.onQuery();
} else {
this.$message.error("删除失败");
}
})
}).catch(() => {
// 取消操作
});
},
warArtEdit(row){
this.$nextTick(() => {
this.$refs.WarArtEditVue.init(row.wid, "编辑...", "update");
});
},
handleSizeChange(val) {
this.pageSize = val;
this.onQuery();
},
handleCurrentChange(val) {
this.currPage = val;
this.onQuery();
},
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 == 0) {
return 'warning-row';
}
return '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val);
},
// 获取序号
getIndex(index) {
// 根据当前页数和每页显示的数量计算序号
return (this.currPage - 1) * this.pageSize + index + 1;
},
getArtNameStyle(){
}
},
}
</script>
<style></style>
#dialog.vue代码
<template>
<el-dialog :title="title" :visible.sync="show" width="36%">
<el-form ref="warArt" :model="warArt" label-width="80px" :rules="formRules" required>
<el-form-item label="姓名:" :span="6" prop="wname">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="warArt.wname" placeholder="姓名" clearable>
<el-button slot="query" icon="el-icon-search"></el-button>
</el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="类型:" :span="6" prop="wtype">
<el-row :gutter="10">
<el-col :span="8">
<el-select v-model="warArt.wtype" placeholder="类型:">
<el-option v-for="item in warArtTypeOptions" :key="item.id" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="上级:" :span="6" prop="wart">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="warArt.wart" placeholder="上级" value="warArt.wart" clearable> </el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="典籍:" :span="6" prop="wclassics">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="warArt.wclassics" placeholder="典籍" value="warArt.wclassics" clearable>
</el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="效果:" prop="weffect">
<el-col :span="23">
<el-input type="textarea" v-model="warArt.weffect" placeholder="说明" rows="4"
style="font-family: Arial;font-size: 12px;" show-word-limit></el-input>
</el-col>
</el-form-item>
<el-form-item label="点评:" prop="wnote">
<el-col :span="23">
<el-input type="textarea" v-model="warArt.wnote" placeholder="点评" maxlength="1024" rows="6"
style="font-family: Arial;font-size: 12px;" show-word-limit></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(0)" v-if="isInsert">添加</el-button>
<el-button type="primary" @click="submitForm(1)" v-if="isUpdate">更新</el-button>
<el-button @click="resetForm" v-if="isInsert">重置</el-button>
<el-button type="info" @click="doCancel">取 消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
const reqWarArt = require("@/api/requests/reqWarArt")
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['warArtTypeOptions'])
},
data() {
// 校验 value对应元素的值
var validatePass = (rule, value, callback) => {
if (value != null && value != "") {
reqWarArt.selectWarArtByName(value).then(resp => {
// resp.data是一个array
if (resp.code == 1 && resp.data != null && resp.data.length > 0) {
this.warArt.wname = '';
callback(new Error('当前名称已经存在'));
}
else {
callback();
}
})
} else {
callback();
}
};
return {
show: false,
title: '新增...',
type: 'add',
wId: 0,
isInsert: false,
isUpdate: false,
warArt: {},
formRules: {
// validator是单个表单域格式验证的验证器,
// 一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的,
// 都可以直接通过rules的type/Pattern等相关参数直接配置就好了。
wname: [
{ required: true, message: '名称不能为空', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
}
}
},
methods: {
// 初始化
init(wId, title, type) {//获取传过来的数据(不用调用此方法)
this.show = true;
this.title = title;
this.type = type;
this.warArt = {};
if (wId > 0) {
this.wId = wId;
this.queryWarArt();
}
if (this.type == "insert") {
this.title = "新增...";
this.isInsert = true;
this.isUpdate = false;
} else if (this.type == "update") {
this.title = "修改...";
this.isInsert = false;
this.isUpdate = true;
}
},
queryWarArt() {
reqWarArt.selectWarArtById(this.wId).then(resp => {
if (resp.code == 1) {
this.warArt = resp.data;
} else {
this.$message.warning("获取数据失败" + this.wId)
}
})
},
submitForm(flag) {
this.$refs.warArt.validate(valid => {
if (valid) {
if (flag == 0) {
reqWarArt.insertWarArt(this.warArt).then(resp => {
if (resp.code == 1) {
this.$message.success("恭喜你,添加成功")
this.doCancel();
} else {
this.$message.error("添加失败");
}
})
} else if (flag == 1) {
reqWarArt.updateWarArt(this.warArt).then(resp => {
if (resp.code == 1) {
this.$message.success("恭喜你,修改成功")
this.doCancel();
} else {
this.$message.error("修改失败");
}
})
}
} else {
this.$message.error("表单数据校验失败!")
}
});
},
resetForm() {
this.$refs.warArt.resetFields();
},
doCancel() {
this.$refs.warArt.resetFields();
this.show = false;
}
},
}
</script>
<style></style>