16 changed files with 3638 additions and 1714 deletions
@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<div class="tableClass"> |
||||
|
<el-form :model="formData" label-suffix="：" :disabled="disabled" inline> |
||||
|
<el-form-item :label="formItem.label" :key="formIndex" v-for="(formItem, formIndex) in formHeader"> |
||||
|
<template v-if="formItem.type === 'text'"> |
||||
|
<el-input v-model="formData[formItem.prop]" /> |
||||
|
</template> |
||||
|
<template v-else-if="formItem.type === 'number'"> |
||||
|
<el-input-number v-model="formData[formItem.prop]" :min="formItem.min" :max="formItem.max"> |
||||
|
<template #decrease-icon> |
||||
|
<el-icon> |
||||
|
<ArrowDown /> |
||||
|
</el-icon> |
||||
|
</template> |
||||
|
<template #increase-icon> |
||||
|
<el-icon> |
||||
|
<ArrowUp /> |
||||
|
</el-icon> |
||||
|
</template> |
||||
|
</el-input-number> |
||||
|
</template> |
||||
|
<template v-else-if="formItem.type === 'date'"> |
||||
|
<el-date-picker v-model="formData[formItem.prop]" type="date" |
||||
|
:disabled="['create_at', 'update_at'].indexOf(formItem.prop) !== -1" |
||||
|
:placeholder="`请选择${formItem.label}`" /> |
||||
|
</template> |
||||
|
<template v-else-if="formItem.type === 'radio'"> |
||||
|
<el-radio-group v-model="formData[formItem.prop]"> |
||||
|
<el-radio :value="item.value" size="large" v-for="(item, index) in formItem.options" |
||||
|
:key="index">{{ item.label }}</el-radio> |
||||
|
</el-radio-group> |
||||
|
</template> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import _, { max, min } from 'lodash' |
||||
|
import dayjs from 'dayjs' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
export default { |
||||
|
name: 'formcomponentchangci', |
||||
|
components: {}, |
||||
|
props: { |
||||
|
formHeader: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
formData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
_: _, |
||||
|
dayjs: dayjs, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: {}, |
||||
|
async mounted() { }, |
||||
|
watch: {}, |
||||
|
computed: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.tableClass { |
||||
|
text-align: left; |
||||
|
text-align-last: left; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<div class="tableClass"> |
||||
|
<el-table :data="tableData" height="calc(100vh - 96px)" border @select="selectChange" @select-all="selectChange" fit |
||||
|
:row-key="getRowKeys" ref="tableRef"> |
||||
|
<el-table-column type="selection" width="50" :reserve-selection="true" fixed="left"> |
||||
|
</el-table-column> |
||||
|
<el-table-column type="index" v-if="hiddenXuhao" width="60" :reserve-selection="true" fixed="left" label="序号"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ pageSize * (currentPage - 1) + scope.$index + 1 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column v-for="(headerItem, headerIndex) in tableHeader" :label="headerItem.label" show-overflow-tooltip |
||||
|
:key="headerIndex" :min-width="`${headerItem.label.length * 15 + 8}px`" :width="headerItem.width"> |
||||
|
<template #default="scope"> |
||||
|
<template v-if="headerItem.type === 'text'"> |
||||
|
<span>{{ scope.row[headerItem.prop] }}</span> |
||||
|
</template> |
||||
|
<template v-else-if="headerItem.type === 'date'"> |
||||
|
<span>{{ scope.row[headerItem.prop] }}</span> |
||||
|
</template> |
||||
|
<template v-else-if="headerItem.type === 'number'"> |
||||
|
<span>{{ scope.row[headerItem.prop] }}</span> |
||||
|
</template> |
||||
|
<template v-else-if="headerItem.type === 'radio'"> |
||||
|
<span>{{ _.find(headerItem.options, { value: scope.row[headerItem.prop] }).label }}</span> |
||||
|
</template> |
||||
|
<template v-else>{{ scope.row[headerItem.prop] }}</template> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" width="145"> |
||||
|
<template #default="scope"> |
||||
|
<el-button type="primary" circle @click="optClick(scope.row, 'edit')"> |
||||
|
<el-icon> |
||||
|
<Edit /> |
||||
|
</el-icon> |
||||
|
</el-button> |
||||
|
<el-button type="info" circle @click="optClick(scope.row, 'info')"> |
||||
|
<el-icon> |
||||
|
<InfoFilled /> |
||||
|
</el-icon> |
||||
|
</el-button> |
||||
|
<el-button type="danger" circle @click="optClick(scope.row, 'del')"> |
||||
|
<el-icon> |
||||
|
<Delete /> |
||||
|
</el-icon> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination style="margin:8px 0 0 0;place-content:center;" v-model:current-page="currentPage" |
||||
|
v-model:page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" |
||||
|
:page-sizes="pageSizes"></el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import _ from 'lodash' |
||||
|
import dayjs from 'dayjs' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
export default { |
||||
|
name: 'tablecomponentchangci', |
||||
|
components: {}, |
||||
|
emits: ["selectChange", "handleCurrentChange", "handleSizeChange", "edit", "info", "del"], |
||||
|
props: { |
||||
|
tableHeader: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
tableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
pageSizes: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [12, 50, 100, 200] |
||||
|
} |
||||
|
}, |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 0 |
||||
|
} |
||||
|
}, |
||||
|
hiddenXuhao: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
_: _, |
||||
|
dayjs: dayjs, |
||||
|
currentPage: 1, |
||||
|
pageSize: 12, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
selectChange(selection) { |
||||
|
this.$emit("selectChange", selection) |
||||
|
}, |
||||
|
handleSizeChange(pageSize) { |
||||
|
this.$emit("handleSizeChange", pageSize) |
||||
|
}, |
||||
|
handleCurrentChange(currentPage) { |
||||
|
this.$emit("handleCurrentChange", currentPage) |
||||
|
}, |
||||
|
optClick(row, type) { |
||||
|
this.$emit(type, row) |
||||
|
}, |
||||
|
// 确定唯一的key值 |
||||
|
getRowKeys(row) { |
||||
|
return row.id; // 每条数据的唯一识别值 |
||||
|
}, |
||||
|
clearSelection() { |
||||
|
this.$refs.tableRef.clearSelection() |
||||
|
} |
||||
|
}, |
||||
|
async mounted() { }, |
||||
|
watch: { |
||||
|
currentPage: { |
||||
|
handler(val) { |
||||
|
this.$emit("handleCurrentChange", val) |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
pageSize: { |
||||
|
handler(val) { |
||||
|
this.$emit("handleSizeChange", val) |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
}, |
||||
|
computed: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.tableClass { |
||||
|
text-align: center; |
||||
|
text-align-last: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,233 @@ |
|||||
|
<template> |
||||
|
<div class="rightClass"> |
||||
|
<el-row :gutter="8"> |
||||
|
<!-- <el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-radio-group v-model="form.caipiaotype"> |
||||
|
<el-radio value="1" size="large">福彩</el-radio> |
||||
|
<el-radio value="2" size="large">体彩</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</el-col> --> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.danxuan" style="max-width: 600px" :formatter="(value) => `单选：${value}`" |
||||
|
:parser="(value) => value.replace(/[单|选|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.zuxuan" style="max-width: 600px" :formatter="(value) => `组选：${value}`" |
||||
|
:parser="(value) => value.replace(/[组|选|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.shuangfei" style="max-width: 600px" :formatter="(value) => `双飞：${value}`" |
||||
|
:parser="(value) => value.replace(/[双|飞|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.dudan" style="max-width: 600px" :formatter="(value) => `毒胆：${value}`" |
||||
|
:parser="(value) => value.replace(/[毒|胆|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="9"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.dingwei1" style="max-width: 600px" :formatter="(value) => `定位（一码）：${value}`" |
||||
|
:parser="(value) => value.replace(/[定|位|（|一|码|）|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="9"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.dingwei2" style="max-width: 600px" :formatter="(value) => `定位（二码以上）：${value}`" |
||||
|
:parser="(value) => value.replace(/[定|位|（|二|码|以|上|）|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<!-- <el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.budingwei" style="max-width: 600px" :formatter="(value) => `不定位：${value}`" |
||||
|
:parser="(value) => value.replace(/[不|定|位|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> --> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.fushiduizi" style="max-width: 600px" :formatter="(value) => `复式对子：${value}`" |
||||
|
:parser="(value) => value.replace(/[复|式|对|子|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.fushi" style="max-width: 600px" :formatter="(value) => `复式：${value}`" |
||||
|
:parser="(value) => value.replace(/[复|式|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="colDivClass"> |
||||
|
<el-input v-model="form.quanbaoduizi" style="max-width: 600px" :formatter="(value) => `全包对子：${value}`" |
||||
|
:parser="(value) => value.replace(/[全|包|对|子：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="colDivClass"> |
||||
|
<div>组六：</div> |
||||
|
<el-input v-model="form.zuliu4" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `四码：${value}`" |
||||
|
:parser="(value) => value.replace(/[四|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zuliu5" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `五码：${value}`" |
||||
|
:parser="(value) => value.replace(/[五|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zuliu6" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `六码：${value}`" |
||||
|
:parser="(value) => value.replace(/[六|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zuliu7" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `七码：${value}`" |
||||
|
:parser="(value) => value.replace(/[七|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="colDivClass"> |
||||
|
<div>组三：</div> |
||||
|
<el-input v-model="form.zusan4" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `四码：${value}`" |
||||
|
:parser="(value) => value.replace(/[四|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zusan5" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `五码：${value}`" |
||||
|
:parser="(value) => value.replace(/[五|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zusan6" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `六码：${value}`" |
||||
|
:parser="(value) => value.replace(/[六|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.zusan7" style="max-width: 600px;margin: 8px 0;" :formatter="(value) => `七码：${value}`" |
||||
|
:parser="(value) => value.replace(/[七|码|：]\s?|(,*)/g, '')"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div style="text-align: center;margin-top: 20vh"> |
||||
|
<el-button text type="danger" @click="savePeifu">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import _ from 'lodash' |
||||
|
import dayjs from 'dayjs' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
export default { |
||||
|
name: 'peifubeilv', |
||||
|
components: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
_: _, |
||||
|
dayjs: dayjs, |
||||
|
form: { |
||||
|
caipiaotype: "1", |
||||
|
danxuan: 900, |
||||
|
zuxuan: 150, |
||||
|
shuangfei: 15, |
||||
|
dudan: 3.3, |
||||
|
dingwei1: 9, |
||||
|
dingwei2: 80, |
||||
|
budingwei: 0, |
||||
|
fushiduizi: 300, |
||||
|
fushi: 150, |
||||
|
quanbaoduizi: 3.3, |
||||
|
zuliu4: 35, |
||||
|
zuliu5: 15, |
||||
|
zuliu6: 7, |
||||
|
zuliu7: 4, |
||||
|
zusan4: 24, |
||||
|
zusan5: 15, |
||||
|
zusan6: 8, |
||||
|
zusan7: 6, |
||||
|
// bai: 0, |
||||
|
// shi: 0, |
||||
|
// ge: 0 |
||||
|
}, |
||||
|
formLocal: { |
||||
|
caipiaotype: "1", |
||||
|
danxuan: 900, |
||||
|
zuxuan: 150, |
||||
|
shuangfei: 15, |
||||
|
dudan: 3.3, |
||||
|
dingwei1: 9, |
||||
|
dingwei2: 80, |
||||
|
budingwei: 0, |
||||
|
fushi: 150, |
||||
|
quanbaoduizi: 3.3, |
||||
|
zuliu4: 35, |
||||
|
zuliu5: 15, |
||||
|
zuliu6: 7, |
||||
|
zuliu7: 4, |
||||
|
zusan4: 24, |
||||
|
zusan5: 15, |
||||
|
zusan6: 8, |
||||
|
zusan7: 6, |
||||
|
// bai: 0, |
||||
|
// shi: 0, |
||||
|
// ge: 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
savePeifu() { |
||||
|
let isNumber = true |
||||
|
try { |
||||
|
let form = _.cloneDeep(this.form) |
||||
|
for (let key in form) { |
||||
|
if (key !== "caipiaotype") { |
||||
|
if (!_.isNaN(Number(form[key]))) { |
||||
|
form[key] = Number(form[key]) |
||||
|
} else { |
||||
|
isNumber = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
console.log(999, isNumber) |
||||
|
if (isNumber) { |
||||
|
localStorage.setItem('peifu', JSON.stringify(form)) |
||||
|
} else { |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '保存失败,请输入数字，暂不支持汉字', |
||||
|
showClose: true, |
||||
|
duration: 3000 |
||||
|
}) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: `${error}`, |
||||
|
showClose: true, |
||||
|
duration: 3000 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
async mounted() { |
||||
|
this.form = JSON.parse(localStorage.getItem('peifu') || 0) || this.formLocal |
||||
|
}, |
||||
|
watch: {}, |
||||
|
computed: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.rightClass { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.colDivClass { |
||||
|
border: 1px solid #ccc; |
||||
|
padding: 8px; |
||||
|
margin: 8px; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue