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

src/App.vue

@@ -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({
   

src/mock/banner.ts

+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

src/mock/index.ts

+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

src/mock/msg.ts

+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

src/mock/news.ts

+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

src/mock/user.ts

+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

src/types/banner.ts

+export interface banner{
+  key:string
+  time:string,
+  name:string,
+  location:string,
+  path:string,
+  state:string
+}
\ No newline at end of file

src/types/msg.ts

+export interface msg{
+  key:string,
+  module:string,
+  time:string,
+  title:string,
+  type:string,
+  content:string,
+  state:string
+}
\ No newline at end of file

src/types/news.ts

+export interface news{
+  key:string,
+  time:string,
+  title:string,
+  type:string,
+  author:string,
+  state:string,
+  content:string
+}
\ No newline at end of file

src/types/user.ts

+export interface user{
+  key:string,
+  time: string,
+  account:string,
+  bank:string
+}
\ No newline at end of file

src/views/Root/Banner/index.vue

 <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')

src/views/Root/Home/index.vue

 <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"/>

src/views/Root/Msg/index.vue

 <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
     }

src/views/Root/News/index.vue

 <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(){
 

src/views/Root/News/publish.vue

 <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>
+</template>
\ No newline at end of file
+
+<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

src/views/Root/Security/index.vue

+<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

src/views/Root/UserManage/index.vue

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

src/views/Root/getMenuList.ts

@@ -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 {