584 lines
16 KiB
Vue
584 lines
16 KiB
Vue
<template>
|
|
<div class="page-div">
|
|
<div class="tabs-div" :style="{ marginBottom: user == 3?'': '17px' }">
|
|
<div class="tabs-item active-tabs-item">
|
|
企业列表
|
|
<div class="tabs-item-active"></div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;">
|
|
<div style="flex: 1;">
|
|
<div class="search-div" v-if="user == 3">
|
|
<div style="display: flex;">
|
|
<div class="search-label">企业名称</div>
|
|
<a-input
|
|
style="width: 201px;"
|
|
class="search-input"
|
|
v-model:value="params.name"
|
|
placeholder="请输入企业名称"
|
|
/>
|
|
<div class="search-label">信用代码</div>
|
|
<a-input
|
|
style="width: 201px;"
|
|
class="search-input"
|
|
v-model:value="params.code"
|
|
placeholder="请输入信用代码"
|
|
/>
|
|
<div class="search-label">企业资质</div>
|
|
<a-input
|
|
style="width: 201px;"
|
|
class="search-input"
|
|
v-model:value="params.qualification"
|
|
placeholder="请输入企业资质"
|
|
/>
|
|
<a-button class="search-button search" type="primary" @click="query()">
|
|
<template #icon>
|
|
<div class="search-icon"></div>
|
|
</template>
|
|
搜索
|
|
</a-button>
|
|
</div>
|
|
<a-button class="search-button add-button" type="primary" @click="openAddEnterpriseModal('insert', '')">
|
|
<template #icon>
|
|
<PlusOutlined />
|
|
</template>
|
|
添加
|
|
</a-button>
|
|
</div>
|
|
<div class="content-div" :style="{ height: user == 3?'': '752px' }">
|
|
<a-table
|
|
:loading="loading"
|
|
class="content-table"
|
|
:row-selection="rowSelection"
|
|
:columns="getShowColumns()"
|
|
:data-source="showList"
|
|
:pagination="false"
|
|
:scroll="{ y: user == 3? 550: 550 }"
|
|
>
|
|
<template #bodyCell="{ column, text, record }">
|
|
<template v-if="
|
|
column.dataIndex === 'license' ||
|
|
(column.dataIndex === 'phone' && user !== 3)
|
|
">
|
|
<div class="blue-span">{{ text }}</div>
|
|
</template>
|
|
<template v-if="column.dataIndex === 'accountState'">
|
|
<div :class="`status-cell ${text == 0? 'success-status': 'error-status'}`">
|
|
<div class="status-icon"></div>
|
|
{{ text == 0? '正常': '停用' }}
|
|
</div>
|
|
</template>
|
|
<template v-if="column.dataIndex === 'operate'">
|
|
<a-dropdown overlayClassName="operate-dropdown" placement="bottom" :arrow="{ pointAtCenter: true }">
|
|
<template #overlay>
|
|
<a-menu @click="operateClick">
|
|
<a-menu-item key="1" :disabled="record.isReview" @click="openAddEnterpriseModal('update',record)">修改</a-menu-item>
|
|
<a-menu-item key="2" :disabled="record.isReview" @click="review(record)" v-if="user == 3">审核</a-menu-item>
|
|
<a-menu-item key="4" v-if="user == 3" @click="accountManage(record)">账号管理</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
<a-button class="operate-button" type="primary">
|
|
操作
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<div class="pagination-div">
|
|
<a-pagination
|
|
v-model:current="page"
|
|
v-model:pageSize="limit"
|
|
show-quick-jumper
|
|
:total="total"
|
|
@change="paginationChange"
|
|
:show-total="total => `共 ${total} 条数据`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="user == 3" style="width: 466px;margin-left: 22px;">
|
|
<div class="search-div" style="justify-content: end;">
|
|
<a-button style="width: 93px;margin-right: 10px;" class="search-button" type="primary" >
|
|
<template #icon>
|
|
<PlusOutlined />
|
|
</template>
|
|
添加
|
|
</a-button>
|
|
<a-button style="width: 93px;" class="search-button" type="primary" >
|
|
操作
|
|
</a-button>
|
|
</div>
|
|
<div class="content-div right-content">
|
|
<div class="right-content-title">
|
|
<div class="title-icon"></div>
|
|
<div class="title-span">企业信息</div>
|
|
</div>
|
|
<div class="interval"></div>
|
|
<div class="from-item" style="margin-bottom: 20px;">
|
|
<div class="from-title">标题</div>
|
|
<div class="from-content">
|
|
<a-input class="from-input"
|
|
v-model:value="fromValue.title"
|
|
placeholder="请输入公告标题"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="from-item" style="margin-bottom: 20px;">
|
|
<div class="from-title">时间</div>
|
|
<div class="from-content">
|
|
<a-date-picker
|
|
class="from-date-picker"
|
|
v-model:value="fromValue.time"
|
|
placeholder="请选择日期时间"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="from-item" style="margin-bottom: 20px;">
|
|
<div class="from-title">正文内容</div>
|
|
<div class="from-content">
|
|
<a-textarea
|
|
class="from-textarea"
|
|
v-model:value="fromValue.content"
|
|
placeholder="请编写相关招标内容"
|
|
:rows="4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="right-button-div">
|
|
<a-button class="edit-button">编辑</a-button>
|
|
<a-button class="save-button" type="primary">发布</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-modal width="775px" v-model:open="insertModalOpen" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
|
|
<InsertModal
|
|
:modalType="modalType"
|
|
:info="showInfo"
|
|
@changeAddModal="changeAddModal"
|
|
@query="query"
|
|
/>
|
|
</a-modal>
|
|
<a-modal width="775px" v-model:open="accountManageModal" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
|
|
<AccountManage
|
|
:info="enterpriseInfo"
|
|
@changeManageModal="changeManageModal"
|
|
@query="query"
|
|
/>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue"
|
|
import { yearOptions, proxyColumns, supplierColumns, proprietorColumns, data } from './util'
|
|
import { SearchOutlined, PlusOutlined, DownOutlined } from '@ant-design/icons-vue'
|
|
import { LoadBidCompanyInfo, ReviewBidCompanyInfo } from '@/api/demo/enterprise'
|
|
import { getUserType } from '@/views/demo/util'
|
|
import InsertModal from './InsertModal/index.vue'
|
|
import AccountManage from './AccountManage/index.vue'
|
|
import { message } from "ant-design-vue"
|
|
|
|
onMounted(() => {
|
|
query()
|
|
})
|
|
const user = ref(getUserType())
|
|
const params = ref({
|
|
name: null,
|
|
code: null,
|
|
qualification: null,
|
|
})
|
|
const fromValue = ref({
|
|
title:'',
|
|
time: '',
|
|
content: '',
|
|
})
|
|
const showList = ref([])
|
|
const page = ref(1)
|
|
const limit = ref(10)
|
|
const total = ref(0)
|
|
const loading = ref(false)
|
|
const insertModalOpen = ref(false)
|
|
const accountManageModal = ref(false)
|
|
const modalType = ref('')
|
|
const showInfo = ref({})
|
|
const enterpriseInfo = ref({})
|
|
|
|
const rowSelection = {
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
},
|
|
getCheckboxProps: (record) => ({
|
|
disabled: record.name === 'Disabled User', // Column configuration not to be checked
|
|
name: record.name,
|
|
}),
|
|
};
|
|
const paginationChange = (a,b) => {
|
|
console.log(a,b)
|
|
query()
|
|
}
|
|
const getShowColumns = () => {
|
|
switch(user.value){
|
|
case 1:
|
|
return proxyColumns
|
|
case 2:
|
|
return supplierColumns
|
|
case 3:
|
|
return proprietorColumns
|
|
}
|
|
}
|
|
const operateClick = (a,b,c) => {
|
|
console.log(a,b,c)
|
|
}
|
|
const query = () => {
|
|
let requestParams = {
|
|
...params.value,
|
|
page: page.value,
|
|
limit: limit.value,
|
|
}
|
|
loading.value = true
|
|
LoadBidCompanyInfo(requestParams, user.value).then(res => {
|
|
total.value = res.total
|
|
showList.value = res.items
|
|
}).finally(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
const changeAddModal = (type) => {
|
|
insertModalOpen.value = type
|
|
}
|
|
const changeManageModal = (type) => {
|
|
accountManageModal.value = type
|
|
}
|
|
const openAddEnterpriseModal = (type, item) => {
|
|
modalType.value = type
|
|
if(type == 'update'){
|
|
showInfo.value = item
|
|
}
|
|
changeAddModal(true)
|
|
}
|
|
const review = (record) => {
|
|
ReviewBidCompanyInfo(record.id).then(res => {
|
|
message.success('企业信息审核成功')
|
|
query()
|
|
})
|
|
}
|
|
const accountManage = (record) => {
|
|
enterpriseInfo.value = record
|
|
accountManageModal.value = true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-div{
|
|
padding: 17px 38px 26px 38px;
|
|
background: #F5F5FA;
|
|
.tabs-div{
|
|
height: 82px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
|
|
border-radius: 6px;
|
|
padding-top: 25px;
|
|
padding-left: 57px;
|
|
display: flex;
|
|
margin-bottom: 37px;
|
|
.tabs-item{
|
|
width: 94px;
|
|
height: 56px;
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
color: #1C1C1C;
|
|
line-height: 34px;
|
|
margin-right: 66px;
|
|
opacity: 0.6;
|
|
cursor: pointer;
|
|
.tabs-item-active{
|
|
margin-top: 17px;
|
|
width: 100%;
|
|
height: 6px;
|
|
background: #0081FF;
|
|
border-radius: 5px 5px 0px 0px;
|
|
}
|
|
}
|
|
.active-tabs-item{
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
.search-div{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 27px;
|
|
.search-select{
|
|
margin-right: 12px;
|
|
:deep(.ant-select-selector){
|
|
height: 40px;
|
|
}
|
|
:deep(.ant-select-selection-item){
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
}
|
|
:deep(.ant-select-selection-placeholder){
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
}
|
|
.search-select-suffixIcon{
|
|
width: 10px;
|
|
height: 6px;
|
|
background-image: url('/public/tender/search_select_icon.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.search-input{
|
|
margin-right: 12px;
|
|
}
|
|
.search-button{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
background: #0081FF;
|
|
border-radius: 5px;
|
|
font-family: PingFangSC-Semibold;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
.search-icon{
|
|
width: 14px;
|
|
height: 14px;
|
|
background-image: url('/public/tender/search_icon.png');
|
|
background-size: 100% 100%;
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
.search-label{
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
.search{
|
|
width: 82px;
|
|
}
|
|
.add-button{
|
|
width: 116px;
|
|
}
|
|
.search-year{
|
|
width: 111px;
|
|
}
|
|
.search-name{
|
|
width: 142px;
|
|
}
|
|
.search-type{
|
|
width: 142px;
|
|
}
|
|
}
|
|
.content-div{
|
|
height: 685px;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
.content-table{
|
|
height: calc(100% - 40px);
|
|
margin-bottom: 10px;
|
|
.blue-span{
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #0081FF;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.status-cell{
|
|
display: flex;
|
|
align-items: center;
|
|
.status-icon{
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
.success-status{
|
|
.status-icon{
|
|
background: #04CE3C;
|
|
}
|
|
}
|
|
.error-status{
|
|
color: rgba(0, 0, 0, 0.3);
|
|
.status-icon{
|
|
background: #CE0404;
|
|
}
|
|
}
|
|
.operate-button{
|
|
width: 70px;
|
|
height: 30px;
|
|
background: #0081FF;
|
|
border-radius: 4px;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #FBFBFB;
|
|
line-height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
:deep(.anticon){
|
|
margin-inline-start: 3px;
|
|
}
|
|
}
|
|
:deep(.ant-table-body){
|
|
.ant-table-cell{
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
:deep(.ant-table-header){
|
|
.ant-table-cell{
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #5A607F;
|
|
line-height: 20px;
|
|
}
|
|
.ant-table-cell::before{
|
|
display: none;
|
|
}
|
|
}
|
|
:deep(.ant-checkbox-checked){
|
|
.ant-checkbox-inner{
|
|
background-color: #0081FF;
|
|
border-color: #0081FF;
|
|
}
|
|
}
|
|
}
|
|
.pagination-div{
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
}
|
|
.right-content{
|
|
padding: 19px 24px 31px 25px;
|
|
.right-content-title{
|
|
display: flex;
|
|
height: 24px;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
.title-icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('/public/enterpriselist/enterpriselist_right_icon.png');
|
|
background-size: 100% 100%;
|
|
margin-right: 10px;
|
|
}
|
|
.title-span{
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #5A607F;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.interval{
|
|
height: 1px;
|
|
background: #E6E9F4;
|
|
margin-left: -25px;
|
|
margin-right: -24px;
|
|
margin-bottom: 19px;
|
|
}
|
|
.from-item{
|
|
.from-title{
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #000000;
|
|
line-height: 20px;
|
|
margin-bottom: 7px;
|
|
}
|
|
.from-content{
|
|
.from-input{
|
|
height: 40px;
|
|
background: #FFFFFF;
|
|
border-radius: 6px;
|
|
border: 1px solid #A9BBD8;
|
|
}
|
|
.from-date-picker{
|
|
width: 100%;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
border: 1px solid #A9BBD8;
|
|
}
|
|
.from-textarea{
|
|
height: 316px;
|
|
background: #FFFFFF;
|
|
border-radius: 6px;
|
|
border: 1px solid #A9BBD8;
|
|
}
|
|
}
|
|
}
|
|
.right-button-div{
|
|
display: flex;
|
|
justify-content: end;
|
|
.edit-button{
|
|
width: 93px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
border: 1px solid #0081FF;
|
|
font-family: PingFangSC-Semibold;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #0081FF;
|
|
line-height: 21px;
|
|
margin-right: 10px;
|
|
}
|
|
.save-button{
|
|
width: 93px;
|
|
height: 40px;
|
|
background: #0081FF;
|
|
border-radius: 6px;
|
|
font-family: PingFangSC-Semibold;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.operate-dropdown{
|
|
.ant-dropdown-menu-item:hover{
|
|
font-weight: 500;
|
|
color: #1E5EFF;
|
|
background-color: #ECF2FF !important;
|
|
}
|
|
}
|
|
</style>
|