表格导出修改

README-zh.md

@@ -37,4 +37,12 @@ npm run lint
 
 # 代码格式检查并自动修复
 npm run lint -- --fix
-```
+```
+
+## 注意
+```bash
+# 表格导出使用的xlsx-style插件需要修改dist/cpexcel.js第807行
+var cpt = require('./cpt' + 'able')
+改成
+var cpt = cptable
+```

package.json

@@ -35,6 +35,7 @@
     "vue2-org-tree": "^1.3.5",
     "vuex": "3.1.0",
     "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13",
     "xss": "^1.0.13"
   },
   "devDependencies": {

src/components/Table/index.vue

@@ -59,7 +59,7 @@
                   <div class="hd-tr">
                     <template v-if="isStatus">
                       <el-button type="text" @click="handleLook(scope.row)" size="small" class="rmScs">查看</el-button>
-                      <template v-if="scope.row.serviceTypeCode == 1 || scope.row.serviceTypeCode == 3">
+                      <template v-if="scope.row.serviceTypeCode == 2 || scope.row.serviceTypeCode == 4">
                         <el-button type="text" v-if="scope.row.runState == '停止'" @click="stateChangeHandler(scope.row)" size="small" class="rmScs">启动</el-button>
                         <el-button type="text" v-if="scope.row.runState == '运行'" @click="stateChangeHandler(scope.row)" size="small" class="rmScs">停止</el-button>
                       </template>

src/main.js

@@ -11,8 +11,6 @@ import Vue2OrgTree from 'vue2-org-tree'
 import 'vue2-org-tree/dist/style.css'
 import elTableInfiniteScroll from 'el-table-infinite-scroll'
 import xss from 'xss'
-import FileSaver from 'file-saver'
-import * as XLSX from 'xlsx'
 
 import App from './App'
 import store from './store'
@@ -28,8 +26,6 @@ Vue.prototype.$echarts = echarts
 Vue.use(Vue2OrgTree)
 Vue.use(elTableInfiniteScroll)
 Vue.use(xss)
-Vue.prototype.$FileSaver = FileSaver
-Vue.prototype.$XLSX = XLSX
 
 Vue.config.productionTip = false
 

src/styles/index.scss

@@ -331,22 +331,24 @@ li {
 
 .manageTitle {
   position: relative;
-  font-size: 20px;
-  font-family: Microsoft YaHei;
-  font-weight: bold;
-  color: #303133;
   padding-left: 12px;
   margin-right: 48px;
   margin-top: 0;
   margin-bottom: 0;
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #303133;
+  line-height: 30px;
   &::after {
     position: absolute;
     content: '';
     width: 4px;
     height: 20px;
+    top: 0;
+    bottom: 0;
     left: 0;
-    top: 50%;
-    margin-top: -10px;
+    margin: auto;
     background: #2d67e3;
   }
 }

src/utils/table.js

@@ -8,6 +8,9 @@
  */
 
 import _ from 'lodash'
+import * as XLSX from 'xlsx'
+import XLSX_STYLE from 'xlsx-style'
+import FileSaver from 'file-saver'
 
 /**
  * @description: 表格行合并
@@ -128,7 +131,7 @@ export function setTableFilters(tableData, filters) {
   })
   tableData.forEach(item => {
     Object.keys(tempSets).forEach(key => {
-      (item[key] ?? '') !== '' && tempSets[key].add(item[key])
+      ;(item[key] ?? '') !== '' && tempSets[key].add(item[key])
     })
   })
   Object.keys(tempSets).forEach(key => {
@@ -141,3 +144,83 @@ export function setTableFilters(tableData, filters) {
     )
   })
 }
+
+function devideGroup(cellName) {
+  const stringArray = cellName.split('')
+  const length = stringArray.length
+  let index = 0
+  for (let i = 0; i < length; i++) {
+    if (isNaN(parseInt(stringArray[i]))) {
+      index += stringArray[i].charCodeAt(0) - 'A'.charCodeAt(0) + i * 26
+    } else {
+      return {
+        columnIndex: index,
+        rowIndex: Number(stringArray.slice(i).join('')) - 1
+      }
+    }
+  }
+}
+
+export function exportToExcel(table, tableName, fileName, headerRowNumber = 1) {
+  try {
+    // 设置了列的fixed属性后会有两个table元素，导出数据会重复，需要去掉一个table
+    const fixedTable = table.querySelector('.el-table__fixed')
+    fixedTable && table.removeChild(fixedTable)
+    // 自定义的表头里包含筛选，直接导出会把筛选的下拉数据也写到表头单元格离，需要先去掉筛选弹出框
+    const tableHeaderCellPopovers = table.querySelectorAll('.table-header-cell-popover')
+    tableHeaderCellPopovers.forEach(node => {
+      node.removeChild(node.querySelector('.el-popover'))
+    })
+    // 生成要导出的xlsx数据，raw: true表示不使用excel的格式解析，输出为纯文本，sheet设置xlsx这一页的标题
+    const tableBook = XLSX.utils.table_to_book(table, { raw: true, sheet: tableName })
+    // console.log(tableBook)
+    // return
+    // 计算每一列的单元格的最大宽度（包含表头），单元格的key为'A12'、'AA2'等，和excel里一致
+    const xlsxDatas = tableBook.Sheets[tableName]
+    const columnWidths = []
+    for (let cellName in xlsxDatas) {
+      if (!['!rows', '!cols', '!fullref', '!ref', '!merges'].includes(cellName)) {
+        const { columnIndex, rowIndex } = devideGroup(cellName)
+        const cellTextLength = xlsxDatas[cellName].v.split('').reduce((pre, curr) => {
+          const currentSize = curr.charCodeAt(0) > 255 ? 2 : 1
+          return pre + currentSize
+        }, 0)
+        if ((!columnWidths[columnIndex] && cellTextLength > 0) || cellTextLength > columnWidths[columnIndex]) {
+          columnWidths[columnIndex] = cellTextLength
+        }
+        let cellStyle = {
+          alignment: {
+            vertical: 'center'
+          }
+        }
+        // if (rowIndex < headerRowNumber) {
+        //   cellStyle = {
+        //     ...cellStyle,
+        //     fill: {
+        //       bgColor: {
+        //         rgb: '3366FF'
+        //       }
+        //     }
+        //   }
+        // }
+        xlsxDatas[cellName].s = cellStyle
+      }
+    }
+    xlsxDatas['!cols'] = columnWidths.map(width => ({
+      wch: width + 2
+    }))
+    // console.log(tableBook)
+    // return
+    const tableWrite = XLSX_STYLE.write(tableBook, {
+      bookType: 'xlsx',
+      bookSST: true,
+      type: 'buffer',
+      cellStyles: true
+    })
+    FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
+  } catch (error) {
+    console.log(error.message || error)
+  }
+}
+
+export const throttledExportToExcel = _.throttle(exportToExcel, 1000)

src/views/advancedQuery/views/advancedHome.vue

@@ -721,29 +721,7 @@ export default {
   watch: {
     '$route.query': {
       handler(query) {
-        let queryFlag = false
-        const { startDate, endDate, singleJump } = query
-        const queryEntries = Object.entries(query)
-        if (queryEntries.length) {
-          this.clearForm()
-        }
-        queryEntries.forEach(([key, value]) => {
-          if (!['startDate', 'endDate', 'singleJump'].includes(key) && (value ?? '') !== '') {
-            queryFlag = true
-            this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled', 'noBSM'].includes(key)
-              ? Number(value)
-              : value
-          }
-        })
-        if (startDate) {
-          this.$set(this.flightDate, 0, startDate)
-        }
-        if (endDate) {
-          this.$set(this.flightDate, 1, endDate)
-        }
-        if (queryFlag) {
-          this.onCheckGj(singleJump)
-        }
+        this.queryChangeHandler(query)
       },
       deep: true
     },
@@ -802,6 +780,7 @@ export default {
   },
   mounted() {
     this.baggageTypeQuery()
+    this.queryChangeHandler(this.$route.query)
     const that = this
     this.dom = this.$refs.table.bodyWrapper
     this.dom.addEventListener('scroll', () => {
@@ -856,6 +835,31 @@ export default {
     dialogFocus() {
       this.$refs['dialog'].focus()
     },
+    queryChangeHandler(query) {
+      let queryFlag = false
+      const { startDate, endDate, singleJump } = query
+      const queryEntries = Object.entries(query)
+      if (queryEntries.length) {
+        this.clearForm()
+      }
+      queryEntries.forEach(([key, value]) => {
+        if (!['startDate', 'endDate', 'singleJump'].includes(key) && (value ?? '') !== '') {
+          queryFlag = true
+          this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled', 'noBSM'].includes(key)
+            ? Number(value)
+            : value
+        }
+      })
+      if (startDate) {
+        this.$set(this.flightDate, 0, startDate)
+      }
+      if (endDate) {
+        this.$set(this.flightDate, 1, endDate)
+      }
+      if (queryFlag) {
+        this.onCheckGj(singleJump)
+      }
+    },
     // startDateChangeHandler(val) {
     //   this.flightDate[0] = val ?? ''
     //   if (!val || !this.flightDate[1]) {

src/views/baggageManagement/components/baggage/index.vue

@@ -109,10 +109,13 @@
         <img
           class="btn-square btn-shadow"
           src="../../../../assets/baggage/ic_export.png"
+          title="导出"
+          @click="exportHandler('table', '行李节点列表')"
         >
         <img
           class="btn-square btn-shadow"
           src="../../../../assets/baggage/ic_setting.png"
+          title="列设置"
           @click="show"
         >
       </div>
@@ -135,7 +138,7 @@
       <el-table
         ref="table"
         :data="baggageTableData"
-        :height="`calc(100vh - 80px - ${basicInfoHeight}px - 128px - 3 * 8px - 44px)`"
+        height="100%"
         size="mini"
         border
         fit
@@ -268,6 +271,7 @@ import Dialog from '@/layout/components/Dialog/index.vue'
 import { queryMap, myQuery } from '@/api/dataIntegration'
 import { BaggageMessageQuery } from '@/api/flight'
 import tableColsMixin from '../../mixins/tableCols'
+import { throttledExportToExcel } from '@/utils/table'
 
 export default {
   name: 'BaggageView',
@@ -674,6 +678,11 @@ export default {
     cellMouseLeaveHandler() {
       // this.hoveredRow = null
     },
+    exportHandler(refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${this.queryData.bagSN}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
+    },
     async checkBaggageMessage(resourceFile) {
       if (!this.messageTooltipList.some(message => message.resourceFile === resourceFile)) {
         const result = await this.queryMessage([resourceFile])

src/views/baggageManagement/components/departure/index.vue

@@ -8,8 +8,17 @@
 <template>
   <div class="departure-one">
     <!--功能区-表单-->
-    <div ref="formWrap" class="terminal-form-wrap">
-      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        class="form"
+      >
         <div class="form-left">
           <el-form-item prop="currentAirport">
             <!-- <el-cascader
@@ -24,8 +33,21 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px;" filterable placeholder="请选择机场" @change="airPortChange">
-              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              style="width: 150px;"
+              filterable
+              placeholder="请选择机场"
+              @change="airPortChange"
+            >
+              <el-option
+                v-for="(item, index) in AirportList"
+                :key="index"
+                :label="item.planDepartureApt"
+                :value="item.planDepartureApt"
+              />
             </el-select>
           </el-form-item>
           <!-- <el-form-item prop="startDate">
@@ -52,65 +74,178 @@
               @change="endDateChangeHandler"
             />
           </el-form-item> -->
-          <el-form-item prop="flightDate" label="航班日期">
-            <el-date-picker v-model="formData.flightDate" size="small" style="width: 300px;" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          <el-form-item
+            prop="flightDate"
+            label="航班日期"
+          >
+            <el-date-picker
+              v-model="formData.flightDate"
+              size="small"
+              style="width: 300px;"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="dateRangePickerOptions"
+              @change="dateChangeHandler"
+            />
           </el-form-item>
           <el-form-item>
             <div class="box-item">
               <p>预计装载总数：</p>
-              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+              <li
+                v-for="(item, index) in orderNum"
+                :key="index"
+                :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+              >
                 <span v-if="!isNaN(item)">
                   <i ref="numberItem">0123456789</i>
                 </span>
-                <span v-else class="comma">{{ item }}</span>
+                <span
+                  v-else
+                  class="comma"
+                >{{ item }}</span>
               </li>
             </div>
           </el-form-item>
         </div>
-        <div class="form-right" @keyup.enter="onSubmit(0)">
+        <div
+          class="form-right"
+          @keyup.enter="onSubmit(0)"
+        >
           <el-form-item prop="search">
-            <el-popover :value="popoverVisible" placement="bottom" trigger="manual">
+            <el-popover
+              :value="popoverVisible"
+              placement="bottom"
+              trigger="manual"
+            >
               <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
-              <el-input slot="reference" v-model="formData.search" class="input-shadow" style="width: 240px; margin-left: 105px" size="small" placeholder="请输入内容" prefix-icon="el-icon-search" clearable @focus="popoverVisible = true" @blur="popoverVisible = false" />
+              <el-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
             </el-popover>
           </el-form-item>
           <el-form-item>
-            <el-button class="btn-shadow" size="mini" type="primary" @click="onSubmit(0)">搜索</el-button>
+            <el-button
+              class="btn-shadow"
+              size="mini"
+              type="primary"
+              @click="onSubmit(0)"
+            >搜索</el-button>
           </el-form-item>
           <el-form-item v-is="['dm_dt_timeIcon']">
             <TimeZoneSelector />
           </el-form-item>
           <el-form-item v-is="['dm_dt_columnSettings']">
-            <img class="btn-img btn-shadow" src="../../../../assets/baggage/ic_setting.png" @click="show">
+            <img
+              class="btn-img btn-shadow"
+              src="../../../../assets/baggage/ic_setting.png"
+              title="列设置"
+              @click="show"
+            >
+          </el-form-item>
+          <el-form-item v-is="['dm_dt_columnSettings']">
+            <img
+              class="btn-img btn-shadow"
+              src="../../../../assets/baggage/ic_export.png"
+              title="导出"
+              @click="exportHandler('table', '航站离港列表')"
+            >
           </el-form-item>
         </div>
       </el-form>
     </div>
     <!--表格-->
-    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
-      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
-        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
+    <div
+      v-loading="loading"
+      class="terminal-table"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <el-table
+        ref="table"
+        class="table"
+        :height="computedTableHeight"
+        :data="dealedTableData"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="tableRowClassName"
+        :cell-class-name="cellClass"
+        show-summary
+        :summary-method="summaryMethod"
+        border
+        stripe
+        fit
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="col in tableColsCopy"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
+          :formatter="tableFormat"
+        >
           <template #header>
-            <el-tooltip :content="col.desc || childCol.label" placement="top">
-              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
+            <el-tooltip
+              :content="col.desc || childCol.label"
+              placement="top"
+            >
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="tableDataFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <!--列设置-->
-    <Dialog :flag="dialogFlag" class="dialog-check-cols">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-cols"
+    >
       <div class="col-dialog">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+          <el-tree
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
               label: 'label',
               children: 'children'
-            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
-          <el-button size="medium" @click="hide">取消</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck"
+          >确定</el-button>
+          <el-button
+            size="medium"
+            @click="hide"
+          >取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -126,13 +261,13 @@ import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
 import { getQuery } from '@/api/flight'
 import TableHeaderCell from '@/components/TableHeaderCell'
-import { setTableFilters } from '@/utils/table'
+import { setTableFilters, throttledExportToExcel } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
   components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
-  data () {
+  data() {
     return {
       orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       popoverVisible: false,
@@ -281,11 +416,11 @@ export default {
     }
   },
   computed: {
-    singleDay () {
+    singleDay() {
       return this.startDate === this.endDate
     }
   },
-  mounted () {
+  mounted() {
     this.getAirPortData()
     this.table = this.$refs.table.bodyWrapper
     const that = this
@@ -293,7 +428,7 @@ export default {
       that.scrollTop = this.table.scrollTop
     })
   },
-  activated () {
+  activated() {
     this.table.scrollTop = this.scrollTop
     this.getTableData()
     const that = this
@@ -301,20 +436,20 @@ export default {
       that.getTableData()
     }, 3000)
   },
-  deactivated () {
+  deactivated() {
     if (this.loopEvent) {
       clearInterval(this.loopEvent)
       this.loopEvent = null
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (this.loopEvent) {
       clearInterval(this.loopEvent)
       this.loopEvent = null
     }
   },
   methods: {
-    resetLoopEvent () {
+    resetLoopEvent() {
       this.loading = true
       this.hasSetTableScroll = false
       if (this.loopEvent) {
@@ -326,13 +461,13 @@ export default {
         that.getTableData()
       }, 3000)
     },
-    airPortChange () {
+    airPortChange() {
       this.resetLoopEvent()
     },
-    dateChangeHandler () {
+    dateChangeHandler() {
       this.resetLoopEvent()
     },
-    async getAirPortData () {
+    async getAirPortData() {
       try {
         const res = await getQuery({
           id: DATACONTENT_ID.departureAirMainId,
@@ -349,7 +484,7 @@ export default {
         console.log('出错了', error.message || error)
       }
     },
-    tableRowClassName ({ row, rowIndex }) {
+    tableRowClassName({ row, rowIndex }) {
       const classes = []
       if (row.flightStatus === 'DLY') {
         classes.push('bgl-delayed')
@@ -365,7 +500,7 @@ export default {
       }
       return classes.join(' ')
     },
-    headerCellClass ({ row, column }) {
+    headerCellClass({ row, column }) {
       const classes = []
       if (['warning', 'exceptions', 'midIn'].includes(column.property)) {
         classes.push('bgl-huang')
@@ -387,7 +522,7 @@ export default {
     //   this.flightAttrQuery(params)
     // },
     // 获取表格数据
-    async getTableData () {
+    async getTableData() {
       if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
         return
       }
@@ -412,7 +547,7 @@ export default {
         console.log('出错了', error.message || error)
       }
     },
-    initTableData (tableData) {
+    initTableData(tableData) {
       this.leaveCount = 0
       this.baggageCount = 0
       tableData.forEach(item => {
@@ -434,7 +569,7 @@ export default {
         this.setTableScroll()
       })
     },
-    setTableScroll () {
+    setTableScroll() {
       if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
         return
       }
@@ -454,7 +589,7 @@ export default {
       }, 0)
       this.hasSetTableScroll = true
     },
-    setNumberTransform () {
+    setNumberTransform() {
       const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
       const numberArr = this.orderNum.filter(item => !isNaN(item))
       // 结合CSS 对数字字符进行滚动,显示订单数量
@@ -464,7 +599,7 @@ export default {
       }
     },
 
-    toOrderNum (num) {
+    toOrderNum(num) {
       num = num.toString()
       if (num.length < 6) {
         num = '0' + num // 如未满八位数，添加"0"补位
@@ -476,7 +611,15 @@ export default {
         this.$message.warning('总量数字过大')
       }
       this.setNumberTransform()
-    }
+    },
+    exportHandler(refName, tableName) {
+      if (this.loading) {
+        return
+      }
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
+    },
   }
 }
 </script>
@@ -492,7 +635,7 @@ export default {
       flex: 1;
     }
     .form-right {
-      flex: 0 1 498px;
+      flex: 0 1 auto;
     }
     .el-form-item {
       margin-bottom: 0px;
@@ -502,7 +645,7 @@ export default {
       optgroup,
       select,
       textarea {
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         font-size: 14px;
       }
       .el-switch__label {
@@ -608,7 +751,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, "Microsoft YaHei";
+      font-family: Helvetica, 'Microsoft YaHei';
       letter-spacing: 0;
     }
     .cell-click {
@@ -641,7 +784,7 @@ export default {
         &.redBorder {
           position: relative;
           &::after {
-            content: "";
+            content: '';
             position: absolute;
             left: 0;
             bottom: 0;
@@ -661,7 +804,7 @@ export default {
         background: lightcoral !important;
         position: relative;
         &::after {
-          content: "";
+          content: '';
           display: block;
           width: 100%;
           height: 100%;