更新

Your Name

2022-07-27 b78c039181ac316964a0f0de077170de178d90ab

更新

 .env

@@ -5,4 +5,4 @@
VITE_OPEN = false

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /vue-next-admin-preview/
VITE_PUBLIC_PATH = /vue-next-admin-preview/

 .env.development

@@ -2,6 +2,7 @@
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.35:8008'
#VITE_API_URL = 'http://192.168.0.35:8008'
VITE_API_URL = 'http://192.168.0.29:8008'

# VITE_API_URL = 'http://192.168.0.8:8008'
#VITE_API_URL = 'http://192.168.0.69:8008'

 package-lock.json

@@ -17,7 +17,7 @@
                "echarts": "^5.3.3",
                "echarts-gl": "^2.0.9",
                "echarts-wordcloud": "^2.0.0",
                "element-plus": "^2.2.2",
                "element-plus": "^2.2.9",
                "js-cookie": "^3.0.1",
                "json-bigint": "^1.0.0",
                "jsplumb": "^2.15.6",
@@ -83,7 +83,7 @@
        },
        "node_modules/@ctrl/tinycolor": {
            "version": "3.4.1",
            "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
            "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
            "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==",
            "engines": {
                "node": ">=10"
@@ -118,16 +118,16 @@
            }
        },
        "node_modules/@floating-ui/core": {
            "version": "0.7.1",
            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.1.tgz",
            "integrity": "sha512-grcqEmI8DTIolufpxhJagVeJmvloxBXE6xxSrVnSXz/Wz1uUIsC85ad+UNBqAoBOvzLxE42wvDj3YkmSGqWRxA=="
            "version": "0.7.3",
            "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.3.tgz",
            "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
        },
        "node_modules/@floating-ui/dom": {
            "version": "0.5.1",
            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.1.tgz",
            "integrity": "sha512-dkPSy5JPiQEtljc3VpG9lauYctxfLlqj/8N9f+lmsR92gQaSVMAWuBbFBH2keY5DmdQn3p4Dv1dQd+e8osH+/g==",
            "version": "0.5.4",
            "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.4.tgz",
            "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
            "dependencies": {
                "@floating-ui/core": "^0.7.1"
                "@floating-ui/core": "^0.7.3"
            }
        },
        "node_modules/@humanwhocodes/config-array": {
@@ -442,12 +442,8 @@
        "node_modules/@popperjs/core": {
            "name": "@sxzz/popperjs-es",
            "version": "2.11.7",
            "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
            "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
            "funding": {
                "type": "opencollective",
                "url": "https://opencollective.com/popperjs"
            }
            "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
            "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
        },
        "node_modules/@transloadit/prettier-bytes": {
            "version": "0.0.7",
@@ -502,12 +498,12 @@
        },
        "node_modules/@types/lodash": {
            "version": "4.14.182",
            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
            "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.182.tgz",
            "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
        },
        "node_modules/@types/lodash-es": {
            "version": "4.17.6",
            "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
            "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz",
            "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
            "dependencies": {
                "@types/lodash": "*"
@@ -530,6 +526,11 @@
            "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
            "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
            "dev": true
        },
        "node_modules/@types/web-bluetooth": {
            "version": "0.0.14",
            "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
            "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
        },
        "node_modules/@typescript-eslint/eslint-plugin": {
            "version": "5.27.0",
@@ -886,16 +887,14 @@
            "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
        },
        "node_modules/@vueuse/core": {
            "version": "8.5.0",
            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.5.0.tgz",
            "integrity": "sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==",
            "version": "8.9.2",
            "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-8.9.2.tgz",
            "integrity": "sha512-dE3/JgwqIHmmtmRBdZAnq87rZCSFbYVps2t3gWy9Jv/+Qp6sHSSKuPFtwguJVZ2OnaGnB/AMRmx4CuFRxFin3A==",
            "dependencies": {
                "@vueuse/metadata": "8.5.0",
                "@vueuse/shared": "8.5.0",
                "@types/web-bluetooth": "^0.0.14",
                "@vueuse/metadata": "8.9.2",
                "@vueuse/shared": "8.9.2",
                "vue-demi": "*"
            },
            "funding": {
                "url": "https://github.com/sponsors/antfu"
            },
            "peerDependencies": {
                "@vue/composition-api": "^1.1.0",
@@ -911,14 +910,11 @@
            }
        },
        "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
            "version": "8.5.0",
            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.5.0.tgz",
            "integrity": "sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==",
            "version": "8.9.2",
            "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.9.2.tgz",
            "integrity": "sha512-s4Nk82oheL5z1GywyGnqjob0MzbAt88olMZa0vgt/p3gcMsT8Ff7+SqmNgEFC6AAs6xiuhOAZpnew9Zs3d90yQ==",
            "dependencies": {
                "vue-demi": "*"
            },
            "funding": {
                "url": "https://github.com/sponsors/antfu"
            },
            "peerDependencies": {
                "@vue/composition-api": "^1.1.0",
@@ -934,9 +930,9 @@
            }
        },
        "node_modules/@vueuse/core/node_modules/vue-demi": {
            "version": "0.12.5",
            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
            "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
            "version": "0.13.4",
            "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.4.tgz",
            "integrity": "sha512-KP4lq9uSz0KZbaqCllRhnxMV3mYRsRWJfdsAhZyt5bV5O1RTpoeDptBRV9NOa/JgOpfaA9ane88VF7OjWNK/DA==",
            "hasInstallScript": true,
            "bin": {
                "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -944,9 +940,6 @@
            },
            "engines": {
                "node": ">=12"
            },
            "funding": {
                "url": "https://github.com/sponsors/antfu"
            },
            "peerDependencies": {
                "@vue/composition-api": "^1.0.0-rc.1",
@@ -959,12 +952,9 @@
            }
        },
        "node_modules/@vueuse/metadata": {
            "version": "8.5.0",
            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.5.0.tgz",
            "integrity": "sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g==",
            "funding": {
                "url": "https://github.com/sponsors/antfu"
            }
            "version": "8.9.2",
            "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.9.2.tgz",
            "integrity": "sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ=="
        },
        "node_modules/@wangeditor/basic-modules": {
            "version": "1.1.1",
@@ -1392,9 +1382,9 @@
            }
        },
        "node_modules/async-validator": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.1.1.tgz",
            "integrity": "sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA=="
            "version": "4.2.5",
            "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
            "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
        },
        "node_modules/asynckit": {
            "version": "0.4.0",
@@ -1707,9 +1697,9 @@
            }
        },
        "node_modules/dayjs": {
            "version": "1.11.2",
            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
            "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
            "version": "1.11.3",
            "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz",
            "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
        },
        "node_modules/debug": {
            "version": "4.3.4",
@@ -1825,19 +1815,19 @@
            "peer": true
        },
        "node_modules/element-plus": {
            "version": "2.2.2",
            "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.2.tgz",
            "integrity": "sha512-yGcj2Ayb0jZO1WbI51tHJ4efhlfWKlBqqGtWbzhq+tcpfaKzJZN+IHRouuFasqn0ZV3tWCDu1jggDR1+9y7XfQ==",
            "version": "2.2.9",
            "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.9.tgz",
            "integrity": "sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==",
            "dependencies": {
                "@ctrl/tinycolor": "^3.4.1",
                "@element-plus/icons-vue": "^1.1.4",
                "@floating-ui/dom": "^0.5.0",
                "@element-plus/icons-vue": "^2.0.6",
                "@floating-ui/dom": "^0.5.4",
                "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
                "@types/lodash": "^4.14.182",
                "@types/lodash-es": "^4.17.6",
                "@vueuse/core": "^8.5.0",
                "async-validator": "^4.1.1",
                "dayjs": "^1.11.2",
                "@vueuse/core": "^8.7.5",
                "async-validator": "^4.2.5",
                "dayjs": "^1.11.3",
                "escape-html": "^1.0.3",
                "lodash": "^4.17.21",
                "lodash-es": "^4.17.21",
@@ -1845,14 +1835,6 @@
                "memoize-one": "^6.0.0",
                "normalize-wheel-es": "^1.1.2"
            },
            "peerDependencies": {
                "vue": "^3.2.0"
            }
        },
        "node_modules/element-plus/node_modules/@element-plus/icons-vue": {
            "version": "1.1.4",
            "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
            "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
            "peerDependencies": {
                "vue": "^3.2.0"
            }
@@ -2286,8 +2268,8 @@
        },
        "node_modules/escape-html": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
            "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
            "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
        },
        "node_modules/escape-string-regexp": {
            "version": "4.0.0",
@@ -3110,12 +3092,12 @@
        },
        "node_modules/lodash-es": {
            "version": "4.17.21",
            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
            "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
        },
        "node_modules/lodash-unified": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
            "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz",
            "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
            "peerDependencies": {
                "@types/lodash-es": "*",
@@ -3193,7 +3175,7 @@
        },
        "node_modules/memoize-one": {
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
            "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
            "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
        },
        "node_modules/merge-stream": {
@@ -3326,7 +3308,7 @@
        },
        "node_modules/normalize-wheel-es": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
            "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
            "integrity": "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
        },
        "node_modules/nprogress": {
@@ -4549,7 +4531,7 @@
        },
        "@ctrl/tinycolor": {
            "version": "3.4.1",
            "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
            "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
            "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
        },
        "@element-plus/icons-vue": {
@@ -4576,16 +4558,16 @@
            }
        },
        "@floating-ui/core": {
            "version": "0.7.1",
            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.1.tgz",
            "integrity": "sha512-grcqEmI8DTIolufpxhJagVeJmvloxBXE6xxSrVnSXz/Wz1uUIsC85ad+UNBqAoBOvzLxE42wvDj3YkmSGqWRxA=="
            "version": "0.7.3",
            "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.3.tgz",
            "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
        },
        "@floating-ui/dom": {
            "version": "0.5.1",
            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.1.tgz",
            "integrity": "sha512-dkPSy5JPiQEtljc3VpG9lauYctxfLlqj/8N9f+lmsR92gQaSVMAWuBbFBH2keY5DmdQn3p4Dv1dQd+e8osH+/g==",
            "version": "0.5.4",
            "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.4.tgz",
            "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
            "requires": {
                "@floating-ui/core": "^0.7.1"
                "@floating-ui/core": "^0.7.3"
            }
        },
        "@humanwhocodes/config-array": {
@@ -4821,7 +4803,7 @@
        },
        "@popperjs/core": {
            "version": "npm:@sxzz/popperjs-es@2.11.7",
            "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
            "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
            "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
        },
        "@transloadit/prettier-bytes": {
@@ -4877,12 +4859,12 @@
        },
        "@types/lodash": {
            "version": "4.14.182",
            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
            "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.182.tgz",
            "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
        },
        "@types/lodash-es": {
            "version": "4.17.6",
            "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
            "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz",
            "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
            "requires": {
                "@types/lodash": "*"
@@ -4905,6 +4887,11 @@
            "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
            "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
            "dev": true
        },
        "@types/web-bluetooth": {
            "version": "0.0.14",
            "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
            "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
        },
        "@typescript-eslint/eslint-plugin": {
            "version": "5.27.0",
@@ -5160,35 +5147,36 @@
            "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
        },
        "@vueuse/core": {
            "version": "8.5.0",
            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.5.0.tgz",
            "integrity": "sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==",
            "version": "8.9.2",
            "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-8.9.2.tgz",
            "integrity": "sha512-dE3/JgwqIHmmtmRBdZAnq87rZCSFbYVps2t3gWy9Jv/+Qp6sHSSKuPFtwguJVZ2OnaGnB/AMRmx4CuFRxFin3A==",
            "requires": {
                "@vueuse/metadata": "8.5.0",
                "@vueuse/shared": "8.5.0",
                "@types/web-bluetooth": "^0.0.14",
                "@vueuse/metadata": "8.9.2",
                "@vueuse/shared": "8.9.2",
                "vue-demi": "*"
            },
            "dependencies": {
                "@vueuse/shared": {
                    "version": "8.5.0",
                    "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.5.0.tgz",
                    "integrity": "sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==",
                    "version": "8.9.2",
                    "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.9.2.tgz",
                    "integrity": "sha512-s4Nk82oheL5z1GywyGnqjob0MzbAt88olMZa0vgt/p3gcMsT8Ff7+SqmNgEFC6AAs6xiuhOAZpnew9Zs3d90yQ==",
                    "requires": {
                        "vue-demi": "*"
                    }
                },
                "vue-demi": {
                    "version": "0.12.5",
                    "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
                    "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
                    "version": "0.13.4",
                    "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.4.tgz",
                    "integrity": "sha512-KP4lq9uSz0KZbaqCllRhnxMV3mYRsRWJfdsAhZyt5bV5O1RTpoeDptBRV9NOa/JgOpfaA9ane88VF7OjWNK/DA==",
                    "requires": {}
                }
            }
        },
        "@vueuse/metadata": {
            "version": "8.5.0",
            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.5.0.tgz",
            "integrity": "sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g=="
            "version": "8.9.2",
            "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.9.2.tgz",
            "integrity": "sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ=="
        },
        "@wangeditor/basic-modules": {
            "version": "1.1.1",
@@ -5525,9 +5513,9 @@
            "dev": true
        },
        "async-validator": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.1.1.tgz",
            "integrity": "sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA=="
            "version": "4.2.5",
            "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
            "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
        },
        "asynckit": {
            "version": "0.4.0",
@@ -5766,9 +5754,9 @@
            }
        },
        "dayjs": {
            "version": "1.11.2",
            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
            "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
            "version": "1.11.3",
            "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz",
            "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
        },
        "debug": {
            "version": "4.3.4",
@@ -5859,33 +5847,25 @@
            "peer": true
        },
        "element-plus": {
            "version": "2.2.2",
            "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.2.tgz",
            "integrity": "sha512-yGcj2Ayb0jZO1WbI51tHJ4efhlfWKlBqqGtWbzhq+tcpfaKzJZN+IHRouuFasqn0ZV3tWCDu1jggDR1+9y7XfQ==",
            "version": "2.2.9",
            "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.9.tgz",
            "integrity": "sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==",
            "requires": {
                "@ctrl/tinycolor": "^3.4.1",
                "@element-plus/icons-vue": "^1.1.4",
                "@floating-ui/dom": "^0.5.0",
                "@element-plus/icons-vue": "^2.0.6",
                "@floating-ui/dom": "^0.5.4",
                "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
                "@types/lodash": "^4.14.182",
                "@types/lodash-es": "^4.17.6",
                "@vueuse/core": "^8.5.0",
                "async-validator": "^4.1.1",
                "dayjs": "^1.11.2",
                "@vueuse/core": "^8.7.5",
                "async-validator": "^4.2.5",
                "dayjs": "^1.11.3",
                "escape-html": "^1.0.3",
                "lodash": "^4.17.21",
                "lodash-es": "^4.17.21",
                "lodash-unified": "^1.0.2",
                "memoize-one": "^6.0.0",
                "normalize-wheel-es": "^1.1.2"
            },
            "dependencies": {
                "@element-plus/icons-vue": {
                    "version": "1.1.4",
                    "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
                    "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
                    "requires": {}
                }
            }
        },
        "element-resize-detector": {
@@ -6120,8 +6100,8 @@
        },
        "escape-html": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
            "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
            "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
        },
        "escape-string-regexp": {
            "version": "4.0.0",
@@ -6761,12 +6741,12 @@
        },
        "lodash-es": {
            "version": "4.17.21",
            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
            "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
        },
        "lodash-unified": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
            "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz",
            "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
            "requires": {}
        },
