feat: 出入库对接完成

罗广辉

2026-01-09 5f4242a68fd2f463f298abe6a0d7581e170c6bf3

feat: 出入库对接完成

 applications/drone-command/src/views/basicManage/deviceStock/DeviceTrackDiaLog.vue

New file
@@ -0,0 +1,141 @@
<template>
    <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="负责人" prop="charger">
                        <el-select v-model="formData.charger" placeholder="请选择" clearable>
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="contactPhone">
                        <el-input v-model="formData.contactPhone" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出库去向" prop="outTarget">
                        <el-input v-model="formData.outTarget" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出库时间" prop="outTime">
                        <el-date-picker
                            v-model="formData.outTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用途" prop="purpose">
                        <el-input v-model="formData.purpose" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
            <el-button
                v-if="!dialogReadonly"
                type="primary"
                :loading="submitting"
                :disabled="submitting"
                @click="handleSubmit"
            >
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fwDeviceDetailApi, fwDeviceSubmitApi } from '@/views/basicManage/deviceStock/fwDevice'
import { getUserListApi } from '@/api/system/user'
import { fieldRules } from '@ztzf/utils'
import { fwDeviceTrackSubmitApi } from '@/views/basicManage/deviceStock/fwDeviceTrackApi'

const initForm = () => ({
    charger: '', // 负责人
    contactPhone: '', // 联系电话
    outTarget: '', // 出库去向
    outTime: '', // 出库时间
    purpose: '', // 用途
})
const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false)
const dialogReadonly = computed(() => dialogMode.value === 'view')
const dialogTitle = computed(() => {
    if (dialogMode.value === 'edit') {
        return '编辑'
    } else if (dialogMode.value === 'view') {
        return '查看'
    } else {
        return '出库'
    }
})

const rules = {
    charger: fieldRules(true, 0), // 负责人
    contactPhone: fieldRules(true, 50), // 联系电话
    outTarget: fieldRules(true, 50),
    outTime: fieldRules(true, 0),
    purpose: fieldRules(true, 50), // 用途
}

const userList = ref([])
function getUserList() {
    formData.value.charger = ''
    getUserListApi().then(res => {
        userList.value = res.data.data.records
    })
}

// 关闭弹框
function handleCancel() {
    visible.value = false
}

// 提交新增/编辑
async function handleSubmit() {
    const isValid = await formRef.value?.validate().catch(() => false)
    if (!isValid) return
    submitting.value = true
    try {
        await fwDeviceTrackSubmitApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '出库成功' : '更新成功')
        visible.value = false
        emit('success')
    } finally {
        submitting.value = false
    }
}


// 关闭后重置
function handleClosed() {
    formData.value = initForm()
}

// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    formData.value.deviceId = row.id
}

onMounted(() => {
    getUserList()
})

defineExpose({ open })
</script>

 applications/drone-command/src/views/basicManage/deviceStock/FormDiaLog.vue

@@ -1,6 +1,58 @@
<template>
    <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
        <el-form ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px">
        <div v-if="dialogReadonly">
            <el-row>
                <el-col :span="12">
                    <div>设备信息: {{ formData.deviceName }}</div>
                </el-col>
                <el-col :span="12">
                    <div>设备类型: {{ formData.deviceType }}</div>
                </el-col>
                <el-col :span="12">
                    <div>设备属性: {{ formData.deviceAtt }}</div>
                </el-col>
                <el-col :span="12">
                    <div>型号: {{ formData.deviceModel }}</div>
                </el-col>
                <el-col :span="12">
                    <div>规格: {{ formData.deviceSpecification }}</div>
                </el-col>
                <el-col :span="12">
                    <div>生产厂商: {{ formData.manufacturer }}</div>
                </el-col>
                <el-col :span="12">
                    <div>来源: {{ formData.source }}</div>
                </el-col>
                <el-col :span="12">
                    <div>用途: {{ formData.purpose }}</div>
                </el-col>
                <el-col :span="12">
                    <div>所属部门: {{ formData.belongDept }}</div>
                </el-col>
                <el-col :span="12">
                    <div>负责人: {{ formData.charger }}</div>
                </el-col>
                <el-col :span="12">
                    <div>联系电话: {{ formData.contactPhone }}</div>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="list">
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column prop="charger" label="用户" />
                <el-table-column prop="contactPhone" label="电话" />
                <el-table-column prop="outTarget" label="出库去向" />
                <el-table-column prop="outTime" label="出库时间" />
                <el-table-column prop="purpose" label="用途" />
            </el-table>
            <el-pagination
                v-model:current-page="searchParams.current"
                v-model:page-size="searchParams.size"
                :total="total"
                @change="getList"
            />
        </div>

        <el-form v-else ref="formRef" :model="formData" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备名称" prop="deviceName">
@@ -101,9 +153,10 @@
<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fwDeviceDetailApi, fwDeviceSubmitApi } from '@/views/basicManage/deviceStock/fwDevice'
import { fwDeviceDetailApi, fwDevicePageApi, fwDeviceSubmitApi } from '@/views/basicManage/deviceStock/fwDevice'
import { getUserListApi } from '@/api/system/user'
import { fieldRules } from '@ztzf/utils'
import { fieldRules, getDictLabel } from '@ztzf/utils'
import { fwDeviceTrackPageApi } from '@/views/basicManage/deviceStock/fwDeviceTrackApi'

const initForm = () => ({
    belongDept: '', // 所属部门
@@ -122,6 +175,12 @@
    label: 'name',
    children: 'children',
}

const initSearchParams = () => ({
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams())

const dictObj = inject('dictObj')
const deptTree = inject('deptTree')
@@ -197,6 +256,20 @@
function handleClosed() {
    formData.value = initForm()
}
const total = ref(0) // 总条数
const loading = ref(false) // 列表加载中
const list = ref([]) // 列表数据
async function getList() {
    loading.value = true
    try {
        const params = { ...searchParams.value, deviceId: formData.value.id }
        const res = await fwDeviceTrackPageApi(params)
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}

// 打开弹框
async function open({ mode, row } = {}) {
@@ -207,6 +280,7 @@
        formData.value = initForm()
    } else {
        await loadDetail()
        getList()
    }
}


 applications/drone-command/src/views/basicManage/deviceStock/deviceStock.vue

@@ -75,6 +75,7 @@
                <template v-slot="{ row }">
                    <el-link @click="handleView(row)" type="primary">查看</el-link>
                    <el-link @click="handleEdit(row)" type="warning">编辑</el-link>
                    <el-link @click="outbound(row)" type="warning">出库</el-link>
                    <el-link @click="handleDelete(row)" type="danger">删除</el-link>
                </template>
            </el-table-column>
@@ -89,6 +90,7 @@
        </div>

        <FormDiaLog ref="dialogRef" @success="getList" />
        <DeviceTrackDiaLog ref="outboundDialogRef" @success="getList" />
    </basic-container>
</template>

@@ -100,6 +102,7 @@
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDeptTree } from '@/api/system/dept'
import { blobDownload, dateRangeFormat, getDictLabel } from '@ztzf/utils'
import DeviceTrackDiaLog from '@/views/basicManage/deviceStock/DeviceTrackDiaLog.vue'

const initSearchParams = () => ({
    deviceName: '', // 设备名称
@@ -109,12 +112,12 @@
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(false) // 列表加载中
const list = ref([]) // 列表数据
const selectedIds = ref([]) // 勾选的设备ID列表
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const outboundDialogRef = ref(null) // 弹框实例
const dictObj = ref({
    deviceType: [], //设备类型
    deviceAtt: [], //设备属性
@@ -167,6 +170,10 @@
    dialogRef.value?.open({ mode: 'edit', row: { ...row } })
}

function outbound(row) {
    outboundDialogRef.value?.open({ mode: 'add', row: { ...row } })
}

// 删除
async function handleDelete(row) {
    const tips = row ? '该条' : '选中的项'

 applications/drone-command/src/views/basicManage/deviceStock/fwDeviceTrackApi.js

New file
@@ -0,0 +1,37 @@
import request from '@/axios'

// 详情
export const fwDeviceTrackDetailApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceTrack/detail`,
        method: 'get',
        params,
    })
}

// 分页
export const fwDeviceTrackPageApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceTrack/page`,
        method: 'get',
        params,
    })
}

// 新增或修改
export const fwDeviceTrackSubmitApi = data => {
    return request({
        url: `/drone-fw/device/fwDeviceTrack/submit`,
        method: 'post',
        data,
    })
}

// 逻辑删除
export const fwDeviceTrackRemoveApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceTrack/remove`,
        method: 'post',
        params,
    })
}