| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | class="opo-query-form" |
| | | :model="queryParams" |
| | | ref="queryForm" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="90px" |
| | | > |
| | | |
| | | <el-form-item label="å票åç§°" prop="invoiceName"> |
| | | <el-input |
| | | v-model="queryParams.invoiceName" |
| | | placeholder="请è¾å
¥å票åç§°" |
| | | clearable |
| | | size="small" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æ¡åå·ç " prop="caseId"> |
| | | <el-input |
| | | v-model="queryParams.caseId" |
| | | placeholder="æ¡åå·ç " |
| | | clearable |
| | | size="small" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æ¥éç¶æ" prop="reimburseState"> |
| | | <el-select |
| | | v-model="queryParams.reimburseState" |
| | | placeholder="è¯·éæ©æ¥éç¶æ" |
| | | clearable |
| | | size="small" |
| | | style="width: 140px" |
| | | > |
| | | <el-option label="æªæ¥é" value="0" /> |
| | | <el-option label="å·²æ¥é" value="1" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-search" |
| | | size="mini" |
| | | @click="handleQuery" |
| | | >æç´¢</el-button |
| | | > |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" |
| | | >éç½®</el-button |
| | | > |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-upload2" |
| | | size="mini" |
| | | @click="handleUpload" |
| | | v-hasPermi="['project:invoice:add']" |
| | | >ä¸ä¼ å票</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar |
| | | :showSearch.sync="showSearch" |
| | | @queryTable="getList" |
| | | ></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table v-loading="loading" border :data="invoiceList"> |
| | | <el-table-column type="index" label="åºå·" width="55" align="center" /> |
| | | <el-table-column label="æ¡ä¾" align="center" prop="caseId" width="100"> |
| | | |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | prop="invoiceType" |
| | | label="å票类å" |
| | | width="130" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="invoiceName" |
| | | label="å票åç§°" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="invoiceNo" |
| | | label="å票å·ç " |
| | | width="150" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="invoiceAmount" |
| | | label="å票éé¢" |
| | | width="120" |
| | | align="center" |
| | | /> |
| | | <el-table-column label="åçæ¥æ" width="120" align="center"> |
| | | <template slot-scope="scope"> |
| | | {{ normalizeDate(scope.row.occurDate) || scope.row.occurDate }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="æ¥éç¶æ" width="110" align="center"> |
| | | <template slot-scope="scope"> |
| | | <el-tag |
| | | size="mini" |
| | | :type=" |
| | | String(scope.row.reimburseState) === '1' ? 'success' : 'info' |
| | | " |
| | | > |
| | | {{ String(scope.row.reimburseState) === "1" ? "å·²æ¥é" : "æªæ¥é" }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="æä½" |
| | | width="200" |
| | | align="center" |
| | | fixed="right" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-view" |
| | | @click="openPreview(scope.row.invoiceUrl)" |
| | | >æä»¶é¢è§</el-button |
| | | > |
| | | <el-button |
| | | v-if="String(scope.row.reimburseState) !== '1'" |
| | | type="text" |
| | | icon="el-icon-check" |
| | | @click="handleReimburse(scope.row)" |
| | | v-hasPermi="['project:invoice:edit']" |
| | | >å·²æ¥é</el-button |
| | | > |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['project:invoice:edit']" |
| | | >ä¿®æ¹</el-button |
| | | > |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['project:invoice:remove']" |
| | | >å é¤</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | :page.sync="queryParams.pageNum" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- ä¸ä¼ å票 / å票信æ¯ç¡®è®¤ --> |
| | | <el-dialog |
| | | :title="title" |
| | | :visible.sync="open" |
| | | width="760px" |
| | | append-to-body |
| | | :close-on-click-modal="false" |
| | | > |
| | | <!-- ç¬¬ä¸æ¥ï¼éæ¡ä¾ãç¨æ·ï¼ä¸ä¼ å票 --> |
| | | <div v-if="mode === 'upload'"> |
| | | <el-form |
| | | ref="uploadForm" |
| | | :model="uploadForm" |
| | | :rules="uploadRules" |
| | | label-width="100px" |
| | | > |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¡ä¾ID" prop="caseId"> |
| | | <el-input |
| | | v-model.number="uploadForm.caseId" |
| | | placeholder="请è¾å
¥æ¡ä¾ID" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <el-form-item label="å票æä»¶"> |
| | | <el-upload |
| | | class="invoice-upload" |
| | | drag |
| | | multiple |
| | | :action="uploadFileUrl" |
| | | :headers="headers" |
| | | :data="uploadData" |
| | | :show-file-list="false" |
| | | :before-upload="beforeUpload" |
| | | :on-success="handleUploadSuccess" |
| | | :on-error="handleUploadError" |
| | | accept="image/*,.pdf" |
| | | > |
| | | <i class="el-icon-upload"></i> |
| | | <div class="el-upload__text"> |
| | | å°å票æå°æ¤å¤ï¼æ<em>ç¹å»ä¸ä¼ </em> |
| | | </div> |
| | | <div class="el-upload__tip" slot="tip"> |
| | | æ¯æå¾çãPDFï¼å¯å¤éæä»¶æ¹éä¸ä¼ ï¼å个æä»¶ä¸è¶
è¿ 10MBï¼ä¸ä¼ åèªå¨è¯å«å票信æ¯ï¼è¯å«ç»æå¯å¨ä¸æ¹ç¼è¾ |
| | | </div> |
| | | </el-upload> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-if="uploadedList.length" |
| | | label="ä¸ä¼ ç»æ" |
| | | > |
| | | <el-table |
| | | :data="uploadedList" |
| | | border |
| | | size="mini" |
| | | max-height="260" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | prop="invoiceNo" |
| | | label="å票å·ç " |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="invoiceType" |
| | | label="å票类å" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="invoiceAmount" |
| | | label="å票éé¢" |
| | | width="110" |
| | | align="center" |
| | | /> |
| | | <el-table-column label="åçæ¥æ" width="120" align="center"> |
| | | <template slot-scope="scope"> |
| | | {{ |
| | | normalizeDate(scope.row.occurDate) || scope.row.occurDate |
| | | }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="æä½" width="80" align="center"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="text" |
| | | @click="openEditForm(scope.row)" |
| | | >ç¼è¾</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <!-- ç¬¬äºæ¥ï¼è¯å«ç»æç¡®è®¤ï¼å段åå¯ä¿®æ¹ --> |
| | | <el-form |
| | | v-else |
| | | ref="form" |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="100px" |
| | | > |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¡ä¾ID" prop="caseId"> |
| | | <el-input |
| | | v-model.number="form.caseId" |
| | | placeholder="请è¾å
¥æ¡ä¾ID" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票类å" prop="invoiceType"> |
| | | <el-input |
| | | v-model="form.invoiceType" |
| | | placeholder="请è¾å
¥å票类å" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票åç§°" prop="invoiceName"> |
| | | <el-input |
| | | v-model="form.invoiceName" |
| | | placeholder="请è¾å
¥å票åç§°" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票å·ç " prop="invoiceNo"> |
| | | <el-input |
| | | v-model="form.invoiceNo" |
| | | placeholder="请è¾å
¥å票å·ç " |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票éé¢" prop="invoiceAmount"> |
| | | <el-input |
| | | v-model="form.invoiceAmount" |
| | | placeholder="请è¾å
¥å票éé¢" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åçæ¥æ" prop="occurDate"> |
| | | <el-date-picker |
| | | v-model="form.occurDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="è¯·éæ©åçæ¥æ" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="å票å¼å§æ¥æ" prop="invoiceStartDate"> |
| | | <el-date-picker |
| | | v-model="form.invoiceStartDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="è¯·éæ©å票å¼å§æ¥æ" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åç¥¨ç»ææ¥æ" prop="invoiceEndDate"> |
| | | <el-date-picker |
| | | v-model="form.invoiceEndDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="è¯·éæ©åç¥¨ç»ææ¥æ" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="é宿¹åç§°" prop="sellerName"> |
| | | <el-input |
| | | v-model="form.sellerName" |
| | | placeholder="请è¾å
¥é宿¹åç§°" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¥éç¶æ" prop="reimburseState"> |
| | | <el-select |
| | | v-model="form.reimburseState" |
| | | placeholder="è¯·éæ©æ¥éç¶æ" |
| | | style="width: 100%" |
| | | > |
| | | <el-option label="æªæ¥é" value="0" /> |
| | | <el-option label="å·²æ¥é" value="1" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="夿³¨" prop="remark"> |
| | | <el-input |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | :rows="2" |
| | | maxlength="500" |
| | | show-word-limit |
| | | placeholder="请è¾å
¥å¤æ³¨" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="å票é¢è§"> |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-view" |
| | | :disabled="!form.invoiceUrl" |
| | | @click="openPreview(form.invoiceUrl)" |
| | | >æä»¶é¢è§</el-button |
| | | > |
| | | <el-image |
| | | v-if=" |
| | | form.invoiceUrl && getFileType(form.invoiceUrl) === 'image' |
| | | " |
| | | :src="form.invoiceUrl" |
| | | :preview-src-list="[form.invoiceUrl]" |
| | | fit="contain" |
| | | class="invoice-thumb" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button |
| | | v-if="mode === 'edit' && uploadedList.length > 1" |
| | | @click="mode = 'upload'" |
| | | >è¿åå表</el-button |
| | | > |
| | | <el-button @click="open = false">å æ¶</el-button> |
| | | <el-button |
| | | v-if="mode === 'edit'" |
| | | type="primary" |
| | | :loading="saving" |
| | | @click="submitForm" |
| | | >ä¿ å</el-button |
| | | > |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | <!-- å票æä»¶é¢è§ --> |
| | | <el-dialog |
| | | title="å票æä»¶é¢è§" |
| | | :visible.sync="previewOpen" |
| | | width="900px" |
| | | append-to-body |
| | | :destroy-on-close="true" |
| | | > |
| | | <div class="invoice-preview"> |
| | | <img |
| | | v-if="previewType === 'image'" |
| | | :src="previewUrl" |
| | | class="preview-image" |
| | | /> |
| | | <iframe |
| | | v-else-if="previewType === 'pdf'" |
| | | :src="previewUrl" |
| | | class="preview-frame" |
| | | ></iframe> |
| | | <div v-else class="preview-tip"> |
| | | 该æä»¶ç±»å䏿¯æå¨çº¿é¢è§ï¼è¯· |
| | | <el-link type="primary" :href="previewUrl" target="_blank" |
| | | >卿°çªå£æå¼</el-link |
| | | > |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | listInvoice, |
| | | getInvoice, |
| | | updateInvoice, |
| | | delInvoice |
| | | } from "@/api/project/invoice"; |
| | | import { getUserProfile } from "@/api/system/user"; |
| | | import { getToken } from "@/utils/auth"; |
| | | |
| | | |
| | | |
| | | export default { |
| | | name: "ServiceInvoice", |
| | | data() { |
| | | return { |
| | | // é®ç½©å± |
| | | loading: false, |
| | | // æ¾ç¤ºæç´¢æ¡ä»¶ |
| | | showSearch: true, |
| | | // æ»æ¡æ° |
| | | total: 0, |
| | | // å票å表 |
| | | invoiceList: [], |
| | | // å¼¹çª |
| | | open: false, |
| | | // uploadï¼ä¸ä¼ å票ï¼editï¼è¯å«ç»æç¡®è®¤ |
| | | mode: "upload", |
| | | title: "", |
| | | saving: false, |
| | | // å½åç»å½ç¨æ·IDï¼ç¨ä½é»è®¤ç¨æ·ID |
| | | currentUserId: null, |
| | | // æä»¶ä¸ä¼ å°åä¸è¯·æ±å¤´ |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/project/invoice/uploadOCR", |
| | | headers: { |
| | | Authorization: "Bearer " + getToken() |
| | | }, |
| | | // ä¸ä¼ é¶æ®µè¡¨åï¼ç¨æ·IDåå½åç»å½ç¨æ·ï¼ä¸å¨æ¤å¤ç¼è¾ï¼ |
| | | uploadForm: { |
| | | caseId: "" |
| | | }, |
| | | uploadRules: { |
| | | |
| | | }, |
| | | // æ¬æ¬¡ä¸ä¼ è¯å«åºçåç¥¨ï¼æ¯æä¸æ¬¡å¤å¼ ï¼ |
| | | uploadedList: [], |
| | | // æ£å¨ä¸ä¼ çæä»¶æ°ï¼ç¨äºå¤æä¸æ¹ä¸ä¼ æ¯å¦ç»æ |
| | | uploadingCount: 0, |
| | | // è¯å«ç»æ / ä¿®æ¹è¡¨å |
| | | form: {}, |
| | | rules: { |
| | | |
| | | }, |
| | | // æä»¶é¢è§ |
| | | previewOpen: false, |
| | | previewUrl: "", |
| | | // image / pdf / other |
| | | previewType: "", |
| | | // æ¥è¯¢åæ° |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | caseId: "", |
| | | userId: this.currentUserId, |
| | | invoiceName: "", |
| | | reimburseState: "" |
| | | |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | | // ä¸ä¼ æ¶æºå¸¦çç¨æ·IDï¼å½åç»å½ç¨æ·ï¼ãæ¡ä¾IDï¼å端 uploadOCR å¿
ä¼ ï¼ |
| | | uploadData() { |
| | | return { |
| | | userId: this.currentUserId, |
| | | caseId: this.uploadForm.caseId |
| | | }; |
| | | } |
| | | }, |
| | | async created() { |
| | | await this.getCurrentUser(); |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | | /** æ¥è¯¢å票å表 */ |
| | | getList() { |
| | | this.loading = true; |
| | | this.queryParams.userId=this.currentUserId |
| | | listInvoice(this.queryParams) |
| | | .then(response => { |
| | | this.invoiceList = response.rows; |
| | | this.total = response.total; |
| | | }) |
| | | .finally(() => { |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | /** å½åç»å½ç¨æ·IDï¼åæ®çç¨æ·IDç´æ¥åè¯¥å¼ */ |
| | | async getCurrentUser() { |
| | | try { |
| | | const response = await getUserProfile(); |
| | | this.currentUserId = response.data ? response.data.userId : 0; |
| | | } catch (e) { |
| | | this.currentUserId = 0; |
| | | } |
| | | return this.currentUserId; |
| | | }, |
| | | /** æ¡ä¾ä¸ææ¾ç¤ºææ¬ */ |
| | | formatCase(item) { |
| | | if (!item) { |
| | | return ""; |
| | | } |
| | | return [item.donorno, item.name].filter(Boolean).join(" "); |
| | | }, |
| | | |
| | | /** æ¥æç»ä¸æ yyyy-MM-ddï¼å
¼å®¹ OCR çâ2024å¹´01æ02æ¥âçæ ¼å¼ */ |
| | | normalizeDate(value) { |
| | | if (!value) { |
| | | return null; |
| | | } |
| | | const text = String(value) |
| | | .replace(/[å¹´æ]/g, "-") |
| | | .replace(/æ¥/g, "") |
| | | .replace(/\//g, "-") |
| | | .trim(); |
| | | const match = text.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/); |
| | | if (!match) { |
| | | return null; |
| | | } |
| | | return ( |
| | | match[1] + |
| | | "-" + |
| | | String(match[2]).padStart(2, "0") + |
| | | "-" + |
| | | String(match[3]).padStart(2, "0") |
| | | ); |
| | | }, |
| | | /** æç´¢æé®æä½ */ |
| | | handleQuery() { |
| | | this.queryParams.pageNum = 1; |
| | | this.getList(); |
| | | }, |
| | | /** éç½®æé®æä½ */ |
| | | resetQuery() { |
| | | this.queryParams.caseId = ""; |
| | | this.queryParams.invoiceName = ""; |
| | | this.queryParams.reimburseState = ""; |
| | | this.queryParams.pageNum = 1; |
| | | this.getList(); |
| | | }, |
| | | /** ä¸ä¼ å票æé®æä½ */ |
| | | async handleUpload() { |
| | | if (!this.currentUserId) { |
| | | await this.getCurrentUser(); |
| | | } |
| | | this.uploadForm = { |
| | | caseId: "" |
| | | }; |
| | | this.uploadedList = []; |
| | | this.uploadingCount = 0; |
| | | this.form = {}; |
| | | this.mode = "upload"; |
| | | this.title = "ä¸ä¼ å票"; |
| | | this.open = true; |
| | | }, |
| | | /** ä¸ä¼ åæ ¡éª */ |
| | | beforeUpload(file) { |
| | | if (!this.currentUserId) { |
| | | this.$modal.msgWarning("æªè·åå°å½åç¨æ·IDï¼è¯·éæ°ç»å½ååè¯"); |
| | | return false; |
| | | } |
| | | const isAllowed = /\.(jpg|jpeg|png|gif|bmp|pdf)$/i.test(file.name); |
| | | const isLt10M = file.size / 1024 / 1024 < 10; |
| | | if (!isAllowed) { |
| | | this.$modal.msgError("ä»
æ¯æå¾çãPDFæ ¼å¼çå票æä»¶"); |
| | | return false; |
| | | } |
| | | if (!isLt10M) { |
| | | this.$modal.msgError("å票æä»¶å¤§å°ä¸è½è¶
è¿10MB"); |
| | | return false; |
| | | } |
| | | this.uploadingCount++; |
| | | return true; |
| | | }, |
| | | /** ä¸ä¼ æåï¼å端已 OCR å¹¶ä¿åï¼ç»ææ±æ»å°æ¬æ¬¡ä¸ä¼ å表 */ |
| | | handleUploadSuccess(response) { |
| | | this.uploadingCount = Math.max(0, this.uploadingCount - 1); |
| | | if (!response || response.code !== 200) { |
| | | this.$modal.msgError((response && response.msg) || "å票ä¸ä¼ 失败"); |
| | | this.afterUploadBatch(); |
| | | return; |
| | | } |
| | | const invoiceList = response.invoiceList || []; |
| | | this.uploadedList = this.uploadedList.concat(invoiceList); |
| | | this.getList(); |
| | | if (!invoiceList.length) { |
| | | this.$modal.msgWarning("该æä»¶æªè¯å«å°å票信æ¯ï¼è¯·ç¡®è®¤æä»¶æ¸
æ°"); |
| | | } else { |
| | | this.$modal.msgSuccess( |
| | | "å票ä¸ä¼ æåï¼è¯å«å° " + invoiceList.length + " å¼ å票" |
| | | ); |
| | | } |
| | | this.afterUploadBatch(); |
| | | }, |
| | | /** 䏿¹ä¸ä¼ ç»æåï¼åªè¯å«å°ä¸å¼ å票æ¶ç´æ¥è¿å
¥ä¿¡æ¯ç¡®è®¤ */ |
| | | afterUploadBatch() { |
| | | if (this.uploadingCount > 0) { |
| | | return; |
| | | } |
| | | if (this.uploadedList.length === 1) { |
| | | this.openEditForm(this.uploadedList[0]); |
| | | } |
| | | }, |
| | | /** ä¸ä¼ 失败 */ |
| | | handleUploadError() { |
| | | this.uploadingCount = Math.max(0, this.uploadingCount - 1); |
| | | this.$modal.msgError("å票ä¸ä¼ 失败ï¼è¯·ç¨åéè¯"); |
| | | this.afterUploadBatch(); |
| | | }, |
| | | /** æå¼å票信æ¯ç¡®è®¤å¼¹çª */ |
| | | openEditForm(record) { |
| | | this.form = { |
| | | id: record.id, |
| | | caseId: record.caseId, |
| | | userId: record.userId, |
| | | invoiceType: record.invoiceType, |
| | | invoiceName: record.invoiceName, |
| | | invoiceNo: record.invoiceNo, |
| | | invoiceUrl: record.invoiceUrl, |
| | | invoiceAmount: record.invoiceAmount, |
| | | occurDate: this.normalizeDate(record.occurDate), |
| | | invoiceStartDate: this.normalizeDate(record.invoiceStartDate), |
| | | invoiceEndDate: this.normalizeDate(record.invoiceEndDate), |
| | | sellerName: record.sellerName, |
| | | reimburseState: record.reimburseState || "0", |
| | | remark: record.remark |
| | | }; |
| | | this.mode = "edit"; |
| | | this.title = "å票信æ¯ç¡®è®¤"; |
| | | this.open = true; |
| | | }, |
| | | /** ä¿®æ¹æé®æä½ */ |
| | | handleUpdate(row) { |
| | | getInvoice(row.id).then(response => { |
| | | this.openEditForm(response.data); |
| | | }); |
| | | }, |
| | | /** æä»¶é¢è§ï¼å¾çãPDF å¼¹çªå
é¢è§ï¼å
¶å®ç±»åæç¤ºæ°çªå£æå¼ */ |
| | | openPreview(url) { |
| | | if (!url) { |
| | | this.$modal.msgWarning("è¯¥è®°å½ææ å票æä»¶"); |
| | | return; |
| | | } |
| | | this.previewUrl = url; |
| | | this.previewType = this.getFileType(url); |
| | | this.previewOpen = true; |
| | | }, |
| | | /** æ ¹æ®æä»¶å°å夿é¢è§ç±»å */ |
| | | getFileType(url) { |
| | | const path = String(url || "") |
| | | .split("?")[0] |
| | | .toLowerCase(); |
| | | if (/\.(jpg|jpeg|png|gif|bmp|webp)$/.test(path)) { |
| | | return "image"; |
| | | } |
| | | if (/\.pdf$/.test(path)) { |
| | | return "pdf"; |
| | | } |
| | | return "other"; |
| | | }, |
| | | /** ä¿åä¿®æ¹ */ |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | if (!valid) { |
| | | return; |
| | | } |
| | | this.saving = true; |
| | | updateInvoice(this.form) |
| | | .then(() => { |
| | | this.$modal.msgSuccess("ä¿åæå"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }) |
| | | .finally(() => { |
| | | this.saving = false; |
| | | }); |
| | | }); |
| | | }, |
| | | /** æä½åâå·²æ¥éâï¼ææ¥éç¶æç½®ä¸º 1 */ |
| | | handleReimburse(row) { |
| | | this.$modal |
| | | .confirm('确认å票"' + (row.invoiceName || row.invoiceNo) + '"å·²æ¥éï¼') |
| | | .then(() => updateInvoice({ id: row.id, reimburseState: "1" })) |
| | | .then(() => { |
| | | this.$modal.msgSuccess("æä½æå"); |
| | | this.getList(); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | /** å é¤æé®æä½ */ |
| | | handleDelete(row) { |
| | | this.$modal |
| | | .confirm('æ¯å¦ç¡®è®¤å é¤å票"' + (row.invoiceNo || row.id) + '"ï¼') |
| | | .then(() => delInvoice(row.id)) |
| | | .then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("å 餿å"); |
| | | }) |
| | | .catch(() => {}); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .invoice-upload { |
| | | width: 100%; |
| | | |
| | | ::v-deep .el-upload { |
| | | width: 100%; |
| | | } |
| | | |
| | | ::v-deep .el-upload-dragger { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .invoice-thumb { |
| | | width: 100px; |
| | | height: 70px; |
| | | margin-left: 12px; |
| | | border: 1px solid #ebeef5; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .invoice-preview { |
| | | min-height: 120px; |
| | | |
| | | .preview-image { |
| | | display: block; |
| | | max-width: 100%; |
| | | max-height: 70vh; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .preview-frame { |
| | | width: 100%; |
| | | height: 70vh; |
| | | border: none; |
| | | } |
| | | |
| | | .preview-tip { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | color: #909399; |
| | | } |
| | | } |
| | | </style> |