You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

288 lines
11 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
v-loading="formLoading"
label-width="0px"
:inline-message="true"
>
<el-table :data="formData" class="-mt-10px">
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableIndexColumn')" type="index" width="100" />
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTablePartIndexColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.partIndex`" :rules="formRules.partIndex" class="mb-0px!">
<el-input
v-model="row.partIndex"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderPartIndex')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTablePartTypeColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.partType`" :rules="formRules.partType" class="mb-0px!">
<el-radio-group v-model="row.partType">
<el-radio
v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_PARTTYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTablePartCodeColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.partCode`" :rules="formRules.partCode" class="mb-0px!">
<el-input
v-model="row.partCode"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderPartCode')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTablePartNameColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.partName`" :rules="formRules.partName" class="mb-0px!">
<el-input
v-model="row.partName"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderPartName')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTablePartLengthColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.partLength`" :rules="formRules.partLength" class="mb-0px!">
<el-input
v-model="row.partLength"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderPartLength')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableDatetimeFormatColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.datetimeFormat`" :rules="formRules.datetimeFormat" class="mb-0px!">
<el-input
v-model="row.datetimeFormat"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderDatetimeFormat')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableInputCharacterColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.inputCharacter`" :rules="formRules.inputCharacter" class="mb-0px!">
<el-input
v-model="row.inputCharacter"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderInputCharacter')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableFixCharacterColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.fixCharacter`" :rules="formRules.fixCharacter" class="mb-0px!">
<el-input
v-model="row.fixCharacter"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderFixCharacter')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableSeriaStartNoColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.seriaStartNo`" :rules="formRules.seriaStartNo" class="mb-0px!">
<el-input
v-model="row.seriaStartNo"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderSeriaStartNo')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableSeriaStepColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.seriaStep`" :rules="formRules.seriaStep" class="mb-0px!">
<el-input
v-model="row.seriaStep"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderSeriaStep')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableSeriaNowNoColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.seriaNowNo`" :rules="formRules.seriaNowNo" class="mb-0px!">
<el-input
v-model="row.seriaNowNo"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderSeriaNowNo')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableCycleFlagColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.cycleFlag`" :rules="formRules.cycleFlag" class="mb-0px!">
<el-radio-group v-model="row.cycleFlag">
<el-radio
v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_IS_PADDING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableCycleMethodColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.cycleMethod`" :rules="formRules.cycleMethod" class="mb-0px!">
<el-radio-group v-model="row.cycleMethod">
<el-radio
v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_CYCLEMETHOD)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableRemarkColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.remark`" :rules="formRules.remark" class="mb-0px!">
<el-input
v-model="row.remark"
:placeholder="t('FactoryModeling.AutocodeRule.partPlaceholderRemark')"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="t('FactoryModeling.AutocodeRule.partTableIsEnableColumn')" min-width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.isEnable`" :rules="formRules.isEnable" class="mb-0px!">
<el-radio-group v-model="row.isEnable">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column
align="center"
fixed="right"
:label="t('FactoryModeling.AutocodeRule.partTableOperateColumn')"
width="60"
>
<template #default="{ $index }">
<el-button @click="handleDelete($index)" link>—</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-row justify="center" class="mt-3">
<el-button @click="handleAdd" round>+ {{ t('FactoryModeling.AutocodeRule.addPartButtonText') }}</el-button>
</el-row>
</template>
<script setup lang="ts">
import { getStrDictOptions, getBoolDictOptions, DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { AutocodeRuleApi } from '@/api/erp/autocode'
const { t } = useI18n() //
const props = defineProps<{
ruleId: undefined // ID
}>()
const formLoading = ref(false) // 表单的加载中
const formData = ref([])
const formRules = reactive({
ruleId: [
{ required: true, message: t('FactoryModeling.AutocodeRule.validatorRuleIdRequired'), trigger: 'blur' }
],
partIndex: [
{ required: true, message: t('FactoryModeling.AutocodeRule.validatorPartIndexRequired'), trigger: 'blur' }
],
partLength: [
{ required: true, message: t('FactoryModeling.AutocodeRule.validatorPartLengthRequired'), trigger: 'blur' }
],
isEnable: [
{ required: true, message: t('FactoryModeling.AutocodeRule.validatorIsEnableRequired'), trigger: 'blur' }
]
})
const formRef = ref() // 表单 Ref
/** 监听主表的关联字段的变化,加载对应的子表数据 */
watch(
() => props.ruleId,
async (val) => {
// 1. 重置表单
formData.value = []
// 2. val 非空,则加载数据
if (!val) {
return;
}
try {
formLoading.value = true
formData.value = await AutocodeRuleApi.getAutocodePartListByRuleId(val)
} finally {
formLoading.value = false
}
},
{ immediate: true }
)
/** 新增按钮操作 */
const handleAdd = () => {
const row = {
id: undefined,
ruleId: undefined,
partIndex: undefined,
partType: undefined,
partCode: undefined,
partName: undefined,
partLength: undefined,
datetimeFormat: undefined,
inputCharacter: undefined,
fixCharacter: undefined,
seriaStartNo: undefined,
seriaStep: undefined,
seriaNowNo: undefined,
cycleFlag: undefined,
cycleMethod: undefined,
remark: undefined,
isEnable: undefined
}
row.ruleId = props.ruleId
formData.value.push(row)
}
/** 删除按钮操作 */
const handleDelete = (index) => {
formData.value.splice(index, 1)
}
/** 表单校验 */
const validate = () => {
return formRef.value.validate()
}
/** 表单值 */
const getData = () => {
return formData.value
}
defineExpose({ validate, getData })
</script>