<template>
<div class="box" align="center">
<div>
<el-input v-model.trim="catIdInput" placeholder="请输入要查询的猫咪编号..." maxlength="18"
style="width: 20%;margin-right: 10px;" v-on:keypress.enter="search()" />
<el-button type="primary" @click="search()">查询</el-button>
<el-button type="primary" style="margin-right: 5px" @click="addOne()">添加</el-button>
</div>
<div>
<el-table v-bind:data="info.slice((currentPage - 1) * pageSize, currentPage * pageSize)" align="center"
:header-cell-style="{
'background-color': '#C1F5F8',
'color': '#606266',
'font-weight': 'bold',
'font-size': '13px',
'text-align': 'center'
}" v-bind:cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width: 100%">
<el-table-column prop="猫咪编号" label="猫咪编号" width="80"></el-table-column>
<el-table-column prop="猫咪类别" label="猫咪类别" width="80"></el-table-column>
<el-table-column prop="猫咪名字" label="猫咪名字" width="60"></el-table-column>
<el-table-column prop="品种" label="品种" width="80"></el-table-column>
<el-table-column prop="毛色" label="毛色" width="80"></el-table-column>
<el-table-column prop="出生日期" label="出生日期" width="150" :formatter="formatDate"></el-table-column>
<el-table-column prop="性别" label="性别" width="60"></el-table-column>
<el-table-column prop="价格" label="价格" width="80px"></el-table-column>
<el-table-column prop="库存数量" label="库存数量" width="80px"></el-table-column>
<el-table-column prop="折扣" label="折扣" width="80px"></el-table-column>
<el-table-column label="照片" width="80">
<template v-slot="scope">
<el-image v-if="scope.row.pic" :src="require('../assets/img/' + scope.row.pic)"
:preview-src-list="[require('../assets/img/' + scope.row.pic)]">
</el-image>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template v-slot="scope">
<el-button size="small" type="primary" @click="updateOne(scope.row.猫咪编号)">编辑</el-button>
<el-button size="small" type="danger" @click="delOne(scope.row.猫咪编号)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--分页显示设置-->
<div>
<el-pagination style="width: 70%; text-align: center; margin: 20px 500px" align="center"
v-model:currentPage="currentPage" v-model:page-size="pageSize" v-bind:page-sizes="[3, 6, 8, 10]"
:small="small" :disabled="disabled" :background="true" layout="total, sizes, prev, pager, next, jumper"
:total="info.length" v-on:size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<!--添加对话框-->
<el-dialog align-center align="center" title="添加新猫咪信息" v-model="dialogVisible_add" v-bind:append-to-body="true"
width="50%">
<div>
<el-table :data="info_add" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780"
align="center" :header-cell-style="{
'background-color': '#C1F5F8',
color: '#606266',
'font-wight': '100',
'font-size': '15px',
'text-align': 'center',
}" :cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width:100%"
@cell-click="tabclick">
<el-table-column prop="猫咪编号" label="猫咪编号" width="100px">
<el-input v-model.trim="catIdInput_add" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="猫咪类别" label="猫咪类别" width="100px">
<el-input v-model.trim="catTypeInput_add" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="猫咪名字" label="猫咪名字" width="80px">
<el-input v-model.trim="catNameInput_add" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="品种" label="品种" width="120px">
<el-input v-model.trim="breedInput_add" maxlength="20" size="small"></el-input>
</el-table-column>
<el-table-column prop="毛色" label="毛色" width="80px">
<el-input v-model.trim="colorInput_add" maxlength="50" size="small"></el-input>
</el-table-column>
<el-table-column prop="出生日期" label="出生日期" width="150px">
<el-date-picker v-model="birthDateInput_add" style="width: 100%" type="datetime" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" size="small">
</el-date-picker>
</el-table-column>
<el-table-column prop="性别" label="性别" width="80px">
<el-radio-group v-model="genderInput_add" v-if="dialogVisible_add" size="small">
<el-radio-button label="公">公</el-radio-button>
<el-radio-button label="母">母</el-radio-button>
</el-radio-group>
</el-table-column>
<el-table-column prop="价格" label="价格" width="80px">
<el-input v-model.trim="priceInput_add" type="number" size="small"></el-input>
</el-table-column>
<el-table-column prop="库存数量" label="库存数量" width="80px">
<el-input v-model.trim="stockInput_add" type="number" size="small"></el-input>
</el-table-column>
<el-table-column prop="折扣" label="折扣" width="80px">
<el-input v-model.trim="discountInput_add" type="number" size="small"></el-input>
</el-table-column>
<el-table-column label="照片" width="150px">
<input style="vertical-align: middle" type="file" id="f" accept="image/jpeg/png/gif"
v-on:change="show()">
<!-- 图片显示 -->
<span>
<img style="vertical-align: middle; width: 40px; height: 60px" id="img"
src="../assets/img/logocats.png" />
</span>
</el-table-column>
</el-table>
</div>
<p></p>
<span align="center">
<el-button size="small" type="primary" @click="add()">确 定</el-button>
<el-button align="center" size="small" @click="dialogVisible_add = false">取消</el-button></span>
</el-dialog>
<!--修改对话框-->
<el-dialog align-center align="center" title="修改当前猫咪信息" v-model="dialogVisible_update" v-bind:append-to-body="true"
width="60%">
<div>
<el-table :data="info_update" v-loading="loading" :row-class-name="tableRowClassName" border
max-height="780" align="center" :header-cell-style="{
'background-color': '#C1F5F8',
color: '#606266',
'font-wight': '100',
'font-size': '15px',
'text-align': 'center',
}" :cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width:100%">
<el-table-column prop="猫咪编号" label="猫咪编号" width="100px">
<el-input v-model.trim="catIdInput_update" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="猫咪类别" label="猫咪类别" width="100px">
<el-input v-model.trim="catTypeInput_update" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="猫咪名字" label="猫咪名字" width="80px">
<el-input v-model.trim="catNameInput_update" maxlength="10" size="small"></el-input>
</el-table-column>
<el-table-column prop="品种" label="品种" width="120px">
<el-input v-model.trim="breedInput_update" maxlength="20" size="small"></el-input>
</el-table-column>
<el-table-column prop="毛色" label="毛色" width="80px">
<el-input v-model.trim="colorInput_update" maxlength="50" size="small"></el-input>
</el-table-column>
<el-table-column prop="出生日期" label="出生日期" width="150px">
<el-date-picker v-model="birthDateInput_update" style="width: 100%" type="date" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" size="small">
</el-date-picker>
</el-table-column>
<el-table-column prop="性别" label="性别" width="80px">
<el-radio-group v-model="genderInput_update" v-if="dialogVisible_update" size="small">
<el-radio-button label="公">公</el-radio-button>
<el-radio-button label="母">母</el-radio-button>
</el-radio-group>
</el-table-column>
<el-table-column prop="价格" label="价格" width="80px">
<el-input v-model.trim="priceInput_update" type="number" size="small"></el-input>
</el-table-column>
<el-table-column prop="库存数量" label="库存数量" width="80px">
<el-input v-model.trim="stockInput_update" type="number" size="small"></el-input>
</el-table-column>
<el-table-column prop="折扣" label="折扣" width="80px">
<el-input v-model.trim="discountInput_update" type="number" size="small"></el-input>
</el-table-column>
<el-table-column label="照片" width="150px">
<input style="vertical-align: middle" type="file" id="f" accept="image/jpeg/png/gif"
v-on:change="show()">
<!-- 图片显示 -->
<span>
<img style="vertical-align: middle; width: 40px; height: 60px" id="img" v-if="pictInput_update"
:src="require('../assets/img/' + pictInput_update)" />
</span>
</el-table-column>
</el-table>
</div>
<p></p>
<span align="center">
<el-button size="small" type="primary" @click="update()">确 定</el-button>
<el-button align="center" size="small" @click="dialogVisible_update = false">取消</el-button></span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "CatManage",
data() {
return {
catIdInput: "", //查询
info: [],
tableRowStyle: {},
small: false,
disabled: false,
loading: false,
currentPage: 1, //分页器中的初始页
pageSize: 10, //每页的行数
formatDate(row, column) {
// 实现日期格式化
const date = row[column.property];
if (date) {
return date.substring(0, 10); // 只显示年月日部分
}
return '';
},
dialogVisible_add: false,
catIdInput_add: "",
catTypeInput_add: "",
catNameInput_add: "",
breedInput_add: "",
colorInput_add: "",
birthDateInput_add: "",
genderInput_add: "母",
priceInput_add: "",
stockInput_add: "",
discountInput_add: "",
pictInput_add: "../assets/img/logocats.png",
info_add: [
//添加用户对话框表格的数据对象
{
猫咪编号: "",
猫咪类别: "",
猫咪名字: "",
品种: "",
毛色: "",
出生日期: "",
性别: "母",
价格: "",
库存数量: "",
折扣: "",
照片: "../assets/img/logocats.png",
},
],
dialogVisible_update: false,
catIdInput_update: "",
catTypeInput_update: "",
catNameInput_update: "",
breedInput_update: "",
colorInput_update: "",
birthDateInput_update: "",
genderInput_update: "",
priceInput_update: "",
stockInput_update: "",
discountInput_update: "",
pictInput_update: "",
info_update: [
//修改用户对话框表格的数据对象
{
猫咪编号: "",
猫咪类别: "",
猫咪名字: "",
品种: "",
毛色: "",
出生日期: "",
性别: "",
价格: "",
库存数量: "",
折扣: "",
照片: "",
}
]
};
},
created() {
//查找members表全部数据
axios
.get("http://127.0.0.1/cat/all")
.then((res) => {
console.log(res.data);
this.info = res.data;
})
.catch((err) => {
console.log("获取数据失败" + err);
});
},
methods: {
//分页器方法
handleSizeChange(size) {
this.pageSize = size;
},
//分页器方法
handleCurrentChange(size) {
this.currentPage = size;
},
all() {
axios
.get("http://127.0.0.1/cat/all")
.then((res) => {
console.log(res.data);
this.info = res.data;
})
.catch((err) => {
console.log("获取数据失败" + err);
});
},
search() {
console.log(this.catIdInput);
axios
.get("http://127.0.0.1/cat/searchCatId", {
params: {
catIdInput: this.catIdInput
}
})
// 根据结果进行处理
.then((res) => {
console.log(res.data);
this.info = res.data;
})
// 异常处理
.catch((err) => {
console.log("操作失败!" + err);
});
},
//添加操作,显示添加对话框
addOne() {
(this.catIdInput_add = ""),
(this.catTypeInput_add = ""),
(this.catNameInput_add = ""),
(this.breedInput_add = ""),
(this.colorInput_add = ""),
(this.birthDateInput_add = ""),
(this.genderInput_add = "母"), // 默认值设为"母"
(this.priceInput_add = ""),
(this.stockInput_add = ""),
(this.discountInput_add = ""),
(this.pictInput_add = "../assets/img/logocats.png"),
(this.dialogVisible_add = true); // 显示添加对话框
},
add() {
// 1.完整性检查
if (
(this.catIdInput_add.length == 0) ||
(this.catTypeInput_add.length == 0) ||
(this.catNameInput_add.length == 0) ||
(this.breedInput_add.length == 0) ||
(this.colorInput_add.length == 0) ||
(this.birthDateInput_add.length == 0) ||
(this.genderInput_add.length == 0) ||
(this.priceInput_add.length == 0) ||
(this.stockInput_add.length == 0) ||
(this.discountInput_add.length == 0)
) {
this.$message({
type: "warning",
message: "猫咪信息不可为空,请重新添加",
});
return false;
}
// 2.正确性检查
else if (this.catIdInput_add.length < 3 || this.catIdInput_add.length > 10) {
this.$message({
type: "warning",
message: "猫咪编号长度需要在3~10个字符之间,请重新输入!",
});
return false;
}
else if (this.catNameInput_add.length < 1 || this.catNameInput_add.length > 10) {
this.$message({
type: "warning",
message: "猫咪名字长度需要在1~10个字符之间,请重新输入!",
});
return false;
}
else if (isNaN(this.priceInput_add) || this.priceInput_add <= 0) {
this.$message({
type: "warning",
message: "价格必须是正数,请重新输入!",
});
return false;
}
else if (isNaN(this.stockInput_add) || this.stockInput_add < 0) {
this.$message({
type: "warning",
message: "库存数量必须是非负整数,请重新输入!",
});
return false;
}
else if (isNaN(this.discountInput_add) || this.discountInput_add < 0 || this.discountInput_add > 1) {
this.$message({
type: "warning",
message: "折扣必须是0-1之间的小数,请重新输入!",
});
return false;
}
else {
axios
// 检查是否已存在相同猫咪编号
.get("http://127.0.0.1/cat/get", {
params: {
catIdInput: this.catIdInput_add,
},
})
.then((res) => {
console.log(res.data);
if (res.data.length == 0) { // 如果无相同猫咪编号,可以添加新猫咪
axios
// 添加新猫咪
.get("http://127.0.0.1/cat/add", {
params: {
catIdInput: this.catIdInput_add,
catTypeInput: this.catTypeInput_add,
catNameInput: this.catNameInput_add,
breedInput: this.breedInput_add,
colorInput: this.colorInput_add,
birthDateInput: this.birthDateInput_add,
genderInput: this.genderInput_add,
priceInput: this.priceInput_add,
stockInput: this.stockInput_add,
discountInput: this.discountInput_add,
pictInput: this.pictInput_add
},
})
.then((res) => {
console.log(res.data);
if (res.data.status == 200) {
this.dialogVisible_add = false; // 关闭添加对话框
this.$message({
type: "warning",
message: "猫咪信息已添加成功!",
});
this.all(); // 刷新页面显示内容
} else {
this.$message({
message: "添加失败",
type: "error"
});
}
})
.catch((err) => {
console.log("操作失败" + err);
});
}
else { // 如果已存在相同猫咪编号
this.$message({
message: "已有相同猫咪编号,请重新添加!!",
type: "warning",
});
}
})
.catch((err) => {
console.log("检查猫咪编号失败" + err);
})
}
},
updateOne(one) {
console.log(one);
axios
.get("http://127.0.0.1/cat/get", {
params: {
catIdInput: one,
},
})
.then((res) => {
console.log(res.data);
this.info_update = res.data;
this.dialogVisible_update = true; // 显示修改对话框
this.catIdInput_update = res.data[0].猫咪编号;
this.catTypeInput_update = res.data[0].猫咪类别;
this.catNameInput_update = res.data[0].猫咪名字;
this.breedInput_update = res.data[0].品种;
this.colorInput_update = res.data[0].毛色;
this.birthDateInput_update = res.data[0].出生日期.substring(0, 10);
this.genderInput_update = res.data[0].性别;
this.priceInput_update = res.data[0].价格;
this.stockInput_update = res.data[0].库存数量;
this.discountInput_update = res.data[0].折扣;
this.pictInput_update = res.data[0].pic;
})
.catch((err) => {
console.log("操作失败" + err)
});
},
update(one) {
// 修改操作
console.log(one);
// 完整性检查
if (
(this.catIdInput_update.length == 0) ||
(this.catTypeInput_update.length == 0) ||
(this.catNameInput_update.length == 0) ||
(this.breedInput_update.length == 0) ||
(this.colorInput_update.length == 0) ||
(this.birthDateInput_update.length == 0) ||
(this.genderInput_update.length == 0) ||
(this.priceInput_update.length == 0) ||
(this.stockInput_update.length == 0) ||
(this.discountInput_update.length == 0)
) {
this.$message({
type: "warning",
message: "猫咪信息不可为空,请重新填写!",
});
return false;
}
// 正确性检查
else if ((this.catIdInput_update.length < 3) || (this.catIdInput_update.length > 10)) {
this.$message({
type: "warning",
message: "猫咪编号长度需要在3~10个字符之间,请重新输入!",
});
return false;
}
else if ((this.catNameInput_update.length < 1) || (this.catNameInput_update.length > 10)) {
this.$message({
type: "warning",
message: "猫咪名字长度需要在1~10个字符之间,请重新输入!",
});
return false;
}
else if (isNaN(this.priceInput_update) || this.priceInput_update <= 0) {
this.$message({
type: "warning",
message: "价格必须是正数,请重新输入!",
});
return false;
}
else if (isNaN(this.stockInput_update) || this.stockInput_update < 0) {
this.$message({
type: "warning",
message: "库存数量必须是非负整数,请重新输入!",
});
return false;
}
else if (isNaN(this.discountInput_update) || this.discountInput_update < 0 || this.discountInput_update > 1) {
this.$message({
type: "warning",
message: "折扣必须是0-1之间的小数,请重新输入!",
});
return false;
}
// 后端传参、执行方法
else {
axios
.get("http://127.0.0.1/cat/update", {
params: {
catIdInput: this.catIdInput_update,
catTypeInput: this.catTypeInput_update,
catNameInput: this.catNameInput_update,
breedInput: this.breedInput_update,
colorInput: this.colorInput_update,
birthDateInput: this.birthDateInput_update,
genderInput: this.genderInput_update,
priceInput: this.priceInput_update,
stockInput: this.stockInput_update,
discountInput: this.discountInput_update,
pictInput: this.pictInput_update
},
})
.then((res) => {
console.log(res.data);
if (res.data.status == 200) {
this.dialogVisible_update = false; // 关闭修改对话框
this.$message({
type: "warning",
message: "猫咪信息已修改成功!",
});
this.all(); // 重新获取修改后的完整数据
} else {
this.$message({
message: "修改失败!",
type: "error",
});
}
})
.catch((err) => {
console.log("操作失败" + err);
});
}
},
//删除操作,进行删除确认提示,可以像添加,删除一样,显示信息后“确定”后再删除,只使用一个delOne(one)方法删除即可
delOne(one) {
console.log(one);
// 加入删除确认!
this.$confirm(
"此操作将永久删除猫咪编号为【" + one + "】的记录!",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
axios
.get("http://127.0.0.1/cat/del", {
params: {
catIdInput: one,
},
})
.then((res) => {
console.log(res.data);
if (res.data.status == 200) {
this.all(); // 重新获取删除后的完整数据
this.$message({
type: "success",
message: "已删除猫咪编号为【" + one + "】的记录!",
});
} else {
this.$message({
type: "error",
message: "删除失败!",
});
}
})
.catch((err) => {
console.log("操作失败" + err);
this.$message({
type: "error",
message: "删除操作失败!",
});
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 在添加和修改对话框中,显示图片
show() {
var file = document.getElementById("f").files[0]; // 获取上传的文件
this.pictInput_add = file.name; // 用于增加图片
this.pictInput_update = file.name; // 用于修改图片
var fileReader = new FileReader();
fileReader.readAsDataURL(file); // 读取文件内容
fileReader.onload = function () {
document.getElementById("img").src = fileReader.result; // 显示图片预览
};
}
}
}
</script>
<style>
.box {
text-align: center;
width: 100%;
position: relative;
margin: 50px auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: center;
}
.el-table {
margin-top: 20px;
/* 这里设置间距为 20px,你可以根据实际需求调整这个数值,比如改为 30px 等 */
}
</style>这是我的源代码,照片上传不显示