Merge branch 'fwldev' into 'master'

modify

See merge request !1

.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package-lock.json

@@ -2819,6 +2819,12 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -5810,6 +5816,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
+      "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5956,7 +5978,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
       "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -10308,6 +10329,63 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "less": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.0.4.tgz",
+      "integrity": "sha512-q3SyEnPKbk9zh4l36PGeW2fgynKu+FpbhiUNx/yaiBUQ3V0CbACCgb9FzYWcRgI2DJlP6eI4jc8XPrCTi55YcQ==",
+      "requires": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.6",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+          "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+          "optional": true
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -14670,6 +14748,15 @@
       "dev": true,
       "optional": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -14689,8 +14776,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -18636,6 +18722,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
+      "integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

package.json

@@ -15,8 +15,9 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
-    "babel-plugin-component": "^1.1.1",
     "babel-eslint": "^8.0.1",
+    "babel-plugin-component": "^1.1.1",
+    "echarts": "^5.1.2",
     "element-theme": "^2.0.1",
     "element-ui": "^2.11.1",
     "gulp-autoprefixer": "^6.1.0",
@@ -25,6 +26,8 @@
     "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.2",
     "js-cookie": "^2.2.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
     "lodash": "^4.17.15",
     "node-sass": "^4.12.0",
     "qs": "^6.7.0",

public/index.html

 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -9,7 +10,8 @@
     window.SITE_CONFIG = {};
     window.SITE_CONFIG['version'] = 'v1.0.0';
     window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
-    window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';                      // api请求地址
+    ///window.SITE_CONFIG['apiURL'] = 'http://192.168.10.129:8080/hmit-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://119.3.50.187:8011/hmit-admin';                     // api请求地址
     window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
     window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
       'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
@@ -28,23 +30,25 @@
   </script>
 
   <!-- 开发环境 -->
-  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
-  <% } %>
-  <!-- 集成测试环境 -->
-  <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
-  <% } %>
-  <!-- 验收测试环境 -->
-  <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
+  <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %>
     <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
-  <% } %>
-  <!-- 生产环境 -->
-  <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
-  <% } %>
+    <% } %>
+      <!-- 集成测试环境 -->
+      <% if (process.env.VUE_APP_NODE_ENV==='prod:sit' ) { %>
+        <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+        <% } %>
+          <!-- 验收测试环境 -->
+          <% if (process.env.VUE_APP_NODE_ENV==='prod:uat' ) { %>
+            <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+            <% } %>
+              <!-- 生产环境 -->
+              <% if (process.env.VUE_APP_NODE_ENV==='prod' ) { %>
+                <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+                <% } %>
 </head>
+
 <body>
   <div id="app"></div>
 </body>
-</html>
+
+</html>
\ No newline at end of file

src/components/echarts.vue

+<template>
+  <div class="echarts">
+    <div
+      ref="chartpie"
+      :style="'width:'+width+';height:'+height"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "echarts",
+  components: {},
+  props: {
+    options: Object,
+    height: String,
+    width: String,
+    // bage: String,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getEchart() {
+      const chart = this.$refs.chartpie;
+      if (chart) {
+        const myChart = this.$echarts.init(chart);
+
+        //const myChart = echarts.init(chart, null, { renderer: "svg" });
+        const option = this.options;
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+          myChart.resize();
+        });
+      }
+      this.$on("hook:destroyed", () => {
+        window.removeEventListener("resize", function () {
+          myChart.resize();
+        });
+      });
+    },
+  },
+  created() {},
+  mounted() {
+    this.getEchart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.echarts {
+  width: 100%;
+}
+</style>
\ No newline at end of file

src/i18n/zh-CN.js

@@ -3,8 +3,8 @@ const t = {}
 t.loading = '加载中...'
 
 t.brand = {}
-t.brand.lg = '汇民综合管理系统'
-t.brand.mini = '汇民'
+t.brand.lg = '奉化区人民检察院满意度评价系统'
+t.brand.mini = '阳光码'
 
 t.add = '新增'
 t.delete = '删除'

src/main.js

@@ -17,7 +17,10 @@ import renProcessDetail from '@/components/ren-process-detail'
 import renDeptTree from '@/components/ren-dept-tree'
 import renRegionTree from '@/components/ren-region-tree'
 import { hasPermission, getDictLabel } from '@/utils'
+
 import cloneDeep from 'lodash/cloneDeep'
+import * as echarts from 'echarts';
+
 
 Vue.config.productionTip = false
 
@@ -39,7 +42,7 @@ Vue.use(renProcessDetail)
 Vue.prototype.$http = http
 Vue.prototype.$hasPermission = hasPermission
 Vue.prototype.$getDictLabel = getDictLabel
-
+Vue.prototype.$echarts = echarts
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)
 

