若依框架vue3代码段

一、不同意的时候必须添加备注

复制代码

<el-form> 
<el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

<template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSave (true)">同意</el-button>
          <el-button @click="submitSave (false)">不同意</el-button>
        </div>
 </template>



const rules = ref({
  remark: [{required: false, trigger: "blur", message: "请输入备注"}],
})

const submitSave = (bool) => {
  rules .value.remark = [{required: !bool, trigger: "blur", message: "请输入备注"}];
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
        update({            
            id: form.value.id,
            remark: form.value.remark            
          }).then(response => {            
            form.value = false;
            getList();
            proxy.$modal.msgSuccess("操作成功");
          });
    
      }
  });

二、tab切换

复制代码

 <el-button icon="add" link @click="view(scope.row,false)">新增</el-button>
 <el-button link icon="View" type="primary" @click="view(scope.row,true)">查看</el-button> 

<el-form ref="formRef" :model="form" :rules="rules" v-loading="loading"
               label-suffix=":" :disabled="isShow">
        <el-tabs
            v-model="tabActive"
            type="card"
            class="demo-tabs"
        >
          <el-tab-pane data-val="1" label="基本信息1" name="1">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"
                        placeholder="请输入名称"/>
            </el-form-item>           
          </el-tab-pane>
          <el-tab-pane data-val="2" label="基本信息2" name="2">
            <el-form-item label="名称" prop="ssName">
              <el-input v-model="form.ssName" placeholder="请输入名称"/>
            </el-form-item>           
          </el-tab-pane>
          <el-tab-pane data-val="3" label="基本信息3" name="3">            
            <el-form-item label="地址" prop="addreass">
              <el-input v-model="form.addreass" type="textarea" placeholder="请输入通讯地址"/>
            </el-form-item>            
          </el-tab-pane>
        </el-tabs>
      </el-form>


查看默认第一个：
const tabActive = ref('1')
const view = (row, isShow) => {
  tabActive.value = '1';
}

保存的时候默认切换下一个tab:
const submit = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      const baseInfo1 = {
        name: form.value?.name       
      }
      const baseInfo2 = {
        ssName: form.value?.ssName
      }
      const baseInfo3 = {
        addreass: form.value?.addreass
      }
      loading.value = true;
      
      saveMethod({
            id: form.value.id,
            baseInfo1 : JSON.stringify(baseInfo1 ),
            baseInfo2 : JSON.stringify(baseInfo2 ),
            baseInfo3 : JSON.stringify(baseInfo3 ),           
            createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),           
            updateTime: new Date()
          }).then(response => {
            loading.value = false;
            isOpen.value = false;
            getList();
            proxy.$modal.msgSuccess("成功");
          });

    } else {
      const fields = proxy.$refs["formRef"].fields
      for (let i = 0; i < fields.length; i++) {
        if (fields[i].validateState === 'error') {
          tabActive.value = fields[i].$el.parentElement.getAttribute('data-val')
          break;
        }
      }
    }
  });
}

三、竖向时间轴

复制代码

<el-timeline>
            <el-timeline-item color="#0bbd87"
                              v-for="(record, index) in list"
                              :key="index" :timestamp="moment(record.createTime).format('YYYY-MM-DD HH:mm:ss')">
              <div style="font-weight: bolder;">姓名:&nbsp;{{ record.name}}</div>
              <div style="margin-top: 8px;">备注:&nbsp;{{ record.remark}}</div>
            </el-timeline-item>
          </el-timeline>