master
吴普建 12 months ago
parent b4458abf52
commit df199d192f

@ -75,6 +75,7 @@ declare namespace List {
numMeasureName: string; numMeasureName: string;
weightMeasureName: string; weightMeasureName: string;
createTime: string; createTime: string;
color?: string;
remark: string; remark: string;
ifEnable: number; ifEnable: number;
}; };
@ -95,6 +96,7 @@ declare namespace List {
specification: string; specification: string;
processRouteId: string | null; processRouteId: string | null;
productName: string; productName: string;
color?: string;
productTypeName?: string; productTypeName?: string;
weightMeasureId: string | null; weightMeasureId: string | null;
weightMeasureName?: string; weightMeasureName?: string;
@ -153,7 +155,7 @@ declare namespace Item {
maxStock: string; maxStock: string;
createTime: string; createTime: string;
remark: string; remark: string;
color: string, color?: string,
ifEnable: number; ifEnable: number;
attr1: string | null; attr1: string | null;
attr2: string | null; attr2: string | null;

@ -1,114 +1,117 @@
<template> <template>
<div> <div>
<my-card title="搜索条件" search> <my-card title="搜索条件" search>
<n-form inline> <n-form inline>
<n-form-item style="width: 180px" label="产品分类"> <n-form-item style="width: 180px" label="产品分类">
<n-tree-select v-model:value="searchForm.productTypeId" :options="typeOptions" placeholder="请输入产品分类" /> <n-tree-select v-model:value="searchForm.productTypeId" :options="typeOptions" placeholder="请输入产品分类" />
</n-form-item> </n-form-item>
<n-form-item label="产品名称"> <n-form-item label="产品名称">
<n-input v-model:value="searchForm.productName" placeholder="请输入产品名称" /> <n-input v-model:value="searchForm.productName" placeholder="请输入产品名称" />
</n-form-item> </n-form-item>
<n-form-item label="产品规格"> <n-form-item label="产品规格">
<n-input v-model:value="searchForm.specification" placeholder="请输入产品规格" /> <n-input v-model:value="searchForm.specification" placeholder="请输入产品规格" />
</n-form-item> </n-form-item>
<n-form-item> <n-form-item>
<n-button type="primary" class="mr-10px" @click="handleSearch"> <n-button type="primary" class="mr-10px" @click="handleSearch">
<icon-ic-round-search class="mr-4px text-20px" /> <icon-ic-round-search class="mr-4px text-20px" />
搜索 搜索
</n-button> </n-button>
<n-button @click="handleReset"> <n-button @click="handleReset">
<icon-ic-round-refresh class="mr-4px text-20px" /> <icon-ic-round-refresh class="mr-4px text-20px" />
重置 重置
</n-button> </n-button>
</n-form-item> </n-form-item>
</n-form> </n-form>
</my-card> </my-card>
<my-card title="产品列表"> <my-card title="产品列表">
<template #right> <template #right>
<div class="flex-center"> <div class="flex-center">
<n-button class="mr-5px" type="primary" size="small" @click="openDialog"> <n-button class="mr-5px" type="primary" size="small" @click="openDialog">
<icon-ic-round-plus class="mr-4px text-20px" /> <icon-ic-round-plus class="mr-4px text-20px" />
新增产品 新增产品
</n-button> </n-button>
<cx-columns v-model:columns="columns" size="small"></cx-columns> <cx-columns v-model:columns="columns" size="small"></cx-columns>
</div> </div>
</template> </template>
<n-data-table <n-data-table
ellipsis ellipsis
:loading="loading" :loading="loading"
:columns="columns" :columns="columns"
:data="data" :data="data"
:max-height="dataTableConfig.maxHeight" :max-height="dataTableConfig.maxHeight"
:scroll-x="dataTableConfig.scrollWidth(columns)" :scroll-x="dataTableConfig.scrollWidth(columns)"
></n-data-table> ></n-data-table>
<my-pagination v-model:search-form="searchForm" @init="init"></my-pagination> <my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
</my-card> </my-card>
<my-dialog <my-dialog
:title="addForm.id ? '编辑产品' : '新增产品'" :title="addForm.id ? '编辑产品' : '新增产品'"
width="750px" width="750px"
:show="showDialog" :show="showDialog"
@cancel="cancel" @cancel="cancel"
@submit="submit" @submit="submit"
> >
<template #content> <template #content>
<div> <div>
<n-form ref="addFormRef" :rules="rules" :model="addForm" label-placement="left" label-width="auto"> <n-form ref="addFormRef" :rules="rules" :model="addForm" label-placement="left" label-width="auto">
<n-grid :cols="24" :x-gap="20"> <n-grid :cols="24" :x-gap="20">
<n-form-item-grid-item label="产品分类" :span="11" path="productTypeName"> <n-form-item-grid-item label="产品分类" :span="11" path="productTypeName">
<n-tree-select <n-tree-select
v-model:value="addForm.productTypeId" v-model:value="addForm.productTypeId"
:options="typeOptions" :options="typeOptions"
placeholder="请输入产品分类" placeholder="请输入产品分类"
@update:value=" @update:value="
(value, item: any) => { (value, item: any) => {
console.log(value, item); console.log(value, item);
addForm.productTypeName = item.label; addForm.productTypeName = item.label;
} }
" "
/> />
</n-form-item-grid-item> </n-form-item-grid-item>
<n-form-item-grid-item label="产品名称" :span="11" path="productTypeId"> <n-form-item-grid-item label="产品名称" :span="11" path="productTypeId">
<n-input v-model:value="addForm.productName" placeholder="请输入产品名称" /> <n-input v-model:value="addForm.productName" placeholder="请输入产品名称" />
</n-form-item-grid-item> </n-form-item-grid-item>
<n-form-item-grid-item label="产品型号" :span="11" path="productSize"> <n-form-item-grid-item label="产品型号" :span="11" path="productSize">
<n-select <n-select
v-model:value="addForm.productSize" v-model:value="addForm.productSize"
filterable filterable
placeholder="请选择主型号" placeholder="请选择主型号"
:options="dictionaryOptions" :options="dictionaryOptions"
@update:value="dictionaryHandleChange" @update:value="dictionaryHandleChange"
/> />
</n-form-item-grid-item> </n-form-item-grid-item>
<n-form-item-grid-item label="产品规格" :span="11" path="specification"> <n-form-item-grid-item label="产品规格" :span="11" path="specification">
<n-input v-model:value="addForm.specification" placeholder="请输入产品规格" /> <n-input v-model:value="addForm.specification" placeholder="请输入产品规格" />
</n-form-item-grid-item> </n-form-item-grid-item>
<n-form-item-grid-item label="重量单位" :span="11" path="weightMeasureName"> <n-form-item-grid-item label="颜色" :span="11" path="color">
<n-select <n-select v-model:value="addForm.color" class="w-200px" :options="corlor_types" placeholder="请选择颜色" ></n-select>
v-model:value="addForm.weightMeasureId" </n-form-item-grid-item>
:options="unitOptions" <n-form-item-grid-item label="单位" :span="11" path="weightMeasureName">
placeholder="请输入重量单位" <n-select
@update:value=" v-model:value="addForm.weightMeasureId"
:options="unitOptions"
placeholder="请输入单位"
@update:value="
(val, item:any) => { (val, item:any) => {
addForm.weightMeasureName = item.label; addForm.weightMeasureName = item.label;
} }
" "
/> />
</n-form-item-grid-item> </n-form-item-grid-item>
<n-form-item-grid-item label="备注" :span="11"> <n-form-item-grid-item label="备注" :span="11">
<n-input v-model:value="addForm.remark" type="textarea" placeholder="请输入输入备注" /> <n-input v-model:value="addForm.remark" type="textarea" placeholder="请输入输入备注" />
</n-form-item-grid-item> </n-form-item-grid-item>
</n-grid> </n-grid>
</n-form> </n-form>
</div> </div>
</template> </template>
</my-dialog> </my-dialog>
</div> </div>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
defineOptions({ defineOptions({
name: 'ListMange' name: 'ListMange'
}); });
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { ref, onMounted, getCurrentInstance } from 'vue'; import { ref, onMounted, getCurrentInstance } from 'vue';
@ -128,202 +131,221 @@ const addFormRef = ref<FormInst | null>(null);
const routeOptions = ref<{ label: string; value: number }[]>([]); const routeOptions = ref<{ label: string; value: number }[]>([]);
const { proxy } = getCurrentInstance() as any; const { proxy } = getCurrentInstance() as any;
const { product_model_standard } = proxy.useDict('product_model_standard'); const { product_model_standard, corlor_types } = proxy.useDict('product_model_standard', "corlor_types");
const dictionaryOptions = product_model_standard; const dictionaryOptions = product_model_standard;
const addForm = ref<List.AddForm>({ const addForm = ref<List.AddForm>({
processRouteName: '', processRouteName: '',
productTypeId: '', productTypeId: '',
productSize: '', productSize: '',
productSizeInternational: '', productSizeInternational: '',
processRouteId: '', processRouteId: '',
specification: '', specification: '',
productName: '', productName: '',
weightMeasureId: null, color: '',
remark: '', weightMeasureId: null,
ifEnable: 1 remark: '',
ifEnable: 1
}); });
const rules = { const rules = {
productTypeId: createRequiredFormRule('请选择产品类型'), productTypeId: createRequiredFormRule('请选择产品类型'),
productSize: createRequiredFormRule('请输入规格型号'), productSize: createRequiredFormRule('请输入规格型号'),
specification: createRequiredFormRule('请输入规格型号'), specification: createRequiredFormRule('请输入规格型号'),
productName: createRequiredFormRule('请输入产品名称'), productName: createRequiredFormRule('请输入产品名称'),
weightMeasureId: createRequiredFormRule('请输入重量单位') weightMeasureId: createRequiredFormRule('请输入重量单位')
}; };
function cancel() { function cancel() {
closeDialog(); closeDialog();
addForm.value = { addForm.value = {
processRouteName: '', processRouteName: '',
productTypeId: '', productTypeId: '',
productName: '', productName: '',
productSize: '', productSize: '',
productSizeInternational: '', productSizeInternational: '',
specification: '', specification: '',
processRouteId: '', processRouteId: '',
weightMeasureId: null, color: '',
remark: '', weightMeasureId: null,
ifEnable: 1 remark: '',
}; ifEnable: 1
};
} }
async function submit() { async function submit() {
console.log(addForm.value); console.log(addForm.value);
if (!addFormRef.value) return; if (!addFormRef.value) return;
addFormRef.value.validate(async errors => { addFormRef.value.validate(async errors => {
if (!errors) { if (!errors) {
routeOptions.value.forEach(item => { routeOptions.value.forEach(item => {
if (item.value === parseInt(addForm.value.processRouteId as string, 10)) { if (item.value === parseInt(addForm.value.processRouteId as string, 10)) {
addForm.value.processRouteName = item.label; addForm.value.processRouteName = item.label;
} }
}); });
if (!addForm.value.id) { if (!addForm.value.id) {
await addProduct(addForm.value).then(res => { await addProduct(addForm.value).then(res => {
if (res.code === 200) { if (res.code === 200) {
message.success('新增成功'); message.success('新增成功');
cancel(); cancel();
init(); init();
} }
}); });
} else { } else {
await editProduct(addForm.value).then(res => { await editProduct(addForm.value).then(res => {
if (res.code === 200) { if (res.code === 200) {
message.success('修改成功'); message.success('修改成功');
cancel(); cancel();
init(); init();
} }
}); });
} }
} }
}); });
} }
const searchForm = ref<List.SearchForm>({ const searchForm = ref<List.SearchForm>({
productTypeId: '', productTypeId: '',
productName: '', productName: '',
specification: '', specification: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
total: 0 total: 0
}); });
function dictionaryHandleChange(val, item) { function dictionaryHandleChange(val, item) {
addForm.value.productSize = item.label; addForm.value.productSize = item.label;
addForm.value.productSizeInternational = val; addForm.value.productSizeInternational = val;
} }
function handleSearch() { function handleSearch() {
console.log(searchForm.value); console.log(searchForm.value);
init(); init();
} }
function handleReset() { function handleReset() {
searchForm.value = { searchForm.value = {
productTypeId: '', productTypeId: '',
productName: '', productName: '',
specification: '', specification: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
total: 0 total: 0
}; };
init(); init();
} }
const columns: Ref<DataTableColumns<List.DataForm>> = ref([ const columns: Ref<DataTableColumns<List.DataForm>> = ref([
{ {
title: '序号', title: '序号',
key: 'index', key: 'index',
align: 'center', align: 'center',
width: 60, width: 60,
render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1 render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1
}, },
{ {
title: '产品分类', title: '产品分类',
key: 'productTypeName', key: 'productTypeName',
align: 'center', align: 'center',
width: 80 width: 80
}, },
{ {
title: '产品名称', title: '产品名称',
key: 'productName', key: 'productName',
align: 'center', align: 'center',
width: 100 width: 100
}, },
{ {
title: '产品编码', title: '产品编码',
key: 'productCode', key: 'productCode',
align: 'center', align: 'center',
width: 130, width: 130,
ellipsis: { ellipsis: {
tooltip: true tooltip: true
} }
}, },
{ {
title: '产品型号', title: '产品型号',
key: 'productSize', key: 'productSize',
align: 'center', align: 'center',
width: 120 width: 120
}, },
{ {
title: '国际型号', title: '颜色',
key: 'productSizeInternational', align: 'center',
align: 'center', key: 'color'
width: 120 },
}, {
{ title: '颜色名称',
title: '产品规格', key: 'status',
key: 'specification', align: 'center',
align: 'center', render: row => {
width: 80 return <dict-tag options={corlor_types.value} value={row.color}></dict-tag>;
}, },
{ width: 110,
title: '单位', ellipsis: {
key: 'weightMeasureName', tooltip: true
align: 'center', }
width: 80 },
}, {
// { title: '国际型号',
// title: '', key: 'productSizeInternational',
// key: 'createTime', align: 'center',
// width: 200 width: 120
// }, },
{ {
title: '备注', title: '产品规格',
align: 'center', key: 'specification',
key: 'remark', align: 'center',
width: 200 width: 80
}, },
{ {
title: '操作', title: '单位',
key: 'action', key: 'weightMeasureName',
align: 'center', align: 'center',
fixed: 'right', width: 80
width: 160, },
render(row) { // {
return ( // title: '',
<div> // key: 'createTime',
<n-button size="small" type="info" class="mr-5px" onClick={() => handleEdit(row)}> // width: 200
<icon-tdesign-edit class="mr-1px text-15px " /> // },
编辑 {
</n-button> title: '备注',
<n-button align: 'center',
size="small" key: 'remark',
type="error" width: 200
class="mr-5px" },
onClick={() => { {
warning.warn(() => { title: '操作',
deleteProduct({ id: row.id }).then(res => { key: 'action',
if (res.code === 200) { align: 'center',
message.success('删除成功'); fixed: 'right',
init(); width: 160,
} else { render(row) {
message.error('删除失败'); return (
} <div>
}); <n-button size="small" type="info" class="mr-5px" onClick={() => handleEdit(row)}>
}); <icon-tdesign-edit class="mr-1px text-15px " />
}} 编辑
> </n-button>
<icon-tdesign-delete class="mr-1px text-15px " /> <n-button
删除 size="small"
</n-button> type="error"
</div> class="mr-5px"
); onClick={() => {
} warning.warn(() => {
} deleteProduct({ id: row.id }).then(res => {
if (res.code === 200) {
message.success('删除成功');
init();
} else {
message.error('删除失败');
}
});
});
}}
>
<icon-tdesign-delete class="mr-1px text-15px " />
删除
</n-button>
</div>
);
}
}
]); ]);
// function optionsToObject(options: { label: string; value: string }[]) { // function optionsToObject(options: { label: string; value: string }[]) {
// const obj = {}; // const obj = {};
@ -334,49 +356,49 @@ const columns: Ref<DataTableColumns<List.DataForm>> = ref([
// } // }
const data = ref<List.DataForm[]>([]); const data = ref<List.DataForm[]>([]);
function handleEdit(row: List.DataForm) { function handleEdit(row: List.DataForm) {
addForm.value = deepClone(row); addForm.value = deepClone(row);
openDialog(); openDialog();
console.log(row); console.log(row);
} }
const typeOptions = ref<{ label: string; value: string }[]>([]); const typeOptions = ref<{ label: string; value: string }[]>([]);
const unitOptions = ref<{ label: string; value: string }[]>([]); const unitOptions = ref<{ label: string; value: string }[]>([]);
async function init() { async function init() {
// typeOptions.value.splice(0, typeOptions.value.length); // typeOptions.value.splice(0, typeOptions.value.length);
startLoading(); startLoading();
await getProductList(searchForm.value).then(res => { await getProductList(searchForm.value).then(res => {
console.log(res); console.log(res);
data.value = res.rows; data.value = res.rows;
searchForm.value.total = res.total; searchForm.value.total = res.total;
}); });
endLoading(); endLoading();
} }
onMounted(() => { onMounted(() => {
init(); init();
// Options // Options
getAllUnitList().then(res => { getAllUnitList().then(res => {
console.log(res); console.log(res);
res.data.forEach(item => { res.data.forEach(item => {
unitOptions.value.push({ unitOptions.value.push({
label: item.measureName, label: item.measureName,
value: item.id value: item.id
}); });
}); });
}); });
// Options // Options
getAllClassifyList({ pageNum: 1 }).then(res => { getAllClassifyList({ pageNum: 1 }).then(res => {
const list: any[] = []; const list: any[] = [];
res.data.forEach(item => { res.data.forEach(item => {
list.push({ list.push({
id: item.id, id: item.id,
parentTypeId: item.parentTypeId, parentTypeId: item.parentTypeId,
key: item.id, key: item.id,
label: item.typeName label: item.typeName
}); });
}); });
typeOptions.value = listToTree(list, 'id', 'parentTypeId'); typeOptions.value = listToTree(list, 'id', 'parentTypeId');
}); });
}); });
</script> </script>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save