---- - node - yarn - webpack - eslint - @vue/cli ~3 - [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现 - [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件 - [@antv/g2](https://antv.alipay.com/z
npm install spang-webbash
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) {
....
}
})
```