<template>
  <div class="fullheight">
    <el-container>
      <el-header style="height:135px;">
        <fieldset class="fieldset">
          <legend>基本信息</legend>
          <el-form v-form data-vv-scope="PortalMeetingConfigForm">
            <!--             <ht-form-item label="申请绑定流程">
              <el-checkbox
                v-model="PortalMeetingConfig.bindFlow"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
              <span
                v-if="PortalMeetingConfig.bindFlow"
                style="margin-right:10px;margin-left:10px;"
                >{{ flowObj.flowName }}</span
              >
              <el-button
                v-if="PortalMeetingConfig.bindFlow"
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="showFlowDialog()"
                >选择</el-button
              >
              <el-button
                v-if="PortalMeetingConfig.bindFlow && flowObj.flowKey"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="clearFlow()"
                >清除</el-button
              >
              <el-button
                v-if="PortalMeetingConfig.bindFlow && flowObj.flowKey"
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="showMappingDialog()"
                >关键字段映射</el-button
              >
              <eip-flow-dialog
                ref="eipFlowDialog"
                :single="true"
                name="eipFlowDialog"
                @onConfirm="dialogOnConfirm"
                append-to-body
              />
            </ht-form-item> -->
            <ht-form-item label="发布到日程">
              <el-checkbox
                v-model="PortalMeetingConfig.publishSchedule"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
            </ht-form-item>
            <!-- <ht-form-item label="绑定设备字典">
                 <div class="customQuery-inputs">
                  <el-select
                    @visible-change="dicClick"
                    clearable
                    v-model="PortalMeetingConfig.dicCode"
                    placeholder="请选择数据字典"
                    ref="dicSelect"
                    @clear="clearDic"
                  >
                    <el-option
                      :value="PortalMeetingConfig.dicCode"
                      :label="PortalMeetingConfig.dicName"
                      style="width: 100%;height:100%;overflow: auto;background-color:#fff">
                      <el-tree :data="dicData" :props="dicDefaultProps" @node-click="dicNodeClick"></el-tree>
                    </el-option>
                  </el-select>
                </div>
              </ht-form-item> -->
          </el-form>
          <div slot="footer" style="text-align: center">
            <el-button @click="beforeSaveDataConfigForm" type="primary">{{
              $t('eip.common.save')
            }}</el-button>
            <el-button @click="releaseColumn" type="success"
              >发布为栏目</el-button
            >
          </div>
        </fieldset>
      </el-header>
      <el-main style="height: calc(100% - 135px)!important;">
        <fieldset
          class="fieldset"
          style="height: calc(100% - 20px);    min-height: 300px;"
        >
          <legend>会议室资料</legend>
          <ht-table
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            quick-search-props="id"
            :show-export="false"
            :show-custom-column="false"
            @selection-change="handleSelectionChange"
            :custom-table-height="height"
            ref="htTable"
            class="mainTable"
          >
            <template v-slot:toolbar>
              <el-button-group>
                <el-button
                  size="small"
                  type="primary"
                  @click="showDialog()"
                  icon="el-icon-plus"
                  >添加</el-button
                >
                <ht-delete-button
                  :url="removeUrl"
                  :disabled="isDisabled"
                  :htTable="$refs.htTable"
                  >删除</ht-delete-button
                >
              </el-button-group>
            </template>
            <template>
              <ht-table-column
                type="index"
                width="50"
                align="center"
                label="序号"
              />
              <ht-table-column
                prop="name"
                label="会议室名称"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-link
                    type="primary"
                    @click="showDialog(row.id)"
                    title="查看详情"
                    >{{ row.name }}</el-link
                  >
                </template>
              </ht-table-column>
              <ht-table-column
                prop="alias"
                label="别名"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="type"
                label="类型"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="capacity"
                label="容量（人）"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="floorRoomNumber"
                label="楼层房间号"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="status"
                label="状态"
                :filters="[
                  {text: '启用', value: 'enable'},
                  {text: '禁用', value: 'disable'}
                ]"
              >
                <template v-slot="{row}">
                  <el-tag type="success" v-if="row.status == 'enable'"
                    >启用</el-tag
                  >
                  <el-tag type="danger" v-else>禁用</el-tag>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="createTime"
                label="创建时间"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="updateTime"
                label="更新时间"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
            </template>
          </ht-table>
        </fieldset>
      </el-main>
    </el-container>
    <ht-sidebar-dialog
      width="32%"
      title="会议室管理"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="PortalMeetingRoomForm">
        <ht-form-item label="会议室名称">
          <ht-input
            v-model="PortalMeetingRoom.name"
            validate="required"
            :maxlength="20"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item prop="alias" label="会议室别名">
          <ht-input
            v-model="PortalMeetingRoom.alias"
            v-pinyin="PortalMeetingRoom.name"
            autocomplete="off"
            :validate="{
              required: true,
              alpha_dash: true,
              regex: {
                exp: '^[\\s\\S]{1,30}$',
                message: '内容超出输入限制'
              }
            }"
            placeholder="请输入别名"
            :disabled="PortalMeetingRoom.id ? true : false"
            :maxlength="20"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="会议室类型">
          <ht-input
            v-model="PortalMeetingRoom.type"
            validate="required"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="会议室容量">
          <ht-input
            type="number"
            v-model="PortalMeetingRoom.capacity"
            :min="0"
            :precision="0"
            :max="2147483647"
            size="small"
            style="width: 250px;"
            :validate="{
              required: true
            }"
          ></ht-input>
          <!--  <ht-input
            v-model.number="PortalMeetingRoom.capacity"
            :validate="{
              required: true,
              alpha_dash: true,
              regex: {
                exp: '^[0-9]*$',
                message: '请输入数字'
              }
            }"
            :maxlength="20"
            :showWordLimit="true"
          /> -->
        </ht-form-item>
        <ht-form-item label="会议室地址">
          <ht-input
            v-model="PortalMeetingRoom.address"
            validate="required"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="楼层房间号">
          <ht-input
            v-model="PortalMeetingRoom.floorRoomNumber"
            validate="required"
            :maxlength="20"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="包含设备">
          <el-button class="button-new-tag" size="small" @click="showEqInput"
            >+ 设备</el-button
          >
          <ul class="ul-box" v-if="equipmentTags.length > 0">
            <li
              class="li-item"
              v-for="(item, index) in equipmentTags"
              :key="index"
            >
              <ht-input
                class="input-new-tag"
                v-model="item.value"
                size="small"
                :maxlength="10"
                :showWordLimit="true"
              >
              </ht-input>
              <el-button
                class="button-new-tag"
                size="small"
                type="text"
                @click="handleEqClose(index)"
                >删除</el-button
              >
            </li>
          </ul>
        </ht-form-item>
        <ht-form-item label="会议室状态" label-width="100px">
          <ht-select
            v-model="PortalMeetingRoom.status"
            :options="[
              {key: 'enable', value: '启用'},
              {key: 'disable', value: '禁用'}
            ]"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item label="会议室描述">
          <ht-input
            type="textarea"
            :autosize="{minRows: 4, maxRows: 8}"
            v-model="PortalMeetingRoom.desc"
            :maxlength="200"
            :showWordLimit="true"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          :url="saveUrl"
          :model="PortalMeetingRoom"
          :request-method="saveMethod"
          scope-name="PortalMeetingRoomForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>
    <ht-sidebar-dialog
      width="32%"
      title="关键字段映射"
      class="sp-manager__dialog"
      :visible="mappingDialogVisible"
      v-if="mappingDialogVisible"
      :before-close="beforeCloseMappingDialog"
    >
      <el-form v-form data-vv-scope="PortalMeetingMappingForm">
        <ht-form-item
          v-if="boDefData && boDefData.length > 1"
          label="选择BO定义"
        >
          <ht-select
            filterable
            clearable
            v-model="selectBoAlias"
            :options="boDefData"
            @change="boDefDataChange"
            :props="{key: 'boDefAlias', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="会议主题">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.subject"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>
        <ht-form-item label="开始时间">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.startTime"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>
        <ht-form-item label="结束时间">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.endTime"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="申请人">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.meetingOwner"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="申请人id">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.ownerOwnerId"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="参会人员">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.participants"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>
        <ht-form-item label="参会人员id">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.participantsId"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="会议室名称">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.meetingName"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="会议室编码">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.alias"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="会议室设备">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.equipment"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>

        <ht-form-item label="会议室地址">
          <ht-select
            filterable
            clearable
            v-model="formFieldMap.address"
            :options="boFields"
            :props="{key: 'boPath', value: 'desc'}"
          ></ht-select>
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseMappingDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <el-button type="primary" @click="saveMapping">{{
          $t('eip.common.save')
        }}</el-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