src/mixins/view-module.js

 import Cookies from 'js-cookie'
 import qs from 'qs'
 export default {
-  data () {
+  data() {
     /* eslint-disable */
     return {
       // 设置属性
@@ -29,19 +29,19 @@ export default {
     }
     /* eslint-enable */
   },
-  created () {
+  created() {
     if (this.mixinViewModuleOptions.createdIsNeed) {
       this.query()
     }
   },
-  activated () {
+  activated() {
     if (this.mixinViewModuleOptions.activatedIsNeed) {
       this.query()
     }
   },
   methods: {
     // 获取数据列表
-    query () {
+    query() {
       this.dataListLoading = true
       this.$http.get(
         this.mixinViewModuleOptions.getDataListURL,
@@ -68,11 +68,11 @@ export default {
       })
     },
     // 多选
-    dataListSelectionChangeHandle (val) {
+    dataListSelectionChangeHandle(val) {
       this.dataListSelections = val
     },
     // 排序
-    dataListSortChangeHandle (data) {
+    dataListSortChangeHandle(data) {
       if (!data.order || !data.prop) {
         this.order = ''
         this.orderField = ''
@@ -83,13 +83,13 @@ export default {
       this.query()
     },
     // 分页, 每页条数
-    pageSizeChangeHandle (val) {
+    pageSizeChangeHandle(val) {
       this.page = 1
       this.limit = val
       this.query()
     },
     // 分页, 当前页
-    pageCurrentChangeHandle (val) {
+    pageCurrentChangeHandle(val) {
       this.page = val
       this.query()
     },
@@ -98,7 +98,7 @@ export default {
       this.query()
     },
     // 新增 / 修改
-    addOrUpdateHandle (id) {
+    addOrUpdateHandle(id) {
       this.addOrUpdateVisible = true
       this.$nextTick(() => {
         this.$refs.addOrUpdate.dataForm.id = id
@@ -106,7 +106,7 @@ export default {
       })
     },
     // 删除
-    deleteHandle (id) {
+    deleteHandle(id) {
       if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
         return this.$message({
           message: this.$t('prompt.deleteBatch'),
@@ -114,7 +114,8 @@ export default {
           duration: 500
         })
       }
-      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
+      let info = this.$t('prompt.info', { 'handle': this.$t('delete') })
+      this.$confirm(info, this.$t('prompt.title'), {
         confirmButtonText: this.$t('confirm'),
         cancelButtonText: this.$t('cancel'),
         type: 'warning'
@@ -136,11 +137,11 @@ export default {
               this.query()
             }
           })
-        }).catch(() => {})
-      }).catch(() => {})
+        }).catch(() => { })
+      }).catch(() => { })
     },
     // 导出
-    exportHandle () {
+    exportHandle() {
       var params = qs.stringify({
         'token': Cookies.get('token'),
         ...this.dataForm

src/views/main-navbar.vue

 <template>
-  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
-    <div class="aui-navbar__header">
-      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
-        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+  <nav
+    class="aui-navbar"
+    :class="`aui-navbar--${$store.state.navbarLayoutType}`"
+  >
+    <div
+      class="aui-navbar__header"
+      style="width:460px"
+    >
+      <h1
+        class="aui-navbar__brand"
+        @click="$router.push({ name: 'home' })"
+      >
+        <!--  <a
+          class="aui-navbar__brand-lg"
+          href="javascript:;"
+        >{{ $t('brand.lg') }}</a> -->
+        <img
+          src="../assets/img/logo.png"
+          alt=""
+        >
+
+        <a
+          class="aui-navbar__brand-mini"
+          href="javascript:;"
+        >{{ $t('brand.mini') }}</a>
       </h1>
     </div>
     <div class="aui-navbar__body">
-      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+      <el-menu
+        class="aui-navbar__menu mr-auto"
+        mode="horizontal"
+      >
+        <el-menu-item
+          index="1"
+          @click="$store.state.sidebarFold = !$store.state.sidebarFold"
+        >
+          <svg
+            class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-outdent"></use>
+          </svg>
         </el-menu-item>
-        <el-menu-item index="2" @click="refresh()">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
+        <el-menu-item
+          index="2"
+          @click="refresh()"
+        >
+          <svg
+            class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-sync"></use>
+          </svg>
         </el-menu-item>
       </el-menu>
-      <el-menu class="aui-navbar__menu" mode="horizontal">
-        <el-menu-item index="1">
+      <el-menu
+        class="aui-navbar__menu"
+        mode="horizontal"
+      >
+        <!-- <el-menu-item index="1">
           <el-dropdown placement="bottom" :show-timeout="0">
             <el-button size="mini">{{ $t('_lang') }}</el-button>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-        </el-menu-item>
-        <el-menu-item index="2">
-          <a href="//www.hmit.io/" target="_blank">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+        </el-menu-item> -->
+        <!-- <el-menu-item index="2">
+          <a
+            href="//www.hmit.io/"
+            target="_blank"
+          >
+            <svg
+              class="icon-svg aui-navbar__icon-menu"
+              aria-hidden="true"
+            >
+              <use xlink:href="#icon-earth"></use>
+            </svg>
           </a>
+        </el-menu-item> -->
+        <el-menu-item
+          index="3"
+          @click="fullscreenHandle()"
+        >
+          <svg
+            class="icon-svg aui-navbar__icon-menu"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-fullscreen"></use>
+          </svg>
         </el-menu-item>
-        <el-menu-item index="3" @click="fullscreenHandle()">
-          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
-        </el-menu-item>
-        <el-menu-item index="4" class="aui-navbar__avatar">
-          <el-dropdown placement="bottom" :show-timeout="0">
+        <el-menu-item
+          index="4"
+          class="aui-navbar__avatar"
+        >
+          <el-dropdown
+            placement="bottom"
+            :show-timeout="0"
+          >
             <span class="el-dropdown-link">
               <img src="~@/assets/img/avatar.png">
               <span>{{ $store.state.user.name }}</span>
@@ -48,61 +112,73 @@
       </el-menu>
     </div>
     <!-- 弹窗, 修改密码 -->
-    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
+    <update-password
+      v-if="updatePassowrdVisible"
+      ref="updatePassowrd"
+    ></update-password>
   </nav>
 </template>
 
 <script>
-import { messages } from '@/i18n'
-import screenfull from 'screenfull'
-import UpdatePassword from './main-navbar-update-password'
-import { clearLoginInfo } from '@/utils'
+import { messages } from "@/i18n";
+import screenfull from "screenfull";
+import UpdatePassword from "./main-navbar-update-password";
+import { clearLoginInfo } from "@/utils";
 export default {
-  inject: ['refresh'],
-  data () {
+  inject: ["refresh"],
+  data() {
     return {
       i18nMessages: messages,
-      updatePassowrdVisible: false
-    }
+      updatePassowrdVisible: false,
+    };
   },
   components: {
-    UpdatePassword
+    UpdatePassword,
   },
   methods: {
     // 全屏
-    fullscreenHandle () {
+    fullscreenHandle() {
       if (!screenfull.enabled) {
         return this.$message({
-          message: this.$t('fullscreen.prompt'),
-          type: 'warning',
-          duration: 500
-        })
+          message: this.$t("fullscreen.prompt"),
+          type: "warning",
+          duration: 500,
+        });
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     // 修改密码
-    updatePasswordHandle () {
-      this.updatePassowrdVisible = true
+    updatePasswordHandle() {
+      this.updatePassowrdVisible = true;
       this.$nextTick(() => {
-        this.$refs.updatePassowrd.init()
-      })
+        this.$refs.updatePassowrd.init();
+      });
     },
     // 退出
-    logoutHandle () {
-      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
-        confirmButtonText: this.$t('confirm'),
-        cancelButtonText: this.$t('cancel'),
-        type: 'warning'
-      }).then(() => {
-        this.$http.post('/logout').then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          clearLoginInfo()
-          this.$router.push({ name: 'login' })
-        }).catch(() => {})
-      }).catch(() => {})
-    }
-  }
-}
+    logoutHandle() {
+      this.$confirm(
+        this.$t("prompt.info", { handle: this.$t("logout") }),
+        this.$t("prompt.title"),
+        {
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.$http
+            .post("/logout")
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              clearLoginInfo();
+              this.$router.push({ name: "login" });
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>

src/views/modules/fhjw/fhjwanswer-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-              <el-form-item label="问题ID" prop="questionId">
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <!--     <el-form-item label="问题ID" prop="questionId">
           <el-input v-model="dataForm.questionId" placeholder="问题ID"></el-input>
+      </el-form-item> -->
+      <el-form-item
+        label="可选答案"
+        prop="answer"
+      >
+        <el-input
+          v-model="dataForm.answer"
+          placeholder="可选答案"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="可选答案" prop="answer">
-          <el-input v-model="dataForm.answer" placeholder="可选答案"></el-input>
-      </el-form-item>
-      </el-form>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  props: ["questionId"],
+
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        creator: '',
-        createDate: '',
-        questionId: '',
-        answer: ''
-      }
-    }
+        id: "",
+        creator: "",
+        createDate: "",
+        questionId: "",
+        answer: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
-        questionId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
+        /*  questionId: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ], */
         answer: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/fhjwanswer/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwanswer/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
+
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhjwanswer/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.dataForm.questionId = this.questionId;
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwanswer/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/fhjwanswer.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwanswer}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
-        </el-form-item>
-        <el-form-item>
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <!--  <el-form-item>
+          <el-input
+            v-model="dataForm.answer"
+            placeholder="可选答案"
+            clearable
+          ></el-input>
+        </el-form-item> -->
+        <!--  <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
-        </el-form-item>
+        </el-form-item> -->
+        <!--  <el-form-item>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwanswer:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwanswer:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="questionId" label="问题ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="answer" label="可选答案" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="answer"
+          label="可选答案"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="questionId"
+          label="问题"
+          header-align="center"
+          align="center"
+        >
+          <template>
+            <div>{{questionName}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwanswer:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwanswer:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >{{ $t('update') }}</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -37,35 +102,45 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        :questionId="questionId"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwanswer-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwanswer-add-or-update";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwanswer/page',
+        getDataListURL:
+          "/fhjw/fhjwanswer/page?questionId=" + this.$route.params.dictTypeId,
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwanswer/export',
-        deleteURL: '/fhjw/fhjwanswer',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwanswer/export",
+        deleteURL: "/fhjw/fhjwanswer",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        answer: "",
+      },
+      questionName: this.$route.params.questionName,
+      questionId: this.$route.params.dictTypeId,
+    };
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+  },
+};
 </script>

src/views/modules/fhjw/fhjwcase-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="受案号" prop="caseNum">
-          <el-input v-model="dataForm.caseNum" placeholder="受案号"></el-input>
-      </el-form-item>
-          <el-form-item label="案件名称" prop="caseName">
-          <el-input v-model="dataForm.caseName" placeholder="案件名称"></el-input>
-      </el-form-item>
-          <el-form-item label="办理期限" prop="deadline">
-          <el-input v-model="dataForm.deadline" placeholder="办理期限"></el-input>
-      </el-form-item>
-          <el-form-item label="受理日期" prop="acceptanceDate">
-          <el-input v-model="dataForm.acceptanceDate" placeholder="受理日期"></el-input>
-      </el-form-item>
-          <el-form-item label="审结日期" prop="completeDate">
-          <el-input v-model="dataForm.completeDate" placeholder="审结日期"></el-input>
-      </el-form-item>
-          <el-form-item label="强制措施" prop="coerciveMeasures">
-          <el-input v-model="dataForm.coerciveMeasures" placeholder="强制措施"></el-input>
-      </el-form-item>
-          <el-form-item label="案件比" prop="caseQuality">
-          <el-input v-model="dataForm.caseQuality" placeholder="案件比"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    width="80%"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item
+            label="受案号"
+            prop="caseNum"
+          >
+            <el-input
+              v-model="dataForm.caseNum"
+              placeholder="受案号"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="案件名称"
+            prop="caseName"
+          >
+            <el-input
+              v-model="dataForm.caseName"
+              placeholder="案件名称"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+      <el-form-item
+        label="办理期限"
+        prop="deadline"
+      >
+        <el-input
+          v-model="dataForm.deadline"
+          placeholder="办理期限"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="案件详情" prop="caseDetail">
-          <el-input v-model="dataForm.caseDetail" placeholder="案件详情"></el-input>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item
+            label="受理日期"
+            prop="acceptanceDate"
+          >
+            <el-date-picker
+              style="width:100%"
+              v-model="dataForm.acceptanceDate"
+              type="date"
+              placeholder="受理日期"
+            >
+            </el-date-picker>
+
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="审结日期"
+            prop="completeDate"
+          >
+            <!-- <el-input
+              v-model="dataForm.completeDate"
+              placeholder="审结日期"
+            ></el-input> -->
+            <el-date-picker
+              style="width:100%"
+              v-model="dataForm.completeDate"
+              type="date"
+              placeholder="审结日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item
+            label="强制措施"
+            prop="coerciveMeasures"
+          >
+            <el-input
+              v-model="dataForm.coerciveMeasures"
+              placeholder="强制措施"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="案件比"
+            prop="caseQuality"
+          >
+            <el-input
+              v-model="dataForm.caseQuality"
+              placeholder="案件比"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item
+        label="案件详情"
+        prop="caseDetail"
+      >
+        <el-input
+          type="textarea"
+          v-model="dataForm.caseDetail"
+          placeholder="案件详情"
+          rows="3"
+        ></el-input>
       </el-form-item>
-          </el-form>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        caseNum: '',
-        caseName: '',
-        deadline: '',
-        acceptanceDate: '',
-        completeDate: '',
-        coerciveMeasures: '',
-        caseQuality: '',
-        caseDetail: '',
-        creator: '',
-        createDate: ''
-      }
-    }
+        id: "",
+        caseNum: "",
+        caseName: "",
+        deadline: "",
+        acceptanceDate: "",
+        completeDate: "",
+        coerciveMeasures: "",
+        caseQuality: "",
+        caseDetail: "",
+        creator: "",
+        createDate: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         caseNum: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         caseName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         deadline: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         acceptanceDate: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         completeDate: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         coerciveMeasures: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         caseQuality: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         caseDetail: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/fhjwcase/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwcase/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhjwcase/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwcase/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/fhjwcase-detail.vue

+<template>
+  <el-dialog
+    :visible.sync="visible"
+    title="详情"
+    width="80%"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '140px' : '100px'"
+    >
+      <el-row :gutter="30">
+        <el-col :span="13">
+          <el-form-item
+            label="受案号"
+            prop="caseNum"
+          >
+            <el-input
+              v-model="dataForm.caseNum"
+              placeholder="受案号"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="11">
+          <el-form-item
+            label="案件名称"
+            prop="caseName"
+          >
+            <el-input
+              v-model="dataForm.caseName"
+              placeholder="案件名称"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="13">
+
+          <el-form-item
+            label="案件比"
+            prop="caseQuality"
+          >
+            <el-input
+              v-model="dataForm.caseQuality"
+              placeholder="案件比"
+              readonly
+            ></el-input>
+          </el-form-item>
+
+        </el-col>
+        <el-col :span="11">
+          <el-form-item
+            label="受理日期"
+            prop="acceptanceDate"
+          >
+            <el-input
+              v-model="dataForm.acceptanceDate"
+              readonly
+              placeholder="受理日期"
+            ></el-input>
+          </el-form-item>
+
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="13">
+          <el-form-item
+            label="强制措施"
+            prop="coerciveMeasures"
+          >
+            <el-input
+              v-model="dataForm.coerciveMeasures"
+              placeholder="强制措施"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="11">
+          <el-form-item
+            label="审结日期"
+            prop="completeDate"
+          >
+            <el-input
+              v-model="dataForm.completeDate"
+              placeholder="审结日期"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item
+        label="办理期限"
+        prop="deadline"
+      >
+        <el-input
+          v-model="dataForm.deadline"
+          placeholder="办理期限"
+          readonly
+        ></el-input>
+      </el-form-item>
+      <el-row
+        :gutter="30"
+        class="user"
+      >
+        <el-col
+          :span="12"
+          v-for="(item,index) in list"
+          :key="index"
+        >
+          <el-form-item
+            :label="index==0?'案件相关人员':''"
+            :label-width="index%2==0?'100px':'0px'"
+            prop="userLists"
+          >
+
+            <el-input
+              v-model="item.detail"
+              placeholder="案件相关人员"
+              readonly
+            ></el-input>
+
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+      <el-form-item
+        label="案件详情"
+        prop="caseDetail"
+      >
+        <el-input
+          type="textarea"
+          v-model="dataForm.caseDetail"
+          placeholder="案件详情"
+          rows="3"
+          readonly
+        ></el-input>
+      </el-form-item>
+
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <!--  <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button> -->
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: "",
+        caseNum: "",
+        caseName: "",
+        deadline: "",
+        acceptanceDate: "",
+        completeDate: "",
+        coerciveMeasures: "",
+        caseQuality: "",
+        caseDetail: "",
+        creator: "",
+        createDate: "",
+      },
+      list: [],
+    };
+  },
+  computed: {},
+  methods: {
+    init() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.getInfo();
+        }
+      });
+    },
+    // 获取信息
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwcase/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+          this.dataForm.userLists.forEach((ele) => {
+            if (ele.userRole == "当事人") {
+              let idNo = "暂无";
+              if (ele.userIdno) {
+                idNo = ele.userIdno;
+              }
+              this.list.push({
+                detail:
+                  ele.userRole +
+                  "：" +
+                  ele.username +
+                  "，" +
+                  "联系方式：" +
+                  ele.mobile +
+                  "，" +
+                  "身份证号：" +
+                  idNo,
+              });
+            } else {
+              this.list.push({
+                detail:
+                  ele.userRole +
+                  "：" +
+                  ele.username +
+                  "，" +
+                  "联系方式：" +
+                  ele.mobile,
+              });
+            }
+          });
+          console.log(this.list);
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.no-index {
+  width: calc(50% - 10px);
+  margin-top: 20px;
+  margin-right: 10px;
+}
+.index {
+  width: calc(50% - 10px);
+  margin-right: 10px;
+}
+
+/deep/.el-col {
+  padding-left: 0;
+}
+</style>

