标签：entryHistory 控件 collapse index changeEntranceAtState historyEntranceAtTime contr

 

历史详情里面还有要修改的表单

 

 

 后台返回的数据结构是

data:{
    entry:{},
    entryHistory:[{}]
}

<div v-for="(item, index) in contractForm.entryHistory" :key="index">
            <el-collapse-item
              :title="'历史入场详情信息 (' + item.entranceAt + ')'"
              class="process-collapse"
              :name="item.id + index"
              v-if="contractForm.entryHistory != null"
            >
              <el-row class="entryCont">
 <el-col :span="10" :offset="1">
                  <el-form-item label="入场时间:">
                    <div class="addressCont">
                      <div
                        class="addressContF"
                        v-if="!item.changeEntranceAtState"
                      >
                        {{ item.entranceAt }}
                      </div>
                      <div class="addressContF" v-else>
                        <el-date-picker
                          v-model="historyEntranceAtTime[index]"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                          :editable="false"
                          :picker-options="item.startHitstoryoptions"
                        >
                        </el-date-picker>
                      </div>
                      <el-button
                        size="medium"
                        type="primary"
                        @click="changeHistoryEntranceAt(index)"
                        v-dbQkClick
                        v-if="
                          item.isTimeChangeState &&
                          (contractForm.talentInfo.status == 14 ||
                            contractForm.talentInfo.status == 7)
                        "
                      >
                        {{ !item.changeEntranceAtState ? '修改' : '提交' }}
                      </el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

先给entryHistory里面每个对象加这两个状态控制显示隐藏

 this.contractForm.entryHistory = data.entryHistory

        if (this.contractForm.entryHistory?.length > 0) {
          this.contractForm.entryHistory.forEach((res) => {
            res.isTimeChangeState = this.isHistoryTimeChangeShow()
            res.changeEntranceAtState = false
          })
        }

点击切换按钮之后时间回显,核心点在于 v-model="historyEntranceAtTime[index]"   放到数组里面

 changeHistoryEntranceAt(index) {

this.contractForm.entryHistory[index].changeEntranceAtState =
        !this.contractForm.entryHistory[index].changeEntranceAtState

      this.$forceUpdate()
      if (this.contractForm.entryHistory[index].changeEntranceAtState) {
        this.historyEntranceAtTime[index] =
          this.contractForm.entryHistory[index].entranceAt
      }
      if (!this.contractForm.entryHistory[index].changeEntranceAtState) {
        if (
          this.contractForm.entryHistory[index].entranceAt ===
          this.historyEntranceAtTime[index]
        ) {
          this.$message({
            message: '入场时间切换前后不允许一致',
            type: 'error'
          })
          return false
        }
        if (!this.historyEntranceAtTime[index]) {
          this.$message({
            message: '入场时间切换不能为空!',
            type: 'error'
          })
          return false
        }
        this.contractForm.entryHistory[index].entranceAt =
          this.historyEntranceAtTime[index]
        let params = {
          ...this.contractForm.entryHistory[index]
        }

循环时间控件的限制:picker-options="item.startHitstoryoptions"

 watch: {
    'contractForm.entryHistory': {
      handler(list) {
        list.forEach((item) => {
          item.startHitstoryoptions = {
            disabledDate(time) {
              if (item.contractStartTime) {
                return (
                  time.getTime() <
                    new Date(item.lastEntranceAt).getTime() + 86400000 ||
                  time.getTime() < new Date(item.contractStartTime).getTime() ||
                  time.getTime() > new Date(item.contractEndTime).getTime() ||
                  time.getTime() >
                    new Date(item.nextEntranceAt).getTime() - 86400000  //- 86400000 相当于一天

 ) } } } }) }, deep: true } },

 

标签：entryHistory,控件,collapse,index,changeEntranceAtState,historyEntranceAtTime,contr
来源： https://www.cnblogs.com/lsc-boke/p/16642253.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。