yunzerwebsiteallinone/backend/src/views/apps/organization/components/OrgSettingsDialog.vue

<template>
  <el-dialog
    v-model="visible"
    title="组织架构设置"
    width="620px"
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="form" label-width="150px" v-loading="loading">
      <el-divider content-position="left">编码规则</el-divider>

      <el-form-item label="自动生成编码">
        <el-switch v-model="form.auto_generate_codes" />
        <div class="form-tip">开启后，新建组织/员工/职位时留空编码将由系统生成</div>
      </el-form-item>

      <el-form-item label="组织编码前缀">
        <el-input v-model="form.org_code_prefix" maxlength="10" :disabled="!form.auto_generate_codes" />
      </el-form-item>

      <el-form-item label="员工账号前缀">
        <el-input v-model="form.employee_code_prefix" maxlength="10" :disabled="!form.auto_generate_codes" />
      </el-form-item>

      <el-form-item label="职位编码前缀">
        <el-input v-model="form.position_code_prefix" maxlength="10" :disabled="!form.auto_generate_codes" />
      </el-form-item>

      <el-form-item label="编码长度">
        <el-input-number
          v-model="form.code_length"
          :min="4"
          :max="32"
          :disabled="!form.auto_generate_codes"
          controls-position="right"
        />
        <div class="form-tip">含前缀的总长度</div>
      </el-form-item>

      <el-form-item label="允许编码重复">
        <el-switch v-model="form.allow_duplicate_codes" />
        <div class="form-tip">关闭时，同一租户内编码必须唯一</div>
      </el-form-item>

      <el-divider content-position="left">层级限制</el-divider>

      <el-form-item label="最大层级数">
        <el-input-number v-model="form.max_org_levels" :min="1" :max="32" controls-position="right" />
        <div class="form-tip">新建与移动组织时都会校验</div>
      </el-form-item>

      <el-form-item label="单层最多子组织">
        <el-input-number v-model="form.max_org_children" :min="1" :max="1000" controls-position="right" />
      </el-form-item>

      <el-divider content-position="left">默认值</el-divider>

      <el-form-item label="默认组织类型">
        <el-radio-group v-model="form.default_org_type">
          <el-radio :value="1">企业单位</el-radio>
          <el-radio :value="0">部门</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="默认排序">
        <el-input-number v-model="form.default_sort" :min="0" :max="9999" controls-position="right" />
      </el-form-item>

      <el-form-item label="默认状态">
        <el-radio-group v-model="form.default_status">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider content-position="left">功能开关</el-divider>

      <el-form-item label="批量操作">
        <el-switch v-model="form.batch_operations" />
      </el-form-item>

      <el-form-item label="导出功能">
        <el-switch v-model="form.export_enabled" />
      </el-form-item>

      <el-form-item label="导入功能">
        <el-switch v-model="form.import_enabled" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="saving" @click="handleSubmit">保存设置</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { unwrap, useOrganizationApi } from '../composables';

const props = defineProps({
  /** 所属模块：erp（进销存）或 oa（办公自动化） */
  module: { type: String, default: 'erp' },
});

const emit = defineEmits(['saved']);

const api = computed(() => useOrganizationApi(props.module));

const visible = ref(false);
const loading = ref(false);
const saving = ref(false);
const formRef = ref();

const defaults = () => ({
  org_code_prefix: 'ORG',
  employee_code_prefix: 'EMP',
  position_code_prefix: 'POS',
  auto_generate_codes: true,
  code_length: 8,
  default_org_type: 0,
  default_sort: 0,
  default_status: 1,
  max_org_levels: 10,
  max_org_children: 50,
  allow_duplicate_codes: false,
  batch_operations: true,
  export_enabled: true,
  import_enabled: true,
});

const form = reactive(defaults());

const open = async () => {
  visible.value = true;
  loading.value = true;
  try {
    const data = unwrap(await api.value.getOrgSettings()) || {};
    Object.assign(form, defaults(), data);
  } catch (error) {
    ElMessage.error(error?.message || '加载设置失败');
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  saving.value = true;
  try {
    unwrap(await api.value.saveOrgSettings({ ...form }));
    ElMessage.success('设置已保存');
    visible.value = false;
    emit('saved');
  } catch (error) {
    ElMessage.error(error?.message || '保存设置失败');
  } finally {
    saving.value = false;
  }
};

defineExpose({ open });
</script>

<style lang="less" scoped>
.form-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}
</style>