smartcut-frontend/apps/platform-app/src/views/FactoriesView.vue

<template>
  <SidebarLayout
    :menuItems="menuItems"
    :userName="authStore.user?.name"
    :activeKey="'factories'"
    @logout="handleLogout"
  >
    <div class="factories-page">
      <!-- 头部工具栏 -->
      <a-card>
        <a-space>
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="搜索工厂名称"
            style="width: 300px"
            @search="loadFactories"
          />
          <a-button type="primary" @click="showCreateModal">
            创建工厂
          </a-button>
        </a-space>
      </a-card>

      <!-- 工厂列表表格 -->
      <a-card class="mt-4">
        <a-table
          :columns="columns"
          :dataSource="factories"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <!-- 状态列 -->
          <template #status="{ record }">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? '启用' : '禁用' }}
            </a-tag>
          </template>

          <!-- 操作列 -->
          <template #action="{ record }">
            <a-space>
              <a-button size="small" @click="showEditModal(record)">
                编辑
              </a-button>
              <a-button
                size="small"
                :type="record.status === 1 ? 'default' : 'primary'"
                @click="toggleFactoryStatus(record)"
              >
                {{ record.status === 1 ? '禁用' : '启用' }}
              </a-button>
              <a-popconfirm
                title="确定删除此工厂吗?此操作将永久删除工厂数据库文件!"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteFactory(record.id)"
              >
                <a-button size="small" danger>
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
      </a-card>

      <!-- 创建/编辑工厂模态框 -->
      <a-modal
        v-model:open="modalVisible"
        :title="modalTitle"
        @ok="handleSubmit"
        @cancel="resetForm"
        :confirmLoading="submitting"
      >
        <a-form
          ref="formRef"
          :model="formState"
          :rules="formRules"
          layout="vertical"
        >
          <a-form-item label="工厂ID" name="id" v-if="!isEdit">
            <a-input
              v-model:value="formState.id"
              placeholder="请输入工厂ID(字母或数字)"
            />
          </a-form-item>

          <a-form-item label="工厂名称" name="name">
            <a-input
              v-model:value="formState.name"
              placeholder="请输入工厂名称"
            />
          </a-form-item>

          <a-form-item label="数据库路径" name="db_path" v-if="!isEdit">
            <a-input
              v-model:value="formState.db_path"
              placeholder="可选,默认自动生成"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </SidebarLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useAuthStore } from '@/stores/auth';
import { SidebarLayout } from '@smartcut/shared-components';
import { FactoryApi, createApiClient } from '@smartcut/api-client';
import { STORAGE_KEYS } from '@smartcut/shared-utils';
import type { Factory } from '@smartcut/types';

const router = useRouter();
const authStore = useAuthStore();

// 菜单项
const menuItems = [
  {
    key: 'dashboard',
    label: '主页看板',
    icon: 'DashboardOutlined',
    path: '/'
  },
  {
    key: 'factories',
    label: '工厂管理',
    icon: 'ShopOutlined',
    path: '/factories'
  },
  {
    key: 'users',
    label: '系统用户',
    icon: 'UserOutlined',
    path: '/users'
  }
];

// API客户端
const apiClient = createApiClient({
  baseURL: window.location.origin,
  tokenKey: STORAGE_KEYS.PLATFORM_TOKEN
});

const factoryApi = new FactoryApi(apiClient);

// 工厂列表数据
const factories = ref<Factory[]>([]);
const loading = ref(false);
const searchKeyword = ref('');

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`
});

// 表格列定义
const columns = [
  {
    title: '工厂ID',
    dataIndex: 'id',
    key: 'id',
    width: 120
  },
  {
    title: '工厂名称',
    dataIndex: 'name',
    key: 'name',
    width: 200
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    slots: { customRender: 'status' }
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 180
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 200,
    slots: { customRender: 'action' }
  }
];

// 模态框
const modalVisible = ref(false);
const modalTitle = ref('创建工厂');
const isEdit = ref(false);
const submitting = ref(false);
const formRef = ref();

const formState = reactive({
  id: '',
  name: '',
  db_path: ''
});

const formRules = {
  id: [
    { required: true, message: '请输入工厂ID', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+$/, message: '工厂ID只能包含字母、数字、下划线或横线', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入工厂名称', trigger: 'blur' }
  ]
};

// 加载工厂列表
async function loadFactories() {
  loading.value = true;
  try {
    const result = await factoryApi.listFactories();
    factories.value = result.list;
    pagination.total = result.total;
  } catch (error) {
    message.error('加载工厂列表失败');
  } finally {
    loading.value = false;
  }
}

// 表格分页/筛选变化
function handleTableChange(pag: any) {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  loadFactories();
}

// 显示创建模态框
function showCreateModal() {
  modalTitle.value = '创建工厂';
  isEdit.value = false;
  modalVisible.value = true;
  resetForm();
}

// 显示编辑模态框
function showEditModal(record: Factory) {
  modalTitle.value = '编辑工厂';
  isEdit.value = true;
  modalVisible.value = true;
  
  // 填充表单数据
  formState.id = record.id;
  formState.name = record.name;
  formState.db_path = record.db_path;
}

// 提交表单
async function handleSubmit() {
  try {
    await formRef.value.validate();
    submitting.value = true;

    if (isEdit.value) {
      // 编辑工厂
      await factoryApi.updateFactory(formState.id, {
        name: formState.name
      });
      message.success('工厂已更新');
    } else {
      // 创建工厂
      await factoryApi.createFactory({
        id: formState.id,
        name: formState.name,
        db_path: formState.db_path
      });
      message.success('工厂已创建');
    }

    modalVisible.value = false;
    loadFactories();
  } catch (error) {
    if (error.response?.data?.msg) {
      message.error(error.response.data.msg);
    } else {
      message.error(isEdit.value ? '更新工厂失败' : '创建工厂失败');
    }
  } finally {
    submitting.value = false;
  }
}

// 重置表单
function resetForm() {
  formRef.value?.resetFields();
  formState.id = '';
  formState.name = '';
  formState.db_path = '';
}

// 切换工厂状态(启用/禁用)
async function toggleFactoryStatus(record: Factory) {
  try {
    if (record.status === 1) {
      // 禁用工厂
      await factoryApi.deleteFactory(record.id, false);
      message.success('工厂已禁用');
    } else {
      // 启用工厂
      await factoryApi.enableFactory(record.id);
      message.success('工厂已启用');
    }
    loadFactories();
  } catch (error) {
    message.error('操作失败');
  }
}

// 删除工厂(永久删除)
async function deleteFactory(id: string) {
  try {
    await factoryApi.deleteFactory(id, true);
    message.success('工厂已永久删除');
    loadFactories();
  } catch (error) {
    message.error('删除工厂失败');
  }
}

// 登出处理
function handleLogout() {
  authStore.logout();
  message.success('已退出登录');
  router.push('/login');
}

// 初始化加载
onMounted(() => {
  loadFactories();
});
</script>

<style scoped lang="postcss">
.factories-page {
  padding: 0;
}

.mt-4 {
  margin-top: 16px;
}
</style>