From 6dd00a42b1cf315525e69dc0ebb01ab86727c305 Mon Sep 17 00:00:00 2001
From: douqi <630797947@qq.com>
Date: Tue, 21 Feb 2023 13:13:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=B4=A2=E5=8A=A1=E4=B8=AD=E5=BF=83-?=
 =?UTF-8?q?=E5=85=AC=E5=8F=B8=E8=B4=A6=E6=88=B7=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E8=B4=A6=E6=88=B7=E7=AE=A1=E7=90=86=20=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/financialCenter/accountManagement.js  |  31 +
 .../accountManagement/components/recharge.vue |  81 ++
 .../accountManagement/index.vue               | 712 ++++++++----------
 3 files changed, 421 insertions(+), 403 deletions(-)
 create mode 100644 src/api/financialCenter/accountManagement.js
 create mode 100644 src/views/financialCenter/accountManagement/components/recharge.vue

diff --git a/src/api/financialCenter/accountManagement.js b/src/api/financialCenter/accountManagement.js
new file mode 100644
index 0000000..59ea848
--- /dev/null
+++ b/src/api/financialCenter/accountManagement.js
@@ -0,0 +1,31 @@
+import request from "utils/axios.js";
+// table
+const getByPage = (params) => {
+  return request.postJson(
+    "/oil-finance/oilCompanyAccount/getByPage",
+    params
+  );
+};
+//修改账户状态
+const updateAccountState = (params) => {
+  return request.postJson(
+    "/oil-finance/oilCompanyAccount/getByPage",
+    params
+  );
+};
+//详情
+const get = (id) => {
+  return request.get(`/oil-finance/oilCompanyAccount/get/${id}`);
+};
+// //详情
+// const getCompanyAccountRecord = (params) => {
+//   return request.postJson(
+//     "oil-finance/oilCompanyAccountRecord/getCompanyAccountRecord",
+//     params
+//   );
+// };
+export default {
+  getByPage,
+  updateAccountState,
+  get
+};
diff --git a/src/views/financialCenter/accountManagement/components/recharge.vue b/src/views/financialCenter/accountManagement/components/recharge.vue
new file mode 100644
index 0000000..5ce448c
--- /dev/null
+++ b/src/views/financialCenter/accountManagement/components/recharge.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-dialog
+    title="充值"
+    :visible="controlWindows.recharge"
+    width="30%"
+    :before-close="closeWindow"
+    @opened="openDrawer"
+  >
+    <div class="recharge.vue">
+      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+        <el-form-item label="成本价" prop="floorPrice">
+          <el-input
+            maxlength="50"
+            v-checkNum
+            v-model="form.floorPrice"
+            placeholder="请输入成本价"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="企业销售价" prop="salePrice2company">
+          <el-input
+            maxlength="50"
+            v-checkNum
+            v-model="form.salePrice2company"
+            placeholder="请输入企业销售价"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="controlWindows.recharge = false">取 消</el-button>
+      <el-button type="primary" @click="submit">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import serve from "api/financialCenter/accountManagement.js";
+
+export default {
+  props: {
+    controlWindows: Object,
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        floorPrice: [
+          { required: true, message: "请输入成本价", trigger: "blur" },
+        ],
+        salePrice2company: [
+          { required: true, message: "请输入企业销售价", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    openDrawer() {},
+    submit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          Object.assign(this.form, this.controlWindows.addInfo);
+          serve.modifyPrice(this.form).then((res) => {
+            this.$message.success(res.msg);
+            this.closeWindow();
+          });
+        }
+      });
+    },
+    closeWindow() {
+      this.form = {};
+      this.$emit("closeWindow");
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+        this.controlWindows.recharge = false;
+      });
+    },
+  },
+};
+</script>
+
+</style>
diff --git a/src/views/financialCenter/accountManagement/index.vue b/src/views/financialCenter/accountManagement/index.vue
index 7270f13..15c9cb5 100644
--- a/src/views/financialCenter/accountManagement/index.vue
+++ b/src/views/financialCenter/accountManagement/index.vue
@@ -2,25 +2,29 @@
   <div class="bill-details">
     <div class="frame">
       <!-- 公司名称 -->
