This commit is contained in:
2025-05-12 19:45:18 +08:00
parent 396fd4b934
commit 4f1946e790
9 changed files with 119 additions and 29 deletions

View File

@@ -1,6 +1,8 @@
<script setup> <script setup>
import {onMounted, reactive} from 'vue'; import {onMounted, reactive} from 'vue';
import Api from "../../api/index.js"; import Api from "../../api/index.js";
import XSelect from "../XSelect/index.vue";
import UploadAvatar from "../upload/UploadAvatar.vue";
const group = reactive([]); const group = reactive([]);
@@ -17,6 +19,16 @@ onMounted(() => {
group.push(...data); group.push(...data);
}) })
}) })
const getSingle = async () => {
const {data} = await Api.admin.getSingleList();
return {
data: data.list.map(v => ({
id: v.id,
name: v.title
}))
}
}
</script> </script>
<template> <template>
@@ -33,6 +45,27 @@ onMounted(() => {
<a-form-item label="url路径" v-if="[1,3,4].includes(form.type)"> <a-form-item label="url路径" v-if="[1,3,4].includes(form.type)">
<a-input v-model:model-value="form.url" placeholder="请输入url路径"></a-input> <a-input v-model:model-value="form.url" placeholder="请输入url路径"></a-input>
</a-form-item> </a-form-item>
<a-form-item v-if="form.type === 2" label="富文本内容">
<XSelect
v-model:model-value="form.single_id"
:init="true"
:api="getSingle"
placeholder="请选择二级分类">
</XSelect>
</a-form-item>
<a-form-item v-if="form.type === 5" label="弹窗内容">
<a-radio-group v-model:model-value="form.pop_type">
<a-radio :value="1">图片</a-radio>
<a-radio :value="2">视频</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item v-if="form.type === 5">
<UploadAvatar v-if="form.pop_type===1" v-model:files="form.pop_images"></UploadAvatar>
<UploadAvatar v-else v-model:files="form.pop_video" :multiple="false"></UploadAvatar>
</a-form-item>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import {reactive} from "vue"; import {onMounted, reactive} from "vue";
const {api, fieldName, apiPo} = defineProps({ const {api, fieldName, apiPo, init} = defineProps({
api: { api: {
type: Function, type: Function,
default: async () => { default: async () => {
@@ -15,6 +15,10 @@ const {api, fieldName, apiPo} = defineProps({
fieldName: { fieldName: {
type: Object, type: Object,
default: {value: 'id', label: 'name'}, default: {value: 'id', label: 'name'},
},
init: {
type: Boolean,
default: false,
} }
}); });
const list = reactive([]); const list = reactive([]);
@@ -27,6 +31,13 @@ const popupChange = async (visible) => {
}); });
} }
} }
onMounted(() => {
if (init) api && api(apiPo).then(({data}) => {
list.length = 0;
list.push(...data);
});
});
</script> </script>
<template> <template>

View File

@@ -2,7 +2,7 @@
import XImage from "../XImage/Index.vue"; import XImage from "../XImage/Index.vue";
import Api from "../../api/index.js"; import Api from "../../api/index.js";
const {size, api} = defineProps({ const {size, api, multiple} = defineProps({
size: { size: {
type: String, type: String,
default: '60px' default: '60px'
@@ -10,14 +10,23 @@ const {size, api} = defineProps({
api: { api: {
type: Function, type: Function,
default: Api.system.uploadFile, default: Api.system.uploadFile,
},
multiple: {
type: Boolean,
default: true,
} }
}); });
const files = defineModel('files'); const files = defineModel('files');
const emits = defineEmits(['success']); const emits = defineEmits(['success']);
const beforeUpload = (file) => { const beforeUpload = (file) => {
api(file).then(({data}) => { api && api(file).then(({data}) => {
files.value.push(data); console.log(files.value);
if (!multiple) {
files.value = [data];
} else {
files.value.push(data);
}
emits('success', data); emits('success', data);
}); });
return false; return false;
@@ -26,7 +35,8 @@ const beforeUpload = (file) => {
<template> <template>
<div class="flex flex-wrap gap-[15px]"> <div class="flex flex-wrap gap-[15px]">
<a-upload :style="{width: size,height: size}" @before-upload="beforeUpload" multiple> <a-upload v-if="!(!multiple && files.length >= 1)" :style="{width: size,height: size}"
@before-upload="beforeUpload" :multiple="multiple">
<template #upload-button> <template #upload-button>
<div class="upload-button test"> <div class="upload-button test">
<IconPlus/> <IconPlus/>

View File

@@ -20,11 +20,20 @@ const visible = ref(false);
watch( watch(
() => visible.value, () => visible.value,
(val) => { (val) => {
if (val) Object.assign(form, detail); if (val) {
Object.assign(form, detail);
if (form.single_id === 0) form.single_id = null;
if (form.pop_type === 0) form.pop_type = 1;
}
} }
) )
const form = reactive({ const form = reactive({
file: null, file: null,
files: [],
pop_images: [],
pop_video: [],
single_id: null,
pop_type: 1,
type: 0, type: 0,
}); });

View File

@@ -16,6 +16,11 @@ const form = reactive({
title: null, title: null,
content: null, content: null,
type: null, type: null,
files: [],
pop_images: [],
pop_video: [],
single_id: null,
pop_type: 1,
url: null, url: null,
id: null, id: null,
}); });

View File

@@ -4,6 +4,7 @@ import {reactive, ref, watch} from 'vue';
import XSelect from "../../../../../../../components/XSelect/index.vue"; import XSelect from "../../../../../../../components/XSelect/index.vue";
import Api from "../../../../../../../api/index.js"; import Api from "../../../../../../../api/index.js";
import {Message} from "@arco-design/web-vue"; import {Message} from "@arco-design/web-vue";
import UploadAvatar from "../../../../../../../components/upload/UploadAvatar.vue";
const emits = defineEmits(['success']); const emits = defineEmits(['success']);
const {pid, detail} = defineProps({ const {pid, detail} = defineProps({
@@ -20,6 +21,11 @@ const visible = ref(false);
const form = reactive({ const form = reactive({
type: null, type: null,
files: [],
pop_images: [],
pop_video: [],
single_id: null,
pop_type: 1,
title: null, title: null,
category_id: null, category_id: null,
content: null, content: null,
@@ -28,7 +34,11 @@ const form = reactive({
watch( watch(
() => visible.value, () => visible.value,
(val) => { (val) => {
if (val) Object.assign(form, detail); if (val) {
Object.assign(form, detail);
if (form.single_id === 0) form.single_id = null;
if (form.pop_type === 0) form.pop_type = 1;
}
} }
) )
@@ -58,7 +68,7 @@ const success = async () => {
<a-modal <a-modal
@ok="success" @ok="success"
title="新增常见问题" :title="`${detail.id ? '编辑' : '新增'}基础教学`"
title-align="start" title-align="start"
v-model:visible="visible"> v-model:visible="visible">
<a-form <a-form
@@ -67,11 +77,18 @@ const success = async () => {
<a-form-item label="二级分类"> <a-form-item label="二级分类">
<XSelect <XSelect
v-model:model-value="form.category_id" v-model:model-value="form.category_id"
:init="true"
:api="Api.admin.getArticleCategoryList2" :api="Api.admin.getArticleCategoryList2"
:api-po="{pid}" :api-po="{pid}"
placeholder="请选择二级分类"> placeholder="请选择二级分类">
</XSelect> </XSelect>
</a-form-item> </a-form-item>
<a-form-item label="封面">
<UploadAvatar
:multiple="false"
v-model:files="form.files">
</UploadAvatar>
</a-form-item>
<a-form-item label="标题"> <a-form-item label="标题">
<a-input v-model:model-value="form.title" placeholder="请输入标题"></a-input> <a-input v-model:model-value="form.title" placeholder="请输入标题"></a-input>
</a-form-item> </a-form-item>

View File

@@ -56,7 +56,7 @@ const success = async () => {
<a-modal <a-modal
@ok="success" @ok="success"
title="新增常见问题" title="新增"
title-align="start" title-align="start"
v-model:visible="visible"> v-model:visible="visible">
<a-form <a-form
@@ -65,6 +65,7 @@ const success = async () => {
<a-form-item label="二级分类"> <a-form-item label="二级分类">
<XSelect <XSelect
v-model:model-value="form.category_id" v-model:model-value="form.category_id"
:init="true"
:api="Api.admin.getArticleCategoryList2" :api="Api.admin.getArticleCategoryList2"
:api-po="{pid}" :api-po="{pid}"
placeholder="请选择二级分类"> placeholder="请选择二级分类">

View File

@@ -13,6 +13,10 @@ const {maxClass, pid, detail} = defineProps({
detail: { detail: {
type: Object, type: Object,
default: {}, default: {},
},
maxClass: {
type: Number,
default: 1,
} }
}); });
@@ -30,19 +34,17 @@ watch(
) )
const getData = async () => { const getData = async () => {
return new Promise((resolve) => { return Promise.resolve({
resolve({ data: [
data: [ {
{ id: 1,
id: 1, name: '常见问题',
name: '常见问题', },
}, {
{ id: 2,
id: 2, name: '基础教学',
name: '基础教学', },
}, ]
]
});
}) })
} }
@@ -86,11 +88,13 @@ const success = async () => {
:model="form"> :model="form">
<a-form-item label="一级分类"> <a-form-item label="一级分类">
<XSelect <XSelect
:init="true"
:default-value="maxClass" :default-value="maxClass"
:api="getData" :api="getData"
placeholder="请选择二级分类" placeholder="请选择二级分类"
:disabled="true"> :disabled="true">
</XSelect> </XSelect>
{{ maxClass }}
</a-form-item> </a-form-item>
<a-form-item label="二级分类名称"> <a-form-item label="二级分类名称">
<a-input v-model:model-value="form.name" placeholder="请输入二级分类名称"></a-input> <a-input v-model:model-value="form.name" placeholder="请输入二级分类名称"></a-input>

View File

@@ -40,8 +40,8 @@ const success = () => {
<a-input-number v-model:model-value="po.retention_time" placeholder="请输入保留时间" :min="1" <a-input-number v-model:model-value="po.retention_time" placeholder="请输入保留时间" :min="1"
:max="60"></a-input-number> :max="60"></a-input-number>
<a-radio-group v-model:model-value="po.retention_type" type="button" class="ml-[10px] flex-shrink-0"> <a-radio-group v-model:model-value="po.retention_type" type="button" class="ml-[10px] flex-shrink-0">
<a-radio :value="0">分钟</a-radio> <a-radio :value="1">分钟</a-radio>
<a-radio :value="1">小时</a-radio> <a-radio :value="2">小时</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
@@ -49,8 +49,8 @@ const success = () => {
<a-input-number v-model:model-value="po.check_time" placeholder="请输入保留时间" :min="1" <a-input-number v-model:model-value="po.check_time" placeholder="请输入保留时间" :min="1"
:max="60"></a-input-number> :max="60"></a-input-number>
<a-radio-group v-model:model-value="po.check_type" type="button" class="ml-[10px] flex-shrink-0"> <a-radio-group v-model:model-value="po.check_type" type="button" class="ml-[10px] flex-shrink-0">
<a-radio :value="0">分钟</a-radio> <a-radio :value="1">分钟</a-radio>
<a-radio :value="1">小时</a-radio> <a-radio :value="2">小时</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
@@ -71,8 +71,8 @@ const success = () => {
<a-input v-model:model-value="po.back_time" placeholder="请说入时间"></a-input> <a-input v-model:model-value="po.back_time" placeholder="请说入时间"></a-input>
<a-radio-group v-model:model-value="po.back_type" type="button" <a-radio-group v-model:model-value="po.back_type" type="button"
class="ml-[10px] flex-shrink-0"> class="ml-[10px] flex-shrink-0">
<a-radio :value="0">分钟</a-radio> <a-radio :value="1">分钟</a-radio>
<a-radio :value="1">小时</a-radio> <a-radio :value="2">小时</a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-form> </a-form>