a

src/views/professional/teacherbase/status-lock-dialog.vue

@@ -0,0 +1,214 @@
+<template>
+  <el-dialog 
+    v-model="visible" 
+    title="锁定状态管理" 
+    width="600px"
+    class="status-lock-dialog"
+    @close="handleClose">
+    <div class="status-lock-content">
+      <div class="status-lock-description">
+        <el-icon class="status-lock-icon"><Lock /></el-icon>
+        <span>请选择需要锁定的模块，锁定后将无法进行编辑操作</span>
+      </div>
+      
+      <el-form :model="form" label-width="120px" class="status-lock-form">
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="职称管理">
+              <el-switch
+                inline-prompt
+                v-model="form.title"                 
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="职业资格">
+              <el-switch
+                inline-prompt
+                v-model="form.job"
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="教师资格证">
+              <el-switch
+                inline-prompt
+                v-model="form.teacherTitle"
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="学历学位">
+              <el-switch
+                inline-prompt
+                v-model="form.acade"
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="综合表彰">
+              <el-switch
+                inline-prompt
+                v-model="form.remix"
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="岗位晋升">
+              <el-switch
+                inline-prompt
+                v-model="form.work"
+                active-text="已锁定"
+                inactive-text="未锁定"
+                active-color="#f56c6c"
+                inactive-color="#67c23a">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    
+    <template #footer>
+      <div class="status-lock-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button 
+          type="primary" 
+          v-if="canEdit" 
+          @click="handleSubmit">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Lock } from '@element-plus/icons-vue'
+
+interface Props {
+  modelValue: boolean
+  formData?: any
+  canEdit?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'submit', data: any): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formData: () => ({
+    title: false,
+    job: true,
+    teacherTitle: true,
+    acade: true,
+    remix: true,
+    work: true
+  }),
+  canEdit: false
+})
+
+const emit = defineEmits<Emits>()
+
+const visible = ref(false)
+const form = ref<any>({
+  title: false,
+  job: true,
+  teacherTitle: true,
+  acade: true,
+  remix: true,
+  work: true
+})
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val && props.formData) {
+    form.value = { ...props.formData }
+  } else {
+    form.value = {
+      title: false,
+      job: true,
+      teacherTitle: true,
+      acade: true,
+      remix: true,
+      work: true
+    }
+  }
+})
+
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+})
+
+const handleClose = () => {
+  visible.value = false
+}
+
+const handleSubmit = () => {
+  emit('submit', { ...form.value })
+}
+</script>
+
+<style scoped lang="scss">
+.status-lock-dialog {
+  .status-lock-content {
+    padding: 20px 0;
+  }
+  
+  .status-lock-description {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 24px;
+    background: #fef0f0;
+    border: 1px solid #fbc4c4;
+    border-radius: 6px;
+    color: #f56c6c;
+    font-size: 14px;
+    
+    .status-lock-icon {
+      margin-right: 8px;
+      font-size: 18px;
+      color: #f56c6c;
+    }
+  }
+  
+  .status-lock-form {
+    :deep(.el-form-item) {
+      margin-bottom: 24px;
+    }
+  }
+  
+  .status-lock-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+</style>
+