规范

多行查询 /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

其它组件

日期组件 el-date-picker 需要设置

class="full-width => 宽度 100%
value-format="yyyy-MM-dd"

下拉选择尽量使用 BjSelectLov 组件单选尽量使用 BjRadioLov 组件复选尽量使用 BjCheckboxLov 组件
input 需要设置

:maxlength="MAX_LENGTH.DEFAULT"
clearable

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

4.2 KiB Raw Permalink Blame History

规范