初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/out_operation/index.vue

@@ -1,73 +1,69 @@
<template>
  <div class="addOperation">
    <div class="addOperation-main">
      <!-- <el-form v-model="statusType" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="入库状态">
           <el-radio-group v-model="inStatus">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="已入库"></el-radio-button>
            <el-radio-button label="已出库"></el-radio-button>
          </el-radio-group>
            </el-form-item>
            <el-form-item label="入库类型" prop="phonenumber">
             <el-radio-group v-model="inType">
            <el-radio-button label="条码打印"></el-radio-button>
          </el-radio-group>
          </el-form-item>
          <el-form-item label="条码打印">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">新增条码打印</el-button>
          </el-form-item>
      </el-form> -->
  <div class="outOperation">
    <div class="outOperation-main">
     <el-row type="flex" align="middle" class="main-top">
      <el-col :span="2"><el-button type="primary">扫描出库</el-button></el-col>
        <el-col :span="2"><el-button type="primary" icon="iconfont icon-saoyisao" @click="scan">新增出库</el-button></el-col>
      <el-col :span="20">
        <TableSearch></TableSearch>
          <TableSearch :show="true" :excel-name="'库存表'" :file="outFile" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" />
      </el-col>
      <el-col :span="2"><el-button>押运单打印</el-button></el-col>
        <!-- <el-col :span="2"><el-button type="primary" @click="printOrder ">打印押运单</el-button></el-col> -->
        <el-col :span="2"><el-button type="primary" :disabled="outTable.length==0" @click="printOrder ">打印押运单</el-button></el-col>
     </el-row>
    <el-table
        class="tableData"
        :row-class-name="onTableRowClassName"
        :row-style="{height:0+'px'}"
        :cell-style="{padding:8+'px',textAlign: 'center'}"
        :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
      :stripe="true"
      :data="tableData"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      :border="true"
      header-row-class-name="table-header"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="date"
        label="序号">
          label="多选"
          type="selection"
          width="55"
        >
        <!-- <el-checkbox></el-checkbox> -->
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品编码">
          prop="productCode"
          label="产品编码"
        />
        <el-table-column
          prop="productName"
          label="产品名称"
        />
        <el-table-column
          prop="productModel"
          label="规格型号"
        >
          <template slot="header" slot-scope="scope">
            <span>规格型号</span>
            <span :class="isMerge?'el-icon-sort-up':'el-icon-sort-down'" :style="{marginLeft:'5px'}" @click="merge" />
          </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="产品名称">
      </el-table-column>
          prop="unit"
          label="单位"
        />
      <el-table-column
        prop="date"
        label="规格型号">
      </el-table-column>
          prop="incomingQuantity"
          label="入库数量"
        />
      <el-table-column
        prop="date"
        label="单位">
      </el-table-column>
          prop="addPerson"
          label="入库人"
        />
      <el-table-column
        prop="date"
        label="入库数量">
      </el-table-column>
      <el-table-column
        prop="date"
        label="入库人">
      </el-table-column>
      <el-table-column
        prop="date"
        label="入库日期">
      </el-table-column>
          v-if="!isMerge"
          prop="createTime"
          label="出库日期"
        />
    </el-table>
    </div>
    <div class="addOperation-foot">
      <div class="outOperation-foot">
      <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[10, 15, 20, 25]"
