前端代码如下：
<template>
<div>
<el-row style="margin-top: 16px">
<el-col :span="6" style="margin-left: 16px">
<span style="width: 100px">名称：</span>
<el-input
v-model="querygoodsname"
size="mini"
style="width: 260px"
placeholder="名称"
></el-input>
</el-col>
<el-col :span="4">
<el-button
type="primary"
size="medium"
style="width: 90px"
@click="GetGoodsInfos()"
>查询</el-button
>
</el-col>
</el-row>
<el-row style="margin-left: 20px; margin-top: 16px">
<el-table
:data="queryGoodsInfos"
:max-height="720"
border
style="width: 100%"
>
<el-table-column prop="Id" label="商品编号" sortable></el-table-column>
<el-table-column prop="goodsname" label="商品名称" sortable></el-table-column>
<el-table-column prop="price" label="商品价格" sortable></el-table-column>
<el-table-column prop="productfactory" label="生产厂商" sortable></el-table-column>
<el-table-column prop="unit" label="单位" sortable></el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">修改</el-button>
<el-button type="text"size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
import waves from "@/directive/waves/index.js"; // 水波纹指令
import { mapGetters } from "vuex";
import { GetRoleInfos} from "@/api/role.js";
import { GetGoods, QueryGoodsInfos, AddGoods, UpdateGoods, DeleteGoods} from "@/api/goods.js";
export default {
name: "GoodsManage",
components: {},
directives: {
waves,
},
data() {
return {
goods: {
Id: 0,
goodsname: "",
price: 0.0,
type: "",
productfactory: "",
unit: "",
},
role:"",
roleInfos: [],
querygoodsname: "", // 查询框的用户名称
goodsInfoVisable: false,
goodsInfos: [],
queryGoodsInfos: [],
rules: {
goodsname: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
]
},
};
},
computed: {
...mapGetters(["name", "avatar", "roles"]),
},
watch: {},
created() {
this.userName = this.name;
GetGoods()
.then((response) => {
this.goodsInfos = this.queryGoodsInfos = response.Data;
})
.catch(() => {
console.log("获取商品数据失败");
});
GetRoleInfos(this.roleInfo)
.then((response) => {
this.roleInfos = response.Data;
})
.catch(() => {
console.log("获取角色数据失败");
});
},
methods: {
GetGoodsInfos() {
if(this.querygoodsname)
{
this.goods.goodsname = this.querygoodsname;
this.queryGoodsInfos=[];
QueryGoodsInfos({goodsname: this.querygoodsname})
.then((response) => {
console.log("获取商品数据
