| | |
| | | <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> |
| | | <el-row> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-form-item size="default"> |
| | | <el-input v-model="ruleForm.pass" placeholder="装置设施名称" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button> |
| | | <el-button @click="resetForm(ruleFormRef)">重置</el-button> |
| | | <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button> |
| | | <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col :span="20"> |
| | | <div class="btns"> |
| | | <div> |
| | | <el-button type="primary" :icon="Plus" @click="openD">新建</el-button> |
| | | <el-button type="warning" plain :icon="EditPen">修改</el-button> |
| | | <el-button type="danger" :icon="Delete" plain>删除</el-button> |
| | | <el-button size="default" type="primary" :icon="Plus" @click="openD">新建</el-button> |
| | | <el-button size="default" type="warning" plain :icon="EditPen">修改</el-button> |
| | | <el-button size="default" type="danger" :icon="Delete" plain>删除</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button :icon="Upload"></el-button> |
| | | <el-button :icon="Download"></el-button> |
| | | <el-button :icon="Refresh"></el-button> |
| | | <!-- <el-button size="default" :icon="Upload" @click="openUp"></el-button> |
| | | <el-button size="default" :icon="Download"></el-button> |
| | | <el-button size="default" :icon="Refresh"></el-button> --> |
| | | </div> |
| | | </div> |
| | | <div style="padding-left: 10px"> |
| | |
| | | <el-table-column property="address" label="装置设施型号" align="center" sortable show-overflow-tooltip /> |
| | | <el-table-column property="address" label="类型/类别外键" align="center" sortable show-overflow-tooltip /> |
| | | <el-table-column property="address" label="设施部位" align="center" sortable show-overflow-tooltip /> |
| | | <el-table-column label="操作" align="center" style="width: 300px"> |
| | | <el-table-column label="操作" align="center" width="250"> |
| | | <template #default> |
| | | <el-button link type="primary" size="default" :icon="View">查看</el-button> |
| | | <el-button link type="primary" size="default" :icon="EditPen">修改</el-button> |
| | |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <updata ref="Show"></updata> |
| | | <Dailog ref="ShowD"></Dailog> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive, watch } from 'vue'; |
| | | import { ElTree, TabsPaneContext } from 'element-plus'; |
| | | import { defineComponent, ref, reactive, watch, onMounted } from 'vue'; |
| | | import updata from '/@/components/updata/updata.vue' |
| | | import Dailog from '/@/components/equipmentDailog/Dailog.vue' |
| | | import { ElTree, TabsPaneContext,ElMessage} from 'element-plus'; |
| | | import { facilityManagementApi } from '/@/api/facilityManagement'; |
| | | import { EditPen, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue'; |
| | | interface Tree { |
| | | id: number; |
| | | label: string; |
| | | children?: Tree[]; |
| | | } |
| | | export default defineComponent({ |
| | | components:{updata,Dailog}, |
| | | setup() { |
| | | const ruleForm = reactive({ |
| | | pass: '', |
| | |
| | | const treeRef = ref<InstanceType<typeof ElTree>>(); |
| | | |
| | | const defaultProps = { |
| | | children: 'children', |
| | | label: 'label', |
| | | lable: 'typeName', |
| | | children: 'childList', |
| | | value: 'id', |
| | | }; |
| | | |
| | | // 树形 |
| | | const listApiTree = () => { |
| | | facilityManagementApi() |
| | | .getequipmentTypeMngTreeData() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | watch(filterText, (val) => { |
| | | treeRef.value!.filter(val); |
| | | }); |
| | |
| | | return data.label.includes(value); |
| | | }; |
| | | |
| | | const data: Tree[] = [ |
| | | { |
| | | id: 1, |
| | | label: 'Level one 1', |
| | | children: [ |
| | | { |
| | | id: 4, |
| | | label: 'Level two 1-1', |
| | | children: [ |
| | | { |
| | | id: 9, |
| | | label: 'Level three 1-1-1', |
| | | }, |
| | | { |
| | | id: 10, |
| | | label: 'Level three 1-1-2', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 2, |
| | | label: 'Level one 2', |
| | | children: [ |
| | | { |
| | | id: 5, |
| | | label: 'Level two 2-1', |
| | | }, |
| | | { |
| | | id: 6, |
| | | label: 'Level two 2-2', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 3, |
| | | label: 'Level one 3', |
| | | children: [ |
| | | { |
| | | id: 7, |
| | | label: 'Level two 3-1', |
| | | }, |
| | | { |
| | | id: 8, |
| | | label: 'Level two 3-2', |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | const data=ref([]) |
| | | onMounted(()=>{ |
| | | listApiTree() |
| | | }) |
| | | const tableData = [ |
| | | { |
| | | date: '2016-05-03', |
| | |
| | | const handleClick = (tab: TabsPaneContext, event: Event) => { |
| | | console.log(tab, event); |
| | | }; |
| | | const Show=ref() |
| | | const openUp=()=>{ |
| | | Show.value.openDialog() |
| | | } |
| | | const ShowD=ref() |
| | | const openD=()=>{ |
| | | ShowD.value.openDailog(false) |
| | | } |
| | | return { |
| | | listApiTree, |
| | | activeName, |
| | | handleClick, |
| | | ruleForm, |
| | |
| | | filterNode, |
| | | data, |
| | | tableData, |
| | | Show, |
| | | openUp, |
| | | ShowD, |
| | | openD, |
| | | Plus, |
| | | EditPen, |
| | | Delete, |