@@ -76,15 +72,214 @@
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      >
    </el-pagination>
        />
    </div>
    </div>

    <el-dialog title="扫描出库" :visible.sync="outFormVisible">
      <el-form :model="outParams" label-position="left">
        <el-table
          :height="250"
          :max-height="250"
          :row-class-name="onTableRowClassName"
          :row-style="{height:0+'px'}"
          :cell-style="{padding:8+'px',textAlign: 'center'}"
          :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
          :stripe="true"
          :border="true"
          header-row-class-name="table-header"
          :data="this.outTable.slice(0,outPageParams.length)"
        >
          <el-table-column property="addPerson" label="序号" />
          <el-table-column property="productCode" label="产品编码" />
          <el-table-column property="productNameId" label="产品名称" />
          <el-table-column property="productModelId" label="规格型号" />
          <el-table-column property="unit" label="单位" />
          <el-table-column property="incomingQuantity" label="入库数量" />
          <el-table-column property="addPerson" label="入库人" />
          <!-- <el-table-column property="address" label="入库日期"></el-table-column> -->
        </el-table>
        <div :style="{display: 'flex',justifyContent:'center',marginTop: '10px'}">
          <el-pagination
            :current-page="outPageParams.pageNo"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="outPageParams.pageSize"
            layout="->, total, sizes, prev, pager, next, jumper"
            :total="outTable.length"
            @size-change="outHandleSizeChange"
            @current-change="outHandleCurrentChange"
          />
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderFormVisible = true">生成押运单</el-button>
        <el-button @click="outFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="押运单打印" :visible.sync="orderFormVisible" @close="orderFormClose">
      <div id="order">
        <el-form label-position="right" :model="orderParams">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="订单号:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.orderNumber" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押运单编号:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.escortNoteNumber" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户订单号:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.customerOrderNumber" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发货日期:" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="orderParams.createTime"
                  format="yyyy-MM-dd HH:mm"
                  type="datetime"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户名称:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.customerName" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发货人:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.consignor" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="到货地址:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.arrivalAddress" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="收货联系人:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.receivingContact" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="手机号:" :label-width="formLabelWidth">
                <el-input v-model="orderParams.cellPhoneNumber" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>

              <el-form-item>
                <el-table
                  :row-class-name="onTableRowClassName"
                  :row-style="{height:0+'px'}"
                  :cell-style="{padding:8+'px',textAlign: 'center'}"
                  :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
                  :stripe="true"
                  :border="true"
                  :data="outTable"
                >
                  <el-table-column property="productName" label="产品名称" />
                  <el-table-column property="productModel" label="规格型号" />
                  <el-table-column property="unit" label="单位" />
                  <el-table-column property="incomingQuantity" label="发库数量" />
                </el-table>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goToPrint">打 印</el-button>
        <el-button @click="orderFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="押运单打印" :visible.sync="templateOrderVisible" @close="templateOrderClose">
      <div id="templateOrder" class="templateOrder">
        <h3>押运单</h3>
        <div class="templateOrder-main">
          <div class="main-row">
            <div class="flex-2">订单号：</div>
            <div class="flex-8">{{ orderParams.orderNumber }}</div>
            <div class="flex-2">押运单编号：</div>
            <div class="flex-8">{{ orderParams.escortNoteNumber }}</div>
          </div>
          <div class="main-row">
            <div class="flex-2">客户订单号：</div>
            <div class="flex-8">{{ orderParams.customerOrderNumber }}</div>
            <div class="flex-2">发货日期：</div>
            <div class="flex-8">{{ orderParams.createTime }}</div>
          </div>
          <div class="main-row">
            <div class="flex-2">客户名称：</div>
            <div class="flex-8">{{ orderParams.customerName }}</div>
            <div class="flex-2">发货人：</div>
            <div class="flex-8">{{ orderParams.consignor }}</div>
          </div>
          <div class="main-row">
            <div class="flex-2">到货地址：</div>
            <div class="flex-18">{{ orderParams.arrivalAddress }}</div>
          </div>
          <div class="main-row">
            <div class="flex-2">收货联系人：</div>
            <div class="flex-18">{{ orderParams.receivingContact }}</div>
          </div>
          <div class="main-row">
            <div class="flex-2">手机号：</div>
            <div class="flex-18">{{ orderParams.cellPhoneNumber }}</div>
          </div>
          <div class="main-row">
            <!-- <div class="flex-2">手机号</div> -->
            <div class="flex-18" :style="{'textAlign': 'center'}">
              <h4>产品列表</h4>
            </div>
          </div>
          <div class="main-row">
            <div class="flex-4">产品名称</div>
            <div class="flex-4">规格型号</div>
            <div class="flex-4">单位</div>
            <div class="flex-4">发货数量</div>
          </div>
          <div v-for="item in outTable" :key="item.id" class="main-row">
            <div class="flex-4">{{ item.productName }}</div>
            <div class="flex-4">{{ item.productModel }}</div>
            <div class="flex-4">{{ item.unit }}</div>
            <div class="flex-4">{{ item.incomingQuantity }}</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-print="printObj" type="primary">按模板打印</el-button>
        <el-button @click="templateOrderVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getList } from '@/api/table'
import { getList, selectCacheOfIn, outOperation, outFile } from '@/api/addOperation'
import { selectAllName } from '@/api/productName'
import { selectAllModel } from '@/api/productModel'
import TableSearch from '@/components/TableSearch'
import { mapGetters } from 'vuex'
export default {
  filters: {
    statusFilter(status) {
@@ -96,88 +291,302 @@
      return statusMap[status]
    }
  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      inType: '',
      inStatus: '',
      deptName: '',
      statusType: {},
      queryParams: {
        encode: '',
        type: '',
        depositor: ''
      },
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    TableSearch
  },
  data() {
    return {
      templateOrderVisible: false,
      outFile,
      printObj: {
        id: 'templateOrder', // 打印的区域
        // preview: true, // 预览工具是否启用
        previewTitle: '打印押运单', // 预览页面的标题
        previewBeforeOpenCallback(vue) {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback(vue) {
          console.log('已经加载完预览窗口')
        },
        clickMounted: (vue) => {
          console.log('触发点击打印回调')
          vue.isShowPrint = true // 弹框显示条码
        },
        beforeOpenCallback(vue) {
          console.log('打开之前', vue.barcodeNum)
        },
        openCallback(vue) {
          //  let time =vue.orderParams.createTime
          // vue.orderParams.createTime =  `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
          // vue.orderParams.listId = vue.outCodeTable
          // vue.orderParams.outPerson = vue.name
          // outOperation(vue.orderParams).then((res) => {
          //   vue.$message.success("成功出库")
          //   vue.isShowPrint = false  // 关闭条码显示弹框
          // })
          console.log('执行了打印', vue.barcodeNum)
        },
        clickMounted(vue) {
          console.log(1111)
          console.log(vue.orderParams.createTime)
          outOperation({ ...vue.orderParams, outPerson: vue.name, listCode: vue.outCodeTable }).then((res) => {
            vue.orderFormVisible = false
            vue.outCodeTable = []
            vue.outTable = []
            vue.tableData = []
            vue.fetchData()
            console.log('清空数据，同时刷新数据')
            vue.$message.success('成功出库')
            vue.fetchData()
            vue.isShowPrint = false // 关闭条码显示弹框
          }, () => {
            vue.$message.err('请重新打印')
          }).finally(() => {
            vue.templateOrderVisible = false
            vue.orderParams = {}
          })

          console.log('执行了打印', vue.barcodeNum)
        }
      },
      outPageParams: {
        pageNo: 1,
        pageSize: 3
      },
      isMerge: false,
      outTable: [],
      outCodeTable: [],
      outParams: {},
      outFormVisible: false,
      getList,
      total: 0,
      options: [],
      searchModel: {
        pageNo: 1,
        pageSize: 10,
        productModel: '',
        endTime: '',
        startTime: ''
      },
      formLabelWidth: '120px',
      orderFormVisible: false,
      orderParams: {
        orderNumber: '',
        escortNoteNumber: '',
        customerOrderNumber: '',
        createTime: '',
        customerName: '',
        consignor: '',
        arrivalAddress: '',
        receivingContact: '',
        cellPhoneNumber: ''
      },
      total: 0,
      tableData: [],
      contentTable: [],
      isScan: false
    }
  },
  watch: {
    isScan(to) {

    }
  },
  created() {
    
    this.fetchData()
    this.setOptions()
  },
  beforeDestroy() {
    window.document.onkeypress = null
  },
  methods: {
    templateOrderClose() {
      this.orderFormClose()
    },
    orderFormClose() {
      // 关闭打印押运单输入弹窗清空数据
      for (const key in this.orderParams) {
        this.orderParams[key] = ''
      }
      // this.outTable = []
    },
    goToPrint() {
      let ok = false
      for (const key in this.orderParams) {
        if (!this.orderParams[key]) {
          ok = true
        }
      }
      if (ok) {
        return this.$message.error('请填写完整参数')
      }

      console.log('需要打印的参数', this.orderParams)
      const time = this.orderParams.createTime
      this.orderParams.createTime = `${time.getFullYear()}-${time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1}-${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()} ${time.getHours() < 10 ? '0' + time.getHours() : time.getHours()}:${time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()}`
      console.log('需要打印的东西==>', this.outTable)
      // this.orderFormVisible = false
      this.templateOrderVisible = true
    },
    merge() {
      this.isMerge = !this.isMerge
      if (this.isMerge) {
        this.contentTable = JSON.parse(JSON.stringify(this.tableData))
      } else {
        this.tableData = JSON.parse(JSON.stringify(this.contentTable))
        return
      }

      this.tableData = this.tableData.reduce((arr, next) => {
        for (const item of arr) {
          if (item.productModel === next.productModel) {
            item.children.push(next.id)
            item.incomingQuantity = item.incomingQuantity + next.incomingQuantity
            return arr
          }
        }
        next.children = [next.id]
        arr.push(next)
        return arr
        // arr.push(next)
      }, [])
      console.log(this.tableData)
    },
    printOrder() {
      console.log(this.outCodeTable, this.outTable)
      this.orderFormVisible = true
    },
    addScanMonitor() {
      window.document.onkeypress = e => {
        console.log(e)
        if (window.event) { // IE
          this.nextCode = e.keyCode
        } else if (e.which) { // Netscape/Firefox/Opera
          this.nextCode = e.which
        }

        if (e.which === 13) { // 键盘回车事件
          // if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
          console.log(new Date().getTime())
          if (new Date().getTime() - this.lastTime > 30) {
            return this.$message.error('扫码时不可通过键盘输入')
          }
          // if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
          console.log('扫码结束,条形码：', this.code)
          for (const item of this.tableData) {
            if (item.id == this.code) {
              this.$message.error('请勿重复扫描')
              this.handleSubmitScanning()
              return
            }
          }
          // 发送请求
          selectCacheOfIn({ code: this.code }).then(res => {
            this.$message.success(`${this.code}扫描成功`)
            const { data } = res
            if (data) this.tableData.push(data)
          })
          this.scanningForm.scanCode = this.code
          this.lastCode = ''
          this.lastTime = ''
          this.handleSubmitScanning()
          return
        }

        this.nextTime = new Date().getTime()
        if (!this.lastTime && !this.lastCode) {
          this.code = '' // 清空上次的条形码
          // 继续扫描一下条前关闭弹窗
          // this.handleCloseTipsVisible()
          this.code = this.code + '' + e.key
          console.log('扫码开始---', this.code)
        }
        if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
          this.code = e.key
          console.log('防止首字缺失。。。', this.code)
        } else if (this.lastCode && this.lastTime) {
          this.code = this.code + '' + e.key
          console.log('扫码中。。。', this.code)
        }
        this.lastCode = this.nextCode
        this.lastTime = this.nextTime
      }
    },
    handleSelectionChange(val) {
      if (this.isMerge) {
        console.log(val)
        const arrChildren = val.map((item) => item.children)
        console.log(arrChildren)
        this.outCodeTable = arrChildren.reduce((arr, next) => {
          arr = [...arr, ...next]
          return arr
        }, [])
        console.log(this.contentTable, this.outCodeTable)
        this.contentTable.forEach(item => {
          if (this.outCodeTable.indexOf(item.id) > -1) {
            this.outTable.push(item)
          }
        })
      } else {
        this.outTable = val
        this.outCodeTable = this.outTable.map(item => item.id)
      }
      console.log(this.outTable, this.outCodeTable)
    },
    scan(e) {
      console.log('开始扫码出库')
      this.$message.success('请开始扫码出库')
      this.tableData = []
      this.addScanMonitor()
      e.srcElement.blur()
    },
    async setOptions() {
      const { data: nameRes } = await selectAllName()
      // console.log(nameRes)
      const nameArr = nameRes.productNames.map(item => {
        return { value: item.id, label: item.productName }
      })
      for (const nameItem of nameArr) {
        const { data } = await selectAllModel({ productNameId: nameItem.value })

        this.options = [...this.options, ...data.models]
        /* nameItem.children = data.models.map(item => {
          return { value: item.id, label: item.productModel }
        }) */
      }
      this.options = this.options.map(item => {
        return { label: item.productModel, value: item.productModel, productCode: item.productCode }
      })
      // console.log(this.options)
    },
    searchData(res) {
      console.log(res)
      const { row, total, productModel, startTime, endTime } = res
      this.tableData = row
      this.total = total
      this.searchModel.productModel = productModel
      this.searchModel.startTime = startTime
      this.searchModel.endTime = endTime
      window.document.onkeypress = undefined
    },
    onTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return 'onAcitve'
      } else {
        return ''
      }
    },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
      const obj = {}
      const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key])
      arr.forEach(item => obj[item] = this.searchModel[item])
      getList(obj).then(response => {
        this.tableData = response.data.row
        this.total = response.data.total
        this.listLoading = false
        // console.log(this.tableData)
      })
    },
    handleSizeChange(val) {
@@ -185,30 +594,117 @@
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    outHandleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    outHandleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.outPageParams.pageNo = val
      // this.fetchData()
      // console.log()

      // console.log(this.addTable.slice((this.outPageParams.pageSize * (val - 1)), (this.outPageParams.pageSize * (val - 1)) + this.outPageParams.pageSize))
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'allTab'
    ])
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
.addOperation {
 min-height: calc(100vh - 50px);
::v-deep .el-table__header .el-checkbox{
   display:none;
}
::v-deep .tableData .el-table__header th:nth-child(1) .cell::before{
content: '多选';
}
.templateOrder{
  border: 1px solid #000;
  padding: 8px;
  >h3{
    text-align: center;
  }
  &-main{
  border-top: 1px solid #000;
  border-left: 1px solid #000;
    .main-row{
      display: flex;
      font-size: 12px;
        >div{
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        height: 40px;
        line-height: 20px;
        padding: 10px;
        // margin: 24px;
        >h4{
          margin: 0;
        }
      }
      .flex-2{
        min-width: 110px;
        max-width: 110px;
        text-align: right;
        padding: 10px 6px;
      }
      .flex-4{
        flex: 1;
        text-align: center;
      }
      .flex-8{
        flex: 8;
      }
      .flex-18{
        flex: 18;
      }
    }

  }
}

.outOperation {
 min-height: calc(100vh - 100px);
 padding: 25px;
 background: $mainBg;
 .addOperation-main{
 display: flex;
 flex-direction: column;
 .dialog-footer{
  text-align: center;
  display: flex;
  justify-content: space-around;
 }
 .outOperation-main{
  background: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .main-top{}
  .table-header{
    background: #6095FB;
  }
  ::v-deep .el-table{
    flex: 1;
    // display: flex;
    // flex-direction: column;
   ::v-deep .onAcitve td{
    background-color: #F2F2F2 !important;
 }
 .addOperation-foot{
  }
  .outOperation-foot{
  margin-top: 25px;
  .el-pagination{
    display: flex;
    justify-content: center;
    justify-content: right;
  }
  }
 }
}