ソースを参照

feat: 改版收款单

aXin-0810 2 年 前
コミット
6ea28cc554

+ 17 - 0
src/api/finance/receipt_list_v2.js

@@ -0,0 +1,17 @@
+import request, { postBlob } from '@/utils/request'
+
+export function k3ReceiptList(data) {
+  return request({
+    url: `/k3/receipt/list/v2?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function k3ReceiptListExport(data, name) {
+  return postBlob({
+    url: '/k3/receipt/list/export/v2',
+    data,
+    name
+  })
+}

+ 4 - 243
src/views/deposit_home/refund_list.vue

@@ -226,15 +226,6 @@ export default {
       return this.$store.getters.customerId && this.$store.getters.customerNumber
     }
   },
-  created() {
-    this.getDataList({
-      pageSize: this.pageSize,
-      pageNum: this.currentPage,
-      enginOrderType: this.enginOrderType,
-      ...this.screenForm
-      // startDeliverTime: "",
-    })
-  },
   methods: {
     // 列表请求函数
     getList: depositManageHomeList,
@@ -334,22 +325,7 @@ export default {
       this.importFileList = []
       if (result.code == 200) {
         this.$message.success('导入成功')
-        this.getDataList({
-          pageSize: this.pageSize,
-          pageNum: this.currentPage,
-          confirmName: '',
-          createName: '',
-          customerKeyword: '',
-          // endDeliverTime: "",
-          enginOrderNo: '',
-          enginOrderType: this.enginOrderType,
-          examineStatus: '',
-          refEnginRecordNo: '',
-          refProjectName: '',
-          refUseUnit: '',
-          ...this.screenForm
-          // startDeliverTime: "",
-        })
+        this.$refs.pageRef.refreshList()
       } else {
         this.$message.error(result.message)
       }
@@ -363,30 +339,6 @@ export default {
       }
       this.$errorMsg('请选择')
     },
-    // 打开 批量审批
-    // batchExamine() {
-    //   if (this.selectData.length) {
-
-    //     for (let i = 0; i < this.selectData.length; i++) {
-    //       if (this.selectData[i].examineStatus == 'OK' || this.selectData[i].examineStatus == 'SAVE') {
-    //         if (this.selectData[i].installDate) {
-    //           this.submitExamineForm()
-    //         } else {
-    //           this.$errorMsg('需要资料日期才能被审核')
-    //           return
-    //         }
-
-    //       } else {
-    //         this.$errorMsg('请选择保存状态或者待审核状态单')
-    //         return
-
-    //       }
-    //     }
-    //     // this.isShowExamineDialog = true;
-    //     return
-    //   }
-    //   this.$errorMsg('请选择需要审核的单,退押申请保存状态,待审核状态下操作批量审批,必须有资料审核日期才能被审核')
-    // },
     // 提交 批量审批
     submitExamineForm() {
       let ids = this.selectData.map(item => {
@@ -401,42 +353,12 @@ export default {
       }).then(res => {
         this.isShowExamineDialog = false
         this.$successMsg('修改成功')
-        this.getDataList({
-          pageSize: this.pageSize,
-          pageNum: this.currentPage,
-          confirmName: '',
-          createName: '',
-          customerKeyword: '',
-          // endDeliverTime: "",
-          enginOrderNo: '',
-          enginOrderType: this.enginOrderType,
-          examineStatus: '',
-          refEnginRecordNo: '',
-          refProjectName: '',
-          refUseUnit: '',
-          ...this.screenForm
-          // startDeliverTime: "",
-        })
+        this.$refs.pageRef.refreshList()
       })
     },
     // 审批后更新列表数据
     updateList() {
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: this.currentPage,
-        confirmName: '',
-        createName: '',
-        customerKeyword: '',
-        // endDeliverTime: "",
-        enginOrderNo: '',
-        enginOrderType: this.enginOrderType,
-        examineStatus: '',
-        refEnginRecordNo: '',
-        refProjectName: '',
-        refUseUnit: '',
-        ...this.screenForm
-        // startDeliverTime: "",
-      })
+      this.$refs.pageRef.refreshList()
     },
     // 二次退押
     secondRefund(row) {
@@ -444,94 +366,7 @@ export default {
       delete row.sums2
       secondRefund(row).then(res => {
         this.$successMsg('二次退押成功')
-        this.getDataList({
-          pageSize: this.pageSize,
-          pageNum: this.currentPage,
-          enginOrderType: this.enginOrderType,
-          ...this.screenForm
-          // startDeliverTime: "",
-        })
-      })
-    },
-
-    // 切换列表
-    changeEnginOrderTypeFn(v) {
-      // console.log(v);
-      this.pageSize = 10
-      this.currentPage = 1
-
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: this.currentPage,
-        confirmName: '',
-        createName: '',
-        customerKeyword: '',
-        // endDeliverTime: "",
-        enginOrderNo: '',
-        enginOrderType: v,
-        examineStatus: this.examine,
-        refEnginRecordNo: '',
-        refProjectName: '',
-        refUseUnit: '',
-        ...this.screenForm
-        // startDeliverTime: "",
-      })
-    },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val
-      this.currentPage = 1
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: this.currentPage,
-        confirmName: '',
-        createName: '',
-        customerKeyword: '',
-        // endDeliverTime: "",
-        enginOrderNo: '',
-        enginOrderType: this.enginOrderType,
-        examineStatus: this.examine,
-        refEnginRecordNo: '',
-        refProjectName: '',
-        refUseUnit: '',
-        ...this.screenForm
-        // startDeliverTime: "",
-      })
-    },
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: this.currentPage,
-        confirmName: '',
-        createName: '',
-        customerKeyword: '',
-        // endDeliverTime: "",
-        enginOrderNo: '',
-        enginOrderType: this.enginOrderType,
-        examineStatus: this.examine,
-        refEnginRecordNo: '',
-        refProjectName: '',
-        refUseUnit: '',
-        ...this.screenForm
-        // startDeliverTime: "",
-      })
-    },
-    // 切换radio
-    changeRadioFn(v) {
-      if (v) {
-        this.screenForm.dataStates = []
-      }
-      this.screenForm.examineStatus = ''
-      this.examine = v
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: 1,
-        enginOrderType: this.enginOrderType,
-        ...this.screenForm,
-        examineStatus: this.examine
-        // startDeliverTime: "",
+        this.$refs.pageRef.refreshList()
       })
     },
     // 导出
@@ -543,85 +378,11 @@ export default {
       }
       downloadFiles('deposit-manage/export', params)
     },
-    // 多选列表数据
-    handleSelectionChange(selectData) {
-      this.selectData = selectData
-    },
-    // 重置
-    resetFn() {
-      this.screenForm.startInstallTime = ''
-      this.screenForm.endInstallTime = ''
-      this.$refs.screenForm.resetFields()
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: 1,
-        confirmName: '',
-        createName: '',
-        enginOrderNo: '',
-        enginOrderType: this.enginOrderType,
-        examineStatus: this.examine,
-        refUseUnit: '',
-        ...this.screenForm
-      })
-      // this.screenForm.endSpecification = "";
-      // this.screenForm.endSpecialNo = "";
-      // this.screenForm.endRefFactoryNo = "";
-    },
-    // 搜索
-    searchFn() {
-      this.getDataList({
-        pageSize: this.pageSize,
-        pageNum: 1,
-        confirmName: '',
-        createName: '',
-        enginOrderNo: '',
-        enginOrderType: this.enginOrderType,
-        examineStatus: this.examine,
-        refUseUnit: '',
-        ...this.screenForm
-      })
-    },
     // 详情
     infoFn(id) {
       this.detailId = id
       this.showSurrender = 1
     },
-    async getDataList(data) {
-      let status = null
-      if (this.examine == 'AMEND' || this.examine == 'WAIT_REVIEW' || this.examine == 'REVIEW') {
-        status = 'OK'
-      }
-      data.examineStatus = status ? status : this.screenForm.examineStatus || this.examine
-      data.dataStates = this.screenForm.dataStates.join(',')
-      getDepositCountList({
-        enginOrderType: this.enginOrderType,
-        ...this.screenForm,
-        dataStates: this.screenForm.dataStates.join(','),
-        examineStatus: status ? status : this.screenForm.examineStatus || this.examine
-      }).then(res => {
-        if (res.data) {
-          this.numSum = res.data
-        }
-        status = null
-      })
-      const res = await getDepositManageList(data)
-      res.data.records.forEach(item => {
-        item.totalPrice = item.itemPrice * item.itemQty
-        item.sums1 = ['orderHasSendQty', 'itemDataQty', 'itemQty', 'hasSendQty', 'itemContractQty']
-        item.sums2 = [
-          'itemDepositAmount',
-          'diffAmount',
-          'price',
-          'totalAmount',
-          'depositAmount',
-          'totalPrice',
-          'itemContractPrice',
-          'itemContractAmount'
-        ]
-      })
-      this.dataList = res.data.records
-      this.listTotal = res.data.total
-    },
     examineFn(id) {
       this.detailId = id
       this.showSurrender = 1

+ 106 - 285
src/views/finance/receipt_list.vue

@@ -1,307 +1,48 @@
 <template>
-  <div class="app-container">
-    <div v-if="showDetail == 1">
-      <!-- 筛选条件 -->
-      <div>
-        <Collapse :screen-form="searchForm">
-          <template #right_btn>
-            <el-button size="mini" @click="cancelFn">清空</el-button>
-            <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
-          </template>
-          <template #search>
-            <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" label-position="left">
-              <el-row :gutter="20">
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="单据类型" prop="billType">
-                    <!-- <el-input v-model="searchForm.billType" placeholder="请输入"></el-input> -->
-                    <el-select v-model="searchForm.billType" class="selectStyle" placeholder="请选择" filterable>
-                      <el-option label="收款单" value="1"></el-option>
-                      <el-option label="付款单" value="3"></el-option>
-                      <el-option label="退款单" value="2"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="单据编号" prop="billNo">
-                    <el-input v-model="searchForm.billNo" placeholder="请输入"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="往来单位" prop="wlCompanyType">
-                    <!-- <el-input v-model="searchForm.wlCompanyType" placeholder="请输入"></el-input> -->
-                    <el-select
-                      class="selectStyle"
-                      v-model="searchForm.wlCompanyType"
-                      placeholder="请选择"
-                      filterable
-                      clearable
-                    >
-                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="付款单位" prop="customerName">
-                    <!-- <el-input v-model="searchForm.customerName" placeholder="请输入"></el-input> -->
-                    <el-select
-                      class="selectStyle"
-                      v-model="searchForm.customerName"
-                      placeholder="请选择"
-                      filterable
-                      clearable
-                    >
-                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="结算方式" prop="settleType">
-                    <el-input v-model="searchForm.settleType" placeholder="请输入"></el-input>
-                  </el-form-item>
-                </el-col>
-                <!-- <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="收款用途" prop="">
-                    <el-input v-model="searchForm." placeholder="请输入"></el-input>
-                  </el-form-item>
-                </el-col> -->
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="开始时间" prop="startTime">
-                    <el-date-picker
-                      class="selectStyle"
-                      v-model="searchForm.startTime"
-                      type="datetime"
-                      placeholder="选择日期时间"
-                      default-time="00:00:00"
-                      value-format="yyyy-MM-dd HH:mm:ss"
-                    >
-                    </el-date-picker>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="结束时间" prop="endTime">
-                    <el-date-picker
-                      class="selectStyle"
-                      v-model="searchForm.endTime"
-                      type="datetime"
-                      placeholder="选择日期时间"
-                      default-time="00:00:00"
-                      value-format="yyyy-MM-dd HH:mm:ss"
-                    >
-                    </el-date-picker>
-                  </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :lg="6">
-                  <el-form-item label="区域" prop="websitNumber">
-                    <!-- <el-input v-model="searchForm.customerName" placeholder="请输入"></el-input> -->
-                    <el-select
-                      class="selectStyle"
-                      v-model="searchForm.websitNumber"
-                      placeholder="请选择"
-                      filterable
-                      clearable
-                    >
-                      <el-option v-for="(v, i) in orage" :key="i" :label="v.label" :value="v.value"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form>
-          </template>
-        </Collapse>
-      </div>
-      <!-- 按钮 -->
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button
-            type="primary"
-            size="mini"
-            v-if="$checkBtnRole('print', $route.meta.roles)"
-            @click="toPrint"
-            :disabled="tableSelection.length < 1"
-            >打印发货单
-          </el-button>
-        </div>
-        <!-- <importButton class="improt" imUrl="k3/receipt/export"/> -->
-
-        <div class="fr">
-          <ExportButton :exUrl="'k3/receipt/export'" :exParams="exParams" class="exportClass" />
-        </div>
-      </div>
-      <!-- 列表 -->
-      <div class="mymain-container">
-        <div class="table">
-          <el-table
-            ref="table"
-            v-loading="listLoading"
-            :data="dataList"
-            element-loading-text="Loading"
-            border
-            fit
-            highlight-current-row
-            stripe
-            show-summary
-            :summary-method="getSummaries"
-            @select="handleSelect"
-            @select-all="handleSelectAll"
-          >
-            <el-table-column align="center" type="selection" width="55"></el-table-column>
-
-            <el-table-column align="left" label="单据类型" prop="billType" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{
-                  scope.row.billType == 1
-                    ? '收款单'
-                    : scope.row.billType == 2
-                      ? '退款单'
-                      : scope.row.billType == 3
-                        ? '付款单'
-                        : ''
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="单据编码" prop="billNo" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.billNo" />
-                <span>{{ scope.row.billNo }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="业务日期" prop="theTime" min-width="160" show-overflow-tooltip>
-            </el-table-column>
-            <!-- <el-table-column
-              align="left"
-              label="币别"
-              prop="bibie"
-              min-width="160"
-              show-overflow-tooltip
-            ></el-table-column> -->
-            <el-table-column align="left" label="单据状态" prop="status" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <el-tag size="mini" v-show="scope.row.status == 'A'">保存</el-tag>
-                <el-tag size="mini" v-show="scope.row.status == 'B'" type="info">审核中</el-tag>
-                <el-tag size="mini" v-show="scope.row.status == 'C'" type="success">已审核</el-tag>
-                <el-tag size="mini" v-show="scope.row.status == 'D'" type="warning">重新审核</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="钱包" prop="walletName" min-width="160" show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column align="right" label="表头·应收金额" prop="" min-width="160" show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column align="left" label="往来单位" prop="wlCompanyName" min-width="260" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.wlCompanyName" />
-                <span>{{ scope.row.wlCompanyName }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="right" label="表头·实收金额" prop="amount" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{
-                  scope.row.billType == 3 || scope.row.billType == 2 ? -scope.row.amount : scope.row.amount | numToFixed
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="right"
-              label="收款金额"
-              prop=""
-              min-width="160"
-              show-overflow-tooltip
-            ></el-table-column>
-            <!-- <el-table-column
-              align="center"
-              label="结算方式"
-              prop="settleType"
-              min-width="160"
-              show-overflow-tooltip
-            ></el-table-column> -->
-            <!-- <el-table-column
-              align="center"
-              label="收款用途"
-              prop=""
-              min-width="160"
-              show-overflow-tooltip
-            ></el-table-column> -->
-            <el-table-column align="left" label="付款单位" prop="customerName" min-width="260" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.customerName" />
-                <span>{{ scope.row.customerName }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="right" label="表体·实收金额" prop="amount" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{
-                  scope.row.billType == 3 || scope.row.billType == 2 ? -scope.row.amount : scope.row.amount | numToFixed
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="勾对" prop="" min-width="160" show-overflow-tooltip></el-table-column>
-
-            <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip fixed="right">
-              <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  class="textColor"
-                  v-if="$checkBtnRole('examine', $route.meta.roles) && scope.row.status == 'C'"
-                  @click="NoExamineFn(scope.row.id)"
-                >弃审
-                </el-button
-                >
-                <el-button type="text" class="textColor" @click="seeFn(scope.row.id)">查看</el-button>
-                <el-button
-                  type="text"
-                  class="textColor"
-                  v-if="$checkBtnRole('print', $route.meta.roles)"
-                  @click="toPrint(scope.row, 2)"
-                >打印
-                </el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <!-- 分页 -->
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50, 500]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal"
-          >
-          </el-pagination>
-        </div>
-      </div>
+  <div style="width: 100%; height: 100%">
+    <template-page
+      v-if="showDetail == 1"
+      ref="pageRef"
+      :operation="operation()"
+      :optionsEvensGroup="optionsEvensGroup"
+      :getList="getList"
+      :exportList="exportList"
+      :tableAttributes="tableAttributes"
+      :tableEvents="tableEvents"
+      :columnParsing="columnParsing"
+    >
+    </template-page>
+    <div class="app-container" v-else-if="showDetail == 2">
+      <ReceiptPrint :listItem="queryItem" @backListFormDetail="backList" />
+    </div>
+    <div class="app-container" v-else>
+      <ReceiptListDetail :detailId="detailId" />
     </div>
-
-    <ReceiptPrint :listItem="queryItem" v-else-if="showDetail == 2" @backListFormDetail="backList" />
-    <ReceiptListDetail :detailId="detailId" v-else />
     <print-preview ref="preView" />
   </div>
 </template>
 
 <script>
 import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
-
 disAutoConnect()
 import printPreview from './components/design/preview.vue'
 import { getCompanyList } from '@/api/user'
 import { getCustomerList } from '@/api/finance/wallet'
+import { k3ReceiptList, k3ReceiptListExport } from '@/api/finance/receipt_list_v2'
 import { getK3ReceiptList, getK3ReceiptDetail, getK3ReceiptAbandon } from '@/api/finance/receipt_list'
 import ReceiptListDetail from './components/receipt_list-detail'
 import ReceiptPrint from '@/views/finance/components/receipt_print.vue'
 import importButton from '@/components/Common/import-button.vue'
 import { changeNumberMoneyToChinese, dateFormat } from '@/utils/util'
 import { numToFixed } from '@/filters'
-
+import TemplatePage from '@/components/template/template-page-1.vue'
 export default {
   components: {
     ReceiptPrint,
     printPreview,
     importButton,
-    ReceiptListDetail
+    ReceiptListDetail,
+    TemplatePage
   },
   data() {
     return {
@@ -338,10 +79,39 @@ export default {
           value: 'FS',
           label: '佛山'
         }
-      ]
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: true
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      recordSelected: []
     }
   },
   computed: {
+    optionsEvensGroup() {
+      return [
+        [
+          [
+            {
+              name: '打印发货单',
+              click: () => {
+                if (!this.tableSelection.length) {
+                  this.$message.info('请选择数据!')
+                  return
+                }
+                this.toPrint()
+              },
+              isRole: this.$checkBtnRole('print', this.$route.meta.roles)
+            }
+          ]
+        ]
+      ]
+    },
     exParams() {
       return {
         ...this.searchForm
@@ -353,9 +123,60 @@ export default {
     this.getCustomerDataList()
     this.getCompanyList()
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
+    // 列表请求函数
+    getList: k3ReceiptList,
+    // 列表导出函数
+    exportList: k3ReceiptListExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.tableSelection = data
+    },
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            {this.$checkBtnRole('examine', this.$route.meta.roles) && row.status == 'C' ? (
+              <el-button
+                type="text"
+                class="textColor"
+                onClick={() => {
+                  this.NoExamineFn(row.id)
+                }}
+              >
+                弃审
+              </el-button>
+            ) : null}
+            <el-button
+              type="text"
+              class="textColor"
+              onClick={() => {
+                this.seeFn(row.id)
+              }}
+            >
+              查看
+            </el-button>
+            {this.$checkBtnRole('print', this.$route.meta.roles) ? (
+              <el-button
+                type="text"
+                class="textColor"
+                onClick={() => {
+                  this.toPrint(row, 2)
+                }}
+              >
+                打印
+              </el-button>
+            ) : null}
+          </div>
+        )
+      }
+    },
+    // ------------------------------------
     //获取经销商列表
     async getCustomerDataList() {
       let res = await getCustomerList({
@@ -598,7 +419,7 @@ export default {
 .selectStyle {
   width: 100%;
 }
-.improt{
+.improt {
   display: flex;
 }
 </style>