后台基本开发规范

后台开发规范

查询条件

1. 统一使用如下组件封装查询条件，一般的查询完全够用，如若不够，可自行扩展搜索

   // 普通搜索
   ./components/SearchForm/ordinary.vue
   // 高级搜索
   ./components/SearchForm/senior.vue

   组件使用方式如下

   
   // 1.引入组件
   import OrdinarySearchForm from '@/components/SearchForm/ordinary.vue';
   import SeniorSearchForm from '@/components/SearchForm/senior.vue';
   // 2.封装参数
   private searchOrdinaryOption = [
    {
      label: this.$t('adminApp.productRules.name'),
      prop: 'name',
      element: 'input',
      option: {
        maxlength: 19
      }
    },
    {
      label: this.$t('adminApp.productRules.status'),
      prop: 'status',
      element: 'select',
      selectOption: this.statusList  // 下拉数据，如果是异步数据需重新赋值
    },
   ];

private searchSeniorOption = [ { label: this.$t('adminApp.productRules.name'), prop: 'name', element: 'input', option: { maxlength: 50 }, isSort: false, type: 'string' }, { label: this.$t('adminApp.productRules.status'), prop: 'status', element: 'select', option: {}, selectOption: this.statusList }, ]; // 3.使用组件

列表字段的摆放

1. 如果列表字段较多，每个字段必须加上宽度大小并使用横向滚动条，不能都挤在一起；图例
2. 如果列表字段少于10个（可根据名称长度自行判断），可不加宽度，自适应宽度；图例
3. 如果字段长度固定，可居中对齐，反之靠左对齐；
4. 如果列表字段较多，操作一栏需固定右侧，不允许拖动滚动条才能看到操作；
5. 操作一栏最多放2个按钮，其余操作放在更多操作里面；
6. 列表数据较多时，可设置列表高度，严格上不允许出现浏览器滚动条；图例

   <vxe-table
    height="550"
   >

表单规则

1. 简单表单使用弹窗，弹窗宽度设置为 768，内容可一行摆放 2 个字段，也可以一行摆放 1 个字段，可根据实际需求自行决定；
2. 表单 UI 组件统一使用 ELEMENT UI 组件库；
3. 表单验证统一使用 ELEMENT 的表单验证，不允许弹窗提示验证结果；

   // 验证规则
   private rules = {
    name: [
      {
        required: true,
        message: this.$t("global.valid.input", {
          param: this.$t("adminApp.price.price")
        }),
        trigger: ["blur", "change"]
      }
    ]
   }
   // 表单验证
   (this.$refs.validateForm as Form).validate(async valid => {
    if (valid) {
        // 验证通过
    } else {
        // 验证不通过
    }
   }）

4. 输入框如果只允许输入数字或金额，可使用自定义指令 v-enter-number、v-enter-money 进行输入拦截；

   // 只允许输入数字
   <el-input
    type="text"
    v-enter-number
    placeholder="请输入数字"
    v-model="number"
   >
   </el-input>
   // 只允许输入金额
   <el-input
    type="text"
    v-enter-money
    placeholder="请输入金额"
    v-model="money"
   >
   </el-input>

5. 新增、编辑、查看使用同一个文件，其中查看时，表单中的组件可加入disabled属性禁止编辑保存；
6. 复杂的表单需增加路由打开新页面进行增加、编辑、查看；图例

权限控制规则

1. 后台权限控制是通过自定义指令 v-permission 来控制元素的显隐的，主要控制元素的 display 属性；

   <vxe-button
    v-permission="['permission_code']"
   </vxe-button>

2. 后台角色的控制可通过自定义指令 v-siteCode 来控制元素的显隐；

   此角色在内采分为：平台方（qqtManager）、供应商（qqtSupplierManager）、采购方（qqtPurchaseManager）

   此角色在 B2B2B 分为：平台方（qqtManager）、B2B供应商（qqtSupplierManager）、B2B2B平台方（B2B2BPlatformManager）、B2B2B供应商（B2B2BSupplierManager）

   此角色在聚源池只有：平台方（qqtManager）

   // 内采和聚源池好像只支持了字符串
   <div v-siteCode="'qqtManager'"></div>
   // B2B 可支持数组和字符串
   <div v-siteCode="['qqtManager', 'qqtSupplierManager']"></div>

弹窗规则

1. 成功、警告、错误提示以及二次确认使用 @/utils/index 中的以下方法

   // 引入
   import * as Util from "@/utils/index";
   // 成功
   Util.notifySuccess('成功');
   // 警告
   Util.notifyWarning('警告');
   // 错误
   Util.notifyError('错误');
   // 二次确认，有4个参数，其中 options 和 cancelCallBack 为非必传项
   Util.confirm.call(this, '确认删除吗？', async () => {
    del(id).then(res => {
        // 请求成功
    });
    }, 
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'confirm-dialog modal-md',
    }, 
    () => {
        console.log('取消按钮');
    });

2. 删除、审核、拒绝、作废、确认、上架、下架等相关操作必须使用二次确认弹窗，其他未提及的操作可自行判断是否使用二次确认弹窗