yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(dialog): 优化选择对话框的搜索表单和数据表格 

调整了 MdClientSelectDialog、MdItemSelectDialog 和 MdVendorSelectDialog 组件的搜索表单样式，增加了英文名称和状态的输入项，提升了用户体验。同时，重构了数据表格的结构，确保一致性和可读性。
pull/871/MERGE
YunaiV 2026-04-06 12:04:13 +08:00
parent 5f61294aad
commit f1aa3e0b5e
3 changed files with 304 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/views/mes/md/client/components/MdClientSelectDialog.vue
View File

@ -11,97 +11,102 @@
<template>
<Dialog title="客户选择" v-model="dialogVisible" width="70%">
<!-- 搜索表单 -->
<el-form :inline="true" :model="queryParams" class="mb-10px" label-width="80px">
<el-form-item label="客户编码">
<el-input
v-model="queryParams.code"
placeholder="请输入客户编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称">
<el-input
v-model="queryParams.name"
placeholder="请输入客户名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="客户简称">
<el-input
v-model="queryParams.nickname"
placeholder="请输入客户简称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
<ContentWrap>
<el-form :inline="true" :model="queryParams" label-width="68px">
<el-form-item label="客户编码">
<el-input
v-model="queryParams.code"
placeholder="请输入客户编码"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</template>
</el-table-column>
<el-table-column label="客户编码" align="center" prop="code" width="200" />
<el-table-column label="客户名称" align="left" prop="name" min-width="150" />
<el-table-column label="客户简称" align="center" prop="nickname" width="120" />
<el-table-column label="客户类型" align="center" prop="type" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CLIENT_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="联系人" align="center" prop="contact1Name" width="100" />
<el-table-column label="联系电话" align="center" prop="telephone" width="130" />
<el-table-column label="状态" align="center" prop="status" width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<div class="overflow-hidden">
</el-form-item>
<el-form-item label="客户名称">
<el-input
v-model="queryParams.name"
placeholder="请输入客户名称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="客户简称">
<el-input
v-model="queryParams.nickname"
placeholder="请输入客户简称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<ContentWrap>
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="客户编码" align="center" prop="code" width="200" />
<el-table-column label="客户名称" align="left" prop="name" min-width="150" />
<el-table-column label="客户简称" align="center" prop="nickname" width="120" />
<el-table-column label="客户类型" align="center" prop="type" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_CLIENT_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="联系人" align="center" prop="contact1Name" width="100" />
<el-table-column label="联系电话" align="center" prop="telephone" width="130" />
<el-table-column label="状态" align="center" prop="status" width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</ContentWrap>
<template #footer>
<el-button type="primary" @click="confirmSelect">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>

178
src/views/mes/md/item/components/MdItemSelectDialog.vue
View File

@ -12,96 +12,104 @@
<Dialog title="物料产品选择" v-model="dialogVisible" width="80%">
<el-row :gutter="20">
<!-- 左侧：分类树 -->
<el-col :span="5">
<MdItemTypeTree ref="typeTreeRef" @node-click="handleNodeClick" />
<el-col :span="5" :xs="24">
<ContentWrap class="h-1/1">
<MdItemTypeTree ref="typeTreeRef" @node-click="handleNodeClick" />
</ContentWrap>
</el-col>
<!-- 右侧：物料表格 -->
<el-col :span="19">
<el-col :span="19" :xs="24">
<!-- 搜索表单 -->
<el-form :inline="true" :model="queryParams" class="mb-10px" label-width="80px">
<el-form-item label="物料编码">
<el-input
v-model="queryParams.code"
placeholder="请输入物料编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="物料名称">
<el-input
v-model="queryParams.name"
placeholder="请输入物料名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
<ContentWrap>
<el-form :inline="true" :model="queryParams" label-width="68px">
<el-form-item label="物料编码">
<el-input
v-model="queryParams.code"
placeholder="请输入物料编码"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</template>
</el-table-column>
<el-table-column label="物料编码" align="center" prop="code" width="200" />
<el-table-column label="物料名称" align="left" prop="name" min-width="150" />
<el-table-column label="规格型号" align="left" prop="specification" min-width="120" />
<el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
<el-table-column label="物料/产品" align="center" prop="itemOrProduct" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_MD_ITEM_OR_PRODUCT" :value="scope.row.itemOrProduct" />
</template>
</el-table-column>
<el-table-column label="所属分类" align="center" prop="itemTypeName" width="120" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
</el-form-item>
<el-form-item label="物料名称">
<el-input
v-model="queryParams.name"
placeholder="请输入物料名称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<ContentWrap>
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="物料编码" align="center" prop="code" width="200" />
<el-table-column label="物料名称" align="left" prop="name" min-width="150" />
<el-table-column label="规格型号" align="left" prop="specification" min-width="120" />
<el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
<el-table-column label="物料/产品" align="center" prop="itemOrProduct" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_MD_ITEM_OR_PRODUCT" :value="scope.row.itemOrProduct" />
</template>
</el-table-column>
<el-table-column label="所属分类" align="center" prop="itemTypeName" width="120" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</el-col>
</el-row>
<template #footer>

208
src/views/mes/md/vendor/components/MdVendorSelectDialog.vue vendored
View File

@ -10,97 +10,127 @@
-->
<template>
<Dialog title="供应商选择" v-model="dialogVisible" width="70%">
<!-- 搜索表单 -->
<el-form :inline="true" :model="queryParams" class="mb-10px" label-width="80px">
<el-form-item label="供应商编码">
<el-input
v-model="queryParams.code"
placeholder="请输入供应商编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="供应商名称">
<el-input
v-model="queryParams.name"
placeholder="请输入供应商名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="供应商简称">
<el-input
v-model="queryParams.nickname"
placeholder="请输入供应商简称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
<ContentWrap>
<el-form :inline="true" :model="queryParams" label-width="85px">
<el-form-item label="供应商编码">
<el-input
v-model="queryParams.code"
placeholder="请输入供应商编码"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</template>
</el-table-column>
<el-table-column label="供应商编码" align="center" prop="code" width="200" />
<el-table-column label="供应商名称" align="left" prop="name" min-width="150" />
<el-table-column label="供应商简称" align="center" prop="nickname" width="120" />
<el-table-column label="供应商等级" align="center" prop="level" width="110">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_VENDOR_LEVEL" :value="scope.row.level" />
</template>
</el-table-column>
<el-table-column label="联系电话" align="center" prop="telephone" width="130" />
<el-table-column label="状态" align="center" prop="status" width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<div class="overflow-hidden">
</el-form-item>
<el-form-item label="供应商名称">
<el-input
v-model="queryParams.name"
placeholder="请输入供应商名称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="供应商简称">
<el-input
v-model="queryParams.nickname"
placeholder="请输入供应商简称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="英文名称">
<el-input
v-model="queryParams.englishName"
placeholder="请输入英文名称"
clearable
@keyup.enter="handleQuery"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="状态">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
class="!w-220px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
<ContentWrap>
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
border
row-key="id"
:highlight-current-row="!multiple"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
>
<!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
<el-table-column
v-if="multiple"
type="selection"
:reserve-selection="true"
width="50"
align="center"
/>
<!-- 单选：radio -->
<el-table-column v-else width="50" align="center">
<template #default="{ row }">
<el-radio
v-model="selectedRadioId"
:value="row.id"
class="radio-no-label"
@change="handleRadioChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="供应商编码" align="center" prop="code" width="200" />
<el-table-column label="供应商名称" align="left" prop="name" min-width="150" />
<el-table-column label="供应商简称" align="center" prop="nickname" width="120" />
<el-table-column label="供应商等级" align="center" prop="level" width="110">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MES_VENDOR_LEVEL" :value="scope.row.level" />
</template>
</el-table-column>
<el-table-column label="供应商评分" align="center" prop="score" width="100" />
<el-table-column label="联系电话" align="center" prop="telephone" width="130" />
<el-table-column label="状态" align="center" prop="status" width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" min-width="120" />
</el-table>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</ContentWrap>
<template #footer>
<el-button type="primary" @click="confirmSelect">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
@ -109,7 +139,7 @@
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { MdVendorApi, MdVendorVO } from '@/api/mes/md/vendor'
defineOptions({ name: 'MdVendorSelectDialog' })
@ -178,7 +208,9 @@ const queryParams = reactive({
pageSize: 10, // 每页条数
code: undefined as string | undefined, // 供应商编码
name: undefined as string | undefined, // 供应商名称
nickname: undefined as string | undefined // 供应商简称
nickname: undefined as string | undefined, // 供应商简称
englishName: undefined as string | undefined, // 英文名称
status: undefined as number | undefined // 状态
})
/** 查询供应商列表 */
@ -230,6 +262,8 @@ const resetQuery = () => {
queryParams.code = undefined
queryParams.name = undefined
queryParams.nickname = undefined
queryParams.englishName = undefined
queryParams.status = undefined
handleQuery()
}
@ -260,6 +294,8 @@ const open = async (selectedIds?: number[]) => {
queryParams.code = undefined
queryParams.name = undefined
queryParams.nickname = undefined
queryParams.englishName = undefined
queryParams.status = undefined
queryParams.pageNo = 1
// 清空上一次的选中状态
selectedRows.value = []