|
|
@@ -30,27 +30,90 @@
|
|
|
:height="tableHeight"
|
|
|
>
|
|
|
<el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
|
|
|
- <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
|
|
|
- <!-- <el-table-column prop="patentId" label="专利id"> </el-table-column> -->
|
|
|
- <el-table-column prop="feeMaintenanceId" label="官费类型名称id"> </el-table-column>
|
|
|
- <el-table-column prop="status" label="支付状态" :formatter="statusFormatter"> </el-table-column>
|
|
|
- <el-table-column prop="patentPartnerId" label="专利权人"> </el-table-column>
|
|
|
- <el-table-column prop="payPartnerId" label="支付对象"> </el-table-column>
|
|
|
- <el-table-column prop="amount" label="金额"> </el-table-column>
|
|
|
- <el-table-column prop="currencyMaintenanceId" label="币种"> </el-table-column>
|
|
|
- <el-table-column prop="paymentDeadline" label="支付期限"> </el-table-column>
|
|
|
- <el-table-column prop="paymentDate" label="支付日期"> </el-table-column>
|
|
|
- <el-table-column prop="remark" label="备注"> </el-table-column>
|
|
|
- <el-table-column prop="invoiceReturn" label="是否发票回传">
|
|
|
+ <el-table-column prop="id" label="ID" width="100"> </el-table-column>
|
|
|
+ <el-table-column prop="patentId" label="专利id"> </el-table-column>
|
|
|
+ <el-table-column prop="feeType" label="费用种别" min-width="80px"> </el-table-column>
|
|
|
+ <el-table-column prop="feeName" label="费用种别" min-width="80px"> </el-table-column>
|
|
|
+ <el-table-column prop="status" label="支付状态" min-width="80px">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <el-tag :type="row.invoiceReturn ? '' : 'info'">{{ row.invoiceReturn }}</el-tag>
|
|
|
+ <el-tag :type="row.status === 'UNPAID' ? 'warning' : ''">{{ statusFormatter(row.status) }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="userId" label="userId"> </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" fixed="right" min-width="150">
|
|
|
+ <el-table-column prop="patentPartner" label="专利权人" min-width="120px"> </el-table-column>
|
|
|
+ <el-table-column prop="payPartner" label="支付对象" min-width="120px"> </el-table-column>
|
|
|
+ <el-table-column prop="amount" label="金额" min-width="120px"> </el-table-column>
|
|
|
+ <el-table-column prop="currency" label="币种" min-width="100px"> </el-table-column>
|
|
|
+ <el-table-column prop="paymentDeadline" label="支付期限" min-width="100px"> </el-table-column>
|
|
|
+ <el-table-column prop="bill" label="账单" min-width="100px"> </el-table-column>
|
|
|
+ <el-table-column prop="billImg" label="账单图片" min-width="100px">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
|
|
|
- <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
|
|
|
+ <el-image
|
|
|
+ style="width: 36px; height: 36px;"
|
|
|
+ :src="row.billImg"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[row.billImg]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="paymentDate" label="支付日期" min-width="100px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="row.status === 'UNPAID'" class="warning">未支付</span>
|
|
|
+
|
|
|
+ <span v-else>{{ row.paymentDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="paymentImg" label="付款图片" min-width="100px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="row.status === 'UNPAID'" class="warning">未支付</span>
|
|
|
+
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ style="width: 36px; height: 36px;"
|
|
|
+ :src="row.paymentImg"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[row.paymentImg]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="invoiceReturn" label="是否发票回传" min-width="120px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="!row.invoiceReturn && row.invoiceReturn !== false" class="warning">未操作</span>
|
|
|
+ <el-tag v-else :type="row.invoiceReturn ? '' : 'info'">{{
|
|
|
+ row.invoiceReturn ? '是' : '否'
|
|
|
+ }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="paymentImg" label="发票图片" min-width="100px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="!row.invoiceReturn" class="warning">未回传</span>
|
|
|
+
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ style="width: 36px; height: 36px;"
|
|
|
+ :src="row.invoiceImg"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[row.invoiceImg]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="userId" label="userId"> </el-table-column> -->
|
|
|
+ <el-table-column label="操作" align="center" fixed="right" min-width="150px">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div class="table-btn-list">
|
|
|
+ <el-button v-if="row.status === 'UNPAID'" @click="payRow(row)" type="primary" size="mini" plain>
|
|
|
+ 支付费用
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-else-if="!row.invoiceReturn && row.invoiceReturn !== false"
|
|
|
+ @click="returnRow(row)"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ plain
|
|
|
+ >
|
|
|
+ 发票回传
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" size="mini" plain @click="editRow(row)">编辑</el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -75,12 +138,21 @@
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
+
|
|
|
+ <pay ref="pay" @refreash="getData" :info="editPayInfo"></pay>
|
|
|
+
|
|
|
+ <back-bill ref="backBill" @refreash="getData" :info="editPayInfo"></back-bill>
|
|
|
+ <fee-edit ref="edit" @refreash="getData"></fee-edit>
|
|
|
+ <fee-add ref="feeAdd" :info="editPayInfo" @refreash="getData"></fee-add>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapState } from 'vuex';
|
|
|
import pageableTable from '@/mixins/pageableTable';
|
|
|
-
|
|
|
+import Pay from '../components/fee/Pay.vue';
|
|
|
+import BackBill from '../components/fee/BackBill.vue';
|
|
|
+import FeeEdit from '../components/fee/FeeEdit.vue';
|
|
|
+import FeeAdd from '../components/fee/FeeAdd.vue';
|
|
|
export default {
|
|
|
name: 'FeeList',
|
|
|
mixins: [pageableTable],
|
|
|
@@ -93,7 +165,8 @@ export default {
|
|
|
statusOptions: [
|
|
|
{ label: '已支付', value: 'PAID' },
|
|
|
{ label: '未支付', value: 'UNPAID' }
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ editPayInfo: {}
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -102,7 +175,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- statusFormatter(row, column, cellValue, index) {
|
|
|
+ statusFormatter(cellValue) {
|
|
|
let selectedOption = this.statusOptions.find(i => i.value === cellValue);
|
|
|
if (selectedOption) {
|
|
|
return selectedOption.label;
|
|
|
@@ -119,20 +192,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
addRow() {
|
|
|
- this.$router.push({
|
|
|
- path: '/feeEdit',
|
|
|
- query: {
|
|
|
- ...this.$route.query
|
|
|
- }
|
|
|
- });
|
|
|
+ this.$refs.feeAdd.show = true;
|
|
|
+ },
|
|
|
+ payRow(row) {
|
|
|
+ console.log(row);
|
|
|
+ this.editPayInfo = row;
|
|
|
+ this.$refs.pay.init();
|
|
|
+ },
|
|
|
+ returnRow(row) {
|
|
|
+ this.editPayInfo = row;
|
|
|
+ this.$refs.backBill.init();
|
|
|
},
|
|
|
editRow(row) {
|
|
|
- this.$router.push({
|
|
|
- path: '/feeEdit',
|
|
|
- query: {
|
|
|
- id: row.id
|
|
|
- }
|
|
|
- });
|
|
|
+ this.$refs.edit.init(row);
|
|
|
},
|
|
|
download() {
|
|
|
this.downloading = true;
|
|
|
@@ -182,7 +254,22 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Pay,
|
|
|
+ BackBill,
|
|
|
+ FeeEdit,
|
|
|
+ FeeAdd
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.list-view {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+.warning {
|
|
|
+ color: @prim;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+</style>
|