this.$refs.ruleForm.validate失效

最新推荐文章于 2022-11-15 19:36:15 发布
原创 最新推荐文章于 2022-11-15 19:36:15 发布 · 5.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在React中使用this.refs.ruleForm.validate进行表单验证时，如何正确使用callback函数确保验证流程的顺利进行。重点讲解了在函数校验中，每个if和else分支都必须加入callback()调用的原因，避免this.refs.ruleForm.validate失效。

在使用this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else都要加入callback()否则this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else都要加入callback()否则this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else都要加入callback()否则this.refs.ruleForm.validate失效

var validateRightName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("权限名称不能为空"));
      }else{
        callback()
      }
    };
elementui el-form自定义校验规则后表单验证this.$refs[formName].validate不生效的问题
有没有认真工作的博客
12-11 1128
明明我输入的值是符合规则的，但是点击确定硬是没有任何反馈，原来是通过验证的时候我少了return callback()
ElementUI--表单验证以及踩坑
苏宛墨的博客
04-21 934
表单验证以及踩坑 验证方法–整体验证(validate) this.$refs["ruleForm"].validate((valid) => { if(valid){ //这里执行你验证通过需要用的代码 }else{ //这里执行验证未通过的代码 console.log("error submit!!"); return false; } } 验证方法–局部验证(validateField) - 单个验证 th
VUE 表单验证 ! validate中的内容验证为false时执行,true时不执行
mengziwudao的博客
12-18 5585
作为初学者在VUE表单验证遇到一个大坑 onSubmitaddForm:function( formName ){ let _t = this; this.$refs[formName].validate((valid) => { console.log(123); conso...
前端 表单校验的使用和实现
weixin_50902154的博客
10-21 2765
通过自身接受的字段从父级获取表单绑定的value，并广播交互事件。这样一来三个组件可以互相通信，并且彼此更改组件之间的值，改变绑定value的同时触发校验。子组件中通过inject获取。但是还有一种更灵活的办法，
使用this.$refs.ref.validate数据校验没反应
qq_51272147的博客
10-09 3389
this.$refs.ref.validate数据校验没反应
this.$refs失效
12-28
### Vue 中 `this.$refs` 失效的原因及解决方案 #### 一、理解 `this.$refs` 在 Vue.js 中，`$refs` 是一种用于访问 DOM 节点或子组件实例的方式。通常情况下，当页面首次渲染完成之后，可以通过 `$refs` 来操作...
submitForm(formName){ this.$refs[formName].validate((valid) => { if (valid) { // console.log(valid, this.ruleForm,this.$store.dispatch) let data = { userCode: this.ruleForm.userCode, // password: this.$md5(this.ruleForm.password) password: this.ruleForm.password } this.$store.dispatch('user/login', data).then(() => { this.$router.push({path:"/"}) }).catch(error => { this.$message.error(error) }) // this.$router.push({path:"/"}) } else { return false; } }); }
03-25
方法内部使用了this.$refs[formName].validate，这看起来像是在进行表单验证。接下来，当验证通过时，会构造一个data对象，包含userCode和password，然后通过Vuex的dispatch调用user/login的action，处理登录逻辑，...
<template> <div> <header class="ant-layout-header header_sd-header_common"> <div class="left_sd-header_common"> <div class="logo_sd-webflow_webflow"> <h3>激励考核指下发</h3> </div> </div> <div class="right_sd-header_common"> <a-button v-if="!readonly" type="link" icon="save" class="button_sd-webflow-button_webflow" @click="save" > 保存 </a-button> <a-button v-if="!readonly" type="link" icon="save" class="button_sd-webflow-button_webflow" @click="xfClick" > 下发 </a-button> <a-button type="link" icon="close-circle" class="button_sd-webflow-button_webflow" @click="btnClose" > 退出 </a-button> </div> </header> <div class="budget-record"> <div class="budget-record-table"> <h2 class="budget-record-table-title">激励考核指下发</h2> <a-form-model ref="ruleForm" :rules="rules" :model="project" class="sitd-apply" layout="horizontal" > <table> <colgroup> <col width="170px" /> <col /> <col width="170px" /> <col /> </colgroup> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="指标编号">指标编号</label> </td> <td class="ant-form-item-control-wrapper" :colspan="3"> <a-form-model-item prop="zbbh"> <template>{{ project['zbbh'] }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="指标年度" class="ant-form-item-required">指标年度</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="zbnd"> <!-- 修改为下拉选择框 --> <a-select v-if="!readonly" v-model="project['zbnd']" placeholder="请选择年份" style="width: 100%" > <!-- 生成年份选项 --> <a-select-option v-for="year in yearOptions" :key="year" :value="year"> {{ year }} </a-select-option> </a-select> <template v-else> {{ project['zbnd'] }} </template> </a-form-model-item> </td> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="考核周期">考核周期</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="khzq"> <a-input v-if="!readonly" v-model="project['khzq']" placeholder="考核周期" /> <template v-else>{{ project['khzq'] }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="考核对象">考核对象</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="khdx"> <a-select v-if="!readonly" v-model="selectedKhdxIds" mode="multiple" style="width: 100%" placeholder="请选择被考核对象" @change="handleKhdxChange" > <template v-for="(item, _i) in khdxList"> <a-select-option :key="item.code" :value="item.code">{{ item.value }}</a-select-option> </template> </a-select> <template v-else>{{ project['khdx'] }}</template> </a-form-model-item> </td> <td class="ant-form-item-label cell_sd-form-item-td-label_common"> <label title="创建日期" class="ant-form-item-required">创建日期</label> </td> <td class="ant-form-item-control-wrapper"> <a-form-model-item prop="cjrq"> <template>{{ project['cjrq'] ? refreshTime(project['cjrq']) : '' }}</template> </a-form-model-item> </td> </tr> <tr> <td class="ant-form-item-label cell_sd-form-item-td-label_common upload-td"> <label title="说明">说明</label> </td> <td class="ant-form-item-control-wrapper" colspan="3"> <a-form-model-item prop="sm"> <div v-if="!readonly" class="textarea-wrapper"> <a-textarea v-model="project['sm']" placeholder="请输入内容" :max-length="300" class="m-textarea" :auto-size="{ minRows: 3, maxRows: 5 }" /> <span class="m-count">{{ `${project['sm']?.length || 0}/300` }}</span> </div> <template v-else>{{ project['sm'] }}</template> </a-form-model-item> </td> </tr> </table> </a-form-model> <!-- 这里暂时去掉，根据客户描述，一年只进行一次年度考核和激励考核，因此根据年度和单位关联即可 --> <!-- <h3 class="budget-record-table-title">关联年度考核</h3> <a-button v-if="!readonly" type="primary" :style="{ marginLeft: '88px' }" class="button_sd-webflow-button_webflow" @click="openDialogGl" > 关联年度考核 </a-button> <a-button v-if="!readonly" :style="{ marginLeft: '8px' }" class="button_sd-webflow-button_webflow" :disabled="!ndkhSelectedRowKeys.length" @click="ndkhBeforDelete" > 删除 </a-button> <a-modal title="选择年度考核" :visible="dialogVisibleGl" width="80%" @ok="handleDialogConfirm" @cancel="dialogVisibleGl = false" > <div class="apply-search"> <a-form-model :form="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-row :gutter="24"> <a-col :span="8" class="chd"> <a-form-model-item label="考核年度"> <a-input v-model="searchForm['khnd']" allow-clear placeholder="请输入指标年度" /> </a-form-model-item> </a-col> <a-col :span="8" class="chd"> <a-form-model-item label="考核周期"> <a-input v-model="searchForm['khzq']" allow-clear placeholder="请输入考核周期" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="24" class="chd" :style="{ textAlign: 'right', lineHeight: '45px' }"> <a-button :style="{ marginRight: '8px' }" @click="reset"> 重置 </a-button> <a-button type="primary" html-type="submit" @click="btnSearchBusinessList"> 查询 </a-button> </a-col> </a-row> </a-form-model> </div> <a-divider style="margin: 12px 0" /> <SdTable ref="ndkh" row-key="id" :columns="ndkhColumns" :data-source.sync="dialogResult" :pagination="paginationOpt" :loading="dialogLoading" :scroll="{ x: 1500 }" :row-selection="{ selectedRowKeys: selectedRowKeysAdd, onChange: btnSelectProjectAdd, }" > </SdTable> </a-modal> <SdTable ref="ndkhTable" row-key="id" :columns="ndkhColumns" :data-source.sync="ndkhResult" :loading="ndkhLoading" :pagination="false" class="ant-table" :row-selection="{ selectedRowKeys: ndkhSelectedRowKeys, onChange: btnSelectProjectNdkh, }" > </SdTable> --> <h3 class="budget-record-table-title" style="margin-top: 18px">激励考核指标</h3> <a-button v-if="!readonly" type="primary" :style="{ marginLeft: '88px' }" class="button_sd-webflow-button_webflow" @click="openDialog" > 新增 </a-button> <a-button v-if="!readonly" :style="{ marginLeft: '8px' }" class="button_sd-webflow-button_webflow" :disabled="!selectedRowKeys.length" @click="btnBeforDelete" > 删除 </a-button> <SdTable ref="jlkhzbxf" row-key="id" :columns="jlkhzbxfColumns" :data-source.sync="jlkhzbxfResult" :loading="loading" :pagination="false" class="ant-table" bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: btnSelectProject, }" > <!-- 指标内容列自定义渲染 --> <template slot="指标内容" slot-scope="text, record, index"> <div style="white-space: pre-line; text-align: left; padding: 8px 0"> {{ text }} </div> </template> <template slot="分值" slot-scope="text, record, index"> <div style="white-space: pre-line; text-align: left; padding: 8px 0"> {{ text }} </div> </template> <!-- 操作列 --> <template v-if="!readonly" slot="操作" slot-scope="text, record"> <a-button class="action-button" type="link" size="small" @click="btnOpenProjectDetails(record)" > 编辑 </a-button> </template> </SdTable> <a-modal title="激励考核指标" :visible="dialogVisible" width="35%" @ok="handleConfirm" @cancel="handleCancel" > <div class="apply-search"> <a-form-model ref="subFormRef" :rules="jlkhzbxfSubRules" :form="jlkhzbxfSubForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <a-row> <a-col :span="18"> <a-form-model-item label="指标类别"> <a-input v-model="jlkhzbxfSubForm['zblb']" allow-clear placeholder="请输入指标类别" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="指标内容"> <a-textarea v-model="jlkhzbxfSubForm['zbnr']" placeholder="请输入指标内容（按Enter换行）" :max-length="300" class="m-textarea" :auto-size="{ minRows: 3, maxRows: 6 }" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="分值"> <a-textarea v-model="jlkhzbxfSubForm['fz']" placeholder="请输入分值（按Enter换行）" :max-length="300" class="m-textarea" :auto-size="{ minRows: 2, maxRows: 4 }" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="18"> <a-form-model-item label="分值上限"> <a-input v-model="jlkhzbxfSubForm['fzsx']" allow-clear placeholder='例如："+1分"、"-1.5分"或"不设上限"' /> </a-form-model-item> </a-col> </a-row> </a-form-model> </div> </a-modal> </div> </div> </div> </template> <script> import { Message, Modal } from 'ant-design-vue' import moment from 'moment' import components from './_import-components/zk-jlkh-zbxf-import' import KhypjService from './khypj-service' import crossWindowWatcher from '@/common/services/cross-window-watcher' import SdTable from '@/common/components/sd-table.vue' export default { name: 'ZkJlkhZbxf', metaInfo: { title: '激励考核指标下发', }, components: { ...components, SdTable, }, props: { id: { type: String, default: undefined, }, }, data() { // 添加校验规则 const validateFzsx = (rule, value, callback) => { if (!value) { callback() return } // 允许"不设上限" if (value === '不设上限') { callback() return } // 验证格式: ±数字(可含小数) + 单位(非数字字符) const regex = /^[+-]\d+(\.\d+)?[^\d]+$/ if (!regex.test(value)) { callback(new Error('格式错误，请填写"不设上限"或类似"+1分"、"-1.5分"的格式')) } else { callback() } } return { loading: false, ndkhLoading: false, dialogLoading: false, readonly: true, yearOptions: this.generateYearOptions(), rules: { zbnd: [{ required: true, message: '请选择指标年度', trigger: 'blur' }], }, jlkhzbxfSubRules: { fzsx: [{ validator: validateFzsx, trigger: 'blur' }], }, // 新增搜索表单数据 searchForm: { khnd: undefined, // 考核年度 khzq: undefined, // 考核周期 }, project: { id: undefined, // 主键id zbbh: undefined, // 指标编号 cjrq: undefined, // 创建日期 zbnd: undefined, // 指标年度 khzq: undefined, // 考核周期 khdx: undefined, // 考核对象 khdxId: undefined, // 考核对象id sm: undefined, // 说明 status: undefined, // 指标状态：0暂存，1下发（不可修改） ndkhId: undefined, // 关联的年度考核id }, jlkhzbxfResult: [], jlkhzbxfSubForm: { id: undefined, // id mainId: undefined, // 主表id zblb: undefined, // 指标类别 zbnr: undefined, // 指标内容 fz: undefined, // 分值 fzsx: undefined, // 分值上限 }, ndkhResult: [], khdxList: [], selectedKhdxIds: [], // 用于多选绑定的临时ID数组 dialogVisible: false, dialogVisibleGl: false, selectedKeys: [], selectedRows: [], selectedRowKeys: [], ndkhSelectedRowKeys: [], // 年度考核表格的选中项 ndkhSelectedRows: [], // 年度考核表格选中的行数据 selectedKeysAdd: [], selectedRowKeysAdd: [], // 年度考核表格的选中项 selectedRowsAdd: [], // 年度考核表格选中的行数据 isUpdateJlkhzbxfSub: false, isXf: false, ndkhColumns: [ { title: '考核编号', dataIndex: 'khbh', scopedSlots: { customRender: '考核编号', }, width: '200px', align: 'center', }, { title: '考核年度', dataIndex: 'khnd', scopedSlots: { customRender: '指标年度', }, width: '70px', align: 'center', }, { title: '考核对象', dataIndex: 'khdx', scopedSlots: { customRender: '责任主体', }, width: '200px', align: 'center', }, { title: '考核周期', dataIndex: 'khzq', scopedSlots: { customRender: '考核周期', }, width: '100px', align: 'center', }, ], dialogResult: [], dialogColumns: [], paginationOpt: { current: 1, // 当前页码 pageSize: 10, // 当前每页大小 total: 0, // 总数 showSizeChanger: true, showQuickJumper: false, pageSizeOptions: ['10', '20', '40', '60', '80', '100'], showTotal: (total) => `共 ${total} 条`, onShowSizeChange: (current, pageSize) => { this.paginationOpt.current = 1 this.paginationOpt.pageSize = pageSize this.btnSearchBusinessList() }, onChange: (current, size) => { this.paginationOpt.current = current this.paginationOpt.pageSize = size this.btnSearchBusinessList() }, }, } }, computed: { // 动态计算列配置 jlkhzbxfColumns() { const baseColumns = [ { title: '序号', customRender: (text, record, index) => { return index + 1 }, align: 'center', width: '10%', }, { title: '指标类别', dataIndex: 'zblb', customRender: (text, record) => { // 只有显示行才渲染内容 if (record.rowSpan > 0) { return { children: text, attrs: { rowSpan: record.rowSpan }, } } return { attrs: { rowSpan: 0 } } }, align: 'center', width: '10%', }, { title: '指标内容', dataIndex: 'zbnr', scopedSlots: { customRender: '指标内容', }, align: 'center', width: '40%', }, { title: '分值', dataIndex: 'fz', scopedSlots: { customRender: '分值', }, align: 'center', width: '20%', }, { title: '分值上限', dataIndex: 'fzsx', scopedSlots: { customRender: '分值上限', }, align: 'center', width: '10%', }, ] // 非只读模式下添加操作列 if (!this.readonly) { baseColumns.push({ title: '操作', dataIndex: 'action', scopedSlots: { customRender: '操作' }, width: '10%', align: 'center', }) } return baseColumns }, }, watch: { jlkhzbxfResult: { handler(newVal) { this.calculateRowSpans(newVal) }, immediate: true, // 初始化时立即执行 deep: true, // 深度监听 }, }, created() { this.getKhdxList() this.jlkhzbxfResult = this.calculateRowSpans(this.jlkhzbxfResult) this.initJlkhzbxfInfo() }, mounted() { if (!this.$route.query.id) { this.project.zbbh = this.getZBbh() this.project.cjrq = moment(new Date()).format('YYYY-MM-DD') this.readonly = false } }, methods: { // 年度考核表格选中处理 btnSelectProjectNdkh(selectedRowKeys, selectedRows) { this.ndkhSelectedRowKeys = selectedRowKeys this.ndkhSelectedRows = [...selectedRows] }, btnSelectProjectAdd(selectedRowKeys, selectedRows) { this.selectedRowKeysAdd = selectedRowKeys this.selectedRowsAdd = [...selectedRows] }, // 重置搜索表单 reset() { this.searchForm = { khnd: undefined, // 考核年度 khzq: undefined, // 考核周期 } this.paginationOpt.current = 1 this.paginationOpt.pageSize = 10 this.btnSearchBusinessList() }, getKhzbxfInfo() { console.log('1111111----------', this.project) console.log('22222222----------', this.project.ndkhId) if (this.project.ndkhId) { KhypjService.getKhzbxfById(this.project.ndkhId).then((res) => { if (res.data.code === 200) { if (res.data.data) { this.ndkhResult.push(res.data.data) } else { this.ndkhResult = [] } } else { Message.error('获取考核指标下发信息失败！') } }) } }, ndkhBeforDelete() { const _this = this if (_this.ndkhSelectedRowKeys.length === 0) { Message.warning('请选择要删除的数据！') return } Modal.confirm({ content: '是否确认删除？', onOk() { _this.project.ndkhId = '-1' _this.saveJlkhzbxf() _this.ndkhResult = [] _this.ndkhSelectedRowKeys = [] // 清空选中状态 }, onCancel() {}, }) }, openDialogGl() { console.log('3333----------', this.ndkhResult) if (this.ndkhResult.length > 0) { Message.warning('只能关联一条年度考核!') return } this.dialogVisibleGl = true this.selectedKeysAdd = [] this.selectedRowsAdd = [] this.btnSearchBusinessList() }, handleDialogConfirm() { if (this.selectedRowsAdd.length === 0) { Message.warning('请选择一条年度考核!') return } if (this.selectedRowsAdd.length > 1) { Message.warning('只能关联一条年度考核!') return } this.project.ndkhId = this.selectedRowsAdd[0].id this.saveJlkhzbxf() this.getKhzbxfInfo() this.dialogVisibleGl = false }, btnSearchBusinessList() { this.dialogLoading = true const khzbxfSearchVo = { khnd: this.searchForm.khnd, khzq: this.searchForm.khzq, } const params = { current: this.paginationOpt.current, // 直接使用当前页码 pageSize: this.paginationOpt.pageSize, // 直接使用当前每页大小 searchVo: khzbxfSearchVo, } KhypjService.getNdkhList(params) .then((res) => { if (res.data.code === 200) { this.paginationOpt.total = res.data.data.total this.dialogResult = res.data.data.records } else { Message.error('查询失败！') } }) .catch((err) => { Message.error(err.message || err.data) this.paginationOpt.total = 0 this.dialogResult = [] }) .finally(() => { this.dialogLoading = false }) }, getKhdxList() { KhypjService.getCodeList('khdx').then((res) => { if (res.data.code === 200) { this.khdxList = res.data.data } else { Message.error('查询失败！') } }) }, // 处理考核对象选择变化 handleKhdxChange(selectedIds) { // 1. 拼接ID字符串 this.project.khdxId = selectedIds.join('；') // 2. 拼接名称字符串 const selectedNames = [] selectedIds.forEach((code) => { const item = this.khdxList.find((d) => d.code === code) if (item) { selectedNames.push(item.value) } }) this.project.khdx = selectedNames.join('；') }, btnBeforDelete() { const _this = this if (this.selectedRowKeys.length === 0) { Message.warning('请选择要删除的数据！') return } Modal.confirm({ content: '是否确认删除？', onOk() { _this.deleteJlkhzbxfSub() _this.selectedRowKeys = [] }, onCancel() {}, }) }, deleteJlkhzbxfSub() { KhypjService.removeJlkhzbxfSubByIds(this.selectedRowKeys).then((res) => { if (res.data.code === 200) { Message.success('删除成功！') this.getJlkhzbxfSubList() } else { Message.error('查询失败！') } }) }, btnSelectProject(selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = [...selectedRows] }, openDialog() { this.dialogVisible = true this.selectedKeys = [] this.selectedRows = [] this.jlkhzbxfSubForm = { id: undefined, // id mainId: this.$route.query.id, // 主表id zblb: undefined, // 指标类别 zbnr: undefined, // 指标内容 fz: undefined, // 分值 fzsx: undefined, // 分值上限 } // 新增子数据自动保存主数据 if (!this.$route.query.id) { this.saveJlkhzbxf() } }, btnOpenProjectDetails(record) { this.dialogVisible = true this.jlkhzbxfSubForm = { id: record.id, // id mainId: record.mainId, // 主表id zblb: record.zblb, // 指标类别 zbnr: record.zbnr, // 指标内容 fz: record.fz, // 分值 fzsx: record.fzsx, // 分值上限 } this.isUpdateJlkhzbxfSub = true console.log('121212------', record) console.log('33333222------', this.jlkhzbSubxfForm) }, handleCancel() { this.dialogVisible = false }, // 弹窗确认 handleConfirm() { // 添加表单校验 this.$refs.subFormRef.validate((valid) => { if (!valid) { return false } // 原有的保存逻辑... if (!this.isUpdateJlkhzbxfSub) { this.jlkhzbxfSubForm.mainId = this.$route.query.id // 保存子表数据 KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { if (res.data.code === 200) { Message.success(`添加成功！`) this.getJlkhzbxfSubList() } else { Message.error('添加失败！') } }) } else { // 保存子表数据 KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { if (res.data.code === 200) { Message.success(`修改成功！`) this.getJlkhzbxfSubList() } else { Message.error('修改失败！') } }) this.isUpdateJlkhzbxfSub = false } this.dialogVisible = false }) }, // handleConfirm() { // if (!this.isUpdateJlkhzbxfSub) { // this.jlkhzbxfSubForm.mainId = this.$route.query.id // // 保存子表数据 // KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { // if (res.data.code === 200) { // Message.success(`添加成功！`) // this.getJlkhzbxfSubList() // } else { // Message.error('添加失败！') // } // }) // } else { // // 保存子表数据 // KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => { // if (res.data.code === 200) { // Message.success(`修改成功！`) // this.getJlkhzbxfSubList() // } else { // Message.error('修改失败！') // } // }) // this.isUpdateJlkhzbxfSub = false // } // this.dialogVisible = false // }, // 计算行合并 calculateRowSpans(data) { if (!data || data.length === 0) return data const categoryMap = {} // 第一步：统计每个类别的行数 data.forEach((item) => { categoryMap[item.zblb] = (categoryMap[item.zblb] || 0) + 1 }) // 第二步：设置行合并属性 let lastCategory = null return data.map((item) => { // 重置rowSpan属性 item.rowSpan = undefined if (item.zblb !== lastCategory) { lastCategory = item.zblb // 只有每个类别的第一行设置rowSpan item.rowSpan = categoryMap[item.zblb] return item } // 同类别的后续行设置rowSpan为0 item.rowSpan = 0 return item }) }, // 生成年份选项 generateYearOptions() { const currentYear = new Date().getFullYear() const years = [] // 添加年份：当前年后1年、本年、前1年、前2年 years.push(currentYear + 1) // 后1年 years.push(currentYear) // 本年 years.push(currentYear - 1) // 前1年 years.push(currentYear - 2) // 前2年 return years }, btnClose() { window.close() }, initJlkhzbxfInfo() { if (this.$route.query.id) { KhypjService.getJlkhzbxfById(this.$route.query.id).then((res) => { if (res.data.code === 200) { this.project = res.data.data this.project.cjrq = this.project.cjrq ? moment(new Date(this.project.cjrq)).format('YYYY-MM-DD') : null this.readonly = this.project.status === 1 // 初始化选中项 if (this.project.khdxId) { this.selectedKhdxIds = this.project.khdxId.split('；').filter(Boolean) } this.getJlkhzbxfSubList() this.getKhzbxfInfo() } else { Message.error('获取考核指标库信息失败！') } }) } }, save() { const _this = this this.$refs.ruleForm.validate((valid, obj) => { if (!valid) { Message.warning('请输入必填项！') return false } else { _this.saveJlkhzbxf() } }) }, xfClick() { this.readonly = true this.isXf = true this.save() KhypjService.jlkhzbzpXfStart(this.$route.query.id).then((res) => { if (res.data.code === 200) { Message.success('下发成功！') } else { Message.error('下发失败！') } }) }, // 修改 saveJlkhzbxf 方法返回 Promise saveJlkhzbxf() { const _this = this if (this.isXf) { this.project.status = 1 } else { this.project.status = 0 } // 创建数据副本，避免污染原始数据 const postData = { ...this.project } // 仅在值是字符串时才进行转换 if (postData.cjrq && typeof postData.cjrq === 'string') { postData.cjrq = this.strToTimestamp(postData.cjrq) } // 返回一个 Promise return new Promise((resolve, reject) => { // 判断是新增还是更新 const apiCall = !this.$route.query.id ? KhypjService.saveJlkhzbxf(postData) : KhypjService.updateJlkhzbxf(postData) apiCall .then((res) => { if (res.data.code === 200) { // 处理新增保存成功 if (!_this.$route.query.id) { Message.success('保存成功！') if (res.data.data) { const currentUrl = window.location.href const newUrl = currentUrl.replace('zbxf', `zbxf?id=${res.data.data}`) // 直接跳转页面，不需要等待初始化 window.location.href = newUrl } resolve() // 解析 Promise } // 处理更新保存成功 else { if (_this.project.status === 1) { Message.success('提交成功！') } else { Message.success('保存成功！') } resolve() // 解析 Promise } } else { // 处理失败情况 const errorMessage = !_this.project.id ? '保存失败！' : _this.project.status === 1 ? '提交失败！' : '保存失败！' Message.error(errorMessage) reject(new Error(res.data.message || errorMessage)) } }) .catch((error) => { // 处理 API 错误 const errorMessage = !_this.project.id ? '保存失败！' : _this.project.status === 1 ? '提交失败！' : '保存失败！' console.error('API 错误:', error) Message.error(errorMessage) reject(error) }) }) }, getJlkhzbxfSubList() { KhypjService.getJlkhzbxfSubList(this.$route.query.id).then((res) => { if (res.data.code === 200) { this.jlkhzbxfResult = res.data.data } else { Message.error('获取子表信息失败！') } }) }, // 获取唯一指标编号 getZBbh() { // 获取当前时间 const now = new Date() // 获取当前时间的年、月、日、时、分、秒、毫秒 const year = now.getFullYear() const month = String(now.getMonth() + 1).padStart(2, '0') const day = String(now.getDate()).padStart(2, '0') const hour = String(now.getHours()).padStart(2, '0') const minute = String(now.getMinutes()).padStart(2, '0') const second = String(now.getSeconds()).padStart(2, '0') const millisecond = String(now.getMilliseconds()).padStart(3, '0') // 生成唯一标识 const uniqueId = `${year}${month}${day}${hour}${minute}${second}${millisecond}` return 'JLKHZBXF-' + uniqueId }, strToTimestamp(dateStr) { const date = moment(dateStr, 'YYYY-MM-DD') return date.valueOf() }, refreshTime(item) { return moment(item).format('YYYY-MM-DD') }, }, } </script> <style lang="scss" scoped> /* 设置表格宽度 */ .ant-table { width: 90%; margin: auto; /* 居中显示 */ } .sitd-collapse-block { width: 90%; margin: auto; &::v-deep(.ant-collapse-content-box) { padding: unset !important; } } table { width: 90%; margin: auto; border-top: 1px solid #e8e8e8; margin-bottom: 16px; table-layout: fixed; tr td { border-left: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; min-height: 100px; &:first-child { border-left: unset; } &:nth-child(2n + 1) { background: #fafafa; width: 170px; } &.upload-td { background: #fafafa; width: 170px !important; } &.upload-time-td { background: #fafafa; width: 200px !important; } &.ant-form-item-check { width: 194px !important; } .ant-form-item { margin-bottom: unset !important; padding: 5px; .ant-form-item-label { width: 170px; padding-bottom: 1px; text-align: center; background-color: #fafafa; } } &::v-deep(label) { display: block; margin: 0 auto; text-align: right; white-space: normal; line-height: 20px; padding: 0 5px; } .ant-form-item-prompt { display: block; margin: 0 auto; text-align: right; white-space: normal; line-height: 20px; padding: 0 14px 0 5px; font-size: 16px; color: rgba(0, 0, 0, 0.85); } .prompt-red { color: #f5222d !important; } .ant-form-item-radio { &::v-deep(label) { display: inline !important; } } &::v-deep(.ant-checkbox + span) { padding-right: 0 !important; } } ::v-deep(.ant-form-item-control-wrapper) { min-height: 40px; } } .ant-form-long-label { tr td { &:nth-child(2n + 1) { // width: 200px !important; } } } .ant-collapse { border-top: 1px solid #d9d9d9; border-bottom: unset; border-left: unset; border-right: unset; width: 90%; margin: auto; & > .ant-collapse-item { border-bottom: unset; /*& > .ant-collapse-content{*/ /* border-top: 1px solid #d9d9d9;*/ /* border-bottom: 1px solid #d9d9d9;*/ /* border-radius: 4px;*/ /*}*/ &::v-deep(.ant-collapse-content) { border-top: unset; } } } .textarea-wrapper { position: relative; display: block; .m-textarea { padding: 8px 12px; height: 100%; } .m-count { color: #808080; background: #fff; position: absolute; font-size: 12px; bottom: 12px; right: 12px; line-height: 16px; } } .ant-spin-loading { width: 100vw; height: 100vh; display: block; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 99; } .apply-block { display: flex; align-items: center; .dynamic-delete-button { cursor: pointer; position: relative; font-size: 24px; color: #999; transition: all 0.3s; } .dynamic-delete-button:hover { color: #777; } .dynamic-delete-button[disabled] { cursor: not-allowed; opacity: 0.5; } div { flex: 1; } } .btn-group { display: flex; align-items: center; justify-content: right; width: 90%; margin: 0 auto 20px; button { margin-left: 10px; } } .ant-form-budget-border { border-bottom: 1px solid #d9d9d9; margin-left: -1px; } .budget-box { height: 100%; overflow: hidden; display: flex; flex: 1; flex-direction: column; } .budget-record { width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center; background: #fff; } .budget-record-table { width: 90%; //调整页面表格宽度 // min-width: 840px; padding: 16px; } .budget-record-table-title { margin-bottom: 20px; text-align: center; white-space: pre-wrap; } .header_sd-header_common.ant-layout-header { padding: 0 20px 0 20px; color: #fff; background-image: linear-gradient(90deg, #1890ff 0%, #0162eb 100%); height: 64px; line-height: 64px; } .header_sd-header_common { z-index: 1; } .ant-layout-header { background: #001529; } .ant-layout-header, .ant-layout-footer { flex: 0 0 auto; } header { display: block; } .ant-layout, .ant-layout * { box-sizing: border-box; } .left_sd-header_common { float: left; height: 100%; } .right_sd-header_common { float: right; height: 100%; } .logo_sd-webflow_webflow h3 { color: #fff; } .header_sd-header_common .ant-btn-link { color: #fff; } .button_sd-webflow-button_webflow { max-width: 100%; } </style> 检查代码，针对分值上限设置的校验规则并未生效，请检查代码并修改
07-31
this.$refs.formRef.validate(); // 立即触发验证 }); } ``` #### 4. **表单级联校验处理** 若需关联其他字段（如总分值校验），参考引用[2]： ```js // 表单提交时执行全局校验 handleSubmit() { this.$refs....
<template> <div class="add-announcement"> <el-dialog v-model:visible="outerVisible" width="1000px" :title="isEdit ? $t('HDP.WEB.ONLINE_NOTICE.MODIFYING_A_BULLETIN') : $t('HDP.WEB.ONLINE_NOTICE.ADDING_A_BULLETIN')" :before-close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false" > <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="add-notice-ruleForm"> <el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_TYPE')" prop="type"> <el-tooltip class="item" max-width="300" placement="right"> <template #content> <p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_ONLINE_BULLETIN') }}</p> <p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_CHANGE_NOTIFICATION') }}</p> <p>{{ $t('HDP.WEB.ONLINE_NOTICE.THE_HISTORICAL_RECORDS') }}</p> </template> <i class="ipd-font-icon icon-help announcement-help-tip"></i> </el-tooltip> <el-radio-group v-model="ruleForm.type" :disabled="isEdit"> <el-radio v-for="item in typeList" :key="item.value" :label="item.value"> {{ item.label }} </el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_TITLE')" prop="announcementTitle"> <el-input v-model.trim="ruleForm.announcementTitle" /> </el-form-item> <div v-if="isOld === 0" class="test"> <el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.BULLETIN_DESCRIPTION')" prop="announcementDesc"> <el-input v-model.trim="ruleForm.announcementDesc" /> </el-form-item> </div> <el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.RELEASE_TIME')" prop="releaseDate"> <el-date-picker v-model="ruleForm.releaseDate" :disabled="isEdit && Number(ruleForm.isDraft) !== 0" type="daterange" range-single range-separate :range-separator="$t('HDPPub.common.timeTo')" style="width: 100%" :start-placeholder="$t('HDP.PUB.StartDate')" :end-placeholder="$t('HDP.PUB.EndTime')" /> </el-form-item> <div v-if="isOld === 0" class="notice-editor"> <RichTextEditor ref="noticeEditor" v-model="richText" :img-count="3" :file-size="2" :min-height="24" :set-height="150" @get-content="callbackEqitorData" /> </div> <div v-if="isOld === 1" class="board-line"></div> <el-button v-if="isOld === 1" id="add-announ-des" @click="addDes">{{ `${$t('HDP.Common.Add')}(${ruleForm.picList.length}/30)` }}</el-button> <div v-if="isOld === 1"> <div v-for="(item, index) in ruleForm.picList" :key="index" class="announ-des"> <div class="img-upload"> <div v-if="!item.picUrl" class="img-upload-concent"> <input id="file" class="upload-button" type="file" :value="item.picUrl" accept="image/*" @change="onUpload(item, $event)" /> <i class="el-icon-plus"></i> </div> <div v-if="item.picUrl" class="no-img-concent"> <img :src="$xss.getSafeValue(item.picUrl)" class="img-hover" /> <span class="mulch"></span> <span class="option-img"> <input id="file" class="upload-button" type="file" value="" accept="image/*" @change="onUpload(item, $event)" /> <i class="ipd-font-icon icon-upload"></i> <i class="el-icon-zoom-in" @click="() => previewImg(item)"></i> <i class="el-icon-delete" @click="() => deleteImg(item)"></i> </span> </div> </div> <div class="option-right"> <div class="input-url"> <el-form-item :label="$t('HDP.WEB.ONLINE_NOTICE.REDIRECTION_URL')" :prop="`picList.${index}.url`" :rules="{ required: true, validator: validateUrl, trigger: 'blur' }" > <el-input v-model.trim="item.url" maxlength="500" /> </el-form-item> </div> <div class="option-sorting"> <i class="ipd-font-icon icon-chevron-up" @click="() => chevronUp(item, index)"></i> <br /> <span></span> <i class="ipd-font-icon icon-chevron-down" @click="() => chevrondown(item, index)"></i> </div> <div class="delete-des"> <i class="el-icon-delete" @click="() => deleteImgGrou(item, index)"></i> </div> </div> </div> </div> </el-form> <template #footer> <div class="dialog-footer"> <el-button id="announ-ok" type="primary" @click="addNotice('ruleForm')">{{ $t('HDP.BCM.Determined') }}</el-button> <!--新的公告或者是草稿才展示保存按钮--> <el-button v-if="isOld === 1 && Number(ruleForm.isDraft) === 0" id="announ-save" @click="saveNotice('ruleForm')"> {{ $t('HDP.CMS.GV.Dll.Save') }} </el-button> <el-button v-if="isOld === 1" id="announ-preview" style="margin-left: 20px" @click="previewNotice('ruleForm')"> {{ $t('HDP.COMMON.ONE_PREVIEW') }} </el-button> <el-button v-if="isOld === 0" id="announ-cancel" @click="closeDialog()">{{ $t('HDP.BCM.ToCancel') }}</el-button> </div> </template> </el-dialog> <ElImageViewer v-if="previewImgItem.showViewer" :z-index="previewImgItem.zIndex" :initial-index="previewImgItem.imageIndex" :on-close="closeViewer" :url-list="previewImgItem.srcList" /> <PreviewNotice ref="previewNotice" @add-callback-ann="addCallbackAnn" @is-hide-ti-yan-fun="isHideTiYanFun" /> </div> </template> <script> import { ImageViewer } from '@plmcsdk/common-ui'; import { mapState } from 'vuex'; import RichTextEditor from '@/components/common/component/RichTextEditor'; import PreviewNotice from '@/components/system-configuration/online-notice/PreviewNotice'; export default { emits: ['refsAnnouncement', 'isHideTiYanFun'], components: { PreviewNotice, ElImageViewer: ImageViewer, RichTextEditor, }, props: {}, data() { const validateUrl = (rule, value, callback) => { const match = /^((http|https):\/\/)/; if (!value.length) { callback(new Error('请输入跳转URL')); } else if (!match.test(value)) { callback(new Error('请输入正确的URL')); } else { callback(); } }; return { validateUrl, richText: '', // 富文本内容 isEdit: false, isOld: 1, // 是否是历史报告和变更通知 0表示 是老的1表示新的 outerVisible: false, announContrastItem: {}, // 记录主页传过来的修改数据 previewImgItem: { showViewer: false, imageIndex: 0, zIndex: 5000, srcList: [], }, typeList: [ { value: 0, label: '上线公告', title: '上线公告将会以弹框的方式提示用户', }, { value: 1, label: '变更通知', title: '变更通知将会以弹出页面的方式提示用户', }, ], ruleForm: { announcementTitle: '', announcementDesc: '', releaseDate: [], announcementContent: '', type: 0, isDraft: 0, picList: [ { picUrl: '', url: '', }, ], }, rules: { announcementTitle: [ { required: true, message: '请输入标题', trigger: 'blur', }, { min: 0, max: 60, message: '最多只能输入60个字符', trigger: 'blur', }, ], announcementDesc: [ { required: true, message: '请输入公告描述', trigger: 'blur', }, { min: 0, max: 50, message: '最多只能输入50个字符', trigger: 'blur', }, ], releaseDate: [ { required: true, message: '发布时间不能为空', validator: this.validateReleaseDate, trigger: 'blur', }, ], type: [ { required: true, message: '公告类型不能为空', trigger: 'change', }, ], }, }; }, watch: { 'ruleForm.type': { handler(val, oldVla) { // val等于1是变更通知 if (val == 1) { this.isOld = 0; } else { this.isOld = 1; } }, immediate: true, // 可以深度检测到 person 对象的属性值的变化 }, }, computed: { ...mapState({ userInfo: state => state.aside.userData, }), }, created() {}, methods: { validateReleaseDate(rule, value, callback) { if (!value.length || !value[0] || !value[1]) { callback('发布时间不能为空'); return false; } callback(); }, // 上传附件 onUpload(item, e) { const me = this; const file = e.target.files[0]; const formData = new FormData(); formData.append('file', e.target.files[0]); me.util.post('service/common/services/announcement/updateFileToS3', formData).then(result => { if (result.code == '200') { item.picUrl = result.response; } }); }, previewImg(item) { this.previewImgItem.srcList = [item.picUrl]; this.previewImgItem.showViewer = true; }, closeViewer() { this.previewImgItem.showViewer = false; }, deleteImg(item) { item.picUrl = ''; }, openDialog(data) { // 新增公告 if (data === 'add') { this.isEdit = false; } else { // 修改公告 this.ruleForm = data; this.ruleForm.releaseDate = [data.releaseDate, data.releaseEndDate]; this.announContrastItem = JSON.parse(JSON.stringify(data)); this.isEdit = true; this.isOld = Number(data.isOld); // 如果是修改的旧数据 if (data.isOld == 0) { setTimeout(() => { this.$refs.noticeEditor.setContent(data.announcementContent); }, 500); this.ruleForm.picList = []; } } this.outerVisible = true; }, // 关闭预览打开编辑 addCallbackAnn() { this.outerVisible = true; }, // 新增公告 addNotice(formName) { const me = this; me.$refs[formName].validate(valid => { if (valid) { if (me.isOld == 0) { me.saveOldData(); } else { me.saveNewData(); } } else { return false; } }); }, // 保存新的数据 saveNewData() { this.saveData('add'); }, // 保存草稿 saveNotice(formName) { const validList = ['announcementTitle', 'releaseDate']; this.$refs[formName].validateField(validList); // 保存草稿描述和发布日期必填 const announcementTitle = this.ruleForm.announcementTitle; // 标题60字符以内 if ( announcementTitle.length > 0 && announcementTitle.length < 61 && this.ruleForm.releaseDate.length && this.ruleForm.releaseDate[0] && this.ruleForm.releaseDate[1] ) { this.saveData('draft'); } }, // 调用接口保存新的数据 saveData(type, paramsx) { const me = this; let isImg = true; for (let i = 0; i < me.ruleForm.picList.length; i++) { me.ruleForm.picList[i].order = i; if (isImg && !me.ruleForm.picList[i].picUrl) { isImg = false; } } if (!isImg && type === 'add') { me.commonFun.setNotice('发布上线公告请不要忘了上传公告图片哦', 'warning'); return; } const params = { announcementTitle: me.ruleForm.announcementTitle, releaseDate: me.comments.formatDate(me.ruleForm.releaseDate[0], 'YMD'), releaseEndDate: me.comments.formatDate(me.ruleForm.releaseDate[1], 'YMD'), type: '0', isDraft: type === 'add' ? 1 : 0, picList: me.ruleForm.picList, }; if (me.announContrastItem.id) { params.id = me.announContrastItem.id; } me.util .post('service/common/services/announcement/saveAnnouncement', params) .then(result => { if (result.code == 200) { // 刷新主页面数据 me.$emit('refsAnnouncement', result.response.id); me.closeDialog(); me.commonFun.setNotice(type === 'add' ? '发布成功' : '保存成功', 'success'); } else { me.commonFun.setNotice(result.message, 'error'); } }) .catch(err => this.hdpCommon.errorHandling(err)); }, // 预览 previewNotice() { this.outerVisible = false; this.isHideTiYanFun(false); this.$refs.previewNotice.openDialog(this.ruleForm); }, // 获取富文本的数据 callbackEqitorData(data) { this.ruleForm.announcementContent = data; }, // 上移 chevronUp(item, index) { const picList = JSON.parse(JSON.stringify(this.ruleForm.picList)); if (index != 0) { picList[index] = picList.splice(index - 1, 1, picList[index])[0]; } else { picList.push(picList.shift()); } this.ruleForm.picList = picList; }, // 下移 chevrondown(item, index) { const picList = JSON.parse(JSON.stringify(this.ruleForm.picList)); if (index != picList.length - 1) { picList[index] = picList.splice(index + 1, 1, picList[index])[0]; } else { picList.unshift(picList.splice(index, 1)[0]); } this.ruleForm.picList = picList; }, // 删除组 deleteImgGrou(item, index) { if (this.ruleForm.picList.length > 1) { this.ruleForm.picList.splice(index, 1); } else { this.commonFun.setNotice('最少要有一组数据', 'warning'); } }, // 新增描述 addDes() { const addItem = { picUrl: '', url: '', rule: 'url', }; if (this.ruleForm.picList.length < 30) { this.ruleForm.picList.unshift(addItem); } else { this.commonFun.setNotice('最多只能新增30个', 'error'); } }, // 保存历史数据及变更通知 saveOldData() { this.$refs.noticeEditor.submit(); const me = this; const editValue = me.ruleForm.announcementContent; const params = { announcementContent: editValue, announcementDesc: me.ruleForm.announcementDesc, announcementTitle: me.ruleForm.announcementTitle, releaseDate: me.comments.formatDate(me.ruleForm.releaseDate[0], 'YMD'), releaseEndDate: me.comments.formatDate(me.ruleForm.releaseDate[1], 'YMD'), type: me.ruleForm.type, isDraft: '1', }; if (me.isEdit) { params.id = me.ruleForm.id; } me.util .post('service/common/services/announcement/saveAnnouncement', params) .then(result => { if (result.code == 200) { // 刷新主页面数据 me.$emit('refsAnnouncement', result.response.id); me.outerVisible = false; me.closeDialog(); } else { me.commonFun.setNotice(result.message, 'error'); } }) .catch(err => this.hdpCommon.errorHandling(err)); }, isHideTiYanFun(type) { this.$emit('isHideTiYanFun', type); }, // 关闭弹框 closeDialog(type) { this.$refs.ruleForm.clearValidate(); this.ruleForm = { announcementTitle: '', announcementDesc: '', releaseDate: [], announcementContent: '', type: 0, isDraft: 0, picList: [ { picUrl: '', url: '', }, ], }; this.announContrastItem = {}; this.outerVisible = false; this.isOld = 1; }, }, }; </script> <style scoped> .add-announcement :deep(.el-dialog__body) { padding-bottom: 0; } .add-announcement :deep(.el-dialog__footer) { padding: 20px 0; } .announcement-help-tip { position: absolute; left: -87px; color: #1890ff; } .board-line { position: absolute; left: 0; border-bottom: 1px dashed #d5d5d5; width: 100%; } #add-announ-des { margin-top: 10px; margin-bottom: 10px; } .announ-des { border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; height: 159px; } .announ-des:last-child { border-bottom: 1px solid #d5d5d5; } .img-upload { width: 279px; float: left; border-right: 1px solid #d5d5d5; height: 100%; padding: 10px 20px 10px 20px; } .el-icon-plus { margin-left: -35px; } .upload-button { width: 29px; text-align: center; opacity: 0; } .img-upload-concent { background-color: #fbfdff; border: 1px dashed #d9d9d9; border-radius: 2px; box-sizing: border-box; width: 242px; height: 134px; cursor: pointer; line-height: 134px; text-align: center; } .img-upload-concent i { font-size: 20px; color: #9097a1; } .option-img { display: none; text-align: center; position: absolute; top: 76%; left: 53%; margin: -50px 0 0 -50px; } .option-img i { font-size: 16px; color: #fff; } .option-img i:hover, .option-sorting i:hover, .delete-des i:hover { color: #1890ff; } .img-hover { width: 240px; height: 137px; } .no-img-concent { position: relative; } .no-img-concent:hover .option-img { display: block; } .no-img-concent:hover .mulch { width: 240px; height: 137px; position: absolute; left: 0; top: 0; opacity: 0.3; background: #000; } i.ipd-font-icon.icon-upload { margin-left: -19px; } .option-right { float: left; width: 70%; height: 100%; text-align: center; } .option-sorting { float: left; width: 5%; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; height: 100%; line-height: 76px; } .option-sorting i, .delete-des i { color: #9097a1; cursor: pointer; } .option-sorting span { border-bottom: 1px solid #d5d5d5; width: 100%; float: left; } .input-url { margin-top: 62px; margin-left: -10px; width: 91%; float: left; margin-right: 10px; } .delete-des { line-height: 156px; margin-left: 9px; float: left; } .notice-editor { margin-left: 36px; } </style> 结合上边的代码和下边这段代码 <template> <div class="online-notice"> <div class="notice-date"> <div class="operation"> <!-- 上线公告 --> <span class="title" style="margin-left: 20px">{{ $t('HDP.COMMON.GO_LIVE_BULLETIN') }}</span> <!-- 新增公告 --> <a v-if="systemAdmin" :title="$t('HDP.WEB.ONLINE_NOTICE.ADDING_A_BULLETIN')" class="ipd-font-icon icon-new fontSize no true" @click="addNotice"></a> </div> <div class="release-date" :style="{ height: releaseHeight }"> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" :collapse="false"> <el-submenu v-for="(item, index) in quarterly" :key="index" :index="item.parentQuarterly"> <template #title> <span :title="item.parentQuarterly">{{ item.parentQuarterly }}</span> </template> <el-menu-item-group> <el-menu-item v-for="(item2, index2) in item.children" :key="index2" :index="item2.id" :title="item2.announcementTitle" @click="() => getAnnouncementItem(item2.id, 'detail')" > <!-- 草稿 --> <span v-if="item2.isDraft === '0'" class="draft">{{ $t('HDP.WEB.ONLINE_NOTICE.DRAFT') }}</span> <i v-if="systemAdmin && item2.isDraft === '0'" class="ifont ifont-del" @click="() => deleteDraft(item2)"></i> <i v-if="systemAdmin" class="ifont ifont-shenbaoshizhixuqiu" @click="() => updateNotice(item2)"></i> {{ item2.announcementTitle }} </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </div> </div> <div class="notice-cntent" :style="{ height: noticeCntentHeight }"> <div class="desc"> <span class="announcementDesc">{{ announItem.announcementTitle }}</span> <!-- 发布时间 --> <span class="releaseDate">{{ $t('HDP.WEB.ONLINE_NOTICE.RELEASE_TIME') }} : {{ announItem.releaseDate }}</span> </div> <div v-if="announItem.isOld === '0' || announItem.type === 1" v-xss-html="replaceCommonAppId(announItem.announcementContent)"></div> <div v-else class="preview-notice"> <ElCarousel :interval="5000" arrow="always" :loop="false" :autoplay="false" @change="changeCarousel"> <ElCarouselItem v-for="(item, index) in announItem.picList" :key="index"> <img v-if="item.picUrl" :src="$xss.getSafeValue(item.picUrl)" /> </ElCarouselItem> </ElCarousel> <!-- 马上体验 --> <el-button v-show="isHideTiYan" id="preview-notice-home-experience" type="primary" style="margin-top: 20px" @click="experience"> {{ $t('HDP.WEB.ONLINE_NOTICE.EXPERIENCE_IT_RIGHT') }} </el-button> </div> </div> <AddAnnouncement ref="addAnnouncement" @refs-announcement="getAnnouncementList" @is-hide-ti-yan-fun="isHideTiYanFun" /> </div> </template> <script> import { Carousel, CarouselItem } from '@plmcsdk/common-ui'; import { mapState } from 'vuex'; import commonApi from '../../api/common-api'; import AddAnnouncement from './AddAnnouncement'; export default { components: { AddAnnouncement, ElCarousel: Carousel, ElCarouselItem: CarouselItem, }, data() { return { isHideTiYan: true, outerVisible: false, previewItem: {}, // 切换当前图片 activeIndex: '', noticeData: {}, quarterly: [], announItem: {}, releaseHeight: `${window.innerHeight - 167}px`, noticeCntentHeight: `${window.innerHeight - 130}px`, editorOp: { id: 'notice', // 富文本id,必传 uploadUrl: 'service/common/services/announcement/updateFileToS3', // 图片上传url,必传 imgSize: 5, // 图片大小,必传 limit: 50, // 最大图片个数。如不传则不限制 editorContent: '', // 富文本内容 disabled: false, }, systemAdmin: false, }; }, computed: mapState({ userData: state => state.aside.userData, }), mounted() { const me = this; commonApi.getSystemAdmin().then(result => { if (result.success) { me.systemAdmin = result.response; } }); this.getAnnouncementList(); this.hdpCommon.changeIhelpApp('plm-hdd'); this.hdpCommon.trackPysicalPageView('GoliveBulletin'); // 该埋码用于验证common埋码接入 this.hdpCommon.trackPysicalPageView('notice'); }, methods: { // 兼容历史appid replaceCommonAppId(content) { if (window.vue.comments.getJumpUrl('replaceCommonAppId') ?? true) { content = content.replace(/com.huawei.ipd.innovation.hdd:hdp_service_common/g, 'com.huawei.ipd.hdp.common:hdp_service_common'); } return content; }, // 查询公告 getAnnouncementList(id) { const me = this; me.commonReadAjax .get('service/common/services/announcement/getAnnouncementList') .then(result => { if (result.code == 200) { me.quarterly = result.response; const itemNotice = result.response.length > 0 ? result.response[0].children[0] : ''; let noticeId = itemNotice.id; if (id) { noticeId = id; } me.getAnnouncementItem(noticeId, 'detail'); } else { me.commonFun.setNotice(result.message, 'error'); } }) .catch(err => this.hdpCommon.errorHandling(err)); }, // 获取单个公告详情 getAnnouncementItem(id, type) { const me = this; const params = { id, }; if (!id) { return; } me.activeIndex = id; me.commonReadAjax .get('service/common/services/announcement/getAnnouncement', params) .then(result => { if (result.code == 200) { const announcementTitle = this.comments.reverseXss(result.response.announcementTitle); const announcementDesc = this.comments.reverseXss(result.response.announcementDesc); const releaseDate = result.response.releaseDate; const releaseEndDate = result.response.releaseEndDate; const announcementContent = this.comments.reverseXss(result.response.announcementContent); const item = { announcementTitle, announcementDesc, releaseDate, releaseEndDate, announcementContent, type: parseInt(result.response.type), id: result.response.id, isOld: result.response.isOld, picList: result.response.picList, isDraft: result.response.isDraft, }; if (type == 'update') { if (item.type == 1) { item.isOld = 0; } me.$refs.addAnnouncement.openDialog(item); } if (type == 'detail') { me.announItem = JSON.parse(JSON.stringify(item)); } } else { me.commonFun.setNotice(result.message, 'error'); } }) .catch(err => this.hdpCommon.errorHandling(err)); }, // 新增/修改公告 addNotice() { this.$refs.addAnnouncement.openDialog('add'); }, // 修改公告 updateNotice(item) { const me = this; me.outerVisible = true; me.noticeData = item; event.stopPropagation(); me.getAnnouncementItem(item.id, 'update'); }, // 删除公告 deleteDraft(item) { this.hdpCommon.messageBox('提示', '确认删除选中的数据 ？', status => { if (status === 'confirm') { const params = { id: item.id, type: '0', isDraft: 0, }; this.util .post('service/common/services/announcement/deleteAnnouncement', params) .then(result => { if (result.code === 200) { this.getAnnouncementList(); this.hdpCommon.setNotice('删除成功', 'success'); } else { this.hdpCommon.setNotice(result.message, 'error'); } }) .catch(err => this.hdpCommon.errorHandling(err)); } }); }, changeCarousel(index) { this.previewItem = this.announItem.picList[index]; }, experience() { let url = this.previewItem.url; if (!url) { url = this.announItem.picList.length > 0 ? this.announItem.picList[0].url : ''; } window.open(url); }, // 预览的时候隐藏主页面的体验按钮 isHideTiYanFun(type) { this.isHideTiYan = type; }, }, }; </script> <style scoped lang="less"> .online-notice { width: 100%; float: left; .operation { height: 30px; line-height: 30px; .title { margin-left: 22px; font-weight: bold; } a { float: right; margin-right: 12px; margin-top: -1px; cursor: pointer; } } .el-dialog__body .el-form-item:nth-child(2) { margin-bottom: 18px; } .notice-editor { margin-left: 36px; } .notice-date { width: 14%; float: left; border-right: 1px solid #d9d9d9; .release-date { overflow: auto; } } .notice-cntent { width: 84%; float: left; overflow: auto; margin-left: 1%; margin: 12px 1% 0 1%; :deep(table) { border: none; border-collapse: collapse; table-layout: fixed; empty-cells: show; max-width: 100%; box-sizing: border-box; tr td, tr th { border: 1px solid #ddd; text-align: left; vertical-align: middle; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } } } .el-menu-item-group, .el-menu-item { text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; } li.el-menu-item:hover i.ifont { display: block; } i.ifont { float: right; margin-right: -4%; color: #1890ff; cursor: pointer; display: none; margin-right: 10px; } .desc { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc; .announcementDesc { font-size: 18px; color: #333333; font-weight: bold; margin-right: 15px; } } } </style> <style scoped> .online-notice .release-date :deep(.el-menu) { border-right: 0 !important; } .online-notice .release-date :deep(.el-submenu__icon-arrow) { margin-top: -4px; } .online-notice .preview-notice { width: 1200px; height: 675px; text-align: center; margin: 0 auto; background: #99a9bf; border: 1px solid #979797; background-color: rgba(153, 169, 191, 0.3); } .preview-notice :deep(.el-carousel--horizontal), .preview-notice :deep(.el-carousel__container) { height: 100%; } .preview-notice :deep(.el-carousel__button) { width: 8px; height: 8px; border-radius: 50%; } .preview-notice :deep(.el-carousel__container button) { background-color: #1890ff; } .preview-notice :deep(.el-carousel__container button:hover) { background: #66b1ff; border-color: #66b1ff; color: #fff; } .preview-notice :deep(.el-carousel__container button:active) { background-color: #3a8ee6; border-color: #3a8ee6; color: #fff; } .online-notice :deep(.draft) { float: right; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 2px; border-radius: 2px; height: 20px; width: 34px; line-height: 18px; text-align: center; color: #1890ff; margin-top: 10px; } #preview-notice-home-experience { width: 120px; height: 40px; } </style> 帮我分析一下点击新增上线公告点击确定后的公告通知弹窗的代码在哪个位置，并告诉我为什么没有弹窗的原因，如何解决这个问题
最新发布
09-30
- 行内数学表达式用$...$，但这个问题不涉及数学，所以可能不需要。 - 独立公式用$$...$$，同样可能不需要。 - LaTeX语法正确，但主要是文本。 - 使用中文。 关键点是：用户提到“站内引用”，但说它不是真正的...
使用两个el-form 表单验证失效
01-01
如果发现调用 `this.$refs[ruleForm].validate()` 无法触发预期行为，则应改为直接访问 `$refs` 下对应的表单实例对象来进行验证操作[^2]: ```javascript // 错误写法 this.$refs['ruleForm'].validate((valid) => ...
关于elementui this.$refs[“form“].validate校验消失的原因
weixin_48090015的博客
10-24 1888
在表单提交的时候遇到elementui 提交点击确认后却没有显示任何成功或者失败的信息，原因大概率是在表单中rules使用了自定义校验，而elementui中自定义校验一定要有callback()，添加之后得以提交表单。
(vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行
weixin_30642305的博客
03-01 1348
您好，欢迎来到[编程问答]网站首页源码下载电子书籍软件下载专题 首页 IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发...
a-form-model-item设置校验永远慢一步或者无效
weixin_45440916的博客
10-26 2354
a-form-model-item设置校验，不管如何都只出“请输入名称”的提示信息，明明控制台callback的信息是“名称重复”出现的效果或者应该出现的提示信息总是慢一步
this.$refs.ruleForm.validate is not a function
weixin_42482854的博客
11-20 1万+
原来是form（要验证的）不能写在循环里，不然this.$refs[name].validate((valid)这一行会一直报错
this.$refs.form.validate() 不执行问题的解决办法
zyf971020的博客
11-15 1万+
this.$refs.form.validate() 不执行问题的解决办法
vue 和element中this.$refs[form].validate(valid) 一直不执行
weixin_42718754的博客
05-25 6243
项目场景： vue中this.$refs[form].validate(valid) 一直不执行 问题描述： 在用vue和element做表单验证的时候，this.$refs[form].validate(valid) 一直不执行里面的代码，后来发现还是因为自定义的验证方法里面漏写的callback（） 原因分析： 一开始只写了1,2,4 三个callback方法， 漏写了3 的callback 方法，导致我的validate执行不成功， 如果确定你的自定义验证方法里面的callback是都
el-form resetFields无效和validate无效的可能原因及解决方法
我家有只小金毛的博客
04-17 7500
el-form resetFields无效和validate无效的可能原因及解决方法问题导入简单实例1、官方案例resetFields 失败可能原因2、个人案例resetFields失效及解决办法先添加后编辑先编辑后添加validate失效及解决办法结尾 问题导入 在使用 el-form 过程中，尤其是表单验证这一块，官方提供的 reserFields 方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。 简单实例 1、官方案例 先来看看官方提供的案例，对应的官网 表单验证 对应的代码 &
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
热门推荐
和子昭的博客
05-28 17万+
来自”和“小编的小提示：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在&lt;el-form-item&gt;上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）2.el-form...
elementUi 清除校验不生效的问题
qq_42069221的博客
07-06 3422
this.$refs.ipForm.clearValidate() 清除校验不生效 解决： 方法1： this.$nextTick(() => { this.$refs[ipForm].clearValidate(); }); 方法2： setTimeout(() => {this.$refs.ipForm.clearValidate();}, 30) 这个样子就生效了，这是为什么? ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值