vue详情页弹框
最近公司新项目需要用到详情页弹框 效果，踩坑无数啊，终于解决了，大家应该理解我现在心里的一万头草泥马在策马奔腾的那种感觉吧！！！
废话不多说直接上代码！
下面是一个moduls页：
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障站点类型">
<a-input placeholder="* 请输入故障站点类型" v-decorator="['faultSiteType', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障子系统">
<a-input placeholder="* 请输入故障子系统" v-decorator="['faultSubsystem', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障组件">
<a-input placeholder="* 请输入故障组件" v-decorator="['faultAssembly', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障现象及原因">
<a-input placeholder="* 请输入故障现象及原因" v-decorator="['faultReason', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="解决及处理方法">
<a-input placeholder="* 请输入解决及处理方法" v-decorator="['resolvent', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="附件地址">
<a-input placeholder=" 请输入附件地址" v-decorator="['fileUrl', {}]" />
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "FaultknowledgeModal",
data () {
return {
title:"操作",
visible: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
},
url: {
add: "/faultKnowledge/add",//后端代码的路径
edit: "/faultKnowledge/edit",//后端代码的路径
},
}
},
created () {
},
methods: {//这里面的方法可自行修改自己想要的，具体怎么修改看我的DetailsBounced这个页面
add () {
this.edit({});
},
edit (record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'faultSiteType','faultSubsystem','faultAssembly','faultReason','resolvent','creater','fileUrl'))
//时间格式化
this.form.setFieldsValue({faultTime:this.model.faultTime?moment(this.model.faultTime):null})
});
},
close () {
this.$emit('close');
this.visible = false;
},
handleOk () {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
//时间格式化
console.log(formData)
httpAction(httpurl,formData,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
that.close();
})
}
})
},
handleCancel () {
this.close()
},
}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/red.less';
</style>
下面是list页面：
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="故障站点类型">
<a-input placeholder="请输入故障站点类型" v-model="queryParam.faultSiteType"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="故障子系统">
<a-input placeholder="请输入故障子系统" v-model="queryParam.faultSubsystem"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<a-form-item label="故障组件">
<a-input placeholder="请输入故障组件" v-model="queryParam.faultAssembly"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="故障现象及原因">
<a-input placeholder="请输入故障现象及原因" v-model="queryParam.faultReason"></a-input>
</a-form-item>
</a-col>
<a-col :md="6" :sm="8">
<a-form-item label="解决及处理方法">
<a-input placeholder="请输入解决及处理方法" v-model="queryParam.resolvent"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :md="6" :sm="8" >
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('故障知识库的增删改查')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a @click="DetailsBounced(record)">详情</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
<details-bounced ref="DetailsBounced" ></details-bounced>
</div>
<!-- table区域-end -->
<!-- 表单区域 -->
<faultknowledge-modal ref="modalForm" @ok="modalFormOk"></faultknowledge-modal>
</a-card>
</template>
<script>
import FaultknowledgeModal from './modules/FaultknowledgeModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import DetailsBounced from './modules/DetailsBounced'
import { getAction } from '@/api/manage'
export default {
name: "FaultknowledgeList",
mixins:[JeecgListMixin],
components: {
FaultknowledgeModal,
DetailsBounced,
},
data () {
return {
description: '故障知识库的增删改查管理页面',
// 表头
columns: [
{
title: '序号',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '故障站点类型',
align:"center",
dataIndex: 'faultSiteType'
},
{
title: '故障子系统',
align:"center",
dataIndex: 'faultSubsystem'
},
{
title: '故障组件',
align:"center",
dataIndex: 'faultAssembly'
},
{
title: '创建人',
align:"center",
dataIndex: 'creater'
},
{
title: '创建时间',
align:"center",
dataIndex: 'createTime'
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' },
}
],
url: {
list: "/faultKnowledge/list",
delete: "/faultKnowledge/delete",
deleteBatch: "/faultKnowledge/deleteBatch",
exportXlsUrl: "/faultKnowledge/exportXls",
importExcelUrl: "/faultKnowledge/importExcel",
},
}
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
DetailsBounced(record){
// getAction(this.url.editCementSend,{anntId:record.anntId}).then((res)=>{
// if(res.success){
// //("aaa");
// this.loadData1();
// }
// });
this.$refs.DetailsBounced.detail(record);
//this.$refs.DetailsBounced.DetailsBounced();
},
},
created() {
this.loadData1()
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
这两个是完整的一个页面，里面的路径改下就可以使用增删改查了
下面是详情页的弹框：
<template>
<a-modal
class="announcementCustomModal"
:width="modelStyle.width"
:visible="visible"
:bodyStyle ="bodyStyle"
@cancel="handleCancel"
destroyOnClose
:footer="null">
<template slot="title">
<a-button icon="fullscreen" class="custom-btn" @click="handleClickToggleFullScreen"/>
</template>
<a-card class="daily-article" :loading="loading">
<a-card-meta
:description="'详情信息：'">
</a-card-meta>
<a-divider />
<span v-html="record.msgContent" class="article-content"></span>
</a-card>
<!-- <a-table-->
<!-- ref="table"-->
<!-- size="middle"-->
<!-- bordered-->
<!-- rowKey="id"-->
<!-- :columns="columns1"-->
<!-- :dataSource="dataSource2"-->
<!-- :pagination="ipagination"-->
<!-- :loading="loading"-->
<!-- @click="dataSource2"-->
<!-- @change="handleTableChange">-->
<!--<!– :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"–>-->
<!-- </a-table>-->
<!-- <a-spin :spinning="confirmLoading">-->
<a-form :form="form">
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障站点类型">
<a-input placeholder="* 请输入故障站点类型" v-model="model.faultSiteType" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障子系统">
<a-input placeholder="* 请输入故障子系统" v-model="model.faultSubsystem" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障组件">
<a-input placeholder="* 请输入故障组件" v-model="model.faultAssembly"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障现象及原因">
<a-input placeholder="* 请输入故障现象及原因" v-model="model.faultReason"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="解决及处理方法">
<a-input placeholder="* 请输入解决及处理方法" v-model="model.resolvent" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="附件地址">
<a-input placeholder=" 请输入附件地址" v-model="model.fileUrl" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建人">
<a-input placeholder=" 请输入创建人" v-model="model.creater" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建时间">
<a-input placeholder=" 请输入创建时间" v-model="model.createTime" />
</a-form-item>
</a-col>
</a-form>
<!-- </a-spin>-->
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource1"
:pagination="ipagination"
:loading="loading"
@click="dataSource1"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a-menu-item>
<a @click="DetailsBounced2(record)">详情</a>
</a-menu-item>
</span>
</a-table>
<details-bounced2 ref="DetailsBounced2"></details-bounced2>
</a-modal>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FaulthistoryModal from './FaulthistoryModal'
import FaultknowledgeModal from './FaultknowledgeModal'
import { getAction } from '@/api/manage'
import DetailsBounced2 from './DetailsBounced2'
import ACol from 'ant-design-vue/es/grid/Col'
export default {
name: "DetailsBounced",
mixins: [JeecgListMixin],
components: {
ACol,
FaulthistoryModal,
FaultknowledgeModal,
DetailsBounced2,
},
data() {
return {
dataSource0:{},
title: "通知消息",
record: {},
model:{},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
},
visible: false,
loading: false,
bodyStyle: {
padding: "0",
height: (window.innerHeight * 0.8) + "px",
"overflow-y": "auto",
},
modelStyle: {
width: '60%',
style: { top: '20px' },
fullScreen: false
},
dataResult:'',
columns: [
{
title: '序号',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '故障单ID',
align:"center",
dataIndex: 'faultId'
},
{
title: '故障类型',
align:"center",
dataIndex: 'faultType'
},
{
title: '解决及处理方法',
align:"center",
dataIndex: 'method'
},
{
title: '故障时间',
align:"center",
dataIndex: 'faultTime'
},
{
title: '处理人',
align:"center",
dataIndex: 'dealingWithPeople'
},
{
title: '设备名称',
align:"center",
dataIndex: 'equipmentName'
},
{
title: '设备编号',
align:"center",
dataIndex: 'equipmentNo'
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' },
}
],
dataSource1:{},
//dataSource2:{},
}
},
created(){
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
DetailsBounced2(record){
this.$refs.DetailsBounced2.detail(record);//弹框
},
DetailsBounced(record){
let params = { id: record.id}
var url = "/faultKnowledge/queryById1"
getAction(url,params).then((res)=>{
//alert(res.message);
if (res.success){
// this.items = res.result;
this.dataSource2 = res.result;
}
})
},
DetailsBounced1(record){
let params = { id:record.id}
var url = "/faulthistory/queryById"
// var a =JSON.parse(this.dataSource1)
// alert(a);
getAction(url,params).then((res)=>{
//alert(res.message);
if (res.success){
// this.items = res.result;
this.dataSource1 = res.result;
}
})
},
detail(record) {
this.visible = true;
this.record = record;
this.DetailsBounced(record);
this.DetailsBounced1(record);
//this.edit(record);
this.model = Object.assign({}, record);
},
handleCancel() {
this.visible = false;
},
/** 切换全屏显示 */
handleClickToggleFullScreen() {
let mode = !this.modelStyle.fullScreen
if (mode) {
this.modelStyle.width = '90%'
this.modelStyle.style.top = '20px'
} else {
this.modelStyle.width = '100%'
this.modelStyle.style.top = '50px'
}
this.modelStyle.fullScreen = mode
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
<style lang="less">
.announcementCustomModal{
.ant-modal-header {
border: none;
display: inline-block;
position: absolute;
z-index: 1;
right: 56px;
padding: 0;
.ant-modal-title{
.custom-btn{
width: 56px;
height: 56px;
border: none;
box-shadow: none;
}
}
}
.daily-article{
border-bottom: 0;
}
}
</style>
<style scoped lang="less">
.daily-article {
.article-button {
font-size: 1.2rem !important;
}
.ant-card-body {
padding: 18px !important;
}
.ant-card-head {
padding: 0 1rem;
}
.ant-card-meta {
margin-bottom: 1rem;
}
.article-content {
p {
word-wrap: break-word;
word-break: break-all;
text-overflow: initial;
white-space: normal;
font-size: .9rem !important;
margin-bottom: .8rem;
}
}
}
</style>
下面是弹框页又一个弹框：
<a-modal
class=“announcementCustomModal”
:width=“modelStyle.width”
:visible=“visible”
:bodyStyle =“bodyStyle”
@cancel=“handleCancel”
destroyOnClose
:footer=“null”>
<a-button icon=“fullscreen” class=“custom-btn” @click=“handleClickToggleFullScreen”/>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障单ID">
<a-input placeholder="* 请输入故障单ID" v-model="model.faultId" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障类型">
<a-input placeholder="* 请输入故障类型" v-model="model.faultType" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="解决及处理方法">
<a-input placeholder="* 请输入解决及处理方法" v-model="model.method"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="故障时间">
<a-input placeholder="* 请输入故障时间" v-model="model.faultTime"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="处理人">
<a-input placeholder="* 请输入处理人" v-model="model.dealingWithPeople"/>
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="设备名称">
<a-input placeholder=" 请输入设备名称" v-model="model.equipmentName" />
</a-form-item>
</a-col>
<a-col :lg="12">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="设备编号">
<a-input placeholder=" 请输入设备编号" v-model="model.equipmentNo" />
</a-form-item>
</a-col>
</a-form>
<details-bounced2 ref="DetailsBounced2"></details-bounced2>
后台代码就得自己脑补了。
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