@@ -6837,7 +6817,7 @@
        },
        "memoize-one": {
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
            "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
            "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
        },
        "merge-stream": {
@@ -6946,7 +6926,7 @@
        },
        "normalize-wheel-es": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
            "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz",
            "integrity": "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
        },
        "nprogress": {

 package.json

@@ -18,7 +18,7 @@
        "echarts": "^5.3.3",
        "echarts-gl": "^2.0.9",
        "echarts-wordcloud": "^2.0.0",
        "element-plus": "^2.2.2",
        "element-plus": "^2.2.9",
        "js-cookie": "^3.0.1",
        "json-bigint": "^1.0.0",
        "jsplumb": "^2.15.6",

 src/App.vue

@@ -1,10 +1,10 @@
<template>
    <el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
        <router-view v-show="themeConfig.lockScreenTime > 1" />
        <LockScreen v-if="themeConfig.isLockScreen" />
        <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
        <CloseFull v-if="!themeConfig.isLockScreen" />
    </el-config-provider>
    <el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
        <router-view v-show="themeConfig.lockScreenTime > 1" />
        <LockScreen v-if="themeConfig.isLockScreen" />
        <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
        <CloseFull v-if="!themeConfig.isLockScreen" />
    </el-config-provider>
</template>

<script lang="ts">
@@ -21,80 +21,80 @@
import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
import { initBackEndControlRoutes } from './router/backEnd';

export default ({
    name: 'app',
    components: { LockScreen, Setings, CloseFull },
    setup() {
        const { proxy } = <any>getCurrentInstance();
        const setingsRef = ref();
        const route = useRoute();
        const stores = useTagsViewRoutes();
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive({
            i18nLocale: null,
        });
export default {
    name: 'app',
    components: { LockScreen, Setings, CloseFull },
    setup() {
        const { proxy } = <any>getCurrentInstance();
        const setingsRef = ref();
        const route = useRoute();
        const stores = useTagsViewRoutes();
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive({
            i18nLocale: null
        });

        // 获取全局组件大小
        const getGlobalComponentSize = computed(() => {
            return other.globalComponentSize();
        });
        // 布局配置弹窗打开
        const openSetingsDrawer = () => {
            setingsRef.value.openDrawer();
        };
        // 设置初始化，防止刷新时恢复默认
        onBeforeMount(() => {
            // 设置批量第三方 icon 图标
            setIntroduction.cssCdn();
            // 设置批量第三方 js
            setIntroduction.jsCdn();
        });
        // 页面加载时
        onMounted( () => {
            nextTick(() => {
                // 监听布局配置弹窗点击打开
                proxy.mittBus.on('openSetingsDrawer', () => {
                    openSetingsDrawer();
                });
                // 设置 i18n，App.vue 中的 el-config-provider
                proxy.mittBus.on('getI18nConfig', (locale: string) => {
                    (state.i18nLocale as string | null) = locale;
                });
                // 获取缓存中的布局配置
                if (Local.get('themeConfig')) {
                    storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
                    document.documentElement.style.cssText = Local.get('themeConfigStyle');
                }
                // 获取缓存中的全屏配置
                if (Session.get('isTagsViewCurrenFull')) {
                    stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
                }
            });
            // if(!Session.get('token')) return
            // initBackEndControlRoutes()
        });
        // 页面销毁时，关闭监听布局配置/i18n监听
        onUnmounted(() => {
            proxy.mittBus.off('openSetingsDrawer', () => {});
            proxy.mittBus.off('getI18nConfig', () => {});
        });
        // 监听路由的变化，设置网站标题
        watch(
            () => route.path,
            () => {
                other.useTitle();
            },
            {
                deep: true,
            }
        );
        return {
            themeConfig,
            setingsRef,
            getGlobalComponentSize,
            ...toRefs(state),
        };
    },
});
        // 获取全局组件大小
        const getGlobalComponentSize = computed(() => {
            return other.globalComponentSize();
        });
        // 布局配置弹窗打开
        const openSetingsDrawer = () => {
            setingsRef.value.openDrawer();
        };
        // 设置初始化，防止刷新时恢复默认
        onBeforeMount(() => {
            // 设置批量第三方 icon 图标
            setIntroduction.cssCdn();
            // 设置批量第三方 js
            setIntroduction.jsCdn();
        });
        // 页面加载时
        onMounted(() => {
            nextTick(() => {
                // 监听布局配置弹窗点击打开
                proxy.mittBus.on('openSetingsDrawer', () => {
                    openSetingsDrawer();
                });
                // 设置 i18n，App.vue 中的 el-config-provider
                proxy.mittBus.on('getI18nConfig', (locale: string) => {
                    (state.i18nLocale as string | null) = locale;
                });
                // 获取缓存中的布局配置
                if (Local.get('themeConfig')) {
                    storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
                    document.documentElement.style.cssText = Local.get('themeConfigStyle');
                }
                // 获取缓存中的全屏配置
                if (Session.get('isTagsViewCurrenFull')) {
                    stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
                }
            });
            // if(!Session.get('token')) return
            // initBackEndControlRoutes()
        });
        // 页面销毁时，关闭监听布局配置/i18n监听
        onUnmounted(() => {
            proxy.mittBus.off('openSetingsDrawer', () => {});
            proxy.mittBus.off('getI18nConfig', () => {});
        });
        // 监听路由的变化，设置网站标题
        watch(
            () => route.path,
            () => {
                other.useTitle();
            },
            {
                deep: true
            }
        );
        return {
            themeConfig,
            setingsRef,
            getGlobalComponentSize,
            ...toRefs(state)
        };
    }
};
</script>

 src/api/intellectInspectSystem/RFID/index.ts

对比新文件
@@ -0,0 +1,45 @@
import request from '/@/utils/request';

export function RFIDApi() {
    return {
        // v1
        getRFIDList: (data: object) => {
            return request({
                url: `/SafeCheckRfid/select/listRfidByPag`,
                method: 'post',
                data: data
            });
        },
        // v1
        addRFID: (data: object) => {
            return request({
                url: `/SafeCheckRfid/insert/saveRfid`,
                method: 'post',
                data: data
            });
        },
        // v1
        modRFID: (data: object) => {
            return request({
                url: `/SafeCheckRfid/update/updateRfidById`,
                method: 'post',
                data: data
            });
        },
        // v1
        deleteRFID: (data: object) => {
            return request({
                url: `/SafeCheckRfid/delete/deleteRfidById`,
                method: 'post',
                data: data
            });
        },
        // v1
        getAllRFIDList: () => {
            return request({
                url: `/prevent/device/select/listDevices`,
                method: 'post'
            });
        }
    };
}

 src/api/intellectInspectSystem/facilityAreaManage/index.ts

 src/api/intellectInspectSystem/inspectPointManage/index.ts

 src/api/intellectInspectSystem/inspectTargetManage/index.ts

对比新文件
@@ -0,0 +1,45 @@
import request from '/@/utils/request';

export function inspectTargetApi() {
    return {
        // v1
        getInspectTargetList: (data: object) => {
            return request({
                url: `/safeCheckQuota/select/listQuotaByPage`,
                method: 'post',
                data: data
            });
        },
        // v1
        addInspectTarget: (data: object) => {
            return request({
                url: `/safeCheckQuota/insert/saveQuota`,
                method: 'post',
                data: data
            });
        },
        // v1
        modInspectTarget: (data: object) => {
            return request({
                url: `/safeCheckQuota/update/updateQuotaById`,
                method: 'post',
                data: data
            });
        },
        // v1
        deleteInspectTarget: (data: object) => {
            return request({
                url: `/safeCheckQuota/delete/deleteQuotaById`,
                method: 'post',
                data: data
            });
        },
        // v1
        getAllInspectTargetList: () => {
            return request({
                url: `/prevent/device/select/listDevices`,
                method: 'post'
            });
        }
    };
}

 src/assets/style/index.scss

@@ -1,7 +1,11 @@
.input-box{
  width: 200px !important;
  padding-right: 10px;
}
.basic-line{
  display: inline-block;
  padding-left: 10px;
}
.page-position{
  float: right;
}

 src/router/index.ts

@@ -11,6 +11,7 @@
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { nextTick } from 'vue';

// 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
const storesThemeConfig = useThemeConfig(pinia);

 src/router/route.ts

@@ -1,85 +1,82 @@
import { RouteRecordRaw } from 'vue-router';

export const dynamicRoutes: Array<RouteRecordRaw> = [

    {
        path: '/',
        name: '/',
        component: () => import('/@/layout/index.vue'),
        redirect: '/home',
        meta: {
            isKeepAlive: true,
        },
        children: [
            {
                path: '/home',
                name: 'home',
                component: () => import('/@/views/home/index.vue'),
                meta: {
                    title: 'message.router.home',
                    isLink: '',
                    isHide: false,
                    isKeepAlive: true,
                    isAffix: true,
                    isIframe: false,
                    roles: ['admin', 'common'],
                    icon: 'iconfont icon-shouye',
                    button:'121231'
                },
            },
        ],
    },
    {
        path: '/',
        name: '/',
        component: () => import('/@/layout/index.vue'),
        redirect: '/home',
        meta: {
            isKeepAlive: false
        },
        children: [
            {
                path: '/home',
                name: 'home',
                component: () => import('/@/views/home/index.vue'),
                meta: {
                    title: '首页',
                    isLink: '',
                    isHide: false,
                    isKeepAlive: true,
                    isAffix: true,
                    isIframe: false,
                    roles: ['admin', 'common'],
                    icon: 'iconfont icon-shouye'
                }
            }
        ]
    }
];


export const notFoundAndNoPower = [
    {
        path: '/:path(.*)*',
        name: 'notFound',
        component: () => import('/@/views/error/404.vue'),
        meta: {
            title: 'message.staticRoutes.notFound',
            isHide: true,
        },
    },
    {
        path: '/401',
        name: 'noPower',
        component: () => import('/@/views/error/401.vue'),
        meta: {
            title: 'message.staticRoutes.noPower',
            isHide: true,
        },
    },
    {
        path: '/:path(.*)*',
        name: 'notFound',
        component: () => import('/@/views/error/404.vue'),
        meta: {
            title: 'message.staticRoutes.notFound',
            isHide: true
        }
    },
    {
        path: '/401',
        name: 'noPower',
        component: () => import('/@/views/error/401.vue'),
        meta: {
            title: 'message.staticRoutes.noPower',
            isHide: true
        }
    }
];

export const staticRoutes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: '/',
        component: () => import('/@/layout/index.vue'),
        meta: {
            title: '布局界面',
        },
        children: [
            // 请不要往这里 `children` 中添加内容，此内容为了防止 No match found for location with path "xxx" 问题
            ...notFoundAndNoPower,
        ],
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('/@/views/loginPage/loginPage.vue'),
        meta: {
            title: '登录',
        },
    },
    {
        path: '/homeMenu',
        name: 'homeMenu',
        component: () => import('/@/views/homeMenu/homeMenu.vue'),
        meta: {
            title: '登录',
        },
    },
    {
        path: '/',
        name: '/',
        component: () => import('/@/layout/index.vue'),
        meta: {
            title: '布局界面'
        },
        children: [
            // 请不要往这里 `children` 中添加内容，此内容为了防止 No match found for location with path "xxx" 问题
            ...notFoundAndNoPower
        ]
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('/@/views/loginPage/loginPage.vue'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/homeMenu',
        name: 'homeMenu',
        component: () => import('/@/views/homeMenu/homeMenu.vue'),
        meta: {
            title: '登录'
        }
    }
];

 src/stores/interface/index.ts

@@ -5,97 +5,97 @@

// 用户信息
export interface UserInfosState {
    authBtnList: string[];
    photo: string;
    roles: string[];
    time: number;
    userName: string;
    uid:string;
    projectId:string;
    authBtnList: string[];
    photo: string;
    roles: string[];
    time: number;
    userName: string;
    uid: string;
    projectId: string;
}
export interface UserInfosStates {
    userInfos: UserInfosState;
    userInfos: UserInfosState;
}

// 路由缓存列表
export interface KeepAliveNamesState {
    keepAliveNames: string[];
    cachedViews: string[];
    keepAliveNames: string[];
    cachedViews: string[];
}

// 后端返回原始路由(未处理时)
export interface RequestOldRoutesState {
    requestOldRoutes: string[];
    requestOldRoutes: string[];
}

// TagsView 路由列表
export interface TagsViewRoutesState {
    tagsViewRoutes: string[];
    isTagsViewCurrenFull: Boolean;
    tagsViewRoutes: string[];
    isTagsViewCurrenFull: Boolean;
}

// 路由列表
export interface RoutesListState {
    routesList: string[];
    isColumnsMenuHover: Boolean;
    isColumnsNavHover: Boolean;
    projectId:string,
    routesList: string[];
    isColumnsMenuHover: Boolean;
    isColumnsNavHover: Boolean;
    projectId: string;
}

export interface loginInfoState {
    loginUser:{
        projectId:string,
        token:string,
        uid:string,
    }
    loginUser: {
        projectId: string;
        token: string;
        uid: string;
    };
}

// 布局配置
export interface ThemeConfigState {
    isDrawer: boolean;
    primary: string;
    topBar: string;
    topBarColor: string;
    isTopBarColorGradual: boolean;
    menuBar: string;
    menuBarColor: string;
    isMenuBarColorGradual: boolean;
    columnsMenuBar: string;
    columnsMenuBarColor: string;
    isColumnsMenuBarColorGradual: boolean;
    isCollapse: boolean;
    isUniqueOpened: boolean;
    isFixedHeader: boolean;
    isFixedHeaderChange: boolean;
    isClassicSplitMenu: boolean;
    isLockScreen: boolean;
    lockScreenTime: number;
    isShowLogo: boolean;
    isShowLogoChange: boolean;
    isBreadcrumb: boolean;
    isTagsview: boolean;
    isBreadcrumbIcon: boolean;
    isTagsviewIcon: boolean;
    isCacheTagsView: boolean;
    isSortableTagsView: boolean;
    isShareTagsView: boolean;
    isFooter: boolean;
    isGrayscale: boolean;
    isInvert: boolean;
    isIsDark: boolean;
    isWartermark: boolean;
    wartermarkText: string;
    tagsStyle: string;
    animation: string;
    columnsAsideStyle: string;
    columnsAsideLayout: string;
    layout: string;
    isRequestRoutes: boolean;
    globalTitle: string;
    globalViceTitle: string;
    globalI18n: string;
    globalComponentSize: string;
    isDrawer: boolean;
    primary: string;
    topBar: string;
    topBarColor: string;
    isTopBarColorGradual: boolean;
    menuBar: string;
    menuBarColor: string;
    isMenuBarColorGradual: boolean;
    columnsMenuBar: string;
    columnsMenuBarColor: string;
    isColumnsMenuBarColorGradual: boolean;
    isCollapse: boolean;
    isUniqueOpened: boolean;
    isFixedHeader: boolean;
    isFixedHeaderChange: boolean;
    isClassicSplitMenu: boolean;
    isLockScreen: boolean;
    lockScreenTime: number;
    isShowLogo: boolean;
    isShowLogoChange: boolean;
    isBreadcrumb: boolean;
    isTagsview: boolean;
    isBreadcrumbIcon: boolean;
    isTagsviewIcon: boolean;
    isCacheTagsView: boolean;
    isSortableTagsView: boolean;
    isShareTagsView: boolean;
    isFooter: boolean;
    isGrayscale: boolean;
    isInvert: boolean;
    isIsDark: boolean;
    isWartermark: boolean;
    wartermarkText: string;
    tagsStyle: string;
    animation: string;
    columnsAsideStyle: string;
    columnsAsideLayout: string;
    layout: string;
    isRequestRoutes: boolean;
    globalTitle: string;
    globalViceTitle: string;
    globalI18n: string;
    globalComponentSize: string;
}
export interface ThemeConfigStates {
    themeConfig: ThemeConfigState;
    themeConfig: ThemeConfigState;
}

 src/views/doublePrevent/hiddenInvestigate/hiddenCheck/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/hiddenInvestigate/hiddenReport/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>11223</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/hiddenInvestigate/hideenRectify/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/hiddenInvestigate/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/inspect/inspectTask/components/inspectionTaskDialog.vue

对比新文件
@@ -0,0 +1,275 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowInspectionTaskDialog" append-to-body :close-on-click-modal="false" width="50%">
            <el-divider></el-divider>
            <div class="inspectionTask-form">
                <el-form
                    :model="inspectionTaskForm"
                    :rules="inspectionTaskFormRules"
                    ref="productionDeviceFormRef"
                    size="default"
                    label-width="120px"
                >
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="任务名称" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入任务名称"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="任务类型" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入任务类型"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="检查频次" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入检查频次"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="周期开始时间" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入周期开始时间"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="有效时间" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入有效时间"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="提前通知时间" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入提前通知时间"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="巡检部门" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入巡检部门"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                            <el-form-item label="巡检班组" prop="produceDeviceName">
                                <el-input
                                    class="input-length"
                                    v-model.trim="inspectionTaskForm.produceDeviceName"
                                    placeholder="请输入巡检班组"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="inspectionTask-point">
                <el-tabs class="active" v-model="activeName">
                    <el-tab-pane label="检查项信息" name="inspectionPoint">
                        <div class="filter-container">
                            <el-button size="default" type="success" @click="onOpenDialogRef('新增', '')">
                                <el-icon>
                                    <ele-FolderAdd />
                                </el-icon>
                                新增排查任务
                            </el-button>
                        </div>

                        <el-table :data="inspectionPointData" border fit highlight-current-row style="width: 100%">
                            <el-table-column type="index" label="序号" width="60" />
                            <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template #default="scope">
                                    <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                                    <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowInspectionTaskDialog = !isShowInspectionTaskDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isShowInspectionTaskDialog: Boolean;
    inspectionTaskForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    activeName: string;
    departmentList: [];
    inspectionPointData: [];
    levelList: Array<levelListState>;
    inspectionTaskFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'inspectionTaskDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            activeName: 'inspectionPoint',
            inspectionPointData: [],
            departmentList: [],
            isShowInspectionTaskDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            inspectionTaskForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            inspectionTaskFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowInspectionTaskDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.inspectionTaskForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.inspectionTaskForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.inspectionTaskForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowInspectionTaskDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowInspectionTaskDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
::v-deep.el-divider--horizontal {
    margin-top: 0px !important;
}

::v-deep.el-dialog__body {
    padding-top: 10px !important;
}
.filter-container {
    padding: 10px 0px;
}
</style>

 src/views/doublePrevent/inspect/inspectTask/index.vue

对比新文件
@@ -0,0 +1,231 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>风险等级：</span>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级">
                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                        placeholder="请选择部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="productionDeviceData.params.depId"
                    >
                    </el-cascader>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增排查任务
                </el-button>
            </div>
            <el-table :data="productionDeviceData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
                class="page-position"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <inspectionTaskDialog ref="inspectionTaskDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import inspectionTaskDialog from './components/inspectionTaskDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    productionDeviceData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskLevel: number | null;
            status: number;
            depId: number | null;
            location: string | null;
            produceDeviceName: string | null;
        };
    };
    departmentList: Array<DepartmentState>;
    levelList: Array<levelListState>;
}
interface levelListState {}
interface DepartmentState {}

