3a064eb09f
- 新增状态机模型和状态流转的完整 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/: 新增状态机管理页面及子组件
143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<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>
|