auto-solution/modeler/src/views/ai/project/config.vue

<template>
  <Layout>
    <div class="ks-layout-page">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="计算资源配置">
          <a-table
            :columns="columns"
            :dataSource="dataSource"
            bordered
            size="small"
          />

          <a-collapse v-model:activeKey="resourceActiveKey" class="mt-5">
            <a-collapse-panel key="1" header="MaxCompute资源-待关联资源(3)">
              <a-row :gutter="15">
                <a-col :span="6">
                  <a-card class="min-h-36" hoverable>
                    <template #title>
                      <span class="text-blue-500">resource_001</span>
                      <span class="absolute right-2"><a-checkbox /></span>
                    </template>
                    <span class="text-gray-800">预付费</span>
                    <span>MaxCompute</span>
                    <span class="absolute bottom-2 right-2">Designer</span>
                  </a-card>
                </a-col>
                <a-col :span="6">
                  <a-card class="min-h-36" hoverable>
                    <template #title>
                      <span class="text-blue-500">resource_002</span>
                      <span class="absolute right-2"><a-checkbox /></span>
                    </template>
                    <span class="text-gray-800">预付费</span>
                    <span>MaxCompute</span>
                    <span class="absolute bottom-2 right-2">Designer</span>
                  </a-card>
                </a-col>
                <a-col :span="6">
                  <a-card class="min-h-36" hoverable>
                    <template #title>
                      <span class="text-blue-500">resource_003</span>
                      <span class="absolute right-2"><a-checkbox /></span>
                    </template>
                    <span class="text-gray-800">预付费</span>
                    <span>MaxCompute</span>
                    <span class="absolute bottom-2 right-2">Designer</span>
                  </a-card>
                </a-col>
              </a-row>
              <a-button class="mt-5" type="primary">确认关联</a-button>
            </a-collapse-panel>
          </a-collapse>

        </a-tab-pane>
        <a-tab-pane key="2" force-render tab="成员及角色配置">
          <a-space class="mb-5">
            <a-button type="primary">新增授权</a-button>
            <a-input placeholder="筛选授权主体,权限策略,资源组." style="width: 250px" />
            <a-select
              v-model:value="value1"
              style="width: 150px"
            >
              <a-select-option value="0">所有主体</a-select-option>
              <a-select-option value="1">所有主体2</a-select-option>
            </a-select>
            <a-select
              v-model:value="value1"
              style="width: 150px"
            >
              <a-select-option value="0">策略类型1</a-select-option>
              <a-select-option value="1">策略类型2</a-select-option>
            </a-select>
          </a-space>

          <a-table
            :columns="columns2"
            :dataSource="dataSource2"
            bordered
            size="small"
          />

        </a-tab-pane>
        <a-tab-pane key="3" tab="通用配置">
          <a-form
            :model="formState"
            autocomplete="off"
            class="w-1/2 bg-white"
            layout="vertical"
            name="basic"
            style="padding: 15px"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-form-item
              :rules="[{ required: true, message: 'Please input your taskName!' }]"
              label="任务名称"
              name="taskName"
            >
              <a-input v-model:value="formState.taskName" />
            </a-form-item>

            <a-form-item
              :rules="[{ required: true, message: 'Please input your location!' }]"
              label="任务存储位置"
              name="location"
            >
              <a-input v-model:value="formState.location" />
            </a-form-item>

            <a-form-item
              :rules="[{ required: true, message: 'Please input your name!' }]"
              label="场景名称"
              name="name"
            >
              <a-input v-model:value="formState.name" />
            </a-form-item>

            <a-form-item
              :rules="[{ required: true, message: 'Please input your description!' }]"
              label="任务描述"
              name="description"
            >
              <a-textarea v-model:value="formState.description" />
            </a-form-item>

            <a-form-item>
              <a-space>
                <a-button html-type="submit" type="primary">确定</a-button>
                <a-button>取消</a-button>
              </a-space>
            </a-form-item>
          </a-form>

        </a-tab-pane>
      </a-tabs>
    </div>

  </Layout>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import Layout from '../layout.vue';

const activeKey = ref('1');

const dataSource = [
  {
    key: '1',
    name: 'test001',
    age: '-',
    address: '-',
    status: '✅ 运行中',
    createdAt: '2025-12-12 12:12:12',
  },
  {
    key: '2',
    name: 'test002',
    age: '-',
    address: '-',
    status: '✅ 运行中',
    createdAt: '2025-12-12 12:12:12',
  },
];

const columns = [
  {
    title: 'MaxCompute项目名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Quota名称',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '付费类型',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
];

const resourceActiveKey = ref('1');

interface FormState {
  taskName: string;
  name: string;
  location: string;
  description: string;
}

const formState = reactive<FormState>({
  taskName: '',
  name: '',
  location: '',
  description: '',
});
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const value1 = ref('0');

const dataSource2 = [
  {
    key: '1',
    name: 'test001',
    age: '-',
    address: '-',
    status: '✅ 运行中',
    createdAt: '2025-12-12 12:12:12',
  },
  {
    key: '2',
    name: 'test002',
    age: '-',
    address: '-',
    status: '✅ 运行中',
    createdAt: '2025-12-12 12:12:12',
  },
];

const columns2 = [
  {
    title: '授权主体',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '权限策略',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '备注',
    dataIndex: 'address',
    key: 'address',
  },
];

</script>