dev
parent
5ff0a30ed6
commit
f83e66ee2c
@ -1 +1,37 @@
|
|||||||
@import "./antd.less";
|
@import "./antd.less";
|
||||||
|
// 公共样式
|
||||||
|
#app{
|
||||||
|
background: #E5E5E5;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding: 13px;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
padding: 13px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.cardTitle{
|
||||||
|
border-left: 8px solid #205FBD;
|
||||||
|
padding-left:10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
#commonTable{
|
||||||
|
margin: 24px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
margin: 30px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
height: 84px;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
line-height: 84px;
|
||||||
|
box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.35);
|
||||||
|
border-radius: 4px 4px 0px 0px;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
left: 200px;
|
||||||
|
}
|
||||||
@ -1,26 +1,277 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2021-11-22 15:56:04
|
|
||||||
* @LastEditTime: 2021-11-22 17:14:00
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
* @FilePath: /ansu-business/src/views/Employee/index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="main">
|
||||||
<div class="left">
|
<a-row>
|
||||||
|
<a-col :span="4" class="left-tree">
|
||||||
|
<a-input-search
|
||||||
|
style="margin-bottom: 8px"
|
||||||
|
placeholder="请输入搜索信息"
|
||||||
|
@change="onChange"
|
||||||
|
/>
|
||||||
|
<a-tree
|
||||||
|
v-model="checkedKeys"
|
||||||
|
checkable
|
||||||
|
:expanded-keys="expandedKeys"
|
||||||
|
:auto-expand-parent="autoExpandParent"
|
||||||
|
:selected-keys="selectedKeys"
|
||||||
|
:tree-data="treeData"
|
||||||
|
@expand="onExpand"
|
||||||
|
@select="onSelect"
|
||||||
|
/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="20">
|
||||||
|
<div class="search-box">
|
||||||
|
<a-space size="large">
|
||||||
|
<a-input placeholder="请输入申请人/公司名" />
|
||||||
|
<a-select style="width: 200px" placeholder="选择状态" />
|
||||||
|
<a-button type="primary">查 询</a-button>
|
||||||
|
<a-button>重 置</a-button>
|
||||||
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<!-- 表格 -->
|
||||||
|
<div id="commonTable">
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<a-space size="large">
|
||||||
|
<a-button type="primary" :loading="loading"> 新增员工 </a-button>
|
||||||
|
<a-button :disabled="!hasSelected" :loading="loading">
|
||||||
|
批量操作
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
<span style="margin-left: 8px">
|
||||||
|
<template v-if="hasSelected">
|
||||||
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<a-table
|
||||||
|
:scroll="{ x: 1300 }"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:pagination="pagination"
|
||||||
|
@change="handleTableChange"
|
||||||
|
:row-selection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: onSelectChange,
|
||||||
|
}"
|
||||||
|
:row-key="
|
||||||
|
(record, index) => {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 操作 -->
|
||||||
|
<span slot="action" slot-scope="scope">
|
||||||
|
<a @click="detail(scope)">详情</a>
|
||||||
|
<span style="margin: 5px">|</span>
|
||||||
|
<a-switch size="small"></a-switch>
|
||||||
|
<span style="margin: 5px">|</span>
|
||||||
|
<a @click="detail(scope)">重置密码</a>
|
||||||
|
</span>
|
||||||
|
<span slot="formatter" slot-scope="scope">{{
|
||||||
|
scope === 1 ? "可" : ""
|
||||||
|
}}</span>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const treeData = [
|
||||||
|
{
|
||||||
|
title: "0-0",
|
||||||
|
key: "0-0",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: "0-0-0",
|
||||||
|
key: "0-0-0",
|
||||||
|
children: [
|
||||||
|
{ title: "0-0-0-0", key: "0-0-0-0" },
|
||||||
|
{ title: "0-0-0-1", key: "0-0-0-1" },
|
||||||
|
{ title: "0-0-0-2", key: "0-0-0-2" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "0-0-1",
|
||||||
|
key: "0-0-1",
|
||||||
|
children: [
|
||||||
|
{ title: "0-0-1-0", key: "0-0-1-0" },
|
||||||
|
{ title: "0-0-1-1", key: "0-0-1-1" },
|
||||||
|
{ title: "0-0-1-2", key: "0-0-1-2" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "0-0-2",
|
||||||
|
key: "0-0-2",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "0-1",
|
||||||
|
key: "0-1",
|
||||||
|
children: [
|
||||||
|
{ title: "0-1-0-0", key: "0-1-0-0" },
|
||||||
|
{ title: "0-1-0-1", key: "0-1-0-1" },
|
||||||
|
{ title: "0-1-0-2", key: "0-1-0-2" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "0-2",
|
||||||
|
key: "0-2",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Employee",//员工管理
|
data() {
|
||||||
|
return {
|
||||||
|
expandedKeys: ["0-0-0", "0-0-1"],
|
||||||
|
autoExpandParent: true,
|
||||||
|
checkedKeys: ["0-0-0"],
|
||||||
|
selectedKeys: [],
|
||||||
|
treeData,
|
||||||
|
// 搜索项
|
||||||
|
searchForm: {
|
||||||
|
name: "",
|
||||||
|
code: "",
|
||||||
|
},
|
||||||
|
// 列
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "Name",
|
||||||
|
dataIndex: "name",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender",
|
||||||
|
dataIndex: "gender",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender1",
|
||||||
|
dataIndex: "gender1",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender2",
|
||||||
|
dataIndex: "gender2",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender3",
|
||||||
|
dataIndex: "gender3",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender4",
|
||||||
|
dataIndex: "gender4",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender5",
|
||||||
|
dataIndex: "gender5",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Gender6",
|
||||||
|
dataIndex: "gender6",
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "status",
|
||||||
|
dataIndex: "status",
|
||||||
|
scopedSlots: { customRender: "formatter" },
|
||||||
|
width: "200",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "action",
|
||||||
|
key: "action",
|
||||||
|
width: "180",
|
||||||
|
fixed: "right",
|
||||||
|
scopedSlots: { customRender: "action" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 数据
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
name: "11",
|
||||||
|
id: 1,
|
||||||
|
status: 1,
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
],
|
||||||
|
// 分页
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
selectedRowKeys: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasSelected() {
|
||||||
|
return this.selectedRowKeys.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
checkedKeys(val) {
|
||||||
|
console.log("onCheck", val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onExpand(expandedKeys) {
|
||||||
|
console.log("onExpand", expandedKeys);
|
||||||
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||||
|
// or, you can remove all expanded children keys.
|
||||||
|
this.expandedKeys = expandedKeys;
|
||||||
|
this.autoExpandParent = false;
|
||||||
|
},
|
||||||
|
onCheck(checkedKeys) {
|
||||||
|
console.log("onCheck", checkedKeys);
|
||||||
|
this.checkedKeys = checkedKeys;
|
||||||
|
},
|
||||||
|
onSelect(selectedKeys, info) {
|
||||||
|
console.log("onSelect", info);
|
||||||
|
this.selectedKeys = selectedKeys;
|
||||||
|
},
|
||||||
|
detail(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.$router.push({ name: "settle_detail" });
|
||||||
|
},
|
||||||
|
onSelectChange(selectedRowKeys) {
|
||||||
|
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
||||||
|
this.selectedRowKeys = selectedRowKeys;
|
||||||
|
},
|
||||||
|
handleTableChange(pagination) {
|
||||||
|
console.log(pagination);
|
||||||
|
const pager = { ...this.pagination };
|
||||||
|
pager.current = pagination.current;
|
||||||
|
pager.pageSize = pagination.pageSize;
|
||||||
|
this.pagination = pager;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.left-tree {
|
||||||
|
padding: 10px;
|
||||||
|
border-right: 1px solid #0000000f;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#commonTable {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue