this.$refs.ruleForm.validate失效

最新推荐文章于 2023-12-11 10:55:27 发布
原创 最新推荐文章于 2023-12-11 10:55:27 发布 · 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--表单验证以及踩坑
苏宛墨的博客
04-21 947
表单验证以及踩坑 验证方法–整体验证(validate) this.$refs["ruleForm"].validate((valid) => { if(valid){ //这里执行你验证通过需要用的代码 }else{ //这里执行验证未通过的代码 console.log("error submit!!"); return false; } } 验证方法–局部验证(validateField) - 单个验证 th
VUE 表单验证 ! validate中的内容验证为false时执行,true时不执行
mengziwudao的博客
12-18 5589
作为初学者在VUE表单验证遇到一个大坑 onSubmitaddForm:function( formName ){ let _t = this; this.$refs[formName].validate((valid) => { console.log(123); conso...
前端 表单校验的使用和实现
weixin_50902154的博客
10-21 2775
通过自身接受的字段从父级获取表单绑定的value，并广播交互事件。这样一来三个组件可以互相通信，并且彼此更改组件之间的值，改变绑定value的同时触发校验。子组件中通过inject获取。但是还有一种更灵活的办法，
elementui el-form自定义校验规则后表单验证this.$refs[formName].validate不生效的问题
有没有认真工作的博客
12-11 1168
明明我输入的值是符合规则的，但是点击确定硬是没有任何反馈，原来是通过验证的时候我少了return callback()
使用this.$refs.ref.validate数据校验没反应
qq_51272147的博客
10-09 3427
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> <el-dialog :visible.sync="dialogVisible" :title="`${title[operateType]}范围子规则`" width="500" :close-on-click-modal="false" > <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="base-ruleForm" label-position="top" size="mini" :disabled="operateType == 'detail'" > <el-form-item label="规则名称" prop="nameCn"> <el-input v-model="ruleForm.nameCn"></el-input> </el-form-item> <el-form-item label="描述" prop="description"> <el-input v-model="ruleForm.description" type="textarea" rows="3" show-word-limit maxlength="200" ></el-input> </el-form-item> </el-form> <el-form :model="customRuleForm" :rules="customRules" :inline="true" ref="customRuleFormRef" label-width="100px" class="custom-ruleForm" label-position="top" size="mini" :disabled="operateType == 'detail'" > <el-form-item label="发送人类型" prop="fromTypeList"> <el-select v-model="customRuleForm.fromTypeList" multiple @change="dealSelectAll('fromTypeList')" > <el-option v-for="opt in filterOptions.FromTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="接收人类型" prop="toTypeList"> <el-select v-model="customRuleForm.toTypeList" multiple @change="dealSelectAll('toTypeList')" > <el-option v-for="opt in filterOptions.ToTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="消息类型" prop="msgTypeList"> <el-select v-model="customRuleForm.msgTypeList" multiple> <el-option v-for="opt in filterOptions.MsgTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="聊天类型" prop="chatTypeList"> <el-select v-model="customRuleForm.chatTypeList" multiple @change="changeChatTypeList(false)" > <el-option v-for="opt in filterOptions.ChatTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="群聊群主" prop="roomOwnerIdList"> <el-select v-model="customRuleForm.roomOwnerIdList" multiple filterable remote :remote-method="searchRoomOwner" :popper-append-to-body="false" > <div v-infinite-scroll="loadMoreRoomOwner" :infinite-scroll-disabled=" roomOwnerIdScroll.loading || roomOwnerIdScroll.noMore " :infinite-scroll-distance="20" style="max-height: 240px; overflow: auto" > <el-option v-for="opt in filterOptions.RoomOwnerIdListEnum" :key="opt.ownerId" :label="opt.ownerName" :value="opt.ownerId" > </el-option> <div v-if="roomOwnerIdScroll.loading" class="loading-text"> 加载中... </div> <div v-if="!roomOwnerIdScroll.loading && !roomOwnerIdScroll.noMore" class="loading-text" > 下拉加载更多... </div> <div v-if="roomOwnerIdScroll.noMore" class="loading-text"> 没有更多了 </div> </div> </el-select> </el-form-item> <el-form-item label="群主员工所属部门" prop="roomOwnerDeptList"> <el-select v-model="customRuleForm.roomOwnerDeptList" multiple filterable remote :remote-method="searchDepts" :popper-append-to-body="false" > <div v-infinite-scroll="loadMoreDepts" :infinite-scroll-disabled=" roomOwnerDeptScroll.loading || roomOwnerDeptScroll.noMore " :infinite-scroll-distance="20" style="max-height: 240px; overflow: auto" > <el-option v-for="opt in filterOptions.RoomOwnerDeptListEnum" :key="opt.id" :label="opt.name" :value="opt.id" > </el-option> <div v-if="roomOwnerDeptScroll.loading" class="loading-text"> 加载中... </div> <div v-if="!roomOwnerDeptScroll.loading && !roomOwnerDeptScroll.noMore" class="loading-text" > 下拉加载更多... </div> <div v-if="roomOwnerDeptScroll.noMore" class="loading-text"> 没有更多了 </div> </div> </el-select> </el-form-item> <el-form-item label="群聊列表" prop="roomIdList"> <el-select v-model="customRuleForm.roomIdList" multiple filterable remote :remote-method="searchRoom" :popper-append-to-body="false" @change="changeRoomId(false)" > <div v-infinite-scroll="loadMoreRoom" :infinite-scroll-disabled=" roomIdScroll.loading || roomIdScroll.noMore " :infinite-scroll-distance="20" style="max-height: 240px; overflow: auto" > <el-option v-for="opt in filterOptions.RoomIdListEnum" :key="opt.roomId" :label="opt.roomName" :value="opt.roomId" > </el-option> <div v-if="roomIdScroll.loading" class="loading-text"> 加载中... </div> <div v-if="!roomIdScroll.loading && !roomIdScroll.noMore" class="loading-text" > 下拉加载更多... </div> <div v-if="roomIdScroll.noMore" class="loading-text"> 没有更多了 </div> </div> </el-select> </el-form-item> <el-form-item label="群聊成员白名单" prop="roomExcludeList"> <el-select v-model="customRuleForm.roomExcludeList" multiple filterable remote :remote-method="searchRoomMember" :popper-append-to-body="false" > <div v-infinite-scroll="loadMoreRoomMember" :infinite-scroll-disabled=" roomExcludeScroll.loading || roomExcludeScroll.noMore " :infinite-scroll-distance="20" style="max-height: 240px; overflow: auto" > <el-option v-for="opt in filterOptions.roomExcludeListEnum" :key="opt.qwUserId" :label="opt.name" :value="opt.qwUserId" > </el-option> <div v-if="roomExcludeScroll.loading" class="loading-text"> 加载中... </div> <div v-if="!roomExcludeScroll.loading && !roomExcludeScroll.noMore" class="loading-text" > 下拉加载更多... </div> <div v-if="roomExcludeScroll.noMore" class="loading-text"> 没有更多了 </div> </div> </el-select> </el-form-item> <el-form-item label="群聊关注成员" prop="roomFocueList"> <el-select v-model="customRuleForm.roomFocueList" multiple filterable remote :remote-method="searchRoomFocusMember" :popper-append-to-body="false" > <div v-infinite-scroll="loadMoreRoomFocusMember" :infinite-scroll-disabled=" roomFocusScroll.loading || roomFocusScroll.noMore " :infinite-scroll-distance="20" style="max-height: 240px; overflow: auto" > <el-option v-for="opt in filterOptions.roomFocusListEnum" :key="opt.qwUserId" :label="opt.name" :value="opt.qwUserId" > </el-option> <div v-if="roomFocusScroll.loading" class="loading-text"> 加载中... </div> <div v-if="!roomFocusScroll.loading && !roomFocusScroll.noMore" class="loading-text" > 下拉加载更多... </div> <div v-if="roomFocusScroll.noMore" class="loading-text"> 没有更多了 </div> </div> </el-select> </el-form-item> <el-form-item label="员工" prop="employeeList"> <private-cloud-member-select-new style="width: 100%" ref="privateCloudMemberUse" placeholder="请选择员工" :defaultCheckedKey="defalutValue.employeeList" mode="member" @selectedMembers="choseEmployeeList" /> </el-form-item> <el-form-item label="部门" prop="deptList"> <private-cloud-member-select-new style="width: 100%" ref="privateCloudDeptUse" mode="group" placeholder="请选择部门" :defaultCheckedKey="defalutValue.deptList" @selectedGroups="choseDeptList" /> </el-form-item> <el-form-item label="是否启用白名单" prop="enableWhite"> <el-switch v-model="customRuleForm.enableWhite" :active-value="1" :inactive-value="0" > </el-switch> </el-form-item> <el-form-item label="正则表达式" prop="textRegex" style="width: 100%"> <vue-json-editor v-model="customRuleForm.textRegex" style="width: 100%" mode="code" lang="zh" ></vue-json-editor> </el-form-item> </el-form> <div class="el-form-item el-form--label-top" style="margin-bottom: 0"> <label for="" class="el-form-item__label">扩展信息</label> <div class="el-form-item__content extra-info"> <vue-json-editor ref="jsonRef" v-model="ext" style="width: 100%" mode="code" lang="zh" ></vue-json-editor> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save" :disabled="operateType == 'detail'" > 确定 </el-button> </div> </el-dialog> </template> <script> import vueJsonEditor from 'vue-json-editor' import archivesApi from '@/api/archive/index' import dayjs from 'dayjs' import { debounce } from 'lodash' export default { components: { vueJsonEditor, }, props: { type: String, }, data() { return { dialogVisible: false, ruleForm: { nameCn: '', description: '', }, rules: { nameCn: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }, ], }, formConfig: [], customRuleForm: { fromTypeList: null, toTypeList: null, msgTypeList: null, chatTypeList: null, roomOwnerIdList: null, roomOwnerDeptList: null, roomIdList: null, roomExcludeList: null, roomFocueList: null, employeeList: null, deptList: null, enableWhite: 0, textRegex: {}, }, filterOptions: {}, customRules: {}, ext: {}, hasJsonErrorFlag: false, defalutValue: { employeeList: [], deptList: [], }, isEdit: false, operateType: null, editIndex: null, groupData: [], title: { add: '添加', edit: '编辑', detail: '查看', }, roomOwnerIdScroll: { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }, roomIdScroll: { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }, roomOwnerDeptScroll: { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }, roomExcludeScroll: { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }, roomFocusScroll: { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }, } }, watch: { dialogVisible(newVal) { if (!newVal) { this.resetFiled() } }, }, mounted() {}, methods: { // 获取筛选项 async getFilter(filter, ruleType, row = null, index) { this.operateType = ruleType this.isEdit = ruleType === 'edit' ? true : false if (this.isEdit) { this.editIndex = index } this.filterOptions = { ...filter } this.resetScrollData() if (ruleType === 'add' && row) { this.$set(this.ruleForm, 'nameCn', row.nameCn) await this.getOwnerDeptList(true) } else if (row) { this.$set(this.ruleForm, 'nameCn', row.nameCn) this.$set(this.ruleForm, 'description', row.description) this.customRuleForm = { ...row } this.customRuleForm.textRegex = JSON.parse(row.textRegex) if (row.ext) { this.ext = JSON.parse(row.ext) } this.defalutValue.employeeList = row.employeeListIds?.map( (item) => `_${item}` || [] ) this.defalutValue.deptList = row.deptList ? [...row.deptList] : [] await this.getOwnerDeptList(true) await this.changeChatTypeList(true) await this.changeRoomId(true) if (row.roomOwnerIdList) { this.handleMissingRoomOwner(row.roomOwnerIdList) } if (row.roomIdList) { this.handleMissingRoom(row.roomIdList) } if (row.roomOwnerDeptList) { this.handleMissingDepts(row.roomOwnerDeptList) } if (row.roomExcludeList) { this.handleMissingRoomMember(row.roomExcludeList) } if (row.roomFocueList) { this.handleMissingFocusMember(row.roomFocueList) } } }, dealSelectAll(type) { if (this.customRuleForm[type]?.includes(0)) { this.customRuleForm[type] = [0] } }, validChatType() { let chatType = null if ( this.customRuleForm.chatTypeList?.includes(0) || this.customRuleForm.chatTypeList == null || this.customRuleForm.chatTypeList?.length == 0 ) { chatType = null } else if ( this.customRuleForm.chatTypeList?.includes(2) && this.customRuleForm.chatTypeList?.includes(4) ) { chatType = null } else if (this.customRuleForm.chatTypeList?.includes(2)) { chatType = 2 } else if (this.customRuleForm.chatTypeList?.includes(4)) { chatType = 4 } return chatType }, // 获取者群主列表 async getRoomOwnerList(init = false) { if (this.roomOwnerIdScroll.loading) return if (init) { this.$set(this.filterOptions, 'RoomOwnerIdListEnum', []) this.$set(this, 'roomOwnerIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } // 单聊或者为空时直接不去请求接口 if ( this.customRuleForm.chatTypeList == null || this.customRuleForm.chatTypeList?.length == 0 ) { return } if ( this.customRuleForm.chatTypeList?.length == 2 && this.customRuleForm.chatTypeList?.includes(1) && this.customRuleForm.chatTypeList?.includes(3) ) { return } if ( this.customRuleForm.chatTypeList?.length == 1 && (this.customRuleForm.chatTypeList?.includes(1) || this.customRuleForm.chatTypeList?.includes(3)) ) { return } let chatType = this.validChatType() this.roomOwnerIdScroll.loading = true const params = { page: this.roomOwnerIdScroll.page, pageSize: this.roomOwnerIdScroll.pageSize, ownerName: this.roomOwnerIdScroll.name?.trim(), chatType: chatType, } await archivesApi .getRoomList(params) .then((res) => { if (res.data.success) { const data = res.data.data.list const newData = [...this.filterOptions.RoomOwnerIdListEnum, ...data] this.$set(this.filterOptions, 'RoomOwnerIdListEnum', newData) this.filterOptions.RoomOwnerIdListEnum = this.filterOptions.RoomOwnerIdListEnum.reduce((acc, item) => { if (!acc.some((i) => i.ownerId === item.ownerId)) { acc.push(item) } return acc }, []) this.$set(this.roomOwnerIdScroll, 'loading', false) this.$set(this.roomOwnerIdScroll, 'total', res.data.data.total) this.$set(this.roomOwnerIdScroll, 'pages', res.data.data.pages) this.$set( this.roomOwnerIdScroll, 'noMore', this.roomOwnerIdScroll.page >= this.roomOwnerIdScroll.pages ? true : false ) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) }, // 加载更多群主（滚动触发） loadMoreRoomOwner: debounce(function () { if (!this.roomOwnerIdScroll.loading && !this.roomOwnerIdScroll.noMore) { this.roomOwnerIdScroll.page++ this.getRoomOwnerList() } }, 300), // 群主搜索 searchRoomOwner: debounce(function (query) { this.$set(this.roomOwnerIdScroll, 'name', query) this.$set(this.roomOwnerIdScroll, 'page', 1) this.getRoomOwnerList(true) }, 500), // 处理编辑时缺失的群主选项（回显） async handleMissingRoomOwner(ownerIds) { // 找出当前不在列表中的群ID const missingIds = ownerIds.filter( (ownerId) => !this.filterOptions.RoomOwnerIdListEnum.some( (opt) => opt.ownerId === ownerId ) ) if (missingIds.length > 0) { try { const res = await archivesApi.getRoomList({ ownerIds: missingIds, pageSize: 10000, page: 1, }) if (res.data.success) { // 将缺失的部门添加到列表开头 this.filterOptions.RoomOwnerIdListEnum = [ ...res.data.data.list, ...this.filterOptions.RoomOwnerIdListEnum, ] this.filterOptions.RoomOwnerIdListEnum = this.filterOptions.RoomOwnerIdListEnum.reduce((acc, item) => { if (!acc.some((i) => i.ownerId === item.ownerId)) { acc.push(item) } return acc }, []) } } catch (e) { console.error('加载缺失群主失败', e) } } }, // 获取者群聊列表 async getRoomList(init = false) { if (this.roomIdScroll.loading) return if (init) { this.$set(this.filterOptions, 'RoomIdListEnum', []) this.$set(this, 'roomIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } if ( this.customRuleForm.chatTypeList == null || this.customRuleForm.chatTypeList?.length == 0 ) { return } if ( this.customRuleForm.chatTypeList?.length == 2 && this.customRuleForm.chatTypeList?.includes(1) && this.customRuleForm.chatTypeList?.includes(3) ) { return } if ( this.customRuleForm.chatTypeList?.length == 1 && (this.customRuleForm.chatTypeList?.includes(1) || this.customRuleForm.chatTypeList?.includes(3)) ) { return } let chatType = this.validChatType() this.roomIdScroll.loading = true const params = { page: this.roomIdScroll.page, pageSize: this.roomIdScroll.pageSize, roomName: this.roomIdScroll.name.trim(), chatType: chatType, } await archivesApi .getRoomList(params) .then((res) => { if (res.data.success) { const data = res.data.data.list this.filterOptions.RoomIdListEnum = [ ...this.filterOptions.RoomIdListEnum, ...data, ] this.filterOptions.RoomIdListEnum = this.filterOptions.RoomIdListEnum.reduce((acc, item) => { if (!acc.some((i) => i.roomId === item.roomId)) { acc.push(item) } return acc }, []) this.$set(this.roomIdScroll, 'loading', false) this.$set(this.roomIdScroll, 'total', res.data.data.total) this.$set(this.roomIdScroll, 'pages', res.data.data.pages) this.$set( this.roomIdScroll, 'noMore', this.roomIdScroll.page >= this.roomIdScroll.pages ? true : false ) console.log('获取群列表roomIdScroll', this.roomIdScroll) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) }, // 加载更多群（滚动触发） loadMoreRoom: debounce(function () { if (!this.roomOwnerIdScroll.loading && !this.roomOwnerIdScroll.noMore) { this.roomIdScroll.page++ this.getRoomList() } }, 300), // 群搜索 searchRoom: debounce(function (query) { this.roomIdScroll.name = query this.$set(this.roomIdScroll, 'name', query) this.$set(this.roomIdScroll, 'page', 1) this.getRoomList(true) }, 500), // 处理编辑时缺失的群选项（回显） async handleMissingRoom(roomIds) { // 找出当前不在列表中的群ID const missingIds = roomIds.filter( (roomId) => !this.filterOptions.RoomIdListEnum.some( (opt) => opt.roomId === roomId ) ) if (missingIds.length > 0) { try { const res = await archivesApi.getRoomList({ roomIds: missingIds, pageSize: 10000, page: 1, }) if (res.data.success) { // 将缺失的部门添加到列表开头 this.filterOptions.RoomIdListEnum = [ ...res.data.data.list, ...this.filterOptions.RoomIdListEnum, ] this.filterOptions.RoomIdListEnum = this.filterOptions.RoomIdListEnum.reduce((acc, item) => { if (!acc.some((i) => i.roomId === item.roomId)) { acc.push(item) } return acc }, []) } } catch (e) { console.error('加载缺失群主失败', e) } } }, // 选择群聊类型时 changeChatTypeList(isEditInit = true) { if (this.customRuleForm.chatTypeList?.includes(0)) { this.$set(this.customRuleForm, 'chatTypeList', [0]) } if ( (this.customRuleForm.chatTypeList?.length == 1 && (this.customRuleForm.chatTypeList.includes(1) || this.customRuleForm.chatTypeList.includes(3))) || (this.customRuleForm.chatTypeList?.length == 2 && this.customRuleForm.chatTypeList?.includes(1) && this.customRuleForm.chatTypeList?.includes(3)) || this.customRuleForm.chatTypeList == null || this.customRuleForm.chatTypeList?.length == 0 ) { this.filterOptions.RoomOwnerIdListEnum = [] this.filterOptions.RoomIdListEnum = [] this.$set(this, 'roomOwnerIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) this.$set(this, 'roomIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } else { this.getRoomOwnerList(true) this.getRoomList(true) } if (!isEditInit) { this.customRuleForm.roomOwnerIdList = [] this.customRuleForm.roomIdList = [] this.customRuleForm.roomExcludeList = [] this.customRuleForm.roomFocueList = [] } }, // 选择群列表 async changeRoomId(isEditInit = true) { await this.getRoomMemberList(true) await this.getRoomFocusMemberList(true) if (!isEditInit) { this.customRuleForm.roomExcludeList = [] this.customRuleForm.roomFocueList = [] } }, // 白名单成员 async getRoomMemberList(init = false) { if (this.customRuleForm.roomIdList?.length) { if (this.roomExcludeScroll.loading) return if (init) { this.$set(this.filterOptions, 'roomExcludeListEnum', []) this.$set(this, 'roomExcludeScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } const params = { roomIds: this.customRuleForm.roomIdList, name: this.roomExcludeScroll.name, page: this.roomExcludeScroll.page, pageSize: this.roomExcludeScroll.pageSize, } await archivesApi .getRoomMemberList(params) .then((res) => { if (res.data.success) { // const data = res.data.data // this.$set(this.filterOptions, 'roomExcludeListEnum', data.list) const data = res.data.data.list this.filterOptions.roomExcludeListEnum = [ ...this.filterOptions.roomExcludeListEnum, ...data, ] this.filterOptions.roomExcludeListEnum = this.filterOptions.roomExcludeListEnum.reduce((acc, item) => { if (!acc.some((i) => i.qwUserId === item.qwUserId)) { acc.push(item) } return acc }, []) this.$set(this.roomExcludeScroll, 'loading', false) this.$set(this.roomExcludeScroll, 'total', res.data.data.total) this.$set(this.roomExcludeScroll, 'pages', res.data.data.pages) this.$set( this.roomExcludeScroll, 'noMore', this.roomExcludeScroll.page >= this.roomExcludeScroll.pages ? true : false ) } else { this.filterOptions.roomExcludeListEnum = [] this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) } else { this.filterOptions.roomExcludeListEnum = [] } }, // 加载更多群成员（滚动触发） loadMoreRoomMember: debounce(function () { if (!this.roomExcludeScroll.loading && !this.roomExcludeScroll.noMore) { this.roomExcludeScroll.page++ this.getRoomMemberList() } }, 300), // 群成员搜索 searchRoomMember: debounce(function (query) { this.$set(this.roomExcludeScroll, 'name', query) this.$set(this.roomExcludeScroll, 'page', 1) this.getRoomMemberList(true) }, 500), // 处理编辑时缺失的群成员选项（回显） async handleMissingRoomMember(deptIds) { // 找出当前不在列表中的群成员ID const missingIds = deptIds.filter( (qwUserId) => !this.filterOptions.roomExcludeListEnum.some( (opt) => opt.qwUserId === qwUserId ) ) if (missingIds.length > 0) { try { await archivesApi .getRoomMemberList({ qwUserIds: missingIds, pageSize: 10000, page: 1, }) .then((res) => { if (res.data.success) { this.filterOptions.roomExcludeListEnum = [ ...res.data.data.list, ...this.filterOptions.roomExcludeListEnum, ] this.filterOptions.roomExcludeListEnum = this.filterOptions.roomExcludeListEnum.reduce((acc, item) => { if (!acc.some((i) => i.qwUserId === item.qwUserId)) { acc.push(item) } return acc }, []) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) } catch (e) { console.error('加载缺失部门失败', e) } } }, // 关注成员 async getRoomFocusMemberList(init = false) { if (this.customRuleForm.roomIdList?.length) { if (this.roomFocusScroll.loading) return if (init) { this.$set(this.filterOptions, 'roomFocusListEnum', []) this.$set(this, 'roomFocusScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } const params = { roomIds: this.customRuleForm.roomIdList, name: this.roomFocusScroll.name, page: this.roomFocusScroll.page, pageSize: this.roomFocusScroll.pageSize, } await archivesApi .getRoomMemberList(params) .then((res) => { if (res.data.success) { const data = res.data.data.list this.filterOptions.roomFocusListEnum = [ ...this.filterOptions.roomFocusListEnum, ...data, ] this.filterOptions.roomFocusListEnum = this.filterOptions.roomFocusListEnum.reduce((acc, item) => { if (!acc.some((i) => i.qwUserId === item.qwUserId)) { acc.push(item) } return acc }, []) this.$set(this.roomFocusScroll, 'loading', false) this.$set(this.roomFocusScroll, 'total', res.data.data.total) this.$set(this.roomFocusScroll, 'pages', res.data.data.pages) this.$set( this.roomFocusScroll, 'noMore', this.roomFocusScroll.page >= this.roomFocusScroll.pages ? true : false ) } else { this.filterOptions.roomFocusListEnum = [] this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) } else { this.filterOptions.roomFocusListEnum = [] } }, // 加载更多关注成员（滚动触发） loadMoreRoomFocusMember: debounce(function () { if (!this.roomFocusScroll.loading && !this.roomFocusScroll.noMore) { this.roomFocusScroll.page++ this.getRoomFocusMemberList() } }, 300), // 关注成员搜索 searchRoomFocusMember: debounce(function (query) { this.$set(this.roomFocusScroll, 'name', query) this.$set(this.roomFocusScroll, 'page', 1) this.getRoomFocusMemberList(true) }, 500), // 处理编辑时缺失的关注成员选项（回显） async handleMissingFocusMember(deptIds) { // 找出当前不在列表中的群成员ID const missingIds = deptIds.filter( (qwUserId) => !this.filterOptions.roomFocusListEnum.some( (opt) => opt.qwUserId === qwUserId ) ) if (missingIds.length > 0) { try { await archivesApi .getRoomMemberList({ qwUserIds: missingIds, pageSize: 10000, page: 1, }) .then((res) => { if (res.data.success) { this.filterOptions.roomFocusListEnum = [ ...res.data.data.list, ...this.filterOptions.roomFocusListEnum, ] this.filterOptions.roomFocusListEnum = this.filterOptions.roomFocusListEnum.reduce((acc, item) => { if (!acc.some((i) => i.qwUserId === item.qwUserId)) { acc.push(item) } return acc }, []) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) } catch (e) { console.error('加载缺失部门失败', e) } } }, // 获取群主部门 async getOwnerDeptList(init = false) { if (this.roomOwnerDeptScroll.loading) return this.roomOwnerDeptScroll.loading = true if (init) { this.$set(this.filterOptions, 'RoomOwnerDeptListEnum', []) this.$set(this, 'roomOwnerDeptScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) } const params = { page: this.roomOwnerDeptScroll.page, pageSize: this.roomOwnerDeptScroll.pageSize, name: this.roomOwnerDeptScroll.name?.trim(), } await archivesApi .getOwnerDeptList(params) .then((res) => { if (res.data.success) { const data = res.data.data this.filterOptions.RoomOwnerDeptListEnum = [ ...this.filterOptions.RoomOwnerDeptListEnum, ...res.data.data.list, ] this.filterOptions.RoomOwnerDeptListEnum = this.filterOptions.RoomOwnerDeptListEnum.reduce((acc, item) => { if (!acc.some((i) => i.id === item.id)) { acc.push(item) } return acc }, []) // this.$set(this.filterOptions, 'RoomOwnerDeptListEnum', newData) this.$set(this.roomOwnerDeptScroll, 'loading', false) this.$set(this.roomOwnerDeptScroll, 'total', res.data.data.total) this.$set(this.roomOwnerDeptScroll, 'pages', res.data.data.pages) this.$set( this.roomOwnerDeptScroll, 'noMore', this.roomOwnerDeptScroll.page >= this.roomOwnerDeptScroll.pages ? true : false ) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) }, // 加载更多部门（滚动触发） loadMoreDepts: debounce(function () { if ( !this.roomOwnerDeptScroll.loading && !this.roomOwnerDeptScroll.noMore ) { this.roomOwnerDeptScroll.page++ this.getOwnerDeptList() } }, 300), // 部门搜索 searchDepts: debounce(function (query) { this.$set(this.roomOwnerDeptScroll, 'name', query) this.$set(this.roomOwnerDeptScroll, 'page', 1) this.getOwnerDeptList(true) }, 500), // 处理编辑时缺失的部门选项（回显） async handleMissingDepts(deptIds) { // 找出当前不在列表中的部门ID const missingIds = deptIds.filter( (id) => !this.filterOptions.RoomOwnerDeptListEnum.some((opt) => opt.id === id) ) if (missingIds.length > 0) { try { await archivesApi .getOwnerDeptList({ nodeIds: missingIds, pageSize: 10000, page: 1 }) .then((res) => { if (res.data.success) { this.filterOptions.RoomOwnerDeptListEnum = [ ...res.data.data.list, ...this.filterOptions.RoomOwnerDeptListEnum, ] this.filterOptions.RoomOwnerDeptListEnum = this.filterOptions.RoomOwnerDeptListEnum.reduce( (acc, item) => { if (!acc.some((i) => i.id === item.id)) { acc.push(item) } return acc }, [] ) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) } catch (e) { console.error('加载缺失部门失败', e) } } }, // 重置滚动加载相关数据 resetScrollData() { this.$set(this.filterOptions, 'RoomOwnerIdListEnum', []) this.$set(this, 'roomOwnerIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) this.$set(this.filterOptions, 'RoomIdListEnum', []) this.$set(this, 'roomIdScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) this.$set(this.filterOptions, 'roomExcludeListEnum', []) this.$set(this, 'roomExcludeScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) this.$set(this.filterOptions, 'roomFocusListEnum', []) this.$set(this, 'roomFocusScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) this.$set(this.filterOptions, 'RoomOwnerDeptListEnum', []) this.$set(this, 'roomOwnerDeptScroll', { page: 1, pageSize: 50, loading: false, noMore: false, name: '', total: 0, pages: 0, }) }, save() { let isPass = true this.$refs.ruleFormRef.validate((valid) => { if (!valid) { isPass = false } }) this.$refs.customRuleFormRef.validate((valid) => { if (!valid) { isPass = false } }) console.log('筛选项验证通过', this.ext) if (this.$refs.jsonRef.error) { isPass = false this.$message.error('扩展信息JSON格式错误') return } if (!isPass) { return } const params = { ...this.customRuleForm, ...this.ruleForm, textRegex: JSON.stringify(this.customRuleForm.textRegex), ext: JSON.stringify(this.ext), } if (this.isEdit) { params.gmtModified = dayjs().format('YYYY-MM-DD HH:mm:ss') this.$emit('freshData', params, this.type, this.editIndex) } else { params.gmtCreate = dayjs().format('YYYY-MM-DD HH:mm:ss') this.$emit('freshData', params, this.type) } this.resetFiled() this.dialogVisible = false console.log(isPass, 'isPass') }, // 选择员工 choseEmployeeList(val) { const { empList = [] } = val || {} let checkedKey = [] let checkedEmployee = [] let checkedEmployeeIds = [] if (empList && empList.length) { // 回显使用成员id checkedKey = checkedKey.concat(empList.map((x) => `_${x.id}`)) checkedEmployee = checkedEmployee.concat(empList.map((x) => x.qwUserId)) checkedEmployeeIds = checkedEmployeeIds.concat(empList.map((x) => x.id)) } this.defalutValue.employeeList = checkedKey this.customRuleForm.employeeList = checkedEmployee this.customRuleForm.employeeListIds = checkedEmployeeIds }, // 选择部门 choseDeptList(val) { const { deptList = [] } = val || {} let checkedKey = [] // 员工回显 if (deptList && deptList.length) { checkedKey = deptList.map((x) => x.nodeId) } this.defalutValue.deptList = checkedKey this.customRuleForm.deptList = checkedKey }, resetFiled() { this.ruleForm = { nameCn: '', description: '', } this.customRuleForm = { fromTypeList: null, toTypeList: null, msgTypeList: null, chatTypeList: null, roomOwnerIdList: null, roomOwnerDeptList: null, roomIdList: null, roomExcludeList: null, roomFocueList: null, employeeList: null, deptList: null, enableWhite: 0, textRegex: {}, employeeListIds: null, } this.defalutValue = { employeeList: [], deptList: [], } this.$refs.privateCloudMemberUse.reset() this.$refs.privateCloudDeptUse.reset() this.$refs.ruleFormRef.resetFields() this.$refs.customRuleFormRef.resetFields() this.ext = {} }, }, } </script> <style lang="scss" scoped> ::v-deep .el-form-item__label { line-height: 1; } .dialog-footer { display: flex; justify-content: flex-end; } .extra-info { display: flex; margin-bottom: 10px; .delete-icon { margin-left: 10px; } } ::v-deep .el-dialog { height: auto; margin-top: 8vh; .el-dialog__body { height: 60vh; overflow: auto; } } .custom-ruleForm { .el-form-item { width: 30%; .el-select { width: 100%; } } } ::v-deep a.jsoneditor-poweredBy { display: none; } .loading-text { padding: 4px 0; text-align: center; color: #999; font-size: 12px; } </style> 优化代码
最新发布
11-14
this.$refs.formRef.validate(valid => { if (valid) { this.$emit('submit', this.formData); this.dialogVisible = false; } }); }, // 对话框关闭处理 handleDialogClose() { this.$refs.formRef....
<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....
关于elementui this.$refs[“form“].validate校验消失的原因
weixin_48090015的博客
10-24 1912
在表单提交的时候遇到elementui 提交点击确认后却没有显示任何成功或者失败的信息，原因大概率是在表单中rules使用了自定义校验，而elementui中自定义校验一定要有callback()，添加之后得以提交表单。
(vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行
weixin_30642305的博客
03-01 1352
您好，欢迎来到[编程问答]网站首页源码下载电子书籍软件下载专题 首页 IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发...
a-form-model-item设置校验永远慢一步或者无效
weixin_45440916的博客
10-26 2369
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 6264
项目场景： 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 7689
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 3435
this.$refs.ipForm.clearValidate() 清除校验不生效 解决： 方法1： this.$nextTick(() => { this.$refs[ipForm].clearValidate(); }); 方法2： setTimeout(() => {this.$refs.ipForm.clearValidate();}, 30) 这个样子就生效了，这是为什么? ...
element表单校验
qq_43654670的博客
04-08 464
element表单校验 单个字段的校验 this.$refs.ruleForm.validateField('字段名'); 整个表单的校验 this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; }
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值