源文件
This commit is contained in:
166
src/views/devices/components/addDevice.vue
Normal file
166
src/views/devices/components/addDevice.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="添加云打印机" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="层级">
|
||||
<el-select v-model="form.contentType">
|
||||
<el-option :label="item.name" :value="item.value" v-for="item in devices"
|
||||
:key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备尺寸">
|
||||
<el-radio-group v-model="form.config.width">
|
||||
<el-radio-button label="58">58mm</el-radio-button>
|
||||
<el-radio-button label="80">80mm</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备号" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入设备号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印份数">
|
||||
<el-select v-model="form.config.printerNum">
|
||||
<el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="出品模式">
|
||||
<el-select v-model="form.config.model">
|
||||
<el-option :label="item.name" :value="item.value" v-for="item in models"
|
||||
:key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印类型">
|
||||
<el-select v-model="form.subType">
|
||||
<el-option :label="item.name" :value="item.value" v-for="item in subTypes"
|
||||
:key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="尾部留空">
|
||||
<el-radio-group v-model="form.config.feet">
|
||||
<el-radio-button :label="`${item}`" v-for="item in feets" :key="item">{{ item
|
||||
}}行</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动切刀">
|
||||
<el-switch v-model="form.config.autoCut" :active-value="0" :inactive-value="1"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类">
|
||||
<div style="cursor: pointer;" @click="$refs.classify.show()">
|
||||
<span style="color: #409eff;" v-for="item in form.config.categoryList">{{ item.name }},</span>
|
||||
<span style="color: #e65d6e;" v-if="!form.config.categoryList.length">请选择分类</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<classify ref="classify" @success="classifySuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { devices, models, subTypes } from '../devices'
|
||||
import { tbPrintMachine } from '@/api/devices'
|
||||
import classify from '@/components/classify'
|
||||
|
||||
export default {
|
||||
components: { classify },
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
devices,
|
||||
models,
|
||||
subTypes,
|
||||
feets: [0, 1, 2, 3, 4, 5, 8],
|
||||
loading: false,
|
||||
form: {
|
||||
id: '',
|
||||
contentType: '',
|
||||
config: {
|
||||
width: '80mm', // 设备尺寸
|
||||
printerNum: 1, //打印份数
|
||||
categoryList: '', // 商品分类
|
||||
model: 'normal', // 出品模式,
|
||||
feet: '0',
|
||||
autoCut: 0
|
||||
},
|
||||
name: '',
|
||||
subType: 'kitchen', // 打印类型
|
||||
status: 0,
|
||||
sort: ''
|
||||
},
|
||||
resetForm: '',
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
address: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
// 确认选择商品分类
|
||||
classifySuccess(e) {
|
||||
this.form.config.categoryList = e
|
||||
},
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true
|
||||
this.form.shopId = localStorage.getItem('shopId')
|
||||
let res = await tbPrintMachine(this.form, this.form.id ? 'put' : 'post')
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
this.form = { ...obj }
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form = { ...this.resetForm }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
src/views/devices/devices.js
Normal file
44
src/views/devices/devices.js
Normal file
@@ -0,0 +1,44 @@
|
||||
export const devices = [
|
||||
{
|
||||
value: 'printer',
|
||||
name: '本地'
|
||||
},
|
||||
{
|
||||
value: 'yxyPrinter',
|
||||
name: '云想印'
|
||||
},
|
||||
{
|
||||
value: 'fePrinter',
|
||||
name: '飞鹅'
|
||||
}
|
||||
]
|
||||
|
||||
export const models = [
|
||||
{
|
||||
value: 'normal',
|
||||
name: '普通出单'
|
||||
},
|
||||
{
|
||||
value: 'one',
|
||||
name: '一菜一品'
|
||||
},
|
||||
{
|
||||
value: 'category',
|
||||
name: '分类出单'
|
||||
}
|
||||
]
|
||||
|
||||
export const subTypes = [
|
||||
{
|
||||
value: 'kitchen',
|
||||
name: '出品'
|
||||
},
|
||||
{
|
||||
value: 'cash',
|
||||
name: '小票'
|
||||
},
|
||||
{
|
||||
value: 'label',
|
||||
name: '标签'
|
||||
}
|
||||
]
|
||||
159
src/views/devices/devices_list.vue
Normal file
159
src/views/devices/devices_list.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :model="query" inline>
|
||||
<el-form-item>
|
||||
<el-input v-model="query.name" placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.type" placeholder="请选择设备类型">
|
||||
<el-option :label="item.name" :value="item.value" v-for="item in devices" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addDevice.show()">
|
||||
添加云打印机
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading">
|
||||
<el-table-column label="设备名称" prop="name"></el-table-column>
|
||||
<el-table-column label="设备号" prop="address"></el-table-column>
|
||||
<el-table-column label="品牌" prop="contentType">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.contentType | devicesName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出品模式" prop="config.model">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.config.model | modelsName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打印类型" prop="subType">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.subType | subTypesName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" sortable prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.createdAt | timeFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" sortable prop="sort"></el-table-column>
|
||||
<el-table-column label="状态" prop="status">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
|
||||
@change="statusChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" icon="el-icon-edit"
|
||||
@click="$refs.addDevice.show(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"
|
||||
@current-change="paginationChange" layout="total"></el-pagination>
|
||||
</div>
|
||||
<addDevice ref="addDevice" @success="getTableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { devices, models, subTypes } from './devices'
|
||||
import addDevice from './components/addDevice'
|
||||
import { tbPrintMachineGet, tbPrintMachine } from '@/api/devices'
|
||||
import dayjs from 'dayjs'
|
||||
export default {
|
||||
components: {
|
||||
addDevice
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
name: '',
|
||||
type: ''
|
||||
},
|
||||
devices,
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
devicesName(value) {
|
||||
return devices.find(item => item.value == value).name
|
||||
},
|
||||
modelsName(value) {
|
||||
return models.find(item => item.value == value).name
|
||||
},
|
||||
subTypesName(value) {
|
||||
return subTypes.find(item => item.value == value).name
|
||||
},
|
||||
timeFilter(s) {
|
||||
return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 切换状态
|
||||
async statusChange(e, row) {
|
||||
try {
|
||||
this.tableData.loading = true
|
||||
const data = { ...row }
|
||||
data.status = e
|
||||
await tbPrintMachine(data, 'put')
|
||||
this.getTableData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
this.tableData.loading = false
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = ''
|
||||
this.query.type = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbPrintMachineGet({
|
||||
name: this.query.name,
|
||||
contentType: this.query.type
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.data = res
|
||||
this.tableData.total = res.length
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user