add 财务管理UI

src/components/CommonPage/ProSearch2.vue

@@ -12,7 +12,8 @@
     :footer-props="{ labelWidth: '0px' }"
     :footer-col-props="{
       span: gridSpan,
-      offset: (gridNumber - (items.length % gridNumber) - 1) * gridSpan
+      offset:
+        offset || (gridNumber - (items.length % gridNumber) - 1) * gridSpan
     }"
   >
     <template #footer>
@@ -52,6 +53,11 @@
       // 初始化时需要显示的字段
       type: Object,
       default: () => ({})
+    },
+    offset: {
+      // 操作按钮的 offset 值
+      type: Number,
+      default: 0
     }
   });
 

src/styles/index.scss

@@ -249,3 +249,13 @@ html.disabled-transition :not(.view-transition-trigger) * {
     }
   }
 }
+
+.common-title{
+    font-size: 18px;
+    font-weight: 550;
+}
+.el-statistic{
+    .el-statistic__head{
+        font-size: 14px;
+    }
+}

src/views/data/books/components/book-export-log.vue

@@ -58,7 +58,6 @@
 
   const pageRef = ref(null);
   function reload() {
-    console.log('reload', searchData.value);
     pageRef.value?.reload(searchData.value);
   }
   function handleReset() {

src/views/finance/bookPayments/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <ele-page flex-table>
+    <page-search @search="reload"></page-search>
+
+    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
+      <template #toolbar>
+        <div class="flex items-center mb-4">
+          <el-statistic
+            :value="693700"
+            title="累计书款金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="待结算书款"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="已结算书款"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+        </div>
+
+        <div class="common-title mb-4">交易记录</div>
+
+        <el-radio-group @change="handleStatusChange" v-model="useStatus">
+          <el-radio-button label="全部" value="1" />
+          <el-radio-button label="待结算" value="2" />
+          <el-radio-button label="已结算" value="3" />
+        </el-radio-group>
+      </template>
+    </common-table>
+  </ele-page>
+</template>
+
+<script setup>
+  import { ref, reactive } from 'vue';
+  import CommonTable from '@/components/CommonPage/CommonTable.vue';
+  import pageSearch from '@/views/finance/withdrawal/components/page-search.vue';
+  import { useDictData } from '@/utils/use-dict-data';
+
+  defineOptions({ name: 'withdrawal' });
+  const [useStatusDicts] = useDictData(['use_status']);
+
+  const useStatus = ref('1');
+  function handleStatusChange(value) {
+    pageRef.value.reload({ useStatus: value });
+  }
+
+  /** 表格列配置 */
+  const columns = ref([
+    { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
+    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
+    {
+      label: '支付单号/流水号',
+      prop: 'paymentCode',
+      align: 'center',
+      minWidth: 160
+    },
+    { label: '对方账户', prop: 'addressDetail', align: 'center' },
+    { label: '结算金额', prop: 'money', align: 'center' },
+    {
+      label: '交易状态',
+      prop: 'useStatus',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    {
+      label: '交易类型',
+      prop: 'paymentType',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    { label: '订单编号', prop: 'code', align: 'center' }
+  ]);
+
+  /** 页面组件实例 */
+  const pageRef = ref(null);
+
+  const pageConfig = reactive({
+    pageUrl: '/baseinfo/godown/pagelist',
+    exportUrl: '/baseinfo/godown/export',
+    fileName: '书款记录',
+    cacheKey: 'bookPayments'
+  });
+
+  //刷新表格
+  function reload(where) {
+    pageRef.value?.reload(where);
+  }
+</script>

src/views/finance/cashFlow/components/page-search.vue

@@ -0,0 +1,49 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '8px' }">
+    <ProSearch
+      :items="formItems"
+      ref="searchRef"
+      @search="search"
+      :initKeys="initKeys"
+    ></ProSearch>
+
+    <slot></slot>
+  </ele-card>
+</template>
+
+<script setup>
+  import { reactive, ref, defineEmits } from 'vue';
+  import ProSearch from '@/components/CommonPage/ProSearch2.vue';
+
+  let { proxy } = getCurrentInstance();
+  const emit = defineEmits(['search']);
+
+  const formItems = reactive([
+    { type: 'input', label: '订单号', prop: 'code' },
+    { type: 'input', label: '客户昵称', prop: 'nickName' },
+    { type: 'dictSelect', label: '交易类型', prop: 'type' },
+    { type: 'dictSelect', label: '交易状态', prop: 'status' },
+    {
+      type: 'date',
+      label: '时间',
+      prop: 'time',
+      props: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]);
+
+  const initKeys = reactive({
+    date: '',
+    uid: '',
+    status: ''
+  });
+
+  const searchRef = ref(null);
+  /** 搜索 */
+  const search = (data) => {
+    emit('search', { ...data });
+  };
+</script>

src/views/finance/cashFlow/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <ele-page flex-table>
+    <page-search @search="reload">
+      <el-checkbox-group v-model="checkList" v-if="useStatus == 5">
+        <el-checkbox label="理赔" value="1" />
+        <el-checkbox label="售后补偿" value="2" />
+        <el-checkbox label="纸价补贴" value="3" />
+      </el-checkbox-group>
+    </page-search>
+
+    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
+      <template #toolbar>
+        <el-radio-group @change="handleStatusChange" v-model="useStatus">
+          <el-radio-button label="全部明细" value="1" />
+          <el-radio-button label="佣金明细" value="2" />
+          <el-radio-button label="书款明细" value="3" />
+          <el-radio-button label="提现明细" value="4" />
+          <el-radio-button label="其他" value="5" />
+        </el-radio-group>
+      </template>
+
+      <template #action="{ row }">
+        <div>
+          <el-button
+            type="primary"
+            link
+            v-permission="'finance:cashFlow:detail'"
+            @click="handleDetail(row)"
+          >
+            [详情]
+          </el-button>
+        </div>
+      </template>
+    </common-table>
+  </ele-page>
+</template>
+
+<script setup>
+  import { ref, reactive } from 'vue';
+  import CommonTable from '@/components/CommonPage/CommonTable.vue';
+  import pageSearch from './components/page-search.vue';
+  import { useDictData } from '@/utils/use-dict-data';
+
+  defineOptions({ name: 'withdrawal' });
+  const checkList = ref([]);
+  const [useStatusDicts] = useDictData(['use_status']);
+
+  const useStatus = ref('1');
+  function handleStatusChange(value) {
+    pageRef.value.reload({ useStatus: value });
+  }
+
+  /** 表格列配置 */
+  const columns = ref([
+    { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
+    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
+    {
+      label: '支付单号/流水号',
+      prop: 'paymentCode',
+      align: 'center',
+      minWidth: 160
+    },
+    { label: '对方账户', prop: 'addressDetail', align: 'center' },
+    { label: '结算金额', prop: 'money', align: 'center' },
+    {
+      label: '交易状态',
+      prop: 'useStatus',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    { label: '订单编号', prop: 'code', align: 'center' },
+    {
+      label: '交易类型',
+      prop: 'paymentType',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 90,
+      align: 'center',
+      slot: 'action',
+      fixed: 'right'
+    }
+  ]);
+
+  /** 页面组件实例 */
+  const pageRef = ref(null);
+
+  const pageConfig = reactive({
+    pageUrl: '/baseinfo/godown/pagelist',
+    exportUrl: '/baseinfo/godown/export',
+    fileName: '佣金记录',
+    cacheKey: 'commissionTable'
+  });
+
+  //刷新表格
+  function reload(where) {
+    pageRef.value?.reload(where);
+  }
+  //详情
+  function handleDetail(row) {
+    console.log(row);
+  }
+</script>

src/views/finance/commission/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <ele-page flex-table>
+    <page-search @search="reload"></page-search>
+
+    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
+      <template #toolbar>
+        <div class="flex items-center mb-4">
+          <el-statistic
+            :value="693700"
+            title="累计佣金金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="待结算佣金"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="已结算佣金"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="已失效佣金"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+        </div>
+
+        <div class="common-title mb-4">交易记录</div>
+
+        <el-radio-group @change="handleStatusChange" v-model="useStatus">
+          <el-radio-button label="全部" value="1" />
+          <el-radio-button label="待结算" value="2" />
+          <el-radio-button label="已结算" value="3" />
+        </el-radio-group>
+      </template>
+    </common-table>
+  </ele-page>
+</template>
+
+<script setup>
+  import { ref, reactive } from 'vue';
+  import CommonTable from '@/components/CommonPage/CommonTable.vue';
+  import pageSearch from '@/views/finance/withdrawal/components/page-search.vue';
+  import { useDictData } from '@/utils/use-dict-data';
+
+  defineOptions({ name: 'withdrawal' });
+  const [useStatusDicts] = useDictData(['use_status']);
+
+  const useStatus = ref('1');
+  function handleStatusChange(value) {
+    pageRef.value.reload({ useStatus: value });
+  }
+
+  /** 表格列配置 */
+  const columns = ref([
+    { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
+    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
+    {
+      label: '支付单号/流水号',
+      prop: 'paymentCode',
+      align: 'center',
+      minWidth: 160
+    },
+    { label: '对方账户', prop: 'addressDetail', align: 'center' },
+    { label: '结算金额', prop: 'money', align: 'center' },
+    {
+      label: '交易状态',
+      prop: 'useStatus',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    {
+      label: '交易类型',
+      prop: 'paymentType',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    { label: '订单编号', prop: 'code', align: 'center' }
+  ]);
+
+  /** 页面组件实例 */
+  const pageRef = ref(null);
+
+  const pageConfig = reactive({
+    pageUrl: '/baseinfo/godown/pagelist',
+    exportUrl: '/baseinfo/godown/export',
+    fileName: '佣金记录',
+    cacheKey: 'commissionTable'
+  });
+
+  //刷新表格
+  function reload(where) {
+    pageRef.value?.reload(where);
+  }
+</script>

src/views/finance/overview/components/page-search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ padding: '0px' }">
+    <ProSearch
+      :offset="1"
+      :items="formItems"
+      ref="searchRef"
+      @search="search"
+      :initKeys="initKeys"
+    ></ProSearch>
+  </ele-card>
+</template>
+
+<script setup>
+  import { reactive, ref, defineEmits } from 'vue';
+  import ProSearch from '@/components/CommonPage/ProSearch2.vue';
+
+  let { proxy } = getCurrentInstance();
+  const emit = defineEmits(['search']);
+
+  const formItems = reactive([
+    {
+      type: 'date',
+      label: '时间',
+      prop: 'time',
+      props: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]);
+
+  const initKeys = reactive({
+    date: ''
+  });
+
+  const searchRef = ref(null);
+  /** 搜索 */
+  const search = (data) => {
+    emit('search', { ...data });
+  };
+</script>

src/views/finance/overview/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <ele-page flex-table>
+    <ele-card flex-table>
+      <page-search @search="reload"></page-search>
+
+      <div class="state-item" v-for="item in stateList">
+        <el-text size="large" class="state-title">{{ item.title }}</el-text>
+
+        <div class="flex flex-wrap">
+          <div
+            class="child-item flex flex-col items-center justify-center"
+            v-for="child in item.children"
+          >
+            <el-text size="large" type="warning" class="child-number">
+              {{ child.number }}
+            </el-text>
+            <el-text size="large" class="child-name">{{ child.name }}</el-text>
+          </div>
+        </div>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script setup>
+  import { ref, reactive } from 'vue';
+  import pageSearch from './components/page-search.vue';
+  import request from '@/utils/request';
+
+  defineOptions({ name: 'financeOverview' });
+
+  function reload() {
+    request({ url: '/finance/overview' }).then((res) => {
+      stateList.value = res.data;
+    });
+  }
+
+  const stateList = ref([
+    {
+      title: '账户总览',
+      children: [
+        {
+          name: '累计账户余额',
+          number: 10023
+        },
+        {
+          name: '待付款（待结算）',
+          number: 32343
+        },
+        {
+          name: '待提现金额',
+          number: 2345
+        },
+        {
+          name: '提现中金额',
+          number: 344
+        },
+        {
+          name: '已提现金额',
+          number: 345
+        }
+      ]
+    },
+    {
+      title: '佣金总览',
+      children: [
+        {
+          name: '累计佣金',
+          number: 10023
+        },
+        {
+          name: '待结算佣金',
+          number: 32343
+        },
+        {
+          name: '已结算佣金',
+          number: 2345
+        }
+      ]
+    },
+    {
+      title: '书款总览',
+      children: [
+        {
+          name: '累计书款',
+          number: 10023
+        },
+        {
+          name: '待结算书款',
+          number: 32343
+        },
+        {
+          name: '已结算书款',
+          number: 2345
+        }
+      ]
+    }
+  ]);
+</script>
+<style lang="scss">
+  .state-item {
+    margin-bottom: 40px;
+    .state-title {
+      font-size: 18px;
+      font-weight: 550;
+    }
+  }
+  .child-item {
+    padding: 20px 30px;
+    border-radius: 10px;
+    margin-right: 20px;
+    background-color: #f5f7fa;
+    margin-top: 10px;
+    .child-number {
+      font-size: 36px;
+    }
+  }
+</style>

src/views/finance/withdrawal/components/page-search.vue

@@ -0,0 +1,45 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '8px' }">
+    <ProSearch
+      :items="formItems"
+      ref="searchRef"
+      @search="search"
+      :initKeys="initKeys"
+    ></ProSearch>
+  </ele-card>
+</template>
+
+<script setup>
+  import { reactive, ref, defineEmits } from 'vue';
+  import ProSearch from '@/components/CommonPage/ProSearch2.vue';
+
+  let { proxy } = getCurrentInstance();
+  const emit = defineEmits(['search']);
+
+  const formItems = reactive([
+    { type: 'input', label: '用户UID', prop: 'uid' },
+    { type: 'dictSelect', label: '状态', prop: 'status' },
+    {
+      type: 'date',
+      label: '时间',
+      prop: 'time',
+      props: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]);
+
+  const initKeys = reactive({
+    date: '',
+    uid: '',
+    status: ''
+  });
+
+  const searchRef = ref(null);
+  /** 搜索 */
+  const search = (data) => {
+    emit('search', { ...data });
+  };
+</script>

src/views/finance/withdrawal/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <ele-page flex-table>
+    <page-search @search="reload"></page-search>
+
+    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
+      <template #toolbar>
+        <div class="flex items-center mb-4">
+          <el-statistic
+            :value="693700"
+            title="提现累计金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="待提现金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="提现中金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="已提现金额"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="平均提现时长"
+            value-style="font-size:30px"
+            class="mr-10"
+          ></el-statistic>
+          <el-statistic
+            :value="693700"
+            title="长期不提现金额"
+            value-style="font-size:30px"
+            class="mr-10"Audit
+          ></el-statistic>
+        </div>
+
+        <div class="flex items-center mb-6">
+          <div class="common-title mr-10">交易记录</div>
+          <el-button
+            type="primary"
+            v-permission="'finance:withdrawal:batchAudit'"
+            @click="handleStepAudit()"
+          >
+            一键审核
+          </el-button>
+        </div>
+
+        <el-radio-group @change="handleStatusChange" v-model="useStatus">
+          <el-radio-button label="全部" value="1" />
+          <el-radio-button label="提现中" value="2" />
+          <el-radio-button label="提现完成" value="3" />
+          <el-radio-button label="提现失败" value="4" />
+          <el-radio-button label="长期不提现用户" value="5" />
+        </el-radio-group>
+      </template>
+
+      <template #action="{ row }">
+        <div>
+          <el-button
+            type="primary"
+            link
+            v-permission="'finance:withdrawal:detail'"
+            @click="handleUpdate(row)"
+          >
+            [详情]
+          </el-button>
+          <el-button
+            type="primary"
+            link
+            v-permission="'finance:withdrawal:audit'"
+            @click="handleChangeStatus(row)"
+          >
+            [审核]
+          </el-button>
+        </div>
+      </template>
+    </common-table>
+
+  </ele-page>
+</template>
+
+<script setup>
+  import { ref, reactive } from 'vue';
+  import CommonTable from '@/components/CommonPage/CommonTable.vue';
+  import pageSearch from './components/page-search.vue';
+  import { useDictData } from '@/utils/use-dict-data';
+  import request from '@/utils/request';
+
+  defineOptions({ name: 'withdrawal' });
+  const [useStatusDicts] = useDictData(['use_status']);
+
+  const useStatus = ref('1');
+  function handleStatusChange(value) {
+    pageRef.value.reload({ useStatus: value });
+  }
+
+  /** 表格列配置 */
+  const columns = ref([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center',
+      fixed: 'left'
+    },
+    { label: '提现时间', prop: 'createTime', align: 'center', width: 180 },
+    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
+    {
+      label: '支付单号/流水号',
+      prop: 'paymentCode',
+      align: 'center',
+      minWidth: 160
+    },
+    { label: '对方账户', prop: 'addressDetail', align: 'center' },
+    { label: '金额', prop: 'money', align: 'center' },
+    {
+      label: '交易状态',
+      prop: 'useStatus',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    {
+      label: '交易类型',
+      prop: 'paymentType',
+      align: 'center',
+      formatter: (row) =>
+        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
+          ?.dictLabel
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 140,
+      align: 'center',
+      slot: 'action',
+      fixed: 'right'
+    }
+  ]);
+
+  /** 页面组件实例 */
+  const pageRef = ref(null);
+
+  const pageConfig = reactive({
+    pageUrl: '/baseinfo/godown/pagelist',
+    exportUrl: '/baseinfo/godown/export',
+    fileName: '提现管理',
+    cacheKey: 'withdrawalTable'
+  });
+
+  //刷新表格
+  function reload(where) {
+    pageRef.value?.reload(where);
+  }
+
+  //审核
+  function handleAudit(row) {
+    pageRef.value?.messageBoxConfirm({
+      message: '确认审核？',
+      fetch: () => {}
+    });
+  }
+
+  //编辑页面
+  const editRef = ref(null);
+  function handleStepAudit(row) {
+    pageRef.value?.messageBoxConfirm({
+      message: '确认一键审核？',
+      fetch: () => {}
+    });
+  }
+</script>