From 3d8f1a0136b2e081a99cede07e93e67844bbafce Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Tue, 12 Aug 2025 20:14:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=AA=92=E4=BD=93=E5=BA=93?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/ruoyi.scss           |  12 +-
 src/views/mediaLibrary/index.vue       | 143 ++--
 src/views/mediaLibrary/mediaDetail.vue | 517 ++++++++++++++
 src/views/mediaLibrary/mediaForm.vue   | 895 +++++++++++++++++++++++++
 src/views/supplier/supplierForm.vue    |  42 +-
 5 files changed, 1544 insertions(+), 65 deletions(-)
 create mode 100644 src/views/mediaLibrary/mediaDetail.vue
 create mode 100644 src/views/mediaLibrary/mediaForm.vue

diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index 93d06ee..fdc90e7 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -610,7 +610,7 @@ h6 {
 .choseResultTag .el-icon {
   font-size: 14px;
 }
- 
+
 .exportPPTTag {
   height: 26px;
   padding: 16px 20px;
@@ -621,8 +621,9 @@ h6 {
   font-weight: 400;
   font-size: 16px;
   color: #1E1E1E;
-  margin-right: 10px; 
+  margin-right: 10px;
 }
+
 .exportPPTTag .el-tag__close {
   color: #9CA6B2 !important;
   background: #EEEEEE !important;
@@ -926,6 +927,13 @@ h6 {
   height: calc(100vh - 240px);
 }
 
+.myMediaFormCard .el-card__body {
+  padding: 30px 30px 0 30px !important;
+  overflow-y: auto;
+  width: 100%;
+  height: calc(100vh - 240px);
+}
+
 .myDetailCard .el-card__body {
   padding: 30px 30px 0 30px !important;
   overflow-y: auto;
diff --git a/src/views/mediaLibrary/index.vue b/src/views/mediaLibrary/index.vue
index 87563bf..98ab65f 100644
--- a/src/views/mediaLibrary/index.vue
+++ b/src/views/mediaLibrary/index.vue
@@ -89,52 +89,47 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item label="媒介类型:">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo"
+                            clearable style="min-width: 30px">
+                            <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
+                                :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree"
+                            clearable style="min-width: 30px">
+                            <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
+                                :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable
+                            style="min-width: 30px">
+                            <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
+                                :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="城市:">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable
+                            style="min-width: 30px">
+                            <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable
+                            style="min-width: 30px">
+                            <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable
+                            style="min-width: 30px">
+                            <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="">
-                        <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
-                            style="min-width: 30px;">
-                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
-                                :value="dict.value" />
+                        <el-select v-model="queryParams.townId" placeholder="请选择" clearable style="min-width: 30px">
+                            <el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="商圈">
@@ -281,6 +276,8 @@
                     @pagination="getList" />
             </el-card>
         </div>
+        <media-form ref="mediaFormRef" v-if="showForm" @handleShowList="handleShowList" />
+        <media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleShowList" />
 
         <!-- 导入对话框 -->
         <el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
@@ -313,12 +310,12 @@
             :destroy-on-close="true" :close-on-click-modal="false">
             <div class="my_dialog_itemHeader">已选内容</div>
             <div class="chosedMediaNamsConter">
-                <el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag"
-                                @close="handleCloseTag(tag)" closable>
-                                {{ tag.mediaName }}
-                            </el-tag>
+                <el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
+                    closable>
+                    {{ tag.mediaName }}
+                </el-tag>
             </div>
-             <div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
+            <div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button class="my-cancel-btn" @click="exportPPT.open = false">取 消</el-button>
@@ -332,6 +329,8 @@
 import { getToken } from "@/utils/auth"
 import { onMounted, ref } from 'vue';
 import { Search } from '@element-plus/icons-vue'
+import { sysRegionListByPid } from "@/api/system/administrativeRegion"
+import { sysMediaTypeListByPid } from "@/api/system/mediaType"
 import optionIcon from '@/assets/images/optionIcon.png'
 import optionIconHover from '@/assets/images/optionIconHover.png'
 import viewFile from '@/assets/images/viewFile.png'
@@ -339,14 +338,26 @@ import viewFileHover from '@/assets/images/viewFileHover.png'
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
 
+import mediaForm from "./mediaForm.vue";
+import mediaDetail from "./mediaDetail.vue";
+
 const bgStore = useBackgroundStore()
 const { proxy } = getCurrentInstance()
 const { media_form, display_form, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
+// 省、市、县、镇数据
+const province = ref([])
+const city = ref([])
+const county = ref([])
+const town = ref([])
+// 媒体类型数据
+const mediaTypeOne = ref([])
+const mediaTypeTwo = ref([])
+const mediaTypeThree = ref([])
 
 const showForm = ref(false)
-const supplierFormRef = ref(null)
+const mediaFormRef = ref(null)
 const showDetail = ref(false)
-const supplierDetailRef = ref(null)
+const mediaDetailRef = ref(null)
 // 归属选项
 const supplierList = ref([])
 // 多选数据
@@ -418,6 +429,58 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
+// 获取一级媒体类型
+const getMediaTypeOne = () => {
+    sysMediaTypeListByPid({ parentId: 0 }).then(res => {
+        mediaTypeOne.value = res.data
+    })
+}
+// 获取二级媒体类型
+const getMediaTypeTwo = (value) => {
+    sysMediaTypeListByPid({ parentId: value }).then(res => {
+        queryParams.value.mediaTypeTwo = undefined
+        queryParams.value.mediaTypeThree = undefined
+        mediaTypeTwo.value = res.data
+    })
+}
+// 获取三级媒体类型
+const getMediaTypeThree = (value) => {
+    sysMediaTypeListByPid({ parentId: value }).then(res => {
+        queryParams.value.mediaTypeThree = undefined
+        mediaTypeThree.value = res.data
+    })
+}
+// 获取省/直辖市数据
+const getProvinceList = () => {
+    sysRegionListByPid({ parentId: '0' }).then(res => {
+        province.value = res.data
+    })
+}
+// 获取地级市/区数据
+const getCityList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        queryParams.value.cityId = undefined
+        queryParams.value.countyId = undefined
+        queryParams.value.townId = undefined
+        city.value = res.data
+    })
+}
+// 获取区/县数据
+const getCountyList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        queryParams.value.countyId = undefined
+        queryParams.value.townId = undefined
+        county.value = res.data
+    })
+}
+// 获取镇数据
+const getTownList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        queryParams.value.townId = undefined
+        town.value = res.data
+    })
+}
+
 // 折叠展开
 const unfoldFlag = ref(false)
 const handleFlod = () => {
@@ -466,21 +529,21 @@ const handleDelete = (row) => {
 const handleOpenAddForm = () => {
     showForm.value = true
     nextTick(() => {
-        supplierFormRef.value.formTitle = '新建供应商'
+        mediaFormRef.value.formTitle = '新建媒体信息'
     })
 }
 // 修改
 const handleUpdate = () => {
     showForm.value = true
     nextTick(() => {
-        supplierFormRef.value.formTitle = '编辑供应商'
+        mediaFormRef.value.formTitle = '编辑媒体信息'
     })
 }
 // 详情
 const handleOpenDetail = () => {
     showDetail.value = true
     nextTick(() => {
-        // supplierFormRef.value.formTitle = '编辑供应商'
+        // mediaDetailRef.value.formTitle = '编辑供应商'
     })
 }
 const handleShowList = () => {
@@ -527,6 +590,8 @@ const submitFileForm = () => {
 onMounted(() => {
     bgStore.setBgImage(otherbg)
     getList()
+    getMediaTypeOne()
+    getProvinceList()
 }); 
 </script>
 <style lang="scss">
@@ -575,7 +640,7 @@ onMounted(() => {
     border-radius: 4px;
     background: #ffffff;
     border: 1px solid #EEEEEE;
-    margin-top: 10px; 
+    margin-top: 10px;
     margin-bottom: 30px;
     padding: 10px 0;
 }
diff --git a/src/views/mediaLibrary/mediaDetail.vue b/src/views/mediaLibrary/mediaDetail.vue
new file mode 100644
index 0000000..5612a3a
--- /dev/null
+++ b/src/views/mediaLibrary/mediaDetail.vue
@@ -0,0 +1,517 @@
+<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">银川金凤区新华联广场门口上方LED</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="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="展示形式" 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="夏季照明时间" 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="播放时间" 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="媒体尺寸" 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="高/宽（m）" 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">
+                                待定
+                            </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>
+                </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">
+                                待定
+                            </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">
+                                待定
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="CPM" prop="business_department">
+                                待定
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="SOV" 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">
+                                待定
+                            </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="供应商联系方式" 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>
+                </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="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">
+                                有限责任公司
+                            </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="MR" 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">
+                                有限责任公司
+                            </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="遮挡情况" 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="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>
+                    <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="4">
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+        </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>
\ No newline at end of file
diff --git a/src/views/mediaLibrary/mediaForm.vue b/src/views/mediaLibrary/mediaForm.vue
new file mode 100644
index 0000000..b14a37a
--- /dev/null
+++ b/src/views/mediaLibrary/mediaForm.vue
@@ -0,0 +1,895 @@
+<template>
+    <el-card class="myMediaFormCard">
+        <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="160px" class="myInsertForm">
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="6">
+                    <el-form-item label="业务部门" prop="business">
+                        <el-select v-model="ruleForm.business" placeholder="请选择" clearable style="min-width: 30px;">
+                            <el-option v-for="dict in 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-input v-model="ruleForm.postCode" placeholder="请输入" />
+                    </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-select v-model="ruleForm.display_form" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in display_form" :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_form" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in media_form" :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.whether_lighting" placeholder="请选择" style="min-width: 30px;"
+                            clearable>
+                            <el-option v-for="dict in whether_lighting" :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-radio-group v-model="ruleForm.radio2">
+                            <el-radio value="是">是</el-radio>
+                            <el-radio value="否">否</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="6">
+                    <el-form-item label="夏季照明时间">
+                        <el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
+                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
+                            value-format="HH:mm"></el-time-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="冬季照明时间">
+                        <el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
+                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
+                            value-format="HH:mm"></el-time-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="日均人流量">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
+                            <template #suffix>
+                                <span>人次/天</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="日均车流量">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
+                            <template #suffix>
+                                <span>辆/天</span>
+                            </template>
+                        </el-input>
+                    </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="请输入">
+                            <template #suffix>
+                                <span>次/天</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="批文情况">
+                        <el-select v-model="ruleForm.approval_document_status" placeholder="请选择" clearable
+                            style="min-width: 30px;">
+                            <el-option v-for="dict in approval_document_status" :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" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in supplierList" :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-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="请输入">
+                            <template #suffix>
+                                <span>m</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="宽">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
+                            <template #suffix>
+                                <span>m</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="6">
+                    <el-form-item label="可上画日期">
+                        <el-date-picker v-model="ruleForm.value1" style="width: 100%;" type="date" 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-date-picker v-model="ruleForm.value2" style="width: 100%;" type="date" placeholder="请选择" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="出城时间">
+                        <el-date-picker v-model="ruleForm.value3" style="width: 100%;" type="date" 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.media_schedule" placeholder="请选择" style="min-width: 30px;"
+                            clearable>
+                            <el-option v-for="dict in media_schedule" :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="12">
+                    <el-form-item label="媒介类型" style="margin-bottom: 0;">
+                        <el-row :gutter="20" class="my_form_row">
+                            <el-col :span="8">
+                                <el-select v-model="ruleForm.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo"
+                                    clearable style="min-width: 30px">
+                                    <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-select v-model="ruleForm.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree"
+                                    clearable style="min-width: 30px">
+                                    <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-select v-model="ruleForm.mediaTypeThree" placeholder="请选择" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="18">
+                    <el-form-item label="地区商圈" style="margin-bottom: 0;">
+                        <el-row :gutter="20" class="my_form_row">
+                            <el-col :span="6">
+                                <el-select v-model="ruleForm.provinceId" placeholder="请选择" @change="getCityList"
+                                    clearable style="min-width: 30px">
+                                    <el-option v-for="item in province" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-select v-model="ruleForm.cityId" placeholder="请选择" @change="getCountyList" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in city" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-select v-model="ruleForm.countyId" placeholder="请选择" @change="getTownList" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in county" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-select v-model="ruleForm.townId" placeholder="请选择" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in town" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="商圈">
+                        <el-select v-model="ruleForm.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo" clearable
+                            style="min-width: 30px">
+                            <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
+                                :value="item.id" />
+                        </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-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="地理位置">
+                        <el-row :gutter="30" class="my_form_row">
+                            <el-col :span="12">
+                                <el-input v-model="ruleForm.postCode" placeholder="请输入" />
+                            </el-col>
+                            <el-col :span="12">
+                                <el-input v-model="ruleForm.postCode" placeholder="请输入" />
+                            </el-col>
+                        </el-row>
+                    </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="刊例价" prop="business">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
+                            <template #suffix>
+                                <span>元</span>
+                            </template>
+                        </el-input>
+                    </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="请输入">
+                            <template #suffix>
+                                <span>元</span>
+                            </template>
+                        </el-input>
+                    </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="成本净价" prop="business">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
+                            <template #suffix>
+                                <span>元</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="销售方式">
+                        <el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
+                                :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="CPM">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="SOV">
+                        <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="价格情况说明" prop="business">
+                        <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.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in sales_method" :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-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="6">
+                    <el-form-item label="供应商联系方式" class="my_form_label" prop="business">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="首次是否包含安装制作费用" class="my_form_label">
+                        <el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in sales_method" :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="税点">
+                        <el-input v-model="ruleForm.postCode" placeholder="请输入" >
+                            <template #suffix>
+                                <span>%</span>
+                            </template>
+                        </el-input>
+                    </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="请输入">
+                            <template #suffix>
+                                <span>元/次</span>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="6">
+                    <el-form-item label="品牌" prop="business">
+                        <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.key_words" placeholder="请选择" style="min-width: 30px;" clearable>
+                            <el-option v-for="dict in key_words" :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="适用人群" prop="business">
+                        <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="MR">
+                        <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="可视距离" prop="business">
+                        <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="请输入">
+                            <template #suffix>
+                                <span>度</span>
+                            </template>
+                        </el-input>
+                    </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="遮挡情况" prop="business">
+                        <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="24">
+                    <el-form-item label="优势" prop="business">
+                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="劣势" prop="business">
+                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="备注" prop="business">
+                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="文件上传" prop="business">
+                        <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="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="图片上传" prop="business">
+                        <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="30" class="my_form_row">
+                <el-col :span="24">
+                    <el-form-item label="视频上传" prop="business">
+                        <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 { sysRegionListByPid } from "@/api/system/administrativeRegion"
+import { sysMediaTypeListByPid } from "@/api/system/mediaType"
+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 mediaTypeOne = ref([])
+const mediaTypeTwo = ref([])
+const mediaTypeThree = ref([])
+// 省、市、县、镇数据
+const province = ref([])
+const city = ref([])
+const county = ref([])
+const town = ref([])
+
+const supplierList = ref([])
+const data = reactive({
+    ruleForm: {},
+    rules: {
+        business: [{ required: true, message: "业务部门不能为空", trigger: "change" }]
+    },
+})
+const { ruleForm, rules } = toRefs(data)
+const { media_form, display_form, whether_lighting, invoice_type, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "whether_lighting", "invoice_type", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
+ 
+
+// 获取一级媒体类型
+const getMediaTypeOne = () => {
+    sysMediaTypeListByPid({ parentId: 0 }).then(res => {
+        mediaTypeOne.value = res.data
+    })
+}
+// 获取二级媒体类型
+const getMediaTypeTwo = (value) => {
+    sysMediaTypeListByPid({ parentId: value }).then(res => {
+        ruleForm.value.mediaTypeTwo = undefined
+        ruleForm.value.mediaTypeThree = undefined
+        mediaTypeTwo.value = res.data
+    })
+}
+// 获取三级媒体类型
+const getMediaTypeThree = (value) => {
+    sysMediaTypeListByPid({ parentId: value }).then(res => {
+        ruleForm.value.mediaTypeThree = undefined
+        mediaTypeThree.value = res.data
+    })
+}
+
+// 获取省/直辖市数据
+const getProvinceList = () => {
+    sysRegionListByPid({ parentId: '0' }).then(res => {
+        province.value = res.data
+    })
+}
+// 获取地级市/区数据
+const getCityList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        ruleForm.value.cityId = undefined
+        ruleForm.value.countyId = undefined
+        ruleForm.value.townId = undefined
+        city.value = res.data
+    })
+}
+// 获取区/县数据
+const getCountyList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        ruleForm.value.countyId = undefined
+        ruleForm.value.townId = undefined
+        county.value = res.data
+    })
+}
+// 获取镇数据
+const getTownList = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        ruleForm.value.townId = undefined
+        town.value = res.data
+    })
+}
+
+// 营业执照集合
+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)
+    getMediaTypeOne()
+    getProvinceList()
+    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>
\ No newline at end of file
diff --git a/src/views/supplier/supplierForm.vue b/src/views/supplier/supplierForm.vue
index bd86a61..cea853d 100644
--- a/src/views/supplier/supplierForm.vue
+++ b/src/views/supplier/supplierForm.vue
@@ -150,32 +150,26 @@
                 <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.provinceId" placeholder="请选择" @change="getCityList"
