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

style：模具组-二维码/操作栏样式调整

Browse Source
main
黄伟杰 6 days ago
parent e80a187986
commit 49e47512d9
3 changed files with 127 additions and 20 deletions
Show Stats Download Patch File Download Diff File

17
src/locales/en.ts
Unescape Escape View File

@ -2516,10 +2516,23 @@ export default {
uninstallDown: 'Down Mold',
noRecords: 'No operation records',
qrcodeDialogTitle: 'Mold QR Code',
qrcodeTitle: 'Mold QR Code',
qrcodePrintTitle: '{name} Code Print Preview',
qrcodeEmpty: 'No QR code',
qrcodeLoadError: 'QR code load failed',
qrcodeRefreshConfirm: 'Confirm to refresh this mold QR code?'
qrcodeRefreshConfirm: 'Confirm to refresh this mold QR code?',
// 维护操作
maintain: 'Maintain',
maintainType: 'Maintain Type',
placeholderMaintainType: 'Please select maintain type',
maintainTypeInspect: 'Inspect',
maintainTypeMaintain: 'Maintain',
maintainTypeRepair: 'Repair',
maintainTypeReplaceNet: 'Replace Net',
replaceNetRemark: 'Remark',
placeholderReplaceNetRemark: 'Please input remark',
moldInfo: 'Mold Info',
maintainInfo: 'Maintain Info'
},
MoldBrandDetail: {
@ -5044,4 +5057,6 @@ export default {
empty: 'Please configure energy types first',
exportSuccess: 'Export started'
}
}
}
}

15
src/locales/zh-CN.ts
Unescape Escape View File

