531 lines
19 KiB
Vue
531 lines
19 KiB
Vue
<!-- eslint-disable no-empty -->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="3">
|
|
<el-input v-model="query.conTypeId" size="small" clearable placeholder="请输入类型id" style="width: 100%;"
|
|
class="filter-item" @keyup.enter.native="getTableData" />
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-input v-model="query.conTypeName" size="small" clearable placeholder="请输入类型名称" style="width: 100%;"
|
|
class="filter-item" @keyup.enter.native="getTableData" />
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-input v-model="query.conCode" size="small" clearable placeholder="请输入耗材代码" style="width: 100%;"
|
|
class="filter-item" @keyup.enter.native="getTableData" />
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-input v-model="query.conName" size="small" clearable placeholder="请输入耗材名称" style="width: 100%;"
|
|
class="filter-item" @keyup.enter.native="getTableData" />
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-select v-model="query.status" placeholder="请选择商品规格" style="width: 100%;">
|
|
<el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
|
<el-button @click="resetHandle">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-row>
|
|
<el-col>
|
|
<el-button type="primary" icon="el-icon-plus" @click="clickdialogframe('add')">添加</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="head-container" id="table_drag">
|
|
<el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
|
|
<el-table-column prop="id" label="ID" width="50px" />
|
|
<el-table-column label="耗材名称" prop="conName" />
|
|
<el-table-column label="耗材代码" prop="conCode" />
|
|
<!-- <el-table-column label="类型id" prop="conTypeId" /> -->
|
|
<el-table-column label="分类名称" prop="conTypeName" />
|
|
<el-table-column label="单位" prop="conUnit" />
|
|
<el-table-column label="创建时间" prop="createTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="最近入库量" prop="lasterInStock" /> -->
|
|
<el-table-column label="库存数量" prop="stockNumber" />
|
|
<el-table-column label="预警值" prop="conWarning" />
|
|
<!-- <el-table-column label="单位耗材值" prop="surplusStock" /> -->
|
|
<!-- <el-table-column label="排序" prop="sort" sortable /> -->
|
|
<el-table-column label="更新时间" prop="updateTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template v-slot="scope">
|
|
<el-button type="text" @click="clicksee(scope.row)">耗材记录</el-button>
|
|
<!-- <el-button type="text" icon="el-icon-rank">排序</el-button> -->
|
|
<!-- <el-button type="text" @click="clickdialogfadd(scope.row)"
|
|
style="margin-left: 10px !important;">入库</el-button> -->
|
|
<!-- <el-button type="text" icon="el-icon-edit" @click="clickdialogframe('edit', scope.row)">编辑</el-button> -->
|
|
<!-- <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
|
|
<el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
|
|
slot="reference">删除</el-button>
|
|
</el-popconfirm> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
|
layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChange" />
|
|
</div>
|
|
<!-- 耗材入库 -->
|
|
<el-dialog title="耗材入库" :visible.sync="libraryshow">
|
|
<el-form :inline="true" ref="reflibrary" :model="libraryshowdata" :rules="ruleslibrary" class="demo-form-inline">
|
|
<el-form-item label="耗材入库数量" prop="stockNumber">
|
|
<el-input v-model.number="libraryshowdata.stockNumber" type="number" placeholder="请输入单位"></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="display: flex;justify-content: flex-end;">
|
|
<el-button @click="libraryshow = false">取 消</el-button>
|
|
<el-button type="primary" @click="clickdialoglibraryshow('reflibrary')">确 定</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<!-- 修改和增加 -->
|
|
<el-dialog :title="dialogtitle" :visible.sync="dialogshow" width="70%">
|
|
<el-form :inline="true" ref="refruleForm" :model="ruleForm" :rules="rules" class="demo-form-inline">
|
|
<el-form-item label="单位" prop="conUnit" v-if="dialogtitle == '添加'">
|
|
<el-input v-model="ruleForm.conUnit" placeholder="请输入单位"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="耗材类型" prop="conNames" v-if="dialogtitle == '添加'">
|
|
<el-input v-model="ruleForm.conNames" placeholder="请输耗材信息名称" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="dialogtitle == '添加'">
|
|
<el-button type="primary" @click="typedialogshow = true">去选择</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="耗材信息名称" prop="conName">
|
|
<el-input v-model="ruleForm.conName" placeholder="请输入耗材信息名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="耗材价格" prop="price">
|
|
<el-input v-model="ruleForm.price" placeholder="请输入耗材价格"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="单位耗材值" prop="surplusStock">
|
|
<el-input v-model="ruleForm.surplusStock" placeholder="请输入单位耗材值"></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item style="display: flex;justify-content: flex-end;">
|
|
<el-button @click="dialogshow = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm('refruleForm')">确 定</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<el-dialog title="选择类型" :visible.sync="typedialogshow">
|
|
<div class="head-container">
|
|
<el-input v-model="querytypedialogshowquery.conTypeName" size="small" clearable placeholder="请输入耗材类型名称"
|
|
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
|
|
<el-input v-model="querytypedialogshowquery.conTypeCode" size="small" clearable placeholder="请输入耗材类型代码"
|
|
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
|
|
<el-select v-model="querytypedialogshowquery.status" placeholder="请选择商品规格" style="width: 100%;">
|
|
<el-option :label="item.label" :value="item.value" v-for="item in typeEnums" :key="item.label" />
|
|
</el-select>
|
|
<div style="margin-top: 10px;">
|
|
<el-button type="primary" @click="getTableDatatype">查询</el-button>
|
|
<el-button @click="resetHandletype">重置</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
<el-table ref="table" :data="tableDatatype.data" v-loading="tableDatatype.loading" row-key="id">
|
|
<el-table-column label="耗材类型名称" prop="conTypeName" />
|
|
<el-table-column label="耗材类型代码" prop="conTypeCode" />
|
|
<el-table-column label="店铺ID" prop="shopId" />
|
|
<el-table-column label="状态" prop="status">
|
|
<template v-slot="scope">
|
|
<el-tag type="primary" v-if="scope.row.status == '1'">正常</el-tag>
|
|
<el-tag type="danger" v-if="scope.row.status == '0'">禁用</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="" width="200">
|
|
<template v-slot="scope">
|
|
<el-button @click="tableDatatypetable(scope.row)">确定</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="head-container">
|
|
<el-pagination :total="tableDatatype.total" :current-page="tableDatatype.page + 1"
|
|
:page-size="tableDatatype.size" layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="paginationChangetype" />
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="耗材信息" :visible.sync="clickseetypedialogshow">
|
|
<div class="head-container">
|
|
<el-table ref="table" :data="clickseetableData.data" v-loading="clickseetableData.loading" row-key="id"
|
|
height="450">
|
|
<el-table-column label="耗材名称" prop="conName" />
|
|
<el-table-column label="变动库存" prop="amount">
|
|
<template v-slot="scope">
|
|
<span :class="{ red: scope.row.bizType == '-' }">{{ scope.row.bizType }}{{ scope.row.amount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="现有库存" prop="balance" />
|
|
<!-- <el-table-column label="业务编码" prop="bizCode" /> -->
|
|
<el-table-column label="业务说明" prop="bizName" />
|
|
<!-- <el-table-column label="正负号标识" prop="bizType" /> -->
|
|
<!-- <el-table-column label="耗材id" prop="consId" /> -->
|
|
<el-table-column label="商品信息" prop="productName"></el-table-column>
|
|
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
|
<!-- <el-table-column label="更新时间" prop="updateTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column> -->
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination :total="clickseetableData.total" :current-page="clickseetableData.page + 1"
|
|
:page-size="clickseetableData.size" layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="paginationChangetype" />
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Sortable from 'sortablejs'
|
|
import dayjs from 'dayjs'
|
|
import settings from '@/settings'
|
|
import { upProSort } from '@/api/shop'
|
|
import { gettbConsType, gettbConsInfo, posttbConsInfo, gettbConsInfoFlow, posttbConsInfostockIn, postapitbConsInfo } from '@/api/consumable'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dayjs,
|
|
query: {
|
|
conTypeId: '',
|
|
conTypeName: '',
|
|
conCode: '',
|
|
conName: ''
|
|
},
|
|
libraryshow: false,//耗材入库显示
|
|
libraryshowdata: {
|
|
id: '',
|
|
stockNumber: ''
|
|
},
|
|
ruleslibrary: {
|
|
stockNumber: [
|
|
{ required: true, message: '请输入入库数量', trigger: 'blur' }
|
|
],
|
|
},
|
|
categorys: [],
|
|
typeEnums: [{
|
|
label: '正常',
|
|
value: '1'
|
|
}, {
|
|
label: '禁用',
|
|
value: '0'
|
|
}],
|
|
dialogshow: false, //弹框显示
|
|
dialogtitle: '', //文字显示
|
|
typedialogshow: false,
|
|
tableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 30,
|
|
loading: false,
|
|
total: 0
|
|
},
|
|
querytypedialogshowquery: {
|
|
conTypeCode: '',
|
|
conTypeName: '',
|
|
status: ''
|
|
},
|
|
tableDatatype: {
|
|
data: [],
|
|
page: 0,
|
|
size: 30,
|
|
loading: false,
|
|
total: 0
|
|
},
|
|
clickseetypedialogshow: false,
|
|
clickseetableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 30,
|
|
loading: false,
|
|
total: 0
|
|
},
|
|
ruleForm: {
|
|
conCode: '',
|
|
conName: '',
|
|
conTypeId: '',
|
|
price: "",
|
|
conNames: "",
|
|
// surplusStock: '',
|
|
conUnit: '',
|
|
conWarning: '',
|
|
shopId: localStorage.getItem('shopId'),
|
|
},
|
|
rules: {
|
|
conCode: [
|
|
{ required: true, message: '请输入耗材信息代码', trigger: 'blur' }
|
|
],
|
|
conName: [
|
|
{ required: true, message: '请输入耗材信息名称', trigger: 'blur' }
|
|
],
|
|
conNames: [
|
|
{ required: true, message: '请输入耗材类型', trigger: 'blur' }
|
|
],
|
|
price: [
|
|
{ required: true, message: '请输入耗材价格', trigger: 'blur' }
|
|
],
|
|
conTypeId: [
|
|
{ required: true, message: '请输入耗材类型id', trigger: 'blur' }
|
|
],
|
|
conUnit: [
|
|
{ required: true, message: '请输入单位', trigger: 'blur' }
|
|
],
|
|
conWarning: [{
|
|
required: true, message: '请输入单位', trigger: 'blur'
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTableData()
|
|
this.getTableDatatype()
|
|
this.$nextTick(() => {
|
|
this.tableDrag()
|
|
})
|
|
},
|
|
methods: {
|
|
//表格拖拽
|
|
tableDrag() {
|
|
const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
|
|
new Sortable(el, {
|
|
animation: 150,
|
|
onEnd: async e => {
|
|
if (e.oldIndex == e.newIndex) return
|
|
let oid = this.tableData.data[e.oldIndex].id
|
|
let nid = this.tableData.data[e.newIndex].id
|
|
let ids = this.tableData.data.map(item => item.id)
|
|
try {
|
|
await upProSort({
|
|
strId: oid,
|
|
endId: nid,
|
|
ids: ids
|
|
})
|
|
await this.getTableData()
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.query.conTypeId = ''
|
|
this.query.conTypeName = ''
|
|
this.query.conCode = ''
|
|
this.query.conName = ''
|
|
this.tableData.page = 0
|
|
this.getTableData()
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1
|
|
this.getTableData()
|
|
},
|
|
paginationChangetype(e) {
|
|
this.tableDatatype.page = e - 1
|
|
this.getTableDatatype()
|
|
},
|
|
// 获取信息
|
|
async getTableData() {
|
|
this.tableData.loading = true
|
|
try {
|
|
const res = await gettbConsInfo({
|
|
page: this.tableData.page,
|
|
size: this.tableData.size,
|
|
conTypeId: this.query.conTypeId,
|
|
conTypeName: this.query.conTypeName,
|
|
conCode: this.query.conCode,
|
|
conName: this.query.conName,
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.tableData.loading = false
|
|
this.tableData.data = res.content
|
|
this.tableData.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
// 获取类型
|
|
async getTableDatatype() {
|
|
this.tableDatatype.loading = true
|
|
try {
|
|
const res = await gettbConsType({
|
|
page: this.tableDatatype.page,
|
|
size: this.tableDatatype.size,
|
|
conTypeCode: this.querytypedialogshowquery.conTypeCode,
|
|
conTypeName: this.querytypedialogshowquery.conTypeName,
|
|
status: this.querytypedialogshowquery.status,
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.tableDatatype.loading = false
|
|
this.tableDatatype.data = res.content
|
|
this.tableDatatype.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
// 重置查询
|
|
resetHandletype() {
|
|
this.querytypedialogshowquery.conTypeName = ''
|
|
this.querytypedialogshowquery.conTypeCode = ''
|
|
this.querytypedialogshowquery.status = ''
|
|
this.tableData.page = 0
|
|
this.getTableDatatype()
|
|
},
|
|
// 选择的类型
|
|
tableDatatypetable(item) {
|
|
console.log(item, '调试-选择完的数据')
|
|
this.ruleForm.conCode = item.conTypeCode
|
|
this.ruleForm.conNames = item.conTypeName
|
|
this.ruleForm.conTypeId = item.id
|
|
this.typedialogshow = false
|
|
},
|
|
async clickdialogfadd(item) {
|
|
this.libraryshow = true
|
|
this.libraryshowdata.id = item.id
|
|
},
|
|
async clickdialoglibraryshow(formName) {
|
|
this.$refs[formName].validate(async (valid) => {
|
|
if (valid) {
|
|
await posttbConsInfostockIn({
|
|
id: this.libraryshowdata.id,
|
|
stockNumber: this.libraryshowdata.stockNumber
|
|
})
|
|
this.libraryshow = false
|
|
this.$refs[formName].resetFields()
|
|
this.getTableData()
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
|
|
},
|
|
// 弹框修改值 添加 编辑
|
|
clickdialogframe(type, item) {
|
|
if (type == 'add') { // 添加
|
|
this.dialogtitle = '添加'
|
|
this.$nextTick(() => {
|
|
this.$refs.refruleForm.resetFields()
|
|
})
|
|
} else {
|
|
this.dialogtitle = '编辑'
|
|
this.ruleForm.id = item.id
|
|
this.ruleForm.conTypeId = item.conTypeId
|
|
this.ruleForm.conCode = item.conCode
|
|
this.ruleForm.conName = item.conName
|
|
// this.ruleForm.surplusStock = item.surplusStock
|
|
this.ruleForm.conWarning = item.conWarning
|
|
this.ruleForm.conUnit = item.conUnit
|
|
console.log(this.ruleForm, item)
|
|
}
|
|
this.dialogshow = true
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(async (valid) => {
|
|
if (valid) {
|
|
if (this.dialogtitle == '编辑') {
|
|
|
|
await postapitbConsInfo({
|
|
id: this.ruleForm.id,
|
|
conCode: this.ruleForm.conCode,
|
|
conName: this.ruleForm.conName,
|
|
conTypeId: this.ruleForm.conTypeId,
|
|
// surplusStock: this.ruleForm.surplusStock,
|
|
conUnit: this.ruleForm.conUnit,
|
|
conWarning: item.conWarning,
|
|
shopId: this.ruleForm.shopId
|
|
})
|
|
this.dialogshow = false
|
|
} else {//添加
|
|
await posttbConsInfo({
|
|
...this.ruleForm
|
|
})
|
|
this.$message({ type: 'success', message: '添加成功' })
|
|
}
|
|
this.dialogshow = false
|
|
this.$refs[formName].resetFields()
|
|
this.getTableData()
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields()
|
|
},
|
|
// 删除商品
|
|
async delTableHandle(ids) {
|
|
try {
|
|
await tbProductDelete(ids)
|
|
this.getTableData()
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
//查看查询耗材流水信息
|
|
async clicksee(item) {
|
|
console.log(item)
|
|
this.clickseetypedialogshow = true
|
|
this.clickseetableData.loading = true
|
|
try {
|
|
const res = await gettbConsInfoFlow({
|
|
page: this.clickseetableData.page,
|
|
size: this.clickseetableData.size,
|
|
consId: item.id,
|
|
conName: item.conName,
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.clickseetableData.loading = false
|
|
this.clickseetableData.data = res.content
|
|
this.clickseetableData.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.handle {
|
|
font-size: 18px;
|
|
color: #999;
|
|
|
|
&:hover {
|
|
cursor: grab;
|
|
}
|
|
}
|
|
|
|
.shop_info {
|
|
display: flex;
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tag_wrap {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.red {
|
|
color: rgb(219, 32, 32);
|
|
}
|
|
</style> |