Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
qianhao.xu
2023-11-14 18:09:40 +08:00
commit 19ae3ef130
411 changed files with 33483 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/system/article/articleCategory.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div>
<el-row class="mt10">
请移步至 Vue3
<el-link href="https://gitee.com/izory/ZRAdmin-vue">https://gitee.com/izory/ZRAdmin-vue</el-link>
</el-row>
</div>
</template>

149
src/views/system/article/manager.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div class="app-container">
<el-row :gutter="24">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="queryParams" label-position="left" inline ref="queryForm" v-show="showSearch" @submit.native.prevent>
<el-col :span="6">
<el-form-item label="文章标题" prop="title">
<el-input v-model="queryParams.title" placeholder="请输入文章标题" size="small" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="文章状态" prop="status">
<el-select v-model="queryParams.status" size="small">
<el-option v-for="item in statusOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['system:article:add']" @click="handleAdd">发布文章</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
</el-row>
<el-table :data="dataList" ref="table" border>
<el-table-column prop="cid" label="id" width="60" sortable> </el-table-column>
<el-table-column prop="title" label="文章标题" width="180" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column prop="authorName" label="作者" width="80"> </el-table-column>
<el-table-column prop="fmt_type" label="编辑器类型" width="100"> </el-table-column>
<el-table-column prop="tags" label="标签" width="100" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column prop="hits" label="点击量" width="80" align="center"> </el-table-column>
<el-table-column prop="content" label="文章内容" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column sortable prop="status" align="center" label="状态" width="90">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.status == '2' ? 'danger' : 'success'" disable-transitions
>{{ scope.row.status == '2' ? '草稿' : '已发布' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="128" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column label="操作" align="center" width="190">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:update']"
>编辑
</el-button>
<el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row)" style="margin-left: 10px">
<el-button slot="reference" size="mini" type="text" icon="el-icon-delete" v-hasPermi="['system:article:delete']">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</template>
<script>
import { listArticle, delArticle } from '@/api/system/article.js'
export default {
name: 'articleindex',
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 查询参数
queryParams: {},
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 文章状态下拉框
statusOptions: [],
// 数据列表
dataList: [],
// 总记录数
total: 0,
// 提交按钮是否显示
btnSubmitVisible: true,
// 文章预览地址
previewUrl: '',
}
},
created() {
this.getList()
this.getDicts('sys_article_status').then((response) => {
this.statusOptions = response.data
})
this.getConfigKey('sys.article.preview.url').then((response) => {
this.previewUrl = response.data
})
},
methods: {
// 查询数据
getList() {
listArticle(this.queryParams).then((res) => {
if (res.code == 200) {
this.dataList = res.data.result
this.total = res.data.totalNum
}
})
},
/** 重置查询操作 */
resetQuery() {
this.resetForm('queryForm')
},
/** 搜索按钮操作 */
handleQuery() {
this.getList()
},
/** 新增按钮操作 */
handleAdd() {
this.$router.replace({ path: '/article/publish' })
},
/** 删除按钮操作 */
handleDelete(row) {
delArticle(row.cid).then((res) => {
if (res.code == 200) {
this.msgSuccess('删除成功')
this.handleQuery()
}
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.$router.push({ path: '/article/publish', query: { cid: row.cid } })
},
// 详情
handleView(row) {
var link = `${this.previewUrl}${row.cid}`
window.open(link)
},
handleImport() {},
handleExport() {},
},
}
</script>

221
src/views/system/article/publish.vue Normal file
View File

@@ -0,0 +1,221 @@
<template>
<div class="app-container">
<el-row :gutter="24">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="form" label-position="right" ref="form" size="mini" label-width="100px" :rules="rules" @submit.native.prevent>
<el-col :lg="12">
<el-form-item label="文章标题" prop="title">
<el-input v-model="form.title" placeholder="请输入文章标题（必须）" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="文章分类" prop="category_id">
<treeselect v-model="form.category_id" :options="categoryOptions" :normalizer="normalizer" :show-count="true" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="文章标签">
<el-tag size="large" :key="tag" v-for="tag in form.dynamicTags" closable :disable-transitions="false" @close="handleCloseTag(tag)">
{{tag}}
</el-tag>
<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 文章标签</el-button>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item prop="content" label="文章内容">
<mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 400px;width:100%" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="" style="text-align:right;">
<el-button size="mini" @click="handlePublish('1')">发布文章</el-button>
<el-button type="success" size="mini" @click="handlePublish('2')">存为草稿</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script>
import {
addArticle,
updateArticle,
listArticleCategoryTree,
getArticle,
} from "@/api/system/article.js";
import { upload } from "@/api/common.js";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "articlepublish",
components: {
mavonEditor,
Treeselect,
},
data() {
return {
// 表单参数
form: {
dynamicTags: [],
fmt_type: "markdown",
tags: undefined,
cid: undefined,
content: undefined,
},
// 文章目录下拉框
categoryOptions: [],
// 提交按钮是否显示
btnSubmitVisible: true,
inputVisible: false,
inputValue: "",
// 表单校验
rules: {
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
},
};
},
watch: {
"form.cid": function (newVal, oldVal) {
getArticle(newVal).then((res) => {
if (res.code == 200) {
var data = res.data;
this.form = {
fmt_type: data.fmt_type,
cid: parseInt(newVal),
title: data.title,
content: data.content,
category_id: data.category_id,
dynamicTags: data.tags != null && data.tags.length > 0 ? data.tags.split(",") : [],
};
}
});
},
},
created() {
this.form.cid = this.$route.query.cid;
this.getCategoryTreeselect();
},
mounted() {},
methods: {
/** 查询菜单下拉树结构 */
getCategoryTreeselect() {
listArticleCategoryTree().then((res) => {
if (res.code == 200) {
this.categoryOptions = res.data;
}
});
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.category_Id,
label: node.name,
children: node.children,
};
},
// 将图片上传到服务器，返回地址替换到md中
$imgAdd(pos, $file) {
var formdata = new FormData();
formdata.append("file", $file);
upload(formdata).then((res) => {
console.log(JSON.stringify(res));
this.$refs.md.$img2Url(pos, res.data.url);
});
},
change(value, render) {
// render 为 markdown 解析后的结果
this.html = render;
},
/** 提交按钮 */
handlePublish: function (status) {
this.form.status = status;
this.form.tags = this.form.dynamicTags.toString();
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.cid != undefined) {
updateArticle(this.form).then((res) => {
if (res.code == 200) {
this.msgSuccess("修改文章成功");
this.$tab.closeOpenPage({ path: '/tool/article/index' });
} else {
this.msgError("修改文章失败");
}
});
} else {
addArticle(this.form).then((res) => {
if (res.code == 200) {
this.msgSuccess("发布文章成功");
this.$tab.closeOpenPage({ path: '/tool/article/index' });
} else {
this.msgError("发布文章失败");
}
});
}
}
});
},
handleCloseTag(tag) {
this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue.trim();
if (
inputValue &&
inputValue.length > 0 &&
this.form.dynamicTags.length < 4
) {
this.form.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = "";
},
handleTreeSelect() {},
},
};
</script>
<style scoped>
.el-tag + .el-tag {
margin-right: 10px;
}
.el-tag {
margin-right: 10px;
}
.button-new-tag {
/* margin-left: 10px; */
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-right: 10px;
vertical-align: bottom;
}
.el-col {
border-radius: 4px;
margin-bottom: 10px;
}
.vue-treeselect {
z-index: 1501;
}
</style>