烘胶房及烘胶分类新增
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/xslmes/mesXslDryingCategory/list',
|
||||
checkCategoryName = '/xslmes/mesXslDryingCategory/checkCategoryName',
|
||||
save = '/xslmes/mesXslDryingCategory/add',
|
||||
edit = '/xslmes/mesXslDryingCategory/edit',
|
||||
deleteOne = '/xslmes/mesXslDryingCategory/delete',
|
||||
deleteBatch = '/xslmes/mesXslDryingCategory/deleteBatch',
|
||||
queryById = '/xslmes/mesXslDryingCategory/queryById',
|
||||
queryMaterialList = '/xslmes/mesXslDryingCategory/queryMaterialListByCategoryId',
|
||||
listSelectableMixerMaterials = '/xslmes/mesXslDryingCategory/listSelectableMixerMaterials',
|
||||
exportXls = '/xslmes/mesXslDryingCategory/exportXls',
|
||||
}
|
||||
|
||||
export const getExportUrl = Api.exportXls;
|
||||
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
|
||||
export const queryById = (params: { id: string }) => defHttp.get({ url: Api.queryById, params });
|
||||
|
||||
export const queryMaterialListByCategoryId = (params: { id: string }) =>
|
||||
defHttp.get({ url: Api.queryMaterialList, params });
|
||||
|
||||
export const listSelectableMixerMaterials = (params) =>
|
||||
defHttp.get({ url: Api.listSelectableMixerMaterials, params });
|
||||
|
||||
export const checkCategoryName = (params: { categoryName: string; dataId?: string }) =>
|
||||
defHttp.get(
|
||||
{ url: Api.checkCategoryName, params },
|
||||
{
|
||||
successMessageMode: 'none',
|
||||
errorMessageMode: 'none',
|
||||
},
|
||||
);
|
||||
|
||||
export const deleteOne = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
|
||||
export const batchDelete = (params, handleSuccess) => {
|
||||
createConfirm({
|
||||
iconType: 'warning',
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const saveOrUpdate = (params, isUpdate) => {
|
||||
const url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url, params });
|
||||
};
|
||||
@@ -0,0 +1,66 @@
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
|
||||
import { checkCategoryName } from './MesXslDryingCategory.api';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{ title: '分类名称', align: 'center', dataIndex: 'categoryName', width: 200 },
|
||||
{ title: '创建人', align: 'center', dataIndex: 'createBy', width: 100 },
|
||||
{
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
width: 165,
|
||||
customRender: ({ text }) => (!text ? '' : String(text).length > 19 ? String(text).substring(0, 19) : text),
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{ label: '分类名称', field: 'categoryName', component: 'JInput', colProps: { span: 6 } },
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{ label: '', field: 'id', component: 'Input', show: false },
|
||||
{
|
||||
label: '分类名称',
|
||||
field: 'categoryName',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '同租户内未删除数据中不可重复' },
|
||||
dynamicRules: ({ model }) => [
|
||||
{ required: true, message: '请输入分类名称' },
|
||||
{
|
||||
validator: async (_rule, value) => {
|
||||
const v = value == null ? '' : String(value).trim();
|
||||
if (!v) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
try {
|
||||
await checkCategoryName({ categoryName: v, dataId: model?.id });
|
||||
return Promise.resolve();
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.message || e?.message || '分类名称不能重复';
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const materialJVxeColumns: JVxeColumn[] = [
|
||||
{ title: '', key: 'mixerMaterialId', type: JVxeTypes.hidden },
|
||||
{ title: '物料编码', key: 'materialCode', type: JVxeTypes.normal, width: 140, disabled: true },
|
||||
{ title: '物料名称', key: 'materialName', type: JVxeTypes.normal, width: 180, disabled: true },
|
||||
{ title: '物料描述', key: 'materialDesc', type: JVxeTypes.normal, width: 260, disabled: true },
|
||||
];
|
||||
|
||||
/** 物料明细操作列（编辑/新增时展示） */
|
||||
export const materialActionColumn: JVxeColumn = {
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: JVxeTypes.slot,
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
slotName: 'materialActionSlot',
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<template #tableTitle>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-auth="'mes:mes_xsl_drying_category:add'"
|
||||
@click="handleAdd"
|
||||
preIcon="ant-design:plus-outlined"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-auth="'mes:mes_xsl_drying_category:exportXls'"
|
||||
preIcon="ant-design:export-outlined"
|
||||
@click="onExportXls"
|
||||
>
|
||||
导出
|
||||
</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined" />
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button v-auth="'mes:mes_xsl_drying_category:deleteBatch'">
|
||||
批量操作
|
||||
<Icon icon="mdi:chevron-down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{ label: '编辑', onClick: handleEdit.bind(null, record), auth: 'mes:mes_xsl_drying_category:edit' },
|
||||
]"
|
||||
:dropDownActions="getDropDownAction(record)"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<MesXslDryingCategoryModal @register="registerModal" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="xslmes-mesXslDryingCategory" setup>
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import Icon from '/@/components/Icon';
|
||||
import MesXslDryingCategoryModal from './components/MesXslDryingCategoryModal.vue';
|
||||
import { reactive } from 'vue';
|
||||
import { columns, searchFormSchema } from './MesXslDryingCategory.data';
|
||||
import { list, deleteOne, batchDelete, getExportUrl } from './MesXslDryingCategory.api';
|
||||
|
||||
const queryParam = reactive<any>({});
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
const { tableContext, onExportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '烘胶分类管理',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: true,
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
labelWidth: 100,
|
||||
autoSubmitOnEnter: true,
|
||||
showAdvancedButton: true,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
exportConfig: {
|
||||
name: '烘胶分类管理',
|
||||
url: getExportUrl,
|
||||
params: queryParam,
|
||||
},
|
||||
});
|
||||
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
|
||||
function handleAdd() {
|
||||
openModal(true, { isUpdate: false, showFooter: true });
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: true });
|
||||
}
|
||||
|
||||
function handleDetail(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: false });
|
||||
}
|
||||
|
||||
async function handleDelete(record) {
|
||||
await deleteOne({ id: record.id }, handleSuccess);
|
||||
}
|
||||
|
||||
async function batchHandleDelete() {
|
||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
selectedRowKeys.value = [];
|
||||
reload();
|
||||
}
|
||||
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{ label: '详情', onClick: handleDetail.bind(null, record) },
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record) },
|
||||
auth: 'mes:mes_xsl_drying_category:delete',
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" :title="modalTitle" :width="1000" @register="registerModal" @ok="handleOk">
|
||||
<BasicTable @register="registerTable" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable } from '/@/components/Table';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { listSelectableMixerMaterials } from '../MesXslDryingCategory.api';
|
||||
|
||||
const emit = defineEmits(['register', 'select']);
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const multipleMode = ref(true);
|
||||
const selectedRows = ref<Recordable[]>([]);
|
||||
|
||||
const modalTitle = computed(() =>
|
||||
multipleMode.value ? '选择物料（母炼胶/终炼胶/塑炼胶，可多选）' : '选择物料（母炼胶/终炼胶/塑炼胶）',
|
||||
);
|
||||
|
||||
function handleSelectionChange(_keys: string[], rows: Recordable[]) {
|
||||
selectedRows.value = rows || [];
|
||||
}
|
||||
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
api: listSelectableMixerMaterials,
|
||||
columns: [
|
||||
{ title: '物料编码', dataIndex: 'materialCode', width: 130 },
|
||||
{ title: '物料名称', dataIndex: 'materialName', width: 160 },
|
||||
{ title: '物料大类', dataIndex: 'majorCategoryId_dictText', width: 100 },
|
||||
{ title: '物料小类', dataIndex: 'minorCategoryId_dictText', width: 100 },
|
||||
{ title: '物料描述', dataIndex: 'materialDesc', width: 220, ellipsis: true },
|
||||
],
|
||||
rowKey: 'id',
|
||||
useSearchForm: true,
|
||||
formConfig: {
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{ label: '物料编码', field: 'materialCode', component: 'Input', colProps: { span: 8 } },
|
||||
{ label: '物料名称', field: 'materialName', component: 'Input', colProps: { span: 8 } },
|
||||
],
|
||||
},
|
||||
pagination: { pageSize: 10 },
|
||||
canResize: false,
|
||||
showIndexColumn: false,
|
||||
immediate: true,
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
columnWidth: 48,
|
||||
onChange: handleSelectionChange,
|
||||
},
|
||||
clickToRowSelect: true,
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
multipleMode.value = data?.multiple !== false;
|
||||
selectedRows.value = [];
|
||||
clearSelectedRowKeys?.();
|
||||
setModalProps({ confirmLoading: false });
|
||||
reload();
|
||||
});
|
||||
|
||||
async function handleOk() {
|
||||
let rows = selectedRows.value?.length ? [...selectedRows.value] : ((getSelectRows?.() || []) as Recordable[]);
|
||||
const valid = rows.filter((r) => r?.id && (r.materialCode != null || r.materialName != null));
|
||||
if (!valid.length) {
|
||||
createMessage.warning('请至少选择一条物料');
|
||||
return;
|
||||
}
|
||||
if (multipleMode.value) {
|
||||
emit('select', valid);
|
||||
} else {
|
||||
emit('select', valid[0]);
|
||||
}
|
||||
closeModal();
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
destroyOnClose
|
||||
:title="title"
|
||||
width="960px"
|
||||
@register="registerModal"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<BasicForm @register="registerForm" />
|
||||
<a-divider orientation="left">物料明细</a-divider>
|
||||
<JVxeTable
|
||||
v-if="tableReady"
|
||||
ref="materialTableRef"
|
||||
toolbar
|
||||
row-number
|
||||
keep-source
|
||||
:insert-row="false"
|
||||
:max-height="380"
|
||||
:loading="materialLoading"
|
||||
:columns="materialColumns"
|
||||
:dataSource="materialDataSource"
|
||||
:disabled="!showFooterFlag"
|
||||
:toolbar-config="{ slots: ['suffix'] }"
|
||||
:add-btn-cfg="{ enabled: false }"
|
||||
>
|
||||
<template #toolbarSuffix>
|
||||
<a-button
|
||||
v-if="showFooterFlag"
|
||||
type="primary"
|
||||
preIcon="ant-design:select-outlined"
|
||||
@click="openMaterialSelect"
|
||||
>
|
||||
选择物料
|
||||
</a-button>
|
||||
</template>
|
||||
<template #materialActionSlot="slotProps">
|
||||
<Popconfirm v-if="showFooterFlag" title="确定删除该明细吗？" @confirm="handleRemoveRow(slotProps)">
|
||||
<a>删除</a>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
</JVxeTable>
|
||||
<MesXslDryingCategoryMixerMaterialSelectModal @register="registerMaterialModal" @select="onMaterialsSelect" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, unref } from 'vue';
|
||||
import { Popconfirm } from 'ant-design-vue';
|
||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import type { JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { formSchema, materialJVxeColumns, materialActionColumn } from '../MesXslDryingCategory.data';
|
||||
import { saveOrUpdate, queryById, queryMaterialListByCategoryId } from '../MesXslDryingCategory.api';
|
||||
import MesXslDryingCategoryMixerMaterialSelectModal from './MesXslDryingCategoryMixerMaterialSelectModal.vue';
|
||||
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const { createMessage } = useMessage();
|
||||
const isUpdate = ref(false);
|
||||
const isDetail = ref(false);
|
||||
const showFooterFlag = ref(true);
|
||||
const tableReady = ref(false);
|
||||
const materialLoading = ref(false);
|
||||
const materialDataSource = ref<Recordable[]>([]);
|
||||
const materialTableRef = ref<JVxeTableInstance>();
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
|
||||
labelWidth: 110,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { span: 24 },
|
||||
});
|
||||
|
||||
const [registerMaterialModal, { openModal: openMaterialModal }] = useModal();
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
tableReady.value = false;
|
||||
materialDataSource.value = [];
|
||||
await resetFields();
|
||||
setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isDetail.value = !data?.showFooter;
|
||||
showFooterFlag.value = !!data?.showFooter;
|
||||
setProps({ disabled: !data?.showFooter });
|
||||
if (unref(isUpdate) && data?.record?.id) {
|
||||
materialLoading.value = true;
|
||||
try {
|
||||
const mainRaw = await queryById({ id: data.record.id });
|
||||
const m = (mainRaw as any)?.id != null ? mainRaw : (mainRaw as any)?.result ?? mainRaw;
|
||||
const linesRaw = await queryMaterialListByCategoryId({ id: data.record.id });
|
||||
const list = Array.isArray(linesRaw) ? linesRaw : (linesRaw as any)?.result ?? [];
|
||||
await setFieldsValue({ ...m });
|
||||
materialDataSource.value = [...(list || [])];
|
||||
} finally {
|
||||
materialLoading.value = false;
|
||||
}
|
||||
}
|
||||
tableReady.value = true;
|
||||
});
|
||||
|
||||
const title = computed(() =>
|
||||
!unref(isUpdate) ? '新增烘胶分类' : unref(isDetail) ? '烘胶分类详情' : '编辑烘胶分类',
|
||||
);
|
||||
|
||||
const materialColumns = computed(() =>
|
||||
unref(showFooterFlag) ? [...materialJVxeColumns, materialActionColumn] : materialJVxeColumns,
|
||||
);
|
||||
|
||||
function materialToLineRow(item: Recordable) {
|
||||
return {
|
||||
mixerMaterialId: item.id,
|
||||
materialCode: item.materialCode || '',
|
||||
materialName: item.materialName || '',
|
||||
materialDesc: item.materialDesc || '',
|
||||
};
|
||||
}
|
||||
|
||||
function getExistingMaterialIds(): Set<string> {
|
||||
const tableRef = materialTableRef.value as any;
|
||||
const tableData = (tableRef?.getTableData?.() || materialDataSource.value || []) as Recordable[];
|
||||
const ids = new Set<string>();
|
||||
for (const r of tableData) {
|
||||
if (r?.mixerMaterialId) {
|
||||
ids.add(String(r.mixerMaterialId));
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
function openMaterialSelect() {
|
||||
openMaterialModal(true, { multiple: true });
|
||||
}
|
||||
|
||||
async function handleRemoveRow(slotProps: Recordable) {
|
||||
const tableRef = materialTableRef.value as any;
|
||||
if (!tableRef?.removeRows || !slotProps?.row) {
|
||||
return;
|
||||
}
|
||||
await tableRef.removeRows(slotProps.row);
|
||||
}
|
||||
|
||||
function onMaterialsSelect(payload: Recordable | Recordable[]) {
|
||||
const items = Array.isArray(payload) ? payload : payload ? [payload] : [];
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
const existing = getExistingMaterialIds();
|
||||
const toAdd: Recordable[] = [];
|
||||
const skipped: string[] = [];
|
||||
for (const item of items) {
|
||||
if (!item?.id) {
|
||||
continue;
|
||||
}
|
||||
const id = String(item.id);
|
||||
if (existing.has(id)) {
|
||||
skipped.push(item.materialName || item.materialCode || id);
|
||||
continue;
|
||||
}
|
||||
existing.add(id);
|
||||
toAdd.push(materialToLineRow(item));
|
||||
}
|
||||
if (!toAdd.length) {
|
||||
if (skipped.length) {
|
||||
createMessage.warning('所选物料均已在明细中，未添加新行');
|
||||
}
|
||||
return;
|
||||
}
|
||||
const tableRef = materialTableRef.value as any;
|
||||
if (tableRef?.pushRows) {
|
||||
tableRef.pushRows(toAdd);
|
||||
} else {
|
||||
materialDataSource.value = [...materialDataSource.value, ...toAdd];
|
||||
}
|
||||
if (skipped.length) {
|
||||
createMessage.warning(`已添加 ${toAdd.length} 项，跳过 ${skipped.length} 项重复物料`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
const tableRef = materialTableRef.value as any;
|
||||
const tableData = (tableRef?.getTableData?.() || []) as Recordable[];
|
||||
const materialList = tableData
|
||||
.filter((r) => r && r.mixerMaterialId)
|
||||
.map((r) => ({
|
||||
mixerMaterialId: r.mixerMaterialId,
|
||||
materialCode: r.materialCode,
|
||||
materialName: r.materialName,
|
||||
materialDesc: r.materialDesc,
|
||||
}));
|
||||
if (!materialList.length) {
|
||||
createMessage.warning('请通过「选择物料」至少添加一条明细');
|
||||
return;
|
||||
}
|
||||
const ids = new Set<string>();
|
||||
for (const line of materialList) {
|
||||
if (ids.has(line.mixerMaterialId)) {
|
||||
createMessage.warning('明细中物料不能重复');
|
||||
return;
|
||||
}
|
||||
ids.add(line.mixerMaterialId);
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
await saveOrUpdate({ ...values, materialList }, unref(isUpdate));
|
||||
closeModal();
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/xslmes/mesXslDryingRoom/list',
|
||||
checkRoomCode = '/xslmes/mesXslDryingRoom/checkRoomCode',
|
||||
checkRoomName = '/xslmes/mesXslDryingRoom/checkRoomName',
|
||||
save = '/xslmes/mesXslDryingRoom/add',
|
||||
edit = '/xslmes/mesXslDryingRoom/edit',
|
||||
deleteOne = '/xslmes/mesXslDryingRoom/delete',
|
||||
deleteBatch = '/xslmes/mesXslDryingRoom/deleteBatch',
|
||||
queryById = '/xslmes/mesXslDryingRoom/queryById',
|
||||
}
|
||||
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
|
||||
export const queryById = (params: { id: string }) => defHttp.get({ url: Api.queryById, params });
|
||||
|
||||
export const checkRoomCode = (params: { roomCode: string; dataId?: string }) =>
|
||||
defHttp.get(
|
||||
{ url: Api.checkRoomCode, params },
|
||||
{
|
||||
successMessageMode: 'none',
|
||||
errorMessageMode: 'none',
|
||||
},
|
||||
);
|
||||
|
||||
export const checkRoomName = (params: { roomName: string; dataId?: string }) =>
|
||||
defHttp.get(
|
||||
{ url: Api.checkRoomName, params },
|
||||
{
|
||||
successMessageMode: 'none',
|
||||
errorMessageMode: 'none',
|
||||
},
|
||||
);
|
||||
|
||||
export const deleteOne = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
|
||||
export const batchDelete = (params, handleSuccess) => {
|
||||
createConfirm({
|
||||
iconType: 'warning',
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const saveOrUpdate = (params, isUpdate) => {
|
||||
const url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url, params });
|
||||
};
|
||||
@@ -0,0 +1,126 @@
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import { checkRoomCode, checkRoomName } from './MesXslDryingRoom.api';
|
||||
|
||||
const monthDayPickerProps = {
|
||||
format: 'MM-DD',
|
||||
valueFormat: 'MM-DD',
|
||||
placeholder: '请选择月日',
|
||||
style: { width: '100%' },
|
||||
getPopupContainer: () => document.body,
|
||||
};
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{ title: '烘胶房编码', align: 'center', dataIndex: 'roomCode', width: 140 },
|
||||
{ title: '烘胶房名称', align: 'center', dataIndex: 'roomName', width: 180 },
|
||||
{ title: '烘胶开始日期', align: 'center', dataIndex: 'dryingStartMd', width: 120 },
|
||||
{ title: '烘胶结束日期', align: 'center', dataIndex: 'dryingEndMd', width: 120 },
|
||||
{ title: '创建人', align: 'center', dataIndex: 'createBy', width: 100 },
|
||||
{
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
width: 165,
|
||||
customRender: ({ text }) => (!text ? '' : String(text).length > 19 ? String(text).substring(0, 19) : text),
|
||||
},
|
||||
{ title: '租户ID', align: 'center', dataIndex: 'tenantId', width: 90, defaultHidden: true },
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{ label: '烘胶房编码', field: 'roomCode', component: 'JInput', colProps: { span: 6 } },
|
||||
{ label: '烘胶房名称', field: 'roomName', component: 'JInput', colProps: { span: 6 } },
|
||||
{
|
||||
label: '烘胶开始日期',
|
||||
field: 'dryingStartMd',
|
||||
component: 'DatePicker',
|
||||
componentProps: monthDayPickerProps,
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
label: '烘胶结束日期',
|
||||
field: 'dryingEndMd',
|
||||
component: 'DatePicker',
|
||||
componentProps: monthDayPickerProps,
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{ label: '', field: 'id', component: 'Input', show: false },
|
||||
{
|
||||
label: '烘胶房编码',
|
||||
field: 'roomCode',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '同租户内未删除数据中不可重复' },
|
||||
dynamicRules: ({ model }) => [
|
||||
{ required: true, message: '请输入烘胶房编码' },
|
||||
{
|
||||
validator: async (_rule, value) => {
|
||||
const v = value == null ? '' : String(value).trim();
|
||||
if (!v) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
try {
|
||||
await checkRoomCode({ roomCode: v, dataId: model?.id });
|
||||
return Promise.resolve();
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.message || e?.message || '烘胶房编码不能重复';
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '烘胶房名称',
|
||||
field: 'roomName',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '同租户内未删除数据中不可重复' },
|
||||
dynamicRules: ({ model }) => [
|
||||
{ required: true, message: '请输入烘胶房名称' },
|
||||
{
|
||||
validator: async (_rule, value) => {
|
||||
const v = value == null ? '' : String(value).trim();
|
||||
if (!v) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
try {
|
||||
await checkRoomName({ roomName: v, dataId: model?.id });
|
||||
return Promise.resolve();
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.message || e?.message || '烘胶房名称不能重复';
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '烘胶开始日期',
|
||||
field: 'dryingStartMd',
|
||||
component: 'DatePicker',
|
||||
componentProps: monthDayPickerProps,
|
||||
dynamicRules: () => [
|
||||
{ required: true, message: '请选择烘胶开始日期' },
|
||||
{ pattern: /^(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/, message: '日期格式须为 MM-DD' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '烘胶结束日期',
|
||||
field: 'dryingEndMd',
|
||||
component: 'DatePicker',
|
||||
componentProps: monthDayPickerProps,
|
||||
dynamicRules: () => [
|
||||
{ required: true, message: '请选择烘胶结束日期' },
|
||||
{ pattern: /^(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/, message: '日期格式须为 MM-DD' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const superQuerySchema = {
|
||||
roomCode: { title: '烘胶房编码', order: 0, view: 'text' },
|
||||
roomName: { title: '烘胶房名称', order: 1, view: 'text' },
|
||||
dryingStartMd: { title: '烘胶开始日期', order: 2, view: 'text' },
|
||||
dryingEndMd: { title: '烘胶结束日期', order: 3, view: 'text' },
|
||||
};
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" v-auth="'mes:mes_xsl_drying_room:add'" @click="handleAdd" preIcon="ant-design:plus-outlined">
|
||||
新增
|
||||
</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined" />
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button v-auth="'mes:mes_xsl_drying_room:deleteBatch'">
|
||||
批量操作
|
||||
<Icon icon="mdi:chevron-down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{ label: '编辑', onClick: handleEdit.bind(null, record), auth: 'mes:mes_xsl_drying_room:edit' },
|
||||
]"
|
||||
:dropDownActions="getDropDownAction(record)"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<MesXslDryingRoomModal @register="registerModal" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="xslmes-mesXslDryingRoom" setup>
|
||||
import { reactive } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import Icon from '/@/components/Icon';
|
||||
import MesXslDryingRoomModal from './components/MesXslDryingRoomModal.vue';
|
||||
import { columns, searchFormSchema, superQuerySchema } from './MesXslDryingRoom.data';
|
||||
import { list, deleteOne, batchDelete } from './MesXslDryingRoom.api';
|
||||
|
||||
const queryParam = reactive<any>({});
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
const { tableContext } = useListPage({
|
||||
tableProps: {
|
||||
title: '烘胶房管理',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: true,
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
labelWidth: 110,
|
||||
autoSubmitOnEnter: true,
|
||||
showAdvancedButton: true,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const superQueryConfig = reactive(superQuerySchema);
|
||||
|
||||
function handleSuperQuery(params) {
|
||||
Object.keys(params).forEach((k) => {
|
||||
queryParam[k] = params[k];
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
openModal(true, { isUpdate: false, showFooter: true });
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: true });
|
||||
}
|
||||
|
||||
function handleDetail(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: false });
|
||||
}
|
||||
|
||||
async function handleDelete(record) {
|
||||
await deleteOne({ id: record.id }, handleSuccess);
|
||||
}
|
||||
|
||||
async function batchHandleDelete() {
|
||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
selectedRowKeys.value = [];
|
||||
reload();
|
||||
}
|
||||
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{ label: '详情', onClick: handleDetail.bind(null, record) },
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record) },
|
||||
auth: 'mes:mes_xsl_drying_room:delete',
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-picker) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" :title="title" width="640" v-bind="$attrs" destroyOnClose @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { formSchema } from '../MesXslDryingRoom.data';
|
||||
import { saveOrUpdate } from '../MesXslDryingRoom.api';
|
||||
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const isUpdate = ref(true);
|
||||
const isDetail = ref(false);
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
|
||||
labelWidth: 110,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { span: 24 },
|
||||
});
|
||||
|
||||
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) ? '烘胶房详情' : '编辑烘胶房',
|
||||
);
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
setModalProps({ confirmLoading: true });
|
||||
await saveOrUpdate(values, isUpdate.value);
|
||||
closeModal();
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user