thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/MrTable/index.vue

<template>
  <div v-loading="paging.loading" class="table-wrapper">
    <div v-if="isExpand && analyticFeedback" style="padding-top: 10px;" v-html="analyticFeedback" />
    <span @click.stop>
      <!-- :data="[...paging.tableData].splice(0,2)" -->
      <!--  :data="tableData" -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 10px"
        highlight-current-row
        row-key="rowKey"
        :expand-row-keys="expandRowKeys"
        :header-cell-style="{
          background: '#F7F7F7',
          color: '#4a4a4a',
          'font-size': '14px',
          'font-weight': '500'
        }"
        :cell-style="{ 'font-size': '14px', color: 'rgb(102,102,102)' }"
        size="small"
        show-overflow-tooltip="true"
      >
        <el-table-column
          v-for="(item, index) in setColumns(columns)"
          :key="item.headerKey"
          :data-index="index"
          :prop="item.headerKey"
          :align="item.align"
          :label="item.name"
          :type="item.type"
          :min-width="setMinWidth(item)"
          :fixed="isFixed(item, index, columns)"
        >
          <template slot-scope="scope">
            <!--    展开    -->
            <div v-if="item.type === 'expand'">
              <TableExpandRow
                :analytic-feedback="scope.row.analyticFeedback"
                @upAnalyticFeedback="setAnalyticFeedback"
              />
            </div>
            <!--    操作列    -->
            <div v-else-if="item.name === '操作'">
              <!-- 分析反馈 -->
              <div v-if="isExpand">
                <el-button
                  v-if="isShowButton(scope.row, item)"
                  type="text"
                  @click.stop="btnFun({ value: '分析反馈' }, scope)"
                >
                  分析反馈
                </el-button>
              </div>
              <span v-else>
                <span v-for="(btnItem, btnIndex) in item.defaultValue" :key="btnIndex">
                  <!--另存为-->
                  <span v-if="btnItem.value === '另存为' && isShowButton(scope.row, item)" style="margin-right: 10px">
                    <el-dropdown @command="(command) => saveAsRow(command, scope.row, item)">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="将线上问题另存到其他业务线"
                        placement="top"
                      >
                        <el-button type="text">另存</el-button>
                      </el-tooltip>
                      <el-dropdown-menu v-if="subReportInfo" slot="dropdown">
                        <el-dropdown-item
                          v-for="subItem in subReportInfo.filter(subElm => subReportInfoFilter(subElm) )"
                          :key="subItem.id"
                          :command="subItem">
                          {{ subItem.reportName }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                  <!--链接-->
                  <span v-else-if="btnItem.value === '链接' && isShowButton(scope.row, item)" @click.stop>
                    <el-popover v-if="scope.row.operationTarget" placement="bottom-start" trigger="hover">
                      <el-button-group>
                        <el-button
                          size="small"
                          type="info"
                          plain
                          @click="goto(scope.row.operationTarget)"
                        >
                          访问链接
                        </el-button>
                        <el-button size="small" type="info" plain @click="btnFun(btnItem, scope)">编辑</el-button>
                        <el-button
                          size="small"
                          type="info"
                          plain
                          @click="scope.row.operationTarget = ''"
                        >
                          取消链接
                        </el-button>
                      </el-button-group>
                      <el-button slot="reference" style="margin-right: 10px" type="text">链接</el-button>
                    </el-popover>
                    <el-button
                      v-else
                      style="margin-right: 10px"
                      type="text"
                      @click.stop="btnFun(btnItem, scope)"
                    >
                      链接
                    </el-button>
                  </span>
                  <el-button
                    v-else-if="isShowButton(scope.row, item)"
                    style="margin-right: 10px"
                    type="text"
                    @click.stop="btnFun(btnItem, scope)"
                  >
                    {{ btnItem.value }}
                  </el-button>
                </span>
              </span>
            </div>
            <!-- 其他操作区域 -->
            <div
              v-else
              class="edit-wrapper"
              :style="{ cursor: pageDate && pageDate.status < 20 ? 'pointer' : 'auto' }"
            >
              <!-- 编辑区域 -->
              <div v-if="editKeys.indexOf(domKey) > -1 && !item.defaultValue">
                <div v-if="item.displayType === 'Select'">
                  <!-- 时间 -->
                  <div v-if="item.selectType && item.selectType === 'Time'">
                    <el-date-picker
                      v-model="scope.row[item.headerKey]"
                      type="date"
                      style="width: 90%"
                      value-format="yyyy-MM-dd"
                      size="mini"
                      placeholder="选择日期"
                    />
                  </div>
                  <!-- 单选人员 -->
                  <div v-else-if="item.selectType && item.selectType === 'SinglePeople'">
                    <searchPeople :value.sync="scope.row[item.headerKey]" />
                  </div>
                  <!-- 多选人员 -->
                  <div v-else-if="item.selectType && item.selectType === 'MultiplePeople'">
                    <searchPeople
                      :ref="`${scope.row.rowKey}_9867`"
                      :value.sync="scope.row[item.headerKey]"
                      :multiple="true"
                    />
                  </div>
                  <!-- 多选人员 -->
                  <div v-else-if="item.selectType && item.selectType === 'people'">
                    <searchPeople :value.sync="scope.row[item.headerKey]" :multiple="true" />
                  </div>
                  <!-- 下拉选择 -->
                  <el-select
                    v-else
                    v-model="scope.row[item.headerKey]"
                    size="mini"
                    placeholder="请选择"
                    style="width: 80%"
                  >
                    <el-option
                      v-for="optionItem in item.selectEnum"
                      :key="optionItem"
                      :label="optionItem"
                      :value="optionItem">{{ optionItem }}
                    </el-option>
                  </el-select>
                </div>
                <!-- 文本域 -->
                <el-input
                  v-else-if="item.displayType === 'Texterea'"
                  v-model="scope.row[item.headerKey]"
                  type="textarea"
                  placeholder="请输入"
                  :maxlength="item.name.search(/天数/) > -1 ? 10 : ''"
                  :autosize="{ minRows: item.name.search(/天数/) > -1 ? 1 : 2, maxRows: 30 }"
                  show-word-limit
                />
                <!-- 团队单选 -->
                <div v-else-if="item.displayType === 'CascaderSingle'">
                  <CascaderSingle v-model="scope.row[item.headerKey]" />
                </div>
                <!-- 团队多选 -->
                <div v-else-if="item.displayType === 'Cascader'">
                  <Cascader v-model="scope.row[item.headerKey]" @change="(value) => cascaderChange(value, scope)" />
                </div>
                <!-- 下拉选择 -->
                <div v-else-if="item.defaultValue === 'Select'" />
                <!-- 默认输入框 -->
                <el-input
                  v-else
                  v-model="scope.row[item.headerKey]"
                  size="mini"
                  maxlength="100"
                  show-word-limit
                  placeholder="请输入"
                />
              </div>
              <!-- 文本展示 -->
              <span v-else-if="item.displayType === 'Text'">{{ item.defaultValue[0].value }}</span>
              <!--  <div v-else class="edit-cell" @click.stop="editLine(scope.row, index)">  -->
              <!-- 文本展示 -->
              <div v-else class="edit-cell" @click.stop="editLine(scope.row, index)">
                <div v-if="item.displayType === 'Cascader'">
                  <CascaderInfo :team-data="scope.row[item.headerKey]" />
                </div>
                <div v-else-if="item.displayType === 'CascaderSingle'">
                  <CascaderSingleInfo :team-data="scope.row[item.headerKey]" />
                </div>
                <div v-else-if="item.displayType === 'Select'">
                  <!-- 单个人员选择 -->
                  <div v-if="item.selectType && item.selectType === 'SinglePeople'">
                    <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
                  </div>
                  <!-- 多个人员选择 -->
                  <div v-else-if=" item.selectType && item.selectType === 'MultiplePeople'">
                    <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
                  </div>
                  <!-- 多个人员选择 -->
                  <div v-else-if="item.selectType && item.selectType === 'people'">
                    <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
                  </div>
                  <div v-else>
                    {{ scope.row[item.headerKey] }}
                  </div>
                </div>
                <div
                  v-else-if="item.displayType === 'Texterea'"
                  :style="{
                    cursor: item.name.search(/需求名称|问题/) > -1 && scope.row.operationTarget ? 'pointer' : 'auto',
                    color: item.name.search(/需求名称|问题/) > -1 && scope.row.operationTarget ? '#1890ff':'#666'
                  }"
                  @click.stop="item.name.search(/需求名称|问题/) > -1 && pageType.search(/edit/) < 0 && goto(scope.row.operationTarget) || editLine(scope.row, index)"
                >
                  <TextInfo :text-align="item.name" :text="scope.row[item.headerKey]" />
                </div>
                <div v-else>
                 <span v-html="scope.row[item.headerKey]" />
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </span>

    <div class="plus-table-data" :style="{ marginBottom: plusTableDataBottom }" @click.stop>
      <el-button v-if="pageDate && pageDate.status < 20" type="text" @click.stop="addTableData">
        <svg-icon icon-class="data-plus" class="icon" />
        新增
      </el-button>
    </div>
    <!--  分页  -->
    <div v-if="false" class="pagination-wrapper">
      <el-pagination
        :current-page.sync="paging.curIndex"
        :page-size="paging.pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 15, 20, 30]"
        :total="paging.pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <div />
    <span @click.stop>
      <slot name="fixedText" />
      <markingIssues ref="markingIssues" />
      <Analysis ref="Analysis" @upData="upDataAnalysis" />
      <LinkEdit ref="LinkEdit" @change="linkEditChange" />
    </span>
  </div>
</template>

<script>
import _ from 'lodash'
import { uuid10 } from '@/utils'
import Analysis from './Analysis'
import LinkEdit from './LinkEdit'
import Cascader from '../Cascader'
import CascaderInfo from '../CascaderInfo'
import TextInfo from '../TextInfo'
import MultiplePeopleInfo from '../MultiplePeopleInfo'
import TableExpandRow from './TableExpandRow'
import markingIssues from '../markingIssues'
import CascaderSingle from '../CascaderSingle'
import CascaderSingleInfo from '../CascaderSingleInfo'
import searchPeople from '@/components/select/searchPeople' // 人员select
import { updateAnalyticFeedback, getDeptCharge } from '@/api/qualityMonthlyReport/edit'
import { reportDataBack } from '@/store/modules/monthlyReport/edit/utils.js'
// import { getDeptByKeyWord } from '@/api/qualityMonthlyReport'

export default {
  name: 'MrTable',
  components: {
    Analysis,
    LinkEdit,
    Cascader,
    CascaderInfo,
    searchPeople,
    MultiplePeopleInfo,
    TableExpandRow,
    markingIssues,
    TextInfo,
    CascaderSingle,
    CascaderSingleInfo
  },
  props: {
    plusTableDataBottom: {
      type: String,
      required: false,
      default: () => '18px'
    },
    domKey: {
      type: String,
      required: false,
      default: () => ''
    },
    subTitles: {
      type: Object,
      required: false,
      default: () => null
    },
    columns: {
      type: Array,
      required: false,
      default: () => []
    },
    // 分析反馈时使用的数据
    title: {
      type: String,
      required: false,
      default: () => ''
    },
    tableData: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    this.setAnalyticFeedback = _.debounce(this.setAnalyticFeedback, 300)
    return {
      analyticFeedback: '',
      expandRowKeys: [],
      feedbackIndex: null,
      username: localStorage.getItem('username'),
      paging: {
        tableData: [],
        curIndex: 1,
        pageTotal: 0,
        pageSize: 10,
        loading: false,
        timer: 1200
      }
    }
  },
  computed: {
    isExpand() {
      return (
        this.pageDate &&
        this.pageDate.status &&
        this.pageDate.status === 30 &&
        ((this.tabsActive.search(/本月重点问题/) > -1 &&
          this.pageType === 'readAll') ||
          (this.pageType === 'read' && this.title === '本月重点问题'))
      )
    },
    selectEnum() {
      return this.$store.state.monthlyReportEdit.selectEnum
    },
    tabPageData() {
      return this.$store.state.monthlyReportEdit.tabPageData
    },
    pageType() {
      return this.$store.state.monthlyReportEdit.pageType
    },
    tabsActive() {
      return this.$store.state.monthlyReportEdit.tabsActive
    },
    pageDate() {
      return this.$store.state.monthlyReportEdit.pageDate
    },
    roleCode() {
      return this.$store.state.monthlyReportEdit.roleCode
    },
    subReportName() {
      return this.$store.state.monthlyReportEdit.subReportName
    },
    subReportInfo() {
      return this.$store.state.monthlyReportEdit.subReportInfo
    },
    editKeys() {
      return this.$store.state.monthlyReportEdit.editKeys
    },
    isLoading() {
      return this.$store.state.monthlyReportEdit.isLoading
    }
  },
  // watch: {
  //   tableData() {
  //     if (this.tableData.length) {
  //       this.init()
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      this.setExpandRowKeys()
      this.init()
    })
    setTimeout(() => {
      if (!this.analyticFeedback) {
        this.setAnalyticFeedback()
      }
    }, 3000)
  },
  methods: {
    isEdit() {
    },
    init() {
      this.paging.curIndex = 1
      this.paging.pageSize = 10
      // console.log(this.isLoading, this.domKey)
      this.paging.loading = this.isLoading.indexOf(this.domKey) > -1
      this.paging.tableData = [...this.tableData].splice((this.paging.curIndex - 1 || 0) * this.paging.pageSize, this.paging.pageSize)
      this.paging.pageTotal = this.tableData.length
      // console.log('init', this.paging)
      setTimeout(() => {
        this.paging.loading = false
      }, this.paging.timer)
    },
    setMinWidth(item) {
      let width = 80
      if (item.name === '操作') {
        if (item.defaultValue.length) {
          width = item.defaultValue.length * (item.defaultValue.length > 2 ? 20 : 30)
        }
        if (this.isExpand) {
          width = 50
        }
      }
      if (item.name === '定级') {
        width = 70
      }

      if (item.name === '原因') {
        width = 150
      }

      if (item.name === '影响') {
        width = 100
      }
      if (item.name.search(/团队/) > -1) {
        width = 50
      }
      if (item.name.search(/问题/) > -1 && ((this.tabsActive.search(/本月重点问题/) > -1 &&
        this.pageType === 'readAll') ||
        (this.pageType === 'read' && this.title === '本月重点问题'))) {
        width = 300
      }

      if (item.name.search(/改进项/) > -1) {
        width = 200
      }

      if (this.pageType.search(/read/) > -1) {
        if (item.name.search(/标签|影响/) > -1) {
          width = 150
        }
        if (item.name.search(/定级|天数|类型/) > -1) {
          width = 35
        }
        if (item.name.search(/原因|描述/) > -1) {
          width = 250
        }
        if (item.name.search(/改进项/) > -1) {
          width = 200
        }
        if (item.name.search(/责任人|负责人|模块|团队|是否/) > -1) {
          width = 40
        }
      }
      return `${width}px`
    },
    isFixed(item, index, columns) {
      if (item.name === '操作') return 'right'
      return false
    },
    editLine(row, index) {
      // console.log(this.pageDate.status, this.domKey, this.editKeys)
      if (this.pageDate.status < 20) {
        this.$store.commit('monthlyReportEdit/ADD_EDIT_KEYS', this.domKey)
      }
      this.$forceUpdate()
    },
    btnFun(btnItem, scope) {
      this.$store.commit('monthlyReportEdit/INIT_EDIT_KEYS')
      if (btnItem.value === '删除') {
        this.tableData.splice(scope.$index, 1)
      }
      if (btnItem.value === '链接') {
        // console.log(scope)
        this.$refs['LinkEdit'].open(scope.row.operationTarget || '', scope.$index)
        // console.log(btnItem, scope, this.columns)
      }
      if (btnItem.value === '标记') {
        this.$refs.markingIssues.modalShow = true
        this.$nextTick(() => {
          this.$refs.markingIssues.openModal({
            title: '标记为重点问题',
            scope,
            headerTitle: this.title,
            columns: this.columns
          })
        })
      }
      if (btnItem.value === '分析反馈') {
        // console.log(293, btnItem, scope)
        this.$refs.Analysis.open(scope.row.analyticFeedback, scope.$index)
      }
    },
    // 另存为
    saveAsRow(command, row, item) {
      // console.log(414)
      this.$store.commit('monthlyReportEdit/SAVE_AS', {
        tableHeaders: this.columns,
        tableRows: row,
        subReportid: command.id
      })
    },
    // 分析反馈问题更新
    upDataAnalysis({ rowIndex, analyticFeedback }) {
      // console.log({ rowIndex, analyticFeedback })
      if (this.pageType.search(/edit/) < 0) {
        window.log({ c: 'report_view', d: 'report_view_Feedback' })
        // console.log(rowIndex, analyticFeedback)
        this.feedbackIndex = rowIndex
        this.tableData[rowIndex].analyticFeedback = _.cloneDeep(
          analyticFeedback
        )
        let feedbackType = ''
        if (analyticFeedback.hasOwnProperty('feedbackType')) {
          feedbackType = 'feedbackType'
        }
        this.setAnalyticFeedback(feedbackType)
      }
    },
    addTableData() {
      const item = {
        rowKey: uuid10()
      }
      this.columns.forEach((elm) => {
        item[elm.headerKey] = ''
      })
      this.tableData.push(item)
      this.$nextTick(() => {
        this.$store.commit('monthlyReportEdit/GET_ALL_OFFSETTOP')
      })
      this.editLine()
    },
    // 监听团队数据变化，动态改变问题负责人名称
    async cascaderChange(value, scope) {
      if (this.title === '本月重点问题') {
        // console.log({ value, scope, columns: this.columns, title: this.title })
        const peopleHeaderKey = this.columns.filter(elm => elm.name === '责任人')[0].headerKey
        const resKey = `${scope.row.rowKey}_9867`
        // console.log(this.$refs[resKey][0], resKey)
        if (value.length) {
          this.$refs[resKey][0].firstGetArr = true
          const res = await getDeptCharge({
            deptCode: value
          })
          scope.row[peopleHeaderKey] = Array.from(new Set(res.data.map(elm => elm.manageName)))
        } else {
          scope.row[peopleHeaderKey] = []
        }
      }
    },
    // 添加插入
    setColumns(columns) {
      let newColumns = _.cloneDeep(columns)
      if (this.isExpand) {
        newColumns = [
          {
            dataType: 'Single',
            defaultValue: null,
            displayType: 'Cascader',
            name: '',
            align: 'left',
            type: 'expand',
            selectEnum: null,
            selectType: null,
            headerKey: uuid10(6)
          },
          ...newColumns
        ]
        newColumns[1].align = 'left'
      }
      newColumns.forEach((elm) => {
        if (!elm.align) {
          elm.align = 'center'
        }
      })
      // if (this.pageDate.status > 10 && this.tabsActive.indexOf('本月重点问题') < 0) {
      // 非编辑状态，并且不是·本月重点问题·，删除操作按钮
      if (this.pageDate && this.pageDate.status > 10 && !this.isExpand) {
        newColumns.splice(newColumns.length - 1, 1)
      }
      return newColumns
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 &&
        this.tabsActive.indexOf('本月重点问题') > -1 &&
        this.pageType.search(/edit/) < 0
      ) {
        return [1, 2]
      } else if (columnIndex === 1) {
        return [0, 0]
      }
    },
    // 查看页面数据分析
    setAnalyticFeedback(key = '') {
      if (
        // this.pageType.search(/edit/) < 0 &&
        // this.pageDate.status > 10 &&
        // this.tabsActive.indexOf('本月重点问题') > -1
        this.isExpand
      ) {
        const tabPageData = reportDataBack(_.cloneDeep(this.tabPageData))
        let obj = null
        const run = (arr) => {
          arr.forEach((elm) => {
            if (elm.domKey === this.domKey) {
              // console.log(elm)
              obj = _.cloneDeep(elm)
            }
            if (elm.content.length) {
              elm.content.forEach((item) => {
                if (item.domKey === this.domKey) {
                  // console.log(elm)
                  obj = _.cloneDeep(elm)
                }
              })
            }
            if (elm.children.length) {
              run(elm.children)
            }
          })
        }
        run(tabPageData.children)
        const params = {
          reportId: this.$route.query.reportId,
          subReportName: this.subReportName,
          feedbackIndex: this.feedbackIndex,
          reportCatalog: obj
        }
        if (this.$route.query.pageType === 'readAll' && obj) {
          params.subReportName = `${obj.title}`
        }
        // console.log(params)
        // 提交数据
        if (obj && obj.content[0].tableRows.length) {
          if (key && key === 'feedbackType') {
            params[key] = 'feedback_commit'
          }
          updateAnalyticFeedback(params).then((res) => {
            if (res.code === 200) {
              this.analyticFeedback = res.data
              if (this.analyticFeedback.search(/yellow/) > -1) {
                this.analyticFeedback = this.analyticFeedback.replace(
                  /yellow/g,
                  '#FAAD14'
                )
              }
              if (this.analyticFeedback.search(/green/) > -1) {
                this.analyticFeedback = this.analyticFeedback.replace(
                  /green/g,
                  '#7ED321'
                )
              }
              // this.analyticFeedback = res.data
            }
          })
        }
      }
    },
    /**
     * 操作按钮是否显示隐藏
     * 1、首先判断 页面 为编辑页面时 展示所有按钮
     * 2、判读分析反馈是否已经提交，已经提交的话，不展示按钮
     * 3、再判断当前表格是否有责任人
     *      有责任人
     *        判断当前用户是否存在负责人中，存在展示按钮，不存在则不展示
     *      无责任人不展示按钮
     * @param row 表格行数据
     * @returns {boolean}
     */
    isShowButton(row) {
      if (
        this.pageType.search(/edit/) > -1 &&
        this.pageDate &&
        this.pageDate.status < 20
      ) {
        return true
      }
      if (row.analyticFeedback && row.analyticFeedback.isCommitted) {
        return false
      }
      // 默认所有情况都展示
      if (this.pageType) {
        return true
      }
      if (this.roleCode === 100 || this.roleCode === 0) return true
      if (this.pageDate.createBy === this.username) return true
      for (let i = 0; i < this.columns.length; i++) {
        const elm = this.columns[i]
        if (elm.name === '责任人') {
          if (!row[elm.headrKey]) return true
          return row[elm.headrKey].indexOf(this.username) > -1
        }
      }
      return false
    },
    setExpandRowKeys() {
      if (this.isExpand && this.tableData && this.tableData.length) {
        this.tableData.forEach((elm) => {
          if (
            elm.analyticFeedback &&
            elm.analyticFeedback.hasOwnProperty('isCommitted') &&
            elm.analyticFeedback.isCommitted &&
            this.expandRowKeys.indexOf(elm.rowKey) < 0
          ) {
            this.expandRowKeys.push(elm.rowKey)
          }
        })
      }
    },
    subReportInfoFilter(elm) {
      const { subReportId } = this.$route.query
      if (this.pageType === 'edit') {
        return `${elm.id}` !== `${subReportId}`
      }
      return this.tabsActive.indexOf(elm.id) < 0
    },
    // 修改链接
    linkEditChange({ rowIndex, addresLink }) {
      // console.log(rowIndex, addresLink)
      this.tableData[rowIndex].operationTarget = addresLink
    },
    /* S 分页 */
    handleSizeChange(value) {
      this.paging.loading = true
      // console.log('handleSizeChange', value)
      this.paging.pageSize = value
      this.paging.tableData = [...this.tableData].splice((this.paging.curIndex - 1 || 0) * this.paging.pageSize, this.paging.pageSize)
      setTimeout(() => {
        this.paging.loading = false
      }, this.paging.timer)
    },
    handleCurrentChange(value) {
      this.paging.loading = true
      // console.log('handleCurrentChange', value)
      this.paging.curIndex = value
      this.paging.tableData = [...this.tableData].splice((this.paging.curIndex - 1 || 0) * this.paging.pageSize, this.paging.pageSize)
      setTimeout(() => {
        this.paging.loading = false
      }, this.paging.timer)
    },
    /* E 分页 */
    // 页面跳转
    goto(url) {
      // console.log(url)
      url && window.open(url, '_blank')
    }
  }
}
</script>

