一开始为父组件的代码后为子组件要求只修改父组件的代码实现在选择业务类型后业务子类型的disabled状态为false
时间: 2024-10-23 14:19:15 浏览: 6
为了实现当选择业务类型后,业务子类型的 `disabled` 状态变为 `false`,你需要在父组件中监听业务类型的选择,并在选择后更新业务子类型的 `disabled` 状态。具体步骤如下:
1. **添加监听事件**:在父组件中添加一个方法来处理业务类型的变化,并在该方法中更新业务子类型的 `disabled` 状态。
2. **更新 `formConfig`**:在业务类型变化时,找到业务子类型的配置并将其 `disabled` 属性设为 `false`。
以下是修改后的父组件代码:
```html
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper" ref="searchContent">
<DynamicForm
ref="dynamicForm"
:formConfig="formConfig"
@submit="searchConfig"
@showMoreChange="showMoreChange"
@resizeChange="showMoreChange"
/>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator"></div>
<!-- 展示金额区域 -->
<div class="moneyTotal">
<span>欠费金额(元):{{ arrearsMoney.toFixed(2) }}</span>
<span>欠费用量(m³):{{ arrearsGas.toFixed(2) }}</span>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
</div>
<a-table
ref="table"
:size="tableSize"
:scroll="{ x: true, y: tableHeight }"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
class="j-table-force-nowrap local-table"
@change="handleTableChange"
>
<template slot="userSlot" slot-scope="text, record">
<a-tooltip placement="topLeft" v-if="text">
<template slot="title">
户号:{{ record.householdNum }}<br>
户名:{{ record.householder }}<br>
地址:{{ record.address }}
</template>
<j-ellipsis-head :value="text" :classname="'blue'" :length="15"></j-ellipsis-head>
</a-tooltip>
</template>
<template slot="amount" slot-scope="text, record">
<span v-if="record.billStatus === 0">{{ record.realPay || 0 }} / {{ record.amount }}</span>
<span v-else>{{ record.amount }}</span>
</template>
<template slot="liquidatedAmount" slot-scope="text, record">
<span v-if="text || text == 0">{{ record.payedLiquidatedAmount.toFixed(2) }} / {{ text }}</span>
<span v-else>-</span>
</template>
<template slot="publicNumSolt" slot-scope="text">
{{ text || (text == 0 ? 0 : '-') }}
</template>
<template slot="billStatusSlot" slot-scope="text, record">
<span :class="record.billStatus === 0 && record.billDelayDay && record.billDelayDay > 0 ? 'mark-red' : ''">{{ record.billStatus_dictText }}</span>
</template>
<template slot="billDelayDaySlot" slot-scope="text, record">
<span v-if="record.billStatus !== 0">-</span>
<span v-else :class="record.billDelayDay > 0 ? 'mark-red' : ''">{{ record.billDelayDay }}</span>
</template>
<span slot="action" slot-scope="text, record">
<a @click="toDetail(record)">账单明细</a>
<a-divider type="vertical" />
<a @click="toLiquidatedDamages(record)">违约金明细</a>
</span>
</a-table>
<div class="selectedAndSetEmpty">
已选择 {{ selectedRowKeys.length }} 项
<a-button @click="onClearSelected">清空</a-button>
</div>
<BottomSettingColumns
:loading="loading"
:settingColumns="settingColumns"
:settingChecked="settingChecked"
:serialNumber="serialNumber"
@emitEvent="emitEvent"
@changeSettingColumns="changeSettingColumns"
/>
</div>
<biz-transaction-bill-item-list ref="billDetail"></biz-transaction-bill-item-list>
<biz-liquidated-damages-item-list ref="liquidatedDamagesDetail"></biz-liquidated-damages-item-list>
</a-card>
</template>
<script>
import { initColumnsMixin } from '@/mixins/publicInitColumnsMixinNew';
import '@/assets/less/TableExpand.less';
import { mixinDevice } from '@/utils/mixin';
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import JDate from '@/components/jeecg/JDate.vue';
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
import BizTransactionBillItemList from './BizTransactionBillItemList.vue';
import BizLiquidatedDamagesItemList from './BizLiquidatedDamagesItemList.vue';
import JEllipsisHead from '@comp/jeecg/JEllipsisHead';
import { getAction, postAction } from '@/api/manage';
import moment from 'moment';
export default {
name: 'BizTransactionBillList',
mixins: [JeecgListMixin, mixinDevice, initColumnsMixin],
components: {
JDate,
JSuperQuery,
BizTransactionBillItemList,
BizLiquidatedDamagesItemList,
JEllipsisHead,
},
props: {
householdNum: {
type: String,
default: '',
},
},
data() {
return {
formData: {
configOrderMainType: '',
configOrderSubType: '',
},
formConfig: [
{
label: '创建日期',
type: 'date-custom',
model: 'createTime_begin',
props: { placeholder: '请选择开始时间' },
colSpan: { xl: 12, lg: 13, md: 15, sm: 24 },
model2: 'createTime_end',
format: 'YYYY-MM-DD HH:mm:ss',
format2: 'YYYY-MM-DD HH:mm:ss',
isDate: true,
},
{
label: '表具编号',
type: 'input',
model: 'meterNum',
props: { placeholder: '请输入表具编号' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
isDate: false,
},
{
label: '户名',
type: 'input',
model: 'householder',
props: { placeholder: '请输入户名' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
isDate: false,
},
{
label: '户号',
type: 'input',
model: 'householdNum',
props: { placeholder: '请输入户号' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
isDate: false,
},
{
label: '扣费时间',
type: 'date-custom',
model: 'billTime_begin',
props: { placeholder: '请选择开始时间' },
colSpan: { xl: 12, lg: 13, md: 15, sm: 24 },
model2: 'billTime_end',
format: 'YYYY-MM-DD HH:mm:ss',
format2: 'YYYY-MM-DD HH:mm:ss',
isDate: true,
},
{
label: '业务类型',
type: 'dict-select',
model: 'configOrderMainType',
props: { placeholder: '请选择业务类型' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
dictCode: 'order_main_type',
isDate: false,
},
{
label: '业务子类型',
type: 'select',
model: 'configOrderSubType',
props: { placeholder: '请选择业务子类型' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
isDate: false,
disabled: true, // 初始状态下禁用
},
{
label: '扣费状态',
type: 'dict-select',
model: 'billStatus',
props: { placeholder: '请选择扣费状态' },
colSpan: { xl: 6, lg: 7, md: 8, sm: 24 },
dictCode: 'biz_bill_status',
isDate: false,
},
],
description: '缴费账单管理界面',
configOrderSubTypeList: [],
btnSatus: false,
// noCreate: true,
// 表头
columns: [
{ title: '账单号', align: 'center', width: 200, dataIndex: 'billId' },
{ title: '户号', align: 'center', width: 150, dataIndex: 'householdNum', scopedSlots: { customRender: 'userSlot' } },
{ title: '户名', align: 'center', width: 150, dataIndex: 'householder' },
{ title: '表具编号', align: 'center', width: 150, dataIndex: 'meterNum' },
{ title: '业务收费类型', align: 'center', width: 150, dataIndex: 'configOrderMainType_dictText' },
{ title: '业务子类型', align: 'center', width: 150, dataIndex: 'configOrderSubType_dictText' },
{ title: '上期读数(m³)', align: 'center', width: 150, dataIndex: 'preMeterRead', scopedSlots: { customRender: 'publicNumSolt' } },
{ title: '本期读数(m³)', align: 'center', width: 150, dataIndex: 'curMeterRead', scopedSlots: { customRender: 'publicNumSolt' } },
{ title: '已缴/总金额(元)', align: 'center', width: 150, scopedSlots: { customRender: 'amount' } },
{ title: '违约金(元)', align: 'center', width: 150, dataIndex: 'liquidatedAmount', scopedSlots: { customRender: 'liquidatedAmount' } },
{ title: '欠费用量(m³)', align: 'center', width: 150, dataIndex: 'debtGas' },
{ title: '扣费状态', align: 'center', width: 150, scopedSlots: { customRender: 'billStatusSlot' } },
{ title: '扣费时间', align: 'center', width: 150, dataIndex: 'billTime' },
{ title: '逾期天数(天)', align: 'center', width: 150, scopedSlots: { customRender: 'billDelayDaySlot' } },
{ title: '创建人', align: 'center', width: 150, dataIndex: 'createBy' },
{ title: '创建日期', align: 'center', width: 150, dataIndex: 'createTime' },
{ title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', width: 147, scopedSlots: { customRender: 'action' } },
],
url: {
list: '/web/bizTransactionBill/list',
},
// 前端不传,由后端设置
isorter: { column: '', order: '' },
// 欠费用量
arrearsGas: 0,
// 欠费金额
arrearsMoney: 0,
dictOptions: {},
superFieldList: [],
};
},
created() {
this.excessHeight = 380;
this.getSuperFieldList();
},
computed: {
// 模拟Vuex getter
isGasSearchShow() {
return this.$store.getters.isGasSearchShow;
},
},
methods: {
loadOther() {
if (this.householdNum) {
this.btnSatus = true;
this.queryParam.householdNum = this.householdNum;
}
},
updateTableHeight() {
const headerHeight = 100;
const footerHeight = 50;
this.tableHeight = window.innerHeight - headerHeight - footerHeight;
},
// 初始化默认值
initCreated() {
if (!this.queryParam.householdNum) {
this.queryParam.createTime_begin = moment().subtract(1, 'month').format('YYYY-MM-DD 00:00:00');
this.queryParam.createTime_end = moment().format('YYYY-MM-DD 23:59:59');
}
this.queryParam = { ...this.queryParam };
},
// 获取欠费金额和欠费气量
getGasMoney() {
getAction('/web/bizTransactionBill/arrearsGasAndMoney', this.queryParam).then((res) => {
if (res.success) {
this.arrearsGas = res.result.arrearsGas || 0;
this.arrearsMoney = res.result.arrearsMoney || 0;
}
});
},
handelChange() {
this.queryParam.configOrderSubType = undefined;
// 更新业务子类型的 disabled 状态
this.updateConfigOrderSubTypeDisabled();
},
setConfigAct() {
if (!this.isGasSearchShow) {
this.formConfig = this.formConfig.filter((item) => item.model !== 'companyCode');
}
const businessSubTypeItem = this.formConfig.find((item) => item.model === 'configOrderSubType');
const isRentalUserItem = this.formConfig.find((item) => item.model === 'isRentalUser');
const isLoneOldItem = this.formConfig.find((item) => item.model === 'isLoneOld');
const isornot = [{ value: '1', label: '是' }, { value: '0', label: '否' }];
if (isLoneOldItem) isLoneOldItem.options = isornot;
if (isRentalUserItem) isRentalUserItem.options = isornot;
const configOrderSubTypes = [
{ value: 'subtype1', label: '工商户报装' },
{ value: 'subtype2', label: '埋管' },
{ value: 'subtype3', label: '检修' },
{ value: 'subtype4', label: '系统扣费' },
];
if (businessSubTypeItem) businessSubTypeItem.options = configOrderSubTypes;
},
searchBillQuery() {
this.searchQuery();
this.getGasMoney();
},
searchResetCustom() {
if (this.householdNum) {
this.queryParam = { householdNum: this.householdNum };
} else {
this.queryParam = {};
}
this.initCreated();
this.loadData(1);
this.getGasMoney();
},
getConfigOrderSubTypeList() {
if (this.queryParam.configOrderMainType) {
getAction('/web/bizTransactionOrder/getOrderSubType', { configOrderMainType: this.queryParam.configOrderMainType }).then((res) => {
if (res.code == 200) {
this.configOrderSubTypeList = res.result;
}
});
} else {
this.$message.warning('请选择业务类型!');
}
},
initDictConfig() {},
getSuperFieldList() {
let fieldList = [];
fieldList.push({ type: 'string', value: 'meterNum', text: '表具编号' });
fieldList.push({ type: 'string', value: 'householdNum', text: '户号' });
fieldList.push({ type: 'string', value: 'companyCode', text: '公司编号' });
fieldList.push({ type: 'string', value: 'tranBillNum', text: '账单流水号' });
fieldList.push({ type: 'number', value: 'amount', text: '扣费金额' });
fieldList.push({ type: 'string', value: 'bizTypeCode', text: '服务编码' });
fieldList.push({ type: 'string', value: 'detail', text: '缴费明细' });
fieldList.push({ type: 'date', value: 'billTime', text: '扣费时间' });
fieldList.
阅读全文