场景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']
}
网友评论