vue-insagent-pc/src/views/AgreementManage/CarInsurance/components/PremiumFactor.vue

<template>
  <div>
    <div class="head_operate">
      <el-button size="small" @click="addConditions(1)">添加条件</el-button>
      <el-button size="small" @click="addConditions(2)">常用条件设置</el-button>
      <el-button size="small" @click="saveTemplate()">另存为模板</el-button>
      <el-button size="small" type="primary" @click="importTemplate()"
        >导入模板</el-button
      >
    </div>
    <el-form ref="CostfactorForm" :model="formData" label-width="190px">
      <div v-for="(item, index) in circularContent" :key="index">
        <el-card
          class="box-card"
          :body-style="{ display: item.hideAll ? 'block' : 'none' }"
          style="margin-bottom: 18px"
        >
          <div slot="header" class="clearfix">
            <span>
              <img :src="item.img" />
              {{ item.title }}
            </span>
            <el-button
              v-if="!item.nooperate"
              style="float: right; padding: 3px 0"
              type="text"
              @click="hides(index)"
              >{{ item.hideAll ? "收起" : "展开" }}</el-button
            >
          </div>
          <el-row :gutter="20">
            <el-col
              :span="val.col || 11"
              v-for="val in item.concant"
              :key="val.prop"
            >
              <el-form-item
                :label="val.label"
                :prop="val.prop"
                :label-width="val.labelWidth ? val.labelWidth : '190px'"
                style="margin-bottom: 15px"
                v-if="!val.hide"
              >
                <template v-if="val.type === 'input'">
                  <el-input
                    style="width: 100%"
                    v-model="formData[val.prop]"
                    size="small"
                    :placeholder="'请输入' + val.label"
                    clearable
                  ></el-input>
                </template>
                <template v-if="val.type === 'textarea'">
                  <el-input
                    type="textarea"
                    maxlength="100"
                    clearable
                    show-word-limit
                    v-model="formData[val.prop]"
                    size="small"
                    :placeholder="'请输入' + val.label"
                  ></el-input>
                </template>
                <template v-if="val.type === 'select'">
                  <el-select
                    size="small"
                    v-model="formData[val.prop]"
                    style="width: 100%"
                    clearable
                    :placeholder="'请输入' + val.label"
                  >
                    <el-option
                      v-for="(s, i) in val.options"
                      :key="i"
                      :label="s.label"
                      :value="s.value"
                    ></el-option>
                  </el-select>
                </template>
                <!-- 日期 -->
                <template v-if="val.type === 'date'">
                  <el-date-picker
                    v-dateFormat
                    v-model="formData[val.prop]"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :placeholder="'选择'+val.prop"
                    placement="bottom-start"
                  ></el-date-picker>
                </template>
                <!-- 带多选的select -->
                <template v-if="val.type === 'selectmultiple'">
                  <el-select
                    multiple
                    size="small"
                    v-model="formData[val.prop]"
                    style="width: 100%"
                    clearable
                    :placeholder="'请输入' + val.label"
                  >
                    <el-option
                      v-for="(s, i) in val.options"
                      :key="i"
                      :label="s.dictTag"
                      :value="s.dictValue"
                    ></el-option>
                  </el-select>
                </template>
                <!-- 带搜索和全选的select -->
                <template v-if="val.type === 'selectsearch'">
                  <el-select
                    size="small"
                    style="width: 60%"
                    v-model="formData[val.prop1]"
                    multiple
                    collapse-tags
                    filterable
                    clearable
                    @change="changeSelect(formData[val.prop1], val)"
                    :placeholder="'请输入' + val.label"
                  >
                    <el-checkbox
                      style="text-align: right; width: 92%"
                      v-model="val.checked"
                      @change="selectAll(val)"
                      >全选</el-checkbox
                    >
                    <el-option
                      v-for="item in val.options"
                      :key="item.dictValue"
                      :label="item.dictTag"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                  <el-select
                    size="small"
                    v-model="formData[val.prop2]"
                    clearable
                    style="width: 39%"
                    placeholder="请输入校验方式"
                  >
                    <el-option
                      v-for="(s, i) in options"
                      :key="i"
                      :label="s.label"
                      :value="s.value"
                    ></el-option>
                  </el-select>
                </template>
                <!-- 创建条目的select -->
                <template v-if="val.type === 'createSelect'">
                  <el-select
                    style="width: 100%"
                    v-model="formData[val.prop]"
                    multiple
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in val.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
                <template v-if="val.type === 'inputconnect'">
                  <div>
                    <el-input
                      style="width: 45%"
                      v-model="formData[val.prop1]"
                      size="small"
                      placeholder="下限"
                    ></el-input>
                    <span style="color: rgba(0, 0, 0, 0.15)">——</span>
                    <el-input
                      style="width: 45%"
                      v-model="formData[val.prop2]"
                      size="small"
                      placeholder="上限"
                    ></el-input>
                  </div>
                </template>
                <!-- 单选框 -->
                <template v-if="val.type === 'radio'">
                  <el-radio-group
                    size="small"
                    v-model="formData[val.prop]"
                    v-bind="val.chang"
                    :disabled="val.disabled || false"
                  >
                    <el-radio-button
                      v-for="(el, i) in val.options"
                      :key="i"
                      :label="el.value"
                      :disabled="el.disabled"
                      :border="el.border"
                      >{{ el.label }}</el-radio-button
                    >
                  </el-radio-group>
                </template>
                <template v-if="val.type === 'slot' && val.label === '车牌'">
                  <el-select
                    multiple
                    size="small"
                    v-model="formData[val.prop1]"
                    style="width: 70%"
                    clearable
                    :placeholder="'请输入' + val.label"
                  >
                    <el-option
                      v-for="(s, i) in val.options"
                      :key="i"
                      :label="s.license"
                      :value="s.id"
                    ></el-option>
                  </el-select>
                  <!-- <el-checkbox style="margin-left: 20px;" true-label="1" false-label="0"  v-model="formData.chepai2" :disabled="formData[val.prop1].length>0?false:true">含暂未上牌</el-checkbox> -->
                </template>

                <template
                  v-if="val.type === 'slot' && val.label === '条件适用对象'"
                >
                  <el-checkbox-group v-model="formData[val.prop]">
                    <el-checkbox
                      :label="item.value"
                      :key="item.value"
                      v-for="item in objtoubaoren"
                      @change="(event) => chooseCondition(event, item)"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </template>
                <template v-if="val.type === 'slot' && val.prop === '车主'">
                  <el-divider content-position="left">
                    <b>车主</b>
                  </el-divider>
                </template>
                <template v-if="val.type === 'slot' && val.prop === '投保人'">
                  <el-divider content-position="left">
                    <b>投保人</b>
                    <span style="font-size: 12px; margin: 0 5px 0 15px"
                      >同车主</span
                    >
                    <el-switch
                      v-model="formData[val.prop]"
                      @change="isoOwnerFun"
                      active-color="#409EFF"
                      inactive-color="#ccc"
                    ></el-switch>
                  </el-divider>
                </template>
                <template v-if="val.type === 'slot' && val.prop1 === '被保人1'">
                  <el-divider content-position="left">
                    <b>被保人</b>
                    <span style="font-size: 12px; margin: 0 5px 0 15px"
                      >同车主</span
                    >
                    <el-switch
                      v-model="formData[val.prop1]"
                      @change="isoApplicantFun"
                      active-color="#409EFF"
                      inactive-color="#ccc"
                    ></el-switch>
                    <span style="font-size: 12px; margin: 0 5px 0 15px"
                      >同投保人</span
                    >
                    <el-switch
                      v-model="formData[val.prop2]"
                      @change="isoApplicantFun"
                      active-color="#409EFF"
                      inactive-color="#ccc"
                    ></el-switch>
                  </el-divider>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-form>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      append-to-body
      width="80%"
    >
      <span
        v-for="(ele, index) in conditiondata"
        :key="index"
        class="often-box"
      >
        <div class="often-box-title">
          <span class="title-text">{{ ele.title }}</span>
          <el-checkbox
            :indeterminate="checkedmData[index].isIndeterminate"
            v-model="checkedmData[index].checkAll"
            @change="handleCheckAllChange(index)"
            >全选</el-checkbox
          >
        </div>
        <div
          class="often-content-classify"
          v-for="(cele, cindex) in ele.options"
          :key="cindex"
        >
          <div class="classify-title">{{ cele.name }}</div>
          <el-checkbox-group
            class="often-content"
            v-model="checkedmData[index].checkedCities"
            @change="
              handleCheckedCitiesChange(checkedmData[index],cele.cities, index, cindex)
            "
          >
            <el-checkbox
              class="often-content-child"
              v-for="city in cele.cities"
              :label="city.label"
              :key="city.city"
              >{{ city.label }}</el-checkbox
            >
            <!-- <el-checkbox
              class="often-content-child"
              v-for="city in cele.cities"
              :label="city"
              :key="city"
              >{{ city }}</el-checkbox
            > -->
          </el-checkbox-group>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="conditionSave()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="导入条件佣金模板"
      :visible.sync="ImportdialogVisible"
      append-to-body
      width="80%"
    >
      <span>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="模板名称"></el-table-column>
          <el-table-column prop="name" label="政策简称"></el-table-column>
          <el-table-column prop="address" label="条件描述"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="Import(scope.$index)"
                type="primary"
                size="small"
                >导入</el-button
              >
              <el-button
                @click.native.prevent="deleteRow(scope.$index)"
                type="danger"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import imgSrc1 from "../../../../assets/image/bfyz1.png";
