spang-web v1.0.0

环境和依赖

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

项目下载和运行

• 拉取项目代码

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.

智慧安监

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文件中的示例：
  <upload-file
    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) {
     ....
  }
})