dispacth_zhongpin/src/views/site/oilSiteOilsPrice/OilSiteOilsPriceList.vue

<template>
  <div class="container">
    <div class="table-header el-scrollbar table-div">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" ref="searchHeight" style="margin-top: 5px">
          <!--这里放顶部搜-->
          <!-- 搜索部分开始 -->
          <el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
            <el-form-item>
              <el-select v-model="page.params.siteName" style="width: 100%" filterable remote clear clearable
                reserve-keyword placeholder="油站名称" :remote-method="getBySiteNameList">
                <el-option v-for="item in sites" :key="item.id" :label="item.siteName" :value="item.siteName" />
              </el-select>
              <!-- <el-autocomplete v-model="page.params.siteName" placeholder="油站名称"
                :fetch-suggestions="getSimpleOilSiteInfo1" :trigger-on-focus="false" clearable filterable remote
                reserve-keyword style="width: 100%" /> -->
            </el-form-item>
            <!-- <el-form-item>
              <el-select v-model="page.params.channelId" style="width: 100%" filterable remote :blur="clearSiteName" clear
                clearable reserve-keyword placeholder="三方油站名称" :remote-method="getSiteChannelList">
                <el-option v-for="item in otherSites" :key="item.id" :label="item.otherSiteName" :value="item.id" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-select v-model="page.params.channelCode" filterable clearable placeholder="所属渠道">
                <el-option v-for="item in channelCodes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-select v-model="page.params.oilProductType" filterable clearable placeholder="油品类型">
                <el-option v-for="item in productTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item prop="normsOilNumber">
              <el-select v-model="page.params.oilProductCode" placeholder="油品" style="width: 100%" clearable filterable>
                <el-option v-for="item in oilList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
            <el-input v-model="page.params.enableMark" placeholder="启用标识" clearable @keyup.enter.native="getByPage" /> 
              <el-select v-model="page.params.enableMark" filterable clearable placeholder="油品启用标识">
                <el-option value="1" label="油品启用" />
                <el-option value="0" label="油品禁用" />
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-select v-model="page.params.globalEnable" filterable clearable placeholder="油站启用标识">
                <el-option value="ENABLE" label="油站启用" />
                <el-option value="DISABLE" label="油站禁用" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="page.params.enableMark" filterable clearable placeholder="油品状态">
                <el-option :value="1" label="启用" />
                <el-option :value="0" label="禁用" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-select v-model="page.params.deleteMark" filterable clearable placeholder="油站删除标识">
                <el-option :value="0" label="可用" />
                <el-option :value="1" label="删除" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-select v-model="page.params.putawayMark" filterable clearable placeholder="油站上架标识">
                <el-option :value="1" label="上架" />
                <el-option :value="0" label="下架" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-cascader v-model="addrCode" placeholder="所在省市区" style="width: 100%" :options="areaTree" :props="{
                checkStrictly: true,
                value: 'id',
                label: 'areaName',
                children: 'childList',
              }" filterable clearable />
            </el-form-item> -->
          </el-form>

          <!-- 搜索部分结束 -->
        </div>

        <el-row slot="button-group" style="margin-top: 5px">
          <el-col :span="16" class="tal">
            <el-button class="group-item" :size="$store.getters.size" type="primary" @click="toOutPutPiliang">
              <svg-icon icon-class="icondaochu" /> 批量调整策略
            </el-button>
            <!-- <el-button class="group-item" :size="$store.getters.size" type="primary" @click="toOutPut">
              <svg-icon icon-class="icondaochu" /> 导出
            </el-button> -->
            <el-button class="group-item" :size="$store.getters.size" type="success" @click="piliangAdd"><svg-icon
                icon-class="iconiconfonticon02" /> 快速调价任务</el-button>
          </el-col>
          <el-col :span="24">
            <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="
              page.params = {}
            ">重置</el-button>
          </el-col>
        </el-row>

        <div slot="table">
          <!--这里放表格和分页-->
          <!-- 列表开始 -->
          <el-table :max-height="tableHeight" :data="dataPage.list" fit style="width: 100%" :size="$store.getters.size"
            @sort-change="sortHandler" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <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="操作" align="center" width="180px">
              <template slot-scope="scope">
                <el-button :size="$store.getters.size" type="text" @click="handleDetail(scope.row.id)">
                  <svg-icon icon-class="iconxiangqing1" /> 详情
                </el-button>
                <el-dropdown>
                  <el-button type="text">
                    更多<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-if="scope.row.deleteMark == 0" @click.native="tomMdifyPrice(scope.row)">
                      <el-button :size="$store.getters.size" type="text">
                        <svg-icon icon-class="iconicon-" />调价
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="modifyStrategy(scope.row)">
                      <el-button :size="$store.getters.size" type="text">
                        <svg-icon icon-class="iconicon-" />调价策略
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="showHistoryFn(scope.row)">
                      <el-button :size="$store.getters.size" type="text">
                        <svg-icon icon-class="iconicon-" />变更历史
                      </el-button>
                    </el-dropdown-item>
                    <!-- <el-dropdown-item @click.native="getRecordList(scope.row.id)">
                      <el-button :size="$store.getters.size" type="text">
                        <svg-icon icon-class="iconicon-" />生效历史记录
                      </el-button>
                    </el-dropdown-item> -->
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <div class="page-div">
            <el-pagination :current-page="page.currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
          <!-- 分页组件结束 -->
        </div>
      </ListLayout>
      <!-- 历史记录弹窗 -->
      <el-dialog v-el-drag-dialog title="变更历史" :visible.sync="showHistory" width="55%">
        <el-table :data="historyData" style="width: 100%">
          <el-table-column prop="createTime" label="创建时间" />
          
          <el-table-column prop="name" label="基础个人价">
            <template slot-scope="scope">
              <div>
                <div>上次 {{ scope.row.lastPersonalPriceBase }}</div>
                <div>当前 {{ scope.row.afterPersonalPriceBase }}</div>
              </div>
              </template>
          </el-table-column>
          <el-table-column prop="address" label="个人价调价策略">
            <template slot-scope="scope">
              <div>
                <div>上次 {{ scope.row.lastAppPriceStrategy }}</div>
                <div>当前 {{ scope.row.afterAppPriceStrategy }}</div>
              </div>
              </template>
          </el-table-column>
          <el-table-column prop="address" label="应用个人价">
            <template slot-scope="scope">
              <div>
                <div>上次 {{ scope.row.lastPrice }}</div>
                <div>当前 {{ scope.row.finalPrice }}</div>
              </div>
              </template>
          </el-table-column>
          <el-table-column prop="address" label="创建人">
            <template slot-scope="scope">
              <div>
                <div>{{ scope.row.createUserName }}</div>
                <div> {{ scope.row.createUser }}</div>
              </div>
              </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 导出弹窗 -->
      <el-dialog v-el-drag-dialog title="导出" :visible.sync="outPutDialog" width="20%">
        <OilSiteOilsPriceOutput :page="page" :dataPage="dataPage" v-if="outPutDialog"
          :multipleSelection="multipleSelection" @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>

      <!-- 导入弹窗 -->
      <el-dialog v-el-drag-dialog title="导入" :visible.sync="importDialog" width="55%">
        <OilSiteOilsPriceImport @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>

      <!-- 详情抽屉 -->
      <el-drawer :withHeader="false" title="详情" :visible.sync="showTableDrawer" direction="ltr" size="60%">
        <general-details title="详情" isHeader="true" @close="showTableDrawer = false" :sourceData="oilSiteOilsPrice"
          :mappingData="mappingData" v-if="showTableDrawer"></general-details>
        <!-- <OilSiteOilsPriceInfo :oil-site-oils-price="oilSiteOilsPrice" /> -->
      </el-drawer>

      <!-- 调价历史记录 -->
      <el-drawer direction="ltr" title="历史记录" :visible.sync="recordDialog" size="60%">
        <OilSiteOilsPriceModifyRecord v-if="recordDialog" :oil-site-oils-price="oilSiteOilsPrice" @getByPage="getByPage"
          @closeDialog="closeDialog" />
      </el-drawer>

      <adjust-price v-if="controlWindows.dialogAdjustPrice" :controlWindows="controlWindows"
        :oilSiteOilsPrice="oilSiteOilsPrice" @searchAgain="search" />

      <adjust-strategy v-if="controlWindows.dialogAdjustStrategy" :controlWindows="controlWindows"
        :oilSiteOilsPrice="oilSiteOilsPrice" @searchAgain="search" />

      <adjust-strategyPiliang v-if="controlWindows.dialogAdjustStrategyPiliang" :controlWindows="controlWindows"
        :multipleSelection="multipleSelection" @searchAgain="search" />

      <adjust-strategyPiliangAdd v-if="controlWindows.dialogAdjustStrategyPiliangAdd" :controlWindows="controlWindows"
        :multipleSelection="multipleSelection" @searchAgain="search" />
    </div>
  </div>
