更新

src/views/financialCenter/accountManagement/index.vue

@@ -2,11 +2,23 @@
   <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"/>
+      <autocomplete
+        class="mr20"
+        :params="parameter.params"
+        :config="configAutocompleteSec"
+      />
 
-      <el-select v-model="parameter.params.accountState" placeholder="账户状态" clearable>
+      <el-select
+        v-model="parameter.params.accountState"
+        placeholder="账户状态"
+        clearable
+      >
         <el-option
           v-for="(item, index) in accountStateEnum"
           :key="index"
@@ -15,7 +27,11 @@
         />
       </el-select>
 
-      <el-select v-model="parameter.params.companyNature" placeholder="企业性质" clearable>
+      <el-select
+        v-model="parameter.params.companyNature"
+        placeholder="企业性质"
+        clearable
+      >
         <el-option
           v-for="(item, index) in companyNatureEnum"
           :key="index"
@@ -24,7 +40,10 @@
         />
       </el-select>
       <!-- 业务负责人 -->
-      <autocomplete :params="parameter.params" :config="configAutocompleteBusinessLeader"/>
+      <autocomplete
+        :params="parameter.params"
+        :config="configAutocompleteBusinessLeader"
+      />
 
       <div class="buttons">
         <el-button icon="el-icon-search" @click="search">查询</el-button>
@@ -45,51 +64,75 @@
         style="width: 100%"
       >
         >
-        <el-table-column type="selection" width="55"/>
+        <el-table-column type="selection" width="55" />
         <el-table-column prop="companyName" label="公司名称" minWidth="300">
           <template slot-scope="{ row }">
-            <span style='padding-left:8px;'>{{row.companyName}}</span>
-            <br/>
-            <span style='padding-left:8px;'>业务负责人:{{row.businessLeader}}</span>
+            <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="企业性质" minWidth="120">
           <template slot-scope="{ row }">
-            {{companyNatureEnum.find((item) => item.value === row.companyNature).label}}
+            {{
+              companyNatureEnum.find((item) => item.value === row.companyNature)
+                .label
+            }}
           </template>
         </el-table-column>
-        <el-table-column prop="totalBalance" label="公司企业总余额" minWidth="120"/>
+        <el-table-column
+          prop="totalBalance"
+          label="公司企业总余额"
+          minWidth="120"
+        />
         <el-table-column label="司机油卡余额" minWidth="130">
           <template slot-scope="{ row }">
-            <span>外:{{row.outCountBalance}}</span>
-            <br/>
-            <span>自:{{row.inCountBalance}}</span>
+            <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="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 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"/>
+                更多<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-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>
@@ -99,282 +142,280 @@
         </el-table-column>
       </el-table>
       <!-- 分页 -->
-      <pagination :parameter="parameter" @searchAgain="getByPage"/>
+      <pagination :parameter="parameter" @searchAgain="getByPage" />
     </div>
 
     <!-- 添加充值 -->
     <recharge :controlWindows="controlWindows" @closeWindow="closeDialog" />
-
   </div>
 </template>
 
 <script>
-  import serve from 'api/financialCenter/accountManagement.js'
-  import commonServe from 'api/common.js'
+import serve from "api/financialCenter/accountManagement.js";
+import commonServe from "api/common.js";
 
-  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'
+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
+export default {
+  components: {
+    recharge,
+    pagination,
+    autocomplete,
+    generalDetails,
+  },
+  data() {
+    return {
+      oilCompanyAccount: {},
+      controlWindows: {
+        detail: false,
+        recharge: false, // 充值弹窗
+      },
+      tableDataSec: [],
+      tableHeight: 0,
+      tableData: [],
+      multipleSelection: [], // 选择表格数据集合
+      configAutocomplete: {
+        serveTarget: commonServe.getRefineryCompanyList,
+        autocompleteKey: "name",
+        labelKey: "name",
+        valueKey: "id",
+        placeholder: "企业名称",
+        querykey: "companyId",
+      },
+      configAutocompleteSec: {
+        serveTarget: commonServe.getRefineryCompanyList,
+        autocompleteKey: "name",
+        labelKey: "name",
+        valueKey: "id",
+        placeholder: "总公司名称",
+        querykey: "name",
+      },
+      configAutocompleteBusinessLeader: {
+        serveTarget: commonServe.liekQuery,
+        autocompleteKey: "",
+        labelKey: "nickName",
+        valueKey: "id",
+        placeholder: "业务负责人",
+        querykey: "businessLeader",
+      },
+      parameter: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        params: {},
+      },
+      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,
+        },
+      ],
+    };
+  },
+  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();
     },
-    data() {
-      return {
-        oilCompanyAccount: {},
-        controlWindows: {
-          detail: false,
-          recharge:false // 充值弹窗
-        },
-        tableDataSec: [],
-        tableHeight: 0,
-        tableData: [],
-        multipleSelection: [],// 选择表格数据集合
-        configAutocomplete: {
-          serveTarget: commonServe.getRefineryCompanyList,
-          autocompleteKey: 'name',
-          labelKey: 'name',
-          valueKey: 'id',
-          placeholder: '企业名称',
-          querykey: 'companyId'
-        },
-        configAutocompleteSec: {
-          serveTarget: commonServe.getRefineryCompanyList,
-          autocompleteKey: 'name',
-          labelKey: 'name',
-          valueKey: 'id',
-          placeholder: '总公司名称',
-          querykey: 'name'
-        },
-        configAutocompleteBusinessLeader: {
-          serveTarget: commonServe.liekQuery,
-          autocompleteKey: '',
-          labelKey: 'nickName',
-          valueKey: 'id',
-          placeholder: '业务负责人',
-          querykey: 'businessLeader'
-        },
-        parameter: {
-          currentPage: 1,
-          pageSize: 10,
-          total: 0,
-          params: {}
-        },
-        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
-          }
-        ]
+    //table list
+    getByPage() {
+      serve.getByPage(this.parameter).then((res) => {
+        this.tableData = res.data.list;
+        this.parameter.total = res.data.totalCount;
+      });
+    },
+
+    //修改账户状态
+    accountTypeHandler(type) {
+      //0:禁用 1:启用 -1:冻结
+      if (!this.multipleSelection || this.multipleSelection.length < 1) {
+        this.$message.error("请选择需要操作的数据");
+        return;
       }
-    },
-    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
-        })
-      },
-
-      //修改账户状态
-      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.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)
-      }
-    }
-  }
+        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;
+.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;
-      }
+    .el-input,
+    .el-select {
+      width: 183px;
+      height: 40px;
     }
 
-    .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-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;
     }
 
-    .ft14 {
-      font-size: 14px;
+    .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;
+    }
+  }
+
+  .ft14 {
+    font-size: 14px;
+  }
+}
 </style>