src/views/modules/fhjw/fhjwcase.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwcase}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input
+            v-model="dataForm.caseName"
+            placeholder="案件名称"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-input
+            v-model="dataForm.caseNum"
+            placeholder="受案号"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwcase:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
         </el-form-item>
+        <!--  <el-form-item>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwcase:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwcase:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwcase:delete')"
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="id" label="主键id" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseNum" label="受案号" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseName" label="案件名称" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="deadline" label="办理期限" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="acceptanceDate" label="受理日期" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="completeDate" label="审结日期" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="coerciveMeasures" label="强制措施" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseQuality" label="案件比" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseDetail" label="案件详情" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <!--  <el-table-column prop="id" label="主键id" header-align="center" align="center"></el-table-column> -->
+        <el-table-column
+          prop="caseNum"
+          label="受案号"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="caseName"
+          label="案件名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="deadline"
+          label="办理期限"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="acceptanceDate"
+          label="受理日期"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="completeDate"
+          label="审结日期"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="coerciveMeasures"
+          label="强制措施"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="caseQuality"
+          label="案件比"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="caseDetail"
+          label="案件详情"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <div class="caseDetail">{{scope.row.caseDetail}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userName"
+          label="承办人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwcase:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwcase:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <!-- <el-button
+              v-if="$hasPermission('fhjw:fhjwcase:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >{{ $t('update') }}</el-button> -->
+            <el-button
+              type="text"
+              size="small"
+              @click="detailHandle(scope.row.id)"
+            >详情</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwcase:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -45,35 +160,68 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <detail
+        v-if="detailVisible"
+        ref="detail"
+        @refreshDataList="getDataList"
+      ></detail>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwcase-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwcase-add-or-update";
+import Detail from "./fhjwcase-detail";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwcase/page',
+        getDataListURL: "/fhjw/fhjwcase/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwcase/export',
-        deleteURL: '/fhjw/fhjwcase',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwcase/export",
+        deleteURL: "/fhjw/fhjwcase",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        caseName: "",
+        caseNum: "",
+      },
+      detailVisible: false,
+    };
+  },
+  methods: {
+    detailHandle(id) {
+      console.log(id);
+      this.detailVisible = true;
+      this.$nextTick(() => {
+        this.$refs.detail.dataForm.id = id;
+        this.$refs.detail.init();
+      });
+    },
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+    Detail,
+  },
+};
 </script>
+<style lang="less" scoped>
+.caseDetail {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+</style>

src/views/modules/fhjw/fhjwcomment-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-            <el-form-item label="用户ID" prop="userId">
-          <el-input v-model="dataForm.userId" placeholder="用户ID"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item
+        label="用户ID"
+        prop="userId"
+      >
+        <el-input
+          v-model="dataForm.userId"
+          placeholder="用户"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="模板ID" prop="tempId">
-          <el-input v-model="dataForm.tempId" placeholder="模板ID"></el-input>
+      <el-form-item
+        label="模板ID"
+        prop="tempId"
+      >
+        <el-input
+          v-model="dataForm.tempId"
+          placeholder="模板"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="问题ID" prop="questionId">
-          <el-input v-model="dataForm.questionId" placeholder="问题ID"></el-input>
+      <el-form-item
+        label="问题ID"
+        prop="questionId"
+      >
+        <el-input
+          v-model="dataForm.questionId"
+          placeholder="问题"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="答案ID" prop="answerId">
-          <el-input v-model="dataForm.answerId" placeholder="答案ID"></el-input>
+      <el-form-item
+        label="caseId"
+        prop="caseId"
+      >
+        <el-input
+          v-model="dataForm.caseId"
+          placeholder="问题"
+        ></el-input>
       </el-form-item>
-      </el-form>
+      <el-form-item
+        label="答案ID"
+        prop="answerId"
+      >
+        <el-input
+          v-model="dataForm.answerId"
+          placeholder="答案"
+        ></el-input>
+      </el-form-item>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        createDate: '',
-        userId: '',
-        tempId: '',
-        questionId: '',
-        answerId: ''
-      }
-    }
+        id: "",
+        createDate: "",
+        userId: "",
+        tempId: "",
+        questionId: "",
+        answerId: "",
+        caseId: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         userId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         tempId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         questionId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         answerId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/fhjwcomment/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwcomment/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhjwcomment/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwcomment/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/fhjwcomment-detail.vue

+<template>
+  <el-dialog
+    :visible.sync="visible"
+    title="详情"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="75%"
+  >
+
+    <el-dialog
+      :visible.sync="visible2"
+      title="详情"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="10%"
+      append-to-body
+    >
+      <el-button @click="click2">111</el-button>
+    </el-dialog>
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"
+    >
+      <el-row :gutter="30">
+        <el-col :span="8">
+          <el-form-item
+            label="案件名称"
+            prop="caseName"
+          >
+            <el-input
+              v-model="dataForm.caseName"
+              placeholder="案件名称"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="用户"
+            prop="tempName"
+          >
+            <el-input
+              v-model="dataForm.userName"
+              placeholder="用户"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="8">
+          <el-form-item
+            label="角色"
+            prop="userName"
+          >
+            <el-input
+              v-model="dataForm.role"
+              placeholder="角色"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!--  <el-form-item
+        label="问题"
+        prop="questionName"
+      >
+        <el-input
+          v-model="dataForm.questionName"
+          placeholder="问题"
+          readonly
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="答案"
+        prop="answer"
+        readonly
+      >
+        <el-input
+          v-model="dataForm.answer"
+          placeholder="答案"
+        ></el-input>
+      </el-form-item> -->
+      <el-form-item
+        label="问题及答案"
+        prop="userName"
+      >
+        <el-table
+          :data="currentTableData"
+          style="width: 100%"
+          :header-row-style="{height:'20px'}"
+          :row-style="{height:'20px'}"
+          size="mini"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="questionName"
+            label="问题"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="answer"
+            label="答案"
+          >
+          </el-table-column>
+
+        </el-table>
+        <el-pagination
+          layout="prev, pager, next"
+          :total="list.length"
+          :page-size="10"
+          :current-page.sync="currentPage"
+          @current-change='handleCurrentChange'
+        >
+        </el-pagination>
+      </el-form-item>
+
+    </el-form>
+    <template slot="footer">
+      <!--  <el-button @click="visible2 = true">111</el-button> -->
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <!--  <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button> -->
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+export default {
+  data() {
+    return {
+      visible: false,
+      currentPage: 1,
+      visible2: false,
+      currentTableData: [],
+
+      dataForm: {
+        id: "",
+        createDate: "",
+        userId: "",
+        tempId: "",
+        questionId: "",
+        answerId: "",
+        caseId: "",
+        userId: "",
+        role: "",
+      },
+      headerRowStyle: {
+        color: "red",
+        background: "red",
+      },
+      list: [],
+    };
+  },
+  computed: {
+    dataRule() {
+      return {
+        userId: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+        tempId: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+        questionId: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+        answerId: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
+  },
+  created() {},
+  methods: {
+    click2() {
+      this.$message({
+        type: "success",
+        message: "车接口接0",
+        onClose: () => {
+          this.visible2 = false;
+        },
+      });
+    },
+    init() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        // console.log("sdjkfjkdhghf", this.dataForm);
+        if (this.dataForm.caseId) {
+          this.getInfo();
+        }
+      });
+    },
+    handleCurrentChange() {
+      console.log(this.currentPage);
+      this.currentTableData = this.list.slice(
+        (this.currentPage - 1) * 10,
+        this.currentPage * 10
+      );
+    },
+
+    // 获取信息
+    getInfo() {
+      this.$http
+        .get(
+          /* `/fhjw/fhjwcomment/${this.dataForm.caseId}` */ "/fhjw/fhjwcomment/getAnswer?caseId=" +
+            this.dataForm.caseId +
+            "&userId=" +
+            this.dataForm.userId
+        )
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+          this.list = this.dataForm.questionList;
+          this.currentTableData = this.list.slice(0, 10);
+        })
+        .catch(() => {});
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwcomment/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
+</script>
+

