zhouy/chem_mes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(customer): 重构客户表单界面和数据验证

Browse Source
This commit is contained in:
zxy 2026-05-06 11:42:00 +08:00
parent 301d2d28ef
commit 4e3f106563
5 changed files with 306 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
mes-ui/mes-ui-admin-vue3/src/views/biz/customer/CustomerForm.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
@ -7,31 +7,54 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<!-- 基础信息 -->
<div class="form-section">
<div class="section-title">基础信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="客户编码" prop="custNo"> <el-form-item label="客户编码" prop="custNo">
<el-input v-model="formData.custNo" placeholder="请输入客户编码" /> <el-input v-model="formData.custNo" placeholder="请输入客户编码" :disabled="formType === 'update'" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户全称" prop="custName"> <el-form-item label="客户全称" prop="custName">
<el-input v-model="formData.custName" placeholder="请输入客户全称" /> <el-input v-model="formData.custName" placeholder="请输入客户全称" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户简称" prop="custSimName"> <el-form-item label="客户简称" prop="custSimName">
<el-input v-model="formData.custSimName" placeholder="请输入客户简称" /> <el-input v-model="formData.custSimName" placeholder="请输入客户简称" />
</el-form-item> </el-form-item>
<el-form-item label="所属行业（1钢铁 2 电力 3 化工）" prop="industryClass"> </el-col>
<el-input v-model="formData.industryClass" placeholder="请输入所属行业（1钢铁 2 电力 3 化工）" /> </el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="所属行业" prop="industryClass">
<el-select v-model="formData.industryClass" placeholder="请选择所属行业">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.INDUSTRY_CLASS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="合作状态（1 潜在 2意向 3正式 4暂停 5终止）" prop="coopStatus"> </el-col>
<el-radio-group v-model="formData.coopStatus"> <el-col :span="8">
<el-radio <el-form-item label="合作状态" prop="coopStatus">
<el-select v-model="formData.coopStatus" placeholder="请选择合作状态">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.COOP_STATUS)" v-for="dict in getStrDictOptions(DICT_TYPE.COOP_STATUS)"
:key="dict.value" :key="dict.value"
:label="dict.value" :label="dict.label"
> :value="dict.value"
{{ dict.label }} />
</el-radio> </el-select>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="企业性质 （1 国有企业 2 民营企业 3 外资企业）" prop="enterpriseType"> </el-col>
<el-select v-model="formData.enterpriseType" placeholder="请选择企业性质 （1 国有企业 2 民营企业 3 外资企业）"> <el-col :span="8">
<el-form-item label="企业性质" prop="enterpriseType">
<el-select v-model="formData.enterpriseType" placeholder="请选择企业性质">
<el-option <el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISE_TYPE)" v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISE_TYPE)"
:key="dict.value" :key="dict.value"
@ -40,77 +63,148 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="客户等级（1 核心 2重点 3一般）" prop="custReg"> </el-col>
<el-input v-model="formData.custReg" placeholder="请输入客户等级（1 核心 2重点 3一般）" /> </el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="客户等级" prop="custReg">
<el-select v-model="formData.custReg" placeholder="请选择客户等级">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CUSTOMER_LEVER)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="信用等级( I 优 2 良 3 中 4 差)" prop="creditRate"> </el-col>
<el-input v-model="formData.creditRate" placeholder="请输入信用等级( I 优 2 良 3 中 4 差)" /> <el-col :span="8">
<el-form-item label="信用等级" prop="creditRate">
<el-select v-model="formData.creditRate" placeholder="请选择信用等级">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CREDIT_RATE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="启用状态" prop="enabledStatus">
<el-select v-model="formData.enabledStatus" placeholder="请选择启用状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" :rows="2" />
</el-form-item>
</div>
<!-- 联系方式 -->
<div class="form-section">
<div class="section-title">联系方式</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="联系人1" prop="contact1"> <el-form-item label="联系人1" prop="contact1">
<el-input v-model="formData.contact1" placeholder="请输入联系人1" /> <el-input v-model="formData.contact1" placeholder="请输入联系人" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话1" prop="conPhone1"> <el-form-item label="联系电话1" prop="conPhone1">
<el-input v-model="formData.conPhone1" placeholder="请输入联系电话1" /> <el-input v-model="formData.conPhone1" placeholder="请输入联系电话" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系地址1" prop="conAddress1"> <el-form-item label="联系地址1" prop="conAddress1">
<el-input v-model="formData.conAddress1" placeholder="请输入联系地址1" /> <el-input v-model="formData.conAddress1" placeholder="请输入联系地址" />
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="联系人2" prop="contact2"> <el-form-item label="联系人2" prop="contact2">
<el-input v-model="formData.contact2" placeholder="请输入联系人2" /> <el-input v-model="formData.contact2" placeholder="请输入联系人" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话2" prop="conPhone2"> <el-form-item label="联系电话2" prop="conPhone2">
<el-input v-model="formData.conPhone2" placeholder="请输入联系电话2" /> <el-input v-model="formData.conPhone2" placeholder="请输入联系电话" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系地址2" prop="conAddress2"> <el-form-item label="联系地址2" prop="conAddress2">
<el-input v-model="formData.conAddress2" placeholder="请输入联系地址2" /> <el-input v-model="formData.conAddress2" placeholder="请输入联系地址" />
</el-form-item> </el-form-item>
</el-col>
</el-row>
</div>
<!-- 开票信息 -->
<div class="form-section">
<div class="section-title">开票信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="公司税号" prop="comTaxNumber"> <el-form-item label="公司税号" prop="comTaxNumber">
<el-input v-model="formData.comTaxNumber" placeholder="请输入公司税号" /> <el-input v-model="formData.comTaxNumber" placeholder="请输入公司税号" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开户地区" prop="accountRegion"> <el-form-item label="开户地区" prop="accountRegion">
<el-input v-model="formData.accountRegion" placeholder="请输入开户地区" /> <el-input v-model="formData.accountRegion" placeholder="请输入开户地区" />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开户银行" prop="accountBank"> <el-form-item label="开户银行" prop="accountBank">
<el-input v-model="formData.accountBank" placeholder="请输入开户银行" /> <el-input v-model="formData.accountBank" placeholder="请输入开户银行" />
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="开户账号" prop="accountNo"> <el-form-item label="开户账号" prop="accountNo">
<el-input v-model="formData.accountNo" placeholder="请输入开户账号" /> <el-input v-model="formData.accountNo" placeholder="请输入开户账号" />
</el-form-item> </el-form-item>
<el-form-item label="付款方式（1 预付 2 月付 3承兑）" prop="payMeth"> </el-col>
<el-input v-model="formData.payMeth" placeholder="请输入付款方式（1 预付 2 月付 3承兑）" /> <el-col :span="8">
</el-form-item> <el-form-item label="付款方式" prop="payMeth">
<el-form-item label="备注" prop="remark"> <el-select v-model="formData.payMeth" placeholder="请选择付款方式">
<el-input v-model="formData.remark" placeholder="请输入备注" /> <el-option
</el-form-item> v-for="dict in getStrDictOptions(DICT_TYPE.PAY_METH)"
<el-form-item label="启用状态（1：启用2：未启用）" prop="enabledStatus">
<el-radio-group v-model="formData.enabledStatus">
<el-radio
v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_STATUS)"
:key="dict.value" :key="dict.value"
:label="dict.value" :label="dict.label"
> :value="dict.value"
{{ dict.label }} />
</el-radio> </el-select>
</el-radio-group>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</div>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">保 存</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict' import { getStrDictOptions, getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as CustomerApi from '@/api/biz/customer' import * as CustomerApi from '@/api/biz/customer'
const { t } = useI18n() // 国际化 const { t } = useI18n()
const message = useMessage() // 消息弹窗 const message = useMessage()
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false)
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false)
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('')
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
custNo: undefined, custNo: undefined,
@ -133,21 +227,21 @@ const formData = ref({
accountNo: undefined, accountNo: undefined,
payMeth: undefined, payMeth: undefined,
remark: undefined, remark: undefined,
enabledStatus: undefined, enabledStatus: 0,
}) })
const formRules = reactive({ const formRules = reactive({
custNo: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }], custNo: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
enabledStatus: [{ required: true, message: '启用状态（1：启用2：未启用）不能为空', trigger: 'blur' }], custName: [{ required: true, message: '请输入客户全称', trigger: 'blur' }],
custSimName: [{ required: true, message: '请输入客户简称', trigger: 'blur' }],
enabledStatus: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
}) })
const formRef = ref() // 表单 Ref const formRef = ref()
/** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
// 修改时，设置数据
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
@ -157,14 +251,11 @@ const open = async (type: string, id?: number) => {
} }
} }
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open })
/** 提交表单 */ const emit = defineEmits(['success'])
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
// 校验表单
await formRef.value.validate() await formRef.value.validate()
// 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as CustomerApi.CustomerVO const data = formData.value as unknown as CustomerApi.CustomerVO
@ -176,14 +267,12 @@ const submitForm = async () => {
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
dialogVisible.value = false dialogVisible.value = false
// 发送操作成功的事件
emit('success') emit('success')
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
/** 重置表单 */
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
@ -207,8 +296,21 @@ const resetForm = () => {
accountNo: undefined, accountNo: undefined,
payMeth: undefined, payMeth: undefined,
remark: undefined, remark: undefined,
enabledStatus: undefined, enabledStatus: 0,
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>
<style scoped>
.form-section {
margin-bottom: 24px;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #606266;
margin-bottom: 16px;
padding-left: 8px;
border-left: 3px solid #409eff;
}
</style>

70
mes-ui/mes-ui-admin-vue3/src/views/biz/customer/index.vue
View File

@ -6,7 +6,7 @@
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="68px" label-width="80px"
> >
<el-form-item label="客户编码" prop="custNo"> <el-form-item label="客户编码" prop="custNo">
<el-input <el-input
@ -35,10 +35,10 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="启用状态（1：启用2：未启用）" prop="enabledStatus"> <el-form-item label="状态" prop="enabledStatus">
<el-select <el-select
v-model="queryParams.enabledStatus" v-model="queryParams.enabledStatus"
placeholder="请选择启用状态（1：启用2：未启用）" placeholder="请选择状态"
clearable clearable
class="!w-240px" class="!w-240px"
> >
@ -61,15 +61,6 @@
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> </el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['biz:customer:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</ContentWrap> </ContentWrap>
@ -77,61 +68,40 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="自增字段" align="center" prop="id" /> <el-table-column label="序号" align="center" type="index" width="60px" />
<el-table-column label="客户编码" align="center" prop="custNo" /> <el-table-column label="客户编码" align="center" prop="custNo" />
<el-table-column label="客户全称" align="center" prop="custName" /> <el-table-column label="客户全称" align="center" prop="custName" />
<el-table-column label="客户简称" align="center" prop="custSimName" /> <el-table-column label="客户简称" align="center" prop="custSimName" />
<el-table-column label="所属行业（1钢铁 2 电力 3 化工）" align="center" prop="industryClass"> <el-table-column label="所属行业" align="center" prop="industryClass">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.INDUSTRY_CLASS" :value="scope.row.industryClass" /> <dict-tag :type="DICT_TYPE.INDUSTRY_CLASS" :value="scope.row.industryClass" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="合作状态（1 潜在 2意向 3正式 4暂停 5终止）" align="center" prop="coopStatus"> <el-table-column label="合作状态" align="center" prop="coopStatus">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.COOP_STATUS" :value="scope.row.coopStatus" /> <dict-tag :type="DICT_TYPE.COOP_STATUS" :value="scope.row.coopStatus" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="企业性质 （1 国有企业 2 民营企业 3 外资企业）" align="center" prop="enterpriseType"> <el-table-column label="企业性质" align="center" prop="enterpriseType">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.ENTERPRISE_TYPE" :value="scope.row.enterpriseType" /> <dict-tag :type="DICT_TYPE.ENTERPRISE_TYPE" :value="scope.row.enterpriseType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="客户等级（1 核心 2重点 3一般）" align="center" prop="custReg"> <el-table-column label="客户等级" align="center" prop="custReg">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.CUSTOMER_LEVEL" :value="scope.row.custReg" /> <dict-tag :type="DICT_TYPE.CUSTOMER_LEVER" :value="scope.row.custReg" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信用等级( I 优 2 良 3 中 4 差)" align="center" prop="creditRate"> <el-table-column label="信用等级" align="center" prop="creditRate">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.CREDIT_RATE" :value="scope.row.creditRate" /> <dict-tag :type="DICT_TYPE.CREDIT_RATE" :value="scope.row.creditRate" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="联系人1" align="center" prop="contact1" /> <el-table-column label="联系人1" align="center" prop="contact1" />
<el-table-column label="联系电话1" align="center" prop="conPhone1" /> <el-table-column label="联系电话1" align="center" prop="conPhone1" />
<el-table-column label="联系地址1" align="center" prop="conAddress1" />
<el-table-column label="联系人2" align="center" prop="contact2" />
<el-table-column label="联系电话2" align="center" prop="conPhone2" />
<el-table-column label="联系地址2" align="center" prop="conAddress2" />
<el-table-column label="公司税号" align="center" prop="comTaxNumber" />
<el-table-column label="开户地区" align="center" prop="accountRegion" />
<el-table-column label="开户银行" align="center" prop="accountBank" />
<el-table-column label="开户账号" align="center" prop="accountNo" />
<el-table-column label="付款方式（1 预付 2 月付 3承兑）" align="center" prop="payMeth" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="启用状态（1：启用2：未启用）" align="center" prop="enabledStatus">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_STATUS" :value="scope.row.enabledStatus" />
</template>
</el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link
type="primary" type="primary"
@ -142,12 +112,19 @@
</el-button> </el-button>
<el-button <el-button
link link
type="primary"
@click="openDetailForm(scope.row.id)"
>
详情
</el-button>
<!-- <el-button
link
type="danger" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
v-hasPermi="['biz:customer:delete']" v-hasPermi="['biz:customer:delete']"
> >
删除 删除
</el-button> </el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -162,6 +139,8 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" /> <CustomerForm ref="formRef" @success="getList" />
<!-- 详情弹窗 -->
<CustomerDetail ref="detailRef" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -170,6 +149,7 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import * as CustomerApi from '@/api/biz/customer' import * as CustomerApi from '@/api/biz/customer'
import CustomerForm from './CustomerForm.vue' import CustomerForm from './CustomerForm.vue'
import CustomerDetail from './CustomerDetail.vue'
defineOptions({ name: 'Customer' }) defineOptions({ name: 'Customer' })
@ -220,6 +200,12 @@ const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formRef.value.open(type, id)
} }
/** 详情操作 */
const detailRef = ref()
const openDetailForm = (id: number) => {
detailRef.value.open(id)
}
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {

2
mes-ui/mes-ui-admin-vue3/src/views/biz/machine/MachineForm.vue
View File

@ -162,7 +162,7 @@ const resetForm = () => {
id: undefined, id: undefined,
machineCd: undefined, machineCd: undefined,
machineName: undefined, machineName: undefined,
enabledStatus: 0, // 默认启用 enabledStatus: 0,
remark: undefined, remark: undefined,
belgLineId: undefined, belgLineId: undefined,
belgProcId: undefined, belgProcId: undefined,

75
mes-ui/mes-ui-admin-vue3/src/views/biz/material/MaterialForm.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
@ -7,20 +7,8 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="备注" prop="remark"> <el-form-item label="物料类型" prop="matType">
<el-input v-model="formData.remark" placeholder="请输入备注" /> <el-select v-model="formData.matType" placeholder="请选择物料类型">
</el-form-item>
<el-form-item label="物料编码" prop="matCode">
<el-input v-model="formData.matCode" placeholder="请输入物料编码" />
</el-form-item>
<el-form-item label="物料名称" prop="matName">
<el-input v-model="formData.matName" placeholder="请输入物料名称" />
</el-form-item>
<el-form-item label="父分类id" prop="parentId">
<el-input v-model="formData.parentId" placeholder="请输入父分类id" />
</el-form-item>
<el-form-item label="物料类型(1 原材料 2 半成品 3 成品 4 联产品 )" prop="matType">
<el-select v-model="formData.matType" placeholder="请选择物料类型(1 原材料 2 半成品 3 成品 4 联产品 )">
<el-option <el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MAT_TYPE)" v-for="dict in getStrDictOptions(DICT_TYPE.MAT_TYPE)"
:key="dict.value" :key="dict.value"
@ -29,31 +17,46 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态(1启用 2 未启用)" prop="enabledStatus"> <el-form-item label="物料编码" prop="matCode">
<el-radio-group v-model="formData.enabledStatus"> <el-input v-model="formData.matCode" placeholder="请输入物料编码" />
<el-radio </el-form-item>
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_STATUS)" <el-form-item label="物料名称" prop="matName">
:key="dict.value" <el-input v-model="formData.matName" placeholder="请输入物料名称" />
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="单位" prop="unit"> <el-form-item label="单位" prop="unit">
<el-input v-model="formData.unit" placeholder="请输入单位" /> <el-select v-model="formData.unit" placeholder="请选择单位">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MAT_UNIT)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="质检方案" prop="schemeId">
<el-input v-model="formData.schemeId" placeholder="请输入质检方案" />
</el-form-item> </el-form-item>
<el-form-item label="品牌" prop="brand"> <el-form-item label="品牌" prop="brand">
<el-input v-model="formData.brand" placeholder="请输入品牌" /> <el-input v-model="formData.brand" placeholder="请输入品牌" />
</el-form-item> </el-form-item>
<el-form-item label="规格型号" prop="spec">
<el-input v-model="formData.spec" placeholder="请输入规格型号" /> <el-form-item label="状态" prop="enabledStatus">
<el-select v-model="formData.enabledStatus" placeholder="请选择状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="安全库存" prop="safeStock"> <el-form-item label="安全库存" prop="safeStock">
<el-input v-model="formData.safeStock" placeholder="请输入安全库存" /> <el-input v-model="formData.safeStock" placeholder="请输入安全库存" />
</el-form-item> </el-form-item>
<el-form-item label="质检方案id" prop="schemeId">
<el-input v-model="formData.schemeId" placeholder="请输入质检方案id" /> <el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -80,7 +83,7 @@ const formData = ref({
matName: undefined, matName: undefined,
parentId: undefined, parentId: undefined,
matType: undefined, matType: undefined,
enabledStatus: undefined, enabledStatus: 0,
unit: undefined, unit: undefined,
brand: undefined, brand: undefined,
spec: undefined, spec: undefined,
@ -88,6 +91,14 @@ const formData = ref({
schemeId: undefined, schemeId: undefined,
}) })
const formRules = reactive({ const formRules = reactive({
// 物料类型,物料编码,物料名称,单位,质检方案,状态
matType: [{ required: true, message: '请选择物料类型', trigger: ['blur'] }],
matCode: [{ required: true, message: '请输入物料编码', trigger: ['blur'] }],
matName: [{ required: true, message: '请输入物料名称', trigger: ['blur'] }],
unit: [{ required: true, message: '请输入单位', trigger: ['blur'] }],
schemeId: [{ required: true, message: '请输入质检方案', trigger: ['blur'] }],
enabledStatus: [{ required: true, message: '请选择状态', trigger: ['blur'] }],
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
@ -142,7 +153,7 @@ const resetForm = () => {
matName: undefined, matName: undefined,
parentId: undefined, parentId: undefined,
matType: undefined, matType: undefined,
enabledStatus: undefined, enabledStatus: 0,
unit: undefined, unit: undefined,
brand: undefined, brand: undefined,
spec: undefined, spec: undefined,

44
mes-ui/mes-ui-admin-vue3/src/views/biz/material/index.vue
View File

@ -6,7 +6,7 @@
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="68px" label-width="80px"
> >
<el-form-item label="物料编码" prop="matCode"> <el-form-item label="物料编码" prop="matCode">
<el-input <el-input
@ -26,10 +26,10 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="物料类型(1 原材料 2 半成品 3 成品 4 联产品 )" prop="matType"> <el-form-item label="物料类型" prop="matType">
<el-select <el-select
v-model="queryParams.matType" v-model="queryParams.matType"
placeholder="请选择物料类型(1 原材料 2 半成品 3 成品 4 联产品 )" placeholder="请选择物料类型"
clearable clearable
class="!w-240px" class="!w-240px"
> >
@ -41,10 +41,10 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态(1启用 2 未启用)" prop="enabledStatus"> <el-form-item label="状态" prop="enabledStatus">
<el-select <el-select
v-model="queryParams.enabledStatus" v-model="queryParams.enabledStatus"
placeholder="请选择状态(1启用 2 未启用)" placeholder="请选择状态"
clearable clearable
class="!w-240px" class="!w-240px"
> >
@ -67,15 +67,6 @@
> >
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> </el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['biz:material:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</ContentWrap> </ContentWrap>
@ -83,25 +74,28 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="备注" align="center" prop="remark" /> <el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="物料编码" align="center" prop="matCode" /> <el-table-column label="物料编码" align="center" prop="matCode" />
<el-table-column label="物料名称" align="center" prop="matName" /> <el-table-column label="物料名称" align="center" prop="matName" />
<el-table-column label="父分类id" align="center" prop="parentId" /> <el-table-column label="物料类型" align="center" prop="matType">
<el-table-column label="物料类型(1 原材料 2 半成品 3 成品 4 联产品 )" align="center" prop="matType">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.MAT_TYPE" :value="scope.row.matType" /> <dict-tag :type="DICT_TYPE.MAT_TYPE" :value="scope.row.matType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态(1启用 2 未启用)" align="center" prop="enabledStatus">
<el-table-column label="单位" align="center" prop="unit" />
<el-table-column label="规格型号" align="center" prop="spec" />
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="状态" align="center" prop="enabledStatus">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_STATUS" :value="scope.row.enabledStatus" /> <dict-tag :type="DICT_TYPE.SYSTEM_STATUS" :value="scope.row.enabledStatus" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="单位" align="center" prop="unit" /> <!-- <el-table-column label="安全库存" align="center" prop="safeStock" /> -->
<el-table-column label="品牌" align="center" prop="brand" /> <!-- <el-table-column label="质检方案id" align="center" prop="schemeId" /> -->
<el-table-column label="规格型号" align="center" prop="spec" /> <!-- <el-table-column label="父分类id" align="center" prop="parentId" /> -->
<el-table-column label="安全库存" align="center" prop="safeStock" /> <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
<el-table-column label="质检方案id" align="center" prop="schemeId" />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button <el-button
@ -112,14 +106,14 @@
> >
编辑 编辑
</el-button> </el-button>
<el-button <!-- <el-button
link link
type="danger" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
v-hasPermi="['biz:material:delete']" v-hasPermi="['biz:material:delete']"
> >
删除 删除
</el-button> </el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>