耗材管理

This commit is contained in:
魏啾 2024-06-25 15:50:35 +08:00
parent d53314b523
commit 02f0401855
7 changed files with 1435 additions and 3 deletions

View File

@ -4,9 +4,9 @@ ENV = 'development'
# VUE_APP_BASE_API = 'http://192.168.2.17:8000'
# VUE_APP_BASE_API = 'http://192.168.2.42:8000'
# VUE_APP_BASE_API = 'http://192.168.2.133:8000'
# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'http://192.168.2.96:8000'
VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'http://192.168.2.41:8000'
VUE_APP_WS_API = 'ws://192.168.2.128:8000'
# 是否启用 babel-plugin-dynamic-import-node插

BIN
dist.zip

Binary file not shown.

View File

@ -78,6 +78,7 @@
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"cache-loader": "^4.1.0",
"chalk": "2.4.2",
"chokidar": "2.1.5",
"compression-webpack-plugin": "5.0.2",

136
src/api/consumable.js Normal file
View File

@ -0,0 +1,136 @@
import request from "@/utils/request";
/**
* 查询耗材类型
* @returns
*/
export function gettbConsType(params) {
return request({
url: '/api/tbConsType',
method: "get",
params
});
}
/**
* 新增耗材类型
* @returns
*/
export function posttbConsType(data) {
return request({
url: '/api/tbConsType',
method: "post",
data
});
}
/**
* 修改耗材类型
* @returns
*/
export function puttbConsType(data) {
return request({
url: '/api/tbConsType',
method: "put",
data
});
}
/**
* 查询耗材信息
* @returns
*/
export function gettbConsInfo(params) {
return request({
url: '/api/tbConsInfo',
method: "get",
params
});
}
/**
* 耗材入库
* @returns
*/
export function posttbConsInfostockIn(data) {
return request({
url: '/api/tbConsInfo/stockIn',
method: "post",
data
});
}
/**
* 新增耗材信息
* @returns
*/
export function posttbConsInfo(data) {
return request({
url: '/api/tbConsInfo',
method: "post",
data
});
}
/**
* 查询查询耗材规格信息
* @returns
*/
export function getviewConSku(params) {
return request({
url: '/api/viewConSku',
method: "get",
params
});
}
/**
* 查询查询商品规格
* @returns
*/
export function gettbProductSpec(params) {
return request({
url: '/api/viewProductSkuShop',
method: "get",
params
});
}
/**
* 新增商品规格耗材信息
* @returns
*/
export function posttbProskuCon(data) {
return request({
url: '/api/tbProskuCon',
method: "post",
data
});
}
/**
* 修改商品规格耗材信息状态
* @returns
*/
export function puttbProskuCon(data) {
return request({
url: '/api/tbProskuCon',
method: "put",
data
});
}
/**
* 删除商品规格耗材信息状态
* @returns
*/
export function deletetbProskuCon(data) {
return request({
url: '/api/tbProskuCon',
method: "delete",
data
});
}
/**
* 查询耗材流水信息
* @returns
*/
export function gettbConsInfoFlow(params) {
return request({
url: '/api/tbConsInfoFlow',
method: "get",
params
});
}

View File

