refinery-admin/src/views/customerManagement/companyManagement/index.vue

<template>
  <div class="enterprise-recharge-details">
    <div class="frame">
      <el-form :model="parameter.params" :inline="true">
        <!-- 公司名称 -->
        <autocomplete
          class="mr20"
          :params="parameter.params"
          :config="configAutocomplete"
        />
        <el-form-item>
          <el-autocomplete
            v-model="parameter.params.name"
            placeholder="总公司名称"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            filterable
            remote
            reserve-keyword
            @keyup.enter.native="getByPage"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="parameter.params.parentMark"
            placeholder="是否为主体公司"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="主体公司" value="0" />
            <el-option label="分公司" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="parameter.params.companyNature"
            placeholder="企业性质"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="零售客户" value="0" />
            <el-option label="外请客户" value="1" />
            <el-option label="渠道客户" value="2" />
            <el-option label="存量客户" value="3" />
            <el-option label="批发客户" value="4" />
            <el-option label="LNG客户" value="5" />
            <el-option label="推广业务" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="parameter.params.enableMark"
            placeholder="启用标识"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="禁用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="parameter.params.auditMark"
            placeholder="审核标识"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="未提交" value="0" />
            <el-option label="审核通过" value="1" />
            <el-option label="提交待审核" value="2" />
            <el-option label="审核不通过" value="-1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="parameter.params.companyType"
            placeholder="账户类型"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="柴油账户" value="0" />
            <el-option label="LNG账户" value="2" />
            <el-option label="汽油账户" value="1" />
            <el-option label="尿素账户" value="3" />
            <el-option label="油批账户" value="4" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="parameter.params.businessLeader"
            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-select
            v-model="parameter.params.companyDockType"
            placeholder="公司对接类型"
            clearable
            @keyup.enter.native="getByPage"
          >
            <el-option label="对接客户" :value="0" />
            <el-option label="平台客户" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="buttons">
        <el-button
          v-permission="['company:info:add']"
          class="group-item"
          type="primary"
          :size="$store.getters.size"
          @click="toAdd"
        >
          <svg-icon icon-class="iconxinzeng" />
          <span class="padding-left-xs">添加</span>
        </el-button>
        <el-button icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation"></div>
      <!-- 列表开始 -->
      <el-table
        :max-height="tableHeight"
        stripe
        :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" />

        <el-table-column prop="name" label="企业名称" width="200">
          <template slot-scope="{ row }">
            <div class="display: flex">
              <el-tag v-if="row.parentMark === 0" effect="dark">总公司</el-tag>
              <el-tag v-else effect="dark">分公司</el-tag>
              <div>
                <span> {{ row.name }}<br /> </span>
                <span> NO:{{ row.id }} </span>
              </div>
            </div>
          </template>
        </el-table-column>
        // TODO
        <el-table-column label="加价策略">
          <template slot-scope="{ row }">
            <p>
              {{ row.oilsPriceStrategy === "1" ? "费率" : "增减" }}:{{
                row.oilsPriceScale
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="consumRebateStrategy" label="折返策略">
          <template slot-scope="{ row }">
            <p
              v-if="
                row.consumRebateStrategy == 'TYFL' ||
                row.consumRebateStrategy == 'SITE_lEVEL'
              "
            >
              <span>{{
                row.consumRebateStrategy == "TYFL" ? "统一费率" : "油站等级"
              }}</span>
              <span>{{
                row.consumRebateScale ? row.consumRebateScale : "0"
              }}</span>
            </p>
            <p v-if="row.consumRebateStrategy == 'TYSSFL'">
              {{ row.consumRebateStrategy == "TYSSFL" ? "统一升数" : "未知" }}
              <span>{{
                row.consumRebateScale ? row.consumRebateScale + "元/L" : "0"
              }}</span>
            </p>
            <p
              v-if="
                row.consumRebateStrategy != 'TYFL' &&
                row.consumRebateStrategy != 'SITE_lEVEL' &&
                row.consumRebateStrategy != 'TYSSFL'
              "
            >
              暂无
            </p>
          </template>
        </el-table-column>
        <el-table-column label="企业性质">
          <template slot-scope="{ row }">
            {{
              row.companyNature === 0
                ? "零售客户"
                : row.companyNature === 1
                ? "外请客户"
                : row.companyNature === 2
                ? "渠道客户"
                : row.companyNature === 3
                ? "存量客户"
                : row.companyNature === 4
                ? "批发客户"
                : row.companyNature === 5
                ? "LNG客户"
                : "推广业务"
            }}
          </template>
        </el-table-column>
        <el-table-column label="账户类型">
          <template slot-scope="{ row }">
            {{
              row.companyType === "0"
                ? "柴油账户"
                : row.companyType === "1"
                ? "汽油账户"
                : row.companyType === "2"
                ? "LNG账户"
                : row.companyType === "3"
                ? "尿素账户"
                : "油批账户"
            }}
          </template>
        </el-table-column>
        <el-table-column label="公司对接类型">
          <template slot-scope="{ row }">
            {{
              row.companyDockType === 0
                ? "对接客户"
                : row.companyDockType === 1
                ? "平台客户"
                : "暂无"
            }}
          </template>
        </el-table-column>
        <el-table-column label="启用状态">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.enableMark"
              :active-value="1"
              :inactive-value="0"
              @change="enableMarkClike(row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="联动分油">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.shareDistribute"
              active-color="#13ce66"
              inactive-color="row.parentMark == 0 ? '#999' : '#ff4949'"
              :active-value="1"
              :inactive-value="0"
              :disabled="row.parentMark == 0"
              @change="enableMarkOpem(row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column lable="审核标识">
          <template slot-scope="{ row }">
            <el-tag v-if="row.auditMark === 0" type="info" effect="dark"
              >未提交</el-tag
            >
            <el-tag v-if="row.auditMark === 1" type="success" effect="dark"
              >审核通过</el-tag
            >
            <el-tag v-if="row.auditMark === 2" type="warning"
              >提交待审核</el-tag
            >
            <el-tag v-if="row.auditMark > 2 && row.auditMark < 0" type="danger"
              >审核不通过</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="企业负责人">
          <template slot-scope="{ row }">
            {{ row.userName ? row.userName : "企业负责人" }} <br />
            {{ row.phone ? row.phone : "暂无电话" }}
          </template>
        </el-table-column>
        <el-table-column label="企业负责人">
          <template slot-scope="{ row }">
            {{ row.userName ? row.userName : "企业负责人" }} <br />
            {{ row.phone ? row.phone : "暂无电话" }}
          </template>
        </el-table-column>
        <el-table-column label="创建信息">
          <template slot-scope="{ row }">
            {{ row.createUserName ? row.createUserName : "创建人" }} <br />
            {{ row.createTime ? row.createTime : "创建时间" }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180px"
          align="center"
        >
          <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-button
              @click="codeFn(scope.row)"
              :size="$store.getters.size"
              type="text"
              icon="el-icon-oilEwm"
            >
            </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 @click.native="toUpdate(scope.row.id)">
                  <el-button
                    v-permission="['company:info:base']"
                    :size="$store.getters.size"
                    type="text"
                  >
                    <svg-icon icon-class="iconicon-" />
                    基础资料
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.auditMark === 0"
                  @click.native="toAddAuth(scope.row.id)"
                >
                  <el-button
                    v-permission="['company:info:auth']"
                    :size="$store.getters.size"
                    type="text"
                  >
                    <svg-icon icon-class="iconicon-" />
                    认证信息
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="scope.row.auditMark !== 0"
                  @click.native="toUpdateAuth(scope.row.id)"
                >
                  <el-button
                    v-permission="['company:info:auth']"
                    :size="$store.getters.size"
                    type="text"
                  >
                    <svg-icon icon-class="iconicon-" />
                    认证信息
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item @click.native="toBankAuth(scope.row)">
                  <el-button
                    v-permission="['company:info:auth']"
                    :size="$store.getters.size"
                    type="text"
                  >
                    <svg-icon icon-class="iconicon-" />
                    银行信息
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item @click.native="toFinance(scope.row.id)">
                  <el-button
                    v-permission="['company:info:finance']"
                    :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>
      <!-- 分页组件结束 -->
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible.sync="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #offlineTransactionProof>
          <el-image
            style="width: 100px; height: 100px"
            :src="oilCompanyMatch.offlineTransactionProof"
          />
        </template>
      </general-details>
    </el-drawer>

    <!-- 添加弹窗 -->
    <el-dialog
      v-el-drag-dialog
      title="添加"
      :visible.sync="addDialog"
      width="55%"
    >
      <OilCompanyInfoAdd
        v-if="addDialog"
        @getByPage="getByPage"
        @closeDialog="closeDialog"
      />
    </el-dialog>

    <!-- 添加认证信息弹窗 -->
    <el-drawer :visible.sync="addAuthDialog" size="70%">
      <OilCompanyAuthAdd
        v-if="addAuthDialog"
        :oil-company-info="oilCompanyInfo"
        @getByPage="getByPage"
        @closeDialog="closeDialog"
      />
    </el-drawer>
  </div>
</template>

<script>
import OilCompanyInfoAdd from "@/views/customerManagement/companyManagement/OilCompanyInfoAdd";
import serve from "api/financialCenter/enterpriseRechargeDetails.js";
import commonServe from "api/common.js";

import oilCompanyInfoApi from "@/api/customerManagement/oilCompanyInfo";

import autocomplete from "components/autocomplete/index.vue";
import pagination from "components/pagination/index.vue";
import generalDetails from "components/generalDetails/index.vue";

import {
  rechargeTypeEnum,
  rechargeStatusEnum,
  repaymentExamineEnum,
} from "utils/dataType.js";

export default {
  components: {
    OilCompanyInfoAdd,
    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      // 部门树选项
      deptOptions: [],
      deptDataList: {
        companyIds: [],
      },
      rowData: null,
      showCode: false,
      bankFinanceDialog: false,
      syncDialog: false,
      output: {
        outputType: 4, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
        startPage: 1, // 导出开始页
        endPage: 1, // 导出结束页
        pageSize: 20, // 每页条数
      },
      queryCompanyList: [],
      userList: [],
      piliangDialog: false,
      updateFinanceDialog: false, // 修改财务信息弹窗
      BatchModifyingDialog: false, // 批量修改策略比例
      oilCompanyAuth: {},
      oilCompanyFinance: {},
      addFinanceDialog: false, // 添加财务信息弹窗
      updateAuthDialog: false, // 修改认证信息弹窗
      addAuthDialog: false, // 添加认证信息弹窗
      multipleSelection: [], // 选择表格数据集合
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      page: {
        pageSize: 20, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {
          createTime: "desc",
        },
        columns: [],
      },
      tableHeight: document.documentElement.clientHeight - 300 - 60,
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 20, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
        list: [],
      },
      tableColumns: [],
      // 查询参数
      queryParams: {},
      addDialog: false, // 添加弹窗
      updateDialog: false, // 修改弹窗
      oilCompanyInfo: {},
      oilCompanyInfoId: {
        id: "",
        list: [],
      },
      restaurants: [], // 企业名称搜索列表
      valColumn: [
        "name",
        "abbreviaName",
        "companyNature",
        "parentMark",
        "enableMark",
        "auditMark",
        "userName",
        "createUserName",
        "createTime",
        "auditUserName",
        "auditTime",
        "updateUserName",
        "updateTime",
      ],
      headers: [
        "企业名称",
        "企业简称",
        "企业性质",
        "公司性质",
        "启用状态",
        "审核标识",
        "企业负责人",
        "创建人",
        "创建时间",
        "审核人",
        "审核时间",
        "修改人",
        "修改时间",
      ],

      rechargeTypeEnum: rechargeTypeEnum,
      rechargeStatusEnum: rechargeStatusEnum,
      repaymentExamineEnum: repaymentExamineEnum,
      controlWindows: {
        detail: false,
      },
      datetime: [],
      tableData: [],
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
      },
      configAutocompleteSec: {
        serveTarget: commonServe.liekQuery,
        autocompleteKey: "",
        labelKey: "nickName",
        valueKey: "id",
        placeholder: "业务负责人",
        querykey: "businessLeader",
      },
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      LoopBackTypeEnum: [
        {
          label: "充值圈回",
          value: 1,
        },
        {
          label: "赊销圈回",
          value: 2,
        },
        {
          label: "充值返利圈回",
          value: 3,
        },
        {
          label: "消费返利圈回",
          value: 4,
        },
      ],
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "",
          carItems: [
            { label: "ID", value: "id" },
            { label: "交易类型", value: "transactionType" },
            { label: "交易状态", value: "transactionState" },
            { label: "交易金额", value: "transactionAmount" },
            { label: "充值返利比例", value: "rechargeRebate" },
            { label: "充值返利金额", value: "rechargeRebateAmount" },
            { label: "线下汇款公司账户", value: "offlinePaymentCompany" },
            { label: "线下交易发起时间", value: "offlineStartTime" },
            { label: "线下交易完成时间", value: "offlineCompleteTime" },
            { label: "线下交易凭证", value: "offlineTransactionProof" },
            { label: "交易审核标识", value: "auditMark" },
            { label: "审核人", value: "auditUserName" },
            { label: "交易说明", value: "reverseRemark" },
            { label: "审核时间", value: "auditTime" },
            { label: "审核系统来源", value: "auditSource" },
            { label: "赊销还款审核", value: "chargeSalesAuditMark" },
            { label: "赊销还款审核人", value: "chargeSalesAuditUser" },
            { label: "赊销还款审核时间", value: "chargeSalesAuditTime" },
            { label: "赊销还款审核来源", value: "chargeSalesAuditSource" },
            { label: "创建用户", value: "createUserName" },
            { label: "创建时间", value: "createTime" },
            { label: "创建数据来源", value: "createSource" },
            { label: "企业收款账户", value: "internalCompanyName" },
            { label: "开户行", value: "bankDeposit" },
            { label: "银行卡号", value: "bankCardNo" },
          ],
        },
        {
          carTitle: "账户信息",
          carItems: [
            { label: "账户总余额", value: "balance" },
            { label: "待还总金额", value: "totalChargeAmount" },
            { label: "账户状态", value: "accountState" },
            { label: "账户类型", value: "accountType" },
            { label: "账户充值余额", value: "rechargeBalance" },
            { label: "赊销充值余额", value: "chargeRechargeBalance" },
            { label: "充值返利余额", value: "rechargeRebateBalance" },
            { label: "消费返利余额", value: "consumeRebateBalance" },
            { label: "累计充值金额", value: "totalRechargeAmount" },
            { label: "累计赊销充值金额", value: "totalChargeRechargeAmount" },
            { label: "累计充值返利金额", value: "totalRechargeRebateAmount" },
            { label: "累计消费返利金额", value: "totalConsumeRebateAmount" },
          ],
        },
      ],
    };
  },
  created() {
    this.initDateTime();
    this.getByPage();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  methods: {
    search() {
      this.parameter.currentPage = 1;
      console.log("111111111111111111111");
      console.log(this.parameter);
      this.getByPage();
    },
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
      this.addAuthDialog = false;
      this.updateAuthDialog = false;
      this.addFinanceDialog = false;
      this.updateFinanceDialog = false;
      this.piliangDialog = false;
      this.BatchModifyingDialog = false;
      this.showTableDrawer = false;
      this.bankFinanceDialog = false;
      this.syncDialog = false;
    },
    enableMarkOpem(row) {
      // 启用禁用点击
      const data = {
        id: row.id,
        shareDistribute: row.shareDistribute,
      };
      oilCompanyInfoApi.openShareDistribute(data).then((res) => {
        if (res.code === 20000) {
          this.$message.success(res.msg);
        }
        this.getByPage();
      });
    },
    getByPage() {
      oilCompanyInfoApi.getByPage(this.parameter).then((res) => {
        this.dataPage.list = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
      console.log(this.tableData);
    },
    //新增
    addition() {
      this.controlWindows.addInfo.title = "产品新增";
      this.controlWindows.add = true;
    },
    // detail(row) {
    //   Promise.all([
    //     serve.get(row.id),
    //     serve.getByCompanyId(row.companyId),
    //   ]).then(([firstRes, secondRes]) => {
    //     this.oilCompanyMatch = { ...firstRes.data, ...secondRes.data };

    //     console.log("this.oilCompanyMatch", this.oilCompanyMatch);
    //     this.controlWindows.detail = true;
    //   });
    // },
    // 启用禁用点击
    enableMarkClike(row) {
      console.log("111111111111111111111");
      const data = [row];
      oilCompanyInfoApi.updateBatchEnable(data).then((res) => {
        if (res.code === 20000) {
          this.$message.success(res.msg);
        }
        this.getByPage();
      });
    },
    //重置
    reset() {
      this.parameter = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      };
      this.initDateTime();
    },
    // init时间
    initDateTime() {
      let now = new Date().getTime();
      let beforeDay30 = now - 1000 * 60 * 60 * 24 * 30;
      let nowRes = this.$utils.parseTime(now);
      let beforeDay30Res = this.$utils.parseTime(beforeDay30);
      let { y, M, d } = nowRes;
      let { y: beforey, M: beforeM, d: befored } = beforeDay30Res;
      this.datetime = [
        `${beforey}-${beforeM}-${befored} 00:00:00`,
        `${y}-${M}-${d} 23:59:59`,
      ];
      this.changeDateTime(this.datetime);
    },
    changeDateTime(val) {
      if (val) {
        this.parameter.params.createTimeStart = val[0];
        this.parameter.params.createTimeEnd = val[1];
      }
      console.log(val);
    },
    // table height
    heightHandle() {
      let bodyHeight = document.body.clientHeight;
      let frameHeight = this.obtainElement(".frame").clientHeight;
      let operationHeight = this.obtainElement(".operation").clientHeight;
      let paginationHeight = this.obtainElement(".el-pagination").clientHeight;
      this.tableHeight =
        bodyHeight - frameHeight - operationHeight - paginationHeight - 145;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getByPage();
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    sortHandler(column) {
      // 排序查询
      console.log(column.column.sortable);
      const key = column.column.sortable;
      const value = column.order;
      this.page.sorted = {};
      this.page.sorted[key] = value;
      this.getByPage();
    },
    toAdd() {
      // 跳转到添加
      this.oilCompanyInfo = {};
      this.addDialog = true;
    },
    toAddAuth(id) {
      // 跳转添加认证信息
      oilCompanyInfoApi.get(id).then((res) => {
        this.oilCompanyInfo = res.data;
        this.addAuthDialog = true;
      });
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise-recharge-details {
  .frame {
    margin: 20px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;

    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }

    .el-autocomplete + .el-input,
    .el-input + .el-autocomplete,
    .el-autocomplete + .el-select,
    .el-input + .el-input,
    .el-input + .el-select,
    .el-select + .el-select,
    .el-select + .el-input {
      margin-right: 20px;
      margin-bottom: 15px;
    }

    .mr20 {
      margin-right: 20px;
    }

    .buttons {
      text-align: right;
    }
  }

  .table {
    overflow: hidden;
    margin: 0 20px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e3e5;

    > .operation {
      box-sizing: content-box;
      padding: 15px;
    }

    .gray {
      color: #999;

      span {
        color: #333;
      }
    }

    .el-table {
      margin-bottom: 20px;
      border-radius: 10px 10px 0px 0px;
    }

    .el-dropdown-link {
      margin-right: 10px;
      cursor: pointer;
      color: #409eff;

      &.special {
        margin-right: 0;
      }
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>