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