留言图片显示、分页显示修改

GuLiMmo

2023-12-19 d772131fb8d75e2d57db59e6bd23ec469c7f9457

留言图片显示、分页显示修改

 src/option/leave/leaveWords.js

@@ -7,12 +7,11 @@
  border: true,
  index: true,
  viewBtn: false,
  deleteBtn: false,
  editBtn: false,
  addBtn: false,
  selection: true,
  dialogClickModal: false,
  menu: false,
  // menu: false,
  column: [
    {
      label: "主键",
@@ -38,7 +37,8 @@
      type: "input",
    },
    {
      label: "留言人职位/回复人职位",
      // 留言人职位/回复人
      label: "职位",
      prop: "userPost",
      type: "input",
    },
@@ -49,7 +49,7 @@
      search: true
    },
    {
      label: "图片数组",
      label: "图片",
      prop: "imageUrls",
      type: "input",
      slot: true

 src/store/modules/user.js

@@ -194,7 +194,6 @@
          const data = res.data.data;
          let menu = deepClone(data);
          menu.forEach(ele => formatPath(ele, true));
          console.log(menu);
          commit('SET_MENU', menu);
          commit('SET_MENU_ALL', menu);
          dispatch('GetButtons');

 src/views/evaluate/evaluateResult.vue

@@ -1,5 +1,6 @@
<template>

  <basic-container>

    <avue-tabs :option="taskTypeList" @change="tabChange"></avue-tabs>

    <avue-crud :option="option" v-model:search="search" v-model:page="page" v-model="form" :table-loading="loading"

      :data="data" :permission="permissionList" :before-open="beforeOpen" ref="crud" @row-update="rowUpdate"

      @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"

@@ -41,7 +42,21 @@
      },

      selectionList: [],

      option: option,

      data: []

      data: [],

      // 考核结果参数

      defaultTaskType: 0,

      taskTypeList: {

        column: [

          {

            label: '个人评优',

            prop: 0,

          },

          {

            label: '部门评优',

            prop: 1,

          },

        ],

      },

    };

  },

  computed: {

@@ -190,13 +205,17 @@
      };



      getList(page.currentPage, page.pageSize, values).then(res => {

        console.log(res);

        const data = res.data.data;

        this.page.total = data.total;

        this.data = data.records;

        this.loading = false;

        this.selectionClear();

      });

    }

    },

    tabChange(value) {

      this.defaultTaskType = value.prop;

    },

  }

};

</script>


 src/views/evaluate/evaluateTask.vue

@@ -105,7 +105,6 @@
        };
        // 更改option
        !n ? (this.option = option) : (this.option = sectionOption) 
        console.log(this.option);
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },

 src/views/leave/leaveWords.vue

@@ -12,9 +12,10 @@
        </el-button>
      </template>
      <template #imageUrls="{ row }">
        <div v-if="row.imageUrls.length > 0 || !!row.imageUrls">
        <div v-if="row.imageUrls.length > 0 || !!row.imageUrls" class="image-box">
          <el-image style="width: 70px;height: 70px;" :src="row.imageUrls[1]" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="row.imageUrls" :initial-index="4" fit="cover"></el-image>
            :min-scale="0.2" :infinite="false" :preview-src-list="row.imageUrls" :initial-index="4" fit="cover"></el-image>
          <div class="image-num">+{{ row.imageUrls.length }}</div>
        </div>
        <div v-else>暂无图片</div>
      </template>
@@ -198,16 +199,45 @@
      };

      getList(page.currentPage, page.pageSize, values).then(res => {
        this.data = res.data.data;
        const data = res.data.data;
        data.records.forEach(item => { !!item.imageUrls && (item.imageUrls = item.imageUrls.split(',')) })
        this.data = data.records;
        this.page.total = data.total;
        this.loading = false;
        getTree().then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
        // getTree().then(res => {
        //   const column = this.findObject(this.option.column, "parentId");
        //   column.dicData = res.data.data;
        // });
      });
    }
  }
};
</script>

<style></style>
<style lang="scss" scoped>
:deep() {
  .el-table__cell {
    position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
  }
}

.image-box {
  width: 70px;
  height: 70px;
  position: relative;

  .image-num {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: .4);
    pointer-events: none;
    color: #fff;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
  }
}
</style>