You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1005 lines
37 KiB
1005 lines
37 KiB
|
|
<template> |
|
|
|
<div class="app-container"> |
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
|
<!-- <el-form-item label="作品系列表ID" prop="seriesId">--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="作品名称" prop="collectionName"> |
|
<el-input |
|
v-model="queryParams.collectionName" |
|
placeholder="请输入作品名称" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '20' |
|
/> |
|
</el-form-item> |
|
<el-form-item label="作品系列" prop="seriesId"> |
|
<el-input |
|
v-model="queryParams.seriesId" |
|
placeholder="请输入作品系列" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '20' |
|
/> |
|
</el-form-item> |
|
<el-form-item label="价格" prop="price"> |
|
<el-input |
|
v-model="queryParams.price" |
|
placeholder="价格大于此值" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '10' |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
/> |
|
</el-form-item> |
|
<!-- <el-form-item label="作品故事图片" prop="storyPicture">--> |
|
<!-- <el-input--> |
|
<!-- v-model="queryParams.storyPicture"--> |
|
<!-- placeholder="请输入作品故事图片"--> |
|
<!-- clearable--> |
|
<!-- size="small"--> |
|
<!-- @keyup.enter.native="handleQuery"--> |
|
<!-- />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="总数量" prop="issueNumber"> |
|
<el-input |
|
v-model="queryParams.issueNumber" |
|
placeholder="发行总数量大于此值" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '4' |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="手机号" prop="artistId" v-hasRole="['admin']"> |
|
<el-input |
|
v-model="queryParams.artistId" |
|
placeholder="请输入创作者手机号" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
maxLength = '11' |
|
|
|
v-hasRole="['admin','tester']" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="名字" prop="artistName" v-hasRole="['admin','tester']"> |
|
<el-input |
|
v-model="queryParams.artistName" |
|
placeholder="请输入创作者名称" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '10' |
|
v-hasRole="['admin','tester']" |
|
/> |
|
</el-form-item> |
|
<!-- <el-form-item label="特殊作品" prop="special">--> |
|
<!-- <el-input--> |
|
<!-- v-model="queryParams.special"--> |
|
<!-- placeholder="请选择是否为"--> |
|
<!-- clearable--> |
|
<!-- size="small"--> |
|
<!-- @keyup.enter.native="handleQuery"--> |
|
<!-- />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="特殊作品" prop="special"> |
|
<el-select v-model="queryParams.special" clearable placeholder="请选择是否为特殊作品" |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
> |
|
<el-option label="不是" value=false></el-option> |
|
<el-option label="是" value=true></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<!-- <el-form-item label="作品状态 " prop="state">--> |
|
<!-- <el-input--> |
|
<!-- v-model="queryParams.state"--> |
|
<!-- placeholder="请输入作品状态 "--> |
|
<!-- clearable--> |
|
<!-- size="small"--> |
|
<!-- @keyup.enter.native="handleQuery"--> |
|
<!-- />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="作品状态" prop="state"> |
|
<el-select v-model="queryParams.state" clearable placeholder="请选择作品状态" |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
> |
|
<el-option label="待上架" value="1"></el-option> |
|
<el-option label="待开售" value="2"></el-option> |
|
<el-option label="预售中" value="3"></el-option> |
|
<el-option label="售卖中" value="4"></el-option> |
|
<el-option label="即将售罄" value="5"></el-option> |
|
<el-option label="已售罄" value="6"></el-option> |
|
<el-option label="已下架" value="7"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="剩余数量" prop="numberRemaining"> |
|
<el-input |
|
v-model="queryParams.numberRemaining" |
|
placeholder="大于此输入值的剩余数量" |
|
clearable |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
maxLength = '4' |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
/> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<el-row :gutter="10" class="mb8"> |
|
<el-col :span="1.5"> |
|
<el-button |
|
type="primary" |
|
plain |
|
icon="el-icon-plus" |
|
size="mini" |
|
@click="handleAdd" |
|
v-hasRole="['admin','tester']" |
|
>新增</el-button> |
|
</el-col> |
|
<el-col :span="1.5"> |
|
<el-button |
|
type="success" |
|
plain |
|
icon="el-icon-edit" |
|
size="mini" |
|
:disabled="single" |
|
@click="handleUpdate" |
|
v-hasRole="['admin','tester']" |
|
>修改</el-button> |
|
</el-col> |
|
<el-col :span="1.5"> |
|
<el-button |
|
type="danger" |
|
plain |
|
icon="el-icon-delete" |
|
size="mini" |
|
:disabled="multiple" |
|
@click="handleDelete" |
|
v-hasRole="['admin','tester']" |
|
>删除</el-button> |
|
</el-col> |
|
<el-col :span="1.5"> |
|
<el-button |
|
type="warning" |
|
plain |
|
icon="el-icon-download" |
|
size="mini" |
|
@click="handleExport" |
|
>导出</el-button> |
|
</el-col> |
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|
</el-row> |
|
|
|
<el-table v-loading="loading" :data="collectionList" @selection-change="handleSelectionChange"> |
|
<el-table-column type="selection" width="55" align="center" /> |
|
<!-- <el-table-column label="id" align="center" prop="id" />--> |
|
<el-table-column label="序号" type="index" width="50"> </el-table-column> |
|
<!-- <el-table -column label="作品系列表ID" align="center" prop="seriesId" />--> |
|
<el-table-column label="作品名称" align="center" prop="collectionName" /> |
|
<el-table-column label="作品系列" align="center" prop="seriesName" /> |
|
<el-table-column label="价格(单位:元)" align="center" prop="price" /> |
|
<!-- <el-table-column label="作品故事" align="center" prop="storyText" />--> |
|
<!-- <el-table-column label="作品故事图片" align="center" prop="storyPicture" />--> |
|
<!-- <el-table-column label="作品故事图片" align="center" prop="storyPicture" >--> |
|
<!-- <template slot-scope="scope">--> |
|
<!-- <div class="demo-image">--> |
|
<!-- <div class="block">--> |
|
<!-- <el-image--> |
|
<!-- style="--> |
|
<!-- width: 50px;--> |
|
<!-- height: 51px;--> |
|
<!-- border-radius: 6px;--> |
|
<!-- z-index: 2;--> |
|
<!-- "--> |
|
<!-- :src="scope.row.storyPicture"--> |
|
<!-- :preview-src-list="srcList"--> |
|
<!-- >--> |
|
<!-- </el-image>--> |
|
<!-- </div>--> |
|
<!-- </div>--> |
|
<!-- </template>--> |
|
|
|
<!-- </el-table-column>--> |
|
<el-table-column label="发行总数量" align="center" prop="issueNumber" /> |
|
<!-- <el-table-column label="艺术家手机" align="center" prop="artistId" />--> |
|
<el-table-column label="作者名称" align="center" prop="artistName" /> |
|
<el-table-column label="作家头像" align="center" prop="writerAvatar" > |
|
<template slot-scope="scope"> |
|
<div class="demo-image"> |
|
<div class="block"> |
|
<el-image |
|
style=" |
|
width: 50px; |
|
height: 51px; |
|
border-radius: 6px; |
|
z-index: 2; |
|
" |
|
:src="scope.row.writerAvatar" |
|
:preview-src-list="srcList" |
|
> |
|
</el-image> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
</el-table-column> |
|
<el-table-column label="所属创作者" align="center" prop="issueName" /> |
|
<!-- <el-table-column label="特殊作品标识 " align="center" prop="special" />--> |
|
<!-- <el-table-column label="作品状态 " align="center" prop="state" />--> |
|
<!-- <el-table-column label="作品可见状态 " align="center" prop="visibleState" />--> |
|
<el-table-column |
|
prop="visibleState" |
|
align="center" |
|
label="特殊作品标识"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.special === true ? '是': '' }} |
|
{{ scope.row.special === false ? '不是': '' }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
prop="state" |
|
align="center" |
|
label="作品状态"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.state === 1 ? '待上架': '' }} |
|
{{ scope.row.state === 2 ? '待开售': '' }} |
|
{{ scope.row.state === 3 ? '预售中': '' }} |
|
{{ scope.row.state === 4 ? '售卖中': '' }} |
|
{{ scope.row.state === 5 ? '即将售罄': '' }} |
|
{{ scope.row.state === 6 ? '已售罄': '' }} |
|
{{ scope.row.state === 7 ? '已关闭(下架）': '' }} |
|
</template> |
|
</el-table-column> |
|
<!-- <el-table-column--> |
|
<!-- prop="visibleState"--> |
|
<!-- align="center"--> |
|
<!-- label="标识">--> |
|
<!-- <template scope="scope">--> |
|
<!-- {{ scope.row.visibleState == true ? '可见': '' }}--> |
|
<!-- {{ scope.row.visibleState == false ? '不可见': '' }}--> |
|
<!-- </template>--> |
|
<!-- </el-table-column>--> |
|
<!-- <el-table-column label="删除时间 逻辑删除" align="center" prop="deletedTime" width="180">--> |
|
<!-- <template slot-scope="scope">--> |
|
<!-- <span>{{ parseTime(scope.row.deletedTime, '{y}-{m}-{d}') }}</span>--> |
|
<!-- </template>--> |
|
<!-- </el-table-column>--> |
|
<el-table-column label="剩余数量" align="center" prop="numberRemaining" /> |
|
<el-table-column label="开售时间" align="center" prop="timeSale" width="180"> |
|
<template slot-scope="scope"> |
|
<span>{{ parseTime(scope.row.timeSale, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> |
|
</template> |
|
</el-table-column> |
|
<!-- <el-table-column label="作品图片路径" align="center" prop="imagePath" />--> |
|
<el-table-column label="作品权重 " align="center" prop="weight" v-if = "testColumn"/> |
|
<!-- <el-table-column label="图片" align="center" prop="thumbnail" />--> |
|
<el-table-column label="作品图片" align="center" prop="thumbnail" > |
|
<template slot-scope="scope"> |
|
<div class="demo-image"> |
|
<div class="block"> |
|
<el-image |
|
style=" |
|
width: 50px; |
|
height: 51px; |
|
border-radius: 6px; |
|
z-index: 2; |
|
" |
|
:src="scope.row.thumbnail" |
|
:preview-src-list="srcLists" |
|
> |
|
</el-image> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
</el-table-column> |
|
<!-- <el-table-column label="创建人" align="center" prop="createdBy" />--> |
|
<!-- <el-table-column label="创建时间" align="center" prop="createdTime" width="180">--> |
|
<!-- <template slot-scope="scope">--> |
|
<!-- <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>--> |
|
<!-- </template>--> |
|
<!-- </el-table-column>--> |
|
<!-- <el-table-column label="更新人" align="center" prop="updatedBy" />--> |
|
<!-- <el-table-column label="更新时间" align="center" prop="updatedTime" width="180">--> |
|
<!-- <template slot-scope="scope">--> |
|
<!-- <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>--> |
|
<!-- </template>--> |
|
<!-- </el-table-column>--> |
|
<!-- <el-table-column label="预留" align="center" prop="reservedA" />--> |
|
<el-table-column label="热力值" align="center" prop="heatValue" /> |
|
<!-- <el-table-column label="预留" align="center" prop="reservedC" />--> |
|
<!-- <el-table-column label="预留" align="center" prop="reservedD" />--> |
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
size="mini" |
|
type="text" |
|
icon="el-icon-edit" |
|
@click="handleUpdate(scope.row)" |
|
v-hasRole="['admin','tester','shop','artist']" |
|
>修改</el-button> |
|
<el-button |
|
size="mini" |
|
type="text" |
|
icon="el-icon-delete" |
|
@click="handleDelete(scope.row)" |
|
v-hasRole="['admin','tester']" |
|
v-if="scope.row.state==1" |
|
>删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
|
|
<pagination |
|
v-show="total>0" |
|
:total="total" |
|
:page.sync="queryParams.pageNum" |
|
:limit.sync="queryParams.pageSize" |
|
@pagination="getList" |
|
/> |
|
|
|
<!-- 添加或修改作品 对话框 --> |
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :destroy-on-close="true" @close='handleCancle' > |
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|
<!-- <el-form-item label="作品系列表ID" prop="seriesId">--> |
|
<!-- <el-input v-model="form.seriesId" placeholder="请输入作品系列表ID" />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="作品系列" prop="seriesId" v-if="YC3"> |
|
<el-select v-model="form.seriesId" clearable placeholder="请选择系列" |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
|
|
> |
|
<el-option v-for="(item,index) in selectCollection" :key="item.id" label="" :value="item.name" >{{item.name}}</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="作品名称" prop="collectionId"> |
|
<el-input v-model="form.collectionName" placeholder="请输入作品名称" |
|
maxLength = '20' |
|
/> |
|
</el-form-item> |
|
<el-form-item label="价格" prop="price" v-hasRole="['admin','tester']"> |
|
<el-input v-model="form.price" placeholder="请输入价格(元)" |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
maxLength = '10' |
|
v-hasRole="['admin','tester']" |
|
/> |
|
|
|
<!-- onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"--> |
|
<!-- onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"--> |
|
|
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="作品故事" prop="storyText">--> |
|
<!--<!– <el-input v-model="form.storyText" type="textarea" placeholder="请输入内容"–>--> |
|
<!--<!– maxLength = '500'–>--> |
|
<!--<!– />–>--> |
|
<!-- <quill-editor ref="text" v-model="form.storyText" :options="editorOption" />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="作品故事" prop="storyText"> |
|
<editor v-model="form.storyText" :min-height="192"/> |
|
</el-form-item> |
|
<el-form-item label="发行总数量" prop="issueNumber" v-hasRole="['admin','tester']" v-if="YC3"> |
|
<el-input v-model="form.issueNumber" placeholder="请输入发行总数量" maxLength = '6' οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" v-hasRole="['admin','tester']"/> |
|
</el-form-item> |
|
<el-form-item label="艺术家手机号码" prop="artistId" v-if="YC" v-hasRole="['admin','tester']"> |
|
<el-input v-model="form.artistId" placeholder="请输入艺术家（店铺）手机号" |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
v-hasRole="['admin','tester']"/> |
|
</el-form-item> |
|
|
|
<el-form-item label="作者名称" prop="artistName"> |
|
<el-input v-model="form.artistName" placeholder="默认为该艺术家名称" |
|
maxLength = '10'/> |
|
</el-form-item> |
|
<el-form-item label="作家头像" prop="writerAvatar"> |
|
<el-upload |
|
ref="upload2" |
|
:action="action(1)" |
|
:headers="headers" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
list-type="picture-card" |
|
:on-success="(res,file) => handleSuccess(res,file,['writerAvatar'])" |
|
:auto-upload="true" |
|
:before-upload="beforeUpload" |
|
:file-list="imgList" |
|
> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
<div slot="file" slot-scope="{file}"> |
|
<img |
|
class="el-upload-list__item-thumbnail" |
|
:src="form.writerAvatar" alt="" |
|
> |
|
<span class="el-upload-list__item-actions"> |
|
<span |
|
class="el-upload-list__item-preview" |
|
@click="handlePictureCardPreview(file)" |
|
> |
|
<i class="el-icon-zoom-in"></i> |
|
</span> |
|
<span |
|
v-if="!disabled" |
|
class="el-upload-list__item-delete" |
|
@click="handleDownload(file)" |
|
> |
|
<i class="el-icon-download"></i> |
|
</span> |
|
<span |
|
v-if="!disabled" |
|
class="el-upload-list__item-delete" |
|
@click="handleRemove(file,'upload2')" |
|
> |
|
<i class="el-icon-delete"></i> |
|
</span> |
|
</span> |
|
</div> |
|
</el-upload> |
|
<span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span> |
|
<el-dialog :visible.sync="dialogVisible"> |
|
<img width="100%" :src="dialogImageUrl" alt=""> |
|
</el-dialog> |
|
</el-form-item> |
|
|
|
<el-form-item label="作品上架状态" prop="state" v-if="YC2" v-hasRole="['admin','tester']"> |
|
<el-select v-model="form.state" clearable placeholder="请选择作品上架状态" |
|
size="small" |
|
@keyup.enter.native="handleQuery" |
|
v-hasRole="['admin','tester']" |
|
|
|
> |
|
<el-option label="待上架(下架)" value="1"></el-option> |
|
<el-option label="待开售" value="2"></el-option> |
|
<el-option label="预售中" value="3"></el-option> |
|
<el-option label="售卖中" value="4"></el-option> |
|
<el-option label="即将售完" value="5"></el-option> |
|
<el-option label="已售完" value="6"></el-option> |
|
<el-option label="已关闭" value="7"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="开售时间" prop="timeSale" v-hasRole="['admin','tester']" > |
|
<el-date-picker |
|
v-model="form.timeSale" |
|
type="datetime" |
|
placeholder="选择日期时间" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
align="right" |
|
:picker-options="pickerOptions" |
|
v-hasRole="['admin','tester']"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<!-- <el-form-item label="作品图片路径" prop="imagePath">--> |
|
<!-- <el-input v-model="form.imagePath" placeholder="请输入作品图片路径" />--> |
|
<!-- </el-form-item>--> |
|
<el-form-item label="作品图片" prop="imagePath" v-hasRole="['admin','tester']" v-if="YC3"> |
|
<el-upload |
|
ref="upload3" |
|
v-hasRole="['admin','tester']" |
|
:action="action(2)" |
|
:headers="headers" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
list-type="picture-card" |
|
:on-success="(res,file) => handleSuccess(res,file,['thumbnail','imagePath'])" |
|
:auto-upload="true" |
|
:before-upload="beforeUpload" |
|
:file-list="imgList" |
|
> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
<div slot="file" slot-scope="{file}"> |
|
<img |
|
class="el-upload-list__item-thumbnail" |
|
:src="form.imagePath" alt="" |
|
> |
|
<span class="el-upload-list__item-actions"> |
|
<span |
|
class="el-upload-list__item-preview" |
|
@click="handlePictureCardPreview(file)" |
|
> |
|
<i class="el-icon-zoom-in"></i> |
|
</span> |
|
<span |
|
v-if="!disabled" |
|
class="el-upload-list__item-delete" |
|
@click="handleDownload(file)" |
|
> |
|
<i class="el-icon-download"></i> |
|
</span> |
|
<span |
|
v-if="!disabled" |
|
class="el-upload-list__item-delete" |
|
@click="handleRemove(file,'upload3')" |
|
> |
|
<i class="el-icon-delete"></i> |
|
</span> |
|
</span> |
|
</div> |
|
</el-upload> |
|
<span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span> |
|
<el-dialog :visible.sync="dialogVisible"> |
|
<img width="100%" :src="dialogImageUrl" alt=""> |
|
</el-dialog> |
|
</el-form-item> |
|
<el-form-item label="作品权重 " prop="weight" v-hasRole="['admin','tester']" > |
|
<el-input v-model="weight" placeholder="请输入作品权重(1-10000) " |
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" |
|
maxLength = '5' |
|
v-hasRole="['admin','tester']" |
|
/> |
|
|
|
</el-form-item> |
|
</el-form> |
|
<div slot="footer" class="dialog-footer"> |
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
<el-button @click="cancel">取 消</el-button> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { listCollection, getCollection, delCollection, addCollection, updateCollection } from "@/api/wjnft/collection"; |
|
import { listSeries } from '@/api/wjnft/series' |
|
import { getToken } from '@/utils/auth' |
|
import { checkPermi, checkRole } from "@/utils/permission"; |
|
import '../../../api/menu.js' |
|
import { quillEditor } from 'vue-quill-editor' |
|
import 'quill/dist/quill.core.css' |
|
import 'quill/dist/quill.snow.css' |
|
import 'quill/dist/quill.bubble.css' |
|
|
|
|
|
export default { |
|
name: "Collection", |
|
components: { |
|
quillEditor |
|
}, |
|
data() { |
|
return { |
|
editorOption: { |
|
action: process.env.VUE_APP_BASE_API + "/common/upload", |
|
methods: 'post', |
|
name: 'upload_file', |
|
accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' |
|
}, |
|
weight:1, |
|
testColumn:false, |
|
adminId:1, |
|
YC:true, |
|
YC2:false, |
|
YC3:true, |
|
YCStata:false, |
|
objectIds:[], |
|
srcList: [], |
|
srcLists: [], |
|
picture_url:undefined, |
|
imgList:[], |
|
//文件上传 |
|
dialogImageUrl: '', |
|
dialogVisible: false, |
|
disabled: false, |
|
// 遮罩层 |
|
loading: true, |
|
// 选中数组 |
|
ids: [], |
|
// 非单个禁用 |
|
single: true, |
|
// 非多个禁用 |
|
multiple: true, |
|
// 显示搜索条件 |
|
showSearch: true, |
|
// 总条数 |
|
total: 0, |
|
// 作品 表格数据 |
|
collectionList: [], |
|
// 弹出层标题 |
|
title: "", |
|
// 是否显示弹出层 |
|
open: false, |
|
// 查询参数 |
|
queryParams: { |
|
pictureUrl: null, |
|
pageNum: 1, |
|
pageSize: 10, |
|
seriesId: null, |
|
collectionName: null, |
|
price: null, |
|
storyText: null, |
|
storyPicture: null, |
|
issueNumber: null, |
|
artistId: null, |
|
artistName: null, |
|
writerAvatar:null, |
|
special: null, |
|
state: null, |
|
visibleState: null, |
|
deletedTime: null, |
|
numberRemaining: null, |
|
timeSale: null, |
|
imagePath: null, |
|
weight: null, |
|
thumbnail: null, |
|
createdBy: null, |
|
createdTime: null, |
|
updatedBy: null, |
|
updatedTime: null, |
|
contractAddress: null, |
|
reservedB: null, |
|
reservedC: null, |
|
reservedD: null |
|
}, |
|
// 表单参数 |
|
form: { |
|
weight:1, |
|
seriesId:'' |
|
}, |
|
// 表单校验 |
|
rules: { |
|
seriesId: [ |
|
{ required: true, message: "作品系列表名字不能为空", trigger: "blur" } |
|
], |
|
}, |
|
//作品系列下拉选择 |
|
selectCollection:[] |
|
}; |
|
}, |
|
created() { |
|
this.testColumn = this.$auth.hasRole("admin"); |
|
this.getList(); |
|
|
|
let data = [] |
|
listSeries().then(response => { |
|
response.rows.forEach(function(val,i){ |
|
data.push({"id":val.id,"name":val.seriesName}) |
|
}) |
|
}); |
|
this.selectCollection = data |
|
}, |
|
computed:{ |
|
headers(){ |
|
return { |
|
Authorization:"Bearer "+getToken() |
|
} |
|
}, |
|
action(){ |
|
return function(num){ |
|
return process.env.VUE_APP_BASE_API+"/wjnft/oss/upload/" + num |
|
} |
|
//return process.env.VUE_APP_BASE_API+"/wjnft/oss/upload" |
|
} |
|
}, |
|
methods: { |
|
checkPermi, |
|
checkRole, |
|
pickerOptions(){ |
|
|
|
}, |
|
handleCancle () { |
|
this.imgList=[]; |
|
}, |
|
// 上传文件时触发 |
|
beforeUpload(file){ |
|
//console.log(file) |
|
var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1); |
|
const extension = testmsg === "png"; |
|
const extension1 = testmsg === "jpg"; |
|
const extension2 = testmsg === "jpeg"; |
|
const isLt32M = file.size / 1024 / 1024 < 3; |
|
if (!extension && !extension2 && !extension1) { |
|
this.$message.warning('上传文件只能是png，jpeg，jpg格式！'); |
|
} |
|
if (!isLt32M) { |
|
this.$message.warning('上传文件大小不能超过3MB！'); |
|
} |
|
return (extension || extension2 || extension1) && isLt32M; |
|
|
|
}, |
|
handleExceed(files, fileList){ |
|
this.$message.warning('当前只允许上传一个文件'); |
|
}, |
|
handleSuccess(res,file,field) { |
|
let length = field.length |
|
console.log(res,file,field); |
|
console.log(res.code); |
|
if(res.code === 500 ){ |
|
this.$refs.upload3.clearFiles(); |
|
return this.$message.warning("上传失败"); |
|
}else { |
|
field.forEach(function (val, index) { |
|
if (length == 1) { |
|
this.form[val] = res.url |
|
} else { |
|
let url = 'url' + index |
|
this.form[val] = res[url] |
|
} |
|
}, this) |
|
/*if(typeof res.url != 'undefined'){ //action=1 |
|
this.form.storyPicture = "https://"+res.url; |
|
// this.form.writerAvatar = "https://"+res.url; |
|
} else{ //action=2 |
|
this.form.imagePath = "https://"+res.url1; |
|
this.form.thumbnail = "https://"+res.url0; |
|
}*/ |
|
//this.imagesUrl = res.data; |
|
return this.imgList; |
|
} |
|
}, |
|
handleRemove(file,num) { |
|
this.$refs[num].clearFiles() |
|
// this.$confirm(`确定移除 ${ file.name }？`); |
|
// this.$modal.confirm('确认移除"' + file.name + '"图片？').then(function() { |
|
// return this.$refs.upload.clearFiles(); |
|
// }).then(() => { |
|
// this.$modal.msgSuccess("删除成功"); |
|
// }).catch(() => {}); |
|
}, |
|
handlePictureCardPreview(file) { |
|
this.dialogImageUrl = file.url; |
|
this.dialogVisible = true; |
|
}, |
|
|
|
handleDownload(file) { |
|
console.log(file); |
|
}, |
|
|
|
/** 查询作品 列表 */ |
|
getList() { |
|
this.loading = true; |
|
listCollection(this.queryParams).then(response => { |
|
this.collectionList = response.rows; |
|
response.rows.forEach(item =>{ |
|
this.srcList.push(item.writerAvatar); |
|
this.srcLists.push(item.thumbnail); |
|
}); |
|
this.total = response.total; |
|
this.loading = false; |
|
}); |
|
}, |
|
|
|
// 取消按钮 |
|
cancel() { |
|
this.open = false; |
|
this.reset(); |
|
this.imgList = []; |
|
}, |
|
// 表单重置 |
|
reset() { |
|
this.form = { |
|
id: null, |
|
seriesId: null, |
|
collectionName: null, |
|
price: null, |
|
storyText: null, |
|
storyPicture: null, |
|
issueNumber: null, |
|
artistId: null, |
|
artistName: null, |
|
writerAvatar:null, |
|
special: null, |
|
state: null, |
|
visibleState: null, |
|
deletedTime: null, |
|
numberRemaining: null, |
|
timeSale: null, |
|
imagePath: null, |
|
weight: null, |
|
thumbnail: null, |
|
createdBy: null, |
|
createdTime: null, |
|
updatedBy: null, |
|
updatedTime: null, |
|
reservedA: null, |
|
heatValue: null, |
|
reservedC: null, |
|
reservedD: null |
|
}; |
|
this.resetForm("form"); |
|
}, |
|
/** 搜索按钮操作 */ |
|
handleQuery() { |
|
this.queryParams.pageNum = 1; |
|
this.getList(); |
|
}, |
|
/** 重置按钮操作 */ |
|
resetQuery() { |
|
this.resetForm("queryForm"); |
|
this.handleQuery(); |
|
}, |
|
// 多选框选中数据 |
|
handleSelectionChange(selection) { |
|
this.ids = selection.map(item => item.id) |
|
this.single = selection.length!==1 |
|
this.multiple = !selection.length |
|
}, |
|
/** 新增按钮操作 */ |
|
handleAdd() { |
|
this.YC =true; |
|
this.YC2 =false; |
|
this.YC3 =true; |
|
this.reset(); |
|
this.open = true; |
|
this.title = "添加作品 "; |
|
|
|
}, |
|
/** 修改按钮操作 */ |
|
handleUpdate(row) { |
|
this.open = true; |
|
this.YC =false; |
|
this.YC2 =true; |
|
this.reset(); |
|
const id = row.id || this.ids |
|
getCollection(id).then(response => { |
|
this.form = response.data; |
|
let obj ={} |
|
obj.url= this.form.writerAvatar; |
|
this.imgList.push( obj); |
|
this.form.seriesId = row.seriesName |
|
|
|
if(this.form.state === 1){ |
|
this.form.state = "待上架" |
|
this.YC3 =true |
|
} |
|
if(this.form.state === 2){ |
|
this.form.state = "待开售" |
|
this.YC3 =false |
|
} |
|
if(this.form.state === 3){ |
|
this.form.state = "预售中" |
|
this.YC3 =false |
|
} |
|
if(this.form.state === 4){ |
|
this.form.state = "售卖中" |
|
this.YC3 =false |
|
} |
|
if(this.form.state === 5){ |
|
this.form.state = "即将售罄" |
|
this.YC3 =false |
|
} |
|
if(this.form.state === 6){ |
|
this.form.state = "已售罄" |
|
this.YC3 =false |
|
} |
|
if(this.form.state === 7){ |
|
this.form.state = "已关闭" |
|
this.YC3 =false |
|
} |
|
|
|
this.title = "修改作品 "; |
|
}); |
|
|
|
}, |
|
//修复值 |
|
restore(state){ |
|
if(state === "待上架"){ |
|
this.form.state = 1; |
|
} |
|
if(state === "待开售"){ |
|
this.form.state = 2; |
|
} |
|
if(state === "预售中"){ |
|
this.form.state = 3; |
|
} |
|
if(state === "售卖中"){ |
|
this.form.state = 4; |
|
} |
|
if(state === "即将售罄"){ |
|
this.form.state = 5; |
|
} |
|
if(state === "已售罄"){ |
|
this.form.state = 6; |
|
} |
|
if(state === "已关闭"){ |
|
this.form.state = 7; |
|
} |
|
}, |
|
/** 提交按钮 */ |
|
submitForm() { |
|
this.$refs["form"].validate(valid => { |
|
if (valid) { |
|
if (this.form.id != null) { |
|
this.restore(this.form.state); |
|
if (this.form.collectionName === null || this.form.collectionName === undefined ){ |
|
this.$message.error("请输入作品名称") |
|
return ; |
|
} |
|
if (this.form.timeSale === null || this.form.timeSale === undefined){ |
|
this.$message.error("请输入作品出售时间") |
|
return ; |
|
} |
|
if (this.form.price === null || this.form.price === undefined){ |
|
this.$message.error("请输入作品价格") |
|
return ; |
|
} |
|
if (this.form.issueNumber === null ||this.form.issueNumber === undefined){ |
|
this.$message.error("请输入作品数量") |
|
return ; |
|
} |
|
if (this.form.imagePath === null || this.form.imagePath === undefined){ |
|
this.$message.error("请上传作品图片") |
|
return ; |
|
} |
|
updateCollection(this.form).then(response => { |
|
this.$modal.msgSuccess("修改成功"); |
|
this.open = false; |
|
this.getList(); |
|
}); |
|
} else { |
|
if (this.form.collectionName === ""||this.form.collectionName === null || this.form.collectionName === undefined){ |
|
//typeof(this.form.collectionName) |
|
this.$message.error("请输入作品名称") |
|
return ; |
|
} |
|
|
|
if (this.form.price === ""||this.form.price === null || this.form.price === undefined){ |
|
this.$message.error("请输入作品价格") |
|
return ; |
|
} |
|
|
|
if (this.form.issueNumber === ""||this.form.issueNumber === null || this.form.issueNumber === undefined){ |
|
this.$message.error("请输入作品数量") |
|
return ; |
|
} |
|
if (this.form.imagePath === ""||this.form.imagePath === null || this.form.imagePath === undefined){ |
|
//typeof(this.form.collectionName) |
|
this.$message.error("请上传作品图片") |
|
return ; |
|
} |
|
if (this.form.timeSale === null || this.form.timeSale === undefined){ |
|
this.$message.error("请输入作品出售时间") |
|
return ; |
|
} |
|
this.form.state =1; |
|
this.form.special =false; |
|
addCollection(this.form).then(response => { |
|
this.$modal.msgSuccess("新增成功"); |
|
this.open = false; |
|
this.getList(); |
|
}); |
|
} |
|
} |
|
}); |
|
}, |
|
/** 删除按钮操作 */ |
|
handleDelete(row) { |
|
const id = row.id || this.ids |
|
const collectionName = row.collectionName || this.collectionName; |
|
this.$modal.confirm('是否确认删除作品 名称为"' +collectionName + '"的数据项？').then(function() { |
|
return delCollection(id); |
|
}).then(() => { |
|
this.getList(); |
|
this.$modal.msgSuccess("删除成功"); |
|
}).catch(() => {}); |
|
}, |
|
/** 导出按钮操作 */ |
|
handleExport() { |
|
this.download('wjnft/collection/export', { |
|
...this.queryParams |
|
}, `collection_${new Date().getTime()}.xlsx`) |
|
} |
|
} |
|
}; |
|
</script>
|
|
|