wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⚡优化Vue2功能

Browse Source
This commit is contained in:
不做码农 2023-12-09 19:57:41 +08:00
parent 5375b9e308
commit f05dec13da
8 changed files with 95 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ZR.Vue/package.json
View File

@ -3,7 +3,7 @@
"description": "ZrAdmnin.NET后台管理",
"author": "ZR",
"scripts": {
"dev": "vue-cli-service serve",
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging"
},

16
ZR.Vue/src/api/system/article.js
View File

@ -5,7 +5,7 @@ export function listArticle(query) {
return request({
url: '/Article/list',
method: 'get',
params: query
params: query,
})
}
// 查询最新列表
@ -13,7 +13,7 @@ export function listNewArticle(query) {
return request({
url: '/Article/newList',
method: 'get',
params: query
params: query,
})
}
@ -39,7 +39,7 @@ export function updateArticle(data) {
return request({
url: '/Article/edit',
method: 'put',
data: data
data: data,
})
}
@ -47,20 +47,20 @@ export function updateArticle(data) {
export function delArticle(id) {
return request({
url: '/Article/' + id,
method: 'delete'
method: 'delete',
})
}
// 查询菜单目录
export function listArticleCategory() {
return request({
url: '/Article/CategoryList',
method: 'get'
method: 'get',
})
}
// 查询菜单目录树
export function listArticleCategoryTree(){
export function listArticleCategoryTree() {
return request({
url: '/Article/CategoryTreeList',
menubar: 'get'
url: '/Article/ArticleCategory/treeList',
menubar: 'get',
})
}

19
ZR.Vue/src/api/system/menu.js
View File

@ -5,7 +5,14 @@ export function listMenu(query) {
return request({
url: '/system/menu/list',
method: 'get',
params: query
params: query,
})
}
export function listTreeMenu(query) {
return request({
url: '/system/menu/treelist',
method: 'get',
params: query,
})
}
// 查询菜单列表
@ -27,7 +34,7 @@ export function getMenu(menuId) {
export function treeselect() {
return request({
url: '/system/Menu/treeSelect',
method: 'get'
method: 'get',
})
}
@ -53,7 +60,7 @@ export function updateMenu(data) {
return request({
url: '/system/Menu/edit',
method: 'post',
data: data
data: data,
})
}
@ -61,7 +68,7 @@ export function updateMenu(data) {
export function delMenu(menuId) {
return request({
url: '/system/Menu/' + menuId,
method: 'delete'
method: 'delete',
})
}
@ -70,7 +77,7 @@ export function changeMenuSort(data) {
return request({
url: '/system/Menu/ChangeSort',
method: 'get',
params: data
params: data,
})
}
@ -79,6 +86,6 @@ export const getRouters = (query) => {
return request({
url: '/getRouters',
method: 'get',
params: query
params: query,
})
}

2
ZR.Vue/src/api/tool/gen.js
View File

@ -64,7 +64,7 @@ export function importTable(data) {
return request({
url: '/tool/gen/importTable',
method: 'post',
params: data
data: data
})
}
// 删除表数据

1
ZR.Vue/src/permission.js
View File

@ -13,7 +13,6 @@ const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/demo']
router.beforeEach((to, from, next) => {
NProgress.start()
console.log('path=' + to.path);
if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)

138
ZR.Vue/src/views/system/article/publish.vue
View File

@ -9,52 +9,53 @@
</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 label="文章分类" prop="categoryId">
<treeselect v-model="form.categoryId" :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}}
{{ 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
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%" />
<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-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";
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",
name: 'articlepublish',
components: {
mavonEditor,
Treeselect,
@ -64,44 +65,45 @@ export default {
// 表单参数
form: {
dynamicTags: [],
fmt_type: "markdown",
fmt_type: 'markdown',
tags: undefined,
cid: undefined,
content: undefined,
categoryId: undefined,
},
// 文章目录下拉框
categoryOptions: [],
// 提交按钮是否显示
btnSubmitVisible: true,
inputVisible: false,
inputValue: "",
inputValue: '',
// 表单校验
rules: {
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
},
};
}
},
watch: {
"form.cid": function (newVal, oldVal) {
'form.cid': function (newVal, oldVal) {
getArticle(newVal).then((res) => {
if (res.code == 200) {
var data = res.data;
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(",") : [],
};
categoryId: data.categoryId,
dynamicTags: data.tags != null && data.tags.length > 0 ? data.tags.split(',') : [],
}
}
});
})
},
},
created() {
this.form.cid = this.$route.query.cid;
this.getCategoryTreeselect();
this.form.cid = this.$route.query.cid
this.getCategoryTreeselect()
},
mounted() {},
methods: {
@ -109,88 +111,84 @@ export default {
getCategoryTreeselect() {
listArticleCategoryTree().then((res) => {
if (res.code == 200) {
this.categoryOptions = res.data;
this.categoryOptions = res.data
}
});
})
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
delete node.children
}
return {
id: node.category_Id,
id: node.categoryId,
label: node.name,
children: node.children,
};
}
},
// 将图片上传到服务器，返回地址替换到md中
$imgAdd(pos, $file) {
var formdata = new FormData();
formdata.append("file", $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);
});
console.log(JSON.stringify(res))
this.$refs.md.$img2Url(pos, res.data.url)
})
},
change(value, render) {
// render 为 markdown 解析后的结果
this.html = render;
this.html = render
},
/** 提交按钮 */
handlePublish: function (status) {
this.form.status = status;
this.form.tags = this.form.dynamicTags.toString();
this.form.status = status
this.form.tags = this.form.dynamicTags.toString()
this.$refs["form"].validate((valid) => {
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' });
this.msgSuccess('修改文章成功')
this.$tab.closeOpenPage({ path: '/tool/article/index' })
} else {
this.msgError("修改文章失败");
this.msgError('修改文章失败')
}
});
})
} else {
addArticle(this.form).then((res) => {
if (res.code == 200) {
this.msgSuccess("发布文章成功");
this.$tab.closeOpenPage({ path: '/tool/article/index' });
this.msgSuccess('发布文章成功')
this.$tab.closeOpenPage({ path: '/tool/article/index' })
} else {
this.msgError("发布文章失败");
this.msgError('发布文章失败')
}
});
})
}
}
});
})
},
handleCloseTag(tag) {
this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1);
this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true;
this.inputVisible = true
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
let inputValue = this.inputValue.trim();
let inputValue = this.inputValue.trim()
if (
inputValue &&
inputValue.length > 0 &&
this.form.dynamicTags.length < 4
) {
this.form.dynamicTags.push(inputValue);
if (inputValue && inputValue.length > 0 && this.form.dynamicTags.length < 4) {
this.form.dynamicTags.push(inputValue)
}
this.inputVisible = false;
this.inputValue = "";
this.inputVisible = false
this.inputValue = ''
},
handleTreeSelect() {},
},
};
}
</script>
<style scoped>
.el-tag + .el-tag {

4
ZR.Vue/src/views/tool/gen/genInfoForm.vue
View File

@ -256,7 +256,7 @@
</template>
<script>
import { queryColumnInfo } from '@/api/tool/gen'
import { listMenu } from '@/api/system/menu'
import { listTreeMenu } from '@/api/system/menu'
export default {
name: 'BasicInfoForm',
@ -366,7 +366,7 @@ export default {
/** 查询菜单下拉树结构 */
getMenuTreeselect() {
/** 查询菜单下拉列表 */
listMenu({ menuTypeIds: 'M,C' }).then((response) => {
listTreeMenu({ menuTypeIds: 'M,C' }).then((response) => {
this.menuOptions = response.data
})
},

4
ZR.Vue/src/views/tool/gen/importTable.vue
View File

@ -72,7 +72,7 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.tables = selection.map((item) => item.name);
this.tables = selection//.map((item) => item.name);
},
// 查询表数据
getList() {
@ -105,7 +105,7 @@ export default {
console.log(JSON.stringify(this.tables));
importTable({
tables: this.tables.join(","),
tables: this.tables,
dbName: this.queryParams.dbName,
}).then((res) => {
this.msgSuccess(res.msg);