提交供应商界面
BIN
src/assets/images/iconDoc.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/images/iconMove.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/iconOther.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/iconPdf.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/iconPpt.png
Normal file
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/iconTxt.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/images/iconVideo.png
Normal file
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/images/iconXls.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/images/iconZip.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
|
@ -340,6 +340,11 @@ h6 {
|
|||
// text-align: right;
|
||||
}
|
||||
|
||||
.my_form_row {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.el-message-box__btns .el-button--primary {
|
||||
/* 修改确认按钮样式 */
|
||||
|
@ -673,6 +678,7 @@ h6 {
|
|||
.searchInputForm .el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.searchInputForm .el-input__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
|
@ -791,11 +797,56 @@ h6 {
|
|||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
border-bottom: 1px solid #D4DAE1;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 30px !important;
|
||||
}
|
||||
|
||||
.el-card__footer {
|
||||
height: 74px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.myFormCard .el-card__body {
|
||||
padding: 30px 126px !important;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
.myDetailCard .el-card__body {
|
||||
padding: 30px 30px 0 30px !important;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: calc(100vh - 165px);
|
||||
}
|
||||
.myDetailCard .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.myDetailCard .el-table thead th {
|
||||
font-weight: 400;
|
||||
}
|
||||
.myDetailCard .el-table .el-table__cell {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.submitBtn {
|
||||
width: 120px;
|
||||
height: 34px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #1a75e6;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
padding: 10px 28px 10px 28px;
|
||||
}
|
||||
|
||||
.submitBtn:hover {
|
||||
background: #1a75e6;
|
||||
}
|
||||
|
||||
.subHeaderTitle {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
|
@ -863,6 +914,10 @@ h6 {
|
|||
// min-width: 34px;
|
||||
}
|
||||
|
||||
.my_form_label .el-form-item__label {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
// 文本输入框样式
|
||||
.myInsertForm .el-input__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
|
@ -886,25 +941,6 @@ h6 {
|
|||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
.myInsertForm .el-input__wrapper {
|
||||
// background-color: transparent;
|
||||
// border-radius: 0;
|
||||
// box-shadow: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
// 选择框样式
|
||||
.myInsertForm .el-select__wrapper {
|
||||
// background-color: transparent;
|
||||
// border-radius: 0;
|
||||
// box-shadow: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
.myInsertForm .el-select__wrapper.is-hovering:not(.is-focused) {
|
||||
// box-shadow: none;
|
||||
}
|
||||
|
||||
.myInsertForm .el-select__placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
|
@ -964,6 +1000,43 @@ h6 {
|
|||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
.myDetailForm .el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.myDetailForm .el-form--inline .el-form-item {
|
||||
display: inline-flex;
|
||||
margin-right: 26px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.myDetailForm .el-form-item__content {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1E1E1E;
|
||||
display: block;
|
||||
line-height: 60px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.myDetailForm .el-form-item__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #002866;
|
||||
justify-content: start;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 31px;
|
||||
background: #EDF2F960;
|
||||
}
|
||||
|
||||
.my_detailform_label .el-form-item__label {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.myFeedBackForm .el-form-item__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
|
@ -978,9 +1051,47 @@ h6 {
|
|||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.myFeedBackForm .el-textarea__inner::placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #87898E !important;
|
||||
}
|
||||
|
||||
// 折叠面板样式
|
||||
.my-collapse .el-collapse-item__header .el-collapse-item__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.my-collapse {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.my-collapse .el-collapse-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.my-collapse .is-active {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.my-collapse .el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.my-collapse .el-collapse-item__wrap {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.my-collapse .el-collapse-item__header {
|
||||
height: 30px;
|
||||
background-color: #1a75e630;
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
padding: 6px 20px;
|
||||
}
|
|
@ -88,6 +88,21 @@ export const constantRoutes = [
|
|||
|
||||
// 动态路由,基于用户权限动态去加载
|
||||
export const dynamicRoutes = [
|
||||
|
||||
// {
|
||||
// path: '/supplierForm',
|
||||
// component: Layout,
|
||||
// hidden: true,
|
||||
// permissions: ['supplier:add'],
|
||||
// children: [
|
||||
// {
|
||||
// path: ':Id(\\d+)?',
|
||||
// component: () => import('@/views/supplier/supplierForm'),
|
||||
// name: 'supplierForm',
|
||||
// meta: { title: '供应商信息表单', activeMenu: '/supplier' }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: '/system/user-auth',
|
||||
component: Layout,
|
||||
|
|
|
@ -1,165 +1,242 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="searchPanel">
|
||||
<div class="more-search-pane">
|
||||
<div class="search-where-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
|
||||
<el-form-item label="发票类型:">
|
||||
<el-select v-model="queryParams.invoice_type" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in invoice_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体归属:">
|
||||
<el-select v-model="queryParams.media_ownership" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_ownership" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员规模:">
|
||||
<el-select v-model="queryParams.personnel_size" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in personnel_size" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主营媒体类型:">
|
||||
<el-select v-model="queryParams.main_media_types" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in main_media_types" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体质量:">
|
||||
<el-select v-model="queryParams.media_quality" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="有无合作历史:">
|
||||
<el-select v-model="queryParams.history_cooperation" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in history_cooperation" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商级别:">
|
||||
<el-select v-model="queryParams.supplier_level" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in supplier_level" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-more-button">
|
||||
<el-button v-if="!unfoldFlag" text class="foladText" @click="handleFlod">展开
|
||||
<svg-icon icon-class="unfold" class="ml10" />
|
||||
</el-button>
|
||||
<el-button v-else text class="foladText" @click="handleFlod">收起
|
||||
<svg-icon icon-class="packUp" class="ml10" />
|
||||
</el-button>
|
||||
<div v-if="!showForm && !showDetail">
|
||||
<div class="searchPanel">
|
||||
<div class="more-search-pane">
|
||||
<div class="search-where-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
|
||||
<el-form-item label="发票类型:">
|
||||
<el-select v-model="queryParams.invoice_type" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in invoice_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体归属:">
|
||||
<el-select v-model="queryParams.media_ownership" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_ownership" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员规模:">
|
||||
<el-select v-model="queryParams.personnel_size" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in personnel_size" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主营媒体类型:">
|
||||
<el-select v-model="queryParams.main_media_types" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in main_media_types" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体质量:">
|
||||
<el-select v-model="queryParams.media_quality" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="有无合作历史:">
|
||||
<el-select v-model="queryParams.history_cooperation" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in history_cooperation" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商级别:">
|
||||
<el-select v-model="queryParams.supplier_level" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in supplier_level" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-more-button">
|
||||
<el-button v-if="!unfoldFlag" text class="foladText" @click="handleFlod">展开
|
||||
<svg-icon icon-class="unfold" class="ml10" />
|
||||
</el-button>
|
||||
<el-button v-else text class="foladText" @click="handleFlod">收起
|
||||
<svg-icon icon-class="packUp" class="ml10" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchSmallPanel" v-show="unfoldFlag">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchSmallPanelForm">
|
||||
<el-form-item label="供应商配合度:">
|
||||
<el-select v-model="queryParams.supplier_cooperation_degree" placeholder="请选择" style="min-width: 30px;" clearable >
|
||||
<el-option v-for="dict in supplier_cooperation_degree" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主营业务:">
|
||||
<el-select v-model="queryParams.main_business" placeholder="请选择" clearable style="min-width: 30px;">
|
||||
<el-option v-for="dict in main_business" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务部门:">
|
||||
<div class="searchSmallPanel" v-show="unfoldFlag">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchSmallPanelForm">
|
||||
<el-form-item label="供应商配合度:">
|
||||
<el-select v-model="queryParams.supplier_cooperation_degree" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in supplier_cooperation_degree" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主营业务:">
|
||||
<el-select v-model="queryParams.main_business" placeholder="请选择" clearable
|
||||
style="min-width: 30px;">
|
||||
<el-option v-for="dict in main_business" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务部门:">
|
||||
<el-select v-model="queryParams.business_department" placeholder="请选择" clearable
|
||||
style="min-width: 30px;">
|
||||
<el-option v-for="dict in business_department" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="城市:">
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="城市:">
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card class="mt20">
|
||||
<el-row :gutter="10" class="my_row"><el-col :span="12">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
|
||||
<el-form-item label="">
|
||||
<el-input v-model="form.postCode" placeholder="请输入供应商名称/集团公司名称/联系人/联系人电话"
|
||||
:prefix-icon="Search" style="width: 500px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleOpenAddForm">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleImport">导入</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport">导出</el-button>
|
||||
<el-button type="primary" class="primaryBtn">比稿价管理</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card class="mt20">
|
||||
<el-row :gutter="10" class="my_row"><el-col :span="12">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
|
||||
<el-form-item label="">
|
||||
<el-input v-model="form.postCode" placeholder="请输入供应商名称/集团公司名称/联系人/联系人电话"
|
||||
:prefix-icon="Search" style="width: 500px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="supplierList" :height="unfoldFlag ? 'calc(100vh - 342px)' : 'calc(100vh - 308px)'">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商名称" align="center" prop="postId" width="230" />
|
||||
<el-table-column label="城市" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="主营业务" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="主营媒体类型" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="媒体质量" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="供应商配合度" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="人员规模" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="公司类型" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="年营收金额" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="媒体归属" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="媒体年限" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="有无合作历史" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="合作折扣力度" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="供应商联系人" align="center" prop="postCode" width="150"/>
|
||||
<el-table-column label="供应商联系电话" align="center" prop="postCode" width="150"/>
|
||||
<!-- <el-table-column label="反馈时间" align="center" prop="createTime" width="210">
|
||||
<el-table v-loading="loading" :data="supplierList"
|
||||
:height="unfoldFlag ? 'calc(100vh - 342px)' : 'calc(100vh - 308px)'">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商名称" align="center" prop="supplierName" width="230">
|
||||
<template #default="scope">
|
||||
<span class="supplierNameLabel" @click="handleOpenDetail">{{ scope.row.supplierName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="城市" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="主营业务" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="主营媒体类型" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体质量" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="供应商配合度" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="人员规模" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="公司类型" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="年营收金额" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体归属" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体年限" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="有无合作历史" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="合作折扣力度" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="供应商联系人" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="供应商联系电话" align="center" prop="postCode" width="150" />
|
||||
<!-- <el-table-column label="反馈时间" align="center" prop="createTime" width="210">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" width="160" align="center" fixed="right" >
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">修改</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['problemFeedback:remove']">删除</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['problemFeedback:remove']">日志</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">修改</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['problemFeedback:remove']">删除</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['problemFeedback:remove']">日志</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
<supplier-form ref="supplierFormRef" v-if="showForm" @handleShowList="handleShowList" />
|
||||
<supplier-detail ref="supplierDetailRef" v-if="showDetail" @handleShowList="handleShowList" />
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<!-- <div class="el-upload__tip">
|
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
||||
</div> -->
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link> -->
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="upload.open = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="submitFileForm">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="Post">
|
||||
|
||||
import { getToken } from "@/utils/auth"
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
|
||||
import supplierForm from "./supplierForm.vue";
|
||||
import supplierDetail from "./supplierDetail.vue";
|
||||
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { invoice_type, media_ownership, personnel_size, main_media_types, media_quality, history_cooperation, supplier_level, supplier_cooperation_degree, main_business } = proxy.useDict("invoice_type", "media_ownership", "personnel_size", "main_media_types", "media_quality", "history_cooperation", "supplier_level", "supplier_cooperation_degree", "main_business")
|
||||
const { invoice_type, media_ownership, personnel_size, main_media_types, media_quality, history_cooperation, supplier_level, supplier_cooperation_degree, main_business, business_department } = proxy.useDict("invoice_type", "media_ownership", "personnel_size", "main_media_types", "media_quality", "history_cooperation", "supplier_level", "supplier_cooperation_degree", "main_business", "business_department")
|
||||
|
||||
const showForm = ref(false)
|
||||
const supplierFormRef = ref(null)
|
||||
const showDetail = ref(false)
|
||||
const supplierDetailRef = ref(null)
|
||||
/*** 导入参数 */
|
||||
const upload = reactive({
|
||||
// 是否显示弹出层(用户导入)
|
||||
open: false,
|
||||
// 弹出层标题(用户导入)
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
|
||||
})
|
||||
|
||||
|
||||
const supplierList = ref([])
|
||||
const supplierList = ref([
|
||||
{ supplierName: 'xxxx供应商' }
|
||||
])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const data = reactive({
|
||||
|
@ -205,18 +282,78 @@ const resetQuery = () => {
|
|||
}
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = (row) => {
|
||||
const postIds = row.postId || ids.value
|
||||
proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?').then(function () {
|
||||
const postIds = row.postId
|
||||
const supplierName = row.supplierName
|
||||
proxy.$modal.confirm('是否确认删除名称为"' + supplierName + '"的供应商数据?').then(function () {
|
||||
return delPost(postIds)
|
||||
}).then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => { })
|
||||
}
|
||||
/** 导入按钮操作 */
|
||||
const handleImport = () => {
|
||||
upload.title = "导入"
|
||||
upload.open = true
|
||||
}
|
||||
/**文件上传中处理 */
|
||||
const handleFileUploadProgress = (event, file, fileList) => {
|
||||
upload.isUploading = true
|
||||
}
|
||||
|
||||
/** 文件上传成功处理 */
|
||||
const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.open = false
|
||||
upload.isUploading = false
|
||||
proxy.$refs["uploadRef"].handleRemove(file)
|
||||
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
|
||||
}
|
||||
/** 提交上传文件 */
|
||||
const submitFileForm = () => {
|
||||
proxy.$refs["uploadRef"].submit()
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
|
||||
}
|
||||
// 新增
|
||||
const handleOpenAddForm = () => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
supplierFormRef.value.formTitle = '新建供应商'
|
||||
})
|
||||
}
|
||||
// 修改
|
||||
const handleUpdate = () => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
supplierFormRef.value.formTitle = '编辑供应商'
|
||||
})
|
||||
}
|
||||
// 详情
|
||||
const handleOpenDetail = () => {
|
||||
showDetail.value = true
|
||||
nextTick(() => {
|
||||
// supplierFormRef.value.formTitle = '编辑供应商'
|
||||
})
|
||||
}
|
||||
const handleShowList = () => {
|
||||
console.log('触发')
|
||||
showForm.value = false
|
||||
showDetail.value = false
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.supplierNameLabel {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A75E6;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
366
src/views/supplier/supplierDetail.vue
Normal file
|
@ -0,0 +1,366 @@
|
|||
<template>
|
||||
<el-card class="myDetailCard">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>供应商信息</span>
|
||||
<el-icon style="float: right;cursor: pointer;" @click="handleClose">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form ref="ruleFormRef" :model="detailForm" label-width="200px" class="myDetailForm">
|
||||
<div class="supplierTitleContainer">
|
||||
<div class="supplierNameIcon" />
|
||||
<div class="supplierNameTitle">长治互邦传媒科技有限公司</div>
|
||||
</div>
|
||||
<el-collapse class="my-collapse" v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="媒介部门" name="1">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="业务部门" prop="business_department">
|
||||
优势媒体部门
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="媒体资讯" name="2">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="主营业务" prop="business_department">
|
||||
媒体公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="主营媒体类型" prop="business_department">
|
||||
公交车身
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="公司类型" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="存续年限" prop="business_department">
|
||||
20年
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="年营收额" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="媒体资质权限类别" name="3">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体归属" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体年限" prop="business_department">
|
||||
长期
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="媒体权属" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="供应商信用类别" name="4">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体质量" prop="business_department">
|
||||
及格
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商配合度" prop="business_department">
|
||||
及格
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合作折扣力度" prop="business_department">
|
||||
建立联系
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有无合作历史" prop="business_department">
|
||||
无
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="企业信用信息是否有不良记录" class="my_detailform_label">
|
||||
无
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="企业信用不良记录" prop="business_department">
|
||||
无
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="曾服务过的品牌" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="供应商基础信息" name="5">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商公司全称">
|
||||
长治互邦传媒科技有限公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="注册资本" prop="business_department">
|
||||
50万元
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成立日期" prop="business_department">
|
||||
2008-11-27
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册地" prop="business_department">
|
||||
长治
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="办公地址">
|
||||
山西/长治市八一广场主席台后220米路西(长治公交公司圆内)
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="人员规模" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合作采购金额" prop="business_department">
|
||||
0
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="集团公司名称" prop="business_department">
|
||||
无
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="其他业务" prop="business_department">
|
||||
候车亭
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="实缴资本" prop="business_department">
|
||||
50万元
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商编号" prop="business_department">
|
||||
GYS2024072301363
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人职位" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人姓名" prop="business_department">
|
||||
刘经理
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人电话" prop="business_department">
|
||||
15296652450
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人微信" prop="business_department">
|
||||
592996581
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人邮箱" prop="business_department">
|
||||
无
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="营业执照" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="财务信息" name="6">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票类型" prop="business_department">
|
||||
暂定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="税点" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="其他信息" name="7">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="其他" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="其他附件" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="媒体信息" name="8">
|
||||
<el-table :data="detailForm.supplierList">
|
||||
<el-table-column label="媒体名称" align="left" prop="medioName" width="360">
|
||||
<template #default="scope">
|
||||
<span class="supplierNameLabel" @click="handleOpenMedio">{{ scope.row.medioName
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="媒体编号" align="left" prop="medioCode" />
|
||||
<el-table-column label="媒体类型" align="left" prop="medioType" />
|
||||
<el-table-column label="媒体分类" align="left" prop="medioClass" />
|
||||
<el-table-column label="状态" align="left" prop="medioStatus">
|
||||
<template #default="scope">
|
||||
<el-badge is-dot class="mybadge"></el-badge>
|
||||
<el-text class="myMedioStatus">生效中</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const detailForm = ref({
|
||||
supplierList: [
|
||||
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 },
|
||||
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 }
|
||||
]
|
||||
})
|
||||
const activeNames = ref(['1', '2', '3', '4'])
|
||||
const handleClose = () => {
|
||||
emit('handleShowList')
|
||||
}
|
||||
const handleChange = (val) => {
|
||||
console.log(val)
|
||||
activeNames.value = val
|
||||
}
|
||||
const handleOpenMedio = () => {
|
||||
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
});
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.supplierTitleContainer {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.supplierNameIcon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
background: #ffc63d;
|
||||
margin: 0px 10px 4px 0px;
|
||||
}
|
||||
|
||||
.supplierNameTitle {
|
||||
display: inline-block;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #1E1E1E;
|
||||
}
|
||||
|
||||
// 分割线
|
||||
.splineBar {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #D9DFE5;
|
||||
}
|
||||
|
||||
.supplierNameLabel {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A75E6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mybadge .el-badge__content.is-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #126601;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.myMedioStatus {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #126601;
|
||||
}
|
||||
</style>
|
593
src/views/supplier/supplierForm.vue
Normal file
|
@ -0,0 +1,593 @@
|
|||
<template>
|
||||
<el-card class="myFormCard">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ formTitle }}</span>
|
||||
<el-icon style="float: right;cursor: pointer;" @click="handleClose">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px" class="myInsertForm">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="业务部门" prop="business_department">
|
||||
<el-select v-model="ruleForm.business_department" placeholder="请选择" clearable
|
||||
style="min-width: 30px;">
|
||||
<el-option v-for="dict in business_department" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商编号">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商公司全称">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="注册资本">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商级别">
|
||||
<el-select v-model="ruleForm.supplier_level" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in supplier_level" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体归属">
|
||||
<el-select v-model="ruleForm.media_ownership" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in media_ownership" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="年营收金额">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成立日期" prop="expireDate">
|
||||
<el-date-picker v-model="ruleForm.expireDate" type="date" format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD" placeholder="请选择成立日期" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="注册地">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="实缴资本">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="主营业务">
|
||||
<el-select v-model="ruleForm.main_business" placeholder="请选择" clearable
|
||||
style="min-width: 30px;">
|
||||
<el-option v-for="dict in main_business" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="主营媒体类型">
|
||||
<el-select v-model="ruleForm.main_media_types" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in main_media_types" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="其他业务">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="公司类型">
|
||||
<el-select v-model="ruleForm.company_type" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in company_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="人员规模">
|
||||
<el-select v-model="ruleForm.personnel_size" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in personnel_size" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="集团公司名称">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="存续年限">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体质量">
|
||||
<el-select v-model="ruleForm.media_quality" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体年限">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商所在城市" style="margin-bottom: 0;">
|
||||
<el-row :gutter="20" class="my_form_row">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="ruleForm.media_quality" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="ruleForm.media_quality" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="ruleForm.media_quality" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in media_quality" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="办公地址">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人职务">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人姓名">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人电话">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人微信">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="联系人邮箱">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合作采购金额">
|
||||
<el-select v-model="ruleForm.cooperative_procurement_amount" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in cooperative_procurement_amount" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商配合度">
|
||||
<el-select v-model="ruleForm.supplier_cooperation_degree" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in supplier_cooperation_degree" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合作折扣力度">
|
||||
<el-select v-model="ruleForm.cooperation_discount_intensity" placeholder="请选择"
|
||||
style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in cooperation_discount_intensity" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="税点(%)">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有无合作历史">
|
||||
<el-select v-model="ruleForm.history_cooperation" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in history_cooperation" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="发票类型">
|
||||
<el-select v-model="ruleForm.invoice_type" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
<el-option v-for="dict in invoice_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="企业信用信息是否有不良记录" class="my_form_label">
|
||||
<el-select v-model="ruleForm.enterprise_bad_records" placeholder="请选择" style="min-width: 30px;"
|
||||
clearable>
|
||||
<el-option v-for="dict in enterprise_bad_records" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="曾服务过的品牌">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="其他">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="不可见权限">
|
||||
<el-switch v-model="ruleForm.switch" class="ml-2"
|
||||
style="--el-switch-on-color: #0BA200; --el-switch-off-color: #9CA4AB" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="供应商对接人" label-width="160px">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="供应商对接人电话" label-width="160px">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="营业执照">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="其他附件">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体权属">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
|
||||
</template>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
|
||||
import iconDoc from '@/assets/images/iconDoc.png'
|
||||
import iconOther from '@/assets/images/iconOther.png'
|
||||
import iconPdf from '@/assets/images/iconPdf.png'
|
||||
import iconVideo from '@/assets/images/iconVideo.png'
|
||||
import iconXls from '@/assets/images/iconXls.png'
|
||||
import iconZip from '@/assets/images/iconZip.png'
|
||||
import iconMove from '@/assets/images/iconMove.png'
|
||||
import iconTxt from '@/assets/images/iconTxt.png'
|
||||
import iconPpt from '@/assets/images/iconPpt.png'
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const route = useRoute()
|
||||
const formTitle = ref('新建')
|
||||
|
||||
const data = reactive({
|
||||
ruleForm: {},
|
||||
rules: {
|
||||
business_department: [{ required: true, message: "业务部门不能为空", trigger: "change" }]
|
||||
},
|
||||
})
|
||||
const { ruleForm, rules } = toRefs(data)
|
||||
const { invoice_type, media_ownership, personnel_size, main_media_types, media_quality, history_cooperation, supplier_level, supplier_cooperation_degree, main_business, business_department, company_type, cooperative_procurement_amount, cooperation_discount_intensity, enterprise_bad_records } = proxy.useDict("invoice_type", "media_ownership", "personnel_size", "main_media_types", "media_quality", "history_cooperation", "supplier_level", "supplier_cooperation_degree", "main_business", "business_department", "company_type", "cooperative_procurement_amount", "cooperation_discount_intensity", "enterprise_bad_records")
|
||||
|
||||
|
||||
// 营业执照集合
|
||||
const docUploadList = ref([])
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (suffix) => {
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
|
||||
}
|
||||
|
||||
// 自定义上传
|
||||
const requestUpload = (options) => {
|
||||
const { file } = options
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
try {
|
||||
// uploadFile(formData).then(res => {
|
||||
// if (res.code === 200) {
|
||||
// docUploadList.value.push({
|
||||
// name: res.originalFilename,
|
||||
// url: baseUrl + res.fileName,
|
||||
// suffix: res.suffix
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除附件
|
||||
const handleRemoveImage = (fileInfo) => {
|
||||
docUploadList.value = docUploadList.value.filter(
|
||||
item => item.name != fileInfo.name
|
||||
);
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
emit('handleShowList')
|
||||
// if (form.value.postId != undefined) {
|
||||
// updatePost(form.value).then(response => {
|
||||
// proxy.$modal.msgSuccess("修改成功")
|
||||
// open.value = false
|
||||
// getList()
|
||||
// })
|
||||
// } else {
|
||||
// addPost(form.value).then(response => {
|
||||
// proxy.$modal.msgSuccess("新增成功")
|
||||
// open.value = false
|
||||
// getList()
|
||||
// })
|
||||
// }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('handleShowList')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
const id = route.params && route.params.Id
|
||||
if (id) {
|
||||
ruleForm.value.id = id
|
||||
formTitle.value = '编辑供应商'
|
||||
} else {
|
||||
ruleForm.value.id = null
|
||||
formTitle.value = '新建供应商'
|
||||
}
|
||||
});
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
formTitle
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.el-upload--picture-card {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.viewFile {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-wrapper:hover .actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|