sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tableForm

master
zhangli 1 year ago
parent
eb17cd6193
commit
223842fef9
3 changed files with 257 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 382
      src/components/TableForm/src/TableForm.vue
  2. 26
      src/utils/disposition/tableColumns.ts
  3. 63
      src/views/wms/itembasic/ItembasicForm.vue

382
src/components/TableForm/src/TableForm.vue
View File

@ -1,219 +1,134 @@
<!-- 附件组件 --> <!-- 附件组件 -->
<template> <template>
<div class="table-form"> <div class="table-form">
<el-table <el-table class="multipleTableComponents" ref="TableBaseComponents_Ref" v-loading="tableLoading" :data="tableData"
class="multipleTableComponents" max-height="maxHeight" row-key="id" :border="border" @selection-change="tableSelectionChange"
ref="TableBaseComponents_Ref" @sort-change="tableSortChange" @row-click="handleTableSelect">
v-loading="tableLoading" <!-- 删除按钮 -->
:data="tableData" <el-table-column fixed="left" :width="50" v-if="isShowButton" v-slot="{ row, $index }">
:height="height" <Icon icon="ep:remove" color="#409eff" size="26" style="cursor: pointer;margin-top: -16px;" @click="handleDelete(row, $index)" />
row-key="id" </el-table-column>
:border="border"
@selection-change="tableSelectionChange"
@sort-change="tableSortChange"
@row-click="handleTableSelect"
>
<!-- 多选 --> <!-- 多选 -->
<el-table-column <el-table-column fixed="left" :reserve-selection="true" type="selection" :width="50" v-if="selectionTable" />
fixed="left"
:reserve-selection="true"
type="selection"
:width="50"
v-if="selectionTable"
/>
<!-- 序号 --> <!-- 序号 -->
<el-table-column <el-table-column type="index" fixed="left" label="序号" width="80" :align="'center'" v-if="isShowIndex" />
type="index" <el-table-column v-slot="{ row }" v-for="headerItem in tableFields" :key="headerItem"
fixed="left" :fixed="headerItem.tableForm?.fixed" :label="headerItem.label" :prop="headerItem.field"
label="序号" :align="headerItem?.tableForm?.align || 'center'" :sortable="headerItem?.tableForm?.sortable || ''"
width="80" :width="headerItem?.tableForm?.width || 'auto'" :min-width="headerItem?.tableForm?.minWidth || 'auto'">
:align="'center'" <el-form ref="TableBaseForm_Ref" :model="row" style="width: 100%;" :rules="tableFormRules"
v-if="isShowIndex" :class="tableFormRules ? '' : 'noRulesForm'">
/>
<el-table-column
v-slot="{ row }"
v-for="headerItem in tableFields"
:key="headerItem"
:fixed="headerItem.tableForm?.fixed"
:label="headerItem.label"
:prop="headerItem.field"
:align="headerItem?.tableForm?.align || 'left'"
:sortable="headerItem?.tableForm?.sortable || ''"
:width="headerItem?.tableForm?.width || 'auto'"
>
<el-form
ref="TableBaseForm_Ref"
:model="row"
>
<!-- 字符串输入框 --> <!-- 字符串输入框 -->
<el-form-item v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" :prop="headerItem.field"> <el-form-item v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'"
<el-input :prop="headerItem.field">
v-model="row[headerItem.field]" <el-input v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label" :placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)" style="width: 100%;" />
/>
</el-form-item> </el-form-item>
<!-- 数字输入框 --> <!-- 数字输入框 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'InputNumber'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'InputNumber'" :prop="headerItem.field">
<el-input-number <el-input-number style="width: 100%;" v-model="row[headerItem.field]" :max="headerItem?.tableForm?.max"
style="width: 100%;" :min="headerItem?.tableForm?.min" :disabled="itemIsDisabled(headerItem, row)" />
v-model="row[headerItem.field]"
:max="headerItem?.tableForm?.max"
:min="headerItem?.tableForm?.min"
:disabled="itemIsDisabled(headerItem, row)"
/>
</el-form-item> </el-form-item>
<!-- 下拉框 --> <!-- 下拉框 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'Select'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'Select'" :prop="headerItem.field">
<el-select <el-select v-model="row[headerItem.field]" :clearable="headerItem?.tableForm.clearable"
v-model="row[headerItem.field]" :multiple="headerItem?.tableForm.multiple" :disabled="itemIsDisabled(headerItem, row)"
:clearable="headerItem?.tableForm.clearable" :filterable="headerItem?.tableForm.filterable" :allow-create="headerItem?.tableForm.allowCreate"
:multiple="headerItem?.tableForm.multiple" style="width: 100%" :placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label"
:disabled="itemIsDisabled(headerItem, row)" @change="formSelectChange(row[headerItem.field], $event)">
:filterable="headerItem?.tableForm.filterable" <el-option v-for="op in initSelectOptions(headerItem)" :label="op.label" :value="op.value"
:allow-create="headerItem?.tableForm.allowCreate" :key="op.value" />
style="width: 100%"
:placeholder="headerItem?.tableForm?.placeholder || '请选择' + headerItem.label"
@change="formSelectChange(row[headerItem.field], $event)"
>
<el-option
v-for="op in initSelectOptions(headerItem)"
:label="op.label"
:value="op.value"
:key="op.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 时间选择器 --> <!-- 时间选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormTime'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'FormTime'" :prop="headerItem.field">
<el-time-picker <el-time-picker v-model="row[headerItem.field]" :placeholder="headerItem?.tableForm?.placeholder || '选择时间'"
v-model="row[headerItem.field]" style="width: 100%" :disabled="itemIsDisabled(headerItem, row)"
:placeholder="headerItem?.tableForm?.placeholder || '选择时间'"
style="width: 100%"
:disabled="itemIsDisabled(headerItem, row)"
:format="headerItem?.tableForm?.format || 'HH:mm:ss'" :format="headerItem?.tableForm?.format || 'HH:mm:ss'"
:value-format="headerItem?.tableForm?.valueFormat || 'HH:mm:ss'" :value-format="headerItem?.tableForm?.valueFormat || 'HH:mm:ss'" />
/>
</el-form-item> </el-form-item>
<!-- 日期选择器 --> <!-- 日期选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormDate'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'FormDate'" :prop="headerItem.field">
<el-date-picker <el-date-picker v-model="row[headerItem.field]" style="width: 100%"
v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)" :placeholder="headerItem?.tableForm?.placeholder || '选择日期'"
style="width: 100%"
:disabled="itemIsDisabled(headerItem, row)"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期'"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD'" :format="headerItem?.tableForm?.format || 'YYYY-MM-DD'"
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DD'" :value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DD'" />
/>
</el-form-item> </el-form-item>
<!-- 日期时间选择器 --> <!-- 日期时间选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormDateTime'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'FormDateTime'" :prop="headerItem.field">
<el-date-picker <el-date-picker type="datetime" v-model="row[headerItem.field]"
type="datetime" :placeholder="headerItem?.tableForm?.placeholder || '选择日期时间'" style="width: 100%"
v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期时间'"
style="width: 100%"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'" :format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'"
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" :value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)" />
/>
</el-form-item> </el-form-item>
<!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)--> <!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)-->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormTimerange'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'FormTimerange'" :prop="headerItem.field">
<el-date-picker <el-date-picker v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)"
v-model="row[headerItem.field]" :type="headerItem?.tableForm?.timeType || 'datetimerange'" range-separator="至" start-placeholder="开始日期"
:disabled="itemIsDisabled(headerItem, row)" end-placeholder="结束日期" :format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'"
:type="headerItem?.tableForm?.timeType || 'datetimerange'" :value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'" />
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'"
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'"
/>
</el-form-item> </el-form-item>
<!-- Switch 开关 --> <!-- Switch 开关 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'Switch'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'Switch'" :prop="headerItem.field">
<el-switch <el-switch v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)"
v-model="row[headerItem.field]" :loading="headerItem?.tableForm?.loading" :size="headerItem?.tableForm?.size"
:disabled="itemIsDisabled(headerItem, row)" :active-icon="headerItem?.tableForm?.activeIcon" :inactive-icon="headerItem?.tableForm?.inactiveIcon"
:loading="headerItem?.tableForm?.loading" :active-text="headerItem?.tableForm?.activeText" :inactive-text="headerItem?.tableForm?.inactiveText"
:size="headerItem?.tableForm?.size" :active-value="headerItem?.tableForm?.activeValue" :inactive-value="headerItem?.tableForm?.inactiveValue"
:width="headerItem?.tableForm?.width"
:active-icon="headerItem?.tableForm?.activeIcon"
:inactive-icon="headerItem?.tableForm?.inactiveIcon"
:active-text="headerItem?.tableForm?.activeText"
:inactive-text="headerItem?.tableForm?.inactiveText"
:active-value="headerItem?.tableForm?.activeValue"
:inactive-value="headerItem?.tableForm?.inactiveValue"
:active-color="headerItem?.tableForm?.inactiveColor" :active-color="headerItem?.tableForm?.inactiveColor"
:inactive-color="headerItem?.tableForm?.inactiveColor" :inactive-color="headerItem?.tableForm?.inactiveColor" />
/>
</el-form-item> </el-form-item>
<!-- Radio 单选--> <!-- Radio 单选-->
<el-form-item v-if="headerItem?.tableForm?.type == 'Radio'" :prop="headerItem.field"> <el-form-item v-if="headerItem?.tableForm?.type == 'Radio'" :prop="headerItem.field">
<el-radio-group <el-radio-group v-model="row[headerItem.field]" :size="headerItem?.tableForm?.size"
v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)" :text-color="headerItem?.tableForm?.textColor"
:size="headerItem?.tableForm?.size" :fill="headerItem?.tableForm?.fill" :name="headerItem?.tableForm?.name" :id="headerItem?.tableForm?.id">
:disabled="itemIsDisabled(headerItem, row)" <el-radio v-for="(item, index) in initSelectOptions(headerItem)" :key="index" :label="item.value"
:text-color="headerItem?.tableForm?.textColor" :size="headerItem?.tableForm?.size" :disabled="itemIsDisabled(headerItem, row)"
:fill="headerItem?.tableForm?.fill" :border="headerItem?.tableForm?.border">
:name="headerItem?.tableForm?.name" {{ item.label }}
:id="headerItem?.tableForm?.id" </el-radio>
> </el-radio-group>
<el-radio </el-form-item>
v-for="(item, index) in initSelectOptions(headerItem)" <!-- Checkbox 多选-->
:key="index" <el-form-item v-if="headerItem?.tableForm?.type == 'Checkbox'" :prop="headerItem.field">
:label="item.value" <el-checkbox-group v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size" :min="headerItem?.tableForm?.min" :max="headerItem?.tableForm?.max"
:disabled="itemIsDisabled(headerItem, row)" :text-color="headerItem?.tableForm?.textColor" :fill="headerItem?.tableForm?.fill">
:border="headerItem?.tableForm?.border" <el-checkbox v-for="(item, index) in initSelectOptions(headerItem)" :key="index" :label="item.value"
> :disabled="itemIsDisabled(headerItem, row)" :true-label="headerItem?.tableForm?.trueLabel"
{{ item.label }} :false-label="headerItem?.tableForm?.falseLabel" :border="headerItem?.tableForm?.border"
</el-radio> :size="headerItem?.tableForm?.size" :name="headerItem?.tableForm?.name"
</el-radio-group> :checked="headerItem?.tableForm?.checked">
</el-form-item>
<!-- Checkbox 单选-->
<el-form-item v-if="headerItem?.tableForm?.type == 'Checkbox'" :prop="headerItem.field">
<el-checkbox-group
v-model="row[headerItem.field]"
:disabled="itemIsDisabled(headerItem, row)"
:size="headerItem?.tableForm?.size"
:min="headerItem?.tableForm?.min"
:max="headerItem?.tableForm?.max"
:text-color="headerItem?.tableForm?.textColor"
:fill="headerItem?.tableForm?.fill"
>
<el-checkbox
v-for="(item, index) in initSelectOptions(headerItem)"
:key="index"
:label="item.value"
:disabled="itemIsDisabled(headerItem, row)"
:true-label="headerItem?.tableForm?.trueLabel"
:false-label="headerItem?.tableForm?.falseLabel"
:border="headerItem?.tableForm?.border"
:size="headerItem?.tableForm?.size"
:name="headerItem?.tableForm?.name"
:checked="headerItem?.tableForm?.checked"
>
{{ item.label }} {{ item.label }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-table-column> </el-table-column>
<slot></slot>
<template #empty>
<el-empty class="vab-data-empty" description="暂无数据" />
</template>
</el-table> </el-table>
<div class="button flex" v-if="isShowButton">
<div class="p-12px" @click="handleAdd">
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer;" />
<div>添加明细</div>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { log } from 'console' const props = defineProps({
const props = defineProps({ // 是否显示删除按钮
isShowButton: {
type: Boolean,
default: true,
},
// 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false" // 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false"
selectionTable: { selectionTable: {
type: Boolean, type: Boolean,
@ -247,13 +162,19 @@ import { log } from 'console'
height: { height: {
type: [Number, String], type: [Number, String],
default: () => { default: () => {
return 'auto' return '200'
}
},
maxHeight: {
type: [Number, String],
default: () => {
return '650'
} }
}, },
// 是否有边框（可拖拽） // 是否有边框（可拖拽）
border: { border: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
// table输入表单的rules // table输入表单的rules
tableFormRules: { tableFormRules: {
@ -261,18 +182,6 @@ import { log } from 'console'
default: null default: null
} }
}) })
console.log(props.tableFields);
// 某个item是否禁用
const itemIsDisabled = (colum, row) => {
return Boolean(colum.tableForm?.disabled) || Boolean(row.disabled) || Boolean(row['disabled_' + colum.field])
}
console.log(getStrDictOptions('uom'));
// 获取下拉列表 | type = radio | type = select
const initSelectOptions = (item) => {
return item.dictType ? getStrDictOptions(item.dictType) : item.tableForm.initOptions
}
// 传递给父类 // 传递给父类
const emit = defineEmits([ const emit = defineEmits([
'tableSelectionChange', 'tableSelectionChange',
@ -282,17 +191,114 @@ const emit = defineEmits([
'showDrawer', 'showDrawer',
'selectCallback', 'selectCallback',
'handleTableSelect', 'handleTableSelect',
'handleDelete',
'handleAdd'
]) ])
// 获取下拉列表 | type = radio | type = select
const initSelectOptions = (item) => {
return item.dictType ? getStrDictOptions(item.dictType) : item.tableForm.initOptions
}
//普通下拉改变事件 //普通下拉改变事件
const formSelectChange = (field, val) => { const formSelectChange = (field, val) => {
emit('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)
}
// 某个item是否禁用
const itemIsDisabled = (colum, row) => {
return Boolean(colum.tableForm?.disabled) || Boolean(row.disabled) || Boolean(row['disabled_' + colum.field])
}
const TableBaseComponents_Ref = ref()
const TableBaseForm_Ref = ref()
/**
* 验证表单是否符合rules
* @param {*} success 如果验证【成功】走的方法
* @param {*} error 如果验证【不成功】走的方法
*/
const $baseMessage = inject('$baseMessage')
const validateForm = (success, error) => {
let _lists = TableBaseForm_Ref.value.map(v => v.validate())
Promise.all(_lists).then(res => {
if (success) success()
}).catch(err => {
if (error) {
error()
return
}
$baseMessage('验证未通过，请按规则填写', 'error', 'vab-hey-message-error')
})
}
// 删除数据
const handleDelete = (row, index) => {
console.log(row);
console.log(index);
emit('handleDelete', row)
}
// 添加数据
const handleAdd = () => {
emit('handleAdd')
}
// setup 语法糖 抛出方法
defineExpose({
TableBaseComponents_Ref,
validateForm
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep(.el-form-item){ ::v-deep(.el-table__body){
margin-bottom: 0px; padding:10px 0px
}
::v-deep(.el-table--default .el-table__cell) {
padding: 2px 0px;
border: none;
}
::v-deep(.el-table td.el-table__cell div) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible;
}
::v-deep(.el-icon) {
display: block;
}
.button {
>div {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
>div {
margin-left: 6px;
text-decoration: underline;
color: #409eff;
}
}
} }
</style> </style>

26
src/utils/disposition/tableColumns.ts
View File

@ -12,7 +12,7 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
width:700 width:700
}, },
tableForm:{ tableForm:{
width: 300, minWidth:200,
sortable:false sortable:false
} }
}, },
@ -24,7 +24,7 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
width: 150 width: 150
}, },
tableForm:{ tableForm:{
width: 300, minWidth:200,
sortable:false sortable:false
} }
}, },
@ -60,6 +60,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
} , } ,
form: { form: {
component: 'Switch', component: 'Switch',
},
tableForm:{
width: 100,
type:'Switch',
} }
}, },
{ {
@ -72,7 +76,11 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
isTable: true, isTable: true,
table: { table: {
width: 120 width: 120
} } ,
tableForm:{
width: 200,
type:'Select',
}
}, },
{ {
label: '替代计量单位', label: '替代计量单位',
@ -100,6 +108,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
}, },
form: { form: {
component: 'Switch', component: 'Switch',
},
tableForm:{
width: 180,
type:'Radio',
} }
}, },
{ {
@ -131,6 +143,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
} , } ,
form: { form: {
component: 'Radio', component: 'Radio',
},
tableForm:{
width: 180,
type:'Checkbox',
} }
}, },
{ {
@ -326,6 +342,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
componentProps: { componentProps: {
type: 'datetimerange', type: 'datetimerange',
} }
},
tableForm:{
width: 200,
type:'FormDateTime',
} }
}, },
{ {

63
src/views/wms/itembasic/ItembasicForm.vue
View File

@ -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 :tableFields="ItemBasic.allSchemas.tableFormColumns" :tableData="tableData" class="w-[100%]"/> <TableForm ref="tableFormRef" :tableFields="ItemBasic.allSchemas.tableFormColumns" :tableData="tableData" class="w-[100%]" @handleAdd="handleAdd" :tableFormRules="ItemBasicRules" @handleDelete="handleDelete"/>
</div> </div>
</div> </div>
<template #footer> <template #footer>
@ -29,6 +29,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formData = ref('') const formData = ref('')
const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
const tableFormRef = ref()
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
@ -118,6 +119,7 @@ const Butttondata = [
const buttonBaseClick = (val, item) => { const buttonBaseClick = (val, item) => {
// 保存 // 保存
if (val == 'save') { if (val == 'save') {
tableFormRef.value.validateForm()
} }
// 关闭 // 关闭
else if (val == 'close') { else if (val == 'close') {
@ -125,28 +127,43 @@ const buttonBaseClick = (val, item) => {
} }
} }
const tableData = ref([{ // const tableData = ref([{
code: '', // code: '',
name:'物料', // name:'物料',
unit:'吨', // unit:'吨',
num: '20', // num: '20',
isStdPack:'FALSE' // isStdPack:'FALSE'
}, { // }, {
code: 'GOODS-0202-12', // code: 'GOODS-0202-12',
name: '物料', // name: '物料',
unit: '吨', // unit: '吨',
num: '20' // num: '20'
}, { // }, {
code: 'GOODS-0202-12', // code: 'GOODS-0202-12',
name: '物料', // name: '物料',
unit: '吨', // unit: '吨',
num: '20' // num: '20'
}, { // }, {
code: 'GOODS-0202-12', // code: 'GOODS-0202-12',
name: '物料', // name: '物料',
unit: '吨', // unit: '吨',
num: '20' // num: '20'
}]) // }])
const tableData = ref([])
// 添加明细
const handleAdd = ()=>{
tableData.value.push({
code: '',
name: '',
unit: '',
num: ''
})
}
// 删除明细
const handleDelete =(item,index)=>{
tableData.value.splice(index,1)
}
</script> </script>
<style scoped> <style scoped>
.table { .table {

Write Preview
Loading…
Cancel
Save