初始化
This commit is contained in:
qsh
252
src/views/MiniMall/Product/add.vue
Normal file
252
src/views/MiniMall/Product/add.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<el-tabs v-model="tabName" type="border-card" tab-position="top">
|
||||
<el-tab-pane label="商品信息" name="basic">
|
||||
<el-form :model="form" ref="spuForm" :rules="rules" label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="分类" prop="category">
|
||||
<el-input v-model="form.category" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="form.brand" placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="产品简介" prop="intro">
|
||||
<el-input
|
||||
v-model="form.intro"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4 }"
|
||||
placeholder="请输入产品简介"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="主图" prop="picUrl">
|
||||
<UploadImg v-model="form.picUrl" height="100px" width="100px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item label="轮播图" prop="sliderPicUrls">
|
||||
<UploadImgs v-model:modelValue="form.sliderPicUrls" height="100px" width="100px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item label="商品规格">
|
||||
<el-button @click="handleAddSpec">添加规格</el-button>
|
||||
<el-col v-for="(item, index) in form.specsList" :key="index">
|
||||
<div>
|
||||
<el-text class="mx-1">属性名：</el-text>
|
||||
<el-tag class="mx-1" closable type="success" @close="handleCloseProperty(index)"
|
||||
>{{ item.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-text class="mx-1">属性值：</el-text>
|
||||
<el-tag
|
||||
v-for="(value, valueIndex) in item.values"
|
||||
:key="value.id"
|
||||
class="mx-1"
|
||||
closable
|
||||
@close="handleCloseValue(index, valueIndex)"
|
||||
>
|
||||
{{ value.name }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-show="inputVisible(index)"
|
||||
:id="`input${index}`"
|
||||
:ref="setInputRef"
|
||||
v-model="inputValue"
|
||||
class="!w-20"
|
||||
size="small"
|
||||
@blur="handleInputConfirm(index, item.id)"
|
||||
@keyup.enter="handleInputConfirm(index, item.id)"
|
||||
/>
|
||||
<el-button
|
||||
v-show="!inputVisible(index)"
|
||||
class="button-new-tag ml-1"
|
||||
size="small"
|
||||
@click="showInput(index)"
|
||||
>
|
||||
+ 添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-divider class="my-10px" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-table :data="form.skuList">
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column prop="specsName" label="规格名称">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.specsName" placeholder="请输入" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="col in form.specsList"
|
||||
:prop="col.id"
|
||||
:key="col.id"
|
||||
:label="col.name"
|
||||
/>
|
||||
<el-table-column prop="price" label="销售价">
|
||||
<template #default="{ row }">
|
||||
<el-input-number v-model="row.price" :min="0.01" :step="1" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="intro" label="简介">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.intro" placeholder="请输入简介" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="mt-20px flex justify-center">
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
<el-button plain>重置</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="详细信息" name="detail">
|
||||
<Editor v-model:modelValue="form.description" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="form.specsList" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ProductAttributesAddForm from './Comp/ProductAttributesAddForm.vue'
|
||||
const route = useRoute()
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const tabName = ref('basic')
|
||||
const form = ref({
|
||||
name: '',
|
||||
category: '',
|
||||
brand: '',
|
||||
intro: '',
|
||||
picUrl: '',
|
||||
sliderPicUrls: [],
|
||||
specsList: [],
|
||||
skuList: [],
|
||||
description: null
|
||||
})
|
||||
const rules = ref({})
|
||||
const attributesAddFormRef = ref() // 添加商品属性表单
|
||||
|
||||
/** 删除属性*/
|
||||
function handleCloseProperty(index) {
|
||||
form.value.specsList?.splice(index, 1)
|
||||
}
|
||||
|
||||
const attributeIndex = ref(null)
|
||||
// 输入框显隐控制
|
||||
const inputVisible = computed(() => (index) => {
|
||||
if (attributeIndex.value === null) return false
|
||||
if (attributeIndex.value === index) return true
|
||||
})
|
||||
|
||||
const inputValue = ref('') // 输入框值
|
||||
/** 输入框失去焦点或点击回车时触发 */
|
||||
async function handleInputConfirm(index, propertyId) {
|
||||
if (inputValue.value) {
|
||||
// 保存属性值
|
||||
try {
|
||||
// const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
|
||||
const id = propertyId || parseInt(Math.random() * 1000000)
|
||||
form.value.specsList[index].values.push({ id, name: inputValue.value })
|
||||
message.success('添加成功')
|
||||
} catch {
|
||||
message.error('添加失败，请重试')
|
||||
}
|
||||
}
|
||||
attributeIndex.value = null
|
||||
inputValue.value = ''
|
||||
form.value.skuList = getTableList()
|
||||
}
|
||||
|
||||
function getTableList() {
|
||||
let list = []
|
||||
form.value.specsList.map((item) => {
|
||||
if (!list.length) {
|
||||
item.values.map((it) => {
|
||||
const obj = {}
|
||||
obj[it.id] = it.name
|
||||
list.push(obj)
|
||||
})
|
||||
} else {
|
||||
item.values.map((it, index) => {
|
||||
if (index < list.length) {
|
||||
list[index][it.id] = it.name
|
||||
} else {
|
||||
const obj = {}
|
||||
obj[it.id] = it.name
|
||||
list.push(obj)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
const inputRef = ref([]) //标签输入框Ref
|
||||
/** 显示输入框并获取焦点 */
|
||||
const showInput = async (index) => {
|
||||
attributeIndex.value = index
|
||||
inputRef.value[index].focus()
|
||||
}
|
||||
|
||||
/** 解决 ref 在 v-for 中的获取问题*/
|
||||
const setInputRef = (el) => {
|
||||
if (el === null || typeof el === 'undefined') return
|
||||
// 如果不存在id相同的元素才添加
|
||||
if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
|
||||
inputRef.value.push(el)
|
||||
}
|
||||
}
|
||||
|
||||
function handleAddSpec() {
|
||||
const id = parseInt(Math.random() * 1000)
|
||||
form.value.specsList.push({ name: `测试规格${id}`, id, values: [] })
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
message.success('保存成功！')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query?.id) {
|
||||
form.value = {
|
||||
name: '商品名称哦~'
|
||||
}
|
||||
} else {
|
||||
form.value = {
|
||||
name: '',
|
||||
category: '',
|
||||
brand: '',
|
||||
intro: '',
|
||||
picUrl: '',
|
||||
sliderPicUrls: [],
|
||||
specsList: [],
|
||||
skuList: [],
|
||||
description: null
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user