<template>
|
<div>
|
<el-dialog top="94px" :title="!dataForm.id ? '新建' : '编辑'" :close-on-click-modal="false" width="100%" :visible.sync="addVisible"
|
@close="cancel">
|
<!-- 添加内容-->
|
<el-form :model="dataForm" :rules="rules" label-width="100px" ref="dataForm">
|
<el-row :gutter="20">
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="dnc名称" prop="dncName">
|
<el-input v-model="dataForm.dncName" placeholder="DNC名称" maxlength="100" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="ip" prop="ip">
|
<el-input v-model="dataForm.ip" placeholder="IP地址" maxlength="15" clearable></el-input>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="端口" prop="port">
|
<el-input v-model.number="dataForm.port" placeholder="端口" maxlength="6" clearable></el-input>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="程序传输模式" prop="transMode">
|
<el-select class="value" v-model="dataForm.transMode" placeholder="请选择" clearable>
|
<el-option v-for="item in transModeList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="车间" prop="workshopId">
|
<el-select class="value" v-model="dataForm.workshopId" @change="changewsl" placeholder="请选择"
|
clearable>
|
<el-option v-for="item in workshopList" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="工段" prop="sectionId">
|
<el-select class="value" v-model="dataForm.sectionId" placeholder="请选择" clearable>
|
<el-option v-for="item in sectionIds" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="协议" prop="protocolId">
|
<el-select class="value" v-model="dataForm.protocolId" placeholder="请选择" clearable>
|
<el-option v-for="item in protocolList" :key="item.id" :label="item.name + item.version"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="是否采集" prop="isCollect">
|
<el-radio-group class="value" v-model="dataForm.isCollect" clearable>
|
<el-radio :label="0">否</el-radio>
|
<el-radio :label="1">是</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
<el-form-item label="班制" prop="shiftType">
|
<el-select class="value" v-model="dataForm.shiftType" placeholder="请选择" clearable>
|
<el-option v-for="item in shiftTypes" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
</el-col>
|
<!-- <el-form-item label="机床名称" prop="machineName">
|
<el-input v-model="dataForm.machineName" placeholder="机床名称" clearable></el-input>
|
</el-form-item> -->
|
<!-- <el-form-item label="机床" prop="id">
|
<el-select class="value" v-model="dataForm.id" placeholder="请选择">
|
<el-option v-for="item in accountList" :key="item.machineId" :label="item.uuid"
|
:value="item.machineId">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
</el-row>
|
|
</el-form>
|
<!-- 按钮 -->
|
<span slot="footer" class="dialog-footer">
|
<!-- <el-button size="mini" @click="cancel">取消</el-button> -->
|
<el-button size="mini" class="active" type="primary" @click="dataFormSubmit()">保存</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getWsl, getPcl, getRequest } from '@/api/Api'
|
export default {
|
props: ['addVisible', 'row', 'workshopList', 'protocolList'],
|
data() {
|
var validatePass = (rule, value, callback) => {
|
let reg = /((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))/g
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的ip地址'));
|
} else {
|
if (reg.test(value)) {
|
this.$refs.dataForm.validateField('ip');
|
}
|
callback();
|
}
|
};
|
return {
|
rules: {
|
ip: [
|
{ validator: validatePass, trigger: 'blur' }
|
],
|
},
|
shiftTypes: [
|
{
|
label: '1班',
|
value: 1
|
},
|
{
|
label: '2班',
|
value: 2
|
},
|
{
|
label: '3班',
|
value: 3
|
},
|
],
|
sectionIds: [],
|
accountList: [],
|
dataForm: {
|
id: '',
|
ip: '',
|
port: '',
|
workshopId: '',
|
sectionId: '',
|
protocolId: '',
|
isCollect: '',
|
shiftType: '',
|
dncName: '',
|
transMode: ''
|
},
|
transModeList: [
|
{
|
label: 'com口',
|
value: 0
|
},
|
{
|
label: '共享文件夹',
|
value: 1
|
},
|
{
|
label: '网口',
|
value: 2
|
},
|
]
|
}
|
},
|
watch: {
|
row: {
|
handler(val) {
|
this.changewsl(val.workshopId, () => {
|
this.$nextTick(() => {
|
Object.keys(this.dataForm).forEach(item => {
|
this.dataForm[item] = val[item]
|
})
|
})
|
|
})
|
},
|
immediate: true,
|
deep: true,
|
}
|
},
|
methods: {
|
changewsl(val, cb) {
|
console.log(val, 'changewsl')
|
try {
|
this.sectionIds = this.workshopList.find(item => item.id === val).sections
|
} catch (error) {
|
this.sectionIds = []
|
}
|
cb && cb()
|
},
|
/* 查询使用部门*/
|
cancel() {
|
this.$emit('close')
|
},
|
/* 提交*/
|
dataFormSubmit() {
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
getRequest('machineUpdate', this.dataForm).then(res => {
|
this.$message({
|
message: '修改成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.$emit('confirm')
|
this.visible = false
|
}
|
})
|
})
|
} else {
|
return false;
|
}
|
});
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-form-item__content {
|
|
.el-select,
|
.el-input {
|
width: 100%;
|
}
|
}
|
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
</style>
|
