添加操作费用明细

src/common/components/base/CustomForm.vue

 <script>
+import chooseTimePeriod from '@/components/base/chooseTimePeriod'
 export default {
   name: 'CustomForm',
-  components: {},
+  components: { chooseTimePeriod },
   props: {
     formConfig: {
       type: Array,
@@ -17,12 +18,13 @@ export default {
     },
     formLabelWidth: {
       type: String,
-      default: '50px'
+      default: 'auto'
     },
     formItemWidth: {
       type: String,
       default: null
     },
+
     value: {
       type: Object,
       default: () => {}
@@ -108,7 +110,8 @@ export default {
         size="mini"
         inline
         onSubmit={this.handleSubmit}
-        onKeyupenterCapture={this.search}>
+        onKeyupenterCapture={this.search}
+        {...this.$attrs}>
         {this.formConfig?.map((item, index) => (
           <el-form-item
             style={{
@@ -126,6 +129,10 @@ export default {
                 placeholder={item.placeholder || `请输入${item.name}`}
                 clearable></el-input>
             )}
+            {item.type === 'dateRange' && (
+              <chooseTimePeriod
+                v-model={this.formData[item.prop]}></chooseTimePeriod>
+            )}
             {item.type === 'textarea' && (
               <el-input
                 type="textarea"
@@ -179,7 +186,9 @@ export default {
             </el-button>
           </el-form-item>
         )}
-        {!this.isCustomButton && <slot name="btn"></slot>}
+        {this.$slots.btn && (
+          <el-form-item> {this.$scopedSlots.btn()} </el-form-item>
+        )}
       </el-form>
     )
   }

src/common/components/chooseTimePeriod.vue

+<script>
+import i18n from '@/i18n'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import localeData from 'dayjs/plugin/localeData'
+
+dayjs.extend(utc)
+dayjs.extend(isSameOrBefore)
+dayjs.extend(localeData)
+
+// 统一获取当天起始时间 (基于本地时区)
+function getStartOfDay() {
+  return dayjs().startOf('day')
+}
+
+const pickerOptions = {
+  shortcuts: [
+    // 今日
+    {
+      text: i18n.t('今日'),
+      onClick(picker) {
+        const start = getStartOfDay()
+        const end = dayjs()
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 昨天
+    {
+      text: i18n.t('昨天'),
+      onClick(picker) {
+        const yesterday = getStartOfDay().subtract(1, 'day')
+        const start = yesterday.startOf('day')
+        const end = yesterday.endOf('day')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 最近7天
+    {
+      text: i18n.t('最近7天'),
+      onClick(picker) {
+        const end = dayjs()
+        const start = end.subtract(6, 'day').startOf('day') // 包含今天在内的7天
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 最近14天
+    {
+      text: i18n.t('最近14天'),
+      onClick(picker) {
+        const end = dayjs()
+        const start = dayjs().subtract(13, 'day').startOf('day')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 最近30天
+    {
+      text: i18n.t('最近30天'),
+      onClick(picker) {
+        const end = dayjs()
+        const start = dayjs().subtract(29, 'day').startOf('day')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 本星期（假设周一到周日为一周）
+    {
+      text: i18n.t('本星期'),
+      onClick(picker) {
+        const end = dayjs()
+        const start = dayjs().startOf('week').add(1, 'day') // 适配周一为起始
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 上星期
+    {
+      text: i18n.t('上星期'),
+      onClick(picker) {
+        const now = dayjs()
+        const start = now.subtract(1, 'week').startOf('week').add(1, 'day')
+        const end = start.add(6, 'day').endOf('day')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 这个月
+    {
+      text: i18n.t('这个月'),
+      onClick(picker) {
+        const end = dayjs()
+        const start = dayjs().startOf('month')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 上个月
+    {
+      text: i18n.t('上个月'),
+      onClick(picker) {
+        const now = dayjs()
+        const start = now.subtract(1, 'month').startOf('month')
+        const end = start.endOf('month')
+        picker.$emit('pick', [start.toDate(), end.toDate()])
+      }
+    },
+    // 历史
+    {
+      text: i18n.t('历史'),
+      onClick(picker) {
+        picker.$emit('pick', ['', ''])
+      }
+    }
+  ]
+}
+
+export default {
+  name: 'choose-time-period',
+  props: {
+    periodTime: {
+      type: Array,
+      default: () => []
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: function () {
+        return i18n.t('时间')
+      }
+    },
+    format: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    },
+    type: {
+      type: String,
+      default: 'datetimerange'
+    },
+    align: {
+      type: String,
+      default: 'left'
+    }
+  },
+  model: {
+    prop: 'periodTime',
+    event: 'setVal'
+  },
+  render() {
+    return (
+      <el-date-picker
+        type={this.type}
+        unlink-panels
+        value={this.periodTime}
+        clearable={this.clearable}
+        onInput={(v) => this.$emit('setVal', v)}
+        range-separator="-"
+        value-format={this.format}
+        start-placeholder={this.$t('开始{slot1}', { slot1: this.placeholder })}
+        end-placeholder={this.$t('结束{slot1}', { slot1: this.placeholder })}
+        popper-class={this.$isMobile ? 'isMobile' : ''}
+        style="width:200px"
+        default-time={['00:00:00', '23:59:59']}
+        picker-options={pickerOptions}
+        align={this.align}
+      />
+    )
+  }
+}
+</script>
+<style lang="less">
+.isMobile {
+  width: 97vw !important;
+  height: 60vh !important;
+  overflow-y: scroll !important;
+  left: 10px !important;
+  .el-picker-panel__body-wrapper {
+    width: 90vw;
+    display: flex;
+    .el-picker-panel__sidebar {
+      position: none;
+      width: 75px;
+      height: 83vh;
+      top: 50px;
+      .el-picker-panel__shortcut {
+        margin-bottom: 8px;
+      }
+    }
+    .el-picker-panel__body {
+      margin-left: 63px;
+      min-width: 0 !important;
+      width: 300px;
+      .el-date-range-picker__time-header {
+        width: 132%;
+        margin-left: -66px;
+        .el-input--small .el-input__inner {
+          padding: 0 7px;
+        }
+      }
+      .el-date-range-picker__content {
+        width: 80vw;
+      }
+    }
+  }
+  .el-picker-panel__footer {
+    top: 1px;
+    text-align: center;
+  }
+}
+</style>

src/router/index.js

@@ -103,6 +103,12 @@ const routes = [
         meta: { title: '充值记录' }
       },
       {
+        path: '/saas/user/operatingDetails',
+        component: () => import('@/views/user/operatingDetails.vue'),
+        name: 'OperatingDetails',
+        meta: { title: '操作费用明细' }
+      },
+      {
         path: '/saas/logistics/transporters',
         component: () => import('@/views/system/transporters.vue'),
         name: 'system_transporters',

src/views/home/navMenu.vue

@@ -423,6 +423,14 @@ export default {
               icon: 'el-icon-user',
               index: '/saas/user/recharge-record',
               children: []
+            },
+            {
+              id: 3,
+              path: '',
+              label: '操作费用明细',
+              icon: 'el-icon-bank-card',
+              index: '/saas/user/operatingDetails',
+              children: []
             }
           ]
         },

src/views/user/operatingDetails.vue

+<template>
+  <div class="announce-manage card">
+    <CustomForm
+      :formConfig="queryformConfig"
+      v-model="queryFormData"
+      :isFlex="false"
+      :isCustomButton="false"
+      :attrs="{ 'label-position': 'left' }">
+      <template slot="btn">
+        <el-button type="success" @click="search">查询</el-button>
+      </template>
+    </CustomForm>
+    <div class="table_wrap" style="padding: 0" v-loading="loading">
+      <table-vue
+        :sourceData="sourceData"
+        ref="multipleTable"
+        :tableColumns="usersTableColumns"
+        @currentChange="currentTabFn"
+        @selectionChange="selectionChange"></table-vue>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="paginationOptions.total"
+        :page-size="paginationOptions.pageSize"
+        :current-page="paginationOptions.currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import axios from '../../common/api/axios'
+import CustomForm from '@/common/components/base/CustomForm.vue'
+
+import tableVue from '@/common/components/base/tableView.vue'
+export default {
+  name: 'system_users',
+  components: {
+    tableVue,
+    CustomForm
+  },
+  data() {
+    return {
+      is_title: 1,
+      ishowForm: false,
+      select: '',
+      sourceData: [],
+      serviceNameList: [],
+      formData: {},
+      queryFormData: { timeRange: [] },
+      queryformConfig: [
+        {
+          prop: 'batchId',
+          type: 'input',
+          name: '批次id'
+        },
+        {
+          prop: 'timeRange',
+          type: 'dateRange',
+          name: '时间范围'
+        },
+        {
+          prop: 'namespace',
+          type: 'input',
+          name: 'namespace'
+        }
+      ],
+
+      dialogVisible: false,
+      formId: null,
+
+      paginationOptions: {
+        pageSize: 100,
+        currentPage: 1,
+        total: 0
+      },
+      details: [],
+      loading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  computed: {
+    usersTableColumns() {
+      return [
+        {
+          label: '批次id',
+          key: 'batchId'
+        },
+        {
+          label: '订单数量',
+          key: 'orderNum'
+        },
+        {
+          label: '扣费金额',
+          key: 'fee'
+        },
+        {
+          label: 'namespace',
+          key: 'namespace'
+        },
+
+        {
+          label: '扣费时间',
+          key: 'createTime'
+        }
+      ]
+    },
+
+    funcRoleList() {
+      if (this.roleList.length > 0) {
+        return this.roleList.filter((item) => item.type === 'FUNCTION_ROLE')
+      }
+      return []
+    },
+    dataRoleList() {
+      if (this.roleList.length > 0) {
+        return this.roleList.filter((item) => item.type === 'DATA_ROLE')
+      }
+      return []
+    }
+  },
+  watch: {
+    formData: {
+      handler(newValue) {
+        // console.log(368, newValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    sizeChange(value) {
+      this.paginationOptions.pageSize = value
+      this.getList()
+    },
+    onCurrentChange(value) {
+      this.paginationOptions.currentPage = value
+      this.getList()
+    },
+    selectionChange(selection) {
+      if (selection.length > 0) {
+        this.select = selection
+      }
+    },
+
+    setempNo(id) {
+      for (const iterator of this.employee) {
+        if (iterator.id === id) {
+          this.addcurrencyform.empNumber = iterator.empNumber
+          break
+        }
+      }
+    },
+    search() {
+      this.getList()
+    },
+    currentTabFn(val) {
+      if (val.row) {
+        this.formId = val.row.id
+      }
+    },
+
+    // 查询
+    getList() {
+      this.loading = true
+      const { pageSize, currentPage } = this.paginationOptions
+      const timeRange = this.queryFormData.timeRange
+      if (timeRange && timeRange.length) {
+        this.queryFormData.startTime = timeRange[0]
+        this.queryFormData.endTime = timeRange[1]
+      } else {
+        this.queryFormData.startTime = ''
+        this.queryFormData.endTime = ''
+      }
+      axios
+        .post('operationFeeDetails/list_page', {
+          pageSize,
+          currentPage,
+          ...this.queryFormData
+        })
+        .then((res) => {
+          this.loading = false
+          if (res.code === 200) {
+            this.sourceData = res.data.records
+            this.paginationOptions.total = res.data.total
+          } else {
+            this.$alert(res.message, '错误提示', {
+              dangerouslyUseHTMLString: true
+            })
+          }
+        })
+    }
+  }
+}
+</script>
+<style scoped>
+.wraper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.table_wrap {
+  flex: 1;
+}
+
+.circle {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+.announce-manage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 20px 0;
+  overflow: hidden;
+}
+</style>