output.vue
5.02 KB
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
<LayoutBody>
<LayoutFilter :no-line="true" :col="1">
<FilterItem>
<div class="import-title">导出</div>
</FilterItem>
</LayoutFilter>
<LayoutFilter :no-line="true" :col="1">
<FilterItem label="文件类型">
<Select v-model="fileType.model">
<Option v-for="item in fileType.list" :value="item.id" :key="item">{{ item.label }}</Option>
</Select>
</FilterItem>
<FilterItem label="选择类目">
<SelectCategory @select-change="sortChange">
</SelectCategory>
</FilterItem>
<FilterItem>
<Button type="primary" @click="exportFile">导出</Button>
</FilterItem>
</LayoutFilter>
<LayoutFilter :no-line="true" :col="1">
<FilterItem>
<div class="import-title">批导文件上传</div>
</FilterItem>
</LayoutFilter>
<LayoutFilter :no-line="true" :col="1">
<FilterItem label="操作类型">
<Select v-model="operator.model">
<Option v-for="item in operator.list" :value="item.id" :key="item">{{ item.label }}</Option>
</Select>
</FilterItem>
<FilterItem label="品牌">
<SelectBrand v-model="brandId"></SelectBrand>
</FilterItem>
<FilterItem label="上传文件">
<Input v-model="xlsxFile" style="width: 300px"></Input>
<XlsxUpload
ref="xlsxUpload"
:action="action"
:on-change="onChange"
:on-success="onSuccess"
:on-error="onError"
:on-progress="onProgress">
<Button type="ghost">浏览</Button>
</XlsxUpload>
</FilterItem>
<FilterItem>
<Button type="primary" @click="upload">开始上传</Button>
</FilterItem>
</LayoutFilter>
</LayoutBody>
</template>
<script>
import {SelectCategory, SelectBrand} from 'components/select';
export default {
data() {
return {
fileType: {
model: 0,
list: [
{
id: 0,
label: '我的商品表'
}
]
},
operator: {
model: 0,
list: [
{
id: 0,
label: '创建商品'
}
]
},
xlsxFile: '',
brandId: '',
action: '/importSeller',
sort: {
first: {
label: '选择类目',
holder: '选择一级类目',
labelSpan: 6,
fieldSpan: 18,
model: ''
},
second: {
label: '二级类目',
holder: '选择二级类目',
labelSpan: 6,
fieldSpan: 18,
model: ''
},
third: {
label: '三级类目',
holder: '选择三级类目',
labelSpan: 6,
fieldSpan: 18,
model: ''
}
}
};
},
methods: {
exportFile() {
const max = this.sort.first.model;
const mid = this.sort.second.model;
const min = this.sort.third.model;
const href = '/Api/platform/exportSellerProductList?' +
`maxSortId=${max}&middleSortId=${mid}&smallSortId=${min}`;
window.open(href, '_blank');
},
sortChange(val) {
this.sort.first.model = val.max;
this.sort.second.model = val.mid;
this.sort.third.model = val.min;
},
onChange(files) {
if (files.length !== 1) {
return;
}
this.xlsxFile = files[0].name;
},
upload() {
this.$refs.xlsxUpload.upload({brandId: this.brandId});
},
onSuccess() {
},
onError() {
},
onProgress() {
}
},
components: {
SelectCategory,
SelectBrand
}
};
</script>
<style lang="scss">
.import-title {
font-size: 15px;
font-weight: bold;
background-color: #fafafa;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
margin-top: 10px;
}
</style>