0.0.18

权限管理

src/api/complaint.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+//1.投诉举报信息 start ------------------------------------->
+
+//1.1 获取投诉举报列表
+export function getComplaint(params) {
+  return request({
+    url: '/public/getComplaint',
+    method: 'get',
+    params
+  })
+}
+
+//1.2 查看举报信息
+export function getLetterOfComplaintInfo(params) {
+  return request({
+    url: '/public/getLetterOfComplaintInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.3 添加投诉举报信息
+export function addComplaint(data) {
+  return request({
+    url: '/public/addComplaint',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 修改投诉举报
+export function upComplaint(data) {
+  return request({
+    url: '/public/upComplaint',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 查询状态
+export function getLetterType(params) {
+  return request({
+    url: '/public/getLetterType',
+    method: 'get',
+    params
+  })
+}
+
+//1.5 查询受理状态
+export function checkMeasure(params) {
+  return request({
+    url: '/public/checkMeasure',
+    method: 'get',
+    params
+  })
+}
+//1.投诉举报信息 end ------------------------------------->

src/api/menu.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+//1.配置动态导航 start ------------------------------------->
+
+//1.1 获取资讯列表
+export function getMenuList(params) {
+  return request({
+    url: '/authority/getMenuList',
+    method: 'get',
+    params
+  })
+}
+
+//1.2 添加动态导航
+export function addMenu(data) {
+  return request({
+    url: '/authority/addMenu',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 修改菜单
+export function updateMenu(data) {
+  return request({
+    url: '/authority/updateMenu',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 删除菜单
+export function delMenu(data) {
+  return request({
+    url: '/authority/delMenu',
+    method: 'post',
+    data
+  })
+}
+
+//1.配置动态导航 end ------------------------------------->

src/api/public.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export function getAdminIndex(params) {
+  return request({
+    url: '/website/getAdminIndex',
+    method: 'get',
+    params
+  })
+}
+
+

src/api/userRole.js

@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+//1.用户管理 start ------------------------------------->
+
+//1.1 获取角色列表  
+export function roleList(params) {
+  return request({
+    url: '/user/roleList',
+    method: 'get',
+    params
+  })
+}
+
+//1.2 删除角色
+export function delRole(data) {
+  return request({
+    url: '/user/delRole',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 获取用户菜单
+export function getAllMenuList(params) {
+  return request({
+    url: '/authority/getAllMenuList',
+    method: 'get',
+    params
+  })
+}
+
+//1.4 添加角色
+export function addRole(data) {
+  return request({
+    url: '/user/addRole',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 更新角色
+export function updateRole(data) {
+  return request({
+    url: '/user/updateRole',
+    method: 'post',
+    data
+  })
+}
+
+//1.6 查看角色
+export function roleInfo(params) {
+  return request({
+    url: '/user/roleInfo',
+    method: 'get',
+    params
+  })
+}
+
+//用户管理 end ------------------------------------->

src/router/index.js

@@ -188,6 +188,70 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/menuList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/menu/menulist'),
+        meta: {
+          title: '菜单列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/complaintList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/complaint/complaintList'),
+        meta: {
+          title: '投诉举报',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/roleList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/role/roleList'),
+        meta: {
+          title: '角色管理',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/userList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/role/userList'),
+        meta: {
+          title: '用户管理',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/store/modules/complaint.js

@@ -0,0 +1,83 @@
+import {getComplaint,getLetterOfComplaintInfo,addComplaint,upComplaint,
+  getLetterType,checkMeasure} from '@/api/complaint'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.投诉管理 start ---------------------------------------->
+  //获取投诉举报列表
+  getComplaint({commit},data) {
+    return new Promise((resolve, reject) => {
+      getComplaint(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //查看举报信息
+  getLetterOfComplaintInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getLetterOfComplaintInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加投诉举报信息
+  addComplaint({commit},data) {
+    return new Promise((resolve, reject) => {
+      addComplaint(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改投诉举报
+  upComplaint({commit},data) {
+    return new Promise((resolve, reject) => {
+      upComplaint(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取状态
+  getLetterType({commit},data) {
+    return new Promise((resolve, reject) => {
+      getLetterType(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取受理状态
+  checkMeasure({commit},data) {
+    return new Promise((resolve, reject) => {
+      checkMeasure(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //资讯中心 end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/menu.js

@@ -0,0 +1,62 @@
+import {getMenuList,addMenu,updateMenu,delMenu} from '@/api/menu'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.动态路由 start ---------------------------------------->
+  //获取路由列表
+  getMenuList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getMenuList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加路由
+  addMenu({commit},data) {
+    return new Promise((resolve, reject) => {
+      addMenu(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改路由
+  updateMenu({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateMenu(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //删除路由
+  delMenu({commit},data) {
+    return new Promise((resolve, reject) => {
+      delMenu(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //资讯中心 end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/public.js

@@ -0,0 +1,33 @@
+import {getAdminIndex} from '@/api/public'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //公共api start ---------------------------------------->
+  //首页数据
+  getAdminIndex({commit},data) {
+    return new Promise((resolve, reject) => {
+      getAdminIndex(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+ 
+  //公共api end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/userRole.js

@@ -0,0 +1,83 @@
+import {roleList,delRole,getAllMenuList,addRole,updateRole,
+  roleInfo} from '@/api/userRole'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.角色管理 start ---------------------------------------->
+  //获取角色列表
+  roleList({commit},data) {
+    return new Promise((resolve, reject) => {
+      roleList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //删除角色
+  delRole({commit},data) {
+    return new Promise((resolve, reject) => {
+      delRole(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取角色菜单权限  
+  getAllMenuList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getAllMenuList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加角色
+  addRole({commit},data) {
+    return new Promise((resolve, reject) => {
+      addRole(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //更新角色
+  updateRole({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateRole(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //查看角色
+  roleInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      roleInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //角色管理 end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/styles/global.less

@@ -1,15 +1,24 @@
- /*1.页面布局 start------------------------------------------------------------>*/
- //页面布局样式
+/*1.页面布局 start------------------------------------------------------------>*/
+//全局颜色
+@defaultBg:#fff;
+@defaultBorder:#E9EDF7;
+@defaultText:#999999;
+//按钮颜色
+@deleteBg:#F7E5E5;
+@editBg:#E4E8FD;
+@mainBg:#E3EFE6;
+
+//页面布局样式
 .layerBox_search {
   margin:30px 30px 10px 30px;
-  background: #fff;
+  background: @defaultBg;
   border-radius: 20px;
-  border:1px solid #E9EDF7;
+  border:1px solid @defaultBorder;
   padding: 20px 0;
   box-sizing: border-box;
   .searchTitle {
     font-size:14px;
-    color:#999999;
+    color:@defaultText;
     margin-bottom:10px;
     white-space:nowrap;
   }
@@ -37,8 +46,8 @@
 .layerBox {
   margin:30px;
   border-radius: 20px;
-  background:#fff;
-  border:1px solid #E9EDF7;
+  background:@defaultBg;
+  border:1px solid @defaultBorder;
   padding: 20px 20px 20px 20px;
   box-sizing: border-box;
 }
@@ -76,21 +85,21 @@
 }
 .listDeleteBtn{
   color:#CC5F5F;
-  background:#F7E5E5;
+  background:@deleteBg;
 }
 .listDeleteBtn:hover {
- background:#EFCFCF;
+  background:#EFCFCF;
 }
 .listEditBtn{
   color:#5570F1;
-  background:#E4E8FD;
+  background:@editBg;
 }
 .listEditBtn:hover {
   background:#CCD1F1;
 }
 .listMainBtn{
   color:#519C66;
-  background:#E3EFE6;
+  background:@mainBg;
 }
 .listMainBtn:hover {
   background:#CAD9CB;
@@ -105,6 +114,11 @@
   .el-cascader {
     width:100%;
   }
+  .treeBox {
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 20px;
+  }
 }
 .delete-button {
   width:30px;
@@ -200,6 +214,23 @@
   padding-top: 30px;
 }
 
+//投诉举报
+.complaintListdownloadBtn {
+  width: 70px;
+  height: 28px;
+  color: #5570F1;
+  background: #E4E8FD;
+  line-height: 28px;
+  text-align: center;
+  border-radius: 8px;
+  display: block;
+}
+
+.complaintListdownloadBtn:hover {
+  color: #5570F1;
+  background: #CCD1F1;
+}
+
 /*页面布局 end------------------------------------------------------------>*/
 
 

src/views/complaint/complaintList.vue

@@ -0,0 +1,657 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">性质：</div>
+              <el-select v-model="getApiData.nature" placeholder="请选择..">
+                <el-option
+                  v-for="item in natureData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">性质进度：</div>
+              <el-select v-model="getApiData.nature_level" placeholder="请选择">
+                <el-option-group
+                  v-for="group in netureLevelData"
+                  :key="group.id"
+                  :label="group.type_name">
+                  <el-option
+                    v-for="item in group.children"
+                    :key="item.id"
+                    :label="item.type_name"
+                    :value="item.id">
+                  </el-option>
+                </el-option-group>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">类型：</div>
+              <el-select v-model="getApiData.type" placeholder="请选择..">
+                <el-option
+                  v-for="item in typeData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="layerBoxLineTwo">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">类型进度：</div>
+              <el-select v-model="getApiData.type_level" placeholder="请选择">
+                <el-option-group
+                  v-for="group in typeLevelData"
+                  :key="group.id"
+                  :label="group.type_name">
+                  <el-option
+                    v-for="item in group.children"
+                    :key="item.id"
+                    :label="item.type_name"
+                    :value="item.id">
+                  </el-option>
+                </el-option-group>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择..">
+                <el-option
+                  v-for="item in statusData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="layerBoxNoBg">
+      <div></div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="title" label="标题"></el-table-column>
+            <el-table-column prop="nature_name" label="性质"></el-table-column>
+            <el-table-column prop="nature_level_name" label="进度"></el-table-column>
+            <el-table-column prop="type_name" label="类型"></el-table-column>
+            <el-table-column prop="type_level_name" label="类型说明"></el-table-column>
+            <!-- <el-table-column prop="judgment" label="判决书"></el-table-column>
+            <el-table-column prop="audio_and_video" label="录音录像"></el-table-column>
+            <el-table-column prop="contract" label="合同"></el-table-column>
+            <el-table-column prop="qualifications" label="资质"></el-table-column> -->
+            <el-table-column prop="money" label="涉案标的额"></el-table-column>
+            <el-table-column prop="name" label="姓名"></el-table-column>
+            <el-table-column prop="mobile" label="电话"></el-table-column>
+            <el-table-column prop="status" label="状态"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="120" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框start------------------------------------------------------------>
+    <el-dialog title="编辑投诉" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="标题：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.title" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="性质：" :label-width="formLabelWidth" prop="nature" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-select v-model="form.nature" placeholder="请选择..">
+                <el-option
+                  v-for="item in windowNatureData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="性质进度：" :label-width="formLabelWidth" prop="nature_level" class="custom-align-right">
+            <el-select v-model="form.nature_level" placeholder="请选择">
+              <el-option-group
+                v-for="group in windowNetureLevelData"
+                :key="group.id"
+                :label="group.type_name">
+                <el-option
+                  v-for="item in group.children"
+                  :key="item.id"
+                  :label="item.type_name"
+                  :value="item.id">
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型：" :label-width="formLabelWidth" prop="type" class="custom-align-right">
+            <el-select v-model="form.type" placeholder="请选择..">
+              <el-option
+                v-for="item in typeData"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型进度：" :label-width="formLabelWidth" prop="type_level" class="custom-align-right">
+            <el-select v-model="form.type_level" placeholder="请选择">
+              <el-option-group
+                v-for="group in windowTypeLevelData"
+                :key="group.id"
+                :label="group.type_name">
+                <el-option
+                  v-for="item in group.children"
+                  :key="item.id"
+                  :label="item.type_name"
+                  :value="item.id">
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="详细说明：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input type="textarea" v-model="form.describe" class="custom-textarea" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="判决书：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.judgment" :href="form.judgment" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="录音录像：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.audio_and_video" :href="form.judgment" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="合同：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.contract" :href="form.contract" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="资质：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.qualifications" :href="form.qualifications" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="涉案标的金额：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.money" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="姓名：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.id_card" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="期待学习法律：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.like_remark" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="状态：" :label-width="formLabelWidth" prop="status" class="custom-align-right">
+            <el-radio-group v-model="form.status">
+              <el-radio label="100">待审核</el-radio>
+              <el-radio label="101">已接案</el-radio>
+              <el-radio label="102">已拒绝</el-radio>
+              <el-radio label="103">已完结</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注信息：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input type="textarea" v-model="form.reason" class="custom-textarea"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editData">提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
+
+
+  </div>
+</template>
+
+<script>
+//引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"投诉举报",
+      tableData: [],//列表
+      allCount:0,//总条数
+      editId:0,//要修改的网站id
+      getApiData:{
+        is_admin:1,//是否为管理员
+        nature:"",//性质
+        nature_level:"",//性质进度
+        type:"",//类型
+        type_level:"",//类型进度
+        status:"",//状态 
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      natureData:[],//所有性质
+      netureLevelData:[],//所有进度
+      typeData:[],//所有类型
+      typeLevelData:[],//所有类型进度
+      statusData:[],//所有状态 
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //是否显示弹出窗口
+      windowStatus:false,
+      formLabelWidth: '120px',
+      //弹出框设置 end ------------------------------------------------------------>
+
+      //3.搜索相关 start ------------------------------------------------------------>
+      //搜索相关 end ------------------------------------------------------------>
+
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
+      form: {
+        title:"",//标题
+        nature:"",//性质
+        nature_level:"",//进度
+        type:"",//类型
+        type_level:"",//类型进度
+        describe:"",//详细说明
+        judgment:"",//判决书
+        audio_and_video:"",//录音录像
+        contract:"",//合同
+        qualifications:"",//资质
+        money:"",//涉案标的额
+        name:"",//姓名
+        id_card:"",//身份证
+        status:"100",//状态
+        like_remark:"",//你最想了解的法律知识
+        reason:"",//备注信息
+      },
+      windowNatureData:[],//所有性质
+      windowNetureLevelData:[],//所有进度
+      windowTypeData:[],//所有类型
+      windowTypeLevelData:[],//所有类型进度
+      windowStatusData:[],//所有状态 
+      //3.2表单验证规则
+      formRules: {
+        //性质不能为空
+        nature:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //进度不能为空
+        nature_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型不能为空
+        type:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型进度不能为空
+        type_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //状态不能为空
+        status:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 获取内容
+    getData(){
+      this.$store.dispatch('complaint/getComplaint',this.getApiData).then(res=> {
+        console.log(res)
+        let data = [];
+        for(let item of res.data.rows){
+          // item.judgment = item.judgment.length > 0 ? "有" : "没有";
+          // item.audio_and_video = item.audio_and_video.length > 0 ? "有" : "没有";
+          // item.contract = item.contract.length > 0 ? "有" : "没有";
+          // item.qualifications = item.qualifications.length > 0 ? "有" : "没有";
+
+          // 判断 item.status 的状态
+          switch (item.status) {
+            case 100:
+              item.status = "待审核";
+              break;
+            case 101:
+              item.status = "已接案";
+              break;
+            case 102:
+              item.status = "已拒绝";
+              break;
+            case 103:
+              item.status = "已完结";
+              break;
+            default:
+              item.status = "未知状态"; // 可选：处理未定义的状态
+              break;
+          }
+        }
+        this.tableData = res.data.rows;//放入数据
+        this.allCount = res.data.count;//放入总条数
+      })
+    },
+    //获取所有状态
+    getStatus(){
+      //获取性质和进度
+      let getNature = {
+        type:1
+      }
+      this.$store.dispatch('complaint/getLetterType',getNature).then(res=> {
+        //格式化性质
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏
+          this.natureData.push(data)
+          //弹窗框
+          this.windowNatureData.push(data)
+        }
+        //把进度放进去 无需格式化
+        this.netureLevelData = res.data;
+        //弹窗框
+        this.windowNetureLevelData = res.data;
+      })
+      
+      //获取类型和类型说明
+      let getType = {
+        type:2
+      }
+      this.$store.dispatch('complaint/getLetterType',getType).then(res=> {
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏
+          this.typeData.push(data)
+          //弹窗框
+          this.windowTypeData.push(data)
+        }
+        //搜索栏
+        this.typeLevelData = res.data;
+        //弹窗框
+        this.windowTypeLevelData = res.data;
+      })
+      let getStatus = {
+        type:10
+      }
+      this.$store.dispatch('complaint/getLetterType',getStatus).then(res=> {
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏  
+          this.statusData.push(data)
+          //弹窗框
+          this.windowStatusData.push(data)
+        }
+      })
+    },
+    //1.2 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.3 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 重置按钮
+    clearSearchList(){
+      this.getApiData.is_admin = 1;
+      this.getApiData.nature = "";
+      this.getApiData.nature_level = "";
+      this.getApiData.type = "";
+      this.getApiData.type_level = "";
+      this.getApiData.status = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
+    openWindow() {
+      //this.clearToServe();
+      this.windowStatus = true;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //2.3 清空提交窗口
+    clearToServe(){
+      //重置窗口
+      this.editId = "";
+      this.form.title = "";
+      this.form.nature = "";
+      this.form.nature_level = "";
+      this.form.type = "";
+      this.form.type_level = "";
+      this.form.describe = "";
+      this.form.judgment = "";
+      this.form.audio_and_video = "";
+      this.form.contract = "";
+      this.form.qualifications = "";
+      this.form.money = "";
+      this.form.name = "";
+      this.form.id_card = "";
+      this.form.like_remark = "";
+      this.from.reason = "";
+    },
+    //弹出框设置 end ------------------------------------------------------------>
+
+
+    //4.编辑 start ------------------------------------------------------------>
+    //回显数据
+    editRow(data){
+      //先判断这条数据是否已经被其他人受理
+      this.$store.dispatch('complaint/checkMeasure',{id:data.id}).then(res=> {
+        if(res.code == 200){
+          //列表里面已经有了，就不需要再请求了
+          //开始回显数据
+          this.openWindow();
+          console.log(data)
+          this.editId = data.id;
+          this.form.title = data.title;
+          this.form.nature = data.nature;
+          this.form.nature_level = data.nature_level;
+          this.form.type = data.type;
+          this.form.type_level = data.type_level;
+          this.form.describe = data.describe;
+          if(data.judgment.length > 0){
+            this.form.judgment = data.judgment[0].fileSrc;
+          }
+          if(data.audio_and_video.length > 0){
+            this.form.audio_and_video = data.audio_and_video[0].fileSrc;
+          }
+          if(data.contract.length > 0){
+            this.form.contract = data.contract[0].fileSrc;
+          }
+          if(data.qualifications.length > 0){
+            this.form.qualifications = data.qualifications[0].fileSrc;
+          }
+          this.form.money = data.money;
+          this.form.id_card = data.id_card;
+          this.form.like_remark = data.like_remark;
+          this.form.reason = data.reason;
+          switch (data.status) {
+            case "待审核":
+            this.form.status = "100";
+              break;
+            case "已接案":
+            this.form.status = "101";
+              break;
+            case "已拒绝":
+              this.form.status = "102";
+              break;
+            case "已完结":
+              this.form.status = "103";
+              break;
+            default:
+              this.form.status = "0"; // 可选：处理未定义的状态
+              break;
+          }
+          console.log(this.form.status) //100
+          this.form.name = data.name;
+
+        }else{
+          this.$message({
+            type: 'warning',
+            message: '该数据已经被其他人受理！'
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+
+    },
+    //提交编辑
+    editData(){
+      let data = {
+        id:this.editId,
+        nature:this.form.nature,
+        nature_level:this.form.nature_level,
+        type:this.form.type,
+        type_level:this.form.type_level,
+        status:this.form.status,
+        reason:this.form.reason
+      }
+
+      //console.log(data)
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('complaint/upComplaint',data).then(res=> {
+            console.log(res)
+            this.closeWindow();
+            this.$message({
+              type: 'success',
+              message: '修改成功！'
+            });
+            this.getData();
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+      
+    }
+    //编辑 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //获取页面列表
+    this.getData();
+    //查询状态
+    this.getStatus();
+  }
+}
+</script>
+
+<style scoped lang="less">
+//表单微调 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .el-select-group__title {
+  color: #909399;
+}
+::v-deep .el-select {
+  width: 100% !important;
+}
+</style>

src/views/complaint/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/dashboard/admin/components/LineChart.vue

@@ -27,7 +27,7 @@ export default {
       default: true
     },
     chartData: {
-      type: Object,
+      type: Array,
       required: true
     }
   },
@@ -61,10 +61,13 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData } = {}) {
+    setOptions(chartData) {
+      const actualData = chartData.map(item => item.total_count)
+      const dates = chartData.map(item => item.date)
+
       this.chart.setOption({
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: dates,
           boundaryGap: false,
           axisTick: {
             show: false
@@ -87,29 +90,19 @@ export default {
         yAxis: {
           axisTick: {
             show: false
+          },
+          minInterval: 1,
+          axisLabel: {
+            formatter: function (value) {
+              return value
+            }
           }
         },
         legend: {
-          data: ['expected', 'actual']
+          data: ['新增文章数量']
         },
         series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
+          name: '新增文章数量',
           smooth: true,
           type: 'line',
           itemStyle: {

src/views/dashboard/admin/components/RingChart.vue

@@ -20,14 +20,26 @@ export default {
     },
     height: {
       type: String,
-      default: '300px',
+      default: '350px',
     },
+    chartData: {
+      type: Array,
+      required: true
+    }
   },
   data() {
     return {
       chart: null,
     };
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initChart();
@@ -43,6 +55,14 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
+      this.setOptions(this.chartData);
+    },
+    setOptions(chartData) {
+      // 格式化数据
+      const data = chartData.map(item => ({
+        value: item.counts, // 将 counts 作为 value
+        name: item.typeName  // 将 typeName 作为 name
+      }));
 
       this.chart.setOption({
         tooltip: {
@@ -52,21 +72,15 @@ export default {
         legend: {
           left: 'center',
           bottom: '10',
-          data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'],
+          data: data.map(item => item.name) // 使用提取的 typeName 作为图例
         },
         series: [
           {
-            name: 'Example Data',
+            name: '会员类型', // 可以根据需要修改名称
             type: 'pie',
-            radius: ['50%', '70%'], // 环形图，使用内外径
+            radius: ['40%', '60%'], // 环形图，使用内外径
             center: ['50%', '40%'],
-            data: [
-              { value: 1048, name: 'Category A' },
-              { value: 735, name: 'Category B' },
-              { value: 580, name: 'Category C' },
-              { value: 484, name: 'Category D' },
-              { value: 300, name: 'Category E' },
-            ],
+            data: data, // 使用提取的数据
             label: {
               show: true,
               formatter: '{b}: {c} ({d}%)',
@@ -83,3 +97,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.chart {
+  width: 100%; /* 或者设置为具体的像素值 */
+  height: 300px; /* 确保有高度 */
+}
+</style>

src/views/dashboard/admin/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="dashboard-editor-container">
-    <!--每一列间隔32项目-->
+    <!--网站，内容，公共栏目数量 start------------------------------------------>
     <el-row :gutter="32">
-      <!--屏幕尺寸不够的时候自己沾满一行-->
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="topWindowBox">
           <div class="twbTitle">
             <div class="twbIconbgRed">
               <img src="@/assets/index/twbIconbgBlue.png"/>
-            </div>网站数量
+            </div>
+            网站数量
           </div>
-          <div class="twbNumber">1,000</div>
-          <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div>
+          <div class="twbNumber">{{topData.website.count}}</div>
+          <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
@@ -19,10 +19,11 @@
           <div class="twbTitle">
             <div class="twbIconbgBlue">
               <img src="@/assets/index/twbIconbgRed.png"/>
-            </div>内容发布数量
+            </div>
+            文章发布数量
           </div>
-          <div class="twbNumber">68,888</div>
-          <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div>
+          <div class="twbNumber">{{topData.article.count}}</div>
+          <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
@@ -30,94 +31,120 @@
           <div class="twbTitle">
             <div class="twbIconbgPurple">
               <img src="@/assets/index/twbIconbgPurple.png"/>
-            </div>公共栏目数量
+            </div>
+            公共栏目数量
           </div>
-          <div class="twbNumber">24</div>
-          <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div>
+          <div class="twbNumber">{{topData.category.count}}</div>
+          <!-- <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div> -->
         </div>
       </el-col>
     </el-row>
-
+    <!--网站，内容，公共栏目数量 end------------------------------------------>
+    <!--chart start------------------------------------------>
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="16">
-        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-          <line-chart :chart-data="lineChartData" />
-        </el-row>
+        <div class="chartBox">
+          <div class="chartTitle">平台文章增长数量</div>
+          <el-row style="background:#fff;padding:16px 16px 0;">
+            <line-chart :chart-data="chartData.lineChartData"/>
+          </el-row>
+        </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <!-- <pie-chart /> -->
-          <ring-chart />
+        <div class="chartBox">
+          <div class="chartTitle">用户类型</div>
+          <div class="chart-wrapper">
+            <ring-chart :chart-data="chartData.ringChartData"/>
+          </div>
         </div>
       </el-col>
     </el-row>
-
+    <!--chart end------------------------------------------>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-import RingChart from './components/RingChart' //圆环图
+// import GithubCorner from '@/components/GithubCorner'
+// import PanelGroup from './components/PanelGroup'
+import LineChart from './components/LineChart'//折线图
+// import RaddarChart from './components/RaddarChart'
+// import PieChart from './components/PieChart'
+// import BarChart from './components/BarChart'
+// import TransactionTable from './components/TransactionTable'
+// import TodoList from './components/TodoList'
+// import BoxCard from './components/BoxCard'
+import RingChart from './components/RingChart'//圆环图
 
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
 
 export default {
   name: 'DashboardAdmin',
   components: {
-    GithubCorner,
-    PanelGroup,
+    // GithubCorner,
+    // PanelGroup,
     LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard,
+    // RaddarChart,
+    // PieChart,
+    // BarChart,
+    // TransactionTable,
+    // TodoList,
+    // BoxCard,
     RingChart
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      topData:{
+        website:{//网站
+          count:0,//总数
+          growth_rate:0//增长数
+        },
+        article:{//文章
+          count:0,//总数
+          growth_rate:0//增长数
+        },
+        category:{//栏目
+          count:0,//总数
+          growth_rate:0//增长数
+        }
+      },
+      chartData:{
+        lineChartData:[],//折线图数据
+        ringChartData:[]//圆环图数据
+      }
     }
   },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
+    getData(){
+      //获取首页数据
+      this.$store.dispatch('public/getAdminIndex').then(res=> {
+        this.topData.article.count = res.data.article.count;
+        this.topData.category.count = res.data.category.count;
+        this.topData.website.count = res.data.website.count;
+        this.chartData.lineChartData = res.data.monthArticle;
+        this.chartData.ringChartData = res.data.userType;
+
+        console.log(this.chartData.lineChartData)
+        console.log(this.chartData.ringChartData)
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+  },
+  mounted(){
+    this.getData()
   }
 }
 </script>
 
 <style lang="less" scoped>
+  @title: #212227;
+  @bgColor: #FFFFFF;
   .topWindowBox{
-    background:#FFFFFF;
+    background:@bgColor;
     border-Radius:20px;
-    height:200px;
+    height:160px;
     width:100%;
     margin-bottom:30px;
     padding:25px;
@@ -126,7 +153,7 @@ export default {
       display:flex;
       align-items: center;
       font-size:16px;
-      color:#212227;
+      color:@title;
       .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
         width: 40px;
         height: 40px;
@@ -169,6 +196,19 @@ export default {
     }
   }
 
+  .chartBox {
+    width: 100%;
+    height: 440px;
+    border-radius: 20px;
+    overflow: hidden;
+    background-color: @bgColor;
+    .chartTitle {
+      color: @title;
+      padding: 30px 30px 0 30px;
+      font-size: 16px;
+    }
+  }
+
   .dashboard-editor-container {
     padding: 32px;
     background-color: rgb(240, 242, 245);

src/views/login/index.vue

@@ -94,7 +94,7 @@
 
 <script>
 import { validUserPhone } from '@/utils/validate'
-import request from '@/utils/request'
+
 export default {
   name: 'Login',
   data() {
@@ -233,15 +233,6 @@ export default {
       }).catch(() => {
         this.loading = false
       })
-
-      // request({
-      //   url: 'http://101.254.114.211:9501/verifyCode',
-      //   method: 'get'
-      // }).then(response => {
-      //   that.codeImg = response.data
-      // }).catch(error => {
-      //   console.log(error)
-      // })
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {

src/views/menu/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/menu/menulist.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="openWindow">添加菜单</el-button>
+      </div>
+      <div>
+        
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <!--设置default-expand-all将展开全部-->
+          <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+            <el-table-column
+              prop="id"
+              label="id"
+              sortable
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="label"
+              label="菜单名称"
+              sortable
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="url"
+              label="路由地址">
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="200"  header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>移除</div>
+                  <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template> 
+      </el-row>
+    </div>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="添加菜单" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="label" class="custom-align-right">
+            <el-input v-model="form.label" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="菜单路由" :label-width="formLabelWidth" prop="url" class="custom-align-right">
+            <el-input v-model="form.url" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="默认图标" :label-width="formLabelWidth" prop="icon" class="custom-align-right">
+             <!--图片上传组件 start ------------------------------------------------------------>
+              <div class="uploaderBox">
+                <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
+                  <!-- 上传组件 -->
+                  <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                    <!-- 预览图片 -->
+                    <img v-if="iconSrc" :src="iconSrc" class="avatar">
+                    <div v-else class="chooseImgDiv">
+                      <div>
+                        <img src="@/assets/public/upload/noImage.png">
+                        <div>选择图片</div>
+                      </div>
+                    </div>
+                  </el-upload>
+                  <!-- 删除按钮，当鼠标悬浮时显示 -->
+                  <div v-if="hovering && iconSrc" class="delete-button" @click="handleDelete">
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
+              </div>
+              <!--图片上传组件 end ------------------------------------------------------------>
+          </el-form-item>
+          <el-form-item label="选中时图标" :label-width="formLabelWidth" prop="selected_icon" class="custom-align-right">
+            <!--图片上传组件 start ------------------------------------------------------------>
+            <div class="uploaderBox">
+              <div class="avatar-upload-container" @mouseenter="hoveringTwo = true" @mouseleave="hoveringTwo = false">
+                <!-- 上传组件 -->
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUploadTwo">
+                  <!-- 预览图片 -->
+                  <img v-if="iconSrcSelect" :src="iconSrcSelect" class="avatar">
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                <div v-if="hoveringTwo && iconSrcSelect" class="delete-button" @click="handleDeleteTwo">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
+            </div>
+            <!--图片上传组件 end ------------------------------------------------------------>
+          </el-form-item>
+          <el-form-item label="权重" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
+            <el-input v-model="form.sort" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="是否为顶级菜单" :label-width="formLabelWidth" class="custom-align-right">
+            <el-radio v-model="radio" label="1">是</el-radio>
+            <el-radio v-model="radio" label="2">否</el-radio>
+          </el-form-item>
+          <el-form-item label="父级菜单名称" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+            <el-cascader :key="parentKey" v-model="form.pid_arr" :props="{checkStrictly:true}" :options="pidArrData" clearable :disabled="radio === '1'"></el-cascader>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editToServe" v-if="editBtn==true">编辑</el-button>
+          <el-button type="primary" @click="addToServe" v-else>提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//表格标题
+import openWindow from '@/utils/open-window';
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+     //0.全局操作 end ------------------------------------------------------------>
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"菜单列表",
+      tableData: [],//内容列表
+      editId:"",//编辑id 
+      radio: '2',//是否为顶级菜单 1=是 2=否
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //是否显示弹出窗口
+      windowStatus:false,
+      formLabelWidth: '120px',
+      editBtn:false,//当显示编辑按钮的时候，就不显示提交
+      //弹出框设置 end ------------------------------------------------------------>
+
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      form: {
+        label:"",//菜单名称
+        url:"",//菜单路由地址
+        icon:"",//默认图标
+        selected_icon:"",//选中时图标
+        sort:"",//权重
+        pid_arr:[]//父级id
+      },
+      //通过api获的的菜单列表
+      parentKey:0,
+      pidArrData:[],
+      //3.1 上传默认图标
+      iconSrc:'',//默认图标缩略图
+      hovering: false,//显示删除图标
+      iconSrcSelect:'',//选中时图标缩略图
+      hoveringTwo: false,//显示删除图标
+      //3.2 表单验证规则
+      formRules: {
+        label:[{required:true,trigger:'blur',validator:validateEmpty}],
+        url:[{required:true,trigger:'blur',validator:validateEmpty}],
+        icon:[{required:true,trigger:'blur',validator:validateEmpty}],
+        selected_icon:[{required:true,trigger:'blur',validator:validateEmpty}],
+        sort:[{required:true,trigger:'blur',validator:validateEmpty}],
+        pid_arr:[{required:true,trigger:'blur',validator:validateArray}],
+      },
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(){
+      this.$store.dispatch('menu/getMenuList').then(res=> {
+        this.tableData = res.data
+        console.log(this.tableData)
+        //格式化以后放入级联选择器
+        let arrData = this.transformData(res.data)
+        this.pidArrData = arrData;
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //1.2格式化菜单列表
+    transformData(arrData) {
+      let that = this;
+      return arrData.map(item => {
+        // 创建一个新的对象，替换键名
+        let newItem = {
+          label: item.label,
+          value: item.id,
+        };
+        // 如果有 children，则递归处理 children 数组
+        if (item.children && item.children.length > 0) {
+          newItem.children = that.transformData(item.children);
+        }
+        return newItem;
+      });
+    },
+    //1.2 删除内容
+    deleteRow(id){
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('menu/delMenu',{id:id}).then(res=> {
+          this.getData();
+          if(res.code==200){
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }else{
+            this.$message({
+              type: 'warning',
+              message: '请先移除子菜单！'
+            });
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.3 回显数据
+    editRow(data){
+      this.editId = data.id;  
+      console.log(data)
+      this.openWindow();
+      this.form.label = data.label;
+      this.form.url = data.url;
+      this.form.icon = data.icon;
+      this.form.selected_icon = data.selected_icon;
+      this.form.sort = data.sort;
+      //回显父级
+      if(data.pid==0){
+        //如果是顶级菜单
+        this.radio = "1";//是顶级菜单
+      }else{
+        this.radio = "2";//不是顶级菜单
+        //如果不是顶级菜单 显示到选择器中
+        this.parentKey += 1;
+        console.log(this.pidArrData)
+        console.log(data.pid)
+        this.form.pid_arr = data.pid;
+      }
+      
+      //回显示icon
+      this.iconSrc = data.icon;
+      this.iconSrcSelect = data.selected_icon;
+      //显示编辑按钮
+      this.editBtn = true;
+    },
+    //提交
+    addToServe(){
+      //先判断是不是顶级菜单
+      if(this.radio=="1"){
+        //如果是顶级菜单
+        this.form.pid_arr = [0];
+      }
+
+      //执行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('menu/addMenu',this.form).then(res=> {
+            if(res.code==200){
+              this.$message({
+                type: 'success',
+                message: '成功添加路由！'
+              });
+              this.getData();
+              this.closeWindow();
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误！'
+            });
+          });
+        }
+      })
+    },
+    //修改
+    editToServe(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let data = this.form;
+          data.id = this.editId;
+          this.$store.dispatch('menu/updateMenu',data).then(res=> {
+            if(res.code==200){
+              this.$message({
+                type: 'success',
+                message: '路由状态已修改!'
+              });
+              this.getData();
+              this.closeWindow();
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '操作已取消！'
+            });
+          });
+        }
+      })
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
+    openWindow() {
+      this.windowStatus = true;
+      this.clearToServe();
+      //显示添加按钮
+      this.editBtn = false;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //2.3 清理弹出框
+    clearToServe(){
+      this.form.label = "";
+      this.form.url = "";
+      this.form.icon = "";
+      this.form.selected_icon = "";
+      this.form.sort = "";
+      this.form.pid_arr = [];
+      //this.pidArrData=[];
+      this.iconSrc = "";
+      this.hovering = false;
+      this.iconSrcSelect = "";
+      this.hoveringTwo = false;
+      this.editBtn = false;
+    },
+    //弹出框设置 end ------------------------------------------------------------>
+
+    //3.添加菜单 start ------------------------------------------------------------>
+    //3.1 上传默认图标
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.iconSrc = res.data.imgUrl;//显示缩略图
+        this.form.icon = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    handleDelete() {
+      // 删除图片
+      this.form.icon = ''; //清空选中的图片  
+      this.iconSrc = ''; // 清空图片 URL
+    },
+    //3.2 上传选中时图标
+    beforeAvatarUploadTwo(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.iconSrcSelect = res.data.imgUrl;//显示缩略图
+        this.form.selected_icon = res.data.imgUrl;//提供表单地址
+        // 确保 Vue 能够检测到变化
+        this.$forceUpdate();
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    handleDeleteTwo() {
+      // 删除图片
+      this.form.selected_icon = ''; //清空选中的图片  
+      this.iconSrcSelect = ''; // 清空图片 URL
+    },
+    //添加菜单 end ------------------------------------------------------------>
+    
+  },
+  mounted(){
+    //1.获得初始数据
+    this.getData();
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .layerBoxNoBg {
+    padding:30px 0 0 0;
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/NewList.vue

@@ -13,7 +13,7 @@
           <el-col :span="8">
             <div class="searchBox">
               <div class="searchTitle">导航池名称：</div>
-              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.catid"/>
+              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.category_name"/>
             </div>
           </el-col>
           <el-col :span="8">
@@ -39,9 +39,8 @@
             <div class="searchBox">
               <div class="searchTitle">资讯状态：</div>
               <el-select v-model="getApiData.status" placeholder="请选择..">
-                <el-option label="隐藏" value="0"></el-option>
-                <el-option label="显示" value="1"></el-option>
-                <el-option label="已删除" value="404"></el-option>
+                <el-option label="待发布" value="0"></el-option>
+                <el-option label="已发布" value="1"></el-option>
               </el-select>
             </div>
           </el-col>
@@ -87,7 +86,7 @@
             <el-table-column prop="level" label="排序" width=""></el-table-column>
             <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
             <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
-            <el-table-column fixed="right" label="操作" width="200">
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
               <template slot-scope="scope">
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
@@ -130,7 +129,7 @@ export default {
       editId:0,//要修改的网站id
       getApiData:{
         title:"",//标题
-        catid:"",//导航池id
+        category_name:"",//导航池id
         author:"",//作者
         islink:"",//是否使用外链
         status:"",//资讯状态
@@ -228,7 +227,7 @@ export default {
     clearSearchList(){
       this.tableData = [];
       this.getApiData.title = "";
-      this.getApiData.catid = "";
+      this.getApiData.category_name = "";
       this.getApiData.author = "";
       this.getApiData.islink = "";
       this.getApiData.status = "";

src/views/news/creatNews.vue

@@ -16,7 +16,7 @@
             <el-input v-model="form.title" autocomplete="off"></el-input>
             <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
           </el-form-item>
-          <div v-if="form.islink==1"> 
+          <div v-if="form.islink==true"> 
             <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
               <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
             </el-form-item>
@@ -27,12 +27,18 @@
               <el-input v-model="form.author" autocomplete="off"></el-input>
             </el-form-item>
           </div>
-          <div v-if="form.islink==0">
+          <div v-if="form.islink==false">
             <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
               <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
-            </el-form-item>
+            </el-form-item>  
             <el-form-item label="推荐等级：" prop="level" class="custom-align-right">
-              <el-input v-model="form.level" autocomplete="off"></el-input>
+              <el-select v-model="form.level" placeholder="请选择推荐等级..">
+                <el-option label="头条" :value="1"></el-option>
+                <el-option label="轮播图" :value="2"></el-option>
+                <el-option label="推荐图" :value="3"></el-option>
+                <el-option label="热点资讯" :value="4"></el-option>
+                <el-option label="资讯推荐" :value="5"></el-option>
+              </el-select>
             </el-form-item>
             <el-form-item label="缩略图：" class="custom-align-right">
               <div class="uploaderBox">
@@ -328,9 +334,13 @@ export default {
     addToServe(){
       //提交之前先判断是否为外链
       //如果使用了外链，清理掉除了外链以外的内容
-      if(this.form.islink==1){
+      if(this.form.islink==true){
+        this.form.islink = 1;
         this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
       }
+
       //先进行验证
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -408,8 +418,12 @@ export default {
       this.$store.dispatch('news/getArticleInfo', data).then(res => {
         console.log(res);
         this.form.title = res.data.title;
-        this.form.islink = res.data.islink;
-        this.form.linkurl = res.data.linkurl;
+        if(res.data.islink==1){
+          this.form.islink = true;
+        }else{  
+          this.form.islink = false;
+        }
+        //this.form.linkurl = res.data.linkurl;
 
         // 回显导航池
         this.form.cat_arr_id = JSON.parse(res.data.cat_arr_id);

src/views/role/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/role/roleList.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="addData()">添加角色</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="role_name" label="角色名称"></el-table-column>
+            <el-table-column prop="remark" label="职能描述"></el-table-column>
+            <el-table-column prop="sort" label="排序"></el-table-column>
+            <el-table-column prop="created_at" label="添加时间"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-edit-outline"></i>删除</div>
+                  <div class="listEditBtn" @click="editRow(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="添加角色" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="角色名称：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.role_name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="职能描述：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input type="textarea" v-model="form.remark" class="custom-textarea"></el-input>
+          </el-form-item>
+          <el-form-item label="排序：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.sort" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="权限：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <div class="treeBox">
+              <el-tree
+                :data="roleData"
+                show-checkbox
+                node-key="id"
+                :default-expanded-keys="expandedKeys"
+                :default-checked-keys="checkedKeys"
+                :props="defaultProps">
+              </el-tree>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editData">提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
+
+  </div>
+</template>
+
+<script>
+//引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"角色管理",
+      tableData: [],//列表
+      allCount:0,//总条数
+      editId:0,//要修改的网站id
+      getApiData:{
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //是否显示弹出窗口
+      windowStatus:false,
+      formLabelWidth: '120px',
+      //弹出框设置 end ------------------------------------------------------------>
+
+      //3.搜索相关 start ------------------------------------------------------------>
+      //搜索相关 end ------------------------------------------------------------>
+
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
+      form: {
+        role_name:"",//角色名称
+        rule:[],//权重
+        remark:"",//职能描述
+        sort:""//排序
+      },
+      expandedKeys:[],//展开的节点  
+      checkedKeys:[],//选中的节点 
+      roleData:[],//菜单树
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      //3.2表单验证规则
+      formRules: {
+        //性质不能为空
+        nature:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //进度不能为空
+        nature_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型不能为空
+        type:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型进度不能为空
+        type_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //状态不能为空
+        status:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 获取内容
+    getData(){
+      this.$store.dispatch('userRole/roleList',this.getApiData).then(res=> {
+        this.allCount = res.data.count;
+        this.tableData = res.data.rows;
+      })
+    },
+    //1.2 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.3 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 获取菜单树
+    getAllMenuList(){
+      this.$store.dispatch('userRole/getAllMenuList').then(res=> {
+        console.log(res)
+        this.roleData = res.data;
+      })  
+    },
+    //1.5 删除角色
+    deleteRow(data){
+      console.log(data)
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
+    openWindow() {
+      this.clearToServe();
+      this.windowStatus = true;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //2.3 清空提交窗口
+    clearToServe(){
+      //重置窗口
+      this.editId = "";
+    },
+    //弹出框设置 end ------------------------------------------------------------>
+
+    //4.添加 start ------------------------------------------------------------>
+    addData(){
+      this.openWindow();
+    },
+    //添加 end ------------------------------------------------------------>
+
+    //4.编辑 start ------------------------------------------------------------>
+    //回显数据
+    editRow(id){
+      this.openWindow();
+     
+      this.$store.dispatch('userRole/roleInfo',{id:id}).then(res=> {
+        console.log(res)
+        this.expandedKeys = res.data.rule;
+        this.checkedKeys = res.data.rule;
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+
+    },
+    //提交编辑
+    editData(){
+      let data = {
+        id:this.editId,
+        
+      }
+
+      //console.log(data)
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // this.$store.dispatch('complaint/upComplaint',data).then(res=> {
+          //   console.log(res)
+          //   this.closeWindow();
+          //   this.$message({
+          //     type: 'success',
+          //     message: '修改成功！'
+          //   });
+          //   this.getData();
+          // }).catch(() => {
+          //   this.$message({
+          //     type: 'warning',
+          //     message: '网络错误，请重试！'
+          //   });
+          // })
+        }
+      })
+      
+    }
+    //编辑 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //获取页面列表
+    this.getData();
+    //获取菜单树
+    this.getAllMenuList();
+  } 
+}
+</script>
+
+<style scoped lang="less">
+.layerBoxNoBg {
+  padding: 30px 0 0 0;
+}
+//表单微调 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .el-select-group__title {
+  color: #909399;
+}
+::v-deep .el-select {
+  width: 100% !important;
+}
+</style>

src/views/role/userList.vue

@@ -0,0 +1,643 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">性质：</div>
+              <el-select v-model="getApiData.nature" placeholder="请选择..">
+                <el-option
+                  v-for="item in natureData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">性质进度：</div>
+              <el-select v-model="getApiData.nature_level" placeholder="请选择">
+                <el-option-group
+                  v-for="group in netureLevelData"
+                  :key="group.id"
+                  :label="group.type_name">
+                  <el-option
+                    v-for="item in group.children"
+                    :key="item.id"
+                    :label="item.type_name"
+                    :value="item.id">
+                  </el-option>
+                </el-option-group>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">类型：</div>
+              <el-select v-model="getApiData.type" placeholder="请选择..">
+                <el-option
+                  v-for="item in typeData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="layerBoxLineTwo">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">类型进度：</div>
+              <el-select v-model="getApiData.type_level" placeholder="请选择">
+                <el-option-group
+                  v-for="group in typeLevelData"
+                  :key="group.id"
+                  :label="group.type_name">
+                  <el-option
+                    v-for="item in group.children"
+                    :key="item.id"
+                    :label="item.type_name"
+                    :value="item.id">
+                  </el-option>
+                </el-option-group>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择..">
+                <el-option
+                  v-for="item in statusData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="layerBoxNoBg">
+      <div></div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="title" label="标题"></el-table-column>
+            <el-table-column prop="nature_name" label="性质"></el-table-column>
+            <el-table-column prop="nature_level_name" label="进度"></el-table-column>
+            <el-table-column prop="type_name" label="类型"></el-table-column>
+            <el-table-column prop="type_level_name" label="类型说明"></el-table-column>
+            <!-- <el-table-column prop="judgment" label="判决书"></el-table-column>
+            <el-table-column prop="audio_and_video" label="录音录像"></el-table-column>
+            <el-table-column prop="contract" label="合同"></el-table-column>
+            <el-table-column prop="qualifications" label="资质"></el-table-column> -->
+            <el-table-column prop="money" label="涉案标的额"></el-table-column>
+            <el-table-column prop="name" label="姓名"></el-table-column>
+            <el-table-column prop="mobile" label="电话"></el-table-column>
+            <el-table-column prop="status" label="状态"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="120" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框start------------------------------------------------------------>
+    <el-dialog title="编辑投诉" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="标题：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.title" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="性质：" :label-width="formLabelWidth" prop="nature" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-select v-model="form.nature" placeholder="请选择..">
+                <el-option
+                  v-for="item in windowNatureData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="性质进度：" :label-width="formLabelWidth" prop="nature_level" class="custom-align-right">
+            <el-select v-model="form.nature_level" placeholder="请选择">
+              <el-option-group
+                v-for="group in windowNetureLevelData"
+                :key="group.id"
+                :label="group.type_name">
+                <el-option
+                  v-for="item in group.children"
+                  :key="item.id"
+                  :label="item.type_name"
+                  :value="item.id">
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型：" :label-width="formLabelWidth" prop="type" class="custom-align-right">
+            <el-select v-model="form.type" placeholder="请选择..">
+              <el-option
+                v-for="item in typeData"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型进度：" :label-width="formLabelWidth" prop="type_level" class="custom-align-right">
+            <el-select v-model="form.type_level" placeholder="请选择">
+              <el-option-group
+                v-for="group in windowTypeLevelData"
+                :key="group.id"
+                :label="group.type_name">
+                <el-option
+                  v-for="item in group.children"
+                  :key="item.id"
+                  :label="item.type_name"
+                  :value="item.id">
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="详细说明：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input type="textarea" v-model="form.describe" class="custom-textarea" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="判决书：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.judgment" :href="form.judgment" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="录音录像：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.audio_and_video" :href="form.judgment" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="合同：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.contract" :href="form.contract" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="资质：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <a v-if="form.qualifications" :href="form.qualifications" class="complaintListdownloadBtn" download>
+              <i class="el-icon-download"></i>
+              下载
+            </a>
+            <div v-else>暂无数据</div>
+          </el-form-item>
+          <el-form-item label="涉案标的金额：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.money" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="姓名：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.id_card" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="期待学习法律：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.like_remark" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="状态：" :label-width="formLabelWidth" prop="status" class="custom-align-right">
+            <el-radio-group v-model="form.status">
+              <el-radio label="100">待审核</el-radio>
+              <el-radio label="101">已接案</el-radio>
+              <el-radio label="102">已拒绝</el-radio>
+              <el-radio label="103">已完结</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注信息：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input type="textarea" v-model="form.reason" class="custom-textarea"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editData">提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
+
+
+  </div>
+</template>
+
+<script>
+//引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"投诉举报",
+      tableData: [],//列表
+      allCount:0,//总条数
+      editId:0,//要修改的网站id
+      getApiData:{
+        is_admin:1,//是否为管理员
+        nature:"",//性质
+        nature_level:"",//性质进度
+        type:"",//类型
+        type_level:"",//类型进度
+        status:"",//状态 
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      natureData:[],//所有性质
+      netureLevelData:[],//所有进度
+      typeData:[],//所有类型
+      typeLevelData:[],//所有类型进度
+      statusData:[],//所有状态 
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //是否显示弹出窗口
+      windowStatus:false,
+      formLabelWidth: '120px',
+      //弹出框设置 end ------------------------------------------------------------>
+
+      //3.搜索相关 start ------------------------------------------------------------>
+      //搜索相关 end ------------------------------------------------------------>
+
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
+      form: {
+        title:"",//标题
+        nature:"",//性质
+        nature_level:"",//进度
+        type:"",//类型
+        type_level:"",//类型进度
+        describe:"",//详细说明
+        judgment:"",//判决书
+        audio_and_video:"",//录音录像
+        contract:"",//合同
+        qualifications:"",//资质
+        money:"",//涉案标的额
+        name:"",//姓名
+        id_card:"",//身份证
+        status:"100",//状态
+        like_remark:"",//你最想了解的法律知识
+        reason:"",//备注信息
+      },
+      windowNatureData:[],//所有性质
+      windowNetureLevelData:[],//所有进度
+      windowTypeData:[],//所有类型
+      windowTypeLevelData:[],//所有类型进度
+      windowStatusData:[],//所有状态 
+      //3.2表单验证规则
+      formRules: {
+        //性质不能为空
+        nature:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //进度不能为空
+        nature_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型不能为空
+        type:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //类型进度不能为空
+        type_level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //状态不能为空
+        status:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 获取内容
+    getData(){
+      this.$store.dispatch('complaint/getComplaint',this.getApiData).then(res=> {
+        console.log(res)
+        let data = [];
+        for(let item of res.data.rows){
+          // item.judgment = item.judgment.length > 0 ? "有" : "没有";
+          // item.audio_and_video = item.audio_and_video.length > 0 ? "有" : "没有";
+          // item.contract = item.contract.length > 0 ? "有" : "没有";
+          // item.qualifications = item.qualifications.length > 0 ? "有" : "没有";
+
+          // 判断 item.status 的状态
+          switch (item.status) {
+            case 100:
+              item.status = "待审核";
+              break;
+            case 101:
+              item.status = "已接案";
+              break;
+            case 102:
+              item.status = "已拒绝";
+              break;
+            case 103:
+              item.status = "已完结";
+              break;
+            default:
+              item.status = "未知状态"; // 可选：处理未定义的状态
+              break;
+          }
+        }
+        this.tableData = res.data.rows;//放入数据
+        this.allCount = res.data.count;//放入总条数
+      })
+    },
+    //获取所有状态
+    getStatus(){
+      //获取性质和进度
+      let getNature = {
+        type:1
+      }
+      this.$store.dispatch('complaint/getLetterType',getNature).then(res=> {
+        //格式化性质
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏
+          this.natureData.push(data)
+          //弹窗框
+          this.windowNatureData.push(data)
+        }
+        //把进度放进去 无需格式化
+        this.netureLevelData = res.data;
+        //弹窗框
+        this.windowNetureLevelData = res.data;
+      })
+      
+      //获取类型和类型说明
+      let getType = {
+        type:2
+      }
+      this.$store.dispatch('complaint/getLetterType',getType).then(res=> {
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏
+          this.typeData.push(data)
+          //弹窗框
+          this.windowTypeData.push(data)
+        }
+        //搜索栏
+        this.typeLevelData = res.data;
+        //弹窗框
+        this.windowTypeLevelData = res.data;
+      })
+      let getStatus = {
+        type:10
+      }
+      this.$store.dispatch('complaint/getLetterType',getStatus).then(res=> {
+        for(let item of res.data){
+          let data = {
+            value: item.id,
+            label: item.type_name
+          }
+          //搜索栏  
+          this.statusData.push(data)
+          //弹窗框
+          this.windowStatusData.push(data)
+        }
+      })
+    },
+    //1.2 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.3 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 重置按钮
+    clearSearchList(){
+      this.getApiData.is_admin = 1;
+      this.getApiData.nature = "";
+      this.getApiData.nature_level = "";
+      this.getApiData.type = "";
+      this.getApiData.type_level = "";
+      this.getApiData.status = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
+    openWindow() {
+      this.clearToServe();
+      this.windowStatus = true;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //2.3 清空提交窗口
+    clearToServe(){
+      //重置窗口
+      this.editId = "";
+      this.form.status = "100"; // 重置状态为默认值
+    },
+    //弹出框设置 end ------------------------------------------------------------>
+
+
+    //4.编辑 start ------------------------------------------------------------>
+    //回显数据
+    editRow(data){
+      //先判断这条数据是否已经被其他人受理
+      this.$store.dispatch('complaint/checkMeasure',{id:data.id}).then(res=> {
+        if(res.code == 200){
+          //列表里面已经有了，就不需要再请求了
+          //开始回显数据
+          this.openWindow();
+          console.log(data)
+          this.editId = data.id;
+          this.form.title = data.title;
+          this.form.nature = data.nature;
+          this.form.nature_level = data.nature_level;
+          this.form.type = data.type;
+          this.form.type_level = data.type_level;
+          this.form.describe = data.describe;
+          if(data.judgment.length > 0){
+            this.form.judgment = data.judgment[0].fileSrc;
+          }
+          if(data.audio_and_video.length > 0){
+            this.form.audio_and_video = data.audio_and_video[0].fileSrc;
+          }
+          if(data.contract.length > 0){
+            this.form.contract = data.contract[0].fileSrc;
+          }
+          if(data.qualifications.length > 0){
+            this.form.qualifications = data.qualifications[0].fileSrc;
+          }
+          this.form.money = data.money;
+          this.form.id_card = data.id_card;
+          this.form.like_remark = data.like_remark;
+          this.form.reason = data.reason;
+          switch (data.status) {
+            case "待审核":
+            this.form.status = "100";
+              break;
+            case "已接案":
+            this.form.status = "101";
+              break;
+            case "已拒绝":
+              this.form.status = "102";
+              break;
+            case "已完结":
+              this.form.status = "103";
+              break;
+            default:
+              this.form.status = "0"; // 可选：处理未定义的状态
+              break;
+          }
+          console.log(this.form.status) //100
+          this.form.name = data.name;
+
+        }else{
+          this.$message({
+            type: 'warning',
+            message: '该数据已经被其他人受理！'
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+
+    },
+    //提交编辑
+    editData(){
+      let data = {
+        id:this.editId,
+        nature:this.form.nature,
+        nature_level:this.form.nature_level,
+        type:this.form.type,
+        type_level:this.form.type_level,
+        status:this.form.status,
+        reason:this.form.reason
+      }
+
+      //console.log(data)
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('complaint/upComplaint',data).then(res=> {
+            console.log(res)
+            this.closeWindow();
+            this.$message({
+              type: 'success',
+              message: '修改成功！'
+            });
+            this.getData();
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+      
+    }
+    //编辑 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //获取页面列表
+    this.getData();
+    //查询状态
+    this.getStatus();
+  }
+}
+</script>
+
+<style scoped lang="less">
+//表单微调 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .el-select-group__title {
+  color: #909399;
+}
+::v-deep .el-select {
+  width: 100% !important;
+}
+</style>

src/views/website/WebsiteList.vue

@@ -149,6 +149,7 @@
                 <img v-if="logoUrl" :src="logoUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload> -->
+              <!--图片上传组件 start ------------------------------------------------------------>
               <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
                 <!-- 上传组件 -->
                 <el-upload
@@ -173,6 +174,7 @@
                   <i class="el-icon-delete"></i>
                 </div>
               </div>
+              <!--图片上传组件 end ------------------------------------------------------------>
             </div>
           </el-form-item>
           <el-form-item label="网站标题：" :label-width="formLabelWidth" prop="title" class="custom-align-right">