<template>
<!-- 入库表单 -->
<el-dialog v-model="showRK">
<div>
<p>装备ID:<el-input v-model="selectDatainfor
.id" disabled></el-input></p>
<p>二维码/条形码:<el-input v-model="selectDatainfor
.qrcode" disabled></el-input></p>
<p>装备名称<el-input v-model="selectDatainfor
.name" disabled></el-input></p>
<p>品牌<el-input v-model="selectDatainfor
.brand" disabled></el-input></p>
<p>规格型号<el-input v-model="selectDatainfor
.model" disabled></el-input></p>
<p>装备识别码<el-input v-model="selectDatainfor
.shibiema" disabled></el-input></p>
<p>所属单位<el-input v-model="selectDatainfor
.unit" disabled></el-input></p>
<p>库存数量<el-input v-model="selectDatainfor
.kcnum" disabled></el-input></p>
<p>入库数量<el-input-number v-model="selectDatainfor
.rukunum" :min="1" :max="10000" ></el-input-number></p>
<p>登记时间<el-input v-model="selectDatainfor
.datetime" disabled></el-input></p>
<p>登记账号<el-input v-model="selectDatainfor
.zhanghao" disabled></el-input></p>
<p>备注 <el-input v-model="selectDatainfor
.beizhu" disabled></el-input></p>
<p>经办人<el-input v-model="selectDatainfor
.jingbanren" placeholder="请输入经办人" ></el-input></p>
<el-button type="primary" @click="xinzeng">新增成功</el-button>
</div>
</el-dialog>
<!--出库表单 -->
<el-dialog v-model="showCK">
<div>
<p>装备ID:<el-input v-model="selectDatainfor
.id" disabled></el-input></p>
<p>二维码/条形码:<el-input v-model="selectDatainfor
.qrcode" disabled></el-input></p>
<p>装备名称<el-input v-model="selectDatainfor
.name" disabled></el-input></p>
<p>品牌<el-input v-model="selectDatainfor
.brand" disabled></el-input></p>
<p>规格型号<el-input v-model="selectDatainfor
.model" disabled></el-input></p>
<p>装备识别码<el-input v-model="selectDatainfor
.shibiema" disabled></el-input></p>
<p>所属单位<el-input v-model="selectDatainfor
.unit" disabled></el-input></p>
<p>库存数量<el-input v-model="selectDatainfor
.kcnum" disabled></el-input></p>
<p>出库数量<el-input-number v-model="selectDatainfor
.cuku" :min="1" :max="10000" ></el-input-number></p>
<p>登记时间<el-input v-model="selectDatainfor
.datetime" disabled></el-input></p>
<p>登记账号<el-input v-model="selectDatainfor
.zhanghao" disabled></el-input></p>
<p>备注 <el-input v-model="selectDatainfor
.beizhu" disabled></el-input></p>
<p>经办人<el-input v-model="selectDatainfor
.jingbanren" placeholder="请输入经办人" ></el-input></p>
<el-button type="primary" @click="chuku">出库成功</el-button>
</div>
</el-dialog>
<el-dialog v-model="histortshowData" title="装备出库历史信息">
<el-timeline style="max-with: 600px">
<el-timeline-item v-for="item in datahistory" :key="item
.datetime" :timestamp="item
.datetime">
{{ "账号:"+item
.account+"于"+item
.datetime+"入库了数量:"+item
.num}}
</el-timeline-item>
</el-timeline>
</el-dialog>
<div class="maindata">
<p class="selectdata"> <el-input v-model="zbinfor
.zbname" style="width: 240px" placeholder="请输入装备名称"></el-input>
<el-button @click="selectDatas" color="rgb(26, 103, 236)">查询</el-button>
<el-button round color="blue" @click="chuku">出库管理</el-button>
</p>
<el-table
:data="zbdatainfor" style="width: 100%" stripe @row-click="getseIectrows" highlight-current-row >
<el-table-column prop="id" label="装备ID" width="150" />
<el-table-column prop="qrcode" label="标签码" width="150" />
<el-table-column prop="name" label="装备名称" width="150" />
<el-table-column prop="brand" label="品牌" width="150" />
<el-table-column prop="model" label="规格型号" width="150" />
<el-table-column prop="shibiema" label="装备识别码" width="150" />
<el-table-column prop="unit" label="隶属单位" width="150" />
<el-table-column prop="kcnum" label="库存数量" width="150" />
<el-table-column prop="datetime" label="入库时间" width="150" />
<el-table-column prop="
zhanghao" label="入库账号" width="150" />
<el-table-column prop="beizhu" label="备注" width="150" />
<el-table-column prop="ruku" label="操作选项" width="320" >
<div>
<el-button round color="green" @click="showRK=true">入库登记</el-button>
<el-button round color="red" @click="showCK=true">出库申请</el-button>
<el-button round @click="showCKSP">历史详情</el-button>
</div>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref,reactive} from 'vue';
import { historyCKData, historyRKData, selectData } from '
../Util/apirequest/test
.ts';
import { ElMessage } from 'element-plus';
import { NewRKData } from '
../Util/apirequest/test
.ts';
import { NewCKData } from '
../Util/apirequest/test
.ts';
const zbinfor = reactive({
zbname: '',
})
interface zbItem {
id: string
qrcode:string
name:string
brand:string
model:string
shibiema:string
unit:string
kcnum:string
cuku:string
datetime:string
uku:string
zhanghao:string
beizhu:string
ruku:string
}
const zbdatainfor = ref<Array<zbItem>>([]);
const showRK = ref(false);
const showCK = ref(false);
const histortshowData = ref(false);
const getseIectrows=(row:any)=>{
selectDatainfor
.id=row
.id;
selectDatainfor
.qrcode=row
.qrcode;
selectDatainfor
.name=row
.name;
selectDatainfor
.brand=row
.brand;
selectDatainfor
.model=row
.model;
selectDatainfor
.shibiema=row
.shibiema;
selectDatainfor
.unit=row
.unit;
selectDatainfor
.kcnum=row
.kcnum; //正则表达式 匹配单引号和双引号
selectDatainfor
.cuku=row
.cuku;
selectDatainfor
.datetime=row
.datetime;
selectDatainfor
.zhanghao=row
.zhanghao;
selectDatainfor
.beizhu=row
.beizhu;
selectDatainfor
.ruku=row
.ruku;
selectDatainfor
.rukunum=row
.rukunum;
selectDatainfor
.jingbanren=row
.jingbanren;
selectDatainfor
.jingbanrentuxiang=row
.jingbanrentuxiang
}
const selectDatainfor = reactive({
id:'',
qrcode:'',
name:'',
brand:'',
model:'',
shibiema:'',
unit:'',
kcnum:'',
cuku:'1',
datetime:'',
zhanghao:'',
beizhu:'',
ruku:'',
rukunum:'',
jingbanren:'',
jingbanrentuxiang:'',
})
const datahistory = ref<Array<histotryColumdata>>([]);
const datahistorys = ref<Array<histotryColumdata>>([]);
interface histotryColumdata{
account: string,
datetime:string,
num:string
}
function selectDatas() {
selectData(zbinfor
.zbname)
.then((res) => {
if (res == null) {
ElMessage
.error('未查询到相关数据')
} else {
console
.log(res)
zbdatainfor
.value = res
.replace(/['"]/g, '')
.split('#')
.filter((item) => item
.trim() !== '')
.map((d2: string) => {
const [
id,
qrcode,
name,
brand,
model,
shibiema,
unit,
kcnum,
datetime,
zhanghao,
beizhu,
] = d2
.split(',')
return {
id,
qrcode,
name,
brand,
model,
shibiema,
unit,
kcnum,
datetime,
zhanghao,
beizhu,
}
})
}
})
}
function showCKSP()
{
historyRKData(selectDatainfor
.id)
.then((res:any) => {
datahistory
.value = res
.replace(/['"]/g,'')
.split('*')
.filter(item =>item
.trim() !=='')
.map((d2: string) => {
const[account,datetime,num] =d2
.split(',');
return{account,datetime,num
}
})
getHistoryCKData();
})
}
function getHistoryCKData()
{
historyCKData(selectDatainfor
.id)
.then((res:any) => {
datahistorys
.value=res
.split('*');
histortshowData
.value=true;
})
};
interface zbdata {
id: string
qrcode:string
name:string
brand:string
model:string
shibiema:string
unit:string
kcnum:string
ruku:string
datetime:string
cuku:string
zhanghao:string
beizhu:string
}
const tableData:zbdata[] = [
]
function xinzeng (){
NewRKData(selectDatainfor)
.then((res:any) =>{
if (!selectDatainfor
.jingbanren || selectDatainfor
.jingbanren
.trim() === "") {
ElMessage
.error("经办人不能为空，请输入姓名");
return;
}
else if(res == "true")
{
ElMessage
.success("装备入库修改成功！");
// console
.log(res);
showRK
.value=false;
setTimeout(() => {
window
.location
.reload();
}, 500);
}
else{
ElMessage
.warning("入库未成功，请检查数据");
}
});
}
function chuku (){
NewCKData(selectDatainfor)
.then((res:any) =>{
if (!selectDatainfor
.jingbanren || selectDatainfor
.jingbanren
.trim() === "") {
ElMessage
.error("经办人不能为空，请输入姓名");
return;
}
else if(res == "true")
{
ElMessage
.success("装备出库修改成功！");
// console
.log(res);
showCK
.value=false;
setTimeout(() => {
window
.location
.reload();
}, 500);
}
else{
ElMessage
.warning("出库未成功，请检查数据");
}
});
}
// const captureImage =() => {
// if (!canvasRef
.value ||!videoRef
.value) return;
// const context = canvasRef
.value
.getContext('2d');
// context
.drawImage(videoRef
.value,0,0, videoWidth
.value,videoHeight
.value);
// captureImage
.value = canvasRef
.value
.toDataURL('image/png')
// }
</script>
<style>
.maindata{
background-color:#ffffff;
position: fixed;
overflow: auto;
left:13%;
top:15%;
right:3%;
bottom:5%
}
.maindata{
background-color:#ffffff;
position: fixed;
overflow: auto;
left:13%;
top:15%;
right:3%;
bottom:5%
}
.el-table__body tr
.current-row>td{
background-color: #48f8de !important;
color: #fff;
}
</style>
为什么搜索功能没有实现表格无法显示
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