<style scoped lang='less'>
.table-wrapper{
  position: relative;
  .pagination-wrapper{
    position: absolute;
    right: 0;
    bottom: 5px;
    .el-pagination{
      margin: 0;
    }
  }
}
.edit-wrapper {
  .edit-cell {
    min-height: 23px;
    width: 100%;
  }
}

.plus-table-data {
  margin-top: 2px;
}

/deep/ .el-table__expand-column {
  border-right: 0;

  .el-icon-arrow-right:before {
    // 这是展开图标
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  }
}

/deep/ .el-table__expand-column .cell {
  .el-table__expand-icon {
    .el-icon-arrow-right:before {
      // 这是展开图标
      content: '\e6d9';
      //content: "\e6d8";
    }
  }

  .el-table__expand-icon--expanded {
    // 这是点击后的旋转角度
    //transform: rotate(180deg);
    transform: rotate(0deg);

    .el-icon-arrow-right:before {
      // 这是展开图标
      //content: "\e6d9";
      content: '\e6d8' !important;
    }
  }
}

/deep/ .svg-icon {
  width: 1em;
  height: 1em;
}

/deep/ .el-table__expanded-cell {
  padding-bottom: 0;
  padding-left: 60px;
}

/deep/ .el-button {
  font-weight: 400;
}

/deep/ .red {
  color: red;
}

/deep/ .green {
  color: green;
}

/deep/ .yellow {
  color: yellow;
}

</style>