| | |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-row> |
| | | <el-col :span="17"> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" status-icon> |
| | | <!-- <el-form ref="ruleFormRef" :model="ruleForm" status-icon> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item size="default"> |
| | | <el-input v-model="ruleForm.pass" placeholder="类别名称" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- <el-col :span="6" :offset="1"> |
| | | <el-col :span="6" :offset="1"> |
| | | <el-form-item> |
| | | <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> |
| | | </el-form-item> |
| | | </el-col> --> |
| | | </el-col> |
| | | <el-col :span="11" :offset="1"> |
| | | <el-form-item> |
| | | <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-button size="default" :icon="Delete">清除选择</el-button> |
| | | <el-table :data="tableData" style="width: 100%; margin-top: 20px"> |
| | | <el-table-column align="center"> |
| | | </el-form> --> |
| | | <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button> |
| | | <el-table :data="tableData" style="width: 100%; margin-top: 20px" row-key="id" :tree-props="propse"> |
| | | <el-table-column align="center" width="100px"> |
| | | <template #default="scope"> |
| | | <el-radio-group v-model="radio1" @change="radio"> |
| | | <el-radio :label="scope.row.date" size="large">{{ null }}</el-radio> |
| | | <el-radio-group v-model="radio1"> |
| | | <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio> |
| | | </el-radio-group> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="date" label="id" /> |
| | | <el-table-column align="center" prop="name" label="类别名称" /> |
| | | <el-table-column align="center" prop="id" label="id" /> |
| | | <el-table-column align="center" prop="typeName" label="类别名称" /> |
| | | </el-table> |
| | | <el-pagination |
| | | style="padding: 20px 0; border-bottom: 1px solid #dedede" |
| | | 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" |
| | | /> |
| | | </el-col> |
| | | <el-col :span="7"> |
| | | <div v-if="dynamicTags[0]==''?false:true"> |
| | | <el-tag |
| | | v-for="tag in dynamicTags" |
| | | :key="tag" |
| | |
| | | :disable-transitions="false" |
| | | @close="handleClose(tag)" |
| | | > |
| | | {{ tag }} |
| | | {{ tag.typeName }} |
| | | </el-tag> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> |
| | | <el-button type="primary" @click="submitForm" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | <script lang="ts"> |
| | | import { defineComponent, reactive, ref } from 'vue'; |
| | | import { Delete, FullScreen } from '@element-plus/icons-vue'; |
| | | import { facilityManagementApi } from '/@/api/facilityManagement'; |
| | | import { ElMessage,ElMessageBox } from 'element-plus'; |
| | | export default defineComponent({ |
| | | setup() { |
| | | setup(props,{emit}) { |
| | | const dialogVisible = ref<boolean>(false); |
| | | const openDailog = () => { |
| | | dialogVisible.value = true; |
| | | listApi() |
| | | }; |
| | | // 搜索条件 |
| | | const ruleForm = reactive({ |
| | | pass: '', |
| | | checkPass: '', |
| | | }); |
| | | // 列表 |
| | | const listApi = () => { |
| | | facilityManagementApi() |
| | | .getequipmentTypeMngTreeData() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | tableData.value = res.data.data; |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | // 表格 |
| | | 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', |
| | | }, |
| | | ]; |
| | | const pageSize4 = ref(100); |
| | | const handleSizeChange = (val: number) => { |
| | | console.log(`${val} items per page`); |
| | | }; |
| | | const handleCurrentChange = (val: number) => { |
| | | console.log(`current page: ${val}`); |
| | | const tableData = ref([]) |
| | | const propse = { |
| | | children: 'childList', |
| | | }; |
| | | // 右方点击添加后显示标签 |
| | | const dynamicTags = ref(['2016-05-03']); |
| | | const dynamicTags = ref(['']); |
| | | const handleClose = (tag: string) => { |
| | | dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); |
| | | radio1.value = ''; |
| | | }; |
| | | const radio1 = ref('2016-05-03'); |
| | | const radio = (event: any) => { |
| | | dynamicTags.value[0] = event; |
| | | const radio1 = ref(''); |
| | | const radio = (data: any) => { |
| | | dynamicTags.value[0] = data |
| | | }; |
| | | const clear=()=>{ |
| | | radio1.value="" |
| | | dynamicTags.value=[''] |
| | | } |
| | | const submitForm=()=>{ |
| | | emit('typeId',dynamicTags.value[0]) |
| | | dialogVisible.value=false |
| | | } |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | |
| | | } |
| | | }; |
| | | return { |
| | | submitForm, |
| | | clear, |
| | | dialogVisible, |
| | | openDailog, |
| | | ruleForm, |
| | | listApi, |
| | | propse, |
| | | tableData, |
| | | pageSize4, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | dynamicTags, |
| | | handleClose, |
| | | radio1, |