前端
This commit is contained in:
zpc
parent
727d2fea87
commit
bebf8dabbe
1
admin-client/src/components.d.ts
vendored
1
admin-client/src/components.d.ts
vendored
|
|
@ -76,6 +76,7 @@ declare module 'vue' {
|
|||
FindBack: typeof import('./core/components/FindBack.vue')['default']
|
||||
GenerateCron: typeof import('./core/components/GenerateCron.vue')['default']
|
||||
HmActionTypeSelect: typeof import('./core/components/curd/select-components/hm-action-type-select.vue')['default']
|
||||
HmActiveStatus: typeof import('./core/components/huanmeng/hm-active-status.vue')['default']
|
||||
HmCommonSelect: typeof import('./core/components/curd/select-components/hm-common-select.vue')['default']
|
||||
HmImage: typeof import('./core/components/huanmeng/hm-image.vue')['default']
|
||||
HmImageTypeSelect: typeof import('./core/components/curd/select-components/hm-image-type-select.vue')['default']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<a-radio-group :value="props.modelValue" name="activeStatusGroup" @change="handleChange">
|
||||
<a-radio :value="true">启用</a-radio>
|
||||
<a-radio :value="false">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 定义 props
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
}>();
|
||||
|
||||
// 定义 emits
|
||||
const emits = defineEmits<{
|
||||
"update:modelValue": [value: boolean];
|
||||
}>();
|
||||
|
||||
// 处理变化事件 - a-radio-group 的 @change 事件直接传递选中的值
|
||||
function handleChange(event: any) {
|
||||
// console.log(event);
|
||||
emits("update:modelValue", event.target.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/* 你的样式代码 */
|
||||
</style>
|
||||
|
||||
|
|
@ -1,109 +1,82 @@
|
|||
<template>
|
||||
<a-row :gutter="[16, 0]">
|
||||
<a-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
|
||||
<a-input v-model:value="props.modelValue" placeholder="请输入图片地址" @change="updateValue"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]" />
|
||||
<a-input v-model:value="props.modelValue" placeholder="请输入图片地址" @change="updateValue">
|
||||
<template #addonAfter>
|
||||
<span :style="{
|
||||
cursor: props.modelValue ? 'pointer' : 'not-allowed',
|
||||
color: props.modelValue ? '#1890ff' : '#d9d9d9',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 4px'
|
||||
}" @click="handlePreview" title="查看图片">
|
||||
<ZoomInOutlined />
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
|
||||
<a-button type="primary" @click="fileupload">上传</a-button>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="margin-top: 10px">
|
||||
<a-collapse>
|
||||
<a-collapse-panel key="1" header="预览图片">
|
||||
<p>
|
||||
<a-image :src="props.modelValue" />
|
||||
</p>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<a-modal v-model:open="previewVisible" title="图片预览" :footer="null" :width="900" centered
|
||||
@cancel="previewVisible = false">
|
||||
<div
|
||||
style="text-align: center; padding: 20px 0; min-height: 400px; display: flex; align-items: center; justify-content: center;">
|
||||
<a-image :src="props.modelValue" :preview="true" style="max-width: 100%; max-height: 70vh;" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import type { SelectProps } from "ant-design-vue";
|
||||
import AppDictionaryCache from "@/core/utils/AppDictionaryCache";
|
||||
import type { SelectValue } from "ant-design-vue/lib/select";
|
||||
|
||||
import Tools from "@/core/utils/Tools";
|
||||
// 使用 withDefaults 添加默认值
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps<{
|
||||
modelValue: string;
|
||||
tenantId: string | undefined;
|
||||
tenantId?: string | undefined;
|
||||
}>();
|
||||
console.log(props.modelValue);
|
||||
|
||||
// 定义 emits
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
|
||||
// // 异步获取数据并更新 options
|
||||
// AppDictionaryCache.appDictionaryImageCache.getDataListSelect().then(data => {
|
||||
// // console.log(data);
|
||||
// options.value?.push(...data);
|
||||
// if (props.ShowAll) {
|
||||
// options.value?.unshift({ value: '-1', label: '全部' });
|
||||
// }
|
||||
// });
|
||||
// 图片预览弹窗显示状态
|
||||
const previewVisible = ref(false);
|
||||
|
||||
// 处理图片预览
|
||||
function handlePreview() {
|
||||
if (props.modelValue && props.modelValue.trim()) {
|
||||
previewVisible.value = true;
|
||||
} else {
|
||||
Tools.message.warning("请先上传或输入图片地址");
|
||||
}
|
||||
}
|
||||
|
||||
// 定义方法以触发 update:modelValue 事件
|
||||
function updateValue(event: any) {
|
||||
console.log(event);
|
||||
emits("update:modelValue", event.target.value);
|
||||
}
|
||||
|
||||
function updateValueNumber(event: string) {
|
||||
emits("update:modelValue", event);
|
||||
// 更新图片地址
|
||||
function updateValueNumber(imageUrl: string) {
|
||||
emits("update:modelValue", imageUrl);
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
async function fileupload() {
|
||||
const response = await Tools.imageFileUpload(0, 0, "", "");
|
||||
console.log(response);
|
||||
updateValueNumber(response.imageUrl);
|
||||
}
|
||||
let timeout: any;
|
||||
let currentValue = "";
|
||||
|
||||
function fetch(value: string, callback: any) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
try {
|
||||
const response = await Tools.imageFileUpload(0, 0, "", props.tenantId || "");
|
||||
if (response && response.imageUrl) {
|
||||
updateValueNumber(response.imageUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
}
|
||||
currentValue = value;
|
||||
|
||||
function fake() {
|
||||
// TImageConfigService.getImageList(value).then((res) => {
|
||||
// if (res.data != null) {
|
||||
// const data: any[] = [];
|
||||
// res.data.forEach((r: any) => {
|
||||
// data.push({
|
||||
// value: r.imageId,
|
||||
// label: "[" + r.imageId + "]" + r.name,
|
||||
// code: r.url,
|
||||
// });
|
||||
// });
|
||||
// callback(data);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
timeout = setTimeout(fake, 300);
|
||||
}
|
||||
|
||||
const data = ref<any[]>([]);
|
||||
const value = ref();
|
||||
|
||||
const handleSearch = (val: string) => {
|
||||
fetch(val, (d: any[]) => (data.value = d));
|
||||
};
|
||||
const handleChange = (val: string) => {
|
||||
console.log(val);
|
||||
updateValueNumber(val);
|
||||
// emits("update:modelValue", val);
|
||||
// props.modelValue = 1;
|
||||
// value.value = "";
|
||||
// fetch(val, (d: any[]) => (data.value = d));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,118 @@ const state = reactive({
|
|||
page: 1,
|
||||
size: 50,
|
||||
total: 100,
|
||||
columns: [] as any,
|
||||
columns: [
|
||||
{
|
||||
"fieldName": "id",
|
||||
"dataIndex": "id",
|
||||
"title": "Id",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "levelName",
|
||||
"dataIndex": "levelName",
|
||||
"title": "名称",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "minExperience",
|
||||
"dataIndex": "minExperience",
|
||||
"title": "最小经验值",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "maxExperience",
|
||||
"dataIndex": "maxExperience",
|
||||
"title": "最大经验值",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "levelIcon",
|
||||
"dataIndex": "levelIcon",
|
||||
"title": "登录图标",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
type: "image",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "levelColor",
|
||||
"dataIndex": "levelColor",
|
||||
"title": "颜色",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "privileges",
|
||||
"dataIndex": "privileges",
|
||||
"title": "配置",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "createdAt",
|
||||
"dataIndex": "createdAt",
|
||||
"title": "创建时间",
|
||||
"show": false,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "updatedAt",
|
||||
"dataIndex": "updatedAt",
|
||||
"title": "更新时间",
|
||||
"show": false,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "text",
|
||||
customRender: null
|
||||
},
|
||||
{
|
||||
"fieldName": "isActive",
|
||||
"dataIndex": "isActive",
|
||||
"title": "状态",
|
||||
"show": true,
|
||||
"width": "",
|
||||
"sorter": true,
|
||||
"orderById": 0,
|
||||
"type": "bool",
|
||||
customRender: null
|
||||
}
|
||||
] as any,
|
||||
data: [] as any,
|
||||
});
|
||||
|
||||
|
|
@ -60,7 +171,7 @@ async function findList() {
|
|||
state.page = result.data.page;
|
||||
state.size = result.data.size;
|
||||
state.total = result.data.total;
|
||||
state.columns = result.data.columns;
|
||||
// state.columns = result.data.columns;
|
||||
state.data = result.data.dataSource;
|
||||
// state.visible = false;
|
||||
} catch (error) {
|
||||
|
|
@ -112,36 +223,29 @@ function exportExcel() {
|
|||
findList();
|
||||
}
|
||||
" @show-size-change="
|
||||
({ current, size }) => {
|
||||
state.page = current == 0 ? 1 : current;
|
||||
state.size = size;
|
||||
findList();
|
||||
}
|
||||
">
|
||||
({ current, size }) => {
|
||||
state.page = current == 0 ? 1 : current;
|
||||
state.size = size;
|
||||
findList();
|
||||
}
|
||||
">
|
||||
<!-- search -->
|
||||
<template #search>
|
||||
<a-form ref="refSearchForm" :model="state.search.vm" v-if="power.search">
|
||||
<a-row :gutter="[16, 0]">
|
||||
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<a-form-item class="mb-0" name="LevelName" label="等级名称">
|
||||
<a-input v-model:value="state.search.vm.levelName" placeholder="等级名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--button-->
|
||||
<a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="text-right">
|
||||
<a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="text-left">
|
||||
<a-space :size="8">
|
||||
<a-button @click="
|
||||
state.page = 1;
|
||||
refSearchForm?.resetFields();
|
||||
findList();
|
||||
">
|
||||
<a-button @click=" state.page = 1; refSearchForm?.resetFields(); findList();">
|
||||
重置
|
||||
</a-button>
|
||||
<a-button type="primary" @click="
|
||||
state.page = 1;
|
||||
findList();
|
||||
">
|
||||
<a-button type="primary" @click=" state.page = 1; findList();">
|
||||
查询
|
||||
</a-button>
|
||||
</a-space>
|
||||
|
|
@ -204,8 +308,17 @@ function exportExcel() {
|
|||
<template #table-col>
|
||||
<template v-for="item, index in state.columns.filter((w: any) => w.fieldName !== 'id' && w.show)"
|
||||
:key="item.fieldName">
|
||||
<a-table-column :title="item.title" :data-index="item.fieldName"
|
||||
:sorter="item.sort ? { multiple: index + 1 } : false" />
|
||||
<a-table-column :title="item.title" :data-index="item.fieldName" :customRender="item.customRender"
|
||||
:sorter="item.sort ? { multiple: index + 1 } : false">
|
||||
<template v-if="item.type == 'image'" #default="{ record }">
|
||||
<img :src="record[item.fieldName]" width="30" height="30" />
|
||||
</template>
|
||||
<template v-if="item.type == 'bool'" #default="{ record }">
|
||||
<a-tag color="success" v-if="record[item.fieldName]">启用</a-tag>
|
||||
<a-tag color="warning" v-else>禁用</a-tag>
|
||||
</template>
|
||||
|
||||
</a-table-column>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<a-table-column title="操作" data-index="id" v-if="power.update || power.delete" width="200px" fixed="right">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const props = defineProps<{ onSuccess: () => void }>();
|
|||
const state = reactive({
|
||||
vm: {
|
||||
id: "",
|
||||
form: {} as any,
|
||||
form: { isActive: true } as any,
|
||||
},
|
||||
visible: false,
|
||||
loading: false,
|
||||
|
|
@ -29,6 +29,7 @@ defineExpose({
|
|||
state.visible = true;
|
||||
if (state.visible) {
|
||||
state.vm.id = key;
|
||||
|
||||
}
|
||||
refForm.value?.resetFields();
|
||||
//初始化表单数据
|
||||
|
|
@ -108,13 +109,9 @@ function save() {
|
|||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
|
||||
<a-form-item label="状态" name="isActive"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
||||
<a-radio-group v-model:value="state.vm.form.isActive" name="radioGroup">
|
||||
<a-radio :value="true">启用</a-radio>
|
||||
<a-radio :value="false">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
<hm-active-status v-model:modelValue="state.vm.form.isActive" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user