From e101f3e1bc19cbccfba0fcdc10768de695ac4cd3 Mon Sep 17 00:00:00 2001
From: songyang <972986197@qq.com>
Date: Thu, 14 Dec 2023 09:19:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=95=86=E5=93=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  10 +-
 src/components/PagingComponent/index.vue      |  55 ++++-
 src/http/api/usercenter/goodsmang.ts          |   8 +-
 src/router/index.ts                           |  13 ++
 src/views/user/goodsManagement/index.vue      | 212 +++++++++++++-----
 .../user/goodsManagement/previewImg/index.vue |  59 +++++
 src/views/user/zoneManag/index.vue            |  23 +-
 src/views/user/zoneManag/zoneCom/joinZone.vue |   7 +
 8 files changed, 306 insertions(+), 81 deletions(-)
 create mode 100644 src/views/user/goodsManagement/previewImg/index.vue
 create mode 100644 src/views/user/zoneManag/zoneCom/joinZone.vue

diff --git a/components.d.ts b/components.d.ts
index ace5036..8575ab7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,16 +10,11 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -29,15 +24,12 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
diff --git a/src/components/PagingComponent/index.vue b/src/components/PagingComponent/index.vue
index 71faf37..1fd4f04 100644
--- a/src/components/PagingComponent/index.vue
+++ b/src/components/PagingComponent/index.vue
@@ -1,22 +1,53 @@
 <script setup lang="ts">
-    const emit = defineEmits(['getList'])
     // 每页数量值改变
     const handleSizeChange = (val: Number) => {
+        emit('update:pageSize', val)
         // 传递每页数量
-        emit('getList', val)
+        emit('getListChange')
     }
     // 页码值改变
     const handleCurrentChange = (val: Number) => {
+        emit('update:pageNum', val)
         // 传递页码值
-        emit('getList', val)
+        emit('getListChange')
     }
 
-    defineProps<Props>()
-    interface Props {
-        pageSize?: 20
-        pageNumber?: 1
-        total?: 0
-    }
+    const props = withDefaults(
+        defineProps<{
+            page?: number
+            size?: number
+            total?: number
+        }>(),
+        {
+            page: 1,
+            size: 10,
+            total: 0
+        }
+    )
+
+    const emit = defineEmits(['getListChange', 'update:pageSize', 'update:pageNum'])
+
+    const currentPage = computed({
+        get: () => {
+            return props.page
+        },
+        set: (val: number) => {
+            emit('update:pageNum', val)
+        }
+    })
+    const pageSize = computed({
+        get: () => {
+            return props.size
+        },
+        set: (val: number) => {
+            emit('update:pageSize', val)
+        }
+    })
+
+    // const paginationData = reactive({
+    //     pageSize: Props.pageSize,
+    //     pageNumber: Props.pageNumber
+    // })
 
     // const handleTotalText = () => {
     //     const targetDom: any = document.querySelector('.el-pagination__total')
@@ -30,9 +61,9 @@
 <template>
     <!-- 分页 -->
     <el-pagination
-        :current-page="pageNumber"
-        :page-size="pageSize"
-        :page-sizes="[10, 20, 30, 40]"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[5, 10, 20, 40]"
         small="small"
         background="background"
         layout="total, sizes, prev, pager, next, jumper"
diff --git a/src/http/api/usercenter/goodsmang.ts b/src/http/api/usercenter/goodsmang.ts
index cd1e01c..6e0426d 100644
--- a/src/http/api/usercenter/goodsmang.ts
+++ b/src/http/api/usercenter/goodsmang.ts
@@ -1,11 +1,15 @@
 // 个人中心 承租下的商品管理
 
-import { get, post } from '../../index'
+import { get, post, put } from '../../index'
 
-// 装备入驻提交
+// 新增装备入驻提交
 export const equipmentDeploymentApi = (data: any) => {
     return post('/zlpt-equip/dev', data)
 }
+// 装备入驻修改提交
+export const equipmentEditApi = (data: any) => {
+    return put('/zlpt-equip/dev', data)
+}
 
 // 获取商品入驻列表
 export const getEquipmentListApi = (data: any) => {
diff --git a/src/router/index.ts b/src/router/index.ts
index 8a1bcbe..62fb624 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -370,6 +370,7 @@ const routes: Array<RouteRecordRaw> = [
                             isLogin: true
                         },
                     },
+                    /* 专区管理 */
                     {
                         path: 'zoneManag',
                         name: 'zoneManag',
@@ -381,6 +382,18 @@ const routes: Array<RouteRecordRaw> = [
                             isLogin: true
                         },
                     },
