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
Split 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>
<div class="table-form">
<el-table
class="multipleTableComponents"
ref="TableBaseComponents_Ref"
v-loading="tableLoading"
:data="tableData"
:height="height"
row-key="id"
:border="border"
@selection-change="tableSelectionChange"
@sort-change="tableSortChange"
@row-click="handleTableSelect"
>
<el-table class="multipleTableComponents" ref="TableBaseComponents_Ref" v-loading="tableLoading" :data="tableData"
max-height="maxHeight" row-key="id" :border="border" @selection-change="tableSelectionChange"
@sort-change="tableSortChange" @row-click="handleTableSelect">
<!-- 删除按钮 -->
<el-table-column fixed="left" :width="50" v-if="isShowButton" v-slot="{ row, $index }">
<Icon icon="ep:remove" color="#409eff" size="26" style="cursor: pointer;margin-top: -16px;" @click="handleDelete(row, $index)" />
</el-table-column>
<!-- 多选 -->
<el-table-column
fixed="left"
:reserve-selection="true"
type="selection"
:width="50"
v-if="selectionTable"
/>
<el-table-column fixed="left" :reserve-selection="true" type="selection" :width="50" v-if="selectionTable" />
<!-- 序号 -->
<el-table-column
type="index"
fixed="left"
label="序号"
width="80"
:align="'center'"
v-if="isShowIndex"
/>
<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-table-column type="index" fixed="left" label="序号" width="80" :align="'center'" v-if="isShowIndex" />
<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 || 'center'" :sortable="headerItem?.tableForm?.sortable || ''"
:width="headerItem?.tableForm?.width || 'auto'" :min-width="headerItem?.tableForm?.minWidth || 'auto'">
<el-form ref="TableBaseForm_Ref" :model="row" style="width: 100%;" :rules="tableFormRules"
:class="tableFormRules ? '' : 'noRulesForm'">
<!-- 字符串输入框 -->
<el-form-item v-if="!headerItem?.tableForm?.type || headerItem?.tableForm?.type == 'InputString'" :prop="headerItem.field">
<el-input
v-model="row[headerItem.field]"
<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)"
/>
:disabled="itemIsDisabled(headerItem, row)" style="width: 100%;" />
</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 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 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)"
<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'"
/>
: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 || '选择日期'"
<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'"
/>
: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%"
<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)"
/>
:disabled="itemIsDisabled(headerItem, row)" />
</el-form-item>
<!--开始时间结束时间选择器 (原类型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-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"
<el-switch v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)"
:loading="headerItem?.tableForm?.loading" :size="headerItem?.tableForm?.size"
: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"
/>
: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"
>
<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="暂无数据" />
</template>
</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>
</template>
<script lang="ts" setup>
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"
selectionTable: {
type: Boolean,
@ -247,13 +162,19 @@ import { log } from 'console'
height: {
type: [Number, String],
default: () => {
return 'auto'
return '200'
}
},
maxHeight: {
type: [Number, String],
default: () => {
return '650'
}
},
// 是否有边框（可拖拽）
border: {
type: Boolean,
default: true,
default: false,
},
// table输入表单的rules
tableFormRules: {
@ -261,18 +182,6 @@ import { log } from 'console'
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([
'tableSelectionChange',
@ -282,17 +191,114 @@ const emit = defineEmits([
'showDrawer',
'selectCallback',
'handleTableSelect',
'handleDelete',
'handleAdd'
])
// 获取下拉列表 | type = radio | type = select
const initSelectOptions = (item) => {
return item.dictType ? getStrDictOptions(item.dictType) : item.tableForm.initOptions
}
//普通下拉改变事件
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)
}
// 某个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>
<style scoped lang="scss">
::v-deep(.el-form-item){
margin-bottom: 0px;
::v-deep(.el-table__body){
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>

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

@ -12,7 +12,7 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
width:700
},
tableForm:{
width: 300,
minWidth:200,
sortable:false
}
},
@ -24,7 +24,7 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
width: 150
},
tableForm:{
width: 300,
minWidth:200,
sortable:false
}
},
@ -60,6 +60,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
} ,
form: {
component: 'Switch',
},
tableForm:{
width: 100,
type:'Switch',
}
},
{
@ -72,7 +76,11 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
isTable: true,
table: {
width: 120
}
} ,
tableForm:{
width: 200,
type:'Select',
}
},
{
label: '替代计量单位',
@ -100,6 +108,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
},
form: {
component: 'Switch',
},
tableForm:{
width: 180,
type:'Radio',
}
},
{
@ -131,6 +143,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
} ,
form: {
component: 'Radio',
},
tableForm:{
width: 180,
type:'Checkbox',
}
},
{
@ -326,6 +342,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
componentProps: {
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"
:model="formData" :is-col="true" />
<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>
<template #footer>
@ -29,6 +29,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formData = ref('')
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref
const tableFormRef = ref()
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
@ -118,6 +119,7 @@ const Butttondata = [
const buttonBaseClick = (val, item) => {
// 保存
if (val == 'save') {
tableFormRef.value.validateForm()
}
// 关闭
else if (val == 'close') {
@ -125,28 +127,43 @@ const buttonBaseClick = (val, item) => {
}
}
const tableData = ref([{
code: '',
name:'物料',
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([{
// code: '',
// name:'物料',
// 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 handleAdd = ()=>{
tableData.value.push({
code: '',
name: '',
unit: '',
num: ''
})
}
// 删除明细
const handleDelete =(item,index)=>{
tableData.value.splice(index,1)
}
</script>
<style scoped>
.table {

Write Preview
Loading…
Cancel
Save