crm_front_v3/src/views/dataReport_manage/components/noRenewalReasonDia/addRemark.vue

<script setup>
import { reactive, ref, watch } from "vue"

const emits=defineEmits(['saveRemark'])

const isShow=defineModel('isShow',{type:Boolean,default:false})

const remarkForm = ref({
    text:''
})
const remarkFormRef=ref(null)
watch(
    ()=>isShow.value,
    (n)=>{
        if(n){
            remarkForm.text=''
            remarkFormRef.value&&remarkFormRef.value.clearValidate()
        }
    }
)

function save(){
        remarkFormRef.value&&remarkFormRef.value.validate(valid=>{
          if(valid){
            emits("saveRemark",remarkForm.value.text)
            remarkFormRef.value.resetFields()
          }
        })
      }


</script>

<template>
  <el-dialog
    v-model="isShow"
    @close="isShow=false"
    :modal-append-to-body="false"
    width="652px"
    title="添加备注"
  >
    <div class="dialog-box">
      <el-form :model="remarkForm" ref="remarkFormRef">
        <el-form-item
          prop="text"
          :rules="{ required: true, message: '备注不能为空', trigger: 'blur' }"
        >
          <el-input
            v-model.trim="remarkForm.text"
            placeholder="请输入备注信息"
            type="textarea"
            style="width: 505px"
            :rows="9"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button
          @click="isShow=false"
          class="dialog-footer-button"
          >取消</el-button
        >
        <el-button
          @click="save"
          type="primary"
          class="dialog-footer-button"
          style="margin-left: 30px"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>


<style lang="scss" scoped>
  .dialog-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .dialog-footer{
      margin: 30px 0;
      .dialog-footer-button{
        height: 40px;
        width: 120px;
      }
    }
  }
</style>