import imgSrc2 from "../../../../assets/image/bfyz2.png";
import imgSrc3 from "../../../../assets/image/bfyz3.png";
import imgSrc4 from "../../../../assets/image/bfyz4.png";
import imgSrc5 from "../../../../assets/image/bfyz5.png";
let insureOptions=[
      {
        label: "不投保",
        value: "0"
      },
      {
        label: "投保",
        value: "1"
      }
    ]
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //若选择的日期小于当前日期（包含今天）
          return time.getTime() > Date.now();
          //若选择的日期大于当前日期（不包含今天）： time.getTime() < Date.now()
          //若选择的日期小于当前日期(不包含今天)： time.getTime() > Date.now() - 8.64e7
          //若选择的日期小于等于当前日期（包含今天）： time.getTime() > Date.now()
        }
      },
      ImportdialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      objtoubaoren: [
        {
          label: "投保人",
          value: "toubaoren",
        },
        {
          label: "被保人",
          value: "beibaoren",
        },
        {
          label: "车主",
          value: "chezhu",
        },
      ],
      checkedmData: [],
      conditiondata: [
        {
          title: "保单信息",
          options: [
            {
              name: "险种",
              // cities:['机动车损失险','第三者责任险']
              cities: [
                {
                  label:'机动车损失险',
                  type:'select',
                  prop:'机动车损失险',
                  options:insureOptions
                },
                {
                  label:'第三者责任险',
                  type:'select',
                  prop:'第三者责任险',
                  options:insureOptions
                },{
                  label:'司机责任险',
                  type:'select',
                  prop:'司机责任险',
                  options:insureOptions
                },{
                  label:'乘客责任险',
                  type:'select',
                  prop:'乘客责任险',
                  options:insureOptions
                },{
                  label:'附加医保-三者',
                  type:'select',
                  prop:'附加医保-三者',
                  options:insureOptions
                },{
                  label:'附加医保-座位险(乘客)',
                  type:'select',
                  prop:'附加医保-座位险(乘客)',
                  options:insureOptions
                },{
                  label:'附加医保-座位险(司机)',
                  type:'select',
                  prop:'附加医保-座位险(司机)',
                  options:insureOptions
                },
              ],
            },
          ],
        },
        {
          title: "车辆信息",
          options: [
            {
              name: "车辆",
              cities: [
                {
                  label:'车辆识别代码',
                  prop:'车辆识别代码',
                  type:'input',
                },
                {
                  label:'品牌型号',
                  prop:'品牌型号',
                  type:'input'
                },{
                  label:'新车购置价',
                  prop:'新车购置价',
                  type:'input'
                },{
                  label:'注册日期',
                  prop:'注册日期',
                  type:'date'
                },
                {
                  label:'发证日期',
                  prop:'发证日期',
                  type:'date'
                },
              ],
            },
          ],
        },
        {
          title: "关系人信息",
          options: [
            {
              name: "车主",
              cities: [
                {
                  label:'车主性别',
                  prop:'车主性别',
                  type:'input',
                  hide: true,
                  name: "chezhu",
                },
              ],
            }, {
              name: "投保人",
              cities: [
                {
                  label:'投保人性别',
                  prop:'投保人性别',
                  type:'input',
                  hide: true,
                  name: "toubaoren",
                },
              ],
            }, {
              name: "被保人",
              cities: [
                {
                  label:'被保人性别',
                  prop:'被保人性别',
                  type:'input',
                  hide: true,
                  name: "beibaoren",
                },
              ],
            },
          ],
        },
        
      ],
      dialogVisible: false,
      dialogTitle: "添加其他条件",
      options: [
        {
          value: "1",
          label: "符合其一",
        },
        {
          value: "2",
          label: "全部除外",
        },
      ],
      formData: {
        chepai2: "",
        条件适用对象: [],
      },

      trafficManagementVehicleTypeoptions: [],
      natureOfVehicleUseoptions: [],
      licenseOptions: [],
      energyTypeoptions: [],
    };
  },
  computed: {
    circularContent() {
      return [
        {
          title: "车险预核条件",
          hideAll: true,
          img: imgSrc1,
          concant: [
            {
              label: "政策简介",
              prop: "transfer",
              type: "textarea",
            },
            {
              label: "条件描述",
              prop: "条件描述",
              type: "textarea",
            },
          ],
        },
        {
          title: "规则类型",
          hideAll: true,
          img: imgSrc2,
          nooperate: true,
          concant: [
            {
              label: "符合以下条件的车辆，系统将",
              prop: "符合以下条件的车辆，系统将",
              type: "input",
              labelWidth: "250px",
            },
          ],
        },
        {
          title: "保单信息",
          hideAll: true,
          img: imgSrc3,
          concant: [
            {
              label: "含交叉销售",
              prop: "含交叉销售",
              type: "radio",
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "非车产品",
              prop: "非车产品",
              type: "select",
              options: [],
            },
            {
              label: "非车保费(元)",
              prop1: "非车保费1",
              prop2: "非车保费2",
              type: "inputconnect",
            },
            {
              label: "附加医保座位险总保额(乘客-万元)",
              prop1: "附加医保座位险总保额(乘客-万元)1",
              prop2: "附加医保座位险总保额(乘客-万元)2",
              type: "inputconnect",
            },
            {
              label: "座位险保额（乘客每座-万元）",
              prop1: "座位险保额（乘客每座-万元）1",
              prop2: "座位险保额（乘客每座-万元）2",
              type: "inputconnect",
            },
            {
              label: "座位险保额(司乘每座-万元)",
              prop1: "座位险保额(司乘每座-万元)1",
              prop2: "座位险保额(司乘每座-万元)2",
              type: "inputconnect",
            },
          ],
        },
        {
          title: "车辆信息",
          hideAll: true,
          img: imgSrc4,
          concant: [
            {
              label: "过户车",
              prop: "过户车",
              type: "radio",
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "新车",
              prop: "新车",
              type: "radio",
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "新能源",
              prop: "新能源",
              type: "radio",
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "能源类型",
              prop: "能源类型",
              type: "selectmultiple",
              options: this.energyTypeoptions,
            },
            {
              label: "使用性质",
              prop1: "使用性质1",
              prop2: "使用性质2",
              type: "selectsearch",
              options: this.natureOfVehicleUseoptions,
            },
            {
              label: "车辆类型",
              prop1: "车辆类型1",
              prop2: "车辆类型2",
              type: "selectsearch",
              options: this.trafficManagementVehicleTypeoptions,
            },
            {
              label: "额定载重质量(吨)",
              prop1: "额定载重质量1",
              prop2: "额定载重质量2",
              type: "inputconnect",
            },
            {
              label: "整备质量(千克)",
              prop1: "整备质量1",
              prop2: "整备质量2",
              type: "inputconnect",
            },
            {
              label: "总质量(千克)",
              prop1: "总质量1",
              prop2: "总质量2",
              type: "inputconnect",
            },
            {
              label: "座位数(个)",
              prop1: "座位数1",
              prop2: "座位数2",
              type: "inputconnect",
            },
            {
              label: "车龄(月)",
              prop1: "车龄1",
              prop2: "车龄2",
              type: "inputconnect",
            },
            {
              label: "车价（万元)",
              prop1: "车价1",
              prop2: "车价2",
              type: "inputconnect",
            },
            {
              label: "排气量(cc)",
              prop1: "排气量1",
              prop2: "排气量2",
              type: "inputconnect",
            },
            {
              label: "包含品牌",
              prop: "包含品牌",
              type: "createSelect",
              options: [],
            },
            {
              label: "除外品牌",
              prop: "除外品牌",
              type: "createSelect",
              options: [],
            },
            {
              label: "是否上牌",
              prop: "是否上牌",
              type: "radio",
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "车牌",
              prop1: "车牌1",
              prop2: "chepai2",
              type: "slot",
              options: this.licenseOptions,
            },
          ],
        },
        {
          title: "关系人信息",
          hideAll: true,
          img: imgSrc5,
          concant: [
            {
              label: "条件适用对象",
              prop: "条件适用对象",
              type: "slot",
            },
            {
              label: "适用对象校验方式",
              prop: "适用对象校验方式",
              type: "select",
              options: [
                {
                  label: "适用对象至少其一符合以下条件",
                  value: "1",
                },
                {
                  label: "适用对象全部符合以下条件",
                  value: "2",
                },
              ],
            },
            {
              label: "",
              prop: "车主",
              type: "slot",
              name: "chezhu",
              hide: true,
              col: 24,
              labelWidth: "0",
            },
            {
              label: "车主年龄（女）(岁)",
              prop: "车主年龄",
              hide: true,
              type: "inputconnect",
              name: "chezhu",
            },
            {
              label: "车主年龄（男）(岁)",
              prop: "车主年龄1",
              hide: true,
              type: "inputconnect",
              name: "chezhu",
            },
            {
              label: "车主证件号",
              prop: "车主证件号",
              hide: true,
              type: "input",
              name: "chezhu",
            },
            {
              label: "",
              prop: "投保人",
              type: "slot",
              name: "toubaoren",
              hide: true,
              col: 24,
              labelWidth: "0",
            },
            {
              label: "投保人年龄（女）(岁)",
              prop: "投保人年龄",
              hide: true,
              type: "inputconnect",
              name: "toubaoren",
            },
            {
              label: "投保人年龄（男）(岁)",
              prop: "投保人年龄1",
              hide: true,
              type: "inputconnect",
              name: "toubaoren",
            },
            {
              label: "投保人证件号",
              prop: "投保人证件号",
              hide: true,
              type: "input",
              name: "toubaoren",
            },
            {
              label: "",
              prop1: "被保人1",
              prop2: "被保人2",
              type: "slot",
              name: "beibaoren",
              hide: true,
              col: 24,
              labelWidth: "0",
            },
            {
              label: "被保人年龄（女）(岁)",
              prop: "被保人年龄",
              hide: true,
              type: "inputconnect",
              name: "beibaoren",
            },
            {
              label: "被保人年龄（男）(岁)",
              prop: "被保人年龄1",
              hide: true,
              type: "inputconnect",
              name: "beibaoren",
            },
            {
              label: "被保人证件号",
              prop: "被保人证件号",
              hide: true,
              type: "input",
              name: "beibaoren",
            },
          ],
        },
      ];
    },
  },
  created() {
    this.getDicType("natureOfVehicleUse"); //车辆使用性质
    this.getDicType("trafficManagementVehicleType"); //车辆类型
    this.getDicType("energyType"); //能源种类

    this.$api.insCompany.license().then((res) => {
      this.licenseOptions = res.data;
    });
    this.conditiondata.forEach((val, index) => {
      this.checkedmData[index] = {
        checkAll: false,
        isIndeterminate: false,
        checkedCities: [],
        option:[]
      };
    });
  },

  methods: {
    //--数据字典 begin --
    getDicType(type) {
      this.$api.insCompany.dicType(type).then((res) => {
        if (res.code == 200) {
          if (type == "insOrderStatus") {
            let data = JSON.parse(JSON.stringify(res.data.ddList));
            data.unshift({
              dictTag: "全部",
              dictValue: "888",
            });
            this[type + "options"] = data;
          } else {
            this[type + "options"] = res.data.ddList;
          }
        }
      });
    },
    hides(index) {
      this.circularContent[index].hideAll =
        !this.circularContent[index].hideAll;
    },
    selectAll(val) {
      this.formData[val.prop1] = [];
      if (val.checked) {
        val.options.map((item) => {
          this.formData[val.prop1].push(item.value);
        });
      } else {
        this.formData[val.prop1] = [];
      }
    },
    changeSelect(data, val) {
      if (data.length === val.options.length) {
        val.checked = true;
      } else {
        val.checked = false;
      }
    },
    chooseCondition(event, item) {
      if (event) {
        this.circularContent[4].concant.forEach((ele) => {
          if (ele.name == item.value) {
            console.log(ele)
            ele.hide = false;
          }
          // return ele;
        });
      } else {
        this.circularContent[4].concant.forEach((ele) => {
          if (ele.name == item.value) {
            ele.hide = true;
          }
          // return ele;
        });
      }
    },
    // 投保人同车主功能
    isoOwnerFun(val) {
      if (val) {
        this.circularContent[4].concant.forEach((ele, index) => {
          if (ele.name == "toubaoren" && ele.label != "") {
            this.circularContent[4].concant[index].hide = true;
            this.circularContent = Array.from(this.circularContent);
          }
        });
      } else {
        this.circularContent[4].concant.forEach((ele, index) => {
          if (ele.name == "toubaoren") {
            ele.hide = false;
          }
        });
      }
    },

    isoApplicantFun(val) {
      if (val) {
        this.circularContent[4].concant.forEach((ele, index) => {
          if (ele.name == "beibaoren" && ele.label != "") {
            this.circularContent[4].concant[index].hide = true;
            this.circularContent = Array.from(this.circularContent);
          }
        });
      } else {
        this.circularContent[4].concant.forEach((ele, index) => {
          if (ele.name == "beibaoren") {
            ele.hide = false;
          }
        });
      }
    },
    addConditions(type) {
      this.dialogVisible = true;
      if (type == "1") {
        this.dialogTitle = "条件配置";
      } else {
        this.dialogTitle = "常用条件配置";
      }
    },
    // 全选
    handleCheckAllChange(index) {
      let arr = [];
      this.conditiondata[index].options.forEach((val) =>{
        this.checkedmData[index].option.push(...val.cities)
        arr.push(...val.cities.map(ele=>ele.label))
      });

      this.checkedmData[index].checkedCities = this.checkedmData[index].checkAll
        ? arr
        : [];
      this.checkedmData[index].isIndeterminate = false;
      this.checkedmData = [...this.checkedmData];
    },
    // 单选
    handleCheckedCitiesChange(value,cities, index, cindex) {
      if(value.checkedCities.length>0){
        this.checkedmData[index].option=[]
        value.checkedCities.forEach(ele=>{
          this.checkedmData[index].option.push(cities.find(val=>val.label==ele)) 
        })
      }
        let checkedCount = value.checkedCities.length;
        // 全选按钮是否打勾
        this.checkedmData[index].checkAll =checkedCount === this.conditiondata[index].options[cindex].cities.length||checkedCount === this.conditiondata[index].options.length;
        this.checkedmData[index].isIndeterminate =  checkedCount > 0 && checkedCount < this.conditiondata[index].options[cindex].cities.length|| checkedCount < this.conditiondata[index].options.length;
        this.checkedmData = [...this.checkedmData];
    },
    // 条件配置保存
    conditionSave() {
      console.log( this.checkedmData,this.circularContent,6666666666666666)
      this.dialogVisible = false;
      this.conditiondata.forEach((val,index)=>{
        this.checkedmData[index].title=val.title
      })
      // 页面数据
      let arr=[]
      let arr1=[]
      this.circularContent.forEach(ele=>{
        // 条件配置返回数据
        this.checkedmData.forEach(ele1=>{
          if(ele.title==ele1.title){
            // 将条件配置返回的数据插入到页面对应模块位置中
            ele.concant.forEach((ele2,index2)=>ele1.option.find((ele3,index3)=>{
              if(ele3.name==ele2.name && ele2.label==''){
              // console.log(ele3,index2,900000000000)
              arr.push(ele3)
              arr1.push(index2)
                  ele.concant.splice(index2,0,ele3)
              }
            }))
           let aaa= ele.concant.find((ele2,index2)=>ele1.option.map((ele3,index3)=>ele3.name==ele2.name && ele2.label=='' ))
           console.log(aaa,88888888888888)

            // ele.concant.splice(ele.concant.findIndex(ele2=>ele1.option.find(ele3=>ele3.name==ele2.name && ele2.label==''))+1,0,ele1.option)
          }
        })
      })
              console.log(Array.from(new Set(arr)) ,arr1,900000000000)


    },

    // 另存为模板
    saveTemplate() {
      this.$prompt("请输入模板名称", "提示", {
        inputAttrs: {
          maxlength: 10, // 设置最大长度为10
        },
      })
        .then(({ value }) => {
          console.log(value, 444444444);

          // 处理输入值
        })
        .catch(() => {
          // 取消操作
        });
    },
    // 导入模板
    importTemplate() {
      this.ImportdialogVisible = true;
    },
    deleteRow(index) {
      this.$confirm("确认删除该模板吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
  },
};
</script>
<style scoped  lang="scss">
.clearfix:before,
.clearfix:after {
  clear: both;
  display: table;
  content: "";
}
.hide-all {
  display: none;
}
.clearfix {
  padding-left: 20px;
  span {
    font-weight: 600;
    font-size: 15px;
  }
  span > img {
    vertical-align: middle;
    width: 26px;
    height: 26px;
    margin-right: 5px;
  }
}
.head_operate {
  text-align: right;
  padding: 10px 0;
}
.often-box-title {
  padding: 10px;
  background-color: #ffeede;
  font-weight: bold;
}
.often-content-classify {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.often-box .often-content-classify:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.classify-title {
  width: 100px;
  text-align: right;
  padding: 15px 5px 0px 0px;
  font-weight: 600;
}
.often-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px;
  flex: 1;
}

.often-content-child {
  width: 22%;
  padding: 5px 0;
}
.title-text {
  display: inline-block;
  width: 100px;
  font-size: 15px;
  font-weight: 900;
}
</style>