场景1. switch 开启、关闭时，都需要一个确认框，点击确认，才会更改状态

微信截图_20211224134536.png

<el-switch v-model="hasEnable" class="captcha-img" :active-value="1" :inactive-value="0" disabled @click.native="tableHasEnableChangeHandler()" />

tableHasEnableChangeHandler() {
            this.$confirm(
                '您是否确定禁用该功能',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
              // 改状态
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },

场景2.对后台返回的错误信息进行国际化处理

首先在国际化文件中：lang/zh.js 添加后台返回的错误码文件(lang/en.js添加对应的英文)

bgReturnError: {
            '111111': '操作失败',
            '995402': '该功能已绑定产品，需先解绑产品服务再进行编辑',
        }

数据请求成功，但业务报错的情况下，这样处理

 const msg = `productService.bgReturnError[${response.head.code}]`;
                          this.$notify({
                                title: this.$t('productService.msg.failed'),
                                message: this.$t(msg),
                                type: 'error',
                                duration: 2000
                            });

场景3. form表单内，某些元素的检验需要请求后台接口，比如说我遇到的校验功能编码是否重复

data() {
      // 校验函数，不允许输入中文
        const checkNoChineseData = (rule, value, callback) => {
            // 未修改时不进行校验
            if (value === this.tableDialogFormData.dataSource.permissionCode) {
                return callback();
            }
            if (!value) {
                return callback(new Error('必须填写')));
            }
            if (value.length > 45) {
                return callback(new Error('长度在 1 到 45 个字符！')));
            }
            const regBox = {
                regWords: /[\u4E00-\u9FA5]/g
            };
            const result = regBox.regWords.test(value);
            if (!result) {
                this.$service.productService
                    .postPermissionCodeCheck(
                        { permissionCode: value }
                    )
                    .then((response) => {
                        this.dialogLoading = false;
                        if (response.head.code === '000000') {
                            if (response.body === 'false') {
                                return callback();
                            } else {
                                return callback(new Error('功能编码重复')));
                            }
                        } else {
                            return callback(new Error(response.head.message));
                        }
                    }).catch(() => {
                        return callback(new Error(this.$t('连接服务器异常')));
                    });
            } else {
                return callback(new Error('只能输入英文，数字，特殊符号！')));
            }
        };
}

        // 新增权限页面校验规则
            tableFormRules: {
                permissionCode: [
                    {
                        required: true,
                        validator: checkNoChineseData
                    }
                ]
            }

场景4.一个菜单既有列表又有详情

<template>
  <!-- 此处动态控制样式，后续有类似场景可借鉴 -->
  <div :class="dynamicSetStyle ? 'view': 'container'">
    <div v-if="dynamicSetStyle" :class="dynamicSetStyle ? 'container': 'view'">
    <!-- 发布详情 -->
    <div v-if="deatilInfo.isShow" class="container">
      <ser-detail
        :show.sync="deatilInfo.isShow"
        :product-id="deatilInfo.productId"
        :status="deatilInfo.status"
        :product-categorys="productCategorys"
        :product-grade-unit="deatilInfo.productGradeUnit"
        :charge-methods="chargeMethods"
      />
    </div>
  </div>
</template>

<script>
import serDetail from './components/serDetail';
export default {
    name: 'ServiceManage',
    components: { serDetail },
    }
};
</script>

场景5.引入font-awesome图标，图标与文字间距不对

<el-button
              type="primary"
              size="mini"
              class="button table-inner-button"
              @click="handleRelease(row)"
>
        <i class="fa fa-flag-o" aria-hidden="true" />
          {{ $t('productService.serviceManage.publishNew') }}
 </el-button>

<style lang="scss" scoped>
    .fa-flag-o {
          margin-right: 5px;
        }
</style>

场景6. 表格内，第一列与第二列中checkbox有级联关系

image.png

