耗材管理
This commit is contained in:
parent
d53314b523
commit
02f0401855
|
|
@ -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插
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue