console
const app = new Vue({
el: '#app',
data() {
return {
isManager: true,
list: [],
form: {
index: -1,
title: '',
num: {}
}
}
},
created() {
this.list.push({
id: 1,
title: 'firet',
total: 100,
_edit: false
})
},
methods: {
onAppend() {
this.list.push({
id: 0,
title: '请输入',
total: 0,
_edit: true
})
},
onShowModal(index) {
Object.assign(this.form, {index, ...this.list[index], index})
this.$refs.modal_2.showModal()
},
onOk() {
this.$refs.modal_2.close()
let index = this.form.index
if (index === -1) return
this.list[index].total -= parseInt(this.form.num)
}
}
})
<html data-theme="cupcake">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<div id="app">
<table class="table table-xs">
<thead>
<tr v-if="isManager">
<th style="width: 40%">名称</th>
<th style="width: 20%">库存</th>
<th style="width: 40%">操作</th>
</tr>
<tr v-else>
<th style="width: 50%">名称</th>
<th style="width: 10%">库存</th>
<th style="width: 40%">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item,index in list">
<td>
<input class="input input-bordered input-xs w-full max-w-xs" v-if="item._edit" v-model="item.title" />
<span v-else> {{item.title}} </span>
</td>
<td>{{item.total}}</td>
<td>
<button class="btn btn-outline btn-xs" v-show="isManager">详情</button>
<button class="btn btn-outline btn-xs" v-show="isManager" @click="item._edit = !item._edit">编辑</button>
<button class="btn btn-outline btn-xs" @click="onShowModal(index)" v-show="isManager">入库</button>
<button class="btn btn-outline btn-xs" v-show="!isManager">出库</button>
</td>
</tr>
<tr>
<td colspan="3" style="padding: 1rem 0">
<button class="btn btn-outline btn-block btn-sm" @click="onAppend">增加</button>
</td>
</tr>
</tbody>
</table>
<div style="position: fixed; width: 90%; left: 5%; bottom: 0; display: flex; border-bottom: solid 1px #aaa;">
<div style="flex: 10;"></div>
<div class="form-control" style="flex: 2">
<label class="label cursor-pointer">
<input type="checkbox" class="toggle" v-model="isManager" />
</label>
</div>
</div>
<dialog ref="modal_2" class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold" style="text-align: center; fotn-weight: bold; font-size: 2rem;">{{form.title}}</h3>
<div style="margin: 2rem 0;">
数量：
<div style="display: flex; gap: 1rem; padding: 1rem 0;">
<div style="display: flex; gap: 1rem;" v-for="i in 5" :key="i">
<input name="radio-1" type="radio" class="radio" :value="i" v-model="form.num" />
<label>{{i}}</label>
</div>
</div>
</div>
<button class="btn btn-outline btn-block btn-sm" @click="onOk">确定</button>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
</html>
#app {
padding: 1rem;
}