diagnosis.admin/src/views/business/components/Edit.vue

<template>
  <div class="page-index">
    <ul>
      <li>
        <div class="ind">序号</div>
        <div class="level">层次</div>
        <div class="order">顺序</div>
        <div class="isReq">必填</div>
        <div class="project" style="justify-content: center">项目</div>
        <div class="action" style="text-align: center">操作</div>
      </li>
      <li v-for="(item,index) in editList" :key="index">
        <div class="ind">{{index+1}}</div>
        <div class="level">{{item.level}}</div>
        <div class="order">
          <i class="el-icon-bottom" v-if="isHasDown(index, item)" @click="()=>down(index, item)"></i>
          <i class="el-icon-top" v-if="isHasUp(index, item)" @click="()=>up(index, item)"></i>
        </div>
        <div class="isReq">
          <i class="el-icon-check" v-if="item.isReq"></i>
        </div>
        <div class="project">
          <div class="project1" v-if="!item.isDoing && item.level === -1">
            <div class="projectLabel">
              <span style="color: #f00" v-if="item.isReq">*</span>
              <span>{{item.label}}</span>
            </div>
            <div class="projectType">
              <el-input
                type="textarea"
                :rows="2"
                v-model="item.inputDefaultValue"
                :placeholder="item.inputPlaceholderValue"
                size="small"
                v-if="item.selectValue !== 'upload'"
              ></el-input>
            </div>
          </div>
          <div class="project2" v-if="item.isDoing">
            <div class="project2Left">
              <div class="project2LeftName">
                <span style="color: #f00">*</span>
                <span>项目名称</span>
              </div>
              <el-input
                placeholder
                v-model="item.inputValue"
                size="small"
                :disabled="item.level === 1"
              ></el-input>
            </div>
            <div class="project2Left">
              <div class="project2LeftName">
                <span style="color: #f00">*</span>
                <span>备选项形式</span>
              </div>
              <el-select placeholder="请选择" v-model="item.selectValue" size="small">
                <el-option
                  v-for="con in isDoingSelectList"
                  :key="con.type"
                  :label="con.label"
                  :value="con.type"
                ></el-option>
              </el-select>
            </div>
            <div class="project2Left" v-if="item.selectValue !== 'subject' && item.selectValue">
              <div class="project2LeftName">
                <span>是否必填</span>
              </div>
              <el-checkbox v-model="item.isReq">必填</el-checkbox>
            </div>
            <div
              class="project2Left"
              v-if="item.selectValue === 'input' || item.selectValue === 'textarea'"
            >
              <div class="project2LeftName">
                <span>默认值</span>
              </div>
              <el-input placeholder v-model="item.inputDefaultValue" size="small"></el-input>
            </div>
            <div
              class="project2Left"
              v-if="item.selectValue === 'input' || item.selectValue === 'textarea' || item.selectValue === 'fill'"
            >
              <div class="project2LeftName">
                <span>提示语</span>
              </div>
              <el-input placeholder v-model="item.inputPlaceholderValue" size="small"></el-input>
            </div>
            <div class="project2Left" v-if="item.selectValue === 'input'">
              <div class="project2LeftName">
                <span>单位</span>
              </div>
              <el-input placeholder v-model="item.depart" size="small"></el-input>
            </div>
            <div v-if="item.selectValue === 'radio'">
              <div
                class="project2Left"
                style="flex-direction: column;"
                v-for="(con,ind) in item.radioList"
                :key="ind"
              >
                <div style="display: flex;">
                  <div class="project2LeftName">
                    <span style="color: #f00">*</span>
                    <span>备选项</span>
                  </div>
                  <el-input placeholder v-model="item.radioList[ind].label" size="small"></el-input>
                  <el-radio
                    @input="()=>radioDefaultSelect(ind, index)"
                    v-model="item.radioList[ind].radioDefault"
                    label="1"
                  >默认</el-radio>
                  <span class="radioAdd" @click="()=>radioAdd(ind, index)">添加</span>
                  <span
                    class="radioDelete"
                    @click="()=>item.radioList.length!==1 && radioDelete(ind, index)"
                    :class="item.radioList.length===1 ? 'disabled' : ''"
                  >删除</span>
                  <span class="radioAddChild" @click="()=>radioAddChild(ind, index)">添加子备选项</span>
                </div>
                <div class="childBei" v-for="(conn,indd) in con.child" :key="indd">
                  <div style="display: flex;">
                    <div class="project2LeftName">
                      <span style="color: #f00">*</span>
                      <span>子备选项</span>
                    </div>
                    <div>
                      <span class="radioAdd" @click="()=>radioAdd(ind, index, indd)">添加</span>
                      <span class="radioDelete" @click="()=>radioDelete(ind, index, indd)">删除</span>
                    </div>
                  </div>
                  <div class="project2LeftCon">
                    <div class="project2Left">
                      <div class="project2LeftName">
                        <span style="color: #f00">*</span>
                        <span>子项目名称</span>
                      </div>
                      <el-input placeholder v-model="con.child[indd].inputValue" size="small"></el-input>
                    </div>
                    <div class="project2Left">
                      <div class="project2LeftName">
                        <span style="color: #f00">*</span>
                        <span>子备选项形式</span>
                      </div>
                      <el-select
                        placeholder="请选择"
                        v-model="con.child[indd].selectValue"
                        size="small"
                      >
                        <el-option
                          v-for="con in isDoingSelectList.slice(1, 5)"
                          :key="con.type"
                          :label="con.label"
                          :value="con.type"
                        ></el-option>
                      </el-select>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue !== 'subject' && conn.selectValue"
                    >
                      <div class="project2LeftName">
                        <span>是否必填</span>
                      </div>
                      <el-checkbox v-model="conn.isReq">必填</el-checkbox>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue === 'input' || conn.selectValue === 'textarea'"
                    >
                      <div class="project2LeftName">
                        <span>默认值</span>
                      </div>
                      <el-input placeholder v-model="conn.inputDefaultValue" size="small"></el-input>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue === 'input' || conn.selectValue === 'textarea'"
                    >
                      <div class="project2LeftName">
                        <span>提示语</span>
                      </div>
                      <el-input placeholder v-model="conn.inputPlaceholderValue" size="small"></el-input>
                    </div>
                    <div class="project2Left" v-if="conn.selectValue === 'input'">
                      <div class="project2LeftName">
                        <span>单位</span>
                      </div>
                      <el-input placeholder v-model="conn.depart" size="small"></el-input>
                    </div>
                    <div v-if="conn.selectValue === 'radio'">
                      <div
                        class="project2Left"
                        style="flex-direction: column;"
                        v-for="(connn,inddd) in conn.radioList"
                        :key="inddd"
                      >
                        <div style="display: flex;">
                          <div class="project2LeftName">
                            <span style="color: #f00">*</span>
                            <span>备选项</span>
                          </div>
                          <el-input placeholder v-model="conn.radioList[inddd].label" size="small"></el-input>
                          <el-radio
                            @input="()=>radioDefaultSelect(ind, index, indd, inddd)"
                            v-model="conn.radioList[inddd].radioDefault"
                            label="1"
                          >默认</el-radio>
                          <span
                            class="radioAdd"
                            @click="()=>radioAdd(ind, index, indd, conn.selectValue, inddd)"
                          >添加</span>
                          <span
                            class="radioDelete"
                            @click="()=>conn.radioList.length!==1 && radioDelete(ind, index, indd, inddd)"
                            :class="conn.radioList.length===1 ? 'disabled' : ''"
                          >删除</span>
                        </div>
                      </div>
                    </div>
                    <div v-if="conn.selectValue === 'checkbox'">
                      <div
                        class="project2Left"
                        style="flex-direction: column;"
                        v-for="(connn,inddd) in conn.radioList"
                        :key="inddd"
                      >
                        <div style="display: flex;">
                          <div class="project2LeftName">
                            <span style="color: #f00">*</span>
                            <span>备选项</span>
                          </div>
                          <el-input placeholder v-model="conn.radioList[inddd].label" size="small"></el-input>
                          <el-checkbox
                            @change="()=>changeCheckbox(ind, index, indd, 'checkbox', inddd)"
                            v-model="conn.radioList[inddd].radioDefault"
                          >默认</el-checkbox>
                          <el-checkbox
                            @change="()=>changeCheckboxOther(item.radioList[ind].radioDefault, ind, index, indd, inddd)"
                            v-model="conn.radioList[inddd].radioDefaultOther"
                          >与其他项互斥</el-checkbox>
                          <span
                            class="radioAdd"
                            @click="()=>radioAdd(ind, index, indd, 'checkbox', inddd)"
                          >添加</span>
                          <span
                            class="radioDelete"
                            @click="()=>conn.radioList.length!==1 && radioDelete(ind, index, indd, inddd)"
                            :class="conn.radioList.length===1 ? 'disabled' : ''"
                          >删除</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.selectValue === 'checkbox'">
              <div
                class="project2Left"
                style="flex-direction: column;"
                v-for="(con,ind) in item.radioList"
                :key="ind"
              >
                <div class="bei">
                  <div class="project2LeftName">
                    <span style="color: #f00">*</span>
                    <span>备选项</span>
                  </div>
                  <el-input placeholder v-model="item.radioList[ind].label" size="small"></el-input>
                  <el-checkbox
                    @change="()=>changeCheckbox(ind, index)"
                    v-model="item.radioList[ind].radioDefault"
                  >默认</el-checkbox>
                  <el-checkbox
                    @change="()=>changeCheckboxOther(item.radioList[ind].radioDefault, ind, index)"
                    v-model="item.radioList[ind].radioDefaultOther"
                  >与其他项互斥</el-checkbox>
                  <span class="radioAdd" @click="()=>radioAdd(ind, index, null, 'checkbox')">添加</span>
                  <span
                    class="radioDelete"
                    @click="()=>item.radioList.length!==1 && radioDelete(ind, index)"
                    :class="item.radioList.length===1 ? 'disabled' : ''"
                  >删除</span>
                  <span class="radioAddChild" @click="()=>radioAddChild(ind, index)">添加子备选项</span>
                </div>
                <div class="childBei" v-for="(conn,indd) in con.child" :key="indd">
                  <div style="display: flex;">
                    <div class="project2LeftName">
                      <span style="color: #f00">*</span>
                      <span>子备选项</span>
                    </div>
                    <div>
                      <span class="radioAdd" @click="()=>radioAdd(ind, index, indd)">添加</span>
                      <span class="radioDelete" @click="()=>radioDelete(ind, index, indd)">删除</span>
                    </div>
                  </div>
                  <div class="project2LeftCon">
                    <div class="project2Left">
                      <div class="project2LeftName">
                        <span style="color: #f00">*</span>
                        <span>子项目名称</span>
                      </div>
                      <el-input placeholder v-model="con.child[indd].inputValue" size="small"></el-input>
                    </div>
                    <div class="project2Left">
                      <div class="project2LeftName">
                        <span style="color: #f00">*</span>
                        <span>子备选项形式</span>
                      </div>
                      <el-select
                        placeholder="请选择"
                        v-model="con.child[indd].selectValue"
                        size="small"
                      >
                        <el-option
                          v-for="con in isDoingSelectList.slice(1, 5)"
                          :key="con.type"
                          :label="con.label"
                          :value="con.type"
                        ></el-option>
                      </el-select>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue !== 'subject' && conn.selectValue"
                    >
                      <div class="project2LeftName">
                        <span>是否必填</span>
                      </div>
                      <el-checkbox v-model="conn.isReq">必填</el-checkbox>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue === 'input' || conn.selectValue === 'textarea'"
                    >
                      <div class="project2LeftName">
                        <span>默认值</span>
                      </div>
                      <el-input placeholder v-model="conn.inputDefaultValue" size="small"></el-input>
                    </div>
                    <div
                      class="project2Left"
                      v-if="conn.selectValue === 'input' || conn.selectValue === 'textarea'"
                    >
                      <div class="project2LeftName">
                        <span>提示语</span>
                      </div>
                      <el-input placeholder v-model="conn.inputPlaceholderValue" size="small"></el-input>
                    </div>
                    <div class="project2Left" v-if="conn.selectValue === 'input'">
                      <div class="project2LeftName">
                        <span>单位</span>
                      </div>
                      <el-input placeholder v-model="conn.depart" size="small"></el-input>
                    </div>
                    <div v-if="conn.selectValue === 'radio'">
                      <div
                        class="project2Left"
                        style="flex-direction: column;"
                        v-for="(connn,inddd) in conn.radioList"
                        :key="inddd"
                      >
                        <div style="display: flex;">
                          <div class="project2LeftName">
                            <span style="color: #f00">*</span>
                            <span>备选项</span>
                          </div>
                          <el-input placeholder v-model="conn.radioList[inddd].label" size="small"></el-input>
                          <el-radio
                            @input="()=>radioDefaultSelect(ind, index, indd, inddd)"
                            v-model="conn.radioList[inddd].radioDefault"
                            label="1"
                          >默认</el-radio>
                          <span
                            class="radioAdd"
                            @click="()=>radioAdd(ind, index, indd, conn.selectValue, inddd)"
                          >添加</span>
                          <span
                            class="radioDelete"
                            @click="()=>conn.radioList.length!==1 && radioDelete(ind, index, indd, inddd)"
                            :class="conn.radioList.length===1 ? 'disabled' : ''"
                          >删除</span>
                        </div>
                      </div>
                    </div>
                    <div v-if="conn.selectValue === 'checkbox'">
                      <div
                        class="project2Left"
                        style="flex-direction: column;"
                        v-for="(connn,inddd) in conn.radioList"
                        :key="inddd"
                      >
                        <div style="display: flex;">
                          <div class="project2LeftName">
                            <span style="color: #f00">*</span>
                            <span>备选项</span>
                          </div>
                          <el-input placeholder v-model="conn.radioList[inddd].label" size="small"></el-input>
                          <el-checkbox
                            @change="()=>changeCheckbox(ind, index, indd, 'checkbox', inddd)"
                            v-model="conn.radioList[inddd].radioDefault"
                          >默认</el-checkbox>
                          <el-checkbox
                            @change="()=>changeCheckboxOther(item.radioList[ind].radioDefault, ind, index, indd, inddd)"
                            v-model="conn.radioList[inddd].radioDefaultOther"
                          >与其他项互斥</el-checkbox>
                          <span
                            class="radioAdd"
                            @click="()=>radioAdd(ind, index, indd, 'checkbox', inddd)"
                          >添加</span>
                          <span
                            class="radioDelete"
                            @click="()=>conn.radioList.length!==1 && radioDelete(ind, index, indd, inddd)"
                            :class="conn.radioList.length===1 ? 'disabled' : ''"
                          >删除</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.selectValue === 'fill'">
              <div
                class="project2Left"
                style="flex-direction: column;"
                v-for="(con,ind) in item.radioList"
                :key="ind"
              >
                <div class="bei">
                  <div class="project2LeftName">
                    <span style="color: #f00">*</span>
                    <span>备选项</span>
                  </div>
                  <el-input placeholder v-model="item.radioList[ind].label" size="small"></el-input>
                  <el-checkbox
                    @change="()=>changeCheckbox(ind, index)"
                    v-model="item.radioList[ind].radioDefault"
                  >默认</el-checkbox>
                  <el-checkbox
                    @change="()=>changeCheckboxOther(item.radioList[ind].radioDefault, ind, index)"
                    v-model="item.radioList[ind].radioDefaultOther"
                  >与其他项互斥</el-checkbox>
                  <span class="radioAdd" @click="()=>radioAdd(ind, index, null, 'checkbox')">添加</span>
                  <span
                    class="radioDelete"
                    @click="()=>item.radioList.length!==1 && radioDelete(ind, index)"
                    :class="item.radioList.length===1 ? 'disabled' : ''"
                  >删除</span>
                </div>
              </div>
            </div>
          </div>
          <div class="project3" v-if="!item.isDoing">
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[0].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
            </div>
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[1].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
              <div class="project3LeftDes">
                <el-input
                  :placeholder="item.inputPlaceholderValue"
                  v-model="item.inputDefaultValue"
                  size="small"
                ></el-input>
                <span class="project3LeftDepart">{{item.depart}}</span>
              </div>
            </div>
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[2].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
              <el-input
                :placeholder="item.inputPlaceholderValue"
                v-model="item.inputDefaultValue"
                type="textarea"
                :rows="2"
                size="small"
              ></el-input>
            </div>
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[3].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
              <div class="radioChild">
                <el-radio-group
                  v-model="item.radioListValue"
                  @input="()=>onChangeRadioListValue(ind, index)"
                >
                  <el-radio
                    v-for="(con,ind) in item.radioList"
                    :key="ind"
                    :label="con.label"
                  >{{con.label}}</el-radio>
                </el-radio-group>
                <div v-for="(con,ind) in item.radioList.filter(con=>con.radioDefault)" :key="ind">
                  <div v-for="(conn,indd) in con.child" :key="indd">
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[1].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div class="project3LeftDes">
                        <el-input
                          :placeholder="conn.inputPlaceholderValue"
                          v-model="conn.inputDefaultValue"
                          size="small"
                        ></el-input>
                        <span class="project3LeftDepart">{{conn.depart}}</span>
                      </div>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[2].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div class="project3LeftDes">
                        <el-input
                          :placeholder="conn.inputPlaceholderValue"
                          v-model="conn.inputDefaultValue"
                          type="textarea"
                          :rows="2"
                          size="small"
                        ></el-input>
                      </div>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[3].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div>
                        <el-radio-group
                          v-model="conn.radioListValue"
                          @input="()=>onChangeRadioListValue(ind, index, indd)"
                        >
                          <el-radio
                            v-for="(connn,inddd) in conn.radioList"
                            :key="inddd"
                            :label="connn.label"
                          >{{connn.label}}</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[4].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div>
                        <el-checkbox
                          v-for="(connn,inddd) in conn.radioList"
                          v-model="conn.radioList[inddd].radioDefault"
                          :label="connn.label"
                          @change="()=>changeCheckbox(ind, index, indd, 'checkbox', inddd)"
                          :key="inddd"
                        >{{connn.label}}</el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[4].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
              <div class="radioChild">
                <el-checkbox
                  v-for="(con,ind) in item.radioList"
                  v-model="item.radioList[ind].radioDefault"
                  @change="()=>changeCheckbox(ind, index)"
                  :key="ind"
                >{{con.label}}</el-checkbox>
                <div v-for="(con,ind) in item.radioList.filter(con=>con.radioDefault)" :key="ind">
                  <div v-for="(conn,indd) in con.child" :key="indd">
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[1].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div class="project3LeftDes">
                        <el-input
                          :placeholder="conn.inputPlaceholderValue"
                          v-model="conn.inputDefaultValue"
                          size="small"
                        ></el-input>
                        <span class="project3LeftDepart">{{conn.depart}}</span>
                      </div>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[2].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <el-input
                        :placeholder="conn.inputPlaceholderValue"
                        v-model="conn.inputDefaultValue"
                        type="textarea"
                        :rows="2"
                        size="small"
                      ></el-input>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[3].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div>
                        <el-radio-group
                          v-model="conn.radioListValue"
                          @input="()=>onChangeRadioListValue(ind, index, indd)"
                        >
                          <el-radio
                            v-for="(connn,inddd) in conn.radioList"
                            :key="inddd"
                            :label="connn.label"
                          >{{connn.label}}</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="project3Left" v-if="conn.selectValue === isDoingSelectList[4].type">
                      <span class="project3LeftName">{{conn.inputValue}}</span>
                      <div>
                        <el-checkbox
                          v-for="(connn,inddd) in conn.radioList"
                          :key="inddd"
                          v-model="conn.radioList[inddd].radioDefault"
                          :label="connn.label"
                          @change="()=>changeCheckbox(ind, index, indd, 'checkbox', inddd)"
                        >{{connn.label}}</el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="project3Left" v-if="item.selectValue === isDoingSelectList[5].type">
              <span class="project3LeftName">
                <span style="color: #f00" v-if="item.isReq && item.level === 1">*</span>
                {{item.inputValue}}
              </span>
              <div style="flex-grow: 1">
                <div>
                  <el-checkbox
                    v-for="(con,ind) in item.radioList"
                    :key="ind"
                    v-model="item.radioList[ind].radioDefault"
                    @change="()=>changeCheckbox(ind, index, null, item)"
                  >{{con.label}}</el-checkbox>
                </div>
                <el-select
                  v-model="item.fillValues"
                  multiple
                  :placeholder="item.inputPlaceholderValue"
                  size="small"
                  popper-class="hiddenPopup"
                  @remove-tag="()=>removeTag(index, item)"
                  @change="()=>changeTagValue(index,item)"
                  allow-create
                  filterable
                  default-first-option
                >
                  <el-option
                    v-for="ele in item.radioList"
                    :key="ele.label"
                    :label="ele.label"
                    :value="ele.label"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="project3Left" v-if="item.selectValue === 'upload'">
              <span class="project3LeftName">{{item.label}}</span>
              <div class="imgs">
                <div v-for="(con,ind) in imageUrl" :key="ind" class="imgsLi">
                  <el-image
                    :preview-src-list="imageUrl"
                    style="width:100px;height:100px"
                    :src="con"
                    class="avatar"
                  />
                  <i class="el-icon-error" @click="()=>deleteImgList(ind)"></i>
                </div>
                <el-upload
                  v-if="item.selectValue === 'upload'"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__tip" slot="tip">支持上传jpg/png/jpeg格式文件</div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <div class="action">
          <el-dropdown
            @command="(v) => add(v, index, item)"
            v-if="!item.isDoing  && item.selectValue !== 'upload'"
            trigger="click"
          >
            <span class="add">新建</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="inner">新增下一级项目</el-dropdown-item>
              <el-dropdown-item command="before" v-if="item.level !== 1">在该项目前新增同级项目</el-dropdown-item>
              <el-dropdown-item command="after" v-if="item.level !== 1">在该项目后新增同级项目</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-if="!item.isDoing && item.selectValue !== 'upload'" @click="()=>edit(index)">编辑</span>
          <span
            v-if="!item.isDoing  && item.selectValue !== 'upload'"
            @click="()=>item.level !== 1 && deleteLine(index)"
            :class="item.level === 1 ? 'disabled' : ''"
          >删除</span>
          <span
            v-if="item.isDoing  && item.selectValue !== 'upload'"
            @click="()=>save(item, index)"
          >保存</span>
          <span
            v-if="item.isDoing  && item.selectValue !== 'upload'"
            @click="()=>cancel(index, item)"
          >取消</span>
        </div>
      </li>
    </ul>
    <el-dialog
      top="5vh"
      title="病历模版"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleClose"
    >
      <div class="priview-body">
        <PriviewEdit :editListF="editList"></PriviewEdit>
      </div>
    </el-dialog>
    <el-dialog title="预览提示" :visible.sync="dialogVisibleConfirm" width="30%">
      <span>当前有未保存数据，是否继续预览，预览后未保存数据将清空</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleConfirm = false">取 消</el-button>
        <el-button type="primary" @click="onChangeDialogVisibleConfirm">继 续</el-button>
      </span>
    </el-dialog>
    <!-- <div class="btns">
      <el-button type="primary" @click="saveAll" size="small">提交</el-button>
      <el-button type="primary" @click="seeAll" size="small">预览</el-button>
    </div>-->
  </div>
</template>
<script>
import pageHeader from "@/components/Header.vue";
import PriviewEdit from "./PriviewEdit.vue";
import { fileUpload } from "@/api/upload.js";
import { Message, Popover, Dropdown } from "element-ui";

export default {
  components: {
    pageHeader,
    Message,
    Popover,
    Dropdown,
    PriviewEdit
  },
  created() {
    // this.getUserInfo()
  },
  data() {
    return {
      editList: [
        {
          label: "主诉",
          isReq: true,
          type: "textarea",
          level: 1,
          id: "1",
          child: [],
          selectValue: "textarea",
          inputValue: "主诉",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "现病史",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "2",
          child: [],
          selectValue: "textarea",
          inputValue: "现病史",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "既往史",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "3",
          child: [],
          selectValue: "textarea",
          inputValue: "既往史",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "中医四诊",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "4",
          child: [],
          selectValue: "textarea",
          inputValue: "中医四诊",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "体格检查",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "5",
          child: [],
          selectValue: "textarea",
          inputValue: "体格检查",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "辅助检查",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "6",
          child: [],
          selectValue: "textarea",
          inputValue: "辅助检查",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "报告上传",
          isReq: false,
          type: "upload",
          level: 1,
          id: "7",
          child: [],
          selectValue: "upload",
          inputValue: "",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        }
      ],
      // 模板
      editListInit: [
        {
          label: "主诉",
          isReq: true,
          type: "textarea",
          level: 1,
          id: "1",
          child: [],
          selectValue: "textarea",
          inputValue: "主诉",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "现病史",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "2",
          child: [],
          selectValue: "textarea",
          inputValue: "现病史",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "既往史",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "3",
          child: [],
          selectValue: "textarea",
          inputValue: "既往史",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "中医四诊",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "4",
          child: [],
          selectValue: "textarea",
          inputValue: "中医四诊",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "体格检查",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "5",
          child: [],
          selectValue: "textarea",
          inputValue: "体格检查",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "辅助检查",
          isReq: false,
          type: "textarea",
          level: 1,
          id: "6",
          child: [],
          selectValue: "textarea",
          inputValue: "辅助检查",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        },
        {
          label: "报告上传",
          isReq: false,
          type: "upload",
          level: 1,
          id: "7",
          child: [],
          selectValue: "upload",
          inputValue: "",
          inputDefaultValue: "",
          inputPlaceholderValue: "",
          radioList: [
            {
              label: "",
              radioDefault: false,
              child: []
            }
          ],
          radioListValue: "",
          fillValues: []
        }
      ],
      isDoingSelectList: [
        {
          label: "标题",
          type: "subject"
        },
        {
          label: "单行文本",
          type: "input"
        },
        {
          label: "多行文本",
          type: "textarea"
        },
        {
          label: "单选",
          type: "radio"
        },
        {
          label: "多选",
          type: "checkbox"
        },
        {
          label: "选项填入输入框",
          type: "fill"
        }
      ],
      commonParams: {
        inputValue: "",
        selectValue: "",
        radioList: [
          {
            label: "",
            radioDefault: false,
            child: []
          }
        ],
        radioListValue: "",
        fillValues: []
      },
      dialogVisible: false,
      dialogVisibleConfirm: false,
      imageUrl: []
    };
  },
  methods: {
    async fileUpload(data) {
      let res = await fileUpload(data);
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "上传成功",
          showClose: true
        });
        this.imageUrl.push(
          process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo
        );
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file, "file文件");
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        let formData = new FormData();
        formData.append("file", file);
        this.fileUpload(formData);
      } else {
        this.$message.error("文件类型有误");
      }
      return false;
    },
    deleteImgList(ind) {
      this.imageUrl.splice(ind, 1);
    },
    add(type, index, item) {
      const arr = {
        inputValue: "",
        selectValue: "",
        radioList: [
          {
            label: "",
            radioDefault: false,
            child: []
          }
        ],
        radioListValue: "",
        fillValues: []
      };
      const { id, level, father, countId } = item;
      const callback = v => {
        let count = 0;
        let countTemplate = 0;
        this.editList.forEach(ele => {
          if (ele.father === v) {
            count += 1;
            ele.id = `${v}-${count}`;
            ele.countId = count;
          }
        });
        this.editListInit.forEach(ele => {
          if (ele.father === v) {
            countTemplate += 1;
            ele.id = `${v}-${countTemplate}`;
            ele.countId = countTemplate;
          }
        });
      };
      if (type === "inner") {
        this.editList.splice(index + 1, 0, {
          isDoing: true,
          level: level + 1,
          father: id,
          id: `${id}-1`,
          countId: 1,
          ...arr
        });
        this.editListInit.splice(index + 1, 0, {
          isDoing: true,
          level: level + 1,
          father: id,
          id: `${id}-1`,
          countId: 1,
          ...arr
        });
        callback(id);
      } else if (type === "before") {
        this.editList.splice(index, 0, {
          isDoing: true,
          level: level,
          father,
          id: `${father}-${countId}`,
          countId,
          ...arr
        });
        this.editListInit.splice(index, 0, {
          isDoing: true,
          level: level,
          father,
          id: `${father}-${countId}`,
          countId,
          ...arr
        });
        callback(father);
      } else {
        this.editList.splice(index + 1, 0, {
          isDoing: true,
          level: level,
          father,
          id: `${father}-${countId + 1}`,
          countId: countId + 1,
          ...arr
        });
        this.editListInit.splice(index + 1, 0, {
          isDoing: true,
          level: level,
          father,
          id: `${father}-${countId + 1}`,
          countId: countId + 1,
          ...arr
        });
        callback(father);
      }
    },
    getInitFrom(index, arr) {
      // 从表象获取模版
      const arrNew = [...this.editListInit];
      arrNew.forEach((ele, ind) => {
        if (ind === index) {
          // ele = this.editList[index]
          ele.fillValues = arr[index].fillValues || [];
          ele.inputDefaultValue = arr[index].inputDefaultValue;
          ele.inputPlaceholderValue = arr[index].inputPlaceholderValue;
          ele.inputValue = arr[index].inputValue;
          ele.radioList = JSON.parse(
            JSON.stringify(arr[index].radioList || [])
          );
          ele.radioListValue = arr[index].radioListValue || "";
          ele.isReq = arr[index].isReq;
          ele.selectValue = arr[index].selectValue;
          ele.isEditing = arr[index].isEditing;
          ele.isDoing = arr[index].isDoing;
        }
      });
      this.editListInit = arrNew;
    },
    getFromInit(index, arr) {
      // 从模版获取表象
      const arrNew = [...this.editList];
      arrNew.forEach((ele, ind) => {
        if (ind === index) {
          ele.fillValues = arr[index].fillValues || [];
          ele.inputDefaultValue = arr[index].inputDefaultValue;
          ele.inputPlaceholderValue = arr[index].inputPlaceholderValue;
          ele.inputValue = arr[index].inputValue;
          ele.radioList = JSON.parse(
            JSON.stringify(arr[index].radioList || [])
          );
          ele.radioListValue = arr[index].radioListValue || "";
          ele.isReq = arr[index].isReq;
          ele.selectValue = arr[index].selectValue;
          ele.isEditing = true;
          ele.isDoing = true;
        }
      });
      this.editList = arrNew;
    },
    save(v, index) {
      if (!v.inputValue || v.inputValue.trim() === "") {
        this.$message.error("项目名称不能为空");
        return;
      } else if (!v.selectValue || v.selectValue.trim() === "") {
        this.$message.error("备选项形式不能为空");
        return;
      } else if (
        v.selectValue === "radio" ||
        v.selectValue === "checkbox" ||
        v.selectValue === "fill"
      ) {
        let flag = false;
        let flagChild = false;
        v.radioList.forEach(ele => {
          if (ele.label.trim() === "") {
            flag = true;
          }
          if (ele.child) {
            ele.child.forEach(con => {
              if (
                !con.inputValue ||
                con.inputValue.trim() === "" ||
                !con.selectValue ||
                con.selectValue.trim() === ""
              ) {
                flagChild = true;
              }
              if (
                con.selectValue === "radio" ||
                con.selectValue === "checkbox"
              ) {
                con.radioList.forEach(conn => {
                  if (conn.label.trim() === "") {
                    flagChild = true;
                  }
                });
              }
            });
          }
        });
        if (flag) {
          this.$message.error("备选项不能为空");
          return;
        }
        if (flagChild) {
          this.$message.error("子备选项不能为空");
          return;
        }
      }
      const arr = JSON.parse(JSON.stringify([...this.editList]));
      arr.forEach(ele => {
        if (ele.id === v.id) {
          ele.isDoing = false;
          ele.isEditing = false;
          if (v.selectValue === "radio") {
            ele.radioListValue =
              ele.radioList.filter(con => con.radioDefault === "1").length > 0
                ? ele.radioList.filter(con => con.radioDefault === "1")[0].label
                : "";
            ele.radioList.forEach(con => {
              if (con.child && con.child.length > 0) {
                con.child.forEach(conn => {
                  if (conn.selectValue === "radio") {
                    conn.radioListValue =
                      conn.radioList.filter(con => con.radioDefault === "1")
                        .length > 0
                        ? conn.radioList.filter(
                            con => con.radioDefault === "1"
                          )[0].label
                        : "";
                  }
                });
              }
            });
          }
          if (v.selectValue === "checkbox") {
            ele.radioList.forEach(con => {
              if (con.child && con.child.length > 0) {
                con.child.forEach(conn => {
                  if (conn.selectValue === "radio") {
                    conn.radioListValue =
                      conn.radioList.filter(con => con.radioDefault === "1")
                        .length > 0
                        ? conn.radioList.filter(
                            con => con.radioDefault === "1"
                          )[0].label
                        : "";
                  }
                });
              }
            });
          }
          if (v.selectValue === "fill") {
            ele.fillValues = ele.radioList
              .filter(ele => ele.radioDefault)
              .map(ele => ele.label);
          }
        }
      });
      // 赋值模板
      this.getInitFrom(index, arr);
      this.editList = arr;
    },
    cancel(index, item) {
      if (item.isEditing) {
        const arr = JSON.parse(JSON.stringify([...this.editListInit]));
        const arrOld = JSON.parse(JSON.stringify([...this.editList]));
        arrOld.forEach((ele, ind) => {
          if (ind === index) {
            ele.fillValues = arr[index].fillValues || [];
            ele.inputDefaultValue = arr[index].inputDefaultValue;
            ele.inputPlaceholderValue = arr[index].inputPlaceholderValue;
            ele.inputValue = arr[index].inputValue;
            ele.radioList = JSON.parse(
              JSON.stringify(arr[index].radioList || [])
            );
            ele.radioListValue = arr[index].radioListValue || "";
            ele.isReq = arr[index].isReq;
            ele.selectValue = arr[index].selectValue;
            ele.isEditing = false;
            ele.isDoing = false;
          }
        });
        this.editList = [...arrOld];
      } else {
        this.editList.splice(index, 1);
        this.editListInit.splice(index, 1);
      }
    },
    deleteLine(index) {
      this.editList.splice(index, 1);
      this.editListInit.splice(index, 1);
    },
    edit(index) {
      // 赋值表面模板
      const arr = JSON.parse(JSON.stringify([...this.editListInit]));
      this.getFromInit(index, arr);
    },
    onChangeDownTemplate(index, end, endMore) {
      const deleteList = this.editListInit.filter((ele, ind) =>
        endMore === 0 ? ind >= end : ind >= end && ind < endMore
      ); // 需要前置的项
      const arr = [];
      this.editListInit.forEach((ele, ind) => {
        if (ind < end || (endMore !== 0 && ind >= endMore)) {
          arr.push(ele);
        }
      });
      arr.splice(index, 0, ...deleteList);
      this.editListInit = arr;
    },
    down(index, item) {
      let end = 0;
      this.editList.forEach((ele, ind) => {
        if (
          ind > index &&
          ele.level === item.level &&
          end === 0 &&
          ele.father === item.father
        ) {
          end = ind;
        }
      });
      let endMore = 0;
      this.editList.forEach((ele, ind) => {
        if (
          ind > end &&
          ele.level === item.level &&
          endMore === 0 &&
          ele.father === item.father
        ) {
          endMore = ind;
        }
      });
      if (endMore === 0) {
        this.editList.forEach((ele, ind) => {
          if (ind > end && endMore === 0 && ele.level < item.level) {
            endMore = ind;
          }
        });
      }
      const deleteList = this.editList.filter((ele, ind) =>
        endMore === 0 ? ind >= end : ind >= end && ind < endMore
      ); // 需要前置的项
      const arr = [];
      this.editList.forEach((ele, ind) => {
        if (ind < end || (endMore !== 0 && ind >= endMore)) {
          arr.push(ele);
        }
      });
      arr.splice(index, 0, ...deleteList);
      this.editList = arr;
      this.onChangeDownTemplate(index, end, endMore);
    },
    onChangeUpTemplate(index, end, endMore) {
      const deleteList = this.editListInit.filter((ele, ind) =>
        endMore === 0 ? ind >= index : ind >= index && ind < endMore
      ); // 需要前置的项
      const arr = [];
      this.editListInit.forEach((ele, ind) => {
        if (ind < index || (endMore !== 0 && ind >= endMore)) {
          arr.push(ele);
        }
      });
      arr.splice(end, 0, ...deleteList);
      this.editListInit = arr;
    },
    up(index, item) {
      let end = 0;
      this.editList.forEach((ele, ind) => {
        if (
          ind < index &&
          ele.level === item.level &&
          ele.father === item.father
        ) {
          end = ind;
        }
      });
      let endMore = 0;
      this.editList.forEach((ele, ind) => {
        if (
          ind > index &&
          ele.level === item.level &&
          endMore === 0 &&
          ele.father === item.father
        ) {
          endMore = ind;
        }
      });
      if (endMore === 0) {
        this.editList.forEach((ele, ind) => {
          if (ind > index && endMore === 0 && ele.level < item.level) {
            endMore = ind;
          }
        });
      }
      const deleteList = this.editList.filter((ele, ind) =>
        endMore === 0 ? ind >= index : ind >= index && ind < endMore
      ); // 需要前置的项
      const arr = [];
      this.editList.forEach((ele, ind) => {
        if (ind < index || (endMore !== 0 && ind >= endMore)) {
          arr.push(ele);
        }
      });
      arr.splice(end, 0, ...deleteList);
      this.editList = arr;
      this.onChangeUpTemplate(index, end, endMore);
    },
    radioAdd(ind, index, indd, type, inddd) {
      const commonParams = {
        label: "",
        child: [],
        radioDefault: type === "checkbox" ? false : "",
        radioList: [
          {
            label: "",
            radioDefault: false,
            child: []
          }
        ],
        radioListValue: ""
      };
      if (inddd || inddd === 0) {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.forEach((conn, indxxx) => {
                  if (indxxx === indd) {
                    conn.radioList.splice(inddd + 1, 0, {
                      ...commonParams
                    });
                  }
                });
              }
            });
          }
        });
      } else if (indd || indd === 0) {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.splice(indd + 1, 0, {
                  ...commonParams
                });
              }
            });
          }
        });
      } else {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.splice(ind + 1, 0, {
              ...commonParams
            });
          }
        });
      }
    },
    radioAddChild(ind, index) {
      this.editList.forEach((ele, indx) => {
        if (indx === index) {
          ele.radioList.forEach((con, indd) => {
            if (indd === ind) {
              // const arr = {...this.commonParams}
              con.child.unshift({
                inputValue: "",
                selectValue: "",
                radioList: [
                  {
                    label: "",
                    radioDefault: false,
                    child: []
                  }
                ],
                fillValues: []
              });
            }
          });
        }
      });
    },
    radioDelete(ind, index, indd, inddd) {
      if (inddd || inddd === 0) {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.forEach((conn, indxxx) => {
                  if (indxxx === indd) {
                    conn.radioList.splice(inddd, 1);
                  }
                });
              }
            });
          }
        });
      } else if (indd || indd === 0) {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.splice(indd, 1);
              }
            });
          }
        });
      } else {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.splice(ind, 1);
          }
        });
      }
    },
    radioDefaultSelect(ind, index, indd, inddd) {
      if (inddd || inddd === 0) {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.forEach((conn, indxxx) => {
                  if (indxxx === indd) {
                    conn.radioList.forEach((connn, indxxxx) => {
                      if (indxxxx !== inddd) {
                        connn.radioDefault = "";
                      }
                    });
                  }
                });
              }
            });
          }
        });
      } else {
        this.editList.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, inde) => {
              if (inde !== ind) {
                con.radioDefault = "";
              }
            });
          }
        });
      }
    },
    changeCheckbox(ind, index, indd, item, inddd) {
      const arr = JSON.parse(JSON.stringify([...this.editList]));
      if (indd || indd === 0) {
        const flag = this.editList
          .filter((ele, indx) => indx === index)[0]
          .radioList.filter((ele, indx) => indx === ind)[0]
          .child.filter((ele, indx) => indx === indd)[0]
          .radioList.filter((ele, indxx) => indxx === inddd)[0]
          .radioDefaultOther;
        arr.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.forEach((conn, indxxx) => {
                  conn.radioList.forEach((connn, indxxxx) => {
                    if (indxxxx !== inddd && flag) {
                      connn.radioDefault = false;
                    } else if (indxxxx !== inddd && !flag) {
                      connn.radioDefaultOther
                        ? (connn.radioDefault = false)
                        : null;
                    }
                  });
                });
              }
            });
          }
        });
        this.editList = arr;
      } else {
        const flag = this.editList
          .filter((ele, indx) => indx === index)[0]
          .radioList.filter((ele, indx) => indx === ind)[0].radioDefaultOther;
        arr.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx !== ind && flag) {
                con.radioDefault = false;
              } else if (indxx !== ind && !flag) {
                con.radioDefaultOther ? (con.radioDefault = false) : null;
              }
            });
          }
        });
        if (item && item.selectValue === "fill") {
          arr.forEach((ele, indx) => {
            if (indx === index) {
              let labels = ele.radioList.map(elee => {
                return elee.label;
              });
              let valuesSave = JSON.parse(JSON.stringify(ele.fillValues));
              let inputArr = valuesSave.filter(ele1 => {
                return !labels.includes(ele1) ? ele1 : "";
              });
              let arr = ele.radioList
                .filter(ele => ele.radioDefault)
                .map(ele => ele.label);
              let arr1 = new Set([...arr, ...inputArr]);
              ele.fillValues = Array.from(arr1);
            }
          });
        }
        this.editList = arr;
      }
    },

    changeCheckboxOther(v, ind, index, indd, inddd) {
      if (!v) {
        return;
      }
      this.changeCheckbox(ind, index, indd, null, inddd);
    },
    onChangeRadioListValue(ind, index, indd) {
      const arr = JSON.parse(JSON.stringify([...this.editList]));
      if (indd || indd === 0) {
        const radioListValue = this.editList
          .filter((ele, indx) => indx === index)[0]
          .radioList.filter((ele, indx) => indx === ind)[0]
          .child.filter((ele, indx) => indx === indd)[0].radioListValue;
        arr.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (indxx === ind) {
                con.child.forEach((conn, indxxx) => {
                  if (indxxx === indd) {
                    conn.radioList.forEach(connn => {
                      if (radioListValue === connn.label) {
                        connn.radioDefault = "1";
                      } else {
                        connn.radioDefault = "";
                      }
                    });
                  }
                });
              }
            });
          }
        });
        this.editList = arr;
      } else {
        const radioListValue = this.editList.filter(
          (ele, indx) => indx === index
        )[0].radioListValue;
        arr.forEach((ele, indx) => {
          if (indx === index) {
            ele.radioList.forEach((con, indxx) => {
              if (radioListValue === con.label) {
                con.radioDefault = "1";
              } else {
                con.radioDefault = "";
              }
            });
          }
        });
        this.editList = arr;
      }
    },
    removeTag(index, item) {
      this.editList.forEach((ele, ind) => {
        if (ind === index) {
          ele.radioList.forEach(con => {
            if (item.fillValues.includes(con.label)) {
              con.radioDefault = true;
            } else {
              con.radioDefault = false;
            }
          });
        }
      });
    },
    changeTagValue(index, item) {
      this.editList.forEach((ele, ind) => {
        if (ind === index) {
          ele.radioList.forEach(con => {
            if (item.fillValues.includes(con.label)) {
              con.radioDefault = true;
            } else {
              con.radioDefault = false;
            }
          });
        }
      });
    },
    isHasDown(index, item) {
      if (item.level === 1) return false;
      let endMore = -1;
      this.editList.forEach((ele, ind) => {
        if (
          ind > index &&
          ele.level === item.level &&
          ele.father === item.father
        ) {
          endMore = ind;
        }
      });
      return endMore !== -1;
    },
    isHasUp(index, item) {
      if (item.level === 1) return false;
      let end = -1;
      this.editList.forEach((ele, ind) => {
        if (
          ind < index &&
          ele.level === item.level &&
          ele.father === item.father
        ) {
          end = ind;
        }
      });
      return end !== -1;
    },
    getLeftWidth(level) {
      return (level - 1) * 40 + "px";
    },
    saveAll() {
      this.$message.success(`提交信息：${JSON.stringify(this.editListInit)}`);
    },
    onChangeDialogVisibleConfirm() {
      this.dialogVisibleConfirm = false;
      this.editList = JSON.parse(JSON.stringify([...this.editListInit]));
      const arr = [];
      this.editList.forEach(ele => {
        if (!ele.isDoing || (ele.isDoing && ele.isEditing)) {
          arr.push(ele);
        }
      });
      this.editList = JSON.parse(JSON.stringify([...arr]));
      this.editListInit = JSON.parse(JSON.stringify([...arr]));
      this.dialogVisible = true;
    },
    seeAll() {
      let flag = false;
      this.editList.forEach(ele => {
        if (ele.isDoing) {
          flag = true;
        }
      });
      this.imageUrl = [];
      if (flag) {
        this.dialogVisibleConfirm = true;
      } else {
        this.editList = JSON.parse(JSON.stringify([...this.editListInit]));
        const arr = [];
        this.editList.forEach(ele => {
          if (!ele.isDoing || (ele.isDoing && ele.isEditing)) {
            arr.push(ele);
          }
        });
        this.editList = arr;
        this.dialogVisible = true;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.priview-body {
}

.page-index ::v-deep .el-dialog {
  margin: 0 auto;
  height: 90vh;
  overflow: auto;
}

.page-index ::v-deep .el-dialog__header {
  padding: 10px;
}
.page-index ::v-deep .el-dialog__body {
  padding: 10px 10px;

  height: 90%;
  overflow: auto;
  box-sizing: border-box;
}

.page-index {
  width: 1200px;
  line-height: 32px;
  background-color: #fff;
  margin: auto;

  > ul {
    > li {
      display: flex;
      padding: 10px;

      > div {
        margin: 0 5px;
      }

      .ind {
        width: 40px;
        text-align: center;
      }

      .level {
        width: 40px;
        text-align: center;
      }

      .order {
        width: 40px;
        text-align: center;

        i {
          cursor: pointer;
        }
      }

      .isReq {
        width: 40px;
        text-align: center;
      }

      .project {
        flex-grow: 1;
        display: flex;

        .project1 {
          display: inline-flex;
          width: 100%;

          .projectLabel {
            width: 70px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
          }

          .projectType {
            flex-grow: 1;
          }
        }

        .project2 {
          width: 100%;

          .project2Left {
            display: flex;
            margin-bottom: 5px;

            .project2LeftName {
              width: 100px;
              text-align: right;
              padding-right: 10px;
            }

            .radioAdd {
              margin-left: 10px;
              cursor: pointer;

              &:hover {
                color: #5386f6;
              }
            }

            .radioAddChild {
              margin-left: 10px;
              cursor: pointer;

              &:hover {
                color: #5386f6;
              }
            }

            .radioDelete {
              margin-left: 10px;
              cursor: pointer;

              &:hover {
                color: #5386f6;
              }
            }

            .bei {
              display: flex;

              .el-checkbox {
                margin-left: 5px;
              }
            }

            .childBei {
              margin-top: 5px;
              margin-left: 80px;
              border: 1px solid #ccc;

              .el-checkbox {
                margin-left: 5px;
              }

              .project2LeftName {
                width: 105px;
              }
            }

            .el-input {
              width: 200px;
            }

            .el-select {
              width: 200px;
            }

            .el-checkbox {
              display: inline-flex;
              align-items: center;
              margin-right: 5px;
            }

            .el-radio {
              margin: 0 5px;
              align-items: center;
              display: inline-flex;
            }
          }
        }

        .project3 {
          width: 100%;

          .project3Left {
            display: flex;

            .project3LeftName {
              flex-shrink: 0;
              width: 100px;
              text-align: right;
              padding-right: 10px;
            }

            .radioChild {
              flex-grow: 1;

              .project3LeftName {
                width: auto;
              }

              .project3Left {
                margin: 3px 0;
              }
            }

            .project3LeftDes {
              flex-grow: 1;
              display: flex;
              // .el-input {
              //   width: 200px;
              // }
              // .el-textarea {
              //   width: 200px;
              // }
            }

            .project3LeftDepart {
              flex-shrink: 0;
              margin-left: 3px;
            }

            .el-radio-group {
              display: inline-flex;
              align-items: center;

              .el-radio {
                margin-left: 10px;
                margin-right: 0;
              }
            }

            .el-checkbox {
              margin-left: 0;
              margin-right: 10px;
            }

            .el-select {
              width: 100%;
            }
          }
        }
      }

      .action {
        width: 130px;

        span {
          margin: 0 5px;
          cursor: pointer;

          &:hover {
            color: #5386f6;
          }
        }

        .add {
          color: #2c3e50;
          font-size: 16px;
        }
      }
    }
  }

  .disabled {
    color: #c0c4cc;
    cursor: not-allowed !important;

    &:hover {
      color: #c0c4cc !important;
    }
  }

  .btns {
    text-align: center;
    margin: 20px 0;
  }
}
</style>
<style lang="scss">
.hiddenPopup {
  display: none;
}

.project3Left .el-input__suffix {
  display: none !important;
}

.preview {
  width: 100% !important;

  .projectLabel {
    width: unset !important;
  }

  .project3LeftName {
    width: unset !important;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}

.avatar-uploader .el-upload__tip {
  margin-top: 0;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.imgs {
  display: flex;
}

.imgsLi {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.el-icon-error {
  cursor: pointer;
  position: absolute;
  right: -8px;
  top: -8px;
}
</style>