hjq/aircraft-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

素材管理接口对接

Browse Source
This commit is contained in:
Double-_-Z 2025-07-16 11:33:44 +08:00
parent 8a48837db7
commit f177373e0e
9 changed files with 205 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/platform/material.js
View File

@ -2,23 +2,22 @@ import request from '@/utils/request'
export function add(data) {
return request({
url: 'api/material',
url: 'aerocraftAdminApi/cpMaterial',
method: 'post',
data
})
}
export function del(ids) {
export function del(id) {
return request({
url: 'api/material',
method: 'delete',
data: ids
url: `aerocraftAdminApi/cpMaterial/${id}`,
method: 'delete'
})
}
export function edit(data) {
return request({
url: 'api/material',
url: 'aerocraftAdminApi/cpMaterial',
method: 'put',
data
})

9
src/api/system/area.js
View File

@ -2,23 +2,22 @@ import request from '@/utils/request'
export function add(data) {
return request({
url: 'api/area',
url: 'aerocraftAdminApi/emArea',
method: 'post',
data
})
}
export function del(ids) {
export function del(id) {
return request({
url: 'api/area',
url: `aerocraftAdminApi/emArea/${id}`,
method: 'delete',
data: ids
})
}
export function edit(data) {
return request({
url: 'api/area',
url: 'aerocraftAdminApi/emArea',
method: 'put',
data
})

9
src/api/system/customer.js
View File

@ -2,23 +2,22 @@ import request from '@/utils/request'
export function add(data) {
return request({
url: 'api/customer',
url: 'api/cnCustomer',
method: 'post',
data
})
}
export function del(ids) {
export function del(id) {
return request({
url: 'api/customer',
url: `api/cnCustomer/${id}`,
method: 'delete',
data: ids
})
}
export function enable(data) {
return request({
url: 'api/customer',
url: 'api/cnCustomer',
method: 'put',
data
})

9
src/components/Crud/crud.js
View File

@ -40,6 +40,7 @@ function CRUD(options) {
edit: (form) => {},
get: (id) => {}
},
initData: null,
// 主页操作栏显示哪些按钮
optShow: {
add: true,
@ -135,8 +136,12 @@ function CRUD(options) {
table.store.states.treeData = {}
table.store.states.lazyTreeNodeMap = {}
}
crud.page.total = data.totalElements
crud.data = data.content
if(crud.initData){
crud.initData(crud,data);
}else{
crud.page.total = data.totalElements
crud.data = data.content
}
crud.resetDataStatus()
// time 毫秒后显示表格
setTimeout(() => {

18
src/components/WangEditor/index.vue
View File

@ -7,7 +7,7 @@
:default-config="toolbarConfig"
:mode="editMode"
/>
<div v-else class="replace" v-if="disableShowFullscreen">
<div v-else class="replace">
<i class="full el-icon-full-screen" @click="openCurrenFullscreen" />
</div>
<Editor
@ -62,11 +62,24 @@ export default {
async customUpload(file, insertFn) { // JS 语法
upload(_this.imagesUploadApi, file).then(res => {
const data = res.data
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
const url = _this.baseApi + '/file/图片/' + data.newFileName
// 最后插入图片
insertFn(url, '', '')
})
}
},
'uploadVideo': {
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
// 自定义上传
async customUpload(file, insertFn) { // JS 语法
upload(_this.fileUploadApi, file).then(res => {
const data = res.data
const url = _this.baseApi + '/file/视频/' + data.newFileName
// 最后插入视频
insertFn(url, '', '')
})
}
}
}},
editMode: 'default',
@ -78,6 +91,7 @@ export default {
computed: {
...mapGetters([
'imagesUploadApi',
'fileUploadApi',
'baseApi'
])
},

97
src/views/platform/article/add.vue
View File

@ -27,15 +27,15 @@
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="模块名称：" prop="moduleName">
<el-select size="default" @change="handleChangeModule" v-model="form.moduleName" placeholder="请选择模块" clearable>
<el-select size="default" @change="getLabels" v-model="form.moduleName" placeholder="请选择模块" clearable>
<el-option :data-op="item.id" v-for="(item,index) in moduleList" :key="index" :label="item.moduleName" :value="item.moduleName"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标签名称：" prop="labelName">
<el-select size="default" v-model="form.labelName" placeholder="请选择标签" clearable class="ml10">
<el-option v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
<el-select @change="handleChangeLabel" size="default" v-model="form.labelName" placeholder="请选择标签" clearable class="ml10">
<el-option :data-op="item.id" v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
@ -45,8 +45,8 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="文章类型：" prop="articletype">
<el-select size="default" v-model="form.articletype" placeholder="请选择文章类型" clearable>
<el-form-item label="文章类型：" prop="articleType">
<el-select size="default" v-model="form.articleType" placeholder="请选择文章类型" clearable>
<el-option label="图文" :value="0"></el-option>
</el-select>
</el-form-item>
@ -81,6 +81,11 @@
</template>
<script>
import WangEditor from '@/components/WangEditor/index'
import { add, edit } from '@/api/platform/article'
import { all } from '@/api/platform/module'
import { tree } from '@/api/platform/label'
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
export default {
name: 'ArticleAdd',
name: 'ArticleEdit',
@ -109,26 +114,22 @@ export default {
labelName: '',
moduleName: '',
title: '',
articletype: '',
articleType: '',
photo: '',
text: '',
top: false,// 是否置顶，这里提交的时候要换成0或1
cplabelId: '',
fileArray:[]// 编辑进来时，如果已经上传了图片，则保存图片地址
},
// 模块列表
moduleList:[
{ moduleName: '景区', moduleName: '景区' },
{ moduleName: '新闻', moduleName: '新闻' },
{ moduleName: '活动', moduleName: '活动' },
{ moduleName: '其他', moduleName: '其他' }
],
moduleList:[],
// 标签列表
labelList: [],
rules:{
moduleName: { required: true, message: '请选择模块', trigger: 'change' },
labelName: { required: true, message: '请输入标签名称', trigger: 'blur' },
title: { required: true, message: '请输入标题', trigger: 'blur' },
articletype: { required: true, message: '请选择文章类型', trigger: 'change' },
articleType: { required: true, message: '请选择文章类型', trigger: 'change' },
top: { required: true, message: '请选择是否置顶', trigger: 'blur' },
text: { required: true, trigger: 'blur', validator: validText },
fileArray: { required: true, message: '请上传封面图', trigger: 'change' },
@ -141,11 +142,18 @@ export default {
disabled: false,
}
},
computed: {
...mapGetters([
'imagesUploadApi',
'baseApi'
])
},
created(){
const { moduleName, labelName, id } = this.$route.query;
if(moduleName && labelName && !this.isAdd) {
this.getArticleDetailById(id);
}
this.getModules();
},
methods: {
// 封面图片更改
@ -163,6 +171,7 @@ export default {
// 封面删除
handleRemove(file) {
this.coverFile = {};
this.form.fileArray = [];
this.$refs['uploadRef'].clearFiles();
this.coverHide = false;
},
@ -172,23 +181,24 @@ export default {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 模块选择
async handleChangeModule(val) {
try {
this.form.labelName = '';
if(!val){this.labelList=[]; return;}
this.labelList = [{name: '测试'},{name: '测试2'}];
// const op = event?.currentTarget;
// let res = await artApi.getLabelList(op.dataset.op);
// if(res?.success){
// labelList.value = res.data;
// }else{
// ElMessage.error('标签列表获取失败！');
// }
} catch (error) {
this.$message.error('标签列表获取失败！');
} finally {
}
// 查询模块
getModules(){
all().then(res => {
this.moduleList = res;
})
},
// 根据模块id查询标签
getLabels(val){
this.form.labelName = '';
if(!val){this.labelList=[]; this.form.cplabelId = '';return;}
const op = event.currentTarget;
tree(op.dataset.op).then(res => {
this.labelList = res;
});
},
// 标签选择
handleChangeLabel(val){
this.form.cplabelId = val ? event.currentTarget.dataset.op : '';
},
// 获取文章详情-根据id
async getArticleDetailById(id){
@ -213,7 +223,7 @@ export default {
moduleName: moduleName,
labelName: labelName,
title: '测试标题',
articletype: 0,
articleType: 0,
photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
text: '测试内容',
top: false,
@ -233,14 +243,27 @@ export default {
},
// 保存
onSubmitForm(){
console.log(this.form.text);
console.log(this.form);
this.$refs['articleFormRef'].validate(async(valid) => {
if (valid) {
// let res = await this.$http.post('/api/article/add', this.articleForm);
// if(res.code == 200){
this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
this.cancel();
// }
const articleForm = {...this.form};
articleForm.top = articleForm.top ? 1 : 0;
upload(this.imagesUploadApi, articleForm.fileArray[0].raw).then(res => {
if(res.status === 200){
const data = res.data;
const url = this.baseApi+'/file/图片/' + data.newFileName;
articleForm.photo = url;
delete articleForm.fileArray;
const ft = this.isAdd? add : edit;
ft(articleForm).then(res => {
this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
this.cancel();
})
}else{
this.$message.error('新增文章失败');
return;
}
});
}else{
this.$message.error('请完善信息！');
}

104
src/views/platform/material/index.vue
View File

@ -39,15 +39,15 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="素材资源" prop="files">
<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{ disabled: uploadDisabled }" :disabled="!form.type"
:limit="1" :file-list="form.files" :on-change="handleChange" :auto-upload="false" :accept="form.type === '轮播图'?'image/*':'viedo/*'">
<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{ disabled: uploadDisabled }" :disabled="!form.type" :style="{ opacity: !form.type ? '0.5' : '1' }"
:limit="1" :file-list="form.files" :on-change="handleChange" :auto-upload="false" :accept="Number(form.type) === 1?'image/*':'viedo/*'">
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: -20px;">
<i class="el-icon-plus" style="font-size: 30px;" />
<span style="margin: 5px 0 -20px;line-height: 20px">上传</span>
</div>
<template #file="{ file }">
<div>
<img v-if="form.type === '轮播图'" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<img v-if="Number(form.type) === 1" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<video preload="meta" v-else class="el-upload-list__item-thumbnail" :src="file.url">
您的浏览器不支持视频预览。
</video>
@ -64,7 +64,7 @@
</el-upload>
<el-dialog append-to-body :visible.sync="dialogVisible" top="20vh">
<div>
<img v-if="form.type === '轮播图'" :src="dialogImageUrl" style="width: 100%" alt="Preview Image">
<img v-if="Number(form.type) === 1" :src="dialogImageUrl" style="width: 100%" alt="Preview Image">
<video controls v-else src="el-upload-list__item-thumbnail" style="width: 100%"
:src="dialogImageUrl" preload="meta">
您的浏览器不支持视频预览。
@ -75,38 +75,40 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="跳转链接">
<el-input v-model="form.link" type="url" placeholder="请输入跳转链接"/>
<el-input v-model="form.url" type="url" placeholder="请输入跳转链接"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="排序号" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="1" placeholder="请输入排序号"/>
<el-form-item label="排序号" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="1" placeholder="请输入排序号"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="margin-top: -30px;">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">新增</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="name" label="素材名称" />
<el-table-column :show-overflow-tooltip="true" prop="url" label="素材资源">
<el-table-column :show-overflow-tooltip="true" prop="name" label="素材名称" align="center" />
<el-table-column prop="path" label="素材资源" align="center">
<template slot-scope="scope">
<el-image v-if="scope.row.type == '轮播图'" style="width: 100px;height: 100px;" :src="scope.row.url" :preview-src-list="[scope.row.url]"></el-image>
<video controls width="100px" height="100px" :src="scope.row.url" v-else preload="meta" />
<el-image v-if="Number(scope.row.type) === 1" style="width: 100px;height: 100px;" :src="baseApi+scope.row.path" :preview-src-list="[baseApi+scope.row.path]"></el-image>
<video controls width="100px" height="100px" :src="baseApi+scope.row.path" v-else preload="meta" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="type" label="素材类型" />
<el-table-column :show-overflow-tooltip="true" prop="link" label="跳转地址">
<el-table-column :show-overflow-tooltip="true" prop="type" label="素材类型" align="center"
:formatter="(row) => { return dict.material_type.find(item => Number(item.value) === row.type).label}" />
<el-table-column :show-overflow-tooltip="true" prop="url" label="跳转地址" align="center">
<template slot-scope="scope">
<el-link :href="scope.row.link" target="_blank">{{ scope.row.link }}</el-link>
<el-link v-if="scope.row.url" :href="scope.row.url" target="_blank">{{ scope.row.url }}</el-link>
<div v-else>暂无</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="sort" label="排序号" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" />
<el-table-column :show-overflow-tooltip="true" prop="orderNum" label="排序号" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" align="center" />
<el-table-column v-if="checkPer(['admin', 'material:edit', 'material:del'])" label="操作" align="center"
fixed="right">
<template slot-scope="scope">
@ -124,14 +126,21 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { name: null, url: null, type: null, link: null, sort: null, files: [] }
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
const defaultForm = { name: null, path: null, type: null, url: null, orderNum: null, files: [] }
export default {
name: 'Material',
components: { rrOperation, pagination, udOperation },
// 数据字典
dicts: ['material_type'],
cruds() {
return CRUD({ title: '素材', url: 'api/material', crudMethod: { ...crudMaterial }, optShow: { add: true, reset: true }})
return CRUD({ title: '素材', url: '/aerocraftAdminApi/cpMaterial', crudMethod: { ...crudMaterial }, optShow: { add: true, reset: true },
// 查询获取data后操作
initData:(crud,data)=>{
crud.page.total = data.total
crud.data = data.records
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
@ -155,17 +164,18 @@ export default {
files: [
{ required: true, message: '请上传文件', trigger: 'change' },
],
sort: [
orderNum: [
{ required: true, message: '请输入排序号', trigger: 'blur', type: 'number' }
],
}
}
},
created() {
this.crud.data = [{ id: 1, name: '景区', type: '轮播图', url: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png', link: 'http://baidu.com', sort: 1, createTime: '2020-01-01 00:00:00' },
{ id: 1, name: '景区', type: '宣传视频', url: 'https://huyun120.cn/dfs/group1/M00/03/F4/wKgKPWhbuNiATUQYAE51rnUVITc628.mp4', link: '', sort: 2, createTime: '2020-01-01 00:00:00' }
]
this.crud.resetDataStatus()
computed: {
...mapGetters([
'imagesUploadApi',
'fileUploadApi',
'baseApi'
])
},
methods: {
// 预览图片
@ -176,7 +186,7 @@ export default {
// 删除图片
handleRemove(file, uploadFiles) {
this.$refs['uploadRef'].clearFiles()
this.form.url = null
this.form.path = null
this.form.files = [];
this.uploadDisabled = false
console.log(this.form)
@ -187,27 +197,29 @@ export default {
this.$message.warning('请选择文章类型！');
return;
}
const isTypeImage = this.form.type === '轮播图';
const isTypeImage = Number(this.form.type) === 1;
const fileType = file.raw.type;
if ((isTypeImage&&fileType.includes('image'))||(!isTypeImage)&&fileType.includes('video')) {
this.loading = true
this.form.files = uploadFiles
this.uploadDisabled = true
try {
// const formdata = new FormData();
// formdata.append('file', file.raw);
// let res = await photoApi.uploadFile(formdata);
// if(res?.success){
// this.form.url = res.data.path;
this.$message.success(`${isTypeImage?'图片':'视频'}上传成功！`)
this.loading = false
console.log(this.form)
// }else{
// this.$message.error('图片上传失败！');
// }
upload(isTypeImage?this.imagesUploadApi:this.fileUploadApi, file.raw).then(res => {
if(res.status === 200){
const data = res.data;
const url = `/file/${isTypeImage?'图片':'视频'}/` + data.newFileName;
this.form.path = url;
this.loading = false;
}else{
this.$message.error(`isTypeImage?'图片':'视频'上传失败！`);
this.loading = false;
return;
}
});
// this.$message.success(`${isTypeImage?'图片':'视频'}上传成功！`)
} catch (error) {
this.loading = false
this.$message.error(`${isTypeImage?'图片':'视频'}上传失败！`)
this.loading = false
this.$message.error(`${isTypeImage?'图片':'视频'}上传失败！`)
}
} else {
this.$confirm(`${isTypeImage?'图片':'视频'}的格式不正确，请重新选择！`, '提示', {
@ -218,6 +230,18 @@ export default {
this.uploadDisabled = false
}
},
[CRUD.HOOK.beforeToEdit](crud, form){
this.uploadDisabled = true;
form.files = [{url:this.baseApi+form.path}]
console.log('beforeToEdit',crud,form);
},
[CRUD.HOOK.beforeToAdd](crud, form){
this.uploadDisabled = false;
},
[CRUD.HOOK.beforeRefresh](crud, form) {
crud.query.current = crud.page.page;
},
}
}
</script>

80
src/views/system/area/index.vue
View File

@ -82,7 +82,7 @@ export default {
name: 'Area',
components: { udOperation, pagination },
cruds() {
return CRUD({ title: '区域', url: 'api/area', crudMethod: { ...crudArea }, optShow: { add: true } })
return CRUD({ title: '区域', url: '/aerocraftAdminApi/emArea', crudMethod: { ...crudArea }, optShow: { add: true } })
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
@ -98,42 +98,43 @@ export default {
{ required: true, message: `名称不能为空`, trigger: 'blur' },
],
},
list: [{
id: 1,
label: '爱尚云',
children: [{
id: 2,
label: '北京区域',
children: []
},
{
id: 3,
label: '上海区域',
children: []
},
{
id: 4,
label: '深圳区域',
children: []
},
{
id: 5,
label: '广州区域',
children: [{
id: 6,
label: '白云山景区',
children: []
}, {
id: 7,
label: '白水寨景区',
children: []
}, {
id: 8,
label: '越秀公园景区',
children: []
}]
}]
}],
list: [],
// {
// id: 1,
// label: '爱尚云',
// children: [{
// id: 2,
// label: '北京区域',
// children: []
// },
// {
// id: 3,
// label: '上海区域',
// children: []
// },
// {
// id: 4,
// label: '深圳区域',
// children: []
// },
// {
// id: 5,
// label: '广州区域',
// children: [{
// id: 6,
// label: '白云山景区',
// children: []
// }, {
// id: 7,
// label: '白水寨景区',
// children: []
// }, {
// id: 8,
// label: '越秀公园景区',
// children: []
// }]
// }]
// }],
parentId: '',
parentName: '',
parentArr: []
@ -141,8 +142,6 @@ export default {
},
async created() {
const id = await this.getTree()
this.crud.data = [{ id: 1, name: '越秀公园', num: 1 }]
this.crud.resetDataStatus()
},
methods: {
// 节点点击
@ -163,6 +162,9 @@ export default {
// console.log(this.parentArr, 'parentArr')
// this.getList(id)
},
[CRUD.HOOK.beforeRefresh](crud, form) {
crud.query.current = crud.page.page;
},
getTree() {
return new Promise(resolve => {
// tree().then(res => {

7
src/views/system/customer/index.vue
View File

@ -107,7 +107,7 @@ export default {
// 数据字典
dicts: ['common_gender'],
cruds() {
return CRUD({ title: '客户', url: 'api/customer', crudMethod: { ...crudCustomer }, optShow: { add: true, reset: true }})
return CRUD({ title: '客户', url: '/aerocraftAdminApi/cnCustomer', crudMethod: { ...crudCustomer }, optShow: { add: true, reset: true }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data(){
@ -150,13 +150,14 @@ export default {
}
},
created() {
this.crud.data.push({ id: 1, nickName: '测试', gender: 0, phone: '12345678901', userType: '普通用户', enable: 1, createTime: '2020-01-01' })
this.crud.resetDataStatus()
},
methods: {
// 启/停用客户账号
toEnable(row){
row.enable = Number(row.enable) === 1 ? 0 : 1;
},
[CRUD.HOOK.beforeRefresh](crud, form) {
crud.query.current = crud.page.page;
}
}
}