这是效果
image.png
image.png
页面代码
<template>
<div class="dialog-demo">
<el-button type="primary" size="small" @click="addItem">添加资产</el-button>
<el-table
v-loading="tableLoading"
:data="tableData"
style="width: 80%; margin-top: 20px;"
>
<el-table-column prop="assetName" label="资产名称"> </el-table-column>
<el-table-column prop="assetClassifyName" label="资产分类"> </el-table-column>
<el-table-column prop="assetCount" label="资产数量"> </el-table-column>
<el-table-column prop="enteringDate" label="录入时间"> </el-table-column>
<el-table-column prop="enteringName" label="录入人"></el-table-column>
<el-table-column prop="updateDate" label="最后修改时间"> </el-table-column>
<el-table-column prop="updateName" label="最后修改人"> </el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button size="small" @click.native.prevent="editRow(scope.row,0)">
编辑
</el-button>
<el-button type="danger" size="small" @click.native.prevent="editRow(scope.row,1)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<page-ination :totalCount="totalCount" :queryParam="queryParam" @getList="fetchData"></page-ination>
<!--弹框组件开始-----------------------start-->
<dialog-component
v-if="showDialog"
ref="dialogComponent"
:dialog-title="dialogTitle"
:item-info="tableItem"
@closeDialog="closeDialog"
></dialog-component>
<!--弹框组件开始-----------------------end-->
</div>
</template>
<script>
import DialogComponent from "./dialogComponent";
export default {
name: "DialogDemo",
components: { DialogComponent },
data() {
return {
totalCount:0,
queryParam: {
pageNo: 1,
pageSize: 10
},
tableLoading: false,
showDialog: false,
dialogTitle: "添加人员",
tableData: [],
tableItem: {
assetName:'',
assetClassifyId: "",
assetCount:''
},
};
},
mounted() {
this.fetchData();
},
methods: {
// 获取表格数据
fetchData() {
this.tableLoading = true;
const data={
page:this.queryParam.pageNo,
size:this.queryParam.pageSize
}
this.getRequest("/asset/getAssetList", data).then(res => {
this.totalCount = res.total;
this.tableData = res.data;
this.tableLoading=false
});
},
// 添加操作
addItem() {
this.tableItem = {
assetName:'',
assetClassifyId: '',
assetCount:''
};
this.dialogTitle = "添加资产";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["dialogComponent"].showDialog = true;
});
},
// 编辑操作
editRow(row,state) {
if(state==0){
row.isDel=0
this.tableItem = row;
this.dialogTitle = "编辑资产";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["dialogComponent"].showDialog = true;
});
}else{
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.isDel=1
this.tableItem = row;
this.postRequest("/asset/setAsset", this.tableItem).then(res => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.fetchData()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
// // 删除操作
// delRow(row){
// },
// 关闭操作
closeDialog(flag) {
if (flag) {
// 重新刷新表格内容
this.fetchData();
}
this.showDialog = false;
},
},
};
</script>
<style scoped lang="scss">
.dialog-demo {
padding: 20px;
.instructions {
font-size: 14px;
padding: 10px 0;
color: #304455;
}
.desc-list {
padding: 10px 0 30px 40px;
line-height: 30px;
font-size: 14px;
color: #606266;
list-style-type: disc;
}
}
</style>
弹框组件代码
<template>
<transition name="dialog-fade">
<el-dialog
v-if="showDialog"
:title="dialogTitle"
class="dialog-component"
:visible.sync="showDialog"
width="500px"
@close="closeDialog(0)"
>
<el-form ref="formInfo" :rules="rules" :model="formInfo" class="demo-form-inline" label-width="100px">
<el-form-item label="资产名称：" prop="assetName" required>
<el-input v-model="formInfo.assetName"></el-input>
</el-form-item>
<el-form-item label="资产分类：" prop="assetClassifyId" required>
<el-select v-model="formInfo.assetClassifyId" placeholder="请选择分类">
<el-option
v-for="item in options"
:key="item.id"
:label="item.classifyType"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="资产数量：" prop="assetCount" required>
<el-input type="number" v-model.number="formInfo.assetCount" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
<el-button @click="closeDialog(0)">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</transition>
</template>
<script>
export default {
name: "DialogComponent",
props: {
dialogTitle: {
type: String,
default: "添加人员"
},
itemInfo: {
type: Object,
default: function() {
return {};
}
}
},
data() {
return {
rules:{
assetName: [
{ required: true, message: '请输入资产名称', trigger: 'change' }
],
assetClassifyId: [
{ required: true, message: '请选择资产分类', trigger: 'change' }
],
assetCount: [
{ required: true, message: '请输入资产数量', trigger: 'change' }
],
},
options:[],
showDialog: false,
formInfo: JSON.parse(JSON.stringify(this.itemInfo))
};
},
mounted() {
this.getOpt();
},
methods: {
// 获取下拉框
getOpt() {
this.getRequest("/asset/getTypeList", {}).then(res => {
this.options=res.obj
});
},
// 保存操作
submitForm(formName) {
const that = this;
// const params = Object.assign(that.formInfo, {});
that.$refs[formName].validate(valid => {
if (valid) {
that.postRequest("/asset/setAsset", that.formInfo).then(res => {
that.$message({
message: "操作成功！",
type: "success"
});
that.closeDialog(1);
});
// 走保存请求
} else {
return false;
}
});
},
// 关闭弹框
closeDialog(flag) {
this.$refs["formInfo"].resetFields();
this.showDialog = false;
this.$emit("closeDialog", flag);
}
}
};
</script>
<style scoped lang="scss">
.dialog-fade-enter-active {
-webkit-animation: dialog-fade-in 0.3s;
animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
-webkit-animation: dialog-fade-out 0.3s;
animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
</style>
