thoth-frontend-test/src/views/projectManage/bugList/details/index.vue

<template>
  <div v-loading="loading.drawer" class="bug-detail">
    <div v-if="type!=='page'" style="padding: 15px 5px 5px 30px" class="Layout_space_between bug_manage_container bug_manage_title">
      <div class="Layout_flex_start">
        <span style="font-size:18px;font-weight:500;color:#333b4a; margin-right: 20px;">{{ 'BUG-'+ id }}</span>
        <statusChange :status-code="bug.status" :bug-data="bug" :status-obj="statusObj" @bugGet="updateBugStatus" />
      </div>
      <div style="display: inline-block;float:right">
        <span class="newBtn" @click="getToDetails()"><i class="el-icon-document" /> 查看详情</span>
        <span class="newBtn" style="padding: 0 10px" @click="openQueryDialog()"><i class="el-icon-document-copy" /> 复制</span>
        <span class="newBtn" style="padding-right: 10px;" @click="openDeleteDialog()"><i class="el-icon-delete" /> 删除</span>
        <div style="display: inline-block;margin-left: 10px;margin-right: 15px;" @mouseover="iconName = 'float_反馈_icon_close_蓝色'" @mouseleave="iconName = 'float_反馈_icon_close'" @mousedown="closeDrawer();">
          <el-button size="medium" type="text" style="margin-top:-5px;">
            <svg-icon :icon-class="iconName" />
          </el-button>
        </div>
      </div>
    </div>
    <el-container
      v-loading.fullscreen.lock="loading.fullscreen"
      :style="type=='page'?{'background-color': '#F2F3F6','padding': '0 0 0 10px'}:{'background-color': '#ffffff','overflow': 'auto','height':height}"
      class="bug_manage_container scop"
    >
      <el-header height="0" />
      <el-container>
        <el-main v-loading="loading.title" class="layout_main bug_manage_title" :style="type=='page'?{'padding': '15px 30px 15px 30px'}:{'padding':'0px 30px 15px 15px'}">
          <span id="spanLength">{{ bugNameForm.bugName }}</span>
          <el-row v-if="type=='page'">
            <el-form
              label-position="right"
              :inline="true"
              :model="bugNameForm"
              :rules="rules"
              :hide-required-asterisk="true"
            >
              <el-col id="divLength" :span="24" style="padding: 0">
                <el-form-item :label="bug.bugId" prop="bugName" style="margin:0;margin-bottom:0px">
                  <el-input
                    v-model="bugNameForm.bugName"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    maxlength="150"
                    :show-word-limit="showWordLimit"
                    :style="bugNameTextareaStyle"
                    :class="!bugNameForm.bugName && showRule? 'bug_manage_bug_name_rule_show':bugNameIsFocus?'bug_manage_bug_name_focus':'bug_manage_bug_name'"
                    @blur="showWordLimit = false;bugNameIsFocus = false;changeBugName()"
                    @focus="showWordLimit = true;bugNameIsFocus = true;changeWidthOnFocus()"
                    @input="changeRule()"
                    @keydown.enter.native="listen($event)"
                  />
                </el-form-item>
                <el-form-item id="itemLength1" style="margin:0">
                  <statusChange :status-code="bug.status" :bug-data="bug" :status-obj="statusObj" @bugGet="updateBugStatus" />
                </el-form-item>
                <el-form-item id="itemLength2" style="margin:0;float:right">
                  <el-button size="small" class="button_delete2" @click="openDeleteDialog()">删除</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div v-else>
            <div>
              <el-form
                :model="bugNameForm"
                :rules="rules"
              >
                <el-form-item prop="bugName">
                  <el-input
                    v-model="bugNameForm.bugName"
                    type="textarea"
                    autosize
                    maxlength="150"
                    :show-word-limit="showWordLimit"
                    style="width:100%;"
                    :class="!bugNameForm.bugName && showRule? 'bug_manage_bug_name_rule_show':bugNameIsFocus?'bug_manage_bug_name_focus':'bug_manage_bug_name'"
                    @blur="showWordLimit = false;bugNameIsFocus=false;changeBugName()"
                    @focus="showWordLimit = true;bugNameIsFocus=true;"
                    @input="changeRule()"
                    @keydown.enter.native="listen($event)"
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-container ref="box" :style="type=='page'?{'margin-top':'10px'}:{}" class="bug_manage" :direction="type == 'page'?'horizontal':'vertical'">
        <el-aside :style="type=='page'?{'margin-right':'10px','width':'70%'}:{'width':'100%'}">
          <el-main v-loading="loading.details" class="layout_main bug-contain" :style="type=='page'?{'padding': '20px 30px'}:{'padding-left': '30px','padding-right': '30px'}">
            <div class="module_title">
              <div class="module_title__sign" />
              <div class="module_title__caption">缺陷详情</div>
            </div>
            <el-divider v-if="type !== 'page'" />
            <el-container width="100%">
              <el-aside width="49%" style="margin-right: 2%">
                <el-form label-width="30%" label-position="left" label-suffix=":">
                  <el-form-item label="所属任务" class="limit-font">
                    <span v-if="clielIcon === true" class="str-task-name" @mouseover="mouseOver" @mouseleave="mouseLeave"><span @click="JumpTask(bug.taskId)">{{ bug.taskName }}</span> <i v-if="active" class="el-icon-edit" @click="getclielIcon" /></span>
                    <el-select
                      v-if="clielIcon === false"
                      ref="searchOfChatRoom"
                      v-model="bug.taskId"
                      filterable
                      :remote="true"
                      :remote-method="debounceQuery"
                      @visible-change="mouseLeaves"
                      @change="bugUpdates(bug,'details')"
                    >
                      <el-option v-for="item in taskEnumList" :key="item.id" :label="item.name" :value="item.id">
                        <div class="belong-task">
                          <div class="task-id">{{ item.taskId }}</div>
                          <div class="modules-name">
                            <span class="name">{{ item.name }}</span>
                            <span v-if="item.moduleInfoName" class="modules">{{ item.moduleInfoName }}</span>
                          </div>
                        </div>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="优先级">
                    <el-select v-model="bug.priorityLevel" @change="bugUpdate(bug,'details')">
                      <el-option
                        v-for="item in enums.priorityLevelEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="业务线">
                    <div style="padding-left: 15px;color:  #666666; font-weight: 500">{{ bug.bizName }}</div>
                  </el-form-item>
                  <el-form-item label="发现阶段">
                    <el-select v-model="bug.discoveryStage" @change="bugUpdate(bug,'details')">
                      <el-option
                        v-for="item in enums.bugStageEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="端类型">
                    <el-select v-model="bug.sysType" @change="bugUpdate(bug,'details')">
                      <el-option
                        v-for="item in enums.sysTypeEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="缺陷原因">
                    <div v-if="map.bugReasonEnumList && bug" class="bug_manage_div">{{ map.bugReasonEnumList[bug.bugReason]?map.bugReasonEnumList[bug.bugReason]:'尚未知' }}</div>
                  </el-form-item> -->
                  <el-form-item label="Reopen次数">
                    <div class="bug_manage_div">{{ bug.reopenTimes }}</div>
                  </el-form-item>
                  <el-form-item label="Hold次数">
                    <div class="bug_manage_div">{{ bug.holdCount }}</div>
                  </el-form-item>
                  <el-form-item label="标签">
                    <Tag v-model="bug.tags" type="BUG" @change="bugUpdate(bug,'details')" />
                  </el-form-item>
                </el-form>
              </el-aside>
              <el-aside width="49%">
                <el-form label-width="30%" label-position="left" label-suffix=":">
                  <el-form-item label="所属需求" class="limit-font">
                    <span v-if="bug.requirementName !== null" class="str-task-name" @click="JumpRequire(bug.requireId)">{{ bug.requirementName }}</span>
                    <span v-else class="str-task-name">{{ '无归属需求' }}</span>
                  </el-form-item>
                  <el-form-item label="缺陷等级">
                    <el-select v-model="bug.priority" @change="bugUpdate(bug,'details')">
                      <el-option
                        v-for="item in enums.priorityEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属模块">
                    <el-cascader v-model="bug.moduleIds" class="current" collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" @change="bugUpdate(bug,'details')" @click.native="getBusinessLinePlatformModule" />
                  </el-form-item>
                  <el-form-item label="发现方式">
                    <el-select v-model="bug.discoveryMeth" @change="bugUpdate(bug,'details')">
                      <el-option
                        v-for="item in enums.discoveryMethEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="缺陷类型">
                    <el-cascader
                      v-model="bug.theBugType"
                      :options="theBugTypeEnumList"
                      :props="{
                        value:'code',
                        label:'name',
                        children: 'childrenEnums',
                        emitPath: false
                      }"
                      placeholder="请选择"
                      @change="bugUpdate(bug,'details')"
                    />
                  </el-form-item>
                  <el-form-item label="修复结果">
                    <div
                      v-if="map.repairResultEnumList && bug"
                      class="bug_manage_div"
                    >{{ map.repairResultEnumList[bug.repairResult]?map.repairResultEnumList[bug.repairResult]:'未修复' }}</div>
                  </el-form-item>
                </el-form>
              </el-aside>
            </el-container>
          </el-main>
          <el-main v-loading="loading.appInfo" :style="type=='page'?{'padding': '20px 30px 20px 30px','margin-top': '10px'}:{'padding-left':'30px','padding-right':'30px'}" class="layout_main bug_manage bug_manage_app_info">
            <div class="module_title">
              <div class="module_title__sign" />
              <div class="module_title__caption">客户端信息</div>
            </div>
            <el-divider v-if="type !== 'page'" />
            <el-container width="100%">
              <el-aside width="49%" style="margin-right: 2%">
                <el-form label-width="30%" label-position="left" label-suffix=":">
                  <el-form-item label="客户端">
                    <el-select
                      v-model="bug.appId"
                      clearable
                      filterable
                      @change="getVersionList(bug.appId), bugUpdate(bug,'appInfo');"
                    >
                      <el-option
                        v-for="item in appClientList"
                        :key="item.code"
                        :label="item.msg"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="机型">
                    <el-input v-model="bug.osType" placeholder="请输入" @change="bugUpdate(bug,'appInfo')" />
                  </el-form-item>
                  <el-form-item label="网络">
                    <el-select v-model="bug.networkType" @change="bugUpdate(bug,'appInfo')">
                      <el-option
                        v-for="item in enums.networkTypeEnumList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-aside>
              <el-aside width="49%">
                <el-form label-width="30%" label-position="left" label-suffix=":">
                  <el-form-item label="影响版本">
                    <el-select
                      v-model="bug.appVersion"
                      clearable
                      filterable
                      style="width:100%;"
                      @change="bugUpdate(bug,'appInfo')"
                    >
                      <el-option
                        v-for="item in versionList"
                        :key="item.code"
                        :label="item.msg"
                        :value="item.msg"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="系统版本">
                    <el-input v-model="bug.sdkVersion" placeholder="请输入" @change="bugUpdate(bug,'appInfo')" />
                  </el-form-item>
                </el-form>
              </el-aside>
            </el-container>
          </el-main>
        </el-aside>
        <el-aside :width="type=='page'?'29.2%':'100%'">
          <el-main v-loading="loading.userInfo" :style="type=='page'?{'padding': '20px 30px'}:{'padding-left':'30px'}" class="layout_main bug_manage_user_info">
            <div class="module_title">
              <div class="module_title__sign" />
              <div class="module_title__caption">用户信息</div>
            </div>
            <el-divider v-if="type !== 'page'" />
            <el-aside :width="type=='page'?'100%':'100%'">
              <el-form :rules="rules" :label-width="type=='page'?'30%':'16%'" label-position="left" label-suffix=":" :hide-required-asterisk="true">
                <el-form-item label="提报人">
                  <div class="bug_manage_div">{{ bug.creatorList }}</div>
                </el-form-item>
                <el-form-item label="责任人" prop="assigner" :style="formHeight1 == 'type' ? { 'height': '60px' } : { 'height': 'auto' }">
                  <search-people :value.sync="bug.assigner" :multiple="true" @change="bugUpdate(bug,'userInfo')" />
                </el-form-item>
                <el-form-item label="修复人" prop="currentHandler" :style="formHeight == 'type' ? { 'height': '60px' } : { 'height': 'auto' }">
                  <search-people :value.sync="bug.currentHandler" :multiple="true" @change="bugUpdate(bug,'userInfo')" />
                </el-form-item>
              </el-form>
            </el-aside>
          </el-main>
          <el-main class="layout_main bug_manage_time_length" :style="type=='page'?{'padding': '20px 5px 20px 30px','margin-top': '10px'}:{'padding-left':'30px'}">
            <div class="module_title">
              <div class="module_title__sign" />
              <div class="module_title__caption">时间</div>
            </div>
            <el-divider v-if="type !== 'page'" />
            <el-aside :width="'100%'">
              <el-form label-position="left" label-width="100px" :class="type !== 'page'&& 'timeForm'">
                <el-form-item label="提报时间">
                  <div class="bug_manage_div"> ：{{ bug.gmtCreate }} <span v-if="bug.gmtCreateIsHoliday === 1" class="bug_date">{{ '节假日提报' }}</span></div>
                </el-form-item>
                <el-form-item label="待测试时间">
                  <div class="bug_manage_div"> ：{{ bug.waitTestTime }}</div>
                </el-form-item>
                <el-form-item label="已完成时间">
                  <div class="bug_manage_div"> ：{{ bug.finishTime }} <span v-if="bug.finishTimeIsHoliday === 1" class="bug_date">{{ '节假日关闭' }}</span></div>
                </el-form-item>
                <el-form-item label="开发修复时长">
                  <div class="bug_manage_div">
                    <!-- ：{{ bug.devFixTime }} <br>  -->
                    ：{{ bug.devFixTimePurgeNH }} <span v-if="bug.devFixTimePurgeNH !== null" class="bug_removeDate">{{ '去除节假日' }}</span>
                  </div>
                </el-form-item>
                <el-form-item label="测试验收时长">
                  <div class="bug_manage_div">
                    <!-- ：{{ bug.testCheckTime }} <br> -->
                    ：{{ bug.testCheckTimePurgeNH }} <span v-if="bug.testCheckTimePurgeNH !== null" class="bug_removeDate">{{ '去除节假日' }}</span>
                  </div>
                </el-form-item>
                <el-form-item label="总修复时长">
                  <div class="bug_manage_div">
                    <!-- ：{{ bug.fixTime }} <br> -->
                    ：{{ bug.fixTimePurgeNH }} <span v-if="bug.fixTimePurgeNH !== null" class="bug_removeDate">{{ '去除节假日' }}</span>
                  </div>
                </el-form-item>
              </el-form>
            </el-aside>
          </el-main>
        </el-aside>
      </el-container>
      <el-container :style="type=='page'?{'width':'70%'}:{'width':'100%'}" direction="vertical">
        <el-main v-loading="loading.describe" :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}" class="layout_main">
          <div class="module_title">
            <div class="module_title__sign" />
            <div class="module_title__caption">描述</div>
          </div>
          <el-divider v-if="type !== 'page'" />
          <div
            v-if="!bug.bugDescribe && describeEditorVisible == false"
            style="width: 100%;height: 300px;text-align: center;line-height: 300px"
          >
            <span class="bug_describe" @click="describeEditorVisible = true;">点击添加描述</span>
          </div>
          <el-tooltip
            v-if="bug.bugDescribe && describeEditorVisible == false"
            effect="dark"
            content="点击编辑"
            placement="top"
          >
            <div class="bug_describe_content" @click="describeEditorVisible = true;">
              <div style="font-size:14px" v-html="bug.bugDescribe" />
            </div>
          </el-tooltip>
          <div v-show="describeEditorVisible" style="margin-top:15px">
            <!-- <editor v-model="text_content" class="tinymce" :init="configure" @blur="describeConfirm" /> -->
            <normal-area
              id="buglist_tinymce"
              :value.sync="text_content"
              :height="500"
            />
            <div style="margin-top:40px;float: right">
              <el-button @click="describeCancel()">取 消</el-button>
              <el-button type="primary" @click="describeConfirm()">确 认</el-button>
            </div>
          </div>
        </el-main>
        <el-main
          :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}"
          class="layout_main"
        >
          <div class="module_title">
            <div class="module_title__sign" />
            <div class="module_title__caption upload-title">附件</div>
            <div class="upload-file"><i class="el-icon-info" />支持直接截图黏贴图片</div>
          </div>
          <el-divider v-if="type !== 'page'" />
          <section class="upload-main">
            <el-tooltip
              class="item"
              effect="dark"
              content="支持的文件格式有：.zip, .xlsx, .txt, .csv, .xls, .mov, .mp4, .m4a, .avi, .amr, .mp3, .wav, .3gpp, .png, .jpg, .jpeg, .gif"
              placement="top-start"
              popper-class="tip-style"
            >
              <div class="upload-info"><i class="el-icon-question" />格式说明</div>
            </el-tooltip>
            <el-upload
              ref="upload"
              class="upload-demo"
              action="https://star.xiaojukeji.com/upload/img.node"
              :on-preview="handleDownload"
              :before-upload="beforeUpload"
              :before-remove="beforeRemove"
              :on-remove="handleRemoveNotImage"
              :on-success="handleChange"
              :on-error="errorChange"
              multiple
              accept="*"
              :file-list="notImageList"
            >
              <el-button slot="trigger" icon="el-icon-upload" class="upload-button">上传附件</el-button>
            </el-upload>
            <el-upload
              style="margin-top: 15px"
              class="upload-demo"
              list-type="picture-card"
              multiple
              accept="*"
              :file-list="ImageList"
              action="https://star.xiaojukeji.com/upload/img.node"
            >
              <el-button v-if="false" slot="trigger" size="small" type="primary">上传附件</el-button>
              <div slot="file" slot-scope="{file}" class="image-detail">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="file.name"
                  placement="top-start"
                  popper-class="tip-style"
                >
                  <div class="image-name">{{ file.name }}</div>
                </el-tooltip>
                <img class="el-upload-list__item-thumbnail detail-img" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download" />
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemoveImage(file)">
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-image-viewer v-if="dialogVisible" :on-close="closeViewer" :url-list="srcList" style="z-index: 999999;" />
          </section>
        </el-main>
        <el-main :style="type=='page'?{'padding': '20px 30px','margin-top': '10px'}:{'padding-left':'30px'}" class="layout_main">
          <div class="module_title">
            <div class="module_title__sign" />
            <div class="module_title__caption">动态</div>
          </div>
          <el-divider v-if="type !== 'page'" />
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="评论" name="first">
              <div>
                <div v-for="(item,index) in comments" :key="index" class="animated bounceInRight">
                  <div style="font-size:14px;color:#333B4A;display: inline-block;">{{ item.commentInfo.name }}</div>
                  <div style="margin-left:20px;display: inline-block;color: #9B9B9B;font-size:12px">{{ item.commentInfo.gmtCreater }}</div>
                  <p style="font-size:14px;color:#333B4A;margin-top: 10px;white-space: pre-line;">{{ item.commentInfo.content }}</p>
                  <br>
                </div>
                <el-input
                  v-model="commentContent"
                  type="textarea"
                  placeholder="请输入评论内容"
                  maxlength="1000"
                  show-word-limit
                  :autosize="{ minRows: 3, maxRows: 5}"
                  style="margin-bottom: 2%"
                />
                <el-button type="primary" size="small" style="float: right" @click="addComment">发表评论</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="second">
              <div>
                <div v-for="(item,index) in changeRecord" :key="index" style="margin: 20px 0" class="animated bounceInRight Layout_space_between">
                  <span class="operatorName">{{ item.operator }}</span>
                  <el-tooltip
                    v-if="item.remark && item.remark.length > 25"
                    class="item"
                    effect="dark"
                    :content="item.remark"
                    placement="top-start"
                    popper-class="tip-style"
                  >
                    <span class="remark">{{ item.remark && item.remark.length > 25 ? item.remark.substring(0, 30) + '...' : item.remark }}</span>
                  </el-tooltip>
                  <span v-else class="remark">{{ item.remark }}</span>
                  <span class="createTime">{{ item.createTime }}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>

        </el-main>
      </el-container>
      <!-- 弹窗 -->
      <el-dialog
        v-if="statusDialogVisible"
        :visible.sync="statusDialogVisible"
        width="30%"
        title="删除确认"
        class="public_task"
        :append-to-body="true"
        :close-on-click-modal="false"
      >
        <div class="blueStripe" />
        <div style="text-align:center;">是否要删除当前缺陷？</div>
        <template v-slot:footer>
          <el-button size="mini" @click="statusDialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="statusDialogConfirm">确 定</el-button>
        </template>
      </el-dialog>
      <createdBug v-if="modalShow" ref="createdBug" @father="father" />
      <normal-dialog
        :show-dialog="showCopyFile"
        :title="'上传截图'"
        :width="'40%'"
        :submit-button="'上传'"
        :top="'5vh'"
        @confirm="confirmUpload()"
        @cancel="showCopyFile=false"
      >
        <div class="file-dialog">
          <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
            <el-form-item label="图片命名" prop="name">
              <el-col style="width: 75%">
                <el-input v-model="imageName.name" placeholder="请输入图片名称" />
              </el-col>
              <el-col style="width: 10%">.png</el-col>
            </el-form-item>
          </el-form>
          <div class="image">
            <div class="image-center">
              <img :src="imageUrl" class="image-url">
            </div>
          </div>
        </div>
      </normal-dialog>
    </el-container>
    <el-button id="pasteUpload" type="primary" style="display: none" @click.stop="pasteUpload">upload</el-button>
  </div>
