Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(deviceManagement): 替换国际化文本为中文并优化组件样式

Browse Source 
重构设备管理相关视图组件，将国际化文本替换为中文显示，优化按钮样式和布局。主要变更包括：
1. 将按钮文本从$t('btn.xxx')替换为中文
2. 调整部分组件的样式和布局
3. 统一使用el-image替换ImagePreview组件
4. 优化树选择组件实现
5. 调整对话框的关闭行为和样式

这些变更加强了用户体验一致性，移除了国际化依赖，使界面更符合中文用户习惯。
This commit is contained in:
赵正易
2025-09-26 17:30:54 +08:00
parent 25a6ae2980
commit 5e252eccae
20 changed files with 336 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/deviceManagement/components/BaseDeviceAccountTreeSelect/index.vue
View File

@@ -1,24 +1,28 @@
<template>
<div>
<el-tree-select
<Treeselect
style="width: 240px"
v-bind="$attrs"
highlight-current
filterable
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
node-key="value"
:options="deptOptions"
:normalizer="normalizer"
placeholder="请选择设备"
:render-after-expand="false"
clearable />
</div>
</template>
<script>
import * as deviceAccountApi from '@/api/deviceManagement/deviceaccount'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { handleTree } from '@/utils/ruoyi'
export default {
name: 'BaseDeviceTypeTreeSelect',
name: 'BaseDeviceAccountTreeSelect',
components: {
Treeselect
},
data() {
return {
deptOptions: []
@@ -33,9 +37,16 @@ export default {
deviceAccountApi.getSelectTree().then((res) => {
if (res.code == 200) {
console.log(res.data)
this.deptOptions = this.handleTree(res.data, 'id', 'parentId', 'children')
this.deptOptions = handleTree(res.data, 'id', 'parentId', 'children')
}
})
},
normalizer(node) {
return {
id: node.id,
label: node.label,
children: node.children
}
}
}
}

17
src/views/deviceManagement/components/BaseDeviceTypeTreeSelect/index.vue
View File

@@ -1,14 +1,20 @@
<template>
<div>
<el-tree-select v-bind="$attrs" style="width: 240px" :data="deptOptions" :props="{ label: 'name', children: 'children' }" node-key="id" check-strictly placeholder="请选择设备类型" :render-after-expand="false" />
<Treeselect v-bind="$attrs" style="width: 240px" :options="deptOptions" :normalizer="normalizer" placeholder="请选择设备类型" :clearable="true" />
</div>
</template>
<script>
import * as API_devicetype from '@/api/deviceManagement/devicetype'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { handleTree } from '@/utils/ruoyi'
export default {
name: 'BaseDeviceTypeTreeSelect',
components: {
Treeselect
},
data() {
return {
deptOptions: [],
@@ -24,9 +30,16 @@ export default {
getlist() {
API_devicetype.getList(this.queryParams).then((res) => {
if (res.code == 200) {
this.deptOptions = this.handleTree(res.data, 'id', 'parentId', 'children');
this.deptOptions = handleTree(res.data, 'id', 'parentId', 'children');
}
})
},
normalizer(node) {
return {
id: node.id,
label: node.name,
children: node.children
}
}
}
}

72
src/views/deviceManagement/components/devicelist_point/index.vue
View File

@@ -4,7 +4,7 @@
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="handleAdd">
{{ $t('btn.add') }}
添加
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
@@ -24,11 +24,11 @@
<dict-tag :options="options.fkDeviceTypeOptions" :value="scope.row.fkDeviceType" />
</template>
</el-table-column>
<el-table-column prop="deviceName" label="设备名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceName')" />
<el-table-column prop="workshop" label="所属车间" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('workshop')" />
<el-table-column prop="workline" label="所属产线" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('workline')" />
<el-table-column prop="purchaseTime" label="购买时间" :show-overflow-tooltip="true" v-if="columns.showColumn('purchaseTime')" />
<el-table-column prop="supplier" label="设备厂商" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('supplier')" />
<el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns.showColumn('deviceName')" />
<el-table-column prop="workshop" label="所属车间" align="center" v-if="columns.showColumn('workshop')" />
<el-table-column prop="workline" label="所属产线" align="center" v-if="columns.showColumn('workline')" />
<el-table-column prop="purchaseTime" label="购买时间" v-if="columns.showColumn('purchaseTime')" />
<el-table-column prop="supplier" label="设备厂商" align="center" v-if="columns.showColumn('supplier')" />
<el-table-column prop="status" label="设备状态" align="center" v-if="columns.showColumn('status')">
<template #default="scope">
<dict-tag :options="options.statusOptions" :value="scope.row.status" />
@@ -36,27 +36,27 @@
</el-table-column>
<el-table-column prop="deviceImage" label="设备图片" align="center" v-if="columns.showColumn('deviceImage')">
<template #default="scope">
<ImagePreview :src="scope.row.deviceImage"></ImagePreview>
<el-image :src="scope.row.deviceImage"></el-image>
</template>
</el-table-column>
<el-table-column prop="deviceFile" label="设备文件" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceFile')" />
<el-table-column prop="deviceFile" label="设备文件" align="center" v-if="columns.showColumn('deviceFile')" />
<el-table-column
prop="deviceSpecification"
label="设备规格"
align="center"
:show-overflow-tooltip="true"
v-if="columns.showColumn('deviceSpecification')" />
<el-table-column
prop="responsiblePerson"
label="设备负责人"
align="center"
:show-overflow-tooltip="true"
v-if="columns.showColumn('responsiblePerson')" />
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('remark')" />
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('createdBy')" />
<el-table-column prop="createdTime" label="创建时间" :show-overflow-tooltip="true" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="updatedBy" label="更新人" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('updatedBy')" />
<el-table-column prop="updatedTime" label="更新时间" :show-overflow-tooltip="true" v-if="columns.showColumn('updatedTime')" />
<el-table-column prop="remark" label="备注" align="center" v-if="columns.showColumn('remark')" />
<el-table-column prop="createdBy" label="创建人" align="center" v-if="columns.showColumn('createdBy')" />
<el-table-column prop="createdTime" label="创建时间" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="updatedBy" label="更新人" align="center" v-if="columns.showColumn('updatedBy')" />
<el-table-column prop="updatedTime" label="更新时间" v-if="columns.showColumn('updatedTime')" />
<el-table-column label="操作">
<template #default="scope">
<el-button type="danger" size="small" icon="delete" title="删除" @click="handleDelete(scope.row)"></el-button>
@@ -66,7 +66,7 @@
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 选择设备台账 -->
<el-dialog title="选择设备台账" :lock-scroll="false" v-model="open" width="900">
<el-dialog title="选择设备台账" :lock-scroll="false" :close-on-click-modal="false" append-to-body :visible.sync="open" width="900">
<el-form :model="queryParams2" label-position="right" inline ref="queryRef2" v-show="showSearch2" @submit.prevent>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model.trim="queryParams2.deviceName" placeholder="请输入设备名称" clearable />
@@ -82,15 +82,15 @@
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery2">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery2">{{ $t('btn.reset') }}</el-button>
<el-button icon="search" type="primary" @click="handleQuery2">查询</el-button>
<el-button icon="refresh" @click="resetQuery2">刷新</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="success" plain icon="plus" @click="handleBind">
{{ $t('btn.add') }}
新增
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch2" @queryTable="getList" :columns="columns"></right-toolbar>
@@ -112,17 +112,17 @@
<dict-tag :options="options.fkDeviceTypeOptions" :value="scope.row.fkDeviceType" />
</template>
</el-table-column>
<el-table-column prop="deviceName" label="设备名称" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceName')" />
<el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns.showColumn('deviceName')" />
<el-table-column
prop="deviceCode"
label="设备编号（二维码）"
align="center"
:show-overflow-tooltip="true"
v-if="columns.showColumn('deviceCode')" />
<el-table-column prop="workshop" label="所属车间" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('workshop')" />
<el-table-column prop="workline" label="所属产线" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('workline')" />
<el-table-column prop="purchaseTime" label="购买时间" :show-overflow-tooltip="true" v-if="columns.showColumn('purchaseTime')" />
<el-table-column prop="supplier" label="设备厂商" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('supplier')" />
<el-table-column prop="workshop" label="所属车间" align="center" v-if="columns.showColumn('workshop')" />
<el-table-column prop="workline" label="所属产线" align="center" v-if="columns.showColumn('workline')" />
<el-table-column prop="purchaseTime" label="购买时间" v-if="columns.showColumn('purchaseTime')" />
<el-table-column prop="supplier" label="设备厂商" align="center" v-if="columns.showColumn('supplier')" />
<el-table-column prop="status" label="设备状态" align="center" v-if="columns.showColumn('status')">
<template #default="scope">
<dict-tag :options="options.statusOptions" :value="scope.row.status" />
@@ -130,33 +130,33 @@
</el-table-column>
<el-table-column prop="deviceImage" label="设备图片" align="center" v-if="columns.showColumn('deviceImage')">
<template #default="scope">
<ImagePreview :src="scope.row.deviceImage"></ImagePreview>
<el-image :src="scope.row.deviceImage"></el-image>
</template>
</el-table-column>
<el-table-column prop="deviceFile" label="设备文件" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceFile')" />
<el-table-column prop="deviceFile" label="设备文件" align="center" v-if="columns.showColumn('deviceFile')" />
<el-table-column
prop="deviceSpecification"
label="设备规格"
align="center"
:show-overflow-tooltip="true"
v-if="columns.showColumn('deviceSpecification')" />
<el-table-column
prop="responsiblePerson"
label="设备负责人"
align="center"
:show-overflow-tooltip="true"
v-if="columns.showColumn('responsiblePerson')" />
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('remark')" />
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('createdBy')" />
<el-table-column prop="createdTime" label="创建时间" :show-overflow-tooltip="true" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="updatedBy" label="更新人" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('updatedBy')" />
<el-table-column prop="updatedTime" label="更新时间" :show-overflow-tooltip="true" v-if="columns.showColumn('updatedTime')" />
<el-table-column prop="remark" label="备注" align="center" v-if="columns.showColumn('remark')" />
<el-table-column prop="createdBy" label="创建人" align="center" v-if="columns.showColumn('createdBy')" />
<el-table-column prop="createdTime" label="创建时间" v-if="columns.showColumn('createdTime')" />
<el-table-column prop="updatedBy" label="更新人" align="center" v-if="columns.showColumn('updatedBy')" />
<el-table-column prop="updatedTime" label="更新时间" v-if="columns.showColumn('updatedTime')" />
</el-table>
<pagination :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList_nobind" />
<template #footer v-if="opertype != 3">
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
<el-button text @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">提交</el-button>
</template>
</el-dialog>
</div>

18
src/views/deviceManagement/components/devicelist_route/index.vue
View File

@@ -4,7 +4,7 @@
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="handleAdd">
{{ $t('btn.add') }}
新增
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
@@ -36,7 +36,7 @@
</el-table-column>
<el-table-column prop="deviceImage" label="设备图片" align="center" v-if="columns.showColumn('deviceImage')">
<template #default="scope">
<ImagePreview :src="scope.row.deviceImage"></ImagePreview>
<el-image :src="scope.row.deviceImage"></el-image>
</template>
</el-table-column>
<el-table-column prop="deviceFile" label="设备文件" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceFile')" />
@@ -66,7 +66,7 @@
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 选择设备台账 -->
<el-dialog title="选择设备台账" :lock-scroll="false" v-model="open" width="900">
<el-dialog title="选择设备台账" :lock-scroll="false" :close-on-click-modal="false" append-to-body :visible.sync="open" width="900">
<el-form :model="queryParams2" label-position="right" inline ref="queryRef2" v-show="showSearch2" @submit.prevent>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model.trim="queryParams2.deviceName" placeholder="请输入设备名称" clearable />
@@ -82,15 +82,15 @@
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery2">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery2">{{ $t('btn.reset') }}</el-button>
<el-button icon="search" type="primary" @click="handleQuery2">查询</el-button>
<el-button icon="refresh" @click="resetQuery2">重置</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="success" plain icon="plus" @click="handleBind">
{{ $t('btn.add') }}
新增
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch2" @queryTable="getList" :columns="columns"></right-toolbar>
@@ -126,7 +126,7 @@
</el-table-column>
<el-table-column prop="deviceImage" label="设备图片" align="center" v-if="columns.showColumn('deviceImage')">
<template #default="scope">
<ImagePreview :src="scope.row.deviceImage"></ImagePreview>
<el-image :src="scope.row.deviceImage"></el-image>
</template>
</el-table-column>
<el-table-column prop="deviceFile" label="设备文件" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('deviceFile')" />
@@ -156,8 +156,8 @@
<pagination :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList_nobind" />
<template #footer v-if="opertype != 3">
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
<el-button text @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">提交</el-button>
</template>
</el-dialog>
</div>