240 lines
6.2 KiB
Vue
240 lines
6.2 KiB
Vue
<template>
|
||
<Dialog v-model="dialogVisible" title="库位信息" width="545" class="task-dialog">
|
||
<div class="store-dialog">
|
||
<div class="store-dialog-left">
|
||
<div class="store-dialog-left-item ellipsis" @click="changeStore(item, index)" v-for="(item, index) in storeData" :key="index" :style="{background:item.locationUseStatus == 1 ? '#F1CD0B' : '#4DC606',border:selectIndex==index?'2px solid #00329F':'2px solid rgba(0,0,0,0)'}">
|
||
{{ item.locationNo || '--' }}
|
||
<img src="@/assets/imgs/jinyong-2.png" alt="" class="store-dialog-left-item-img-jinyong" v-if="item.locationEnable === 0"/>
|
||
<img src="@/assets/imgs/suoding.png" alt="" class="store-dialog-left-item-img-suoding"/>
|
||
</div>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
|
||
<el-form-item label="库位编号">
|
||
<el-input v-model="formData.locationNo" :disabled="true" />
|
||
</el-form-item>
|
||
<el-form-item label="区域">
|
||
<el-input v-model="formData.areaName" :disabled="true" />
|
||
</el-form-item>
|
||
<el-form-item label="物料信息">
|
||
<el-input v-model="formData.skuInfo" />
|
||
</el-form-item>
|
||
<el-form-item label="状态" >
|
||
<el-select
|
||
v-model="formData.locationUseStatus"
|
||
placeholder="请选择状态"
|
||
>
|
||
<el-option label="空闲" :value="0" />
|
||
<el-option label="占用" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="禁用库位" >
|
||
<el-select
|
||
v-model="formData.locationEnable"
|
||
placeholder="剧情选择是否禁用库位"
|
||
>
|
||
<el-option label="禁用" :value="0" />
|
||
<el-option label="启用" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
import * as MapApi from '@/api/map/map'
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
|
||
const formData = ref({
|
||
locationNo: undefined, //库位编号
|
||
areaName: undefined, //区域名称
|
||
locationUseStatus: undefined, //库位状态 （0：空闲、1：占用）
|
||
locationEnable: undefined, //是否禁用（0：禁用、1：启用）
|
||
skuInfo: undefined, //物料信息
|
||
})
|
||
const formRules = reactive({
|
||
|
||
})
|
||
const selectIndex = ref(0)
|
||
const formRef = ref() // 表单 Ref
|
||
const storeData = ref([])
|
||
/** 打开弹窗 */
|
||
const open = async (data) => {
|
||
|
||
resetForm()
|
||
if(data&&data.length){
|
||
storeData.value = data.reverse()
|
||
console.log(storeData.value)
|
||
selectIndex.value = 0
|
||
console.log(data)
|
||
formData.value = JSON.parse(JSON.stringify(data[0]))
|
||
}
|
||
dialogVisible.value = true
|
||
|
||
|
||
}
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
|
||
/** 提交表单 */
|
||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||
const submitForm = async () => {
|
||
// 校验表单
|
||
if (!formRef) return
|
||
const valid = await formRef.value.validate()
|
||
if (!valid) return
|
||
// 提交请求
|
||
formLoading.value = true
|
||
try {
|
||
await MapApi.updateHouseLocation(formData.value)
|
||
message.success('操作成功')
|
||
emit('success')
|
||
dialogVisible.value = false
|
||
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
const changeStore = (item, index) => {
|
||
formData.value = JSON.parse(JSON.stringify(item))
|
||
selectIndex.value = index
|
||
}
|
||
|
||
//前往任务管理页面
|
||
const { push } = useRouter()
|
||
|
||
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
locationNo: undefined, //库位编号
|
||
areaName: undefined, //区域名称
|
||
locationUseStatus: undefined, //库位状态 （0：空闲、1：占用）
|
||
locationEnable: undefined, //是否禁用（0：禁用、1：启用）
|
||
skuInfo: undefined, //物料信息
|
||
}
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.task-dialog {
|
||
.el-dialog__header {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
border-top: none !important;
|
||
}
|
||
}
|
||
|
||
.task-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.el-select-dropdown__loading {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.circular {
|
||
display: inline;
|
||
height: 30px;
|
||
width: 30px;
|
||
animation: loading-rotate 2s linear infinite;
|
||
}
|
||
.path {
|
||
animation: loading-dash 1.5s ease-in-out infinite;
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: 0;
|
||
stroke-width: 2;
|
||
stroke: var(--el-color-primary);
|
||
stroke-linecap: round;
|
||
}
|
||
|
||
@keyframes loading-rotate {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes loading-dash {
|
||
0% {
|
||
stroke-dasharray: 1, 200;
|
||
stroke-dashoffset: 0;
|
||
}
|
||
50% {
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: -40px;
|
||
}
|
||
100% {
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: -120px;
|
||
}
|
||
}
|
||
@keyframes custom-spin-move {
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.store-dialog {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
.store-dialog-left {
|
||
margin-right: 24px;
|
||
flex-shrink: 0;
|
||
padding-bottom: 20px;
|
||
}
|
||
.store-dialog-left-item {
|
||
width: 132px;
|
||
height: 50px;
|
||
text-align: center;
|
||
margin-top: 1px;
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: #0d162a;
|
||
vertical-align: middle;
|
||
cursor: pointer;
|
||
border: 1px solid rgba(0,0,0,0);
|
||
position: relative;
|
||
}
|
||
.ellipsis {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.store-dialog-left-item-img-jinyong{
|
||
position: absolute;
|
||
left: -3px;
|
||
top: -4px;
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
.store-dialog-left-item-img-suoding{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
</style>
|