ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

Browse Source
This commit is contained in:
xhf 2025-03-25 15:33:05 +08:00
commit 50899de4d5
10 changed files with 194 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -136,7 +136,7 @@
<div class="app-loading"> <div class="app-loading">
<div class="app-loading-wrap"> <div class="app-loading-wrap">
<div class="app-loading-title"> <div class="app-loading-title">
<img src="/logo.gif" class="app-loading-logo" alt="Logo" /> <!-- <img src="/logo.gif" class="app-loading-logo" alt="Logo" /> -->
<div class="app-loading-title">%VITE_APP_TITLE%</div> <div class="app-loading-title">%VITE_APP_TITLE%</div>
</div> </div>
<div class="app-loading-item"> <div class="app-loading-item">

18
src/views/board/allBoard/indexPage.vue
View File

@ -154,7 +154,7 @@
</template> </template>
<div> <div>
<div class="indexpage-popover-item"> <div class="indexpage-popover-item">
<div> 库位名： </div> <div> 库位号： </div>
<div> <div>
{{ item.showData?.locationNo || '' }} {{ item.showData?.locationNo || '' }}
</div> </div>
@ -713,7 +713,7 @@ const linkWebSocket = (url) => {
let data = JSON.parse(jsonMsg.content) let data = JSON.parse(jsonMsg.content)
// console.log('======规划路线======', JSON.parse(data).data) // console.log('======规划路线======', JSON.parse(data).data)
let dataList = JSON.parse(data).data let dataList = JSON.parse(data).data
if(lineList.value.length > 0) { if (lineList.value.length > 0) {
console.log(lineList.value) console.log(lineList.value)
lineList.value = setIsSelect(lineList.value, dataList) lineList.value = setIsSelect(lineList.value, dataList)
} }
@ -721,13 +721,13 @@ const linkWebSocket = (url) => {
}) })
} }
} }
const setIsSelect =(arr1, arr2) => { const setIsSelect = (arr1, arr2) => {
for (let i = 0; i < arr1.length; i++) { for (let i = 0; i < arr1.length; i++) {
const element = arr1[i]; const element = arr1[i]
const isExist = arr2.includes(element.id); const isExist = arr2.includes(element.id)
element.isSelect = isExist; element.isSelect = isExist
} }
return arr1; return arr1
} }
// 查看更多异常列表 // 查看更多异常列表
const lookError = () => { const lookError = () => {

114
src/views/board/device/createEditDialog.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<Dialog v-model="dialogVisible" :title="title" width="545" style="padding: 0;"> <Dialog v-model="dialogVisible" :title="title" width="545" style="padding: 0">
<el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules"> <el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
<el-form-item label="设备类型" prop="deviceType" > <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="formData.deviceType" clearable placeholder="请选择设备类型" @change="deviceTypeChange"> <el-select
v-model="formData.deviceType"
clearable
placeholder="请选择设备类型"
@change="deviceTypeChange"
>
<el-option <el-option
v-for="dict in getDictOptions(DICT_TYPE.DEVICE_TYPE)" v-for="dict in getDictOptions(DICT_TYPE.DEVICE_TYPE)"
:key="dict.value" :key="dict.value"
@ -11,62 +16,60 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备编号" prop="deviceNo"> <el-form-item label="设备编号" prop="deviceNo">
<el-input v-model="formData.deviceNo" :disabled="false" placeholder="请输入设备编号(25字以内)" maxlength="25"/> <el-input
v-model="formData.deviceNo"
:disabled="false"
placeholder="请输入设备编号(25字以内)"
maxlength="25"
/>
</el-form-item> </el-form-item>
<el-form-item label="Mac地址" prop="macAddress">
<el-form-item label="Mac地址" prop="macAddress"> <el-input
<el-input v-model="formData.macAddress" :disabled="false" placeholder="请输入Mac地址" /> v-model="formData.macAddress"
:disabled="false"
placeholder="请输入Mac地址"
maxlength="25"
show-word-limit
/>
</el-form-item> </el-form-item>
<el-form-item label="设备IP" > <el-form-item label="设备IP">
<el-input v-model="formData.deviceIp" :disabled="false" placeholder="请输入设备ip" /> <el-input v-model="formData.deviceIp" :disabled="false" placeholder="请输入设备ip" />
</el-form-item> </el-form-item>
<el-form-item label="端口" > <el-form-item label="端口">
<el-input v-model="formData.devicePort" :disabled="false" placeholder="请输入端口" /> <el-input v-model="formData.devicePort" :disabled="false" placeholder="请输入端口" />
</el-form-item> </el-form-item>
<el-form-item label="充电桩类型" prop="deviceAttribute" v-if="formData.deviceType == 1"> <el-form-item label="充电桩类型" prop="deviceAttribute" v-if="formData.deviceType == 1">
<el-select v-model="formData.deviceAttribute" clearable placeholder="请选择设备类型"> <el-select v-model="formData.deviceAttribute" clearable placeholder="请选择设备类型">
<el-option <el-option :label="'自动充电'" :value="1" />
:label="'自动充电'" <el-option :label="'手动充电'" :value="0" />
:value="1"
/>
<el-option
:label="'手动充电'"
:value="0"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="是否启用" prop="deviceEnable" > <el-form-item label="是否启用" prop="deviceEnable">
<el-select v-model="formData.deviceEnable" clearable placeholder="请选择是否启用"> <el-select v-model="formData.deviceEnable" clearable placeholder="请选择是否启用">
<el-option <el-option :label="'禁用'" :value="0" />
:label="'禁用'" <el-option :label="'启用'" :value="1" />
:value="0"
/>
<el-option
:label="'启用'"
:value="1"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备图标" > <el-form-item label="设备图标">
<UploadImg v-model="formData.mapImageUrl" :limit="1" /> <UploadImg v-model="formData.mapImageUrl" :limit="1" />
</el-form-item> </el-form-item>
<el-form-item label="设备图配置" prop="pictureConfig"> <el-form-item label="设备图配置" prop="pictureConfig">
<el-radio-group v-model="formData.pictureConfig"> <el-radio-group v-model="formData.pictureConfig">
<el-radio :label="1">默认图片</el-radio> <el-radio :label="1">默认图片</el-radio>
<el-radio :label="2">上传图片</el-radio> <el-radio :label="2">上传图片</el-radio>
<el-radio :label="3">不显示图片</el-radio> <el-radio :label="3">不显示图片</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="设备图片" prop="mapImageUrl" v-if="formData.pictureConfig === 2"> <el-form-item label="设备图片" prop="mapImageUrl" v-if="formData.pictureConfig === 2">
<UploadImg v-model="formData.url" :limit="1" /> <UploadImg v-model="formData.url" :limit="1" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div style="padding: 0 10px 10px 0;"> <div style="padding: 0 10px 10px 0">
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</div> </div>
</template> </template>
</Dialog> </Dialog>
@ -86,16 +89,13 @@ const formData = ref({
macAddress: undefined, //mac地址 macAddress: undefined, //mac地址
mapImageUrl: undefined, //设备在地图上图标 mapImageUrl: undefined, //设备在地图上图标
pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片） pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片）
url: undefined ,//上传图片附件 url: undefined, //上传图片附件
deviceAttribute: undefined, deviceAttribute: undefined,
deviceEnable:undefined, //设备启用禁用 设备启用禁用（0：禁用、1：启用） deviceEnable: undefined, //设备启用禁用 设备启用禁用（0：禁用、1：启用）
devicePort:undefined, //端口 devicePort: undefined, //端口
deviceIp:undefined, //设备IP deviceIp: undefined //设备IP
}) })
const formRules = reactive({ const formRules = reactive({
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }], deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
deviceNo: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }], deviceNo: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
@ -117,13 +117,13 @@ const open = async (type, id) => {
title.value = '编辑' title.value = '编辑'
const data = await DeviceApi.deviceInformationGet({ id }) const data = await DeviceApi.deviceInformationGet({ id })
formData.value = data formData.value = data
if(!formData.value.mapImageUrl){ if (!formData.value.mapImageUrl) {
DeviceApi.getMapDeviceImageUrl({ DeviceApi.getMapDeviceImageUrl({
deviceType: formData.value.deviceType deviceType: formData.value.deviceType
}).then(res=>{ }).then((res) => {
// console.log(res) // console.log(res)
formData.value.mapImageUrl = res?res:undefined formData.value.mapImageUrl = res ? res : undefined
}) })
} }
console.log(data) console.log(data)
} else { } else {
@ -141,7 +141,7 @@ const submitForm = async () => {
if (!formRef) return if (!formRef) return
const valid = await formRef.value.validate() const valid = await formRef.value.validate()
if (!valid) return if (!valid) return
// 提交请求 // 提交请求
formLoading.value = true formLoading.value = true
try { try {
@ -164,9 +164,9 @@ const submitForm = async () => {
const deviceTypeChange = (e) => { const deviceTypeChange = (e) => {
DeviceApi.getMapDeviceImageUrl({ DeviceApi.getMapDeviceImageUrl({
deviceType: e deviceType: e
}).then(res=>{ }).then((res) => {
// console.log(res) // console.log(res)
formData.value.mapImageUrl = res?res:undefined formData.value.mapImageUrl = res ? res : undefined
}) })
} }
//前往任务管理页面 //前往任务管理页面
@ -217,14 +217,14 @@ const takeRemoteMethod = async (query, item) => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
deviceType: undefined, //车辆类型id deviceType: undefined, //车辆类型id
deviceNo: undefined, //AGV编号 deviceNo: undefined, //AGV编号
macAddress: undefined, //mac地址 macAddress: undefined, //mac地址
mapImageUrl: undefined, //设备在地图上图标 mapImageUrl: undefined, //设备在地图上图标
pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片） pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片）
url: undefined, //上传图片附件 url: undefined, //上传图片附件
deviceAttribute: undefined deviceAttribute: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>

2
src/views/mapPage/locationList/editFormDialog.vue
View File

@ -23,7 +23,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="物料信息" prop="skuInfo"> <el-form-item label="物料信息" prop="skuInfo">
<el-input v-model="form.skuInfo" /> <el-input v-model="form.skuInfo" maxlength="30" show-word-limit />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>

1
src/views/mapPage/locationList/index.vue
View File

@ -56,6 +56,7 @@
</el-form-item> </el-form-item>
<el-form-item label="物料信息" prop="skuInfo"> <el-form-item label="物料信息" prop="skuInfo">
<el-input <el-input
maxlength="30"
v-model="queryParams.skuInfo" v-model="queryParams.skuInfo"
placeholder="请输入" placeholder="请输入"
clearable clearable

4
src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
View File

@ -70,7 +70,9 @@ const form = ref({
const open = (list) => { const open = (list) => {
dialogFormVisible.value = true dialogFormVisible.value = true
form.value.mapItemIds = list.map((item) => item.id) form.value.mapItemIds = list.map((item) => item.id)
form.value.areaNumber = form.value.mapItemIds.length form.value.areaNumber = list.reduce((sum, item) => {
return sum + item.dataList.length
}, 0)
form.value.areaName = '' form.value.areaName = ''
form.value.skuInfo = '' form.value.skuInfo = ''
} }

18
src/views/mapPage/realTimeMap/components/copyOld.vue
View File

@ -154,7 +154,7 @@
</template> </template>
<div> <div>
<div class="indexpage-popover-item"> <div class="indexpage-popover-item">
<div> 库位名： </div> <div> 库位号： </div>
<div> <div>
{{ item.showData?.locationNo || '' }} {{ item.showData?.locationNo || '' }}
</div> </div>
@ -713,7 +713,7 @@ const linkWebSocket = (url) => {
let data = JSON.parse(jsonMsg.content) let data = JSON.parse(jsonMsg.content)
// console.log('======规划路线======', JSON.parse(data).data) // console.log('======规划路线======', JSON.parse(data).data)
let dataList = JSON.parse(data).data let dataList = JSON.parse(data).data
if(lineList.value.length > 0) { if (lineList.value.length > 0) {
console.log(lineList.value) console.log(lineList.value)
lineList.value = setIsSelect(lineList.value, dataList) lineList.value = setIsSelect(lineList.value, dataList)
} }
@ -722,13 +722,13 @@ const linkWebSocket = (url) => {
} }
} }
const setIsSelect =(arr1, arr2) => { const setIsSelect = (arr1, arr2) => {
for (let i = 0; i < arr1.length; i++) { for (let i = 0; i < arr1.length; i++) {
const element = arr1[i]; const element = arr1[i]
const isExist = arr2.includes(element.id); const isExist = arr2.includes(element.id)
element.isSelect = isExist; element.isSelect = isExist
} }
return arr1; return arr1
} }
// 查看更多异常列表 // 查看更多异常列表
const lookError = () => { const lookError = () => {

2
src/views/mapPage/realTimeMap/components/createTaskDialog.vue
View File

@ -117,7 +117,7 @@
<el-input <el-input
v-model="formData.skuInfo" v-model="formData.skuInfo"
placeholder="请输入物料信息" placeholder="请输入物料信息"
maxlength="100" maxlength="30"
show-word-limit show-word-limit
/> />
</el-form-item> </el-form-item>

125
src/views/mapPage/realTimeMap/components/indexPage.vue
View File

@ -7,7 +7,7 @@
cursor: isDrag ? 'pointer' : 'default', cursor: isDrag ? 'pointer' : 'default',
scale: isSizeRadio, scale: isSizeRadio,
transformOrigin: '0 0', transformOrigin: '0 0',
width: isFull?'100%':(widthVal + 'px') width: isFull ? '100%' : widthVal + 'px'
}" }"
@wheel="handleWheel" @wheel="handleWheel"
> >
@ -156,7 +156,7 @@
</template> </template>
<div> <div>
<div class="indexpage-popover-item"> <div class="indexpage-popover-item">
<div> 库位名： </div> <div> 库位号： </div>
<div> <div>
{{ item.showData?.locationNo || '' }} {{ item.showData?.locationNo || '' }}
</div> </div>
@ -177,16 +177,16 @@
</el-popover> </el-popover>
<!-- 设备点 --> <!-- 设备点 -->
<el-popover placement="top-start" trigger="hover" width="auto" v-if="item.type == 3" > <el-popover placement="top-start" trigger="hover" width="auto" v-if="item.type == 3">
<template #reference> <template #reference>
<img <img
v-if="item.type == 3" v-if="item.type == 3"
:src=" :src="
item.formattedData.mapImageUrl || item.formattedData.mapImageUrl ||
'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png' 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
" "
:style="nodeStyle(item, index)" :style="nodeStyle(item, index)"
/> />
</template> </template>
<div> <div>
<div class="indexpage-popover-item"> <div class="indexpage-popover-item">
@ -198,12 +198,12 @@
<div class="indexpage-popover-item"> <div class="indexpage-popover-item">
<div> 设备类型： </div> <div> 设备类型： </div>
<div> <div>
{{ item.showData?filterTypeFun(item.showData.deviceType, typeList) : '' }} {{ item.showData ? filterTypeFun(item.showData.deviceType, typeList) : '' }}
</div> </div>
</div> </div>
</div> </div>
</el-popover> </el-popover>
<!-- 停车点 --> <!-- 停车点 -->
<img <img
v-if="item.type == 4" v-if="item.type == 4"
@ -238,7 +238,7 @@
</div> </div>
<!-- 左下角图层 --> <!-- 左下角图层 -->
<!-- :style="{ left: boxLeft + 'px' }" --> <!-- :style="{ left: boxLeft + 'px' }" -->
<div class="affix-container-left" :style="{ left: 25 + 'px' }" v-if="!isAllBoard"> <div class="affix-container-left" :style="{ left: 25 + 'px' }" v-if="!isAllBoard">
<div class="affix-container-left-box"> <div class="affix-container-left-box">
<div <div
class="affix-container-left-box-item-box" class="affix-container-left-box-item-box"
@ -375,19 +375,21 @@ const nodeStyle = (item, index) => {
const typeList = ref([]) const typeList = ref([])
const getTypeList = () => { const getTypeList = () => {
typeList.value = getDictOptions(DICT_TYPE.DEVICE_TYPE)&&getDictOptions(DICT_TYPE.DEVICE_TYPE).length?JSON.parse(JSON.stringify(getDictOptions(DICT_TYPE.DEVICE_TYPE))):[] typeList.value =
getDictOptions(DICT_TYPE.DEVICE_TYPE) && getDictOptions(DICT_TYPE.DEVICE_TYPE).length
? JSON.parse(JSON.stringify(getDictOptions(DICT_TYPE.DEVICE_TYPE)))
: []
} }
//根据type和列表返回对应中文 //根据type和列表返回对应中文
const filterTypeFun = (type, list) => { const filterTypeFun = (type, list) => {
if (list.length) { if (list.length) {
let obj = list.find(item => { let obj = list.find((item) => {
return item.value == type return item.value == type
}) })
return obj == undefined ? type : obj.label return obj == undefined ? type : obj.label
} else { } else {
return type return type
} }
} }
const isFull = ref(false) const isFull = ref(false)
// 定义属性 // 定义属性
@ -484,7 +486,6 @@ const changDriveLineShow = () => {
const toggleFullScreen = () => { const toggleFullScreen = () => {
var elem = document.getElementById('indexpage-container') // 获取元素 var elem = document.getElementById('indexpage-container') // 获取元素
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
// 检查是否已经是全屏模式 // 检查是否已经是全屏模式
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
// 支持requestFullscreen API的标准方式 // 支持requestFullscreen API的标准方式
@ -530,41 +531,41 @@ const toggleFullScreen = () => {
isFull.value = false isFull.value = false
radio.value = 1 radio.value = 1
if (pointList.value.length) { if (pointList.value.length) {
pointList.value.forEach((item) => { pointList.value.forEach((item) => {
item.radio = radio.value item.radio = radio.value
}) })
} }
if (testCarList.value.length) { if (testCarList.value.length) {
testCarList.value.forEach((item) => { testCarList.value.forEach((item) => {
item.radio = radio.value item.radio = radio.value
}) })
} }
resetPosition() resetPosition()
} else { } else {
console.log('已进入全屏模式') console.log('已进入全屏模式')
// 在这里可以添加进入全屏后的逻辑 // 在这里可以添加进入全屏后的逻辑
isDrag.value = true isDrag.value = true
isFull.value = true isFull.value = true
nextTick(() => { nextTick(() => {
let width = getElementWidthByClass('affix-container') let width = getElementWidthByClass('affix-container')
getImageWidth(imgUrl.value, 'width').then((res) => { getImageWidth(imgUrl.value, 'width').then((res) => {
console.log(res) console.log(res)
let ratioVal = width / res let ratioVal = width / res
radio.value = ratioVal radio.value = ratioVal
console.log(radio.value) console.log(radio.value)
// widthVal.value = res * radio.value // widthVal.value = res * radio.value
if (pointList.value.length) { if (pointList.value.length) {
pointList.value.forEach((item) => { pointList.value.forEach((item) => {
item.radio = radio.value item.radio = radio.value
}) })
} }
if (testCarList.value.length) { if (testCarList.value.length) {
testCarList.value.forEach((item) => { testCarList.value.forEach((item) => {
item.radio = radio.value item.radio = radio.value
}) })
} }
}) })
}) })
} }
}) })
@ -620,7 +621,11 @@ const getPositionMapListFun = async (positionMapId) => {
pointList.value?.forEach((item) => { pointList.value?.forEach((item) => {
item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : '' item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
// console.log(JSON.parse(item.dataJson),item.type) // console.log(JSON.parse(item.dataJson),item.type)
item.showData = item.dataJson ? (item.type == 2 ? JSON.parse(item.dataJson)[0] : JSON.parse(item.dataJson)) : null item.showData = item.dataJson
? item.type == 2
? JSON.parse(item.dataJson)[0]
: JSON.parse(item.dataJson)
: null
item.imgUrl = formatTypeImg(item.type) item.imgUrl = formatTypeImg(item.type)
if (item.type === 1) { if (item.type === 1) {
@ -796,7 +801,7 @@ const linkWebSocket = (url) => {
let data = JSON.parse(jsonMsg.content) let data = JSON.parse(jsonMsg.content)
// console.log('======规划路线======', JSON.parse(data).data) // console.log('======规划路线======', JSON.parse(data).data)
let dataList = JSON.parse(data).data let dataList = JSON.parse(data).data
if(lineList.value.length > 0) { if (lineList.value.length > 0) {
console.log(lineList.value) console.log(lineList.value)
lineList.value = setIsSelect(lineList.value, dataList) lineList.value = setIsSelect(lineList.value, dataList)
} }
@ -804,13 +809,13 @@ const linkWebSocket = (url) => {
}) })
} }
} }
const setIsSelect =(arr1, arr2) => { const setIsSelect = (arr1, arr2) => {
for (let i = 0; i < arr1.length; i++) { for (let i = 0; i < arr1.length; i++) {
const element = arr1[i]; const element = arr1[i]
const isExist = arr2.includes(element.id); const isExist = arr2.includes(element.id)
element.isSelect = isExist; element.isSelect = isExist
} }
return arr1; return arr1
} }
// 查看更多异常列表 // 查看更多异常列表

91
src/views/mapPage/realTimeMap/components/storeDialog.vue
View File

@ -2,37 +2,45 @@
<Dialog v-model="dialogVisible" title="库位信息" width="545" class="task-dialog"> <Dialog v-model="dialogVisible" title="库位信息" width="545" class="task-dialog">
<div class="store-dialog"> <div class="store-dialog">
<div class="store-dialog-left"> <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)'}"> <div
{{ item.locationNo || '--' }} class="store-dialog-left-item ellipsis"
<img src="@/assets/imgs/jinyong-2.png" alt="" class="store-dialog-left-item-img-jinyong" v-if="item.locationEnable === 0"/> @click="changeStore(item, index)"
<img src="@/assets/imgs/suoding.png" alt="" class="store-dialog-left-item-img-suoding"/> 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> </div>
<div style="flex: 1"> <div style="flex: 1">
<el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules"> <el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
<el-form-item label="库位编号"> <el-form-item label="库位编号">
<el-input v-model="formData.locationNo" :disabled="true" /> <el-input v-model="formData.locationNo" :disabled="true" />
</el-form-item> </el-form-item>
<el-form-item label="区域"> <el-form-item label="区域">
<el-input v-model="formData.areaName" :disabled="true" /> <el-input v-model="formData.areaName" :disabled="true" />
</el-form-item> </el-form-item>
<el-form-item label="物料信息"> <el-form-item label="物料信息">
<el-input v-model="formData.skuInfo" /> <el-input v-model="formData.skuInfo" maxlength="30" show-word-limit />
</el-form-item> </el-form-item>
<el-form-item label="状态" > <el-form-item label="状态">
<el-select <el-select v-model="formData.locationUseStatus" placeholder="请选择状态">
v-model="formData.locationUseStatus"
placeholder="请选择状态"
>
<el-option label="空闲" :value="0" /> <el-option label="空闲" :value="0" />
<el-option label="占用" :value="1" /> <el-option label="占用" :value="1" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="禁用库位" > <el-form-item label="禁用库位">
<el-select <el-select v-model="formData.locationEnable" placeholder="剧情选择是否禁用库位">
v-model="formData.locationEnable"
placeholder="剧情选择是否禁用库位"
>
<el-option label="禁用" :value="0" /> <el-option label="禁用" :value="0" />
<el-option label="启用" :value="1" /> <el-option label="启用" :value="1" />
</el-select> </el-select>
@ -55,32 +63,27 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({ const formData = ref({
locationNo: undefined, //库位编号 locationNo: undefined, //库位编号
areaName: undefined, //区域名称 areaName: undefined, //区域名称
locationUseStatus: undefined, //库位状态 （0：空闲、1：占用） locationUseStatus: undefined, //库位状态 （0：空闲、1：占用）
locationEnable: undefined, //是否禁用（0：禁用、1：启用） locationEnable: undefined, //是否禁用（0：禁用、1：启用）
skuInfo: undefined, //物料信息 skuInfo: undefined //物料信息
})
const formRules = reactive({
}) })
const formRules = reactive({})
const selectIndex = ref(0) const selectIndex = ref(0)
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
const storeData = ref([]) const storeData = ref([])
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (data) => { const open = async (data) => {
resetForm() resetForm()
if(data&&data.length){ if (data && data.length) {
storeData.value = data.reverse() storeData.value = data.reverse()
console.log(storeData.value) console.log(storeData.value)
selectIndex.value = 0 selectIndex.value = 0
console.log(data) console.log(data)
formData.value = JSON.parse(JSON.stringify(data[0])) formData.value = JSON.parse(JSON.stringify(data[0]))
} }
dialogVisible.value = true dialogVisible.value = true
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -98,7 +101,6 @@ const submitForm = async () => {
message.success('操作成功') message.success('操作成功')
emit('success') emit('success')
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
@ -112,15 +114,14 @@ const changeStore = (item, index) => {
//前往任务管理页面 //前往任务管理页面
const { push } = useRouter() const { push } = useRouter()
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
locationNo: undefined, //库位编号 locationNo: undefined, //库位编号
areaName: undefined, //区域名称 areaName: undefined, //区域名称
locationUseStatus: undefined, //库位状态 （0：空闲、1：占用） locationUseStatus: undefined, //库位状态 （0：空闲、1：占用）
locationEnable: undefined, //是否禁用（0：禁用、1：启用） locationEnable: undefined, //是否禁用（0：禁用、1：启用）
skuInfo: undefined, //物料信息 skuInfo: undefined //物料信息
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
@ -212,24 +213,24 @@ const resetForm = () => {
color: #0d162a; color: #0d162a;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0, 0, 0, 0);
position: relative; position: relative;
} }
.ellipsis { .ellipsis {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.store-dialog-left-item-img-jinyong{ .store-dialog-left-item-img-jinyong {
position: absolute; position: absolute;
left: -3px; left: -3px;
top: -4px; top: -4px;
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
.store-dialog-left-item-img-suoding{ .store-dialog-left-item-img-suoding {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;