+                    /* 申请加入专区页面 */
+                    {
+                        path: 'joinZone',
+                        name: 'joinZone',
+                        component: () => import('views/user/zoneManag/zoneCom/joinZone.vue'),
+                        meta: {
+                            title: '请加入专区',
+                            keepAlive: true,
+                            AuthFlag: false,
+                            isLogin: true
+                        },
+                    },
                 ]
             },
         ]
diff --git a/src/views/user/goodsManagement/index.vue b/src/views/user/goodsManagement/index.vue
index 55c0359..1388b27 100644
--- a/src/views/user/goodsManagement/index.vue
+++ b/src/views/user/goodsManagement/index.vue
@@ -3,6 +3,7 @@
     import FormComponent from 'components/FormComponent/index.vue'
     import PagingComponent from 'components/PagingComponent/index.vue'
     import uploadComponent from 'components/uploadComponent/index.vue'
+    import previewImg from './previewImg/index.vue'
     import { ElMessage } from 'element-plus'
 
     import { ref } from 'vue'
@@ -15,7 +16,8 @@
     import {
         equipmentDeploymentApi,
         getEquipmentListApi,
-        deleteGoodstApi
+        deleteGoodstApi,
+        equipmentEditApi
     } from 'http/api/usercenter/goodsmang'
 
     // 注册地址拼装
@@ -29,6 +31,17 @@
         store.getDeviceTypeList()
     })
 
