</div> | </div> | ||||
</template> | </template> | ||||
<script lang="ts"> | |||||
<script> | |||||
import SlideImgThreePng from '@/assets/image/slide_img_three.png'; | import SlideImgThreePng from '@/assets/image/slide_img_three.png'; | ||||
//md开撸第二版 | //md开撸第二版 | ||||
export default { | export default { |
let toolData: any = [] | let toolData: any = [] | ||||
data.forEach((element: any, index: number) => { | data.forEach((element: any, index: number) => { | ||||
if (props.rowKey) { | if (props.rowKey) { | ||||
if (scope.row[props.rowKey] === element.title) { | if (scope.row[props.rowKey] === element.title) { | ||||
element.visible = true | element.visible = true | ||||
} else { | } else { |
processData.search = {} | processData.search = {} | ||||
//搜索条件 | //搜索条件 | ||||
let searchCondition: any = reactive(processData.search) | let searchCondition: any = reactive(processData.search) | ||||
console.log(searchCondition); | |||||
//表单字段 | //表单字段 | ||||
const form: any = ref(initForm) | const form: any = ref(initForm) |
<search-menu /> | <search-menu /> | ||||
<!-- 全屏 --> | <!-- 全屏 --> | ||||
<el-icon @click="fullScreen" style="margin: 0px 20px 0px 20px" size="24px" color="#FFFFFF"> | <el-icon @click="fullScreen" style="margin: 0px 20px 0px 20px" size="24px" color="#FFFFFF"> | ||||
<item-ioc v-if="menuStart.menuIsExpansion" icon="FullScreen" /> | |||||
<item-ioc icon="FullScreen" /> | |||||
</el-icon> | </el-icon> | ||||
<!-- 弹出框提示 --> | <!-- 弹出框提示 --> | ||||
<el-popover v-model:visible="visible" placement="bottom" :width="160"> | <el-popover v-model:visible="visible" placement="bottom" :width="160"> | ||||
<div class="as-layout-vertical"> | <div class="as-layout-vertical"> | ||||
<el-button type="default" @click="hint('个人中心')" class="as-text-14px" style="width: 100%" | |||||
>个人中心</el-button | |||||
> | |||||
<el-button | |||||
type="default" | |||||
@click="hint('退出登录')" | |||||
class="as-text-14px" | |||||
style="margin-right: 10px" | |||||
>退出登录</el-button | |||||
> | |||||
<el-button type="default" @click="hint('个人中心')" class="as-text-14px" style="width: 100%">个人中心</el-button> | |||||
<el-button type="default" @click="hint('退出登录')" class="as-text-14px" style="margin-right: 10px">退出登录 | |||||
</el-button> | |||||
</div> | </div> | ||||
<template #reference> | <template #reference> | ||||
<!-- 头像 --> | <!-- 头像 --> | ||||
</template> | </template> | ||||
</el-popover> | </el-popover> | ||||
<!-- 设置 --> | <!-- 设置 --> | ||||
<el-icon | |||||
@click="hint('点击了设置')" | |||||
style="margin: 0px 30px 0px 30px" | |||||
size="24px" | |||||
color="#FFFFFF" | |||||
> | |||||
<item-ioc v-if="menuStart.menuIsExpansion" icon="Setting" /> | |||||
<el-icon @click="hint('点击了设置')" style="margin: 0px 30px 0px 30px" size="24px" color="#FFFFFF"> | |||||
<item-ioc icon="Setting" /> | |||||
</el-icon> | </el-icon> | ||||
</div> | </div> | ||||
</div> | </div> |
<template> | <template> | ||||
<crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit"> | |||||
<crud-template ref="crud" :home-data="field" :tableData="testData" @add="addData" @submit="submit" | |||||
@handleEdit="handleEdit"> | |||||
<template #search="{ searchCondition }"> | <template #search="{ searchCondition }"> | ||||
<el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> | <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> | ||||
<div> | <div> | ||||
<div v-show="false"> | <div v-show="false"> | ||||
{{ item.sort = Number(item.sort) }} | {{ item.sort = Number(item.sort) }} | ||||
</div> | </div> | ||||
<el-input-number class="el-input-number" v-model="item.sort" style="width: 100%;" | |||||
<el-input-number :min="0" class="el-input-number" v-model="item.sort" style="width: 100%;" | |||||
controls-position="right"> | controls-position="right"> | ||||
</el-input-number> | </el-input-number> | ||||
</el-form-item> | </el-form-item> | ||||
}, | }, | ||||
] | ] | ||||
let item = ref({ | |||||
const initItem = { | |||||
title: '', | title: '', | ||||
sort: 0, | sort: 0, | ||||
top: '是', | top: '是', | ||||
start: '启用', | start: '启用', | ||||
section: '' | section: '' | ||||
}) | |||||
} | |||||
let item: any= ref(initItem) | |||||
//编辑事件 | //编辑事件 | ||||
const handleEdit = (idx: any, row: any) => { | const handleEdit = (idx: any, row: any) => { | ||||
item.value = toRaw(row) | item.value = toRaw(row) | ||||
} | } | ||||
//添加事件 | |||||
const addData = () => { | |||||
item.value = initItem | |||||
} | |||||
//表单校验 | //表单校验 | ||||
const ruleFormRef: any = ref() | const ruleFormRef: any = ref() | ||||
const crud: any = ref() | const crud: any = ref() | ||||
const submit = () => { | const submit = () => { | ||||
ruleFormRef.value.validate((valid: any, fields: any) => { | ruleFormRef.value.validate((valid: any, fields: any) => { | ||||
if (valid) { | if (valid) { | ||||
console.log(item, ruleFormRef); | |||||
crud.value.reset() | |||||
console.log(item.value); | |||||
// crud.value.reset() | |||||
} else { | } else { | ||||
return false | return false | ||||
} | } | ||||
} | } | ||||
/deep/.el-range-editor.el-input__inner { | /deep/.el-range-editor.el-input__inner { | ||||
display: inline-flex; | |||||
align-items: center; | |||||
padding: 3px 10px; | |||||
height: 33px; | |||||
width: 300px; | |||||
display: inline-flex; | |||||
align-items: center; | |||||
padding: 3px 10px; | |||||
height: 33px; | |||||
width: 300px; | |||||
} | } | ||||
</style> | </style> |
<template> | <template> | ||||
<crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit"> | |||||
<crud-template ref="crud" :home-data="field" :tableData="testData" @add="addData" @submit="submit" | |||||
@handleEdit="handleEdit"> | |||||
<template #search="{ searchCondition }"> | <template #search="{ searchCondition }"> | ||||
<el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> | <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> | ||||
<div> | <div> | ||||
}, | }, | ||||
] | ] | ||||
let item = ref({ | |||||
const initItem = { | |||||
title: '', | title: '', | ||||
sort: 0, | sort: 0, | ||||
top: '是', | top: '是', | ||||
start: '启用', | start: '启用', | ||||
section: '' | section: '' | ||||
}) | |||||
} | |||||
let item: any= ref(initItem) | |||||
//编辑事件 | //编辑事件 | ||||
const handleEdit = (idx: any, row: any) => { | const handleEdit = (idx: any, row: any) => { | ||||
item.value = toRaw(row) | item.value = toRaw(row) | ||||
} | } | ||||
//添加事件 | |||||
const addData = () => { | |||||
item.value = initItem | |||||
} | |||||
//表单校验 | //表单校验 | ||||
const ruleFormRef: any = ref() | const ruleFormRef: any = ref() | ||||
const crud: any = ref() | const crud: any = ref() | ||||
const submit = () => { | const submit = () => { | ||||
ruleFormRef.value.validate((valid: any, fields: any) => { | ruleFormRef.value.validate((valid: any, fields: any) => { | ||||
if (valid) {[] | |||||
console.log(item, ruleFormRef); | |||||
crud.value.reset() | |||||
if (valid) { | |||||
console.log(item.value); | |||||
// crud.value.reset() | |||||
} else { | } else { | ||||
return false | return false | ||||
} | } | ||||
} | } | ||||
/deep/.el-range-editor.el-input__inner { | /deep/.el-range-editor.el-input__inner { | ||||
display: inline-flex; | |||||
align-items: center; | |||||
padding: 3px 10px; | |||||
height: 33px; | |||||
width: 300px; | |||||
display: inline-flex; | |||||
align-items: center; | |||||
padding: 3px 10px; | |||||
height: 33px; | |||||
width: 300px; | |||||
} | } | ||||
</style> | </style> |