Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
58523423d5 | ||
|
|
c990ace677 | ||
|
|
0ceb87b234 | ||
|
|
2751816113 | ||
|
|
cd817c479e | ||
|
|
a3f4ea5af7 | ||
|
|
9a51189ec3 | ||
|
|
dda4b377fe | ||
|
|
6c2ef50d74 | ||
|
|
493456c839 | ||
|
|
d6ce344331 | ||
|
|
06dc2b3dd1 |
41
.dockerignore
Normal file
41
.dockerignore
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
### Java template
|
||||||
|
# Compiled class file
|
||||||
|
*.class
|
||||||
|
# Log file
|
||||||
|
*.log
|
||||||
|
# BlueJ files
|
||||||
|
*.ctxt
|
||||||
|
# Mobile Tools for Java (J2ME)
|
||||||
|
.mtj.tmp/
|
||||||
|
# Package Files #
|
||||||
|
*.jar
|
||||||
|
*.war
|
||||||
|
*.nar
|
||||||
|
*.ear
|
||||||
|
*.zip
|
||||||
|
*.tar.gz
|
||||||
|
*.rar
|
||||||
|
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
|
||||||
|
hs_err_pid*
|
||||||
|
### Maven template
|
||||||
|
target/
|
||||||
|
pom.xml.tag
|
||||||
|
pom.xml.releaseBackup
|
||||||
|
pom.xml.versionsBackup
|
||||||
|
pom.xml.next
|
||||||
|
release.properties
|
||||||
|
dependency-reduced-pom.xml
|
||||||
|
buildNumber.properties
|
||||||
|
.mvn/timing.properties
|
||||||
|
# https://github.com/takari/maven-wrapper#usage-without-binary-jar
|
||||||
|
.mvn/wrapper/maven-wrapper.jar
|
||||||
|
### Example user template template
|
||||||
|
### Example user template
|
||||||
|
# IntelliJ project files
|
||||||
|
.idea
|
||||||
|
*.iml
|
||||||
|
out
|
||||||
|
gen
|
||||||
|
!build
|
||||||
|
!default.conf
|
||||||
|
!nginx.conf
|
||||||
107
.drone.yml
Normal file
107
.drone.yml
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: fateverse-react
|
||||||
|
steps:
|
||||||
|
- name: build-package
|
||||||
|
image: registry.cn-chengdu.aliyuncs.com/claywang/node:16.20.0
|
||||||
|
volumes:
|
||||||
|
- name: cache
|
||||||
|
path: /drone/src/node_modules
|
||||||
|
- name: build
|
||||||
|
path: /app/build
|
||||||
|
commands:
|
||||||
|
- export CI=false
|
||||||
|
- mkdir -p /app/build/$DRONE_REPO_NAME
|
||||||
|
- rm -rf /app/build/$DRONE_REPO_NAME/*
|
||||||
|
- cp deployment.yml /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cp Dockerfile /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cp .dockerignore /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cp default.conf /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cp docker.sh /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cp nginx.conf /app/build/$DRONE_REPO_NAME/
|
||||||
|
- npm -v
|
||||||
|
- mkdir -p ./node_modules
|
||||||
|
- export NODE_MODULES_PATH=`pwd`/node_modules
|
||||||
|
- npm config set registry https://registry.npm.taobao.org
|
||||||
|
- set NODE_OPTIONS=--openssl-legacy-provider
|
||||||
|
- npm install
|
||||||
|
- npm run build
|
||||||
|
- ls /app/build/$DRONE_REPO_NAME/
|
||||||
|
- echo $NODE_MODULES_PATH
|
||||||
|
- cp -r dist /app/build/$DRONE_REPO_NAME
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- name: build-docker # 制作docker镜像
|
||||||
|
image: docker # 使用官方docker镜像
|
||||||
|
volumes: # 将容器内目录挂载到宿主机
|
||||||
|
- name: build
|
||||||
|
path: /app/build
|
||||||
|
- name: docker
|
||||||
|
path: /var/run/docker.sock # 挂载宿主机的docker
|
||||||
|
- name: config
|
||||||
|
path: /config
|
||||||
|
environment: # 获取到密文的docker用户名和密码
|
||||||
|
DOCKER_USERNAME:
|
||||||
|
from_secret: docker_username
|
||||||
|
DOCKER_PASSWORD:
|
||||||
|
from_secret: docker_password
|
||||||
|
REGISTRY:
|
||||||
|
from_secret: registry
|
||||||
|
REGISTRY_NAMESPACE:
|
||||||
|
from_secret: registry_namespace
|
||||||
|
commands: # 定义在Docker容器中执行的shell命令
|
||||||
|
- cd /app/build/$DRONE_REPO_NAME/
|
||||||
|
- cat Dockerfile
|
||||||
|
- sed -i 's/$REGISTRY/'"$REGISTRY"'/' deployment.yml
|
||||||
|
- sed -i 's/$REGISTRY_NAMESPACE/'"$REGISTRY_NAMESPACE"'/' deployment.yml
|
||||||
|
- sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' deployment.yml
|
||||||
|
- sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' deployment.yml
|
||||||
|
# - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' docker.sh
|
||||||
|
# - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' docker.sh
|
||||||
|
# docker登录,不能在脚本中登录,并且不能使用docker login -u -p
|
||||||
|
- echo $DOCKER_PASSWORD | docker login $REGISTRY --username $DOCKER_USERNAME --password-stdin
|
||||||
|
- chmod +x docker.sh
|
||||||
|
- cat docker.sh
|
||||||
|
- sh docker.sh
|
||||||
|
# 执行完脚本删除本次制作的docker镜像,避免多次后当前runner空间不足
|
||||||
|
- docker rmi -f $(docker images | grep $DRONE_REPO_NAME | awk '{print $3}')
|
||||||
|
|
||||||
|
|
||||||
|
- name: drone-rancher # rancher运行
|
||||||
|
image: registry.cn-chengdu.aliyuncs.com/claywang/kubectl #阿里云的kubectl镜像,里面包含kubectl命令行工具
|
||||||
|
volumes: # 将容器内目录挂载到宿主机
|
||||||
|
- name: build
|
||||||
|
path: /app/build # 将应用打包好的Jar和执行脚本挂载出来
|
||||||
|
- name: config
|
||||||
|
path: /app/config # 将kubectl 配置文件挂载出来
|
||||||
|
commands: # 定义在Docker容器中执行的shell命令
|
||||||
|
- cd /app/build/$DRONE_REPO_NAME/
|
||||||
|
# 将deployment中定义的变量替换为drone中的内置变量
|
||||||
|
- cat deployment.yml
|
||||||
|
# 通过kubectl指令运行deployment.yml,并指定授权文件kubectl_conf.yml
|
||||||
|
# - kubectl apply -f deployment.yml -n $DRONE_COMMIT_BRANCH --kubeconfig=/app/config/kubectl_conf.yml
|
||||||
|
- kubectl apply -f deployment.yml -n dev --kubeconfig=/app/config/hcy-text-kubectl.yml
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
- name: build
|
||||||
|
host:
|
||||||
|
path: /home/build
|
||||||
|
- name: cache
|
||||||
|
host:
|
||||||
|
path: /home/npm/cache
|
||||||
|
- name: config # k8s对接的配置文件
|
||||||
|
host:
|
||||||
|
path: /home/kubect
|
||||||
|
- name: maven-cache # maven的缓存文件
|
||||||
|
host:
|
||||||
|
path: /home/data/maven/cache
|
||||||
|
- name: docker # 宿主机中的docker
|
||||||
|
host:
|
||||||
|
path: /var/run/docker.sock
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
branch:
|
||||||
|
- prod
|
||||||
|
event:
|
||||||
|
- push
|
||||||
9
Dockerfile
Normal file
9
Dockerfile
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
FROM nginx
|
||||||
|
RUN rm -rf /etc/nginx/nginx.conf
|
||||||
|
COPY nginx.conf /etc/nginx/
|
||||||
|
#RUN useradd -b /home/clay -m -s /bin/bash clay
|
||||||
|
#RUN chmod a+xr -R /home/clay && chown clay:clay -R /home/clay
|
||||||
|
#USER clay
|
||||||
|
COPY ./dist /home/clay
|
||||||
|
WORKDIR /home/clay
|
||||||
|
EXPOSE 80
|
||||||
49
deployment.yml
Normal file
49
deployment.yml
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
apiVersion: v1
|
||||||
|
kind: Service
|
||||||
|
metadata:
|
||||||
|
name: $DRONE_REPO_NAME
|
||||||
|
spec:
|
||||||
|
type: ClusterIP
|
||||||
|
ports:
|
||||||
|
- protocol: TCP
|
||||||
|
port: 80
|
||||||
|
targetPort: 80
|
||||||
|
selector:
|
||||||
|
app: $DRONE_REPO_NAME
|
||||||
|
|
||||||
|
---
|
||||||
|
apiVersion: apps/v1
|
||||||
|
kind: Deployment
|
||||||
|
metadata:
|
||||||
|
name: $DRONE_REPO_NAME
|
||||||
|
spec:
|
||||||
|
replicas: 1
|
||||||
|
selector:
|
||||||
|
matchLabels:
|
||||||
|
app: $DRONE_REPO_NAME
|
||||||
|
template:
|
||||||
|
metadata:
|
||||||
|
labels:
|
||||||
|
app: $DRONE_REPO_NAME
|
||||||
|
spec:
|
||||||
|
imagePullSecrets:
|
||||||
|
- name: harbor
|
||||||
|
containers:
|
||||||
|
- image: $REGISTRY/$REGISTRY_NAMESPACE/$DRONE_REPO_NAME:$DRONE_COMMIT
|
||||||
|
name: $DRONE_REPO_NAME
|
||||||
|
imagePullPolicy: Always
|
||||||
|
env:
|
||||||
|
- name: TIME_ZONE
|
||||||
|
value: Asia/Shanghai
|
||||||
|
- name: REF_NAME
|
||||||
|
value: dev
|
||||||
|
resources:
|
||||||
|
requests:
|
||||||
|
memory: 0.1Gi
|
||||||
|
cpu: 0.1
|
||||||
|
limits:
|
||||||
|
memory: 2Gi
|
||||||
|
cpu: 2
|
||||||
|
ports:
|
||||||
|
- containerPort: 8080
|
||||||
|
name: app-port
|
||||||
15
docker.sh
Normal file
15
docker.sh
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# 定义应用组名
|
||||||
|
group_name='clay'
|
||||||
|
# 定义应用名称
|
||||||
|
app_name=$DRONE_REPO_NAME
|
||||||
|
# 定义应用版本
|
||||||
|
app_version=$DRONE_COMMIT
|
||||||
|
echo ${app_version}
|
||||||
|
# 打包编译docker镜像
|
||||||
|
echo '----build image start----'
|
||||||
|
docker build -t ${group_name}/${app_name} .
|
||||||
|
echo '----build image success----'
|
||||||
|
docker tag ${group_name}/${app_name} $REGISTRY/$REGISTRY_NAMESPACE/${app_name}:${app_version}
|
||||||
|
docker push $REGISTRY/$REGISTRY_NAMESPACE/${app_name}:${app_version}
|
||||||
|
echo 'push success'
|
||||||
50
nginx.conf
Normal file
50
nginx.conf
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
user nginx;
|
||||||
|
worker_processes auto;
|
||||||
|
|
||||||
|
error_log /var/log/nginx/error.log notice;
|
||||||
|
pid /var/run/nginx.pid;
|
||||||
|
|
||||||
|
|
||||||
|
events {
|
||||||
|
worker_connections 1024;
|
||||||
|
}
|
||||||
|
http {
|
||||||
|
include /etc/nginx/mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||||
|
'$status $body_bytes_sent "$http_referer" '
|
||||||
|
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||||
|
|
||||||
|
add_header 'Access-Control-Allow-Origin' '*';
|
||||||
|
add_header 'Access-Control-Allow-Headers' '*';
|
||||||
|
add_header 'Access-Control-Allow-Methods' '*';
|
||||||
|
|
||||||
|
access_log /var/log/nginx/access.log main;
|
||||||
|
|
||||||
|
sendfile on;
|
||||||
|
|
||||||
|
keepalive_timeout 65;
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
|
||||||
|
location /api {
|
||||||
|
proxy_pass http://gateway.dev.svc.cluster.local:8080;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_set_header X-Forwarded-Port $server_port;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
rewrite "^/api/(.*)$" /$1 break;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
root /home/clay;
|
||||||
|
index index.html index.htm;
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
42
package-lock.json
generated
42
package-lock.json
generated
@@ -8,12 +8,10 @@
|
|||||||
"name": "react-vite",
|
"name": "react-vite",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.2.6",
|
|
||||||
"@reduxjs/toolkit": "^1.9.5",
|
"@reduxjs/toolkit": "^1.9.5",
|
||||||
"antd": "^5.7.3",
|
"antd": "^5.7.3",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"babel-plugin-import": "^1.13.8",
|
"babel-plugin-import": "^1.13.8",
|
||||||
"dayjs": "^1.11.10",
|
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
@@ -87,12 +85,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@ant-design/icons": {
|
"node_modules/@ant-design/icons": {
|
||||||
"version": "5.2.6",
|
"version": "5.1.4",
|
||||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/colors": "^7.0.0",
|
"@ant-design/colors": "^7.0.0",
|
||||||
"@ant-design/icons-svg": "^4.3.0",
|
"@ant-design/icons-svg": "^4.2.1",
|
||||||
"@babel/runtime": "^7.11.2",
|
"@babel/runtime": "^7.11.2",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"rc-util": "^5.31.1"
|
"rc-util": "^5.31.1"
|
||||||
@@ -106,9 +104,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@ant-design/icons-svg": {
|
"node_modules/@ant-design/icons-svg": {
|
||||||
"version": "4.3.1",
|
"version": "4.2.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||||
},
|
},
|
||||||
"node_modules/@ant-design/react-slick": {
|
"node_modules/@ant-design/react-slick": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -1805,9 +1803,9 @@
|
|||||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||||
},
|
},
|
||||||
"node_modules/dayjs": {
|
"node_modules/dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.9",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||||
},
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
@@ -4355,21 +4353,21 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@ant-design/icons": {
|
"@ant-design/icons": {
|
||||||
"version": "5.2.6",
|
"version": "5.1.4",
|
||||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@ant-design/colors": "^7.0.0",
|
"@ant-design/colors": "^7.0.0",
|
||||||
"@ant-design/icons-svg": "^4.3.0",
|
"@ant-design/icons-svg": "^4.2.1",
|
||||||
"@babel/runtime": "^7.11.2",
|
"@babel/runtime": "^7.11.2",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"rc-util": "^5.31.1"
|
"rc-util": "^5.31.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@ant-design/icons-svg": {
|
"@ant-design/icons-svg": {
|
||||||
"version": "4.3.1",
|
"version": "4.2.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||||
},
|
},
|
||||||
"@ant-design/react-slick": {
|
"@ant-design/react-slick": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -5473,9 +5471,9 @@
|
|||||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||||
},
|
},
|
||||||
"dayjs": {
|
"dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.9",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||||
},
|
},
|
||||||
"debug": {
|
"debug": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
|
|||||||
@@ -10,12 +10,10 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.2.6",
|
|
||||||
"@reduxjs/toolkit": "^1.9.5",
|
"@reduxjs/toolkit": "^1.9.5",
|
||||||
"antd": "^5.7.3",
|
"antd": "^5.7.3",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"babel-plugin-import": "^1.13.8",
|
"babel-plugin-import": "^1.13.8",
|
||||||
"dayjs": "^1.11.10",
|
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
|
|||||||
@@ -1,59 +0,0 @@
|
|||||||
import request from "../../utils/request";
|
|
||||||
interface queryParamsType {
|
|
||||||
deptName?: string;
|
|
||||||
state?: number;
|
|
||||||
}
|
|
||||||
interface addParamsType {
|
|
||||||
deptName: string;
|
|
||||||
leader:string;
|
|
||||||
leaderId:number;
|
|
||||||
parentId?:number;
|
|
||||||
ancestors?:string
|
|
||||||
delFlag?:string
|
|
||||||
deptId?:number
|
|
||||||
email?:string
|
|
||||||
phone?:string
|
|
||||||
state?:string
|
|
||||||
}
|
|
||||||
export const getDatasAPI = (params: queryParamsType) => {
|
|
||||||
console.log(params);
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: "/admin/dept",
|
|
||||||
method: "get",
|
|
||||||
params: params,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
export const editDataAPI = (params: addParamsType) => {
|
|
||||||
console.log(params);
|
|
||||||
params.leaderId=0
|
|
||||||
return request({
|
|
||||||
url: "/admin/dept",
|
|
||||||
method: "put",
|
|
||||||
data:params
|
|
||||||
});
|
|
||||||
};
|
|
||||||
export const delDataAPI=(deptId:number)=>{
|
|
||||||
console.log(deptId);
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url:`admin/dept/${deptId}`,
|
|
||||||
method:'delete'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const addDataAPI=(dept:addParamsType)=>{
|
|
||||||
console.log(dept);
|
|
||||||
dept.leaderId=0
|
|
||||||
return request({
|
|
||||||
|
|
||||||
url:`admin/dept`,
|
|
||||||
method:'post',
|
|
||||||
data:dept
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const getDataAPI=(deptId:number)=>{
|
|
||||||
return request({
|
|
||||||
url:`/admin/dept/${deptId}`,
|
|
||||||
method:'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import { number } from "echarts";
|
|
||||||
import request from "../../utils/request";
|
|
||||||
interface paramsType {
|
|
||||||
createTime?: string,
|
|
||||||
dataScope?: string,
|
|
||||||
deptIds?: any[],
|
|
||||||
menuIds?: any[],
|
|
||||||
roleId?: number,
|
|
||||||
roleKey?: string,
|
|
||||||
roleName?: string,
|
|
||||||
state?: string,
|
|
||||||
endTime?: string,
|
|
||||||
startTime?: string,
|
|
||||||
pageNum?: number,
|
|
||||||
pageSize?: number
|
|
||||||
}
|
|
||||||
export const getRolesDataAPI = (params: paramsType) => {
|
|
||||||
const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } = params
|
|
||||||
// console.log('API',params);
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: '/admin/role',
|
|
||||||
method: 'get',
|
|
||||||
params: {
|
|
||||||
endTime,
|
|
||||||
roleKey,
|
|
||||||
roleName,
|
|
||||||
startTime,
|
|
||||||
state,
|
|
||||||
pageNum,
|
|
||||||
pageSize
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const delRoleAPI = (params: paramsType) => {
|
|
||||||
let { roleId } = params
|
|
||||||
// console.log(roleId);
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: `/admin/role/${roleId}`,
|
|
||||||
method: 'delete',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const getMenuLiseAPI = () => {
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: '/admin/menu',
|
|
||||||
method: 'get',
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const addRoleAPI = (data:any) => {
|
|
||||||
// console.log('addAPI',data);
|
|
||||||
return request({
|
|
||||||
url: `/admin/role`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const getRoleAPI = (params:paramsType) => {
|
|
||||||
// data.menuIds=[]
|
|
||||||
const {roleId}=params
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: `/admin/role/${roleId}`,
|
|
||||||
method: 'get',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const setRoleDataAPI = (data:any) => {
|
|
||||||
// data.menuIds=[]
|
|
||||||
// const {roleId}=params
|
|
||||||
console.log('修改',data);
|
|
||||||
|
|
||||||
return request({
|
|
||||||
url: `/admin/role`,
|
|
||||||
method: 'put',
|
|
||||||
data:data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
.deptBox{
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.tablebox{
|
|
||||||
table{
|
|
||||||
thead{
|
|
||||||
th::before{
|
|
||||||
|
|
||||||
}
|
|
||||||
tr{
|
|
||||||
.ant-table-cell{
|
|
||||||
background: white;
|
|
||||||
color:#909399
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tbody{
|
|
||||||
tr{
|
|
||||||
.ant-table-cell{
|
|
||||||
background: white;
|
|
||||||
color:#606266
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-cell{
|
|
||||||
button:focus
|
|
||||||
{
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
button:hover
|
|
||||||
{
|
|
||||||
border: 0px rgb(250, 250, 250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.newAdd{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
margin-top: 15px;
|
|
||||||
button{
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,586 +1,7 @@
|
|||||||
import React, { useState, createContext, useEffect } from "react";
|
import React from "react";
|
||||||
import {
|
|
||||||
Button,
|
export default function Dept() {
|
||||||
Input,
|
return(
|
||||||
Select,
|
<div>dept</div>
|
||||||
message,
|
)
|
||||||
Table,
|
|
||||||
Tag,
|
|
||||||
Modal,
|
|
||||||
Form,
|
|
||||||
InputNumber,
|
|
||||||
Radio,
|
|
||||||
ConfigProvider,
|
|
||||||
TreeSelect,
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
// Icon
|
|
||||||
} from "antd";
|
|
||||||
import type { ColumnsType } from "antd/es/table";
|
|
||||||
import {
|
|
||||||
SyncOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
SwapOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import zh_CN from "antd/es/locale/zh_CN";
|
|
||||||
import "dayjs/locale/zh-cn";
|
|
||||||
// import 'moment/locale/zh-cn';
|
|
||||||
import {
|
|
||||||
getDatasAPI,
|
|
||||||
delDataAPI,
|
|
||||||
addDataAPI,
|
|
||||||
editDataAPI,
|
|
||||||
getDataAPI,
|
|
||||||
} from "../../../api/system/dept";
|
|
||||||
import "./index.scss";
|
|
||||||
import { useForm } from "antd/es/form/Form";
|
|
||||||
interface searchValueType {
|
|
||||||
deptName: string | undefined;
|
|
||||||
state: string | undefined;
|
|
||||||
}
|
|
||||||
//表格单项数据类型
|
|
||||||
interface TableDataType {
|
|
||||||
children: number[];
|
|
||||||
createTime: string;
|
|
||||||
deptId: number;
|
|
||||||
deptName: string;
|
|
||||||
orderNum: string;
|
|
||||||
state: string;
|
|
||||||
}
|
|
||||||
let thisDept = {};
|
|
||||||
let treeData: any = [];
|
|
||||||
let isTreeAnyId = false;
|
|
||||||
// const Dayjs=dayjs.Dayjs
|
|
||||||
export default function Role() {
|
|
||||||
const { confirm } = Modal;
|
|
||||||
//提示组件
|
|
||||||
const [messageApi, contextHolder] = message.useMessage();
|
|
||||||
const [isAllExpend, setIsAllExpend] = useState(true);
|
|
||||||
//搜索框内所有内容
|
|
||||||
let [searchValue, setSearchValue] = useState<searchValueType>({
|
|
||||||
deptName: undefined,
|
|
||||||
state: undefined,
|
|
||||||
});
|
|
||||||
// const is
|
|
||||||
//树列表数据
|
|
||||||
|
|
||||||
// const [isTreeAnyId,setIsTreeAnyId]=useState(false)
|
|
||||||
const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
|
|
||||||
const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
|
|
||||||
//Modal
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
const [modalTitle, setModalTitle] = useState("");
|
|
||||||
//表单区域
|
|
||||||
const [isDisbaled, setIsDisbaled] = useState<boolean>(false);
|
|
||||||
//serach
|
|
||||||
const [formSearch] = Form.useForm();
|
|
||||||
const [formModal] = Form.useForm();
|
|
||||||
//当前页面页数
|
|
||||||
//表格内数据
|
|
||||||
let [tableData, setTableData] = useState<TableDataType[]>([]);
|
|
||||||
//表格格式
|
|
||||||
const columns: ColumnsType<TableDataType> = [
|
|
||||||
{
|
|
||||||
title: "部门名称",
|
|
||||||
dataIndex: "deptName",
|
|
||||||
key: "deptName",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "排序",
|
|
||||||
dataIndex: "orderNum",
|
|
||||||
key: "orderNum",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "状态",
|
|
||||||
key: "state",
|
|
||||||
dataIndex: "state",
|
|
||||||
render: (text) => (
|
|
||||||
<>
|
|
||||||
{text === "0" ? (
|
|
||||||
<Tag color="success">正常</Tag>
|
|
||||||
) : (
|
|
||||||
<Tag color="error">停用</Tag>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "创建时间",
|
|
||||||
key: "createTime",
|
|
||||||
dataIndex: "createTime",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
key: "",
|
|
||||||
dataIndex: "",
|
|
||||||
render: (text) => (
|
|
||||||
<>
|
|
||||||
<Button type="link" onClick={() => handleNewAdd(text.deptId)}>
|
|
||||||
{"新增"}
|
|
||||||
</Button>
|
|
||||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
|
||||||
<Button type="link" onClick={() => handleEdit(text)}>
|
|
||||||
{"修改"}
|
|
||||||
</Button>
|
|
||||||
{text.parentId !== 0 ? (
|
|
||||||
<Button type="link" onClick={() => handleDelete(text)}>
|
|
||||||
{"删除"}
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
//请求表格内容参数
|
|
||||||
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
|
|
||||||
deptName: undefined,
|
|
||||||
state: undefined,
|
|
||||||
});
|
|
||||||
const handleDelete = (dept: any) => {
|
|
||||||
confirm({
|
|
||||||
title: "系统提示",
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
content: `确定删除角色名称为${dept.deptName}的数据吗`,
|
|
||||||
okText: "确定",
|
|
||||||
okType: "danger",
|
|
||||||
cancelText: "取消",
|
|
||||||
onOk() {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
let { code } = await delDataAPI(dept.deptId);
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log("del", dept.deptId);
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
getDatas({});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
console.log("Cancel");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleSerach = () => {
|
|
||||||
// console.log("搜索框", searchValue);
|
|
||||||
// setSearchValue({ ...searchValue });
|
|
||||||
searchValue = formSearch.getFieldsValue();
|
|
||||||
console.log(searchValue);
|
|
||||||
// queryTableDataParams={...searchValue}
|
|
||||||
setQueryTableDataParams({ ...searchValue });
|
|
||||||
};
|
|
||||||
const handleReset = () => {
|
|
||||||
formSearch.resetFields();
|
|
||||||
searchValue = formSearch.getFieldsValue();
|
|
||||||
|
|
||||||
setQueryTableDataParams({ ...searchValue });
|
|
||||||
// setSearchValue({ ...searchValue });
|
|
||||||
// setCount(1)
|
|
||||||
};
|
|
||||||
const handleEdit = async (dept: any) => {
|
|
||||||
if (dept.parentId === 0) {
|
|
||||||
setIsDisbaled(true);
|
|
||||||
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
|
|
||||||
} else {
|
|
||||||
setIsDisbaled(false);
|
|
||||||
// formModal.setFieldsValue({...thisDept});
|
|
||||||
}
|
|
||||||
await getData(dept.deptId);
|
|
||||||
if (dept.parentId === 0) {
|
|
||||||
setIsDisbaled(true);
|
|
||||||
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
|
|
||||||
} else {
|
|
||||||
setIsDisbaled(false);
|
|
||||||
formModal.setFieldsValue({ ...thisDept });
|
|
||||||
}
|
|
||||||
console.log(thisDept);
|
|
||||||
setModalTitle("修改角色");
|
|
||||||
setIsModalOpen(true);
|
|
||||||
// formModal.setFieldsValue({...thisDept});
|
|
||||||
// formModal.setFieldsValue({...thisDept,parentId:dept.deptName});
|
|
||||||
};
|
|
||||||
const handleNewAdd = (deptId?: string) => {
|
|
||||||
setModalTitle("新增角色");
|
|
||||||
setIsModalOpen(true);
|
|
||||||
if (deptId) {
|
|
||||||
formModal.setFieldsValue({
|
|
||||||
parentId: deptId,
|
|
||||||
deptName: undefined,
|
|
||||||
orderNum: 0,
|
|
||||||
leader: undefined,
|
|
||||||
phone: undefined,
|
|
||||||
email: undefined,
|
|
||||||
state: "0",
|
|
||||||
});
|
|
||||||
} else
|
|
||||||
formModal.setFieldsValue({
|
|
||||||
parentId: undefined,
|
|
||||||
deptName: undefined,
|
|
||||||
orderNum: 0,
|
|
||||||
leader: undefined,
|
|
||||||
phone: undefined,
|
|
||||||
email: undefined,
|
|
||||||
state: "0",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleModalOk = () => {
|
|
||||||
formModal
|
|
||||||
.validateFields()
|
|
||||||
.then((values) => {
|
|
||||||
// form.resetFields();
|
|
||||||
console.log("add", values);
|
|
||||||
// onCreate(values);
|
|
||||||
// setSelectedKeys([])
|
|
||||||
// setIsModalOpen(false);
|
|
||||||
if (modalTitle == "新增角色") {
|
|
||||||
console.log(values);
|
|
||||||
postAdd(values);
|
|
||||||
} else if (modalTitle == "修改角色") {
|
|
||||||
editData(values);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((info) => {
|
|
||||||
console.log("Validate Failed:", info);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
//遍历菜单树获取所有节点ID
|
|
||||||
const getTree = function (tree: any) {
|
|
||||||
tree.title = tree.deptName;
|
|
||||||
tree.value = tree.deptId;
|
|
||||||
if (!isTreeAnyId) {
|
|
||||||
treeAnyId.push(tree.deptId);
|
|
||||||
setTreeAnyId([...treeAnyId]);
|
|
||||||
}
|
|
||||||
if (tree.children) {
|
|
||||||
for (let child of tree.children) {
|
|
||||||
getTree(child);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// treeData=tree
|
|
||||||
};
|
|
||||||
const handleModalCanle = () => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
//获取详细数据
|
|
||||||
const getData = async (deptId: number) => {
|
|
||||||
try {
|
|
||||||
const { code, data } = await getDataAPI(deptId);
|
|
||||||
if (code === 1000) {
|
|
||||||
thisDept = data;
|
|
||||||
// console.log(thisDept);
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
};
|
|
||||||
//修改数据
|
|
||||||
const editData = async (dept: any) => {
|
|
||||||
try {
|
|
||||||
console.log(thisDept);
|
|
||||||
|
|
||||||
console.log({ ...thisDept, ...dept });
|
|
||||||
|
|
||||||
const { code } = await editDataAPI({ ...thisDept, ...dept });
|
|
||||||
if (code === 1000) {
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
setIsModalOpen(false);
|
|
||||||
getDatas(queryTableDataParams);
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "操作失败",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
};
|
|
||||||
//获取部门数据
|
|
||||||
const getDatas = async (queryTableDataParams: any) => {
|
|
||||||
console.log("参数:", queryTableDataParams);
|
|
||||||
try {
|
|
||||||
const { code, data } = await getDatasAPI(queryTableDataParams);
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
if (code === 1000) {
|
|
||||||
// console.log(isTreeAnyId);
|
|
||||||
|
|
||||||
for (let child of data) {
|
|
||||||
getTree(child);
|
|
||||||
}
|
|
||||||
setExpandedRowKeys([...treeAnyId]);
|
|
||||||
// console.log(treeAnyId);
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
setTableData(data);
|
|
||||||
treeData = data;
|
|
||||||
console.log(treeData);
|
|
||||||
|
|
||||||
// setTotal(data.total);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.log("555", err);
|
|
||||||
}
|
|
||||||
isTreeAnyId = true;
|
|
||||||
};
|
|
||||||
//新增
|
|
||||||
const postAdd = async (dept: any) => {
|
|
||||||
try {
|
|
||||||
let { code } = await addDataAPI(dept);
|
|
||||||
console.log(code);
|
|
||||||
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log("success");
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
formModal.setFieldsValue({});
|
|
||||||
getDatas({ ...queryTableDataParams });
|
|
||||||
setIsModalOpen(false);
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "角色名称已存在",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
queryTableDataParams = {
|
|
||||||
...queryTableDataParams,
|
|
||||||
};
|
|
||||||
|
|
||||||
getDatas(queryTableDataParams);
|
|
||||||
// console.log(queryParams);
|
|
||||||
console.log(tableData);
|
|
||||||
}, [queryTableDataParams]);
|
|
||||||
return (
|
|
||||||
<ConfigProvider locale={zh_CN}>
|
|
||||||
<div className="deptBox">
|
|
||||||
<Form
|
|
||||||
layout="inline"
|
|
||||||
initialValues={undefined}
|
|
||||||
form={formSearch}
|
|
||||||
onFinish={handleSerach}
|
|
||||||
style={{ fontWeight: "700" }}
|
|
||||||
>
|
|
||||||
<Form.Item
|
|
||||||
label="部门名称"
|
|
||||||
name="deptName"
|
|
||||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入部门名称" allowClear />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label="状态"
|
|
||||||
name="state"
|
|
||||||
wrapperCol={{ span: 22 }}
|
|
||||||
style={{ marginTop: "10px" }}
|
|
||||||
>
|
|
||||||
<Select
|
|
||||||
style={{ width: 300 + "px" }}
|
|
||||||
allowClear
|
|
||||||
showSearch
|
|
||||||
placeholder="请选择部门状态"
|
|
||||||
optionFilterProp="lable"
|
|
||||||
options={[
|
|
||||||
{
|
|
||||||
value: 0,
|
|
||||||
label: "正常",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: "停用",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item style={{ marginTop: "10px" }}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
htmlType="submit"
|
|
||||||
style={{ marginLeft: 20 + "px" }}
|
|
||||||
onClick={() => handleSerach()}
|
|
||||||
>
|
|
||||||
<SearchOutlined />
|
|
||||||
搜索
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item style={{ marginTop: "10px" }}>
|
|
||||||
<Button onClick={() => handleReset()}>
|
|
||||||
<SyncOutlined />
|
|
||||||
重置
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
{/* 新增 */}
|
|
||||||
<div className="newAdd">
|
|
||||||
<Button type="primary" onClick={() => handleNewAdd()}>
|
|
||||||
+新增
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
style={{ backgroundColor: "rgb(144,147,153)" }}
|
|
||||||
onClick={() => {
|
|
||||||
setIsAllExpend(!isAllExpend);
|
|
||||||
if (isAllExpend) {
|
|
||||||
setExpandedRowKeys([]);
|
|
||||||
} else setExpandedRowKeys(treeAnyId);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SwapOutlined rotate={90} />
|
|
||||||
{isAllExpend ? "全部收起" : "全部展开"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{/* 弹出 */}
|
|
||||||
<Modal
|
|
||||||
open={isModalOpen}
|
|
||||||
title={modalTitle}
|
|
||||||
okText="确定"
|
|
||||||
cancelText="取消"
|
|
||||||
onCancel={handleModalCanle}
|
|
||||||
onOk={handleModalOk}
|
|
||||||
width={"700px"}
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={formModal}
|
|
||||||
// layout="inline"
|
|
||||||
name="form_in_modal"
|
|
||||||
initialValues={{ state: "0" }}
|
|
||||||
labelAlign="right"
|
|
||||||
// labelCol={{span:12}}
|
|
||||||
wrapperCol={{ span: 16 }}
|
|
||||||
>
|
|
||||||
<Row>
|
|
||||||
<Col span={24}>
|
|
||||||
<Form.Item
|
|
||||||
name="parentId"
|
|
||||||
label="上级部门"
|
|
||||||
rules={[{ required: true, message: "请选择上级部门" }]}
|
|
||||||
// style={{ width: 100 + "%" }}
|
|
||||||
>
|
|
||||||
<TreeSelect
|
|
||||||
disabled={isDisbaled}
|
|
||||||
// showSearch
|
|
||||||
style={{ width: "559px" }}
|
|
||||||
// value={value}
|
|
||||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
|
||||||
placeholder="请选择上级部门"
|
|
||||||
allowClear
|
|
||||||
// treeDefaultExpandAll
|
|
||||||
// onChange={onChange}
|
|
||||||
treeData={treeData}
|
|
||||||
//
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="deptName"
|
|
||||||
label="部门名称"
|
|
||||||
rules={[{ required: true, message: "请输入部门名称" }]}
|
|
||||||
// style={{ width: 45 + "%", marginTop: "20px" }}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入部门名称" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
required
|
|
||||||
name="orderNum"
|
|
||||||
label="显示顺序"
|
|
||||||
rules={[{ required: true, message: "请输入角色显示顺序" }]}
|
|
||||||
// style={{ width: 40 + "%", marginTop: "20px" }}
|
|
||||||
>
|
|
||||||
<InputNumber min={0} controls={true} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row style={{translate:'25px'}}>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="leader"
|
|
||||||
label="负责人"
|
|
||||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入负责人" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="phone"
|
|
||||||
label="联系电话"
|
|
||||||
// style={{ width: 40 + "%", marginTop: "20px" }}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入联系电话" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Row style={{translate:'38px'}}>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="email"
|
|
||||||
label="邮箱"
|
|
||||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入邮箱" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="state"
|
|
||||||
label="状态"
|
|
||||||
className="collection-create-form_last-form-item"
|
|
||||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
|
||||||
>
|
|
||||||
<Radio.Group>
|
|
||||||
<Radio defaultChecked={true} value="0">
|
|
||||||
正常
|
|
||||||
</Radio>
|
|
||||||
<Radio value="1">停用</Radio>
|
|
||||||
</Radio.Group>
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
{/* 表格 */}
|
|
||||||
<div className="tablebox">
|
|
||||||
{contextHolder}
|
|
||||||
<Table
|
|
||||||
expandedRowKeys={expandedRowKeys}
|
|
||||||
onExpand={(expanded, record) => {
|
|
||||||
// console.log(expanded, record);
|
|
||||||
|
|
||||||
if (expanded) {
|
|
||||||
setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
|
|
||||||
} else {
|
|
||||||
const newEx = expandedRowKeys.filter((element) => {
|
|
||||||
return element != record.deptId;
|
|
||||||
});
|
|
||||||
// console.log(expandedRowKeys);
|
|
||||||
|
|
||||||
setExpandedRowKeys(newEx);
|
|
||||||
}
|
|
||||||
console.log(expandedRowKeys);
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
rowKey={"deptId"}
|
|
||||||
dataSource={tableData}
|
|
||||||
pagination={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ConfigProvider>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
.roleBox{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
padding: 15px;
|
|
||||||
// display: flex;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// .SearchBox{
|
|
||||||
// display: flex;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// .ipt{
|
|
||||||
// margin-top: 10px;
|
|
||||||
// margin-right: 10px;
|
|
||||||
// height: 32px;
|
|
||||||
// line-height: 32px;
|
|
||||||
// display: flex;
|
|
||||||
// span{
|
|
||||||
// font-weight: 700;
|
|
||||||
// // line-height: 32px;
|
|
||||||
// padding-right: 12px;
|
|
||||||
// // color: #606266;
|
|
||||||
// }
|
|
||||||
// .item,input{
|
|
||||||
// flex: 1;
|
|
||||||
// font-weight: 400;
|
|
||||||
// // width: 300px;
|
|
||||||
// margin-right: 40px;
|
|
||||||
// .ant-space-item{
|
|
||||||
// // margin-left: 500px;
|
|
||||||
// width: 500px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .btn{
|
|
||||||
// button{
|
|
||||||
// margin-right: 15px;
|
|
||||||
// }
|
|
||||||
// margin-top: 10px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .btn{
|
|
||||||
|
|
||||||
// button{
|
|
||||||
// margin-right: 15px;
|
|
||||||
// }
|
|
||||||
// margin-top: 10px;
|
|
||||||
// }
|
|
||||||
.tablebox{
|
|
||||||
table{
|
|
||||||
thead{
|
|
||||||
th::before{
|
|
||||||
|
|
||||||
}
|
|
||||||
tr{
|
|
||||||
.ant-table-cell{
|
|
||||||
background: white;
|
|
||||||
color:#909399
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tbody{
|
|
||||||
tr{
|
|
||||||
.ant-table-cell{
|
|
||||||
background: white;
|
|
||||||
color:#606266
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-cell{
|
|
||||||
button:focus
|
|
||||||
{
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
button:hover
|
|
||||||
{
|
|
||||||
border: 0px rgb(250, 250, 250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.newadd{
|
|
||||||
width: 60px;
|
|
||||||
height: 40px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.myTree{
|
|
||||||
margin-top: 10px;
|
|
||||||
border: 1px solid rgb(173, 131, 131);
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
.checkBox{
|
|
||||||
margin-top: 5px;
|
|
||||||
width: 250px;
|
|
||||||
display: flex;
|
|
||||||
label{
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,730 +0,0 @@
|
|||||||
import React, { useState, createContext, useEffect } from "react";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Input,
|
|
||||||
Select,
|
|
||||||
DatePicker,
|
|
||||||
Space,
|
|
||||||
message,
|
|
||||||
Table,
|
|
||||||
Tag,
|
|
||||||
Modal,
|
|
||||||
Pagination,
|
|
||||||
Form,
|
|
||||||
Checkbox,
|
|
||||||
InputNumber,
|
|
||||||
Radio,
|
|
||||||
Tree,
|
|
||||||
ConfigProvider,
|
|
||||||
} from "antd";
|
|
||||||
import type { CheckboxChangeEvent } from "antd/es/checkbox";
|
|
||||||
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
|
|
||||||
import type { ColumnsType } from "antd/es/table";
|
|
||||||
import {
|
|
||||||
SyncOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import zh_CN from "antd/es/locale/zh_CN";
|
|
||||||
import dataLocale from "antd/es/date-picker/locale/zh_CN";
|
|
||||||
import "dayjs/locale/zh-cn";
|
|
||||||
import dayjs, { Dayjs } from "dayjs";
|
|
||||||
// import 'moment/locale/zh-cn';
|
|
||||||
import "./index.scss";
|
|
||||||
import {
|
|
||||||
getRolesDataAPI,
|
|
||||||
delRoleAPI,
|
|
||||||
getRoleAPI,
|
|
||||||
addRoleAPI,
|
|
||||||
setRoleDataAPI,
|
|
||||||
getMenuLiseAPI,
|
|
||||||
} from "../../../api/system/role";
|
|
||||||
import { useForm } from "antd/es/form/Form";
|
|
||||||
interface searchValueType {
|
|
||||||
dateTime: string[] | undefined;
|
|
||||||
roleName: string | undefined;
|
|
||||||
roleKey: string | undefined;
|
|
||||||
state: string | undefined;
|
|
||||||
startTime: string | undefined;
|
|
||||||
endTime: string | undefined;
|
|
||||||
}
|
|
||||||
//表格单项数据类型
|
|
||||||
interface TableDataType {
|
|
||||||
createTime: string;
|
|
||||||
dataScope: string;
|
|
||||||
deptIds: any[];
|
|
||||||
menuIds: any[];
|
|
||||||
roleId: number;
|
|
||||||
roleKey: string;
|
|
||||||
roleName: string;
|
|
||||||
roleSort: string;
|
|
||||||
state: string;
|
|
||||||
updateTime: string;
|
|
||||||
key?: number;
|
|
||||||
total?: number;
|
|
||||||
}
|
|
||||||
//当前选择的角色信息
|
|
||||||
const fieldNames = {
|
|
||||||
title: "menuName",
|
|
||||||
key: "menuId",
|
|
||||||
children: "children",
|
|
||||||
};
|
|
||||||
let thisrole: any = {};
|
|
||||||
let treeIds: number[] = [];
|
|
||||||
// const Dayjs=dayjs.Dayjs
|
|
||||||
export default function Role() {
|
|
||||||
const { confirm } = Modal;
|
|
||||||
const { RangePicker } = DatePicker;
|
|
||||||
//提示组件
|
|
||||||
const [messageApi, contextHolder] = message.useMessage();
|
|
||||||
//搜索框内所有内容
|
|
||||||
let [searchValue, setSearchValue] = useState<searchValueType>({
|
|
||||||
dateTime: undefined,
|
|
||||||
roleName: undefined,
|
|
||||||
roleKey: undefined,
|
|
||||||
startTime: undefined,
|
|
||||||
state: undefined,
|
|
||||||
endTime: undefined,
|
|
||||||
});
|
|
||||||
//树列表数据
|
|
||||||
const [menuTreeData, setMenuTreeData] = useState([]);
|
|
||||||
//父子联动
|
|
||||||
const [checkStrictly, setCheckStrictly] = useState(false);
|
|
||||||
//树所有节点IDs
|
|
||||||
//树是否自动展开
|
|
||||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
|
||||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
|
||||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
|
||||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
|
||||||
//Modal
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
const [modalTitle, setModalTitle] = useState("");
|
|
||||||
//表单区域
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
//serach
|
|
||||||
const [formSearch] = Form.useForm();
|
|
||||||
//当前页面页数
|
|
||||||
let [count, setCount] = useState(1);
|
|
||||||
//表格内数据
|
|
||||||
let [tableData, setTableData] = useState<TableDataType[]>([]);
|
|
||||||
//表格数据总条数
|
|
||||||
let [total, setTotal] = useState<number>(0);
|
|
||||||
//表格格式
|
|
||||||
const columns: ColumnsType<TableDataType> = [
|
|
||||||
{
|
|
||||||
title: "序号",
|
|
||||||
dataIndex: "key",
|
|
||||||
key: "key",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "角色名称",
|
|
||||||
dataIndex: "roleName",
|
|
||||||
key: "roleName",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "角色权限",
|
|
||||||
dataIndex: "roleKey",
|
|
||||||
key: "roleKey",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "数据范围",
|
|
||||||
key: "dataScope",
|
|
||||||
dataIndex: "dataScope",
|
|
||||||
render: (text) => {
|
|
||||||
switch (text) {
|
|
||||||
case "1":
|
|
||||||
return <>所有数据权限</>;
|
|
||||||
case "2":
|
|
||||||
return <>自定义数据权限</>;
|
|
||||||
case "3":
|
|
||||||
return <>本部门数据权限</>;
|
|
||||||
default:
|
|
||||||
return <>本部门及以下数据权限</>;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "显示顺序",
|
|
||||||
key: "roleSort",
|
|
||||||
dataIndex: "roleSort",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "状态",
|
|
||||||
key: "state",
|
|
||||||
dataIndex: "state",
|
|
||||||
render: (text) => (
|
|
||||||
<>
|
|
||||||
{text === "0" ? (
|
|
||||||
<Tag color="success">正常</Tag>
|
|
||||||
) : (
|
|
||||||
<Tag color="error">停用</Tag>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "创建时间",
|
|
||||||
key: "createTime",
|
|
||||||
dataIndex: "createTime",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
key: "",
|
|
||||||
dataIndex: "",
|
|
||||||
render: (text) => (
|
|
||||||
<>
|
|
||||||
<Button type="link" onClick={() => handleEdit(text)}>
|
|
||||||
{"修改"}
|
|
||||||
</Button>
|
|
||||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
|
||||||
<Button type="link" danger onClick={() => handleDelete(text)}>
|
|
||||||
{"删除"}
|
|
||||||
</Button>
|
|
||||||
<Button type="link">{"分配用户"}</Button>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
//请求表格内容参数
|
|
||||||
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
|
|
||||||
roleKey: undefined,
|
|
||||||
roleName: undefined,
|
|
||||||
state: undefined,
|
|
||||||
endTime: undefined,
|
|
||||||
startTime: undefined,
|
|
||||||
pageNum: undefined,
|
|
||||||
pageSize: undefined,
|
|
||||||
});
|
|
||||||
const onTreeExpand = (expandedKeysValue: React.Key[]) => {
|
|
||||||
// console.log("onExpand", expandedKeysValue);
|
|
||||||
setExpandedKeys(expandedKeysValue);
|
|
||||||
setAutoExpandParent(false);
|
|
||||||
};
|
|
||||||
const onCheckExpand = (e: CheckboxChangeEvent) => {
|
|
||||||
console.log(`checked = ${e.target.checked}`);
|
|
||||||
console.log(treeIds);
|
|
||||||
if (e.target.checked) setExpandedKeys(treeIds);
|
|
||||||
else setExpandedKeys([]);
|
|
||||||
console.log(expandedKeys);
|
|
||||||
};
|
|
||||||
const onCheckAll = (e: CheckboxChangeEvent) => {
|
|
||||||
console.log(`checked = ${e.target.checked}`);
|
|
||||||
if (e.target.checked) setCheckedKeys(treeIds);
|
|
||||||
else setCheckedKeys([]);
|
|
||||||
};
|
|
||||||
const onCheckFaSon = (e: CheckboxChangeEvent) => {
|
|
||||||
console.log(`checked = ${e.target.checked}`);
|
|
||||||
setCheckStrictly(!e.target.checked);
|
|
||||||
};
|
|
||||||
const onTreeCheck = (checkedKeysValue: any) => {
|
|
||||||
console.log("onCheck", checkedKeysValue.checked);
|
|
||||||
console.log("onCheck", checkedKeysValue);
|
|
||||||
if (checkStrictly === false) {
|
|
||||||
form.setFieldsValue({ menuIds: checkedKeysValue });
|
|
||||||
setCheckedKeys(checkedKeysValue);
|
|
||||||
} else {
|
|
||||||
form.setFieldsValue({ menuIds: checkedKeysValue.checked });
|
|
||||||
setCheckedKeys(checkedKeysValue.checked);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onTreeSelect = (selectedKeysValue: React.Key[], info: any) => {
|
|
||||||
console.log("onSelect", info);
|
|
||||||
// setExpandedKeys([...expandedKeys,...selectedKeysValue])
|
|
||||||
setSelectedKeys(selectedKeysValue);
|
|
||||||
};
|
|
||||||
//当前角色的数据
|
|
||||||
|
|
||||||
// let thisrole: any = {roleId:'s'};
|
|
||||||
const handleEdit = async (role: any) => {
|
|
||||||
await getRoleData(role);
|
|
||||||
setModalTitle("修改角色");
|
|
||||||
// setCheckedKeys(role)
|
|
||||||
setIsModalOpen(true);
|
|
||||||
};
|
|
||||||
const handleDelete = (role: any) => {
|
|
||||||
console.log(role);
|
|
||||||
confirm({
|
|
||||||
title: "系统提示",
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
content: `确定删除角色名称为${role.roleName}的数据吗`,
|
|
||||||
okText: "确定",
|
|
||||||
okType: "danger",
|
|
||||||
cancelText: "取消",
|
|
||||||
onOk() {
|
|
||||||
handleClickDel(role);
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
console.log("Cancel");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleSerach = () => {
|
|
||||||
// console.log("搜索框", searchValue);
|
|
||||||
// setSearchValue({ ...searchValue });
|
|
||||||
searchValue = formSearch.getFieldsValue();
|
|
||||||
if (typeof searchValue.dateTime !== "undefined") {
|
|
||||||
searchValue.startTime = (searchValue.dateTime as string[])[0];
|
|
||||||
searchValue.endTime = (searchValue.dateTime as string[])[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(searchValue);
|
|
||||||
count = 1;
|
|
||||||
// queryTableDataParams={...searchValue}
|
|
||||||
setQueryTableDataParams({ ...searchValue });
|
|
||||||
};
|
|
||||||
const handleReset = () => {
|
|
||||||
formSearch.resetFields();
|
|
||||||
searchValue =formSearch.getFieldsValue()
|
|
||||||
// searchValue = {
|
|
||||||
// roleName: undefined,
|
|
||||||
// roleKey: undefined,
|
|
||||||
// startTime: undefined,
|
|
||||||
// state: undefined,
|
|
||||||
// endTime: undefined,
|
|
||||||
// };
|
|
||||||
setQueryTableDataParams({ ...searchValue });
|
|
||||||
// setSearchValue({ ...searchValue });
|
|
||||||
// setCount(1)
|
|
||||||
};
|
|
||||||
//Modal区域
|
|
||||||
const handleModalOk = () => {
|
|
||||||
form
|
|
||||||
.validateFields()
|
|
||||||
.then((values) => {
|
|
||||||
// form.resetFields();
|
|
||||||
console.log("add", values);
|
|
||||||
// onCreate(values);
|
|
||||||
// setSelectedKeys([])
|
|
||||||
// setIsModalOpen(false);
|
|
||||||
if (modalTitle == "新增角色") {
|
|
||||||
console.log(values);
|
|
||||||
|
|
||||||
console.log("add2", { ...values, menuIds: checkedKeys });
|
|
||||||
|
|
||||||
postAdd({ ...values, menuIds: checkedKeys });
|
|
||||||
} else if (modalTitle == "修改角色") {
|
|
||||||
console.log(thisrole);
|
|
||||||
console.log(checkedKeys);
|
|
||||||
console.log("now", { ...thisrole, ...values, menuIds: checkedKeys });
|
|
||||||
// console.log({ ...thisrole, ...values,menuIds:setCheckedKeys });
|
|
||||||
thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
|
|
||||||
editRoleData({ ...thisrole });
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((info) => {
|
|
||||||
console.log("Validate Failed:", info);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("modal thisrole", thisrole);
|
|
||||||
};
|
|
||||||
const handleModalCanle = () => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
//新增
|
|
||||||
const handleNewAdd = () => {
|
|
||||||
setModalTitle("新增角色");
|
|
||||||
form.setFieldsValue({
|
|
||||||
roleName: "",
|
|
||||||
roleKey: "",
|
|
||||||
state: "0",
|
|
||||||
dataScope: "1",
|
|
||||||
roleSort: "0",
|
|
||||||
});
|
|
||||||
|
|
||||||
setCheckedKeys([]);
|
|
||||||
setIsModalOpen(true);
|
|
||||||
};
|
|
||||||
const onDateChange = (
|
|
||||||
valueDate: DatePickerProps["value"] | RangePickerProps["value"],
|
|
||||||
dateString: [string, string] | string
|
|
||||||
) => {
|
|
||||||
// setSelectedDate(valueDate)
|
|
||||||
console.log(valueDate);
|
|
||||||
searchValue.startTime = dateString[0];
|
|
||||||
searchValue.endTime = dateString[1];
|
|
||||||
formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
|
|
||||||
console.log("time:", searchValue.endTime, searchValue.startTime);
|
|
||||||
// setSearchValue({ ...searchValue })
|
|
||||||
};
|
|
||||||
const filterOption = (
|
|
||||||
input: string,
|
|
||||||
option?: { label: string; value: string }
|
|
||||||
) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
|
|
||||||
//表格函数
|
|
||||||
//从服务器获取数据
|
|
||||||
|
|
||||||
//页码改变
|
|
||||||
const pageChange = (page: number, pageSize: number) => {
|
|
||||||
console.log(page, pageSize);
|
|
||||||
queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
|
|
||||||
// setQueryParams({...queryParams,pageNum:page,pageSize})
|
|
||||||
console.log(queryTableDataParams);
|
|
||||||
getRolesData(queryTableDataParams);
|
|
||||||
setCount(page);
|
|
||||||
};
|
|
||||||
//删除单项
|
|
||||||
const handleClickDel = (role: TableDataType) => {
|
|
||||||
console.log(role);
|
|
||||||
let { roleId } = role;
|
|
||||||
del(roleId);
|
|
||||||
};
|
|
||||||
//遍历菜单树获取所有节点ID
|
|
||||||
const getTreeIds = function (tree: any) {
|
|
||||||
// console.log('Ids:',tree);
|
|
||||||
tree.forEach((item: any) => {
|
|
||||||
// console.log(item);
|
|
||||||
treeIds.push(item.menuId);
|
|
||||||
if (item.children != null) getTreeIds(item.children);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
//获取单个角色详细信息
|
|
||||||
const getRoleData = async (role: any) => {
|
|
||||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
|
||||||
// thisrole=role
|
|
||||||
try {
|
|
||||||
let { code, data } = await getRoleAPI(role);
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log("role:", data);
|
|
||||||
thisrole = data;
|
|
||||||
console.log("thisrole", thisrole);
|
|
||||||
form.setFieldsValue(thisrole);
|
|
||||||
setCheckedKeys(data.menuIds);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
// setOpen(true);
|
|
||||||
};
|
|
||||||
//获取菜单权限树
|
|
||||||
const getMenuList = async () => {
|
|
||||||
try {
|
|
||||||
let menul = await getMenuLiseAPI();
|
|
||||||
console.log("tree", menul.data);
|
|
||||||
if (treeIds.length == 0) getTreeIds(menul.data);
|
|
||||||
console.log(treeIds);
|
|
||||||
setMenuTreeData(menul.data);
|
|
||||||
// treeData = menul.data
|
|
||||||
// setMenulist(menul.data)
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//新增请求
|
|
||||||
const postAdd = async (value: any) => {
|
|
||||||
try {
|
|
||||||
let { code } = await addRoleAPI(value);
|
|
||||||
console.log(code);
|
|
||||||
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log("success");
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
form.setFieldsValue({
|
|
||||||
roleName: "",
|
|
||||||
roleKey: "",
|
|
||||||
state: "0",
|
|
||||||
dataScope: "1",
|
|
||||||
});
|
|
||||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
|
||||||
setIsModalOpen(false);
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "角色名称已存在",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
};
|
|
||||||
const getRolesData = async (queryTableDataParams: any) => {
|
|
||||||
console.log("参数:", queryTableDataParams);
|
|
||||||
try {
|
|
||||||
const { code, data } = await getRolesDataAPI(queryTableDataParams);
|
|
||||||
if (code === 1000) {
|
|
||||||
const sortData = data.rows.sort(
|
|
||||||
(a: TableDataType, b: TableDataType) =>
|
|
||||||
parseInt(a.roleSort) - parseInt(b.roleSort)
|
|
||||||
);
|
|
||||||
sortData.forEach((element: TableDataType, i: number) => {
|
|
||||||
element.key = i + 1;
|
|
||||||
});
|
|
||||||
setTableData(sortData);
|
|
||||||
setTotal(data.total);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.log("555", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//服务器删除角色
|
|
||||||
const del = async (roleId: number) => {
|
|
||||||
try {
|
|
||||||
let { code } = await delRoleAPI({ roleId });
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log("del", roleId);
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
getRolesData({ pageNum: count });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//修改角色信息
|
|
||||||
const editRoleData = async (role: any) => {
|
|
||||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
|
||||||
// thisrole = role;
|
|
||||||
// console.log(thisrole);
|
|
||||||
console.log(role);
|
|
||||||
try {
|
|
||||||
let { code, data } = await setRoleDataAPI(thisrole);
|
|
||||||
// let a = await setRoleDataAPI(role);
|
|
||||||
if (code === 1000) {
|
|
||||||
thisrole = { ...thisrole, ...data };
|
|
||||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "操作成功",
|
|
||||||
});
|
|
||||||
setIsModalOpen(false);
|
|
||||||
form.setFieldsValue({
|
|
||||||
roleName: "",
|
|
||||||
roleKey: "",
|
|
||||||
state: "0",
|
|
||||||
dataScope: "1",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "角色名称已存在！",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "系统未知错误",
|
|
||||||
});
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
// setQueryParams({...queryParams,...valueSch})
|
|
||||||
queryTableDataParams = {
|
|
||||||
...queryTableDataParams,
|
|
||||||
// ...searchValue,
|
|
||||||
pageNum: count,
|
|
||||||
};
|
|
||||||
// setQueryTableDataPaams(queryTableDataParams)
|
|
||||||
// setCount(1)
|
|
||||||
getRolesData(queryTableDataParams);
|
|
||||||
// console.log(queryParams);
|
|
||||||
}, [queryTableDataParams]);
|
|
||||||
useEffect(() => {
|
|
||||||
getMenuList();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<ConfigProvider locale={zh_CN}>
|
|
||||||
<div className="roleBox">
|
|
||||||
|
|
||||||
<Form
|
|
||||||
layout="inline"
|
|
||||||
// labelCol={{ span: 8 }}
|
|
||||||
// wrapperCol={{ span: 18 }}
|
|
||||||
initialValues={undefined}
|
|
||||||
form={formSearch}
|
|
||||||
onFinish={handleSerach}
|
|
||||||
style={{fontWeight:'700'}}
|
|
||||||
>
|
|
||||||
<Form.Item label="角色名称" name="roleName" style={{width:300+'px',marginTop:'10px'}}>
|
|
||||||
<Input
|
|
||||||
// maxLength={250}
|
|
||||||
placeholder="请输入角色名称"
|
|
||||||
allowClear
|
|
||||||
// value={searchValue.roleName}
|
|
||||||
// onChange={(e) => {
|
|
||||||
// setSearchValue({ ...searchValue, roleName: e.target.value });
|
|
||||||
// }}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
|
|
||||||
<Input
|
|
||||||
allowClear
|
|
||||||
placeholder="请输入权限字符"
|
|
||||||
// value={searchValue.roleKey}
|
|
||||||
// onChange={(e) => {
|
|
||||||
// setSearchValue({ ...searchValue, roleKey: e.target.value });
|
|
||||||
// }}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label="状态" name="state" wrapperCol={{ span: 22 }} style={{marginTop:'10px'}}>
|
|
||||||
<Select
|
|
||||||
style={{ width: 300 + "px" }}
|
|
||||||
allowClear
|
|
||||||
showSearch
|
|
||||||
placeholder="请选择角色状态"
|
|
||||||
optionFilterProp="lable"
|
|
||||||
// onChange={onStateChange}
|
|
||||||
// onSearch={onSearch}
|
|
||||||
filterOption={filterOption}
|
|
||||||
// value={searchValue.state}
|
|
||||||
options={[
|
|
||||||
{
|
|
||||||
value: "0",
|
|
||||||
label: "正常",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "1",
|
|
||||||
label: "停用",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label="登陆时间" name="dateTime" style={{marginTop:'10px'}}>
|
|
||||||
<Space direction="vertical" style={{width:400+'px'}}>
|
|
||||||
<RangePicker
|
|
||||||
locale={dataLocale}
|
|
||||||
// allowClear
|
|
||||||
// value={[null, null]}
|
|
||||||
showTime
|
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
onChange={onDateChange}
|
|
||||||
// onOk={onDataChangeOk}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item style={{marginTop:'10px'}}>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
htmlType="submit"
|
|
||||||
style={{marginLeft:20+'px'}}
|
|
||||||
onClick={() => handleSerach()}
|
|
||||||
>
|
|
||||||
<SearchOutlined />
|
|
||||||
搜索
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item style={{marginTop:'10px'}}>
|
|
||||||
<Button onClick={() => handleReset()}>
|
|
||||||
<SyncOutlined />
|
|
||||||
重置
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
{/* 新增 */}
|
|
||||||
<div className="newadd">
|
|
||||||
<Button type="primary" onClick={handleNewAdd}>
|
|
||||||
+新增
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{/* 弹出 */}
|
|
||||||
<Modal
|
|
||||||
open={isModalOpen}
|
|
||||||
title={modalTitle}
|
|
||||||
okText="确定"
|
|
||||||
cancelText="取消"
|
|
||||||
onCancel={handleModalCanle}
|
|
||||||
onOk={handleModalOk}
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
layout="horizontal"
|
|
||||||
name="form_in_modal"
|
|
||||||
initialValues={{ dataScope: "1", state: "0" }}
|
|
||||||
>
|
|
||||||
<Form.Item
|
|
||||||
name="roleName"
|
|
||||||
label="角色名称"
|
|
||||||
rules={[{ required: true, message: "请输入角色名称" }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入角色名称" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="roleKey"
|
|
||||||
label="角色权限"
|
|
||||||
rules={[{ required: true, message: "请输入角色权限" }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入角色权限" />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
required
|
|
||||||
name="roleSort"
|
|
||||||
label="显示顺序"
|
|
||||||
rules={[{ required: true, message: "请输入角色显示顺序" }]}
|
|
||||||
>
|
|
||||||
<InputNumber min={0} max={10} controls={true} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name="dataScope" label="数据范围">
|
|
||||||
<Radio.Group>
|
|
||||||
<Radio value="1" defaultChecked={true}>
|
|
||||||
所有数据权限
|
|
||||||
</Radio>
|
|
||||||
<Radio value="2">自定义数据权限</Radio>
|
|
||||||
<Radio value="3">本部门数据权限</Radio>
|
|
||||||
<Radio value="4">本部门及以下数据权限</Radio>
|
|
||||||
</Radio.Group>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="state"
|
|
||||||
label="状态"
|
|
||||||
className="collection-create-form_last-form-item"
|
|
||||||
>
|
|
||||||
<Radio.Group>
|
|
||||||
<Radio defaultChecked={true} value="0">
|
|
||||||
正常
|
|
||||||
</Radio>
|
|
||||||
<Radio value="1">停用</Radio>
|
|
||||||
</Radio.Group>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="menuIds"
|
|
||||||
label="菜单权限"
|
|
||||||
className="collection-create-form_last-form-item"
|
|
||||||
>
|
|
||||||
{/* <input type="text" /> */}
|
|
||||||
<div className="checkBox">
|
|
||||||
<Checkbox onChange={onCheckExpand}>展开</Checkbox>
|
|
||||||
<Checkbox onChange={onCheckAll}>全选</Checkbox>
|
|
||||||
<Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
|
|
||||||
</div>
|
|
||||||
<div className="myTree">
|
|
||||||
<Tree
|
|
||||||
fieldNames={fieldNames}
|
|
||||||
checkable
|
|
||||||
onExpand={onTreeExpand}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
autoExpandParent={true}
|
|
||||||
onCheck={onTreeCheck}
|
|
||||||
checkedKeys={checkedKeys}
|
|
||||||
checkStrictly={checkStrictly}
|
|
||||||
onSelect={onTreeSelect}
|
|
||||||
selectedKeys={selectedKeys}
|
|
||||||
treeData={menuTreeData}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
{/* 表格 */}
|
|
||||||
<div className="tablebox">
|
|
||||||
{contextHolder}
|
|
||||||
<Table columns={columns} dataSource={tableData} pagination={false} />
|
|
||||||
<Pagination
|
|
||||||
style={{
|
|
||||||
float: "right",
|
|
||||||
marginTop: "10px",
|
|
||||||
}}
|
|
||||||
total={total}
|
|
||||||
current={count}
|
|
||||||
showSizeChanger
|
|
||||||
showQuickJumper
|
|
||||||
onChange={(page, pageSize) => pageChange(page, pageSize)}
|
|
||||||
showTotal={(total) => `共 ${total} 条`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ConfigProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user