先上代码
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<!-- <el-form-item label="分类序号" prop="classid">
<el-input
v-model="queryParams.classid"
placeholder="请输入分类序号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品编号" prop="goodsid">
<el-input
v-model="queryParams.goodsid"
placeholder="请输入商品编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="渠道方式,0=唯一,1=价格,2=概率" prop="probtype">
<el-select
v-model="queryParams.probtype"
placeholder="请选择渠道方式,0=唯一,1=价格,2=概率"
clearable
size="small"
>
<el-option label="请选择字典生成" value />
</el-select>
</el-form-item>
<el-form-item label="唯一渠道" prop="apiway">
<el-input
v-model="queryParams.apiway"
placeholder="请输入唯一渠道"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最低价格" prop="apioption">
<el-input
v-model="queryParams.apioption"
placeholder="请输入最低价格"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="概率分布" prop="probability">
<el-input
v-model="queryParams.probability"
placeholder="请输入概率分布"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="轮询列表" prop="pollinglist">
<el-input
v-model="queryParams.pollinglist"
placeholder="请输入轮询列表"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="轮询列表" prop="pollingstart">
<el-date-picker
clearable
size="small"
style="width: 200px"
v-model="queryParams.pollingstart"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择轮询列表"
></el-date-picker>
</el-form-item>
<el-form-item label="轮询列表" prop="pollingend">
<el-date-picker
clearable
size="small"
style="width: 200px"
v-model="queryParams.pollingend"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择轮询列表"
></el-date-picker>
</el-form-item>
<el-form-item label="轮询状态:0=关闭,1=启用" prop="pollingstate">
<el-input
v-model="queryParams.pollingstate"
placeholder="请输入轮询状态:0=关闭,1=启用"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="重新提交渠道" prop="againway">
<el-input
v-model="queryParams.againway"
placeholder="请输入重新提交渠道"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品名称" prop="goodsname">
<el-input
v-model="queryParams.goodsname"
placeholder="请输入商品名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品面值" prop="goodsvalue">
<el-input
v-model="queryParams.goodsvalue"
placeholder="请输入商品面值"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="面值单位" prop="goodsunit">
<el-input
v-model="queryParams.goodsunit"
placeholder="请输入面值单位"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品原价" prop="goodsoriginal">
<el-input
v-model="queryParams.goodsoriginal"
placeholder="请输入商品原价"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="标准售价" prop="goodsprice">
<el-input
v-model="queryParams.goodsprice"
placeholder="请输入标准售价"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="标准进价" prop="goodscost">
<el-input
v-model="queryParams.goodscost"
placeholder="请输入标准进价"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="接口列表" prop="apilist">
<el-input
v-model="queryParams.apilist"
placeholder="请输入接口列表"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>-->
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['api:goods:add']"
>新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['api:goods:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['api:goods:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['api:goods:export']"
>导出</el-button>
</el-col>-->
</el-row>
<el-table v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" prop="id" />
<el-table-column label="分类序号" align="center" prop="classid" />
<el-table-column label="商品编号" align="center" prop="goodsid" />
<el-table-column label="渠道方式" align="center" prop="probtype" />
<!-- ,0=唯一,1=价格,2=概率 -->
<!-- <el-table-column label="唯一渠道" align="center" prop="apiway" /> -->
<!-- <el-table-column label="最低价格" align="center" prop="apioption" /> -->
<!-- <el-table-column label="概率分布" align="center" prop="probability" /> -->
<!-- <el-table-column label="轮询列表" align="center" prop="pollinglist" /> -->
<!-- :0=关闭,1=启用 -->
<el-table-column width="100" align="center" label="轮询状态">
<template scope="scope">
{{ scope.row.pollingstate === 1 ? '开启': '' }}
{{ scope.row.pollingstate === 0 ? '关闭': '' }}
</template>
<!-- <template slot-scope="scope">
<el-switch
v-model="scope.row.pollingstate"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>-->
</el-table-column>
<!-- <el-table-column label="轮询状态" align="center" prop="pollingstate ==1'开启':'关闭'" /> -->
<el-table-column label="轮询时间" align="center" width="180">
<!-- prop="pollingstart" -->
<template slot-scope="scope">
<span v-if="scope.row.pollingstate">{{ scope.row.pollingstart }}</span>
<span>-</span>
<span v-if="scope.row.pollingstate">{{scope.row.pollingend }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="轮询列表" align="center" prop="pollingend" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.pollingend, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>-->
<!-- <el-table-column label="重新提交渠道" align="center" prop="againway" /> -->
<el-table-column label="商品名称" align="center" prop="goodsname" />
<el-table-column label="商品面值" align="center" prop="goodsvalue" />
<!-- <el-table-column label="面值单位" align="center" prop="goodsunit" /> -->
<el-table-column label="商品原价" align="center" prop="goodsoriginal" />
<el-table-column label="标准售价" align="center" prop="goodsprice" />
<!-- <el-table-column label="标准进价" align="center" prop="goodscost" /> -->
<!-- <el-table-column label="接口列表" align="center" prop="apilist" /> -->
<el-table-column label="标准结算" align="center" prop="goodscost" />
<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="['api:goods:edit']"
>修改</el-button>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['api:goods:remove']"
>删除</el-button>-->
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改商品管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="分类序号" prop="classid">
<el-input v-model="form.classid" placeholder="请输入分类序号" />
</el-form-item>
<el-form-item label="商品编号" prop="goodsid">
<el-input v-model="form.goodsid" placeholder="请输入商品编号" />
</el-form-item>
<el-form-item label="商品名称" prop="goodsname">
<el-input v-model="form.goodsname" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品面值" prop="goodsvalue">
<!-- prop="goodsvalue" -->
<el-input v-model="form.goodsvalue" placeholder="请输入商品面值" />
</el-form-item>
<el-form-item label="面值单位" prop="goodsunit">
<el-input v-model="form.goodsunit" placeholder="请输入面值单位" />
</el-form-item>
<el-form-item label="商品原价" prop="goodsoriginal">
<!-- prop="goodsoriginal" -->
<el-input v-model="form.goodsoriginal" placeholder="请输入商品原价" />
</el-form-item>
<el-form-item label="标准售价" prop="goodsprice">
<el-input v-model="form.goodsprice" placeholder="请输入标准售价" />
</el-form-item>
<el-form-item label="标准进价" prop="goodscost">
<el-input v-model="form.goodscost" placeholder="请输入标准进价" />
</el-form-item>
<template v-if="xiugaiflag">
<el-form-item label="渠道方式">
<el-radio-group v-model="form.probtype">
<el-radio
v-for="dict in probtypeOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="采购渠道">
<el-radio-group v-model="form.apiway" v-if="form.probtype ==0">
<el-radio
v-for="dict in probtypequdaoOptions"
:key="dict.apiway"
:label="dict.apiway"
>{{dict.apiname}}</el-radio>
</el-radio-group>
<el-checkbox-group :min="1" v-if="form.probtype ==1" v-model="form.apioption">
<!-- <el-checkbox
v-for="dict in probtypequdaoOptions"
:key="dict.apiway"
:label="dict.apiname"
></el-checkbox>-->
<el-checkbox
v-for="dict in probtypequdaoOptions"
:key="dict.apiway"
:label="dict.apiway"
>{{dict.apiname}}</el-checkbox>
</el-checkbox-group>
<template v-if="form.probtype ==2">
<el-checkbox-group v-model="gailu" style="float:left;">
<el-checkbox
style="display: block;"
v-for="(dict,index) in probtypequdaoOptions"
:label="dict.id"
:key="dict.id"
@change="selecteChange($event,index,dict.id)"
>{{dict.apiname}}</el-checkbox>
</el-checkbox-group>
<div>
<template v-for="(dict,index) in probtypequdaoOptions">
<el-radio-group v-model="gailuvalue[index]" :disabled="gailuvaldisa[index]">
<el-radio
v-for="(item,i) in 9"
:key="(i+1)*10"
:label="(i+1)*10"
:name="dict.id+''"
@change="radiochange($event,dict.id)"
/>
</el-radio-group>
</template>
</div>
</template>
</el-form-item>
<el-form-item label="采购轮询">
<!-- <el-radio-group v-model="form.pollingstate">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>-->
<el-switch
v-model="form.pollingstate"
:active-value="1"
:inactive-value="0"
active-color="green"
inactive-color="red"
></el-switch>
</el-form-item>
<!-- <template slot-scope="scope">
<el-switch
v-model="scope.row.pollingstate"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>-->
<template>
<el-form-item label="轮询时间">
<el-time-select
:disabled="form.pollingstate != 1"
placeholder="起始时间"
v-model="form.pollingstart"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00'
}"
></el-time-select>
<el-time-select
:disabled="form.pollingstate != 1"
placeholder="结束时间"
v-model="form.pollingend"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
minTime: form.pollingstart
}"
>
<!-- minTime: startTime -->
</el-time-select>
</el-form-item>
</template>
<template>
<el-form-item label="轮询渠道 ">
<div style="padding: 24px;border-radius: 3px;border: 1px solid #DCDFE6;">
<el-button
:disabled="form.pollingstate != 1"
v-for="(dict,i) in this.pollingarr"
size="small"
@click="delpollinglist(i)"
>
{{dict.apiname}}
<i class="el-icon-arrow-right el-icon-delete"></i>
</el-button>
</div>
<!-- <el-button
v-for="dict in probtypequdaoOptions"
size="small"
@click="addTab(dict.apiway)"
>{{dict.apiname}}</el-button>
</div>-->
</el-form-item>
</template>
<template>
<el-form-item label="渠道选择 ">
<el-button
:disabled="form.pollingstate != 1"
v-for="dict in probtypequdaoOptions"
size="small"
@click="addpollinglist(dict)"
>{{dict.apiname}}</el-button>
</el-form-item>
</template>
</template>
<!-- <el-form-item label="接口列表" prop="apilist">
<el-input v-model="form.apilist" placeholder="请输入接口列表" />
</el-form-item>-->
</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 {
listGoods,
getGoods,
delGoods,
addGoods,
updateGoods,
exportGoods,
exportGoodstime
} from "@/api/api/goods";
export default {
name: "Goods",
data() {
return {
startTime: "",
endTime: "",
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 商品管理表格数据
goodsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
classid: undefined,
goodsid: undefined,
probtype: undefined,
apiway: undefined,
apioption: undefined,
probability: undefined,
pollinglist: undefined,
pollingstart: undefined,
pollingend: undefined,
pollingstate: undefined,
againway: undefined,
goodsname: undefined,
goodsvalue: undefined,
goodsunit: undefined,
goodsoriginal: undefined,
goodsprice: undefined,
goodscost: undefined,
apilist: undefined
},
// 表单参数
form: {},
//最低的值
zuidi: [],
//概率分布
gailu: [],
//概率分布值
gailuval: [],
//概率状态
gailuvaldisa: [0, 0],
//轮询列表
pollingarr: [],
// 表单校验
rules: {
classid: [
{ required: true, message: "分类序号不能为空", trigger: "blur" }
],
goodsid: [
{ required: true, message: "商品编号不能为空", trigger: "blur" }
],
goodsname: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
],
goodsvalue: [
{ required: true, message: "商品面值不能为空", trigger: "blur" }
],
goodsunit: [
{ required: true, message: "面值单位不能为空", trigger: "blur" }
],
goodsoriginal: [
{ required: true, message: "商品原价不能为空", trigger: "blur" }
],
goodsprice: [
{ required: true, message: "标准售价不能为空", trigger: "blur" }
],
goodscost: [
{ required: true, message: "标准进价不能为空", trigger: "blur" }
]
},
statusOptions: [
{ dictValue: 1, dictLabel: "正常" },
{ dictValue: 0, dictLabel: "关闭" }
],
probtypeOptions: [
{ dictValue: 0, dictLabel: "唯一渠道" },
{ dictValue: 1, dictLabel: "最低价格" },
{ dictValue: 2, dictLabel: "概率分布" }
],
probtypequdaoOptions: [],
value4: "",
xiugaiflag: false,
gailuvalue: [],
gailuid: {}
};
},
created() {
// listGoods().then(response => {
// console.log(1111111);
// });
this.getList();
},
// nested exception is org.apache.ibatis.reflection.
// ReflectionException: There is no getter for property named 'appid' in 'class com.ruoyi.project.api.domain.ApiGoodsInfo'
methods: {
//控制多选 checkbox
selecteChange(value, optionname, i) {
// console.log(i);
this.gailuvaldisa[optionname] = !value;
// console.log(this.gailuvaldisa);
this.gailuid[i].check = value;
},
// 控制单选 radios
radiochange(val, id) {
this.gailuid[id].val = val;
console.log(this.gailuid[id]);
console.log(val);
console.log(id);
},
//添加轮询列表
addpollinglist(data) {
this.pollingarr.push(data);
this.form.pollinglist = [...this.pollingarr];
console.log(data);
console.log(this.pollingarr);
},
//删除轮询指定对象
delpollinglist(i) {
// console.log(dict);
// console.log(i);
console.log(i);
this.pollingarr.splice(i, 1);
this.form.pollinglist = [...this.pollingarr];
},
/** 查询商品管理列表 */
getList() {
this.loading = true;
let chazhaodata = {
pageNum: 1,
pageSize: 10,
id: this.$route.query.id
};
if (typeof this.$route.query.id != "") {
listGoods(chazhaodata).then(response => {
this.goodsList = response.rows;
this.total = response.total;
this.loading = false;
});
} else {
listGoods(this.queryParams).then(response => {
this.goodsList = response.rows;
this.total = response.total;
this.loading = false;
});
}
// if();
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.xiugaiflag = false;
},
// 表单重置
reset() {
this.form = {
id: undefined,
classid: undefined,
goodsid: undefined,
probtype: undefined,
apiway: undefined,
apioption: undefined,
probability: undefined,
pollinglist: undefined,
pollingstart: undefined,
pollingend: undefined,
pollingstate: undefined,
pollingqudao: undefined, //采购渠道
againway: undefined,
goodsname: undefined,
goodsvalue: undefined,
goodsunit: undefined,
goodsoriginal: undefined,
goodsprice: undefined,
goodscost: undefined,
apilist: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
// if( ){
// this.xiugaiflag=true;
// }
this.xiugaiflag = false;
this.reset();
this.open = true;
this.title = "添加商品管理";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.pollingarr = [];
const id = row.id || this.ids;
getGoods(id).then(response => {
//得到表单数据
this.form = { ...response.data };
// for (let i = 0; i < this.probtypequdaoOptions.length; i++) {
// this.gailuvalue[i] = parseInt(
// tempprobability[index].substring(
// tempprobability[index].indexOf("_") + 1,
// tempprobability[index].length
// )
// );
// }
if (this.form.apioption == "") {
this.form.apioption = [];
} else {
this.form.apioption = this.form.apioption.split(",");
}
exportGoodstime(id).then(response => {
this.probtypequdaoOptions = [...response.data];
let tempprobability = this.form.probability.split(",");
let keyIndex; //第一个_的位置前的id值
let keystaus; //数据是否被点击的状态 0或1
let keyVal; //第一个_的位置到位置减2的 数据
//得到概率分布数据
for (
let index = 0;
index < this.probtypequdaoOptions.length;
index++
) {
keyIndex = tempprobability[index].indexOf("_");
keystaus = tempprobability[index].substring(
tempprobability[index].length - 1
);
keyVal = tempprobability[index].substring(
keyIndex + 1,
tempprobability[index].length - 2
);
this.gailuid[this.probtypequdaoOptions[index].id] = {
val: keyVal ? keyVal : 10
};
if (keystaus === "0") {
this.gailuvaldisa[index] = true;
this.gailuid[this.probtypequdaoOptions[index].id].check = false;
} else {
this.gailu[index] = parseInt(
tempprobability[index].substring(0, keyIndex)
);
this.gailuid[this.probtypequdaoOptions[index].id].check = true;
this.gailuvaldisa[index] = false;
}
this.gailuvalue[index] = parseInt(
tempprobability[index].substring(
keyIndex + 1,
tempprobability[index].length - 1
)
);
}
//轮询渠道取值 数据重构
let temppollingarr = this.form.pollinglist.split(",");
for (const iterator of temppollingarr) {
this.probtypequdaoOptions.map(item => {
if (item.apiway == iterator) {
this.pollingarr.push({
...item
});
}
});
}
});
this.open = true;
this.xiugaiflag = true;
this.title = "修改商品管理";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
//最低价格转化为字符串
this.form.apioption = this.form.apioption.join(",");
let tempgailu = [...this.gailu];
let tempgailuval = [...this.gailuvalue];
let tempkey = "";
let strpollinglist = "";
//拼接数据传值
for (const key in this.gailuid) {
tempkey +=
key +
"_" +
this.gailuid[key].val +
"_" +
this.gailuid[key].check / 1 +
",";
}
this.form.probability = tempkey;
//轮询渠道数据
if (typeof this.form.pollinglist != "string") {
for (var i = 0; i < this.form.pollinglist.length; i++) {
strpollinglist += this.form.pollinglist[i].apiway + ",";
}
//去掉最后一个逗号(如果不需要去掉,就不用写)
if (strpollinglist.length > 0) {
strpollinglist = strpollinglist.substr(
0,
strpollinglist.length - 1
);
}
this.form.pollinglist = strpollinglist;
}
// console.log(typeof this.form.pollinglist);
// console.log(this.form.pollinglist);
// return false;
updateGoods(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
} else {
this.msgError(response.msg);
}
});
} else {
addGoods(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
} else {
this.msgError(response.msg);
}
});
}
}
});
// this.xiugaiflag = false;
},
},
};
</script>
效果如下:
实现过程
- 1.绑定v-model给 左边的多选框 ,和右边的单选值
<template v-if="form.probtype ==2">
<el-checkbox-group v-model="gailu" style="float:left;">
<el-checkbox
style="display: block;"
v-for="(dict,index) in probtypequdaoOptions"
:label="dict.id"
:key="dict.id"
@change="selecteChange($event,index,dict.id)"
>{{dict.apiname}}</el-checkbox>
</el-checkbox-group>
<div>
<template v-for="(dict,index) in probtypequdaoOptions">
<el-radio-group v-model="gailuvalue[index]" :disabled="gailuvaldisa[index]">
<el-radio
v-for="(item,i) in 9"
:key="(i+1)*10"
:label="(i+1)*10"
:name="dict.id+''"
@change="radiochange($event,dict.id)"
/>
</el-radio-group>
</template>
</div>
</template>
- 2.实现点击左边单选的为false,禁用右边对应单选的值,在methods里添加对应点击事件, 点击时this.gailuvaldisa(控制单选框禁用数据)的对应的probtypequdaoOptions数据的的下标的值。已经对应的 this.gailuid对应的probtypequdaoOptions的数据下的id的值状态为true或者false;
selecteChange(value, optionname, i) {
this.gailuvaldisa[optionname] = !value;
this.gailuid[i].check = value;
},
2.数据结构为字符串,所以提交数据的时候要进行加工。
this.gailuid的下标+this.gailuid下标下的val值+点击状态1/0
let tempkey = "";
let strpollinglist = "";
//拼接数据传值
for (const key in this.gailuid) {
tempkey +=
key +
"_" +
this.gailuid[key].val +
"_" +
this.gailuid[key].check / 1 +
",";
}
this.form.probability = tempkey;
3.得到字符串数据,重组数据结构放到data下.把概率分布数据转化为数组结构。循环得到keyIndex,keyVal,keystaus.
exportGoodstime(id).then(response => {
this.probtypequdaoOptions = [...response.data];
// let temp = this.form.probability.split(",");
let tempprobability = this.form.probability.split(",");
let keyIndex; //第一个_的位置前的id值
let keystaus; //数据是否被点击的状态 0或1
let keyVal; //第一个_的位置到位置减2的 数据
//得到概率分布数据
for (
let index = 0;
index < this.probtypequdaoOptions.length;
index++
) {
keyIndex = tempprobability[index].indexOf("_");
keystaus = tempprobability[index].substring(
tempprobability[index].length - 1
);
keyVal = tempprobability[index].substring(
keyIndex + 1,
tempprobability[index].length - 2
);
this.gailuid[this.probtypequdaoOptions[index].id] = {
val: keyVal ? keyVal : 10
};
if (keystaus === "0") {
this.gailuvaldisa[index] = true;
this.gailuid[this.probtypequdaoOptions[index].id].check = false;
} else {
this.gailu[index] = parseInt(
tempprobability[index].substring(0, keyIndex)
);
this.gailuid[this.probtypequdaoOptions[index].id].check = true;
this.gailuvaldisa[index] = false;
}
this.gailuvalue[index] = parseInt(
tempprobability[index].substring(
keyIndex + 1,
tempprobability[index].length - 1
)
);
}