From 76e848e2558349c54a6cbaed4ade08749bc43650 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 15 七月 2022 10:31:27 +0800 Subject: [PATCH] 管理 --- src/components/equipmentDailog/standardDailog.vue | 2 src/views/facilityManagement/ProductionEquipment/index.vue | 303 +++++++++++++++++++++++++ src/views/facilityManagement/InstrumentationInformation/index.vue | 4 src/components/equipmentDailog/maintenanceDailog.vue | 2 src/components/equipmentDailog/regionDailog.vue | 0 src/components/equipmentDailog/repairDailog.vue | 2 src/components/equipmentDailog/detectDailog.vue | 2 src/components/equipmentDailog/Dailog.vue | 82 +++++- src/views/facilityManagement/safetyEquipment/index.vue | 303 +++++++++++++++++++++++++ src/components/equipmentDailog/categoryDailog.vue | 0 10 files changed, 682 insertions(+), 18 deletions(-) diff --git a/src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue b/src/components/equipmentDailog/Dailog.vue similarity index 88% rename from src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue rename to src/components/equipmentDailog/Dailog.vue index a60d634..12c2dd3 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue +++ b/src/components/equipmentDailog/Dailog.vue @@ -261,6 +261,24 @@ <el-table-column align="center" sortable prop="address" label="巡检人" /> </el-table> </el-tab-pane> + <el-tab-pane label="保养维修标准" name="six" v-if="Dailogtype"> + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + multiple + :on-preview="handlePreview" + :on-remove="handleRemove" + :before-remove="beforeRemove" + :limit="3" + :on-exceed="handleExceed" + > + <el-button type="primary">点击上传</el-button> + <template #tip> + <div class="el-upload__tip"></div> + </template> + </el-upload> + </el-tab-pane> </el-tabs> <template #footer> <span class="dialog-footer"> @@ -287,6 +305,8 @@ import repairDailog from './repairDailog.vue'; import standardDailog from './standardDailog.vue'; import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; +import { ElMessage, ElMessageBox } from 'element-plus'; +import type { UploadProps, UploadUserFile } from 'element-plus'; export default defineComponent({ components: { categoryDailog, regionDailog, DailogSearchUser, maintenanceDailog, detectDailog, repairDailog, standardDailog }, setup() { @@ -301,8 +321,10 @@ resource: '', desc: '', }); - const openDailog = () => { + const Dailogtype=ref(false) + const openDailog = (type:boolean) => { dialogVisible.value = true; + Dailogtype.value=type }; const activeName = ref('first'); const tableData = [ @@ -355,8 +377,39 @@ const openStandard = () => { standardShow.value.openDailog(); }; + // 上传 + const fileList = ref<UploadUserFile[]>([ + { + name: 'element-plus-logo.svg', + url: 'https://element-plus.org/images/element-plus-logo.svg', + }, + { + name: 'element-plus-logo2.svg', + url: 'https://element-plus.org/images/element-plus-logo.svg', + }, + ]); + + const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => { + console.log(file, uploadFiles); + }; + + const handlePreview: UploadProps['onPreview'] = (uploadFile) => { + console.log(uploadFile); + }; + + const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => { + ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`); + }; + + const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => { + return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then( + () => true, + () => false + ); + }; return { dialogVisible, + Dailogtype, form, openDailog, Search, @@ -376,22 +429,27 @@ openRepair, standardShow, openStandard, + fileList, + handleRemove, + handlePreview, + handleExceed, + beforeRemove }; }, }); </script> <style scoped> -.el-form-item{ - width: 400px; +.el-form-item { + width: 400px; } -.formType:after{ - content: ''; - width: 250px; - } -.formType{ - padding:20px 20px; - display: flex; - justify-content: space-between; - flex-wrap: wrap; +.formType:after { + content: ''; + width: 250px; +} +.formType { + padding: 20px 20px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } </style> \ No newline at end of file diff --git a/src/views/facilityManagement/InstrumentationInformation/component/categoryDailog.vue b/src/components/equipmentDailog/categoryDailog.vue similarity index 100% rename from src/views/facilityManagement/InstrumentationInformation/component/categoryDailog.vue rename to src/components/equipmentDailog/categoryDailog.vue diff --git a/src/views/facilityManagement/InstrumentationInformation/component/detectDailog.vue b/src/components/equipmentDailog/detectDailog.vue similarity index 96% rename from src/views/facilityManagement/InstrumentationInformation/component/detectDailog.vue rename to src/components/equipmentDailog/detectDailog.vue index 1b3e1a6..2b29b71 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/detectDailog.vue +++ b/src/components/equipmentDailog/detectDailog.vue @@ -57,7 +57,7 @@ <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search } from '@element-plus/icons-vue'; -import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue' +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' export default defineComponent({ components:{DailogSearchUser}, setup() { diff --git a/src/views/facilityManagement/InstrumentationInformation/component/maintenanceDailog.vue b/src/components/equipmentDailog/maintenanceDailog.vue similarity index 96% rename from src/views/facilityManagement/InstrumentationInformation/component/maintenanceDailog.vue rename to src/components/equipmentDailog/maintenanceDailog.vue index 928b42c..f1dadf6 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/maintenanceDailog.vue +++ b/src/components/equipmentDailog/maintenanceDailog.vue @@ -44,7 +44,7 @@ <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search } from '@element-plus/icons-vue'; -import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue' +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' export default defineComponent({ components:{DailogSearchUser}, setup() { diff --git a/src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue b/src/components/equipmentDailog/regionDailog.vue similarity index 100% rename from src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue rename to src/components/equipmentDailog/regionDailog.vue diff --git a/src/views/facilityManagement/InstrumentationInformation/component/repairDailog.vue b/src/components/equipmentDailog/repairDailog.vue similarity index 97% rename from src/views/facilityManagement/InstrumentationInformation/component/repairDailog.vue rename to src/components/equipmentDailog/repairDailog.vue index 8b895d8..e39778a 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/repairDailog.vue +++ b/src/components/equipmentDailog/repairDailog.vue @@ -66,7 +66,7 @@ <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search } from '@element-plus/icons-vue'; -import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue' +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' export default defineComponent({ components:{DailogSearchUser}, setup() { diff --git a/src/views/facilityManagement/InstrumentationInformation/component/standardDailog.vue b/src/components/equipmentDailog/standardDailog.vue similarity index 96% rename from src/views/facilityManagement/InstrumentationInformation/component/standardDailog.vue rename to src/components/equipmentDailog/standardDailog.vue index 0211e1d..0a73708 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/standardDailog.vue +++ b/src/components/equipmentDailog/standardDailog.vue @@ -51,7 +51,7 @@ <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; import { Search } from '@element-plus/icons-vue'; -import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue' +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' export default defineComponent({ components:{DailogSearchUser}, setup() { diff --git a/src/views/facilityManagement/InstrumentationInformation/index.vue b/src/views/facilityManagement/InstrumentationInformation/index.vue index 933aa2c..957fde1 100644 --- a/src/views/facilityManagement/InstrumentationInformation/index.vue +++ b/src/views/facilityManagement/InstrumentationInformation/index.vue @@ -121,7 +121,7 @@ <script lang="ts"> import { defineComponent, ref, reactive, watch } from 'vue'; import updata from '/@/components/updata/updata.vue' -import Dailog from './component/Dailog.vue' +import Dailog from '/@/components/equipmentDailog/Dailog.vue' import { ElTree, TabsPaneContext } from 'element-plus'; import { EditPen, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue'; interface Tree { @@ -251,7 +251,7 @@ } const ShowD=ref() const openD=()=>{ - ShowD.value.openDailog() + ShowD.value.openDailog(false) } return { activeName, diff --git a/src/views/facilityManagement/ProductionEquipment/index.vue b/src/views/facilityManagement/ProductionEquipment/index.vue new file mode 100644 index 0000000..f4fe615 --- /dev/null +++ b/src/views/facilityManagement/ProductionEquipment/index.vue @@ -0,0 +1,303 @@ +<template> + <div> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.pass" placeholder="装置设施名称" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <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-form-item> + </el-col> + </el-row> + </el-form> + <el-row> + <el-col :span="4"> + <div class="tree"> + <el-input v-model="filterText" style="height: 30px" placeholder="Filter keyword" /> + <el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" /> + </div> + </el-col> + <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> + </div> + <div> + <el-button :icon="Upload" @click="openUp"></el-button> + <el-button :icon="Download"></el-button> + <el-button :icon="Refresh"></el-button> + </div> + </div> + <div style="padding-left: 10px"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column type="expand"> + <template #default> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 0 5%"> + <el-tab-pane label="设备保养" name="first"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="保养情况" sortable /> + <el-table-column property="name" align="center" label="保养负责人" sortable /> + <el-table-column property="name" align="center" label="保养日期" sortable /> + <el-table-column property="name" align="center" label="保养负责人单位" sortable /> + </el-table> + </el-tab-pane> + <el-tab-pane label="设备检查" name="second" + ><el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="检查人" sortable /> + <el-table-column property="name" align="center" label="检查日期" sortable /> + <el-table-column property="name" align="center" label="检查人部门" sortable /> + <el-table-column property="name" align="center" label="检查结果" sortable /> + <el-table-column property="name" align="center" label="检查状态" sortable /> </el-table + ></el-tab-pane> + <el-tab-pane label="设备检测" name="third"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="检测人" sortable /> + <el-table-column property="name" align="center" label="检测日期" sortable /> + <el-table-column property="name" align="center" label="检测人单位" sortable /> + <el-table-column property="name" align="center" label="检测内容" sortable /> + <el-table-column property="name" align="center" label="检测结果" sortable /> + <el-table-column property="name" align="center" label="检测状态" sortable /> + </el-table> + </el-tab-pane> + <el-tab-pane label="设备维修" name="fourth"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="设施异常项" sortable /> + <el-table-column property="name" align="center" label="维修状态" sortable /> + <el-table-column property="name" align="center" label="维修情况" sortable /> + <el-table-column property="name" align="center" label="维修负责人" sortable /> + <el-table-column property="name" align="center" label="维修负责人单位" sortable /> + <el-table-column property="name" align="center" label="维修开始日期" sortable /> + <el-table-column property="name" align="center" label="维修结束日期" sortable /> + </el-table> + </el-tab-pane> + </el-tabs> + </template> + </el-table-column> + <el-table-column label="装置设施名称" align="center" sortable> + <template #default="scope">{{ scope.row.date }}</template> + </el-table-column> + <el-table-column property="name" align="center" label="装置设施位号" sortable /> + <el-table-column property="name" align="center" label="装置设施用途" sortable /> + <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"> + <template #default> + <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="Delete">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[100, 200, 300, 400]" + :small="small" + :disabled="disabled" + :background="background" + layout="total, sizes, prev, pager, next, jumper" + :total="400" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </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 updata from '/@/components/updata/updata.vue' +import Dailog from '/@/components/equipmentDailog/Dailog.vue' +import { ElTree, TabsPaneContext } from 'element-plus'; +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: '', + checkPass: '', + }); + const filterText = ref(''); + const treeRef = ref<InstanceType<typeof ElTree>>(); + + const defaultProps = { + children: 'children', + label: 'label', + }; + + watch(filterText, (val) => { + treeRef.value!.filter(val); + }); + + const filterNode = (value: string, data: Tree) => { + if (!value) return true; + 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 tableData = [ + { + date: '2016-05-03', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-02', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-04', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-01', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-08', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-06', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-07', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + ]; + const activeName = ref('first'); + + 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(true) + } + return { + activeName, + handleClick, + ruleForm, + filterText, + treeRef, + defaultProps, + filterNode, + data, + tableData, + Show, + openUp, + ShowD, + openD, + Plus, + EditPen, + Delete, + Download, + Refresh, + Upload, + }; + }, +}); +</script> +<style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; + margin-bottom: 10px; +} +.tree { + height: 750px; + background-color: #fff; + overflow: hidden; + overflow-y: auto; +} +.btns { + padding: 10px 0px 10px 10px; + display: flex; + justify-content: space-between; + background-color: #fff; +} +</style> diff --git a/src/views/facilityManagement/safetyEquipment/index.vue b/src/views/facilityManagement/safetyEquipment/index.vue new file mode 100644 index 0000000..cd27e9a --- /dev/null +++ b/src/views/facilityManagement/safetyEquipment/index.vue @@ -0,0 +1,303 @@ +<template> + <div> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item> + <el-input v-model="ruleForm.pass" placeholder="装置设施名称" /> + </el-form-item> + </el-col> + <el-col :span="4"> + <el-form-item> + <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-form-item> + </el-col> + </el-row> + </el-form> + <el-row> + <el-col :span="4"> + <div class="tree"> + <el-input v-model="filterText" style="height: 30px" placeholder="Filter keyword" /> + <el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" /> + </div> + </el-col> + <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> + </div> + <div> + <el-button :icon="Upload" @click="openUp"></el-button> + <el-button :icon="Download"></el-button> + <el-button :icon="Refresh"></el-button> + </div> + </div> + <div style="padding-left: 10px"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column type="expand"> + <template #default> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 0 5%"> + <el-tab-pane label="设备保养" name="first"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="保养情况" sortable /> + <el-table-column property="name" align="center" label="保养负责人" sortable /> + <el-table-column property="name" align="center" label="保养日期" sortable /> + <el-table-column property="name" align="center" label="保养负责人单位" sortable /> + </el-table> + </el-tab-pane> + <el-tab-pane label="设备检查" name="second" + ><el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="检查人" sortable /> + <el-table-column property="name" align="center" label="检查日期" sortable /> + <el-table-column property="name" align="center" label="检查人部门" sortable /> + <el-table-column property="name" align="center" label="检查结果" sortable /> + <el-table-column property="name" align="center" label="检查状态" sortable /> </el-table + ></el-tab-pane> + <el-tab-pane label="设备检测" name="third"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="检测人" sortable /> + <el-table-column property="name" align="center" label="检测日期" sortable /> + <el-table-column property="name" align="center" label="检测人单位" sortable /> + <el-table-column property="name" align="center" label="检测内容" sortable /> + <el-table-column property="name" align="center" label="检测结果" sortable /> + <el-table-column property="name" align="center" label="检测状态" sortable /> + </el-table> + </el-tab-pane> + <el-tab-pane label="设备维修" name="fourth"> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> + <el-table-column property="name" align="center" label="设施异常项" sortable /> + <el-table-column property="name" align="center" label="维修状态" sortable /> + <el-table-column property="name" align="center" label="维修情况" sortable /> + <el-table-column property="name" align="center" label="维修负责人" sortable /> + <el-table-column property="name" align="center" label="维修负责人单位" sortable /> + <el-table-column property="name" align="center" label="维修开始日期" sortable /> + <el-table-column property="name" align="center" label="维修结束日期" sortable /> + </el-table> + </el-tab-pane> + </el-tabs> + </template> + </el-table-column> + <el-table-column label="装置设施名称" align="center" sortable> + <template #default="scope">{{ scope.row.date }}</template> + </el-table-column> + <el-table-column property="name" align="center" label="装置设施位号" sortable /> + <el-table-column property="name" align="center" label="装置设施用途" sortable /> + <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"> + <template #default> + <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="Delete">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[100, 200, 300, 400]" + :small="small" + :disabled="disabled" + :background="background" + layout="total, sizes, prev, pager, next, jumper" + :total="400" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </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 updata from '/@/components/updata/updata.vue' +import Dailog from '/@/components/equipmentDailog/Dailog.vue' +import { ElTree, TabsPaneContext } from 'element-plus'; +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: '', + checkPass: '', + }); + const filterText = ref(''); + const treeRef = ref<InstanceType<typeof ElTree>>(); + + const defaultProps = { + children: 'children', + label: 'label', + }; + + watch(filterText, (val) => { + treeRef.value!.filter(val); + }); + + const filterNode = (value: string, data: Tree) => { + if (!value) return true; + 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 tableData = [ + { + date: '2016-05-03', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-02', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-04', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-01', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-08', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-06', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-07', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + ]; + const activeName = ref('first'); + + 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 { + activeName, + handleClick, + ruleForm, + filterText, + treeRef, + defaultProps, + filterNode, + data, + tableData, + Show, + openUp, + ShowD, + openD, + Plus, + EditPen, + Delete, + Download, + Refresh, + Upload, + }; + }, +}); +</script> +<style scoped> +.topTitle { + background-color: #fff; + padding: 20px 0px 20px 0px; + margin-bottom: 10px; +} +.tree { + height: 750px; + background-color: #fff; + overflow: hidden; + overflow-y: auto; +} +.btns { + padding: 10px 0px 10px 10px; + display: flex; + justify-content: space-between; + background-color: #fff; +} +</style> \ No newline at end of file -- Gitblit v1.9.2