yudao-ui-admin-vben/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

<script lang="ts" setup>
import { onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue';

import { Form, FormItem, Input } from 'ant-design-vue';

defineOptions({ name: 'ElementBaseInfo' });

const props = defineProps<{
  businessObject?: BusinessObject;
  model?: Model;
}>();

interface BusinessObject {
  id?: string;
  name?: string;
  $type: string;
  [key: string]: any;
}

interface Model {
  key?: string;
  name?: string;
  [key: string]: any;
}

const needProps = ref<Record<string, any>>({});
const bpmnElement = ref<any>();
const elementBaseInfo = ref<BusinessObject>({} as any);
// 流程表单的下拉框的数据
// const forms = ref([])
// 流程模型的校验
const rules = reactive<any>({
  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
});

const bpmnInstances = () =>
  (window as any)?.bpmnInstances as {
    bpmnElement: any;
    modeling: {
      updateProperties: (element: any, properties: any) => void;
    };
  };
const resetBaseInfo = () => {
  // console.log(window, 'window');
  // console.log(bpmnElement.value, 'bpmnElement');

  bpmnElement.value = bpmnInstances()?.bpmnElement;
  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
  if (bpmnElement.value?.businessObject) {
    elementBaseInfo.value = bpmnElement.value.businessObject;
    needProps.value.type = bpmnElement.value.businessObject.$type;
  }
  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type

  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
};
const handleKeyUpdate = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const value = target.value;

  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
  if (!value) {
    return;
  }
  if (!/[a-z_][-\w.$]*/i.test(value)) {
    // console.log('key 不满足 XML NCName 规则，所以不进行赋值');
    return;
  }
  // console.log('key 满足 XML NCName 规则，所以进行赋值');

  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
  elementBaseInfo.value.id = value;

  setTimeout(() => {
    updateBaseInfo('id');
  }, 100);
};

const handleNameUpdate = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const value = target.value;

  // console.log(elementBaseInfo, 'elementBaseInfo');
  if (!value) {
    return;
  }
  elementBaseInfo.value.name = value;

  setTimeout(() => {
    updateBaseInfo('name');
  }, 100);
};
// const handleDescriptionUpdate=(value)=> {
// TODO 芋艿：documentation 暂时无法修改，后续在看看
// this.elementBaseInfo['documentation'] = value;
// this.updateBaseInfo('documentation');
// }
const updateBaseInfo = (key: string) => {
  // console.log(key, 'key');
  // 触发 elementBaseInfo 对应的字段
  const attrObj: Record<string, any> = Object.create(null);
  // console.log(attrObj, 'attrObj')
  attrObj[key] = elementBaseInfo.value[key];
  // console.log(attrObj, 'attrObj111')
  // const attrObj = {
  //   id: elementBaseInfo.value[key]
  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
  // }
  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
  needProps.value = { ...elementBaseInfo.value, ...needProps.value };

  if (key === 'id') {
    // console.log('jinru')
    // console.log(window, 'window');
    // console.log(bpmnElement.value, 'bpmnElement');
    // console.log(toRaw(bpmnElement.value), 'bpmnElement');
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
      id: elementBaseInfo.value[key],
      di: { id: `${elementBaseInfo.value[key]}_di` },
    });
  } else {
    // console.log(attrObj, 'attrObj');
    bpmnInstances().modeling.updateProperties(
      toRaw(bpmnElement.value),
      attrObj,
    );
  }
};

watch(
  () => props.businessObject,
  (val) => {
    // console.log(val, 'val11111111111111111111')
    if (val) {
      // nextTick(() => {
      resetBaseInfo();
      // })
    }
  },
);

watch(
  () => props.model?.key,
  (val) => {
    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
    if (val) {
      handleKeyUpdate(props.model?.key as any);
      handleNameUpdate(props.model?.name as any);
    }
  },
  {
    immediate: true,
  },
);

// watch(
//   () => ({ ...props }),
//   (oldVal, newVal) => {
//     console.log(oldVal, 'oldVal')
//     console.log(newVal, 'newVal')
//     if (newVal) {
//       needProps.value = newVal
//     }
//   },
//   {
//     immediate: true
//   }
// )
// 'model.key': {
//   immediate: false,
//   handler: function (val) {
//     this.handleKeyUpdate(val)
//   }
// }
onBeforeUnmount(() => {
  bpmnElement.value = null;
});
</script>
<template>
  <div class="panel-tab__content">
    <Form :model="needProps" :rules="rules" layout="vertical">
      <div v-if="needProps.type === 'bpmn:Process'">
        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
        <FormItem label="流程标识" name="id">
          <Input
            v-model:value="needProps.id"
            placeholder="请输入流标标识"
            :disabled="needProps.id !== undefined && needProps.id.length > 0"
            @change="handleKeyUpdate"
          />
        </FormItem>
        <FormItem label="流程名称" name="name">
          <Input
            v-model:value="needProps.name"
            placeholder="请输入流程名称"
            allow-clear
            @change="handleNameUpdate"
          />
        </FormItem>
      </div>
      <div v-else>
        <FormItem label="ID">
          <Input
            v-model:value="elementBaseInfo.id"
            allow-clear
            @change="updateBaseInfo('id')"
          />
        </FormItem>
        <FormItem label="名称">
          <Input
            v-model:value="elementBaseInfo.name"
            allow-clear
            @change="updateBaseInfo('name')"
          />
        </FormItem>
      </div>
    </Form>
  </div>
</template>