# 17工作网

**Repository Path**: chenxiaonan/17-work-network

## Basic Information

- **Project Name**: 17工作网
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-24
- **Last Updated**: 2023-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 17work-ui

#### 进度条组件: tree-line

使用方式

```
<tree-line :data="treeData" :active="active" @getItem="getStage($event)"></tree-line>

import TreeLine from '/@/components/treeLine/index.vue'

data() {
  return {
    treeData: {
	common: [{label: '普通一', time: '2022-10-19', value: '1'}], // 必传, 主路线
	successStatus: [{label: '成功一', time: '', value: '2'}], // 非必传, 分叉路线上
	disuseStatus: [{label: '失败一', time: '', value: '3'}] // 非必传, 分叉路线下
    },
    active: '1' // 当前节点id
  }
},
setup() {
   // 获取点击的节点
   const getStage = (e) => {
       console.log(e)
   }
   return {
	getStage
   }
}

```

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#### 选择待办人组件: organize-tree-select

使用方式

```
<organize-tree-select v-model:dialogDrawer="dialogDrawer" @onSubmit="getSelect"></organize-tree-select>

setup() {
   const getSelect = (val) => {
	// 选择的待办人值
   }
}
```

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#### 自定义环境变量

在自定义的变量前添加 VITE_

例: VITE_ORIGINAL

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#### Calendar

##### 属性

| 属性        | 说明                 | 类型   | 可选值                                    | 默认值   |
| ----------- | -------------------- | ------ | ----------------------------------------- | -------- |
| defaultView | 视图                 | string | week(1周)/multipleweek(2周)/fiveWeek(5周) | fiveWeek |
| events      | 事件                 | array  | -                                         | -        |
| belongsUser | 表单所属用户可选列表 | array  | -                                         | -        |

##### 回调方法

| 方法名        | 说明     | 参数 |
| ------------- | -------- | ---- |
| changeDate    | 事件修改 | -    |
| submitForm    | 提交事件 | -    |
| delEvent      | 删除事件 | -    |
| completeEvent | 完成事件 |      |

##### events结构

| 属性        | 说明         | 类型    | 可选值     | 默认值               |
| ----------- | ------------ | ------- | ---------- | -------------------- |
| id          | 事件id       | string  | -          | -                    |
| hours       | 小时区间     | string  | -          | HH:mm:ss - HH:mm:ss |
| title       | 标题         | string  | -          | -                    |
| color       | 事件文字颜色 | string  | -          | #007bbb              |
| background  | 事件背景颜色 | string  | -          | #eaf4f               |
| isEdit      | 编辑状态     | boolean | true/false | true                 |
| startTime   | 开始时间     | string  | -          | YYYY-MM-DD HH:mm:ss  |
| endTime     | 结束时间     | string  | -          | YYYY-MM-DD HH:mm:ss  |
| isAllDay    | 是否全天事件 | boolean | true/false | month视图默认true    |
| location    | 地点         | string  | -          | -                    |
| theme       | 主题         | string  | -          | 1                    |
| scope       | 事件公开范围 | string  | -          | -                    |
| belong      | 事件所属     | string  | -          | -                    |
| belongTitle | 事件所属名称 | string  | -          | -                    |

#### 页面结构
```
--home
   |-- components
      |-- Calendar                  日历组件入口
      |-- AllDayWeekEventItem       周视图全天事项的组件
      |-- EventItem                 周、天视图事项的组件
      |-- EventMonthItem            五周、月视图事项的组件
      |-- MultipleWeek              两周视图组件（包括两周视图事项）
      |-- FiveWeek                  五周视图组件
      |-- Week                      一周视图组件
      |-- EventForm                 表单组件：创建编辑的表单组件 
      |-- theme                     主题设置
      |-- lib                       工具集
         |-- config                    基础数据设置
         |-- lunar                     农历数据
         |-- event                     事件数据工具
         |-- calendar                  日历数据
         |-- scroll                    滚动条
         |-- utils                     数据工具
```