|
|
@@ -1,207 +0,0 @@
|
|
|
-<template>
|
|
|
- <tm-poup v-model="show" position="bottom" height="auto" @change="fnClose">
|
|
|
- <view class="poup-head pa-24 text-align-center text-weight-b ">{{ title }}</view>
|
|
|
- <view class="poup-body pa-24 pt-0 pb-0">
|
|
|
- <view v-if="loading != 'success'" class="loading-wrap flex flex-center">
|
|
|
- <view v-if="loading == 'loading'" class="loading">加载中...</view>
|
|
|
- <view v-else class="error" @click="fnGetData()">加载失败,点击刷新!</view>
|
|
|
- </view>
|
|
|
- <block v-else>
|
|
|
- <view v-if="total == 0" class="empty">无附件</view>
|
|
|
- <scroll-view v-else class="poup-content" :enable-flex="true" :scroll-y="true" @touchmove.stop>
|
|
|
- <view class="card-content">
|
|
|
- <view class="card pa-12" v-for="(file, index) in dataList" :key="index" @click="fnOnSelect(file, index)">
|
|
|
- <view class="card-inner round-3" :class="{ 'is-select': selectIndex == index }">
|
|
|
- <cache-image v-if="file.isImage" class="cover" height="160rpx" :url="file.thumbPath" :fileMd5="file.thumbPath" mode="aspectFill"></cache-image>
|
|
|
- <view v-else class="cover flex pl-46 pr-46 flex-center bg-gradient-blue-grey-accent text-align-center text-size-m">{{ file.mediaType }}</view>
|
|
|
-
|
|
|
- <view class="name text-overflow text-size-m pa-12">{{ file.name }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- <view class="poup-foot pa-30 pb-12 pt-0">
|
|
|
- <!-- 分页 -->
|
|
|
- <view v-if="total > queryParams.size" class="mt-36 pl-24 pr-24">
|
|
|
- <tm-pagination color="bg-gradient-blue-accent" :page.sync="queryParams.page" :total="total" :totalVisible="5" @change="fnGetPagingData"></tm-pagination>
|
|
|
- </view>
|
|
|
- <view class=" flex flex-center mt-12">
|
|
|
- <tm-button size="m" theme="bg-gradient-blue-accent" @click="fnSava()">确定选用</tm-button>
|
|
|
- <tm-button size="m" theme="bg-gradient-orange-accent" @click="fnUpload()">上传</tm-button>
|
|
|
- <tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="fnClose(false)">关 闭</tm-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tm-poup>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getAdminAccessToken } from '@/utils/auth.js';
|
|
|
-
|
|
|
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
|
|
-import tmPagination from '@/tm-vuetify/components/tm-pagination/tm-pagination.vue';
|
|
|
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
|
|
-export default {
|
|
|
- name: 'attachment-select',
|
|
|
- components: { tmPoup, tmPagination, tmButton },
|
|
|
- props: {
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '附件列表'
|
|
|
- },
|
|
|
- selectType: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- show: true,
|
|
|
- loading: 'loading',
|
|
|
- total: 0,
|
|
|
- queryParams: {
|
|
|
- size: 6,
|
|
|
- page: 1
|
|
|
- },
|
|
|
- dataList: [],
|
|
|
- select: null,
|
|
|
- selectIndex: -1
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.fnGetData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- fnGetData() {
|
|
|
- this.queryParams.page = 1;
|
|
|
- this.fnGetPagingData(1);
|
|
|
- },
|
|
|
- fnGetPagingData(page) {
|
|
|
- this.loading = 'loading';
|
|
|
- const _params = {
|
|
|
- ...this.queryParams
|
|
|
- };
|
|
|
- _params.page = page - 1;
|
|
|
- this.$httpApi.admin
|
|
|
- .getAttachmentsByPage(_params)
|
|
|
- .then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.total = res.data.total;
|
|
|
- this.dataList = res.data.content.map(file => {
|
|
|
- if (this.$utils.fnCheckIsFileType('image', file) && file.size / 1024 / 1024 > 2) {
|
|
|
- file.isImage = false;
|
|
|
- file.desc = '图片过大无法显示缩略图';
|
|
|
- } else {
|
|
|
- file.isImage = this.$utils.fnCheckIsFileType('image', file);
|
|
|
- }
|
|
|
- file.thumbPath = this.$utils.checkThumbnailUrl(file.thumbPath);
|
|
|
- return file;
|
|
|
- });
|
|
|
- this.loading = 'success';
|
|
|
- } else {
|
|
|
- uni.$tm.toast('加载失败,请重试!');
|
|
|
- this.loading = 'error';
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.error(err);
|
|
|
- uni.$tm.toast('加载失败,请重试!');
|
|
|
- this.loading = 'error';
|
|
|
- });
|
|
|
- },
|
|
|
- fnOnSelect(file, index) {
|
|
|
- this.select = file;
|
|
|
- this.selectIndex = index;
|
|
|
- },
|
|
|
- fnSava() {
|
|
|
- if (this.selectType) {
|
|
|
- if (this.$utils.fnCheckIsFileType(this.selectType, this.select)) {
|
|
|
- this.$emit('on-select', this.select);
|
|
|
- } else {
|
|
|
- uni.$tm.toast('该附件类型不符合!');
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$emit('on-select', this.select);
|
|
|
- }
|
|
|
- },
|
|
|
- fnClose(e) {
|
|
|
- if (!e) {
|
|
|
- this.$emit('on-close');
|
|
|
- }
|
|
|
- },
|
|
|
- fnUpload() {
|
|
|
- uni.chooseImage({
|
|
|
- count: 1,
|
|
|
- success: res => {
|
|
|
- uni.uploadFile({
|
|
|
- filePath: res.tempFilePaths[0],
|
|
|
- header: {
|
|
|
- 'admin-authorization': getAdminAccessToken()
|
|
|
- },
|
|
|
- url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
|
|
- name: 'file',
|
|
|
- success: upladRes => {
|
|
|
- const _uploadRes = JSON.parse(upladRes.data);
|
|
|
- if (_uploadRes.status == 200) {
|
|
|
- uni.$tm.toast('上传成功!');
|
|
|
- this.fnGetData(1);
|
|
|
- } else {
|
|
|
- uni.$tm.toast(_uploadRes.message);
|
|
|
- }
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- uni.$tm.toast(err.message);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.poup-head {
|
|
|
-}
|
|
|
-.poup-body {
|
|
|
- height: 50vh;
|
|
|
-}
|
|
|
-.loading-wrap {
|
|
|
- height: 50vh;
|
|
|
- background-color: #fafafa;
|
|
|
-}
|
|
|
-.poup-content {
|
|
|
- height: inherit;
|
|
|
- box-sizing: border-box;
|
|
|
- .card-content {
|
|
|
- height: inherit;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-}
|
|
|
-.card {
|
|
|
- width: 50%;
|
|
|
- box-sizing: border-box;
|
|
|
- &-inner {
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
|
- border: 4rpx solid transparent;
|
|
|
- &.is-select {
|
|
|
- border-color: rgb(13, 141, 242);
|
|
|
- }
|
|
|
- }
|
|
|
- .cover {
|
|
|
- width: 100%;
|
|
|
- height: 160rpx;
|
|
|
- flex-wrap: wrap;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .name {
|
|
|
- color: #303133;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|