申请开票和开票记录，科目管理界面

sen

2026-01-29 fea2d693c33fdbcb4c8304a96a4e584829cb437b

 ui/admin-ui3/src/views/cwgl/invoiceManage/index.vue

@@ -1,175 +1,370 @@
<template>
  <basicContainer >
    <avue-crud
        :option="option"
        :table-loading="pageF.loading"
        :data="tableData"
        :page="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crudRef"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @refresh-change="refreshChange"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
    >
  <basicContainer>
    <avue-crud :option="option" :table-loading="pageF.loading" :data="tableData" :page="page"
      :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef" @row-update="rowUpdate"
      @row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel" @search-change="searchChange"
      @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
      @size-change="sizeChange" @on-load="onLoad">
      <template #menu-left>
        <el-button
            type="success"
            icon="Edit"
            :disabled="pageF.single"
            v-hasPermi="['cwgl:invoiceManage:edit']"
            @click="handleUpdate">修改
        <el-button type="primary" icon="Plus" v-hasPermi="['cwgl:invoiceManage:add']" @click="handleAdd">新增
        </el-button>
        <el-button
            type="danger"
            icon="Delete"
            :disabled="pageF.multiple"
            @click="handleDelete"
            v-hasPermi="['cwgl:invoiceManage:remove']"
        >删除
        <!-- <el-button type="success" icon="Edit" :disabled="pageF.single" v-hasPermi="['cwgl:invoiceManage:edit']"
          @click="handleUpdate">修改1
        </el-button> -->
        <el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete"
          v-hasPermi="['cwgl:invoiceManage:remove']">删除
        </el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['cwgl:invoiceManage:export']"
        >导出
        <el-button type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['cwgl:invoiceManage:export']">导出
        </el-button>
      </template>
      <template #menu="{ size, row, index }">
        <el-link class="link-btn"  v-if="[0,3].includes(row.status)" type="primary" icon="Edit" :underline="false" plain :size="size"
          @click="handleFy(row)" v-hasPermi="['cwgl:invoiceManage:edit']"> 修改
        </el-link>
         <el-link class="link-btn"  v-if="[1,2].includes(row.status)" type="primary" icon="Edit" :underline="false" plain :size="size"
          @click="lookOver(row)" v-hasPermi="['cwgl:invoiceManage:edit']"> 查看
        </el-link>
           <el-link class="link-btn" v-if="[0,3].includes(row.status)" type="primary" icon="Position" :underline="false" plain :size="size"
          @click="makeInvoice(row)" v-hasPermi="['cwgl:invoiceManage:apply']"> 申请开票
        </el-link>
        <el-button type="text" icon="View" @click="handleFlow(row)"
          v-hasPermi="['cwgl:invoiceManage:flow']">日志</el-button>
            <el-button type="text" v-if="[1,2].includes(row.status)" icon="Position" @click="linkedBills(row)"
          v-hasPermi="['cwgl:invoiceManage:flow']">关联账单</el-button>
        <el-link  type="primary" v-if="[0,3].includes(row.status)" icon="Delete"  @click="deleteRow(row)"
          v-hasPermi="['cwgl:invoiceManage:remove']">删除
        </el-link>
            <!-- <el-link  type="primary" v-if="[2].includes(row.status)"   @click="download_qr_code(row)"
          v-hasPermi="['cwgl:invoiceManage:remove']">下载发票
        </el-link> -->


      </template>
    </avue-crud>
  </basicContainer>
  <OperationLogModal ref="logModalRef" />
  <InvoiceFormDialog ref="invoiceDialogRef" :title="titleInvoice" @submit="handleFinalSubmit" />
</template>

<script setup name="invoiceManage" lang="ts">
  import {InvoiceManageI,addInvoiceManage, delInvoiceManage, exportInvoiceManage, getInvoiceManage, listInvoiceManage, updateInvoiceManage} from "@/api/cwgl/invoiceManage";
  import useCurrentInstance from "@/utils/useCurrentInstance";
  import {computed,reactive, ref, toRefs} from "vue";
  import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
  import {usePagePlus} from "@/hooks/usePagePlus";
  import {hasPermission} from "@/utils/permissionUtils";
import { InvoiceManageI, addInvoiceManage, delInvoiceManage, exportInvoiceManage, getInvoiceManage, listInvoiceManage, updateInvoiceManage,
  cwglInvoiceManageApply
 } from "@/api/cwgl/invoiceManage";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { computed, reactive, ref, toRefs,onUnmounted } from "vue";
import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface";
import { usePagePlus } from "@/hooks/usePagePlus";
import { hasPermission } from "@/utils/permissionUtils";
import InvoiceFormDialog from '@/components/InvoiceFormDialog/index'
import OperationLogModal from '@/components/OperationLogModal/index.vue';
  import { listInvoiceManageLog} from "@/api/cwgl/invoiceManageLog";
import { getToken } from "@/utils/auth";

  const { proxy } = useCurrentInstance();
  const crudRef = ref();
const { proxy } = useCurrentInstance();
const crudRef = ref();

  const permissionList = computed(()=>{
    return {
      addBtn: hasPermission(["cwgl:invoiceManage:add"]),
      delBtn: hasPermission(["cwgl:invoiceManage:remove"]),
      editBtn: hasPermission(["cwgl:invoiceManage:edit"]),
      viewBtn: hasPermission(["cwgl:invoiceManage:query"]),
    }
  })
const permissionList = computed(() => {
  return {
    addBtn: hasPermission(["cwgl:invoiceManage:add"]),
    delBtn: hasPermission(["cwgl:invoiceManage:remove"]),
    editBtn: hasPermission(["cwgl:invoiceManage:edit"]),
    viewBtn: hasPermission(["cwgl:invoiceManage:query"]),
  }
})

  const data = reactive({
    form:<InvoiceManageI>{},
    queryParams:<InvoiceManageI&PageQueryInterface>{},
    page: <PagesInterface>{
      pageSize: 10,
      total: 0,
      currentPage: 1,
const data = reactive({
  form: <InvoiceManageI>{},
  queryParams: <InvoiceManageI & PageQueryInterface>{},
  page: <PagesInterface>{
    pageSize: 10,
    total: 0,
    currentPage: 1,
  },
  selectionList: [],
  titleInvoice: ''

})
const { queryParams, form, page, selectionList, titleInvoice } = toRefs(data);
const option = ref({
  pageKey: 'InvoiceManage',
  rowKey: 'id',
  searchSpan: 5,
  labelWidth: 180,
  searchLabelWidth: 150,
  addBtn: false,
  viewBtn: false,
  editBtn: false,
   delBtn: false,
  column: {
    // id: {
    //   label: '主建',
    // },
    // invoiceInfoId: {
    //   label: '发票抬头id',
    // },
    // invoiceSellerId: {
    //   label: '发票销售方id',
    // },
    invoiceNo: {
      label: '发票号码',
      search: true,

    },
    selectionList:[],
  })
  const {queryParams,form,page,selectionList} = toRefs(data);
  const option = ref({
    pageKey: 'InvoiceManage',
    rowKey: 'id',
    column: {
                                id: {
          label: '主建',
                            },
                                invoiceInfoId: {
          label: '发票抬头id',
                            },
                                invoiceSellerId: {
          label: '发票销售方id',
                            },
                                customerName: {
          label: '客户名称',
                            },
                                invoiceSellerName: {
          label: '发票销售方名称',
                            },
                                invoiceCompanyName: {
          label: '抬头公司',
                            },
                                invoiceCreditCode: {
          label: '统一社会信用代码',
                            },
                                invoiceSellerCreditCode: {
          label: '销售方统一社会信用代码',
                            },
                                invoiceBankName: {
          label: '开户银行名称',
                            },
                                invoiceBankNo: {
          label: '基本开户账号',
                            },
                                invoiceOperatingLicenseAddress: {
          label: '注册场所地址',
                            },
                                invoiceOperatingLicensePhone: {
          label: '注册固定电话',
                            },
                                invoiceOperatingLicenseEmail: {
          label: '邮箱',
                            },
                                status: {
          label: '状态',
                            },
                                createBy: {
          label: '创建人',
                            },
                                updateBy: {
          label: '更新人',
                            },
                                createTime: {
          label: '创建时间',
                            },
                                updateTime: {
          label: '更新时间',
                            },
                                deleted: {
          label: '删除',
                            },
                                invoiceType: {
          label: '发票类型',
                            },
                                enterpriseType: {
          label: '企业类型',
                            },
          }
  })
    invoiceDate: {
      label: '开票时间',
    },
    invoiceDateArray: {
      label: '开票时间',
      search: true,
      searchRange: true,
      type: 'daterange',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      hide: true,
      addDisplay: false,
      editDisplay: false,
    },
    invoiceAmount: {
      label: '发票金额',
    },
    invoiceCompanyName: {
      label: '购买方名称',
      search: true,

  const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange,
    searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate,refreshChange} = usePagePlus({
    form:form,
    option:option,
    queryParams:queryParams,
    idKey:'id',
    page:page.value,
    getListApi:listInvoiceManage,
    getDetailApi:getInvoiceManage,
    exportApi:exportInvoiceManage,
    deleteApi:delInvoiceManage,
    addApi:addInvoiceManage,
    updateApi:updateInvoiceManage,
    handleUpdateFunc:()=>{
    },
    invoiceSellerName: {
      label: '销售方名称',
      search: true,

    },

    // customerName: {
    //   label: '客户名称',
    // },

    // invoiceSellerName: {
    //   label: '发票销售方名称',
    // },
    // invoiceCompanyName: {
    //   label: '抬头公司',
    // },
    // invoiceCreditCode: {
    //   label: '统一社会信用代码',
    // },
    // invoiceSellerCreditCode: {
    //   label: '销售方统一社会信用代码',
    // },
    // invoiceBankName: {
    //   label: '开户银行名称',
    // },
    // invoiceBankNo: {
    //   label: '基本开户账号',
    // },
    // invoiceOperatingLicenseAddress: {
    //   label: '注册场所地址',
    // },
    // invoiceOperatingLicensePhone: {
    //   label: '注册固定电话',
    // },
    // invoiceOperatingLicenseEmail: {
    //   label: '邮箱',
    // },
    status: {
      label: '状态',
      search: true,
      minWidth: 120,
      dataType: 'string',
      type: 'select',

      dicUrl: '/system/dict/data/type/sys_make_invoice',
      //    formatter: (row, value) => {
      // // 自定义格式化逻辑（如果需要）
      //   return value;
      //  }
    },
    // createBy: {
    //   label: '创建人',
    // },
    // updateBy: {
    //   label: '更新人',
    // },
    // createTime: {
    //   label: '创建时间',
    // },
    // updateTime: {
    //   label: '更新时间',
    // },
    // invoiceType: {
    //   label: '发票类型',
    // },
    // enterpriseType: {
    //   label: '企业类型',
    // },
  }
})

const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange,
  searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({
    form: form,
    option: option,
    queryParams: queryParams,
    idKey: 'id',
    page: page.value,
    getListApi: listInvoiceManage,
    getDetailApi: getInvoiceManage,
    exportApi: exportInvoiceManage,
    deleteApi: delInvoiceManage,
    addApi: addInvoiceManage,
    updateApi: updateInvoiceManage,
    handleUpdateFunc: () => {
      crudRef.value.rowEdit(selectionList.value[0]);
    },
    handleSelectionChangeFunc:(selection:any)=>{
    handleSelectionChangeFunc: (selection: any) => {
      selectionList.value = selection;
    },
    getBeginListFunc: (params = {}) => {
      let newParams = { ...params };
      newParams = proxy.addDateRangeNew(newParams, newParams?.invoiceDateArray, 'invoiceDate') || [];
      delete newParams.invoiceDateArray;
      queryParams.value = newParams;

      return newParams
    }
  })


const invoiceDialogRef = ref(null)

const handleAdd = () => {
  // 也可以传入初始数据
  titleInvoice.value = '新增发票'
  invoiceDialogRef.value.open()
}

const handleFinalSubmit = (data) => {
  console.log('最终提交给API的数据:', data)
  if(titleInvoice.value === '新增发票'){

    addInvoiceManage(data).then((res) => {
      if (res.code === 200) {
        proxy.$message.success('添加成功');
        invoiceDialogRef.value.handleClose()
        onLoad(page.value);
      }
    })
  }else if(titleInvoice.value === '修改发票'){
    updateInvoiceManage(data).then((res) => {
      if (res.code === 200) {
        proxy.$message.success('修改成功');
        invoiceDialogRef.value.handleClose()
        onLoad(page.value);
      }
    })
  }else if(titleInvoice.value === '关联账单'){
    updateInvoiceManage(data).then((res) => {
      if (res.code === 200) {
        proxy.$message.success('关联成功');
        invoiceDialogRef.value.handleClose()
        onLoad(page.value);
      }
    })
  }
}
const handleFy = (row) => {
  getInvoiceManage(row.id).then((res) => {
    if (res.code === 200) {
      titleInvoice.value = '修改发票'
      invoiceDialogRef.value.open(res.data)
      
    }
  })

}
const makeInvoice = (row) => {
    proxy.$modal.confirm('是否确认申请开票号码为"' + row.invoiceNo + '"?').then(function() {
    return cwglInvoiceManageApply(row.id);
  }).then(() => {
    onLoad(page.value);
    proxy.$modal.msgSuccess("申请开票成功");
  }).catch(() => {});
}
const deleteRow = (row) => {
    proxy.$modal.confirm('是否确认删除发票号码为"' + row.invoiceNo + '"的记录?').then(function() {
    return delInvoiceManage(row.id);
  }).then(() => {
    onLoad(page.value);
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
/* 日志 */
const logModalRef = ref(null);
const handleFlow = (row: any) => {
  listInvoiceManageLog({ invoiceManageId: row.id }).then((res) => {
    if (res.code == 200) {
      logModalRef.value.open(res.rows, 'receivable');

    }
  });
}
/* 关联账单 */
const linkedBills = (row) => {
    getInvoiceManage(row.id).then((res) => {
    if (res.code === 200) {
      titleInvoice.value = '关联账单'
      invoiceDialogRef.value.open(res.data)
      
    }
  })
}
const lookOver = (row) => {
  getInvoiceManage(row.id).then((res) => {
    if (res.code === 200) {
      titleInvoice.value = '查看关联账单'
      invoiceDialogRef.value.open(res.data)
      
    }
  })

}


const download_qr_code = (row: any) => {
  // window.location.href = baseURL + "/common/download/resource?resource=" + encodeURI(row.url);
  downloadFile(row.url);
}
const baseURL = import.meta.env.VITE_APP_BASE_API
// 创建一个点击事件触发下载
function downloadFile(row: any) {
  // 文件下载地址
  const fileUrl = baseURL + "/common/download/resource?resource=" + encodeURI(row);
  // 设置请求头
  const headers = new Headers();
  headers.append('Authorization', 'Bearer ' + getToken()); // 设置授权头，替换YourAccessToken为实际的访问令牌
  // 发起 Fetch 请求
  fetch(fileUrl, {
    method: 'GET',
    headers: headers,
  })
    .then(response => response.blob())
    .then(blob => {
      // 创建一个虚拟的链接元素，模拟点击下载
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = row; // 设置下载文件名，替换filename.ext为实际的文件名和扩展名
      document.body.appendChild(link);
      // 模拟点击
      link.click();

      // 移除虚拟链接元素
      document.body.removeChild(link);
    })
    .catch(error => console.error('下载失败：', error));
}

onUnmounted(() => {
  // 在组件卸载时移除事件监听器，以避免内存泄漏
  resizeObserver.disconnect();
})
</script>