cn-rdms-web/src/views/infra/state-machine/modules/state-machine-search.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>