+    /* 查询参数 */
+    const queryParams: any = ref({
+        code: '',
+        maStatus: '',
+        leaseScope: '',
+        typeName: '',
+        deviceName: '',
+        pageSize: 10,
+        pageNum: 1
+    })
+
     // 省级数据源
     const selProvinceList: any = computed(() => {
         return store.provinceList
@@ -65,6 +78,9 @@
     /* 编辑 */
     const isEditDisabled = ref(false)
 
+    /* 入驻框的标题 */
+    const settleinTitle = ref('')
+
     // 省级下拉框选中时获取市级
     const changeProvince = (val: any) => {
         // console.log(val, '省选择**')
@@ -158,16 +174,15 @@
         maStatus: 15
     })
 
-    const pageSize = 20
-    const pageNumber = 1
     const total: any = ref(0)
 
     const tableData: any = ref([])
 
     // 获取数据列表
     const getList = async () => {
-        const res: any = await getEquipmentListApi({})
-        console.log('商品管理99999', res)
+        console.log(queryParams.value.pageNum, '***9999', queryParams.value.pageSize)
+        const res: any = await getEquipmentListApi(queryParams.value)
+        console.log(res, '列表数据**--**')
 
         total.value = res.total
         tableData.value = res.rows.filter((item: any) => item !== null)
@@ -181,6 +196,8 @@
 
     // 编辑按钮
     const editRowInfo = (row: any) => {
+        settleinTitle.value = '装备入驻编辑'
+        // row.fileList = []
         getRowList(row)
         isEditDisabled.value = true
         disabledForm.value = false
@@ -199,6 +216,7 @@
 
     /* 查看按钮 */
     const previewRowInfo = (row: any) => {
+        settleinTitle.value = '装备入驻详情'
         row.devPicList = []
         row.fileList.map((item) => {
             if (item.dicId == 28) {
@@ -211,6 +229,7 @@
                 row.devPicList.push(item.fileUrl)
             }
         })
+
         getRowList(row)
         disabledForm.value = true
         isEditDisabled.value = false
@@ -218,20 +237,24 @@
 
     const getRowList = (row: any) => {
         equipmentDeploymentParams.value = row
-        equipmentDeploymentParams.value.cityId = equipmentDeploymentParams.value.cityId + ''
-        equipmentDeploymentParams.value.areaId = equipmentDeploymentParams.value.areaId + ''
-        equipmentDeploymentParams.value.provinceId = equipmentDeploymentParams.value.provinceId + ''
-        equipmentDeploymentParams.value.leaseScope = equipmentDeploymentParams.value.leaseScope + ''
-
-        equipmentDeploymentParams.value.companyId = equipmentDeploymentParams.value.companyId * 1
-        equipmentDeploymentParams.value.groupId = equipmentDeploymentParams.value.groupId * 1
-        equipmentDeploymentParams.value.typeId = equipmentDeploymentParams.value.typeId * 1
+        equipmentDeploymentParams.value.cityId = String(equipmentDeploymentParams.value.cityId)
+        equipmentDeploymentParams.value.areaId = String(equipmentDeploymentParams.value.areaId)
+        equipmentDeploymentParams.value.provinceId = String(
+            equipmentDeploymentParams.value.provinceId
+        )
+        equipmentDeploymentParams.value.leaseScope = String(
+            equipmentDeploymentParams.value.leaseScope
+        )
 
+        equipmentDeploymentParams.value.companyId = Number(
+            equipmentDeploymentParams.value.companyId
+        )
+        equipmentDeploymentParams.value.groupId = Number(equipmentDeploymentParams.value.groupId)
+        equipmentDeploymentParams.value.typeId = Number(equipmentDeploymentParams.value.typeId)
         dialogFormVisibleSettlein.value = true
         store.getprovinceList()
         store.getmarketList(row.provinceId)
         store.getareaList(row.cityId)
-
         store.getDeviceTypeList()
         store.getDeviceTypeSonList(row.companyId)
         store.getDeviceTypeSunList(row.groupId)
@@ -239,7 +262,9 @@
 
     // 装备入驻按钮
     const equipmentDeployment = () => {
+        settleinTitle.value = '新增装备入驻'
         isEditDisabled.value = true
+        disabledForm.value = false
         equipmentDeploymentParams.value = {
             /* 企业Id */
             ownCo: mainStore().userInfo.companyId,
@@ -305,21 +330,41 @@
 
     const ruleFormRef: any = ref(null)
 
-    // 入驻框保存提交
-    const submitBtn = async () => {
-        ruleFormRef.value.validate((valid: any) => {
-            console.log(valid)
-        })
-        /*  const res: any = await equipmentDeploymentApi(equipmentDeploymentParams.value)
-        if (res.code === 200) {
-            ElMessage({
-                type: 'success',
-                message: '入驻成功'
-            })
+    /* 关闭按钮 */
+    const closeDialogBtn = () => {
+        ruleFormRef.value.resetFields()
+        dialogFormVisibleSettlein.value = false
+    }
 
-            dialogFormVisibleSettlein.value = false
-            getList()
-        } */
+    // 入驻框保存提交
+    const submitBtn = () => {
+        ruleFormRef.value.validate(async (valid: any) => {
+            if (valid) {
+                if (settleinTitle.value === '装备入驻编辑') {
+                    const res: any = await equipmentEditApi(equipmentDeploymentParams.value)
+                    if (res.code === 200) {
+                        ElMessage({
+                            type: 'success',
+                            message: '修改成功'
+                        })
+                        dialogFormVisibleSettlein.value = false
+                        ruleFormRef.value.resetField()
+                        getList()
+                    }
+                } else {
+                    const res: any = await equipmentDeploymentApi(equipmentDeploymentParams.value)
+                    if (res.code === 200) {
+                        ElMessage({
+                            type: 'success',
+                            message: '入驻成功'
+                        })
+                        dialogFormVisibleSettlein.value = false
+                        ruleFormRef.value.resetField()
+                        getList()
+                    }
+                }
+            }
+        })
     }
 
     // 表单 lable 数据
@@ -479,6 +524,8 @@
 
     /* 检测信息图片地址 */
     const successResultCallBackFnjc = (val: any) => {
+        equipmentDeploymentParams.value.detectionList = []
+        equipmentDeploymentParams.value.detectionList.push(val.msg)
         equipmentDeploymentParams.value.fileList.push({
             dicId: '28',
             fileUrl: val.msg
@@ -486,6 +533,8 @@
     }
     /* 保险信息图片地址 */
     const successResultCallBackFnbs = (val: any) => {
+        equipmentDeploymentParams.value.insureList = []
+        equipmentDeploymentParams.value.insureList.push(val.msg)
         equipmentDeploymentParams.value.fileList.push({
             dicId: '29',
             fileUrl: val.msg
@@ -493,6 +542,8 @@
     }
     /* 设备图片信息地址 */
     const successResultCallBackFnDevicePic = (val: any) => {
+        equipmentDeploymentParams.value.picList = []
+        equipmentDeploymentParams.value.picList.push(val.msg)
         if (!equipmentDeploymentParams.value.picUrl) {
             equipmentDeploymentParams.value.picUrl = val.msg
         }
@@ -501,25 +552,73 @@
             fileUrl: val.msg
         })
     }
+
+    /* 关闭对话框 */
+    const handleClose = (done: () => void) => {
+        ruleFormRef.value.resetFields()
+        done()
+        dialogFormVisibleSettlein.value = false
+    }
+
+    /* 查询按钮 */
+    const queryTableList = () => {
+        getList()
+    }
 </script>
 
 <template>
     <!-- 商品管理 -->
-    <FormComponent :formItemList="formItemList">
+
+    <el-form :model="queryParams" :inline="true" size="small" label-width="auto">
+        <el-form-item label="编码：" prop="menuName">
+            <el-input v-model.trim="queryParams.code" style="width: 160px" clearable />
+        </el-form-item>
+        <el-form-item label="状态：" prop="menuName">
+            <el-select style="width: 160px" v-model="queryParams.maStatus" clearable>
+                <el-option label="待上架" value="15"></el-option>
+                <el-option label="待租" value="16"></el-option>
+                <el-option label="在租" value="17"></el-option>
+                <el-option label="下架" value="18"></el-option>
+                <el-option label="自有" value="43"></el-option>
+                <el-option label="待审批" value="331"></el-option>
+                <el-option label="上架驳回" value="332"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="租赁范围：" prop="menuName">
+            <el-select style="width: 160px" v-model="queryParams.leaseScope" clearable>
+                <el-option label="全平台" value="329"></el-option>
+                <el-option label="专区" value="330"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="装备类型：" prop="menuName">
+            <el-select style="width: 160px" v-model="queryParams.typeName" clearable>
+                <el-option
+                    v-for="item in selDeviceTypeList"
+                    :key="item.typeId"
+                    :label="item.typeName"
+                    :value="item.typeId"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="装备名称：" prop="menuName">
+            <el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable />
+        </el-form-item>
         <el-form-item>
+            <el-button type="primary" @click="queryTableList">查询</el-button>
+            <el-button type="success">重置</el-button>
             <el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
         </el-form-item>
-    </FormComponent>
+    </el-form>
 
     <!-- 表格 -->
     <el-table
         :data="tableData"
-        style="width: 100%"
+        style="width: auto"
         show-overflow-tooltip
         :header-cell-style="{
             background: '#3E98FF',
             color: '#fff'
-        }">
+        }"
+        max-height="400px">
         <el-table-column align="center" prop="code" label="编码" />
         <el-table-column align="center" prop="leaseScope" label="租赁范围">
             <template #default="{ row }">
@@ -545,7 +644,7 @@
                 <el-tag v-if="row.maStatus == 332" size="small" type="danger">上架驳回</el-tag>
             </template>
         </el-table-column>
-        <el-table-column prop="name" label="操作" width="200px" align="center">
+        <el-table-column prop="name" label="操作" min-width="160px" align="center">
             <template #default="{ row }">
                 <el-button
                     v-if="row.maStatus == 15 || row.maStatus == 1"
@@ -554,7 +653,7 @@
                     @click="editRowInfo(row)">
                     编辑
                 </el-button>
-                <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
+                <!-- <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button> -->
                 <el-button
                     v-if="row.maStatus == 15 || row.maStatus == 1"
                     size="small"
@@ -569,13 +668,19 @@
 
     <!-- 分页 -->
     <PagingComponent
-        @getList="getList"
-        :pageSize="pageSize"
-        :pageNumber="pageNumber"
+        @getListChange="getList"
+        v-model:pageSize="queryParams.pageSize"
+        v-model:currentPage="queryParams.pageNum"
         :total="total" />
 
     <!-- 装备入驻弹框 -->
-    <el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
+    <el-dialog
+        v-model="dialogFormVisibleSettlein"
+        :title="settleinTitle"
+        width="60%"
+        align-center
+        :close-on-click-modal="false"
+        :before-close="handleClose">
         <el-form
             label-width="160"
             ref="ruleFormRef"
@@ -604,7 +709,7 @@
                             v-for="item in selProvinceList"
                             :key="item.id"
                             :label="item.name"
-                            :value="item.code + ''"></el-option>
+                            :value="item.code"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label-width="8px" prop="cityId">
@@ -618,7 +723,7 @@
                             v-for="item in selMarketList"
                             :key="item.id"
                             :label="item.name"
-                            :value="item.code + ''"></el-option>
+                            :value="item.code"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label-width="8px" prop="areaId">
@@ -632,7 +737,7 @@
                             v-for="item in selAreaList"
                             :key="item.id"
                             :label="item.name"
-                            :value="item.code + ''"></el-option>
+                            :value="item.code"></el-option>
                     </el-select>
                 </el-form-item>
             </el-row>
@@ -741,7 +846,7 @@
                     v-if="!disabledForm || isEditDisabled"
                     :maxLimit="1"
                     listType="picture-card"
-                    :acceptTypeList="['.pdf']"
+                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
                     width="120px"
                     height="120px"
                     :autoUpload="true"
@@ -765,7 +870,7 @@
                     v-if="!disabledForm || isEditDisabled"
                     :maxLimit="1"
                     listType="picture-card"
-                    :acceptTypeList="['.pdf']"
+                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
                     width="120px"
                     height="120px"
                     :autoUpload="true"
@@ -842,12 +947,15 @@
                 </span>
 
                 <template v-if="disabledForm && !isEditDisabled">
-                    <el-image
-                        v-for="item in equipmentDeploymentParams.devPicList"
-                        :key="item"
-                        style="width: 120px; height: 120px; margin-right: 8px"
-                        :src="item"
-                        fit="cover" />
+                    <template v-if="equipmentDeploymentParams.devPicList.length > 0">
+                        <el-image
+                            v-for="item in equipmentDeploymentParams.devPicList"
+                            :key="item"
+                            style="width: 120px; height: 120px; margin-right: 8px"
+                            :src="item"
+                            fit="cover" />
+                    </template>
+                    <template v-else>暂无图片</template>
                 </template>
                 <!-- <el-image
                     style="width: 120px; height: 120px; margin-right: 8px"
@@ -861,10 +969,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettlein = false">
-                    关 闭
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" v-if="!disabledForm || isEditDisabled" type="success">
+                    提 交
                 </el-button>
-                <el-button @click="submitBtn">保 存</el-button>
             </span>
         </template>
     </el-dialog>
diff --git a/src/views/user/goodsManagement/previewImg/index.vue b/src/views/user/goodsManagement/previewImg/index.vue
new file mode 100644
index 0000000..9df5135
--- /dev/null
+++ b/src/views/user/goodsManagement/previewImg/index.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    const deleteIcon = () => {
+        ElMessageBox.confirm('是否确定移除文件，并重新上传?', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
+            .then(() => {
+                ElMessage({
+                    type: 'success',
+                    message: '已移除'
+                })
+            })
+            .catch(() => {})
+    }
+    const srcList = ref([''])
+
+    const props = defineProps({
+        imgUrl: {
+            type: String,
+            default: ''
+        }
+    })
+</script>
+
+<template>
+    <div class="img-container">
+        <el-image
+            style="width: 120px; height: 120px"
+            :src="imgUrl"
+            fit="cover"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="srcList" />
+
+        <div class="del-icon" @click="deleteIcon">
+            <Delete style="width: 1.5em; height: 1.5em" />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .img-container {
+        position: relative;
+        width: 120px;
+        height: 120px;
+        margin-right: 8px;
+        .del-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #f2ecec;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/src/views/user/zoneManag/index.vue b/src/views/user/zoneManag/index.vue
index ec1ab8a..6df2d41 100644
--- a/src/views/user/zoneManag/index.vue
+++ b/src/views/user/zoneManag/index.vue
@@ -1,23 +1,34 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    const time = ref('')
+</script>
 
 <template>
     <!-- 专区管理 -->
     <el-form :inline="true" size="small" label-width="auto">
         <el-form-item label="专区名称：">
-            <el-input style="width: 120px" />
+            <el-input />
         </el-form-item>
         <el-form-item label="申请时间：">
-            <el-input style="width: 120px" />
+            <el-date-picker
+                v-model="time"
+                type="daterange"
+                unlink-panels
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                style="width: 180px" />
         </el-form-item>
         <el-form-item label="状态：">
-            <el-input style="width: 120px" />
+            <el-select style="width: 180px">
+                <el-option></el-option>
+            </el-select>
         </el-form-item>
         <el-form-item label="申请人：">
-            <el-input style="width: 120px" />
+            <el-input />
         </el-form-item>
 
         <el-form-item>
-            <el-button type="primary">申请加入专区</el-button>
+            <el-button type="primary" @click="$router.push('joinZone')">申请加入专区</el-button>
         </el-form-item>
     </el-form>
 
diff --git a/src/views/user/zoneManag/zoneCom/joinZone.vue b/src/views/user/zoneManag/zoneCom/joinZone.vue
new file mode 100644
index 0000000..8d8dc72
--- /dev/null
+++ b/src/views/user/zoneManag/zoneCom/joinZone.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>申请加入专区</div>
+</template>
+
+<style></style>