Skip to content

Commit 363710c

Browse files
author
lifanyu
committed
添加审核模板
1 parent f8c9be2 commit 363710c

File tree

13 files changed

+1451
-3
lines changed

13 files changed

+1451
-3
lines changed

‎src/mock/app/menu-list.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ module.exports = {
3232
"template": "template-curd"
3333
}
3434
]
35+
},
36+
{
37+
"label": "Audit",
38+
"path": "/audit",
39+
"submenu": [
40+
{
41+
"label": "Total Config",
42+
"path": "/audit/total",
43+
"template": "template-audit"
44+
},
45+
{
46+
"label": "Audit Edit",
47+
"path": "/audit/edit",
48+
"template": "template-audit"
49+
}
50+
]
3551
}
3652
]
3753
}

‎src/router/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ const templateToComponent = {
1616
"template-curd": () =>
1717
import(/* webpackChunkName: "data-report" */ "../template/curd"),
1818
"template-data-report": () =>
19-
import(/* webpackChunkName: "curd" */ "../template/data-report")
19+
import(/* webpackChunkName: "curd" */ "../template/data-report"),
20+
"template-audit": () =>
21+
import(/* webpackChunkName: "audit" */ "../template/audit")
2022
};
2123

2224
/**

‎src/store/module/page.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,21 @@
22
* @file 页面状态
33
* @author wangbing11(wangbing11@baidu.com)
44
*/
5-
5+
import {keyToLabel} from '../../template/audit/mock/keyToLabel';
6+
import {keyList} from '../../template/audit/mock/keyList';
67
/* eslint-disable no-param-reassign */
78
export default {
89
state: {
9-
pagePath: ""
10+
pagePath: "",
11+
keyToLabel: "",
12+
keyList: ""
1013
},
1114
mutations: {
1215
setPagePath(state, pagePath) {
16+
console.log(pagePath);
1317
state.pagePath = pagePath;
18+
state.keyToLabel = keyToLabel[pagePath];
19+
state.keyList = keyList[pagePath];
1420
}
1521
}
1622
};

‎src/template/audit/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import index from './index.vue';
2+
3+
export default index;

‎src/template/audit/index.vue‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
<template>
2+
<div class="audit-detail-example-demo">
3+
<!-- <div class="go-back" v-if="pageConfig.pageGoBackUrl">
4+
<Button type="primary" @click="$router.push(pageConfig.pageGoBackUrl)">返回</Button>
5+
</div> -->
6+
<!-- <DetailSteps class="ivu-steps">
7+
</DetailSteps> -->
8+
<div
9+
v-for="config in pageConfig.tableList"
10+
:key="config.title"
11+
class="audit-detail-example-demo-section"
12+
>
13+
<h3 class="audit-detail-example-demo-header">
14+
{{ config.title }}
15+
</h3>
16+
<div class="audit-detail-example-demo-tool-bar">
17+
<a :href="downLoadUrl" v-if="downLoadUrl && config.needShowDownLoadButton">下载全部</a>
18+
</div>
19+
<Table
20+
:class="[config.changeFormStyle ? 'audit-detail-example-demo-table audit-detail-example-demo-form'
21+
: 'audit-detail-example-demo-table']"
22+
:columns="config.table.columns"
23+
:data="config.table.data"
24+
:show-header="config.showTableHeader"
25+
v-if="config.type==='table'"
26+
>
27+
<template
28+
v-for="column in config.table.columns"
29+
:slot="column.slot"
30+
:ref="column.slot"
31+
slot-scope="{ row, index }"
32+
>
33+
<div v-if="column.htmlKey" :key="column.slot">
34+
<div v-if="row.key===config.htmlKey">
35+
<a class="download-wrapper" :href="item.url" v-for="(item, key) in row.value" :key="key">
36+
{{item.name}}</a>
37+
</div>
38+
<div v-else>{{row.value}}</div>
39+
</div>
40+
<Form
41+
v-if="!row.hideForm && column.formFields
42+
? (config.hideFormKey ? config.hideFormKey === row.key : true) : false"
43+
:key="column.slot"
44+
:ref="column.slot + row.key"
45+
:model="row"
46+
>
47+
<!-- column.slot + row.key. eg: 'imgList' + 'action' or 'action' + 'name' -->
48+
<FieldGenerator
49+
v-for="(field, i) in column.formFields"
50+
:key="i"
51+
:field="field"
52+
@on-field-change="handleFieldChange($event, row, column.slot + row.key)"
53+
@on-button-event="handleButtonEvent($event, row, index)"
54+
@on-list-item-click="handleListItemClick"
55+
/>
56+
</Form>
57+
</template>
58+
</Table>
59+
</div>
60+
<div class="audit-detail-example-footer-actions" v-if="pageConfig.showButton && pageData.isCheck">
61+
<Button type="primary" @click="handleSave(pageConfig.formVaildAction)">提交保存</Button>
62+
</div>
63+
<Modal v-model="modalOpen" :width="800">
64+
<img
65+
class="audit-detail-example-demo-modal-img"
66+
:src="modalImgUrl"
67+
alt=""
68+
>
69+
</Modal>
70+
<Modal
71+
v-model="dialogShow"
72+
:title="dialogsConfig.title"
73+
>
74+
<div>{{dialogsConfig.content}}</div>
75+
<div slot="footer">
76+
<Button type="text" size="large" @click="cancel">取消</Button>
77+
<Button type="primary" size="large" @click="confirm(submitApi)">确定</Button>
78+
</div>
79+
</Modal>
80+
</div>
81+
</template>
82+
<script>
83+
/* eslint-disable no-console */
84+
import {mapState} from 'vuex';
85+
import axios from '../../libs/api.request';
86+
87+
export default {
88+
data() {
89+
return {
90+
formModel: {},
91+
modalOpen: false,
92+
modalImgUrl: '',
93+
model: {
94+
step: 2
95+
},
96+
dialogShow: false,
97+
dialogTitle: '',
98+
dialogContent: '',
99+
dialogContentType: '',
100+
formData: {},
101+
dialogFooterHide: false,
102+
isChange: false,
103+
dilogsOpen: {},
104+
dilogsModel: {},
105+
pageData: {
106+
isCheck: true
107+
},
108+
downLoadUrl: '',
109+
pageConfig: {}
110+
};
111+
},
112+
computed: {
113+
pageRequestInfo() {
114+
return this.pageConfig && this.pageConfig.request;
115+
},
116+
...mapState({
117+
keyToLabel: state => state.page.keyToLabel,
118+
pagePath: state => state.page.pagePath,
119+
keyList: state => state.page.keyList
120+
}),
121+
submitApi() {
122+
return this.pageConfig.submitApi && this.pageConfig.submitApi;
123+
},
124+
dialogsConfig() {
125+
return this.pageConfig.dialogs || {};
126+
},
127+
needDealUploadData() {
128+
return this.pageConfig.needDealUploadData || false;
129+
}
130+
},
131+
watch: {
132+
pagePath() {
133+
this.getPageConfig();
134+
}
135+
},
136+
mounted() {
137+
this.getPageConfig();
138+
},
139+
methods: {
140+
getPageConfig() {
141+
axios
142+
.request({
143+
url: `/api${this.pagePath}/page-config`,
144+
method: "get",
145+
params: {
146+
pagePath: this.pagePath
147+
}
148+
})
149+
.then(res => {
150+
this.pageConfig = res.data;
151+
this.getPageDetail();
152+
});
153+
},
154+
handleButtonEvent($event, row, index) {
155+
const {name} = $event;
156+
if (/dialog-/.test(name)) {
157+
const dialogName = name.replace(/dialog-/, '');
158+
this.$set(this.dilogsOpen, dialogName, true);
159+
} else {
160+
this[$event.name](row, index);
161+
}
162+
},
163+
/**
164+
* When the field value changed, sync the value to this.formModel
165+
* Notice there may be more than form in the per line in the table.
166+
*
167+
* @param ($event, row, refKey)
168+
* @param {String} $event.model the changed field's model, eg: auditStatus
169+
* @param {String} $event.value the change field's value, eg: 1 (one value of auditStatus's options)
170+
* @param {String} row.key the changed field' identifier, eg: name
171+
* @param {String} refKey the ref of the changed field's form, eg: actionname.
172+
*/
173+
handleFieldChange({model, value}, row, refKey) {
174+
const key = row.key;
175+
// eslint-disable-next-line no-console
176+
this.$refs[refKey][0].validate();
177+
if (!this.formModel[key]) {
178+
this.$set(this.formModel, key, {});
179+
}
180+
this.$set(this.formModel[key], model, value);
181+
},
182+
handleSave(action) {
183+
let validCount = 0;
184+
const refKeys = Object.keys(this.$refs);
185+
refKeys.forEach(form => {
186+
this.$refs[form][0].validate().then(valid => {
187+
if (valid) {
188+
validCount++;
189+
}
190+
// All validate success
191+
if (validCount === refKeys.length) {
192+
this.dialogTitle = this.pageConfig.dialogs.title;
193+
this.dialogContent = this.pageConfig.dialogs.content;
194+
this.dialogShow = true;
195+
}
196+
}).catch(err => {
197+
console.log(err);
198+
});
199+
});
200+
},
201+
handleImgClick(imgUrl) {
202+
this.modalOpen = true;
203+
this.modalImgUrl = imgUrl;
204+
},
205+
handleListItemClick({url}) {
206+
this.modalOpen = true;
207+
this.modalImgUrl = url;
208+
},
209+
getPageDetail() {
210+
// 先清数据避免上一个页面的数据在当前页面展示
211+
this.resetPageData();
212+
const {api, method} = this.pageRequestInfo;
213+
axios
214+
.request({
215+
method,
216+
url: api,
217+
params: {
218+
applyNo: this.$route.query.applyNo || 0
219+
}
220+
})
221+
.then(res => {
222+
if (res && res.data) {
223+
this.downLoadUrl = res.data.downLoadUrl;
224+
this.mergePageInfoFromApi(this.pageConfig, this.keyToLabel, res.data.info);
225+
}
226+
}).catch(err => {
227+
});
228+
},
229+
mergePageInfoFromApi(pageConfig, keyToLabel, pageData) {
230+
pageConfig.tableList = pageConfig.tableList.map(sectionConfig => {
231+
const {sectionKey} = sectionConfig;
232+
const sectionLabel = keyToLabel[sectionKey];
233+
const sectionData = pageData[sectionKey];
234+
const isTableArray = sectionConfig.isTableArray;
235+
if (!isTableArray) {
236+
if (sectionLabel && sectionData) {
237+
sectionConfig.table.data = Object.keys(sectionData).map(key => {
238+
let obj = '';
239+
if (sectionLabel[key]) {
240+
obj = {
241+
key,
242+
label: sectionLabel[key],
243+
value: sectionData[key]
244+
};
245+
}
246+
return obj;
247+
});
248+
sectionConfig.table.data = sectionConfig.table.data.filter(item => item);
249+
}
250+
} else {
251+
sectionConfig.table.data = sectionData;
252+
}
253+
return sectionConfig;
254+
});
255+
},
256+
cancel() {
257+
this.dialogShow = false;
258+
},
259+
confirm(requestApi) {
260+
const {api, method} = requestApi;
261+
const data = {...this.formModel, ...{applyNo: this.$route.query.applyNo}};
262+
axios
263+
.request({
264+
method,
265+
url: api,
266+
data
267+
})
268+
.then(res => {
269+
if (+res.errno === 0) {
270+
this.$Message.success({
271+
background: true,
272+
content: '提交成功'
273+
});
274+
} else {
275+
this.$Message.error({
276+
background: true,
277+
content: '系统异常'
278+
});
279+
}
280+
});
281+
this.dialogShow = false;
282+
},
283+
resetPageData() {
284+
this.pageConfig.tableList = this.pageConfig.tableList.map(item => {
285+
if (item.needClearData) {
286+
item.table.data = [];
287+
}
288+
return item;
289+
});
290+
}
291+
}
292+
};
293+
</script>
294+
<style lang="less">
295+
.audit-detail-example-demo {
296+
&-table {
297+
&-td-img {
298+
width: 100%;
299+
}
300+
}
301+
&-modal-img {
302+
width: 100%;
303+
}
304+
&-section {
305+
margin: 30px auto;
306+
}
307+
&-header {
308+
margin-bottom: 10px;
309+
font-size: 16px;
310+
}
311+
&-tool-bar {
312+
text-align: right;
313+
padding: 10px
314+
}
315+
.ivu-form-item {
316+
margin-top: 20px
317+
}
318+
.ivu-table, .ivu-table-wrapper, .ivu-table-cell {
319+
overflow: visible;
320+
}
321+
.download-wrapper {
322+
padding: 0 20px;
323+
}
324+
&-form {
325+
.ivu-form-item {
326+
margin-top: 0px;
327+
margin-bottom: 0px
328+
}
329+
}
330+
}
331+
.go-back {
332+
width: 100%;
333+
padding-bottom: 20px;
334+
text-align: right
335+
}
336+
337+
</style>

0 commit comments

Comments
 (0)