zhangzl
/
nsgk_mobile
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

行级填报

rongxin_prod
zhao 2 лет назад
Родитель
9c5eb4fb6a
Сommit
593d971609
6 измененных файлов: 1296 добавлений и 11 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +18
    -0
      src/api/sunVillage_info/entity/report.js
  2. +27
    -0
      src/router/index.js
  3. +263
    -0
      src/views/sunVillage_info/entityReport/reportLineList.vue
  4. +462
    -0
      src/views/sunVillage_info/entityReport/reportLineSummary.vue
  5. +508
    -0
      src/views/sunVillage_info/entityReport/reportLineView.vue
  6. +18
    -11
      src/views/sunVillage_info/entityReport/reportView.vue

+ 18
- 0
src/api/sunVillage_info/entity/report.js Просмотреть файл

@@ -179,3 +179,21 @@ export function horizontalSummaryStatisticsExport(query) {
params: query
})
}

// 查询统计报列表(行级)
export function listLineReporttitle(query) {
return request({
url: '/entity/reporttitle/lineList',
method: 'get',
params: query
})
}

// 竖向统计(不相加)
export function summaryList(query) {
return request({
url: '/entity/report/summaryList',
method: 'get',
params: query
})
}

+ 27
- 0
src/router/index.js Просмотреть файл

