Skip to content

GitLab

Q
qk_admin
Commit 90127c17 authored by yaya's avatar yaya
Browse files
Options

feat:增加新增拍品页面

parent ea5c74a6
Show whitespace changes
Inline Side-by-side
Showing with 537 additions and 14 deletions
src/api/business/sale.js
View file @ 90127c17
......@@ -66,7 +66,7 @@ export function collectorItemConvertToAuction(data) {
})
}
/**
* 转拍品
* 拍品列表
* @param data
* @returns {*}
*/
......@@ -77,4 +77,16 @@ export function findAuctionList(data) {
data
})
}
/**
* 专场列表
* @param data
* @returns {*}
*/
export function findSpecialList(data) {
return request({
url: '/specialPerformance/findList',
method: 'post',
data
})
}
src/router/index.js
View file @ 90127c17
......@@ -499,6 +499,19 @@ export const asyncRouterMap = [
},
hidden: true
},
{
path: 'auctionAdd',
component: () => import('@/views/sale/auctionAdd'),
name: 'auctionAdd',
meta: {
perms: [],
title: '拍品编辑',
icon: 'list',
noCache: true,
keepAlive: true
},
hidden: true
},
{
path: 'specialList',
component: () => import('@/views/sale/specialList'),
......
src/views/sale/auctionAdd.vue 0 → 100644
View file @ 90127c17
<template>
<div>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>拍品信息</span>
</div>
<el-form-item label="商品名称" prop="name">
<el-input v-model="goods.name" />
</el-form-item>
<el-form-item label="商品详情" prop="description">
<editor :init="editorInit" :style="{'min-height':'300px' }" v-model="goods.description" />
</el-form-item>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>拍品图片</span>
</div>
<el-form-item label="" prop="images">
<div v-if="goods.images && (typeof goods.images === 'object')" class="ant-upload-list">
<draggable
:list="goods.images"
:options="{group:'title', animation:150}"
:no-transition-on-drag="true"
class="syllable_ul"
element="ul"
@change="change"
>
<div v-for="(item, index) in goods.images" :key="index" class="ant-upload-list-item">
<div class="ant-upload-list-item-info">
<span>
<a :href="item" target="_blank" rel="noopener noreferrer" >
<img :src="item" class="ant-upload-list-item-thumbnail">
</a>
</span>
</div>
<span class="ant-upload-list-item-actions">
<i class="el-icon-delete" @click="removeImg(item)"/>
</span>
</div>
</draggable>
</div>
<el-upload
:action="uploadPath"
:headers="headers"
:limit="9"
:file-list="itemImages"
:on-exceed="uploadOverrun"
:on-success="handleGalleryUrl"
:on-remove="handleRemove"
:show-file-list="false"
multiple
accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
<div>建议上传尺寸3：4的图片，最多不超过9张</div>
</el-form-item>
<!-- <el-form-item label="图片" prop="images">
<UploadFile :product-top-images.sync="goods.images" @productTopImages="goods.images"/>
</el-form-item>-->
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>拍品设置</span>
</div>
<div>
<div class="item">
<el-form-item label="开始时间" prop="auctionStartTime">
<el-date-picker
v-model="goods.auctionStartTime"
:picker-options="pickerOptions"
style="width:300px"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间" />
</el-form-item>
<el-form-item label="截拍时间" prop="auctionEndTime">
<!-- <el-input v-model="dataForm.bidtime"/> -->
<el-date-picker
v-model="goods.auctionEndTime"
:picker-options="pickerOptions"
style="width:300px"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间" />
</el-form-item>
</div>
<div class="item">
<el-form-item label="起拍价" prop="startPrice">
<el-input v-model="goods.startPrice" style="width: 300px">
<template slot="prepend">¥</template>
</el-input>
</el-form-item>
<el-form-item label="加价幅度" prop="addExtent">
<el-input v-model="goods.addExtent" style="width: 300px">
<template slot="prepend">¥</template>
</el-input>
</el-form-item>
</div>
<div class="item">
<el-form-item label="理想价" >
<div>{{ `${goods && goods.distributionPrice ? `¥ ${goods.distributionPrice}` : '-'}` }}</div>
</el-form-item>
</div>
</div>
</el-card>
</el-form>
<div class="op-container">
<el-button @click="handleBack">返回</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</div>
</template>
<script>
import { uploadPath, createStorage } from '@/api/business/storage'
import { getToken } from '@/utils/auth'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'
import { createSale, findSaleDetail, updateSale } from '../../api/business/sale'
import UploadFile from './UploadImg'
import draggable from 'vuedraggable'
export default {
name: 'SaleAdd',
components: { UploadFile, Editor, draggable },
data() {
return {
uploadPath,
numType: -1,
goods: {
images: [],
type: 1,
buyLimitNum: 0
},
pickerOptions: {
disabledDate(time) {
var todayYear = (new Date()).getFullYear()
var todayMonth = (new Date()).getMonth()
var todayDay = (new Date()).getDate() - 1
var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
return time.getTime() < todayTime
}
},
itemImages: [],
rules: {
images: [{ required: true, message: '至少一张图片', trigger: 'blur' }],
name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
auctionStartTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
auctionEndTime: [{ required: true, message: '截拍时间不能为空', trigger: 'blur' }],
startPrice: [{ required: true, message: '起拍价不能为空', trigger: 'blur' }],
addExtent: [{ required: true, message: '加价幅度不能为空', trigger: 'blur' }]
},
editorInit: {
language: 'zh_CN',
convert_urls: false,
plugins: [
'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
],
toolbar: [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
],
images_upload_handler: function(blobInfo, success, failure) {
const formData = new FormData()
formData.append('file', blobInfo.blob())
createStorage(formData)
.then(res => {
success(res.data.data.url)
})
.catch(() => {
failure('上传失败，请重新上传')
})
}
}
}
},
computed: {
headers() {
return {
'X-Dts-Admin-Token': getToken()
}
}
},
created() {
if (this.$route.query.id == null) {
return
}
this.id = this.$route.query.id
this.timeStr = this.$route.query.timeStr
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.handleGetDetail(loading)
},
methods: {
change() {
const newList = []
for (var i = 0; i < this.goods.images.length; i++) {
newList.push({
url: this.goods.images[i]
})
}
this.itemImages = newList
},
previewImg(url) {
window.open(url, '_blank')
},
removeImg(url) {
this.goods.images.forEach((val, key) => {
if (url === val) {
this.goods.images.splice(key, 1)
this.change()
}
})
this.itemImages.forEach((val, key) => {
if (url === val.url) {
this.itemImages.splice(key, 1)
this.change()
}
})
},
handlerNumTypeChange(e) {
console.log('==e==', e)
},
handlerClose(imageList) {
this.itemImages = imageList
},
/**
* 获取详情
* @param loading
*/
handleGetDetail(loading) {
findSaleDetail({ id: this.id })
.then(response => {
if (loading) {
loading.close()
}
console.log('====', response.data.data)
if (response.data.data) {
this.goods = response.data.data
if (!response.data.data.buyLimitNum || response.data.data.buyLimitNum === -1) {
this.goods.buyLimitNum = 0
this.numType = -1
} else {
this.numType = 2
}
this.goods.images = response.data.data.images ? response.data.data.images.split(';') : []
if (this.goods.images && this.goods.images.length > 0) {
for (var i = 0; i < this.goods.images.length; i++) {
this.itemImages.push({
url: this.goods.images[i]
})
}
}
}
})
.catch(response => {
if (loading) {
loading.close()
}
})
},
/**
* 返回
*/
handleBack() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' })
} else {
this.$router.go(-1)
}
},
/**
* 保存
*/
handleSave() {
if (this.goods.images.length === 0) {
this.$message({
type: 'error',
message: '最少上传1张图片!'
})
return
}
if (this.goods.stock <= 0) {
this.$message({
type: 'error',
message: '库存需大于0!'
})
return
}
if (this.numType === 2 && this.goods.buyLimitNum <= 0) {
this.$message({
type: 'error',
message: '限购数量需大于0！'
})
return
}
if (this.goods.images) {
if (typeof this.goods.images !== 'string') {
this.goods.images = this.goods.images.join(';')
}
} else {
this.goods.images = ''
}
this.$refs.goods.validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
if (this.numType === -1) {
this.goods.buyLimitNum = -1
}
if (this.id) {
updateSale(this.goods)
.then(response => {
if (loading) {
loading.close()
}
this.$notify.success({
title: '成功',
message: '编辑成功'
})
this.$router.push({ path: '/sale/saleList' })
})
.catch(response => {
if (loading) {
loading.close()
}
this.goods.images = this.goods.images.split(';') || []
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
} else {
createSale(this.goods)
.then(response => {
if (loading) {
loading.close()
}
this.$notify.success({
title: '成功',
message: '创建成功'
})
this.$router.push({ path: '/sale/saleList' })
})
.catch(response => {
if (loading) {
loading.close()
}
this.goods.images = this.goods.images.split(';') || []
MessageBox.alert('业务错误：' + response.data.errmsg || '请求失败，请重试', '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
}
})
},
/**
* 金额输入
* @param value
*/
limitInput(value, type) {
const price = ('' + value) // 第一步：转成字符串
.replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
.replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
.replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点， 而且小数点后面只能有0到2位小数
if (type === 1) {
this.goods.distributionPrice = price
} else if (type === 2) {
this.goods.supplyPrice = price
} else if (type === 3) {
this.goods.rebate = price
}
},
uploadOverrun: function() {
this.$message({
type: 'error',
message: '上传文件个数超出限制!最多上传9张图片!'
})
},
handleGalleryUrl(response, file, fileList) {
if (response.errno === 0) {
this.goods.images.push(response.data.url)
}
},
handleRemove: function(file, fileList) {
var url
if (file.response === undefined) {
url = file.url
} else {
url = file.response.data.url
}
for (var i = 0; i < this.goods.images.length; i++) {
// 这里存在两种情况
// 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
// 此时的file.url虽然存在，但是是本机地址，而不是远程地址。
// 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
if (this.goods.images[i] === url) {
this.goods.images.splice(i, 1)
}
}
}
}
}
</script>
<style lang="scss" scoped>
.box-card {
margin: 24px;
}
.item {
display: flex;
}
.op-container {
display: flex;
justify-content: center;
padding: 0 24px 24px;
}
/deep/ .el-form-item__content {
margin-left: 0;
}
/deep/ .syllable_ul {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/deep/ .el-icon-delete {
color: white;
}
/deep/ .el-upload--picture-card {
margin-left: 40px;
}
.ant-upload-list {
display: flex;
flex-direction: row;
}
.ant-upload-list-item {
display: flex;
flex-direction: row;
width: 146px;
height: 146px;
margin: 0 12px 12px 0;
.ant-upload-list-item-info {
position: relative;
}
.ant-upload-list-item-actions {
width: 146px;
height: 30px;
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0;
margin-top: 136px;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 0 12px 12px;
}
.ant-upload-list-item-thumbnail {
width: 146px;
height: 146px;
border-radius: 12px;
}
}
</style>
src/views/sale/auctionList.vue
View file @ 90127c17
......@@ -74,10 +74,9 @@
@click="handleToDetail(scope.row)">详情
</el-button>
<el-button
:disabled="(!scope.row.editAble && scope.row.type === 2)"
type="primary"
size="mini"
@click="handleToDetail(scope.row)">编辑
@click="handleToEdit(scope.row)">编辑
</el-button>
<el-button
:disabled="(!scope.row.editAble && scope.row.type === 2)"
......@@ -218,6 +217,12 @@ export default {
handleToDetail(item) {
this.$router.push({ path: '/sale/AuctionDetail', query: { id: item.id }})
},
/**
* 详情
*/
handleToEdit(item) {
this.$router.push({ path: '/sale/AuctionAdd', query: { id: item.id }})
},
/**
* 删除
*/
......
src/views/sale/specialList.vue
View file @ 90127c17
......@@ -12,32 +12,35 @@
border
fit
highlight-current-row>
<el-table-column align="center" label="专场标题" min-width="150px" prop="name">
<el-table-column align="center" label="专场标题" min-width="150px" prop="title">
<template slot-scope="scope">
<Line2Hidden :text="scope.row.name" />
<Line2Hidden :text="scope.row.title" />
</template>
</el-table-column>
<el-table-column align="center" label="竞拍时间" prop="updateTime" />
<el-table-column align="center" label="藏品数" prop="stock" />
<el-table-column align="center" label="状态" prop="stock" />
<el-table-column align="center" label="出价次数" prop="stock" />
<el-table-column align="center" label="竞拍时间" prop="updateTime" width="150" >
<template slot-scope="scope">
<span>{{ `${scope.row.startTime} 至 ${scope.row.endTime}` }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="藏品数" prop="itemNum" />
<el-table-column align="center" label="状态" prop="stateName" />
<el-table-column align="center" label="出价次数" prop="offerNum" />
<el-table-column align="center" label="更新时间" prop="updateTime" />
<el-table-column align="center" label="操作" width="300">
<template slot-scope="scope">
<el-button
:disabled="(!scope.row.editAble && scope.row.type === 2)"
type="primary"
size="mini"
@click="handleToDetail(scope.row)">详情
</el-button>
<el-button
:disabled="(!scope.row.editAble && scope.row.type === 2)"
:disabled="(scope.row.state === 2)"
type="primary"
size="mini"
@click="handleToDetail(scope.row)">编辑
</el-button>
<el-button
:disabled="(!scope.row.editAble && scope.row.type === 2)"
:disabled="(scope.row.state === 2)"
type="danger"
size="mini"
@click="handleDelete(scope.row)">删除
......@@ -60,7 +63,7 @@
<script>
import Line2Hidden from '@/components/line2Hidden'
import Pagination from '@/components/Pagination'
import { getSaleList, updateOnSale, deleteSaleItem } from '@/api/business/sale'
import { findSpecialList, updateOnSale, deleteSaleItem } from '@/api/business/sale'
import { MessageBox } from 'element-ui'
export default {
......@@ -144,7 +147,7 @@ export default {
getList() {
localStorage.setItem('systemState', '')
this.listLoading = true
getSaleList(this.listQuery).then(response => {
findSpecialList(this.listQuery).then(response => {
this.list = response.data.data.dataList
this.total = response.data.data.total
this.listLoading = false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment