前后端分离之前端

2024-02-16 22:20:01

<el-dialog title="添加列表" :visible.sync="dialogVisible" width="80%">
<el-form :model="insertForm" :rules="rulesForm" ref="insertForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="客户姓名" prop="cname">
<el-input v-model="insertForm.cname"></el-input>
</el-form-item>
<el-form-item label="性别" prop="csex">
<el-radio v-model="insertForm.csex" label="男">男</el-radio>
<el-radio v-model="insertForm.csex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker type="date" placeholder="选择日期" v-model="insertForm.birthday" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="头像" prop="pic">
<el-upload class="avatar-uploader" action="http://localhost:8090/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="银行账号" prop="bname">
<el-checkbox-group v-model="checkedBanks" @change="handleCheckedBanksChange">
<el-checkbox v-for="bank in banks" :label="bank.bid">{{bank.bname}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('insertForm')">添加</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>

<el-dialog title="修改列表" :visible.sync="editdialogVisible" width="80%">
<el-form :model="updateForm" ref="updateForm" label-width="100px">
<el-form-item label="客户姓名" prop="cname">
<el-input v-model="updateForm.cname"></el-input>
</el-form-item>
<el-form-item label="性别" prop="csex">
<el-radio v-model="updateForm.csex" label="男">男</el-radio>
<el-radio v-model="updateForm.csex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker type="date" placeholder="选择日期" v-model="updateForm.birthday" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="银行账号" prop="bname">
<el-checkbox-group v-model="checkedBanks" @change="handleCheckedBanksChange">
<el-checkbox v-for="bank in banks" :label="bank.bid">{{bank.bname}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateData('updateForm')">更新</el-button>
<el-button @click="editdialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>

<el-dialog title="修改列表" :visible.sync="editSpanVisible" width="80%">
<el-form :model="editForm" ref="editForm" label-width="100px">
<el-form-item label="客户姓名" prop="cname">
<el-input v-model="editForm.cname"></el-input>
</el-form-item>
<el-form-item label="性别" prop="csex">
<el-radio v-model="editForm.csex" label="男">男</el-radio>
<el-radio v-model="editForm.csex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birthday" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="银行账号" prop="bname">
<el-checkbox-group v-model="checkedBanks" @change="handleCheckedBanksChange">
<el-checkbox v-for="bank in banks" :label="bank.bid">{{bank.bname}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button @click="editSpanVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>

}
},
created() {
this.initData();
this.initBank();
},
methods: {
//批量删除
deleteBatch() {
/* if (this.rows instanceof Array && this.rows.length > 0) { */
/* this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//post请求
this.axios.post("http://localhost:8090/custom/delete",null, {

})
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
}); */
this.$confirm('你确定要删除选中的数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//post请求
this.axios.post('http://localhost:8090/custom/delete', null, {
params: {
ids: this.rows.map(row => row.cid).join(",")
}
}).then((response) => {
this.$message({
type: 'success',
message: '删除成功!'
});
//扩展操作
this.initData();
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
/* } else {
this.$message({
type: 'success',
message: '请选择要删除的数据！'
});
} */
},
//单删
deleteCus(row) {
this.$confirm('你确定要删除选中的数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//post请求
this.axios.post('http://localhost:8090/custom/delete', null, {
params: {
ids: row.cid
}
}).then((response) => {
this.$message({
type: 'success',
message: '删除成功!'
});
//扩展操作
this.initData();
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//添加
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//赋值过程
this.insertForm.bids = this.checkedBanks.map(bid => bid).join(",");
this.axios.post("http://localhost:8090/custom/insert", this.insertForm).then((response) => {
if (response.data.result) {
this.$message({
type: 'success',
message: '客户添加成功！'
});
//对话框关闭
this.dialogVisible = false;
//初始化列表数据
this.initData();
} else {
this.$message.error("客户添加失败");
}
});
} else {
return false;
}
});
},
//改变事件，绑定数值发生变化，更新数值
handleCheckedBanksChange(val) {
this.checkedBanks = val;
},
initBank() {
this.axios.get('http://localhost:8090/bank/findAll').then((response) => {
// 查询出所有的银行列表
this.banks = response.data;
});
},
opendialogVisible() {
//初始化空数组
this.checkedBanks = [];
//打开对话框钱，先查询所有的银行
this.initBank();
//打开对话框
this.dialogVisible = true;
},
//查看
editspan(row) {
//初始化空数组
this.checkedBanks = [];
//判断本身是否具有银行账号信息
if (row.bids != null && row.bids != '') {
//拆分银行
let bids = row.bids.split(",");
//遍历银行
for (let i = 0; i < bids.length; i++) {
//取出银行id值
let id = bids[i];
//判断是否为数字
if (!isNaN(id)) {
//存入到回显的数组中
this.checkedBanks.push(parseInt(id));
}
}
}
//打开对话框前，先查询所有银行
this.initBank();
Object.assign(this.editForm, row);
this.editSpanVisible = true;
},
//回显
editVisible(row) {
//初始化空数组
this.checkedBanks = [];
//判断本事是否具有银行账号信息
if (row.bids != null && row.bids != '') {
console.log("sadj")
//拆分银行
let bids = row.bids.split(",");
//遍历银行
for (let i = 0; i < bids.length; i++) {
console.log("skadj")
//取出银行id值
let bid = bids[i];
//判断是否为数字
if (!isNaN(bid)) {
//存入到回显的数组中
this.checkedBanks.push(parseInt(bid));
}
}
}
//打开对话框钱，先查询所有的银行
this.initBank();
Object.assign(this.updateForm, row);
this.editdialogVisible = true;
},
//修改
updateData(row) {
//赋值过程
this.updateForm.bids = this.checkedBanks.map((bid) => bid).join(",");
this.axios.post("http://localhost:8090/custom/update", this.updateForm).then((response) => {
if (response.data.result) {
this.$message({
type: 'success',
message: '客户更新成功!'
});
//对话框关闭
this.editdialogVisible = false;
//初始化列表数据
this.initData();
} else {
this.$message.error("客户更新失败!")
}
})
},
//图片上传
handleAvatarSuccess(res,file){
this.imageUrl = URL.createObjectURL(file.raw);
if(this.dialogVisible){
this.insertForm.pic = res.result;
}
},
//列表方法
initData() {
this.axios.get('http://localhost:8090/custom/list', {
params: {
cname: this.searchForm.cname,
bir1: this.searchForm.bir1,
bir2: this.searchForm.bir2,
current: this.current,
size: this.pageSize
}
}).then((response) => {
this.tableData = response.data.result.records;
this.total = response.data.result.total;
})
},
//查询方法
searchData() {
this.initData();
},
//改变每页显示的条数
handleSizeChange(val) {
this.pageSize = val;
this.initData();
},
//改变上一页下一页
handleCurrentChange(val) {
this.current = val;
this.initData();
},
//全选，全不选
handleSelectionChange(val) {
this.rows = val;
},
}
}
</script>

.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}

.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}

.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

码农公寓

相关文章