126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<!-- 公司管理 -->
|
|
<div class="app-container">
|
|
<el-form ref="queryForm" size="small" :inline="true">
|
|
<el-form-item>
|
|
<el-input
|
|
placeholder="请输入搜索关键词"
|
|
v-model="queryParams.keyWord"
|
|
clearable
|
|
>
|
|
<i
|
|
slot="suffix"
|
|
class="el-icon-search"
|
|
style="cursor: pointer"
|
|
@click="getCompanyList"
|
|
/>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="onRegisterCompany"
|
|
>
|
|
注册公司
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="company-list">
|
|
<div
|
|
:key="index"
|
|
class="company-items"
|
|
v-for="(item, index) in companyList"
|
|
>
|
|
<CompanyCard
|
|
:companyInfo="item"
|
|
@openAddForm="openAddForm"
|
|
@updateTableList="getCompanyList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getCompanyList"
|
|
/>
|
|
|
|
<AddForm
|
|
:formType="formType"
|
|
:detailsId="detailsId"
|
|
v-if="formDialogVisible"
|
|
:formDialogVisible.sync="formDialogVisible"
|
|
@updateTableList="getCompanyList"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AddForm from './components/add-form'
|
|
import CompanyCard from './components/company-card'
|
|
import { getDeptListAPI } from '@/api/company-manage/index.js'
|
|
export default {
|
|
components: {
|
|
AddForm,
|
|
CompanyCard,
|
|
},
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
formType: 3,
|
|
companyList: [],
|
|
detailsId: '',
|
|
formDialogVisible: false,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
keyWord: '',
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
onRegisterCompany() {
|
|
this.formType = 3
|
|
this.formDialogVisible = true
|
|
},
|
|
async getCompanyList() {
|
|
const res = await getDeptListAPI(this.queryParams)
|
|
this.companyList = res.rows
|
|
this.total = res.total
|
|
},
|
|
openAddForm(type, detailsId) {
|
|
this.formType = type
|
|
this.detailsId = detailsId
|
|
this.formDialogVisible = true
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getCompanyList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.company-list {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 100%;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
.company-items {
|
|
width: calc((100% - 60px) / 5);
|
|
margin-right: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
& .company-items:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|