<template>
<div style="margin:10px;">
<el-card>
<el-table ref="multipleTable" :data="tableData" border style="100%;">
<el-table-column type="index" label="序号" width="200px" align="center"> </el-table-column>
<el-table-column prop="ticket_name" label="票据" align="center"></el-table-column>
<el-table-column prop="price" label="价格" align="center"></el-table-column>
<el-table-column label="操作" align="center" >
<template>
<span class="nameInfo" @click="editTicketPrice">修改</span>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 修改弹框 -->
<el-dialog title="价格修改" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
<el-form :model="priceForm" :rules="rules" ref="priceForm" label-width="90px" class="demo-ruleForm">
<el-form-item label="价格" prop="price">
<el-input type="text" v-model="priceForm.price" style="250px;"></el-input>
</el-form-item>
<el-form-item>
<el-button style="float:right;" type="primary" @click="submitForm('priceForm')">确定</el-button>
<el-button style="float:right;margin-right:20px;" @click="cancelForm">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { queryTicketList,updatePrice } from '@/api/deposit.js' //引入后端接口方法
export default {
data() {
return {
tableData:[],
priceForm:{
price:''
},
dialogFormVisible:false,
rules: {
price: [
{ required: true, message: '请输入价格', trigger: 'blur' },
]
},
}
},
created () {
this.getTicketList();
},
methods: {
getTicketList() {
queryTicketList().then(res=>{
this.tableData = res.data
})
},
editTicketPrice(){
this.dialogFormVisible = true
},
// 修改
submitForm() {
let params={
price:this.priceForm.price
}
this.$refs['priceForm'].validate((valid) => {
if (valid) {
updatePrice(params).then(res=>{
this.$message.success('保存成功')
this.dialogFormVisible = false
this.getTicketList()
})
} else {
console.log('error submit!!');
return false;
}
});
},
cancelForm(){
this.dialogFormVisible = false
this.$refs['priceForm'].resetFields();
}
},
};
</script>
<style scoped>
</style>