327 lines
16 KiB
Vue
327 lines
16 KiB
Vue
|
|
<template>
|
|
<div>
|
|
<div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div>
|
|
<el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
|
|
<div class="form_content">
|
|
<div>
|
|
<p class="netWay">网络方式</p>
|
|
<el-radio v-model="radio" label="1">有线</el-radio>
|
|
<el-radio v-model="radio" label="2">WIFI</el-radio>
|
|
<el-divider></el-divider>
|
|
</div>
|
|
<div v-if="radio==1?true:false">
|
|
<h2>有线</h2>
|
|
<el-form :model="form" :label-position="labelPosition" label-width="80px">
|
|
<div class="wired">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="网口:" :label-width="formLabelWidth">
|
|
<el-select v-model="form.region" placeholder="ETHO" style="width: 200px;height:30px">
|
|
<el-option label="区域一" value="aa"></el-option>
|
|
<el-option label="区域二" value="aa1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="默认网关:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="首选DNS:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="默认网关:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="MAC地址:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="24" class="mac">
|
|
<el-input style="width: 200px;height:30px" /><el-button style="width: 80px; height: 30px;">复制</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div v-if="radio==2?true:false">
|
|
<h2>WIFI</h2>
|
|
<el-form :label-position="labelPosition" label-width="80px">
|
|
<div class="wifi">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="网口:" :label-width="formLabelWidth">
|
|
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="密码:" :label-width="formLabelWidth">
|
|
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="默认网关:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer footer">
|
|
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TestHelloWorld',
|
|
data() {
|
|
return {
|
|
labelPosition: "left",
|
|
input1: 192,
|
|
input2: 168,
|
|
input3: 1,
|
|
input4: 1,
|
|
radio: '2',
|
|
dialogFormVisible: false,
|
|
form: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: ''
|
|
},
|
|
formLabelWidth: '80px'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/deep/ .wired,
|
|
/deep/ .wifi {
|
|
.el-row {
|
|
.el-col-12:last-child {
|
|
padding-right: 134px;
|
|
}
|
|
|
|
.el-col-12:first-child {
|
|
padding-right: 138px;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.el-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.el-col-1 {
|
|
text-align: center;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.mac {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.netWay {
|
|
margin-bottom:20px;
|
|
width: 80px;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 20px;
|
|
text-align: left;
|
|
}
|
|
.footer{
|
|
position:absolute;
|
|
left:360px;
|
|
bottom:20px;
|
|
}
|
|
</style>
|