<template>
|
<el-dialog append-to-body
|
:visible.sync="open"
|
class="equ-add-form-dialog"
|
:close-on-click-modal="true"
|
>
|
<div class="equ-form equ-form-add">
|
<div class="equ-form-container">
|
|
<div class="flex m-t-2rem">
|
<div class="label require">区域编号:</div>
|
<el-select v-model="areacode" placeholder="请选择区域编号" width="28rem" @change="handleAreaCodeChange">
|
<el-option
|
v-for="item in areaCodes"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">产线名称:</div>
|
<el-input v-model="areaName"></el-input>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">布局数量:</div>
|
<el-input-number size="medium" v-model="areaConfigNum" :min="500" label="最小是500"></el-input-number>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">产线背景:</div>
|
<el-upload v-if="open"
|
class="upload-demo"
|
:action="getUploadAction()"
|
:before-upload="beforeUpload"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-remove="beforeRemove"
|
:on-success="handleSuccess"
|
:on-error="handleError"
|
multiple
|
:limit="1"
|
:on-exceed="handleExceed"
|
:file-list="fileList">
|
<el-button size="small" type="primary" class="button-container">点击上传</el-button>
|
</el-upload>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">区域背景:</div>
|
<el-upload v-if="open"
|
class="upload-demo"
|
:action="getUploadAction()"
|
:before-upload="beforeUpload"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-remove="beforeRemove"
|
:on-success="handleSuccess2"
|
:on-error="handleError"
|
multiple
|
:limit="1"
|
:on-exceed="handleExceed"
|
:file-list="fileList2">
|
<el-button size="small" type="primary" class="button-container">点击上传</el-button>
|
</el-upload>
|
</div>
|
<div class="m-t-2rem flex">
|
<div style="text-align: center;" class="flex">
|
<div class="equ-form-add-button-confirm" @click="submit">确认</div>
|
<div class="equ-form-add-button-cancel" @click="cancel">取消</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {addAreaItemInfo, updateAreaModuleItem} from "@/api/addareaitem";
|
import {getAreaCode} from "@/api/area";
|
import service from '@/utils/request-api'
|
|
export default {
|
props: {
|
menuPositionx:'',
|
menuPositiony:'',
|
},
|
data() {
|
return {
|
open: false,
|
fileList: [],
|
fileList2: [],
|
uploadUrl: '',
|
areaBackGroudURL: '',
|
areacode: '',
|
areaConfigNum: '',
|
areaName: '',
|
num: 1,
|
editItemId: '',
|
filename1: '',
|
filename2: '',
|
areaCodes:[],
|
};
|
},
|
mounted() {
|
this.getAreaCode();
|
},
|
methods: {
|
async submit() {
|
if (!this.uploadUrl || !this.areaBackGroudURL || !this.areacode || !this.areaConfigNum || !this.areacode) {
|
this.$message.warning("数据未填写完整");
|
return;
|
}
|
if (this.editItemId != null && this.editItemId != '') {
|
await this.$modal.confirm("确定要编辑区域吗?");
|
var dto = {
|
id: this.editItemId,
|
uRL: this.uploadUrl,
|
areaBackGroudURL: this.areaBackGroudURL,
|
areaConfigNum: this.areaConfigNum,
|
areacode: this.areacode,
|
tVal: this.areaName,
|
moduleName: this.filename1,
|
areaBackGroudName: this.filename2,
|
};
|
const re = await updateAreaModuleItem(dto);
|
if (re.isSuccess) {
|
this.$emit('update-area-list'); // 触发自定义事件
|
this.editItemId = '';
|
this.$message.success("编辑成功");
|
//this.open = false;
|
this.cancel();
|
}
|
} else {
|
await this.$modal.confirm("确定新增区域吗?");
|
var dto = {
|
xVal: this.menuPositionx,
|
yVal: this.menuPositiony,
|
uRL: this.uploadUrl,
|
areaBackGroudURL: this.areaBackGroudURL,
|
areaConfigNum: this.areaConfigNum,
|
areacode: this.areacode,
|
tVal: this.areaName,
|
moduleName: this.filename1,
|
areaBackGroudName: this.filename2,
|
};
|
const re = await addAreaItemInfo(dto);
|
if (re.isSuccess) {
|
this.$emit('update-area-list'); // 触发自定义事件
|
this.$message.success("创建成功");
|
//this.open = false;
|
this.cancel();
|
}
|
}
|
},
|
async cancel() {
|
this.editItemId = '';
|
this.areacode = '';
|
this.areaName = '';
|
this.areaConfigNum = '';
|
this.fileList = [];
|
this.fileList2 = [];
|
this.uploadUrl = '';
|
this.areaBackGroudURL = '';
|
this.open = false;
|
},
|
openConfig() {
|
this.cancel();
|
this.open = !this.open;
|
},
|
editConfig(editItem) {
|
this.open = !this.open;
|
console.log("editItem",editItem)
|
this.editItemId = editItem.id;
|
this.areacode = editItem.areacode;
|
this.areaName = editItem.t;
|
this.areaConfigNum = editItem.areaConfigNum;
|
var fileInfo1 = {
|
name : editItem.moduleName,
|
}
|
var fileInfo2 = {
|
name : editItem.areaBackGroudName,
|
}
|
this.fileList[0] = fileInfo1;
|
this.fileList2[0] = fileInfo2;
|
console.log("this.fileList[0]",this.fileList[0])
|
console.log("this.fileList2[0]",this.fileList2[0])
|
this.uploadUrl = editItem.imgSrc;
|
this.areaBackGroudURL = editItem.areaBackGroudURL;
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
//删除文件
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
handleExceed(files, fileList) {
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
},
|
beforeRemove(file, fileList) {
|
return this.$confirm(`确定移除 ${file.name}？`);
|
},
|
handleChange(value) {
|
console.log(value);
|
},
|
async beforeUpload(file) {
|
return true;
|
},
|
getUploadAction(){
|
this.baseURL = service.defaults.baseURL;
|
console.log("this.baseURL", this.baseURL)
|
return this.baseURL+"/home/UploadFile";
|
},
|
handleSuccess(response, file, fileList) {
|
// 在这里处理文件上传成功的逻辑，例如保存响应数据到组件的状态中。
|
this.$message.success('文件上传成功');
|
console.log('文件上传成功', response);
|
this.uploadUrl = response.result;
|
this.filename1 = file.name;
|
console.log('文件上传成功地址', this.uploadUrl);
|
console.log('file.name', this.filename1);
|
},
|
handleError(err, file, fileList) {
|
// 在这里处理文件上传失败的逻辑，例如显示错误消息。
|
this.$message.error('文件上传失败');
|
console.error('文件上传失败', err);
|
},
|
handleSuccess2(response, file, fileList) {
|
// 在这里处理文件上传成功的逻辑，例如保存响应数据到组件的状态中。
|
this.$message.success('文件上传成功');
|
console.log('文件上传成功', response);
|
this.areaBackGroudURL = response.result;
|
this.filename2 = file.name;
|
console.log('文件上传成功地址', this.uploadUrl);
|
},
|
getAreaCode(){
|
getAreaCode().then((res) => {
|
this.areaCodes = res.cabinetList || [];
|
});
|
},
|
handleAreaCodeChange(selectedAreaCode) {
|
const selectedArea = this.areaCodes.find(area => area.id === selectedAreaCode);
|
if (selectedArea && selectedArea.areaConfigNum !== undefined) {
|
this.areaConfigNum = selectedArea.areaConfigNum;
|
} else {
|
this.areaConfigNum = 500; // 使用默认值
|
}
|
if (selectedArea && selectedArea.areaBackGroudName !== undefined && selectedArea.areaBackGroudURL !== undefined) {
|
// 检查返回的数据是否为空
|
if (selectedArea.areaBackGroudName && selectedArea.areaBackGroudURL) {
|
var fileInfo2 = {
|
name: selectedArea.areaBackGroudName,
|
};
|
// 创建一个新的数组并替换旧的数组
|
this.fileList2 = [fileInfo2];
|
console.log("this.fileList2[0]", this.fileList2[0]);
|
this.areaBackGroudURL = selectedArea.areaBackGroudURL;
|
} else {
|
// 如果返回的数据为空，清空 fileList2
|
this.fileList2 = [];
|
console.log("No background info available");
|
}
|
} else {
|
// 如果 selectedArea 不存在或没有背景信息，清空 fileList2
|
this.fileList2 = [];
|
console.log("No background info available");
|
}
|
},
|
|
},
|
watch: {},
|
};
|
</script>
|
<style lang="scss">
|
.equ-add-form-dialog .el-dialog {
|
background: none !important;
|
box-shadow: none !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.equ-form-add-button {
|
width: 4.1rem;
|
height: 4.1rem;
|
background-size: 100% 100%;
|
background-image: url("../assets/area/equ-form-add-button.svg");
|
cursor: pointer;
|
}
|
|
.equ-form-add {
|
display: flex;
|
margin: 0 auto;
|
width: fit-content;
|
margin-bottom: 80px;
|
margin-top: 60px;
|
}
|
|
.equ-form-container {
|
//靠右
|
margin-left: 1rem;
|
width: 37.6rem;
|
background: #ffffff;
|
box-shadow: 0rem 0.2rem 3.4rem 0rem #bccbdd;
|
border-radius: 1rem;
|
padding: 2.2rem;
|
padding-bottom: 1.5rem;
|
|
.label {
|
width: 12rem;
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
font-weight: bold;
|
color: #333333;
|
line-height: 2em;
|
margin-right: 1rem;
|
text-align: left;
|
}
|
|
.require::before {
|
content: "*";
|
color: red;
|
}
|
|
.value.input {
|
width: 25rem;
|
max-width: 25rem;
|
height: 3.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid #6c99be !important;
|
padding-left: 0.8rem;
|
}
|
|
.value.input::placeholder,
|
.value.select::placeholder {
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #6c99be;
|
}
|
|
.value.select {
|
width: 26.1rem;
|
|
height: 3.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid #6c99be;
|
padding-left: 0.5rem;
|
color: #6c99be;
|
}
|
|
.equ-form-add-button-confirm {
|
width: 10.5rem;
|
height: 3.6rem;
|
background: #278afa;
|
border-radius: 0.4rem;
|
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 3.2rem;
|
margin-left: auto;
|
margin-right: 0;
|
cursor: pointer;
|
}
|
|
.equ-form-add-button-cancel {
|
width: 10.5rem;
|
height: 3.6rem;
|
border: 1px solid #278afa;
|
border-radius: 0.4rem;
|
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #333;
|
line-height: 3.2rem;
|
margin-left: 16.7rem;
|
margin-right: 0;
|
cursor: pointer;
|
}
|
|
.button-container {
|
width: 18rem;
|
height: 40px;
|
}
|
}
|
</style>
|
