|
@@ -12,65 +12,67 @@
|
|
|
width="650px"
|
|
|
>
|
|
|
<div class="main">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- class="classify-tree"
|
|
|
- :data="classifyOptions"
|
|
|
- node-key="ClassifyId"
|
|
|
- :props="{
|
|
|
- value: 'ClassifyId',
|
|
|
- label: 'ClassifyName',
|
|
|
- children: 'Child',
|
|
|
- }"
|
|
|
- :expand-on-click-node="false"
|
|
|
- check-strictly
|
|
|
- empty-text="暂无分类"
|
|
|
- draggable
|
|
|
- :allow-drop="canDropHandle"
|
|
|
- @node-drop="dropOverHandle"
|
|
|
- @current-change="handleNodeChange"
|
|
|
- >
|
|
|
- <div class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
- <span
|
|
|
- class="text_oneLine node_label"
|
|
|
- >
|
|
|
- {{ data.ClassifyName }}
|
|
|
- </span>
|
|
|
-
|
|
|
- <div v-if="selectItem.ClassifyId===data.ClassifyId">
|
|
|
- <img
|
|
|
- src="~@/assets/img/data_m/move_ico.png"
|
|
|
- class="handle-icon"
|
|
|
- />
|
|
|
- <!-- 添加子项 -->
|
|
|
- <img
|
|
|
- src="~@/assets/img/set_m/add.png"
|
|
|
- class="handle-icon"
|
|
|
- @click.stop="handleAddNode(data,node)"
|
|
|
- v-if="node.level<3"
|
|
|
- />
|
|
|
- <!-- 编辑目录 -->
|
|
|
- <img
|
|
|
- src="~@/assets/img/set_m/edit.png"
|
|
|
- class="handle-icon"
|
|
|
- @click.stop="handleEditNode(data,node)"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 删除目录 -->
|
|
|
- <el-popconfirm
|
|
|
- title="确认删除该分类吗?"
|
|
|
- @onConfirm="handleRemoveNode(data)"
|
|
|
- >
|
|
|
+ <div class="tree-wrap">
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ class="classify-tree"
|
|
|
+ :data="classifyOptions"
|
|
|
+ node-key="ClassifyId"
|
|
|
+ :props="{
|
|
|
+ value: 'ClassifyId',
|
|
|
+ label: 'ClassifyName',
|
|
|
+ children: 'Child',
|
|
|
+ }"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ check-strictly
|
|
|
+ empty-text="暂无分类"
|
|
|
+ draggable
|
|
|
+ :allow-drop="canDropHandle"
|
|
|
+ @node-drop="dropOverHandle"
|
|
|
+ @current-change="handleNodeChange"
|
|
|
+ >
|
|
|
+ <div class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span
|
|
|
+ class="text_oneLine node_label"
|
|
|
+ >
|
|
|
+ {{ data.ClassifyName }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div v-if="selectItem.ClassifyId===data.ClassifyId">
|
|
|
<img
|
|
|
- slot="reference"
|
|
|
- src="~@/assets/img/set_m/del_icon.png"
|
|
|
+ src="~@/assets/img/data_m/move_ico.png"
|
|
|
class="handle-icon"
|
|
|
/>
|
|
|
- </el-popconfirm>
|
|
|
-
|
|
|
+ <!-- 添加子项 -->
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/set_m/add.png"
|
|
|
+ class="handle-icon"
|
|
|
+ @click.stop="handleAddNode(data,node)"
|
|
|
+ v-if="node.level<3"
|
|
|
+ />
|
|
|
+ <!-- 编辑目录 -->
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/set_m/edit.png"
|
|
|
+ class="handle-icon"
|
|
|
+ @click.stop="handleEditNode(data,node)"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 删除目录 -->
|
|
|
+ <el-popconfirm
|
|
|
+ title="确认删除该分类吗?"
|
|
|
+ @onConfirm="handleRemoveNode(data)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ slot="reference"
|
|
|
+ src="~@/assets/img/set_m/del_icon.png"
|
|
|
+ class="handle-icon"
|
|
|
+ />
|
|
|
+ </el-popconfirm>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-tree>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<div class="clasify-add-cont" @click="handleAddNode(null)">
|
|
@@ -92,7 +94,7 @@
|
|
|
@close="isClassifyEditDia=false"
|
|
|
top="10vh"
|
|
|
v-dialogDrag
|
|
|
- title="分类编辑"
|
|
|
+ :title="classifyForm.classifyId ? '编辑分类' : '添加分类'"
|
|
|
width="650px"
|
|
|
>
|
|
|
<el-form
|
|
@@ -306,7 +308,6 @@ export default {
|
|
|
|
|
|
//控制同级拖动
|
|
|
canDropHandle(draggingNode, dropNode, type){
|
|
|
- console.log(draggingNode, dropNode, type)
|
|
|
if(type==='inner') return false
|
|
|
if(draggingNode.level!==dropNode.level) return false
|
|
|
if(draggingNode.data.ParentId!=dropNode.data.ParentId) return false
|
|
@@ -319,20 +320,23 @@ export default {
|
|
|
<style scoped lang='scss'>
|
|
|
.main {
|
|
|
padding: 0 30px;
|
|
|
- .classify-tree {
|
|
|
+ .tree-wrap{
|
|
|
height: 50vh;
|
|
|
min-height: 300px;
|
|
|
overflow-y: auto;
|
|
|
- .custom-tree-node {
|
|
|
+ .classify-tree {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .handle-icon {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin: 0 4px;
|
|
|
+ .custom-tree-node {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .handle-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.clasify-add-cont {
|