代码拉取完成,页面将自动刷新
同步操作将从 小肥羊/年会抽奖 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>奖项设置</title>
<link rel="stylesheet" href="css/reset.css" />
<link
rel="stylesheet"
href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
/>
<script src="js/polyfill.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/element-ui@2.4.11/lib/index.js"></script>
<script src="js/member.js"></script>
<style>
.el-input {
width: 120px;
}
.el-table {
margin-bottom: 10px;
}
* {
cursor: initial;
}
.awards,
.members {
width: 80%;
margin: auto;
margin-top: 50px;
}
h1 {
font-size: 30px;
text-align: center;
line-height: 1.5;
margin-bottom: 20px;
}
h1 span {
font-size: 16px;
}
a {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="awards">
<h1>奖项设置 <span>(请按抽奖顺序添加)</span></h1>
<el-table :data="tableData" style="width: 100%">
<el-table-column
:prop="item.prop"
:label="item.label"
width="180"
v-for="(item, index) in columns"
:key="index"
>
<template slot-scope="scope">
<div>
<div v-if="scope.row.editing[item.prop]">
<el-input
size="mini"
v-model="scope.row[item.prop]"
@blur="onSaveCell(scope.row, item.prop)"
></el-input>
</div>
<div
v-else
@dblclick="onEditCell(scope.row, item.prop, $event)"
>
{{ scope.row[item.prop] || '(请填写)' }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button
size="small"
@click="onAdd(scope.row, scope.$index)"
type="primary"
>增加</el-button
>
<el-button
size="small"
@click="onRemove(scope.row, scope.$index)"
type="danger"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-button
size="small"
type="primary"
@click="onAdd(null, -1)"
v-show="tableData.length===0"
>增加</el-button
>
<span>每个奖项每次抽取人数:</span>
<el-select size="small" v-model="batchNumber" @change="onChange">
<el-option
v-for="index in 20"
:key="index"
:label="index"
:value="index"
></el-option>
</el-select>
<el-button size="small" type="danger" @click="onReset"
>重置中奖结果</el-button
>
<a href="./index.html">去抽奖</a>
</div>
<div class="members">
<h1>参与人员列表(共{{memberSource.length}}人)</h1>
<el-table :data="memberSource" style="width: 100%" stripe>
<el-table-column
:prop="item.prop"
:label="item.label"
width="180"
v-for="(item, index) in memberColumns"
:key="index"
>
<template slot-scope="scope">
<div>
<div v-if="scope.row.editing[item.prop]">
<el-input
size="mini"
v-model="scope.row[item.prop]"
@blur="onSaveCell(scope.row, item.prop)"
></el-input>
</div>
<div
v-else
@dblclick="onEditCell(scope.row, item.prop, $event)"
>
{{ scope.row[item.prop] || '(请填写)' }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button
size="small"
@click="onRemoveMember(scope.row, scope.$index)"
type="danger"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-button size="small" @click="onAddMember" type="primary"
>增加</el-button
>
<el-button size="small" type="warning" @click="onImport">重置</el-button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
dialogVisible: false,
batchNumber: 20,
columns: [
{
prop: 'name',
label: '名称',
},
{
prop: 'count',
label: '数量',
},
{
prop: 'award',
label: '奖品',
},
],
memberColumns: [
{
prop: 'name',
label: '姓名',
},
{
prop: 'id',
label: '工号',
},
],
tableData: [
{
name: '特等奖',
count: 1,
editing: {},
},
{
name: '一等奖',
count: 1,
editing: {},
},
],
memberSource: [],
},
computed: {
awards: function() {
return this.tableData
.filter(function(item) {
return item.name && item.count;
})
.map(function(item) {
return {
name: item.name,
count: item.count,
award: item.award,
};
});
},
members: function() {
return this.memberSource
.filter(function(item) {
return item.name && item.id;
})
.map(function(item) {
return {
name: item.name,
id: item.id,
};
});
},
},
methods: {
onReset: function() {
var vm = this;
this.$confirm(
'重置会清空所有抽奖结果,无法撤销!',
'确定要重置吗?',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(function() {
localStorage.removeItem('players');
localStorage.removeItem('result');
});
},
onChange: function(value) {
console.log(value);
localStorage.setItem('batchNumber', value);
},
onSaveCell: function(row, key) {
this.$set(row.editing, key, false);
this.saveData();
},
onEditCell: function(row, key, e) {
this.$set(row.editing, key, true);
const parent = e.target.parentNode;
this.$nextTick(function() {
// console.log(parent.innerHTML, row)
parent.querySelector('input').focus();
});
},
onAdd: function(row, index) {
console.log(row, index);
this.tableData.splice(index + 1, 0, {
editing: {
name: true,
},
});
},
onRemove: function(row, index) {
this.tableData.splice(index, 1);
this.saveData();
},
onAddMember: function() {
this.memberSource.push({
editing: {
name: true,
},
});
},
onRemoveMember: function(row, index) {
var vm = this;
this.$confirm('删除不可撤销!可重新添加', '确定删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(function() {
vm.memberSource.splice(index, 1);
vm.saveData();
});
},
onImport: function() {
var vm = this;
this.$confirm('重新导入会覆盖现有人员列表', '确定重置吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(function() {
vm.memberSource = window.members.map(function(item) {
return {
name: item.name,
id: item.id,
editing: {},
};
});
vm.saveData();
});
},
saveData: function() {
localStorage.setItem('awards', JSON.stringify(this.awards));
localStorage.setItem('members', JSON.stringify(this.members));
localStorage.setItem(
'batchNumber',
JSON.stringify(this.batchNumber)
);
},
},
created: function() {
var awards = JSON.parse(localStorage.getItem('awards')) || [
{
name: '二等奖',
award: '办公室一日游',
count: 25,
},
{
name: '一等奖',
award: 'BMW X5',
count: 10,
},
{
name: '特等奖',
award: '深圳湾一号',
count: 1,
},
];
var members =
JSON.parse(localStorage.getItem('members')) || window.members;
this.batchNumber = +localStorage.getItem('batchNumber') || 20;
this.tableData = awards.map(function(item) {
return {
name: item.name,
count: item.count,
award: item.award,
editing: {},
};
});
this.memberSource = members.map(function(item) {
return {
name: item.name,
id: item.id,
editing: {},
};
});
this.saveData();
},
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。