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

界面优化

Browse Source
main
liutao 2 weeks ago
parent e35779413c
commit 601f852b28
1 changed files with 174 additions and 73 deletions
Show Stats Download Patch File Download Diff File

247
src/views/mes/deviceledger/detail/editIndex.vue
Unescape Escape View File

@ -12,22 +12,17 @@
v-loading="formLoading || fileUploading"
:element-loading-text="t('common.loading')"
>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.images')" prop="images">
<UploadImg style="height: 100px" v-model="formData.images" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-row :gutter="20" class="device-basic-layout">
<el-col :xs="24" :lg="18" class="device-basic-fields">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
<el-row :gutter="20" style="width: 100%">
<el-col :xs="18" :sm="18" :md="16" :lg="14" :xl="10">
<el-row :gutter="12" class="device-code-row">
<el-col :xs="18" :sm="18" :md="18" :lg="19" :xl="20">
<el-input v-model="formData.deviceCode"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
:disabled="Boolean(formData.isCode) || formType === 'update'" />
</el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<div>
<el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="4">
<div class="device-code-switch">
<el-switch v-model="formData.isCode" :disabled="formType === 'update'"
@change="handleCodeAutoChange" />
</div>
@ -72,57 +67,90 @@
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" prop="isScheduled">
<el-switch v-model="formData.isScheduled" :active-value="1" :inactive-value="0"
:active-text="t('EquipmentManagement.EquipmentLedger.yes')"
:inactive-text="t('EquipmentManagement.EquipmentLedger.no')" inline-prompt />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
<el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
<el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" prop="deviceLocation">
<el-input v-model="formData.deviceLocation"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceLocation')" />
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" prop="isScheduled">
<el-switch v-model="formData.isScheduled" :active-value="1" :inactive-value="0"
:active-text="t('EquipmentManagement.EquipmentLedger.yes')"
:inactive-text="t('EquipmentManagement.EquipmentLedger.no')" inline-prompt />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
<el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
<el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
</el-form-item>
</el-col>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" prop="deviceManagerIds">
<el-select v-model="formData.deviceManagerIds" multiple filterable clearable
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceManagerIds')" class="!w-full">
<el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
<el-input :model-value="criticalComponentDisplay" readonly clearable class="device-ledger-selection-input"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
@clear="clearCriticalComponent" @click="openCriticalComponentDialog" />
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" prop="deviceLocation">
<el-input v-model="formData.deviceLocation"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceLocation')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" prop="deviceManagerIds">
<el-select v-model="formData.deviceManagerIds" multiple filterable clearable
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceManagerIds')" class="!w-full">
<el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
<el-input :model-value="criticalComponentDisplay" readonly clearable class="device-ledger-selection-input"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
@clear="clearCriticalComponent" @click="openCriticalComponentDialog" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
<el-input :model-value="beijianDisplay" readonly clearable class="device-ledger-selection-input"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')" @clear="clearBeijian" @click="openBeijianDialog"/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
<el-input :model-value="beijianDisplay" readonly clearable class="device-ledger-selection-input"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')" @clear="clearBeijian" @click="openBeijianDialog"/>
</el-form-item>
<el-col :xs="24" :lg="6" class="device-basic-media">
<div class="device-media-panel">
<el-form-item label-width="0" prop="images" class="device-media-item">
<div class="device-media-box device-media-upload-box">
<span class="device-media-label">{{ t('EquipmentManagement.EquipmentLedger.images') }}</span>
<UploadImg class="device-media-upload" v-model="formData.images" />
</div>
</el-form-item>
<el-form-item v-if="formType === 'update'" label-width="0" prop="qrcodeUrl" class="device-media-item">
<div class="device-media-box device-media-code-box">
<span class="device-media-label">{{ t('EquipmentManagement.EquipmentLedger.qrcode') }}</span>
<div class="device-media-code">
<QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id"
:print-title="`${formData.deviceName || 'Device'} QR Code`" :print-paper-width="80" :print-paper-height="80"
:print-max-width="220" :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
:error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:refresh-url="getQrcodeRefreshUrl()" :refresh-disabled="!formData.id || !formData.deviceCode"
refresh-confirm-text="Refresh QR code?"
:template-json="formData.templateJson"
:print-data="buildPrintData()"
@refresh-success="handleQrcodeRefreshSuccess" />
</div>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
@ -135,19 +163,6 @@
/>
</el-form-item>
</el-col>
<el-col v-if="formType === 'update'" :span="24">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.qrcode')" prop="qrcodeUrl">
<QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id"
:print-title="`${formData.deviceName || 'Device'} QR Code`" :print-paper-width="80" :print-paper-height="80"
:print-max-width="220" :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
:error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:refresh-url="getQrcodeRefreshUrl()" :refresh-disabled="!formData.id || !formData.deviceCode"
refresh-confirm-text="Refresh QR code?"
:template-json="formData.templateJson"
:print-data="buildPrintData()"
@refresh-success="handleQrcodeRefreshSuccess" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.remark')" prop="remark">
@ -1157,13 +1172,76 @@ onBeforeUnmount(() => {
}
.device-ledger-detail-main {
display: flex;
min-height: 224px;
//padding: 18px 0;
padding-top: 12px;
margin-bottom: 10px;
gap: 28px;
box-sizing: border-box;
}
.device-ledger-detail-main :deep(.el-form) {
width: 100%;
}
.device-basic-layout {
align-items: flex-start;
}
.device-basic-fields {
min-width: 0;
}
.device-code-row {
width: 100%;
}
.device-code-switch {
display: flex;
align-items: center;
height: 32px;
}
.device-basic-media {
display: flex;
justify-content: flex-end;
}
.device-media-panel {
width: 100%;
max-width: 260px;
padding: 12px 12px 4px;
box-sizing: border-box;
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
background: var(--el-fill-color-extra-light);
}
.device-media-item {
margin-bottom: 16px;
}
.device-media-item :deep(.el-form-item__label) {
justify-content: flex-start;
}
.device-media-item :deep(.el-form-item__content) {
justify-content: center;
}
.device-media-upload {
width: 100%;
min-height: 120px;
}
.device-media-code {
width: 148px;
height: 148px;
}
.device-media-code :deep(.qrcode-action-card__img),
.device-media-code :deep(.qrcode-action-card__error) {
width: 148px;
height: 148px;
}
.device-ledger-detail-tabs {
@ -1198,11 +1276,34 @@ onBeforeUnmount(() => {
background: var(--el-bg-color);
box-shadow: 0 -4px 12px rgb(0 0 0 / 6%);
}
</style>
@media (max-width: 1199px) {
.device-basic-media {
justify-content: flex-start;
}
.device-media-panel {
max-width: none;
}
}
@media (max-width: 767px) {
.device-basic-fields :deep(.el-col) {
max-width: 100%;
flex: 0 0 100%;
}
.device-code-row :deep(.el-col:first-child) {
max-width: 75%;
flex: 0 0 75%;
}
.device-code-row :deep(.el-col:last-child) {
max-width: 25%;
flex: 0 0 25%;
}
}
</style>

Write Preview
Loading…
Cancel
Save