feat: 新增项目详情页

.eslintrc.js

@@ -17,7 +17,12 @@ module.exports = defineConfig({
       jsx: true
     }
   },
-  extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended'
+  ],
   rules: {
     'prettier/prettier': [
       'error',
@@ -25,7 +30,7 @@ module.exports = defineConfig({
         semi: false,
         trailingComma: 'none',
         arrowParens: 'avoid',
-        printWidth: 180
+        printWidth: 120
       }
     ],
     '@typescript-eslint/ban-ts-ignore': 'off',

prettier.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 180,
+  printWidth: 120,
   tabWidth: 2,
   useTabs: false,
   semi: false,

src/api/sys/model/officeModel.ts

@@ -11,11 +11,15 @@ export interface OfficeListItem {
 }
 
 export interface CategoriedStaffItem {
-  id: string
-  name: string
+  value: string
+  label: string
 }
 
+export interface CategoriedStaffResult {
+  sid: string
+  username: string
+}
 /**
  * @description: Request list return value
  */
-export type OfficeListGetResultModel = { category: OfficeListItem[]; staff: CategoriedStaffItem[] }
+export type OfficeListGetResultModel = { category: OfficeListItem[]; staff: CategoriedStaffResult[] }

src/api/sys/model/projectModel.ts

@@ -23,6 +23,20 @@ export interface ProjectListItem {
   insideCategoryId: string
   insideCategory: string
   remark: string
+  status: number
+}
+
+export type ProjectDetailParams = {
+  id: string
+  name: string
+  insideCategoryId: string
+  insideCategory: string
+  categoryId: string
+  category: string
+  staffId: string
+  staffName: string
+  remark: string
+  status: string
 }
 
 /**

src/api/sys/project.ts

@@ -1,17 +1,42 @@
 import { defHttp } from '/@/utils/http/axios'
-import { ProjectListGetResultModel, ProjectListParams } from './model/projectModel'
+import {
+  ProjectListGetResultModel,
+  ProjectListParams,
+  ProjectListItem,
+  ProjectDetailParams
+} from './model/projectModel'
 enum Api {
-  GetProjectList = '/backstage/project/list'
+  GetProjectList = '/backstage/project/list',
+  GetProjectDetail = '/backstage/project',
+  UpdateProjectDetail = '/backstage/project/save'
 }
 
 /**
- * @description: 获取项目列表
+ * @description 获取项目列表
  */
 export function getProjectList(params: ProjectListParams) {
-  // params.insideCategoryId = params['category']
-  // delete params['category']
   return defHttp.post<ProjectListGetResultModel>({
     url: Api.GetProjectList,
     params
   })
 }
+
+/**
+ * @description 通过id获取项目详情
+ */
+export function getProjectById(params: { id: string }) {
+  return defHttp.get<ProjectListItem>({
+    url: Api.GetProjectDetail,
+    params
+  })
+}
+
+/**
+ * @description 编辑项目
+ */
+export function updateProject(params: ProjectDetailParams) {
+  return defHttp.post({
+    url: Api.UpdateProjectDetail,
+    params
+  })
+}

src/enums/statusEnum.ts

@@ -4,22 +4,35 @@ export enum ProjectStatusEnum {
   STOP = 2 // 停用
 }
 
-export enum ProjectStatusColorEnum {
+export enum ProjectStatusTextColorEnum {
   NORMAL = 'text-green-600', // 正常
   TEST = 'text-yellow-600', // 试用
   STOP = 'text-red-600' // 停用
 }
+export enum ProjectStatusBgColorEnum {
+  NORMAL = 'bg-green-600', // 正常
+  TEST = 'bg-yellow-600', // 试用
+  STOP = 'bg-red-600' // 停用
+}
+
 export enum ProjectStatusTextEnum {
   NORMAL = '正常', // 正常
   TEST = '试用', // 试用
   STOP = '停用' // 停用
 }
 
-export const projectStatusColorMap: Map<ProjectStatusEnum, ProjectStatusColorEnum> = (() => {
-  const map = new Map<ProjectStatusEnum, ProjectStatusColorEnum>()
-  map.set(ProjectStatusEnum.NORMAL, ProjectStatusColorEnum.NORMAL)
-  map.set(ProjectStatusEnum.TEST, ProjectStatusColorEnum.TEST)
-  map.set(ProjectStatusEnum.STOP, ProjectStatusColorEnum.STOP)
+export const projectStatusTextColorMap: Map<ProjectStatusEnum, ProjectStatusTextColorEnum> = (() => {
+  const map = new Map<ProjectStatusEnum, ProjectStatusTextColorEnum>()
+  map.set(ProjectStatusEnum.NORMAL, ProjectStatusTextColorEnum.NORMAL)
+  map.set(ProjectStatusEnum.TEST, ProjectStatusTextColorEnum.TEST)
+  map.set(ProjectStatusEnum.STOP, ProjectStatusTextColorEnum.STOP)
+  return map
+})()
+export const projectStatusBgColorMap: Map<ProjectStatusEnum, ProjectStatusBgColorEnum> = (() => {
+  const map = new Map<ProjectStatusEnum, ProjectStatusBgColorEnum>()
+  map.set(ProjectStatusEnum.NORMAL, ProjectStatusBgColorEnum.NORMAL)
+  map.set(ProjectStatusEnum.TEST, ProjectStatusBgColorEnum.TEST)
+  map.set(ProjectStatusEnum.STOP, ProjectStatusBgColorEnum.STOP)
   return map
 })()
 

src/router/routes/modules/dashboard.ts

@@ -20,6 +20,15 @@ const dashboard: AppRouteModule = {
         icon: 'ion:grid-outline',
         title: t('routes.dashboard.workbench')
       }
+    },
+    {
+      path: 'project/:id',
+      name: 'Project',
+      component: () => import('/@/views/dashboard/project-detail/index.vue'),
+      meta: {
+        title: '项目详情',
+        hideMenu: true
+      }
     }
   ]
 }

src/store/modules/office.ts

@@ -40,9 +40,9 @@ export const useOfficeStore = defineStore({
       this.setCategoryList(category)
     },
     // 获取办事处对应员工列表
-    async getOfficesWithStaffAction(params: OfficeListParams) {
+    async getStaffWithCategoryIdAction(params: OfficeListParams) {
       const { staff = [] } = await getOfficeList(params)
-      this.setStaffList(staff)
+      this.setStaffList(staff.map(item => ({ value: item.sid, label: item.username })))
     }
   }
 })

src/views/dashboard/project-detail/components/info.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="w-50vw">
+    <basic-form @register="register" @submit="handleSubmit" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref, watch, PropType } from 'vue'
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
+  import { ProjectStatusEnum } from '/@/enums/statusEnum'
+  import { useOfficeStore } from '/@/store/modules/office'
+  import { ProjectListItem, ProjectDetailParams } from '/@/api/sys/model/projectModel'
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'
+  import { updateProject } from '/@/api/sys/project'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  const schemas: FormSchema[] = [
+    {
+      field: 'status',
+      component: 'RadioGroup',
+      label: '状态',
+
+      componentProps: {
+        options: [
+          {
+            label: '正常',
+            value: ProjectStatusEnum.NORMAL
+          },
+          {
+            label: '停用',
+            value: ProjectStatusEnum.STOP
+          }
+        ]
+      }
+    },
+    {
+      field: 'createName',
+      component: 'Input',
+      label: '创建者',
+      componentProps: {
+        disabled: true
+      }
+    },
+    {
+      field: 'code',
+      component: 'Input',
+      label: '项目编号',
+
+      componentProps: {
+        disabled: true
+      }
+    },
+    {
+      field: 'name',
+      component: 'Input',
+      label: '项目名称',
+
+      required: true
+    },
+    {
+      field: 'insideCategoryId',
+      component: 'Select',
+      componentProps: {
+        showArrow: true
+      },
+      label: '所在办事处',
+
+      required: true
+    },
+    {
+      field: 'categoryId',
+      component: 'Select',
+      label: '销售负责人',
+      componentProps: {
+        showArrow: true
+      },
+      colProps: {
+        span: 14
+      },
+      required: true
+    },
+    {
+      field: 'staffId',
+      component: 'Select',
+      disabledLabelWidth: true,
+      componentProps: {
+        showArrow: true
+      },
+      label: '',
+      colProps: {
+        span: 8,
+        offset: 2
+      },
+      required: true
+    },
+    {
+      field: 'remark',
+      component: 'InputTextArea',
+      label: '备注'
+    }
+  ]
+  export default defineComponent({
+    components: {
+      BasicForm
+    },
+    props: {
+      info: {
+        type: Object as PropType<ProjectListItem>,
+        required: true
+      }
+    },
+    emits: ['updateInfo:info'],
+    setup(props, { emit }) {
+      const info = computed({
+        get: () => props.info,
+        set: value => emit('updateInfo:info', value)
+      })
+
+      const { createMessage } = useMessage()
+      const officeStore = useOfficeStore()
+      const options = computed(() => officeStore.getCategoryOptions)
+      const staffOptions = computed(() => officeStore.getCategoriedStaff)
+
+      const [register, { updateSchema, setFieldsValue, removeSchemaByFiled, appendSchemaByField }] = useForm({
+        labelWidth: 120,
+        schemas,
+        actionColOptions: {
+          flex: '280px',
+          span: 14
+        },
+        submitButtonOptions: {
+          text: '确认修改'
+        }
+      })
+      async function checkOffice() {
+        if (!officeStore.getOfficesAction.length) {
+          await officeStore.getOfficesAction()
+        }
+        if (props.info.categoryId) {
+          await officeStore.getStaffWithCategoryIdAction({ categoryId: props.info.categoryId })
+        }
+      }
+      onMountedOrActivated(async () => {
+        await checkOffice()
+        await updateSchema([
+          {
+            field: 'insideCategoryId',
+            component: 'Select',
+            label: '所在办事处',
+            componentProps: { options, showArrow: true },
+            required: true
+          },
+          {
+            field: 'categoryId',
+            component: 'Select',
+            label: '销售负责人',
+            componentProps: {
+              options,
+              showArrow: true,
+              onChange: (value: string) => {
+                officeStore.getStaffWithCategoryIdAction({ categoryId: value })
+              }
+            },
+            colProps: {
+              span: 14
+            },
+            required: true
+          }
+        ])
+        await setFieldsValue({ ...unref(info) })
+      })
+      watch(staffOptions, async newStaffOtpions => {
+        await removeSchemaByFiled('staffId')
+        await appendSchemaByField(
+          {
+            field: 'staffId',
+            component: 'Select',
+            label: '',
+            componentProps: {
+              showArrow: true,
+              options: newStaffOtpions
+            },
+            disabledLabelWidth: true,
+            colProps: {
+              span: 8,
+              offset: 2
+            },
+            required: true
+          },
+          'categoryId'
+        )
+      })
+      const handleOnSave = async (values: {
+        name: string
+        insideCategoryId: string
+        categoryId: string
+        staffId: string
+        remark: string
+        status: string
+      }) => {
+        const newVal: ProjectDetailParams = {
+          ...values,
+          id: props.info.id,
+          insideCategory: '',
+          category: '',
+          staffName: ''
+        }
+        if (values.insideCategoryId) {
+          newVal.insideCategory = options.value.find(item => item.value === values.insideCategoryId)?.label || ''
+        }
+        if (values.categoryId) {
+          newVal.category = options.value.find(item => item.value === values.categoryId)?.label || ''
+        }
+        if (values.staffId) {
+          newVal.staffName = staffOptions.value.find(item => item.value === values.staffId)?.label || ''
+        }
+        await updateProject(newVal)
+      }
+      function handleSubmit(values) {
+        try {
+          handleOnSave(values)
+        } finally {
+          createMessage.success('更新成功')
+        }
+      }
+      return { register, schemas, handleSubmit }
+    }
+  })
+</script>

