上传组件修改

luobisheng

2022-11-30 d69b46a92af5473813d95fe4786464cece69e5a2

上传组件修改

 src/components/myUpload/index.vue

@@ -2,26 +2,21 @@
  <div class="my-upload">
    <div v-if="pictureList.length > 0" class="image-box">
      <div v-for="image in pictureList" class="image-box-item">
        <i
          v-if="isShowUpload"
          @click="handleDeletePicture(image)"
          class="el-icon-delete image-delete-icon"
        ></i>
        <span v-if="isShowUpload" @click="handleDeletePicture(image)" class="image-delete-icon el-icon-delete"></span>
        <el-image :key="image" class="image-content" :src="image"></el-image>
      </div>
    </div>
    <el-upload
      v-if="isShowUpload"
      v-if="isShowUpload && pictureList.length < limit"
      :file-list="fileList"
      action="/sccg/file/medias"
      action=""
      :multiple="multiple"
      :show-file-list="flag"
      :before-upload="beforeUpload"
      :limit="limit"
      :on-success="handleSuccess"
      :on-error="handleError"
      :list-type="listType"
      :headers="getToken()"
      :auto-upload="true"
      :http-request="handleUpload"
      style="margin-left: 14px;"
    >
      <div class="upload-btn">
        <i class="el-icon-plus"></i>
@@ -31,6 +26,8 @@
  </div>
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";

export default {
  data() {
    return {
@@ -44,43 +41,48 @@
      limit: 4,
      // 文件列表类型
      listType: "picture-card",
      loading: false
    };
  },
  methods: {
    // 上传之前回调
    beforeUpload(rawFile) {
    // 验证上传文件
    validateFile(file) {
      if (
        rawFile.type !== "image/png" &&
        rawFile.type !== "image/svg+xml" &&
        rawFile.type !== "image/jpg" &&
        rawFile.type !== "image/jpeg"
          file.type !== "image/png" &&
          file.type !== "image/svg+xml" &&
          file.type !== "image/jpg" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 5) {
        this.loading = false;
        return  false;
      }

      if (file.size / 1024 / 1024 > 5) {
        this.$message.error("上传图片不能超过 5MB!");
        this.loading = false;
        return false;
      }
      return true;
    },
    // 上传成功回调
    handleSuccess(res, file, filelist) {
      if (res.data.url1) {
        this.$emit("setPictureUrl", { url: res.data.url1 });
      } else if (res.data.url2) {
        this.$emit("setPictureUrl", { url: res.data.url2 });
      } else if (res.data.url3) {
        this.$emit("setPictureUrl", { url: res.data.url3 });
      } else {
        this.$emit("setPictureUrl", { url: res.data.url4 });

    handleUpload(data) {
      this.loading = true;
      const { file } = data;
      const validate = this.validateFile(file);
      if (!validate) {
        return;
      }
    },
    // 上传失败回调
    handleError(err, file, fileList) {
      this.$message({
        type: "error",
        message: err,
      });
      const formData = new FormData();
      formData.append('file', file);
      imageManagement.importImage(formData)
          .then(({ url1, url2, url3, url4 }) => {
            const url = url1 ?? url2 ?? url3 ?? url4;
            this.$emit('setPictureUrl', { url: url });
          })
          .catch(err => {
            this.$message.error(err);
          })
    },
    // 获取token
    getToken() {
@@ -140,27 +142,35 @@
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    margin: 0 10px;

    .image-content {
      width: 100px;
      height: 100px;
    }

    .image-delete-icon {
      position: relative;
      bottom: calc(100% - 50px);
      left: calc(100% - 50px);
      position: absolute;
      top: 45px;
      left: 45px;
      opacity: 0;
    }

    .image-box-item {
      padding: 0px 10px;
      position: sticky;
    }

    .image-box-item:hover {
      color: #ffffff;
      opacity: 0.5;
      .image-content {
        box-shadow: #ffffff;
        opacity: 0.5;
      }

      .image-delete-icon {
        color: red;
        font-size: 14px;
        z-index: 2;
        opacity: 1;
        cursor: pointer;
      }
    }
  }

 src/views/operate/fivepack/threepack/components/aside/index.vue

@@ -26,11 +26,16 @@
    },

    created() {
      department.getDepartmentList()
          .then(res => {
            this.areaData = res;
          })
          .catch(err => this.$message.error(err))
      if (sessionStorage.getItem('area')) {
        this.areaData = JSON.parse(sessionStorage.getItem('area'));
      } else {
        department.getDepartmentList()
            .then(res => {
              this.areaData = res;
              sessionStorage.setItem('area', JSON.stringify(this.areaData));
            })
            .catch(err => this.$message.error(err))
      }
    },

  methods: {
@@ -43,7 +48,9 @@
      return data.regionName.indexOf(value) !== -1;
    },
    nodeClick(data, node, props) {
      this.$emit('selectedDepartment', data);
      if (node.level > 1) {
        this.$emit('selectedDepartment', data);
      }
    }
  }
};

 src/views/operate/management/myIndex/components/closure/index.vue

@@ -308,18 +308,6 @@
        }
      });
    },
    // 获取当前用户登录信息
    getUserLoginInfo() {
      // 获取登录名;
      const username = sessionStorage.getItem("name");
      this.$axios({
        method: "get",
        url: "sccg/admin/info",
        data: {
          name: "username",
        },
      }).then((res) => {});
    },
  },
  props: ["info", "closeDialog"],
};

 src/views/operate/rectification/surveyList/index.vue

