|
|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <Dialog :title="dialogTitle" v-model="dialogVisible">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ label-width="140px"
|
|
|
+ v-loading="formLoading"
|
|
|
+ >
|
|
|
+ <el-form-item label="上传图片尺寸" prop="imgSize" required>
|
|
|
+ <el-input v-model="formData.imgSize" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="url" required>
|
|
|
+ <UploadImg v-model="formData.url" height="150px" width="300px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="点击图片跳转链接" prop="link">
|
|
|
+ <el-input v-model="formData.link" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="formData.title" placeholder="请填写" />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="排序" prop="sort">
|
|
|
+ <el-input v-model="formData.sort" />
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { WebContentApi } from '@/api/menduner/system/web'
|
|
|
+
|
|
|
+/** 页面内容 表单 */
|
|
|
+defineOptions({ name: 'WebContentForm' })
|
|
|
+
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+
|
|
|
+const formData = ref({
|
|
|
+ imgSize: '',
|
|
|
+ link: '',
|
|
|
+ title: '',
|
|
|
+ // sort: 0,
|
|
|
+ url: ''
|
|
|
+})
|
|
|
+const imgSizeList = {
|
|
|
+ 'pcLeft': '宽528px*高919px',
|
|
|
+ 'pcAdvertisement': '宽900px*高530px',
|
|
|
+ 'pcHomeCarousel': '宽792px*高392px',
|
|
|
+ 'pcLoginCarousel': '宽792px*高392px',
|
|
|
+ 'appHomeCarousel': '宽750px*高350px',
|
|
|
+ 'appAdvertisement': '宽331px*高442px'
|
|
|
+}
|
|
|
+const editId = ref('')
|
|
|
+const formType = ref('')
|
|
|
+const currentKey = ref('')
|
|
|
+const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
+const dialogTitle = ref('') // 弹窗的标题
|
|
|
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
+const query = ref({
|
|
|
+ id: undefined,
|
|
|
+ pcTop: undefined,
|
|
|
+ pcLeft: undefined,
|
|
|
+ pcRight: undefined,
|
|
|
+ pcAdvertisement: undefined,
|
|
|
+ pcHomeCarousel: undefined,
|
|
|
+ pcLoginCarousel: undefined,
|
|
|
+ pcLoginBackground: undefined,
|
|
|
+ pcBackendAdvertisement: undefined,
|
|
|
+ appHomeCarousel: undefined,
|
|
|
+ appAdvertisement: undefined,
|
|
|
+ status: undefined
|
|
|
+})
|
|
|
+
|
|
|
+const formRules = reactive({
|
|
|
+ url: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
|
|
|
+})
|
|
|
+const formRef = ref() // 表单 Ref
|
|
|
+
|
|
|
+/** 打开弹窗 */
|
|
|
+const open = async (type: string, key: string, title: string, mark?: string) => {
|
|
|
+ formType.value = type
|
|
|
+ resetForm()
|
|
|
+ currentKey.value = key
|
|
|
+ dialogVisible.value = true
|
|
|
+ dialogTitle.value = title + (type === 'add' ? '新增' : '编辑')
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ query.value = await WebContentApi.getWebContent(1)
|
|
|
+ // 编辑
|
|
|
+ if (mark) {
|
|
|
+ editId.value = mark
|
|
|
+ const { img: url, link, title } = query.value[key].find(e => e.mark === mark)
|
|
|
+ formData.value = { url, link, title }
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+ formData.value.imgSize = imgSizeList[key]
|
|
|
+}
|
|
|
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
+
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
+const submitForm = async () => {
|
|
|
+ // 校验表单
|
|
|
+ await formRef.value.validate()
|
|
|
+
|
|
|
+ const mark = new Date().getTime().toString()
|
|
|
+ const obj = { img: formData.value.url, link: formData.value.link, mark, title: formData.value.title }
|
|
|
+ if (formType.value === 'add') {
|
|
|
+ query.value[currentKey.value] = query.value[currentKey.value] ? [...query.value[currentKey.value], obj] : [obj]
|
|
|
+ } else {
|
|
|
+ const index = query.value[currentKey.value].findIndex(e => e.mark === editId.value)
|
|
|
+ if (index === -1) return
|
|
|
+ query.value[currentKey.value][index] = obj
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交请求
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ await WebContentApi.updateWebContent(query.value)
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置表单 */
|
|
|
+const resetForm = () => {
|
|
|
+ editId.value = ''
|
|
|
+ query.value = {
|
|
|
+ id: undefined,
|
|
|
+ pcTop: undefined,
|
|
|
+ pcLeft: undefined,
|
|
|
+ pcRight: undefined,
|
|
|
+ pcAdvertisement: undefined,
|
|
|
+ pcHomeCarousel: undefined,
|
|
|
+ pcLoginCarousel: undefined,
|
|
|
+ pcLoginBackground: undefined,
|
|
|
+ pcBackendAdvertisement: undefined,
|
|
|
+ appHomeCarousel: undefined,
|
|
|
+ appAdvertisement: undefined,
|
|
|
+ status: undefined
|
|
|
+ }
|
|
|
+ formData.value = {
|
|
|
+ imgSize: '',
|
|
|
+ link: '',
|
|
|
+ title: '',
|
|
|
+ url: '',
|
|
|
+ // sort: 0
|
|
|
+ }
|
|
|
+ formRef.value?.resetFields()
|
|
|
+}
|
|
|
+</script>
|
Xiao_123