caseFile.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <com-head :options="options" v-model="currentTypeId" notContent v-if="options.length" />
  3. <div class="body-layer">
  4. <div class="body-head">
  5. <h3 style="visibility: hidden">场景管理</h3>
  6. <div>
  7. <template v-if="isDraw">
  8. <el-button type="primary" @click="gotoDraw(BoardType.map, -1)">
  9. 创建{{ BoardTypeDesc[BoardType.map] }}
  10. </el-button>
  11. <el-button type="primary" @click="gotoDraw(BoardType.scene, -1)">
  12. 创建{{ BoardTypeDesc[BoardType.scene] }}
  13. </el-button>
  14. </template>
  15. <el-button type="primary" @click="addCaseFileHandler"> 上传 </el-button>
  16. </div>
  17. </div>
  18. <el-table :data="files" tooltip-effect="dark" style="width: 100%" size="large">
  19. <el-table-column label="序号" width="70" v-slot:default="{ $index }">
  20. <div style="text-align: center">
  21. {{ $index + 1 }}
  22. </div>
  23. </el-table-column>
  24. <el-table-column label="名称" v-slot:default="{ row }: { row: CaseFile }">
  25. <span v-if="!inputCaseTitles.includes(row)">
  26. {{ row.filesTitle }}
  27. <el-icon class="edit-title" @click="inputCaseTitles.push(row)">
  28. <EditPen />
  29. </el-icon>
  30. </span>
  31. <template v-else>
  32. <ElInput
  33. v-model="row.filesTitle"
  34. placeholder="请输入文件名"
  35. focus
  36. :maxlength="50"
  37. style="width: 280px"
  38. >
  39. <template #append>
  40. <el-button type="primary" plain @click="updateFileTitle(row)">
  41. 确定
  42. </el-button>
  43. </template>
  44. </ElInput>
  45. </template>
  46. </el-table-column>
  47. <el-table-column label="创建时间" prop="createTime"></el-table-column>
  48. <el-table-column label="操作" v-slot:default="{ row }: { row: CaseFile }">
  49. <span class="oper-span" @click="query(row)"> 查看 </span>
  50. <span
  51. class="oper-span"
  52. @click="gotoDraw(row.imgType!, row.filesId)"
  53. v-if="row.imgType !== null"
  54. >
  55. 编辑
  56. </span>
  57. <span class="oper-span delBtn" @click="del(row)"> 删除 </span>
  58. </el-table-column>
  59. </el-table>
  60. </div>
  61. </template>
  62. <script setup lang="ts">
  63. import comHead from "@/components/head/index.vue";
  64. import { confirm } from "@/helper/message";
  65. import { RouteName, router } from "@/router";
  66. import { FileDrawType, BoardTypeDesc } from "@/constant/caseFile";
  67. import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
  68. import { addCaseFile } from "./quisk";
  69. import { title, desc } from "@/store/system";
  70. import {
  71. CaseFile,
  72. CaseFileType,
  73. getCaseFileTypes,
  74. getCaseFiles,
  75. delCaseFile,
  76. BoardType,
  77. } from "@/store/caseFile";
  78. import { getCaseInfo, updateCaseInfo } from "@/store/case";
  79. import { appConstant } from "@/app";
  80. import { ElIcon, ElInput, ElMessage } from "element-plus";
  81. const caseId = computed(() => {
  82. const caseId = router.currentRoute.value.params.caseId;
  83. if (caseId) {
  84. return Number(caseId);
  85. }
  86. });
  87. const inputCaseTitles = ref<CaseFile[]>([]);
  88. const updateFileTitle = async (caseFile: CaseFile) => {
  89. if (!caseFile.filesTitle.trim()) {
  90. return ElMessage.error("卷宗标题不能为空!");
  91. }
  92. await updateCaseInfo(caseFile);
  93. inputCaseTitles.value = inputCaseTitles.value.filter((item) => item !== caseFile);
  94. };
  95. const currentTypeId = ref<number>();
  96. const types = ref<CaseFileType[]>([]);
  97. const options = computed(() =>
  98. types.value.map((item) => ({ name: item.filesTypeName, value: item.filesTypeId }))
  99. );
  100. const isDraw = computed(() => currentTypeId.value === FileDrawType);
  101. const files = ref<CaseFile[]>([]);
  102. const refresh = async () => {
  103. files.value = await getCaseFiles({
  104. caseId: caseId.value!,
  105. filesTypeId: currentTypeId.value,
  106. });
  107. };
  108. watchEffect(() => caseId.value && currentTypeId.value && refresh());
  109. const query = (file: CaseFile) => window.open(file.filesUrl);
  110. const del = async (file: CaseFile) => {
  111. if (await confirm("确定要删除此数据?")) {
  112. await delCaseFile({ caseId: caseId.value!, filesId: file.filesId });
  113. refresh();
  114. }
  115. };
  116. const addCaseFileHandler = async () => {
  117. await addCaseFile({ caseId: caseId.value!, fileType: currentTypeId.value! });
  118. refresh();
  119. };
  120. const gotoDraw = (type: BoardType, id: number) => {
  121. router.push({
  122. name: RouteName.drawCaseFile,
  123. params: { caseId: caseId.value!, type, id },
  124. });
  125. };
  126. onMounted(async () => {
  127. types.value = await getCaseFileTypes();
  128. currentTypeId.value = types.value[0].filesTypeId;
  129. const caseInfo = await getCaseInfo(caseId.value!);
  130. if (caseInfo) {
  131. title.value = (await getCaseInfo(caseId.value!)).caseTitle + " | 卷宗管理";
  132. desc.value = "";
  133. } else {
  134. console.error("该案件不存在!");
  135. router.replace({ name: RouteName.vrmodel });
  136. }
  137. });
  138. onUnmounted(() => {
  139. title.value = appConstant.title;
  140. desc.value = appConstant.desc;
  141. });
  142. </script>
  143. <style scoped lang="scss">
  144. .edit-title {
  145. cursor: pointer;
  146. margin-left: 10px;
  147. }
  148. </style>