src/views/dashboard/project-detail/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <PageWrapper content-class="bg-white p-5">
+    <div
+      v-if="projectInfo && projectStatusBgColorMap.has(projectInfo.status)"
+      class="flex items-baseline"
+      :class="prefixCls"
+    >
+      <span
+        :class="projectStatusBgColorMap.get(projectInfo.status)"
+        class="text-white rounded-md h-28px py-1 px-[.4rem] text-base leading-20px mr-2"
+        >{{ projectStatusTextMap.get(projectInfo?.status) }}</span
+      >
+      <h4 class="text-3xl p-0 m-0">{{ projectInfo.name }}</h4>
+    </div>
+    <div>
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="项目信息">
+          <ProjectInfo v-if="projectInfo" :info="projectInfo" @updateInfo:info="updateInfo" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="项目账号" />
+        <a-tab-pane key="3" tab="项目标段" />
+        <a-tab-pane key="4" tab="办事处共享" />
+        <a-tab-pane key="5" tab="功能设置" />
+      </a-tabs>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { Tabs } from 'ant-design-vue'
+  import { PageWrapper } from '/@/components/Page'
+  import { ProjectListItem } from '/@/api/sys/model/projectModel'
+  import { getProjectById } from '/@/api/sys/project'
+  import { useDesign } from '/@/hooks/web/useDesign'
+  import { projectStatusBgColorMap, projectStatusTextMap } from '/@/enums/statusEnum'
+  import ProjectInfo from './components/info.vue'
+  import { useOfficeStore } from '/@/store/modules/office'
+  export default defineComponent({
+    name: 'Project',
+    components: {
+      PageWrapper,
+      ATabs: Tabs,
+      ATabPane: Tabs.TabPane,
+      ProjectInfo
+    },
+    setup() {
+      const { prefixCls } = useDesign('project')
+      const projectInfo = ref<Nullable<ProjectListItem>>(null)
+      const route = useRoute()
+      async function fetchProjectInfo(id: string) {
+        const project = await getProjectById({ id })
+        projectInfo.value = project
+        if (project.staffId) {
+          await officeStore.getStaffWithCategoryIdAction({ categoryId: project.categoryId })
+        }
+      }
+      const officeStore = useOfficeStore()
+      async function checkOffice() {
+        if (!officeStore.getOfficesAction.length) {
+          await officeStore.getOfficesAction()
+        }
+      }
+      checkOffice()
+      fetchProjectInfo(route.params.id as string)
+      watch(
+        () => route.params.id,
+        async (newId: string) => {
+          if (newId) {
+            await fetchProjectInfo(newId)
+          }
+        }
+      )
+      const updateInfo = (info: ProjectListItem) => {
+        projectInfo.value = info
+      }
+      return { projectInfo, projectStatusBgColorMap, projectStatusTextMap, prefixCls, updateInfo }
+    }
+  })
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-project';
+
+  html {
+    .@{prefix-cls} {
+      font-size: 14px;
+    }
+  }
+</style>

src/views/dashboard/workbench/components/DynamicInfo.vue

@@ -1,37 +0,0 @@
-<template>
-  <Card title="最新动态" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small">更多</a-button>
-    </template>
-    <List item-layout="horizontal" :data-source="items">
-      <template #renderItem="{ item }">
-        <ListItem>
-          <ListItemMeta>
-            <template #description>
-              {{ item.date }}
-            </template>
-            <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
-            <template #avatar>
-              <Icon :icon="item.avatar" :size="30" />
-            </template>
-          </ListItemMeta>
-        </ListItem>
-      </template>
-    </List>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import { Card, List } from 'ant-design-vue';
-  import { dynamicInfoItems } from './data';
-  import headerImg from '/@/assets/images/header.jpg';
-  import { Icon } from '/@/components/Icon';
-
-  export default defineComponent({
-    components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon },
-    setup() {
-      return { items: dynamicInfoItems, headerImg };
-    },
-  });
-</script>

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <Card title="项目" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small">更多</a-button>
-    </template>
-
-    <template v-for="item in items" :key="item">
-      <CardGrid class="!md:w-1/3 !w-full">
-        <span class="flex">
-          <Icon :icon="item.icon" :color="item.color" size="30" />
-          <span class="text-lg ml-4">{{ item.title }}</span>
-        </span>
-        <div class="flex mt-2 h-10 text-secondary"> {{ item.desc }} </div>
-        <div class="flex justify-between text-secondary">
-          <span>{{ item.group }}</span>
-          <span>{{ item.date }}</span>
-        </div>
-      </CardGrid>
-    </template>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import { Card } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
-  import { groupItems } from './data';
-
-  export default defineComponent({
-    components: { Card, CardGrid: Card.Grid, Icon },
-    setup() {
-      return { items: groupItems };
-    },
-  });
-</script>

