Browse Source

Merge branch 'dev' of http://94.191.59.107:3000/wukai/lzga-doc into dev

yxc 2 years ago
parent
commit
85cc35f108
2 changed files with 900 additions and 1026 deletions
  1. 871 1008
      src/views1/File/Individual/IndividualView.vue
  2. 29 18
      src/views1/File/Individual/Pre/PreView.vue

+ 871 - 1008
src/views1/File/Individual/IndividualView.vue

@@ -15,104 +15,45 @@
           <el-col :span="4" :xs="24" class="main-left">
             <div class="head-top">个人文档</div>
             <div class="head-container">
-              <el-tree
-                :data="dirList"
-                :props="defaultProps"
-                :expand-on-click-node="false"
-                ref="tree"
-                node-key="id"
-                default-expand-all
-                highlight-current
-                @node-click="handleNodeClick"
-              />
+              <el-tree :data="dirList" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
+                default-expand-all highlight-current @node-click="handleNodeClick" />
             </div>
           </el-col>
           <!--文件数据-->
           <el-col :span="20" :xs="24" class="main-right">
             <p>个人文档</p>
-            <el-form
-              :model="queryParams"
-              ref="queryForm"
-              size="small"
-              :inline="true"
-              v-show="showSearch"
-              label-width="68px"
-              class="main-right-top"
-            >
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+              label-width="68px" class="main-right-top">
               <el-form-item label="文件名称" prop="docName">
-                <el-input
-                  v-model="queryParams.docName"
-                  placeholder="请输入文件名称"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
+                <el-input v-model="queryParams.docName" placeholder="请输入文件名称" clearable
+                  @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item label="文件级别" prop="docLevel">
-                <el-select
-                  v-model="queryParams.docLevel"
-                  placeholder="请选择文件级别"
-                  @change="handleQuery"
-                >
-                  <el-option
-                    v-for="item in levelOptions"
-                    :key="item.levelId"
-                    :label="item.levelName"
-                    :value="item.levelId"
-                  ></el-option>
+                <el-select v-model="queryParams.docLevel" placeholder="请选择文件级别" @change="handleQuery">
+                  <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
+                    :value="item.levelId"></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="文件年份" prop="createYear">
-                <el-input
-                  v-model="queryParams.createYear"
-                  placeholder="请输入文件创建年份"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
+                <el-input v-model="queryParams.createYear" placeholder="请输入文件创建年份" clearable
+                  @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item label="标签" prop="params">
-                <el-select
-                  v-model="queryParams.params.tagId"
-                  placeholder="请输入标签名称"
-                  @change="handleQuery"
-                  style="width: 180px"
-                >
-                  <el-option
-                    v-for="item in tags"
-                    :key="item.tagId"
-                    :label="item.tagName"
-                    :value="item.tagId"
-                  />
+                <el-select v-model="queryParams.params.tagId" placeholder="请输入标签名称" @change="handleQuery"
+                  style="width: 180px">
+                  <el-option v-for="item in tags" :key="item.tagId" :label="item.tagName" :value="item.tagId" />
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  size="mini"
-                  @click="handleQuery"
-                  >搜索</el-button
-                >
-                <el-button
-                  icon="el-icon-refresh"
-                  size="mini"
-                  @click="resetQuery"
-                  class="reset1"
-                  >重置</el-button
-                >
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="reset1">重置</el-button>
               </el-form-item>
             </el-form>
 
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button
-                  type="primary"
-                  plain
-                  icon="el-icon-plus"
-                  size="mini"
-                  @click="handleAdd"
-                  v-hasPermi="['doc:info:add']"
-                  >上传</el-button
-                >
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                  v-hasPermi="['doc:info:add']">上传</el-button>
               </el-col>
               <!-- <el-col :span="1.5">
                 <el-button
@@ -149,55 +90,20 @@
                   >导出</el-button
                 >
               </el-col> -->
-              <right-toolbar
-                :showSearch.sync="showSearch"
-                @queryTable="getList"
-              ></right-toolbar>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-            <el-table
-              v-loading="loading"
-              :data="infoList"
-              @selection-change="handleSelectionChange"
-              class="main-right-table"
-              height="calc(100vh * (630 / 1080))"
-              align="left"
-              :header-cell-style="{ 'text-align': 'center' }"
-            >
+            <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange"
+              class="main-right-table" height="calc(100vh * (630 / 1080))" align="left"
+              :header-cell-style="{ 'text-align': 'center' }">
               <el-table-column type="selection" width="55" align="center" />
               <el-table-column label="文件名称" align="left" prop="docName" />
-              <el-table-column
-                label="文件大小"
-                align="center"
-                prop="docSize"
-                :formatter="fileSizeData"
-                width="100"
-              />
-              <el-table-column
-                label="修改时间"
-                align="center"
-                prop="updateTime"
-              />
-              <el-table-column
-                label="文件级别"
-                align="center"
-                prop="docLevel"
-                :formatter="fileLevelData"
-                width="90"
-              />
-              <el-table-column
-                label="文件年份"
-                align="center"
-                prop="createYear"
-                width="90"
-              />
+              <el-table-column label="文件大小" align="center" prop="docSize" :formatter="fileSizeData" width="100" />
+              <el-table-column label="修改时间" align="center" prop="updateTime" />
+              <el-table-column label="文件级别" align="center" prop="docLevel" :formatter="fileLevelData" width="90" />
+              <el-table-column label="文件年份" align="center" prop="createYear" width="90" />
               <el-table-column label="文件类型" align="center" prop="docType" />
-              <el-table-column
-                label="标签"
-                align="center"
-                prop="tagName"
-                width="250"
-              >
+              <el-table-column label="标签" align="center" prop="tagName" width="250">
                 <template slot-scope="scope">
                   <div v-if="scope.row.tagList != []">
                     <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
