基於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 interface 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("操作失敗");
      }
    }
  })