wuyajie/daoyou_manage_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化文章管理接口及表单字段，增加预览功能

Browse Source
This commit is contained in:
钊钊 2024-12-17 16:08:36 +08:00
parent 7e320b8a68
commit bcab3dd8d0
5 changed files with 293 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/manage/article/index.ts
View File

@ -10,7 +10,7 @@ import { ArticleVO, ArticleForm, ArticleQuery } from '@/api/manage/article/types
export const listArticle = (query?: ArticleQuery): AxiosPromise<ArticleVO[]> => {
return request({
url: '/manage/article/list',
url: '/manage/content/list',
method: 'get',
params: query
});
@ -22,7 +22,7 @@ export const listArticle = (query?: ArticleQuery): AxiosPromise<ArticleVO[]> =>
*/
export const getArticle = (id: string | number): AxiosPromise<ArticleVO> => {
return request({
url: '/manage/article/' + id,
url: '/manage/content/' + id,
method: 'get'
});
};
@ -33,7 +33,7 @@ export const getArticle = (id: string | number): AxiosPromise<ArticleVO> => {
*/
export const addArticle = (data: ArticleForm) => {
return request({
url: '/manage/article',
url: '/manage/content',
method: 'post',
data: data
});
@ -45,7 +45,7 @@ export const addArticle = (data: ArticleForm) => {
*/
export const updateArticle = (data: ArticleForm) => {
return request({
url: '/manage/article',
url: '/manage/content',
method: 'put',
data: data
});
@ -57,7 +57,7 @@ export const updateArticle = (data: ArticleForm) => {
*/
export const delArticle = (id: string | number | Array<string | number>) => {
return request({
url: '/manage/article/' + id,
url: '/manage/content/' + id,
method: 'delete'
});
};

6
src/api/manage/article/types.ts
View File

@ -93,6 +93,8 @@ export interface ArticleVO {
}
export interface ArticleForm extends BaseEntity {
icon?: string;
regionCode?: string;
/**
* 景点名称 商家名称
*/
@ -132,12 +134,12 @@ export interface ArticleForm extends BaseEntity {
/**
* 开放/营业
*/
isOpen?: string;
isOpen?: string | number;
/**
* 景点属性/商家属性
*/
attribute?: string;
attribute?: string | number;
/**
* 状态 0-未发布 1-审核中 2-发布

4
src/components/noteList/index.vue
View File

@ -1,7 +1,7 @@
<!-- 笔记列表 -->
<template>
<div>
<el-table :height="props.autoTableHeight" v-loading="loading" :data="props.articleList" @selection-change="handleSelectionChange" border>
<el-table :height="props.autoTableHeight" v-loading="loading" :data="props.tableList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" v-if="props.parentName != 'dyUser'" />
<el-table-column label="ID" align="center" prop="id" v-if="props.parentName != 'dyUser'" />
<el-table-column label="笔记标题" align="center" prop="" />
@ -37,7 +37,7 @@ import { ref, reactive, onMounted, nextTick } from 'vue';
//导入父组件传递的值
const props = defineProps({
articleList: {
tableList: {
type: Array,
default: () => []
},

9
src/views/manage/noteManage/index.vue
View File

@ -1,3 +1,4 @@
<!-- 笔记管理 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
@ -90,10 +91,7 @@
<el-table-column label="操作时间" align="center" prop="updateTime" width="200px" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button v-hasPermi="['manage:notebook:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="发布" placement="top">
<el-tooltip content="修改" placement="top">
<el-button v-hasPermi="['manage:notebook:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
@ -128,7 +126,7 @@
</el-form-item>
</el-form>
<template #footer>
<div style="display: flex;justify-content: space-between">
<div style="display: flex; justify-content: space-between">
<div>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">预 览</el-button>
<el-button @click="cancel">存草稿</el-button>
@ -137,7 +135,6 @@
<el-button @click="cancel">取 消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">提 交</el-button>
</div>
</div>
</template>
</el-dialog>

302
src/views/manage/scenic/index.vue
View File

@ -13,8 +13,10 @@
</el-form-item>
<el-form-item label="发布状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable class="inputWidth">
<el-option label="已发布" value="1"></el-option>
<el-option label="未发布" value="0"></el-option>
<el-option label="审核中" value="1"></el-option>
<el-option label="已发布" value="2"></el-option>
<el-option label="草稿" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="景点等级" prop="level" v-if="queryParams.type == '0'">
@ -100,19 +102,19 @@
<el-button link type="primary" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="喜欢数量" align="center" prop="likeNumber" />
<el-table-column label="收藏数量" align="center" prop="collectNumber" />
<el-table-column label="相关笔记" align="center" prop="noteNumber">
<el-table-column label="喜欢数量" align="center" prop="likeCount" />
<el-table-column label="收藏数量" align="center" prop="collectionCount" />
<el-table-column label="相关笔记" align="center" prop="pubNotebookCount">
<template #default="scope">
<el-button link type="primary" @click="handleNote(scope.row)">{{ scope.row.noteNumber }}</el-button>
<el-button link type="primary" @click="handleNote(scope.row)">11{{ scope.row.noteNumber }}</el-button>
</template>
</el-table-column>
<el-table-column label="笔记评论数" align="center" prop="commentNumber" width="90px" />
<el-table-column label="笔记点赞数" align="center" prop="likeNoteNumber" width="90px" />
<el-table-column label="笔记评论数" align="center" prop="notebookCommentCount" width="90px" />
<el-table-column label="笔记点赞数" align="center" prop="notebookAgreeCount" width="90px" />
<!-- 0-未发布 1-审核中 2-发布 -->
<el-table-column label="发布状态" align="center" prop="status">
<template #default="scope">
<span>{{ scope.row.status == 0 ? '未发布' : scope.row.status == 1 ? '审核中' : '已发布' }}</span>
<span>{{ scope.row.status == 0 ? '未发布' : scope.row.status == 1 ? '审核中' : scope.row.status == 2 ? '已发布' : '草稿' }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="介绍" align="center" prop="intro" /> -->
@ -171,22 +173,52 @@
<el-col :span="12">
<el-form-item label="是否开放" prop="isOpen">
<el-radio-group v-model="form.isOpen">
<el-radio value="1" size="large">开放中</el-radio>
<el-radio value="0" size="large">未开放</el-radio>
<el-radio :value="1" size="large">开放中</el-radio>
<el-radio :value="0" size="large">未开放</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点icon' : '商家icon'" prop="icon">
<el-upload
class="upload-demo el-upload"
drag
:limit="1"
:headers="upload.headers"
:action="uploadImgUrl"
v-model:file-list="fileList_icon"
:on-success="(res, file) => returnContractSuccess('oss_icon', res, file)"
:on-preview="handlePictureCardPreview"
:on-remove="
(res, file) => {
handleRemove(res, file, 'oss_icon');
}
"
list-type="picture-card"
>
<el-icon class="el-icon--upload" :class="{}">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点属性' : '商家属性'" prop="attribute">
<el-checkbox v-model="form.attribute" :label="queryParams.type == '0' ? '标志性景点' : '标志性商家'" value="1" />
<!-- <el-checkbox v-model="form.attribute" :label="queryParams.type == '0' ? '标志性景点' : '标志性商家'" :value="1" /> -->
<el-radio-group v-model="form.attribute">
<el-radio :value="1" size="large">{{ queryParams.type == '0' ? '标志性景点' : '标志性商家' }}</el-radio>
<el-radio :value="0" size="large">{{ queryParams.type == '0' ? '非标志性景点' : '非标志性商家' }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签" prop="tagId">
<el-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable>
<el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="dict.id" />
<el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="String(dict.id)" />
</el-select>
</el-form-item>
</el-col>
@ -268,8 +300,122 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<el-button :loading="buttonLoading" @click="submitForm('preview')" style="float: left">预 览</el-button>
<el-button
:loading="buttonLoading"
@click="submitForm('draft')"
style="float: left"
v-if="form.status != '0' && form.status != '1' && form.status != '2'"
>存草稿</el-button
>
<el-button @click="cancel('submit')">取 消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm('submit')">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 图片预览 -->
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<!-- 预览弹层 -->
<el-dialog title="预览" v-model="previewVisible" width="900px" append-to-body>
<el-form ref="previewRef" :model="form" label-width="80px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点名称' : '商家名称'" prop="name">
<span>{{ form.name }}</span>
</el-form-item>
</el-col>
<el-col :span="12" v-if="queryParams.type == '0'">
<el-form-item label="景区等级" prop="level">
<span>{{ form.level }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="推荐语" prop="recommend">
<span>{{ form.recommend }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="orderNum">
<span>{{ form.orderNum }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="是否开放" prop="isOpen">
<span>{{ form.isOpen == 1 ? '开放中' : '未开放' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点icon' : '商家icon'" prop="icon">
<el-image :src="form.icon" class="avatar" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点属性' : '商家属性'" prop="attribute">
<span>{{ form.attribute == 1 ? '标志性' : '非标志性' }}</span>
<span>{{ queryParams.type == '0' ? '景点' : '商家' }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签" prop="tagId">
<el-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable>
<el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="String(dict.id)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="联系电话" prop="number">
<span>{{ form.number }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="详细地址" prop="address" style="margin-top: 15px">
<span>{{ form.address }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经度" prop="longitude">
<span>{{ form.longitude }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纬度" prop="latitude">
<span>{{ form.latitude }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}照片/视频`" prop="" label-width="110px">
<!-- <el-image v-for="item in fileList_1" :key="item" :src="item" class="avatar" /> -->
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}简介`" prop="intro">
<div v-html="form.intro"></div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel('preview')">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 相关笔记 -->
<el-dialog title="相关笔记" v-model="noteBookVisible" width="900px" append-to-body>
<noteList :autoTableHeight="300" :tableList="noteList" :type="queryParams.type" :id="form.id"></noteList>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel('noteBookVisible')">关 闭</el-button>
</div>
</template>
</el-dialog>
@ -301,12 +447,16 @@ const multiple = ref(true);
const total = ref(0);
const sys_user_tagOptions = ref([]); //标签库
const fileList_1 = ref<UploadUserFile[]>([]);
const fileList_icon = ref<UploadUserFile[]>([]);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const noteList = ref([]); // 相关笔记列表
const previewRef = ref(null);
const previewVisible = ref(false); //预览弹层
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const upload = reactive({
@ -335,10 +485,11 @@ const initFormData: ArticleForm = {
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: '0',
attribute: null,
status: undefined,
province: '海南省',
city: '东方市',
province: '',
city: '',
regionCode: '',
remark: undefined,
memberLevel: undefined,
tagId: undefined,
@ -349,7 +500,19 @@ const initFormData: ArticleForm = {
latitude: undefined,
orderNum: 0,
level: 0,
mediaBoList: undefined
mediaBoList: undefined,
icon: undefined
};
const checkIcon = (rule: any, value: any, callback: any) => {
value = form.value.icon;
console.log(value, form.value);
if (!value) {
callback();
// return callback(new Error('请上传商家或景点icon'));
} else {
callback();
}
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
queryParams: {
@ -379,9 +542,9 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
number: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
icon: [{ required: false, validator: checkIcon, trigger: 'change' }],
isOpen: [{ required: true, message: '请选择开放状态', trigger: 'change' }],
attribute: [{ required: false, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
// remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
// memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
@ -394,7 +557,6 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
intro: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const map = ref(null);
const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
@ -467,9 +629,18 @@ const performSearch = async (text) => {
if (data.status == 0) {
center.value.lat = data.result.location.lat;
center.value.lng = data.result.location.lng;
form.value.address = data.result.address;
form.value.address =
data.result.address_components.province +
data.result.address_components.city +
data.result.address_components.district +
data.result.address_components.street +
data.result.address_components.street_number;
form.value.latitude = data.result.location.lat;
form.value.longitude = data.result.location.lng;
form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
// form.value.province = data.result.address_components.province;
// form.value.city = data.result.address_components.city;
geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
} else if (data.status == 348) {
//地址信息不明确，需弹出提示
@ -487,9 +658,17 @@ const onClick = (e: any) => {
).then((data) => {
if (data.status == 0) {
if (form.value) {
form.value.address = data.result.address;
form.value.address =
data.result.address_component.province +
data.result.address_component.city +
data.result.address_component.district +
data.result.address_component.street +
data.result.address_component.street_number;
form.value.latitude = data.result.location.lat;
form.value.longitude = data.result.location.lng;
// form.value.province = data.result.address_component.province;
// form.value.city = data.result.address_component.city;
form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
center.value.lat = data.result.location.lat;
center.value.lng = data.result.location.lng;
searchLocation.value = data.result.formatted_addresses.recommend;
@ -510,13 +689,22 @@ const getList = async () => {
};
/** 取消按钮 */
const cancel = () => {
reset();
const cancel = (type: string) => {
reset(type);
if (type == 'preview') {
previewVisible.value = false;
return;
}
dialog.visible = false;
noteBookVisible.value = false;
};
/** 表单重置 */
const reset = () => {
const reset = (type: string = '') => {
if (type == 'preview') {
previewRef.value?.resetFields();
return;
}
searchLocation.value = '';
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
@ -597,18 +785,56 @@ const handleUpdate = async (row?: ArticleVO) => {
center.value = { lat: row.latitude, lng: row.longitude };
geometries.value = [{ styleId: 'marker', position: { lat: row.latitude, lng: row.longitude } }];
};
/**
*
* @param row 预览详情
*/
const handleDetail = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
previewVisible.value = true;
};
/**
*
* @param row 相关笔记
*/
const noteBookVisible = ref(false);
const handleNote = async (row?: ArticleVO) => {
console.log(row);
noteBookVisible.value = true;
};
/** 新增景点，商家提交按钮 */
const submitForm = () => {
const submitForm = async (type: string) => {
form.value.type = queryParams.value.type;
if (type == 'draft') {
// 存草稿，不验证必填项
form.value.status = '3'; //草稿状态为3
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
return;
}
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (!form.value.attribute) {
form.value.attribute = '0';
} else if (form.value.attribute == true) {
form.value.attribute = '1';
if (type == 'preview') {
//预览
previewVisible.value = true;
return;
}
form.value.type = queryParams.value.type;
buttonLoading.value = true;
// if (!form.value.attribute) {
// form.value.attribute = 0;
// } else if (form.value.attribute == true) {
// form.value.attribute = 0;
// }
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
@ -657,12 +883,16 @@ const returnContractSuccess = (type: string, response: any, uploadFile: UploadFi
// console.log(type, response, uploadFile);
if (response.code == 200) {
proxy?.$modal.msgSuccess('上传成功');
if (type == 'oss_1') {
let typeFlag = false;
let obj = {
mediaType: type,
mediaOssId: response.data.ossId
};
form.value.mediaBoList.push(obj);
} else if (type == 'oss_icon') {
form.value.icon = response.data.ossId;
}
}
};
/**
@ -681,11 +911,15 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
*/
const handleRemove = (uploadFile, uploadFiles, type) => {
console.log(uploadFile, uploadFiles, type);
if (type == 'oss_1') {
form.value.mediaBoList.forEach((item, index) => {
if (type == item.mediaType) {
form.value.mediaBoList.splice(index, 1);
}
});
} else if (type == 'oss_icon') {
form.value.icon = '';
}
};
</script>
<style lang="scss" scoped>