首页 > 其他分享 >最简单的一个页面

最简单的一个页面

时间:2024-11-27 14:22:53浏览次数:10  
标签:formOptions 一个 type prop 简单 100 label true 页面

<template>   <div class="app-container">     <div class="main-search-list">       <resrun-drawer-form ref="searchForm" :form-item-list="formOptions" @onSearch="onSearch" @onReset="onReset" @onSelectChange="selectChange" />       <div class="table-container">         <div class="el-btn-table">           <business-table-setting :table-columns="col" @setLayout="listenSetLayout" />         </div>         <div class="table-body draggable">           <el-table             ref="table"             v-loading="loading"             :data="data"             stripe             border             :height="tableHeight"             style="width: 100%"             highlight-current-row             tooltip-effect="dark"             @selection-change="selectionChange"             @row-click="handleRowClick"             @sort-change="sortList"           >             <el-table-column :selectable="checkboxT" type="selection" width="55" fixed="left" />
            <template v-for="column in col">               <table-column-drag :key="column.prop" :column="column">                 <template #custom="scope">                   <el-button type="success" size="mini" @click="downloadLog(scope.row)">                     下载                   </el-button>                 </template>               </table-column-drag>             </template>           </el-table>           <CustomPagination :pagation="pagation" @currentChange="currentChange" @sizeChange="sizeChange" />         </div>       </div>     </div>   </div> </template>
<script> import { getLogsOfDocking, downloadLog } from '@/api/business/baseConfig/config' import { users } from '@/components/business/viewbase' import indexBase from '@/components/business/indexBase' import { getDictMapByValue } from '@/api/system/dictDetail' import { LOV } from '@/api/framework/xwlListOfValue' const dirctionOptions = [   { value: '0', label: 'SAP->CTRM' },   { value: '1', label: 'CTRM->SAP' },   { value: '3', label: 'MDM->CTRM' },   { value: '4', label: 'CTRM->OA' },   { value: '5', label: 'OA->CTRM' },   { value: '6', label: 'CTRM->GX' },   { value: '7', label: 'GX->CTRM' },   { value: '8', label: 'CRM->CTRM' } ] export default {   name: 'zlgmlogging',   components: {},   mixins: [indexBase(), users()],   data() {     return {       autoQuery: false,       tableTopBtn: true,       defaultTableColumns: [],       showTryBtn: false,       tableColumns: [         { prop: 'id', label: '日志id', width: '100', visible: true },         { prop: 'direction', label: '方向', width: '100', visible: true },         { prop: 'businessTypeName', label: '业务类型', width: '100', visible: true },         { prop: 'legalEntityId', label: '业务机构', width: '100', visible: true },         { prop: 'contractNumber', label: '合同号', width: '100', visible: true },         { prop: 'businessId', label: '记录ID', width: '100', visible: true },         { prop: 'code', label: '记录Code', width: '100', visible: true },         { prop: 'sendingStatusName', label: '状态', width: '100', visible: true },         { prop: 'response', label: '返回信息', width: '100', visible: true },         { prop: 'submittedBy', label: '提交人', width: '100', visible: true },         { prop: 'submissionTime', label: '提交时间', width: '100', visible: true },         { prop: 'operation', label: '操作', width: '100', visible: true, slot: true }       ],       formOptions: [         { type: 'input', label: '日志id', prop: 'id', rules: [] },         { type: 'select', label: '方向', prop: 'direction', rules: [] },         { type: 'select', label: '业务类型', prop: 'businessType', rules: [] },         { type: 'select', label: '业务机构', prop: 'legalEntityId', rules: [], options: [], props: { value: 'id', label: 'name' }},         { type: 'input', label: '合同号', prop: 'contractNumber', rules: [] },         { type: 'input', label: '记录ID', prop: 'businessId', rules: [] },         { type: 'input', label: '记录Code', prop: 'code', rules: [] },         { type: 'select', label: '状态', prop: 'sendingStatus', rules: [] },         { type: 'select', label: '提交人', prop: 'submittedBy', rules: [] },         { type: 'date', label: '提交开始时间', prop: 'submissionBeginTime', rules: [] },         { type: 'date', label: '提交结束时间', prop: 'submissionEndTime', rules: [] }       ],       isAllowColumnsOrder: true     }   },   computed: {},   watch: {     selectRow(val) {       if (val && val.sendingStatus !== 4) {         this.showTryBtn = true       }     }   },   async mounted() {     this.setFormItemOptionsModify(this.col, 'direction', dirctionOptions)     this.setFormItemOptionsModify(this.col, 'submittedBy', null, null, 'users')
    this.setFormItemOptionsModify(this.formOptions, 'direction', dirctionOptions)     this.setFormItemOptionsModify(this.formOptions, 'businessType', null, getDictMapByValue('business_type'))     this.setFormItemOptionsModify(this.formOptions, 'sendingStatus', null, getDictMapByValue('sending_status'))     this.setFormItemOptionsModify(this.formOptions, 'submittedBy', null, null, 'users')     const companylistRes = await LOV('CTRM.COMMON/ListOfValue/LOV_Companylist', false)     if (companylistRes) {       this.setFormItemOptionsModify(this.col, 'legalEntityId', companylistRes)       this.setFormItemOptionsModify(this.formOptions, 'legalEntityId', companylistRes)     }     // 有businessId的话,默认填充 businessId ,并且不设置默认开始结束时间  有 code 的话,默认填充 code     if (this.$route.params.businessId && this.$route.query.type === 'code') {       this.setFormItemInitValue(this.formOptions, 'code', this.$route.params.businessId, 'initValue')       this.setFormItemInitValue(this.formOptions, 'submissionBeginTime', this.$dayjs(this.$route.query.createdTime).format('YYYY-MM-DD'), 'initValue')       this.setFormItemInitValue(this.formOptions, 'submissionEndTime', this.$dayjs(this.$route.query.createdTime).add(6, 'day').format('YYYY-MM-DD'), 'initValue')     } else if (this.$route.params.businessId) {       this.setFormItemInitValue(this.formOptions, 'businessId', this.$route.params.businessId, 'initValue')       this.setFormItemInitValue(this.formOptions, 'submissionBeginTime', this.$dayjs(this.$route.query.createdTime).format('YYYY-MM-DD'), 'initValue')       this.setFormItemInitValue(this.formOptions, 'submissionEndTime', this.$dayjs(this.$route.query.createdTime).add(6, 'day').format('YYYY-MM-DD'), 'initValue')     } else {       this.setFormItemInitValue(this.formOptions, 'submissionEndTime', this.$dayjs().format('YYYY-MM-DD'), 'initValue')       this.setFormItemInitValue(this.formOptions, 'submissionBeginTime', this.$dayjs().subtract(6, 'day').format('YYYY-MM-DD'), 'initValue')     }     setTimeout(() => {       this.pagation.page = 0       this.searchList()     }, 100)   },   methods: {     searchItems(params) {       // eslint-disable-next-line eqeqeq       if (params.submissionBeginTime != undefined) {         params.submissionBeginTime = params.submissionBeginTime + ' 00:00:00'       }       // eslint-disable-next-line eqeqeq       if (params.submissionEndTime != undefined) {         params.submissionEndTime = params.submissionEndTime + ' 23:59:59'       }       return getLogsOfDocking(params)     },     downloadLog(row) {       downloadLog(row).then(res => {         const blob = new Blob([res], { type: 'application/octet-stream;charset=utf-8' })         const url = window.URL.createObjectURL(blob)         const link = document.createElement('a')         link.style.display = 'none'         link.href = url         link.setAttribute('download', row.logPath.split('/').pop())         document.body.appendChild(link)         link.click()         document.body.removeChild(link)       })     }   } } </script>
<style lang='scss' scoped> .el-form-item--small.el-form-item {   margin-bottom: 0; } </style>

标签:formOptions,一个,type,prop,简单,100,label,true,页面
From: https://www.cnblogs.com/chenlongsheng/p/18572237

相关文章

  • 简单搭建一个小型拓扑,练习路由器的Esay IP的设置
     内网用户需要访问外网时,可以通过配置NAT,实现IP数据报标头IP的替换。本条博客是NAT转换的具体实现方式,由华为官方文档摘录EsayIP的实现。  1.cloud云的配置增加两个Ethernet端口,添加到端口映射表2.路由器的配置#进入系统视图<Huawei>system-view#查看简洁的......
  • 【嵌入式开发】log.c:一个非常轻量的嵌入式日志库
    log.c简介github链接:https://github.com/rxi/log.clog.c是一个轻量级的日志库。一个用C99实现的简单日志库,这意味着它应该可以在任何支持C99标准的平台上编译和运行,如我们的嵌入式系统中。特点:使用C99标准,适用于嵌入式。支持静默模式。支持日志级别设置。支持ANSI颜......
  • 如何利用低代码平台搭建一个生态系统
    本人以前是个技术,目前已经转型做销售7,8年了,结合自己工作方便,利用公司低代码平台开发了一个生态伙伴裂变系统。因为咱们论坛是技术交流论坛。首先明确要做的这个小系统数据流向步骤:第二部设计表结构实体:表结构带有中英文描述,支持mssql,mysql多种数据库。其中商机信息表是主从表......
  • 单层感知器神经网络在简单分类问题中的应用
    单层感知器神经网络在简单分类问题中的应用摘要:本文主要探讨单层感知器神经网络在简单分类问题中的应用。首先介绍单层感知器神经网络的基本原理和结构,包括其输入层、权重、偏置、激活函数和输出层的概念。然后详细阐述其在简单线性可分数据集上的分类过程,并通过多个实例,......
  • 随着人工智能(AI)、机器人、机械臂等技术的快速发展,简单、重复性工作的自动化替代趋势变
    随着人工智能(AI)、机器人、机械臂等技术的快速发展,简单、重复性工作的自动化替代趋势变得越来越明显。这种趋势不仅影响传统的工业领域,还渗透到服务业、办公领域等多个层面。下面我们可以从几个角度探讨这一现象的背景、影响以及未来的走向。1. 技术进步推动自动化近年来,AI、机......
  • 用 Vue2 打造防诈骗问答系统:完整代码与项目实战 Vue2 实现交互式问答页面:单选、多题切
    以下是构建一个防诈骗测试页面的完整代码实现,包含单选题功能,并可记录用户选择的答案,所有功能均基于Vue2实现:完整代码<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initia......
  • Nmap简单使用手册
    名称:nmap网络探测工具和安全/端口扫描器用法:nmap[扫描类型...][选项]{扫描目标说明}描述:nmap(“NetworkMapper(网络映射器)”)是一款开源的网络探测和安全审核的工具。它的设计目标是快速的扫描大型网络,当然用它扫描单个主机也是没问题的。Nmap以新颖的方式使用原始IP报文......
  • 最新款使用HTML制作静态网站:传统文化戏剧锡剧带psd设计图(2个页面)
    ......
  • eCapture:一个无需 CA 证书,就能实现 SSL/TLS 加密明文捕获的工具
    今天给大家分享一款基于eBPF技术实现的用户态数据捕获工具【eCapture】什么是eCapture?eCapture是一款基于eBPF(ExtendedBerkeleyPacketFilter)技术实现的用户态数据捕获工具。能够无需CA证书即可捕获HTTPS和TLS通信的明文内容,非常适合于网络监控、安全审计和故障排查等场......
  • 实现RequestInterceptor接口的两个拦截器,其中一个apply方法没有执行
    已经在config类中,对两个拦截器进行定义了。但是在打断点的时候,TokenInterceptor中重写的apply()方法没有被执行。@Configuration@Slf4jpublicclassFeginConfig{@Bean@Order(1)publicTokenInterceptortokenInterceptor(){log.info("TokenInterce......