bonus-ui/src/views/EquipmentLedger/components/equ-store.vue

<template>
    <!-- 装备出库页面 -->
    <div class="app-container">
        <div class="page-header">
            <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
            <span class="page-title">装备入库</span>
        </div>

        <el-form ref="outFormRef" :model="outForm" :rules="outFormRules" label-width="auto" size="small">
            <el-row :gutter="20" type="flex">
                <el-col>
                    <el-form-item label="变更状态为" prop="status">
                        <el-radio-group v-model="outForm.status">
                            <el-radio label="1">在库</el-radio>
                            <el-radio label="5">维修</el-radio>
                        </el-radio-group>

                        <el-button size="mini" style="margin-left: 80px" type="primary" @click="onHandleSubmit">
                            确定变更
                        </el-button>
                        <el-button size="mini" plain>取消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" type="flex">
                <el-col :span="6">
                    <el-form-item label="使用项目：" prop="proCode">
                        <el-select
                            clearable
                            style="width: 100%"
                            placeholder="请选择使用项目"
                            v-model="outForm.proCode"
                            @change="onChangeProCode"
                        >
                            <el-option
                                :key="item.proCode"
                                :label="item.proName"
                                :value="item.proCode"
                                v-for="item in useProjectList"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目类型：" prop="proType">
                        <el-input style="width: 100%" disabled v-model="proTypeName" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="电压等级：" prop="voltageLevel">
                        <el-input style="width: 100%" disabled v-model="voltageLevel" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目所在省：" prop="proProvince">
                        <el-input style="width: 100%" disabled v-model="outForm.proProvince" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" type="flex">
                <el-col :span="6">
                    <el-form-item label="项目所在市：" prop="proCity">
                        <el-input style="width: 100%" disabled v-model="outForm.proCity" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目所在区/县：" prop="proCounty">
                        <el-input style="width: 100%" disabled v-model="outForm.proCounty" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="详细地址：" prop="proLocation">
                        <el-input v-model="outForm.proLocation" placeholder="请输入详细地址" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 10px">
                <el-button size="mini" type="primary" @click="onHandleAddEquipment">添加变更装备</el-button>
            </el-row>
        </el-form>

        <el-table :data="selectedEquipment" border>
            <el-table-column label="序号" type="index" align="center" width="55" />
            <el-table-column prop="devName" label="装备名称" align="center" />
            <el-table-column prop="devModel" label="规格型号" align="center" />
            <el-table-column prop="devCode" label="装备编码" align="center" />
            <el-table-column label="使用日期" align="center">
                <template slot-scope="{ row }">
                    <el-date-picker
                        type="date"
                        v-model="row.useTime"
                        placeholder="选择使用日期"
                        value-format="yyyy-MM-dd"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="equipmentCode" label="操作" align="center" />
        </el-table>

        <el-dialog title="添加变更装备" :visible.sync="addEquipmentVisible" width="90%">
            <el-form :inline="true" label-width="auto">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="装备名称" prop="devName">
                            <el-input
                                clearable
                                style="width: 100%"
                                placeholder="请输入装备名称"
                                v-model="addEquipmentQueryParams.devName"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="onHandleAddEquipmentQuery">查询</el-button>
                            <el-button size="mini" plain @click="onHandleAddEquipmentReset">重置</el-button>
                            <el-button size="mini" type="primary" @click="onHandleAddEquipmentConfirm">
                                确定添加
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="addEquipmentList" border @selection-change="handleSelectionAddEquipment">
                <el-table-column label="序号" type="index" align="center" width="55" />
                <el-table-column width="55" align="center" type="selection" />
                <el-table-column width="160" show-overflow-tooltip prop="compName" label="公司名称" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="devName" label="装备名称" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="devModel" label="装备型号" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="devCode" label="装备编号" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="unit" label="计数单位" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="compName" label="产权单位" align="center" />
                <el-table-column
                    width="160"
                    show-overflow-tooltip
                    prop="buyPrice"
                    label="资产原值(元)"
                    align="center"
                />
                <el-table-column width="160" show-overflow-tooltip prop="productDate" label="出厂日期" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="buyPrice" label="使用年限" align="center" />
                <el-table-column width="160" show-overflow-tooltip prop="proName" label="所在项目" align="center" />
                <el-table-column
                    width="160"
                    show-overflow-tooltip
                    prop="nextDate"
                    label="下次检验日期"
                    align="center"
                />
                <el-table-column width="160" show-overflow-tooltip prop="nextDate" label="生产厂商" align="center" />
                <template v-for="item in tableColumns">
                    <!-- 特征项列 -->
                    <el-table-column
                        :key="`item-${item}`"
                        align="center"
                        show-overflow-tooltip
                        :label="`特征项${item}`"
                    >
                        <template slot-scope="{ row }">
                            <span v-if="row.propertyVoList && row.propertyVoList.length > 0">
                                <span v-if="item - 1 < row.propertyVoList.length">
                                    {{ row.propertyVoList[item - 1].propertyName || '-' }}
                                </span>
                            </span>

                            <span v-else> - </span>
                        </template>
                    </el-table-column>
                    <!-- 特征值列 -->
                    <el-table-column
                        :key="`value-${item}`"
                        align="center"
                        show-overflow-tooltip
                        :label="`特征值${item}`"
                    >
                        <template slot-scope="{ row }">
                            <span v-if="row.propertyVoList && row.propertyVoList.length > 0">
                                <span v-if="item - 1 < row.propertyVoList.length">
                                    {{ row.propertyVoList[item - 1].propertyValue || '-' }}
                                </span>
                            </span>

                            <span v-else> - </span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>

            <pagination
                :total="addEquipmentTotal"
                @pagination="getSelectEquipmentList"
                :page.sync="addEquipmentQueryParams.pageNum"
                :limit.sync="addEquipmentQueryParams.pageSize"
            />
        </el-dialog>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import {
    getSelectEquipmentListAPI,
    getMaxFeatureAPI,
    getUseProjectListAPI,
    getVoltageListAPI,
    addProjectOutAPI,
} from '@/api/EquipmentLedger/equ-out'

import { addProjectStoreAPI } from '@/api/EquipmentLedger/equ-store.js'
export default {
    data() {
        return {
            addEquipmentVisible: false,

            // 出库表单
            outForm: {
                type: 1, // 入库
                status: '', // 变更状态
                proCode: '', // 使用项目id
                proName: '', // 使用项目名称
                proType: '', // 项目类型
                voltageLevel: '', // 电压等级
                proProvince: '', // 项目所在省
                proCity: '', // 项目所在市
                proCounty: '', // 项目所在区/县
                proLocation: '', // 详细地址
            },
            // 出库表单规则
            outFormRules: {
                status: [{ required: true, message: '请选择变更状态', trigger: 'change' }],
                proCode: [{ required: true, message: '请选择使用项目', trigger: 'change' }],
                proType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
                voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
                proProvince: [{ required: true, message: '请选择项目所在省', trigger: 'change' }],
                proCity: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
                proCounty: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
                proLocation: [{ required: true, message: '请选择详细地址', trigger: 'change' }],
            },
            equipmentList: [],

            provinceList: [],
            cityList: [],
            countyList: [],
            selectedEquipment: [],

            // 可选择的变更设备查询条件
            addEquipmentQueryParams: {
                pageNum: 1,
                pageSize: 10,
                devName: '',
                status: '2',
                companyId: '',
                proId: '',
                // equipmentName: '',
                // equipmentStatus: '',
            },
            // 可选择的变更设备列表
            addEquipmentList: [],
            tableColumns: 0,
            addEquipmentTotal: 0,
            useProjectList: [], // 使用项目下拉选
            voltageList: [], // 电压等级下拉选
            proTypeName: '', // 项目类型名称
            voltageLevel: '',
        }
    },
    created() {
        // this.provinceList = pca
        // this.cityList = pcas
        // this.countyList = pcas

        this.getUseProjectList()
        this.provinceList = regionData
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.go(-1)
        },

        // 获取可选择的变更设备列表
        getSelectEquipmentList() {
            getSelectEquipmentListAPI(this.addEquipmentQueryParams).then((res) => {
                this.addEquipmentList = res.rows
                this.addEquipmentTotal = res.total
                this.getMaxFeature()
            })
        },

        // 获取列表表头特征值数量
        async getMaxFeature() {
            const res = await getMaxFeatureAPI()
            console.log(res, '列表表头特征值数量')
            this.tableColumns = res.data
            // this.tableColumns = res.data
        },

        // 获取使用项目的下拉选
        async getUseProjectList() {
            const res = await getUseProjectListAPI()
            const result = await getVoltageListAPI()
            console.log(res, '使用项目的下拉选')
            this.useProjectList = res.data
            this.voltageList = result.data
        },

        // 查询可选择的变更设备列表
        onHandleAddEquipmentQuery() {
            this.getSelectEquipmentList()
        },

        // 重置可选择的变更设备列表
        onHandleAddEquipmentReset() {
            this.addEquipmentQueryParams = {
                pageNum: 1,
                pageSize: 10,
                devName: '',
            }
            this.getSelectEquipmentList()
        },

        // 表单重置
        resetForm() {
            this.$refs.outFormRef.resetFields()
            this.equipmentList = []
            this.selectedEquipment = []
        },

        // 提交表单
        submitForm() {
            this.$refs.outFormRef.validate(async (valid) => {
                if (valid) {
                    if (this.selectedEquipment.length === 0) {
                        this.$modal.msgError('请至少添加一个装备')
                        return
                    }

                    // 组装参数
                    const params = { ...this.outForm, jsonData: '' }
                    const jsonData = this.selectedEquipment.map((item) => {
                        return {
                            devId: item.devId,
                            useTime: item.useTime,
                        }
                    })

                    params.jsonData = JSON.stringify(jsonData)
                    console.log('params', params)

                    const res = await addProjectStoreAPI(params)

                    if (res.code === 200) {
                        this.$modal.msgSuccess('状态变更成功')
                        this.$router.go(-1)
                    } else {
                        this.$modal.msgError(res.msg)
                    }
                }
            })
        },

        // 添加装备
        onHandleAddEquipment() {
            // 对出库表单进行验证

            if (!this.addEquipmentQueryParams.proId) {
                this.$modal.msgError('请选择使用项目')
                return
            }

            this.getSelectEquipmentList()

            this.addEquipmentVisible = true
            // this.$refs.outFormRef.validate((valid) => {
            //     if (valid) {
            //         this.addEquipmentVisible = true
            //     }
            // })
        },

        // 移除装备
        removeEquipment(index) {
            this.equipmentList.splice(index, 1)
        },

        // 批量移除装备
        removeSelectedEquipment() {
            if (this.selectedEquipment.length === 0) {
                this.$modal.msgWarning('请选择要移除的装备')
                return
            }

            this.$modal.confirm('确认移除选中的装备吗？').then(() => {
                this.selectedEquipment.forEach((item) => {
                    const index = this.equipmentList.findIndex((eq) => eq.equipmentCode === item.equipmentCode)
                    if (index > -1) {
                        this.equipmentList.splice(index, 1)
                    }
                })
                this.selectedEquipment = []
            })
        },

        // 选择变化
        handleSelectionAddEquipment(selection) {
            console.log(selection, '选择变化')
            this.selectedEquipment = []
            this.selectedEquipment = selection.map((item) => {
                return {
                    ...item,
                    useTime: '',
                }
            })
        },

        // 确定添加
        onHandleAddEquipmentConfirm() {
            if (this.selectedEquipment.length === 0) {
                this.$modal.msgWarning('请选择要添加的装备')
                return
            }

            this.addEquipmentVisible = false
        },

        // 选择使用项目
        onChangeProCode(value) {
            this.outForm.proCode = value
            this.addEquipmentQueryParams.proId = value
            this.outForm.proName = this.useProjectList.find((item) => item.proCode === value).proName
            const item = this.useProjectList.find((item) => item.proCode === value)

            const { proTypeName, proType, voltage, city, county, province } = item
            this.proTypeName = proTypeName
            this.outForm.proType = proType
            this.outForm.voltageLevel = voltage
            this.voltageLevel = voltage + 'kV'
            this.outForm.proProvince = province
            this.outForm.proCity = city
            this.outForm.proCounty = county
        },

        // 选择省份
        onChangeProvince(value) {
            if (!value) {
                this.cityList = []
                return
            }
            this.cityList = this.provinceList.find((item) => item.label === value).children
        },

        // 选择城市
        onChangeCity(value) {
            if (!value) {
                this.countyList = []
                return
            }
            this.countyList = this.cityList.find((item) => item.label === value).children
        },

        // 确定变更
        onHandleSubmit() {
            this.submitForm()
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;

    .page-title {
        font-size: 18px;
        font-weight: 600;
        margin-left: 10px;
        color: #303133;
    }
}

.equipment-actions {
    margin: 15px 0;
    text-align: left;
}

.form-actions {
    margin-top: 30px;
    text-align: right;

    ::v-deep .el-form-item__content {
        text-align: right;
    }
}

::v-deep .el-table {
    margin-top: 15px;
}

::v-deep .el-form-item {
    margin-bottom: 18px;
}

::v-deep .el-input-number {
    width: 100%;
}
</style>