@@ -236,25 +236,9 @@
        .then((res) => {
        });
    },
    // // 当前页改变触发事件
    // changeCurrentPage(page) {
    //     this.currentPage = page;
    //     this.getUserList();
    // },
    // // 上一页点击事件
    // handlePrev(page) {
    //     this.currentPage = page;
    //     this.getUserList();
    // },
    // // 下一页点击事件
    // handleNext(page) {
    //     this.currentPage = page;
    //     this.getUserList();
    // },
  },
};
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
  header {

 src/views/operate/rectification/taskList/index.vue

@@ -27,7 +27,6 @@
                </div>
            </div>
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
@@ -62,13 +61,6 @@
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <div class="pagination">
                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
                        @next-click="handleNext">
                    </el-pagination>
                </div> -->
            </div>
        </main>
        <footer>
@@ -145,12 +137,11 @@
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
            if ((rowIndex + 1) % 2 === 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
        // 打开新增界面
        handleAdd() {
@@ -173,7 +164,6 @@
        },
        // 删除第三方接口
        handleDelete({ id }) {
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
                params: {
                    id
@@ -181,25 +171,9 @@
            }).then(res => {
            })
        }
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 上一页点击事件
        // handlePrev(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 下一页点击事件
        // handleNext(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
    header {

 src/views/operate/viewEvent/components/illExamine/index.vue

@@ -158,7 +158,6 @@
        },
        // 提交审核意见
        handleSubmit(mystatus) {
            // this.getUserLoginInfo();
            const { baseCase } = this;
            this.$refs.viewForm.validate((valid) => {
                if (valid) {

 src/views/operate/viewEvent/index.vue

@@ -53,7 +53,7 @@
                    :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }"
                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
                    @selection-change="tableChange">
                    <el-table-column categories="selection" min-width="5">
                    <el-table-column type="selection" min-width="5">
                    </el-table-column>
                    <el-table-column prop="code" label="事件编号" min-width="18">
                        <template slot-scope="scope">

 src/views/systemSetting/device/bayonet/index.vue

@@ -4,19 +4,7 @@
      <div class="header-content">
        <div class="search">
          <span style="padding-right: 20px">筛选条件:</span>
          <el-select
            v-model="context"
            placeholder="请选择"
            @change="getBayonetListData"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="context" placeholder="请输入" @change="getBayonetListData"></el-input>
        </div>
      </div>
    </header>

 src/views/systemSetting/device/point/index.vue

@@ -189,7 +189,6 @@
      totalNum: 10,
      pageSize: 10,
      videoData: [],
      value: "",
      searchData: null,
    };
  },
@@ -214,17 +213,11 @@
        .catch((err) => this.$message.error(err));
    },
    selectedDepartment(data) {
   
      if (!data.children) {
        this.searchData = data;
        this.getVideoPointList(data);
      } else {
        data.parentId = data.id;
        data.id = null;
        this.searchData = data;
        this.getVideoPointList(data);
      }
      this.currentPage = 1;
      data.parentId = data.id;
      data.id = null;
      this.searchData = data;
      this.getVideoPointList(data);
    },
    current_change(e) {
      this.currentPage = e;

 src/views/video/index.vue

@@ -1,7 +1,7 @@
<template>
  <el-container style="height: 100%;">
    <el-aside heigth="100%" width="200px">
      <department-aside />
      <department-aside @selectedDepartment="selectedDepartment" />
    </el-aside>

    <el-container>
@@ -77,9 +77,7 @@
          .catch(err => this.$message.error(err))
    },
    selectedDepartment(data) {
      if (!data.children) {
        this.getVideoPointList(data);
      }
      this.getVideoPointList(data);
    },
    currentPageChange(page) {
      this.currentPage = page;