Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
05285b16 by renchao@pashanhoo.com
Options

style:业务申请提示弹框

1 parent ff0c5ac9
Inline Side-by-side
Showing 23 changed files with 458 additions and 191 deletions
......@@ -21,170 +21,168 @@
</transition>
</template>
<script>
import Popup1 from './index'
export default {
name: 'index',
data () {
return {
title: '标题',
editItem: "",
isMain: false,
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
}
},
watch: {
isShow (newValue) {
this.$nextTick(() => {
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'
import Popup1 from './index'
export default {
name: 'index',
data () {
return {
title: '标题',
editItem: "",
isMain: false,
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
}
},
watch: {
isShow (newValue) {
this.$nextTick(() => {
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 {
this.contentHeight = this.height
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 () {
let res = new Promise((resolve, reject) => {
this.confirm()
resolve(true)
})
if (res) {
this.isShow = false
}
},
loadViewFn (view) {
return (r) =>
require.ensure([], () =>
r(require(`@/views/${view}.vue`))
)
}
}, 300)
},
methods: {
onCancel () {
Popup1().close()
},
onConfirm () {
let res = new Promise((resolve, reject) => {
this.confirm()
resolve(true)
})
if (res) {
this.isShow = false
destroyed () {
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
},
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" >
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";
.ls-mask {
width: 100%;
height: 100%;
z-index: 500;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
}
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";
.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 {
width: 100%;
height: 100%;
z-index: 500;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
}
.ls-mask-window b {
padding-left: 5px;
}
.ls-mask-window {
background: white;
position: relative;
left: 50%;
top: 50%;
min-height: 200px;
transform: translate(-50%, -50%);
border-radius: 5px;
overflow: hidden;
}
.ls-title {
padding: 16px;
color: #ffffff;
background: linear-gradient(3deg, #409EFF, #a7cbee);
font-size: 16px;
}
.ls-mask-window b {
padding-left: 5px;
}
.ls-title .svg-icon {
font-size: 18px;
}
.ls-title {
padding: 16px;
color: #ffffff;
background: linear-gradient(3deg, #409eff, #a7cbee);
font-size: 16px;
}
.mask-content {
padding: 20px;
width: 100%;
min-height: 30%;
max-height: 90vh;
overflow-y: scroll;
}
.ls-title .svg-icon {
font-size: 18px;
}
.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;
}
.mask-content {
padding: 20px;
width: 100%;
min-height: 30%;
max-height: 90vh;
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/.closeStyle {
position: absolute;
top: 13px;
right: 26px;
font-size: 24px;
cursor: pointer;
color: #409eff;
}
/deep/.el-loading-mask {
background: none;
}
/deep/.el-loading-mask {
background: none;
}
.dialog-fade-enter-active,
.dialog-fade-leave-active {
transition: opacity 0.3s;
}
.dialog-fade-enter-active,
.dialog-fade-leave-active {
transition: opacity 0.3s;
}
.dialog-fade-enter,
.dialog-fade-leave-to {
opacity: 0;
}
.dialog-fade-enter,
.dialog-fade-leave-to {
opacity: 0;
}
</style>
\ No newline at end of file
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-14 15:05:38
*/
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">
<div class="ls-mask" v-if="myShow">
<div class="ls-mask-window" :class="isMain ? 'mainCenter' : 'contentCenter'" :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' :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: "",
isMain: false,
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
}
},
watch: {
isShow (newValue) {
this.$nextTick(() => {
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 () {
let res = new Promise((resolve, reject) => {
this.confirm()
resolve(true)
})
if (res) {
this.isShow = false
}
},
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" >
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";
.ls-mask {
width: 100%;
height: 100%;
z-index: 500;
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);
font-size: 16px;
}
.ls-title .svg-icon {
font-size: 18px;
}
.mask-content {
padding: 20px;
width: 100%;
min-height: 30%;
max-height: 90vh;
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;
}
.dialog-fade-enter-active,
.dialog-fade-leave-active {
transition: opacity 0.3s;
}
.dialog-fade-enter,
.dialog-fade-leave-to {
opacity: 0;
}
</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
/*
* @Description: 弹框组件的封装
* @Autor: renchao
* @LastEditTime: 2023-04-11 09:31:14
* @LastEditTime: 2023-07-07 09:21:10
*/
import Popup from '@/components/Popup/index'
import ywPopup from '@/components/ywPopup/index'
import Popup1 from '@/components/Popup1/index'
export function popupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) {
// Popup.install
......@@ -18,10 +18,32 @@ export function popupDialog (title, url, params, width = '75%', isMain, height,
},
confirm: () => {
callback()
}
},
popupDialog: popupDialog // 将 popupDialog 方法传递给弹框组件
})
}
export function ywPopupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) {
// Popup.install
ywPopup(title, url, {
height: height,
width: width,
formData: params,
btnShow: btnShow,
isMain: isMain,
cancel: () => {
cancel()
},
confirm: () => {
callback()
},
popupDialog: popupDialog // 将 popupDialog 方法传递给弹框组件
})
}
export function popupCacel () {
Popup1().close()
}
export function ywPopupCacel () {
ywPopupDialog().close()
}
\ No newline at end of file
......
......@@ -72,8 +72,8 @@
<el-input v-model="ruleForm.cfdjList[0].cfwh" :disabled="$route.query.viewtype || isJfOperation"></el-input>
</el-form-item>
</el-col>
<!-- 批量查封状态有多种查封类型，不予展示 -->
<!-- <el-col :span="8">
<!-- 批量查封状态有多种查封类型，不予展示 -->
<!-- <el-col :span="8">
<el-form-item :class="flag ? 'marginBot0' : ''" label="查封类型：" prop="cfdj.cflxmc">
<el-input v-model="ruleForm.cfdjList[0].cflxmc" disabled></el-input>
</el-form-item>
......
......@@ -192,28 +192,28 @@
this.queryClick();
},
ywhClick (item) {
//有任务权限
if(item.sjlx=="3"){
const { href } = this.$router.resolve(
"/djbworkFrameview?bsmSlsq=" +
item.bsmSlsq +
"&bestepid=" +
item.bestepid+
"&isEdit=" +
true
);
window.open(href, `urlname${item.bsmSlsq}`);
}else{
const { href } = this.$router.resolve(
"/workFrameView?bsmSlsq=" +
item.bsmSlsq +
"&bestepid=" +
item.bestepid +
"&bsmBusiness=" +
"&viewtype=1"
);
window.open(href, `urlname${item.bsmSlsq}`);
}
//有任务权限
if (item.sjlx == "3") {
const { href } = this.$router.resolve(
"/djbworkFrameview?bsmSlsq=" +
item.bsmSlsq +
"&bestepid=" +
item.bestepid +
"&isEdit=" +
true
);
window.open(href, `urlname${item.bsmSlsq}`);
} else {
const { href } = this.$router.resolve(
"/workFrameView?bsmSlsq=" +
item.bsmSlsq +
"&bestepid=" +
item.bestepid +
"&bsmBusiness=" +
"&viewtype=1"
);
window.open(href, `urlname${item.bsmSlsq}`);
}
},
......
......@@ -138,9 +138,9 @@
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
});
})
} else {
choiceBdcdy({
bsmSlsq: this.$route.query.bsmSlsq,
......
......@@ -119,7 +119,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -241,7 +241,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
} else {
......@@ -258,7 +258,7 @@
store.dispatch('user/refreshPage', true);
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
}
......
......@@ -108,7 +108,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -105,7 +105,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -133,7 +133,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message)
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -161,7 +161,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -110,7 +110,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -110,7 +110,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -118,7 +118,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-16 09:37:51
* @LastEditTime: 2023-07-07 09:27:48
-->
<template>
<div class="from-clues">
......@@ -246,7 +246,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message)
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -50,7 +50,7 @@
import jump from "./mixin/jump";
import store from '@/store/index.js'
import table from "@/utils/mixin/table";
import { popupDialog, popupCacel } from "@/utils/popup.js";
import { ywPopupDialog } from "@/utils/popup.js";
import { startBusinessFlow, selectZdjbxx } from "@/api/ywbl.js";
import { datas, sendThis } from "../javascript/selectQjzdjbxx.js";
import { defaultParameters } from "../javascript/publicDefaultPar.js";
......@@ -116,7 +116,7 @@
}
this.$popupCacel()
} else {
popupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -118,7 +118,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -110,7 +110,7 @@
this.$popupCacel()
}
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -110,7 +110,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......
......@@ -111,7 +111,7 @@
}
this.$popupCacel()
} else {
this.$message.error(res.message);
ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
}
})
},
......