kd-aiot-frontend-fm/src/views/doc/components/info.vue

<!-- 用户编辑弹窗 -->
<template>
  <el-form ref="form" :model="form" label-width="120px" disabled>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item label="文档类型" prop="type">
          <DictSelection
            dictName="文档类型"
            v-model="form.type"
            :disabled="true"
          ></DictSelection>
        </el-form-item>
        <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="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%"
            v-model="form.directoryId"
            :options="folderList"
            :props="{
              value: 'id',
              label: 'name',
              children: 'sonDirectoryList',
              emitPath: false,
              checkStrictly: true
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="检出状态" prop="checkOutStatus">
          <el-input v-model="form.checkOutStatus"> </el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="createUserName">
          <el-input v-model="form.createUserName"></el-input>
        </el-form-item>
        <el-form-item label="修改人" prop="updateUserName">
          <el-input v-model="form.updateUserName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
      </el-col>
      <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.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>
  </el-form>
</template>

<script>
  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');
        if(successful){
           this.$message.success('复制成功')
        }
        } catch (err) {
          console.error('Oops, unable to copy', err);
        }

        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 + '';
      }
    }
  };
</script>
<style scoped lang="scss">
  .aaa {
    width: 100%;

    ::v-deep .upload-demo {
      width: 100%;

      .el-upload--text {
        width: 100%;

        button {
          width: 100%;
          background: #ffffff;
          border: 1px solid #dbdbdb;
          border-radius: 5px;
        }
      }

      .el-upload-list {
        transform: translate(10px, -39px);
        position: absolute;
      }
    }
  }
</style>