vue+element-ui,如何实现当接口返回的数据为1时，映射到页面对应的复选框勾选，返回的数据为0时，映射到对应的复选框不勾选？
问题详情
当getServerId方法接口返回的数据websocket: 1时，映射到页面上websocket复选框勾选上
目前代码展示，该如何修改？
<!-- 配置管理-反向代理 -->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px" class="container-top">
<bread-crumb />
<el-form-item prop="keywords">
<el-input v-model="queryParams.keywords" placeholder="请输入搜索内容" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="button-search" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" class="button-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="container-bottom">
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:post:add']"
>添加参数模板</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:post:remove']"
>批量删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:post:add']"
>添加反向代理</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" :height="tableHeight" style="background-color: transparent;" header-row-class-name="header-row-style">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="转发类型" align="center" prop="proxyType" :formatter="formatter"/>
<el-table-column label="监听ip端口" align="center" prop="listen" />
<el-table-column label="监听域名" align="center" prop="serverName" />
<el-table-column label="ssl选项 " align="center" prop="ssl" :formatter="formatterSsl"/>
<el-table-column label="停用启用" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.enable"
active-value="true"
inactive-value="false"
></el-switch>
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="descr" />
<!-- <el-table-column label="默认配置到" align="center" prop="postName" /> -->
<!-- <el-table-column label="岗位排序" align="center" prop="postSort" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']"
>编辑</el-button>
<el-button
class="del-btn"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.current"
:limit.sync="queryParams.limit"
@pagination="getList"
/>
</div>
<!-- 添加或修改反向代理 -->
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" class="container-bottom">
<el-form-item label="转发类型" prop="proxyType">
<el-select v-model="form.proxyType" placeholder="请选择类别">
<el-option
v-for="dict in proxyTypeOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="监听ip端口" prop="listen">
<el-input v-model="form.listen" placeholder="请输入监听ip端口" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监听域名" prop="serverName">
<el-input v-model="form.serverName" placeholder="例:www.baidu.com" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item prop="def">
<el-checkbox v-model="form.def" true-label="1" false-label="0">default</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="proxyProtocol">
<el-checkbox v-model="form.proxyProtocol" true-label="1" false-label="0">proxy protocol</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="ipv6">
<el-checkbox v-model="form.ipv6" true-label="1" false-label="0">同时监听IPv6</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="选择密码文件" prop="passwordId">
<el-select v-model="form.passwordId" placeholder="请选择密码文件">
<el-option :key="0" label="--不使用密码--" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开启ssl" prop="ssl">
<el-select v-model="form.ssl" placeholder="请选择是否开启ssl">
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="监听域名" prop="tactics">
<el-select v-model="form.tactics" placeholder="请选择负载策略">
<el-option v-for="item in tacticsArry" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item> -->
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="addTableRow"
v-hasPermi="['system:post:add']"
>添加代理目标(Location)</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>IP黑白名单</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
v-hasPermi="['system:post:add']"
>设置额外参数</el-button>
</el-col>
</el-row>
<el-table
:data="formChildTable"
style="background-color: transparent;" header-row-class-name="header-row-style"
size="small"
ref="table"
>
<el-table-column label="监控路径" align="center" width="150">
<template slot-scope="scope">
<el-input
v-model="formChildTable[scope.$index].path"
/>
</template>
</el-table-column>
<el-table-column label="代理类型" align="center" width="150">
<template slot-scope="scope">
<el-select v-model="formChildTable[scope.$index].type">
<el-option key="0" label="动态代理" value="动态代理"></el-option>
<el-option key="1" label="静态代理" value="静态代理"></el-option>
<el-option key="2" label="负载均衡" value="负载均衡"></el-option>
<el-option key="3" label="空白代理" value="空白代理"></el-option>
<el-option key="4" label="重定向" value="重定向"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="代理目标" width="740">
<template slot-scope="scope" >
<el-input
style="width:200px;margin-right:10px"
v-model="formChildTable[scope.$index].value"
/>
<el-checkbox v-model="formChildTable[scope.$index].websocket" true-label="1" false-label="0">websocket</el-checkbox>
<el-checkbox v-model="formChildTable[scope.$index].cros" true-label="1" false-label="0">跨域</el-checkbox>
<el-checkbox v-model="formChildTable[scope.$index].header" true-label="1" false-label="0">Host参数：</el-checkbox>
<el-select v-model="formChildTable[scope.$index].headerHost" style="width:180px">
<el-option key="0" label="$host" value="0"></el-option>
<el-option key="1" label="$http_host" value="1"></el-option>
<el-option key="2" label="$host:$proxy_port" value="2"></el-option>
<el-option key="3" label="$host:$server_port" value="3"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="80px">
<template slot-scope="scope">
<el-button
@click="deleteformTable(scope.$index)"
size="small"
type="text"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancel">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getServerList,delServer,insertOrUpdateServer,getServerId,insertOrUpdateLocation,delLocation} from "@/api/confManager/reverseProxy";
import breadCrumb from "@/components/Breadcrumb/index.vue"
import autoComputedH from '@/utils/mixins/autoComputedH'
export default {
name: "Post",
mixins: [autoComputedH],
dicts: ['sys_normal_disable'],
components: {
breadCrumb,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 岗位表格数据
postList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
current: 1,
limit: 10,
keywords: undefined,
},
// 表单参数
form: {},
formChildTable: [],
//开启ssl下拉框数据
options: [
{
value: 0,
label: "否",
},
{
value: 1,
label: "是",
},
],
//转发类型下拉框数据
proxyTypeOptions:[
{
value: 0,
label: "http",
},
{
value: 1,
label: "tcp",
},
{
value: 2,
label: "udp",
}
],
// 表单校验
rules: {
listen: [
{ required: true, message: "ip端口不能为空", trigger: "change" }
],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询岗位列表 */
getList() {
this.loading = true;
getServerList(this.queryParams).then(response => {
console.log(response,'00000')
const records = response.obj.records;
this.postList = records;
this.postList.forEach(item => {
if (item.enable === true) {
item.enable = 'true';
} else {
item.enable = 'false';
}
});
this.total = response.obj.count;
this.loading = false;
});
},
formatterSsl(row, column) {
const SslStatus = row.ssl;
return SslStatus === 1 ? "是" : "否"
},
formatter(row, column) {
if(row.proxyType == 0){
return "http"
}else if(row.proxyType == 1){
return "tcp"
}else if(row.proxyType == 2) {
return "udp"
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
proxyType: 0,
listen: "",
serverName: "",
passwordId: "",
ssl: 0,
def:"",
proxyProtocol:"",
ipv6:""
};
this.formChildTable = []
this.resetForm("form");
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.postId)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加反向代理";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const serverId = row.id || this.ids;
getServerId({serverId}).then(response => {
console.log(response,'handleUpadate')
this.formChildTable = response.obj.map(item => {
return {
...item,
type:this.getTypeLabel(item.type), // 转换 type 字段的值
};
});
this.open = true;
this.title = "修改反向代理";
});
},
// 添加 getTypeLabel 方法
getTypeLabel(type) {
const typeMap = {
0: '动态代理',
1: '静态代理',
2: '负载均衡',
3: '空白代理',
4: '重定向'
};
return typeMap[type] || type;
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(async valid => {
if (valid) {
if (this.form.id) {
await insertOrUpdateLocation(this.formChildTable).then(response => {
})
insertOrUpdateServer(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
await insertOrUpdateLocation(this.formChildTable).then(response => {
})
insertOrUpdateServer(this.form).then(response => {
console.log(this.form,'111')
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const proxyId = row.id || this.ids;
this.$modal.confirm('是否确认该数据项？').then(function() {
return delServer({id: proxyId});
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
deleteformTable(index) {
this.$modal.confirm('是否确认删除该信息?').then(function() {
}).then(() => {
this.formChildTable.splice(index, 1);
}).catch(() => {});
},
// 添加行
addTableRow() {
let row = {
path: "/",
type: "动态代理",
value: undefined,
websocket: undefined,
cros: undefined,
header: "1",
headerHost: "0",
}
this.formChildTable.push(row);
},
}
};
</script>
