| | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="14" style="padding:20px"> |
| | | <el-col :span="14" style="padding: 20px"> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" status-icon> |
| | | <el-row> |
| | | <el-col :span="10" :offset="1"> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-table :data="tableData" style="width: 100%; margin-top: 20px"> |
| | | <el-table-column align="center" width="50px" type="selection"></el-table-column> |
| | | <el-table-column align="center" prop="date" label="安全目标指标" /> |
| | | <el-table-column align="center" prop="name" label="目标指标编号" /> |
| | | <el-table-column align="center" prop="address" label="年度" /> |
| | | <el-table-column align="center" prop="address" label="指标值" /> |
| | | <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio"> |
| | | <el-table-column align="center"> |
| | | <template #default="scope"> |
| | | <el-radio-group v-model="radio1"> |
| | | <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio> |
| | | </el-radio-group> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="date" label="登录名" /> |
| | | <el-table-column align="center" prop="name" label="用户名" /> |
| | | <el-table-column align="center" prop="address" label="所属机构" /> |
| | | <el-table-column align="center" prop="address" label="所属部门" /> |
| | | <el-table-column align="center" prop="address" label="状态" /> |
| | | </el-table> |
| | | <el-pagination |
| | | style="padding: 20px 0; border-bottom: 1px solid #dedede" |
| | |
| | | /> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)"> |
| | | {{ tag }} |
| | | <el-tag |
| | | v-for="tag in dynamicTags" |
| | | :key="tag" |
| | | class="mx-1" |
| | | style="margin: 5px" |
| | | closable |
| | | :disable-transitions="false" |
| | | @close="handleClose(tag)" |
| | | > |
| | | {{ tag.name }} |
| | | </el-tag> |
| | | </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> |
| | |
| | | children?: Tree[]; |
| | | } |
| | | export default defineComponent({ |
| | | setup() { |
| | | setup(props,{emit}) { |
| | | //左边树形部分 |
| | | const names = ref<any>(); |
| | | const handleNodeClick = (data: Tree) => { |
| | |
| | | }); |
| | | // 表格 |
| | | const tableData = [ |
| | | { |
| | | { id:1, |
| | | date: '2016-05-03', |
| | | name: 'Tom', |
| | | address: 'No. 189, Grove St, Los Angeles', |
| | | }, |
| | | { |
| | | { |
| | | id:2, |
| | | date: '2016-05-02', |
| | | name: 'Tom', |
| | | address: 'No. 189, Grove St, Los Angeles', |
| | | }, |
| | | { |
| | | { id:3, |
| | | date: '2016-05-04', |
| | | name: 'Tom', |
| | | address: 'No. 189, Grove St, Los Angeles', |
| | | }, |
| | | { |
| | | { id:4, |
| | | date: '2016-05-01', |
| | | name: 'Tom', |
| | | address: 'No. 189, Grove St, Los Angeles', |
| | |
| | | const handleCurrentChange = (val: number) => { |
| | | console.log(`current page: ${val}`); |
| | | }; |
| | | const radio1 = ref('1'); |
| | | // 右方点击添加后显示标签 |
| | | const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']); |
| | | // 右方点击添加后显示标签 |
| | | const dynamicTags = ref(['']); |
| | | const handleClose = (tag: string) => { |
| | | dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); |
| | | radio1.value = ''; |
| | | }; |
| | | const radio1 = ref(''); |
| | | const radio = (event: any) => { |
| | | dynamicTags.value[0] = event; |
| | | }; |
| | | // 开启弹窗 |
| | | const dialogVisible = ref(false); |
| | | const openDailog = () => { |
| | | dialogVisible.value = true; |
| | | }; |
| | | //全屏 |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | }else{ |
| | | full.value = false; |
| | | } |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | const submitForm=()=>{ |
| | | let obj=JSON.parse(JSON.stringify(dynamicTags.value)) |
| | | emit("SearchUser",obj[0]) |
| | | dialogVisible.value = false |
| | | } |
| | | return { |
| | | dialogVisible, |
| | | names, |
| | |
| | | handleCurrentChange, |
| | | radio1, |
| | | dynamicTags, |
| | | handleClose, |
| | | handleClose, |
| | | FullScreen, |
| | | full, |
| | | toggleFullscreen |
| | | toggleFullscreen, |
| | | radio, |
| | | submitForm |
| | | }; |
| | | }, |
| | | }); |