kz-ui-base 1.0.2 → 1.0.4

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

@@ -1,890 +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 lang="ts">
-import {
-  Component,
-  Prop,
-  Vue,
-  Watch,
-  Emit,
-  Mixins,
-} from "vue-property-decorator";
-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";
-
-@Component({
-  components: {
-    draggable,
-  },
-})
-export default class material extends Vue {
-  // model: {
-  //     prop: "list",
-  //     event: "change",
-  //   }
-  @Prop({
-    default: () => {
-      return [];
-    },
-  })
-  readonly list: {}[];
-  @Prop({ default: false }) readonly visible!: boolean;
-  @Prop({ default: 1 }) readonly max!: number;
-  @Prop({ default: false }) readonly clear!: boolean;
-  //活跃单元
-  public activeName = "first";
-  //list接收转换参数
-  public imageList = [];
-  // 上传参数
-  public 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,
-  };
-  public search = {
-    searchVisible: true,
-    hiddenVisible: false,
-  };
-  public materialFolder = {
-    children: [],
-    materialFolder: [],
-    materialList: [],
-  };
-  public choiceList = [];
-  public breadcrumbList = [];
-  public form = {
-    folderId: 0,
-    folderName: "",
-  };
-  public currentItem = { imageChoice: {} };
-
-  mounted() {
-    this.init();
-  }
-
-  @Watch("list")
-  watchlist(val, oldVal) {
-    this.init();
-  }
-
-  public getImageIcon = getImageIcon;
-  /** 初始化方法 */
-  public init() {
-    this.creatChoiceList();
-    this.getList();
-  }
-  public 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,
-        });
-      }
-    }
-  }
-  /** 查询素材信息列表 */
-  public 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;
-    });
-  }
-  /** 新建文件夹 */
-  public handleAddFolder() {
-    this.upload.isUploading = true;
-    addFolder(this.form).then((response) => {
-      (this as any).msgSuccess("新增成功");
-      this.getList();
-      this.upload.isUploading = false;
-    });
-  }
-  /** 搜索内容变动进行查询 */
-  public searchChange() {
-    this.search.searchVisible = this.form.folderName === "";
-    this.getList();
-  }
-  /** true 搜索/false 重置 */
-  public searchIconClick() {
-    if (this.search.searchVisible) {
-      this.getList();
-    } else {
-      this.form.folderName = null;
-      this.getList();
-      this.search.searchVisible = true;
-    }
-  }
-  public breadcrumbJump(item, index) {
-    this.form.folderName = null;
-    this.form.folderId = item.folderId;
-    this.getList();
-  }
-  public 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;
-      }
-    }
-  }
-  public 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图片 */
-  public updateMaterialNick(type, item, index) {
-    if (type === 0) {
-      updateFolder(item).then((response) => {
-        (this as any).msgSuccess("修改成功");
-        this.getList();
-      });
-    } else if (type === 1) {
-      updateMaterial(item).then((response) => {
-        (this as any).msgSuccess("修改成功");
-        this.getList();
-      });
-    }
-  }
-  /** type 0文件夹 1图片 */
-  public imageDelete(type, item, index) {
-    (this as any)
-      .$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 as any).$message({
-          type: "success",
-          message: "删除成功!",
-        });
-      })
-      .catch(() => {
-        (this as any).$message({
-          type: "info",
-          message: "已取消删除",
-        });
-      });
-  }
-  /** 上传文件之前 */
-  public beforeUpload(file) {
-    const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
-    if (this.upload.whiteList.indexOf(fileSuffix) === -1) {
-      (this as any).$message({
-        message: "您上传的文件暂不支持，请联系管理员",
-        type: "warning",
-      });
-      return false;
-    }
-    const isLt2M = file.size / 1024 / 1024 < 100;
-    if (!isLt2M) {
-      (this as any).$message({
-        message: "上传文件大小不能超过 100MB",
-        type: "warning",
-      });
-      return false;
-    }
-    return false;
-  }
-  /** 文件上传中处理 */
-  public handleFileUploadProgress(event, file, fileList) {
-    this.upload.isUploading = true;
-  }
-  /** 文件上传成功处理 */
-  public handleFileSuccess(response, file, fileList) {
-    this.upload.fileList = [];
-    this.upload.isUploading = false;
-    if (response.code != 200) {
-      (this as any).$message.error("上传失败：" + response.msg);
-    } else {
-      (this as any).$message({
-        message: "上传成功！",
-        type: "success",
-      });
-    }
-    this.getList();
-  }
-  /** 文件上传失败处理 */
-  public handleFileError(err, file, fileList) {
-    this.upload.fileList = [];
-    this.upload.isUploading = false;
-    (this as any).$message.error("上传失败：" + err);
-  }
-  /** 确定 */
-  public 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);
-  }
-  /** 关闭 */
-  public 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>