oms-erp/front-end
wushaochuan f0a2228ca1 init
2022-09-02 17:46:54 +08:00
..
charts/ebc-front commit init code 2022-07-14 17:55:15 +08:00
docker commit front-end 2022-06-20 19:05:29 +08:00
public commit front-end 2022-06-20 19:05:29 +08:00
src init 2022-09-02 17:46:54 +08:00
tests/unit commit front-end 2022-06-20 19:05:29 +08:00
.editorconfig commit front-end 2022-06-20 19:05:29 +08:00
.env.development commit front-end 2022-06-20 19:05:29 +08:00
.env.production commit front-end 2022-06-20 19:05:29 +08:00
.env.qa commit front-end 2022-06-20 19:05:29 +08:00
.env.staging commit front-end 2022-06-20 19:05:29 +08:00
.env.test commit front-end 2022-06-20 19:05:29 +08:00
.env.uat commit front-end 2022-06-20 19:05:29 +08:00
.eslintignore commit front-end 2022-06-20 19:05:29 +08:00
.eslintrc.js commit front-end 2022-06-20 19:05:29 +08:00
.gitignore commit front-end 2022-06-20 19:05:29 +08:00
.gitlab-ci.yml commit front-end 2022-06-20 19:05:29 +08:00
.prettierrc.js commit front-end 2022-06-20 19:05:29 +08:00
.travis.yml commit front-end 2022-06-20 19:05:29 +08:00
babel.config.js commit front-end 2022-06-20 19:05:29 +08:00
fj.png Add files via upload 2022-08-25 22:59:48 +08:00
fjxx.png Add files via upload 2022-08-25 23:01:11 +08:00
getRouter.js commit front-end 2022-06-20 19:05:29 +08:00
gzh.png Add files via upload 2022-08-25 22:33:30 +08:00
jest.config.js commit front-end 2022-06-20 19:05:29 +08:00
jsconfig.json commit front-end 2022-06-20 19:05:29 +08:00
LICENSE commit front-end 2022-06-20 19:05:29 +08:00
package.json commit front-end 2022-06-20 19:05:29 +08:00
plopfile.js commit front-end 2022-06-20 19:05:29 +08:00
postcss.config.js commit front-end 2022-06-20 19:05:29 +08:00
README.md commit front-end 2022-06-20 19:05:29 +08:00
vue.config.js commit front-end 2022-06-20 19:05:29 +08:00
we.png Add files via upload 2022-08-25 22:33:30 +08:00
业务架构.png Add files via upload 2022-08-25 22:33:30 +08:00
云原生.png Add files via upload 2022-08-25 22:33:30 +08:00
夯实数字化基座.png Add files via upload 2022-08-25 22:33:30 +08:00
库存共享.png Add files via upload 2022-08-25 22:33:30 +08:00
开发.png Add files via upload 2022-08-25 22:33:30 +08:00
强大的技术与架构.png Add files via upload 2022-08-25 22:33:30 +08:00
技术支持.png Add files via upload 2022-08-25 22:33:30 +08:00
技术架构.png Add files via upload 2022-08-25 22:33:30 +08:00
测试.png Add files via upload 2022-08-25 22:33:30 +08:00
部署.png Add files via upload 2022-08-25 22:33:30 +08:00

规范

多行查询 /this.cancel({\n.\n.)/

  • 全局 element 组件已经默认 size="mini"
  • 组件名称/文件 大写开头
  • 声明变量必须加上 let 关键字.不要再使用 var
  • const 常量 ,大写 如:PAGE_LIST
  • 禁用、启用、删除等操作,需要弹窗确认
      /** 禁用 */
      onStatus(flag, row) {
        const TEXT = STATUS_ENABLED_NUM.bjGet(flag);
        this.$confirm(`您正在 ${TEXT} ${row.brandName},是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.operationApi({
              ids: [row.id],
              status: flag,
            });
          })
          .catch(() => {});
      },
      /** 删除操作 */
      onDelete(row) {
        this.$confirm(`您正在删除 ${row.brandName},是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.batchDeleteApi({ ids: [row.id] });
          })
          .catch(() => {});
      },
    
  • 列表的状态列,用el-tag展示
    <el-tag v-else-if="col.prop === 'status'" :type="scope.row.status ? 'success' : 'info'"
      >{{ STATUS_ENABLED_NUM.bjGet(scope.row.status) }}</el-tag
    >
    
    • 新增/编辑的内容较少,使用BjDrawerForm弹窗展示,较多内容使用新页面
    • (新增/编辑等)页面的保存确认等按钮,放在右上角,可吸顶
    <BjDivider right-fixed
      >基本信息
      <!--空标题使用<span></span>-->
      <template #right>
        <el-button @click="handleClose">返 回</el-button>
        <el-button type="primary" @click="onPass">确 认</el-button>
      </template>
    </BjDivider>
    
  • 路由命名 以父级路由为前缀,依次向后增长 当前路由名称应与文件路径基本一致 列表页面路由以 Index 结尾 新增页面路由以 Add 结尾 编辑页面路由以 Edit 结尾 详情页面路由以 View 结尾 配置页面路由以 Config 结尾 路由长度默认为四级,前三级为模块菜单,第四级为页面和功能

通用样式

  • bj-label-colon 表单 label 文字加冒号
  • full-width 宽度 100%
  • tips 提示文字,小号,灰色
  • link 模拟链接,蓝色,可点击

组件

列表页面的公共混入

import pageMiXin from '@/utils/page-mixin.js';

BjPage

路径 src\components\BjPage\index.vue 路径 src\components\BjPage\mixin.js

详情页面的公共混入

import viewMiXin from '@/utils/view-mixin.js';

BjDialogList

ScrollLoad

列表滚动加载 packages\ScrollLoad\README.md

ScrollSelect

  • BjImportFile 导入
  • BjDialogList 通用弹窗选择:弹出一个列表,可以搜索
  • BjDivider 分割线
  • BjDrawerForm 右侧弹窗 【新建、编辑】类使用
  • BjSelectLov 下拉选择
  • BjCheckboxLov 复选
  • BjRadioLov 单选
  • BjRouteTabs tab 页的路由跳转头部
  • BjInputMoney 金额 input
  • ScrollSelect 支持 滚动加载、api 搜索 的下拉选择框,
  • BjPagingTable 带分页的表格
  • BjSelectProvinces dialog 弹窗选择中国的省/市
  • BjInputNumber 数量 input 正整数
  • BjSelectChinaArea 下拉选择中国的省/市/区 单独 all type="city" type="area"
  • BjUpload 带缩略图的上传组件
  • BjDialogTable

其它组件

  1. 日期组件 el-date-picker 需要设置
  • class="full-width => 宽度 100%
  • value-format="yyyy-MM-dd"
  1. 下拉选择 尽量使用 BjSelectLov 组件 单选 尽量使用 BjRadioLov 组件 复选 尽量使用 BjCheckboxLov 组件

  2. input 需要设置

  • :maxlength="MAX_LENGTH.DEFAULT"
  • clearable
  1. el-dialog 需要设置
  • :close-on-click-modal="false"
  • :close-on-press-escape="false"

依赖 Node-sass 安装

不使用 Node-sass 会出现图标乱码 Node-sass 版本高于 5.0.0,与会构建失败 使用 原镜像 https://registry.npmjs.org/ 无法下载 5.0.0 以下的 Node-sass 版本

来源知乎

npm config set registry http://registry.npm.taobao.org/

npm config set disturl https://npm.taobao.org/mirrors/node/

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

npm cache clean -f

npm install node-sass@1.14.1