@ -2016,10 +2016,23 @@ export default {
uninstallDown: '下模',
noRecords: '暂无操作记录',
qrcodeDialogTitle: '模具二维码',
qrcodeTitle: '模具二维码',
qrcodePrintTitle: '{name}码打印预览',
qrcodeEmpty: '暂无二维码',
qrcodeLoadError: '二维码加载失败',
qrcodeRefreshConfirm: '确认刷新该模具二维码吗？'
qrcodeRefreshConfirm: '确认刷新该模具二维码吗？',
// 维护操作
maintain: '维护',
maintainType: '维护类型',
placeholderMaintainType: '请选择维护类型',
maintainTypeInspect: '点检',
maintainTypeMaintain: '保养',
maintainTypeRepair: '维修',
maintainTypeReplaceNet: '更换压网',
replaceNetRemark: '备注',
placeholderReplaceNetRemark: '请输入备注',
moldInfo: '模具信息',
maintainInfo: '维护信息'
},
MoldBrandDetail: {

115
src/views/erp/mold/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表视图 -->
<template v-if="!operateFormVisible">
<!-- 列表页 -->
<template v-if="!operateFormVisible && !maintainFormVisible">
<div class="mold-brand-page__header">
<div v-for="card in statusCards" :key="card.key" class="mold-brand-page__stat"
:class="{ 'is-active': currentStatusKey === card.key }" @click="changeStatus(card.key, card.status)">
@ -50,7 +50,7 @@
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
style="margin-top: 16px;">
<el-table-column :label="t('MoldManagement.MoldBrandPage.image')" align="center" width="92">
<el-table-column :label="t('MoldManagement.MoldBrandPage.image')" align="center" width="120">
<template #default="scope">
<el-image v-if="getImageList(scope.row.images).length" :src="getImageList(scope.row.images)[0]"
:preview-src-list="getImageList(scope.row.images)" fit="cover" preview-teleported
@ -58,7 +58,11 @@
<span v-else class="mold-brand-page__empty">-</span>
</template>
</el-table-column>
<el-table-column :label="t('MoldManagement.MoldBrandPage.code')" prop="code" min-width="150" sortable />
<el-table-column :label="t('MoldManagement.MoldBrandPage.code')" prop="code" min-width="150" sortable>
<template #default="scope">
<span class="mold-brand-page__code-link" @click="previewQrcode(scope.row)">{{ scope.row.code }}</span>
</template>
</el-table-column>
<el-table-column :label="t('MoldManagement.MoldBrandPage.name')" prop="name" min-width="160" sortable />
<el-table-column :label="t('MoldManagement.MoldBrandPage.productName')" prop="productName" min-width="140" />
<el-table-column :label="t('MoldManagement.MoldBrandPage.version')" prop="version" width="100" />
@ -78,7 +82,7 @@
align="center" />
<el-table-column :label="t('MoldManagement.MoldBrandPage.createTime')" prop="createTime"
:formatter="dateFormatter" width="160" sortable />
<el-table-column :label="t('MoldManagement.MoldBrandPage.operate')" fixed="right" width="310" align="right">
<el-table-column :label="t('MoldManagement.MoldBrandPage.operate')" fixed="right" width="310" align="center">
<template #default="scope">
<el-button link type="primary" @click="openDetail(scope.row.id)">{{ t('MoldManagement.MoldBrandPage.detail')
}}</el-button>
@ -86,10 +90,8 @@
t('MoldManagement.MoldBrandPage.moldUp') }}</el-button>
<el-button link type="primary" @click="openOperateForm(2, scope.row)" v-if="scope.row.status === 0">{{
t('MoldManagement.MoldBrandPage.moldDown') }}</el-button>
<el-button link type="warning" @click="handleReservedAction(t('MoldManagement.MoldBrandPage.repair'))">{{
t('MoldManagement.MoldBrandPage.repair') }}</el-button>
<el-button link type="primary" @click="previewQrcode(scope.row)">{{ t('MoldManagement.MoldBrandPage.qrcode')
}}</el-button>
<el-button link type="warning" @click="openMaintainForm(scope.row)">{{
t('MoldManagement.MoldBrandPage.maintain') }}</el-button>
<el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['erp:mold-brand:update']">{{ t('MoldManagement.MoldBrandPage.edit') }}</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:mold-brand:delete']">{{
@ -103,7 +105,7 @@
</template>
<!-- 上下模操作表单视图 -->
<template v-else>
<template v-else-if="operateFormVisible">
<MoldOperateViewComp
ref="moldOperateViewRef"
:mold="currentMold"
@ -113,17 +115,32 @@
@success="onOperateSuccess"
/>
</template>
<!-- 维护操作表单视图 -->
<template v-else-if="maintainFormVisible">
<MoldMaintainViewComp
ref="moldMaintainViewRef"
:mold="currentMold"
:device-options="deviceOptions"
@back="closeMaintainForm"
@success="onMaintainSuccess"
/>
</template>
</ContentWrap>
<Dialog v-model="qrcodeVisible" :title="t('MoldManagement.MoldBrandPage.qrcodeDialogTitle')" width="360px">
<QrcodeActionCard :image-url="currentQrcodeRow?.qrCodeUrl" :print-id="currentQrcodeRow?.id" :print-template-type="4"
:print-title="t('MoldManagement.MoldBrandPage.qrcodePrintTitle', { name: currentQrcodeRow?.name || t('MoldManagement.MoldBrandPage.mold') })"
:print-paper-width="80" :print-paper-height="80" :print-max-width="220"
:empty-text="t('MoldManagement.MoldBrandPage.qrcodeEmpty')"
:error-text="t('MoldManagement.MoldBrandPage.qrcodeLoadError')" :refresh-url="getQrcodeRefreshUrl()"
:refresh-disabled="!currentQrcodeRow?.id || !currentQrcodeRow?.code"
:refresh-confirm-text="t('MoldManagement.MoldBrandPage.qrcodeRefreshConfirm')"
@refresh-success="handleQrcodeRefreshSuccess" />
<div class="mold-brand-page__qr-card">
<div class="mold-brand-page__qr-title">{{ t('MoldManagement.MoldBrandPage.qrcodeTitle') }}</div>
<QrcodeActionCard :image-url="currentQrcodeRow?.qrCodeUrl" :print-id="currentQrcodeRow?.id" :print-template-type="4"
:print-title="t('MoldManagement.MoldBrandPage.qrcodePrintTitle', { name: currentQrcodeRow?.name || t('MoldManagement.MoldBrandPage.mold') })"
:print-paper-width="80" :print-paper-height="80" :print-max-width="220"
:empty-text="t('MoldManagement.MoldBrandPage.qrcodeEmpty')"
:error-text="t('MoldManagement.MoldBrandPage.qrcodeLoadError')" :refresh-url="getQrcodeRefreshUrl()"
:refresh-disabled="!currentQrcodeRow?.id || !currentQrcodeRow?.code"
:refresh-confirm-text="t('MoldManagement.MoldBrandPage.qrcodeRefreshConfirm')"
@refresh-success="handleQrcodeRefreshSuccess" />
<div class="mold-brand-page__qr-code">{{ currentQrcodeRow?.code || '-' }}</div>
</div>
</Dialog>
<component :is="MoldBrandFormComp" ref="formRef" @success="getList" />
@ -178,6 +195,7 @@ const queryFormRef = ref()
const formRef = ref()
const MoldBrandFormComp = defineAsyncComponent(() => import('./MoldBrandForm.vue') as any)
const MoldOperateViewComp = defineAsyncComponent(() => import('./components/MoldOperateView.vue') as any)
const MoldMaintainViewComp = defineAsyncComponent(() => import('./components/MoldMaintainView.vue') as any)
// 上下模操作相关
const operateFormVisible = ref(false)
@ -185,6 +203,10 @@ const operateType = ref(1) // 1: 上模, 2: 下模
const currentMold = ref<MoldBrandVO | null>(null)
const moldOperateViewRef = ref()
// 维护操作相关
const maintainFormVisible = ref(false)
const moldMaintainViewRef = ref()
const statusCards = computed(() => [
{ key: 'all', label: t('MoldManagement.MoldBrandPage.all'), value: counters.allCount, status: undefined },
{ key: 'onMachine', label: t('MoldManagement.MoldBrandPage.onMachine'), value: counters.onMachineCount, status: 1 },
@ -324,6 +346,23 @@ const onOperateSuccess = () => {
// 提交成功后的回调
}
// 维护操作函数
const openMaintainForm = async (row: MoldBrandVO) => {
currentMold.value = row
maintainFormVisible.value = true
await nextTick()
moldMaintainViewRef.value?.open()
}
const closeMaintainForm = () => {
maintainFormVisible.value = false
currentMold.value = null
}
const onMaintainSuccess = () => {
// 维护提交成功后的回调
}
onMounted(async () => {
productOptions.value = await ProductApi.getMesProductSimpleList()
deviceOptions.value = await DeviceLedgerApi.getDeviceLedgerList()
@ -385,9 +424,26 @@ onMounted(async () => {
}
.mold-brand-page__empty {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 8px;
border: 1px solid var(--el-border-color-lighter);
color: var(--el-text-color-placeholder);
}
.mold-brand-page__code-link {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
}
.mold-brand-page__code-link:hover {
color: var(--el-color-primary-light-3);
}
.mold-brand-page__qrcode-wrap {
display: flex;
justify-content: center;
@ -398,6 +454,29 @@ onMounted(async () => {
height: 220px;
}
.mold-brand-page__qr-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 16px;
background: #fff;
}
.mold-brand-page__qr-title {
margin-bottom: 12px;
color: var(--el-text-color-primary);
font-weight: 600;
text-align: center;
}
.mold-brand-page__qr-code {
margin-top: 12px;
text-align: center;
font-weight: 600;
}
@media (max-width: 1200px) {
.mold-brand-page__header {
grid-template-columns: repeat(2, minmax(0, 1fr));

Write Preview
Loading…
Cancel
Save