基于SqlSugar的开发框架循序渐进介绍（12）-- 拆分页面模块内容为组件，实现分而治之的处理

 <  template  > 
   <  el-dialog  title  ="查看信息"  v-model  ="isVisible"  v-if  ="isVisible"  append-to-body @close  ="closeDialog(viewRef)"  > 
     <  el-form  ref  ="viewRef"  :model  ="viewForm"  label-width  ="80px"  > 
       <  el-tabs  type  ="border-card"  > 
         <  el-tab-pane  label  ="基本信息"  > 
           <  el-row  > 
             <  el-col  :span  ="12"  > 
               <  el-form-item  label  ="姓名"  > 
                 <  el-input  v-model  ="viewForm.name"  disabled  /> 
               </  el-form-item  > 
             </  el-col  > 
             <  el-col  :span  ="12"  > 
               <  el-form-item  label  ="性别"  > 
                 <  el-input  v-model  ="viewForm.sex"  disabled  /> 
               </  el-form-item  > 
             </  el-col  >  .................//省略代码  </  el-tab-pane  > 
       </  el-tabs  > 
     </  el-form  > 
     <  template  #footer  > 
       <  span  class  ="dialog-footer"  > 
         <  el-button  @click  ="closeDialog(viewRef)"  > 关闭 </  el-button  > 
       </  span  > 
     </  template  > 
   </  el-dialog  > 
 </  template  > 

 <  script  setup lang  ="ts"  > 
 //  逻辑代码 
 </  script  > 

 <  script  setup lang  ="ts"  > 
 //  组件的接口类型 
   export interfac  e ExposeViewType {

  show(id  ?  : string  |  number): Function;

}



............  //  显示窗口 
 const show  =  (id: string  |  number)  =>  {  //  处理代码 
 };  //  暴露组件属性和方法 
   defineExpose  ({

  show

});  </  script  > 

 //父页面index.vue  <!--  查看详细组件界面  --> 
     <  view-data  ref  ="viewRef"   /> 
     <!--  新增、编辑组件界面  --> 
     <  edit-data  ref  ="editRef"  @submit  ="saveEdit"   /> 
     <!--  模板导入信息  --> 
     <  import-data  ref  ="importRef"  @finish  ="finishImport"   /> 
   </  div  > 
 </  template  > 

 <  script  setup lang  ="ts"  >  ........



import ViewData, { ExposeViewType } from  "  ./view.vue  "  ;

import EditData from  "  ./edit.vue  "  ;

import ImportData from  "  ./import.vue  "  ;



......  //  显示查看对话框处理 
 const viewRef  =  ref  <  ExposeViewType  |   null  >  ();  //  查看表单引用  //  const viewRef = ref<InstanceType<typeof ViewData>>(); 
 function  showView(id) {  if  (isEmpty(id)) {

    warnMessage(  "  请选择编辑的记录!  "  );  return  ;

  }

  viewRef.value.show(id);

} 

  viewRef.value.show(id);  

 <  script  setup lang  ="ts"  > 
 //  组件的接口类型 
 export interface ExposeViewType {

  show(id  ?  : string  |  number): Function;

}



import { reactive, ref, onMounted, watch, computed, nextTick } from  "  vue  "  ;

import { FormInstance} from  "  element-plus  "  ;



  defineOptions  ({ name:  "  ViewData  "  });  //  定义组件名称 

 //  声明Props的接口类型 
 interface Props {

  visible  ?  :  boolean  ;  //  是否显示 
 id  ?  : string  |  number;  //  接受外部v-model传入的id值 
 }  //  使用默认值定义Props 
 const props  =    withDefaults(defineProps  <  Props  >    (), {

  visible:  false  ,

  value:  null  });  //  声明组件事件 
   interface Emits  {

  (e:  "  update:id  "  , id: string  |  number):  void  ;

  (e:  "  update:visible  "  , visible:  boolean  ):  void  ;

  (e:  "  close  "  ):  void  ;  //  (e: "submit"): void; 
 }  //  定义组件事件 
 const emit  =    defineEmits  <  Emits  >    (); 

 //  定义触发事件 
const emit =   defineEmits  (["error", "success", "remove", "change"]);

 //  显示窗口 
const show = (id: string | number) => {  if  (! isNullOrUnDef(id)) {

    testuser.Get(id).then(data => {  //  console.log(data); 
   Object.assign(viewForm, data)  ;



      isVisible.value =  true ;  //  显示对话框 
 });

  }

}; 

let isVisible = ref( false );  //  是否显示查看对话框 
 function  closeDialog(formEl: FormInstance | undefined) {  //  关闭常规 添加、编辑、查看、导入等窗口处理 
  isVisible.value =  false  ;  if  (! formEl) {

    formEl.resetFields();

  }

  emit( "close");  //  关闭 
}

 //  监控某些值的变化，进行处理 
 watch(

  () => props.visible,

  newValue => {

    isVisible.value = newValue;

    emit( "update:visible" , newValue);

  }

);

watch(

  () => isVisible,

  newValue => {  //  console.log(newValue); 
    emit("update:visible" , newValue.value);

  }

); 

const viewRef =   ref<FormInstance>  ();  //  表单引用  //  表单属性定义 
let  viewForm  =   reactive  ({

  id: "" ,

  name: "" ,

  sex: "" ,

  birthDate: "" ,

  nationality: "" ,

  education: "" ,

  marriage: "" ,

  star: "" ,

  height: "" ,

  weight: "" ,



.................



  createTime: "" ,

  extensionData: ""  //  扩展数据 
});

     <!--  查看详细组件界面  --> 
     <  view-data  ref  ="viewRef"   /> 
     <!--  新增、编辑组件界面  --> 
     <  edit-data  ref  ="editRef"  @submit  ="saveEdit"   /> 
     <!--  模板导入信息  --> 
     <  import-data  ref  ="importRef"  @finish  ="finishImport"   /> 

 //  新增、编辑表单引用 
const editRef = ref<ExposeViewType |  null > ();  //  显示新增对话框 
 function    showAdd  () {

  editRef.value.show();

}  //  显示编辑对话框 
 function    showEdit  (id) {  if  (isEmpty(id)) {

    warnMessage( "请选择编辑的记录!" );  return  ;

  }

  editRef.value.show(id);

}  //  新增/更新后刷新 
 function    saveEdit  () {

  getlist();

} 

 //  保存数据处理 
async  function  submitData() {  var  formEl = editRef.value;  if  (!formEl)  return  ;  //  console.log(editForm); 
    await formEl.validate(async valid   => {  if  (valid) {  //  验证成功，执行下面方法 
       var  result =  false  ;  if  (isAdd.value) {

        result =   await testuser.Create  (editForm);  //  新增保存 
      }  else  {

        result =   await testuser.Update  (editForm);  //  编辑保存 
 }  if  (result) {

        successMessage( "操作成功!");  //  提示信息 
        emit("submit");  //  提示刷新数据 
        closeDialog(formEl);  //  重置窗口状态 
      }  else  {

        errorMessage( "操作失败" );

      }

    }

  })