设备类别新增

jeecgboot-vue3/src/views/xslmes/mesXslEquipmentCategory/components/MesXslEquipmentCategoryModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <BasicModal @register="registerModal" :title="title" width="640" v-bind="$attrs" destroyOnClose @ok="handleSubmit">
+    <BasicForm @register="registerForm">
+      <template #processOperationPicker="{ model, field }">
+        <a-input-group compact style="display: flex; width: 100%">
+          <a-input v-model:value="model[field]" read-only placeholder="请选择工序" style="flex: 1" />
+          <a-button type="primary" :disabled="isDetail" @click="openProcessSelect">选择工序</a-button>
+          <a-button v-if="model.processOperationId && !isDetail" @click="clearProcess">清除</a-button>
+        </a-input-group>
+      </template>
+    </BasicForm>
+    <MesXslProcessOperationSelectModal @register="registerProcessModal" @select="onProcessSelect" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, unref } from 'vue';
+  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../MesXslEquipmentCategory.data';
+  import { saveOrUpdate } from '../MesXslEquipmentCategory.api';
+  import MesXslProcessOperationSelectModal from './MesXslProcessOperationSelectModal.vue';
+
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const isDetail = ref(false);
+
+  const [registerProcessModal, { openModal: openProcessModal }] = useModal();
+
+  const [registerForm, { resetFields, setFieldsValue, validate, setProps, getFieldsValue }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !data?.showFooter;
+    if (unref(isUpdate)) await setFieldsValue({ ...data.record });
+    setProps({ disabled: !data?.showFooter });
+  });
+
+  const title = computed(() =>
+    !unref(isUpdate) ? '新增设备类别' : unref(isDetail) ? '设备类别详情' : '编辑设备类别',
+  );
+
+  function openProcessSelect() {
+    const vals = getFieldsValue();
+    openProcessModal(true, { processOperationId: vals.processOperationId });
+  }
+
+  function clearProcess() {
+    setFieldsValue({ processOperationId: '', processOperationName: '' });
+  }
+
+  function onProcessSelect(payload: { processOperationId?: string; processOperationName?: string }) {
+    setFieldsValue({
+      processOperationId: payload.processOperationId || '',
+      processOperationName: payload.processOperationName || '',
+    });
+  }
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      await saveOrUpdate(values, isUpdate.value);
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

jeecgboot-vue3/src/views/xslmes/mesXslEquipmentCategory/components/MesXslProcessOperationSelectModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <BasicModal v-bind="$attrs" title="选择工序" :width="960" @register="registerModal" @ok="handleOk">
+    <BasicTable @register="registerTable" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { list, queryById } from '/@/views/xslmes/mesXslProcessOperation/MesXslProcessOperation.api';
+
+  const emit = defineEmits(['register', 'select']);
+
+  const selectedRow = ref<Recordable | null>(null);
+
+  function handleSelectionChange(_keys: string[], rows: Recordable[]) {
+    selectedRow.value = rows?.[0] ?? null;
+  }
+
+  const [registerTable, { reload, setProps, getSelectRowKeys, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys }] =
+    useTable({
+      api: list,
+      columns: [
+        { title: '工序编码', dataIndex: 'operationCode', width: 140 },
+        { title: '工序名称', dataIndex: 'operationName', width: 200 },
+      ],
+      rowKey: 'id',
+      useSearchForm: true,
+      formConfig: {
+        labelWidth: 90,
+        schemas: [
+          { label: '工序编码', field: 'operationCode', component: 'Input', colProps: { span: 8 } },
+          { label: '工序名称', field: 'operationName', component: 'Input', colProps: { span: 8 } },
+        ],
+      },
+      pagination: { pageSize: 10 },
+      canResize: false,
+      showIndexColumn: false,
+      immediate: true,
+      rowSelection: {
+        type: 'radio',
+        columnWidth: 48,
+        onChange: handleSelectionChange,
+      },
+      clickToRowSelect: true,
+    });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    selectedRow.value = null;
+    clearSelectedRowKeys?.();
+    setProps({
+      rowSelection: {
+        type: 'radio',
+        columnWidth: 48,
+        onChange: handleSelectionChange,
+      },
+      clickToRowSelect: true,
+    });
+    setModalProps({ confirmLoading: false });
+    const pid = data?.processOperationId as string | undefined;
+    if (pid) {
+      setSelectedRowKeys?.([pid]);
+      try {
+        const raw = await queryById({ id: pid });
+        const row = (raw as any)?.id != null ? raw : (raw as any)?.result;
+        if (row) {
+          selectedRow.value = row;
+        }
+      } catch {
+        // 忽略
+      }
+    }
+    reload();
+  });
+
+  async function handleOk() {
+    const keys = (getSelectRowKeys?.() || []) as string[];
+    let row = selectedRow.value || ((getSelectRows?.() || []) as Recordable[])[0];
+    if (!row && keys.length) {
+      try {
+        const raw = await queryById({ id: keys[0] });
+        row = (raw as any)?.id != null ? raw : (raw as any)?.result;
+      } catch {
+        // 忽略
+      }
+    }
+    if (!row?.id) {
+      emit('select', { processOperationId: '', processOperationName: '' });
+      closeModal();
+      return;
+    }
+    emit('select', {
+      processOperationId: row.id,
+      processOperationName: row.operationName || '',
+    });
+    closeModal();
+  }
+</script>