224 lines
6.5 KiB
Vue
224 lines
6.5 KiB
Vue
<template>
|
|
<div class="company-card">
|
|
<div class="company-info">
|
|
<div>
|
|
<el-avatar size="large" :src="companyInfo.logo" />
|
|
</div>
|
|
<div style="flex: 1; padding-left: 14px">
|
|
<div class="company-title">
|
|
<div> {{ companyInfo.deptName }} </div>
|
|
<el-tag
|
|
type="success"
|
|
effect="dark"
|
|
size="mini"
|
|
v-if="companyInfo.status == 0"
|
|
>
|
|
启用中
|
|
</el-tag>
|
|
<el-tag
|
|
type="warning"
|
|
effect="dark"
|
|
size="mini"
|
|
v-if="companyInfo.status == 1"
|
|
>
|
|
停用
|
|
</el-tag>
|
|
<el-tag
|
|
type="danger"
|
|
effect="dark"
|
|
size="mini"
|
|
v-if="companyInfo.status == 2"
|
|
>
|
|
注销
|
|
</el-tag>
|
|
</div>
|
|
|
|
<p class="company-remark"> {{ companyInfo.remark }} </p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="items-card">
|
|
<div
|
|
:key="index"
|
|
class="items-center"
|
|
v-for="(item, index) in userList"
|
|
>
|
|
<div>{{ item.title_name }}</div>
|
|
<div>{{ item.count }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="items-card">
|
|
<!-- <el-button
|
|
type="text"
|
|
:key="index"
|
|
:icon="item.icon"
|
|
v-for="(item, index) in btnList"
|
|
@click="onClickButton(item.type)"
|
|
>
|
|
{{ item.btn_name }}
|
|
</el-button> -->
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-chat-dot-round"
|
|
v-if="companyInfo.delFlag == 0"
|
|
@click="onClickButton(1)"
|
|
>
|
|
详情
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="onClickButton(2)"
|
|
v-if="companyInfo.delFlag == 0"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
:style="{
|
|
color: companyInfo.delFlag == 0 ? '#409EFF' : '#999',
|
|
}"
|
|
:icon="
|
|
companyInfo.delFlag == 0 ? 'el-icon-delete' : 'el-icon-back'
|
|
"
|
|
@click="onClickButton(3)"
|
|
>
|
|
{{ companyInfo.delFlag == 0 ? '注销' : '撤回注销' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { turnOnOffAPI } from '@/api/company-manage/index.js'
|
|
export default {
|
|
props: {
|
|
companyInfo: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
userList: [
|
|
{ title_name: '用户', count: 0 },
|
|
{ title_name: '项目', count: 0 },
|
|
{ title_name: '设备', count: 0 },
|
|
],
|
|
btnList: [
|
|
{
|
|
btn_name: '详情',
|
|
icon: 'el-icon-chat-dot-round',
|
|
type: 1,
|
|
},
|
|
{
|
|
btn_name: '编辑',
|
|
icon: 'el-icon-edit',
|
|
type: 2,
|
|
},
|
|
{
|
|
btn_name: '注销',
|
|
icon: 'el-icon-delete',
|
|
type: 3,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onClickButton(type) {
|
|
if (type === 1 || type === 2) {
|
|
this.$emit('openAddForm', type, this.companyInfo.deptId)
|
|
} else {
|
|
this.$modal
|
|
.confirm(
|
|
`是否确认${
|
|
this.companyInfo.delFlag == 0 ? '注销' : '撤回注销'
|
|
}`,
|
|
)
|
|
.then(async () => {
|
|
// 组装参数
|
|
const { deptId, deptName, orderNum, delFlag } =
|
|
this.companyInfo
|
|
const params = {
|
|
deptId,
|
|
deptName,
|
|
orderNum,
|
|
delFlag: delFlag == 0 ? 2 : 0,
|
|
}
|
|
const res = await turnOnOffAPI(params)
|
|
if (res.code === 200) {
|
|
this.$modal.msgSuccess(
|
|
`${delFlag == 0 ? '注销成功' : '已撤回注销'}`,
|
|
)
|
|
this.$emit('updateTableList')
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.company-card {
|
|
padding: 12px 10px;
|
|
border-radius: 6px;
|
|
background-color: #f7f8fc;
|
|
min-height: 260px;
|
|
max-height: 260px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
.company-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.company-title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
& div:first-child {
|
|
font-weight: bold;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 1;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: #abafb3;
|
|
}
|
|
|
|
.company-remark {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.items-card {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
color: #454545;
|
|
|
|
.items-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
& div:last-child {
|
|
margin-top: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|