src/views/modules/fhjw/fhjwcomment.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwcomment}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input
+            v-model="dataForm.caseName"
+            placeholder="案件名称"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
         </el-form-item>
+        <!-- <el-form-item>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwcomment:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwcomment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwcomment:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwcomment:delete')"
+            type="danger"
+            @click="deleteHandle2()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="userId" label="用户ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="tempId" label="模板ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="questionId" label="问题ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="answerId" label="答案ID" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle2"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
+        <el-table-column
+          prop="caseName"
+          label="案件名称"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              @click="childHandle(scope.row)"
+            >{{ scope.row.caseName }}</el-button>
+          </template>
+        </el-table-column>
+
+        <!--  <el-table-column
+          prop="tempName"
+          label="模板"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+        <!--  <el-table-column
+          prop="questionName"
+          label="问题"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="answer"
+          label="答案"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+        <!-- <el-table-column
+          prop="userName"
+          label="用户"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwcomment:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwcomment:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <!--  <el-button
+              type="text"
+              size="small"
+              @click="detailHandle(scope.row.caseId)"
+            >详情</el-button> -->
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwcomment:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle2(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -40,35 +127,141 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
+
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <detail
+        v-if="detailVisible"
+        ref="detail"
+        @refreshDataList="getDataList"
+      ></detail>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwcomment-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwcomment-add-or-update";
+import Detail from "./fhjwcomment-detail";
+import { addDynamicRoute } from "@/router";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwcomment/page',
+        getDataListURL: "/fhjw/fhjwcomment/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwcomment/export',
-        deleteURL: '/fhjw/fhjwcomment',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwcomment/export",
+        deleteURL: "/fhjw/fhjwcomment",
+        deleteIsBatch: true,
+        deleteIsBatchKey: "id",
       },
+      detailVisible: false,
+      showpop: false,
+      showpop2: false,
       dataForm: {
-        id: ''
+        id: "",
+        caseName: "",
+      },
+      ids: "",
+      dataListSelections2: "",
+    };
+  },
+  methods: {
+    // 多选
+    dataListSelectionChangeHandle2(val) {
+      this.dataListSelections2 = val;
+    },
+    // 删除
+    deleteHandle2(id) {
+      if (
+        this.mixinViewModuleOptions.deleteIsBatch &&
+        !id &&
+        this.dataListSelections2.length <= 0
+      ) {
+        return this.$message({
+          message: this.$t("prompt.deleteBatch"),
+          type: "warning",
+          duration: 500,
+        });
       }
-    }
+      let info = "该操作将会删除本案件下所有的评价，确定进行删除操作吗？";
+      this.$confirm(info, this.$t("prompt.title"), {
+        confirmButtonText: this.$t("confirm"),
+        cancelButtonText: this.$t("cancel"),
+        type: "warning",
+      })
+        .then(() => {
+          this.$http
+            .delete(
+              `${this.mixinViewModuleOptions.deleteURL}${
+                this.mixinViewModuleOptions.deleteIsBatch ? "" : "/" + id
+              }`,
+              this.mixinViewModuleOptions.deleteIsBatch
+                ? {
+                    data: id
+                      ? [id]
+                      : this.dataListSelections2.map(
+                          (item) =>
+                            item[this.mixinViewModuleOptions.deleteIsBatchKey]
+                        ),
+                  }
+                : {}
+            )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.query();
+                },
+              });
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    },
+    detailHandle(id) {
+      console.log(id);
+      this.detailVisible = true;
+      this.$nextTick(() => {
+        this.$refs.detail.dataForm.caseId = id;
+        this.$refs.detail.init();
+      });
+    },
+    showpopclick(id) {
+      this.ids = id;
+      this.showpop2 = true;
+    },
+    // 子级
+    childHandle(row) {
+      // 路由参数
+      const routeParams = {
+        routeName: `${this.$route.name}__${row.caseId}`,
+        title: `${this.$route.meta.title} - ${row.caseName}`,
+        path: "fhjw/fhjwcommontuser",
+        params: {
+          dictTypeId: row.caseId,
+        },
+      };
+      // 动态路由
+      addDynamicRoute(routeParams, this.$router);
+    },
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+    Detail,
+  },
+};
 </script>

src/views/modules/fhjw/fhjwcommentstatistical.vue

+<template>
+
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+
+      <el-form-item>
+        <el-date-picker
+          class="date-val"
+          v-model="dataForm.dateVal"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+        >
+
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="top">
+
+      <!-- <div
+        ref="chartpie"
+        style="height:450px;width:100%"
+      ></div> -->
+
+      <Echarts
+        :options="optionsAll"
+        height="450px"
+        width="100%"
+      />
+
+    </div>
+    <div class="bottom">
+      <div
+        class="item-pie"
+        v-for="(item,index) in list"
+        :key="item.id"
+      >
+        <!--  <Echarts
+          :options="optionsDepart[index]"
+          height="450px"
+          width="100%"
+        /> -->
+        <div
+          :id="forId(index)"
+          style="height:300px;width:100%;"
+        ></div>
+      </div>
+
+    </div>
+
+  </el-card>
+</template>
+
+<script>
+import Echarts from "../../../components/echarts.vue";
+import * as echarts from "echarts";
+export default {
+  name: "fhjwcommentstatistical",
+  components: { Echarts },
+  data() {
+    return {
+      dataForm: {
+        dateVal: "",
+      },
+      chartList: [], //
+      getId: [], //用来生成echarts
+      chartList_values: [], //取其值
+      optionsAll: {},
+      optionsDepart: {},
+      list: [
+        {
+          id: 1,
+          title: "第一检察部",
+          goodnum: 500,
+          middlenum: 20,
+          bandnum: 0,
+        },
+        {
+          id: 2,
+          title: "第二检察部",
+          goodnum: 800,
+          middlenum: 50,
+          bandnum: 1,
+        },
+        {
+          id: 3,
+          title: "第三检察部",
+          goodnum: 200,
+          middlenum: 5,
+          bandnum: 0,
+        },
+        {
+          id: 4,
+          title: "第四检察部",
+          goodnum: 100,
+          middlenum: 1,
+          bandnum: 1,
+        },
+        {
+          id: 5,
+          title: "第五检察部",
+          goodnum: 250,
+          middlenum: 2,
+          bandnum: 2,
+        },
+        {
+          id: 6,
+          title: "第六检察部",
+          goodnum: 500,
+          middlenum: 3,
+          bandnum: 1,
+        },
+        {
+          id: 7,
+          title: "第七检察部",
+          goodnum: 338,
+          middlenum: 8,
+          bandnum: 0,
+        },
+        {
+          id: 8,
+          title: "溪口检察部",
+          goodnum: 188,
+          middlenum: 2,
+          bandnum: 0,
+        },
+      ],
+    };
+  },
+  methods: {
+    forId(index) {
+      return "geo_" + index;
+    },
+    /*  show(option) {
+            console.log(option.level_incite_user_list, '每个等级的占比情况11');
+            this.chartList = option.level_incite_user_list;
+            this.mapTree();
+        }, */
+    mapTree() {
+      this.getId = [];
+      this.chartList_values = Object.values(this.list);
+      this.$nextTick(function () {
+        for (var i = 0; i < this.chartList_values.length; i++) {
+          let arr = [];
+
+          arr.push(
+            {
+              value: this.chartList_values[i].goodnum,
+              name: "好",
+            },
+            {
+              value: this.chartList_values[i].middlenum,
+              name: "中",
+            },
+            {
+              value: this.chartList_values[i].bandnum,
+              name: "差",
+            }
+          );
+
+          console.log(arr, "arr========");
+          //拿到channel_grade_name作为变量key
+          this.getId.push(echarts.init(document.getElementById("geo_" + i)));
+          this.getId[i].setOption({
+            title: {
+              text: this.chartList_values[i].title,
+              left: "center",
+            },
+            color: ["#91cc75", "#FFDC60", "#FF7070"],
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
+            },
+            legend: {
+              bottom: 0,
+              left: "center",
+              data: ["好", "中", "差"],
+            },
+            series: [
+              {
+                name: "占比",
+                type: "pie",
+                radius: "60%",
+                center: ["50%", "50%"],
+                selectedMode: "single",
+                data: arr,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "rgba(0, 0, 0, 0.5)",
+                  },
+                },
+              },
+            ],
+          });
+        }
+      });
+    },
+    getPie() {
+      //const myChart = echarts.init(chart, null, { renderer: "svg" });
+      let legendData = [];
+      let goodData = [];
+      let middleData = [];
+      let badData = [];
+      this.list.forEach((ele) => {
+        legendData.push(ele.title);
+        goodData.push(ele.goodnum);
+        middleData.push(ele.middlenum);
+        badData.push(ele.bandnum);
+      });
+
+      this.optionsAll = {
+        color: ["#91cc75", "#FFDC60", "#FF7070"],
+        title: { text: "评价统计", left: "center" },
+        legend: {
+          bottom: 0,
+          data: ["好", "中", "差"],
+        },
+        xAxis: {
+          type: "category",
+          data: legendData,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "好",
+            data: goodData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "中",
+            data: middleData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "差",
+            data: badData,
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+        ],
+      };
+    },
+  },
+  created() {
+    this.getPie();
+  },
+  mounted() {
+    this.mapTree();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.fhjwcommentstatistical {
+  width: 100%;
+  .top {
+    width: 100%;
+    display: flex;
+  }
+}
+.bottom {
+  width: 100%;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  .item-pie {
+    width: calc(25% - 10px);
+    margin-right: 10px;
+    margin-top: 80px;
+    // flex: 1;
+
+    //display: flex;
+  }
+}
+</style>
\ No newline at end of file

src/views/modules/fhjw/fhjwcommontuser.vue

+<template>
+  <div class="fhjwcommontuser">
+    <el-card
+      shadow="never"
+      class="aui-card--fill"
+    >
+      <div class="mod-fhjw__fhjwcomment}">
+        <el-form
+          :inline="true"
+          :model="dataForm"
+          @keyup.enter.native="getDataList()"
+        >
+          <el-form-item>
+            <el-input
+              v-model="dataForm.caseName"
+              placeholder="案件名称"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          </el-form-item>
+          <!--  <el-form-item>
+            <el-button
+              type="info"
+              @click="exportHandle()"
+            >{{ $t('export') }}</el-button>
+          </el-form-item> -->
+          <!-- <el-form-item>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwcomment:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
+        </el-form-item> -->
+          <el-form-item>
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwcomment:delete')"
+              type="danger"
+              @click="deleteHandle()"
+            >{{ $t('deleteBatch') }}</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          v-loading="dataListLoading"
+          :data="dataList"
+          border
+          @selection-change="dataListSelectionChangeHandle"
+          style="width: 100%;"
+        >
+          <el-table-column
+            type="selection"
+            header-align="center"
+            align="center"
+            width="50"
+          ></el-table-column>
+          <!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
+          <!--  <el-table-column
+            prop="caseName"
+            label="案件名称"
+            header-align="center"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="childHandle(scope.row)"
+              >{{ scope.row.caseName }}</el-button>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="tempName"
+            label="模板"
+            header-align="center"
+            align="center"
+          ></el-table-column> -->
+          <!--  <el-table-column
+          prop="questionName"
+          label="问题"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="answer"
+          label="答案"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+          <el-table-column
+            prop="username"
+            label="用户"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="createDate"
+            label="创建时间"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            :label="$t('handle')"
+            fixed="right"
+            header-align="center"
+            align="center"
+            width="150"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+                @click="detailHandle(scope.row.caseId,scope.row.id,scope.row.userRole)"
+              >详情</el-button>
+              <el-button
+                v-if="$hasPermission('fhjw:fhjwcomment:delete')"
+                type="text"
+                size="small"
+                @click="deleteHandle(scope.row.id)"
+              >{{ $t('delete') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          :current-page="page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="limit"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle"
+        >
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update
+          v-if="addOrUpdateVisible"
+          ref="addOrUpdate"
+          @refreshDataList="getDataList"
+        ></add-or-update>
+        <detail
+          v-if="detailVisible"
+          ref="detail"
+          @refreshDataList="getDataList"
+        ></detail>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwcomment-add-or-update";
+import Detail from "./fhjwcomment-detail";
+export default {
+  name: "fhjwcommontuser",
+  mixins: [mixinViewModule],
+  components: {
+    AddOrUpdate,
+    Detail,
+  },
+  data() {
+    return {
+      //GET /fhjw/user/getUserPageByCase
+      //DELETE /fhjw/user
+      mixinViewModuleOptions: {
+        getDataListURL:
+          "/fhjw/user/getUserPageByCase?caseId=" +
+          this.$route.params.dictTypeId,
+        getDataListIsPage: true,
+        exportURL: "/fhjw/fhjwcomment/export",
+        deleteURL: "/fhjw/user",
+        deleteIsBatch: true,
+      },
+      detailVisible: false,
+      dataForm: {
+        id: "",
+        caseName: "",
+      },
+    };
+  },
+  methods: {
+    detailHandle(id, userId, role) {
+      console.log(id);
+      this.detailVisible = true;
+      this.$nextTick(() => {
+        this.$refs.detail.dataForm.caseId = this.$route.params.dictTypeId;
+        this.$refs.detail.dataForm.userId = userId;
+        this.$refs.detail.dataForm.role = role;
+        this.$refs.detail.init();
+      });
+    },
+  },
+  created() {},
+};
+</script>
+
+<style lang="less" scoped>
+.fhjwcommontuser {
+  width: 100%;
+}
+</style>
\ No newline at end of file

src/views/modules/fhjw/fhjwfeedback-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="用户ID" prop="userId">
-          <el-input v-model="dataForm.userId" placeholder="用户ID"></el-input>
-      </el-form-item>
-          <el-form-item label="反馈类型" prop="feedbackType">
-          <el-input v-model="dataForm.feedbackType" placeholder="反馈类型;1,反馈意见;2,控告申诉;3,代表委员有话说"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
+    >
+      <el-row :gutter="30">
+
+        <el-col :span="12">
+          <el-form-item
+            label="用户"
+            prop="userId"
+          >
+            <el-input
+              v-model="dataForm.userId"
+              placeholder="用户ID"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+
+        </el-col>
+      </el-row>
+      <el-form-item
+        label="反馈类型"
+        prop="feedbackType"
+      >
+        <el-input
+          v-model="dataForm.feedbackType"
+          placeholder="反馈类型;1,反馈意见;2,控告申诉;3,代表委员有话说"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="意见类别" prop="optionStatus">
-          <el-input v-model="dataForm.optionStatus" placeholder="意见类别"></el-input>
+      <el-form-item
+        label="意见类别"
+        prop="optionStatus"
+      >
+        <el-input
+          v-model="dataForm.optionStatus"
+          placeholder="意见类别"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="意见、申诉内容" prop="content">
-          <el-input v-model="dataForm.content" placeholder="意见、申诉内容"></el-input>
+      <el-form-item
+        label="意见、申诉内容"
+        prop="content"
+      >
+        <el-input
+          v-model="dataForm.content"
+          placeholder="意见、申诉内容"
+          type="textarea"
+          rows="3"
+        ></el-input>
       </el-form-item>
-        </el-form>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        userId: '',
-        feedbackType: '',
-        optionStatus: '',
-        content: '',
-        createDate: ''
-      }
-    }
+        id: "",
+        userId: "",
+        feedbackType: "",
+        optionStatus: "",
+        content: "",
+        createDate: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         userId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         feedbackType: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         optionStatus: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         content: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/fhjwfeedback/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwfeedback/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhjwfeedback/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwfeedback/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/fhjwfeedback-detail.vue

+<template>
+  <el-dialog
+    :visible.sync="visible"
+    title="详情"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
+    >
+      <el-row :gutter="30">
+
+        <el-col :span="12">
+          <el-form-item
+            label="用户"
+            prop="userId"
+          >
+            <el-input
+              v-model="dataForm.userId"
+              placeholder="用户"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="反馈类型"
+            prop="feedbackType"
+          >
+            <!-- <template slot-scope="scope">
+              <span v-if="dataForm.feedbackType==1">反馈意见</span>
+              <span v-if="dataForm.feedbackType==2">控告申诉</span>
+              <span v-if="dataForm.feedbackType==3">代表委员有话说</span>
+            </template> -->
+            <el-input
+              v-model="feedbackType"
+              readonly
+              placeholder="反馈类型;1,反馈意见;2,控告申诉;3,代表委员有话说"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item
+        label="意见类别"
+        prop="optionStatus"
+      >
+        <el-input
+          v-model="dataForm.optionStatus"
+          readonly
+          placeholder="意见类别"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="意见、申诉内容"
+        prop="content"
+      >
+        <el-input
+          v-model="dataForm.content"
+          placeholder="意见、申诉内容"
+          readonly
+          type="textarea"
+          rows="3"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <!--  <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button> -->
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: "",
+        userId: "",
+        feedbackType: "",
+        optionStatus: "",
+        content: "",
+        createDate: "",
+      },
+      feedbackType: "",
+    };
+  },
+
+  methods: {
+    init() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.getInfo();
+        }
+      });
+    },
+    // 获取信息
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwfeedback/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+          this.feedbackType =
+            this.dataForm.feedbackType == 1
+              ? "反馈意见"
+              : this.dataForm.feedbackType == 2
+              ? "控告申诉"
+              : "代表委员有话说";
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>

src/views/modules/fhjw/fhjwfeedback.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwfeedback}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input
+            v-model="dataForm.content"
+            placeholder="意见、申诉内容"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <!-- <el-input
+            v-model="dataForm.feedbackType"
+            placeholder="意见、申诉内容"
+            clearable
+          ></el-input> -->
+          <el-select
+            v-model="dataForm.feedbackType"
+            placeholder="请选择反馈类型"
+            clearable
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwfeedback:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
         </el-form-item>
+        <!-- <el-form-item>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwfeedback:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwfeedback:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwfeedback:delete')"
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="userId" label="用户ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="feedbackType" label="反馈类型" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="optionStatus" label="意见类别" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="content" label="意见、申诉内容" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <!--    <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
+        <el-table-column
+          prop="content"
+          label="意见、申诉内容"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="feedbackType"
+          label="反馈类型"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwfeedback:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwfeedback:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <span v-if="scope.row.feedbackType==1">反馈意见</span>
+            <span v-if="scope.row.feedbackType==2">控告申诉</span>
+            <span v-if="scope.row.feedbackType==3">代表委员有话说</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="optionStatus"
+          label="意见类别"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+
+        <el-table-column
+          prop="userName"
+          label="用户"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="detailHandle(scope.row.id)"
+            >详情</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwfeedback:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -40,35 +140,75 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <detail
+        v-if="detailVisible"
+        ref="detail"
+        @refreshDataList="getDataList"
+      ></detail>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwfeedback-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwfeedback-add-or-update";
+import Detail from "./fhjwfeedback-detail";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwfeedback/page',
+        getDataListURL: "/fhjw/fhjwfeedback/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwfeedback/export',
-        deleteURL: '/fhjw/fhjwfeedback',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwfeedback/export",
+        deleteURL: "/fhjw/fhjwfeedback",
+        deleteIsBatch: true,
       },
