代码优化

src/views/biz/onboarding/contract/index.vue

@@ -18,6 +18,14 @@
         </el-tag>
       </template>
 
+      <template #positionNames="scope">
+        <el-space wrap>
+          <el-tag v-for="name in scope.row.positionNames || []" :key="name" size="small">
+            {{ name }}
+          </el-tag>
+        </el-space>
+      </template>
+
       <template #status="scope">
         <el-tag size="small" :type="scope.row.status === 'enable' ? 'success' : 'info'">
           {{ scope.row.status === "enable" ? "启用" : "停用" }}
@@ -43,11 +51,66 @@
     <el-dialog
       v-model="templateVisible"
       :title="templateEditing ? '编辑合同模板' : '新增合同模板'"
-      width="580px"
+      width="720px"
       destroy-on-close
       append-to-body
     >
       <el-form :model="templateForm" label-width="110px">
+        <el-form-item label="所属公司" required>
+          <el-select
+            v-model="templateForm.companyId"
+            filterable
+            class="w-full"
+            placeholder="请选择所属公司"
+            @change="onTemplateCompanyChange"
+          >
+            <el-option
+              v-for="company in companies"
+              :key="company.id"
+              :label="company.companyName"
+              :value="company.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="所属部门" required>
+          <el-select
+            v-model="templateForm.departmentId"
+            filterable
+            class="w-full"
+            placeholder="请先选择所属公司"
+            :disabled="!templateForm.companyId"
+            @change="onTemplateDepartmentChange"
+          >
+            <el-option
+              v-for="department in departments"
+              :key="department.id"
+              :label="department.departmentName"
+              :value="department.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="适用岗位" required>
+          <el-select
+            v-model="templateForm.positionIds"
+            multiple
+            filterable
+            collapse-tags
+            collapse-tags-tooltip
+            class="w-full"
+            placeholder="请选择该合同可适用的岗位"
+            :disabled="!templateForm.departmentId"
+          >
+            <el-option
+              v-for="position in positions"
+              :key="position.id"
+              :label="position.positionName"
+              :value="position.id"
+            />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="模板编码" required>
           <el-input v-model="templateForm.templateCode" placeholder="如：LABOR_CONTRACT" />
         </el-form-item>
@@ -411,13 +474,16 @@
 </template>
 
 <script setup lang="ts" name="onboardingContract">
-import { computed, reactive, ref } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Check } from "@element-plus/icons-vue";
 import {
   onboardingTaskApi,
+  type OnboardingCompanyOption,
   type OnboardingContractTemplate,
   type OnboardingContractVersion,
+  type OnboardingDepartmentOption,
+  type OnboardingPositionOption,
   type OnboardingTemplateVariable
 } from "@/api/modules/biz/onboarding";
 import type { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
@@ -429,6 +495,9 @@ const drawerVisible = ref(false);
 const drawerActiveTab = ref("versions");
 const templateVisible = ref(false);
 const templateEditing = ref(false);
+const companies = ref<OnboardingCompanyOption[]>([]);
+const departments = ref<OnboardingDepartmentOption[]>([]);
+const positions = ref<OnboardingPositionOption[]>([]);
 const versions = ref<OnboardingContractVersion[]>([]);
 const versionVisible = ref(false);
 const variablesVisible = ref(false);
@@ -455,6 +524,9 @@ const variableCounts = computed(() => {
 });
 
 const emptyTemplate = (): Partial<OnboardingContractTemplate> => ({
+  companyId: undefined,
+  departmentId: undefined,
+  positionIds: [],
   templateCode: "",
   templateName: "",
   contractType: "",
@@ -488,8 +560,11 @@ const versionForm = reactive<Partial<OnboardingContractVersion>>(emptyVersion())
 const variableForm = reactive<Partial<OnboardingTemplateVariable>>(emptyVariable());
 
 const templateColumns: ColumnProps<OnboardingContractTemplate>[] = [
+  { prop: "companyName", label: "所属公司", minWidth: 160 },
+  { prop: "departmentName", label: "所属部门", minWidth: 140 },
   { prop: "templateCode", label: "模板编码", minWidth: 160, search: { el: "input" } },
   { prop: "templateName", label: "模板名称", minWidth: 200, search: { el: "input" } },
+  { prop: "positionNames", label: "适用岗位", minWidth: 200 },
   { prop: "contractType", label: "合同类型", width: 140, search: { el: "input" } },
   {
     prop: "status",
@@ -508,6 +583,33 @@ const templateColumns: ColumnProps<OnboardingContractTemplate>[] = [
 
 function resetTemplate() {
   Object.assign(templateForm, emptyTemplate());
+  departments.value = [];
+  positions.value = [];
+}
+
+async function loadCompanies() {
+  const { data } = await onboardingTaskApi.listCompanies();
+  companies.value = data || [];
+}
+
+async function onTemplateCompanyChange(companyId?: number) {
+  templateForm.departmentId = undefined;
+  templateForm.positionIds = [];
+  departments.value = [];
+  positions.value = [];
+  if (!companyId) return;
+
+  const { data } = await onboardingTaskApi.listDepartments(companyId);
+  departments.value = data || [];
+}
+
+async function onTemplateDepartmentChange(departmentId?: number) {
+  templateForm.positionIds = [];
+  positions.value = [];
+  if (!departmentId) return;
+
+  const { data } = await onboardingTaskApi.listPositionsByDepartment(departmentId);
+  positions.value = data || [];
 }
 
 function resetVersion() {
@@ -551,12 +653,27 @@ async function openTemplateEdit(row: OnboardingContractTemplate) {
   const { data } = await onboardingTaskApi.templateDetail({ id: row.id });
   templateEditing.value = true;
   Object.assign(templateForm, data);
+  if (data.companyId) {
+    const departmentResult = await onboardingTaskApi.listDepartments(data.companyId);
+    departments.value = departmentResult.data || [];
+  }
+  if (data.departmentId) {
+    const positionResult = await onboardingTaskApi.listPositionsByDepartment(data.departmentId);
+    positions.value = positionResult.data || [];
+  }
   templateVisible.value = true;
 }
 
 async function saveTemplate() {
-  if (!templateForm.templateCode || !templateForm.templateName || !templateForm.contractType) {
-    return ElMessage.warning("请填写模板编码、名称和合同类型");
+  if (
+    !templateForm.companyId
+    || !templateForm.departmentId
+    || !templateForm.positionIds?.length
+    || !templateForm.templateCode
+    || !templateForm.templateName
+    || !templateForm.contractType
+  ) {
+    return ElMessage.warning("请完整填写公司、部门、适用岗位及合同模板基本信息");
   }
   await onboardingTaskApi.saveTemplate(templateForm, templateEditing.value);
   templateVisible.value = false;
@@ -688,6 +805,8 @@ async function saveVariable() {
   await loadVariables();
   ElMessage.success("变量已确认并保存");
 }
+
+onMounted(loadCompanies);
 </script>
 
 <style scoped>
@@ -807,4 +926,4 @@ async function saveVariable() {
   padding: 2px 6px;
   border-radius: 4px;
 }
-</style>
+</style>