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
a364b618a6
commit
eb17cd6193
2 changed files with 195 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 204
      src/components/TableForm/src/TableForm.vue
  2. 7
      src/views/wms/itembasic/ItembasicForm.vue

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

@ -12,7 +12,6 @@
@selection-change="tableSelectionChange"
@sort-change="tableSortChange"
@row-click="handleTableSelect"
style="{width:100%}"
>
<!-- 多选 -->
<el-table-column
@ -20,6 +19,7 @@
:reserve-selection="true"
type="selection"
:width="50"
v-if="selectionTable"
/>
<!-- 序号 -->
<el-table-column
@ -28,31 +28,180 @@
label="序号"
width="80"
:align="'center'"
v-if="isShowIndex"
/>
<el-table-column
v-slot="{ row }"
v-for="headerItem in tableFields"
:key="headerItem"
:fixed="headerItem.tableForm &&headerItem.tableForm.fixed? headerItem.tableForm.fixed:''"
:fixed="headerItem.tableForm?.fixed"
:label="headerItem.label"
:prop="headerItem.field"
:sortable="headerItem.tableForm && headerItem.tableForm.sortable ? headerItem.tableForm.sortable:''"
:width="headerItem.tableForm && headerItem.tableForm.width ? headerItem.tableForm.width : '100'"
:align="headerItem?.tableForm?.align || 'left'"
:sortable="headerItem?.tableForm?.sortable || ''"
:width="headerItem?.tableForm?.width || 'auto'"
>
<el-form
<el-form
ref="TableBaseForm_Ref"
:model="row"
:rules="tableFormRules"
:class="tableFormRules ? '' : 'noRulesForm'"
>
<el-form-item >
<!-- 字符串输入框 -->
<el-form-item v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" :prop="headerItem.field">
<el-input
v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '请输入' + headerItem.label"
:disabled="itemIsDisabled(headerItem, row)"
/>
</el-form-item>
<!-- 数字输入框 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'InputNumber'" :prop="headerItem.field">
<el-input-number
style="width: 100%;"
v-model="row[headerItem.field]"
:max="headerItem?.tableForm?.max"
:min="headerItem?.tableForm?.min"
:disabled="itemIsDisabled(headerItem, row)"
/>
</el-form-item>
<!-- 下拉框 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'Select'" :prop="headerItem.field">
<el-select
v-model="row[headerItem.field]"
:clearable="headerItem?.tableForm.clearable"
:multiple="headerItem?.tableForm.multiple"
:disabled="itemIsDisabled(headerItem, row)"
:filterable="headerItem?.tableForm.filterable"
:allow-create="headerItem?.tableForm.allowCreate"
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-form-item>
<!-- 时间选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormTime'" :prop="headerItem.field">
<el-time-picker
v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '选择时间'"
style="width: 100%"
:disabled="itemIsDisabled(headerItem, row)"
:format="headerItem?.tableForm?.format || 'HH:mm:ss'"
:value-format="headerItem?.tableForm?.valueFormat || 'HH:mm:ss'"
/>
</el-form-item>
<!-- 日期选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormDate'" :prop="headerItem.field">
<el-date-picker
v-model="row[headerItem.field]"
style="width: 100%"
:disabled="itemIsDisabled(headerItem, row)"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期'"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD'"
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DD'"
/>
</el-form-item>
<!-- 日期时间选择器 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormDateTime'" :prop="headerItem.field">
<el-date-picker
type="datetime"
v-model="row[headerItem.field]"
:placeholder="headerItem?.tableForm?.placeholder || '选择日期时间'"
style="width: 100%"
:format="headerItem?.tableForm?.format || 'YYYY-MM-DD HH:mm:ss'"
:value-format="headerItem?.tableForm?.valueFormat || 'YYYY-MM-DDTHH:mm:ss'"
:disabled="itemIsDisabled(headerItem, row)"
/>
</el-form-item>
</el-form>
</el-table-column>
<!--开始时间结束时间选择器 (原类型datetimerange已弃用 使用type+timeType结合方式)-->
<el-form-item v-if="headerItem?.tableForm?.type == 'FormTimerange'" :prop="headerItem.field">
<el-date-picker
v-model="row[headerItem.field]"
:disabled="itemIsDisabled(headerItem, row)"
:type="headerItem?.tableForm?.timeType || 'datetimerange'"
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>
<!-- Switch 开关 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'Switch'" :prop="headerItem.field">
<el-switch
v-model="row[headerItem.field]"
:disabled="itemIsDisabled(headerItem, row)"
:loading="headerItem?.tableForm?.loading"
:size="headerItem?.tableForm?.size"
: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"
:inactive-color="headerItem?.tableForm?.inactiveColor"
/>
</el-form-item>
<!-- Radio 单选-->
<el-form-item v-if="headerItem?.tableForm?.type == 'Radio'" :prop="headerItem.field">
<el-radio-group
v-model="row[headerItem.field]"
:size="headerItem?.tableForm?.size"
:disabled="itemIsDisabled(headerItem, row)"
:text-color="headerItem?.tableForm?.textColor"
:fill="headerItem?.tableForm?.fill"
:name="headerItem?.tableForm?.name"
:id="headerItem?.tableForm?.id"
>
<el-radio
v-for="(item, index) in initSelectOptions(headerItem)"
:key="index"
:label="item.value"
:size="headerItem?.tableForm?.size"
:disabled="itemIsDisabled(headerItem, row)"
:border="headerItem?.tableForm?.border"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</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 }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</el-table-column>
<slot></slot>
<template #empty>
<el-empty class="vab-data-empty" description="暂无数据" />
@ -62,6 +211,8 @@
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { log } from 'console'
const props = defineProps({
// 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false"
selectionTable: {
@ -96,7 +247,7 @@
height: {
type: [Number, String],
default: () => {
return '650'
return 'auto'
}
},
// 是否有边框（可拖拽）
@ -111,10 +262,37 @@
}
})
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([
'tableSelectionChange',
'extendedButtonsClick',
'formSelectChange',
'tableSortChange',
'showDrawer',
'selectCallback',
'handleTableSelect',
])
//普通下拉改变事件
const formSelectChange = (field, val) => {
emit('formSelectChange', field, val)
}
</script>
<style scoped lang="scss">
::v-deep(.el-form-item){
margin-bottom: 0px;
}
</style>

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

@ -4,7 +4,7 @@
<Form ref="formRef" v-loading="formLoading" :rules="ItemBasicRules" :schema="ItemBasic.allSchemas.formSchema"
:model="formData" :is-col="true" />
<div class="table">
<TableForm :tableFields="ItemBasic.allSchemas.tableFormColumns" :tableData="tableData"/>
<TableForm :tableFields="ItemBasic.allSchemas.tableFormColumns" :tableData="tableData" class="w-[100%]"/>
</div>
</div>
<template #footer>
@ -126,10 +126,11 @@ const buttonBaseClick = (val, item) => {
}
const tableData = ref([{
code: 'GOODS-0202-12',
code: '',
name:'物料',
unit:'吨',
num: '20'
num: '20',
isStdPack:'FALSE'
}, {
code: 'GOODS-0202-12',
name: '物料',

Write Preview
Loading…
Cancel
Save