refactor(post): 重构给岗位分配考勤规则

src/components/OpenDialog/index.vue

 <template>
   <div>
-    <el-form
-      :model="form"
+    <el-form :model="form"
       inline>
       <el-form-item v-for="(obj, key) in form"
         :key="key"
@@ -16,14 +15,15 @@
       </el-form-item>
     </el-form>
     <!-- 添加表格和其他内容 -->
-    <el-table ref="myTable"
+    <el-table ref="tableRef"
       :data="tableData"
       v-loading="tableLoading"
       highlight-selection-row
-      @select="selectFn"
-      @select-all="selectAllFn">
-      <el-table-column v-if="tableData.length > 0"
-        type="selection"
+      :row-key="nodeKey"
+      :select-on-indeterminate="false"
+      @select="select"
+      @select-all="selectAll">
+      <el-table-column type="selection"
         width="50">
       </el-table-column>
       <el-table-column v-for="obj in tableHeaderList"
@@ -40,6 +40,7 @@
 <script setup>
 import { debounce } from '@/utils';
 
+const tableRef = ref(null) // 表格实例
 const form = ref({}); // 表单对象
 const tableHeaderList = ref([]);
 const tableData = ref([]);
@@ -48,20 +49,56 @@ const isOnlyLoadData = ref(false); // 仅加载数据（因为标签和数据是
 
 const props = defineProps({
   // 结构+数据
-  modelValue: {
+  structData: {
     type: Object,
     required: true
   },
+  // 选择的数据（要和 structData 里的 rows 数据一致）
+  modelValue: {
+    type: Array,
+    default: () => [],
+    required: true
+  },
   // 查询参数
   queryParams: {
     type: Object,
-    required: true
+    default: () => ({})
+  },
+  // 关键数据的属性
+  nodeKey: {
+    type: String,
+    default: 'id'
+  },
+  // 是否单选
+  isRadio: {
+    type: Boolean,
+    default: false
   }
 });
 
-const emits = defineEmits(['sel', 'update:queryParams']);
+const emits = defineEmits(['update:modelValue', 'sel', 'update:queryParams']);
 
-watch(() => props.modelValue, (newValue) => {
+// 更新表格行选中
+const updateCheck = (newValue) => {
+  nextTick(() => {
+    if (newValue.length > 0) {
+      // 遍历对比，选中/取消选中
+      props.structData.rows.forEach(o => {
+        // 参数 2：决定选中与否
+        tableRef.value.toggleRowSelection(o, newValue.some(item => item[props.nodeKey] === o[props.nodeKey]), false)
+      })
+    } else {
+      tableRef.value.clearSelection()
+    }
+  })
+}
+
+watch(() => props.modelValue, updateCheck, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => props.structData, (newValue) => {
   // 加载结构
   if (!isOnlyLoadData.value) {
     // 准备表单结构
@@ -73,6 +110,7 @@ watch(() => props.modelValue, (newValue) => {
   // 加载数据
   tableData.value = newValue.rows;
   tableLoading.value = false;
+  updateCheck(props.modelValue)
 }, {
   deep: true,
   immediate: true
@@ -96,19 +134,25 @@ const sel = debounce(() => {
   emits('sel');
 });
 
-const selectAllFn = (rows) => {
-  if (!props.isCheckBox) {
-    table.clearSelection();
-    emits('input', []);
+// 全选
+const selectAll = (selection) => {
+  if (props.isRadio) {
+    // 实现单选
+    emits('update:modelValue', selection.length > 0 ? [selection[selection.length - 1]] : []);
+  } else {
+    // 实现多选
+    emits('update:modelValue', selection);
   }
 };
-
-const selectFn = (rows) => {
-  if (!props.isCheckBox) {
-    table.clearSelection();
-    rows.length > 0 && table.toggleRowSelection(rows[rows.length - 1]);
+// 手动选中
+const select = (rows) => {
+  if (props.isRadio) {
+    // 实现单选
+    emits('update:modelValue', rows.length > 0 ? [rows[rows.length - 1]] : []);
+  } else {
+    // 实现多选
+    emits('update:modelValue', rows);
   }
-  emits('input', rows.length > 0 ? [rows[rows.length - 1]] : []);
 };
 </script>
 

src/views/system/post/index.vue

@@ -169,17 +169,21 @@
               <template #reference>
                 <el-input-tag v-model="form.ruleList"
                   tag-type="primary"
-                  tag-effect="plain"
-                  placeholder="选择考勤规则">
+                  tag-effect="light"
+                  placeholder="选择考勤规则"
+                  clearable>
                   <template #tag="{ value }">
-                    <div class="flex items-center">>
-                      <span>{{ value }}</span>
+                    <div class="flex items-center" @click.stop>
+                      <span>{{ value.ruleName }}</span>
                     </div>
                   </template>
                 </el-input-tag>
               </template>
-              <open-dialog v-model="attStruData"
+              <open-dialog v-model="form.ruleList"
+                :structData="attStruData"
                 v-model:queryParams="attQuery"
+                nodeKey="ruleId"
+                isRadio
                 @sel="getAttOpenDialog" />
             </el-popover>
           </el-form-item>
@@ -230,7 +234,9 @@
   const attStruData = ref({}); // 考勤开窗结构+对象
 
   const data = reactive({
-    form: {},
+    form: {
+     
+    },
     queryParams: {
       pageNum: 1,
       pageSize: 10,
@@ -263,6 +269,10 @@
     attStruData.value = data
   }
   getAttOpenDialog()
+  // 考勤规则改变
+  const ruleChange = (val) => {
+    console.log(val)
+  }
 
   /** 取消按钮 */
   function cancel() {
@@ -315,6 +325,9 @@
     const postId = row.postId || ids.value;
     getPost(postId).then(response => {
       form.value = response.data;
+      form.value.ruleList = [attStruData.value.rows.find(o => {
+        return o.ruleId === response.data.ruleId
+      })]
       open.value = true;
       title.value = "修改岗位";
     });
@@ -323,6 +336,8 @@
   /** 提交按钮 */
   function submitForm() {
     proxy.$refs["postRef"].validate(valid => {
+      form.value.ruleId = form.value.ruleList[0].ruleId
+      form.value.ruleName = form.value.ruleList[0].ruleName
       if (valid) {
         if (form.value.postId != undefined) {
           updatePost(form.value).then(response => {