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">-->
    <!--&lt;!&ndash;    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"&ndash;&gt;-->
    <!--  </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>

后台代码就得自己脑补了。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue