mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-02 16:45:24 +08:00
v3.8.2 版本前端代码
This commit is contained in:
JEECG
197
jeecgboot-vue3/src/views/system/appVersion/SysAppVersion.vue
Normal file
197
jeecgboot-vue3/src/views/system/appVersion/SysAppVersion.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<PageWrapper contentFullHeight>
|
||||
<a-card :bordered="false" title="版本管理">
|
||||
<!--编辑模式-->
|
||||
<a-spin v-if="active" :spinning="confirmLoading">
|
||||
<a-form ref="formRef" :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="validatorRules">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="版本" name="appVersion">
|
||||
<a-input v-model:value="model.appVersion" placeholder="请输入版本" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="APP安装apk" name="downloadUrl">
|
||||
<a-input placeholder="设置APP安装apk" v-model:value="model.downloadUrl">
|
||||
<template #addonAfter>
|
||||
<Icon icon="ant-design:upload-outlined" style="cursor: pointer" @click="showUploadModal('apk')" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="APP热更新文件" name="wgtUrl">
|
||||
<a-input placeholder="设置APP热更新文件" v-model:value="model.wgtUrl">
|
||||
<template #addonAfter>
|
||||
<Icon icon="ant-design:upload-outlined" style="cursor: pointer" @click="showUploadModal('wgt')" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="更新内容">
|
||||
<a-textarea :rows="4" v-model:value="model.updateNote" placeholder="请输入更新内容" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<JUploadModal :value="modalValue" :bizPath="filePath" :maxCount="1" @register="registerModel" @change="uploadBack" />
|
||||
</a-spin>
|
||||
<!--详情模式-->
|
||||
<Description v-else class="desc" :column="1" :data="model" :schema="schema" />
|
||||
<!--底部按钮-->
|
||||
<div class="anty-form-btn" v-if="hasPermission('app:edit:version')">
|
||||
<a-button v-if="active" @click="handleSubmit" type="primary" preIcon="ant-design:save-outlined">保存</a-button>
|
||||
<a-button v-else @click="active = true" type="primary" preIcon="ant-design:edit-outlined">开启编辑模式</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="portalapp-sysAppVersion">
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { JUploadModal } from '@/components/Form/src/jeecg/components/JUpload';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { reactive, ref, toRaw, unref, onMounted } from 'vue';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import { queryAppVersion, saveAppVersion } from './appVersion.api';
|
||||
import { Description, DescItem } from '/@/components/Description/index';
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const [registerModel, { openModal }] = useModal();
|
||||
const confirmLoading = ref(false);
|
||||
const active = ref(false);
|
||||
const formRef = ref<any>(null);
|
||||
const appKey = 'E0CC280';
|
||||
const filePath = 'appVersion';
|
||||
const uploadType = ref('');
|
||||
const modalValue = ref('');
|
||||
const labelCol = {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
};
|
||||
const wrapperCol = {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
};
|
||||
const model = reactive({
|
||||
id: 'E0CC280',
|
||||
appVersion: '',
|
||||
versionNum: 0,
|
||||
updateNote: '',
|
||||
downloadUrl: '',
|
||||
wgtUrl: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* 初始化表单数据
|
||||
* @param record
|
||||
*/
|
||||
async function initFormData() {
|
||||
const appVersion = await queryAppVersion({ key: appKey });
|
||||
if (appVersion) {
|
||||
Object.assign(model, appVersion);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交保存版本信息
|
||||
*/
|
||||
function handleSubmit() {
|
||||
const form = unref(formRef);
|
||||
form.validate().then(async () => {
|
||||
let obj = toRaw(model);
|
||||
if (obj.appVersion.indexOf('.') != -1) {
|
||||
obj.versionNum = Number(obj.appVersion.replace(/\./g, ''));
|
||||
}
|
||||
obj.id = appKey;
|
||||
confirmLoading.value = true;
|
||||
await saveAppVersion(obj);
|
||||
createMessage.success('保存成功');
|
||||
confirmLoading.value = false;
|
||||
active.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示设置弹窗
|
||||
* @param type
|
||||
*/
|
||||
function showUploadModal(type) {
|
||||
uploadType.value = type;
|
||||
modalValue.value = type == 'apk' ? model.downloadUrl : model.wgtUrl;
|
||||
openModal(true, {
|
||||
maxCount: 1,
|
||||
bizPath: filePath,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*上传返回
|
||||
*/
|
||||
function uploadBack(value) {
|
||||
if (unref(uploadType) == 'apk') {
|
||||
model.downloadUrl = value;
|
||||
} else {
|
||||
model.wgtUrl = value;
|
||||
}
|
||||
}
|
||||
//表单校验规则
|
||||
const validatorRules = {
|
||||
appVersion: [{ required: true, message: '版本不能为空', trigger: 'blur' }],
|
||||
downloadUrl: [{ required: true, message: 'APP安装apk不能为空', trigger: 'change' }],
|
||||
wgtUrl: [{ required: true, message: 'APP热更新文件不能为空', trigger: 'change' }],
|
||||
};
|
||||
// 显示字段
|
||||
const schema: DescItem[] = [
|
||||
{
|
||||
field: 'appVersion',
|
||||
label: '版本',
|
||||
},
|
||||
{
|
||||
field: 'downloadUrl',
|
||||
label: 'APP安装apk',
|
||||
},
|
||||
{
|
||||
field: 'wgtUrl',
|
||||
label: 'APP热更新文件',
|
||||
},
|
||||
{
|
||||
field: 'updateNote',
|
||||
label: '更新内容',
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
initFormData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.anty-form-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.anty-form-btn button {
|
||||
margin: 20px;
|
||||
}
|
||||
.approveDiv span {
|
||||
margin: 0 20px;
|
||||
}
|
||||
.desc {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 30% !important;
|
||||
min-width: 150px !important;
|
||||
}
|
||||
:deep(.ant-descriptions-item-content) {
|
||||
padding: 16px !important;
|
||||
width: 60% !important;
|
||||
}
|
||||
</style>
|
||||
20
jeecgboot-vue3/src/views/system/appVersion/appVersion.api.ts
Normal file
20
jeecgboot-vue3/src/views/system/appVersion/appVersion.api.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
//查询app版本
|
||||
queryAppVersion = '/sys/version/app3version',
|
||||
//保存app版本
|
||||
saveAppVersion = '/sys/version/saveVersion',
|
||||
}
|
||||
/**
|
||||
* 查询APP版本
|
||||
* @param params
|
||||
*/
|
||||
export const queryAppVersion = (params) => defHttp.get({ url: Api.queryAppVersion, params });
|
||||
/**
|
||||
* 保存APP版本
|
||||
* @param params
|
||||
*/
|
||||
export const saveAppVersion = (params) => {
|
||||
return defHttp.post({ url: Api.saveAppVersion, params });
|
||||
};
|
||||
Reference in New Issue
Block a user