xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change(mes): (MeterSphere100020)【设备类型信息】新增界面优化

Browse Source 
- 移除不必要的搜索字段
- 更新表格列显示内容
- 添加设备大类选择功能
- 优化激活标识显示和选择
- 调整表单布局和字段
- 添加字典数据获取
master
zch 3 months ago
parent 3ed4060f2a
commit ee2d99919c
2 changed files with 122 additions and 49 deletions
Show Stats Download Patch File Download Diff File

12
src/api/mes/baseDeviceType/types.ts
Unescape Escape View File

@ -27,7 +27,7 @@ export interface BaseDeviceTypeVO {
/**
* 设备大类ID（大类ID（关联base_category表category_type为2的））
*/
categoryId: string | number;
deviceCategoryId: string | number;
/**
* 激活标识（1是 0否）
@ -39,6 +39,8 @@ export interface BaseDeviceTypeVO {
*/
remark: string;
deviceCategoryName: string;
}
export interface BaseDeviceTypeForm extends BaseEntity {
@ -70,7 +72,7 @@ export interface BaseDeviceTypeForm extends BaseEntity {
/**
* 设备大类ID（大类ID（关联base_category表category_type为2的））
*/
categoryId?: string | number;
deviceCategoryId?: string | number;
/**
* 激活标识（1是 0否）
@ -82,6 +84,8 @@ export interface BaseDeviceTypeForm extends BaseEntity {
*/
remark?: string;
deviceCategoryName?: string;
}
export interface BaseDeviceTypeQuery extends PageQuery {
@ -114,7 +118,7 @@ export interface BaseDeviceTypeQuery extends PageQuery {
/**
* 设备大类ID（大类ID（关联base_category表category_type为2的））
*/
categoryId?: string | number;
deviceCategoryId?: string | number;
/**
* 激活标识（1是 0否）
@ -125,6 +129,8 @@ export interface BaseDeviceTypeQuery extends PageQuery {
* 日期范围参数
*/
params?: any;
deviceCategoryName?: string;
}

159
src/views/mes/baseDeviceType/index.vue
Unescape Escape View File

@ -4,27 +4,27 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="物料类型ID" prop="deviceTypeId">
<!-- <el-form-item label="物料类型ID" prop="deviceTypeId">
<el-input v-model="queryParams.deviceTypeId" placeholder="请输入物料类型ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="父级标识" prop="parentId">
</el-form-item>-->
<!-- <el-form-item label="父级标识" prop="parentId">
<el-input v-model="queryParams.parentId" placeholder="请输入父级标识" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备类型编号" prop="deviceTypeCode">
</el-form-item>-->
<!-- <el-form-item label="设备类型编号" prop="deviceTypeCode">
<el-input v-model="queryParams.deviceTypeCode" placeholder="请输入设备类型编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备类型名称" prop="deviceTypeName">
</el-form-item>-->
<el-form-item label="设备类型名称" prop="deviceTypeName" label-width="100px">
<el-input v-model="queryParams.deviceTypeName" placeholder="请输入设备类型名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="祖级列表" prop="ancestors">
<!-- <el-form-item label="祖级列表" prop="ancestors">
<el-input v-model="queryParams.ancestors" placeholder="请输入祖级列表" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备大类ID" prop="categoryId">
<el-input v-model="queryParams.categoryId" placeholder="请输入设备大类ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
</el-form-item>-->
<!-- <el-form-item label="激活标识" prop="activeFlag">
<el-input v-model="queryParams.activeFlag" placeholder="请输入激活标识" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
@ -55,13 +55,17 @@
<el-table v-loading="loading" :data="baseDeviceTypeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="物料类型ID" align="center" prop="deviceTypeId" v-if="columns[0].visible"/>
<el-table-column label="设备类型" align="center" prop="deviceTypeId" v-if="columns[0].visible"/>
<el-table-column label="父级标识" align="center" prop="parentId" v-if="columns[2].visible"/>
<el-table-column label="设备类型编号" align="center" prop="deviceTypeCode" v-if="columns[3].visible"/>
<el-table-column label="设备类型名称" align="center" prop="deviceTypeName" v-if="columns[4].visible"/>
<el-table-column label="祖级列表" align="center" prop="ancestors" v-if="columns[5].visible"/>
<el-table-column label="设备大类ID" align="center" prop="categoryId" v-if="columns[6].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[7].visible"/>
<el-table-column label="设备大类" align="center" prop="deviceCategoryName" v-if="columns[6].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[7].visible">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.activeFlag' />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
@ -77,14 +81,23 @@
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改设备类型信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="baseDeviceTypeFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="物料类型ID" prop="deviceTypeId">
<el-input v-model="form.deviceTypeId" placeholder="请输入物料类型ID" />
</el-form-item>
<el-form ref="baseDeviceTypeFormRef" :model="form" :rules="rules" label-width="120px">
<!-- <el-form-item label="设备类型" prop="deviceTypeId">
<el-input v-model="form.deviceTypeId" placeholder="请输入设备类型ID" />
</el-form-item>-->
<el-form-item label="父级标识" prop="parentId">
<el-input v-model="form.parentId" placeholder="请输入父级标识" />
<!-- <el-input v-model="form.parentId" placeholder="请输入父级标识" />-->
<el-tree-select
v-model="form.parentId"
:data="baseOptions"
:props="{ value: 'deviceTypeId', label: 'deviceTypeName', children: 'children' }"
value-key="deviceTypeId"
placeholder="请选择父级标识"
check-strictly
/>
</el-form-item>
<el-form-item label="设备类型编号" prop="deviceTypeCode">
<el-input v-model="form.deviceTypeCode" placeholder="请输入设备类型编号" />
@ -92,14 +105,30 @@
<el-form-item label="设备类型名称" prop="deviceTypeName">
<el-input v-model="form.deviceTypeName" placeholder="请输入设备类型名称" />
</el-form-item>
<el-form-item label="祖级列表" prop="ancestors">
<!-- <el-form-item label="祖级列表" prop="ancestors">
<el-input v-model="form.ancestors" placeholder="请输入祖级列表" />
</el-form-item>-->
<el-form-item label="设备大类" prop="deviceCategoryId">
<!-- <el-input v-model="form.categoryId" placeholder="请输入设备大类ID" />-->
<el-select v-model="form.deviceCategoryId" placeholder="请选择设备大类" filterable>
<el-option v-for="item in categoryOptions"
:key="item.deviceCategoryId"
:label="item.deviceCategoryName"
:value="item.deviceCategoryId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备大类ID" prop="categoryId">
<el-input v-model="form.categoryId" placeholder="请输入设备大类ID" />
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<!-- <el-form-item label="激活标识" prop="activeFlag">
<el-input v-model="form.activeFlag" placeholder="请输入激活标识" />
</el-form-item>-->
<el-form-item label="激活标识" prop="activeFlag">
<el-radio-group v-model="form.activeFlag">
<el-radio
v-for="dict in active_flag"
:key="dict.value"
:value="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
@ -112,15 +141,26 @@
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="BaseDeviceType" lang="ts">
import { listBaseDeviceType, getBaseDeviceType, delBaseDeviceType, addBaseDeviceType, updateBaseDeviceType } from '@/api/mes/baseDeviceType';
import {
listBaseDeviceType,
getBaseDeviceType,
delBaseDeviceType,
addBaseDeviceType,
updateBaseDeviceType,
getBaseDeviceTypeList
} from '@/api/mes/baseDeviceType';
import { BaseDeviceTypeVO, BaseDeviceTypeQuery, BaseDeviceTypeForm } from '@/api/mes/baseDeviceType/types';
import {getBaseDeviceCategoryList} from "@/api/mes/baseDeviceCategory";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict( 'active_flag'));
const baseDeviceTypeList = ref<BaseDeviceTypeVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -140,20 +180,20 @@ const dialog = reactive<DialogOption>({
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `物料类型ID`, visible: true },
{ key: 1, label: `租户编号`, visible: true },
{ key: 2, label: `父级标识`, visible: true },
{ key: 0, label: `设备类型ID`, visible: false },
{ key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `父级标识`, visible: false },
{ key: 3, label: `设备类型编号`, visible: true },
{ key: 4, label: `设备类型名称`, visible: true },
{ key: 5, label: `祖级列表`, visible: true },
{ key: 5, label: `祖级列表`, visible: false },
{ key: 6, label: `设备大类ID`, visible: true },
{ key: 7, label: `激活标识`, visible: true },
{ key: 8, label: `备注`, visible: true },
{ key: 9, label: `创建部门`, visible: true },
{ key: 10, label: `创建人`, visible: true },
{ key: 11, label: `创建时间`, visible: true },
{ key: 12, label: `更新人`, visible: true },
{ key: 13, label: `更新时间`, visible: true },
{ key: 9, label: `创建部门`, visible: false },
{ key: 10, label: `创建人`, visible: false },
{ key: 11, label: `创建时间`, visible: false },
{ key: 12, label: `更新人`, visible: false },
{ key: 13, label: `更新时间`, visible: false },
]);
const initFormData: BaseDeviceTypeForm = {
@ -162,8 +202,9 @@ const initFormData: BaseDeviceTypeForm = {
deviceTypeCode: undefined,
deviceTypeName: undefined,
ancestors: undefined,
categoryId: undefined,
activeFlag: undefined,
deviceCategoryId: undefined,
deviceCategoryName: undefined,
activeFlag: '1',
remark: undefined,
}
const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
@ -176,15 +217,16 @@ const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
deviceTypeCode: undefined,
deviceTypeName: undefined,
ancestors: undefined,
categoryId: undefined,
deviceCategoryId: undefined,
deviceCategoryName: undefined,
activeFlag: undefined,
params: {
}
},
rules: {
deviceTypeId: [
{ required: true, message: "物料类型ID不能为空", trigger: "blur" }
],
/* deviceTypeId: [
{ required: true, message: "设备类型不能为空", trigger: "blur" }
],*/
parentId: [
{ required: true, message: "父级标识不能为空", trigger: "blur" }
],
@ -194,18 +236,18 @@ const data = reactive<PageData<BaseDeviceTypeForm, BaseDeviceTypeQuery>>({
deviceTypeName: [
{ required: true, message: "设备类型名称不能为空", trigger: "blur" }
],
ancestors: [
/* ancestors: [
{ required: true, message: "祖级列表不能为空", trigger: "blur" }
],
],*/
categoryId: [
{ required: true, message: "设备大类ID不能为空", trigger: "blur" }
{ required: true, message: "设备大类不能为空", trigger: "blur" }
],
activeFlag: [
{ required: true, message: "激活标识不能为空", trigger: "blur" }
],
remark: [
/* remark: [
{ required: true, message: "备注不能为空", trigger: "blur" }
],
],*/
}
});
@ -252,8 +294,9 @@ const handleSelectionChange = (selection: BaseDeviceTypeVO[]) => {
}
/** 新增按钮操作 */
const handleAdd = () => {
const handleAdd = async() => {
reset();
await getTreeselect();
dialog.visible = true;
dialog.title = "添加设备类型信息";
}
@ -261,6 +304,7 @@ const handleAdd = () => {
/** 修改按钮操作 */
const handleUpdate = async (row?: BaseDeviceTypeVO) => {
reset();
await getTreeselect();
const _deviceTypeId = row?.deviceTypeId || ids.value[0]
const res = await getBaseDeviceType(_deviceTypeId);
Object.assign(form.value, res.data);
@ -301,7 +345,30 @@ const handleExport = () => {
}, `baseDeviceType_${new Date().getTime()}.xlsx`)
}
let categoryOptions = ref([]);
const getCategorySelect = async () => {
const res = await getBaseDeviceCategoryList(null);
categoryOptions.value = res.data;
}
/** 查询计量单位信息下拉树结构 */
type BaseOption = {
deviceTypeId: number;
deviceTypeName: string;
children?: BaseOption[];
}
const baseOptions = ref<BaseDeviceTypeVO[]>([]);
const getTreeselect = async () => {
const res = await getBaseDeviceTypeList(null);
baseOptions.value = [];
const data: BaseOption = { deviceTypeId: 0, deviceTypeName: '顶级节点', children: [] };
data.children = proxy?.handleTree<BaseOption>(res.data, "deviceTypeId", "parentId");
baseOptions.value.push(data);
}
onMounted(() => {
getCategorySelect();
getList();
});
</script>

Write Preview
Loading…
Cancel
Save