html :
<div class="infoWrap authorNoPd bg-ff" v-if="timeShow"> <div class="innerWrap pl50 pb20"> <div class="people_add" @click="showWindow"> <img :src="require('@/assets/images/common/email_add.png')" /> <span>请选择审稿人</span> </div> </div> <div v-for="(aItem, aIndex) in form.receiver" :key="aIndex" class="innerWrap authInfoWrap" > <!--删除按钮--> <span class="el-icon-remove-outline delete" @click="removeAuthor(aIndex)" ></span> <el-row type="flex" v-for="(item, index) in authorList" :key="index"> <el-col :span="9" v-for="(inItem, inIndex) in item" :key="`i${inIndex}`" > <div v-if="inItem.label === '审稿人' " class="pl70 pt10"> <span data-v-0fd7df0c="" class="fs14 leftName">审稿人: </span><span class="ml10">{{aItem[inItem.prop]}}</span> </div> <div v-else> <el-form-item :prop="`receiver[${aIndex}][${inItem.prop}]`" :rules="[ { required: true, message: `请选择${inItem.label}` }, { validator: vaildNumber } ]" class="authError" > <el-row type="flex" align="middle" > <el-col :span="4" > <div class=""> <span class="mand"></span> <span class="fs14 leftName">{{inItem.label}}</span> </div> </el-col> <el-col :span="18"> <el-input class="ml-10" v-model="aItem[inItem.prop]" placeholder="" /> </el-col> </el-row> </el-form-item> </div> </el-col> </el-row> </div> </div>
数据 :
authorList: [ [ {prop: 'nickname', label: '审稿人'},{prop: 'priced', label: '标价'}], ],
赋值操作:
confirmDataHand (data) { this.closeSelect() this.form.receiver = data console.log(data) },
完整:
<!-- * @Author: zxw * @Descripttion: 延时页面 重新指派页面 * @path: --> <template> <div> <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="closeWindow" :width="width"> <el-form :model="form" ref="form" label-width="90px" :rules="rules" class="HandleExpert"> <div class="bg-ff"> <el-row class="pt20 pl40 pr30 basic" v-if="show" :gutter="50"> <el-col :span="10"> <el-form-item label="任务名称" prop="name"> <el-input v-model="form.name" placeholder="请输入任务名称" /> </el-form-item> <el-form-item label="语言:" prop="language"> <el-select v-model="form.language" placeholder="请选择"> <el-option v-for="(item, index) in scrPaperServiceType" :label="scrPaperServiceType[index]" :key="index" :value="index" /> </el-select> </el-form-item> <el-form-item label="任务内容" prop="content"> <el-input v-model="form.content" placeholder="请输入任务内容" show-word-limit maxlength="100" type="textarea" :rows="5"/> </el-form-item> </el-col> <el-col :span="10"> <el-row type="flex" align="middle" > <el-col :span="13" class="domain"> <el-form-item prop="subject1" label="学科领域"> <el-select :value="form.subject1" clearable placeholder="请选择学科领域" class="selsect" @input="changeSubject"> <el-option v-for="(item, index) in subjectList" :key="index" :label="item.name" :value="item.value"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="13" class="subject1"> <el-form-item prop="subject2"> <el-select v-model="form.subject2" clearable placeholder="请选择学科领域" class="selsect1"> <el-option v-for="(item, index) in subjectChildList" :key="index" :label="item.name" :value="item.value"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-form-item label="文件上传" id="wenjian" prop="document"> <el-upload multiple accept=".rar,.zip,.doc,.pdf,.docx" class="upload-demo" thumbnail-mode :file-list="fileList" show-file-list action :http-request="uploadfile" v-model="form.document"> <el-button size="small" type="primary">上传附件</el-button> <div slot="tip" class="el-upload__tip">支持格式:.rar .zip .doc .docx .pdf,单个文件不能超过20MB。</div> </el-upload> </el-form-item> </el-col> </el-row> <div class="infoWrap authorNoPd bg-ff" v-if="timeShow"> <div class="innerWrap pl50 pb20"> <div class="people_add" @click="showWindow"> <img :src="require('@/assets/images/common/email_add.png')" /> <span>请选择审稿人</span> </div> </div> <div v-for="(aItem, aIndex) in form.receiver" :key="aIndex" class="innerWrap authInfoWrap" > <!--删除按钮--> <span class="el-icon-remove-outline delete" @click="removeAuthor(aIndex)" ></span> <el-row type="flex" v-for="(item, index) in authorList" :key="index"> <el-col :span="9" v-for="(inItem, inIndex) in item" :key="`i${inIndex}`" > <div v-if="inItem.label === '审稿人' " class="pl70 pt10"> <span data-v-0fd7df0c="" class="fs14 leftName">审稿人: </span><span class="ml10">{{aItem[inItem.prop]}}</span> </div> <div v-else> <el-form-item :prop="`receiver[${aIndex}][${inItem.prop}]`" :rules="[ { required: true, message: `请选择${inItem.label}` }, { validator: vaildNumber } ]" class="authError" > <el-row type="flex" align="middle" > <el-col :span="4" > <div class=""> <span class="mand"></span> <span class="fs14 leftName">{{inItem.label}}</span> </div> </el-col> <el-col :span="18"> <el-input class="ml-10" v-model="aItem[inItem.prop]" placeholder="" /> </el-col> </el-row> </el-form-item> </div> </el-col> </el-row> </div> </div> <el-row class=" pl40 pr30 pb40 basic" > <el-col :span="24"> <el-form-item label="完成时间" prop="expectTime"> <el-date-picker v-model="form.expectTime" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择年月"></el-date-picker> </el-form-item> </el-col> <el-col :span="24" v-if="show"> <el-form-item label="任务备注"> <el-input v-model="form.remark" placeholder="请输入任务备注" maxlength="100" show-word-limit type="textarea" :rows="5"/> </el-form-item> </el-col> </el-row> </div> </el-form> <div class="pt20 pb30 bg-ff mt5 textCenter"> <el-button type="primary" @click="submit('form')">保存</el-button> </div> </el-dialog> <!-- 选择专家 --> <selectReader ref="selectReader" @confirmDataHand="confirmDataHand" @closeSelect="closeSelect"/> </div> </template> <script> import { scrPaperServiceType } from "@/moock/commonData"; import config from '@/common/config' import { countryData, toTree, } from "ais-common-utils" import { createReader } from "@/api/reader" import { uploadReader, TaskDetail, delayedTask, reloadReader } from "@/api/reader" import { getSubjectList } from "@/api/common" import selectReader from "./selectReader" export default { components: { selectReader }, data () { return { dialogVisible:false, scrPaperServiceType, // 语言 fileList:[], // 附件 disabled: true, form:{ receiver: [] }, countryData, detail: false, proData:[], optionsPhoto:{ '200', height:'320', fixedBox:true, fixed:false, full:false, centerBox:true }, imgUrl: config.IMG_URL.default, rules: { name:{ required: true, message: '名称不能为空', trigger: "blur"}, language:{ required: true, message: '语言不能为空', trigger:'change'}, content:{ required: true, message: '内容不能为空', trigger: "blur"}, domain:{ required: true, message: '领域不能为空', trigger:'change'}, expectTime:{ required: true, message: '完成时间不能为空', trigger: "blur"}, price:{ required: true, message: '标价不能为空', trigger: "blur"}, subject1: [{required: true, message: '请选择学科领域'}] }, formConfig:[ ], title: '', authorList: [ [ {prop: 'nickname', label: '审稿人'},{prop: 'priced', label: '标价'}], ], show: true, timeShow: true, id: '', '70%', subjectChildList: [], // 子集 subjectList: [], // 父集 index: '' } }, computed: { domainData() { return this.$store.state.sci.domainAndRetrieval.domains } }, watch:{ }, created () { if (!this.$store.state.sci.domainAndRetrieval.retrieval) { this.$store.dispatch("sci/getDomain") } this.getSubjectList() }, methods: { vaildNumber (rule, value, callback) { console.log(value, 'test') if (value <= 0) callback(new Error('请输入大于0 的数')) callback() }, // 添加作者 // addAuthor () { // this.form.receiver.push({}) // console.log(this.form.receiver) // }, // 删除作者 removeAuthor (index) { this.form.receiver.splice(index, 1) }, // 获取学科领域列表 async getSubjectList () { const { data } = await getSubjectList() if (data.code === 0) { this.allSubjectList = data.data.subjects const datas = data.data.subjects this.subjectList = toTree(datas, "value", "parentId", "children") } }, // 修改父级subject changeSubject (event) { if (this.form.subject2 !== event) { this.form.subject1 = event this.$set(this.form, 'subject2', null) const findItem = this.subjectList.find(item => item.value === this.form.subject1) if (findItem && findItem.children && findItem.children.length) { this.subjectChildList = findItem.children } else { this.subjectChildList = [] } } }, // 打开审稿人页面 showWindow (index) { this.dialogVisible = false this.index = index console.log(this.title) this.$refs.selectReader.handleClose(this.title) }, // 重置数据 closeWindow () { this.dialogVisible = !this.dialogVisible this.timeShow = true this.show = true this.id = '' this.title = '' this.$emit('update') }, // 关闭审稿人页面 closeSelect () { this.dialogVisible = true }, confirmDataHand (data) { this.closeSelect() this.form.receiver = data console.log(data) }, // 弹窗的关闭打开 handleClose(item, detail){ if (typeof(item)=='string') { this.title = item if (detail) this.id = detail.id if (item === '延时') { this.width = '30%' this.timeShow = false } this.show = true } if (this.id) { this.getDetail(this.id) this.show = false } this.dialogVisible = !this.dialogVisible }, async getDetail(id){ const {data} = await TaskDetail(id) if (data.code === 0) { this.form = {...data.data.task,language: data.data.task.language + '', domain: data.data.task.domain + ''} } }, // 上传附件 uploadfile(file){ let formData = new FormData() formData.append("file", file.file) uploadReader(formData).then( res => { if(res.data.code == 0){ this.form.document = res.data.data } }) }, submit (formName) { if (this.id&&this.title === '延时') { this.submitTime(formName) } else if (this.id&&this.title === '重新指派') { console.log(111111) this.reloadSubmit(formName) } else { this.submitForm(formName) } // this.show = false }, reloadSubmit (formName) { this.$refs[formName].validate(async (valid) => { if(valid) { console.log(this.form.receiver) if (!this.form.receiver) { return this.$message.error('请选择审稿人') } if (this.form.expectTime) { this.form.expectTime = parseInt(this.form.expectTime/1000) } console.log(this.form) if (this.form.receiver) { this.form.price = parseInt(this.form.receiver[0].priced) this.form.userId = parseInt(this.form.receiver[0].userId) } let params = { expectTime: this.form.expectTime, price : parseInt(this.form.price), userId: this.form.userId } const { data } = await reloadReader(this.id, params) if(data.code === 0){ this.$message.success("保存成功") this.$refs.form.clearValidate() this.form = {} this.dialogVisible = false this.$emit('update') } else { this.form.expectTime = parseInt(this.form.expectTime *1000) } } }) }, submitTime (formName) { this.$refs[formName].validate(async (valid) => { if(valid) { if (this.form.expectTime) { this.form.expectTime = parseInt(this.form.expectTime/1000) } console.log(this.id) this.form.id = this.id let params = { ...this.form } const { data } = await delayedTask(params) if(data.code === 0){ this.$message.success("保存成功") this.dialogVisible = false this.$emit('update') } else { this.form.expectTime = parseInt(this.form.expectTime *1000) } } }) }, //表单提交 submitForm(formName) { this.$refs[formName].validate(async (valid) => { if(valid) { if (!this.form.document) { return this.$message.error('文件不能为空') } if (this.form.receiver.length === 0 ) { return this.$message.error('请选择审稿人') } if (this.form.expectTime) { this.form.expectTime = parseInt(this.form.expectTime/1000) } if (this.form.domain) { this.form.domain = parseInt(this.form.domain) } if (this.form.language) { this.form.language = parseInt(this.form.language) } this.form.receiver.map(item=>{ item.price =item.priced }) const { data } = await createReader(this.form) if(data.code === 0){ this.$message.success("保存成功") this.$refs.form.clearValidate() this.form = {} this.form.receiver = [] this.dialogVisible = false this.$emit('update') } else { this.form.expectTime = parseInt(this.form.expectTime *1000) } } }) } } } </script> <style lang="scss" scoped> @mixin incon { display: inline-block; content: "" !important; 6px; height: 6px; border-radius: 50%; background: #c7004c; vertical-align: text-top; margin: 2px 2px 0 0; } .img-add { 18px; height: 18px; margin-top: 9px; } .people_add { display: inline-block; vertical-align: middle; 140px; height: 36px; background: rgba(74, 144, 226, 0.1); border-radius: 2px; border: 1px solid rgba(18, 18, 18, 0.1); text-align: center; line-height: 36px; cursor: pointer; img { 18px; height: 18px; margin-top: 9px; } span { font-size: 14px; font-family: PingFangSC-Regular; font-weight: 400; color: #666666; margin-left: 5px; } } .HandleExpert { margin: 0 auto; /deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before { @include incon } } .c-f57 { color: #F57B23; } .c-399 { color:#399EB8; } .c-505 { color:#505B65; } .w60 { display: inline-block; 60px; } .bg-f57 { background: #F57B23; } .imgBox { img, span { display:inline-block; vertical-align: middle; } .required { position: relative; top:3px; color:#F5303A; } } .borderNone { border:none !important; } .formRequired{ /deep/ .el-form-item__label::before{ @include incon } } .header { 100%; border-bottom: 1px solid #e9e9e9; position: relative; } /*.basic {*/ /* /deep/ .el-input {*/ /* 315px;*/ /* }*/ /*}*/ .fileUpload { border: 1px solid #DCDFE6; 315px; height: 36px; } .avatarUploadWrap { 100px; position: relative; } .avatarUploadTips { position: absolute; top:95px; left: 0px; right: 0px; height: 36px; line-height: 36px; background: url("~@/assets/images/thinkTank/iconBg.png") no-repeat; background-size: 100% 100%; } .linkCountryCode { .linklabel { line-height: 45px; &::before{ @include incon } } /deep/ .el-input { 150px; } /deep/ .el-form-item__content { margin-left: 10px!important; } } .addBtn { position: absolute; top:50%; transform: translateY(-50%); right: 40px; color:#2373F5; } .workWrap { padding: 15px 113px 20px 54px; border:1px solid #F57B23; /deep/ .el-input { 450px; } } .btns{ display: inline-block; 98px; height: 36px; border-radius: 5px; line-height: 36px; text-align: center; cursor: pointer; border: 1px solid #f57b23; } .filelist { display: flex; align-items: center; 317px; text-decoration: underline; color:rgb(0, 0, 238); .fileList_name { display: inline-block; 280px; } .el-icon-close { display: none; } // &:hover{ // background-color: #f5f7fa; // .el-icon-close { // display: inline-block; // } // } } .valueWrap { border:1px solid #fff; padding: 15px 0px 20px 54px; position: relative; word-break: break-all; &:hover { border-color:#F57B23; .handle { display: block; } } .handle { display: none; position: absolute; top: 20px; right: 50px; } } /deep/ .el-picker-panel{ padding-bottom: 8px; } </style> <style lang="scss"> .thinkTannkPicker { /deep/ .el-picker-panel__body { margin-left: 0px; padding-bottom: 10px; } /deep/ .el-picker-panel__sidebar { top:310px; right: 0px; z-index: 2008; } /deep/ .el-picker-panel__shortcut { text-align: right; padding-right: 23px; line-height: 20px; } } .delete { cursor: pointer; color: #f5415e; font-size: 16px; position: absolute; top: 10px; /* left: 100px; */ z-index: 6; right: 320px; } .innerWrap { position: relative; } .mand { display: inline-block; vertical-align: 8px; 6px; height: 6px; margin-right: 5px; background: rgb(199, 0, 76); border-radius: 50%; } .domain /deep/ .el-input { 250px; } .selsect1 { 250px; margin-left: -10px; } </style>