client-trace-v5/src/trace/ProjectArchive.vue

<template>
  <div class="">
    <div class="">
      <div class="flex-container">
        <div class="flex-content">
          <!--文件夹管理-->
          <div class="flex-aside-left">
            <div>
              <Navbar
                :title="projectName"
                :is-go-back="true"
              />
              <div class="flex-box">
                <button
                  class="btn btn-default flex-item"
                  @click="updateProjectArchiveFolderByTaskId()"
                >
                  项目任务自动生成
                </button>
              </div>
              <div class="flex-box">
                <button
                  class="btn btn-default flex-item"
                  @click="openFolder()"
                >
                  新建
                </button>
                <button
                  class="btn btn-default flex-item"
                  style="margin-left: 5px" @click="openFolder4()"
                >
                  修改
                </button>
                <button
                  class="btn btn-default flex-item"
                  style="margin-left: 5px" @click="openDeleteFolder()"
                >
                  删除
                </button>
              </div>
              <div
                id="tree"
                style="margin-top: 10px;"
              />
            </div>
          </div>

          <div class="flex-main">
            <div>
              <div class="flex-main-serch">
                <div class="form-inline">
                  <div class="flex-box">
                    <input
                      id="archiveName"
                      v-model="param"
                      autocomplete="off"
                      class="form-control flex-item"
                      placeholder="归档项名称或者文件名称"
                      @keyup.enter="queryByProjectArchiveDtosByParam()"
                    />

                    <button
                      class="btn btn-default flex-item-1"
                      style="margin-left: 5px" @click="queryByProjectArchiveDtosByParam()"
                    >
                      查询
                    </button>
                    <button
                      class="btn btn-default flex-item-1"
                      style="margin-left: 5px" @click="openFolder1()"
                    >
                      新建归档项
                    </button>
                    <button
                      class="btn btn-danger flex-item-1"
                      style="margin-left: 5px" @click="openDeleteProject()"
                    >
                      删除归档项
                    </button>
                  </div>
                </div>
              </div>

              <table
                class="table"
                style="margin-top: 10px;"
              >
                <thead>
                  <tr>
                    <!--<th>
									项目名称
								</th>-->
                    <th>
                      归档项名称
                    </th>
                    <th>
                      创建时间
                    </th>
                    <th>
                      计划归档日期
                    </th>
                    <th>
                      归档文件名
                    </th>
                    <!--<th>
									归档文件大小
								</th>-->
                    <th>
                      归档人
                    </th>
                    <th>
                      归档时间
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in projectArchiveDtos" :key="item"
                    :class="projectArchivesId == item.id ?'success':''"
                    @click="trClick(item)"
                    @dblclick="openFolder2()"
                  >
                    <!--<td>
									{{item.projectItemName}}
								</td>-->
                    <td>
                      {{ item.name }}
                    </td>
                    <td>
                      {{ item.createDate }}
                    </td>
                    <td>
                      {{ item.planArchiveDate }}
                    </td>
                    <td>
                      {{ item.fileName }}
                    </td>
                    <!--<td>
									{{item.fileSize}}
								</td>-->
                    <td>
                      {{ item.archiveUserName }}
                    </td>
                    <td>
                      {{ item.archiveDate }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!--归档项下载和历史记录-->
          <div class="flex-aside-right">
            <div>
              <div
                id="tabs-911500"
                class="tabbable"
              >
                <ul class="nav nav-tabs">
                  <li class="active">
                    <a
                      href="#panel1"
                      data-toggle="tab"
                    >详细信息</a>
                  </li>
                  <li>
                    <a
                      href="#panel3"
                      data-toggle="tab"
                    >历史记录</a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div
                    id="panel1"
                    class="tab-pane active"
                  >
                    <div
                      v-if="projectArchivesDto.fileName != '' && projectArchivesDto.fileName != undefined"
                      class="row m-row"
                    >
                      <div class="col-sm-12">
                        <div class="thumbnail">
                          <div class="caption">
                            <p>
                              <strong>文件名：</strong>{{ projectArchivesDto.fileName }}
                            </p>
                            <p>
                              <strong>文件大小：</strong>{{ projectArchivesDto.fileSize }}KB
                            </p>
                            <p>
                              <strong>上传人：</strong>{{ projectArchivesDto.archiveUserName }}
                            </p>
                            <p>
                              <strong>上传时间：</strong>{{ projectArchivesDto.archiveDate }}
                            </p>
                            <button
                              class="btn btn-link"
                              @click="download(projectArchivesDto.fileName)"
                            >
                              下载
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    id="panel3"
                    class="tab-pane"
                  >
                    <template v-for="(item) in projectArchiveAuditDtos">
                      <div
                        v-if="(item.fileName != '' && item.fileName != undefined)"
                        :key="item.id"
                        class="row m-row"
                      >
                        <div class="col-sm-12">
                          <div class="thumbnail">
                            <div class="caption">
                              <p>
                                <strong>文件名：</strong>{{ item.fileName }}
                              </p>
                              <p>
                                <strong>文件大小：</strong>{{ item.fileSize }}KB
                              </p>
                              <p>
                                <strong>上传人：</strong>{{ item.archiveUserName }}
                              </p>
                              <p>
                                <strong>上传时间：</strong>{{ item.archiveDate }}
                              </p>
                              <button
                                class="btn btn-link"
                                @click="download(item.fileName)"
                              >
                                下载
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <Modal
        v-model:show="modal1"
        :small="true"
        :show-ok-button="true"
        :show-canel-button="true"
        @ok="saveProjectArchiveFolder"
        @cancel="cancel"
      >
        <template #header>
          {{ type + '文件夹' }}
        </template>
        <label>文件名</label>
        <input
          v-model="folderName"
          autocomplete="off"
          type="text"
          class="form-control"
          placeholder="文件夹名称"
        />
      </Modal>

      <Modal
        v-model:show="modal4"
        :small="true"
        :show-ok-button="true"
        :show-canel-button="true"
        @ok="updateProjectArchiveFolder"
        @cancel="cancel2"
      >
        <template #header>
          {{ type + '文件夹' }}
        </template>
        <div class="form-group">
          <label for="projectFolder">上级文件名</label>
          <select id="projectFolder" class="form-control" />
        </div>
        <div class="form-group">
          <label>文件名</label>
          <input
            v-model="folderName"
            autocomplete="off"
            type="text"
            class="form-control"
            placeholder="文件夹名称"
          />
        </div>
      </Modal>

      <!-- 是否删除文件夹 -->
      <Modal
        v-model:show="modal5"
        :small="true"
        :show-ok-button="true"
        :show-canel-button="true"
        @ok="deleteFolder"
        @cancel="cancelFolder"
      >
        <template #header>
          {{ '删除文件夹' }}
        </template>
        <h3>您确认要删除{{ folderName }}文件夹吗?如果是的话，请点击【确定】按钮，否则点击【取消】按钮。</h3>
      </Modal>
      <!-- 是否删除归档项 -->
      <Modal
        v-model:show="modal6"
        :small="true"
        :show-ok-button="true"
        :show-canel-button="true"
        @ok="deleteProjectArchives"
        @cancel="cancelProject"
      >
        <template #header>
          {{ '删除归档项' }}
        </template>
        <h3>您确认要删除{{ projectArchivesDto.name }}归档项吗?如果是的话，请点击【确定】按钮，否则点击【取消】按钮。</h3>
      </Modal>
			
      <!--
        作者：GuoZhiBo
        时间：2019-10-14
        描述：归档项新增和修改
      -->
      <Modal
        v-model:show="modal2"
        :small="true"
        :show-ok-button="true"
        :show-canel-button="true"
        @ok="saveProjectArchives"
        @cancel="cancel1"
      >
        <template #header>
          {{ type + '归档项' }}
        </template>
        <div class="form-group">
          <label for="exampleInputEmail2">归档项名称</label>
          <input
            v-model="projectArchivesDto.name"
            autocomplete="off"
            style="width: 100%;"
            class="form-control"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">计划归档日期</label>
          <Date
            :date-value="projectArchivesDto.planArchiveDate"
            class="form-control"
            @on-value-change="dateChanged"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">文件名称</label>
          <input
            v-model="projectArchivesDto.fileName"
            autocomplete="off"
            style="width: 100%;"
            class="form-control"
            readonly="readonly"
          />
          <!--<span @click="projectArchivesDto.fileName = ''">删除</span>-->
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">文件大小(KB)</label>
          <input
            v-model="projectArchivesDto.fileSize"
            autocomplete="off"
            style="width: 100%;"
            class="form-control"
            readonly="readonly"
          />
        </div>
        <div>
          <input
            ref="fileInput"
            autocomplete="off"
            type="file"
            class="form-control file-input"
            @change="onFileChanges"
          />
          <label for="attachment">
            <a
              role="button"
              class="btn btn-primary btn-sm"
              @click="clickButton"
            >
              <i class="fa fa-upload" />
              &nbsp;
              上传附件
            </a>
          </label>
          <button
            class="btn btn-primary"
            @click="cleanFile(projectArchivesDto)"
          >
            清空文件
          </button>
        </div>
      </Modal>
    </div>
    <div>
      <Loading v-if="loading" />
    </div>
  </div>
</template>
<script type="text/javascript">

import Common from '../common/Common.js';

import UpladFile from '../widget/UpladFile.js';





export default {
  components: {
    
    
    
    UpladFile,
    
    
    
  },
  data: function () {
    return {
      projectId: '', //项目Id
      projectName: undefined,
      projectArchiveFolderDtos: [], //文件夹dtos
      folderName: undefined, //文件夹名称
      tree: undefined,
      projectArchiveDtos: [], //归档项Dto
      projectArchivesDto: {
        id: undefined,
        name: undefined,
        projectItemName: undefined,
        projectItemId: undefined,
        createDate: undefined,
        planArchiveDate: undefined,
        fileName: undefined,
        fileSize: undefined,
        archiveUserName: undefined,
        archiveUserId: undefined,
        archiveDate: undefined,
        projectArchiveFolderId: undefined,
        projectArchiveFolderName: undefined,
      },
      className: 'com.leanwo.prodog.model.project.ProjectArchives',
      type: undefined,
      folderId: undefined, //选中文件夹Id
      projectArchivesId: undefined, //选中归档项Id
      param: undefined, //查询参数
      projectArchiveAuditDtos: [], //历史归档项记录
      parentProjectArchiveFolderId: undefined, //上级文件夹Id
      data: undefined,
      loading: false,
      modal1:false,
      modal2:false,
      modal4:false,
      modal5:false,
      modal6:false,
    };
  },
  watch: {
    folderId: function (currentValue, oldValue) {
      this.cleanData();
      this.queryByProjectArchiveDtos();
    },
    projectArchivesId: function (currentValue, oldValue) {
      this.queryByProjectArchiveDtoAudit();
    },
  },

  mounted: function () {
    var _self = this;
    _self.projectId = this.$route.params.projectId;
    _self.projectName = _self.$route.query.projectName + '-项目归档';
    if (_self.projectName.length > 7) {
      _self.projectName = _self.projectName.substr(0, 7) + '...';
    }
    setTimeout(function () {
      _self.initData();
    }, 300);
  },

  beforeUnmount: function () {},
  methods: {
    /**
     * 清空文件
     * @param {Object} item
     */
    cleanFile: function (item) {
      var _self = this;
      _self.modal2 = false;
      if (item.id != undefined) {
        $.ajax({
          url: Common.getApiURL('ProjectArchivesResource/cleanFile'),
          type: 'post',
          contentType: 'application/json',
          data: JSON.stringify(_self.projectArchivesDto),
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          success: function (data) {
            Notify.success('提示', '清空文件成功！', 1000);
            item.fileName = undefined;
            item.fileSize = undefined;
            _self.queryByProjectArchiveDtos();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        item.fileName = undefined;
        item.fileSize = undefined;
      }
    },
    /**
     * 下载文件
     * @param  {String} fileName 文件名
     * @return {void}
     */
    download: function (fileName) {
      var _self = this;
      var downloadUrl = Common.getResourceUrl(
        'file',
        _self.className,
        fileName,
      );
      window.open(downloadUrl);
    },
    /**
     * 表格点击事件
     * @param {Object} item
     */
    trClick: function (item) {
      var _self = this;
      _self.projectArchivesId = item.id;
      _self.projectArchivesDto = item;
    },
    /**
     * 点击上传按钮事件
     * @return {[type]} [description]
     */
    clickButton: function () {
      $(this.$refs.fileInput).click();
    },
    //日期选择
    dateChanged: function (value) {
      this.projectArchivesDto.planArchiveDate = value;
    },
    /**
     * 新建文件夹取消
     */
    cancel: function () {
      var _self = this;
      _self.modal1 = false;
    },
    /**
     * 归档项取消
     */
    cancel1: function () {
      var _self = this;
      _self.modal2 = false;
    },
    /**
     * 修改文件夹取消
     */
    cancel2: function () {
      var _self = this;
      _self.modal4 = false;
    },
    /**
     * 打开新建文件夹弹窗
     */
    openFolder: function () {
      var _self = this;
      _self.type = '新建';
      _self.modal1 = true;
      _self.folderName = undefined;
    },
    /**
     * 打开新建归档项弹窗
     */
    openFolder1: function () {
      var _self = this;
      _self.type = '新建';
      if (_self.folderId == undefined) {
        Notify.error('提示', '请先选择文件夹', false);
        return;
      }
      _self.modal2 = true;
      _self.cleanProjectArchivesDto();
    },
    /**
     * 打开编辑归档项弹窗2
     */
    openFolder2: function () {
      var _self = this;
      _self.type = '新建';
      if (_self.projectArchivesDto.id == undefined) {
        Notify.error('提示', '请先选择归档项', false);
        return;
      }
      _self.modal2 = true;
    },
    /**
     * 打开修改文件夹弹窗
     */
    openFolder4: function () {
      var _self = this;
      _self.type = '修改';
      if (_self.folderId == undefined) {
        Notify.error('提示', '请先选择要修改的文件夹', false);
        return;
      }
      _self.modal4 = true;
      _self.loadProjectFolder();
    },
    /**
     * 返回上一页
     */
    back: function () {
      history.back();
    },
    /**
     * 初始化文件夹数据
     */
    initData: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/queryByProjectArchiveFolderDtos',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          projectId: _self.projectId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectArchiveFolderDtos = data;
          _self.folderId = undefined;
          _self.folderName = undefined;
          $('#tree').treeview({
            data: _self.projectArchiveFolderDtos,
            onNodeSelected: function (event, data) {
              _self.folderId = data.id;
              _self.folderName = data.name;
              _self.parentProjectArchiveFolderId =
                data.parentProjectArchiveFolderId;
            },
            onNodeUnselected: function (event, data) {
              _self.folderId = undefined;
              _self.parentProjectArchiveFolderId = undefined;
            },
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 保存文件夹
     */
    saveProjectArchiveFolder: function () {
      var _self = this;
      _self.modal1 = false;
      var projectItemFolder = {
        projectItemId: _self.projectId,
        name: _self.folderName,
        parentProjectArchiveFolderId: _self.folderId,
      };
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/saveProjectArchiveFolder',
        ),
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(projectItemFolder),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          Notify.success('提示', '保存成功！', 1000);
          _self.folderName = undefined;
          _self.initData();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 修改文件夹
     */
    updateProjectArchiveFolder: function () {
      var _self = this;
      _self.modal4 = false;
      var projectItemFolder = {
        projectItemId: _self.projectId,
        name: _self.folderName,
        id: _self.folderId,
        parentProjectArchiveFolderId: _self.parentProjectArchiveFolderId,
      };
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/saveProjectArchiveFolder',
        ),
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(projectItemFolder),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          Notify.success('提示', '修改成功！', 1000);
          _self.folderName = undefined;
          _self.initData();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    //查询当前文件夹下面所有的归档项
    queryByProjectArchiveDtos: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchivesResource/queryByProjectArchiveDtos',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          folderId: _self.folderId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectArchiveDtos = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 保存归档项
     */
    saveProjectArchives: function () {
      var _self = this;
      _self.modal2 = false;
      $.ajax({
        url: Common.getApiURL('ProjectArchivesResource/saveProjectArchives'),
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(_self.projectArchivesDto),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          Notify.success('提示', '保存成功！', 1000);
          _self.projectArchivesDto = data;
          _self.projectArchivesId = data.id;
          _self.queryByProjectArchiveDtos();
          _self.queryByProjectArchiveDtoAudit();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 选择文件发生改变
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    onFileChanges: function (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.uploadFile(files[0]);
    },

    /**
     * 上传文件
     * @param  {File} selectedFile 选择的文件
     */
    uploadFile: function (selectedFile) {
      var _self = this;
      if (selectedFile == undefined) {
        return;
      }
      _self.loading=true;
      if (selectedFile.size != undefined && selectedFile.size != null) {
        var formData = new FormData();
        formData.append('files', selectedFile);
        formData.append('className', _self.className);
        $.ajax({
          url: Common.getApiURL('file/classFileUpload'),
          type: 'post',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: formData,
          contentType: false,
          processData: false,
          success: function (data) {
            _self.loading=false;
            if (data != 'error') {
              Notify.success('提示', '文件上传成功！', 1000);
              var fileName = data.substring(data.indexOf(':') + 1);
              _self.projectArchivesDto.fileName = fileName;
              _self.projectArchivesDto.fileSize = Math.round((selectedFile.size / 1024) * 100) / 100;
              // _self.$set(_self.projectArchivesDto, 'fileName', fileName);
              // _self.$set(
              //   _self.projectArchivesDto,
              //   'fileSize',
              //   Math.round((selectedFile.size / 1024) * 100) / 100,
              // );
              if (
                _self.projectArchivesDto.name == null ||
                _self.projectArchivesDto.name == ''
              ) {
                _self.projectArchivesDto.name = fileName;
                // _self.$set(_self.projectArchivesDto, 'name', fileName);
              }
              if (
                _self.projectArchivesDto.planArchiveDate == null ||
                _self.projectArchivesDto.planArchiveDate == ''
              ) {
                _self.projectArchivesDto.planArchiveDate = moment().format('YYYY-MM-DD HH:mm:ss');
                // _self.$set(
                //   _self.projectArchivesDto,
                //   'planArchiveDate',
                //   moment().format('YYYY-MM-DD HH:mm:ss'),
                // );
              }

              _self.saveProjectArchives();
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            _self.loading=false;
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.loading=false;
        Notify.error('提示', '上传的文件为空！');
      }
    },
    /**
     * 清空数据
     */
    cleanData: function () {
      var _self = this;
      _self.cleanProjectArchivesDto();
      _self.projectArchiveDtos = [];
      _self.projectArchivesId = undefined;
    },
    /**
     * 清空归档项Dto
     */
    cleanProjectArchivesDto: function () {
      var _self = this;
      _self.projectArchivesDto = {
        id: undefined,
        name: undefined,
        projectItemName: undefined,
        projectItemId: _self.projectId,
        createDate: undefined,
        planArchiveDate: undefined,
        fileName: undefined,
        fileSize: undefined,
        archiveUserName: undefined,
        archiveUserId: undefined,
        archiveDate: undefined,
        projectArchiveFolderId: _self.folderId,
        projectArchiveFolderName: undefined,
      };
    },
    /**
     * 打开删除文件夹提示
     * @author GuoZhiBo 20190929
     */
    openDeleteFolder: function () {
      var _self = this;
      if (_self.folderId == undefined) {
        Notify.error('提示', '请选择要删除的文件夹！');
        return;
      }
      _self.modal5 = true;
      _self.parentProjectArchiveFolderId = undefined;
    },
    /**
     * 关闭删除文件夹提示
     * @author GuoZhiBo 20190929
     */
    cancelFolder: function () {
      var _self = this;
      _self.modal5 = false;
    },
    /**
     * 打开删除归档项提示
     * @author GuoZhiBo 20190929
     */
    openDeleteProject: function () {
      var _self = this;
      if (_self.projectArchivesId == undefined) {
        Notify.error('提示', '请选择要删除的归档项！');
        return;
      }
      _self.modal6 = true;
    },
    /**
     * 关闭删除文件提示
     * @author GuoZhiBo 20190929
     */
    cancelProject: function () {
      var _self = this;
      _self.modal6 = false;
    },
    /**
     * 删除文件夹
     * @author GuoZhiBo 20190927
     */
    deleteFolder: function () {
      var _self = this;
      _self.modal5 = false;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/deleteProjectArchiveFolder',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          folderId: _self.folderId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.folderId = undefined;
          _self.initData();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 删除归档项
     * @author GuoZhiBo 20190927
     */
    deleteProjectArchives: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('ProjectArchivesResource/deleteProjectArchives'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          projectArchiveId: _self.projectArchivesId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectArchivesId = undefined;
          _self.queryByProjectArchiveDtos();
          _self.cleanProjectArchivesDto();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 根据选中的文件夹id和param查询对应的归档项
     */
    queryByProjectArchiveDtosByParam: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchivesResource/queryByProjectArchiveDtosByParam',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          folderId: _self.folderId,
          param: _self.param,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectArchiveDtos = data;
          _self.projectArchivesId = undefined;
          _self.cleanProjectArchivesDto();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 根据选中的文件夹id和param查询对应的归档项
     */
    queryByProjectArchiveDtoAudit: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchivesResource/queryByProjectArchiveDtoAudit',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          projectArchivesId: _self.projectArchivesId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectArchiveAuditDtos = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 项目任务自动生成文件夹
     * @author GuoZhiBo 20190927
     */
    updateProjectArchiveFolderByTaskId: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/updateProjectArchiveFolderByTaskId',
        ),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          projectItemId: _self.projectId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          Notify.success('提示', '自动生成文件夹成功！', 1000);
          _self.initData();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 加载当前项目全部文件夹
     */
    loadProjectFolder: function () {
      var _self = this;
      var $c_HospitalCode = $('#projectFolder')
        .select2({
          // 请求搜索框数据
          //data: _self.data,
          placeholder: '父文件夹',
          minimumInputLength: 0,
          quietMillis: 250,
          allowClear: true,
          language: 'zh-CN',
          width: '100%',
          // 请求搜索框数据
          ajax: {
            url: function (params) {
              return Common.getApiURL(
                'ProjectArchiveFolderResource/queryProjectArchiveFolderDto',
              );
            },
            dataType: 'json',
            type: 'get',
            delay: 250,
            minimumInputLength: 0,
            transport: function (params, success, failure) {
              params.beforeSend = Common.addTokenToRequest;
              params.error = Common.processException;
              var $request = $.ajax(params);
              $request.then(success);
              $request.fail(failure);
              return $request;
            },
            data: function (params) {
              return {
                name: params.term,
                projectId: _self.projectId,
                folderId: _self.folderId,
              };
            },
            processResults: function (data, params) {
              var more = params * 10 <= data.length;
              for (var i = 0; i < data.length; i++) {
                data[i].text = data[i].name;
                // data[i].id = data[i].id;
              }
              return { results: data, more: more };
            },
          },
        })
        .on('change', function () {
          _self.parentProjectArchiveFolderId = $(this).val();
        });
      $.ajax({
        url: Common.getApiURL(
          'ProjectArchiveFolderResource/queryProjectArchiveFolderDto',
        ),
        data: {
          name: undefined,
          projectId: _self.projectId,
          folderId: _self.folderId,
        },
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          for (var d = 0; d < data.length; d++) {
            var item = data[d];
            if (item.id == _self.parentProjectArchiveFolderId) {
              var option = new Option(item.name, item.id, true, true);
              $c_HospitalCode.append(option);
            }
            if (_self.parentProjectArchiveFolderId == undefined) {
              $('#projectFolder').empty();
            }
          }
          $c_HospitalCode.trigger('change'); //使用这个方法显示到select2上.
        },
      });
    },
  },
};
</script>

<style scoped>
.flex-container {
  display: flex;
  /* 垂直*/
  flex-direction: column;
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
  height: calc(100vh - 80px);
}

.flex-content {
  display: flex;
  flex: 1;
  height: calc(100vh - 80px);
}

.flex-aside-left {
  flex: 0 0 300px;
  /* margin-right: 10px; */
  border: 1px solid #e4e4e4;
  background-color: white;
  padding: 10px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.flex-aside-right {
  flex: 0 0 300px;
  /* margin-left: 10px; */
  border: 1px solid #e4e4e4;
  background-color: white;
  padding: 10px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.flex-main {
  overflow: auto;
  flex: 1;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  overflow-y: auto;
}

.flex-main-serch {
  padding: 10px;
  background-color: white;
  border-bottom: 1px solid #e4e4e4;
}

tr:hover {
  background-color: #eee;
}

.file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.m-row {
  margin-top: 10px;
}

.flex-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 5px 0;
}

.flex-item {
  flex: 1 1 auto;
}

.flex-item-1 {
  flex: 0 0 auto;
}
</style>