init
This commit is contained in:
313
src/pages/modules/systemmanage/system.vue
Normal file
313
src/pages/modules/systemmanage/system.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">添加参数</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{ e.code }}</td>
|
||||
<td>{{ e.name }}</td>
|
||||
<td>{{ e.value }}</td>
|
||||
<td>{{ e.remark }}</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:unclick="unclick"
|
||||
@toSure="toSureDialog"
|
||||
@toCancle="toCancle"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>编码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>名字</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>数值</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
import { paramQuery, paramAdd, paramEdit, paramDelete } from '@config/getData2.js'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
code: '',
|
||||
name: '',
|
||||
value: '',
|
||||
remark: '',
|
||||
unclick: false,
|
||||
visible: false,
|
||||
layout: 'normal',
|
||||
input: null,
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加参数'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改参数'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
},
|
||||
code (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.name === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
name (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.value === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
},
|
||||
value (val) {
|
||||
if ((this.type === '1' || this.type === '2') && (val === '' || this.code === '' || this.name === '')) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._paramQuery()
|
||||
},
|
||||
methods: {
|
||||
async _paramQuery () {
|
||||
let res = await paramQuery('0', '100')
|
||||
this.datalist = [...res]
|
||||
},
|
||||
showDialog (type, e) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
switch (type) {
|
||||
case '1':
|
||||
this.code = ''
|
||||
this.name = ''
|
||||
this.value = ''
|
||||
this.remark = ''
|
||||
this.unclick = true
|
||||
break
|
||||
case '2':
|
||||
this.code = e.code
|
||||
this.name = e.name
|
||||
this.value = e.value
|
||||
this.remark = e.remark
|
||||
if (!this.code || !this.name || !this.value) {
|
||||
this.unclick = true
|
||||
} else {
|
||||
this.unclick = false
|
||||
}
|
||||
this.pkObj = e
|
||||
break
|
||||
case '3':
|
||||
this.unclick = false
|
||||
this.pkObj = e
|
||||
break
|
||||
}
|
||||
this.hide()
|
||||
},
|
||||
toCancle () {
|
||||
this.hide()
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
this._paramAdd()
|
||||
break
|
||||
case '2':
|
||||
this._paramEdit()
|
||||
break
|
||||
case '3':
|
||||
this._paramDelete()
|
||||
break
|
||||
}
|
||||
},
|
||||
async _paramAdd () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramAdd(this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramEdit () {
|
||||
this.$refs.child.disabled = true
|
||||
if (!this.code) {
|
||||
this.toast('编码不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.name) {
|
||||
this.toast('名字不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.value) {
|
||||
this.toast('数值不能为空')
|
||||
this.$refs.child.disabled = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res = await paramEdit(this.pkObj.id, this.code, this.name, this.value, this.remark)
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
async _paramDelete () {
|
||||
this.$refs.child.disabled = true
|
||||
try {
|
||||
let res = await paramDelete([this.pkObj.id])
|
||||
if (res.code === '1') {
|
||||
this._paramQuery()
|
||||
}
|
||||
this.toast(res.desc)
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
} catch (e) {
|
||||
this.$refs.child.active = false
|
||||
this.$refs.child.disabled = false
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.grid_wrapper
|
||||
height calc(100% - 50px)
|
||||
overflow-y auto
|
||||
</style>
|
||||
Reference in New Issue
Block a user