@@ -3552,6 +3552,33 @@ export const constantRoutes = [
},
component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportView'], resolve)
},
{ // 行级填报
path: '/sunVillage_info/entityReportLineList',
name: 'entityReportLineList',
meta: {
title: '行级填报',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineList'], resolve)
},
{ // 行级填报
path: '/sunVillage_info/entityReportLineView',
name: 'entityReportLineView',
meta: {
title: '行级填报',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineView'], resolve)
},
{ // 行级填报
path: '/sunVillage_info/entityReportLineSummary',
name: 'entityReportLineSummary',
meta: {
title: '行级填报',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/entityReport/reportLineSummary'], resolve)
},
{ // 统计填报
path: '/sunVillage_info/statistical_report',
name: 'sunVillageInfoStatisticalReport',


+ 263
- 0
src/views/sunVillage_info/entityReport/reportLineList.vue Просмотреть файл

@@ -0,0 +1,263 @@
<template>
<div class="app-container">
<div class="header_main-placeholder">
<div class="header_main">
行级填报
<div class="return_btn" @click="$router.back()"></div>
</div>
</div>

<van-pull-refresh v-model="refreshing" @refresh="getList()">
<van-list
class="list_main"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList('+1')"
>

<van-swipe-cell class="item" v-for="(item,index) in list" :key="index">
<div class="item_box" @click="view(item)">
<div class="head_block">
<i class="icon"></i>
<div class="title">{{item.reportName}}</div>
</div>

<div class="order_block">
<div class="flex_block">
<i class="icon icon_1"></i>
<div class="text">最近填报: {{item.params.lastOperatorDate}}</div>
</div>
<div class="flex_block">
<i class="icon icon_2"></i>
<div class="text">填报数: {{item.params.numReport}}</div>
</div>
</div>
</div>
<template #right>
<van-row class="full-height toolbar">
<van-col class="full-height">
<van-button square text="填报" type="primary" :to="{name:'entityReportLineView', query: {templateId:item.id, intent: 'add'}}" class="full-height" />
</van-col>
</van-row>
</template>
</van-swipe-cell>
</van-list>
</van-pull-refresh>
</div>
</template>

<script>
import {delReport, listLineReporttitle} from "@/api/sunVillage_info/entity/report.js";
export default {
name: "ReportLineList",
data() {
return {
list:[],
loading: false,
finished: false,
refreshing: false,
total: 0,
queryParams:{
pageNum:1,
pageSize:10,
orderByColumn:'createTime',
isAsc:'desc',
type: '2',
}
};
},
created() {
this.getList();
},
methods: {
view(row){
this.$router.push({
name: 'entityReportLineSummary',
query: {
intent: 'view',
templateId: row.id,
}
});
},
getList(target){
let type = typeof (target);
//console.log(type, target);
if(target && this.finished)
return;
if (target === 0) {
this.refreshing = true;
this.finished = true;
this.total = 0;
this.queryParams.pageNum = 1;
this.list = [];
}
else if (type === 'number')
this.queryParams.pageNum = target;
else if (type === 'string') {
this.queryParams.pageNum = eval(this.queryParams.pageNum + target)
}
else
{
this.refreshing = true;
this.finished = true;
this.total = 0;
this.queryParams.pageNum = 1;
this.list = []
}
listLineReporttitle(this.queryParams).then(response => {
if (response.rows.length === 0) {
this.finished = true;
return;
}
this.list.push(...response.rows);
this.total += response.rows.length;
this.finished = this.total >= response.total;
}).finally(() => {
this.loading = false;
this.refreshing = false;
});
},
remove(row, index){
this.$dialog.confirm({
message: '您确认删除综合填报？',
})
.then(() => {
delReport(row.id).then(res => {
this.$toast.success('删除成功');
this.list.splice(index,1);
});
})
.catch(() => {
});
},
refresh() {
this.getList(); return;
this.list = [];
this.queryParams.pageNum = 1;
this.refreshing = true;
this.finished = false;
},
},
}
</script>

<style scoped lang="scss">
.app-container {
//padding: 0.2rem 3%;
width: 100vw;
height: 100vh;
}
.full-height {
height: 100%;
}
.header_main-placeholder {
height: 116px;
}
.header_main {
height: 116px;
background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-size: 36px;
line-height: 116px;
text-align: center;
color: #fff;
z-index: 999;

.return_btn {
width: 24px;
height: 43.2px;
background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
background-size: 20px 36px;
position: absolute;
left: 38px;
top: 36px;
}

.add_btn {
width: 56.4px;
height: 40.8px;
background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
background-size: 47px 34px;
position: absolute;
right: 38px;
top: 36px;
}
}

.list_main{
padding:26px 22px 0;
.item{
height: 162px;
border-radius: 30px;
background: #fff;
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
margin-bottom: 20px;
.item_box{
padding:25px 32px;
}
.head_block{
height: 62px;
display: flex;
align-items: center;
width: 100%;
.icon{
width: 34px;
height: 30px;
background: url('../../../assets/images/sunVillage_info/fixedAssets_icon_4.png') no-repeat;
background-size: 100% 100%;
display: block;
margin-right: 12px;
}
.title{
flex:1;
font-size: 32px;
color: #252525;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 20px;

}
}
.order_block{
display: flex;
height: 52px;
padding-top: 12px;
font-size: 24px;
color: #858585;
align-items: center;
padding-bottom: 10px;
.flex_block{
display: flex;
align-items: center;
justify-content: center;
margin-right: 28px;
height: 42px;
.icon{
width: 25px;
height: 25px;
margin-top: 3px;
margin-right: 8px;
&.icon_1{
background: url('../../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat;
background-size: 100% 100%;
}
&.icon_2{
background: url('../../../assets/images/sunVillage_info/fixedAssets_icon_5.png') no-repeat;
background-size: 100% 100%;
}
}
}
}
}
}

.toolbar {
margin-left: 2px;
}
</style>

+ 462
- 0
src/views/sunVillage_info/entityReport/reportLineSummary.vue Просмотреть файл

@@ -0,0 +1,462 @@
<template>
<div class="app-container">
<div class="header_main-placeholder">
<div class="header_main">
行级填报
<div class="return_btn" @click="back"></div>
<div class="add_btn" @click="add"></div>
</div>
</div>

<van-form ref="form" readonly :class="{'form_readonly': disableEdit}">
<van-row>
<van-col :span="editorData.templateId ? 16 : 24">
<field-select
class="template-selector"
:value="editorData.templateId"
label=" 模板"
value-key="reportName"
data-key="id"
placeholder="报表模板"
:rules="[{ required: true }]"
:readonly="true"
:columns="templateList"
@input="getTemplate"
/>
</van-col>
<van-col span="8" v-if="!!editorData.templateId">
<field-date-picker
class="field_no-label"
v-model="editorData.reportYear"
placeholder="报表年度"
formatter="yyyy"
:readonly="disableEdit"
input-align="center"
type="year"
/>
</van-col>
</van-row>
<van-row v-if="!!editorData.templateId">
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleLeft" label="" placeholder="左上" input-align="left"/>
</van-col>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleCenter" label="" placeholder="中上" input-align="center"/>
</van-col>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleRight" label="" placeholder="右上" input-align="right"/>
</van-col>
</van-row>

<div class="main-table" v-if="!!editorData.templateId">
<table>
<thead>
<tr>
<td v-for="(header) in removePlaceholder(editorData.headers)" :colspan="header.colspan" :style="{
'background-color': calcColor(header.type),
'color': calcTextColor(header.type),
}">{{header.headerName}}</td>
</tr>
</thead>

<tbody>
<tr v-for="(row, rindex) in editorData.rows">
<td v-for="(col, cindex) in removePlaceholder(row)" :colspan="col.colspan" :rowspan="col.rowspan" :style="{
'text-align': calcAlign(editorData.headers[col.colIndex].type),
'background-color': calcColor(editorData.headers[col.colIndex].type),
}">
<div class="full-height">
<div class="full-height" v-if="editorData.headers[col.colIndex].type === '2'">
<input class="input-field align-right full-height" v-model="col.val" :readonly="disableEdit" type="number"></input>
</div>
<div class="full-height" v-else-if="editorData.headers[col.colIndex].type === '4'">
<input class="input-field align-center full-height" v-model="col.name" :readonly="disableEdit"></input>
</div>
<div class="full-height" v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>

<van-icon name="edit" v-if="cindex === editorData.headers.length - 1 && canEdit(col)" class="edit-icon" color="#1989fa" size="24" @click="edit(col)"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<template v-if="!!editorData.templateId">
<div>
<van-field :readonly="disableEdit" v-model="editorData.reportRemark" label="备注" placeholder="报表备注"/>
</div>
<!-- <div>
<van-field readonly :value="editorData.rule" label="规则" placeholder="报表效验公式"></van-field>
</div>-->
</template>
</van-form>
</div>
</template>

<script>
import FieldSelect from "@/components/form/FieldSelect";
import {
addReport, delReport,
getReport,
getReportTemplate,
listReporttitle, summaryList,
updateReport
} from "@/api/sunVillage_info/entity/report";
import {array_grouping, array_toMap, date_format} from "@/utils";
import {Expression} from "@/utils/expression";
import {is_not_number} from "@/utils/utils";
import FieldDatePicker from "@/components/form/FieldDatePicker";
import {Notify} from "vant";
import Cookies from "js-cookie";
export default {
name: "ReportLineSummary",
components: {FieldDatePicker, FieldSelect},
data() {
return {
editorData: {
id: null,
templateId: null,
reportRemark: null,
titleLeft: null,
titleCenter: null,
titleRight: null,
reportStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
reportName: '',
operatorName: '',
operatorDate: '',
operatorDepartment: '',
rule: null,
reportYear: date_format('%Y'),
headers: [],
rows: [],
cells: [],
rules: [],
},
templateList: [],
loading: false,
disableEdit: false,
intent: 'add',
templateId: null,
};
},
created() {
this.getTemplateList();
this.parseQuery();
},
mounted(){
this.init();
},
methods: {
getTemplateList() {
listReporttitle({
type: '2',
reportStatus: '0',
}).then((resp) => {
this.templateList = resp.rows;
});
},
getTemplate() {
if(!this.editorData.templateId)
return;
this.loading = true;
summaryList({
templateId: this.editorData.templateId,
}).then((resp) => {
this.editorData = resp.data;
}).finally(() => {
this.loading = false;
});
},
cellIsPlaceholder(x) {
return x.colspan <= 0 || (x.hasOwnProperty('rowspan') && x.rowspan <= 0);
},
removePlaceholder(cells) {
return cells.filter((x) => !this.cellIsPlaceholder(x));
},
calcAlign(type) {
switch(type)
{
case '2':
return 'right';
case '3':
case '4':
return 'center';
case '1':
return 'left';
}
},
calcColor(type) {
switch(type)
{
case '2':
return 'unset';
case '4':
return 'unset';
case '3':
return '#d7e8f3';
case '1':
return '#aad8f6';
}
},
calcTextColor(type) {
switch(type)
{
case '2':
case '4':
return '#2facfe';
case '3':
case '1':
return '#858585';
}
},
add() {
this.$router.push({
name: 'entityReportLineView',
query: {
intent: 'add',
templateId: this.templateId,
}
});
},
reset() {
this.$refs.form.resetValidation();
this.editorData = {
id: null,
deptId: null,
deptName: null,
templateId: null,
reportName: null,
reportYear: null,
reportRemark: null,
titleLeft: null,
titleCenter: null,
titleRight: null,
rule: null,
operatorName: null,
operatorDate: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
headers: [],
rows: [],
cells: [],
rules: [],
};
},
parseQuery() {
let query = this.$route.query;
this.templateId = query.templateId;
this.intent = query.intent;
if(!this.templateId)
{
this.$router.back();
return;
}
},
init() {
this.editorData.templateId = this.templateId;
this.getTemplate();
this.disableEdit = this.intent === 'view';
},
back() {
this.$router.back();
},
notify(message, type) {
Notify.clear();
Notify({ type: type || 'primary', message: message });
},
edit(row) {
this.$router.push({
name: 'entityReportLineView',
query: {
intent: 'edit',
templateId: '',
reportId: row.reportId,
}
});
},
canEdit(col) {
return col.createBy == Cookies.get('deptId');
},
},
computed: {
isAdd() {
return this.intent === 'add';
},
isEdit() {
return this.intent === 'edit';
},
isView() {
return this.intent === 'view';
},
}
}
</script>

<style scoped lang="scss">
.app-container{
background: #e9e9e9;
min-height: 100vh;
width: 100vw;
.header_main-placeholder {
height: 116px;
}

.header_main {
height: 116px;
background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-size: 36px;
line-height: 116px;
text-align: center;
color: #fff;
z-index: 999;

.return_btn {
width: 24px;
height: 43.2px;
background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
background-size: 20px 36px;
position: absolute;
left: 38px;
top: 36px;
}

.add_btn {
width: 56.4px;
height: 40.8px;
background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
background-size: 47px 34px;
position: absolute;
right: 38px;
top: 36px;
}
}

.main-table {
overflow-x: auto;
overflow-y: auto;
position: relative;
background-color: #ffffff;
padding: 0.15rem 0.15rem;
border-radius: 0.15rem;
margin: 0.1rem 0.1rem;

table {
/*width: max-content;*/
border-collapse: collapse;
border: 0.01rem solid #1989fa;
table-layout: fixed;
}
thead td {
text-align: center;
border: 0.01rem solid #1989fa;
height: 1rem;
font-size: 0.32rem;
padding: 0 0.4rem;
margin: 0;
font-weight: bold;
white-space: nowrap;
/*max-width: 1.2rem;*/
}
tbody td {
font-size: 0.3rem;
border: 0.01rem solid #1989fa;
height: 1rem;
white-space: break-spaces;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0 0.1rem;
margin: 0;
/*max-width: 1.5rem;*/
position: relative;
}

.input-field {
width: 100%;
background-color: unset;
border: 0;
}

.validate-error {
color: #F56C6C;
}
.validate-error-box {
color: #F56C6C;
border: 0.02rem solid #F56C6C;
}
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
.full-height {
height: 100%;
}

/deep/ .van-field__label {
background-color: #2facfe;
margin: 0;
color: #fff;
border-top-left-radius: 0.15rem;
border-bottom-left-radius: 0.15rem;
padding: 0 0.2rem;
display: flex;
align-items: center;
}

/deep/ .van-field__body {
background-color: #ffffff;
border-top-right-radius: 0.15rem;
border-bottom-right-radius: 0.15rem;
padding: 0 0.1rem;
}

/deep/ .van-field__body {
height: 100%;
}

/deep/ .van-field {
background-color: unset;
padding: 0.1rem 0.15rem;
height: 1rem;
}

.field_no-label /deep/ .van-field__body {
border-top-left-radius: 0.15rem;
border-bottom-left-radius: 0.15rem;
}

.template-selector /deep/ span {
padding-left: 0.8rem;
background: #2facfe url('../../../assets/images/sunVillage_info/list_icon_11.png') left center no-repeat;
background-size: 0.45rem;
}

.form_readonly /deep/ .van-icon-arrow-down {
display: none;
}

.edit-icon {
display: inline-block;
width: 0.6rem;
position: absolute;
right: -0.6rem;
top: calc(50% - 0.3rem);
}
}


</style>

+ 508
- 0
src/views/sunVillage_info/entityReport/reportLineView.vue Просмотреть файл

@@ -0,0 +1,508 @@
<template>
<div class="app-container">
<div class="header_main-placeholder">
<div class="header_main">
行级填报
<div class="return_btn" @click="back"></div>
<div class="add_btn" @click="save" v-if="(isAdd || isEdit) && editorData.templateId">保 存</div>
</div>
</div>

<van-form ref="form" :class="{'form_readonly': disableEdit}">
<van-row>
<van-col :span="editorData.templateId ? 16 : 24">
<field-select
class="template-selector"
:value="editorData.templateId"
label=" 模板"
value-key="reportName"
data-key="id"
placeholder="报表模板"
:rules="[{ required: true }]"
:readonly="true"
:columns="templateList"
@input="getTemplate"
/>
</van-col>
<van-col span="8" v-if="!!editorData.templateId">
<field-date-picker
class="field_no-label"
v-model="editorData.reportYear"
placeholder="报表年度"
formatter="yyyy"
:readonly="disableEdit"
input-align="center"
type="year"
/>
</van-col>
</van-row>
<van-row v-if="!!editorData.templateId">
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleLeft" label="" placeholder="左上" input-align="left"/>
</van-col>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleCenter" label="" placeholder="中上" input-align="center"/>
</van-col>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.titleRight" label="" placeholder="右上" input-align="right"/>
</van-col>
</van-row>

<div class="main-table" v-if="!!editorData.templateId">
<div v-for="(header, rindex) in editorData.headers">
<van-field v-if="header.type === '2'" label-width="50%" :readonly="disableEdit" v-model="editorData.rows[0][rindex].val" :label="header.headerName" :placeholder="header.headerName" input-align="right" type="number"/>
<van-field v-else-if="header.type === '4' || header.type === '3'" label-width="50%" :readonly="disableEdit" v-model="editorData.rows[0][rindex].name" :label="header.headerName" :placeholder="header.headerName" input-align="right"/>
<van-field v-else label-width="50%" :readonly="true" :value="editorData.rows[0][rindex].name" :label="header.headerName" :placeholder="header.headerName" input-align="right"/>
</div>
</div>

<template v-if="!!editorData.templateId">
<div>
<van-field :readonly="disableEdit" v-model="editorData.reportRemark" label="备注" placeholder="报表备注"/>
</div>
<!-- <div>
<van-field readonly :value="editorData.rule" label="规则" placeholder="报表效验公式"></van-field>
</div>-->

<van-row>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.operatorDepartment" label="" placeholder="填报单位" input-align="left"/>
</van-col>
<van-col span="8">
<van-field class="field_no-label" :readonly="disableEdit" v-model="editorData.operatorName" label="" placeholder="填报人" input-align="center"/>
</van-col>
<van-col span="8">
<field-date-picker
class="field_no-label"
v-model="editorData.operatorDate"
placeholder="填报日期"
formatter="yyyy-MM-dd"
:readonly="disableEdit"
input-align="right"
/>
</van-col>
</van-row>
</template>
</van-form>
</div>
</template>

<script>
import FieldSelect from "@/components/form/FieldSelect";
import {
addReport, delReport,
getReport,
getReportTemplate,
listReporttitle,
updateReport
} from "@/api/sunVillage_info/entity/report";
import {array_grouping, array_toMap, date_format} from "@/utils";
import {Expression} from "@/utils/expression";
import {is_not_number} from "@/utils/utils";
import FieldDatePicker from "@/components/form/FieldDatePicker";
import {Notify} from "vant";
export default {
name: "ReportLineView",
components: {FieldDatePicker, FieldSelect},
data() {
return {
editorData: {
id: null,
templateId: null,
reportRemark: null,
titleLeft: null,
titleCenter: null,
titleRight: null,
reportStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
reportName: '',
operatorName: '',
operatorDate: '',
operatorDepartment: '',
rule: null,
reportYear: date_format('%Y'),
headers: [],
rows: [],
cells: [],
rules: [],
},
templateList: [],
loading: false,
disableEdit: false,
intent: 'add',
templateId: null,
reportId: null,
};
},
created() {
this.getTemplateList();
this.parseQuery();
},
mounted(){
this.init();
},
methods: {
getTemplateList() {
listReporttitle({
type: '2',
reportStatus: '0',
}).then((resp) => {
this.templateList = resp.rows;
});
},
getTemplate() {
if(!this.editorData.templateId && !this.editorData.id)
return;
this.loading = true;
if(this.editorData.id) // 修改
{
getReport(this.editorData.id).then((resp) => {
let reportData = resp.data;
getReportTemplate(reportData.templateId).then((resp) => {
let templateData = resp.data;
this.setTableData(templateData, reportData);
}).finally(() => {
this.loading = false;
});
}).catch(() => {
this.loading = false;
});
}
else
{
getReportTemplate(this.editorData.templateId).then((resp) => {
let templateData = resp.data;
this.setTableData(templateData);
}).finally(() => {
this.loading = false;
});
}
},
setTableData(templateData, reportData) {
let data;
if(!reportData)
{
data = templateData;
data.rows.forEach((x) => {
x.forEach((y) => {
y.error = false;
});
});
}
else
{
let cells = reportData.cells;
data = reportData;
data.headers = templateData.headers;
data.rows = templateData.rows;
data.cells = templateData.cells;
data.rules = templateData.rules;
data.rule = templateData.rule;

let group = array_grouping(cells, (x) => x.rowIndex);
Object.keys(group).forEach((x) => group[x] = array_toMap(group[x], (x) => x.colIndex));
data.rows.forEach((cols, rowIndex) => {
cols.forEach((x) => {
if(group[rowIndex] && group[rowIndex][x.colIndex])
{
if(templateData.headers[x.colIndex].type === '4')
x.name = group[rowIndex][x.colIndex].name;
x.val = group[rowIndex][x.colIndex].val;
}
})
});
}
this.editorData = data;
},
calcAlign(type) {
switch(type)
{
case '2':
return 'right';
case '3':
case '4':
return 'center';
case '1':
return 'left';
}
},
calcColor(type) {
switch(type)
{
case '2':
return 'unset';
case '4':
return 'unset';
case '3':
return '#d7e8f3';
case '1':
return '#aad8f6';
}
},
calcTextColor(type) {
switch(type)
{
case '2':
case '4':
return '#2facfe';
case '3':
case '1':
return '#858585';
}
},
save() {
this.$refs.form.validate().then(() => {
this.preHandle();
this.loading = true;
let func = this.editorData.id ? updateReport : addReport;
func(this.editorData).then((resp) => {
this.notify("保存成功!", 'success');
this.back();
}).finally(() => {
this.loading = false;
});
}).catch(() => {
this.notify("请填写完整表单", 'danger');
this.$refs.form.scrollToField();
});
},
preHandle() {
this.editorData.cells = [];
this.editorData.rows.forEach((x) => this.editorData.cells.push(...x));
},
reset() {
this.$refs.form.resetValidation();
this.editorData = {
id: null,
deptId: null,
deptName: null,
templateId: null,
reportName: null,
reportYear: null,
reportRemark: null,
titleLeft: null,
titleCenter: null,
titleRight: null,
rule: null,
operatorName: null,
operatorDate: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
headers: [],
rows: [],
cells: [],
rules: [],
};
},
parseQuery() {
let query = this.$route.query;
this.templateId = query.templateId;
this.reportId = query.reportId;
this.intent = query.intent;
if(!this.reportId)
{
this.intent = 'add';
return;
}
if(this.intent === 'add')
{
this.reportId = null;
}
if(!this.templateId && !this.reportId)
{
this.$router.back();
return;
}
},
init() {
this.editorData.templateId = this.templateId;
this.editorData.id = this.reportId;
this.getTemplate();
this.disableEdit = this.intent === 'view';
},
back() {
this.$router.back();
},
notify(message, type) {
Notify.clear();
Notify({ type: type || 'primary', message: message });
},
},
computed: {
isAdd() {
return this.intent === 'add';
},
isEdit() {
return this.intent === 'edit';
},
isView() {
return this.intent === 'view';
},
}
}
</script>

<style scoped lang="scss">
.app-container{
background: #e9e9e9;
min-height: 100vh;
width: 100vw;
.header_main-placeholder {
height: 116px;
}

.header_main {
height: 116px;
background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-size: 36px;
line-height: 116px;
text-align: center;
color: #fff;
z-index: 999;

.return_btn {
width: 24px;
height: 43.2px;
background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
background-size: 20px 36px;
position: absolute;
left: 38px;
top: 36px;
}

.add_btn {
width: 72px;
//height: 40.8px;
//background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
//background-size: 47px 34px;
position: absolute;
right: 38px;
top: 0;
font-size: 28px;
}
}

.main-table {
overflow-x: auto;
overflow-y: auto;
position: relative;
background-color: #ffffff;
padding: 0.15rem 0.15rem;
border-radius: 0.15rem;
margin: 0.1rem 0.1rem;

table {
width: max-content;
border-collapse: collapse;
border: 0.01rem solid #1989fa;
table-layout: fixed;
}
thead td {
text-align: center;
border: 0.01rem solid #1989fa;
height: 1rem;
font-size: 0.32rem;
padding: 0 0.4rem;
margin: 0;
font-weight: bold;
max-width: 1.2rem;
}
tbody td {
font-size: 0.3rem;
border: 0.01rem solid #1989fa;
height: 1rem;
white-space: break-spaces;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0;
margin: 0;
max-width: 1.5rem;
position: relative;
}

.input-field {
width: 100%;
background-color: unset;
border: 0;
}

.validate-error {
color: #F56C6C;
}
.validate-error-box {
color: #F56C6C;
border: 0.02rem solid #F56C6C;
}
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
.full-height {
height: 100%;
}

/deep/ .van-field__label {
background-color: #2facfe;
margin: 0;
color: #fff;
border-top-left-radius: 0.15rem;
border-bottom-left-radius: 0.15rem;
padding: 0 0.2rem;
display: flex;
align-items: center;
}

/deep/ .van-field__body {
background-color: #ffffff;
border-top-right-radius: 0.15rem;
border-bottom-right-radius: 0.15rem;
padding: 0 0.1rem;
}

/deep/ .van-field__body {
height: 100%;
}

/deep/ .van-field {
background-color: unset;
padding: 0.1rem 0.15rem;
height: 1rem;
}

.field_no-label /deep/ .van-field__body {
border-top-left-radius: 0.15rem;
border-bottom-left-radius: 0.15rem;
}

.main-table /deep/ .van-field__body {
border-right: 0.01rem solid #ccc;
border-top: 0.01rem solid #ccc;
border-bottom: 0.01rem solid #ccc;
}

.template-selector /deep/ span {
padding-left: 0.8rem;
background: #2facfe url('../../../assets/images/sunVillage_info/list_icon_11.png') left center no-repeat;
background-size: 0.45rem;
}

.form_readonly /deep/ .van-icon-arrow-down {
display: none;
}
}


</style>

+ 18
- 11
src/views/sunVillage_info/entityReport/reportView.vue Просмотреть файл

@@ -8,7 +8,7 @@
</div>
</div>

<van-form ref="form" :class="{'form_readonly': disableEdit}">
<van-form ref="form" :readonly="disableEdit" :class="{'form_readonly': disableEdit}">
<van-row>
<van-col :span="editorData.templateId ? 16 : 24">
<field-select
@@ -20,7 +20,7 @@
placeholder="报表模板"
:rules="[{ required: true }]"
:required="true"
:readonly="disableEdit"
:readonly="disableEdit || !!editorData.id"
:columns="templateList"
@input="getTemplate"
/>
@@ -56,9 +56,7 @@
<td v-for="(header) in removePlaceholder(editorData.headers)" :colspan="header.colspan" :style="{
'background-color': calcColor(header.type),
'color': calcTextColor(header.type),
}">
{{header.headerName}}
</td>
}">{{header.headerName}}</td>
</tr>
</thead>

@@ -68,13 +66,13 @@
'text-align': calcAlign(editorData.headers[col.colIndex].type),
'background-color': calcColor(editorData.headers[col.colIndex].type),
}">
<div class="full-height" v-if="editorData.headers[col.colIndex].type === '2'" :class="{'validate-error': col.error, 'validate-error-box': col.error,}">
<div class="absolute-full" v-if="editorData.headers[col.colIndex].type === '2'" :class="{'validate-error': col.error, 'validate-error-box': col.error,}">
<input class="input-field align-right full-height" v-model="col.val" :readonly="disableEdit" type="number"></input>
</div>
<div class="full-height" v-else-if="editorData.headers[col.colIndex].type === '4'">
<input class="input-field align-center full-height" v-model="col.name" :readonly="disableEdit"></input>
</div>
<div v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
<div class="full-height" v-else :style="{'text-align': calcAlign(editorData.headers[col.colIndex].type)}">{{col.name}}</div>
</td>
</tr>
</tbody>
@@ -499,7 +497,7 @@ export default {
margin: 0.1rem 0.1rem;

table {
width: max-content;
/*width: max-content;*/
border-collapse: collapse;
border: 0.01rem solid #1989fa;
table-layout: fixed;
@@ -512,7 +510,8 @@ export default {
padding: 0 0.4rem;
margin: 0;
font-weight: bold;
max-width: 1.2rem;
white-space: nowrap;
/*max-width: 1.2rem;*/
}
tbody td {
font-size: 0.3rem;
@@ -521,9 +520,9 @@ export default {
white-space: break-spaces;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0;
padding: 0 0.1rem;
margin: 0;
max-width: 1.5rem;
/*max-width: 1.5rem;*/
position: relative;
}

@@ -593,6 +592,14 @@ export default {
.form_readonly /deep/ .van-icon-arrow-down {
display: none;
}

.absolute-full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}




Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить