client-base-v5/src/window1/CurdWindowModal.vue

<template>
  <TabFormEditModal
    v-model:open="openTabEditModal" :is-restore-data="tabEditViewIsRestoreData"
    :window-no="mCurdWindowNo" :tab-index="mTabIndex" :type="tabEditViewType" :model-data-id="tabEditViewRecordId"
    width="100%" :current-page="tabEditViewCurrentPage" :current-index="tabEditViewCurrentIndex"
    :total-records="tabEditViewTotalRecords" :task-info-id="tabEditViewTaskInfoId"
    :workflow-type="tabEditViewWorkflowType" :mask-closable="false" @open-tab-form-view="openTabFormView"
  />
  <TabFormViewModal
    v-model:open="openTabViewModal" :window-no="mCurdWindowNo" :tab-index="mTabIndex"
    :type="tabFormViewType" :model-data-id="tabFormViewRecordId" width="100%" :current-page="tabFormViewCurrentPage"
    :current-index="tabFormViewCurrentIndex" :total-records="tabFormViewTotalRecords"
    :task-info-id="tabFormViewTaskInfoId" :workflow-type="tabFormViewWorkflowType" :mask-closable="false"
    @open-tab-edit-view="openTabEditView"
  />
</template>

<script setup>
import { ref, onMounted, defineEmits, watch, defineProps } from 'vue';

import TabFormEditModal from './tabFormEdit/TabFormEditModal.vue';
import TabFormViewModal from './tabFormView/TabFormViewModal.vue';


const props = defineProps({
  // 是否打开
  open: {
    type: Boolean,
    default: false,
  },
  // 窗口类型
  // Edit:编辑界面,可选项如下(create:创建数据,edit:编辑数据,editRestore:恢复数据)
  // View:表单界面,可选项如下(view:视图数据,viewRestore:恢复数据)
  viewType: {
    type: String,
    default: '',
  },
  // CURD窗口编号
  curdWindowNo: {
    type: String,
    default: '',
  },
  // 页签编号
  tabIndex: {
    type: Number,
    default: 0,
  },
  // 数据记录Id
  modelDataId: {
    type: Number,
    default: null,
  },
  // 当前记录所在的页码
  currentPage: {
    type: Number,
    default: 0,
  },
  // 当前记录的排序
  currentIndex: {
    type: Number,
    default: 0,
  },
  // 记录的总数量
  totalRecords: {
    type: Number,
    default: 0,
  },
  // 窗口唯一Id(必须是唯一的)
  uuid: {
    type: String,
    default: '',
  },
  // 是否恢复草稿数据(false:不恢复，true:恢复)
  isRestoreData: {
    type: Boolean,
    default: false,
  },
  // 工作流任务Id(taskId)
  taskInfoId: {
    type: String,
    default: null,
  },
  // 工作流任务类型(approve:审批任务,copyTask:抄送任务)
  workflowType: {
    type: String,
    default: null,
  },
});


const mCurdWindowNo = ref('20240910_193059');
const mTabIndex = ref(0);

const openTabEditModal = ref(true);
const tabEditViewType = ref('create');
const tabEditViewRecordId = ref(null);
const tabEditViewCurrentPage = ref(null);
const tabEditViewCurrentIndex = ref(null);
const tabEditViewTotalRecords = ref(null);
const tabEditViewIsRestoreData = ref(false);
const tabEditViewTaskInfoId = ref(null);
const tabEditViewWorkflowType = ref(null);

const openTabViewModal = ref(false);
const tabFormViewType = ref('view');
const tabFormViewRecordId = ref(null);
const tabFormViewCurrentPage = ref(null);
const tabFormViewCurrentIndex = ref(null);
const tabFormViewTotalRecords = ref(null);
const tabFormViewTaskInfoId = ref(null);
const tabFormViewWorkflowType = ref(null);

const emits = defineEmits(['update:open']);


watch([openTabEditModal, openTabViewModal], (newValues, oldValues) => {
  console.log('First name or last name changed.');
  console.log('New values:', newValues);
  console.log('Old values:', oldValues);
  if(newValues[0] == false && newValues[1] == false){
    emits('update:open', false);
  }
});


onMounted(() => { 
  if(props.open == false){
    openTabEditModal.value = false;
    openTabViewModal.value = false;
    return;
  }
  // 窗口类型
  // Edit:编辑界面,可选项如下(create:创建数据,edit:编辑数据,editRestore:恢复数据)
  // View:表单界面,可选项如下(view:视图数据,viewRestore:恢复数据)
  if(props.viewType == 'create' || props.viewType == 'edit' || props.viewType == 'editRestore'){
    openTabEditView({
      type: props.viewType,
      windowNo: props.curdWindowNo,
      tabIndex: props.tabIndex,
      modelDataId: props.modelDataId,
      currentPage: props.currentPage,
      currentIndex: props.currentIndex,
      totalRecords: props.totalRecords,
      uuid: props.uuid,
      isRestoreData: props.isRestoreData,
      taskInfoId: props.taskInfoId,
      workflowType: props.workflowType,
    });
  }else if(props.viewType == 'view' || props.viewType == 'viewRestore'){
    openTabFormView({
      type: props.viewType,
      windowNo: props.curdWindowNo,
      tabIndex: props.tabIndex,
      modelDataId: props.modelDataId,
      currentPage: props.currentPage,
      currentIndex: props.currentIndex,
      totalRecords: props.totalRecords,
      uuid: props.uuid,
      isRestoreData: props.isRestoreData,
      taskInfoId: props.taskInfoId,
      workflowType: props.workflowType,
    });
  }
});

/**
 * 打开页签视图模式
 * @param param 信息
 *          属性1: type: 类型,
 *          属性1: windowNo: CURD窗口编号,
 *          属性2: tabIndex: CURD页签编号,
 *          属性3: modelDataId: 数据记录id,
 *          属性4: currentPage: 当前记录所在的页码,
 *          属性5: currentIndex: 当前记录的排序,
 *          属性6: totalRecords: 记录的总数量,
 *          属性7: uuid: 窗口唯一Id,
 */
const openTabFormView = function (param) {

  console.log('openTabFormView', param);

  tabFormViewType.value = param.type;
  mCurdWindowNo.value = param.windowNo;
  mTabIndex.value = param.tabIndex;
  tabFormViewRecordId.value = param.modelDataId;
  tabFormViewCurrentPage.value = param.currentPage;
  tabFormViewCurrentIndex.value = param.currentIndex;
  tabFormViewTotalRecords.value = param.totalRecords;

  openTabEditModal.value = false;
  openTabViewModal.value = true;
};

/**
 * 打开页签编辑模式
 * @param param 信息
 *          属性1: type: 类型,
 *          属性1: windowNo: CURD窗口编号,
 *          属性2: tabIndex: CURD页签编号,
 *          属性3: modelDataId: 数据记录id,
 *          属性4: currentPage: 当前记录所在的页码,
 *          属性5: currentIndex: 当前记录的排序,
 *          属性6: totalRecords: 记录的总数量,
 *          属性7: uuid: 窗口唯一Id,
 */
const openTabEditView = function (param) {
  tabEditViewType.value = param.type;
  mCurdWindowNo.value = param.windowNo;
  mTabIndex.value = param.tabIndex;
  tabEditViewRecordId.value = param.modelDataId;
  tabEditViewCurrentPage.value = param.currentPage;
  tabEditViewCurrentIndex.value = param.currentIndex;
  tabEditViewTotalRecords.value = param.totalRecords;
  tabEditViewIsRestoreData.value = param.isRestoreData;

  openTabViewModal.value = false;
  openTabEditModal.value = true;
};

</script>