| | |
| | | </el-form> |
| | | <el-row> |
| | | <el-col :span="4"> |
| | | <el-input v-model="filterText" style="height: 30px" placeholder="请输入关键字" /> |
| | | <div class="tree"> |
| | | <el-input v-model="filterText" style="height: 30px" placeholder="Filter keyword" /> |
| | | <el-tree ref="treeRef" class="filter-tree" :data="data" :props="props" :filter-node-method="filterNode" /> |
| | | |
| | | <!-- <el-tree ref="treeRef" class="filter-tree" :data="data" :props="props" :filter-node-method="filterNode" /> --> |
| | | <el-tree ref="treeRef" :data="data" :props="props" @node-click="handleNodeClick" :filter-node-method="filterNode" /> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="20"> |
| | |
| | | </el-tabs> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column property="qName" label="装置设施名称" align="center" sortable/> |
| | | <el-table-column property="qName" label="装置设施名称" align="center" sortable /> |
| | | <el-table-column property="positionNum" align="center" label="装置设施位号" sortable /> |
| | | <el-table-column property="qUsage" align="center" label="装置设施用途" sortable /> |
| | | <el-table-column property="model" label="装置设施型号" align="center" sortable show-overflow-tooltip /> |
| | |
| | | <el-table-column property="setPart" label="设施部位" align="center" sortable show-overflow-tooltip /> |
| | | <el-table-column label="操作" align="center" width="250"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="default" :icon="View">查看</el-button> |
| | | <el-button link type="primary" size="default" :icon="EditPen">修改</el-button> |
| | | <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> |
| | | <el-button link type="primary" size="default" :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button> |
| | | <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <el-pagination |
| | | v-model:currentPage="currentPage4" |
| | | v-model:page-size="pageSize4" |
| | | :page-sizes="[100, 200, 300, 400]" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="400" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | |
| | | import Dailog from '/@/components/equipmentDailog/Dailog.vue'; |
| | | import { ElTree, TabsPaneContext, ElMessage, ElMessageBox } from 'element-plus'; |
| | | import { facilityManagementApi } from '/@/api/facilityManagement'; |
| | | import { EditPen, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue'; |
| | | import { EditPen, View, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue'; |
| | | interface Tree { |
| | | label: string; |
| | | children?: Tree[]; |
| | |
| | | }; |
| | | const filterText = ref(''); |
| | | const treeRef = ref<InstanceType<typeof ElTree>>(); |
| | | |
| | | const props = { |
| | | value: 'id', |
| | | lable: 'typeName', |
| | | children: 'childList', |
| | | }; |
| | | // 树形 |
| | | const listApiTree = () => { |
| | | facilityManagementApi() |
| | | .getequipmentTypeMngTreeData() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | data.value= res.data.data; |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | |
| | | } |
| | | }); |
| | | }; |
| | | const props = { |
| | | label: 'typeName', |
| | | children: 'childList', |
| | | value: 'id', |
| | | } |
| | | watch(filterText, (val) => { |
| | | treeRef.value!.filter(val); |
| | | }); |
| | | |
| | | const filterNode = (value: string, data: Tree) => { |
| | | if (!value) return true; |
| | | return data.label.includes(value); |
| | | return data.typeName.includes(value); |
| | | }; |
| | | |
| | | const data = ref([]); |
| | | const handleNodeClick=(data: Tree)=>{ |
| | | ruleForm.searchParams.positionNum=data.id |
| | | listApi(); |
| | | } |
| | | const data=ref([]) |
| | | onMounted(() => { |
| | | listApiTree(); |
| | | }); |
| | | const handleClicks = (tab: TabsPaneContext, event: Event) => { |
| | | console.log(tab, event); |
| | | }; |
| | | const activeName=ref("first") |
| | | |
| | | const activeName = ref('first'); |
| | | // const Show=ref() |
| | | // const openUp=()=>{ |
| | | // Show.value.openDialog() |
| | | // } |
| | | return { |
| | | handleNodeClick, |
| | | ruleForm, |
| | | resetForm, |
| | | listApi, |
| | |
| | | Delete, |
| | | Download, |
| | | Refresh, |
| | | View, |
| | | Upload, |
| | | }; |
| | | }, |