linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：修改模具管理的维修单-新增、编辑、维修弹框样式

Browse Source
test
zhongwenkai 2 weeks ago
parent 9a4b39e915
commit 732ef1de33
2 changed files with 260 additions and 213 deletions
Show Stats Download Patch File Download Diff File

452
src/views/mold/moldrepair/MoldRepairForm.vue
Unescape Escape View File

@ -1,149 +1,154 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" @closed="handleDialogClosed">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
<el-row>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
<template #label>
<span>
{{ t('MoldManagement.MoldRepair.repairCode') }}
<el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-row :gutter="10" style="width: 100%;">
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
<el-input
:disabled="formData.isCode == true || formType === 'update'"
v-model="formData.repairCode"
:placeholder="t('common.code')"
/>
</el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<div>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
/>
</div>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
<el-input
v-model="formData.repairName"
:placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
:disabled="isRepairMode"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
<el-select
v-model="formData.moldId" filterable clearable :loading="moldLoading"
:disabled="isRepairMode"
:placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
class="!w-full"
>
<el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
<el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
<el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="规格型号" prop="machinerySpec" :required="false">
<el-input v-model="formData.machinerySpec" placeholder="自动带出" disabled />
</el-form-item>
<el-form-item label="品牌" prop="machineryBrand" :required="false">
<el-input v-model="formData.machineryBrand" placeholder="自动带出" disabled />
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
<el-select
v-model="formData.acceptedBy" filterable clearable
:placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
class="!w-full"
:disabled="isRepairMode">
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
<el-select
v-model="formData.confirmBy" filterable clearable
:placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
class="!w-full"
:disabled="isRepairMode">
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<template v-if="showRepairFields">
<el-row>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
<el-date-picker
v-model="formData.requireDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
<el-date-picker
v-model="formData.finishDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
<el-date-picker
v-model="formData.confirmDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
<Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
</el-form-item>
</template>
</el-form>
<el-tabs v-model="subTabsName">
<el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
<MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dv-repair-panel">
<div class="dv-repair-panel__header">
<div class="dv-repair-panel__title">{{ dialogTitle }}</div>
<el-button text @click="closeForm">
<Icon icon="ep:close" />
</el-button>
</div>
<div class="dv-repair-dialog" v-loading="formLoading">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
<section class="dv-repair-section">
<div class="dv-repair-section__title">基本信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
<template #label>
<span>
{{ t('MoldManagement.MoldRepair.repairCode') }}
<el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<div class="dv-repair-code-row">
<el-input
:disabled="formData.isCode == true || formType === 'update'"
v-model="formData.repairCode"
:placeholder="t('common.code')"
/>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
/>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
<el-input
v-model="formData.repairName"
:placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
:disabled="isRepairMode"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
<el-select
v-model="formData.moldId" filterable clearable :loading="moldLoading"
:disabled="isRepairMode"
:placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
class="!w-full"
>
<el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
<el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
<el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
<el-select
v-model="formData.acceptedBy" filterable clearable
:placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
class="!w-full"
:disabled="isRepairMode">
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
<el-select
v-model="formData.confirmBy" filterable clearable
:placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
class="!w-full"
:disabled="isRepairMode">
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</section>
<section v-if="showRepairFields" class="dv-repair-section">
<div class="dv-repair-section__title">处理结果</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
<el-date-picker
v-model="formData.requireDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
<el-date-picker
v-model="formData.finishDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
<el-date-picker
v-model="formData.confirmDate" type="date" value-format="x"
:placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
class="!w-full" :disabled="repairFieldsDisabled"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
<Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
</el-form-item>
</el-col>
</el-row>
</section>
</el-form>
<el-tabs v-model="subTabsName" style="margin-top: 16px;">
<el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
<MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
</el-tab-pane>
</el-tabs>
</div>
<div class="dv-repair-footer">
<el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
</div>
</div>
</template>
<script setup lang="ts">
import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
import { MoldRepairItemsApi } from '@/api/mold/moldRepairItems'
@ -156,7 +161,6 @@ defineOptions({ name: 'MoldRepairForm' })
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
@ -164,6 +168,7 @@ const isRepairMode = computed(() => formType.value === 'update' || formType.valu
const showRepairFields = computed(() => formType.value === 'update' || formType.value === 'repair')
const repairFieldsDisabled = computed(() => formType.value !== 'repair')
const isHydrating = ref(false)
const openRequestId = ref(0)
const emit = defineEmits(['success', 'closed'])
const formData = ref({
id: undefined,
@ -397,29 +402,21 @@ const prefillLinesByMold = async (moldId: number | undefined) => {
setLineRows(list.map(toMoldRepairLineRow))
}
let openRequestId = 0
const open = async (type: string, id?: number) => {
const currentOpenId = ++openRequestId
dialogVisible.value = true
dialogTitle.value =
type === 'repair'
? t('MoldManagement.MoldRepair.dialogTitleRepair')
: type === 'create'
? t('MoldManagement.MoldRepair.dialogTitleCreate')
: t('MoldManagement.MoldRepair.dialogTitleUpdate')
const currentOpenId = ++openRequestId.value
dialogTitle.value = type === 'repair' ? '维修处理结果' : t('action.' + type)
formType.value = type
resetForm()
await ensureUsersLoaded()
await ensureMoldOptionsLoaded()
if (currentOpenId !== openRequestId) return
if (currentOpenId !== openRequestId.value) return
if (id) {
formLoading.value = true
try {
isHydrating.value = true
formData.value = await MoldRepairApi.getMoldRepair(id)
if (currentOpenId !== openRequestId) return
if (currentOpenId !== openRequestId.value) return
;(formData.value as any).requireDate = (formData.value as any).requireDate ?? undefined
;(formData.value as any).finishDate = (formData.value as any).finishDate ?? undefined
@ -456,66 +453,25 @@ const open = async (type: string, id?: number) => {
}
defineExpose({ open })
const handleDialogClosed = () => {
openRequestId++
const closeForm = () => {
openRequestId.value++
emit('closed')
}
onBeforeUnmount(() => {
openRequestId++
})
const submitForm = async () => {
await formRef.value.validate()
try {
await moldRepairLineFormRef.value.validate()
} catch {
subTabsName.value = 'moldRepairLine'
return
}
formLoading.value = true
try {
const data = { ...(formData.value as any) } as MoldRepairVO & { moldId?: number; componentId?: number }
;(data as any).acceptedBy = normalizeUserId((data as any).acceptedBy)
;(data as any).confirmBy = normalizeUserId((data as any).confirmBy)
;(data as any).moldCode = (data as any).moldCode ?? (data as any).machineryCode
;(data as any).moldName = (data as any).moldName ?? (data as any).machineryName
delete (data as any).machineryId
delete (data as any).machineryCode
delete (data as any).machineryName
if (formType.value === 'repair') {
;(data as any).status = 1
}
;(data as any).moldId = formData.value.moldId
const lineList = moldRepairLineFormRef.value.getData() || []
if (formType.value === 'repair') {
const requireDate = (data as any).requireDate
const finishDate = (data as any).finishDate
const confirmDate = (data as any).confirmDate
const repairResult = (data as any).repairResult
const updateReqVOList = lineList
await MoldRepairApi.updateMoldRepairStatus({
id: (data as any).id,
requireDate,
finishDate,
confirmDate,
repairResult,
updateReqVOList,
})
message.success(t('common.updateSuccess'))
const data = { ...formData.value }
if (formType.value === 'create') {
await MoldRepairApi.createMoldRepair(data)
message.success(t('common.createSuccess'))
} else {
;(data as any).moldRepairLines = lineList
if (formType.value === 'create') {
await MoldRepairApi.createMoldRepair(data)
message.success(t('common.createSuccess'))
} else {
await MoldRepairApi.updateMoldRepair(data)
message.success(t('common.updateSuccess'))
}
await MoldRepairApi.updateMoldRepair(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
await moldRepairLineFormRef.value?.submit()
closeForm()
emit('success')
} finally {
formLoading.value = false
@ -546,3 +502,85 @@ const resetForm = () => {
formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.dv-repair-panel {
background: #fff;
border-radius: 12px;
box-shadow: var(--el-box-shadow-light);
}
.dv-repair-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #ebeef5;
}
.dv-repair-panel__title {
color: #1f2937;
font-size: 18px;
font-weight: 600;
}
.dv-repair-dialog {
max-height: calc(100vh - 220px);
padding: 20px 20px 0;
padding-right: 16px;
overflow-y: auto;
}
.dv-repair-section {
margin-bottom: 20px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
}
.dv-repair-section__title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-left: 8px;
border-left: 3px solid #409eff;
}
.dv-repair-code-row {
display: flex;
gap: 10px;
align-items: center;
}
.dv-repair-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
width: 100%;
padding: 16px 20px 20px;
border-top: 1px solid #ebeef5;
}
@media (max-width: 1200px) {
.dv-repair-section .el-col {
flex: 0 0 100%;
}
}
@media (max-width: 768px) {
.dv-repair-panel__header {
padding: 14px 16px;
}
.dv-repair-dialog {
max-height: none;
padding: 16px 16px 0;
overflow-y: visible;
}
.dv-repair-footer {
padding: 16px;
}
}
</style>

21
src/views/mold/moldrepair/index.vue
Unescape Escape View File

@ -1,5 +1,6 @@
<template>
<ContentWrap>
<ContentWrap v-if="!formVisible">
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
<el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
<el-input
@ -106,7 +107,8 @@
</el-form>
</ContentWrap>
<ContentWrap>
<ContentWrap v-if="!formVisible">
<!-- 列表 -->
<el-table
ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
@selection-change="handleSelectionChange">
@ -179,17 +181,19 @@
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<MoldRepairForm v-if="formVisible" ref="formRef" @success="getList" @closed="formVisible = false" />
<div v-if="formVisible">
<MoldRepairForm ref="formRef" @success="handleFormSuccess" @closed="formVisible = false" />
</div>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
import MoldRepairForm from './MoldRepairForm.vue'
@ -302,8 +306,8 @@ const resetQuery = () => {
handleQuery()
}
const formRef = ref()
const formVisible = ref(false)
const formRef = ref()
const openForm = async (type: string, id?: number) => {
formVisible.value = true
@ -311,6 +315,11 @@ const openForm = async (type: string, id?: number) => {
formRef.value?.open(type, id)
}
const handleFormSuccess = () => {
formVisible.value = false
getList()
}
const buildIdsParam = (ids: number | number[]) => {
return Array.isArray(ids) ? ids.join(',') : String(ids)
}

Write Preview
Loading…
Cancel
Save