生成主机秘钥卡片视图.
This commit is contained in:
@@ -18,6 +18,7 @@ import com.orion.ops.framework.mybatis.core.domain.BaseDO;
|
|||||||
import com.orion.ops.framework.mybatis.core.mapper.IMapper;
|
import com.orion.ops.framework.mybatis.core.mapper.IMapper;
|
||||||
import com.orion.ops.launch.generator.engine.VelocityTemplateEngine;
|
import com.orion.ops.launch.generator.engine.VelocityTemplateEngine;
|
||||||
import com.orion.ops.launch.generator.template.Table;
|
import com.orion.ops.launch.generator.template.Table;
|
||||||
|
import com.orion.ops.launch.generator.template.Template;
|
||||||
import org.apache.ibatis.annotations.Mapper;
|
import org.apache.ibatis.annotations.Mapper;
|
||||||
|
|
||||||
import java.io.File;
|
import java.io.File;
|
||||||
@@ -41,7 +42,7 @@ public class CodeGenerator {
|
|||||||
// 作者
|
// 作者
|
||||||
String author = Const.ORION_AUTHOR;
|
String author = Const.ORION_AUTHOR;
|
||||||
// 模块
|
// 模块
|
||||||
String module = "infra";
|
String module = "asset";
|
||||||
// 生成的表
|
// 生成的表
|
||||||
Table[] tables = {
|
Table[] tables = {
|
||||||
// Template.create("preference", "用户偏好", "preference")
|
// Template.create("preference", "用户偏好", "preference")
|
||||||
@@ -55,6 +56,11 @@ public class CodeGenerator {
|
|||||||
// .values("value", 1, 2)
|
// .values("value", 1, 2)
|
||||||
// .color("blue", "green")
|
// .color("blue", "green")
|
||||||
// .build(),
|
// .build(),
|
||||||
|
Template.create("host_key", "主机秘钥", "host")
|
||||||
|
.vue("asset", "host-key")
|
||||||
|
.enableCardView()
|
||||||
|
.enableDrawerForm()
|
||||||
|
.build()
|
||||||
};
|
};
|
||||||
// jdbc 配置 - 使用配置文件
|
// jdbc 配置 - 使用配置文件
|
||||||
File yamlFile = new File("orion-ops-launch/src/main/resources/application-dev.yaml");
|
File yamlFile = new File("orion-ops-launch/src/main/resources/application-dev.yaml");
|
||||||
|
|||||||
@@ -324,7 +324,7 @@ public class VelocityTemplateEngine extends AbstractTemplateEngine {
|
|||||||
.collect(Collectors.toList());
|
.collect(Collectors.toList());
|
||||||
// 设置前端元数据
|
// 设置前端元数据
|
||||||
Table table = tables.get(tableInfo.getName());
|
Table table = tables.get(tableInfo.getName());
|
||||||
Map<String, Object> vueMeta = this.pickTableMeta(table, "enableDrawerForm", "enableRowSelection", "module", "feature");
|
Map<String, Object> vueMeta = this.pickTableMeta(table, "module", "feature", "enableDrawerForm", "enableRowSelection", "enableCardView");
|
||||||
// 模块名称实体
|
// 模块名称实体
|
||||||
vueMeta.put("moduleEntity", VariableStyles.SPINE.toBigHump(table.getModule()));
|
vueMeta.put("moduleEntity", VariableStyles.SPINE.toBigHump(table.getModule()));
|
||||||
// 模块名称实体
|
// 模块名称实体
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ public class ${table.serviceImplName} implements ${table.serviceName} {
|
|||||||
#end
|
#end
|
||||||
.and(Strings.isNotEmpty(searchValue), c -> c
|
.and(Strings.isNotEmpty(searchValue), c -> c
|
||||||
#foreach($field in ${table.fields})
|
#foreach($field in ${table.fields})
|
||||||
.eq(${type}DO::get${field.capitalName}, searchValue)
|
.eq(${type}DO::get${field.capitalName}, searchValue)#if($foreach.hasNext).or()#end
|
||||||
#end
|
#end
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,4 +26,5 @@ VALUES
|
|||||||
(@TMP_SUB_ID, '创建$table.comment', '${package.ModuleName}:${typeHyphen}:create', 3, 20),
|
(@TMP_SUB_ID, '创建$table.comment', '${package.ModuleName}:${typeHyphen}:create', 3, 20),
|
||||||
(@TMP_SUB_ID, '修改$table.comment', '${package.ModuleName}:${typeHyphen}:update', 3, 30),
|
(@TMP_SUB_ID, '修改$table.comment', '${package.ModuleName}:${typeHyphen}:update', 3, 30),
|
||||||
(@TMP_SUB_ID, '删除$table.comment', '${package.ModuleName}:${typeHyphen}:delete', 3, 40),
|
(@TMP_SUB_ID, '删除$table.comment', '${package.ModuleName}:${typeHyphen}:delete', 3, 40),
|
||||||
(@TMP_SUB_ID, '导出$table.comment', '${package.ModuleName}:${typeHyphen}:export', 3, 50);
|
(@TMP_SUB_ID, '导出$table.comment', '${package.ModuleName}:${typeHyphen}:export', 3, 50),
|
||||||
|
(@TMP_SUB_ID, '导入$table.comment', '${package.ModuleName}:${typeHyphen}:import', 3, 60);
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<card-list v-model:searchValue="formModel.searchValue"
|
<card-list v-model:searchValue="formModel.searchValue"
|
||||||
|
search-input-placeholder="输入xxx"
|
||||||
create-card-position="head"
|
create-card-position="head"
|
||||||
:card-height="172"
|
:card-height="172"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@@ -13,6 +14,10 @@
|
|||||||
@reset="reset"
|
@reset="reset"
|
||||||
@search="fetchCardData"
|
@search="fetchCardData"
|
||||||
@page-change="fetchCardData">
|
@page-change="fetchCardData">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<template #title="{ record }">
|
||||||
|
{{ record.id }}
|
||||||
|
</template>
|
||||||
<!-- 拓展操作 -->
|
<!-- 拓展操作 -->
|
||||||
<template #extra="{ record }">
|
<template #extra="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
@@ -44,7 +49,7 @@
|
|||||||
size="small"
|
size="small"
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
label-align="right"
|
label-align="right"
|
||||||
:style="{ width: '300px' }"
|
:style="{ width: '320px' }"
|
||||||
:label-col-props="{ span: 6 }"
|
:label-col-props="{ span: 6 }"
|
||||||
:wrapper-col-props="{ span: 18 }">
|
:wrapper-col-props="{ span: 18 }">
|
||||||
#foreach($field in ${table.fields})
|
#foreach($field in ${table.fields})
|
||||||
@@ -88,7 +93,7 @@
|
|||||||
import { usePagination, useColLayout } from '@/types/card';
|
import { usePagination, useColLayout } from '@/types/card';
|
||||||
import { computed, reactive, ref } from 'vue';
|
import { computed, reactive, ref } from 'vue';
|
||||||
import useLoading from '@/hooks/loading';
|
import useLoading from '@/hooks/loading';
|
||||||
import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
|
import { objectTruthKeyCount, resetObject } from '@/utils';
|
||||||
import fieldConfig from '../types/card.fields';
|
import fieldConfig from '../types/card.fields';
|
||||||
import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
|
import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
|
||||||
import { Message } from '@arco-design/web-vue';
|
import { Message } from '@arco-design/web-vue';
|
||||||
@@ -142,7 +147,7 @@
|
|||||||
|
|
||||||
// 重置条件
|
// 重置条件
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
resetObject(formModel']);
|
resetObject(formModel);
|
||||||
fetchCardData();
|
fetchCardData();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
@openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
|
@openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
|
||||||
@openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
|
@openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
|
||||||
#else
|
#else
|
||||||
<!-- 表格-表格 -->
|
<!-- 列表-表格 -->
|
||||||
<${vue.feature}-table ref="table"
|
<${vue.feature}-table ref="table"
|
||||||
@openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
|
@openAdd="() =>#if($vue.enableDrawerForm) drawer#else modal#end.openAdd()"
|
||||||
@openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
|
@openUpdate="(e) =>#if($vue.enableDrawerForm) drawer#else modal#end.openUpdate(e)" />
|
||||||
@@ -21,12 +21,12 @@
|
|||||||
<!-- 添加修改模态框 -->
|
<!-- 添加修改模态框 -->
|
||||||
<${vue.feature}-form-drawer ref="drawer"
|
<${vue.feature}-form-drawer ref="drawer"
|
||||||
@added="modalAddCallback"
|
@added="modalAddCallback"
|
||||||
@updated="modalAddCallback" />
|
@updated="modalUpdateCallback" />
|
||||||
#else
|
#else
|
||||||
<!-- 添加修改模态框 -->
|
<!-- 添加修改模态框 -->
|
||||||
<${vue.feature}-form-modal ref="modal"
|
<${vue.feature}-form-modal ref="modal"
|
||||||
@added="modalAddCallback"
|
@added="modalAddCallback"
|
||||||
@updated="modalAddCallback" />
|
@updated="modalUpdateCallback" />
|
||||||
#end
|
#end
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -38,6 +38,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
#if($vue.enableCardView)
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useAppStore } from '@/store';
|
||||||
|
#else
|
||||||
|
import { ref } from 'vue';
|
||||||
|
#end
|
||||||
#if($vue.enableCardView)
|
#if($vue.enableCardView)
|
||||||
import ${vue.featureEntity}CardList from './components/${vue.feature}-card-list.vue';
|
import ${vue.featureEntity}CardList from './components/${vue.feature}-card-list.vue';
|
||||||
#end
|
#end
|
||||||
@@ -47,11 +53,6 @@
|
|||||||
#else
|
#else
|
||||||
import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
|
import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
|
||||||
#end
|
#end
|
||||||
#if($vue.enableCardView)
|
|
||||||
import { useAppStore } from '@/store';
|
|
||||||
#end
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const table = ref();
|
const table = ref();
|
||||||
#if($vue.enableCardView)
|
#if($vue.enableCardView)
|
||||||
|
|||||||
@@ -1,11 +1,15 @@
|
|||||||
import { CardField, CardFieldConfig } from '@/types/card';
|
import { CardField, CardFieldConfig } from '@/types/card';
|
||||||
import { dateFormat } from '@/utils';
|
import { dateFormat } from '@/utils';
|
||||||
|
|
||||||
export const fieldConfig = {
|
const fieldConfig = {
|
||||||
rowGap: '10px',
|
rowGap: '10px',
|
||||||
labelSpan: 8,
|
labelSpan: 8,
|
||||||
fields: [
|
fields: [
|
||||||
#foreach($field in ${table.fields}){
|
{
|
||||||
|
label: 'id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
slotName: 'id',
|
||||||
|
}, #foreach($field in ${table.fields})#if("$!field.propertyName" != "id"){
|
||||||
label: '${field.comment}',
|
label: '${field.comment}',
|
||||||
dataIndex: '${field.propertyName}',
|
dataIndex: '${field.propertyName}',
|
||||||
slotName: '${field.propertyName}',
|
slotName: '${field.propertyName}',
|
||||||
@@ -16,7 +20,30 @@ export const fieldConfig = {
|
|||||||
return record.${field.propertyName} && dateFormat(new Date(record.${field.propertyName}));
|
return record.${field.propertyName} && dateFormat(new Date(record.${field.propertyName}));
|
||||||
},
|
},
|
||||||
#end
|
#end
|
||||||
}, #end
|
}, #end#end{
|
||||||
|
label: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
slotName: 'createTime',
|
||||||
|
render: ({ record }) => {
|
||||||
|
return dateFormat(new Date(record.createTime));
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
label: '修改时间',
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
slotName: 'updateTime',
|
||||||
|
render: ({ record }) => {
|
||||||
|
return dateFormat(new Date(record.updateTime));
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
label: '创建人',
|
||||||
|
dataIndex: 'creator',
|
||||||
|
slotName: 'creator',
|
||||||
|
}, {
|
||||||
|
label: '修改人',
|
||||||
|
dataIndex: 'updater',
|
||||||
|
slotName: 'updater',
|
||||||
|
}
|
||||||
] as CardField[]
|
] as CardField[]
|
||||||
} as CardFieldConfig;
|
} as CardFieldConfig;
|
||||||
|
|
||||||
export default fieldConfig;
|
export default fieldConfig;
|
||||||
|
|||||||
@@ -21,6 +21,9 @@ import javax.validation.constraints.Size;
|
|||||||
@Schema(name = "HostKeyQueryRequest", description = "主机秘钥 查询请求对象")
|
@Schema(name = "HostKeyQueryRequest", description = "主机秘钥 查询请求对象")
|
||||||
public class HostKeyQueryRequest extends PageRequest {
|
public class HostKeyQueryRequest extends PageRequest {
|
||||||
|
|
||||||
|
@Schema(description = "搜索")
|
||||||
|
private String searchValue;
|
||||||
|
|
||||||
@Schema(description = "id")
|
@Schema(description = "id")
|
||||||
private Long id;
|
private Long id;
|
||||||
|
|
||||||
|
|||||||
@@ -202,9 +202,14 @@ public class HostKeyServiceImpl implements HostKeyService {
|
|||||||
* @return wrapper
|
* @return wrapper
|
||||||
*/
|
*/
|
||||||
private LambdaQueryWrapper<HostKeyDO> buildQueryWrapper(HostKeyQueryRequest request) {
|
private LambdaQueryWrapper<HostKeyDO> buildQueryWrapper(HostKeyQueryRequest request) {
|
||||||
|
String searchValue = request.getSearchValue();
|
||||||
return hostKeyDAO.wrapper()
|
return hostKeyDAO.wrapper()
|
||||||
.eq(HostKeyDO::getId, request.getId())
|
.eq(HostKeyDO::getId, request.getId())
|
||||||
.like(HostKeyDO::getName, request.getName());
|
.like(HostKeyDO::getName, request.getName())
|
||||||
|
.and(Strings.isNotEmpty(searchValue), c -> c
|
||||||
|
.eq(HostKeyDO::getId, searchValue).or()
|
||||||
|
.like(HostKeyDO::getName, searchValue)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -257,8 +257,8 @@ public class HostServiceImpl implements HostService {
|
|||||||
.like(HostDO::getCode, request.getCode())
|
.like(HostDO::getCode, request.getCode())
|
||||||
.like(HostDO::getAddress, request.getAddress())
|
.like(HostDO::getAddress, request.getAddress())
|
||||||
.and(Strings.isNotEmpty(searchValue), c -> c
|
.and(Strings.isNotEmpty(searchValue), c -> c
|
||||||
.like(HostDO::getName, searchValue)
|
.like(HostDO::getName, searchValue).or()
|
||||||
.like(HostDO::getCode, searchValue)
|
.like(HostDO::getCode, searchValue).or()
|
||||||
.like(HostDO::getAddress, searchValue)
|
.like(HostDO::getAddress, searchValue)
|
||||||
);
|
);
|
||||||
if (setIdList) {
|
if (setIdList) {
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ export interface HostKeyUpdateRequest extends HostKeyCreateRequest {
|
|||||||
* 主机秘钥查询请求
|
* 主机秘钥查询请求
|
||||||
*/
|
*/
|
||||||
export interface HostKeyQueryRequest extends Pagination {
|
export interface HostKeyQueryRequest extends Pagination {
|
||||||
|
searchValue?: string;
|
||||||
id?: number;
|
id?: number;
|
||||||
name?: string;
|
name?: string;
|
||||||
publicKey?: string;
|
publicKey?: string;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.layout-container {
|
.layout-container {
|
||||||
background-color: var(--color-fill-2);
|
background-color: var(--color-fill-2);
|
||||||
padding: 16px 16px 0 16px;
|
padding: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,8 +46,8 @@
|
|||||||
class="header-input-wrapper"
|
class="header-input-wrapper"
|
||||||
:style="{width: searchInputWidth}">
|
:style="{width: searchInputWidth}">
|
||||||
<a-input v-model="searchValueRef"
|
<a-input v-model="searchValueRef"
|
||||||
|
:placeholder="searchInputPlaceholder"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="输入名称/地址"
|
|
||||||
allow-clear
|
allow-clear
|
||||||
@input="e => emits('update:searchValue', e)"
|
@input="e => emits('update:searchValue', e)"
|
||||||
@change="e => emits('update:searchValue', e)"
|
@change="e => emits('update:searchValue', e)"
|
||||||
@@ -214,7 +214,6 @@
|
|||||||
import { useAppStore } from '@/store';
|
import { useAppStore } from '@/store';
|
||||||
import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
|
import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
|
||||||
import { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
|
import { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
|
||||||
import fieldConfig from '@/views/asset/host/types/card.fields';
|
|
||||||
import { triggerMouseEvent } from '@/utils';
|
import { triggerMouseEvent } from '@/utils';
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
@@ -265,6 +264,7 @@
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: () => 0
|
default: () => 0
|
||||||
},
|
},
|
||||||
|
searchInputPlaceholder: String,
|
||||||
searchInputWidth: {
|
searchInputWidth: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => '200px'
|
default: () => '200px'
|
||||||
|
|||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<card-list v-model:searchValue="formModel.searchValue"
|
||||||
|
search-input-placeholder="输入名称/id"
|
||||||
|
create-card-position="head"
|
||||||
|
:card-height="148"
|
||||||
|
:loading="loading"
|
||||||
|
:fieldConfig="fieldConfig"
|
||||||
|
:list="list"
|
||||||
|
:pagination="pagination"
|
||||||
|
:card-layout-cols="cardColLayout"
|
||||||
|
:handle-visible="{disableFilter: true}"
|
||||||
|
:add-permission="['asset:host-key:create']"
|
||||||
|
@add="emits('openAdd')"
|
||||||
|
@reset="reset"
|
||||||
|
@search="fetchCardData"
|
||||||
|
@page-change="fetchCardData">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<template #title="{ record }">
|
||||||
|
{{ record.name }}
|
||||||
|
</template>
|
||||||
|
<!-- 拓展操作 -->
|
||||||
|
<template #extra="{ record }">
|
||||||
|
<a-space>
|
||||||
|
<!-- 更多操作 -->
|
||||||
|
<a-dropdown trigger="hover">
|
||||||
|
<icon-more class="card-extra-icon" />
|
||||||
|
<template #content>
|
||||||
|
<!-- 修改 -->
|
||||||
|
<a-doption v-permission="['asset:host-key:update']"
|
||||||
|
@click="emits('openUpdate', record)">
|
||||||
|
<icon-edit />
|
||||||
|
修改
|
||||||
|
</a-doption>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<a-doption v-permission="['asset:host-key:delete']"
|
||||||
|
class="span-red"
|
||||||
|
@click="deleteRow(record.id)">
|
||||||
|
<icon-delete />
|
||||||
|
删除
|
||||||
|
</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</card-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'asset-host-key-card-list'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { usePagination, useColLayout } from '@/types/card';
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import { resetObject } from '@/utils';
|
||||||
|
import fieldConfig from '../types/card.fields';
|
||||||
|
import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
|
||||||
|
const { loading, setLoading } = useLoading();
|
||||||
|
const cardColLayout = useColLayout();
|
||||||
|
const pagination = usePagination();
|
||||||
|
const list = ref<HostKeyQueryResponse[]>([]);
|
||||||
|
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
|
||||||
|
|
||||||
|
const formModel = reactive<HostKeyQueryRequest>({
|
||||||
|
searchValue: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 删除当前行
|
||||||
|
const deleteRow = async (id: number) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
// 调用删除接口
|
||||||
|
await deleteHostKey(id);
|
||||||
|
Message.success('删除成功');
|
||||||
|
// 重新加载数据
|
||||||
|
await fetchCardData();
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加后回调
|
||||||
|
const addedCallback = () => {
|
||||||
|
fetchCardData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新后回调
|
||||||
|
const updatedCallback = () => {
|
||||||
|
fetchCardData();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
addedCallback, updatedCallback
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置条件
|
||||||
|
const reset = () => {
|
||||||
|
resetObject(formModel);
|
||||||
|
fetchCardData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const doFetchCardData = async (request: HostKeyQueryRequest) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const { data } = await getHostKeyPage(request);
|
||||||
|
list.value = data.rows;
|
||||||
|
pagination.total = data.total;
|
||||||
|
pagination.current = request.page;
|
||||||
|
pagination.pageSize = request.limit;
|
||||||
|
} catch (e) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换页码
|
||||||
|
const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||||
|
doFetchCardData({ page, limit, ...form });
|
||||||
|
};
|
||||||
|
fetchCardData();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
</style>
|
||||||
@@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-container">
|
<div class="layout-container">
|
||||||
<!-- 表格 -->
|
<!-- 列表-表格 -->
|
||||||
<host-key-table ref="table"
|
<host-key-table v-if="renderTable"
|
||||||
@openView="(e) => drawer.openView(e)"
|
ref="table"
|
||||||
|
@openAdd="() => drawer.openAdd()"
|
||||||
|
@openUpdate="(e) => drawer.openUpdate(e)" />
|
||||||
|
<!-- 列表-卡片 -->
|
||||||
|
<host-key-card-list v-else
|
||||||
|
ref="card"
|
||||||
@openAdd="() => drawer.openAdd()"
|
@openAdd="() => drawer.openAdd()"
|
||||||
@openUpdate="(e) => drawer.openUpdate(e)" />
|
@openUpdate="(e) => drawer.openUpdate(e)" />
|
||||||
<!-- 添加修改模态框 -->
|
<!-- 添加修改模态框 -->
|
||||||
<host-key-form-drawer ref="drawer"
|
<host-key-form-drawer ref="drawer"
|
||||||
@added="() => table.addedCallback()"
|
@added="modalAddCallback"
|
||||||
@updated="() => table.updatedCallback()" />
|
@updated="modalUpdateCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -19,12 +24,36 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useAppStore } from '@/store';
|
||||||
|
import HostKeyCardList from './components/host-key-card-list.vue';
|
||||||
import HostKeyTable from './components/host-key-table.vue';
|
import HostKeyTable from './components/host-key-table.vue';
|
||||||
import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
|
import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const table = ref();
|
const table = ref();
|
||||||
|
const card = ref();
|
||||||
const drawer = ref();
|
const drawer = ref();
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const renderTable = computed(() => appStore.hostKeyView === 'table');
|
||||||
|
|
||||||
|
// 添加回调
|
||||||
|
const modalAddCallback = () => {
|
||||||
|
if (renderTable.value) {
|
||||||
|
table.value.addedCallback();
|
||||||
|
} else {
|
||||||
|
card.value.addedCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改回调
|
||||||
|
const modalUpdateCallback = () => {
|
||||||
|
if (renderTable.value) {
|
||||||
|
table.value.updatedCallback();
|
||||||
|
} else {
|
||||||
|
card.value.updatedCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
30
orion-ops-ui/src/views/asset/host-key/types/card.fields.ts
Normal file
30
orion-ops-ui/src/views/asset/host-key/types/card.fields.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { CardField, CardFieldConfig } from '@/types/card';
|
||||||
|
import { dateFormat } from '@/utils';
|
||||||
|
|
||||||
|
const fieldConfig = {
|
||||||
|
rowGap: '10px',
|
||||||
|
labelSpan: 8,
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
label: 'id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
slotName: 'id',
|
||||||
|
}, {
|
||||||
|
label: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
slotName: 'createTime',
|
||||||
|
render: ({ record }) => {
|
||||||
|
return dateFormat(new Date(record.createTime));
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
label: '修改时间',
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
slotName: 'updateTime',
|
||||||
|
render: ({ record }) => {
|
||||||
|
return dateFormat(new Date(record.updateTime));
|
||||||
|
},
|
||||||
|
}
|
||||||
|
] as CardField[]
|
||||||
|
} as CardFieldConfig;
|
||||||
|
|
||||||
|
export default fieldConfig;
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<card-list v-model:searchValue="formModel.searchValue"
|
<card-list v-model:searchValue="formModel.searchValue"
|
||||||
|
search-input-placeholder="输入名称/地址"
|
||||||
create-card-position="head"
|
create-card-position="head"
|
||||||
:card-height="176"
|
:card-height="174"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:fieldConfig="fieldConfig"
|
:fieldConfig="fieldConfig"
|
||||||
:list="list"
|
:list="list"
|
||||||
@@ -76,7 +77,7 @@
|
|||||||
size="small"
|
size="small"
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
label-align="right"
|
label-align="right"
|
||||||
:style="{ width: '300px' }"
|
:style="{ width: '320px' }"
|
||||||
:label-col-props="{ span: 6 }"
|
:label-col-props="{ span: 6 }"
|
||||||
:wrapper-col-props="{ span: 18 }">
|
:wrapper-col-props="{ span: 18 }">
|
||||||
<!-- id -->
|
<!-- id -->
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { CardField, CardFieldConfig } from '@/types/card';
|
import { CardField, CardFieldConfig } from '@/types/card';
|
||||||
|
|
||||||
export const fieldConfig = {
|
const fieldConfig = {
|
||||||
rowGap: '10px',
|
rowGap: '10px',
|
||||||
labelSpan: 8,
|
labelSpan: 8,
|
||||||
fields: [
|
fields: [
|
||||||
|
|||||||
Reference in New Issue
Block a user