+      detailVisible: false,
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        content: "",
+        feedbackType: "",
+      },
+      options: [
+        {
+          value: 1,
+          label: "反馈意见",
+        },
+        {
+          value: 2,
+          label: "控告申诉",
+        },
+        {
+          value: 3,
+          label: "代表委员有话说",
+        },
+      ],
+      value: "",
+    };
+  },
+  methods: {
+    detailHandle(id) {
+      console.log(id);
+      this.detailVisible = true;
+      this.$nextTick(() => {
+        this.$refs.detail.dataForm.id = id;
+        this.$refs.detail.init();
+      });
+    },
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+    Detail,
+  },
+};
 </script>

src/views/modules/fhjw/fhjwquestion-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-              <el-form-item label="问卷模版ID" prop="tempId">
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <!--    <el-form-item label="问卷模版ID" prop="tempId">
           <el-input v-model="dataForm.tempId" placeholder="问卷模版ID"></el-input>
+      </el-form-item> -->
+      <el-form-item
+        label="问题描述"
+        prop="question"
+      >
+        <el-input
+          v-model="dataForm.question"
+          placeholder="问题描述"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="问题描述" prop="question">
-          <el-input v-model="dataForm.question" placeholder="问题描述"></el-input>
-      </el-form-item>
-      </el-form>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  props: ["tempId"],
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        creator: '',
-        createDate: '',
-        tempId: '',
-        question: ''
-      }
-    }
+        id: "",
+        creator: "",
+        createDate: "",
+        tempId: "",
+        question: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         tempId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         question: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/fhjwquestion/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/fhjwquestion/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhjwquestion/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.dataForm.tempId = this.tempId;
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/fhjwquestion/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/fhjwquestion.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwquestion}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <!-- <el-form-item>
+          <el-input
+            v-model="dataForm.question"
+            placeholder="问题描述"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
-        </el-form-item>
+        </el-form-item> -->
+        <!-- <el-form-item>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwquestion:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwquestion:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="id" label="主键id" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="tempId" label="问卷模版ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="question" label="问题描述" header-align="center" align="center">
-            <template slot-scope="scope">
-                <el-button type="text" @click="childHandle(scope.row)">{{ scope.row.question }}</el-button>
-            </template>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <!-- <el-table-column
+          prop="id"
+          label="主键id"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+        <el-table-column
+          prop="question"
+          label="问题描述"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              @click="childHandle(scope.row)"
+            >{{ scope.row.question }}</el-button>
+          </template>
         </el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        <!-- <el-table-column
+          prop="creator"
+          label="创建者"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <!--  <el-table-column
+          prop="tempId"
+          label="问卷模版ID"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwquestion:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwquestion:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >修改</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -43,52 +117,63 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        :tempId="tempId"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwquestion-add-or-update'
-import { addDynamicRoute } from '@/router'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwquestion-add-or-update";
+import { addDynamicRoute } from "@/router";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwquestion/page',
+        getDataListURL:
+          "/fhjw/fhjwquestion/page?tempId=" + this.$route.params.dictTypeId,
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwquestion/export',
-        deleteURL: '/fhjw/fhjwquestion',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwquestion/export",
+        deleteURL: "/fhjw/fhjwquestion",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        question: "",
+      },
+      tempId: this.$route.params.dictTypeId,
+    };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
   },
   methods: {
     // 子级
-    childHandle (row) {
+    childHandle(row) {
+      console.log(row);
       // 路由参数
       const routeParams = {
         routeName: `${this.$route.name}__${row.id}`,
         title: `${this.$route.meta.title} - ${row.question}`,
-        path: 'fhjw/fhjwanswer',
+        path: "fhjw/fhjwanswer",
         params: {
-          dictTypeId: row.id
-        }
-      }
+          dictTypeId: row.id,
+          questionName: row.question,
+        },
+      };
       // 动态路由
-      addDynamicRoute(routeParams, this.$router)
-    }
-  }
-}
+      addDynamicRoute(routeParams, this.$router);
+    },
+  },
+};
 </script>

src/views/modules/fhjw/fhjwstatistical.vue

+<template>
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
+    <!-- <span class="label">筛选</span>
+    <el-date-picker
+      class="date-val"
+      v-model="dateVal"
+      type="monthrange"
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+    >
+
+    </el-date-picker>
+    <el-button>查询</el-button> -->
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+      <el-form-item>
+        <el-input
+          v-model="dataForm.department"
+          placeholder="部门名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker
+          class="date-val"
+          v-model="dataForm.dateVal"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+        >
+
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="titleline">
+      <div class="left">
+        <img
+          src="../../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        意见统计
+      </div>
+      <div class="right">
+        <img
+          src="../../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        代表委员意见统计
+      </div>
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartpie1"
+        style="width:50%;height:250px;"
+      ></div> -->
+      <div style="flex:1;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionsComment"
+          height="300px"
+          width="100%"
+        />
+      </div>
+
+      <div style="flex:1;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionsDaibiao"
+          height="300px"
+          width="100%"
+        />
+      </div>
+      <!-- <div
+        ref="chartpie2"
+        style="width:50%;height:250px"
+      ></div> -->
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartzhuzhuang"
+        style="width:100%;height:375px;"
+      ></div> -->
+      <Echarts
+        :options="optionsAll"
+        height="375px"
+        width="100%"
+      />
+    </div>
+
+  </el-card>
+
+</template>
+
+<script>
+import Echarts from "../../../components/echarts.vue";
+export default {
+  name: "fhjwstatistical",
+  components: { Echarts },
+  data() {
+    return {
+      dataForm: {
+        dateVal: "",
+        department: "",
+      },
+      optionsComment: {},
+      optionsDaibiao: {},
+      optionsAll: {},
+    };
+  },
+  methods: {
+    getPie1() {
+      this.optionsComment = {
+        /*  title: {
+            text: "天气情况统计",
+            subtext: "虚构数据",
+            left: "center",
+          }, */
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "反映拖延消极办案",
+            "反映违规不当办案",
+            "反映办案不廉或作风不正",
+            "反映存在插手干预案件办理",
+            "反映其他方面问题",
+          ],
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "反映拖延消极办案" },
+              { value: 735, name: "反映违规不当办案" },
+              { value: 510, name: "反映办案不廉或作风不正" },
+              { value: 434, name: "反映存在插手干预案件办理" },
+              { value: 335, name: "反映其他方面问题" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getPie2() {
+      this.optionsDaibiao = {
+        /*  title: {
+            text: "天气情况统计",
+            subtext: "虚构数据",
+            left: "center",
+          }, */
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "反映拖延消极办案",
+            "反映违规不当办案",
+            "反映办案不廉或作风不正",
+            "反映存在插手干预案件办理",
+            "反映其他方面问题",
+          ],
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "反映拖延消极办案" },
+              { value: 735, name: "反映违规不当办案" },
+              { value: 510, name: "反映办案不廉或作风不正" },
+              { value: 434, name: "反映存在插手干预案件办理" },
+              { value: 335, name: "反映其他方面问题" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getZhuzhuang() {
+      this.optionsAll = {
+        title: {
+          text: "反馈统计",
+          left: "center",
+        },
+        xAxis: {
+          type: "category",
+          data: ["控告申诉", "意见反馈", "代表委员有话说"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: "top",
+            },
+            data: [120, 200, 150],
+            type: "bar",
+          },
+        ],
+      };
+    },
+  },
+  created() {
+    this.getPie1();
+    this.getPie2();
+    this.getZhuzhuang();
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.label,
+.date-val {
+  margin-right: 10px;
+}
+.titleline {
+  display: flex;
+  line-height: 50px;
+  font-size: 18px;
+  border-bottom: 1px solid #eee;
+  .left {
+    width: 50%;
+  }
+  .right {
+    width: 50%;
+  }
+}
+.bottom {
+  display: flex;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file

src/views/modules/fhjw/fhjwtemp.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__fhjwtemp}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input
+            v-model="dataForm.tempName"
+            placeholder="问卷名称"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
+        <!-- <el-form-item>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwtemp:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwtemp:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:fhjwtemp:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:fhjwtemp:delete')"
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="tempName" label="问卷名称" header-align="center" align="center">
-            <template slot-scope="scope">
-                <el-button type="text" @click="childHandle(scope.row)">{{ scope.row.tempName }}</el-button>
-            </template>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="tempName"
+          label="问卷名称"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              @click="childHandle(scope.row)"
+            >{{ scope.row.tempName }}</el-button>
+          </template>
         </el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:fhjwtemp:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:fhjwtemp:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwtemp:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >{{ $t('update') }}</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:fhjwtemp:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -40,52 +102,58 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './fhjwtemp-add-or-update'
-import { addDynamicRoute } from '@/router'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./fhjwtemp-add-or-update";
+import { addDynamicRoute } from "@/router";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/fhjwtemp/page',
+        getDataListURL: "/fhjw/fhjwtemp/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/fhjwtemp/export',
-        deleteURL: '/fhjw/fhjwtemp',
-        deleteIsBatch: true
+        exportURL: "/fhjw/fhjwtemp/export",
+        deleteURL: "/fhjw/fhjwtemp",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        tempName: "",
+      },
+    };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
   },
   methods: {
     // 子级
-    childHandle (row) {
+    childHandle(row) {
       // 路由参数
       const routeParams = {
         routeName: `${this.$route.name}__${row.id}`,
         title: `${this.$route.meta.title} - ${row.tempName}`,
-        path: 'fhjw/fhjwquestion',
+        path: "fhjw/fhjwquestion",
         params: {
-          dictTypeId: row.id
-        }
-      }
+          dictTypeId: row.id,
+        },
+      };
       // 动态路由
-      addDynamicRoute(routeParams, this.$router)
-    }
-  }
-}
+      addDynamicRoute(routeParams, this.$router);
+    },
+  },
+};
 </script>

