|
|
@@ -1,388 +1,301 @@
|
|
|
<template>
|
|
|
- <div class="invoiceRecord">
|
|
|
- <el-form v-model="form" label-width="80">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="recordId" label="记录编号">
|
|
|
- <el-input v-model="form.recordId"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="companyId" label="保险公司">
|
|
|
- <el-select v-model="form.companyId" placeholder="请选择" clearable filterable>
|
|
|
- <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode" :label="item.name"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="invoiceParty" label="开票方">
|
|
|
- <el-select v-model="form.invoiceParty">
|
|
|
- <el-option value="1" label="1"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="accountsReceivable" label="应收项">
|
|
|
- <el-select v-model="form.accountsReceivable">
|
|
|
- <el-option value="1" label="1"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="settlementStatus" label="结算状态">
|
|
|
- <el-select v-model="form.settlementStatus">
|
|
|
- <el-option value="1" label="1"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="invoicePerson" label="开票人">
|
|
|
- <el-input v-model="form.invoicePerson"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item prop="invoiceDate" label="开票时间">
|
|
|
- <el-date-picker
|
|
|
- type="daterange"
|
|
|
- v-model="form.invoiceDate"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- format="YYYY-MM-DD HH:mm:ss"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="16">
|
|
|
- <el-button type="primary" @click="search">查询</el-button>
|
|
|
- <el-button plain type="primary" @click="reset">重置</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- style="height: calc(100% - 210px)"
|
|
|
- >
|
|
|
- <el-table-column prop="recordId" label="开票记录编号" width="200"></el-table-column>
|
|
|
- <el-table-column prop="companyId" label="保险公司" width="150">
|
|
|
- <template #default="scope">
|
|
|
- {{ getCompanyName(scope.row) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
|
|
|
- <el-table-column prop="accountsReceivable" label="应收项" width="100"></el-table-column>
|
|
|
- <el-table-column prop="receivableSupervisePremium" label="应收手续费" width="120"></el-table-column>
|
|
|
- <el-table-column prop="overinflatedAmount" label="虚增金额" width="120"></el-table-column>
|
|
|
- <el-table-column prop="taxPoint" label="税点" width="120"></el-table-column>
|
|
|
- <el-table-column prop="actualReceivedAmount" label="开票金额" width="120"></el-table-column>
|
|
|
- <el-table-column prop="receivableSupervisePremium" label="应收金额" width="120"></el-table-column>
|
|
|
- <el-table-column prop="settlementStatus" label="结算状态" width="120"></el-table-column>
|
|
|
- <el-table-column prop="a" label="已结算" width="120"></el-table-column>
|
|
|
- <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
|
|
|
- <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
|
|
|
- <el-table-column label="操作" width="150" fixed="right">
|
|
|
- <template #default="scope">
|
|
|
- <el-button link type="primary" @click="handleCount(scope.row)">结算</el-button>
|
|
|
- <el-button link type="primary" @click="handleView(scope.row)">明细查询</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- v-model:current-page="pages"
|
|
|
- v-model:page-size="size"
|
|
|
- :page-sizes="[10, 20, 30, 40]"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- ></el-pagination>
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- v-model="countShow"
|
|
|
- width="600"
|
|
|
- title="开票并结算"
|
|
|
- >
|
|
|
- <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
|
|
|
- <el-form-item prop="invoiceParty" label="开票方">
|
|
|
- <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="receivableSupervisePremium" label="应收手续费">
|
|
|
- <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="overinflatedAmount" label="虚增金额">
|
|
|
- <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="taxPoint" label="税点">
|
|
|
- <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="receivableSupervisePremium" label="应收金额">
|
|
|
- <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="actualReceivedAmount" label="是实收金额">
|
|
|
- <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="receivePaymentDate" label="收款日期">
|
|
|
- <el-date-picker
|
|
|
- v-model="countForm.receivePaymentDate"
|
|
|
- type="datetime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- format="YYYY-MM-DD HH:mm:ss"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
|
|
|
- <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
|
|
|
- <el-button size="large" icon="Plus" />
|
|
|
- </el-upload>
|
|
|
- <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
|
|
|
- <img :src="item" />
|
|
|
- <div class="model">
|
|
|
- <span class="icon-view" @click="handelViewImage(item, index)">
|
|
|
- <el-icon><View /></el-icon>
|
|
|
- </span>
|
|
|
- <span class="icon-del" @click="handelDelImage(item, index)">
|
|
|
- <el-icon><Delete /></el-icon>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <el-button plain @click="handelCancel">取消</el-button>
|
|
|
- <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog
|
|
|
- v-model="imageShow"
|
|
|
- width="400"
|
|
|
- title="查看"
|
|
|
- >
|
|
|
- <img class="bigImage" :src="bigImageUrl">
|
|
|
- </el-dialog>
|
|
|
+ <div class="invoiceRecord">
|
|
|
+ <el-form v-model="form" label-width="120">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="settlementId" label="结算记录编号">
|
|
|
+ <el-input v-model="form.settlementId"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="a" label="保险公司">
|
|
|
+ <el-select
|
|
|
+ v-model="form.companyId"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in companyList"
|
|
|
+ :key="item.companyCode"
|
|
|
+ :value="item.companyCode"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="invoiceParty" label="开票方">
|
|
|
+ <el-select v-model="form.invoiceParty">
|
|
|
+ <el-option value="1" label="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="invoiceType" label="应收项">
|
|
|
+ <el-select v-model="form.invoiceType">
|
|
|
+ <el-option value="1" label="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="status" label="结算状态">
|
|
|
+ <el-select v-model="form.status">
|
|
|
+ <el-option value="1" label="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="settlementPerson" label="结算人">
|
|
|
+ <el-input v-model="form.settlementPerson"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="settlementTime" label="结算时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.settlementTime"
|
|
|
+ type="daterange"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item prop="invoiceId" label="开票记录编号">
|
|
|
+ <el-input v-model="form.invoiceId"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="display: flex; justify-content: flex-end">
|
|
|
+ <el-button type="primary" @click="search()">查询</el-button>
|
|
|
+ <el-button plain type="primary" @click="reset()">重置</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="exportSuperviseSettlementExcel()"
|
|
|
+ >导出结算记录</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-table class="tableRecord" :data="tableData">
|
|
|
+ <el-table-column
|
|
|
+ prop="settlementId"
|
|
|
+ label="结算记录编号"
|
|
|
+ width="200"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="companyName"
|
|
|
+ label="保险公司"
|
|
|
+ width="200"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="invoiceParty"
|
|
|
+ label="开票方"
|
|
|
+ width="150"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="invoiceType"
|
|
|
+ label="应收项"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="taxPoint"
|
|
|
+ label="税点"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="actualReceivedAmount"
|
|
|
+ label="实收金额"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="receivePaymentDate"
|
|
|
+ label="收款日期"
|
|
|
+ width="150"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="收款凭证" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="view">查看凭证（1）</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createBy"
|
|
|
+ label="结算人"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="结算时间"
|
|
|
+ width="200"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pages"
|
|
|
+ v-model:page-size="size"
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange($event)"
|
|
|
+ @current-change="handleCurrentChange($event)"
|
|
|
+ ></el-pagination>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-
|
|
|
import api from "@/api";
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
-
|
|
|
-let form = ref({})
|
|
|
-let tableData = ref([])
|
|
|
|
|
|
-const getCompanyName = (row) => {
|
|
|
- let company = companyList.value.find(item => item.companyCode === row.companyId)
|
|
|
- return company?.name || ''
|
|
|
-}
|
|
|
+let form = ref({});
|
|
|
+let tableData = ref([]);
|
|
|
|
|
|
-let pages = ref(1)
|
|
|
-let size = ref(10)
|
|
|
-let total = ref(0)
|
|
|
+let pages = ref(1);
|
|
|
+let size = ref(10);
|
|
|
+let total = ref(0);
|
|
|
const handleSizeChange = (size) => {
|
|
|
- size.value = size
|
|
|
- initList()
|
|
|
-}
|
|
|
+ size.value = size;
|
|
|
+ initList();
|
|
|
+};
|
|
|
const handleCurrentChange = (pages) => {
|
|
|
- pages.value = pages
|
|
|
- initList()
|
|
|
-}
|
|
|
+ pages.value = pages;
|
|
|
+ initList();
|
|
|
+};
|
|
|
const search = () => {
|
|
|
- pages.value = 1
|
|
|
- size.value = 10
|
|
|
- initList()
|
|
|
-}
|
|
|
+ pages.value = 1;
|
|
|
+ size.value = 10;
|
|
|
+ initList();
|
|
|
+};
|
|
|
const reset = () => {
|
|
|
- form.value = {
|
|
|
- recordId: '',
|
|
|
- companyId: '',
|
|
|
- invoiceParty: '',
|
|
|
- accountsReceivable: '',
|
|
|
- settlementStatus: '',
|
|
|
- invoicePerson: '',
|
|
|
- invoiceDate: []
|
|
|
- }
|
|
|
- pages.value = 1
|
|
|
- size.value = 10
|
|
|
- initList()
|
|
|
-}
|
|
|
-
|
|
|
-let countShow = ref(false)
|
|
|
-let countForm = ref({})
|
|
|
-let countRules = ref({
|
|
|
- actualReceivedAmount: [{ required: true, trigger: "blur", message: "请输入" }],
|
|
|
- receivePaymentDate: [{ required: true, trigger: "change", message: "请选择" }],
|
|
|
- attachmentIds: [{ required: true, message: "请上传" }]
|
|
|
-})
|
|
|
-let imageUrl = ref([])
|
|
|
-let attachmentIds = ref([])
|
|
|
-let invoicingId = ref('')
|
|
|
-const handleCount = (row) => {
|
|
|
- countShow.value = true
|
|
|
- invoicingId.value = row.id
|
|
|
- countForm.value = {
|
|
|
- invoiceParty: row.invoiceParty,
|
|
|
- receivableSupervisePremium: row.receivableSupervisePremium,
|
|
|
- overinflatedAmount: row.overinflatedAmount,
|
|
|
- taxPoint: row.taxPoint,
|
|
|
- }
|
|
|
-}
|
|
|
-const uploadImage = async (file, fileList) => {
|
|
|
- let files = file.raw
|
|
|
- const params = new FormData(); // 声明formData数据类型
|
|
|
- params.append("file", files);
|
|
|
- params.append("type", "image");
|
|
|
- const { code, data, msg } = await api.commonApi.fileUpload(params)
|
|
|
- if(code == 200) {
|
|
|
- imageUrl.value.push(data.downloadUrl)
|
|
|
- attachmentIds.value.push(data.id)
|
|
|
- }
|
|
|
-}
|
|
|
-const handleView = () => {
|
|
|
+ form.value = {
|
|
|
+ recordId: "",
|
|
|
+ companyId: "",
|
|
|
+ invoiceParty: "",
|
|
|
+ accountsReceivable: "",
|
|
|
+ settlementStatus: "",
|
|
|
+ invoicePerson: "",
|
|
|
+ invoiceDate: [],
|
|
|
+ };
|
|
|
+ pages.value = 1;
|
|
|
+ size.value = 10;
|
|
|
+ initList();
|
|
|
+};
|
|
|
|
|
|
+const exportSuperviseSettlementExcel = () => {
|
|
|
+ api.settlementApi.exportSuperviseSettlementExcel({}).then((res: any) => {
|
|
|
+ const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
|
|
|
+ const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
|
|
|
+ if ('download' in document.createElement('a')) {
|
|
|
+ const elink = document.createElement('a');
|
|
|
+ elink.download = fileName;
|
|
|
+ elink.style.display = 'none';
|
|
|
+ elink.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ URL.revokeObjectURL(elink.href);
|
|
|
+ document.body.removeChild(elink);
|
|
|
+ } else {
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 列表
|
|
|
const initList = () => {
|
|
|
- api.invoiceRecordApi.invoiceRecord({
|
|
|
- pages: pages.value,
|
|
|
- size: size.value,
|
|
|
- invoiceType: '3',
|
|
|
- ...form.value
|
|
|
- }).then((res: any) => {
|
|
|
- if(res.code == 200) {
|
|
|
- tableData.value = res.data.records
|
|
|
- total.value = res.data.total
|
|
|
- }
|
|
|
+ api.settlementApi
|
|
|
+ .superviseSettlementExcel({
|
|
|
+ pages: pages.value,
|
|
|
+ size: size.value,
|
|
|
+ agreementType: "1",
|
|
|
+ invoiceTypes: ["1", "3"],
|
|
|
+ ...form.value,
|
|
|
})
|
|
|
-}
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ tableData.value = res.data.records;
|
|
|
+ total.value = res.data.total;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
// 保险公司
|
|
|
-let companyList = ref([])
|
|
|
+let companyList = ref([]);
|
|
|
const initCompany = () => {
|
|
|
- api.insuranceApi.leftList('').then((res: any) => {
|
|
|
- if(res.code == 200) {
|
|
|
- companyList.value = res.data
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-let imageShow = ref(false)
|
|
|
-let bigImageUrl = ref('')
|
|
|
-const handelViewImage = (item, index) => {
|
|
|
- bigImageUrl.value = item
|
|
|
- imageShow.value = true
|
|
|
-}
|
|
|
-const handelDelImage = (item, index) => {
|
|
|
- imageUrl.value.splice(index, 1)
|
|
|
- attachmentIds.value.splice(index, 1)
|
|
|
-}
|
|
|
-
|
|
|
-let CountForm = ref()
|
|
|
-const handelComfirm = (CountForm) => {
|
|
|
- countForm.value.attachmentIds = attachmentIds.value
|
|
|
- if(!CountForm) return
|
|
|
- CountForm.validate((valid) => {
|
|
|
- if(valid) {
|
|
|
- api.financeApi.settlement({
|
|
|
- invoicingId: invoicingId.value,
|
|
|
- actualReceivedAmount: countForm.value.actualReceivedAmount,
|
|
|
- receivePaymentDate: countForm.value.receivePaymentDate,
|
|
|
- attachmentIds: countForm.value.attachmentIds
|
|
|
- }).then((res: any) => {
|
|
|
- countShow.value = false
|
|
|
- if(res.code == 200) {
|
|
|
- ElMessage({
|
|
|
- message: res.msg,
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- } else {
|
|
|
- ElMessage({
|
|
|
- message: res.msg,
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const handelCancel = () => {
|
|
|
- countShow.value = false
|
|
|
- countForm.value = {
|
|
|
- invoiceParty: '',
|
|
|
- receivableSupervisePremium: '',
|
|
|
- overinflatedAmount: '',
|
|
|
- taxPoint: '',
|
|
|
- actualReceivedAmount: '',
|
|
|
- receivePaymentDate: [],
|
|
|
- attachmentIds: []
|
|
|
+ api.insuranceApi.leftList("").then((res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ companyList.value = res.data;
|
|
|
}
|
|
|
- imageUrl.value = []
|
|
|
-}
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initList();
|
|
|
- initCompany();
|
|
|
-})
|
|
|
-
|
|
|
+ initList();
|
|
|
+ initCompany();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.invoiceRecord{
|
|
|
- height: calc(100vh - 134px);
|
|
|
- width: calc(100% - 24px);
|
|
|
- margin: 12px auto;
|
|
|
- padding: 12px;
|
|
|
- background: #FFFFFF;
|
|
|
- overflow-y: auto;
|
|
|
- .pagination{
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+.tableRecord {
|
|
|
+ height: calc(100% - 210px);
|
|
|
+}
|
|
|
+.invoiceRecord {
|
|
|
+ height: calc(100vh - 134px);
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ margin: 12px auto;
|
|
|
+ padding: 12px;
|
|
|
+ background: #ffffff;
|
|
|
+ overflow-y: auto;
|
|
|
+ .pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .upload-btn {
|
|
|
+ :deep(.el-button) {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
- .upload-btn{
|
|
|
- :deep(.el-button) {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- font-size: 30px;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .imageDiv {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ &:hover {
|
|
|
+ .model {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
}
|
|
|
- .imageDiv{
|
|
|
- position: relative;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- margin: 0 10px 10px 0;
|
|
|
- &:hover{
|
|
|
- .model{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: rgba(0, 0, 0, .3);
|
|
|
- }
|
|
|
- }
|
|
|
- img{
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- .model{
|
|
|
- position: absolute;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 4px;
|
|
|
- display: none;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- .icon-view, .icon-del{
|
|
|
- color: #FFFFFF;
|
|
|
- margin: 0 10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
- .bigImage{
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .model {
|
|
|
+ position: absolute;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: none;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .icon-view,
|
|
|
+ .icon-del {
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ .bigImage {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
祁鹏飞