2023-12-01 11:22:09 +08:00
|
|
|
|
<script setup lang="ts">
|
2023-12-02 18:05:58 +08:00
|
|
|
|
import TableComponent from '@/compontents/TableComponent/index.vue'
|
|
|
|
|
|
import FormComponent from '@/compontents/FormComponent/index.vue'
|
2023-12-04 09:12:38 +08:00
|
|
|
|
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
2023-12-02 18:05:58 +08:00
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
2023-12-04 09:12:38 +08:00
|
|
|
|
const pageSize = 20
|
|
|
|
|
|
const pageNumber = 1
|
|
|
|
|
|
const total: any = 20
|
|
|
|
|
|
// 获取数据列表
|
|
|
|
|
|
const getList = () => {
|
|
|
|
|
|
console.log('获取数据列表***')
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-02 18:05:58 +08:00
|
|
|
|
// 选择复选框时获取需要删除的数据源
|
|
|
|
|
|
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'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
})
|
2023-12-01 11:22:09 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
2023-12-02 18:05:58 +08:00
|
|
|
|
<!-- 商品管理 -->
|
2023-12-01 11:22:09 +08:00
|
|
|
|
|
2023-12-02 18:05:58 +08:00
|
|
|
|
<FormComponent :formItemList="formItemList">
|
2023-12-01 11:22:09 +08:00
|
|
|
|
<el-form-item>
|
2023-12-02 18:05:58 +08:00
|
|
|
|
<el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
|
2023-12-01 11:22:09 +08:00
|
|
|
|
</el-form-item>
|
2023-12-02 18:05:58 +08:00
|
|
|
|
</FormComponent>
|
2023-12-01 11:22:09 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 表格 -->
|
2023-12-02 18:05:58 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2023-12-04 09:12:38 +08:00
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
|
<PagingComponent
|
|
|
|
|
|
@getList="getList"
|
|
|
|
|
|
:pageSize="pageSize"
|
|
|
|
|
|
:pageNumber="pageNumber"
|
|
|
|
|
|
:total="total" />
|
|
|
|
|
|
|
2023-12-02 18:05:58 +08:00
|
|
|
|
<!-- 装备入驻弹框 -->
|
|
|
|
|
|
<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>
|
2023-12-01 11:22:09 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
2023-12-02 18:05:58 +08:00
|
|
|
|
.el-form {
|
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
