266 lines
12 KiB
Vue
266 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mobile-header">
|
|
<router-link :to="{ name: 'Style' }" class="btn btn-secondary">
|
|
<font-awesome-icon icon="arrow-left" />
|
|
<span class="d-none d-md-inline" v-text="$t('entity.action.back')"></span>
|
|
</router-link>
|
|
<div class="header-actions">
|
|
<button type="button" class="btn btn-success" @click="save" :disabled="isSaving">
|
|
<font-awesome-icon icon="save" />
|
|
<span class="d-none d-md-inline" v-text="$t('entity.action.save')"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-primary" @click="handlePrint" :disabled="!style.id">
|
|
<font-awesome-icon icon="print" />
|
|
<span class="d-none d-md-inline" v-text="$t('entity.action.print')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="loading-container">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">{{ $t('global.loading') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="form-container">
|
|
<vxe-form :data="style" custom-layout class="vxe-form-group" title-align="left" title-width="120" :rules="formRules" ref="styleForm">
|
|
<vxe-form-item field="number" :title="$t('jewpmsApp.style.number')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.number" type="text" :readonly="!!style.id" data-cy="number" :clearable="!style.id" />
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="name" :title="$t('jewpmsApp.style.name')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.name" type="text" clearable data-cy="name" />
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="customerNumber" :title="$t('jewpmsApp.style.customerNumber')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-select v-model="data.customerNumber" clearable data-cy="customerNumber" filterable remote :remote-method="searchCompanies">
|
|
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
|
|
<vxe-option
|
|
v-for="company in companies"
|
|
:key="company.number"
|
|
:value="company.number"
|
|
:label="`${company.name}(${company.number})`"
|
|
></vxe-option>
|
|
</vxe-select>
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="customerStyle" :title="$t('jewpmsApp.style.customerStyle')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.customerStyle" type="text" clearable data-cy="customerStyle" />
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="productType" :title="$t('jewpmsApp.style.productType')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-select v-model="data.productType" clearable data-cy="productType">
|
|
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
|
|
<vxe-option
|
|
v-for="type in productTypes"
|
|
:key="type.number"
|
|
:value="type.number"
|
|
:label="type.name + ' (' + type.number + ')'"
|
|
></vxe-option>
|
|
</vxe-select>
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="customsUnit" :title="$t('jewpmsApp.style.customsUnit')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.customsUnit" type="text" clearable data-cy="customsUnit" />
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item
|
|
v-for="group in styleGroupTitle"
|
|
:key="group.number"
|
|
:field="group.number"
|
|
:title="group.name || $t(`jewpmsApp.style.${group.number}`)"
|
|
:item-render="{}"
|
|
>
|
|
<template #default="{ data }">
|
|
<vxe-select
|
|
v-model="data[group.number]"
|
|
filterable
|
|
clearable
|
|
:data-cy="group.number"
|
|
@change="event => handleStyleGroupChange(group.number, event)"
|
|
>
|
|
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
|
|
<vxe-option
|
|
v-for="dict in styleGroupDicts[parseInt(group.number.replace(styleGroupPrefix, ''))]"
|
|
:key="dict.number"
|
|
:value="dict.number"
|
|
:label="`${dict.name}(${dict.number})`"
|
|
></vxe-option>
|
|
</vxe-select>
|
|
</template>
|
|
</vxe-form-item>
|
|
<vxe-form-item field="property" :title="$t('jewpmsApp.style.property')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.property" type="text" clearable data-cy="property" />
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="imageUrl" :title="$t('jewpmsApp.style.imageUrl')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<div class="image-upload-container">
|
|
<div class="image-preview" v-if="data.imageUrl">
|
|
<vxe-image :src="data.imageUrl" :preview-src="data.imageUrl" alt="$t('jewpmsApp.style.imageUrl')" class="preview-image" />
|
|
</div>
|
|
<div class="image-placeholder" v-else>
|
|
<font-awesome-icon icon="image" size="2x" />
|
|
<span>{{ $t('entity.action.upload.image') }}</span>
|
|
</div>
|
|
<div class="upload-actions">
|
|
<router-link :to="{ name: 'JhiCamera', query: { returnPath: $route.fullPath, id: style.id } }" class="btn btn-primary">
|
|
<font-awesome-icon icon="camera" />
|
|
<span>{{ $t('entity.action.camera.open') }}</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item field="remark" :title="$t('jewpmsApp.style.remark')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-textarea v-model="data.remark" data-cy="remark" />
|
|
</template>
|
|
</vxe-form-item>
|
|
<vxe-form-item field="quality" :title="$t('jewpmsApp.style.quality')" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-select
|
|
v-model="data.quality"
|
|
clearable
|
|
data-cy="quality"
|
|
@change="loadStyleDtls"
|
|
:disabled="processDtls.some(r => hasEditStatus(r)) || settingDtls.some(r => hasEditStatus(r))"
|
|
>
|
|
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
|
|
<vxe-option
|
|
v-for="item in qualityDicts"
|
|
:key="item.number"
|
|
:value="item.number"
|
|
:label="item.name + ' (' + item.number + ')'"
|
|
></vxe-option>
|
|
</vxe-select>
|
|
</template>
|
|
</vxe-form-item>
|
|
</vxe-form>
|
|
|
|
<vxe-tabs v-model="activeTab" :before-change-method="handleTabChange">
|
|
<vxe-tab-pane name="setting" :title="$t('jewpmsApp.style.setting.title')" icon="vxe-icon-setting-fill">
|
|
<vxe-table
|
|
v-if="settingDtls"
|
|
ref="settingRef"
|
|
:data="settingDtls"
|
|
stripe
|
|
keepSource
|
|
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showStatus: true }"
|
|
show-footer
|
|
:footer-method="footerMethod"
|
|
>
|
|
<vxe-column
|
|
v-for="column in settingColumns.filter(col => col.visible !== false)"
|
|
:key="column.field"
|
|
:field="column.field"
|
|
:title="$t(column.title)"
|
|
:sortable="column.sortable"
|
|
:width="column.width"
|
|
:edit-render="column.editRender"
|
|
>
|
|
<template #default="{ row }" v-if="column.field === 'process'">
|
|
{{ settingTypes.find(s => s.number === String(row.process))?.name || row.process }}
|
|
</template>
|
|
<template #header="{ column }" v-if="column.title === 'entity.action.actions'">
|
|
<span class="vxe-button">{{ column.title }}</span>
|
|
<vxe-button class="btn-circle" icon="vxe-icon-square-plus-square" status="primary" @click="addDtlEvent"></vxe-button>
|
|
</template>
|
|
<template #default="{ row }" v-if="column.title === 'entity.action.actions'">
|
|
<div class="vxe-group">
|
|
<template v-if="hasEditStatus(row)">
|
|
<vxe-button class="btn-circle" icon="vxe-icon-save" status="success" @click="saveDtlEvent(row)"></vxe-button>
|
|
<vxe-button class="btn-circle" icon="vxe-icon-undo" status="warning" @click="cancelDtlEvent(row)"></vxe-button>
|
|
</template>
|
|
<template v-else-if="!settingDtls.some(r => hasEditStatus(r))">
|
|
<vxe-button class="btn-circle text-primary" icon="vxe-icon-signature" @click="editDtlEvent(row)"></vxe-button>
|
|
<vxe-button class="btn-circle text-danger" icon="vxe-icon-delete" @click="prepareDelete(row)"></vxe-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</vxe-tab-pane>
|
|
<vxe-tab-pane name="process" :title="$t('jewpmsApp.style.process.title')" icon="vxe-icon-custom-column">
|
|
<vxe-table
|
|
v-if="processDtls"
|
|
ref="processRef"
|
|
:data="processDtls"
|
|
stripe
|
|
keepSource
|
|
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showStatus: true }"
|
|
show-footer
|
|
:footer-method="footerMethod"
|
|
>
|
|
<vxe-column
|
|
v-for="column in processColumns.filter(col => col.visible !== false)"
|
|
:key="column.field"
|
|
:field="column.field"
|
|
:title="$t(column.title)"
|
|
:sortable="column.sortable"
|
|
:width="column.width"
|
|
:edit-render="column.editRender"
|
|
>
|
|
<template #default="{ row }" v-if="column.field === 'process'">
|
|
{{ processTypes.find(s => s.number === String(row.process))?.name || row.process }}
|
|
</template>
|
|
<template #header="{ column }" v-if="column.title === 'entity.action.actions'">
|
|
<span class="vxe-button">{{ column.title }}</span>
|
|
<vxe-button class="btn-circle" icon="vxe-icon-square-plus-square" status="primary" @click="addDtlEvent"></vxe-button>
|
|
</template>
|
|
<template #default="{ row }" v-if="column.title === 'entity.action.actions'">
|
|
<div class="vxe-group">
|
|
<template v-if="hasEditStatus(row)">
|
|
<vxe-button class="btn-circle" icon="vxe-icon-save" status="success" @click="saveDtlEvent(row)"></vxe-button>
|
|
<vxe-button class="btn-circle" icon="vxe-icon-undo" status="warning" @click="cancelDtlEvent(row)"></vxe-button>
|
|
</template>
|
|
<template v-else-if="!processDtls.some(r => hasEditStatus(r))">
|
|
<vxe-button class="btn-circle text-primary" icon="vxe-icon-signature" @click="editDtlEvent(row)"></vxe-button>
|
|
<vxe-button class="btn-circle text-danger" icon="vxe-icon-delete" @click="prepareDelete(row)"></vxe-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</vxe-tab-pane>
|
|
</vxe-tabs>
|
|
</div>
|
|
<!-- 删除确认对话框 -->
|
|
<vxe-modal
|
|
show-footer
|
|
show-cancel-button
|
|
show-confirm-button
|
|
v-model="showDelete"
|
|
:title="$t('entity.detail.title')"
|
|
@confirm="deleteStyleDtl"
|
|
>
|
|
<vxe-text status="warning" class="text-xl">{{
|
|
$t('jewpmsApp.style.detail.delete.question', { param: removeRow?.process || removeRow?.sortNo })
|
|
}}</vxe-text>
|
|
</vxe-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./style-edit.component.ts"></script>
|
|
|
|
<style>
|
|
@import '@/../content/css/edit-form.css';
|
|
@import '@/../content/css/mobile-header.css';
|
|
</style>
|