zhouwx
3 天以前 1ea0d85b0fe2e7e4427fd484a9342d964c831b3d
src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue
@@ -37,14 +37,14 @@
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="data.dataList" :border="true">
    <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle">
      <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="code" 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">
@@ -54,19 +54,23 @@
      <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>
          <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>
          <span>{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在仓库" prop="warehouseName" align="center" />
      <el-table-column label="存储柜" prop="cupboardName" 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" v-if="scope.row.state ===0 || scope.row.state === 1" @click="editNum(scope.row)">零头修改</el-button>
          <el-button link type="primary" @click="viewFlow(scope.row)">取用记录</el-button>
          <el-button link type="danger" v-if="scope.row.state === 0 || scope.row.state === 1|| scope.row.state === 2" @click="disCard(scope.row)">标签作废</el-button>
          <el-button link type="primary" @click="viewQR(scope.row)">查看二维码</el-button>
        </template>
      </el-table-column>
@@ -79,20 +83,53 @@
        @pagination="getList"
    />
    <viewQRcode ref="dialogRef" @getList="getList"></viewQRcode>
    <el-dialog
        v-model="dialogVisible"
        width="650px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <flow-deail ref="flowRef"></flow-deail>
    </el-dialog>
    <el-dialog
        v-model="editNumDialog"
        width="650px"
        title="余量修改"
        :before-close="handleCloseNum"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form :model="data.form" size="default" ref="busRef" :rules="data.formRules" label-width="150px" >
        <el-form-item label="在库余量:" prop="remaining" >
          <el-input v-model.trim="data.form.remaining" @input="requiredDurationEventMetering($event)"  placeholder="请输入余量"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleCloseNum" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmitNum" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {nextTick, onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import flowDeail from '../../../components/flowDetail.vue'
import {disCardPro, getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import viewQRcode from './viewQR.vue'
import {ElMessage} from "element-plus";
import {getRawDetail} from "@/api/hazardousChemicals/rawRecord";
import {ElMessage, ElMessageBox} from "element-plus";
import {changeRawRemaining, disCardRaw, getRawDetail} from "@/api/hazardousChemicals/rawRecord";
import Cookies from "js-cookie";
const route = useRoute()
const router = useRouter();
const dialogRef = ref();
const dialogVisible = ref(false)
const flowRef = ref();
const editNumDialog = ref(false)
const data = reactive({
  queryParams: {
    basicId: null,
@@ -126,7 +163,14 @@
      name: '标签作废'
    },
  ]
  ],
  form: {
    id: '',
    remaining: ''
  },
  formRules: {
    remaining: [{ required: true, trigger: "blur", message: '请输入余量' }],
  }
});
const loading = ref(false);
const backValue = ref({})
@@ -175,7 +219,112 @@
const viewQR = (val) => {
  dialogRef.value.openDialog('raw',val)
}
const disCard = async (val) => {
  ElMessageBox.confirm(
      '确定作废该标签?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await disCardRaw(val.id)
        if(res.code == 200){
          ElMessage.success('操作成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const viewFlow = (val) => {
  dialogVisible.value = true
  nextTick(() => {
    flowRef.value.openDialog('raw',val)
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
const cellStyle = ({ row, column,rowIndex, columnIndex }) => {
  let arr = []
  if (data.dataList !== null) {
    data.dataList.filter((item, index) => {
      arr.push(item.basicId)
    })
  }
  for (let i = 0; i <= arr.length; i++) {
    if (arr[i] == row.basicId) {
      if(row.state === 3 && row.remaining < row.hazmatBasic.metering){
        if (columnIndex === 11 || columnIndex === 10){
          return { color:' red' }
        }
      }else if(row.remaining < row.hazmatBasic.metering){
        if (columnIndex === 11 || columnIndex === 10){
          return { color: '#ff9900' }
        }
      }
    }
  }
};
const chooseItem = ref()
const editNum = (val) => {
  chooseItem.value = val
  data.form.id = val.id
  data.form.remaining = val.remaining
  editNumDialog.value = true
}
const handleCloseNum = () => {
  data.form = {
    id: '',
    remaining: ''
  }
  chooseItem.value = {}
  editNumDialog.value = false
}
const onSubmitNum = () => {
  if(chooseItem.value.remaining < data.form.remaining){
    ElMessage.warning('修改值不能大于等于在库余量')
    return;
  }
  ElMessageBox.confirm(
      '确定修改此条数据的余量?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await changeRawRemaining(data.form)
        if(res.code == 200){
          ElMessage.success('数据修改成功')
          editNumDialog.value = false;
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const requiredDurationEventMetering =(value) =>{
  let dat =
      ("" + value) // 第一步:转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
          .replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
  data.form.remaining = dat
}
</script>
<style scoped lang="scss">