14 changed files with 247 additions and 19 deletions
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<div class="mb-8 flex justify-between items-center"> |
|||
<div class="text-2xl font-semibold">流水账</div> |
|||
<div class="flex items-center"> |
|||
<a-button type="primary">早打卡</a-button> |
|||
<a-button class="mx-5" type="primary">晚打卡</a-button> |
|||
<FullscreenExitOutlined class="text-lg" style="color: #777" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<a-form class="flex flex-wrap" :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> |
|||
<a-form-item name="timeRange" label="时间" style="width: 250px; margin-right: 20px"> |
|||
<a-range-picker v-model:value="formState.timeRange" /> |
|||
</a-form-item> |
|||
|
|||
<a-form-item name="staffRange" label="员工" style="width: 250px; margin-right: 20px"> |
|||
<a-select |
|||
v-model:value="formState.staffRange" |
|||
:options="options" |
|||
mode="multiple" |
|||
placeholder="请选择员工" |
|||
@popupScroll="popupScroll" |
|||
></a-select> |
|||
</a-form-item> |
|||
|
|||
<a-form-item name="programName" label="项目" style="width: 250px; margin-right: 20px"> |
|||
<a-select |
|||
v-model:value="formState.programName" |
|||
:options="options" |
|||
mode="multiple" |
|||
placeholder="请输入项目名称" |
|||
@popupScroll="popupScroll" |
|||
></a-select> |
|||
</a-form-item> |
|||
|
|||
<!-- <a-form-item :wrapper-col="{ offset: 8, span: 16 }"> |
|||
<a-button type="primary">筛选</a-button> |
|||
<a-button class="mx-3" type="primary">导出</a-button> |
|||
<a-button>重置</a-button> |
|||
</a-form-item> --> |
|||
</a-form> |
|||
|
|||
<div> |
|||
<a-button type="primary">筛选</a-button> |
|||
<a-button class="mx-3" type="primary">导出</a-button> |
|||
<a-button>重置</a-button> |
|||
</div> |
|||
|
|||
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }"> |
|||
<template #bodyCell="{ column }"> |
|||
<template v-if="column.key === 'operation'"> |
|||
<a>action</a> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive } from 'vue'; |
|||
import { FullscreenExitOutlined } from '@ant-design/icons-vue'; |
|||
|
|||
const formState = reactive({ |
|||
timeRange: [], // 时间范围 |
|||
staffRange: ['a1', 'b2'], // 员工 |
|||
programName: ['a1', 'b2'], // 项目名称 |
|||
}); |
|||
|
|||
const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) })); |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: 'Full Name', |
|||
width: 100, |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
fixed: 'left', |
|||
}, |
|||
{ |
|||
title: 'Age', |
|||
width: 100, |
|||
dataIndex: 'age', |
|||
key: 'age', |
|||
fixed: 'left', |
|||
}, |
|||
{ |
|||
title: 'Column 1', |
|||
dataIndex: 'address', |
|||
key: '1', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 2', |
|||
dataIndex: 'address', |
|||
key: '2', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 3', |
|||
dataIndex: 'address', |
|||
key: '3', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 4', |
|||
dataIndex: 'address', |
|||
key: '4', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 5', |
|||
dataIndex: 'address', |
|||
key: '5', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 6', |
|||
dataIndex: 'address', |
|||
key: '6', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 7', |
|||
dataIndex: 'address', |
|||
key: '7', |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: 'Column 8', |
|||
dataIndex: 'address', |
|||
key: '8', |
|||
}, |
|||
{ |
|||
title: 'Action', |
|||
key: 'operation', |
|||
fixed: 'right', |
|||
width: 100, |
|||
}, |
|||
]; |
|||
const data = []; |
|||
|
|||
for (let i = 0; i < 100; i++) { |
|||
data.push({ |
|||
key: i, |
|||
name: `Edrward ${i}`, |
|||
age: 32, |
|||
address: `London Park no. ${i}`, |
|||
}); |
|||
} |
|||
|
|||
const popupScroll = () => { |
|||
console.log('popupScroll'); |
|||
}; |
|||
|
|||
const onFinish = values => { |
|||
console.log('Success:', values); |
|||
}; |
|||
|
|||
const onFinishFailed = errorInfo => { |
|||
console.log('Failed:', errorInfo); |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,18 @@ |
|||
<template> |
|||
<view class="w-full block text-center"> |
|||
<a-button type="primary" style="width: 250px" @click="openDailyAccount">流水账</a-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const store = useStore(); |
|||
|
|||
function openDailyAccount() { |
|||
store.commit('task/setTaskDetailUrl', ''); |
|||
sessionStorage.setItem('targetUrl', ''); |
|||
store.commit('task/setTaskDetailShow', 'dailyAccount'); |
|||
sessionStorage.setItem('taskDetailShow', 'dailyAccount'); |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue