1. init 添加发票抬头列表

src/api/sdk-service.ts

@@ -110,6 +110,40 @@ export const enum ApplyOperateType {
     Reject = 'reject',
 }
 
+export const enum InvoiceType4Comapny {
+    CORP = 'CORP',
+    PERSONAL = 'PERSONAL'
+}
+
+export const enum InvoiceType4Person {
+    GENERAL = 'GENERAL',
+    SMALL = 'SMALL'
+}
+
+export const InvoiceType4ComapnyMap = new Map<InvoiceType4Comapny, string>([
+    [InvoiceType4Comapny.CORP, '企业'],
+    [InvoiceType4Comapny.PERSONAL, '个人'],
+]);
+
+export const InvoiceType4PersonMap = new Map<InvoiceType4Person, string>([
+    [InvoiceType4Person.GENERAL, '一般纳税人'],
+    [InvoiceType4Person.SMALL, '小规模纳税人'],
+]);
+
+export interface InvoiceListItem {
+    address: string;
+    bankAccount: string;
+    bankName: string;
+    default: boolean;
+    id: string;
+    name: string;
+    no: string;
+    oid: string;
+    phone: string;
+    taxpayerNature: InvoiceType4Comapny;
+    type: InvoiceType4Person;
+}
+
 class SdkService extends SdkCoreService {
     public getJoinedList() {
         return this.get(`/system/org/joined/list`);
@@ -135,6 +169,11 @@ class SdkService extends SdkCoreService {
             memo: "执行操作"
         });
     }
+
+    public getInvoiceTitleList() {
+        const oid = EnterpriseHost.getOid();
+        return this.get<InvoiceListItem[]>(`/system/org/${oid}/invoice_title/list`);
+    }
 }
 
 const sdkService = new SdkService();

src/views/pages/service-management/invoice-titles/invoice-titles.vue

 <template>
-    <div>InvoiceTitles</div>
+    <div class="invoice-title-container">
+        <div class="header d-flex justify-content-between align-items-end">
+            <div class="title">
+                发票抬头 <span class="total">({{ total }})</span>
+            </div>
+            <mg-button type="primary">添加发票抬头</mg-button>
+        </div>
+        <div class="table-container">
+            <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                style="width: 100%"
+                stripe
+                class="hrs-table"
+            >
+                <el-table-column label="名称" align="center">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.name">{{ scope.row.name }}</span>
+                        <span v-else>-</span>
+                        <span class="text-orange" v-if="scope.row.default"
+                            >（默认）</span
+                        >
+                    </template>
+                </el-table-column>
+                <el-table-column label="税号" align="center">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.no">{{ scope.row.no }}</span>
+                        <span v-else>-</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="类型" align="center">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.type">{{
+                            formatType(scope.row.type)
+                        }}</span>
+                        <span v-else>-</span>
+                    </template>
+                </el-table-column>
+
+                <el-table-column label="纳税人性质" align="center">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.taxpayerNature">{{
+                            formatTypeV2(scope.row.taxpayerNature)
+                        }}</span>
+                        <span v-else>-</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="active" label="操作" align="center">
+                    <template slot-scope="scope">
+                        <div class="operated">
+                            <mg-button
+                                type="text"
+                                class="primary detail"
+                                size="small"
+                                @click="showData(scope.row, 'detail')"
+                            >
+                                <span class="text-blue"> 详情 </span>
+                            </mg-button>
+                            <mg-button
+                                type="text"
+                                class="primary edit"
+                                size="small"
+                                @click="showData(scope.row, 'edit')"
+                            >
+                                编辑
+                            </mg-button>
+                            <mg-button
+                                type="text"
+                                size="small"
+                                class="cancel delete"
+                                @click="goDelete(scope.row.id, scope.row.oid)"
+                            >
+                                <span class="text-orange"> 删除 </span>
+                            </mg-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
 </template>
 
 <script lang="ts">
+    import {
+        InvoiceListItem,
+        InvoiceType4Comapny,
+        InvoiceType4ComapnyMap,
+        InvoiceType4Person,
+        InvoiceType4PersonMap,
+        sdkService,
+    } from "@/api/sdk-service";
     import { Component, Vue } from "vue-property-decorator";
 
     @Component({ components: {} })
-    export default class InvoiceTitles extends Vue {}
+    export default class InvoiceTitles extends Vue {
+        private total = 0;
+
+        private tableData: InvoiceListItem[] = [];
+
+        private type: any = {
+            CORP: "企业",
+            PERSONAL: "个人",
+        };
+
+        private typeV2: any = {
+            GENERAL: "一般纳税人",
+            SMALL: "小规模纳税人",
+        };
+
+        created() {
+            this.getList();
+        }
+
+        private getList() {
+            sdkService.getInvoiceTitleList().then((r) => {
+                this.tableData = r || [];
+                this.total = r.length;
+            });
+        }
+
+        private formatType(type: InvoiceType4Comapny) {
+            return InvoiceType4ComapnyMap.get(type);
+        }
+
+        private formatTypeV2(type: InvoiceType4Person) {
+            return InvoiceType4PersonMap.get(type);
+        }
+
+        private showData() {
+            return "";
+        }
+
+        private goDelete() {
+            return "";
+        }
+    }
 </script>
 
 <style lang="less" scoped>
     @import "~@/css/variables.less";
+    .invoice-title-container {
+        padding-left: 24px;
+        padding-right: 24px;
+
+        .header {
+            overflow: hidden;
+            height: 65px;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 9px;
+
+            .title {
+                font-size: 18px;
+                line-height: 30px;
+                color: #292b33;
+
+                .total {
+                    color: #888;
+                }
+            }
+        }
+    }
 </style>