|
|
@@ -0,0 +1,597 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud :option="option"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :page.sync="page"
|
|
|
+ :search.sync="query"
|
|
|
+ v-model="form"
|
|
|
+ ref="crud"
|
|
|
+ id="out-table"
|
|
|
+ :header-cell-class-name="headerClassName"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 333)"
|
|
|
+ @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 333)"
|
|
|
+ @on-load="onLoad" >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button type="success" size="small" plain @click="exportfun" >导出</el-button>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="dcSearch">
|
|
|
+ <el-radio v-model="query.dc" label="D" @input="dcInput" >应收</el-radio>
|
|
|
+ <el-radio v-model="query.dc" label="C" @input="dcInput" >应付</el-radio>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="typeSearch">
|
|
|
+ <search-query :datalist="typeData"
|
|
|
+ :selectValue="query.type"
|
|
|
+ :buttonIf="false"
|
|
|
+ @corpChange="corpChange($event,'type')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="businessTypeSearch">
|
|
|
+ <search-query :datalist="businessTypeData"
|
|
|
+ :selectValue="query.businessType"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ @corpChange="corpChange($event,'businessType')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="clientIdSearch">
|
|
|
+ <search-query :datalist="clientIdData"
|
|
|
+ :selectValue="query.clientName"
|
|
|
+ :filterable="true"
|
|
|
+ :remote="true"
|
|
|
+ :clearable="true"
|
|
|
+ :disabled="query.type != 2"
|
|
|
+ :buttonIf="false"
|
|
|
+ :forParameter="{key:'id',label:'cnName',value:'cnName'}"
|
|
|
+ @remoteMethod="clientIdListfun"
|
|
|
+ @corpFocus="clientIdListfun"
|
|
|
+ @corpChange="corpChange($event,'clientName')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="corpIdSearch">
|
|
|
+ <search-query :datalist="corpIdData"
|
|
|
+ :selectValue="query.corpName"
|
|
|
+ :disabled="query.type != 1"
|
|
|
+ :filterable="true"
|
|
|
+ :remote="true"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ :forParameter="{key:'id',label:'cnName',value:'cnName'}"
|
|
|
+ @remoteMethod="getBcorpsListfun"
|
|
|
+ @corpFocus="getBcorpsListfun"
|
|
|
+ @corpChange="corpChange($event,'corpName')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="srcTypeSearch">
|
|
|
+ <search-query :datalist="srcTypeData"
|
|
|
+ :selectValue="query.srcType"
|
|
|
+ :disabled="query.type != 3"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ :forParameter="{ key:'dictKey', label:'dictValue', value:'dictKey'}"
|
|
|
+ @corpFocus="srcTypeWorkDictsfun"
|
|
|
+ @corpChange="corpChange($event,'srcType')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="srcIdSearch">
|
|
|
+ <search-query :datalist="srcIdData"
|
|
|
+ :selectValue="query.srcName"
|
|
|
+ :disabled="query.type != 3"
|
|
|
+ :filterable="true"
|
|
|
+ :remote="true"
|
|
|
+ :clearable="true"
|
|
|
+ :buttonIf="false"
|
|
|
+ :forParameter="srcforParameter"
|
|
|
+ @remoteMethod="srcCorpFocus"
|
|
|
+ @corpFocus="srcCorpFocus"
|
|
|
+ @corpChange="corpChange($event,'srcName')">
|
|
|
+ </search-query>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{disabled,size}" slot="isBusinessDateSearch">
|
|
|
+ <el-checkbox v-model="query.isBusinessDate" :true-label="1" :false-label="0" @change="dateChange('isBusinessDate')" >按业务日期</el-checkbox>
|
|
|
+ <el-checkbox v-model="query.isToExamineDate" :true-label="1" :false-label="0" @change="dateChange('isToExamineDate')" >按审核日期</el-checkbox>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
|
|
|
+import {CurrentMonth, dateFormat, defaultDate3, defaultDate4} from "@/util/date";
|
|
|
+import { financeStatisticsFeeSummaryDetail} from "@/api/iosBasicData/paymentSummary"
|
|
|
+import {getBcorpsList, getBcorpslistByType} from "@/api/iosBasicData/bcorps";
|
|
|
+import {getWorkDicts} from "@/api/system/dictbiz";
|
|
|
+import {getDeptLazyTree} from "@/api/system/dept";
|
|
|
+import {getList as userGetList} from '@/api/system/user'
|
|
|
+import {getToken} from "@/util/auth";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {SearchQuery},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ loading: true,
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ query: {
|
|
|
+ dc:'D',
|
|
|
+ isBusinessDate:1,
|
|
|
+ type:'1',
|
|
|
+ etdStart:defaultDate3()[0],
|
|
|
+ etdEnd:defaultDate3()[1],
|
|
|
+ },
|
|
|
+ option:{},
|
|
|
+ optionBack:{
|
|
|
+ height:'auto',
|
|
|
+ calcHeight: 30,
|
|
|
+ tip: false,
|
|
|
+ searchShow: true,
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ border: true,
|
|
|
+ index: false,
|
|
|
+ selection: true,
|
|
|
+ dialogClickModal: false,
|
|
|
+ menu:false,
|
|
|
+ addBtn:false,
|
|
|
+ viewBtn:false,
|
|
|
+ delBtn:false,
|
|
|
+ editBtn:false,
|
|
|
+ column:[
|
|
|
+ {
|
|
|
+ label: "结算单位",
|
|
|
+ prop: "corpName",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "BILLNO",
|
|
|
+ prop: "billNo",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "MBLNO",
|
|
|
+ prop: "mblNo",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "ETD",
|
|
|
+ prop: "etdDate",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "应收美金",
|
|
|
+ prop: "amountUsd",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "应收人民币",
|
|
|
+ prop: "amount",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "已收款美金",
|
|
|
+ prop: "amountUsdAlready",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "已收款人民币",
|
|
|
+ prop: "amountAlready",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "未收款美金",
|
|
|
+ prop: "amountUsdNot",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "未收款人民币",
|
|
|
+ prop: "amountNot",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "开票美金",
|
|
|
+ prop: "amountInvoicingUsd",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "开票人民币",
|
|
|
+ prop: "amountInvoicing",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "未开美金",
|
|
|
+ prop: "amountInvoicingUsdNot",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "未开人民币",
|
|
|
+ prop: "amountInvoicingNot",
|
|
|
+ overHidden:true,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: "查询方式",
|
|
|
+ prop: "type",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ type: 'select',
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "业务类型",
|
|
|
+ prop: "businessType",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "委托人",
|
|
|
+ prop: "clientId",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "结算单位",
|
|
|
+ prop: "corpId",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "业务来源",
|
|
|
+ prop: "srcType",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "业务员",
|
|
|
+ prop: "srcId",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "开始日期",
|
|
|
+ prop: "etdStart",
|
|
|
+ search:true,
|
|
|
+ overHidden:true,
|
|
|
+ hide:true,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "结束日期",
|
|
|
+ prop: "etdEnd",
|
|
|
+ search:true,
|
|
|
+ overHidden:true,
|
|
|
+ hide:true,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ prop: "dc",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ searchLabelWidth:'0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ prop: "isBusinessDate",
|
|
|
+ hide:true,
|
|
|
+ search:true,
|
|
|
+ searchslot:true,
|
|
|
+ searchLabelWidth:'0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "",
|
|
|
+ prop: "isToExamineDate",
|
|
|
+ hide:true,
|
|
|
+ searchLabelWidth:'0',
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data:[],
|
|
|
+ // 查询方式
|
|
|
+ typeData:[
|
|
|
+ {
|
|
|
+ label:'结算单位',
|
|
|
+ value:'1'
|
|
|
+ },{
|
|
|
+ label:'委托人',
|
|
|
+ value:'2'
|
|
|
+ },{
|
|
|
+ label:'业务来源',
|
|
|
+ value:'3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 业务类型
|
|
|
+ businessTypeData:[
|
|
|
+ {
|
|
|
+ label:'海运出口',
|
|
|
+ value:'HYCK'
|
|
|
+ },{
|
|
|
+ label:'海运进口',
|
|
|
+ value:'HYJK'
|
|
|
+ },{
|
|
|
+ label:'空运出口',
|
|
|
+ value:'KYCK'
|
|
|
+ },{
|
|
|
+ label:'空运进口',
|
|
|
+ value:'KYJK'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ clientIdData:[], // 委托人
|
|
|
+ corpIdData:[], // 结算单位
|
|
|
+ srcTypeData:[], // 业务来源
|
|
|
+ srcIdData:[], // 业务员
|
|
|
+ srcforParameter:{key:'id', label:'cnName', value:'cnName'},
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.option = await this.getColumnData(this.getColumnName(333), this.optionBack);
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 导出
|
|
|
+ exportfun(){
|
|
|
+ const routeData = this.$router.resolve({
|
|
|
+ path: '/api/blade-los/financeStatistics/feeSummaryDetailExport',//跳转目标窗口的地址
|
|
|
+ query: {
|
|
|
+ ...this.query
|
|
|
+ }
|
|
|
+ })
|
|
|
+ window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
|
|
|
+ },
|
|
|
+ // 下拉监听
|
|
|
+ corpChange(value,name){
|
|
|
+ if (name == 'type') {
|
|
|
+ if (value == 1) {
|
|
|
+ this.$set(this.query,'clientId',null)
|
|
|
+ this.$set(this.query,'clientName',null)
|
|
|
+ this.$set(this.query,'srcType',null)
|
|
|
+ this.$set(this.query,'srcId',null)
|
|
|
+ this.$set(this.query,'srcName',null)
|
|
|
+ this.findObject(this.option.column, "corpName").label = '结算单位'
|
|
|
+ }else if (value == 2) {
|
|
|
+ this.$set(this.query,'corpId',null)
|
|
|
+ this.$set(this.query,'corpName',null)
|
|
|
+ this.$set(this.query,'srcType',null)
|
|
|
+ this.$set(this.query,'srcId',null)
|
|
|
+ this.$set(this.query,'srcName',null)
|
|
|
+ this.findObject(this.option.column, "corpName").label = '委托人'
|
|
|
+ }else if (value == 3) {
|
|
|
+ this.$set(this.query,'corpId',null)
|
|
|
+ this.$set(this.query,'corpName',null)
|
|
|
+ this.$set(this.query,'clientId',null)
|
|
|
+ this.$set(this.query,'clientName',null)
|
|
|
+ this.findObject(this.option.column, "corpName").label = '业务来源'
|
|
|
+ }
|
|
|
+ this.$set(this.query,name,value)
|
|
|
+ }else if (name == 'corpName') {
|
|
|
+ for (let item of this.corpIdData) {
|
|
|
+ if (item.cnName == value) {
|
|
|
+ this.$set(this.query,'corpId',item.corpId)
|
|
|
+ this.$set(this.query,'corpName',item.corpName)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (name == 'clientName') {
|
|
|
+ for (let item of this.clientIdData) {
|
|
|
+ if (item.cnName == value) {
|
|
|
+ this.$set(this.query,'clientId',item.corpId)
|
|
|
+ this.$set(this.query,'clientName',item.corpName)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if (name == 'srcType') {
|
|
|
+ if (value == 'OWN') {
|
|
|
+ // 公司
|
|
|
+ this.srcforParameter = { key:'id', label:'title', value:'title'}
|
|
|
+ this.ownDeptLazyTreefun()
|
|
|
+ }else if (value == 'AGENT') {
|
|
|
+ // 代理
|
|
|
+ this.srcforParameter = { key:'id', label:'cnName', value:'cnName'}
|
|
|
+ this.agentBcorpsListfun()
|
|
|
+ }else if (value == 'SALES') {
|
|
|
+ // 业务员
|
|
|
+ this.srcforParameter = { key:'id', label:'name', value:'name'}
|
|
|
+ this.salesUserGetListfun()
|
|
|
+ }else {}
|
|
|
+ this.$set(this.query,name,value)
|
|
|
+ }else if (name == 'srcName') {
|
|
|
+ for (let item of this.srcIdData) {
|
|
|
+ if (item[this.srcforParameter.value] == value) {
|
|
|
+ if (this.query.srcType == 'SALES') {
|
|
|
+ // 业务员
|
|
|
+ this.$set(this.query,'srcId',item.id)
|
|
|
+ this.$set(this.query,'srcName',item.name)
|
|
|
+ }else if (this.form.srcType == 'AGENT') {
|
|
|
+ // 代理
|
|
|
+ this.$set(this.query,'srcId',item.id)
|
|
|
+ this.$set(this.query,'srcName',item.cnName)
|
|
|
+ }else {
|
|
|
+ this.$set(this.query,'srcId',item.id)
|
|
|
+ this.$set(this.query,'srcName',item.title)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this.query,name,value)
|
|
|
+ },
|
|
|
+ // 业务员下拉
|
|
|
+ srcCorpFocus(value,name){
|
|
|
+ if (this.query.srcType == 'SALES') {
|
|
|
+ // 业务员
|
|
|
+ this.srcforParameter = { key:'id', label:'name', value:'name'}
|
|
|
+ this.salesUserGetListfun(value)
|
|
|
+ }else if (this.form.srcType == 'AGENT') {
|
|
|
+ // 代理
|
|
|
+ this.srcforParameter = { key:'id', label:'cnName', value:'cnName'}
|
|
|
+ this.agentBcorpsListfun(value)
|
|
|
+ }else if (this.form.srcType == 'OWN') {
|
|
|
+ // 公司
|
|
|
+ this.srcforParameter = { key:'id', label:'title', value:'title'}
|
|
|
+ this.ownDeptLazyTreefun()
|
|
|
+ }else {}
|
|
|
+ },
|
|
|
+ // 多选切换
|
|
|
+ dateChange(name) {
|
|
|
+ if (name == 'isBusinessDate') {
|
|
|
+ this.$set(this.query,'isToExamineDate',0)
|
|
|
+ this.$set(this.query,'isBusinessDate',1)
|
|
|
+ }
|
|
|
+ if (name == 'isToExamineDate') {
|
|
|
+ this.$set(this.query,'isBusinessDate',0)
|
|
|
+ this.$set(this.query,'isToExamineDate',1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 收付单选
|
|
|
+ dcInput(){
|
|
|
+ let dcName = ''
|
|
|
+ if (this.query.dc == 'D') {
|
|
|
+ dcName = '收'
|
|
|
+ }else {
|
|
|
+ dcName = '付'
|
|
|
+ }
|
|
|
+ this.findObject(this.option.column, "amountUsd").label = `应${dcName}美金`
|
|
|
+ this.findObject(this.option.column, "amount").label = `应${dcName}人民币`
|
|
|
+ this.findObject(this.option.column, "amountUsdAlready").label = `已${dcName}款美金`
|
|
|
+ this.findObject(this.option.column, "amountAlready").label = `已${dcName}款人民币`
|
|
|
+ this.findObject(this.option.column, "amountUsdNot").label = `未${dcName}款美金`
|
|
|
+ this.findObject(this.option.column, "amountNot").label = `未${dcName}款人民币`
|
|
|
+ },
|
|
|
+ // 接口获取数据
|
|
|
+ // 结算单位
|
|
|
+ getBcorpsListfun(cnName){
|
|
|
+ getBcorpsList(1,10,{cnName,status: 0}).then(res=>{
|
|
|
+ this.corpIdData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 委托人
|
|
|
+ clientIdListfun(cnName){
|
|
|
+ getBcorpsList(1,10,{cnName,status: 0}).then(res=>{
|
|
|
+ this.clientIdData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取业务来源数据
|
|
|
+ srcTypeWorkDictsfun(){
|
|
|
+ getWorkDicts('src_type_los').then(res=>{
|
|
|
+ this.srcTypeData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取公司名称 用户管理左侧
|
|
|
+ ownDeptLazyTreefun(){
|
|
|
+ getDeptLazyTree(0).then(res=>{
|
|
|
+ this.srcIdData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取业务来源代理数据
|
|
|
+ agentBcorpsListfun(cnName){
|
|
|
+ let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
|
|
|
+ getBcorpslistByType(1,10,{cnName,status: 0,corpTypeName}).then(res=>{
|
|
|
+ this.srcIdData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取业务来源业务员数据
|
|
|
+ salesUserGetListfun(account){
|
|
|
+ userGetList(1,10,{account}).then(res=>{
|
|
|
+ this.srcIdData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清空搜索回调方法
|
|
|
+ searchReset() {
|
|
|
+ this.query = {};
|
|
|
+ this.onLoad(this.page);
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.query = params;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.onLoad(this.page, params);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ currentChange(currentPage){
|
|
|
+ this.page.currentPage = currentPage;
|
|
|
+ },
|
|
|
+ sizeChange(pageSize){
|
|
|
+ this.page.pageSize = pageSize;
|
|
|
+ },
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoad(this.page, this.query);
|
|
|
+ },
|
|
|
+ onLoad(page, params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ financeStatisticsFeeSummaryDetail(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.page.total = data.total;
|
|
|
+ this.data = data.records;
|
|
|
+ this.loading = false;
|
|
|
+ this.selectionClear();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectionClear() {
|
|
|
+ this.$refs.crud.toggleSelection();
|
|
|
+ },
|
|
|
+ //自定义列保存
|
|
|
+ async saveColumnTwo(ref, option, optionBack, code) {
|
|
|
+ /**
|
|
|
+ * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
|
|
|
+ * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
|
|
|
+ * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
|
|
|
+ */
|
|
|
+ const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ //关闭窗口
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义列重置
|
|
|
+ async resetColumnTwo(ref, option, optionBack, code) {
|
|
|
+ this[option] = this[optionBack];
|
|
|
+ const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 更改表格颜色
|
|
|
+ headerClassName(tab){
|
|
|
+ //颜色间隔
|
|
|
+ let back = ""
|
|
|
+ if (tab.columnIndex >= 0 && tab.column.level === 1) {
|
|
|
+ if (tab.columnIndex % 2 === 0) {
|
|
|
+ back = "back-one"
|
|
|
+ } else if (tab.columnIndex % 2 === 1) {
|
|
|
+ back = "back-two"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return back;
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+::v-deep#out-table .back-one {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+::v-deep#out-table .back-two {
|
|
|
+ background: #ecf5ff !important;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|