完成系统管理ui

src/api/system.js

@@ -153,6 +153,7 @@ export const checkinQueryApi = (data) =>
   request({
     url: '/api/sys/ding/group/query',
     params: data,
+    paramsSerializer,
   });
 export const checkinListApi = (data) =>
   request({

src/components/common/select-enable/index.vue

@@ -8,19 +8,23 @@
 </template>
 
 <script setup name="SelectEnable">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { ABLE_TYPE } from '@/config/constants';
 
-let optionList = ref([]);
-let selected = ref('');
-
-optionList.value = Object.keys(ABLE_TYPE).map((k) => {
-  return { value: k === 'true', label: ABLE_TYPE[k] };
-});
-
 const emit = defineEmits(['update:modelValue', 'change']);
 const props = defineProps({
   modelValue: { type: [Boolean, String], default: '' },
+  options: { type: Object },
+});
+
+let selected = ref('');
+
+const optionList = computed(() => {
+  const data = props.options ?? ABLE_TYPE;
+
+  return Object.keys(data).map((k) => {
+    return { value: k === 'true', label: data[k] };
+  });
 });
 
 const onChange = () => {

src/config/constants.js

@@ -22,6 +22,11 @@ export const EDUCATION_TYPE = {
   MIDDLE_SCHOOL: '初中',
 };
 // 启用/禁用
+export const TRUE_OR_FALSE_TYPE = {
+  true: '是',
+  false: '否',
+};
+// 启用/禁用
 export const ABLE_TYPE = {
   true: '启用',
   false: '禁用',

src/style/global.less

@@ -260,6 +260,9 @@ body {
 .text-indent {
   text-indent: 2em;
 }
+.width-full {
+  width: 100%;
+}
 .red {
   color: @error-color;
 }
@@ -267,6 +270,10 @@ body {
   color: @light-text-color;
 }
 
+.color-warning {
+  color: @warning-color;
+}
+
 // pages ---------------->
 // message-list
 .message-list {

src/views/system/config-manage/checkin-manage/edit-checkin-dialog.vue

@@ -2,32 +2,24 @@
   <my-dialog
     :visible="visible"
     :header="title"
-    :width="900"
+    :width="600"
     attach="body"
     :closeOnOverlayClick="false"
     @close="emit('update:visible', false)"
   >
-    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="120">
-      <t-row :gutter="[0, 20]">
+    <t-form ref="formRef" :data="formData" :rules="rules" labelAlign="top">
+      <t-row :gutter="[20, 20]">
         <t-col :span="6">
           <t-form-item label="考勤组名称" name="name">
             <t-input v-model="formData.name" clearable />
           </t-form-item>
         </t-col>
-        <t-col :span="6">
-          <t-form-item label="服务单元" name="serviceId">
-            <select-service-unit
-              v-model="formData.serviceId"
-              :filterParams="{}"
-            >
-            </select-service-unit>
-          </t-form-item>
-        </t-col>
+
         <t-col :span="6">
           <t-form-item label="适用考勤对象" name="dingRoleIds">
             <select-role
               v-model="formData.dingRoleIds"
-              :min-collapsed-num="2"
+              :min-collapsed-num="1"
               :filterable="false"
               multiple
             >
@@ -40,16 +32,27 @@
             </select-supplier>
           </t-form-item>
         </t-col>
-        <t-col :span="6">
+        <t-col :span="12">
           <t-form-item label="签到时段" name="signInTime">
-            <t-time-range-picker v-model="formData.signInTime" format="HH:mm" />
+            <t-time-range-picker
+              v-model="formData.signInTime"
+              format="HH:mm"
+              class="width-full"
+            />
           </t-form-item>
         </t-col>
-        <t-col :span="6">
-          <t-form-item label="签退时段" name="signOutTime">
+        <t-col :span="12">
+          <t-form-item name="signOutTime">
+            <template #label>
+              <span>签退时段</span>
+              <span class="color-warning m-l-5px"
+                >(签到时段设置后，24小时未覆盖到的时段默认为签退时段)</span
+              >
+            </template>
             <t-time-range-picker
               v-model="formData.signOutTime"
               format="HH:mm"
+              class="width-full"
             />
           </t-form-item>
         </t-col>
@@ -57,7 +60,7 @@
           <t-form-item label="审核角色" name="approveRoleIds">
             <select-role
               v-model="formData.approveRoleIds"
-              :min-collapsed-num="2"
+              :min-collapsed-num="1"
               :filterable="false"
               multiple
             >
@@ -65,8 +68,11 @@
           </t-form-item>
         </t-col>
         <t-col :span="6">
-          <t-form-item label="是否开启人脸" name="faceOpen">
-            <t-switch v-model="formData.faceOpen" />
+          <t-form-item label="是否开启人脸" name="faceOpen" required-mark>
+            <select-enable
+              v-model="formData.faceOpen"
+              :options="TRUE_OR_FALSE_TYPE"
+            />
           </t-form-item>
         </t-col>
         <t-col :span="6">
@@ -75,9 +81,20 @@
               v-model="formData.reissueCardCount"
               :decimalPlaces="0"
               :min="1"
+              theme="column"
+              style="width: 100%"
             />
           </t-form-item>
         </t-col>
+        <t-col :span="6">
+          <t-form-item label="服务单元" name="serviceId">
+            <select-service-unit
+              v-model="formData.serviceId"
+              :filterParams="{}"
+            >
+            </select-service-unit>
+          </t-form-item>
+        </t-col>
       </t-row>
     </t-form>
     <template #foot>
@@ -92,9 +109,9 @@
 import { ref, computed } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import useClearDialog from '@/hooks/useClearDialog';
-// import { CUSTOMER_TYPE } from '@/config/constants';
 import { checkinEditApi } from '@/api/system';
 import { omit } from 'lodash';
+import { TRUE_OR_FALSE_TYPE } from '@/config/constants';
 const emit = defineEmits(['update:visible', 'success']);
 const formRef = ref(null);
 
@@ -200,6 +217,14 @@ const rules = {
       trigger: 'change',
     },
   ],
+  reissueCardCount: [
+    {
+      required: true,
+      message: '允许补卡次数必填',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
 };
 const save = async () => {
   const valid = await formRef.value.validate();

src/views/system/config-manage/checkin-manage/index.vue

@@ -13,6 +13,32 @@
           :filterParams="{}"
         ></select-service-unit>
       </template>
+      <template #supplier="{ item, params }">
+        <select-supplier
+          v-model="params[item.prop]"
+          :min-collapsed-num="1"
+          :filterable="false"
+          multiple
+        ></select-supplier>
+      </template>
+      <template #dingRole="{ item, params }">
+        <select-role
+          v-model="params[item.prop]"
+          :min-collapsed-num="1"
+          :filterable="false"
+          multiple
+        >
+        </select-role>
+      </template>
+      <template #approveRole="{ item, params }">
+        <select-role
+          v-model="params[item.prop]"
+          :min-collapsed-num="1"
+          :filterable="false"
+          multiple
+        >
+        </select-role>
+      </template>
     </SearchForm>
     <div class="flex-1 page-wrap">
       <t-table
@@ -52,7 +78,7 @@
           }}
         </template>
         <template #status="{ col, row }">
-          {{ serviceUnitStatusFilter(row[col.colKey]) }}
+          <status-tag :value="row[col.colKey]" type="serviceUnit"></status-tag>
         </template>
         <template #create-time="{ col, row }">
           {{ timestampFilter(row[col.colKey]) }}
@@ -79,13 +105,16 @@
 </template>
 
 <script setup name="CheckinManage">
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
 import useFetchTable from '@/hooks/useFetchTable';
 import EditCheckinDialog from './edit-checkin-dialog.vue';
 import { checkinQueryApi, checkinDeleteApi } from '@/api/system';
-import { timestampFilter, serviceUnitStatusFilter } from '@/utils/filter';
+import { timestampFilter } from '@/utils/filter';
+import { SERVICE_UNIT_STATUS } from '@/config/constants';
+import { dictToOptionList } from '@/utils/tool';
+import { omit } from 'lodash';
 
 const showEditCheckinDialog = ref(false);
 const curRow = ref(null);
@@ -100,6 +129,36 @@ const fields = ref([
     labelWidth: 100,
     colSpan: 5,
     cell: 'service',
+    attrs: {
+      clearable: true,
+    },
+  },
+  {
+    prop: 'status',
+    label: '服务单元发布状态',
+    type: 'select',
+    labelWidth: 160,
+    colSpan: 5,
+    options: dictToOptionList(SERVICE_UNIT_STATUS),
+    attrs: {
+      clearable: true,
+    },
+  },
+  {
+    prop: 'supplierIds',
+    label: '适用供应商',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    cell: 'supplier',
+  },
+  {
+    prop: 'dingRoleIds',
+    label: '适用考勤对象',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    cell: 'dingRole',
   },
   {
     type: 'buttons',
@@ -114,14 +173,59 @@ const fields = ref([
       },
     ],
   },
+  {
+    prop: 'approveRoleIds',
+    label: '审核角色',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+    cell: 'approveRole',
+  },
+  {
+    prop: 'faceOpen',
+    label: '是否开启人脸',
+    type: 'select',
+    labelWidth: 160,
+    colSpan: 5,
+    options: [
+      {
+        label: '是',
+        value: 1,
+      },
+      {
+        label: '否',
+        value: 0,
+      },
+    ],
+    attrs: {
+      clearable: true,
+    },
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 10,
+    attrs: {
+      clearable: true,
+      valueType: 'time-stamp',
+    },
+  },
 ]);
 const params = reactive({
   serviceId: '',
+  status: '',
+  supplierIds: '',
+  dingRoleIds: '',
+  approveRoleIds: '',
+  faceOpen: null,
+  createTime: [],
 });
 
 const columns = [
-  { colKey: 'service', title: '服务单元', minWidth: 120 },
-  { colKey: 'status', title: '发布状态', cell: 'status', width: 100 },
+  { colKey: 'service', title: '服务单元', minWidth: 140 },
+  { colKey: 'status', title: '服务单元发布状态', width: 100 },
   { colKey: 'name', title: '考勤组名称', minWidth: 140 },
   {
     colKey: 'dingObjs',
@@ -129,13 +233,18 @@ const columns = [
     cell: 'ding-objs',
     minWidth: 200,
   },
-  { colKey: 'supplier', title: '适用供应商', minWidth: 140 },
+  { colKey: 'supplier', title: '适用供应商', minWidth: 200 },
   { colKey: 'signInTime', title: '签到时段', width: 160 },
   { colKey: 'signOutTime', title: '签退时段', width: 160 },
-  { colKey: 'auditRoles', title: '审核角色', cell: 'approve-objs', width: 120 },
+  {
+    colKey: 'auditRoles',
+    title: '审核角色',
+    cell: 'approve-objs',
+    minWidth: 200,
+  },
   { colKey: 'faceOpen', title: '是否开启人脸', cell: 'face-open', width: 120 },
   { colKey: 'reissueCardCount', title: '允许补卡次数', width: 120 },
-  { colKey: 'createName', title: '创建人', with: 120 },
+  { colKey: 'createName', title: '创建人', with: 140 },
   { colKey: 'createTime', title: '创建时间', cell: 'create-time', width: 180 },
   {
     title: '管理',
@@ -144,6 +253,17 @@ const columns = [
     width: 120,
   },
 ];
+
+const computedParams = computed(() => {
+  let data = omit(params, ['createTime']);
+  data.createStartTime = params.createTime[0];
+  data.createEndTime = params.createTime[1];
+  if (typeof data.faceOpen === 'number') {
+    data.faceOpen = !!data.faceOpen;
+  }
+  return data;
+});
+
 const {
   loading: tableLoading,
   pagination,
@@ -151,7 +271,7 @@ const {
   fetchData,
   search,
   onChange,
-} = useFetchTable(checkinQueryApi, { params }, false);
+} = useFetchTable(checkinQueryApi, { params: computedParams }, false);
 
 const handleAdd = () => {
   curRow.value = null;

src/views/system/notice-log/notice-manage/index.vue

@@ -119,11 +119,7 @@ import {
 } from '@/api/system';
 import { dictToOptionList } from '@/utils/tool';
 import { NOTICE_TYPE, PUBLISH_STATUS } from '@/config/constants';
-import {
-  noticeTypeFilter,
-  publishStatusFilter,
-  timestampFilter,
-} from '@/utils/filter';
+import { noticeTypeFilter, timestampFilter } from '@/utils/filter';
 
 const showEditNoticeDialog = ref(false);
 const showNoticeMessageDialog = ref(false);