<template>
  <div class="main">
    <div class="title">
      <!-- <img src="../../../assets/imgS/leftBack.png" alt="" @click="back"> -->
      <div class="title1">
        <div>{{ resourceClassName }}</div>
        <div>
          请按照要求填写资源申请单，填写完成后，需打印、签字、盖章，并上传盖章后的电子版资源申请单，方可成功提交资源申请单
        </div>
      </div>
    </div>
    <div class="content">
      <div class="stepContent"></div>
      <div v-if="active == 0" class="active1">
        <div class="module1">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply1.png" alt="" />
            <div>负责人信息</div>
          </div>
          <el-form
            label-position="right"
            ref="form1"
            :model="form1"
            :rules="rules1"
            class="formStyle1"
            label-width="100px"
            :disabled="parentForm.applyStatus == 0"
          >
            <el-col :span="9" v-if="responsiblePerson.companyName.isShow">
              <el-form-item label="单位名称" prop="companyName">
                <el-input
                  placeholder="请输入单位名称"
                  v-model="form1.companyName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.companyClassId.isShow">
              <el-form-item label="单位类别" prop="companyClassId">
                <el-select
                  v-model="form1.companyClassId"
                  placeholder="请选择单位类别"
                  @change="companyClassNameChange"
                >
                  <el-option
                    v-for="(item, index) in companyClassList"
                    :key="index"
                    :label="item.className"
                    :value="item.classId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.name.isShow">
              <el-form-item label="项目负责人" prop="name">
                <el-input placeholder="请输入项目负责人" v-model="form1.name" />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.professionalTitle.isShow">
              <el-form-item label="职称" prop="professionalTitle">
                <el-input
                  placeholder="请输入职称"
                  v-model="form1.professionalTitle"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.deptName.isShow">
              <el-form-item label="部门/院系" prop="deptName">
                <el-input
                  placeholder="请输入部门/院系"
                  v-model="form1.deptName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.occupation.isShow">
              <el-form-item label="职业" prop="occupation">
                <el-input placeholder="请输入职业" v-model="form1.occupation" />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.phone.isShow">
              <el-form-item label="手机号" prop="phone">
                <el-input placeholder="请输入手机号" v-model="form1.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="responsiblePerson.email.isShow">
              <el-form-item label="E-mail" prop="email">
                <el-input placeholder="请输入E-mail" v-model="form1.email" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="module2" v-if="resourceClassName != '网络申请'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply2.png" alt="" />
            <div>项目信息</div>
          </div>
          <el-form
            label-position="right"
            ref="form2"
            :model="form2"
            :rules="rules2"
            class="formStyle2"
            label-width="100px"
            :disabled="parentForm.applyStatus == 0"
          >
            <el-col :span="9" v-if="projectInfo.projectName.isShow">
              <el-form-item label="项目名称" prop="projectName">
                <el-input
                  placeholder="请输入项目名称"
                  v-model="form2.projectName"
                />
              </el-form-item>
            </el-col>

            <el-col :span="9" v-if="projectInfo.projectNumber.isShow">
              <el-form-item label="项目编号" prop="projectNumber">
                <el-input
                  placeholder="请输入项目编号"
                  v-model="form2.projectNumber"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="projectInfo.majorField.isShow">
              <el-form-item label="专业领域" prop="majorField">
                <el-input
                  placeholder="请输入专业领域"
                  v-model="form2.majorField"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="projectInfo.projectClassId.isShow">
              <el-form-item label="项目来源类别" prop="projectClassName">
                <el-select
                  v-model="form2.projectClassId"
                  placeholder="请选择项目来源类别"
                  @change="projectClassNameChange"
                >
                  <el-option
                    v-for="item in projectClassList"
                    :key="item.classId"
                    :label="item.className"
                    :value="item.classId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="9"
              v-if="
                resourceClassName != '云计算' &&
                projectInfo.projectCycleRange.isShow
              "
            >
              <el-form-item label="项目起止时间" prop="projectCycleRange">
                <el-date-picker
                  v-model="form2.projectCycleRange"
                  type="daterange"
                  range-separator="——"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="dateRangeChange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col
              :span="9"
              v-if="
                resourceClassName != '云计算' &&
                resourceClassName !== '裸节点' &&
                resourceClassName != '存储' &&
                projectInfo.useDemand.isShow
              "
            >
              <el-form-item label="使用需求" prop="useDemand">
                <el-radio-group v-model="form2.useDemand">
                  <el-radio label="0">专用</el-radio>
                  <el-radio label="1" v-if="resourceClassName !== '裸节点'"
                    >共享</el-radio
                  >
                  <el-radio label="2">急用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col
              :span="22"
              v-if="
                resourceClassName != '云计算' &&
                resourceClassName != '存储' &&
                projectInfo.workloadEstimate.isShow
              "
            >
              <el-form-item label="任务量估算" prop="workloadEstimate">
                <el-input
                  type="textarea"
                  placeholder="请输入任务量估算"
                  style="width: 99.4%"
                  maxlength="100"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  v-model="form2.workloadEstimate"
                />
              </el-form-item>
            </el-col>

            <el-col :span="9" v-if="projectInfo.contractName.isShow">
              <el-form-item label="合同名称" prop="contractName">
                <el-input
                  placeholder="请输入合同名称"
                  v-model="form2.contractName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9" v-if="projectInfo.contractNumber.isShow">
              <el-form-item label="合同编号" prop="contractNumber">
                <el-input
                  placeholder="请输入合同编号"
                  v-model="form2.contractNumber"
                />
              </el-form-item>
            </el-col>
            <el-col :span="17" v-if="resourceClassName == '存储'">
              <el-form-item
                label="存储额度"
                prop="storageLimit"
                class="formItem"
              >
                <div style="display: flex; align-items: center">
                  <el-slider
                    style="width: 600px; margin-right: 20px"
                    v-model="form2.storageLimit"
                    :max="1024"
                  >
                  </el-slider>
                  <el-input-number
                    style="width: 100px"
                    v-model="form2.storageLimit"
                    :controls="false"
                    :min="0"
                    :max="1024"
                    label="描述文字"
                  ></el-input-number>
                  <el-select
                    style="width: 100px"
                    v-model="form2.storageLimitUnit"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col
              :span="3"
              label-width="0"
              v-if="resourceClassName == '存储'"
            >
            </el-col>
            <el-col :span="9" v-if="projectInfo.contractAnnex.isShow">
              <el-form-item
                label="合同附件"
                prop="contractAnnex"
                v-if="fileList.length > 0"
              >
                <el-upload
                  class="upload-demo"
                  :action="$baseUrl + '/api/common/uploadFileLocal'"
                  :limit="1"
                  :on-change="handleChange"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload2"
                    >点击上传</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    支持扩展名：pdf.doc.jpg.png…
                  </div>
                </el-upload>
                <el-link
                  v-if="fileList.length > 0"
                  type="primary"
                  :underline="false"
                >
                  <span v-for="item in fileList" @click="downloads(item.url)">
                    {{ item.name }}</span
                  >
                </el-link>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="module2">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>用户使用人员信息</div>
          </div>
          <div class="tableData">
            <div class="tableTitle" @click="addChildren" v-if="active != 0">
              新增子账号
            </div>
            <el-table
              :disabled="parentForm.applyStatus == 0"
              :data="userInfoList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
                v-if="userInfoListForm.sort.isShow"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                v-if="userInfoListForm.name.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
                  <el-input v-model="scope.row.name" v-if="scope.row.isEdit" />
                </template>
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                show-overflow-tooltip
                v-if="userInfoListForm.phone.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{ scope.row.phone }}</span>
                  <el-input v-model="scope.row.phone" v-if="scope.row.isEdit" />
                </template>
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱"
                v-if="userInfoListForm.email.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{ scope.row.email }}</span>
                  <el-input v-model="scope.row.email" v-if="scope.row.isEdit" />
                </template>
              </el-table-column>
              <el-table-column
                prop="companyName"
                label="工作单位"
                show-overflow-tooltip
                v-if="userInfoListForm.companyName.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.companyName
                  }}</span>
                  <el-input
                    v-model="scope.row.companyName"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="deptName"
                label="部门/院系"
                v-if="userInfoListForm.deptName.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{ scope.row.deptName }}</span>
                  <el-input
                    v-model="scope.row.deptName"
                    v-if="scope.row.isEdit"
                    @keyup.enter.native="save(scope.row.sort)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="professionalTitle"
                label="职称/职务"
                v-if="userInfoListForm.professionalTitle.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.professionalTitle
                  }}</span>
                  <el-input
                    v-model="scope.row.professionalTitle"
                    v-if="scope.row.isEdit"
                    @keyup.enter.native="save(scope.row.sort)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="occupation"
                label="职业"
                v-if="userInfoListForm.occupation.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.occupation
                  }}</span>
                  <el-input
                    v-model="scope.row.occupation"
                    v-if="scope.row.isEdit"
                    @keyup.enter.native="save(scope.row.sort)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="jobNumber"
                label="工号/学号"
                v-if="userInfoListForm.jobNumber.isShow"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.jobNumber
                  }}</span>
                  <el-input
                    v-model="scope.row.jobNumber"
                    v-if="scope.row.isEdit"
                    @keyup.enter.native="save(scope.row.sort)"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="edit(scope.row.sort)"
                    v-if="!scope.row.isEdit"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="save(scope.row.sort)"
                    v-if="scope.row.isEdit"
                    >保存</el-button
                  >
                  <el-button type="text" @click="del(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="module2" v-if="resourceClassName == '云计算'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>业务映射</div>
          </div>
          <div class="tableData">
            <div class="tableTitle" @click="addChildren3" v-if="active != 0">
              新增业务映射
            </div>
            <el-table
              :disabled="parentForm.applyStatus == 0"
              :data="businessMappingList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              ></el-table-column>
              <el-table-column prop="mappingAddress" label="业务映射地址">
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.mappingAddress
                  }}</span>
                  <el-input
                    v-model="scope.row.mappingAddress"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="mappingPort"
                label="业务映射端口"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.mappingPort
                  }}</span>
                  <el-input
                    v-model="scope.row.mappingPort"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="edit3(scope.row.sort)"
                    v-if="!scope.row.isEdit"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="save3(scope.row.sort)"
                    v-if="scope.row.isEdit"
                    >保存</el-button
                  >
                  <el-button type="text" @click="del3(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="module2">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>需求信息</div>
          </div>
          <el-form
            :disabled="parentForm.applyStatus == 0"
            inline
            label-position="right"
            :model="form3"
            class="formStyle3"
          >
            <el-col :span="22">
              <el-form-item
                label="需求内容"
                prop="demandContent"
                :rules="{
                  required: true,
                  message: '请输入需求内容',
                  trigger: 'blur',
                }"
              >
                <el-input
                  type="textarea"
                  placeholder="请输入需求内容"
                  style="width: 99.4%"
                  maxlength="100"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  v-model="form3.demandContent"
                />
              </el-form-item>
            </el-col>
          </el-form>
          <div v-if="parentForm.applyStatus == 0">
            <div
              style="margin-bottom: 20px"
              v-if="
                resourceClassName == '裸节点' || resourceClassName == '网络申请'
              "
            >
              <div style="margin-bottom: 10px">
                是否需要上网或公网访问服务器需求，如需要请填写
                <el-link
                  v-if="parentForm.networkType == 0"
                  type="primary"
                  :underline="false"
                  @click="downloads(fileDownload.split(',')[0])"
                >
                  《有线网络资源申请表》
                </el-link>

                <el-link
                  v-if="parentForm.networkType == 0"
                  type="primary"
                  :underline="false"
                  @click="downloads(fileDownload.split(',')[1])"
                >
                  《无线网络资源申请表》
                </el-link>

                <el-link
                  v-if="parentForm.networkType == 1"
                  type="primary"
                  :underline="false"
                  @click="downloads(fileDownload)"
                >
                  《VPN网络资源申请表》
                </el-link>
                <el-link
                  v-if="
                    parentForm.networkType == 2 || resourceClassName == '裸节点'
                  "
                  type="primary"
                  :underline="false"
                  @click="downloads(fileDownload)"
                >
                  《网络访问资源申请表》
                </el-link>

                填写完成后单位部门签字并盖章，生成PDF格式上传至下方入口。如不需要请忽略
              </div>
              <div>
                <el-upload
                  class="upload-demo"
                  :action="$baseUrl + '/api/common/uploadFileLocal'"
                  :limit="3"
                  :on-change="handleChangeApply"
                  :on-remove="handleMove"
                >
                  <el-button
                    :disabled="parentForm.applyStatus == 0"
                    size="small"
                    type="primary"
                    icon="el-icon-upload2"
                    >点击上传</el-button
                  >
                </el-upload>
                <el-link
                  v-if="fileListApply.length > 0"
                  type="primary"
                  :underline="false"
                >
                  <span
                    v-for="item in fileListApply"
                    @click="downloads(item.url)"
                  >
                    {{ item.name }}</span
                  >
                </el-link>
              </div>
            </div>
          </div>
        </div>
        <div class="module2" v-if="resourceClassName != '网络申请'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>用户端网络信息</div>
          </div>
          <div class="tableData">
            <div
              class="tableTitle"
              @click="addChildren1"
              v-if="parentForm.applyStatus != 0"
            >
              新增接入方式
            </div>
            <div class="tableTitle" v-else>新增接入方式</div>
            <el-table
              :data="userNetworkInfoList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              ></el-table-column>
              <el-table-column prop="accessMethod" label="接入方式">
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.accessMethod
                  }}</span>
                  <el-input
                    v-model="scope.row.accessMethod"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="bandwidth"
                label="宽带"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.bandwidth
                  }}</span>
                  <el-input
                    v-model="scope.row.bandwidth"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="ispName" label="ISP地址">
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{ scope.row.ispName }}</span>
                  <el-input
                    v-model="scope.row.ispName"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="ipAddress"
                label="互联网IP地址"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.ipAddress
                  }}</span>
                  <el-input
                    v-model="scope.row.ipAddress"
                    v-if="scope.row.isEdit"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="accessAddress" label="接入地址">
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.accessAddress
                  }}</span>
                  <el-input
                    v-model="scope.row.accessAddress"
                    v-if="scope.row.isEdit"
                    @keyup.enter.native="save1(scope.row.sort)"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="edit1(scope.row.sort)"
                    v-if="!scope.row.isEdit"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="save1(scope.row.sort)"
                    v-if="scope.row.isEdit"
                    >保存</el-button
                  >
                  <el-button type="text" @click="del1(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div
          class="module2"
          v-if="
            resourceClassName != '网络申请' && resourceClassName != '云计算'
          "
        >
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply4.png" alt="" />
            <div>使用时间</div>
          </div>
          <el-form
            :disabled="parentForm.applyStatus == 0"
            inline
            label-position="right"
            :model="form4"
            class="formStyle3"
          >
            <el-col :span="20">
              <el-form-item label="并行编程的基础" prop="parallelProgramming">
                <el-radio-group v-model="form4.parallelProgramming">
                  <el-radio :label="0">未使用</el-radio>
                  <el-radio :label="1">偶尔使用</el-radio>
                  <el-radio :label="2">经常使用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="其他需求" prop="otherDemand">
                <el-input
                  type="textarea"
                  v-model="form4.otherDemand"
                  placeholder="请输入其他需求"
                  style="width: 99.4%"
                  maxlength="100"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                />
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="使用时间" prop="useTimeRange">
                <el-date-picker
                  v-model="form4.useTimeRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="使用频率" prop="useFrequency">
                <el-radio-group v-model="form4.useFrequency">
                  <el-radio :label="0">每日</el-radio>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="周一/周二/周三/周四/周五"
                    placement="top"
                  >
                    <el-radio :label="1" :disabled="isDisabled">每周</el-radio>
                  </el-tooltip>
                  <el-radio :label="2" :disabled="isDisabled">每月</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="module2" v-if="resourceClassName == '云计算'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply4.png" alt="" />
            <div>使用情况</div>
          </div>
          <el-form
            :disabled="parentForm.applyStatus == 0"
            inline
            label-position="right"
            :model="form4"
            class="formStyle3"
          >
            <el-col :span="10">
              <el-form-item label="使用时间" prop="useTimeRange">
                <el-date-picker
                  v-model="form4.useTimeRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="module2" v-if="resourceClassName != '网络申请'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply4.png" alt="" />
            <!-- <div>{{ resourceClassName == '云计算' ? '资源信息' : '资源情况' }}</div> -->
            <div>资源信息</div>
          </div>
          <el-form
            :disabled="parentForm.applyStatus == 0"
            inline
            label-position="right"
            :model="softWareInfo"
            class="formStyle3"
            label-width="80px"
          >
            <el-col :span="20">
              <el-form-item
                label="型号"
                prop="resourceSoftwareVersion"
                v-if="
                  resourceClassName == 'HPC' ||
                  resourceClassName == '云计算' ||
                  resourceClassName == '裸节点'
                "
              >
                <el-select
                  v-model="softWareInfo.resourceSoftwareVersion"
                  placeholder="请选择"
                  style="width: 50%"
                  @change="resourceSoftwareVersionChange"
                >
                  <el-option
                    v-for="(item, index) in resourceSoftwareVersionList"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="10"
              v-if="resourceClassName == 'HPC' || resourceClassName == '裸节点'"
            >
              <el-form-item label="核心数" prop="softwareCores">
                <el-input v-model="softWareInfo.softwareCores" />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="resourceClassName == 'HPC'">
              <el-form-item label="存储大小" prop="softwareStorageSize">
                <el-input v-model="softWareInfo.softwareStorageSize" />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="resourceClassName == '云计算'">
              <el-form-item label="镜像" prop="mirror">
                <el-cascader
                  v-model="softWareInfo.mirror"
                  :options="mirrorList"
                  :props="{ value: 'dictValue', label: 'dictValue' }"
                  @change="mirrorVersionChange"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="resourceClassName == '云计算'">
              <el-form-item label="数量" prop="mirrorNum">
                <el-input
                  v-model="softWareInfo.mirrorNum"
                  type="number"
                  min="0"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="20"
              v-if="
                resourceClassName == '云计算' &&
                softWareInfo.resourceSoftwareVersion
              "
            >
              <div class="resourceSoftwareVersionStyle">
                <div>
                  当前选择规格:{{ softWareInfo.resourceSoftwareVersion }}
                </div>
                <div>
                  vCPU核心数：{{
                    softWareInfo.softwareCores
                  }}，GPU张数：0，内存：{{ softWareInfo.softwareMemory }}，
                  存储：100 GB
                </div>
              </div>
            </el-col>
            <el-col :span="10" v-if="resourceClassName == '裸节点'">
              <el-form-item label="内存" prop="softwareMemory">
                <el-input v-model="softWareInfo.softwareMemory" />
              </el-form-item>
            </el-col>

            <el-col :span="10" v-if="resourceClassName == '裸节点'">
              <el-form-item label="存储大小" prop="softwareMemory">
                <el-input
                  v-model="softWareInfo.softwareStorageSize"
                  type="number"
                  :min="0"
                />
              </el-form-item>
            </el-col>

            <el-col :span="10" v-if="resourceClassName == '裸节点'">
              <el-form-item label="存储单位" prop="softwareMemory">
                <el-select
                  v-model="softWareInfo.softwareStorageUnit"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="GB" value="GB" />
                  <el-option label="TB" value="TB" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="resourceClassName == '裸节点'">
              <el-form-item label="节点数" prop="softwareMemory">
                <el-input
                  v-model="softWareInfo.softwareNode"
                  type="number"
                  :min="0"
                />
              </el-form-item>
            </el-col>

            <el-col
              :span="20"
              style="margin-left: 40px"
              v-if="
                resourceClassName == '云计算' || resourceClassName == '存储'
              "
            >
              <div class="tableTitle1" v-if="parentForm.applyStatus == 0">
                {{
                  resourceClassName == "云计算" ? "新增存储磁盘" : "新增资源"
                }}
              </div>
              <div class="tableTitle1" @click="addChildren4" v-else>
                {{
                  resourceClassName == "云计算" ? "新增存储磁盘" : "新增资源"
                }}
              </div>
              <div class="storageList">
                <div
                  v-for="(item, index) in softWareInfo.itemList"
                  :key="index"
                  class="storageItem"
                >
                  <div>存储{{ item.sort }}</div>
                  <div v-if="resourceClassName == '云计算'">
                    <el-input
                      type="number"
                      v-model="item.storeSize"
                      :min="0"
                      @input="typeOfItem(index, $event)"
                    />
                  </div>
                  <div>
                    <el-slider v-model="item.storeSize" :min="0" :max="1024" />
                  </div>
                  <div>
                    <el-select
                      v-model="item.storeUnit"
                      placeholder="请选择"
                      style="width: 80%"
                      @change="softwareStorageUnitChange(index, $event)"
                    >
                      <el-option label="GB" value="GB" />
                      <el-option label="TB" value="TB" />
                    </el-select>
                  </div>
                  <div
                    @click="del4(index)"
                    style="color: red"
                    v-if="parentForm.applyStatus != 0"
                  >
                    删除
                  </div>
                </div>
              </div>
            </el-col>
          </el-form>
        </div>
        <div
          class="module2"
          v-if="resourceClassName == 'HPC' || resourceClassName != '裸节点'"
        >
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply4.png" alt="" />
            <div>软件及版本</div>
          </div>
          <div class="tableData">
            <div class="addCustom">
              <el-button
                @click="addChildren2('0')"
                :disabled="parentForm.applyStatus == 0"
                >添加超算软件</el-button
              >
              <el-button
                @click="addChildren2('1')"
                :disabled="parentForm.applyStatus == 0"
                >添加自主安装软件</el-button
              >
              <el-button
                @click="addChildren2('2')"
                :disabled="parentForm.applyStatus == 0"
                >添加编辑器</el-button
              >
            </div>
            <el-table
              :data="softWareInfo.itemList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              />
              <el-table-column prop="itemType" label="类型">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.itemType == "0"
                      ? "超算平台软件"
                      : scope.row.itemType == "1"
                      ? "自主安装软件"
                      : scope.row.itemType == "2"
                      ? "编辑器"
                      : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="softwareName" label="软件名称">
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.softwareName
                  }}</span>
                  <el-input
                    v-model="scope.row.softwareName"
                    v-if="scope.row.isEdit && scope.row.itemType == '1'"
                  />
                  <el-select
                    v-model="scope.row.softwareName"
                    placeholder="请选择"
                    v-if="scope.row.isEdit && scope.row.itemType == '0'"
                    @change="chooseSoftwareName"
                  >
                    <el-option
                      v-for="(item, index) in softwareNameList"
                      :key="index"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="scope.row.softwareName"
                    placeholder="请选择"
                    v-if="scope.row.isEdit && scope.row.itemType == '2'"
                    @change="chooseSoftwareName"
                  >
                    <el-option
                      v-for="(item, index) in softwareNameList"
                      :key="index"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="softwareVersion"
                label="软件版本"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.isEdit">{{
                    scope.row.softwareVersion
                  }}</span>
                  <el-input
                    v-model="scope.row.softwareVersion"
                    v-if="scope.row.isEdit && scope.row.itemType == '1'"
                  />
                  <el-select
                    v-model="scope.row.softwareVersion"
                    placeholder="请选择"
                    v-if="scope.row.isEdit && scope.row.itemType == '0'"
                  >
                    <el-option
                      v-for="(item, index) in softwareVersionList"
                      :key="index"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="scope.row.softwareVersion"
                    placeholder="请选择"
                    v-if="scope.row.isEdit && scope.row.itemType == '2'"
                  >
                    <el-option
                      v-for="(item, index) in softwareVersionList"
                      :key="index"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="edit2(scope.row.sort)"
                    v-if="!scope.row.isEdit"
                    :disabled="parentForm.applyStatus == 0"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="save2(scope.row.sort)"
                    v-if="scope.row.isEdit"
                    :disabled="parentForm.applyStatus == 0"
                    >保存</el-button
                  >
                  <el-button
                    type="text"
                    @click="del2(scope.$index)"
                    :disabled="parentForm.applyStatus == 0"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="module2">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>工单说明</div>
          </div>
          <el-form
            :disabled="parentForm.applyStatus == 0"
            inline
            label-position="right"
            :model="form3"
            class="formStyle3"
          >
            <el-col :span="22">
              <el-form-item label="工单说明" prop="orderProfile">
                <el-input
                  type="textarea"
                  placeholder="请输入工单说明"
                  style="width: 99.4%"
                  maxlength="100"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  v-model="form3.orderProfile"
                />
              </el-form-item>
            </el-col>
          </el-form>
          <div class="dialog_footer1">
            <div></div>
            <div>
              <el-button
                :disabled="parentForm.applyStatus == 0"
                type="primary"
                @click="next"
                >提 交</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="active == 1" class="active1">
        <div class="module1">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply1.png" alt="" />
            <div>负责人信息</div>
          </div>
          <el-descriptions
            :column="2"
            border
            labelClassName="descriptionsLabel"
            contentClassName="descriptionsContent"
          >
            <el-descriptions-item label="单位名称">{{
              form1.companyName
            }}</el-descriptions-item>
            <el-descriptions-item label="单位类别">{{
              form1.companyClassName
            }}</el-descriptions-item>
            <el-descriptions-item label="项目负责人">{{
              form1.name
            }}</el-descriptions-item>
            <el-descriptions-item label="职称">{{
              form1.professionalTitle
            }}</el-descriptions-item>
            <el-descriptions-item label="部门/院系">{{
              form1.deptName
            }}</el-descriptions-item>
            <el-descriptions-item label="职业">{{
              form1.occupation
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              form1.phone
            }}</el-descriptions-item>
            <el-descriptions-item label="E-mail">{{
              form1.email
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="module2" v-if="resourceClassName != '网络申请'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply2.png" alt="" />
            <div>项目信息</div>
          </div>
          <el-descriptions
            :column="2"
            border
            labelClassName="descriptionsLabel"
            contentClassName="descriptionsContent"
          >
            <el-descriptions-item label="项目名称">{{
              form2.projectName
            }}</el-descriptions-item>
            <el-descriptions-item label="项目编号">{{
              form2.projectNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="专业领域">{{
              form2.majorField
            }}</el-descriptions-item>
            <el-descriptions-item label="项目来源">{{
              form2.projectSource
            }}</el-descriptions-item>
            <el-descriptions-item label="项目类别">{{
              form2.projectClassName
            }}</el-descriptions-item>
            <el-descriptions-item label="项目起止时间">{{
              form2.projectCycleRange[0]
                ? form2.projectCycleRange[0] + "-" + form2.projectCycleRange[1]
                : ""
            }}</el-descriptions-item>
            <el-descriptions-item
              label="使用需求"
              v-if="resourceClassName != '存储'"
              >{{
                form2.useDemand == "0"
                  ? "专用"
                  : form2.useDemand == "1"
                  ? "共享"
                  : form2.useDemand == "2"
                  ? "急用"
                  : ""
              }}</el-descriptions-item
            >
            <el-descriptions-item
              v-if="resourceClassName == '存储'"
              label="存储额度"
              >{{ form2.contractName }}</el-descriptions-item
            >
            <el-descriptions-item label="合同名称">{{
              form2.contractName
            }}</el-descriptions-item>
            <el-descriptions-item label="合同编号">{{
              form2.contractNumber
            }}</el-descriptions-item>
            <el-descriptions-item
              v-if="resourceClassName != '存储'"
              label="任务量估算"
              :span="2"
              >{{ form2.workloadEstimate }}</el-descriptions-item
            >
            <el-descriptions-item label="合同附件" :span="2">
              <!-- <a :href="'https://view.officeapps.live.com/op/view.aspx?src=' + (fileList[0] ? fileList[0].url : '')"
                target="_blank"> -->
              <span
                @click="downloads(fileList[0].url)"
                style="color: #0051aa; cursor: pointer"
              >
                {{ fileList[0] ? fileList[0].name : "" }}
              </span>
              <!-- </a> -->
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="module2">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>用户使用人员信息</div>
          </div>
          <el-table
            :data="userInfoList"
            :border="true"
            header-cell-class-name="headerClassName"
          >
            <el-table-column
              prop="sort"
              label="序号"
              width="90"
              align="center"
              fixed="left"
              v-if="userInfoListForm.sort.isShow"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              v-if="userInfoListForm.name.isShow"
            />
            <el-table-column
              prop="phone"
              label="手机号"
              show-overflow-tooltip
              v-if="userInfoListForm.phone.isShow"
            />
            <el-table-column
              prop="email"
              label="邮箱"
              v-if="userInfoListForm.email.isShow"
            />
            <el-table-column
              prop="companyName"
              label="工作单位"
              show-overflow-tooltip
              v-if="userInfoListForm.companyName.isShow"
            />
            <el-table-column
              prop="deptName"
              label="部门/院系"
              v-if="userInfoListForm.deptName.isShow"
            />
            <el-table-column
              prop="professionalTitle"
              label="职称/职务"
              v-if="userInfoListForm.professionalTitle.isShow"
            />
            <el-table-column
              prop="occupation"
              label="职业"
              v-if="userInfoListForm.occupation.isShow"
            />
            <el-table-column
              prop="jobNumber"
              label="工号/学号"
              v-if="userInfoListForm.jobNumber.isShow"
            />
          </el-table>
        </div>
        <div class="module2" v-if="resourceClassName == '云计算'">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply3.png" alt="" />
            <div>业务映射</div>
          </div>
          <el-table
            :data="businessMappingList"
            :border="true"
            header-cell-class-name="headerClassName"
          >
            <el-table-column
              prop="sort"
              label="序号"
              width="90"
              align="center"
              fixed="left"
            ></el-table-column>
            <el-table-column prop="mappingAddress" label="业务映射地址" />
            <el-table-column prop="mappingPort" label="业务映射端口" />
          </el-table>
        </div>
        <div class="module2">
          <div class="moduleTitle">
            <img src="../../../assets/imgS/apply4.png" alt="" />
            <div>需求信息</div>
          </div>
          <el-descriptions
            :column="2"
            border
            labelClassName="descriptionsLabel1"
            contentClassName="descriptionsContent"
          >
            <el-descriptions-item label="需求内容" :span="2">{{
              form3.demandContent
            }}</el-descriptions-item>
            <el-descriptions-item label="盖章材料" :span="2">
                      <el-link
                  v-if="applyFileList.length > 0"
                  type="primary"
                  :underline="false"
                >
                  <span v-for="item in applyFileList" @click="downloads(item.annexUrl)">
                    {{ item.annexName }}</span
                  >
                </el-link>
         
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <div class="module2" v-if="resourceClassName != '网络申请'">
            <div class="moduleTitle">
              <img src="../../../assets/imgS/apply3.png" alt="" />
              <div>用户端网络信息</div>
            </div>
            <el-table
              :data="userNetworkInfoList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              ></el-table-column>
              <el-table-column
                prop="accessMethod"
                label="接入方式"
              ></el-table-column>
              <el-table-column
                prop="bandwidth"
                label="宽带"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="ispName" label="ISP地址"></el-table-column>
              <el-table-column
                prop="ipAddress"
                label="互联网IP地址"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="accessAddress"
                label="接入地址"
              ></el-table-column>
            </el-table>
          </div>
          <div class="module2" v-if="resourceClassName != '网络申请'">
            <div class="moduleTitle">
              <img src="../../../assets/imgS/apply4.png" alt="" />
              <div>使用时间</div>
            </div>
            <el-descriptions
              :column="2"
              border
              labelClassName="descriptionsLabel"
              contentClassName="descriptionsContent"
            >
              <el-descriptions-item label="并行编程的基础">{{
                form4.parallelProgramming == "0"
                  ? "未使用"
                  : form4.parallelProgramming == "1"
                  ? "偶尔使用"
                  : form4.parallelProgramming == "2"
                  ? "经常使用"
                  : ""
              }}</el-descriptions-item>
              <el-descriptions-item label="其他需求">{{
                form4.otherDemand
              }}</el-descriptions-item>
              <el-descriptions-item label="使用时间">{{
                form4.useTimeRange[0]
                  ? form4.useTimeRange[0] + "-" + form4.useTimeRange[1]
                  : ""
              }}</el-descriptions-item>
              <el-descriptions-item label="使用频率">{{
                form4.useFrequency == "0"
                  ? "每日"
                  : form4.useFrequency == "1"
                  ? "每周"
                  : form4.useFrequency == "2"
                  ? "每月"
                  : ""
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="module2" v-if="resourceClassName != '网络申请'">
            <div class="moduleTitle">
              <img src="../../../assets/imgS/apply4.png" alt="" />
              <div>资源信息</div>
            </div>
            <el-descriptions
              :column="2"
              border
              labelClassName="descriptionsLabel"
              contentClassName="descriptionsContent"
            >
              <el-descriptions-item
                label="型号"
                :span="2"
                v-if="
                  resourceClassName == 'HPC' ||
                  resourceClassName == '云计算' ||
                  resourceClassName == '裸节点'
                "
                >{{
                  softWareInfo.resourceSoftwareVersion
                }}</el-descriptions-item
              >
              <el-descriptions-item
                label="核心数"
                v-if="resourceClassName == 'HPC'"
                >{{ softWareInfo.softwareCores }}</el-descriptions-item
              >
              <el-descriptions-item
                label="存储大小"
                v-if="resourceClassName == 'HPC'"
              >
                {{
                  softWareInfo.softwareStorageSize +
                  " " +
                  softWareInfo.softwareStorageUnit
                }}</el-descriptions-item
              >
              <el-descriptions-item
                label="镜像"
                v-if="resourceClassName == '云计算'"
              >
                {{
                  softWareInfo.mirrorParent + "/" + softWareInfo.mirrorVersion
                }}
              </el-descriptions-item>
              <el-descriptions-item
                label="数量"
                v-if="resourceClassName == '云计算'"
              >
                {{ softWareInfo.mirrorNum }}
              </el-descriptions-item>
              <el-descriptions-item
                label="核心数"
                v-if="resourceClassName == '裸节点'"
              >
                {{ softWareInfo.softwareCores }}
              </el-descriptions-item>
              <el-descriptions-item
                label="内存"
                v-if="resourceClassName == '裸节点'"
              >
                {{ softWareInfo.softwareMemory }}
              </el-descriptions-item>
              <el-descriptions-item
                label="存储"
                v-if="resourceClassName == '裸节点'"
              >
                {{
                  softWareInfo.softwareStorageSize +
                  " " +
                  softWareInfo.softwareStorageUnit
                }}
              </el-descriptions-item>
              <el-descriptions-item
                label="节点数"
                v-if="resourceClassName == '裸节点'"
              >
                {{ softWareInfo.softwareNode }}
              </el-descriptions-item>
            </el-descriptions>
            <el-table
              :data="softWareInfo.itemList"
              :border="true"
              header-cell-class-name="headerClassName"
              v-if="
                resourceClassName == '云计算' || resourceClassName == '存储'
              "
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              />
              <el-table-column prop="storeSize" label="磁盘存储大小" />
              <el-table-column prop="storeUnit" label="磁盘存储单位" />
            </el-table>
          </div>
          <div
            class="module2"
            v-if="resourceClassName == 'HPC' || resourceClassName == '裸节点'"
          >
            <div class="moduleTitle">
              <img src="../../../assets/imgS/apply4.png" alt="" />
              <div>软件及版本</div>
            </div>
            <el-table
              :data="softWareInfo.itemList"
              :border="true"
              header-cell-class-name="headerClassName"
            >
              <el-table-column
                prop="sort"
                label="序号"
                width="90"
                align="center"
                fixed="left"
              />
              <el-table-column prop="itemType" label="类型">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.itemType == "0"
                      ? "超算平台软件"
                      : scope.row.itemType == "1"
                      ? "自主安装软件"
                      : scope.row.itemType == "2"
                      ? "编辑器"
                      : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="softwareName"
                label="软件名称"
              ></el-table-column>
              <el-table-column
                prop="softwareVersion"
                label="软件版本"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
          <div class="module2" v-if="fileList1">
            <el-descriptions
              :column="2"
              border
              labelClassName="descriptionsLabel"
              contentClassName="descriptionsContent"
            >
              <el-descriptions-item label="盖章材料" :span="2">
                <!-- <a :href="'https://view.officeapps.live.com/op/view.aspx?src=' + (fileList1[0] ? fileList1[0].url : '')"
                  target="_blank"> -->
                <span
                  @click="downloads(fileList1[0].url)"
                  style="color: #0051aa; cursor: pointer"
                >
                  {{ fileList1[0] ? fileList1[0].name : "" }}
                </span>
                <!-- </a> -->
              </el-descriptions-item>
            </el-descriptions>
            <div class="dialog_footer1" v-if="parentForm.applyStatus == 4">
              <div></div>
              <div>
                <el-button @click="auditing(1)">驳回</el-button>
                <el-button
                  type="primary"
                  @click="auditing(0)"
                  v-hasPermi="['cs:csResourceOrderApply:check']"
                  >审核</el-button
                >
              </div>
            </div>
          </div>

          <div class="approval" v-if="showFlow">
            <div class="stepList">
              <el-steps
                direction="vertical"
                :active="currentActive"
                :space="70"
              >
                <el-step title="发起申请">
                  <template slot="description">
                    <!--<div><span>{{ launchInfo.nickName }}<span
                          style="color: red;">（{{launchInfo.nickName}}）</span>{{launchInfo.roles[0].roleName}}</span></div>-->
                    <div
                      v-if="
                        parentForm.applyStatus > 6 ||
                        parentForm.applyStatus == 4
                      "
                    >
                      <span>
                        {{
                          flowListObj && flowListObj.user
                            ? flowListObj.user.nickName
                            : ""
                        }}
                        {{
                          flowListObj &&
                          flowListObj.user &&
                          flowListObj.user.dept
                            ? flowListObj.user.dept.deptName
                            : flowListObj.user.roles.length > 0
                            ? flowListObj.user.roles[0].roleName
                            : ""
                        }}
                      </span>
                    </div>
                    <div
                      v-if="
                        (flowListObj.nodeList[0] &&
                          flowListObj.nodeList[0].approverResult != '0') ||
                        (flowListObj.nodeList[0] &&
                          flowListObj.nodeList[0].approverResult != null)
                      "
                    >
                      <span>{{
                        flowListObj.nodeList[0] &&
                        flowListObj.nodeList[0].approverTime
                      }}</span>
                      <span
                        style="color: green; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[0].approverResult == '1'
                        "
                        >审核通过</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[0].approverResult == '2'
                        "
                        >审核驳回</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[0].approverResult == '3'
                        "
                        >已转交</span
                      >
                    </div>
                  </template>
                </el-step>

                <el-step v-if="false">
                  <template slot="title">
                    <span>审批人</span>
                  </template>
                  <template slot="description">
                    <el-select
                      v-model="wxCurrentNodeApprover"
                      clearable
                      placeholder="请选择审批人"
                      @change="wxPersonChange"
                      v-if="parentForm.applyStatus == 6"
                    >
                      <el-option
                        v-for="item in personTotalList"
                        :key="item.userId"
                        :label="item.name"
                        :value="item.userId"
                      >
                      </el-option>
                    </el-select>
                    <div
                      v-if="
                        parentForm.applyStatus > 6 ||
                        parentForm.applyStatus == 4
                      "
                    >
                      <span style="padding-right: 5px">{{
                        flowListObj && flowListObj.nodeList.length > 0
                          ? flowListObj.nodeList[1].userName
                          : ""
                      }}</span>
                      <span>{{
                        flowListObj && flowListObj.nodeList.length > 0
                          ? flowListObj.nodeList[1].roleName
                          : ""
                      }}</span>
                    </div>
                    <div
                      v-if="
                        (flowListObj.nodeList[0] &&
                          flowListObj.nodeList[1].approverResult != '0') ||
                        (flowListObj.nodeList[0] &&
                          flowListObj.nodeList[1].approverResult != null)
                      "
                    >
                      <span>{{
                        flowListObj.nodeList[0] &&
                        flowListObj.nodeList[1].approverTime
                      }}</span>
                      <span
                        style="color: green; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[1].approverResult == '1'
                        "
                        >审核通过</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[1].approverResult == '2'
                        "
                        >审核驳回</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="
                          flowListObj.nodeList[0] &&
                          flowListObj.nodeList[1].approverResult == '3'
                        "
                        >已转交</span
                      >
                    </div>
                  </template>
                </el-step>

                <el-step
                  title="审批人"
                  v-for="(item, index) in personList"
                  :key="item.sort"
                >
                  <template slot="title">
                    <span>审批人</span>
                    <span
                      style="
                        padding-left: 20px;
                        color: #e81a1d;
                        font-size: 14px;
                        cursor: pointer;
                      "
                      @click="delPerson(index)"
                      v-if="index != 0 && parentForm.applyStatus == 6"
                      >删除审批人</span
                    >
                    <span
                      style="
                        padding-left: 20px;
                        color: #0051aa;
                        font-size: 14px;
                        cursor: pointer;
                      "
                      @click="addPerson"
                      v-if="index == 0 && parentForm.applyStatus == 6"
                      >添加审批人</span
                    >
                  </template>
                  <template slot="description">
                    <el-select
                      v-model="item.currentNodeApprover"
                      clearable
                      placeholder="请选择审批人"
                      @change="personChange(index, $event)"
                      v-if="parentForm.applyStatus == 6"
                    >
                      <el-option
                        v-for="item1 in personTotalList"
                        :key="item1.userId"
                        :label="item1.name"
                        :value="item1.userId"
                      >
                      </el-option>
                    </el-select>
                    <div
                      v-if="
                        parentForm.applyStatus > 6 ||
                        parentForm.applyStatus == 4
                      "
                    >
                      <span style="padding-right: 5px">{{
                        item.userName
                      }}</span>
                      <span>{{ item.roleName }}</span>
                    </div>
                    <div
                      v-if="
                        item.approverResult != '0' ||
                        item.approverResult != null
                      "
                    >
                      <span>{{ item.approverTime }}</span>
                      <span
                        style="color: green; padding-left: 5px"
                        v-if="item.approverResult == '1'"
                        >审核通过</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="item.approverResult == '2'"
                        >审核驳回</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="item.approverResult == '3'"
                        >已转交</span
                      >
                    </div>
                  </template>
                </el-step>

                <el-step
                  title="审批人"
                  v-for="(item, index) in flowListObj.nodeList"
                  v-if="item.nodeType == '0'"
                  :key="item.sort"
                >
                  <template slot="title">
                    <span>审批人</span>
                    <span
                      style="
                        padding-left: 20px;
                        color: #e81a1d;
                        font-size: 14px;
                        cursor: pointer;
                      "
                      @click="delPerson(index)"
                      v-if="index != 0 && parentForm.applyStatus == 6"
                      >删除审批人</span
                    >
                    <span
                      style="
                        padding-left: 20px;
                        color: #0051aa;
                        font-size: 14px;
                        cursor: pointer;
                      "
                      @click="addPerson"
                      v-if="index == 0 && parentForm.applyStatus == 6"
                      >添加审批人</span
                    >
                  </template>
                  <template slot="description">
                    <el-select
                      v-model="item.currentNodeApprover"
                      clearable
                      placeholder="请选择审批人"
                      @change="personChange(index, $event)"
                      v-if="parentForm.applyStatus == 6"
                    >
                      <el-option
                        v-for="item1 in personTotalList"
                        :key="item1.userId"
                        :label="item1.name"
                        :value="item1.userId"
                      >
                      </el-option>
                    </el-select>
                    <div
                      v-if="
                        parentForm.applyStatus > 6 ||
                        parentForm.applyStatus == 4
                      "
                    >
                      <span style="padding-right: 5px">{{
                        item.userName
                      }}</span>
                      <span>{{ item.roleName }}</span>
                    </div>
                    <div
                      v-if="
                        item.approverResult != '0' ||
                        item.approverResult != null
                      "
                    >
                      <span>{{ item.approverTime }}</span>
                      <span
                        style="color: green; padding-left: 5px"
                        v-if="item.approverResult == '1'"
                        >审核通过</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="item.approverResult == '2'"
                        >审核驳回</span
                      >
                      <span
                        style="color: red; padding-left: 5px"
                        v-if="item.approverResult == '3'"
                        >已转交</span
                      >
                    </div>
                  </template>
                </el-step>
                <el-step title="抄送人">
                  <template slot="description">
                    <el-select
                      v-model="carbonCopyRecipients"
                      placeholder="请选择抄送人"
                      multiple
                      collapse-tags
                      @change="copyChange"
                      v-if="parentForm.applyStatus == 6"
                    >
                      <el-option
                        v-for="item in personTotalList"
                        :key="item.userId"
                        :label="item.name"
                        :value="item.userId"
                      >
                      </el-option>
                    </el-select>
                    <div
                      v-if="
                        parentForm.applyStatus > 6 ||
                        parentForm.applyStatus == 4
                      "
                      style="
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                      "
                    >
                      <div
                        v-for="(item, index) in carbonCopyRecipients"
                        :key="index"
                      >
                        <span style="padding-right: 5px">{{
                          item.userName
                        }}</span>
                        <span style="padding-right: 10px">{{
                          item.roleName
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-step>

                <template>
                  <div
                    v-for="(item, index) in departmentList"
                    :key="index"
                    style="height: auto"
                  >
                    <el-step title="受理部门" style="height: 70px">
                      <template slot="title">
                        <span>受理部门</span>
                        <span
                          style="
                            padding-left: 20px;
                            color: #e81a1d;
                            font-size: 14px;
                            cursor: pointer;
                          "
                          @click="delDepart(index)"
                          v-if="index != 0 && parentForm.applyStatus == 6"
                          >删除受理部门</span
                        >
                        <span
                          style="
                            padding-left: 20px;
                            color: #0051aa;
                            font-size: 14px;
                            cursor: pointer;
                          "
                          @click="addDepart"
                          v-if="index == 0 && parentForm.applyStatus == 6"
                          >添加受理部门</span
                        >
                      </template>
                      <template slot="description">
                        <el-select
                          v-model="item.roleId"
                          placeholder="请选择受理部门"
                          @change="departRoleId(index, $event)"
                          v-if="parentForm.applyStatus == 6"
                        >
                          <el-option
                            v-for="item1 in roleList"
                            :key="item1.roleId"
                            :label="item1.roleName"
                            :value="item1.roleId"
                          >
                          </el-option>
                        </el-select>
                        <div
                          v-if="
                            parentForm.applyStatus > 6 ||
                            parentForm.applyStatus == 4
                          "
                        >
                          <span>{{ item.roleName }}</span>
                        </div>
                      </template>
                    </el-step>
                    <el-step title="受理人员" style="height: 70px">
                      <template slot="description">
                        <el-select
                          v-model="item.currentNodeApprover"
                          placeholder="请选择受理人员"
                          @change="departCurrentNodeApprover(index, $event)"
                          v-if="parentForm.applyStatus == 6"
                        >
                          <el-option
                            v-for="item1 in departTotalList"
                            :key="item1.userId"
                            :label="item1.name"
                            :value="item1.userId"
                          >
                          </el-option>
                        </el-select>
                        <div
                          v-if="
                            parentForm.applyStatus > 6 ||
                            parentForm.applyStatus == 4
                          "
                        >
                          <span>{{ item.userName }}</span>
                        </div>
                      </template>
                    </el-step>
                  </div>
                </template>
                <div
                  style="
                    text-align: center;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    background-color: #ffffff;
                  "
                  v-if="parentForm.applyStatus == 6"
                >
                  <el-button
                    type="primary"
                    @click="submitFlow"
                    :disabled="parentForm.applyStatus == 0"
                    >提交</el-button
                  >
                </div>
              </el-steps>
            </div>
            <div class="approvalMiddle" v-if="flowListObj">
              <!-- 循环受理人员 -->
              <div v-for="(item, index) in flowListObj.checkList" :key="index">
                <div class="approvalTitle">
                  {{ item.userName }}({{ item.roleName }})，
                  <span v-if="item.nodeType == '0'">
                    {{
                      item.approverResult == 0 || item.approverResult == null
                        ? "未审批"
                        : item.approverResult == 1 &&
                          parentForm.applyStatus != 9
                        ? "已审批"
                        : item.approverResult == 1 &&
                          parentForm.applyStatus == 9
                        ? "已完成"
                        : ""
                    }}</span
                  >
                  <span v-if="item.nodeType == '2'">
                    {{
                      item.approverResult == 0 || item.approverResult == null
                        ? "未受理"
                        : item.approverResult == 1 &&
                          parentForm.applyStatus != 9
                        ? "已受理"
                        : item.approverResult == 1 &&
                          parentForm.applyStatus == 9
                        ? "已完成"
                        : ""
                    }}</span
                  >

                  <span v-if="item.nodeType == '3'">已转交</span>
                </div>
                <div
                  class="approvalMiddleContent"
                  v-if="item.approverResult != 0"
                >
                  <div class="approvalContent2">
                    <div>处理结果</div>
                    <div>
                      <!-- <el-select v-model="item.approverResult" placeholder="请选择处理结果" :disabled="true">
                        <el-option label="已处理" :value="1" />
                        <el-option label="驳回" :value="2" />
                        <el-option label="转交" :value="3" />
                      </el-select> -->
                      {{
                        item.approverResult == 1
                          ? "已处理"
                          : item.approverResult == 2
                          ? "驳回"
                          : item.approverResult == 3
                          ? "转交"
                          : ""
                      }}
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>处理时间</div>
                    <div>
                      <!-- <el-date-picker v-model="item.approverTime" type="date" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" disabled style="width:100%;">
                      </el-date-picker> -->
                      {{ item.approverTime }}
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>反馈结果</div>
                    <div>
                      <!-- <el-input type="textarea" placeholder="请输入反馈结果" v-model="item.approverOpinions"
                        :disabled="true" /> -->
                      {{ item.approverOpinions }}
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>附件</div>
                    <div>
                      <el-upload
                        class="upload-demo"
                        :action="$baseUrl + '/api/common/uploadFileLocal'"
                        :limit="1"
                        :on-change="attachmentChange"
                        :disabled="true"
                      >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-upload2"
                          :disabled="true"
                          >点击上传</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                          支持扩展名：pdf.doc.jpg.png……
                        </div>
                      </el-upload>
                      <el-link
                        v-if="item.accessoryUrl.length > 0"
                        type="primary"
                        :underline="false"
                      >
                        <span
                          v-for="atem in item.accessoryUrl"
                          @click="downloads(atem.url)"
                        >
                          {{ atem.name }}</span
                        >
                      </el-link>
                    </div>
                  </div>
                  <!-- <div class="approvalContent2" v-if="item.nodeType == '2'">
                    <div>部门转交</div>
                    <div>
                      <el-button type="primary" plain :disabled="true">部门转交</el-button>
                    </div>
                  </div> -->
                  <div class="dialog_footer">
                    <el-button
                      type="primary"
                      @click="withdrawSubmitType(item)"
                      v-if="
                        item.isLastNode == 0 &&
                        item.nodeType == '0' &&
                        parentForm.applyStatus != 9 &&
                        item.approverUserId ==
                          $store.getters.roleId_userId.userId
                      "
                      >撤 回</el-button
                    >
                    <el-button
                      type="primary"
                      @click="withdrawSubmit(item)"
                      v-if="
                        item.isLastNode == 0 &&
                        (item.nodeType == '2' || item.nodeType == '3') &&
                        parentForm.applyStatus != 9 &&
                        item.approverUserId ==
                          $store.getters.roleId_userId.userId
                      "
                      >撤 回</el-button
                    >
                    <el-button
                      type="primary"
                      @click="withdrawSubmit(item)"
                      v-if="
                        item.isLastNode == 1 &&
                        item.closeApply == 0 &&
                        (parentForm.applyStatus == 7 ||
                          parentForm.applyStatus == 9) &&
                        item.approverUserId ==
                          $store.getters.roleId_userId.userId
                      "
                      >撤 回</el-button
                    >
                    <el-button
                      type="primary"
                      @click="closeProcessforms(item)"
                      v-if="
                        item.isLastNode == 1 &&
                        item.closeApply == 0 &&
                        (parentForm.applyStatus == 7 ||
                          parentForm.applyStatus == 9) &&
                        item.approverUserId ==
                          $store.getters.roleId_userId.userId
                      "
                      >关闭工单</el-button
                    >
                  </div>
                </div>

                <div
                  class="approvalMiddleContent"
                  v-if="item.approverResult == 0"
                >
                  <div class="approvalContent2">
                    <div>处理结果</div>
                    <div>
                      <el-select
                        v-model="processforms.approverResult"
                        placeholder="请选择处理结果"
                      >
                        <el-option label="已处理" :value="1" />
                        <el-option label="驳回" :value="2" />
                        <el-option
                          label="转交"
                          :value="3"
                          v-if="processforms.nodeType == '2'"
                        />
                      </el-select>
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>处理时间</div>
                    <div>
                      <el-date-picker
                        v-model="processforms.approverTime"
                        type="date"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        disabled
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>反馈结果</div>
                    <div>
                      <el-input
                        type="textarea"
                        placeholder="请输入反馈结果"
                        v-model="processforms.approverOpinions"
                      />
                    </div>
                  </div>
                  <div class="approvalContent2">
                    <div>附件</div>
                    <div>
                      <el-upload
                        class="upload-demo"
                        :action="$baseUrl + '/api/common/uploadFileLocal'"
                        :limit="1"
                        :on-change="attachmentChange"
                      >
                        <el-button
                          size="small"
                          type="primary"
                          icon="el-icon-upload2"
                          >点击上传</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                          支持扩展名：pdf.doc.jpg.png……
                        </div>
                      </el-upload>
                      <el-link
                        v-if="processforms.accessoryUrl.length > 0"
                        type="primary"
                        :underline="false"
                      >
                        <span
                          v-for="atem in processforms.accessoryUrl"
                          @click="downloads(atem.url)"
                        >
                          {{ atem.name }}</span
                        >
                      </el-link>
                    </div>
                  </div>
                  <div
                    class="approvalContent2"
                    v-if="processforms.nodeType == '2'"
                  >
                    <div>部门转交</div>
                    <div>
                      <el-button
                        type="primary"
                        plain
                        @click="departmentalTransfer"
                        >部门转交</el-button
                      >
                    </div>
                  </div>
                  <div class="approvalContent2" v-if="item.isLastNode != 0">
                    <div>是否关闭工单</div>
                    <div>
                      <el-radio v-model="processforms.toCloseApply" :label="0"
                        >否</el-radio
                      >
                      <el-radio v-model="processforms.toCloseApply" :label="1"
                        >是</el-radio
                      >
                    </div>
                  </div>
                  <div
                    class="dialog_footer"
                    v-if="
                      item.userName == userInfo.userName ||
                      userInfo.remark == '管理员'
                    "
                  >
                    <el-button
                      type="primary"
                      @click="submitWithdraw"
                      v-if="
                        userInfo.userId == flowListObj.user.userId ||
                        userInfo.userId == 1
                      "
                      :disabled="parentForm.applyStatus == 0"
                      >撤 回</el-button
                    >

                    <el-button
                      type="primary"
                      @click="submitProcessforms"
                      :disabled="parentForm.applyStatus == 0"
                      >提 交</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="approvalRight">
              <div class="approvalTitle">用户资料</div>
              <div class="approvalContent2">
                <div>单位名称</div>
                <div>{{ form1.companyName }}</div>
              </div>
              <div class="approvalContent2">
                <div>项目负责人</div>
                <div>{{ form1.name }}</div>
              </div>
              <div class="approvalContent2">
                <div>手机号</div>
                <div>{{ form1.phone }}</div>
              </div>
              <div class="approvalContent2">
                <div>单位类别</div>
                <div>{{ form1.companyClassName }}</div>
              </div>
              <div class="approvalContent2">
                <div>职称</div>
                <div>{{ form1.professionalTitle }}</div>
              </div>
              <div class="approvalContent2">
                <div>E-mall</div>
                <div>{{ form1.email }}</div>
              </div>
              <!-- <div class="approvalContent2">
                <div>用户标签</div>
                <div>科研用户</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="驳回原因" :visible.sync="showReason" width="30%">
      <div>
        <el-input
          v-model="refuseReason"
          type="textarea"
          placeholder="请输入驳回原因"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showReason = false">取 消</el-button>
        <el-button type="primary" @click="auditing(2)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="部门转交" :visible.sync="showTransfer" width="60%">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="approvalContent3">
          <div>原受理部门</div>
          <div>
            <el-select
              v-model="originalDepartment"
              placeholder="原受理部门"
              :disabled="true"
            >
            </el-select>
          </div>
        </div>
        <div class="approvalContent3">
          <div style="padding-right: 10px">转交部门</div>
          <div>
            <el-select
              v-model="transferRoleId"
              placeholder="请选择转交部门"
              @change="getDepartTotal"
            >
              <el-option
                v-for="item1 in roleList"
                :key="item1.roleId"
                :label="item1.roleName"
                :value="item1.roleId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="approvalContent3">
          <div style="padding-right: 10px">受理人员</div>
          <div>
            <el-select v-model="transferee" placeholder="请选择受理人员">
              <el-option
                v-for="item1 in departTotalList"
                :key="item1.userId"
                :label="item1.name"
                :value="item1.userId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="approvalContent4">
        <div>转交备注</div>
        <div>
          <el-input
            type="textarea"
            v-model="processforms.transfereeText"
            placeholder="转交备注"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTransfer = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitTransfer"
          :disabled="parentForm.applyStatus == 0"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { listDataTree } from "@/api/system/dict/data";
import {
  getClassListByMark,
  checkResourceApply,
  getResourceApplyDetail,
  getUserSelectListByRoleId,
  leaderTransferOther,
  withdrawTransfer,
  getOrderDetail,
  approvalRollback,
  updateCsResourceOrderApply,
  getFlowList,
  addConfigs,
  checkConfigs,
  closeApply,
  getCSDictParamList,
  getLaunchInfoApi,
  getInfoByFormValue,
  withdrawDelegation,
} from "@/api/cs/csResourceOrderApply";
import {
  getDicts,
  pcodeChildrenlistType,
} from "@/api/system/dict/resourceData";
import { listRole } from "@/api/system/role";
import { active } from "sortablejs";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "HPC",
  data() {
    return {
      roleId2: "",
      approval1: "",
      contractFileList: "",
      fileList: [],
      fileList1: [],
      attachmentList: [],
      userInfoList: [],
      businessMappingList: [], //业务映射
      userNetworkInfoList: [],
      tableData1: [],
      active: 0,
      applyType: "0",
      resourceClassId: "",
      resourceClassName: "",
      responsiblePerson: {
        companyName: {},
        companyClassId: {},
        name: {},
        professionalTitle: {},
        occupation: {},
        deptName: {},
        phone: {},
        email: {},
        userSideFilling: [],
      },
      projectInfo: {
        projectName: {},
        projectNumber: {},
        majorField: {},
        projectSource: {},
        projectClassId: {},
        projectClassName: {},
        projectCycleRange: {},
        useDemand: {},
        workloadEstimate: {},
        contractName: {},
        contractNumber: {},
        contractAnnex: {},
        demandContent: {},
        userSideFilling: [],
      },
      userInfoListForm: {
        sort: {},
        name: {},
        phone: {},
        email: {},
        companyName: {},
        deptName: {},
        professionalTitle: {},
        occupation: {},
        jobNumber: {},
        userSideFilling: [],
      },
      form1: {
        companyName: "",
        companyClassName: "",
        companyClassId: "",
        name: "",
        professionalTitle: "",
        deptName: "",
        occupation: "",
        phone: "",
        email: "",
      },
      form2: {
        projectName: "",
        projectNumber: "",
        majorField: "",
        projectClassId: "",
        projectClassName: "",
        projectCycleRange: [],
        useDemand: "",
        workloadEstimate: "",
        contractName: "",
        contractNumber: "",
        contractAnnex: [],
        storageLimit: "",
        storageLimitUnit: "GB",
      },
      form3: { demandContent: "", orderProfile: "" },
      form4: {
        parallelProgramming: "",
        otherDemand: "",
        useTimeRange: [],
        useFrequency: "",
      },
      rules1: {
        companyName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        companyClassId: [
          { required: true, message: "请选择单位类别", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
        professionalTitle: [
          { required: true, message: "请输入职称", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "请输入部门/院系", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号长度为11位", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
            message: "邮箱格式有误",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        projectNumber: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
        ],
        projectClassId: [
          { required: true, message: "请选择项目来源类别", trigger: "change" },
        ],
        useDemand: [
          { required: true, message: "请选择使用需求", trigger: "blur" },
        ],
        workloadEstimate: [
          { required: true, message: "请输入任务量估算", trigger: "blur" },
        ],
      },
      companyClassList: [],
      projectClassList: [],
      valid1: false,
      valid2: false,
      confirmForm: {},
      softWareInfo: {
        resourceApplyType: "",
        resourceSoftwareVersion: "",
        softwareCores: "",
        softwareStorageSize: "",
        softwareStorageUnit: "",
        softwareMemory: "",
        softwareNode: "",
        mirrorParent: "",
        mirrorVersion: "",
        mirror: [],
        mirrorNum: "",
        itemList: [],
      },
      resourceSoftwareVersionList: [],
      softwareNameList: [],
      softwareVersionList: [],
      applyStatus: "", //2  0  1  6  4  7  9  0-待确认,1-盖章材料待上传,2-待审批,3-审批拒绝,4-待审核,5-审核拒绝,6-待分配,7-进行中,8-驳回,9-已完成
      departmentList: [],
      personList: [
        {
          nodeType: "0",
          sort: 2,
          currentNodeApproverType: 3,
          currentNodeApprover: "",
          roleId: 107,
        },
      ],
      personTotalList: [],
      departTotalList: [],
      parentForm: {},
      showFlow: false,
      showReason: false,
      refuseReason: "",
      wxCurrentNodeApprover: "",
      wxRoleId: "",
      wxForm: {},
      carbonCopyRecipients: [],
      roleList: [],
      flowListObj: { nodeList: [], checkList: [] },
      processforms: {
        // lastNode: 0,
        // closeApply: 0,
        // approvalConfigId: '',
        // approvalInfoId: '',
        // formId: '',
        // formType: '',
        // approverUserId: '',
        // approverTime: '',
        // approverExplain: '',
        // approverOpinions: '',
        // approverResult: 0,
        // transferee: '',
        // transfereeText: '',
        // accessoryUrl: [],
        // approverNode: 0,
        toCloseApply: 0,
      },
      mirrorList: [],
      fileListApply: [],
      applyFileList: [],
      fileDownload: "", //
      showTransfer: false,
      originalDepartment: "",
      transferRoleId: "",
      transferee: "",
      currentActive: null,
      launchInfo: "",
      options: [
        {
          label: "GB",
          value: "GB",
        },
        {
          label: "TB",
          value: "TB",
        },
      ],
      optionsValue: "GB",
      isDisabled: false,
      userInfo: {},
    };
  },
  created() {},
  mounted() {
    this.applyId = this.$router.history.current.params.applyId;
    this.getUser();
    this.getDetail();
    this.getLaunchInfo();
    this.getInfoByFormValue();
  },
  methods: {
    getUser() {
      getUserProfile().then((response) => {
        this.userInfo = response.data;
        console.log(this.userInfo, 111);
      });
    },
    getInfoByFormValue() {
      getInfoByFormValue({ formValue: "responsiblePerson" }).then((res) => {
        this.responsiblePerson = JSON.parse(res.data.templateContent);
      });
      getInfoByFormValue({ formValue: "projectInfo" }).then((res) => {
        this.projectInfo = JSON.parse(res.data.templateContent);
      });
      getInfoByFormValue({ formValue: "userInfoList" }).then((res) => {
        this.userInfoListForm = JSON.parse(res.data.templateContent);
      });
    },
    getLaunchInfo() {
      getLaunchInfoApi().then((res) => {
        this.launchInfo = res.data;
      });
    },
    getDetail() {
      getResourceApplyDetail(this.applyId).then((res) => {
        this.parentForm = res.data;
        this.assignment();
        this.getUserSelectList();
        this.getClassListByMark();
      });
    },
    withdrawSubmit(item) {
      withdrawTransfer({
        approvalConfigId: item.approvalConfigId,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作已撤回",
            type: "success",
          });
          this.getFlow();
        }
      });
    },
    withdrawSubmitType(item) {
      approvalRollback({
        approvalConfigId: item.approvalConfigId,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作已撤回",
            type: "success",
          });
          this.getFlow();
        }
      });
    },
    workOrderIssuance(index, value) {
      this.flowListObj.checkList[index].acceptId = value;
    },
    departmentalTransfer() {
      this.showTransfer = true;
      this.originalDepartment = this.processforms.acceptName.split(" ")[0];
    },
    submitTransfer() {
      leaderTransferOther({
        approvalConfigId: this.processforms.approvalConfigId,
        approverUserId: this.processforms.approverUserId,
        transferee: this.transferee,
        roleId: this.transferRoleId,
        transfereeText: this.processforms.transfereeText,
        formId: this.processforms.formId,
      }).then((res) => {
        this.$message({
          message: "转交成功",
          type: "success",
        });
        this.showTransfer = false;
        this.getFlow();
      });
    },
    getFlow() {
      getFlowList({ formId: this.applyId, formType: "0" }).then((res) => {
        this.flowListObj = { ...res.data };
        // this.flowListObj.checkList=[]
        // res.data.checkList.some(item=>{
        //        this.flowListObj.checkList.push(item)
        //    if (item.approverResult==0) {
        //     return true
        //    }
        // })
        if (res.data.nodeList.length != 0 && res.data.nodeList) {
          this.showFlow = true;
        }
        if (res.data.nodeList.length > 0) {
          this.personList = [];
          this.departmentList = [];
          this.carbonCopyRecipients = [];
          res.data.nodeList.forEach((v, k) => {
            if (k == 1) {
              this.wxCurrentNodeApprover = v.currentNodeApprover;
              this.wxRoleId = v.roleId;
            }
            if (v.nodeType == "0" && k > 1) {
              this.personList.push(v);
            }
            if (v.nodeType == "1") {
              this.carbonCopyRecipients.push(v);
            }
            if (v.nodeType == "2" || v.nodeType == "3") {
              this.departmentList.push(v);
            }
          });
          let nodeTypeTotal = 1;
          try {
            res.data.nodeList.forEach((v, k) => {
              if (v.approverResult == null && v.nodeType == "0") {
                this.currentActive = k;
                throw "中断";
              }
              if (v.nodeType == "2") {
                nodeTypeTotal += 1;
                if (v.approverResult == null && v.nodeType == "2") {
                  this.currentActive =
                    k + nodeTypeTotal - this.carbonCopyRecipients.length;
                  throw "中断";
                }
              }
            });
          } catch (e) {
            if (e != "中断") throw e;
          }
          // console.log(this.currentActive, '<=======')
          res.data.checkList.forEach((v, k) => {
            if (v.approverResult == 0) {
              this.processforms = JSON.parse(JSON.stringify(v));
              this.processforms.approverResult = null;
              this.processforms.accessoryUrl = [];
              let time = new Date();
              let y = time.getFullYear().toString().padStart(2, "0");
              let m = (time.getMonth() + 1).toString().padStart(2, "0");
              let d = time.getDate().toString().padStart(2, "0");
              let h = time.getHours().toString().padStart(2, "0");
              let min = time.getMinutes().toString().padStart(2, "0");
              let s = time.getSeconds().toString().padStart(2, "0");
              this.processforms.approverTime =
                y + "-" + m + "-" + d + "  " + h + ":" + min + ":" + s;
              if (!this.processforms.toCloseApply) {
                this.processforms.toCloseApply = 0;
              }
            }
          });
        }
      });
    },
    closeProcessforms(item) {
      closeApply({
        approvalConfigId: item.approvalConfigId,
        approvalInfoId: item.approvalInfoId,
        approvalRecordId: item.approvalRecordId,
        lastNode: 1,
        closeApply: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "工单已关闭",
            type: "success",
          });
          this.$router.go(-1);
        }
      });
    },
    submitWithdraw() {
      withdrawDelegation({
        formId: this.processforms.formId,
        formType: this.processforms.formType,
        approvalConfigId: this.processforms.approvalConfigId,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "处理成功",
              type: "success",
            });
            //     this.$router.push({
            //       path: "/workOrderManagement/WorkOrderManagement",
            //     });
            //  this.$tab.closeOtherPage()
            this.getDetail();
            this.getFlow();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    submitProcessforms() {
      this.processforms.closeApply = this.processforms.toCloseApply
        ? this.processforms.toCloseApply
        : 0;
      if (this.processforms.isLastNode) {
        this.processforms.lastNode = 1;
      } else {
        this.processforms.lastNode = 0;
      }
      if (!this.processforms.approverResult) {
        this.$message({
          message: "请选择处理结果",
          type: "error",
        });
        return;
      }
      checkConfigs({ ...this.processforms }).then((res) => {
        if (res.code == 200) {
          if (this.processforms.approverResult == "2") {
            this.getDetail();
          }
          this.$message({
            message: "处理成功",
            type: "success",
          });
          this.getFlow();
        }
      });
    },
    submitFlow() {
      let confirmForm = {};
      confirmForm.formId = this.applyId;
      confirmForm.formType = "0";
      confirmForm.carbonCopyRecipients = this.carbonCopyRecipients.join(",");
      // confirmForm.nodeList
      // console.log(this.launchInfo);

      let nodeList = [
        {
          nodeType: "0",
          sort: 0,
          currentNodeApproverType: 3,
          currentNodeApprover: this.launchInfo.userId,
          roleId: this.launchInfo.roles[0].roleId,
        },
      ];
      // nodeList.push(this.wxForm)
      let arr = [];
      this.personList.forEach((item) => {
        if (
          !arr.find(
            (item1) => item1.currentNodeApprover == item.currentNodeApprover
          )
        ) {
          arr.push({ ...item });
        }
      });
      nodeList = nodeList.concat(arr);
      nodeList = nodeList.concat(this.departmentList);
      nodeList.forEach((item, index) => {
        item.sort = index;
      });
      confirmForm.nodeList = nodeList;
      // console.log(arr,confirmForm)
      // return
      addConfigs({ ...confirmForm }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "分配成功",
            type: "success",
          });
          this.getDetail();
          this.$nextTick(() => {
            this.getOrderDetail();
          });
        }
      });
    },

    assignment() {
      this.resourceClassName = this.parentForm.resourceClassName;
      if (this.resourceClassName == "裸节点") {
        this.form4.useFrequency = 0;
        this.isDisabled = true;
      } else {
        this.isDisabled = false;
      }
      this.form1.companyName = this.parentForm.companyName;
      this.form1.companyClassName = this.parentForm.companyClassName;
      this.form1.companyClassId = this.parentForm.companyClassId;
      this.form1.name = this.parentForm.name;
      this.form1.professionalTitle = this.parentForm.professionalTitle;
      this.form1.deptName = this.parentForm.deptName;
      this.form1.occupation = this.parentForm.occupation;
      this.form1.phone = this.parentForm.phone;
      this.form1.email = this.parentForm.email;
      this.form2.projectName = this.parentForm.projectName;
      this.form2.projectNumber = this.parentForm.projectNumber;
      this.form2.majorField = this.parentForm.majorField;
      this.form2.projectClassId = this.parentForm.projectClassId;
      this.form2.projectClassName = this.parentForm.projectClassName;
      this.form2.projectCycleRange = [
        this.parentForm.projectCycleBegin || "",
        this.parentForm.projectCycleEnd || "",
      ];
      this.form2.useDemand = this.parentForm.useDemand;
      this.form2.workloadEstimate = this.parentForm.workloadEstimate;
      this.form2.contractName = this.parentForm.contractName;
      this.form2.contractNumber = this.parentForm.contractNumber;
      this.form2.contractAnnex = this.parentForm.contractAnnex;
      this.form2.storageLimit = this.parentForm.storageLimit;
      this.form2.storageLimitUnit = this.parentForm.storageLimitUnit;
      this.userInfoList = this.parentForm.userInfoList || [];
      this.businessMappingList = this.parentForm.businessMappingList || [];

      this.applyFileList = this.parentForm.applyFileList || [];
      this.applyFileList.forEach((item, index) => {
        item.annexName = "申请表" + (parseInt(index) + parseInt(1));
      });
      this.fileListApply = this.parentForm.applyFileList || [];
      this.form3.demandContent = this.parentForm.demandContent;
      this.form3.orderProfile = this.parentForm.orderProfile;
      if (
        this.parentForm.businessMappingList &&
        this.parentForm.businessMappingList.length > 0
      )
        this.businessMappingList = this.parentForm.businessMappingList;
      if (this.parentForm.contractAnnex)
        this.fileList = [
          { url: this.parentForm.contractAnnex, name: "合同附件" },
        ];
      if (this.parentForm.applyStatus == 2) {
        this.active = 0;
      } else if (this.parentForm.applyStatus == 4) {
        this.active = 1;
        this.getFlow();
      } else if (this.parentForm.applyStatus == 6) {
        this.active = 1;
        this.showFlow = true;
        this.wxCurrentNodeApprover = "";
        this.wxRoleId = "";
        this.personList = [
          {
            nodeType: "0",
            sort: 2,
            currentNodeApproverType: 3,
            currentNodeApprover: "",
            roleId: 107,
          },
        ];
        this.carbonCopyRecipients = [];
        this.departmentList = [
          {
            nodeType: "2",
            sort: this.personList.length + 3,
            currentNodeApproverType: 3,
            currentNodeApprover: "",
            roleId: "",
          },
        ];
      } else if (
        this.parentForm.applyStatus == 7 ||
        this.parentForm.applyStatus == 9
      ) {
        this.active = 1;
        this.getFlow();
      }
      if (this.parentForm.applyStatus != 2) {
        this.form4.parallelProgramming = this.parentForm.parallelProgramming;
        this.form4.otherDemand = this.parentForm.otherDemand;
        this.form4.useTimeRange = [
          this.parentForm.useTimeBegin || "",
          this.parentForm.useTimeEnd || "",
        ];
        this.form4.useFrequency = this.parentForm.useFrequency;
        this.applyStatus = this.parentForm.applyStatus;
        this.uploadUrl = this.parentForm.uploadUrl;
        if (this.parentForm.uploadUrl)
          this.fileList1 = [
            { url: this.parentForm.uploadUrl, name: "盖章材料" },
          ];
        this.softWareInfo = this.parentForm.softWareInfo;
        this.userNetworkInfoList = this.parentForm.userNetworkInfoList || [];
      }
    },
    getUserSelectList() {
      getUserSelectListByRoleId({ roleId: 107 }).then((res) => {
        if (res.code == 200) {
          this.personTotalList = res.data;
        }
      });
      listRole().then((res) => {
        this.roleList = res.rows;
      });
    },
    wxPersonChange(value) {
      this.wxForm = {
        nodeType: "0",
        sort: 1,
        currentNodeApproverType: 3,
        currentNodeApprover: this.wxCurrentNodeApprover,
        roleId: 107,
      };
    },
    addPerson() {
      this.personList.push({
        nodeType: "0",
        sort: this.personList.length + 2,
        currentNodeApproverType: 3,
        currentNodeApprover: "",
        roleId: 107,
      });
    },
    personChange(index, value) {
      this.personList[index].currentNodeApprover = value;
    },
    delPerson(index) {
      this.personList.splice(index, 1);
    },
    copyChange(value) {
      this.carbonCopyRecipients = value;
    },
    addDepart() {
      this.departmentList.push({
        nodeType: "2",
        sort: this.departmentList.length + this.personList.length + 3,
        currentNodeApproverType: 3,
        currentNodeApprover: "",
        roleId: "",
      });
    },
    getDepartTotal(value) {
      this.transferee = "";
      getUserSelectListByRoleId({ roleId: value }).then((res) => {
        if (res.code == 200) {
          this.departTotalList = res.data;
        }
      });
    },
    departRoleId(index, value) {
      this.departmentList[index].roleId = value;
      this.departmentList[index].currentNodeApprover = "";
      getUserSelectListByRoleId({ roleId: value }).then((res) => {
        if (res.code == 200) {
          this.departTotalList = res.data;
        }
      });
    },
    departCurrentNodeApprover(index, value) {
      this.departmentList[index].currentNodeApprover = value;
    },
    delDepart(index) {
      this.departmentList.splice(index, 1);
    },
    getClassListByMark() {
      getCSDictParamList({
        dictType: "resource_net",
        parentValue: "file",
      }).then((res) => {
        if (this.parentForm.resourceClassName == "裸节点") {
          this.fileDownload = res.data[0].dictValue;
          return;
        }
        if (this.parentForm.resourceClassName == "网络申请") {
          this.fileDownload =
            this.parentForm.networkType == 0
              ? res.data[1].dictValue + "," + res.data[2].dictValue
              : this.parentForm.networkType == 1
              ? res.data[0].dictValue
              : this.parentForm.networkType == 2
              ? res.data[3].dictValue
              : "";
          return;
        }
      });
      getClassListByMark({ classMark: "company_class" }).then((response) => {
        this.companyClassList = response.data;
      });
      if (this.parentForm.resourceClassName == "HPC") {
        getDicts("resource_HPC").then((response) => {
          pcodeChildrenlistType({ dictPcode: response.data[0].dictCode }).then(
            (res) => {
              this.resourceSoftwareVersionList = res.rows;
            }
          );
        });
      } else if (this.parentForm.resourceClassName == "云计算") {
        getDicts("resource_cloud").then((response) => {
          pcodeChildrenlistType({ dictPcode: response.data[0].dictCode }).then(
            (res) => {
              this.resourceSoftwareVersionList = res.rows;
            }
          );
        });

        listDataTree({ dictType: "mirror" }).then((response) => {
          this.mirrorList = response.rows;
        });
      } else if (this.parentForm.resourceClassName == "存储") {
        getDicts("resource_store").then((response) => {
          return;
          pcodeChildrenlistType({ dictPcode: response.data[0].dictCode }).then(
            (res) => {
              this.resourceSoftwareVersionList = res.rows;
            }
          );
        });
      } else if (this.parentForm.resourceClassName == "网络申请") {
        getDicts("resource_net").then((response) => {
          pcodeChildrenlistType({ dictPcode: response.data[0].dictCode }).then(
            (res) => {
              this.resourceSoftwareVersionList = res.rows;
            }
          );
        });
      } else if (this.parentForm.resourceClassName == "裸节点") {
        getDicts("resource_node").then((response) => {
          pcodeChildrenlistType({ dictPcode: response.data[0].dictCode }).then(
            (res) => {
              this.resourceSoftwareVersionList = res.rows;
            }
          );
        });
      }

      // dictType类型    resource_HPC resource_cloud  resource_store  resource_net  resource_node
      //二级dictValue   version   file
      getClassListByMark({ classMark: "projectClass" }).then((response) => {
        this.projectClassList = response.data;
      });
    },
    back() {},
    mirrorVersionChange(value) {
      this.softWareInfo.mirrorParent = value[0];
      this.softWareInfo.mirrorVersion = value[1];
    },
    softwareStorageUnitChange(index, event) {
      this.softWareInfo.itemList[index].softwareStorageUnit = event;
    },
    chooseSoftwareName(value) {
      this.softwareNameList.forEach((v) => {
        if (v.dictLabel == value) {
          this.softwareVersionList = v.children;
        }
      });
    },
    companyClassNameChange(value) {
      this.companyClassList.forEach((v) => {
        if (value == v.classId) {
          this.form1.companyClassName = v.className;
        }
      });
    },
    projectClassNameChange(value) {
      this.projectClassList.forEach((v) => {
        if (value == v.classId) {
          this.form2.projectClassName = v.className;
        }
      });
    },
    submitConfirm() {
      updateCsResourceOrderApply({ ...this.confirmForm }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    dateRangeChange(value) {
      console.log(value);
    },
    handleChange(file, fileList) {
      this.fileList = [{ url: fileList[0].response.url, name: "合同附件" }];
    },
    handleChange1(file, fileList) {
      // this.fileList1 = fileList1.slice(-3);
    },
    attachmentChange(file, fileList) {
      if (file.status == "success") {
        fileList.forEach((v) => {
          this.processforms.accessoryUrl.push({
            newFileName: v.response.newFileName,
            url: v.response.url,
            originalFilename: v.response.originalFilename,
            name: v.name,
          });
        });
      }
    },

    handleChangeApply(file, fileList) {
      if (file.status == "success") {
        let arr = [];
        this.fileListApply = fileList;
        fileList.forEach((v, k) => {
          let small = {
            annexType: "0",
            annexName: v.name,
            annexFormat: v.name.split(".")[1],
            annexSize: (v.size / 1000 / 1024).toFixed(2) + "M",
            annexUrl: v.response.url,
            sort: k,
          };
          arr.push(small);
        });
        this.applyFileList = arr;
      }
    },

    handleMove(file, fileList) {
      if (file.status == "success") {
        let arr = [];
        this.fileListApply = fileList;
        fileList.forEach((v, k) => {
          let small = {
            annexType: "0",
            annexName: v.name,
            annexFormat: v.name.split(".")[1],
            annexSize: (v.size / 1000 / 1024).toFixed(2) + "M",
            annexUrl: v.response.url,
            sort: k,
          };
          arr.push(small);
        });
        this.applyFileList = arr;
      }
    },
    handlePreview(val) {
      let file = val.url;
      let lastIndex = file.lastIndexOf(".");
      let suffix = file.substring(lastIndex + 1);
      //文件格式是word文档、ppt、excel文件文件时
      if (
        suffix == "doc" ||
        suffix == "ppt" ||
        suffix == "xls" ||
        suffix == "xlsx"
      ) {
        let fileUrl = encodeURIComponent(file);
        //使用Office Web查看器
        let officeUrl =
          "http://view.officeapps.live.com/op/view.aspx?src=" + fileUrl;
        window.open(officeUrl, "_target");
      } else if (suffix == "docx") {
        window.open(file, "_self");
      } else {
        //其他文件格式比如pdf、图片、html
        window.open(file, "_blank");
      }
    },
    handleClickDownLoad(val) {
      let file = val;
      let lastIndex = file.lastIndexOf(".");
      let suffix = file.substring(lastIndex + 1);
      //文件格式是word文档、ppt、excel文件文件时
      if (
        suffix == "doc" ||
        suffix == "ppt" ||
        suffix == "xls" ||
        suffix == "xlsx"
      ) {
        let fileUrl = encodeURIComponent(file);
        //使用Office Web查看器
        let officeUrl =
          "http://view.officeapps.live.com/op/view.aspx?src=" + fileUrl;
        window.open(officeUrl, "_target");
      } else if (suffix == "docx") {
        window.open(file, "_self");
      } else {
        //其他文件格式比如pdf、图片、html
        window.open(file, "_blank");
      }
    },
    next() {
      this.$refs.form1.validate((valid) => {
        this.valid1 = valid;
      });
      if (this.resourceClassName != "网络申请")
        this.$refs.form2.validate((valid) => {
          this.valid2 = valid;
        });
      this.parentForm = { ...this.parentForm, ...this.form1, ...this.form2 };
      this.confirmForm = { ...this.parentForm, ...this.form3, ...this.form4 };
      this.confirmForm.projectCycleBegin = this.form2.projectCycleRange[0];
      this.confirmForm.projectCycleEnd = this.form2.projectCycleRange[1];
      this.confirmForm.userInfoList = this.userInfoList;
      if (this.businessMappingList && this.businessMappingList.length > 0)
        this.confirmForm.businessMappingList = this.businessMappingList;
      this.confirmForm.contractAnnex = this.fileList[0]
        ? this.fileList[0].url
        : "";
      // this.confirmForm.applyType = this.applyType
      // this.confirmForm.resourceClassId = this.resourceClassId
      // this.confirmForm.resourceClassName = this.resourceClassName
      this.confirmForm.applyFileList = this.applyFileList;
      this.confirmForm.useTimeBegin = this.confirmForm.useTimeRange[0];
      this.confirmForm.useTimeEnd = this.confirmForm.useTimeRange[1];
      if (this.resourceClassName == "HPC") {
        this.softWareInfo.resourceApplyType = "1";
      } else if (this.resourceClassName == "云计算") {
        this.softWareInfo.resourceApplyType = "2";
      } else if (this.resourceClassName == "存储") {
        this.softWareInfo.resourceApplyType = "3";
      } else if (this.resourceClassName == "网络申请") {
        this.softWareInfo.resourceApplyType = "4";
      } else if (this.resourceClassName == "裸节点") {
        this.softWareInfo.resourceApplyType = "5";
      }
      this.confirmForm.softWareInfo = this.softWareInfo;
      this.confirmForm.userNetworkInfoList = this.userNetworkInfoList;
      // return
      if (this.resourceClassName != "网络申请") {
        if (this.valid1 && this.valid2) {
          this.submitConfirm();
        }
      } else {
        if (this.valid1) {
          this.submitConfirm();
        }
      }
    },
    prev() {
      // if (this.active-- < 0) this.active = 0;
    },
    resourceSoftwareVersionChange(value) {
      if (this.resourceClassName == "云计算") {
        this.resourceSoftwareVersionList.forEach((v) => {
          if (v.dictLabel == value) {
            this.softWareInfo.softwareCores = JSON.parse(
              JSON.stringify(v.resourceCores)
            );
            this.softWareInfo.softwareMemory = JSON.parse(
              JSON.stringify(v.resourceMemory)
            );
          }
        });
      }
    },
    getOrderDetail() {
      getOrderDetail(this.applyId).then((res) => {});
    },
    auditing(type) {
      let that = this;
      if (type != 2) {
        if (type == 0) {
          that.$modal
            .confirm("是否确认审核通过该资源申请工单")
            .then(function () {
              return checkResourceApply({
                applyId: that.parentForm.applyId,
                applyType: that.parentForm.applyType,
                checkType: type,
              });
            })
            .then((res) => {
              if (res.code == 200) {
                that.$message({
                  message: "审核通过",
                  type: "success",
                });
                this.getDetail();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (type == 1) {
          that.showReason = true;
        }
      } else {
        checkResourceApply({
          applyId: that.parentForm.applyId,
          applyType: that.parentForm.applyType,
          checkType: type,
          refuseReason: this.refuseReason,
        }).then((res) => {
          if (res.code == 200) {
            that.$message({
              message: "工单已驳回",
              type: "success",
            });
            that.showReason = false;
            that.$router.go(-1);
          }
        });
      }
    },
    addChildren() {
      this.userInfoList.push({
        sort: this.userInfoList.length + 1,
        name: "",
        phone: "",
        email: "",
        companyName: "",
        deptName: "",
        professionalTitle: "",
        occupation: "",
        jobNumber: "",
        isEdit: true,
      });
    },
    edit(id) {
      this.userInfoList = this.userInfoList.map((v) => {
        if (v.sort == id) {
          v.isEdit = true;
        } else {
          v.isEdit = false;
        }
        return v;
      });
    },
    save(id) {
      this.userInfoList = this.userInfoList.map((v) => {
        if (v.sort == id) {
          v.isEdit = false;
        }
        return v;
      });
    },
    del(id) {
      this.userInfoList.splice(id, 1);
    },
    addChildren1() {
      this.userNetworkInfoList.push({
        sort: this.userNetworkInfoList.length + 1,
        accessMethod: "",
        bandwidth: "",
        ispName: "",
        ipAddress: "",
        accessAddress: "",
        isEdit: true,
      });
    },
    edit1(id) {
      this.userNetworkInfoList = this.userNetworkInfoList.map((v) => {
        if (v.sort == id) {
          v.isEdit = true;
        } else {
          v.isEdit = false;
        }
        return v;
      });
    },
    save1(id) {
      this.userNetworkInfoList = this.userNetworkInfoList.map((v) => {
        if (v.sort == id) {
          v.isEdit = false;
        }
        return v;
      });
    },
    del1(id) {
      this.userNetworkInfoList.splice(id, 1);
    },
    downloads(item) {
      const url = window.URL.createObjectURL(new Blob([item]));
      let name = item.split("/");

      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", `${name[name.length - 1]}`); // 设置下载时的默认文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },
    addChildren2(type) {
      let dictType =
        type == "0" ? "cs_platform_software" : type == "2" ? "compiler" : "";
      if (type == "0" || type == "2") {
        listDataTree({ dictType }).then((response) => {
          this.softwareNameList = response.rows;
        });
      }
      let notSave = false;
      let index = 0;
      this.softWareInfo.itemList.forEach((v, k) => {
        if (v.isEdit) {
          notSave = true;
          index = k;
        }
      });
      if (notSave) {
        this.$alert("您有未保存的数据，请确认是否保存", "确认信息", {
          confirmButtonText: "保存",
          cancelButtonText: "丢弃",
          callback: (action) => {
            if (action == "confirm") {
              this.softWareInfo.itemList[index].isEdit = false;
            } else {
              this.softWareInfo.itemList.splice(index, 1);
            }
          },
        });
      } else {
        this.softWareInfo.itemList.push({
          sort: this.softWareInfo.itemList.length + 1,
          itemType: type,
          softwareName: "",
          softwareVersion: "",
          isEdit: true,
        });
      }
    },
    edit2(id) {
      this.softWareInfo.itemList = this.softWareInfo.itemList.map((v) => {
        if (v.sort == id) {
          v.isEdit = true;
        } else {
          v.isEdit = false;
        }
        return v;
      });
    },
    save2(id) {
      this.softWareInfo.itemList = this.softWareInfo.itemList.map((v) => {
        if (v.sort == id) {
          v.isEdit = false;
        }
        return v;
      });
    },
    del2(id) {
      this.softWareInfo.itemList.splice(id, 1);
    },
    addChildren3() {
      this.businessMappingList.push({
        sort: this.businessMappingList.length + 1,
        mappingAddress: "",
        mappingPort: "",
        isEdit: true,
      });
    },
    edit3(sort) {
      let arr = [];
      arr = this.businessMappingList.map((v) => {
        if (v.sort == sort) {
          v.isEdit = true;
        } else {
          v.isEdit = false;
        }
        return v;
      });
      this.businessMappingList = JSON.parse(JSON.stringify(arr));
    },
    save3(sort) {
      let arr = [];
      arr = this.businessMappingList.map((v) => {
        if (v.sort == sort) {
          v.isEdit = false;
        }
        return v;
      });
      this.businessMappingList = JSON.parse(JSON.stringify(arr));
    },
    del3(sort) {
      this.businessMappingList.splice(sort, 1);
    },

    addChildren4() {
      this.softWareInfo.itemList = this.softWareInfo.itemList
        ? this.softWareInfo.itemList
        : [];
      this.softWareInfo.itemList.push({
        sort: this.softWareInfo.itemList.length + 1,
        storeSize: 0,
        storeUnit: "",
      });
    },
    del4(sort) {
      this.softWareInfo.itemList.splice(sort, 1);
    },
    typeOfItem(index, value) {
      this.softWareInfo.itemList[index].storeSize = parseFloat(value);
    },
  },
};
</script>
<style scoped>
.stepList {
  width: 26%;
  padding: 40px 0 0 20px;
  min-height: 300px;
  background-color: #ffffff;
}

a {
  text-decoration: none;
  color: #0051aa;
}

::v-deep .el-step:last-of-type .el-step__main,
.el-step:last-of-type .el-step__description {
  padding-right: 10%;
}

.main {
  height: auto;
  padding: 20px;
}

.title {
  height: 107px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
}

.title > img {
  width: 14px;
  height: 19px;
  margin-left: 16px;
  margin-top: 20px;
  cursor: pointer;
}

.title1 {
  margin-left: 10px;
  margin-top: 20px;
}

.title1 > div:nth-of-type(1) {
  height: 28px;
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.title1 > div:nth-of-type(2) {
  height: 25px;
  margin-top: 10px;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.stepContent {
  width: 80%;
  margin: 10px auto;
}

.active1 {
  margin-bottom: 100px;
}

.formStyle1 {
  display: flex;
  flex-wrap: wrap;
}

.formStyle2 {
  display: flex;
  flex-wrap: wrap;
}

.formStyle3 {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-form-item {
  width: 100%;
}

::v-deep .el-form-item__content {
  width: 70%;
}

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

.module1 {
  height: auto;
  margin-bottom: 10px;
  padding: 16px 16px 20px 16px;
  background: #ffffff;
  border-radius: 4px;
}

.moduleTitle {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}

.moduleTitle > img {
  width: 22px;
  height: 22px;
}

.moduleTitle > div {
  height: 22px;
  margin-left: 6px;
  font-weight: bold;
  font-size: 16px;
  color: #0051aa;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.module2 {
  height: 100%;
  margin-bottom: 10px;
  padding: 16px 16px 20px 16px;
  background: #ffffff;
  border-radius: 4px;
}

.tableData {
  padding: 20px 20px 30px 20px;
  height: auto;
  margin-top: 12px;
  background-color: #ffffff;
}

.tableTitle {
  width: 96px;
  height: 32px;
  background: #edf3ff;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 400;
  font-size: 14px;
  color: #0051aa;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  float: right;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}

::v-deep .headerClassName {
  padding: 8px !important;
  background: #d6e3f6 !important;
}

.dialog_footer {
  background-color: #ffffff;
  padding: 20px 50px 30px 20px;
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-descriptions {
  width: 80%;
}

::v-deep .descriptionsLabel {
  width: 10%;
  color: #262626;
  background-color: #f8faff;
}

::v-deep .descriptionsLabel1 {
  width: 4.5%;
  color: #262626;
  background-color: #f8faff;
}

::v-deep .descriptionsLabel2 {
  color: #262626;
  background-color: #f8faff;
}

::v-deep .descriptionsContent {
  width: 40%;
  font-size: 14px;
  color: #262626;
}

.dialog_footer1 {
  background-color: #ffffff;
  border-top: 1px solid #ebebeb;
  padding: 20px 20px 30px 20px;
  display: flex;
  justify-content: space-between;
}

.addCustom {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.addCustom > button {
  margin-left: 10px;
}

.approval {
  display: flex;
}

/* .approval>div {
  flex: 1;
} */

.approvalMiddle {
  width: 48%;
  min-height: 600px;
  background-color: #ffffff;
}

.approvalTitle {
  height: 46px;
  padding: 14px 0 14px 20px;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-bottom: 1px solid #ebebeb;
}

.approvalMiddleContent {
  padding: 20px;
}

.approvalContent1 {
  display: flex;
  align-items: center;
}

.approvalContent1Item {
  display: flex;
  align-items: center;
}

.approvalContent1Item > div:nth-of-type(1) {
  width: 100px;
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
}

.approvalContent1Item1 {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.approvalContent1Item1 > div:nth-of-type(1) {
  margin-right: 10px;
  font-size: 14px;
}

.approvalContent2 {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.approvalContent2 > div:nth-of-type(1) {
  width: 100px;
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
}

.approvalContent2 > div:nth-of-type(2) {
  width: 70%;
}

.approvalContent3 {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.approvalContent3 > div:nth-of-type(1) {
  width: 150px;
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
}

.approvalContent3 > div:nth-of-type(2) {
  width: 100%;
}

.approvalContent4 {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.approvalContent4 > div:nth-of-type(1) {
  width: 60px;
  margin-left: 36px;
  margin-right: 22px;
}

.approvalContent4 > div:nth-of-type(2) {
  width: 100%;
}

.approvalRight {
  width: 26%;
  min-height: 400px;
  background: #ffffff;
  border-radius: 4px;
}

/* .storageList {} */
.resourceSoftwareVersionStyle {
  border: 1px solid #0051aa;
  border-radius: 6px;
  margin-left: 40px;
  padding: 6px;
  /* color: #EDF3FF; */
  font-size: 14px;
  margin-bottom: 10px;
}

.tableTitle1 {
  width: 96px;
  height: 32px;
  background: #edf3ff;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 400;
  font-size: 14px;
  color: #0051aa;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}

.storageItem {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.storageItem > div:nth-of-type(1) {
  margin-right: 10px;
}

.storageItem > div:nth-of-type(2) {
  width: 500px;
  /* margin-right: 10px; */
}

.storageItem > div:nth-of-type(3) {
  width: 100px;
}

.storageItem > div:nth-of-type(4) {
  color: red;
  cursor: pointer;
}
</style>
