This commit is contained in:
Zhang HaoYang 2023-12-26 22:40:20 +08:00
parent bf741a6145
commit fde3e77bb5
5 changed files with 673 additions and 17 deletions

11
package-lock.json generated
View File

@ -23,6 +23,7 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-iframe": "^0.0.0", "vue-iframe": "^0.0.0",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue2-element-dict": "^1.0.2",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
@ -16322,6 +16323,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vue2-element-dict": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/vue2-element-dict/-/vue2-element-dict-1.0.2.tgz",
"integrity": "sha512-/IJwzUc/e9sUdlg+s6PaXM+vZ54sStElUne4Ar70Mvw/V2ysRlFfbX4jihnvDlVz+12HGfu5QmoXHOuRGtkAUw=="
},
"node_modules/vuex": { "node_modules/vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@ -29824,6 +29830,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vue2-element-dict": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/vue2-element-dict/-/vue2-element-dict-1.0.2.tgz",
"integrity": "sha512-/IJwzUc/e9sUdlg+s6PaXM+vZ54sStElUne4Ar70Mvw/V2ysRlFfbX4jihnvDlVz+12HGfu5QmoXHOuRGtkAUw=="
},
"vuex": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

View File

@ -23,6 +23,7 @@
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-iframe": "^0.0.0", "vue-iframe": "^0.0.0",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue2-element-dict": "^1.0.2",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {

View File

@ -1073,6 +1073,14 @@ body.light-mode .video-bg:before {
transform:scale(1.08); transform:scale(1.08);
cursor: pointer; cursor: pointer;
} }
.card_style{
height:390px;
font-size: 18px;
background-color: #ffffff;
border-color: rgba(209, 225, 189, 0.89);
text-align: center;
border-radius:10px;
}

View File

