|
@@ -1,9 +1,10 @@
|
|
|
<script setup>
|
|
|
-import {reactive, ref,watch} from 'vue'
|
|
|
+import {computed, reactive, ref,watch} from 'vue'
|
|
|
import { useWindowSize } from '@vueuse/core'
|
|
|
import apiDataEDB from '@/api/dataEDB'
|
|
|
import { showDialog , showToast } from 'vant';
|
|
|
import {useEDBDelete} from '../hooks/useEDBDelete'
|
|
|
+import {deleteClassifyItemEmpty} from '../util/util'
|
|
|
|
|
|
const {edbClassifyDelete}=useEDBDelete()
|
|
|
const { width } = useWindowSize()
|
|
@@ -17,33 +18,88 @@ const props=defineProps({
|
|
|
const emits=defineEmits(['update:modelValue','change'])
|
|
|
|
|
|
|
|
|
+// 处理分类数据 index为要过滤的层级数
|
|
|
+// 如index 为3 则获取arr的前三层数据
|
|
|
+function formatClassifyArr(arr,index){
|
|
|
+ index--
|
|
|
+ arr.length&&arr.forEach(item=>{
|
|
|
+ if(!item.Children?.length||index<=0){
|
|
|
+ delete item.Children
|
|
|
+ }
|
|
|
+ item.Children?.length&&formatClassifyArr(item.Children,index)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
const langType=ref('zh')
|
|
|
function langTypeChange(type){
|
|
|
langType.value=type
|
|
|
}
|
|
|
|
|
|
-// 当前点击了哪些分类
|
|
|
-let selectClassifyNameStr=''
|
|
|
-let selectClassifyId=0
|
|
|
-function handleSelectClassify(level1,level2,level3){
|
|
|
- // console.log(level1,level2,level3);
|
|
|
- if(level1){
|
|
|
- selectClassifyId=level1.ClassifyId
|
|
|
- selectClassifyNameStr=`${level1.ClassifyName}`
|
|
|
+const selectClassifyArr=ref([])//当前选择的哪些目录
|
|
|
+function findClassifyList(arr,id){
|
|
|
+ let temarr=[]
|
|
|
+ arr.forEach(item=>{
|
|
|
+ if(item.ClassifyId===id){
|
|
|
+ if(item.Children?.length){
|
|
|
+ temarr=item.Children
|
|
|
+ }else{// 如果选中了最后一级目录或者这个目录没有子目录则就返回他本身
|
|
|
+ temarr=arr
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return temarr
|
|
|
+}
|
|
|
+//显示的目录数据
|
|
|
+const showClassifyArrData=computed(()=>{
|
|
|
+ if(selectClassifyArr.value.length===0) return classifyList.value
|
|
|
+ let arr=classifyList.value
|
|
|
+ for (let index = 0; index < selectClassifyArr.value.length; index++) {
|
|
|
+ arr=findClassifyList(arr,selectClassifyArr.value[index].ClassifyId)
|
|
|
}
|
|
|
- if(level2){
|
|
|
- selectClassifyId=level2.ClassifyId
|
|
|
- selectClassifyNameStr=`${level1.ClassifyName}/${level2.ClassifyName}`
|
|
|
+ return arr
|
|
|
+})
|
|
|
+//点击目录
|
|
|
+function handleSelectClassify(item){
|
|
|
+ // 如果当前选择的分类的最后一个在当前这个显示的目录里则将最后一个替换掉
|
|
|
+ const last=selectClassifyArr.value[selectClassifyArr.value.length-1]
|
|
|
+ // console.log(last);
|
|
|
+ const flag=showClassifyArrData.value.some(e=>e.ClassifyId===last?.ClassifyId)
|
|
|
+ if(flag){
|
|
|
+ selectClassifyArr.value[selectClassifyArr.value.length-1]=item
|
|
|
+ return
|
|
|
}
|
|
|
- if(level3){
|
|
|
- selectClassifyId=level3.ClassifyId
|
|
|
- selectClassifyNameStr=`${level1.ClassifyName}/${level2.ClassifyName}/${level3.ClassifyName}`
|
|
|
+ if(item.ClassifyId!==selectClassifyArr.value[selectClassifyArr.value.length-1]?.ClassifyId){
|
|
|
+ selectClassifyArr.value.push(item)
|
|
|
}
|
|
|
}
|
|
|
+//返回上级目录
|
|
|
+function handleBackClassify(index){
|
|
|
+ if(index===-1){
|
|
|
+ const flag=showClassifyArrData.value.some(item=>item.ClassifyId===selectClassifyArr.value[selectClassifyArr.value.length-1]?.ClassifyId)
|
|
|
+ if(flag){
|
|
|
+ selectClassifyArr.value.length=selectClassifyArr.value.length-2
|
|
|
+ }else{
|
|
|
+ selectClassifyArr.value.length=selectClassifyArr.value.length-1
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ selectClassifyArr.value.length=selectClassifyArr.value.length-index
|
|
|
+}
|
|
|
+// 显示选择的父级目录
|
|
|
+const showParentClassifyData=computed(()=>{
|
|
|
+ const id=selectClassifyArr.value[selectClassifyArr.value.length-1]?.ClassifyId
|
|
|
+ const flag=showClassifyArrData.value.some(item=>item.ClassifyId===id)
|
|
|
+ if(flag) return selectClassifyArr.value.slice(0,selectClassifyArr.value.length-1)
|
|
|
+ return selectClassifyArr.value
|
|
|
+})
|
|
|
|
|
|
// 关闭弹窗
|
|
|
function handleClose(){
|
|
|
- emits('change',{selectClassifyNameStr,selectClassifyId})
|
|
|
+ let selectClassifyId=selectClassifyArr.value[selectClassifyArr.value.length-1]?.ClassifyId||0
|
|
|
+ let selectClassifyNameArr=selectClassifyArr.value.map(item=>getClassifyItemName(item))
|
|
|
+
|
|
|
+
|
|
|
+ emits('change',{selectClassifyNameStr:selectClassifyNameArr.join('/'),selectClassifyId})
|
|
|
emits('update:modelValue',false)
|
|
|
}
|
|
|
|
|
@@ -53,18 +109,16 @@ function getClassifyItemName(item){
|
|
|
}
|
|
|
|
|
|
// 获取分类数据
|
|
|
-const classifyList=ref([])
|
|
|
+let classifyList=ref([])
|
|
|
async function getEDBClassifyList(){
|
|
|
const res=await apiDataEDB.edbClassifyList()
|
|
|
if(res.Ret===200){
|
|
|
+ deleteClassifyItemEmpty(res.Data.AllNodes||[])
|
|
|
classifyList.value=res.Data.AllNodes||[]
|
|
|
- // langType.value=res.Data.Language==='CN'?'zh':'en'
|
|
|
}
|
|
|
}
|
|
|
getEDBClassifyList()
|
|
|
|
|
|
-const openClassify=ref([])//当前展开的分类
|
|
|
-
|
|
|
// 分类操作数据
|
|
|
const classifyState=reactive({
|
|
|
show:false,
|
|
@@ -72,9 +126,7 @@ const classifyState=reactive({
|
|
|
name:'',//输入框中的值
|
|
|
placeholderText:'',
|
|
|
type:'add',//新增、编辑
|
|
|
- level:1,//1新增/编辑一级目录,2新增/编辑二级目录
|
|
|
- level1Text:'',
|
|
|
- level2Text:'',
|
|
|
+ parentText:'',
|
|
|
parentId:0,
|
|
|
classifyId:0,
|
|
|
})
|
|
@@ -86,9 +138,7 @@ watch(
|
|
|
classifyState.name=''
|
|
|
classifyState.placeholderText=''
|
|
|
classifyState.type='add'
|
|
|
- classifyState.level=1
|
|
|
- classifyState.level1Text=''
|
|
|
- classifyState.level2Text=''
|
|
|
+ classifyState.parentText=''
|
|
|
classifyState.parentId=0
|
|
|
classifyState.classifyId=0
|
|
|
}
|
|
@@ -124,121 +174,67 @@ async function handleConfirmClassifyState(){
|
|
|
const classifyOptState=reactive({
|
|
|
show:false,
|
|
|
actions:[],
|
|
|
- level:1,//点击的是几级
|
|
|
- level1Data:null,
|
|
|
- level2Data:null,
|
|
|
- level3Data:null
|
|
|
+ data:{}
|
|
|
})
|
|
|
watch(
|
|
|
()=>classifyOptState.show,
|
|
|
(n)=>{
|
|
|
if(!n){
|
|
|
classifyOptState.actions=[]
|
|
|
- classifyOptState.level=1
|
|
|
- classifyOptState.level1Data=null
|
|
|
- classifyOptState.level2Data=null
|
|
|
- classifyOptState.level3Data=null
|
|
|
+ classifyOptState.data={}
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
// 显示分类的具体操作选项
|
|
|
-function handleShowClassifyOpt(level,level1,level2,level3){
|
|
|
+function handleShowClassifyOpt(item){
|
|
|
let optArr=[
|
|
|
{name:'重命名',type:'edit'},
|
|
|
- {name:'删除',type:'delete',color:"#C54322"}
|
|
|
+ {name:'删除',type:'delete',color:"#C54322"},
|
|
|
]
|
|
|
- if(level===1){
|
|
|
- // 判断操作权限
|
|
|
- if(level1.Button.AddButton){//添加权限
|
|
|
- optArr.unshift({name:'添加二级目录',type:'add'})
|
|
|
- }
|
|
|
- if(!level1.Button.OpButton){//编辑权限
|
|
|
- optArr=optArr.filter(item=>item.type!='edit')
|
|
|
- }
|
|
|
- if(!level1.Button.DeleteButton){//删除
|
|
|
- optArr=optArr.filter(item=>item.type!='delete')
|
|
|
- }
|
|
|
- }else if(level===2){
|
|
|
- // 判断操作权限
|
|
|
- if(level2.Button.AddButton){//添加权限
|
|
|
- optArr.unshift({name:'添加三级目录',type:'add'})
|
|
|
- }
|
|
|
- if(level2.Button.MoveButton){//移动权限
|
|
|
- optArr.push({name:'移动至',type:'move'})
|
|
|
- }
|
|
|
- if(!level2.Button.OpButton){//编辑权限
|
|
|
- optArr=optArr.filter(item=>item.type!='edit')
|
|
|
- }
|
|
|
- if(!level2.Button.DeleteButton){//删除
|
|
|
- optArr=optArr.filter(item=>item.type!='delete')
|
|
|
- }
|
|
|
- }else if(level===3){
|
|
|
- // 判断操作权限
|
|
|
- if(level3.Button.MoveButton){//移动权限
|
|
|
+ if(item.Button.AddButton&&showParentClassifyData.value.length<5){//添加权限
|
|
|
+ optArr.unshift({name:'添加下级目录',type:'add'})
|
|
|
+ }
|
|
|
+ if(!item.Button.DeleteButton){//删除
|
|
|
+ optArr=optArr.filter(item=>item.type!='delete')
|
|
|
+ }
|
|
|
+ if(item.Button.MoveButton){//移动权限
|
|
|
+ // 一级目录不能移动至
|
|
|
+ if(selectClassifyArr.value.length){
|
|
|
optArr.push({name:'移动至',type:'move'})
|
|
|
}
|
|
|
- if(!level3.Button.OpButton){//编辑权限
|
|
|
- optArr=optArr.filter(item=>item.type!='edit')
|
|
|
- }
|
|
|
- if(!level3.Button.DeleteButton){//删除
|
|
|
- optArr=optArr.filter(item=>item.type!='delete')
|
|
|
- }
|
|
|
}
|
|
|
classifyOptState.actions=optArr
|
|
|
- classifyOptState.level=level
|
|
|
- classifyOptState.level1Data=level1
|
|
|
- classifyOptState.level2Data=level2
|
|
|
- classifyOptState.level3Data=level3
|
|
|
+ classifyOptState.data=item
|
|
|
classifyOptState.show=true
|
|
|
}
|
|
|
function handleSelectOpt(e){
|
|
|
if(e.type==='add'){
|
|
|
+ const temarr=[...showParentClassifyData.value,{...classifyOptState.data}]
|
|
|
+ const selectClassifyNameArr=temarr.map(item=>getClassifyItemName(item))
|
|
|
+ classifyState.parentText=selectClassifyNameArr.join('/')
|
|
|
+
|
|
|
classifyState.title=e.name
|
|
|
classifyState.placeholderText='请输入目录名称'
|
|
|
classifyState.type='add'
|
|
|
- classifyState.level1Text=classifyOptState.level1Data?.ClassifyName
|
|
|
- classifyState.level2Text=classifyOptState.level2Data?.ClassifyName
|
|
|
- if(classifyOptState.level===1){
|
|
|
- classifyState.parentId=classifyOptState.level1Data?.ClassifyId
|
|
|
- classifyState.level=1
|
|
|
- }
|
|
|
- if(classifyOptState.level===2){
|
|
|
- classifyState.parentId=classifyOptState.level2Data?.ClassifyId
|
|
|
- classifyState.level=2
|
|
|
- }
|
|
|
+ classifyState.parentId=classifyOptState.data.ClassifyId
|
|
|
classifyState.show=true
|
|
|
}
|
|
|
if(e.type==='edit'){
|
|
|
+ const temarr=[...showParentClassifyData.value]
|
|
|
+ const selectClassifyNameArr=temarr.map(item=>getClassifyItemName(item))
|
|
|
+ classifyState.parentText=selectClassifyNameArr.join('/')
|
|
|
+
|
|
|
classifyState.title='重命名'
|
|
|
classifyState.placeholderText='请输入目录名称'
|
|
|
classifyState.type='edit'
|
|
|
- classifyState.level=classifyOptState.level
|
|
|
- if(classifyOptState.level===1){
|
|
|
- classifyState.classifyId=classifyOptState.level1Data?.ClassifyId
|
|
|
- classifyState.name=classifyOptState.level1Data?.ClassifyName
|
|
|
- }else if(classifyOptState.level===2){
|
|
|
- classifyState.level1Text=classifyOptState.level1Data?.ClassifyName
|
|
|
- classifyState.classifyId=classifyOptState.level2Data?.ClassifyId
|
|
|
- classifyState.name=classifyOptState.level2Data?.ClassifyName
|
|
|
- }else if(classifyOptState.level===3){
|
|
|
- classifyState.level1Text=classifyOptState.level1Data?.ClassifyName
|
|
|
- classifyState.level2Text=classifyOptState.level2Data?.ClassifyName
|
|
|
- classifyState.classifyId=classifyOptState.level3Data?.ClassifyId
|
|
|
- classifyState.name=classifyOptState.level3Data?.ClassifyName
|
|
|
- }
|
|
|
+ classifyState.name=classifyOptState.data.ClassifyName
|
|
|
+ classifyState.classifyId=classifyOptState.data.ClassifyId
|
|
|
classifyState.show=true
|
|
|
}
|
|
|
if(e.type==='delete'){
|
|
|
- let data=null
|
|
|
- if(classifyOptState.level===1){
|
|
|
- data=classifyOptState.level1Data
|
|
|
- }else if(classifyOptState.level===2){
|
|
|
- data=classifyOptState.level2Data
|
|
|
- }else if(classifyOptState.level===3){
|
|
|
- data=classifyOptState.level3Data
|
|
|
- }
|
|
|
+ let data=classifyOptState.data
|
|
|
edbClassifyDelete(data).then(res=>{
|
|
|
- console.log(res===true);
|
|
|
+ // console.log(res===true);
|
|
|
if(res===true){
|
|
|
getEDBClassifyList()
|
|
|
}
|
|
@@ -247,35 +243,11 @@ function handleSelectOpt(e){
|
|
|
if(e.type==='move'){
|
|
|
classifyMoveState.selectValue=''
|
|
|
classifyMoveState.tabIndex=0
|
|
|
- if(classifyOptState.level===2){
|
|
|
- //移动二级
|
|
|
- classifyMoveState.options=classifyList.value.map(item=>{
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- Children:null
|
|
|
- }
|
|
|
- })
|
|
|
- classifyMoveState.classifyId=classifyOptState.level2Data.ClassifyId
|
|
|
- classifyMoveState.moveLevel=2
|
|
|
- }
|
|
|
- if(classifyOptState.level===3){
|
|
|
- //移动三级
|
|
|
- classifyMoveState.options=classifyList.value.map(item=>{
|
|
|
- const children=item.Children.map(_item=>{
|
|
|
- return {
|
|
|
- ..._item,
|
|
|
- Children:null
|
|
|
- }
|
|
|
- })
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- Children:children
|
|
|
- }
|
|
|
- })
|
|
|
- classifyMoveState.classifyId=classifyOptState.level3Data.ClassifyId
|
|
|
- classifyMoveState.moveLevel=3
|
|
|
- }
|
|
|
-
|
|
|
+ const level=showParentClassifyData.value.length
|
|
|
+ const arr=JSON.parse(JSON.stringify(classifyList.value))
|
|
|
+ formatClassifyArr(arr,level)
|
|
|
+ classifyMoveState.options=arr||[]
|
|
|
+ classifyMoveState.classifyId=classifyOptState.data.ClassifyId
|
|
|
classifyMoveState.show=true
|
|
|
}
|
|
|
classifyOptState.show=false
|
|
@@ -287,44 +259,25 @@ const classifyMoveState=reactive({
|
|
|
selectValue:'',
|
|
|
options:[],
|
|
|
classifyId:0,//要移动的分类id
|
|
|
- tabIndex:0,//当前选择了哪一级的分类
|
|
|
- moveLevel:2,//要移动的分类是哪级
|
|
|
})
|
|
|
function handleSelectMoveClassifyChange({value,selectedOptions,tabIndex}){
|
|
|
- classifyMoveState.tabIndex=tabIndex
|
|
|
+ // classifyMoveState.tabIndex=tabIndex
|
|
|
}
|
|
|
function handleConfirmMove(){
|
|
|
if(!classifyMoveState.selectValue){
|
|
|
showToast('请选择要移动至的目录')
|
|
|
return
|
|
|
}
|
|
|
- if(classifyMoveState.moveLevel===3&&classifyMoveState.tabIndex!=1){
|
|
|
- showToast('请选择要移动至的二级目录')
|
|
|
- return
|
|
|
- }
|
|
|
- let NextClassifyId=0
|
|
|
- if(classifyMoveState.moveLevel===2){
|
|
|
- const index=classifyMoveState.options.findIndex(e=>e.ClassifyId===classifyMoveState.selectValue)
|
|
|
- console.log(index);
|
|
|
- NextClassifyId=classifyList.value[index].Children[0]?.ClassifyId
|
|
|
- }else if(classifyMoveState.moveLevel===3){
|
|
|
- let index1=0,index2=0;
|
|
|
- classifyMoveState.options.forEach((e,idx)=>{
|
|
|
- e.Children?.forEach((e2,idx2)=>{
|
|
|
- if(e2.ClassifyId===classifyMoveState.selectValue){
|
|
|
- index1=idx
|
|
|
- index2=idx2
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- NextClassifyId=classifyList.value[index1].Children[index2].Children[0]?.ClassifyId
|
|
|
- }
|
|
|
- // console.log(NextClassifyId);
|
|
|
- apiDataEDB.edbClassifyMove({
|
|
|
+
|
|
|
+ // 只会将目录移动到某个目录里面所有下面有很多都是0
|
|
|
+ apiDataEDB.edbCatalogMove({
|
|
|
ClassifyId:classifyMoveState.classifyId,
|
|
|
ParentClassifyId:classifyMoveState.selectValue,
|
|
|
+ EdbInfoId:0,
|
|
|
PrevClassifyId:0,
|
|
|
- NextClassifyId:NextClassifyId
|
|
|
+ NextClassifyId:0,
|
|
|
+ PrevEdbInfoId:0,
|
|
|
+ NextEdbInfoId:0,
|
|
|
}).then(res=>{
|
|
|
if(res.Ret===200){
|
|
|
showToast('移动成功')
|
|
@@ -335,7 +288,6 @@ function handleConfirmMove(){
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
defineExpose({classifyList,langTypeChange})
|
|
|
</script>
|
|
|
|
|
@@ -348,66 +300,26 @@ defineExpose({classifyList,langTypeChange})
|
|
|
@click-close-icon="handleClose"
|
|
|
>
|
|
|
<div class="edb-classify-wrap">
|
|
|
- <div class="top-box"></div>
|
|
|
- <div class="classify-box">
|
|
|
- <van-collapse v-model="openClassify" :border="false">
|
|
|
- <van-collapse-item
|
|
|
- v-for="level1 in classifyList"
|
|
|
- :key="level1.ClassifyId"
|
|
|
- :name="level1.ClassifyId"
|
|
|
- :is-link="false"
|
|
|
- :border="false"
|
|
|
- >
|
|
|
- <template #title>
|
|
|
- <div class="van-ellipsis" @click="handleSelectClassify(level1)">
|
|
|
- <van-icon :name="openClassify.includes(level1.ClassifyId)?'arrow-down':'arrow'" style="margin-right:4px;cursor: pointer;"/>
|
|
|
- <span :style="{color:selectClassifyId===level1.ClassifyId?'#0052D9':''}">{{getClassifyItemName(level1)}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #value>
|
|
|
- <img style="width:22px;height:22px;cursor: pointer;" src="@/assets/imgs/dataEDB/icon_opt.png" alt="" @click.stop="handleShowClassifyOpt(1,level1)">
|
|
|
- </template>
|
|
|
- <div class="level2-box">
|
|
|
- <van-collapse-item
|
|
|
- v-for="level2 in level1.Children"
|
|
|
- :key="level2.ClassifyId"
|
|
|
- :name="level2.ClassifyId"
|
|
|
- :is-link="false"
|
|
|
- :border="false"
|
|
|
- >
|
|
|
- <template #title>
|
|
|
- <div class="van-ellipsis" @click="handleSelectClassify(level1,level2)">
|
|
|
- <van-icon :name="openClassify.includes(level2.ClassifyId)?'arrow-down':'arrow'" style="margin-right:4px;cursor: pointer;"/>
|
|
|
- <span :style="{color:selectClassifyId===level2.ClassifyId?'#0052D9':''}">{{getClassifyItemName(level2)}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #value>
|
|
|
- <img style="width:22px;height:22px;cursor: pointer;" src="@/assets/imgs/dataEDB/icon_opt.png" alt="" @click.stop="handleShowClassifyOpt(2,level1,level2)">
|
|
|
- </template>
|
|
|
- <div class="level3-box">
|
|
|
- <van-collapse-item
|
|
|
- v-for="level3 in level2.Children"
|
|
|
- :key="level3.ClassifyId"
|
|
|
- :title="getClassifyItemName(level3)"
|
|
|
- :name="level3.ClassifyId"
|
|
|
- :is-link="false"
|
|
|
- :border="false"
|
|
|
- >
|
|
|
- <template #title>
|
|
|
- <div class="van-ellipsis" @click="handleSelectClassify(level1,level2,level3)">
|
|
|
- <span :style="{color:selectClassifyId===level3.ClassifyId?'#0052D9':''}">{{getClassifyItemName(level3)}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #value>
|
|
|
- <img style="width:22px;height:22px;cursor: pointer;" src="@/assets/imgs/dataEDB/icon_opt.png" alt="" @click.stop="handleShowClassifyOpt(3,level1,level2,level3)">
|
|
|
- </template>
|
|
|
- </van-collapse-item>
|
|
|
- </div>
|
|
|
- </van-collapse-item>
|
|
|
- </div>
|
|
|
- </van-collapse-item>
|
|
|
- </van-collapse>
|
|
|
+ <div class="top-box">
|
|
|
+ <van-icon name="arrow-left" size='20' @click="handleBackClassify(-1)" v-if="showParentClassifyData.length>0"/>
|
|
|
+ <div class="catalog-text-box">
|
|
|
+ <span
|
|
|
+ v-for="item,index in showParentClassifyData"
|
|
|
+ :key="item.ClassifyId"
|
|
|
+ @click="handleBackClassify(selectClassifyArr.length-index)"
|
|
|
+ >{{getClassifyItemName(item)}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <ul class="classify-box">
|
|
|
+ <li class="classify-item" v-for="item in showClassifyArrData" :key="item.UniqueCode">
|
|
|
+ <span
|
|
|
+ class="van-ellipsis title"
|
|
|
+ :style="{color:selectClassifyArr[selectClassifyArr.length-1]?.ClassifyId===item.ClassifyId?'#0052D9':''}"
|
|
|
+ @click.stop="handleSelectClassify(item)"
|
|
|
+ >{{getClassifyItemName(item)}}</span>
|
|
|
+ <img style="width:22px;height:22px;cursor: pointer;" src="@/assets/imgs/dataEDB/icon_opt.png" alt="" @click.stop="handleShowClassifyOpt(item)">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
<div class="bot-btn-box">
|
|
|
<van-button type="primary" block @click="handleAddLevel1">添加一级目录</van-button>
|
|
|
</div>
|
|
@@ -430,8 +342,7 @@ defineExpose({classifyList,langTypeChange})
|
|
|
@confirm="handleConfirmClassifyState"
|
|
|
>
|
|
|
<div class="edit-classify-wrap">
|
|
|
- <p v-if="classifyState.level1Text" style="margin-bottom:8px">一级目录:{{classifyState.level1Text}}</p>
|
|
|
- <p v-if="classifyState.level2Text" style="margin-bottom:8px">二级目录:{{classifyState.level2Text}}</p>
|
|
|
+ <p class="van-ellipsis" v-if="classifyState.parentText" style="margin-bottom:8px">上级目录:{{classifyState.parentText}}</p>
|
|
|
<input class="input-box" type="text" :placeholder="classifyState.placeholderText" v-model="classifyState.name">
|
|
|
</div>
|
|
|
</van-dialog>
|
|
@@ -465,21 +376,46 @@ defineExpose({classifyList,langTypeChange})
|
|
|
height: calc(var(--van-popup-close-icon-margin) + 50px);
|
|
|
background-color: #fff;
|
|
|
flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: calc(var(--van-popup-close-icon-margin) + var(--van-popup-close-icon-size));
|
|
|
+ padding-top: var(--van-popup-close-icon-margin);
|
|
|
+ padding-left: 28px;
|
|
|
+ .catalog-text-box{
|
|
|
+ margin-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ overflow-x: auto;
|
|
|
+ display: flex;
|
|
|
+ &::-webkit-scrollbar{
|
|
|
+ display: none;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+ &::after{
|
|
|
+ content:'/'
|
|
|
+ }
|
|
|
+ &:last-child::after{
|
|
|
+ content:''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.classify-box{
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
- :deep(.van-cell__title){
|
|
|
- flex: 2;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- :deep(.van-collapse-item__content){
|
|
|
- padding-right: 0;
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
+ padding: 0 32px;
|
|
|
+ .classify-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ .title{
|
|
|
+ flex: 1;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.bot-btn-box{
|
|
@@ -506,6 +442,19 @@ defineExpose({classifyList,langTypeChange})
|
|
|
.edb-classify-wrap{
|
|
|
.top-box{
|
|
|
height: calc(var(--van-popup-close-icon-margin) + 50px);
|
|
|
+ padding-left: 14px;
|
|
|
+ .catalog-text-box{
|
|
|
+ margin-left: 10px;
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .classify-box{
|
|
|
+ padding: 0 16px;
|
|
|
+ .classify-item{
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
}
|
|
|
.bot-btn-box{
|
|
|
padding: 24px;
|