注册用户

src/api/user.js

@@ -0,0 +1,9 @@
+import request from '@/service'
+
+export const addUserApi = data => {
+  return request({
+    url: `/account/register`,
+    method: 'POST',
+    data,
+  })
+}

src/components/Publish.vue

@@ -7,53 +7,32 @@
     @reset="onReset"
     @submit="onSubmit"
   >
-    <t-form-item label="用户名" help="这里可以展示一段说明文字" name="account">
-      <t-input v-model="formData.account" placeholder="请输入用户名"></t-input>
-    </t-form-item>
-    <t-form-item label="年龄" name="age">
-      <t-input-number v-model="formData.age" placeholder="年龄" />
-    </t-form-item>
-    <t-form-item label="籍贯" name="region">
-      <t-cascader
-        v-model="formData.region"
-        placeholder="请选择籍贯"
-        :options="regionOptions"
-        clearable
-        filterable
-      />
-    </t-form-item>
-    <t-form-item label="密码" name="password">
+    <t-form-item
+      label="任务名称"
+      help="任务名称用来直观的说明本次操作"
+      name="taskname"
+    >
       <t-input
-        type="password"
-        v-model="formData.password"
-        placeholder="请输入密码"
+        v-model="formData.taskname"
+        placeholder="请输入任务名称"
       ></t-input>
     </t-form-item>
-    <t-form-item label="邮箱" name="email">
-      <t-input v-model="formData.email" placeholder="请输入邮箱"></t-input>
-    </t-form-item>
-    <t-form-item label="性别" name="gender">
-      <t-radio-group v-model="formData.gender">
-        <t-radio value="male">男</t-radio>
-        <t-radio value="female">女</t-radio>
+    <t-form-item label="核查顺序" name="order">
+      <t-radio-group v-model="formData.order">
+        <t-radio value="0">横向</t-radio>
+        <t-radio value="1">纵向</t-radio>
       </t-radio-group>
     </t-form-item>
-    <t-form-item label="课程" name="course">
-      <t-checkbox-group
-        v-model="formData.course"
-        :options="courseOptions"
-      ></t-checkbox-group>
-    </t-form-item>
-    <t-form-item label="学院" name="college">
+    <t-form-item label="核电站" name="nuclear_station">
       <t-select
-        v-model="formData.college"
+        v-model="formData.nuclear_station"
         class="demo-select-base"
         clearable
         filterable
-        placeholder="请选择所在学院"
+        placeholder="请选择所在核电站"
       >
         <t-option
-          v-for="(item, index) in options"
+          v-for="(item, index) in stationList"
           :value="item.value"
           :label="item.label"
           :key="index"
@@ -62,35 +41,42 @@
         </t-option>
       </t-select>
     </t-form-item>
-    <t-form-item
-      label="入学时间"
-      name="date"
-      :rules="[
-        { required: true, message: '此项必填' },
-        { date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' },
-      ]"
-    >
-      <t-date-picker v-model="formData.date"></t-date-picker>
-    </t-form-item>
-    <t-form-item label="个人网站" name="content.url">
-      <t-input
-        v-model="formData.content.url"
-        placeholder="请输入个人网站地址"
-      ></t-input>
-    </t-form-item>
-    <t-form-item label="个人简介" help="请用一句话介绍自己" name="description">
-      <t-textarea
-        v-model="formData.description"
-        placeholder="请用一句话介绍自己"
-      ></t-textarea>
+    <t-form-item label="核芯堆" name="nuclear_core">
+      <t-select
+        v-model="formData.nuclear_core"
+        class="demo-select-base"
+        clearable
+        filterable
+        placeholder="请选择所在核芯堆"
+      >
+        <t-option
+          v-for="(item, index) in coreList"
+          :value="item.value"
+          :label="item.label"
+          :key="index"
+        >
+          {{ item.label }}
+        </t-option>
+      </t-select>
     </t-form-item>
-    <t-form-item label="兴趣爱好" name="hobby">
-      <t-tree-select
-        v-model="formData.hobby"
+
+    <t-form-item label="操作员" name="operator_id">
+      <t-select
+        v-model="formData.operator_id"
+        class="demo-select-base"
+        clearable
         filterable
-        :data="hobbyOptions"
-        placeholder="请选择你的兴趣爱好"
-      ></t-tree-select>
+        placeholder="请选择分配的操作员"
+      >
+        <t-option
+          v-for="(item, index) in userList"
+          :value="item.value"
+          :label="item.label"
+          :key="index"
+        >
+          {{ item.label }}
+        </t-option>
+      </t-select>
     </t-form-item>
 
     <t-form-item>
@@ -103,102 +89,31 @@
 </template>
 <script>
 const INITIAL_DATA = {
-  account: '',
-  password: '',
-  // description: '',
-  age: undefined,
-  region: '',
-  email: '',
-  gender: '',
-  college: '',
-  date: '',
-  content: {
-    url: '',
-  },
-  hobby: [],
-  course: [],
+  taskname: '',
+  order: '',
+  nuclear_station: '',
+  nuclear_core: '',
+  operator_id: '',
 }
 export default {
   data() {
     return {
       formData: { ...INITIAL_DATA },
-      hobbyOptions: [
-        {
-          label: '运动',
-          value: 'sports',
-          children: [
-            {
-              label: '足球',
-              value: 'soccer',
-            },
-            {
-              label: '篮球',
-              value: 'basketball',
-            },
-          ],
-        },
-        {
-          label: '娱乐',
-          value: 'entertainment',
-          children: [
-            {
-              label: '电影',
-              value: 'movie',
-            },
-            {
-              label: '旅游',
-              value: 'trip',
-            },
-          ],
-        },
-      ],
-      regionOptions: [
-        {
-          label: '广东',
-          value: '1',
-          children: [
-            {
-              label: '深圳',
-              value: '1.1',
-            },
-            {
-              label: '广州',
-              value: '1.2',
-            },
-          ],
-        },
-        {
-          label: '湖南',
-          value: '2',
-          children: [
-            {
-              label: '长沙',
-              value: '2.1',
-            },
-          ],
-        },
-      ],
-      courseOptions: [
-        { label: '语文', value: '1' },
-        { label: '数学', value: '2' },
-        { label: '英语', value: '3' },
-        { label: '体育', value: '4' },
-      ],
-      options: [
+      stationList: [
         { label: '计算机学院', value: '1' },
         { label: '软件学院', value: '2' },
         { label: '物联网学院', value: '3' },
       ],
-      // FormItem.rules 优先级大于 Form.rules
+      userList: [],
+      coreList: [],
       rules: {
-        account: [
+        taskname: [
           {
             required: true,
-            message: '姓名必填',
+            message: '任务名称必填',
             type: 'error',
             trigger: 'blur',
           },
-          // trigger 默认为 'change'
           { required: true, message: '姓名必填', type: 'error' },
           { whitespace: true, message: '姓名不能为空' },
           {
@@ -207,65 +122,11 @@ export default {
             type: 'warning',
             trigger: 'blur',
           },
-          {
-            max: 10,
-            message: '姓名字符长度超出',
-            type: 'warning',
-            trigger: 'blur',
-          },
-        ],
-        description: [
-          {
-            validator: val => val.length >= 5,
-            message: '至少 5 个字，中文长度等于英文长度',
-            type: 'warning',
-          },
-          {
-            validator: val => val.length < 20,
-            message: '不能超过 20 个字，中文长度等于英文长度',
-            type: 'warning',
-          },
-        ],
-        age: [{ required: true, message: '年龄必填', type: 'error' }],
-        region: [{ required: true, message: '籍贯必填', type: 'error' }],
-
-        password: [
-          { required: true, message: '密码必填', type: 'error' },
-          { len: 8, message: '请输入 8 位密码', type: 'warning' },
-          {
-            pattern: /[A-Z]+/,
-            message: '密码必须包含大写字母',
-            type: 'warning',
-          },
-        ],
-        college: [{ required: true, message: '此项必填' }],
-        email: [
-          { required: true, message: '邮箱必填' },
-          {
-            email: { ignore_max_length: true },
-            message: '请输入正确的邮箱地址',
-          },
-        ],
-        gender: [{ required: true, message: '性别必填' }],
-        course: [
-          { required: true, message: '课程必填' },
-          {
-            validator: val => val.length <= 2,
-            message: '最多选择 2 门课程',
-            type: 'warning',
-          },
-        ],
-        hobby: [{ required: true, message: '爱好必填', type: 'error' }],
-        'content.url': [
-          { required: true, message: '个人网站必填' },
-          {
-            url: {
-              protocols: ['http', 'https', 'ftp'],
-              require_protocol: true,
-            },
-            message: '请输入正确的个人主页',
-          },
         ],
+        operator_id: [{ required: true, message: '请选择要分配的操作员' }],
+        nuclear_core: [{ required: true, message: '请选择核芯堆' }],
+        nuclear_station: [{ required: true, message: '请选择核电站' }],
+        order: [{ required: true, message: '核查顺序必填' }],
       },
     }
   },

src/components/User.vue

@@ -9,6 +9,65 @@
           </t-breadcrumb>
         </t-space>
       </template>
+      <template #actions>
+        <t-button theme="primary" @click="visible = true"> 新增用户 </t-button>
+      </template>
+      <t-drawer
+        size="medium"
+        closeOnEscKeydown
+        :footer="false"
+        sizeDraggable
+        :visible="visible"
+        @close="handleClose"
+        :onConfirm="handleClose"
+        header="新增用户"
+      >
+        <t-form
+          :data="formData"
+          :rules="rules"
+          ref="form"
+          @reset="onReset"
+          @submit="onSubmit"
+        >
+          <t-form-item label="用户名" name="username">
+            <t-input
+              v-model="formData.username"
+              placeholder="请输入用户名"
+            ></t-input>
+          </t-form-item>
+          <t-form-item name="password">
+            <template #label>密码</template>
+            <t-input
+              type="password"
+              clearable
+              v-model="formData.password"
+              placeholder="请输入密码"
+            >
+            </t-input>
+          </t-form-item>
+          <t-form-item label="昵称" name="nickname">
+            <t-input
+              v-model="formData.nickname"
+              placeholder="请输入用户名"
+            ></t-input>
+          </t-form-item>
+          <t-form-item label="角色权限" name="role">
+            <t-radio-group v-model="formData.role">
+              <t-radio value="ROLE_ADMIN">管理员</t-radio>
+              <t-radio value="ROLE_USER">普通用户</t-radio>
+            </t-radio-group>
+          </t-form-item>
+
+          <t-form-item>
+            <t-space size="10px">
+              <t-button theme="primary" type="submit">提交</t-button>
+              <t-button theme="default" variant="base" type="reset"
+                >重置</t-button
+              >
+            </t-space>
+          </t-form-item>
+        </t-form>
+      </t-drawer>
       <t-table
         bordered
         hover
@@ -25,6 +84,7 @@
 
 <script lang="jsx">
 import { MessagePlugin } from 'tdesign-vue-next'
+import { addUserApi } from '@/api/user'
 import {
   FileCopyIcon,
   ErrorCircleFilledIcon,
@@ -84,11 +144,66 @@ for (let i = 0; i < total; i++) {
     propsAndContent2: [2, 3, 1, 4][i % 4],
   })
 }
+const INITIAL_DATA = {
+  username: '',
+  role: '',
+  password: '',
+  nickname: '',
+}
 
 export default {
   data() {
     return {
+      formData: { ...INITIAL_DATA },
+      rules: {
+        username: [
+          {
+            required: true,
+            message: '用户名不能为空',
+            type: 'error',
+            trigger: 'blur',
+          },
+          { whitespace: true, message: '用户名不能为空' },
+          {
+            min: 8,
+            message: '至少需要8个字符，一个中文等于两个字符',
+            type: 'warning',
+            trigger: 'blur',
+          },
+        ],
+        nickname: [
+          {
+            required: true,
+            message: '昵称不能为空',
+            type: 'error',
+            trigger: 'blur',
+          },
+          { whitespace: true, message: '昵称不能为空' },
+          {
+            min: 2,
+            message: '至少需要2个字符，一个中文等于两个字符',
+            type: 'warning',
+            trigger: 'blur',
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: '密码不能为空',
+            type: 'error',
+            trigger: 'blur',
+          },
+          {
+            min: 8,
+            message: '至少需要8个字符，一个中文等于两个字符',
+            type: 'warning',
+            trigger: 'blur',
+          },
+        ],
+        role: [{ required: true, message: '用户角色必填' }],
+      },
       data,
+      visible: false,
       columns: [
         {
           colKey: 'applicant',
@@ -196,11 +311,28 @@ export default {
     }
   },
 
-  // methods: {
-  //   getAttach() {
-  //     return document.body;
-  //   },
-  // },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    onReset() {
+      this.$message.success('重置成功')
+    },
+    async onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        // 新增用户
+        const res = await addUserApi(this.formData)
+        if (res?.code == 200) {
+          this.visible = false
+          this.$message.success('提交成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } else {
+        this.$message.warning(firstError)
+      }
+    },
+  },
 }
 </script>
 

src/pages/Login.vue

@@ -118,7 +118,9 @@ const onSubmit = async ({ validateResult, firstError }) => {
       // 将token存入store中
       accountStore.updateToken(res?.data?.token)
       accountStore.updateUsername(res?.data?.username)
+      accountStore.updateRole(res?.data.authorities[0]?.authority)
       Cookie.setCookie('t', res?.data?.token)
+      Cookie.setCookie('r', res?.data.authorities[0]?.authority)
       window.location.href = '/'
     } else {
       MessagePlugin.error({ content: '请输入正确的用户名和密码！' })

src/pages/index.vue

@@ -64,7 +64,7 @@
           </svg>
           <p class="title">任务管理中心</p>
         </div>
-        <div class="menu" @click="changePage(2)">
+        <div class="menu" @click="changePage(2)" v-if="role == 'ROLE_ADMIN'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -85,7 +85,7 @@
           </svg>
           <p class="title">发布任务</p>
         </div>
-        <div class="menu" @click="changePage(3)">
+        <div class="menu" @click="changePage(3)" v-if="role == 'ROLE_ADMIN'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -106,7 +106,7 @@
           </svg>
           <p class="title">用户管理</p>
         </div>
-        <div class="menu" @click="changePage(4)">
+        <div class="menu" @click="changePage(4)" v-if="role == 'ROLE_ADMIN'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -127,6 +127,27 @@
           </svg>
           <p class="title">相机调试</p>
         </div>
+        <div class="menu" @click="changePage(5)" v-if="role == 'ROLE_ADMIN'">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="26.271926879882812"
+            height="21.392486572265625"
+            viewBox="0 0 26.271926879882812 21.392486572265625"
+          >
+            <g>
+              <path
+                d="M19.2738,3.31288L23.8579,3.31288C25.1907,3.31288,26.2719,4.39406,26.2719,5.72692L26.2719,18.9784C26.2719,20.3113,25.1907,21.3925,23.8579,21.3925L2.41404,21.3925C1.08118,21.3925,0,20.3113,0,18.9784L0,5.72692C0,4.39406,1.08118,3.31288,2.41404,3.31288L6.99814,3.31288C7.2113,3.31288,7.38336,3.14082,7.38336,2.92766L7.38336,2.41404C7.38336,1.08118,8.46454,0,9.7974,0L16.4745,0C17.8074,0,18.8886,1.08118,18.8886,2.41404L18.8886,2.92766C18.8886,3.14082,19.0606,3.31288,19.2738,3.31288ZM23.8579,19.8516C24.3407,19.8516,24.7311,19.4613,24.7311,18.9784L24.7311,5.72692C24.7311,5.24411,24.3407,4.85376,23.8579,4.85376L18.1181,4.85376C17.6918,4.85376,17.3477,4.50963,17.3477,4.08332L17.3477,2.41404C17.3477,1.93123,16.9573,1.54088,16.4745,1.54088L9.7974,1.54088C9.31459,1.54088,8.92424,1.93123,8.92424,2.41404L8.92424,4.08332C8.92424,4.50963,8.58011,4.85376,8.1538,4.85376L2.41404,4.85376C1.93123,4.85376,1.54087,5.24411,1.54087,5.72692L1.54087,18.9784C1.54087,19.4613,1.93123,19.8516,2.41404,19.8516L23.8579,19.8516ZM21.3538,9.11679C22.2615,9.11679,22.9974,8.38093,22.9974,7.47319C22.9974,6.56545,22.2615,5.82959,21.3538,5.82959C20.4461,5.82959,19.7102,6.56545,19.7102,7.47319C19.7102,8.38093,20.4461,9.11679,21.3538,9.11679ZM9.09363,8.27185C10.1799,7.18553,11.6258,6.58716,13.1615,6.58716C14.6973,6.58716,16.1431,7.18553,17.2295,8.27185C18.3158,9.35817,18.9141,10.804,18.9141,12.3398C18.9141,13.8755,18.3158,15.3214,17.2295,16.4077C16.1431,17.494,14.6973,18.0924,13.1615,18.0924C11.6258,18.0924,10.1799,17.494,9.09363,16.4077C8.00731,15.3214,7.40894,13.8755,7.40894,12.3398C7.40894,10.804,8.00731,9.35817,9.09363,8.27185ZM8.94981,12.3398C8.94981,14.6613,10.84,16.5515,13.1615,16.5515C15.4831,16.5515,17.3733,14.6613,17.3733,12.3398C17.3733,10.0182,15.4831,8.12803,13.1615,8.12803C10.84,8.12803,8.94981,10.0182,8.94981,12.3398Z"
+                fill-rule="evenodd"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
+          <p class="title">基本信息</p>
+        </div>
       </div>
       <t-popup class="placement bottom center" overlayStyle>
         <template v-slot:content>
@@ -166,22 +187,28 @@
     <div class="task_container" v-if="activePage == 1">
       <Task />
     </div>
-    <div class="publish_container" v-if="activePage == 2">
+    <div
+      class="publish_container"
+      v-if="activePage == 2 && role == 'ROLE_ADMIN'"
+    >
       <Publish />
     </div>
-    <div class="task_container" v-if="activePage == 3">
+    <div class="task_container" v-if="activePage == 3 && role == 'ROLE_ADMIN'">
       <User />
     </div>
-    <div class="task_container" v-if="activePage == 4">
+    <div class="task_container" v-if="activePage == 4 && role == 'ROLE_ADMIN'">
       <Debug />
     </div>
+    <div class="task_container" v-if="activePage == 5 && role == 'ROLE_ADMIN'">
+      核电站信息和反应堆信息维护
+    </div>
   </div>
 </template>
 
 <script setup>
 import { useAccountStore } from '@/store'
 import Cookie from '@/utils/cookie'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import Excel from 'cpns/Excel'
 import Image from 'cpns/Image'
 import Task from 'cpns/Task'
@@ -190,6 +217,11 @@ import User from 'cpns/User'
 import Debug from 'cpns/Debug'
 import { getNuclearExcelApi } from '@/api'
 const accountStore = useAccountStore()
+
+const role = computed(() => {
+  return Cookie.getCookie('r')
+})
+
 const activePage = ref(0)
 
 const changePage = pageIndex => {

src/store/modules/account.js

@@ -6,6 +6,7 @@ export const useAccountStore = defineStore({
     return {
       token: null,
       username: '',
+      role: '',
     }
   },
   // actions
@@ -20,5 +21,8 @@ export const useAccountStore = defineStore({
       this.token = null
       this.username = ''
     },
+    updateRole(role) {
+      this.role = role
+    },
   },
 })