| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529 | <template>  <div class="m-container">    <h2>      <el-page-header @back="onCancel" :content="title"></el-page-header>      <!-- <div class="squrt" /> -->    </h2>    <div class="m-core">      <div class="vipLeft">        <el-alert          title="课程信息"          type="info"          :closable="false"          class="vipMsg"        ></el-alert>        <el-form          ref="leftForm"          :inline="true"          :rules="leftFormRules"          :label-position="labelPosition"          label-width="110px"          :model="leftForm"        >          <!-- <el-form-item label="课程名称" prop="name">            <el-input v-model.trim="leftForm.name" />          </el-form-item> -->          <!--  :disabled="!leftForm.teacher || !leftForm.educationalTeacherId" -->          <el-form-item label="课程分部" prop="classOrganId">            <el-select              v-model.trim="leftForm.classOrganId"              filterable              clearable              @change="onClassChange"            >              <el-option                v-for="(item, index) in selects.branchs"                :key="index"                :label="item.name"                :value="item.id"              />            </el-select>          </el-form-item>          <el-form-item label="科目名称" prop="subject">            <el-select              v-model.trim="leftForm.subject"              filterable              clearable              @change="changeSubject"              :disabled="!leftForm.classOrganId"            >              <el-option                v-for="(item, index) in subjectList"                :key="index"                :value="item.id"                :label="item.name"              />            </el-select>          </el-form-item>          <!--       -->          <el-form-item label="指导老师" prop="teacher">            <el-select              v-model.trim="leftForm.teacher"              filterable              clearable              :disabled="!leftForm.subject"              @change="setSection($event)"            >              <el-option                v-for="(item, index) in teacherList"                :key="index"                :label="item.realName"                :value="item.id"              />            </el-select>          </el-form-item>          <!--    @change="getClassOrgan()" -->          <el-form-item label="乐团主管" prop="educationalTeacherId">            <el-select              v-model.trim="leftForm.educationalTeacherId"              filterable              clearable              :disabled="!leftForm.subject"            >              <el-option                v-for="(item, key) in educationList"                :key="key"                :label="item.userName"                :value="item.userId"              />            </el-select>          </el-form-item>          <el-form-item label="课程形式" prop="courseType" v-if="!courseType">            <el-select              v-model.trim="leftForm.courseType"              clearable              filterable              :disabled="!leftForm.classOrganId || !leftForm.teacher"              @change="changeType"            >              <el-option                v-for="(item, index) in courseTypeList"                :key="index"                :label="item.name"                :value="item.id"              />            </el-select>          </el-form-item>          <el-form-item label="教学点" v-if="!courseType">            <el-select              v-model.trim="leftForm.section"              filterable              clearable              :disabled="!leftForm.teacher"            >              <el-option                v-for="(item, index) in scetionList"                :key="index"                :value="item.id"                :label="item.name"              />            </el-select>          </el-form-item>          <el-form-item label="上课学员" prop="students" v-if="!courseType">            <el-select              v-model.trim="leftForm.students"              collapse-tags              multiple              clearable              placeholder="请输入上课学员"              remote              @change="changeStudent"              filterable              :multiple-limit="studentLimit"              :disabled="!leftForm.classOrganId || !leftForm.courseType"              :remote-method="remoteMethod"              :loading="remoteLoading"            >              <el-option                v-for="item in studentList"                :key="item.userId"                :label="item.username"                :value="item.userId"              >                <span style="float: left">{{ item.username }}</span>                <span style="float: right; color: #8492a6; font-size: 13px">{{                  item.parentsPhone                }}</span>              </el-option>            </el-select>          </el-form-item>          <el-form-item label="上课学员" prop="students" v-else>            <el-select              v-model.trim="leftForm.students"              collapse-tags              clearable              placeholder="请输入上课学员"              remote              @change="changeStudentP"              filterable              :multiple-limit="studentLimit"              :disabled="!leftForm.classOrganId"              :remote-method="remoteMethod"              :loading="remoteLoading"            >              <el-option                v-for="item in studentList"                :key="item.userId"                :label="item.username"                :value="item.userId"              >                <span style="float: left">{{ item.username }}</span>                <span style="float: right; color: #8492a6; font-size: 13px">{{                  item.parentsPhone                }}</span>              </el-option>            </el-select>          </el-form-item>          <el-form-item label="活动方案" prop="activeType" v-if="courseType">            <el-select              v-model.trim="leftForm.activeType"              filterable              clearable              :disabled="                !leftForm.students ||                  (leftForm.students && leftForm.students.length <= 0)              "              @change="chioseActive"            >              <el-option                v-for="(item, index) in activeList"                :key="index"                :value="item.id"                :label="item.name"              />            </el-select>          </el-form-item>          <el-form-item label="活动方案" prop="activeType" v-else>            <el-select              v-model.trim="leftForm.activeType"              filterable              clearable              :disabled="                !leftForm.courseType ||                  !leftForm.students ||                  (leftForm.students && leftForm.students.length <= 0)              "              @change="chioseActive"            >              <el-option                v-for="(item, index) in activeList"                :key="index"                :value="item.id"                :label="item.name"              />            </el-select>          </el-form-item>          <el-form-item label="每课时长" prop="classTime">            <el-select              @change="                () => {                  computationalBtn = false;                }              "              v-model.trim="leftForm.classTime"              :disabled="timeTable.length > 0 || classTimeDis"            >              <el-option                v-for="(item, index) in this.classTimeList"                :key="index"                :value="item"                :label="item"              ></el-option>            </el-select>          </el-form-item>          <el-form-item label="报名开始时间" prop="signUpStart">            <!-- @change="changeStartTime" -->            <el-date-picker              v-model.trim="leftForm.signUpStart"              type="date"              :picker-options="pickerOptions"              value-format="yyyy-MM-dd HH:mm:ss"              placeholder="请选择时间"            />            <!-- <el-date-picker              v-model="leftForm.signTimer"              type="daterange"              range-separator="至"              start-placeholder="开始日期"              end-placeholder="结束日期"            >            </el-date-picker> -->          </el-form-item>          <el-form-item label="报名结束时间" prop="signUpEnd">            <el-date-picker              v-model.trim="leftForm.signUpEnd"              type="date"              :picker-options="pickerOptions1"              value-format="yyyy-MM-dd HH:mm:ss"              placeholder="请选择时间"            />          </el-form-item>        </el-form>      </div>      <div class="center">        <el-alert          title="排课设置"          type="info"          :closable="false"          class="vipMsg"        ></el-alert>        <p class="submitP" v-if="minCourseNum > 0 && maxCourseNum > 0">          该活动最小课时数:<span style="color: red">{{ minCourseNum }}</span          >节 最大课时数:<span style="color: red">{{ maxCourseNum }}</span          >节        </p>        <el-form          :inline="true"          :model="centerForm"          label-width="100px"          :label-position="labelPosition"        >          <el-form-item v-if="leftForm.courseStart" label="最早排课时间">            <el-date-picker              v-model.trim="leftForm.courseStart"              disabled              type="date"              value-format="yyyy-MM-dd HH:mm:ss"              placeholder="请选择时间"            />          </el-form-item>          <el-form-item v-if="leftForm.courseEnd" label="最晚排课时间">            <el-date-picker              v-model.trim="leftForm.courseEnd"              disabled              type="date"              value-format="yyyy-MM-dd HH:mm:ss"              placeholder="请选择时间"            />          </el-form-item>          <el-form-item v-if="hasOnline" label="线上课数">            <el-input              :disabled="studentLimit > studentRuleNum"              v-model.trim="centerForm.onlineCourseNum"              @mousewheel.native.prevent              @input="onCourseNumChange('online')"              type="number"            >              <template slot="append"                >节</template              >            </el-input>          </el-form-item>          <el-form-item v-if="hasOffline" label="线下课数">            <el-input              v-model.trim="centerForm.offlineCourseNum"              @mousewheel.native.prevent              @input="onCourseNumChange('offline')"              type="number"            >              <template slot="append"                >节</template              >            </el-input>          </el-form-item>          <el-form-item label="待排课数">            <el-input v-model.trim="allCourseCount" disabled>              <template slot="append"                >节</template              >            </el-input>          </el-form-item>          <!-- <el-form-item            v-if="hotType == 'GIVE_CLASS' && isGiveClass"            label="赠课课程类型"          >            <el-radio v-model.trim="centerForm.radio" label="ONLINE"              >线上课</el-radio            >            <el-radio v-model.trim="centerForm.radio" label="OFFLINE"              >线下课</el-radio            >          </el-form-item> -->          <el-form-item label="">            <el-button type="danger" @click="setCourse">点击排课</el-button>          </el-form-item>        </el-form>        <!-- 排课列表开始 planList-->        <div class="">          <!-- <div class="planTop">            <p>已排课程</p>            <el-button type="text" @click="setCourse">{{              id ? "新增排课" : "点击排课"            }}</el-button>          </div> -->          <!-- <div class="planCore"> -->          <el-table            style="width: 100%"            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"            :data="timeTable"          >            <el-table-column align="center" prop="studentId" label="课程时间">              <template slot-scope="scope">                <div>{{ scope.row.classDate | formatTimer }}</div>              </template>            </el-table-column>            <el-table-column              align="center"              prop="studentId"              label="课程开始时间"            >              <template slot-scope="scope">                <div>{{ scope.row.startClassTimeStr }}</div>              </template>            </el-table-column>            <el-table-column              align="center"              prop="studentId"              label="课程结束时间"            >              <template slot-scope="scope">                <div>{{ scope.row.endClassTimeStr }}</div>              </template>            </el-table-column>            <el-table-column align="center" prop="studentId" label="课程类型">              <template slot-scope="scope">                <div>{{ scope.row.teachMode | teachMode }}</div>              </template>            </el-table-column>          </el-table>          <!-- <div class="row">              <div class="name">时间</div>              <div class="week">开始时间</div>              <div class="time">结束时间</div>              <div class="time">课程类型</div>            </div> -->          <!-- <div              v-for="(item, index) in this.timeTable"              :key="index"              class="row"            >              <div class="name">{{ item.classDate | formatTimer }}</div>              <div class="week">{{ item.startClassTimeStr }}</div>              <div class="time">{{ item.endClassTimeStr }}</div>              <div class="time">{{ item.teachMode | teachMode }}</div>            </div> -->          <!-- </div> -->        </div>      </div>      <div class="right">        <el-alert          title="课酬&缴费设置"          type="info"          :closable="false"          class="vipMsg"        ></el-alert>        <el-form          :model="rightForm"          label-width="100px"          :label-position="labelPosition"          :inline="true"        >          <el-form-item label="折扣">            <el-input v-model.trim="rightForm.discount" disabled>              <template slot="append"                >%</template              >            </el-input>          </el-form-item>          <el-form-item v-if="courseType == 'PRACTICE'" label="网管课酬">            <el-input v-model.trim="rightForm.onlineCourse" :disabled="true">              <template slot="append" v-if="!isMusicTheory"                >元/节</template              >              <template slot="append" v-else                >元/人</template              >            </el-input>            <!--  || onlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->          </el-form-item>          <el-form-item v-else label="VIP课课酬">            <el-input v-model.trim="rightForm.offlineCourse" :disabled="true">              <template slot="append" v-if="!isMusicTheory"                >元/节</template              >              <template slot="append" v-else                >元/人</template              >            </el-input>            <!--  || offlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->          </el-form-item>          <!-- <el-form-item v-if="hasOnline" label="线上课单价">            <el-input              v-model.trim="rightForm.onlinePrice"              :disabled="paymentReadonlyFlag == 0"            />          </el-form-item>          <el-form-item v-if="hasOffline" label="线下课单价">            <el-input              v-model.trim="rightForm.offlinePrice"              :disabled="paymentReadonlyFlag == 0"            />          </el-form-item> -->          <!-- <el-form-item label="课程总价">            <el-input v-model.trim="rightForm.allPrice" disabled />          </el-form-item> -->        </el-form>        <div style="width: 700px; clear: both">          <el-table            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"            :data="activeStudentList"          >            <el-table-column align="center" prop="studentId" label="学员编号">            </el-table-column>            <el-table-column align="center" prop="userName" label="学员名称">            </el-table-column>            <el-table-column              align="center"              prop="studentId"              v-if="hasOnline && !fixedCourseNumFlag"              label="线上课单价"            >              <template slot-scope="scope">                <el-input-number                  :disabled="true"                  @change="changeStudentMoney"                  style="width: 90% !important"                  class="number-input"                  v-model="scope.row.onlineClassesUnitPrice"                  :controls="false"                  :min="0"                  placeholder="线上课单价"                />              </template>            </el-table-column>            <el-table-column              align="center"              prop="studentId"              v-if="hasOffline && !fixedCourseNumFlag"              label="线下课单价"            >              <template slot-scope="scope">                <el-input-number                  @change="changeStudentMoney"                  style="width: 90% !important"                  class="number-input"                  :disabled="true"                  v-model="scope.row.offlineClassesUnitPrice"                  :controls="false"                  :min="0"                  placeholder="线下课单价"                />              </template>            </el-table-column>            <el-table-column align="center" prop="studentId" label="">              <template slot="header" slot-scope="slot">                <div class="titleCell">                  <span>缴费总额</span>                  <el-tooltip placement="top" popper-class="mTooltip">                    <div slot="content">                      (线上课单价*课时数+线下课单价*课时数)*折扣后向上取整                    </div>                    <i                      class="el-icon-question micon el-tooltip"                      style="                        font-size: 18px;                        color: #f56c6c;                        top: 2px;                        position: relative;                      "                    ></i>                  </el-tooltip>                </div>              </template>              <template slot-scope="scope">                <el-input-number                  style="width: 90% !important"                  class="number-input"                  v-model="scope.row.paymentPrice"                  :controls="false"                  :min="0"                  :disabled="true"                  placeholder="缴费总额"                />              </template>            </el-table-column>          </el-table>          <!--  class="computeMoney"  -->          <div style="overflow: hidden">            <el-button              type="primary"              class="computeMoney"              @click="computational"              >计算</el-button            >          </div>        </div>      </div>      <div class="btnWrap">        <div class="okBtn" @click="submitInfo">{{ id ? "修改" : "确定" }}</div>        <div          class="okBtn"          style="background-color: var(--color-primary)"          @click="resetFrom"        >          重置        </div>      </div>    </div>    <!-- 弹窗 -->    <el-dialog      title="排课"      ref="maskForm"      width="500px"      v-if="dialogFormVisible"      :visible.sync="dialogFormVisible"    >      <el-form :model="maskForm" label-position="right" label-width="150px">        <el-form-item label="开课时间">          <!-- :picker-options="pickerOptions" -->          <el-date-picker            v-model.trim="maskForm.courseStartOnline"            type="date"            :picker-options="courseOption"            placeholder="请选择开课时间"          />        </el-form-item>        <!-- <el-form-item label="线下课开课时间">          <el-date-picker            v-model.trim="maskForm.courseStartOffline"            type="date"            :picker-options="courseOption"            placeholder="请选择开课时间"          />        </el-form-item> -->        <div          class="line"          style="height: 1px; background: #ccc; margin: 0 25px"        ></div>        <el-form-item label="课程类型" prop="type">          <el-radio v-if="hasOnline" v-model.trim="maskForm.type" label="ONLINE"            >线上课</el-radio          >          <el-radio            v-if="hasOffline"            v-model.trim="maskForm.type"            label="OFFLINE"            >线下课</el-radio          >        </el-form-item>        <el-form-item label="循环周次" prop="week">          <el-select            v-model.trim="maskForm.week"            style="width: 220px !important"          >            <el-option label="星期日" value="0" />            <el-option label="星期一" value="1" />            <el-option label="星期二" value="2" />            <el-option label="星期三" value="3" />            <el-option label="星期四" value="4" />            <el-option label="星期五" value="5" />            <el-option label="星期六" value="6" />          </el-select>        </el-form-item>        <el-form-item label="上课时间" prop="startTime">          <el-time-picker            v-model.trim="maskForm.startTime"            @change="getStartTime"            format="HH:mm"            value-format="HH:mm"            placeholder="选择时间"          />        </el-form-item>        <el-form-item label="下课时间" prop="endTime">          <el-time-picker            v-model.trim="maskForm.endTime"            disabled            format="HH:mm"            value-format="HH:mm"            :picker-options="{              start: '04:30',              step: '00:05',              end: '23:30'            }"            placeholder="选择时间"          />        </el-form-item>      </el-form>      <div class="btnWrap">        <div class="okBtn" @click="addWeek">确认</div>      </div>      <div class="planList">        <div class="planTop">          <p>已排课程</p>        </div>        <div class="planCore" v-if="this.lookList.length > 0">          <div v-for="(item, index) in this.lookList" class="row" :key="index">            <div class="name">{{ item.type }}</div>            <div class="week">{{ item.week }}</div>            <div class="time">{{ item.time }}</div>            <div class="operation">              <el-button type="text" @click="removeWeekCourse(item.id)"                >删除</el-button              >            </div>          </div>        </div>        <div class="nomore" v-else>暂无数据</div>        <div slot="footer" style="margin-top: 20px" class="dialog-footer">          <el-button @click="dialogFormVisible = false">取 消</el-button>          <el-button type="primary" @click="setTimeTable">确 定</el-button>        </div>      </div>    </el-dialog>    <!-- <div class="btnWrap"> -->    <!-- <div class="closeBtn">        取消      </div>-->    <!-- </div> -->  </div></template><script>import {  findTeacherByOrganId,  getSubject,  getPracticeApplySubjects,  getOrganRole,  getAgreement} from "@/api/buildTeam";import {  vipGroupCategory,  vipGroupActivityFind,  getVipGroupCostCount,  createVip,  updateVipBaseInfo,  getPracticeGroupCostCount,  createPractice,  getPracticeGroupSellPrice,  getOnlineMun} from "@/api/vipSeting";import { getTeachSchool, getTeacherBySubject } from "@/api/teacherManager";import axios from "axios";import { getToken, getTenantId } from "@/utils/auth";import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";import { queryOrganStudentList } from "@/api/studentManager";import { getSysTenantConfig } from "@/views/courseRulersManager/api";import merge from "webpack-merge";import dayjs from "dayjs";export default {  name: "buildVip",  data() {    return {      title: "VIP申请",      dialogFormVisible: false,      labelPosition: "right",      courseType: "",      leftForm: {        // name: "",        teacher: "",        subject: "",        courseType: "",        activeType: "",        classNum: "",        classTime: "",        // signTimer:[],        signUpStart: "",        signUpEnd: "",        courseStartOnline: "",        courseStartOffline: "",        section: "",        courseStart: "",        courseEnd: "",        educationalTeacherId: "",        students: [],        classOrganId: "" // 课程分部      },      activeStudentList: [],      studentLimit: 0,      classTimeList: [],      centerForm: {        allCourseNum: "",        onlineCourseNum: 0,        offlineCourseNum: 0,        radio: ""      },      maskForm: {        type: "",        week: "",        startTime: "",        endTime: ""      },      rightForm: {        onlineCourse: "",        offlineCourse: "",        onlinePrice: "",        offlinePrice: "",        allPrice: "",        discount: 100      },      remoteLoading: false,      computationalBtn: false,      subjectList: [], // 科目列表      teacherList: [], // 老师列表      educationList: [], // 教务      // classOrganList: [], // 公用分部      courseTypeList: [], // 课程类型集合      activeList: [], //活动集合      hasOnline: true,      hasOffline: true,      onlineSalary: "", // 线上课课酬结算方式      offlineSalary: "", // 线下课课酬结算方式      hotType: "",      attribute1: "",      attribute2: "",      attribute3: "",      fixedCourseNumFlag: null,      marketPrice: "",      maxCourseNum: 0,      minCourseNum: 0,      salaryReadonlyFlag: "", // 老师课酬是否可配      paymentReadonlyFlag: "", // 课程单价是否可配      lookList: [],      onlinelookList: [], // 展示课表线上      offlineLookList: [], // 展示课表线下      timeTable: [], // 真正的课表      giveNum: "",      chioseStudent: [],      weekDay: [        "星期日",        "星期一",        "星期二",        "星期三",        "星期四",        "星期五",        "星期六"      ],      scetionList: [],      isGiveClass: false,      activeStartTime: null,      courseOption: null,      pickerOptions: null,      pickerOptions1: null,      leftFormRules: {        /**?         * teacher: '',        subject: '',        courseType: '',        activeType: '',         */        name: [          {            required: true,            message: "请输入名称",            trigger: "blur"          }        ],        teacher: [          {            required: true,            message: "请选择老师",            trigger: "change"          }        ],        educationalTeacherId: [          {            required: true,            message: "请选择乐团主管",            trigger: "change"          }        ],        classOrganId: [          {            required: true,            message: "请选择课程分部",            trigger: "change"          }        ],        subject: [          {            required: true,            message: "请选择科目",            trigger: "change"          }        ],        courseType: [          {            required: true,            message: "请选择课程形式",            trigger: "change"          }        ],        students: [          {            required: true,            message: "请选择上课学生",            trigger: "change"          }        ],        // activeType: [        //   {        //     required: true,        //     message: "请选择活动",        //     trigger: "change",        //   },        // ],        signUpStart: [          {            required: true,            message: "请选择报名开始时间",            trigger: "change"          }        ],        signUpEnd: [          {            required: true,            message: "请选择报名结束时间",            trigger: "change"          }        ],        classTime: [          {            required: true,            message: "请选择报每课时长",            trigger: "change"          }        ]      },      id: "",      studentList: [],      courseTimeList: [],      isMusicTheory: false,      chioseStudent: [],      classTimeDis: false,      studentRuleNum: 0,      isFirst: false,      submitList: []    };  },  computed: {    allCourseCount() {      let online, offline;      this.centerForm.onlineCourseNum        ? (online = this.centerForm.onlineCourseNum)        : (online = 0);      this.centerForm.offlineCourseNum        ? (offline = this.centerForm.offlineCourseNum)        : (offline = 0);      let giveNum;      // if (this.hotType == "GIVE_CLASS") {      //   //  this.attribute1  从多少节开始送      //   //  this.attribute2  送多少节      //   giveNum = parseInt(      //     parseInt(offline) + parseInt(online) - this.attribute1 >= 0      //       ? (giveNum = this.attribute2)      //       : (giveNum = 0)      //   );      //   if (giveNum) {      //     // 有赠送课时      //     this.isGiveClass = true;      //   }      //   this.giveNum = giveNum || 0;      //   return parseInt(offline) + parseInt(online) + "+" + giveNum || "";      // }      return parseInt(offline) + parseInt(online) || "";    }  },  created() {    // this.init();  },  mounted() {    // 获取所有老师的接口  根据声部id获取老师    // 获取课程类型的接口    // 获取学生列表    // Object.assign(this.$data, this.$options.data());    // setTimeout(() => {    //   this.$refs["leftForm"].resetFields();    // }, 100);    // 判断一下有没有缓存    this.courseType = this.$route.query.courseType;    if (this.courseType == "PRACTICE") {      this.title = "网管课申请";      this.$route.meta.title = "网管课申请";      this.hasOffline = false;    } else {      this.title = "VIP申请";      this.$route.meta.title = "VIP申请";    }    this.init();  },  activated() {    // Object.assign(this.$data, this.$options.data());    // setTimeout(() => {    //   this.$refs["leftForm"].resetFields();    // }, 100);    // this.init();  },  beforeDestroy() {},  beforeRouteLeave(to, from, next) {    if (this.leftForm?.classOrganId && from.path == "/business/buildVip") {      console.log(this.leftForm?.classOrganId);      this.$confirm("检测到您有未提交的数据, 离开将丢失该数据!", "提示", {        confirmButtonText: "确定",        cancelButtonText: "取消",        closeOnClickModal: false,        type: "warning"      })        .then(() => {          next();        })        .catch(err => {});    } else {      next();    }  },  methods: {    resetFrom() {      this.leftForm = {        // name: "",        teacher: "",        subject: "",        courseType: "",        activeType: "",        classNum: "",        classTime: "",        // signTimer:[],        signUpStart: "",        signUpEnd: "",        courseStartOnline: "",        courseStartOffline: "",        section: "",        courseStart: "",        courseEnd: "",        educationalTeacherId: "",        students: [],        classOrganId: "" // 课程分部      };      this.activeStudentList = [];      this.studentLimit = 0;      this.classTimeList = [];      this.centerForm = {        allCourseNum: "",        onlineCourseNum: 0,        offlineCourseNum: 0,        radio: ""      };      this.maskForm = {        type: "",        week: "",        startTime: "",        endTime: ""      };      this.rightForm = {        onlineCourse: "",        offlineCourse: "",        onlinePrice: "",        offlinePrice: "",        allPrice: "",        discount: 100      };      this.hasOnline = true;      this.hasOffline = true;      this.onlineSalary = ""; // 线上课课酬结算方式      this.offlineSalary = ""; // 线下课课酬结算方式      this.hotType = "";      this.attribute1 = "";      this.attribute2 = "";      this.attribute3 = "";      this.fixedCourseNumFlag = null;      this.marketPrice = "";      this.maxCourseNum = 0;      this.minCourseNum = 0;      this.salaryReadonlyFlag = ""; // 老师课酬是否可配      this.paymentReadonlyFlag = ""; // 课程单价是否可配      this.onlinelookList = []; // 展示课表线上      this.offlineLookList = []; // 展示课表线下      this.timeTable = []; // 真正的课表      this.giveNum = "";      this.chioseStudent = [];      this.$refs["leftForm"].resetFields();      localStorage.removeItem("newVip");      localStorage.removeItem(`newPractice`);    },    async getAgreement() {      try {        const res = await getAgreement();        if (!res.data) {          this.submitList.push("agreement");          // this.$bus.$emit("showguide", ["agreement"]);        }      } catch (e) {}    },    async init() {      try {        const res = await getOnlineMun();        let tempObj = JSON.parse(res.data.config);        this.studentRuleNum = tempObj.cloud_room_rule.cloud_room_up_limit - 1;      } catch (e) {        console.log(e);      }      if (this.$route.query.rules) {        this.rules = this.$route.query.rules;      }      if (this.$route.query.searchForm) {        this.searchForm = this.$route.query.searchForm;      }      // 获取所有科目的接口      this.submitList = [];      await this.$store.dispatch("setBranchs");      await this.getAgreement();      if (this.selects.branchs.length <= 0) {        submitList.push("organ");        // this.$bus.$emit("showguide", ["organ"]);      }      if (this.submitList.length > 0) {        this.$bus.$emit("showguide", this.submitList);      }      if (this.courseType == "PRACTICE") {        getPracticeApplySubjects().then(res => {          if (res.code == 200) {            this.subjectList = res.data;          }        });      } else {        getSubject({          tenantId: 1        }).then(res => {          if (res.code == 200) {            this.subjectList = res.data;          }        });      }      //  获取乐团主管      this.pickerOptions = this.beginDate();      this.pickerOptions1 = this.processDate();      this.courseOption = this.coursesDate();      this.getInstitutionRules();    },    async getInstitutionRules() {      try {        const res = await getSysTenantConfig({ group: "OFFLINE" });        this.isFirst = Boolean(res.data[0].createOn);        if (!this.isFirst) {          this.$bus.$emit("showguide", ["offline"]);        }      } catch (e) {        console.log(e);      }    },    onCourseNumChange(type) {      // 折扣类型,并且设置的排课数有值      this.computationalBtn = false;      let centerForm = this.centerForm;      if (this.maxCourseNum > 0 && this.minCourseNum > 0) {        // 判断线上或线下总和大于排课次数        let onlineNum = centerForm.onlineCourseNum || 0;        let offlineNum = centerForm.offlineCourseNum || 0;        let allNUm = parseInt(onlineNum) + parseInt(offlineNum);        if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {          this.$message.error("待排课数不可超过该活动限制");          return;        }      }    },    coursesDate() {      let self = this;      return {        firstDayOfWeek: 1,        disabledDate: time => {          if (self.leftForm.courseStart && self.leftForm.courseEnd) {            let date = new Date(self.leftForm.courseStart.replace(/-/, "/"));            let endDate = new Date(self.leftForm.courseEnd.replace(/-/, "/"));            let nowDate = new Date();            let changeDate =              date.getTime() - nowDate.getTime() > 0 ? date : nowDate;            let endChangeDate =              endDate.getTime() - nowDate.getTime() > 0 ? endDate : nowDate;            return (              time.getTime() < changeDate.getTime() ||              time.getTime() > endChangeDate.getTime()            );          }          return;        }      };    },    beginDate() {      let self = this;      return {        firstDayOfWeek: 1,        disabledDate(time) {          return time.getTime() + 86400000 <= new Date().getTime(); //开始时间不选时,结束时间最大值小于等于当天        }      };    },    processDate() {      //提出结束时间必须大于提出开始时间      let self = this;      return {        firstDayOfWeek: 1,        disabledDate(time) {          if (self.leftForm.signUpStart) {            return (              new Date(self.leftForm.signUpStart).getTime() > time.getTime()            );          } else {            return time.getTime() > Date.now();            //开始时间不选时,结束时间最大值小于等于当天          }        }      };    },    changeSubject(val) {      this.computationalBtn = false;      this.leftForm.teacher = "";      this.leftForm.section = "";      // 根据科目id获取相应的老师      findTeacherByOrganId({        subjectIds: val,        organId: this.leftForm.classOrganId      }).then(res => {        if (res.code == 200) {          this.teacherList = res.data;          if (this.teacherList.length <= 0) {            this.$bus.$emit("showguide", ["teacher"]);            return;          }        }      });      // getTeacherBySubject({ subjecId: val }).then(res => {      //   if (res.code == 200) {      //     this.teacherList = res.data;      //   }      // })    },    // 选择课程类型    changeType(val) {      // 在这里清空默认课酬      this.rightForm.offlineCourse = "";      this.rightForm.onlineCourse = "";      this.leftForm.activeType = "";      this.computationalBtn = false;      this.leftForm.students = []; // 重置所选学生      this.centerForm.onlineCourseNum = 0; // 重置线上课数      this.changePrice(val);    },    changePrice(val) {      for (let i in this.courseTypeList) {        if (this.courseTypeList[i].id == val) {          // 学生人数          this.leftForm.classNum = this.courseTypeList[i].studentNum;          this.studentLimit = this.courseTypeList[i].studentNum;          // 每课时长          this.classTimeList = this.courseTypeList[i].singleClassMinutes.split(            ","          );          // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;          this.leftForm.classTime = this.classTimeList[0];          // 线上课单节价格          this.rightForm.onlinePrice = this.courseTypeList[            i          ].onlineClassesUnitPrice;          // 线下课单节价格          this.rightForm.offlinePrice = this.courseTypeList[            i          ].offlineClassesUnitPrice;          if (            this.rightForm.onlinePrice <= 0 ||            this.rightForm.offlinePrice <= 0          ) {            this.$bus.$emit("showguide", ["vipPrice"]);            return;          }          this.isMusicTheory = this.courseTypeList[i].musicTheory;        }      }      this.activeStudentList = [];      this.studentList.forEach(stu => {        if (          Array.isArray(this.chioseStudent)            ? this.chioseStudent.indexOf(stu.userId) != -1            : stu.userId == this.chioseStudent        ) {          let discount = this.rightForm.discount            ? this.rightForm.discount            : 100;          this.activeStudentList.push({            studentId: stu.userId,            userName: stu.username,            onlineClassesUnitPrice: this.rightForm.onlinePrice,            offlineClassesUnitPrice: this.rightForm.offlinePrice,            paymentPrice: ""          });        }      });    },    // 选择活动方案    chioseActive(val) {      this.computationalBtn = false;      this.rightForm.offlineCourse = "";      this.rightForm.onlineCourse = "";      // this.rightForm.onlinePrice = '';      // this.rightForm.offlinePrice = '';      this.centerForm.onlineCourseNum = 0;      this.centerForm.offlineCourseNum = 0;      this.lookList = [];      this.timeTable = [];      this.attribute1 = "";      this.attribute2 = "";      this.attribute3 = "";      this.fixedCourseNumFlag = null; // 是否限制课时数      this.marketPrice = "";      this.rightForm.discount = 100;      this.giveNum = 0;      this.isGiveClass = false;      this.leftForm.courseStart = "";      this.leftForm.courseEnd = "";      this.hasOnline = true;      this.hasOffline = true;      this.maxCourseNum = 0;      this.minCourseNum = 0;      if (val) {        this.classTimeDis = true;        for (let i in this.courseTypeList) {          if (this.courseTypeList[i].id == this.leftForm.courseType) {            // 学生人数            this.leftForm.classNum = this.courseTypeList[i].studentNum;            // 每课时长            this.classTimeList = this.courseTypeList[              i            ].singleClassMinutes.split(",");            // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;            this.leftForm.classTime = this.classTimeList[0];            // 线上课单节价格            this.rightForm.onlinePrice = this.courseTypeList[              i            ].onlineClassesUnitPrice;            // 线下课单节价格            this.rightForm.offlinePrice = this.courseTypeList[              i            ].offlineClassesUnitPrice;            this.rightForm.discount = this.courseTypeList[i].discount;          }        }        // 根须活动id获取 相应的值        for (let i in this.activeList) {          if (this.activeList[i].id == val) {            // 如果是买赠就必须选择赠课类型            // 报名开始 报名结束 课程开始 课程结束 // 判断是否有线上,线下课 并同步状态            // this.leftForm.signUpStart = this.activeList[i].startTime;            // this.leftForm.signUpEnd = this.activeList[i].endTime;            this.maxCourseNum = this.activeList[i].maxCourseNum || 0;            this.minCourseNum = this.activeList[i].minCourseNum || 0;            this.leftForm.courseStart = this.activeList[i].coursesStartTime;            this.leftForm.courseEnd = this.activeList[i].coursesEndTime;            this.rightForm.discount = this.activeList[i].discount;            this.leftForm.classTime = this.activeList[i].singleCourseTime;            // 获取活动种类并保存            this.hotType = this.activeList[i].type;            // 获取买赠必要参数            this.attribute1 = this.activeList[i].attribute1;            this.attribute2 = this.activeList[i].attribute2;            this.attribute3 = this.activeList[i].attribute3;            // 固定课酬作用            this.fixedCourseNumFlag = this.activeList[i].fixedCourseNumFlag;            // 售价            this.marketPrice = this.activeList[i].marketPrice;            // 存储课酬是否可配置            this.salaryReadonlyFlag = this.activeList[i].salaryReadonlyFlag;            this.paymentReadonlyFlag = this.activeList[i].paymentReadonlyFlag;            if (this.courseType == "PRACTICE") {              this.hasOffline = false;              this.hasOnline = true;            } else {              if (this.activeList[i].teachMode == 0) {                this.hasOffline = false;                // -1:所有;0:线上;1:线下"              }              if (this.activeList[i].teachMode == 1) {                this.hasOnline = false;              }            }            this.activeStudentList = [];            this.studentList.forEach(stu => {              if (                Array.isArray(this.chioseStudent)                  ? this.chioseStudent.indexOf(stu.userId) != -1                  : stu.userId == this.chioseStudent              ) {                let discount = this.rightForm.discount                  ? this.rightForm.discount                  : 100;                this.activeStudentList.push({                  studentId: stu.userId,                  userName: stu.username,                  onlineClassesUnitPrice: this.rightForm.onlinePrice,                  offlineClassesUnitPrice: this.rightForm.offlinePrice,                  paymentPrice: this.fixedCourseNumFlag ? this.marketPrice : ""                });              }            });          }        }      } else {        this.classTimeDis = false;        for (let i in this.courseTypeList) {          if (this.courseTypeList[i].id == this.leftForm.courseType) {            // 学生人数            this.leftForm.classNum = this.courseTypeList[i].studentNum;            // 每课时长            this.classTimeList = this.courseTypeList[              i            ].singleClassMinutes.split(",");            // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;            this.leftForm.classTime = this.classTimeList[0];            // 线上课单节价格            this.rightForm.onlinePrice = this.courseTypeList[              i            ].onlineClassesUnitPrice;            // 线下课单节价格            this.rightForm.offlinePrice = this.courseTypeList[              i            ].offlineClassesUnitPrice;            this.rightForm.discount = this.courseTypeList[i].discount;          }        }        this.leftForm.classTime = null;        if (this.courseType == "PRACTICE") {          this.hasOffline = false;          this.hasOnline = true;          this.classTimeList = [25];        }      }      // 重置课程单价    },    // 点击确插入课表    addWeek() {      let courseType = this.maskForm.type;      // let week = ;this.maskForm.week      let startTime = this.maskForm.startTime;      if (!courseType || !this.maskForm.week || !startTime) {        this.$message.error("请填写完成信息");        return;      }      // 拿到相应的值插入数组      let endTime = this.MinutesTest(startTime, this.leftForm.classTime);      let str;      switch (courseType) {        case "ONLINE": {          str = "线上课";          break;        }        case "OFFLINE": {          str = "线下课";          break;        }      }      let flag = false;      for (let i in this.lookList) {        if (this.lookList[i].weekDay == this.maskForm.week) {          flag = true;        }      }      // true=> 说明有这一周 那么循环找到这一周 在判断时间      // flase=> 说明没有这一周的时间 直接添加      if (flag) {        // 有相同的周日        let arr = [];        for (let i in this.lookList) {          if (this.lookList[i].weekDay == this.maskForm.week) {            // 找到这一天的所有元素            //  && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)            let isStartTime = this.timeIsrange(              startTime,              endTime,              this.lookList[i].startTime            );            let isEndTime = this.timeIsrange(              startTime,              endTime,              this.lookList[i].endTime            );            arr.push(!isEndTime && !isStartTime);          }        }        let isAdd = true;        for (let j = 0; j < arr.length; j++) {          isAdd = isAdd && arr[j];        }        if (isAdd) {          this.lookList.push({            type: str,            week: this.weekDay[this.maskForm.week],            weekDay: this.maskForm.week,            startTime: startTime,            endTime: endTime,            time: startTime + "-" + endTime,            id: Date.now()          });        } else {          this.$message.error("该时间段已排课请重选时间");          return;        }      } else {        this.lookList.push({          type: str,          week: this.weekDay[this.maskForm.week],          weekDay: this.maskForm.week,          startTime: startTime,          endTime: endTime,          time: startTime + "-" + endTime,          id: Date.now()        });      }      // let courseType = this.maskForm.type;      // // let week = ;this.maskForm.week      // let startTime = this.maskForm.startTime;      //  根据时间排序      this.maskForm.type = "";      this.maskForm.week = "";      this.maskForm.startTime = "";      this.maskForm.endTime = "";    },    // 分钟小时相加减    MinutesTest(str, interval) {      let houer = str.split(":")[0];      let min = str.split(":")[1];      let sdate1 = new Date(1900, 1, 1, houer, min);      sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));      let H = sdate1.getHours();      let M = sdate1.getMinutes();      if (H < 10) H = "0" + H;      if (M < 10) M = "0" + M;      return H + ":" + M;    },    // 判断时间是否在时间段内    timeIsrange(beginTime, endTime, nowTime) {      var strb = beginTime.split(":");      if (strb.length != 2) {        return false;      }      var stre = endTime.split(":");      if (stre.length != 2) {        return false;      }      var strn = nowTime.split(":");      if (stre.length != 2) {        return false;      }      var b = new Date();      var e = new Date();      var n = new Date();      b.setHours(strb[0]);      b.setMinutes(strb[1]);      e.setHours(stre[0]);      e.setMinutes(stre[1]);      n.setHours(strn[0]);      n.setMinutes(strn[1]);      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {        // 在时间范围内        return true;      } else {        // 不在时间范围内        return false;      }    },    removeWeekCourse(id) {      for (let i in this.lookList) {        if (this.lookList[i].id == id) {          this.lookList.splice(i, 1);        }      }    },    setTimeTable() {      // 拿到线上课数与线下课数 以及      this.timeTable = [];      let online = parseInt(this.centerForm.onlineCourseNum) || 0;      let offline = parseInt(this.centerForm.offlineCourseNum) || 0;      let giveNum = this.giveNum;      let giveClassType = this.centerForm.radio;      if (giveClassType == "ONLINE") {        // 线上        online += giveNum;      } else if (giveClassType == "OFFLINE") {        offline += giveNum;      }      if (!this.maskForm.courseStartOnline) {        this.$message.error("请选择课程开始时间");        return;      }      // 这里判断是否选择了排课开始时间      // if (online && !this.maskForm.courseStartOnline) {      //   this.$message.error("选择了线上课 但没有线上课开始时间");      //   return;      // }      // if (offline && !this.maskForm.courseStartOffline) {      //   this.$message.error("选择了线下课 但没有线下课开始时间");      //   return;      // }      let date, date1;      date = new Date(this.maskForm.courseStartOnline.getTime());      date1 = new Date(this.maskForm.courseStartOnline.getTime());      // if (this.maskForm.courseStartOnline) {      //   date = new Date(this.maskForm.courseStartOnline.getTime());      // }      // if (this.maskForm.courseStartOffline) {      //   date1 = new Date(this.maskForm.courseStartOffline.getTime());      // }      // let startWeekday = this.maskForm.courseStart.getDay();      let onlineList = []; // 装线上课的数组      let offlineList = []; //装线下课的数组      if (this.lookList.length <= 0) {        this.$message.error("请先排课后再点击确认按钮");        return;      }      for (let i in this.lookList) {        if (this.lookList[i].type == "线上课") {          onlineList.push({            week: this.lookList[i].weekDay,            date: this.lookList[i]          });        }        if (this.lookList[i].type == "线下课") {          offlineList.push({            week: this.lookList[i].weekDay,            date: this.lookList[i]          });        }      }      //  (onlineList + '----------------------------------------------------------------------------------');      //  (offlineList);      if (online > 0 && onlineList.length <= 0) {        this.$message.error("选择了线上课但未排线上课");        this.timeTable = [];        return;      }      if (offline > 0 && offlineList.length <= 0) {        this.$message.error("选择了线下课但未排线下课");        this.timeTable = [];        return;      }      // 获取要排课的总数  获取每周要排多少次      while (online && online > 0) {        // 排线上课g        for (let i in onlineList) {          let num;          onlineList[i].week - date.getDay() >= 0            ? (num = onlineList[i].week - date.getDay())            : (num = onlineList[i].week - date.getDay() + 7); // +差值的天数://差值的天数+7          //  (num);          let dataStr = this.getThinkDate(date, num);          this.timeTable.push({            classDate: dataStr + " 00:00:00",            actualTeacherId: this.leftForm.teacher,            startClassTimeStr: onlineList[i].date.startTime,            endClassTimeStr: onlineList[i].date.endTime,            teachMode: "ONLINE"          });          online--;          if (online == 0) break;        }        if (onlineList.length == 1 || this.isAllEqual(onlineList)) {          date.setDate(date.getDate() + 7);        }        // 加一周      }      //  (date1)      while (offline && offline > 0) {        // 排线下课        for (let i in offlineList) {          let num;          offlineList[i].week - date1.getDay() >= 0            ? (num = offlineList[i].week - date1.getDay())            : (num = offlineList[i].week - date1.getDay() + 7); // +差值的天数://差值的天数+7          let dataStr = this.getThinkDate(date1, num);          this.timeTable.push({            classDate: dataStr + " 00:00:00",            actualTeacherId: this.leftForm.teacher,            startClassTimeStr: offlineList[i].date.startTime,            endClassTimeStr: offlineList[i].date.endTime,            teachMode: "OFFLINE"          });          offline--;          if (offline == 0) break;        }        // 加一周        if (offlineList.length == 1 || this.isAllEqual(offlineList)) {          date1.setDate(date1.getDate() + 7);        }      }      //  (this.timeTable);      this.timeTable.sort((a, b) => {        let aStr = dayjs(          dayjs(a.classDate).format("YYYY-MM-DD") +            " " +            a.startClassTimeStr +            ":00"        ).valueOf();        let bStr = dayjs(          dayjs(b.classDate).format("YYYY-MM-DD") +            " " +            b.startClassTimeStr +            ":00"        ).valueOf();        return aStr - bStr;      });      this.dialogFormVisible = false;    },    getThinkDate(date, num) {      let Stamp = date;      Stamp.setDate(date.getDate() + num); // 获取当前月数的第几天      //  (date.getMonth() + 1)      //  (Stamp.getMonth() + 1)      var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)      var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)      var mvar = "";      if (month < 10) {        mvar = "0" + month;      } else {        mvar = month + "";      }      var day = Stamp.getDate();      var dvar = "";      if (day < 10) {        dvar = "0" + day;      } else {        dvar = day + "";      }      //  (year + "-" + mvar + '-' + dvar);      return year + "-" + mvar + "-" + dvar;    },    // 计算课酬    computational() {      if (this.timeTable.length <= 0) {        this.$message.error("请先排课再计算课酬");        return;      }      this.computationalBtn = true;      let userId = this.leftForm.teacher || null;      let giveTeachMode = this.centerForm.radio || null;      let vipGroupCategoryId = this.leftForm.courseType || null;      let vipGroupActivityId = this.leftForm.activeType || null;      let onlineClassesUnitPrice = this.rightForm.onlinePrice || null;      let offlineClassesUnitPrice = this.rightForm.offlinePrice || null;      let onlineClassesNum = this.centerForm.onlineCourseNum || 0;      let offlineClassesNum = this.centerForm.offlineCourseNum || 0;      let singleClassMinutes = this.leftForm.classTime;      if (this.hotType == "GIVE_CLASS") {        if (this.centerForm.radio == "ONLINE") {          onlineClassesNum = parseInt(onlineClassesNum);        } else if (this.centerForm.radio == "OFFLINE") {          offlineClassesNum = parseInt(offlineClassesNum);        }      }      let onlineTeacherSalary = this.rightForm.onlineCourse || null;      let offlineTeacherSalary = this.rightForm.offlineCourse || null;      let studentId = this.activeStudentList        .map(stu => {          return stu.studentId;        })        .join(",");      if (this.courseType == "PRACTICE") {        getPracticeGroupCostCount({          vipGroupActivityId,          onlineClassesUnitPrice,          onlineTeacherSalary,          offlineTeacherSalary,          vipGroupCategoryId,          offlineClassesUnitPrice,          allCourseNum: onlineClassesNum,          offlineClassesNum,          userId,          giveTeachMode,          singleClassMinutes,          organId: this.leftForm?.classOrganId,          studentId        }).then(res => {          if (res.code == 200) {            this.rightForm.onlineCourse = res.data.onlineTeacherSalary;            this.rightForm.offlineCourse = res.data.offlineTeacherSalary;            this.rightForm.allPrice = res.data.totalPrice;            this.activeStudentList.forEach(stu => {              stu.paymentPrice = res.data.totalPrice;            });          }        });      } else {        getVipGroupCostCount({          vipGroupActivityId,          onlineClassesUnitPrice,          onlineTeacherSalary,          offlineTeacherSalary,          vipGroupCategoryId,          offlineClassesUnitPrice,          onlineClassesNum,          offlineClassesNum,          userId,          studentIdList: userId,          giveTeachMode,          singleClassMinutes,          studentIdList: studentId        }).then(res => {          if (res.code == 200) {            this.rightForm.onlineCourse = res.data.onlineTeacherSalary;            this.rightForm.offlineCourse = res.data.offlineTeacherSalary;            this.rightForm.allPrice = res.data.totalPrice;            this.activeStudentList.forEach(stu => {              stu.paymentPrice = res.data.totalPrice;            });          }        });      }    },    isAllEqual(array) {      if (array.length > 0) {        return !array.some((val, index) => {          return val.week != array[0].week;        });      } else {        return true;      }    },    submitInfo() {      if (!this.computationalBtn) {        this.$message.error("请点击计算按钮计算课酬");        return;      }      // let activeCourseType;      let flag = false;      //  (this.courseTypeList,)      // this.courseTypeList.forEach((courseType) => {      //   if (courseType.id == this.leftForm.courseType) {      //     activeCourseType = courseType;      //   }      // });      //  (activeCourseType)      if (this.isMusicTheory) {        if (          this.leftForm.students.length > this.studentLimit ||          this.leftForm.students.length < 1        ) {          this.$message.error(`请选择上课学生为1-${this.studentLimit}人`);          flag = true;        }      } else {        if (          this.leftForm.students.length !== this.studentLimit &&          this.courseType != "PRACTICE"        ) {          this.$message.error(`请选择上课学生为${this.studentLimit}人`);          flag = true;        }      }      if (flag) return;      // 获取活动方案      // 判断线上课课酬和线下课课酬      let online = parseInt(this.centerForm.onlineCourseNum);      let offline = parseInt(this.centerForm.offlineCourseNum);      let giveNum = this.giveNum;      let giveClassType = this.centerForm.radio;      if (giveClassType == "ONLINE") {        // 线上        online += giveNum;      } else if (giveClassType == "OFFLINE") {        offline += giveNum;      }      let obj = {};      obj.courseSchedules = this.timeTable;      /**       *       * teacher: '',        subject: '',        courseType: '',        activeType: '',        classNum: '',        classTime: '',        signUpStart: '',        signUpEnd: '',        courseStart: '',        courseEnd: ''       */      let studentIdList = 0;      if (this.courseType == "PRACTICE") {        studentIdList = this.leftForm.students;        obj.practiceGroupApplyBaseInfoDto = {          studentId: studentIdList, // 这个不要了          vipGroupStudentCoursePrices: this.activeStudentList,          coursesExpireDate: this.leftForm.courseEnd,          teacherSchoolId: this.leftForm.section,          // name: this.leftForm.name,          offlineClassesNum: offline || 0,          onlineClassesNum: online || 0,          offlineClassesUnitPrice: this.rightForm.offlinePrice || 0,          onlineClassesUnitPrice: this.rightForm.onlinePrice || 0,          paymentExpireDate: this.leftForm.signUpEnd,          registrationStartTime: this.leftForm.signUpStart,          singleClassMinutes: this.leftForm.classTime,          studentNum: this.leftForm.classNum,          userId: this.leftForm.teacher,          vipGroupActivityId: this.leftForm.activeType,          vipGroupCategoryId: this.leftForm.courseType,          onlineTeacherSalary: this.rightForm.onlineCourse || 0,          offlineTeacherSalary: this.rightForm.offlineCourse || 0,          giveTeachMode: this.centerForm.radio,          subjectId: this.leftForm.subject,          educationalTeacherId: this.leftForm.educationalTeacherId,          organId: this.leftForm.classOrganId,          firstStudentId: this.leftForm.students[0] || null,          allCourseNum: online        };      } else {        studentIdList = this.leftForm.students.join(",") || null;        obj.vipGroupApplyBaseInfo = {          studentId: studentIdList, // 这个不要了          studentIdList,          vipGroupStudentCoursePrices: this.activeStudentList,          coursesExpireDate: this.leftForm.courseEnd,          teacherSchoolId: this.leftForm.section,          // name: this.leftForm.name,          offlineClassesNum: offline || 0,          onlineClassesNum: online || 0,          offlineClassesUnitPrice: this.rightForm.offlinePrice || 0,          onlineClassesUnitPrice: this.rightForm.onlinePrice || 0,          paymentExpireDate: this.leftForm.signUpEnd,          registrationStartTime: this.leftForm.signUpStart,          singleClassMinutes: this.leftForm.classTime,          studentNum: this.leftForm.classNum,          userId: this.leftForm.teacher,          vipGroupActivityId: this.leftForm.activeType,          vipGroupCategoryId: this.leftForm.courseType,          onlineTeacherSalary: this.rightForm.onlineCourse || 0,          offlineTeacherSalary: this.rightForm.offlineCourse || 0,          giveTeachMode: this.centerForm.radio,          subjectIdList: this.leftForm.subject,          educationalTeacherId: this.leftForm.educationalTeacherId,          organId: this.leftForm.classOrganId,          firstStudentId: this.leftForm.students[0] || null        };      }      if (this.courseType == "PRACTICE") {        createPractice(obj).then(res => {          if (res.code == 200) {            this.resetFrom();            if (res.data == "ING") {              this.$confirm(                "课程提交成功,已提交运营主管审批,审批通过后,课程创建成功!",                "提示",                {                  confirmButtonText: "确定",                  type: "warning"                }              ).then(() => {                this.$message.success("提交成功");                this.$store.dispatch("delVisitedViews", this.$route);                this.$router.push({                  path: "/vipManager/vipList",                  query: {                    rules: this.rules,                    searchForm: this.searchForm                  }                });              });            } else {              this.$message.success("恭喜您创建成功");              this.onCancel();            }          }          if (res.code == 206) {            this.$confirm(res.msg, "提示", {              confirmButtonText: "确定",              type: "warning"            }).then(() => {              obj.allowOverstepActivityStudentNum = 1;              createPractice(obj).then(res => {                if (res.code == 200) {                  this.resetFrom();                  this.$message.success("提交成功");                  this.onCancel();                }              });            });          }        });      } else {        // 新增        createVip(obj).then(res => {          if (res.code == 200) {            this.resetFrom();            if (res.data == "ING") {              this.$confirm(                "课程提交成功,已提交运营主管审批,审批通过后,课程创建成功!",                "提示",                {                  confirmButtonText: "确定",                  type: "warning"                }              ).then(() => {                this.$message.success("提交成功");                this.$store.dispatch("delVisitedViews", this.$route);                this.$router.push({                  path: "/vipManager/vipList",                  query: {                    rules: this.rules,                    searchForm: this.searchForm                  }                });              });            } else {              this.$message.success("恭喜您创建成功");              this.$store.dispatch("delVisitedViews", this.$route);              this.$router.push({                path: "/vipManager/vipList",                query: {                  rules: this.rules,                  searchForm: this.searchForm                }              });            }          }          if (res.code == 206) {            this.$confirm(res.msg, "提示", {              confirmButtonText: "确定",              type: "warning"            }).then(() => {              obj.allowOverstepActivityStudentNum = 1;              createVip(obj).then(res => {                if (res.code == 200) {                  this.resetFrom();                  this.$message.success("提交成功");                  this.$store.dispatch("delVisitedViews", this.$route);                  this.$router.push({                    path: "/vipManager/vipList",                    query: {                      rules: this.rules,                      searchForm: this.searchForm                    }                  });                }              });            });          }        });      }    },    setSection(val) {      this.leftForm.section = "";      this.rightForm.offlineCourse = "";      this.rightForm.onlineCourse = "";      this.computationalBtn = false;      // this.leftForm.courseType = "";      if (val) {        getTeachSchool({          userId: val        }).then(res => {          if (res.code == 200) {            this.scetionList = res.data;            //         if(this.scetionList.length <=0){            //   this.$bus.$emit("showguide", ['teamPayType']);            //   return            // }          }        });      }      // for (let i in this.teacherList) {      //   if (this.teacherList[i].id == val) {      //     // 根据分部id去获取课程形式      //     vipGroupCategory({ organId: this.teacherList[i].organId }).then(      //       res => {      //         if (res.code == 200) {      //           this.courseTypeList = res.data;      //         }      //       }      //     );      //   }      // }      // this.getClassOrgan(); // 获取公用部分    },    // getClassOrgan() {    //   // 获取公用分部    //   const leftForm = this.leftForm;    //   let teacher = leftForm.teacher ? leftForm.teacher : null;    //   let educationalTeacherId = leftForm.educationalTeacherId    //     ? leftForm.educationalTeacherId    //     : null;    //   leftForm.classOrganId = null; // 重置课程分部数据    //   this.classOrganList = [];    //   // 初始化上课学生    //   this.studentList = [];    //   this.leftForm.students = [];    //   if (!teacher || !educationalTeacherId) {    //     // 如果没有选择指导老师和乐团主管则不请求    //     return;    //   }    //   getPublicOrgans({    //     teacherId: teacher,    //     eduTeacherId: educationalTeacherId,    //   }).then((res) => {    //     if (res.code == 200) {    //       let result = res.data ? res.data : [];    //       this.classOrganList = result;    //     }    //   });    // },    async onClassChange(val) {      // 课程分部改变时      // 老师 乐团主管 都要重置      this.computationalBtn = false;      this.studentList = [];      this.activeStudentList = [];      this.$set(this.leftForm, "students", []);      this.$set(this.leftForm, "teacher", "");      this.$set(this.leftForm, "educationalTeacherId", "");      this.$set(this.leftForm, "section", "");      this.$set(this.leftForm, "activeType", "");      this.$set(this.leftForm, "classTime", "");      this.$set(this.leftForm, "subject", "");      // this.leftForm.students = [];      // this.leftForm.teacherId = "";      // this.leftForm.educationalTeacherId = "";      this.courseTypeList = [];      if (this.leftForm.courseType) {        this.$set(this.leftForm, "courseType", null);      }      // this.leftForm.courseType = null;      if (val) {        this.getOrganStudentList(val);        vipGroupCategory({          organId: val        }).then(res => {          if (res.code == 200) {            this.courseTypeList = res.data;          }        });        // 获取乐团主管        try {          const ruselt = await getOrganRole({            id: val          });          this.educationList = ruselt?.data?.EDUCATION;          if (!this.educationList || this.educationList.length <= 0) {            this.$bus.$emit("showguide", ["teamManager"]);            return;          }        } catch (e) {          console.log(e);        }        // 乐团主管        // 如果是网管课 则获取网管课单价        if (this.courseType == "PRACTICE") {          getPracticeGroupSellPrice({ organId: val }).then(res => {            if (res.code == 200) {              this.rightForm.onlinePrice = res.data.singleClassMinutesPrice;            }          });        }      }    },    onCancel() {      if (this.courseType) {        this.$store.dispatch("delVisitedViews", this.$route);        this.$router.push({          path: "/accompanyManager/accompany"        });      } else {        this.$store.dispatch("delVisitedViews", this.$route);        this.$router.push({          path: "/vipManager/vipList"        });      }    },    setCourse() {      // if (      //   this.hotType == "GIVE_CLASS" &&      //   this.isGiveClass &&      //   !this.centerForm.radio      // ) {      //   this.$message.error("您还未选择赠课类型");      //   return;      // }      this.$refs["leftForm"].validate(vali => {        if (vali) {          let centerForm = this.centerForm;          if (this.maxCourseNum > 0 && this.minCourseNum > 0) {            // 判断线上或线下总和大于排课次数            let onlineNum = centerForm.onlineCourseNum || 0;            let offlineNum = centerForm.offlineCourseNum || 0;            let allNUm = parseInt(onlineNum) + parseInt(offlineNum);            if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {              this.$message.error("待排课数不可超过该活动限制");              return;            }          }          this.dialogFormVisible = true;        }      });    },    // setVipInfo(data) {    //   // this.leftForm.name = data.name;    //   this.leftForm.subject = parseInt(data.subjectIdList);    //   // 激活声部下的所有老师    //   this.changeSubject(parseInt(data.subjectIdList));    //   // 设置老师    //   this.leftForm.teacher = data.userId;    //   this.setSection(data.userId);    //   // 课程形式    //   this.leftForm.courseType = data.vipGroupCategoryId;    //   // 获取课程形式下的活动方案    //   this.changeType(this.leftForm.courseType);    //   // 根据课程形式获取活动方案    //   this.leftForm.activeType = data.vipGroupActivityId;    //   setTimeout((res) => {    //     this.chioseActive(data.vipGroupActivityId);    //   }, 1000);    //   this.leftForm.section = data.teacherSchoolId;    //   this.leftForm.classNum = data.studentNum;    //   this.leftForm.classTime = data.singleClassMinutes;    //   this.leftForm.signUpStart = data.registrationStartTime;    //   this.leftForm.signUpEnd = data.paymentExpireDate;    //   this.centerForm.onlineCourseNum = data.onlineClassesNum;    //   this.centerForm.offlineCourseNum = data.offlineCourseNum;    //   /**    //    *   rightForm: {    //     onlineCourse: '',    //     offlineCourse: '',    //     onlinePrice: '',    //     offlinePrice: '',    //     allPrice: ''    //   },    //    *    //    */    //   this.rightForm.onlineCourse = data.onlineTeacherSalary;    //   this.rightForm.onlinePrice = data.onlineClassesUnitPrice;    //   this.rightForm.offlineCourse = data.offlineTeacherSalary;    //   this.rightForm.offlinePrice = data.offlineClassesUnitPrice;    //   this.rightForm.allPrice = data.totalPrice;    //   //subjectIdList    // },    getOrganStudentList(organId) {      if (organId) {        queryOrganStudentList({          rows: 50,          organId: organId        }).then(res => {          if (res.code == 200) {            this.studentList = res.data.rows;          }        });      }    },    remoteMethod(query) {      if (query !== "") {        this.remoteLoading = true;        // 发请求搜索        const url = "/api-web/studentManage/queryOrganStudentList";        const options = {          method: "get",          headers: {            Authorization: getToken(),            tenantId: getTenantId()          },          params: {            rows: 9999,            search: query,            organId: this.leftForm.classOrganId          },          url        };        this.remoteLoading = true;        // this.studentList = []        axios(options).then(res => {          this.remoteLoading = false;          let result = res.data;          if (result.code == 200) {            // Array.prototype.splice.apply(this.studentList, result.data.rows);            if (result.data.rows && result.data.rows.length > 0) {              result.data.rows.forEach(item => {                this.studentList.unshift(item);              });              this.studentList = this.deweight(this.studentList, "userId");            }            // this.studentList = this.studentList.concat(result.data.rows);          }        });        // queryStudentList({ rows: 100, search: query }).then(res => {        //   if (res.code == 200) {        //     this.remoteLoading = false;        //     this.studentList = this.studentList.concat(res.data.rows);        //     this.unique(this.studentList, "userId");        //   }        // });      }    },    changeStudent(val) {      this.computationalBtn = false;      this.chioseActive();      this.leftForm.activeType = "";      this.activeStudentList = [];      this.chioseStudent = val;      let discount = this.rightForm.discount ? this.rightForm.discount : 100;      this.studentList.forEach(stu => {        if (val.indexOf(stu.userId) != -1) {          this.activeStudentList.push({            studentId: stu.userId,            userName: stu.username,            onlineClassesUnitPrice: this.rightForm.onlinePrice,            offlineClassesUnitPrice: this.rightForm.offlinePrice,            paymentPrice: this.fixedCourseNumFlag ? this.marketPrice : ""          });        }      });      if (        this.leftForm.courseType &&        this.leftForm.teacher &&        this.leftForm.students &&        this.leftForm.students.length >= 1      ) {        let studentIds = this.leftForm.students.join(",");        // 根据课程类型获取活动方案        vipGroupActivityFind({          categoryId: this.leftForm.courseType,          teacherId: this.leftForm.teacher,          studentIds,          activityChannel: 2        }).then(res => {          if (res.code == 200) {            this.activeList = res.data;          }        });      }    },    changeStudentP(val) {      this.chioseActive();      this.leftForm.activeType = "";      this.activeStudentList = [];      this.chioseStudent = val;      let discount = this.rightForm.discount ? this.rightForm.discount : 100;      this.studentList.forEach(stu => {        if (val == stu.userId) {          this.activeStudentList.push({            studentId: stu.userId,            userName: stu.username,            onlineClassesUnitPrice: this.rightForm.onlinePrice,            offlineClassesUnitPrice: this.rightForm.offlinePrice,            paymentPrice: ""          });        }      });      if (this.leftForm.teacher && this.leftForm.students) {        let studentIds = this.leftForm.students;        // 根据课程类型获取活动方案        vipGroupActivityFind({          categoryId: this.leftForm.courseType,          teacherId: this.leftForm.teacher,          studentIds,          courseType: this.courseType,          activityChannel: 2        }).then(res => {          if (res.code == 200) {            this.activeList = res.data;            this.classTimeList = [25];            this.hasOffline = false;          }        });      }    },    // 制定属性去重    deweight(arr, key) {      let res = [];      arr.forEach(item => {        let list = [];        res.forEach(resitem => {          list.push(resitem[key]);        });        if (list.indexOf(item[key]) === -1) {          res.push(item);        }      });      return res;    },    getStartTime(val) {      if (val) {        let date = dayjs(new Date()).format("YYYY-MM-DD");        this.maskForm.endTime = addTimerFormMinute(          date,          val,          this.leftForm.classTime        );      } else {        this.maskForm.endTime = "";      }      if (!this.maskForm.endTime) {        this.maskForm.startTime = "";      }    },    changeStudentMoney(val) {      if (val) {        this.computationalBtn = false;      }    }  }  // watch: {  //   rightForm: {  //     handler (newName, oldName) {  //       this.computationalBtn = false  //     },  //     deep: true  //   }  // }};</script><style lang="scss" scoped>.computeMoney {  margin-top: 10px;  float: right;}.m-core {  // margin-top: 30px;  // display: flex;  // flex-direction: row;  // justify-content: space-around;  .el-input {    width: 180px;  }  h4 {    font-size: 16px;    background-color: #ccc;    color: #fff;    // text-align: center;    width: 100%;    height: 40px;    line-height: 40px;    margin-bottom: 20px;    padding: 0 20px;  }  // .vipLeft {  //   width: 400px;  //   // h4 {  //   //   font-size: 16px;  //   //   background-color: #ccc;  //   //   color: #fff;  //   //   text-align: center;  //   //   width: 100%;  //   //   height: 40px;  //   //   line-height: 40px;  //   //   margin-bottom: 20px;  //   // }  // }  // .center {  //   width: 400px;  // }  .right {    margin-top: 20px;  }}.vipMsg {  margin-bottom: 20px;}.planList {  padding: 0 25px;  .planTop {    height: 40px;    line-height: 40px;    display: flex;    flex-direction: row;    justify-content: space-between;    border-bottom: 1px solid #ccc;    margin-top: 20px;    > p {      font-size: 14px;    }  }  .planCore {    .row {      width: 100%;      display: flex;      flex-direction: row;      justify-content: space-between;      flex-wrap: nowrap;      height: 40px;      line-height: 40px;      font-size: 14px;      text-align: center;      div {        width: 87px;      }      // div {      //   &:nth-child(1) {      //     text-align: left;      //   }      // }    }  }  .nomore {    display: flex;    flex-direction: row;    justify-content: center;    align-items: center;    height: 40px;  }}.okBtn {  width: 120px;  height: 40px;  line-height: 40px;  text-align: center;  color: #fff;  border-radius: 4px;  margin-right: 20px;  cursor: pointer;  background-color: #f97215;  float: right;}.submitP {  margin-bottom: 20px;  font-size: 14px;  padding-left: 24px;}</style>
 |