|
@@ -42,7 +42,8 @@
|
|
</el-button>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- <el-table
|
|
|
|
|
|
+ <el-table
|
|
|
|
+ v-if="currentTypeId === 6"
|
|
:data="files"
|
|
:data="files"
|
|
class="table-list"
|
|
class="table-list"
|
|
tooltip-effect="dark"
|
|
tooltip-effect="dark"
|
|
@@ -60,7 +61,7 @@
|
|
>
|
|
>
|
|
<span v-if="!inputCaseTitles.includes(row)">
|
|
<span v-if="!inputCaseTitles.includes(row)">
|
|
{{ row.filesTitle }}
|
|
{{ row.filesTitle }}
|
|
- <el-icon class="edit-title" @click="inputCaseTitles.push(row)">
|
|
|
|
|
|
+ <el-icon class="edit-title" @click="startEdit(row)">
|
|
<EditPen />
|
|
<EditPen />
|
|
</el-icon>
|
|
</el-icon>
|
|
</span>
|
|
</span>
|
|
@@ -68,16 +69,11 @@
|
|
<ElInput
|
|
<ElInput
|
|
v-model="row.filesTitle"
|
|
v-model="row.filesTitle"
|
|
placeholder="请输入文件名"
|
|
placeholder="请输入文件名"
|
|
- focus
|
|
|
|
|
|
+ @blur="updateFileTitle(row)"
|
|
:maxlength="50"
|
|
:maxlength="50"
|
|
style="width: 280px"
|
|
style="width: 280px"
|
|
- >
|
|
|
|
- <template #append>
|
|
|
|
- <el-button type="primary" plain @click="updateFileTitle(row)">
|
|
|
|
- 确定
|
|
|
|
- </el-button>
|
|
|
|
- </template>
|
|
|
|
- </ElInput>
|
|
|
|
|
|
+ :ref="(el) => setInputRef(row.filesId, el as any)"
|
|
|
|
+ />
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
|
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
|
@@ -95,10 +91,10 @@
|
|
</span>
|
|
</span>
|
|
<span class="oper-span delBtn" @click="del(row)"> 删除 </span>
|
|
<span class="oper-span delBtn" @click="del(row)"> 删除 </span>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- </el-table> -->
|
|
|
|
|
|
+ </el-table>
|
|
|
|
|
|
<!-- 卡片网格布局 -->
|
|
<!-- 卡片网格布局 -->
|
|
- <div class="file-grid-container" v-if="files.length">
|
|
|
|
|
|
+ <div class="file-grid-container" v-if="currentTypeId === 1 && files.length">
|
|
<div
|
|
<div
|
|
class="file-card"
|
|
class="file-card"
|
|
v-for="(file, index) in files"
|
|
v-for="(file, index) in files"
|
|
@@ -173,7 +169,7 @@
|
|
<div class="file-title">
|
|
<div class="file-title">
|
|
<span v-if="!inputCaseTitles.includes(file)" :title="file.filesTitle" class="title-text">
|
|
<span v-if="!inputCaseTitles.includes(file)" :title="file.filesTitle" class="title-text">
|
|
{{ file.filesTitle }}
|
|
{{ file.filesTitle }}
|
|
- <el-icon class="edit-title" @click="inputCaseTitles.push(file)">
|
|
|
|
|
|
+ <el-icon color="#999" class="edit-title" @click="startEdit(file)">
|
|
<EditPen />
|
|
<EditPen />
|
|
</el-icon>
|
|
</el-icon>
|
|
</span>
|
|
</span>
|
|
@@ -181,17 +177,12 @@
|
|
<ElInput
|
|
<ElInput
|
|
v-model="file.filesTitle"
|
|
v-model="file.filesTitle"
|
|
placeholder="请输入文件名"
|
|
placeholder="请输入文件名"
|
|
- focus
|
|
|
|
|
|
+ @blur="updateFileTitle(file)"
|
|
:maxlength="50"
|
|
:maxlength="50"
|
|
size="default"
|
|
size="default"
|
|
class="edit-input"
|
|
class="edit-input"
|
|
- >
|
|
|
|
- <template #append>
|
|
|
|
- <el-button type="primary" plain @click="updateFileTitle(file)">
|
|
|
|
- 确定
|
|
|
|
- </el-button>
|
|
|
|
- </template>
|
|
|
|
- </ElInput>
|
|
|
|
|
|
+ :ref="(el) => setInputRef(file.filesId, el as any)"
|
|
|
|
+ />
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -222,7 +213,7 @@ import comHead from "@/components/head/index.vue";
|
|
import { confirm } from "@/helper/message";
|
|
import { confirm } from "@/helper/message";
|
|
import { RouteName, router } from "@/router";
|
|
import { RouteName, router } from "@/router";
|
|
import { FileDrawType, BoardTypeDesc } from "@/constant/caseFile";
|
|
import { FileDrawType, BoardTypeDesc } from "@/constant/caseFile";
|
|
-import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
|
|
|
|
|
|
+import { computed, onMounted, onUnmounted, ref, watchEffect, nextTick } from "vue";
|
|
import { addCaseFile } from "./quisk";
|
|
import { addCaseFile } from "./quisk";
|
|
import { title, desc } from "@/store/system";
|
|
import { title, desc } from "@/store/system";
|
|
import {
|
|
import {
|
|
@@ -262,7 +253,23 @@ const caseId = computed(() => {
|
|
const caseInfoData = ref<any>();
|
|
const caseInfoData = ref<any>();
|
|
|
|
|
|
const inputCaseTitles = ref<CaseFile[]>([]);
|
|
const inputCaseTitles = ref<CaseFile[]>([]);
|
|
|
|
+const inputRefs = ref<Record<number, InstanceType<typeof ElInput> | null>>({});
|
|
|
|
+
|
|
|
|
+const setInputRef = (filesId: number, el: InstanceType<typeof ElInput> | null) => {
|
|
|
|
+ if (filesId == null) return;
|
|
|
|
+ inputRefs.value[filesId] = el;
|
|
|
|
+};
|
|
|
|
|
|
|
|
+const startEdit = async (file: CaseFile) => {
|
|
|
|
+ if (!inputCaseTitles.value.includes(file)) {
|
|
|
|
+ inputCaseTitles.value.push(file);
|
|
|
|
+ }
|
|
|
|
+ await nextTick();
|
|
|
|
+ const target = inputRefs.value[file.filesId!];
|
|
|
|
+ if (target && typeof (target as any).focus === 'function') {
|
|
|
|
+ (target as any).focus();
|
|
|
|
+ }
|
|
|
|
+};
|
|
// 处理标题输入事件
|
|
// 处理标题输入事件
|
|
const handleTitleInput = (file: CaseFile, value: string) => {
|
|
const handleTitleInput = (file: CaseFile, value: string) => {
|
|
file.filesTitle = value;
|
|
file.filesTitle = value;
|
|
@@ -321,7 +328,7 @@ const updateFileTitle = async (caseFile: CaseFile) => {
|
|
|
|
|
|
// 更新成功后刷新列表
|
|
// 更新成功后刷新列表
|
|
refresh();
|
|
refresh();
|
|
- ElMessage.success("更新成功!");
|
|
|
|
|
|
+ // ElMessage.success("更新成功!");
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('更新失败:', error);
|
|
console.error('更新失败:', error);
|
|
ElMessage.error("更新失败!");
|
|
ElMessage.error("更新失败!");
|
|
@@ -353,7 +360,14 @@ watchEffect(() => {
|
|
|
|
|
|
const isDraw = computed(() => currentTypeId.value === FileDrawType);
|
|
const isDraw = computed(() => currentTypeId.value === FileDrawType);
|
|
|
|
|
|
-const files = ref<CaseFile[]>([]);
|
|
|
|
|
|
+type CaseFileEx = CaseFile & {
|
|
|
|
+ type?: 'old' | 'tabulation' | 'overview'
|
|
|
|
+ tabulationId?: number
|
|
|
|
+ overviewId?: number
|
|
|
|
+ id?: number
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const files = ref<CaseFileEx[]>([]);
|
|
|
|
|
|
// 计算预览图片列表
|
|
// 计算预览图片列表
|
|
const srcList = computed(() => {
|
|
const srcList = computed(() => {
|
|
@@ -433,11 +447,15 @@ const refresh = async () => {
|
|
// title: item.title || '平面图',
|
|
// title: item.title || '平面图',
|
|
// type: 'overview' as const
|
|
// type: 'overview' as const
|
|
// }));
|
|
// }));
|
|
- const caseFiles = (caseFilesRes || []).map(item => ({
|
|
|
|
|
|
+ const caseFiles = (caseFilesRes || []).map((item: any) => ({
|
|
...item,
|
|
...item,
|
|
- type: (item.tabulationId && item.overviewId) ? 'overview' : item.tabulationId ? 'tabulation' : 'old'
|
|
|
|
- }));
|
|
|
|
-
|
|
|
|
|
|
+ type: (item.tabulationId && item.overviewId)
|
|
|
|
+ ? ('overview' as const)
|
|
|
|
+ : item.tabulationId
|
|
|
|
+ ? ('tabulation' as const)
|
|
|
|
+ : ('old' as const)
|
|
|
|
+ })) as CaseFileEx[];
|
|
|
|
+
|
|
files.value = [...caseFiles];
|
|
files.value = [...caseFiles];
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('获取文件列表失败:', error);
|
|
console.error('获取文件列表失败:', error);
|
|
@@ -498,7 +516,7 @@ const gotoDraw = (type: BoardType, id: number) => {
|
|
};
|
|
};
|
|
|
|
|
|
// 处理不同类型的编辑逻辑
|
|
// 处理不同类型的编辑逻辑
|
|
-const handleEdit = (file: CaseFile) => {
|
|
|
|
|
|
+const handleEdit = (file: CaseFileEx) => {
|
|
if (file.type === 'tabulation') {
|
|
if (file.type === 'tabulation') {
|
|
// tabulation 类型的编辑链接
|
|
// tabulation 类型的编辑链接
|
|
if(appId === 'fire'){
|
|
if(appId === 'fire'){
|
|
@@ -660,7 +678,7 @@ onUnmounted(() => {
|
|
.file-grid-container {
|
|
.file-grid-container {
|
|
display: grid;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 387px);
|
|
grid-template-columns: repeat(auto-fill, 387px);
|
|
- gap: 16px;
|
|
|
|
|
|
+ gap: 22px;
|
|
padding: 16px 0;
|
|
padding: 16px 0;
|
|
}
|
|
}
|
|
// 无数据
|
|
// 无数据
|
|
@@ -678,11 +696,12 @@ onUnmounted(() => {
|
|
// transition: all 0.3s ease;
|
|
// transition: all 0.3s ease;
|
|
width: 387px;
|
|
width: 387px;
|
|
height: 303px;
|
|
height: 303px;
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // flex-direction: column;
|
|
.card-image-container{
|
|
.card-image-container{
|
|
&:hover {
|
|
&:hover {
|
|
- // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
// transform: translateY(-2px);
|
|
// transform: translateY(-2px);
|
|
|
|
|
|
.card-overlay {
|
|
.card-overlay {
|
|
@@ -697,10 +716,12 @@ onUnmounted(() => {
|
|
|
|
|
|
.card-image-container {
|
|
.card-image-container {
|
|
position: relative;
|
|
position: relative;
|
|
- flex: 1;
|
|
|
|
- overflow: hidden;
|
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
|
|
|
+ // flex: 1;
|
|
|
|
+ height: 280px;
|
|
|
|
+ // overflow: hidden;
|
|
|
|
+ border: none;
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
|
+ box-shadow: 0 0 12px rgba(0,0,0,.12);
|
|
}
|
|
}
|
|
|
|
|
|
.card-image {
|
|
.card-image {
|
|
@@ -760,23 +781,21 @@ onUnmounted(() => {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
color: #303133;
|
|
text-align: left;
|
|
text-align: left;
|
|
- // display: flex;
|
|
|
|
- // justify-content: space-between;
|
|
|
|
- // align-items: center;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
word-break: break-all;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
- line-height: 1.4;
|
|
|
|
- }
|
|
|
|
- .edit-title{
|
|
|
|
- display: none;
|
|
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
}
|
|
}
|
|
|
|
+ // .edit-title{
|
|
|
|
+ // display: none;
|
|
|
|
+ // position: absolute;
|
|
|
|
+ // right: 0;
|
|
|
|
+ // }
|
|
.edit-input {
|
|
.edit-input {
|
|
:deep(.el-input__wrapper) {
|
|
:deep(.el-input__wrapper) {
|
|
- height: 30px;
|
|
|
|
|
|
+ height: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
:deep(.el-input-group__append) {
|
|
:deep(.el-input-group__append) {
|