特性: 新增表单
This commit is contained in:
yuanzbz
parent
2925c5d832
commit
1d57dd78b8
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 143 KiB |
|
|
@ -1,32 +1,35 @@
|
|||
<template>
|
||||
<div class="advancedForm">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:inline="true"
|
||||
:label-position="'right'"
|
||||
:model="formInline"
|
||||
class="form-inline">
|
||||
ref="ruleFormRef"
|
||||
:inline="true"
|
||||
:label-position="'right'"
|
||||
:model="formInline"
|
||||
class="form-inline"
|
||||
>
|
||||
<el-row
|
||||
:class="{
|
||||
'not-show':byHeight&&!isExpand
|
||||
}"
|
||||
:gutter="gutterWidth">
|
||||
<el-col :span="item.span"
|
||||
v-for="item,index in columns"
|
||||
:key="item.name"
|
||||
v-show="byHeight?true:(index< (showRow*3)||isExpand)">
|
||||
<el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type==='input'">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="formInline[item.name]" :placeholder="item.placeholder" />
|
||||
:class="{
|
||||
'not-show': byHeight && !isExpand,
|
||||
}"
|
||||
:gutter="gutterWidth"
|
||||
>
|
||||
<el-col
|
||||
:span="item.span"
|
||||
v-for="(item, index) in columns"
|
||||
:key="item.name"
|
||||
v-show="byHeight ? true : index < showRow * 3 || isExpand"
|
||||
>
|
||||
<el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
|
||||
<el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
|
||||
</el-form-item>
|
||||
<template v-else-if="item.type==='date'">
|
||||
<el-form-item :label="item.title" :label-width="labelWidth" >
|
||||
|
||||
<template v-else-if="item.type === 'date'">
|
||||
<el-form-item :label="item.title" :label-width="labelWidth">
|
||||
<el-date-picker
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="formInline[item.name]"
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="formInline[item.name]"
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
@ -35,85 +38,86 @@
|
|||
</el-form>
|
||||
<div class="search-btn">
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand"
|
||||
>{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, ref} from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
let props = defineProps({
|
||||
// 宽度
|
||||
labelWidth: {
|
||||
default: "100px",
|
||||
},
|
||||
gutterWidth: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
showRow:{
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
columns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
byHeight:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
let props = defineProps({
|
||||
// 宽度
|
||||
labelWidth: {
|
||||
default: '100px',
|
||||
},
|
||||
gutterWidth: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
showRow: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
byHeight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['submit', 'reset'])
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
|
||||
const formInline = reactive({})
|
||||
|
||||
for (let item of props.columns) {
|
||||
formInline[item.name] = null
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['submit','reset'])
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
|
||||
const formInline = reactive({
|
||||
})
|
||||
const onSubmit = () => {
|
||||
emit('submit', formInline)
|
||||
}
|
||||
|
||||
for(let item of props.columns){
|
||||
formInline[item.name] = null
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('submit',formInline)
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
console.log('formEl',formEl)
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
const keys = Object.keys(formInline);
|
||||
keys.forEach(key => {
|
||||
formInline[key] = null;
|
||||
});
|
||||
emit("reset", formInline);
|
||||
}
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
console.log('formEl', formEl)
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
const keys = Object.keys(formInline)
|
||||
keys.forEach((key) => {
|
||||
formInline[key] = null
|
||||
})
|
||||
emit('reset', formInline)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.advancedForm{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.form-inline{
|
||||
flex: 1;
|
||||
.advancedForm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.form-inline {
|
||||
flex: 1;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search-btn {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.not-show {
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.el-form--inline .el-form-item{
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search-btn{
|
||||
margin-left: 40px;
|
||||
}
|
||||
.not-show{
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'input'" style="width: 100%">
|
||||
<el-input v-model="value" v-bind="$attrs" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'select'" style="width: 100%">
|
||||
<el-select v-model="value" v-bind="$attrs" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in config.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'date-picker'" style="width: 100%">
|
||||
<el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'cascader'" style="width: 100%">
|
||||
<el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'time-select'" style="width: 100%">
|
||||
<el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
type ConfigType = {
|
||||
modelValue?: any
|
||||
config?: any
|
||||
}
|
||||
|
||||
const props = defineProps<ConfigType>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void
|
||||
}>()
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return props?.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emits('update:modelValue', value)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="advancedForm">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:inline="true"
|
||||
:label-position="'right'"
|
||||
:model="formParams"
|
||||
class="form-inline"
|
||||
>
|
||||
<el-row
|
||||
:class="{
|
||||
'not-show': byHeight && !isExpand,
|
||||
}"
|
||||
:gutter="gutterWidth"
|
||||
>
|
||||
<el-col
|
||||
:span="item.span"
|
||||
v-for="(item, index) in columns"
|
||||
:key="item.name"
|
||||
v-show="byHeight ? true : index < showRow * 3 || isExpand"
|
||||
>
|
||||
<BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="search-btn">
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand" v-if="columns.length > 3">
|
||||
{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import BaseFormItem from './components/BaseFormItem.vue'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
let props = defineProps({
|
||||
// 宽度
|
||||
labelWidth: {
|
||||
default: '100px',
|
||||
},
|
||||
gutterWidth: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
showRow: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
byHeight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit', 'reset'])
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const formParams = reactive({})
|
||||
|
||||
const initFormParams = () => {
|
||||
for (let item of props.columns) {
|
||||
formParams[item.name] = item?.value
|
||||
}
|
||||
}
|
||||
|
||||
// 进行遍历获取参数
|
||||
const getFormParams = () => {
|
||||
let searchParams = {}
|
||||
for (let item of props.columns) {
|
||||
searchParams[item.name] = item?.value
|
||||
}
|
||||
return searchParams
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initFormParams()
|
||||
})
|
||||
|
||||
// 获取参数进行组装为 obj
|
||||
const onSubmit = () => {
|
||||
let searchParams = getFormParams()
|
||||
emit('submit', searchParams)
|
||||
}
|
||||
|
||||
// 重置参数
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
const keys = Object.keys(formParams)
|
||||
keys.forEach((key) => {
|
||||
let itemColums = props.columns.find((item) => item.name === key)
|
||||
itemColums.value = formParams[key]
|
||||
})
|
||||
let searchParams = getFormParams()
|
||||
emit('reset', searchParams)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.advancedForm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.form-inline {
|
||||
flex: 1;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search-btn {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.not-show {
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div class="zb-pro-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true"
|
||||
class="search-form"
|
||||
:model="formInline" ref="ruleFormRef" >
|
||||
<el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
|
||||
<template v-for="(item, index) in formSearchData" :key="index">
|
||||
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
|
||||
<template v-if="item.valueType === 'input'">
|
||||
|
|
@ -11,13 +9,15 @@
|
|||
</template>
|
||||
<template v-if="item.valueType === 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]"
|
||||
:placeholder="`请选择${item.label}`"
|
||||
>
|
||||
<el-option
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
:label="ite.label"
|
||||
:value="ite.value"
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
:label="ite.label"
|
||||
:value="ite.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
|
@ -25,11 +25,13 @@
|
|||
</template>
|
||||
</el-form>
|
||||
<div class="search">
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
<el-button link type="primary" @click="isExpand = !isExpand"
|
||||
>{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,28 +44,28 @@
|
|||
<!-- ------------表格--------------->
|
||||
<div class="table">
|
||||
<el-table
|
||||
class="zb-table"
|
||||
v-loading="loading"
|
||||
@selection-change="(val) => emit('selection-change', val)"
|
||||
:data="list"
|
||||
:border="true"
|
||||
class="zb-table"
|
||||
v-loading="loading"
|
||||
@selection-change="(val) => emit('selection-change', val)"
|
||||
:data="list"
|
||||
:border="true"
|
||||
>
|
||||
<template v-for="item in columns">
|
||||
<el-table-column
|
||||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
/>
|
||||
<el-table-column
|
||||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
|
||||
|
|
@ -76,174 +78,174 @@
|
|||
<!-- ------------分页--------------->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="data.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="data.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach((item) => {
|
||||
formInline[item.name] = null
|
||||
import { computed, ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach((item) => {
|
||||
formInline[item.name] = null
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {
|
||||
list.value = list.value.filter((item) => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.zb-pro-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
.header{
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.zb-pro-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form{
|
||||
flex: 1;
|
||||
::v-deep{
|
||||
.el-input--default{
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form {
|
||||
flex: 1;
|
||||
::v-deep {
|
||||
.el-input--default {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.search{
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
min-height: 300px;
|
||||
.operator{
|
||||
margin-bottom: 15px
|
||||
}
|
||||
.table{
|
||||
position: relative;
|
||||
.footer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
min-height: 300px;
|
||||
.operator {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.table {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.zb-table {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.zb-table{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
::v-deep {
|
||||
.el-table__header th {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.el-table__header th{
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,249 @@
|
|||
<template>
|
||||
<div class="zb-pro-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true"
|
||||
class="search-form"
|
||||
:model="formInline" ref="ruleFormRef" >
|
||||
<template v-for="(item, index) in formSearchData" :key="index">
|
||||
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
|
||||
<template v-if="item.valueType === 'input'">
|
||||
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
|
||||
</template>
|
||||
<template v-if="item.valueType === 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
|
||||
<el-option
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
:label="ite.label"
|
||||
:value="ite.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="search">
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!----------底部---------------------->
|
||||
<div class="footer">
|
||||
<!-----------工具栏操作工具----------------->
|
||||
<div class="operator">
|
||||
<slot name="btn"></slot>
|
||||
</div>
|
||||
<!-- ------------表格--------------->
|
||||
<div class="table">
|
||||
<el-table
|
||||
class="zb-table"
|
||||
v-loading="loading"
|
||||
@selection-change="(val) => emit('selection-change', val)"
|
||||
:data="list"
|
||||
:border="true"
|
||||
>
|
||||
<template v-for="item in columns">
|
||||
<el-table-column
|
||||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
/>
|
||||
<el-table-column
|
||||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
|
||||
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- ------------分页--------------->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="data.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach((item) => {
|
||||
formInline[item.name] = null
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {
|
||||
list.value = list.value.filter((item) => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.zb-pro-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form{
|
||||
flex: 1;
|
||||
::v-deep{
|
||||
.el-input--default{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
min-height: 300px;
|
||||
.operator{
|
||||
margin-bottom: 15px
|
||||
}
|
||||
.table{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.zb-table{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.el-table__header th{
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="app-main" >
|
||||
<div class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade-slide" mode="out-in" appear>
|
||||
<keep-alive :include="cacheRoutes" v-if="isReload">
|
||||
<component :is="useWrapComponents(Component,route)" :key="route.path" />
|
||||
<component :is="useWrapComponents(Component, route)" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useWrapComponents} from '@/hooks/useWrapComponents'
|
||||
import { useWrapComponents } from '@/hooks/useWrapComponents'
|
||||
import { computed, ref } from 'vue'
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {usePermissionStore} from "@/store/modules/permission"
|
||||
import { useSettingStore } from '@/store/modules/setting'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
const SettingStore = useSettingStore()
|
||||
const PermissionStore = usePermissionStore()
|
||||
const cacheRoutes = computed(() =>PermissionStore.keepAliveRoutes)
|
||||
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes)
|
||||
const isReload = computed(() => SettingStore.isReload)
|
||||
</script>
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.app-main-inner{
|
||||
.app-main-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -1,60 +1,54 @@
|
|||
<template>
|
||||
<div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
|
||||
<Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
:unique-opened="SettingStore.themeConfig.uniqueOpened"
|
||||
:collapse-transition="false"
|
||||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<SubItem
|
||||
v-for="route in permission_routes"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
|
||||
<Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
:unique-opened="SettingStore.themeConfig.uniqueOpened"
|
||||
:collapse-transition="false"
|
||||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<SubItem v-for="route in permission_routes" :key="route.path" :item="route" />
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Logo from './components/Logo.vue'
|
||||
import SubItem from '../SubMenu/SubItem.vue'
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {usePermissionStore} from "@/store/modules/permission"
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Logo from './components/Logo.vue'
|
||||
import SubItem from '../SubMenu/SubItem.vue'
|
||||
import { useSettingStore } from '@/store/modules/setting'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
// 在setup中获取store
|
||||
const route = useRoute()
|
||||
const PermissionStore = usePermissionStore()
|
||||
const SettingStore = useSettingStore()
|
||||
// 在setup中获取store
|
||||
const route = useRoute()
|
||||
const PermissionStore = usePermissionStore()
|
||||
const SettingStore = useSettingStore()
|
||||
|
||||
// 是否折叠
|
||||
const isCollapse = computed(() => !SettingStore.isCollapse)
|
||||
// 设置
|
||||
const themeConfig = computed(() =>SettingStore.themeConfig )
|
||||
// 是否折叠
|
||||
const isCollapse = computed(() => !SettingStore.isCollapse)
|
||||
// 设置
|
||||
const themeConfig = computed(() => SettingStore.themeConfig)
|
||||
|
||||
// 获取路由
|
||||
const permission_routes = computed(() => PermissionStore.permission_routes)
|
||||
// 获取路由
|
||||
const permission_routes = computed(() => PermissionStore.permission_routes)
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
height: 100%;
|
||||
}
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="g-container-layout" :class="classObj">
|
||||
<Mobile/>
|
||||
<LayoutVertical v-if="device === 'mobile'"/>
|
||||
<component :is="LayoutComponents[themeConfig.mode]" v-else/>
|
||||
<Mobile />
|
||||
<LayoutVertical v-if="device === 'mobile'" />
|
||||
<component :is="LayoutComponents[themeConfig.mode]" v-else />
|
||||
<Theme />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed,watch } from 'vue'
|
||||
import { computed, watch } from 'vue'
|
||||
import Theme from '@/components/Theme/index.vue'
|
||||
import Mobile from './components/Mobile/index.vue'
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import { useSettingStore } from '@/store/modules/setting'
|
||||
import { useResizeHandler } from '@/hooks/useResizeHandler'
|
||||
import LayoutVertical from './LayoutVertical/index.vue'
|
||||
import LayoutHorizontal from './LayoutHorizontal/index.vue'
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
horizontal: LayoutHorizontal,
|
||||
vertical: LayoutVertical,
|
||||
columns: LayoutColumns,
|
||||
};
|
||||
}
|
||||
|
||||
// 是否折叠
|
||||
const isCollapse = computed(() => {
|
||||
|
|
@ -31,14 +31,17 @@
|
|||
})
|
||||
let { device } = useResizeHandler()
|
||||
|
||||
watch(()=>device.value,(val)=>{
|
||||
let vertical = val==='mobile'?'vertical':themeConfig.value.mode
|
||||
const body = document.body as HTMLElement;
|
||||
body.setAttribute("class", `layout-${vertical}`);
|
||||
},{
|
||||
immediate:true
|
||||
})
|
||||
|
||||
watch(
|
||||
() => device.value,
|
||||
(val) => {
|
||||
let vertical = val === 'mobile' ? 'vertical' : themeConfig.value.mode
|
||||
const body = document.body as HTMLElement
|
||||
body.setAttribute('class', `layout-${vertical}`)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
)
|
||||
|
||||
// 当屏幕切换的时候进行变换
|
||||
const classObj = computed(() => {
|
||||
|
|
@ -49,7 +52,6 @@
|
|||
mobile: device.value === 'mobile',
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory,Router } from 'vue-router'
|
||||
import Layout from "@/layout/index.vue";
|
||||
import {
|
||||
createRouter,
|
||||
createWebHistory,
|
||||
RouteRecordRaw,
|
||||
createWebHashHistory,
|
||||
Router,
|
||||
} from 'vue-router'
|
||||
import Layout from '@/layout/index.vue'
|
||||
// 扩展继承属性
|
||||
interface extendRoute {
|
||||
hidden?:boolean
|
||||
hidden?: boolean
|
||||
}
|
||||
//
|
||||
import tableRouter from './modules/table'
|
||||
|
|
@ -17,20 +23,19 @@ import externalLink from './modules/externalLink'
|
|||
import formRouter from './modules/form'
|
||||
import functionPageRouter from './modules/functionPage'
|
||||
|
||||
|
||||
// 异步组件
|
||||
export const asyncRoutes = [
|
||||
...dataScreenRouter,
|
||||
...echartsRouter,
|
||||
...tableRouter,
|
||||
...formRouter,
|
||||
...othersRouter,
|
||||
...functionPageRouter,
|
||||
...chatRouter,
|
||||
...nestedRouter,
|
||||
...excelRouter,
|
||||
...externalLink,
|
||||
...systemRouter,
|
||||
...dataScreenRouter,
|
||||
...echartsRouter,
|
||||
...tableRouter,
|
||||
...formRouter,
|
||||
...othersRouter,
|
||||
...functionPageRouter,
|
||||
...chatRouter,
|
||||
...nestedRouter,
|
||||
...excelRouter,
|
||||
...externalLink,
|
||||
...systemRouter,
|
||||
]
|
||||
|
||||
/**
|
||||
|
|
@ -46,42 +51,43 @@ export const asyncRoutes = [
|
|||
* meta.icon ==> 菜单icon
|
||||
* meta.affix ==> 如果设置为true将会出现在 标签栏中
|
||||
* meta.breadcrumb ==> 如果设置为false，该项将隐藏在breadcrumb中（默认值为true）
|
||||
* meta.activeMenu ==> 详情页的时候可以设置菜单高亮 ,高亮菜单的path
|
||||
*/
|
||||
|
||||
export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
|
||||
{
|
||||
path: "/404",
|
||||
name: "404",
|
||||
component: () => import("@/views/errorPages/404.vue"),
|
||||
hidden:true,
|
||||
},
|
||||
{
|
||||
path: "/403",
|
||||
name: "403",
|
||||
component: () => import("@/views/errorPages/403.vue"),
|
||||
hidden:true,
|
||||
},
|
||||
export const constantRoutes: Array<RouteRecordRaw & extendRoute> = [
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
component: () => import('@/views/errorPages/404.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
name: '403',
|
||||
component: () => import('@/views/errorPages/403.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/login/index.vue'),
|
||||
hidden: true,
|
||||
meta: { title: '登录',}
|
||||
meta: { title: '登录' },
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
redirect: '/home',
|
||||
meta: { title: '首页', icon: 'House', },
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: 'House', affix: true ,role:['other']}
|
||||
meta: { title: '首页', icon: 'House', affix: true, role: ['other'] },
|
||||
},
|
||||
]
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -89,16 +95,15 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
|
|||
* notFoundRouter(找不到路由)
|
||||
*/
|
||||
export const notFoundRouter = {
|
||||
path: '/:pathMatch(.*)',
|
||||
name: "notFound",
|
||||
redirect: '/404'
|
||||
};
|
||||
|
||||
path: '/:pathMatch(.*)',
|
||||
name: 'notFound',
|
||||
redirect: '/404',
|
||||
}
|
||||
|
||||
const router = createRouter({
|
||||
// history: createWebHistory(process.env.BASE_URL), // history
|
||||
history: createWebHashHistory(), // hash
|
||||
routes:constantRoutes
|
||||
routes: constantRoutes,
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -1,44 +1,51 @@
|
|||
|
||||
/** When your routing table is too long, you can split it into small modules**/
|
||||
|
||||
import Layout from "@/layout/index.vue";
|
||||
import Layout from '@/layout/index.vue'
|
||||
|
||||
const formRouter = [{
|
||||
const formRouter = [
|
||||
{
|
||||
path: '/form',
|
||||
component: Layout,
|
||||
redirect: '/form/validateForm',
|
||||
name: 'form',
|
||||
alwaysShow:true,
|
||||
alwaysShow: true,
|
||||
meta: {
|
||||
title: '超级表单',
|
||||
icon: 'Grape'
|
||||
title: '超级表单',
|
||||
icon: 'Grape',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/form/validateForm',
|
||||
component: () => import('@/views/form/validateForm/index.vue'),
|
||||
name: 'validateForm',
|
||||
meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/form/advancedForm',
|
||||
component: () => import('@/views/form/advancedForm/index.vue'),
|
||||
name: 'advancedForm',
|
||||
meta: { title: '收缩 Form', icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/form/appendForm',
|
||||
component: () => import('@/views/form/appendForm/index.vue'),
|
||||
name: 'appendForm',
|
||||
meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/form/moreForm',
|
||||
component: () => import('@/views/form/moreForm/index.vue'),
|
||||
name: 'moreForm',
|
||||
meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
]
|
||||
}]
|
||||
{
|
||||
path: '/form/validateForm',
|
||||
component: () => import('@/views/form/validateForm/index.vue'),
|
||||
name: 'validateForm',
|
||||
meta: { title: '校验 Form', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/form/advancedForm',
|
||||
component: () => import('@/views/form/advancedForm/index.vue'),
|
||||
name: 'advancedForm',
|
||||
meta: { title: '收缩 Form', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/form/appendForm',
|
||||
component: () => import('@/views/form/appendForm/index.vue'),
|
||||
name: 'appendForm',
|
||||
meta: { title: '增删 Form', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/form/moreForm',
|
||||
component: () => import('@/views/form/moreForm/index.vue'),
|
||||
name: 'moreForm',
|
||||
meta: { title: '多表单验证', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/form/searchForm',
|
||||
component: () => import('@/views/form/searchForm/index.vue'),
|
||||
name: 'searchForm',
|
||||
meta: { title: '查询 Form', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default formRouter
|
||||
|
|
|
|||
|
|
@ -2,108 +2,109 @@
|
|||
|
||||
import Layout from '@/layout/index.vue'
|
||||
|
||||
const othersRouter = [{
|
||||
path: '/other',
|
||||
component: Layout,
|
||||
redirect: '/other/clipboard',
|
||||
name: 'other',
|
||||
meta: {
|
||||
title: '常用组件',
|
||||
icon: 'management'
|
||||
const othersRouter = [
|
||||
{
|
||||
path: '/other',
|
||||
component: Layout,
|
||||
redirect: '/other/clipboard',
|
||||
name: 'other',
|
||||
meta: {
|
||||
title: '常用组件',
|
||||
icon: 'management',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/other/clipboard',
|
||||
component: () => import('@/views/other/clipboard/index.vue'),
|
||||
name: 'clipboard',
|
||||
meta: { title: '剪贴板', roles: ['other'], icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/editor',
|
||||
component: () => import('@/views/other/editor/index.vue'),
|
||||
name: 'editor',
|
||||
meta: { title: '富文本编辑器', roles: ['other'], icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/code-mirror',
|
||||
component: () => import('@/views/other/codeMirror/index.vue'),
|
||||
name: 'code-mirror',
|
||||
meta: { title: '代码编辑器', roles: ['other'], icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/mark-down',
|
||||
component: () => import('@/views/other/markDown/index.vue'),
|
||||
name: 'mark-down',
|
||||
meta: { title: 'markDown', roles: ['other'], icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/print',
|
||||
component: () => import('@/views/other/print/index.vue'),
|
||||
name: 'print',
|
||||
meta: { title: '打印', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/cropper',
|
||||
component: () => import('@/views/other/cropper/index.vue'),
|
||||
name: 'cropper',
|
||||
meta: { title: '头像裁剪', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/card-drag',
|
||||
component: () => import('@/views/other/cardDrag/index.vue'),
|
||||
name: 'card-drag',
|
||||
meta: { title: '卡片拖拽', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/upload',
|
||||
component: () => import('@/views/other/upload/index.vue'),
|
||||
name: 'upload',
|
||||
meta: { title: '上传图片', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/qrcode',
|
||||
component: () => import('@/views/other/qrcode/index.vue'),
|
||||
name: 'qrcode',
|
||||
meta: { title: '生成二维码', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/svgIcon',
|
||||
component: () => import('@/views/other/svgIcon/index.vue'),
|
||||
name: 'svgIcon',
|
||||
meta: { title: 'svg 图标', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/iconfont',
|
||||
component: () => import('@/views/other/iconfont/index.vue'),
|
||||
name: 'iconfont',
|
||||
meta: { title: '阿里图标库', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/water-marker',
|
||||
component: () => import('@/views/other/waterMarker/index.vue'),
|
||||
name: 'water-marker',
|
||||
meta: { title: '生成水印', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/right-menu',
|
||||
component: () => import('@/views/other/rightMenu/index.vue'),
|
||||
name: 'right-menu',
|
||||
meta: { title: '右键菜单', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/count',
|
||||
component: () => import('@/views/other/count/index.vue'),
|
||||
name: 'count',
|
||||
meta: { title: '数字动画', icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/other/text-clamp',
|
||||
component: () => import('@/views/other/textClamp/index.vue'),
|
||||
name: 'text-clamp',
|
||||
meta: { title: '多行文本省略', icon: 'MenuIcon' },
|
||||
},
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/other/clipboard',
|
||||
component: () => import('@/views/other/clipboard/index.vue'),
|
||||
name: 'clipboard',
|
||||
meta: { title: '剪贴板', roles:['other'] ,icon: 'MenuIcon',}
|
||||
},
|
||||
{
|
||||
path: '/other/editor',
|
||||
component: () => import('@/views/other/editor/index.vue'),
|
||||
name: 'editor',
|
||||
meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/code-mirror',
|
||||
component: () => import('@/views/other/codeMirror/index.vue'),
|
||||
name: 'code-mirror',
|
||||
meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/mark-down',
|
||||
component: () => import('@/views/other/markDown/index.vue'),
|
||||
name: 'mark-down',
|
||||
meta: { title: 'markDown', roles: ['other'] , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/print',
|
||||
component: () => import('@/views/other/print/index.vue'),
|
||||
name: 'print',
|
||||
meta: { title: '打印' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/cropper',
|
||||
component: () => import('@/views/other/cropper/index.vue'),
|
||||
name: 'cropper',
|
||||
meta: { title: '头像裁剪' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/card-drag',
|
||||
component: () => import('@/views/other/cardDrag/index.vue'),
|
||||
name: 'card-drag',
|
||||
meta: { title: '卡片拖拽', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/upload',
|
||||
component: () => import('@/views/other/upload/index.vue'),
|
||||
name: 'upload',
|
||||
meta: { title: '上传图片', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/qrcode',
|
||||
component: () => import('@/views/other/qrcode/index.vue'),
|
||||
name: 'qrcode',
|
||||
meta: { title: '生成二维码', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/svgIcon',
|
||||
component: () => import('@/views/other/svgIcon/index.vue'),
|
||||
name: 'svgIcon',
|
||||
meta: { title: 'svg 图标', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/iconfont',
|
||||
component: () => import('@/views/other/iconfont/index.vue'),
|
||||
name: 'iconfont',
|
||||
meta: { title: '阿里图标库', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/water-marker',
|
||||
component: () => import('@/views/other/waterMarker/index.vue'),
|
||||
name: 'water-marker',
|
||||
meta: { title: '生成水印' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/right-menu',
|
||||
component: () => import('@/views/other/rightMenu/index.vue'),
|
||||
name: 'right-menu',
|
||||
meta: { title: '右键菜单' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/other/count',
|
||||
component: () => import('@/views/other/count/index.vue'),
|
||||
name: 'count',
|
||||
meta: { title: '数字动画', icon: 'MenuIcon' }
|
||||
},
|
||||
{
|
||||
path: '/other/text-clamp',
|
||||
component: () => import('@/views/other/textClamp/index.vue'),
|
||||
name: 'text-clamp',
|
||||
meta: { title: '多行文本省略', icon: 'MenuIcon' }
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
]
|
||||
|
||||
export default othersRouter
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
|
||||
/** When your routing table is too long, you can split it into small modules**/
|
||||
|
||||
import Layout from "@/layout/index.vue";
|
||||
import Layout from '@/layout/index.vue'
|
||||
|
||||
const tableRouter = [{
|
||||
const tableRouter = [
|
||||
{
|
||||
path: '/table',
|
||||
component: Layout,
|
||||
redirect: '/table/comprehensive',
|
||||
name: 'table',
|
||||
meta: {
|
||||
title: '超级表格',
|
||||
icon: 'School'
|
||||
title: '超级表格',
|
||||
icon: 'School',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/table/comprehensive',
|
||||
component: () => import('@/views/table/ComprehensiveTable/index.vue'),
|
||||
name: 'comprehensive',
|
||||
meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/table/inlineTable',
|
||||
component: () => import('@/views/table/InlineEditTable/index.vue'),
|
||||
name: 'inlineTable',
|
||||
meta: { title: '行内编辑', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: '/table/editableProTable',
|
||||
component: () => import('@/views/table/EditableProTable/index.vue'),
|
||||
name: 'editableProTable',
|
||||
meta: { title: '可编辑表格', keepAlive: true , icon: 'MenuIcon'}
|
||||
},
|
||||
// {
|
||||
// path: 'virtualTable',
|
||||
// component: () => import('@/views/table/VirtualTable.vue'),
|
||||
// name: 'virtualTable',
|
||||
// meta: { title: '虚拟表格', keepAlive: true , icon: 'MenuIcon'}
|
||||
// },
|
||||
]
|
||||
}]
|
||||
{
|
||||
path: '/table/comprehensive',
|
||||
component: () => import('@/views/table/ComprehensiveTable/index.vue'),
|
||||
name: 'comprehensive',
|
||||
meta: { title: '综合表格', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/table/inlineTable',
|
||||
component: () => import('@/views/table/InlineEditTable/index.vue'),
|
||||
name: 'inlineTable',
|
||||
meta: { title: '行内编辑', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
{
|
||||
path: '/table/editableProTable',
|
||||
component: () => import('@/views/table/EditableProTable/index.vue'),
|
||||
name: 'editableProTable',
|
||||
meta: { title: '可编辑表格', keepAlive: true, icon: 'MenuIcon' },
|
||||
},
|
||||
// {
|
||||
// path: 'virtualTable',
|
||||
// component: () => import('@/views/table/VirtualTable.vue'),
|
||||
// name: 'virtualTable',
|
||||
// meta: { title: '虚拟表格', keepAlive: true , icon: 'MenuIcon'}
|
||||
// },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default tableRouter
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
export const baseSearchColumns = [
|
||||
{
|
||||
type: 'input',
|
||||
name: 'name1',
|
||||
label: '字段1',
|
||||
span: 8,
|
||||
value: '字段1',
|
||||
attrs: {
|
||||
placeholder: '请输入字段1',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'name2',
|
||||
label: '字段2',
|
||||
value: '',
|
||||
placeholder: '字段2',
|
||||
span: 8,
|
||||
options: [
|
||||
{ value: 'Option1', label: 'Option1' },
|
||||
{ value: 'Option2', label: 'Option2' },
|
||||
{ value: 'Option3', label: 'Option3' },
|
||||
{ value: 'Option4', label: 'Option4' },
|
||||
{ value: 'Option5', label: 'Option5' },
|
||||
],
|
||||
attrs: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
name: 'name3',
|
||||
label: '时间',
|
||||
span: 8,
|
||||
value: null,
|
||||
attrs: {
|
||||
placeholder: '请选择时间',
|
||||
clearable: true,
|
||||
type: 'date',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
name: 'name4',
|
||||
label: '时间秒',
|
||||
span: 8,
|
||||
value: null,
|
||||
attrs: {
|
||||
placeholder: '请选择时间',
|
||||
clearable: true,
|
||||
type: 'datetime',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
name: 'name5',
|
||||
label: '时间范围',
|
||||
span: 8,
|
||||
value: '',
|
||||
attrs: {
|
||||
placeholder: '请选择时间范围',
|
||||
clearable: true,
|
||||
type: 'daterange',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
'start-placeholder': '开始时间',
|
||||
'end-placeholder': '结束时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'time-select',
|
||||
name: 'name6',
|
||||
label: '时间选择',
|
||||
span: 8,
|
||||
value: '',
|
||||
attrs: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
name: 'name7',
|
||||
label: '级联选择器',
|
||||
span: 8,
|
||||
value: '',
|
||||
attrs: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
value: 'disciplines',
|
||||
label: 'Disciplines',
|
||||
children: [
|
||||
{
|
||||
value: 'consistency',
|
||||
label: 'Consistency',
|
||||
},
|
||||
{
|
||||
value: 'feedback',
|
||||
label: 'Feedback',
|
||||
},
|
||||
{
|
||||
value: 'efficiency',
|
||||
label: 'Efficiency',
|
||||
},
|
||||
{
|
||||
value: 'controllability',
|
||||
label: 'Controllability',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.searchdForm{
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<PageWrapLayout>
|
||||
<SearchForm :columns="searchColumns" @submit="onSubmit" @reset="resetForm" />
|
||||
|
||||
<div v-if="Object.keys(formValue).length">{{ formValue }}</div>
|
||||
</PageWrapLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import SearchForm from '@/components/SearchForm/index.vue'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { baseSearchColumns } from './constants'
|
||||
|
||||
const formValue = ref({})
|
||||
const searchColumns = ref(baseSearchColumns)
|
||||
|
||||
// 查询
|
||||
const onSubmit = (formInline) => {
|
||||
console.log('获取参数', formInline)
|
||||
formValue.value = formInline
|
||||
ElMessage.success(JSON.stringify(formInline))
|
||||
}
|
||||
|
||||
// 重置
|
||||
const resetForm = (formInline) => {
|
||||
console.log('获取参数', formInline)
|
||||
formValue.value = formInline
|
||||
ElMessage.success('重置成功')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="app-container" ref="appContainer">
|
||||
<PropTable
|
||||
:loading="loading"
|
||||
@selection-change="selectionChange"
|
||||
:columns="column"
|
||||
:data="list"
|
||||
@reset="reset"
|
||||
@onSubmit="onSubmit"
|
||||
:loading="loading"
|
||||
@selection-change="selectionChange"
|
||||
:columns="column"
|
||||
:data="list"
|
||||
@reset="reset"
|
||||
@onSubmit="onSubmit"
|
||||
>
|
||||
<template v-slot:btn>
|
||||
<div style="display: flex; justify-content: flex-end">
|
||||
<el-button type="primary" @click="add"
|
||||
><el-icon><plus /></el-icon> 添加</el-button
|
||||
><el-icon><plus /></el-icon> 添加</el-button
|
||||
>
|
||||
<el-button type="danger" @click="batchDelete"
|
||||
><el-icon><delete /></el-icon>删除</el-button
|
||||
><el-icon><delete /></el-icon>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
|
||||
<el-dialog v-model="dialogVisible" :title="title" width="50%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
|
|
@ -52,175 +52,175 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="comprehensive">
|
||||
import {ref, reactive, onMounted, nextTick} from 'vue'
|
||||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const loading = ref(true)
|
||||
const appContainer = ref(null)
|
||||
import PropTable from '@/components/Table/PropTable/index.vue'
|
||||
const data = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
date: '2016-05-02',
|
||||
name: '王五' + i,
|
||||
price: 1 + i,
|
||||
province: '上海',
|
||||
admin: 'admin',
|
||||
sex: i % 2 ? 1 : 0,
|
||||
checked: true,
|
||||
id: i + 1,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333,
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const loading = ref(true)
|
||||
const appContainer = ref(null)
|
||||
import PropTable from '@/components/Table/PropTable/index.vue'
|
||||
const data = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
date: '2016-05-02',
|
||||
name: '王五' + i,
|
||||
price: 1 + i,
|
||||
province: '上海',
|
||||
admin: 'admin',
|
||||
sex: i % 2 ? 1 : 0,
|
||||
checked: true,
|
||||
id: i + 1,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333,
|
||||
})
|
||||
}
|
||||
const column = [
|
||||
{ type: 'selection', width: 60, fixed: 'left' },
|
||||
{ name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
|
||||
{ name: 'age', label: '年龄', align: 'right' },
|
||||
{
|
||||
name: 'sex',
|
||||
label: '性别',
|
||||
slot: true,
|
||||
inSearch: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '男',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女',
|
||||
},
|
||||
],
|
||||
valueType: 'select',
|
||||
},
|
||||
{ name: 'price', label: '价格', inSearch: true, valueType: 'input' },
|
||||
{ name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
|
||||
{ name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
|
||||
{ name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
|
||||
{ name: 'province', label: '省份', width: 100 },
|
||||
{ name: 'city', label: '城市' },
|
||||
{ name: 'zip', label: '邮编' },
|
||||
{ name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
|
||||
]
|
||||
const list = ref(data)
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
name: '',
|
||||
sex: null,
|
||||
price: null,
|
||||
})
|
||||
}
|
||||
const column = [
|
||||
{ type: 'selection', width: 60 ,fixed: 'left'},
|
||||
{ name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
|
||||
{ name: 'age', label: '年龄', align: 'right' },
|
||||
{
|
||||
name: 'sex',
|
||||
label: '性别',
|
||||
slot: true,
|
||||
inSearch: true,
|
||||
options: [
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||
sex: [
|
||||
{
|
||||
value: 1,
|
||||
label: '男',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女',
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
valueType: 'select',
|
||||
},
|
||||
{name: 'price', label: '价格', inSearch: true, valueType: 'input',},
|
||||
{ name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
|
||||
{ name: 'address', label: '地址', inSearch: true, valueType: 'input' , width: 180},
|
||||
{ name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
|
||||
{ name: 'province', label: '省份' , width: 100},
|
||||
{ name: 'city', label: '城市' },
|
||||
{ name: 'zip', label: '邮编' },
|
||||
{ name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作' },
|
||||
]
|
||||
const list = ref(data)
|
||||
})
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
name: '',
|
||||
sex: null,
|
||||
price: null,
|
||||
})
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const rowObj = ref({})
|
||||
const selectObj = ref([])
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const rowObj = ref({})
|
||||
const selectObj = ref([])
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
let obj = {
|
||||
id: Date.now(),
|
||||
...ruleForm,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333,
|
||||
province: '上海',
|
||||
admin: 'admin',
|
||||
date: dayjs().format('YYYY-MM-DD'),
|
||||
}
|
||||
if (title.value === '新增') {
|
||||
list.value = [obj, ...list.value]
|
||||
ElMessage.success('添加成功')
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
let obj = {
|
||||
id: Date.now(),
|
||||
...ruleForm,
|
||||
age: 0,
|
||||
city: '普陀区',
|
||||
address: '上海市普上海',
|
||||
zip: 200333,
|
||||
province: '上海',
|
||||
admin: 'admin',
|
||||
date: dayjs().format('YYYY-MM-DD'),
|
||||
}
|
||||
if (title.value === '新增') {
|
||||
list.value = [obj, ...list.value]
|
||||
ElMessage.success('添加成功')
|
||||
} else {
|
||||
list.value.forEach((item) => {
|
||||
if (item.id === rowObj.value.id) {
|
||||
item.name = obj.name
|
||||
item.sex = obj.sex
|
||||
item.price = obj.price
|
||||
}
|
||||
})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
list.value.forEach((item) => {
|
||||
if (item.id === rowObj.value.id) {
|
||||
item.name = obj.name
|
||||
item.sex = obj.sex
|
||||
item.price = obj.price
|
||||
}
|
||||
})
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const add = () => {
|
||||
title.value = '新增'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const batchDelete = () => {
|
||||
if (!selectObj.value.length) {
|
||||
return ElMessage.error('未选中任何行')
|
||||
})
|
||||
}
|
||||
ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
|
||||
const add = () => {
|
||||
title.value = '新增'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const batchDelete = () => {
|
||||
if (!selectObj.value.length) {
|
||||
return ElMessage.error('未选中任何行')
|
||||
}
|
||||
ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage.success('模拟删除成功')
|
||||
list.value = list.value.concat([])
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
const selectionChange = (val) => {
|
||||
selectObj.value = val
|
||||
}
|
||||
}
|
||||
const selectionChange = (val) => {
|
||||
selectObj.value = val
|
||||
}
|
||||
|
||||
const edit = (row) => {
|
||||
title.value = '编辑'
|
||||
rowObj.value = row
|
||||
dialogVisible.value = true
|
||||
ruleForm.name = row.name
|
||||
ruleForm.sex = row.sex
|
||||
ruleForm.price = row.price
|
||||
}
|
||||
const edit = (row) => {
|
||||
title.value = '编辑'
|
||||
rowObj.value = row
|
||||
dialogVisible.value = true
|
||||
ruleForm.name = row.name
|
||||
ruleForm.sex = row.sex
|
||||
ruleForm.price = row.price
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
console.log('row==', row)
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
const del = (row) => {
|
||||
console.log('row==', row)
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {
|
||||
list.value = list.value.filter((item) => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
|
|
@ -230,53 +230,51 @@ const del = (row) => {
|
|||
}, 500)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
ElMessage.success('触发重置方法')
|
||||
}
|
||||
const reset = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
ElMessage.success('触发重置方法')
|
||||
}
|
||||
|
||||
const onSubmit = (val) => {
|
||||
console.log('val===', val)
|
||||
ElMessage.success('触发查询方法')
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
}
|
||||
const onSubmit = (val) => {
|
||||
console.log('val===', val)
|
||||
ElMessage.success('触发查询方法')
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const getHeight = ()=>{
|
||||
const getHeight = () => {}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(()=>{
|
||||
// let data = appContainer.value.
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// let data = appContainer.value.
|
||||
})
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
})
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.app-container{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.app-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue