spang-web

环境和依赖

----
- node
- yarn
- webpack
- eslint
- @vue/cli ~3
- ant-design-vue - Ant Design Of Vue 实现
- vue-cropper - 头像裁剪组件
- @antv/g2 - Alipay AntV 数据可视化图表
- Viser-vue - antv/g2 封装实现

项目下载和运行

----

- 拉取项目代码
``bash
git clone https://codeup.aliyun.com/spangchem/spang-web.git
cd spang-web
`

- 安装依赖
`
yarn install
`

- 开发模式运行
`
yarn run serve
`

- 编译项目
`
yarn run build
`

- Lints and fixes files
`
yarn run lint
`

其他说明

----

- 项目使用的 vue-cli3, 请确保你所使用的 vue-cli 是新版，并且已经学习 cli 官方文档使用教程

- 关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码, vue.config.js 下的 lintOnSave 值改为 false

- 组件按需加载 /src/main.js L14 相关代码 import './core/lazy_use' / import './core/use'

- 修改 Ant Design 配色 (@kokoroli)

- I18n: 多语言支持 (@musnow)

- 生成环境默认不加载 mock，更多详情请看 src/mock/index.js

浏览器兼容

Modern browsers and IE10.

|
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
| --- | --- | --- | --- | --- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

智慧安监

1、简单表格

- 使用src/components/CommonFormModal/CommonFormModal.vue组件
- 表格生成规则使用http://www.form-create.com/designer/生成
- form-create文档地址：http://www.form-create.com/v2/guide/
- 可参考src/views/safety/observation/Meeting.vue安全会议界面

2、公共组件说明
- 人员选择下拉框src/views/safety/components/PersonListSelect.vue
属性：
参考具体组件
事件：
change({id, person})
- 部门选择下拉框src/views/safety/components/DepartmentSelect.vue
属性：
参考具体组件
事件：
change({id, label})
- 文件上传
src/components/UploadFile/index.vue
``
例如src/views/safety/contractor/LawlessRecordModal.vue文件中的示例：
accept=".jpg, .jpeg, .png"
:fileList="localePhotos"
:upload-result="(fileJson, resp) => handleUpload(fileJson, resp, 'localePhotos')"
:removePro="(file) => removeFile(file, 'localePhotos')"
listType="picture-card"
:disabled="disabled"
/>
``
参数说明
1. fileList默认展示的文件列表
2. uploadResult上传成功后的回调
3. removePro删除文件列表里的某个文件
4. 其他参数参考Ant Design文件上传组件

- 数据展示模态框
src/views/safety/components/DescriptionsModal.vue
针对没有新增编辑功能，直接查看数据详情的页面
- 树型结构下拉框
src/components/FormCreate/FormTreeSelect.vue
- 人员选择模态框
src/views/safety/task/component/PersonSelectModal.vue
- 带证书的人员选择模态框
src/views/safety/task/component/CertificatePersonSelectModal.vue

3、下拉框字典数据调用
- this.getDict('DICT_KEY') DICT_KEY为字典的key值，参考后端给的字典说明文档传值

4、API调用方式说明
- 所有API接口统一调用src/api/common.js文件中的方法，具体方法说明参考文件中注释
- 所有的接口已挂载在VUE原型上，调用时直接用this.XXX调用
- 在src/api/文件夹中新建具体模块的url文件，存入相应后台接口的url
``
import ApiURLs from '@/api/urls'
this.getById(ApiURLs.meeting, id).then(({ data, success }) => {
if (success) {
....
}
})
```