1

src/api/outbound.js

+import request from '@/utils/request'
+
+// 查询设备列表
+export function listdevice(query) {
+  return request({
+    url: '/wbwarehouse/queryWbWarehouseByPagination',
+    method: 'get',
+    params: query
+  })
+}
+export function updatadevice(data) {
+  return request({
+    url: '/wbwarehouse/update',
+    method: 'put',
+    data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+export function getDetailById(id) {
+  return request({
+    url: '/wbwarehouse/detail/' + id,
+    method: 'get'
+  })
+}
+export function add(data) {
+  return request({
+    url: '/wbwarehouse/add',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+// 出库操作接口
+export function performOutbound(data) {
+    return request({
+      url: '/wbwarehouse/canceListByType',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8'
+      }
+    })
+  }

src/views/processManagement/equipmentOutbound/index.vue

+<template>
+    <div class="app-container">
+      <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+        <el-form-item label="pn" prop="pn">
+          <el-input
+            v-model="queryParams.pn"
+            placeholder="请输入pn"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="lot" prop="lot">
+          <el-input
+            v-model="queryParams.lot"
+            placeholder="请输入lot"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="plocation" prop="plocation">
+          <el-input
+            v-model="queryParams.plocation"
+            placeholder="请输入plocation"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+          <el-button style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="placeholder" />
+      <div style="padding:5px 10px">
+        <div class="mb12 font-small-bold">设备出库列表</div>
+        <el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="pn" prop="businessId" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{ scope.row.pn || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="lot" prop="lot" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{ scope.row.lot || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="plocation" prop="plocation" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{ scope.row.plocation || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="fqYs" prop="fqYs" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{ scope.row.fqYs || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作员" prop="createName" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              {{ scope.row.createName || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="updateDate">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" class-name="small-padding fixed-width" width="110px">
+            <template slot-scope="scope">
+              <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
+                详情
+              </el-button>
+              <el-button
+              size="mini"
+              type="text"
+              style="color: #49cec9"
+              @click="handleDelete(scope.row)"
+            >出库</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.rows"
+        @pagination="getList"
+      />
+      <!-- TODO: 单项详情信息表单配置 -->
+      <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body :close-on-click-modal="false">
+        <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="pn：" prop="pn">
+                <el-input v-model.trim="singleDetails.pn" :readonly="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="lot：" prop="workshop">
+                <el-input v-model.trim="singleDetails.lot" :readonly="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="plocation：" prop="plocation">
+                <el-input v-model.trim="singleDetails.plocation" :readonly="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="fqYs：" prop="fqYs">
+                <el-input v-model.trim="singleDetails.fqYs" :readonly="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="操作员：" prop="createName">
+                <el-input v-model.trim="singleDetails.createName" :readonly="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label=" 操作时间：" prop="updateDate">
+                <el-input v-model.trim="singleDetails.updateDate" :readonly="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { listdevice, performOutbound} from '@/api/outbound'
+export default {
+    name: 'Role',
+    data() {
+      return {
+        // TODO: 表单里的单项详情参数
+        equipmentList: [],
+        handleSelectionChange: '',
+        singleDetails: {
+          equipmentName: '',
+          equipmentCode: '',
+          lot: '',
+          location: '',
+          thickness: '',
+          createName: '',
+          createTime: ''
+        },
+        // 是否显示弹出层（数据详情）
+        openDetails: false,
+        // // TODO: 模拟测试数据
+        typeParent: 'text',
+        typePrimary: 'primary',
+        typeSuccess: 'success',
+        nameParent: '删除',
+        resetName: '重置',
+        addName: '新增',
+        exportName: '导出',
+        updataName: '修改',
+        size: 'mini',
+        smallSize: 'small',
+        delicon: 'el-icon-delete',
+        addIcon: 'el-icon-plus',
+        exportIcon: 'el-icon-download',
+        resetIcon: '',
+        haspermi: ['sys:user:delete'],
+        resetHaspermi: ['sys:user:resetPwd'],
+        updateHaspermi: ['sys:role:update'],
+        addHaspermi: ['sys:role:add'],
+        exportHaspermi: ['sys:role:export'],
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 总条数
+        total: 0,
+        // 角色表格数据
+        roleList: [],
+        // 弹出层标题
+        title: '',
+        // 是否显示弹出层
+        open: false,
+        // 是否显示弹出层（数据权限）
+        openDataScope: false,
+        // 日期范围
+        // dateRange: [],
+        // 菜单表格数据
+        menuList: [],
+        menuExpand: false,
+        menuNodeAll: false,
+        deptExpand: true,
+        deptNodeAll: false,
+        // 状态数据字典
+        statusOptions: [
+          {
+            dictLabel: '启用',
+            dictValue: '1'
+          },
+          {
+            dictLabel: '停用',
+            dictValue: '0'
+          }
+        ],
+        // 数据范围选项
+        dataScopeOptions: [
+          {
+            value: '1',
+            label: '全部数据权限'
+          },
+          {
+            value: '2',
+            label: '自定数据权限'
+          },
+          {
+            value: '3',
+            label: '本部门数据权限'
+          },
+          {
+            value: '4',
+            label: '本部门及以下数据权限'
+          },
+          {
+            value: '5',
+            label: '仅本人数据权限'
+          }
+        ],
+        // 菜单列表
+        menuOptions: [],
+        // 部门列表
+        tOptions: [],
+        // 查询参数
+        queryParams: {
+          page: 1,
+          rows: 10,
+          pn: undefined,
+          lot: undefined,
+          plocation: undefined,
+          ptype: 1,
+          pstatus: 0,
+          delFlag: 0
+        },
+        // 表单参数
+        form: {
+          pn: '',
+          lot: '',
+          plocation: '',
+          fqYs: ''
+        },
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        // 表单校验
+        rules: {
+          pn: [
+            { required: true, message: '请输入pn', trigger: 'change' },
+            { pattern: /^[^[\uD800-\uDFFF]+$/, message: '不能包含表情符号', trigger: 'change' }
+          ],
+          lot: [
+            { required: true, message: '请输入lot', trigger: 'blur' },
+            { pattern: /^[^[\uD800-\uDFFF]+$/, message: '不能包含表情符号', trigger: 'change' }
+          ],
+          plocation: [
+            { required: true, message: '请输入plocation', trigger: 'blur' },
+            { pattern: /^[^[\uD800-\uDFFF]+$/, message: '不能包含表情符号', trigger: 'change' }
+          ],
+          fqYs: [{ pattern: /^[1-9]\d{0,8}$/, message: '仅能输入整数', trigger: 'change' }]
+        },
+        deptOptions: [],
+        formData: {}
+      }
+    },
+    mounted() {
+    },
+    /** 路由离开前存储筛选条件*/
+    beforeRouteLeave(to, from, next) {
+      this.$store.dispatch('searchSave/searchParamsSet', {
+        path: this.$route.path,
+        param: {
+          ...this.queryParams
+        }
+      })
+      next()
+    },
+    created() {
+      if (this.$store.getters.searchParams[this.$route.path]) {
+        const { searchParams } = this.$store.getters; const { path } = this.$route
+        const param = JSON.parse(searchParams[path]) // 保留着的查询条件
+        this.queryParams = { ...param }
+      }
+      this.getList()
+    },
+    methods: {
+      handelTab(i, e) {
+        const that = this
+        if (!that.$refs['input' + i]) {
+          return
+        }
+        that.$nextTick(() => {
+          e.target.blur()
+          const index = i + 1
+          that.$refs['input' + index].focus()
+        })
+      },
+      // TODO: 获取所选行详情信息操作
+      handleDetail(row) {
+        this.singleDetails = this.formReset
+        this.singleDetails = row
+        this.title = '详情信息'
+        this.openDetails = !this.openDetails
+      },
+      /** 查询角色列表 */
+      getList() {
+        this.loading = true
+        listdevice(this.queryParams).then(
+          response => {
+            this.equipmentList = response.rows
+            this.total = response.total
+            this.loading = false
+          }
+        )
+      },
+      resetQuery() {
+        this.queryParams = {
+          page: 1,
+          rows: 10,
+          pn: undefined,
+          lot: undefined,
+          plocation: undefined,
+          pstatus: 0,
+          ptype: 1,
+          delFlag: 0
+        }
+        this.resetForm('queryForm')
+        this.handleQuery()
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false
+        this.reset()
+      },
+      // 取消按钮（数据权限）
+      cancelDataScope() {
+        this.openDataScope = false
+        this.reset()
+      },
+      // 表单重置
+      reset() {
+        if (this.$refs.menu !== undefined) {
+          this.$refs.menu.setCheckedKeys([])
+        }
+        this.menuExpand = false
+        this.menuNodeAll = false
+        this.deptExpand = true
+        this.deptNodeAll = false
+        this.form = {
+          roleId: undefined,
+          businessId: undefined,
+          roleName: undefined,
+          roleKey: undefined,
+          roleSort: 0,
+          flag: '1',
+          menuIds: [],
+          menuName: undefined,
+          deptIds: [],
+          menuCheckStrictly: false,
+          deptCheckStrictly: false,
+          remark: undefined
+        }
+        this.resetForm('form')
+      },
+      /** 查询按钮操作 */
+      handleQuery() {
+        this.queryParams.page = 1
+        this.getList()
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset()
+        this.getMenuTreeselect()
+        this.open = true
+        this.title = '添加角色'
+      },
+      /** 出库按钮操作 */
+      handleDelete(row) {
+        const dataToSend = {
+            id: row.businessId,
+            pn: row.pn,
+            lot: row.lot,
+            plocation: row.plocation,
+            fqYs: row.fqYs,
+            createName: row.createName,
+            updateDate: row.updateDate,
+        };
+        // 弹出确认框
+        this.$confirm('是否确认操作?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }).then(() => {
+            // 调用 performOutbound 函数执行出库操作
+            performOutbound(dataToSend)
+            .then(response => {
+                if (response.data.code === 200) {
+                // 操作成功，从页面中移除该行数据
+                const index = this.equipmentList.indexOf(row);
+                if (index !== -1) {
+                this.equipmentList.splice(index, 1); // 删除当前行
+                }
+                this.$message.success('操作成功');
+                } else {
+                this.$message.error('操作失败');
+                }
+            })
+            .catch(error => {
+                console.error('请求出错', error);
+                this.$message.error('操作失败');
+            });
+        }).catch(() => {
+            this.$message.info('已取消操作');
+        });
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+  .aboutSingleDetails{
+    .el-form-item{
+      .el-input >>> .el-input__inner {
+        -webkit-appearance: none;
+        background-color: #FFF;
+        background-image: none;
+        border-radius: 4px;
+        border: 0;
+        width: 100%;
+      }
+    }
+  }
+  .app-container {
+    font-size: 18px;
+    padding: 0;
+  
+    .placeholder {
+      height: 1.3vh;
+      background-color: #F4F4F4;
+      margin-bottom: 10px
+    }
+  
+    .table-drop {
+      vertical-align: 2px;
+      line-height: 20px;
+      margin-left: 15px
+    }
+  
+    .el-switch {
+      margin-left: 15px;
+    }
+  }
+  
+  .el-divider--vertical {
+    height: 12em;
+    width: 4px;
+  }
+</style>
+  
\ No newline at end of file