120 lines
3.9 KiB
Vue
120 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
|
<el-form class="mb-[-16px]" :model="queryParams" inline @submit.native.prevent>
|
|
<el-form-item :label="item.label" v-for="(item, index) in config.serchList" :key="index">
|
|
<el-select v-model="queryParams[item.value]" v-if="item.select" :disabled="isDisabled(item.value)">
|
|
<el-option :label="i.name" :value="i.value" v-for="i in item.select"
|
|
v-if="Array.isArray(item.select)"></el-option>
|
|
<el-option v-for="(i, index) in dictData[item.select]" :key="index" :label="i.name"
|
|
:value="parseInt(i.value)" v-else />
|
|
</el-select>
|
|
<el-input class="w-[280px]" v-model="queryParams[item.value]" clearable
|
|
:placeholder="`请输入${item.label}`" v-else />
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
|
<el-button @click="resetParams">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="mt-4">
|
|
<el-table :data="pager.lists" ref="elTable" @cell-click="handleCurrentChange" row-key="id"
|
|
@selection-change="handleSelectionChange">
|
|
|
|
<el-table-column type="selection" width="55" v-if="multipleChoice" />
|
|
<el-table-column :label="item[(Object.keys(item))[0]]" show-overflow-tooltip
|
|
v-for="item in config.tableList ">
|
|
<template #default="{ row }">
|
|
{{ (Object.keys(item))[0].includes('.') ?
|
|
row[(Object.keys(item))[0].split(".")[0]][(Object.keys(item))[0].split(".")[1]] :
|
|
row[(Object.keys(item))[0]] }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<pagination v-model="pager" @change="getLists" />
|
|
</div>
|
|
<div class="flex justify-end mt-4" v-if="multipleChoice">
|
|
<el-button type="primary" @click="confirm">确定</el-button>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { usePaging } from "@/hooks/usePaging"
|
|
import { defineEmits } from "vue"
|
|
import { useDictData } from '@/hooks/useDictOptions'
|
|
|
|
const props = defineProps({
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
query: Object,
|
|
multipleChoice: Boolean
|
|
})
|
|
|
|
|
|
/**根据传入的config生成queryParmas */
|
|
const getParmasFn = () => {
|
|
const arr = props.config.serchList.map((item: any) => (item.value))
|
|
const result = arr.reduce((acc: any, curr: any) => {
|
|
acc[curr] = '';
|
|
return acc;
|
|
}, {});
|
|
const mergedObj = Object.assign({}, result, props.query);
|
|
|
|
return mergedObj
|
|
}
|
|
|
|
|
|
/**判断是否需要disabled的搜索框*/
|
|
const isDisabled = (key: String) => {
|
|
if (!props.query) return
|
|
return Object.keys(props.query).includes(key)
|
|
}
|
|
|
|
|
|
// 查询条件
|
|
const queryParams = reactive({
|
|
...getParmasFn()
|
|
});
|
|
|
|
const { dictData } = useDictData(props.config.dictData)
|
|
|
|
// 选中数据
|
|
const emits = defineEmits(["customEvent"]);
|
|
|
|
// 选中数据子父传递
|
|
const handleCurrentChange = (value: any) => {
|
|
if (props.multipleChoice) return
|
|
emits("customEvent", value);
|
|
};
|
|
|
|
// 多选
|
|
const multipleSelection = ref([])
|
|
|
|
const handleSelectionChange = (val: any) => {
|
|
multipleSelection.value = val
|
|
}
|
|
|
|
const test = () => {
|
|
multipleSelection.value = []
|
|
}
|
|
|
|
const confirm = () => {
|
|
emits("customEvent", multipleSelection.value);
|
|
}
|
|
|
|
|
|
// 分页相关
|
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
|
fetchFun: props.config.fetchFn,
|
|
params: queryParams,
|
|
});
|
|
|
|
getLists();
|
|
</script> |