From 8e1b1f485b5dd77858d63c22fdc244b4e2db5872 Mon Sep 17 00:00:00 2001
From: zhangyouji <zhangyouji@sdxkhlw.cn>
Date: Wed, 24 May 2023 10:44:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=BC=E5=8E=82=E8=B4=A6=E6=88=B7=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/refineryAccount/accountDetails.js     |  24 ++
 .../components/generalDetails.vue             | 295 ++++++++++++++++
 .../refineryAccount/accountDetails/index.vue  | 317 ++++++++++++++++++
 3 files changed, 636 insertions(+)
 create mode 100644 src/api/refineryAccount/accountDetails.js
 create mode 100644 src/views/refineryAccount/accountDetails/components/generalDetails.vue
 create mode 100644 src/views/refineryAccount/accountDetails/index.vue

diff --git a/src/api/refineryAccount/accountDetails.js b/src/api/refineryAccount/accountDetails.js
new file mode 100644
index 0000000..a974827
--- /dev/null
+++ b/src/api/refineryAccount/accountDetails.js
@@ -0,0 +1,24 @@
+import request from 'utils/axios.js'
+// table
+const getByPage = params => {
+  return request.postJson('/oil-refinery/xoilRefineryAccountRecord/getByPage', params)
+}
+// 炼厂名称
+const getLikeByName = (params = {}) => {
+  return request.postJson('/oil-refinery/xoilRefineryAccountRecord/getLikeByNameOrId', params)
+}
+// 炼厂账户名称
+const getLikeRefineryAccount = (params = {}) => {
+  return request.postJson('/oil-refinery/xoilRefineryAccountRecord/getLikeRefineryAccount', params)
+}
+// 详情
+const getById = query => {
+  return request.get(`oil-refinery/xoilRefineryAccountRecord/getById/${query}`)
+}
+
+export default {
+  getByPage,
+  getLikeByName,
+  getLikeRefineryAccount,
+  getById
+}
diff --git a/src/views/refineryAccount/accountDetails/components/generalDetails.vue b/src/views/refineryAccount/accountDetails/components/generalDetails.vue
new file mode 100644
index 0000000..8cb3f0d
--- /dev/null
+++ b/src/views/refineryAccount/accountDetails/components/generalDetails.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="generalDetails_body pft14">
+    <div class="generalDetails_header" v-if="isHeader">
+      <slot name="generalDetails_header">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="title_bottom">
+      <slot name="title_bottom"></slot>
+    </div>
+    <div class="generalDetails_card_container">
+      <div v-for="(item, index) in dataPage" :key="index">
+        <el-card class="generalDetails_card">
+          <div @click="isShow(item)" class="generalDetails_card_header" slot="header">
+            <div>
+              <span class="generalDetails-card-header-icon">
+                <svg-icon style="color: #118dde" :icon-class="item.iconClass" />
+              </span>
+              <span class="generalDetails-card-header-text">{{ item.title }}</span>
+            </div>
+            <div class="fold">
+              <i :style="{ transform: `rotate(${item.isFold ? 0 : 180}deg)` }" class="el-icon-arrow-down generalDetails_card_arrow_down"></i>
+            </div>
+          </div>
+          <div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
+            <template v-if="item.listData.length && item.listData[0].field !== 'table'">
+              <div v-for="(i, x) in item.listData" :key="x" class="cell-item">
+                <span :title="i.remark" class="color-999 test-tst">
+                  {{ i.label }}
+                  <i v-if="i.remark" class="header-icon el-icon-info"></i>
+                  <i @click="isCopy($event)" v-if="i.isCopy" class="el-icon-document-copy"></i>
+                </span>
+                <br />
+                <slot class="inner-data" :name="`${i.field}`">
+                  <span class="inner-data">{{ i.value }}</span>
+                </slot>
+              </div>
+            </template>
+
+            <slot v-else name="table"> </slot>
+          </div>
+        </el-card>
+        <div>
+          <slot :name="`${index}card_bottom`"></slot>
+        </div>
+      </div>
+      <div v-for="(item, index) in dataPage2" :key="index + 'i'">
+        <el-card class="generalDetails_card">
+          <div @click="isShow2(item)" class="generalDetails_card_header" slot="header">
+            <div>
+              <span class="generalDetails-card-header-icon">
+                <svg-icon style="color: #118dde" :icon-class="item.iconClass" />
+              </span>
+              <span class="generalDetails-card-header-text">{{ item.title }}</span>
+            </div>
+            <div class="fold">
+              <i :style="{ transform: `rotate(${item.isFold ? 0 : 180}deg)` }" class="el-icon-arrow-down generalDetails_card_arrow_down"></i>
+            </div>
+          </div>
+          <div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
+            <template v-if="item.listData.length && item.listData[0].field !== 'table'">
+              <div v-for="(i, x) in item.listData" :key="x" class="cell-item">
+                <span :title="i.remark" class="color-999 test-tst">
+                  {{ i.label }}
+                  <i v-if="i.remark" class="header-icon el-icon-info"></i>
+                  <i @click="isCopy($event)" v-if="i.isCopy" class="el-icon-document-copy"></i>
+                </span>
+                <br />
+                <slot class="inner-data" :name="`${i.field}`">
+                  <span class="inner-data">{{ i.value }}</span>
+                </slot>
+              </div>
+            </template>
+
+            <slot v-else name="table"> </slot>
+          </div>
+        </el-card>
+        <div>
+          <slot :name="`${index}card_bottom`"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="generalDetails_footer">
+      <slot name="footer">
+        <el-button @click="close" type="primary">关闭</el-button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import handleClipboard from '@/utils/clipboard.js'
+export default {
+  name: 'generalDetailsAcc',
+  props: {
+    sourceData: {
+      type: Array,
+      default: () => []
+    },
+    mappingData: {
+      type: Array,
+      default: () => []
+    },
+    mappingData2: {
+      type: Array,
+      default: () => []
+    },
+    isHeader: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '详情'
+    }
+  },
+  data() {
+    return {
+      dataPage: [],
+      dataPage2: []
+    }
+  },
+  created() {
+    this.sourceData && this.mappingData.length && this.init()
+    this.sourceData && this.mappingData2.length && this.init2()
+  },
+  methods: {
+    isShow(item) {
+      item.isFold = !item.isFold
+    },
+    isShow2(item) {
+      item.isFold = !item.isFold
+    },
+    isCopy(event) {
+      handleClipboard(event)
+    },
+    close() {
+      this.$emit('close')
+    },
+    init() {
+      this.dataPage = this.mappingData.map((mappingDataItem, mappingDataIndex) => {
+        let shineData = this.sourceData[mappingDataIndex] || {}
+        return {
+          title: mappingDataItem.carTitle,
+          iconClass: mappingDataItem.iconClass || 'iconjichuziliao',
+          isFold: mappingDataItem.isFold || true,
+          listData: mappingDataItem.carItems.map(carItem => {
+            let value =
+              (typeof carItem.value == 'function' && carItem.value(shineData)) || shineData[carItem.value] == 0
+                ? 0
+                : shineData[carItem.value] || carItem.fieldDefault || ''
+            return {
+              label: carItem.label,
+              value: value,
+              field: carItem.value,
+              remark: carItem.remark,
+              isCopy: carItem.isCopy || false
+            }
+          })
+        }
+      })
+    },
+    init2() {
+      this.dataPage2 = this.mappingData2.map((mappingDataItem, mappingDataIndex) => {
+        let shineData2 = this.sourceData[mappingDataIndex] || {}
+        return {
+          title: mappingDataItem.carTitle,
+          iconClass: mappingDataItem.iconClass || 'iconjichuziliao',
+          isFold: mappingDataItem.isFold || true,
+          listData: mappingDataItem.carItems.map(carItem => {
+            let value =
+              (typeof carItem.value == 'function' && carItem.value(shineData2)) || shineData2[carItem.value] == 0
+                ? 0
+                : shineData2[carItem.value] || carItem.fieldDefault || ''
+            return {
+              label: carItem.label,
+              value: value,
+              field: carItem.value,
+              remark: carItem.remark,
+              isCopy: carItem.isCopy || false
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title_bottom {
+  margin-top: 20px;
+}
+.fold {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1;
+}
+
+.generalDetails_card_arrow_down {
+  transition: all 0.9s;
+}
+
+.generalDetails_card_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+title {
+  background-color: black !important;
+}
+
+.inner-data {
+  font-size: 14px;
+}
+
+.my-cell {
+  color: #666;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  float: left;
+  flex-wrap: wrap;
+  max-height: 100vh;
+  overflow: hidden;
+  transition: all 0.9s;
+}
+
+.color-999 {
+  color: #999;
+  font-size: 11px;
+  padding-right: 2rem;
+  padding-bottom: 8px !important;
+  display: inline-block;
+  min-width: 5rem;
+}
+
+.cell-item {
+  width: calc(100% / 4);
+  margin-bottom: 20px;
+}
+
+.generalDetails_card {
+  margin-bottom: 25px;
+  position: relative;
+}
+
+.generalDetails-card-header-icon {
+  font-size: 24px;
+}
+
+.generalDetails-card-header-text {
+  font-weight: bold;
+}
+
+.generalDetails_footer {
+  min-height: 50px;
+  position: sticky;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  border-top: solid 1px #e5e5e5;
+}
+
+.generalDetails_header {
+  min-height: 50px;
+  width: 100%;
+  display: flex;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  border-bottom: solid 1px #e5e5e5;
+  font-weight: bold;
+}
+
+.generalDetails_card_container {
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+}
+
+.generalDetails_body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+</style>
diff --git a/src/views/refineryAccount/accountDetails/index.vue b/src/views/refineryAccount/accountDetails/index.vue
new file mode 100644
index 0000000..919d83e
--- /dev/null
+++ b/src/views/refineryAccount/accountDetails/index.vue
@@ -0,0 +1,317 @@
+<template>
+  <div class="order">
+    <div class="frame">
+      <autocomplete class="mr20" :params="parameter.params" :config="configAutocomplete" />
+      <autocomplete class="mr20" :params="parameter.params" :config="configAutocompleteaccount" />
+      <el-select v-model="parameter.params.refineryType" placeholder="炼厂类型" clearable>
+        <el-option v-for="item in refineryTypeEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
+      <el-input v-model="parameter.params.creater" placeholder="创建人姓名或手机号" clearable></el-input>
+      <el-select v-model="parameter.params.transactionType" placeholder="交易类型" clearable>
+        <el-option v-for="(item, index) in rechargeTypeEnum" :key="index" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
+      <el-date-picker
+        v-model="datetime"
+        type="datetimerange"
+        align="right"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        :default-time="['00:00:00', '23:59:59']"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        @change="changeDateTime"
+      >
+      </el-date-picker>
+      <div class="buttons">
+        <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 v-if="tableHeight" ref="multipleTable" :height="tableHeight" :data="tableData" style="width: 100%">
+        <el-table-column label="序号" type="index" :index="indexMethod" align="center" />
+        <el-table-column prop="refineryName" label="炼厂信息" show-overflow-tooltip align="center" min-width="180">
+          <template slot-scope="{ row }">
+            <p>{{ row.refineryName }}</p>
+            <p>{{ row.refineryId }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="transactionType" label="交易类型" show-overflow-tooltip align="center">
+          <template slot-scope="{ row }">
+            <p>
+              {{
+                row.transactionType === 'TURN'
+                  ? LoopBackTypeEnum.find(item => item.value == row.turnType).label
+                  : rechargeTypeEnum.find(item => item.value == row.transactionType).label
+              }}
+            </p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="transactionAmount" label="发生金额" align="center"></el-table-column>
+        <el-table-column prop="balance" label="账户余额" align="center">
+          <template slot-scope="{ row }">
+            <p>上次：{{ row.lastBalance }}</p>
+            <p>当前：{{ row.currentBalance }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="rechargeBalance" label="充值余额" align="center">
+          <template slot-scope="{ row }">
+            <p>上次：{{ row.lastRechargeBalance }}</p>
+            <p>当前：{{ row.currentRechargeBalance }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalRechargeBalance" label="创建信息" align="center" min-width="180">
+          <template slot-scope="{ row }">
+            <p>{{ row.userName }}</p>
+            <p>{{ row.createTime }}</p>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="100">
+          <template slot-scope="{ row }">
+            <el-link type="primary" :underline="false" @click="detailBefore(row)">详情</el-link>
+          </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
+        class="pft14"
+        title="详情"
+        :isHeader="true"
+        v-if="controlWindows.detail"
+        :sourceData="oilCompanyMatch"
+        :mappingData="mappingData"
+        :mappingData2="mappingData2"
+        @close="controlWindows.detail = false"
+      >
+        <template #refineryType>
+          <p>
+            {{ refineryTypeEnum.find(item => item.value == oilCompanyMatch[0].accountType).label }}
+          </p>
+        </template>
+        <template #accountStatus>
+          <p>
+            {{ oilCompanyMatch[0].accountStatus === 'ENABLE' ? '启用' : '禁用' }}
+          </p>
+        </template>
+      </general-details>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import serve from 'api/refineryAccount/accountDetails.js'
+
+import pagination from 'components/pagination/index.vue'
+import autocomplete from 'components/autocomplete/index.vue'
+import generalDetails from './components/generalDetails.vue'
+
+import { rechargeTypeEnum, refineryTypeEnum, refineryAccountTypeEnum } from 'utils/dataType.js'
+
+export default {
+  components: {
+    pagination,
+    autocomplete,
+    generalDetails
+  },
+  data() {
+    return {
+      rechargeTypeEnum: rechargeTypeEnum,
+      refineryTypeEnum: refineryTypeEnum,
+      refineryAccountTypeEnum: refineryAccountTypeEnum,
+      controlWindows: {
+        addInfo: {},
+        detail: false
+      },
+      configAutocomplete: {
+        serveTarget: serve.getLikeByName,
+        autocompleteKey: 'refineryName',
+        labelKey: 'refineryName',
+        valueKey: 'id',
+        placeholder: '炼厂名称',
+        querykey: 'refineryId'
+      },
+      configAutocompleteaccount: {
+        serveTarget: serve.getLikeRefineryAccount,
+        autocompleteKey: 'accountName',
+        labelKey: 'accountName',
+        valueKey: 'id',
+        placeholder: '炼厂账户名称',
+        querykey: 'accountId'
+      },
+      refineryList: [],
+      tableHeight: 0,
+      tableData: [],
+      parameter: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        params: {}
+      },
+      oilCompanyMatch: {},
+      mappingData: [
+        {
+          carTitle: '炼厂账户明细基础信息',
+          carItems: [
+            { label: '炼厂名称', value: 'refineryName' },
+            { label: '炼厂ID', value: 'refineryId' },
+            { label: '炼厂账户名称', value: 'accountName' },
+            { label: '炼厂账户ID', value: 'refineryAccountId' },
+            { label: '订单ID', value: 'orderId' },
+            { label: '业务申请ID', value: 'reverseId' }
+          ]
+        }
+      ],
+      mappingData2: [
+        {
+          carTitle: '炼厂账户明细财务信息',
+          carItems: [
+            { label: '发生金额', value: 'transactionAmount' },
+            { label: '交易类型', value: 'transactionType' },
+            { label: '上次累计充值金额', value: 'lastTotalRechargeAmount' },
+            { label: '当前累计充值金额', value: 'currentTotalRechargeAmount' },
+            { label: '上次账户总余额', value: 'lastBalance' },
+            { label: '当前账户总余额', value: 'currentBalance' },
+            { label: '上次充值金额', value: 'lastRechargeBalance' },
+            { label: '当前充值金额', value: 'currentRechargeBalance' },
+            { label: '创建人', value: 'userName' },
+            { label: '创建时间', value: 'createTime' },
+            { label: '创建系统', value: 'createSource' }
+          ]
+        }
+      ],
+      datetime: []
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.heightHandle()
+    })
+    window.addEventListener('resize', this.$utils.debounce(this.heightHandle, 500))
+  },
+  created() {
+    this.getByPage()
+  },
+  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
+      })
+    },
+    // 详情接口
+    detailBefore(row) {
+      serve.getById(row.id).then(res => {
+        this.detail(res.data)
+      })
+    },
+    // 详情
+    detail(row) {
+      this.oilCompanyMatch = [row]
+      this.controlWindows.detail = true
+    },
+    // 重置
+    reset() {
+      Object.assign(this.parameter, {
+        currentPage: 1,
+        pageSize: 10,
+        params: {}
+      })
+    },
+    // 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)
+    },
+    changeDateTime(val) {
+      if (val) {
+        this.parameter.params.createTimeStart = val[0]
+        this.parameter.params.createTimeEnd = val[1]
+      }
+    },
+    indexMethod(index) {
+      return index + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order {
+  .pft14 {
+    font-size: 14px;
+  }
+  .frame {
+    margin: 20px;
+    padding: 20px;
+    // width: 100%;
+    border-radius: 6px;
+    border: 1px solid #e3e3e5;
+    background: #fff;
+    .el-input,
+    .el-select {
+      width: 183px;
+      height: 40px;
+    }
+    .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-link {
+      margin-right: 10px;
+    }
+  }
+  .pft14 {
+    font-size: 14px;
+  }
+}
+</style>