@ -7,7 +7,7 @@
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px"> <div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-button type="primary" plain size="medium" round>创建目录</el-button> <el-button @click="openAddCategoryFun()" type="primary" plain size="medium" round >创建目录</el-button>
</el-col> </el-col>
<el-col :span="24" style="margin-top:20px"> <el-col :span="24" style="margin-top:20px">
<el-input <el-input
@ -24,24 +24,33 @@
header-row-class-name="table_header_class" header-row-class-name="table_header_class"
border> border>
<el-table-column <el-table-column
align="center" align="center"
type="index" type="index"
:index="hIndex" :index="hIndex"
prop="date" prop="date"
label="序号" label="序号"
width="80"> width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="name" prop="name"
label="分类名称" label="分类名称"
width="180"> width="180">
</el-table-column> </el-table-column>
<el-table-column
align="center"
prop="id"
label="分类编号"
width="50">
</el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="createtime" prop="createtime"
label="创建时间" label="创建时间"
width="200"> width="140">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
@ -49,13 +58,39 @@
label="包含网址数" label="包含网址数"
width="100"> width="100">
</el-table-column> </el-table-column>
<el-table-column align="center" key="status" prop="status" label="启用状态" width="90" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
active-color="#13ce66"
inactive-color="#ff4949"
disabled
>
</el-switch>
</template>
</el-table-column>
<el-table-column align="center" key="needLogin" prop="needLogin" label="公开状态" width="90">
<template slot-scope="scope">
<el-switch
v-model="scope.row.needLogin"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
disabled
>
</el-switch>
</template>
</el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="weigh" prop="weigh"
label="权重" label="权重"
width="80"> width="80">
</el-table-column> </el-table-column>
<el-table-column prop="date" label="操作" width="150"> <el-table-column prop="date" label="操作" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="ButtonBlock"> <div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)" <img class="MyButton" @click="handleEdit(scope.row)"
@ -66,8 +101,41 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog title="新增分类" :visible.sync="openAddCategory" width="30%"
append-to-body
:close-on-click-modal="false"
:before-close="closeDialog"
>
<el-form ref="form" :rules="rules" class="login_container" :model="form"
style="margin-top:-10px" status-icon label-width="100px" >
<el-form-item label="分类名" prop="name">
<el-input v-model="form.name" placeholder='分类名称' clearable></el-input>
</el-form-item>
<el-form-item label="分类权重" prop="weigh" >
<el-input v-model="form.weigh" placeholder='分类权重' clearable ></el-input>
</el-form-item>
<el-form-item label="用户id" prop="userId" style="display: none">
<el-input v-model="form.userId" placeholder='用户id' clearable ></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status" >
<el-radio :label="0">有效</el-radio>
<el-radio :label="1">无效</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否公开" prop="needLogin">
<el-radio-group v-model="form.needLogin" >
<el-radio :label="1">公开</el-radio>
<el-radio :label="0">私有</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
<el-button @click="addCategory('form')" type="primary" style=";margin-top:10px">确认</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</div> </div>
@ -80,12 +148,31 @@ export default {
name: "CategoryManage", name: "CategoryManage",
data() { data() {
return { return {
//
titlename:null,
//
openAddCategory:false,
//
dialogVisible:false,
//
isEdit:true,
searchCate:'', searchCate:'',
userId:null, userId:null,
List:[], List:[],
form:{ form:{
name:'', name:'',
weigh:'', weigh:'',
needLogin:'',
status:'',
userId:'',
},
//
rules: {
name: [{ required: 'true', message: '请输入分类名', trigger: 'blur' }],
weigh: [{ required: 'true', message: '请输入权重', trigger: 'blur' }],
needLogin: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
status: [{ required: 'true', message: '请输入是否启用', trigger: 'blur' }],
userId: [{ required: 'true', message: '登录信息有误', trigger: 'blur' }],
} }
} }
}, },
@ -98,6 +185,129 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
//
handleDelete(index) {
var that=this;
this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
//
url: '/api/UrlAndCate/deleteCateByCateId',
// URL
params: {
Id: index.id,
userId:this.userId,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "删除成功"),
type: 'success',
offset: 50
});
that.GetData();
}
});
}).catch(() => {
// :
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//
closeDialog() {
var that = this;
//
this.GetData();
//
that.form = {
name:'',
weigh:'',
needLogin:'',
status:'',
}
//
this.dialogVisible = false;
this.openAddCategory=false;
},
// :
openAddCategoryFun(){
var _this = this;
// console.log(_this.List);
_this.titlename="新增分类";
this.openAddCategory=true;
},
//
handleEdit(index) {
var _this = this;
this.openAddCategoryFun();
_this.titlename="编辑分类";
//
this.form = index;
},
//
addCategory(rulelist){
var _this = this;
_this.$refs[rulelist].validate((valid)=>{
if(valid){
axios({
method: 'post',
//
url: '/api/UrlAndCate/insertCateByUser',
// URL
params: {
name: this.form.name,
weigh: this.form.weigh,
status: this.form.status,
need_login: this.form.need_login,
userId: this.form.userId,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
_this.closeDialog();
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功!"),
type: 'success',
offset: 50
});
}
}).catch((error)=>{
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 50
});
})
}else{
return;
}
})
//
},
// //
getFormatDate() { getFormatDate() {
var that = this; var that = this;
@ -150,6 +360,8 @@ export default {
} }
}) })
// /selectAllArticleByadmin // /selectAllArticleByadmin
that.form.userId = that.userId;
}, },
} }
@ -188,7 +400,24 @@ export default {
::v-deep .el-table--border{ ::v-deep .el-table--border{
border: var(--table-border) solid 3px; border: var(--table-border) solid 3px;
} }
.login_container {
width: 400px;
border: 1px solid #eaeaea;
margin: 100px auto;
padding: 35px 35px 15px 35px;
box-sizing: border-box;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 0 25px #cac6c6;
.login_title{
color: #505458;
text-align: center;
margin-bottom: 40px;}
}
::v-deep .el-dialog__body{
background-image: url("../../../assets/img/SkyPic.jpg");
margin-top:15px;
height:500px;
}
</style> </style>

View File

@ -1,9 +1,153 @@
<template> <template>
<div> <div class="main" style="text-shadow: 0 0 20px var(--font-border);overflow:scroll">
网站管理 <div class="HeadLine" style="margin-top:30px;margin-left:15px;">
<div class="HeadSquare" ></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-platform"></i>网站管理</div>
</div>
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px">
<el-row>
<el-col :span="24">
<el-button @click="openAddCategoryFun()" type="primary" plain size="medium" round >创建标签</el-button>
</el-col>
<el-col :span="24" style="margin-top:20px">
<el-input
placeholder="请输入内容"
v-model="searchCate"
clearable
style="width:200px">
</el-input>
<el-button type="success" plain size="medium" round style="margin-left:10px">查询标签</el-button>
</el-col>
</el-row>
<el-table class="MyTable"
:data="List"
header-row-class-name="table_header_class"
border>
<el-table-column
align="center"
type="index"
:index="hIndex"
prop="date"
label="序号"
width="50">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="网站名"
width="180">
</el-table-column>
<el-table-column
align="center"
prop="root"
label="所属分类"
width="100">
</el-table-column>
<el-table-column
align="center"
prop="createtime"
label="创建时间"
width="140">
</el-table-column>
<el-table-column
align="center"
prop="desc"
label="描述"
width="100">
</el-table-column>
<el-table-column
align="center"
prop="agentHint"
label="代理提示语"
width="100">
</el-table-column>
<el-table-column align="center" key="status" prop="status" label="启用状态" width="90" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
active-color="#13ce66"
inactive-color="#ff4949"
disabled
>
</el-switch>
</template>
</el-table-column>
<el-table-column align="center" key="needLogin" prop="needLogin" label="公开状态" width="90">
<template slot-scope="scope">
<el-switch
v-model="scope.row.needLogin"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
disabled
>
</el-switch>
</template>
</el-table-column>
<el-table-column
align="center"
prop="weigh"
label="权重"
width="80">
</el-table-column>
<el-table-column prop="date" label="操作" width="160">
<template slot-scope="scope">
<div class="ButtonBlock">
<img class="MyButton" @click="handleEdit(scope.row)"
src="../../../assets/img/EditButton.svg" style="width:60px">
<img class="MyButton" @click="handleDelete(scope.row)"
src="../../../assets/img/DeleteButton.svg" style="width:60px">
</div>
</template>
</el-table-column>
</el-table>
<el-dialog title="新增分类" :visible.sync="openAddCategory" width="30%"
append-to-body
:close-on-click-modal="false"
:before-close="closeDialog"
>
<el-form ref="form" :rules="rules" class="login_container" :model="form"
style="margin-top:-10px" status-icon label-width="100px" >
<el-form-item label="分类名" prop="name">
<el-input v-model="form.name" placeholder='分类名称' clearable></el-input>
</el-form-item>
<el-form-item label="分类权重" prop="weigh" >
<el-input v-model="form.weigh" placeholder='分类权重' clearable ></el-input>
</el-form-item>
<el-form-item label="用户id" prop="userId" style="display: none">
<el-input v-model="form.userId" placeholder='用户id' clearable ></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status" >
<el-radio :label="0">有效</el-radio>
<el-radio :label="1">无效</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否公开" prop="needLogin">
<el-radio-group v-model="form.needLogin" >
<el-radio :label="1">公开</el-radio>
<el-radio :label="0">私有</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
<el-button @click="addCategory('form')" type="primary" style=";margin-top:10px">确认</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
import Vue from "vue";
export default { export default {
name:"WebsiteManage", name:"WebsiteManage",
components:{ components:{
@ -12,22 +156,285 @@ export default {
}, },
data() { data() {
return { return {
//
}}, titlename:null,
//
openAddCategory:false,
//
dialogVisible:false,
//
isEdit:true,
searchCate:'',
userId:null,
List:[],
form:{
name:'',
weigh:'',
needLogin:'',
status:'',
userId:'',
},
//
rules: {
name: [{ required: 'true', message: '请输入分类名', trigger: 'blur' }],
weigh: [{ required: 'true', message: '请输入权重', trigger: 'blur' }],
needLogin: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
status: [{ required: 'true', message: '请输入是否启用', trigger: 'blur' }],
userId: [{ required: 'true', message: '登录信息有误', trigger: 'blur' }],
}
}
},
mounted() { mounted() {
// this.getFormatDate();
}, },
created() { created() {
this.getUserInfo();
}, // this.GetData();
computed: {
}, },
computed: {},
methods: { methods: {
//
handleDelete(index) {
var that=this;
this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
//
url: '/api/UrlAndCate/deleteCateByCateId',
// URL
params: {
Id: index.id,
userId:this.userId,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "删除成功"),
type: 'success',
offset: 50
});
that.GetData();
}
});
}).catch(() => {
// :
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//
closeDialog() {
var that = this;
//
this.GetData();
//
that.form = {
name:'',
weigh:'',
needLogin:'',
status:'',
}
//
this.dialogVisible = false;
this.openAddCategory=false;
},
// :
openAddCategoryFun(){
var _this = this;
console.log(_this.List);
_this.titlename="新增分类";
_this.openAddCategory=true;
},
//
handleEdit(index) {
var _this = this;
this.openAddCategoryFun();
_this.titlename="编辑分类";
//
this.form = index;
},
//
addCategory(rulelist){
var _this = this;
_this.$refs[rulelist].validate((valid)=>{
if(valid){
axios({
method: 'post',
//
url: '/api/UrlAndCate/insertCateByUser',
// URL
params: {
name: this.form.name,
weigh: this.form.weigh,
status: this.form.status,
need_login: this.form.need_login,
userId: this.form.userId,
}
}).then(function (res) {
if (res.data.code === 500) {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
} else {
_this.closeDialog();
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功!"),
type: 'success',
offset: 50
});
}
}).catch((error)=>{
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 50
});
})
}else{
return;
}
})
//
},
//
// getFormatDate() {
// var that = this;
// for(let i = 0 ; i < that.List.length; i++){
// var date = new Date(that.List[i].createtime);// 10*1000131000
// var Y = date.getFullYear() + '';
// var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '';
// var D = date.getDate() + ' ';
// console.log("date: " + Y + M + D);
// that.List[i].createtime = "" + Y + M + D;
// }
// },
//
hIndex(index){
var linenum = parseInt( parseInt(index) + parseInt(1))
return linenum;
},
// ID
getUserInfo() {
let _this = this;
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
_this.userId = localStorage.getItem("userId")
_this.GetData();
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "登录状态失效,请重新登录!",
offset: 0
});
}
},
GetData(){
//
var that = this;
axios({
method:'post',
url:'/api/UrlAndCate/disposeBookmarkToJson',
params:{
userId: that.userId
}
}).then(function(res){
var tmp = res.data;
var tmp2 = [];
for(let i=0;i< tmp.length;i++){
var rootName = tmp[i].name;
tmp[i].childUC = tmp[i].childUC.map(item=>{
return{
...item,
root:rootName
}
});
tmp2 = tmp2.concat(tmp[i].childUC);
}
that.List = tmp2;
for(let i = 0 ; i < that.List.length; i++){
var date = new Date(that.List[i].createtime);// 10*1000131000
var Y = date.getFullYear() + '年';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
var D = date.getDate() + '日 ';
that.List[i].createtime = "" + Y + M + D;
}
})
that.form.userId = that.userId;
},
} }
} }
</script> </script>
<style scoped> <style scoped>
.base-style{
display: flex;
flex-direction: column;
}
/**表格样式,直接复制**/
::v-deep .table_header_class th{
background-color: var(--table-bg-color)!important;
color:var(--theme-color);
text-align: center;
}
.MyTable{
margin-top:10px;
width: 100%;
background-color:var(--table-bg-color);
color:var(--theme-color);
border-radius: 5px;
}
::v-deep .el-table__body tr:hover > td {
background-color: var(--table-bg-color-hover) !important;
}
::v-deep .el-table tr,
.el-table th.el-table__cell {
background-color: var(--table-bg-color);
border: var(--table-border) solid 3px;
}
::v-deep .el-table--border{
border: var(--table-border) solid 3px;
}
.login_container {
width: 400px;
border: 1px solid #eaeaea;
margin: 100px auto;
padding: 35px 35px 15px 35px;
box-sizing: border-box;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 0 25px #cac6c6;
.login_title{
color: #505458;
text-align: center;
margin-bottom: 40px;}
}
::v-deep .el-dialog__body{
background-image: url("../../../assets/img/SkyPic.jpg");
margin-top:15px;
height:500px;
}
</style> </style>