style: lint格式化文件
This commit is contained in:
@ -1,271 +1,258 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div class="w-1/4 xl:w-1/5 left-box">
|
||||
<div class="left-btn-box">
|
||||
<a-button type="primary" @click="handleImport">导入产品BOM</a-button>
|
||||
<a-button @click="handleExport">导出产品BOM</a-button>
|
||||
<a-button type="primary" @click="handleCreate(true)">新增</a-button>
|
||||
</div>
|
||||
<ProductTree ref="treeRef" @select="handleSelect" />
|
||||
</div>
|
||||
<div class="w-3/4 xl:w-4/5 mr-2 bg-white">
|
||||
<BasicTable @register="registerCurrentTable" class="current-box" v-if="hasMaterialInfo">
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleCurrentEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<BasicTable @register="registerSubTable" v-if="hasMaterialInfo" class="sub-box">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate(false)"> {{ t('新增') }} </a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleSubEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<ImportModal
|
||||
@register="registerImportModal"
|
||||
importUrl="/caseErpBom/caseErpBom/import"
|
||||
@success="reload"
|
||||
/>
|
||||
<ProductModal @register="registerModal" @success="reload" />
|
||||
</PageWrapper>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div class="w-1/4 xl:w-1/5 left-box">
|
||||
<div class="left-btn-box">
|
||||
<a-button type="primary" @click="handleImport">导入产品BOM</a-button>
|
||||
<a-button @click="handleExport">导出产品BOM</a-button>
|
||||
<a-button type="primary" @click="handleCreate(true)">新增</a-button>
|
||||
</div>
|
||||
<ProductTree ref="treeRef" @select="handleSelect" />
|
||||
</div>
|
||||
<div class="w-3/4 xl:w-4/5 mr-2 bg-white">
|
||||
<BasicTable @register="registerCurrentTable" class="current-box" v-if="hasMaterialInfo">
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleCurrentEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<BasicTable @register="registerSubTable" v-if="hasMaterialInfo" class="sub-box">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate(false)"> {{ t('新增') }} </a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
onClick: handleSubEdit.bind(null, record)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<ImportModal @register="registerImportModal" importUrl="/caseErpBom/caseErpBom/import" @success="reload" />
|
||||
<ProductModal @register="registerModal" @success="reload" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, createVNode, nextTick } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
|
||||
import {
|
||||
getBomInfo,
|
||||
exportInfo,
|
||||
downloadTemplate,
|
||||
deleteBomMaterial,
|
||||
} from '/@/api/erp/bom/product';
|
||||
import { ref, createVNode, nextTick } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
|
||||
import { getBomInfo, exportInfo, downloadTemplate, deleteBomMaterial } from '/@/api/erp/bom/product';
|
||||
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { ImportModal } from '/@/components/Import';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import ProductModal from './components/ProductModal.vue';
|
||||
import ProductTree from './components/ProductTree.vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编号',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '物料类别',
|
||||
dataIndex: 'typeName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'count',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'unitName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '物料属性',
|
||||
dataIndex: 'propertyName',
|
||||
},
|
||||
];
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { ImportModal } from '/@/components/Import';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import ProductModal from './components/ProductModal.vue';
|
||||
import ProductTree from './components/ProductTree.vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编号',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '物料类别',
|
||||
dataIndex: 'typeName',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'count',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'unitName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '物料属性',
|
||||
dataIndex: 'propertyName'
|
||||
}
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { notification } = useMessage();
|
||||
|
||||
const selectBomId = ref('');
|
||||
const subDataSource = ref([]);
|
||||
const treeRef = ref();
|
||||
const hasMaterialInfo = ref(false);
|
||||
const selectBomId = ref('');
|
||||
const subDataSource = ref([]);
|
||||
const treeRef = ref();
|
||||
const hasMaterialInfo = ref(false);
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerImportModal, { openModal: openImportModal }] = useModal();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerImportModal, { openModal: openImportModal }] = useModal();
|
||||
|
||||
const [registerCurrentTable, { reload: reloadCurrentTable }] = useTable({
|
||||
title: '当前物料信息',
|
||||
api: getBomInfo,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: () => {
|
||||
return { id: selectBomId.value };
|
||||
},
|
||||
afterFetch: (res) => {
|
||||
subDataSource.value = res.length ? res[0].childList || [] : [];
|
||||
},
|
||||
striped: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
const [registerSubTable, { reload: reloadSubTable }] = useTable({
|
||||
title: '子级物料信息',
|
||||
dataSource: subDataSource,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
striped: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
|
||||
function handleCreate(isFirst) {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
parentId: isFirst ? '' : selectBomId.value,
|
||||
const [registerCurrentTable, { reload: reloadCurrentTable }] = useTable({
|
||||
title: '当前物料信息',
|
||||
api: getBomInfo,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
beforeFetch: () => {
|
||||
return { id: selectBomId.value };
|
||||
},
|
||||
afterFetch: (res) => {
|
||||
subDataSource.value = res.length ? res[0].childList || [] : [];
|
||||
},
|
||||
striped: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
parentId: selectBomId.value,
|
||||
const [registerSubTable, { reload: reloadSubTable }] = useTable({
|
||||
title: '子级物料信息',
|
||||
dataSource: subDataSource,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
striped: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleCurrentEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
|
||||
const handleDelete = (record: Recordable) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deleteBomMaterial(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功'),
|
||||
function handleCreate(isFirst) {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
parentId: isFirst ? '' : selectBomId.value
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = (id = '') => {
|
||||
selectBomId.value = id;
|
||||
hasMaterialInfo.value = !!selectBomId.value;
|
||||
if (hasMaterialInfo.value) {
|
||||
nextTick(() => {
|
||||
reloadCurrentTable();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
openImportModal(true, {
|
||||
title: t('快速导入'),
|
||||
api: downloadTemplate,
|
||||
templateTitle: '产品BOM模板',
|
||||
});
|
||||
};
|
||||
const handleExport = async () => {
|
||||
const res = await exportInfo();
|
||||
downloadByData(
|
||||
res.data,
|
||||
'产品BOM.xlsx',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
);
|
||||
};
|
||||
function handleSubEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
parentId: selectBomId.value
|
||||
});
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
reloadCurrentTable();
|
||||
reloadSubTable();
|
||||
treeRef.value.fetch();
|
||||
};
|
||||
function handleCurrentEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
}
|
||||
|
||||
const handleDelete = (record: Recordable) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deleteBomMaterial(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功')
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = (id = '') => {
|
||||
selectBomId.value = id;
|
||||
hasMaterialInfo.value = !!selectBomId.value;
|
||||
if (hasMaterialInfo.value) {
|
||||
nextTick(() => {
|
||||
reloadCurrentTable();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
openImportModal(true, {
|
||||
title: t('快速导入'),
|
||||
api: downloadTemplate,
|
||||
templateTitle: '产品BOM模板'
|
||||
});
|
||||
};
|
||||
const handleExport = async () => {
|
||||
const res = await exportInfo();
|
||||
downloadByData(res.data, '产品BOM.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
reloadCurrentTable();
|
||||
reloadSubTable();
|
||||
treeRef.value.fetch();
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.left-box {
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
.left-box {
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
|
||||
.left-btn-box {
|
||||
margin: 10px 8px 0;
|
||||
.left-btn-box {
|
||||
margin: 10px 8px 0;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
:deep(.ant-btn) {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
|
||||
&:nth-child(2) {
|
||||
color: #fff;
|
||||
background: #e6a23c;
|
||||
border-color: #e6a23c;
|
||||
&:nth-child(2) {
|
||||
color: #fff;
|
||||
background: #e6a23c;
|
||||
border-color: #e6a23c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.current-box {
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sub-box {
|
||||
height: calc(100% - 180px);
|
||||
|
||||
:deep(.ant-table-container) {
|
||||
height: calc(100% - 50px);
|
||||
.current-box {
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sub-box {
|
||||
height: calc(100% - 180px);
|
||||
|
||||
:deep(.ant-table-container) {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,194 +1,188 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:title="getTitle"
|
||||
:width="600"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div class="modal-top">
|
||||
<span class="font-bold">选择物料</span>
|
||||
<a-button type="primary" @click="openModal(true, { shouldVerify: true })">选择物料</a-button>
|
||||
</div>
|
||||
<BasicForm @register="registerForm" />
|
||||
<SelectModal @register="registerSelectModal" @success="handleSuccess" />
|
||||
</BasicModal>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :width="600" @ok="handleSubmit">
|
||||
<div class="modal-top">
|
||||
<span class="font-bold">选择物料</span>
|
||||
<a-button type="primary" @click="openModal(true, { shouldVerify: true })">选择物料</a-button>
|
||||
</div>
|
||||
<BasicForm @register="registerForm" />
|
||||
<SelectModal @register="registerSelectModal" @success="handleSuccess" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import SelectModal from './SelectModal.vue';
|
||||
import { getMaterialListInfo } from '/@/api/erp/material/list';
|
||||
import { getBomInfo, addBomMaterial, updateBomMaterial } from '/@/api/erp/bom/product';
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import SelectModal from './SelectModal.vue';
|
||||
import { getMaterialListInfo } from '/@/api/erp/material/list';
|
||||
import { getBomInfo, addBomMaterial, updateBomMaterial } from '/@/api/erp/bom/product';
|
||||
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
const FormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'code',
|
||||
label: '物料编号',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '物料名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'model',
|
||||
label: '规格型号',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'typeName',
|
||||
label: '物料类别',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'unitName',
|
||||
label: '单位',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'propertyName',
|
||||
label: '物料属性',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: '',
|
||||
},
|
||||
},
|
||||
];
|
||||
const { t } = useI18n();
|
||||
const FormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'code',
|
||||
label: '物料编号',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '物料名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'model',
|
||||
label: '规格型号',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'typeName',
|
||||
label: '物料类别',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'unitName',
|
||||
label: '单位',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'propertyName',
|
||||
label: '物料属性',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
readonly: true,
|
||||
placeholder: ''
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const FormCountSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'count',
|
||||
label: '数量',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
];
|
||||
const FormCountSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'count',
|
||||
label: '数量',
|
||||
component: 'InputNumber',
|
||||
required: true,
|
||||
colProps: { span: 24 }
|
||||
}
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const parentId = ref('');
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const schemas = computed(() => {
|
||||
return parentId.value ? [...FormSchema, ...FormCountSchema] : FormSchema;
|
||||
});
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23,
|
||||
},
|
||||
});
|
||||
const [registerSelectModal, { openModal }] = useModal();
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false, destroyOnClose: true });
|
||||
const { notification } = useMessage();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const parentId = ref('');
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const schemas = computed(() => {
|
||||
return parentId.value ? [...FormSchema, ...FormCountSchema] : FormSchema;
|
||||
});
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23
|
||||
}
|
||||
});
|
||||
const [registerSelectModal, { openModal }] = useModal();
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false, destroyOnClose: true });
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
parentId.value = data?.parentId;
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.id;
|
||||
const record = await getBomInfo({ id: data.id });
|
||||
setFieldsValue({
|
||||
...record[0],
|
||||
});
|
||||
}
|
||||
});
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
parentId.value = data?.parentId;
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.id;
|
||||
const record = await getBomInfo({ id: data.id });
|
||||
setFieldsValue({
|
||||
...record[0]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => {
|
||||
const first = !unref(isUpdate) ? '新增' : '编辑';
|
||||
let last = '';
|
||||
if (!unref(isUpdate)) {
|
||||
last = !unref(parentId) ? '1级BOM' : '子级物料';
|
||||
} else {
|
||||
last = !unref(parentId) ? '当前物料信息' : '子级物料信息';
|
||||
}
|
||||
return first + last;
|
||||
});
|
||||
const getTitle = computed(() => {
|
||||
const first = !unref(isUpdate) ? '新增' : '编辑';
|
||||
let last = '';
|
||||
if (!unref(isUpdate)) {
|
||||
last = !unref(parentId) ? '1级BOM' : '子级物料';
|
||||
} else {
|
||||
last = !unref(parentId) ? '当前物料信息' : '子级物料信息';
|
||||
}
|
||||
return first + last;
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await validate();
|
||||
if (unref(parentId)) {
|
||||
values.parentId = parentId.value;
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
if (!unref(isUpdate)) {
|
||||
await addBomMaterial(values);
|
||||
notification.success({
|
||||
message: '新增物料',
|
||||
description: t('成功'),
|
||||
});
|
||||
} else {
|
||||
values.id = rowId.value;
|
||||
await updateBomMaterial(values);
|
||||
notification.success({
|
||||
message: '编辑物料',
|
||||
description: t('成功'),
|
||||
});
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await validate();
|
||||
if (unref(parentId)) {
|
||||
values.parentId = parentId.value;
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
if (!unref(isUpdate)) {
|
||||
await addBomMaterial(values);
|
||||
notification.success({
|
||||
message: '新增物料',
|
||||
description: t('成功')
|
||||
});
|
||||
} else {
|
||||
values.id = rowId.value;
|
||||
await updateBomMaterial(values);
|
||||
notification.success({
|
||||
message: '编辑物料',
|
||||
description: t('成功')
|
||||
});
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
};
|
||||
closeModal();
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuccess = async (id) => {
|
||||
const data = await getMaterialListInfo(id);
|
||||
setFieldsValue(data);
|
||||
};
|
||||
const handleSuccess = async (id) => {
|
||||
const data = await getMaterialListInfo(id);
|
||||
setFieldsValue(data);
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modal-top {
|
||||
margin: 0 0 10px 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal-top {
|
||||
margin: 0 0 10px 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,45 +1,37 @@
|
||||
<template>
|
||||
<BasicTree
|
||||
search
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:selectedKeys="selectedKeys"
|
||||
expandOnSearch
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
<BasicTree search :clickRowToExpand="true" :treeData="treeData" :selectedKeys="selectedKeys" expandOnSearch :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getBomTree } from '/@/api/erp/bom/product';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getBomTree } from '/@/api/erp/bom/product';
|
||||
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
const emit = defineEmits(['select']);
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
const emit = defineEmits(['select']);
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getBomTree()) as unknown as TreeItem[];
|
||||
let id = treeData.value.length ? treeData.value[0].id : '';
|
||||
selectedKeys.value = [id];
|
||||
emit('select', id);
|
||||
}
|
||||
async function fetch() {
|
||||
treeData.value = (await getBomTree()) as unknown as TreeItem[];
|
||||
let id = treeData.value.length ? treeData.value[0].id : '';
|
||||
selectedKeys.value = [id];
|
||||
emit('select', id);
|
||||
}
|
||||
|
||||
function handleSelect(keys: string, e) {
|
||||
if (!keys.length) selectedKeys.value = [e.node.dataRef.id];
|
||||
emit('select', keys[0] || selectedKeys.value[0]);
|
||||
}
|
||||
function handleSelect(keys: string, e) {
|
||||
if (!keys.length) selectedKeys.value = [e.node.dataRef.id];
|
||||
emit('select', keys[0] || selectedKeys.value[0]);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
fetch,
|
||||
});
|
||||
defineExpose({
|
||||
fetch
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.vben-tree-header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.vben-tree-header) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,98 +1,92 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
title="物料选择"
|
||||
:width="1000"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<BasicTable @register="registerTable" />
|
||||
</BasicModal>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="物料选择" :width="1000" @ok="handleSubmit">
|
||||
<BasicTable @register="registerTable" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getMaterialList } from '/@/api/erp/material/list';
|
||||
import { getVerification } from '/@/api/erp/bom/product';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { isBoolean } from 'lodash-es';
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { getMaterialList } from '/@/api/erp/material/list';
|
||||
import { getVerification } from '/@/api/erp/bom/product';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { isBoolean } from 'lodash-es';
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const emits = defineEmits(['success', 'register']);
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: '',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请输入要查询的关键字',
|
||||
},
|
||||
},
|
||||
];
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const emits = defineEmits(['success', 'register']);
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: '',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请输入要查询的关键字'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '物料属性',
|
||||
dataIndex: 'propertyName',
|
||||
},
|
||||
{
|
||||
title: '物料类别',
|
||||
dataIndex: 'typeName',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
const shouldVerify = ref<boolean>(false);
|
||||
const selectType = ref<any>('radio');
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
|
||||
setModalProps({ destroyOnClose: true });
|
||||
if (isBoolean(data.shouldVerify)) shouldVerify.value = data.shouldVerify;
|
||||
selectType.value = data.type || 'radio';
|
||||
setProps({
|
||||
rowSelection: {
|
||||
type: selectType.value,
|
||||
},
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '物料编码',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '物料名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '物料属性',
|
||||
dataIndex: 'propertyName'
|
||||
},
|
||||
{
|
||||
title: '物料类别',
|
||||
dataIndex: 'typeName',
|
||||
width: 150
|
||||
}
|
||||
];
|
||||
const shouldVerify = ref<boolean>(false);
|
||||
const selectType = ref<any>('radio');
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
|
||||
setModalProps({ destroyOnClose: true });
|
||||
if (isBoolean(data.shouldVerify)) shouldVerify.value = data.shouldVerify;
|
||||
selectType.value = data.type || 'radio';
|
||||
setProps({
|
||||
rowSelection: {
|
||||
type: selectType.value
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const [registerTable, { getSelectRowKeys, getSelectRows, setProps }] = useTable({
|
||||
api: getMaterialList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
striped: false,
|
||||
pagination: false,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
},
|
||||
});
|
||||
const handleSubmit = async () => {
|
||||
if (!getSelectRowKeys()?.length) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: '请选择物料！',
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (shouldVerify.value) await getVerification(getSelectRowKeys()[0]);
|
||||
closeModal();
|
||||
const emitInfo = selectType.value === 'checkbox' ? getSelectRows() : getSelectRowKeys()[0];
|
||||
emits('success', emitInfo);
|
||||
};
|
||||
const [registerTable, { getSelectRowKeys, getSelectRows, setProps }] = useTable({
|
||||
api: getMaterialList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema
|
||||
},
|
||||
useSearchForm: true,
|
||||
striped: false,
|
||||
pagination: false,
|
||||
rowSelection: {
|
||||
type: 'radio'
|
||||
}
|
||||
});
|
||||
const handleSubmit = async () => {
|
||||
if (!getSelectRowKeys()?.length) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: '请选择物料！'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (shouldVerify.value) await getVerification(getSelectRowKeys()[0]);
|
||||
closeModal();
|
||||
const emitInfo = selectType.value === 'checkbox' ? getSelectRows() : getSelectRowKeys()[0];
|
||||
emits('success', emitInfo);
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user