|
<template >
|
<div ref="container" class="page-list-container">
|
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes" @on-load-data-after="onLoadDataAfter">
|
<template slot="common-column-slot" slot-scope="{row, col}">
|
<template v-if="col.prop==dataOptions.linkColumn">
|
<el-link type="primary" @click.native="()=>{linkEditor(row[dataOptions.idField], row);}">
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</el-link>
|
</template>
|
<template v-else-if="['photo'].indexOf(col.prop)>=0">
|
<img :src="common.showFirstImage(row.photo)" style="height: 40px; width: 50px;" @click="showBigPic(row)">
|
</template>
|
<template v-else-if="col.dropdown_Id>0">
|
{{ dataList.translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</template>
|
</template>
|
</template>
|
</yrt-data-list>
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :visible.sync="editorOptions.config.visible" :detail-button-click="detailButtonClick" :auth-nodes="authNodes" @on-item-click="(ref, val, itemData, field, formData)=>{onChange(ref, val, field, formData, itemData)}" @on-change="onChange">
|
</yrt-editor>
|
<!-- 图片发放大 -->
|
<el-dialog :visible.sync="dialogPicVisible" :append-to-body="true">
|
<div style="width:100%; text-align:center">
|
<img :src="dialogImageUrl" style="max-width:100%;">
|
<div>
|
</div>
|
</div>
|
</el-dialog>
|
<!--更改容器号-->
|
<el-dialog v-dialogDrag :visible.sync="isDialogVisible" title="生成容器号" width="500px">
|
<el-form :label-width="formLabelWidth" :model="from">
|
<el-form-item label="仓库名称">
|
<el-select v-model="from.storageName" filterable clearable placeholder="请选择仓库名称" @change="getStorageId">
|
<el-option v-for="(item, index) in dropDownStorage" :key="index" :label="item.storageName" :value="item.storage_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="容器类型">
|
<el-select v-model="from.plateType" filterable clearable placeholder="请选择容器类型">
|
<el-option v-for="(item, index) in dropDownplateType" :key="index" :label="item.value" :value="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="编号前缀">
|
<el-select v-model="from.codePrefix" filterable clearable placeholder="请选择编号前缀">
|
<el-option v-for="(item, index) in dropDowncodePrefix" :key="index" :label="item.value" :value="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="流水号位数">
|
<el-select v-model="from.serialDigit" filterable clearable placeholder="请选择流水号位数">
|
<el-option v-for="(item, index) in dropDownserialDigit" :key="index" :label="item.value" :value="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="生成数量" style="width:320px;">
|
<el-input v-model="from.generate" placeholder="请输入内容"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="isDialogVisible=false">取 消</el-button>
|
<el-button type="primary" @click="createCode()">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 批量导入 -->
|
<import-dialog :visible.sync="importConfig.isShowDialog" :import-config="importConfig"></import-dialog>
|
</div>
|
</template>
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
import ImportDialog from "@/components/common/components/import-common-dialog";
|
|
export default {
|
name: "storage-setting-plate",
|
components: {
|
ImportDialog
|
},
|
mixins: [baseLayout],
|
data() {
|
return {
|
dialogPicVisible: false,
|
dialogImageUrl: null,
|
from: {
|
storage_Id: 0,
|
storageName: null, // 仓库名称
|
plateType: null, // 容器类型
|
codePrefix: null, // 编号前缀
|
// serialDigit: null, // 流水号位数
|
generate: 1
|
},
|
formLabelWidth: "120px",
|
isDialogVisible: false,
|
// 容器下拉值
|
dropDownplateType: [],
|
// 仓库
|
dropDownStorage: [],
|
// 前缀
|
dropDowncodePrefix: [
|
{
|
value: "ZZ",
|
label: "ZZ"
|
},
|
{
|
value: "TP",
|
label: "TP"
|
},
|
{
|
value: "PH",
|
label: "PH"
|
},
|
{
|
value: "ZC",
|
label: "ZC"
|
}
|
],
|
// 导入对话框参数
|
importConfig: {
|
// 显示导入对话框
|
isShowDialog: false,
|
title: "母托盘批量导入",
|
// 导入地址
|
url: "/api/basicInfo/base/plate/importExcel",
|
// 模板地址
|
templateUrl: "/upload/template/母托盘导入模板.xlsx"
|
}
|
// 流水号位数
|
// dropDownserialDigit: [
|
// {
|
// value: "3",
|
// label: "3"
|
// },
|
// {
|
// value: "4",
|
// label: "4"
|
// },
|
// {
|
// value: "5",
|
// label: "5"
|
// },
|
// {
|
// value: "6",
|
// label: "6"
|
// }
|
// ]
|
};
|
},
|
methods: {
|
// 图片放大
|
showBigPic(row) {
|
this.dialogPicVisible = true;
|
this.dialogImageUrl = this.common.showFirstImage(row.photo);
|
this.dataList.reload();
|
},
|
onChange(ref, val, field, formData) {
|
if (field.options.prop === "plateType") {
|
const plateType = this.editor.formData["plateType"];
|
// const plateType_Id = this.editor.formData["plateType_Id"];
|
// try {
|
// const s = plateType.split("：");
|
// const t = s[1].split("x");
|
// this.masterData["length"] = t[0];
|
// if (t[1].indexOf("-")) {
|
// const p = t[1].split("-");
|
// this.masterData["width"] = p[1].replace(")");
|
// } else {
|
// this.masterData["width"] = t[1];
|
// }
|
// this.masterData["height"] = t[2];
|
// } catch (error) {
|
// console.log(error.message);
|
// }
|
|
const url = "/api/basicInfo/base/plate/getListType";
|
const params = {
|
name: plateType
|
// id: plateType_Id
|
};
|
const _ref = this.dataList;
|
const callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
debugger;
|
this.editor.changeValue("areaCode", res.data[0].areaCode);
|
this.editor.changeValue("length", res.data[0].length);
|
this.editor.changeValue("width", res.data[0].width);
|
this.editor.changeValue("height", res.data[0].height);
|
this.editor.changeValue("storage_Id", res.data[0].storage_Id);
|
this.editor.changeValue("storageCode", res.data[0].storageCode);
|
this.editor.changeValue("storageName", res.data[0].storageName);
|
}
|
};
|
this.common.ajax(url, params, callback, _ref);
|
} else if (field.options.prop === "storageName") {
|
this.getAreaCode();
|
} else if (field.options.prop === "plateCode") {
|
this.masterData.plateTypeCode = this.masterData.plateCode.substr(0, 8);
|
}
|
},
|
getAreaCode() {
|
// this.editor.changeValue("plateType", val);
|
// const storageName = this.editor.formData["storageName"];
|
const formData = this.editor.formData;
|
const url = "/api/basicInfo/base/plate/getListStorage";
|
const params = {
|
name: formData.storageName
|
};
|
// const _ref = this.dataList;
|
// const callback = res => {
|
// this.common.showMsg(res);
|
// if (res.result) {
|
// this.editor.changeValue("areaCode", res.data[0].areaCode);
|
// }
|
// };
|
// this.common.ajax(url, params, callback, _ref);
|
var callback = res => {
|
if (res.result) {
|
var data = [];
|
if (res.result) {
|
res.data.forEach(item => {
|
const newItem = {
|
value: item.areaCode,
|
label: item.areaCode,
|
areaCode: item.areaCode
|
};
|
data.push(newItem);
|
});
|
this.editor.setDropdownData(1033, data);
|
}
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
|
// 列表页面按钮点击事件
|
buttonClick(authNode) {
|
switch (authNode) {
|
case "plateOpen":
|
// 启用
|
this.plateOpen(this.dataListSelections);
|
return true;
|
case "plateStop":
|
// 停止
|
this.plateStop(this.dataListSelections);
|
return true;
|
case "createPlateCode":
|
// 生成容器号
|
this.createPlateCode();
|
return true;
|
case "import":
|
// 导入
|
this.importConfig.isShowDialog = true;
|
return true;
|
}
|
},
|
// 启用
|
plateOpen(rows) {
|
if (!rows.length) {
|
this.$message.error("至少选择一项！");
|
return;
|
}
|
for (const row of rows) {
|
if (row.enable === 1) {
|
this.$message.error("只有容器号【" + row.plateCode + "】的状态为不可用，才允许操作");
|
return;
|
}
|
}
|
const doAction = () => {
|
const ids = rows.map(item => item.plate_Id);
|
const url = "/api/basicInfo/base/plate/plateOpen";
|
const params = {
|
ids: ids
|
};
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dataList.reload();
|
}
|
});
|
};
|
this.$confirm("确定要进行启用操作吗?", "是否启用", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
doAction();
|
})
|
.catch(() => {
|
this.$message.info("已取消");
|
});
|
},
|
// 停止
|
plateStop(rows) {
|
if (!rows.length) {
|
this.$message.error("至少选择一项！");
|
return;
|
}
|
for (const row of rows) {
|
if (row.enable !== 1) {
|
this.$message.error("只有容器号【" + row.plateCode + "】的状态为可用，才允许操作");
|
return;
|
}
|
}
|
const doAction = () => {
|
const ids = rows.map(item => item.plate_Id);
|
const url = "/api/basicInfo/base/plate/plateStop";
|
const params = {
|
ids: ids
|
};
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dataList.reload();
|
}
|
});
|
};
|
|
this.$confirm("确定要进行停止操作吗?", "执行停止", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
doAction();
|
})
|
.catch(() => {
|
this.$message.info("已取消");
|
});
|
},
|
// 生成容器显示
|
createPlateCode() {
|
this.getStorage();
|
this.getPlateType();
|
this.isDialogVisible = true;
|
},
|
// 获取仓库数据
|
getStorage() {
|
var url = "/api/common/loadDropDown";
|
var params = {
|
where: "31"
|
};
|
var callBack = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
if (res.data && res.data["dropdown" + params.where] && res.data["dropdown" + params.where].length > 0) {
|
this.dropDownStorage = res.data["dropdown" + params.where];
|
}
|
}
|
};
|
this.common.ajax(url, params, callBack);
|
},
|
// 获取容盘类型
|
getPlateType() {
|
var url = "/api/common/loadDropDown";
|
var params = {
|
openNodeApi: true,
|
where: "723"
|
};
|
var callBack = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
if (res.data && res.data["dropdown" + params.where] && res.data["dropdown" + params.where].length > 0) {
|
this.dropDownplateType = res.data["dropdown" + params.where];
|
}
|
}
|
};
|
this.common.ajax(url, params, callBack);
|
},
|
// 获取仓库ID
|
getStorageId(value) {
|
this.from.storage_Id = value;
|
const storageInfo = this.dropDownStorage.find(item => item.storage_Id === value);
|
this.from.storageName = storageInfo.storageName;
|
},
|
// 生成容器号
|
createCode() {
|
if (this.from.storage_Id === 0) {
|
this.$message.error("请选择仓库名称！");
|
return false;
|
}
|
if (!this.from.plateType) {
|
this.$message.error("请选择容器类型！");
|
return false;
|
}
|
if (!this.from.codePrefix) {
|
this.$message.error("请选择容器前缀！");
|
return false;
|
}
|
if (!this.from.generate || this.from.generate < 1) {
|
this.$message.error("生成数量最少为1！");
|
return false;
|
}
|
const url = "/api/basicInfo/base/plate/createPlantCode";
|
const ref = this.dataList;
|
const params = {
|
data: this.from
|
};
|
var callback = res => {
|
if (res.result) {
|
this.isDialogVisible = true;
|
ref.loadData();
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 重置
|
onReset() {
|
this.from = {
|
storage_Id: 0,
|
storageName: null, // 仓库名称
|
plateType: null, // 容器类型
|
codePrefix: null, // 编号前缀
|
// serialDigit: null, // 流水号位数
|
generate: 1
|
};
|
// 容器下拉值
|
this.dropDownplateType = [];
|
// 仓库
|
this.dropDownStorage = [];
|
},
|
// 数据加载后
|
onLoadDataAfter(dataList) {
|
this.loadImage(dataList);
|
},
|
// 加载图片
|
loadImage(dataList) {
|
if (!dataList.length) return;
|
|
const url = "api/basicInfo/base/plate/getList";
|
const params = {};
|
params.ids = dataList.map(m => m.plate_Id);
|
var callback = res => {
|
if (res.result) {
|
res.data.forEach(item => {
|
const detailInfo = dataList.find(f => Number(f.plate_Id) === Number(item.plate_Id));
|
if (!detailInfo) return;
|
// 初始图片
|
if (item.photo) {
|
try {
|
this.$set(detailInfo, "photo", JSON.parse(item.photo));
|
} catch (error) {
|
this.$set(detailInfo, "photo", []);
|
}
|
} else {
|
this.$set(detailInfo, "photo", []);
|
}
|
});
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../styles/scan.scss";
|
.box-card {
|
.upload-bill {
|
width: 480px;
|
.el-upload__tip {
|
margin-top: 20px;
|
}
|
}
|
.scrollbar-wrap {
|
max-height: 600px !important;
|
}
|
}
|
.page-list-container {
|
min-height: calc(100vh - 110px);
|
overflow: hidden;
|
position: relative;
|
}
|
@media screen and (max-height: 900px) {
|
.page-list-container {
|
min-height: 600px;
|
}
|
}
|
</style>
|
