health.admin/src/components/EditMoreEquirement.vue

<script setup lang="ts">
import { h } from 'vue';
import { VxeUI } from 'vxe-pc-ui';
import EditOrganization from '@/components/EditOrganization.vue';
import EditProcesses from '@/components/EditProcesses.vue';

function editOrganization() {
  VxeUI.modal.open({
    title: '修改所属组织',
    content: '请选择所属组织',
    width: 800,
    height: 750,
    escClosable: true,
    destroyOnClose: true,
    id: 'edit-organization',
    remember: true,
    storage: true,
    slots: {
      default() {
        return h(EditOrganization, {} as any);
      },
    },
  });
}

function editProcessConfig() {
  VxeUI.modal.open({
    title: '修改流程配置',
    content: '请选择流程配置',
    width: 1400,
    height: 750,
    escClosable: true,
    destroyOnClose: true,
    id: 'edit-process-config',
    remember: true,
    storage: true,
    slots: {
      default() {
        return h(EditProcesses, {} as any);
      },
    },
  });
}
</script>

<template>
  <div class="form-container">
    <div class="button-group">
      <vxe-button status="primary" content="修改所属组织" @click="editOrganization"></vxe-button>
      <vxe-button status="warning" content="修改流程配置" @click="editProcessConfig"></vxe-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 300px;
  margin: 40px 0;

  .vxe-button {
    height: 44px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    min-width: 200px;
    
    &:first-child {
      background-color: #1890ff;
      border: 1px solid #1890ff;
      color: #fff;
      
      &:hover {
        background-color: #40a9ff;
        border-color: #40a9ff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
      }
    }
    
    &:last-child {
      background-color: #fa8c16;
      border: 1px solid #fa8c16;
      color: #fff;
      
      &:hover {
        background-color: #ff9c2a;
        border-color: #ff9c2a;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
      }
    }
  }
}
</style>