import utils from '@/hotent-ui-util.js'
import form from '@/api/form.js'
const eipFlowDialog = () => import('@/components/dialog/EipFlowDialog.vue')
import req from '@/request'
export default {
  components: {
    eipFlowDialog
  },
  data() {
    return {
      isSubmit: false,
      saveUrl: form.saveUrl,
      removeUrl: form.removeUrl,
      releaseUrl: form.releaseUrl,
      dialogVisible: false,
      mappingDialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      PortalMeetingRoom: {},
      PortalMeetingConfig: {},
      flowObj: {
        flowKey: '',
        flowName: ''
      },
      saveMethod: 'POST',
      tagList: [],
      eqInputVisible: false,
      eqInputValue: '',
      equipmentTags: [],
      boDefData: [], //表单中bo定义
      selectBoAlias: '', //选中bo定义
      dicDefaultProps: {
        children: 'children',
        label: 'name'
      },
      dicData: [], //数据字典数据
      formFieldMap: {
        //流程表单字段映射关系数据
        subject: '',
        startTime: '',
        endTime: '',
        meetingOwner: '',
        ownerOwnerId: '',
        participants: '',
        participantsId: '',
        meetingName: '',
        alias: '',
        equipment: '',
        address: ''
      },
      boFields: [], //映射表单bo字段列表
      formFields: [
        {key: 'subject', name: '会议主题'},
        {key: 'startTime', name: '开始时间'},
        {key: 'endTime', name: '结束时间'},
        {key: 'meetingOwner', name: '申请人'},
        {key: 'ownerOwnerId', name: '申请人id'},
        {key: 'participants', name: '参会人员'},
        {key: 'participantsId', name: '参会人员id'},
        {key: 'meetingName', name: '会议室名称'},
        {key: 'alias', name: '会议室编码'},
        {key: 'equipment', name: '会议室设备'},
        {key: 'address', name: '会议室地址'}
      ],
      selectedList: [],
      isDisabled: true
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  computed: {
    height() {
      return this.$baseTableHeight()
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
    this.getConfig()
    this.getTagList()
  },
  methods: {
    getConfig() {
      form.getMeetingConfig().then(
        resp => {
          this.PortalMeetingConfig = resp
          this.flowObj.flowKey = resp.flowKey
          this.flowObj.flowName = resp.flowName
        },
        error => {
          reject(error)
        }
      )
    },
    clearFlow() {
      this.$set(this.flowObj, 'flowKey', '')
      this.$set(this.flowObj, 'flowName', '')
    },
    //显示流程选择器
    showFlowDialog() {
      let select = []
      if (this.PortalMeetingConfig.flowKey) {
        select.push({
          defKey: this.PortalMeetingConfig.flowKey,
          name: this.PortalMeetingConfig.flowName
        })
      }
      this.$refs.eipFlowDialog.showDialog([])
    },
    dialogOnConfirm(data) {
      if (data && data.length > 0) {
        this.$set(this.flowObj, 'flowKey', data[0].defKey)
        this.$set(this.flowObj, 'flowName', data[0].name)
      } else {
        this.$set(this.flowObj, 'flowKey', '')
        this.$set(this.flowObj, 'flowName', '')
      }
    },
    showMappingDialog() {
      this.mappingDialogVisible = true
      this.getBoDefData()
    },
    beforeCloseMappingDialog() {
      this.mappingDialogVisible = false
    },
    releaseColumn() {
      form.releaseMeetingConfig(this.PortalMeetingConfig.id).then(resp => {
        if (resp.state) {
          this.getConfig()
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        }
      })
    },
    getBoDefData(boDefId) {
      let _this = this
      form.getBOTreeByFlowKey(this.flowObj.flowKey).then(response => {
        _this.boDefData = response.children
        if (_this.boDefData && _this.boDefData.length == 1) {
          _this.selectBoAlias = _this.boDefData[0].boDefAlias
          _this.boFields = _this.boDefData[0].children
          _this.addBoPath()
        }
        if (this.PortalMeetingConfig.fieldMapping) {
          const mapping = JSON.parse(this.PortalMeetingConfig.fieldMapping)
          if (this.boDefData.length > 1) {
            //存在多个bo时根据已选择的bo回填
            Object.keys(mapping).forEach(function(key) {
              if (mapping[key]) {
                _this.boDefDataChange(mapping[key].split('.')[0])
                return
              }
            })
          }
          if (this.PortalMeetingConfig.flowKey == this.flowObj.flowKey) {
            this.formFieldMap = {...this.formFieldMap, ...mapping}
          } else {
            this.formFieldMap = {
              //流程表单字段映射关系数据
              subject: '',
              startTime: '',
              endTime: '',
              meetingOwner: '',
              ownerOwnerId: '',
              participants: '',
              participantsId: '',
              meetingName: '',
              alias: '',
              equipment: '',
              address: ''
            }
          }
        }
      })
    },
    addBoPath() {
      //添加字段路径
      if (this.boFields && this.boFields.length > 0) {
        this.boFields.forEach(item => {
          item.boPath = item.path + '.' + item.name
        })
      }
    },
    dicClick(visible) {
      if (this.dicData && this.dicData.length > 0) return
      form.getCategory('DIC', data => {
        this.dicData = data.data
      })
    },
    dicNodeClick(data) {
      this.$set(this.PortalMeetingConfig, 'dicCode', data.typeKey)
      this.$set(this.PortalMeetingConfig, 'dicName', data.name)
      this.$refs.dicSelect.blur()
    },
    clearDic() {
      this.$set(this.PortalMeetingConfig, 'dicCode', '')
      this.$set(this.PortalMeetingConfig, 'dicName', '')
    },
    boDefDataChange(select) {
      this.selectBoAlias = select
      for (let i = 0; i < this.boDefData.length; i++) {
        if (select == this.boDefData[i].boDefAlias) {
          this.boFields = this.boDefData[i].children
          this.addBoPath()
          break
        }
      }
    },
    saveMapping() {
      let _this = this
      this.PortalMeetingConfig.fieldMapping = JSON.stringify(this.formFieldMap)
      this.PortalMeetingConfig = {...this.PortalMeetingConfig, ...this.flowObj}
      form.portalMeetingSave(this.PortalMeetingConfig).then(
        resp => {
          if (resp.state) {
            _this.getConfig()
            _this.$message.success('保存成功！')
            _this.mappingDialogVisible = false
          } else {
            this.$message.error(resp.data.message)
          }
        },
        error => {
          reject(error)
        }
      )
    },
    showDialog(id) {
      this.equipmentTags = []
      if (id) {
        this.saveMethod = 'PUT'
        form.getPortalMeetingRoom(id).then(
          resp => {
            this.PortalMeetingRoom = resp
            if (this.PortalMeetingRoom.equipment) {
              this.equipmentTags = this.PortalMeetingRoom.equipment
                .split(',')
                .map(item => {
                  return {value: item}
                })
            }
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
        this.PortalMeetingRoom = {name: '', alias: '', status: 'enable'}
      }
    },
    beforeCloseDialog() {
      this.PortalMeetingRoom = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      form
        .portalMeetingRoomQuery(param)
        .then(
          resp => {
            let response = resp
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
    beforeSaveData() {
      if (this.equipmentTags) {
        this.PortalMeetingRoom.equipment = this.equipmentTags
          .map(item => item.value)
          .toString()
      } else {
        this.PortalMeetingRoom.equipment = ''
      }
    },
    beforeSaveDataConfigForm() {
      if (this.PortalMeetingConfig.bindFlow) {
        if (!this.flowObj.flowKey) {
          this.$message.error('请选择绑定流程！')
          return
        }
      }
      this.$validator.validateAll('PortalMeetingConfigForm').then(result => {
        if (result) {
          form.getMeetingConfig().then(
            resp => {
              const publishSchedule =this.PortalMeetingConfig.publishSchedule
              this.PortalMeetingConfig = resp
              this.PortalMeetingConfig.publishSchedule=publishSchedule
              this.flowObj.flowKey = resp.flowKey
              this.flowObj.flowName = resp.flowName
              req
                .post(this.releaseUrl, this.PortalMeetingConfig)
                .then(response => {
                  this.getConfig()
                  this.$message.success('保存成功！')
                })
            },
            error => {
              reject(error)
            }
          )
        } else {
          let arr = this.$validator.errors.items.filter(
            item => item.scope == 'PortalMeetingConfigForm'
          )
          let errorLength = arr.length
          this.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    getTagList() {
      form.getPortalNewsTag().then(
        resp => {
          this.tagList = resp
        },
        error => {
          reject(error)
        }
      )
    },
    handleEqClose(index) {
      this.equipmentTags.splice(index, 1)
    },

    showEqInput() {
      // this.eqInputVisible = true
      // this.$nextTick(_ => {
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
      this.equipmentTags.push({value: ''})
    },

    handleEqInputConfirm() {
      let inputValue = this.PortalMeetingRoom.equipment
      if (inputValue) {
        this.equipmentTags.push(inputValue)
      }
      this.eqInputVisible = false
      this.PortalMeetingRoom.equipment = ''
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 190px);
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.ul-box {
  margin-top: 10px;
  li {
    width: 194px;
    display: flex;
    justify-content: space-between;
    background: #f5f7fa;
    margin-bottom: 8px;
    padding: 6px 14px;
  }
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 150px;
  // margin-left: 10px;
  vertical-align: bottom;
}
.el-container {
  height: 100%;
}

/deep/ .fieldset {
  border: 2px solid #ebeef5 !important;
}

.fieldset >>> .el-form {
  /*  margin: 20px; */
}
.main-body {
  ::v-deep {
    .el-table {
      .el-table__body-wrapper {
        max-height: 178px !important;
      }
    }
  }
  .ht-table-panel {
    overflow: auto;
  }
}

.fieldset >>> .ht-table-panel {
  margin: 10px;
}

.customQuery-inputs >>> .inputs,
.customQuery-inputs >>> .inputs .el-select {
  width: 100%;
}
.mainTable {
  height: 99% !important;
  ::v-deep .el-table {
    // min-height: 50px !important;

    height: calc(100% - 142px) !important;
    overflow-y: auto;

    .el-table__body-wrapper {
      height: calc(100% - 42px);
    }
  }

  height: calc(100% - 190px);
  width: calc(100vw - 390px);
}
</style>