cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.7

package/src/views/user/file_view_ins/list.vue

@@ -1,970 +1,970 @@
-<template>
-  <div id="containt">
-    <div v-show="title!='' && title!=null">
-      <div class="tree-box tree-annex fl">
-        <div class="tit"><b>{{ title }}</b></div>
-        <div class="tree-form">
-          <el-input :placeholder="$t1('请输入查询区名称')" v-model="filterText" class="txt">
-            <el-button slot="append" icon="el-icon-search"></el-button>
-          </el-input>
-        </div>
-        <el-tree
-          v-if="treeFlag"
-          :props="defaultProps"
-          :load="loadNode"
-          node-key="id"
-          ref="tree"
-          lazy
-          :filter-node-method="filterNode"
-          :expand-on-click-node="false"
-          @node-click="handleNodeClick"
-          class="tree-list"
-          icon-class="el-icon-arrow-down"
-        >
-        <span class="el-tree-node__label" slot-scope="{ node, data }" v-if="!node.data.moreBtn">
-          <i class="ico-wenjian"></i>
-          <span>{{ node.label }}</span>
-        </span>
-          <span v-else class="el-tree-node__label">
-          <el-button type="primary" plain class="button-sty">{{ node.label }}</el-button>
-        </span>
-        </el-tree>
-      </div>
-      <label id="labBtn">
-        <div class="icon">
-          <i class="el-icon-more"></i>
-          <i class="el-icon-more"></i>
-        </div>
-      </label>
-      <div class="main-right file-library fr" style="overflow: hidden;">
-        <div class="annex-screen">
-          <el-button type="primary" class="button-sty" icon="el-icon-download" @click.native="mulDownload2">
-            {{ $t1('下载') }}
-          </el-button>
-        </div>
-        <div class="line"></div>
-        <div class="annex-crumbs">
-          <span class="tit"><i class="iconfont icon-wenjianjia"></i>{{ $t1('文件区') }}</span>
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item v-for="(treeNode,index) in treeNodeArr" :key="index" @click.native="doNav(treeNode)">{{
-                treeNode.label
-              }}
-            </el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-        <div class="grid-height viewBox">
-          <div class="annex-searchBox">
-            <div class="fl">
-              <div class="oper">
-                <el-checkbox v-model="checkAll" @change="changeCheckAll" :disabled="checkAllDisabled"
-                             :indeterminate="checkAllIndeterminate">{{ $t1('已选中') }} {{
-                    checkList.length
-                  }} {{ $t1('项') }}
-                </el-checkbox>
-              </div>
-              <div class="search-box">
-                <el-input :placeholder="$t1('请输入文件名')" v-model="formData.name" clearable>
-                  <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
-                </el-input>
-              </div>
-            </div>
-            <div class="fr">
-
-              <el-button type="primary" icon="iconfont icon-icmenu2" @click="changeShowType()"
-                         class="button-sty icon-btn"
-                         v-show="showType==1">{{ $t1('列表') }}
-              </el-button>
-              <el-button type="primary" style="margin-left:0;" icon="el-icon-menu" @click="changeShowType()"
-                         class="button-sty icon-btn"
-                         v-show="showType==2">{{ $t1('图示') }}
-              </el-button>
-            </div>
-
-          </div>
-          <div class="containter1" ref="containter1" v-show="showType==1" style="overflow: auto;">
-            <div class="annex-piclist">
-              <div class="clearfix">
-                <el-checkbox-group v-model="checkList" @change="checkChange" class="f-group">
-                  <template v-for="(attachment) in page.records">
-                    <li :key="attachment.id" class="item" :class="checkList.includes(attachment.id) ? 'on':''">
-                      <el-checkbox :label="attachment.id"><span></span></el-checkbox>
-                      <div class="oper">
-                        <el-tooltip effect="dark" :content="$t1('详情')" placement="top"><i
-                          class="el-tooltip iconfont icon-shuxing ico"
-                          @click="openPropertiesDialog(attachment)"></i>
-                        </el-tooltip>
-                        <a href="javascript:void(0);" class="a-link ico" v-if="attachment.billUrl">
-                          <el-tooltip effect="dark" :content="$t1('查看单据')" placement="top"><i
-                            class="el-icon-files"
-                            @click="openWfDialog(attachment)"></i>
-                          </el-tooltip>
-                        </a>
-                        <a
-                          href="javascript:void(0);"
-                          class="a-link ico"
-                          v-if="!attachment.dirs"
-                          @click="$commonFileUtil.downloadFile(attachment.domain + attachment.url, attachment.name)"
-                        >
-                          <el-tooltip effect="dark" :content="$t1('下载')" placement="top"
-                                      popper-class="tooltip-skin">
-                            <i class="el-icon-download"/>
-                          </el-tooltip>
-                        </a>
-                      </div>
-                      <div class="img" @click="openPreview(attachment)" v-if="!attachment.dirs">
-                        <div class="show-video" v-if="hasPreview(attachment)"><i class="icon-chakan"></i></div>
-                        <div class="show-video" v-if="false"><i class="el-icon-video-play"></i></div>
-                        <p><img :src="getShowUrl(attachment)"/></p>
-                      </div>
-                      <div class="img" @click="changeCategory(attachment)" v-if="attachment.dirs">
-                        <svg-icon icon-class="ico-wenjianjia"/>
-                      </div>
-                      <el-tooltip :enterable="false" effect="dark" :content="attachment.name" placement="top">
-                        <div class="txt-box">
-                          <div class="tb-left"></div>
-                          <div class="tb-mid">
-                            <div class="txt">
-                              <span class="name">{{ getFileName(attachment) }}</span><span
-                              v-if="attachment.extension">.{{ attachment.extension }}</span>
-                            </div>
-                          </div>
-                          <div class="format">... .{{ attachment.extension }}</div>
-                        </div>
-
-                      </el-tooltip>
-                    </li>
-                  </template>
-                </el-checkbox-group>
-              </div>
-              <div class="vxe-grid">
-                <div class="vxe-grid&#45;&#45;pager-wrapper">
-                  <vxe-pager
-                    class="pages-box"
-                    :current-page.sync="page.current"
-                    :page-size.sync="page.size"
-                    :total="page.total"
-                    :layouts="['PrevPage', 'Number', 'NextPage']"
-                    @page-change="changePageNew"
-                  >
-                    <template #right>
-                    <span>
-                      <span>{{ $t1('当前记录') }}</span>
-                      <span class="f-red"> {{ page.records.length }} </span>
-                      <span>/</span>
-                      <span class="f-red"> {{ page.total }}</span>
-                    </span>
-                    </template>
-                  </vxe-pager>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="annex-grid-height">
-            <vxe-grid v-show="showType==2" ref="table-m1" v-bind="vxeOption" :data="page.records"
-                      @resizable-change="$vxeTableUtil.onColumnWitchChange" @custom="$vxeTableUtil.customHandle"
-                      @checkbox-change="tableCheckChange"
-                      @checkbox-all="tableCheckAll">
-              <template #pager>
-                <vxe-pager
-                  class="pages-box"
-                  :current-page.sync="page.current"
-                  :page-size.sync="page.size"
-                  :total="page.total"
-                  :layouts="['PrevPage', 'Number', 'NextPage']"
-                  @page-change="changePageNew"
-                >
-                  <template #right>
-                    <span>
-                      <span>{{ $t1('当前记录') }}</span>
-                      <span class="f-red"> {{ page.records.length }} </span>
-                      <span>/</span>
-                      <span class="f-red"> {{ page.total }}</span>
-                    </span>
-                  </template>
-                </vxe-pager>
-              </template>
-            </vxe-grid>
-          </div>
-        </div>
-      </div>
-      <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :initial-index.sync="chooseIndex"
-                       :url-list="imageDTOs"/>
-      <propertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
-                        :editAttachment.sync="editAttachment" :isEdit="isEdit"
-                        :treeNodeArr.sync="treeNodeArr"></propertiesDialog>
-      <el-dialog
-        :title="$t1('查看单据')"
-        :append-to-body="true"
-        :modal-append-to-body="true"
-        :close-on-click-modal="false"
-        v-if="showWfDialog"
-        :visible.sync="showWfDialog"
-        :modal="false"
-        custom-class="dialog-style designer-dialog indexUse"
-        width="100%"
-        height="100%"
-        top="0px"
-        bottom="0px"
-        :destroy-on-close="true"
-        v-el-drag-dialog
-      >
-        <div id="containt">
-          <component
-            v-if="showWfContent && wfContent"
-            :is="wfContent"
-            visible-key="showWfContent"
-            :_dataId.sync="wfDataId"
-            :parent-target="_self"
-            :defaultShowWfContent="true"
-            :_viewType="1"
-            @reload="$reloadHandle"
-          ></component>
-          <micro-view-host
-            v-else-if="showWfContent && remoteView"
-            :owner="remoteView.owner"
-            :target-path="remoteView.targetPath"
-            :biz-params="remoteView.bizParams"
-            :view-meta="remoteView.viewMeta"
-            @reload="$reloadHandle"
-            @close="showWfContent = false"
-          ></micro-view-host>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import ElImageViewer from "@base/components/VabUpload/image-viewer";
-import {treeScollx} from "@base/utils/global";
-import propertiesDialog from './propertiesDialog';
-import { loadViewComponentAsync } from "@base/utils/resolveViewComponent";
-
-export default {
-  name: 'file_view_ins:list',
-  props: {
-    option: {
-      type: Object
-    }
-  },
-  components: {
-    ElImageViewer,
-    propertiesDialog
-  },
-  provide() {
-    return {
-      current_prefix: this.current_prefix,
-      viewAreaCode: this.viewAreaCode,
-      dataId: this.dataId
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-    this.initTitle();
-    this.initTableList();
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
-  data() {
-    let pageSize = 1000;
-    let categoryPageSize = 1000;
-    return {
-      showBillDialog: false,
-      billDialogContent: null,
-      checkBillDatas: [],
-      title: '',
-      folderStatus: false,
-      filterText: '',
-      defaultProps: {
-        children: 'children',
-        label: 'itemName',
-        isLeaf: 'leaf'
-      },
-      resolveFunc: function () {
-      },
-      fileAttachmentCategorys: [],
-      currentFileCategoryCode: null,
-      chooseIndex: -1,
-      imageDTOs: [],
-      showViewer: false,
-      showPropertiesDialog: false,
-      editAttachment: null,
-      vxeOption: {},
-      showType: 1,
-      formData: {},
-      showAdvancedSearch: false,
-      advancedFormData: {},
-      pageSize: pageSize,
-      page: {
-        current: 1,
-        size: pageSize,
-        total: 0,
-        records: []
-      },
-      categoryPageSize: categoryPageSize,
-      categoryPage: {
-        current: 1,
-        size: categoryPageSize,
-        total: 0,
-        records: []
-      },
-      showEditCategoryDialog: false,
-      editCategory: {},
-      currentFileCategory: null,
-      rootCategory: false,
-      currentNode: null,
-      treeNodeArr: [],
-      checkRows: [],
-      showCategoryMoveDialog: false,
-      checkList: [],
-      handleType: 1,//1移动，2复制
-      showFileHistoryDialog: false,
-      operateFileHistory: null,
-      showShareDialog: false,
-      shareAttachment: null,
-      checkAll: false,
-      fileArr: [],
-      checkList2: [],
-      showRecycleBinDialog: false,
-
-      showVideoDialog: false,
-      videoOption: null,
-
-      //个人文档
-      userInfo: {
-        nickName: null
-      },
-      treeFlag: false,
-      currentUser: {},
-      showUserDialog: false,
-      isDocAdmin: false,
-
-      viewAreaCode: "file_view_area",
-
-      showWfDialog: false,
-      showWfContent: true,
-      wfContent: null,
-      remoteView: null,
-      wfDataId: '',
-    };
-  },
-  computed: {
-    current_prefix() {
-      return this.currentFileCategory && this.currentFileCategory.serviceId ? '/' + this.currentFileCategory.serviceId : '';
-    },
-    pictureDtoList() {
-      return this.page.records.filter(row => {
-        return row.url && this.$commonFileUtil.isPictureFile(row.url)
-      });
-    },
-    checkAllDisabled() {
-      return this.page.records.length == 0
-    },
-    checkAllIndeterminate() {
-      return this.checkList.length > 0 && (this.checkList.length < this.page.records.length)
-    },
-  },
-  methods: {
-    getFileName(row) {
-      if (row.extension) {
-        let index = row.name.lastIndexOf('.' + row.extension)
-        return row.name.substring(0, index);
-      } else {
-        return row.name;
-      }
-    },
-    getCheckRows() {
-      let checkRows = [];
-      if (this.showType == 1) {
-        let checkList = this.checkList;
-        checkRows = this.page.records.filter(row => checkList.includes(row.id));
-      } else {
-        checkRows = this.$refs['table-m1'].getCheckboxRecords(true);
-      }
-      return checkRows;
-    },
-    getRows() {
-      let rows = [];
-      if (this.showType == 1) {
-        rows = this.page.records;
-      } else {
-        rows = this.$refs['table-m1'].getTableData().fullData;
-      }
-      return rows;
-    },
-    changeShowType() {
-      this.showType = this.showType == 1 ? 2 : 1;
-      this.searchEvent();
-    },
-    changeCategory(row, node) {
-      if (!node) {
-        node = this.$refs.tree.getNode(row.id + '');
-        this.$refs.tree.setCurrentKey(row)
-      }
-      this.handleNodeData(node);
-      this.searchEvent();
-    },
-    searchEvent() {
-      this.doSearch()
-    },
-    resetEvent() {
-      this.formData = {};
-      this.doSearch();
-    },
-    doSearch() {
-      this.checkList = [];
-      this.checkAll = false;
-      this.initAttchInfo();
-    },
-    openPropertiesDialog(attachment) {
-      this.editAttachment = attachment;
-      this.showPropertiesDialog = true;
-    },
-    getShowUrl(attachment, field) {
-      if (!field) field = 'medium';
-      return this.$commonFileUtil.getShowUrl(attachment.domain + (attachment[field] ? attachment[field] : attachment.url));
-    },
-    hasPreview(attachment) {
-      let fileSuffix = this.$commonFileUtil.getFileSuffix(attachment.url);
-      return this.$commonFileUtil.isPictureFile(attachment.url) || this.$commonFileUtil.isPreviewFile(attachment.url);
-    },
-    openPreview(attachment) {
-      if (this.$commonFileUtil.isPictureFile(attachment.url)) {
-        this.imageDTOs = this.pictureDtoList;
-        this.chooseIndex = this.pictureDtoList.findIndex(row => row.id == attachment.id);
-        this.showViewer = true;
-      } else if (this.$commonFileUtil.isPreviewFile(attachment.url)) {
-        this.$openFilePreview(attachment)
-      }
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.itemName.indexOf(value) !== -1;
-    },
-    initAttchInfo(page) {
-      if (!this.current_prefix) {
-        return;
-      }
-      let defaultPage = {
-        current: 1,
-        size: this.pageSize,
-        total: 0,
-        records: []
-      }
-      page = page || {
-        current: 1,
-        size: this.pageSize
-      };
-
-      let parent = this.currentFileCategory && this.currentFileCategory.id ? this.currentFileCategory.id : 0;
-      this.$http({
-        method: 'post',
-        url: this.current_prefix + '/file_view_ins/viewFiles',
-        data: {
-          itemCode: this.currentFileCategory ? this.currentFileCategory.itemCode : null,
-          viewAreaCode: this.viewAreaCode,
-          condition: {
-            ...this.formData,
-            ...this.advancedFormData,
-            ...page
-          }
-        },
-        isLoading: true,
-        success: res => {
-          this.page = res.objx && res.objx.data ? res.objx.data : defaultPage;
-        }
-      });
-    },
-    initTableList() {
-      let that = this;
-      let tableOption = {
-        vue: this,
-        tableRef: 'table-m1',
-        tableName: 'pcp_product_file_list-m1',
-        config: {
-          height: 'auto',
-          pagerConfig: {
-            autoHidden: false,
-            enabled: true
-          }
-        },
-        columns: [
-          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
-          {
-            title: this.$t1('文件名称'),
-            field: 'name',
-            width: 250,
-            fixed: 'left',
-            slots: {
-              default: ({row, rowIndex}) => {
-                let h = this.$createElement;
-                if (!row.dirs) {
-                  let showUrl = that.getShowUrl(row, 'thumbnail');
-                  return [
-                    h('a', {
-                      staticClass: "a-link img",
-                      on: {
-                        click: (event) => {
-                          event.stopPropagation();
-                          that.openPreview(row)
-                        }
-                      }
-                    }, [
-                      h('el-tooltip', {
-                        props: {
-                          enterable: false,
-                          effect: "dark",
-                          content: this.$t1('展示图'),
-                          placement: "top",
-                          "popper-class": "tooltip-skin"
-                        }
-                      }, [
-                        h('el-image', {
-                          props: {
-                            src: showUrl
-                          }
-                        })
-                      ])
-                    ]),
-                    h('span', row.name)
-                  ];
-                } else {
-                  return [
-                    h('a', {
-                      staticClass: "a-link img",
-                      on: {
-                        click: (event) => {
-                          event.stopPropagation();
-                          that.changeCategory(row);
-                        }
-                      }
-                    }, [
-                      h('div', {
-                        staticClass: "img"
-                      }, [
-                        h('svg-icon', {
-                          props: {"icon-class": "ico-wenjianjia"}
-                        }),
-                        h('span', row.name)
-                      ])
-                    ])
-                  ]
-                }
-              }
-            }
-          },
-          {
-            title: this.$t1('文件大小'),
-            field: 'fileSize',
-            width: 150,
-            slots: {
-              default: ({row, rowIndex}) => {
-                if (!row.dirs) {
-                  return this.formatFileSize(row.fileSize);
-                }
-              }
-            }
-          },
-          {title: this.$t1('文件说明'), field: 'note', width: 250},
-          {title: this.$t1('单号'), field: 'billSn', width: 250},
-          {title: this.$t1('单据说明'), field: 'billInfo', width: 250},
-          {title: this.$t1('创建人'), field: 'createBy', width: 150},
-          {
-            field: 'createDate',
-            title: this.$t1('创建时间'),
-            width: 150
-          },
-          {
-            width: 150,
-            fixed: 'right',
-            title: '',
-            sortable: false,
-            slots: {
-              default: ({row, rowIndex}) => {
-                return [
-                  this.getBtnVnode({
-                    class: "iconfont icon-shuxing",
-                    title: this.$t1('详情'),
-                    click: (event) => {
-                      this.openPropertiesDialog(row);
-                    }
-                  }),
-                  this.getBtnVnode({
-                    class: "el-icon-files",
-                    title: this.$t1('查看单据'),
-                    show: row.billUrl != null,
-                    click: (event) => {
-                      this.openWfDialog(row)
-                    }
-                  }),
-                  this.getBtnVnode({
-                    class: "el-icon-download",
-                    title: this.$t1('下载'),
-                    click: (event) => {
-                      this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
-                    }
-                  })
-                ];
-              }
-            }
-          }
-        ],
-        callback(a, b) {
-
-        }
-      };
-      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
-        this.vxeOption = opts;
-      });
-    },
-    getBtnVnode(opt) {
-      let h = this.$createElement;
-      let show = opt.show === false ? false : true;
-      if (show) {
-        return h('a', {
-          staticClass: "a-link",
-          on: {
-            click: (event) => {
-              opt.click && opt.click(event)
-            }
-          }
-        }, [
-          h('el-tooltip', {
-            props: {
-              enterable: false,
-              effect: "dark",
-              content: opt.title,
-              placement: "top",
-              "popper-class": "tooltip-skin"
-            }
-          }, [
-            h('i', {
-              staticClass: opt.class
-            })
-          ])
-        ]);
-      }
-    },
-    changePageNew({type, currentPage, pageSize, $event}) {
-      this.checkList = [];
-      this.checkAll = false;
-      this.initAttchInfo({
-        current: currentPage,
-        size: pageSize,
-      })
-    },
-    handleNodeClick(data, node, v) {
-      this.changeCategory(data, node);
-    },
-    doNav(t) {
-      let node = this.$refs.tree.getNode(t.data.id + '');
-      this.$refs.tree.setCurrentKey(node.data)
-      this.handleNodeClick(node.data, node, this);
-    },
-    // 异步树叶子节点懒加载逻辑
-    loadNode(node, resolve, callback) {
-      let url, param;
-      url = USER_PREFIX + '/file_view_item/listPage';
-      param = {
-        viewAreaCode: this.viewAreaCode,
-        size: this.categoryPageSize,
-      };
-      this.$http({
-        url: url,
-        method: 'post',
-        data: param,
-        success: res => {
-          let page = res.objx;
-          let rows = page && page.records ? page.records : [];
-
-          // moreBtn
-          rows.forEach(value => {
-            value.leaf = true;
-            value.hasChild = false;
-          });
-
-          if (node.level === 0) {
-            setTimeout(() => {
-              if (node.childNodes.length) {
-                this.$refs.tree.setCurrentKey(node.childNodes[0].data)
-                this.handleNodeData(node.childNodes[0]);
-                this.searchEvent();
-              }
-            }, 200);
-            this.$nextTick(() => {
-              callback && callback();
-            })
-
-          } else {
-            this.$nextTick(() => {
-              callback && callback();
-            })
-          }
-          resolve(rows);
-        }
-      });
-    },
-    handleNodeData(node) {
-      let treeNodeArr = [];
-      let tree = this.$refs.tree;
-      if (node) {
-        treeNodeArr.push(node);
-        let end = false;
-        let pNode = node;
-        while (!end) {
-          pNode = pNode.parent;
-          if (pNode && pNode.data) {
-            let pData = pNode.data;
-            treeNodeArr.push(pNode);
-            end = pNode.level <= 1;
-          } else {
-            end = true;
-          }
-        }
-        treeNodeArr = treeNodeArr.reverse();
-      }
-      this.currentFileCategory = node ? node.data : null;
-      this.currentNode = node;
-      this.$set(this, 'treeNodeArr', treeNodeArr);
-    },
-    mulDownload() {
-      let checkRows = this.getCheckRows();
-      if (!checkRows.length) {
-        this.$message({
-          message: this.$t1('请选择需要下载的文件'),
-          type: 'error',
-          showClose: true,
-          duration: 3000,
-        });
-        return;
-      }
-      checkRows.forEach(row => {
-        this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
-      })
-    },
-    mulDownload2() {
-      let checkRows = this.getCheckRows();
-      if (!checkRows.length) {
-        this.$message({
-          message: this.$t1('请选择需要下载的文件'),
-          type: 'error',
-          showClose: true,
-          duration: 3000,
-        });
-        return;
-      }
-
-      this.getDownloadDomian(domain => {
-        this.getFileWhole(checkRows, (fileWhole) => {
-          this.$http({
-            method: 'post',
-            url: domain + '/docfile/download',
-            data: fileWhole,
-            isLoading: true,
-            success: res => {
-              window.open(res.objx.url);
-            }
-          });
-        })
-      })
-    },
-    getDownloadDomian(callback) {
-      this.$http({
-        method: 'post',
-        url: USER_PREFIX + '/common/fileDownloadUrl',
-        data: {},
-        isLoading: true,
-        success: res => {
-          callback(res.objx)
-        }
-      });
-    },
-    getFileWhole(rows, callback) {
-      let ids = rows.map(row => row.id);
-      this.$http({
-        method: 'post',
-        url: this.current_prefix + '/file_view_ins/getFileWhole',
-        data: ids,
-        isLoading: true,
-        success: res => {
-          callback(res.objx)
-        }
-      });
-    },
-    checkChange() {
-      let rows = this.getRows();
-      let checkRows = this.getCheckRows();
-      this.checkAll = rows.length && rows.length == checkRows.length
-    },
-    changeCheckAll(val) {
-      let rows = this.getRows();
-      this.checkList = val ? rows.map(row => row.id) : [];
-      if (this.showType == 2) {
-        this.$refs['table-m1'].setAllCheckboxRow(val);
-      }
-    },
-    tableCheckChange() {
-      let checkRows = this.getCheckRows();
-      this.checkList = checkRows.map(row => row.id);
-      this.checkChange();
-    },
-    tableCheckAll(val) {
-      let checkRows = this.getCheckRows();
-      this.checkList = checkRows.map(row => row.id);
-      this.checkChange();
-    },
-    initTitle() {
-      this.$http({
-        method: 'post',
-        url: USER_PREFIX + '/file_view_area/getByCode',
-        data: {
-          stringOne: this.viewAreaCode,
-        },
-        isLoading: true,
-        success: res => {
-          let fileStoreArea = res.objx;
-          if (fileStoreArea) {
-            this.title = fileStoreArea.viewAreaName;
-            this.$nextTick(() => {
-              treeScollx({target: this, type: 'default'});
-              this.treeFlag = true;
-            });
-          } else {
-            this.$baseAlert(this.$t1('凭证查询区未维护'));
-          }
-        }
-      });
-    },
-    formatFileSize(fileSize) {
-      fileSize = fileSize || 0;
-      if (fileSize < 1024) {
-        return fileSize + 'B';
-      } else if (fileSize < (1024 * 1024)) {
-        var temp = fileSize / 1024;
-        temp = temp.toFixed(2);
-        return temp + 'KB';
-      } else if (fileSize < (1024 * 1024 * 1024)) {
-        var temp = fileSize / (1024 * 1024);
-        temp = temp.toFixed(2);
-        return temp + 'MB';
-      } else {
-        var temp = fileSize / (1024 * 1024 * 1024);
-        temp = temp.toFixed(2);
-        return temp + 'GB';
-      }
-    },
-    reflushTree() {
-      this.treeFlag = false;
-      setTimeout(() => {
-        this.treeFlag = true;
-      }, 200)
-    },
-    async openWfDialog(row) {
-      let url = row.billUrl + '.vue';
-      let id = row.billId;
-      this.wfDataId = !id || typeof id == 'object' ? 0 : id;
-      this.showWfDialog = true;
-      this.showWfContent = true;
-      const res = await loadViewComponentAsync(url);
-      this.remoteView =
-        res.kind === "remote"
-          ? {
-              owner: res.owner,
-              targetPath: res.targetPath,
-              bizParams: { _dataId: this.wfDataId },
-              viewMeta: { visibleKey: "showWfContent", defaultShowWfContent: true, viewType: 1 },
-            }
-          : null;
-      this.wfContent = res.component;
-    },
-  }
-};
-</script>
-<style lang="scss" scoped>
-#labBtn {
-  height: calc(100vh - 35px);
-}
-
-#containt {
-  overflow: hidden;
-
-  .main-right {
-    margin-left: -1%;
-    padding-left: 18px !important;
-    padding-top: 8px;
-    padding-right: 8px;
-    overflow: hidden;
-  }
-}
-
-.upload-list .upload-box {
-  display: inline-block;
-}
-
-
-.vxe-grid .vxe-gird-block {
-  height: calc(100vh - 161px);
-}
-
-.grid-height.viewBox {
-  height: calc(100vh - 84px);
-
-  .containter1 {
-    .annex-piclist > .clearfix {
-      height: calc(100vh - 159px);
-    }
-  }
-
-  .annex-grid-height {
-    height: calc(100vh - 126px);
-  }
-}
-
-.annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
-  height: calc(100vh - 133px);
-
-  .containter1 {
-    .annex-piclist > .clearfix {
-      height: calc(100vh - 208px);
-    }
-  }
-
-  .annex-grid-height {
-    height: calc(100vh - 175px);
-  }
-}
-
-.annex-filter + .annex-crumbs + .grid-height.viewBox {
-  height: calc(100vh - 133px);
-
-  .containter1 {
-    .annex-piclist > .clearfix {
-      height: calc(100vh - 208px);
-    }
-  }
-
-  .annex-grid-height {
-    height: calc(100vh - 175px);
-  }
-}
-
-.annex-filter + .annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
-  height: calc(100vh - 181px);
-
-  .containter1 {
-    .annex-piclist > .clearfix {
-      height: calc(100vh - 256px);
-    }
-  }
-
-  .annex-grid-height {
-    height: calc(100vh - 223px);
-  }
-}
-</style>
+<template>
+  <div id="containt">
+    <div v-show="title!='' && title!=null">
+      <div class="tree-box tree-annex fl">
+        <div class="tit"><b>{{ title }}</b></div>
+        <div class="tree-form">
+          <el-input :placeholder="$t1('请输入查询区名称')" v-model="filterText" class="txt">
+            <el-button slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </div>
+        <el-tree
+          v-if="treeFlag"
+          :props="defaultProps"
+          :load="loadNode"
+          node-key="id"
+          ref="tree"
+          lazy
+          :filter-node-method="filterNode"
+          :expand-on-click-node="false"
+          @node-click="handleNodeClick"
+          class="tree-list"
+          icon-class="el-icon-arrow-down"
+        >
+        <span class="el-tree-node__label" slot-scope="{ node, data }" v-if="!node.data.moreBtn">
+          <i class="ico-wenjian"></i>
+          <span>{{ node.label }}</span>
+        </span>
+          <span v-else class="el-tree-node__label">
+          <el-button type="primary" plain class="button-sty">{{ node.label }}</el-button>
+        </span>
+        </el-tree>
+      </div>
+      <label id="labBtn">
+        <div class="icon">
+          <i class="el-icon-more"></i>
+          <i class="el-icon-more"></i>
+        </div>
+      </label>
+      <div class="main-right file-library fr" style="overflow: hidden;">
+        <div class="annex-screen">
+          <el-button type="primary" class="button-sty" icon="el-icon-download" @click.native="mulDownload2">
+            {{ $t1('下载') }}
+          </el-button>
+        </div>
+        <div class="line"></div>
+        <div class="annex-crumbs">
+          <span class="tit"><i class="iconfont icon-wenjianjia"></i>{{ $t1('文件区') }}</span>
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item v-for="(treeNode,index) in treeNodeArr" :key="index" @click.native="doNav(treeNode)">{{
+                treeNode.label
+              }}
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div class="grid-height viewBox">
+          <div class="annex-searchBox">
+            <div class="fl">
+              <div class="oper">
+                <el-checkbox v-model="checkAll" @change="changeCheckAll" :disabled="checkAllDisabled"
+                             :indeterminate="checkAllIndeterminate">{{ $t1('已选中') }} {{
+                    checkList.length
+                  }} {{ $t1('项') }}
+                </el-checkbox>
+              </div>
+              <div class="search-box">
+                <el-input :placeholder="$t1('请输入文件名')" v-model="formData.name" clearable>
+                  <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
+                </el-input>
+              </div>
+            </div>
+            <div class="fr">
+
+              <el-button type="primary" icon="iconfont icon-icmenu2" @click="changeShowType()"
+                         class="button-sty icon-btn"
+                         v-show="showType==1">{{ $t1('列表') }}
+              </el-button>
+              <el-button type="primary" style="margin-left:0;" icon="el-icon-menu" @click="changeShowType()"
+                         class="button-sty icon-btn"
+                         v-show="showType==2">{{ $t1('图示') }}
+              </el-button>
+            </div>
+
+          </div>
+          <div class="containter1" ref="containter1" v-show="showType==1" style="overflow: auto;">
+            <div class="annex-piclist">
+              <div class="clearfix">
+                <el-checkbox-group v-model="checkList" @change="checkChange" class="f-group">
+                  <template v-for="(attachment) in page.records">
+                    <li :key="attachment.id" class="item" :class="checkList.includes(attachment.id) ? 'on':''">
+                      <el-checkbox :label="attachment.id"><span></span></el-checkbox>
+                      <div class="oper">
+                        <el-tooltip effect="dark" :content="$t1('详情')" placement="top"><i
+                          class="el-tooltip iconfont icon-shuxing ico"
+                          @click="openPropertiesDialog(attachment)"></i>
+                        </el-tooltip>
+                        <a href="javascript:void(0);" class="a-link ico" v-if="attachment.billUrl">
+                          <el-tooltip effect="dark" :content="$t1('查看单据')" placement="top"><i
+                            class="el-icon-files"
+                            @click="openWfDialog(attachment)"></i>
+                          </el-tooltip>
+                        </a>
+                        <a
+                          href="javascript:void(0);"
+                          class="a-link ico"
+                          v-if="!attachment.dirs"
+                          @click="$commonFileUtil.downloadFile(attachment.domain + attachment.url, attachment.name)"
+                        >
+                          <el-tooltip effect="dark" :content="$t1('下载')" placement="top"
+                                      popper-class="tooltip-skin">
+                            <i class="el-icon-download"/>
+                          </el-tooltip>
+                        </a>
+                      </div>
+                      <div class="img" @click="openPreview(attachment)" v-if="!attachment.dirs">
+                        <div class="show-video" v-if="hasPreview(attachment)"><i class="icon-chakan"></i></div>
+                        <div class="show-video" v-if="false"><i class="el-icon-video-play"></i></div>
+                        <p><img :src="getShowUrl(attachment)"/></p>
+                      </div>
+                      <div class="img" @click="changeCategory(attachment)" v-if="attachment.dirs">
+                        <svg-icon icon-class="ico-wenjianjia"/>
+                      </div>
+                      <el-tooltip :enterable="false" effect="dark" :content="attachment.name" placement="top">
+                        <div class="txt-box">
+                          <div class="tb-left"></div>
+                          <div class="tb-mid">
+                            <div class="txt">
+                              <span class="name">{{ getFileName(attachment) }}</span><span
+                              v-if="attachment.extension">.{{ attachment.extension }}</span>
+                            </div>
+                          </div>
+                          <div class="format">... .{{ attachment.extension }}</div>
+                        </div>
+
+                      </el-tooltip>
+                    </li>
+                  </template>
+                </el-checkbox-group>
+              </div>
+              <div class="vxe-grid">
+                <div class="vxe-grid&#45;&#45;pager-wrapper">
+                  <vxe-pager
+                    class="pages-box"
+                    :current-page.sync="page.current"
+                    :page-size.sync="page.size"
+                    :total="page.total"
+                    :layouts="['PrevPage', 'Number', 'NextPage']"
+                    @page-change="changePageNew"
+                  >
+                    <template #right>
+                    <span>
+                      <span>{{ $t1('当前记录') }}</span>
+                      <span class="f-red"> {{ page.records.length }} </span>
+                      <span>/</span>
+                      <span class="f-red"> {{ page.total }}</span>
+                    </span>
+                    </template>
+                  </vxe-pager>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="annex-grid-height">
+            <vxe-grid v-show="showType==2" ref="table-m1" v-bind="vxeOption" :data="page.records"
+                      @resizable-change="$vxeTableUtil.onColumnWitchChange" @custom="$vxeTableUtil.customHandle"
+                      @checkbox-change="tableCheckChange"
+                      @checkbox-all="tableCheckAll">
+              <template #pager>
+                <vxe-pager
+                  class="pages-box"
+                  :current-page.sync="page.current"
+                  :page-size.sync="page.size"
+                  :total="page.total"
+                  :layouts="['PrevPage', 'Number', 'NextPage']"
+                  @page-change="changePageNew"
+                >
+                  <template #right>
+                    <span>
+                      <span>{{ $t1('当前记录') }}</span>
+                      <span class="f-red"> {{ page.records.length }} </span>
+                      <span>/</span>
+                      <span class="f-red"> {{ page.total }}</span>
+                    </span>
+                  </template>
+                </vxe-pager>
+              </template>
+            </vxe-grid>
+          </div>
+        </div>
+      </div>
+      <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :initial-index.sync="chooseIndex"
+                       :url-list="imageDTOs"/>
+      <propertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
+                        :editAttachment.sync="editAttachment" :isEdit="isEdit"
+                        :treeNodeArr.sync="treeNodeArr"></propertiesDialog>
+      <el-dialog
+        :title="$t1('查看单据')"
+        :append-to-body="true"
+        :modal-append-to-body="true"
+        :close-on-click-modal="false"
+        v-if="showWfDialog"
+        :visible.sync="showWfDialog"
+        :modal="false"
+        custom-class="dialog-style designer-dialog indexUse"
+        width="100%"
+        height="100%"
+        top="0px"
+        bottom="0px"
+        :destroy-on-close="true"
+        v-el-drag-dialog
+      >
+        <div id="containt">
+          <component
+            v-if="showWfContent && wfContent"
+            :is="wfContent"
+            visible-key="showWfContent"
+            :_dataId.sync="wfDataId"
+            :parent-target="_self"
+            :defaultShowWfContent="true"
+            :_viewType="1"
+            @reload="$reloadHandle"
+          ></component>
+          <micro-view-host
+            v-else-if="showWfContent && remoteView"
+            :owner="remoteView.owner"
+            :target-path="remoteView.targetPath"
+            :biz-params="remoteView.bizParams"
+            :view-meta="remoteView.viewMeta"
+            @reload="$reloadHandle"
+            @close="showWfContent = false"
+          ></micro-view-host>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import ElImageViewer from "@base/components/VabUpload/image-viewer";
+import {treeScollx} from "@base/utils/global";
+import propertiesDialog from './propertiesDialog';
+import { loadViewComponentAsync } from "@base/utils/resolveViewComponent";
+
+export default {
+  name: 'file_view_ins:list',
+  props: {
+    option: {
+      type: Object
+    }
+  },
+  components: {
+    ElImageViewer,
+    propertiesDialog
+  },
+  provide() {
+    return {
+      current_prefix: this.current_prefix,
+      viewAreaCode: this.viewAreaCode,
+      dataId: this.dataId
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.initTitle();
+    this.initTableList();
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data() {
+    let pageSize = 1000;
+    let categoryPageSize = 1000;
+    return {
+      showBillDialog: false,
+      billDialogContent: null,
+      checkBillDatas: [],
+      title: '',
+      folderStatus: false,
+      filterText: '',
+      defaultProps: {
+        children: 'children',
+        label: 'itemName',
+        isLeaf: 'leaf'
+      },
+      resolveFunc: function () {
+      },
+      fileAttachmentCategorys: [],
+      currentFileCategoryCode: null,
+      chooseIndex: -1,
+      imageDTOs: [],
+      showViewer: false,
+      showPropertiesDialog: false,
+      editAttachment: null,
+      vxeOption: {},
+      showType: 1,
+      formData: {},
+      showAdvancedSearch: false,
+      advancedFormData: {},
+      pageSize: pageSize,
+      page: {
+        current: 1,
+        size: pageSize,
+        total: 0,
+        records: []
+      },
+      categoryPageSize: categoryPageSize,
+      categoryPage: {
+        current: 1,
+        size: categoryPageSize,
+        total: 0,
+        records: []
+      },
+      showEditCategoryDialog: false,
+      editCategory: {},
+      currentFileCategory: null,
+      rootCategory: false,
+      currentNode: null,
+      treeNodeArr: [],
+      checkRows: [],
+      showCategoryMoveDialog: false,
+      checkList: [],
+      handleType: 1,//1移动，2复制
+      showFileHistoryDialog: false,
+      operateFileHistory: null,
+      showShareDialog: false,
+      shareAttachment: null,
+      checkAll: false,
+      fileArr: [],
+      checkList2: [],
+      showRecycleBinDialog: false,
+
+      showVideoDialog: false,
+      videoOption: null,
+
+      //个人文档
+      userInfo: {
+        nickName: null
+      },
+      treeFlag: false,
+      currentUser: {},
+      showUserDialog: false,
+      isDocAdmin: false,
+
+      viewAreaCode: "file_view_area",
+
+      showWfDialog: false,
+      showWfContent: true,
+      wfContent: null,
+      remoteView: null,
+      wfDataId: '',
+    };
+  },
+  computed: {
+    current_prefix() {
+      return this.currentFileCategory && this.currentFileCategory.serviceId ? '/' + this.currentFileCategory.serviceId : '';
+    },
+    pictureDtoList() {
+      return this.page.records.filter(row => {
+        return row.url && this.$commonFileUtil.isPictureFile(row.url)
+      });
+    },
+    checkAllDisabled() {
+      return this.page.records.length == 0
+    },
+    checkAllIndeterminate() {
+      return this.checkList.length > 0 && (this.checkList.length < this.page.records.length)
+    },
+  },
+  methods: {
+    getFileName(row) {
+      if (row.extension) {
+        let index = row.name.lastIndexOf('.' + row.extension)
+        return row.name.substring(0, index);
+      } else {
+        return row.name;
+      }
+    },
+    getCheckRows() {
+      let checkRows = [];
+      if (this.showType == 1) {
+        let checkList = this.checkList;
+        checkRows = this.page.records.filter(row => checkList.includes(row.id));
+      } else {
+        checkRows = this.$refs['table-m1'].getCheckboxRecords(true);
+      }
+      return checkRows;
+    },
+    getRows() {
+      let rows = [];
+      if (this.showType == 1) {
+        rows = this.page.records;
+      } else {
+        rows = this.$refs['table-m1'].getTableData().fullData;
+      }
+      return rows;
+    },
+    changeShowType() {
+      this.showType = this.showType == 1 ? 2 : 1;
+      this.searchEvent();
+    },
+    changeCategory(row, node) {
+      if (!node) {
+        node = this.$refs.tree.getNode(row.id + '');
+        this.$refs.tree.setCurrentKey(row)
+      }
+      this.handleNodeData(node);
+      this.searchEvent();
+    },
+    searchEvent() {
+      this.doSearch()
+    },
+    resetEvent() {
+      this.formData = {};
+      this.doSearch();
+    },
+    doSearch() {
+      this.checkList = [];
+      this.checkAll = false;
+      this.initAttchInfo();
+    },
+    openPropertiesDialog(attachment) {
+      this.editAttachment = attachment;
+      this.showPropertiesDialog = true;
+    },
+    getShowUrl(attachment, field) {
+      if (!field) field = 'medium';
+      return this.$commonFileUtil.getShowUrl(attachment.domain + (attachment[field] ? attachment[field] : attachment.url));
+    },
+    hasPreview(attachment) {
+      let fileSuffix = this.$commonFileUtil.getFileSuffix(attachment.url);
+      return this.$commonFileUtil.isPictureFile(attachment.url) || this.$commonFileUtil.isPreviewFile(attachment.url);
+    },
+    openPreview(attachment) {
+      if (this.$commonFileUtil.isPictureFile(attachment.url)) {
+        this.imageDTOs = this.pictureDtoList;
+        this.chooseIndex = this.pictureDtoList.findIndex(row => row.id == attachment.id);
+        this.showViewer = true;
+      } else if (this.$commonFileUtil.isPreviewFile(attachment.url)) {
+        this.$openFilePreview(attachment)
+      }
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.itemName.indexOf(value) !== -1;
+    },
+    initAttchInfo(page) {
+      if (!this.current_prefix) {
+        return;
+      }
+      let defaultPage = {
+        current: 1,
+        size: this.pageSize,
+        total: 0,
+        records: []
+      }
+      page = page || {
+        current: 1,
+        size: this.pageSize
+      };
+
+      let parent = this.currentFileCategory && this.currentFileCategory.id ? this.currentFileCategory.id : 0;
+      this.$http({
+        method: 'post',
+        url: this.current_prefix + '/file_view_ins/viewFiles',
+        data: {
+          itemCode: this.currentFileCategory ? this.currentFileCategory.itemCode : null,
+          viewAreaCode: this.viewAreaCode,
+          condition: {
+            ...this.formData,
+            ...this.advancedFormData,
+            ...page
+          }
+        },
+        isLoading: true,
+        success: res => {
+          this.page = res.objx && res.objx.data ? res.objx.data : defaultPage;
+        }
+      });
+    },
+    initTableList() {
+      let that = this;
+      let tableOption = {
+        vue: this,
+        tableRef: 'table-m1',
+        tableName: 'pcp_product_file_list-m1',
+        config: {
+          height: 'auto',
+          pagerConfig: {
+            autoHidden: false,
+            enabled: true
+          }
+        },
+        columns: [
+          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
+          {
+            title: this.$t1('文件名称'),
+            field: 'name',
+            width: 250,
+            fixed: 'left',
+            slots: {
+              default: ({row, rowIndex}) => {
+                let h = this.$createElement;
+                if (!row.dirs) {
+                  let showUrl = that.getShowUrl(row, 'thumbnail');
+                  return [
+                    h('a', {
+                      staticClass: "a-link img",
+                      on: {
+                        click: (event) => {
+                          event.stopPropagation();
+                          that.openPreview(row)
+                        }
+                      }
+                    }, [
+                      h('el-tooltip', {
+                        props: {
+                          enterable: false,
+                          effect: "dark",
+                          content: this.$t1('展示图'),
+                          placement: "top",
+                          "popper-class": "tooltip-skin"
+                        }
+                      }, [
+                        h('el-image', {
+                          props: {
+                            src: showUrl
+                          }
+                        })
+                      ])
+                    ]),
+                    h('span', row.name)
+                  ];
+                } else {
+                  return [
+                    h('a', {
+                      staticClass: "a-link img",
+                      on: {
+                        click: (event) => {
+                          event.stopPropagation();
+                          that.changeCategory(row);
+                        }
+                      }
+                    }, [
+                      h('div', {
+                        staticClass: "img"
+                      }, [
+                        h('svg-icon', {
+                          props: {"icon-class": "ico-wenjianjia"}
+                        }),
+                        h('span', row.name)
+                      ])
+                    ])
+                  ]
+                }
+              }
+            }
+          },
+          {
+            title: this.$t1('文件大小'),
+            field: 'fileSize',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex}) => {
+                if (!row.dirs) {
+                  return this.formatFileSize(row.fileSize);
+                }
+              }
+            }
+          },
+          {title: this.$t1('文件说明'), field: 'note', width: 250},
+          {title: this.$t1('单号'), field: 'billSn', width: 250},
+          {title: this.$t1('单据说明'), field: 'billInfo', width: 250},
+          {title: this.$t1('创建人'), field: 'createBy', width: 150},
+          {
+            field: 'createDate',
+            title: this.$t1('创建时间'),
+            width: 150
+          },
+          {
+            width: 150,
+            fixed: 'right',
+            title: '',
+            sortable: false,
+            slots: {
+              default: ({row, rowIndex}) => {
+                return [
+                  this.getBtnVnode({
+                    class: "iconfont icon-shuxing",
+                    title: this.$t1('详情'),
+                    click: (event) => {
+                      this.openPropertiesDialog(row);
+                    }
+                  }),
+                  this.getBtnVnode({
+                    class: "el-icon-files",
+                    title: this.$t1('查看单据'),
+                    show: row.billUrl != null,
+                    click: (event) => {
+                      this.openWfDialog(row)
+                    }
+                  }),
+                  this.getBtnVnode({
+                    class: "el-icon-download",
+                    title: this.$t1('下载'),
+                    click: (event) => {
+                      this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
+                    }
+                  })
+                ];
+              }
+            }
+          }
+        ],
+        callback(a, b) {
+
+        }
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption = opts;
+      });
+    },
+    getBtnVnode(opt) {
+      let h = this.$createElement;
+      let show = opt.show === false ? false : true;
+      if (show) {
+        return h('a', {
+          staticClass: "a-link",
+          on: {
+            click: (event) => {
+              opt.click && opt.click(event)
+            }
+          }
+        }, [
+          h('el-tooltip', {
+            props: {
+              enterable: false,
+              effect: "dark",
+              content: opt.title,
+              placement: "top",
+              "popper-class": "tooltip-skin"
+            }
+          }, [
+            h('i', {
+              staticClass: opt.class
+            })
+          ])
+        ]);
+      }
+    },
+    changePageNew({type, currentPage, pageSize, $event}) {
+      this.checkList = [];
+      this.checkAll = false;
+      this.initAttchInfo({
+        current: currentPage,
+        size: pageSize,
+      })
+    },
+    handleNodeClick(data, node, v) {
+      this.changeCategory(data, node);
+    },
+    doNav(t) {
+      let node = this.$refs.tree.getNode(t.data.id + '');
+      this.$refs.tree.setCurrentKey(node.data)
+      this.handleNodeClick(node.data, node, this);
+    },
+    // 异步树叶子节点懒加载逻辑
+    loadNode(node, resolve, callback) {
+      let url, param;
+      url = USER_PREFIX + '/file_view_item/listPage';
+      param = {
+        viewAreaCode: this.viewAreaCode,
+        size: this.categoryPageSize,
+      };
+      this.$http({
+        url: url,
+        method: 'post',
+        data: param,
+        success: res => {
+          let page = res.objx;
+          let rows = page && page.records ? page.records : [];
+
+          // moreBtn
+          rows.forEach(value => {
+            value.leaf = true;
+            value.hasChild = false;
+          });
+
+          if (node.level === 0) {
+            setTimeout(() => {
+              if (node.childNodes.length) {
+                this.$refs.tree.setCurrentKey(node.childNodes[0].data)
+                this.handleNodeData(node.childNodes[0]);
+                this.searchEvent();
+              }
+            }, 200);
+            this.$nextTick(() => {
+              callback && callback();
+            })
+
+          } else {
+            this.$nextTick(() => {
+              callback && callback();
+            })
+          }
+          resolve(rows);
+        }
+      });
+    },
+    handleNodeData(node) {
+      let treeNodeArr = [];
+      let tree = this.$refs.tree;
+      if (node) {
+        treeNodeArr.push(node);
+        let end = false;
+        let pNode = node;
+        while (!end) {
+          pNode = pNode.parent;
+          if (pNode && pNode.data) {
+            let pData = pNode.data;
+            treeNodeArr.push(pNode);
+            end = pNode.level <= 1;
+          } else {
+            end = true;
+          }
+        }
+        treeNodeArr = treeNodeArr.reverse();
+      }
+      this.currentFileCategory = node ? node.data : null;
+      this.currentNode = node;
+      this.$set(this, 'treeNodeArr', treeNodeArr);
+    },
+    mulDownload() {
+      let checkRows = this.getCheckRows();
+      if (!checkRows.length) {
+        this.$message({
+          message: this.$t1('请选择需要下载的文件'),
+          type: 'error',
+          showClose: true,
+          duration: 3000,
+        });
+        return;
+      }
+      checkRows.forEach(row => {
+        this.$commonFileUtil.downloadFile(row.domain + row.url, row.name);
+      })
+    },
+    mulDownload2() {
+      let checkRows = this.getCheckRows();
+      if (!checkRows.length) {
+        this.$message({
+          message: this.$t1('请选择需要下载的文件'),
+          type: 'error',
+          showClose: true,
+          duration: 3000,
+        });
+        return;
+      }
+
+      this.getDownloadDomian(domain => {
+        this.getFileWhole(checkRows, (fileWhole) => {
+          this.$http({
+            method: 'post',
+            url: domain + '/docfile/download',
+            data: fileWhole,
+            isLoading: true,
+            success: res => {
+              window.open(res.objx.url);
+            }
+          });
+        })
+      })
+    },
+    getDownloadDomian(callback) {
+      this.$http({
+        method: 'post',
+        url: USER_PREFIX + '/common/fileDownloadUrl',
+        data: {},
+        isLoading: true,
+        success: res => {
+          callback(res.objx)
+        }
+      });
+    },
+    getFileWhole(rows, callback) {
+      let ids = rows.map(row => row.id);
+      this.$http({
+        method: 'post',
+        url: this.current_prefix + '/file_view_ins/getFileWhole',
+        data: ids,
+        isLoading: true,
+        success: res => {
+          callback(res.objx)
+        }
+      });
+    },
+    checkChange() {
+      let rows = this.getRows();
+      let checkRows = this.getCheckRows();
+      this.checkAll = rows.length && rows.length == checkRows.length
+    },
+    changeCheckAll(val) {
+      let rows = this.getRows();
+      this.checkList = val ? rows.map(row => row.id) : [];
+      if (this.showType == 2) {
+        this.$refs['table-m1'].setAllCheckboxRow(val);
+      }
+    },
+    tableCheckChange() {
+      let checkRows = this.getCheckRows();
+      this.checkList = checkRows.map(row => row.id);
+      this.checkChange();
+    },
+    tableCheckAll(val) {
+      let checkRows = this.getCheckRows();
+      this.checkList = checkRows.map(row => row.id);
+      this.checkChange();
+    },
+    initTitle() {
+      this.$http({
+        method: 'post',
+        url: USER_PREFIX + '/file_view_area/getByCode',
+        data: {
+          stringOne: this.viewAreaCode,
+        },
+        isLoading: true,
+        success: res => {
+          let fileStoreArea = res.objx;
+          if (fileStoreArea) {
+            this.title = fileStoreArea.viewAreaName;
+            this.$nextTick(() => {
+              treeScollx({target: this, type: 'default'});
+              this.treeFlag = true;
+            });
+          } else {
+            this.$baseAlert(this.$t1('凭证查询区未维护'));
+          }
+        }
+      });
+    },
+    formatFileSize(fileSize) {
+      fileSize = fileSize || 0;
+      if (fileSize < 1024) {
+        return fileSize + 'B';
+      } else if (fileSize < (1024 * 1024)) {
+        var temp = fileSize / 1024;
+        temp = temp.toFixed(2);
+        return temp + 'KB';
+      } else if (fileSize < (1024 * 1024 * 1024)) {
+        var temp = fileSize / (1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + 'MB';
+      } else {
+        var temp = fileSize / (1024 * 1024 * 1024);
+        temp = temp.toFixed(2);
+        return temp + 'GB';
+      }
+    },
+    reflushTree() {
+      this.treeFlag = false;
+      setTimeout(() => {
+        this.treeFlag = true;
+      }, 200)
+    },
+    async openWfDialog(row) {
+      let url = row.billUrl + '.vue';
+      let id = row.billId;
+      this.wfDataId = !id || typeof id == 'object' ? 0 : id;
+      this.showWfDialog = true;
+      this.showWfContent = true;
+      const res = await loadViewComponentAsync(url);
+      this.remoteView =
+        res.kind === "remote"
+          ? {
+              owner: res.owner,
+              targetPath: res.targetPath,
+              bizParams: { _dataId: this.wfDataId },
+              viewMeta: { visibleKey: "showWfContent", defaultShowWfContent: true, viewType: 1 },
+            }
+          : null;
+      this.wfContent = res.component;
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+#labBtn {
+  height: calc(100vh - 35px);
+}
+
+#containt {
+  overflow: hidden;
+
+  .main-right {
+    margin-left: -1%;
+    padding-left: 18px !important;
+    padding-top: 8px;
+    padding-right: 8px;
+    overflow: hidden;
+  }
+}
+
+.upload-list .upload-box {
+  display: inline-block;
+}
+
+
+.vxe-grid .vxe-gird-block {
+  height: calc(100vh - 161px);
+}
+
+.grid-height.viewBox {
+  height: calc(100vh - 84px);
+
+  .containter1 {
+    .annex-piclist > .clearfix {
+      height: calc(100vh - 159px);
+    }
+  }
+
+  .annex-grid-height {
+    height: calc(100vh - 126px);
+  }
+}
+
+.annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
+  height: calc(100vh - 133px);
+
+  .containter1 {
+    .annex-piclist > .clearfix {
+      height: calc(100vh - 208px);
+    }
+  }
+
+  .annex-grid-height {
+    height: calc(100vh - 175px);
+  }
+}
+
+.annex-filter + .annex-crumbs + .grid-height.viewBox {
+  height: calc(100vh - 133px);
+
+  .containter1 {
+    .annex-piclist > .clearfix {
+      height: calc(100vh - 208px);
+    }
+  }
+
+  .annex-grid-height {
+    height: calc(100vh - 175px);
+  }
+}
+
+.annex-filter + .annex-screen + .line + .annex-crumbs + .grid-height.viewBox {
+  height: calc(100vh - 181px);
+
+  .containter1 {
+    .annex-piclist > .clearfix {
+      height: calc(100vh - 256px);
+    }
+  }
+
+  .annex-grid-height {
+    height: calc(100vh - 223px);
+  }
+}
+</style>