<template>
<!-- 编辑流量计 -->
<div class="edit-flow-meter">
<myModal :params="{ title: '编辑流量计' }" :visible="visible" @submit="submit" @cancel="handleCancel">
<template v-slot:header>
<span></span>
</template>
<template v-slot:body>
<div class="edit-flow-meter-box">
<a-form-model
ref="baseInfoForm"
:model="formData"
:rules="rules"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
>
<h4 style="margin: 16px 0; text-align: left">{{ $t('基础信息') }}</h4>
<a-row>
<a-col :span="12">
<a-form-model-item :label="$t('探测器名称')" prop="detectorName">
<a-input v-model="formData.detectorName" disabled />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item :label="$t('探测器编号')" prop="uniqueCode">
<a-input v-model="formData.uniqueCode" disabled />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item :label="$t('流量计编号')" prop="meterCode">
<a-input v-model="formData.meterCode" disabled />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item :label="$t('接入时间')" prop="rate">
<a-date-picker
v-model="formData.rate"
show-time
format="YYYY-MM-DD HH:mm:ss"
:placeholder="$t('请选择接入时间')"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item :label="$t('归属')" prop="belonging">
<a-input v-model="formData.belonging" disabled />
</a-form-model-item>
</a-col>
</a-row>
<div class="table-title-box">
<h4 style="margin: 0">{{ $t('子流量计列表') }}</h4>
<div style="display: flex">
<a-button class="mgr10" type="primary" @click="onAdd">{{ $t('新增') }}</a-button>
<a-popconfirm
:title="$t('是否确认删除?')"
:ok-text="$t('确定')"
:cancel-text="$t('取消')"
:visible="popconfirmVisible"
@visibleChange="popconfirmVisibleChange"
@confirm="onDeleteAll"
>
<a-button>{{ $t('删除') }}</a-button>
</a-popconfirm>
</div>
</div>
<div class="table-main-box">
<a-table
:dataSource="tableData"
:rowSelection="rowSelection"
rowKey="id"
:columns="columns"
:pagination="false"
size="small"
>
<template slot="meterCode" slot-scope="text, record, index">
<template v-if="text">{{ text }}</template>
<template v-else>
<a-select
v-model="tableData[index].meterCode"
:filterOption="filterOption"
@change="value => changeMemterCode(value, index)"
:placeholder="$t('请选择')"
showSearch
:allowClear="false"
>
<a-select-option
v-for="item in disabledOptions"
:key="item.id"
:value="item.meterCode"
:title="item.meterCode"
:disabled="item.disabled"
>
{{ item.meterCode }}
</a-select-option>
</a-select>
</template>
</template>
<template slot="action" slot-scope="text, record">
<a-popconfirm
placement="topRight"
:title="$t('是否确认删除?')"
:ok-text="$t('确定')"
:cancel-text="$t('取消')"
@confirm="onDelete(record)"
>
<i class="ico-delete myIcon" :title="$t('删除')"></i>
</a-popconfirm>
</template>
</a-table>
</div>
</a-form-model>
</div>
</template>
</myModal>
</div>
</template>
<script>
import factory from '../factory';
import myModal from '@/components/scfComponents/modalComponents/modal.vue';
export default {
components: { myModal },
data() {
return {
visible: false,
formData: {},
rules: {
taskName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
// { pattern: reg.name, message: this.$t('仅允许输入汉字、字母、数字与_-.@字符') },
],
},
columns: [
{
title: this.$t('序号'),
key: 'index',
dataIndex: 'index',
customRender: (text, record, index) => `${index + 1}`,
},
{
title: this.$t('子电表编号'),
dataIndex: 'meterCode',
key: 'meterCode',
scopedSlots: { customRender: 'meterCode' },
},
{
title: this.$t('操作'),
key: 'action',
width: 150,
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
},
],
popconfirmVisible: false,
meterOptions: [],
selectedRowKeys: [],
selectedRows: [],
tableData: [],
};
},
computed: {
disabledOptions() {
const usedCodes = this.tableData.map(item => item.meterCode).filter(code => code);
return this.meterOptions.map(option => ({
...option,
disabled: usedCodes.includes(option.meterCode),
}));
},
rowSelection() {
return {
selectedRowKeys: this.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
this.selectedRowKeys = selectedRowKeys;
this.selectedRows = selectedRows;
},
};
},
},
methods: {
// 获取子电表列表
getChildMeterList(detectorCode) {
let params = {
detectorCodes: [detectorCode],
page: 1,
pageSize: 99999,
};
factory.getChildMeterList(params).then(res => {
if (res.success) {
this.meterOptions = res.data.pageData || [];
}
});
},
showModal(record) {
this.getChildMeterList(record.detectorCode);
this.visible = true;
},
filterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},
changeMemterCode(value, index) {
const selectedOption = this.meterOptions.find(el => el.meterCode === value);
if (selectedOption) {
this.$set(this.tableData, index, {
...this.tableData[index],
detectorCode: selectedOption.detectorCode,
meterCode: value,
});
}
// let checkOption = this.meterOptions.find(el => el.meterCode === value);
// this.tableData.forEach(item => {
// if (item.meterCode === checkOption.meterCode) {
// item.detectorCode = checkOption.detectorCode;
// }
// });
// let selectedItems = this.tableData.map(item => item.meterCode).filter(el => el !== null && el !== '');
// this.meterOptions.forEach(el => {
// if (selectedItems.includes(el.meterCode)) {
// el.disabled = true;
// }
// });
},
// 批量删除提示框
popconfirmVisibleChange(visible) {
if (visible && !this.selectedRowKeys.length) {
this.popconfirmVisible = false;
this.$message.destroy();
this.$message.warning(this.$t('请选择要删除的信息'));
} else {
this.popconfirmVisible = visible;
}
},
// 新增
onAdd() {
let isNull = this.tableData.filter(e => e.meterCode === null || e.meterCode === '');
if (isNull.length) {
this.$message.destroy();
return this.$message.warning(this.$t('请选择子电表编号'));
}
this.tableData.push({ id: Math.random().toString().split('.')[1], meterCode: null });
},
onDeleteAll() {
if (this.selectedRows.length === 0) {
this.$message.destroy();
return this.$message.warning(this.$t('请选择子电表'));
}
this.tableData = this.tableData.filter(item => !this.selectedRowKeys.includes(item.id));
// 清空选中状态
this.selectedRowKeys = [];
this.selectedRows = [];
// let codes = this.selectedRows.map(item => item.id);
// this.tableData = this.tableData.filter(el => !codes.includes(el.id));
// let selectedItems = this.selectedRows.map(item => item.meterCode).filter(el => el !== null && el !== '');
// this.meterOptions.forEach(el => {
// if (selectedItems.includes(el.meterCode)) {
// el.disabled = false;
// }
// });
},
// 单个删除
onDelete(record) {
this.tableData = this.tableData.filter(item => item.id !== record.id);
// this.tableData = this.tableData.filter(item => item.id !== record.id);
// if (record.meterCode) {
// this.meterOptions.forEach(el => {
// if (record.meterCode.indexOf(el.meterCode) !== -1) {
// el.disabled = false;
// }
// });
// }
},
submit() {
this.visible = false;
},
handleCancel() {
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
.edit-flow-meter-box {
width: 100%;
height: 100%;
.table-title-box {
width: 100%;
display: flex;
margin-bottom: 10px;
align-items: center;
justify-content: space-between;
}
}
</style> 代码评审