调整发票列表和支付列表中的列宽和样式

src/components/layout/Breadcrumb.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 <style lang="scss">
 .app-breadcrumb {
-  padding: 18px 0 32px;
+  padding: 10px 0 22px;
 
   .el-breadcrumb {
     font-size: 20px;

src/modules/invoice/views/List.vue

@@ -225,7 +225,7 @@ export default {
         columns: [
           { type: 'selection', align: 'center', minWidth: '200px', fixed: 'left' },
           { label: '发票代码', prop: 'invoice_daima', align: 'center', minWidth: '150px' },
-          { label: '发票号码', prop: 'invoice_haoma', align: 'center', minWidth: '150px' },
+          { label: '发票号码', prop: 'invoice_haoma', align: 'center', minWidth: '160px' },
           { label: '客户姓名', prop: 'name', align: 'center', minWidth: '200px' },
           { label: '客户编号', prop: 'customer_id', align: 'center', minWidth: '200px' },
           { label: '订单编号', prop: 'payment_id', align: 'center', minWidth: '300px' },
@@ -241,7 +241,7 @@ export default {
           { label: '开票类型', prop: 'invoiceColorTypeViewName', align: 'center', minWidth: '100px' },
           { label: '原发票号码', prop: 'old_invoice_haoma', align: 'center', minWidth: '150px' },
           { label: '原发票代码', prop: 'old_invoice_daima', align: 'center', minWidth: '150px' },
-          { label: '纳税人名称', prop: 'taxpayer_name', align: 'center', minWidth: '100px' },
+          { label: '纳税人名称', prop: 'taxpayer_name', align: 'center', minWidth: '200px' },
           { label: '纳税人识别号', prop: 'taxpayer_identifier', align: 'center', minWidth: '200px' },
           { label: '地址', prop: 'taxpayer_address', align: 'center', minWidth: '200px' },
           { label: '电话', prop: 'taxpayer_mobile', align: 'center', minWidth: '100px' },

src/modules/payment/views/List.vue

@@ -18,8 +18,7 @@
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
           size="small"
-          style="width: 360px"
-        >
+          style="width: 360px">
         </el-date-picker>
       </template>
       <!-- 末次缴费时间 -->
@@ -32,8 +31,7 @@
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
           size="small"
-          style="width: 360px"
-        >
+          style="width: 360px">
         </el-date-picker>
       </template>
       <!-- 状态 -->
@@ -43,8 +41,7 @@
           active-value="1"
           inactive-value="2"
           @change="handleStatus(row)"
-          :disabled="row.refund_time !== null"
-        ></el-switch>
+          :disabled="row.refund_time !== null"></el-switch>
       </template>
       <!-- 操作 -->
       <template v-slot:table-x="{ row }">
@@ -79,8 +76,7 @@
         :id="id"
         @close="ticketVisible = false"
         @createTicket="handleCreateTicket"
-        :row="row"
-      />
+        :row="row" />
       <el-drawer
         size="30%"
         title="历史开票信息"
@@ -89,8 +85,7 @@
         append-to-body
         :destroy-on-close="true"
         center
-        :modal="false"
-      >
+        :modal="false">
         <History v-if="historyVisible" :hasSearch="true" @select="handleSelect" />
       </el-drawer>
     </el-drawer>
@@ -129,13 +124,13 @@ export default {
         invoice_type: [], // 发票类型
         confirm_status: [], // 确认状态
         taxpayer_type: [], // 纳税人类型
-        invoice_color_type: [] // 发票开票状态
+        invoice_color_type: [], // 发票开票状态
       },
       disabledTicketVisible: false, // 发票状态弹框
       ticketVisible: false, // 开具发票
       codeVisible: false, // 发票二维码
       multipleSelection: [],
-      payDetailList: {} // 支付详情列表invoice_type
+      payDetailList: {}, // 支付详情列表invoice_type
     }
   },
   computed: {
@@ -163,16 +158,16 @@ export default {
             sort: '',
             related_id: '',
             class_name: '',
-            product_name: ''
+            product_name: '',
           },
-          beforeRequest: this.beforeRequest
+          beforeRequest: this.beforeRequest,
         },
         filters: [
           // 客户姓名
           {
             type: 'input',
             prop: 'product_name',
-            placeholder: '产品名称'
+            placeholder: '产品名称',
           },
           // 项目
           {
@@ -183,13 +178,13 @@ export default {
             valueKey: 'project_id',
             placeholder: '项目',
             filterable: true,
-            remote: true
+            remote: true,
           },
           // 客户姓名
           {
             type: 'input',
             prop: 'name',
-            placeholder: '客户姓名'
+            placeholder: '客户姓名',
           },
           // 渠道
           {
@@ -200,7 +195,7 @@ export default {
             valueKey: 'channel_id',
             placeholder: ' 渠道',
             filterable: true,
-            remote: true
+            remote: true,
           },
           // 申请状态
           {
@@ -211,7 +206,7 @@ export default {
             valueKey: 'key',
             multiple: true,
             allowCreate: true,
-            placeholder: '支付状态'
+            placeholder: '支付状态',
           },
           // 费用类型
           {
@@ -222,7 +217,7 @@ export default {
             valueKey: 'key',
             multiple: true,
             allowCreate: true,
-            placeholder: '费用类型'
+            placeholder: '费用类型',
           },
           // 发票状态
           {
@@ -233,20 +228,20 @@ export default {
             valueKey: 'key',
             placeholder: '发票状态',
             filterable: true,
-            remote: true
+            remote: true,
           },
           // 交易流水号
           {
             type: 'input',
             prop: 'related_id',
-            placeholder: '交易流水号'
+            placeholder: '交易流水号',
           },
           {
             type: 'select',
             options: this.conditionList.classes,
             prop: 'class_name',
-            placeholder: '班级名称'
-          }
+            placeholder: '班级名称',
+          },
         ],
         moreFilters: [
           {
@@ -258,30 +253,31 @@ export default {
             labelKey: 'user_name',
             valueKey: 'user_id',
             filterable: true,
-            remote: true
+            remote: true,
           },
           {
             label: '允许开具发票',
             prop: 'can_add_invoice',
-            slots: 'can_add_invoice'
+            slots: 'can_add_invoice',
           },
           {
             label: '首次缴费时间',
             prop: 'first_payment_time',
-            slots: 'firstDate'
+            slots: 'firstDate',
           },
           {
             label: '末次缴费时间',
             prop: 'final_payment_time',
-            slots: 'lastDate'
-          }
+            slots: 'lastDate',
+          },
         ],
         columnsOptions: { key: 'payments' },
+        height: 'calc(100vh - 400px)',
         columns: [
           { type: 'selection', minWidth: '50px', fixed: 'left' },
-          { label: '客户名称', prop: 'name', minWidth: 150 },
+          { label: '客户名称', prop: 'name', minWidth: 90, fixed: 'left' },
           { label: '项目', prop: 'project_id_name', align: 'center', minWidth: 150 },
-          { label: '产品名称', prop: 'product_name', align: 'center', minWidth: 100 },
+          { label: '产品名称', prop: 'product_name', align: 'center', minWidth: 300 },
           { label: '支付状态', prop: 'payment_status_name', align: 'center', minWidth: 100 },
           { label: '费用类型', prop: 'type_name', align: 'center', minWidth: 100 },
           {
@@ -296,7 +292,7 @@ export default {
               } else {
                 return row.first_payment_time
               }
-            }
+            },
           },
           {
             label: '末次缴费时间',
@@ -310,7 +306,7 @@ export default {
               } else {
                 return row.final_payment_time
               }
-            }
+            },
           },
           { label: '应缴金额', prop: 'bill_total', align: 'center', minWidth: 100 },
           { label: '实缴金额', prop: 'amount_need_to_pay', align: 'center', minWidth: 100 },
@@ -345,7 +341,7 @@ export default {
                   }
                 } else {
                   if (row.secondary_service_charge_ratio) {
-                    const radio = JSON.parse(row.secondary_service_charge_ratio).map(item => {
+                    const radio = JSON.parse(row.secondary_service_charge_ratio).map((item) => {
                       item.ratio = '范围从' + item.start + '到' + item.end + '的比例为 ' + item.value + '%'
                       return item.ratio
                     })
@@ -355,29 +351,29 @@ export default {
               } else if (row.secondary_service_fee_rules_type === '' || row.secondary_service_fee_rules_type === '0') {
                 return row.secondary_service_charge_ratio
               }
-            }
+            },
           },
           {
             label: '二级渠道不含税销售金额',
             prop: 'secondary_sales_amount_excluding_tax',
             align: 'center',
-            minWidth: 300
+            minWidth: 300,
           },
           {
             label: '二级渠道渠道代理费提基数',
             prop: 'secondary_channel_agent_fee_base',
             align: 'center',
-            minWidth: 300
+            minWidth: 300,
           },
           { label: '二级渠道代理服务费', prop: 'secondary_agency_service_fee', align: 'center', minWidth: 200 },
           {
             label: '二级渠道代理服务费（不含税金额）',
             prop: 'secondary_agency_service_fee_excluding_tax',
             align: 'center',
-            minWidth: 300
+            minWidth: 300,
           },
           { label: '二级渠道渠道税率', prop: 'secondary_channel_tax_rate', align: 'center', minWidth: 200 },
-          { label: '二级渠道户名', prop: 'secondary_channel_account_name', align: 'center', minWidth: 100 },
+          { label: '二级渠道户名', prop: 'secondary_channel_account_name', align: 'center', minWidth: 200 },
           { label: '二级渠道账号', prop: 'secondary_channel_account', align: 'center', minWidth: 100 },
           { label: '二级渠道开户行', prop: 'secondary_channel_bank_of_deposit', align: 'center', minWidth: 200 },
 
@@ -400,7 +396,7 @@ export default {
                   }
                 } else {
                   if (row.service_charge_ratio) {
-                    const radio = JSON.parse(row.service_charge_ratio).map(item => {
+                    const radio = JSON.parse(row.service_charge_ratio).map((item) => {
                       item.ratio = '范围从' + item.start + '到' + item.end + '的比例为 ' + item.value + '%'
                       return item.ratio
                     })
@@ -410,7 +406,7 @@ export default {
               } else if (row.service_fee_rules_type === '' || row.service_fee_rules_type === '0') {
                 return row.service_charge_ratio
               }
-            }
+            },
           },
           { label: '不含税销售金额', prop: 'sales_amount_excluding_tax', align: 'center', minWidth: 150 },
           { label: '渠道代理提基数', prop: 'channel_agent_fee_base', align: 'center', minWidth: 150 },
@@ -419,7 +415,7 @@ export default {
             label: '代理服务费（不含税金额）',
             prop: 'agency_service_fee_excluding_tax',
             align: 'center',
-            minWidth: 300
+            minWidth: 200,
           },
           { label: '渠道税率', prop: 'channel_tax_rate', align: 'center', minWidth: 100 },
           { label: '户名', prop: 'channel_account_name', align: 'center', minWidth: 100 },
@@ -431,10 +427,10 @@ export default {
             prop: 'bill_customer_class_start_time',
             align: 'center',
             minWidth: 200,
-            sortable: 'custom'
+            sortable: 'custom',
           },
           { label: '学制期限', prop: 'bill_customer_class_length_of_schooling', align: 'center', minWidth: 100 },
-          { label: '客户编号', prop: 'customer_id', align: 'center', minWidth: 300 },
+          { label: '客户编号', prop: 'customer_id', align: 'center', minWidth: 200 },
           {
             label: '退费状态',
             prop: 'refund_time',
@@ -442,27 +438,27 @@ export default {
             minWidth: 100,
             computed({ row }) {
               return row.refund_time === null ? '未退费' : '已退费'
-            }
+            },
           },
           {
             label: '发票状态',
             prop: 'invoice_status_name',
             align: 'center',
-            minWidth: 100
+            minWidth: 100,
           },
           {
             label: '发票申请日期',
             prop: 'invoice_application_time',
             align: 'center',
-            minWidth: 200,
-            sortable: 'custom'
+            minWidth: 140,
+            sortable: 'custom',
           },
-          { label: '允许开具发票', prop: 'can_add_invoice', slots: 'status', align: 'center', minWidth: 200 },
-          { label: '操作', slots: 'table-x', align: 'center', minWidth: 300, fixed: 'right' }
-        ]
-      }
+          { label: '允许开具发票', prop: 'can_add_invoice', slots: 'status', align: 'center', minWidth: 100 },
+          { label: '操作', slots: 'table-x', align: 'center', minWidth: 260, fixed: 'right' },
+        ],
       }
     },
