feat: 页面

wupengfei

4 天以前 76b04cd5781ca062de6940959fd7403c5c99e8ea

feat: 页面

 src/views/CustomerManage/InsureProductConfigure.vue

New file
@@ -0,0 +1,181 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem tip-content="合作状态">
            <FieldRadio
              v-model="extraParamState.cooperationStatus"
              :value-enum="EnumEnterpriseCooperationStatusText"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem tip-content="签约状态">
            <FieldRadio
              v-model="extraParamState.signStatus"
              :value-enum="EnumEnterpriseCooperationSignStatusText"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.keywords"
              style="width: 300px"
              placeholder="企业名称/信用代码/姓名/电话"
              @on-click-search="getList"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
        <template #btn>
          <el-button
            v-if="checkSubModuleItemShow('pageButton', 'addBtn')"
            @click="goAddOrEdit()"
            icon="Plus"
            type="primary"
            >新增客户</el-button
          >
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
      </ProTableV2>
    </AppContainer>
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  FieldRadio,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
} from '@bole-core/components';
import * as enterpriseServices from '@/services/api/enterprise';
import {
  EnumEnterpriseCooperationStatusText,
  EnumEnterpriseCooperationSignStatusText,
} from '@/constants';

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

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

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

const BaseState = {
  loading: true,
};

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

const eventContext = useGlobalEventContext();

eventContext.addEvent('customerManage:add', () => {
  getList();
});

eventContext.addEvent('customerManage:edit', () => {
  getList(paginationState.pageIndex);
});

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

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetPartyAEnterprisesQuery = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
        keywords: extraParamState.keywords,
        cooperationStatus: extraParamState.cooperationStatus,
        signStatus: extraParamState.signStatus,
      };

      let res = await enterpriseServices.getPartyAEnterprises(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      keywords: '',
      cooperationStatus: '' as any as EnumEnterpriseCooperationStatus,
      signStatus: '' as any as EnumEnterpriseCooperationSignStatus,
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
    },
    queryKey: ['enterpriseServices/getPartyAEnterprises'],
    columnsRenderProps: {
      cooperationStatus: { type: 'enum', valueEnum: EnumEnterpriseCooperationStatusText },
      signStatus: { type: 'enum', valueEnum: EnumEnterpriseCooperationSignStatusText },
      serviceFeeCollectType: {
        type: 'enum',
        valueEnum: EnumEnterpriseCooperationServiceFeeCollectTypeText,
      },
      invoiceTaxPointRate: {
        formatter: (row: API.GetPartyAEnterprisesQueryResultItem) => {
          if (row.invoiceTaxPointRate) {
            return `${row.invoiceTaxPointRate}%`;
          }
          return '';
        },
      },
    },
  }
);

const router = useRouter();

function goAddOrEdit(row?: API.GetPartyAEnterprisesQueryResultItem) {
  router.push({
    name: 'AddOrEditCustomer',
    params: {
      id: row?.id ?? '',
    },
  });
}

function goDetail(row: API.GetPartyAEnterprisesQueryResultItem) {
  router.push({
    name: 'CustomerDetail',
    params: {
      id: row?.id ?? '',
    },
  });
}
</script>