# vue3-webgis

**Repository Path**: SunBaTian_admin/vue3-webgis

## Basic Information

- **Project Name**: vue3-webgis
- **Description**: 用于学习vue3框架，以及WebGIS框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-22
- **Last Updated**: 2025-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# **项目模板开发手册**

## **一、运行基础环境**

```
node版本号推荐使用16.13.1
```
```
技术选型：
vue3 + vite + js + pinia + vue-router + sass + mitt
```

## **二、目录结构**

```
|-- dist: 项目打包生成路径1
|-- node_modules: 存放下载依赖的文件夹
|-- public: 存放静态文件
    |-- fonts: 存放字体文件
    |-- images: 存放图片
    |-- styles: 存放全局样式
    |-- template: 导入导出模版
    |-- index.html: 主页面文件
    |-- favicon.png: 在浏览器上显示的图标
|-- src: 源码文件夹
    |-- api: 后台api接口
    |-- assets: 存放组件中的静态资源图片
    |-- components: 存放一些公共组件
    |-- layout: 页面布局组件
    |-- configs: 存放一些静态配置文件
    |-- directives: 存放自定义指令
    |-- libs: 库函数或模块
    |-- utils: 工具或函数
    |-- mock: 存放一些模拟数据
    |-- router: 存放路由配置信息
    |-- stores: 存放公共状态 vuex
    |-- styles: 存放公共样式css|scss
    |-- views: 存放所有的路由组件
    |-- App.vue: 应用根主组件
    |-- main.js: 应用入口 js
    |-- style.css: 全局样式
|-- .env.development: 开发环境
|-- .env.production: 生产打包环境
|-- .env.test: 测试打包环境
|-- .eslintignore: eslint忽略配置
|-- .eslintrc.js: eslint相关配置
|-- .gitignore: git 版本管制忽略的配置
|-- .npmrc: npm 仓库配置
|-- .prettierrc: prettier代码格式化配置
|-- .stylelintignore: stylelint代码格式化忽略配置
|-- .stylelintrc.js: stylelint代码格式化配置
|-- index.html: 网页入口
|-- package.json: 项目基本信息,包依赖配置信息等
|-- vite.config.js: vite脚手架配置文件
|-- README.md: 项目描述说明的 readme 文件
```

## **三、运行打包**

### **1、安装项目依赖**

```
npm install 或者 npm i
```

### **2、配置多环境系统常量**

#### 修改 development、production、test 环境下后端服务地址

```
#minio服务
VUE_APP_MINIO_URI=http://*****:9002/map-interactive/
#系统业务地址
VUE_APP_BASE_URI=
#地图样式
VUE_APP_MAP_STYLE_URI=
```

### **3、编译运行开发环境**

```
npm run serve
```

### **4、编译打包生产环境**

```
npm run build
```

### **5、编译打包测试环境**

```
npm run test
```

### **6、代码校验和修复**

```
npm run eslint
```
### **7、代码样式校验和修复**

```
npm run stylelint
```

## **四、模板使用示例**

### **1、组件间通信**

```js
// 发送消息
proxy.eventBus.emit('collapse-content', isCollapse.value);
// 接收消息
proxy.eventBus.on('collapse-content', (data) => {
  isCollapse.value = data;
});
```

### **2、图片引用**

```vue
// 图片文件存放在@/assets/images目录下，且文件名称具有唯一性
<img :src="pics['404']"/>
```

### **3、API 引用**

```js
// 引用api
import API from '@/api/index.js';
Vue.prototype.API = API;
```

#### **（1）API 配置实例-GET**

##### 配置

```
// get transferMode默认传参在param(可不写该参数),可以通过修改transferMode值path、body实现
{
  name: 'getAppDetail',
  url: '/v1/app',
  method: METHODS_ENUM.GET,
}
```

##### 调用

```js
this.API.getAppDetail({
  data: { id },
})
  .then((res) => {
    if (res.code == 200) {}
  });
```

#### **（2）API 配置实例-POST**

##### 配置

```
// post transferMode默认传参在body(可不写该参数),可以通过修改transferMode值param实现
{
    name: 'addAppInfo',
    url: '/v1/app',
    method: METHODS_ENUM.POST
},

```

##### 调用

