Skip to content

P
patzn-cloud-web-back-soil
Commit d4c8cb39 by lichengming
Options

修改了检测数据录入编制证书按钮

parent 6e5c92df
Showing with 1010 additions and 4 deletions
api/config.js
...@@ -59,6 +59,7 @@ export default { ...@@ -59,6 +59,7 @@ export default {
webURL: process.env.WEB_URL, webURL: process.env.WEB_URL,
staticURL: process.env.STATIC_URL, staticURL: process.env.STATIC_URL,
ncURL: process.env.NC_URL, ncURL: process.env.NC_URL,
recordURL: process.env.RECORD_URL,
transformRequest: [ transformRequest: [
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
function(data) { function(data) {
......
api/index.js
...@@ -36,4 +36,5 @@ export { default as meterContract } from './meter/meter-contract' ...@@ -36,4 +36,5 @@ export { default as meterContract } from './meter/meter-contract'
export { default as meterSampleQuote } from './meter/meter-sample-quote' export { default as meterSampleQuote } from './meter/meter-sample-quote'
export { default as meterRecord } from './meter/meter-record' export { default as meterRecord } from './meter/meter-record'
export { default as meterSubContract } from './meter/meter-sub-contract' export { default as meterSubContract } from './meter/meter-sub-contract'
export { default as meterPrint } from './meter/meter-print'
export { default as lmsBaseDict } from './lims/lms-base-dict' export { default as lmsBaseDict } from './lims/lms-base-dict'
api/meter/meter-print.js 0 → 100644
/**
* 工作台
*/
import http from '../http'
export default {
// 证书模板
pageSampleInputRecordTemp: data =>
http.post('/print/v1/template_category/list_type', data).then(res => res)
}
components/base/TwoCard.vue 0 → 100644
<template>
<div>
<div class="layout-content-padding">
<div>
<Row :gutter=gutter>
<Col :span="leftSpan">
<Card>
<p slot="title" style="width: 60%;">{{leftName}}</p>
<p slot="title" style="width: 40%;text-align: right">
<a @click="_refresh" class="blue-color">
<Icon type="refresh" size="20"></Icon>
</a>
</p>
<div>
<slot name="left"></slot>
</div>
</Card>
</Col>
<Col :span="rightSpan">
<Card>
<p slot="title">{{rightName}}</p>
<div>
<slot name="right"></slot>
</div>
</Card>
</Col>
</Row>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
gutter: null,
leftName: null,
rightName: null,
leftSpan: null
},
data() {
return {
rowGutter: this.gutter ? this.gutter : 0
}
},
computed: {
rightSpan: function() {
return 24 - this.leftSpan
}
},
methods: {
// 刷新
_refresh() {
this.$emit('on-result-change')
}
}
}
</script>
<style scoped>
</style>
pages/meter-send/sample-input/MeterSampleInput.vue
...@@ -62,6 +62,7 @@ ...@@ -62,6 +62,7 @@
<InstruMentEdit ref="InstruEdit"></InstruMentEdit> <InstruMentEdit ref="InstruEdit"></InstruMentEdit>
<MeterPersonItemTaskManage ref="personModal"></MeterPersonItemTaskManage> <MeterPersonItemTaskManage ref="personModal"></MeterPersonItemTaskManage>
<MeterSubcontractorEdit ref="editSubcontractorModal" @on-result-change="_formSearch"></MeterSubcontractorEdit> <MeterSubcontractorEdit ref="editSubcontractorModal" @on-result-change="_formSearch"></MeterSubcontractorEdit>
<SelectOriTempRecord ref="SelectOriTempRecord"></SelectOriTempRecord>
</div> </div>
</template> </template>
<script> <script>
...@@ -71,8 +72,10 @@ import MeterSubcontractorEdit from './MeterGoOutTestEdit' ...@@ -71,8 +72,10 @@ import MeterSubcontractorEdit from './MeterGoOutTestEdit'
import CarManage from './CarManage' import CarManage from './CarManage'
import MeterPersonItemTaskManage from './MeterPersonItemTaskManage' import MeterPersonItemTaskManage from './MeterPersonItemTaskManage'
import InstruMentEdit from './InstrumentEdit' import InstruMentEdit from './InstrumentEdit'
import SelectOriTempRecord from './SelectOriTempRecord'
export default { export default {
components: { components: {
SelectOriTempRecord,
MeterSubcontractorEdit, MeterSubcontractorEdit,
CarManage, CarManage,
MeterPersonItemTaskManage, MeterPersonItemTaskManage,
...@@ -103,6 +106,11 @@ export default { ...@@ -103,6 +106,11 @@ export default {
], ],
iconMsg: [ iconMsg: [
{ {
type: 'ios-bookmarks',
id: '',
name: '编制证书'
},
{
type: 'md-create', type: 'md-create',
id: '', id: '',
name: '编辑' name: '编辑'
...@@ -215,6 +223,9 @@ export default { ...@@ -215,6 +223,9 @@ export default {
this.currentComponent = componentName this.currentComponent = componentName
this.$nextTick(function() { this.$nextTick(function() {
switch (res) { switch (res) {
case '编制证书':
this.$refs.SelectOriTempRecord._open(data.id)
break
case '仪器领用': case '仪器领用':
this.$refs.InstruEdit._open() this.$refs.InstruEdit._open()
break break
......
pages/meter-send/sample-input/OriginalRecordClassTree.vue 0 → 100644
<template>
<div>
<div>
<Form onsubmit="return false">
<Form-item>
<Input v-model="key" @on-enter="_search" placeholder="请输入关键字,回车查询" style="width:100%"
icon="ios-search-strong"/>
</Form-item>
</Form>
</div>
<!--加载中-->
<div v-show="isloading" class="demo-spin-container spin-bg tree_height">
<Spin fix size="large"></Spin>
</div>
<ul :id="treeId" v-show="isTree"
class="ztree ztreePro tree_height" style="overflow-x: auto;"></ul>
</div>
</template>
<style>
</style>
<script>
/**
* 原始记录类别添加编辑Ztree
*/
import { meterPrint } from '../../../api'
export default {
data() {
return {
treeId: '',
key: '',
isloading: true,
isTree: false,
setting: {
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pid'
}
},
callback: {
onClick: this.zTreeOnClick
}
},
businessTypeList: ''
}
},
created() {
// this.$bus.$on('refreshTree', pid => {
// this._Ztree()
// })
},
methods: {
_Ztree(tableHeight, businessTypeList) {
this.key = ''
this.treeId = 'oriRecordClassTree' + this.$randomCode()
this.isloading = false
this.isTree = true
if (businessTypeList === undefined) {
// 查询所有类别
this._request()
} else {
// 采样实/实验室不同类型
this.businessTypeList = businessTypeList
this._requestByBusinessTypeList()
}
// if (tableHeight) {
// $('.tree_height').height(tableHeight)
// } else {
// $('.tree_height').height(document.documentElement.clientHeight - 230)
// }
},
zTreeOnClick(event, treeId, treeNode) {
this.$emit('on-result-change', treeNode)
},
_search() {
this.isloading = true
this.isTree = false
// 查询实验室、采样、所有类型的数据
if (this.businessTypeList !== undefined) {
this._requestByBusinessTypeList()
} else {
this._request()
}
this.$emit('on-result-change')
},
// 原始记录模板管理查env所有的类别
_page: async function(data) {
data.service = 'env'
const result = await meterPrint.pageSampleInputRecordTemp(data)
if (result) {
console.log(result)
} else {
console.log('请求失败')
}
},
_request() {
console.log('// 查询所有类别')
const data = {}
if (this.key) {
data.name = this.key
}
this._page(data)
// this.$store.dispatch('ElnTemplateCategory/list', data).then(() => {
// const treeObj = $.fn.zTree.init(
// $('#' + this.treeId),
// this.setting,
// this.$store.state.ElnTemplateCategory.list
// )
// treeObj.expandAll(true)
// setTimeout(() => {
// this.isloading = false
// this.isTree = true
// }, 300)
// })
},
// 采样/实验室查env下，不同类型（采样/实验室）的树数据
_requestByBusinessTypeList() {
console.log('采样/实验室查env下，不同类型（采样/实验室）的树数据')
const data = {}
data.businessTypeList = this.businessTypeList
if (this.key) {
data.name = this.key
}
this._page(data)
// this.$store.dispatch('ElnTemplateCategory/listType', data).then(() => {
// const treeObj = $.fn.zTree.init(
// $('#' + this.treeId),
// this.setting,
// this.$store.state.ElnTemplateCategory.list
// )
// treeObj.expandAll(true)
// setTimeout(() => {
// this.isloading = false
// this.isTree = true
// }, 300)
// })
}
}
}
</script>
<style>
.tree_height {
height: 300px;
}
</style>
pages/meter-send/sample-input/RecordIframe.vue 0 → 100644
<template>
<div>
</div>
</template>
<script>
import { Iframe } from '../../../plugins/iframe'
export default {
props: {
ifrAction: null
},
data() {
return {
iframeShow: false,
isLoading: false,
fullScreenHeight: 300 + 'px',
iframeHeight: 300 + 'px',
iframeHeader: '原始记录添加'
}
},
methods: {
/** 自定义iframe**/
_createIframe(bindUri, params) {
Iframe.iframe(bindUri, params)
},
/** 自定义iframe的使用**/
_closeIframe() {
Iframe.closeModalDiv()
}
}
}
</script>
<style>
.record-modal {
width: 800px;
height: 500px;
border: 1px solid #0079fd;
position: fixed;
box-shadow: 0 0 10px #505050;
top: 0;
left: 0;
display: block;
}
.record-modal-header {
width: 100%;
height: 30px;
background-color: #ffffff;
position: relative;
border-bottom: 1px solid #ffffff;
}
.record-modal-title {
width: 200px;
position: absolute;
left: 0;
top: 0;
height: 100%;
font-size: 14px;
font-weight: 400;
color: #000;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 30px;
margin-left: 10px;
}
.record-modal-btn {
position: absolute;
right: 0;
top: 0;
width: 120px;
height: 100%;
margin-top: 0;
/*margin-left: 680px;*/
}
.record-modal-btn > div {
float: left;
width: 40px;
height: 100%;
font-size: 14px;
line-height: 30px;
text-align: center;
cursor: default;
user-select: none;
}
.record-modal-max {
font-weight: bold;
}
.record-modal-min:hover,
.record-modal-max:hover {
background-color: #e5e5e5;
}
.record-modal-close {
font-size: 24px !important;
}
.record-modal-close:hover {
background-color: #e81123 !important;
}
.record-modal-content {
width: 100%;
height: 470px;
position: relative;
background-color: #ffffff;
}
.record-loading-content {
background-color: #ffffff;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
pages/meter-send/sample-input/SelectOriTempRecord.vue 0 → 100644
<template>
<div>
<Modal v-model="showModal" v-drag width="1100">
<p slot="header">选择原始记录模板</p>
<div>
<TwoCard @on-result-change="_refresh" left-name="原始记录模板类别" right-name="实验室原始记录模板名称" :gutter=16 left-span="8">
<template slot="left">
<OriginalRecordClassTree ref="classTree" @on-result-change="_classData"></OriginalRecordClassTree>
</template>
<template slot="right">
<Row>
<!--查询-->
<Col span="24">
<Form :label-width="50" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="名称:">
<Input v-model="formObj.title" @on-enter="_search" placeholder="请输入名称" style="width: 200px"
clearable/>
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<!-- 表格 -->
<Col span="24">
<PTVXETable ref="pageTable" :height="300"
@on-result-change="_tableResultChange" :getPage="getPage" :isRadio="true" hide-checkbox>
<vxe-table-column
:field="item.key"
:title="item.title"
:min-width="item.width?item.width:200"
:fixed="item.fixed?item.fixed:undefined"
v-for="(item,index) in pageColumns"
:key="index" sortable>
<template slot-scope="scope">
<div v-if="item.key==='ctime'">
{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}
</div>
<div v-else>{{scope.row[item.key]}}</div>
</template>
</vxe-table-column>
</PTVXETable>
</Col>
</Row>
</template>
</TwoCard>
</div>
<div slot="footer">
<modal-footer ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></modal-footer>
</div>
</Modal>
<!--自定义post请求iframe-->
<RecordIframe ref="iframeModal"></RecordIframe>
</div>
</template>
<script>
/**
* 选择原始记录模板（实验室的）
*/
import Global from '../../../api/config'
import TwoCard from '../../../components/base/TwoCard'
import RecordIframe from './RecordIframe'
import OriginalRecordClassTree from './OriginalRecordClassTree'
let count = 0
export default {
components: {
OriginalRecordClassTree,
TwoCard,
RecordIframe
},
data() {
return {
showModal: false,
getPage: {},
pageColumns: [{ title: '名称', key: 'title' }],
formObj: {
id: '',
title: '',
businessTypeList: 0
},
selectData: [],
itemIds: [],
footerList: [
{ id: '', name: '取消', type: '' },
{ id: '', name: '确定', type: 'primary' }
]
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('', 380)
}
},
mounted() {
// 监听原始记录消息
window.addEventListener('message', this._saveOriginal)
},
// 销毁监听事件
beforeDestroy() {
count = 0
window.removeEventListener('message', this._saveOriginal)
},
methods: {
// 刷新左右数据
_refresh() {
this.formObj = this.$resetFields(this.formObj)
this.formObj.businessTypeList = 0
// this.$refs.classTree._requestByBusinessTypeList()
this._search()
},
// 左侧数据请求
_classTree() {
const height = this.$tableHeight('', 345)
this.$refs.classTree._Ztree(height, 0)
},
// 左边树的点击
_classData(result) {
if (result !== undefined) {
this.formObj.id = result.id
} else {
this.formObj.id = ''
}
this._search()
},
/** *modal-footer */
_footerResult(name) {
switch (name) {
case '取消':
this.showModal = false
break
case '确定':
this._ok()
break
}
},
_hideLoading() {
this.$refs.footerModal._hideLoading()
},
_open(ids) {
this.formObj = this.$resetFields(this.formObj)
this._classTree()
this.showModal = true
this.itemIds = ids
this.formObj.businessTypeList = 0
// this._page()
this.selectData = []
this._hideLoading()
count = 0
},
_page() {
// 只查实验室的
this.$refs.pageTable._page(
'',
'ElnTemplate/page',
this.$serializeFormSearch(this.formObj)
)
},
_search() {
this.$refs.pageTable._pageChange(1)
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this.selectData = []
this.getPage = this.$store.state.ElnTemplate.page
break
case 'radioSelect':
this.selectData = [data]
break
case 'dbSelect':
this.selectData = [data]
this._ok()
break
case 'changeSize':
this._page()
break
}
},
_ok() {
if (this.selectData.length === 0) {
this.$Message.warning('请选择一个原始记录模板！')
this._hideLoading()
} else {
// 校验多样品多项目原始记录模板
const param = {
ids: this.itemIds.join(','),
tempId: this.selectData[0].id
}
this.$store.dispatch('EnvItem/checkLimit', param).then(() => {
const result = this.$store.state.EnvItem.success
if (result) {
// 不是多样品项目模板或者数量小于限值,填写原始记录
// (3)originalTemplateId不为0也不为undefined ---- 填写过或者绑定过
this._bindOriginalRecord()
} else {
this.$msgTip('warning', '所选数据超过，原始记录模板设置最大值！')
this._hideLoading()
}
})
}
},
// 生成原始记录
_bindOriginalRecord() {
this.$store
.dispatch('EnvItem/allCommonSampleCount', {
ids: this.itemIds.join(',')
})
.then(() => {
const result = this.$store.state.EnvItem.list
let allSampleCount = ''
let normalSampleCount = ''
let itemCount = ''
let parallel = ''
let labelSample = ''
result.forEach(item => {
if (item.sampleCountType === 'all') {
allSampleCount = item.sampleCountInteger
} else if (item.sampleCountType === 'normal') {
normalSampleCount = item.sampleCountInteger
} else if (item.sampleCountType === 'item') {
itemCount = item.sampleCountInteger
} else if (item.sampleCountType === 'parallel') {
parallel = item.sampleCountInteger
} else if (item.sampleCountType === 'mark') {
labelSample = item.sampleCountInteger
}
})
this.showModal = false
const url =
Global.recordURL +
'/print/v1/eln/template_YT_' +
this.selectData[0].id
const params = {
ids: this.itemIds.join(','),
allSampleCount: allSampleCount,
normalSampleCount: normalSampleCount,
itemCount: itemCount,
parallelCount: parallel,
labelSample: labelSample
}
this.$refs.iframeModal._createIframe(url, params)
localStorage.setItem('recordStatus', 'addLabRecord')
// this.$layx('recordAddTemplate', '原始记录添加', Global.recordURL + '/print/v1/eln/template_YT_'
// + this.selectData[0].id
// + '?bindUri=' + encodeURIComponent(bindUri))
})
},
_recordChange() {
this.$emit('on-result-change')
},
// 保存原始记录信息
_saveOriginal(data) {
if (localStorage.getItem('recordStatus') === 'addLabRecord') {
if (count === 0) {
if (data.data.msg !== true) {
// 添加
const tempData = {
formId: data.data.msg,
ids: this.itemIds.join(',')
}
console.log('saveData', data)
const copyMapTemp = {}
if (data.data.copySheet && data.data.copyedSheet) {
tempData.copyMap = {}
const copyedKey = String(data.data.copyedSheet)
copyMapTemp[copyedKey] = ''
copyMapTemp[copyedKey] = String(data.data.copySheet)
// 存在复制sheet的情况
tempData.copyMap = JSON.stringify(copyMapTemp)
} else if (typeof data.data.testValueArry !== 'undefined') {
const testValue = data.data.testValueArry
tempData.copyMap = {}
testValue.forEach(item => {
const copyedKey = String(item.copyedSheet)
copyMapTemp[copyedKey] = ''
copyMapTemp[copyedKey] = String(item.copySheet)
tempData.copyMap = JSON.stringify(copyMapTemp)
})
}
this.$store
.dispatch('EnvItem/saveFormForItem', tempData)
.then(() => {
if (this.$store.state.EnvItem.success) {
this.$Message.success('添加成功')
this._recordChange()
this.$refs.iframeModal._closeIframe()
// 关闭所有layx弹框
// layx.destroyAll('recordAddTemplate');
}
})
}
}
count = count + 1
}
}
}
}
</script>
pages/meter-statistics/certificate-rate/MeterCertificateRate.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</el-date-picker> </el-date-picker>
</Form-item> </Form-item>
<Form-item class="marginLeft-70" style="margin-left: -60px;"> <Form-item class="marginLeft-70" style="margin-left: -60px;">
<Button type="primary" class="width-80" @click="_getData">搜索</Button> <Button type="primary" class="width-80" @click="_search">搜索</Button>
</Form-item> </Form-item>
</Form> </Form>
</div> </div>
...@@ -111,8 +111,6 @@ export default { ...@@ -111,8 +111,6 @@ export default {
this.$refs.contractTableModal._pieOpen(res) this.$refs.contractTableModal._pieOpen(res)
}, },
_getData: async function() { _getData: async function() {
this.forObject.edateBegin = this.queryDate[0]
this.forObject.edateEnd = this.queryDate[1]
console.log('753951') console.log('753951')
console.log('选择时间后的请求', this.forObject) console.log('选择时间后的请求', this.forObject)
const result = await meterSample.pageCertificateRateStatistics( const result = await meterSample.pageCertificateRateStatistics(
......
pages/meter-statistics/certificate-rate/ReportTimelyTable.vue
...@@ -31,7 +31,9 @@ export default { ...@@ -31,7 +31,9 @@ export default {
return { return {
loading: true, loading: true,
formObj: { formObj: {
client: undefined client: undefined,
edateBegin: undefined,
edateEnd: undefined
}, },
pageColumns: [ pageColumns: [
{ title: '样品编号', key: 'code', width: 180 }, { title: '样品编号', key: 'code', width: 180 },
...@@ -55,6 +57,8 @@ export default { ...@@ -55,6 +57,8 @@ export default {
methods: { methods: {
// 日期变化时，将时间赋值，导出根据查询条件 // 日期变化时，将时间赋值，导出根据查询条件
_changeDate(data) { _changeDate(data) {
console.log(123456)
console.log(data)
$('input[name=beginDate]').val(data.beginDate) $('input[name=beginDate]').val(data.beginDate)
$('input[name=endDate]').val(data.endDate) $('input[name=endDate]').val(data.endDate)
$('input[name=type]').val('') $('input[name=type]').val('')
...@@ -70,6 +74,8 @@ export default { ...@@ -70,6 +74,8 @@ export default {
$('input[name=beginDate]').val(data.beginDate) $('input[name=beginDate]').val(data.beginDate)
$('input[name=endDate]').val(data.endDate) $('input[name=endDate]').val(data.endDate)
$('input[name=type]').val('') $('input[name=type]').val('')
this.formObj.edateBegin = data.beginDate
this.formObj.edateEnd = data.endDate
this._page() this._page()
}, },
_pieOpen(res) { _pieOpen(res) {
...@@ -82,6 +88,7 @@ export default { ...@@ -82,6 +88,7 @@ export default {
// }, // },
_page: async function() { _page: async function() {
Object.assign(this.formObj, this.$refs.pageTable._searchParams()) Object.assign(this.formObj, this.$refs.pageTable._searchParams())
console.log('要传的参数', this.formObj)
const result = await meterSample.pageCertificateRateSample(this.formObj) const result = await meterSample.pageCertificateRateSample(this.formObj)
if (result) { if (result) {
this.$refs.pageTable._hideLoading() this.$refs.pageTable._hideLoading()
......
plugins/iframe.js 0 → 100644
const Iframe = {
// modal 框的 id
modalId: '',
// 默认最大化
isMax: true,
// 创建弹出框并弹出
iframe: function(url, params, options) {
const currentObj = this
const windowWidth = $(window).width()
const windowHeight = $(window).height()
// 加一个遮罩层
// let div = document.createElement('div');
// div.style.width = '100%';
// div.style.height = '100%';
// div.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
// div.style.zIndex = '999';
// div.style.position = 'fixed';
// div.style.top = '0';
// div.style.left = '0';
// div.className = 'record-modal-div';
// document.body.appendChild(div);
const modalId = 'modal-' + new Date().getTime()
// 首先创建框架的 div 等视觉元素
const modalDiv = document.createElement('div')
// 创建loading div
const loadingDiv = document.createElement('div')
const loadingIcon = document.createElement('i')
const loadingText = document.createElement('span')
loadingDiv.className = 'record-loading-content'
loadingIcon.className = 'ivu-icon ivu-icon-load-c demo-spin-icon-load'
loadingText.innerText = '加载中，请稍后...'
loadingDiv.appendChild(loadingIcon)
loadingDiv.appendChild(loadingText)
modalDiv.id = modalId
modalDiv.className = 'record-modal'
// 设置属性
$(modalDiv).css({
'z-index': '3000',
left: '0',
top: '0',
height: windowHeight,
width: windowWidth
})
// 设置loading的样式
// $(loadingDiv).css({
// // 'left': (windowWidth - 800) / 2,
// // 'top': (windowHeight - 500) / 3,
// 'height': '100%',
// 'width': '100%',
// });
// 放入 document 中
document.body.appendChild(modalDiv)
$(modalDiv).draggable()
// modalDiv 创建标题栏
const modalHeaderDiv = document.createElement('div')
modalHeaderDiv.className = 'record-modal-header'
modalDiv.appendChild(modalHeaderDiv)
// 左边的title
const modalTitleDiv = document.createElement('div')
modalTitleDiv.className = 'record-modal-title'
modalHeaderDiv.appendChild(modalTitleDiv)
modalTitleDiv.innerText = '原始记录添加'
// 标题栏中有按钮
const modalBtnDiv = document.createElement('div')
modalBtnDiv.className = 'record-modal-btn'
modalHeaderDiv.appendChild(modalBtnDiv)
// 里面三个按钮
const minBtn = document.createElement('div')
const maxBtn = document.createElement('div')
const closeBtn = document.createElement('div')
// 图标
const minIcon = document.createElement('i')
const maxIcon = document.createElement('i')
const colseIcon = document.createElement('i')
// — □ x
minBtn.className = 'record-modal-min'
minBtn.title = '最小化'
// minBtn.innerText = '—';
modalBtnDiv.appendChild(minBtn)
minIcon.className = 'ivu-icon ivu-icon-ios-minus-empty'
minBtn.appendChild(minIcon)
maxBtn.className = 'record-modal-max'
maxBtn.title = '最大化'
// maxBtn.innerText = '□';
modalBtnDiv.appendChild(maxBtn)
maxIcon.className = 'ivu-icon ivu-icon-ios-browsers-outline'
maxBtn.appendChild(maxIcon)
closeBtn.className = 'record-modal-close'
closeBtn.title = '关闭'
// closeBtn.innerText = '×';
colseIcon.className = 'ivu-icon ivu-icon-ios-close-empty'
closeBtn.appendChild(colseIcon)
closeBtn.addEventListener('click', function closeBtnClickFunc() {
currentObj.closeModalDiv()
})
modalBtnDiv.appendChild(closeBtn)
// 创建 content 内容的 div
const contentDiv = document.createElement('div')
contentDiv.className = 'record-modal-content'
contentDiv.id = 'record-modal-content'
$(contentDiv).css({
height: windowHeight - 30 + 'px'
})
modalDiv.appendChild(contentDiv)
// 开始渲染 iframe 了
// 动态创建并绑定URL
const name = 'iframeName'
// 创建 iframe
const iframeElement = document.createElement('iframe')
iframeElement.name = name
iframeElement.style.width = '100%'
iframeElement.style.height = '100%'
iframeElement.style.display = 'none'
iframeElement.scrolling = 'no'
iframeElement.frameBorder = '0'
contentDiv.appendChild(iframeElement)
// loading事件
contentDiv.appendChild(loadingDiv)
// 创建 form
const formElement = document.createElement('form')
formElement.action = url
formElement.target = name
// 表单的方法提交
formElement.method = 'post'
formElement.style.display = 'none'
contentDiv.appendChild(formElement)
// 创建表单需要提交的数据
if (params !== undefined && params !== '{}') {
for (const key in params) {
const formInput = document.createElement('input')
formInput.setAttribute('type', 'hidden')
formInput.name = key
formInput.value = params[key]
formElement.appendChild(formInput)
}
}
// 提交
formElement.submit()
// 各种事件
// 点击最大化的事件
$(maxBtn).bind('click', function(e) {
currentObj.maxAnimate(
currentObj,
modalDiv,
windowWidth,
windowHeight,
contentDiv,
modalBtnDiv,
maxBtn
)
})
$(modalHeaderDiv).bind('dblclick', function() {
currentObj.maxAnimate(
currentObj,
modalDiv,
windowWidth,
windowHeight,
contentDiv,
modalBtnDiv,
maxBtn
)
})
// 最小化事件
$(minBtn).bind('click', function() {
// 将 modal 隐藏, 并在左下角显示一个小框
$(modalDiv).css('display', 'none')
// 左下角创建小框
const littleModal = document.createElement('div')
$(littleModal).css({
width: '300px',
height: '30px',
position: 'fixed',
left: '100px',
bottom: '100px',
border: '1px solid #0079fd',
'background-color': '#ffffff',
'box-shadow': '0px 0px 10px #000000',
'z-index': '3000'
})
document.body.appendChild(littleModal)
// 存放标题
const littleTitleDiv = document.createElement('div')
$(littleTitleDiv).css({
width: '220px',
float: 'left',
'line-height': '30px',
'padding-left': '5px'
})
$(littleTitleDiv).text('原始记录添加')
littleModal.appendChild(littleTitleDiv)
// 存放按钮的 div
const littleBtnDiv = document.createElement('div')
littleBtnDiv.className = 'record-modal-btn'
$(littleBtnDiv).css({
width: '80px',
float: 'left'
})
littleModal.appendChild(littleBtnDiv)
// 两个按钮
const littleMaxBtn = document.createElement('div')
const littleCloseBtn = document.createElement('div')
// □ x
// littleMaxBtn.className = 'modal-max';
// littleMaxBtn.innerText = '□';
// littleBtnDiv.appendChild(littleMaxBtn);
littleMaxBtn.className =
'record-modal-max ivu-icon ivu-icon-ios-browsers-outline'
littleBtnDiv.appendChild(littleMaxBtn)
// littleCloseBtn.className = 'modal-close';
littleCloseBtn.className =
'record-modal-close ivu-icon ivu-icon-ios-close-empty'
littleBtnDiv.appendChild(littleCloseBtn)
// littleCloseBtn.innerText = '×';
// littleBtnDiv.appendChild(littleCloseBtn);
$(littleCloseBtn).bind('click', function() {
// 销毁小窗口
littleModal.remove()
// 销毁大窗口, 虽然隐形了, 但是还是要销毁
modalDiv.remove()
})
//
$(littleMaxBtn).bind('click', function() {
// 大窗口显示
$(modalDiv).css('display', 'block')
// 小窗口销毁
littleModal.remove()
})
})
// 给iframe绑定load时间监听渲染完毕
$(iframeElement).bind('load', function() {
$(loadingDiv).css('display', 'none')
$(modalDiv).css('display', 'block')
$(modalTitleDiv).text('原始记录添加')
$(iframeElement).css('display', 'block')
})
window.onresize = function() {
const newHeight = $(window).height()
if (newHeight >= windowHeight) {
$(modalDiv).css({
height: newHeight
})
contentDiv.style.height = newHeight - 30 + 'px'
}
}
},
closeModalDiv: function() {
const es = document.getElementsByClassName('record-modal')
const length = es.length
for (let i = 0; i < length; i++) {
const e = es[i]
e.remove()
}
},
maxAnimate: function(
currentObj,
modalDiv,
windowWidth,
windowHeight,
contentDiv,
modalBtnDiv,
maxBtn
) {
if (currentObj.isMax) {
// 此时应该还原, 但是如果拖动了的话, 需要重置为最大化
if ($(modalDiv).offset().top !== 0 || $(modalDiv).offset().left !== 0) {
$(modalDiv).css({
top: '0',
left: '0'
})
return false
}
// 如果已经最大化了, 点击按钮就是还原
$(modalDiv).css({
left: (windowWidth - 800) / 2,
top: (windowHeight - 500) / 3,
width: '800px',
height: '500px'
})
// 重置 content 的高度
$(contentDiv).css('height', '470px')
$(modalBtnDiv).css('margin-left', '680px')
// 已经还原
currentObj.isMax = false
maxBtn.title = '最大化'
} else {
// 没有最大化窗口, 点击按钮就是最大化窗口
// 获取 document 的大小
$(modalDiv).css({
width: windowWidth + 'px',
height: windowHeight + 'px',
margin: '0',
top: '0',
left: '0'
})
// 重置 content 的高度
$(contentDiv).css('height', windowHeight - 30 + 'px')
// 按钮需要移到最右面
$(modalBtnDiv).css('margin-left', windowWidth - 120 + 'px')
// 已经最大化了
currentObj.isMax = true
maxBtn.title = '还原'
}
}
}
export { Iframe }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment