|
@@ -0,0 +1,486 @@
|
|
|
+<template>
|
|
|
+ <div class="material-page">
|
|
|
+ <div class="top-wrap">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="width: 80px"
|
|
|
+ @click="showUploadImg = true"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_upload"
|
|
|
+ >{{$t('ReportManage.smart_btn.upload')}}</el-button
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ :placeholder="$t('SystemManage.BaseConfig.resource_placeholder01')"
|
|
|
+ v-model="searchVal"
|
|
|
+ style="max-width: 262px"
|
|
|
+ @change="handleSearchList"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="content-wrap">
|
|
|
+ <classifyWrap ref="classifyWrapIns" @change="handleClassifyChange" />
|
|
|
+ <div class="img-list-wrap" v-loading="materialListLoading">
|
|
|
+ <div class="top-box" v-if="!isShowBatchOpt">
|
|
|
+ <span>{{$t('ReportManage.Material.img_count',{limit:materialListTotal})}}</span>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click="handleShowBatchOpt"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_batchEdit"
|
|
|
+ >{{$t('HighFrequencyData.batch_operation')}}</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 批量操作时 -->
|
|
|
+ <div class="top-box" v-else>
|
|
|
+ <div>
|
|
|
+ <el-checkbox
|
|
|
+ :label="$t('EtaBasePage.label_all_check')"
|
|
|
+ :indeterminate="checkAllStatus"
|
|
|
+ v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange"
|
|
|
+ />
|
|
|
+ <span>{{$t('ReportManage.Material.select_img_count',{limit:selectCount}) }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="text" @click="handleBatchOpt('download')">{{$t('Common.download_btn')}}</el-button>
|
|
|
+ <el-button type="text" @click="handleBatchOpt('move')">{{$t('Common.move_btn')}}</el-button>
|
|
|
+ <el-button type="text" style="color: #f00" @click="handleBatchOpt('delete')">{{$t('Table.delete_btn')}}</el-button>
|
|
|
+ <el-button type="text" @click="isShowBatchOpt = false"
|
|
|
+ >{{$t('ReportManage.Material.cancel_batch_btn')}}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <tableNoData
|
|
|
+ :text="$t('Table.prompt_slogan')"
|
|
|
+ v-if="materialList.length === 0"
|
|
|
+ />
|
|
|
+ <ul
|
|
|
+ v-else
|
|
|
+ class="img-list-box"
|
|
|
+ v-infinite-scroll="loadMaterialList"
|
|
|
+ :infinite-scroll-immediate="false"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ class="img-item-box"
|
|
|
+ v-for="item in materialList"
|
|
|
+ :key="item.MaterialId"
|
|
|
+ >
|
|
|
+ <div class="opt-box">
|
|
|
+ <div class="item" @click="handleShowImgFull(item)">
|
|
|
+ <img src="~@/assets/img/icons/fullsreen.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <el-dropdown @command="handleClickOpt">
|
|
|
+ <div class="item">
|
|
|
+ <img src="~@/assets/img/icons/more.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ :command="{ type: 'edit', data: item }"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_rename"
|
|
|
+ >{{$t('MyEtaPage.option_op_rename')}}</el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ :command="{ type: 'move', data: item }"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_move"
|
|
|
+ >{{$t('Common.move_btn')}}</el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ :command="{ type: 'download', data: item }"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_download"
|
|
|
+ >{{$t('Common.download_btn')}}</el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ :command="{ type: 'del', data: item }"
|
|
|
+ style="color: #ad352f"
|
|
|
+ v-permission="permissionBtn.reportMaterialPermission.material_del"
|
|
|
+ >{{ $t("Table.delete_btn") }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="title">{{ $i18nt.locale==='zh'?item.MaterialName:item.MaterialNameEn }}</div>
|
|
|
+ <label v-if="isShowBatchOpt" class="el-checkbox" @click="handleCheckMaterialItem(item)">
|
|
|
+ <span :class="['el-checkbox__input',materialCheckStatus(item)?'is-checked':'']">
|
|
|
+ <span class="el-checkbox__inner"></span>
|
|
|
+ </span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <img class="img-box" :src="item.ImgUrl" alt="" />
|
|
|
+ <div class="time-box">
|
|
|
+ <span>{{ item.CreateTime }}</span>
|
|
|
+ <span>{{ item.SysUserRealName }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <uploadImgs
|
|
|
+ :isShow="showUploadImg"
|
|
|
+ @close="showUploadImg = false"
|
|
|
+ @success="handleRefreshList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 重命名 -->
|
|
|
+ <imgRename
|
|
|
+ :isShow="showImgRename"
|
|
|
+ :materialData="currentEditImgData"
|
|
|
+ @close="showImgRename = false"
|
|
|
+ @success="handleRefreshList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 移动 -->
|
|
|
+ <imgMove
|
|
|
+ :isShow="showImgMove"
|
|
|
+ :materialData="currentEditImgData"
|
|
|
+ :batchOptData="batchOptData"
|
|
|
+ @close="showImgMove = false;batchOptData=null"
|
|
|
+ @success="handleRefreshList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 预览图片 -->
|
|
|
+ <el-image-viewer
|
|
|
+ v-if="showViewer"
|
|
|
+ :on-close="
|
|
|
+ () => {
|
|
|
+ this.picShowList = [];
|
|
|
+ this.showViewer = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :url-list="picShowList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { apiReportMaterial } from '@/api/modules/reportMaterial.js'
|
|
|
+import classifyWrap from './components/classifyTree.vue'
|
|
|
+import imgRename from './components/imgRename.vue'
|
|
|
+import uploadImgs from './components/uploadImgs.vue'
|
|
|
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
|
|
|
+import imgMove from './components/imgMove.vue';
|
|
|
+export default {
|
|
|
+ components: { classifyWrap, uploadImgs, imgRename, ElImageViewer, imgMove },
|
|
|
+ computed:{
|
|
|
+ selectCount(){
|
|
|
+ if(this.checkAll){
|
|
|
+ return this.materialListTotal-this.selectMaterialArr.length
|
|
|
+ }else{
|
|
|
+ return this.selectMaterialArr.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchVal: "",
|
|
|
+ page: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ materialList: [],
|
|
|
+ finished: false,
|
|
|
+ materialListLoading: false,
|
|
|
+ activeClassifyId: 0,
|
|
|
+ materialListTotal: 0,
|
|
|
+
|
|
|
+
|
|
|
+ showUploadImg: false,
|
|
|
+ showImgRename: false,
|
|
|
+ showImgMove: false,
|
|
|
+ currentEditImgData: null,
|
|
|
+
|
|
|
+ showViewer: false,
|
|
|
+ picShowList: [],
|
|
|
+
|
|
|
+ // 批量操作
|
|
|
+ isShowBatchOpt: false,
|
|
|
+ checkAllStatus: false,
|
|
|
+ checkAll: false,
|
|
|
+ selectMaterialArr: [],
|
|
|
+
|
|
|
+ batchOptData:null,//批量操作选择的树
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 批量操作
|
|
|
+ handleBatchOpt(type){
|
|
|
+ // 判断是否有勾选
|
|
|
+ if(!this.checkAll&&this.selectMaterialArr.length===0){
|
|
|
+ this.$message.warning('请至少选择一张图片')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const params={
|
|
|
+ ClassifyId:this.activeClassifyId,
|
|
|
+ MaterialIds:this.selectMaterialArr||[],
|
|
|
+ Keyword:this.searchVal,
|
|
|
+ IsSelectAll:this.checkAll
|
|
|
+ }
|
|
|
+ if(type==='download'){
|
|
|
+ this.handleBatchDownload(params)
|
|
|
+ }
|
|
|
+ if(type==='move'){
|
|
|
+ this.batchOptData=params
|
|
|
+ this.showImgMove=true
|
|
|
+ }
|
|
|
+ if(type==='delete'){
|
|
|
+ this.handleBatchDelete(params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 批量删除
|
|
|
+ async handleBatchDelete(params){
|
|
|
+ await this.$confirm(this.$t('ReportManage.Material.del_attention'), this.$t('Dialog.warn_tit'), {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ const res = await apiReportMaterial.materialBatchDel(params)
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ this.$message.success(this.$t('MsgPrompt.delete_msg'))
|
|
|
+ this.handleRefreshList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 批量下载
|
|
|
+ handleBatchDownload(params){
|
|
|
+ const hostapi= process.env.VUE_APP_API_ROOT + "/material/batch/download"
|
|
|
+ const elink = document.createElement('a')
|
|
|
+ elink.style.display = 'none'
|
|
|
+ elink.href = `${hostapi}?ClassifyId=${params.ClassifyId}&MaterialIds=${params.MaterialIds.join(',')}&Keyword=${params.Keyword}&IsSelectAll=${params.IsSelectAll}&${localStorage.getItem("auth")}`
|
|
|
+ document.body.appendChild(elink)
|
|
|
+ elink.click()
|
|
|
+ document.body.removeChild(elink)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换为批量操作
|
|
|
+ handleShowBatchOpt(){
|
|
|
+ this.checkAllStatus=false
|
|
|
+ this.checkAll=false
|
|
|
+ this.selectMaterialArr=[]
|
|
|
+ this.isShowBatchOpt=true
|
|
|
+ },
|
|
|
+ // 点击单个素材选择
|
|
|
+ handleCheckMaterialItem(item){
|
|
|
+ if(this.selectMaterialArr.includes(item.MaterialId)){
|
|
|
+ this.selectMaterialArr=this.selectMaterialArr.filter(i=>i!==item.MaterialId)
|
|
|
+ }else{
|
|
|
+ this.selectMaterialArr.push(item.MaterialId)
|
|
|
+ }
|
|
|
+ // 更新全选按钮状态
|
|
|
+ if(this.selectMaterialArr.length>0&&this.selectMaterialArr.length<this.materialListTotal){
|
|
|
+ this.checkAllStatus=true
|
|
|
+ }
|
|
|
+ if(this.checkAll){
|
|
|
+ if(this.selectMaterialArr.length===0){
|
|
|
+ this.checkAllStatus=false
|
|
|
+ }
|
|
|
+ if(this.selectMaterialArr.length===this.materialListTotal){
|
|
|
+ this.checkAll=false
|
|
|
+ this.checkAllStatus=false
|
|
|
+ this.selectMaterialArr=[]
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ if(this.selectMaterialArr.length===this.materialListTotal){
|
|
|
+ this.checkAll=true
|
|
|
+ this.checkAllStatus=false
|
|
|
+ this.selectMaterialArr=[]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 单个素材选中态的控制
|
|
|
+ materialCheckStatus(item) {
|
|
|
+ let flag = false
|
|
|
+ if (this.checkAll) {
|
|
|
+ if (!this.selectMaterialArr.includes(item.MaterialId)) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.selectMaterialArr.includes(item.MaterialId)) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return flag
|
|
|
+ },
|
|
|
+ // 全选状态切换
|
|
|
+ handleCheckAllChange() {
|
|
|
+ // 清空选择
|
|
|
+ console.log('全选状态改变');
|
|
|
+ this.selectMaterialArr=[]
|
|
|
+ this.checkAllStatus=false
|
|
|
+ },
|
|
|
+
|
|
|
+ //搜索素材库
|
|
|
+ handleSearchList(){
|
|
|
+ this.activeClassifyId=0
|
|
|
+ this.$refs.classifyWrapIns.initSelect()
|
|
|
+ this.handleRefreshList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 刷新素材列表
|
|
|
+ handleRefreshList() {
|
|
|
+ this.page = 1
|
|
|
+ this.materialList = []
|
|
|
+ this.finished = false
|
|
|
+ this.isShowBatchOpt=false
|
|
|
+ this.getMaterialList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取图片列表
|
|
|
+ async getMaterialList() {
|
|
|
+ // if (!this.activeClassifyId) return
|
|
|
+ this.materialListLoading = true
|
|
|
+ const res = await apiReportMaterial.materialList({
|
|
|
+ ClassifyId: this.activeClassifyId,
|
|
|
+ Keyword: this.searchVal,
|
|
|
+ CurrentIndex: this.page,
|
|
|
+ PageSize: this.pageSize
|
|
|
+ })
|
|
|
+ this.materialListLoading = false
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ const arr = res.Data.List || []
|
|
|
+ this.materialList = [...this.materialList, ...arr]
|
|
|
+ this.finished = res.Data.Paging.IsEnd
|
|
|
+ this.materialListTotal = res.Data.Paging.Totals
|
|
|
+ },
|
|
|
+
|
|
|
+ loadMaterialList() {
|
|
|
+ if (this.finished) return
|
|
|
+ this.page++
|
|
|
+ this.getMaterialList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选中分类改变
|
|
|
+ handleClassifyChange(e) {
|
|
|
+ this.activeClassifyId = e
|
|
|
+ this.handleRefreshList()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleShowImgFull(item) {
|
|
|
+ this.picShowList = [item.ImgUrl]
|
|
|
+ this.showViewer = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图片操作
|
|
|
+ handleClickOpt(e) {
|
|
|
+ if (e.type === 'edit') {
|
|
|
+ this.currentEditImgData = e.data
|
|
|
+ this.showImgRename = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.type === 'move') {
|
|
|
+ this.currentEditImgData = e.data
|
|
|
+ this.showImgMove = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.type === 'download') {
|
|
|
+ this.handleDownloadResource(e.data.ImgUrl, this.currentLang === 'en' ? e.data.MaterialNameEn : e.data.MaterialName)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.type === 'del') {
|
|
|
+ this.handleImgDel(e.data.MaterialId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图片删除
|
|
|
+ async handleImgDel(id) {
|
|
|
+ await this.$confirm(this.$t('ReportManage.Material.del_attention'), this.$t('Dialog.warn_tit'), {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ const res = await apiReportMaterial.materialDel({
|
|
|
+ MaterialId: id
|
|
|
+ })
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ this.$message.success(this.$t('MsgPrompt.delete_msg'))
|
|
|
+ this.handleRefreshList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.top-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.content-wrap {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ height: calc(100vh - 250px);
|
|
|
+ .img-list-wrap {
|
|
|
+ flex: 1;
|
|
|
+ .top-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #C8CDD9;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .img-list-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+ height: calc(100vh - 320px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .img-item-box {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ width: 200px;
|
|
|
+ position: relative;
|
|
|
+ .opt-box {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 5;
|
|
|
+ .item {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 10px;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ // color: #ffffff;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .opt-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .select-box {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid #C8CDD9;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .title {
|
|
|
+ flex: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 200px;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+ .time-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|