Browse Source

tableform,验证

master
zhangli 1 year ago
parent
commit
b498cbe258
  1. 109
      src/components/BasicForm/src/BasicForm.vue
  2. 92
      src/components/TableForm/src/TableForm.vue
  3. 760
      src/utils/validator.ts
  4. 38
      src/views/wms/itembasic/ItembasicForm.vue
  5. 24
      src/views/wms/itempackaging/index.vue

109
src/components/BasicForm/src/BasicForm.vue

@ -1,6 +1,22 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <Dialog :title="dialogTitle" v-model="dialogVisible">
<Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="formSchema" :is-col="true" /> <Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="formSchema" :is-col="true" />
<div class="table">
<TableForm ref="tableFormRef"
class="w-[100%]"
:tableFields="tableAllSchemas.tableFormColumns"
:tableData="tableData"
:tableFormRules="tableFormRules"
@handleAddTable="handleAddTable"
@handleDeleteTable="handleDeleteTable"
@tableSelectionChange="tableSelectionChange"
@extendedButtonsClick="extendedButtonsClick"
@formSelectChange="formSelectChange"
@tableSortChange="tableSortChange"
@selectCallback="selectCallback"
@handleTableSelect="handleTableSelect"
@inpuFocus="inpuFocus"/>
</div>
<template #footer> <template #footer>
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" /> <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
</template> </template>
@ -10,7 +26,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { SearchTable } from '@/components/SearchTable'; import { SearchTable } from '@/components/SearchTable';
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
import ButtonBase from '@/components/XButton/src/ButtonBase.vue' import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
import TableForm from '@/components/TableForm/src/TableForm.vue'
const props = defineProps({ const props = defineProps({
// rules // rules
@ -25,11 +42,28 @@ const props = defineProps({
required: true, required: true,
default: null default: null
}, },
//
tableAllSchemas: {
type: Array,
required: true,
default: null
},
//
tableData:{
type: Array,
required: true,
default: null
},
tableFormRules: {
type: Array,
required: true,
default: null
},
// //
searchTableTitle: { searchTableTitle: {
type: String, type: String,
required: false, required: false,
default:'查询' default: '查询'
}, },
// Schemas // Schemas
searchTableAllSchemas: { searchTableAllSchemas: {
@ -111,6 +145,7 @@ const buttonBaseClick = (val) => {
// //
if (val == 'save') { if (val == 'save') {
submitForm() submitForm()
} }
// //
else if (val == 'close') { else if (val == 'close') {
@ -119,13 +154,21 @@ const buttonBaseClick = (val) => {
} }
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']) // success // const emit = defineEmits(['success']) // success
const tableFormRef = ref()
const submitForm = async () => { const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef() const elForm = unref(formRef)?.getElFormRef()
// //
if (!elForm) return if (!elForm) return
const valid = await elForm.validate() const valid = await elForm.validate()
if (!valid) return if (!valid) return
const validateForm = await tableFormRef.value.validateForm()
console.log(tableFormRef.value);
console.log(validateForm);
if (!validateForm) return;
// //
formLoading.value = true formLoading.value = true
try { try {
@ -151,4 +194,64 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
unref(formRef)?.resetFields() unref(formRef)?.resetFields()
} }
//
const emit = defineEmits([
'success',
'tableSelectionChange',
'extendedButtonsClick',
'formSelectChange',
'tableSortChange',
'selectCallback',
'handleTableSelect',
'handleDeleteTable',
'handleAddTable',
'inpuFocus'
])
//
const formSelectChange = (field, val) => {
emit('formSelectChange', field, val)
}
// selection
const tableSelectionChange = (val) => {
emit('tableSelectionChange', val)
}
//
const tableSortChange = (column, prop, order) => {
emit('tableSortChange', column, prop, order)
}
//
// const showSelect = (val, statusID) => {
// return getDictForStatusID(val, statusID)
// }
//
const handleTableSelect = (row, column, event) => {
emit('handleTableSelect', row, column, event)
}
//
const handleDeleteTable = (row, index) => {
console.log(row);
console.log(index);
emit('handleDeleteTable', row)
}
//
const handleAddTable = () => {
console.log(2);
emit('handleAddTable')
}
//
const inpuFocus = (headerItem) => {
opensearchTable()
}
</script> </script>
<style lang="scss" scoped>
.table {
border: 1px solid #dedede;
border-radius: 8px;
padding: 10px;
display: flex;
}
</style>

92
src/components/TableForm/src/TableForm.vue

@ -19,7 +19,7 @@
v-if="isShowButton" v-if="isShowButton"
v-slot="{ row, $index }" v-slot="{ row, $index }"
> >
<Icon icon="ep:remove" color="#409eff" size="26" style="cursor: pointer;margin-top: -16px;" @click="handleDelete(row, $index)" /> <Icon icon="ep:remove" color="#757575" size="26" style="cursor: pointer;margin-top: -16px;" @click="handleDeleteTable (row, $index)" />
</el-table-column> </el-table-column>
<!-- 多选 --> <!-- 多选 -->
<el-table-column <el-table-column
@ -46,7 +46,7 @@
:label="headerItem.label" :prop="headerItem.field" :label="headerItem.label" :prop="headerItem.field"
:align="headerItem?.tableForm?.align || 'center'" :align="headerItem?.tableForm?.align || 'center'"
:sortable="headerItem?.tableForm?.sortable || ''" :sortable="headerItem?.tableForm?.sortable || ''"
:width="headerItem?.tableForm?.width || 'auto'" :width="headerItem?.tableForm?.width || '200'"
:min-width="headerItem?.tableForm?.minWidth || 'auto'"> :min-width="headerItem?.tableForm?.minWidth || 'auto'">
<el-form ref="TableBaseForm_Ref" <el-form ref="TableBaseForm_Ref"
:model="row" :model="row"
@ -57,12 +57,30 @@
<el-form-item <el-form-item
v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'"
:prop="headerItem.field"> :prop="headerItem.field">
<el-input v-model="row[headerItem.field]" <el-input
v-model="row[headerItem.field]"
clearable
:type="headerItem?.tableForm?.inputType"
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label" :placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
style="width: 100%;" style="width: 100%;"
@focus="inpuFocus(headerItem)"
/> />
</el-form-item> </el-form-item>
<!-- 金额输入框 -->
<el-form-item
v-if="headerItem?.tableForm?.type == 'number'"
:prop="headerItem.field">
<el-input
v-model="row[headerItem.field]"
clearable
type="number"
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label"
:disabled="itemIsDisabled(headerItem, row)"
style="width: 100%;"
@input="row[headerItem.field] = row[headerItem.field].replace(/[^\d\.-]/g, '')"
/>
</el-form-item>
<!-- 数字输入框 --> <!-- 数字输入框 -->
<el-form-item <el-form-item
v-if="headerItem?.tableForm?.type == 'InputNumber'" v-if="headerItem?.tableForm?.type == 'InputNumber'"
@ -73,7 +91,7 @@
:max="headerItem?.tableForm?.max" :max="headerItem?.tableForm?.max"
:min="headerItem?.tableForm?.min" :min="headerItem?.tableForm?.min"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
@focus="inpuFocus(headerItem)"/> />
</el-form-item> </el-form-item>
<!-- 下拉框 --> <!-- 下拉框 -->
<el-form-item <el-form-item
@ -81,8 +99,12 @@
:prop="headerItem.field"> :prop="headerItem.field">
<el-select <el-select
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="headerItem?.tableForm.clearable" :clearable="headerItem?.tableForm.clearable || true"
:multiple="headerItem?.tableForm.multiple" :multiple="headerItem?.tableForm.multiple"
:size="headerItem?.tableForm.size"
:collapse-tags ="headerItem?.tableForm.collapseTags"
:collapse-tags-tooltip ="headerItem?.tableForm.collapseTagsTooltip"
:multiple-limit ="headerItem?.tableForm.multipleLimit"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:filterable="headerItem?.tableForm.filterable" :filterable="headerItem?.tableForm.filterable"
:allow-create="headerItem?.tableForm.allowCreate" :allow-create="headerItem?.tableForm.allowCreate"
@ -102,6 +124,7 @@
:prop="headerItem.field"> :prop="headerItem.field">
<el-time-picker <el-time-picker
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true"
:placeholder="headerItem?.tableForm?.placeholder || '选择时间'" :placeholder="headerItem?.tableForm?.placeholder || '选择时间'"
style="width: 100%" :disabled="itemIsDisabled(headerItem, row)" style="width: 100%" :disabled="itemIsDisabled(headerItem, row)"
:format="headerItem?.tableForm?.format || 'HH:mm:ss'" :format="headerItem?.tableForm?.format || 'HH:mm:ss'"
@ -113,6 +136,7 @@
:prop="headerItem.field"> :prop="headerItem.field">
<el-date-picker <el-date-picker
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true"
style="width: 100%" style="width: 100%"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期'" :placeholder="headerItem?.tableForm?.placeholder || '选择日期'"
@ -124,7 +148,8 @@
v-if="headerItem?.tableForm?.type == 'FormDateTime'" v-if="headerItem?.tableForm?.type == 'FormDateTime'"
:prop="headerItem.field"> :prop="headerItem.field">
<el-date-picker <el-date-picker
type="datetime" type="datetime"
:clearable="true"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期时间'" :placeholder="headerItem?.tableForm?.placeholder || '选择日期时间'"
style="width: 100%" style="width: 100%"
@ -137,7 +162,8 @@
v-if="headerItem?.tableForm?.type == 'FormTimerange'" v-if="headerItem?.tableForm?.type == 'FormTimerange'"
:prop="headerItem.field"> :prop="headerItem.field">
<el-date-picker <el-date-picker
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
:clearable="true"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
:type="headerItem?.tableForm?.timeType || 'datetimerange'" :type="headerItem?.tableForm?.timeType || 'datetimerange'"
range-separator="至" range-separator="至"
@ -219,12 +245,11 @@
</el-table> </el-table>
<div class="button flex" v-if="isShowButton"> <div class="button flex" v-if="isShowButton">
<div class="p-12px" @click="handleAdd"> <div class="p-12px" @click="handleAddTable">
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer;" /> <Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer;" />
<div>添加明细</div> <div>添加明细</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -295,11 +320,10 @@ const emit = defineEmits([
'extendedButtonsClick', 'extendedButtonsClick',
'formSelectChange', 'formSelectChange',
'tableSortChange', 'tableSortChange',
'showDrawer',
'selectCallback', 'selectCallback',
'handleTableSelect', 'handleTableSelect',
'handleDelete', 'handleDeleteTable',
'handleAdd', 'handleAddTable',
'inpuFocus' 'inpuFocus'
]) ])
// | type = radio | type = select // | type = radio | type = select
@ -319,9 +343,9 @@ const tableSortChange = (column, prop, order) => {
emit('tableSortChange', column, prop, order) emit('tableSortChange', column, prop, order)
} }
// //
const showSelect = (val, statusID) => { // const showSelect = (val, statusID) => {
return getDictForStatusID(val, statusID) // return getDictForStatusID(val, statusID)
} // }
// //
const handleTableSelect = (row, column, event) => { const handleTableSelect = (row, column, event) => {
@ -342,33 +366,26 @@ const TableBaseForm_Ref = ref()
* @param {*} error 如果验证不成功走的方法 * @param {*} error 如果验证不成功走的方法
*/ */
const $baseMessage = inject('$baseMessage') const validateForm = async () => {
const validateForm = (success, error) => {
let _lists = TableBaseForm_Ref.value.map(v => v.validate()) let _lists = TableBaseForm_Ref.value.map(v => v.validate())
Promise.all(_lists).then(res => { return Promise.all(_lists).then(res => {
if (success) success() return true
}).catch(err => { }).catch(err => {
if (error) { return false
error()
return
}
$baseMessage('验证未通过,请按规则填写', 'error', 'vab-hey-message-error')
}) })
} }
// //
const handleDelete = (row, index) => { const handleDeleteTable = (row, index) => {
console.log(row); emit('handleDeleteTable', row)
console.log(index);
emit('handleDelete', row)
} }
// //
const handleAdd = () => { const handleAddTable = () => {
emit('handleAdd') emit('handleAddTable')
} }
// //
const inpuFocus = (headerItem)=>{ const inpuFocus = (headerItem)=>{
if(headerItem.isInpuFocusShow){ if(headerItem?.tableForm?.isInpuFocusShow){
emit('inpuFocus') emit('inpuFocus')
} }
} }
// setup // setup
@ -376,6 +393,13 @@ defineExpose({
TableBaseComponents_Ref, TableBaseComponents_Ref,
validateForm validateForm
}) })
/** 弹层操作 */
const searchTableRef = ref()
const opensearchTable = () => {
searchTableRef.value.open('信息', props.searchTableAllSchemas, props.searchTablePage)
}
</script> </script>
@ -388,10 +412,12 @@ defineExpose({
border: none; border: none;
} }
::v-deep(.el-table td.el-table__cell div) { ::v-deep(.el-table td.el-table__cell .el-form-item__content) {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
}
::v-deep(.el-table td.el-table__cell div) {
overflow: visible; overflow: visible;
} }

760
src/utils/validator.ts

@ -0,0 +1,760 @@
//校验学校编码 只能为数字
export function validateCode(rule, value, callback) {
if (!value) {
return callback(new Error('学校编码不能为空'))
} else {
const codeReg = /^[0-9]+$/
const codeMax = /^\d{0,5}$/
if (codeReg.test(value)) {
if (codeMax.test(value)) {
callback()
} else {
callback(new Error('学校编码不能大于5位'))
}
} else {
callback(new Error('请输入正确的学校编码,只能是数字'))
}
}
}
//校验邮箱
export function validateEmail(rule, value, callback) {
if (value) {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
} else {
callback()
}
}
//校验英文
export function validateEng(rule, value, callback) {
if (value) {
const mailReg = /^[A-Za-z\-\&\(\)\Ⅰ\Ⅱ\Ⅲ\Ⅳ\Ⅴ\Ⅵ\Ⅶ\Ⅷ\Ⅸ\Ⅹ\s]+$/;
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的英文名字'))
}
} else {
callback()
}
}
//校验姓名拼音
export function validateEngName(rule, value, callback) {
if (value) {
const EngNameReg = /^[A-Za-z \(\)\s]+$/
if (EngNameReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的姓名拼音'))
}
} else {
callback()
}
}
//校验手机号码
export function validateHanset(rule, value, callback) {
if (value) {
// const regs =/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
// const regs = /^1[3|4|5|7|8][0-9]\d{8}$/
const regs = /^1[3-9]\d{9}$/
if (regs.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的手机号'))
}
} else {
callback()
}
}
//校验座机电话
export function validatePhone(rule, value, callback) {
if (value) {
//const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
// const regs = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
const regs = /^((0\d{2,3}-\d{7,8}))$/;
if (regs.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的座机号'))
}
} else {
callback()
}
}
//校验家庭电话 手机或者座机
export function validateFamilyPhone(rule, value, callback) {
if (value) {
const isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
// const isMob = /^((\+?86)|(\+86))?(13[0123456789][0-9]{8}|15[0123456789][0-9]{8}|17[0123456789][0-9]{8}|18[0123456789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
const isMob = /^1[3-9]\d{9}$/
if (isPhone.test(value) || isMob.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的手机或者座机电话'))
}
} else {
callback()
}
}
// 校验只能为中文
export function validateChinese(rule, value, callback) {
if (value) {
const chineseReg = /^[\u4E00-\u9FA5]+$/
if (chineseReg.test(value)) {
callback()
} else {
callback(new Error('请输入简介,只能为中文'))
}
} else {
callback()
}
}
// 校验名称既能为中文也可以为英文
export function validateName(rule, value, callback) {
if (value) {
const chineseReg = /^[\u4E00-\u9FA5]+$/
const engLish = /^[A-Za-z]+$/
if (chineseReg.test(value) || engLish.test(value)) {
callback()
} else {
callback(new Error('请输入正确的中文或者英文名称'))
}
} else {
callback()
}
}
// 校验负责人既能为中文也可以为英文
export function validateChargeperson(rule, value, callback) {
if (value) {
const chineseReg = /^[\u4E00-\u9FA5]+$/
const engLish = /^[A-Za-z]+$/
if (chineseReg.test(value) || engLish.test(value)) {
callback()
} else {
callback(new Error('请输入正确的负责人(中英文都可以)'))
}
} else {
callback()
}
}
//校验学校名称不能为空
export function validateXXMC(rule, value, callback) {
if (!value) {
return callback(new Error('案例名称不能为空'))
} else {
const chineseReg = /^[\u4E00-\u9FA5]+$/
if (chineseReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的案例名称,只能是汉字'))
}
}
}
//校验中英文数字和下划线都可以
export function validateZYS(rule, value, callback) {
if (value) {
//const postReg =/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}+$/
const Reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/
if (Reg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的名称'))
}
} else {
callback()
}
}
// 校验邮政编码
export function validatePostCode(rule, value, callback) {
if (value) {
const postReg = /^[1-9]\d{5}$/
if (postReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮政编码'))
}
} else {
callback()
}
}
// 数字
export function validateNum(rule, value, callback) {
if (value) {
const numReg = /^[\d]+$/
if (numReg.test(value)) {
callback()
} else {
callback(new Error('请输入数字'))
}
} else {
callback()
}
}
//数字和小数点
export function validateNumDot(rule, value, callback) {
if (value) {
const numReg = /^\d+$|^\d+\.\d+$/g
if (numReg.test(value)) {
callback()
} else {
callback(new Error('请输入数字或小数点'))
}
} else {
callback()
}
}
// 组织机构代码
export function validateOrganization(rule, value, callback) {
if (value) {
const orgReg = /^[A-Za-z0-9]\w{14}$/g
if (orgReg.test(value)) {
callback()
} else {
callback(new Error('请输入组织机构代码'))
}
} else {
callback()
}
}
// 传真
export function validateFax(rule, value, callback) {
if (value) {
const faxReg = /^(\d{3,4}-)?\d{7,8}$/
if (faxReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的传真'))
}
} else {
callback()
}
}
// 主页地址
export function validateHome(rule, value, callback) {
if (value) {
const homeReg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
if (homeReg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的主页地址'))
}
} else {
callback()
}
}
// 学分 小数,且保留最多三位小数
export function validateXf(rule, value, callback) {
if (!value) {
return callback(new Error('学分不能为空'))
} else {
const numReg = /^[0-9]+\.[0-9]{0,3}$/
if (numReg.test(value)) {
callback()
} else {
callback(new Error('请输入小数,且小数点后最多三位'))
}
}
}
// 数字格式 小数点后一位
export function validateOneNum(rule, value, callback) {
if (value) {
const numReg = /^\d+(\.\d+)?$/
const numOneReg = /^\d*\.{0,1}\d{0,1}$/
if (numReg.test(value)) {
if (numOneReg.test(value)) {
callback()
} else {
callback(new Error('小数点后最多1位'))
}
} else {
callback(new Error('请输入数字'))
}
}
callback()
}
// 数字格式 小数点后两位
export function validateTwoNum(rule, value, callback) {
if (value) {
const numReg = /^\d+(\.\d+)?$/
const numTwoReg = /^\d*\.{0,2}\d{0,2}$/
if (numReg.test(value)) {
if (numTwoReg.test(value)) {
callback()
} else {
callback(new Error('小数点后最多2位'))
}
} else {
callback(new Error('请输入数字'))
}
}
callback()
}
// 数字格式 小数点后两位 小数点前保留五位
export function validateTwoNumThree(rule, value, callback) {
if (value) {
if (Number(value) > 10000) {// 校验value值不能大于10000
callback(new Error('数值过大,请重新输入'))
}
const numReg = /^\d+(\.\d+)?$/
const numTwoReg = /^\d*\.{0,2}\d{0,2}$/
if (numReg.test(value)) {
if (numTwoReg.test(value)) {
callback()
} else {
callback(new Error('小数点后最多2位'))
}
} else {
callback(new Error('请输入数字'))
}
}
callback()
}
// 数字格式 小数点后三位
export function validateThreeNum(rule, value, callback) {
if (value) {
const numReg = /^\d+(\.\d+)?$/
const numTwoReg = /^\d*\.{0,3}\d{0,3}$/
if (numReg.test(value)) {
if (numTwoReg.test(value)) {
callback()
} else {
callback(new Error('小数点后最多3位'))
}
} else {
callback(new Error('请输入数字'))
}
}
callback()
// if (!value) {
// return callback(new Error('字段不能为空'))
// } else {
// const numReg = /^\d+(\.\d+)?$/
// const numTwoReg = /^\d*\.{0,3}\d{0,3}$/
// if (numReg.test(value)) {
// if (numTwoReg.test(value)) {
// callback()
// } else {
// callback(new Error('小数点后最多3位'))
// }
// } else {
// callback(new Error('请输入数字'))
// }
// }
}
//校验年份必须为4位数字
export function validateNF(rule, value, callback) {
if (value) {
const NFReg = /^\d{4}$/
if (NFReg.test(value)) {
callback()
} else {
callback(new Error('请输入4位数字'))
}
} else {
callback()
}
}
//校验年份必须为4位数字
export function validateXQ(rule, value, callback) {
if (value) {
const NFReg = /^\d{5}$/
if (NFReg.test(value)) {
callback()
} else {
callback(new Error('请输入5位数字'))
}
} else {
callback()
}
}
//校验分数最大值
export function validateMaxNumber(rule, value, callback) {
if (parseInt(value) <= 200) {
callback()
} else {
callback(new Error('分数不能大于200'))
}
}
//校验正整数
export function validateInteger(rule, value, callback) {
if (value) {
const integerReg = /^[+]{0,1}(\d+)$/
if (integerReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的整数'))
}
} else {
callback()
}
}
//校验整数
export function validateroundNumber(rule, value, callback) {
if (value) {
const numReg = /^[1-9]\d*$/
if (numReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的整数'))
}
} else {
callback()
}
}
//校验身份证号
export function validateCard(rule, value, callback) {
if (value) {
const cardBoolean = IdCardValidate(value);
// const cardReg =/(^\d{18}$)|(^\d{17}(\d|X|x)$)/
// if (cardReg.test(value)) {
if (cardBoolean) {
callback()
} else {
callback(new Error('请输入正确的身份证号'))
}
} else {
callback()
}
}
//身份证:身份证校验
function IdCardValidate(code) {
let tip = "";
if (code != "") {
const city = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江 ",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏 ",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外 "
};
let pass = true;
//是否为空
if (code === '') {
tip = "请输入身份证号,身份证号不能为空";
pass = false;
}
//校验长度,类型
else if (isCardNo(code) === false) {
tip = "您输入的身份证号码不正确,请重新输入";
pass = false;
}
//检查省份
else if (checkProvince(code, city) === false) {
tip = "您输入的身份证号码不正确,请重新输入";
pass = false;
}
//校验生日
else if (checkBirthday(code) === false) {
tip = "您输入的身份证号码生日不正确,请重新输入";
pass = false;
} else {
//18位身份证需要验证最后一位校验位
if (code.length == 18) {
code = code.split('');
//∑(ai×Wi)(mod 11)
//加权因子
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
//校验位
const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
let sum = 0;
let ai = 0;
let wi = 0;
for (let i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
const last = parity[sum % 11];
if (parity[sum % 11] != code[17]) {
tip = "身份证格式错误";
pass = false;
}
}
}
return pass;
}
}
//身份证:检查身份证号码是否符合规范,包括长度,类型
function isCardNo(card) {
//身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
const reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
if (reg.test(card) === false) {
return false;
}
return true;
};
//身份证:取身份证前两位,校验省份
function checkProvince(card, city) {
const province = card.substr(0, 2);
if (city[province] == undefined) {
return false;
}
return true;
};
//身份证:检查生日是否正确
function checkBirthday(card) {
const len = card.length;
//身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字
if (len == '15') {
const re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
const arr_data = card.match(re_fifteen);
const year = arr_data[2];
const month = arr_data[3];
const day = arr_data[4];
const birthday = new Date('19' + year + '/' + month + '/' + day);
return verifyBirthday('19' + year, month, day, birthday);
}
//身份证18位时,次序为省(3位)市(3位)年(4位)月(2位)日(2位)校验位(4位),校验位末尾可能为X
if (len == '18') {
const re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
const arr_data = card.match(re_eighteen);
const year = arr_data[2];
const month = arr_data[3];
const day = arr_data[4];
const birthday = new Date(year + '/' + month + '/' + day);
return verifyBirthday(year, month, day, birthday);
}
return false;
};
//身份证:校验日期
function verifyBirthday(year, month, day, birthday) {
const now = new Date();
const now_year = now.getFullYear();
//年月日是否合理
if (birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day) {
//判断年份的范围(3岁到100岁之间)
const time = now_year - year;
if (time >= 3 && time <= 100) {
return true;
}
return false;
}
return false;By18Val
};
/**
* 18
* @param a_idCard
* @return
*/
function isTrueValidateCodeBy18IdCard(a_idCard) {
const By18Val = a_idCard[17].toLowerCase(); // 获取第十八位值
const numReg = /^[1-9]\d*$/
let numVal = false; // 校验第十八位是否为整数
if (numReg.test(Number(By18Val))) {
numVal = true
} else {
numVal = false
}
if (By18Val == 'x' || By18Val == 'X' || numVal) {
return true
} else {
return false
}
}
/**
*
* @param AddressNum
* @constructor
*/
function IdCardValidateAddress(AddressNum) {
const city = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江 ",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏 ",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外 "
};
if (city[AddressNum.substr(0, 2)]) {
return true
} else {
return false
}
}
/**
* 18
* @param idCard 18
* @return
*/
function isValidityBrithBy18IdCard(idCard18) {
const year = idCard18.substring(6, 10);
const month = idCard18.substring(10, 12);
const day = idCard18.substring(12, 14);
const temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 这里用getFullYear()获取年份,避免千年虫问题
if (temp_date.getFullYear() != parseFloat(year)
|| temp_date.getMonth() != parseFloat(month) - 1
|| temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}
/**
* 15
* @param idCard15 15
* @return
*/
function isValidityBrithBy15IdCard(idCard15) {
const year = idCard15.substring(6, 8);
const month = idCard15.substring(8, 10);
const day = idCard15.substring(10, 12);
const temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
if (temp_date.getYear() != parseFloat(year)
|| temp_date.getMonth() != parseFloat(month) - 1
|| temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}
/**
*
* @param str
* @returns {*}
*/
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
export default {
validateCode,
validateEmail,
validateEng,
validatePhone,
validateChinese,
validatePostCode,
validateNum,
validateNumDot,
validateZYS,
validateOrganization,
validateFax,
validateHome,
validateXXMC,
validateXf,
validateOneNum,
validateMaxNumber,
validateTwoNum,
validateTwoNumThree,
validateThreeNum,
validateInteger,
validateNF,
validateXQ,
validateroundNumber,
validateEngName,
validateCard,
validateHanset,
validateFamilyPhone,
validateName,
validateChargeperson,
}

38
src/views/wms/itembasic/ItembasicForm.vue

@ -4,7 +4,7 @@
<Form ref="formRef" v-loading="formLoading" :rules="ItemBasicRules" :schema="ItemBasic.allSchemas.formSchema" <Form ref="formRef" v-loading="formLoading" :rules="ItemBasicRules" :schema="ItemBasic.allSchemas.formSchema"
:model="formData" :is-col="true" /> :model="formData" :is-col="true" />
<div class="table"> <div class="table">
<TableForm ref="tableFormRef" :tableFields="ItemBasic.allSchemas.tableFormColumns" :tableData="tableData" class="w-[100%]" @handleAdd="handleAdd" :tableFormRules="ItemBasicRules" @handleDelete="handleDelete" @inpuFocus="inpuFocus"/> <TableForm ref="tableFormRef" :tableFields="PurchaseclaimRequestMain.allSchemas.tableFormColumns" :tableData="tableData" class="w-[100%]" @handleAdd="handleAdd" :tableFormRules="ItemBasicRules" @handleDelete="handleDelete" @inpuFocus="inpuFocus"/>
</div> </div>
</div> </div>
<template #footer> <template #footer>
@ -15,10 +15,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import * as ItembasicApi from '@/api/wms/itembasic' import * as ItembasicApi from '@/api/wms/itembasic'
import { ItemBasic, ItemBasicRules } from '@/utils/disposition/tableColumns.ts' import { ItemBasic, ItemBasicRules, PurchaseclaimRequestMain } from '@/utils/disposition/tableColumns.ts'
import TableForm from '@/components/TableForm/src/TableForm.vue' import TableForm from '@/components/TableForm/src/TableForm.vue'
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
console.log(ItemBasic);
const { t } = useI18n() // const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
@ -127,37 +126,14 @@ const buttonBaseClick = (val, item) => {
} }
} }
// const tableData = ref([{ const tableFormKeys ={}
// code: '', PurchaseclaimRequestMain.allSchemas.tableFormColumns.forEach(item=>{
// name:'', tableFormKeys[item.field]=item.default? item.default:''
// unit:'', })
// num: '20',
// isStdPack:'FALSE'
// }, {
// code: 'GOODS-0202-12',
// name: '',
// unit: '',
// num: '20'
// }, {
// code: 'GOODS-0202-12',
// name: '',
// unit: '',
// num: '20'
// }, {
// code: 'GOODS-0202-12',
// name: '',
// unit: '',
// num: '20'
// }])
const tableData = ref([]) const tableData = ref([])
// //
const handleAdd = ()=>{ const handleAdd = ()=>{
tableData.value.push({ tableData.value.push(tableFormKeys)
code: '',
name: '',
unit: '',
num: ''
})
} }
// //

24
src/views/wms/itempackaging/index.vue

@ -37,11 +37,16 @@
@success="getList" @success="getList"
:rules="ItempackagingRules" :rules="ItempackagingRules"
:formAllSchemas="Itempackaging.allSchemas" :formAllSchemas="Itempackaging.allSchemas"
:tableAllSchemas="PurchaseclaimRequestDetail.allSchemas"
:tableFormRules="PurchaseclaimRequestDetailRules"
:tableData="tableData"
searchTableTitle="物料基础信息" searchTableTitle="物料基础信息"
:searchTableAllSchemas="ItemBasic.allSchemas" :searchTableAllSchemas="ItemBasic.allSchemas"
:searchTablePage="ItembasicApi.getItembasicPage" :searchTablePage="ItembasicApi.getItembasicPage"
:apiUpdate="ItempackagingApi.updateItempackaging" :apiUpdate="ItempackagingApi.updateItempackaging"
:apiCreate="ItempackagingApi.createItempackaging" :apiCreate="ItempackagingApi.createItempackaging"
@handleAddTable="handleAddTable"
@handleDeleteTable="handleDeleteTable"
/> />
<!-- 详情 --> <!-- 详情 -->
@ -56,7 +61,7 @@ import download from '@/utils/download'
import * as ItempackagingApi from '@/api/wms/itempackaging' import * as ItempackagingApi from '@/api/wms/itempackaging'
import * as ItembasicApi from '@/api/wms/itembasic' import * as ItembasicApi from '@/api/wms/itembasic'
import BasicForm from '@/components/BasicForm/src/BasicForm.vue' import BasicForm from '@/components/BasicForm/src/BasicForm.vue'
import { Itempackaging, ItempackagingRules, ItemBasic } from '@/utils/disposition/tableColumns' import { Itempackaging, ItempackagingRules, ItemBasic, PurchaseclaimRequestDetail,PurchaseclaimRequestDetailRules } from '@/utils/disposition/tableColumns'
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
import TableHead from '@/components/TableHead/src/TableHead.vue' import TableHead from '@/components/TableHead/src/TableHead.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
@ -178,6 +183,23 @@ const importTemplateData = reactive({
const importSuccess = () => { const importSuccess = () => {
getList() getList()
} }
/**
* tableForm方法
*/
const tableFormKeys = {}
PurchaseclaimRequestDetail.allSchemas.tableFormColumns.forEach(item => {
tableFormKeys[item.field] = item.default ? item.default : ''
})
const tableData = ref([])
//
const handleAddTable = () => {
tableData.value.push(JSON.parse(JSON.stringify(tableFormKeys)))
console.log(tableData.value)
}
//
const handleDeleteTable = (item, index) => {
tableData.value.splice(index, 1)
}
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {

Loading…
Cancel
Save