Zlpt_Portal/src/views/user/goodsManagement/index.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 } 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 initData = ref(JSON.parse(JSON.stringify(equipmentDeploymentParams)))

    const pageSize = 20
    const pageNumber = 1
    const total: any = ref(0)

    const tableData: any = reactive({
        list: []
    })

    // 获取数据列表
    const getList = async () => {
        const res: any = await getEquipmentListApi({})
        console.log('获取数据列表***', res)
        total.value = res.total
        tableData.list = res.rows
    }

    getList()
    // 选择复选框时获取需要删除的数据源
    const getRowId = (val: any) => {
        console.log(val, '需要删除的数据源**')
    }

    // 编辑按钮
    const editRowInfo = (row: any) => {
        console.log(row, '编辑当前数据')

        equipmentDeploymentParams.value = row
        dialogFormVisibleSettlein.value = true
    }
    // 删除按钮
    const deleteRowInfo = (row: any) => {
        console.log(row, '删除当前数据')
    }

    // 装备入驻按钮
    const equipmentDeployment = () => {
        equipmentDeploymentParams.value = initData
        // 打开入驻弹框
        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)
        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' }
    ])

    // const tableData: any = [
    //     {
    //         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: 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.list" @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.location"
                    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.addressArea"
                    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 + ',' + item.name"></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>