优化文档信息弹窗布局和样式

src/views/doc/components/file-table-list.vue

@@ -970,8 +970,9 @@
   };
 </script>
 <style scoped lang="scss">
-  .el-tabs__content {
+  :deep(.el-tabs__content) {
     height: calc(100% - 39px);
+    overflow: auto;
   }
   :deep(.ele-table-tool-title-content) {
     display: contents;

src/views/doc/components/info.vue

@@ -1,14 +1,8 @@
 <!-- 用户编辑弹窗 -->
 <template>
-  <el-form
-    ref="form"
-    :model="form"
-    style="width: 800px"
-    label-width="120px"
-    disabled
-  >
+  <el-form ref="form" :model="form" label-width="120px" disabled>
     <el-row :gutter="15">
-      <el-col :span="12">
+      <el-col :span="8">
         <el-form-item label="文档类型" prop="type">
           <DictSelection
             dictName="文档类型"
@@ -16,20 +10,27 @@
             :disabled="true"
           ></DictSelection>
         </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
-        <el-form-item label="文档名称" prop="name">
-          <el-input v-model="form.name"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
         <el-form-item label="文档大小" prop="sizeUnit">
           <el-input v-model="form.sizeUnit"></el-input>
         </el-form-item>
+        <el-form-item label="检出人" prop="checkOutUserName">
+          <el-input v-model="form.checkOutUserName"></el-input>
+        </el-form-item>
+        <el-form-item label="检出时间" prop="checkOutTime">
+          <el-input v-model="form.checkOutTime"> </el-input>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-input v-model="form.createTime"></el-input>
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updateTime">
+          <el-input v-model="form.updateTime"></el-input>
+        </el-form-item>
       </el-col>
 
-      <el-col :span="12">
+      <el-col :span="8">
+        <el-form-item label="文档名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
         <el-form-item label="文档位置" prop="directoryId">
           <el-cascader
             style="width: 100%"
@@ -44,52 +45,51 @@
             }"
           ></el-cascader>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="检出人" prop="checkOutUserName">
-          <el-input v-model="form.checkOutUserName"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
         <el-form-item label="检出状态" prop="checkOutStatus">
-          <el-input v-model="form.checkOutStatus">
-          
-          </el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="检出时间" prop="checkOutTime">
-          <el-input v-model="form.checkOutTime">
-          </el-input>
-
+          <el-input v-model="form.checkOutStatus"> </el-input>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
         <el-form-item label="创建人" prop="createUserName">
           <el-input v-model="form.createUserName"></el-input>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="创建时间" prop="createTime">
-          <el-input v-model="form.createTime"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
         <el-form-item label="修改人" prop="updateUserName">
           <el-input v-model="form.updateUserName"></el-input>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="修改时间" prop="updateTime">
-          <el-input v-model="form.updateTime"></el-input>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
-        <el-form-item label="备注" prop="remark">
+      <el-col
+        :span="8"
+        v-if="
+          isCreateUserId(form) ||
+          isPower(form, 'download') ||
+          isPower(form, 'revise')
+        "
+      >
+        <el-form-item label="文档地址" prop="filePath">
           <el-input
-            v-model="form.remark"
-            type="textarea"
+            v-model="form.filePath"
+            :title="form.filePath"
+            style="width: calc(100% - 70px)"
           ></el-input>
+          <div
+            style="
+              margin-left: 10px;
+              cursor: pointer;
+              background: #409eff;
+              width: 60px;
+              color: #fff;
+              height: 30px;
+              display: inline-block;
+              text-align: center;
+              line-height: 30px;
+              border-radius: 3px;
+            "
+            @click="copyTextToClipboard(form.filePath)"
+          >
+            复制</div
+          >
+          <!-- <el-button type="primary" size="mini"  @click.native="copyTextToClipboard(form.filePath)" style="width: 60px; margin-left: 10px">复制</el-button> -->
         </el-form-item>
       </el-col>
     </el-row>
@@ -97,86 +97,118 @@
 </template>
 
 <script>
-import { fileGetByIdAPI } from '@/api/doc-manage';
+  import { fileGetByIdAPI } from '@/api/doc-manage';
+  import { isPower, isCreateUserId } from '../util.js';
+  export default {
+    props: {
+      // 上级id
+      parentId: [Number, String],
+      // 文件夹数据
+      folderList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      const defaultForm = {
+        name: '', //名称
+        type: '', //类型
+        sizeUnit: '', //大小
+        unit: '', //单位
+        remark: '', //备注
+        status: '', //状态
+        storagePathId: '',
+        directoryId: '',
+        storagePath: [],
+        id: '',
+        filePath: ''
+      };
+      return {
+        defaultForm,
+        isPower,
+        isCreateUserId,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        // 提交状态
+        loading: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {},
+    watch: {
+      parentId: function (val) {
+        if (val) {
+          this.init(val);
+        }
+      }
+    },
+    methods: {
+      copyTextToClipboard(text) {
+        // alert(1);
+        var textArea = document.createElement('textarea');
+        textArea.value = text;
+        // 避免滚动到页面的最底部
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          var successful = document.execCommand('copy');
+          var msg = successful ? 'successful' : 'unsuccessful';
+          console.log('Copying text command was ' + msg);
+        } catch (err) {
+          console.error('Oops, unable to copy', err);
+        }
 
-export default {
-  props: {
-    // 上级id
-    parentId: [Number, String],
-    // 文件夹数据
-    folderList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    const defaultForm = {
-      name: '', //名称
-      type: '', //类型
-      sizeUnit: '', //大小
-      unit: '', //单位
-      remark: '', //备注
-      status: '', //状态
-      storagePathId: '',
-      directoryId: '',
-      storagePath: [],
-      id: ''
-    };
-    return {
-      defaultForm,
-      // 表单数据
-      form: { ...defaultForm },
-      // 表单验证规则
-      // 提交状态
-      loading: false
-    };
-  },
-  computed: {
-    // 是否开启响应式布局
-    styleResponsive() {
-      return this.$store.state.theme.styleResponsive;
-    }
-  },
-  created() {},
-  watch: {
-    parentId:function(val) {
-    
-      if (val) {
-        this.init(val);
+        document.body.removeChild(textArea);
+      },
+
+      async init(val) {
+        this.form = await fileGetByIdAPI(val);
+        let file = this.form.storagePath[0];
+        let fileNames = file.storePath.split('/');
+        let url =
+          window.location.origin +
+          '/api/main/file/getFile?objectName=' +
+          file.storePath +
+          '&fullfilename=' +
+          fileNames[fileNames.length - 1];
+        this.form.filePath = url;
+        console.log(this.form, 'this.form');
+        this.form.checkOutStatus =
+          this.form.checkOutStatus == 1 ? '已检出' : '';
+        this.form.type = this.form.type + '';
       }
     }
-  },
-  methods: {
-    async init(val) {
-      this.form = await fileGetByIdAPI(val);
-      this.form.checkOutStatus=this.form.checkOutStatus==1?'已检出':""
-      this.form.type = this.form.type + '';
-    }
-  }
-};
+  };
 </script>
 <style scoped lang="scss">
-.aaa {
-  width: 100%;
-
-  ::v-deep .upload-demo {
+  .aaa {
     width: 100%;
 
-    .el-upload--text {
+    ::v-deep .upload-demo {
       width: 100%;
 
-      button {
+      .el-upload--text {
         width: 100%;
-        background: #ffffff;
-        border: 1px solid #dbdbdb;
-        border-radius: 5px;
+
+        button {
+          width: 100%;
+          background: #ffffff;
+          border: 1px solid #dbdbdb;
+          border-radius: 5px;
+        }
       }
-    }
 
-    .el-upload-list {
-      transform: translate(10px, -39px);
-      position: absolute;
+      .el-upload-list {
+        transform: translate(10px, -39px);
+        position: absolute;
+      }
     }
   }
-}
 </style>