src/views/dashboard/workbench/components/QuickNav.vue

@@ -1,26 +0,0 @@
-<template>
-  <Card title="快捷导航" v-bind="$attrs">
-    <template v-for="item in items" :key="item">
-      <CardGrid>
-        <span class="flex flex-col items-center">
-          <Icon :icon="item.icon" :color="item.color" size="20" />
-          <span class="text-md mt-2">{{ item.title }}</span>
-        </span>
-      </CardGrid>
-    </template>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import { Card } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
-  import { navItems } from './data';
-
-  export default defineComponent({
-    components: { Card, CardGrid: Card.Grid, Icon },
-    setup() {
-      return { items: navItems };
-    },
-  });
-</script>

src/views/dashboard/workbench/components/SaleRadar.vue

@@ -1,106 +0,0 @@
-<template>
-  <Card title="销售统计" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent, Ref, ref, watch } from 'vue';
-
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '400px',
-      },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            legend: {
-              bottom: 0,
-              data: ['Visits', 'Sales'],
-            },
-            tooltip: {},
-            radar: {
-              radius: '60%',
-              splitNumber: 8,
-              indicator: [
-                {
-                  text: '2017',
-                  max: 100,
-                },
-                {
-                  text: '2017',
-                  max: 100,
-                },
-                {
-                  text: '2018',
-                  max: 100,
-                },
-                {
-                  text: '2019',
-                  max: 100,
-                },
-                {
-                  text: '2020',
-                  max: 100,
-                },
-                {
-                  text: '2021',
-                  max: 100,
-                },
-              ],
-            },
-            series: [
-              {
-                type: 'radar',
-                symbolSize: 0,
-                areaStyle: {
-                  shadowBlur: 0,
-                  shadowColor: 'rgba(0,0,0,.2)',
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 10,
-                  opacity: 1,
-                },
-                data: [
-                  {
-                    value: [90, 50, 86, 40, 50, 20],
-                    name: 'Visits',
-                    itemStyle: {
-                      color: '#b6a2de',
-                    },
-                  },
-                  {
-                    value: [70, 75, 70, 76, 20, 85],
-                    name: 'Sales',
-                    itemStyle: {
-                      color: '#67e0e3',
-                    },
-                  },
-                ],
-              },
-            ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
-    },
-  });
-</script>

