parking_h5_all/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList.vue

<!-- 发票抬头列表 -->
<template>
  <view class="invoice-header">
    <z-paging ref="paging" v-model="invoiceHeaderList" @query="queryList">
      <!-- 导航栏 -->
      <u-navbar
        title-color="#fff"
        :custom-back="customBack"
        :border-bottom="false"
        back-icon-color="#CCE8FF"
        :background="{ background: '#008CFF' }"
        title="抬头信息"
        slot="top"
      />
      <view class="invoice-header-list">
        <view class="invoice-header-list-item" v-for="(item, index) in invoiceHeaderList" :key="index">
          <view class="left">
            <view class="left-item">{{ item.invoName }}</view>
            <view class="left-item">{{ item.invoCode }}</view>
          </view>
          <view class="center">
            {{ formatType(item.invoHeadType) }}
          </view>
          <view class="right">
            <u-image width="28rpx" height="28rpx" src="/static/img/edit-icon.png" @click="editInvoiceHeader(item)" />
          </view>
        </view>
      </view>
      <view class="invoice-header-bottom" slot="bottom">
        <u-button type="primary" @click="addInvoiceHeader">新增抬头</u-button>
      </view>
    </z-paging>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceHeaderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      invoType: 1
    };
  },
  onLoad(options) {
    const { invoType } = options;
    this.invoType = invoType;
  },
  methods: {
    /**
     * @description: 分页组件触发
     * @param {*} pageNo
     * @param {*} pageSize
     * @return {*}
     */
    queryList(pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    /**
     * @description: 返回新增抬头页面
     * @return {*}
     */
    customBack() {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoice/addInvoice',
        params: {
          invoType: this.invoType
        }
      });
    },
    /**
     * @description: 获取列表
     * @return {*}
     */
    async getList() {
      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadListApi({ ...this.queryParams });
      if (code === 200) {
        this.$refs.paging.complete(data?.pageInfo?.rows || []);
      }
    },
    /**
     * @description: 新增抬头
     * @return {*}
     */
    addInvoiceHeader() {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader',
        params: {
          invoType: this.invoType
        }
      });
    },
    /**
     * @description: 编辑抬头
     * @param {*} item
     * @return {*}
     */
    editInvoiceHeader(item) {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader',
        params: {
          id: item.id,
          invoType: this.invoType
        }
      });
    },
    // 删除抬头
    async deleteInvoiceHeader(item) {
      const { id } = item;
      const { code } = await this.$u.api.invoiceModuleApi.deleteInvoiceHeaderApi({ id });
      if (code === 200) {
        this.$refs.uToast.show({
          title: '删除成功!',
          type: 'success'
        });
        this.getList();
      }
    },
    /**
     * @description: 初始化类型
     * @param {*} val
     * @return {*}
     */
    formatType(val) {
      const typeObj = {
        1: '企业',
        2: '个人'
      };
      return typeObj[val];
    }
  }
};
</script>

<style lang="scss" scoped>
@import './invoiceHeaderList.scss';
</style>