From 24fd3e45b613f483ac61f81e222f7af746777c3d Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Tue, 26 Nov 2024 18:30:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/equipCardNew/index.vue    |  36 +
 src/http/api/order/index.ts              |   6 +
 src/http/api/usercenter/goodsmang.ts     |  46 +-
 src/router/index.ts                      |  11 +
 src/views/equip/detail.vue               |  13 +-
 src/views/home/index.vue                 |   1 +
 src/views/order/index.vue                | 406 ++++++++++++
 src/views/user/goodsManagement/index.vue | 810 +++++++++++------------
 8 files changed, 898 insertions(+), 431 deletions(-)
 create mode 100644 src/http/api/order/index.ts
 create mode 100644 src/views/order/index.vue

diff --git a/src/components/equipCardNew/index.vue b/src/components/equipCardNew/index.vue
index 90425be..9d49619 100644
--- a/src/components/equipCardNew/index.vue
+++ b/src/components/equipCardNew/index.vue
@@ -27,6 +27,11 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { addBookCarApi } from '@/http/api/equip'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+const router = useRouter()
+const route = useRoute()
 const props: any = defineProps({
     url: {
         type: String,
@@ -41,6 +46,10 @@ const props: any = defineProps({
         type: Array,
         default: ['待租', '合肥市'],
     },
+    companyId: {
+        type: [String, Number],
+        default: '',
+    },
     company: {
         type: String,
         default: '安徽某科技有限公司',
@@ -68,8 +77,35 @@ const cardClick = () => {
 }
 
 const onHandelLessee = () => {
+    onAddCart()
+    router.push({
+        path: `/orderConfirm/${props.id}`,
+    })
     console.log('立即租赁')
 }
+
+// 加入购物车
+const onAddCart = async () => {
+    const addParams = {
+        maId: props.id,
+        orderCompany: props.companyId
+    }
+    const res = await addBookCarApi(addParams)
+    if (res.code === 200) {
+        ElMessage({
+            type: 'success',
+            duration: 1000,
+            message: `预约车加入成功`,
+        })
+    } else {
+        ElMessage({
+            type: 'error',
+            duration: 1000,
+            message: res.msg,
+        })
+    }
+}
+
 </script>
 <style lang="scss" scoped>
 .equipCard {
diff --git a/src/http/api/order/index.ts b/src/http/api/order/index.ts
new file mode 100644
index 0000000..a15a624
--- /dev/null
+++ b/src/http/api/order/index.ts
@@ -0,0 +1,6 @@
+import { get,post } from '../../index'
+ 
+export const getBookCarDetailByMaId = (data: object) => {
+    return post(`/material-mall/bookCar/getBookCarDetailByMaId`, data)
+}
+
diff --git a/src/http/api/usercenter/goodsmang.ts b/src/http/api/usercenter/goodsmang.ts
index 6e0426d..dd04e36 100644
--- a/src/http/api/usercenter/goodsmang.ts
+++ b/src/http/api/usercenter/goodsmang.ts
@@ -2,22 +2,42 @@
 
 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) => {
-    return post('/zlpt-equip/dev/devList', data)
+    return post('/material-mall/dev/devList', data)
+} 
+
+//获取装备详情
+export const getDetail = (id = '') => {
+    return get(`/material-mall/dev/getInfo/${id}`)
 }
 
-// 商品删除接口
-export const deleteGoodstApi = (data: any) => {
+// 新增装备
+export const equipmentDeploymentApi = (data: any) => {
+    return post('/material-mall/dev', data)
+}
+
+// 保存草稿
+export const insertDraftApi = (data: any) => {
+    return post('/material-mall/dev/insertDraft', data)
+}
+//装备装备类目树结构数据
+export const getEquipmentTypeApi = () => {
+    return get('/material-mall/maType/getEquipmentType', {})
+}
+//装备所属公司
+export const getCompanyListApi = () => {
+    return get('/material-mall/dev/companyList', {})
+}
+
+// 删除接口
+export const removeDeviceApi = (data: any) => {
     return post('/zlpt-equip/dev/remove', data)
 }
 
+// 上下架（批量）
+export const updateUpDownApi = (data: any) => {
+    return post('/material-mall/dev/updateUpDown', data)
+}
+    
+
diff --git a/src/router/index.ts b/src/router/index.ts
index 0906501..95dcf85 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -411,6 +411,17 @@ const routes: Array<RouteRecordRaw> = [
             keepAlive: false,
             AuthFlag: false
         },
+    },
+    // 订单确认页面
+    {
+        path: '/orderConfirm/:maId',
+        name: 'orderConfirm',
+        component: () => import('views/order/index.vue'),
+        meta: {
+            title: '订单提交',
+            keepAlive: false,
+            AuthFlag: false
+        },
     }
 
 
diff --git a/src/views/equip/detail.vue b/src/views/equip/detail.vue
index 86d376e..2bfc639 100644
--- a/src/views/equip/detail.vue
+++ b/src/views/equip/detail.vue
@@ -487,9 +487,18 @@ const rules = reactive({
     projectDescription: [{ required: true, message: '请输入项目说明', trigger: 'blur' }],
 })
 
-//打开我要租表单
+// //打开我要租表单
+// const openLease = () => {
+//     dialoglease.value = true
+// }
+
+
 const openLease = () => {
-    dialoglease.value = true
+    console.log(pageData.value)
+    onAddCart()
+    router.push({
+        path: `/orderConfirm/${pageData.value.maId}`,
+    })
 }
 //切换收藏状态
 const collectChange = async () => {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f56f4e1..6952637 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -284,6 +284,7 @@ const onSelectItem = (type: number) => {
                         <EquipCardNew
                             @onClick="onClick"
                             :id="item.maId"
+                            :companyId="item.companyId"
                             :company="item.companyName"
                             :name="item.deviceName"
                             :price="item.dayLeasePrice"
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
new file mode 100644
index 0000000..86da676
--- /dev/null
+++ b/src/views/order/index.vue
@@ -0,0 +1,406 @@
+<template>
+    <Header />
+    <div class="container">
+        <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>提交订单</el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <div class="cart-title">
+            <div></div>
+            <div style="margin: 0 8px">提交订单</div>
+            <div>({{ amountNum }})</div>
+        </div>
+
+        <el-row class="cart-th">
+            <el-col :span="2">
+                <div>
+                    <el-checkbox v-model="allChecked" @change="onChangeAll"> 全选 </el-checkbox>
+                </div>
+            </el-col>
+            <el-col :span="8">
+                <div>装备信息</div>
+            </el-col>
+            <el-col :span="4">
+                <div>租期</div>
+            </el-col>
+            <el-col :span="2">
+                <div>日租金/元</div>
+            </el-col>
+            <el-col :span="2">
+                <div>天数</div>
+            </el-col>
+            <el-col :span="2">
+                <div>数量</div>
+            </el-col>
+            <el-col :span="2">
+                <div>总金额/元</div>
+            </el-col>
+            <el-col :span="2">
+                <div>操作</div>
+            </el-col>
+        </el-row>
+
+        <div class="cart-tbody" v-for="(item, index) in orderList" :key="index">
+            <el-row style="border-bottom: 1px solid #ccc">
+                <el-col :span="1">
+                    <div style="text-align: center">
+                        <el-checkbox
+                            v-model="item.isChecked"
+                            @change="onChangeCompany($event, index, item)"
+                        >
+                        </el-checkbox>
+                    </div>
+                </el-col>
+                <el-col :span="22" class="cart-user-info">
+                    <div>{{ item.companyName }}</div>
+                    <div class="user-name">{{ item.person }}</div>
+                    <div class="user-phone">{{ item.personPhone }}</div>
+                </el-col>
+            </el-row>
+
+            <el-row class="cart-list">
+                <el-col :span="1">
+                    <!-- <div style="text-align: center">
+                        <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
+                        </el-checkbox>
+                    </div> -->
+                </el-col>
+                <el-col :span="9" class="goods-info">
+                    <img
+                        src="https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1"
+                        alt=""
+                    />
+                    <div class="goods-code">
+                        <div style="font-size: 14px; font-weight: bold">{{ item.deviceName }}</div>
+                        <div>装备编号： {{ item.code }}</div>
+                        <div>装备型号： {{ item.typeName }}</div>
+                    </div>
+                </el-col>
+                <el-col :span="4">
+                    <div class="lease-date">
+                        <div>{{ item.lease_date_string }}</div>
+                        <el-date-picker
+                            style="width: 100px; margin-top: 10px"
+                            v-model="item.lease_date"
+                            type="daterange"
+                            size="small"
+                            value-format="YYYY-MM-DD"
+                            @change="onLeaseDateChange($event, item)"
+                        />
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div class="red-font">
+                        {{ item.dayLeasePrice }}
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div class="red-font" style="color: #0062ff">
+                        {{ item.lease_day }}
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div>
+                        <el-input-number
+                            v-model="item.goods_num"
+                            style="width: 100px;margin-left: 10px;"
+                            :min="1" :max="item.deviceCount"
+                            size="small"
+                        />
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div class="red-font" style="margin-left: 20px;">
+                        {{ item.goods_num * item.dayLeasePrice * item.lease_day }}
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div>
+                        <el-button
+                            @click="onDeleteGoods(index)"
+                            type="text"
+                            style="color: #ff4800; font-weight: bold"
+                        >
+                            删除
+                        </el-button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <div class="protocol-handle">
+            <el-row style="display: flex; align-items: center">
+                <el-col :span="16">
+                    <div class="checkbox-container">
+                        <el-checkbox v-model="protocolChecked">
+                            我已阅读并同意签署
+                            <a href="#"> 《xxxx公司租赁服务合同》 </a>
+                        </el-checkbox>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div>
+                        共：<span style="color: #ff4800; font-weight: bold">{{
+                            amountDevice
+                        }}</span>
+                        件装备
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="red-font">
+                        订单总金额：<span style="color: #ff4800; font-weight: bold"
+                            >{{ orderAmountPice }} 元</span
+                        >
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div style="text-align: right">
+                        <el-button
+                            size="small"
+                            @click="onCartSubmit"
+                            style="padding: 6px 24px; background-color: #1abc9c; color: #fff"
+                            >提交</el-button
+                        >
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+    <FooterInfo />
+</template>
+
+<script setup lang="ts">
+import Header from '../../components/header/index.vue'
+import FooterInfo from '../../components/FooterInfo/index.vue'
+import { ElMessage } from 'element-plus'
+import { getBookCarDetailByMaId } from '../../http/api/order/index'
+import moment from 'moment'
+import { useRoute, useRouter } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const pageParams = route.params
+console.log(pageParams.maId)
+
+const protocolChecked = ref<boolean>(false)
+
+const orderList = ref<any>([])
+
+const getOrderListData = async () => { 
+    const addParams = {
+        maId: Number(pageParams.maId)
+    }
+    const res: any = await getBookCarDetailByMaId(addParams)
+    console.log(res, '----')
+
+    orderList.value = res.data
+
+    orderList.value.forEach((e: any) => {
+        e.isChecked = false;
+        e.goods_num = 1;
+        // e.devInfoVoList.forEach((j: any) => {
+        //     j.isChecked = false
+        // })
+    })
+
+    console.log(orderList.value, '***********')
+    // console.log(res, '购物车详情')
+}
+
+onMounted(() => {
+    getOrderListData()
+})
+
+// 日期change事件
+const onLeaseDateChange = (e: any, item: any) => {
+    item.lease_date_string = `${e[0]}至${e[1]}`
+    item.lease_day = moment(e[1]).diff(e[0], 'day')
+}
+
+// 删除按钮
+const onDeleteGoods = (index: number) => {
+    console.log('删除---', index)
+}
+
+// 全选change事件
+const onChangeAll = (e: boolean) => {
+    orderList.value.forEach((item: any) => {
+        item.isChecked = e
+        // item.devInfoVoList.forEach((j: any) => {
+        //     j.isChecked = e
+        // })
+    })
+}
+
+// 公司全选事件
+const onChangeGoods = (index: number) => {
+    orderList.value[index].isChecked = orderList.value[index].devInfoVoList.every(
+        (e: any) => e.isChecked === true,
+    )
+}
+// 公司全选事件
+const onChangeCompany = (e: boolean, index: number, item: any) => {
+    orderList.value[index].devInfoVoList.every((j) => (j.isChecked = e))
+}
+
+// 计算所有装备
+const amountNum = computed(() => {
+    let amountNum = 0
+    orderList.value.forEach((e) => {
+        amountNum = amountNum + 1
+    })
+    return amountNum
+})
+// 计算全选按钮的选中状态
+const allChecked = computed(() => {
+    return orderList.value.every((e: any) => e.isChecked === true)
+})
+
+// 已勾选的所有装备
+const amountDevice = computed(() => {
+    let amountNum = 0
+    orderList.value.forEach((e) => { 
+        if (e.isChecked) {
+            amountNum++
+        } 
+    })
+    return amountNum
+})
+
+// 计算订单总价格
+const orderAmountPice = computed(() => {
+    let orderAmountPice = 0
+    orderList.value.forEach((e) => { 
+        if (e.isChecked) {
+            orderAmountPice = e.goods_num * e.dayLeasePrice * e.lease_day + orderAmountPice
+        } 
+    })
+    return orderAmountPice
+})
+
+// 提交按钮
+const onCartSubmit = () => {
+    ElMessage.closeAll()
+    if (!protocolChecked.value) {
+        ElMessage({
+            showClose: false,
+            message: '请阅读公司合同',
+            type: 'error',
+        })
+    }
+    console.log('提交订单')
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 10px;
+    background: #eeeff6;
+    font-size: 14px;
+
+    .cart-title {
+        margin-top: 20px;
+        padding: 10px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    .cart-title div:first-child {
+        width: 5px;
+        height: 20px;
+        background-color: #4fabfe;
+    }
+
+    .cart-th {
+        margin: 15px 0;
+        div {
+            text-align: center;
+        }
+    }
+
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .user-name,
+            .user-phone {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .user-name {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+
+                img {
+                    width: 160px;
+                    height: 100px;
+                }
+
+                .goods-code {
+                    margin-left: 20px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .protocol-handle {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        font-size: 13px;
+
+        .checkbox-container a {
+            color: #ff4800;
+            text-decoration: underline;
+        }
+    }
+}
+</style>
diff --git a/src/views/user/goodsManagement/index.vue b/src/views/user/goodsManagement/index.vue
index 1388b27..7b847b7 100644
--- a/src/views/user/goodsManagement/index.vue
+++ b/src/views/user/goodsManagement/index.vue
@@ -4,20 +4,13 @@
     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'
-
+    import { ElMessage } from 'element-plus' 
+    import { ref } from 'vue' 
     import { useStore } from 'store/user'
-    const store = useStore()
-
-    import { mainStore } from 'store/main'
-
+    const store = useStore() 
+    import { mainStore } from 'store/main' 
     import {
-        equipmentDeploymentApi,
-        getEquipmentListApi,
-        deleteGoodstApi,
-        equipmentEditApi
+        getEquipmentListApi,getEquipmentTypeApi,getCompanyListApi
     } from 'http/api/usercenter/goodsmang'
 
     // 注册地址拼装
@@ -25,159 +18,165 @@
     const deviceType: any = reactive([])
 
     onMounted(() => {
+        // 获取装备树
+        getTypeTreeData()
+        // 获取下拉
+        getCompanyList()
         // 获取省级数据
-        store.getprovinceList()
+        // store.getprovinceList()
         // 获取设备类型
-        store.getDeviceTypeList()
+        // store.getDeviceTypeList()
     })
-
+    // 设备类型树
+    const deviceTypeTree: any = ref([])
+    const partTypeTreeProps: any = ref({
+        children: "children",
+        label: "name",
+        multiple: false,
+        value: "id"
+    }) 
+    // 获取装备树
+    const getTypeTreeData = async () => {  
+        const res: any = await getEquipmentTypeApi();
+        console.log("treeData==========", res);
+        deviceTypeTree.value = res.data;  
+    }
+    const deviceTypeChange = (val: any) => { 
+      console.log(val) 
+      if(val.length > 0) {
+        queryParams.value.typeId = val[3]
+      } else {
+        queryParams.value.typeId = ""
+      } 
+    } 
+     /* 查询参数 */
+     const deviceTypeList: any = ref([]) 
+     const dateRange: any = ref([])
     /* 查询参数 */
     const queryParams: any = ref({
-        code: '',
-        maStatus: '',
-        leaseScope: '',
-        typeName: '',
         deviceName: '',
+        code: '',
+        maStatus: '', 
+        typeId: '', 
         pageSize: 10,
         pageNum: 1
     })
+    const total: any = ref(0) 
+    const tableData: any = ref([]) 
 
-    // 省级数据源
-    const selProvinceList: any = computed(() => {
-        return store.provinceList
-    })
+    // // 省级数据源
+    // const selProvinceList: any = computed(() => {
+    //     return store.provinceList
+    // })
 
-    // 获取市级数据源
-    const selMarketList: any = computed(() => {
-        return store.marketList
-    })
+    // // 获取市级数据源
+    // const selMarketList: any = computed(() => {
+    //     return store.marketList
+    // })
 
-    // 获取区级数据源
-    const selAreaList: any = computed(() => {
-        return store.areaList
-    })
+    // // 获取区级数据源
+    // const selAreaList: any = computed(() => {
+    //     return store.areaList
+    // })
 
-    // 设备类型大类
-    const selDeviceTypeList: any = computed(() => {
-        return store.deviceTypeList
-    })
+    // // 设备类型大类
+    // const selDeviceTypeList: any = computed(() => {
+    //     return store.deviceTypeList
+    // })
 
-    // 设备类型子类
-    const selDeviceTypeSonList: any = computed(() => {
-        return store.deviceTypeSonList
-    })
+    // // 设备类型子类
+    // const selDeviceTypeSonList: any = computed(() => {
+    //     return store.deviceTypeSonList
+    // })
 
-    // 设备类型小类
-    const selDeviceTypeSunList: any = computed(() => {
-        return store.deviceTypeSunList
-    })
+    // // 设备类型小类
+    // const selDeviceTypeSunList: any = computed(() => {
+    //     return store.deviceTypeSunList
+    // })
+ 
+    // // 省级下拉框选中时获取市级
+    // const changeProvince = (val: any) => {
+    //     // console.log(val, '省选择**')
+    //     store.getmarketList(val.split(',')[0])
 
+    //     // AssemblyRegisterAddress[0] = val.split(',')[1]
+    // } 
+    // // 市级下拉框选中获取区级数据
+    // const changeMarket = (val: any) => {
+    //     store.getareaList(val.split(',')[0])
+    //     // AssemblyRegisterAddress[1] = val.split(',')[1]
+    // }
+    // // 区级下拉框获取区级数据
+    // const opeChangeArea = (val: any) => {
+    //     // AssemblyRegisterAddress[2] = val.split(',')[1]
+    // } 
+    // // 设备类型大类
+    // const changeDeviceType = (val: any) => {
+    //     store.getDeviceTypeSonList(val)
+    //     // deviceType[0] = val.split(',')[1]
+    // }
+    // // 设备类型子类
+    // const changeDeviceTypeSon = (val: any) => {
+    //     store.getDeviceTypeSunList(val)
+    //     // deviceType[1] = val.split(',')[1]
+    // }
+    // // 设备类型小类
+    // const changeDeviceTypeSun = (val: any) => {
+    //     // deviceType[2] = val.split(',')[1]
+    // }
+
+
+     // 弹窗
     /* 查看 */
-    const disabledForm = ref(false)
-
+    const disabledForm = ref(false) 
     /* 编辑 */
     const isEditDisabled = ref(false)
-
     /* 入驻框的标题 */
     const settleinTitle = ref('')
-
-    // 省级下拉框选中时获取市级
-    const changeProvince = (val: any) => {
-        // console.log(val, '省选择**')
-        store.getmarketList(val.split(',')[0])
-
-        // AssemblyRegisterAddress[0] = val.split(',')[1]
-    }
-
-    // 市级下拉框选中获取区级数据
-    const changeMarket = (val: any) => {
-        store.getareaList(val.split(',')[0])
-        // AssemblyRegisterAddress[1] = val.split(',')[1]
-    }
-    // 区级下拉框获取区级数据
-    const opeChangeArea = (val: any) => {
-        // AssemblyRegisterAddress[2] = val.split(',')[1]
-    }
-
-    // 设备类型大类
-    const changeDeviceType = (val: any) => {
-        store.getDeviceTypeSonList(val)
-        // deviceType[0] = val.split(',')[1]
-    }
-    // 设备类型子类
-    const changeDeviceTypeSon = (val: any) => {
-        store.getDeviceTypeSunList(val)
-        // deviceType[1] = val.split(',')[1]
-    }
-    // 设备类型小类
-    const changeDeviceTypeSun = (val: any) => {
-        // deviceType[2] = val.split(',')[1]
-    }
-
+    //所属公司
+    const companyDataList: any = ref([])
     /*
      *  商品入驻弹框参数
      */
     const equipmentDeploymentParams: any = ref({
-        /* 企业Id */
-        ownCo: mainStore().userInfo.companyId,
-        /* 租赁范围 */
-        leaseScope: '',
-        /* 设备所在地 */
-        location: '',
-        /* 省 */
-        provinceId: '',
-        /* 市 */
-        cityId: '',
-        /* 区 */
-        areaId: '',
-        /* 设备所在地 省 */
-        addressEconomize: '',
-        /* 设备所在地 市 */
-        addressProvince: '',
-        /* 设备所在地 区 */
-        addressArea: '',
-        /* 设备类型 */
+        /* 设备名称 */ 
+        deviceName: '',
+        deviceTypeList: [], 
+        deviceCount: 1,
+        unitName: '', 
+        code: '',  
+        brand: '', 
         typeId: '',
-        /* 设备类型大类 */
-        deviceType: '',
-        /* 设备类型子类 */
-        deviceTypeSon: '',
-        /* 设备类型小类*/
-        deviceTypeSun: '',
-        /* 设备品牌 */
-        brand: '',
-        /* 设备型号 */
-        modelName: '',
-        /* 出场日期 */
+        companyId: '',
         productionDate: '',
-        /* 工作小时数 */
-        workingHours: '',
-        /* 整机序列号 */
-        serialNumber: '',
-        /* 月租金 */
-        monthLeasePrice: '',
-        /* 日租金 */
         dayLeasePrice: '',
-        /* 是否提供机手 */
-        isOperator: '',
-        /* 机手月费用 */
-        jsMonthPrice: '',
-        /* 机手日费用 */
-        jsDayPrice: '',
-        /* 详细说明 */
-        description: '',
-        /* 设备主图片 */
-        picUrl: '',
-        /* 检测信息 ，保险信息*/
-        fileList: [],
-        /* 设备状态 */
-        maStatus: 15
+        person: '',
+        personPhone: '',
+        deviceWeight: '',
     })
-
-    const total: any = ref(0)
-
-    const tableData: any = ref([])
-
+    //编码类型禁止修改数目
+    const countDisabled = ref(false) 
+    const dialogTypeCascader = ref()
+    //装备类目-change
+    const dialogTypeChange = () => { 
+            const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
+            console.log(deviceTypeList)
+            equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
+            let manageType = deviceTypeList[0].data.manageType
+            if(manageType=='1'){//数量  
+                equipmentDeploymentParams.value.deviceCount=1
+                countDisabled.value=false
+            }else if(manageType=='0'){//编码 
+                equipmentDeploymentParams.value.deviceCount=1
+                countDisabled.value=true
+            }  
+    } 
+    //获取下拉数据 
+    const getCompanyList = async () => { 
+        const res: any = await getCompanyListApi()
+        console.log(res, '列表数据**--**') 
+        companyDataList.value = res.data 
+    }
     // 获取数据列表
     const getList = async () => {
         console.log(queryParams.value.pageNum, '***9999', queryParams.value.pageSize)
@@ -187,8 +186,9 @@
         total.value = res.total
         tableData.value = res.rows.filter((item: any) => item !== null)
     }
-
     getList()
+
+
     // 选择复选框时获取需要删除的数据源
     const getRowId = (val: any) => {
         console.log(val, '需要删除的数据源**')
@@ -216,19 +216,19 @@
 
     /* 查看按钮 */
     const previewRowInfo = (row: any) => {
-        settleinTitle.value = '装备入驻详情'
+        settleinTitle.value = '装备详情'
         row.devPicList = []
-        row.fileList.map((item) => {
-            if (item.dicId == 28) {
-                row.jcUrl = item.fileUrl
-            }
-            if (item.dicId == 29) {
-                row.bsUrl = item.fileUrl
-            }
-            if (item.dicId == 20) {
-                row.devPicList.push(item.fileUrl)
-            }
-        })
+        // row.fileList.map((item) => {
+        //     if (item.dicId == 28) {
+        //         row.jcUrl = item.fileUrl
+        //     }
+        //     if (item.dicId == 29) {
+        //         row.bsUrl = item.fileUrl
+        //     }
+        //     if (item.dicId == 20) {
+        //         row.devPicList.push(item.fileUrl)
+        //     }
+        // })
 
         getRowList(row)
         disabledForm.value = true
@@ -366,15 +366,7 @@
             }
         })
     }
-
-    // 表单 lable 数据
-    const formItemList: any = ref([
-        { v_label: '编码', v_typ: 'ipt' },
-        { v_label: '状态', v_typ: 'ipt' },
-        { v_label: '租赁范围', v_typ: 'sel' },
-        { v_label: '装备类型', v_typ: 'sel' },
-        { v_label: '装备名称', v_typ: 'ipt' }
-    ])
+ 
 
     // 装备入驻弹框显示隐藏
     const dialogFormVisibleSettlein: any = ref(false)
@@ -570,78 +562,72 @@
     <!-- 商品管理 -->
 
     <el-form :model="queryParams" :inline="true" size="small" label-width="auto">
-        <el-form-item label="编码：" prop="menuName">
+        <el-form-item label="装备名称：" prop="deviceName">
+            <el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable />
+        </el-form-item>
+        <el-form-item label="装备编码：" prop="code">
             <el-input v-model.trim="queryParams.code" style="width: 160px" clearable />
         </el-form-item>
-        <el-form-item label="状态：" prop="menuName">
+        <el-form-item label="装备状态：" prop="maStatus">
             <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-option label="草稿状态" value="0"></el-option>
+                <el-option label="上架" value="1"></el-option>
+                <el-option label="下架" value="2"></el-option>
+                <el-option label="在租" value="3"></el-option> 
             </el-select>
+        </el-form-item> 
+        <el-form-item label="装备类目：" prop="deviceTypeList">
+            <el-cascader
+              v-model="deviceTypeList" 
+              :show-all-levels="false"
+              :options="deviceTypeTree"
+              :props="partTypeTreeProps"
+              filterable clearable
+              collapse-tags
+              style="width:160px"
+              placeholder="请选择装备类目"
+              ref="deviceTypeCascader" 
+              @change="deviceTypeChange"
+              ></el-cascader>
         </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 label="更新时间：" prop="dateRange">
+            <el-date-picker
+            v-model="dateRange"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+            </el-date-picker>
         </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-button type="primary" @click="equipmentDeployment">装备新增</el-button>
         </el-form-item>
     </el-form>
 
     <!-- 表格 -->
-    <el-table
-        :data="tableData"
-        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 }">
-                {{ row.leaseScope == 329 ? '全平台' : '专区' }}
-            </template>
+    <el-table   :data="tableData" style="width: auto"
+                show-overflow-tooltip max-height="400px"
+                :header-cell-style="{background: '#3E98FF',color: '#fff'}">
+        <el-table-column label="序号" align="center" width="80" type="index"> 
         </el-table-column>
-        <el-table-column align="center" prop="typeName" label="装备类型" />
         <el-table-column align="center" prop="deviceName" label="装备名称" />
-        <el-table-column align="center" label="租金">
+        <el-table-column align="center" prop="code" label="编码" /> 
+        <el-table-column align="center" prop="typeName" label="装备类目">
             <template #default="{ row }">
-                <el-tag size="small">{{ row.monthLeasePrice + '/月' }}</el-tag>
-                <el-tag size="small">{{ row.dayLeasePrice + '/天' }}</el-tag>
+                <span>{{ row.firstName }} <span v-show="row.firstName">></span> {{ row.secondName }}<span v-show="row.secondName">></span>{{ row.thirdName }}</span>
             </template>
         </el-table-column>
-        <el-table-column align="center" label="状态" width="80px">
+        <el-table-column align="center" prop="typeName" label="装备型号" />
+ 
+        <el-table-column align="center" label="装备状态" width="80px">
             <template #default="{ row }">
-                <el-tag v-if="row.maStatus == 15" size="small" type="info">待上架</el-tag>
-                <el-tag v-if="row.maStatus == 16" size="small" type="warning">待租</el-tag>
-                <el-tag v-if="row.maStatus == 17" size="small" type="success">在租</el-tag>
-                <el-tag v-if="row.maStatus == 18" size="small" type="danger">下架</el-tag>
-                <el-tag v-if="row.maStatus == 43" size="small" type="primary">自有</el-tag>
-                <el-tag v-if="row.maStatus == 331" size="small" type="warning">待审批</el-tag>
-                <el-tag v-if="row.maStatus == 332" size="small" type="danger">上架驳回</el-tag>
+                <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
+                <el-tag v-if="row.maStatus == 1" size="small" type="warning">上架</el-tag>
+                <el-tag v-if="row.maStatus == 2" size="small" type="success">下架</el-tag>
+                <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag> 
             </template>
         </el-table-column>
         <el-table-column prop="name" label="操作" min-width="160px" align="center">
@@ -674,174 +660,136 @@
         :total="total" />
 
     <!-- 装备入驻弹框 -->
-    <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"
-            :model="equipmentDeploymentParams"
-            :rules="equipRules"
-            :disabled="disabledForm">
-            <el-form-item label="租赁范围" prop="leaseScope">
-                <el-select
-                    v-model="equipmentDeploymentParams.leaseScope"
-                    placeholder="选择租赁范围"
-                    clearable>
-                    <el-option label="全平台" value="329"></el-option>
-                    <el-option label="专区" value="330"></el-option>
-                </el-select>
-            </el-form-item>
+    <el-dialog v-model="dialogFormVisibleSettlein" :title="settleinTitle"
+        width="60%" align-center :close-on-click-modal="false" :before-close="handleClose">
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">基本信息</span>
+        </div> 
+        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams"
+            :rules="equipRules" :disabled="disabledForm"> 
 
+            <el-form-item label="装备名称：" prop="deviceName">
+                <el-input autocomplete="off" style="width: 850px" maxlength="30"
+                    v-model="equipmentDeploymentParams.deviceName" clearable />
+            </el-form-item>
             <el-row>
-                <el-form-item label="设备所在地" prop="provinceId">
-                    <el-select
-                        v-model="equipmentDeploymentParams.provinceId"
-                        placeholder="选择省"
-                        @change="changeProvince"
-                        clearable
-                        style="width: 220px">
-                        <el-option
-                            v-for="item in selProvinceList"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.code"></el-option>
-                    </el-select>
+                <el-form-item label="装备类目：" prop="deviceTypeList">
+                    <el-cascader
+                        v-model="equipmentDeploymentParams.deviceTypeList"
+                        :show-all-levels="false"
+                        :options="deviceTypeTree"
+                        :props="partTypeTreeProps"
+                        filterable clearable
+                        collapse-tags
+                        style="width: 350px"
+                        placeholder="请选择装备类目"
+                        ref="dialogTypeCascader" 
+                        @change="dialogTypeChange"
+                        ></el-cascader>
+                </el-form-item> 
+                <el-form-item label="设备数量：" prop="deviceCount">
+                    <el-input
+                        @input="(v)=>(equipmentDeploymentParams.deviceCount=v.replace(/[^\d.]/g,''))"
+                        v-model="equipmentDeploymentParams.deviceCount"
+                        placeholder="请输入设备数量"
+                        clearable maxlength="20" 
+                        style="width: 350px;" :disabled="countDisabled"
+                    />   
+                </el-form-item> 
+            </el-row>
+            <el-row>
+                <el-form-item label="装备单位：" prop="unitName">
+                    <el-input
+                        autocomplete="off"
+                        style="width: 350px"
+                        v-model="equipmentDeploymentParams.unitName"
+                        clearable />
                 </el-form-item>
-                <el-form-item label-width="8px" prop="cityId">
-                    <el-select
-                        v-model="equipmentDeploymentParams.cityId"
-                        placeholder="选择市"
-                        @change="changeMarket"
-                        clearable
-                        style="width: 220px">
-                        <el-option
-                            v-for="item in selMarketList"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.code"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label-width="8px" prop="areaId">
-                    <el-select
-                        v-model="equipmentDeploymentParams.areaId"
-                        placeholder="选择区"
-                        style="width: 220px"
-                        clearable
-                        @change="opeChangeArea">
-                        <el-option
-                            v-for="item in selAreaList"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.code"></el-option>
-                    </el-select>
+                <el-form-item label="装备品牌" prop="brand">
+                    <el-input
+                        v-model="equipmentDeploymentParams.brand"
+                        autocomplete="off"
+                        style="width: 350px"
+                        clearable />
                 </el-form-item>
             </el-row>
             <el-row>
-                <el-form-item label="设备类型" prop="companyId">
+                <el-form-item label="装备编号" prop="code">
+                    <el-input
+                        autocomplete="off"
+                        style="width: 350px"
+                        v-model="equipmentDeploymentParams.code"
+                        clearable />
+                </el-form-item>
+                <el-form-item label="所属公司：" prop="companyId">
                     <el-select
                         v-model="equipmentDeploymentParams.companyId"
-                        placeholder="选择设备类型"
-                        style="width: 220px"
-                        clearable
-                        @change="changeDeviceType">
+                        placeholder="请选择所属公司"
+                        clearable style="width: 350px">
                         <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-width="8px" prop="groupId">
-                    <el-select
-                        placeholder="选择组别"
-                        clearable
-                        @change="changeDeviceTypeSon"
-                        v-model="equipmentDeploymentParams.groupId"
-                        style="width: 220px">
-                        <el-option
-                            v-for="item in selDeviceTypeSonList"
-                            :key="item.typeId"
-                            :label="item.typeName"
-                            :value="item.typeId"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label-width="8px" prop="typeId">
-                    <el-select
-                        placeholder="选择产品名称"
-                        clearable
-                        @change="changeDeviceTypeSun"
-                        v-model="equipmentDeploymentParams.typeId"
-                        style="width: 220px">
-                        <el-option
-                            v-for="item in selDeviceTypeSunList"
-                            :key="item.typeId"
-                            :label="item.typeName"
-                            :value="item.typeId"></el-option>
+                            v-for="item in companyDataList"
+                            :key="item.companyId"
+                            :label="item.companyName"
+                            :value="item.companyId"
+                        />
                     </el-select>
                 </el-form-item>
             </el-row>
+            <el-row>
+                <el-form-item label="出厂日期：" prop="productionDate">
+                    <el-date-picker
+                        v-model="equipmentDeploymentParams.productionDate"
+                        placeholder="请选择出厂日期"
+                        value-format="yyyy-MM-dd"
+                        type="date"  style="width: 350px;">
+                    </el-date-picker>
+                </el-form-item> 
+                <el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
+                    <el-input
+                        @input="(v)=>(equipmentDeploymentParams.dayLeasePrice=v.replace(/[^\d.]/g,''))"
+                        v-model="equipmentDeploymentParams.dayLeasePrice"
+                        placeholder="请输入租赁价格"
+                        clearable maxlength="20" 
+                        style="width: 350px;"
+                    />   
+                </el-form-item> 
+            </el-row>
+            <el-row>
+                <el-form-item label="联系人：" prop="person">
+                    <el-input
+                        v-model="equipmentDeploymentParams.person"
+                        placeholder="请输入联系人"
+                        clearable maxlength="20" 
+                        style="width: 350px;"
+                    />   
+                </el-form-item> 
+                <el-form-item label="联系电话：" prop="personPhone">
+                    <el-input
+                        v-model="equipmentDeploymentParams.personPhone"
+                        placeholder="请输入联系电话"
+                        clearable maxlength="20" 
+                        style="width: 350px;"
+                    />   
+                </el-form-item>  
+            </el-row>
+            <el-row>
+                <el-form-item label="整机重量(KG)：" prop="deviceWeight">
+                    <el-input
+                        @input="(v)=>(equipmentDeploymentParams.deviceWeight=v.replace(/[^\d.]/g,''))"
+                        v-model="equipmentDeploymentParams.deviceWeight"
+                        placeholder="请输入整机重量"
+                        clearable maxlength="20" 
+                        style="width: 350px;"
+                    />   
+                </el-form-item>  
+            </el-row>
 
-            <el-form-item label="设备品牌" prop="brand">
-                <el-input
-                    autocomplete="off"
-                    style="width: 360px"
-                    v-model="equipmentDeploymentParams.brand"
-                    clearable />
-            </el-form-item>
-            <el-form-item label="设备型号" prop="modelName">
-                <el-input
-                    v-model="equipmentDeploymentParams.modelName"
-                    autocomplete="off"
-                    style="width: 360px"
-                    clearable />
-            </el-form-item>
-            <el-form-item label="出厂日期" prop="productionDate">
-                <el-date-picker
-                    v-model="equipmentDeploymentParams.productionDate"
-                    type="date"
-                    placeholder="选择出厂日期"
-                    style="width: 360px"
-                    clearable
-                    value-format="YYYY-MM-DD"
-                    format="YYYY-MM-DD" />
-            </el-form-item>
-            <el-form-item label="工作小时数" prop="workingHours">
-                <el-input
-                    v-model="equipmentDeploymentParams.workingHours"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable />
-                小时
-            </el-form-item>
-            <el-form-item label="整机序列号" prop="serialNumber">
-                <el-input
-                    v-model="equipmentDeploymentParams.serialNumber"
-                    autocomplete="off"
-                    style="width: 360px"
-                    clearable />
-            </el-form-item>
-            <el-form-item label="月租金" prop="monthLeasePrice">
-                <el-input
-                    v-model="equipmentDeploymentParams.monthLeasePrice"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable />
-                元/月
-            </el-form-item>
-            <el-form-item label="日租金" prop="dayLeasePrice">
-                <el-input
-                    v-model="equipmentDeploymentParams.dayLeasePrice"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable />
-                元/天
-            </el-form-item>
-            <el-form-item label="检测信息" prop="detectionList">
+           
+
+           
+            
+            <!-- <el-form-item label="检测信息" prop="detectionList">
                 <uploadComponent
                     v-if="!disabledForm || isEditDisabled"
                     :maxLimit="1"
@@ -888,44 +836,7 @@
                         查 看 附 件
                     </a>
                 </template>
-            </el-form-item>
-            <el-form-item label="是否提供机手" prop="isOperator">
-                <el-select
-                    placeholder="选择是否提供机手"
-                    style="width: 220px; margin: 0 5px"
-                    clearable
-                    v-model="equipmentDeploymentParams.isOperator">
-                    <el-option label="是" value="0"></el-option>
-                    <el-option label="否" value="1"></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-form-item label="机手月费用" prop="jsMonthPrice">
-                <el-input
-                    v-model="equipmentDeploymentParams.jsMonthPrice"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable />
-                元/月
-            </el-form-item>
-
-            <el-form-item label="机手日费用" prop="jsDayPrice">
-                <el-input
-                    v-model="equipmentDeploymentParams.jsDayPrice"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable />
-                元/天
-            </el-form-item>
-            <el-form-item label="详细说明">
-                <el-input
-                    v-model="equipmentDeploymentParams.description"
-                    autocomplete="off"
-                    style="width: 360px; margin-right: 5px"
-                    clearable
-                    type="textarea"
-                    :rows="5" />
-            </el-form-item>
+            </el-form-item> 
             <el-form-item label="设备图片" prop="picList">
                 <uploadComponent
                     v-if="!disabledForm && isEditDisabled"
@@ -956,17 +867,9 @@
                             fit="cover" />
                     </template>
                     <template v-else>暂无图片</template>
-                </template>
-                <!-- <el-image
-                    style="width: 120px; height: 120px; margin-right: 8px"
-                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-                    fit="cover" />
-                <el-image
-                    style="width: 120px; height: 120px; margin-right: 8px"
-                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-                    fit="cover" /> -->
-            </el-form-item>
-        </el-form>
+                </template> 
+            </el-form-item> -->
+        </el-form> 
         <template #footer>
             <span class="dialog-footer">
                 <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
@@ -978,8 +881,83 @@
     </el-dialog>
 </template>
 
-<style>
+<style lang="scss" scoped>
     .el-form {
         margin: 15px 0;
     }
+
+    .title{
+        margin: 10px;
+        margin-left: 20px;
+        display: flex;
+        align-items: center;
+    }
+    .title-sign{
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #409EFF;
+    }
+    .title-text{
+        font-weight: 700;
+        margin-left: 10px;
+    }
+
+    .uploadBox{
+        margin: 20px 40px;
+    }
+    .labelBox{
+        width: auto;
+        height: auto;
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+    .imgsBox{
+        width: auto;
+        height: auto;
+        display: flex;
+        align-items: center; 
+        margin-bottom: 30px;
+        margin-left: 20px;
+          
+        .imgItem{
+            width: 160px;
+            height: 160px;
+            margin-right: 40px; 
+            border: 1px dashed #bbb;
+            position: relative;
+            .picture-card{
+                width: 160px;
+                height: 160px;
+            }
+            .icon-list{
+                width: 60px;height: 20px;
+                position: absolute;
+                top: 70px;
+                left: 40px;
+                display: flex;
+                align-items: center;
+            }
+            .imgItem__icon{
+                margin: 0 5px;
+            }
+            .file-name{
+                font-size: 10px;
+            }
+        }
+        
+        .hide{
+            display: none;
+        } 
+        .imgItem:hover .hide{
+            display: block;
+        }
+        
+    }
+    .tipBox{
+        color: red;
+        font-size: 12px;
+        margin-left: 20px;
+    }
 </style>