|
|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <a-link type="text" @click="onClickSetWorkHour"> {{ formatWorkHours(record.time_range) }}</a-link>
|
|
|
+ <a-modal v-model:visible="showModel" title="设置工作时间" @cancel="handleCancel" @ok="handleOk">
|
|
|
+
|
|
|
+ <div style="margin-bottom:20px;">
|
|
|
+ <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">全选
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ <a-checkbox-group v-model="currentData" @change="handleChange">
|
|
|
+ <a-checkbox v-bind:key="h" v-for="h in defaultCheckedList" :value="h">{{ h }}</a-checkbox>
|
|
|
+ </a-checkbox-group>
|
|
|
+
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+/* eslint-disable no-bitwise, no-plusplus */
|
|
|
+
|
|
|
+import useLoading from '@/hooks/loading';
|
|
|
+import { defineProps, ref, reactive, defineEmits } from 'vue';
|
|
|
+import { JdUpdateAccountModel, JdUpdateAccount } from '@/api/jd';
|
|
|
+import { Message } from '@arco-design/web-vue';
|
|
|
+
|
|
|
+const { loading, setLoading } = useLoading(true);
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ record: any;
|
|
|
+}>();
|
|
|
+
|
|
|
+const emits = defineEmits(['change']);
|
|
|
+
|
|
|
+
|
|
|
+const showModel = ref(false);
|
|
|
+
|
|
|
+const indeterminate = ref(false)
|
|
|
+const checkedAll = ref(false)
|
|
|
+const currentData = ref<string[]>([])
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ id: 0,
|
|
|
+ tiem_range: 0
|
|
|
+});
|
|
|
+
|
|
|
+const defaultCheckedList = ref<string[]>(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
|
|
|
+ '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
|
|
|
+ '20', '21', '22', '23',
|
|
|
+]);
|
|
|
+
|
|
|
+const handleChangeAll = (value: any) => {
|
|
|
+ console.log(value)
|
|
|
+ indeterminate.value = false;
|
|
|
+ if (value) {
|
|
|
+ checkedAll.value = true;
|
|
|
+ currentData.value = defaultCheckedList.value
|
|
|
+ } else {
|
|
|
+ checkedAll.value = false;
|
|
|
+ currentData.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleChange = (values: any[]) => {
|
|
|
+ if (values.length === 3) {
|
|
|
+ checkedAll.value = true
|
|
|
+ indeterminate.value = false;
|
|
|
+ } else if (values.length === 0) {
|
|
|
+ checkedAll.value = false
|
|
|
+ indeterminate.value = false;
|
|
|
+ } else {
|
|
|
+ checkedAll.value = false
|
|
|
+ indeterminate.value = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const formatWorkHours = (workHours: number): string => {
|
|
|
+ if (workHours === 0) {
|
|
|
+ return '-';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (workHours === (1 << 24) - 1) {
|
|
|
+ return '全天';
|
|
|
+ }
|
|
|
+
|
|
|
+ const hours: number[] = [];
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ if (workHours & (1 << i)) {
|
|
|
+ hours.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return hours.join(', ');
|
|
|
+};
|
|
|
+
|
|
|
+const onClickSetWorkHour = () => {
|
|
|
+ showModel.value = true
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ showModel.value = true
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const GetWorkHours = () => {
|
|
|
+ let hours = 0;
|
|
|
+ currentData.value.forEach(hour => {
|
|
|
+ const hourInt = parseInt(hour, 10);
|
|
|
+ hours |= (1 << hourInt);
|
|
|
+ });
|
|
|
+ return hours;
|
|
|
+}
|
|
|
+
|
|
|
+// 将工作时间的整数表示转换为小时字符串数组的函数
|
|
|
+const GenerateData = (hours: number): string[] => {
|
|
|
+ const generatedData: string[] = [];
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ if (hours & (1 << i)) {
|
|
|
+ generatedData.push(i.toString().padStart(2, '0'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return generatedData;
|
|
|
+};
|
|
|
+currentData.value = GenerateData(props.record.time_range);
|
|
|
+handleChange(currentData.value)
|
|
|
+
|
|
|
+const handleOk = async () => {
|
|
|
+ console.log(currentData.value, GetWorkHours())
|
|
|
+ const timeRange = GetWorkHours()
|
|
|
+ const args = {
|
|
|
+ id: props.record.id,
|
|
|
+ name: "time_range",
|
|
|
+ val: timeRange
|
|
|
+ } as JdUpdateAccountModel;
|
|
|
+
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+
|
|
|
+ const { data } = await JdUpdateAccount(args);
|
|
|
+ console.log(data, data.msg);
|
|
|
+ const msg = data.msg || '更新成功!';
|
|
|
+ if (data.success) {
|
|
|
+ Message.success(msg);
|
|
|
+ showModel.value = false
|
|
|
+ emits('change', null);
|
|
|
+ } else {
|
|
|
+ Message.error(data.msg);
|
|
|
+ }
|
|
|
+ } catch (e) { console.log(e) }
|
|
|
+ setLoading(false);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|