资料馆添加附件上传，添加支持查看pdf,图片文件功能；字典管理，值域管理页面左侧目录树展示效果优化

Surpriseplus

2023-03-02 015a99675ad021a5b1f8d635da3e8887e0c28a97

 src/views/Archive/index.vue

@@ -465,6 +465,102 @@
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 数据库附件信息 -->
      <el-dialog
        :title="$t('common.enclosure')"
        :visible.sync="outerVisible"
        :close-on-click-modal="false"
        width="50%"
        :modal="false"
      >
        <div style="height:68vh">
          <el-form
            :model="fromfile"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-input
                v-model="fromfile.file"
                style="width: 300px; margin-right: 20px"
                :placeholder="$t('common.choose')"
                disabled
              ></el-input>
              <input
                name="file1"
                type="file"
                id="insertFile"
                multiple="multiple"
                style="display: none"
                @change="insertFile( )"
              />
              <el-link
                @click="getInsertFile( )"
                :underline="false"
              ><i class="el-icon-folder-opened"></i></el-link>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="2">
                  <el-link
                    class="elLink"
                    :underline="false"
                    @click="setAttachInsert"
                  >{{$t('common.append')}}</el-link>
                </el-col>
                <el-col :span="2">
                  <el-link
                    class="elLink"
                    :underline="false"
                    @click="setAttachDel"
                  >{{$t('common.delete')}}</el-link>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableAttach"
            ref="filterTable"
            height="calc(100% - 130px)"
            border
            style="width: 100%"
            @selection-change="handleAttatchChange"
          >
            <el-table-column
              type="selection"
              width="70"
            />
            <el-table-column
              width="60"
              type="index"
              :label="$t('common.index')"
            />
            <el-table-column
              prop="name"
              :label="$t('common.fileNme')"
            />

            <el-table-column
              prop="sizes"
              :label="$t('common.size')"
              :formatter="statSizeChange"
            />
            <el-table-column
              align="center"
              :label="$t('common.operate')"
              min-width="100"
            >
              <template slot-scope="scope">
                <el-link
                  @click="setAttatchDetail(scope.$index, scope.row)"
                  class="elLink"
                >{{ $t('common.see') }}</el-link>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!-- 数据库Table信息 -->
      <div style="height:68vh">
        <el-form
          :model="formInline"
@@ -910,6 +1006,37 @@
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="预览"
      :append-to-body="false"
      :visible.sync="dialog.dialogVisible"
      width="70%"
      :close-on-click-modal="false"
    >
      <div
        v-if="dialog.isPdf"
        class="pdfClass"
      >
        <iframe
          :src="dialog.src"
          type="application/x-google-chrome-pdf"
          width="100%"
          height="100%"
        >
        </iframe>
      </div>
      <div
        v-if="dialog.isJpg"
        class="pdfClass"
      >
        <img
          style="width:100%; height:100%"
          :src="dialog.src"
          alt=""
        />
      </div>
    </el-dialog>

    <iframe
      id="downFrame"
      src=""
@@ -938,7 +1065,9 @@
  dataLib_selectDownloadFile,
  dataLib_selectPageCountForDownload,
  dataLib_selectPageAndCountByPid,
  dataLib_selectMetaById
  dataLib_selectMetaById,
  dataLib_selectFiles,
  dataLib_deletes
} from '../../api/api';
export default {
  components: {
@@ -966,7 +1095,7 @@
      }
    };
    return {

      fromfile: { file: '' },
      fromSqlflag: false,
      filedsOption: [],
      condOption: [],
@@ -1055,6 +1184,20 @@
      },
      queryMetaFlag: false,
      metaDataTable: [],
      upAttach: {
        tabName: null,
        eventid: null,
      },
      outerVisible: false,
      tableAttach: [],
      dataLib_selectFiles: [],
      attacgSelection: [],
      dialog: {
        dialogVisible: false,
        isPdf: false,
        isJpg: false,
        src: ''
      }
    };
  },
  mounted() {
@@ -1064,9 +1207,119 @@
    this.signGetPublicKey();
  },
  methods: {
    getAttachTable() {

    // 附件=>表格选择
    handleAttatchChange(val) {
      this.attacgSelection = val;
    },
    //附件=>文件选择
    getInsertFile() {
      $('#insertFile').click();
    },
    insertFile() {
      var val = document.getElementById('insertFile').files;
      if (!val || !val.length) return;
      this.fromfile.file = val[0].name;
    },
    getAttachTable(index, row) {
      if (row.eventid != null) {
        this.upAttach.eventid = row.eventid;
      } else {
        this.upAttach.eventid = "";
      }
      this.outerVisible = true;
      this.getAttacthFlieList();
    },
    //附件列表查询 
    async getAttacthFlieList() {
      var obj = this.upAttach;
      const res = await dataLib_selectFiles(obj);
      if (res.code != 200) {
        this.$message.error('列表调用失败');
        return
      }
      this.tableAttach = res.result;
    },
    refreshAttatchDetail() {
      this.dialog.src = "";
      this.dialog.dialogVisible = false;
      this.dialog.isPdf = false;
      this.dialog.isJpg = false;
    },
    //附件查看
    setAttatchDetail(index, row) {

      this.refreshAttatchDetail()
      var name = row.name;
      if (name.indexOf('.pdf') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isPdf = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      } else if (name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isJpg = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      }
    },
    //附件刪除
    async setAttachDel() {
      var std = [];
      for (var i in this.attacgSelection) {
        std.push(this.attacgSelection[i].id);
      }
      const res = await dataLib_deletes({ ids: std.toString() });
      if (res.code != 200) {
        this.$message.error('文件删除失败');
      }
      this.getAttacthFlieList();
    },
    //附件列表新增
    setAttachInsert() {
      var token = getToken();
      var fs = document.getElementById("insertFile");
      if (fs.files.length == 0) {

        this.$message({
          message: '请选择要上传的文件！',
          type: 'warning'
        });
        return;
      }
      const formData = new FormData()
      for (var i = 0, c = fs.files.length; i < c; i++) {

        formData.append('file', fs.files[i]); // fs.files[i].name,file
      }

      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=" + this.upAttach.tabName + "&eventid=" + this.upAttach.eventid, {
        type: "post",
        data: formData,
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (rs) => {
          this.$message({
            message: '附件添加成功',
            type: 'success'
          });
          document.getElementById("insertFile").value = "";
          this.fromfile = {
            file: '',
          }
          this.getAttacthFlieList();
        },
        error: (e) => {
          document.getElementById("insertFile").value = "";
          this.fromfile = {
            file: '',
          }
          this.$message.error('附件添加失败');
        }
      });
    },

    setRestMetaData() {
      this.fromQueryMeta.name = "";
      this.listMetaData.name = this.fromQueryMeta.name;
@@ -1434,6 +1687,7 @@
      this.listBankData.pageIndex = 1;
      this.listBankData.pageSize = 10;
      this.listBankData.title = res.tabDesc;
      this.upAttach.tabName = res.ns + "." + res.tab;
      this.filedsLayer = this.getBankTableFiled();
      this.getCollapseTable(this.filedsLayer);
    },
@@ -1614,6 +1868,9 @@
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    statSizeChange(row, column) {
      return this.stateFormatSizes(row.sizes)
    },
    stateFormatSizes(res) {
      if (res >= 1024) {
@@ -1903,5 +2160,10 @@
      justify-content: center;
    }
  }
  .pdfClass {
    height: 70vh;
    width: 100%;
    position: relative;
  }
}
</style>