kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(AppDeployCustom): 重构新增页面布局和样式

Browse Source 
-优化了表单布局，使用 grid 系统替代原有的 el-row 和 el-col
- 移除了多余的模板代码，简化了结构
- 统一了表单项的样式和间距
- 调整了部分组件的属性，提高了代码可读性
This commit is contained in:
aixianling
2025-01-07 10:36:29 +08:00
parent 7f086f8b83
commit 3adbb68466
1 changed files with 38 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
project/oms/apps/develop/AppDeployCustom/add.vue
View File

@@ -1,56 +1,52 @@
<template>
<section class="add">
<ai-detail>
<ai-title slot="title" :title="pageTitle" isShowBottomBorder />
<ai-title slot="title" :title="pageTitle" isShowBottomBorder/>
<template #content>
<el-tabs tab-position="left">
<el-tab-pane label="方案设置">
<el-form ref="AddForm" :model="form" size="small" label-width="120px" :rules="rules">
<ai-card title="基本信息">
<template #content>
<el-form-item label="项目/系统名称" prop="name">
<el-input v-model="form.name" placeholder="请输入" clearable />
<div class="grid">
<el-form-item label="项目/系统名称" prop="name" class="row">
<ai-input v-model="form.name"/>
</el-form-item>
<el-row type="flex">
<div class="fill">
<el-form-item label="系统类型" prop="type">
<ai-select v-model="form.type" :selectList="dict.getDict('systemType')"
@change="form.apps = []" />
</el-form-item>
<el-form-item label="更新项目路径" prop="dist">
<el-input v-model="form.dist" placeholder="常填写nginx路径,下载包从这里取" clearable />
</el-form-item>
</div>
<div class="fill mar-l16">
<el-form-item label="库项目根路径" prop="customPath">
<el-input v-model="form.customPath" placeholder="请输入" clearable />
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="form.version" placeholder="请输入" clearable />
</el-form-item>
</div>
</el-row>
</template>
<el-form-item label="系统类型" prop="type">
<ai-select v-model="form.type" dict="systemType" @change="form.apps = []"/>
</el-form-item>
<el-form-item label="库项目根路径" prop="customPath">
<ai-input v-model="form.customPath"/>
</el-form-item>
<el-form-item label="更新项目路径" prop="dist">
<ai-input v-model="form.dist" placeholder="常填写nginx路径,下载包从这里取"/>
</el-form-item>
<el-form-item label="版本号" prop="version">
<ai-input v-model="form.version"/>
</el-form-item>
<el-form-item label="微信机器人" prop="webhook">
<ai-input v-model="form.webhook"/>
</el-form-item>
</div>
</ai-card>
<ai-card title="主库应用">
<template #content>
<ai-lib-table v-if="form.type" v-model="form.apps" v-bind="$props" multiple searchKey="name"
:action="`/node/wechatapps/list?type=${form.type}&isMain=1`" border />
:action="`/node/wechatapps/list?type=${form.type}&isMain=1`" border/>
<ai-empty v-else>请先选择系统类型</ai-empty>
</template>
</ai-card>
<component class="extraConfig" title="扩展设置" :is="extraConfig" v-model="form.extra" :appList="appList" />
<component class="extraConfig" title="扩展设置" :is="extraConfig" v-model="form.extra" :appList="appList"/>
</el-form>
</el-tab-pane>
<el-tab-pane label="方案应用" lazy>
<ai-lib-table :meta="appList" customData :isShowPagination="false" v-bind="$props" disabled
:colConfigs="appListConfigs">
:colConfigs="appListConfigs">
<template slot="options" slot-scope="{row}">
<ai-dialog-btn text="编辑" :customFooter="false" dialogTitle="应用配置" width="500px"
@onConfirm="handleAppEdit(row)">
@onConfirm="handleAppEdit(row)">
<el-form size="small" label-width="80px">
<el-form-item label="应用名称">
<el-input v-model="row.label" clearable placeholder="请输入应用名称" />
<el-input v-model="row.label" clearable placeholder="请输入应用名称"/>
</el-form-item>
</el-form>
</ai-dialog-btn>
@@ -68,7 +64,7 @@
</template>
<script>
import { mapActions } from "vuex"
import {mapActions} from "vuex"
import AiLibTable from "./AiLibTable";
import webConfig from "./config/webConfig.vue";
import wxcpConfig from "./config/wxcpConfig.vue";
@@ -76,7 +72,7 @@ import wxmpConfig from "./config/wxmpConfig.vue";
export default {
name: "add",
components: { AiLibTable },
components: {AiLibTable},
props: {
instance: Function,
dict: Object,
@@ -104,29 +100,29 @@ export default {
},
data() {
return {
form: { apps: [], type: null, customPath: "", extra: { sysInfo: {} } },
form: {apps: [], type: null, customPath: "", extra: {sysInfo: {}}},
rules: {
name: { required: true, message: "请输入" },
type: { required: true, message: "请选择" },
name: {required: true, message: "请输入"},
type: {required: true, message: "请选择"},
// customPath: {required: true, message: "请输入"},
},
appListConfigs: [
{ prop: 'label', label: "应用名称", render: (h, { row }) => h(row.tabbar ? 'b' : 'p', row.label + ` ${row.tabbar ? '(底部导航栏)' : ''}`) },
{ prop: 'project', label: "项目/框架" },
{ prop: 'category', label: "分类", dict: "appsCategory" },
{ prop: 'name', label: "模块名" }
{prop: 'label', label: "应用名称", render: (h, {row}) => h(row.tabbar ? 'b' : 'p', row.label + ` ${row.tabbar ? '(底部导航栏)' : ''}`)},
{prop: 'project', label: "项目/框架"},
{prop: 'category', label: "分类", dict: "appsCategory"},
{prop: 'name', label: "模块名"}
],
}
},
methods: {
...mapActions(['closePage']),
getDetail() {
let { id } = this.$route.query
let {id} = this.$route.query
id && this.instance.post("/node/custom/detail", null, {
params: { id }
params: {id}
}).then(res => {
if (res?.data) {
this.form = { ...this.form, ...res.data }
this.form = {...this.form, ...res.data}
}
})
},
@@ -173,7 +169,7 @@ export default {
:deep(.tabBarOptions) {
flex-wrap: wrap;
.el-button--text+.el-button--text {
.el-button--text + .el-button--text {
margin-left: 0;
}
}