|
|
@@ -0,0 +1,931 @@
|
|
|
+<template>
|
|
|
+ <div class="mod-home">
|
|
|
+ <div class="search-bar">
|
|
|
+ <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" size="small">
|
|
|
+ <div class="input-row">
|
|
|
+ <el-form-item prop="status" label="团体组合" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.seriesId" placeholder="请选择所属团体组合" clearable filterable @change="selectSeries">
|
|
|
+ <el-option v-for="series in seriesList" :label="series.seriesName" :value="series.seriesId"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="status" label="正面爱豆" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.frontPersonId" placeholder="请选择爱豆" clearable filterable>
|
|
|
+ <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="personId" label="背面爱豆" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.backPersonId" placeholder="请选择爱豆" clearable filterable multiple>
|
|
|
+ <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="status" label="正/背面" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.cardSide" placeholder="请选择卡面或背面库" clearable>
|
|
|
+ <el-option label="卡面库" value="Front"></el-option>
|
|
|
+ <el-option label="卡背库" value="Back"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="status" label="年份" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.year" placeholder="请选择年份" clearable>
|
|
|
+ <el-option v-for="year in years" :label="year.label" :value="year.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="status" label="是否已加入图集" class="search-form-item">
|
|
|
+ <el-select v-model="searchForm.inCardLib" placeholder="请是否已加入图集" clearable>
|
|
|
+ <el-option label="否" value="0"></el-option>
|
|
|
+ <el-option label="是" value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="default-btn primary-btn" @click="searchChange(true)">{{$t('crud.searchBtn')}}</div>
|
|
|
+ <div class="default-btn" @click="resetSearchForm('searchForm')">{{$t('product.reset')}}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="default-btn primary-btn" @click="openUploadDialog">上传图片</div>
|
|
|
+ <div v-if="(mode === 'chooseMtO' || mode === 'chooseOtO') && selectFrontNum > 0 && selectBackNum > 0" class="default-btn primary-btn" @click="openCreateCardLibDialog">创建图集</div>
|
|
|
+ <div v-if="(mode === 'chooseMtO' || mode === 'chooseOtO') && selectFrontNum > 0 && selectBackNum > 0" class="default-btn primary-btn" @click="openAddCardLibDialog">加入已有图集</div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ <el-radio v-model="mode" label="view">预览模式</el-radio>
|
|
|
+ <el-radio v-model="mode" label="edit">编辑模式</el-radio>
|
|
|
+ <el-radio v-model="mode" label="chooseMtO">选图模式(多对一)</el-radio>
|
|
|
+ <el-radio v-model="mode" label="chooseOtO">选图模式（一对一）</el-radio>
|
|
|
+ <span v-if="(mode === 'chooseMtO' || mode === 'chooseOtO')" style="color: red; font-size: 16px;font-weight: bold">已选卡面/卡背：{{selectFrontNum}}/{{selectBackNum}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-plate">
|
|
|
+ <!-- 正面 -->
|
|
|
+ <div class="card-box" @scroll="frontScrollEvent">
|
|
|
+ <div class="card-item">
|
|
|
+ <div class="cardContainer">
|
|
|
+ <div style="display: inline-block;margin-right: 5px;" v-for="(front, index) in frontList" :key="front.id">
|
|
|
+ <el-row :gutter="24" style="padding-top: 5px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div :style="(mode === 'chooseMtO' || mode === 'chooseOtO') && front.isSelected? divLightStyle : {border: '3px solid #fff'}" @click="frontItemSelect(front)">
|
|
|
+ <span class="item-num" v-if="front.num">{{ front.num }}</span>
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>{{front.seriesName}}</span>
|
|
|
+ <br/>
|
|
|
+ <span>{{front.personName}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 120px;height: auto">
|
|
|
+ <img :src="resourcesUrl + front.frontUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="display: flex; justify-content: center">
|
|
|
+ <el-button v-if="mode==='edit' && front.id" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(front, index, 'Front')">删除</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="loadMore" @click="loadMore('Front')">
|
|
|
+ <span>点击加载更多</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 背面 -->
|
|
|
+ <div class="card-box" @scroll="backScrollEvent">
|
|
|
+ <div class="card-item">
|
|
|
+ <div class="cardContainer">
|
|
|
+ <div style="display: inline-block;margin-right: 5px;" v-for="(back, index) in backList" :key="back.id">
|
|
|
+ <el-row :gutter="24" style="padding-top: 5px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div :style="(mode === 'chooseMtO' || mode === 'chooseOtO') && back.isSelected? divLightStyle : {border: '3px solid #fff'}" @click="backItemSelect(back)">
|
|
|
+ <span class="item-num" v-if="back.num">{{ back.num }}</span>
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>{{back.seriesName}}</span>
|
|
|
+ <br/>
|
|
|
+ <span>{{back.personName}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 120px;height: auto">
|
|
|
+ <img :src="resourcesUrl + back.backUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="display: flex; justify-content: center">
|
|
|
+ <el-button v-if="mode==='edit' && back.id" type="danger" size="mini" style="margin-right: 5px" @click="deleteCardItem(back, index, 'Back')">删除</el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="loadMore" @click="loadMore('Back')">
|
|
|
+ <span>点击加载更多</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :visible.sync="uploadCardVisible" :modal="false" title="上传图片" width="60%" top="3vh" :close-on-click-modal="false">
|
|
|
+ <el-form :inline="true" class="search-form" ref="searchForm" :model="uploadCardData" label-width="auto" size="small">
|
|
|
+ <!-- 表单项 -->
|
|
|
+ <div class="input-row">
|
|
|
+ <el-form-item prop="seriesId" label="团队组合">
|
|
|
+ <el-select v-model="uploadCardData.seriesId" clearable filterable @change="selectSeries">
|
|
|
+ <el-option
|
|
|
+ v-for="node in seriesList"
|
|
|
+ :key="node.seriesId"
|
|
|
+ :label="node.seriesName"
|
|
|
+ :value="node.seriesId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="personId" label="爱豆" class="search-form-item">
|
|
|
+ <el-select v-model="uploadCardData.personId" placeholder="请选择爱豆" clearable filterable>
|
|
|
+ <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="cardSide" label="正背面">
|
|
|
+ <el-select v-model="uploadCardData.cardSide" clearable filterable>
|
|
|
+ <el-option :key="1" label="正面" :value="'Front'"></el-option>
|
|
|
+ <el-option :key="2" label="背面" :value="'Back'"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="cardType" label="卡类型">
|
|
|
+ <el-select v-model="uploadCardData.cardType" clearable filterable>
|
|
|
+ <el-option :key="1" label="3寸小卡" :value="'3CXK'"></el-option>
|
|
|
+ <el-option :key="2" label="3寸拍立得" :value="'3CFP'"></el-option>
|
|
|
+ <el-option :key="3" label="明信片" :value="'MXP'"></el-option>
|
|
|
+ <el-option :key="4" label="书签" :value="'SQ'"></el-option>
|
|
|
+ <el-option :key="5" label="大方卡" :value="'FK'"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="picYear" label="年份">
|
|
|
+ <el-select v-model="uploadCardData.picYear" clearable filterable>
|
|
|
+ <el-option :key="1" label="2025年" :value="'2025'"></el-option>
|
|
|
+ <el-option :key="2" label="2024年" :value="'2024'"></el-option>
|
|
|
+ <el-option :key="3" label="2024年以前" :value="'2024年以前'"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <br/>
|
|
|
+ <div v-if="uploadErrorTips" style="color: red; font-size: 18px">{{uploadErrorTips + '尺寸不对'}}</div>
|
|
|
+ <el-form-item prop="files" label="图片">
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ list-type="picture-card"
|
|
|
+ accept="image/*"
|
|
|
+ :multiple="true"
|
|
|
+ :auto-upload="false"
|
|
|
+ :on-change="onChangeUpload"
|
|
|
+ action="#"
|
|
|
+ :file-list="fileList">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
|
|
|
+ <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="uploadCardSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="createCardLibVisible" :modal="false" title="创建图集" width="60%" top="3vh" :close-on-click-modal="false" @close="createCardLibList = []">
|
|
|
+ <el-form :inline="true" class="search-form" ref="searchForm" :model="cardLibData" label-width="auto" size="small">
|
|
|
+ <!-- 表单项 -->
|
|
|
+ <div class="input-row">
|
|
|
+ <el-form-item prop="seriesId" label="团队组合">
|
|
|
+ <el-select v-model="cardLibData.seriesId" clearable filterable @change="selectSeries">
|
|
|
+ <el-option
|
|
|
+ v-for="node in seriesList"
|
|
|
+ :key="node.seriesId"
|
|
|
+ :label="node.seriesName"
|
|
|
+ :value="node.seriesId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="personId" label="爱豆" class="search-form-item">
|
|
|
+ <el-select v-model="cardLibData.personId" placeholder="请选择爱豆" clearable filterable>
|
|
|
+ <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="cardType" label="卡类型">
|
|
|
+ <el-select v-model="cardLibData.cardType" clearable filterable>
|
|
|
+ <el-option :key="1" label="3寸小卡" :value="'3CXK'"></el-option>
|
|
|
+ <el-option :key="2" label="3寸拍立得" :value="'3CFP'"></el-option>
|
|
|
+ <el-option :key="3" label="明信片" :value="'MXP'"></el-option>
|
|
|
+ <el-option :key="4" label="书签" :value="'SQ'"></el-option>
|
|
|
+ <el-option :key="5" label="大方卡" :value="'FK'"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="picYear" label="年份">
|
|
|
+ <el-select v-model="cardLibData.picYear" clearable filterable>
|
|
|
+ <el-option :key="1" label="2025年" :value="'2025'"></el-option>
|
|
|
+ <el-option :key="2" label="2024年" :value="'2024'"></el-option>
|
|
|
+ <el-option :key="3" label="2024年以前" :value="'2024年以前'"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <br/>
|
|
|
+ <div class="create-card-lib" v-for="(card, index) in createCardLibList" :key="index">
|
|
|
+ <el-row :gutter="12" style="padding-top: 5px">
|
|
|
+ <span class="num">{{card.num}}</span>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>正面</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;height: auto">
|
|
|
+ <img :src="resourcesUrl + card.frontUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>背面</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;height: auto">
|
|
|
+ <img :src="resourcesUrl + card.backUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
|
|
|
+ <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="createCardLibSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="addCardLibVisible" :modal="false" title="加入到已有图集" width="60%" top="3vh" :close-on-click-modal="false" @close="createCardLibList = []">
|
|
|
+ <el-form :inline="true" class="search-form" ref="searchForm" :model="addCardLibData" label-width="auto" size="small">
|
|
|
+ <!-- 表单项 -->
|
|
|
+ <div class="input-row">
|
|
|
+ <el-form-item prop="libId" label="图集名称">
|
|
|
+ <el-select v-model="addCardLibData.id" clearable filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="lib in cardLibList"
|
|
|
+ :key="lib.id"
|
|
|
+ :label="lib.seriesName + '_' + lib.libNo"
|
|
|
+ :value="lib.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="seriesId" label="团队组合">
|
|
|
+ <el-select v-model="addCardLibData.seriesId" clearable filterable @change="selectSeries">
|
|
|
+ <el-option
|
|
|
+ v-for="node in seriesList"
|
|
|
+ :key="node.seriesId"
|
|
|
+ :label="node.seriesName"
|
|
|
+ :value="node.seriesId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="personId" label="爱豆" class="search-form-item">
|
|
|
+ <el-select v-model="addCardLibData.personId" placeholder="请选择爱豆" clearable filterable>
|
|
|
+ <el-option v-for="person in personList" :label="person.personName" :value="person.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <br/>
|
|
|
+ <div class="create-card-lib" v-for="(card, index) in createCardLibList" :key="index">
|
|
|
+ <el-row :gutter="12" style="padding-top: 5px">
|
|
|
+ <span class="num">{{card.num}}</span>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>正面</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;height: auto">
|
|
|
+ <img :src="resourcesUrl + card.frontUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <div style="padding: 3px; text-align: center">
|
|
|
+ <span>背面</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100px;height: auto">
|
|
|
+ <img :src="resourcesUrl + card.backUrl"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="default-btn">{{$t("crud.filter.cancelBtn")}}</el-button>
|
|
|
+ <el-button :loading="submitLoading" class="default-btn primary-btn" type="primary" @click="addCardLibSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectFrontNum: 0,
|
|
|
+ selectBackNum: 0,
|
|
|
+ mode: 'view',
|
|
|
+ uploadCardData: {},
|
|
|
+ cardLibData: {},
|
|
|
+ uploadCardVisible: false,
|
|
|
+ createCardLibVisible: false,
|
|
|
+ addCardLibVisible: false,
|
|
|
+ searchForm: {},
|
|
|
+ seriesList: [],
|
|
|
+ personList: [],
|
|
|
+ years: [],
|
|
|
+ dataList: [],
|
|
|
+ uploadErrorTips: '',
|
|
|
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
|
|
|
+ frontPage: {
|
|
|
+ total: 0, // 总页数
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
+ pageSize: 50 // 每页显示多少条
|
|
|
+ },
|
|
|
+ backPage: {
|
|
|
+ total: 0, // 总页数
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
+ pageSize: 50 // 每页显示多少条
|
|
|
+ },
|
|
|
+ frontList: [],
|
|
|
+ backList:[],
|
|
|
+ waterfallFlowFrontContainerWidth: 0,
|
|
|
+ waterfallFlowBackContainerWidth: 0,
|
|
|
+ cardColNum: 5,
|
|
|
+ cardMargin: 10,
|
|
|
+ columnHeights:[],
|
|
|
+ fileList: [],
|
|
|
+ createCardLibList: [],
|
|
|
+ submitLoading: false,
|
|
|
+ divLightStyle: {border: '3px solid red'},
|
|
|
+ cardLibList: [],
|
|
|
+ addCardLibData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ mode () {
|
|
|
+ if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
|
|
|
+ this.frontList.forEach(item => {
|
|
|
+ item.isSelected = false
|
|
|
+ item.num = 0
|
|
|
+ })
|
|
|
+ this.backList.forEach(item => {
|
|
|
+ item.isSelected = false
|
|
|
+ item.num = 0
|
|
|
+ })
|
|
|
+ this.selectFrontNum = 0
|
|
|
+ this.selectBackNum = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getCardFrontLib()
|
|
|
+ this.getCardBackLib()
|
|
|
+ this.getSeriesList()
|
|
|
+ this.initSelectYear(new Date().getFullYear())
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resetSearchForm(){
|
|
|
+ this.searchForm = {}
|
|
|
+ },
|
|
|
+ deleteCardItem(item, index, cardSide){
|
|
|
+ this.$confirm('确定要删除吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ let url = cardSide === 'Front' ? '/cardLib/cardFrontLib/' : '/cardLib/cardBackLib/'
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(url + item.id),
|
|
|
+ method: 'delete',
|
|
|
+ }).then(({ data }) =>{
|
|
|
+ if(data){
|
|
|
+ if(cardSide === 'Front'){
|
|
|
+ this.$delete(this.frontList, index)
|
|
|
+ }
|
|
|
+ if(cardSide === 'Back'){
|
|
|
+ this.$delete(this.backList, index)
|
|
|
+ }
|
|
|
+ this.$message.success("删除成功")
|
|
|
+ }else{
|
|
|
+ this.$message.error("删除失败")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ frontItemSelect (front) {
|
|
|
+ if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
|
|
|
+ let idx = this.frontList.findIndex(item => item.id === front.id)
|
|
|
+ if (idx !== -1) {
|
|
|
+ if (front.isSelected) {
|
|
|
+ front.isSelected = false
|
|
|
+ if (this.selectFrontNum !== 0) {
|
|
|
+ this.selectFrontNum = this.selectFrontNum - 1
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ front.isSelected = true
|
|
|
+ this.selectFrontNum = this.selectFrontNum + 1
|
|
|
+ }
|
|
|
+ if (this.mode === 'chooseOtO') {
|
|
|
+ if (front.isSelected) {
|
|
|
+ front.num = this.selectFrontNum
|
|
|
+ } else {
|
|
|
+ this.backList.forEach(item => {
|
|
|
+ if (item.num > front.num) {
|
|
|
+ item.num = item.num - 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let backIdx = this.backList.findIndex(item => item.num === front.num)
|
|
|
+ if (backIdx !== -1) {
|
|
|
+ let back = this.backList[backIdx]
|
|
|
+ back.num = 0
|
|
|
+ back.isSelected = false
|
|
|
+ this.selectBackNum = this.selectBackNum - 1
|
|
|
+ this.$set(this.backList, backIdx, back)
|
|
|
+ }
|
|
|
+ this.frontList.forEach(item => {
|
|
|
+ if (item.num > front.num) {
|
|
|
+ item.num = item.num - 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ front.num = 0
|
|
|
+ }
|
|
|
+ } else if (this.mode === 'chooseMtO') {
|
|
|
+ if (front.isSelected) {
|
|
|
+ front.num = this.selectFrontNum
|
|
|
+ } else {
|
|
|
+ this.frontList.forEach(item => {
|
|
|
+ if (item.num > front.num) {
|
|
|
+ item.num = item.num - 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ front.num = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this.frontList, idx, front)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backItemSelect (back) {
|
|
|
+ if (this.mode === 'chooseMtO' || this.mode === 'chooseOtO') {
|
|
|
+ let idx = this.backList.findIndex(item => item.id === back.id)
|
|
|
+ if (idx !== -1) {
|
|
|
+ if (this.mode === 'chooseMtO') {
|
|
|
+ if (this.selectBackNum !== 0) {
|
|
|
+ let oldIdx = this.backList.findIndex(item => item.isSelected === true)
|
|
|
+ if (oldIdx !== -1) {
|
|
|
+ let oldSelectedBack = this.backList[oldIdx]
|
|
|
+ oldSelectedBack.isSelected = false
|
|
|
+ oldSelectedBack.num--
|
|
|
+ this.$set(this.backList, oldIdx, oldSelectedBack)
|
|
|
+ this.selectBackNum = this.selectBackNum - 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (back.isSelected) {
|
|
|
+ back.isSelected = false
|
|
|
+ if (this.selectBackNum !== 0) {
|
|
|
+ this.selectBackNum = this.selectBackNum - 1
|
|
|
+ back.num = this.selectBackNum
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ back.isSelected = true
|
|
|
+ this.selectBackNum = this.selectBackNum + 1
|
|
|
+ back.num = this.selectBackNum
|
|
|
+ }
|
|
|
+ if (this.mode === 'chooseOtO') {
|
|
|
+ if (back.isSelected) {
|
|
|
+ back.num = this.selectBackNum
|
|
|
+ } else {
|
|
|
+ this.backList.forEach(item => {
|
|
|
+ if (item.num > back.num) {
|
|
|
+ item.num = item.num - 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ back.num = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this.backList, idx, back)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backScrollEvent (e) {
|
|
|
+ if (e.srcElement.scrollTop + e.srcElement.clientHeight + 1 > e.srcElement.scrollHeight){
|
|
|
+ this.loadMore('Back')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ frontScrollEvent (e) {
|
|
|
+ if (e.srcElement.scrollTop + e.srcElement.clientHeight + 1 > e.srcElement.scrollHeight){
|
|
|
+ this.loadMore('Front')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadMore (cardSide) {
|
|
|
+ if (cardSide === 'Front') {
|
|
|
+ this.frontPage.currentPage = this.frontPage.currentPage + 1
|
|
|
+ this.getCardFrontLib(true)
|
|
|
+ }
|
|
|
+ if (cardSide === 'Back') {
|
|
|
+ this.backPage.currentPage = this.backPage.currentPage + 1
|
|
|
+ this.getCardBackLib(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchChange () {
|
|
|
+ this.frontPage.currentPage = 1
|
|
|
+ this.backPage.currentPage = 1
|
|
|
+ if(this.searchForm.cardSide){
|
|
|
+ if (this.searchForm.cardSide === 'Back'){
|
|
|
+ this.getCardBackLib()
|
|
|
+ } else {
|
|
|
+ this.getCardFrontLib()
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.getCardFrontLib()
|
|
|
+ this.getCardBackLib()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onChangeUpload (file, fileList) {
|
|
|
+ this.fileList = fileList
|
|
|
+ this.handleBeforeUpload(file, fileList)
|
|
|
+ },
|
|
|
+ openUploadDialog () {
|
|
|
+ this.uploadCardVisible = true
|
|
|
+ },
|
|
|
+ openCreateCardLibDialog () {
|
|
|
+ let _this = this
|
|
|
+ this.createCardLibVisible = true
|
|
|
+ let frontList = this.frontList.filter(front => front.num && front.num > 0).sort((max, min) => { return max.num - min.num })
|
|
|
+ let backList = this.backList.filter(back => back.num && back.num > 0).sort((max, min) => { return max.num - min.num })
|
|
|
+ if (this.mode === 'chooseOtO') {
|
|
|
+ frontList.forEach(front => {
|
|
|
+ let back = backList.find(item => item.num === front.num)
|
|
|
+ _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back ? back.backUrl : null, num: front.num})
|
|
|
+ })
|
|
|
+ } else if (this.mode === 'chooseMtO') {
|
|
|
+ let back = backList[0]
|
|
|
+ frontList.forEach(front => {
|
|
|
+ _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back.backUrl, num: front.num})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openAddCardLibDialog () {
|
|
|
+ this.getCardLibList()
|
|
|
+ let _this = this
|
|
|
+ this.addCardLibVisible = true
|
|
|
+ let frontList = this.frontList.filter(front => front.num && front.num > 0).sort((max, min) => { return max.num - min.num })
|
|
|
+ let backList = this.backList.filter(back => back.num && back.num > 0).sort((max, min) => { return max.num - min.num })
|
|
|
+ if (this.mode === 'chooseOtO') {
|
|
|
+ frontList.forEach(front => {
|
|
|
+ let back = backList.find(item => item.num === front.num)
|
|
|
+ _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back ? back.backUrl : null, num: front.num})
|
|
|
+ })
|
|
|
+ } else if (this.mode === 'chooseMtO') {
|
|
|
+ let back = backList[0]
|
|
|
+ frontList.forEach(front => {
|
|
|
+ _this.createCardLibList.push({frontUrl: front.frontUrl, backUrl: back.backUrl, num: front.num})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadCardSubmit () {
|
|
|
+ this.submitLoading = true
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('seriesId', this.uploadCardData.seriesId)
|
|
|
+ formData.append('personId', this.uploadCardData.personId)
|
|
|
+ formData.append('year', this.uploadCardData.picYear)
|
|
|
+ formData.append('cardType', this.uploadCardData.cardType)
|
|
|
+ for (let i = 0; i < this.fileList.length; i++) {
|
|
|
+ formData.append('file', this.fileList[i].raw)
|
|
|
+ }
|
|
|
+ let url = this.uploadCardData.cardSide === 'Front' ? '/cardLib/cardFrontLib/saveBatchFromFiles' : '/cardLib/cardBackLib/saveBatchFromFiles'
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(url),
|
|
|
+ method: 'POST',
|
|
|
+ data: formData,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ }
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.submitLoading = false
|
|
|
+ this.$message({
|
|
|
+ message: '上传成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 300,
|
|
|
+ onClose: () => {
|
|
|
+ this.uploadCardVisible = false
|
|
|
+ if (this.uploadCardData.cardSide === 'Front') {
|
|
|
+ this.getCardFrontLib()
|
|
|
+ } else {
|
|
|
+ this.getCardBackLib()
|
|
|
+ }
|
|
|
+ this.uploadCardData = {}
|
|
|
+ this.fileList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createCardLibSubmit () {
|
|
|
+ this.cardLibData.cardLibItemList = this.createCardLibList
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/card/cardLib/createCardLib'),
|
|
|
+ method: 'POST',
|
|
|
+ data: this.cardLibData
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.submitLoading = false
|
|
|
+ this.$message({
|
|
|
+ message: '创建成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 300,
|
|
|
+ onClose: () => {
|
|
|
+ this.createCardLibVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addCardLibSubmit () {
|
|
|
+ this.addCardLibData.cardLibItemList = this.createCardLibList
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/card/cardLib/addToCardLib'),
|
|
|
+ method: 'POST',
|
|
|
+ data: this.addCardLibData
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.submitLoading = false
|
|
|
+ this.$message({
|
|
|
+ message: '创建成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 300,
|
|
|
+ onClose: () => {
|
|
|
+ this.addCardLibVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectSeries (value) {
|
|
|
+ this.personList = []
|
|
|
+ this.getPersonList(value)
|
|
|
+ },
|
|
|
+ initSelectYear(year){
|
|
|
+ this.years = [];
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ this.years.push({value:(year - i),label:(year - i)+ "年"});
|
|
|
+ }
|
|
|
+ this.years.push({value:null,label:"无年份"});
|
|
|
+ },
|
|
|
+ getSeriesList () {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/prod/prodTemplateSeries/page'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(
|
|
|
+ Object.assign({
|
|
|
+ size: 100,
|
|
|
+ shopId: 1
|
|
|
+ },
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.seriesList = data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPersonList (seriesId) {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/cardLib/cardPerson/page'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(
|
|
|
+ Object.assign({
|
|
|
+ size: 100,
|
|
|
+ seriesId: seriesId
|
|
|
+ },
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.personList = data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChange (val) {
|
|
|
+ this.page.pageSize = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ handleCurrentChange (val) {
|
|
|
+ this.page.currentPage = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ getCardFrontLib(isLoadMore){
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/cardLib/cardFrontLib/page'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(
|
|
|
+ Object.assign({
|
|
|
+ size: this.frontPage.pageSize,
|
|
|
+ current: this.frontPage.currentPage,
|
|
|
+ shopId: 1,
|
|
|
+ personId: this.searchForm.frontPersonId
|
|
|
+ },
|
|
|
+ this.searchForm
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }).then(({data}) => {
|
|
|
+ if(isLoadMore){
|
|
|
+ this.frontList.push(...data.records)
|
|
|
+ }else{
|
|
|
+ this.frontList = data.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCardBackLib(isLoadMore){
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/cardLib/cardBackLib/page'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(
|
|
|
+ Object.assign({
|
|
|
+ size: this.backPage.pageSize,
|
|
|
+ current: this.backPage.currentPage,
|
|
|
+ shopId: 1,
|
|
|
+ personIdList: this.searchForm.backPersonId
|
|
|
+ },
|
|
|
+ this.searchForm
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }).then(({data}) => {
|
|
|
+ if(isLoadMore){
|
|
|
+ this.backList.push(...data.records)
|
|
|
+ }else{
|
|
|
+ this.backList = data.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCardLibList(){
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/card/cardLib/page'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(
|
|
|
+ Object.assign({
|
|
|
+ size: 200,
|
|
|
+ shopId: 1
|
|
|
+ }
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }).then(({data}) => {
|
|
|
+ this.cardLibList = data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleBeforeUpload (file, fileList) {
|
|
|
+ let index = fileList.findIndex(item => item.name === file.name)
|
|
|
+ let _this = this
|
|
|
+ let fileType = file.raw.type
|
|
|
+ let isJpg = fileType === 'image/jpg' || fileType === 'image/jpeg'
|
|
|
+ if (!isJpg) {
|
|
|
+ _this.uploadErrorTips = _this.uploadErrorTips + ' 第' + (index + 1) + '张不是jpg图片'
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let isSize = true
|
|
|
+ let width = 709
|
|
|
+ let height = 1087
|
|
|
+ let cardType = this.uploadCardData.cardType
|
|
|
+ if (cardType === '3CXK' || cardType === '3CFP') {
|
|
|
+ width = 709
|
|
|
+ height = 1087
|
|
|
+ } else if (cardType === '4CXK') {
|
|
|
+ width = 921
|
|
|
+ height = 1087
|
|
|
+ } else if (cardType === 'SQ') {
|
|
|
+ width = 638
|
|
|
+ height = 1796
|
|
|
+ } else if (cardType === 'FK') {
|
|
|
+ width = 1229
|
|
|
+ height = 1229
|
|
|
+ } else if (cardType === 'MXP') {
|
|
|
+ width = 1252
|
|
|
+ height = 1819
|
|
|
+ }
|
|
|
+ isSize = new Promise(function(resolve, reject) {
|
|
|
+ let _URL = window.URL || window.webkitURL
|
|
|
+ let image = new Image()
|
|
|
+ image.onload = function() {
|
|
|
+ let valid = image.naturalWidth === width && image.naturalHeight === height
|
|
|
+ valid ? resolve() : reject()
|
|
|
+ }
|
|
|
+ image.src = _URL.createObjectURL(file.raw)
|
|
|
+ }).then(
|
|
|
+ () => {
|
|
|
+ return file;
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ _this.uploadErrorTips = _this.uploadErrorTips + ' 第' + (index + 1) + '张，'
|
|
|
+ return Promise.reject()
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // let erd = elementResizeDetectorMaker()
|
|
|
+ // erd.uninstall(this.$refs.entirety) // 这里用ref是因为vue离开页面后获取不到dom
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ // e-chart
|
|
|
+ #real-time-data-chart canvas {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20px !important
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardContainer{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .loadMore{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: blue;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .mod-home {
|
|
|
+ .search-bar {
|
|
|
+ .input-row {
|
|
|
+ .select-time-btn {
|
|
|
+ margin-right: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #AAAAAA;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-time-btn.is-active {
|
|
|
+ color: #155BD4;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ 整体看板
|
|
|
+ */
|
|
|
+ .card-plate {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ // 上
|
|
|
+ .card-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ height: 700px;
|
|
|
+ overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
|
|
|
+ overflow-x: hidden; /* 隐藏水平滚动条 */
|
|
|
+
|
|
|
+ .card-item{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fbfbfb;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid pink;
|
|
|
+ margin-top: 10px;
|
|
|
+ .item-num{
|
|
|
+ position: absolute;
|
|
|
+ float: left;
|
|
|
+ left:10px;
|
|
|
+ top:0px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ background-color: red;
|
|
|
+ border-radius: 100%;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .create-card-lib{
|
|
|
+ border: 2px solid pink;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ .num{
|
|
|
+ position: absolute;
|
|
|
+ display:flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ left: 5px;
|
|
|
+ top: 0px;
|
|
|
+ color: white;
|
|
|
+ border-radius: 100%;
|
|
|
+ background-color: red;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
