feat(post): 添加岗位时-选择考勤规则-开窗显示和查询完成

src/components/OpenDialog/index.vue

 <template>
   <div>
-    <el-form ref="form" :model="openForm" inline>
-      <el-form-item v-for="(obj, key) in openForm" :key="key" :label="obj.name">
+    <el-form
+      :model="form"
+      inline>
+      <el-form-item v-for="(obj, key) in form"
+        :key="key"
+        :label="obj.name">
         <template v-if="obj.type === 'input'">
-          <el-input prefix-icon="el-icon-search" v-model="obj.value" clearable @input="sel"></el-input>
+          <el-input prefix-icon="Search"
+            v-model="obj.value"
+            clearable
+            @input="sel"></el-input>
         </template>
         <!-- 添加其他表单类型的模板 -->
       </el-form-item>
     </el-form>
     <!-- 添加表格和其他内容 -->
+    <el-table ref="myTable"
+      :data="tableData"
+      v-loading="tableLoading"
+      highlight-selection-row
+      @select="selectFn"
+      @select-all="selectAllFn">
+      <el-table-column v-if="tableData.length > 0"
+        type="selection"
+        width="50">
+      </el-table-column>
+      <el-table-column v-for="obj in tableHeaderList"
+        :prop="Object.keys(obj)[0]"
+        :label="Object.values(obj)[0]"
+        :formatter="formatterFn"
+        show-overflow-tooltip
+        width="130">
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import { debounce } from '@/utils';
 
-const openForm = ref({});
-const formOrder = ref([]);
+const form = ref({}); // 表单对象
 const tableHeaderList = ref([]);
 const tableData = ref([]);
-const tableLoading = ref(true);
-const isOnlyLoadData = ref(false);
+const tableLoading = ref(false);
+const isOnlyLoadData = ref(false); // 仅加载数据（因为标签和数据是在一个对象传进来的）
 
 const props = defineProps({
-  openObj: {
+  // 结构+数据
+  modelValue: {
     type: Object,
     required: true
   },
-  isCheckBox: {
-    type: Boolean,
-    default: false
-  },
-  nodeKeys: {
-    type: [String, Number]
+  // 查询参数
+  queryParams: {
+    type: Object,
+    required: true
   }
 });
 
-watch(props.openObj, (newValue) => {
-  console.log('newValue', newValue)
-  const newObj = {};
-  const order = [];
+const emits = defineEmits(['sel', 'update:queryParams']);
+
+watch(() => props.modelValue, (newValue) => {
+  // 加载结构
   if (!isOnlyLoadData.value) {
-    newValue.boxhead.forEach((obj, index) => {
-      newObj[obj.select_key] = obj;
-      order.push(obj.select_key);
+    // 准备表单结构
+    newValue.boxhead.forEach(obj => {
+      form.value[obj.select_key] = obj;
     });
-    openForm.value = newObj;
-    formOrder.value = order;
-  }
     tableHeaderList.value = newValue.queryDisplay;
+  }
+  // 加载数据
   tableData.value = newValue.rows;
   tableLoading.value = false;
+}, {
+  deep: true,
+  immediate: true
 });
 
 const formatterFn = (row, column) => {
   return row[column.property] || '无';
 };
 
+// 搜索框值变化
 const sel = debounce(() => {
   tableLoading.value = true;
   isOnlyLoadData.value = true;
-  const queryObj = {};
-  Object.entries(openForm.value).forEach(([key, value]) => {
+  const query = {};
+  Object.entries(form.value).forEach(([key, value]) => {
     if (value.value) {
-      queryObj[key] = value.value.trim();
+      query[key] = value.value.trim();
     }
   });
-  emit('sel', queryObj);
+  emits('update:queryParams', query);
+  emits('sel');
 });
 
 const selectAllFn = (rows) => {
   if (!props.isCheckBox) {
     table.clearSelection();
-    emit('input', []);
+    emits('input', []);
   }
 };
 
@@ -82,7 +108,7 @@ const selectFn = (rows) => {
     table.clearSelection();
     rows.length > 0 && table.toggleRowSelection(rows[rows.length - 1]);
   }
-  emit('input', rows.length > 0 ? [rows[rows.length - 1]] : []);
+  emits('input', rows.length > 0 ? [rows[rows.length - 1]] : []);
 };
 </script>
 

src/views/system/attendance/index.vue

@@ -444,4 +444,8 @@ const handleExport = () => {
   ::v-deep(.el-date-editor) {
     width: 100% !important;
   }
+
+  ::v-deep(.el-select){
+    width: 100%;
+  }
 </style>
\ No newline at end of file

src/views/system/post/index.vue

@@ -178,7 +178,9 @@
                   </template>
                 </el-input-tag>
               </template>
-              <open-dialog :openObj="attStruData" />
+              <open-dialog v-model="attStruData"
+                v-model:queryParams="attQuery"
+                @sel="getAttOpenDialog" />
             </el-popover>
           </el-form-item>
           <el-form-item label="岗位状态"
@@ -258,13 +260,9 @@
   // 获取考勤规则-开窗数据+结构
   const getAttOpenDialog = async () => {
     const { data } = await attendanceOpenFQAPI(attQuery.value)
-    console.log(data)
     attStruData.value = data
   }
   getAttOpenDialog()
-  const attendanceSelFn = () => {
-
-  }
 
   /** 取消按钮 */
   function cancel() {