Commit 56c8d8fa authored by Mr.Tang's avatar Mr.Tang

车型页面修改

parent 67c00a60
...@@ -9,6 +9,15 @@ export function listModel(query) { ...@@ -9,6 +9,15 @@ export function listModel(query) {
}) })
} }
// 查询国际车型列表
export function listInternationalModel(query) {
return request({
url: '/control/model/list/International',
method: 'get',
params: query,
})
}
// 查询国内车型详细 // 查询国内车型详细
export function getModel(id) { export function getModel(id) {
return request({ return request({
...@@ -16,6 +25,13 @@ export function getModel(id) { ...@@ -16,6 +25,13 @@ export function getModel(id) {
method: 'get', method: 'get',
}) })
} }
// 查询国内车型详细
export function getInternationalModel(id) {
return request({
url: '/control/model/International/' + id,
method: 'get',
})
}
// 新增国内车型 // 新增国内车型
export function addModel(data) { export function addModel(data) {
......
<template>
<div class="app-container">
<el-form
v-show="showSearch"
ref="queryRef"
:model="queryParams"
:inline="true"
label-width="90px"
>
<el-form-item label="车型代码" prop="modelCode">
<el-input
v-model="queryParams.modelCode"
placeholder="请输入"
clearable
style="width: 120px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车型公告号" prop="modelAnnouncementNumber">
<el-input
v-model="queryParams.modelAnnouncementNumber"
placeholder="请输入"
clearable
style="width: 120px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车型系列" prop="modelSeries">
<el-select
v-model="queryParams.modelSeries"
placeholder="请选择"
clearable
style="width: 120px"
>
<el-option
v-for="dict in sys_manufacture"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="是否维护" prop="isMaintained">
<el-select
v-model="queryParams.isMaintained"
placeholder="请选择"
clearable
style="width: 100px"
>
<el-option
v-for="item in vehicle_model_maintenance"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="事业部" prop="businessUnitName">
<el-select
v-model="queryParams.businessUnitName"
placeholder="请选择"
clearable
style="width: 100px"
>
<el-option
v-for="item in allBusinessUnit"
:key="item.id"
:label="item.businessUnitName"
:value="item.businessUnitName || ''"
/>
</el-select>
</el-form-item>
<el-form-item label="发动机型号" prop="engineModel">
<el-input
v-model="queryParams.engineModel"
placeholder="请输入发动机型号"
clearable
style="width: 100px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="认证申报生产地址" prop="productionAddress">
<el-input
v-model="queryParams.productionAddress"
placeholder="请输入"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="制造工厂" prop="manufacturingPlant">
<el-input
v-model="queryParams.manufacturingPlant"
placeholder="请选择"
clearable
style="width: 100px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="CVN" prop="cvn">
<el-input
v-model="queryParams.cvn"
placeholder="请输入"
clearable
style="width: 100px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="CALID" prop="calid">
<el-input
v-model="queryParams.calid"
placeholder="请输入"
clearable
style="width: 100px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button class="btn-A" icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button class="btn-B" icon="Refresh" @click="resetQuery"
>重置</el-button
>
<div>
<el-button
style="
float: left;
margin: 0px 100px;
border: 1px solid #0154fb;
color: #0154fb;
"
@click="handleExport"
>导出</el-button
>
</div>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:add']"
type="primary"
plain
icon="Plus"
@click="handleAdd"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:export']"
type="warning"
plain
icon="Download"
@click="handleExport"
>导出</el-button
>
</el-col>
</el-row>
<el-table
v-loading="loading"
border
:data="modelList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="80">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="事业部" align="center" prop="businessUnitName" />
<el-table-column label="车型代码" align="center" prop="modelCode" />
<el-table-column label="车型系列" align="center" prop="modelSeries" />
<el-table-column
label="车型公告号"
align="center"
prop="modelAnnouncementNumber"
/>
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="是否维护" align="center" prop="isMaintained">
<template #default="scope">
<dict-tag
:options="vehicle_model_maintenance"
:value="scope.row.isMaintained"
/>
</template>
</el-table-column>
<el-table-column label="发动机型号" align="center" prop="engineModel" />
<el-table-column
label="车型代码今年累计产量"
align="center"
prop="modelCodeYearlyProduction"
/>
<el-table-column
label="车型公告号今年累计产量"
align="center"
prop="announcementYearlyProduction"
/>
<el-table-column label="CVN" align="center" prop="cvn" />
<el-table-column label="CALID" align="center" prop="calid" />
<el-table-column
label="认证申报生产地址"
align="center"
prop="productionAddress"
/>
<el-table-column
prop="manufacturingPlant"
align="center"
label="制造工厂"
>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
v-hasPermi="['control:model:edit']"
link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
>补充信息</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<!-- 添加或修改国内车型对话框 -->
<el-dialog v-model="open" :title="title" width="500px" append-to-body>
<el-form ref="modelRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="车型代码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入车型代码" />
</el-form-item>
<el-form-item label="车型系列" prop="modelSeries">
<el-input v-model="form.modelSeries" placeholder="请输入车型系列" />
</el-form-item>
<el-form-item label="车型公告号" prop="modelAnnouncementNumber">
<el-input
v-model="form.modelAnnouncementNumber"
placeholder="请输入车型公告号"
/>
</el-form-item>
<el-form-item label="是否维护" prop="isMaintained">
<el-radio-group v-model="form.isMaintained">
<el-radio
v-for="(item, index) in vehicle_model_maintenance"
:key="index"
:label="parseInt(item.value)"
:disabled="item.disabled"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="生产地址" prop="productionAddress">
<el-input
v-model="form.productionAddress"
placeholder="请输入生产地址"
/>
</el-form-item>
<el-form-item label="制造工厂" prop="manufacturingPlant">
<el-checkbox-group v-model="selectedFactories">
<div style="display: flex; flex-wrap: wrap">
<div
v-for="(factory, index) in allFactories"
:key="index"
style="width: 33%; margin-bottom: 10px"
>
<el-checkbox :label="factory">{{ factory }}</el-checkbox>
</div>
</div>
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button class="btn-B" @click="cancel">取 消</el-button>
<el-button class="btn-A" @click="submitForm">保 存</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Model">
import {
listModel,
getModel,
delModel,
addModel,
updateModel,
} from '@/api/vehicleModelData/domestic'
import { getAllFactoryName } from '@/api/system/factory'
import { getAllBusinessUnitName } from '@/api/system/basicdata/businessunit'
import { ref, toRefs, watch } from 'vue'
const { proxy } = getCurrentInstance()
const { vehicle_model_maintenance } = proxy.useDict('vehicle_model_maintenance')
const modelList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const data = reactive({
form: {
manufacturingPlant: '', // 字符串类型,存储选中的工厂
businessUnitName: '',
isMaintained: '',
},
queryParams: {
pageNum: 1,
pageSize: 10,
businessUnitName: null,
brand: null,
modelCode: null,
modelSeries: null,
modelAnnouncementNumber: null,
isMaintained: null,
engineModel: null,
modelCodeYearlyProduction: null,
announcementYearlyProduction: null,
cvn: null,
calid: null,
productionAddress: null,
manufacturingPlant: null,
},
rules: {},
})
// Vue 中的 v-model 绑定默认是字符串类型。
const allFactories = ref([]) // 所有工厂列表
const selectedFactories = ref([]) // 当前选中的工厂数组
// 监听表单数据变化,初始化选中的工厂
const { queryParams, form, rules } = toRefs(data)
const allBusinessUnit = ref([]) // 获取所有事业部列表
// 获取工厂数据的方法
const fetchFactories = async () => {
try {
const response = await getAllFactoryName()
// 提取factoryName字段
allFactories.value = response.data.map((item) => item.factoryName)
} catch (error) {
console.error('获取工厂列表失败:', error)
}
}
const fetchBusinessUnit = async () => {
try {
const response = await getAllBusinessUnitName()
// 提取factoryName字段
allBusinessUnit.value = response.data.map((item) => item.businessUnitName)
} catch (error) {
console.error('获取工厂列表失败:', error)
}
}
// 监听选中的工厂变化,更新表单字符串数据(使用顿号分隔)
watch(
selectedFactories,
(newVal) => {
// 将数组转换为顿号分隔的字符串
form.value.manufacturingPlant = newVal.join('、') // 注意这里是中文顿号
},
{ deep: true },
)
// 初始化时从字符串转为数组(用于编辑时回显)
watch(
() => form.value.manufacturingPlant,
(newVal) => {
// 使用顿号分割字符串
selectedFactories.value = newVal ? newVal.split('、') : []
},
{ immediate: true },
)
/** 查询国内车型列表 */
function getList() {
loading.value = true
listModel(queryParams.value).then((response) => {
modelList.value = response.rows
total.value = response.total
loading.value = false
})
}
// 取消按钮
function cancel() {
open.value = false
reset()
}
// 表单重置
function reset() {
form.value = {
id: null,
brand: null,
modelCode: null,
modelSeries: null,
modelAnnouncementNumber: null,
isMaintained: null,
engineModel: null,
modelCodeYearlyProduction: null,
announcementYearlyProduction: null,
cvn: null,
calid: null,
productionAddress: null,
manufacturingPlant: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
delFlag: null,
}
proxy.resetForm('modelRef')
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm('queryRef')
handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.id)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
reset()
open.value = true
title.value = '添加国内车型'
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset()
const _id = row.id || ids.value
getModel(_id).then((response) => {
form.value = response.data
open.value = true
title.value = '修改国内车型'
})
}
/** 提交按钮 */
function submitForm() {
proxy.$refs['modelRef'].validate((valid) => {
if (valid) {
if (form.value.id != null) {
updateModel(form.value).then((response) => {
proxy.$modal.msgSuccess('修改成功')
open.value = false
getList()
})
} else {
addModel(form.value).then((response) => {
proxy.$modal.msgSuccess('新增成功')
open.value = false
getList()
})
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value
proxy.$modal
.confirm('是否确认删除国内车型编号为"' + _ids + '"的数据项?')
.then(function () {
return delModel(_ids)
})
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
'control/model/export',
{
...queryParams.value,
},
`model_${new Date().getTime()}.xlsx`,
)
}
onMounted(() => {
fetchFactories()
fetchBusinessUnit()
})
getList()
</script>
<template> <template>
<el-row :gutter="20">
<splitpanes :horizontal="false" class="default-theme">
<!-- 左侧树形结构区域 -->
<el-row>
<el-col :span="4">
<!-- 快速搜索 -->
<div class="head-container">
<el-input
v-model="quickSearchText"
placeholder="请输入节点"
clearable
prefix-icon="Search"
style="margin-bottom: 20px; width: 200px"
/>
</div>
<!-- 树形导航 -->
<div class="head-container">
<el-tree
ref="deptTreeRef"
:data="deptOptions"
:props="treeProps"
node-key="id"
default-expand-all
highlight-current
:expand-on-click-node="false"
style="padding: 0 15px; width: 200px; border: 1px solid #eee"
>
</el-tree>
</div>
</el-col>
<el-col :span="20">
<!-- 右侧表格区域 -->
<el-col style="overflow-x: auto">
<el-form <el-form
v-show="showSearch" v-show="showSearch"
ref="queryRef" ref="queryRef"
:model="queryParams" :model="queryParams"
:inline="true" :inline="true"
label-width="68px" label-width="130px"
> >
<el-form-item label="车型代码" prop="modelCode"> <el-form-item label="车型代码" prop="modelCode">
<el-input <el-input
v-model="queryParams.modelCode" v-model="queryParams.modelCode"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 120px" style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -20,7 +53,7 @@ ...@@ -20,7 +53,7 @@
v-model="queryParams.modelAnnouncementNumber" v-model="queryParams.modelAnnouncementNumber"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 120px" style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -29,7 +62,7 @@ ...@@ -29,7 +62,7 @@
v-model="queryParams.modelSeries" v-model="queryParams.modelSeries"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 120px" style="width: 100px"
> >
<el-option <el-option
v-for="dict in sys_manufacture" v-for="dict in sys_manufacture"
...@@ -54,18 +87,18 @@ ...@@ -54,18 +87,18 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="事业部" prop="businessUnitName"> <el-form-item label="事业部" prop="businessUnitId">
<el-select <el-select
v-model="queryParams.businessUnitName" v-model="queryParams.businessUnitId"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 100px" style="width: 100px"
> >
<el-option <el-option
v-for="item in allBusinessUnit" v-for="item in businessUnitOptions"
:key="item.id" :key="item.id"
:label="item.businessUnitName" :label="item.businessUnitName"
:value="item.businessUnitName || ''" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -84,6 +117,7 @@ ...@@ -84,6 +117,7 @@
v-model="queryParams.productionAddress" v-model="queryParams.productionAddress"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -136,53 +170,65 @@ ...@@ -136,53 +170,65 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:add']"
type="primary"
plain
icon="Plus"
@click="handleAdd"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:export']"
type="warning"
plain
icon="Download"
@click="handleExport"
>导出</el-button
>
</el-col>
</el-row>
<el-table <el-table
v-loading="loading" v-loading="loading"
border border
:data="modelList" :data="modelList"
style="width: 100%"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <!-- 固定左侧的选择列 -->
<el-table-column label="序号" align="center" width="80"> <el-table-column
type="selection"
width="55"
align="center"
fixed="left"
/>
<!-- 序号列(固定) -->
<el-table-column
label="序号"
align="center"
width="80"
fixed="left"
>
<template #default="scope"> <template #default="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="事业部" align="center" prop="businessUnitName" />
<el-table-column label="车型代码" align="center" prop="modelCode" /> <!-- 可滚动的数据列 -->
<el-table-column label="车型系列" align="center" prop="modelSeries" /> <el-table-column
<el-table-column label="动力类型" align="center" prop="powerType" /> label="事业部"
align="center"
prop="businessUnitName"
/>
<el-table-column
label="车型代码"
align="center"
prop="modelCode"
/>
<el-table-column
label="车型系列"
align="center"
prop="modelSeries"
/>
<el-table-column
label="动力类型"
align="center"
prop="powerType"
/>
<el-table-column <el-table-column
label="车型公告号" label="车型公告号"
align="center" align="center"
prop="modelAnnouncementNumber" prop="modelAnnouncementNumber"
/> />
<el-table-column label="品牌" align="center" prop="brand" /> <el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="是否维护" align="center" prop="isMaintained"> <el-table-column
label="是否维护"
align="center"
prop="isMaintained"
>
<template #default="scope"> <template #default="scope">
<dict-tag <dict-tag
:options="vehicle_model_maintenance" :options="vehicle_model_maintenance"
...@@ -190,7 +236,11 @@ ...@@ -190,7 +236,11 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发动机型号" align="center" prop="engineModel" /> <el-table-column
label="发动机型号"
align="center"
prop="engineModel"
/>
<el-table-column <el-table-column
label="车型代码今年累计产量" label="车型代码今年累计产量"
align="center" align="center"
...@@ -201,26 +251,37 @@ ...@@ -201,26 +251,37 @@
align="center" align="center"
prop="announcementYearlyProduction" prop="announcementYearlyProduction"
/> />
<el-table-column label="CVN" align="center" prop="cvn" /> <el-table-column
label="CVN"
align="center"
prop="cvn"
width="120"
/>
<el-table-column label="CALID" align="center" prop="calid" /> <el-table-column label="CALID" align="center" prop="calid" />
<el-table-column <el-table-column
label="认证申报生产地址" label="认证申报生产地址"
align="center" align="center"
prop="productionAddress" prop="productionAddress"
/> />
<el-table-column prop="manufacturingPlant" align="center" label="制造工厂">
</el-table-column>
<el-table-column <el-table-column
label="操作" label="制造工厂"
align="center" align="center"
class-name="small-padding fixed-width" prop="manufacturingPlant"
> width="150"
/>
<!-- 固定右侧的操作列 -->
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-hasPermi="['control:model:edit']"
link link
type="primary" type="primary"
icon="Edit" icon="Edit"
:header-cell-style="{
position: 'sticky',
right: 0,
zIndex: 3,
}"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
>补充信息</el-button >补充信息</el-button
> >
...@@ -235,20 +296,33 @@ ...@@ -235,20 +296,33 @@
:total="total" :total="total"
@pagination="getList" @pagination="getList"
/> />
</el-col>
</el-col>
</el-row>
</splitpanes>
</el-row>
<!-- 添加或修改国内车型对话框 --> <!-- 添加或修改国内车型对话框 -->
<el-dialog v-model="open" :title="title" width="500px" append-to-body> <el-dialog v-model="open" :title="title" width="500px" append-to-body>
<el-form ref="modelRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="modelRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="车型代码" prop="modelCode"> <el-form-item label="车型代码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入车型代码" /> <el-input
v-model="form.modelCode"
placeholder="请输入车型代码"
:disabled="isEditMode"
/>
</el-form-item> </el-form-item>
<el-form-item label="车型系列" prop="modelSeries"> <el-form-item label="车型系列" prop="modelSeries">
<el-input v-model="form.modelSeries" placeholder="请输入车型系列" /> <el-input
v-model="form.modelSeries"
placeholder="请输入车型系列"
:disabled="isEditMode"
/>
</el-form-item> </el-form-item>
<el-form-item label="车型公告号" prop="modelAnnouncementNumber"> <el-form-item label="车型公告号" prop="modelAnnouncementNumber">
<el-input <el-input
v-model="form.modelAnnouncementNumber" v-model="form.modelAnnouncementNumber"
placeholder="请输入车型公告号" placeholder="请输入车型公告号"
:disabled="isEditMode"
/> />
</el-form-item> </el-form-item>
<el-form-item label="是否维护" prop="isMaintained"> <el-form-item label="是否维护" prop="isMaintained">
...@@ -266,6 +340,7 @@ ...@@ -266,6 +340,7 @@
<el-input <el-input
v-model="form.productionAddress" v-model="form.productionAddress"
placeholder="请输入生产地址" placeholder="请输入生产地址"
:disabled="isEditMode"
/> />
</el-form-item> </el-form-item>
<el-form-item label="制造工厂" prop="manufacturingPlant"> <el-form-item label="制造工厂" prop="manufacturingPlant">
...@@ -299,10 +374,12 @@ import { ...@@ -299,10 +374,12 @@ import {
addModel, addModel,
updateModel, updateModel,
} from '@/api/vehicleModelData/domestic' } from '@/api/vehicleModelData/domestic'
import useAppStore from '@/store/modules/app'
import { getAllFactoryName } from '@/api/system/factory' import { getAllFactoryName } from '@/api/system/factory'
import { getAllBusinessUnitName } from '@/api/system/basicdata/businessunit' import { getAllBusinessUnitName } from '@/api/system/basicdata/businessunit'
import { ref, toRefs, watch } from 'vue' import { computed, ref, toRefs, watch } from 'vue'
const appStore = useAppStore()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const { vehicle_model_maintenance } = proxy.useDict('vehicle_model_maintenance') const { vehicle_model_maintenance } = proxy.useDict('vehicle_model_maintenance')
...@@ -325,7 +402,7 @@ const data = reactive({ ...@@ -325,7 +402,7 @@ const data = reactive({
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
businessUnitName: null, businessUnitName: '',
brand: null, brand: null,
modelCode: null, modelCode: null,
modelSeries: null, modelSeries: null,
...@@ -338,15 +415,86 @@ const data = reactive({ ...@@ -338,15 +415,86 @@ const data = reactive({
calid: null, calid: null,
productionAddress: null, productionAddress: null,
manufacturingPlant: null, manufacturingPlant: null,
isDomestic: 0,
businessUnitId: '',
}, },
rules: {}, rules: {},
}) })
// 树形结构固定数据
const deptOptions = ref([
{
id: 0,
label: '全部',
children: [
{
id: 1,
label: 'M36T',
children: [
{
id: 11,
label: '请选择',
options: ['M36T', 'EHY', 'S56'],
},
],
},
{
id: 2,
label: '动力类型',
children: [
{
id: 21,
label: '请选择',
type: 'select',
options: ['ICE', 'BEV'],
},
],
},
{
id: 3,
label: '是否维护',
children: [
{
id: 31,
label: '请选择',
type: 'select',
options: ['是', '否'],
},
],
},
],
},
])
const treeProps = {
label: 'label',
children: 'children',
}
/** 通过条件过滤节点 */
const filterNode = (value, data) => {
if (!value) return true
return data.label.indexOf(value) !== -1
}
/** 根据名称筛选部门树 */
/*watch(modelCode, (val) => {
proxy.$refs['deptTreeRef'].filter(val)
})*/
/** 节点单击事件 */
function handleNodeClick(data) {
queryParams.value.deptId = data.id
handleQuery()
}
// Vue 中的 v-model 绑定默认是字符串类型。 // Vue 中的 v-model 绑定默认是字符串类型。
const allFactories = ref([]) // 所有工厂列表 const allFactories = ref([]) // 所有工厂列表
const selectedFactories = ref([]) // 当前选中的工厂数组 const selectedFactories = ref([]) // 当前选中的工厂数组
// 监听表单数据变化,初始化选中的工厂 // 监听表单数据变化,初始化选中的工厂
const { queryParams, form, rules } = toRefs(data) const { queryParams, form, rules } = toRefs(data)
const allBusinessUnit = ref([]) // 获取所有事业部列表 const businessUnitOptions = ref([]) // 获取所有事业部列表
// 快速搜索文本
const quickSearchText = ref('')
// 原始数据副本
const originalModelList = ref([])
// 获取工厂数据的方法 // 获取工厂数据的方法
const fetchFactories = async () => { const fetchFactories = async () => {
...@@ -360,11 +508,11 @@ const fetchFactories = async () => { ...@@ -360,11 +508,11 @@ const fetchFactories = async () => {
} }
const fetchBusinessUnit = async () => { const fetchBusinessUnit = async () => {
try { try {
const response = await getAllBusinessUnitName() const res = await getAllBusinessUnitName()
// 提取factoryName字段 businessUnitOptions.value = res.data || [] // 确保数据不为null
allBusinessUnit.value = response.data.map((item) => item.businessUnitName)
} catch (error) { } catch (error) {
console.error('获取工厂列表失败:', error) console.error('获取事业部列表失败:', error)
businessUnitOptions.value = [] // 出错时设为空数组
} }
} }
// 监听选中的工厂变化,更新表单字符串数据(使用顿号分隔) // 监听选中的工厂变化,更新表单字符串数据(使用顿号分隔)
...@@ -391,11 +539,40 @@ function getList() { ...@@ -391,11 +539,40 @@ function getList() {
loading.value = true loading.value = true
listModel(queryParams.value).then((response) => { listModel(queryParams.value).then((response) => {
modelList.value = response.rows modelList.value = response.rows
originalModelList.value = [...response.rows] // 保存原始数据
total.value = response.total total.value = response.total
loading.value = false loading.value = false
}) })
} }
// 计算属性实现快速搜索
const filteredList = computed(() => {
if (!quickSearchText.value) return originalModelList.value
const searchText = quickSearchText.value.toLowerCase()
return originalModelList.value.filter((item) => {
return (
(item.modelCode && item.modelCode.toLowerCase().includes(searchText)) ||
(item.modelAnnouncementNumber &&
item.modelAnnouncementNumber.toLowerCase().includes(searchText))
)
})
})
// 监听 filteredList 并更新 modelList
watch(filteredList, (newVal) => {
modelList.value = newVal
})
const handleQuickSearch = () => {
queryParams.value.modelCode = quickSearchText.value
queryParams.value.modelAnnouncementNumber = quickSearchText.value
getList()
}
// 清除快速搜索
const handleQuickSearchClear = () => {
quickSearchText.value = ''
}
// 取消按钮 // 取消按钮
function cancel() { function cancel() {
open.value = false open.value = false
...@@ -453,7 +630,9 @@ function handleAdd() { ...@@ -453,7 +630,9 @@ function handleAdd() {
open.value = true open.value = true
title.value = '添加国内车型' title.value = '添加国内车型'
} }
const isEditMode = computed(() => {
return title.value === '补充信息'
})
/** 修改按钮操作 */ /** 修改按钮操作 */
function handleUpdate(row) { function handleUpdate(row) {
reset() reset()
...@@ -461,7 +640,7 @@ function handleUpdate(row) { ...@@ -461,7 +640,7 @@ function handleUpdate(row) {
getModel(_id).then((response) => { getModel(_id).then((response) => {
form.value = response.data form.value = response.data
open.value = true open.value = true
title.value = '修改国内车型' title.value = '补充信息'
}) })
} }
...@@ -517,3 +696,4 @@ onMounted(() => { ...@@ -517,3 +696,4 @@ onMounted(() => {
}) })
getList() getList()
</script> </script>
<style scoped></style>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
ref="queryRef" ref="queryRef"
:model="queryParams" :model="queryParams"
:inline="true" :inline="true"
label-width="68px" label-width="96px"
> >
<el-form-item label="type" prop="type"> <el-form-item label="type" prop="type">
<el-input <el-input
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
v-model="queryParams.modelCode" v-model="queryParams.modelCode"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -28,14 +29,16 @@ ...@@ -28,14 +29,16 @@
v-model="queryParams.powerType" v-model="queryParams.powerType"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="发动机型号" prop="engineModel"> <el-form-item label="发动机型号" prop="engineModel">
<el-input <el-input
v-model="queryParams.engineModel" v-model="queryParams.engineModel"
placeholder="请输入发动机型号" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -44,6 +47,7 @@ ...@@ -44,6 +47,7 @@
v-model="queryParams.powerBatteryModel" v-model="queryParams.powerBatteryModel"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -52,6 +56,7 @@ ...@@ -52,6 +56,7 @@
v-model="queryParams.transmissionModel" v-model="queryParams.transmissionModel"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 120px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -60,6 +65,7 @@ ...@@ -60,6 +65,7 @@
v-model="queryParams.applicableMarket" v-model="queryParams.applicableMarket"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 120px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -68,7 +74,7 @@ ...@@ -68,7 +74,7 @@
v-model="queryParams.businessUnitName" v-model="queryParams.businessUnitName"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 100px" style="width: 120px"
> >
<el-option <el-option
v-for="item in allBusinessUnit" v-for="item in allBusinessUnit"
...@@ -83,6 +89,7 @@ ...@@ -83,6 +89,7 @@
v-model="queryParams.vehicleCertificate" v-model="queryParams.vehicleCertificate"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -91,6 +98,7 @@ ...@@ -91,6 +98,7 @@
v-model="queryParams.singleCertificate" v-model="queryParams.singleCertificate"
placeholder="请输入" placeholder="请输入"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -99,6 +107,7 @@ ...@@ -99,6 +107,7 @@
v-model="queryParams.isMaintained" v-model="queryParams.isMaintained"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 100px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
...@@ -136,28 +145,6 @@ ...@@ -136,28 +145,6 @@
>新增</el-button >新增</el-button
> >
</el-col> </el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:edit']"
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['control:model:remove']"
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
v-hasPermi="['control:model:export']" v-hasPermi="['control:model:export']"
...@@ -168,10 +155,6 @@ ...@@ -168,10 +155,6 @@
>导出</el-button >导出</el-button
> >
</el-col> </el-col>
<right-toolbar
v-model:show-search="showSearch"
@query-table="getList"
></right-toolbar>
</el-row> </el-row>
<el-table <el-table
...@@ -249,114 +232,53 @@ ...@@ -249,114 +232,53 @@
<!-- 添加或修改国内车型对话框 --> <!-- 添加或修改国内车型对话框 -->
<el-dialog v-model="open" :title="title" width="500px" append-to-body> <el-dialog v-model="open" :title="title" width="500px" append-to-body>
<el-form ref="modelRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="modelRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="品牌" prop="brand"> <el-form-item label="TYPE" prop="type">
<el-input v-model="form.brand" placeholder="请输入品牌" />
</el-form-item>
<el-form-item label="车型代码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入车型代码" />
</el-form-item>
<el-form-item label="车型系列" prop="modelSeries">
<el-input v-model="form.modelSeries" placeholder="请输入车型系列" />
</el-form-item>
<el-form-item label="车型公告号" prop="modelAnnouncementNumber">
<el-input
v-model="form.modelAnnouncementNumber"
placeholder="请输入车型公告号"
/>
</el-form-item>
<el-form-item label="是否维护" prop="isMaintained">
<el-input v-model="form.isMaintained" placeholder="请输入是否维护" />
</el-form-item>
<el-form-item label="发动机型号" prop="engineModel">
<el-input v-model="form.engineModel" placeholder="请输入发动机型号" />
</el-form-item>
<el-form-item label="动力电池型号" prop="powerBatteryModel">
<el-input
v-model="form.powerBatteryModel"
placeholder="请输入动力电池型号"
/>
</el-form-item>
<el-form-item label="变速器型号" prop="transmissionModel">
<el-input <el-input
v-model="form.transmissionModel" v-model="form.type"
placeholder="请输入变速器型号" placeholder="请输入"
/> :disabled="isEditMode"
</el-form-item>
<el-form-item label="适用市场" prop="applicableMarket">
<el-input
v-model="form.applicableMarket"
placeholder="请输入适用市场"
/>
</el-form-item>
<el-form-item label="整车认证证书" prop="vehicleCertificate">
<el-input
v-model="form.vehicleCertificate"
placeholder="请输入整车认证证书"
/> />
</el-form-item> </el-form-item>
<el-form-item label="单项证书" prop="singleCertificate"> <el-form-item label="车型代码" prop="modelCode">
<el-input <el-input
v-model="form.singleCertificate" v-model="form.modelCode"
placeholder="请输入单项证书" placeholder="请输入"
:disabled="isEditMode"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="动力类型" prop="powerType">
label="车型代码今年累计产量"
prop="modelCodeYearlyProduction"
>
<el-input <el-input
v-model="form.modelCodeYearlyProduction" v-model="form.powerType"
placeholder="请输入车型代码今年累计产量" placeholder="请输入"
:disabled="isEditMode"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="是否维护" prop="isMaintained">
label="车型公告号今年累计产量" <el-radio-group v-model="form.isMaintained">
prop="announcementYearlyProduction" <el-radio
v-for="(item, index) in vehicle_model_maintenance"
:key="index"
:label="parseInt(item.value)"
:disabled="item.disabled"
>{{ item.label }}</el-radio
> >
<el-input </el-radio-group>
v-model="form.announcementYearlyProduction"
placeholder="请输入车型公告号今年累计产量"
/>
</el-form-item>
<el-form-item label="今年累计产量" prop="yearlyProduction">
<el-input
v-model="form.yearlyProduction"
placeholder="请输入今年累计产量"
/>
</el-form-item>
<el-form-item label="CVN" prop="cvn">
<el-input v-model="form.cvn" placeholder="请输入CVN" />
</el-form-item>
<el-form-item label="CALID" prop="calid">
<el-input v-model="form.calid" placeholder="请输入CALID" />
</el-form-item>
<el-form-item label="生产地址" prop="productionAddress">
<el-input
v-model="form.productionAddress"
placeholder="请输入生产地址"
/>
</el-form-item> </el-form-item>
<el-form-item label="制造工厂" prop="manufacturingPlant"> <el-form-item label="制造工厂" prop="manufacturingPlant">
<el-input <el-checkbox-group v-model="selectedFactories">
v-model="form.manufacturingPlant" <div style="display: flex; flex-wrap: wrap">
placeholder="请输入制造工厂" <div
/> v-for="(factory, index) in allFactories"
</el-form-item> :key="index"
<el-form-item label="备注" prop="remark"> style="width: 33%; margin-bottom: 10px"
<el-input >
v-model="form.remark" <el-checkbox :label="factory">{{ factory }}</el-checkbox>
type="textarea" </div>
placeholder="请输入内容" </div>
/> </el-checkbox-group>
</el-form-item>
<el-form-item label="${comment}" prop="delFlag">
<el-input v-model="form.delFlag" placeholder="请输入${comment}" />
</el-form-item> </el-form-item>
<el-form-item label="0为国内车型 1为国际车型" prop="isDomestic"> <el-form-item label="整车认证证书编号" prop="vehicleCertificate">
<el-input <el-input v-model="form.vehicleCertificate" placeholder="请输入" />
v-model="form.isDomestic"
placeholder="请输入0为国内车型 1为国际车型"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -370,14 +292,17 @@ ...@@ -370,14 +292,17 @@
<script setup name="Model"> <script setup name="Model">
import { import {
listModel,
getModel,
delModel, delModel,
addModel, addModel,
updateModel, updateModel,
listInternationalModel,
getInternationalModel,
} from '@/api/vehicleModelData/domestic' } from '@/api/vehicleModelData/domestic'
import { getAllFactoryName } from '@/api/system/factory'
import { getAllBusinessUnitName } from '@/api/system/basicdata/businessunit'
import { computed, ref, toRefs, watch } from 'vue'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const { vehicle_model_maintenance } = proxy.useDict('vehicle_model_maintenance')
const modelList = ref([]) const modelList = ref([])
const open = ref(false) const open = ref(false)
...@@ -390,41 +315,80 @@ const total = ref(0) ...@@ -390,41 +315,80 @@ const total = ref(0)
const title = ref('') const title = ref('')
const data = reactive({ const data = reactive({
form: {}, form: {
manufacturingPlant: '', // 字符串类型,存储选中的工厂
businessUnitName: '',
isMaintained: '',
},
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
brand: null,
type: null, type: null,
modelCode: null, modelCode: null,
powerType: null, powerType: null,
modelSeries: null,
modelAnnouncementNumber: null,
isMaintained: null,
engineModel: null, engineModel: null,
powerBatteryModel: null, powerBatteryModel: null,
transmissionModel: null, transmissionModel: null,
applicableMarket: null, applicableMarket: null,
brand: null,
vehicleCertificate: null, vehicleCertificate: null,
singleCertificate: null, singleCertificate: null,
modelCodeYearlyProduction: null, isMaintained: null,
announcementYearlyProduction: null,
yearlyProduction: null, yearlyProduction: null,
cvn: null, isDomestic: 1,
calid: null,
productionAddress: null,
manufacturingPlant: null,
isDomestic: null,
}, },
rules: {}, rules: {},
}) })
// Vue 中的 v-model 绑定默认是字符串类型。
const allFactories = ref([]) // 所有工厂列表
const selectedFactories = ref([]) // 当前选中的工厂数组
// 监听表单数据变化,初始化选中的工厂
const { queryParams, form, rules } = toRefs(data) const { queryParams, form, rules } = toRefs(data)
const allBusinessUnit = ref([]) // 获取所有事业部列表
// 获取工厂数据的方法
const fetchFactories = async () => {
try {
const response = await getAllFactoryName()
// 提取factoryName字段
allFactories.value = response.data.map((item) => item.factoryName)
} catch (error) {
console.error('获取工厂列表失败:', error)
}
}
const fetchBusinessUnit = async () => {
try {
const response = await getAllBusinessUnitName()
// 提取factoryName字段
allBusinessUnit.value = response.data.map((item) => item.businessUnitName)
} catch (error) {
console.error('获取工厂列表失败:', error)
}
}
// 监听选中的工厂变化,更新表单字符串数据(使用顿号分隔)
watch(
selectedFactories,
(newVal) => {
// 将数组转换为顿号分隔的字符串
form.value.manufacturingPlant = newVal.join('、') // 注意这里是中文顿号
},
{ deep: true },
)
// 初始化时从字符串转为数组(用于编辑时回显)
watch(
() => form.value.manufacturingPlant,
(newVal) => {
// 使用顿号分割字符串
selectedFactories.value = newVal ? newVal.split('、') : []
},
{ immediate: true },
)
/** 查询国内车型列表 */ /** 查询国内车型列表 */
function getList() { function getList() {
loading.value = true loading.value = true
listModel(queryParams.value).then((response) => { listInternationalModel(queryParams.value).then((response) => {
modelList.value = response.rows modelList.value = response.rows
total.value = response.total total.value = response.total
loading.value = false loading.value = false
...@@ -497,15 +461,17 @@ function handleAdd() { ...@@ -497,15 +461,17 @@ function handleAdd() {
open.value = true open.value = true
title.value = '添加国内车型' title.value = '添加国内车型'
} }
const isEditMode = computed(() => {
return title.value === '补充信息'
})
/** 修改按钮操作 */ /** 修改按钮操作 */
function handleUpdate(row) { function handleUpdate(row) {
reset() reset()
const _id = row.id || ids.value const _id = row.id || ids.value
getModel(_id).then((response) => { getInternationalModel(_id).then((response) => {
form.value = response.data form.value = response.data
open.value = true open.value = true
title.value = '修改国内车型' title.value = '补充信息'
}) })
} }
...@@ -555,6 +521,9 @@ function handleExport() { ...@@ -555,6 +521,9 @@ function handleExport() {
`model_${new Date().getTime()}.xlsx`, `model_${new Date().getTime()}.xlsx`,
) )
} }
onMounted(() => {
fetchFactories()
fetchBusinessUnit()
})
getList() getList()
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment