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 { mainStore } from 'store/main'

    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 disabledForm = ref(false)

    /* 编辑 */
    const isEditDisabled = ref(false)

    // 省级下拉框选中时获取市级
    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 equipmentDeploymentParams: any = ref({
        /* 企业Id */
        ownCo: mainStore().userInfo.companyId,
        /* 租赁范围 */
        leaseScope: '',
        /* 设备所在地 */
        location: '',
        /* 省 */
        provinceId: '',
        /* 市 */
        cityId: '',
        /* 区 */
        areaId: '',
        /* 设备所在地 省 */
        addressEconomize: '',
        /* 设备所在地 市 */
        addressProvince: '',
        /* 设备所在地 区 */
        addressArea: '',
        /* 设备类型 */
        typeId: '',
        /* 设备类型大类 */
        deviceType: '',
        /* 设备类型子类 */
        deviceTypeSon: '',
        /* 设备类型小类*/
        deviceTypeSun: '',
        /* 设备品牌 */
        brand: '',
        /* 设备型号 */
        modelName: '',
        /* 出场日期 */
        productionDate: '',
        /* 工作小时数 */
        workingHours: '',
        /* 整机序列号 */
        serialNumber: '',
        /* 月租金 */
        monthLeasePrice: '',
        /* 日租金 */
        dayLeasePrice: '',
        /* 是否提供机手 */
        isOperator: '',
        /* 机手月费用 */
        jsMonthPrice: '',
        /* 机手日费用 */
        jsDayPrice: '',
        /* 详细说明 */
        description: '',
        /* 设备主图片 */
        picUrl: '',
        /* 检测信息 ，保险信息*/
        fileList: [],
        /* 设备状态 */
        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) => {
        getRowList(row)
        isEditDisabled.value = true
        disabledForm.value = false
    }
    // 删除按钮
    const deleteRowInfo = async (row: any) => {
        const res: any = await deleteGoodstApi([row.maId])
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getList()
        }
    }

    /* 查看按钮 */
    const previewRowInfo = (row: any) => {
        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)
            }
        })
        getRowList(row)
        disabledForm.value = true
        isEditDisabled.value = false
    }

    const getRowList = (row: any) => {
        equipmentDeploymentParams.value = row
        equipmentDeploymentParams.value.cityId = equipmentDeploymentParams.value.cityId + ''
        equipmentDeploymentParams.value.areaId = equipmentDeploymentParams.value.areaId + ''
        equipmentDeploymentParams.value.provinceId = equipmentDeploymentParams.value.provinceId + ''
        equipmentDeploymentParams.value.leaseScope = equipmentDeploymentParams.value.leaseScope + ''

        equipmentDeploymentParams.value.companyId = equipmentDeploymentParams.value.companyId * 1
        equipmentDeploymentParams.value.groupId = equipmentDeploymentParams.value.groupId * 1
        equipmentDeploymentParams.value.typeId = equipmentDeploymentParams.value.typeId * 1

        dialogFormVisibleSettlein.value = true
        store.getprovinceList()
        store.getmarketList(row.provinceId)
        store.getareaList(row.cityId)

        store.getDeviceTypeList()
        store.getDeviceTypeSonList(row.companyId)
        store.getDeviceTypeSunList(row.groupId)
    }

    // 装备入驻按钮
    const equipmentDeployment = () => {
        isEditDisabled.value = true
        equipmentDeploymentParams.value = {
            /* 企业Id */
            ownCo: mainStore().userInfo.companyId,
            /* 租赁范围 */
            leaseScope: '',
            /* 设备所在地 */
            location: '',
            /* 省 */
            provinceId: '',
            /* 市 */
            cityId: '',
            /* 区 */
            areaId: '',
            /* 设备所在地 省 */
            addressEconomize: '',
            /* 设备所在地 市 */
            addressProvince: '',
            /* 设备所在地 区 */
            addressArea: '',
            /* 设备类型 */
            typeId: '',
            /* 设备类型大类 */
            deviceType: '',
            /* 设备类型子类 */
            deviceTypeSon: '',
            /* 设备类型小类*/
            deviceTypeSun: '',
            /* 设备品牌 */
            brand: '',
            /* 设备型号 */
            modelName: '',
            /* 出场日期 */
            productionDate: '',
            /* 工作小时数 */
            workingHours: '',
            /* 整机序列号 */
            serialNumber: '',
            /* 月租金 */
            monthLeasePrice: '',
            /* 日租金 */
            dayLeasePrice: '',
            /* 是否提供机手 */
            isOperator: '',
            /* 机手月费用 */
            jsMonthPrice: '',
            /* 机手日费用 */
            jsDayPrice: '',
            /* 详细说明 */
            description: '',
            /* 设备主图片 */
            picUrl: '',
            /* 检测信息 ，保险信息*/
            fileList: [],
            /* 设备状态 */
            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'
            }
        ]
    })

    /* 检测信息图片地址 */
    const successResultCallBackFnjc = (val: any) => {
        equipmentDeploymentParams.value.fileList.push({
            dicId: '28',
            fileUrl: val.msg
        })
    }
    /* 保险信息图片地址 */
    const successResultCallBackFnbs = (val: any) => {
        equipmentDeploymentParams.value.fileList.push({
            dicId: '29',
            fileUrl: val.msg
        })
    }
    /* 设备图片信息地址 */
    const successResultCallBackFnDevicePic = (val: any) => {
        if (!equipmentDeploymentParams.value.picUrl) {
            equipmentDeploymentParams.value.picUrl = val.msg
        }
        equipmentDeploymentParams.value.fileList.push({
            dicId: '20',
            fileUrl: val.msg
        })
    }
</script>

<template>
    <!-- 商品管理 -->
    <FormComponent :formItemList="formItemList">
        <el-form-item>
            <el-button type="primary" @click="equipmentDeployment">装备入驻</el-button>
        </el-form-item>
    </FormComponent>

    <!-- 表格 -->

    <!-- 表格 -->
    <el-table
        :data="tableData"
        style="width: 100%"
        show-overflow-tooltip
        :header-cell-style="{
            background: '#3E98FF',
            color: '#fff'
        }">
        <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-column>
        <el-table-column align="center" prop="typeName" label="装备类型" />
        <el-table-column align="center" prop="deviceName" label="装备名称" />
        <el-table-column align="center" label="租金">
            <template #default="{ row }">
                <el-tag size="small">{{ row.monthLeasePrice + '/月' }}</el-tag>
                <el-tag size="small">{{ row.dayLeasePrice + '/天' }}</el-tag>
            </template>
        </el-table-column>
        <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>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="200px" align="center">
            <template #default="{ row }">
                <!-- <el-button
                    v-if="row.maStatus == 15 || row.maStatus == 1"
                    size="small"
                    type="primary"
                    @click="editRowInfo(row)">
                    编辑
                </el-button> -->
                <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
                <el-button
                    v-if="row.maStatus == 15 || row.maStatus == 1"
                    size="small"
                    type="danger"
                    @click="deleteRowInfo(row)">
                    删除
                </el-button>
                <el-button size="small" type="primary" @click="previewRowInfo(row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <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"
            :disabled="disabledForm">
            <el-form-item label="租赁范围" prop="easeScope">
                <el-select
                    v-model="equipmentDeploymentParams.leaseScope"
                    placeholder="选择租赁范围"
                    style="width: 220px; margin: 0 5px"
                    clearable>
                    <el-option label="全平台" value="329"></el-option>
                    <el-option label="专区" value="330"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设备所在地">
                <el-select
                    v-model="equipmentDeploymentParams.provinceId"
                    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 + ''"></el-option>
                </el-select>
                <el-select
                    v-model="equipmentDeploymentParams.cityId"
                    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 + ''"></el-option>
                </el-select>
                <el-select
                    v-model="equipmentDeploymentParams.areaId"
                    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.companyId"
                    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"></el-option>
                </el-select>
                <el-select
                    placeholder="选择组别"
                    style="width: 220px; margin: 0 5px"
                    clearable
                    @change="changeDeviceTypeSon"
                    v-model="equipmentDeploymentParams.groupId">
                    <el-option
                        v-for="item in selDeviceTypeSonList"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="item.typeId"></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-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="工作小时数">
                <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
                    v-if="!disabledForm || isEditDisabled"
                    :maxLimit="1"
                    listType="text"
                    :acceptTypeList="['.pdf']"
                    width="120px"
                    height="120px"
                    :autoUpload="true"
                    :successResultCallBack="successResultCallBackFnjc">
                    <template v-slot:default>
                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>

                <template v-else>
                    <a
                        style="color: rgb(97, 226, 153); cursor: pointer"
                        target="_blank"
                        :href="equipmentDeploymentParams.jcUrl">
                        查 看 附 件
                    </a>
                </template>
            </el-form-item>
            <el-form-item label="保险信息">
                <uploadComponent
                    v-if="!disabledForm || isEditDisabled"
                    :maxLimit="1"
                    listType="text"
                    :acceptTypeList="['.pdf']"
                    width="120px"
                    height="120px"
                    :autoUpload="true"
                    :successResultCallBack="successResultCallBackFnbs">
                    <template v-slot:default>
                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>

                <template v-else>
                    <a
                        style="color: rgb(97, 226, 153); cursor: pointer"
                        target="_blank"
                        :href="equipmentDeploymentParams.bsUrl">
                        查 看 附 件
                    </a>
                </template>
            </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
                    v-if="!disabledForm && isEditDisabled"
                    :maxLimit="8"
                    listType="picture-card"
                    :acceptTypeList="['.jpg', '.jpeg', '.png']"
                    width="120px"
                    height="120px"
                    :successResultCallBack="successResultCallBackFnDevicePic"
                    :autoUpload="true"
                    :multiple="true">
                    <template v-slot:default>
                        <el-icon size="48" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>
                <span v-if="!disabledForm">
                    至少一张，最多八张
                    设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
                </span>

                <template v-if="disabledForm && !isEditDisabled">
                    <el-image
                        v-for="item in equipmentDeploymentParams.devPicList"
                        :key="item"
                        style="width: 120px; height: 120px; margin-right: 8px"
                        :src="item"
                        fit="cover" />
                </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 #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>