```
this.API.addAppInfo({
  data: ***,
  }).then((res) => {
  if (res.code == 200) {
  }
})
```

#### **（3）API 配置实例-PUT**

##### 配置

```
// put transferMode默认传参在body(可不写该参数),可以通过修改transferMode值param实现
{
  name: 'appInfoUpdate',
  url: '/v1/app',
  method: 'put'
},
```

##### 调用

```
this.API.appInfoUpdate({
  data: ***,
  }).then((res) => {
  if (res.code == 200) {
  }
})
```

#### **（4）API 配置实例-DELETE**

##### 配置

```
// delete transferMode默认传参在path(可不写该参数),可以通过修改transferMode值param、body实现
{
  name: 'appDetailDelete',
  url: '/v1/app',
  method: 'delete'
},
```

##### 调用

```
this.API.appDetailDelete({
  data: ***,
  }).then((res) => {
  if (res.code == 200) {
  }
})
```

#### **（5）API 配置实例-动态**

##### 配置

```
动态服务统一调用dynamicAPI
// 动态地址请求
{
  name: 'dynamicAPI',
  url: '',
  method: '',
},
```

##### 调用

```
this.API.dynamicAPI({
  dynamicUrl: `/jcrud/${this.apiCode}/page`,
  dynamicMethod: METHODS_ENUM.GET,
  data: data,
});
```

#### **（6）API 配置实例-form 表单**

##### 配置

```
{
  name: 'authOauthToken',
  url: '/oauth/token',
  method: METHODS_ENUM.POST
},
```

##### 调用

```js
let fd = new FormData();
fd.append('grant_type', 'password');
fd.append('username', this.login.user);
fd.append('randomStr', uuidv4());
this.API.authOauthToken({
  data: fd,
}).then(({ code, data, message }) => {
  if (code !== 200) {}
});
```

#### **（7）API 配置实例-文件下载**

##### 配置

```
{
  name: 'exportUserAPI',
  url: `/admin/user/export`,
  method: METHODS_ENUM.GET,
  resType: RES_TYPE_ENUM.ARRAYBUFFER
},
```

##### 调用

```js
this.API.exportUserAPI({ data: this.params });
```
### **4、value2Name 字典表值转换成名称**
```js
value2Name(options, val, key = 'value', show = 'label')
```
### **5、加密或解密方法**

### sm2Encryption sm2加密
```js
sm2Encryption(str)
```
### sm2Decryption sm2解密
```js
sm2Decryption(str)
```
### sm3Encryption sm3加密
```js
sm3Encryption(str)
```

