提交

zhouwx

2024-08-13 0daf7e406663eb3a99c2122773f5c3297b8c1253

提交

 src/api/hazardousChemicals/productRecord.js

对比新文件
@@ -0,0 +1,63 @@
import request from "@/utils/request";

export function getProductRecord(params) {
    return request({
        url: '/product-entry-record/list',
        method: 'get',
        params: params
    })
}

export function addProductRecord(data) {
    return request({
        url: '/product-entry-record',
        method: 'post',
        data: data
    })
}

export function editProductRecord(params) {
    return request({
        url: `/product-entry-record`,
        method: 'put',
        data: params
    })
}

export function delProductRecord(data) {
    return request({
        url: `/product-entry-record/` + data,
        method: 'delete'
    })
}

export function doEntryPro(data) {
    return request({
        url: '/product-entry-record/doEntry/' + data,
        method: 'post'
    })
}

export function getProWarehouseRecord(params) {
    return request({
        url: '/product-warehouse-record/list',
        method: 'get',
        params: params
    })
}

export function getProDetail(params) {
    return request({
        url: '/product/list',
        method: 'get',
        params: params
    })
}

export function getProFlow(params) {
    return request({
        url: '/product-flow/list',
        method: 'get',
        params: params
    })
}

 src/api/hazardousChemicals/rawRecord.js

对比新文件
@@ -0,0 +1,55 @@
import request from "@/utils/request";

export function getRawRecord(params) {
    return request({
        url: '/entry-record/list',
        method: 'get',
        params: params
    })
}

export function addRawRecord(data) {
    return request({
        url: '/entry-record',
        method: 'post',
        data: data
    })
}

export function editRawRecord(params) {
    return request({
        url: `/entry-record`,
        method: 'put',
        data: params
    })
}

export function delRawRecord(data) {
    return request({
        url: `/entry-record/` + data,
        method: 'delete'
    })
}

export function doEntryRaw(data) {
    return request({
        url: '/entry-record/doEntry/' + data,
        method: 'post'
    })
}

export function getRawWarehouseRecord(params) {
    return request({
        url: '/warehouse-record/list',
        method: 'get',
        params: params
    })
}

export function getRawDetail(params) {
    return request({
        url: '/hazmat/list',
        method: 'get',
        params: params
    })
}

 src/components/Pagination/index.vue

@@ -33,7 +33,7 @@
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 50]
      return [5,10, 20, 30, 50]
    }
  },
  // 移动端页码按钮的数量端默认值5
@@ -102,4 +102,4 @@
.pagination-container.hidden {
  display: none;
}
</style>
</style>

 src/layout/components/Sidebar/menu.js

@@ -12,11 +12,11 @@
            name: 'electronicWarehouse',
            meta: { title: '电子仓库',icon: 'build',affix: true }
        },
        {
            path: '/detailList',
            name: 'detailList',
            meta: { title: '危化品详单',icon: 'education',affix: true }
        },
        // {
        //     path: '/detailList',
        //     name: 'detailList',
        //     meta: { title: '危化品详单',icon: 'education',affix: true }
        // },
        {
            path: '/accessRecords',
            name: 'accessRecords',
@@ -81,11 +81,11 @@
            name: 'electronicWarehouse',
            meta: { title: '电子仓库',icon: 'build',affix: true }
        },
        {
            path: '/detailList',
            name: 'detailList',
            meta: { title: '危化品详单',icon: 'education',affix: true }
        },
        // {
        //     path: '/detailList',
        //     name: 'detailList',
        //     meta: { title: '危化品详单',icon: 'education',affix: true }
        // },
        {
            path: '/accessRecords',
            name: 'accessRecords',

 src/router/index.js

@@ -92,19 +92,32 @@
    ]
  },
  {
    path: '/detailList',
    path: '/rawDetail',
    component: Layout,
    redirect: '/detailList',
    redirect: '/rawDetail',
    children: [
      {
        path: '/detailList',
        component: () => import('@/views/hazardousChemicals/detailList/index.vue'),
        name: 'detailList',
        path: '/rawDetail',
        component: () => import('@/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue'),
        name: 'rawDetail',
        meta: { title: '危化品详单',icon: 'form',  affix: true }
      }
    ]
  },
  {
    path: '/proDetail',
    component: Layout,
    redirect: '/proDetail',
    children: [
      {
        path: '/proDetail',
        component: () => import('@/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue'),
        name: 'proDetail',
        meta: { title: '成品详单',icon: 'form',  affix: true }
      }
    ]
  },
  {
    path: '/accessRecords',
    component: Layout,
    redirect: '/accessRecords',

 src/views/hazardousChemicals/accessRecords/components/productTable.vue

对比新文件
@@ -0,0 +1,163 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="品名：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入品名" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号：" >
          <el-input v-model="data.queryParams.productSn" placeholder="请输入产品编号" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="流转时间" prop="updateTime" align="center"  />
      <el-table-column label="品名" prop="productBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
      <el-table-column label="二维码识别号" prop="productBasic.code" align="center" />
      <el-table-column label="类型" prop="productBasic.productSn" align="center" >
        <template #default="scope">
          <span>{{scope.row.state === 0 ? '入库' :scope.row.state === 3 ? '标签作废' :scope.row.state === 4 ? '销售' : ''}}</span>

        </template>
      </el-table-column>
      <el-table-column label="数量" prop="batchNo" align="center" width="120" />
      <el-table-column label="操作人" prop="batchNo" align="center" width="120" />
      <el-table-column label="人员所在部门" prop="user.departName" align="center" width="120" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button link type="primary" >查看完整记录</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"
    />

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {delWarehouse, getWarehouse} from "@/api/hazardousChemicals/warehouse";
import {
  delProductRecord,
  doEntryPro,
  getProductRecord, getProFlow,
  getProWarehouseRecord
} from "@/api/hazardousChemicals/productRecord";
import {delRawRecord} from "@/api/hazardousChemicals/rawRecord";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const codeRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  getList()
})

const getList = async () => {
  loading.value = true
  const res = await getProFlow(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delProductRecord(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const doEntry = (val) => {
  ElMessageBox.confirm(
      '确定入库该成品？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await doEntryPro(val.id)
        if(res.code == 200){
          ElMessage.success('入库成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const printCode = (val) => {
  console.log("val",val)
  codeRef.value.openDialog('pro',val);

}
defineExpose({
  getList
});


</script>

 src/views/hazardousChemicals/accessRecords/index.vue

@@ -1,9 +1,45 @@
<template>
  <div>取用记录</div>
  <div>
    <el-tabs v-model="data.activeName" class="demo-tabs" @click="clickTab" style="margin: 10px 10px">
      <el-tab-pane label="成品" name="finishPro" v-if="showFinishPro">
        <pro-table ref="proRef"></pro-table>
      </el-tab-pane>
      <el-tab-pane label="原材料" name="rawMaterial">
<!--        <raw-table ref="rawRef"></raw-table>-->
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import proTable from './components/productTable.vue'
// import rawTable from './components/rawTable.vue'
const showFinishPro = ref(false)
const proRef = ref()
const rawRef = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  activeName: 'finishPro'
})

onMounted(()=>{
  showFinishPro.value = true;
  data.activeName = showFinishPro.value ? 'finishPro' : 'rawMaterial'
})
const clickTab = (tab,event) =>{
  console.log('tab',data.activeName)
  if(data.activeName == 'finishPro'){
    proRef.value.getList()
  }else {
    rawRef.value.getList()
  }
}
</script>

<style scoped lang="scss">

 src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue

对比新文件
@@ -0,0 +1,173 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="状态：" >
          <el-select
              v-model="data.queryParams.state"
              placeholder="请选择状态"
              style="width: 240px"
          >
            <el-option
                v-for="item in data.typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
            type="primary"
            plain
            @click="back"
        >返回</el-button>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="data.dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="productBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="productBasic.cas" align="center" />
      <el-table-column label="厂家" prop="productBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="productBasic.supplier" align="center" />
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="危险性质" prop="productBasic.productCharacter" align="center" />
      <el-table-column label="最小包装" prop="productBasic.productSn" align="center" width="120">
        <template #default="scope">
          <span>{{scope.row.productBasic.metering}}{{scope.row.productBasic.unit}} / {{scope.row.productBasic.minPackage == 0 ? '瓶' :scope.row.productBasic.minPackage == 1?'袋':scope.row.productBasic.minPackage == 2?'桶 ':scope.row.productBasic.minPackage == 3?'盒':scope.row.productBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="入库时间" prop="updateTime" align="center" />
      <el-table-column label="当前状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state ===0 ? '在库' : scope.row.state ===4 ? '标签作废' : scope.row.state ===5 ? '销售' : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="在库余量" prop="remaining" align="center" >
        <template #default="scope">
          <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="所在仓库" prop="warehouseName" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" >
        <template #default="scope">
          <el-button link type="primary" >取用记录</el-button>
          <el-button link type="primary" @click="viewQR(scope.row)">查看二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="data.total > 0"
        :total="data.total"
        v-model:page="data.queryParams.pageNum"
        v-model:limit="data.queryParams.pageSize"
        @pagination="getList"
    />
    <viewQRcode ref="dialogRef" @getList="getList"></viewQRcode>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import viewQRcode from './viewQR.vue'
import {ElMessage} from "element-plus";
import Cookies from "js-cookie";
const route = useRoute()
const router = useRouter();
const dialogRef = ref();
const data = reactive({
  queryParams: {
    basicId: null,
    warehouseId: null,
    state: null,
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  isAdmin: false,
  typeList: [
    {
      id: 0,
      name: '在库'
    },
    {
      id: 5,
      name: '已销售'
    },
    {
      id: 4,
      name: '标签作废'
    },

  ]
});
const loading = ref(false);
const backValue = ref({})
onMounted(async ()=>{
  if(route.query.val){
    const val = JSON.parse(route.query.val)
    backValue.value.pageNum =val.pageNum;
    backValue.value.pageSize =val.pageSize;
    data.queryParams.warehouseId =val.warehouseId
    data.queryParams.basicId =val.basicId
  }
  await getList()
})
const getList = async () => {
  loading.value = true
  const res = await getProDetail(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}
const reset = () => {
  data.queryParams = {
    basicId: data.queryParams.basicId,
    warehouseId: data.queryParams.warehouseId,
    state: null,
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}

const back = () =>{
  const obj = {
    pageNum: backValue.value.pageNum,
    pageSize: backValue.value.pageSize,
  }
  const v = JSON.stringify(obj)
  Cookies.set('type','pro')
  router.push({ path: "/electronicWarehouse", query: { val: v } });
}
const viewQR = (val) => {
  dialogRef.value.openDialog('pro',val)
}

</script>

<style scoped lang="scss">

</style>

 src/views/hazardousChemicals/electronicWarehouse/components/proWarehouseRecord.vue

对比新文件
@@ -0,0 +1,112 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="50%"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-table v-loading="loading" :data="state.dataList" :border="true">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="时间" prop="createTime" align="center" width="120" />
        <el-table-column label="类型" prop="state" align="center">
          <template #default="scope">
            <span>{{scope.row.state ===0 ? '批量导入' : scope.row.state ===3 ? '标签作废' : scope.row.state ===5 ? '销售' : ''}}</span>

          </template>
        </el-table-column>
        <el-table-column label="数量" prop="num" align="center"  />
        <el-table-column label="操作人" prop="createName" align="center"  />
        <el-table-column label="变动后剩余" prop="remaining" align="center"  />
      </el-table>
      <pagination
          v-show="state.total > 0"
          :total="state.total"
          v-model:page="state.queryParams.pageNum"
          v-model:limit="state.queryParams.pageSize"
          @pagination="getRecord"
      />

    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {ElMessage} from "element-plus";
import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse";
import {verifyPhone} from "@/utils/validate";
import {checkBasicName} from "@/api/hazardousChemicals/basicInfo";
import {getProductRecord, getProWarehouseRecord} from "@/api/hazardousChemicals/productRecord";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
const loading = ref(false)
const state = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    warehouseId: '',
    basicId: ''
  },
  total: 0,
  dataList: []

})


const openDialog = async (value) => {
  title.value = value.productBasic.name + ' ' +  '(编号：' + value.productBasic.productSn + ')' + ' '+  '的取用记录'
  state.form = value;
  await getRecord()
  dialogVisible.value = true;
}

const getRecord = async () => {
  loading.value = true
  state.queryParams.basicId = state.form.basicId;
  state.queryParams.warehouseId = state.form.warehouseId;
  const res = await getProWarehouseRecord(state.queryParams)
  if(res.code == 200){
    state.dataList = res.data.list
    state.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const handleClose = () => {
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.form = {
    id: '',
    name: '',
    remark: '',
  }
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/hazardousChemicals/electronicWarehouse/components/productTable.vue

对比新文件
@@ -0,0 +1,154 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="品名：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入品名" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号：" >
          <el-input v-model="data.queryParams.productSn" placeholder="请输入产品编号" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="productBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="productBasic.cas" align="center" />
      <el-table-column label="厂家" prop="productBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="productBasic.supplier" align="center" />
      <el-table-column label="危险性质" prop="productBasic.productCharacter" align="center" />
      <el-table-column label="最小包装" prop="productBasic.productSn" align="center" width="120">
        <template #default="scope">
          <span>{{scope.row.productBasic.metering}}{{scope.row.productBasic.unit}} / {{scope.row.productBasic.minPackage == 0 ? '瓶' :scope.row.productBasic.minPackage == 1?'袋':scope.row.productBasic.minPackage == 2?'桶 ':scope.row.productBasic.minPackage == 3?'盒':scope.row.productBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="所在仓库" prop="warehouseName" align="center" >
        <template #default="scope">
          <span>{{scope.row.warehouse.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state === 0 ? '未入库' : '已入库'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" >
        <template #default="scope">
          <el-button link type="primary" @click="getProRecord(scope.row)" >动库记录</el-button>
          <el-button link type="primary" @click="toDetail(scope.row)">查看详情</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"
    />
    <pro-warehouse-dialog ref="dialogRef" @getList="getList"></pro-warehouse-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import proWarehouseDialog from './proWarehouseRecord.vue'

import {
  delProductRecord,
  doEntryPro,
  getProductRecord,
  getProWarehouseRecord
} from "@/api/hazardousChemicals/productRecord";
import {delRawRecord} from "@/api/hazardousChemicals/rawRecord";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const codeRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  if(route.query.val){
    const val = JSON.parse(route.query.val)
    if(val){
      data.queryParams.pageNum = val.pageNum;
      data.queryParams.pageSize = val.pageSize;
    }
  }
  getList()
})

const getList = async () => {
  loading.value = true
  const res = await getProductRecord(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  }
  getList()
}
const getProRecord = (val) => {
  dialogRef.value.openDialog(val)
}
const toDetail = (val) => {
  const obj = {
    pageNum: data.queryParams.pageNum,
    pageSize: data.queryParams.pageSize,
    basicId: val.basicId,
    warehouseId: val.warehouseId
  }
  const v = JSON.stringify(obj)
  router.push({ path: "/proDetail", query: { val: v } });
}

defineExpose({
  getList
});

</script>

 src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue

对比新文件
@@ -0,0 +1,183 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="状态：" >
          <el-select
              v-model="data.queryParams.state"
              placeholder="请选择状态"
              style="width: 240px"
          >
            <el-option
                v-for="item in data.typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
            type="primary"
            plain
            @click="back"
        >返回</el-button>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="data.dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="hazmatBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="hazmatBasic.cas" align="center" />
      <el-table-column label="厂家" prop="hazmatBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="hazmatBasic.supplier" align="center" />
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="危险性质" prop="hazmatBasic.hazmatCharacter" align="center" />
      <el-table-column label="最小包装" prop="hazmatBasic.productSn" align="center" width="120">
        <template #default="scope">
          <span>{{scope.row.hazmatBasic.metering}}{{scope.row.hazmatBasic.unit}} / {{scope.row.hazmatBasic.minPackage == 0 ? '瓶' :scope.row.hazmatBasic.minPackage == 1?'袋':scope.row.hazmatBasic.minPackage == 2?'桶 ':scope.row.hazmatBasic.minPackage == 3?'盒':scope.row.hazmatBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="入库时间" prop="updateTime" align="center" />
      <el-table-column label="当前状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state ===0 ? '在库' : scope.row.state === 1 ? '领用归还在库' :scope.row.state === 2? '领用中': scope.row.state === 3 ? '已用完' : scope.row.state === 4 ? '标签作废' : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="在库余量" prop="remaining" align="center" >
        <template #default="scope">
          <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="所在仓库" prop="warehouseName" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" >
        <template #default="scope">
          <el-button link type="primary" >取用记录</el-button>
          <el-button link type="primary" @click="viewQR(scope.row)">查看二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="data.total > 0"
        :total="data.total"
        v-model:page="data.queryParams.pageNum"
        v-model:limit="data.queryParams.pageSize"
        @pagination="getList"
    />
    <viewQRcode ref="dialogRef" @getList="getList"></viewQRcode>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import viewQRcode from './viewQR.vue'
import {ElMessage} from "element-plus";
import {getRawDetail} from "@/api/hazardousChemicals/rawRecord";
import Cookies from "js-cookie";
const route = useRoute()
const router = useRouter();
const dialogRef = ref();
const data = reactive({
  queryParams: {
    basicId: null,
    warehouseId: null,
    state: null,
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  isAdmin: false,
  typeList: [
    {
      id: 0,
      name: '在库'
    },
    {
      id: 1,
      name: '领用归还在库'
    },
    {
      id: 2,
      name: '领用中'
    },
    {
      id: 3,
      name: '已用完'
    },
    {
      id: 4,
      name: '标签作废'
    },

  ]
});
const loading = ref(false);
const backValue = ref({})
onMounted(async ()=>{
  if(route.query.val){
    const val = JSON.parse(route.query.val)
    backValue.value.pageNum =val.pageNum;
    backValue.value.pageSize =val.pageSize;
    data.queryParams.warehouseId =val.warehouseId
    data.queryParams.basicId =val.basicId
  }
  await getList()
})
const getList = async () => {
  loading.value = true
  const res = await getRawDetail(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}
const reset = () => {
  data.queryParams = {
    basicId: data.queryParams.basicId,
    warehouseId: data.queryParams.warehouseId,
    state: null,
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}

const back = () =>{
  const obj = {
    pageNum: backValue.value.pageNum,
    pageSize: backValue.value.pageSize,
    type: 'raw'
  }
  const v = JSON.stringify(obj)
  Cookies.set('type','raw')
  router.push({ path: "/electronicWarehouse", query: { val: v } });
}
const viewQR = (val) => {
  dialogRef.value.openDialog('raw',val)
}

</script>

<style scoped lang="scss">

</style>

 src/views/hazardousChemicals/electronicWarehouse/components/rawTable.vue

对比新文件
@@ -0,0 +1,170 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="品名：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入品名" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号：" >
          <el-input v-model="data.queryParams.productSn" placeholder="请输入产品编号" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="hazmatBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="hazmatBasic.cas" align="center" />
      <el-table-column label="厂家" prop="hazmatBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="hazmatBasic.supplier" align="center" />
      <el-table-column label="危险性质" prop="hazmatBasic.hazmatCharacter" align="center" />
      <el-table-column label="最小包装" align="center" width="120">
        <template #default="scope">
          <span>{{scope.row.hazmatBasic.metering}}{{scope.row.hazmatBasic.unit}} / {{scope.row.hazmatBasic.minPackage == 0 ? '瓶' :scope.row.hazmatBasic.minPackage == 1?'袋':scope.row.hazmatBasic.minPackage == 2?'桶 ':scope.row.hazmatBasic.minPackage == 3?'盒':scope.row.hazmatBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="所在仓库" prop="warehouseName" align="center" >
        <template #default="scope">
          <span>{{scope.row.warehouse.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state === 0 ? '未入库' : '已入库'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button link type="primary"  @click="getProRecord(scope.row)" >动库记录</el-button>
          <el-button link type="primary" @click="toDetail(scope.row)">查看详情</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"
    />
    <raw-warehouse-dialog ref="dialogRef" @getList="getList"></raw-warehouse-dialog>

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
const route = useRoute()
import rawWarehouseDialog from './rawWarehouseRecord.vue'
import {delRawRecord, doEntryRaw, getRawRecord, getRawWarehouseRecord} from "@/api/hazardousChemicals/rawRecord";
import {useRoute, useRouter} from "vue-router";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const codeRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  if(route.query.val){
    const val = JSON.parse(route.query.val)
    if(val){
      data.queryParams.pageNum = val.pageNum;
      data.queryParams.pageSize = val.pageSize;
    }
  }
  getList()
})

const getList = async () => {
  loading.value = true
  const res = await getRawRecord(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delRawRecord(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

const toDetail = (val) => {
  const obj = {
    pageNum: data.queryParams.pageNum,
    pageSize: data.queryParams.pageSize,
    basicId: val.basicId,
    warehouseId: val.warehouseId
  }
  const v = JSON.stringify(obj)
  router.push({ path: "/rawDetail", query: { val: v } });
}

const getProRecord = (val) => {
  dialogRef.value.openDialog(val)
}

defineExpose({
  getList
});

</script>

 src/views/hazardousChemicals/electronicWarehouse/components/rawWarehouseRecord.vue

对比新文件
@@ -0,0 +1,109 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="50%"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-table v-loading="loading" :data="state.dataList" :border="true">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="时间" prop="createTime" align="center" width="120" />
        <el-table-column label="类型" prop="state" align="center">
          <template #default="scope">
            <span>{{scope.row.state ===0 ? '批量导入' : scope.row.state ===1 ? '取用' :scope.row.state ===2 ? '归还': scope.row.state ===3 ? '标签作废' : ''}}</span>

          </template>
        </el-table-column>
        <el-table-column label="数量" prop="num" align="center"  />
        <el-table-column label="操作人" prop="createName" align="center"  />
        <el-table-column label="变动后剩余" prop="remaining" align="center"  />
      </el-table>
      <pagination
          v-show="state.total > 0"
          :total="state.total"
          v-model:page="state.queryParams.pageNum"
          v-model:limit="state.queryParams.pageSize"
          @pagination="getRecord"
      />

    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {ElMessage} from "element-plus";
import {getRawWarehouseRecord} from "@/api/hazardousChemicals/rawRecord";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
const loading = ref(false)
const state = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    warehouseId: '',
    basicId: ''
  },
  total: 0,
  dataList: []

})


const openDialog = async (value) => {
  title.value = value.hazmatBasic.name + ' ' +  '(编号：' + value.hazmatBasic.productSn + ')' + ' '+  '的取用记录'
  state.form = value;
  await getRecord()
  dialogVisible.value = true;
}

const getRecord = async () => {
  loading.value = true
  state.queryParams.basicId = state.form.basicId;
  state.queryParams.warehouseId = state.form.warehouseId;
  const res = await getRawWarehouseRecord(state.queryParams)
  if(res.code == 200){
    state.dataList = res.data.list
    state.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const handleClose = () => {
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.form = {
    id: '',
    name: '',
    remark: '',
  }
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue

对比新文件
@@ -0,0 +1,66 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        width="400px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-card style="max-width: 480px">
        <div style="display: flex;flex-direction: column;align-items: center;font-size: 20px;font-weight: 600">
          <span>{{title}}</span>
          <vue-qr :size="150" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 10px 0"></vue-qr>
          <span>{{state.form.code}}</span>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {ElMessage} from "element-plus";
import VueQr from "vue-qr/src/packages/vue-qr.vue";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);

const state = reactive({
})


const openDialog = async (type,value) => {
  if(type == 'pro'){
    title.value = value.productBasic.name + ' ' + '—' + ' '+ value.productBasic.productSn
  }else {
    title.value = value.hazmatBasic.name + ' ' + '—' + ' '+ value.hazmatBasic.productSn
  }

  state.form = value;
  dialogVisible.value = true;
}
const handleClose = () => {
  dialogVisible.value = false;
  emit("getList")
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/hazardousChemicals/electronicWarehouse/index.vue

@@ -1,9 +1,56 @@
<template>
  <div>电子仓库</div>
  <div>
    <el-tabs v-model="data.activeName" class="demo-tabs" @click="clickTab" style="margin: 10px 10px">
      <el-tab-pane label="成品" name="finishPro" v-if="showFinishPro">
        <pro-table ref="proRef"></pro-table>
      </el-tab-pane>
      <el-tab-pane label="原材料" name="rawMaterial">
        <raw-table ref="rawRef"></raw-table>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import proTable from './components/productTable.vue'
import rawTable from './components/rawTable.vue'
import Cookies from "js-cookie";
const showFinishPro = ref(false)
const proRef = ref()
const rawRef = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  activeName: 'finishPro'
})

onMounted(()=>{
  showFinishPro.value = true;
  if(Cookies.get('type')){
    data.activeName = showFinishPro.value && Cookies.get('type') ==='pro' ? 'finishPro' : 'rawMaterial'
  }else{
    data.activeName = showFinishPro.value ? 'finishPro' : 'rawMaterial'
  }
})
const clickTab = (tab,event) =>{
  console.log('tab',data.activeName)
  if(data.activeName == 'finishPro'){
    if(proRef.value){
      proRef.value.getList()
    }

  }else {
    if(rawRef.value){
      rawRef.value.getList()
    }

  }
}
</script>

<style scoped lang="scss">

 src/views/hazardousChemicals/overdueWarning/index.vue

@@ -97,15 +97,15 @@
})

const getList = async () => {
  // loading.value = true
  // const res = await getWarning(data.queryParams)
  // if(res.code == 200){
  //   data.dataList = res.data.list
  //   data.total = res.data.total
  // }else{
  //   ElMessage.warning(res.message)
  // }
  // loading.value = false
  loading.value = true
  const res = await getWarning(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {

 src/views/hazardousChemicals/traceableQuery/index.vue

@@ -1,9 +1,41 @@
<template>
  <div>溯源查询</div>
  <div>
    <div style="margin-top:20px;margin-left: 20px">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="二维码编号：" >
          <el-input v-model="data.form.code" placeholder="请输入二维码编号进行搜索" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="data.form.code !=''">

      </div>
      <el-empty description="暂无数据" style="margin-top: 10%" v-else></el-empty>
    </div>
  </div>

</template>
<script setup>
import {reactive} from "vue";

const data = reactive({
  queryParams: {
    name: '',
    productSn: ''
  },
  form: {
    code: ''
  },
  dataList: []
});
const getList = () => {

}
</script>

<style scoped lang="scss">

 src/views/hazardousChemicals/warehouseManage/components/addProDialog.vue

对比新文件
@@ -0,0 +1,267 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title+'成品入库'"
        width="600px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="入库成品:" prop="basicName" >
          <el-select
              clearable
              v-model="state.form.basicName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入入库成品"
              remote-show-suffix
              :remote-method="getProBasic"
              style="width: 100%"
              @change="selectValue"
          >
            <el-option
                v-for="item in state.proList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库:" prop="warehouseName" >
          <el-select
              clearable
              v-model="state.form.warehouseName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入所入仓库"
              remote-show-suffix
              :remote-method="getWareHouseList"
              style="width: 100%"
              @change="selectWareValue"
          >
            <el-option
                v-for="item in state.wareHouseList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最小包装数量:" prop="num" >
          <el-input v-model.trim="state.form.num" oninput="value=value.replace(/^\.+|[^\d]/g,'')" placeholder="请输入最小包装数量" @input="changeNum"></el-input>
        </el-form-item>
        <el-form-item label="批号:" prop="batchNo" >
          <el-input v-model.trim="state.form.batchNo" placeholder="请输入批号"></el-input>
        </el-form-item>
        <el-form-item v-if="state.form.basicName && state.form.num" style="margin-left: -75px;margin-top: 30px">
          <span style="font-size: 15px;font-weight: 600">{{state.message}}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {ElMessage} from "element-plus";
import {getWarehouse} from "@/api/hazardousChemicals/warehouse";
import {addProductRecord, editProductRecord, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import {getFinishBasicList} from "@/api/hazardousChemicals/finishedBasicInfo";
import moment from "moment";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);


const state = reactive({
  form: {
    id: '',
    basicId: null,
    basicName:'',
    warehouseName: '',
    warehouseId: null,
    num: null,
    batchNo: ''

  },
  formRules:{
    num: [{ required: true, trigger: "blur", message: '请输入最小包装数量' }],
    warehouseName: [{ required: true, trigger: "blur", message: '请选择入库仓库' }],
    basicName: [{ required: true, trigger: "blur", message: '请选择入库成品' }],
    // batchNo: [{ required: true, trigger: "blur", message: '请输入批号' }]
  },
  proList: [],
  wareHouseList: [],
  message: ''
})


const openDialog = async (type, value) => {
  await getProBasic("")
  await getWareHouseList("")

  title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑':'' ;
  if(type === 'edit' ) {
    state.form = value;
    state.form.basicName = value.productBasic.name
    state.form.warehouseName = value.warehouse.name;
    choosePro.value = value.productBasic
    changeNum()
  }
  dialogVisible.value = true;
}
const getProBasic = async (val) => {
  let param = {}
  if(val != ""){
    param = {
      name: val
    }
  }else {
    param = {
      pageNum: 1,
      pageSize: 10
    }
  }
  const res = await getFinishBasicList(param)
  if(res.code == 200){
    state.proList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}
const getWareHouseList = async (val) => {
  let param = {}
  if(val != ""){
    param = {
      name: val
    }
  }else {
    param = {
      pageNum: 1,
      pageSize: 10
    }
  }
  const res = await getWarehouse(param)
  if(res.code == 200){
    state.wareHouseList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}

const onSubmit = async () => {
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      if(state.form.batchNo == ''){
        state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
      }
      const {id, ...data} = JSON.parse(JSON.stringify(state.form))
      const res = await addProductRecord(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      if(state.form.batchNo == ''){
        state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
      }
      const {...data} = JSON.parse(JSON.stringify(state.form))
      const res = await editProductRecord(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }
  }
}
const choosePro =ref()
const selectValue = (val) => {
  state.proList.forEach(item => {
    if(item.name === val){
      state.form.basicId = item.id
      console.log('item',item)
      choosePro.value = item;
    }
  })
}
const changeNum = () => {
  const minPackageType = choosePro.value.minPackage == 0 ? '瓶' :choosePro.value.minPackage == 1?'袋':choosePro.value.minPackage == 2?'桶 ':choosePro.value.minPackage == 3?'盒':choosePro.value.minPackage == 4?'箱':'其他'
  state.message = `您将入库 { ${choosePro.value.name} }，编号：{ ${choosePro.value.productSn} }，最小包装${choosePro.value.metering}${choosePro.value.unit}，类别：${minPackageType}。 \n 共计：${state.form.num}${minPackageType}`
}
const selectWareValue = (val) => {
  state.wareHouseList.forEach(item => {
    if(item.name === val){
      state.form.warehouseId = item.id
    }
  })
}

const handleClose = () => {
  busRef.value.clearValidate();
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.form = {
    id: '',
    basicId: null,
    basicName:'',
    warehouseName: '',
    warehouseId: null,
    num: null,
    batchNo: ''
  }
  state.proList = [];
  state.wareHouseList = [];
  state.message = '';
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  white-space: pre-line;
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

}
</style>

 src/views/hazardousChemicals/warehouseManage/components/addRawDialog.vue

对比新文件
@@ -0,0 +1,272 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title+'危化品入库'"
        width="600px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="入库危化品:" prop="basicName" >
          <el-select
              clearable
              v-model="state.form.basicName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入入库危化品"
              remote-show-suffix
              :remote-method="getRawBasicList"
              style="width: 100%"
              @change="selectValue"
          >
            <el-option
                v-for="item in state.rawList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库:" prop="warehouseName" >
          <el-select
              clearable
              v-model="state.form.warehouseName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入所入仓库"
              remote-show-suffix
              :remote-method="getWareHouseList"
              style="width: 100%"
              @change="selectWareValue"
          >
            <el-option
                v-for="item in state.wareHouseList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最小包装数量:" prop="num" >
          <el-input v-model.trim="state.form.num" oninput="value=value.replace(/^\.+|[^\d]/g,'')" placeholder="请输入最小包装数量" @input="changeNum"></el-input>
        </el-form-item>
        <el-form-item label="批号:" prop="batchNo" >
          <el-input v-model.trim="state.form.batchNo" placeholder="请输入批号"></el-input>
        </el-form-item>
<!--        <el-form-item label="条码前缀:" prop="codePrex" >-->
<!--          <el-input v-model.trim="state.form.codePrex" placeholder="请输入条码前缀"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item v-if="state.form.basicName && state.form.num" style="margin-left: -75px;margin-top: 30px">
          <span style="font-size: 15px;font-weight: 600">{{state.message}}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {ElMessage} from "element-plus";
import {addWarehouse, checkName, editWarehouse, getWarehouse} from "@/api/hazardousChemicals/warehouse";
import {verifyPhone} from "@/utils/validate";
import {checkBasicName, getBasicList} from "@/api/hazardousChemicals/basicInfo";
import {addProductRecord, editProductRecord, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import {getFinishBasicList} from "@/api/hazardousChemicals/finishedBasicInfo";
import moment from "moment";
import {addRawRecord, editRawRecord, getRawRecord} from "@/api/hazardousChemicals/rawRecord";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);


const state = reactive({
  form: {
    id: '',
    basicId: null,
    basicName:'',
    warehouseName: '',
    warehouseId: null,
    num: null,
    batchNo: ''

  },
  formRules:{
    num: [{ required: true, trigger: "blur", message: '请输入最小包装数量' }],
    warehouseName: [{ required: true, trigger: "blur", message: '请选择入库仓库' }],
    basicName: [{ required: true, trigger: "blur", message: '请选择入库成品' }],
    // batchNo: [{ required: true, trigger: "blur", message: '请输入批号' }]
  },
  rawList: [],
  wareHouseList: [],
  message: ''
})


const openDialog = async (type, value) => {
  await getRawBasicList("")
  await getWareHouseList("")
  title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑':'' ;
  if(type === 'edit' ) {
    state.form = value;
    state.form.basicName = value.hazmatBasic.name
    state.form.warehouseName = value.warehouse.name;
    choosePro.value = value.hazmatBasic
    changeNum()
  }
  dialogVisible.value = true;
}
const getRawBasicList = async (val) => {
  let param = {}
  if(val != ""){
    param = {
      name: val
    }
  }else {
    param = {
      pageNum: 1,
      pageSize: 10
    }
  }
  const res = await getBasicList(param)
  if(res.code == 200){
    state.rawList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}
const getWareHouseList = async (val) => {
  let param = {}
  if(val != ""){
    param = {
      name: val
    }
  }else {
    param = {
      pageNum: 1,
      pageSize: 10
    }
  }
  const res = await getWarehouse(param)
  if(res.code == 200){
    state.wareHouseList = res.data.list
  }else{
    ElMessage.warning(res.message)
  }
}

const onSubmit = async () => {
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      if(state.form.batchNo == ''){
        state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
      }
      const {id, ...data} = JSON.parse(JSON.stringify(state.form))
      const res = await addRawRecord(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      if(state.form.batchNo == ''){
        state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
      }
      const {...data} = JSON.parse(JSON.stringify(state.form))
      const res = await editRawRecord(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }
  }
}
const choosePro =ref()
const selectValue = (val) => {
  state.rawList.forEach(item => {
    if(item.name === val){
      state.form.basicId = item.id
      console.log('item',item)
      choosePro.value = item;
    }
  })
}
const changeNum = () => {
  const minPackageType = choosePro.value.minPackage == 0 ? '瓶' :choosePro.value.minPackage == 1?'袋':choosePro.value.minPackage == 2?'桶 ':choosePro.value.minPackage == 3?'盒':choosePro.value.minPackage == 4?'箱':'其他'
  state.message = `您将入库 { ${choosePro.value.name} }，编号：{ ${choosePro.value.productSn} }，最小包装${choosePro.value.metering}${choosePro.value.unit}，类别：${minPackageType}。 \n 共计：${state.form.num}${minPackageType}`
}
const selectWareValue = (val) => {
  state.wareHouseList.forEach(item => {
    if(item.name === val){
      state.form.warehouseId = item.id
    }
  })
}

const handleClose = () => {
  busRef.value.clearValidate();
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.form = {
    id: '',
    basicId: null,
    basicName:'',
    warehouseName: '',
    warehouseId: null,
    num: null,
    batchNo: ''
  }
  state.rawList = [];
  state.wareHouseList = [];
  state.message = '';
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  white-space: pre-line;
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

}
</style>

 src/views/hazardousChemicals/warehouseManage/components/printCode.vue

对比新文件
@@ -0,0 +1,189 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title == 'pro' ? '成品二维码打印' : '危化品二维码打印'"
        width="600px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-table v-loading="state.loading" :data="state.dataList" :border="true" :show-header="false" height="550"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"  align="center" />
        <el-table-column align="center" >
          <template #default="scope">
            <div :id="scope.row.code">
              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                <div style="font-size:14px;margin-top:10px;">{{scope.row.name}}—{{scope.row.productSn}}</div>
                <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="scope.row.code" style="margin-top:10px;"></vue-qr>
                <div style="font-size:10px;margin-top:10px;">{{scope.row.code}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="state.total > 0"
          :total="state.total"
          v-model:page="state.queryParams.pageNum"
          v-model:limit="state.queryParams.pageSize"
          @pagination="getList"
      />
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="printEvent" size="default" v-preReClick>打印</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import {ElMessage} from "element-plus";
import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse";
import {verifyPhone} from "@/utils/validate";
import {checkBasicName} from "@/api/hazardousChemicals/basicInfo";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);

const state = reactive({
  loading: false,
  dataList: [],
  total: 0,
  queryParams:{
    pageNum: 1,
    pageSize: 5
  },
  chooseList: []

})

const originalList = ref([])
const openDialog = async (type,value) => {
  title.value = type;
  if(type == 'pro'){
    for(let i=value.startCode ; i<=value.endCode;i++){
      const obj = {
        name: value.productBasic.name,
        productSn: value.productBasic.productSn,
        code: value.codePrex+(i+"").padStart(4,'0')
      }
      state.dataList.push(obj)
    }
  }else {

    for(let i=value.startCode ; i<=value.endCode;i++){
      const obj = {
        name: value.hazmatBasic.name,
        productSn: value.hazmatBasic.productSn,
        code: value.codePrex+(i+"").padStart(4,'0')
      }
      state.dataList.push(obj)
    }
  }
  state.total = state.dataList.length
  originalList.value = state.dataList
  getList()
  console.log('state.dataList',state.dataList)
  dialogVisible.value = true;
}
const getRowKey = (row) => {
  return row.id
}

const onSubmit = async () => {

}
const handleSelectionChange = (val) => {
  // state.form.studentIds = val.map(item => item.id)
  state.chooseList = val
  console.log("选中的行", val)
}

const handleClose = () => {
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.dataList = [];
  state.queryParams = {
    pageNum: 1,
    pageSize: 5
  }
  state.total = 0
  state.chooseList = []
}
const getList = () => {
  state.dataList = originalList.value.slice((state.queryParams.pageNum-1) * state.queryParams.pageSize, state.queryParams.pageNum * state.queryParams.pageSize)
}

const printEvent=() => {
  let data = []
  if(state.chooseList && state.chooseList.length>0){
    data = state.chooseList
  }else {
    data = state.dataList
  }
  let qrCodes=''
  for(let index in data){
    console.log(index,'index')
    qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
  }
  const printContent=document.createElement('div')
  printContent.innerHTML=qrCodes
  //创建一个新的隐藏的iframe元素
  const printFrame =document.createElement('iframe')
  printFrame.style.display='none'
  document.body.appendChild(printFrame)

  const printDocument=printFrame.contentWindow.document
  printDocument.open()
  printDocument.write(`
  <html>
  <head>
    <title>Print</title>
    <style>
      @media print {
        .page-break { page-break-after:always;} /* 定义分页符格式*/
        .centered-content { text-align:center;} /* 居中对齐内容*/
        @page { size:50mm 40mm;margin:0mm; }
      }
    </style>
  </head>
  <body style='margin:0;padding:0;'>${printContent.innerHTML}</body>
  </html>
  `)
  printDocument.close()
  //在打印窗口中调用打印功能
  printFrame.contentWindow.print()
  //移除隐藏的iframe元素
  document.body.removeChild(printFrame)
  // handleClose()
}


defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/hazardousChemicals/warehouseManage/components/productTable.vue

对比新文件
@@ -0,0 +1,186 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item label="品名：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入品名" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号：" >
          <el-input v-model="data.queryParams.productSn" placeholder="请输入产品编号" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="productBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="productBasic.cas" align="center" />
      <el-table-column label="厂家" prop="productBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="productBasic.supplier" align="center" />
      <el-table-column label="危险性质" prop="productBasic.productCharacter" align="center" />
      <el-table-column label="最小包装" prop="productBasic.productSn" align="center" width="120">
        <template #default="scope">
          <span>{{scope.row.productBasic.metering}}{{scope.row.productBasic.unit}} / {{scope.row.productBasic.minPackage == 0 ? '瓶' :scope.row.productBasic.minPackage == 1?'袋':scope.row.productBasic.minPackage == 2?'桶 ':scope.row.productBasic.minPackage == 3?'盒':scope.row.productBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="所在仓库" prop="warehouseName" align="center" >
        <template #default="scope">
          <span>{{scope.row.warehouse.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state === 0 ? '未入库' : '已入库'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button link type="primary" v-if="scope.row.state == 0" @click="doEntry(scope.row)">入库</el-button>
          <el-button link type="primary" v-if="scope.row.state == 1" @click="printCode(scope.row)">打印二维码</el-button>
          <el-button link type="primary" @click="openDialog('edit',scope.row)" v-if="scope.row.state == 0">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.state == 0">删除</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"
    />
    <pro-dialog ref="dialogRef" @getList=getList></pro-dialog>
    <printcode ref="codeRef" @getList=getList></printcode>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import proDialog from "./addProDialog.vue";
import printcode from './printCode.vue'
import {delWarehouse, getWarehouse} from "@/api/hazardousChemicals/warehouse";
import {
  delProductRecord,
  doEntryPro,
  getProductRecord,
  getProWarehouseRecord
} from "@/api/hazardousChemicals/productRecord";
import {delRawRecord} from "@/api/hazardousChemicals/rawRecord";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const codeRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  getList()
})

const getList = async () => {
  loading.value = true
  const res = await getProductRecord(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delProductRecord(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const doEntry = (val) => {
  ElMessageBox.confirm(
      '确定入库该成品？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await doEntryPro(val.id)
        if(res.code == 200){
          ElMessage.success('入库成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const printCode = (val) => {
  console.log("val",val)
  codeRef.value.openDialog('pro',val);

}
defineExpose({
  getList
});


</script>

 src/views/hazardousChemicals/warehouseManage/components/rawTable.vue

对比新文件
@@ -0,0 +1,183 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item label="品名：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入品名" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号：" >
          <el-input v-model="data.queryParams.productSn" placeholder="请输入产品编号" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="品名" prop="hazmatBasic.name" align="center"  />
      <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
      <el-table-column label="CAS号" prop="hazmatBasic.cas" align="center" />
      <el-table-column label="厂家" prop="hazmatBasic.manufacturer" align="center" />
      <el-table-column label="供应商" prop="hazmatBasic.supplier" align="center" />
      <el-table-column label="危险性质" prop="hazmatBasic.hazmatCharacter" align="center" />
      <el-table-column label="最小包装" align="center" width="120">
        <template #default="scope">
          <span>
            {{scope.row.hazmatBasic.metering}}{{scope.row.hazmatBasic.unit}} / {{scope.row.hazmatBasic.minPackage == 0 ? '瓶' :scope.row.hazmatBasic.minPackage == 1?'袋':scope.row.hazmatBasic.minPackage == 2?'桶 ':scope.row.hazmatBasic.minPackage == 3?'盒':scope.row.hazmatBasic.minPackage == 4?'箱':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="批号" prop="batchNo" align="center" width="120" />
      <el-table-column label="所在仓库" prop="warehouseName" align="center" >
        <template #default="scope">
          <span>{{scope.row.warehouse.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template #default="scope">
          <span>{{scope.row.state === 0 ? '未入库' : '已入库'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button link type="primary" v-if="scope.row.state == 0" @click="doEntry(scope.row)">入库</el-button>
          <el-button link type="primary" v-if="scope.row.state == 1" @click="printCode(scope.row)">打印二维码</el-button>
          <el-button link type="primary" @click="openDialog('edit',scope.row)" v-if="scope.row.state == 0">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.state == 0">删除</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"
    />

    <raw-dialog ref="dialogRef" @getList=getList></raw-dialog>
    <printcode ref="codeRef" @getList=getList></printcode>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import rawDialog from "./addRawDialog.vue";
import printcode from './printCode.vue'
import {delRawRecord, doEntryRaw, getRawRecord, getRawWarehouseRecord} from "@/api/hazardousChemicals/rawRecord";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const codeRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);
const classHourRef = ref();
onMounted(()=>{
  getList()
})

const getList = async () => {
  loading.value = true
  const res = await getRawRecord(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    productSn: ''
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delRawRecord(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

const doEntry = (val) => {
  ElMessageBox.confirm(
      '确定入库该危化品？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await doEntryRaw(val.id)
        if(res.code == 200){
          ElMessage.success('入库成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

const printCode = (val) => {
  console.log("val",val)
  codeRef.value.openDialog('raw',val);

}
defineExpose({
  getList
});

</script>

 src/views/hazardousChemicals/warehouseManage/index.vue

@@ -1,9 +1,45 @@
<template>
  <div>入库管理</div>
  <div>
    <el-tabs v-model="data.activeName" class="demo-tabs" @click="clickTab" style="margin: 10px 10px">
      <el-tab-pane label="成品" name="finishPro" v-if="showFinishPro">
        <pro-table ref="proRef"></pro-table>
      </el-tab-pane>
      <el-tab-pane label="原材料" name="rawMaterial">
        <raw-table ref="rawRef"></raw-table>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import proTable from './components/productTable.vue'
import rawTable from './components/rawTable.vue'
const showFinishPro = ref(false)
const proRef = ref()
const rawRef = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  activeName: 'finishPro'
})

onMounted(()=>{
  showFinishPro.value = true;
  data.activeName = showFinishPro.value ? 'finishPro' : 'rawMaterial'
})
const clickTab = (tab,event) =>{
  console.log('tab',data.activeName)
  if(data.activeName == 'finishPro'){
    proRef.value.getList()
  }else {
    rawRef.value.getList()
  }
}
</script>

<style scoped lang="scss">

 src/views/homePage.vue

@@ -58,7 +58,7 @@
                    <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
                  </el-input>
                  <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                  </div>
                </div>
              </el-form-item>
@@ -207,6 +207,7 @@
const openRegist = ()=>{
  regRef.value.dialogVisible = true
}
const imageBase64 = ref('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')

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect;
@@ -288,11 +289,13 @@

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.data.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.data.image
    // captchaEnabled.value = res.data.captchaEnabled
    // debugger
    // if (captchaEnabled.value) {
      codeUrl.value = "data:image/*;base64," + res.data.image
      console.log('res',codeUrl.value)
      loginForm.value.uuid = res.data.uuid
    }
    // }
  });
}