fix : 修复实施图片
This commit is contained in:
@@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<el-checkbox-group v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-checkbox
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
:disabled="item.disabled || false"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const localVal = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
emits('update:modelValue', val)
|
||||
emits('change', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<template>
|
||||
<el-checkbox-group v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-checkbox
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
:disabled="item.disabled || false"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const localVal = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
emits('update:modelValue', val)
|
||||
emits('change', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,108 +1,108 @@
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
v-for="item in filterSchma"
|
||||
v-bind="item.colProps || { span: 12}"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
v-if="item.component"
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
>
|
||||
</component>
|
||||
<span v-else>
|
||||
{{ form[item.prop] || '--' }}
|
||||
</span>
|
||||
</template>
|
||||
<template #label>
|
||||
<slot :name="item?.slots?.label" v-bind="{item, form}">
|
||||
{{ item?.label || '' }}
|
||||
</slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
schema: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const filterSchma = computed(()=>{
|
||||
return props.schema.filter(item=>{
|
||||
if(item.prop) return true
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const validate = async () => {
|
||||
let validObj = {}
|
||||
await formInstance.value.validate((valid, fields)=>{
|
||||
validObj.isValidate = valid
|
||||
validObj.fields = fields
|
||||
})
|
||||
return validObj
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
return form.value
|
||||
}
|
||||
|
||||
const setValues = (data) => {
|
||||
try {
|
||||
if(data instanceof Object) {
|
||||
form.value = {...data}
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.warning('传入参数格式有误')
|
||||
}
|
||||
}
|
||||
|
||||
const resetFields = () => {
|
||||
formInstance.value.resetFields()
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
emits('getInstance',Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
validate,
|
||||
setValues,
|
||||
resetFields
|
||||
}))
|
||||
})
|
||||
|
||||
defineExpose({ getValues, setValues, validate, resetFields, formInstance, form })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
v-for="item in filterSchma"
|
||||
v-bind="item.colProps || { span: 12}"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
v-if="item.component"
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
>
|
||||
</component>
|
||||
<span v-else>
|
||||
{{ form[item.prop] || '--' }}
|
||||
</span>
|
||||
</template>
|
||||
<template #label>
|
||||
<slot :name="item?.slots?.label" v-bind="{item, form}">
|
||||
{{ item?.label || '' }}
|
||||
</slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
schema: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const filterSchma = computed(()=>{
|
||||
return props.schema.filter(item=>{
|
||||
if(item.prop) return true
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const validate = async () => {
|
||||
let validObj = {}
|
||||
await formInstance.value.validate((valid, fields)=>{
|
||||
validObj.isValidate = valid
|
||||
validObj.fields = fields
|
||||
})
|
||||
return validObj
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
return form.value
|
||||
}
|
||||
|
||||
const setValues = (data) => {
|
||||
try {
|
||||
if(data instanceof Object) {
|
||||
form.value = {...data}
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.warning('传入参数格式有误')
|
||||
}
|
||||
}
|
||||
|
||||
const resetFields = () => {
|
||||
formInstance.value.resetFields()
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
emits('getInstance',Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
validate,
|
||||
setValues,
|
||||
resetFields
|
||||
}))
|
||||
})
|
||||
|
||||
defineExpose({ getValues, setValues, validate, resetFields, formInstance, form })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,82 +1,82 @@
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
:background="isBackground"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
layout="->,total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
const emit = defineEmits(['goPage', 'changeSize','handleTop'])
|
||||
const props = defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Object,
|
||||
default(rawProps) {
|
||||
return [10, 15, 20, 30, 50,100]
|
||||
},
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBackground: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
//中文
|
||||
const locale = zhCn
|
||||
//总条数
|
||||
const total = ref(0)
|
||||
//对应页数
|
||||
const currentPage = ref(1)
|
||||
//每页多少条
|
||||
const pageSize = ref(20)
|
||||
//默认每页多少条的数组
|
||||
const pageSizes = ref([])
|
||||
//是否使用小型分页样式
|
||||
const small = ref(false)
|
||||
//是否禁用分页
|
||||
const disabled = ref(false)
|
||||
//分页大小
|
||||
const handleSizeChange = limit => {
|
||||
emit('changeSize', limit)
|
||||
emit('handleTop')
|
||||
}
|
||||
//分页切换
|
||||
const handleCurrentChange = page => {
|
||||
emit('goPage', page)
|
||||
emit('handleTop')
|
||||
}
|
||||
watchEffect(() => {
|
||||
total.value = props.total
|
||||
pageSizes.value = props.pageSizes
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
:background="isBackground"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
layout="->,total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
const emit = defineEmits(['goPage', 'changeSize','handleTop'])
|
||||
const props = defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Object,
|
||||
default(rawProps) {
|
||||
return [10, 15, 20, 30, 50,100]
|
||||
},
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBackground: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
//中文
|
||||
const locale = zhCn
|
||||
//总条数
|
||||
const total = ref(0)
|
||||
//对应页数
|
||||
const currentPage = ref(1)
|
||||
//每页多少条
|
||||
const pageSize = ref(20)
|
||||
//默认每页多少条的数组
|
||||
const pageSizes = ref([])
|
||||
//是否使用小型分页样式
|
||||
const small = ref(false)
|
||||
//是否禁用分页
|
||||
const disabled = ref(false)
|
||||
//分页大小
|
||||
const handleSizeChange = limit => {
|
||||
emit('changeSize', limit)
|
||||
emit('handleTop')
|
||||
}
|
||||
//分页切换
|
||||
const handleCurrentChange = page => {
|
||||
emit('goPage', page)
|
||||
emit('handleTop')
|
||||
}
|
||||
watchEffect(() => {
|
||||
total.value = props.total
|
||||
pageSizes.value = props.pageSizes
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
<template>
|
||||
<el-radio-group v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-radio v-for="item in localOptions" :label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCacheStore } from "@/stores/cache.js";
|
||||
const cacheStore = useCacheStore();
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: [Number, String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update: modelValue'])
|
||||
|
||||
const localVal = ref()
|
||||
|
||||
const localOptions = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
props.cacheKey ?
|
||||
localOptions.value = cacheStore.getDict(props.cacheKey) :
|
||||
localOptions.value = props.options
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
emits('change', val),
|
||||
emits('update: modelValue', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<template>
|
||||
<el-radio-group v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-radio v-for="item in localOptions" :label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCacheStore } from "@/stores/cache.js";
|
||||
const cacheStore = useCacheStore();
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: [Number, String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update: modelValue'])
|
||||
|
||||
const localVal = ref()
|
||||
|
||||
const localOptions = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
props.cacheKey ?
|
||||
localOptions.value = cacheStore.getDict(props.cacheKey) :
|
||||
localOptions.value = props.options
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
emits('change', val),
|
||||
emits('update: modelValue', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,164 +1,164 @@
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
class="search-form"
|
||||
@submit.prevent="getValues"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in filterConfig"
|
||||
:span="5"
|
||||
:offset="index == 0 || index / 4 ==1 ? 0 : 1"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
@keyup.enter.native="getValues"
|
||||
@change="elChange"
|
||||
>
|
||||
</component>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- class="btn-col"-->
|
||||
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
|
||||
{{ showMore ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
<el-button @click="getValues" color="#DED0B2" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
searchConfig: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//搜索参数
|
||||
searchProp: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//搜索值
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance', 'search'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const showMore = ref(false)
|
||||
|
||||
const filterConfig = computed(() => {
|
||||
const arr = props.searchConfig.filter(item => {
|
||||
if (item.prop) return true
|
||||
})
|
||||
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
|
||||
})
|
||||
const setForm=(prop,value)=>{
|
||||
form.value[prop]=value
|
||||
return form.value;
|
||||
}
|
||||
// 搜索功能表单元素默认值
|
||||
// const setDefaultFormValues = () => {
|
||||
// filterConfig.value.forEach(item => {
|
||||
// form.value[item.prop] = item.props?.defaultValue || null
|
||||
// })
|
||||
// }
|
||||
|
||||
watchEffect(() => {
|
||||
if (filterConfig.value.length) {
|
||||
// setDefaultFormValues()
|
||||
}
|
||||
if(props.searchProp&&props.searchValue){
|
||||
setForm(props.searchProp,props.searchValue)
|
||||
}
|
||||
})
|
||||
|
||||
const elChange = () => {
|
||||
setTimeout(() => {
|
||||
getValues()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
emits('search', form.value)
|
||||
return form.value
|
||||
}
|
||||
|
||||
//重置
|
||||
const handleReset = () => {
|
||||
form.value = {}
|
||||
// setDefaultFormValues()
|
||||
emits('search', form.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits('getInstance', Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
handleReset,
|
||||
}))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.btn-col {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.search-form{
|
||||
//绘制下拉选择框远程搜索时右侧的箭头
|
||||
.el-select {
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
class="search-form"
|
||||
@submit.prevent="getValues"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in filterConfig"
|
||||
:span="5"
|
||||
:offset="index == 0 || index / 4 ==1 ? 0 : 1"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
@keyup.enter.native="getValues"
|
||||
@change="elChange"
|
||||
>
|
||||
</component>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- class="btn-col"-->
|
||||
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
|
||||
{{ showMore ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
<el-button @click="getValues" color="#DED0B2" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
searchConfig: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//搜索参数
|
||||
searchProp: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//搜索值
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance', 'search'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const showMore = ref(false)
|
||||
|
||||
const filterConfig = computed(() => {
|
||||
const arr = props.searchConfig.filter(item => {
|
||||
if (item.prop) return true
|
||||
})
|
||||
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
|
||||
})
|
||||
const setForm=(prop,value)=>{
|
||||
form.value[prop]=value
|
||||
return form.value;
|
||||
}
|
||||
// 搜索功能表单元素默认值
|
||||
// const setDefaultFormValues = () => {
|
||||
// filterConfig.value.forEach(item => {
|
||||
// form.value[item.prop] = item.props?.defaultValue || null
|
||||
// })
|
||||
// }
|
||||
|
||||
watchEffect(() => {
|
||||
if (filterConfig.value.length) {
|
||||
// setDefaultFormValues()
|
||||
}
|
||||
if(props.searchProp&&props.searchValue){
|
||||
setForm(props.searchProp,props.searchValue)
|
||||
}
|
||||
})
|
||||
|
||||
const elChange = () => {
|
||||
setTimeout(() => {
|
||||
getValues()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
emits('search', form.value)
|
||||
return form.value
|
||||
}
|
||||
|
||||
//重置
|
||||
const handleReset = () => {
|
||||
form.value = {}
|
||||
// setDefaultFormValues()
|
||||
emits('search', form.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits('getInstance', Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
handleReset,
|
||||
}))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.btn-col {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.search-form{
|
||||
//绘制下拉选择框远程搜索时右侧的箭头
|
||||
.el-select {
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
<template>
|
||||
<el-select v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-option
|
||||
v-for="item in localOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
:disabled="item.disabled || false"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCacheStore } from "@/stores/cache.js";
|
||||
const cacheStore = useCacheStore();
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number, Array],
|
||||
default: undefined
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const localVal = ref()
|
||||
|
||||
const localOptions = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
props.cacheKey ?
|
||||
localOptions.value = cacheStore.getDict(props.cacheKey) :
|
||||
localOptions.value = props.options
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
let value
|
||||
emits('update:modelValue', val)
|
||||
if(val instanceof Array) {
|
||||
value = val.map(item=>props.options.find(v=>item == v.value))
|
||||
} else {
|
||||
value = props.options.find(v=>v.value == val)
|
||||
}
|
||||
emits('change', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<template>
|
||||
<el-select v-model="localVal" v-bind="$attrs" @change="change">
|
||||
<el-option
|
||||
v-for="item in localOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
:disabled="item.disabled || false"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCacheStore } from "@/stores/cache.js";
|
||||
const cacheStore = useCacheStore();
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number, Array],
|
||||
default: undefined
|
||||
},
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const localVal = ref()
|
||||
|
||||
const localOptions = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
localVal.value = props.modelValue
|
||||
props.cacheKey ?
|
||||
localOptions.value = cacheStore.getDict(props.cacheKey) :
|
||||
localOptions.value = props.options
|
||||
})
|
||||
|
||||
const change = (val) => {
|
||||
let value
|
||||
emits('update:modelValue', val)
|
||||
if(val instanceof Array) {
|
||||
value = val.map(item=>props.options.find(v=>item == v.value))
|
||||
} else {
|
||||
value = props.options.find(v=>v.value == val)
|
||||
}
|
||||
emits('change', value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,355 +1,355 @@
|
||||
<template>
|
||||
<div class="fv-table-container">
|
||||
<el-button v-if="tableConfig.export && tableConfig.export.open&&changeExportPosition" @click="exportTable"
|
||||
color="#DED0B2"
|
||||
style="float: left;margin-right: 10px">导出
|
||||
</el-button>
|
||||
<!-- 表格头部按钮 -->
|
||||
<div class="fv-table-btn" v-if="tableConfig.btns">
|
||||
<div class="table-head-btn">
|
||||
<el-button
|
||||
v-for="btn in tableConfig.btns"
|
||||
:key="btn.key"
|
||||
:type="btn.type || ''"
|
||||
:color="btn.color || ''"
|
||||
v-perm="btn.auth || ['*:*:*']"
|
||||
@click="handleClickBtns(btn.key)"
|
||||
>
|
||||
{{ btn.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button v-if="tableConfig.export && tableConfig.export.open&&!changeExportPosition" @click="exportTable"
|
||||
color="#DED0B2"
|
||||
style="margin-bottom: 10px">导出
|
||||
</el-button>
|
||||
<!-- 列显示配置 -->
|
||||
<div v-if="isSettingCol" style="float: right">
|
||||
<el-tooltip effect="dark" content="列配置" placement="bottom">
|
||||
<el-button ref="buttonRef" link>
|
||||
<el-icon size="18">
|
||||
<Setting/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click">
|
||||
<div class="col-setting-checkall">
|
||||
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
|
||||
@change="changeIsShowAll"></el-checkbox>
|
||||
</div>
|
||||
<div class="col-setting-list">
|
||||
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
|
||||
<el-space direction="vertical" alignment="flex-start" :size="0">
|
||||
<el-checkbox
|
||||
v-for="item in tableConfig.columns"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:value="item.prop"
|
||||
/>
|
||||
</el-space>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 表格部分 -->
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="localData.list"
|
||||
v-loading="localData.loading"
|
||||
:row-key="tableConfig?.rowKey || 'id'"
|
||||
v-bind="$attrs"
|
||||
:show-overflow-tooltip="true"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChange"
|
||||
@row-click="rowClick"
|
||||
@row-dblclick="rowDblclick"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
ref="tableInstance"
|
||||
>
|
||||
<template #default>
|
||||
<fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
|
||||
<template v-if="column?.slots?.header" #[column?.slots?.header]="params">
|
||||
<slot :name="column?.slots?.header" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
<template v-if="column?.slots?.default" #[column?.slots?.default]="params">
|
||||
<slot :name="column?.slots?.default" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
</fvTableColumn>
|
||||
</template>
|
||||
<template #empty>
|
||||
<slot name="empty"></slot>
|
||||
</template>
|
||||
<template #append>
|
||||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<fvPagination
|
||||
v-if="pagination"
|
||||
:current-page="localData.query.pageNum"
|
||||
:page-size="localData.query.pageSize"
|
||||
:page-sizes="[10, 20, 30, 40,50,100]"
|
||||
:total="localData.total"
|
||||
@changeSize="handleSizeChange"
|
||||
@goPage="handleCurrentChange"
|
||||
>
|
||||
</fvPagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElNotification} from 'element-plus';
|
||||
import {requestList} from '../../api/common';
|
||||
import {exportExcel} from "@/utils/export-excel";
|
||||
|
||||
const props = defineProps({
|
||||
//表格配置
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
//若使用外部数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//是否使用分页
|
||||
pagination: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否改变导出位置, 导出在btns前面
|
||||
changeExportPosition: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示列配置
|
||||
isSettingCol: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const tableInstance = ref()
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
|
||||
|
||||
const exportTable = () => {
|
||||
const $e = tableInstance.value.$el
|
||||
let $table = $e.querySelector('.el-table__fixed')
|
||||
if (!$table) {
|
||||
$table = $e
|
||||
}
|
||||
let fileName = ""
|
||||
if (props.tableConfig.export && props.tableConfig.export) {
|
||||
fileName = props.tableConfig.export.fileName
|
||||
}
|
||||
exportExcel($table, Object.keys(localData.list[0]), fileName)
|
||||
}
|
||||
|
||||
const localData = reactive({
|
||||
list: [], // 表格数据
|
||||
query: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
},
|
||||
total: 0,
|
||||
loading: false,
|
||||
// 列展示设置
|
||||
columns: [],
|
||||
allColShow: true, // 默认全部列都展示
|
||||
indeterminate: false,
|
||||
checkGroup: []
|
||||
})
|
||||
|
||||
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])
|
||||
|
||||
const handleClickBtns = (key) => {
|
||||
emits('headBtnClick', key)
|
||||
}
|
||||
|
||||
const filterColumns = () => {
|
||||
localData.columns = props.tableConfig.columns.map(item => {
|
||||
if (item.prop) {
|
||||
return {
|
||||
...item
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeIsShowAll = (val) => {
|
||||
if (val) {
|
||||
filterColumns()
|
||||
localData.indeterminate = false
|
||||
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
||||
} else {
|
||||
localData.columns.length = 0
|
||||
localData.checkGroup.length = 0
|
||||
localData.indeterminate = false
|
||||
}
|
||||
}
|
||||
|
||||
const changeColShow = (val) => {
|
||||
if (val.length == props.tableConfig.columns.length) {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = true
|
||||
} else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
|
||||
localData.allColShow = false
|
||||
localData.indeterminate = true
|
||||
} else {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = false
|
||||
}
|
||||
const template = []
|
||||
props.tableConfig.columns.forEach(item => {
|
||||
val.forEach(v => {
|
||||
if (item.prop == v) {
|
||||
template.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
localData.columns = template
|
||||
}
|
||||
|
||||
filterColumns()
|
||||
|
||||
const getList = async () => {
|
||||
const {api, params} = props.tableConfig
|
||||
const queryParmas = {...localData.query, ...params}
|
||||
if (api) {
|
||||
localData.loading = true
|
||||
try {
|
||||
const {code, data, msg} = await requestList(api, queryParmas).then(res => {
|
||||
// console.log(res)
|
||||
return res
|
||||
})
|
||||
// console.log(code,data,msg)
|
||||
if (code === 1000) {
|
||||
if (data.rows) {
|
||||
localData.list = data.rows
|
||||
} else {
|
||||
localData.list = data
|
||||
}
|
||||
localData.total = data.total
|
||||
emits('getTotal', localData.total)
|
||||
localData.loading = false
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: msg,
|
||||
type: 'error'
|
||||
})
|
||||
localData.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("error", error)
|
||||
if (!error) {
|
||||
return
|
||||
}
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请求数据失败',
|
||||
type: 'error'
|
||||
})
|
||||
localData.loading = false
|
||||
}
|
||||
} else {
|
||||
localData.list = props.data
|
||||
}
|
||||
}
|
||||
|
||||
const selectionChange = (data) => {
|
||||
emits('selectionChange', data)
|
||||
}
|
||||
|
||||
const rowClick = (row, column) => {
|
||||
emits('rowClick', row, column)
|
||||
}
|
||||
|
||||
const rowDblclick = (row, column) => {
|
||||
emits('rowDblclick', row, column)
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
emits('cellClick', row, column)
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
localData.query.pageSize = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
localData.query.pageNum = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (localData.allColShow) {
|
||||
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
||||
}
|
||||
})
|
||||
//刷新
|
||||
const refresh = ({resetPage = false} = {}) => {
|
||||
resetPage ? localData.query.pageNum = 1 : null
|
||||
getList()
|
||||
}
|
||||
//改变loading状态
|
||||
const updateLoading = (status) => {
|
||||
localData.loading = status
|
||||
}
|
||||
//获取基础查询条件
|
||||
const getQuery = () => {
|
||||
return localData.query
|
||||
}
|
||||
|
||||
defineExpose({refresh, updateLoading, getQuery, tableInstance})
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.col-setting-checkall {
|
||||
border-bottom: 1px solid rgb(210, 210, 213);
|
||||
}
|
||||
|
||||
.col-setting-list {
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-head-btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fv-table-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.fv-table {
|
||||
:deep(.el-tooltip) {
|
||||
//width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="fv-table-container">
|
||||
<el-button v-if="tableConfig.export && tableConfig.export.open&&changeExportPosition" @click="exportTable"
|
||||
color="#DED0B2"
|
||||
style="float: left;margin-right: 10px">导出
|
||||
</el-button>
|
||||
<!-- 表格头部按钮 -->
|
||||
<div class="fv-table-btn" v-if="tableConfig.btns">
|
||||
<div class="table-head-btn">
|
||||
<el-button
|
||||
v-for="btn in tableConfig.btns"
|
||||
:key="btn.key"
|
||||
:type="btn.type || ''"
|
||||
:color="btn.color || ''"
|
||||
v-perm="btn.auth || ['*:*:*']"
|
||||
@click="handleClickBtns(btn.key)"
|
||||
>
|
||||
{{ btn.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button v-if="tableConfig.export && tableConfig.export.open&&!changeExportPosition" @click="exportTable"
|
||||
color="#DED0B2"
|
||||
style="margin-bottom: 10px">导出
|
||||
</el-button>
|
||||
<!-- 列显示配置 -->
|
||||
<div v-if="isSettingCol" style="float: right">
|
||||
<el-tooltip effect="dark" content="列配置" placement="bottom">
|
||||
<el-button ref="buttonRef" link>
|
||||
<el-icon size="18">
|
||||
<Setting/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click">
|
||||
<div class="col-setting-checkall">
|
||||
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
|
||||
@change="changeIsShowAll"></el-checkbox>
|
||||
</div>
|
||||
<div class="col-setting-list">
|
||||
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
|
||||
<el-space direction="vertical" alignment="flex-start" :size="0">
|
||||
<el-checkbox
|
||||
v-for="item in tableConfig.columns"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:value="item.prop"
|
||||
/>
|
||||
</el-space>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 表格部分 -->
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="localData.list"
|
||||
v-loading="localData.loading"
|
||||
:row-key="tableConfig?.rowKey || 'id'"
|
||||
v-bind="$attrs"
|
||||
:show-overflow-tooltip="true"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChange"
|
||||
@row-click="rowClick"
|
||||
@row-dblclick="rowDblclick"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
ref="tableInstance"
|
||||
>
|
||||
<template #default>
|
||||
<fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
|
||||
<template v-if="column?.slots?.header" #[column?.slots?.header]="params">
|
||||
<slot :name="column?.slots?.header" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
<template v-if="column?.slots?.default" #[column?.slots?.default]="params">
|
||||
<slot :name="column?.slots?.default" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
</fvTableColumn>
|
||||
</template>
|
||||
<template #empty>
|
||||
<slot name="empty"></slot>
|
||||
</template>
|
||||
<template #append>
|
||||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<fvPagination
|
||||
v-if="pagination"
|
||||
:current-page="localData.query.pageNum"
|
||||
:page-size="localData.query.pageSize"
|
||||
:page-sizes="[10, 20, 30, 40,50,100]"
|
||||
:total="localData.total"
|
||||
@changeSize="handleSizeChange"
|
||||
@goPage="handleCurrentChange"
|
||||
>
|
||||
</fvPagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElNotification} from 'element-plus';
|
||||
import {requestList} from '../../api/common';
|
||||
import {exportExcel} from "@/utils/export-excel";
|
||||
|
||||
const props = defineProps({
|
||||
//表格配置
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
//若使用外部数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//是否使用分页
|
||||
pagination: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否改变导出位置, 导出在btns前面
|
||||
changeExportPosition: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示列配置
|
||||
isSettingCol: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const tableInstance = ref()
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
|
||||
|
||||
const exportTable = () => {
|
||||
const $e = tableInstance.value.$el
|
||||
let $table = $e.querySelector('.el-table__fixed')
|
||||
if (!$table) {
|
||||
$table = $e
|
||||
}
|
||||
let fileName = ""
|
||||
if (props.tableConfig.export && props.tableConfig.export) {
|
||||
fileName = props.tableConfig.export.fileName
|
||||
}
|
||||
exportExcel($table, Object.keys(localData.list[0]), fileName)
|
||||
}
|
||||
|
||||
const localData = reactive({
|
||||
list: [], // 表格数据
|
||||
query: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
},
|
||||
total: 0,
|
||||
loading: false,
|
||||
// 列展示设置
|
||||
columns: [],
|
||||
allColShow: true, // 默认全部列都展示
|
||||
indeterminate: false,
|
||||
checkGroup: []
|
||||
})
|
||||
|
||||
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])
|
||||
|
||||
const handleClickBtns = (key) => {
|
||||
emits('headBtnClick', key)
|
||||
}
|
||||
|
||||
const filterColumns = () => {
|
||||
localData.columns = props.tableConfig.columns.map(item => {
|
||||
if (item.prop) {
|
||||
return {
|
||||
...item
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeIsShowAll = (val) => {
|
||||
if (val) {
|
||||
filterColumns()
|
||||
localData.indeterminate = false
|
||||
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
||||
} else {
|
||||
localData.columns.length = 0
|
||||
localData.checkGroup.length = 0
|
||||
localData.indeterminate = false
|
||||
}
|
||||
}
|
||||
|
||||
const changeColShow = (val) => {
|
||||
if (val.length == props.tableConfig.columns.length) {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = true
|
||||
} else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
|
||||
localData.allColShow = false
|
||||
localData.indeterminate = true
|
||||
} else {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = false
|
||||
}
|
||||
const template = []
|
||||
props.tableConfig.columns.forEach(item => {
|
||||
val.forEach(v => {
|
||||
if (item.prop == v) {
|
||||
template.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
localData.columns = template
|
||||
}
|
||||
|
||||
filterColumns()
|
||||
|
||||
const getList = async () => {
|
||||
const {api, params} = props.tableConfig
|
||||
const queryParmas = {...localData.query, ...params}
|
||||
if (api) {
|
||||
localData.loading = true
|
||||
try {
|
||||
const {code, data, msg} = await requestList(api, queryParmas).then(res => {
|
||||
// console.log(res)
|
||||
return res
|
||||
})
|
||||
// console.log(code,data,msg)
|
||||
if (code === 1000) {
|
||||
if (data.rows) {
|
||||
localData.list = data.rows
|
||||
} else {
|
||||
localData.list = data
|
||||
}
|
||||
localData.total = data.total
|
||||
emits('getTotal', localData.total)
|
||||
localData.loading = false
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: msg,
|
||||
type: 'error'
|
||||
})
|
||||
localData.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("error", error)
|
||||
if (!error) {
|
||||
return
|
||||
}
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请求数据失败',
|
||||
type: 'error'
|
||||
})
|
||||
localData.loading = false
|
||||
}
|
||||
} else {
|
||||
localData.list = props.data
|
||||
}
|
||||
}
|
||||
|
||||
const selectionChange = (data) => {
|
||||
emits('selectionChange', data)
|
||||
}
|
||||
|
||||
const rowClick = (row, column) => {
|
||||
emits('rowClick', row, column)
|
||||
}
|
||||
|
||||
const rowDblclick = (row, column) => {
|
||||
emits('rowDblclick', row, column)
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
emits('cellClick', row, column)
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
localData.query.pageSize = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
localData.query.pageNum = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (localData.allColShow) {
|
||||
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
|
||||
}
|
||||
})
|
||||
//刷新
|
||||
const refresh = ({resetPage = false} = {}) => {
|
||||
resetPage ? localData.query.pageNum = 1 : null
|
||||
getList()
|
||||
}
|
||||
//改变loading状态
|
||||
const updateLoading = (status) => {
|
||||
localData.loading = status
|
||||
}
|
||||
//获取基础查询条件
|
||||
const getQuery = () => {
|
||||
return localData.query
|
||||
}
|
||||
|
||||
defineExpose({refresh, updateLoading, getQuery, tableInstance})
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.col-setting-checkall {
|
||||
border-bottom: 1px solid rgb(210, 210, 213);
|
||||
}
|
||||
|
||||
.col-setting-list {
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-head-btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fv-table-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.fv-table {
|
||||
:deep(.el-tooltip) {
|
||||
//width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
<template>
|
||||
<el-table-column
|
||||
v-bind="columns"
|
||||
>
|
||||
<template v-if="columns?.slots?.header" #header>
|
||||
<slot :name="columns?.slots?.header"></slot>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<template v-if="columns.children?.length">
|
||||
<fvTableColumn
|
||||
v-for="columnChildren in columns.children"
|
||||
:key="columnChildren.prop"
|
||||
:columns="columnChildren"
|
||||
>
|
||||
</fvTableColumn>
|
||||
</template>
|
||||
<slot v-else-if="columns.slots?.default" :name="columns.slots?.default" v-bind="scope"></slot>
|
||||
<component v-else-if="columns?.currentRender" :is="contentRender(columns?.currentRender, scope)"></component>
|
||||
<template v-else-if="!['selection', 'index', 'expand'].includes(columns?.type)">
|
||||
{{ renderCell(scope) }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { isVNode } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'fvTableColumn',
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
columns: {
|
||||
type: Object,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const contentRender = (render, scope) => {
|
||||
const content = render({row: unref(scope.row), index: scope.$index})
|
||||
return isVNode(content) ? content : <span>{content || '!(^-^)!'}</span>
|
||||
}
|
||||
|
||||
const renderCell = ({row, column, $index}) => {
|
||||
const property = column.property
|
||||
const value = property && row[property]
|
||||
if(column && column?.formatter) {
|
||||
return column.formatter(row, column, value, $index) || '--'
|
||||
}
|
||||
return value !== null && value !== undefined ? value.toString() : '--'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<template>
|
||||
<el-table-column
|
||||
v-bind="columns"
|
||||
>
|
||||
<template v-if="columns?.slots?.header" #header>
|
||||
<slot :name="columns?.slots?.header"></slot>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<template v-if="columns.children?.length">
|
||||
<fvTableColumn
|
||||
v-for="columnChildren in columns.children"
|
||||
:key="columnChildren.prop"
|
||||
:columns="columnChildren"
|
||||
>
|
||||
</fvTableColumn>
|
||||
</template>
|
||||
<slot v-else-if="columns.slots?.default" :name="columns.slots?.default" v-bind="scope"></slot>
|
||||
<component v-else-if="columns?.currentRender" :is="contentRender(columns?.currentRender, scope)"></component>
|
||||
<template v-else-if="!['selection', 'index', 'expand'].includes(columns?.type)">
|
||||
{{ renderCell(scope) }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { isVNode } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'fvTableColumn',
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
columns: {
|
||||
type: Object,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const contentRender = (render, scope) => {
|
||||
const content = render({row: unref(scope.row), index: scope.$index})
|
||||
return isVNode(content) ? content : <span>{content || '!(^-^)!'}</span>
|
||||
}
|
||||
|
||||
const renderCell = ({row, column, $index}) => {
|
||||
const property = column.property
|
||||
const value = property && row[property]
|
||||
if(column && column?.formatter) {
|
||||
return column.formatter(row, column, value, $index) || '--'
|
||||
}
|
||||
return value !== null && value !== undefined ? value.toString() : '--'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user