</template>

<script>
const _ = require('lodash')
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { EncryptId, analysisBizId_id } from '@/utils/crypto-js.js'
import statusChange from '@/views/projectManage/bugList/details/statusChange'
import { getCommentList, addComment } from '@/api/requirement.js'
import {
  bugDetails,
  bugGetEnum,
  bugDelete,
  bugUpdate,
  taskListCreate,
  releaseList,
  settingQueryBizModuleList,
  operationLogBug
} from '@/api/defectManage.js'
import normalDialog from '@/components/dialog/normalDialog'
import createdBug from '@/views/projectManage/bugList/file/createdBug'
import axios from 'axios'
import { deepClone } from '@/utils/global'
import searchPeople from '@/components/select/searchPeople' // 人员select
// import tinymce from 'tinymce/tinymce'
// import Editor from '@tinymce/tinymce-vue'
import normalArea from '@/components/input/normalArea' // 富文本
import 'tinymce/plugins/table'// 插入表格插件
// import 'tinymce/themes/silver/theme'
// import 'tinymce/icons/default/icons'
import Tag from '@/components/Tag'

document.body.onpaste = function(event) {
  const data = (event.clipboardData || window.clipboardData)
  const items = data.items
  const fileList = [] // 存储文件数据
  if (items && items.length) {
    // 检索剪切板items
    for (let i = 0; i < items.length; i++) {
      fileList.push(items[i].getAsFile())
      window.uploadFiles = fileList
    }
    document.getElementById('pasteUpload').click()
  }
}

export default {
  name: 'BugDetails',
  components: {
    createdBug,
    normalDialog,
    statusChange,
    searchPeople,
    ElImageViewer,
    normalArea,
    Tag
  },
  props: {
    id: {
      type: Number,
      default: -1
    },
    type: {
      type: String,
      default: 'page'
    },
    drawerShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bugId: -1, // 当前缺陷Id
      bizId: -1, // 当前缺陷BizId
      srcList: [],
      // configure: {
      //   language_url: '/tinymce/langs/zh_CN.js',
      //   language: 'zh_CN',
      //   skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
      //   browser_spellcheck: true, // 拼写检查
      //   branding: false, // 去水印
      //   elementpath: false, // 禁用编辑器底部的状态栏
      //   statusbar: false, // 隐藏编辑器底部的状态栏
      //   paste_data_images: true, // 允许粘贴图像
      //   menubar: false, // 隐藏最上方menu
      //   fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
      //   file_picker_types: 'image',
      //   images_upload_credentials: true,
      //   plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
      //   toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
      // },
      text_content: '',
      clielIcon: true, // 所属任务交互
      active: false,
      changeRecord: [], // 变更记录Data
      modalShow: false,
      activeName: 'first', // 选项卡默认评论
      iconName: 'float_反馈_icon_close',
      bugNameIsFocus: false,
      props: { multiple: true },
      height: '700px',
      bugDescribeNoHtml: '',
      bugDescribe: '',
      bugNameForm: { bugName: '' },
      fileList: [],
      notImageList: [], // 文件非图片数组
      ImageList: [], // 文件图片数组
      accessory: null,
      dialogVisible: false,
      disabled: false,
      loading: {
        drawer: false,
        fullscreen: false,
        title: false,
        details: false,
        userInfo: false,
        time: false,
        appInfo: false,
        describe: false,
        accessory: false
      },
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      comments: [],
      commentContent: '',
      uploadDialogVisible: false,
      uploadDialogImageUrl: '',
      num: 0,
      formHeight: '',
      formHeight1: '',
      statusDialogVisible: false,
      bug: {},
      bugModel: {},
      bugRemark: '',
      describeEditorVisible: false,
      enums: {},
      taskEnumList: [],
      appClientList: [],
      versionList: [],
      map: {},
      business_platform_Modular: [], // 业务/平台/模块
      bugNameTextareaStyle: {
        width: '1000px',
        position: 'relative'
      },
      bugNameTextareaWidth: 'auto',
      showWordLimit: false,
      showRule: false,
      rules: {
        assigner: [{ required: true, message: '责任人不可为空', trigger: 'blur' }],
        currentHandler: [{ required: true, message: '修复人不可为空', trigger: 'blur' }],
        bugName: [{ required: true, message: '标题不可为空', trigger: 'blur' }]
      },
      showCopyFile: false, // 复制文件对话框
      imageName: { name: null },
      imageUrl: null,
      bugData: {}, // bug数据
      uploadButton: this.drawerShow,
      imageRules: {
        name: [
          { required: true, message: '请输入图片名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      },
      statusObj: null, // 状态对象
      theBugTypeEnumList: [] // 缺陷类型
    }
  },
  watch: {
    id(newVal, oldVal) {
      this.bug = {}
      this.bugModel = {}
      this.bugNameForm = { bugName: '' }
      this.loading.drawer = false
      this.init()
      this.handleClicks()
    },
    drawerShow(newV, oldVal) {
      if (newV) {
        this.init()
        this.uploadButton = newV
      }
    },
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.taskListCreate() // 获取所属任务
        this.getBusinessLinePlatformModule()
      },
      immediate: true
    }
  },
  created() {
    this.analysisBizId_id()
    this.getBugSelect()
    if (this.type !== 'page') {
      var height = window.innerHeight > document.body.clientHeight ? window.innerHeight : document.body.clientHeight
      height -= 130
      this.height = height + 'px'
    }
    if (this.type === 'page' || this.type === 'drawer') {
      this.uploadButton = true
    }
  },
  mounted() {
    // tinymce.init({ selector: '.tinymce', height: '100' })
    this.bugGetEnum()
    const id = this.id === -1 ? this.bugId : this.id
    this.bugGet(id, false).then(res => {
      this.changeWidthOnBlur()
      this.getCommentList()
      releaseList().then(res => {
        this.appClientList = res.data.appClient // 客户端
        this.getVersionList(this.bug.appId)
      })
      this.RichText()
    })
  },
  methods: {
    analysisBizId_id() { // 解析路由中的bizId_id
      if (!this.$route.query.bizId_id) return
      const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
      this.bugId = bizId_id[1]
    },
    debounceQuery: _.debounce(function() {
      this.taskListCreate(...arguments)
    }, 500),
    async taskListCreate(val) { // 获取所属任务
      const params = {
        bizId: this.bizId
      }
      if (val) {
        params.name = val
      } else {
        params.id = this.bug.taskId
      }
      console.log(params)
      const res = await taskListCreate(params)
      if (res.code === 200) {
        this.taskEnumList = res.data || []
      }
    },
    async getBugSelect() { //  获取下拉菜单option
      const res = await bugGetEnum()
      if (res.code === 200) {
        this.statusObj = {
          bugEnumList: res.data.bugEnumList, // status
          repairResultEnumList: res.data.repairResultEnumList, // 修复结果
          bugReasonEnumList: res.data.bugReasonEnumList, // 缺陷原因
          theBugTypeEnumList: this.deleteChild(res.data.theBugTypeEnumList) // 缺陷类型
        }
      }
    },
    deleteChild(arr) { // 删除无用子属性
      const bfs = arr => {
        arr.forEach(item => {
          if (!item.childrenEnums || item.childrenEnums.length === 0) {
            delete item.childrenEnums
          } else {
            this.deleteChild(item.childrenEnums)
          }
        })
      }
      bfs(arr)
      return arr
    },
    handleClick(tab) {
      if (tab.label === '变更记录') {
        operationLogBug(this.bug.id).then(res => {
          this.changeRecord = res.data
        })
      }
    },
    handleClicks() {
      operationLogBug(this.id).then(res => {
        this.changeRecord = res.data
      })
    },
    closeDrawer() {
      this.$emit('close', false)
    },
    init() {
      this.getBugSelect()
      this.formHeight = ''
      this.formHeight1 = ''
      this.bugGet(this.id, false).then(res => {
        this.changeWidthOnBlur()
        this.getCommentList()
        releaseList().then(res => {
          this.appClientList = res.data.appClient // 客户端
          this.getVersionList(this.bug.appId)
        })
        this.text_content = this.bugDescribe === null ? '' : this.bugDescribe
      })
    },
    listen(event) {
      event.preventDefault() // 阻止浏览器默认换行操作
      return false
    },
    JumpRequire(id) {
      const bizId_id = EncryptId(`${this.bizId}_${id}`)
      this.$router.push({ name: '需求详情', query: { bizId_id: bizId_id }})
    },
    getToDetails() {
      const bizId_id = EncryptId(`${this.bizId}_${this.id}`)
      this.$router.push({ name: '缺陷详情', query: { bizId_id: bizId_id }})
    },
    isImage(arr) {
      const reg = new RegExp(/.*(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i)
      return arr.filter(item => { return !!item.url.match(reg) })
    },
    isNotImage(arr) {
      const reg = new RegExp(/.*(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i)
      return arr.filter(item => { return !item.url.match(reg) })
    },
    beforeUpload(file) {
      const reg = new RegExp(/.*(zip|xlsx|text|csv|xls|mov|mp4|m4a|avi|amr|mp3|wav|3gpp|gif|jpeg|png|jpg)/i)
      const isUpload = file.type.match(reg)
      const isName = file.name.match(reg)
      if (isUpload || isName) {
        const isLt200M = (file.size / 1024 / 1024) < 200
        if (!isLt200M) {
          this.$message({
            message: '上传文件大小不能超过 200MB!',
            type: 'warning'
          })
          return false
        }
      } else {
        this.$message({
          message: '不支持上传此文件格式',
          type: 'warning'
        })
        return false
      }
    },
    beforeRemove(file, fileList) {
      let a = true
      if (file && file.status === 'success') {
        a = this.$confirm(`确定删除 ${file.name}吗？`)
      }
      return a
    },
    handleRemoveNotImage(file, fileList) {
      this.notImageList = this.notImageList.filter(item => {
        return item.url !== file.url
      })
      this.bug.accessory = JSON.stringify([...this.notImageList, ...this.ImageList])
      this.bugUpdate(this.bug, 'accessory')
    },
    handleRemoveImage(file, fileList) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.ImageList = this.ImageList.filter(item => {
          return item.url !== file.url
        })
        this.bug.accessory = JSON.stringify([...this.notImageList, ...this.ImageList])
        this.bugUpdate(this.bug, 'accessory')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closeViewer() {
      this.dialogVisible = false
      this.srcList = []
    },
    handlePictureCardPreview(file) {
      const index = this.ImageList.findIndex(item => item.url === file.url)
      const thobj = this.ImageList.splice(index, 1)
      this.ImageList.splice(0, 0, ...thobj)
      this.ImageList.map(item => {
        this.srcList.push(item.url)
      })
      this.dialogVisible = true
    },
    handleChange(response, file, fileList) {
      const reg = new RegExp(/.*(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.gif)/i)
      if (!response.success) {
        this.$message({
          showClose: true,
          message: response.error,
          type: 'error'
        })
        this.notImageList.pop()
        return false
      }
      const item = {
        name: file.name,
        url: 'http:' + file.response.url
      }
      const arr1 = deepClone(this.ImageList)
      const arr2 = deepClone(this.notImageList)
      item.url.match(reg) ? arr1.push(item) : arr2.push(item)
      this.bug.accessory = JSON.stringify([...arr2, ...arr1])
      this.$message({
        showClose: true,
        message: '文件上传成功',
        type: 'success'
      })
      this.bugUpdate(this.bug, 'accessory')
    },
    errorChange() {
      this.$message({
        showClose: true,
        message: '上传失败',
        type: 'error'
      })
    },
    handleDownload(file) { // 下载图片
      const xhr = new XMLHttpRequest()
      xhr.open('get', file.url, true)
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          this.saveAs(xhr.response, file.name)
        }
      }
      xhr.send()
    },
    saveAs(data, name) { // 保存图片
      const urlObject = window.URL || window.webkitURL || window
      const file = new Blob([data])
      const a = document.createElement('a')
      a.href = urlObject.createObjectURL(file)
      a.download = name
      a.click()
    },
    getCommentList() {
      getCommentList({ type: 2, joinId: this.bug.id }).then(res => {
        this.comments = res.data
        this.commentContent = ''
      })
    },
    addComment() {
      if (!this.commentContent) {
        this.$message.warning('评论不能为空')
        return
      }
      addComment({ commentInfo: { joinId: this.bug.id, type: 2, content: this.commentContent }, user: { ename: this.userInformation }}).then(res => {
        if (res.code === 200) {
          this.getCommentList()
        }
      })
    },
    changeRule() {
      if (this.bugNameForm.bugName) {
        this.rules.bugName[0].trigger = 'blur'
        this.showRule = false
      } else {
        this.rules.bugName[0].trigger = 'change'
        this.showRule = true
      }
    },
    changeWidthOnBlur() {
      if (this.type !== 'page') {
        return
      }
      const colLength = document.getElementById('divLength').offsetWidth
      let bugNameLength = document.getElementById('spanLength').offsetWidth
      const statusButtonLength = document.getElementById('itemLength1').offsetWidth
      const deleteButtonLength = document.getElementById('itemLength2').offsetWidth
      const labelLength = document.getElementsByClassName('el-form-item__label')[0].offsetWidth
      const wholeLength = colLength - statusButtonLength - labelLength - deleteButtonLength - 20
      if (bugNameLength + 40 < wholeLength) {
        bugNameLength += 40
        this.bugNameTextareaStyle.width = bugNameLength + 'px'
      } else {
        this.bugNameTextareaStyle.width = wholeLength + 'px'
      }
    },
    changeWidthOnFocus() {
      const colLength = document.getElementById('divLength').offsetWidth
      const statusButtonLength = document.getElementById('itemLength1').offsetWidth
      const deleteButtonLength = document.getElementById('itemLength2').offsetWidth
      const labelLength = document.getElementsByClassName('el-form-item__label')[0].offsetWidth
      const wholeLength = colLength - statusButtonLength - labelLength - deleteButtonLength - 20
      this.bugNameTextareaStyle.width = wholeLength + 'px'
    },
    changeBugName() {
      if (this.bugNameForm.bugName && this.bugNameForm.bugName.length < 1) {
        this.bugNameForm.bugName = this.bug.bugName
        return
      }
      this.bug.bugName = this.bugNameForm.bugName
      this.bugUpdate(this.bug, 'title')
    },
    RichText() {
      this.text_content = this.bugDescribe === null ? '' : this.bugDescribe
    },
    describeCancel() {
      this.text_content = this.bug.bugDescribe
      this.describeEditorVisible = false
    },
    describeConfirm() {
      this.bug.bugDescribe = this.text_content
      // if (this.text_content) {
      //   this.bugDescribeNoHtml = this.text_content
      //     .replace(/<[^>]+>/g, '')
      //     .replace(/&nbsp;/gi, '')
      // }
      this.bugUpdate(this.bug, 'describe').then(res => {
        if (res.code === 200) {
          this.describeEditorVisible = false
          this.bugGet(this.bug.id)
          this.$emit('update', false)
        }
      })
    },
    getVersionList(e) {
      // 获取版本号
      const list = this.appClientList.filter(value => value.code === e)
      this.versionList = list[0] ? list[0].childEnumInfos : []
    },
    updateBugStatus() {
      this.bugGet(this.bug.id)
      this.$emit('update', false)
    },
    bugGet(id, isLoading) {
      this.loading.fullscreen = isLoading
      return bugDetails({ id: id }).then(res => {
        if (res.code === 200) {
          if (this.num === 0) {
            document.getElementsByClassName('scop')[0].scrollTop = 0
          }
          this.bug = res.data
          this.bug.tags = res.data.tags || []
          this.bizId = this.bug.bizId
          this.bug.currentHandler = res.data.currentHandler.split(',')
          this.bug.assigner = res.data.assigner.split(',')
          this.bugModel = JSON.parse(JSON.stringify(res.data))
          this.bugDescribe = this.bug.bugDescribe
          // if (this.bugDescribe !== null) {
          // this.bugDescribeNoHtml = this.bugDescribe
          //     .replace(/<[^>]+>/g, '')
          //     .replace(/&nbsp;/gi, '')
          // }
          // console.log(this.bugDescribe)
          this.bugNameForm.bugName = this.bug.bugName
          this.bug.networkType = this.bug.networkType
          this.bug.appVersion = this.bug.appVersion
          this.bug.moduleIds = this.bug.moduleIds
          this.fileList = []
          var str = res.data.accessory
          if (str !== '' && str !== null) {
            var obj = JSON.parse(str.split('{}')[0])
            for (var a of obj) {
              this.fileList.push(a)
            }
          }
          this.ImageList = this.isImage(this.fileList)
          this.notImageList = this.isNotImage(this.fileList)
        } else {
          this.loading.drawer = true
          return Promise.reject(res.msg)
        }
        this.loading.fullscreen = false
        return res
      })
    },
    openQueryDialog() {
      this.modalShow = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(2, this.bug)
      })
    },
    father() {
      this.bugGet(this.bug.id, false)
      this.$emit('update', false)
    },
    bugGetEnum() {
      return bugGetEnum().then(res => {
        this.enums = res.data
        if (this.enums) {
          for (const i in this.enums) {
            this.map[i] = {}
            if (this.enums[i]) {
              for (const j in this.enums[i]) {
                this.map[i][this.enums[i][j].code] = this.enums[i][j].name
              }
            }
          }
        }
        this.theBugTypeEnumList = this.deleteChild(res.data.theBugTypeEnumList) // 缺陷类型
        return res
      })
    },
    bugUpdate(form, loadingStr) {
      if (form.currentHandler && form.currentHandler.length > 0) {
        if (form.assigner && form.assigner.length > 0) {
          this.formHeight = ''
          this.formHeight1 = ''
          loadingStr ? this.loading[loadingStr] = true : this.loading.fullscreen = true
          const userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.num = 1
          let objData
          const data = _.cloneDeep(form)
          if (form) {
            data.currentHandler = form.currentHandler.join(',')
            data.assigner = form.assigner.join(',')
            objData = { bugBaseInfo: data, user: userData }
          } else {
            data.currentHandler = form.currentHandler.join(',')
            data.assigner = form.assigner.join(',')
            objData = { bugBaseInfo: data, user: userData }
          }
          return bugUpdate(objData).then(res => {
            if (res.code === 200) {
              this.changeWidthOnBlur()
              this.clielIcon = true
              this.active = false
              this.bugModel = JSON.parse(JSON.stringify(this.bug))
              this.$emit('update', false)
              this.init()
            } else {
              this.bug = JSON.parse(JSON.stringify(this.bugModel))
            }
            loadingStr ? this.loading[loadingStr] = false : this.loading.fullscreen = false
            return res
          })
        } else {
          this.formHeight1 = 'type'
        }
      } else {
        this.formHeight = 'type'
      }
    },
    async bugUpdates(form, loadingStr) {
      if (form.currentHandler.length > 0) {
        if (form.assigner.length > 0) {
          this.formHeight = ''
          this.formHeight1 = ''
          loadingStr ? this.loading[loadingStr] = true : this.loading.fullscreen = true
          const userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.num = 1
          const data = _.cloneDeep(form)
          data.currentHandler = form.currentHandler.join(',')
          data.assigner = form.assigner.join(',')
          const objData = { bugBaseInfo: data, user: userData }
          const res = await bugUpdate(objData)
          if (res.code === 200) {
            this.changeWidthOnBlur()
            this.clielIcon = true
            this.active = false
            this.bugModel = JSON.parse(JSON.stringify(this.bug))
            this.$emit('update', false)
            this.init()
          } else {
            this.bug = JSON.parse(JSON.stringify(this.bugModel))
          }
          loadingStr ? this.loading[loadingStr] = false : this.loading.fullscreen = false
        } else {
          this.formHeight1 = 'type'
        }
      } else {
        this.formHeight = 'type'
      }
    },
    getBusinessLinePlatformModule() {
      settingQueryBizModuleList(this.bizId).then(res => {
        this.business_platform_Modular = res.data.map(item => ({
          ...item,
          value: item.id,
          label: item.moduleName,
          children: item.childModules.length === 0 ? null : item.childModules.map(item1 => ({
            ...item1,
            value: item1.id,
            label: item1.moduleName,
            children: item1.childModules.length === 0 ? null : item1.childModules.map(item2 => ({
              ...item2,
              value: item2.id,
              label: item2.moduleName
            }))
          }))
        }))
      })
    },
    openDeleteDialog() {
      // this.statusDialogForm = JSON.parse(JSON.stringify(this.bug))
      // this.statusDialogForm.status = null
      this.statusDialogVisible = true
    },
    JumpTask(id) { // 转到任务
      const bizId_id = EncryptId(`${this.bizId}_${id}`)
      this.$router.push({ name: '任务详情', query: { bizId_id: bizId_id }})
    },
    statusDialogConfirm() {
      const userData = { id: '', ename: this.userInformation, name: this.userNames }
      bugDelete(userData, this.bug.id).then(res => {
        this.statusDialogVisible = false
        if (res.code === 200) {
          if (this.type === 'page') {
            this.$router.push({ name: '缺陷' })
          } else {
            this.$emit('delete', false)
          }
        }
      })
    },
    generateMixed(len) {
      const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      let res = ''
      for (let i = 0; i < len; i++) {
        const id = Math.ceil(Math.random() * 35)
        res += chars[id]
      }
      return res
    },
    pasteUpload() {
      if (!this.uploadButton) {
        return false
      }
      if (window.uploadFiles[0]) {
        const reader = new FileReader()
        reader.readAsDataURL(window.uploadFiles[0])
        reader.onload = () => {
          const reg = new RegExp(/image\/png/)
          this.imageUrl = reader.result
          this.srcList.push(reader.result)
          if (this.imageUrl.match(reg)) { // 判断是否是图片
            this.showCopyFile = true
            this.imageName.name = this.generateMixed(10)
          }
        }
      }
    },
    mouseOver() {
      this.active = true
    },
    // 移出
    mouseLeave() {
      this.active = false
    },
    getclielIcon() {
      this.clielIcon = !this.clielIcon
      this.$nextTick(() => {
        this.$refs.searchOfChatRoom.focus()
      })
    },
    mouseLeaves(e) {
      e ? '' : this.clielIcon = true
    },
    async confirmUpload() {
      if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
        return false
      }
      // const isExist = this.ImageList.some(item => {
      //   return this.imageName.name === item.name
      // })
      // if (isExist) {
      //   this.$message({
      //     showClose: true,
      //     message: '图片名称重复',
      //     type: 'error'
      //   })
      //   return false
      // }
      this.showCopyFile = false
      const res = await this.updateFile(window.uploadFiles[0])
      const data = res.data
      const item = {
        name: `${this.imageName.name}.png` || `${this.generateMixed(10)}.png`,
        status: 'success',
        url: 'http:' + data.url
      }
      this.ImageList.push(item)
      this.bug.accessory = JSON.stringify([...this.notImageList, ...this.ImageList])
      this.$message({
        showClose: true,
        message: '文件上传成功',
        type: 'success'
      })
      this.bugUpdate(this.bug, 'accessory')
      this.imageName.name = null
      this.imageUrl = null
      window.uploadFiles = null
    },
    updateFile(file) {
      const param = new FormData() // 创建form对象
      param.append('file', file)// 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: false
      } // 添加请求头
      return new Promise((resolve, reject) => {
        axios.post('https://star.xiaojukeji.com/upload/img.node', param, config)
          .then(response => {
            resolve(response)
          }).catch(err => {
            reject(err)
          })
      })
    }
  }
}
</script>
<style scoped lang="less">
.timeForm {
  width: 100%;
  /deep/ .el-form-item {
    display: inline-block;
    width: 49%;
  }
}
.layout_main {
  border-radius: 4px;
}
</style>
<style lang="less">
.el-tooltip__popper.is-dark {
  background-color: rgba(121,132,150, 0.8);
}
.bug_manage_container::-webkit-scrollbar {
    display: none;
}
.bug_manage_title .button_delete{
  font-size: 20px;
  line-height: 14px;
  padding: 7px 10px;
}
/* .bug_manage_title .button_delete2,.button_status .el-button {
  padding: 7px 10px;
  font-size: 14px;
  font-weight: normal;
} */
.bug_manage_dialog .el-dialog {
  border-radius:4px;
}
.bug_manage_dialog .el-dialog__header {
  padding: 20px 45px;
}
.bug_manage_dialog .el-dialog__body {
  padding: 0px 45px;
}
.bug_manage_dialog .el-dialog__footer {
  padding: 20px 45px 40px 0;
}
.layout_header,
.layout_aside,
.layout_main {
  background-color: #ffffff;
}
.bug_manage_dialog_fixMethod .el-form-item__label {
  padding-left: 10px;
}
.bug_manage_dialog .el-form-item__label {
  color: #666666;
  font-weight: 400;
}
.bug_manage_title .el-form-item__label {
  color: #333b4a;
  font-size: 18px;
  font-weight: 500;
}
#spanLength {
  color: #333b4a;
  font-size: 20px;
  font-weight: 500;
  visibility: hidden;
  position: absolute;
}
#divLength,
#divLength2 {
  padding-top: 30px;
}
.bug_manage_title .el-textarea__inner {
  border: transparent;
  resize: none;
  color: #333b4a;
  font-size: 20px;
  font-weight: 500;
  overflow:hidden;
}
.bug_manage_title .el-textarea__inner:focus {
  padding-right: 50px;
}
.bug_manage_title .el-input__count {
  background-color: transparent;
}
.bug_manage_title .bug_manage_bug_name_rule_show .el-textarea__inner{
  border: 1px solid #F56C6C;
}
.bug_manage_title .bug_manage_bug_name_focus .el-textarea__inner:focus {
  border: 1px solid #409eff;
}
.bug_manage_title .bug_manage_bug_name .el-textarea__inner:hover {
  border: thin solid #DCDFE6;
}
.bug_manage .el-form-item__label {
  color: #666666;
  font-weight: 400;
  padding: 0;
}
.bug_manage .el-input__inner {
  border: transparent;
  color: #666666;
  font-weight: 500;
}
.bug_manage .bug_manage_div {
  border: transparent;
  color: #666666;
  font-weight: 500;
  padding-left: 13px
}
.bug_manage .el-cascader .el-input__inner:hover {
  border: thin solid #DCDFE6;
}
.bug_manage .el-cascader .el-input__inner:focus {
  border: 1px solid #409eff;
}
.bug_manage .el-input__inner:hover {
  border: thin solid #DCDFE6;
}
.bug_manage .el-input__inner:focus {
  border: 1px solid #409eff;
}
.bug_manage .el-select,.el-cascader {
  width: 100%;
}
.bug_manage .el-select .el-input__suffix-inner {
  visibility: hidden;
}
.bug_manage .el-select:hover .el-input__suffix-inner {
  visibility: visible;
}
.bug_manage .el-cascader .el-input__suffix-inner {
  visibility: hidden;
}
.bug_manage .el-cascader:hover .el-input__suffix-inner {
  visibility: visible;
}
.layout_main .el-form-item.is-error .el-input__inner {
border-color: #DCDFE6;
}
</style>

<style scoped>
.el-aside {
  overflow: hidden;
}
.bug_describe {
  color: #666666;
  font-size: 14px;
}
.bug_describe:hover {
  color: #409eff;
  cursor: pointer;
}
.bug_describe_content {
  border-radius: 4px;
  border: 1px solid transparent;
}
.bug_describe_content:hover {
  border-radius: 4px;
  border: 1px solid rgba(191, 198, 220);
}
</style>

<style scoped lang="less">
.limit-font {
  /deep/.el-form-item__content {
    span {
      display: inline-block;
      line-height: 20px;
    }
  }
}

.str-task-name {
 margin-left: 14px;
 color: #666666;
 font-weight: 500;
}
.str-task-name:hover {
   color:#409EFF;
   cursor: pointer;
}
/deep/ .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #FFF;
    z-index: 1;
}
.operatorName {
  min-width: 50px;
  font-size:14px;
  font-family:PingFang SC;
  line-height:20px;
  color:rgba(51,59,74,1);
  opacity:1;
  margin-right: 10px;
}

.createTime {
  min-width:150px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  line-height:20px;
  color:rgba(68,68,68,1);
  opacity:1;
}

.remark {
  width:448px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  line-height:20px;
  color:#444444;
  opacity:1;
}

.bug_removeDate {
  height:16px;
  background:rgba(64,158,255,0.1);
  border:1px solid #409EFF;
  opacity:1;
  border-radius:2px;
  font-size:8px;
  font-family:MicrosoftYaHei;
  line-height:14px !important;
  color:#409EFF;
}

