feat: 新增设备切卡模式

src/views/settings/operation-password/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="operation-password-page" id="table-full-screen">
+      <ElCard shadow="never" class="art-table-card">
+        <ElTabs v-model="activeTab" type="card" class="setting-tabs">
+          <ElTabPane label="操作密码" name="operation-password">
+            <ElCard shadow="never">
+              <div class="setting-card">
+                <ElForm :model="opPwdForm" class="form" label-width="80">
+                  <ElFormItem label="状态">
+                    <ElTag :type="opPwdForm.is_set ? 'primary' : 'info'">
+                      {{ opPwdForm.is_set ? '已设置' : '未设置' }}
+                    </ElTag>
+                  </ElFormItem>
+
+                  <ElFormItem label="操作密码" prop="password">
+                    <ElInput
+                      v-model="opPwdForm.password"
+                      type="password"
+                      show-password
+                      placeholder="请输入操作密码"
+                      style="width: 300px"
+                    />
+                  </ElFormItem>
+
+                  <ElFormItem label="确认密码" prop="confirm_password">
+                    <ElInput
+                      v-model="opPwdForm.confirm_password"
+                      type="password"
+                      show-password
+                      placeholder="请再次输入操作密码"
+                      style="width: 300px"
+                    />
+                  </ElFormItem>
+
+                  <ElFormItem>
+                    <ElButton
+                      type="primary"
+                      @click="handleSetOperationPassword"
+                      :loading="opPwdLoading"
+                    >
+                      {{ opPwdForm.is_set ? '重置密码' : '设置密码' }}
+                    </ElButton>
+                  </ElFormItem>
+                </ElForm>
+              </div>
+            </ElCard>
+          </ElTabPane>
+        </ElTabs>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { useUserStore } from '@/store/modules/user'
+  import { ElForm, ElInput, ElTag, ElButton, ElMessage, ElTabs, ElTabPane } from 'element-plus'
+  import { SuperAdminService } from '@/api/modules'
+
+  defineOptions({ name: 'OperationPasswordSettings' })
+
+  const userStore = useUserStore()
+  const isSuperAdmin = computed(() => userStore.info.user_type === 1)
+
+  const activeTab = ref('operation-password')
+
+  const opPwdForm = reactive({
+    password: '',
+    confirm_password: '',
+    is_set: false
+  })
+  const opPwdLoading = ref(false)
+
+  const handleSetOperationPassword = async () => {
+    if (!opPwdForm.password) {
+      ElMessage.warning('请输入操作密码')
+      return
+    }
+    if (!opPwdForm.confirm_password) {
+      ElMessage.warning('请输入确认密码')
+      return
+    }
+    if (opPwdForm.password !== opPwdForm.confirm_password) {
+      ElMessage.warning('两次输入的密码不一致')
+      return
+    }
+
+    opPwdLoading.value = true
+    try {
+      await SuperAdminService.setOperationPassword({
+        password: opPwdForm.password,
+        confirm_password: opPwdForm.confirm_password
+      })
+      ElMessage.success(opPwdForm.is_set ? '操作密码重置成功' : '操作密码设置成功')
+      opPwdForm.password = ''
+      opPwdForm.confirm_password = ''
+      await fetchOperationPasswordStatus()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      opPwdLoading.value = false
+    }
+  }
+
+  const fetchOperationPasswordStatus = async () => {
+    if (!isSuperAdmin.value) return
+    try {
+      const res = await SuperAdminService.getOperationPasswordStatus()
+      if (res.code === 0) {
+        opPwdForm.is_set = res.data.is_set
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  onMounted(() => {
+    fetchOperationPasswordStatus()
+  })
+</script>
+
+<style scoped lang="scss">
+  .operation-password-page {
+    height: 100%;
+
+    :deep(.setting-tabs) {
+      .el-tabs__header {
+        margin: 0;
+      }
+
+      .el-tabs__nav-wrap::after {
+        display: none;
+      }
+    }
+
+    .setting-card {
+    }
+  }
+</style>