mirror of
https://github.com/TangSengDaoDao/TangSengDaoDaoManager
synced 2025-06-02 07:12:58 +00:00
feat: ✨新增应用管理
This commit is contained in:
wanglihui
parent
150a228f04
commit
a084e1d979
@ -9,7 +9,7 @@ const home: Menu.MenuOptions = {
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isLink: '',
|
||||
index: 8,
|
||||
index: 9,
|
||||
title: '设置'
|
||||
},
|
||||
children: [
|
||||
|
||||
@ -9,7 +9,7 @@ const home: Menu.MenuOptions = {
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isLink: '',
|
||||
index: 7,
|
||||
index: 8,
|
||||
title: '工具'
|
||||
},
|
||||
children: [
|
||||
|
||||
43
src/menu/modules/workplace.ts
Normal file
43
src/menu/modules/workplace.ts
Normal file
@ -0,0 +1,43 @@
|
||||
const home: Menu.MenuOptions = {
|
||||
name: 'tool',
|
||||
path: '/workplace',
|
||||
meta: {
|
||||
icon: 'i-bd-all-application',
|
||||
isAffix: false,
|
||||
isFull: false,
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isLink: '',
|
||||
index: 7,
|
||||
title: '工作台'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'workplaceManage',
|
||||
path: '/workplace/manage',
|
||||
meta: {
|
||||
icon: 'i-bd-application',
|
||||
isAffix: false,
|
||||
isFull: false,
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isLink: '',
|
||||
title: '应用管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'workplaceConfiguration',
|
||||
path: '/workplace/configuration',
|
||||
meta: {
|
||||
icon: 'i-bd-setting-config',
|
||||
isAffix: false,
|
||||
isFull: false,
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isLink: '',
|
||||
title: '工作台设置'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
export default home;
|
||||
17
src/pages/workplace/configuration.vue
Normal file
17
src/pages/workplace/configuration.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<bd-page class="flex-col">
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div>工作台设置</div>
|
||||
</div>
|
||||
</bd-page>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 工作台设置
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
|
||||
</script>
|
||||
130
src/pages/workplace/manage/components/Apply.vue
Normal file
130
src/pages/workplace/manage/components/Apply.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="value"
|
||||
:width="600"
|
||||
:align-center="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:draggable="true"
|
||||
:z-index="99"
|
||||
title="新增应用"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-form :model="formData" label-width="96px">
|
||||
<el-form-item label="应用名称">
|
||||
<el-input v-model="formData.app_version" placeholder="请输入应用名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应用APP ID">
|
||||
<el-input v-model="formData.app_version" placeholder="请输入应用APP ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应用图标">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="bd-uplod"
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="PC端地址">
|
||||
<el-input v-model="formData.app_version" placeholder="请输入PC端地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="移动端地址">
|
||||
<el-input v-model="formData.app_version" placeholder="请输入移动端地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应用状态">
|
||||
<el-checkbox-group v-model="formData.type">
|
||||
<el-checkbox label="pc">PC</el-checkbox>
|
||||
<el-checkbox label="app">移动端</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用描述">
|
||||
<el-input
|
||||
v-model="formData.update_desc"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 6, maxRows: 8 }"
|
||||
placeholder="请输入应用描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-space>
|
||||
<el-button @click="onClose">取消</el-button>
|
||||
<el-button type="primary" :loading="loaging" @click="onSend">发送</el-button>
|
||||
</el-space>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="Apply" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
// API 接口
|
||||
import { commonAppversionPost } from '@/api/tool';
|
||||
interface IProps {
|
||||
value: boolean;
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
value: false
|
||||
});
|
||||
|
||||
const content = ref('');
|
||||
const loaging = ref<boolean>(false);
|
||||
const formData = reactive({
|
||||
app_version: '',
|
||||
os: 'android',
|
||||
is_force: 0,
|
||||
update_desc: '',
|
||||
download_url: '',
|
||||
type: []
|
||||
});
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:value', item: boolean): void;
|
||||
(e: 'ok', item: any): void;
|
||||
}>();
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(n, _o) => {
|
||||
props.value = n;
|
||||
}
|
||||
);
|
||||
// 取消
|
||||
const onClose = () => {
|
||||
emits('update:value', false);
|
||||
};
|
||||
// 发送
|
||||
const onSend = () => {
|
||||
loaging.value = true;
|
||||
commonAppversionPost(formData)
|
||||
.then((res: any) => {
|
||||
loaging.value = false;
|
||||
if (res.status == 200) {
|
||||
ElMessage.success('新增成功！');
|
||||
content.value = '';
|
||||
onClose();
|
||||
emits('ok', true);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
loaging.value = false;
|
||||
if (err.status == 400) {
|
||||
ElMessage.error(err.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bd-uplod {
|
||||
::v-deep(.el-upload--picture-card) {
|
||||
height: 78px;
|
||||
width: 78px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
src/pages/workplace/manage/index.vue
Normal file
149
src/pages/workplace/manage/index.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<bd-page class="flex-col">
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">应用管理</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="应用名称/APP ID" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="onAppVersionAdd">新增应用</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</bd-page>
|
||||
<!-- 应用 -->
|
||||
<Apply v-model:value="applyAddValue" />
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 应用管理
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { ElButton, ElSpace } from 'element-plus';
|
||||
import Apply from './components/Apply.vue';
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'icon',
|
||||
label: '应用LOGO'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '应用名称'
|
||||
},
|
||||
{
|
||||
prop: 'no',
|
||||
label: '应用APP ID'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '应用状态',
|
||||
formatter(row: any) {
|
||||
return row.status === 1 ? '开启' : '关闭';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'des',
|
||||
label: '应用描述'
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
render: (_scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="primary">配置</ElButton>
|
||||
</ElSpace>
|
||||
);
|
||||
}
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const getTableList = () => {};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 新增版本
|
||||
const applyAddValue = ref<boolean>(false);
|
||||
const onAppVersionAdd = () => {
|
||||
applyAddValue.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user