新建文件

src/api/fileCount/fileCount.js

@@ -43,6 +43,13 @@ function createFiles(data) {
         params: data,
     })
 }
+function createFilesOfTemp(data) {
+    return request({
+        url: `/biz/info/tmpl/create`,
+        method: "get",
+        params: data,
+    })
+}
 export default {
     getActor,
     addActor,
@@ -50,4 +57,5 @@ export default {
     myCount,
     myJoin,
     createFiles,
+    createFilesOfTemp
 }

src/components/addFileDrop/addFileDrop.vue

@@ -1,13 +1,89 @@
 <template>
-    <div>
-
-    </div>
+  <div class="main">
+    <el-dialog v-model="props.newAdd" title="文件名称">
+      <el-input
+        v-model="fileName"
+        maxlength="32"
+        placeholder="请输入不多于32位字符"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="sureAdd"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-
+import { ref, toRaw, onMounted, inject, onActivated, watch } from "vue";
+import { ElMessage } from "element-plus";
+import fileCount from "@/api/fileCount/fileCount";
+const props = defineProps({
+  newAdd: {
+    type: Boolean,
+    default: false,
+  },
+  clickFileData: {
+    type: Object,
+    default: () => {},
+  },
+  addFileType: {
+    type: String,
+    default: "",
+  },
+  addTempId: {
+    type: Object,
+    default: ()=>{},
+  },
+});
+const fileName = ref();
+const emit = defineEmits(["closeAddFile"]);
+const close = () => {
+  emit("closeAddFile");
+};
+const sureAdd = () => {
+  if (!fileName.value) {
+    return ElMessage({ message: "请输入文件名", type: "error" });
+  }
+  if (props.addTempId) {
+    fileCount
+      .createFilesOfTemp({
+        dirId: props.clickFileData.dirId,
+        spaceId: props.clickFileData.spaceId,
+        tmplId: props.addTempId,
+        name: fileName.value,
+      })
+      .then((res) => {
+        console.log("addRes", res);
+        emit("closeAddFile");
+        ElMessage({ message: "新增成功", type: "success" });
+        emit("threeBe", false, res.data);
+      });
+  } else {
+    fileCount
+      .createFiles({
+        dirId: props.clickFileData.dirId,
+        spaceId: props.clickFileData.spaceId,
+        type: props.addFileType,
+        name: fileName.value,
+      })
+      .then((res) => {
+        console.log("addRes", res);
+        emit("closeAddFile");
+        ElMessage({ message: "新增成功", type: "success" });
+        emit("threeBe", false, res.data);
+      });
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-
+.main {
+  width: 128px;
+  height: 344px;
+  background-color: #fff;
+  border-radius: 4px;
+}
 </style>

src/components/addFileTempList/addFileTempList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="main">
+    <el-dialog v-model="props.showTempList" width="30%" @close="close" :title="title">
+      <div class="search">
+        <el-input
+          v-model="tempName"
+          maxlength="32"
+          placeholder="模板名称"
+          @input="selectData"
+        ></el-input>
+        <el-icon class="SearchIcon">
+          <Search />
+        </el-icon>
+      </div>
+      <div class="temp_list">
+        <div class="one_list" :class="{'select':checkTempId == item.tmplId}" v-for="item in listData" @click="checkTemp(item)" :key="item">
+          <div class="left">
+            <img :src="getImg(props.addFileType)" alt="" class="imgBox" />
+            <span>{{ item.tmplName }}</span>
+          </div>
+          <div class="right">
+            <img :src="eyes" @click="previewFileClick(item)" class="eyes" />
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="sureAdd"> 创建 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRaw, onMounted, inject, onActivated, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { listTemplate } from "@/api/biz/template.js";
+import fileCount from "@/api/fileCount/fileCount";
+import tW from "@/assets/images/addFile/tW.png";
+import tE from "@/assets/images/addFile/tE.png";
+import tP from "@/assets/images/addFile/tP.png";
+import eyes from "@/assets/images/eyes.png";
+const props = defineProps({
+  showTempList: {
+    type: Boolean,
+    default: false,
+  },
+  addFileType: {
+    type: String,
+    default: "",
+  },
+});
+const tempName = ref();
+const title = ref("");
+const listData = ref({});
+const checkTempId = ref()
+const baseData = ref([])
+const emit = defineEmits(["closeTempList",'getTempPreview','getAddTempId']);
+const getTitle = () => {
+  if (props.addFileType == "word") {
+    title.value = "文字模板";
+    return;
+  } else if (props.addFileType == "excel") {
+    title.value = "表格模板";
+    return;
+  } else {
+    title.value = "演示模板";
+    return;
+  }
+};
+const getImg = (type) => {
+  if (type == "word") {
+    return tW;
+  } else if (type == "excel") {
+    return tE;
+  } else {
+    return tP;
+  }
+};
+//选中的模板
+const checkTemp = (item)=>{
+    checkTempId.value = item.tmplId
+}
+const sureAdd = () => {
+  if (!checkTempId.value) {
+    return ElMessage({ message: "请选择模板", type: "error" });
+  }
+  emit('getAddTempId',checkTempId.value)
+};
+const close = () => {
+  emit("closeTempList");
+};
+const selectData = ()=>{
+    listData.value = baseData.value?.filter(item=>item.tmplName.includes(tempName.value))
+}
+// 获取temp列表
+const getList = async () => {
+  const res = await listTemplate();
+  baseData.value = res.rows?.filter(item=>item.tmplType == props.addFileType );
+  listData.value = baseData.value
+//   console.log("listData", listData.value);
+};
+const previewFileClick = (item)=>{
+    emit("getTempPreview",item.fileId);
+}
+onMounted(() => {
+  getTitle();
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.search {
+  width: 100%;
+  height: 32px;
+  position: relative;
+  .SearchIcon {
+    color: gray;
+    position: absolute;
+    right: 5px;
+    top: 10px;
+  }
+}
+.temp_list {
+  margin-top: 10px;
+  width: 100%;
+  height: 400px;
+  overflow-y: auto;
+  .one_list {
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left {
+      display: flex;
+      align-items: center;
+      .imgBox {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+    .eyes {
+      width: 22px;
+      height: 22px;
+      cursor: pointer;
+    }
+  }
+}
+.select{
+    background-color: #F5F7F9;
+}
+</style>

src/views/myfile/MyFile.vue

@@ -162,7 +162,21 @@
                                     </el-icon>
                                 </div>
                                 <div style="margin-left: 5px;" @click="thisFolder.dirType ? createNewMenu(2) : null">
-                                    <span style="font-size: 14px;" class="shouzhi">新建文档</span>
+                                    <el-dropdown :disabled="!thisFolder.dirType" size="large" @command="handleAddFileCommand">
+                                           <span style="font-size: 14px;line-height: 48px;color:#000;" class="shouzhi">新建文档</span>
+                                        <template #dropdown>
+                                            <el-dropdown-menu>
+                                                <el-dropdown-item disabled style="font-size:16px;font-weight: 500;">空白文档</el-dropdown-item>
+                                                <el-dropdown-item command="nullW"><img style="margin-right:5px;" src="@/assets/images/addFile/nullW.png" alt="">文字</el-dropdown-item>
+                                                <el-dropdown-item command="nullE"><img style="margin-right:5px;"  src="@/assets/images/addFile/nullE.png" alt="">表格</el-dropdown-item>
+                                                <el-dropdown-item command="nullP"><img style="margin-right:5px;"  src="@/assets/images/addFile/nullP.png" alt="">演示</el-dropdown-item>
+                                                <el-dropdown-item disabled style="font-size:16px;font-weight: 500;">文档模板</el-dropdown-item>
+                                                <el-dropdown-item command="tW"><img style="margin-right:5px;"  src="@/assets/images/addFile/tW.png" alt="">文字</el-dropdown-item>
+                                                <el-dropdown-item command="tE"><img style="margin-right:5px;"  src="@/assets/images/addFile/tE.png" alt="">表格</el-dropdown-item>
+                                                <el-dropdown-item command="tP"><img style="margin-right:5px;"  src="@/assets/images/addFile/tP.png" alt="">演示</el-dropdown-item>
+                                            </el-dropdown-menu>
+                                        </template>
+                                    </el-dropdown>
                                 </div>
                             </div>
                             <template v-for="(item, index) in useMenu" :key="index">
@@ -499,7 +513,7 @@
         :showInputPassword="showInputPassword"></inputPassword>
     <div v-loading.fullscreen="loadingPreview" v-if="loadingPreview" class="lodingBox"></div>
     <!-- 新增文档 -->
-    <AddFile v-if="newAdd" :newAdd="newAdd" @closeAddFile="closeAddFile" @threeBe="threeBe" :clickFileData="clickFileData"></AddFile>
+    <!-- <AddFile v-if="newAdd" :newAdd="newAdd" @closeAddFile="closeAddFile" @threeBe="threeBe" :clickFileData="clickFileData"></AddFile> -->
     <!-- 扫描文档 -->
     <ScanFile v-if="openScan" :openScan="openScan" :scannerFiles="scannerFiles" @saveScanFile="saveScanFile" @closeOpen="closeOpen"></ScanFile>
     <!-- 可用扫描仪信息 -->
@@ -531,8 +545,20 @@
      <iframe :key="nowTime" :src="hisIfarmeData.src" :name="nowTime" id="iframeHis" frameborder="0" width="1200px"
      height="800px" class="iframeBox" ></iframe>
     </el-dialog>
-    <!-- 文件文件下拉框 -->
-    <addFileDrop></addFileDrop>
+    <!-- 查看模板的iframe -->
+      <el-dialog
+        v-model="showTemp"
+        title="模板预览"
+        width="1250px"
+        :close-delay='200'
+        :before-close="closeHis"
+    >
+     <iframe :key="nowTime" :src="tempIfarmeData.src" :name="nowTime" id="iframeHis" frameborder="0" width="1200px"
+     height="800px" class="iframeBox" ></iframe>
+    </el-dialog>
+    <!-- 给新建的文件命名 -->
+    <addFileDrop v-if="newAdd" :newAdd="newAdd" :addTempId="addTempId" :addFileType="addFileType" @closeAddFile="closeAddFile" @threeBe="threeBe" :clickFileData="clickFileData"></addFileDrop>
+    <addFileTempList v-if="showTempList" @getAddTempId='getAddTempId' @getTempPreview="getTempPreview" @closeTempList="closeTempList" :showTempList="showTempList" :addFileType="addFileType" @closeAddFile="closeAddFile"></addFileTempList>
     <!-- <iframe v-if="hisIfarmeData?.src" :src="hisIfarmeData.src" id="iframeHis" frameborder="1" width="1200px"
      height="800px" class="iframeBox" ></iframe> -->
 </template>
@@ -592,6 +618,7 @@ import { listInfo,selectInfo ,getFileByScanerId} from '@/api/scanner/info.js';
 import { getConfigKey } from "@/api/system/config.js"
 import TreeMenu from '@/components/TreeMenu/TreeMenu.vue'
 import addFileDrop from '@/components/addFileDrop/addFileDrop.vue'
+import addFileTempList from '@/components/addFileTempList/addFileTempList.vue'
 
 export default {
     directives: {
@@ -810,6 +837,11 @@ export default {
         const nowTime = ref(new Date().getTime())
         const showHis = ref(false)
         const collectId = ref()
+        const addFileType = ref()
+        const showTempList = ref(false)
+        const addTempId = ref()
+        const tempIfarmeData = ref({})
+        const showTemp = ref(false)
         const hisIfarmeData = ref({
             // src: `${window.location.origin}/fileEdit?clickRowId=7567&canEdit=0&canCopy=0&history=0&fileId=0`,
         })
@@ -1421,7 +1453,7 @@ export default {
                 leftNewFile.value = false
             }
             if (num == 2) {
-                newAdd.value = true
+                // newAdd.value = true
             } else {
                 oneOrTwo.value = num
                 folderCase.value = true
@@ -2546,6 +2578,46 @@ export default {
                 })
              
         }
+        // 点击新建文件下拉框选项
+        const handleAddFileCommand = (command)=>{
+            // console.log('command',command);
+            const getType = (data)=>{
+                if(data.includes('W')){
+                    return 'word'
+                }else if(data.includes('E')){
+                    return 'excel'
+                }else{
+                    return 'ppt'
+                }
+            }
+             addFileType.value = getType(command)
+            if(command.includes('null')){ //空白文档
+                // console.log('addFileType',addFileType.value);
+                newAdd.value = true
+            }else{ // 模板文件
+                showTempList.value = true
+            }
+
+        }
+        const closeTempList = ()=>{
+            showTempList.value = false
+        }
+        const getAddTempId = (id)=>{
+            addTempId.value = id
+            closeTempList()
+            newAdd.value = true
+        }
+        // 获取预览的模板地址
+        const getTempPreview = (fileId)=>{
+            tempIfarmeData.value = {
+                src:`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/view/${fileId}`
+                // src:`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/tmpl/callback/${
+                //         fileId
+                //     }?name=${useUserStore().uname}`
+            }
+            showTemp.value = true
+            console.log('getTempPreview',tempIfarmeData.value);
+        }
         watch(() => folder.value, async(newValue, oldValue) => {
             // console.log('iFrameData 发生改变了', newValue, oldValue);
             console.log('files',newValue);
@@ -2943,7 +3015,16 @@ export default {
             closeHis,
             nowTime,
             showHis,
-            collectId
+            collectId,
+            handleAddFileCommand,
+            addFileType,
+            showTempList,
+            closeTempList,
+            tempIfarmeData,
+            getTempPreview,
+            showTemp,
+            addTempId,
+            getAddTempId
         }
     },
     watch: {
@@ -2968,7 +3049,9 @@ export default {
         MoveTo,
         LeftList,
         ListShow,
-        TreeMenu
+        TreeMenu,
+        addFileDrop,
+        addFileTempList
     },
 }