首页以及个人中心页更新

.gitignore

@@ -28,3 +28,5 @@ components.d.ts
 *.sln
 *.sw?
 components.d.ts
+.prettierrc.js
+components.d.ts

components.d.ts

@@ -10,12 +10,16 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

src/App.vue

@@ -57,7 +57,7 @@ onMounted(() => {
           </span>
         </li>
         <li>
-          <span @click="$router.push({ name: 'myuser', query: { type: 'myuser' } })">
+          <span @click="$router.push({ name: 'myuser' })">
             个人中心
           </span>
         </li>
@@ -120,7 +120,7 @@ onMounted(() => {
 }
 
 .shop-header {
-  height: 157px;
+  // height: 157px;
   width: 100%;
   position: sticky;
   top: 0;

src/compontents/FormComponent/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+    interface Props {
+        formItemList?: []
+    }
+
+    defineProps<Props>()
+</script>
+
+<template>
+    <el-form :inline="true" label-width="auto" size="small">
+        <el-form-item v-for="item in formItemList" :key="item.v_label" :label="item.v_label">
+            <el-input
+                :placeholder="`请输入${item.v_label}`"
+                clearable
+                style="width: 120px"
+                v-if="item.v_typ === 'ipt'" />
+            <el-select
+                :placeholder="`请选择${item.v_label}`"
+                v-if="item.v_typ === 'sel'"
+                style="width: 120px"
+                clearable>
+                <el-option></el-option>
+            </el-select>
+        </el-form-item>
+        <slot></slot>
+    </el-form>
+</template>
+
+<style></style>

src/compontents/PagingComponent/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+    <!-- 分页 -->
+
+    <el-pagination current-page="1" page-size="20" :page-sizes="[100, 200, 300, 400]" small="small" background="background"
+        layout="total, sizes, prev, pager, next, jumper" :total="50" />
+</template>
+
+<style>
+.el-pagination {
+    margin-top: 15px;
+}
+</style>

src/compontents/TableComponent/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+    interface Props {
+        tableProps?: []
+        tableData?: []
+    }
+
+    const handleSelectionChange = (val: any) => {
+        const codeList = val.map((ele: any) => {
+            return ele.v_code
+        })
+        // console.log("code", codeList)
+
+        // 向父组件传递列表单行数据
+        emit('getRowId', codeList)
+    }
+
+    const emit = defineEmits(['getRowId'])
+
+    defineProps<Props>()
+</script>
+
+<template>
+    <!-- 表格组件 -->
+    <el-table
+        @selection-change="handleSelectionChange"
+        :data="tableData"
+        max-height="400"
+        style="width: 100%"
+        :header-cell-style="{
+            background: '#3E98FF',
+            color: '#fff'
+        }">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+            v-for="item in tableProps"
+            :key="item.v_label"
+            :prop="item.v_props"
+            :label="item.v_label"
+            :width="item.width"
+            align="center">
+            <template
+                #default="{ row }"
+                v-if="item.v_slot === 'operate' || item.v_slot === 'v_type'">
+                <slot :name="item.v_slot" :row="row"></slot>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<style></style>

src/views/user/goodsManagement/index.vue

@@ -1,76 +1,259 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-const queryParams = ref({})
+    import TableComponent from '@/compontents/TableComponent/index.vue'
+    import FormComponent from '@/compontents/FormComponent/index.vue'
+    import { ref } from 'vue'
 
-const tableData = [
-    {
-        date: '2016-05-02',
-        name: '123xxx',
-        address: '合肥市蜀山区',
-    },
-    {
-        date: '2016-05-02',
-        name: '123xxx',
-        address: '合肥市蜀山区',
-    },
-    {
-        date: '2016-05-04',
-        name: '123xxx',
-        address: '合肥市蜀山区',
-    },
-    {
-        date: '2016-05-01',
-        name: '123xxx',
-        address: '合肥市蜀山区',
-    },
-]
+    // 选择复选框时获取需要删除的数据源
+    const getRowId = (val: any) => {
+        console.log(val, '需要删除的数据源**')
+    }
+
+    // 编辑按钮
+    const editRowInfo = (row: any) => {
+        console.log(row, '编辑当前数据')
+    }
+    // 删除按钮
+    const deleteRowInfo = (row: any) => {
+        console.log(row, '删除当前数据')
+    }
+
+    // 装备入驻按钮
+    const equipmentDeployment = () => {
+        // 打开入驻弹框
+        dialogFormVisibleSettlein.value = true
+    }
+
+    const ruleFormRef = ref(null)
+
+    // 入驻框保存提交
+    const submitBtn = () => {
+        ruleFormRef.value.validate((valid: any) => {
+            console.log(valid)
+        })
+    }
+
+    const tableProps = ref([
+        { v_label: '编码', v_props: 'v_code', v_slot: '', width: '' },
+        { v_label: '租赁范围', v_props: 'v_lease_scope', v_slot: '', width: '' },
+        { v_label: '装备类型', v_props: 'v_equipment_type', v_slot: '', width: '' },
+        { v_label: '装备名称', v_props: 'v_equipment_name', v_slot: '', width: '' },
+        { v_label: '租金', v_props: 'v_rent', v_slot: '', width: '' },
+        { v_label: '状态', v_props: 'v_type', v_slot: 'v_type', width: '' },
+        { v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' }
+    ])
+
+    const tableData = [
+        {
+            v_code: '123456',
+            v_lease_scope: '2023/12/12',
+            v_equipment_type: '挖掘机',
+            v_equipment_name: '2023新版挖掘机',
+            v_rent: '123/月',
+            v_type: 1,
+            v_operate: ''
+        },
+        {
+            v_code: '123456',
+            v_lease_scope: '2023/12/12',
+            v_equipment_type: '挖掘机',
+            v_equipment_name: '2023新版挖掘机',
+            v_rent: '123/月',
+            v_type: 2,
+            v_operate: ''
+        },
+        {
+            v_code: '123456',
+            v_lease_scope: '2023/12/12',
+            v_equipment_type: '挖掘机',
+            v_equipment_name: '2023新版挖掘机',
+            v_rent: '123/月',
+            v_type: 3,
+            v_operate: ''
+        },
+        {
+            v_code: '123456',
+            v_lease_scope: '2023/12/12',
+            v_equipment_type: '挖掘机',
+            v_equipment_name: '2023新版挖掘机',
+            v_rent: '123/月',
+            v_type: 3,
+            v_operate: ''
+        },
+        {
+            v_code: '123456',
+            v_lease_scope: '2023/12/12',
+            v_equipment_type: '挖掘机',
+            v_equipment_name: '2023新版挖掘机',
+            v_rent: '123/月',
+            v_type: 3,
+            v_operate: ''
+        }
+    ]
+
+    // 表单 lable 数据
+    const formItemList = 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 = ref(false)
+
+    // 装备入驻框表单数据源
+    const ruleForm = ref({
+        v_name: 'Hello',
+        v_region: ''
+    })
+
+    const rules = ref({
+        v_name: [
+            {
+                required: true,
+                message: '必填项',
+                trigger: 'blur'
+            },
+            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
+        ],
+        v_region: [
+            {
+                required: true,
+                message: '必填项',
+                trigger: 'blur'
+            }
+        ]
+    })
 </script>
 
 <template>
-    <!-- 订单管理 -->
+    <!-- 商品管理 -->
 
-    <el-form :model="queryParams" :inline="true" label-width="auto" size="small">
-        <el-form-item label="编码：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="租赁范围：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="装备类型：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="装备名称：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="状态：" prop="menuName">
-            <el-input />
-        </el-form-item>
+    <FormComponent :formItemList="formItemList">
         <el-form-item>
-            <el-button type="primary">装备入驻</el-button>
+            <el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
         </el-form-item>
-    </el-form>
+    </FormComponent>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
-        <el-table-column align="center" prop="name" label="编码" />
-        <el-table-column align="center" prop="address" label="租赁范围" />
-        <el-table-column align="center" prop="date" label="装备类型" />
-        <el-table-column align="center" prop="name" label="装备名称" />
-        <el-table-column align="center" prop="name" label="租金" />
-        <el-table-column align="center" prop="name" label="状态" />
-        <el-table-column align="center" prop="name" label="操作" width="180">
-            <template #default="scope">
-                <el-button size="small" type="primary">编辑</el-button>
-                <el-button size="small" type="danger">删除</el-button>
-            </template>
-        </el-table-column>
-    </el-table>
+    <TableComponent :tableProps="tableProps" :tableData="tableData" @getRowId="getRowId">
+        <template v-slot:v_type="{ row }">
+            <el-tag v-if="row.v_type === 1" size="small" type="success">租赁中</el-tag>
+            <el-tag v-if="row.v_type === 2" size="small" type="warning">已上架</el-tag>
+            <el-tag v-if="row.v_type === 3" size="small" type="info">待上架</el-tag>
+        </template>
+        <template v-slot:operate="{ row }">
+            <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="deleteRowInfo(row)">删除</el-button>
+        </template>
+    </TableComponent>
+
+    <!-- 装备入驻弹框 -->
+    <el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
+        <el-form label-width="160" ref="ruleFormRef" :model="ruleForm" :rules="rules">
+            <el-form-item label="租赁范围" prop="v_name">
+                <el-input
+                    autocomplete="off"
+                    style="width: 360px"
+                    v-model="ruleForm.v_name"
+                    clearable />
+            </el-form-item>
+            <el-form-item label="设备所在地">
+                <el-select placeholder="选择省" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+                <el-select placeholder="选择市" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+                <el-select placeholder="选择区" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="设备类型">
+                <el-select placeholder="选择类别" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+                <el-select placeholder="选择组别" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+                <el-select placeholder="选择产品名称" style="width: 220px; margin: 0 5px" clearable>
+                    <el-option label="Zone No.1" value="shanghai" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="设备品牌" prop="v_region">
+                <el-input
+                    autocomplete="off"
+                    style="width: 360px"
+                    v-model="ruleForm.v_region"
+                    clearable />
+            </el-form-item>
+            <el-form-item label="设备型号">
+                <el-input autocomplete="off" style="width: 360px" clearable />
+            </el-form-item>
+            <el-form-item label="出厂日期">
+                <el-input autocomplete="off" style="width: 360px" clearable />
+            </el-form-item>
+            <el-form-item label="工作小时数">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                小时
+            </el-form-item>
+            <el-form-item label="整机序列号">
+                <el-input autocomplete="off" style="width: 360px" clearable />
+            </el-form-item>
+            <el-form-item label="月租金">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                元/月
+            </el-form-item>
+            <el-form-item label="日租金">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                元/天
+            </el-form-item>
+            <el-form-item label="检测信息">
+                <!-- <el-input autocomplete="off" /> -->
+                上传
+            </el-form-item>
+            <el-form-item label="保险信息">
+                <!-- <el-input autocomplete="off" /> -->
+                上传
+            </el-form-item>
+            <el-form-item label="是否提供机手">
+                <el-radio>是</el-radio>
+                <el-radio>否</el-radio>
+            </el-form-item>
+
+            <el-form-item label="机手月费用">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                元/月
+            </el-form-item>
+
+            <el-form-item label="机手日费用">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                元/天
+            </el-form-item>
+            <el-form-item label="详细说明">
+                <el-input autocomplete="off" style="width: 360px; margin-right: 5px" clearable />
+                元/天
+            </el-form-item>
+            <el-form-item label="设备图片">
+                <el-input autocomplete="off" clearable />
+                至少一张，最多八张
+                设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="dialogFormVisibleSettlein = false">
+                    关 闭
+                </el-button>
+                <el-button @click="submitBtn">保 存</el-button>
+            </span>
+        </template>
+    </el-dialog>
 </template>
 
 <style>
-.el-form {
-    margin: 15px 0;
-}
+    .el-form {
+        margin: 15px 0;
+    }
 </style>

src/views/user/goodsUpdown/index.vue

@@ -2,72 +2,134 @@
 import { ref } from 'vue'
 const queryParams = ref({})
 
+import TableComponent from '@/compontents/TableComponent/index.vue'
+import FormComponent from '@/compontents/FormComponent/index.vue'
+import PagingComponent from '../../../compontents/PagingComponent/index.vue'
+
+// 选择复选框时获取需要删除的数据源
+const getRowId = (val: any) => {
+    console.log(val, '需要删除的数据源**');
+}
+
+// 上架按钮
+const handleGrounding = () => {
+    console.log('上架设备');
+
+}
+
+// 下架按钮
+const handleOffshelf = () => {
+    console.log('下架设备');
+
+
+}
+// 编辑按钮
+const editRowInfo = (row: any) => {
+    console.log(row, '编辑当前数据');
+
+}
+// 删除按钮
+const deleteRowInfo = (row: any) => {
+    console.log(row, '删除当前数据');
+
+}
+
+const tableProps = ref([
+    { v_label: '编码', v_props: 'v_code', v_slot: '', width: '' },
+    { v_label: '租赁范围', v_props: 'v_lease_scope', v_slot: '', width: '' },
+    { v_label: '装备类型', v_props: 'v_equipment_type', v_slot: '', width: '' },
+    { v_label: '装备名称', v_props: 'v_equipment_name', v_slot: '', width: '' },
+    { v_label: '租金', v_props: 'v_rent', v_slot: '', width: '' },
+    { v_label: '状态', v_props: 'v_type', v_slot: 'v_type', width: '' },
+    { v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' },
+])
+
 const tableData = [
     {
-        date: '2016-05-02',
-        name: '123xxx',
-        address: '合肥市蜀山区',
+        v_code: '123456',
+        v_lease_scope: '2023/12/12',
+        v_equipment_type: '挖掘机',
+        v_equipment_name: '2023新版挖掘机',
+        v_rent: '123/月',
+        v_type: 1,
+        v_operate: ''
     },
     {
-        date: '2016-05-02',
-        name: '123xxx',
-        address: '合肥市蜀山区',
+        v_code: '123456',
+        v_lease_scope: '2023/12/12',
+        v_equipment_type: '挖掘机',
+        v_equipment_name: '2023新版挖掘机',
+        v_rent: '123/月',
+        v_type: 2,
+        v_operate: ''
     },
     {
-        date: '2016-05-04',
-        name: '123xxx',
-        address: '合肥市蜀山区',
+        v_code: '123456',
+        v_lease_scope: '2023/12/12',
+        v_equipment_type: '挖掘机',
+        v_equipment_name: '2023新版挖掘机',
+        v_rent: '123/月',
+        v_type: 3,
+        v_operate: ''
     },
     {
-        date: '2016-05-01',
-        name: '123xxx',
-        address: '合肥市蜀山区',
+        v_code: '123456',
+        v_lease_scope: '2023/12/12',
+        v_equipment_type: '挖掘机',
+        v_equipment_name: '2023新版挖掘机',
+        v_rent: '123/月',
+        v_type: 3,
+        v_operate: ''
     },
+    {
+        v_code: '123456',
+        v_lease_scope: '2023/12/12',
+        v_equipment_type: '挖掘机',
+        v_equipment_name: '2023新版挖掘机',
+        v_rent: '123/月',
+        v_type: 3,
+        v_operate: ''
+    },
+
 ]
+
+// 表单 lable 数据
+const formItemList = 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' },
+])
 </script>
 
 <template>
     <!-- 订单管理 -->
 
-    <el-form :model="queryParams" :inline="true" label-width="auto" size="small">
-        <el-form-item label="编码：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="租赁范围：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="装备类型：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="装备名称：" prop="menuName">
-            <el-input />
-        </el-form-item>
-        <el-form-item label="状态：" prop="menuName">
-            <el-input />
-        </el-form-item>
+    <FormComponent :formItemList="formItemList">
         <el-form-item>
-            <el-button type="primary">批量上架</el-button>
-            <el-button type="wanring">批量下架</el-button>
+            <el-button type="primary" @click="handleGrounding">批量上架</el-button>
+            <el-button type="wanring" @click="handleOffshelf">批量下架</el-button>
         </el-form-item>
-    </el-form>
+    </FormComponent>
 
     <!-- 表格 -->
-    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-        background: '#3E98FF', color: '#fff'
-    }">
-        <el-table-column align="center" prop="name" label="编码" />
-        <el-table-column align="center" prop="address" label="租赁范围" />
-        <el-table-column align="center" prop="date" label="装备类型" />
-        <el-table-column align="center" prop="name" label="装备名称" />
-        <el-table-column align="center" prop="name" label="租金" />
-        <el-table-column align="center" prop="name" label="状态" />
-        <el-table-column align="center" prop="name" label="操作" width="180">
-            <template #default="scope">
-                <el-button size="small" type="primary">编辑</el-button>
-                <el-button size="small" type="danger">删除</el-button>
-            </template>
-        </el-table-column>
-    </el-table>
+
+    <TableComponent :tableProps="tableProps" :tableData="tableData" @getRowId="getRowId">
+
+        <template v-slot:v_type="{ row }">
+            <el-tag v-if="row.v_type === 1" size="small" type="success">租赁中</el-tag>
+            <el-tag v-if="row.v_type === 2" size="small" type="warning">已上架</el-tag>
+            <el-tag v-if="row.v_type === 3" size="small" type="info">待上架</el-tag>
+        </template>
+        <template v-slot:operate="{ row }">
+            <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="deleteRowInfo(row)">删除</el-button>
+        </template>
+
+    </TableComponent>
+
+    <PagingComponent />
 </template>
 
 <style>

src/views/user/index.vue

@@ -84,7 +84,6 @@ const lesseeClick = () => {
     background-color: #fff;
     display: flex;
     justify-content: space-between;
-    padding: 10px 20px;
 
     .left-menu {
         width: 260px;