mqtt模块

2026-04-14 08:31:58 +08:00
parent ba6396093e
commit c41f9df248
6 changed files with 833 additions and 126 deletions
--- a/src/api/worn/mqttConfig.js
+++ b/src/api/worn/mqttConfig.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询MQTT主题配置列表
+export function listMqttConfig(query) {
+  return request({
+    url: '/worn/mqttConfig/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询MQTT主题配置详细
+export function getMqttConfig(id) {
+  return request({
+    url: '/worn/mqttConfig/' + id,
+    method: 'get'
+  })
+}
+
+// 新增MQTT主题配置
+export function addMqttConfig(data) {
+  return request({
+    url: '/worn/mqttConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改MQTT主题配置
+export function updateMqttConfig(data) {
+  return request({
+    url: '/worn/mqttConfig',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除MQTT主题配置
+export function delMqttConfig(id) {
+  return request({
+    url: '/worn/mqttConfig/' + id,
+    method: 'delete'
+  })
+}
--- a/src/api/worn/outbound.js
+++ b/src/api/worn/outbound.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询出库单据列表
+export function listOutbound(query) {
+  return request({
+    url: '/worn/outbound/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询出库单据详细
+export function getOutbound(id) {
+  return request({
+    url: '/worn/outbound/' + id,
+    method: 'get'
+  })
+}
+
+// 新增出库单据
+export function addOutbound(data) {
+  return request({
+    url: '/worn/outbound',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改出库单据
+export function updateOutbound(data) {
+  return request({
+    url: '/worn/outbound',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除出库单据
+export function delOutbound(id) {
+  return request({
+    url: '/worn/outbound/' + id,
+    method: 'delete'
+  })
+}
--- a/src/views/worn/mqttConfig/index.vue
+++ b/src/views/worn/mqttConfig/index.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="app-container">
+    <el-form
+      ref="queryRef"
+      :model="queryParams"
+      :inline="true"
+      v-show="showSearch"
+      label-width="120px"
+    >
+      <el-form-item label="项目编码" prop="project">
+        <el-input v-model="queryParams.project" placeholder="请输入项目编码" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="仓库编码" prop="warehouse">
+        <el-input v-model="queryParams.warehouse" placeholder="请输入仓库编码" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="上行 Topic" prop="topicUp">
+        <el-input v-model="queryParams.topicUp" placeholder="请输入上行 Topic" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="下行前缀" prop="topicDownPrefix">
+        <el-input
+          v-model="queryParams.topicDownPrefix"
+          placeholder="请输入下行 Topic 前缀"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="所属部门ID" prop="deptId">
+        <el-input v-model="queryParams.deptId" placeholder="请输入所属部门ID" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 160px">
+          <el-option label="启用" value="0" />
+          <el-option label="停用" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['worn:mqttConfig:add']"
+        >
+          新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['worn:mqttConfig:edit']"
+        >
+          修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['worn:mqttConfig:remove']"
+        >
+          删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['worn:mqttConfig:export']"
+        >
+          导出
+        </el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <el-table v-loading="loading" :data="mqttConfigList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键ID" align="center" prop="id" />
+      <el-table-column label="项目编码" align="center" prop="project" />
+      <el-table-column label="仓库编码" align="center" prop="warehouse" />
+      <el-table-column label="所属部门ID" align="center" prop="deptId" />
+      <el-table-column label="上行 Topic" align="center" prop="topicUp" min-width="220" show-overflow-tooltip />
+      <el-table-column
+        label="下行 Topic 前缀"
+        align="center"
+        prop="topicDownPrefix"
+        min-width="240"
+        show-overflow-tooltip
+      />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === '0' ? 'success' : 'info'">
+            {{ scope.row.status === '0' ? '启用' : '停用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['worn:mqttConfig:edit']">
+            修改
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['worn:mqttConfig:remove']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <el-form ref="mqttConfigRef" :model="form" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="项目编码" prop="project">
+              <el-input v-model="form.project" placeholder="请输入项目编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="仓库编码" prop="warehouse">
+              <el-input v-model="form.warehouse" placeholder="请输入仓库编码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="所属部门ID" prop="deptId">
+              <el-input v-model="form.deptId" placeholder="请输入所属部门ID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio value="0">启用</el-radio>
+                <el-radio value="1">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="上行 Topic" prop="topicUp">
+              <el-input v-model="form.topicUp" placeholder="请输入上行 Topic" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="下行前缀" prop="topicDownPrefix">
+              <el-input v-model="form.topicDownPrefix" placeholder="请输入下行 Topic 前缀" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确定</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="MqttConfig">
+import { addMqttConfig, delMqttConfig, getMqttConfig, listMqttConfig, updateMqttConfig } from "@/api/worn/mqttConfig"
+
+const { proxy } = getCurrentInstance()
+
+const mqttConfigList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    project: null,
+    warehouse: null,
+    deptId: null,
+    topicUp: null,
+    topicDownPrefix: null,
+    status: null
+  },
+  rules: {
+    project: [{ required: true, message: "项目编码不能为空", trigger: "blur" }],
+    warehouse: [{ required: true, message: "仓库编码不能为空", trigger: "blur" }],
+    topicUp: [{ required: true, message: "上行 Topic 不能为空", trigger: "blur" }],
+    topicDownPrefix: [{ required: true, message: "下行 Topic 前缀不能为空", trigger: "blur" }],
+    status: [{ required: true, message: "状态不能为空", trigger: "change" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+function getList() {
+  loading.value = true
+  listMqttConfig(queryParams.value).then(response => {
+    mqttConfigList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+function cancel() {
+  open.value = false
+  reset()
+}
+
+function reset() {
+  form.value = {
+    id: null,
+    project: null,
+    warehouse: null,
+    deptId: null,
+    topicUp: null,
+    topicDownPrefix: null,
+    status: "0",
+    remark: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    isDelete: "0"
+  }
+  proxy.resetForm("mqttConfigRef")
+}
+
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length !== 1
+  multiple.value = selection.length === 0
+}
+
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "新增 MQTT 主题配置"
+}
+
+function handleUpdate(row) {
+  reset()
+  const currentId = row?.id || ids.value[0]
+  getMqttConfig(currentId).then(response => {
+    form.value = response.data
+    if (!form.value.status) {
+      form.value.status = "0"
+    }
+    open.value = true
+    title.value = "修改 MQTT 主题配置"
+  })
+}
+
+function submitForm() {
+  proxy.$refs["mqttConfigRef"].validate(valid => {
+    if (!valid) {
+      return
+    }
+
+    const request = form.value.id != null ? updateMqttConfig(form.value) : addMqttConfig(form.value)
+    request.then(() => {
+      proxy.$modal.msgSuccess(form.value.id != null ? "修改成功" : "新增成功")
+      open.value = false
+      getList()
+    })
+  })
+}
+
+function handleDelete(row) {
+  const currentIds = row?.id || ids.value
+  proxy.$modal.confirm(`是否确认删除 MQTT 主题配置编号为 "${currentIds}" 的数据项？`).then(() => {
+    return delMqttConfig(currentIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+function handleExport() {
+  proxy.download("worn/mqttConfig/export", {
+    ...queryParams.value
+  }, `mqttConfig_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
--- a/src/views/worn/mqttData/index.vue
+++ b/src/views/worn/mqttData/index.vue
@@ -1,22 +1,6 @@
 <template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="设备ID" prop="deviceId">
-        <el-input
-          v-model="queryParams.deviceId"
-          placeholder="请输入设备ID"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="MQTT Topic" prop="topic">
-        <el-input
-          v-model="queryParams.topic"
-          placeholder="请输入MQTT Topic"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
      <el-form-item label="项目" prop="project">
        <el-input
          v-model="queryParams.project"
@@ -33,68 +17,6 @@
          @keyup.enter="handleQuery"
        />
      </el-form-item>
-      <el-form-item label="电量" prop="battery">
-        <el-input
-          v-model="queryParams.battery"
-          placeholder="请输入电量"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="温度" prop="temperature">
-        <el-input
-          v-model="queryParams.temperature"
-          placeholder="请输入温度"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="湿度" prop="humidity">
-        <el-input
-          v-model="queryParams.humidity"
-          placeholder="请输入湿度"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="氨气" prop="nh3">
-        <el-input
-          v-model="queryParams.nh3"
-          placeholder="请输入氨气"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="硫化氢" prop="h2s">
-        <el-input
-          v-model="queryParams.h2s"
-          placeholder="请输入硫化氢"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="烟雾浓度" prop="concentration">
-        <el-input
-          v-model="queryParams.concentration"
-          placeholder="请输入烟雾浓度"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="水位状态" prop="waterStatus">
-        <el-select v-model="queryParams.waterStatus" placeholder="请选择水位状态" clearable>
-          <el-option label="正常" :value="0" />
-          <el-option label="报警" :value="1" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="删除标识" prop="isDelete">
-        <el-input
-          v-model="queryParams.isDelete"
-          placeholder="请输入删除标识"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -179,8 +101,7 @@
      </el-table-column>
      <el-table-column label="烟雾浓度" align="center" prop="concentration">
        <template #default="scope">
-          <el-tag v-if="scope.row.concentration !== null && scope.row.concentration !== undefined && scope.row.concentration !== ''" color="#607D8B" style="color: #fff;">{{ scope.row.concentration }}</el-tag>
-          <el-tag v-else type="success">正常</el-tag>
+          <el-tag color="#607D8B" style="color: #fff;">{{ scope.row.concentration ?? 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="水位状态" align="center" prop="waterStatus">
@@ -191,7 +112,7 @@
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="删除标识" align="center" prop="isDelete" />
+<!--      <el-table-column label="删除标识" align="center" prop="isDelete" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['worn:mqttData:edit']">修改</el-button>
@@ -290,20 +211,8 @@ const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
-    deviceId: null,
-    topic: null,
    project: null,
-    warehouse: null,
-    payload: null,
-    dataJson: null,
-    battery: null,
-    temperature: null,
-    humidity: null,
-    nh3: null,
-    h2s: null,
-    concentration: null,
-    waterStatus: null,
-    isDelete: null
+    warehouse: null
  },
  rules: {
    deviceId: [
--- a/src/views/worn/mqttDevice/index.vue
+++ b/src/views/worn/mqttDevice/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" style="flex-wrap: nowrap; white-space: nowrap;">
      <el-form-item label="设备唯一标识" prop="devEui">
        <el-input
          v-model="queryParams.devEui"
@@ -25,14 +25,6 @@
          @keyup.enter="handleQuery"
        />
      </el-form-item>
-      <el-form-item label="删除标识" prop="isDelete">
-        <el-input
-          v-model="queryParams.isDelete"
-          placeholder="请输入删除标识"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -88,9 +80,13 @@
      <el-table-column label="设备名称" align="center" prop="deviceName" />
      <el-table-column label="设备类型" align="center" prop="deviceType" />
      <el-table-column label="所属部门ID" align="center" prop="deptId" />
-      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === '0'" type="success">正常</el-tag>
+          <el-tag v-else-if="scope.row.status === '1'" type="danger">不可用</el-tag>
+        </template>
+      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="删除标识" align="center" prop="isDelete" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['worn:mqttDevice:edit']">修改</el-button>
@@ -108,23 +104,39 @@
    />

    <!-- 添加或修改MQTT设备对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="mqttDeviceRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="设备唯一标识" prop="devEui">
-          <el-input v-model="form.devEui" placeholder="请输入设备唯一标识" />
-        </el-form-item>
-        <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
-        </el-form-item>
-        <el-form-item label="所属部门ID" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入所属部门ID" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="删除标识" prop="isDelete">
-          <el-input v-model="form.isDelete" placeholder="请输入删除标识" />
-        </el-form-item>
+    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
+      <el-form ref="mqttDeviceRef" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="设备唯一标识" prop="devEui">
+              <el-input v-model="form.devEui" placeholder="请输入设备唯一标识" :disabled="isEdit" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备名称" prop="deviceName">
+              <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="设备类型" prop="deviceType">
+              <el-input v-model="form.deviceType" placeholder="请输入设备类型" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属部门ID" prop="deptId">
+              <el-input v-model="form.deptId" placeholder="请输入所属部门ID" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -150,6 +162,7 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref("")
+const isEdit = ref(false)

 const data = reactive({
  form: {},
@@ -160,8 +173,7 @@ const data = reactive({
    deviceName: null,
    deviceType: null,
    deptId: null,
-    status: null,
-    isDelete: null
+    status: null
  },
  rules: {
    devEui: [
@@ -201,8 +213,7 @@ function reset() {
    createBy: null,
    createTime: null,
    updateBy: null,
-    updateTime: null,
-    isDelete: null
+    updateTime: null
  }
  proxy.resetForm("mqttDeviceRef")
 }
@@ -229,6 +240,7 @@ function handleSelectionChange(selection) {
 /** 新增按钮操作 */
 function handleAdd() {
  reset()
+  isEdit.value = false
  open.value = true
  title.value = "添加MQTT设备"
 }
@@ -236,6 +248,7 @@ function handleAdd() {
 /** 修改按钮操作 */
 function handleUpdate(row) {
  reset()
+  isEdit.value = true
  const _id = row.id || ids.value
  getMqttDevice(_id).then(response => {
    form.value = response.data
@@ -285,3 +298,9 @@ function handleExport() {

 getList()
 </script>
+
+<style scoped>
+:deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+</style>
--- a/src/views/worn/outbound/index.vue
+++ b/src/views/worn/outbound/index.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="出库单号" prop="billNo">
+        <el-input
+          v-model="queryParams.billNo"
+          placeholder="请输入出库单号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="仓库编码" prop="warehouseCode">
+        <el-input
+          v-model="queryParams.warehouseCode"
+          placeholder="请输入仓库编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="仓库名称" prop="warehouseName">
+        <el-input
+          v-model="queryParams.warehouseName"
+          placeholder="请输入仓库名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="库区编码" prop="areaCode">
+        <el-input
+          v-model="queryParams.areaCode"
+          placeholder="请输入库区编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="库区名称" prop="areaName">
+        <el-input
+          v-model="queryParams.areaName"
+          placeholder="请输入库区名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="出库时间" prop="outboundTime">
+        <el-date-picker clearable
+          v-model="queryParams.outboundTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择出库时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="逻辑删除" prop="isDelete">
+        <el-input
+          v-model="queryParams.isDelete"
+          placeholder="请输入逻辑删除"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="项目ID" prop="projectId">
+        <el-input
+          v-model="queryParams.projectId"
+          placeholder="请输入项目ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['worn:outbound:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['worn:outbound:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['worn:outbound:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['worn:outbound:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="outboundList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键ID" align="center" prop="id" />
+      <el-table-column label="出库单号" align="center" prop="billNo" />
+      <el-table-column label="出库类型" align="center" prop="billType" />
+      <el-table-column label="仓库编码" align="center" prop="warehouseCode" />
+      <el-table-column label="仓库名称" align="center" prop="warehouseName" />
+      <el-table-column label="库区编码" align="center" prop="areaCode" />
+      <el-table-column label="库区名称" align="center" prop="areaName" />
+      <el-table-column label="单据备注" align="center" prop="remark" />
+      <el-table-column label="出库时间" align="center" prop="outboundTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.outboundTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="逻辑删除" align="center" prop="isDelete" />
+      <el-table-column label="项目ID" align="center" prop="projectId" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['worn:outbound:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['worn:outbound:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改出库单据对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="outboundRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="出库单号" prop="billNo">
+          <el-input v-model="form.billNo" placeholder="请输入出库单号" />
+        </el-form-item>
+        <el-form-item label="仓库编码" prop="warehouseCode">
+          <el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
+        </el-form-item>
+        <el-form-item label="仓库名称" prop="warehouseName">
+          <el-input v-model="form.warehouseName" placeholder="请输入仓库名称" />
+        </el-form-item>
+        <el-form-item label="库区编码" prop="areaCode">
+          <el-input v-model="form.areaCode" placeholder="请输入库区编码" />
+        </el-form-item>
+        <el-form-item label="库区名称" prop="areaName">
+          <el-input v-model="form.areaName" placeholder="请输入库区名称" />
+        </el-form-item>
+        <el-form-item label="单据备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="出库时间" prop="outboundTime">
+          <el-date-picker clearable
+            v-model="form.outboundTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择出库时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="逻辑删除" prop="isDelete">
+          <el-input v-model="form.isDelete" placeholder="请输入逻辑删除" />
+        </el-form-item>
+        <el-form-item label="项目ID" prop="projectId">
+          <el-input v-model="form.projectId" placeholder="请输入项目ID" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Outbound">
+import { listOutbound, getOutbound, delOutbound, addOutbound, updateOutbound } from "@/api/worn/outbound"
+
+const { proxy } = getCurrentInstance()
+
+const outboundList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    billNo: null,
+    billType: null,
+    warehouseCode: null,
+    warehouseName: null,
+    areaCode: null,
+    areaName: null,
+    outboundTime: null,
+    status: null,
+    isDelete: null,
+    projectId: null
+  },
+  rules: {
+    billNo: [
+      { required: true, message: "出库单号不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询出库单据列表 */
+function getList() {
+  loading.value = true
+  listOutbound(queryParams.value).then(response => {
+    outboundList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    billNo: null,
+    billType: null,
+    warehouseCode: null,
+    warehouseName: null,
+    areaCode: null,
+    areaName: null,
+    remark: null,
+    outboundTime: null,
+    status: null,
+    isDelete: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    projectId: null
+  }
+  proxy.resetForm("outboundRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加出库单据"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getOutbound(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改出库单据"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["outboundRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateOutbound(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addOutbound(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除出库单据编号为"' + _ids + '"的数据项？').then(function() {
+    return delOutbound(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('worn/outbound/export', {
+    ...queryParams.value
+  }, `outbound_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>