fix(mes-tm): 修复工具管理前端 TODO 项，完善表单布局、编码生成和列宽
1. ToolForm：表单改为 el-row/el-col 栅格布局（960px 宽弹窗），新增编码"生成"按钮（TL 前缀） 2. ToolTypeForm：类型编码新增"生成"按钮（TT 前缀），保养周期拆分为天/次两个条件字段 3. type/index：保养周期列增加天/次单位后缀展示 4. tool/index + type/index：补齐所有表格列宽（编码 120、名称 min-150、状态 80 等）pull/871/MERGE
YunaiV
parent
6a83adf543
commit
153fa2cf25
|
|
@ -1,7 +1,6 @@
|
|||
<!-- MES 工具台账表单 -->
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<!-- TODO @AI：参考别的模块，分成 1 行 3 个。 -->
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
|
|
@ -9,98 +8,129 @@
|
|||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<!-- TODO @AI：这里缺了生成；编码； -->
|
||||
<el-form-item label="工具编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入工具编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工具名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入工具名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工具类型" prop="toolTypeId">
|
||||
<el-select
|
||||
v-model="formData.toolTypeId"
|
||||
placeholder="请选择工具类型"
|
||||
class="!w-1/1"
|
||||
@change="handleToolTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in toolTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="formData.brand" placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
<el-form-item label="型号规格" prop="spec">
|
||||
<el-input v-model="formData.spec" placeholder="请输入型号规格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="quantity">
|
||||
<el-input-number
|
||||
v-model="formData.quantity"
|
||||
:min="1"
|
||||
:disabled="selectedToolType?.codeFlag === true"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="可用数量" prop="quantityAvailable">
|
||||
<el-input-number v-model="formData.quantityAvailable" :min="0" class="!w-1/1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="保养维护类型" prop="maintenType">
|
||||
<el-select
|
||||
v-model="formData.maintenType"
|
||||
placeholder="请选择保养维护类型"
|
||||
clearable
|
||||
class="!w-1/1"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="下次保养日期"
|
||||
prop="nextMaintenDate"
|
||||
v-if="formData.maintenType === MesMaintenTypeEnum.REGULAR"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formData.nextMaintenDate"
|
||||
type="datetime"
|
||||
placeholder="请选择下次保养日期"
|
||||
value-format="x"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="下次保养周期"
|
||||
prop="nextMaintenPeriod"
|
||||
v-if="formData.maintenType === MesMaintenTypeEnum.USAGE"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.nextMaintenPeriod"
|
||||
:min="1"
|
||||
placeholder="请输入下次保养周期（次数）"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="formData.status" placeholder="请选择状态" class="!w-1/1">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工具编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入工具编码">
|
||||
<template #append>
|
||||
<el-button @click="generateCode" :disabled="formType === 'update'">
|
||||
生成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工具名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入工具名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工具类型" prop="toolTypeId">
|
||||
<el-select
|
||||
v-model="formData.toolTypeId"
|
||||
placeholder="请选择工具类型"
|
||||
class="!w-1/1"
|
||||
@change="handleToolTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in toolTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="formData.brand" placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="型号规格" prop="spec">
|
||||
<el-input v-model="formData.spec" placeholder="请输入型号规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="库存数量" prop="quantity">
|
||||
<el-input-number
|
||||
v-model="formData.quantity"
|
||||
:min="1"
|
||||
:disabled="selectedToolType?.codeFlag === true"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="可用数量" prop="quantityAvailable">
|
||||
<el-input-number v-model="formData.quantityAvailable" :min="0" class="!w-1/1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="formData.status" placeholder="请选择状态" class="!w-1/1">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_TM_TOOL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="保养维护类型" prop="maintenType">
|
||||
<el-select
|
||||
v-model="formData.maintenType"
|
||||
placeholder="请选择保养维护类型"
|
||||
clearable
|
||||
class="!w-1/1"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.MES_TM_MAINTEN_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" v-if="formData.maintenType === MesMaintenTypeEnum.REGULAR">
|
||||
<el-form-item label="下次保养日期" prop="nextMaintenDate">
|
||||
<el-date-picker
|
||||
v-model="formData.nextMaintenDate"
|
||||
type="datetime"
|
||||
placeholder="请选择下次保养日期"
|
||||
value-format="x"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" v-if="formData.maintenType === MesMaintenTypeEnum.USAGE">
|
||||
<el-form-item label="下次保养周期" prop="nextMaintenPeriod">
|
||||
<el-input-number
|
||||
v-model="formData.nextMaintenPeriod"
|
||||
:min="1"
|
||||
placeholder="次数"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- TODO @芋艿：这里要有个 barcodeimg，后续在搞 -->
|
||||
<template #footer>
|
||||
|
|
@ -114,6 +144,7 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
|||
import { TmToolApi, TmToolVO } from '@/api/mes/tm/tool'
|
||||
import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
|
||||
import { MesToolStatusEnum, MesMaintenTypeEnum } from '@/views/mes/utils/constants'
|
||||
import { generateRandomStr } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'ToolForm' })
|
||||
|
||||
|
|
@ -173,6 +204,12 @@ const open = async (type: string, id?: number) => {
|
|||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 生成工具编码 */
|
||||
const generateCode = () => {
|
||||
// TODO @芋艿：后续对接后端编码生成接口
|
||||
formData.value.code = 'TL' + generateRandomStr(12)
|
||||
}
|
||||
|
||||
/** 工具类型变更 */
|
||||
const handleToolTypeChange = (toolTypeId: number) => {
|
||||
selectedToolType.value = toolTypeList.value.find((item) => item.id === toolTypeId)
|
||||
|
|
|
|||
|
|
@ -97,14 +97,14 @@
|
|||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="工具编码" align="center" prop="code" />
|
||||
<el-table-column label="工具名称" align="center" prop="name" />
|
||||
<el-table-column label="品牌" align="center" prop="brand" />
|
||||
<el-table-column label="型号规格" align="center" prop="spec" />
|
||||
<el-table-column label="工具类型" align="center" prop="toolTypeName" />
|
||||
<el-table-column label="库存数量" align="center" prop="quantity" />
|
||||
<el-table-column label="可用数量" align="center" prop="quantityAvailable" />
|
||||
<el-table-column label="保养维护类型" align="center" prop="maintenType">
|
||||
<el-table-column label="工具编码" align="center" prop="code" width="120" />
|
||||
<el-table-column label="工具名称" align="center" prop="name" min-width="150" />
|
||||
<el-table-column label="品牌" align="center" prop="brand" width="100" />
|
||||
<el-table-column label="型号规格" align="center" prop="spec" width="120" />
|
||||
<el-table-column label="工具类型" align="center" prop="toolTypeName" width="120" />
|
||||
<el-table-column label="库存数量" align="center" prop="quantity" width="100" />
|
||||
<el-table-column label="可用数量" align="center" prop="quantityAvailable" width="100" />
|
||||
<el-table-column label="保养维护类型" align="center" prop="maintenType" width="120">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.MES_TM_MAINTEN_TYPE" :value="scope.row.maintenType" />
|
||||
</template>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<el-table-column label="状态" align="center" prop="status" width="80">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.MES_TM_TOOL_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,14 @@
|
|||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<!-- TODO @AI：这里缺了生成 -->
|
||||
<el-form-item label="类型编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入类型编码" />
|
||||
<el-input v-model="formData.code" placeholder="请输入类型编码">
|
||||
<template #append>
|
||||
<el-button @click="generateCode" :disabled="formType === 'update'">
|
||||
生成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入类型名称" />
|
||||
|
|
@ -26,7 +31,6 @@
|
|||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- TODO @AI：分成天、次 -->
|
||||
<el-form-item label="保养维护类型" prop="maintenType">
|
||||
<el-select
|
||||
v-model="formData.maintenType"
|
||||
|
|
@ -43,14 +47,26 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="保养周期"
|
||||
label="保养周期（天）"
|
||||
prop="maintenPeriod"
|
||||
v-if="formData.maintenType === MesMaintenTypeEnum.REGULAR"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.maintenPeriod"
|
||||
:min="1"
|
||||
placeholder="请输入保养周期（天）"
|
||||
placeholder="请输入保养周期"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="保养周期（次）"
|
||||
prop="maintenPeriod"
|
||||
v-if="formData.maintenType === MesMaintenTypeEnum.USAGE"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.maintenPeriod"
|
||||
:min="1"
|
||||
placeholder="请输入保养周期"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
|
@ -68,6 +84,7 @@
|
|||
import { getBoolDictOptions, getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
|
||||
import { MesMaintenTypeEnum } from '@/views/mes/utils/constants'
|
||||
import { generateRandomStr } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'ToolTypeForm' })
|
||||
|
||||
|
|
@ -94,6 +111,12 @@ const formRules = reactive({
|
|||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 生成类型编码 */
|
||||
const generateCode = () => {
|
||||
// TODO @芋艿：后续对接后端编码生成接口
|
||||
formData.value.code = 'TT' + generateRandomStr(12)
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
|
|
|
|||
|
|
@ -69,21 +69,39 @@
|
|||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="类型编码" align="center" prop="code" />
|
||||
<el-table-column label="类型名称" align="center" prop="name" />
|
||||
<el-table-column label="是否编码管理" align="center" prop="codeFlag">
|
||||
<el-table-column label="类型编码" align="center" prop="code" width="120" />
|
||||
<el-table-column label="类型名称" align="center" prop="name" min-width="150" />
|
||||
<el-table-column label="是否编码管理" align="center" prop="codeFlag" width="120">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.codeFlag" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="保养维护类型" align="center" prop="maintenType">
|
||||
<el-table-column label="保养维护类型" align="center" prop="maintenType" width="120">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.MES_TM_MAINTEN_TYPE" :value="scope.row.maintenType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- TODO @AI：天、次，应该有； -->
|
||||
<el-table-column label="保养周期" align="center" prop="maintenPeriod" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="保养周期" align="center" prop="maintenPeriod" width="100">
|
||||
<template #default="scope">
|
||||
<span
|
||||
v-if="
|
||||
scope.row.maintenPeriod != null &&
|
||||
scope.row.maintenType === MesMaintenTypeEnum.REGULAR
|
||||
"
|
||||
>
|
||||
{{ scope.row.maintenPeriod }} 天
|
||||
</span>
|
||||
<span
|
||||
v-else-if="
|
||||
scope.row.maintenPeriod != null && scope.row.maintenType === MesMaintenTypeEnum.USAGE
|
||||
"
|
||||
>
|
||||
{{ scope.row.maintenPeriod }} 次
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" min-width="150" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
|
|
@ -131,6 +149,7 @@ import download from '@/utils/download'
|
|||
import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
|
||||
import ToolTypeForm from './ToolTypeForm.vue'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { MesMaintenTypeEnum } from '@/views/mes/utils/constants'
|
||||
|
||||
defineOptions({ name: 'MesTmToolType' })
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue