parent
b455947c6a
commit
e2c1376608
45 changed files with 198 additions and 841 deletions
@ -1,84 +1,81 @@ |
||||
import axios from '@/utils/request'; |
||||
import { getIds } from '@/utils/common'; |
||||
|
||||
export const accessStrategyGovernmentBlacklistFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyGovernmentBlacklist/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
const host = `http://192.168.31.51:9000`; |
||||
|
||||
export const accessStrategyGovernmentBlacklistFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyGovernmentBlacklist/details`, getIds())).data; |
||||
export const accessStrategyGovernmentBlacklistSave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyGovernmentBlacklist/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyEnterpriseBlacklistFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyEnterpriseBlacklist/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyEnterpriseBlacklistFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyEnterpriseBlacklist/details`, getIds())).data; |
||||
export const accessStrategyEnterpriseBlacklistSave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyEnterpriseBlacklist/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyAntiFraudStrategyFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyAntiFraudStrategy/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyAntiFraudStrategyFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyAntiFraudStrategy/details`, getIds())).data; |
||||
export const accessStrategyAntiFraudStrategySave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyAntiFraudStrategy/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyBusinessBlacklistFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyBusinessBlacklist/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyBusinessBlacklistFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyBusinessBlacklist/details`, getIds())).data; |
||||
export const accessStrategyBusinessBlacklistSave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyBusinessBlacklist/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyCreditBlacklistFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyCreditBlacklist/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyCreditBlacklistFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyCreditBlacklist/details`, getIds())).data; |
||||
export const accessStrategyCreditBlacklistSave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyCreditBlacklist/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyInlineBlacklistFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyInlineBlacklist/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyInlineBlacklistFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyInlineBlacklist/details`, getIds())).data; |
||||
export const accessStrategyInlineBlacklistSave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyInlineBlacklist/saveOrUpdate`, data)).data; |
||||
|
||||
export const accessStrategyNegativeIndustryStrategyFind = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyNegativeIndustryStrategy/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const accessStrategyNegativeIndustryStrategyFind = async (): Promise<any> => (await axios.post(`/product/accessStrategyNegativeIndustryStrategy/details`, getIds())).data; |
||||
export const accessStrategyNegativeIndustryStrategySave = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/accessStrategyNegativeIndustryStrategy/saveOrUpdate`, data)).data; |
||||
|
||||
export const delCredit = async (id: number): Promise<any> => (await axios.post(`/product/creditScoringStrategy/delete?strategyId=${id}`)).data; |
||||
export const findCredit = async (id: number): Promise<any> => (await axios.post(`/product/creditScoringStrategy/details?strategyId=${id}`)).data; |
||||
export const listCredit = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/creditScoringStrategy/list?checkpointId=${data.checkpointId}&projectId=${data.projectId}&pageNum=${data.pageNum}&pageSize=${data.pageSize}`)).data; |
||||
( |
||||
await axios.post(`/product/creditScoringStrategy/list`, { |
||||
...data, |
||||
...getIds(), |
||||
}) |
||||
).data; |
||||
export const saveCredit = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/creditScoringStrategy/saveOrUpdate`, data)).data; |
||||
|
||||
export const detailRick = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/riskDegreeStrategy/details?checkpointId=${data.checkpointId}&projectId=${data.projectId}&type=${data.type}`)).data; |
||||
export const detailRick = async (type: number): Promise<any> => |
||||
( |
||||
await axios.post(`/product/riskDegreeStrategy/details`, { |
||||
...getIds(), |
||||
type, |
||||
}) |
||||
).data; |
||||
export const saveRick = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/riskDegreeStrategy/saveOrUpdate`, data)).data; |
||||
|
||||
export const businessInterestRateDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/interestRateModel/businessInterestRateDetails?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const businessInterestRateDetails = async (): Promise<any> => (await axios.post(`/product/interestRateModel/businessInterestRateDetails`, getIds())).data; |
||||
export const businessInterestRateSaveOrUpdate = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/interestRateModel/businessInterestRateSaveOrUpdate`, data)).data; |
||||
export const personalInterestRateDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/interestRateModel/personalInterestRateDetails?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const personalInterestRateDetails = async (): Promise<any> => (await axios.post(`/product/interestRateModel/personalInterestRateDetails`, getIds())).data; |
||||
export const personalInterestRateSaveOrUpdate = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/interestRateModel/personalInterestRateSaveOrUpdate`, data)).data; |
||||
|
||||
export const businessQuotaModelDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/quotaModel/businessQuotaModelDetails?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const businessQuotaModelDetails = async (): Promise<any> => (await axios.post(`/product/quotaModel/businessQuotaModelDetails`, getIds())).data; |
||||
export const businessQuotaModelSaveOrUpdate = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/quotaModel/businessQuotaModelSaveOrUpdate`, data)).data; |
||||
export const personalCreditModelDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/quotaModel/personalCreditModelDetails?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const personalCreditModelDetails = async (): Promise<any> => (await axios.post(`/product/quotaModel/personalCreditModelDetails`, getIds())).data; |
||||
export const personalCreditModelSaveOrUpdate = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post(`/product/quotaModel/personalCreditModelSaveOrUpdate`, data)).data; |
||||
|
||||
export const fiveLevelClassificationDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/fiveLevelClassification/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const fiveLevelClassificationDetails = async (): Promise<any> => (await axios.post(`/product/fiveLevelClassification/details`, getIds())).data; |
||||
export const fiveLevelClassificationSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/fiveLevelClassification/saveOrUpdate`, data)).data; |
||||
|
||||
export const postLoanInspectionDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/postLoanInspection/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const postLoanInspectionDetails = async (): Promise<any> => (await axios.post(`/product/postLoanInspection/details`, getIds())).data; |
||||
export const postLoanInspectionSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/postLoanInspection/saveOrUpdate`, data)).data; |
||||
|
||||
export const postCreditScoreDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/postCreditScore/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const postCreditScoreDetails = async (): Promise<any> => (await axios.post(`/product/postCreditScore/details`, getIds())).data; |
||||
export const postCreditScoreSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/postCreditScore/saveOrUpdate`, data)).data; |
||||
|
||||
export const postLoanWarningDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/postLoanWarning/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const postLoanWarningDetails = async (): Promise<any> => (await axios.post(`/product/postLoanWarning/details`, getIds())).data; |
||||
export const postLoanWarningSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/postLoanWarning/saveOrUpdate`, data)).data; |
||||
|
||||
export const collectionAfterLoanDetails = async (checkpointId: number, projectId: number): Promise<any> => |
||||
(await axios.post(`/product/collectionAfterLoan/details?checkpointId=${checkpointId}&projectId=${projectId}`)).data; |
||||
export const collectionAfterLoanDetails = async (): Promise<any> => (await axios.post(`/product/collectionAfterLoan/details`, getIds())).data; |
||||
export const collectionAfterLoanSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/collectionAfterLoan/saveOrUpdate`, data)).data; |
||||
|
||||
@ -1,258 +0,0 @@ |
||||
<template> |
||||
<el-dialog |
||||
:title="title" |
||||
:close-on-click-modal="!unsaved" |
||||
:model-value="modelValue" |
||||
@update:model-value="$emit('update:modelValue', $event)" |
||||
@opened="!isEdit && focus?.focus()" |
||||
:width="large ? '98%' : '683px'" |
||||
:top="large ? '16px' : undefined" |
||||
> |
||||
<div> |
||||
<el-button v-if="isEdit && addable" :disabled="perm(`${perms}:create`)" type="primary" :icon="Plus" @click="handleAdd">{{ $t('add') }}</el-button> |
||||
<el-popconfirm v-if="isEdit" :title="$t('confirmDelete')" @confirm="handleDelete"> |
||||
<template #reference> |
||||
<el-button :loading="buttonLoading" :disabled="disableDelete?.(bean) || perm(`${perms}:delete`)" :icon="Delete">{{ $t('delete') }}</el-button> |
||||
</template> |
||||
</el-popconfirm> |
||||
<el-button v-if="isEdit" @click="handlePrev" :disabled="!hasPrev">{{ $t('form.prev') }}</el-button> |
||||
<el-button v-if="isEdit" @click="handleNext" :disabled="!hasNext">{{ $t('form.next') }}</el-button> |
||||
<el-button @click="handleCancel" type="primary">{{ $t('back') }}</el-button> |
||||
<el-tooltip :content="$t('form.continuous')" placement="top"> |
||||
<el-switch v-model="continuous" size="small" class="ml-2"></el-switch> |
||||
</el-tooltip> |
||||
<el-tag v-if="unsaved" type="danger" class="ml-2">{{ $t('form.unsaved') }}</el-tag> |
||||
<slot name="header" :values="values" :bean="bean" :isEdit="isEdit"></slot> |
||||
</div> |
||||
<el-form |
||||
:class="['mt-5', 'pr-5']" |
||||
ref="form" |
||||
v-loading="loading" |
||||
:model="values" |
||||
:disabled="!editable" |
||||
:label-width="labelWidth ?? '150px'" |
||||
:label-position="labelPosition ?? 'right'" |
||||
> |
||||
<slot :values="values" :bean="bean" :isEdit="isEdit"></slot> |
||||
<div v-if="editable"> |
||||
<el-button :disabled="perm(isEdit ? `${perms}:update` : `${perms}:create`)" :loading="buttonLoading" @click.prevent="handleSubmit" type="primary" native-type="submit"> |
||||
{{ $t('submit') }} |
||||
</el-button> |
||||
</div> |
||||
</el-form> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { Plus, Delete } from '@element-plus/icons-vue'; |
||||
import { useI18n } from 'vue-i18n'; |
||||
import _ from 'lodash'; |
||||
import { perm } from '@/store/useCurrentUser'; |
||||
|
||||
const CONTINUOUS_SETTINGS = 'ujcms_continuous_settings'; |
||||
function fetchContinuous(): Record<string, boolean> { |
||||
const settings = localStorage.getItem(CONTINUOUS_SETTINGS); |
||||
return settings ? JSON.parse(settings) : {}; |
||||
} |
||||
function storeContinuous(settings: Record<string, boolean>) { |
||||
localStorage.setItem(CONTINUOUS_SETTINGS, JSON.stringify(settings)); |
||||
} |
||||
function getContinuous(name: string) { |
||||
const settings = fetchContinuous(); |
||||
return settings[name] ?? false; |
||||
} |
||||
function setContinuous(name: string, continuous: boolean) { |
||||
const settings = fetchContinuous(); |
||||
settings[name] = continuous; |
||||
storeContinuous(settings); |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'DialogForm', |
||||
props: { |
||||
modelValue: { type: Boolean, required: true }, |
||||
name: { type: String, required: true }, |
||||
beanId: { required: true }, |
||||
beanIds: { type: Array, required: true }, |
||||
initValues: { type: Function as PropType<(bean?: any) => any>, required: true }, |
||||
toValues: { type: Function as PropType<(bean: any) => any>, required: true }, |
||||
queryBean: { type: Function as PropType<(id: any) => Promise<any>>, required: true }, |
||||
createBean: { type: Function as PropType<(bean: any) => Promise<any>>, required: true }, |
||||
updateBean: { type: Function as PropType<(bean: any) => Promise<any>>, required: true }, |
||||
deleteBean: { type: Function as PropType<(ids: any[]) => Promise<any>>, required: true }, |
||||
disableDelete: { type: Function as PropType<(bean: any) => boolean> }, |
||||
addable: { type: Boolean, default: true }, |
||||
editable: { type: Boolean, default: true }, |
||||
perms: String, |
||||
focus: Object, |
||||
large: Boolean, |
||||
labelPosition: String, |
||||
labelWidth: String, |
||||
}, |
||||
emits: { |
||||
'update:modelValue': null, |
||||
finished: null, |
||||
beanChange: null, |
||||
beforeSubmit: null, |
||||
}, |
||||
setup(props, { emit }) { |
||||
const { name, beanId, beanIds, focus, modelValue: visible } = toRefs(props); |
||||
const { t } = useI18n(); |
||||
const loading = ref<boolean>(false); |
||||
const buttonLoading = ref<boolean>(false); |
||||
const continuous = ref<boolean>(getContinuous(name.value)); |
||||
const reseted = ref<boolean>(false); |
||||
const unsaved = ref<boolean>(false); |
||||
const form = ref<any>(); |
||||
const values = ref<any>(props.initValues()); |
||||
const bean = ref<any>({}); |
||||
const id = ref<any>(); |
||||
const ids = ref<Array<any>>([]); |
||||
const isEdit = computed(() => id.value != null); |
||||
const title = computed(() => `${name.value} - ${isEdit.value ? `${t('edit')} (ID: ${id.value})` : `${t('add')}`}`); |
||||
const idChanged = async () => { |
||||
loading.value = true; |
||||
unsaved.value = false; |
||||
reseted.value = true; |
||||
try { |
||||
bean.value = id.value != null ? await props.queryBean(id.value) : {}; |
||||
values.value = id.value != null ? props.toValues(bean.value) : props.initValues(values.value); |
||||
emit('beanChange', bean.value); |
||||
form.value.resetFields(); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
watch(visible, () => { |
||||
if (visible.value) { |
||||
ids.value = beanIds.value; |
||||
if (id.value !== beanId.value) { |
||||
id.value = beanId.value; |
||||
} else if (id.value != null) { |
||||
idChanged(); |
||||
} |
||||
if (id.value == null) { |
||||
reseted.value = true; |
||||
values.value = props.initValues(); |
||||
} |
||||
} |
||||
}); |
||||
watch(id, () => { |
||||
idChanged(); |
||||
}); |
||||
watch( |
||||
// 监听对象必须使用 lodash 的深度拷贝，才能在监听里面获取旧值和新值。 |
||||
// 参考文档：https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects |
||||
() => _.cloneDeep(values.value), |
||||
(curr, prev) => { |
||||
// 重置触发的bean改动，不标记为未保存。 |
||||
if (reseted.value) { |
||||
reseted.value = false; |
||||
} else if (JSON.stringify(curr) !== JSON.stringify(prev)) { |
||||
// 自定义字段改变页面时，会改变values.customs，加上字段的值，但这些值为undefined。 |
||||
// 这会触发watch监听，但json值不变。如json值不变，则不修改unsaved状态。 |
||||
unsaved.value = true; |
||||
} |
||||
}, |
||||
{ deep: true }, |
||||
); |
||||
watch(continuous, () => setContinuous(name.value, continuous.value)); |
||||
const index = computed(() => ids.value.indexOf(id.value)); |
||||
const hasPrev = computed(() => index.value > 0); |
||||
const hasNext = computed(() => index.value < ids.value.length - 1); |
||||
const handlePrev = () => { |
||||
if (hasPrev.value) { |
||||
id.value = ids.value[index.value - 1]; |
||||
} |
||||
}; |
||||
const handleNext = () => { |
||||
if (hasNext.value) { |
||||
id.value = ids.value[index.value + 1]; |
||||
} |
||||
}; |
||||
const handleAdd = () => { |
||||
// eslint-disable-next-line no-unused-expressions |
||||
focus?.value?.focus?.(); |
||||
id.value = undefined; |
||||
}; |
||||
const handleCancel = () => { |
||||
emit('update:modelValue', false); |
||||
}; |
||||
const handleSubmit = () => { |
||||
form.value.validate(async (valid: boolean) => { |
||||
if (!valid) return; |
||||
buttonLoading.value = true; |
||||
try { |
||||
emit('beforeSubmit', values.value); |
||||
if (isEdit.value) { |
||||
await props.updateBean(values.value); |
||||
unsaved.value = false; |
||||
} else { |
||||
await props.createBean(values.value); |
||||
// eslint-disable-next-line no-unused-expressions |
||||
focus?.value?.focus?.(); |
||||
unsaved.value = false; |
||||
reseted.value = true; |
||||
values.value = props.initValues(values.value); |
||||
form.value.resetFields(); |
||||
} |
||||
ElMessage.success(t('success')); |
||||
if (!continuous.value) emit('update:modelValue', false); |
||||
emit('finished', bean.value); |
||||
} finally { |
||||
buttonLoading.value = false; |
||||
} |
||||
}); |
||||
}; |
||||
const handleDelete = async () => { |
||||
buttonLoading.value = true; |
||||
try { |
||||
await props.deleteBean([id.value]); |
||||
if (!continuous.value) emit('update:modelValue', false); |
||||
if (hasNext.value) { |
||||
handleNext(); |
||||
ids.value.splice(index.value - 1, 1); |
||||
} else if (hasPrev.value) { |
||||
handlePrev(); |
||||
ids.value.splice(index.value + 1, 1); |
||||
} else { |
||||
emit('update:modelValue', false); |
||||
} |
||||
ElMessage.success(t('success')); |
||||
emit('finished'); |
||||
} finally { |
||||
buttonLoading.value = false; |
||||
} |
||||
}; |
||||
const setUnsaved = (bool: boolean) => { |
||||
unsaved.value = bool; |
||||
}; |
||||
return { |
||||
perm, |
||||
handleAdd, |
||||
handleDelete, |
||||
handleSubmit, |
||||
handleCancel, |
||||
handlePrev, |
||||
handleNext, |
||||
hasPrev, |
||||
hasNext, |
||||
loading, |
||||
buttonLoading, |
||||
continuous, |
||||
unsaved, |
||||
isEdit, |
||||
form, |
||||
values, |
||||
bean, |
||||
id, |
||||
title, |
||||
setUnsaved, |
||||
Plus, |
||||
Delete, |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
@ -1,30 +0,0 @@ |
||||
<template> |
||||
<p>{{ t('hello') }}</p> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue'; |
||||
import { useI18n } from 'vue-i18n'; |
||||
|
||||
export default defineComponent({ |
||||
name: 'HelloI18n', |
||||
setup() { |
||||
const { t } = useI18n({ |
||||
inheritLocale: true, |
||||
useScope: 'local', |
||||
}); |
||||
|
||||
// Something todo .. |
||||
|
||||
return { t }; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<i18n> |
||||
{ |
||||
"en": { |
||||
"hello": "Hello i18n in SFC!" |
||||
} |
||||
} |
||||
</i18n> |
||||
@ -1,17 +0,0 @@ |
||||
<template> |
||||
{{ label ?? $t(message) }} |
||||
<el-tooltip :content="tooltip ?? $t(message + '.tooltip')" |
||||
placement="top"> |
||||
<el-icon class="text-base align-text-top"><question-filled /></el-icon> |
||||
</el-tooltip> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { QuestionFilled } from '@element-plus/icons-vue'; |
||||
|
||||
defineProps({ |
||||
label: { type: String }, |
||||
tooltip: { type: String }, |
||||
message: { type: String, required: true }, |
||||
}); |
||||
</script> |
||||
@ -1,27 +0,0 @@ |
||||
<template> |
||||
<el-button-group> |
||||
<el-button :disabled="disabled" |
||||
:icon="Top" |
||||
@click="$emit('move', 'top')">{{ $t('moveTop') }}</el-button> |
||||
<el-button :disabled="disabled" |
||||
:icon="ArrowUp" |
||||
@click="$emit('move', 'up')">{{ $t('moveUp') }}</el-button> |
||||
<el-button :disabled="disabled" |
||||
:icon="ArrowDown" |
||||
@click="$emit('move', 'down')">{{ $t('moveDown') }}</el-button> |
||||
<el-button :disabled="disabled" |
||||
:icon="Bottom" |
||||
@click="$emit('move', 'bottom')">{{ $t('moveBottom') }}</el-button> |
||||
</el-button-group> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Top, Bottom, ArrowUp, ArrowDown } from '@element-plus/icons-vue'; |
||||
|
||||
defineProps({ |
||||
disabled: { type: Boolean, required: true }, |
||||
}); |
||||
defineEmits({ |
||||
move: null, |
||||
}); |
||||
</script> |
||||
@ -1,59 +0,0 @@ |
||||
<template> |
||||
<form class="flex"> |
||||
<div class="space-y-1"> |
||||
<div v-for="(name, index) in names" :key="name" class="flex"> |
||||
<el-button :icon="index == 0 ? Plus : Minus" @click="handelRow(index)" :disabled="index <= 0 && remains.length <= 0" circle></el-button> |
||||
<el-select v-model="names[index]" @change="clearParams()" class="w-36"> |
||||
<el-option v-for="item in data.filter((it) => it.name === names[index] || remains.includes(it))" :key="item.name" :label="item.label" :value="item.name"></el-option> |
||||
</el-select> |
||||
<query-input :inputs="inputs" :name="names[index]"></query-input> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<el-button-group class="ml-2"> |
||||
<el-button native-type="submit" :icon="Search" @click.prevent="$emit('search')">{{ $t('search') }}</el-button> |
||||
<el-button :icon="Refresh" @click="$emit('reset')">{{ $t('reset') }}</el-button> |
||||
</el-button-group> |
||||
</div> |
||||
</form> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { defineEmits, useSlots, provide, computed, ref, toRefs } from 'vue'; |
||||
import { Plus, Minus, Search, Refresh } from '@element-plus/icons-vue'; |
||||
import QueryInput from './QueryInput.vue'; |
||||
|
||||
const props = defineProps({ params: { type: Object, required: true } }); |
||||
const { params } = toRefs(props); |
||||
const slots = useSlots(); |
||||
provide('params', params); |
||||
defineEmits({ |
||||
search: null, |
||||
reset: null, |
||||
}); |
||||
|
||||
const data = ref<any[]>([]); |
||||
const inputs = ref<any[]>([]); |
||||
inputs.value = slots.default?.() ?? []; |
||||
data.value = inputs.value.map((item) => ({ label: item.props?.label, name: item.props?.name })); |
||||
|
||||
const [first] = data.value; |
||||
const names = ref<string[]>([first.name]); |
||||
const remains = computed(() => data.value.filter((it) => !names.value.includes(it.name))); |
||||
const clearParams = () => { |
||||
Object.keys(params.value).forEach((key) => { |
||||
if (!names.value.includes(key) && names.value.findIndex((item) => item.split(',').includes(key)) === -1) { |
||||
delete params.value[key]; |
||||
} |
||||
}); |
||||
}; |
||||
const handelRow = (index: number) => { |
||||
if (index === 0) { |
||||
const [item] = remains.value; |
||||
names.value[names.value.length] = item.name; |
||||
} else { |
||||
names.value.splice(index, 1); |
||||
clearParams(); |
||||
} |
||||
}; |
||||
</script> |
||||
@ -1,16 +0,0 @@ |
||||
<script lang="ts"> |
||||
import { defineComponent, computed, toRefs } from 'vue'; |
||||
|
||||
export default defineComponent({ |
||||
name: 'QueryInput', |
||||
props: { inputs: { type: Array, required: true }, name: { type: String, required: true } }, |
||||
setup(props) { |
||||
const { inputs, name } = toRefs(props); |
||||
const input = computed(() => inputs.value.find((item: any) => item.props.name === name.value)); |
||||
return { input }; |
||||
}, |
||||
render() { |
||||
return this.input; |
||||
}, |
||||
}); |
||||
</script> |
||||
@ -1,64 +0,0 @@ |
||||
<template> |
||||
<slot> |
||||
<div v-if="type === 'number'" |
||||
class="inline-block"> |
||||
<el-input-number v-model="params[first]" |
||||
:placeholder="$t('begin.number')" |
||||
class="w-48"></el-input-number> |
||||
<el-input-number v-model="params[second]" |
||||
:placeholder="$t('end.number')" |
||||
class="w-48"></el-input-number> |
||||
</div> |
||||
<el-date-picker v-else-if="type === 'date'" |
||||
v-model="params[name]" |
||||
type="daterange" |
||||
:start-placeholder="$t('begin.date')" |
||||
:end-placeholder="$t('end.date')" |
||||
class="w-96"></el-date-picker> |
||||
<el-date-picker v-else-if="type === 'datetime'" |
||||
v-model="params[name]" |
||||
type="datetimerange" |
||||
:start-placeholder="$t('begin.date')" |
||||
:end-placeholder="$t('end.date')" |
||||
class="w-96"> |
||||
</el-date-picker> |
||||
<!-- |
||||
<div v-else-if="type === 'date'" class="inline-block"> |
||||
<el-date-picker v-model="params[first]" type="date" :placeholder="$t('begin.date')" class="w-48"></el-date-picker> |
||||
<el-date-picker v-model="params[second]" type="date" :placeholder="$t('end.date')" class="w-48"></el-date-picker> |
||||
</div> |
||||
<div v-else-if="type === 'datetime'" class="inline-block"> |
||||
<el-date-picker v-model="params[first]" type="datetime" class="w-48"></el-date-picker> |
||||
<el-date-picker v-model="params[second]" type="datetime" class="w-48"></el-date-picker> |
||||
</div> |
||||
--> |
||||
<el-select v-else-if="options" |
||||
v-model="params[name]" |
||||
multiple |
||||
class="w-96"> |
||||
<el-option v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value"></el-option> |
||||
</el-select> |
||||
<el-input v-else |
||||
v-model="params[name]" |
||||
class="w-96"></el-input> |
||||
</slot> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { inject, PropType, ref, toRefs } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
label: { type: String, required: true }, |
||||
name: { type: String, required: true }, |
||||
// 'string' | 'date' | 'datetime' | 'number' |
||||
type: { type: String }, |
||||
options: { type: Object as PropType<Array<{ label: string; value: string | number }>> }, |
||||
}); |
||||
const params = inject<any>('params'); |
||||
const { name } = toRefs(props); |
||||
const [firstName, secondName] = name.value.split(','); |
||||
const first = ref<string>(firstName); |
||||
const second = ref<string>(secondName); |
||||
</script> |
||||
@ -1,2 +0,0 @@ |
||||
export { default as QueryForm } from './QueryForm.vue'; |
||||
export { default as QueryItem } from './QueryItem.vue'; |
||||
@ -1,45 +0,0 @@ |
||||
<script lang="ts"> |
||||
import { computed, defineComponent, toRefs } from 'vue'; |
||||
import { useI18n } from 'vue-i18n'; |
||||
import { ColumnState, getColumnSettings, setColumnOrigins } from './useColumns'; |
||||
|
||||
export default defineComponent({ |
||||
name: 'ColumnList', |
||||
props: { name: { type: String, required: true } }, |
||||
setup(props, { slots }) { |
||||
const { name } = toRefs(props); |
||||
const { t } = useI18n(); |
||||
const slotColumns = slots.default?.() ?? []; |
||||
// 获取栏目名称 |
||||
const getColumnTitle = (columnProps: any) => { |
||||
// 如果是checkbox列，则名称为“选择框” |
||||
if (columnProps?.type === 'selection') return t('table.selection'); |
||||
return columnProps?.label; |
||||
}; |
||||
// 获取el-table-column的名称、是否显示 |
||||
const origins: ColumnState[] = slotColumns.map((column) => ({ title: getColumnTitle(column.props), display: column.props?.display !== 'none' })); |
||||
setColumnOrigins(name.value, origins); |
||||
|
||||
const settings = getColumnSettings(name.value); |
||||
const columns = computed(() => |
||||
slotColumns |
||||
.filter((column) => { |
||||
const matched = settings.value.find((item) => getColumnTitle(column.props) === item.title); |
||||
return !matched || matched.display; |
||||
}) |
||||
.map((column) => ({ ...column, key: getColumnTitle(column.props) })) |
||||
.sort((a, b) => { |
||||
let indexA = settings.value.findIndex((item) => item.title === getColumnTitle(a)); |
||||
if (indexA < 0) indexA = slotColumns.findIndex((item) => getColumnTitle(item) === getColumnTitle(a)); |
||||
let indexB = settings.value.findIndex((item) => item.title === getColumnTitle(b)); |
||||
if (indexB < 0) indexB = slotColumns.findIndex((item) => getColumnTitle(item) === getColumnTitle(b)); |
||||
return indexA - indexB; |
||||
}), |
||||
); |
||||
return { columns }; |
||||
}, |
||||
render() { |
||||
return this.columns; |
||||
}, |
||||
}); |
||||
</script> |
||||
@ -1,40 +0,0 @@ |
||||
<template> |
||||
<el-dropdown class="align-middle" |
||||
trigger="click" |
||||
:hide-on-click="false"> |
||||
<el-tooltip :content="$t('table.columnsSetting')" |
||||
placement="top"> |
||||
<el-icon class="text-base"> |
||||
<setting /> |
||||
</el-icon> |
||||
</el-tooltip> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item> |
||||
<el-button @click="resetColumns" |
||||
type="text">{{ $t('table.columnsReset') }}</el-button> |
||||
</el-dropdown-item> |
||||
<el-dropdown-item v-for="(column, index) in settings" |
||||
:key="column.title" |
||||
:divided="index === 0"> |
||||
<el-checkbox v-model="column.display">{{ column.title }}</el-checkbox> |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { toRefs, watch } from 'vue'; |
||||
import { Setting } from '@element-plus/icons-vue'; |
||||
import { getColumnOrigins, getColumnSettings, mergeColumns, storeColumnSettings } from './useColumns'; |
||||
|
||||
const props = defineProps({ name: { type: String, required: true } }); |
||||
const { name } = toRefs(props); |
||||
const settings = getColumnSettings(name.value); |
||||
const origins = getColumnOrigins(name.value); |
||||
watch(settings, () => storeColumnSettings(), { deep: true }); |
||||
const resetColumns = () => { |
||||
settings.value = mergeColumns([], origins.value); |
||||
}; |
||||
</script> |
||||
@ -1,2 +0,0 @@ |
||||
export { default as ColumnSetting } from './ColumnSetting.vue'; |
||||
export { default as ColumnList } from './ColumnList.vue'; |
||||
@ -1,55 +0,0 @@ |
||||
import { reactive, toRef } from 'vue'; |
||||
|
||||
export interface ColumnState { |
||||
title: string; |
||||
display: boolean; |
||||
} |
||||
|
||||
const COLUMN_SETTINGS = 'ujcms_column_settings'; |
||||
|
||||
function fetchColumnSettings(): Record<string, ColumnState[]> { |
||||
const settings = localStorage.getItem(COLUMN_SETTINGS); |
||||
return settings ? JSON.parse(settings) : {}; |
||||
} |
||||
|
||||
const originStore: Record<string, ColumnState[]> = reactive({}); |
||||
const settingStore: Record<string, ColumnState[]> = reactive(fetchColumnSettings()); |
||||
|
||||
export function storeColumnSettings() { |
||||
localStorage.setItem(COLUMN_SETTINGS, JSON.stringify(settingStore)); |
||||
} |
||||
export const getColumnOrigins = (name: string) => { |
||||
if (!originStore[name]) originStore[name] = []; |
||||
return toRef(originStore, name); |
||||
}; |
||||
export const mergeColumns = (settings: ColumnState[], origins: ColumnState[]) => { |
||||
// 去除不存在的列
|
||||
for (let i = 0, len = settings.length; i < len; ) { |
||||
if (origins.findIndex((column) => column.title === settings[i].title) === -1) { |
||||
settings.splice(i, 1); |
||||
len -= 1; |
||||
} else { |
||||
i += 1; |
||||
} |
||||
} |
||||
// 增加未记录的列
|
||||
origins.forEach((column) => { |
||||
if (settings.findIndex((item) => item.title === column.title) === -1) { |
||||
settings.push({ ...column }); |
||||
} |
||||
}); |
||||
return settings; |
||||
}; |
||||
export const setColumnOrigins = (name: string, origins: ColumnState[]) => { |
||||
originStore[name] = origins; |
||||
if (!settingStore[name]) settingStore[name] = []; |
||||
const settings = settingStore[name]; |
||||
mergeColumns(settings, origins); |
||||
}; |
||||
export const getColumnSettings = (name: string) => { |
||||
if (!settingStore[name]) settingStore[name] = []; |
||||
return toRef(settingStore, name); |
||||
}; |
||||
// export const setColumnSettings = (name: string, settings: ColumnState[]) => {
|
||||
// settingStore[name] = settings;
|
||||
// };
|
||||
Loading…
Reference in new issue