599 lines
21 KiB
Vue
599 lines
21 KiB
Vue
<script setup lang="ts">
|
||
import TableComponent from 'components/TableComponent/index.vue'
|
||
import FormComponent from 'components/FormComponent/index.vue'
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import uploadComponent from 'components/uploadComponent/index.vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
import { ref } from 'vue'
|
||
|
||
import { useStore } from 'store/user'
|
||
const store = useStore()
|
||
|
||
import {
|
||
equipmentDeploymentApi,
|
||
getEquipmentListApi,
|
||
deleteGoodstApi
|
||
} from 'http/api/usercenter/goodsmang'
|
||
|
||
// 注册地址拼装
|
||
const AssemblyRegisterAddress: any = reactive([])
|
||
const deviceType: any = reactive([])
|
||
|
||
onMounted(() => {
|
||
// 获取省级数据
|
||
store.getprovinceList()
|
||
// 获取设备类型
|
||
store.getDeviceTypeList()
|
||
})
|
||
|
||
// 省级数据源
|
||
const selProvinceList: any = computed(() => {
|
||
return store.provinceList
|
||
})
|
||
|
||
// 获取市级数据源
|
||
const selMarketList: any = computed(() => {
|
||
return store.marketList
|
||
})
|
||
|
||
// 获取区级数据源
|
||
const selAreaList: any = computed(() => {
|
||
return store.areaList
|
||
})
|
||
|
||
// 设备类型大类
|
||
const selDeviceTypeList: any = computed(() => {
|
||
return store.deviceTypeList
|
||
})
|
||
|
||
// 设备类型子类
|
||
const selDeviceTypeSonList: any = computed(() => {
|
||
return store.deviceTypeSonList
|
||
})
|
||
|
||
// 设备类型小类
|
||
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.split(',')[0])
|
||
deviceType[0] = val.split(',')[1]
|
||
}
|
||
// 设备类型子类
|
||
const changeDeviceTypeSon = (val: any) => {
|
||
store.getDeviceTypeSunList(val.split(',')[0])
|
||
deviceType[1] = val.split(',')[1]
|
||
}
|
||
// 设备类型小类
|
||
const changeDeviceTypeSun = (val: any) => {
|
||
deviceType[2] = val.split(',')[1]
|
||
}
|
||
|
||
/*
|
||
* 商品入驻弹框参数
|
||
*/
|
||
const equipmentDeploymentParams: any = ref({
|
||
/* 租赁范围 */
|
||
leaseScope: '',
|
||
/* 设备所在地 */
|
||
location: '',
|
||
/* 设备所在地 省 */
|
||
addressEconomize: '',
|
||
/* 设备所在地 市 */
|
||
addressProvince: '',
|
||
/* 设备所在地 区 */
|
||
addressArea: '',
|
||
/* 设备类型 */
|
||
typeId: '',
|
||
/* 设备类型大类 */
|
||
deviceType: '',
|
||
/* 设备类型子类 */
|
||
deviceTypeSon: '',
|
||
/* 设备类型小类*/
|
||
deviceTypeSun: '',
|
||
/* 设备品牌 */
|
||
brand: '',
|
||
/* 设备型号 */
|
||
modelName: '',
|
||
/* 出场日期 */
|
||
productionDate: '',
|
||
/* 工作小时数 */
|
||
workingHours: '',
|
||
/* 整机序列号 */
|
||
serialNumber: '',
|
||
/* 月租金 */
|
||
monthLeasePrice: '',
|
||
/* 日租金 */
|
||
dayLeasePrice: '',
|
||
/* 是否提供机手 */
|
||
isOperator: '',
|
||
/* 机手月费用 */
|
||
jsMonthPrice: '',
|
||
/* 机手日费用 */
|
||
jsDayPrice: '',
|
||
/* 详细说明 */
|
||
description: '',
|
||
/* 设备图片 */
|
||
picUrl: '',
|
||
/* 检测信息 ，保险信息*/
|
||
fileList: [
|
||
/* 检测信息 */
|
||
{
|
||
id: '28',
|
||
url: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
|
||
},
|
||
/* 保险信息 */
|
||
{
|
||
id: '29',
|
||
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
|
||
},
|
||
/* 设备图片 */
|
||
{
|
||
id: '20',
|
||
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
|
||
}
|
||
],
|
||
/* 设备状态 */
|
||
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)
|
||
|
||
total.value = res.total
|
||
tableData.value = res.rows.filter((item: any) => item !== null)
|
||
}
|
||
|
||
getList()
|
||
// 选择复选框时获取需要删除的数据源
|
||
const getRowId = (val: any) => {
|
||
console.log(val, '需要删除的数据源**')
|
||
}
|
||
|
||
// 编辑按钮
|
||
const editRowInfo = (row: any) => {
|
||
console.log(row, '编辑当前数据')
|
||
|
||
equipmentDeploymentParams.value = row
|
||
dialogFormVisibleSettlein.value = true
|
||
}
|
||
// 删除按钮
|
||
const deleteRowInfo = async (row: any) => {
|
||
const res: any = await deleteGoodstApi([row.maId])
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '删除成功'
|
||
})
|
||
getList()
|
||
}
|
||
}
|
||
|
||
// 装备入驻按钮
|
||
const equipmentDeployment = () => {
|
||
equipmentDeploymentParams.value = {
|
||
/* 租赁范围 */
|
||
leaseScope: '',
|
||
/* 设备所在地 */
|
||
location: '',
|
||
/* 设备所在地 省 */
|
||
addressEconomize: '',
|
||
/* 设备所在地 市 */
|
||
addressProvince: '',
|
||
/* 设备所在地 区 */
|
||
addressArea: '',
|
||
/* 设备类型 */
|
||
typeId: '',
|
||
/* 设备类型大类 */
|
||
deviceType: '',
|
||
/* 设备类型子类 */
|
||
deviceTypeSon: '',
|
||
/* 设备类型小类*/
|
||
deviceTypeSun: '',
|
||
/* 设备品牌 */
|
||
brand: '',
|
||
/* 设备型号 */
|
||
modelName: '',
|
||
/* 出场日期 */
|
||
productionDate: '',
|
||
/* 工作小时数 */
|
||
workingHours: '',
|
||
/* 整机序列号 */
|
||
serialNumber: '',
|
||
/* 月租金 */
|
||
monthLeasePrice: '',
|
||
/* 日租金 */
|
||
dayLeasePrice: '',
|
||
/* 是否提供机手 */
|
||
isOperator: '',
|
||
/* 机手月费用 */
|
||
jsMonthPrice: '',
|
||
/* 机手日费用 */
|
||
jsDayPrice: '',
|
||
/* 详细说明 */
|
||
description: '',
|
||
/* 设备图片 */
|
||
picUrl: '',
|
||
/* 检测信息 ，保险信息*/
|
||
fileList: [
|
||
/* 检测信息 */
|
||
{
|
||
id: '28',
|
||
url: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
|
||
},
|
||
/* 保险信息 */
|
||
{
|
||
id: '29',
|
||
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
|
||
},
|
||
/* 设备图片 */
|
||
{
|
||
id: '20',
|
||
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/DemoData/10/655f1724956e0b38bf6adb6087123f7e_b.jpg'
|
||
}
|
||
],
|
||
/* 设备状态 */
|
||
maStatus: 15
|
||
}
|
||
// 打开入驻弹框
|
||
dialogFormVisibleSettlein.value = true
|
||
}
|
||
|
||
const ruleFormRef = ref()
|
||
|
||
// 入驻框保存提交
|
||
const submitBtn = async () => {
|
||
console.log(AssemblyRegisterAddress, '地址***---***')
|
||
// equipmentDeploymentParams.value.location = AssemblyRegisterAddress.join(',')
|
||
// equipmentDeploymentParams.typeId = deviceType.join(',')
|
||
const res: any = await equipmentDeploymentApi(equipmentDeploymentParams.value)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '入驻成功'
|
||
})
|
||
|
||
dialogFormVisibleSettlein.value = false
|
||
getList()
|
||
}
|
||
|
||
/* ruleFormRef.value.validate((valid: any) => {
|
||
console.log(valid)
|
||
}) */
|
||
}
|
||
|
||
const tableProps: any = ref([
|
||
{ v_label: '编码', v_props: 'code', v_slot: '', width: '' },
|
||
{ v_label: '租赁范围', v_props: 'leaseScope', v_slot: '', width: '' },
|
||
{ v_label: '装备类型', v_props: 'modelName', v_slot: '', width: '' },
|
||
{ v_label: '装备名称', v_props: 'v_equipment_name', v_slot: '', width: '' },
|
||
{ v_label: '租金', v_props: 'monthLeasePrice', v_slot: '', width: '' },
|
||
{ v_label: '状态', v_props: 'maStatus', v_slot: 'v_type', width: '' },
|
||
{ v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '140px' }
|
||
])
|
||
|
||
// 表单 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)
|
||
|
||
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>
|
||
<!-- 商品管理 -->
|
||
<FormComponent :formItemList="formItemList">
|
||
<el-form-item>
|
||
<el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
|
||
</el-form-item>
|
||
</FormComponent>
|
||
|
||
<!-- 表格 -->
|
||
<TableComponent :tableProps="tableProps" :tableData="tableData" @getRowId="getRowId">
|
||
<template v-slot:v_type="{ 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>
|
||
</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
|
||
@getList="getList"
|
||
:pageSize="pageSize"
|
||
:pageNumber="pageNumber"
|
||
:total="total" />
|
||
|
||
<!-- 装备入驻弹框 -->
|
||
<el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
|
||
<el-form
|
||
label-width="160"
|
||
ref="ruleFormRef"
|
||
:model="equipmentDeploymentParams"
|
||
:rules="rules">
|
||
<el-form-item label="租赁范围" prop="easeScope">
|
||
<el-input
|
||
autocomplete="off"
|
||
style="width: 360px"
|
||
v-model="equipmentDeploymentParams.leaseScope"
|
||
clearable />
|
||
</el-form-item>
|
||
<el-form-item label="设备所在地">
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.addressEconomize"
|
||
placeholder="选择省"
|
||
style="width: 220px; margin: 0 5px"
|
||
@change="changeProvince"
|
||
clearable>
|
||
<el-option
|
||
v-for="item in selProvinceList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.code + ',' + item.name"></el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.addressProvince"
|
||
placeholder="选择市"
|
||
style="width: 220px; margin: 0 5px"
|
||
@change="changeMarket"
|
||
clearable>
|
||
<el-option
|
||
v-for="item in selMarketList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.code + ',' + item.name"></el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.location"
|
||
placeholder="选择区"
|
||
style="width: 220px; margin: 0 5px"
|
||
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>
|
||
<el-form-item label="设备类型">
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.deviceType"
|
||
placeholder="选择设备类型"
|
||
style="width: 220px; margin: 0 5px"
|
||
clearable
|
||
@change="changeDeviceType">
|
||
<el-option
|
||
v-for="item in selDeviceTypeList"
|
||
:key="item.typeId"
|
||
:label="item.typeName"
|
||
:value="item.typeId + ',' + item.typeName"></el-option>
|
||
</el-select>
|
||
<el-select
|
||
placeholder="选择组别"
|
||
style="width: 220px; margin: 0 5px"
|
||
clearable
|
||
@change="changeDeviceTypeSon"
|
||
v-model="equipmentDeploymentParams.deviceTypeSon">
|
||
<el-option
|
||
v-for="item in selDeviceTypeSonList"
|
||
:key="item.typeId"
|
||
:label="item.typeName"
|
||
:value="item.typeId + ',' + item.typeName"></el-option>
|
||
</el-select>
|
||
<el-select
|
||
placeholder="选择产品名称"
|
||
style="width: 220px; margin: 0 5px"
|
||
clearable
|
||
@change="changeDeviceTypeSun"
|
||
v-model="equipmentDeploymentParams.typeId">
|
||
<el-option
|
||
v-for="item in selDeviceTypeSunList"
|
||
:key="item.typeId"
|
||
:label="item.typeName"
|
||
:value="item.typeId"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<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="设备型号">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.modelName"
|
||
autocomplete="off"
|
||
style="width: 360px"
|
||
clearable />
|
||
</el-form-item>
|
||
<el-form-item label="出厂日期">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.productionDate"
|
||
autocomplete="off"
|
||
style="width: 360px"
|
||
clearable />
|
||
</el-form-item>
|
||
<el-form-item label="工作小时数">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.workingHours"
|
||
autocomplete="off"
|
||
style="width: 360px; margin-right: 5px"
|
||
clearable />
|
||
小时
|
||
</el-form-item>
|
||
<el-form-item label="整机序列号">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.serialNumber"
|
||
autocomplete="off"
|
||
style="width: 360px"
|
||
clearable />
|
||
</el-form-item>
|
||
<el-form-item label="月租金">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.monthLeasePrice"
|
||
autocomplete="off"
|
||
style="width: 360px; margin-right: 5px"
|
||
clearable />
|
||
元/月
|
||
</el-form-item>
|
||
<el-form-item label="日租金">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.dayLeasePrice"
|
||
autocomplete="off"
|
||
style="width: 360px; margin-right: 5px"
|
||
clearable />
|
||
元/天
|
||
</el-form-item>
|
||
<el-form-item label="检测信息">
|
||
<uploadComponent
|
||
:maxLimit="3"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px">
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
</el-form-item>
|
||
<el-form-item label="保险信息">
|
||
<uploadComponent
|
||
:maxLimit="3"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px">
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
</el-form-item>
|
||
<el-form-item label="是否提供机手">
|
||
<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="机手月费用">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.jsMonthPrice"
|
||
autocomplete="off"
|
||
style="width: 360px; margin-right: 5px"
|
||
clearable />
|
||
元/月
|
||
</el-form-item>
|
||
|
||
<el-form-item label="机手日费用">
|
||
<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 label="设备图片">
|
||
<uploadComponent
|
||
:maxLimit="3"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px">
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
至少一张，最多八张
|
||
设备图片格式为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;
|
||
}
|
||
</style>
|