Skip to content

P
pptist
Commit fc06d6c8 authored by 罗超's avatar 罗超
Browse files
Options

解决树形下拉菜单的宽度和样式问题

parent f0135ede
Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 246 deletions
src/assets/styles/common.css
View file @ fc06d6c8
...@@ -420,3 +420,10 @@ page { ...@@ -420,3 +420,10 @@ page {
.wrap{ .wrap{
white-space: wrap; white-space: wrap;
} }
.el-select .el-tree.auto-width-tree{
width: unset !important;
}
.el-select .el-tree.auto-width-tree li span{
font-size: 12px;
font-weight: normal !important;
}
\ No newline at end of file
src/views/SellTemplate/components/CopyFile.vue
View file @ fc06d6c8
<template> <template>
<el-dialog v-model="show" v-loading="loading" :show-close="false" <el-dialog v-model="show" v-loading="loading" :show-close="false" :close-on-press-escape="false"
:close-on-press-escape="false" :close-on-click-modal="false" :close-on-click-modal="false" style="width: 260px">
style="width: 260px;">
<template #header> <template #header>
<div class="row overflow-hide" @click="OffEdit"> <div class="row overflow-hide" @click="OffEdit">
<div> <div>
<template v-if="type"> <template v-if="type">
<img v-if="fileObj.FileType>0" class="q-px-md" <img v-if="fileObj.FileType > 0" class="q-px-md"
:src="fileObj.FileType==1?datas.pdfImg:datas.adsImg" :src="fileObj.FileType == 1 ? datas.pdfImg : datas.adsImg" style="height: 43px" />
style="height: 43px;" /> <img v-else class="q-px-md" src="@/assets/img/file.png" style="height: 43px" />
<img v-else class="q-px-md"
src="@/assets/img/file.png"
style="height: 43px;" />
</template> </template>
<template v-else> <template v-else>
<img v-if="details.FileType>0" class="q-px-md" <img v-if="details.FileType > 0" class="q-px-md"
:src="details.FileType==1?datas.pdfImg:datas.adsImg" :src="details.FileType == 1 ? datas.pdfImg : datas.adsImg" style="height: 43px" />
style="height: 43px;" /> <img v-else class="q-px-md" src="@/assets/img/file.png" style="height: 43px" />
<img v-else class="q-px-md"
src="@/assets/img/file.png"
style="height: 43px;" />
</template> </template>
</div> </div>
<div class="q-pl-md col"> <div class="q-pl-md col">
<div class="row flex-center"> <div class="row flex-center">
<el-tooltip <el-tooltip v-if="!datas.editTitle" placement="top-start">
v-if="!datas.editTitle" <template #content>
placement="top-start"> <div class="text-center" style="width: 200px">
<template #content><div class="text-center" style="width: 200px;">{{details.FileName}}</div></template> {{ details.FileName }}
<div class="TreeFile-Title pointer" @click.stop="datas.editTitle=true">{{details.FileName}}</div> </div>
</template>
<div class="TreeFile-Title pointer" @click.stop="datas.editTitle = true">
{{ details.FileName }}
</div>
</el-tooltip> </el-tooltip>
<el-input <el-input class="journeyAds-Input" v-model="details.FileName" autosize type="textarea"
class="journeyAds-Input" placeholder="Please input" maxlength="500" size="small" v-if="datas.editTitle"
v-model="details.FileName" @blur="handleUpdateTitle" />
autosize
type="textarea"
placeholder="Please input"
maxlength="500"
size="small"
v-if="datas.editTitle"
@blur="handleUpdateTitle"
/>
</div> </div>
<div class="text-small text-5B5D62 q-pt-sm"> <div class="text-small text-5B5D62 q-pt-sm">
创建者： 创建者：
<template v-if="type==1"> <template v-if="type == 1">
{{details.CreateByName}} {{ details.CreateByName }}
</template> </template>
<template v-else> <template v-else>
{{details.CreateName}} {{ details.CreateName }}
</template> </template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<div class="TreeFile-container" @click="!type?OffEdit:''"> <div class="TreeFile-container" @click="!type ? OffEdit : ''">
<el-tree-select <el-tree-select placeholder="请选择文件" node-key="FileId" :props="defaultProps" v-model="datas.FolderId"
placeholder="请选择文件" :data="dataList" default-expand-all check-strictly :render-after-expand="false" style="width: 220px"
node-key="FileId" filterable @check="handleTreeNodeClick" :teleported="false" class="auto-width-tree" />
:props="defaultProps"
v-model="datas.FolderId"
:data="dataList"
default-expand-all
check-strictly
:render-after-expand="false"
style="width: 220px"
filterable
@check="handleTreeNodeClick"
/>
</div> </div>
<template #footer> <template #footer>
<div @click="OffEdit"> <div @click="OffEdit">
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="()=>closedhandler()">关闭</el-button> <el-button @click="() => closedhandler()">关闭</el-button>
<el-button type="primary" @click="()=>save()"> <el-button type="primary" @click="() => save()">
保存<template v-if="type==1">另存</template> 保存<template v-if="type == 1">另存</template>
<template v-else-if="type==2">替换</template> <template v-else-if="type == 2">替换</template>
<template v-else>复制</template> <template v-else>复制</template>
</el-button> </el-button>
</span> </span>
...@@ -88,90 +65,97 @@ ...@@ -88,90 +65,97 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ApiResult } from '@/configs/axios'; import { ApiResult } from "@/configs/axios";
import OrgService from '@/services/OrgService'; import OrgService from "@/services/OrgService";
import { ref,reactive,watch } from 'vue'; import { ref, reactive, watch } from "vue";
import { View,Download,EditPen,Delete } from '@element-plus/icons-vue'; import { View, Download, EditPen, Delete } from "@element-plus/icons-vue";
import { ElMessage,ElTree } from 'element-plus'; import { ElMessage, ElTree } from "element-plus";
import FolderService from "@/services/FolderService"; import FolderService from "@/services/FolderService";
import ConfigService from "@/services/ConfigService"; import ConfigService from "@/services/ConfigService";
const props = defineProps({ const props = defineProps({
details:{ details: {
type:Object, type: Object,
required:'' required: "",
}, },
fileObj: { fileObj: {
type: Object, type: Object,
required: {} required: {},
}, },
type: { type: {
type:Number, type: Number,
required: 0 required: 0,
}, },
}) });
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void, (event: "close"): void;
(event: 'success'): void (event: "success"): void;
}>() }>();
interface Tree { interface Tree {
[key: string]: any [key: string]: any;
} }
const filterText = ref('') const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>() const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = { const defaultProps = {
children: 'ChildList', children: "ChildList",
label: 'FileName', label: "FileName",
disabled: 'disabled', disabled: "disabled",
} };
const datas = reactive({ const datas = reactive({
pdfImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708337830000_43.png', pdfImg:
adsImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png', "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708337830000_43.png",
adsImg:
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png",
fileList: [] as Tree[], fileList: [] as Tree[],
FolderId: null as Number, FolderId: null as Number,
FolderObj: {}, FolderObj: {},
checkedKeys: null as any, checkedKeys: null as any,
editTitle: false, editTitle: false,
}) });
const show=ref(true) const show = ref(true);
const loading = ref(true) const loading = ref(true);
const deleteLoading = ref<any>(null); const deleteLoading = ref<any>(null);
const dataList=ref([]) const dataList = ref([]);
const OffEdit = () => { const OffEdit = () => {
datas.editTitle = false datas.editTitle = false;
} };
const handleUpdateTitle = () => { const handleUpdateTitle = () => {
OffEdit() OffEdit();
} };
const closedhandler=()=>{ const closedhandler = () => {
emit('close') emit("close");
} };
const handleTreeNodeClick = (data:any,checkObj:any) => { const handleTreeNodeClick = (data: any, checkObj: any) => {
OffEdit() OffEdit();
if (checkObj.checkedKeys.length != 0) { if (checkObj.checkedKeys.length != 0) {
datas.FolderObj = data datas.FolderObj = data;
} }
} };
const save = () => { const save = () => {
let title = props.details.FileName let title = props.details.FileName;
if(props.type) title = props.type==1?'另存':'替换' if (props.type) title = props.type == 1 ? "另存" : "替换";
else title = title+'复制' else title = title + "复制";
ElMessageBox.confirm(`此操作将${title}到${datas.FolderObj.FileName?datas.FolderObj.FileName:'根目录'}，是否确定?`, "提示", { ElMessageBox.confirm(
`此操作将${title}到${datas.FolderObj.FileName ? datas.FolderObj.FileName : "根目录"
}，是否确定?`,
"提示",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) }
)
.then(async () => { .then(async () => {
try { try {
if(props.type) SaveOverlay(title) if (props.type) SaveOverlay(title);
else CopyId() else CopyId();
} catch (error) {} } catch (error) { }
}) })
.catch(() => {}); .catch(() => { });
} };
const SaveOverlay = async (title:String) => { const SaveOverlay = async (title: String) => {
let queryMsg = { let queryMsg = {
LogId: props.details.LogId, LogId: props.details.LogId,
FileId: props.details.FileId, FileId: props.details.FileId,
...@@ -183,26 +167,26 @@ import ConfigService from "@/services/ConfigService"; ...@@ -183,26 +167,26 @@ import ConfigService from "@/services/ConfigService";
text: "正在处理", text: "正在处理",
}); });
let pageRes = await ConfigService.UpdateOtherByHistory(queryMsg); let pageRes = await ConfigService.UpdateOtherByHistory(queryMsg);
if (pageRes.data.resultCode==ApiResult.SUCCESS) { if (pageRes.data.resultCode == ApiResult.SUCCESS) {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `${title}文件${props.details.FileType?'':'夹'}成功`, message: `${title}文件${props.details.FileType ? "" : "夹"}成功`,
type: "success", type: "success",
}); });
emit('close') emit("close");
emit('success') emit("success");
} else { } else {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `${title}文件${props.details.FileType?'':'夹'}失败`, message: `${title}文件${props.details.FileType ? "" : "夹"}失败`,
type: "warning", type: "warning",
}); });
} }
deleteLoading.value.close(); deleteLoading.value.close();
deleteLoading.value = null; deleteLoading.value = null;
} };
const CopyId = async () => { const CopyId = async () => {
let queryMsg = { let queryMsg = {
FileId: props.details.FileId, FileId: props.details.FileId,
FileType: props.details.FileType, FileType: props.details.FileType,
...@@ -214,86 +198,89 @@ import ConfigService from "@/services/ConfigService"; ...@@ -214,86 +198,89 @@ import ConfigService from "@/services/ConfigService";
text: "正在处理", text: "正在处理",
}); });
let pageRes = await FolderService.CopyFile(queryMsg); let pageRes = await FolderService.CopyFile(queryMsg);
if (pageRes.data.resultCode==ApiResult.SUCCESS) { if (pageRes.data.resultCode == ApiResult.SUCCESS) {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `复制文件${props.details.FileType?'':'夹'}成功`, message: `复制文件${props.details.FileType ? "" : "夹"}成功`,
type: "success", type: "success",
}); });
emit('close') emit("close");
emit('success') emit("success");
} else { } else {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: `复制文件${props.details.FileType?'':'夹'}失败`, message: `复制文件${props.details.FileType ? "" : "夹"}失败`,
type: "warning", type: "warning",
}); });
} }
deleteLoading.value.close(); deleteLoading.value.close();
deleteLoading.value = null; deleteLoading.value = null;
} };
const getFile = async () => { const getFile = async () => {
let querys = { let querys = {
FileType: props.details.FileType FileType: props.details.FileType,
} };
let pageRes = await FolderService.GetMyFolderTree(querys); let pageRes = await FolderService.GetMyFolderTree(querys);
if (pageRes.data.resultCode == 1) { if (pageRes.data.resultCode == 1) {
dataList.value = pageRes.data.data dataList.value = pageRes.data.data;
recursive(dataList.value) recursive(dataList.value);
} }
} };
const recursive = (arrs:Array,disabled:any) =>{ const recursive = (arrs: Array, disabled: any) => {
let isDisableds:Boolean let isDisableds: Boolean;
if(arrs.length>0) arrs.forEach(x => { if (arrs.length > 0)
isDisableds = false arrs.forEach((x) => {
Object.assign(x,{disabled:isDisableds}) isDisableds = false;
if(x.ChildList.length>0){ Object.assign(x, { disabled: isDisableds });
recursionChild(x,isDisableds) if (x.ChildList.length > 0) {
recursionChild(x, isDisableds);
} }
}) });
else { else {
isDisableds = false isDisableds = false;
Object.assign(arrs,{disabled:isDisableds}) Object.assign(arrs, { disabled: isDisableds });
}
}
const recursionChild = (arrs:any,disabled:any) => {
if(arrs&&arrs.ChildList.length>0) {
recursive(arrs.ChildList,disabled)
} }
};
const recursionChild = (arrs: any, disabled: any) => {
if (arrs && arrs.ChildList.length > 0) {
recursive(arrs.ChildList, disabled);
} }
};
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val) treeRef.value!.filter(val);
}) });
getFile() getFile();
</script> </script>
<style scoped> <style scoped>
.TreeFile-Title{ .TreeFile-Title {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 15px; font-size: 15px;
position: relative; position: relative;
} }
.TreeFile-Title.text-sm{
.TreeFile-Title.text-sm {
font-size: 12px; font-size: 12px;
} }
.TreeFile-container th{
.TreeFile-container th {
padding: 0 10px 5px 10px; padding: 0 10px 5px 10px;
border-bottom: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;
background: #fff; background: #fff;
position: sticky; position: sticky;
top: 0px; top: 0px;
z-index: 2; z-index: 2;
} }
.TreeFile-container td{
.TreeFile-container td {
padding: 8px 10px; padding: 8px 10px;
border-bottom: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;
} }
.TreeFile-table {
.TreeFile-table {}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment