element 动态添加 表单选项

 <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:{
          width:'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: '',
        width: '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;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7004c;
    vertical-align: text-top;
    margin: 2px 2px 0 0;
  }
  .img-add {
    width: 18px;
    height: 18px;
    margin-top: 9px;
  }
  .people_add {
    display: inline-block;
    vertical-align: middle;
    width: 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 {
      width: 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;
    width: 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 {
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    position: relative;
  }
  /*.basic {*/
  /*  /deep/ .el-input {*/
  /*    width: 315px;*/
  /*  }*/
  /*}*/
  .fileUpload {
    border: 1px solid #DCDFE6;
    width: 315px;
    height: 36px;
  }
  .avatarUploadWrap {
    width: 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 {
      width: 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 {
      width: 450px;
    }
  }
  .btns{
    display: inline-block;
    width: 98px;
    height: 36px;
    border-radius: 5px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #f57b23;
  }
  .filelist {
    display: flex;
    align-items: center;
    width: 317px;
    text-decoration: underline;
    color:rgb(0, 0, 238);
    .fileList_name {
      display: inline-block;
      width: 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;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    background: rgb(199, 0, 76);
    border-radius: 50%;
  }
  .domain /deep/ .el-input {
    width: 250px;
  }
  .selsect1  {
    width: 250px;
    margin-left: -10px;
  }
</style>