cloud-web-corejs 1.0.0

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

@@ -0,0 +1,929 @@
+<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="请输入查询区名称" 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">下载
+            </el-button>
+        </div>
+        <div class="line"></div>
+        <div class="annex-crumbs">
+          <span class="tit"><i class="iconfont icon-wenjianjia"></i>文件区</span>
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item v-for="treeNode in treeNodeArr" @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">已选中 {{
+                    checkList.length
+                  }} 项
+                </el-checkbox>
+              </div>
+              <div class="search-box">
+                <el-input placeholder="请输入文件名" 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">列表</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">图示</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 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="详情" 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="查看单据" 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="下载" 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>当前记录</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>当前记录</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="查看单据"
+        :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>
+        </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';
+
+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,
+      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: '文件名称',
+            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: "展示图",
+                          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: '文件大小',
+            field: 'fileSize',
+            width: 150,
+            slots: {
+              default: ({row, rowIndex}) => {
+                if (!row.dirs) {
+                  return this.formatFileSize(row.fileSize);
+                }
+              }
+            }
+          },
+          {title: '文件说明', field: 'note', width: 250},
+          {title: '单号', field: 'billSn', width: 250},
+          {title: '单据说明', field: 'billInfo', width: 250},
+          {title: '创建人', field: 'createBy', width: 150},
+          {
+            field: 'createDate',
+            title: '创建时间',
+            width: 150
+          },
+          {
+            width: 150,
+            fixed: 'right',
+            title: '',
+            sortable: false,
+            slots: {
+              default: ({row, rowIndex}) => {
+                return [
+                  this.getBtnVnode({
+                    class: "iconfont icon-shuxing",
+                    title: "详情",
+                    click: (event) => {
+                      this.openPropertiesDialog(row);
+                    }
+                  }),
+                  this.getBtnVnode({
+                    class: "el-icon-files",
+                    title: "查看单据",
+                    show: row.billUrl != null,
+                    click: (event) => {
+                      this.openWfDialog(row)
+                    }
+                  }),
+                  this.getBtnVnode({
+                    class: "el-icon-download",
+                    title: "下载",
+                    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: '请选择需要下载的文件',
+          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: '请选择需要下载的文件',
+          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("凭证查询区未维护");
+          }
+        }
+      });
+    },
+    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)
+    },
+    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;
+      this.wfContent = require('@/views' + url).default;
+    },
+  }
+};
+</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>