优化后台编辑商品属性为空验证

This commit is contained in:
pushuo 2023-01-09 15:52:53 +08:00
parent 17e2af1e2a
commit 4a423b7500
3 changed files with 32 additions and 6 deletions

View File

@ -224,3 +224,11 @@ table.table {
max-width: 560px;
}
.error-invalid-input {
border-color: #dc3545;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

View File

@ -21,13 +21,23 @@ $(function () {
}
form.classList.add("was-validated");
$('.nav-link, .nav-item').removeClass('error-invalid');
// 如果错误输入框在 tab 页面,则高亮显示对应的选项卡
$('.invalid-feedback').each(function(index, el) {
if ($(el).css('display') == 'block' && $(el).parents('.tab-pane')) {
const id = $(el).parents('.tab-pane').prop('id');
if ($(el).css('display') == 'block') {
// 兼容使用 element ui input、autocomplete 组件在传统提交报错ui显示
if ($(el).siblings('div[class^="el-"]')) {
console.log(11)
$(el).siblings('div[class^="el-"]').find('.el-input__inner').addClass('error-invalid-input')
}
$(`a[href="#${id}"], button[data-bs-target="#${id}"]`).addClass('error-invalid');
if ($(el).parents('.tab-pane')) {
const id = $(el).parents('.tab-pane').prop('id');
$(`a[href="#${id}"], button[data-bs-target="#${id}"]`).addClass('error-invalid');
}
}
});
},

View File

@ -102,7 +102,7 @@
<h5 class="border-bottom pb-3 mb-4">{{ __('admin/product.stocks') }}</h5>
<x-admin::form.row :title="__('admin/product.enable_multi_spec')">
<el-switch v-model="editing.isVariable" class="mt-2"></el-switch>
<el-switch v-model="editing.isVariable" @change="isVariableChange" class="mt-2"></el-switch>
</x-admin::form.row>
<input type="hidden" name="variables" :value="JSON.stringify(form.variables)">
@ -291,7 +291,8 @@
size="small"
@select="(e) => {attributeHandleSelect(e, index, 'attribute')}"
></el-autocomplete>
<input type="text" :name="'attributes['+ index +'][attribute_id]'" v-model="item.attribute.id" class="form-control d-none">
<input type="text" required :name="'attributes['+ index +'][attribute_id]'" v-model="item.attribute.id" class="form-control d-none">
<div class="invalid-feedback">{{ __('common.error_required', ['name' => __('admin/attribute.index')]) }}</div>
</td>
<td>
<el-autocomplete
@ -304,7 +305,8 @@
:placeholder="item.attribute.id == '' ? '{{ __('admin/attribute.before_attribute') }}' : '{{ __('admin/builder.modules_keywords_search') }}'"
@select="(e) => {attributeHandleSelect(e, index, 'attribute_value')}"
></el-autocomplete>
<input type="text" :name="'attributes['+ index +'][attribute_value_id]'" v-model="item.attribute_value.id" class="form-control d-none">
<input type="text" required :name="'attributes['+ index +'][attribute_value_id]'" v-model="item.attribute_value.id" class="form-control d-none">
<div class="invalid-feedback">{{ __('common.error_required', ['name' => __('admin/attribute.attribute_value')]) }}</div>
</td>
<td class="text-end">
<i @click="form.attributes.splice(index, 1)" class="bi bi-x-circle fs-4 text-danger cursor-pointer"></i>
@ -554,6 +556,12 @@
this.relations.products.splice(index, 1);
},
isVariableChange(e) {
if (!e) {
this.source.variables = [];
}
},
variantIsImage(e, index) {
if (!e) {
this.source.variables[index].values.forEach(v => {