src/views/dashboard/workbench/components/WorkbenchHeader.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="lg:flex">
-    <Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
-    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
-      <h1 class="md:text-lg text-md">早安, Vben, 开始您一天的工作吧！</h1>
-      <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
-    </div>
-    <div class="flex flex-1 justify-end md:mt-0 mt-4">
-      <div class="flex flex-col justify-center text-right">
-        <span class="text-secondary"> 待办 </span>
-        <span class="text-2xl">2/10</span>
-      </div>
-
-      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
-        <span class="text-secondary"> 项目 </span>
-        <span class="text-2xl">8</span>
-      </div>
-      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
-        <span class="text-secondary"> 团队 </span>
-        <span class="text-2xl">300</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import { Avatar } from 'ant-design-vue';
-
-  import headerImg from '/@/assets/images/header.jpg';
-  export default defineComponent({
-    components: { Avatar },
-    setup() {
-      return { headerImg };
-    },
-  });
-</script>

src/views/dashboard/workbench/components/data.ts

@@ -1,156 +0,0 @@
-interface GroupItem {
-  title: string;
-  icon: string;
-  color: string;
-  desc: string;
-  date: string;
-  group: string;
-}
-
-interface NavItem {
-  title: string;
-  icon: string;
-  color: string;
-}
-
-interface DynamicInfoItem {
-  avatar: string;
-  name: string;
-  date: string;
-  desc: string;
-}
-
-export const navItems: NavItem[] = [
-  {
-    title: '首页',
-    icon: 'ion:home-outline',
-    color: '#1fdaca',
-  },
-  {
-    title: '仪表盘',
-    icon: 'ion:grid-outline',
-    color: '#bf0c2c',
-  },
-  {
-    title: '组件',
-    icon: 'ion:layers-outline',
-    color: '#e18525',
-  },
-  {
-    title: '系统管理',
-    icon: 'ion:settings-outline',
-    color: '#3fb27f',
-  },
-  {
-    title: '权限管理',
-    icon: 'ion:key-outline',
-    color: '#4daf1bc9',
-  },
-  {
-    title: '图表',
-    icon: 'ion:bar-chart-outline',
-    color: '#00d8ff',
-  },
-];
-
-export const dynamicInfoItems: DynamicInfoItem[] = [
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '刚刚',
-    desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
-  },
-  {
-    avatar: 'dynamic-avatar-2|svg',
-    name: '艾文',
-    date: '1个小时前',
-    desc: `关注了 <a>威廉</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-3|svg',
-    name: '克里斯',
-    date: '1天前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-4|svg',
-    name: 'Vben',
-    date: '2天前',
-    desc: `发表文章 <a>如何编写一个Vite插件</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-5|svg',
-    name: '皮特',
-    date: '3天前',
-    desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
-  },
-  {
-    avatar: 'dynamic-avatar-6|svg',
-    name: '杰克',
-    date: '1周前',
-    desc: `关闭了问题 <a>如何运行项目</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '1周前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '2021-04-01 20:00',
-    desc: `推送了代码到 <a>Github</a>`,
-  },
-];
-
-export const groupItems: GroupItem[] = [
-  {
-    title: 'Github',
-    icon: 'carbon:logo-github',
-    color: '',
-    desc: '不要等待机会，而要创造机会。',
-    group: '开源组',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Vue',
-    icon: 'ion:logo-vue',
-    color: '#3fb27f',
-    desc: '现在的你决定将来的你。',
-    group: '算法组',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Html5',
-    icon: 'ion:logo-html5',
-    color: '#e18525',
-    desc: '没有什么才能比努力更重要。',
-    group: '上班摸鱼',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Angular',
-    icon: 'ion:logo-angular',
-    color: '#bf0c2c',
-    desc: '热情和欲望可以突破一切难关。',
-    group: 'UI',
-    date: '2021-04-01',
-  },
-  {
-    title: 'React',
-    icon: 'bx:bxl-react',
-    color: '#00d8ff',
-    desc: '健康的身体是实目标的基石。',
-    group: '技术牛',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Js',
-    icon: 'ion:logo-javascript',
-    color: '#4daf1bc9',
-    desc: '路是走出来的，而不是空想出来的。',
-    group: '架构组',
-    date: '2021-04-01',
-  },
-];

src/views/dashboard/workbench/index.vue

@@ -8,10 +8,18 @@
       </template>
       <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters }">
         <div class="p-3">
-          <a-select :options="options" placeholder="按办事处筛选" @select="value => setSelectedKeys([value])" style="width: 180px" allowClear />
+          <a-select
+            :options="options"
+            placeholder="按办事处筛选"
+            @select="value => setSelectedKeys([value])"
+            style="width: 180px"
+            allowClear
+          />
         </div>
         <div class="pb-3 justify-center flex">
-          <a-button size="small" @click="() => handleSearch('insideCategoryId', selectedKeys[0], confirm)" class="mr-3">确定</a-button>
+          <a-button size="small" @click="() => handleSearch('insideCategoryId', selectedKeys[0], confirm)" class="mr-3"
+            >确定</a-button
+          >
           <a-button size="small" @click="() => clearFilters()">重置</a-button>
         </div>
       </template>
@@ -24,10 +32,11 @@
   import { PageWrapper } from '/@/components/Page'
   import { getProjectList } from '/@/api/sys/project'
   import { Input, Select } from 'ant-design-vue'
-  import { getProjectTableColumns } from '../tableData'
+  import { getProjectTableColumns } from './tableData'
   import { useOfficeStore } from '/@/store/modules/office'
   import { ProjectListItem, ProjectListParams } from '/@/api/sys/model/projectModel'
   export default defineComponent({
+    name: 'Workbench',
     components: {
       PageWrapper,
       BasicTable,

src/views/dashboard/tableData.tsx

@@ -1,13 +1,13 @@
 import { BasicColumn } from '/@/components/Table/src/types/table'
-import { projectStatusColorMap, projectStatusTextMap } from '/@/enums/statusEnum'
-console.log(projectStatusColorMap.get(0))
+import { projectStatusTextColorMap, projectStatusTextMap } from '/@/enums/statusEnum'
 
 export function getProjectTableColumns(): BasicColumn[] {
   return [
     {
       title: '项目编号',
       dataIndex: 'code',
-      width: 100
+      width: 100,
+      customRender: ({ text, record }) => <router-link to={`/dashboard/project/${record.id}`}>{text}</router-link>
     },
     {
       title: '项目名称',
@@ -35,7 +35,9 @@ export function getProjectTableColumns(): BasicColumn[] {
       title: '状态',
       dataIndex: 'status',
       width: 100,
-      customRender: ({ text }) => <span class={projectStatusColorMap.get(text)}>{projectStatusTextMap.get(text)}</span>
+      customRender: ({ text }) => (
+        <span class={projectStatusTextColorMap.get(text)}>{projectStatusTextMap.get(text)}</span>
+      )
     }
   ]
 }