操作列编辑按钮 与 对勾 显示隐藏,时间戳的转换

发布于:2024-12-07 ⋅ 阅读:(31) ⋅ 点赞:(0)

1.显示隐藏字段edit  是后端返回字段 ,在table表格中的row内

2.$set 更换row中edit 的状态

3.(表格中有input框 编辑内容 , input中的内容会改变最初值,)

     取消按钮   需要 用到初始值的副本

4.用到当前时间 获取当前时间的时间戳 写法  

5.后端返回时间是 字符串 转换成 时间的格式

6.返给后端时间转换成 不带 -  的字符串

7.编辑按钮禁用的条件   时间戳比较大小  条件中用return 终止逻辑

                  <el-table-column
                         :resizable='false'
                        fixed="right"
                        label="操作"
                        align="center"
                        class-name="fix-column-class"
                        v-if="item.columntype == 'button'" 
                        :key="item.key"
                        :width="260"
                        >
                        <template slot-scope="scope">
                            <!-- 编辑按钮 -->
                            <Button type="primary" style="background-color:#4796e6" 
                              icon="ios-create-outline" size="small" 
                              :disabled=isEditFlagFn(scope.row)
                              v-if="!scope.row.edit"
                            @click="editTableRow(scope.row,scope.$index)"></Button>
                            <!-- :loading="saveLoad" -->
                            <!-- 对勾 -->
                            <Button class="successBtn"  icon="md-checkmark"                         type="success" size="small" style="margin-right:2px" 
                            v-if="scope.row.edit"  @click="saveTableRow($event,scope.row,scope.$index)">
                              <span v-show='ffrirt' style="width:0px"></span>
                            </Button>
                              <!-- :loading="saveLoad" -->
                              <!-- 差号 -->
                            <Button class="successBtn"  icon="md-close" type="success" size="small" style="margin-right:2px" 
                            v-if="scope.row.edit" @click="cancelTableRow(scope.row,scope.$index)">
                              <span  style="width:0px"></span>
                            </Button>
                            <!-- 删除 -->
                            <Button style="background-color:#a53e47;color:white;border-top:0px;
                            border-left:0px;border-right:0px;border-bottom:0px solid #a53e47;" icon="ios-trash-outline"
                            v-if="!scope.row.edit"
                            size="small" 
                            @click="deleteTableRow(scope.row,scope.$index)"></Button>
                        </template>
                    </el-table-column>

2条和3条

  // 编辑表格当前行并显示保存对勾
        editTableRow (row, index) {
            console.log('编辑row',row)
          
            this.$set(row, 'edit', true)
           
        },
        //保存列表当前行存单
        saveTableRow(event,row, index){
          // this.saveLoad = true
          console.log('保存行',row);
          let obj={} 
          let fundVoList=[] 
          let tOmsDepositReceipt={}
          fundVoList.push(row)
          tOmsDepositReceipt=Object.assign({},this.seledtedReceipt)
          obj.tOmsDepositReceipt=tOmsDepositReceipt
          obj.fundVoList=fundVoList
          console.log('保存行obj',obj);
          this.$httpPost('/receipt/saveReceiptFund',obj)
            .then((resSave)=>{
              console.log('保存',resSave);
              if(resSave.data.actionResult==1){
                this.$Message.success(resSave.data.data);
                //刷新table
                this.getSelectReceiptFundList()
              }
             
            })
        },
         // 取消编辑当前行
        cancelTableRow (row, index) {
          console.log('取消row',row);
          console.log('this.certificateDepositData',this.certificateDepositData);
          console.log('this.copyData',this.copyData);
          this.copyData.forEach(item=>{
              if(row.vcFundId==item.vcFundId){
                // row.lAmount=item.lAmount
                  this.$set(row, 'lAmount', item.lAmount)
              }
          })
         this.$set(row, 'edit', false)
         console.log('取消row取消',row);
         
        },

第6条时间转换成没有 -  的字符串

    <el-form-item label="申购截止日" prop="purchaseDate" style="color: #fff;">
                         <DatePicker
                         :editable="false" type="date"   
                         @on-change="getStartDate" :value="ruleForm.purchaseDate" 
                          placeholder="申购截止日:" format="yyyy-MM-dd" 
                          style="width: 160px" ></DatePicker>

                    </el-form-item>




//获取时间
        getStartDate (val, date) {
          this.ruleForm.purchaseDate = val.replace('-','').replace('-','');
          console.log('val',this.ruleForm.purchaseDate);
          
        },

第4  5  7  条

 //时间加 - 
        formatDateString(dateStr) {
          // 假设输入的日期字符串是8位数字,且格式为YYYYMMDD
          // || !/^\d+$/.test(dateStr)
          // console.log('dateStr',dateStr);
          
          if (dateStr.length == 8 ) {
             const year = dateStr.substring(0, 4);
             const month = dateStr.substring(4, 6);
             const day = dateStr.substring(6, 8);
            return new Date(`${year}-${month}-${day} 23:59:59`);
          }else{
            console.log('截止时间格式不对或不存在');
            return ''
            // throw new Error('Invalid date string format');
          }
        
         
        },
        //编辑按钮是否禁用
        isEditFlagFn(row){
          //当前时间的时间戳
          let O = new Date()
          let date = O.getTime()
          // console.log('当前时间戳',date);
          //申购截至时间转换成时间 戳
          let datePur=Date.parse(this.formatDateString(this.vcRePurchaseDate))
          // console.log('截止日时间戳',datePur);
          
          if(row.editFlag=='true'){
            //  console.log('row.editFlag',row.editFlag);
            //禁用
            return true
          }else if(date<=datePur){
            //禁用  当前时间大于 申购截止时间 截止时间不存在不会到这里
            //可以编辑  当前时间小于等于 申购截止时间 
            //  console.log('当前时间小于等于 申购截止时间')
             return false
          }else if(row.vcStatus==1||row.vcStatus==2){
            //不可编辑
             return true
          }else{
            //可以编辑
            return false
          }
        },


网站公告

今日签到

点亮在社区的每一天
去签到