新增可以隐藏哪列的表、预览功能、是否显示作废功能

src/view/invoice/reqlist.vue

@@ -41,9 +41,19 @@
         <Row>
             <Col span="24">
             <Card>
+                <div style="margin-right: 50px;margin-bottom: 20px;">
+                  <Poptip placement="right-start">
+                    <Button><Icon type="ios-keypad" /></Button>
+                    <template #content>
+                      <CheckboxGroup style="display: grid; gap: 10px" v-for="(item,index) in columnsList" :key="index" v-model="checkAllGroup">
+                          <Checkbox :label="item.title"></Checkbox>
+                      </CheckboxGroup>
+                    </template>
+                  </Poptip>
+                </div>
                 <!-- 用户列表 -->
                 <div>
-                    <Table :loading="listLoading" :columns="columnsList" :data="tableData" stripe disabled-hover></Table>
+                    <Table :loading="listLoading" :columns="columnsList1" :data="tableData" stripe disabled-hover></Table>
                 </div>
                 <div class="margin-top-15" style="text-align: center">
                     <Page :total="listCount" :current="page" :page-size="size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
@@ -51,11 +61,18 @@
             </Card>
             </Col>
         </Row>
+
+        <Modal v-model="show" width="1000" :styles="{top: '30px'}" @on-visible-change="doCancel">
+          <div>
+            <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
+          </div>
+        </Modal>
       </div>
 </template>
 
 <script>
 import { getinvoiceList, getIndexData, getcancel } from '@/api/invoice'
+import config from '@/config'
 export default {
   name: 'reqlist',
   data () {
@@ -65,7 +82,9 @@ export default {
       listCount: 0,
       tableData: [],
       listLoading: false,
+      show: false,
       phone: '',
+      pdfUrl: '',
       pucode_id: '',
       head_type: '',
       status: '',
@@ -76,6 +95,7 @@ export default {
       cityList: [{ value: '0', label: '单位' }, { value: '1', label: '个人' }, { value: 'null', label: '全部' }],
       cityList1: [{ value: '3', label: '已开票' }, { value: '0', label: '未开票' }, { value: '4', label: '已作废' }, { value: 'null', label: '全部' }],
       projectList: [],
+      checkAllGroup: ['id', '创建时间', '用户编号', '手机号码', '邮箱号', '抬头类型', '抬头名称', '合并开票', '状态', '开票金额', '开票账期', '开票时间', '作废时间', '操作'],
       columnsList: [
         { title: 'id', align: 'center', key: 'id', minWidth: 80 },
         { title: '创建时间', align: 'center', key: 'create_time', width: 110 },
@@ -95,17 +115,83 @@ export default {
           title: '操作',
           key: 'action',
           fixed: 'right',
-          width: 80,
+          align: 'center',
+          width: 150,
           render: (h, params) => {
-            return h('div', [
+            // return h('div', [
-              h('Button', {
+            //   h('Button', {
+            //     props: {
+            //       type: 'primary',
+            //       size: 'small'
+            //     },
+            //     style: {
+            //       marginRight: '15px'
+            //     },
+            //     on: {
+            //       click: () => {
+            //         if(params.row.status === '已开票'){
+            //           this.show = true;
+            //           this.pdfUrl = config.baseUrl.dev+params.row.invoice_pdf;
+            //         }else{
+            //           this.$Message.error('已开票状态才能预览')
+            //         }
+            //       }
+            //     }
+            //   }, '预览'),
+            //   h('Button', {
+            //     props: {
+            //       type: 'error',
+            //       size: 'small'
+            //     },
+            //     on: {
+            //       click: () => {
+            //         if (params.row.status === '已开票') {
+            //           this.$Message.error('已开票，无法作废')
+            //         } else {
+            //           getcancel({ id: params.row.id }).then(response => {
+            //             if (response.data.code === 1) {
+            //               this.$Message.success('作废成功')
+            //               this.getinvoiceList()
+            //             }
+            //           })
+            //         }
+            //       }
+            //     }
+            //   }, '作废')
+            // ])
+            const isInvoiced = params.row.status === '已开票'
+            const isInvoiced1 = params.row.status === '已作废'
+            const isInvoiced2 = params.row.status === '开票失败'
+            const renderPreviewButton = () => {
+              if (!isInvoiced) return null
+
+              return h('Button', {
+                props: {
+                  type: 'primary',
+                  size: 'small'
+                },
+                // style: {
+                //   marginRight: '15px'
+                // },
+                on: {
+                  click: () => {
+                    this.show = true
+                    this.pdfUrl = (process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro) + params.row.invoice_pdf
+                  }
+                }
+              }, '预览')
+            }
+
+            const renderCancelButton = () => {
+              if (isInvoiced1 || isInvoiced2 || isInvoiced) return null
+              return h('Button', {
                 props: {
                   type: 'error',
                   size: 'small'
                 },
                 on: {
                   click: () => {
-                    if (params.row.status === '已开票') {
+                    if (isInvoiced) {
                       this.$Message.error('已开票，无法作废')
                     } else {
                       getcancel({ id: params.row.id }).then(response => {
@@ -118,7 +204,12 @@ export default {
                   }
                 }
               }, '作废')
-            ])
+            }
+
+            return h('div', [
+              renderPreviewButton(),
+              renderCancelButton()
+            ].filter(Boolean))
           }
         }
       ]
@@ -132,9 +223,12 @@ export default {
           let startDate = new Date('2006-10-31').valueOf()
           let endTime = new Date().valueOf()
           // 若返回值为ture 则该日期处于禁用状态
-          return date && date.valueOf() > endTime || date.valueOf() < startDate
+          return (date && date.valueOf() > endTime) || date.valueOf() < startDate
         }
       }
+    },
+    columnsList1 () {
+      return this.columnsList.filter(column => this.checkAllGroup.includes(column.title))
     }
   },
   created () {
@@ -149,6 +243,9 @@ export default {
     window.removeEventListener('keydown', this.handleKeyDown)
   },
   methods: {
+    cancel () {
+      this.show = false
+    },
     handleKeyDown (event) {
       if (event.key === 'Enter') {
         // 当回车键被按下时执行的逻辑
@@ -226,5 +323,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="less">
+  ::v-deep .ivu-icon-ios-close{
+    color: #fff;
+  }
 </style>