client-base-v5/src/window1/tabFormView/SubOneToOneTabView.vue

<template>
  <a-page-header
    :title="Language.getNameTrl($i18n.locale, tab)"
    style="border-bottom: 1px solid rgb(235, 237, 240); padding: 0px;"
  />

  <div class="m-row clearfix">
    <div>
      <div
        v-if="tabFormFields && mModelData"
        :class="{
          'form-inline': tab.tabFormView.multipleColumn,
          'form-horizontal': !tab.tabFormView.multipleColumn,
        }"
      >
        <template
          v-for="fieldItem in tabFormFields" :key="
            'FieldEditView_' +
              windowNo +
              '_' +
              tab.tabIndex +
              '_' +
              fieldItem.fieldName +
              '_' +
              fieldItem.entityFieldIndex
          "
        >
          <FieldEditView
            ref="fieldItem1" :class-name="tab.tabDataSource.className" :field="fieldItem"
            :model-data="mModelData" :window-no="windowNo" :tab-index="tab.tabIndex" :js-url="jsUrl"
            :is-chinese-english="curdWindow.isChineseEnglish" :multiple-column="tab.tabFormView.multipleColumn"
            @execute-callout="executeCallout(fieldItem)"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import Common from '../../common/Common';
import FieldEditView from './TabFormFieldView.vue';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import Language from '../../common/Language.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import { ref, reactive, defineEmits, defineProps, watch } from 'vue';
import { debounce } from 'lodash';


// 接受父组件传递的数据
const props = defineProps({
  tab: {
    type: Object,
    default: ()=>{
      return {};
    },
  },
  parentModelData: {
    type: Object,
    default: ()=>{
      return {};
    },
  },
  curdWindow: {
    type: Object,
    default: ()=>{
      return {};
    },
  },

  windowNo: {
    type: String,
    default: null,
  },

  jsUrl: {
    type: String,
    default: null,
  },
  
  isChineseEnglish: {
    type: Boolean,
    default: false,
  },
});

const mModelData = ref({});
const tabFormFields = ref([]);

const emits = defineEmits([]);



/**
 * 查询一对一页签数据
 */
const getOneToOneTabData = function () {
  const params = {
    windowNo: props.windowNo,
    tabIndex: props.tab.tabIndex,
    parentId: props.parentModelData == undefined ? undefined : props.parentModelData.id,
  };
  $.ajax({
    url: Common.getApiURL('CurdWindowResource/oneToOneTabData'),
    async: false,
    dataType: 'json',
    type: 'post',
    data: JSON.stringify(params),
    contentType: 'application/json',
    beforeSend: function (request) {
      Common.addTokenToRequest(request);
    },
    success: function (data) {
      mModelData.value = data;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      Common.processException(XMLHttpRequest, textStatus, errorThrown);
    },
  });
};


/**
 * 执行Callout
 */
const executeCallout = function (fieldItem) {
  if (fieldItem.calloutProcessReportNo != null) {
    callout(fieldItem.calloutProcessReportNo);
  }
};

/**
 * callout
 * @param  {[type]} calloutProcessReportNo [description]
 * @return {[type]}                  [description]
 */
const callout = function (calloutProcessReportNo) {
  // 查询流程和报表的定义
  ProcessReportResource.uniqueByNo(calloutProcessReportNo).then(
    successData => {
      if (successData == null) {
        return;
      }

      // 执行服务端的脚本
      ProcessReportResource.runCallout(
        calloutProcessReportNo,
        mModelData.value,
      ).then(
        successData => {
          if (successData && successData.modelData) {
            mModelData.value = successData.modelData;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    errorData => {
      Common.processException(errorData);
    },
  );
};

/**
 * 延迟获取页面的数据
 */
const debounceGetOneToOneTabData = debounce(() => {
  getOneToOneTabData();
}, 1000);


watch(
  () => [props.windowNo, props.tab, props.parentModelData],
  (newValue, oldValue) => {
    debounceGetOneToOneTabData();
  },
  { immediate: true },
);

watch(
  () => props.tab, 
  (newValue, oldValue) => {
    tabFormFields.value = WindowClientUtil.getDetailField(newValue);
    console.log(tabFormFields.value);
  },
  { immediate: true },
);


</script>

<style scoped></style>