+  },
   created() {
     window.localStorage.getItem('customColumns')
     this.fetchCondition() // 获取过滤条件
@@ -503,7 +499,7 @@ export default {
       this.$confirm('确定要作废此发票吗？作废后不可恢复,注意：开具的纸质发票需要您登录税控服务器上作废', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
       }).then(() => {
         this.fetchDisabled(row)
       })
@@ -527,7 +523,7 @@ export default {
     },
     // 获取过滤条件
     fetchCondition() {
-      getCondition().then(res => {
+      getCondition().then((res) => {
         this.conditionList = res.data
       })
     },
@@ -552,7 +548,7 @@ export default {
           this.$message.success('更新状态成功')
           this.$refs.list.refetch() // 刷新订单列表
         })
-        .catch(error => {
+        .catch((error) => {
           this.$message.error(error.message)
         })
     },
@@ -564,7 +560,7 @@ export default {
           this.$message.success('发票已作废')
           this.$refs.list.refetch() // 刷新订单列表
         })
-        .catch(error => {
+        .catch((error) => {
           this.$message.error(error.message)
         })
     },
@@ -574,7 +570,7 @@ export default {
       this.$confirm('您确定要退费吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
       }).then(() => {
         this.fetchDrawBack(row)
       })
@@ -587,22 +583,22 @@ export default {
           this.$refs.list.refetch() // 刷新订单列表
           this.$message.success('退费成功')
         })
-        .catch(error => {
+        .catch((error) => {
           this.$message.error(error.message)
         })
     },
     // 导出
     exportSelect() {
-      const list = this.tableOptions.columns.filter(item => {
+      const list = this.tableOptions.columns.filter((item) => {
         return item.prop && item.prop !== 'head_img'
       })
-      const headList = list.map(item => item.label)
-      const propList = list.map(item => item.prop)
+      const headList = list.map((item) => item.label)
+      const propList = list.map((item) => item.prop)
       const excelList = []
       excelList.push(headList)
-      this.multipleSelection.forEach(item => {
+      this.multipleSelection.forEach((item) => {
         const rowValArr = []
-        propList.forEach(key => {
+        propList.forEach((key) => {
           let val = item[key]
           if (key === 'can_add_invoice') val = val === '1' ? '允许' : '不允许'
           if (key === 'refund_time') val = val === null ? '' : '已退费'
@@ -642,7 +638,7 @@ export default {
         { wpx: 200 },
         { wpx: 200 },
         { wpx: 200 },
-        { wpx: 200 }
+        { wpx: 200 },
       ]
       const wb = XLSX.utils.book_new()
       wb.SheetNames.push('Worksheet')
@@ -654,7 +650,7 @@ export default {
     },
     // 导出全部
     exportAll() {
-      Object.keys(this.tableOptions.remote.params).forEach(key => {
+      Object.keys(this.tableOptions.remote.params).forEach((key) => {
         if (this.tableOptions.remote.params[key] === '') delete this.tableOptions.remote.params[key]
       })
       const params = queryString.stringify(this.tableOptions.remote.params)
@@ -673,7 +669,7 @@ export default {
         this.tableOptions.remote.params.sort = columns.prop
       }
       this.$refs.list.refetch()
-    }
-  }
+    },
+  },
 }
 </script>