变基

.env.dev

@@ -2,6 +2,6 @@
 
 FT_NODE_ENV=dev
 
-FT_WS_URL=ws://192.168.1.199:9527
-FT_PROXY=http://192.168.1.199:8080
+FT_WS_URL=ws://192.168.1.200:8080/ws
+FT_PROXY=http://192.168.1.200:8080
 FT_API_BASE=/api

src/apis/container.ts

@@ -1,5 +1,5 @@
 import http from 'libs/http'
 
-export const getContainerList = (): Promise<any> => http.get(`/container/list`)
+export const getContainerList = (): Promise<System.PageResponse<Container.ContainerItem>> => http.get(`/container/list`)
 
-export const updateContainer = (params: Container.ContainerItem): Promise<any> => http.put(`/container`, params)
+export const updateContainer = (params: Container.ContainerItem): Promise<null> => http.put(`/container`, params)

src/apis/crafts.ts

@@ -7,18 +7,20 @@ interface Craft {
   oresId?: number
 }
 
-export const getCraftList = (params: any): Promise<any> => http.get(`/crafts/list/${params.oresId}`)
+export const getCraftList = (params: { oresId: string }): Promise<CraftTypes.Craft[]> => http.get(`/crafts/list/${params.oresId}`)
 
-export const createCraft = (params: Craft): Promise<any> => http.post('/crafts', params)
+export const createCraft = (params: Craft): Promise<null> => http.post('/crafts', params)
 
-export const updateCraft = (params: Craft): Promise<any> => http.put(`/crafts`, params)
+export const updateCraft = (params: Craft): Promise<null> => http.put(`/crafts`, params)
 
-export const delCraft = (ids: string): Promise<any> => http.delete(`/crafts/${ids}`)
+export const delCraft = (ids: string): Promise<null> => http.delete(`/crafts/${ids}`)
 
 // 开始执行工艺
-export const startCraft = (params: { heatId: string }): Promise<any> => http.post(`/crafts/start`, params)
+export const startCraft = (params: { heatId: string }): Promise<null> => http.post(`/crafts/start`, params)
 
 // 加热区配置工艺
-export const setCraft = (params: { heatId?: string | number, craftId?: string | number }): Promise<any> => http.post(`/crafts/set`, params)
+export const setCraft = (params: { heatId?: string | number, craftId?: string | number }): Promise<null> => http.post(`/crafts/set`, params)
 
-export const craftstatus = (): Promise<any> => http.get(`/monitor/crafts/status`)
+export const craftstatus = (): Promise<CraftTypes.CraftState[]> => http.get(`/monitor/crafts/status`)
+
+export const craftstatusByHeatId = (heatId: string): Promise<CraftTypes.CraftState> => http.get(`/monitor/crafts/status/${heatId}`)

src/apis/ore.ts

@@ -2,8 +2,8 @@ import http from 'libs/http'
 
 export const getOreList = (): Promise<System.PageResponse<Ore.OreItem>> => http.get(`/ores/list`)
 
-export const saveOre = (params: { name: string }): Promise<any> => http.post(`/ores`, params)
+export const saveOre = (params: { name: string }): Promise<null> => http.post(`/ores`, params)
 
-export const editOre = (params: { id: number, name: string }): Promise<any> => http.put(`/ores`, params)
+export const editOre = (params: { id: number, name: string }): Promise<null> => http.put(`/ores`, params)
 
-export const delOre = (ids: string): Promise<any> => http.delete(`/ores/${ids}`)
+export const delOre = (ids: string): Promise<null> => http.delete(`/ores/${ids}`)

src/apis/solution.ts

@@ -1,9 +1,9 @@
 import http from 'libs/http'
 
-export const getSolsList = (): Promise<any> => http.get(`/sols/list`)
+export const getSolsList = (): Promise<System.PageResponse<Solution.SolutionItem>> => http.get(`/sols/list`)
 
-export const saveSols = (params: { name: string }): Promise<any> => http.post(`/sols`, params)
+export const saveSols = (params: { name: string }): Promise<null> => http.post(`/sols`, params)
 
-export const editSols = (params: { id: number, name: string }): Promise<any> => http.put(`/sols`, params)
+export const editSols = (params: { id: number, name: string }): Promise<null> => http.put(`/sols`, params)
 
