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