VerifVATInvoice/webapp/vite-project/src/pages/manage.vue

<script setup lang="ts">

import {h, onMounted, ref} from "vue";
import {
  SearchOutlined,
  FileSearchOutlined
} from '@ant-design/icons-vue'
import request from '#/utils/request.ts';
import {baseURL} from "../utils/baseurl.ts";
import type {TableProps} from "ant-design-vue";
interface DataType {
  id: string;
  status: string;
  desc: string;
  desc_list: string;
}
const columns = [
  // {
  //   title: '全选',
  //   dataIndex: 'status',
  //   key: 'status',
  //   showSelection: true,
  // },
  {
    title: '发票号码',
    dataIndex: 'invoiceNumber',
    key: 'invoiceNumber',
    // showSelection: true,
  },
  {
    title: '销方名称',
    dataIndex: 'sellerName',
    key: 'sellerName',
  },
  {
    title: '销方税号',
    dataIndex: 'sellerTaxNumber',
    key: 'sellerTaxNumber',
  },
  {
    title: '不含税金额',
    dataIndex: 'invoiceAmountPreTax',
    key: 'invoiceAmountPreTax',
  },
  {
    title: '税额',
    dataIndex: 'invoiceTax',
    key: 'invoiceTax',
  },
  {
    title: '价税合计',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
  },
  {
    title: '开票日期',
    dataIndex: 'invoiceDate',
    key: 'invoiceDate',
  },

    {
      title: '查验结果',
      dataIndex: 'verify_status',
      key: 'verify_status',
    },
  {
    title: '查验次数',
    dataIndex: 'inspectionAmount',
    key: 'inspectionAmount',
  },
  {
    title: '查验时间',
    dataIndex: 'verify_time',
    key: 'verify_time',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  }

]
// 数据
let data = ref( [])

let searchParams = ref({
  page: 1,
  pageSize: 100,
  total: 0,
  params: {
    verify_status: 'success',
    value: null,
  }
});
// 下拉框
const rowSelection: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.status === 'yes', // Column configuration not to be checked
    name: record.status,
  }),
};
// 弹窗
const openModal = ref(false);
const modalTitle = ref('')
const confirmLoading = ref(false);
const formData = ref({
  id: '',
  status: false,
  desc: '',
  desc_files: '',
});

const handleOk = () => {
  confirmLoading.value = true;
  request.post("/updateInvoice", {
    invoiceId: formData.value.id,
    status: formData.value.status?'yes':'no',
    desc: formData.value.desc,
    desc_files: formData.value.desc_files,
  }).then(( res ) => {
    console.log(res)
    if (res.code === 200) {
      openModal.value = false;
      confirmLoading.value = false;
    }
  })
};
const handleOpen = (record) => {
  formData.value = record
  openModal.value = true;
};
// 数据列表
const getList = () => {
  request.post("/listInvoice", {
    verify_status : 'success'
  }).then(( res ) => {
    console.log(res)
    data.value = res.data
  })
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="table-operations">
    <a-row :gutter="20" >
      <a-col :span="22" :align="'end'" offset="2">
        <a-form v-model:value="searchParams" layout="inline">
          <a-form-item label="开票时间">
            <a-range-picker></a-range-picker>
          </a-form-item>
          <a-form-item label="销售方">
            <a-input v-model="searchParams.params.value"></a-input>
          </a-form-item>
          <a-form-item label="验证结果">
            <a-radio-group v-model:value="searchParams.params.verify_status">
              <a-radio-button value="success">正常</a-radio-button>
              <a-radio-button value="faild">异常</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :icon="h(SearchOutlined)">搜索</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'verify_status'">
        <a-tag v-if="record.verify_status === 'success'" color="green">正常</a-tag>
        <a-tag v-if="record.verify_status === 'fail'" color="red">异常</a-tag>
      </template>
      <template v-if="column.key === 'action'"  >
        <a-button type="primary" v-if="record.status ==='yes'">备注</a-button>
        <a-button type="primary" v-if="!record.status" @click="handleOpen(record)">入账</a-button>
      </template>
    </template>
    <template #expandedRowRender="{ record }">
      <a-row >
        <a-col :span="16">
          <a-typography-title :level="4" >备注</a-typography-title>
          <a-typography-paragraph>
            <blockquote>{{ record.desc }}asdsad</blockquote>
          </a-typography-paragraph>
        </a-col>
        <a-col :span="8">
          <a-image-preview-group>
            <a-image :width="200"  v-for="file in record.desc_list.split(',')" :src="baseURL+file"/>
          </a-image-preview-group>
        </a-col>
      </a-row>
    </template>
    <template #expandColumnTitle>
      <FileSearchOutlined />
    </template>
  </a-table>
  <a-modal v-model:open="openModal" title="Title" :confirm-loading="confirmLoading" @ok="handleOk">
     <a-form v-model:value="formData" layout="vertical">
        <a-form-item label="是否入账">
          <a-switch v-model:value="formData.status"></a-switch>
        </a-form-item>
     </a-form>
  </a-modal>
</template>
<style scoped>
.table-operations {
  margin-bottom: 16px;
  text-align: right;
}

.table-operations > button {
  margin-right: 8px;
}
</style>