export default defineComponent({
    name: 'productionDevice',
    components: { inspectionTaskDialog },
    setup() {
        const inspectionTaskDialogRef = ref();
        const state = reactive<TableDataState>({
            productionDeviceData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskLevel: null,
                    status: 1,
                    depId: null,
                    location: null,
                    produceDeviceName: null
                }
            },
            departmentList: [],
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ]
        });
        // 初始化表格数据
        const initProductionDeviceTableData = async () => {
            let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params);
            if (res.data.code === '200') {
                state.productionDeviceData.data = res.data.data;
                state.productionDeviceData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            inspectionTaskDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initProductionDeviceTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.productionDeviceData.params.pageSize = val;
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.productionDeviceData.params.pageIndex = val;
            initProductionDeviceTableData();
        };
        // 页面加载时
        onMounted(() => {
            initProductionDeviceTableData();
            getDepartmentData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            inspectionTaskDialog,
            inspectionTaskDialogRef,
            initProductionDeviceTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/doublePrevent/inspect/inspectUnit/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>222</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/riskLevel/action/components/riskControlMeasureDialog.vue

对比新文件
@@ -0,0 +1,263 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isRiskControlMeasureDialog" width="600px">
            <el-form
                :model="riskControlMeasureForm"
                :rules="riskControlMeasureFormRules"
                ref="riskControlMeasureFormRef"
                size="default"
                label-width="160px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险事件名称" prop="riskEventId">
                            <el-select class="input-length" v-model="riskControlMeasureForm.riskEventId" placeholder="请选择风险事件" clearable>
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskEventName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险措施编码" prop="controlMeasureCode">
                            <el-input
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.controlMeasureCode"
                                placeholder="请输入风险措施编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控方式" prop="controlType">
                            <el-select class="input-length" v-model="riskControlMeasureForm.controlType" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控内容" prop="checkContent">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.checkContent"
                                placeholder="请输入管控内容"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类1" prop="classify1">
                            <el-select
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.classify1"
                                @change="changeClassifyTwoList"
                                placeholder="请选择管控方式"
                                clearable
                            >
                                <el-option v-for="item in classifyOneList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类2" prop="classify2">
                            <el-select class="input-length" v-model="riskControlMeasureForm.classify2" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in classifyTwoList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类3" prop="classify3">
                            <el-input class="input-length" v-model.trim="riskControlMeasureForm.classify3" placeholder="请选择管控方式" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="措施说明" prop="measureDesc">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.measureDesc"
                                placeholder="请输入措施说明"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isRiskControlMeasureDialog = !isRiskControlMeasureDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRiskControlMeasureDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isRiskControlMeasureDialog: Boolean;
    riskControlMeasureForm: {
        riskEventId: number | null;
        controlMeasureCode: string | null;
        controlType: number | null;
        checkContent: string | null;
        classify1: number | null;
        classify2: number | null;
        classify3: string | null;
        measureDesc: string | null;
    };
    title: string;
    controlTypeList: Array<controlTypeListType>;
    classifyOneList: [];
    classifyTwoList: Array<classifyTwoType>;
    classifyTwoListAll: [];
    allSafetyRiskEventData: [];
    riskControlMeasureFormRules: {};
}
interface classifyTwoType {
    id: number;
    riskMeasureName: string;
}
interface controlTypeListType {}

import { reactive, toRefs, ref } from 'vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure';
import { ElMessage } from 'element-plus';
export default {
    name: 'riskControlMeasureDialog',
    setup(props: any, context: any) {
        const riskControlMeasureFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            classifyTwoListAll: [],
            allSafetyRiskEventData: [],
            isRiskControlMeasureDialog: false,
            riskControlMeasureForm: {
                riskEventId: null,
                controlMeasureCode: null,
                controlType: null,
                checkContent: null,
                classify1: null,
                classify2: null,
                classify3: null,
                measureDesc: null
            },
            riskControlMeasureFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, allSafetyRiskEventData: [], classifyOneList: [], classifyTwoList: []) => {
            state.isRiskControlMeasureDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.classifyOneList = JSON.parse(JSON.stringify(classifyOneList));
            state.classifyTwoListAll = JSON.parse(JSON.stringify(classifyTwoList));
            state.classifyTwoList = [];
            setTimeout(() => {
                riskControlMeasureFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险管控措施';
                state.riskControlMeasureForm = {
                    riskEventId: null,
                    controlMeasureCode: null,
                    controlType: null,
                    checkContent: null,
                    classify1: null,
                    classify2: null,
                    classify3: null,
                    measureDesc: null
                };
            } else {
                state.title = '修改风险管控措施';
                state.riskControlMeasureForm = JSON.parse(JSON.stringify(value));
            }
        };

        const changeClassifyTwoList = () => {
            state.riskControlMeasureForm.classify2 = null;
            state.classifyTwoList = [];
            state.classifyTwoList = state.classifyTwoListAll.filter((item: any) => item.parentId === state.riskControlMeasureForm.classify1);
        };

        //新增修改提交
        const submitRiskControlMeasureDialog = async () => {
            riskControlMeasureFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险管控措施') {
                        let res = await riskControlMeasureApi().addRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施新增成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await riskControlMeasureApi().modRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施修改成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            riskControlMeasureFormRef,
            changeClassifyTwoList,
            submitRiskControlMeasureDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePrevent/riskLevel/action/index.vue

对比新文件
@@ -0,0 +1,307 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>管控方式：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.controlType" placeholder="管控方式" clearable>
                        <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>安全风险事件：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.riskEventId" placeholder="安全风险事件" clearable>
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskEventName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增措施
                </el-button>
            </div>
            <el-table :data="riskControlMeasureData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="riskEventName" label="安全风险事件名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlMeasureCode" label="风控措施编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlType" label="管控方式" show-overflow-tooltip></el-table-column>
                <el-table-column prop="checkContent" label="管控内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify1" label="管控措施分类1" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify2" label="管控措施分类2" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify3" label="管控措施分类3" show-overflow-tooltip></el-table-column>
                <el-table-column prop="measureDesc" label="措施说明" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dateFormat('YYYY-mm-dd HH:MM:SS', '2022-07-07T08:00:00') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelRiskControlMeasure(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="riskControlMeasureData.params.pageIndex"
                background
                v-model:page-size="riskControlMeasureData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="riskControlMeasureData.total"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <riskControlMeasureDialog ref="riskControlMeasureDialogRef" @refreshRiskControlMeasure="initRiskControlMeasureData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import riskControlMeasureDialog from './components/riskControlMeasureDialog.vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    riskControlMeasureData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            controlType: number | null;
            riskEventId: number | null;
        };
    };
    controlTypeList: Array<controlTypeType>;
    classifyOneList: Array<classifyOneType>;
    classifyTwoList: Array<classifyTwoType>;
    allSafetyRiskEventData: Array<SafetyRiskEventDataState>;
}
interface controlTypeType {}
interface classifyOneType {}
interface classifyTwoType {}
interface SafetyRiskEventDataState {}

// interface controlTypeListType {
//     id: number;
//     riskMeasureName: string;
// }
//
// class myType implements controlTypeListType {
//     id: number;
//     riskMeasureName: string;
//     constructor(id: number, riskMeasureName: string) {
//         this.id = id;
//         this.riskMeasureName = riskMeasureName;
//     }
//     bark() {
//         console.log('1111');
//     }
// }
//
// class type extends myType {
//     bark() {
//         console.log('222');
//     }
// }
// class typeTwo extends myType {
//     bark() {
//         super.bark();
//     }
// }
//
// var test = new type(123, '23123');
// var test2 = new typeTwo(222, '333');

export default {
    name: 'riskControlMeasure',
    components: { riskControlMeasureDialog },
    setup() {
        const riskControlMeasureDialogRef = ref();
        const state = reactive<TableDataState>({
            riskControlMeasureData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    controlType: null,
                    riskEventId: null
                }
            },
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            allSafetyRiskEventData: []
        });

        // 初始化表格数据
        const initRiskControlMeasureData = async () => {
            // console.log(test.bark());
            // console.log(test2.bark());
            let res = await riskControlMeasureApi().getRiskControlMeasureList(state.riskControlMeasureData.params);
            if (res.data.code === '200') {
                state.riskControlMeasureData.data = res.data.data;
                state.riskControlMeasureData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const dateFormat = (fmt: any, date: any) => {
            date = new Date(date);
            fmt =
                date.getFullYear() +
                '-' +
                (date.getMonth() + 1) +
                '-' +
                date.getDate() +
                ' ' +
                date.getHours().toString() +
                ':' +
                (date.getMinutes().toString() === '0' ? '00' : date.getMinutes().toString()) +
                ':' +
                (date.getSeconds().toString() === '0' ? '00' : date.getMinutes().toString());
            return fmt;
        };

        //获取安全风险事件
        const getAllSafetyRiskEvent = async () => {
            let res = await safetyRiskEventApi().getAllSafetyRiskEventList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取管控措施分类
        const getClassify = async () => {
            let res = await riskControlMeasureApi().getClassifyData();
            if (res.data.code === '200') {
                state.classifyOneList = res.data.data.filter((item: any) => item.parentId === null);
                state.classifyTwoList = res.data.data.filter((item: any) => item.parentId !== null);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            riskControlMeasureDialogRef.value.openSafetyRiskEventDialog(
                type,
                value,
                state.allSafetyRiskEventData,
                state.classifyOneList,
                state.classifyTwoList
            );
        };

        // 删除角色
        const onDelRiskControlMeasure = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条风险管控措施：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await riskControlMeasureApi().deleteRiskControlMeasure({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initRiskControlMeasureData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.riskControlMeasureData.params.pageSize = val;
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.riskControlMeasureData.params.pageIndex = val;
            initRiskControlMeasureData();
        };

        // 页面加载时
        onMounted(() => {
            initRiskControlMeasureData();
            getAllSafetyRiskEvent();
            getClassify();
        });

        return {
            dateFormat,
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelRiskControlMeasure,
            onHandleCurrentChange,
            riskControlMeasureDialog,
            riskControlMeasureDialogRef,
            initRiskControlMeasureData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePrevent/riskLevel/device/components/productionDeviceDialog.vue

对比新文件
@@ -0,0 +1,200 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px">
            <el-form
                :model="productionDeviceForm"
                :rules="productionDeviceFormRules"
                ref="productionDeviceFormRef"
                size="default"
                label-width="120px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceName">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.produceDeviceName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="depId">
                            <el-cascader
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="productionDeviceForm.depId"
                            >
                            </el-cascader>
                            <!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>-->
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险等级" prop="riskLevel">
                            <el-select
                                class="input-length"
                                v-model="productionDeviceForm.riskLevel"
                                placeholder="请选择风险等级"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="区域位置" prop="location">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isShowProductionDeviceDialog: Boolean;
    productionDeviceForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    departmentList: [];
    levelList: Array<levelListState>;
    productionDeviceFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            isShowProductionDeviceDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            productionDeviceForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            productionDeviceFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowProductionDeviceDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.productionDeviceForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.productionDeviceForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePrevent/riskLevel/device/index.vue

对比新文件
@@ -0,0 +1,231 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>风险等级：</span>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级">
                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                        placeholder="请选择部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="productionDeviceData.params.depId"
                    >
                    </el-cascader>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增装置
                </el-button>
            </div>
            <el-table :data="productionDeviceData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
                class="page-position"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import productionDeviceDialog from './components/productionDeviceDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    productionDeviceData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskLevel: number | null;
            status: number;
            depId: number | null;
            location: string | null;
            produceDeviceName: string | null;
        };
    };
    departmentList: Array<DepartmentState>;
    levelList: Array<levelListState>;
}
interface levelListState {}
interface DepartmentState {}

export default defineComponent({
    name: 'productionDevice',
    components: { productionDeviceDialog },
    setup() {
        const productionDeviceDialogRef = ref();
        const state = reactive<TableDataState>({
            productionDeviceData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskLevel: null,
                    status: 1,
                    depId: null,
                    location: null,
                    produceDeviceName: null
                }
            },
            departmentList: [],
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ]
        });
        // 初始化表格数据
        const initProductionDeviceTableData = async () => {
            let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params);
            if (res.data.code === '200') {
                state.productionDeviceData.data = res.data.data;
                state.productionDeviceData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initProductionDeviceTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.productionDeviceData.params.pageSize = val;
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.productionDeviceData.params.pageIndex = val;
            initProductionDeviceTableData();
        };
        // 页面加载时
        onMounted(() => {
            initProductionDeviceTableData();
            getDepartmentData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            productionDeviceDialog,
            productionDeviceDialogRef,
            initProductionDeviceTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/doublePrevent/riskLevel/event/components/safetyRiskEventDialog.vue

对比新文件
@@ -0,0 +1,160 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskEventDialog" width="600px">
            <el-form
                :model="safetyRiskEventForm"
                :rules="safetyRiskEventFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitId">
                            <el-select class="input-length" v-model="safetyRiskEventForm.riskUnitId" placeholder="请输入安全风险分析单元名称">
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskUnitName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险事件名称" prop="riskEventName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskEventForm.riskEventName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskEventDialog = !isSafetyRiskEventDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskEventDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskEventDialog: Boolean;
    safetyRiskEventForm: {
        riskEventName: string | null;
        riskUnitId: number | null;
    };
    title: string;
    departmentList: [];
    allSafetyRiskEventData: [];
    safetyRiskEventFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            allSafetyRiskEventData: [],
            isSafetyRiskEventDialog: false,
            safetyRiskEventForm: {
                riskEventName: null,
                riskUnitId: null
            },
            safetyRiskEventFormRules: {
                riskEventName: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitId: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, department: [], allSafetyRiskEventData: []) => {
            state.isSafetyRiskEventDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险事件';
                state.safetyRiskEventForm = {
                    riskEventName: null,
                    riskUnitId: null
                };
            } else {
                state.title = '修改风险事件';
                state.safetyRiskEventForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskEventDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险事件') {
                        let res = await safetyRiskEventApi().addSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskEventApi().modSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskEventDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePrevent/riskLevel/event/index.vue

对比新文件
@@ -0,0 +1,207 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>安全风险单元名称：</span>
                    <el-select v-model="safetyRiskEventData.params.riskUnitId" class="input-box" placeholder="安全风险单元名称">
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskUnitName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>安全风险事件名称：</span>
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="input-box" placeholder="安全风险事件名称"> </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon><ele-Search /> </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增事件
                </el-button>
            </div>
            <el-table :data="safetyRiskEventData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskEventName" label="安全风险事件名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelSafetyRiskEvent(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskEventData.params.pageIndex"
                background
                v-model:page-size="safetyRiskEventData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskEventData.total"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <safetyRiskEventDialog ref="safetyRiskEventDialogRef" @refreshSafetyRiskEvent="initSafetyRiskEventData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { departmentApi } from '/@/api/department';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskEventData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskEventName: string | null;
        };
    };
    allSafetyRiskEventData: Array<safetyRiskEventState>;
}
interface safetyRiskEventState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskEventDialog },
    setup() {
        const safetyRiskEventDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskEventData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskEventName: null
                }
            },
            allSafetyRiskEventData: []
        });
        // 初始化表格数据
        const initSafetyRiskEventData = async () => {
            let res = await safetyRiskEventApi().getSafetyRiskEventList(state.safetyRiskEventData.params);
            if (res.data.code === '200') {
                state.safetyRiskEventData.data = res.data.data;
                state.safetyRiskEventData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 获取安全风险分析单元数据
        const getAllSafetyRiskEventData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getAllSafetyRiskAnalyseUnitList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开安全风险事件
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskEventDialogRef.value.openSafetyRiskEventDialog(type, value, state.allSafetyRiskEventData);
        };

        // 删除角色
        const onDelSafetyRiskEvent = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险事件：“${row.riskEventName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskEventApi().deleteSafetyRiskEvent({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskEventData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskEventData.params.pageSize = val;
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskEventData.params.pageIndex = val;
            initSafetyRiskEventData();
        };

        // 页面加载时
        onMounted(() => {
            getAllSafetyRiskEventData();
            initSafetyRiskEventData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelSafetyRiskEvent,
            onHandleCurrentChange,
            safetyRiskEventDialog,
            safetyRiskEventDialogRef,
            initSafetyRiskEventData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePrevent/riskLevel/map/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>11223</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePrevent/riskLevel/unit/components/safetyRiskAnalyseUnitDialog.vue

对比新文件
@@ -0,0 +1,237 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskAnalyseUnitDialog" width="600px">
            <el-form
                :model="safetyRiskAnalyseUnitForm"
                :rules="safetyRiskAnalyseUnitFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskCode"
                                placeholder="请输入安全风险分析对象编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskUnitName"
                                placeholder="请输入安全风险分析单元名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.produceDeviceId"
                                placeholder="请输入生产装置名称"
                                clearable
                            >
                                <el-option
                                    v-for="item in allProduceDeviceData"
                                    :key="item.id"
                                    :label="item.produceDeviceName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任部门" prop="liableDepId">
                            <el-cascader
                                @change="achieveUserList"
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="safetyRiskAnalyseUnitForm.liableDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任人" prop="liablePersonId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.liablePersonId"
                                placeholder="请选择责任人"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskAnalyseUnitDialog = !isSafetyRiskAnalyseUnitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskAnalyseUnitDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskAnalyseUnitDialog: Boolean;
    safetyRiskAnalyseUnitForm: {
        riskCode: string | null;
        riskUnitName: string | null;
        liablePersonId: number | null;
        liableDepId: number | null;
        produceDeviceId: number | null;
    };
    title: string;
    userList: [];
    departmentList: [];
    allProduceDeviceData: [];
    safetyRiskAnalyseUnitFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            userList: [],
            departmentList: [],
            allProduceDeviceData: [],
            isSafetyRiskAnalyseUnitDialog: false,
            safetyRiskAnalyseUnitForm: {
                riskCode: null,
                riskUnitName: null,
                liablePersonId: null,
                liableDepId: null,
                produceDeviceId: null
            },
            safetyRiskAnalyseUnitFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskAnalyseUnitDialog = (type: string, value: object, department: [], allProduceDeviceData: []) => {
            // console.log(jsonBig.stringify(123124124124214123131))
            state.isSafetyRiskAnalyseUnitDialog = true;
            state.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险分析单元';
                state.safetyRiskAnalyseUnitForm = {
                    riskCode: null,
                    riskUnitName: null,
                    liablePersonId: null,
                    liableDepId: null,
                    produceDeviceId: null
                };
            } else {
                state.title = '修改风险分析单元';
                state.safetyRiskAnalyseUnitForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskAnalyseUnitDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险分析单元') {
                        let res = await safetyRiskAnalyseUnitApi().addSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskAnalyseUnitApi().modSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitForm.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitForm.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        return {
            ...toRefs(state),
            achieveUserList,
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskAnalyseUnitDialog,
            openSafetyRiskAnalyseUnitDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePrevent/riskLevel/unit/index.vue

对比新文件
@@ -0,0 +1,272 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>责任部门：</span>
                    <el-cascader
                        @change="achieveUserList"
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                        placeholder="责任部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="safetyRiskAnalyseUnitData.params.liableDepId"
                    >
                    </el-cascader>
                </div>
                <div class="basic-line">
                    <span>责任人：</span>
                    <el-select v-model="safetyRiskAnalyseUnitData.params.liablePersonId" clearable filterable class="input-box" placeholder="责任人">
                        <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>单元名称：</span>
                    <el-input v-model="safetyRiskAnalyseUnitData.params.riskUnitName" clearable filterable class="input-box" placeholder="单元名称">
                    </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增单元
                </el-button>
            </div>
            <el-table :data="safetyRiskAnalyseUnitData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskCode" label="安全风险分析对象编码" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liableDep" label="责任部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liablePerson" label="责任人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskAnalyseUnitData.params.pageIndex"
                background
                v-model:page-size="safetyRiskAnalyseUnitData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskAnalyseUnitData.total"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <safetyRiskAnalyseUnitDialog ref="safetyRiskAnalyseUnitDialogRef" @refreshSafetyRiskAnalyseUnit="initSafetyRiskAnalyseUnitData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts';
import { departmentApi } from '/@/api/department';
import { userApi } from '/@/api/user';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskAnalyseUnitData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskUnitName: string | null;
            liableDepId: number | null;
            liablePersonId: number | null;
        };
    };
    userList: Array<UserState>;
    departmentList: Array<DepartmentState>;
    allProduceDeviceData: Array<produceDeviceState>;
}
interface produceDeviceState {}
interface DepartmentState {}
interface UserState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskAnalyseUnitDialog },
    setup() {
        const safetyRiskAnalyseUnitDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskAnalyseUnitData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskUnitName: null,
                    liableDepId: null,
                    liablePersonId: null
                }
            },
            userList: [],
            departmentList: [],
            allProduceDeviceData: []
        });
        // 初始化表格数据
        const initSafetyRiskAnalyseUnitData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getSafetyRiskAnalyseUnitList(state.safetyRiskAnalyseUnitData.params);
            if (res.data.code === '200') {
                state.safetyRiskAnalyseUnitData.data = res.data.data;
                state.safetyRiskAnalyseUnitData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitData.params.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取生产装置列表
        const getAllProduceDeviceData = async () => {
            let res = await productionDeviceApi().getAllProductionDeviceList();
            if (res.data.code === '200') {
                state.allProduceDeviceData = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取部门列表
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitData.params.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskAnalyseUnitDialogRef.value.openSafetyRiskAnalyseUnitDialog(type, value, state.departmentList, state.allProduceDeviceData);
        };

        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险分析单元：“${row.riskUnitName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskAnalyseUnitApi().deleteSafetyRiskAnalyseUnit({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskAnalyseUnitData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageSize = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageIndex = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 页面加载时
        onMounted(() => {
            initSafetyRiskAnalyseUnitData();
            getAllProduceDeviceData();
            getDepartmentData();
        });

        return {
            handleSearch,
            achieveUserList,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            safetyRiskAnalyseUnitDialog,
            safetyRiskAnalyseUnitDialogRef,
            initSafetyRiskAnalyseUnitData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/inspectManage/inspectionTask/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>111</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/inspectManage/inspectionUnit/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>222</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/riskLevel/action/components/riskControlMeasureDialog.vue

对比新文件
@@ -0,0 +1,263 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isRiskControlMeasureDialog" width="600px">
            <el-form
                :model="riskControlMeasureForm"
                :rules="riskControlMeasureFormRules"
                ref="riskControlMeasureFormRef"
                size="default"
                label-width="160px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险事件名称" prop="riskEventId">
                            <el-select class="input-length" v-model="riskControlMeasureForm.riskEventId" placeholder="请选择风险事件" clearable>
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskEventName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险措施编码" prop="controlMeasureCode">
                            <el-input
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.controlMeasureCode"
                                placeholder="请输入风险措施编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控方式" prop="controlType">
                            <el-select class="input-length" v-model="riskControlMeasureForm.controlType" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控内容" prop="checkContent">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.checkContent"
                                placeholder="请输入管控内容"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类1" prop="classify1">
                            <el-select
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.classify1"
                                @change="changeClassifyTwoList"
                                placeholder="请选择管控方式"
                                clearable
                            >
                                <el-option v-for="item in classifyOneList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类2" prop="classify2">
                            <el-select class="input-length" v-model="riskControlMeasureForm.classify2" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in classifyTwoList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类3" prop="classify3">
                            <el-input class="input-length" v-model.trim="riskControlMeasureForm.classify3" placeholder="请选择管控方式" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="措施说明" prop="measureDesc">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.measureDesc"
                                placeholder="请输入措施说明"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isRiskControlMeasureDialog = !isRiskControlMeasureDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRiskControlMeasureDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isRiskControlMeasureDialog: Boolean;
    riskControlMeasureForm: {
        riskEventId: number | null;
        controlMeasureCode: string | null;
        controlType: number | null;
        checkContent: string | null;
        classify1: number | null;
        classify2: number | null;
        classify3: string | null;
        measureDesc: string | null;
    };
    title: string;
    controlTypeList: Array<controlTypeListType>;
    classifyOneList: [];
    classifyTwoList: Array<classifyTwoType>;
    classifyTwoListAll: [];
    allSafetyRiskEventData: [];
    riskControlMeasureFormRules: {};
}
interface classifyTwoType {
    id: number;
    riskMeasureName: string;
}
interface controlTypeListType {}

import { reactive, toRefs, ref } from 'vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure';
import { ElMessage } from 'element-plus';
export default {
    name: 'riskControlMeasureDialog',
    setup(props: any, context: any) {
        const riskControlMeasureFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            classifyTwoListAll: [],
            allSafetyRiskEventData: [],
            isRiskControlMeasureDialog: false,
            riskControlMeasureForm: {
                riskEventId: null,
                controlMeasureCode: null,
                controlType: null,
                checkContent: null,
                classify1: null,
                classify2: null,
                classify3: null,
                measureDesc: null
            },
            riskControlMeasureFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, allSafetyRiskEventData: [], classifyOneList: [], classifyTwoList: []) => {
            state.isRiskControlMeasureDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.classifyOneList = JSON.parse(JSON.stringify(classifyOneList));
            state.classifyTwoListAll = JSON.parse(JSON.stringify(classifyTwoList));
            state.classifyTwoList = [];
            setTimeout(() => {
                riskControlMeasureFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险管控措施';
                state.riskControlMeasureForm = {
                    riskEventId: null,
                    controlMeasureCode: null,
                    controlType: null,
                    checkContent: null,
                    classify1: null,
                    classify2: null,
                    classify3: null,
                    measureDesc: null
                };
            } else {
                state.title = '修改风险管控措施';
                state.riskControlMeasureForm = JSON.parse(JSON.stringify(value));
            }
        };

        const changeClassifyTwoList = () => {
            state.riskControlMeasureForm.classify2 = null;
            state.classifyTwoList = [];
            state.classifyTwoList = state.classifyTwoListAll.filter((item: any) => item.parentId === state.riskControlMeasureForm.classify1);
        };

        //新增修改提交
        const submitRiskControlMeasureDialog = async () => {
            riskControlMeasureFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险管控措施') {
                        let res = await riskControlMeasureApi().addRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施新增成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await riskControlMeasureApi().modRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施修改成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            riskControlMeasureFormRef,
            changeClassifyTwoList,
            submitRiskControlMeasureDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevel/action/index.vue

对比新文件
@@ -0,0 +1,271 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>管控方式：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.controlType" placeholder="管控方式" clearable>
                        <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>安全风险事件：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.riskEventId" placeholder="安全风险事件" clearable>
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskEventName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增措施
                </el-button>
            </div>
            <el-table :data="riskControlMeasureData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="riskEventName" label="安全风险事件名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlMeasureCode" label="风控措施编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlType" label="管控方式" show-overflow-tooltip></el-table-column>
                <el-table-column prop="checkContent" label="管控内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify1" label="管控措施分类1" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify2" label="管控措施分类2" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify3" label="管控措施分类3" show-overflow-tooltip></el-table-column>
                <el-table-column prop="measureDesc" label="措施说明" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dateFormat('YYYY-mm-dd HH:MM:SS', '2022-07-07T08:00:00') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelRiskControlMeasure(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="riskControlMeasureData.params.pageIndex"
                background
                v-model:page-size="riskControlMeasureData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="riskControlMeasureData.total"
            >
            </el-pagination>
        </el-card>
        <riskControlMeasureDialog ref="riskControlMeasureDialogRef" @refreshRiskControlMeasure="initRiskControlMeasureData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import riskControlMeasureDialog from './components/riskControlMeasureDialog.vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    riskControlMeasureData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            controlType: number | null;
            riskEventId: number | null;
        };
    };
    controlTypeList: Array<controlTypeType>;
    classifyOneList: Array<classifyOneType>;
    classifyTwoList: Array<classifyTwoType>;
    allSafetyRiskEventData: Array<SafetyRiskEventDataState>;
}
interface controlTypeType {}
interface classifyOneType {}
interface classifyTwoType {}
interface SafetyRiskEventDataState {}

export default {
    name: 'riskControlMeasure',
    components: { riskControlMeasureDialog },
    setup() {
        const riskControlMeasureDialogRef = ref();
        const state = reactive<TableDataState>({
            riskControlMeasureData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    controlType: null,
                    riskEventId: null
                }
            },
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            allSafetyRiskEventData: []
        });

        // 初始化表格数据
        const initRiskControlMeasureData = async () => {
            let res = await riskControlMeasureApi().getRiskControlMeasureList(state.riskControlMeasureData.params);
            if (res.data.code === '200') {
                state.riskControlMeasureData.data = res.data.data;
                state.riskControlMeasureData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const dateFormat = (fmt: any, date: any) => {
            date = new Date(date);
            fmt =
                date.getFullYear() +
                '-' +
                (date.getMonth() + 1) +
                '-' +
                date.getDate() +
                ' ' +
                date.getHours().toString() +
                ':' +
                (date.getMinutes().toString() === '0' ? '00' : date.getMinutes().toString()) +
                ':' +
                (date.getSeconds().toString() === '0' ? '00' : date.getMinutes().toString());
            return fmt;
        };

        //获取安全风险事件
        const getAllSafetyRiskEvent = async () => {
            let res = await safetyRiskEventApi().getAllSafetyRiskEventList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取管控措施分类
        const getClassify = async () => {
            let res = await riskControlMeasureApi().getClassifyData();
            if (res.data.code === '200') {
                state.classifyOneList = res.data.data.filter((item: any) => item.parentId === null);
                state.classifyTwoList = res.data.data.filter((item: any) => item.parentId !== null);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            riskControlMeasureDialogRef.value.openSafetyRiskEventDialog(
                type,
                value,
                state.allSafetyRiskEventData,
                state.classifyOneList,
                state.classifyTwoList
            );
        };

        // 删除角色
        const onDelRiskControlMeasure = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条风险管控措施：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await riskControlMeasureApi().deleteRiskControlMeasure({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initRiskControlMeasureData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.riskControlMeasureData.params.pageSize = val;
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.riskControlMeasureData.params.pageIndex = val;
            initRiskControlMeasureData();
        };

        // 页面加载时
        onMounted(() => {
            initRiskControlMeasureData();
            getAllSafetyRiskEvent();
            getClassify();
        });

        return {
            dateFormat,
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelRiskControlMeasure,
            onHandleCurrentChange,
            riskControlMeasureDialog,
            riskControlMeasureDialogRef,
            initRiskControlMeasureData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/riskLevel/device/components/productionDeviceDialog.vue

对比新文件
@@ -0,0 +1,200 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px">
            <el-form
                :model="productionDeviceForm"
                :rules="productionDeviceFormRules"
                ref="productionDeviceFormRef"
                size="default"
                label-width="120px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceName">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.produceDeviceName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="depId">
                            <el-cascader
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="productionDeviceForm.depId"
                            >
                            </el-cascader>
                            <!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>-->
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险等级" prop="riskLevel">
                            <el-select
                                class="input-length"
                                v-model="productionDeviceForm.riskLevel"
                                placeholder="请选择风险等级"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="区域位置" prop="location">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isShowProductionDeviceDialog: Boolean;
    productionDeviceForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    departmentList: [];
    levelList: Array<levelListState>;
    productionDeviceFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            isShowProductionDeviceDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            productionDeviceForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            productionDeviceFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowProductionDeviceDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.productionDeviceForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.productionDeviceForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevel/device/index.vue

对比新文件
@@ -0,0 +1,226 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>风险等级：</span>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级">
                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="请选择部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="productionDeviceData.params.depId"
                    >
                    </el-cascader>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增装置
                </el-button>
            </div>
            <el-table :data="productionDeviceData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
            >
            </el-pagination>
        </el-card>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import productionDeviceDialog from './components/productionDeviceDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    productionDeviceData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskLevel: number | null;
            status: number;
            depId: number | null;
            location: string | null;
            produceDeviceName: string | null;
        };
    };
    departmentList: Array<DepartmentState>;
    levelList: Array<levelListState>;
}
interface levelListState {}
interface DepartmentState {}

export default defineComponent({
    name: 'productionDevice',
    components: { productionDeviceDialog },
    setup() {
        const productionDeviceDialogRef = ref();
        const state = reactive<TableDataState>({
            productionDeviceData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskLevel: null,
                    status: 1,
                    depId: null,
                    location: null,
                    produceDeviceName: null
                }
            },
            departmentList: [],
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ]
        });
        // 初始化表格数据
        const initProductionDeviceTableData = async () => {
            let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params);
            if (res.data.code === '200') {
                state.productionDeviceData.data = res.data.data;
                state.productionDeviceData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initProductionDeviceTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        const handleSearch = () => {
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.productionDeviceData.params.pageSize = val;
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.productionDeviceData.params.pageIndex = val;
            initProductionDeviceTableData();
        };
        // 页面加载时
        onMounted(() => {
            initProductionDeviceTableData();
            getDepartmentData();
        });
        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            productionDeviceDialog,
            productionDeviceDialogRef,
            initProductionDeviceTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/doublePreventSystem/riskLevel/event/components/safetyRiskEventDialog.vue

对比新文件
@@ -0,0 +1,160 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskEventDialog" width="600px">
            <el-form
                :model="safetyRiskEventForm"
                :rules="safetyRiskEventFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitId">
                            <el-select class="input-length" v-model="safetyRiskEventForm.riskUnitId" placeholder="请输入安全风险分析单元名称">
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskUnitName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险事件名称" prop="riskEventName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskEventForm.riskEventName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskEventDialog = !isSafetyRiskEventDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskEventDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskEventDialog: Boolean;
    safetyRiskEventForm: {
        riskEventName: string | null;
        riskUnitId: number | null;
    };
    title: string;
    departmentList: [];
    allSafetyRiskEventData: [];
    safetyRiskEventFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            allSafetyRiskEventData: [],
            isSafetyRiskEventDialog: false,
            safetyRiskEventForm: {
                riskEventName: null,
                riskUnitId: null
            },
            safetyRiskEventFormRules: {
                riskEventName: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitId: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, department: [], allSafetyRiskEventData: []) => {
            state.isSafetyRiskEventDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险事件';
                state.safetyRiskEventForm = {
                    riskEventName: null,
                    riskUnitId: null
                };
            } else {
                state.title = '修改风险事件';
                state.safetyRiskEventForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskEventDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险事件') {
                        let res = await safetyRiskEventApi().addSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskEventApi().modSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskEventDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevel/event/index.vue

对比新文件
@@ -0,0 +1,204 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>安全风险单元名称：</span>
                    <el-select v-model="safetyRiskEventData.params.riskUnitId" class="input-box" placeholder="安全风险单元名称">
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskUnitName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>安全风险事件名称：</span>
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="input-box" placeholder="安全风险事件名称"> </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon><ele-Search /> </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增事件
                </el-button>
            </div>
            <el-table :data="safetyRiskEventData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskEventName" label="安全风险事件名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelSafetyRiskEvent(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskEventData.params.pageIndex"
                background
                v-model:page-size="safetyRiskEventData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskEventData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskEventDialog ref="safetyRiskEventDialogRef" @refreshSafetyRiskEvent="initSafetyRiskEventData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { departmentApi } from '/@/api/department';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskEventData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskEventName: string | null;
        };
    };
    allSafetyRiskEventData: Array<safetyRiskEventState>;
}
interface safetyRiskEventState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskEventDialog },
    setup() {
        const safetyRiskEventDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskEventData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskEventName: null
                }
            },
            allSafetyRiskEventData: []
        });
        // 初始化表格数据
        const initSafetyRiskEventData = async () => {
            let res = await safetyRiskEventApi().getSafetyRiskEventList(state.safetyRiskEventData.params);
            if (res.data.code === '200') {
                state.safetyRiskEventData.data = res.data.data;
                state.safetyRiskEventData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 获取安全风险分析单元数据
        const getAllSafetyRiskEventData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getAllSafetyRiskAnalyseUnitList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开安全风险事件
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskEventDialogRef.value.openSafetyRiskEventDialog(type, value, state.allSafetyRiskEventData);
        };

        // 删除角色
        const onDelSafetyRiskEvent = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险事件：“${row.riskEventName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskEventApi().deleteSafetyRiskEvent({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskEventData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskEventData.params.pageSize = val;
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskEventData.params.pageIndex = val;
            initSafetyRiskEventData();
        };

        // 页面加载时
        onMounted(() => {
            getAllSafetyRiskEventData();
            initSafetyRiskEventData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelSafetyRiskEvent,
            onHandleCurrentChange,
            safetyRiskEventDialog,
            safetyRiskEventDialogRef,
            initSafetyRiskEventData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/riskLevel/unit/components/safetyRiskAnalyseUnitDialog.vue

对比新文件
@@ -0,0 +1,237 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskAnalyseUnitDialog" width="600px">
            <el-form
                :model="safetyRiskAnalyseUnitForm"
                :rules="safetyRiskAnalyseUnitFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskCode"
                                placeholder="请输入安全风险分析对象编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskUnitName"
                                placeholder="请输入安全风险分析单元名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.produceDeviceId"
                                placeholder="请输入生产装置名称"
                                clearable
                            >
                                <el-option
                                    v-for="item in allProduceDeviceData"
                                    :key="item.id"
                                    :label="item.produceDeviceName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任部门" prop="liableDepId">
                            <el-cascader
                                @change="achieveUserList"
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="safetyRiskAnalyseUnitForm.liableDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任人" prop="liablePersonId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.liablePersonId"
                                placeholder="请选择责任人"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskAnalyseUnitDialog = !isSafetyRiskAnalyseUnitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskAnalyseUnitDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskAnalyseUnitDialog: Boolean;
    safetyRiskAnalyseUnitForm: {
        riskCode: string | null;
        riskUnitName: string | null;
        liablePersonId: number | null;
        liableDepId: number | null;
        produceDeviceId: number | null;
    };
    title: string;
    userList: [];
    departmentList: [];
    allProduceDeviceData: [];
    safetyRiskAnalyseUnitFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            userList: [],
            departmentList: [],
            allProduceDeviceData: [],
            isSafetyRiskAnalyseUnitDialog: false,
            safetyRiskAnalyseUnitForm: {
                riskCode: null,
                riskUnitName: null,
                liablePersonId: null,
                liableDepId: null,
                produceDeviceId: null
            },
            safetyRiskAnalyseUnitFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskAnalyseUnitDialog = (type: string, value: object, department: [], allProduceDeviceData: []) => {
            // console.log(jsonBig.stringify(123124124124214123131))
            state.isSafetyRiskAnalyseUnitDialog = true;
            state.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险分析单元';
                state.safetyRiskAnalyseUnitForm = {
                    riskCode: null,
                    riskUnitName: null,
                    liablePersonId: null,
                    liableDepId: null,
                    produceDeviceId: null
                };
            } else {
                state.title = '修改风险分析单元';
                state.safetyRiskAnalyseUnitForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskAnalyseUnitDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险分析单元') {
                        let res = await safetyRiskAnalyseUnitApi().addSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskAnalyseUnitApi().modSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitForm.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitForm.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        return {
            ...toRefs(state),
            achieveUserList,
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskAnalyseUnitDialog,
            openSafetyRiskAnalyseUnitDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevel/unit/index.vue

对比新文件
@@ -0,0 +1,269 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>责任部门：</span>
                    <el-cascader
                        @change="achieveUserList"
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="责任部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="safetyRiskAnalyseUnitData.params.liableDepId"
                    >
                    </el-cascader>
                </div>
                <div class="basic-line">
                    <span>责任人：</span>
                    <el-select v-model="safetyRiskAnalyseUnitData.params.liablePersonId" clearable filterable class="input-box" placeholder="责任人">
                        <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>单元名称：</span>
                    <el-input v-model="safetyRiskAnalyseUnitData.params.riskUnitName" clearable filterable class="input-box" placeholder="单元名称">
                    </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增单元
                </el-button>
            </div>
            <el-table :data="safetyRiskAnalyseUnitData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskCode" label="安全风险分析对象编码" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liableDep" label="责任部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liablePerson" label="责任人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskAnalyseUnitData.params.pageIndex"
                background
                v-model:page-size="safetyRiskAnalyseUnitData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskAnalyseUnitData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskAnalyseUnitDialog ref="safetyRiskAnalyseUnitDialogRef" @refreshSafetyRiskAnalyseUnit="initSafetyRiskAnalyseUnitData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts';
import { departmentApi } from '/@/api/department';
import { userApi } from '/@/api/user';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskAnalyseUnitData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskUnitName: string | null;
            liableDepId: number | null;
            liablePersonId: number | null;
        };
    };
    userList: Array<UserState>;
    departmentList: Array<DepartmentState>;
    allProduceDeviceData: Array<produceDeviceState>;
}
interface produceDeviceState {}
interface DepartmentState {}
interface UserState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskAnalyseUnitDialog },
    setup() {
        const safetyRiskAnalyseUnitDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskAnalyseUnitData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskUnitName: null,
                    liableDepId: null,
                    liablePersonId: null
                }
            },
            userList: [],
            departmentList: [],
            allProduceDeviceData: []
        });
        // 初始化表格数据
        const initSafetyRiskAnalyseUnitData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getSafetyRiskAnalyseUnitList(state.safetyRiskAnalyseUnitData.params);
            if (res.data.code === '200') {
                state.safetyRiskAnalyseUnitData.data = res.data.data;
                state.safetyRiskAnalyseUnitData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitData.params.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取生产装置列表
        const getAllProduceDeviceData = async () => {
            let res = await productionDeviceApi().getAllProductionDeviceList();
            if (res.data.code === '200') {
                state.allProduceDeviceData = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取部门列表
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitData.params.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskAnalyseUnitDialogRef.value.openSafetyRiskAnalyseUnitDialog(type, value, state.departmentList, state.allProduceDeviceData);
        };

        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险分析单元：“${row.riskUnitName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskAnalyseUnitApi().deleteSafetyRiskAnalyseUnit({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskAnalyseUnitData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageSize = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageIndex = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 页面加载时
        onMounted(() => {
            initSafetyRiskAnalyseUnitData();
            getAllProduceDeviceData();
            getDepartmentData();
        });

        return {
            handleSearch,
            achieveUserList,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            safetyRiskAnalyseUnitDialog,
            safetyRiskAnalyseUnitDialogRef,
            initSafetyRiskAnalyseUnitData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/riskLevelManage/index.vue

文件已删除

 src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue

@@ -13,7 +13,7 @@
                        <el-form-item label="生产装置名称" prop="produceDeviceName">
                            <el-input
                                class="input-length"
                                v-model="productionDeviceForm.produceDeviceName"
                                v-model.trim="productionDeviceForm.produceDeviceName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
@@ -51,7 +51,7 @@
                        <el-form-item label="区域位置" prop="location">
                            <el-input
                                class="input-length"
                                v-model="productionDeviceForm.location"
                                v-model.trim="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"

 src/views/doublePreventSystem/riskLevelManage/riskControlMeasure/components/riskControlMeasureDialog.vue

@@ -25,7 +25,7 @@
                        <el-form-item label="风险措施编码" prop="controlMeasureCode">
                            <el-input
                                class="input-length"
                                v-model="riskControlMeasureForm.controlMeasureCode"
                                v-model.trim="riskControlMeasureForm.controlMeasureCode"
                                placeholder="请输入风险措施编码"
                            ></el-input>
                        </el-form-item>
@@ -43,7 +43,7 @@
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model="riskControlMeasureForm.checkContent"
                                v-model.trim="riskControlMeasureForm.checkContent"
                                placeholder="请输入管控内容"
                                clearable
                            >
@@ -54,7 +54,7 @@
                        <el-form-item label="管控措施分类1" prop="classify1">
                            <el-select
                                class="input-length"
                                v-model="riskControlMeasureForm.classify1"
                                v-model.trim="riskControlMeasureForm.classify1"
                                @change="changeClassifyTwoList"
                                placeholder="请选择管控方式"
                                clearable
@@ -72,7 +72,7 @@
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类3" prop="classify3">
                            <el-input class="input-length" v-model="riskControlMeasureForm.classify3" placeholder="请选择管控方式" clearable>
                            <el-input class="input-length" v-model.trim="riskControlMeasureForm.classify3" placeholder="请选择管控方式" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
@@ -82,7 +82,7 @@
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model="riskControlMeasureForm.measureDesc"
                                v-model.trim="riskControlMeasureForm.measureDesc"
                                placeholder="请输入措施说明"
                                clearable
                            >

 src/views/doublePreventSystem/riskLevelManage/safetyRiskAnalyseUnit/components/safetyRiskAnalyseUnitDialog.vue

@@ -13,7 +13,7 @@
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.riskCode"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskCode"
                                placeholder="请输入安全风险分析对象编码"
                            ></el-input>
                        </el-form-item>
@@ -22,7 +22,7 @@
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitName">
                            <el-input
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.riskUnitName"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskUnitName"
                                placeholder="请输入安全风险分析单元名称"
                            ></el-input>
                        </el-form-item>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskEvent/components/safetyRiskEventDialog.vue

@@ -25,7 +25,7 @@
                        <el-form-item label="安全风险事件名称" prop="riskEventName">
                            <el-input
                                class="input-length"
                                v-model="safetyRiskEventForm.riskEventName"
                                v-model.trim="safetyRiskEventForm.riskEventName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskEvent/index.vue

@@ -13,9 +13,7 @@
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="input-box" placeholder="安全风险事件名称"> </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    <el-icon><ele-Search /> </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">

 src/views/doublePreventSystem/test/oneTwoThreeFourFiveSix/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test/test1-1/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>222</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test/test1-2/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>111</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test/test1-3/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>333</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test/test1-4/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>444</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test2/riskControlMeasure/components/riskControlMeasureDialog.vue

对比新文件
@@ -0,0 +1,263 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isRiskControlMeasureDialog" width="600px">
            <el-form
                :model="riskControlMeasureForm"
                :rules="riskControlMeasureFormRules"
                ref="riskControlMeasureFormRef"
                size="default"
                label-width="160px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险事件名称" prop="riskEventId">
                            <el-select class="input-length" v-model="riskControlMeasureForm.riskEventId" placeholder="请选择风险事件" clearable>
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskEventName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险措施编码" prop="controlMeasureCode">
                            <el-input
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.controlMeasureCode"
                                placeholder="请输入风险措施编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控方式" prop="controlType">
                            <el-select class="input-length" v-model="riskControlMeasureForm.controlType" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控内容" prop="checkContent">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.checkContent"
                                placeholder="请输入管控内容"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类1" prop="classify1">
                            <el-select
                                class="input-length"
                                v-model.trim="riskControlMeasureForm.classify1"
                                @change="changeClassifyTwoList"
                                placeholder="请选择管控方式"
                                clearable
                            >
                                <el-option v-for="item in classifyOneList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类2" prop="classify2">
                            <el-select class="input-length" v-model="riskControlMeasureForm.classify2" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in classifyTwoList" :key="item.id" :label="item.riskMeasureName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管控措施分类3" prop="classify3">
                            <el-input class="input-length" v-model.trim="riskControlMeasureForm.classify3" placeholder="请选择管控方式" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="措施说明" prop="measureDesc">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model.trim="riskControlMeasureForm.measureDesc"
                                placeholder="请输入措施说明"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isRiskControlMeasureDialog = !isRiskControlMeasureDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRiskControlMeasureDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isRiskControlMeasureDialog: Boolean;
    riskControlMeasureForm: {
        riskEventId: number | null;
        controlMeasureCode: string | null;
        controlType: number | null;
        checkContent: string | null;
        classify1: number | null;
        classify2: number | null;
        classify3: string | null;
        measureDesc: string | null;
    };
    title: string;
    controlTypeList: Array<controlTypeListType>;
    classifyOneList: [];
    classifyTwoList: Array<classifyTwoType>;
    classifyTwoListAll: [];
    allSafetyRiskEventData: [];
    riskControlMeasureFormRules: {};
}
interface classifyTwoType {
    id: number;
    riskMeasureName: string;
}
interface controlTypeListType {}

import { reactive, toRefs, ref } from 'vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure';
import { ElMessage } from 'element-plus';
export default {
    name: 'riskControlMeasureDialog',
    setup(props: any, context: any) {
        const riskControlMeasureFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            classifyTwoListAll: [],
            allSafetyRiskEventData: [],
            isRiskControlMeasureDialog: false,
            riskControlMeasureForm: {
                riskEventId: null,
                controlMeasureCode: null,
                controlType: null,
                checkContent: null,
                classify1: null,
                classify2: null,
                classify3: null,
                measureDesc: null
            },
            riskControlMeasureFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, allSafetyRiskEventData: [], classifyOneList: [], classifyTwoList: []) => {
            state.isRiskControlMeasureDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.classifyOneList = JSON.parse(JSON.stringify(classifyOneList));
            state.classifyTwoListAll = JSON.parse(JSON.stringify(classifyTwoList));
            state.classifyTwoList = [];
            setTimeout(() => {
                riskControlMeasureFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险管控措施';
                state.riskControlMeasureForm = {
                    riskEventId: null,
                    controlMeasureCode: null,
                    controlType: null,
                    checkContent: null,
                    classify1: null,
                    classify2: null,
                    classify3: null,
                    measureDesc: null
                };
            } else {
                state.title = '修改风险管控措施';
                state.riskControlMeasureForm = JSON.parse(JSON.stringify(value));
            }
        };

        const changeClassifyTwoList = () => {
            state.riskControlMeasureForm.classify2 = null;
            state.classifyTwoList = [];
            state.classifyTwoList = state.classifyTwoListAll.filter((item: any) => item.parentId === state.riskControlMeasureForm.classify1);
        };

        //新增修改提交
        const submitRiskControlMeasureDialog = async () => {
            riskControlMeasureFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险管控措施') {
                        let res = await riskControlMeasureApi().addRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施新增成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await riskControlMeasureApi().modRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施修改成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            riskControlMeasureFormRef,
            changeClassifyTwoList,
            submitRiskControlMeasureDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/test2/riskControlMeasure/index.vue

对比新文件
@@ -0,0 +1,272 @@
<template>
    <div class="system-role-container">
        111
        <!--        <el-card shadow="hover">-->
        <!--            <div class="system-user-search mb15">-->
        <!--                <div class="basic-line">-->
        <!--                    <span>管控方式：</span>-->
        <!--                    <el-select class="input-box" v-model="riskControlMeasureData.params.controlType" placeholder="管控方式" clearable>-->
        <!--                        <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
        <!--                    </el-select>-->
        <!--                </div>-->
        <!--                <div class="basic-line">-->
        <!--                    <span>安全风险事件：</span>-->
        <!--                    <el-select class="input-box" v-model="riskControlMeasureData.params.riskEventId" placeholder="安全风险事件" clearable>-->
        <!--                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskEventName" :value="item.id"></el-option>-->
        <!--                    </el-select>-->
        <!--                </div>-->
        <!--                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">-->
        <!--                    <el-icon>-->
        <!--                        <ele-Search />-->
        <!--                    </el-icon>-->
        <!--                    查询-->
        <!--                </el-button>-->
        <!--                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">-->
        <!--                    <el-icon>-->
        <!--                        <ele-FolderAdd />-->
        <!--                    </el-icon>-->
        <!--                    新增措施-->
        <!--                </el-button>-->
        <!--            </div>-->
        <!--            <el-table :data="riskControlMeasureData.data" style="width: 100%">-->
        <!--                <el-table-column type="index" label="序号" width="60" />-->
        <!--                <el-table-column prop="riskEventName" label="安全风险事件名称" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="controlMeasureCode" label="风控措施编码" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="controlType" label="管控方式" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="checkContent" label="管控内容" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="classify1" label="管控措施分类1" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="classify2" label="管控措施分类2" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="classify3" label="管控措施分类3" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="measureDesc" label="措施说明" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip>-->
        <!--                    <template #default="scope">-->
        <!--                        <span>{{ dateFormat('YYYY-mm-dd HH:MM:SS', '2022-07-07T08:00:00') }}</span>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>-->
        <!--                <el-table-column label="操作" width="150">-->
        <!--                    <template #default="scope">-->
        <!--                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>-->
        <!--                        <el-button size="small" text type="danger" @click="onDelRiskControlMeasure(scope.row)">删除</el-button>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--            </el-table>-->
        <!--            <el-pagination-->
        <!--                @size-change="onHandleSizeChange"-->
        <!--                @current-change="onHandleCurrentChange"-->
        <!--                class="mt15"-->
        <!--                :pager-count="5"-->
        <!--                :page-sizes="[10, 20, 30]"-->
        <!--                v-model:current-page="riskControlMeasureData.params.pageIndex"-->
        <!--                background-->
        <!--                v-model:page-size="riskControlMeasureData.params.pageSize"-->
        <!--                layout="total, sizes, prev, pager, next, jumper"-->
        <!--                :total="riskControlMeasureData.total"-->
        <!--            >-->
        <!--            </el-pagination>-->
        <!--        </el-card>-->
        <!--        <riskControlMeasureDialog ref="riskControlMeasureDialogRef" @refreshRiskControlMeasure="initRiskControlMeasureData" />-->
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import riskControlMeasureDialog from './components/riskControlMeasureDialog.vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    riskControlMeasureData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            controlType: number | null;
            riskEventId: number | null;
        };
    };
    controlTypeList: Array<controlTypeType>;
    classifyOneList: Array<classifyOneType>;
    classifyTwoList: Array<classifyTwoType>;
    allSafetyRiskEventData: Array<SafetyRiskEventDataState>;
}
interface controlTypeType {}
interface classifyOneType {}
interface classifyTwoType {}
interface SafetyRiskEventDataState {}

export default {
    name: 'riskControlMeasure',
    components: { riskControlMeasureDialog },
    setup() {
        const riskControlMeasureDialogRef = ref();
        const state = reactive<TableDataState>({
            riskControlMeasureData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    controlType: null,
                    riskEventId: null
                }
            },
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            allSafetyRiskEventData: []
        });

        // 初始化表格数据
        const initRiskControlMeasureData = async () => {
            let res = await riskControlMeasureApi().getRiskControlMeasureList(state.riskControlMeasureData.params);
            if (res.data.code === '200') {
                state.riskControlMeasureData.data = res.data.data;
                state.riskControlMeasureData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const dateFormat = (fmt: any, date: any) => {
            date = new Date(date);
            fmt =
                date.getFullYear() +
                '-' +
                (date.getMonth() + 1) +
                '-' +
                date.getDate() +
                ' ' +
                date.getHours().toString() +
                ':' +
                (date.getMinutes().toString() === '0' ? '00' : date.getMinutes().toString()) +
                ':' +
                (date.getSeconds().toString() === '0' ? '00' : date.getMinutes().toString());
            return fmt;
        };

        //获取安全风险事件
        const getAllSafetyRiskEvent = async () => {
            let res = await safetyRiskEventApi().getAllSafetyRiskEventList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取管控措施分类
        const getClassify = async () => {
            let res = await riskControlMeasureApi().getClassifyData();
            if (res.data.code === '200') {
                state.classifyOneList = res.data.data.filter((item: any) => item.parentId === null);
                state.classifyTwoList = res.data.data.filter((item: any) => item.parentId !== null);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            riskControlMeasureDialogRef.value.openSafetyRiskEventDialog(
                type,
                value,
                state.allSafetyRiskEventData,
                state.classifyOneList,
                state.classifyTwoList
            );
        };

        // 删除角色
        const onDelRiskControlMeasure = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条风险管控措施：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await riskControlMeasureApi().deleteRiskControlMeasure({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initRiskControlMeasureData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.riskControlMeasureData.params.pageSize = val;
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.riskControlMeasureData.params.pageIndex = val;
            initRiskControlMeasureData();
        };

        // 页面加载时
        onMounted(() => {
            initRiskControlMeasureData();
            getAllSafetyRiskEvent();
            getClassify();
        });

        return {
            dateFormat,
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelRiskControlMeasure,
            onHandleCurrentChange,
            riskControlMeasureDialog,
            riskControlMeasureDialogRef,
            initRiskControlMeasureData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test2/safetyRiskEvent/components/safetyRiskEventDialog.vue

对比新文件
@@ -0,0 +1,160 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskEventDialog" width="600px">
            <el-form
                :model="safetyRiskEventForm"
                :rules="safetyRiskEventFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitId">
                            <el-select class="input-length" v-model="safetyRiskEventForm.riskUnitId" placeholder="请输入安全风险分析单元名称">
                                <el-option
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskUnitName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险事件名称" prop="riskEventName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskEventForm.riskEventName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskEventDialog = !isSafetyRiskEventDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskEventDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskEventDialog: Boolean;
    safetyRiskEventForm: {
        riskEventName: string | null;
        riskUnitId: number | null;
    };
    title: string;
    departmentList: [];
    allSafetyRiskEventData: [];
    safetyRiskEventFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            allSafetyRiskEventData: [],
            isSafetyRiskEventDialog: false,
            safetyRiskEventForm: {
                riskEventName: null,
                riskUnitId: null
            },
            safetyRiskEventFormRules: {
                riskEventName: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitId: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, department: [], allSafetyRiskEventData: []) => {
            state.isSafetyRiskEventDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险事件';
                state.safetyRiskEventForm = {
                    riskEventName: null,
                    riskUnitId: null
                };
            } else {
                state.title = '修改风险事件';
                state.safetyRiskEventForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskEventDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险事件') {
                        let res = await safetyRiskEventApi().addSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskEventApi().modSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskEventDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/test2/safetyRiskEvent/index.vue

对比新文件
@@ -0,0 +1,204 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>安全风险单元名称：</span>
                    <el-select v-model="safetyRiskEventData.params.riskUnitId" class="input-box" placeholder="安全风险单元名称">
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskUnitName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>安全风险事件名称：</span>
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="input-box" placeholder="安全风险事件名称"> </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon><ele-Search /> </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增事件
                </el-button>
            </div>
            <el-table :data="safetyRiskEventData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskEventName" label="安全风险事件名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelSafetyRiskEvent(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskEventData.params.pageIndex"
                background
                v-model:page-size="safetyRiskEventData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskEventData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskEventDialog ref="safetyRiskEventDialogRef" @refreshSafetyRiskEvent="initSafetyRiskEventData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { departmentApi } from '/@/api/department';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskEventData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskEventName: string | null;
        };
    };
    allSafetyRiskEventData: Array<safetyRiskEventState>;
}
interface safetyRiskEventState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskEventDialog },
    setup() {
        const safetyRiskEventDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskEventData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskEventName: null
                }
            },
            allSafetyRiskEventData: []
        });
        // 初始化表格数据
        const initSafetyRiskEventData = async () => {
            let res = await safetyRiskEventApi().getSafetyRiskEventList(state.safetyRiskEventData.params);
            if (res.data.code === '200') {
                state.safetyRiskEventData.data = res.data.data;
                state.safetyRiskEventData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 获取安全风险分析单元数据
        const getAllSafetyRiskEventData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getAllSafetyRiskAnalyseUnitList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开安全风险事件
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskEventDialogRef.value.openSafetyRiskEventDialog(type, value, state.allSafetyRiskEventData);
        };

        // 删除角色
        const onDelSafetyRiskEvent = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险事件：“${row.riskEventName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskEventApi().deleteSafetyRiskEvent({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskEventData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskEventData.params.pageSize = val;
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskEventData.params.pageIndex = val;
            initSafetyRiskEventData();
        };

        // 页面加载时
        onMounted(() => {
            getAllSafetyRiskEventData();
            initSafetyRiskEventData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelSafetyRiskEvent,
            onHandleCurrentChange,
            safetyRiskEventDialog,
            safetyRiskEventDialogRef,
            initSafetyRiskEventData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/doublePreventSystem/test2/test2-1/components/productionDeviceDialog.vue

对比新文件
@@ -0,0 +1,200 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px">
            <el-form
                :model="productionDeviceForm"
                :rules="productionDeviceFormRules"
                ref="productionDeviceFormRef"
                size="default"
                label-width="120px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceName">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.produceDeviceName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="depId">
                            <el-cascader
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="productionDeviceForm.depId"
                            >
                            </el-cascader>
                            <!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>-->
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险等级" prop="riskLevel">
                            <el-select
                                class="input-length"
                                v-model="productionDeviceForm.riskLevel"
                                placeholder="请选择风险等级"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="区域位置" prop="location">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isShowProductionDeviceDialog: Boolean;
    productionDeviceForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    departmentList: [];
    levelList: Array<levelListState>;
    productionDeviceFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            isShowProductionDeviceDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            productionDeviceForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            productionDeviceFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowProductionDeviceDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.productionDeviceForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.productionDeviceForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/test2/test2-1/index.vue

对比新文件
@@ -0,0 +1,226 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>风险等级：</span>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级">
                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="请选择部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="productionDeviceData.params.depId"
                    >
                    </el-cascader>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增装置
                </el-button>
            </div>
            <el-table :data="productionDeviceData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
            >
            </el-pagination>
        </el-card>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import productionDeviceDialog from './components/productionDeviceDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    productionDeviceData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskLevel: number | null;
            status: number;
            depId: number | null;
            location: string | null;
            produceDeviceName: string | null;
        };
    };
    departmentList: Array<DepartmentState>;
    levelList: Array<levelListState>;
}
interface levelListState {}
interface DepartmentState {}

export default defineComponent({
    name: 'productionDevice',
    components: { productionDeviceDialog },
    setup() {
        const productionDeviceDialogRef = ref();
        const state = reactive<TableDataState>({
            productionDeviceData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskLevel: null,
                    status: 1,
                    depId: null,
                    location: null,
                    produceDeviceName: null
                }
            },
            departmentList: [],
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ]
        });
        // 初始化表格数据
        const initProductionDeviceTableData = async () => {
            let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params);
            if (res.data.code === '200') {
                state.productionDeviceData.data = res.data.data;
                state.productionDeviceData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initProductionDeviceTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        const handleSearch = () => {
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.productionDeviceData.params.pageSize = val;
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.productionDeviceData.params.pageIndex = val;
            initProductionDeviceTableData();
        };
        // 页面加载时
        onMounted(() => {
            initProductionDeviceTableData();
            getDepartmentData();
        });
        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            productionDeviceDialog,
            productionDeviceDialogRef,
            initProductionDeviceTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/doublePreventSystem/test2/test2-2/components/safetyRiskAnalyseUnitDialog.vue

对比新文件
@@ -0,0 +1,237 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskAnalyseUnitDialog" width="600px">
            <el-form
                :model="safetyRiskAnalyseUnitForm"
                :rules="safetyRiskAnalyseUnitFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskCode"
                                placeholder="请输入安全风险分析对象编码"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析单元名称" prop="riskUnitName">
                            <el-input
                                class="input-length"
                                v-model.trim="safetyRiskAnalyseUnitForm.riskUnitName"
                                placeholder="请输入安全风险分析单元名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.produceDeviceId"
                                placeholder="请输入生产装置名称"
                                clearable
                            >
                                <el-option
                                    v-for="item in allProduceDeviceData"
                                    :key="item.id"
                                    :label="item.produceDeviceName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任部门" prop="liableDepId">
                            <el-cascader
                                @change="achieveUserList"
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="safetyRiskAnalyseUnitForm.liableDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任人" prop="liablePersonId">
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.liablePersonId"
                                placeholder="请选择责任人"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskAnalyseUnitDialog = !isSafetyRiskAnalyseUnitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskAnalyseUnitDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isSafetyRiskAnalyseUnitDialog: Boolean;
    safetyRiskAnalyseUnitForm: {
        riskCode: string | null;
        riskUnitName: string | null;
        liablePersonId: number | null;
        liableDepId: number | null;
        produceDeviceId: number | null;
    };
    title: string;
    userList: [];
    departmentList: [];
    allProduceDeviceData: [];
    safetyRiskAnalyseUnitFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            userList: [],
            departmentList: [],
            allProduceDeviceData: [],
            isSafetyRiskAnalyseUnitDialog: false,
            safetyRiskAnalyseUnitForm: {
                riskCode: null,
                riskUnitName: null,
                liablePersonId: null,
                liableDepId: null,
                produceDeviceId: null
            },
            safetyRiskAnalyseUnitFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskAnalyseUnitDialog = (type: string, value: object, department: [], allProduceDeviceData: []) => {
            // console.log(jsonBig.stringify(123124124124214123131))
            state.isSafetyRiskAnalyseUnitDialog = true;
            state.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险分析单元';
                state.safetyRiskAnalyseUnitForm = {
                    riskCode: null,
                    riskUnitName: null,
                    liablePersonId: null,
                    liableDepId: null,
                    produceDeviceId: null
                };
            } else {
                state.title = '修改风险分析单元';
                state.safetyRiskAnalyseUnitForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitSafetyRiskAnalyseUnitDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险分析单元') {
                        let res = await safetyRiskAnalyseUnitApi().addSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await safetyRiskAnalyseUnitApi().modSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitForm.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitForm.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        return {
            ...toRefs(state),
            achieveUserList,
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskAnalyseUnitDialog,
            openSafetyRiskAnalyseUnitDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/test2/test2-2/index.vue

对比新文件
@@ -0,0 +1,269 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line">
                    <span>责任部门：</span>
                    <el-cascader
                        @change="achieveUserList"
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="责任部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="safetyRiskAnalyseUnitData.params.liableDepId"
                    >
                    </el-cascader>
                </div>
                <div class="basic-line">
                    <span>责任人：</span>
                    <el-select v-model="safetyRiskAnalyseUnitData.params.liablePersonId" clearable filterable class="input-box" placeholder="责任人">
                        <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>单元名称：</span>
                    <el-input v-model="safetyRiskAnalyseUnitData.params.riskUnitName" clearable filterable class="input-box" placeholder="单元名称">
                    </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增单元
                </el-button>
            </div>
            <el-table :data="safetyRiskAnalyseUnitData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskCode" label="安全风险分析对象编码" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liableDep" label="责任部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liablePerson" label="责任人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskAnalyseUnitData.params.pageIndex"
                background
                v-model:page-size="safetyRiskAnalyseUnitData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskAnalyseUnitData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskAnalyseUnitDialog ref="safetyRiskAnalyseUnitDialogRef" @refreshSafetyRiskAnalyseUnit="initSafetyRiskAnalyseUnitData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts';
import { departmentApi } from '/@/api/department';
import { userApi } from '/@/api/user';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskAnalyseUnitData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskUnitName: string | null;
            liableDepId: number | null;
            liablePersonId: number | null;
        };
    };
    userList: Array<UserState>;
    departmentList: Array<DepartmentState>;
    allProduceDeviceData: Array<produceDeviceState>;
}
interface produceDeviceState {}
interface DepartmentState {}
interface UserState {}

export default {
    name: 'productionDevice',
    components: { safetyRiskAnalyseUnitDialog },
    setup() {
        const safetyRiskAnalyseUnitDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskAnalyseUnitData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskUnitName: null,
                    liableDepId: null,
                    liablePersonId: null
                }
            },
            userList: [],
            departmentList: [],
            allProduceDeviceData: []
        });
        // 初始化表格数据
        const initSafetyRiskAnalyseUnitData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getSafetyRiskAnalyseUnitList(state.safetyRiskAnalyseUnitData.params);
            if (res.data.code === '200') {
                state.safetyRiskAnalyseUnitData.data = res.data.data;
                state.safetyRiskAnalyseUnitData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitData.params.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取生产装置列表
        const getAllProduceDeviceData = async () => {
            let res = await productionDeviceApi().getAllProductionDeviceList();
            if (res.data.code === '200') {
                state.allProduceDeviceData = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取部门列表
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitData.params.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskAnalyseUnitDialogRef.value.openSafetyRiskAnalyseUnitDialog(type, value, state.departmentList, state.allProduceDeviceData);
        };

        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险分析单元：“${row.riskUnitName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskAnalyseUnitApi().deleteSafetyRiskAnalyseUnit({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskAnalyseUnitData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageSize = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageIndex = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 页面加载时
        onMounted(() => {
            initSafetyRiskAnalyseUnitData();
            getAllProduceDeviceData();
            getDepartmentData();
        });

        return {
            handleSearch,
            achieveUserList,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            safetyRiskAnalyseUnitDialog,
            safetyRiskAnalyseUnitDialogRef,
            initSafetyRiskAnalyseUnitData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped></style>

 src/views/home/index.vue

文件已删除

 src/views/homeMenu/homeMenu.vue

@@ -22,22 +22,22 @@
            <div class="gridCont">
                <el-row :gutter="20">
                    <el-col :span="6"
                        ><div class="grid-content" v-throttle @click="renderMenu('2')">
                        ><div class="grid-content" v-throttle @click="render('2')">
                            <div class="itemTit">双重预防系统</div>
                            <img class="iconImg" src="../../assets/menu/icon4.png" /><img class="bgImg" src="../../assets/menu/card4.png" /></div
                    ></el-col>
                    <el-col :span="6"
                        ><div class="grid-content" v-throttle @click="renderMenu('3')">
                        ><div class="grid-content" v-throttle @click="render('3')">
                            <div class="itemTit">特殊作业系统</div>
                            <img class="iconImg" src="../../assets/menu/icon7.png" /><img class="bgImg" src="../../assets/menu/card7.png" /></div
                    ></el-col>
                    <el-col :span="6"
                        ><div class="grid-content" v-throttle @click="renderMenu('4')">
                        ><div class="grid-content" v-throttle @click="render('4')">
                            <div class="itemTit">智能巡检系统</div>
                            <img class="iconImg" src="../../assets/menu/icon8.png" /><img class="bgImg" src="../../assets/menu/card8.png" /></div
                    ></el-col>
                    <el-col :span="6">
                        <div class="grid-content" v-throttle @click="renderMenu('5')">
                        <div class="grid-content" v-throttle @click="render('5')">
                            <div class="itemTit">安全风险综合 <br />预警预报平台</div>
                            <img class="iconImg" src="../../assets/menu/icon1.png" />
                            <img class="bgImg" src="../../assets/menu/card1.png" />
@@ -46,39 +46,39 @@
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"
                        ><div class="grid-content grid-content-2" v-throttle @click="renderMenu('6')">
                        ><div class="grid-content grid-content-2" v-throttle @click="render('6')">
                            <div class="itemTit">应急管理系统</div>
                            <img class="iconImg" src="../../assets/menu/icon5.png" /><img class="bgImg" src="../../assets/menu/card5.png" /></div
                    ></el-col>
                    <el-col :span="6"
                        ><div class="grid-content grid-content-2" v-throttle @click="renderMenu('7')">
                        ><div class="grid-content grid-content-2" v-throttle @click="render('7')">
                            <div class="itemTit">目标责任管理系统</div>
                            <img class="iconImg" src="../../assets/menu/icon2.png" /><img class="bgImg" src="../../assets/menu/card2.png" /></div
                    ></el-col>
                    <el-col :span="6"
                        ><div class="grid-content grid-content-2" v-throttle @click="renderMenu('8')">
                        ><div class="grid-content grid-content-2" v-throttle @click="render('8')">
                            <div class="itemTit">事故管理系统</div>
                            <img class="iconImg" src="../../assets/menu/icon6.png" /><img class="bgImg" src="../../assets/menu/card6.png" /></div
                    ></el-col>
                    <el-col :span="6"
                        ><div class="grid-content grid-content-2" v-throttle @click="renderMenu('9')">
                        ><div class="grid-content grid-content-2" v-throttle @click="render('9')">
                            <div class="itemTit">设备综合管控系统</div>
                            <img class="iconImg" src="../../assets/menu/icon9.png" /><img class="bgImg" src="../../assets/menu/card9.png" /></div
                    ></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"
                        ><div class="grid-content grid-content-3" v-throttle @click="renderMenu('10')">
                        ><div class="grid-content grid-content-3" v-throttle @click="render('10')">
                            <div class="itemTit">安全知识图谱系统</div>
                            <img class="iconImg" src="../../assets/menu/icon3.png" /><img class="bgImg" src="../../assets/menu/card3.png" /></div
                    ></el-col>
                    <el-col :span="9"
                        ><div class="grid-content grid-content-3" v-throttle @click="renderMenu('11')">
                        ><div class="grid-content grid-content-3" v-throttle @click="render('11')">
                            <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div>
                            <img class="iconImg" src="../../assets/menu/icon10.png" /><img class="bgImg" src="../../assets/menu/card10.png" /></div
                    ></el-col>
                    <el-col :span="9"
                        ><div class="grid-content grid-content-3" v-throttle @click="renderMenu('1')">
                        ><div class="grid-content grid-content-3" @click="render('1')">
                            <div class="itemTit">基础数据权限管理系统</div>
                            <img class="iconImg" src="../../assets/menu/icon11.png" /><img class="bgImg" src="../../assets/menu/card11.png" /></div
                    ></el-col>
@@ -111,6 +111,8 @@
interface LoginState {
    tabsActiveName: string;
    isScan: boolean;
    count: number;
    projectId: string;
}

export default defineComponent({
@@ -118,7 +120,6 @@
    components: {},
    setup() {
        const { t } = useI18n();
        const route = useRoute();
        const router = useRouter();
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
@@ -128,7 +129,9 @@
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false
            isScan: false,
            count: 0,
            projectId: '1'
        });
        // 获取布局配置信息
        const getThemeConfig = computed(() => {
@@ -175,18 +178,50 @@
                })
                .catch(() => {});
        };
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
        //选择菜单
        const render = (value: string) => {
            state.projectId = value;
            renderMenu();
        };

        const throttle = (renderMenu: any, delay: number) => {
            let flag = true;
            let count = 0;
            return function () {
                if (!flag) return;
                flag = false;
                if (count === 0) {
                    renderMenu.apply();
                    count++;
                    flag = true;
                } else {
                    setTimeout(() => {
                        renderMenu.apply();
                        flag = true;
                    }, delay);
                }
            };
        };

        //调用菜单方法
        const renderMenu = throttle(() => {
            renderFun();
        }, 2000);

        //调后台菜单接口
        const renderFun = async () => {
            Session.set('projectId', state.projectId);
            userInfos.value.projectId = state.projectId;
            await initBackEndControlRoutes().then(() => {
                let linkToMenu = [...routesList.value];
                if (linkToMenu && linkToMenu.length > 1) {
                    router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1]));
                } else {
                    ElMessage({ type: 'warning', message: '你没有该项目的权限' });
                    ElMessage({ type: 'warning', message: '你没有该子系统的权限' });
                }
            });
        };

        const linkToFirstMenu: any = (value: any) => {
            let returnMenu = value;
            if (returnMenu.children?.length > 0) {
@@ -206,11 +241,11 @@
            // loginApp()
        });
        return {
            render,
            logoMini,
            onLoginOut,
            loginIconTwo,
            getThemeConfig,
            renderMenu,
            ...toRefs(state)
        };
    }

 src/views/intellectInspectSystem/inspectBasic/RFID/components/RFIDDialog.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'RFIDDialog'
};
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectBasic/RFID/index.vue

对比新文件
@@ -0,0 +1,182 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line"></div>
                <div class="basic-line"></div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增巡检指标
                </el-button>
            </div>
            <el-table :data="RFIDData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="quota" label="指标名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="quotaUnit" label="指标单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="quotaType" label="指标类型" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="RFIDData.params.pageIndex"
                background
                v-model:page-size="RFIDData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="RFIDData.total"
                class="page-position"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <RFIDDialog ref="RFIDDialogRef" @refreshProductionDevice="initRFIDTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import RFIDDialog from './components/RFIDDialog.vue';
import { RFIDApi } from '/@/api/intellectInspectSystem/RFID';

// 定义接口来定义对象的类型
interface TableData {
    quota: string;
    quotaUnit: string;
    quotaType: string;
    createUserName: string;
    gmtCreate: string;
    lastEditUserName: string;
    gmtModitify: string;
}
interface TableDataState {
    RFIDData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            rfid: number | null;
            rfidName: string | null;
        };
    };
}

export default defineComponent({
    name: 'RFID',
    components: { RFIDDialog },
    setup() {
        const RFIDDialogRef = ref();
        const state = reactive<TableDataState>({
            RFIDData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    rfid: null,
                    rfidName: null
                }
            }
        });
        // 初始化表格数据
        const initRFIDTableData = async () => {
            let res = await RFIDApi().getRFIDList(state.RFIDData.params);
            if (res.data.code === '200') {
                state.RFIDData.data = res.data.data.records;
                state.RFIDData.total = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            RFIDDialogRef.value.openProductionDeviceDialog(type, value);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await RFIDApi().deleteRFID({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initRFIDTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initRFIDTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.RFIDData.params.pageSize = val;
            initRFIDTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.RFIDData.params.pageIndex = val;
            initRFIDTableData();
        };
        // 页面加载时
        onMounted(() => {
            initRFIDTableData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            RFIDDialog,
            RFIDDialogRef,
            initRFIDTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectBasic/facilityAreaManage/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>111</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectBasic/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectBasic/inspectPointMange/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>222</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectBasic/inspectTargetManage/components/inspectTargetDialog.vue

对比新文件
@@ -0,0 +1,200 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px">
            <el-form
                :model="productionDeviceForm"
                :rules="productionDeviceFormRules"
                ref="productionDeviceFormRef"
                size="default"
                label-width="120px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="生产装置名称" prop="produceDeviceName">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.produceDeviceName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="depId">
                            <el-cascader
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="productionDeviceForm.depId"
                            >
                            </el-cascader>
                            <!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>-->
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险等级" prop="riskLevel">
                            <el-select
                                class="input-length"
                                v-model="productionDeviceForm.riskLevel"
                                placeholder="请选择风险等级"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="区域位置" prop="location">
                            <el-input
                                class="input-length"
                                v-model.trim="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
interface stateType {
    isShowProductionDeviceDialog: Boolean;
    productionDeviceForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    departmentList: [];
    levelList: Array<levelListState>;
    productionDeviceFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'inspectTargetDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            isShowProductionDeviceDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            productionDeviceForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            productionDeviceFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowProductionDeviceDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.productionDeviceForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.productionDeviceForm = JSON.parse(JSON.stringify(value));
            }
        };

        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
.input-length {
    width: 85%;
}
</style>

 src/views/intellectInspectSystem/inspectBasic/inspectTargetManage/index.vue

对比新文件
@@ -0,0 +1,178 @@
<template>
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-line"></div>
                <div class="basic-line"></div>
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增巡检指标
                </el-button>
            </div>
            <el-table :data="inspectTargetData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="quota" label="指标名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="quotaUnit" label="指标单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="quotaType" label="指标类型" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="inspectTargetData.params.pageIndex"
                background
                v-model:page-size="inspectTargetData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="inspectTargetData.total"
                class="page-position"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <inspectTargetDialog ref="inspectTargetDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import inspectTargetDialog from './components/inspectTargetDialog.vue';
import { inspectTargetApi } from '/@/api/intellectInspectSystem/inspectTargetManage';

// 定义接口来定义对象的类型
interface TableData {
    quota: string;
    quotaUnit: string;
    quotaType: string;
    createUserName: string;
    gmtCreate: string;
    lastEditUserName: string;
    gmtModitify: string;
}
interface TableDataState {
    inspectTargetData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
        };
    };
}

export default defineComponent({
    name: 'productionDevice',
    components: { inspectTargetDialog },
    setup() {
        const inspectTargetDialogRef = ref();
        const state = reactive<TableDataState>({
            inspectTargetData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10
                }
            }
        });
        // 初始化表格数据
        const initInspectTargetTableData = async () => {
            let res = await inspectTargetApi().getInspectTargetList(state.inspectTargetData.params);
            if (res.data.code === '200') {
                state.inspectTargetData.data = res.data.data.records;
                state.inspectTargetData.total = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            inspectTargetDialogRef.value.openProductionDeviceDialog(type, value);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await inspectTargetApi().deleteInspectTarget({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initInspectTargetTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initInspectTargetTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.inspectTargetData.params.pageSize = val;
            initInspectTargetTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.inspectTargetData.params.pageIndex = val;
            initInspectTargetTableData();
        };
        // 页面加载时
        onMounted(() => {
            initInspectTargetTableData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            inspectTargetDialog,
            inspectTargetDialogRef,
            initInspectTargetTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectTaskManage/index.vue

对比新文件
@@ -0,0 +1,9 @@
<template></template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/intellectInspectSystem/inspectTaskManage/inspectTask/index.vue

对比新文件
@@ -0,0 +1,11 @@
<template>
    <div>1234</div>
</template>

<script>
export default {
    name: 'index'
};
</script>

<style scoped></style>

 src/views/login/component/account.vue

文件已删除

 src/views/login/index.vue

文件已删除

 src/views/loginPage/component/accountLogin.vue

@@ -1,44 +1,55 @@
<template>
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off" size="large">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px;height: 24px"></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input
                :type="isShowPassword ? 'text' : 'password'"
                :placeholder="$t('message.account.accountPlaceholder2')"
                v-model="ruleForm.password"
                autocomplete="off"
                size="large"
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input
                type="text"
                :placeholder="$t('message.account.accountPlaceholder1')"
                v-model="ruleForm.username"
                clearable
                autocomplete="off"
                size="large"
            >
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"
                        ><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px"
                    /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input
                :type="isShowPassword ? 'text' : 'password'"
                :placeholder="$t('message.account.accountPlaceholder2')"
                v-model="ruleForm.password"
                autocomplete="off"
                size="large"
                @keyup.enter.native="onSignIn"
            >
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px;height: 24px"></el-icon>
                </template>
                <template #suffix>
                    <i
                        class="iconfont el-input__icon login-content-password"
                        :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
                        @click="isShowPassword = !isShowPassword"
                    >
                    </i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode">忘记密码？</span>
        </el-form-item>
        <el-form-item class="login-animation4">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
                <span>登录系统</span>
            </el-button>
        </el-form-item>
    </el-form>
            >
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"
                        ><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px"
                    /></el-icon>
                </template>
                <template #suffix>
                    <i
                        class="iconfont el-input__icon login-content-password"
                        :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
                        @click="isShowPassword = !isShowPassword"
                    >
                    </i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode">忘记密码？</span>
        </el-form-item>
        <el-form-item class="login-animation4">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
                <span>登录系统</span>
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
@@ -55,154 +66,155 @@
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
import {useUserInfo} from "/@/stores/userInfo";
import { useUserInfo } from '/@/stores/userInfo';

export default defineComponent({
    name: 'accountLogin',
    setup() {
        const { t } = useI18n();
        const userInfo = useUserInfo()
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            isShowPassword: false,
            ruleForm: {
                username: '',
                password: '',
            },
            loading: {
                signIn: false,
            },
        });
        // 时间获取
        const currentTime = computed(() => {
            return formatAxis(new Date());
        });
        // 登录
        const onSignIn = async () => {
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm)
            if(res.data.code === '200'){
                userInfo.setUserInfos(res.data.data)
                Session.set('token', res.data.data.accessToken);
                Session.set('projectId','');
                Session.set('uid',res.data.data.uid);
                signInSuccess();
            }else{
                state.loading.signIn = false
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
            }
            // Session.set('token', Math.random().toString(36).substr(0));
            // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
            // Cookies.set('userName', state.ruleForm.username);
            // if (!themeConfig.value.isRequestRoutes) {
            //     // 前端控制路由，2、请注意执行顺序
            //     await initFrontEndControlRoutes();
            //     signInSuccess();
            // } else {
            //     // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
            //     // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
            //     await initBackEndControlRoutes();
            //     // 执行完 initBackEndControlRoutes，再执行 signInSuccess
            //     signInSuccess();
            // }
        };
        // 登录成功后的跳转
        const signInSuccess = async () => {
            // 初始化登录成功时间问候语
            let currentTimeInfo = currentTime.value;
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            if (route.query?.redirect) {
                router.push('/homeMenu');
                // router.push({
                //     path: <string>route.query?.redirect,
                //     query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
                // });
            } else {
                router.push('/loginPage');
            }
            state.loading.signIn = true;
            const signInText = t('message.signInText');
            ElMessage.success(`${currentTimeInfo}，${signInText}`);
            // 登录成功提示
            // 关闭 loading
            // 添加 loading，防止第一次进入界面时出现短暂空白
            // NextLoading.start();
        };
        return {
            onSignIn,
            ...toRefs(state),
        };
    },
    name: 'accountLogin',
    setup() {
        const { t } = useI18n();
        const userInfo = useUserInfo();
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            isShowPassword: false,
            ruleForm: {
                username: '',
                password: ''
            },
            loading: {
                signIn: false
            }
        });
        // 时间获取
        const currentTime = computed(() => {
            return formatAxis(new Date());
        });
        // 登录
        const onSignIn = async () => {
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
            if (res.data.code === '200') {
                await userInfo.setUserInfos(res.data.data);
                Session.set('token', res.data.data.accessToken);
                Session.set('projectId', '');
                Session.set('uid', res.data.data.uid);
                await signInSuccess();
            } else {
                state.loading.signIn = false;
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
            state.loading.signIn = false;
            // Session.set('token', Math.random().toString(36).substr(0));
            // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
            // Cookies.set('userName', state.ruleForm.username);
            // if (!themeConfig.value.isRequestRoutes) {
            //     // 前端控制路由，2、请注意执行顺序
            //     await initFrontEndControlRoutes();
            //     signInSuccess();
            // } else {
            //     // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
            //     // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
            //     await initBackEndControlRoutes();
            //     // 执行完 initBackEndControlRoutes，再执行 signInSuccess
            //     signInSuccess();
            // }
        };
        // 登录成功后的跳转
        const signInSuccess = async () => {
            // 初始化登录成功时间问候语
            let currentTimeInfo = currentTime.value;
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            if (route.query?.redirect) {
                router.push('/homeMenu');
                // router.push({
                //     path: <string>route.query?.redirect,
                //     query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
                // });
            } else {
                router.push('/loginPage');
            }
            state.loading.signIn = true;
            const signInText = t('message.signInText');
            ElMessage.success(`${currentTimeInfo}，${signInText}`);
            // 登录成功提示
            // 关闭 loading
            // 添加 loading，防止第一次进入界面时出现短暂空白
            // NextLoading.start();
        };
        return {
            onSignIn,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
.login-content-form {
    margin-top: 40px;
    width: 420px;
    margin-top: 40px;
    width: 420px;

    .el-input::v-deep .el-input__wrapper{
        height: 56px;
        border-radius: 28px;
        padding: 0 30px;
        background: #F2F2F2;
        &:focus-within{
            border: 1px solid #2053D7;
        }
    }
    @for $i from 1 through 4 {
        .login-animation#{$i} {
            opacity: 0;
            animation-name: error-num;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            animation-delay: calc($i/10) + s;
        }
    }
    .codeDeal::v-deep .el-form-item__content{
        display: flex;
        justify-content: space-between;
    .el-input::v-deep .el-input__wrapper {
        height: 56px;
        border-radius: 28px;
        padding: 0 30px;
        background: #f2f2f2;
        &:focus-within {
            border: 1px solid #2053d7;
        }
    }
    @for $i from 1 through 4 {
        .login-animation#{$i} {
            opacity: 0;
            animation-name: error-num;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            animation-delay: calc($i/10) + s;
        }
    }
    .codeDeal::v-deep .el-form-item__content {
        display: flex;
        justify-content: space-between;

        .forgetCode{
            color: #2053D7;
            cursor: pointer;
        }
    }
    .login-content-password {
        width: 100%;
        display: inline-block;
        width: 20px;
        cursor: pointer;
        &:hover {
            color: #909399;
        }
    }
    .login-content-code {
        width: 100%;
        padding: 0;
        font-weight: bold;
        letter-spacing: 5px;
    }
    .login-content-submit {
        width: 100%;
        height: 56px;
        font-size: 16px;
        border-radius: 28px;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background: #2053D7;
        transition: .3s;
        &:hover{
            letter-spacing: 6px;
            background: #4E7AEC;
        }
    }
        .forgetCode {
            color: #2053d7;
            cursor: pointer;
        }
    }
    .login-content-password {
        width: 100%;
        display: inline-block;
        width: 20px;
        cursor: pointer;
        &:hover {
            color: #909399;
        }
    }
    .login-content-code {
        width: 100%;
        padding: 0;
        font-weight: bold;
        letter-spacing: 5px;
    }
    .login-content-submit {
        width: 100%;
        height: 56px;
        font-size: 16px;
        border-radius: 28px;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background: #2053d7;
        transition: 0.3s;
        &:hover {
            letter-spacing: 6px;
            background: #4e7aec;
        }
    }
}
</style>

 src/views/system/department/component/deptDialog.vue

@@ -1,154 +1,152 @@
<template>
    <div class="system-add-dept-container">
        <el-dialog :title="title" v-model="isShowDialog" width="600px">
            <el-form :model="departmentForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级部门">
                            <el-cascader
                                :options="deptData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="departmentForm.parentDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门名称">
                            <el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门描述">
                            <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div class="system-add-dept-container">
        <el-dialog :title="title" v-model="isShowDialog" width="600px">
            <el-form :model="departmentForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级部门">
                            <el-cascader
                                :options="deptData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="departmentForm.parentDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门名称">
                            <el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门描述">
                            <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { departmentApi } from "/@/api/department";
import { departmentApi } from '/@/api/department';

// 定义接口来定义对象的类型
interface TableDataRow {
    name:string,
    info:string,
    parentId:string,
    id:number,
    name: string;
    info: string;
    parentId: string;
    id: number;
}
interface DeptSate {
    title:string;
    isShowDialog: boolean;
    departmentForm: {
        depName:string,
        depInfo:string,
        parentDepId:string
    };
    deptData: Array<TableDataRow>;
    title: string;
    isShowDialog: boolean;
    departmentForm: {
        depName: string;
        depInfo: string;
        parentDepId: string;
    };
    deptData: Array<TableDataRow>;
}

export default defineComponent({
    name: 'systemAddDept',
    setup(prop,context) {
        const state = reactive<DeptSate>({
            title:'',
            isShowDialog: false,
            departmentForm: {
                depName:'',
                parentDepId:'',
                depInfo:'',
            },
            deptData: [], // 部门数据
        });
        // 打开弹窗
        const openDialog = (type:string, value: any,departmentList: []) => {
            state.isShowDialog = true;
            state.deptData = JSON.parse(JSON.stringify(departmentList))
            if(type === '新增'){
                state.title = '新增部门'
                state.departmentForm = {
                    depName:'',
                    parentDepId:'',
                    depInfo:'',
                }
            }else{
                state.title = '修改部门'
                state.departmentForm = JSON.parse(JSON.stringify(value))
            }
        };
        // 关闭弹窗
        const closeDialog = () => {
            state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = async () => {
            if(state.title === '新增部门'){
                let res = await departmentApi().addDepartment(state.departmentForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'部门新增成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getDepartmentList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }else{
                let res = await departmentApi().modDepartment(state.departmentForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'部门修改成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getDepartmentList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }
        };
        // 初始化部门数据
        const initTableData = () => {

        };
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            ...toRefs(state),
        };
    },
    name: 'systemAddDept',
    setup(prop, context) {
        const state = reactive<DeptSate>({
            title: '',
            isShowDialog: false,
            departmentForm: {
                depName: '',
                parentDepId: '',
                depInfo: ''
            },
            deptData: [] // 部门数据
        });
        // 打开弹窗
        const openDialog = (type: string, value: any, departmentList: []) => {
            state.isShowDialog = true;
            state.deptData = JSON.parse(JSON.stringify(departmentList));
            if (type === '新增') {
                state.title = '新增部门';
                state.departmentForm = {
                    depName: '',
                    parentDepId: '',
                    depInfo: ''
                };
            } else {
                state.title = '修改部门';
                state.departmentForm = JSON.parse(JSON.stringify(value));
            }
        };
        // 关闭弹窗
        const closeDialog = () => {
            state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = async () => {
            if (state.title === '新增部门') {
                let res = await departmentApi().addDepartment(state.departmentForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '部门新增成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getDepartmentList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await departmentApi().modDepartment(state.departmentForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '部门修改成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getDepartmentList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        };
        // 初始化部门数据
        const initTableData = () => {};
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/dic/index.vue

@@ -1,57 +1,102 @@
<template>
    <div class="system-dic-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" placeholder="请输入字典名称" style="max-width: 180px"> </el-input>
                <el-button size="default" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增字典
                </el-button>
            </div>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="dicName" label="字典名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="fieldName" label="字段名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="字典状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="describe" label="字典描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="tableData.param.pageNum"
                background
                v-model:page-size="tableData.param.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
            >
            </el-pagination>
        </el-card>
        <AddDic ref="addDicRef" />
        <EditDic ref="editDicRef" />
    </div>
    <div class="system-dic-container">
        <el-card shadow="hover">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                    <el-card class="box-card">
                        <div class="box-card-header">
                            <span>字典类型</span>
                        </div>
                        <div class="box-card-body">
                            <div class="box-card-body-filter">
                                <el-input class="input-box" placeholder="输入名称" @keyup.enter.native="queryHandle('dictionaryType')" />
                                <el-button type="success" @click="showCreateHandle('dictionaryType')">新增</el-button>
                                <el-button type="primary" @click="showCreateHandle('dictionaryType')">搜索</el-button>
                            </div>
                            <div class="table-content">
                                <el-table :data="tableData.data" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="50" />
                                    <el-table-column prop="dicName" label="字典名称" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="fieldName" label="字段名" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="describe" label="字典描述" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作" width="100">
                                        <template #default="scope">
                                            <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
                                            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <br />
                                <el-pagination
                                    @size-change="onHandleSizeChange"
                                    @current-change="onHandleCurrentChange"
                                    class="page-position"
                                    :pager-count="5"
                                    :page-sizes="[10, 20, 30]"
                                    v-model:current-page="tableData.param.pageNum"
                                    background
                                    v-model:page-size="tableData.param.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="tableData.total"
                                >
                                </el-pagination>
                                <br />
                                <br />
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                    <el-card class="box-card">
                        <div class="box-card-header">
                            <span>字典详情 </span>
                        </div>
                        <div class="box-card-body">
                            <div class="box-card-body-filter">
                                <el-input class="input-box" placeholder="输入名称" @keyup.enter.native="queryHandle('dictionaryType')" />
                                <el-button type="success" @click="showCreateHandle('dictionaryType')">新增</el-button>
                                <el-button type="primary" @click="showCreateHandle('dictionaryType')">搜索</el-button>
                            </div>
                            <div class="table-content">
                                <el-table :data="tableData.data" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="50" />
                                    <el-table-column prop="dicName" label="字典名称" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="fieldName" label="字段名" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="describe" label="字典描述" show-overflow-tooltip></el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作" width="100">
                                        <template #default="scope">
                                            <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
                                            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <br />
                                <el-pagination
                                    @size-change="onHandleSizeChange"
                                    @current-change="onHandleCurrentChange"
                                    class="page-position"
                                    :pager-count="5"
                                    :page-sizes="[10, 20, 30]"
                                    v-model:current-page="tableData.param.pageNum"
                                    background
                                    v-model:page-size="tableData.param.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="tableData.total"
                                >
                                </el-pagination>
                                <br />
                                <br />
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <AddDic ref="addDicRef" />
        <EditDic ref="editDicRef" />
    </div>
</template>

<script lang="ts">
@@ -62,98 +107,114 @@

// 定义接口来定义对象的类型
interface TableDataRow {
    dicName: string;
    fieldName: string;
    describe: string;
    status: boolean;
    createTime: string;
    dicName: string;
    fieldName: string;
    describe: string;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    tableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
        param: {
            pageNum: number;
            pageSize: number;
        };
    };
    tableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
        param: {
            pageNum: number;
            pageSize: number;
        };
    };
}

export default defineComponent({
    name: 'systemDic',
    components: { AddDic, EditDic },
    setup() {
        const addDicRef = ref();
        const editDicRef = ref();
        const state = reactive<TableDataState>({
            tableData: {
                data: [],
                total: 0,
                loading: false,
                param: {
                    pageNum: 1,
                    pageSize: 10,
                },
            },
        });
        // 初始化表格数据
        const initTableData = () => {
            const data: Array<TableDataRow> = [];
            for (let i = 0; i < 2; i++) {
                data.push({
                    dicName: i === 0 ? '角色标识' : '用户性别',
                    fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
                    describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
                    status: true,
                    createTime: new Date().toLocaleString(),
                });
            }
            state.tableData.data = data;
            state.tableData.total = state.tableData.data.length;
        };
        // 打开新增字典弹窗
        const onOpenAddDic = () => {
            addDicRef.value.openDialog();
        };
        // 打开修改字典弹窗
        const onOpenEditDic = (row: TableDataRow) => {
            editDicRef.value.openDialog(row);
        };
        // 删除字典
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.tableData.param.pageSize = val;
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.tableData.param.pageNum = val;
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            addDicRef,
            editDicRef,
            onOpenAddDic,
            onOpenEditDic,
            onRowDel,
            onHandleSizeChange,
            onHandleCurrentChange,
            ...toRefs(state),
        };
    },
    name: 'systemDic',
    components: { AddDic, EditDic },
    setup() {
        const addDicRef = ref();
        const editDicRef = ref();
        const state = reactive<TableDataState>({
            tableData: {
                data: [],
                total: 0,
                loading: false,
                param: {
                    pageNum: 1,
                    pageSize: 10
                }
            }
        });
        // 初始化表格数据
        const initTableData = () => {
            const data: Array<TableDataRow> = [];
            for (let i = 0; i < 2; i++) {
                data.push({
                    dicName: i === 0 ? '角色标识' : '用户性别',
                    fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
                    describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
                    status: true,
                    createTime: new Date().toLocaleString()
                });
            }
            state.tableData.data = data;
            state.tableData.total = state.tableData.data.length;
        };
        // 打开新增字典弹窗
        const onOpenAddDic = () => {
            addDicRef.value.openDialog();
        };
        // 打开修改字典弹窗
        const onOpenEditDic = (row: TableDataRow) => {
            editDicRef.value.openDialog(row);
        };
        // 删除字典
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.tableData.param.pageSize = val;
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.tableData.param.pageNum = val;
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            addDicRef,
            editDicRef,
            onOpenAddDic,
            onOpenEditDic,
            onRowDel,
            onHandleSizeChange,
            onHandleCurrentChange,
            ...toRefs(state)
        };
    }
});
</script>
<style scoped lang="scss">
.box-card {
    padding: 0 !important;
    .box-card-header {
        padding-bottom: 18px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 16px;
        width: 100%;
    }
    .box-card-body {
        padding-top: 18px;
    }
}
</style>

 src/views/system/menu/component/menuDialog.vue

@@ -18,40 +18,39 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单名称">
                            <el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
                            <el-input v-model.trim="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="路由名称">
                            <el-input v-model="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
                            <el-input v-model.trim="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="路由路径">
                            <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
                            <el-input v-model.trim="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="重定向">
                            <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
                            <el-input v-model.trim="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单图标">
                            <el-input placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
                            <!--                            <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />-->
                            <el-input placeholder="请输入菜单图标" v-model.trim="ruleForm.meta.icon" type="all" />
                            <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="组件路径">
                            <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
                            <el-input v-model.trim="ruleForm.component" placeholder="组件路径" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="权限标识">
                            <el-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
                                <el-option label="admin" value="admin"></el-option>
                                <el-option label="common" value="common"></el-option>
                                <el-option v-for="item in roleList" :key="item.roleId" :value="item.roleCode" :label="item.roleName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
@@ -86,7 +85,7 @@
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
@@ -137,6 +136,7 @@
                },
                btnPower: '' // 菜单类型为按钮时，权限标识
            },
            roleList: [],
            menuData: [], // 上级菜单数据
            projectList: []
        });
@@ -152,8 +152,9 @@
            return arr;
        };
        // 打开弹窗
        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
        const openDialog = (type: string, value: any, projectList: any, projectId: string, roleList: []) => {
            state.projectList = JSON.parse(JSON.stringify(projectList));
            state.roleList = roleList;
            state.isShowDialog = true;
            if (type === '新增') {
                state.buttonName = '新增';

 src/views/system/menu/index.vue

@@ -1,175 +1,205 @@
<template>
    <div class="system-menu-container">
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
                    <el-option
                            v-for="item in projectList"
                            :key="item.key"
                            :value="item.id"
                            :label="item.name"
                    >
                    </el-option>
                </el-select>
                <el-button size="default" type="primary" class="ml10" @click="getMenuList">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增菜单
                </el-button>
            </div>
            <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column label="菜单名称" show-overflow-tooltip>
                    <template #default="scope">
                        <SvgIcon :name="scope.row.meta.icon" />
                        <span class="ml10">{{ scope.row.meta.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
                <el-table-column label="组件路径" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.component }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限标识" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.meta.roles }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" show-overflow-tooltip width="80">
                    <template #default="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                <el-table-column label="类型" show-overflow-tooltip width="80">
                    <template #default="scope">
                        <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <menuDialog ref="menuDialog"  @getMenuList="getMenuList"/>
    </div>
    <div class="system-menu-container">
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
                    <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
                </el-select>
                <el-button size="default" type="primary" class="ml10" @click="getMenuList">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增菜单
                </el-button>
            </div>
            <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column label="菜单名称" show-overflow-tooltip>
                    <template #default="scope">
                        <SvgIcon :name="scope.row.meta.icon" />
                        <span class="ml10">{{ scope.row.meta.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
                <el-table-column label="组件路径" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.component }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限标识" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ parseRole(scope.row.meta.roles) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" show-overflow-tooltip width="80">
                    <template #default="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                <el-table-column label="类型" show-overflow-tooltip width="80">
                    <template #default="scope">
                        <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <menuDialog ref="menuDialog" @getMenuList="getMenuList" />
    </div>
</template>

<script lang="ts">
    import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
    import { RouteRecordRaw } from 'vue-router';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import { storeToRefs } from 'pinia';
    import { useRoutesList } from '/@/stores/routesList';
    import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
    import {useMenuApi} from "/@/api/menu";
    import {Session} from "/@/utils/storage";
    import pinia from "/@/stores";
    import {dynamicRoutes} from "/@/router/route";
    import {useUserInfo} from "/@/stores/userInfo";
    import {initBackEndControlRoutes} from "/@/router/backEnd";
import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
import { useMenuApi } from '/@/api/menu';
import { Session } from '/@/utils/storage';
import pinia from '/@/stores';
import { dynamicRoutes } from '/@/router/route';
import { useUserInfo } from '/@/stores/userInfo';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useRoleApi } from '/@/api/role';

    export default defineComponent({
        name: 'systemMenu',
        components: { menuDialog },
        setup() {
            const menuDialog = ref();
            const storesRoutesList = useRoutesList();
            const state = reactive({
                projectId:'1',
                menuData:[],
                menuTableData:[],
                projectList:[
                    {id:'1',name:'基础数据权限管理系统',key:0},
                    {id:'2',name:'双重预防系统',key:1},
                    {id:'3',name:'系统2',key:2},
                    {id:'4',name:'系统3',key:3},
                    {id:'5',name:'系统4',key:4},
                    {id:'6',name:'应急管理系统',key:5},
                    {id:'7',name:'目标责任管理系统',key:6},
                    {id:'8',name:'事故管理系统',key:7},
                    {id:'9',name:'设备综合管控系统',key:8},
                ],
            });
            // // 获取 vuex 中的路由
            // const menuTableData = computed(() => {
            //     return routesList.value;
            // });
            // 打开新增菜单弹窗
            const onOpenMenuDialog = (type: string,value: any) => {
                menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
            };
            // 打开编辑菜单弹窗
            // 删除当前行
            const deleteMenu =  (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await useMenuApi().deleteMenu({id:row.id})
                    if(res.data.code ==='200'){
                        ElMessage({
                            type:'success',
                            duration:2000,
                            message:'删除成功'
                        })
                        await getMenuList()
                        if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }).catch(() => {});
            };
            const getMenuList = async () => {
                let res = await useMenuApi().getMenuAdmin(state.projectId)
                if(res.data.code === '200'){
                    state.menuTableData = res.data.data
                    if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            };
export default defineComponent({
    name: 'systemMenu',
    components: { menuDialog },
    filters: {
        parseRole: (roles: Array<string>) => {
            return ['1', '2'];
        }
    },
    setup() {
        const menuDialog = ref();
        const storesRoutesList = useRoutesList();
        const state = reactive({
            projectId: '1',
            menuData: [],
            roleList: [],
            menuTableData: [],
            projectList: [
                { id: '1', name: '基础数据权限管理系统', key: 0 },
                { id: '2', name: '双重预防系统', key: 1 },
                { id: '3', name: '特殊作业系统', key: 2 },
                { id: '4', name: '智能巡检系统', key: 3 },
                { id: '5', name: '安全风险综合预警预报平台', key: 4 },
                { id: '6', name: '应急管理系统', key: 5 },
                { id: '7', name: '目标责任管理系统', key: 6 },
                { id: '8', name: '事故管理系统', key: 7 },
                { id: '9', name: '设备综合管控系统', key: 8 },
                { id: '10', name: '安全知识图谱系统', key: 9 },
                { id: '11', name: '危险化学品全生命周期安全', key: 10 }
            ]
        });
        // // 获取 vuex 中的路由
        // const menuTableData = computed(() => {
        //     return routesList.value;
        // });
        // 打开新增菜单弹窗
        const onOpenMenuDialog = (type: string, value: any) => {
            menuDialog.value.openDialog(type, value, state.projectList, state.projectId, state.roleList);
        };

            const getProjectList = async () => {
                let res = await useMenuApi().getProjectList()
                if(res.data.code === '200'){
                    state.menuTableData = res.data.data
                    if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            };
        // 删除当前行
        const deleteMenu = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await useMenuApi().deleteMenu({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await getMenuList();
                        if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        const getMenuList = async () => {
            let res = await useMenuApi().getMenuAdmin(state.projectId);
            if (res.data.code === '200') {
                state.menuTableData = res.data.data;
                if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

            onMounted( () => {
                getMenuList()
            });
            return {
                getMenuList,
                menuDialog,
                onOpenMenuDialog,
                deleteMenu,
                ...toRefs(state),
            };
        },
    });
        const getRoleList = async () => {
            let res = await useRoleApi().getRoleList();
            if (res.data.code === '200') {
                state.roleList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getProjectList = async () => {
            let res = await useMenuApi().getProjectList();
            if (res.data.code === '200') {
                state.menuTableData = res.data.data;
                if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const parseRole = (roles: Array<string>) => {
            let role = roles.map((item) => {
                for (let i in state.roleList) {
                    if (state.roleList[i].roleCode === item) {
                        return state.roleList[i].roleName;
                    }
                }
            });
            return role;
        };

        onMounted(() => {
            getMenuList();
            getRoleList();
        });
        return {
            parseRole,
            getMenuList,
            menuDialog,
            onOpenMenuDialog,
            deleteMenu,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/role/component/roleDialog.vue

@@ -1,150 +1,150 @@
<template>
    <div class="system-add-role-container">
        <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
            <el-form :model="roleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色名称">
                            <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色标识">
                            <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="角色描述">
                            <el-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
                    <el-button type="primary"  @click="onSubmit" size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div class="system-add-role-container">
        <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
            <el-form :model="roleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色名称">
                            <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色标识">
                            <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="角色描述">
                            <el-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" v-throttle size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, defineComponent } from 'vue';
import {useRoleApi} from "/@/api/role";
import { useRoleApi } from '/@/api/role';

// 定义接口来定义对象的类型
interface MenuDataTree {
    id: number;
    label: string;
    children?: MenuDataTree[];
    id: number;
    label: string;
    children?: MenuDataTree[];
}
interface RoleState {
    title:string,
    buttonName:string,
    isShowRoleDialog: boolean;
    roleForm: {
        roleName: string;
    title: string;
    buttonName: string;
    isShowRoleDialog: boolean;
    roleForm: {
        roleName: string;
        roleCode: string;
        roleInfo: string;
    };
    menuData: Array<MenuDataTree>;
    menuProps: {
        children: string;
        label: string;
    };
    };
    menuData: Array<MenuDataTree>;
    menuProps: {
        children: string;
        label: string;
    };
}

export default defineComponent({
    name: 'systemAddRole',
    setup(prop,context) {
        const state = reactive<RoleState>({
            isShowRoleDialog: false,
            title:'',
            buttonName:'',
            roleForm: {
    name: 'systemAddRole',
    setup(prop, context) {
        const state = reactive<RoleState>({
            isShowRoleDialog: false,
            title: '',
            buttonName: '',
            roleForm: {
                roleName: '', // 角色名称
                roleCode: '', // 角色标识
                roleInfo: '', // 排序
            },
            menuData: [],
            menuProps: {
                children: 'children',
                label: 'label',
            },
        });
        // 打开弹窗
        const openDialog = (type: string, value: any) => {
            state.isShowRoleDialog = true;
            if(type === '新增'){
                state.title = '新增角色'
                state.buttonName = '新增'
                state.roleForm = {
                    roleName:'',
                    roleCode:'',
                    roleInfo:'',
                }
            }else{
                state.title = '修改角色'
                state.buttonName = '修改'
                state.roleForm = JSON.parse(JSON.stringify(value))
            }
        };
        // 新增
        const onSubmit = async () => {
            if(state.title === '新增角色'){
                let res = await useRoleApi().addRole(state.roleForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'角色新增成功',
                        duration:2000
                    })
                    state.isShowRoleDialog = false
                    context.emit('refreshRoleList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }else{
                let res = await useRoleApi().modRole(state.roleForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'角色修改成功',
                        duration:2000
                    })
                    state.isShowRoleDialog = false
                    context.emit('refreshRoleList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }
        };
        // 获取菜单结构数据
        return {
            onSubmit,
            openDialog,
            ...toRefs(state),
        };
    },
                roleInfo: '' // 排序
            },
            menuData: [],
            menuProps: {
                children: 'children',
                label: 'label'
            }
        });
        // 打开弹窗
        const openDialog = (type: string, value: any) => {
            state.isShowRoleDialog = true;
            if (type === '新增') {
                state.title = '新增角色';
                state.buttonName = '新增';
                state.roleForm = {
                    roleName: '',
                    roleCode: '',
                    roleInfo: ''
                };
            } else {
                state.title = '修改角色';
                state.buttonName = '修改';
                state.roleForm = JSON.parse(JSON.stringify(value));
            }
        };
        // 新增
        const onSubmit = async () => {
            if (state.title === '新增角色') {
                let res = await useRoleApi().addRole(state.roleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '角色新增成功',
                        duration: 2000
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await useRoleApi().modRole(state.roleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '角色修改成功',
                        duration: 2000
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        };
        // 获取菜单结构数据
        return {
            onSubmit,
            openDialog,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
.system-add-role-container {
    .menu-data-tree {
        width: 100%;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
        padding: 5px;
    }
    .menu-data-tree {
        width: 100%;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
        padding: 5px;
    }
}
</style>

 src/views/system/user/component/userDialog.vue

@@ -1,221 +1,213 @@
<template>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
            <el-form :model="userForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户名称">
                            <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户昵称">
                            <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="关联角色">
                            <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
                                <el-option
                                    v-for="item in roleData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="部门">
                            <el-cascader
                                :options="departmentData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="userForm.depId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号">
                            <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="邮箱">
                            <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="性别">
                            <el-select v-model="userForm.sex" placeholder="请选择" clearable class="w100">
                                <el-option
                                v-for="item in sexList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户密码">
                            <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户过期">
                            <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--                        <el-form-item label="用户状态">-->
<!--                            <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
            <el-form :model="userForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户名称">
                            <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户昵称">
                            <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="关联角色">
                            <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
                                <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="部门">
                            <el-cascader
                                :options="departmentData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="userForm.depId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号">
                            <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="身份证">
                            <el-input v-model="userForm.identify" placeholder="请输入身份证" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="邮箱">
                            <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="性别">
                            <el-select v-model="userForm.gender" placeholder="请选择" clearable class="w100">
                                <el-option v-for="item in sexList" :key="item.id" :value="item.id" :label="item.name"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户密码">
                            <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户过期">
                            <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--                        <el-form-item label="用户状态">-->
                    <!--                            <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">新 增</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {userApi} from "/@/api/user";
import { userApi } from '/@/api/user';

// 定义接口来定义对象的类型
interface DeptData {
}
interface roleData{

}
interface sexData{

}
interface DeptData {}
interface roleData {}
interface sexData {}
interface UserState {
    title:string,
    isShowUserDialog: boolean;
    userForm: {
        username: string;
        realName: string;
        roleId: number | null;
        depId: number | null;
        phone: string;
        email: string;
        sex: number | null;
        password: string;
        expireTime: string;
        status: number;
    };
    departmentData: Array<DeptData>;
    roleData: Array<roleData>;
    sexList:Array<sexData>,
    title: string;
    isShowUserDialog: boolean;
    userForm: {
        username: string;
        realName: string;
        roleId: number | null;
        depId: number | null;
        phone: string;
        email: string;
        gender: number | null;
        password: string;
        expireTime: string;
        status: number;
        identify: string;
    };
    departmentData: Array<DeptData>;
    roleData: Array<roleData>;
    sexList: Array<sexData>;
}

export default defineComponent({
    name: 'user',
    setup(props,context) {
        const state = reactive<UserState>({
            title:'',
            isShowUserDialog: false,
            userForm: {
                username: '', // 账户名称
                realName: '', // 用户昵称
                roleId: null, // 关联角色
                depId:null, // 部门
                phone: '', // 手机号
                email: '', // 邮箱
                sex: null, // 性别
                password: '', // 账户密码
                expireTime: '', // 账户过期
                status: 1, // 用户状态
            },
            departmentData: [], // 部门数据
            roleData:[],//角色数据
            sexList:[{id:1,name:'男'},{id:0,name:'女'}]
        });
        // 打开弹窗
        const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
            state.isShowUserDialog = true;
            state.departmentData = departmentList;
            state.roleData = roleList;
            if(type === '新增'){
                state.title = '新增用户'
                state.userForm = {
                    username: '',
                    realName: '',
                    roleId: null,
                    depId: null,
                    phone: '',
                    email: '',
                    sex: null,
                    password: '',
                    expireTime: '',
                    status: 1,
                }
            }else{
                state.title = '修改用户'
                state.userForm = JSON.parse(JSON.stringify(value))
            }
        };
    name: 'user',
    setup(props, context) {
        const state = reactive<UserState>({
            title: '',
            isShowUserDialog: false,
            userForm: {
                username: '', // 账户名称
                realName: '', // 用户昵称
                roleId: null, // 关联角色
                depId: null, // 部门
                phone: '', // 手机号
                email: '', // 邮箱
                identify: '',
                gender: null, // 性别
                password: '', // 账户密码
                expireTime: '', // 账户过期
                status: 1 // 用户状态
            },
            departmentData: [], // 部门数据
            roleData: [], //角色数据
            sexList: [
                { id: 1, name: '男' },
                { id: 0, name: '女' }
            ]
        });
        // 打开弹窗
        const openDialog = (type: string, value: any, departmentList: [], roleList: []) => {
            state.isShowUserDialog = true;
            state.departmentData = departmentList;
            state.roleData = roleList;
            if (type === '新增') {
                state.title = '新增用户';
                state.userForm = {
                    username: '',
                    realName: '',
                    roleId: null,
                    depId: null,
                    phone: '',
                    email: '',
                    identify: '',
                    gender: null,
                    password: '',
                    expireTime: '',
                    status: 1
                };
            } else {
                state.title = '修改用户';
                state.userForm = JSON.parse(JSON.stringify(value));
            }
        };

        // 新增修改
        const onSubmit = async () => {
            if (state.title === '新增用户') {
                let res = await userApi().addUser(state.userForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '用户新增成功',
                        duration: 2000
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await userApi().modUser(state.userForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '用户修改成功',
                        duration: 2000
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        };

        // 新增修改
        const onSubmit = async () => {
            if(state.title === '新增用户'){
                let res = await userApi().addUser(state.userForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'用户新增成功',
                        duration:2000
                    })
                    state.isShowUserDialog = false;
                    context.emit('getUserList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }else{
                let res = await userApi().modUser(state.userForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'用户修改成功',
                        duration:2000
                    })
                    state.isShowUserDialog = false;
                    context.emit('getUserList')
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }
        };

        // 页面加载时
        onMounted(() => {
        });
        return {
            openDialog,
            onSubmit,
            ...toRefs(state),
        };
    },
        // 页面加载时
        onMounted(() => {});
        return {
            openDialog,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/user/index.vue

@@ -1,206 +1,218 @@
<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                <el-button size="default" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增用户
                </el-button>
            </div>
            <el-table :data="userTableData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
                <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
                <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改',scope.row)">修改</el-button>
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="userTableData.listQuery.pageIndex"
                background
                v-model:page-size="userTableData.listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="userTableData.total"
            >
            </el-pagination>
        </el-card>
        <userDialog ref="userRef" @getUserList = "initUserTableData"/>
    </div>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                <el-button size="default" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增用户
                </el-button>
            </div>
            <el-table :data="userTableData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
                <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
                <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button
                            :disabled="scope.row.userName === 'admin'"
                            size="small"
                            text
                            type="primary"
                            @click="onOpenUserDialog('修改', scope.row)"
                            >修改</el-button
                        >
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="userTableData.listQuery.pageIndex"
                background
                v-model:page-size="userTableData.listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="userTableData.total"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <userDialog ref="userRef" @getUserList="initUserTableData" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import userDialog from '/@/views/system/user/component/userDialog.vue';
import {userApi} from "/@/api/user";
import {departmentApi} from "/@/api/department";
import {useRoleApi} from "/@/api/role";
import { userApi } from '/@/api/user';
import { departmentApi } from '/@/api/department';
import { useRoleApi } from '/@/api/role';

// 定义接口来定义对象的类型
interface TableDataRow {
    userName: string;
    userNickname: string;
    roleSign: string;
    department: string[];
    phone: string;
    email: string;
    sex: string;
    password: string;
    overdueTime: Date;
    status: boolean;
    describe: string;
    createTime: string;
    userName: string;
    userNickname: string;
    roleSign: string;
    department: string[];
    phone: string;
    email: string;
    sex: string;
    password: string;
    overdueTime: Date;
    status: boolean;
    describe: string;
    createTime: string;
}
interface DepartmentDataRow{

}
interface DepartmentDataRow {}
interface TableDataState {
    userTableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
        listQuery: {
            searchParams:{
                username:string,
                realName:string,
            },
            pageIndex: number;
            pageSize: number;
        };
    };
    departmentList:[];
    roleList:[];
    userTableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
        listQuery: {
            searchParams: {
                username: string;
                realName: string;
            };
            pageIndex: number;
            pageSize: number;
        };
    };
    departmentList: [];
    roleList: [];
}

export default defineComponent({
    name: 'systemUser',
    components: { userDialog },
    setup() {
        const userRef = ref();
        const state = reactive<TableDataState>({
            userTableData: {
                data: [],
                total: 0,
                loading: false,
                listQuery: {
                    searchParams:{
                        username:'',
                        realName:'',
                    },
                    pageIndex: 1,
                    pageSize: 10,
                },
            },
            departmentList:[],
            roleList:[],
        });
        // 初始化表格数据
        const initUserTableData = async () => {
            let res = await userApi().getUserList(state.userTableData.listQuery)
            if(res.data.code === '200'){
                state.userTableData.data = res.data.data;
                state.userTableData.total = res.data.data.length;
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
            }
        };
    name: 'systemUser',
    components: { userDialog },
    setup() {
        const userRef = ref();
        const state = reactive<TableDataState>({
            userTableData: {
                data: [],
                total: 0,
                loading: false,
                listQuery: {
                    searchParams: {
                        username: '',
                        realName: ''
                    },
                    pageIndex: 1,
                    pageSize: 10
                }
            },
            departmentList: [],
            roleList: []
        });
        // 初始化表格数据
        const initUserTableData = async () => {
            let res = await userApi().getUserList(state.userTableData.listQuery);
            if (res.data.code === '200') {
                state.userTableData.data = res.data.data;
                state.userTableData.total = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList()
            if(res.data.code === '200'){
                state.departmentList = res.data.data
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
            }
        }
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getRoleData = async () => {
            let res = await useRoleApi().getRoleList()
            if(res.data.code === '200'){
                state.roleList = res.data.data
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
            }
        }
        const getRoleData = async () => {
            let res = await useRoleApi().getRoleList();
            if (res.data.code === '200') {
                state.roleList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开新增修改用户弹窗
        const onOpenUserDialog = (type: string,value: any) => {
            userRef.value.openDialog(type, value, state.departmentList,state.roleList);
        };
        // 打开新增修改用户弹窗
        const onOpenUserDialog = (type: string, value: any) => {
            userRef.value.openDialog(type, value, state.departmentList, state.roleList);
        };

        // 删除用户
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                    ElMessage.success('删除成功');
            }).catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
        };
        // 页面加载时
        onMounted(() => {
            initUserTableData();
            getDepartmentData();
            getRoleData();
        });
        return {
            userRef,
            onOpenUserDialog,
            onRowDel,
            onHandleSizeChange,
            initUserTableData,
            onHandleCurrentChange,
            ...toRefs(state),
        };
    },
        // 删除用户
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.userTableData.listQuery.pageSize = val;
            initUserTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.userTableData.listQuery.pageIndex = val;
            initUserTableData();
        };
        // 页面加载时
        onMounted(() => {
            initUserTableData();
            getDepartmentData();
            getRoleData();
        });
        return {
            userRef,
            onOpenUserDialog,
            onRowDel,
            onHandleSizeChange,
            initUserTableData,
            onHandleCurrentChange,
            ...toRefs(state)
        };
    }
});
</script>

 tsconfig.json

@@ -64,7 +64,6 @@
        /* Experimental Options */
        "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
        // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

        /* Advanced Options */
        "skipLibCheck": true /* Skip type checking of declaration files. */,
        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */

 yarn.lock

@@ -16,13 +16,8 @@

"@ctrl/tinycolor@^3.4.1":
  "integrity" "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
  "resolved" "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
  "resolved" "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
  "version" "3.4.1"

"@element-plus/icons-vue@^1.1.4":
  "integrity" "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ=="
  "resolved" "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz"
  "version" "1.1.4"

"@element-plus/icons-vue@^2.0.6":
  "integrity" "sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew=="
@@ -44,17 +39,17 @@
    "minimatch" "^3.1.2"
    "strip-json-comments" "^3.1.1"

"@floating-ui/core@^0.7.1":
  "integrity" "sha512-grcqEmI8DTIolufpxhJagVeJmvloxBXE6xxSrVnSXz/Wz1uUIsC85ad+UNBqAoBOvzLxE42wvDj3YkmSGqWRxA=="
  "resolved" "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.1.tgz"
  "version" "0.7.1"
"@floating-ui/core@^0.7.3":
  "integrity" "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
  "resolved" "https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.3.tgz"
  "version" "0.7.3"

"@floating-ui/dom@^0.5.0":
  "integrity" "sha512-dkPSy5JPiQEtljc3VpG9lauYctxfLlqj/8N9f+lmsR92gQaSVMAWuBbFBH2keY5DmdQn3p4Dv1dQd+e8osH+/g=="
  "resolved" "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.1.tgz"
  "version" "0.5.1"
"@floating-ui/dom@^0.5.4":
  "integrity" "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg=="
  "resolved" "https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.4.tgz"
  "version" "0.5.4"
  dependencies:
    "@floating-ui/core" "^0.7.1"
    "@floating-ui/core" "^0.7.3"

"@humanwhocodes/config-array@^0.9.2":
  "integrity" "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw=="
@@ -265,7 +260,7 @@

"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
  "integrity" "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
  "resolved" "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
  "resolved" "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
  "version" "2.11.7"

"@transloadit/prettier-bytes@0.0.7":
@@ -311,14 +306,14 @@

"@types/lodash-es@*", "@types/lodash-es@^4.17.6":
  "integrity" "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg=="
  "resolved" "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz"
  "resolved" "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz"
  "version" "4.17.6"
  dependencies:
    "@types/lodash" "*"

"@types/lodash@*", "@types/lodash@^4.14.182":
  "integrity" "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
  "resolved" "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz"
  "resolved" "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.182.tgz"
  "version" "4.14.182"

"@types/node@*", "@types/node@^17.0.39":
@@ -335,6 +330,11 @@
  "integrity" "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ=="
  "resolved" "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz"
  "version" "1.13.0"

"@types/web-bluetooth@^0.0.14":
  "integrity" "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
  "resolved" "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz"
  "version" "0.0.14"

"@typescript-eslint/eslint-plugin@^5.27.0":
  "integrity" "sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ=="
@@ -559,24 +559,25 @@
  "resolved" "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz"
  "version" "3.2.36"

"@vueuse/core@^8.5.0":
  "integrity" "sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw=="
  "resolved" "https://registry.npmjs.org/@vueuse/core/-/core-8.5.0.tgz"
  "version" "8.5.0"
"@vueuse/core@^8.7.5":
  "integrity" "sha512-dE3/JgwqIHmmtmRBdZAnq87rZCSFbYVps2t3gWy9Jv/+Qp6sHSSKuPFtwguJVZ2OnaGnB/AMRmx4CuFRxFin3A=="
  "resolved" "https://registry.npmmirror.com/@vueuse/core/-/core-8.9.2.tgz"
  "version" "8.9.2"
  dependencies:
    "@vueuse/metadata" "8.5.0"
    "@vueuse/shared" "8.5.0"
    "@types/web-bluetooth" "^0.0.14"
    "@vueuse/metadata" "8.9.2"
    "@vueuse/shared" "8.9.2"
    "vue-demi" "*"

"@vueuse/metadata@8.5.0":
  "integrity" "sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g=="
  "resolved" "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.5.0.tgz"
  "version" "8.5.0"
"@vueuse/metadata@8.9.2":
  "integrity" "sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ=="
  "resolved" "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.9.2.tgz"
  "version" "8.9.2"

"@vueuse/shared@8.5.0":
  "integrity" "sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g=="
  "resolved" "https://registry.npmjs.org/@vueuse/shared/-/shared-8.5.0.tgz"
  "version" "8.5.0"
"@vueuse/shared@8.9.2":
  "integrity" "sha512-s4Nk82oheL5z1GywyGnqjob0MzbAt88olMZa0vgt/p3gcMsT8Ff7+SqmNgEFC6AAs6xiuhOAZpnew9Zs3d90yQ=="
  "resolved" "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.9.2.tgz"
  "version" "8.9.2"
  dependencies:
    "vue-demi" "*"

@@ -844,10 +845,10 @@
  "resolved" "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
  "version" "2.1.0"

"async-validator@^4.1.1":
  "integrity" "sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA=="
  "resolved" "https://registry.npmjs.org/async-validator/-/async-validator-4.1.1.tgz"
  "version" "4.1.1"
"async-validator@^4.2.5":
  "integrity" "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
  "resolved" "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz"
  "version" "4.2.5"

"asynckit@^0.4.0":
  "integrity" "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
@@ -1041,10 +1042,10 @@
    "es5-ext" "^0.10.50"
    "type" "^1.0.1"

"dayjs@^1.11.2":
  "integrity" "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz"
  "version" "1.11.2"
"dayjs@^1.11.3":
  "integrity" "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
  "resolved" "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz"
  "version" "1.11.3"

"debug@^4.1.1", "debug@^4.3.2", "debug@^4.3.4":
  "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
@@ -1120,20 +1121,20 @@
  "resolved" "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz"
  "version" "1.4.137"

"element-plus@^2.2.2":
  "integrity" "sha512-yGcj2Ayb0jZO1WbI51tHJ4efhlfWKlBqqGtWbzhq+tcpfaKzJZN+IHRouuFasqn0ZV3tWCDu1jggDR1+9y7XfQ=="
  "resolved" "https://registry.npmjs.org/element-plus/-/element-plus-2.2.2.tgz"
  "version" "2.2.2"
"element-plus@^2.2.9":
  "integrity" "sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ=="
  "resolved" "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.9.tgz"
  "version" "2.2.9"
  dependencies:
    "@ctrl/tinycolor" "^3.4.1"
    "@element-plus/icons-vue" "^1.1.4"
    "@floating-ui/dom" "^0.5.0"
    "@element-plus/icons-vue" "^2.0.6"
    "@floating-ui/dom" "^0.5.4"
    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
    "@types/lodash" "^4.14.182"
    "@types/lodash-es" "^4.17.6"
    "@vueuse/core" "^8.5.0"
    "async-validator" "^4.1.1"
    "dayjs" "^1.11.2"
    "@vueuse/core" "^8.7.5"
    "async-validator" "^4.2.5"
    "dayjs" "^1.11.3"
    "escape-html" "^1.0.3"
    "lodash" "^4.17.21"
    "lodash-es" "^4.17.21"
@@ -1224,8 +1225,8 @@
  "version" "3.1.1"

"escape-html@^1.0.3":
  "integrity" "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
  "resolved" "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
  "integrity" "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
  "resolved" "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz"
  "version" "1.0.3"

"escape-string-regexp@^4.0.0":
@@ -1730,12 +1731,12 @@

"lodash-es@*", "lodash-es@^4.17.21":
  "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
  "resolved" "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
  "resolved" "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz"
  "version" "4.17.21"

"lodash-unified@^1.0.2":
  "integrity" "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g=="
  "resolved" "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz"
  "resolved" "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz"
  "version" "1.0.2"

"lodash.camelcase@^4.3.0":
@@ -1804,7 +1805,7 @@

"memoize-one@^6.0.0":
  "integrity" "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
  "resolved" "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz"
  "version" "6.0.0"

"merge-stream@^2.0.0":
@@ -1903,7 +1904,7 @@

"normalize-wheel-es@^1.1.2":
  "integrity" "sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png=="
  "resolved" "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz"
  "resolved" "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz"
  "version" "1.1.2"

"nprogress@^0.2.0":
@@ -2415,9 +2416,9 @@
    "clipboard" "^2.0.6"

"vue-demi@*":
  "integrity" "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q=="
  "resolved" "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz"
  "version" "0.12.5"
  "integrity" "sha512-KP4lq9uSz0KZbaqCllRhnxMV3mYRsRWJfdsAhZyt5bV5O1RTpoeDptBRV9NOa/JgOpfaA9ane88VF7OjWNK/DA=="
  "resolved" "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.4.tgz"
  "version" "0.13.4"

"vue-eslint-parser@^9.0.1", "vue-eslint-parser@^9.0.2":
  "integrity" "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA=="