</template>
<script>
import AreaCodeApi from "@/api/base/areaCode";
import oilSiteOilsPriceApi from "@/api/user/oilSiteOilsPrice";
import oilSiteChannelApi from "@/api/user/oilSiteChannel";
import oilSiteInfoApi from "@/api/user/oilSiteInfo";
import oilVehicleOwnerApi from "@/api/user/oilVehicleOwner";
import OilSiteOilsPriceInfo from "./OilSiteOilsPriceInfo";
import OilSiteOilsPriceImport from "./OilSiteOilsPriceImport";
import OilSiteOilsPriceOutput from "./OilSiteOilsPriceOutput";
import OilSiteOilsPriceModifyRecord from "./OilSiteOilsPriceModifyRecord";
import adjustPrice from "./components/adjustPrice.vue";
import adjustStrategy from "./components/adjustStrategy.vue";
import { mapGetters } from "vuex";
import AdjustStrategyPiliang from './components/adjustStrategyPiliang.vue';
import AdjustStrategyPiliangAdd from '../oilCompanySiteDiaodu/adjustStrategyPiliangAdd.vue';
import { object } from "bfj/src/events";
export default {
  components: {
    OilSiteOilsPriceInfo,
    OilSiteOilsPriceImport,
    OilSiteOilsPriceModifyRecord,
    OilSiteOilsPriceOutput,
    adjustPrice,
    adjustStrategy,
    AdjustStrategyPiliang,
    AdjustStrategyPiliangAdd
  },
  data() {
    return {
      showHistory: false,
      historyData: [],
      userCompany: this.$store.getters.user.userCompany,
      mappingData: [
        {
          carTitle: '基础信息',
          carItems: [
            {
              label: '主键',
              value: 'id'
            },
            {
              label: '油站ID',
              value: 'siteId'
            },
            {
              label: '油品类型',
              value: 'oilProductType'
            },
            {
              label: '启用禁用',
              value:(data)=>{
               if (data.enableMark == 1){
                return ('启用');
               }else {
                return ('禁用');
               }
            }
          }, 
            {
              label: '基础个人价',
              value: 'personalPriceBase'
            },
            {
              label: '调价策略公式',
              value: 'appPriceStrategy'
            },
            {
              label: '应用个人价',
              value: 'personalPriceApp'
            },
            {
              label: '创建人ID',
              value: 'createUser'
            },
            {
              label: '创建人姓名',
              value: 'createUserName'
            },
            {
              label: '更新人姓名',
              value: 'updateUserName'
            },
            {
              label: '更新人ID',
              value: 'updateUser'
            },
            {
              label: '创建时间',
              value: 'createTime'
            },
            {
              label: '更新时间',
              value: 'updateTime'
            },
            {
              label: '创建来源',
              value: 'createSource'
            },
            // {
            //   label: '渠道id',
            //   value: 'id'
            // },
            // {
            //   label: '渠道编码',
            //   value: 'channelCode',
            //   remark: 'XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油YDJY：一点加油（壳牌）',
            // },
            // {
            //   label: '三方油站编码',
            //   value: 'otherSiteCode',
            // },
            // {
            //   label: '三方油品编码',
            //   value: 'otherOilsCode'
            // },
            // {
            //   label: '油枪用逗号隔开',
            //   value: 'oilsBar'
            // },
            // {
            //   label: '排放标准',
            //   value: 'oilsGb'
            // },
            // {
            //   label: '发改委价格',
            //   value: 'marketPrice'
            // },
            // {
            //   label: '个人加油价格',
            //   value: this.$store.getters.user.userCompany == '1622767323771695104' ? 'personalPriceZp' : 'personalPrice',
            // },
            // {
            //   label: '底价加油价格',
            //   value: 'floorPrice'
            // },
            // {
            //   label: '底价加油价格说明',
            //   value: 'floorRemark'
            // },
            // {
            //   label: '版本号',
            //   value: 'version'
            // },
          ]
        },

      ],
      AdjustStrategyPiliangareaTree: [],
      controlWindows: {
        dialogAdjustPrice: false,
        dialogAdjustStrategy: false,
        dialogAdjustStrategyPiliang: false,
        dialogAdjustStrategyPiliangAdd: false
      },
      recordDialog: false, // 调价历史弹窗
      // 油品类型
      productTypes: [
        { value: "DIESEL", label: "柴油" },
        { value: "PETROL", label: "汽油" },
        { value: "GAS", label: "天然气" },
      ],
      channelCodes: [
        { value: "XOIL", label: "星油" },
        { value: "WJY", label: "万金油" },
        { value: "LV", label: "老吕（找油网）" },
        { value: "TY", label: "团油" },
        { value: "YDJY", label: "一点加油（壳牌）" },
      ],
      // 用于存储调价历史记录
      records: [],
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {

        }, // 查询参数
        sorted: {},
        columns: [],
      },
      tableHeight: 0,
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
      },
      tableColumns: [
        {
          prop: "siteName",
          label: "油站名称",
          show: true,
          minWidth: 200,
          render: (row, column, cell) => {
            let typeData = {
              type: row.globalEnable == 'ENABLE' ? 'success' : 'info',
              value: row.globalEnable == 'ENABLE' ? '启用' : '禁用'
            }
            return <div>
              <el-tag type={typeData.type} > {typeData.value} </el-tag>
              <span style='margin-left:20px'>{cell}</span>
              <br />
              {row.siteId}

            </div>
          },
        },
        {
          prop: "oilProductType",
          label: "油品",
          align: "center",
          show: true,
          render: (row, column, cell) => {
            let typeData = {
              type: row.priceMark == '1' ? 'success' : 'info',
              value: row.priceMark == '1' ? '启用' : '禁用'
            }
            return (
              <div>
                <span style="color: #1890ff;font-size=16px;margin-right: 18px;font-weight:bold;">
                  {row.oilProductCode}
                </span>
                <el-tag style='margin-left:20px' type={typeData.type} > {typeData.value} </el-tag><br />
              </div>
            );
          },
        },
        {
          prop: "enableMark",
          label: "启用禁用",
          align: "center",
          show: true,
          render: (row, column, cell) => {
            var b5 = true;
            var s = 5;
            if (cell === 0) {
              // return '禁用'
              b5 = false;
            }
            if (cell === 1) {
              // return '启用'
              b5 = true;
            }
            return (
              <el-switch
                v-model={b5}
                on-change={() => this.enableChange(row, b5, s)}
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
                {" "}
              </el-switch>
            );
          },
        },
        // {
        //   prop: "globalEnable",
        //   label: "全局启用禁用",
        //   align: "center",
        //   width: 90,
        //   show: true,
        //   render: (row, column, cell) => {
        //     if (cell === 0) {
        //       return "禁用";
        //     }
        //     if (cell === 1) {
        //       return "启用";
        //     }
        //   },
        // },
        // {
        //   prop: "putawayMark",
        //   label: "上下架标识",
        //   align: "center",
        //   width: 90,
        //   show: true,
        //   render: (row, column, cell) => {
        //     if (cell === 0) {
        //       return "下架";
        //     }
        //     if (cell === 1) {
        //       return "上架";
        //     }
        //   },
        // },
        // {
        //   prop: "marketPrice",
        //   label: "价格（元/L）",
        //   width: 160,
        //   show: true,
        //   render: (row, column, cell) => {
        //     return (
        //       <div>
        //         <div>
        //           发改委：
        //           <span style="font-size=16px;margin-right: 10px;font-weight:bold;">
        //             {row.marketPrice}
        //           </span>
        //           <br />
        //           个人：
        //           <span style="color: #1890ff;font-size=16px;margin-right: 10px;font-weight:bold;">
        //             {this.userCompany == '1622767323771695104' && row.personalPriceZp ? row.personalPriceZp : row.personalPrice || "暂无"}
        //           </span>
        //           底价：
        //           <span style="color: #F56C6C;font-size=16px;margin-right: 10px;font-weight:bold;">
        //             {row.floorPrice ? row.floorPrice : "暂无"}
        //           </span>
        //         </div>
        //       </div>
        //     );
        //   },
        // },
        {
          prop: "personalPriceBase",
          label: "基础个人价  ",
          align: "center",
          show: true,
          render: (row, column, cell) => {
            return cell
          },
        },
        {
          prop: "appPriceStrategy",
          label: "个人价调价策略",
          align: "center",
          show: true,
          render: (row, column, cell) => {
            return <p>{cell}</p>;
          },
        },
        {
          prop: "personalPriceApp",
          label: "应用个人价  ",
          align: "center",
          show: true,
          render: (row, column, cell) => {
            return cell
          },
        },
        {
          prop: "updateTime",
          label: "更新信息",
          align: "left",
          show: true,
          render: (row, column, cell) => {
            if (cell) {
              return (
                <div>
                  <div>
                    <span>更新人</span>
                    <span>{row.createUserName}</span>
                  </div>
                  <div>
                    <span>更新时间</span>
                    <span>{row.updateTime}</span>
                  </div>
                </div>
              );
            }
            if (!cell) {
              return (
                <span style="color: #909399;font-style:italic;font-size=12px;">
                  暂无更新信息
                </span>
              );
            }
          },
        },
        // {
        //   prop: "createTime",
        //   label: "创建信息",
        //   align: "center",
        //   show: true,
        //   render: (row, column, cell) => {
        //     return (
        //       <div>
        //         <div>
        //           <p style="margin:0">
        //             {row.createUserName}{" "}
        //             {row.createUser === "未登录" ? "" : `(${row.createUser})`}
        //           </p>
        //           <span>{this.filters.parseTime(row.createTime)}</span>
        //         </div>
        //       </div>
        //     );
        //   },
        // },
      ],
      areaTree: [],
      oilSiteOilsPrice: {},
      otherSites: [], // 三方油站集合
      sites: [], // 主油站集合
      oilList: [], // 油品集合
    };
  },
  computed: {
    ...mapGetters(["sysUserList"]),
    addrCode: {
      get() {
        //   const arr = [];
        //   arr[0] = this.page.params.provinceCode;
        //   arr[1] = this.page.params.cityCode;
        //   arr[2] = this.page.params.areaCode;
        // console.log(arr,'11111111111111111')
        //   return arr;
      },
      set(val) {
        console.log(val, '22222222222222222222222222')
        this.page.params.provinceCode = val[0];
        this.page.params.cityCode = val[1];
        this.page.params.areaCode = val[2];
      },
    },
  },
  watch:{
    showHistory(){
      if(!n){
        this.historyData = []
      }
    }
  },
  created() {
    this.getByPage();
    oilVehicleOwnerApi.getOils().then((res) => {
      this.oilList = res.data;
    });
    AreaCodeApi.getTree().then((res) => {
      this.areaTree = res.data;
    });
    // 增加监听事件，窗口变化时得到高度。
    this.getHeight();
    window.addEventListener("resize", this.getHeight, false);
  },
  methods: {
    showHistoryFn(row) {
      oilSiteOilsPriceApi.findByRelationId(row.id).then(res => {
        this.historyData = res.data;
        this.showHistory = true
      })
    },
    toOutPutPiliang() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.controlWindows.dialogAdjustStrategyPiliang = true
    },
    piliangAdd() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.controlWindows.dialogAdjustStrategyPiliangAdd = true
    },
    enableChange(row, b, s) {
      const sitePrice = {};
      sitePrice.id = row.id;
      if (b === true) {
        sitePrice.enableMark = 1;
      } else {
        sitePrice.enableMark = 0;
      }
      sitePrice.channelId = row.channelId;
      this.$confirm("您的操作即刻生效，请确认！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 这里调用接口
          oilSiteOilsPriceApi.update({
            ...sitePrice,
            oilProductCode: row.oilProductCode,
            targetApp: row.targetApp
          }).then((res) => {
            this.$message.success(res.msg);
            this.getByPage();
          });
        })
        .catch(() => {
          this.getByPage();
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    modifyStrategy(id) {
      oilSiteOilsPriceApi.get(id.id).then((res) => {
        this.oilSiteOilsPrice = res.data
        // Object.assign(res.data, {
        //   personalPriceApp: id.personalPriceApp,
        //   personalPriceBase: id.personalPriceBase,
        //   personalPriceSyncStrategy: id.personalPriceBase,
        // })
        this.controlWindows.dialogAdjustStrategy = true;
      });
    },
    getRecordList(id) {
      oilSiteOilsPriceApi.get(id).then((res) => {
        this.oilSiteOilsPrice = res.data;
        this.recordDialog = true;
      });
    },
    // 远程搜索主油站
    getSimpleOilSiteInfo1(siteName, cb) {
      if (siteName) {
        const oilSiteInfo = {};
        oilSiteInfo.siteName = siteName;
        oilSiteInfoApi.getSimpleOilSiteInfo(oilSiteInfo).then((res) => {
          const arr = Object.assign([], res.data);
          arr.map((m) => (m.value = m.siteName));
          cb(arr);
        });
      }
    },
    // 远程搜索主油站
    getBySiteNameList(siteName) {
      if (siteName) {
        const oilSiteInfo = {};
        oilSiteInfo.siteName = siteName;
        oilSiteInfoApi.otherGetDispatchByPage(oilSiteInfo).then((res) => {
          this.sites = res.data;
        });
      } else {
        this.sites = [];
      }
    },
    // 远程搜索三方渠道油站
    getSiteChannelList(otherSiteName) {
      console.log("otherSiteName" + otherSiteName);
      if (otherSiteName) {
        const oilSiteChannel = {};
        oilSiteChannel.otherSiteName = otherSiteName;
        oilSiteChannelApi.getSiteChannelList(oilSiteChannel).then((res) => {
          this.otherSites = res.data;
        });
      } else {
        this.otherSites = [];
      }
    },
    // 清除三方油站数组
    clearSiteName() {
      this.otherSites = [];
    },
    // 清除主油站数组
    clearSiteId() {
      this.sites = [];
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    toImport() {
      // 导入
      this.importDialog = true;
    },
    toOutPut() {
      // 导出
      this.outPutDialog = true;
    },
    handleDetail(id) {
      // 查看行 详情
      oilSiteOilsPriceApi.get(id).then((res) => {
        this.oilSiteOilsPrice = res.data;
        this.showTableDrawer = true;
      });
    },
    getHeight() {
      // 115px
      // 获取浏览器高度并计算得到表格所用高度。
      // this.tableHeight = document.documentElement.clientHeight - 300 - 60;
      setTimeout(() => {
        this.sHeight = this.$refs.searchHeight.offsetHeight;
        let fixedHeaderHeight =
          document.querySelector(".fixed-header").clientHeight;
        let elPaginationHeight =
          document.querySelector(".el-pagination").clientHeight;
        this.tableHeight =
          document.documentElement.clientHeight -
          this.sHeight -
          fixedHeaderHeight -
          elPaginationHeight -
          160;
      }, 350);
    },
    search() {
      // 搜索
      this.page.currentPage = 1;
      this.getByPage();
    },
    toggleSearchAdvance() {
      this.searchAdvice = !this.searchAdvice;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getByPage();
    },
    sortHandler(column) {
      // 排序查询
      console.log(column);
      const key = column.prop;
      const value = column.order;
      this.page.sorted = {};
      this.page.sorted[key] = value;
      this.getByPage();
    },
    // 跳转到调价
    tomMdifyPrice(row) {
      oilSiteOilsPriceApi.get(row.id).then((res) => {
        console.log("this.oilSiteOilsPrice", res.data);
        this.oilSiteOilsPrice = res.data;
        this.controlWindows.dialogAdjustPrice = true;
      });
    },
    toDelete(id) {
      // 删除
      this.$confirm("确定删除?", "提示", { type: "error" }).then(() => {
        oilSiteOilsPriceApi.deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    getByPage() {
      // 分页查询
      oilSiteOilsPriceApi.getDispatchPage(this.page).then((res) => {
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
      });
    },
    closeDialog() {
      this.recordDialog = false;
      this.importDialog = false; // 导入弹窗
      this.outPutDialog = false; // 导出弹窗
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  overflow-y: auto;
}

::v-deep.el-drawer {
  height: 100% !important;
}

.container {
  padding-top: 10px;
}

.handle-button-group {
  margin-bottom: 10px;
}

.page-div {
  // position: absolute;
  background: #fff;
  bottom: 0;
  // z-index: 4;
  min-width: 100%;
}
</style>