|
|
@ -67,13 +67,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
<el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
|
|
|
|
<el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
|
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
|
|
|
|
|
<el-table-column label="产品编码" align="center" prop="code" />
|
|
|
|
<el-table-column label="产品名称" align="center" prop="name" />
|
|
|
|
<el-table-column label="产品名称" align="center" prop="name" />
|
|
|
|
<el-table-column label="产品别名" align="center" prop="alias" />
|
|
|
|
<el-table-column label="产品别名" align="center" prop="alias" />
|
|
|
|
<el-table-column label="产品编码" align="center" prop="code" />
|
|
|
|
<el-table-column label="产品类型" align="center" prop="productsTypeId" />
|
|
|
|
<el-table-column label="规格" align="center" prop="specs" />
|
|
|
|
<el-table-column label="规格" align="center" prop="specs" />
|
|
|
|
<el-table-column label="单位" align="center" prop="unit" />
|
|
|
|
<el-table-column label="单位" align="center" prop="unit" />
|
|
|
|
<el-table-column label="标签" align="center" prop="label" />
|
|
|
|
<el-table-column label="标签" align="center" prop="label" />
|
|
|
|
<el-table-column label="备注" align="center" prop="remark" />
|
|
|
|
<el-table-column label="备注" align="center" prop="remark" />
|
|
|
|
|
|
|
|
<el-table-column label="一级分类名称" align="center" prop="levelOne" />
|
|
|
|
|
|
|
|
<el-table-column label="二级分类名称" align="center" prop="levelTwo" />
|
|
|
|
|
|
|
|
<el-table-column label="三级分类名称" align="center" prop="levelThree" />
|
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
|
<template #default="scope">
|
|
|
|
<template #default="scope">
|
|
|
|
<el-button
|
|
|
|
<el-button
|
|
|
@ -104,7 +108,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 添加或修改产品归档对话框 -->
|
|
|
|
<!-- 添加或修改产品归档对话框 -->
|
|
|
|
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
|
|
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
|
|
|
<el-form-item label="产品名称" prop="name">
|
|
|
|
<el-form-item label="产品名称" prop="name">
|
|
|
|
<el-input v-model="form.name" placeholder="请输入产品名称" />
|
|
|
|
<el-input v-model="form.name" placeholder="请输入产品名称" />
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
@ -126,6 +130,86 @@
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
|
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="产品类型" prop="productsTypeId">
|
|
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
|
|
v-model="form.productsTypeId"
|
|
|
|
|
|
|
|
filterable
|
|
|
|
|
|
|
|
remote
|
|
|
|
|
|
|
|
placeholder="请输入关键词搜索"
|
|
|
|
|
|
|
|
remote-show-suffix
|
|
|
|
|
|
|
|
:remote-method="($event) => remoteMethod($event, remoteProductType)"
|
|
|
|
|
|
|
|
:loading="remoteLoading"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="item in productTypeList"
|
|
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="一级分类" prop="levelOneId">
|
|
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
|
|
v-model="form.levelOneId"
|
|
|
|
|
|
|
|
filterable
|
|
|
|
|
|
|
|
remote
|
|
|
|
|
|
|
|
placeholder="请输入关键词搜索"
|
|
|
|
|
|
|
|
remote-show-suffix
|
|
|
|
|
|
|
|
:remote-method="($event) => remoteMethod($event, remoteCategory)"
|
|
|
|
|
|
|
|
:loading="remoteLoading"
|
|
|
|
|
|
|
|
@focus="remoteFocus(0)"
|
|
|
|
|
|
|
|
@change="handleLevelChange($event, 0)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="item in categoryList"
|
|
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="二级分类" prop="levelTwoId">
|
|
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
|
|
v-model="form.levelTwoId"
|
|
|
|
|
|
|
|
filterable
|
|
|
|
|
|
|
|
remote
|
|
|
|
|
|
|
|
placeholder="请输入关键词搜索"
|
|
|
|
|
|
|
|
remote-show-suffix
|
|
|
|
|
|
|
|
:disabled="form.levelOneId == null"
|
|
|
|
|
|
|
|
:remote-method="($event) => remoteMethod($event, remoteCategory)"
|
|
|
|
|
|
|
|
:loading="remoteLoading"
|
|
|
|
|
|
|
|
@focus="remoteFocus(1)"
|
|
|
|
|
|
|
|
@change="handleLevelChange($event, 1)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="item in categoryList"
|
|
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="三级分类" prop="levelThreeId">
|
|
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
|
|
v-model="form.levelThreeId"
|
|
|
|
|
|
|
|
filterable
|
|
|
|
|
|
|
|
remote
|
|
|
|
|
|
|
|
placeholder="请输入关键词搜索"
|
|
|
|
|
|
|
|
remote-show-suffix
|
|
|
|
|
|
|
|
:disabled="form.levelTwoId == null"
|
|
|
|
|
|
|
|
:remote-method="($event) => remoteMethod($event, remoteCategory)"
|
|
|
|
|
|
|
|
:loading="remoteLoading"
|
|
|
|
|
|
|
|
@focus="remoteFocus(2)"
|
|
|
|
|
|
|
|
@change="handleLevelChange($event, null)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="item in categoryList"
|
|
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
@ -137,8 +221,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
import { listProductsRecord, getProductsRecord, delProductsRecord, addProductsRecord, updateProductsRecord } from "@/api/product/productsRecord";
|
|
|
|
import { listProductsRecord, getProductsRecord, delProductsRecord, addProductsRecord, updateProductsRecord } from "@/api/product/productsRecord";
|
|
|
|
|
|
|
|
import { listCategory } from "@/api/product/category";
|
|
|
|
|
|
|
|
import { listProductsType } from "@/api/product/productsType";
|
|
|
|
|
|
|
|
|
|
|
|
import useForm from '@/hooks/useForm.js';
|
|
|
|
import useForm from '@/hooks/useForm.js';
|
|
|
|
|
|
|
|
import useRemote from "@/hooks/useRemote";
|
|
|
|
|
|
|
|
|
|
|
|
const defaultForm = {
|
|
|
|
const defaultForm = {
|
|
|
|
id: null,
|
|
|
|
id: null,
|
|
|
@ -180,21 +267,28 @@ const data = reactive({
|
|
|
|
showSearch: true,
|
|
|
|
showSearch: true,
|
|
|
|
// 总条数
|
|
|
|
// 总条数
|
|
|
|
total: 0,
|
|
|
|
total: 0,
|
|
|
|
// 分类表格数据
|
|
|
|
// 档案表格数据
|
|
|
|
recordList: [],
|
|
|
|
recordList: [],
|
|
|
|
|
|
|
|
// 分类列表
|
|
|
|
|
|
|
|
categoryList: [],
|
|
|
|
|
|
|
|
// 产品类型列表
|
|
|
|
|
|
|
|
productTypeList: [],
|
|
|
|
// 弹出层标题
|
|
|
|
// 弹出层标题
|
|
|
|
title: "",
|
|
|
|
title: "",
|
|
|
|
// 是否显示弹出层
|
|
|
|
// 是否显示弹出层
|
|
|
|
open: false,
|
|
|
|
open: false,
|
|
|
|
// 表单校验
|
|
|
|
// 表单校验
|
|
|
|
rules: {
|
|
|
|
rules: {
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
categoryType: null,
|
|
|
|
|
|
|
|
levelPIds: ['', ''],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const { loading, ids, single, multiple, showSearch, total, recordList, title, open, rules } = toRefs(data);
|
|
|
|
const { loading, ids, single, multiple, showSearch, total, recordList, title, open, rules, categoryList, categoryType, productTypeList, levelPIds } = toRefs(data);
|
|
|
|
|
|
|
|
|
|
|
|
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
|
|
|
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
|
|
|
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
|
|
|
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
|
|
|
|
|
|
|
const { loading: remoteLoading, remoteMethod } = useRemote();
|
|
|
|
|
|
|
|
|
|
|
|
getList();
|
|
|
|
getList();
|
|
|
|
|
|
|
|
|
|
|
@ -207,6 +301,49 @@ function getList() {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function remoteCategory (query) {
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
|
|
pageSize: 50,
|
|
|
|
|
|
|
|
type: categoryType.value,
|
|
|
|
|
|
|
|
name: query
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (categoryType.value) {
|
|
|
|
|
|
|
|
params.pid = levelPIds.value[categoryType.value - 1];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return listCategory(params).then(response => {
|
|
|
|
|
|
|
|
categoryList.value = response.rows;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function remoteProductType (query) {
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
|
|
pageSize: 50,
|
|
|
|
|
|
|
|
name: query
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return listProductsType(params).then(response => {
|
|
|
|
|
|
|
|
productTypeList.value = response.rows;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function remoteFocus (type) {
|
|
|
|
|
|
|
|
// 0: 一级类别; 1:二级类别; 2:三级类别
|
|
|
|
|
|
|
|
categoryList.value = [];
|
|
|
|
|
|
|
|
categoryType.value = type;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleLevelChange (id, index) {
|
|
|
|
|
|
|
|
if (index == null) return;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
|
|
|
form.value.levelTwoId = form.value.levelThreeId = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
levelPIds.value[index] = id;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 取消按钮
|
|
|
|
// 取消按钮
|
|
|
|
function cancel() {
|
|
|
|
function cancel() {
|
|
|
|
open.value = false;
|
|
|
|
open.value = false;
|
|
|
|