<el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#F5F6FA' }"
      >
        <el-table-column
          :label="$t('productService.serviceManage.functionType')"
        >
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.checked"
              :indeterminate="scope.row.indeterminate"
              @change="handleCheckAllChange(scope.row, $event)"
            >
              {{ scope.row.permissionName }}
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('productService.serviceManage.functionName')"
        >
          <template slot-scope="scope ">
            <el-checkbox v-for="item in scope.row.nodes" :key="item.permissionId" v-model="item.checked" :label="item.permissionName" @change="handleItemCheckChange(scope.row, item, $event)" />
          </template>
        </el-table-column>
      </el-table>

// 功能类型 每个checkbox点击
        handleCheckAllChange(val, checked) {
            if (checked) {
                val.nodes.forEach(v => {
                    v.checked = true;
                });
            } else {
                val.nodes.forEach(v => {
                    v.checked = false;
                });
            }
            this.isIndeterminate = false;
        },
        // 功能名称 每个checkbox点击
        handleItemCheckChange(val, item, checked) {
            if (checked) {
                item.checked = true;
                const allChecked = val.nodes.every(v => {
                    return v.checked === true;
                });
                if (allChecked) {
                    val.checked = true;
                } else {
                    val.checked = false;
                }
            } else {
                item.checked = false;
                val.checked = false;
            }
        }

场景7，方法中请求1依赖请求2的结果(async,await)

// 获取服务详情 编辑时回显数据
        getServiceDetail(productId) {
            const params = {
                productId
            };
            this.$service.productService
                .getServiceDetail(params)
                .then(async(response) => { // async放在这个地方，需注意
                    if (response.head.code === '000000') {
                        const body = response.body;
                        this.formDataInfo = {
                            productName: body.productName,
                            productCode: body.productCode,
                            productCategory: body.productCategory,
                            productType: '',
                            chargeType: body.chargeType
                        };
                        const params = {
                            parentId: body.productCategory
                        };
                        // 优化服务类型先展示数字，再显示文字的问题
                        const typeRes = await this.$service.productService.getProductTypes(params);
                        if (typeRes.head.code === '000000') {
                            this.productTypes = typeRes.body;
                            this.formDataInfo.productType = String(body.productType);
                        }
                    } else {
                        const msg = `productService.bgReturnError[${response.head.code}]`;
                        this.$message({ message: this.$t(msg), type: 'error' });
                    }
                });
        }

场景8.form表单中动态生成某些项，并有校验规则

<el-form
        ref="dataForm"
        :model="formDataInfo"
        :rules="rules"
        label-width="150px"
        size="normal"
        class="dataForm"
      >
        <el-form-item
          :label="$t('productService.serviceManage.ladderPices')"
          prop="productGrades"
        >
          <el-row :gutter="20">
            <el-col :span="8">{{ ladderText }}</el-col>
            <el-col :span="7">{{ $t('productService.serviceManage.detailPices') }}</el-col>
            <el-col :span="6">{{ $t('productService.serviceManage.default') }}</el-col>
          </el-row>
          <div v-for="(item, index) of formDataInfo.productGrades" :key="item.id" class="ladder-price-box">
            <el-form-item class="ladder-box ladder-specil-box" :prop="`productGrades[${index}].grade`" :rules="ladderRules" width="180px">
              <el-input v-model="item.grade" :placeholder="$t('productService.serviceManage.placeholder.ladder')" type="text" @input="ladderInput(index)" />
            </el-form-item>
            <el-form-item class="ladder-box ladder-specil-box" :prop="`productGrades[${index}].price`" :rules="priceRules">
              <el-input v-model="item.price" :placeholder="$t('productService.serviceManage.placeholder.pices')" type="text" />
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>

// 阶梯校验规则
            ladderRules: {
                required: true,
                validator: checkLadder,
                trigger: ['blur']
            },
            // 价格校验规则
            priceRules: {
                required: true,
                validator: checkProductGrades,
                trigger: ['blur', 'change']
            }