icve-urc 1.0.0

package/src/components/fileImport.vue

@@ -0,0 +1,466 @@
+<template>
+  <div ref="box" class="box">
+    <!-- 文件上传输入框 -->
+    <!--    <input type="file" ref="fileInput" @change="onFileChange">-->
+    <div class="main">
+      <!-- 左侧树形菜单 -->
+      <div class="left">
+        <treeCompontent @handleNodeClick="handleNodeClick" :userId="userId" :productId="productId" />
+      </div>
+      <!-- 可拖拽分隔栏 -->
+      <div class="resize" title="收缩侧边栏">
+        <!-- ⋮ -->
+      </div>
+      <!-- 主内容区域 -->
+      <div class="mid">
+        <!-- 搜索表单 -->
+        <el-row>
+          <el-col :span="24" class="form">
+            <!-- 文件类型选择器 -->
+            <el-select v-model="test.code" collapse-tags multiple style="width: 200px; margin-right: 10px"
+              v-bind="$attrs" v-on="$listeners">
+              <!-- 全选复选框 -->
+              <el-checkbox v-model="check" :indeterminate="test.code.length !== options.length" class="m-l-20"
+                style="margin-left: 20px" @change="selectAll">
+                全部
+              </el-checkbox>
+              <!-- 文件类型选项 -->
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <!-- 资源名称搜索框 -->
+            <el-input v-model="queryParams.fileName" placeholder="请输入资源名称"
+              style="width: 200px; margin-right: 10px"></el-input>
+            <!-- 查询按钮 -->
+            <el-button @click="onSubmit" class="addBlue" size="mini">查询</el-button>
+          </el-col>
+        </el-row>
+        <!-- 文件列表表格 -->
+        <el-table :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange"
+          :row-key="(row) => {
+            return row.id
+          }
+            " ref="multipleTable">
+          <!-- 选择列 -->
+          <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
+          </el-table-column>
+          <!-- 序号列 -->
+          <el-table-column align="center" label="序号" type="index" width="100">
+            <template slot-scope="scope">
+              <!-- 计算当前行在所有数据中的索引 -->
+              {{
+                (queryParams.pageNum - 1) * queryParams.pageSize +
+                scope.$index +
+                1
+              }}
+            </template>
+          </el-table-column>
+          <!-- 文件名列 -->
+          <el-table-column align="center" label="文件名" prop="name" width="200px">
+            <template slot-scope="scope">
+              <div class="wj">
+                <!-- 图片文件图标 -->
+                <img v-if="scope.row.fileType == 1" alt="" src="../assets/img/icon-pic.png" />
+                <!-- PPT文件图标 -->
+                <img v-if="scope.row.fileType == 2" alt="" src="../assets/img/icon_ppt.png" />
+                <!-- 音频文件图标 -->
+                <img v-if="scope.row.fileType == 3" alt="" src="../assets/img/icon_audio.png" />
+                <!-- 视频文件图标 -->
+                <img v-if="scope.row.fileType == 4" alt="" src="../assets/img/icon_vedio.png" />
+                <!-- Word文件图标 -->
+                <img v-if="scope.row.fileType == 5" alt="" src="../assets/img/icon_word.png" />
+                <!-- PDF文件图标 -->
+                <img v-if="scope.row.fileType == 6" alt="" src="../assets/img/icon_pdf.png" />
+                <!-- Excel文件图标 -->
+                <img v-if="scope.row.fileType == 7" alt="" src="../assets/img/icon_excel.png" />
+                <!-- TXT文件图标 -->
+                <img v-if="scope.row.fileType == 8" alt="" src="../assets/img/icon_txt_s.png" />
+                <!-- 压缩包文件图标 -->
+                <img v-if="scope.row.fileType == 9" alt="" src="../assets/img/icon_zip.png" />
+                <!-- 其他文件图标 -->
+                <img v-if="scope.row.fileType == 10" alt="" src="../assets/img/icon_other.png" />
+                <!-- 文件名称提示 -->
+                <el-tooltip :content="scope.row.fileName" :open-delay="1000" class="item" effect="light"
+                  placement="bottom">
+                  <a class="gl" style="cursor: pointer">{{ scope.row.fileName }}</a>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <!-- 媒体类型列 -->
+          <el-table-column align="center" label="媒体类型" prop="province">
+            <template slot-scope="scope">
+              <span>{{
+                scope.row.fileTypeShow ? scope.row.fileTypeShow : '文件夹'
+              }}</span>
+            </template>
+          </el-table-column>
+          <!-- 文件大小列 -->
+          <el-table-column align="center" label="文件大小">
+            <template slot-scope="{ row }">
+              {{ row.fileSizeShow || '--' }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <Pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
+          @pagination="getList(false)" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// 导入API方法
+// 导入树形组件
+import { myResourceList } from '@/api/resourceManagement'
+import treeCompontent from './treeCompontent.vue'
+export default {
+  name: 'FileImport',
+  props: {
+    userId: {
+      type: String,
+      default: '',
+    },
+    productId: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    treeCompontent,
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: 0,
+        region: '',
+        isDir: 0,
+        userId: this.userId,
+        productId: this.productId,
+      },
+      // 分页参数
+      page: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 表格数据
+      tableData: [],
+      // 总数
+      total: 0,
+      // 选中ID数组
+      ids: [],
+      // 是否多选
+      multiple: true,
+      // 文件类型选择
+      test: {
+        code: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      },
+      // 文件类型选项
+      options: [
+        { value: 1, label: '图片' },
+        { value: 2, label: 'PPT' },
+        { value: 3, label: '音频' },
+        { value: 4, label: '视频' },
+        { value: 5, label: 'Word' },
+        { value: 6, label: 'Pdf' },
+        { value: 7, label: 'Excel' },
+        { value: 8, label: 'txt' },
+        { value: 9, label: '压缩包' },
+        { value: 10, label: '其他' },
+      ],
+    }
+  },
+  mounted() {
+    // 初始化拖拽功能
+    this.$nextTick(() => {
+      this.dragControllerDiv()
+    })
+    // 隐藏滚动条
+    document.querySelector('html').style.overflowY = 'hidden'
+  },
+  beforeDestroy() {
+    // 恢复滚动条
+    document.querySelector('html').style.overflowY = 'auto'
+  },
+  computed: {
+    // 全选状态计算属性
+    check: {
+      get() {
+        if (this.test.code.length === this.options.length) {
+          return true
+        }
+        return false
+      },
+      set() { },
+    },
+  },
+  methods: {
+    // 拖拽控制器
+    dragControllerDiv() {
+      var resize = document.getElementsByClassName('resize')
+      var left = document.getElementsByClassName('left')
+      var mid = document.getElementsByClassName('mid')
+      var box = document.getElementsByClassName('box')
+      for (let i = 0; i < resize.length; i++) {
+        // 鼠标按下事件
+        resize[i].onmousedown = function (e) {
+          //颜色改变提醒
+          // resize[i].style.background = "#818181";
+          var startX = e.clientX
+          resize[i].left = resize[i].offsetLeft
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+            var endX = e.clientX
+            var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+            var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+
+            if (moveLen < 200) moveLen = 200 // 左边区域的最小宽度为32px
+            if (moveLen > 400) moveLen = 400 //右边区域最小宽度为150px
+
+            resize[i].style.left = moveLen // 设置左侧区域的宽度
+
+            for (let j = 0; j < left.length; j++) {
+              left[j].style.width = moveLen + 'px'
+              mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
+            }
+          }
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+            //颜色恢复
+            // resize[i].style.background = "#d6d6d6";
+            document.onmousemove = null
+            document.onmouseup = null
+            resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          }
+          resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false
+        }
+      }
+    },
+    // 获取资源列表
+    async getList(flag, test) {
+      if (flag) {
+        this.dialogVisible = true
+        this.Test = test
+      }
+      this.wjOpen = false
+      this.bjOpen = false
+      this.queryParams.fileType = this.test.code
+      myResourceList(this.queryParams).then((res) => {
+        this.tableData = res.rows
+        this.total = res.total
+      })
+    },
+    // 全选
+    selectAll(checked) {
+      if (checked) {
+        this.test.code = this.options.map((d) => d.value)
+      } else {
+        this.test.code = []
+      }
+    },
+    // 提交查询
+    onSubmit() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 当前页改变
+    handleCurrentChange(val) { },
+    // 序号计算方法
+    indexMethod(index) {
+      let curpage = this.page.pageNum
+      let limitpage = this.page.pageSize
+      return index + 1 + (curpage - 1) * limitpage
+    },
+    // 选择改变事件
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id)
+      this.multiple = !selection.length
+      this.$emit('selectionChange', selection)
+    },
+
+    // 树节点事件
+    handleNodeClick(data) {
+      this.queryParams.pageNum = 1
+      this.queryParams.parentId = data.id
+      this.getList()
+    },
+  },
+  async created() {
+    this.getList()
+  },
+}
+</script>
+<style lang="scss">
+// /* 滚动条整体部分 */
+::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+/* 滚动条的轨道 */
+::-webkit-scrollbar-track {
+  background-color: #f5f5f5 !important;
+  border-radius: 3px !important;
+}
+
+/* 滚动条里面的小方块 */
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1 !important;
+  border-radius: 3px !important;
+}
+
+/* 滚动条鼠标移上去 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8 !important;
+}
+
+.addBlue {
+  background: #ebf1fe;
+  // border: 1px solid #145fdf;
+  // border-color: #145fdf;
+  color: #145fdf;
+}
+
+.el-select-dropdown__list {
+  padding-bottom: 20px;
+}
+
+.el-tree .el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.el-tree .el-icon-caret-right:before {
+  content: '';
+}
+
+.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  content: '';
+}
+
+.wj {
+  display: flex;
+  align-items: center;
+
+  a {
+    //flex: 1;
+    //width: 100%;
+    padding-left: 6px;
+    color: rgba(0, 0, 0, 1);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
+<style scoped>
+/* 拖拽相关样式 */
+/*包围div样式*/
+.addBlue {
+  margin-left: 20px;
+}
+
+.el-col {
+  margin-bottom: 10px;
+}
+
+.right {
+  display: flex;
+  justify-content: end;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding-right: 20px;
+}
+
+.main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  /* height: 100%;
+  min-height: 100vh; */
+  box-sizing: border-box;
+}
+
+/*左侧div样式*/
+.left {
+  width: 200px;
+  background: #ffffff;
+  color: rgba(0, 0, 0, 1);
+  overflow: auto;
+  padding: 20px;
+  /* 设置固定宽度200px，但由于flex布局的影响，宽度可能会被覆盖 */
+  flex-shrink: 0;
+  /* 防止flex布局下被压缩 */
+  min-width: 200px;
+  /* 设置最小宽度确保不会小于200px */
+}
+
+/*拖拽区div样式*/
+.resize {
+  cursor: col-resize;
+  float: left;
+  position: relative;
+  top: 0;
+  height: 100%;
+  border-radius: 5px;
+  width: 10px;
+  background-size: cover;
+  background-position: center;
+  font-size: 32px;
+  color: white;
+}
+
+/*拖拽区鼠标悬停样式*/
+.resize:hover {
+  color: #444444;
+}
+
+/*右侧div'样式*/
+.mid {
+  flex: 1;
+  background: #fff;
+  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
+  padding: 20px;
+  overflow: auto;
+  height: auto;
+  box-sizing: border-box;
+  resize: horizontal;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-input__icon {
+  line-height: 33px;
+}
+
+.left_tree {
+  ::v-deep.el-scrollbar__wrap {
+    overflow: auto !important;
+    overflow-x: hidden !important;
+  }
+}
+
+::v-deep body {
+  overflow: hidden;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.wj:hover {
+  color: #1c84c6;
+}
+</style>