-      <autocomplete
-        class="mr20"
-        :params="parameter.params"
-        :config="configAutocomplete"
-      />
+      <autocomplete class="mr20" :params="parameter.params" :config="configAutocomplete"/>
+      <!-- 总公司名称 -->
+      <autocomplete class="mr20" :params="parameter.params" :config="configAutocompleteSec"/>
 
-      <el-select
-        v-model="parameter.params.billType"
-        placeholder="交易类型"
-        clearable
-      >
+      <el-select v-model="parameter.params.accountState" placeholder="账户状态" clearable>
         <el-option
-          v-for="(item, index) in rechargeTypeEnum"
+          v-for="(item, index) in accountStateEnum"
           :key="index"
           :label="item.label"
           :value="item.value"
-        >
-        </el-option>
+        />
+      </el-select>
+
+      <el-select v-model="parameter.params.companyNature" placeholder="企业性质" clearable>
+        <el-option
+          v-for="(item, index) in companyNatureEnum"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
+      <!-- 业务负责人 -->
+      <autocomplete :params="parameter.params" :config="configAutocompleteBusinessLeader"/>
 
       <div class="buttons">
         <el-button icon="el-icon-search" @click="search">查询</el-button>
@@ -29,7 +33,9 @@
     </div>
     <div class="table">
       <div class="operation">
-        <el-button @click="addition">新增产品</el-button>
+        <el-button @click="accountTypeHandler(0)">禁用</el-button>
+        <el-button @click="accountTypeHandler(1)">启用</el-button>
+        <el-button @click="accountTypeHandler(-1)">冻结</el-button>
       </div>
       <el-table
         v-if="tableHeight"
@@ -39,436 +45,336 @@
         style="width: 100%"
       >
         >
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column prop="name" label="公司名称" show-overflow-tooltip>
-        </el-table-column>
-
-        <el-table-column label="交易类型/发生金额">
-          <template slot-scope="{ row }">
-            <p v-if="!/\W+/.test(row.billType)">
-              {{
-                rechargeTypeEnum.find((item) => item.value === row.billType)
-                  .label
-              }}
-            </p>
-            <p v-else>{{ row.billType }}</p>
-
-            <p>{{ row.occurTotalAmount }}</p>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="账户余额">
-          <template slot-scope="{ row }">
-            <p>
-              上次 <span>{{ row.lastBalance }}</span>
-            </p>
-            <p>
-              本次 <span>{{ row.currentBalance }}</span>
-            </p>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="充值余额">
-          <template slot-scope="{ row }">
-            <p>
-              上次 <span>{{ row.lastRechargeBalance }}</span>
-            </p>
-            <p>
-              本次 <span>{{ row.currentRechargeBalance }}</span>
-            </p>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="赊销余额">
+        <el-table-column type="selection" width="55"/>
+        <el-table-column prop="companyName" label="公司名称" minWidth="300">
           <template slot-scope="{ row }">
-            <p>
-              上次 <span>{{ row.lastChargeRechargeBalance }}</span>
-            </p>
-            <p>
-              本次 <span>{{ row.currentChargeRechargeBalance }}</span>
-            </p>
+            <span style='padding-left:8px;'>{{row.companyName}}</span>
+            <br/>
+            <span style='padding-left:8px;'>业务负责人:{{row.businessLeader}}</span>
           </template>
         </el-table-column>
-
-        <el-table-column label="充值返利余额">
+        <el-table-column label="企业性质" minWidth="120">
           <template slot-scope="{ row }">
-            <p>
-              上次 <span>{{ row.lastRechargeRebateBalance }}</span>
-            </p>
-            <p>
-              本次 <span>{{ row.currentRechargeRebateBalance }}</span>
-            </p>
+            {{companyNatureEnum.find((item) => item.value === row.companyNature).label}}
           </template>
         </el-table-column>
-
-        <el-table-column label="消费返利余额">
+        <el-table-column prop="totalBalance" label="公司企业总余额" minWidth="120"/>
+        <el-table-column label="司机油卡余额" minWidth="130">
           <template slot-scope="{ row }">
-            <p>
-              上次 <span>{{ row.lastConsumeRebateAmount }}</span>
-            </p>
-            <p>
-              本次 <span>{{ row.currentConsumeRebateAmount }}</span>
-            </p>
+            <span>外:{{row.outCountBalance}}</span>
+            <br/>
+            <span>自:{{row.inCountBalance}}</span>
           </template>
         </el-table-column>
+        <el-table-column prop="balance" label="账户总余额" minWidth="120"/>
+        <el-table-column prop="rechargeBalance" label="充值余额" minWidth="120"/>
+        <el-table-column prop="chargeRechargeBalance" label="赊销充值余额" minWidth="120"/>
+        <el-table-column prop="rechargeRebateBalance" label="充值返利余额" minWidth="120"/>
+        <el-table-column prop="consumeRebateBalance" label="消费返利余额" minWidth="120"/>
+        <el-table-column prop="totalChargeAmount" label="赊销待还" minWidth="120"/>
+        <el-table-column prop="createTime" label="创建时间" minWidth="200"/>
 
-        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
-
-        <el-table-column label="操作">
+        <el-table-column fixed="right" label="操作" width="150px">
           <template slot-scope="{ row }">
             <span class="el-dropdown-link" @click="detail(row)">详情</span>
+            <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="toRecharge(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>
       <!-- 分页 -->
-      <pagination :parameter="parameter" @searchAgain="getByPage" />
+      <pagination :parameter="parameter" @searchAgain="getByPage"/>
     </div>
-    <!-- 详情 -->
-    <el-drawer
-      title="详情"
-      direction="ltr"
-      size="60%"
-      :withHeader="false"
-      :visible="controlWindows.detail"
-    >
-      <general-details
-        title="详情"
-        :isHeader="true"
-        v-if="controlWindows.detail"
-        :sourceData="oilCompanyMatch"
-        :mappingData="mappingData"
-        @close="controlWindows.detail = false"
-      >
-        <template #balance>
-          <p class="ft14">
-            上次:<span>{{ oilCompanyMatch.lastBalance }}</span>
-          </p>
-          <p class="ft14">
-            本次:<span>{{ oilCompanyMatch.currentBalance }}</span>
-          </p>
-        </template>
-        <template #rechargeBalance>
-          <p class="ft14">
-            上次:<span>{{ oilCompanyMatch.lastRechargeBalance }}</span>
-          </p>
-          <p class="ft14">
-            本次:<span>{{ oilCompanyMatch.currentRechargeBalance }}</span>
-          </p>
-        </template>
-        <template #chargeRechargeBalance>
-          <p class="ft14">
-            上次:<span>{{ oilCompanyMatch.lastChargeRechargeBalance }}</span>
-          </p>
-          <p class="ft14">
-            本次:<span>{{ oilCompanyMatch.currentChargeRechargeBalance }}</span>
-          </p>
-        </template>
-        <template #rechargeRebateBalance>
-          <p class="ft14">
-            上次:<span>{{ oilCompanyMatch.lastRechargeRebateBalance }}</span>
-          </p>
-          <p class="ft14">
-            本次:<span>{{ oilCompanyMatch.currentRechargeRebateBalance }}</span>
-          </p>
-        </template>
-        <template #consumeRebateAmount>
-          <p class="ft14">
-            上次:<span>{{ oilCompanyMatch.lastConsumeRebateAmount }}</span>
-          </p>
-          <p class="ft14">
-            本次:<span>{{ oilCompanyMatch.currentConsumeRebateAmount }}</span>
-          </p>
-        </template>
-        <template #table>
-          <el-table :data="tableDataSec" style="width: 100%">
-            <el-table-column
-              prop="businessOrderId"
-              label="关联订单"
-            ></el-table-column>
-            <el-table-column label="交易类型">
-              <template slot-scope="{ row }">
-                <p v-if="!/\W+/.test(row.billType)">
-                  {{
-                    rechargeTypeEnum.find(
-                      (item) => item.value === row.billTypes
-                    ).label
-                  }}
-                </p>
-                <p v-else>
-                  {{ row.billTypes }}
-                </p>
-              </template>
-            </el-table-column>
-            <el-table-column prop="nickName" label="司机"></el-table-column>
-            <el-table-column
-              prop="plateNumber"
-              label="车牌号"
-            ></el-table-column>
-            <el-table-column
-              prop="payRealAmount"
-              label="订单金额"
-            ></el-table-column>
-            <el-table-column
-              prop="createTime"
-              label="创建时间"
-            ></el-table-column>
-          </el-table>
-        </template>
-      </general-details>
-    </el-drawer>
+
+    <!-- 添加充值 -->
+    <recharge :controlWindows="controlWindows" @closeWindow="closeDialog" />
+
   </div>
 </template>
 
 <script>
-import serve from "api/financialCenter/billDetails.js";
-import commonServe from "api/common.js";
+  import serve from 'api/financialCenter/accountManagement.js'
+  import commonServe from 'api/common.js'
 
-import autocomplete from "components/autocomplete/index.vue";
-import pagination from "components/pagination/index.vue";
-import generalDetails from "components/generalDetails/index.vue";
-export default {
-  components: {
-    pagination,
-    autocomplete,
-    generalDetails,
-  },
-  data() {
-    return {
-      controlWindows: {
-        detail: false,
-      },
-      tableDataSec: [],
-      tableHeight: 0,
-      tableData: [],
-      configAutocomplete: {
-        serveTarget: commonServe.getRefineryCompanyList,
-        autocompleteKey: "name",
-        labelKey: "name",
-        valueKey: "id",
-        placeholder: "企业名称",
-        querykey: "companyId",
-      },
-      parameter: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        params: {},
-      },
-      rechargeTypeEnum: [
-        {
-          label: "分油",
-          value: "SEPARATION_OIL",
-        },
-        {
-          label: "充值",
-          value: "RECHARGE",
-        },
-        {
-          label: "圈回",
-          value: "TURN",
-        },
-        {
-          label: "销账",
-          value: "REVOKE",
+  import recharge from "./components/recharge.vue";
+  import autocomplete from 'components/autocomplete/index.vue'
+  import pagination from 'components/pagination/index.vue'
+  import generalDetails from 'components/generalDetails/index.vue'
+
+  export default {
+    components: {
+      recharge,
+      pagination,
+      autocomplete,
+      generalDetails
+    },
+    data() {
+      return {
+        oilCompanyAccount: {},
+        controlWindows: {
+          detail: false,
+          recharge:false // 充值弹窗
         },
-        {
-          label: "赊销",
-          value: "CHARGE_SALES",
+        tableDataSec: [],
+        tableHeight: 0,
+        tableData: [],
+        multipleSelection: [],// 选择表格数据集合
+        configAutocomplete: {
+          serveTarget: commonServe.getRefineryCompanyList,
+          autocompleteKey: 'name',
+          labelKey: 'name',
+          valueKey: 'id',
+          placeholder: '企业名称',
+          querykey: 'companyId'
         },
-        {
-          label: "充值返利",
-          value: "RECHARGE_REBETE",
+        configAutocompleteSec: {
+          serveTarget: commonServe.getRefineryCompanyList,
+          autocompleteKey: 'name',
+          labelKey: 'name',
+          valueKey: 'id',
+          placeholder: '总公司名称',
+          querykey: 'name'
         },
-        {
-          label: "消费返利",
-          value: "CONSUME_REBATE",
+        configAutocompleteBusinessLeader: {
+          serveTarget: commonServe.liekQuery,
+          autocompleteKey: '',
+          labelKey: 'nickName',
+          valueKey: 'id',
+          placeholder: '业务负责人',
+          querykey: 'businessLeader'
         },
-      ],
-
-      oilCompanyMatch: {},
-      mappingData: [
-        {
-          carTitle: "企业账单明细详情",
-          carItems: [
-            { label: "企业名称", value: "name" },
-            { label: "发生金额", value: "occurTotalAmount" },
-            { label: "交易类型", value: "billType" },
-            { label: "交易时间", value: "createTime" },
-            { label: "账户余额（元）", value: "balance" },
-            { label: "充值余额（元）", value: "rechargeBalance" },
-            { label: "赊销余额（元）", value: "chargeRechargeBalance" },
-            { label: "充值返利余额（元）", value: "rechargeRebateBalance" },
-            { label: "消费返利余额（元）", value: "consumeRebateAmount" },
-            {
-              label: "赊销待还款金额（元）",
-              value: "currentTotalChargeAmount",
-            },
-            {
-              label: "累计返利总金额（元）",
-              value: "currentTotalRebateAmount",
-            },
-            {
-              label: "累计充值返利总金额（元）",
-              value: "currentTotalRechargeRebateAmount",
-            },
-            {
-              label: "累计消费返利总金额（元）",
-              value: "currentTotalConsumeRebateAmount",
-            },
-          ],
+        parameter: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+          params: {}
         },
-        {
-          carTitle: "账单关联订单",
-          carItems: [
-            {
-              value: "table",
-            },
-          ],
-        },
-      ],
-    };
-  },
-  created() {
-    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;
-      this.getByPage();
-    },
-    //table list
-    getByPage() {
-      serve.getByPage(this.parameter).then((res) => {
-        this.tableData = res.data.list;
-        this.parameter.total = res.data.totalCount;
-      });
+        accountStateEnum: [
+          {
+            label: '禁用',
+            value: 0
+          },
+          {
+            label: '启用',
+            value: 1
+          },
+          {
+            label: '冻结',
+            value: -1
+          }
+        ],
+        companyNatureEnum: [
+          {
+            label: '零售客户',
+            value: 0
+          },
+          {
+            label: '外请客户',
+            value: 1
+          },
+          {
+            label: '渠道客户',
+            value: 2
+          },
+          {
+            label: '存量客户',
+            value: 3
+          },
+          {
+            label: '批发客户',
+            value: 4
+          },
+          {
+            label: 'LNG客户',
+            value: 5
+          }
+          ,
+          {
+            label: '推广业务',
+            value: 6
+          }
+        ]
+      }
     },
-    //新增
-    addition() {
-      this.controlWindows.addInfo.title = "产品新增";
-      this.controlWindows.add = true;
+    created() {
+      this.getByPage()
     },
-    detail(row) {
-      let params = {
-        businessOrderId: row.businessOrderId,
-        billType:
-          row.billType == "分油" || row.billType == "SEPARATION_OIL"
-            ? "SEPARATION_OIL"
-            : "TURN",
-      };
-      serve.getCompanyAccountRecord(params).then((res) => {
-        this.tableDataSec = [];
-        this.oilCompanyMatch = row;
-        this.controlWindows.detail = true;
-      });
+    updated() {
+      this.$nextTick(() => {
+        this.$refs.multipleTable && this.$refs.multipleTable.doLayout()
+      })
     },
-    //重置
-    reset() {
-      this.parameter = {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        params: {},
-      };
+    mounted() {
+      this.$nextTick(() => {
+        this.heightHandle()
+      })
+      window.addEventListener(
+        'resize',
+        this.$utils.debounce(this.heightHandle, 500)
+      )
     },
+    methods: {
+      search() {
+        this.parameter.currentPage = 1
+        this.getByPage()
+      },
+      //table list
+      getByPage() {
+        serve.getByPage(this.parameter).then((res) => {
+          this.tableData = res.data.list
+          this.parameter.total = res.data.totalCount
+        })
+      },
 
-    // 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;
-    },
-    obtainElement(className) {
-      return document.documentElement.querySelector(className);
-    },
-  },
-};
+      //修改账户状态
+      accountTypeHandler(type) {
+        //0:禁用 1:启用 -1:冻结
+        if (!this.multipleSelection || this.multipleSelection.length < 1) {
+          this.$message.error('请选择需要操作的数据')
+          return
+        }
+        this.multipleSelection.forEach(item => {
+          item.accountState = type
+        })
+        serve.updateAccountState(this.multipleSelection).then(res => {
+          if (res.code === 20000) {
+            this.$message.success(res.msg)
+          }
+          this.getByPage()
+        })
+      },
+      detail(row) {
+        //TODO
+      },
+      toRecharge(id) {
+        // 跳转到充值
+        serve.get(id).then(res => {
+          this.oilCompanyAccount = res.data
+          this.controlWindows.recharge = true
+        })
+      },
+      //重置
+      reset() {
+        this.parameter = {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+          params: {}
+        }
+      },
+      closeDialog() {
+        this.controlWindows.recharge = false
+      },
+      // 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
+      },
+      obtainElement(className) {
+        return document.documentElement.querySelector(className)
+      }
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
-.bill-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;
-    }
-  }
+  .bill-details {
+    .frame {
+      margin: 20px;
+      padding: 20px;
+      border-radius: 6px;
+      border: 1px solid #e3e3e5;
+      background: #fff;
 
-  .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-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;
       }
     }
-    .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;
+    .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;
       }
     }
-    .el-icon-arrow-down {
-      font-size: 12px;
+
+    .ft14 {
+      font-size: 14px;
     }
   }
-  .ft14 {
-    font-size: 14px;
-  }
-}
 </style>