# 编辑弹出框明细表选择数据
# 企业版代码不需要看此示例，看上面的【明细表select下拉框table搜索】
点击弹出框
弹出框选择数据回写
代码目录结构
# 代码实现
1、生成【表.js】文件（Demo_Order.js）
import modelHeader from './orderModelHeader';
import { h, resolveComponent } from 'vue';
let extension = {
components: {
//查询界面扩展组件
gridHeader: '',
//自定义列表页面
gridBody:'',
gridFooter: '',
//新建、编辑弹出框扩展组件
modelHeader: modelHeader,
modelBody: '',
modelFooter: ''
},
methods: {
onInited() {
//明细表添加选择按钮
this.detailOptions.buttons.unshift({
name: '选择数据', //按钮名称
icon: 'el-icon-plus', //按钮图标，参照iview图标
hidden: false, //是否隐藏按钮(如果想要隐藏按钮，在onInited方法中遍历buttons，设置hidden=true)
onClick: ()=> {
//触发事件
this.$refs.modelHeader.openDetail();
}
});
}
}
};
export default extension;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2、自定义弹出框【orderModelHeader.vue】文件
<template>
<!--批量选择明细表数据 -->
<vol-box :lazy="true" v-model="detailModel" title="批量选择明细表数据" :width="1200" :padding="0">
<div>
<!-- 搜索配置 -->
<div class="search-form">
<label>商品名称：</label>
<el-input style="width:200px;" v-model="GoodsName"></el-input>
<el-button size="small" type="primary" @click="search" >搜索</el-button>
</div>
<!-- 表格数据 -->
<vol-table ref="detailTable" :loadKey="true" :columns="columns" :pagination-hide="false"
:height="420" :url="url" @loadBefore="loadBefore"
></vol-table>
</div>
<template #footer>
<div> <el-button type="primary" @click="detailSelectClick" size="mini" >选择数据</el-button></div>
</template
>
</vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
import VolTable from '@/components/basic/VolTable.vue';
//这里使用的vue2语法，也可以写成vue3语法
export default {
components: {
'vol-box': VolBox,
VolTable
},
methods: {},
data() {
return {
model: false, //弹出框
detailModel: false, //批量选择明细表数据model、
//调用的接口地址
url: 'api/Demo_Order/getGoods',
GoodsName: '', //商品名称
//表格配置(可以将生成vue文件中columns配置复制过来)
columns: [
{
field: 'GoodsId',
title: '商品ID',
type: 'guid',
width: 110,
hidden: true
},
{ field: 'GoodsName', title: '商品名称', width: 120 },
{ field: 'GoodsCode', title: '商品编号',width: 100 },
{ field: 'Img', title: '商品图片', type: 'img', width: 80 },
{ field: 'Specs', title: '商品规格', width: 90 },
{ field: 'Price', title: '单价', width: 80 },
{
field: 'Enable',
title: '是否可用',
type: 'int',
bind: { key: 'enable', data: [] },
width: 90
},
{ field: 'Remark', title: '备注', width: 100 }
]
};
},
methods: {
openDetail() {
//打明细表批量选择
this.detailModel = true;
//刷新表格的数据
this.$nextTick(() => {
this.$refs.detailTable &&
this.$refs.detailTable.load(null, true);
});
},
detailSelectClick() {
//回写数据到明细表
let rows = this.$refs.detailTable.getSelected();
if (!rows.length) {
return this.$message.error('请选择数据');
}
//获取回写到明细表的字段
let _rows = rows.map((row) => {
return {
GoodsId: row.GoodsId,
GoodsCode: row.GoodsCode,
GoodsName: row.GoodsName,
Img: row.Img,
Specs: row.Specs,
Price: row.Price
};
});
this.$emit('parentCall', ($parent) => {
$parent.$refs.detail.rowData.unshift(..._rows);
this.detailModel = false;
});
},
search() {
//搜索
this.$refs.detailTable.load(null, true);
},
loadBefore(param, callBack) {
//批量选择设置查询条件
param.wheres = [
{ name: 'GoodsName', value: this.GoodsName, displayType: 'like' }
];
callBack(true);
}
}
};
</script>
<style lang="less" scoped>
.search-form {
display: flex;
padding: 10px;
line-height: 34px;
button {
margin-left: 10px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
3、后台接口查询 api/Demo_Order/getGoods'
//在后台生成的表控制器上写查询
namespace Vol.DbTest.Controllers
{
public partial class Demo_OrderController
{
private readonly IDemo_OrderService _service;//访问业务代码
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IDemo_GoodsService _goodsService;//商品信息业务类
private readonly IDemo_GoodsRepository _goodsRepository;
[ActivatorUtilitiesConstructor]
public Demo_OrderController(
IDemo_OrderService service,
IHttpContextAccessor httpContextAccessor,
IDemo_GoodsService goodsService,
IDemo_GoodsRepository goodsRepository,
IDemo_OrderRepository orderRepository
)
: base(service)
{
_service = service;
_goodsRepository = goodsRepository;
_goodsService = goodsService;
_httpContextAccessor = httpContextAccessor;
}
//批量选择获取明商品数据
[Route("getGoods"), HttpPost]
public IActionResult GetGoods([FromBody] PageDataOptions loadData)
{
//1、调用框架的查询方法
var gridData = _goodsService.GetPageData(loadData);
return JsonNormal(gridData);
////2、也可以自己单独写查询
////获取查询参数
//var wheres = loadData.Wheres.DeserializeObject<List<SearchParameters>>();
////获取查询条件
//string goodsValue = wheres.Where(x => x.Name == "GoodsName").Select(s => s.Value).FirstOrDefault();
////设置查询条件
//var query = _goodsRepository.WhereIF(!string.IsNullOrEmpty(goodsValue), x => x.GoodsName.Contains(goodsValue));
//////如果上面_goodsRepository.WhereIF找不到此方法，是因为版本问题，请使用下面的单独写查询
////if (!string.IsNullOrEmpty(goodsValue))
////{
//// query = _goodsRepository.FindAsIQueryable(x => x.GoodsName.Contains(goodsValue));
////}
//return JsonNormal(new
//{
// total = query.Count(),
// rows = query.TakePage(loadData.Page, loadData.Rows)
//});
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59