diff --git a/package.json b/package.json
index 0e9ad07..4223316 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "core-js": "3.6.5",
     "crypto-js": "^4.1.1",
     "element-ui": "^2.15.12",
+    "file-saver": "^2.0.5",
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",
     "normalize.css": "7.0.0",
@@ -23,9 +24,12 @@
     "path-to-regexp": "2.4.0",
     "postcss-px-to-viewport": "^1.1.1",
     "qs": "^6.11.0",
+    "script-loader": "^0.7.2",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",
diff --git a/src/api/user/internalCompany.js b/src/api/user/internalCompany.js
new file mode 100644
index 0000000..8f12b33
--- /dev/null
+++ b/src/api/user/internalCompany.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+var service_name = 'oil-refinery'
+var group_name = 'xoilRefinerySettlement'
+export default {
+  getByPage(page) {
+    // 分页查询
+    return request({
+      url: `/${service_name}/${group_name}/getByPage`,
+      method: 'post',
+      data: page
+    })
+  },
+  getByIdDetail(id) {
+    // 根据id查询详情
+    return request({
+      url: `/${service_name}/${group_name}/get/${id}`,
+      method: 'get'
+    })
+  },
+  orderGetByPage(page) {
+    // 新增待选-分页查询
+    return request({
+      url: `/${service_name}/xoilRefineryOrder/getByPage`,
+      method: 'post',
+      data: page
+    })
+  },
+  settlementSave(sysCustomerInfo) {
+    // 新增-保存
+    return request({
+      url: `/${service_name}/${group_name}/save`,
+      method: 'post',
+      data: sysCustomerInfo
+    })
+  },
+  update(sysCustomerInfo) {
+    // 审核
+    return request({
+      url: `/${service_name}/${group_name}/update`,
+      method: 'post',
+      data: sysCustomerInfo
+    })
+  },
+  getLikeByCompanyType(oilCompanyInfo) {
+    // 根据企业名称模糊搜索
+    return request({
+      url: `/oil-user/oilCompanyInfo/getLikeByCompanyType`,
+      method: 'post',
+      data: oilCompanyInfo
+    })
+  }
+}
diff --git a/src/assets/img/oilFinalStatement/icon-daijiesuan.png b/src/assets/img/oilFinalStatement/icon-daijiesuan.png
new file mode 100644
index 0000000..3e8a65f
Binary files /dev/null and b/src/assets/img/oilFinalStatement/icon-daijiesuan.png differ
diff --git a/src/assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png b/src/assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png
new file mode 100644
index 0000000..b0b05a2
Binary files /dev/null and b/src/assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png differ
diff --git a/src/assets/img/oilFinalStatement/jiesuandanQiye.png b/src/assets/img/oilFinalStatement/jiesuandanQiye.png
new file mode 100644
index 0000000..9e118e6
Binary files /dev/null and b/src/assets/img/oilFinalStatement/jiesuandanQiye.png differ
diff --git a/src/assets/img/oilFinalStatement/jiesuandanYouzhan.png b/src/assets/img/oilFinalStatement/jiesuandanYouzhan.png
new file mode 100644
index 0000000..eeb84cb
Binary files /dev/null and b/src/assets/img/oilFinalStatement/jiesuandanYouzhan.png differ
diff --git a/src/assets/img/oilFinalStatement/qiyeAdd.png b/src/assets/img/oilFinalStatement/qiyeAdd.png
new file mode 100644
index 0000000..5c792da
Binary files /dev/null and b/src/assets/img/oilFinalStatement/qiyeAdd.png differ
diff --git a/src/assets/img/oilFinalStatement/qiyeLogo.png b/src/assets/img/oilFinalStatement/qiyeLogo.png
new file mode 100644
index 0000000..45ff820
Binary files /dev/null and b/src/assets/img/oilFinalStatement/qiyeLogo.png differ
diff --git a/src/assets/img/oilFinalStatement/youzhanAdd.png b/src/assets/img/oilFinalStatement/youzhanAdd.png
new file mode 100644
index 0000000..5eca4ec
Binary files /dev/null and b/src/assets/img/oilFinalStatement/youzhanAdd.png differ
diff --git a/src/assets/img/oilFinalStatement/youzhanLogo.png b/src/assets/img/oilFinalStatement/youzhanLogo.png
new file mode 100644
index 0000000..1514ebf
Binary files /dev/null and b/src/assets/img/oilFinalStatement/youzhanLogo.png differ
diff --git a/src/router/index.js b/src/router/index.js
index f2bb743..5b24752 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,28 +1,38 @@
-import Vue from "vue";
-import Router from "vue-router";
+import Vue from 'vue'
+import Router from 'vue-router'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export const constantRoutes = [
   {
-    path: "/",
-    redirect: "/product",
+    path: '/',
+    redirect: '/product'
   },
   {
-    path: "/login",
-    component: () => import("@/views/login/index"),
-    hidden: true,
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
   },
   {
-    path: "/404",
-    component: () => import("@/views/404"),
+    path: '/404',
+    component: () => import('@/views/404')
     // hidden: true
   },
-];
+  {
+    path: '/oilFinalStatementList',
+    component: () => import('@/views/oilFinalStatement/oilFinalStatementList')
+    // hidden: true
+  },
+  {
+    path: '/oilFinalStatementAddList',
+    component: () => import('@/views/oilFinalStatement/oilFinalStatementAddList')
+    // hidden: true
+  }
+]
 
 const router = new Router({
   // scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes,
-});
+  routes: constantRoutes
+})
 
-export default router;
+export default router
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
new file mode 100644
index 0000000..4294ccc
--- /dev/null
+++ b/src/vendor/Export2Excel.js
@@ -0,0 +1,312 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+import XLSX from 'xlsx-style';
+
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+   // 设置表格中cell默认的字体，居中，颜色等
+ var defaultCellStyle = {
+    alignment: {
+        // 居中
+      horizontal: "center",
+      vertical: "center",
+      indent: 0
+    },
+    border: {bottom:{style:"thin"},top:{style:"thin"},
+      left:{style:"thin"},right:{style:"thin"}}
+}
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]?data[R][C]:"",
+        s: defaultCellStyle
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType=  'xlsx'
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+
+  for (let i = multiHeader.length-1; i > -1; i--) {
+    data.unshift(multiHeader[i])
+  }
+
+  var ws_name = "导出结果";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {
+          'wch': 10
+        };
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {
+          'wch': val.toString().length * 2.5
+        };
+      } else {
+        return {
+          'wch': val.toString().length * 1.2
+        };
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+  // if ( filename === '司机账户信息表') {
+    for(var key in ws) {
+      if(key.replace(/[^0-9]/ig, '') === '1') {
+        ws[key].s = {
+          alignment: {
+              // 居中
+            horizontal: "center",
+            vertical: "center"
+          },
+          font: {
+            color: { rgb: 'ffffff' },
+            bold: true
+          },
+          fill: {
+            fgColor: { rgb: '2f75b5' }
+          },
+          border: {bottom:{style:"thin"},top:{style:"thin"},
+            left:{style:"thin"},right:{style:"thin"}}
+        }
+      }
+    }
+  // }
+  if ( filename === '星卡互联平台业务量数据') {
+    for(var key in ws) {
+      if(key.replace(/[^0-9]/ig, '') === '1' || key.replace(/[^0-9]/ig, '') === '2') {
+        ws[key].s = {
+          alignment: {
+              // 居中
+            horizontal: "top",
+            vertical: "center",
+            indent: 0
+          },
+          font: {
+            sz: '14',
+            color: { rgb: 'ffffff' },
+            bold: true
+          },
+          fill: {
+            fgColor: { rgb: '2f75b5' }
+          },
+          border: {bottom:{style:"thin"},top:{style:"thin"},
+            left:{style:"thin"},right:{style:"thin"}}
+      }
+      }
+      if (key.replace(/[^0-9]/ig, '') === '3'||key.replace(/[^0-9]/ig, '') === '4') {
+        ws[key].s = {
+          alignment: {
+            // 居中
+          horizontal: "center",
+          vertical: "center"
+        },
+        font: {
+          color: { rgb: 'ffffff' },
+          bold: true
+        },
+        fill: {
+          fgColor: { rgb: '2f75b5' }
+        },
+        border: {bottom:{style:"thin"},top:{style:"thin"},
+          left:{style:"thin"},right:{style:"thin"}}
+        }
+      }
+    }
+  }
+  // var dataInfo = wb.Sheets[wb.SheetNames[0]];
+
+  // for (var i in dataInfo) {
+  //   if (i == '!ref' || i == '!merges' || i == '!cols') {
+
+  //   } else {
+  //     dataInfo[i + ''].s = {
+  //       alignment: {
+  //         horizontal: "center",
+  //         vertical: "center"
+  //       },
+  //       fill: {
+  //         bgColor: { rgb: 'ffff00' } }
+  //     }
+  //   }
+  // };
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}
diff --git a/src/views/oilFinalStatement/oilFinalStatementAddList.vue b/src/views/oilFinalStatement/oilFinalStatementAddList.vue
new file mode 100644
index 0000000..620567b
--- /dev/null
+++ b/src/views/oilFinalStatement/oilFinalStatementAddList.vue
@@ -0,0 +1,895 @@
+<template>
+  <div id="oilSiteUser">
+    <div class="table-header table-div el-scrollbar table-div-box">
+      <div class="finalAdd" v-if="!goIn">
+        <div class="YQAddHalf">
+          <div class="YQAddHalf-div" @click="goAdd(2)">
+            <div>
+              <img src="../../assets/img/oilFinalStatement/qiyeLogo.png" alt="" />
+              <span
+                >企业结算单
+                <div>去添加企业结算单</div>
+              </span>
+            </div>
+            <div class="YQAddHalf-button">
+              <el-button type="primary" @click="goAdd(2)">添加</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="goIn">
+        <div class="goInTitle">
+          <el-button style="margin-right: 20px; box-shadow: none" @click="fanhui">返回</el-button>
+          {{ '新增企业结算单' }}
+        </div>
+        <div slot="search" style="margin-top: 10px; overflow: auto">
+          <!--这里放顶部搜索-->
+          <!-- 搜索部分开始 -->
+          <el-form label-width="90px" :inline="true" :model="page" :size="$store.getters.size">
+            <el-col :span="18">
+              <el-form-item>
+                <el-select
+                  v-model="page.params.customerId"
+                  remote
+                  filterable
+                  :remote-method="companyOrginQuery"
+                  clearable
+                  placeholder="请输入企业名称"
+                  @keyup.enter.native="getByPage"
+                  ref="changeName"
+                >
+                  <el-option v-for="item in queryCompanyList" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="createTimeRange">
+                <el-date-picker
+                  v-model="page.params.createTimeRange"
+                  type="daterange"
+                  align="right"
+                  unlink-panels
+                  range-separator="~"
+                  value-format="yyyy-MM-dd"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item prop="paramsid">
+                <el-select v-model="page.params.oilProductType" style="width: 100%" clearable placeholder="请选择油品类型">
+                  <el-option v-for="item in oliList" :key="item.label" :label="item.label" :value="item.value"> </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6" class="fr" style="text-align: right">
+              <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
+              <el-button icon="el-icon-refresh" type="info" @click="refrech">重置</el-button>
+            </el-col>
+          </el-form>
+          <!-- 搜索部分结束 -->
+        </div>
+        <el-row :gutter="20">
+          <el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
+            <el-col :span="11">
+              <div class="border-table">
+                <el-form-item label="待选订单" style="display: flex">
+                  <el-input v-model="orderSerialNumberSearch" placeholder="请输入订单号" clearable @keyup.enter.native="getByPage">
+                    <el-button slot="append" icon="el-icon-search" @click="searchDaixuan"></el-button>
+                  </el-input>
+                </el-form-item>
+              </div>
+              <el-table
+                v-loading="loading"
+                row-key="getRowKey"
+                ref="staffTable"
+                :data="staffList"
+                :max-height="tableHeight"
+                highlight-current-row
+                @selection-change="handleStaffChange"
+              >
+                <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
+                <el-table-column label="订单编号" min-width="240">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.id }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="订单金额" min-width="120" align="center" prop="actAmount">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.actAmount ? Number(row.actAmount).toFixed(2) : '0.00' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="开票金额" min-width="120" align="center" prop="actAmount">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.actAmount ? Number(row.actAmount).toFixed(2) : '0.00' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" align="center" min-width="180">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.createTime }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="2" style="text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center">
+              <el-button @click="addStaff" type="primary" :disabled="!staffData.length" icon="el-icon-arrow-right" circle></el-button>
+              <el-button @click="removeStaff" type="primary" :disabled="!selectedStaffData.length" icon="el-icon-arrow-left" circle></el-button>
+            </el-col>
+            <el-col :span="11">
+              <div class="border-table">
+                <el-form-item label="已选订单" style="display: flex">
+                  <el-input v-model="serialNumber" placeholder="请输入订单号" clearable @keyup.enter.native="getByPage">
+                    <el-button slot="append" icon="el-icon-search" @click="searchYixuan"></el-button>
+                  </el-input>
+                </el-form-item>
+              </div>
+
+              <el-table
+                :max-height="tableHeight"
+                row-key="getRowKey"
+                ref="selectedStaffTable"
+                :data="selectedStaffList"
+                highlight-current-row
+                @selection-change="handleSelectedStaffChange"
+              >
+                <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
+                <el-table-column label="订单编号" min-width="240">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.id }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="订单金额" align="center" min-width="120" prop="actAmount">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.actAmount ? Number(row.actAmount).toFixed(2) : '0.00' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="开票金额" align="center" min-width="120" prop="actAmount">
+                  <template slot-scope="{ row }">
+                    <span>{{ goIn != 1 ? Number(row.actAmount).toFixed(2) : Number(row.settlementPriceAmount).toFixed(2) || '0.00' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" align="center" min-width="180">
+                  <template slot-scope="{ row }">
+                    <span>{{ row.createTime }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-form>
+        </el-row>
+      </div>
+      <!-- <el-col :span="24">
+        结算单
+      </el-col> -->
+      <div :span="24" class="lc_footer" v-if="goIn" style="">
+        <div class="footer_tip"></div>
+        <div class="lc_footer_butten">
+          <el-button type="primary" @click="submit" style="margin: 0 20px; width: 110px; font-size: 16px"> 提交 </el-button>
+        </div>
+      </div>
+    </div>
+    <el-dialog class="dialogInfo" append-to-body v-if="submitDialog" :visible.sync="submitDialog" width="500px">
+      <el-form class="messageConfirm" ref="form" :model="importData" label-width="110px" size="mini">
+        <div style="width: 100%; position: absolute; top: 15px; left: 0">
+          <div style="display: flex; align-items: center; padding-left: 20px">
+            <div style="width: 5px; height: 20px; background: #1890ff"></div>
+            <span style="margin-left: 10px">结算单创建</span>
+          </div>
+          <el-divider style="width: 100%"></el-divider>
+        </div>
+        <el-row style="padding: 0 20px">
+          <div style="width: 100%; margin-bottom: 35px; display: flex; align-items: center">
+            <img v-if="importData.settlementType == 1" style="width: 18px" src="../../assets/img/oilFinalStatement/jiesuandanQiye.png" alt="" />
+            <span style="margin-left: 10px">{{ importData.settlementObjectName }}</span>
+          </div>
+          <el-form-item label="结算总金额" prop="settlementAmount">
+            <span>{{ importData.settlementAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="订单总金额" prop="orderAmount">
+            <span>{{ importData.orderAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="充值总金额" prop="rechargeAmount">
+            <span>{{ importData.rechargeAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="开票总金额" prop="realAmount">
+            <span>{{ importData.invoicedAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="结算周期" prop="realAmount">
+            <span>{{ createT }}至 {{ endT }}</span>
+          </el-form-item>
+          <el-form-item label="订单总数" prop="companyName">
+            <span>{{ importData.orderQuantity }}条</span>
+          </el-form-item>
+
+          <el-form-item label="创建备注" prop="createMark" style="width: 100%">
+            <el-input type="textarea" v-model="importData.createMark"></el-input>
+          </el-form-item>
+          <div style="color: red; text-align: center; font-weight: 600">注意：确认后，无法再修改。请确认此次该的结算信息是否正确</div>
+        </el-row>
+        <div :span="24" style="margin-top: 50px; text-align: center; width: 100%">
+          <el-divider style="width: 100%"></el-divider>
+          <div style="display: flex; justify-content: end; width: 90%; margin: 0 auto">
+            <el-button @click="close" size="mini">取消</el-button>
+            <el-button size="mini" type="primary" :disabled="!setWait" @click="addList">确认提交</el-button>
+          </div>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import internalCompanyApi from '@/api/user/internalCompany'
+export default {
+  data() {
+    return {
+      changeCompanyId: '',
+
+      oliList: [
+        {
+          value: 'DIESEL',
+          label: '柴油'
+        },
+        {
+          value: 'PETROL',
+          label: '汽油'
+        },
+        {
+          value: 'GAS',
+          label: '天然气'
+        },
+        {
+          value: 'OTHER',
+          label: '其他'
+        }
+      ],
+
+      baocunList: [],
+      daixuanList: [],
+      baocunDaixuanList: [],
+      serialNumber: '',
+      goIn: 0,
+      importData: {},
+      page: {
+        pageSize: 10, // 每页显示条数
+        currentPage: 1, // 默认页
+        totalCount: 0,
+        params: {},
+        sorted: {}
+      },
+
+      orderSerialNumberSearch: '',
+      tableHeight: document.documentElement.clientHeight - 495,
+      selectedStaffList: [],
+      setWait: true,
+      queryCompanyList: [], // 企业列表
+      staffData: [],
+      selectedStaffData: [],
+      submitDialog: false,
+      companyName: '',
+      createT: '',
+      endT: '',
+      loading: false,
+      settlementPriceAmountEnd: '',
+      payRealAmountEnd: '',
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '昨日',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', [start, start])
+            }
+          },
+          {
+            text: '上周',
+            onClick(picker) {
+              const date = new Date()
+              const year = date.getFullYear()
+              const month = date.getMonth()
+              const day = date.getDate()
+              const week = date.getDay()
+              const lastWeekStartDate = new Date(year, month, day - week - 6)
+              const lastWeekEndDate = new Date(year, month, day - week)
+              picker.$emit('pick', [lastWeekStartDate, lastWeekEndDate])
+            }
+          },
+          {
+            text: '近10日',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 10)
+              end.setTime(end.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '上月',
+            onClick(picker) {
+              const date = new Date()
+              // 获取上个月的最后一天是几号day
+              const firstDate = new Date(date.getFullYear(), date.getMonth() - 1, 1)
+              const day = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
+              const enddate = new Date(date.getFullYear(), date.getMonth() - 1, day)
+              picker.$emit('pick', [firstDate, enddate])
+            }
+          },
+          {
+            text: '本月',
+            onClick(picker) {
+              let date = new Date()
+              //获取当前时间的年份转为字符串
+              let year = date.getFullYear().toString()
+              //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
+              let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
+              //获取天，判断是否小于10，如果是在字符串前面拼接'0'
+              let da = date.getDate() < 10 ? '0' + date.getDate() - Number(1).toString() : date.getDate() - Number(1).toString()
+              //字符串拼接，开始时间，结束时间
+              let end = year + '-' + month + '-' + da //当天
+              let beg = year + '-' + month + '-01' //当月第一天
+              picker.$emit('pick', [beg, end])
+            }
+          }
+        ],
+        disabledDate(time) {
+          let date = new Date()
+          // return time.getTime() > Date.now() - 8.64e6
+          return time.getTime() > date.getTime()
+        }
+      }
+    }
+  },
+  created() {
+    this.goIn = 0
+    // 增加监听事件，窗口变化时得到高度。
+    window.addEventListener('resize', this.getHeight, true)
+  },
+  watch: {
+    baocunDaixuanList: function (n, o) {
+      this.staffList = JSON.parse(JSON.stringify(n))
+    },
+    baocunList: function (n, o) {
+      this.selectedStaffList = JSON.parse(JSON.stringify(n))
+    },
+    '$route.path'(toPath, fromPath) {
+      if (toPath == '/finance/oilFinalStatement/oilFinalStatementAddList') {
+      }
+      if (this.$route.query.type) {
+        this.goIn = 0
+        this.$route.query.type
+      }
+      this.$route.query.type = ''
+    }
+  },
+
+  methods: {
+    cumulationFn(data, key) {
+      console.log(data)
+      let arr = data.map(item => item[key])
+      if (!arr.length) return 0
+      return arr.reduce((pre, cur, index) => {
+        console.log(pre, cur, index, key)
+        return (Number(pre) * 10000 + Number(cur) * 10000) / 10000
+      })
+    },
+    refrech() {
+      this.page.params = {}
+      this.baocunDaixuanList = []
+      this.baocunList = []
+      this.serialNumber = ''
+      this.orderSerialNumberSearch = ''
+    },
+    searchDaixuan() {
+      this.loading = true
+      if (!this.orderSerialNumberSearch) {
+        this.staffList = JSON.parse(JSON.stringify(this.baocunDaixuanList))
+        this.loading = false
+        return
+      } else {
+        this.staffList = this.baocunDaixuanList.filter((item, index) => this.orderSerialNumberSearch == item.id)
+        this.loading = false
+      }
+    },
+    searchYixuan() {
+      if (!this.serialNumber) {
+        this.selectedStaffList = JSON.parse(JSON.stringify(this.baocunList))
+        return
+      } else {
+        this.selectedStaffList = this.baocunList.filter((item, index) => this.serialNumber == item.id)
+      }
+    },
+    getHeight() {
+      // 获取浏览器高度并计算得到表格所用高度。
+      this.tableHeight = document.documentElement.clientHeight - 495
+    },
+    // TODO
+    async addList() {
+      if (this.importData.invoicedAmount == '' || this.importData.invoicedAmount == 0) {
+        this.$message.error('开票金额不能为零')
+        return
+      }
+      internalCompanyApi.settlementSave(this.importData).then(res => {
+        if (res.code == 20000) {
+          this.$message.success('操作成功')
+          this.submitDialog = false
+          this.getByPage()
+          this.baocunList = []
+          this.selectedStaffList = []
+        }
+      })
+      this.setWait = false
+      setTimeout(() => {
+        this.setWait = true
+      }, 2000)
+    },
+    async submit() {
+      if (this.selectedStaffList.length == 0) {
+        this.$message.warning('已选订单为空,请选择订单')
+        return
+      }
+      this.importData.settlementType = 1
+      this.importData.oilProductType = this.page.params.oilProductType
+
+      let payRealAmountEnd = []
+      let customerSettleAmountList = []
+      this.selectedStaffList.forEach(item => {
+        this.endT = item.createTime
+        payRealAmountEnd.push(item.actAmount ? item.actAmount : '0')
+
+        customerSettleAmountList.push(item.customerSettleAmount ? item.customerSettleAmount : '0')
+      })
+      function sum(val) {
+        return eval(val.join('+'))
+      }
+
+      this.importData.settlementAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+      this.importData.orderAmount = Number(sum(payRealAmountEnd)).toFixed(2)
+      this.importData.rechargeAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+      this.importData.invoicedAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+
+      this.endT = this.endT.split(' ')[0]
+      this.createT = this.selectedStaffList[0].createTime.split(' ')[0]
+      this.importData.settlementObjectId = this.page.params.id
+      this.changeCompanyId = this.page.params.id
+      this.importData.orders = this.selectedStaffList
+      this.importData.orderQuantity = this.selectedStaffList.length
+      this.importData.confirmState = 0
+      this.importData.settlementState = 0
+      this.importData.createSource = 'XOIL_OMS_WEB'
+      this.importData.orderStartDate = this.createT
+      this.importData.orderEndDate = this.endT
+      this.importData.settlementObjectName = this.$refs.changeName.selectedLabel
+      this.importData.settlementId = this.selectedStaffList[0].customerId
+      if (!this.importData.settlementObjectName) {
+        this.$message.error('企业名称为空，无法提交')
+        return
+      }
+      this.submitDialog = true
+    },
+    companyOrginQuery(value) {
+      // 远程搜索
+      if (value) {
+        internalCompanyApi.getLikeByCompanyType({ name: value }).then(res => {
+          this.queryCompanyList = res.data
+        })
+      }
+    },
+    search() {
+      // 搜索
+      if (!this.page.params.customerId) {
+        this.$message.warning('请输入名称')
+        return
+      }
+      if (!this.page.params.createTimeRange) {
+        this.$message.warning('请输入时间')
+        return
+      }
+      if (!this.page.params.oilProductType) {
+        this.$message.warning('请选择油品类型')
+        return
+      }
+      this.loading = true
+      this.page.currentPage = 1
+      this.getByPage()
+      this.baocunList = []
+      this.selectedStaffList = []
+    },
+    getRowKey(row) {
+      return row.id
+    },
+    goAdd(val) {
+      this.page.params = {}
+      this.staffList = []
+      this.selectedStaffList = []
+      this.goIn = val
+      this.importData.settlementType = 1
+    },
+    close() {
+      this.submitDialog = false
+      this.importData = {
+        settlementType: this.importData.settlementType
+      }
+    },
+    // 将左边表格选择项存入staffData中
+    handleStaffChange(rows) {
+      this.staffData = []
+      if (rows) {
+        rows.forEach(row => {
+          if (row) {
+            this.staffData.push(row)
+          }
+        })
+      }
+    },
+    // 左边表格选择项移到右边
+    addStaff() {
+      setTimeout(() => {
+        this.$refs['staffTable'].clearSelection()
+        this.$refs['selectedStaffTable'].clearSelection()
+      }, 0)
+      let repeat = false
+      this.selectedStaffList.forEach(item => {
+        if (this.staffData[0] && item.id === this.staffData[0].id) {
+          repeat = true
+          this.$message('此订单已添加')
+          return
+        }
+      })
+      if (repeat === false) {
+        this.staffData.forEach(item => {
+          this.baocunList.push(item)
+        })
+        this.baocunList.sort(function (a, b) {
+          return a.createTime > b.createTime ? 1 : -1 // 升序  < 降序
+        })
+        this.staffData.forEach((items, indexs) => {
+          this.baocunDaixuanList.forEach((item, index) => {
+            if (item.id == items.id) {
+              this.baocunDaixuanList.splice(index, 1)
+            }
+          })
+        })
+      }
+    },
+    // 右边表格选择项移到左边
+    removeStaff() {
+      setTimeout(() => {
+        this.$refs['staffTable'].clearSelection()
+        this.$refs['selectedStaffTable'].clearSelection()
+      }, 0)
+      this.selectedStaffData.forEach(item => {
+        this.baocunDaixuanList.push(item)
+      })
+      this.baocunDaixuanList.sort(function (a, b) {
+        return a.createTime > b.createTime ? 1 : -1 // 升序  < 降序
+      })
+
+      this.selectedStaffData.forEach((items, indexs) => {
+        this.baocunList.forEach((item, index) => {
+          if (item.id == items.id) {
+            this.baocunList.splice(index, 1)
+          }
+        })
+      })
+    },
+    // 将右边表格选择项存入selectedStaffData中
+    handleSelectedStaffChange(rows) {
+      this.selectedStaffData = []
+      if (rows) {
+        rows.forEach(row => {
+          if (row) {
+            this.selectedStaffData.push(row)
+          }
+        })
+      }
+    },
+    async getByPage(e) {
+      this.page.params.type = 1
+
+      if (this.page.params.createTimeRange && this.page.params.createTimeRange.length > 1) {
+        this.page.params.dateStartTime = this.page.params.createTimeRange[0] + ' 00:00:00'
+        this.page.params.dateEndTime = this.page.params.createTimeRange[1] + ' 23:59:59'
+      }
+      console.log(this.page)
+      internalCompanyApi.orderGetByPage(this.page).then(res => {
+        if (res.code !== 20000) {
+          this.loading = false
+          this.$message.error(res.msg)
+        }
+        this.staffList = res.data.list
+        this.page.totalCount = res.data.totalCount
+        this.page.totalPage = res.data.totalPage
+        this.baocunDaixuanList = JSON.parse(JSON.stringify(this.staffList))
+        this.baocunDaixuanList.sort(function (a, b) {
+          return a.createTime > b.createTime ? 1 : -1 // 升序  < 降序
+        })
+        this.loading = false
+      })
+    },
+    fanhui() {
+      this.goIn = 0
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.footer_tip_data_value {
+  font-weight: 600;
+}
+
+.lc_footer_butten {
+  /* min-width: 500px; */
+}
+
+.footer_tip_data_item:last-child {
+  margin-right: 0px;
+}
+
+.footer_tip_data_item {
+  margin-right: 10px;
+}
+
+.footer_tip_data_label {
+  color: #bbbbbb;
+}
+
+::v-deep .el-radio__label {
+  font-size: 16px;
+  color: black;
+}
+
+.footer_tip_data {
+  padding: 0 50px;
+}
+
+.radio {
+  text-align: left !important;
+}
+
+.footer_tip {
+  /* flex: 1; */
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  font-size: 16px;
+}
+
+.lc_footer {
+  display: flex;
+  /* text-align: center; */
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: solid 1px #dfe6ec;
+  /* background-color: #973E06; */
+  padding: 22px;
+  font-size: 16px !important;
+  justify-content: flex-end;
+}
+
+.table-div >>> .el-table__header-wrapper {
+  margin-top: 44px;
+}
+
+.table-div >>> .el-table__footer-wrapper {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+}
+
+.table-div {
+  min-height: calc(100vh - 150px);
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.table-div >>> .el-table__body-wrapper {
+  height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+.finalAdd {
+  display: flex;
+  justify-content: space-around;
+  height: calc(100vh - 250px);
+}
+
+.YQAddHalf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 22vw;
+}
+
+.YQAddHalf-div {
+  width: 100%;
+  padding: 48px 25px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #973e06;
+  cursor: pointer;
+}
+
+.YQAddHalf:nth-child(1) .YQAddHalf-div {
+  background-image: url('../../assets/img/oilFinalStatement/qiyeAdd.png');
+}
+
+.YQAddHalf:nth-child(2) .YQAddHalf-div {
+  background-image: url('../../assets/img/oilFinalStatement/youzhanAdd.png');
+}
+
+.YQAddHalf-div div:first-child {
+  display: flex;
+  align-items: center;
+  margin-bottom: 80px;
+}
+
+.YQAddHalf-button {
+  display: flex;
+  justify-content: center;
+}
+
+.YQAddHalf-button .el-button {
+  width: 140px;
+  font-size: 22px;
+  border-radius: 25px;
+  background: linear-gradient(270deg, #ff9854 0%, #ffbf81 100%);
+  border: 0;
+  box-shadow: none;
+}
+
+.YQAddHalf-div div:first-child img {
+  width: 66px;
+}
+
+.YQAddHalf-div div:first-child span {
+  font-size: 30px;
+  font-weight: 600;
+  margin-left: 30px;
+  position: relative;
+}
+
+.YQAddHalf-div div:first-child span div {
+  position: absolute;
+  font-size: 16px;
+  font-weight: normal;
+  top: 60px;
+}
+
+.finalAddHalf {
+  height: calc(100vh - 250px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.finalAddHalf img {
+  width: 20vw;
+}
+
+.finalAddHalf span {
+  font-size: 22px;
+  display: block;
+}
+
+.finalAddHalf .el-button {
+  margin-top: 35px;
+  padding: 10px 60px;
+  font-size: 22px;
+}
+
+.goInTitle {
+  font-size: 18px;
+  font-weight: 600;
+  padding: 10px 0;
+  border-bottom: 1px solid #e9e9e9;
+  display: flex;
+  align-items: center;
+}
+
+.search-form {
+  display: flex;
+  width: 100%;
+}
+
+.search-form .el-table {
+  border: 1px solid #dfe6ec;
+  border-radius: 0;
+  margin-bottom: 0;
+  border-bottom: 0;
+}
+
+.el-input-group__append .el-button {
+  box-shadow: none;
+}
+
+.border-table {
+  display: flex;
+  border: 1px solid #dfe6ec;
+  border-bottom: 0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  flex-wrap: wrap;
+}
+
+.border-table >>> .el-form-item {
+  margin: 10px 0;
+}
+
+.list-total {
+  display: flex;
+  padding: 10px 20px;
+  border: 1px solid #dfe6ec;
+  border-top: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.list-total span:last-child {
+  margin-left: 20px;
+}
+
+.el-divider--horizontal {
+  margin: 10px 0;
+}
+
+.dialogInfo >>> .el-dialog__body {
+  padding: 10px 20px;
+}
+
+.dialogInfo .el-button {
+  width: 80px;
+}
+
+.el-date-editor {
+  box-shadow: none !important;
+}
+
+.table-div >>> .el-form-item__content .el-input {
+  box-shadow: none !important;
+}
+
+.el-table {
+  min-height: calc(100vh - 450px);
+}
+
+.search-form >>> .el-button--medium.is-circle {
+  padding: 15px;
+  margin: 10px 0;
+}
+
+.table-div >>> .el-form-item__content {
+  box-shadow: none !important;
+}
+
+.messageConfirm .el-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 25px;
+  justify-content: space-between;
+}
+
+.messageConfirm .el-form-item {
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  align-items: normal;
+}
+
+.el-form-item--mini >>> .el-form-item__content {
+  margin-left: 0 !important;
+}
+
+.messageConfirm >>> .el-form-item__label {
+  text-align: left;
+}
+</style>
diff --git a/src/views/oilFinalStatement/oilFinalStatementList.vue b/src/views/oilFinalStatement/oilFinalStatementList.vue
new file mode 100644
index 0000000..12916e9
--- /dev/null
+++ b/src/views/oilFinalStatement/oilFinalStatementList.vue
@@ -0,0 +1,538 @@
+<template>
+  <div id="oilSiteUser">
+    <div class="table-header table-div el-scrollbar table-div-box">
+      <div slot="search" style="margin-top: 5px">
+        <!--这里放顶部搜索-->
+        <!-- 搜索部分开始 -->
+        <el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
+          <el-form-item>
+            <el-input v-model="page.params.settlementNo" placeholder="结算单号" clearable @keyup.enter.native="getByPage" />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="page.params.settlementType" clearable placeholder="客户类型">
+              <el-option label="企业" value="1" />
+              <el-option label="炼厂" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select
+              v-model="page.params.settlementObjectName"
+              remote
+              filterable
+              :remote-method="companyOrginQuery"
+              clearable
+              placeholder="客户名称"
+              @keyup.enter.native="getByPage"
+            >
+              <el-option v-for="item in queryCompanyList" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-select v-model="page.params.auditState" clearable placeholder="审核状态">
+              <el-option label="待审核" value="0" />
+              <el-option label="已审核" value="1" />
+              <el-option label="审核失败" value="-1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select
+              v-model="page.params.createUser"
+              clearable
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入创建人"
+              :remote-method="userRemoteMethod"
+              @keyup.enter.native="getByPage"
+            >
+              <el-option
+                v-for="item in userList"
+                :key="item.id"
+                :label="item.phone + '(' + (item.nickName ? item.nickName + '-' : '') + item.userCode + ')'"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-date-picker
+              v-model="page.params.createTime"
+              clearable
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="创建时间"
+            />
+          </el-form-item>
+        </el-form>
+
+        <!-- 搜索部分结束 -->
+      </div>
+
+      <el-row slot="button-group" style="margin-top: 5px; display: flex; align-items: center">
+        <el-col :span="16" style="text-align: start">
+          <el-button type="primary" :size="$store.getters.size" icon="el-icon-plus" @click="toAdd()">新增</el-button>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" :size="$store.getters.size" icon="el-icon-search" @click="search">查询</el-button>
+          <el-button :size="$store.getters.size" icon="el-icon-refresh" type="info" @click="refrech">重置</el-button>
+        </el-col>
+      </el-row>
+
+      <div slot="table">
+        <!--这里放表格和分页-->
+        <!-- 列表开始 -->
+        <el-table :max-height="tableHeight" stripe :data="dataPage" fit style="width: 100%" :size="$store.getters.size">
+          <el-table-column label="序号" type="index" :index="indexMethod" />
+          <template v-for="(item, index) in tableColumns">
+            <el-table-column
+              v-if="item.show"
+              :key="index"
+              :fixed="item.fixed"
+              :align="item.align"
+              :show-overflow-tooltip="true"
+              :min-width="item.minWidth"
+              :width="item.width"
+              :prop="item.prop"
+              :sortable="item.sortable"
+              :label="item.label"
+              :formatter="item.render"
+            />
+          </template>
+          <el-table-column fixed="right" label="操作" width="150px">
+            <template slot-scope="scope">
+              <el-button :size="$store.getters.size" type="text" @click="detail(scope.row)"> <svg-icon icon-class="iconxiangqing1" />详情 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 列表结束 -->
+
+        <!-- 分页组件开始 -->
+        <div class="page-div">
+          <el-pagination
+            :current-page="page.currentPage"
+            :page-sizes="[10, 15, 20, 30]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.totalCount"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+        <!-- 分页组件结束 -->
+      </div>
+      <!-- 详情抽屉 -->
+      <el-drawer v-if="detailDrawer" :visible.sync="detailDrawer" destroy-on-close direction="ltr" size="70%">
+        <oilFinalStatementListInfo :importData="importData" @getByPage="getByPage" @closeDialog="closeDialog" />
+      </el-drawer>
+    </div>
+  </div>
+</template>
+<script>
+import oilFinalStatementListInfo from './oilFinalStatementListInfo'
+import internalCompanyApi from '@/api/user/internalCompany'
+import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    oilFinalStatementListInfo
+  },
+  data() {
+    return {
+      detailDrawer: false,
+      thisloding: true,
+      page: {
+        pageSize: 10, // 每页显示条数
+        currentPage: 1, // 默认页
+        params: {}, // 查询参数
+        sorted: {},
+        columns: []
+      },
+      userList: '',
+      queryCompanyList: [],
+      tableHeight: document.documentElement.clientHeight - 300 - 50,
+      filters: this.$options.filters,
+      dataPage: [],
+      tableColumns: [
+        {
+          prop: 'settlementNo',
+          minWidth: 300,
+          label: '结算单号',
+          show: true,
+          render: (row, column, cell) => {
+            return cell
+          }
+        },
+        {
+          prop: 'settlementObjectName',
+          minWidth: 350,
+          label: '结算客户名称',
+          show: true,
+          render: (row, column, cell) => {
+            return (
+              <div>
+                <el-tag color={row.settlementType != 1 ? '#F59A23' : ''} effect="dark" type={row.settlementType != 1 ? 'warning' : ''}>
+                  {row.settlementType == 1 ? '企业' : '炼厂'}
+                </el-tag>
+                <span style="margin-left:10px">{row.settlementObjectName}</span>
+              </div>
+            )
+          }
+        },
+        {
+          prop: 'auditState',
+          minWidth: 80,
+          label: '审核状态',
+          show: true,
+          render: (row, column, cell) => {
+            if (cell === 0) {
+              return (
+                <el-button type="warning" size="mini">
+                  待审核
+                </el-button>
+              )
+            }
+            if (cell === 1) {
+              return (
+                <el-button type="success" size="mini">
+                  已审核
+                </el-button>
+              )
+            }
+            if (cell === -1) {
+              return (
+                <el-button type="danger" size="mini">
+                  审核失败
+                </el-button>
+              )
+            }
+            return cell
+          }
+        },
+        {
+          prop: 'settlementAmount',
+          minWidth: 80,
+          label: '订单金额',
+          show: true,
+          render: (row, column, cell) => {
+            return cell
+          }
+        },
+        {
+          prop: 'invoicedAmount',
+          minWidth: 80,
+          label: '开票金额',
+          show: true,
+          render: (row, column, cell) => {
+            return Number(cell).toFixed(2)
+          }
+        },
+        {
+          prop: 'createUserName',
+          minWidth: 180,
+          label: '创建人信息',
+          show: true,
+          render: (row, column, cell) => {
+            return (
+              <div>
+                <span>
+                  {row.createUserName} - {row.createUserPhone}
+                </span>
+                <br />
+                <span>{row.createTime}</span>
+              </div>
+            )
+          }
+        }
+      ],
+      importData: {},
+      rules: {
+        encryptPsw: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['sysUserList'])
+  },
+  created() {
+    this.getByPage()
+    // 增加监听事件，窗口变化时得到高度。
+    window.addEventListener('resize', this.getHeight, false)
+  },
+  watch: {
+    '$route.path'(toPath, fromPath) {
+      if (toPath == '/finance/oilFinalStatement/oilFinalStatementList') {
+        this.getByPage()
+      }
+    }
+  },
+  methods: {
+    userRemoteMethod(value) {
+      // 远程搜索
+      if (value) {
+        sysCustomerInfoApi.liekQuery(value).then(res => {
+          this.userList = res.data
+        })
+      }
+    },
+    toAdd() {
+      this.$router.push({ path: './oilFinalStatementAddList', query: { type: 'toAdd' } })
+    },
+    indexMethod(index) {
+      return (index + 1) * 1
+    },
+    async detail(row) {
+      await internalCompanyApi.getByIdDetail(row.id).then(res => {
+        this.importData = res.data
+      })
+      // 查看行 详情
+      this.detailDrawer = true
+    },
+    getHeight() {
+      // 获取浏览器高度并计算得到表格所用高度。
+      this.tableHeight = document.documentElement.clientHeight - 300 - 60
+    },
+    search() {
+      // 搜索
+      this.page.currentPage = 1
+      this.getByPage()
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val
+      this.getByPage()
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val
+      this.getByPage()
+    },
+    refrech() {
+      this.page.params = {}
+      this.getByPage()
+    },
+    companyOrginQuery(value) {
+      // 远程搜索
+      if (value) {
+        internalCompanyApi.getLikeByCompanyType({ name: value }).then(res => {
+          this.queryCompanyList = res.data
+        })
+      }
+    },
+    getByPage() {
+      // 分页查询
+
+      internalCompanyApi.getByPage(this.page).then(res => {
+        this.dataPage = res.data.list
+        this.page.totalCount = res.data.totalCount
+        this.page.totalPage = res.data.totalPage
+      })
+      // },500)
+      // })
+    },
+    closeDialog() {
+      this.detailDrawer = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.type-yuan {
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background: #168efa;
+}
+
+.type-yuan-info {
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background: #c0c4cc;
+}
+
+.handle-button-group {
+  margin-bottom: 10px;
+}
+
+.table-div {
+  min-height: calc(100vh - 150px);
+  max-height: calc(100vh - 110px);
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.table-div >>> .header-container {
+  position: sticky;
+  top: 0rem;
+  min-height: 110px;
+  z-index: 4;
+  background: #fff;
+}
+
+.table-div .el-table__footer-wrapper {
+  position: fixed !important;
+}
+
+.page-div {
+  position: fixed;
+  background: #fff;
+  bottom: 0rem;
+  z-index: 4;
+  min-width: 100%;
+}
+
+.el-icon-check {
+  color: #46a6ff;
+}
+
+.dispose-dialog {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.dispose-dialog div:nth-child(2) span:first-child {
+  color: #999;
+}
+
+.dispose-dialog div:nth-child(2) span:last-child {
+  color: #46a6ff;
+}
+
+.dispose-dialog div:nth-child(3) {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dispose-dialog .flex2 {
+  width: 45%;
+  background: #e4e4e4;
+  padding: 30px 20px;
+}
+
+.dispose-dialog .flex2 span {
+  color: #666 !important;
+  font-size: 16px;
+  margin-bottom: 20px;
+  display: block;
+  text-align: center;
+}
+
+.stepsStyle >>> .el-step__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.stepsStyle >>> .el-step__title {
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.stepsStyle >>> .el-step__main {
+  margin-top: 5px;
+}
+
+.stepsStyle >>> .el-step__title.is-process {
+  background: #168efa !important;
+  color: #fff;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.stepsStyle >>> .el-loading-mask {
+  opacity: 0.8;
+}
+
+.stepsStyle >>> .el-loading-spinner {
+  margin-top: -10px;
+}
+
+.stepsStyle >>> .el-loading-spinner .circular {
+  height: 20px;
+  width: 20px;
+}
+
+.stepsStyle >>> .el-step__head.is-process {
+  color: #168efa;
+  border-color: #c0c4cc;
+}
+
+.stepsStyle >>> .el-step__description {
+  margin-top: 0;
+}
+
+.stepsStyle >>> .el-step__head.is-finish {
+  color: #168efa;
+  border-color: #c0c4cc;
+}
+
+.stepsStyle >>> .el-step__head.is-finish .el-step__line {
+  background: #168efa;
+}
+
+.stepsStyle >>> .el-step__title.is-finish {
+  color: #c0c4cc;
+}
+
+.stepsStyle >>> .el-step__line-inner {
+  width: fit-content !important;
+}
+
+.el-icon-error,
+.errstyle {
+  color: red;
+}
+
+.stepsStyle >>> .is-horizontal:last-child .el-step__title {
+  background: transparent !important;
+  color: #c0c4cc;
+  cursor: auto;
+}
+</style>
+<style>
+.table-div-box .el-form-item__content .el-input {
+  box-shadow: none !important;
+}
+
+.table-div-box .el-form-item--medium .el-form-item__content {
+  width: 100%;
+}
+
+#oilSiteUser .el-badge__content {
+  right: 15px;
+  top: 5px;
+}
+
+.el-icon-sort {
+  transform: rotate(90deg);
+  font-weight: 600;
+}
+
+.el-icon-daijiesuan {
+  background: url('../../assets/img/oilFinalStatement/icon-daijiesuan.png') center no-repeat;
+  font-size: 12px;
+  background-size: cover;
+}
+
+.el-icon-daijiesuan:before {
+  content: '替';
+  font-size: 12px;
+  visibility: hidden;
+}
+
+.el-icon-jiesuandanqiehuan {
+  background: url('../../assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png') center no-repeat;
+  font-size: 12px;
+  background-size: cover;
+}
+
+.el-icon-jiesuandanqiehuan:before {
+  content: '替';
+  font-size: 12px;
+  visibility: hidden;
+}
+</style>
diff --git a/src/views/oilFinalStatement/oilFinalStatementListInfo.vue b/src/views/oilFinalStatement/oilFinalStatementListInfo.vue
new file mode 100644
index 0000000..e0c91d9
--- /dev/null
+++ b/src/views/oilFinalStatement/oilFinalStatementListInfo.vue
@@ -0,0 +1,482 @@
+<template>
+  <div style="padding: 30px 40px 50px" class="statementInfo">
+    <div style="width: 100%; position: absolute; top: 15px; left: 0">
+      <div style="display: flex; align-items: center; padding-left: 20px">
+        <svg-icon icon-class="iconsiji2" style="font-size: 30px; margin-right: 10px" />
+        <span>结算单详情</span>
+      </div>
+      <el-divider style="width: 100%"></el-divider>
+    </div>
+    <el-row>
+      <el-form ref="form" :model="importData" label-width="110px" size="mini">
+        <el-row class="borderBody">
+          <el-col :span="6">
+            <span class="spanLabel">结算单号</span>
+            <br />
+            <span>{{ importData.settlementNo }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">审核状态</span>
+            <br />
+            <el-tag effect="dark" :type="accountStateEnum.find(item => item.value == importData.auditState).type">
+              {{ accountStateEnum.find(item => item.value == importData.auditState).label }}
+            </el-tag>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">客户类型</span>
+            <br />
+            <span>{{ importData.settlementType == 1 ? '企业' : '炼厂' }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">客户名称</span>
+            <br />
+            <span>{{ importData.settlementObjectName }}</span>
+          </el-col>
+
+          <el-col :span="6">
+            <span class="spanLabel">结算总金额</span>
+            <br />
+            <span>{{ importData.settlementAmount }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">订单总金额</span>
+            <br />
+            <span>{{ importData.orderAmount }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">充值总金额</span>
+            <br />
+            <span>{{ importData.rechargeAmount }}</span>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">开票总金额</span>
+            <br />
+            <span>{{ importData.invoicedAmount }}</span>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="12">
+              <span class="spanLabel">创建人</span>
+              <br />
+              <span>{{ importData.createUserName }}</span>
+            </el-col>
+            <el-col :span="12">
+              <el-popover :disabled="!importData.createMark" placement="bottom" width="200" trigger="click" :content="importData.createMark">
+                <el-button slot="reference" size="mini">查看创建备注</el-button>
+              </el-popover>
+            </el-col>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">创建时间</span>
+            <br />
+            <span>{{ importData.createTime }}</span>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="12">
+              <span class="spanLabel">审核人</span>
+              <br />
+              <span>{{ importData.auditUserName }}</span>
+            </el-col>
+            <el-col :span="12">
+              <el-popover :disabled="!importData.auditMark" placement="bottom" width="200" trigger="click" :content="importData.auditMark">
+                <el-button slot="reference" size="mini">查看审核备注</el-button>
+              </el-popover>
+            </el-col>
+          </el-col>
+          <el-col :span="6">
+            <span class="spanLabel">审核时间</span>
+            <br />
+            <span>{{ importData.auditTime }}</span>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-row>
+    <div slot="table">
+      <!--这里放表格和分页-->
+      <!-- 列表开始 -->
+      <el-table
+        :max-height="tableHeight"
+        :header-cell-style="{ background: '#f5f5f5' }"
+        show-summary
+        stripe
+        :summary-method="getSummaries"
+        :data="importData.orders"
+        fit
+        style="width: 100%"
+        :size="$store.getters.size"
+      >
+        <el-table-column label="序号" type="index" :index="indexMethod" />
+        <template v-for="(item, index) in tableColumns">
+          <el-table-column
+            v-if="item.show"
+            :key="index"
+            :fixed="item.fixed"
+            :align="item.align"
+            :show-overflow-tooltip="true"
+            :min-width="item.minWidth"
+            :width="item.width"
+            :prop="item.prop"
+            :sortable="item.sortable"
+            :label="item.label"
+            :formatter="item.render"
+          />
+        </template>
+      </el-table>
+      <!-- 列表结束 -->
+    </div>
+    <div class="button-style" :span="24">
+      <el-divider style="width: 100%"></el-divider>
+      <el-button @click="close(1)" style="margin-right: 10px">关闭</el-button>
+      <el-button v-if="importData.auditState == 0" type="primary" @click="submit" style="margin-right: 10px">结算单审核 </el-button>
+    </div>
+    <el-dialog class="dialogInfo" append-to-body :visible.sync="submitDialog" v-if="submitDialog" width="500px">
+      <el-form class="messageConfirm" ref="form" :model="importData" label-width="110px" size="mini">
+        <div style="width: 100%; position: absolute; top: 15px; left: 0">
+          <div style="display: flex; align-items: center; padding-left: 20px">
+            <div style="width: 5px; height: 20px; background: #1890ff"></div>
+            <span style="margin-left: 10px">结算单审核</span>
+          </div>
+          <el-divider style="width: 100%"></el-divider>
+        </div>
+        <el-row style="padding: 0 20px">
+          <div style="width: 100%; margin-bottom: 35px; display: flex; align-items: center">
+            <img v-if="importData.settlementType == 1" style="width: 18px" src="../../assets/img/oilFinalStatement/jiesuandanQiye.png" alt="" />
+            <span style="margin-left: 10px">{{ importData.settlementObjectName }}</span>
+          </div>
+          <el-form-item label="结算总金额" prop="settlementAmount">
+            <span>{{ importData.settlementAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="订单总金额" prop="orderAmount">
+            <span>{{ importData.orderAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="充值总金额" prop="rechargeAmount">
+            <span>{{ importData.rechargeAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="开票总金额" prop="realAmount">
+            <span>{{ importData.invoicedAmount }}元</span>
+          </el-form-item>
+          <el-form-item label="结算周期" prop="realAmount">
+            <span>{{ createT }}至 {{ endT }}</span>
+          </el-form-item>
+          <el-form-item label="订单总数" prop="companyName">
+            <span>{{ importData.orderQuantity }}条</span>
+          </el-form-item>
+
+          <el-form-item label="审核备注" prop="auditMark" style="width: 100%">
+            <el-input type="textarea" v-model="importData.auditMark"></el-input>
+          </el-form-item>
+          <div style="color: red; text-align: center; font-weight: 600">注意：确认后，无法再修改。请确认此次该的结算信息是否正确</div>
+        </el-row>
+        <div :span="24" style="margin-top: 50px; text-align: center; width: 100%">
+          <el-divider style="width: 100%"></el-divider>
+          <div style="display: flex; justify-content: end; width: 90%; margin: 0 auto">
+            <el-button @click="close" size="mini">关闭</el-button>
+            <el-button size="mini" type="danger" @click="save(-1)">审核驳回</el-button>
+            <el-button size="mini" type="primary" @click="save(1)">审核通过</el-button>
+          </div>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { imgCompress } from '@/utils'
+import internalCompanyApi from '@/api/user/internalCompany'
+import utils from '@/utils/encode'
+const JSESSIONID = utils.uuid()
+export default {
+  filters: {},
+  props: {
+    importData: {
+      type: Object,
+      default() {}
+    }
+  },
+  data() {
+    return {
+      tableHeight: document.documentElement.clientHeight - 470 - 55,
+      imgCompress,
+      companyList: [],
+      roleList: [],
+      roleTypeList: [],
+      submitDialog: false,
+      accountStateEnum: [
+        {
+          label: '待审核',
+          value: 0,
+          type: 'warning'
+        },
+        {
+          label: '已审核',
+          value: 1,
+          type: 'success'
+        },
+        {
+          label: '审核失败',
+          value: -1,
+          type: 'danger'
+        }
+      ],
+      tableColumns: [
+        {
+          prop: 'orderSerialNumber',
+          minWidth: 180,
+          label: '订单号',
+          show: true,
+          render: (row, column, cell) => {
+            return cell
+          }
+        },
+
+        {
+          prop: 'actAmount',
+          minWidth: 120,
+          label: '订单金额',
+          show: true,
+          render: (row, column, cell) => {
+            cell = Number(cell).toFixed(2)
+            return cell ? cell : '0.00'
+          }
+        },
+        {
+          prop: 'customerSettleAmount',
+          minWidth: 120,
+          label: '结算金额',
+          show: true,
+          render: (row, column, cell) => {
+            cell = Number(cell).toFixed(2)
+            return cell ? cell : '0.00'
+          }
+        },
+        {
+          prop: 'customerSettleAmount',
+          minWidth: 120,
+          label: '充值金额',
+          show: true,
+          render: (row, column, cell) => {
+            cell = Number(cell).toFixed(2)
+            return cell ? cell : '0.00'
+          }
+        },
+        {
+          prop: 'customerSettleAmount',
+          minWidth: 120,
+          label: '开票金额',
+          show: true,
+          render: (row, column, cell) => {
+            cell = Number(cell).toFixed(2)
+            return cell ? cell : '0.00'
+          }
+        },
+        {
+          prop: 'createTime',
+          minWidth: 150,
+          label: '创建日期',
+          show: true,
+          render: (row, column, cell) => {
+            return cell
+          }
+        }
+      ],
+      createT: '',
+      endT: ''
+    }
+  },
+  created() {
+    // 增加监听事件，窗口变化时得到高度。
+    window.addEventListener('resize', this.getHeight, false)
+  },
+  methods: {
+    settlement(val, data) {
+      if (val == 0) {
+        return '待审核'
+      }
+      if (val == 1) {
+        return '已审核'
+      }
+      if (val == -1) {
+        return '审核失败'
+      }
+    },
+    indexMethod(index) {
+      return (index + 1) * 1
+    },
+    getHeight() {
+      // 获取浏览器高度并计算得到表格所用高度。
+      this.tableHeight = document.documentElement.clientHeight - 470 - 55
+    },
+    close(val) {
+      if (val == 1) {
+        this.$emit('closeDialog')
+        this.tableColumns = []
+      } else {
+        this.submitDialog = false
+      }
+    },
+    submit() {
+      let payRealAmountEnd = []
+      let customerSettleAmountList = []
+      this.importData.orders.forEach(item => {
+        this.endT = item.createTime
+        payRealAmountEnd.push(item.actAmount ? item.actAmount : '0')
+
+        customerSettleAmountList.push(item.customerSettleAmount ? item.customerSettleAmount : '0')
+      })
+      function sum(val) {
+        return eval(val.join('+'))
+      }
+      this.importData.settlementAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+      this.importData.orderAmount = Number(sum(payRealAmountEnd)).toFixed(2)
+      this.importData.rechargeAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+      this.importData.invoicedAmount = Number(sum(customerSettleAmountList)).toFixed(2)
+
+      this.endT = this.endT.split(' ')[0]
+      this.createT = this.importData.orders[0].createTime.split(' ')[0]
+      this.submitDialog = true
+    },
+
+    save(val) {
+      var data = {
+        id: this.importData.id,
+        confirmSource: 'XOIL_OMS_WEB',
+        settlementType: this.importData.settlementType
+      }
+      if (val == -1) {
+        data.auditState = -1
+      } else if (val == 1) {
+        data.auditState = 1
+      }
+
+      data.auditMark = this.importData.auditMark
+      internalCompanyApi.update(data).then(res => {
+        if (res.code == 20000) {
+          this.importData = res.data
+          this.$message.success('操作成功')
+          this.$emit('closeDialog')
+          this.$emit('getByPage')
+        }
+      })
+    },
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      let actAmount = 0 // 订单金额
+      let customerSettleAmount = 0 // 充值=结算=开票
+      data.forEach(item => {
+        customerSettleAmount += Number(item.customerSettleAmount)
+        actAmount += Number(item.actAmount)
+      })
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] = sums[index].toFixed(2)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = ''
+        }
+        if (this.importData.settlementType == 1) {
+          switch (
+            column.property // column.property可以匹配它的每一列的命名， 然后赋值
+          ) {
+            case 'customerSettleAmount':
+              sums[index] = customerSettleAmount.toFixed(2) + '元' // 值取自后台
+              break
+            case 'actAmount':
+              sums[index] = actAmount.toFixed(2) + '元'
+              break
+
+            default:
+              break
+          }
+        }
+      })
+
+      return sums
+    }
+  }
+}
+</script>
+<style scoped>
+.el-divider--horizontal {
+  margin: 10px 0;
+}
+.el-form-item__content >>> .el-date-editor.el-input {
+  width: 100%;
+}
+.el-divider--horizontal {
+  margin: 10px 0;
+}
+.borderBody {
+  box-shadow: 0px 0px 3px 0px #c1c1c1;
+  padding: 20px 15px;
+  margin-bottom: 30px;
+  font-size: 14px;
+}
+.borderBody >>> .el-col {
+  height: 55px;
+  margin-bottom: 15px;
+  padding-left: 10px;
+}
+.borderBody >>> .spanLabel {
+  display: inline-block;
+  color: #606266;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.statementInfo >>> .el-table--fit th.gutter {
+  background: #f5f5f5;
+}
+.el-dialog__wrapper >>> .el-dialog__header {
+  text-align: center;
+}
+.dialogInfo >>> .el-dialog__body {
+  padding: 10px 20px;
+}
+.dialogInfo .el-button {
+  width: 80px;
+}
+.button-style {
+  margin-top: 20px;
+  text-align: right;
+  width: 100%;
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+}
+.button-style .el-button {
+  width: 120px;
+}
+.el-form-item--mini.el-form-item {
+  display: flex;
+  align-items: center;
+}
+.el-form-item--mini >>> .el-form-item__content {
+  margin-left: 0 !important;
+}
+.messageConfirm .el-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 25px;
+  justify-content: space-between;
+}
+.messageConfirm .el-form-item {
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  align-items: normal;
+}
+.messageConfirm >>> .el-form-item__label {
+  text-align: left;
+}
+</style>
diff --git a/src/views/order/components/billOfLading.vue b/src/views/order/components/billOfLading.vue
index e8a8a78..70f6b9d 100644
--- a/src/views/order/components/billOfLading.vue
+++ b/src/views/order/components/billOfLading.vue
@@ -57,7 +57,7 @@
         <div class="billBottom">
           <div class="billBottom-title">
             <span>提货单列表</span>
-            <el-button type="primary" @click="billAdd()">创建提货单</el-button>
+            <el-button type="primary" @click="billAdd()" :disabled="billData.orderInfo.orderStatus == 'COMPLETE'">创建提货单</el-button>
           </div>
           <div class="" style="height: 58vh; overflow: auto">
             <div class="billBottom-body" v-for="(item, index) in billData.list" :key="index">