src/views/modules/fhjw/role-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="角色名称" prop="name">
-          <el-input v-model="dataForm.name" placeholder="角色名称"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item
+        label="角色名称"
+        prop="name"
+      >
+        <el-input
+          v-model="dataForm.name"
+          placeholder="角色名称"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="问卷模版ID" prop="tempId">
-          <el-input v-model="dataForm.tempId" placeholder="问卷模版ID"></el-input>
-      </el-form-item>
-          <el-form-item label="备注" prop="remark">
-          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+      <el-form-item
+        label="问卷模版"
+        prop="tempId"
+      >
+        <!--  <el-input v-model="dataForm.tempName" placeholder="问卷模版"></el-input> -->
+
+        <!--   <el-input v-model="dataForm.userRole" placeholder="案件ID"></el-input> -->
+        <el-select
+          style="width:100%"
+          v-model="dataForm.tempId"
+          placeholder="请选择所属权限"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.id"
+            :label="item.tempName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
       </el-form-item>
-      </el-form>
+
+      <!-- <el-form-item
+        label="备注"
+        prop="remark"
+      >
+        <el-input
+          v-model="dataForm.remark"
+          placeholder="备注"
+        ></el-input>
+      </el-form-item> -->
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        name: '',
-        tempId: '',
-        creator: '',
-        createDate: '',
-        updater: '',
-        updateDate: '',
-        remark: ''
-      }
-    }
+        id: "",
+        name: "",
+        tempId: "",
+        creator: "",
+        createDate: "",
+        updater: "",
+        updateDate: "",
+        remark: "",
+        tempName: "",
+      },
+      options: [],
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         tempId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+        this.getAllTemp();
+      });
+    },
+    getAllTemp() {
+      this.$http
+        .get("/fhjw/fhjwtemp/getAllTemp")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.options = res.data;
+        })
+        .catch(() => {});
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/role/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+    getInfo() {
+      this.$http
+        .get(`/fhjw/role/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/role/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          console.log("aa", this.dataForm);
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/role/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/role.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__role}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <!--  <el-form-item>
+          <el-input
+            v-model="dataForm.id"
+            placeholder="id"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
-        </el-form-item>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:role:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:role:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:role:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:role:delete')"
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="name" label="角色名称" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="tempName" label="问卷模版" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="角色名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="tempName"
+          label="问卷模版"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="creator"
+          label="创建者"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <!--   <el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column> 
+        <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>-->
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:role:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >{{ $t('update') }}</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:role:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -41,35 +110,40 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './role-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./role-add-or-update";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/role/page',
+        getDataListURL: "/fhjw/role/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/role/export',
-        deleteURL: '/fhjw/role',
-        deleteIsBatch: true
+        exportURL: "/fhjw/role/export",
+        deleteURL: "/fhjw/role",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+      },
+    };
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+  },
+};
 </script>

src/views/modules/fhjw/user-add-or-update.vue

 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="用户名" prop="username">
-          <el-input v-model="dataForm.username" placeholder="用户名"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item
+        label="用户名"
+        prop="username"
+      >
+        <el-input
+          v-model="dataForm.username"
+          placeholder="用户名"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="手机号" prop="mobile">
-          <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+      <el-form-item
+        label="手机号"
+        prop="mobile"
+      >
+        <el-input
+          v-model="dataForm.mobile"
+          placeholder="手机号"
+        ></el-input>
       </el-form-item>
-          <el-form-item label="身份证号" prop="userIdno">
-          <el-input v-model="dataForm.userIdno" placeholder="身份证号"></el-input>
+
+      <el-form-item
+        label="所属权限"
+        prop="userRole"
+      >
+        <!--   <el-input v-model="dataForm.userRole" placeholder="案件ID"></el-input> -->
+        <el-select
+          style="width:100%"
+          v-model="dataForm.userRole"
+          placeholder="请选择所属权限"
+          @change="selectChanged"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.name"
+            :label="item.name"
+            :value="item.name"
+          >
+          </el-option>
+        </el-select>
       </el-form-item>
-          <el-form-item label="案件ID" prop="caseId">
-          <el-input v-model="dataForm.caseId" placeholder="案件ID"></el-input>
+
+      <el-form-item
+        label="身份证号"
+        prop="userIdno"
+      >
+        <el-input
+          v-model="dataForm.userIdno"
+          placeholder="身份证号"
+        ></el-input>
       </el-form-item>
-        </el-form>
+
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        @click="dataFormSubmitHandle()"
+      >{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
-        username: '',
-        mobile: '',
-        password: '',
-        userIdno: '',
-        caseId: '',
-        createDate: ''
-      }
-    }
+        id: "",
+        username: "",
+        mobile: "",
+        password: "",
+        userIdno: "",
+        userRole: "",
+        /*  caseId: '', */
+        createDate: "",
+      },
+      options: [],
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         password: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: false,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         userIdno: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: false,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
-        caseId: [
-          { required: false, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+        userRole: [
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
   methods: {
-    init () {
-      this.visible = true
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+        this.getAllRole();
+      });
     },
-    // 获取信息
-    getInfo () {
-      this.$http.get(`/fhjw/user/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
+    selectChanged(value) {
+      this.options.forEach((ele) => {
+        if (ele.name == value) {
+          this.dataForm.userRoleId = ele.id;
         }
-      }).catch(() => {})
+      });
     },
