项目编辑、上传图片

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_USER_MODEL2=AdminUser
VUE_APP_USER_MODEL=BaseAdmin
VUE_APP_USER_MODEL=AdminUser
VUE_APP_USER_MODEL2=BaseAdmin

View File

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

View File

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

View File

@ -39,6 +39,11 @@
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
<template #logo="{ row }">
<img v-if="row.logo" :src="row.logo" style="width: 100px;"/>
<span v-else></span>
</template>
</vxe-grid>
</div>
@ -137,7 +142,7 @@ export default {
columns: [
{ type: 'checkbox', 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: 'auth_stop_date', width: 120, sortable: true, title: '授权截止日期', 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"
: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>
@ -34,6 +39,7 @@
<a-button @click="cancel">取消</a-button>
</div>
<input type="file" ref="imageInput" @change="upload()" style="display:none;">
</div>
</page-layout>
</template>
@ -76,6 +82,7 @@ export default {
serviceClose: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/close`
},
uploadDefaultImg: null,
keyName: 'id',
isEdit: false,
formOptions: {
@ -95,7 +102,9 @@ export default {
"sub_title": "",
"en_sub_title": "",
"copy_right": "",
"en_copy_right": ""
"en_copy_right": "",
"slogan": "",
"en_slogan": ""
},
titleWidth: 100,
@ -114,14 +123,26 @@ export default {
{
title: '左侧',
children: [
{ field: 'title', title: '项目名称', span: 16, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'desc', title: '项目描述', span: 16, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } },
{ field: 'logo', title: 'Logo', span: 20, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
{ field: 'domain', title: '网址域名', span: 10, itemRender: { name: '$input' } },
{ field: 'devdomain', title: '开发域名', span: 10, itemRender: { name: '$input' } },
{ field: 'appid', title: 'AppID', span: 20, itemRender: { name: '$textarea' } },
{ field: 'appsecret', title: 'AppSecret', span: 20, itemRender: { name: '$textarea' } },
{ field: 'token', title: '项目Token', span: 20, itemRender: { name: '$textarea' } }
{ field: 'title', title: '项目名称', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'en_title', title: '项目名称(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'sub_title', title: '副标题', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
{ field: 'en_sub_title', title: '副标题(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
{ field: 'copy_right', title: '版权', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
{ field: 'en_copy_right', title: '版权(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
{ 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() {
this.uploadDefaultImg = this.$mk.config.uploadDefaultImg;
let dataId = this.getDataId();
if (dataId) {
this.$mk.post({
@ -206,7 +228,15 @@ export default {
//
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) {
row.status = row.status ? 0 : 1;
this.$mk.post({
@ -380,4 +410,14 @@ export default {
.footerbar {
padding-left: 10px;
}
.imagePanel {
cursor: pointer;
padding: 10px;
width: 100px;
img {
width: 80px;
height: 80px;
}
}
</style>

View File

@ -39,6 +39,11 @@
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
<template #logo="{ row }">
<img v-if="row.logo" :src="row.logo" style="width: 100px;"/>
<span v-else></span>
</template>
</vxe-grid>
</div>
@ -92,8 +97,12 @@ export default {
{ field: 'title', title: '标题', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
{ field: 'desc', title: '描述', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ 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,7 +147,7 @@ export default {
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ 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: 'token', sortable: true, title: 'token', showHeaderOverflow: true },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
@ -292,6 +301,7 @@ export default {
padding: 30px;
background: @base-bg-color;
}
.gridPanel {
height: calc(100vh - 400px);
}