产品资料管理联调
Showing
6 changed files
with
497 additions
and
185 deletions
... | @@ -3,4 +3,5 @@ ENV = 'development' | ... | @@ -3,4 +3,5 @@ ENV = 'development' |
3 | 3 | ||
4 | # base api | 4 | # base api |
5 | # VUE_APP_BASE_API = 'http://192.168.11.67:8096' | 5 | # VUE_APP_BASE_API = 'http://192.168.11.67:8096' |
6 | VUE_APP_BASE_API = 'https://beta-salecloud-hengan.situdata.com' | 6 | VUE_APP_BASE_API = 'http://192.168.10.89:8096' |
7 | # VUE_APP_BASE_API = 'https://beta-salecloud-hengan.situdata.com' | ... | ... |
src/api/productInforManagement.js
0 → 100644
1 | import request from '@/utils/request' | ||
2 | |||
3 | /** | ||
4 | * 产品资料管理-列表 | ||
5 | * @param {*} data | ||
6 | */ | ||
7 | export function getProductList(data) { | ||
8 | return request({ | ||
9 | url: '/saleCloud/web/product/list', | ||
10 | method: 'post', | ||
11 | data | ||
12 | }) | ||
13 | } | ||
14 | /** | ||
15 | * 产品资料管理-查看详情 | ||
16 | * @param {*} data | ||
17 | */ | ||
18 | export function productDetail(data) { | ||
19 | return request({ | ||
20 | url: '/saleCloud/web/product/detail', | ||
21 | method: 'post', | ||
22 | data | ||
23 | }) | ||
24 | } | ||
25 | /** | ||
26 | * 产品资料管理-查看详情-编号重复校验 | ||
27 | * @param {*} data | ||
28 | */ | ||
29 | export function productCodeCheck(data) { | ||
30 | return request({ | ||
31 | url: '/saleCloud/web/product/code-check', | ||
32 | method: 'post', | ||
33 | data | ||
34 | }) | ||
35 | } | ||
36 | /** | ||
37 | * 产品资料管理-修改 | ||
38 | * @param {*} data | ||
39 | */ | ||
40 | export function productEdit(data) { | ||
41 | return request({ | ||
42 | url: '/saleCloud/web/product/edit', | ||
43 | method: 'post', | ||
44 | data | ||
45 | }) | ||
46 | } | ||
47 | /** | ||
48 | * 产品资料管理-新增 | ||
49 | * @param {*} data | ||
50 | */ | ||
51 | export function productAdd(data) { | ||
52 | return request({ | ||
53 | url: '/saleCloud/web/product/add', | ||
54 | method: 'post', | ||
55 | headers: { 'Content-Type': 'multipart/form-data' }, | ||
56 | data | ||
57 | }) | ||
58 | } |
... | @@ -86,6 +86,7 @@ export const constantRoutes = [ | ... | @@ -86,6 +86,7 @@ export const constantRoutes = [ |
86 | name: 'edit-product', | 86 | name: 'edit-product', |
87 | hidden: true, | 87 | hidden: true, |
88 | component: () => import('@/views/editProduct'), | 88 | component: () => import('@/views/editProduct'), |
89 | props: route => ({ idAndCode: route.query }), | ||
89 | meta: { | 90 | meta: { |
90 | title: '新增产品', | 91 | title: '新增产品', |
91 | icon: 'report' | 92 | icon: 'report' | ... | ... |
... | @@ -21,3 +21,116 @@ export const PERMISSION_USER_MAP = { | ... | @@ -21,3 +21,116 @@ export const PERMISSION_USER_MAP = { |
21 | } | 21 | } |
22 | 22 | ||
23 | export const inputMaxLength = 21 | 23 | export const inputMaxLength = 21 |
24 | /** | ||
25 | * 产品资料----产品类型 | ||
26 | */ | ||
27 | export const productTypes = [ | ||
28 | { | ||
29 | label: '全部', | ||
30 | value: '' | ||
31 | }, | ||
32 | { | ||
33 | label: '健康险', | ||
34 | value: 1 | ||
35 | }, | ||
36 | { | ||
37 | label: '普通险', | ||
38 | value: 2 | ||
39 | }, | ||
40 | { | ||
41 | label: '分红险', | ||
42 | value: 3 | ||
43 | }, | ||
44 | { | ||
45 | label: '万能险', | ||
46 | value: 4 | ||
47 | }, | ||
48 | { | ||
49 | label: '投资连结险', | ||
50 | value: 5 | ||
51 | } | ||
52 | ] | ||
53 | /** | ||
54 | * 产品资料----险别 | ||
55 | */ | ||
56 | export const riskTypes = [ | ||
57 | { | ||
58 | label: '全部', | ||
59 | value: '' | ||
60 | }, | ||
61 | { | ||
62 | label: '主险', | ||
63 | value: 1 | ||
64 | }, | ||
65 | { | ||
66 | label: '附加险', | ||
67 | value: 2 | ||
68 | } | ||
69 | ] | ||
70 | /** | ||
71 | * 产品资料----上架状态 | ||
72 | */ | ||
73 | export const shelfType = [ | ||
74 | { | ||
75 | label: '全部', | ||
76 | value: '' | ||
77 | }, | ||
78 | { | ||
79 | label: '未上架', | ||
80 | value: 0 | ||
81 | }, | ||
82 | { | ||
83 | label: '上架', | ||
84 | value: 1 | ||
85 | } | ||
86 | ] | ||
87 | /** | ||
88 | * 产品资料----产品渠道 | ||
89 | */ | ||
90 | export const productChannel = [ | ||
91 | { | ||
92 | label: '全部', | ||
93 | value: '' | ||
94 | }, | ||
95 | { | ||
96 | label: '个险渠道(FC)', | ||
97 | value: 1 | ||
98 | }, | ||
99 | { | ||
100 | label: '银保渠道(BK)', | ||
101 | value: 2 | ||
102 | }, | ||
103 | { | ||
104 | label: '团险渠道(GP)', | ||
105 | value: 3 | ||
106 | }, | ||
107 | { | ||
108 | label: '多元渠道(AD)', | ||
109 | value: 4 | ||
110 | }, | ||
111 | { | ||
112 | label: '续期渠道(RP)', | ||
113 | value: 5 | ||
114 | }, | ||
115 | { | ||
116 | label: '多元代理渠道', | ||
117 | value: 6 | ||
118 | } | ||
119 | ] | ||
120 | /** | ||
121 | * 产品资料----文件类型 | ||
122 | */ | ||
123 | export const fileList = [ | ||
124 | { | ||
125 | id: 1, | ||
126 | type: '产品条款' | ||
127 | }, | ||
128 | { | ||
129 | id: 2, | ||
130 | type: '产品说明书' | ||
131 | }, | ||
132 | { | ||
133 | id: 3, | ||
134 | type: '免责条款' | ||
135 | } | ||
136 | ] | ... | ... |
1 | <template> | 1 | <template> |
2 | <Card> | 2 | <Card> |
3 | <h4 class="mb10">产品基本属性</h4> | 3 | <h4 class="mb10">产品基本属性</h4> |
4 | <el-form class="count-form" ref="form" size="mini" inline :model="form"> | 4 | <el-form |
5 | class="count-form" | ||
6 | ref="form" | ||
7 | size="mini" | ||
8 | inline | ||
9 | :model="form" | ||
10 | :rules="rules" | ||
11 | > | ||
5 | <div> | 12 | <div> |
6 | <el-form-item label="产品名称"> | 13 | <el-form-item label="产品名称" prop="name"> |
7 | <el-input | 14 | <el-input |
8 | v-model.trim="form.name" | 15 | v-model.trim="form.name" |
9 | placeholder="请输入产品名称" | 16 | placeholder="请输入产品名称" |
... | @@ -11,41 +18,44 @@ | ... | @@ -11,41 +18,44 @@ |
11 | > | 18 | > |
12 | </el-input> | 19 | </el-input> |
13 | </el-form-item> | 20 | </el-form-item> |
14 | <el-form-item label="产品类型"> | 21 | <el-form-item label="产品类型" prop="type"> |
15 | <el-select v-model="form.type"> | 22 | <el-select v-model="form.type"> |
16 | <el-option | 23 | <el-option |
17 | v-for="(item, index) of productTypes" | 24 | v-for="item of comProductTypes" |
18 | :key="`option-${index}`" | 25 | :key="item.value" |
19 | :label="item.label" | 26 | :label="item.label" |
20 | :value="item.value" | 27 | :value="item.value" |
21 | ></el-option> | 28 | ></el-option> |
22 | </el-select> | 29 | </el-select> |
23 | </el-form-item> | 30 | </el-form-item> |
24 | <el-form-item label="产品编号"> | 31 | <el-form-item label="产品编号" prop="code"> |
25 | <el-input | 32 | <el-input |
26 | v-model.trim="form.id" | 33 | v-model.trim="form.code" |
27 | placeholder="请输入产品编号" | 34 | placeholder="请输入产品编号" |
28 | :maxlength="inputMaxLength" | 35 | :maxlength="inputMaxLength" |
36 | :disabled="!!idAndCode.code" | ||
29 | > | 37 | > |
30 | </el-input> | 38 | </el-input> |
31 | </el-form-item> | 39 | </el-form-item> |
32 | <el-form-item label="险别"> | 40 | <el-form-item label="险别" prop="risk"> |
33 | <el-select v-model="form.insurance"> | 41 | <el-select v-model="form.risk"> |
34 | <el-option | 42 | <el-option |
35 | v-for="(item, index) of insuranceTypes" | 43 | v-for="item of comRiskTypes" |
36 | :key="`option-${index}`" | 44 | :key="item.value" |
37 | :label="item.label" | 45 | :label="item.label" |
38 | :value="item.value" | 46 | :value="item.value" |
39 | ></el-option> | 47 | ></el-option> |
40 | </el-select> | 48 | </el-select> |
41 | </el-form-item> | 49 | </el-form-item> |
42 | </div> | 50 | </div> |
43 | <el-form-item label="产品渠道"> | 51 | <el-form-item label="产品渠道" prop="channel"> |
44 | <el-checkbox-group v-model="form.channel"> | 52 | <el-checkbox-group v-model="form.channel"> |
45 | <el-checkbox label="选项一"></el-checkbox> | 53 | <el-checkbox |
46 | <el-checkbox label="选项二"></el-checkbox> | 54 | v-for="item of comProductChannel" |
47 | <el-checkbox label="选项三"></el-checkbox> | 55 | :key="item.value" |
48 | <el-checkbox label="选项四"></el-checkbox> | 56 | :label="item.value" |
57 | >{{ item.label }}</el-checkbox | ||
58 | > | ||
49 | </el-checkbox-group> | 59 | </el-checkbox-group> |
50 | </el-form-item> | 60 | </el-form-item> |
51 | </el-form> | 61 | </el-form> |
... | @@ -79,14 +89,14 @@ | ... | @@ -79,14 +89,14 @@ |
79 | :auto-upload="false" | 89 | :auto-upload="false" |
80 | :on-change="onChange" | 90 | :on-change="onChange" |
81 | > | 91 | > |
82 | <el-button type="text" @click="updateFile(scope.row.id)" | 92 | <el-button type="text" @click="trapClick(1, scope.row.id)" |
83 | >上传</el-button | 93 | >上传</el-button |
84 | > | 94 | > |
85 | </el-upload> | 95 | </el-upload> |
86 | <el-button type="text" @click="previewFile(scope.row.id)" | 96 | <el-button type="text" @click="trapClick(2, scope.row.id)" |
87 | >预览</el-button | 97 | >预览</el-button |
88 | > | 98 | > |
89 | <el-button type="text" @click="deleteFile(scope.row.id)" | 99 | <el-button type="text" @click="trapClick(3, scope.row.id)" |
90 | >删除</el-button | 100 | >删除</el-button |
91 | > | 101 | > |
92 | </div> | 102 | </div> |
... | @@ -94,7 +104,12 @@ | ... | @@ -94,7 +104,12 @@ |
94 | </el-table-column> | 104 | </el-table-column> |
95 | </el-table> | 105 | </el-table> |
96 | <div class="title"> | 106 | <div class="title"> |
97 | 产品链接<el-button type="text" style="margin-left:20px" @click="previewLink">预览</el-button> | 107 | 产品链接<el-button |
108 | type="text" | ||
109 | style="margin-left:20px" | ||
110 | @click="previewLink" | ||
111 | >预览</el-button | ||
112 | > | ||
98 | </div> | 113 | </div> |
99 | <el-input | 114 | <el-input |
100 | class="mb10" | 115 | class="mb10" |
... | @@ -104,71 +119,114 @@ | ... | @@ -104,71 +119,114 @@ |
104 | v-model="productLink" | 119 | v-model="productLink" |
105 | ></el-input> | 120 | ></el-input> |
106 | <div class="bottom"> | 121 | <div class="bottom"> |
107 | <el-button type="primary">提交</el-button> | 122 | <el-button type="primary" @click="submit">提交</el-button> |
108 | </div> | 123 | </div> |
109 | </Card> | 124 | </Card> |
110 | </template> | 125 | </template> |
111 | 126 | ||
112 | <script> | 127 | <script> |
113 | import { inputMaxLength } from '@/utils/mappingData' | 128 | import { |
114 | const productTypes = [ | 129 | inputMaxLength, |
115 | { | 130 | riskTypes, |
116 | label: '团险', | 131 | productTypes, |
117 | value: '1' | 132 | productChannel |
118 | } | 133 | } from '@/utils/mappingData' |
119 | ] | 134 | |
120 | const insuranceTypes = [ | 135 | import { |
121 | { | 136 | productDetail, |
122 | label: '主险', | 137 | productCodeCheck, |
123 | value: '1' | 138 | productEdit, |
124 | }, | 139 | productAdd |
125 | { | 140 | } from '@/api/productInforManagement' |
126 | label: '附加险', | 141 | |
127 | value: '2' | ||
128 | } | ||
129 | ] | ||
130 | export default { | 142 | export default { |
143 | props: ['idAndCode'], | ||
131 | data() { | 144 | data() { |
145 | const validateCode = async (rule, value, callback) => { | ||
146 | if (!value) { | ||
147 | return callback(new Error('请输入产品编号')) | ||
148 | } | ||
149 | const { result } = await productCodeCheck({ code: value }) | ||
150 | if (!result) { | ||
151 | return callback(new Error('产品代码已存在,请重新输入')) | ||
152 | } | ||
153 | callback() | ||
154 | } | ||
132 | return { | 155 | return { |
133 | inputMaxLength, | 156 | inputMaxLength, |
134 | productTypes, | ||
135 | insuranceTypes, | ||
136 | form: { | ||
137 | name: '', | ||
138 | type: '', | ||
139 | id: '', | ||
140 | insurance: '', | ||
141 | channel: '' | ||
142 | }, | ||
143 | fileList: [ | 157 | fileList: [ |
144 | { | 158 | { |
145 | id: 0, | 159 | id: 1, |
146 | type: '产品条款', | 160 | type: '产品条款', |
147 | name: null, | 161 | file: null, |
148 | file: null | 162 | name: null |
149 | }, | 163 | }, |
150 | { | 164 | { |
151 | id: 1, | 165 | id: 2, |
152 | type: '产品说明书', | 166 | type: '产品说明书', |
153 | name: null, | 167 | file: null, |
154 | file: null | 168 | name: null |
155 | }, | 169 | }, |
156 | { | 170 | { |
157 | id: 2, | 171 | id: 3, |
158 | type: '免责条款', | 172 | type: '免责条款', |
159 | name: null, | 173 | file: null, |
160 | file: null | 174 | name: null |
161 | } | 175 | } |
162 | ], | 176 | ], |
177 | form: { | ||
178 | name: 'lztest', | ||
179 | type: '1', | ||
180 | code: '123123', | ||
181 | risk: '1', | ||
182 | channel: [1] | ||
183 | }, | ||
184 | rules: { | ||
185 | name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }], | ||
186 | type: [ | ||
187 | { required: true, message: '请选择产品类型', trigger: 'change' } | ||
188 | ], | ||
189 | code: [{ required: true, validator: validateCode, trigger: 'blur' }], | ||
190 | risk: [{ required: true, message: '请选择险别', trigger: 'change' }], | ||
191 | channel: [ | ||
192 | { required: true, message: '请选择产品渠道', trigger: 'change' } | ||
193 | ] | ||
194 | }, | ||
163 | currentFileIndex: 0, | 195 | currentFileIndex: 0, |
164 | productLink: '' | 196 | productLink: '' |
165 | } | 197 | } |
166 | }, | 198 | }, |
199 | computed: { | ||
200 | comRiskTypes() { | ||
201 | return riskTypes.slice(1) | ||
202 | }, | ||
203 | comProductTypes() { | ||
204 | return productTypes.slice(1) | ||
205 | }, | ||
206 | comProductChannel() { | ||
207 | return productChannel.slice(1) | ||
208 | } | ||
209 | }, | ||
210 | mounted() { | ||
211 | if (this.idAndCode.code) { | ||
212 | this.handleProductDetail() | ||
213 | } | ||
214 | }, | ||
167 | methods: { | 215 | methods: { |
168 | updateFile(id) { | 216 | trapClick(type, id) { |
169 | this.currentFileIndex = id | 217 | this.currentFileIndex = this.fileList.findIndex(item => item.id === id) |
218 | switch (type) { | ||
219 | case 1: | ||
220 | break | ||
221 | case 2: | ||
222 | this.previewFile() | ||
223 | break | ||
224 | case 3: | ||
225 | this.deleteFile() | ||
226 | break | ||
227 | } | ||
170 | }, | 228 | }, |
171 | async onChange(file, fileList) { | 229 | async onChange(file) { |
172 | if (file.raw.type !== 'application/pdf') { | 230 | if (file.raw.type !== 'application/pdf') { |
173 | this.$message.error('支持文件为pdf根式') | 231 | this.$message.error('支持文件为pdf根式') |
174 | return | 232 | return |
... | @@ -177,7 +235,7 @@ export default { | ... | @@ -177,7 +235,7 @@ export default { |
177 | await this.uploadConfirm() | 235 | await this.uploadConfirm() |
178 | } | 236 | } |
179 | this.fileList[this.currentFileIndex].name = file.name | 237 | this.fileList[this.currentFileIndex].name = file.name |
180 | this.fileList[this.currentFileIndex].file = file | 238 | this.fileList[this.currentFileIndex].file = file.raw |
181 | }, | 239 | }, |
182 | uploadConfirm() { | 240 | uploadConfirm() { |
183 | return new Promise((resolve, reject) => { | 241 | return new Promise((resolve, reject) => { |
... | @@ -192,11 +250,11 @@ export default { | ... | @@ -192,11 +250,11 @@ export default { |
192 | .catch(e => {}) | 250 | .catch(e => {}) |
193 | }) | 251 | }) |
194 | }, | 252 | }, |
195 | previewFile(id) { | 253 | previewFile() { |
196 | if (!this.fileList[id].file) { | 254 | if (!this.fileList[this.currentFileIndex].file) { |
197 | return | 255 | return |
198 | } | 256 | } |
199 | const file = this.fileList[id].file.raw | 257 | const file = this.fileList[this.currentFileIndex].file.raw |
200 | const myBlob = new Blob([file], { | 258 | const myBlob = new Blob([file], { |
201 | type: 'application/pdf' | 259 | type: 'application/pdf' |
202 | }) | 260 | }) |
... | @@ -210,8 +268,8 @@ export default { | ... | @@ -210,8 +268,8 @@ export default { |
210 | link.remove() | 268 | link.remove() |
211 | URL.revokeObjectURL(link.href) | 269 | URL.revokeObjectURL(link.href) |
212 | }, | 270 | }, |
213 | async deleteFile(id) { | 271 | async deleteFile() { |
214 | if (!this.fileList[id].name) { | 272 | if (!this.fileList[this.currentFileIndex].name) { |
215 | return | 273 | return |
216 | } | 274 | } |
217 | await this.deleteConfirm() | 275 | await this.deleteConfirm() |
... | @@ -236,6 +294,51 @@ export default { | ... | @@ -236,6 +294,51 @@ export default { |
236 | link.href = this.productLink | 294 | link.href = this.productLink |
237 | link.target = '_blank' | 295 | link.target = '_blank' |
238 | link.click() | 296 | link.click() |
297 | }, | ||
298 | submit() { | ||
299 | this.$refs.form.validate(valid => { | ||
300 | if (valid) { | ||
301 | this.editOrAdd() | ||
302 | } else { | ||
303 | return false | ||
304 | } | ||
305 | }) | ||
306 | }, | ||
307 | async editOrAdd() { | ||
308 | const formData = this.constructorFormData() | ||
309 | if (this.idAndCode.code) { | ||
310 | productEdit() | ||
311 | } else { | ||
312 | const res = await productAdd(formData) | ||
313 | debugger | ||
314 | } | ||
315 | }, | ||
316 | constructorFormData() { | ||
317 | const formData = new FormData() | ||
318 | for (const key in this.form) { | ||
319 | if (key === 'channel') { | ||
320 | formData.append(key, this.form[key].join()) | ||
321 | } else { | ||
322 | formData.append(key, this.form[key]) | ||
323 | } | ||
324 | } | ||
325 | |||
326 | this.fileList.forEach(item => { | ||
327 | if (item.name) { | ||
328 | formData.append(`file${item.id}`, item.file) | ||
329 | } | ||
330 | }) | ||
331 | |||
332 | formData.append('link', this.productLink) | ||
333 | |||
334 | return formData | ||
335 | }, | ||
336 | async handleProductDetail() { | ||
337 | const res = await productDetail({ | ||
338 | id: this.idAndCode.id, | ||
339 | code: this.idAndCode.code | ||
340 | }) | ||
341 | debugger | ||
239 | } | 342 | } |
240 | } | 343 | } |
241 | } | 344 | } | ... | ... |
... | @@ -2,10 +2,19 @@ | ... | @@ -2,10 +2,19 @@ |
2 | <Card> | 2 | <Card> |
3 | <div> | 3 | <div> |
4 | <el-form class="count-form" ref="form" size="mini" inline :model="form"> | 4 | <el-form class="count-form" ref="form" size="mini" inline :model="form"> |
5 | <el-form-item label="查询条件"> | 5 | <el-form-item label="产品名称"> |
6 | <el-input | 6 | <el-input |
7 | v-model.trim="form.product" | 7 | v-model.trim="form.name" |
8 | placeholder="产品名称/产品编号" | 8 | placeholder="请输入产品名称" |
9 | :maxlength="inputMaxLength" | ||
10 | > | ||
11 | <i slot="prefix" class="el-icon-search"></i | ||
12 | ></el-input> | ||
13 | </el-form-item> | ||
14 | <el-form-item label="产品编号"> | ||
15 | <el-input | ||
16 | v-model.trim="form.code" | ||
17 | placeholder="请输入产品编号" | ||
9 | :maxlength="inputMaxLength" | 18 | :maxlength="inputMaxLength" |
10 | > | 19 | > |
11 | <i slot="prefix" class="el-icon-search"></i | 20 | <i slot="prefix" class="el-icon-search"></i |
... | @@ -22,9 +31,9 @@ | ... | @@ -22,9 +31,9 @@ |
22 | </el-select> | 31 | </el-select> |
23 | </el-form-item> | 32 | </el-form-item> |
24 | <el-form-item label="险别"> | 33 | <el-form-item label="险别"> |
25 | <el-select v-model="form.insurance"> | 34 | <el-select v-model="form.risk"> |
26 | <el-option | 35 | <el-option |
27 | v-for="(item, index) of insuranceTypes" | 36 | v-for="(item, index) of riskTypes" |
28 | :key="`option-${index}`" | 37 | :key="`option-${index}`" |
29 | :label="item.label" | 38 | :label="item.label" |
30 | :value="item.value" | 39 | :value="item.value" |
... | @@ -32,7 +41,7 @@ | ... | @@ -32,7 +41,7 @@ |
32 | </el-select> | 41 | </el-select> |
33 | </el-form-item> | 42 | </el-form-item> |
34 | <el-form-item label="上架状态"> | 43 | <el-form-item label="上架状态"> |
35 | <el-select v-model="form.shelf"> | 44 | <el-select v-model="form.ifShelve"> |
36 | <el-option | 45 | <el-option |
37 | v-for="(item, index) of shelfType" | 46 | v-for="(item, index) of shelfType" |
38 | :key="`option-${index}`" | 47 | :key="`option-${index}`" |
... | @@ -68,7 +77,7 @@ | ... | @@ -68,7 +77,7 @@ |
68 | v-loading="loading" | 77 | v-loading="loading" |
69 | > | 78 | > |
70 | <el-table-column | 79 | <el-table-column |
71 | prop="index" | 80 | prop="code" |
72 | align="center" | 81 | align="center" |
73 | label="产品编号" | 82 | label="产品编号" |
74 | fixed | 83 | fixed |
... | @@ -79,154 +88,181 @@ | ... | @@ -79,154 +88,181 @@ |
79 | align="center" | 88 | align="center" |
80 | label="产品名称" | 89 | label="产品名称" |
81 | ></el-table-column> | 90 | ></el-table-column> |
82 | <el-table-column | 91 | <el-table-column align="center" label="更新时间" width="160"> |
83 | prop="updateTime" | 92 | <template slot-scope="scope"> |
84 | align="center" | 93 | <span>{{ parseTime(scope.row.updateTime) }}</span> |
85 | label="更新时间" | 94 | </template> |
86 | ></el-table-column> | 95 | </el-table-column> |
87 | <el-table-column | 96 | <el-table-column align="center" label="产品类型"> |
88 | prop="prodType" | 97 | <template slot-scope="scope"> |
89 | align="center" | 98 | {{ transformTarget(productTypes, scope.row.type).label }} |
90 | label="产品类型" | 99 | </template> |
91 | ></el-table-column> | 100 | </el-table-column> |
92 | <el-table-column | 101 | <el-table-column align="center" label="险别"> |
93 | prop="insurance" | 102 | <template slot-scope="scope"> |
94 | align="center" | 103 | {{ transformTarget(riskTypes, scope.row.risk).label }} |
95 | label="险别" | 104 | </template> |
96 | ></el-table-column> | 105 | </el-table-column> |
97 | <el-table-column | 106 | <el-table-column align="center" label="产品渠道"> |
98 | prop="channel" | 107 | <template slot-scope="scope"> |
99 | align="center" | 108 | <div |
100 | label="产品渠道" | 109 | v-for="item of transformChanel(scope.row.channel)" |
101 | ></el-table-column> | 110 | :key="item.value" |
102 | <el-table-column | 111 | > |
103 | prop="index" | 112 | {{ item.label }} |
104 | align="center" | 113 | </div> |
105 | label="文件类型" | 114 | </template> |
106 | ></el-table-column> | 115 | </el-table-column> |
107 | <el-table-column | 116 | <el-table-column align="center" label="文件类型"> |
108 | prop="status" | 117 | <template slot-scope="scope"> |
109 | align="center" | 118 | <div |
110 | label="上架状态" | 119 | v-for="item of transformFile(scope.row.materialType)" |
111 | ></el-table-column> | 120 | :key="item.id" |
121 | > | ||
122 | {{ item.type }} | ||
123 | </div> | ||
124 | </template> | ||
125 | </el-table-column> | ||
126 | <el-table-column prop="ifShelve" align="center" label="上架状态"> | ||
127 | <template slot-scope="scope"> | ||
128 | {{ scope.row.ifShelve === 0 ? '未上架' : '上架' }} | ||
129 | </template> | ||
130 | </el-table-column> | ||
112 | <el-table-column align="center" label="操作" fixed="right" width="130"> | 131 | <el-table-column align="center" label="操作" fixed="right" width="130"> |
113 | <template slot-scope="scope"> | 132 | <template slot-scope="scope"> |
114 | <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button> | 133 | <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button> |
115 | <el-button type="text" @click="putOnShelf">上架</el-button> | 134 | <el-button type="text" @click="putOnShelf">{{ |
135 | scope.row.ifShelve === 0 ? '上架' : '下架' | ||
136 | }}</el-button> | ||
116 | </template> | 137 | </template> |
117 | </el-table-column> | 138 | </el-table-column> |
118 | </el-table> | 139 | </el-table> |
119 | <FooterPaginationfrom :pagination="pagination"></FooterPaginationfrom> | 140 | <FooterPagination :pagination="pagination"></FooterPagination> |
120 | </Card> | 141 | </Card> |
121 | </template> | 142 | </template> |
122 | 143 | ||
123 | <script> | 144 | <script> |
124 | import { inputMaxLength } from '@/utils/mappingData' | 145 | import { |
125 | import FooterPaginationfrom from './components/FooterPagination' | 146 | inputMaxLength, |
126 | 147 | productTypes, | |
127 | const productTypes = [ | 148 | riskTypes, |
128 | { | 149 | shelfType, |
129 | label: '全部', | 150 | productChannel, |
130 | value: '' | 151 | fileList |
131 | }, | 152 | } from '@/utils/mappingData' |
132 | { | 153 | import FooterPagination from './components/FooterPagination' |
133 | label: '团险', | 154 | import { getProductList } from '@/api/productInforManagement' |
134 | value: '1' | 155 | import { parseTime } from '@/utils/util' |
135 | } | ||
136 | ] | ||
137 | const insuranceTypes = [ | ||
138 | { | ||
139 | label: '全部', | ||
140 | value: '' | ||
141 | }, | ||
142 | { | ||
143 | label: '主险', | ||
144 | value: '1' | ||
145 | }, | ||
146 | { | ||
147 | label: '附加险', | ||
148 | value: '2' | ||
149 | } | ||
150 | ] | ||
151 | const shelfType = [ | ||
152 | { | ||
153 | label: '全部', | ||
154 | value: '' | ||
155 | }, | ||
156 | { | ||
157 | label: '未上架', | ||
158 | value: '1' | ||
159 | }, | ||
160 | { | ||
161 | label: '上架', | ||
162 | value: '2' | ||
163 | } | ||
164 | ] | ||
165 | 156 | ||
166 | const productChannel = [ | ||
167 | { | ||
168 | label: '全部', | ||
169 | value: '' | ||
170 | }, | ||
171 | { | ||
172 | label: '产品说明书', | ||
173 | value: '1' | ||
174 | }, | ||
175 | { | ||
176 | label: '产品条款', | ||
177 | value: '2' | ||
178 | }, | ||
179 | { | ||
180 | label: '免责条款', | ||
181 | value: '3' | ||
182 | }, | ||
183 | { | ||
184 | label: '产品投保链接', | ||
185 | value: '4' | ||
186 | } | ||
187 | ] | ||
188 | export default { | 157 | export default { |
189 | components: { | 158 | components: { |
190 | FooterPaginationfrom | 159 | FooterPagination |
191 | }, | 160 | }, |
192 | data() { | 161 | data() { |
193 | return { | 162 | return { |
163 | parseTime, | ||
194 | inputMaxLength, | 164 | inputMaxLength, |
195 | productTypes, | 165 | productTypes, |
196 | insuranceTypes, | 166 | riskTypes, |
197 | shelfType, | 167 | shelfType, |
198 | productChannel, | 168 | productChannel, |
199 | form: { | 169 | form: { |
200 | product: '', | 170 | name: '', // 产品名称 |
201 | type: '', | 171 | code: '', // 产品编号 |
202 | insurance: '', | 172 | type: '', // 产品类型 |
203 | shelf: '', | 173 | risk: '', // 险别 |
204 | channel: '' | 174 | ifShelve: '', // 上架状态 |
175 | channel: '' // 渠道 | ||
205 | }, | 176 | }, |
206 | pagination: { size: 10, total: 0, page: 1 }, | 177 | pagination: { size: 10, total: 0, page: 1 }, |
207 | tableData: [{}], | 178 | tableData: [], |
208 | loading: false | 179 | loading: false |
209 | } | 180 | } |
210 | }, | 181 | }, |
182 | watch: { | ||
183 | 'pagination.size'() { | ||
184 | this.handleGetProductList() | ||
185 | }, | ||
186 | 'pagination.page'() { | ||
187 | this.handleGetProductList() | ||
188 | } | ||
189 | }, | ||
190 | mounted() { | ||
191 | this.handleGetProductList() | ||
192 | }, | ||
211 | methods: { | 193 | methods: { |
212 | editOrAdd(row) { | 194 | editOrAdd(row) { |
213 | if (row) { | 195 | const url = { |
214 | } | ||
215 | this.$router.push({ | ||
216 | path: 'edit-product' | 196 | path: 'edit-product' |
217 | }) | 197 | } |
198 | if (row.id && row.code) { | ||
199 | const { id, code } = row | ||
200 | url.query = { id, code } | ||
201 | } | ||
202 | this.$router.push(url) | ||
203 | }, | ||
204 | submit() { | ||
205 | if (this.pagination.page === 1) { | ||
206 | this.handleGetProductList() | ||
207 | } else { | ||
208 | this.pagination.page = 1 | ||
209 | } | ||
218 | }, | 210 | }, |
219 | submit() {}, | ||
220 | onReset() { | 211 | onReset() { |
221 | this.form = { | 212 | this.form = { |
222 | product: '', | 213 | name: '', |
214 | code: '', | ||
223 | type: '', | 215 | type: '', |
224 | insurance: '', | 216 | risk: '', |
225 | shelf: '', | 217 | ifShelve: '', |
226 | channel: '' | 218 | channel: '' |
227 | } | 219 | } |
220 | this.submit() | ||
221 | }, | ||
222 | putOnShelf() {}, | ||
223 | async handleGetProductList() { | ||
224 | try { | ||
225 | this.loading = true | ||
226 | const { | ||
227 | result: { data, totalCount } | ||
228 | } = await getProductList({ | ||
229 | currPage: this.pagination.page, | ||
230 | perPage: this.pagination.size, | ||
231 | name: this.form.name, | ||
232 | type: this.form.type, | ||
233 | code: this.form.code, | ||
234 | risk: this.form.risk, | ||
235 | channel: this.form.channel, | ||
236 | ifShelve: this.form.ifShelve | ||
237 | }) | ||
238 | this.pagination.total = totalCount | ||
239 | this.tableData = data | ||
240 | } catch (error) { | ||
241 | console.log(error) | ||
242 | } finally { | ||
243 | this.loading = false | ||
244 | } | ||
228 | }, | 245 | }, |
229 | putOnShelf() {} | 246 | transformTarget(arr, value) { |
247 | return arr.find(item => item.value === value) | ||
248 | }, | ||
249 | transformFile(value) { | ||
250 | if (!value) { | ||
251 | return [{ id: '', type: '' }] | ||
252 | } | ||
253 | const arr = value.split(',') | ||
254 | const res = arr.map(item => { | ||
255 | return fileList.find(file => file.id === item - 0) | ||
256 | }) | ||
257 | return res | ||
258 | }, | ||
259 | transformChanel(value) { | ||
260 | const arr = value.split(',') | ||
261 | const res = arr.map(item => { | ||
262 | return productChannel.find(chan => chan.value === item - 0) | ||
263 | }) | ||
264 | return res | ||
265 | } | ||
230 | } | 266 | } |
231 | } | 267 | } |
232 | </script> | 268 | </script> | ... | ... |
-
Please register or sign in to post a comment