-    // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/user/', this.dataForm).then(({ data: res }) => {
+    // 获取信息
+    getInfo() {
+      this.$http
+        .get(`/fhjw/user/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
+    },
+    getAllRole() {
+      this.$http
+        .get("/fhjw/role/getAllRole")
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-            return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
-            }
-          })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          this.options = res.data;
+        })
+        .catch(() => {});
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          console.log(this.dataForm);
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/fhjw/user/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/fhjw/user.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
     <div class="mod-fhjw__user}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <!-- <el-form-item>
+          <el-input
+            v-model="dataForm.username"
+            placeholder="用户名"
+            clearable
+          ></el-input>
+        </el-form-item> -->
         <el-form-item>
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+          <el-input
+            v-model="dataForm.mobile"
+            placeholder="手机号"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
+        <!-- <el-form-item>
+          <el-button
+            type="info"
+            @click="exportHandle()"
+          >{{ $t('export') }}</el-button>
+        </el-form-item> -->
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:user:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button v-if="$hasPermission('fhjw:user:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button
+            v-if="$hasPermission('fhjw:user:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+          >{{ $t('add') }}</el-button>
         </el-form-item>
+        <!--  <el-form-item>
+          <el-button
+            v-if="$hasPermission('fhjw:user:delete')"
+            type="danger"
+            @click="deleteHandle()"
+          >{{ $t('deleteBatch') }}</el-button>
+        </el-form-item> -->
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-        <el-table-column prop="username" label="用户名" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="userIdno" label="身份证号" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="userRole" label="所属权限" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="caseId" label="案件ID" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%;"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="手机号"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userIdno"
+          label="身份证号"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userRole"
+          label="所属权限"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <!--  <el-table-column
+          prop="caseId"
+          label="案件ID"
+          header-align="center"
+          align="center"
+        ></el-table-column> -->
+
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button v-if="$hasPermission('fhjw:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
-            <el-button v-if="$hasPermission('fhjw:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button
+              v-if="$hasPermission('fhjw:user:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+            >{{ $t('update') }}</el-button>
+            <!--  <el-button
+              v-if="$hasPermission('fhjw:user:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+            >{{ $t('delete') }}</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -40,35 +127,41 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
     </div>
   </el-card>
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from './user-add-or-update'
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./user-add-or-update";
 export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/fhjw/user/page',
+        getDataListURL: "/fhjw/user/page",
         getDataListIsPage: true,
-        exportURL: '/fhjw/user/export',
-        deleteURL: '/fhjw/user',
-        deleteIsBatch: true
+        exportURL: "/fhjw/user/export",
+        deleteURL: "/fhjw/user",
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
-      }
-    }
+        id: "",
+        mobile: "",
+      },
+    };
   },
   components: {
-    AddOrUpdate
-  }
-}
+    AddOrUpdate,
+  },
+};
 </script>

src/views/modules/home.vue

 <template>
-  <el-card shadow="never" class="aui-card--fill">
-      <div style="font-weight: 600;text-align: center;">
-          欢迎登陆奉化检务综合管理系统
+  <el-card
+    shadow="never"
+    class="aui-card--fill"
+  >
+    <!--  <div class="title">
+      欢迎登陆检察阳光码管理系统
+    </div> -->
+    <div class="top">
+      <div
+        class="item"
+        v-for="item in list"
+        :key="item.id"
+      >
+        <div class="item-content">
+          <img
+            src="../../assets/img/member_icon_54.png"
+            alt=""
+            class="title-img"
+          >
+          <div class="right">
+            <div class="num">{{item.num}}</div>
+            <div class="title">{{item.title}}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="titleline">
+      <div class="left">
+        <img
+          src="../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        部门办案情况
+      </div>
+      <div class="right">
+        <img
+          src="../../assets/img/logo_tj.png"
+          alt=""
+          style="width:20px;height:20px"
+        >
+        部门办案情况统计
+      </div>
+    </div>
+    <div class="bottom">
+      <!--  <div
+        ref="chartpie"
+        style="width:40%;height:470px;flex:3.5"
+      ></div> -->
+      <div style="width:40%;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionHandlingSituation"
+          height="470px"
+          width="100%"
+        />
+      </div>
+
+      <div style="width:60%;transform: translate3d(0, -10%, 0);">
+        <Echarts
+          :options="optionHandlingSituationZhe"
+          height="470px"
+          width="100%"
+        />
       </div>
+
+      <!-- <div
+        ref="chartzhexian"
+        style="width:60%;height:470px;flex:6.5"
+      ></div> -->
+    </div>
+
   </el-card>
 </template>
 
 <script>
+import Echarts from "../../components/echarts.vue";
 export default {
-  data () {
+  components: { Echarts },
+  data() {
     return {
-      sysInfo: {
-        osName: '',
-        osVersion: '',
-        osArch: '',
-        processors: 0,
-        totalPhysical: 0,
-        freePhysical: 0,
-        memoryRate: 0,
-        userLanguage: '',
-        jvmName: '',
-        javaVersion: '',
-        javaHome: '',
-        userDir: '',
-        javaTotalMemory: 0,
-        javaFreeMemory: 0,
-        javaMaxMemory: 0,
-        userName: '',
-        systemCpuLoad: 0,
-        userTimezone: ''
-      }
-    }
+      optionHandlingSituation: {},
+      optionHandlingSituationZhe: {},
+      list: [
+        {
+          id: 1,
+          title: "第一检察部",
+          num: 834,
+        },
+        {
+          id: 2,
+          title: "第二检察部",
+          num: 307,
+        },
+        {
+          id: 3,
+          title: "第三检察部",
+          num: 32,
+        },
+        {
+          id: 4,
+          title: "第四检察部",
+          num: 145,
+        },
+        {
+          id: 5,
+          title: "第五检察部",
+          num: 153,
+        },
+        {
+          id: 6,
+          title: "第六检察部",
+          num: 81,
+        },
+        {
+          id: 7,
+          title: "第七检察部",
+          num: 271,
+        },
+        {
+          id: 8,
+          title: "溪口检察部",
+          num: 8,
+        },
+      ],
+    };
   },
-  created () {
-    this.getSysInfo()
+
+  created() {
+    //  this.getSysInfo();
+    this.getPie();
+    this.getZhe();
   },
+  mounted() {},
   methods: {
-    getSysInfo () {
-      this.$http.get('/sys/info').then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.sysInfo = res.data
-      }).catch(() => {})
+    getSysInfo() {
+      this.$http
+        .get("/sys/info")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.sysInfo = res.data;
+        })
+        .catch(() => {});
+    },
+    getPie() {
+      this.optionHandlingSituation = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+
+          data: [
+            "第一检察部",
+            "第二检察部",
+            "第三检察部",
+            "第四检察部",
+            "第五检察部",
+            "第六检察部",
+            "第七检察部",
+            "溪口检察部",
+          ],
+        },
+        series: [
+          {
+            name: "占比",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            selectedMode: "single",
+            data: [
+              { value: 1548, name: "第一检察部" },
+              { value: 735, name: "第二检察部" },
+              { value: 510, name: "第三检察部" },
+              { value: 434, name: "第四检察部" },
+              { value: 335, name: "第五检察部" },
+              { value: 335, name: "第六检察部" },
+              { value: 335, name: "第七检察部" },
+              { value: 335, name: "溪口检察部" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+    },
+    getZhe() {
+      this.optionHandlingSituationZhe = {
+        /* title: {
+            text: "折线图堆叠",
+          }, */
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          bottom: 0,
+          left: "center",
+          data: [
+            "第一检察部",
+            "第二检察部",
+            "第三检察部",
+            "第四检察部",
+            "第五检察部",
+            "第六检察部",
+            "第七检察部",
+            "溪口检察部",
+          ],
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        /*  toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          }, */
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "2020-12",
+            "2021-01",
+            "2021-02",
+            "2021-03",
+            "2021-04",
+            "2021-05",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: true,
+          },
+        },
+        series: [
+          {
+            name: "第一检察部",
+            type: "line",
+            stack: "总量",
+            data: [120, 132, 101, 134, 90, 230],
+          },
+          {
+            name: "第二检察部",
+            type: "line",
+            stack: "总量",
+            data: [220, 182, 191, 234, 290, 330],
+          },
+          {
+            name: "第三检察部",
+            type: "line",
+            stack: "总量",
+            data: [150, 232, 201, 154, 190, 330],
+          },
+          {
+            name: "第四检察部",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330],
+          },
+          {
+            name: "第五检察部",
+            type: "line",
+            stack: "总量",
+            data: [820, 932, 901, 934, 1290, 1330],
+          },
+          {
+            name: "第六检察部",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330],
+          },
+          {
+            name: "第七检察部",
+            type: "line",
+            stack: "总量",
+            data: [100, 200, 300, 500, 200, 100],
+          },
+          {
+            name: "溪口检察部",
+            type: "line",
+            stack: "总量",
+            data: [500, 100, 500, 200, 50, 10],
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    background: #4f96e1;
+    color: #fff;
+    display: flex;
+    width: 150px;
+    height: 90px;
+    text-align: center;
+    vertical-align: middle;
+    padding: 10px 10px 0;
+    border-radius: 8px;
+    position: relative;
+    .num {
+      font-size: 30px;
+    }
+    .item-content {
+      position: absolute;
+      width: 80%;
+      margin: 0 auto;
+      top: 50%;
+
+      transform: translate(0, -50%);
+      display: flex;
+    }
+    .title-img {
+      width: 40px;
+      height: 40px;
+      //vertical-align: middle;
+    }
+    .right {
+      margin-left: 10px;
+      text-align: right;
+    }
+    .title,
+    .num {
+      text-align: right;
     }
   }
 }
-</script>
+.titleline {
+  display: flex;
+  line-height: 50px;
+  font-size: 18px;
+  margin-top: 35px;
+  border-bottom: 1px solid #eee;
+  .left {
+    width: 40%;
+  }
+  .right {
+    width: 60%;
+  }
+}
+.bottom {
+  width: 100%;
+  display: flex;
+  margin-top: 20px;
+}
+</style>

src/views/pages/login.vue

@@ -3,51 +3,113 @@
     <div class="aui-content__wrapper">
       <main class="aui-content">
         <div class="login-header">
-          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+          <!-- <h2 class="login-brand">{{ $t('brand.lg') }}</h2> -->
+          <img
+            src="../../assets/img/logo.png"
+            alt=""
+          >
         </div>
         <div class="login-body">
           <h3 class="login-title">{{ $t('login.title') }}</h3>
-          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
+          <el-form
+            :model="dataForm"
+            :rules="dataRule"
+            ref="dataForm"
+            @keyup.enter.native="dataFormSubmitHandle()"
+            status-icon
+          >
             <el-form-item>
-              <el-select v-model="$i18n.locale" class="w-percent-100">
-                <el-option v-for="(val, key) in i18nMessages" :key="key" :label="val._lang" :value="key"></el-option>
+              <el-select
+                v-model="$i18n.locale"
+                class="w-percent-100"
+              >
+                <el-option
+                  v-for="(val, key) in i18nMessages"
+                  :key="key"
+                  :label="val._lang"
+                  :value="key"
+                ></el-option>
               </el-select>
             </el-form-item>
             <el-form-item prop="username">
-              <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
-                <span slot="prefix" class="el-input__icon">
-                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+              <el-input
+                v-model="dataForm.username"
+                :placeholder="$t('login.username')"
+              >
+                <span
+                  slot="prefix"
+                  class="el-input__icon"
+                >
+                  <svg
+                    class="icon-svg"
+                    aria-hidden="true"
+                  >
+                    <use xlink:href="#icon-user"></use>
+                  </svg>
                 </span>
               </el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
-                <span slot="prefix" class="el-input__icon">
-                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
+              <el-input
+                v-model="dataForm.password"
+                type="password"
+                :placeholder="$t('login.password')"
+              >
+                <span
+                  slot="prefix"
+                  class="el-input__icon"
+                >
+                  <svg
+                    class="icon-svg"
+                    aria-hidden="true"
+                  >
+                    <use xlink:href="#icon-lock"></use>
+                  </svg>
                 </span>
               </el-input>
             </el-form-item>
             <el-form-item prop="captcha">
               <el-row :gutter="20">
                 <el-col :span="14">
-                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
-                    <span slot="prefix" class="el-input__icon">
-                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
+                  <el-input
+                    v-model="dataForm.captcha"
+                    :placeholder="$t('login.captcha')"
+                  >
+                    <span
+                      slot="prefix"
+                      class="el-input__icon"
+                    >
+                      <svg
+                        class="icon-svg"
+                        aria-hidden="true"
+                      >
+                        <use xlink:href="#icon-safetycertificate"></use>
+                      </svg>
                     </span>
                   </el-input>
                 </el-col>
-                <el-col :span="10" class="login-captcha">
-                  <img :src="captchaPath" @click="getCaptcha()">
+                <el-col
+                  :span="10"
+                  class="login-captcha"
+                >
+                  <img
+                    :src="captchaPath"
+                    @click="getCaptcha()"
+                  >
                 </el-col>
               </el-row>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
+              <el-button
+                type="primary"
+                @click="dataFormSubmitHandle()"
+                class="w-percent-100"
+              >{{ $t('login.title') }}</el-button>
             </el-form-item>
           </el-form>
         </div>
         <div class="login-footer">
-          <p>2020 © 浙江汇民网络技术有限公司</p>
+          <p>2021 © 浙江汇民网络技术有限公司</p>
         </div>
       </main>
     </div>
@@ -55,63 +117,82 @@
 </template>
 
 <script>
-import Cookies from 'js-cookie'
-import debounce from 'lodash/debounce'
-import { messages } from '@/i18n'
-import { getUUID } from '@/utils'
+import Cookies from "js-cookie";
+import debounce from "lodash/debounce";
+import { messages } from "@/i18n";
+import { getUUID } from "@/utils";
 export default {
-  data () {
+  data() {
     return {
       i18nMessages: messages,
-      captchaPath: '',
+      captchaPath: "",
       dataForm: {
-        username: '',
-        password: '',
-        uuid: '',
-        captcha: ''
-      }
-    }
+        username: "",
+        password: "",
+        uuid: "",
+        captcha: "",
+      },
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         password: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         captcha: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
   },
-  created () {
-    this.getCaptcha()
+  created() {
+    this.getCaptcha();
   },
   methods: {
     // 获取验证码
-    getCaptcha () {
-      this.dataForm.uuid = getUUID()
-      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
+    getCaptcha() {
+      this.dataForm.uuid = getUUID();
+      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            this.getCaptcha()
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs["dataForm"].validate((valid) => {
+          if (!valid) {
+            return false;
           }
-          Cookies.set('token', res.data.token)
-          this.$router.replace({ name: 'home' })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
-  }
-}
+          this.$http
+            .post("/login", this.dataForm)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.getCaptcha();
+                return this.$message.error(res.msg);
+              }
+              Cookies.set("token", res.data.token);
+              this.$router.replace({ name: "home" });
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

vue.config.js

@@ -2,6 +2,7 @@
  * 配置参考: https://cli.vuejs.org/zh/config/
  */
 module.exports = {
+  lintOnSave: false,
   publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
   chainWebpack: config => {
     const svgRule = config.module.rule('svg')