项目编辑、上传图片

This commit is contained in:
xielue 2022-12-14 16:59:07 +08:00
parent f7399f0c6a
commit 18f82ac984
8 changed files with 134 additions and 77 deletions

View File

@ -1,4 +1,4 @@
VUE_APP_API_BASE_URL=http://192.168.31.166:46000 VUE_APP_API_BASE_URL=http://192.168.31.166:46000
VUE_APP_USER_MODEL2=AdminUser VUE_APP_USER_MODEL=AdminUser
VUE_APP_USER_MODEL=BaseAdmin VUE_APP_USER_MODEL2=BaseAdmin

View File

@ -3,6 +3,9 @@
export default { export default {
uploadDefaultImg: "http://zjdaomiimgtest.oss-cn-hangzhou.aliyuncs.com/2022/16709016422295584.png",
defaults: { defaults: {
gridOptions: { gridOptions: {

View File

@ -23,10 +23,7 @@
<template #logo="{}"> <template #logo="{}">
<div class="imagePanel"> <div class="imagePanel">
<img :src="formOptions.data.logo || uploadDefaultImg" @click.stop="selectFile()"> <img :src="formOptions.data.logo || uploadDefaultImg" @click.stop="selectFile()">
</div> </div>
</template> </template>
</vxe-form> </vxe-form>
@ -85,7 +82,7 @@ export default {
config_list: [], config_list: [],
currentBeid: 0, currentBeid: 0,
uploadDefaultImg: "http://zjdaomiimgtest.oss-cn-hangzhou.aliyuncs.com/2022/16709016422295584.png", uploadDefaultImg: null,
actions: { actions: {
create: `${BASE_URL.BASE_URL}/BaseCompany/v1/create`, create: `${BASE_URL.BASE_URL}/BaseCompany/v1/create`,
@ -235,6 +232,8 @@ export default {
}, },
created() { created() {
this.uploadDefaultImg = this.$mk.config.uploadDefaultImg;
let dataId = this.getDataId(); let dataId = this.getDataId();
if (dataId) { if (dataId) {
@ -475,11 +474,11 @@ export default {
.imagePanel { .imagePanel {
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
width: 80px; width: 100px;
img { img {
width: 60px; width: 80px;
height: 60px; height: 80px;
} }
} }
</style> </style>

View File

@ -39,6 +39,11 @@
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div> </div>
</template> </template>
<template #logo="{ row }">
<img v-if="row.logo" :src="row.logo" style="width: 100px;"/>
<span v-else></span>
</template>
</vxe-grid> </vxe-grid>
</div> </div>
@ -137,7 +142,7 @@ export default {
columns: [ columns: [
{ type: 'checkbox', width: 50 }, { type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 }, { type: 'seq', width: 50 },
{ field: 'logo', width: 120, sortable: true, title: '公司Logo', showHeaderOverflow: true }, { slots: { default: 'logo' }, width: 120, sortable: true, title: '公司Logo', showHeaderOverflow: true },
{ field: 'title', sortable: true, title: '公司名称' ,width:250}, { field: 'title', sortable: true, title: '公司名称' ,width:250},
{ field: 'auth_stop_date', width: 120, sortable: true, title: '授权截止日期', showHeaderOverflow: true }, { field: 'auth_stop_date', width: 120, sortable: true, title: '授权截止日期', showHeaderOverflow: true },
{ field: 'token', width: 120, sortable: true, title: 'token', showHeaderOverflow: true }, { field: 'token', width: 120, sortable: true, title: 'token', showHeaderOverflow: true },

View File

@ -4,6 +4,11 @@
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth" <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon> :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #logo="{}">
<div class="imagePanel">
<img :src="formOptions.data.logo || uploadDefaultImg" @click.stop="selectFile()">
</div>
</template>
</vxe-form> </vxe-form>
@ -34,6 +39,7 @@
<a-button @click="cancel">取消</a-button> <a-button @click="cancel">取消</a-button>
</div> </div>
<input type="file" ref="imageInput" @change="upload()" style="display:none;">
</div> </div>
</page-layout> </page-layout>
</template> </template>
@ -76,6 +82,7 @@ export default {
serviceClose: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/close` serviceClose: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/close`
}, },
uploadDefaultImg: null,
keyName: 'id', keyName: 'id',
isEdit: false, isEdit: false,
formOptions: { formOptions: {
@ -95,7 +102,9 @@ export default {
"sub_title": "", "sub_title": "",
"en_sub_title": "", "en_sub_title": "",
"copy_right": "", "copy_right": "",
"en_copy_right": "" "en_copy_right": "",
"slogan": "",
"en_slogan": ""
}, },
titleWidth: 100, titleWidth: 100,
@ -114,14 +123,26 @@ export default {
{ {
title: '左侧', title: '左侧',
children: [ children: [
{ field: 'title', title: '项目名称', span: 16, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } }, { field: 'title', title: '项目名称', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'desc', title: '项目描述', span: 16, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } }, { field: 'en_title', title: '项目名称(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'logo', title: 'Logo', span: 20, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } }, { field: 'sub_title', title: '副标题', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
{ field: 'domain', title: '网址域名', span: 10, itemRender: { name: '$input' } }, { field: 'en_sub_title', title: '副标题(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
{ field: 'devdomain', title: '开发域名', span: 10, itemRender: { name: '$input' } },
{ field: 'appid', title: 'AppID', span: 20, itemRender: { name: '$textarea' } }, { field: 'copy_right', title: '版权', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
{ field: 'appsecret', title: 'AppSecret', span: 20, itemRender: { name: '$textarea' } }, { field: 'en_copy_right', title: '版权(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
{ field: 'token', title: '项目Token', span: 20, itemRender: { name: '$textarea' } } { field: 'slogan', title: '标语', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入标语' } } },
{ field: 'en_slogan', title: '标语(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入标语' } } },
{ field: 'desc', title: '项目描述', span: 24, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } },
{ field: 'en_desc', title: '项目描述(英文)', span: 24, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } },
{ field: 'logo', title: 'Logo', slots: { default: 'logo' }, span: 24 },
{ field: 'domain', title: '网址域名', span: 12, itemRender: { name: '$input' } },
{ field: 'devdomain', title: '开发域名', span: 12, itemRender: { name: '$input' } },
{ field: 'appid', title: 'AppID', span: 24, itemRender: { name: '$input' } },
{ field: 'appsecret', title: 'AppSecret', span: 24, itemRender: { name: '$textarea' } },
{ field: 'token', title: '项目Token', span: 24, itemRender: { name: '$textarea' } }
] ]
} }
] ]
@ -185,6 +206,7 @@ export default {
}, },
created() { created() {
this.uploadDefaultImg = this.$mk.config.uploadDefaultImg;
let dataId = this.getDataId(); let dataId = this.getDataId();
if (dataId) { if (dataId) {
this.$mk.post({ this.$mk.post({
@ -206,7 +228,15 @@ export default {
// //
methods: { methods: {
selectFile() {
this.$refs.imageInput.click();
},
upload() {
const imgFile = this.$refs.imageInput.files[0]
this.$mk.uploadFile(imgFile, 'png', (url) => {
this.formOptions.data.logo = url;
});
},
onSwitch(row) { onSwitch(row) {
row.status = row.status ? 0 : 1; row.status = row.status ? 0 : 1;
this.$mk.post({ this.$mk.post({
@ -327,7 +357,7 @@ export default {
height: 870, height: 870,
dataId: 0, dataId: 0,
callback: ({ data }) => { callback: ({ data }) => {
if(!data || !data.length){ if (!data || !data.length) {
return; return;
} }
let ids = []; let ids = [];
@ -364,7 +394,7 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-body { .page-body {
padding: 30px ; padding: 30px;
background: @base-bg-color; background: @base-bg-color;
} }
@ -380,4 +410,14 @@ export default {
.footerbar { .footerbar {
padding-left: 10px; padding-left: 10px;
} }
.imagePanel {
cursor: pointer;
padding: 10px;
width: 100px;
img {
width: 80px;
height: 80px;
}
}
</style> </style>

View File

@ -39,6 +39,11 @@
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div> </div>
</template> </template>
<template #logo="{ row }">
<img v-if="row.logo" :src="row.logo" style="width: 100px;"/>
<span v-else></span>
</template>
</vxe-grid> </vxe-grid>
</div> </div>
@ -92,8 +97,12 @@ export default {
{ field: 'title', title: '标题', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } }, { field: 'title', title: '标题', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
{ field: 'desc', title: '描述', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } }, { field: 'desc', title: '描述', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ span: 8, slots: { default: 'date' } }, { span: 8, slots: { default: 'date' } },
{ align: 'right', span: 4, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, {
{ props: { type: 'reset', content: '重置' } }] } } align: 'right', span: 4, itemRender: {
name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } },
{ props: { type: 'reset', content: '重置' } }]
}
}
] ]
} }
], ],
@ -138,11 +147,11 @@ export default {
{ type: 'checkbox', width: 50 }, { type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 }, { type: 'seq', width: 50 },
{ field: 'title', sortable: true, title: '标题' }, { field: 'title', sortable: true, title: '标题' },
{ field: 'logo', sortable: true, title: 'Logo', showHeaderOverflow: true }, { slots: { default: 'logo' }, width: 120, sortable: true, title: '公司Logo', showHeaderOverflow: true },
{ field: 'domain', sortable: true, title: '网址域名', showHeaderOverflow: true }, { field: 'domain', sortable: true, title: '网址域名', showHeaderOverflow: true },
{ field: 'token', sortable: true, title: 'token', showHeaderOverflow: true }, { field: 'token', sortable: true, title: 'token', showHeaderOverflow: true },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true }, { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
{ title: '操作', slots: { default: 'op' },width:120 } { title: '操作', slots: { default: 'op' }, width: 120 }
] ]
} }
}; };
@ -226,7 +235,7 @@ export default {
if (e.name == "add") { if (e.name == "add") {
this.$openPage("/BaseConfig/BaseConfigAdd"); this.$openPage("/BaseConfig/BaseConfigAdd");
} }
}, },
pageEdit(row) { pageEdit(row) {
@ -289,10 +298,11 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-body { .page-body {
padding: 30px ; padding: 30px;
background: @base-bg-color; background: @base-bg-color;
} }
.gridPanel{
.gridPanel {
height: calc(100vh - 400px); height: calc(100vh - 400px);
} }
</style> </style>
@ -300,7 +310,7 @@ export default {
<style> <style>
.oplinks svg { .oplinks svg {
width: 22px; width: 22px;
height:22px; height: 22px;
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
</style> </style>