前面的代码为父组件后为子组件要求只修改父组件的代码实现在选择业务类型后业务子类型的disabled状态为false
时间: 2024-10-23 11:09:54 浏览: 30
为了实现选择业务类型后业务子类型的 `disabled` 状态变为 `false`,可以在父组件中监听 `configOrderMainType` 的变化,并在变化时更新 `formConfig` 中对应字段的 `disabled` 属性。
以下是修改后的父组件代码:
```vue
<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"
>
<!-- 各种列模板 -->
</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: '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
}
],
description: '缴费账单管理界面',
configOrderSubTypeList: [],
btnSatus: false,
// ... 其他数据属性 ...
};
},
created() {
this.excessHeight = 380;
this.getSuperFieldList();
},
computed: {
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;
},
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;
this.updateConfigOrderSubTypeDisabled();
}
});
} 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.push({ type: 'int', value: 'billStatus', text: '扣费状态' });
fieldList.push({ type: 'int', value: 'billDelayDay', text: '逾期天数' });
fieldList.push({ type: 'int', value: 'configOrderMainType', text: '业务收费类型' });
fieldList.push({ type: 'int', value: 'configOrderSubType', text: '业务子类型' });
fieldList.push({ type: 'string', value: 'billId', text: '业务关联' });
fieldList.push({ type: 'string', value: 'stepBillId', text: '业务关联' });
fieldList.push({ type: 'string', value: 'createBy', text: '创建人' });
fieldList.push({ type: 'date', value: 'createTime', text: '创建日期' });
fieldList.push({ type: 'string', value: 'updateBy', text: '更新人' });
fieldList.push({ type: 'date', value: 'updateTime', text: '更新日期' });
this.superFieldList = fieldList;
},
toDetail(record) {
this.$refs.billDetail.open(record.id);
},
toLiquidatedDamages(record) {
this.$refs.liquidatedDamagesDetail.open(record.id);
},
updateConfigOrderSubTypeDisabled() {
const businessSubTypeItem = this.formConfig.find((item) => item.model === 'configOrderSubType');
if (businessSubTypeItem) {
businessSubTypeItem.disabled = false;
}
}
},
mounted() {
if (this.householdNum) {
this.queryParam.householdNum = this.householdNum;
this.queryParam.createTime_begin = undefined;
this.queryParam.createTime_end = undefined;
this.loadData();
this.getGasMoney();
}
this.getHeight();
this.setConfigAct();
},
watch: {
'$route': {
handler() {
if (this.$route.path == '/bizTransactionBill/list') {
if (this.householdNum) {
this.queryParam.householdNum = this.householdNum;
this.queryParam.createTime_begin = undefined;
this.queryParam.createTime_end = undefined;
this.loadData();
}
}
},
immediate: true
},
'queryParam.configOrderMainType': {
handler(newVal) {
if (newVal) {
this.getConfigOrderSubTypeList();
} else {
const businessSubTypeItem = this.formConfig.find((item) => item.model === 'configOrderSubType');
if (businessSubTypeItem) {
businessSubTypeItem.disabled = true;
}
}
},
deep: true
}
}
};
</script>
<style lang="less">
@import '~@assets/less/common.less';
.j-table-force-nowrap {
.mark-red {
color: red;
}
}
.moneyTotal {
margin-bottom: 20px;
}
.moneyTotal span {
display: inline-block;
padding: 0 15px;
height: 30px;
background: #e6f7ff;
border: 1px solid #1890ff;
color: #1890ff;
text-align: center;
line-height: 30px;
border-radius: 3px;
margin-right: 5px;
}
</style>
```
### 关键改动点
1. **添加 `updateConfigOrderSubTypeDisabled` 方法**:该方法用于更新 `configOrderSubType` 字段的 `disabled` 属性。
2. **在 `getConfigOrderSubTypeList` 方法中调用 `updateConfigOrderSubTypeDisabled`**:当获取到业务子类型列表后,启用 `configOrderSubType` 字段。
3. **添加 `watch` 监听 `queryParam.configOrderMainType` 变化**:当 `configOrderMainType` 发生变化时,重新获取业务子类型列表并更新 `configOrderSubType` 的 `disabled` 属性。
通过这些改动,当用户选择业务类型后,业务子类型的 `disabled` 状态将自动变为 `false`。
阅读全文