Skip to content

V
vue-quasar-admin-dev
Commit a9f42f00 by 周海峰
Options

no message

parent 5b4e478e
正在显示 包含 103 行增加 和 24 行删除
src/pages/platformapplications/EditApplication.vue
...@@ -46,19 +46,40 @@ ...@@ -46,19 +46,40 @@
</div> </div>
</div> </div>
<q-field> <q-field>
<q-input v-model="localTemp.img" float-label="图标路径" disable /> <div v-if="localTemp.img" class="image-preview-wrapper">
<q-uploader <img :src="localTemp.img" style="width:80px; height:80px; border-radius:6px; border:1px solid #eee; object-fit:cover;" @error="onImgError" @load="onImgLoad" />
float-label="上传图标" <div class="q-mt-sm">
ref="attachmentUploader" <q-btn dense flat color="negative" icon="delete" label="删除" @click="removeImage" />
name="file" <q-btn dense flat color="primary" icon="file_upload" label="重新上传" @click="openUploader" />
@uploaded="attachmentUploaded" </div>
:headers="{'Accept': 'application/json;charset=utf-8'}" <!-- hidden uploader used for re-upload -->
:url="uploadurl" <q-uploader ref="attachmentUploaderHidden"
auto-expand style="display:none"
clearable name="file"
hide-upload-button @uploaded="attachmentUploaded"
@add="$refs['attachmentUploader'].upload()" :headers="{'Accept': 'application/json;charset=utf-8'}"
></q-uploader> :url="uploadurl"
accept="image/*"
:multiple="false"
@add="$refs['attachmentUploaderHidden'].upload()"
></q-uploader>
</div>
<div v-else>
<q-uploader
float-label="上传图标"
ref="attachmentUploader"
name="file"
@uploaded="attachmentUploaded"
:headers="{'Accept': 'application/json;charset=utf-8'}"
:url="uploadurl"
auto-expand
clearable
hide-upload-button
@add="$refs['attachmentUploader'].upload()"
accept="image/*"
:multiple="false"
></q-uploader>
</div>
</q-field> </q-field>
</q-card-section> </q-card-section>
</q-card> </q-card>
...@@ -119,6 +140,7 @@ export default { ...@@ -119,6 +140,7 @@ export default {
localTemp: JSON.parse(JSON.stringify(this.temp || {})), localTemp: JSON.parse(JSON.stringify(this.temp || {})),
fileCount: 0 fileCount: 0
,applicationsGroupOptions: [] ,applicationsGroupOptions: []
,imageLoadError: false
} }
}, },
watch: { watch: {
...@@ -130,6 +152,9 @@ export default { ...@@ -130,6 +152,9 @@ export default {
if (this.localTemp.appEnable === undefined || this.localTemp.appEnable === null) { if (this.localTemp.appEnable === undefined || this.localTemp.appEnable === null) {
this.localTemp.appEnable = '0'; this.localTemp.appEnable = '0';
} }
if (this.localTemp.img === undefined) {
this.$set(this.localTemp, 'img', '');
}
} }
}, },
visible(v) { visible(v) {
...@@ -141,6 +166,9 @@ export default { ...@@ -141,6 +166,9 @@ export default {
if (this.localTemp.appEnable === undefined || this.localTemp.appEnable === null) { if (this.localTemp.appEnable === undefined || this.localTemp.appEnable === null) {
this.localTemp.appEnable = '0'; this.localTemp.appEnable = '0';
} }
if (this.localTemp.img === undefined) {
this.$set(this.localTemp, 'img', '');
}
} }
} }
}, },
...@@ -169,10 +197,21 @@ export default { ...@@ -169,10 +197,21 @@ export default {
getsecret() { getsecret() {
this.localTemp.secret = window.btoa(this.localTemp.appid || ''); this.localTemp.secret = window.btoa(this.localTemp.appid || '');
}, },
onImgError() {
this.imageLoadError = true;
},
onImgLoad() {
this.imageLoadError = false;
},
attachmentUploaded(file, xhr) { attachmentUploaded(file, xhr) {
let res = JSON.parse(xhr.response).path; let parsed;
this.fileCount++; try {
if (res != "") { parsed = JSON.parse(xhr.response);
} catch (e) {
parsed = null;
}
const res = parsed ? parsed.path : null;
if (res && res !== "") {
this.$q.notify({ this.$q.notify({
message: "上传成功", message: "上传成功",
type: "positive", type: "positive",
...@@ -180,14 +219,22 @@ export default { ...@@ -180,14 +219,22 @@ export default {
timeout: 1000, timeout: 1000,
position: "top-right" position: "top-right"
}); });
this.localTemp.img = res; // 使用 $set 保证 Vue2 对新增属性的响应式
if (this.fileCount > 1) { try {
var cNode = document.getElementsByClassName("q-uploader-files")[0]; this.$set(this.localTemp, 'img', res);
cNode.removeChild(cNode.childNodes[0]); } catch (e) {
this.localTemp.img = res;
} }
// 清理 uploader DOM 列表，兼容 Quasar 0.15
try {
var cNode = document.getElementsByClassName("q-uploader-files")[0];
if (cNode && cNode.childNodes.length > 0) {
cNode.removeChild(cNode.childNodes[0]);
}
} catch (e) {}
} else { } else {
this.$q.notify({ this.$q.notify({
message: res.msg, message: (parsed && parsed.msg) ? parsed.msg : "上传失败",
type: "negative", type: "negative",
icon: "error_outline", icon: "error_outline",
timeout: 3000, timeout: 3000,
...@@ -228,6 +275,26 @@ export default { ...@@ -228,6 +275,26 @@ export default {
} catch (e) { } catch (e) {
// cancelled or error // cancelled or error
} }
},
removeImage() {
try {
this.$set(this.localTemp, 'img', '');
} catch (e) {
this.localTemp.img = '';
}
try {
var cNode = document.getElementsByClassName("q-uploader-files")[0];
if (cNode) {
while (cNode.firstChild) cNode.removeChild(cNode.firstChild);
}
} catch (e) {}
},
openUploader() {
const ref = this.$refs.attachmentUploaderHidden || this.$refs.attachmentUploader;
if (ref && ref.$el) {
const input = ref.$el.querySelector('input[type="file"]');
if (input) input.click();
}
} }
} }
} }
......
src/pages/platformapplications/platformapplications.vue
...@@ -6,8 +6,18 @@ ...@@ -6,8 +6,18 @@
<q-icon slot="right" name="edit" /> <q-icon slot="right" name="edit" />
</q-card-title> --> </q-card-title> -->
<q-card-main style="height:80%"> <q-card-main style="height:80%">
<q-table ref="table" color="primary" :data="serverData" :columns="columns" separator="cell" row-key="id" <q-table
:pagination.sync="serverPagination" @request="request" :loading="loading" :rows-per-page-options="[5,10,20,30,40,50,60,200,500]" :rows-per-page-label="$t('Rows per page')" :no-data-label="$t('No data')"> ref="table"
color="primary"
:data="serverData"
:columns="columns"
separator="cell"
row-key="id"
:pagination.sync="serverPagination"
@request="request" :loading="loading"
:rows-per-page-options="[5,10,20,30,40,50,60,200,500]"
:rows-per-page-label="$t('Rows per page')"
:no-data-label="$t('No data')">
<template slot="top-left" slot-scope="props"> <template slot="top-left" slot-scope="props">
<q-input v-model="filter.title" type="text" prefix="名称：" />&nbsp;&nbsp; <q-input v-model="filter.title" type="text" prefix="名称：" />&nbsp;&nbsp;
<!-- <q-input v-model="filter.name" type="text" :prefix="$t('Role code') + '：'" />&nbsp;&nbsp; --> <!-- <q-input v-model="filter.name" type="text" :prefix="$t('Role code') + '：'" />&nbsp;&nbsp; -->
...@@ -99,7 +109,9 @@ ...@@ -99,7 +109,9 @@
serverPagination: { serverPagination: {
page: 1, page: 1,
rowsNumber: 0, // specifying this determines pagination is server-side rowsNumber: 0, // specifying this determines pagination is server-side
rowsPerPage: 10 // current rows per page being displayed rowsPerPage: 10, // current rows per page being displayed
sortBy: 'num',
descending: false,
}, },
columns: [ columns: [
{ {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论