## **六、内置组件说明**
[//]: # (业务型组件)

[//]: # (通用型组件)

---
**二次封装el-select，单选时可添加全选选项**

---
**props**

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 绑定值 | String / Array | - | - |
| code | 调用字典接口内参数 | String | - | - |
| [props](#MxDictSelect-props) | 配置选项，具体见下表 | Object | - | {value: 'value', label: 'label'} |
| options | 选择下拉数据 | Array | - | [] |
| placeholder | 占位符 | String | - | 请选择 |
| multiple | 是否多选 | Boolean | - | false |
| multipleLimit | 多选时用户最多可以选择的项目数，为 0 则不限制 | Number | - | 3 |
| collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | - | false |
| clearable | 是否可以清空选项 | Boolean | - | true |
| filterable | 是否可搜索 | Boolean | - | true |
| includeAll | 是否添加全选选项 | Boolean | - | false |
| disabled | 是否禁用 | Boolean | - | false |

#### MxDictSelect **props**

---
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 选择值 | String |	- | 'value' |
| label | 选择名称 | String |	- | 'label' |

---
**events**

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | 
| change | 选中值发生变化时触发 | 目前的选中值 |

---
**示例：**
```vue
<el-form-item label="dict-select示例">
  <MxDictSelect
    :code="dict.groupCode"
    :value.sync="formData.dicSelectValue"
    placeholder="请选择学历"
    multiple
    :multipleLimit="5"
    collapseTags
    includeAll
    @change="dictSelectChange"
  ></MxDictSelect>
</el-form-item>
```
---

### **MxDivider 分割线组件**

---
**内置默认插槽**

---
**props**
无
---
**events**
无
---
**示例：**
```vue
<MxDivider>
  <span class="title-style">通用型组件</span>
</MxDivider>
```

---

### **MxEllipsis 省略文字组件**

---

**可配置省略文字组件，需要配置组件宽度**

---

**props**

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| rowNum | 显示文字行数 | Number | - | 1 |
| text | 鼠标悬停显示的信息 | String | - | - |
| width | 宽度 | Number/String | - | '100%' |

---

**events**
无

---
**示例：**
 
```vue
<el-form-item label="省略号示例">
  <mx-ellipsis 
    width="100%" 
    :rowNum="5" 
    :text="text"
  ></mx-ellipsis>
</el-form-item>
```

---

### **pagination 分页组件**

---

**二次封装el-pagination**

---

**props**

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| total | (必填)总条目数 | Number | - | - |
| page | 当前页数 | Number | - | 1 |
| limit | 每页显示条目个数 | Number | - | 20 |
| pageSizes | 每页显示个数选择器的选项设置 | number[] | - | [15, 30, 50, 100] |
| layout | 组件布局，子组件名用逗号分隔 | String | - | 'total, sizes, prev, pager, next, jumper' |
| background | 是否为分页按钮添加背景色 | Boolean | - | true |
| autoScroll | 是否开启自动滚动 | Boolean | - | true |
| hidden | 是否隐藏分页组件 | Boolean | - | false |

---

**events**

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | 
| pagination | 修改数据时调用表格数据 | {page: currentPage, limit: pageSize}|

---

**示例：**

```vue
<pagination
  :total="total"
  :page.sync="page.current"
  :limit.sync="page.size"
  @pagination="handleQuery"
></pagination>
```

---

### **MxSelect 选择组件**

---

**二次封装el-select，单选时可添加全选选项**

---

**props**

| 参数 | 说明 | 类型 | 可选值 | 默认值                              |
| --- | --- | --- | --- |----------------------------------|
| value | 绑定值 | String / Array | - | -                                |
| apiName | 获取数据接口名称 | String | - | -                                |
| params | 接口参数 | String / Object | - | -                                |
| [props](#MxSelect-props) | 配置选项，具体见下表 | Object | - | {value: 'value', label: 'label'} |
| options | 选择下拉数据 | Array | - | []                               |
| placeholder | 占位符 | String | - | 请选择                              |
| multiple | 是否多选 | Boolean | - | false                            |
| multipleLimit | 多选时用户最多可以选择的项目数，为 0 则不限制 | Number | - | 3                                |
| collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | - | false                            |
| clearable | 是否可以清空选项 | Boolean | - | true                             |
| filterable | 是否可搜索 | Boolean | - | true                             |
| includeAll | 是否添加全选选项 | Boolean | - | false                            |
| disabled | 是否禁用 | Boolean | - | false                            |

#### MxSelect **props**

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 选择值 | String |	- | 'value' |
| label | 选择名称 | String |	- | 'label' |

---

**events**

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | 
| change | 选中值发生变化时触发 | 目前的选中值 |

---

**示例：**

```vue
<el-form-item label="mx-select示例">
  <MxSelect
    apiName="dictGroupList"
    :params="commonParams"
    :props="commonProps"
    :value.sync="formData.commonSelectValue"
    placeholder="请选择组织类别"
    multiple
    :multipleLimit="5"
    collapseTags
    includeAll
    @change="commonSelectChange"
  ></MxSelect>
</el-form-item>
```

---

### **MxTagTooltips tag tooltips显示组件**

---

**显示tag的tooltips**

---

**props**

| 参数 | 说明 | 类型 | 默认值 | 
| --- | --- | --- | --- | 
| list | 要显示的列表数据 | Array | [] | 
| showKey | 显示的字段名 | String | '' | 
| width | 容器的最大宽度 | String | '80%' | 
| align | 对齐方式（flex） | String | '' | 
| firstPlace | 第一个元素的提示位置 | String | 'top' | 
| listPlace | 剩余元素的提示位置 | String | 'right' |

---

**events**
无

---

**示例：**

```vue
<el-form-item label="tag-tooltips示例">
  <MxTagTooltips 
    :list="tagList" 
    showKey="name" 
    width="100%" 
    align="flex-start" 
    firstPlace="top" 
    listPlace="right"
  ></MxTagTooltips>
</el-form-item>
```

---