jewpms/src/main/webapp/app/entities/region/region-edit.vue
user e4923bac17 feat: 统一选择组件中的标签格式为“名称(编号)”并添加状态字段
在多个组件中更新了下拉选择框的标签格式,使其统一为“名称(编号)”的形式,以提升用户体验。同时,在区域编辑页面中新增了状态字段的选择功能,并更新了相关的国际化文件以支持新功能。
2025-06-29 22:34:19 +08:00

99 lines
4.4 KiB
Vue

<template>
<div>
<div class="mobile-header">
<router-link :to="{ name: 'Region' }" 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>
</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="region" custom-layout class="vxe-form-group" title-align="left" title-width="90" :rules="formRules" ref="regionForm">
<vxe-form-item field="number" :title="$t('jewpmsApp.region.number')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.number" type="text" :readonly="!!region.id" data-cy="number" :clearable="!region.id" />
</template>
</vxe-form-item>
<vxe-form-item field="name" :title="$t('jewpmsApp.region.name')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.name" type="text" data-cy="name" clearable />
</template>
</vxe-form-item>
<vxe-form-item field="parentNumber" :title="$t('jewpmsApp.region.parentNumber')" :item-render="{}">
<template #default="{ data }">
<vxe-select v-model="data.parentNumber" clearable data-cy="parentNumber">
<vxe-option
v-for="item in parentRegions"
:key="item.number"
:value="item.number"
:label="item.name + ' (' + item.number + ')'"
/>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item field="contactPerson" :title="$t('jewpmsApp.region.contactPerson')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.contactPerson" type="text" data-cy="contactPerson" clearable />
</template>
</vxe-form-item>
<vxe-form-item field="contactPhone" :title="$t('jewpmsApp.region.contactPhone')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.contactPhone" type="text" data-cy="contactPhone" clearable />
</template>
</vxe-form-item>
<vxe-form-item field="email" :title="$t('jewpmsApp.region.email')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.email" type="text" data-cy="email" clearable />
</template>
</vxe-form-item>
<vxe-form-item field="contactAddress" :title="$t('jewpmsApp.region.contactAddress')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.contactAddress" type="text" data-cy="contactAddress" clearable />
</template>
</vxe-form-item>
<vxe-form-item field="status" :title="$t('jewpmsApp.region.status')" :item-render="{}">
<template #default="{ data }">
<vxe-select v-model="data.status" clearable data-cy="status">
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
<vxe-option
v-for="dict in statusDicts"
:key="dict.number"
:value="dict.number"
:label="dict.name + ' (' + dict.number + ')'"
/>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item field="sortNo" :title="$t('jewpmsApp.region.sortNo')" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.sortNo" type="number" min="0" exponential clearable data-cy="sortNo" />
</template>
</vxe-form-item>
<vxe-form-item field="remark" :title="$t('jewpmsApp.region.remark')" :item-render="{}">
<template #default="{ data }">
<vxe-textarea v-model="data.remark" data-cy="remark" />
</template>
</vxe-form-item>
</vxe-form>
</div>
</div>
</template>
<script lang="ts" src="./region-edit.component.ts"></script>
<style>
@import '@/../content/css/edit-form.css';
</style>