Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
c26959ae by 任超
Options

style:弹框组件完成重构

1 parent 1d3c7e3a
Inline Side-by-side
Showing 6 changed files with 281 additions and 152 deletions
import Vue from 'vue'
import Popup from './index.vue'
const PopupBox = Vue.extend(Popup)
let popuping = undefined
PopupBox.prototype.close = function () {
// 如果Popup 有引用，则去掉引用
if (popuping) {
popuping = undefined
}
// 先将组件隐藏
this.isShow = false
// 延迟300毫秒，等待Popup关闭动画执行完之后销毁组件
setTimeout(() => {
// 移除挂载的dom元素
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el)
}
}, 300)
}
const Popup1 = (title, editItem, data, formData) => {
// 如果组件已渲染，则返回即可
if (popuping) {
return popuping
}
data.title = title
data.editItem = editItem
if (formData) {
data.formData = formData
}
// 通过构造函数初始化组件 相当于 new Vue()
let instance = new PopupBox({
data
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.isShow = true
})
// 将组件实例赋值给loading
popuping = instance
return instance
}
export default Popup1
<template>
<transition name="msgbox-fade" v-if="myShow">
<div class="ls-mask" v-loading="loading">
<div class="ls-mask-window" :style="{ 'width': width }">
<div class="ls-head">
<div class="ls-title" :style="{ 'text-align': titleStyle }">
<svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
<b>{{ title }}</b>
</div>
<svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
</div>
<div class="mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
<component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' />
</div>
<div class="ls-mask-footer" v-if='btnShow'>
<el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button>
<el-button @click="onCancel">{{ cancelText }}</el-button>
</div>
</div>
</div>
</transition>
</template>
<script>
import Popup1 from './index'
export default {
name: 'index',
data () {
return {
title: '标题',
editItem: "",
formData: undefined,//父组件传递的参数 负责传给子组件
btnShow: false,
cancel: function () { },
confirm: function () { },
cancelText: '取消',
confirmText: '确认',
isSync: false,
isShow: false,
myShow: false,
titleStyle: 'center',
width: "75%",
height: "auto",
contentHeight: "",
iconClass: "",
key: 0
}
},
props: {
loading: { type: Boolean, default: false },
},
watch: {
isShow (newValue) {
this.editItem = this.loadViewFn(this.editItem)
document.body.appendChild(this.$el);
this.myShow = newValue
}
},
mounted () {
// 计算滚动条高度
setTimeout(() => {
if (this.btnShow) {
if (this.height == 'auto') {
this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
} else {
this.contentHeight = this.height
}
} else {
if (this.height == 'auto') {
this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
} else {
this.contentHeight = this.height
}
}
}, 300)
},
methods: {
onCancel () {
Popup1().close()
},
onConfirm () {
this.loading = true
let res = new Promise((resolve, reject) => {
this.confirm()
resolve(true)
})
if (res) {
this.isShow = false
}
},
loadingFn (e) { //加载状态
this.loading = e
},
loadViewFn (view) {
return (r) =>
require.ensure([], () =>
r(require(`@/views/${view}.vue`))
)
}
},
destroyed () {
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
}
</script>
<style scoped lang="scss" >
.ls-mask {
width: 100%;
height: 100%;
z-index: 2000;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
}
.ls-mask-window {
background: white;
position: relative;
left: 50%;
top: 50%;
min-height: 200px;
transform: translate(-50%, -50%);
border-radius: 5px;
overflow: hidden;
}
.ls-mask-window b {
padding-left: 5px;
}
.ls-title {
padding: 16px;
color: #ffffff;
background: linear-gradient(3deg, #409EFF, #a7cbee);
}
.ls-title .svg-icon {
font-size: 18px;
}
.mask-content {
padding: 20px;
width: 100%;
min-height: 30%;
max-height: 95%;
overflow-y: scroll;
}
.ls-mask-footer {
height: 50px;
display: flex;
justify-content: center;
width: 100%;
position: absolute;
border-top: 1px solid $borderColor;
bottom: 0;
background: #ffffff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
/deep/.closeStyle {
position: absolute;
top: 13px;
right: 26px;
font-size: 24px;
cursor: pointer;
color: #409EFF;
}
/deep/.el-loading-mask {
background: none;
}
/deep/.el-button {
margin: 8px 10px;
width: 75px;
}
</style>
\ No newline at end of file
弹窗封装
2.用法以及参数：
this.$popup('提示','ywbl/dbx/aa',{
width: '75%', // 初始化75% 不需要改的话 可以直接不要
formData: this.formData, // 父组件传给子组件的参数
cancel: function () {}, //取消事件的回调 没有按钮可以不需要
confirm: function () {} //确认事件的回调 没有按钮可以不需要
})
5.后续有修改请添加在此处文档说明作用
\ No newline at end of file
import Popup from '@/components/Popup/index'
import Popup1 from '@/components/Popup1/index'
export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) {
Popup.install(title, url, {
// Popup.install
Popup1(title, url, {
height: height,
width: width,
formData: params,
......@@ -13,3 +15,20 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow
}
})
}
export function popupDialog1 (title, url, params, width = '75%', height, btnShow = false, callback) {
Popup1(title, url, {
height: height,
width: width,
formData: params,
btnShow: btnShow,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
callback
}
})
}
export function popupCacel () {
Popup1().close()
}
\ No newline at end of file
......
......@@ -32,7 +32,7 @@
<div class="text color_red">
<span>{{ item.syqx }}</span>
</div>
<div class="top_line middle_margin"></div>
<!-- <div class="top_line middle_margin"></div> -->
<div class="text color_iray">
<span>印刷序列号：{{ item.ysxlh }}</span>
</div>
......@@ -40,54 +40,25 @@
<div class="card_padding">
<div class="top_line middle_margin"></div>
<div class="text" v-if="item.ysxlh">
<el-button
class="operation_button"
type="text"
@click="openInvalidDiglog(item)"
>再次打印（{{ item.szcs }})</el-button
>
<el-button
class="operation_button"
type="text"
@click="openRecordPop(item)"
>缮证记录</el-button
>
<el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs
}})</el-button>
<el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
</div>
<div class="text" v-else>
<el-button
class="operation_button"
type="text"
@click="openZsylDialog(item,2)"
>证书打印（{{ item.szcs }}）</el-button
>
<el-button
class="operation_button"
type="text"
@click="openRecordPop(item)"
>缮证记录</el-button
>
<el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs
}}）</el-button>
<el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
</div>
</div>
</el-card>
<el-dialog
title="证书作废"
:visible.sync="invalidDiglog"
width="30%"
:modal-append-to-body="false"
top="30vh"
>
<el-dialog title="证书作废" :visible.sync="invalidDiglog" width="30%" :modal-append-to-body="false" top="30vh">
<div class="invalid-diglog">
<div class="invalid-title">
<i class="el-icon-question invalid-icon"></i>
<div class="invalid-body">您确定作废证书并再次打印？</div>
</div>
<div class="invalid-reson">作废原因：</div>
<el-input
v-model="zfyy"
placeholder="请输入作废原因"
type="textarea"
:rows="4"
></el-input>
<el-input v-model="zfyy" placeholder="请输入作废原因" type="textarea" :rows="4"></el-input>
<div class="dialog-footer">
<el-button @click="closeInvalidDiglog()">取 消</el-button>
<el-button type="primary" @click="confirmInvalid()">确 定</el-button>
......@@ -99,13 +70,13 @@
</div>
</template>
<script>
import { getSlsqBdcqzList, invalidCertificate,getSzRecordList } from "@/api/bdcqz.js";
import { getSlsqBdcqzList, invalidCertificate, getSzRecordList } from "@/api/bdcqz.js";
import bdcqzPrint from "./zsdy.vue";
import { popupDialog } from "@/utils/popup.js";
export default {
components: { bdcqzPrint },
props: {},
data() {
data () {
return {
dialog: false,
tableData: [],
......@@ -116,12 +87,12 @@ export default {
bsmSz: "",
};
},
created() {
created () {
this.list();
},
methods: {
//初始化列表
list() {
list () {
var bsmSlsq = this.$route.query.bsmSlsq;
getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
if (res.code === 200) {
......@@ -133,23 +104,16 @@ export default {
});
},
//打开证书预览弹窗
openZsylDialog(item, type) {
openZsylDialog (item, type) {
let that = this;
if (type == 1) {
//证书预览
this.$popup("证书预览", "workflow/components/zsyl", {
height: "650px",
height: "630px",
width: "800px",
formData: {
bdcqz: item,
},
btnShow: false,
cancel: () => {
console.log("取消回调");
},
confirm: () => {
console.log("取消回调");
},
}
});
} else {
this.$nextTick(() => {
......@@ -177,17 +141,17 @@ export default {
}
},
//再次打印
openInvalidDiglog(item) {
openInvalidDiglog (item) {
this.bsmSz = item.bsmSz;
this.invalidDiglog = true;
},
closeInvalidDiglog() {
closeInvalidDiglog () {
this.invalidDiglog = false;
this.bsmSz = "";
this.zfyy = "";
},
//作废缮证信息
confirmInvalid() {
confirmInvalid () {
invalidCertificate({ bsmSz: this.bsmSz, zfyy: this.zfyy }).then((res) => {
if (res.code === 200) {
this.list();
......@@ -199,8 +163,8 @@ export default {
}
});
},
openRecordPop(item) {
popupDialog("缮证记录", "workflow/components/szRecord", {bsmBdcqz: item.bsmBdcqz}, '50%')
openRecordPop (item) {
popupDialog("缮证记录", "workflow/components/szRecord", { bsmBdcqz: item.bsmBdcqz }, '50%')
}
},
};
......
......@@ -28,100 +28,7 @@
</el-form>
</div>
<img :src="previewImage">
<!-- <div
class="aaaa"
v-if="bdcqz.bdcqzlx == 1"
:style="{
backgroundImage: 'url(' + require('@/image/bdcqz/bdcqzs2.jpg') + ')',
}"
>
<div class="bdcqzh">
<span>{{ bdcqz.sjjc }}</span> <span>{{ bdcqz.djnd }}</span>
<span>{{ bdcqz.sxqc }}</span> <span>{{ bdcqz.sxh }}</span>
</div>
<div class="zsyl-box">
<div class="zsyl-left">
<div class="qlr">
{{ bdcqz.qlr }}
</div>
<div class="gyqk">
{{ bdcqz.gyqk }}
</div>
<div class="zl">
{{ bdcqz.zl }}
</div>
<div class="bdcdyh">
{{ bdcqz.bdcdyh }}
</div>
<div class="qllx">
{{ bdcqz.qllx }}
</div>
<div class="qlxz">
{{ bdcqz.qlxz }}
</div>
<div class="yt">
{{ bdcqz.yt }}
</div>
<div class="mj">
{{ bdcqz.mj }}
</div>
<div class="syqx">
{{ bdcqz.syqx }}
</div>
<div class="qt">
{{ bdcqz.qlqtzk }}
</div>
</div>
<div class="zsyl-right">
<div class="fj">{{ bdcqz.fj }}</div>
</div>
</div>
</div>
<div
class="bdcdjzm"
v-else
:style="{
backgroundImage: 'url(' + require('@/image/bdcqz/bdcdjzm.jpg') + ')',
}"
>
<div class="bdcqzh">
<span>{{ bdcqz.sjjc }}</span> <span>{{ bdcqz.djnd }}</span>
<span>{{ bdcqz.sxqc }}</span> <span>{{ bdcqz.sxh }}</span>
</div>
<div class="zmyl-box">
<div class="qlr">
{{ bdcqz.qlr }}
</div>
<div class="gyqk">
{{ bdcqz.gyqk }}
</div>
<div class="zl">
{{ bdcqz.zl }}
</div>
<div class="bdcdyh">
{{ bdcqz.bdcdyh }}
</div>
<div class="qllx">
{{ bdcqz.qllx }}
</div>
<div class="qlxz">
{{ bdcqz.qlxz }}
</div>
<div class="yt">
{{ bdcqz.yt }}
</div>
<div class="mj">
{{ bdcqz.mj }}
</div>
<div class="syqx">
{{ bdcqz.syqx }}
</div>
<div class="qt">
{{ bdcqz.qlqtzk }}
</div>
<div class="fj">{{ bdcqz.fj }}</div>
</div>
</div> -->
</div>
</dialogBox>
</template>
......