提交供应商界面

This commit is contained in:
wangchengming 2025-08-08 09:42:07 +08:00
parent ed10676fb4
commit 4f686adb6f
14 changed files with 1382 additions and 160 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -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;
}

View File

@ -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,

View File

@ -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>仅允许导入xlsxlsx格式文件</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>

View 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>

View 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>