feat:添加公告视频列表页面
This commit is contained in:
parent
5c0f9acf2f
commit
34d3099ed6
|
|
@ -0,0 +1,64 @@
|
||||||
|
import config from "@/config"
|
||||||
|
import http from "@/utils/request"
|
||||||
|
/*公告视频接口*/
|
||||||
|
export default {
|
||||||
|
article: {
|
||||||
|
list: {
|
||||||
|
name: "获取列表",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.get(
|
||||||
|
`${config.API_URL}/cms/article/`,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
name: "获取详情",
|
||||||
|
req: async function(id){
|
||||||
|
return await http.get(
|
||||||
|
`${config.API_URL}/cms/article/${id}/`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cquery: {
|
||||||
|
name: "复杂查询",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/cms/article/cquery/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {
|
||||||
|
name: "编辑更新",
|
||||||
|
req: async function(id, data){
|
||||||
|
return await http.put(
|
||||||
|
`${config.API_URL}/cms/article/${id}/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
create: {
|
||||||
|
name: "新增",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/cms/article/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
name: "删除",
|
||||||
|
req: async function(id){
|
||||||
|
return await http.delete(
|
||||||
|
`${config.API_URL}/cms/article/${id}/`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggle_top: {
|
||||||
|
name: "文章置顶/取消",
|
||||||
|
req: async function(id, data){
|
||||||
|
return await http.put(
|
||||||
|
`${config.API_URL}/cms/article/${id}/toggle_top/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -142,6 +142,15 @@ const routes = [
|
||||||
},
|
},
|
||||||
component: "home/event",
|
component: "home/event",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "articles",
|
||||||
|
path: "/articles",
|
||||||
|
meta: {
|
||||||
|
title: "公告视频",
|
||||||
|
perms: ["articles"],
|
||||||
|
},
|
||||||
|
component: "home/articles",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
//审批
|
//审批
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="left-panel">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="add"
|
||||||
|
v-auth="'material.create'"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="right-panel">
|
||||||
|
<el-input
|
||||||
|
v-model="query.search"
|
||||||
|
placeholder="名称"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="handleQuery"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<scTable
|
||||||
|
ref="table"
|
||||||
|
:apiObj="apiObj"
|
||||||
|
row-key="id"
|
||||||
|
stripe
|
||||||
|
>
|
||||||
|
<el-table-column type="index" width="50" />
|
||||||
|
<el-table-column label="名称" prop="title" min-width="60">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="内容" prop="content" min-width="120">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="图片" prop="poster" min-width="60">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="地址" prop="video" min-width="60">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
fixed="right"
|
||||||
|
align="center"
|
||||||
|
width="120"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-link type="success" @click="toggle_top(scope.row)">
|
||||||
|
置顶
|
||||||
|
</el-link>
|
||||||
|
<!-- <el-divider direction="vertical" /> -->
|
||||||
|
<el-link type="primary" @click="table_edit(scope.row)" style="margin: 0 5px;">
|
||||||
|
编辑
|
||||||
|
</el-link>
|
||||||
|
<el-link type="danger" @click="table_del(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-link>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</scTable>
|
||||||
|
</el-main>
|
||||||
|
<el-dialog
|
||||||
|
title="新增"
|
||||||
|
width="600px"
|
||||||
|
v-model="saveDialog"
|
||||||
|
>
|
||||||
|
<el-form :model="form" label-width="80px" :rules="rules" ref="dialogForm">
|
||||||
|
<el-row>
|
||||||
|
<el-col>
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-select
|
||||||
|
v-model="addType"
|
||||||
|
placeholder="类型"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option label="公告" :value="'articles'"></el-option>
|
||||||
|
<el-option label="视频" :value="'video'"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-form-item label="名称" prop="title">
|
||||||
|
<el-input v-model="form.title" placeholder="请输入名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="addType == 'articles'">
|
||||||
|
<el-form-item label="公告内容">
|
||||||
|
<el-input type="textarea" :rows="3" v-model="form.content" placeholder="公告内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="addType == 'articles'">
|
||||||
|
<el-form-item label="公告照片">
|
||||||
|
<sc-upload v-model="form.poster" :modelValue="form.poster" title="公告照片"></sc-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="addType == 'video'">
|
||||||
|
<el-form-item label="视频文件">
|
||||||
|
<sc-upload-file
|
||||||
|
v-model="form.video"
|
||||||
|
:multiple="false"
|
||||||
|
:limit="1"
|
||||||
|
>
|
||||||
|
<el-button type="primary" icon="el-icon-upload">上传</el-button>
|
||||||
|
</sc-upload-file>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="saveDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="isSaveing" @click="confirm()">确定</el-button >
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ElLoading } from "element-plus";
|
||||||
|
const defaultForm = {
|
||||||
|
id: "",
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
video: "",
|
||||||
|
poster: ""
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: "articles",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showType:'add',
|
||||||
|
form:defaultForm,
|
||||||
|
saveDialog: false,
|
||||||
|
apiObj: this.$API.cms.article.list,
|
||||||
|
addType:'articles',
|
||||||
|
materialId: "",
|
||||||
|
materialName: "",
|
||||||
|
showHidden: false,
|
||||||
|
query:{
|
||||||
|
search: "",
|
||||||
|
},
|
||||||
|
rules:{
|
||||||
|
title: [{required: true,message: "请输入名称",trigger: "blur"}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
rowClick(row) {
|
||||||
|
console.log("rowClick", row);
|
||||||
|
this.materialId = row.id;
|
||||||
|
this.materialName = row.full_name;
|
||||||
|
this.$emit("choseChange", row.id);
|
||||||
|
},
|
||||||
|
//添加
|
||||||
|
add() {
|
||||||
|
this.saveDialog = true;
|
||||||
|
this.showType = "add";
|
||||||
|
},
|
||||||
|
//编辑
|
||||||
|
table_edit(row) {
|
||||||
|
this.form = Object.assign({}, row);
|
||||||
|
if(this.form.video!==''){
|
||||||
|
this.addType = "video";
|
||||||
|
}else{
|
||||||
|
this.addType = "articles";
|
||||||
|
}
|
||||||
|
this.saveDialog = true;
|
||||||
|
this.showType = "edit";
|
||||||
|
},
|
||||||
|
toggle_top(row) {
|
||||||
|
let that = this;
|
||||||
|
that.$API.cms.article.toggle_top.req(row.id).then((res) => {
|
||||||
|
that.$message.success("操作成功");
|
||||||
|
that.$refs.table.refresh();
|
||||||
|
}).catch((err) => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//删除
|
||||||
|
async table_del(row) {
|
||||||
|
let that = this;
|
||||||
|
that.$confirm(`确定删除吗？`, "提示", {
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
that.$API.cms.article.delete.req(row.id).then((res) => {
|
||||||
|
that.$message.success("删除成功");
|
||||||
|
that.$refs.table.refresh();
|
||||||
|
return res;
|
||||||
|
}).catch((err) => {
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
confirm(){
|
||||||
|
let that = this;
|
||||||
|
that.$refs.dialogForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
that.isSaveing = true;
|
||||||
|
if(that.showType == 'add'){
|
||||||
|
that.$API.cms.article.create.req(that.form).then((res) => {
|
||||||
|
that.$message.success("操作成功");
|
||||||
|
that.$refs.table.refresh();
|
||||||
|
that.saveDialog = false;
|
||||||
|
that.isSaveing = false;
|
||||||
|
}).catch((err) => {
|
||||||
|
that.isSaveing = false;
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
that.$API.cms.article.update.req(that.form.id,that.form).then((res) => {
|
||||||
|
that.$message.success("操作成功");
|
||||||
|
that.$refs.table.refresh();
|
||||||
|
that.saveDialog = false;
|
||||||
|
that.isSaveing = false;
|
||||||
|
}).catch((err) => {
|
||||||
|
that.isSaveing = false;
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//本地更新数据
|
||||||
|
handleSaveSuccess(data, mode) {
|
||||||
|
if (mode == "add") {
|
||||||
|
this.$refs.table.refresh();
|
||||||
|
} else if (mode == "edit") {
|
||||||
|
this.$refs.table.refresh();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.$refs.table.queryData(this.query);
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.query = {};
|
||||||
|
},
|
||||||
|
upSuccess(res, close) {
|
||||||
|
close();
|
||||||
|
const loading = ElLoading.service({
|
||||||
|
fullscreen: true,
|
||||||
|
text: "解析中...请稍等",
|
||||||
|
});
|
||||||
|
this.$API.mtm.material.daoru
|
||||||
|
.req({ path: res.path })
|
||||||
|
.then((res) => {
|
||||||
|
loading.close();
|
||||||
|
this.$message.success("导入成功");
|
||||||
|
this.$refs.table.queryData(this.query);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
loading.close();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
hiddenChange(val) {
|
||||||
|
if (val) {
|
||||||
|
this.query.is_hidden = "";
|
||||||
|
} else {
|
||||||
|
this.query.is_hidden = false;
|
||||||
|
}
|
||||||
|
this.$refs.table.queryData(this.query);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue