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">
        <!-- <u-swipe-action
          v-for="(item, index) in invoiceHeaderList"
          :key="index"
          :index="index"
          :show="item.show"
          :options="options"
          btn-width="120"
          @click="invoiceHeaderClick"
          bg-color="#fff"
        >
          <view class="invoice-header-list-item" @click="addInvoiceHeader(item)">
            <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-icon name="arrow-right" color="#909399" size="30"></u-icon>
            </view>
          </view>
        </u-swipe-action> -->
        <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="addInvoiceHeader(item)" />
            <!-- 
              <u-icon name="edit-pen" color="#909399" size="40" @click="addInvoiceHeader(item)"></u-icon>
            <u-icon name="trash-fill" color="#fa3534" size="40" @click="deleteInvoiceHeader(item)"></u-icon> -->
          </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
      },
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  methods: {
    /**
     * @description: 分页组件触发
     * @param {*} pageNo
     * @param {*} pageSize
     * @return {*}
     */
    queryList(pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    customBack() {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoice/addInvoice'
      });
    },
    /**
     * @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: 滑动按钮点击
     * @param {*} index
     * @param {*} btnIndex
     * @return {*}
     */
    invoiceHeaderClick(index, btnIndex) {
      this.invoiceHeaderList[index].show = true;
      if (btnIndex === 0) {
        uni.showModal({
          title: '提示',
          content: '你确认删除该条发票抬头信息吗?',
          success: async (res) => {
            if (res.confirm) {
              const { id } = this.invoiceHeaderList[index];
              const { code } = await this.$u.api.invoiceModuleApi.deleteInvoiceHeaderApi({ id });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '删除成功!',
                  type: 'success'
                });
                this.getList();
                this.invoiceHeaderList[index].show = false;
              }
            }
            if (res.cancel) {
              this.invoiceHeaderList[index].show = false;
              console.log('取消删除');
            }
          }
        });
      }
    },
    /**
     * @description: 新增抬头
     * @return {*}
     */
    addInvoiceHeader(item) {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader',
        params: {
          id: item.id
        }
      });
    },
    // 删除抬头
    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>