kz-ui-base 1.0.2 → 1.0.4

package/common/src/components/custom/Material/index.vue

@@ -1,893 +0,0 @@
-<template>
-  <div class="">
-    <el-dialog
-      class="dialogTop"
-      :visible.sync="visible"
-      width="80%"
-      :close-on-click-modal="false"
-      :modal="true"
-      append-to-body
-      :before-close="handleClose"
-    >
-      <template slot="title">
-        <div class="title-text">
-          <span class="title-main">添加文件</span
-          ><span class="title-supplement"
-            >（只能添加"jpg", "jpeg", "bmp", "png", "gif", "pdf", "doc", "docx",
-            "md", "xmind", "mp4", "xlsx"
-            ,"bmp","tif","avi","wmv","xls"大小不超过5M。）</span
-          >
-        </div>
-      </template>
-      <div class="tabs-card">
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          tabPosition="left"
-          class="material"
-          style="height: 500px"
-        >
-          <el-tab-pane label="我的文件" name="first">
-            <el-container>
-              <el-header class="container-header">
-                <el-row :gutter="20" type="flex" justify="space-between">
-                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
-                    <el-row type="flex" justify="space-between">
-                      <el-col>
-                        <el-upload
-                          ref="upload"
-                          :limit="5"
-                          accept=".*"
-                          :action="upload.url"
-                          :headers="upload.headers"
-                          :file-list="upload.fileList"
-                          :data="{ folderId: form.folderId }"
-                          :before-upload="beforeUpload"
-                          :on-progress="handleFileUploadProgress"
-                          :on-success="handleFileSuccess"
-                          :on-error="handleFileError"
-                          :show-file-list="false"
-                        >
-                          <el-button
-                            slot="trigger"
-                            size="medium"
-                            icon="el-icon-upload2"
-                            :loading="upload.isUploading"
-                          >
-                            直接上传
-                          </el-button>
-                        </el-upload>
-                      </el-col>
-                      <el-col>
-                        <el-button
-                          class="hidden-xs-only"
-                          size="medium"
-                          icon="el-icon-folder-add"
-                          @click="handleAddFolder"
-                          :loading="upload.isUploading"
-                          >新增文件夹
-                        </el-button>
-                      </el-col>
-                    </el-row>
-                  </el-col>
-                  <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" :pull="2">
-                    <el-input
-                      placeholder="搜索所有文件"
-                      v-model="form.folderName"
-                      class="header-search"
-                      @change="searchChange"
-                    >
-                      <i
-                        :class="
-                          search.searchVisible
-                            ? 'el-icon-search el-input__icon'
-                            : 'el-icon-error el-input__icon'
-                        "
-                        slot="suffix"
-                        @click="searchIconClick"
-                      />
-                    </el-input>
-                  </el-col>
-                </el-row>
-              </el-header>
-              <el-main class="container-main">
-                <el-breadcrumb
-                  separator-class="el-icon-arrow-right"
-                  class="div-breadcrumb"
-                >
-                  <el-breadcrumb-item
-                    v-for="(item, index) in breadcrumbList"
-                    v-if="breadcrumbList.length > 1"
-                  >
-                    <span
-                      :style="
-                        index < breadcrumbList.length - 1 ? item.cssStyle : null
-                      "
-                      :class="
-                        index < breadcrumbList.length - 1
-                          ? 'breadcrumb-item'
-                          : null
-                      "
-                      @mouseenter="item.cssStyle = 'cursor: pointer;'"
-                      @mouseleave="item.cssStyle = ''"
-                      @click="breadcrumbJump(item, index)"
-                      >{{ item.folderName }}</span
-                    ></el-breadcrumb-item
-                  >
-                </el-breadcrumb>
-                <el-scrollbar
-                  style="height: 425px"
-                  :native="false"
-                  wrapStyle=""
-                  wrapClass=""
-                  viewClass=""
-                  viewStyle=""
-                  :noresize="false"
-                  tag="section"
-                >
-                  <el-row>
-                    <el-col
-                      v-for="(item, index) in materialFolder.children"
-                      style="width: 100px"
-                    >
-                      <div class="material-div">
-                        <div
-                          class="image-div"
-                          @mouseenter="item.hiddenVisible = true"
-                          @mouseleave="item.hiddenVisible = false"
-                        >
-                          <el-image
-                            :class="
-                              item.hiddenVisible === true
-                                ? 'folder-style image-hand'
-                                : 'folder-style'
-                            "
-                            :src="upload.folderImg"
-                            fit="contain"
-                            @click="breadcrumbJump(item, index)"
-                          >
-                          </el-image>
-                          <svg-icon
-                            slot="prefix"
-                            icon-class="xy-cancel"
-                            :class="
-                              item.hiddenVisible
-                                ? 'folder-cancel image-hand'
-                                : 'folder-cancel'
-                            "
-                            v-if="item.hiddenVisible"
-                            @click="imageDelete(0, item, index)"
-                            v-hasPermi="['system:material:remove']"
-                          />
-                        </div>
-                        <div class="image-box">
-                          <el-input
-                            class="image-input"
-                            v-model="item.folderName"
-                            @change="updateMaterialNick(0, item, index)"
-                            ref="ImageNickInput"
-                            size="mini"
-                          >
-                          </el-input>
-                        </div>
-                      </div>
-                    </el-col>
-                    <el-col
-                      v-for="(item, index) in materialFolder.materialList"
-                      style="width: 100px"
-                    >
-                      <div class="material-div">
-                        <div
-                          class="image-div"
-                          @mouseenter="item.hiddenVisible = true"
-                          @mouseleave="item.hiddenVisible = false"
-                        >
-                          <div @click="imageChoiceClick(item, index)">
-                            <el-image
-                              :class="
-                                item.imageChoice === true
-                                  ? 'image-style image-border image-hand'
-                                  : item.hiddenVisible === true
-                                  ? 'image-style image-border image-hand'
-                                  : 'image-style'
-                              "
-                              :src="getImageIcon(item.materialUrl)"
-                              fit="contain"
-                            >
-                            </el-image>
-                            <svg-icon
-                              slot="prefix"
-                              icon-class="xy-choice2"
-                              class="image-choice"
-                              v-if="item.imageChoice"
-                            />
-                          </div>
-                          <svg-icon
-                            slot="prefix"
-                            icon-class="xy-cancel"
-                            :class="
-                              item.hiddenVisible
-                                ? 'image-cancel image-hand'
-                                : 'image-cancel'
-                            "
-                            v-if="item.hiddenVisible"
-                            @click="imageDelete(1, item, index)"
-                            v-hasPermi="['system:material:remove']"
-                          />
-                        </div>
-                        <div class="image-box">
-                          <el-input
-                            class="image-input"
-                            :title="item.materialNick"
-                            v-model="item.materialNick"
-                            @change="updateMaterialNick(1, item, index)"
-                            ref="ImageNickInput"
-                            size="mini"
-                          >
-                          </el-input>
-                        </div>
-                      </div>
-                    </el-col>
-                  </el-row>
-                </el-scrollbar>
-              </el-main>
-            </el-container>
-          </el-tab-pane>
-          <el-tab-pane label="图库中心" name="second"></el-tab-pane>
-        </el-tabs>
-      </div>
-      <div slot="footer" class="dialog-footer dialogTop-footer">
-        <el-button class="dialogTop-footer-button" @click="handleClose"
-          >取 消</el-button
-        >
-        <el-button
-          class="dialogTop-footer-button"
-          type="primary"
-          @click="onSubmit"
-          >确 定</el-button
-        >
-      </div>
-    </el-dialog>
-
-    <!-- <el-dialog
-      class="minor-dialogTop"
-      :visible.sync="visible"
-      width="149px"
-      :close-on-click-modal="false"
-      :show-close="false"
-      :modal="false"
-      v-if="max > 1"
-      append-to-body
-    >
-      <template slot="title">
-        <div class="minor-title-text">
-          <span class="minor-increase"
-            >待添加({{ choiceList.length }}/{{ max }})</span
-          >
-        </div>
-      </template>
-      <div class="tabs-card minor-panel">
-        <el-scrollbar
-          style="height: 500px"
-          :native="false"
-          wrapStyle=""
-          wrapClass=""
-          viewClass=""
-          viewStyle=""
-          :noresize="false"
-          tag="section"
-        >
-          <div style="margin-bottom: 10px" />
-          <draggable :list="choiceList" v-bind="$attrs" animation="300">
-            <div class="choice-div" v-for="(item, index) in choiceList">
-              <div
-                class="choice-image-div"
-                @mouseenter="item.hiddenVisible = true"
-                @mouseleave="item.hiddenVisible = false"
-              >
-                <el-image
-                  :class="
-                    item.hiddenVisible === true
-                      ? 'choice-image-style choice-image-border choice-image-hand'
-                      : 'choice-image-style'
-                  "
-                  :src="item.materialUrl"
-                  fit="contain"
-                />
-                <svg-icon
-                  slot="prefix"
-                  icon-class="xy-cancel"
-                  :class="
-                    item.hiddenVisible
-                      ? 'choice-image-cancel choice-image-hand'
-                      : 'choice-image-cancel'
-                  "
-                  v-if="item.hiddenVisible"
-                  @click="imageDeselectClick(item, index)"
-                />
-              </div>
-            </div>
-          </draggable>
-          <div style="margin-top: 10px" />
-        </el-scrollbar>
-      </div>
-      <div slot="footer" class="dialog-footer minor-dialog-footer"></div>
-    </el-dialog> -->
-  </div>
-</template>
-
-<script>
-import {
-  listMaterial,
-  addFolder,
-  delFolder,
-  delMaterial,
-  parentFolder,
-  updateFolder,
-  updateMaterial,
-} from "../../../api/common/material";
-import { getToken } from "../../../utils/auth";
-import { getImageIcon } from "./fileNameHelper";
-import folderImg from "../../../assets/images/xy-folder.png";
-import "~../../element-ui/lib/theme-chalk/display.css";
-import draggable from "~../../vuedraggable";
-
-export default {
-  name: "Material",
-  components: { draggable },
-  model: {
-    prop: "list",
-    event: "change",
-  },
-  props: {
-    /** dialog显隐参数 */
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    /** 传入list参数 */
-    list: {
-      type: Array,
-      default: [],
-    },
-    /** 图片上传最大数量参数 默认为 1 */
-    max: {
-      type: Number,
-      default: 1,
-    },
-    /** 传入list是否转空参数 默认为 false */
-    clear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      //活跃单元
-      activeName: "first",
-      //list接收转换参数
-      imageList: [],
-      // 上传参数
-      upload: {
-        // 是否禁用上传
-        isUploading: false,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/material/upload",
-        // 上传的文件列表
-        fileList: [],
-        //白名单
-        whiteList: [
-          "jpg",
-          "jpeg",
-          "bmp",
-          "png",
-          "gif",
-          "pdf",
-          "doc",
-          "docx",
-          "md",
-          "xmind",
-          "mp4",
-          "xlsx",
-          "bmp",
-          "tif",
-          "avi",
-          "wmv",
-          "xls",
-        ],
-        //文件夹位置
-        folderImg: folderImg,
-      },
-      search: {
-        searchVisible: true,
-        hiddenVisible: false,
-      },
-      materialFolder: { children: [], materialFolder: [] },
-      choiceList: [],
-      breadcrumbList: [],
-      form: {
-        folderId: 0,
-        folderName: "",
-      },
-      currentItem: {},
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    list(val, oldVal) {
-      //监听imageBox控件是否执行顺序调整
-      this.init();
-    },
-  },
-  methods: {
-    getImageIcon: getImageIcon,
-    /** 初始化方法 */
-    init() {
-      this.creatChoiceList();
-      this.getList();
-    },
-    creatChoiceList() {
-      this.choiceList = [];
-      this.imageList = JSON.parse(JSON.stringify(this.list));
-      if (this.list !== null && this.clear !== true) {
-        for (let i = 0; i < this.imageList.length; i++) {
-          this.choiceList.push({
-            materialId: this.imageList[i].materialId,
-            materialUrl: this.imageList[i].materialUrl,
-            materialOriginalUrl: this.imageList[i].materialOriginalUrl,
-            hiddenVisible: false,
-          });
-        }
-      }
-    },
-    /** 查询素材信息列表 */
-    getList() {
-      listMaterial(this.form).then((response) => {
-        this.materialFolder = response.data;
-        for (let i = 0; i < this.choiceList.length; i++) {
-          for (let j = 0; j < this.materialFolder.materialList.length; j++) {
-            if (
-              this.choiceList[i].materialId ===
-              this.materialFolder.materialList[j].materialId
-            ) {
-              this.materialFolder.materialList[j].imageChoice = true;
-            }
-          }
-        }
-      });
-      parentFolder(this.form).then((response) => {
-        this.breadcrumbList = response.data;
-      });
-    },
-    /** 新建文件夹 */
-    handleAddFolder() {
-      this.upload.isUploading = true;
-      addFolder(this.form).then((response) => {
-        this.msgSuccess("新增成功");
-        this.getList();
-        this.upload.isUploading = false;
-      });
-    },
-    /** 搜索内容变动进行查询 */
-    searchChange() {
-      this.search.searchVisible = this.form.folderName === "";
-      this.getList();
-    },
-    /** true 搜索/false 重置 */
-    searchIconClick() {
-      if (this.search.searchVisible) {
-        this.getList();
-      } else {
-        this.form.folderName = null;
-        this.getList();
-        this.search.searchVisible = true;
-      }
-    },
-    breadcrumbJump(item, index) {
-      this.form.folderName = null;
-      this.form.folderId = item.folderId;
-      this.getList();
-    },
-    imageChoiceClick(item, index) {
-      //取消选择
-      if (item.imageChoice) {
-        for (let i = 0; i < this.choiceList.length; i++) {
-          if (this.choiceList[i].materialId === item.materialId) {
-            this.choiceList.splice(i, 1);
-          }
-        }
-        item.imageChoice = false;
-      } //选择
-      else {
-        if (this.max === 1) {
-          this.currentItem.imageChoice = false;
-          for (let i = 0; i < this.choiceList.length; i++) {
-            this.choiceList.splice(i, 1);
-          }
-        }
-        if (this.choiceList.length < this.max) {
-          this.choiceList.push({
-            materialId: item.materialId,
-            materialNick: item.materialNick,
-            materialUrl: item.materialUrl,
-            materialOriginalUrl: item.materialOriginalUrl,
-            hiddenVisible: false,
-          });
-          item.imageChoice = true;
-          this.currentItem = item;
-        }
-      }
-    },
-    imageDeselectClick(item, index) {
-      for (let i = 0; i < this.choiceList.length; i++) {
-        if (this.choiceList[i].materialId === item.materialId) {
-          this.choiceList.splice(i, 1);
-        }
-      }
-      for (let i = 0; i < this.materialFolder.materialList.length; i++) {
-        if (
-          this.materialFolder.materialList[i].materialId === item.materialId
-        ) {
-          this.materialFolder.materialList[i].imageChoice = false;
-        }
-      }
-    },
-    /** type 0文件夹 1图片 */
-    updateMaterialNick(type, item, index) {
-      if (type === 0) {
-        updateFolder(item).then((response) => {
-          this.msgSuccess("修改成功");
-          this.getList();
-        });
-      } else if (type === 1) {
-        updateMaterial(item).then((response) => {
-          this.msgSuccess("修改成功");
-          this.getList();
-        });
-      }
-    },
-    /** type 0文件夹 1图片 */
-    imageDelete(type, item, index) {
-      this.$confirm(
-        type === 0
-          ? "您确定将该文件夹以及该文件夹内的所有文件放入回收站吗？"
-          : "将文件放入回收站会影响使用该文件的地方，确定放入回收站吗？",
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        }
-      )
-        .then(function () {
-          if (type === 0) {
-            return delFolder(item.folderId);
-          } else if (type === 1) {
-            return delMaterial(item.materialId);
-          }
-        })
-        .then(() => {
-          this.getList();
-          this.$message({
-            type: "success",
-            message: "删除成功!",
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-    /** 上传文件之前 */
-    beforeUpload(file) {
-      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
-      if (this.upload.whiteList.indexOf(fileSuffix) === -1) {
-        this.$message({
-          message: "您上传的文件暂不支持，请联系管理员",
-          type: "warning",
-        });
-        return false;
-      }
-      const isLt2M = file.size / 1024 / 1024 < 100;
-      if (!isLt2M) {
-        this.$message({
-          message: "上传文件大小不能超过 100MB",
-          type: "warning",
-        });
-        return false;
-      }
-    },
-    /** 文件上传中处理 */
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    /** 文件上传成功处理 */
-    handleFileSuccess(response, file, fileList) {
-      this.upload.fileList = [];
-      this.upload.isUploading = false;
-      if (response.code != 200) {
-        this.$message.error("上传失败：" + response.msg);
-      } else {
-        this.$message({
-          message: "上传成功！",
-          type: "success",
-        });
-      }
-      this.getList();
-    },
-    /** 文件上传失败处理 */
-    handleFileError(err, file, fileList) {
-      this.upload.fileList = [];
-      this.upload.isUploading = false;
-      this.$message.error("上传失败：" + err);
-    },
-    /** 确定 */
-    onSubmit() {
-      this.imageList = [];
-      for (let i = 0; i < this.choiceList.length; i++) {
-        this.imageList.push({
-          materialId: this.choiceList[i].materialId,
-          materialNick: this.choiceList[i].materialNick,
-          materialUrl: this.choiceList[i].materialUrl,
-          materialOriginalUrl: this.choiceList[i].materialOriginalUrl,
-          hiddenVisible: false,
-        });
-      }
-      this.$emit("change", JSON.parse(JSON.stringify(this.imageList)));
-      this.$emit("update:visible", false);
-    },
-    /** 关闭 */
-    handleClose(done) {
-      this.$emit("update:visible", false);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.title-text {
-  text-align: left;
-  height: 10px;
-
-  .title-main {
-    font-size: 16px;
-    color: #333333;
-  }
-
-  .title-supplement {
-    font-size: 12px;
-    color: #666666;
-  }
-}
-
-.dialogTop {
-  // top: 9vh;
-  left: 22%;
-  @media screen and (max-width: 1920px) {
-    left: 22%;
-  }
-  @media screen and (min-width: 1921px) and (max-width: 2560px) {
-    left: 30%;
-  }
-  @media screen and (min-width: 2561px) {
-    left: 38%;
-  }
-  position: fixed;
-}
-
-.minor-dialogTop {
-  top: 9vh;
-  left: calc(22% + 960px);
-  @media screen and (max-width: 1920px) {
-    left: calc(22% + 960px);
-  }
-  @media screen and (min-width: 1921px) and (max-width: 2560px) {
-    left: calc(30% + 960px);
-  }
-  @media screen and (min-width: 2561px) {
-    left: calc(38% + 960px);
-  }
-  position: fixed;
-
-  .minor-title-text {
-    text-align: center;
-    height: 10px;
-
-    .minor-increase {
-      font-size: 12px;
-      color: #000000;
-      text-align: center;
-      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
-        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    }
-  }
-
-  .minor-panel {
-    //width: auto;
-    border-bottom: 1px solid #e4e7ed;
-
-    .choice-div {
-      margin: 10px 38px;
-
-      .choice-image-div {
-        width: 70px;
-        height: 70px;
-        position: relative;
-
-        .choice-image-style {
-          width: 70px;
-          height: 70px;
-          border: 1px solid #e4e7ed;
-          background-color: #ffffff;
-        }
-
-        .choice-image-border {
-          border: 1px solid #5874d8;
-        }
-
-        .choice-image-hand {
-          cursor: pointer; //鼠标变手
-        }
-
-        .choice-image-cancel {
-          position: absolute;
-          width: 18px;
-          height: 18px;
-          top: -8px;
-          right: -8px;
-        }
-      }
-    }
-  }
-
-  .minor-dialog-footer {
-    height: 37px;
-  }
-}
-
-.container-header {
-  padding-top: 20px;
-
-  .header-search {
-    width: 162px;
-  }
-}
-
-.dialogTop-footer {
-  text-align: center;
-
-  .dialogTop-footer-button {
-    position: relative;
-    margin: 0 25px 0 25px;
-    top: -10px;
-  }
-}
-
-.container-main {
-  .div-breadcrumb {
-    margin: 6px 0 11px 0;
-  }
-
-  .breadcrumb-item {
-    color: #557ce1;
-  }
-
-  .material-div {
-    margin: 10px 40px 20px 0;
-  }
-
-  .image-div {
-    width: 82px;
-    height: 82px;
-    position: relative;
-
-    .image-style {
-      width: 82px;
-      height: 82px;
-      border: 1px solid #e4e7ed;
-      background-color: #f3f3f3;
-    }
-
-    .folder-style {
-      width: 82px;
-      height: 82px;
-    }
-
-    .image-border {
-      border: 1px solid #5874d8;
-    }
-
-    .image-hand {
-      cursor: pointer; //鼠标变手
-    }
-
-    .image-choice {
-      position: absolute;
-      width: 28px;
-      height: 28px;
-      top: 54px;
-      right: 0;
-    }
-
-    .folder-cancel {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      top: 0;
-      right: -6px;
-    }
-
-    .image-cancel {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      top: -8px;
-      right: -8px;
-    }
-  }
-
-  .image-box {
-    margin-top: 5px;
-
-    .image-input {
-      width: 82px;
-      vertical-align: bottom;
-    }
-  }
-}
-
-.item {
-  margin-top: 10px;
-  margin-right: 40px;
-}
-</style>
-
-<style scoped>
-.image-box >>> .el-input--mini .el-input__inner {
-  height: 19px !important;
-  line-height: 19px !important;
-}
-
-.image-box >>> .el-input__inner {
-  padding: 0 !important;
-  border: 1px solid #ffffff !important;
-}
-
-.image-box >>> .el-input__inner:focus {
-  border-color: #fe714b !important;
-}
-
-.image-box >>> .el-input__inner:hover {
-  border-color: #5874d8 !important;
-}
-
-.image-box >>> input {
-  text-align: center !important;
-}
-
-.minor-panel >>> .el-scrollbar__wrap {
-  overflow-x: hidden;
-}
-
-.dialogTop >>> .el-dialog {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.material >>> .el-tabs__item {
-  height: 66px;
-  line-height: 66px;
-}
-
-.minor-dialogTop >>> .el-dialog {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-</style>