feat(infra): 新增状态机管理功能模块
- 新增状态机模型和状态流转的完整 CRUD 功能 - 添加字典编码 OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE 用于对象类型下拉选择 - 实现状态机列表页、搜索组件、操作对话框和状态流转管理 - 新增 infra API 接口封装和类型定义 - 遵循项目规范:使用 TableSearchFields 搜索组件、BusinessTableActionCell 操作列、统一的状态标签展示 涉及文件: - src/constants/dict.ts: 新增对象类型字典编码 - src/service/api/infra.ts: 新增状态机和状态流转相关 API - src/typings/api/infra.d.ts: 新增状态机相关类型定义 - src/views/infra/state-machine/: 新增状态机管理页面及子组件
This commit is contained in:
142
src/views/infra/state-machine/modules/state-machine-search.vue
Normal file
142
src/views/infra/state-machine/modules/state-machine-search.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE } from '@/constants/dict';
|
||||
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
|
||||
import { statusOptions } from '../shared';
|
||||
|
||||
defineOptions({ name: 'StateMachineSearch' });
|
||||
|
||||
const emit = defineEmits<{
|
||||
reset: [];
|
||||
search: [];
|
||||
}>();
|
||||
|
||||
const model = defineModel<Api.Infra.ObjectStatusModelSearchParams>('model', { required: true });
|
||||
|
||||
const booleanOptions = [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 }
|
||||
];
|
||||
|
||||
const searchModel = reactive<{
|
||||
keyword: string;
|
||||
objectType?: string;
|
||||
status?: Api.Infra.CommonStatus;
|
||||
initialFlag?: number;
|
||||
terminalFlag?: number;
|
||||
}>({
|
||||
keyword: '',
|
||||
objectType: undefined,
|
||||
status: undefined,
|
||||
initialFlag: undefined,
|
||||
terminalFlag: undefined
|
||||
});
|
||||
|
||||
let syncingFromSource = false;
|
||||
|
||||
watch(
|
||||
() =>
|
||||
[
|
||||
model.value.keyword,
|
||||
model.value.objectType,
|
||||
model.value.status,
|
||||
model.value.initialFlag,
|
||||
model.value.terminalFlag
|
||||
] as const,
|
||||
([keyword, objectType, status, initialFlag, terminalFlag]) => {
|
||||
syncingFromSource = true;
|
||||
searchModel.keyword = keyword ?? '';
|
||||
searchModel.objectType = objectType;
|
||||
searchModel.status = status;
|
||||
|
||||
if (initialFlag === undefined) {
|
||||
searchModel.initialFlag = undefined;
|
||||
} else {
|
||||
searchModel.initialFlag = initialFlag ? 1 : 0;
|
||||
}
|
||||
|
||||
if (terminalFlag === undefined) {
|
||||
searchModel.terminalFlag = undefined;
|
||||
} else {
|
||||
searchModel.terminalFlag = terminalFlag ? 1 : 0;
|
||||
}
|
||||
|
||||
syncingFromSource = false;
|
||||
},
|
||||
{ immediate: true, flush: 'sync' }
|
||||
);
|
||||
|
||||
watch(
|
||||
() =>
|
||||
[
|
||||
searchModel.keyword,
|
||||
searchModel.objectType,
|
||||
searchModel.status,
|
||||
searchModel.initialFlag,
|
||||
searchModel.terminalFlag
|
||||
] as const,
|
||||
([keywordValue, objectType, status, initialFlag, terminalFlag]) => {
|
||||
if (syncingFromSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
model.value.keyword = keywordValue.trim() || undefined;
|
||||
model.value.objectType = objectType;
|
||||
model.value.status = status;
|
||||
model.value.initialFlag = initialFlag === undefined ? undefined : initialFlag === 1;
|
||||
model.value.terminalFlag = terminalFlag === undefined ? undefined : terminalFlag === 1;
|
||||
},
|
||||
{ flush: 'sync' }
|
||||
);
|
||||
|
||||
const fields = computed<SearchField[]>(() => [
|
||||
{
|
||||
key: 'objectType',
|
||||
label: '对象类型',
|
||||
type: 'dict',
|
||||
placeholder: '请选择对象类型',
|
||||
dictCode: OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE
|
||||
},
|
||||
{
|
||||
key: 'keyword',
|
||||
label: '关键字',
|
||||
type: 'input',
|
||||
placeholder: '请输入状态名称或状态编码'
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '配置状态',
|
||||
type: 'select',
|
||||
placeholder: '请选择配置状态',
|
||||
options: statusOptions
|
||||
},
|
||||
{
|
||||
key: 'initialFlag',
|
||||
label: '初始状态',
|
||||
type: 'select',
|
||||
placeholder: '请选择是否初始状态',
|
||||
options: booleanOptions
|
||||
},
|
||||
{
|
||||
key: 'terminalFlag',
|
||||
label: '终态',
|
||||
type: 'select',
|
||||
placeholder: '请选择是否终态',
|
||||
options: booleanOptions
|
||||
}
|
||||
]);
|
||||
|
||||
function reset() {
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
function search() {
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="reset" @search="search" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user