<template>
|
<div class="report_box">
|
<van-nav-bar style="width: 100%">
|
<template #left>
|
<van-icon @click="pageBack" name="arrow-left" size="18" />
|
</template>
|
<template #title>
|
<label>选型报告</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<div style="height: calc(100% - 62px);margin-top:16px">
|
<van-tabs v-model="active" type="card" color="#000000">
|
<van-tab title="客户信息">
|
<div style="height:100%;padding:0 10px;">
|
<div style="width:100%;">
|
<van-divider content-position="left" :style="{borderColor:'#aaaaaa'}">项目信息</van-divider>
|
<van-cell-group>
|
<van-field v-model="m_formSetting.BaseInfo.PumpName" label="产品名称:" />
|
<van-field v-model="m_formSetting.ProjectInfo.ProjectNO" label="项目编号:" />
|
<van-field v-model="m_formSetting.ProjectInfo.ProjectName" label="项目名称:" />
|
<van-field v-model="m_formSetting.ProjectInfo.ItemName" label="工位编号:" />
|
</van-cell-group>
|
</div>
|
<div style="width:100%;">
|
<van-divider content-position="left" :style="{borderColor:'#aaaaaa'}">客户信息</van-divider>
|
<van-cell-group>
|
<van-field v-model="m_formSetting.CustomerInfo.Name" label="客户名称:" />
|
<van-field v-model="m_formSetting.CustomerInfo.Address" label="客户地址:" />
|
<van-field v-model="m_formSetting.CustomerInfo.ContactUser" label="联系人:" />
|
<van-field v-model="m_formSetting.CustomerInfo.ContactInfo" label="联系方式:" />
|
<van-field v-model="m_formSetting.CustomerInfo.EMail" label="邮箱:" />
|
<van-field v-model="m_formSetting.CustomerInfo.HomePage" label="网址:" />
|
<van-field v-model="m_formSetting.CustomerInfo.Country" label="国家:" />
|
</van-cell-group>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab title="订单信息">
|
<div style="height:100%;padding:0 10px;">
|
<div style="width:100%;">
|
<van-divider content-position="left" :style="{borderColor:'#aaaaaa'}">订单信息</van-divider>
|
<van-cell-group>
|
<van-field v-model="m_formSetting.OrderInfo.OrderNO" label="订单号:" />
|
<van-field v-model="m_formSetting.OrderInfo.Price" label="产品单价:" />
|
<van-field v-model="m_formSetting.OrderInfo.Number" label="购买数量:" />
|
<van-field
|
v-model="m_formSetting.OrderInfo.Description"
|
rows="2"
|
autosize
|
label="订单备注:"
|
type="textarea"
|
maxlength="50"
|
show-word-limit
|
/>
|
</van-cell-group>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab title="页面报告设置">
|
<div style="height:100%;padding:0 10px;">
|
<div style="width:100%;">
|
<van-divider content-position="left" :style="{borderColor:'#aaaaaa'}">项目信息</van-divider>
|
<van-cell-group>
|
<van-field label-width="150" input-align="right" label="是否黑白显示曲线">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsMonoColor" />
|
</template>
|
</van-field>
|
<van-field label-width="150" input-align="right" label="数据表和曲线">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsCreateTechnologyInfoPage" />
|
</template>
|
</van-field>
|
<van-field label-width="150" input-align="right" label="曲线图">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsCreatePerformCurvePage" />
|
</template>
|
</van-field>
|
<van-field :disabled="true" label-width="150" input-align="right" label="尺寸图">
|
<template #input>
|
<van-checkbox :disabled="true" v-model="m_formSetting.PageSetting.IsCreateDimenPicturePage" />
|
</template>
|
</van-field>
|
<van-field label-width="150" input-align="right" label="安装图">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsCreateAssemPicturePage" />
|
</template>
|
</van-field>
|
<van-field label-width="150" input-align="right" label="实物图">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsCreateRealPicturePage" />
|
</template>
|
</van-field>
|
<van-field :disabled="true" label-width="150" input-align="right" label="结构图">
|
<template #input>
|
<van-checkbox :disabled="true" v-model="m_formSetting.PageSetting.IsCreateStructDrawingPage" />
|
</template>
|
</van-field>
|
<van-field label-width="150" input-align="right" label="报价文本">
|
<template #input>
|
<van-checkbox v-model="m_formSetting.PageSetting.IsCreateOrderInfoPage" />
|
</template>
|
</van-field>
|
</van-cell-group>
|
</div>
|
<div style="width:100%;">
|
<van-divider content-position="left" :style="{borderColor:'#aaaaaa'}">客户信息</van-divider>
|
<van-cell-group>
|
<van-field v-model="m_formSetting.CustomerInfo.Name" label="公司抬头:" />
|
<van-field v-model="m_formSetting.CustomerInfo.HomePage" label="公司网址:" />
|
</van-cell-group>
|
</div>
|
</div>
|
</van-tab>
|
</van-tabs>
|
<!-- 生成文件配置弹框 -->
|
<van-overlay :show="m_ExportShow" @click="m_ExportShow = false">
|
<div class="export_wrapper" @click.stop>
|
<div class="export_content">
|
<div class="dialog_title">
|
<span>报告配置</span>
|
<van-icon
|
name="close"
|
style="position: absolute; right: 15px; font-size: 20px;"
|
@click="m_ExportShow = false"
|
/>
|
</div>
|
<van-field
|
readonly
|
clickable
|
:value="m_showLangTypeText"
|
label="语言:"
|
@click="m_ShowLangPop = true"
|
/>
|
<van-field
|
readonly
|
clickable
|
:value="m_showFileTypeText"
|
label="文件类型:"
|
@click="m_ShowFileTypePop = true"
|
/>
|
<van-field
|
v-model="Email"
|
validate-trigger="onBlur"
|
@input="inputEmail"
|
required
|
label="电子邮箱:"
|
placeholder="电子邮箱用于发送报告文件"
|
:error-message="emailErrorMessage"
|
/>
|
<div style="margin: 16px;">
|
<van-button class="generate_btn" round block type="info" native-type="submit">生成报告</van-button>
|
</div>
|
</div>
|
</div>
|
</van-overlay>
|
<!-- 导出按钮 -->
|
<div
|
class="exportBtn"
|
style="position: fixed;right:10px;bottom:90px;"
|
@click="m_ExportShow = true"
|
>
|
<i class="iconfont icondaochu"></i>
|
</div>
|
<!-- 语言选择器 -->
|
<van-popup v-model="m_ShowLangPop" position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="m_langugageList"
|
@confirm="onLangSelect"
|
@cancel="m_ShowLangPop = false"
|
/>
|
</van-popup>
|
<!-- 文件类型选择器 -->
|
<van-popup v-model="m_ShowFileTypePop" position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="m_FileTypeList"
|
@confirm="onFileTypeSelect"
|
@cancel="m_ShowFileTypePop = false"
|
/>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import constParas from "@/utils/constParas";
|
export default {
|
data() {
|
return {
|
active: 0,
|
m_ExportShow: false,
|
m_showLangTypeText: "",
|
m_ShowLangPop: false,
|
m_showFileTypeText: "",
|
m_ShowFileTypePop: false,
|
m_langugageList: [],
|
m_FileTypeList: [],
|
m_request_data: null, //请求数据
|
|
Email:"",//用于发送报告的邮箱
|
emailErrorMessage:"",
|
m_formSetting: {
|
//选型报告参数
|
BaseInfo: {
|
//基本信息
|
PumpName: "", //型号
|
PartNO: "" //产品编号
|
},
|
CustomerInfo: {
|
//客户信息
|
Name: "", //客户名称
|
Address: "", //客户地址
|
ContactUser: "", //联系人
|
ContactInfo: "", //联系方式
|
EMail: "", //EMail
|
Country: "", //国家
|
HomePage: "" //网址
|
},
|
ProjectInfo: {
|
//项目信息
|
ProjectNO: "", //项目编号
|
ProjectName: "", //项目名称
|
ItemName: "", //工位编号
|
Description: "" //项目备注
|
},
|
PageSetting: {
|
//报告页面设置
|
LanguageType: 0, //语言类型
|
FileType: 0, //文件类型,
|
IsMonoColor: false, //单色相似
|
IsCreateTechnologyInfoPage: true, //是否产生数据表和曲线页面
|
IsCreatePerformCurvePage: true, //曲线图页面
|
IsCreateOrderInfoPage: true, //订单资料页面
|
IsCreateDimenPicturePage: true, //尺寸图页面
|
IsCreateAssemPicturePage: true, //安装图页面
|
IsCreateRealPicturePage: true, //实物图页面
|
IsCreateStructDrawingPage: true //结构图页面
|
},
|
OrderInfo: {
|
//订单信息
|
OrderNO: "", //订单号
|
Number: "1", //订单数量
|
Price: "", //单价
|
Description: "" //询价备注
|
},
|
PageStyle: {
|
//页面样式(暂时不要)
|
}
|
}
|
};
|
},
|
mounted() {
|
this.buildLangTypeAndFileTypeColumns();
|
},
|
methods: {
|
//构建语言类型和文件类型的选择器数据
|
buildLangTypeAndFileTypeColumns() {
|
let _this = this;
|
let gLanguageList = _this.$globalConfig.ReportSetting.LanguageList; //获取配置中的语言列表
|
let gFileType = _this.$globalConfig.ReportSetting.FileType; //获取配置中的文件类型列表
|
let languageSelectList = [];
|
let fileTypeSelectList = [];
|
_this.m_showLangTypeText = constParas.getLocalizationTypeCNName(
|
gLanguageList[0]
|
);
|
_this.m_showFileTypeText = constParas.getFileTypeName(gFileType[0]);
|
gLanguageList.forEach(element => {
|
let node = {
|
text: constParas.getLocalizationTypeCNName(element),
|
value: element
|
};
|
languageSelectList.push(node);
|
});
|
_this.m_langugageList = languageSelectList;
|
|
gFileType.forEach(element => {
|
let node = {
|
text: constParas.getFileTypeName(element),
|
value: element
|
};
|
fileTypeSelectList.push(node);
|
});
|
_this.m_FileTypeList = fileTypeSelectList;
|
},
|
//监听语言类型选择器选择的值
|
onLangSelect(value) {
|
this.m_ShowLangPop = false;
|
this.m_formSetting.PageSetting.LanguageType = value.value;
|
this.m_showLangTypeText = value.text;
|
},
|
//监听文件类型选择器选择的值
|
onFileTypeSelect(value) {
|
this.m_ShowFileTypePop = false;
|
this.m_formSetting.PageSetting.FileType = value.value;
|
this.m_showFileTypeText = value.text;
|
},
|
//监听输入的邮箱的值
|
inputEmail(val){
|
this.emailValidator(val)
|
},
|
//校验Email的格式
|
emailValidator(val){
|
let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
|
if(val == ""){
|
this.emailErrorMessage = ""
|
return
|
}
|
if(reg.test(val)){
|
this.emailErrorMessage = ""
|
}else {
|
this.emailErrorMessage = "请输入正确邮箱格式"
|
}
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.report_box {
|
height: 100vh;
|
width: 100%;
|
background-color: #f1f2f3;
|
.exportBtn {
|
opacity: 0.8;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
i {
|
font-size: 24px;
|
}
|
}
|
.export_wrapper {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
}
|
|
.export_content {
|
width: 300px;
|
height: 300px;
|
background-color: #fff;
|
}
|
.dialog_title {
|
position: relative;
|
width: 100%;
|
height: 15%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-bottom: 1px solid #f1f2f3;
|
}
|
}
|
</style>
|