@@ -206,60 +112,23 @@
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column
-                label="操作"
-                align="center"
-                class-name="small-padding fixed-width"
-              >
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                  <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-view"
-                    @click="handlePreview(scope.row)"
-                    v-if="checkLevel(scope.row, 'view')"
-                    >预览</el-button
-                  >
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)"
+                    v-if="checkLevel(scope.row, 'view')">预览</el-button>
                   <el-dropdown size="mini">
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-d-arrow-right"
-                      >更多</el-button
-                    >
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                     <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item
-                        icon="el-icon-view"
-                        @click.native="handleShare(scope.row)"
-                        v-if="checkLevel(scope.row, 'share')"
-                        >分享</el-dropdown-item
-                      >
-                      <el-dropdown-item
-                        icon="el-icon-view"
-                        @click.native="handleDownload(scope.row)"
-                        v-if="checkLevel(scope.row, 'download')"
-                        >下载</el-dropdown-item
-                      >
-                      <el-dropdown-item
-                        icon="el-icon-view"
-                        @click.native="handleEdit(scope.row)"
-                        v-if="checkLevel(scope.row, 'edit')"
-                        >在线编辑</el-dropdown-item
-                      >
-                      <el-dropdown-item
-                        icon="el-icon-edit"
-                        @click.native="handleUpdate(scope.row)"
-                        v-hasPermi="['doc:info:edit']"
-                        v-if="checkLevel(scope.row, 'modify')"
-                        >修改</el-dropdown-item
-                      >
-                      <el-dropdown-item
-                        icon="el-icon-delete"
-                        @click.native="handleDelete(scope.row)"
-                        v-hasPermi="['doc:info:remove']"
-                        v-if="checkLevel(scope.row, 'del')"
-                        >删除</el-dropdown-item
-                      >
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleShare(scope.row)"
+                        v-if="checkLevel(scope.row, 'share')">分享</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleDownload(scope.row)"
+                        v-if="checkLevel(scope.row, 'download')">下载</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleEdit(scope.row)"
+                        v-if="checkLevel(scope.row, 'edit')">在线编辑</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-edit" @click.native="handleUpdate(scope.row)"
+                        v-hasPermi="['doc:info:edit']" v-if="checkLevel(scope.row, 'modify')">修改</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)"
+                        v-hasPermi="['doc:info:remove']" v-if="checkLevel(scope.row, 'del')">删除</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                   <!-- <el-button
@@ -309,96 +178,47 @@
               </el-table-column>
             </el-table>
 
-            <pagination
-              v-show="total > 0"
-              :total="total"
-              :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize"
-              @pagination="getList"
-            />
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize" @pagination="getList" />
           </el-col>
         </el-row>
 
         <!-- 添加或修改文件基本信息对话框 -->
-        <el-dialog
-          :title="title"
-          :visible.sync="open"
-          width="500px"
-          append-to-body
-          custom-class="el-dialog5"
-        >
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body custom-class="el-dialog5">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="" prop="docPath">
               <!-- <el-input v-model="form.docPath" placeholder="请输入文件路径" /> -->
               <file-upload v-model="form.docPath" />
             </el-form-item>
             <el-form-item label="文件目录" prop="dirId">
-              <treeselect
-                v-model="form.dirId"
-                :options="dirList"
-                :normalizer="normalizer"
-                placeholder="请选择文件目录"
-              />
+              <treeselect v-model="form.dirId" :options="dirList" :normalizer="normalizer" placeholder="请选择文件目录" />
             </el-form-item>
             <el-form-item label="文件名称" prop="docName">
               <el-input v-model="form.docName" placeholder="请输入文件名称" />
             </el-form-item>
             <el-form-item label="文件级别" prop="docLevel">
               <el-select v-model="form.docLevel" placeholder="请选择文件级别">
-                <el-option
-                  v-for="item in levelOptions"
-                  :key="item.levelId"
-                  :label="item.levelName"
-                  :value="item.levelId"
-                ></el-option>
+                <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
+                  :value="item.levelId"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="选择标签(最多5个)" prop="tagName" color="red">
-              <el-tag
-                :key="tag"
-                v-for="tag in dynamicTags"
-                closable
-                :disable-transitions="false"
-                @close="handleClose(tag)"
-              >
+              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
+                @close="handleClose(tag)">
                 {{ tag }}
               </el-tag>
-              <el-input
-                class="input-new-tag"
-                v-if="inputVisible"
-                v-model="inputValue"
-                ref="saveTagInput"
-                size="small"
-                @keyup.enter.native="handleInputConfirm"
-                @blur="handleInputConfirm"
-                maxlength="5"
-                placeholder="最多输入五个字"
-              >
+              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" maxlength="5" placeholder="最多输入五个字">
               </el-input>
-              <el-button
-                v-else
-                class="button-new-tag"
-                size="small"
-                @click="showInput"
-                >添加标签</el-button
-              >
+              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
             </el-form-item>
             <el-form-item label="文件标签" color="red">
-              <el-tag
-                v-for="tag in tags"
-                :key="tag.tagName"
-                :type="tag.type"
-                @click="handleInputConfirm1(tag)"
-              >
+              <el-tag v-for="tag in tags" :key="tag.tagName" :type="tag.type" @click="handleInputConfirm1(tag)">
                 {{ tag.tagName }}
               </el-tag>
             </el-form-item>
             <el-form-item label="文件描述">
-              <el-input
-                v-model="form.docDesc"
-                type="textarea"
-                placeholder="请输入内容"
-              />
+              <el-input v-model="form.docDesc" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
@@ -408,21 +228,21 @@
         </el-dialog>
 
         <!-- 预览对话框 -->
-      <div class="dhk" v-if="a">
-       <video :src="vid" controls v-if="vid1"></video>
-       <audio :src="aud" controls v-if="aud1"></audio>
-
-       <div class="image-container" v-if="img1">
-        <el-image :src="imgg" ref="imageRef" style="max-width: 100%"/>
-        <el-button-group>
-      <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
-      <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
-      <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
-      <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
-    </el-button-group>
-  </div>
-        <el-button class="gb" icon="el-icon-close" circle @click="gb" />
-      </div>
+        <div class="dhk" v-if="a">
+          <video :src="vid" controls v-if="vid1"></video>
+          <audio :src="aud" controls v-if="aud1"></audio>
+
+          <div class="image-container" v-if="img1">
+            <el-image :src="imgg" ref="imageRef" style="max-width: 100%" />
+            <el-button-group>
+              <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+              <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
+              <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+              <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+            </el-button-group>
+          </div>
+          <el-button class="gb" icon="el-icon-close" circle @click="gb" />
+        </div>
 
 
       </div>
@@ -430,830 +250,873 @@
 
   </div>
 </template>
-  
+
 <script>
-import "@/styles1/element-ui1.scss";
-
-import { listTag } from "@/api/doc/tag.js";
-
-import {
-  listInfo,
-  getInfo,
-  delInfo,
-  addInfo,
-  updateInfo,
-} from "@/api/doc/info";
-import {
-  listDir,
-  getDir,
-  delDir,
-  addDir,
-  updateDir,
-  personalList,
-} from "@/api/doc/dir";
-import { listLevel } from "@/api/doc/level";
-
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
-export default {
-  name: "Info",
-  components: {
-    Treeselect,
-  },
-  data() {
-    return {
-      //预览图片的旋转缩放
-      scalePercentage: 1,
-      rotationAngle: 0,
-    
-    // 预览界面
-    a:false,
-    
-    //视频路径和显示
-    vid:"",
-    vid1:false,
-    //音频路径和显示
-    aud:"",
-    aud1:false,
-    //图片路径和显示
-    imgg:"",
-    img1:false,
-      //标签列表
-      tags: [
-        // { name: '十四大', id: 0 },
-        // { name: '领导讲话', id: 1 },
-        // { name: '会议精神', id: 2 },
-        // { name: '党章', id: 3 },
-        // { name: '212专案', id: 4 }
-      ],
-
-      //选择标签
-      dynamicTags: [],
-      inputVisible: false,
-      inputValue: "",
-
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 文件基本信息表格数据
-      infoList: [],
-      //目录ID
-      dirId: undefined,
-      //目录数据
-      dirList: undefined,
-      //文件等级数据
-      levelOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        docName: null,
-        docLevel: null,
-        createYear: null,
-        params: {
-          tagId: null,
+  import "@/styles1/element-ui1.scss";
+
+  import {
+    listTag
+  } from "@/api/doc/tag.js";
+
+  import {
+    listInfo,
+    getInfo,
+    delInfo,
+    addInfo,
+    updateInfo,
+  } from "@/api/doc/info";
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    personalList,
+  } from "@/api/doc/dir";
+  import {
+    listLevel
+  } from "@/api/doc/level";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "Info",
+    components: {
+      Treeselect,
+    },
+    data() {
+      return {
+        //预览图片的旋转缩放
+        scalePercentage: 1,
+        rotationAngle: 0,
+
+        // 预览界面
+        a: false,
+
+        //视频路径和显示
+        vid: "",
+        vid1: false,
+        //音频路径和显示
+        aud: "",
+        aud1: false,
+        //图片路径和显示
+        imgg: "",
+        img1: false,
+        //标签列表
+        tags: [
+          // { name: '十四大', id: 0 },
+          // { name: '领导讲话', id: 1 },
+          // { name: '会议精神', id: 2 },
+          // { name: '党章', id: 3 },
+          // { name: '212专案', id: 4 }
+        ],
+
+        //选择标签
+        dynamicTags: [],
+        inputVisible: false,
+        inputValue: "",
+
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 文件基本信息表格数据
+        infoList: [],
+        //目录ID
+        dirId: undefined,
+        //目录数据
+        dirList: undefined,
+        //文件等级数据
+        levelOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          docName: null,
+          docLevel: null,
+          createYear: null,
+          params: {
+            tagId: null,
+          },
         },
-      },
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "dirName",
-        id: "dirId",
-      },
-      // 表单校验
-      rules: {
-        docName: [
-          {
+        // 表单参数
+        form: {},
+        defaultProps: {
+          children: "children",
+          label: "dirName",
+          id: "dirId",
+        },
+        // 表单校验
+        rules: {
+          docName: [{
             required: true,
             message: "文件名称不能为空",
             trigger: "blur",
-          },
-        ],
-        dirId: [
-          {
+          }, ],
+          dirId: [{
             required: true,
             message: "文件目录不能为空",
             trigger: "blur",
-          },
-        ],
-        docLevel: [
-          {
+          }, ],
+          docLevel: [{
             required: true,
             message: "文件级别不能为空",
             trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    this.dirTree();
-  },
-
-
-  watch: {
-    "form.docPath": function (path, old) {
-      if (path && path.lastIndexOf("/") > -1) {
-        let name = path.slice(path.lastIndexOf("/") + 1);
-        this.form.docName = name.split("_")[0];
-      }
-    },
-  },
-  methods: {
-    //预览图片的缩放
-    rotate(angle) {
-      this.rotationAngle += angle;
-      const image = this.$refs.imageRef.$el.querySelector("img");
-      image.style.transform = `rotate(${this.rotationAngle}deg)`;
+          }, ],
+        },
+      };
     },
-      //预览图片的旋转
-    scale(delta) {
-      this.scalePercentage += delta;
-      const image = this.$refs.imageRef.$el.querySelector("img");
-      image.style.transform = `scale(${this.scalePercentage})`;
+    created() {
+      this.dirTree();
     },
 
-    // 预览关闭
-    gb(){
-    this.a=false;
-    },
 
-    //选择标签关闭
-    handleClose(tag) {
-      this.form.tagList.map((i, index) => {
-        if (tag == i.tagName) {
-          this.form.tagList.splice(index, 1);
+    watch: {
+      "form.docPath": function(path, old) {
+        if (path && path.lastIndexOf("/") > -1) {
+          let name = path.slice(path.lastIndexOf("/") + 1);
+          this.form.docName = name.split("_")[0];
         }
-      });
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
     },
+    methods: {
+      //预览图片的缩放
+      rotate(angle) {
+        this.rotationAngle += angle;
+        const image = this.$refs.imageRef.$el.querySelector("img");
+        image.style.transform = `rotate(${this.rotationAngle}deg)`;
+      },
+      //预览图片的旋转
+      scale(delta) {
+        this.scalePercentage += delta;
+        const image = this.$refs.imageRef.$el.querySelector("img");
+        image.style.transform = `scale(${this.scalePercentage})`;
+      },
 
-    showInput() {
-      if(this.dynamicTags.length>=5){
-        this.inputVisible = false;
-        alert("标签数不允许超过五个")
-      }else{
-        this.inputVisible = true;
-        this.$nextTick((_) => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-      }
-
-    },
-    //固定的标签
-    handleInputConfirm1(tag) {
-      if(this.dynamicTags.indexOf(tag.tagName)==-1){
-        this.dynamicTags.push(
-        tag.tagName
-      );
-      this.form.tagList.push({
-        tagId: tag.tagId,
-        tagName: tag.tagName,
-      });
-      }
+      // 预览关闭
+      gb() {
+        this.a = false;
+      },
 
-      if(this.dynamicTags.length>5){
-        alert("标签数不允许超过五个")
-        this.dynamicTags.pop()
-      };
-    
-    },
-    //自定义标签
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      // if (inputValue) {
-      //   this.dynamicTags.push(inputValue);
-      // }
-      // this.inputVisible = false;
-      // this.inputValue = "";
-      // this.form.tagList.push({
-      //   tagName:inputValue,
-      // });
-
-      //查询输入的标签在固定标签里是否存在
-      var Newtags = this.tags.find((value) => value.tagName == inputValue);
-      // console.log(a);
-      //删除标签
-    if(this.dynamicTags.indexOf(inputValue)!=-1){
-      this.dynamicTags.pop()
-      this.form.tagList.pop()
-    }
-      if (inputValue) {
-        this.dynamicTags.push(inputValue);
-      }
-      this.inputVisible = false;
-      this.inputValue = "";
-      //判断输入的标签在固定标签里是否存在,存在则换成固定标签
-      if (Newtags) {
-        this.form.tagList.push({
-          tagId: Newtags.tagId,
-          tagName: Newtags.tagName,
-        });
-      } else {
-        this.form.tagList.push({
-          tagName: inputValue,
+      //选择标签关闭
+      handleClose(tag) {
+        this.form.tagList.map((i, index) => {
+          if (tag == i.tagName) {
+            this.form.tagList.splice(index, 1);
+          }
         });
-      }
-      // console.log(this.form);
-      if(this.dynamicTags.length>5){
-        alert("标签数不允许超过五个")
-        this.dynamicTags.pop()
-      };
-    },
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
 
-    /** 转换目录信息数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.dirId,
-        label: node.dirName,
-        children: node.children,
-      };
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.dirId = data.dirId;
-      this.queryParams.dirId = this.dirId;
-      this.queryParams.searchValue = this.spaceId;
-      this.handleQuery();
-    },
-    //分享
-    handleShare(row) {
-      this.$router.push("/home/file/individual/share/user/" + row.docId);
-    },
-    /**下载按钮操作*/
-    handleDownload(row) {
-      location.href = row.docPath;
-    },
-    
-    //预览
-    handlePreview(row) {
-      // console.log( this.$route.meta.title);
+      showInput() {
+        if (this.dynamicTags.length >= 5) {
+          this.inputVisible = false;
+          alert("标签数不允许超过五个")
+        } else {
+          this.inputVisible = true;
+          this.$nextTick((_) => {
+            this.$refs.saveTagInput.$refs.input.focus();
+          });
+        }
+
+      },
+      //固定的标签
+      handleInputConfirm1(tag) {
+        if (this.dynamicTags.indexOf(tag.tagName) == -1) {
+          this.dynamicTags.push(
+            tag.tagName
+          );
+          this.form.tagList.push({
+            tagId: tag.tagId,
+            tagName: tag.tagName,
+          });
+        }
+
+        if (this.dynamicTags.length > 5) {
+          alert("标签数不允许超过五个")
+          this.dynamicTags.pop()
+        };
+
+      },
+      //自定义标签
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        // if (inputValue) {
+        //   this.dynamicTags.push(inputValue);
+        // }
+        // this.inputVisible = false;
+        // this.inputValue = "";
+        // this.form.tagList.push({
+        //   tagName:inputValue,
+        // });
+
+        //查询输入的标签在固定标签里是否存在
+        var Newtags = this.tags.find((value) => value.tagName == inputValue);
+        // console.log(a);
+        //删除标签
+        if (this.dynamicTags.indexOf(inputValue) != -1) {
+          this.dynamicTags.pop()
+          this.form.tagList.pop()
+        }
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = "";
+        //判断输入的标签在固定标签里是否存在,存在则换成固定标签
+        if (Newtags) {
+          this.form.tagList.push({
+            tagId: Newtags.tagId,
+            tagName: Newtags.tagName,
+          });
+        } else {
+          this.form.tagList.push({
+            tagName: inputValue,
+          });
+        }
+        // console.log(this.form);
+        if (this.dynamicTags.length > 5) {
+          alert("标签数不允许超过五个")
+          this.dynamicTags.pop()
+        };
+      },
+
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children,
+        };
+      },
+      // 节点单击事件
+      handleNodeClick(data) {
+        this.dirId = data.dirId;
+        this.queryParams.dirId = this.dirId;
+        this.queryParams.searchValue = this.spaceId;
+        this.handleQuery();
+      },
+      //分享
+      handleShare(row) {
+        this.$router.push("/home/file/individual/share/user/" + row.docId);
+      },
+      /**下载按钮操作*/
+      handleDownload(row) {
+        location.href = row.docPath;
+      },
+
+      //预览
+      handlePreview(row) {
+        // console.log( this.$route.meta.title);
         // row.isEdit = false;
         // this.$tab.openPage(
         //   // "文件[" + row.docName + "]预览",
         // document.title = row.docName,
-      //   // window.open("/individual/Pre/user/" + row.docId, '_blank'),
-      //   // row
-      // );
-
-     //图片后缀名
-      var pictures= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
-      //音频后缀名
-      var audios=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
-      //视频后缀名
-      var videos= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];
-
-      //判断后缀名
-      if(videos.some(item=>item==row.docType)){
-        this.a=true;
-        this.vid1=true;
-        this.aud1=false;
-        this.img1=false;
-        this.vid=row.docPath;
-      }else if(audios.some(item=>item==row.docType)){
-        this.a=true;
-        this.aud1=true;
-        this.vid1=false;
-        this.img1=false;
-        this.aud=row.docPath;
-      }else if(pictures.some(item=>item==row.docType)){
-        this.a=true;
-        this.aud1=false;
-        this.vid1=false;
-        this.img1=true;
-        this.imgg=row.docPath;
-      }
-      else{
+        //   // window.open("/individual/Pre/user/" + row.docId, '_blank'),
+        //   // row
+        // );
+
+        //图片后缀名
+        var pictures = ['jpeg', 'tiff', 'raw', 'bmp', 'gif', 'png', 'jpg'];
+        //音频后缀名
+        var audios = ['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
+        //视频后缀名
+        var videos = ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm', 'rmvb'];
+
+        //判断后缀名
+        if (videos.some(item => item == row.docType)) {
+          this.a = true;
+          this.vid1 = true;
+          this.aud1 = false;
+          this.img1 = false;
+          this.vid = row.docPath;
+        } else if (audios.some(item => item == row.docType)) {
+          this.a = true;
+          this.aud1 = true;
+          this.vid1 = false;
+          this.img1 = false;
+          this.aud = row.docPath;
+        } else if (pictures.some(item => item == row.docType)) {
+          this.a = true;
+          this.aud1 = false;
+          this.vid1 = false;
+          this.img1 = true;
+          this.imgg = row.docPath;
+        } else {
+          row.isEdit = false;
+          this.$tab.openPage(
+            window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
+              '_blank'),
+            // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
+          );
+          // console.log(111);
+        }
+        // console.log(row.docPath);
+        // console.log(vid);
+      },
+
+      //在线编辑
+      handleEdit(row) {
+        row.isEdit = true;
         this.$tab.openPage(
-        window.open('/individual/Pre/user/?id=' + row.docId +
-          "&year=" + row.createYear + "&name=" + this.$store.state.user.name, '_blank'),
-        // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
-        localStorage.setItem("docName",row.docName)
-      );
-      // console.log(111);
-      }
-      // console.log(row.docPath);
-      // console.log(vid);
-    },
+          window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
+            '_blank')
+        );
+      },
+      //先获取左边目录树,拿到目录ID和spaceId才能查询
+      dirTree() {
+        this.loading = true;
+        personalList().then((response) => {
+          this.dirId = response.data[0].dirId;
+          this.spaceId = response.data[0].spaceId;
+          this.dirList = this.handleTree(response.data, "dirId");
 
-    //在线编辑
-    handleEdit(row) {
-      // row.isEdit = true;
-      this.$tab.openPage(
-        // "文件[" + row.docName + "]在线编辑",
-        // "/doc/oo-edit/index/" + row.docId,
-        window.open("/individual/Pre/user/" + row.docId, '_blank'),
-        // row
-      );
-    },
-    //先获取左边目录树,拿到目录ID和spaceId才能查询
-    dirTree() {
-      this.loading = true;
-      personalList().then((response) => {
-        this.dirId = response.data[0].dirId;
-        this.spaceId = response.data[0].spaceId;
-        this.dirList = this.handleTree(response.data, "dirId");
+          this.queryParams.dirId = this.dirId;
+          this.queryParams.searchValue = this.spaceId;
+          this.getList();
+          //获取文件级别数据
+          listLevel().then((response) => {
+            this.levelOptions = response.rows;
+          });
+          this.loading = false;
 
-        this.queryParams.dirId = this.dirId;
-        this.queryParams.searchValue = this.spaceId;
-        this.getList();
-        //获取文件级别数据
-        listLevel().then((response) => {
-          this.levelOptions = response.rows;
+          //标签数据
+          listTag().then((res) => {
+            this.tags = res.rows;
+          });
         });
-        this.loading = false;
-
-        //标签数据
-        listTag().then((res) => {
-          this.tags = res.rows;
+      },
+      /**处理文档级别数据*/
+      fileLevelData(row, col, value) {
+        const obj = this.levelOptions.find((item) => item.levelId == value);
+        return obj.levelName;
+      },
+      /**根据文档级别显示数据*/
+      checkLevel(row, role) {
+        try {
+          const obj = this.levelOptions.find(
+            (item) => item.levelId == row.docLevel
+          );
+          if (obj.levelRole.indexOf(role) != -1) {
+            return true;
+          } else {
+            return false;
+          }
+        } catch (e) {}
+      },
+      /** 查询文件基本信息列表 */
+      getList() {
+        this.loading = true;
+        listInfo(this.queryParams).then((response) => {
+          this.infoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
         });
-      });
-    },
-    /**处理文档级别数据*/
-    fileLevelData(row, col, value) {
-      const obj = this.levelOptions.find((item) => item.levelId == value);
-      return obj.levelName;
-    },
-    /**根据文档级别显示数据*/
-    checkLevel(row, role) {
-      try {
-        const obj = this.levelOptions.find(
-          (item) => item.levelId == row.docLevel
-        );
-        if (obj.levelRole.indexOf(role) != -1) {
-          return true;
-        } else {
-          return false;
-        }
-      } catch (e) {}
-    },
-    /** 查询文件基本信息列表 */
-    getList() {
-      this.loading = true;
-      listInfo(this.queryParams).then((response) => {
-        this.infoList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
+      },
 
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        docId: null,
-        dirId: this.dirId,
-        docName: null,
-        docType: null,
-        docSize: null,
-        classifyId: null,
-        docDesc: null,
-        docPath: null,
-        docLevel: null,
-        allowEdit: null,
-        docOf: null,
-        owner: null,
-        createYear: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-        isDel: null,
-        searchValue: this.spaceId,
-        tagList: [],
-      };
-      this.resetForm("form");
-      this.dynamicTags=[]
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      // const para = {
-      //   tagId: queryParams.params.tagId,
-      // }
-      // this.queryParams.params = para;
-      // console.log(this.queryParams);
-
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.dirId = this.dirId;
-      this.queryParams.searchValue = this.spaceId;
-      this.queryParams.params.tagId = null;
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.docId);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加文件基本信息";
-      // this.dynamicTags=[];
-      // console.log(this.dynamicTags);
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const docId = row.docId || this.ids;
-      getInfo(docId, row.createYear).then((response) => {
-        this.form = response.data;
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          docId: null,
+          dirId: this.dirId,
+          docName: null,
+          docType: null,
+          docSize: null,
+          classifyId: null,
+          docDesc: null,
+          docPath: null,
+          docLevel: null,
+          allowEdit: null,
+          docOf: null,
+          owner: null,
+          createYear: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null,
+          searchValue: this.spaceId,
+          tagList: [],
+        };
+        this.resetForm("form");
+        this.dynamicTags = []
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        // const para = {
+        //   tagId: queryParams.params.tagId,
+        // }
+        // this.queryParams.params = para;
+        // console.log(this.queryParams);
+
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.queryParams.dirId = this.dirId;
+        this.queryParams.searchValue = this.spaceId;
+        this.queryParams.params.tagId = null;
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map((item) => item.docId);
+        this.single = selection.length !== 1;
+        this.multiple = !selection.length;
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
         this.open = true;
-        this.title = "修改文件基本信息";
-        this.dynamicTags = this.form.tagList.map(item=>item.tagName);
+        this.title = "添加文件基本信息";
+        // this.dynamicTags=[];
         // console.log(this.dynamicTags);
-        // console.log(this.form);
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const docId = row.docId || this.ids;
+        getInfo(docId, row.createYear).then((response) => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改文件基本信息";
+          this.dynamicTags = this.form.tagList.map(item => item.tagName);
+          // console.log(this.dynamicTags);
+          // console.log(this.form);
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
         this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.docId != null) {
-            updateInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+          if (valid) {
+            if (this.form.docId != null) {
+              updateInfo(this.form).then((response) => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addInfo(this.form).then((response) => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
           }
+        });
+
+        // console.log(this.dynamicTags.length);
+        // console.log(this.form);
+        // console.log(this.dynamicTags);
+
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const docIds = row.docId || this.ids;
+        this.$modal
+          .confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项?')
+          .then(function() {
+            return delInfo(docIds);
+          })
+          .then(() => {
+            this.getList();
+            this.$modal.msgSuccess("删除成功");
+          })
+          .catch(() => {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download(
+          "doc/info/export", {
+            ...this.queryParams,
+          },
+          `info_${new Date().getTime()}.xlsx`
+        );
+      },
+      /**格式化文件大小数据*/
+      fileSizeData(row, col, value) {
+        const KB = 1;
+        const MB = KB * 1024;
+        const GB = MB * 1024;
+        if (value < MB) {
+          return `${(value / KB).toFixed(2)} KB`;
+        } else if (value < GB) {
+          return `${(value / MB).toFixed(2)} MB`;
+        } else {
+          return `${(value / GB).toFixed(2)} GB`;
         }
-      });
-   
-      // console.log(this.dynamicTags.length);
-      // console.log(this.form);
-      // console.log(this.dynamicTags);
-     
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const docIds = row.docId || this.ids;
-      this.$modal
-        .confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项?')
-        .then(function () {
-          return delInfo(docIds);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download(
-        "doc/info/export",
-        {
-          ...this.queryParams,
-        },
-        `info_${new Date().getTime()}.xlsx`
-      );
-    },
-    /**格式化文件大小数据*/
-    fileSizeData(row, col, value) {
-      const KB = 1;
-      const MB = KB * 1024;
-      const GB = MB * 1024;
-      if (value < MB) {
-        return `${(value / KB).toFixed(2)} KB`;
-      } else if (value < GB) {
-        return `${(value / MB).toFixed(2)} MB`;
-      } else {
-        return `${(value / GB).toFixed(2)} GB`;
-      }
+      },
     },
-  },
-};
+  };
 </script>
-  
+
 <style scoped lang='scss'>
-.containe {
-  color: #7ea4c8;
-  font-size: 0.14rem;
-  font-family: PingFang SC-Medium, PingFang SC;
-  font-weight: 500;
-  padding-left: calc(100vw * (20 / 1920));
-  .header {
-    width: calc(100vw * (300 / 1920));
-    height: calc(100vh * (22 / 1080));
-    margin-top: calc(100vh * (20 / 1080));
-    margin-bottom: calc(100vh * (20 / 1080));
-    display: flex;
-    align-items: center;
-    img {
-      width: calc(100vw * (16 / 1920));
-      height: calc(100vh * (16 / 1080));
-      border: 1px dashed grey;
-      margin-left: 3px;
-      margin-right: 3px;
+  .containe {
+    color: #7ea4c8;
+    font-size: 0.14rem;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    padding-left: calc(100vw * (20 / 1920));
+
+    .header {
+      width: calc(100vw * (300 / 1920));
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      display: flex;
+      align-items: center;
+
+      img {
+        width: calc(100vw * (16 / 1920));
+        height: calc(100vh * (16 / 1080));
+        border: 1px dashed grey;
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+
+      .top1 {
+        color: #2e8aecff;
+      }
     }
-    .top1 {
-      color: #2e8aecff;
+
+    .title {
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      color: #ffffffff;
+      font-size: 0.16rem;
+      font-weight: bold;
+      line-height: calc(100vh * (22 / 1080));
     }
-  }
-  .title {
-    height: calc(100vh * (22 / 1080));
-    margin-top: calc(100vh * (20 / 1080));
-    margin-bottom: calc(100vh * (20 / 1080));
-    color: #ffffffff;
-    font-size: 0.16rem;
-    font-weight: bold;
-    line-height: calc(100vh * (22 / 1080));
-  }
-  .main {
-    width: calc(100vw * (1876 / 1920));
-    height: calc(100vh * (930 / 1080));
-    .app-container {
+
+    .main {
       width: calc(100vw * (1876 / 1920));
       height: calc(100vh * (930 / 1080));
-      padding: 0;
-    }
-    .main-left {
-      width: calc(100vw * (260 / 1920));
-      height: calc(100vh * (930 / 1080));
-      margin-right: calc(100vw * (20 / 1920));
-      margin-left: calc(100vw * (10 / 1920));
-      background: url(../../../assets/img/Group-609.png);
-      background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));
-      .head-top {
-        color: #ffffffff;
-        font-size: 0.2rem;
-        padding-left: calc(100vw * (15 / 1920));
-        padding-top: calc(100vh * (18 / 1080));
-      }
-      //左边下拉菜单
-      .head-container {
-        margin-top: -5px;
+
+      .app-container {
+        width: calc(100vw * (1876 / 1920));
+        height: calc(100vh * (930 / 1080));
+        padding: 0;
       }
-    }
-    .main-right {
-      width: calc(100vw * (1600 / 1920));
-      height: calc(100vh * (930 / 1080));
-      background: url(../../../assets/img/Group-610.png);
-      background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));
-      p {
-        color: #ffffffff;
-        font-size: 0.16rem;
-        padding-left: calc(100vw * (15 / 1920));
-        padding-top: calc(100vh * (18 / 1080));
+
+      .main-left {
+        width: calc(100vw * (260 / 1920));
+        height: calc(100vh * (930 / 1080));
+        margin-right: calc(100vw * (20 / 1920));
+        margin-left: calc(100vw * (10 / 1920));
+        background: url(../../../assets/img/Group-609.png);
+        background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));
+
+        .head-top {
+          color: #ffffffff;
+          font-size: 0.2rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (18 / 1080));
+        }
+
+        //左边下拉菜单
+        .head-container {
+          margin-top: -5px;
+        }
       }
-      .main-right-top {
-        height: calc(100vh * (60 / 1080));
-        margin-top: calc(100vw * (25 / 1920));
-        .reset1 {
-          color: #2e8aecff;
+
+      .main-right {
+        width: calc(100vw * (1600 / 1920));
+        height: calc(100vh * (930 / 1080));
+        background: url(../../../assets/img/Group-610.png);
+        background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));
+
+        p {
+          color: #ffffffff;
+          font-size: 0.16rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (18 / 1080));
+        }
+
+        .main-right-top {
+          height: calc(100vh * (60 / 1080));
+          margin-top: calc(100vw * (25 / 1920));
+
+          .reset1 {
+            color: #2e8aecff;
+            background: transparent;
+            border: 1px solid #2e8aecff;
+          }
+        }
+
+        .mb8 {
+          margin-top: 20px;
+        }
+
+        .main-right-table {
+          background: transparent;
+          color: #7ea4c8ff;
+        }
+
+        //表格底部
+        .pagination-container {
+          width: calc(100vw * (1540 / 1920));
+          height: calc(100vh * (50 / 1080));
           background: transparent;
-          border: 1px solid #2e8aecff;
+          padding: 0 !important;
+          margin: 0;
+          margin-left: calc(100vw * (20 / 1920));
+          margin-top: calc(100vh * (10 / 1080));
         }
       }
-      .mb8 {
-        margin-top: 20px;
+    }
+
+    .dhk {
+      width: calc(100vw * (1500 / 1920));
+      height: calc(100vh * (850 / 1080));
+      // background: salmon;
+      background: #0F1540FF;
+      position: absolute;
+      top: 10%;
+      left: 10%;
+      z-index: 99;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .gb {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+
+      video {
+        width: calc(100vw * (1440 / 1920));
+        height: calc(100vh * (810 / 1080));
       }
-      .main-right-table {
-        background: transparent;
-        color: #7ea4c8ff;
+
+      .el-image {
+        width: calc(100vw * (960 / 1920));
+        height: calc(100vh * (720 / 1080));
       }
-      //表格底部
-      .pagination-container {
-        width: calc(100vw * (1540 / 1920));
-        height: calc(100vh * (50 / 1080));
-        background: transparent;
-        padding: 0 !important;
-        margin: 0;
-        margin-left: calc(100vw * (20 / 1920));
-        margin-top: calc(100vh * (10 / 1080));
+
+      .el-button-group {
+        position: absolute;
+        top: 10%;
+        right: 1%;
       }
     }
   }
-  .dhk{
-    width: calc(100vw * (1500 / 1920));
-    height: calc(100vh * (850 / 1080));
-    // background: salmon;
-    background: #0F1540FF;
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    z-index: 99;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .gb{
-    position: absolute;
-    top: 0;
-    right: 0; 
-    }
-    video{
-     width: calc(100vw * (1440 / 1920));
-     height: calc(100vh * (810 / 1080)); 
-    }
-    .el-image{
-     width: calc(100vw * (960 / 1920));
-     height: calc(100vh * (720 / 1080)); 
-    }
-     .el-button-group {
-      position: absolute;
-      top: 10%;
-      right: 1%;
-    }
+
+  //标签按钮
+  ::v-deep .el-tag {
+    color: #df9439ff;
+    border: 1px solid #ff9839ff;
+    background: #bba99240;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    height: calc(100vh * (35 / 1080));
+    line-height: calc(100vh * (35 / 1080));
   }
-}
-//标签按钮
-::v-deep .el-tag {
-  color: #df9439ff;
-  border: 1px solid #ff9839ff;
-  background: #bba99240;
-  margin-left: 3px;
-  margin-bottom: 3px;
-  height: calc(100vh * (35 / 1080));
-  line-height: calc(100vh * (35 / 1080));
-}
-//左边下拉菜单样式
-::v-deep .el-tree {
-  width: calc(100vw * (200 / 1920));
-  margin-top: calc(100vh * (30 / 1080));
-  background: transparent;
-  color: #7ea4c8ff;
-}
-::v-deep .el-tree-node {
-  width: calc(100vw * (232 / 1920));
-}
-//悬停时的样式
-::v-deep .el-tree-node__content:hover {
-  background: #293667ff;
-}
-//右边顶部字体样式
-::v-deep .el-form-item__label {
-  color: #2e8aecff;
-}
-//右边顶部搜索框样式
-::v-deep .el-input__inner {
-  background-color: transparent;
-  border: 1px solid #01d1ffff;
-  color: #ffffffcc;
-}
-::v-deep .el-form-item--small .el-form-item__content {
-  width: calc(100vw * (220 / 1920));
-}
-//右边顶部标签搜索
-::v-deep .el-select > .el-input {
-  width: calc(100vw * (180 / 1920));
-}
-//右边表格线条隐藏
-::v-deep .el-table::before {
-  height: 0;
-}
-//table样式
-::v-deep .el-table {
-  overflow: auto;
-}
-::v-deep .el-table th {
-  background: #016c9aa6;
-  color: #2e8aec;
-}
-::v-deep .el-table tr {
-  background: transparent;
-}
-::v-deep .el-table tbody tr:hover > td {
-  background-color: #016c9a78 !important;
-}
-::v-deep .el-table td.el-table__cell {
-  border-bottom: 1px solid #006c9aff;
-}
-::v-deep .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid #006c9aff;
-}
-//搜索刷新按钮颜色
-::v-deep .el-button.is-circle {
-  background: #006c9aff;
-  color: white;
-}
-//按钮的样式
-::v-deep .el-button--primary.is-plain,
-.el-button--success.is-plain.is-disabled,
-.el-button--danger.is-plain.is-disabled,
-.el-button--warning.is-plain,
-.el-button--success.is-plain,
-.el-button--danger.is-plain {
-  background-color: #002a5cff;
-  border: none;
-  color: #2e8aec;
-}
-//新增/修改弹窗样式
-::v-deep .el-dialog__title {
-  color: white;
-}
-::v-deep .el-dialog .el-form-item {
-  margin-top: calc(100vw * (30 / 1920));
-}
-::v-deep .el-upload-list__item:hover {
-  background: #002659ff;
-}
-//建议框样式
-::v-deep .el-textarea__inner {
-  background: transparent;
-  resize: none;
-}
-//传文件的内容颜色
-::v-deep .el-link.el-link--default {
-  color: #006c9aff;
-}
-//上传弹窗位置高度
-::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 1vh !important;
-}
-::v-deep .el-form {
-  height: calc(100vh * (800 / 1080));
-}
-//弹窗底部按钮的位置
-::v-deep .el-dialog__footer {
-  padding: 0;
-}
-//弹窗关闭按钮
-::v-deep .el-dialog__headerbtn {
-  top: calc(100vh * (45 / 1080));
-  right: calc(100vw * (20 / 1920));
-  font-size: 20px;
-}
-::v-deep .el-dialog5 {
-  width: calc(100vw * (800 / 1920)) !important;
-  height: calc(100vh * (1050 / 1080)) !important;
-  background: url(../../../assets/img/Group-585.png);
-  background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
-  //弹窗中间内容
-  .el-dialog__body {
-    // width: calc(100vw * (620 / 1920)) ;
-    height: calc(100vh * (780 / 1080));
-    margin-top: calc(100vh * (50 / 1080));
-    margin-bottom: calc(100vh * (20 / 1080));
-    padding-right: 50px;
+
+  //左边下拉菜单样式
+  ::v-deep .el-tree {
+    width: calc(100vw * (200 / 1920));
+    margin-top: calc(100vh * (30 / 1080));
+    background: transparent;
+    color: #7ea4c8ff;
+  }
+
+  ::v-deep .el-tree-node {
+    width: calc(100vw * (232 / 1920));
+  }
+
+  //悬停时的样式
+  ::v-deep .el-tree-node__content:hover {
+    background: #293667ff;
+  }
+
+  //右边顶部字体样式
+  ::v-deep .el-form-item__label {
+    color: #2e8aecff;
+  }
+
+  //右边顶部搜索框样式
+  ::v-deep .el-input__inner {
+    background-color: transparent;
+    border: 1px solid #01d1ffff;
+    color: #ffffffcc;
+  }
+
+  ::v-deep .el-form-item--small .el-form-item__content {
+    width: calc(100vw * (220 / 1920));
+  }
+
+  //右边顶部标签搜索
+  ::v-deep .el-select>.el-input {
+    width: calc(100vw * (180 / 1920));
+  }
+
+  //右边表格线条隐藏
+  ::v-deep .el-table::before {
+    height: 0;
+  }
+
+  //table样式
+  ::v-deep .el-table {
     overflow: auto;
-    // background: salmon;
   }
-  .el-dialog__header {
-    padding-bottom: 0;
+
+  ::v-deep .el-table th {
+    background: #016c9aa6;
+    color: #2e8aec;
+  }
+
+  ::v-deep .el-table tr {
+    background: transparent;
+  }
+
+  ::v-deep .el-table tbody tr:hover>td {
+    background-color: #016c9a78 !important;
   }
-  .el-upload__tip {
-    font-size: 12px;
+
+  ::v-deep .el-table td.el-table__cell {
+    border-bottom: 1px solid #006c9aff;
+  }
+
+  ::v-deep .el-table th.el-table__cell.is-leaf {
+    border-bottom: 1px solid #006c9aff;
+  }
+
+  //搜索刷新按钮颜色
+  ::v-deep .el-button.is-circle {
+    background: #006c9aff;
+    color: white;
+  }
+
+  //按钮的样式
+  ::v-deep .el-button--primary.is-plain,
+  .el-button--success.is-plain.is-disabled,
+  .el-button--danger.is-plain.is-disabled,
+  .el-button--warning.is-plain,
+  .el-button--success.is-plain,
+  .el-button--danger.is-plain {
+    background-color: #002a5cff;
+    border: none;
+    color: #2e8aec;
+  }
+
+  //新增/修改弹窗样式
+  ::v-deep .el-dialog__title {
+    color: white;
+  }
+
+  ::v-deep .el-dialog .el-form-item {
+    margin-top: calc(100vw * (30 / 1920));
+  }
+
+  ::v-deep .el-upload-list__item:hover {
+    background: #002659ff;
+  }
+
+  //建议框样式
+  ::v-deep .el-textarea__inner {
+    background: transparent;
+    resize: none;
+  }
+
+  //传文件的内容颜色
+  ::v-deep .el-link.el-link--default {
     color: #006c9aff;
-    margin-top: 0px;
   }
-  .el-upload-list__item {
-    margin: 0;
+
+  //上传弹窗位置高度
+  ::v-deep .el-dialog:not(.is-fullscreen) {
+    margin-top: 1vh !important;
   }
 
-  .el-tag + .el-tag {
-    margin-left: 10px;
+  ::v-deep .el-form {
+    height: calc(100vh * (800 / 1080));
   }
-  .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+
+  //弹窗底部按钮的位置
+  ::v-deep .el-dialog__footer {
+    padding: 0;
   }
-  .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
+
+  //弹窗关闭按钮
+  ::v-deep .el-dialog__headerbtn {
+    top: calc(100vh * (45 / 1080));
+    right: calc(100vw * (20 / 1920));
+    font-size: 20px;
   }
-}
 
+  ::v-deep .el-dialog5 {
+    width: calc(100vw * (800 / 1920)) !important;
+    height: calc(100vh * (1050 / 1080)) !important;
+    background: url(../../../assets/img/Group-585.png);
+    background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
 
-</style>
-  
+    //弹窗中间内容
+    .el-dialog__body {
+      // width: calc(100vw * (620 / 1920)) ;
+      height: calc(100vh * (780 / 1080));
+      margin-top: calc(100vh * (50 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      padding-right: 50px;
+      overflow: auto;
+      // background: salmon;
+    }
 
+    .el-dialog__header {
+      padding-bottom: 0;
+    }
+
+    .el-upload__tip {
+      font-size: 12px;
+      color: #006c9aff;
+      margin-top: 0px;
+    }
 
+    .el-upload-list__item {
+      margin: 0;
+    }
+
+    .el-tag+.el-tag {
+      margin-left: 10px;
+    }
+
+    .button-new-tag {
+      margin-left: 10px;
+      height: 32px;
+      line-height: 30px;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
+  }
+</style>

+ 29 - 18
src/views1/File/Individual/Pre/PreView.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="containe">
-  <div v-if='show' class='qualityManual-container-office'>
-    <vab-only-office :option='option' />
+  <div class="containe">
+    <div v-if='show' class='qualityManual-container-office'>
+      <vab-only-office :option='option' />
+    </div>
+
   </div>
-  
-</div>
 </template>
 
 <script>
@@ -30,35 +30,45 @@
           },
           editUrl: '' //回调地址
         },
+        row: {},
+        callbackUrl: '',
         show: true //是否显示
       }
     },
     created() {
-      this.getFile();
-      const docNewname= localStorage.getItem("docName")
-      document.title=docNewname+"预览"
+      this.getConfigKey("oo.callback.url").then(response => {
+        this.row = JSON.parse(this.$route.query.row);
+        this.callbackUrl = response.msg;
+        this.getFile();
+        let title = "文件[" + this.row.docName + "]";
+        if (this.row.isEdit) {
+          title += "在线编辑"
+        } else {
+          title += "预览"
+        }
+        document.title = title;
+      });
     },
     methods: {
       getFile() {
         //获取当前登录用户名:this.$store.state.user.name
         //获取当前登录用户ID:this.$store.state.user.uid
         //获取当前登录用户昵称:this.$store.state.user.uname
-        let row = this.$route.query;
-        let isEdit = row.isEdit == 'true';
+
         this.show = true;
         // getAction('/file/selectById', { id: this.id }).then(res => {
-        this.option.isEdit = isEdit;
-        this.option.url = row.docPath;
+        this.option.isEdit = this.row.isEdit;
+        this.option.url = this.row.docPath;
         //'http://192.168.1.26:9300/statics/2023/04/03/产品研发会议纪要20230314_20230403170635A001.doc';
-        this.option.title = row.docName; //'测试word';
-        this.option.fileType = row.docType;
+        this.option.title = this.row.docName; //'测试word';
+        this.option.fileType = this.row.docType;
 
         this.option.user = {
           id: this.$store.state.user.uid,
           name: this.$store.state.user.uname
         };
-        this.option.editUrl = 'http://192.168.1.26:8080/doc/only-office/callback?id=' + row.docId +
-          "&year=" + row.createYear + "&name=" + this.$store.state.user.name;
+        this.option.editUrl = this.callbackUrl + '?id=' + this.row.docId +
+          "&year=" + this.row.createYear + "&name=" + this.$store.state.user.name;
       },
       close() {
         this.show = false
@@ -92,7 +102,8 @@
     width: 100%;
     height: '900px';
   }
-  .fh{
+
+  .fh {
     position: absolute;
     right: 1%;
     top: 8%;
@@ -100,4 +111,4 @@
     color: #fff !important;
     border: none;
   }
-</style>
+</style>