Skip to content

liuzhen@situdata.com / yunxiao-admin-fe

Go to a project
Toggle navigation
Toggle navigation pinning
cfc77b88 by zhen
Options

产品资料管理以及详情完成

1 parent 17ad961a
Inline Side-by-side
Showing 6 changed files with 531 additions and 11 deletions
.env.development
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
2 ENV = 'development' 2 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 = 'https://beta-salecloud-hengan.situdata.com'
......
src/base.scss
...@@ -63,3 +63,8 @@ h6 { ...@@ -63,3 +63,8 @@ h6 {
63 .login-form-bg { 63 .login-form-bg {
64 background: center / cover no-repeat url('./assets/image/login-form-bg.png'); 64 background: center / cover no-repeat url('./assets/image/login-form-bg.png');
65 } 65 }
66 // 向右浮动
67 .flex-end {
68 display: flex;
69 justify-content: flex-end;
70 }
......
src/router/index.js
...@@ -48,15 +48,18 @@ export const constantRoutes = [ ...@@ -48,15 +48,18 @@ export const constantRoutes = [
48 path: '/', 48 path: '/',
49 component: Layout, 49 component: Layout,
50 redirect: '/monitor', 50 redirect: '/monitor',
51 meta: {}, 51 meta: {
52 title: '资源监控',
53 icon: 'home'
54 },
52 children: [ 55 children: [
53 { 56 {
54 path: 'monitor', 57 path: 'monitor',
55 name: 'monitor', 58 name: 'monitor',
56 component: () => import('@/views/monitor'), 59 component: () => import('@/views/monitor'),
57 meta: { 60 meta: {
58 title: '资源监控', 61 title: '展业资料',
59 icon: 'home' 62 icon: 'report'
60 } 63 }
61 }, 64 },
62 { 65 {
...@@ -65,10 +68,28 @@ export const constantRoutes = [ ...@@ -65,10 +68,28 @@ export const constantRoutes = [
65 hidden: true, 68 hidden: true,
66 component: () => import('@/views/monitorDetails'), 69 component: () => import('@/views/monitorDetails'),
67 meta: { 70 meta: {
68 title: '远程订单详情', 71 title: '远程订单详情'
69 icon: 'home'
70 }, 72 },
71 props: route => ({ custInfo: route.query }) 73 props: route => ({ custInfo: route.query })
74 },
75 {
76 path: 'product-infor-management',
77 name: 'product-infor-management',
78 component: () => import('@/views/productInforManagement'),
79 meta: {
80 title: '产品资料管理',
81 icon: 'report'
82 }
83 },
84 {
85 path: 'edit-product',
86 name: 'edit-product',
87 hidden: true,
88 component: () => import('@/views/editProduct'),
89 meta: {
90 title: '新增产品',
91 icon: 'report'
92 }
72 } 93 }
73 ] 94 ]
74 } 95 }
......
src/views/editProduct.vue 0 → 100644
1 <template>
2 <Card>
3 <h4 class="mb10">产品基本属性</h4>
4 <el-form class="count-form" ref="form" size="mini" inline :model="form">
5 <div>
6 <el-form-item label="产品名称">
7 <el-input
8 v-model.trim="form.name"
9 placeholder="请输入产品名称"
10 :maxlength="inputMaxLength"
11 >
12 </el-input>
13 </el-form-item>
14 <el-form-item label="产品类型">
15 <el-select v-model="form.type">
16 <el-option
17 v-for="(item, index) of productTypes"
18 :key="`option-${index}`"
19 :label="item.label"
20 :value="item.value"
21 ></el-option>
22 </el-select>
23 </el-form-item>
24 <el-form-item label="产品编号">
25 <el-input
26 v-model.trim="form.id"
27 placeholder="请输入产品编号"
28 :maxlength="inputMaxLength"
29 >
30 </el-input>
31 </el-form-item>
32 <el-form-item label="险别">
33 <el-select v-model="form.insurance">
34 <el-option
35 v-for="(item, index) of insuranceTypes"
36 :key="`option-${index}`"
37 :label="item.label"
38 :value="item.value"
39 ></el-option>
40 </el-select>
41 </el-form-item>
42 </div>
43 <el-form-item label="产品渠道">
44 <el-checkbox-group v-model="form.channel">
45 <el-checkbox label="选项一"></el-checkbox>
46 <el-checkbox label="选项二"></el-checkbox>
47 <el-checkbox label="选项三"></el-checkbox>
48 <el-checkbox label="选项四"></el-checkbox>
49 </el-checkbox-group>
50 </el-form-item>
51 </el-form>
52 <h4 class="mb10">产品资料</h4>
53 <div class="title mb10">
54 上传资料列表
55 <span class="tips">支持扩展名.pdf</span>
56 </div>
57 <el-table class="mb10" style="width: 500px" border :data="fileList">
58 <el-table-column
59 prop="type"
60 align="center"
61 label="资料"
62 width="120"
63 ></el-table-column>
64 <el-table-column
65 prop="name"
66 align="center"
67 width="200"
68 label="资料名称"
69 ></el-table-column>
70 <el-table-column align="center" label="操作">
71 <template slot-scope="scope">
72 <div class="custom-cell">
73 <el-upload
74 ref="upload"
75 style="margin-right:10px"
76 action="#"
77 accept=".pdf"
78 :show-file-list="false"
79 :auto-upload="false"
80 :on-change="onChange"
81 >
82 <el-button type="text" @click="updateFile(scope.row.id)"
83 >上传</el-button
84 >
85 </el-upload>
86 <el-button type="text" @click="previewFile(scope.row.id)"
87 >预览</el-button
88 >
89 <el-button type="text" @click="deleteFile(scope.row.id)"
90 >删除</el-button
91 >
92 </div>
93 </template>
94 </el-table-column>
95 </el-table>
96 <div class="title">
97 产品链接<el-button type="text" style="margin-left:20px" @click="previewLink">预览</el-button>
98 </div>
99 <el-input
100 class="mb10"
101 type="textarea"
102 :rows="5"
103 style="width:500px"
104 v-model="productLink"
105 ></el-input>
106 <div class="bottom">
107 <el-button type="primary">提交</el-button>
108 </div>
109 </Card>
110 </template>
111
112 <script>
113 import { inputMaxLength } from '@/utils/mappingData'
114 const productTypes = [
115 {
116 label: '团险',
117 value: '1'
118 }
119 ]
120 const insuranceTypes = [
121 {
122 label: '主险',
123 value: '1'
124 },
125 {
126 label: '附加险',
127 value: '2'
128 }
129 ]
130 export default {
131 data() {
132 return {
133 inputMaxLength,
134 productTypes,
135 insuranceTypes,
136 form: {
137 name: '',
138 type: '',
139 id: '',
140 insurance: '',
141 channel: ''
142 },
143 fileList: [
144 {
145 id: 0,
146 type: '产品条款',
147 name: null,
148 file: null
149 },
150 {
151 id: 1,
152 type: '产品说明书',
153 name: null,
154 file: null
155 },
156 {
157 id: 2,
158 type: '免责条款',
159 name: null,
160 file: null
161 }
162 ],
163 currentFileIndex: 0,
164 productLink: ''
165 }
166 },
167 methods: {
168 updateFile(id) {
169 this.currentFileIndex = id
170 },
171 async onChange(file, fileList) {
172 if (file.raw.type !== 'application/pdf') {
173 this.$message.error('支持文件为pdf根式')
174 return
175 }
176 if (this.fileList[this.currentFileIndex].name) {
177 await this.uploadConfirm()
178 }
179 this.fileList[this.currentFileIndex].name = file.name
180 this.fileList[this.currentFileIndex].file = file
181 },
182 uploadConfirm() {
183 return new Promise((resolve, reject) => {
184 this.$confirm('是否覆盖产品信息', {
185 confirmButtonText: '确定',
186 cancelButtonText: '取消',
187 type: 'warning'
188 })
189 .then(() => {
190 resolve()
191 })
192 .catch(e => {})
193 })
194 },
195 previewFile(id) {
196 if (!this.fileList[id].file) {
197 return
198 }
199 const file = this.fileList[id].file.raw
200 const myBlob = new Blob([file], {
201 type: 'application/pdf'
202 })
203 this.download(myBlob)
204 },
205 download(blob) {
206 const link = document.createElement('a')
207 link.href = URL.createObjectURL(blob)
208 link.target = '_blank'
209 link.click()
210 link.remove()
211 URL.revokeObjectURL(link.href)
212 },
213 async deleteFile(id) {
214 if (!this.fileList[id].name) {
215 return
216 }
217 await this.deleteConfirm()
218 this.fileList[this.currentFileIndex].name = null
219 this.fileList[this.currentFileIndex].file = null
220 },
221 deleteConfirm() {
222 return new Promise((resolve, reject) => {
223 this.$confirm('是否确定删除文件', {
224 confirmButtonText: '确定',
225 cancelButtonText: '取消',
226 type: 'warning'
227 })
228 .then(() => {
229 resolve()
230 })
231 .catch(e => {})
232 })
233 },
234 previewLink() {
235 const link = document.createElement('a')
236 link.href = this.productLink
237 link.target = '_blank'
238 link.click()
239 }
240 }
241 }
242 </script>
243
244 <style lang="scss" scoped>
245 .title {
246 font-size: 14px;
247 color: #606266;
248 margin-left: 20px;
249 .tips {
250 margin-left: 20px;
251 color: #9a9b9e;
252 display: inline-block;
253 }
254 }
255 .bottom {
256 display: flex;
257 justify-content: center;
258 align-items: center;
259 }
260 .custom-cell {
261 display: flex;
262 justify-content: center;
263 }
264 </style>
src/views/monitor.vue
...@@ -213,8 +213,4 @@ export default { ...@@ -213,8 +213,4 @@ export default {
213 background-color: #ffaa00; 213 background-color: #ffaa00;
214 } 214 }
215 } 215 }
216 .flex-end {
217 display: flex;
218 justify-content: flex-end;
219 }
220 </style> 216 </style>
......
src/views/productInforManagement.vue 0 → 100644
1 <template>
2 <Card>
3 <div>
4 <el-form class="count-form" ref="form" size="mini" inline :model="form">
5 <el-form-item label="查询条件">
6 <el-input
7 v-model.trim="form.product"
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-select v-model="form.type">
16 <el-option
17 v-for="(item, index) of productTypes"
18 :key="`option-${index}`"
19 :label="item.label"
20 :value="item.value"
21 ></el-option>
22 </el-select>
23 </el-form-item>
24 <el-form-item label="险别">
25 <el-select v-model="form.insurance">
26 <el-option
27 v-for="(item, index) of insuranceTypes"
28 :key="`option-${index}`"
29 :label="item.label"
30 :value="item.value"
31 ></el-option>
32 </el-select>
33 </el-form-item>
34 <el-form-item label="上架状态">
35 <el-select v-model="form.shelf">
36 <el-option
37 v-for="(item, index) of shelfType"
38 :key="`option-${index}`"
39 :label="item.label"
40 :value="item.value"
41 ></el-option>
42 </el-select>
43 </el-form-item>
44 <el-form-item label="产品渠道">
45 <el-select v-model="form.channel">
46 <el-option
47 v-for="(item, index) of productChannel"
48 :key="`option-${index}`"
49 :label="item.label"
50 :value="item.value"
51 ></el-option>
52 </el-select>
53 </el-form-item>
54 </el-form>
55 </div>
56 <div class="flex-end mb10">
57 <el-button type="primary" size="mini" @click="submit">查询</el-button>
58 <el-button size="mini" @click="onReset">重置</el-button>
59 <el-button size="mini" type="primary" plain @click="editOrAdd"
60 >添加产品</el-button
61 >
62 </div>
63 <el-table
64 class="mb10"
65 :data="tableData"
66 border
67 style="width: 100%"
68 v-loading="loading"
69 >
70 <el-table-column
71 prop="index"
72 align="center"
73 label="产品编号"
74 fixed
75 width="90"
76 ></el-table-column>
77 <el-table-column
78 prop="name"
79 align="center"
80 label="产品名称"
81 ></el-table-column>
82 <el-table-column
83 prop="updateTime"
84 align="center"
85 label="更新时间"
86 ></el-table-column>
87 <el-table-column
88 prop="prodType"
89 align="center"
90 label="产品类型"
91 ></el-table-column>
92 <el-table-column
93 prop="insurance"
94 align="center"
95 label="险别"
96 ></el-table-column>
97 <el-table-column
98 prop="channel"
99 align="center"
100 label="产品渠道"
101 ></el-table-column>
102 <el-table-column
103 prop="index"
104 align="center"
105 label="文件类型"
106 ></el-table-column>
107 <el-table-column
108 prop="status"
109 align="center"
110 label="上架状态"
111 ></el-table-column>
112 <el-table-column align="center" label="操作" fixed="right" width="130">
113 <template slot-scope="scope">
114 <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button>
115 <el-button type="text" @click="putOnShelf">上架</el-button>
116 </template>
117 </el-table-column>
118 </el-table>
119 <FooterPaginationfrom :pagination="pagination"></FooterPaginationfrom>
120 </Card>
121 </template>
122
123 <script>
124 import { inputMaxLength } from '@/utils/mappingData'
125 import FooterPaginationfrom from './components/FooterPagination'
126
127 const productTypes = [
128 {
129 label: '全部',
130 value: ''
131 },
132 {
133 label: '团险',
134 value: '1'
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
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 {
189 components: {
190 FooterPaginationfrom
191 },
192 data() {
193 return {
194 inputMaxLength,
195 productTypes,
196 insuranceTypes,
197 shelfType,
198 productChannel,
199 form: {
200 product: '',
201 type: '',
202 insurance: '',
203 shelf: '',
204 channel: ''
205 },
206 pagination: { size: 10, total: 0, page: 1 },
207 tableData: [{}],
208 loading: false
209 }
210 },
211 methods: {
212 editOrAdd(row) {
213 if (row) {
214 }
215 this.$router.push({
216 path: 'edit-product'
217 })
218 },
219 submit() {},
220 onReset() {
221 this.form = {
222 product: '',
223 type: '',
224 insurance: '',
225 shelf: '',
226 channel: ''
227 }
228 },
229 putOnShelf() {}
230 }
231 }
232 </script>
233
234 <style lang="scss" scoped></style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!