VUE 实现 对应多选框控制多个单选框赋值

1,052 阅读12分钟

先上代码

<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
              )
            );
          }