|
|
@@ -3,54 +3,95 @@
|
|
|
<div class="info-outer">
|
|
|
<div class="info">底层接入系统</div>
|
|
|
</div>
|
|
|
- <div class="center">
|
|
|
- <el-upload action="#" list-type="picture-card" :auto-upload="false">
|
|
|
- <i slot="default" class="el-icon-plus"></i>
|
|
|
- <div slot="file" slot-scope="{ file }">
|
|
|
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span
|
|
|
- class="el-upload-list__item-preview"
|
|
|
- @click="handlePictureCardPreview(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-zoom-in"></i>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- v-if="!disabled"
|
|
|
- class="el-upload-list__item-delete"
|
|
|
- @click="handleDownload(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-download"></i>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- v-if="!disabled"
|
|
|
- class="el-upload-list__item-delete"
|
|
|
- @click="handleRemove(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
- </el-dialog>
|
|
|
+ <div
|
|
|
+ class="center"
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
+ >
|
|
|
+ <div class="img-box" v-for="item in imgArr" :key="item.id">
|
|
|
+ <img :src="item.picture" width="300" height="180" />
|
|
|
+ </div>
|
|
|
+ <div class="img-box">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :limit="1"
|
|
|
+ action=""
|
|
|
+ :http-request="uploadSectionFile"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ list-type="picture"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 仅支持上传单张jpg或者png格式的图片，且不超过500kb
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getUnderlyingSystem, addUnderlyingSystem } from "@/api/data/basicInfo";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ fileList: [],
|
|
|
dialogImageUrl: "",
|
|
|
dialogVisible: false,
|
|
|
disabled: false,
|
|
|
+ imgArr: [],
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.getUnderlyingSystemData();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- handleRemove(file) {
|
|
|
- console.log(file);
|
|
|
+ getUnderlyingSystemData() {
|
|
|
+ this.loading = true;
|
|
|
+ getUnderlyingSystem()
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code === 0 && res.data.data.length > 0) {
|
|
|
+ this.loading = false;
|
|
|
+ this.imgArr = [];
|
|
|
+ res.data.data.forEach((v) => {
|
|
|
+ this.imgArr.push({
|
|
|
+ id: v.id,
|
|
|
+ picture: v.picture,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(response, file, fileList) {
|
|
|
+ // console.log(response);
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ // 上传图片成功后 -- 重新刷新当前页面
|
|
|
+ uploadSectionFile(params) {
|
|
|
+ let picture = params.file;
|
|
|
+ addUnderlyingSystem(picture).then((res) => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.getUnderlyingSystemData();
|
|
|
+ this.fileList = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ // console.log(file, fileList);
|
|
|
+ // let removeUrl = file.respone.data.url;
|
|
|
+ // this.allImageUrl = this.allImageUrl.filter((item) => item != removeUrl);
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ // console.log(file);
|
|
|
},
|
|
|
handlePictureCardPreview(file) {
|
|
|
this.dialogImageUrl = file.url;
|
|
|
@@ -83,12 +124,25 @@ export default {
|
|
|
width: 98%;
|
|
|
margin: 0 auto;
|
|
|
height: calc(100% - 80px);
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 300px;
|
|
|
+ height: 180px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid rgb(128, 128, 128, 0.5);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
/deep/.el-upload--picture-card {
|
|
|
width: 300px;
|
|
|
height: 200px;
|
|
|
border: 1px solid #c0ccda;
|
|
|
- // margin-right: 1000px;
|
|
|
- // margin-top: 20px;
|
|
|
+ // margin-right: 1000px;
|
|
|
+ // margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
/deep/.el-upload--picture-card i {
|
Bella