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",
|
||||
},
|
||||
{
|
||||
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