-export const delSols = (ids: string): Promise<any> => http.delete(`/sols/${ids}`)
+export const delSols = (ids: string): Promise<null> => http.delete(`/sols/${ids}`)

src/apis/user.ts

@@ -1,7 +1,7 @@
 import http from 'libs/http'
 
 export const current = (): Promise<User.User> => http.get('/auth/current')
-export const addUser = (params: User.User): Promise<null> => http.post('/user', params)
+export const addUser = (params: User.AddUser): Promise<null> => http.post('/user', params)
 export const updateUser = (params: User.User): Promise<null> => http.put('/user', params)
 export const userList = (params: System.Page): Promise<System.PageResponse<User.User>> => http.get('/user/list', { params })
 export const delUser = (params: string): Promise<null> => http.delete(`/user/${params}`)

src/components/craft/AddCraftDialog.vue

@@ -47,7 +47,6 @@ const editDialog = (craftInfo: CraftTypes.Craft) => {
   craftObj.value = { ...craftInfo }
   if (craftInfo && craftInfo.steps) {
     const step = JSON.parse(craftInfo.steps)
-    /* eslint-disable no-debugger */
     if (step && step.length) {
       step.forEach((item: CraftTypes.StepStruct) => {
         if (item.method === 'addLiquid') {
@@ -74,9 +73,9 @@ function onConfirm() {
   const stepList = JSON.parse(JSON.stringify(stepStructs.value))
   for (const step of stepList) {
     if (step.method === 'addLiquid') {
-      const list = step.params.tubeSolList
+      const list: CraftTypes.TubeSolStruct[] = step.params.tubeSolList
       if (list && list.length) {
-        list.forEach((item: any) => {
+        list.forEach((item) => {
           const tubeNum = item.tubeNum
           if (tubeNum === 0) {
             const tubeSolList: CraftTypes.TubeSolStruct[] = []
@@ -112,8 +111,7 @@ const confirmCraftEdit = (craft: CraftTypes.Craft) => {
     ElMessage.success('保存成功')
     emit('ok')
     closeDialog()
-  }).catch((e) => {
-    console.log('保存工艺失败---', e, tempStepStructs.value)
+  }).catch(() => {
     saveRef.value && saveRef.value.setLoading(false)
   })
 }
@@ -139,6 +137,7 @@ function addStep(step: CraftTypes.StepCmd) {
       method: step,
       params: {
         temperature: 100,
+        second: 10,
       },
     }
   }

src/components/craft/CraftStatus.vue

@@ -1,28 +1,66 @@
 <script lang="ts" setup>
-import { craftstatus } from '@/apis/crafts'
-import { ref } from 'vue'
+import { craftstatus, craftstatusByHeatId } from '@/apis/crafts'
+import { nextTick, ref } from 'vue'
 import TransferRight from './TransferRight.vue'
 
 const statusVisible = ref(false)
-const intervalTimes = ref()
-const stateList: any = ref([])
+const byHeatIdTimes = ref()
+const stateList = ref<CraftTypes.CraftState[]>([])
 const craftValue = ref()
 const craftList = ref<CraftTypes.CraftState[]>([])
-const stateMap: any = {
+const stateMap: Record<string, string> = {
   RUNNING: '执行中',
   FINISHED: '执行完成',
 }
+// const queryCraftStatus = () => {
+//   intervalTimes.value = setInterval(() => {
+//     craftstatus().then((res) => {
+//       if (res && res.length === 0) {
+//         clearInterval(intervalTimes.value)
+//         return
+//       }
+//       const craftStateList = res
+//       const uniqueData: CraftTypes.CraftState[] = []
+//       const idMap: Record<string | number, string | boolean> = {}
+//       res.forEach((item) => {
+//         const craftsId = item.craftsId
+//         if (!idMap[craftsId]) {
+//           idMap[craftsId] = true
+//           uniqueData.push(item)
+//         }
+//       })
+
+//       craftList.value = uniqueData
+//       if (uniqueData.length) {
+//         const craftsId = uniqueData[0].craftsId
+//         craftValue.value = craftsId
+//         onSelectChange(craftsId)
+//       }
+
+//       stateList.value.push(...uniqueData)
+//       if (craftStateList && craftStateList.length) {
+//         const finishedList = []
+//         uniqueData.forEach((item) => {
+//           const state = item.state
+//           if (state === 'FINISHED') {
+//             finishedList.push(state)
+//           }
+//         })
+//         if (finishedList.length === uniqueData.length) {
+//           clearInterval(intervalTimes.value)
+//         }
+//       }
+//     })
+//   }, 1000)
+// }
+
 const queryCraftStatus = () => {
-  intervalTimes.value = setInterval(() => {
-    craftstatus().then((res: any) => {
-      if (res && res.length === 0) {
-        clearInterval(intervalTimes.value)
-        return
-      }
-      const craftStateList: CraftTypes.CraftState[] = res
+  craftstatus().then((res) => {
+    console.log('rs====', res)
+    if (res && res.length) {
       const uniqueData: CraftTypes.CraftState[] = []
-      const idMap: any = {}
-      res.forEach((item: CraftTypes.CraftState) => {
+      const idMap: Record<string | number, string | boolean> = {}
+      res.forEach((item) => {
         const craftsId = item.craftsId
         if (!idMap[craftsId]) {
           idMap[craftsId] = true
@@ -30,24 +68,22 @@ const queryCraftStatus = () => {
         }
       })
       craftList.value = uniqueData
-      if (uniqueData.length) {
-        const craftsId = uniqueData[0].craftsId
-        craftValue.value = craftsId
-        onSelectChange(craftsId)
-      }
-      stateList.value.push(...uniqueData)
-      if (craftStateList && craftStateList.length) {
-        const finishedList = []
-        uniqueData.forEach((item) => {
-          const state = item.state
-          if (state === 'FINISHED') {
-            finishedList.push(state)
-          }
-        })
-        if (finishedList.length === uniqueData.length) {
-          clearInterval(intervalTimes.value)
-        }
+      queryCraftStatusByHeatId(res[0].heatId)
+    }
+  })
+}
+
+const queryCraftStatusByHeatId = (heatId: string) => {
+  byHeatIdTimes.value = setInterval(() => {
+    craftstatusByHeatId(heatId).then((res) => {
+      currentSteps.value = res.steps
+      const craftsId = res.craftsId
+      craftValue.value = craftsId
+      stateList.value.push(res)
+      if (res.state === 'FINISHED') {
+        clearInterval(byHeatIdTimes.value)
       }
+      onHandleSteps(res.steps)
     })
   }, 1000)
 }
@@ -63,23 +99,35 @@ const onCloseDialog = () => {
 
 const currentSteps = ref<CraftTypes.StepStruct[]>([])
 const onSelectChange = (value: string | number) => {
+  stateList.value = []
   const list = craftList.value.filter(item => item.craftsId === value)
   list.forEach((item) => {
     const steps = item.steps
-    currentSteps.value = item.steps
-    steps.forEach((item) => {
-      if (item.method === 'addLiquid') {
-        const list = item.params.tubeSolList
-        if (list && list.length === 16 && item.params.tubeSolList) {
-          item.params.tubeSolList = [{
-            tubeNum: 0,
-            addLiquidList: item.params.tubeSolList[0].addLiquidList,
-          }]
-        }
-      }
+    clearInterval(byHeatIdTimes.value)
+    queryCraftStatusByHeatId(item.heatId)
+    onHandleSteps(steps)
+    currentSteps.value = []
+    nextTick(() => {
+      currentSteps.value = steps
     })
   })
 }
+const onHandleSteps = (steps: CraftTypes.StepStruct[]) => {
+  if (!steps) {
+    return
+  }
+  steps.forEach((item) => {
+    if (item.method === 'addLiquid') {
+      const list = item.params.tubeSolList
+      if (list && list.length === 16 && item.params.tubeSolList) {
+        item.params.tubeSolList = [{
+          tubeNum: 0,
+          addLiquidList: item.params.tubeSolList[0].addLiquidList,
+        }]
+      }
+    }
+  })
+}
 defineExpose({
   showDialog,
 })
@@ -97,7 +145,7 @@ defineExpose({
             </el-select>
           </div>
         </div>
-        <div v-if="currentSteps.length" class="state-log">
+        <div v-if="currentSteps.length" style="margin-top: 10px">
           <TransferRight v-for="(step, idx) in currentSteps" :key="idx" :order="idx + 1" :step="step" type="showlog" @del="() => {}" @transfer-change="() => {}"  />
         </div>
         <div v-else class="state-log">
@@ -162,9 +210,4 @@ defineExpose({
   .state-log-text{
     font-size: .875rem;
   }
-  .el-select-dropdown__item{
-    display: flex;
-    align-items: center;
-    height: 15px;
-  }
 </style>

src/components/craft/TransferRight.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { useLiquidStore } from '@/stores/useLiquidsStore'
-import { ref, watch } from 'vue'
+import { getSolsList } from '@/apis/solution'
+import { useSolutionStore } from '@/stores/useSolutionStore'
+import { onMounted, ref, watch } from 'vue'
 import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'
 
 const props = defineProps<{
@@ -14,8 +15,13 @@ const $emit = defineEmits<{
   (e: 'transferChange', stepData: CraftTypes.StepStruct, order: number): void
 }>()
 
-const liquidStore = useLiquidStore()
+const solutionStore = useSolutionStore()
 const stepInfo = ref(props.step)
+onMounted(() => {
+  if (!solutionStore.solutionList.length) {
+    querySolutionList()
+  }
+})
 
 watch(stepInfo, (newVal) => {
   $emit('transferChange', newVal, props.order)
@@ -23,13 +29,17 @@ watch(stepInfo, (newVal) => {
   deep: true,
 })
 
-// const onDel = () => {
-//   emit('del', props.order)
-// }
+const querySolutionList = () => {
+  getSolsList().then((res) => {
+    if (res && res.list) {
+      solutionStore.updateSolution(res.list)
+    }
+  })
+}
 </script>
 
 <template>
-  <div class="right-contaner">
+  <div class="right-container">
     <section class="right-main">
       <span class="right-seq">{{ order }}</span>
       <span class="right-base">{{ StepCmdDescMap[stepInfo.method] }}</span>
@@ -45,7 +55,7 @@ watch(stepInfo, (newVal) => {
           </el-select>
           <div v-for="(liquidItem, liquidIndex) in tubeItem.addLiquidList" :key="liquidIndex" class="right-liquid right-base">
             <el-select v-model="liquidItem.solId" size="small" placeholder="请选择" style="width: 100px" class="right-base" :disabled="type === 'showlog'">
-              <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
             <div>
               <el-input v-model.number="liquidItem.volume" size="small" style="width: 100px" :disabled="type === 'showlog'" />
@@ -57,15 +67,19 @@ watch(stepInfo, (newVal) => {
 
       <section v-if="stepInfo.method === 'shaking' || stepInfo.method === 'delay'" class="right-shaking">
         <div class="flex items-center right-base">
-          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" />
+          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" :disabled="type === 'showlog'"/>
           <span class="ml-2">秒</span>
         </div>
       </section>
       <section v-if="stepInfo.method === 'startHeating'" class="right-shaking">
         <div class="flex items-center right-base">
-          加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" />
+          加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" :disabled="type === 'showlog'"/>
           <span class="ml-2">°C</span>
         </div>
+        <div class="flex items-center right-base">
+          加热时间：<el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" :disabled="type === 'showlog'"/>
+          <span class="ml-2">秒</span>
+        </div>
       </section>
     </template>
   </div>
@@ -73,9 +87,11 @@ watch(stepInfo, (newVal) => {
 </template>
 
 <style lang="scss" scoped>
-.right-contaner{
+.right-container{
   background-color: rgb(82 148 215 / .06);
   border-radius: 10px;
+  min-height: 40px;
+  padding-top: 10px;
 }
 
 .right-main{
@@ -101,7 +117,7 @@ watch(stepInfo, (newVal) => {
 }
 .right-liquid{
   display: flex;
-  height: 2.5rem;
+  height: 3rem;
 }
 
 .right-shaking{

src/router/routes.ts

@@ -94,7 +94,7 @@ const authRoutes: RouteRecordRaw[] = [
   {
     path: '/user',
     name: 'user',
-    component: () => import('views/home/index.vue'),
+    component: () => import('views/user/index.vue'),
     meta: {
       isDefault: true,
       title: '用户管理',

src/types/craft.d.ts

@@ -36,7 +36,8 @@ declare namespace CraftTypes {
   interface StartHeatingStepStruct {
     method: 'startHeating'
     params: {
-      temperature: number
+      temperature: number,
+      second: number
     }
   }
   interface StopHeatingStepStruct {
@@ -78,6 +79,8 @@ declare namespace CraftTypes {
     name?: string
     steps?: string
     oresId?: number
+    createTime?: string
+    updatetime?: string
   }
   interface craftStatus {
     showDialog: () => void

src/types/solution.d.ts

@@ -5,9 +5,4 @@ declare namespace Solution {
     updateTime?: string
     createTime?: string
   }
-
-  interface SolutionItemList {
-    list: SolutionItem[]
-    total: number
-  }
 }

src/types/user.d.ts

@@ -10,6 +10,16 @@ declare namespace User {
     deleted: string
     fixedUser: string
   }
+
+  interface AddUser {
+    username: string | number
+    nickname: string | number
+    password: string | number
+    role: string | number
+    fixedUser: string | number
+    deleted: string | number
+  }
+
   interface Login {
     username: string
     password: string

src/views/container/index.vue

@@ -10,14 +10,14 @@ onMounted(async () => {
   await querySolutionList()
   queryContainerList()
 })
-const solutionList = ref([])
+const solutionList = ref<Solution.SolutionItem[]>([])
 const solutionMap = ref<Record<string | number, string>>({})
 const solutionStore = useSolutionStore()
 const querySolutionList = async () => {
   const res = await getSolsList()
   if (res && res.list) {
     solutionList.value = res.list
-    solutionList.value.forEach((item: any) => {
+    solutionList.value.forEach((item) => {
       if (item.id) {
         solutionMap.value[item.id] = item.name
       }
@@ -29,7 +29,7 @@ const querySolutionList = async () => {
 const queryContainerList = () => {
   getContainerList().then((res) => {
     if (res) {
-      const list: Container.ContainerItem[] = res
+      const list: Container.ContainerItem[] = res.list
       const solutionList: Container.ContainerItem[] = []
       list.forEach((item, index) => {
         // 只有8种，不会多也不会少, 多的不要

src/views/container/liquidItem.vue

@@ -32,7 +32,7 @@ const solutionProcess = computed(() => {
   const percent = 100 - (difference * 100)
   return percent
 })
-const onInputBlur = (e: any) => {
+const onInputBlur = (e: { target: { value: string } }) => {
   solutionInfo.value.capacityUsed = e.target.value
   saveContainer()
 }

src/views/craft/index.vue

@@ -6,7 +6,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-const tableData = ref([])
+const tableData = ref<CraftTypes.Craft[]>([])
 const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
 const selectable = ref()
 const multipleSelection = ref<CraftTypes.Craft[]>()
@@ -15,16 +15,36 @@ const heatId = ref()
 const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
 const route = useRoute()
 const router = useRouter()
-const oresId = route.query.oreId
+const oresId = route.query.oreId as string
 onMounted(() => {
   queryCrafList()
 })
-
+// 加热区列表
+const heatList = [{
+  id: 'heat_module_01',
+  name: '加热区_01',
+}, {
+  id: 'heat_module_02',
+  name: '加热区_02',
+}, {
+  id: 'heat_module_03',
+  name: '加热区_03',
+}, {
+  id: 'heat_module_04',
+  name: '加热区_04',
+}, {
+  id: 'heat_module_05',
+  name: '加热区_05',
+}, {
+  id: 'heat_module_06',
+  name: '加热区_06',
+}]
 const queryCrafList = () => {
   const params = {
     oresId,
   }
   getCraftList(params).then((res) => {
+    console.log('res---', res)
     tableData.value = res
   })
 }
@@ -161,7 +181,7 @@ const returnOre = () => {
       <div style="display: flex; justify-content: center;align-items: center;">
         <label>选择加热区：</label>
         <el-select v-model="heatId" style="width:200px" size="small">
-          <el-option v-for="el in 6" :key="el" :label="`加热区${el}`" :value="el" />
+          <el-option v-for="el in heatList" :key="el.id" :label="`${el.name}`" :value="el.id" />
         </el-select>
       </div>
       <div style="display: flex; justify-content: center;align-items: center; height:100px">

src/views/solution/index.vue

@@ -7,7 +7,7 @@ import { onMounted, ref } from 'vue'
 onMounted(() => {
   querySolutionList()
 })
-const tableData = ref([])
+const tableData = ref<Solution.SolutionItem[]>([])
 const visible = ref(false)
 const name = ref('')
 const loading = ref(false)

src/views/user/index.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus'
+import { addUser, userList } from '@/apis/user'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+onMounted(() => {
+  queryUserList()
+})
+const userDataList = ref<User.User[]>([])
+const visible = ref(false)
+const userForm = ref<Record<string, string | number>>({})
+const userFormRef = ref()
+const queryUserList = () => {
+  const params = {
+    pageSize: 10,
+    pageNum: 1,
+  }
+  userList(params).then((res) => {
+    console.log('res===', res)
+    userDataList.value = res.list
+  })
+}
+const createUser = () => {
+  visible.value = true
+}
+const editUser = () => {
+
+}
+const delUser = () => {
+  console.log(11)
+}
+const onSelectionChange = () => {
+  console.log(22)
+}
+const closeDialog = () => {
+  visible.value = false
+}
+const onConfirm = (formRef: FormInstance | undefined) => {
+  if (!formRef) {
+    return
+  }
+  formRef.validate((valid) => {
+    if (valid) {
+      const { username, nickname, password, confirmPassword, isAdmin } = userForm.value
+      if (password !== confirmPassword) {
+        ElMessage.error('两次输入的密码不一致')
+        return
+      }
+      const params: User.AddUser = {
+        username,
+        nickname,
+        password,
+        role: isAdmin ? 'ADMIN' : 'USER',
+        fixedUser: 'ENABLE',
+        deleted: 'ENABLE',
+      }
+      addUser(params).then(() => {
+        ElMessage.success('保存成功')
+        queryUserList()
+        closeDialog()
+      })
+    }
+    else {
+      console.log('error submit!')
+    }
+  })
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <FtButton @click="createUser">
+        添加用户
+      </FtButton>
+      <FtButton @click="editUser">
+        编辑用户
+      </FtButton>
+      <FtButton @click="delUser">
+        删除用户
+      </FtButton>
+    </div>
+    <div>
+      <el-table :data="userDataList" stripe style="width: 100%" @selection-change="onSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="username" label="登录名" />
+        <el-table-column prop="nickname" label="用户名" />
+        <el-table-column prop="fixedUser" label="状态">
+          <template #default="scoped">
+            <span v-if="scoped.row.fixedUser === 'ENABLE'">正常</span>
+            <span v-else>停用</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column prop="updateTime" label="更新时间" />
+      </el-table>
+    </div>
+    <FtDialog v-model="visible" title="添加用户" style="width:35vw;">
+      <div>
+        <el-form ref="userFormRef" :model="userForm" label-width="auto" style="max-width: 600px">
+          <el-form-item
+            label="登录名："
+            prop="username"
+            :rules="[{
+              required: true,
+              message: '输入登录名',
+              trigger: ['blur', 'change'],
+            }]"
+          >
+            <el-input v-model="userForm.username" placeholder="登录名" />
+          </el-form-item>
+          <el-form-item
+            label="用户名："
+            prop="nickname"
+            :rules="{
+              required: true,
+              message: '输入用户名',
+              trigger: 'blur',
+            }"
+          >
+            <el-input v-model="userForm.nickname" placeholder="用户名" />
+          </el-form-item>
+          <el-form-item
+            label="密码："
+            prop="password"
+            :rules="{
+              required: true,
+              message: '输入密码',
+              trigger: 'blur',
+            }"
+          >
+            <el-input v-model="userForm.password" type="password" placeholder="密码" />
+          </el-form-item>
+          <el-form-item
+            label="确认密码："
+            prop="confirmPassword"
+            :rules="{
+              required: true,
+              message: '输入密码',
+              trigger: 'blur',
+            }"
+          >
+            <el-input v-model="userForm.confirmPassword" type="password" placeholder="确认密码" />
+          </el-form-item>
+          <el-form-item
+            label="是否管理员："
+          >
+            <el-checkbox v-model="userForm.isAdmin" size="small" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="footer">
+          <FtButton @click="closeDialog">
+            取消
+          </FtButton>
+          <FtButton :click-handle="() => { onConfirm(userFormRef) }">
+            确定
+          </FtButton>
+        </div>
+      </template>
+    </FtDialog>
+  </div>
+</template>
+
+<style lang="css" scoped>
+  .footer{
+    display: flex;
+    justify-content: center;
+    width: 35vw;
+  }
+</style>