133 lines
4.6 KiB
Vue
133 lines
4.6 KiB
Vue
|
<template>
|
||
|
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" center :close-on-click-modal="false">
|
||
|
<el-form ref="form" :model="formData" label-width="100px" :rules="rules">
|
||
|
<el-form-item label="教员机:" prop="deviceCode">
|
||
|
<el-select v-model="formData.deviceCode" placeholder="请选择" size="small">
|
||
|
<el-option
|
||
|
v-for="item in deviceList"
|
||
|
:key="item.code"
|
||
|
:label="item.code"
|
||
|
:value="item.code"
|
||
|
/>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item v-show="data.type === 'LSW'" label="屏目配置:" prop="quadrant" size="small">
|
||
|
<el-select v-model="formData.quadrant" placeholder="请选择" size="small">
|
||
|
<el-option
|
||
|
v-for="item in screenList"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
/>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
</el-form>
|
||
|
|
||
|
<span slot="footer" class="dialog-footer">
|
||
|
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
||
|
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
||
|
</span>
|
||
|
</el-dialog>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { getDevicesByType, getDeviceDetail, setLswConfig, setCctvConfig } from '@/api/project';
|
||
|
|
||
|
export default {
|
||
|
name: 'EditConfig',
|
||
|
props: {
|
||
|
// type: {
|
||
|
// type: String,
|
||
|
// required: true
|
||
|
// }
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
dialogVisible: false,
|
||
|
data: {},
|
||
|
screenList: [
|
||
|
{ label: '第一屏', value: 1 },
|
||
|
{ label: '第二屏', value: 2 },
|
||
|
{ label: '第三屏', value: 3 },
|
||
|
{ label: '第四屏', value: 4 }
|
||
|
],
|
||
|
deviceList: [],
|
||
|
formData: {
|
||
|
quadrant: '',
|
||
|
deviceCode: ''
|
||
|
},
|
||
|
rules: {
|
||
|
quadrant: [
|
||
|
{ required: true, message: '请选择显示屏幕', trigger: 'change' }
|
||
|
],
|
||
|
deviceCode: [
|
||
|
{ required: true, message: '请选择教员机', trigger: 'change'}
|
||
|
]
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
title() {
|
||
|
return '编辑设备配置';
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
initData(row) {
|
||
|
getDevicesByType('IM').then(resp => {
|
||
|
this.deviceList = resp.data;
|
||
|
}).catch(()=> {
|
||
|
this.$message.error('获取项目设备详情失败!');
|
||
|
});
|
||
|
},
|
||
|
doShow(row) {
|
||
|
this.initData(row);
|
||
|
this.dialogVisible = true;
|
||
|
this.data = row;
|
||
|
getDeviceDetail(this.data.id).then(res => {
|
||
|
const data = res.data.config ? JSON.parse(res.data.config) : {};
|
||
|
this.formData = {
|
||
|
quadrant: data.quadrant,
|
||
|
deviceCode: data.deviceCode
|
||
|
};
|
||
|
});
|
||
|
},
|
||
|
doSave() {
|
||
|
const self = this;
|
||
|
if (this.data.type == 'LSW') {
|
||
|
this.$refs.form.validate(() => {
|
||
|
const param = {
|
||
|
deviceCode: this.formData.deviceCode,
|
||
|
quadrant: this.formData.quadrant
|
||
|
};
|
||
|
setLswConfig(this.data.id, param).then(response => {
|
||
|
self.$message.success('设置大屏工作站配置成功');
|
||
|
self.handleClose();
|
||
|
self.$emit('reloadTable');
|
||
|
}).catch(error => {
|
||
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||
|
});
|
||
|
});
|
||
|
} else if (this.data.type == 'CCTV') {
|
||
|
this.$refs.form.validate(() => {
|
||
|
const param = {
|
||
|
deviceCode: this.formData.deviceCode
|
||
|
};
|
||
|
setCctvConfig(this.data.id, param).then(response => {
|
||
|
self.$message.success('设置CCTV工作站配置成功');
|
||
|
self.handleClose();
|
||
|
self.$emit('reloadTable');
|
||
|
}).catch(error => {
|
||
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
handleClose() {
|
||
|
this.dialogVisible = false;
|
||
|
this.data = {};
|
||
|
this.$refs.form.resetFields();
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|