-                                        clearable style="min-width: 30px">
-                                        <el-option v-for="item in province" :key="item.id" :label="item.name"
-                                            :value="item.id" />
-                                    </el-select>
-                                </el-form-item>
+                            <el-col :span="8"> 
+                                <el-select v-model="ruleForm.provinceId" placeholder="请选择" @change="getCityList"
+                                    clearable style="min-width: 30px">
+                                    <el-option v-for="item in province" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select> 
                             </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="">
-                                    <el-select v-model="ruleForm.cityId" placeholder="请选择" @change="getCountyList"
-                                        clearable style="min-width: 30px">
-                                        <el-option v-for="item in city" :key="item.id" :label="item.name"
-                                            :value="item.id" />
-                                    </el-select>
-                                </el-form-item>
+                            <el-col :span="8"> 
+                                <el-select v-model="ruleForm.cityId" placeholder="请选择" @change="getCountyList" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in city" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select> 
                             </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="">
-                                    <el-select v-model="ruleForm.countyId" placeholder="请选择" clearable
-                                        style="min-width: 30px">
-                                        <el-option v-for="item in county" :key="item.id" :label="item.name"
-                                            :value="item.id" />
-                                    </el-select>
-                                </el-form-item>
+                            <el-col :span="8"> 
+                                <el-select v-model="ruleForm.countyId" placeholder="请选择" clearable
+                                    style="min-width: 30px">
+                                    <el-option v-for="item in county" :key="item.id" :label="item.name"
+                                        :value="item.id" />
+                                </el-select> 
                             </el-col>
                         </el-row>
                     </el-form-item>