feat: 页面

wupengfei

5 天以前 f06a17ee543e35bf2e17f2348e137faab42e1255

feat: 页面

 src/views/FinanceManage/BalanceManage.vue

New file
@@ -0,0 +1,135 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem>
            <FieldSelect
              placeholder="所属公司"
              v-model="extraParamState.status"
              :value-enum="[]"
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="余额范围">
            <el-input-number
              v-model="extraParamState.minAmount"
              placeholder="余额最小金额"
              size="small"
              style="width: 150px"
              :controls="false"
            />~
            <el-input-number
              v-model="extraParamState.maxAmount"
              placeholder="余额最大金额"
              size="small"
              style="width: 150px"
              :controls="false"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.keyword"
              style="width: 260px"
              placeholder="姓名/手机号/身份证号"
              @on-click-search="getList"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
      </ProTableV2>
    </AppContainer>
    <BalanceDetailDialog v-bind="dialogProps" />
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  OperationBtnType,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  useFormDialog,
  FieldSelect,
} from '@bole-core/components';
import { useAccess } from '@/hooks';
import * as enterpriseServices from '@/services/api/enterprise';
import BalanceDetailDialog from './components/BalanceDetailDialog.vue';

defineOptions({
  name: 'BalanceManage',
});

const operationBtnMap: Record<string, OperationBtnType> = {
  detailBtn: { emits: { onClick: (role) => openDialog(role) } },
};

const { column, operationBtns } = useAccess({
  operationBtnMap,
});

const router = useRouter();
const BaseState = {
  loading: true,
};

const state = reactive({ ...BaseState });

onMounted(async () => {
  await getList();
  state.loading = false;
});

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetEnterprisesQuery = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
        // searchKeys: extraParamState.keyword,
      };
      let res = await enterpriseServices.getEnterprises(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      keyword: '',
      status: '',
      minAmount: null as number,
      maxAmount: null as number,
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Asc }],
    },
    columnsRenderProps: {},
  }
);

const { dialogProps, handleEdit, editForm } = useFormDialog({
  defaultFormParams: {
    id: '',
  },
});

function openDialog(row) {
  handleEdit({
    id: row.id,
  });
}
</script>

 src/views/FinanceManage/FinanceManageList.vue

@@ -1,54 +1,6 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem tip-content="发布状态">
            <FieldRadio
              v-model="extraParamState.status"
              :value-enum="[
                { value: true, label: '发布中' },
                { value: false, label: '已停止' },
              ]"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="推荐状态">
            <FieldRadio
              v-model="extraParamState.status"
              :value-enum="[
                { value: true, label: '已推荐' },
                { value: false, label: '未推荐' },
              ]"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="发布时间">
            <FieldDatePicker
              v-model="extraParamState.beginDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              @change="getList()"
            ></FieldDatePicker>
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.keyword"
              style="width: 260px"
              placeholder="任务名称"
              @on-click-search="getList"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
      </ProTableV2>
    </AppContainer>
@@ -58,16 +10,11 @@

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  OperationBtnType,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  FieldDatePicker,
  FieldRadio,
  useFormDialog,
} from '@bole-core/components';
import { useAccess } from '@/hooks';

 src/views/FinanceManage/components/BalanceDetailDialog.vue

New file
@@ -0,0 +1,141 @@
<template>
  <ProDialog title="余额明细" v-model="visible" destroy-on-close draggable>
    <ProDialogTableWrapper :height="500">
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem>
            <FieldSelect
              v-model="extraParamState.status"
              :valueEnum="[]"
              clearable
              filterable
              placeholder="交易类型"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="查询日期">
            <FieldDatePicker
              v-model="extraParamState.creationTime"
              type="daterange"
              range-separator="~"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              clearable
              @change="getList()"
            ></FieldDatePicker>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="columns" :showOperationColumn="false">
      </ProTableV2>
    </ProDialogTableWrapper>
  </ProDialog>
</template>

<script setup lang="ts">
import {
  defineColumns,
  ProDialog,
  useTable,
  ProDialogTableWrapper,
  QueryFilterItem,
  FieldDatePicker,
  FieldSelect,
  ProTableV2,
  ProTableQueryFilterBar,
} from '@bole-core/components';
import * as enterpriseServices from '@/services/api/enterprise';
import { ModelValueType } from 'element-plus';

defineOptions({
  name: 'FinanceDetailDialog',
});

type Form = {
  id?: string;
};

const visible = defineModel({ type: Boolean });
const form = defineModel<Form>('form');

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'onCancel'): void;
}>();

const columns = defineColumns([
  {
    id: '1',
    enCode: 'name',
    name: '交易时间',
  },
  {
    id: '2',
    enCode: 'name',
    name: '收入',
  },
  {
    id: '3',
    enCode: 'name',
    name: '支出',
  },
  {
    id: '4',
    enCode: 'name',
    name: '账户余额',
  },
  {
    id: '4',
    enCode: 'name',
    name: '对方帐号/户名',
  },
  {
    id: '4',
    enCode: 'name',
    name: '用途',
  },
]);

watch(
  () => visible.value,
  (value) => {
    if (value) {
      getList();
    }
  }
);

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetEnterprisesQuery = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
        // searchKeys: extraParamState.keyword,
      };
      let res = await enterpriseServices.getEnterprises(params);
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      status: '',
      creationTime: [] as unknown as ModelValueType,
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Asc }],
    },
    columnsRenderProps: {},
  }
);
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;
</style>

 src/views/FinanceManage/components/FinanceDetailDialog.vue

@@ -18,7 +18,7 @@
});

type Form = {
  name?: string;
  id?: string;
};

const visible = defineModel({ type: Boolean });
@@ -34,62 +34,62 @@
  columns: [
    {
      label: '付款人账户',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '收款人账户',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '付款人名称',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '收款人名称',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '付款人开户行',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '收款人开户行',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '币种',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '交易金额',
      key: 'name',
      key: 'id',
      type: 'money',
    },
    {
      label: '用途',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '摘要',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '交易时间',
      key: 'name',
      key: 'id',
      type: 'text',
    },
    {
      label: '交易状态',
      key: 'name',
      key: 'id',
      type: 'text',
    },
  ],