wcs_java/wcs_web/src/components/page/stockScan/StockScanDetail.vue

199 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup lang="ts">
import TrueFalseTagStyleFormatter from "@/plugin/formatter/TrueFalseTagStyleFormatter.ts";
import {StockScanTypeFormatter} from "@/plugin/formatter/StockScanTypeFormatter.ts";
import {ref} from "vue";
import type {IAppStockScan} from "@/model/table/IAppStockScan.ts";
import type {IAppBaseScanMethod} from "@/model/table/IAppBaseScanMethod.ts";
import StockScanApi from "@/api/stockScan.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import type {AppServeResponse} from "@/interface/api/AppServeResponse.ts";
import {FormatterUtils} from "@/utils/FormatterUtils.ts";
import AppPermission from "@/components/manage/AppPermission.vue";
const modelValue = defineModel<boolean>('modelValue', {required: true, default: false});
const formData = defineModel<IAppStockScan>('formData', {required: true, default: () => {}})
const emit = defineEmits(['reLoadingTableData']);
const trueFalseTagStyleFormatter = new TrueFalseTagStyleFormatter();
const stockScanTypeFormatter = new StockScanTypeFormatter();
const scanMethodList = ref<IAppBaseScanMethod[]>([]); // 存放扫码方法数据
const selectScanMethod = ref<IAppBaseScanMethod>({}); // 选中的扫码方法
const scanMethodSwitch = ref<boolean>(true);
const close = () => {
modelValue.value = false;
};
// 获取扫码方法数据
const queryScanMethod = () => {
StockScanApi.queryAllScanMethod().then((res) => {
const stringify = JSON.stringify(res.data);
const response = JSON.parse(stringify) as AppServeDataResponse<IAppBaseScanMethod[]>;
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
scanMethodList.value = response.data;
return;
}
MessageUtils.errMessage(response.msg);
}).catch(() => {});
};
// 扫码方法发生变更时触发
const changeScanMethod = (value: any) => {
console.log('扫码方法发生变更:' + value)
if(scanMethodList != undefined && scanMethodList.value != undefined && scanMethodList.value.length > 0) {
const find = scanMethodList.value.find((item: IAppBaseScanMethod) => item.methodId === value.toString());
if(find != undefined) {
selectScanMethod.value = find;
} else {
selectScanMethod.value = {};
}
} else {
selectScanMethod.value = {};
}
};
// 保存
const save = () => {
MessageUtils.confirmMessageBox('确定要保存吗?', '请确认').then(() => {
const loadingInstance = MessageUtils.loading('保存中');
StockScanApi.updateStockScan(formData.value).then((res) => {
const stringify = JSON.stringify(res.data);
const response = JSON.parse(stringify) as AppServeResponse;
if (response && response.code == AppServeResponseCodeEnum.SUCCESS) {
MessageUtils.successMessage('保存成功');
emit('reLoadingTableData');
close();
return;
}
MessageUtils.errMessage(response.msg);
}).catch(() => {}).finally(() => {
loadingInstance.close();
});
}).catch(() => {});
};
// 删除数据
const deleteData = () => {
MessageUtils.confirmMessageBox('确定要删除吗?', '删除确认').then(() => {
const loadingInstance = MessageUtils.loading("正在删除");
StockScanApi.deleteStockScan(formData.value.scanId).then(res => {
const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
if (response && response.code == AppServeResponseCodeEnum.SUCCESS) {
MessageUtils.successMessage('删除成功');
emit('reLoadingTableData');
close();
return;
}
MessageUtils.errMessage(response.msg);
}).catch(() => {}).finally(() => {
loadingInstance.close();
});
}).catch(() => {});
}
</script>
<template>
<el-drawer v-model="modelValue" title="编辑扫码点位" @close="close" :close-on-click-modal="false" direction="btt" size="80vh" @opened="queryScanMethod">
<el-row>
<el-col :span="12">
<el-form :model="formData" label-position="right" label-width="100px" require-asterisk-position="right" style="width: calc(100% - 10px)">
<el-form-item label="扫码点位:" required>
<el-text type="primary">{{formData.scanId}}</el-text>
</el-form-item>
<el-form-item label="扫码名称:" required>
<el-input v-model="formData.scanName" placeholder="请填写扫码名称"></el-input>
</el-form-item>
<el-form-item label="扫码状态:" required>
<el-select v-model="formData.scanStatus" placeholder="请选择扫码状态" clearable>
<el-option v-for="item in trueFalseTagStyleFormatter.canUseTagStyle" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="扫码类型:" required>
<el-select v-model="formData.scanType" placeholder="请选择扫码类型" clearable>
<el-option v-for="item in stockScanTypeFormatter.scanType" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="扫码方法:" required>
<el-select v-if="!scanMethodSwitch" v-model="formData.scanMethod" placeholder="请选择扫码方法" clearable @change="changeScanMethod" allow-create>
<template #header>
<el-button type="primary" @click="queryScanMethod" size="small">重新加载</el-button>
<el-button type="success" @click="scanMethodSwitch = true" size="small">自定义</el-button>
</template>
<el-option v-for="item in scanMethodList" :key="item.methodId" :label="item.methodId" :value="item.methodId">
<span style="float: left">{{ item.methodId }}</span>
<span style=" float: right;color: var(--el-text-color-secondary);font-size: 13px; ">{{ item.methodName }}</span>
</el-option>
</el-select>
<el-input v-if="scanMethodSwitch" v-model="formData.scanMethod" placeholder="请填写扫码方法">
<template #append>
<el-button type="success" @click="scanMethodSwitch = false" size="small">选择预设</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="参数1:">
<el-input v-model="formData.param1" :placeholder="selectScanMethod.param1Desc"></el-input>
</el-form-item>
<el-form-item label="参数2:">
<el-input v-model="formData.param2" :placeholder="selectScanMethod.param2Desc"></el-input>
</el-form-item>
<el-form-item label="参数3:">
<el-input v-model="formData.param3" :placeholder="selectScanMethod.param3Desc"></el-input>
</el-form-item>
<el-form-item label="管辖的PLC:" required>
<el-input-number v-model="formData.plcId" :min="1" :max="99"/>
<el-text type="warning" style="font-size: 12px">该PLCID必须在PLC配置内表示该托盘输送机归属哪个PLC控制</el-text>
</el-form-item>
<el-form-item label="读取状态地址:">
<el-input v-model="formData.readStatusAddress" placeholder="请填写读取状态地址"></el-input>
</el-form-item>
<el-form-item label="写入任务地址:">
<el-input v-model="formData.writeTaskAddress" placeholder="请填写写入任务地址"></el-input>
</el-form-item>
<el-form-item label="LED屏编号:" required>
<el-input-number v-model="formData.ledNo" :min="0" :max="99"/>
</el-form-item>
<el-form-item label="创建时间:" required>
<el-text type="primary">{{FormatterUtils.formatTime(formData.createTime?.toString() ?? '')}}</el-text>
</el-form-item>
<el-form-item label="更新时间:" required>
<el-text type="primary">{{FormatterUtils.formatTime(formData.updateTime?.toString() ?? '')}}</el-text>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="formData.remark" placeholder="请填写备注"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="11" :offset="1">
<el-form :model="selectScanMethod" label-position="right" label-width="100px" require-asterisk-position="right" style="width: calc(100% - 10px)">
<el-form-item label="扫码方法标识:">
<el-input v-model="selectScanMethod.methodId" disabled></el-input>
</el-form-item>
<el-form-item label="扫码方法名称:">
<el-input v-model="selectScanMethod.methodName" disabled></el-input>
</el-form-item>
<el-form-item label="扫码方法信息:">
<el-input v-model="selectScanMethod.methodMsg" type="textarea" :rows="5" disabled></el-input>
</el-form-item>
<el-form-item label="参数1信息:">
<el-input v-model="selectScanMethod.param1Desc" type="textarea" :rows="3" disabled></el-input>
</el-form-item>
<el-form-item label="参数2信息:">
<el-input v-model="selectScanMethod.param2Desc" type="textarea" :rows="3" disabled></el-input>
</el-form-item>
<el-form-item label="参数3信息:">
<el-input v-model="selectScanMethod.param3Desc" type="textarea" :rows="3" disabled></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<el-button-group>
<app-permission permission="stockScanManage:edit"><el-button type="primary" @click="save">保存修改</el-button></app-permission>
<app-permission permission="stockScanManage:delete"><el-button type="warning" @click="deleteData">删除(!</el-button></app-permission>
<el-button type="danger" @click="close">关闭窗口</el-button>
</el-button-group>
</template>
</el-drawer>
</template>
<style scoped>
</style>