|
@@ -1,11 +1,19 @@
|
|
|
<script setup>
|
|
|
//ETA图库页面
|
|
|
import {ref,reactive} from 'vue'
|
|
|
+import { showToast,showDialog} from "vant";
|
|
|
+import { useWindowSize } from '@vueuse/core'
|
|
|
import CatalogTree from './components/CatalogTree.vue';
|
|
|
+import OptionPopup from './components/OptionPopup.vue';
|
|
|
+import AddChartToMyETA from './components/AddChartToMyETA.vue';
|
|
|
import apiChart from '@/api/chart'
|
|
|
|
|
|
-import {useCatalogList} from './hooks/useCatalogList'
|
|
|
+import {useCatalogList} from './hooks/useCatalogList';
|
|
|
+
|
|
|
+const { width } = useWindowSize()
|
|
|
+
|
|
|
const {
|
|
|
+ optArrChart,//图表操作列表
|
|
|
catalogNodes,//目录列表
|
|
|
getCatalogList,//获取图库目录
|
|
|
} = useCatalogList()
|
|
@@ -35,38 +43,174 @@ function catalogItemClick({item,type='node',parent}){
|
|
|
listState.page=1
|
|
|
getChartList()
|
|
|
}
|
|
|
-//弹窗标识
|
|
|
-//编辑目录名称
|
|
|
+
|
|
|
+const showOptPopup = ref(false)
|
|
|
+const currentOptArr = ref([])
|
|
|
+const currentNode = ref({})
|
|
|
+//展示操作栏
|
|
|
+function showFileOpt({node,optArr}){
|
|
|
+ currentNode.value = node
|
|
|
+ currentOptArr.value = optArr
|
|
|
+ showOptPopup.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//目录/图表操作栏被点击,处理事件(添加图表分类,添加子分类,重命名,删除分类,移动分类,加入我的图库,移动图表)
|
|
|
+function showFileOptClick({node,opt}){
|
|
|
+ const eventMap = {
|
|
|
+ 'addNext':openEditNameDialog,
|
|
|
+ 'reName':openEditNameDialog,
|
|
|
+ 'delete':openDeleteDialog,
|
|
|
+ 'moveTo':openMoveDialog,
|
|
|
+ 'addChart':openAddChartDialog,
|
|
|
+ 'moveChart':openMoveChartDialog,
|
|
|
+ 'cancel':()=>{showOptPopup.value = false}
|
|
|
+ }
|
|
|
+ eventMap[opt.id](node,opt)
|
|
|
+}
|
|
|
+
|
|
|
+//编辑目录参数
|
|
|
const editNameState = reactive({
|
|
|
isShowDialog:false,//是否展示编辑名称弹窗
|
|
|
ChartClassifyId:0,//目录id,为0表示新增
|
|
|
ChartClassifyName:'',
|
|
|
Level:1,//层级,大于1时parentName有值
|
|
|
parentName:'',//上级目录的名称
|
|
|
+ type:'addNew',//编辑类型
|
|
|
title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
|
|
|
-
|
|
|
})
|
|
|
-//打开编辑目录弹窗的操作id
|
|
|
-const editNameDialogOptIds = ['addNext','reName']
|
|
|
-//目录操作栏被点击,处理事件
|
|
|
-function showFileOptClick({node,opt}){
|
|
|
- if(editNameDialogOptIds.includes(opt.id)){
|
|
|
- openEditNameDialog(node,opt)
|
|
|
- }
|
|
|
-}
|
|
|
+//编辑目录
|
|
|
function openEditNameDialog(node,opt){
|
|
|
const {Level,ChartClassifyId,ChartClassifyName,parentName} = node
|
|
|
editNameState.Level = Level||1
|
|
|
editNameState.ChartClassifyId = opt.id==='addNext'?0:ChartClassifyId||0
|
|
|
editNameState.ChartClassifyName = opt.id==='addNext'?'':ChartClassifyName||''
|
|
|
- editNameState.parentName = parentName||(opt.id==='addNext')?ChartClassifyName:''
|
|
|
+ editNameState.parentName = opt.id==='addNext'?ChartClassifyName:parentName||''
|
|
|
+ editNameState.ParentId=opt.id==='addNext'?node.ChartClassifyId:node.ParentId||0
|
|
|
editNameState.title = opt.label
|
|
|
+ editNameState.type = opt.id
|
|
|
editNameState.isShowDialog = true
|
|
|
}
|
|
|
-function handleConfirmEditClassify(){}
|
|
|
+//根据editNameState调用对应接口
|
|
|
+function handleConfirmEditClassify(){
|
|
|
+ //先判断输入框有无内容
|
|
|
+ if(!editNameState.ChartClassifyName.length){
|
|
|
+ showToast('请填写分类名称!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(editNameState.type==='reName'){
|
|
|
+ editClassify()
|
|
|
+ }else{
|
|
|
+ addNewClassify()
|
|
|
+ }
|
|
|
+}
|
|
|
function handleAddClassifyBeforeClose(action){
|
|
|
return action==='cancel'
|
|
|
}
|
|
|
+
|
|
|
+//添加图表分类,添加子分类
|
|
|
+async function addNewClassify(){
|
|
|
+ const {ChartClassifyName,type,ParentId} = editNameState
|
|
|
+ const res = await apiChart.addNewClassify({
|
|
|
+ ChartClassifyName:ChartClassifyName||'',
|
|
|
+ Level:type==='addNext'?1:0,
|
|
|
+ ParentId
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ showToast({message:'添加成功',type:'success'})
|
|
|
+ getCatalogList()
|
|
|
+ editNameState.isShowDialog = false
|
|
|
+}
|
|
|
+//重命名
|
|
|
+async function editClassify(){
|
|
|
+ const {ChartClassifyId,ChartClassifyName} = editNameState
|
|
|
+ const res = await apiChart.editClassify({
|
|
|
+ ChartClassifyId,ChartClassifyName
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ showToast({message:'重命名成功',type:'success'})
|
|
|
+ getCatalogList()
|
|
|
+ editNameState.isShowDialog=false
|
|
|
+}
|
|
|
+
|
|
|
+//删除分类
|
|
|
+async function openDeleteDialog(node){
|
|
|
+ const res = await apiChart.deleteCheck({
|
|
|
+ ChartClassifyId:node.ChartClassifyId,
|
|
|
+ ChartInfoId:node.ChartInfoId
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ //可删除包括删除图表和删除图表分类两种情况,但列表里只能删除分类
|
|
|
+ const hintTextMap = {
|
|
|
+ 0:'确定删除当前分类吗?',
|
|
|
+ 1:'该分类下关联图表不可删除!',
|
|
|
+ 2:'确认删除当前分类及包含的子分类吗?'
|
|
|
+ }
|
|
|
+ showDialog({
|
|
|
+ title: '提示',
|
|
|
+ message: hintTextMap[res.Data.DeleteStatus||0],
|
|
|
+ showCancelButton:res.Data.DeleteStatus!==1
|
|
|
+ }).then(() => {
|
|
|
+ if(res.Data.DeleteStatus!==1){
|
|
|
+ apiChart.deleteClassify({
|
|
|
+ ChartClassifyId:node.ChartClassifyId,
|
|
|
+ ChartInfoId:node.ChartInfoId
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ showToast({message:'删除成功',type:'success'})
|
|
|
+ getCatalogList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(()=>{})
|
|
|
+}
|
|
|
+
|
|
|
+//移动分类参数
|
|
|
+const moveClassState = reactive({
|
|
|
+ isShowPopup:false,//是否显示移动分类弹窗
|
|
|
+ ClassifyId:0,//移动的分类id
|
|
|
+ ParentClassifyId:0,//移动至哪个分类下
|
|
|
+ PrevClassifyId:0,//移动后所处的位置,由于不能拖拽,一直为0
|
|
|
+ NextClassifyId:0
|
|
|
+})
|
|
|
+//移动分类
|
|
|
+function openMoveDialog(node){
|
|
|
+ const {ChartClassifyId} = node
|
|
|
+ moveClassState.ClassifyId = ChartClassifyId
|
|
|
+ moveClassState.isShowPopup = true
|
|
|
+}
|
|
|
+function handleMoveClassify({selectedValues}){
|
|
|
+ moveClassState.ParentClassifyId = selectedValues[0]||0
|
|
|
+ moveClassify()
|
|
|
+}
|
|
|
+function closeMoveDialog(){
|
|
|
+ moveClassState.isShowPopup = false
|
|
|
+ moveClassState.ClassifyId = 0
|
|
|
+ moveClassState.ParentClassifyId = 0
|
|
|
+ moveClassState.PrevClassifyId = 0
|
|
|
+ moveClassState.NextClassifyId = 0
|
|
|
+}
|
|
|
+async function moveClassify(){
|
|
|
+ const {ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId} = moveClassState
|
|
|
+ const res = await apiChart.moveClassify({
|
|
|
+ ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ showToast({message:'移动成功',type:'success'})
|
|
|
+ getCatalogList()
|
|
|
+ moveClassState.isShowPopup = false
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//添加我的图库参数
|
|
|
+const addChartState = reactive({
|
|
|
+ isShowDialog:false,
|
|
|
+ chartInfo:{}
|
|
|
+})
|
|
|
+function openAddChartDialog(node){
|
|
|
+ addChartState.chartInfo = node
|
|
|
+ addChartState.isShowDialog = true
|
|
|
+}
|
|
|
+function openMoveChartDialog(){}
|
|
|
+
|
|
|
//图表列表
|
|
|
const listState = reactive({
|
|
|
cid:0,
|
|
@@ -151,7 +295,7 @@ getChartList()
|
|
|
<img class="img" :src="item.ChartImage" alt="">
|
|
|
<div class="time">
|
|
|
<span>创建时间:{{item.CreateTime.slice(0,10)}}</span>
|
|
|
- <span class="tool-icon">
|
|
|
+ <span class="tool-icon" @click.stop="showFileOpt({node:item,optArr:optArrChart})">
|
|
|
<img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
|
|
|
</span>
|
|
|
</div>
|
|
@@ -169,15 +313,23 @@ getChartList()
|
|
|
<div class="list-box">
|
|
|
<CatalogTree
|
|
|
:catalog-nodes="catalogNodes"
|
|
|
- :showFileOptClick="showFileOptClick"
|
|
|
+ :showFileOpt="showFileOpt"
|
|
|
@handleCatalogItemClick="catalogItemClick"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="bottom sticky-part">
|
|
|
- <span @click.stop="openEditNameDialog({},{id:'addClass',label:'添加图表分类'})">添加图表分类</span>
|
|
|
+ <span @click.stop="openEditNameDialog({},{id:'addNew',label:'添加图表分类'})">添加图表分类</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
+ <!-- 操作栏 -->
|
|
|
+ <OptionPopup
|
|
|
+ :show-popup="showOptPopup"
|
|
|
+ :node="currentNode"
|
|
|
+ :optArr="currentOptArr"
|
|
|
+ :showFileOptClick="showFileOptClick"
|
|
|
+ @close="showOptPopup=false"
|
|
|
+ />
|
|
|
<!-- 添加/重命名一二级分类 弹窗 -->
|
|
|
<van-dialog
|
|
|
v-model:show="editNameState.isShowDialog"
|
|
@@ -188,12 +340,27 @@ getChartList()
|
|
|
:before-close="handleAddClassifyBeforeClose"
|
|
|
>
|
|
|
<div class="rename-wrap">
|
|
|
- <div class="label" v-if="editNameState.parentName.length">一级目录:{{editNameState.parentName}}</div>
|
|
|
+ <div class="label" v-if="editNameState.Level>1||editNameState.type==='addNext'">一级目录:{{editNameState.parentName}}</div>
|
|
|
<input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
|
|
|
</div>
|
|
|
</van-dialog>
|
|
|
- <!-- 移动至 弹窗-->
|
|
|
+ <!-- 移动分类 弹窗-->
|
|
|
+ <van-popup v-model:show="moveClassState.isShowPopup" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="移动至"
|
|
|
+ :columns="catalogNodes"
|
|
|
+ :columns-field-names="{text:'ChartClassifyName',value:'ChartClassifyId'}"
|
|
|
+ @confirm="handleMoveClassify"
|
|
|
+ @cancel="closeMoveDialog"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
<!-- 加入我的图库 弹窗 -->
|
|
|
+ <AddChartToMyETA
|
|
|
+ :isShowDialog="addChartState.isShowDialog"
|
|
|
+ :chartInfo="addChartState.chartInfo"
|
|
|
+ @close="addChartState.isShowDialog=false"
|
|
|
+ />
|
|
|
+ <!-- 移动图表弹窗 -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<style lang="scss">
|
|
@@ -201,10 +368,36 @@ getChartList()
|
|
|
.catalog-list-wrap{
|
|
|
width: 65%;
|
|
|
}
|
|
|
+ .rename-wrap{
|
|
|
+ padding:48px;
|
|
|
+ input{
|
|
|
+ padding: 24px 32px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
@media screen and (min-width:$media-width){
|
|
|
.catalog-list-wrap{
|
|
|
width: 30%;
|
|
|
}
|
|
|
+ .rename-wrap{
|
|
|
+ padding:24px;
|
|
|
+ input{
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
@@ -273,8 +466,12 @@ getChartList()
|
|
|
justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
color: $font-grey_999;
|
|
|
- .tool-icon>img{
|
|
|
- width:5px;
|
|
|
+ .tool-icon{
|
|
|
+ width:30px;
|
|
|
+ text-align: right;
|
|
|
+ img{
|
|
|
+ width:5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -314,20 +511,6 @@ getChartList()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .rename-wrap{
|
|
|
- padding:48px;
|
|
|
- input{
|
|
|
- padding: 24px 32px;
|
|
|
- border-radius: 12px;
|
|
|
- background-color: #F6F6F6;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .label{
|
|
|
- color: #666666;
|
|
|
- margin-bottom: 32px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
@media screen and (min-width:$media-width){
|
|
|
.select-wrap{
|
|
@@ -395,18 +578,6 @@ getChartList()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .rename-wrap{
|
|
|
- padding:24px;
|
|
|
- input{
|
|
|
- padding: 12px 16px;
|
|
|
- border-radius: 6px;
|
|
|
- background-color: #F6F6F6;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .label{
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</style>
|