@ -0,0 +1,507 @@
<!-- 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="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>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template v-slot="scope">
<!-- <el-button type="text" icon="el-icon-rank">排序</el-button> -->
<el-button type="text" @click="clickdialogfadd(scope.row)">入库</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">
<el-form :inline="true" ref="refruleForm" :model="ruleForm" :rules="rules" class="demo-form-inline">
<el-form-item label="单位" prop="conUnit">
<el-input v-model="ruleForm.conUnit" placeholder="请输入单位"></el-input>
</el-form-item>
<el-form-item label="耗材信息名称" prop="conName">
<el-input v-model="ruleForm.conName" placeholder="请输耗材信息名称" disabled></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="typedialogshow = true">去选择</el-button>
</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-row :gutter="20">
<el-col :span="3">
<el-input v-model="querytypedialogshowquery.conTypeName" size="small" clearable placeholder="请输入耗材类型名称"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
</el-col>
<el-col :span="3">
<el-input v-model="querytypedialogshowquery.conTypeCode" size="small" clearable placeholder="请输入耗材类型代码"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
</el-col>
<el-col :span="3">
<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>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="getTableDatatype">查询</el-button>
<el-button @click="resetHandletype">重置</el-button>
</el-col>
</el-row>
</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">
<el-table ref="table" :data="clickseetableData.data" v-loading="clickseetableData.loading" row-key="id">
<el-table-column label="消耗金额" prop="amount" />
<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="耗材名称" prop="conName" />
<el-table-column label="耗材id" prop="consId" />
<el-table-column label="创建时间" prop="createTime">
<template v-slot="scope">
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</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 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 } 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: '',
conUnit: '',
shopId: localStorage.getItem('shopId'),
},
rules: {
conCode: [
{ required: true, message: '请输入耗材信息代码', trigger: 'blur' }
],
conName: [
{ required: true, message: '请输入耗材信息名称', trigger: 'blur' }
],
conTypeId: [
{ required: true, message: '请输入耗材类型id', trigger: 'blur' }
],
conUnit: [
{ 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.query.conTypeCode = ''
this.query.conTypeName = ''
this.query.status = ''
this.tableData.page = 0
this.getTableData()
},
//
tableDatatypetable(item) {
console.log(item)
this.ruleForm.conCode = item.conTypeCode
this.ruleForm.conName = 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.conCode = item.conCode
this.ruleForm.conName = item.conName
this.ruleForm.conTypeId = item.conTypeId
this.ruleForm.conUnit = item.conUnit
}
this.dialogshow = true
},
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
if (this.dialogtitle == '编辑') {
// await puttbConsType({
// id: this.ruleForm.id,
// conCode: this.ruleForm.conCode,
// conName: this.ruleForm.conName,
// conTypeId: this.ruleForm.conTypeId,
// conUnit: this.ruleForm.conUnit,
// shopId: this.ruleForm.shopId
// })
// this.dialogshow = false
} else {//
await posttbConsInfo({
conCode: this.ruleForm.conCode,
conName: this.ruleForm.conName,
conTypeId: this.ruleForm.conTypeId,
conUnit: this.ruleForm.conUnit,
shopId: this.ruleForm.shopId
})
}
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;
}
}
}
</style>

View File

@ -0,0 +1,494 @@
<!-- 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.conName" 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.specSnap" 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.name" 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="耗材信息ID" prop="conInfoId" />
<el-table-column label="耗材信息名称" prop="conName" />
<el-table-column label="规格名称" prop="specSnap" />
<el-table-column label="耗材信息代码" prop="conCode" />
<el-table-column label="耗材信息单位" prop="conUnit" />
<el-table-column label="商品名称" prop="name" />
<el-table-column label="库存" prop="stockNumber" />
<el-table-column label="单笔消耗数" prop="surplusStock" />
<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="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="更新时间" 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="操作" width="200">
<template v-slot="scope">
<!-- <el-button type="text" icon="el-icon-rank">排序</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="dialogtitle" :visible.sync="dialogshow">
<el-form ref="refruleForm" :model="ruleForm" :rules="rules" :inline="true">
<el-form-item label="商品规格" prop="productSkuIdname">
<el-input v-model="ruleForm.productSkuIdname" placeholder="请输入商品规格" disabled></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="tableDataskudialogshow = true">去选择商品规格</el-button>
</el-form-item>
<el-form-item label="耗材信息" prop="conInfoIdname">
<el-input v-model="ruleForm.conInfoIdname" placeholder="请输入耗材信息" disabled></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="informationdialogshow = true">去选择耗材信息</el-button>
</el-form-item>
<el-form-item label="是否禁用" prop="status">
<el-switch v-model="ruleForm.status" />
</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="dialogshows">
<el-form ref="refruleForm" :model="ruleForm" :inline="true">
<el-form-item label="是否禁用" prop="status">
<el-switch v-model="ruleForm.status" />
</el-form-item>
<el-form-item style="display: flex;justify-content: flex-end;">
<el-button @click="dialogshows = false"> </el-button>
<el-button type="primary" @click="submitForm('refruleForm')"> </el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="耗材信息" :visible.sync="informationdialogshow">
<div class="head-container">
<el-input v-model="queryinformation.conTypeId" size="small" clearable placeholder="请输入类型id"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatainformation" />
<el-input v-model="queryinformation.conTypeName" size="small" clearable placeholder="请输入类型名称"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatainformation" />
<el-input v-model="queryinformation.conCode" size="small" clearable placeholder="请输入耗材代码"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatainformation" />
<el-input v-model="queryinformation.conName" size="small" clearable placeholder="请输入耗材名称"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatainformation" />
<div style="display: flex; justify-content: flex-end;">
<el-button style="margin-right: 20px;" type="primary"
@click="getTableDatainformation">查询</el-button>
<el-button @click="resetHandleinformation">重置</el-button>
</div>
</div>
<el-table ref="table" :data="tableDatainformation.data" v-loading="tableDatainformation.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="类型名称" prop="conTypeName" />
<el-table-column label="单位" prop="conUnit" />
<el-table-column label="库存数量" prop="stockNumber" />
<el-table-column label="剩余库存量" prop="surplusStock" />
<el-table-column label="" width="200">
<template v-slot="scope">
<el-button @click="tableDatainformationtable(scope.row)">确定</el-button>
</template>
</el-table-column>
</el-table>
<div class="head-container">
<el-pagination :total="tableDatainformation.total" :current-page="tableDatainformation.page + 1"
:page-size="tableDatainformation.size" layout="total, sizes, prev, pager, next, jumper"
@current-change="paginationChangeinformation" />
</div>
</el-dialog>
<el-dialog title="选择规格" :visible.sync="tableDataskudialogshow" width="700px;">
<div class="head-container">
<el-input v-model="querytableDatasku.specSnap" size="small" clearable placeholder="请输入规格"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatasku" />
<el-input v-model="querytableDatasku.name" size="small" clearable placeholder="请输入商品名称"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatasku" />
<el-input v-model="querytableDatasku.shopName" size="small" clearable placeholder="请输入店铺名称"
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatasku" />
<div style="display: flex; justify-content: flex-end;">
<el-button style="margin-right: 20px;" type="primary" @click="getTableDatasku">查询</el-button>
<el-button @click="resetHandlesku">重置</el-button>
</div>
</div>
<el-table ref="table" :data="tableDatasku.data" v-loading="tableDatasku.loading" row-key="id">
<el-table-column label="店铺名称" prop="shopName" />
<el-table-column label="商品名称" prop="name" />
<el-table-column label="规格" prop="specSnap" />
<el-table-column label="" width="200">
<template v-slot="scope">
<el-button @click="tableDatatablesku(scope.row)">确定</el-button>
</template>
</el-table-column>
</el-table>
<div class="head-container">
<el-pagination :total="tableDatasku.total" :current-page="tableDatasku.page + 1"
:page-size="tableDatasku.size" layout="total, sizes, prev, pager, next, jumper"
@current-change="Changeinformationsku" />
</div>
</el-dialog>
</div>
</template>
<script>
import Sortable from 'sortablejs'
import dayjs from 'dayjs'
import settings from '@/settings'
import { upProSort } from '@/api/shop'
import { getviewConSku, gettbProductSpec, gettbConsInfo, posttbProskuCon, puttbProskuCon, deletetbProskuCon } from '@/api/consumable'
export default {
data() {
return {
dayjs,
query: {
conName: '',
specSnap: '',
name: '',
status: ''
},
categorys: [],
typeEnums: [{
label: '正常',
value: '1'
}, {
label: '禁用',
value: '0'
}],
dialogshow: false, //
dialogshows: false,
dialogtitle: '', //
informationdialogshow: false,
tableData: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0
},
queryinformation: {
conTypeId: '',
conTypeName: '',
conCode: '',
conName: ''
},
tableDatainformation: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0
},
tableDataskudialogshow: false,
querytableDatasku: {
specSnap: '',
name: '',
shopName: ''
},
tableDatasku: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0
},
ruleForm: {
conInfoId: "",
conInfoIdname: "",
productSkuId: "",
productSkuIdname: "",
shopId: localStorage.getItem('shopId'),
status: false
},
rules: {
conInfoIdname: [
{ required: true, message: '请输入耗材信息', trigger: 'blur' }
],
productSkuIdname: [
{ required: true, message: '请输入商品规格', trigger: 'blur' }
],
status: [
{ required: true, message: '选择状态', trigger: 'blur' }
]
}
}
},
mounted() {
this.getTableData()
this.getTableDatasku()
this.getTableDatainformation()
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 => {
// console.log('===', 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.conName = ''
this.query.specSnap = ''
this.query.name = ''
this.query.status = ''
this.tableData.page = 0
this.getTableData()
},
resetHandlesku() {
this.querytableDatasku.specSnap = ''
this.querytableDatasku.name = ''
this.querytableDatasku.shopName = ''
this.tableDatasku.page = 0
this.getTableDatasku()
},
resetHandleinformation() {
this.resetHandleinformation.conTypeId = ''
this.resetHandleinformation.conTypeName = ''
this.resetHandleinformation.conCode = ''
this.resetHandleinformation.conName = ''
this.tableDatainformation.page = 0
this.getTableDatainformation()
},
//
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
//
async getTableData() {
this.tableData.loading = true
try {
const res = await getviewConSku({
page: this.tableData.page,
size: this.tableData.size,
conName: this.query.conName,
specSnap: this.query.specSnap,
name: this.query.name,
status: this.query.status,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
},
paginationChangeinformation(e) {
this.tableDatainformation.page = e - 1
this.getTableDatainformation()
},
//
async getTableDatainformation() {
this.tableDatainformation.loading = true
try {
const res = await gettbConsInfo({
page: this.tableDatainformation.page,
size: this.tableDatainformation.size,
shopId: localStorage.getItem('shopId'),
conTypeId: this.queryinformation.conTypeId,
conTypeName: this.queryinformation.conTypeName,
conCode: this.queryinformation.conCode,
conName: this.queryinformation.conName,
})
this.tableDatainformation.loading = false
this.tableDatainformation.data = res.content
this.tableDatainformation.total = res.totalElements
} catch (error) {
console.log(error)
}
},
//
tableDatainformationtable(item) {
this.ruleForm.conInfoId = item.id
this.ruleForm.conInfoIdname = item.conName
this.informationdialogshow = false
},
tableDatatablesku(item) {///
console.log(item)
this.ruleForm.productSkuId = item.id
this.ruleForm.productSkuIdname = item.name
this.tableDataskudialogshow = false
},
//
async getTableDatasku() {
this.tableDatasku.loading = true
try {
const res = await gettbProductSpec({
page: this.tableDatasku.page,
size: this.tableDatasku.size,
shopId: localStorage.getItem('shopId'),
specSnap: this.querytableDatasku.specSnap,
name: this.querytableDatasku.name,
shopName: this.querytableDatasku.shopName
})
this.tableDatasku.loading = false
this.tableDatasku.data = res.content
this.tableDatasku.total = res.totalElements
} catch (error) {
console.log(error)
}
},
Changeinformationsku(e) {
this.tableDatasku.page = e - 1
this.getTableDatasku()
},
//
clickdialogframe(type, item) {
if (type == 'add') { //
this.dialogtitle = '添加'
this.$nextTick(() => {
this.$refs.refruleForm.resetFields()
})
this.dialogshow = true
} else {
this.dialogshows = true
this.dialogtitle = '编辑'
this.ruleForm.id = item.id
this.ruleForm.status = item.status == 0 ? true : false
}
},
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
if (this.dialogtitle == '编辑') {
await puttbProskuCon({
id: this.ruleForm.id,
productSkuId: this.ruleForm.productSkuId,
conInfoId: this.ruleForm.conInfoId,
shopId: this.ruleForm.shopId,
status: this.ruleForm.status ? '0' : '1'
})
this.dialogshows = false
this.getTableData()
} else {
await posttbProskuCon({
productSkuId: this.ruleForm.productSkuId,
conInfoId: this.ruleForm.conInfoId,
shopId: this.ruleForm.shopId,
status: this.ruleForm.status ? '0' : '1'
})
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 deletetbProskuCon(ids)
this.getTableData()
} 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;
}
}
}
</style>

View File

@ -0,0 +1,294 @@
<!-- 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.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.conTypeCode" 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="conTypeName" />
<el-table-column label="耗材类型代码" prop="conTypeCode" />
<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="店铺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="排序" 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="操作" width="200">
<template v-slot="scope">
<!-- <el-button type="text" icon="el-icon-rank">排序</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="dialogtitle" :visible.sync="dialogshow">
<el-form ref="refruleForm" :model="ruleForm" :rules="rules">
<el-form-item label="耗材类型名称" prop="conTypeName">
<el-input v-model="ruleForm.conTypeName" />
</el-form-item>
<el-form-item label="耗材类型代码" prop="conTypeCode">
<el-input v-model="ruleForm.conTypeCode" />
</el-form-item>
<el-form-item label="是否禁用" prop="status">
<el-switch v-model="ruleForm.status" />
</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>
</div>
</template>
<script>
import Sortable from 'sortablejs'
import dayjs from 'dayjs'
import settings from '@/settings'
import { upProSort } from '@/api/shop'
import { gettbConsType, posttbConsType, puttbConsType } from '@/api/consumable'
export default {
data() {
return {
dayjs,
query: {
conTypeCode: '',
conTypeName: '',
status: ''
},
categorys: [],
typeEnums: [{
label: '正常',
value: '1'
}, {
label: '禁用',
value: '0'
}],
dialogshow: false, //
dialogtitle: '', //
tableData: {
data: [],
page: 0,
size: 30,
loading: false,
total: 0
},
ruleForm: {
conTypeCode: '',
conTypeName: '',
shopId: localStorage.getItem('shopId'),
status: false
},
rules: {
conTypeName: [
{ required: true, message: '请输入耗材类型名称', trigger: 'blur' }
],
conTypeCode: [
{ required: true, message: '请输入耗材类型代码', trigger: 'blur' }
],
status: [
{ required: true, message: '选择状态', trigger: 'blur' }
]
}
}
},
mounted() {
this.getTableData()
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 => {
// console.log('===', 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.conTypeCode = ''
this.query.conTypeName = ''
this.query.status = ''
this.tableData.page = 0
this.getTableData()
},
//
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
//
async getTableData() {
this.tableData.loading = true
try {
const res = await gettbConsType({
page: this.tableData.page,
size: this.tableData.size,
conTypeCode: this.query.conTypeCode,
conTypeName: this.query.conTypeName,
status: this.query.status,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
},
//
clickdialogframe(type, item) {
// eslint-disable-next-line eqeqeq
if (type == 'add') { //
this.dialogtitle = '添加'
this.$nextTick(() => {
this.$refs.refruleForm.resetFields()
})
} else {
this.dialogtitle = '编辑'
this.ruleForm.id = item.id
this.ruleForm.conTypeCode = item.conTypeCode
this.ruleForm.conTypeName = item.conTypeName
this.ruleForm.status = item.status == 0 ? true : false
}
this.dialogshow = true
},
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
if (this.dialogtitle == '编辑') {
await puttbConsType({
id: this.ruleForm.id,
conTypeCode: this.ruleForm.conTypeCode,
conTypeName: this.ruleForm.conTypeName,
shopId: this.ruleForm.shopId,
status: this.ruleForm.status ? '0' : '1'
})
this.dialogshow = false
this.getTableData()
} else {
await posttbConsType({
conTypeCode: this.ruleForm.conTypeCode,
conTypeName: this.ruleForm.conTypeName,
shopId: this.ruleForm.shopId,
status: this.ruleForm.status ? '0' : '1'
})
}
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)
}
}
}
}
</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;
}
}
}
</style>