.bug_date {
  padding: 0 3px;
  background:rgba(245,108,108,0.1);
  border:1px solid rgba(245,108,108,1);
  opacity:1;
  border-radius:2px;
  font-size:8px;
  font-family:MicrosoftYaHei;
  line-height:10px;
  color:rgba(245,108,108,1);
}
.newBtn {
  font-size: 14px;
  color: rgb(51, 59, 74);
  font-weight: 400;
}
.newBtn:hover {
  color: #409EFF;
  cursor: pointer;
}
// .current:hover{
//   cursor: pointer;
//   border-radius: 4px;
//   border: 1px solid #DCDFE6;
// }
.module_title{
  display:flex;
  align-items: center;
  margin-bottom: 20px
}
.module_title__sign {
  width:4px;
  height:15px;
  background:#409EFF;
  border-radius:1px;
}
.module_title__caption{
  width:83px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  color:rgba(51,59,74,1);
  margin-left:6px;
  font-weight: 500;
}
.layout_main .el-form-item{
  margin-bottom:0px;
}
.layout_main .el-divider--horizontal{
  margin:10px 0 5px 0;
}
.tips {
  color:#DCDFE6;
  position: absolute;
}
.file-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-form {
    width: 100%;
  }
  .image {
    position: relative;
    width: 61%;
    padding-top: 60%;
    border:1px solid #409EFF;
    border-radius: 4px;
    .image-center {
      padding: 1%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      display: flex;
      justify-content: center;
    }
    .image-url {
      height: 90vh;
    }
  }
}
.upload-button {
  position: relative;
  color:#409EFF;
  border: 1px dashed #409EFF;
  background-color: #F7FBFF;
}
.upload-main {
  position: relative;
}
.upload-info {
  position: absolute;
  left: 130px;
  top: 14px;
  color:#409EFF;
  font-size: 12px;
  i{
    margin-right: 5px;
  }
}
.upload-file {
  color: #E6A23C;
  font-size: 12px;
  i{
    margin-right: 5px;
  }
}
.upload-title {
  width: 40px;
}
.bug-detail /deep/ .el-upload-dragger {
  width: 248px;
  height: 148px;
}
.bug-detail /deep/ .el-upload--picture-card {
  border: none;
}
/deep/ .el-upload--picture-card {
  display: none;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  height: 168px;
}
.el-upload-list__item-actions {
  height: calc(100%-20px);
  margin-top: 20px;
}
.image-detail {
  height: 100%;
  position: relative
}
.detail-img {
  padding-top: 20px;
}
.image-name {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  font-size: 12px;
  border-bottom: 1px solid #c0ccda;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.belong-task {
  max-width: 500px;
  display: flex;
  .modules-name {
    width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .modules {
    color: #999999;
  }
  .task-id {
    color: #999999;
    width: 80px;
    margin-right: 20px;
  }
  .name {
    color: #333333;
    margin-right: 20px;
  }
}
</style>