wangyifang
/
yikangyang-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
master
xy 1 year ago
parent 8de4c4636b
commit 85e3d118a7
3 changed files with 893 additions and 594 deletions
Show Stats Download Patch File Download Diff File

1152
src/views/Product/Product.vue
View File

File diff suppressed because it is too large Load Diff

167
src/views/Product/components/AddProduct.vue
Unescape View File

@ -118,13 +118,125 @@
</el-upload>
</el-form-item>
<el-form-item label="商品" prop="product_skus">
<el-input
v-model="form['product_skus']"
clearable
placeholder="请填写商品"
style="width: 100%"
/>
<el-form-item class="span2" label="商品" prop="product_skus">
<div>
<el-button
size="mini"
icon="el-icon-plus"
type="primary"
@click="_ => {
const newRecord = {
name: '',
stock_num: 1,
price: 0.00,
image_id: '',
image: '',
is_default: 0
}
form.product_skus.unshift(newRecord)
$nextTick(_ => {
const $subTable = $refs['subTable']
if ($subTable) {
$subTable.setEditRow(newRecord)
}
})
}"
>新增</el-button>
<vxe-table
ref="subTable"
style="margin-top: 10px;"
stripe
size="small"
border
keep-source
show-overflow
:max-height="300"
:column-config="{ resizable: true }"
:edit-config="{
trigger: 'click',
mode: 'row',
showStatus: false,
isHover: true,
autoClear: false,
}"
:edit-rules="validSubRules"
:data="form.product_skus"
>
<vxe-column type="seq" width="58" align="center" />
<vxe-column
header-align="center"
field="name"
width="160"
title="名称"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
header-align="center"
field="price"
width="160"
title="价格"
:edit-render="{ name: 'input', attrs: { type: 'number' } }"
/>
<vxe-column
header-align="center"
field="stock_num"
width="140"
title="库存"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
field="image_id"
min-width="180"
title="图片"
width="160"
header-align="center"
align="left"
:edit-render="{}"
>
<template #default="{ row: row1 }">
<vxe-upload v-model="row1['image']" single-mode name-field="original_name" readonly progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
</template>
<template #edit="{ row: row1 }">
<vxe-upload
v-model="row1['image']"
single-mode
name-field="original_name"
progress-text="{percent}%"
:more-config="{ maxCount: 1, layout: 'horizontal' }"
:limit-size="uploadSize / 1024 / 1024"
:show-button-text="false"
:upload-method="({file}) => uploadMethod(file)"
/>
</template>
</vxe-column>
<vxe-column
field="is_default"
align="center"
title="是否默认"
width="120"
:edit-render="{
name: 'select',
options: [
{ label: '是', value: 1 },
{ label: '否', value: 0 }
]
}"
/>
<vxe-column field="action" title="操作" width="160" header-align="center">
<template #default="{ row: row1 }">
<el-button
size="mini"
type="danger"
@click="_ => {
$confirm('确认删除？', '提示').then(_ => {
form.product_skus = form.product_skus.filter(i => i !== row1)
})
}"
>删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-form-item>
<el-form-item label="排序" prop="sort">
@ -170,6 +282,10 @@ export default {
productCategory: {
type: Array,
default: () => []
},
uploadMethod: {
type: Function,
default: () => {}
}
},
data() {
@ -180,22 +296,32 @@ export default {
visible: false,
form: {
product_category_id: '',
name: '',
price: 0,
image_id: [],
content: '',
product_images: [],
product_skus: [],
sort: 0
},
rules: {}
rules: {},
validSubRules: {
name: [
{
required: true,
message: '名称' + '必填'
}
]
}
}
},
computed: {
isActiveStatus() {
return function(row, ref = 'table') {
if (this.$refs[ref]) {
return this.$refs[ref].isEditByRow(row)
}
}
}
},
watch: {
@ -276,8 +402,15 @@ export default {
this.form['image_id'] = this.form['image_id'][0]?.response?.id ?? ''
this.form['product_images'] = this.form['product_images']
.map((i) => i.response?.id)
.filter((i) => i)
.map((i, index) => ({
image_id: i.response?.id,
sort: index
}))
.filter((i) => i.image_id)
this.form['product_skus'].forEach(sku => {
sku['image_id'] = (sku['image']?.response?.id || sku['image_id']) ?? ''
delete sku['image']
})
this.$refs['elForm'].validate(async(valid) => {
if (valid) {

168
src/views/Product/components/ShowProduct.vue
Unescape View File

@ -1,98 +1,93 @@
<template>
<div>
<el-drawer
:title="$route.meta.title"
direction="rtl"
size="68%"
:visible.sync="visible"
append-to-body
@close="$emit('update:isShow',false)">
<section class="drawer-container">
<el-descriptions class="drawer-container__desc" size="small" border ref="elDesc" :column="2" direction="vertical" :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }">
<el-descriptions-item label="商品名称">
{{ form['name'] }}
</el-descriptions-item>
<el-descriptions-item label="商品价格">
{{ typeof form['price'] === 'number' ? form['price'].toFixed(2) : form['price'] }}
</el-descriptions-item>
<el-form-item label="封面图片" prop="image_id">
<el-upload
:file-list="form['image_id']"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
</el-upload>
</el-form-item>
<el-descriptions-item label="内容" span="2">
{{ form['content'] }}
</el-descriptions-item>
<el-form-item label="商品轮播图" prop="product_images">
<el-upload
:file-list="form['product_images']"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
</el-upload>
</el-form-item>
<el-descriptions-item label="商品">
{{ form['product_skus'] }}
</el-descriptions-item>
<el-descriptions-item label="排序">
{{ typeof form['sort'] === 'number' ? form['sort'].toFixed(2) : form['sort'] }}
</el-descriptions-item>
</el-descriptions>
</section>
</el-drawer>
</div>
<div>
<el-drawer
:title="$route.meta.title"
direction="rtl"
size="68%"
:visible.sync="visible"
append-to-body
@close="$emit('update:isShow',false)"
>
<section class="drawer-container">
<el-descriptions ref="elDesc" class="drawer-container__desc" size="small" border :column="2" direction="vertical" :label-style="{ 'font-weight': '500', 'font-size': '15px' }">
<el-descriptions-item label="商品名称">
{{ form['name'] }}
</el-descriptions-item>
<el-descriptions-item label="商品价格">
{{ typeof form['price'] === 'number' ? form['price'].toFixed(2) : form['price'] }}
</el-descriptions-item>
<el-descriptions-item label="封面图片">
<el-image
style="width: 100px;"
fit="contain"
:src="form['image']['url']"
:preview-src-list="[form['image']['url']]"
/>
</el-descriptions-item>
<el-descriptions-item label="内容" span="2">
<div v-html="form['content']" />
</el-descriptions-item>
<el-form-item label="商品轮播图" prop="product_images">
<el-upload
:file-list="form['product_images']"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
/>
</el-form-item>
<el-descriptions-item label="商品">
{{ form['product_skus'] }}
</el-descriptions-item>
<el-descriptions-item label="排序">
{{ typeof form['sort'] === 'number' ? form['sort'].toFixed(2) : form['sort'] }}
</el-descriptions-item>
</el-descriptions>
</section>
</el-drawer>
</div>
</template>
<script>
import { show } from "@/api/product/product";
import { show } from '@/api/product/product'
export default {
name: 'ProductShow',
props: {
isShow: {
type: Boolean,
default: false,
required: true
},
productCategory: {
type: Array,
default: () => []
}
export default {
name: "ProductShow",
props: {
isShow: {
type: Boolean,
default: false,
required: true
},
productCategory : {
type: Array,
default: () => []
},
},
data() {
return {
loading: false,
visible: false,
form: {
product_category_id: '',
name: '',
price: '',
image_id: [],
content: '',
product_images: [],
product_skus: [],
sort: '',
},
}
product_category_id: '',
name: '',
price: '',
image_id: [],
image: {},
content: '',
product_images: [],
product_skus: [],
sort: ''
}
}
},
watch: {
isShow(newVal) {
@ -100,15 +95,16 @@
},
visible(newVal) {
this.$emit('update:isShow', newVal)
},
}
},
methods: {
async getDetail(id) {
try {
const detail = await show({
id
id,
show_relation: ['image']
})
for (let key in this.form) {
for (const key in this.form) {
if (detail.hasOwnProperty(key)) {
this.form[key] = detail[key]
}

Write Preview
Loading…
Cancel
Save