場景1. switch 開啟、關(guān)閉時(shí)，都需要一個(gè)確認(rèn)框，點(diǎn)擊確認(rèn)，才會更改狀態(tài)

微信截圖_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(() => {
              // 改狀態(tài)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },

場景2.對后臺返回的錯(cuò)誤信息進(jìn)行國際化處理

首先在國際化文件中：lang/zh.js 添加后臺返回的錯(cuò)誤碼文件(lang/en.js添加對應(yīng)的英文)

bgReturnError: {
            '111111': '操作失敗',
            '995402': '該功能已綁定產(chǎn)品，需先解綁產(chǎn)品服務(wù)再進(jìn)行編輯',
        }

數(shù)據(jù)請求成功，但業(yè)務(wù)報(bào)錯(cuò)的情況下，這樣處理

 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表單內(nèi)，某些元素的檢驗(yàn)需要請求后臺接口，比如說我遇到的校驗(yàn)功能編碼是否重復(fù)

data() {
      // 校驗(yàn)函數(shù)，不允許輸入中文
        const checkNoChineseData = (rule, value, callback) => {
            // 未修改時(shí)不進(jìn)行校驗(yàn)
            if (value === this.tableDialogFormData.dataSource.permissionCode) {
                return callback();
            }
            if (!value) {
                return callback(new Error('必須填寫')));
            }
            if (value.length > 45) {
                return callback(new Error('長度在 1 到 45 個(gè)字符！')));
            }
            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('功能編碼重復(fù)')));
                            }
                        } else {
                            return callback(new Error(response.head.message));
                        }
                    }).catch(() => {
                        return callback(new Error(this.$t('連接服務(wù)器異常')));
                    });
            } else {
                return callback(new Error('只能輸入英文，數(shù)字，特殊符號！')));
            }
        };
}

        // 新增權(quán)限頁面校驗(yàn)規(guī)則
            tableFormRules: {
                permissionCode: [
                    {
                        required: true,
                        validator: checkNoChineseData
                    }
                ]
            }

場景4.一個(gè)菜單既有列表又有詳情

<template>
  <!-- 此處動態(tài)控制樣式，后續(xù)有類似場景可借鑒 -->
  <div :class="dynamicSetStyle ? 'view': 'container'">
    <div v-if="dynamicSetStyle" :class="dynamicSetStyle ? 'container': 'view'">
    <!-- 發(fā)布詳情 -->
    <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圖標(biāo)，圖標(biāo)與文字間距不對

<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. 表格內(nèi)，第一列與第二列中checkbox有級聯(lián)關(guān)系

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>

// 功能類型 每個(gè)checkbox點(diǎn)擊
        handleCheckAllChange(val, checked) {
            if (checked) {
                val.nodes.forEach(v => {
                    v.checked = true;
                });
            } else {
                val.nodes.forEach(v => {
                    v.checked = false;
                });
            }
            this.isIndeterminate = false;
        },
        // 功能名稱 每個(gè)checkbox點(diǎn)擊
        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的結(jié)果(async,await)

// 獲取服務(wù)詳情 編輯時(shí)回顯數(shù)據(jù)
        getServiceDetail(productId) {
            const params = {
                productId
            };
            this.$service.productService
                .getServiceDetail(params)
                .then(async(response) => { // async放在這個(gè)地方，需注意
                    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
                        };
                        // 優(yōu)化服務(wù)類型先展示數(shù)字，再顯示文字的問題
                        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表單中動態(tài)生成某些項(xiàng)，并有校驗(yàn)規(guī)則

<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>

// 階梯校驗(yàn)規(guī)則
            ladderRules: {
                required: true,
                validator: checkLadder,
                trigger: ['blur']
            },
            // 價(jià)格校驗(yàn)規(guī)則
            priceRules: {
                required: true,
                validator: checkProductGrades,
                trigger: ['blur', 'change']
            }