vue显示详情加入回收站

@{
ViewData["Title"] = "Home Page";
}
<script src="~/element/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link href="~/element/index.css" rel="stylesheet" />

<h1>会议辅助物料</h1>
<div id="se">

<el-button class="btn-info"> <a href="Add">新增物料</a></el-button>
<table class="table table-bordered" width="3500px">

<tr>
<td>物料编号</td>
<td>物料名称</td>
<td>物料类型</td>
<td>价格</td>
<td>库存数量</td>
<td>剩余数量</td>
<td>产品上架</td>
<td>操作</td>
</tr>
<tr v-for="set in list" v-if="set.ure==true">
<td>{{set.matnrBian}}</td>
<td>{{set.nameMaterial}}</td>
<td>{{set.materialTypeName}}</td>
<td>{{set.price}}</td>
<td>{{set.stockQty}}</td>
<td>{{set.balance}}</td>
<td v-if="set.added==1">
上架
</td>
<td v-else>
下架
</td>
<td>
<el-button class="btn-primary" v-on:click="ShowDetail(set)">查看详情 </el-button>
<el-button class="btn-info" v-on:click="asdf()">编辑</el-button>
<el-button class="btn-warning" v-on:click="Reaf(set)">加入回收站 </el-button>
</td>
</tr>
</table>
<table>
<tr>
<td><a href="#" v-on:click="parentMethod(1)">首页</a></td>
<td><a href="#" v-on:click="parentMethod(2)">下一页</a></td>
<td><a href="#" v-on:click="parentMethod(3)">上一页</a></td>
<td><a href="#" v-on:click="parentMethod(4)">尾页</a></td>
</tr>
</table>
<template>
<el-dialog :title="dialogTitle" :visible.sync="iconFormVisible">
<el-form :inline="true" :model="getvlues">
<div>
<h4>
物料用途:<el-label>会议辅助</el-label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
物料分类:<el-label v-text="getvlues.tname"></el-label>

</h4>
</div>
<br />
<br />
<div>
<h4>
物料用途:<el-label v-text="getvlues.materialTypeName"></el-label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
物料编号:<el-label v-text="getvlues.matnrBian"></el-label>
</h4>
</div>
<br />
<br />
<div>
<h4>
物料描述:<el-label v-text="getvlues.nameMaterial"></el-label>
</h4>
</div>
<br />
<br />
<div>
<h4>
单价:<el-label v-text="getvlues.price"></el-label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
库存数量:<el-label v-text="getvlues.stockQty"></el-label>
</h4>
</div>
<br />
<br />
<div>
<h4>
添加日期:<el-label v-text="getvlues.dateAdded"></el-label>
</h4>
</div>
</el-form>
</el-dialog>
</template>
</div>
<script>
new Vue({
el: "#se", data() {
return {
list: {}, dialogTitle: '物料详情', iconFormVisible: false, getvlues: {},sz:[]
}
},
created() {
sessionStorage["pagenumber"] = 1;
this.Show();
},
methods: {

Show: function () {
axios.get("http://localhost:53466/api/Meeting/Show?pagenumber=" + sessionStorage["pagenumber"]).then(response => {
console.log(response.data.st);
this.list = response.data.st;
sessionStorage["count"] = response.data.count;
}).catch(error => { console.log(error) })
},
parentMethod(event) {

switch (event) {
case 1:
{
sessionStorage["pagenumber"] = 1;
this.Show();
}
break;
case 2:
{
var pagenumber = parseInt(sessionStorage["pagenumber"]);
if (pagenumber >= sessionStorage["count"]) {
break;
}
else {
sessionStorage["pagenumber"] = pagenumber + 1;
}
this.Show();
}
break;
case 3:
{
var pagenumber = parseInt(sessionStorage["pagenumber"]);
if (pagenumber <= 0) {
pagenumber = 1;
return;
}
else {
sessionStorage["pagenumber"] = pagenumber - 1;
}
this.Show();
}
break;
case 4:
{
sessionStorage["pagenumber"] = sessionStorage["count"];
this.Show();
}
break;
default:
}
},
Search: function (event) {
sessionStorage["pid"] = event;
this.Show();
},
ShowDetail: function (event) {
this.iconFormVisible = true;
this.dialogTitle = "物料详情";
axios.get("http://localhost:53466/api/Meeting/ShowDe?tid=" + event.matnrid).then(response => {
this.getvlues = response.data;
this.iconFormVisible = true;
console.log(response.data);

}).catch(error => { console.log(error) })

console.log(event.matnrid);

},
FenPei: function (event) {
location.href = '/MeeTing/ShowDe';
sessionStorage['matnrBian'] = event.matnrBian
sessionStorage['tname'] = event.tname;
sessionStorage['nameMaterial'] = event.nameMaterial
sessionStorage['materialTypeName'] = event.materialTypeName;
sessionStorage['price'] = event.price
sessionStorage['stockQty'] = event.stockQty;
sessionStorage['dateAdded'] = event.dateAdded
},
Get: function (event) {
this.sz.push(event.matnrid);

},
Reaf: function (event) {

axios.get("http://localhost:53466/api/Meeting/Update6?did=" + event.matnrid).then(response => {
this.getvlues = response.data;
this.iconFormVisible = false;
console.log(event.matnrid);
console.log(response.data);
alert("加入回收站成功");
this.Show();
}).catch(error => { console.log(error) })
console.log(event.matnrid);
},
asdf: function () {
location.href = "UPt";
}
}
});

</script>

原文地址:https://www.cnblogs.com/zhang2000/p/13402711.html