mirror of https://gitee.com/lmlz_0/dc-ui.git
fuguobin
8 months ago
2 changed files with 436 additions and 55 deletions
@ -0,0 +1,291 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<el-collapse class="paramsCollapse" v-model="activeNames"> |
||||
|
<el-collapse-item title="基本信息" name="1"> |
||||
|
<el-form :inline="true" :model="addForm" class="demo-form-inline"> |
||||
|
<el-form-item label="资产编号"> |
||||
|
<el-input |
||||
|
v-model="addForm.num" |
||||
|
placeholder="资产编号" |
||||
|
clearable |
||||
|
readonly |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="资产名称"> |
||||
|
<el-input v-model="addForm.name" placeholder="资产名称" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="组成设备"> |
||||
|
<el-select |
||||
|
v-model="addForm.device" |
||||
|
multiple |
||||
|
filterable |
||||
|
allow-create |
||||
|
default-first-option |
||||
|
:reserve-keyword="false" |
||||
|
placeholder="组成设备" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="success" @click="selectParams">选择参数</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-collapse-item> |
||||
|
<el-collapse-item title="参数列表" name="2"> |
||||
|
<vxe-table |
||||
|
class="tableCollapse" |
||||
|
border |
||||
|
ref="tableRef" |
||||
|
max-height="400" |
||||
|
:row-config="{ isHover: true }" |
||||
|
:loading="loading" |
||||
|
:data="tableListData" |
||||
|
> |
||||
|
<vxe-column type="checkbox" width="60"></vxe-column> |
||||
|
<vxe-column field="role" title="参数编码"></vxe-column> |
||||
|
<vxe-column |
||||
|
field="address" |
||||
|
title="参数名称" |
||||
|
:filters="addressOptions" |
||||
|
:filter-method="filterAddressMethod" |
||||
|
:filter-recover-method="filterAddressRecoverMethod" |
||||
|
> |
||||
|
<template #filter="{ $panel, column }"> |
||||
|
<vxe-input |
||||
|
class="filterInput" |
||||
|
v-for="(option, index) in column.filters" |
||||
|
:key="index" |
||||
|
v-model="option.data" |
||||
|
@input="$panel.changeOption($event, !!option.data, option)" |
||||
|
@keyup.enter="$panel.confirmFilter()" |
||||
|
placeholder="参数名称" |
||||
|
size="mini" |
||||
|
></vxe-input> |
||||
|
</template> |
||||
|
</vxe-column> |
||||
|
<vxe-column field="youxiao" title="是否有效"> |
||||
|
<template #default="{ row }"> |
||||
|
<vxe-checkbox v-model="row.youxiao"></vxe-checkbox> |
||||
|
</template> |
||||
|
</vxe-column> |
||||
|
<vxe-column field="kekong" title="是否可控"> |
||||
|
<template #default="{ row }"> |
||||
|
<vxe-checkbox v-model="row.kekong"></vxe-checkbox> |
||||
|
</template> |
||||
|
</vxe-column> |
||||
|
</vxe-table> |
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
<el-dialog |
||||
|
class="addDialog" |
||||
|
v-model="dialogTableVisible" |
||||
|
title="选择参数" |
||||
|
width="900" |
||||
|
> |
||||
|
<vxe-table |
||||
|
class="tableDialog" |
||||
|
border |
||||
|
ref="tableRef" |
||||
|
max-height="400" |
||||
|
:row-config="{ isHover: true }" |
||||
|
:loading="loading" |
||||
|
:data="tableData" |
||||
|
> |
||||
|
<vxe-column type="checkbox" width="60"></vxe-column> |
||||
|
<vxe-column field="id" title="设备编码" sortable></vxe-column> |
||||
|
<vxe-column field="name" title="设备名称"></vxe-column> |
||||
|
<vxe-column field="role" title="参数编码"></vxe-column> |
||||
|
<vxe-column |
||||
|
field="age" |
||||
|
title="参数模版名称" |
||||
|
:filters="ageOptions" |
||||
|
:filter-method="filterAgeMethod" |
||||
|
:filter-recover-method="filterAgeRecoverMethod" |
||||
|
> |
||||
|
<template #filter="{ $panel, column }"> |
||||
|
<vxe-input |
||||
|
class="filterInput" |
||||
|
v-for="(option, index) in column.filters" |
||||
|
:key="index" |
||||
|
v-model="option.data" |
||||
|
@input="$panel.changeOption($event, !!option.data, option)" |
||||
|
@keyup.enter="$panel.confirmFilter()" |
||||
|
placeholder="参数模版名称" |
||||
|
size="mini" |
||||
|
></vxe-input> |
||||
|
</template> |
||||
|
</vxe-column> |
||||
|
<vxe-column |
||||
|
field="address" |
||||
|
title="参数名称" |
||||
|
:filters="addressOptions" |
||||
|
:filter-method="filterAddressMethod" |
||||
|
:filter-recover-method="filterAddressRecoverMethod" |
||||
|
> |
||||
|
<template #filter="{ $panel, column }"> |
||||
|
<vxe-input |
||||
|
class="filterInput" |
||||
|
v-for="(option, index) in column.filters" |
||||
|
:key="index" |
||||
|
v-model="option.data" |
||||
|
@input="$panel.changeOption($event, !!option.data, option)" |
||||
|
@keyup.enter="$panel.confirmFilter()" |
||||
|
placeholder="参数名称" |
||||
|
size="mini" |
||||
|
></vxe-input> |
||||
|
</template> |
||||
|
</vxe-column> |
||||
|
<vxe-column |
||||
|
field="sex" |
||||
|
title="分区" |
||||
|
:filter-multiple="false" |
||||
|
:filters="sexOptions" |
||||
|
></vxe-column> |
||||
|
</vxe-table> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="dialogTableVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="dialogTableVisible = false"> |
||||
|
确认 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, reactive, onMounted } from "vue"; |
||||
|
import { useRoute } from "vue-router"; |
||||
|
const activeNames = ref(["1", "2"]); |
||||
|
const route = useRoute(); |
||||
|
const dialogTableVisible = ref(false); |
||||
|
const addForm = reactive({ |
||||
|
num: route.query.assetCode, |
||||
|
name: "", |
||||
|
device: [], |
||||
|
}); |
||||
|
const options = [ |
||||
|
{ |
||||
|
value: "HTML", |
||||
|
label: "HTML", |
||||
|
}, |
||||
|
{ |
||||
|
value: "CSS", |
||||
|
label: "CSS", |
||||
|
}, |
||||
|
{ |
||||
|
value: "JavaScript", |
||||
|
label: "JavaScript", |
||||
|
}, |
||||
|
]; |
||||
|
const tableRef = ref(); |
||||
|
const loading = ref(false); |
||||
|
const tableData = ref([ |
||||
|
{ |
||||
|
id: 10001, |
||||
|
name: "Test1", |
||||
|
role: "Develop", |
||||
|
sex: "Man", |
||||
|
age: 28, |
||||
|
address: "test", |
||||
|
}, |
||||
|
{ |
||||
|
id: 10002, |
||||
|
name: "Test2", |
||||
|
role: "admin", |
||||
|
sex: "Man", |
||||
|
age: 29, |
||||
|
address: "asd", |
||||
|
}, |
||||
|
{ |
||||
|
id: 10003, |
||||
|
name: "Test3", |
||||
|
role: "useer", |
||||
|
sex: "Man", |
||||
|
age: 22, |
||||
|
address: "qsx", |
||||
|
}, |
||||
|
]); |
||||
|
const tableListData = ref([ |
||||
|
{ |
||||
|
id: 10001, |
||||
|
name: "Test1", |
||||
|
role: "Develop", |
||||
|
sex: "Man", |
||||
|
age: 28, |
||||
|
address: "test", |
||||
|
youxiao: true, |
||||
|
kekong: false, |
||||
|
}, |
||||
|
{ |
||||
|
id: 10002, |
||||
|
name: "Test2", |
||||
|
role: "admin", |
||||
|
sex: "Man", |
||||
|
age: 29, |
||||
|
address: "asd", |
||||
|
youxiao: false, |
||||
|
kekong: true, |
||||
|
}, |
||||
|
{ |
||||
|
id: 10003, |
||||
|
name: "Test3", |
||||
|
role: "useer", |
||||
|
sex: "Man", |
||||
|
age: 22, |
||||
|
address: "qsx", |
||||
|
youxiao: false, |
||||
|
kekong: false, |
||||
|
}, |
||||
|
]); |
||||
|
const sexOptions = ref([ |
||||
|
{ label: "高", value: "Man" }, |
||||
|
{ label: "中", value: "Women" }, |
||||
|
]); |
||||
|
const ageOptions = ref([{ data: "" }]); |
||||
|
const addressOptions = ref([{ data: "" }]); |
||||
|
const filterAgeMethod = ({ option, row }) => { |
||||
|
return row.age === Number(option.data); |
||||
|
}; |
||||
|
const filterAgeRecoverMethod = ({ option }) => { |
||||
|
// 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值 |
||||
|
option.data = ""; |
||||
|
}; |
||||
|
const filterAddressMethod = ({ option, row }) => { |
||||
|
return row.address === option.data; |
||||
|
}; |
||||
|
const filterAddressRecoverMethod = ({ option }) => { |
||||
|
// 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值 |
||||
|
option.data = ""; |
||||
|
}; |
||||
|
onMounted(() => {}); |
||||
|
function selectParams() { |
||||
|
//选择参数 |
||||
|
dialogTableVisible.value = true; |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.paramsCollapse { |
||||
|
.tableCollapse { |
||||
|
.filterInput { |
||||
|
width: 120px; |
||||
|
margin: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
:deep(.addDialog) { |
||||
|
.tableDialog { |
||||
|
.filterInput { |
||||
|
width: 120px; |
||||
|
margin: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue