style: 全局代码格式化
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
@@ -1,144 +1,178 @@
|
||||
<template>
|
||||
<div class="component-container">
|
||||
<div class="component-container__main">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<span>商品属性</span>
|
||||
<el-button style="float: right" type="success" :icon="Plus" size="small" @click="handleAdd">
|
||||
添加属性
|
||||
</el-button>
|
||||
</template>
|
||||
<el-form ref="dataFormRef" :model="goodsInfo" :rules="rules" size="small" :inline="true">
|
||||
<el-table :data="goodsInfo.attrList" size="small" highlight-current-row border>
|
||||
<el-table-column property="name" label="属性名称">
|
||||
<template #default="scope">
|
||||
<el-form-item :prop="'attrList[' + scope.$index + '].name'" :rules="rules.name">
|
||||
<el-input v-model="scope.row.name" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<div class="component-container">
|
||||
<div class="component-container__main">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<span>商品属性</span>
|
||||
<el-button
|
||||
style="float: right"
|
||||
type="success"
|
||||
:icon="Plus"
|
||||
size="small"
|
||||
@click="handleAdd"
|
||||
>
|
||||
添加属性
|
||||
</el-button>
|
||||
</template>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="goodsInfo"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
:inline="true"
|
||||
>
|
||||
<el-table
|
||||
:data="goodsInfo.attrList"
|
||||
size="small"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column property="name" label="属性名称">
|
||||
<template #default="scope">
|
||||
<el-form-item
|
||||
:prop="'attrList[' + scope.$index + '].name'"
|
||||
:rules="rules.name"
|
||||
>
|
||||
<el-input v-model="scope.row.name" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="value" label="属性值">
|
||||
<template #default="scope">
|
||||
<el-form-item :prop="'attrList[' + scope.$index + '].value'" :rules="rules.value">
|
||||
<el-input v-model="scope.row.value" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="value" label="属性值">
|
||||
<template #default="scope">
|
||||
<el-form-item
|
||||
:prop="'attrList[' + scope.$index + '].value'"
|
||||
:rules="rules.value"
|
||||
>
|
||||
<el-input v-model="scope.row.value" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-form-item>
|
||||
<el-button v-if="scope.$index > 0" type="danger" :icon="Minus" size="small" circle plain
|
||||
@click.stop="handleRemove(scope.$index)" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="component-container__footer">
|
||||
<el-button @click="handlePrev">上一步，填写商品信息</el-button>
|
||||
<el-button type="primary" @click="handleNext">下一步，设置商品库存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
v-if="scope.$index > 0"
|
||||
type="danger"
|
||||
:icon="Minus"
|
||||
size="small"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleRemove(scope.$index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="component-container__footer">
|
||||
<el-button @click="handlePrev">上一步，填写商品信息</el-button>
|
||||
<el-button type="primary" @click="handleNext"
|
||||
>下一步，设置商品库存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, toRefs, watch } from "vue";
|
||||
import { listAttributes } from "@/api/pms/attribute";
|
||||
import { ElForm } from "element-plus";
|
||||
import { Plus, Minus } from "@element-plus/icons-vue";
|
||||
import { computed, reactive, ref, toRefs, watch } from 'vue';
|
||||
import { listAttributes } from '@/api/pms/attribute';
|
||||
import { ElForm } from 'element-plus';
|
||||
import { Plus, Minus } from '@element-plus/icons-vue';
|
||||
|
||||
const emit = defineEmits(["prev", "next", "update:modelValue"]);
|
||||
const emit = defineEmits(['prev', 'next', 'update:modelValue']);
|
||||
const dataFormRef = ref(ElForm);
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const goodsInfo: any = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
get: () => props.modelValue,
|
||||
set: value => {
|
||||
emit('update:modelValue', value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => goodsInfo.value.categoryId, (newVal) => {
|
||||
// 商品编辑不加载分类下的属性
|
||||
const goodsId = goodsInfo.value.id;
|
||||
if (goodsId) {
|
||||
return false;
|
||||
}
|
||||
// 商品新增加载默认分类下的属性
|
||||
if (newVal) {
|
||||
// type=2 商品分类下的属性
|
||||
listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
|
||||
const attrList = response.data;
|
||||
if (attrList && attrList.length > 0) {
|
||||
goodsInfo.value.attrList = attrList;
|
||||
} else {
|
||||
goodsInfo.value.attrList = [{}];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
goodsInfo.value.attrList = [{}];
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
})
|
||||
watch(
|
||||
() => goodsInfo.value.categoryId,
|
||||
newVal => {
|
||||
// 商品编辑不加载分类下的属性
|
||||
const goodsId = goodsInfo.value.id;
|
||||
if (goodsId) {
|
||||
return false;
|
||||
}
|
||||
// 商品新增加载默认分类下的属性
|
||||
if (newVal) {
|
||||
// type=2 商品分类下的属性
|
||||
listAttributes({ categoryId: newVal, type: 2 }).then(response => {
|
||||
const attrList = response.data;
|
||||
if (attrList && attrList.length > 0) {
|
||||
goodsInfo.value.attrList = attrList;
|
||||
} else {
|
||||
goodsInfo.value.attrList = [{}];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
goodsInfo.value.attrList = [{}];
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
rules: {
|
||||
name: [{ required: true, message: "请填写属性名称", trigger: "blur" }],
|
||||
value: [{ required: true, message: "请填写属性值", trigger: "blur" }],
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请填写属性名称', trigger: 'blur' }],
|
||||
value: [{ required: true, message: '请填写属性值', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { rules } = toRefs(state);
|
||||
|
||||
function handleAdd() {
|
||||
goodsInfo.value.attrList.push({});
|
||||
goodsInfo.value.attrList.push({});
|
||||
}
|
||||
|
||||
function handleRemove(index: number) {
|
||||
goodsInfo.value.attrList.splice(index, 1);
|
||||
goodsInfo.value.attrList.splice(index, 1);
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
emit("prev");
|
||||
emit('prev');
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
emit("next");
|
||||
}
|
||||
});
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
emit('next');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-container {
|
||||
&__main {
|
||||
margin: 20px auto;
|
||||
}
|
||||
&__main {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
&__footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item--mini.el-form-item {
|
||||
margin-top: 18px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user