Commit bc16217e authored by Zhang Xiaojie's avatar Zhang Xiaojie

消息管理,资讯发布,安全设置界面完成,新建mock

parent 1323310e
......@@ -6,8 +6,8 @@
<script lang="ts">
import Vue from 'vue'
import {DatePicker,Button,Table,Divider,Modal,Input,Upload,Col,Row,Popconfirm,Select } from 'ant-design-vue';
Vue.use(DatePicker).use(Button).use(Table).use(Divider).use(Modal).use(Input).use(Upload).use(Col).use(Row).use(Popconfirm).use(Select);
import {DatePicker,Button,Table,Divider,Modal,Input,Upload,Col,Row,Popconfirm,Select,FormModel } from 'ant-design-vue';
Vue.use(DatePicker).use(Button).use(Table).use(Divider).use(Modal).use(Input).use(Upload).use(Col).use(Row).use(Popconfirm).use(Select).use(FormModel);
export default Vue.extend({
......
import {banner} from '@/types/banner'
const bannerList:Array<banner> = [
{
key: '1',
time: '2021-09-01 9:00',
name: 'banner1',
location: '首页',
path:'图片',
state: '上架',
},
{
key: '2',
time: '2021-09-01 9:00',
name: 'banner2',
location: '首页',
path:'图片',
state: '下架'
},
{
key: '3',
time: '2021-09-01 9:00',
name: 'banner3',
location: '首页',
path:'图片',
state: '上架'
},
]
export {
bannerList
}
\ No newline at end of file
import { bannerList } from '@/mock/banner'
import { userList } from '@/mock/user'
import { newsList } from '@/mock/news'
import { msgList } from '@/mock/msg'
export{
bannerList,
userList,
newsList,
msgList
}
\ No newline at end of file
import {msg} from '@/types/msg'
const msgList:Array<msg> =[
{
key:'1',
time:'2020-09-21',
module:'这里是模板名称',
title:'续费通知',
type:'滚动通知',
content:'balabalalaala',
state:'发布中'
},
{
key:'2',
time:'2020-09-21',
module:'这里是模板名称',
title:'认证通知',
type:'系统通知',
content:'balabalalaala',
state:'已下架'
}
]
export{
msgList
}
\ No newline at end of file
import {news} from '@/types/news'
const newsList:Array<news>=[
{
key: '1',
time: '2021-09-21',
title: '新房贷政策出台',
type: '政策',
author:'丁洁',
state:'已发布',
content:'这里是资讯内容'
},
{
key: '2',
time: '2021-09-21',
title: '南京疫情',
type: '新闻',
author:'丁洁',
state:'已下架',
content:'这里是资讯内容'
},
{
key: '3',
time: '2021-09-21',
title: '湖南疫情',
type: '政策',
author:'丁洁',
state:'已更新',
content:'这里是资讯内容'
}
]
export{
newsList
}
\ No newline at end of file
import {user} from '@/types/user'
const userList:Array<user> =[
{
key: '1',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州高新支行营业部'
},
{
key: '2',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州滨江支行营业部'
},
{
key: '3',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州浦沿支行营业部'
},
{
key: '4',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州浦沿支行营业部'
}
]
export{
userList
}
\ No newline at end of file
export interface banner{
key:string
time:string,
name:string,
location:string,
path:string,
state:string
}
\ No newline at end of file
export interface msg{
key:string,
module:string,
time:string,
title:string,
type:string,
content:string,
state:string
}
\ No newline at end of file
export interface news{
key:string,
time:string,
title:string,
type:string,
author:string,
state:string,
content:string
}
\ No newline at end of file
export interface user{
key:string,
time: string,
account:string,
bank:string
}
\ No newline at end of file
<template>
<div>
<p class=" text-2xl font-bold">banner管理</p>
<p class=" text-2xl font-bold mb-5">banner管理</p>
<!-- timepicker -->
<span class=" font-semibold">发布时间:</span>
<a-range-picker :placeholder="['起始日期', '结束日期']" v-model="value" style=" margin-right:10px;" />
<a-range-picker :placeholder="['起始日期', '结束日期']" v-model="timerange" style=" margin-right:10px;" />
<a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
<!-- 新增 -->
......@@ -22,7 +22,7 @@
<a-form-model-item label="banner位置">
<span class=" text-sm text-black">首页</span>
</a-form-model-item>
<a-form-model-item label="上传图片" :required="true" prop="file">
<a-form-model-item label="上传图片" :required="true" prop="file">
<a-upload
name="file"
action="#"
......@@ -41,8 +41,8 @@
</a-modal>
<!-- banner列表 -->
<a-table :columns="columns" :data-source="data" style=" text-align: center; margin-top:40px;">
<span slot="path" slot-scope="text,record"><img src="../../../assets/icon/pic.png" alt="" srcset="" class=" w-6 h-6" @click="showPic(record.path)"></span>
<a-table :columns="columns" :data-source="bannerList" style=" text-align: center; margin-top:40px;">
<span slot="path" slot-scope="text,record"><a-icon type="picture" @click="showPic(record.path)" theme="twoTone" style="fontSize:20px"/></span>
<span slot="action" slot-scope="text,record">
<a v-if="record.state=='下架'" @click="add">上架</a>
<a v-else @click="remove">下架</a>
......@@ -63,94 +63,77 @@
<script lang="ts">
import Vue from "vue";
import { FormModel } from 'ant-design-vue';
Vue.use(FormModel);
import {banner} from '@/types/banner'
import {bannerList} from '@/mock/index';
export default Vue.extend({
components: {},
data() {
const columns = [
{
title: '发布时间',
dataIndex: 'time',
},
{
title: 'banner名称',
dataIndex: 'name',
},
{
title: 'banner位置',
dataIndex: 'location',
},
{
title: '图片',
dataIndex: 'path',
scopedSlots: { customRender: 'path' },
},
{
title: '状态',
dataIndex: 'state',
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' },
props:{
columns:{
type:Array,
default(){
return [
{
title: '发布时间',
dataIndex: 'time',
},
{
title: 'banner名称',
dataIndex: 'name',
},
{
title: 'banner位置',
dataIndex: 'location',
},
{
title: '图片',
dataIndex: 'path',
scopedSlots: { customRender: 'path' },
},
{
title: '状态',
dataIndex: 'state',
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' },
}
]
}
]
const data = [
{
key: '1',
time: '2021-09-01 9:00',
name: 'banner1',
location: '首页',
path:'图片',
state: '上架',
},
{
key: '2',
time: '2021-09-01 9:00',
name: 'banner2',
location: '首页',
path:'图片',
state: '下架'
},
{
key: '3',
time: '2021-09-01 9:00',
name: 'banner3',
location: '首页',
path:'图片',
state: '上架'
rules:{
type:Object,
default(){
return{
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
file: [{ required: true, message: '请上传文件', trigger: 'change' }],
}
}
},
]
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
file: [{ required: true, message: '请上传文件', trigger: 'change' }],
}
},
data() {
return{
value:[],
columns,
data,
timerange:[],
visible: false,
labelCol: { span: 5 },
wrapperCol: { span: 10},
form: {
name: '',
},
rules
}
},
watch: {},
computed:{
bannerList():Array<banner>{
return bannerList
}
},
methods:{
onDelete(key:string) {
const dataSource = [...this.data];
this.data = dataSource.filter(item => item.key !== key);
const dataSource = [...this.bannerList];
this.bannerList = dataSource.filter(item => item.key !== key);
},
query(){
console.log(this.value)
console.log(this.timerange)
},
add(){
console.log('add')
......
<template>
<div class="">
<p class=" text-2xl font-bold">实时数据</p>
<p class=" text-2xl font-bold mb-5">实时数据</p>
<a-row type="flex" justify="center" align="middle" :gutter="[50,100]">
<a-col >
<card title="总注册用户数" total="3157"/>
......
<template>
<div>
<p class=" text-2xl font-bold">消息管理</p>
<p class=" text-2xl font-bold mb-5">消息管理</p>
<!-- 消息分类 -->
<span class=" mr-3">消息分类</span>
<a-select :default-value="msgType[0]" style="width: 120px; margin-right:10px;">
......@@ -8,12 +8,12 @@
</a-select>
<!-- 操作 -->
<a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
<a-button type="primary" style=" margin-right:10px;" @click="show = true">发布</a-button>
<a-button type="primary" style=" margin-right:10px;" @click="publish">发布</a-button>
<!-- 发布弹窗 -->
<a-modal v-model="show" title="发布消息" :centered="true" footer="">
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
<a-form-model-item label="模板名称" :required="true" prop="name">
<a-input v-model="form.name" placeholder="请输入模板名称" style="width: 200px"/>
<a-form-model-item label="模板名称" :required="true" prop="module">
<a-input v-model="form.module" placeholder="请输入模板名称" style="width: 200px"/>
</a-form-model-item>
<a-form-model-item label="消息分类" :required="true" prop="type">
<a-select :default-value="msgType[0]" style="width: 200px" v-model="form.type">
......@@ -24,7 +24,7 @@
<a-input v-model="form.title" placeholder="请输入消息标题" style="width: 200px"/>
</a-form-model-item>
<a-form-model-item label="消息内容" :required="true" type="textarea" prop="content" >
<a-input v-model="form.content" placeholder="请输入消息内容" style="width: 200px" />
<a-textarea v-model="form.content" placeholder="请输入消息内容" style="width: 300px" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">发布</a-button>
......@@ -38,7 +38,7 @@
<p class=" text-base">{{current.content}}</p>
</a-modal>
<!-- 消息列表 -->
<a-table :columns="columns" :data-source="data" style=" text-align: center; margin-top:40px;" bordered >
<a-table :columns="columns" :data-source="msgList" style=" text-align: center; margin-top:40px;" bordered >
<!-- 新闻内容 -->
<span slot="content" slot-scope="text,record">
<a href="javascript:;" @click="showModal(record)">查看</a>
......@@ -68,9 +68,15 @@
<script lang="ts">
import Vue from 'vue'
import { FormModel } from 'ant-design-vue';
Vue.use(FormModel);
import {msg} from '@/types/msg'
import {msgList} from '@/mock/index'
export default Vue.extend({
computed:{
msgList():Array<msg>{
return msgList
}
},
props:{
msgType:{
type:Array,
......@@ -90,15 +96,16 @@ export default Vue.extend({
},
publish(){
this.resetForm()
this.show = true
},
showModal(current:object){
this.visible = true
this.current = current
},
onDelete(key:string) {
const dataSource = [...this.data];
this.data = dataSource.filter(item => item.key !== key);
const dataSource = [...this.msgList];
this.msgList = dataSource.filter(item => item.key !== key);
},
handleOk(){
this.visible = false
......@@ -114,11 +121,20 @@ export default Vue.extend({
});
},
resetForm() {
(this.$refs.ruleForm as FormModel).resetFields();
let form = this.form
type formtype = keyof typeof form
Object.keys(this.form).forEach(m=>{
this.form[m as formtype] = ''
})
},
edit(record:object){
console.log(record);
// this.form.title = record.title
edit(record:msg){
let form = this.form
type msgtype = keyof msg
type formtype = keyof typeof form
Object.keys(this.form).map(m=>{
this.form[m as formtype] = record[m as msgtype ]
})
this.show = true
}
},
data(){
......@@ -150,24 +166,6 @@ export default Vue.extend({
scopedSlots: { customRender: 'action' },
},
]
const data =[
{
key:'1',
time:'2020-09-21',
title:'续费通知',
type:'滚动通知',
content:'balabalalaala',
state:'发布中'
},
{
key:'2',
time:'2020-09-21',
title:'认证通知',
type:'系统通知',
content:'balabalalaala',
state:'已下架'
}
]
const rules={
name: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
......@@ -184,7 +182,6 @@ export default Vue.extend({
}
return{
columns,
data,
visible:false,
show:false,
current:{},
......@@ -195,6 +192,7 @@ export default Vue.extend({
title:'',
type:'',
content:'',
module:''
},
rules
}
......
<template>
<div>
<p class=" text-2xl font-bold">资讯管理</p>
<p class=" text-2xl font-bold mb-5">资讯管理</p>
<!-- 搜索框 -->
<a-input placeholder="标题模糊搜索" v-model="search" style="width: 150px; margin-right:10px;"/>
<!-- timepicker -->
......@@ -9,7 +9,7 @@
<!-- 咨询分类 -->
<span class=" mr-3">资讯分类</span>
<a-select :default-value="newsType[0]" style="width: 120px; margin-right:10px;" v-model="value">
<a-select-option :value="type" v-for="(type,i) in newsType" :key="i">
<a-select-option v-for="(type,i) in newsType" :key="i">
{{type}}
</a-select-option>
</a-select>
......@@ -18,7 +18,7 @@
<a-button type="primary" style=" margin-right:10px;" @click="reset">重置</a-button>
<a-button type="primary" @click="release">发布</a-button>
<!-- 资讯列表 -->
<a-table :columns="columns" :data-source="data" style=" text-align: center; margin-top:40px;" bordered >
<a-table :columns="columns" :data-source="newsList" style=" text-align: center; margin-top:40px;" bordered >
<!-- 新闻内容 -->
<span slot="content">
<a href="javascript:;">查看</a>
......@@ -28,7 +28,7 @@
<a v-if="record.state=='已下架'" @click="add">上架</a>
<a v-else @click="remove">下架</a>
<a-divider type="vertical" />
<a href="javascript:;">编辑</a>
<a @click="edit(record.key)">编辑</a>
<a-popconfirm
title="确定删除吗?"
cancelText="取消"
......@@ -40,14 +40,20 @@
</a-popconfirm>
</span>
</a-table>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import {news} from '@/types/news'
import {newsList} from '@/mock/index'
export default Vue.extend({
computed:{
newsList():Array<news>{
return newsList
}
},
props:{
newsType:{
type:Array,
......@@ -89,38 +95,10 @@ export default Vue.extend({
scopedSlots: { customRender: 'action' },
}
]
const data=[
{
key: '1',
time: '2021-09-21',
title: '新房贷政策出台',
type: '政策',
author:'丁洁',
state:'已发布',
},
{
key: '2',
time: '2021-09-21',
title: '南京疫情',
type: '新闻',
author:'丁洁',
state:'已下架',
},
{
key: '3',
time: '2021-09-21',
title: '湖南疫情',
type: '政策',
author:'丁洁',
state:'已更新',
}
]
return{
search:'',
time:[],
columns,
type:'',
data,
value:''
}
},
......@@ -135,11 +113,14 @@ export default Vue.extend({
this.value =''
},
release(){
this.$router.push('/backend/news/publish')
this.$router.push({name:'publish'})
},
edit(key:string){
this.$router.push({name:'publish',query:{key:key}})
},
onDelete(key:string) {
const dataSource = [...this.data];
this.data = dataSource.filter(item => item.key !== key);
const dataSource = [...this.newsList];
this.newsList = dataSource.filter(item => item.key !== key);
},
add(){
......
<template>
<div>
<p class=" text-2xl font-bold">发布资讯</p>
<p class=" text-2xl font-bold mb-5">发布资讯</p>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
<a-form-model-item label="标题" prop="title">
<a-input v-model="form.title" placeholder="请输入标题" style="width: 200px"/>
</a-form-model-item>
<a-form-model-item label="作者名称" prop="author">
<a-input v-model="form.author" placeholder="请输入作者名称" style="width: 200px"/>
</a-form-model-item>
<a-form-model-item label="文章分类" prop="type">
<a-select :default-value="articalType[0]" style="width: 200px" v-model="form.type">
<a-select-option v-for="(type,i) in articalType" :key="i">{{type}}</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="上传概要图片" :required="true" prop="file" >
<a-upload
name="file"
action="#"
accept="image/*"
@change="handleChange"
required
>
<a-button style="width:200px"> <a-icon type="upload" /> 点击上传 </a-button>
</a-upload>
</a-form-model-item>
<!-- 编辑器 -->
<!-- 发布操作 -->
<a-form-model-item :wrapper-col="{ span: 11 }">
<a-button type="primary" @click="onSubmit">确定发布</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
\ No newline at end of file
</template>
<script lang="ts">
import Vue from 'vue';
import { FormModel } from 'ant-design-vue';
export default Vue.extend({
props:{
articalType:{
type:Array,
default(){
return ['新闻','政策']
}
}
},
data(){
return{
form:{
title:'',
author:'',
type:'',
},
labelCol: { span: 5 },
wrapperCol: { span:4},
rules:{
title: [{ required: true, message: '请输入标题', trigger: 'change' }],
type: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
author: [{ required: true, message: '请输入作者名称', trigger: 'change' }],
file: [{ required: true, message: '请上传概要图片', trigger: 'change' }],
}
}
},
methods:{
handleChange(info:any) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
console.log(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
console.log(`${info.file.name} file upload failed.`);
}
},
onSubmit() {
(this.$refs.ruleForm as FormModel).validate(valid => {
if (valid) {
} else {
console.log('error submit!!');
return false;
}
});
},
}
})
</script>
\ No newline at end of file
<template>
<div>
<p class=" text-2xl font-bold mb-5">修改密码</p>
<a-form-model :model="form" :labelCol="labelCol" :wrapperCol="wrapperCol" ref="securityForm" :rules="rules">
<a-form-model-item label="原密码" prop="formerPass">
<a-input v-model="form.formerPass" placeholder="请输入原始密码" style="width: 200px"/>
</a-form-model-item>
<a-form-model-item label="新密码" prop="newPass">
<a-input v-model="form.newPass" placeholder="新密码6-20位" style="width: 200px" type="password"/>
</a-form-model-item>
<a-form-model-item label="确认密码" prop="verifyPass">
<a-input v-model="form.verifyPass" placeholder="再次确认密码" style="width: 200px" type="password"/>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 11 }">
<a-button type="primary" @click="onSubmit">提交</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { FormModel } from 'ant-design-vue'
export default Vue.extend({
data(){
let form={
formerPass:'',
newPass:'',
verifyPass:''
}
let validatePass = (rule:any, value:string, callback:Function) => {
if (value === '') {
callback();
} else {
if (form.verifyPass !== '') {
(this.$refs.securityForm as FormModel).validateField('verifyPass',callback());
}
callback();
}
}
let validatePass2 = (rule:any, value:string, callback:Function) => {
if (value === '') {
callback(new Error('请确认密码'));
} else if (value !== form.newPass) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
}
return{
labelCol: { span: 5 },
wrapperCol: { span:4},
form,
rules:{
formerPass: [{ required: true, message: '', trigger: 'blur' }],
newPass: [{ required: true,min:6,max:20,message: '请输入6-20位密码', trigger: 'blur'},{validator: validatePass,trigger: 'change'}],
verifyPass: [{ required: true, message: '请确认密码', trigger: 'blur' },{validator: validatePass2,trigger: 'change'}],
},
confirmDirty: false
}
},
methods:{
onSubmit() {
(this.$refs.securityForm as FormModel).validate(valid => {
if (valid) {
} else {
console.log('error submit!!');
return false;
}
});
},
}
})
</script>
\ No newline at end of file
<template>
<div>
<p class=" text-2xl font-bold">用户管理</p>
<p class=" text-2xl font-bold mb-5">用户管理</p>
<!-- timepicker -->
<span class=" font-semibold">注册时间:</span>
<a-range-picker @change="onChange" :placeholder="['起始日期', '结束日期']" v-model="value" style=" margin-right:10px;" />
<a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
<a-button type="primary" @click="reset">重置</a-button>
<!-- 客户信息列表 -->
<a-table :columns="columns" :data-source="data" style=" text-align: center; margin-top:40px;" bordered >
<a-table :columns="columns" :data-source="userList" style=" text-align: center; margin-top:40px;" bordered >
</a-table>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import {DatePicker,Button} from 'ant-design-vue';
import {userList} from '@/mock/index'
import {user} from '@/types/user'
Vue.use(DatePicker).use(Button);
export default Vue.extend({
components: {},
computed: {
userList():Array<user>{
return userList
}
},
data() {
const columns = [
{
......@@ -33,36 +39,9 @@ export default Vue.extend({
dataIndex: 'bank',
}
]
const data =[
{
key: '1',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州高新支行营业部'
},
{
key: '2',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州滨江支行营业部'
},
{
key: '3',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州浦沿支行营业部'
},
{
key: '4',
time: '2021-09-01 9:00',
account: '13101362773',
bank: '杭州浦沿支行营业部'
}
]
return {
value:[],
columns,
data
};
},
watch: {},
......
......@@ -79,16 +79,16 @@ export const menuList: iMenuConfigItem[] = [
roles: [
eRole.superManager,
],
getChildren: () => [
{
getName: () => '发布内容',
routeName: 'publish',
path: '/backend/news/publish',
component: () => import('@/views/Root/News/publish.vue'),
roles: [eRole.superManager],
onClick: (e: Event) => {},
}
]
},
{
getName: () => '发布内容',
routeName: 'publish',
hiddeInMenu:true,
belongToMenuName:'newManage',
path: '/backend/news/publish',
component: () => import('@/views/Root/News/publish.vue'),
roles: [eRole.superManager],
onClick: (e: Event) => {},
},
{
getName: () => '消息管理',
......@@ -100,6 +100,20 @@ export const menuList: iMenuConfigItem[] = [
eRole.superManager,
],
},
{
getName: () => '安全设置',
onClick: (e: Event) => {},
routeName: 'security',
path: '/backend/security',
component: () => import('@/views/Root/Security/index.vue'),
roles: [
eRole.superManager,
eRole.firstLevel_branch,
eRole.firstLevel_sub_branch,
eRole.secondary_branch,
eRole.secondary_sub_branch,
],
},
]
export default function getMenuList(role: eRole): iMenuList {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment