云内控页面规范 ​

一、配置规范 ​

• 要素懒加载 ​

  下拉、树统一懒载，除特殊需求的进行初始化加载，减少要素请求数量

• 树型下拉的使用要求 ​

  • 必选配置：isTransferTree=1
  • 可选配置：treeLeafFlag 1 只选末级 2 可选所有

• NPM 源 ​

  统计使用公司 nexus 私服，详细配置见：NPM 源私服配置文档

• 包管理器统一：yarn ​

  pnpm,yarn 性能上都比 npm 要高，优化了依赖层级及重复依赖问题，gic-web 的依赖版本有部分冲突，导致 pnpm 在添加、移除包时不能同步 package.json，所以统一使用yarn

二、编码要求 ​

• Eslint 规范及警告 ​

  系统配置了符合前端内控需要的 Eslint 规范及校验级别，

  • 对于错误级别禁止编译，
  • 为了开发方便，未禁止警告级别的异常，需要各自处理
  • 示例： 多余变量的申明，引用规范 console.log/debugger 临时性代码的去除

• 魔法值问题 ​

• 空值异常 ​

  js 页面异常在同代码域下，会阻止后面脚本的执行

• await 请求问题 ​

  await 是 es6 中 Promise 的类语法糖，加 await 后，会阻塞 js 的调用，所以

  • ➢ 非有严格的请求依赖，方法使用不加 await
  • ➢ 如果三个以的依赖关联，建议使用 promise.all(fun1,fun2,fun3)

• 前端数据转换处理 ​

  list 转树、要素数据显示格式化等涉及数据处理的，能接口处理的放在接口处理

三、展示层规范 ​

边框及留白 ​

➢ 1 外框、分割线 ​

• main 容器左右 16px,上下 8px

列表及表单按钮 ​

➢ 1 对齐方式 ​

• 金额列右对齐
• 等长的字段居中（序号、状态、操作、统一格式的编码、操作时间、经办人）
• 不等长的文本字段左对齐，默认左对齐

➢ 2 列宽设置 ​

• 固定列：序号：80PX，选择列（多选/单选）：64PX，金额列：136px,操作人：168px
• 时间列：年-月-日：120px,年-月-日 时:分:秒 168px
• 状态列：启停、是否、审核阶段,120PX，超出则以标题文字+左右边距为准
• 其他情况：自动

➢ 3 列表按钮，居左对齐，顺序【主》次》辅助】 ​

4 表单按钮防抖 ​

用于提交类的按钮请求接口后显示加载中的状态，不可点击，默认会加载中 1.5s ,可自己传需要加载多少秒

<!--默认加载1.5s -->
<a-button v-btnLoading type="primary">确定</a-button>
<!--加载3s -->
<a-button v-btnLoading="3" type="primary">确定</a-button>

<!--默认加载1.5s -->
<a-button v-btnLoading type="primary">确定</a-button>
<!--加载3s -->
<a-button v-btnLoading="3" type="primary">确定</a-button>

弹窗 ​

1 增加拖动指令 v-dialogDrag ​

使用 antd 的弹框可以拖拽的指令,v-dialogDrag 放在 ant-modal 下的内容元素上示例：

<a-modal
  class="gic-modal info-modal"
  v-model:visible="modalchooseVisible"
  title="退回意见"
  width="640px"
  :force-render="true"
  @cancel="hideChooseProModal"
  @ok="doBackPurchase"
>
      <template #footer>
        <a-button key="submit" type="primary" @click="doBackPurchase">确定</a-button>
      </template>
      <div class="modal-content" v-dialogDrag>
      </div>
    </a-modal>

<a-modal
  class="gic-modal info-modal"
  v-model:visible="modalchooseVisible"
  title="退回意见"
  width="640px"
  :force-render="true"
  @cancel="hideChooseProModal"
  @ok="doBackPurchase"
>
      <template #footer>
        <a-button key="submit" type="primary" @click="doBackPurchase">确定</a-button>
      </template>
      <div class="modal-content" v-dialogDrag>
      </div>
    </a-modal>

2 快速选择 ​

单选行数据的，增加双击快速确定功能

customRow: (record: any) => {
          return {
            onDblclick: (event: any) => {
              selRows.value = [record];
              modalchooseIdaVisible.value = false;
            },
          };
        },

customRow: (record: any) => {
          return {
            onDblclick: (event: any) => {
              selRows.value = [record];
              modalchooseIdaVisible.value = false;
            },
          };
        },

3 按钮及顺序 ​

• 弹窗按钮，居右对齐，顺序【次《主】