tableForm

src/components/TableForm/src/TableForm.vue

@@ -1,219 +1,134 @@
 <!-- 附件组件 -->
 <template>
   <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"
-              :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
+            <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 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-form-item>
           <!-- 时间选择器 -->
           <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'"
-              :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
+            <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'"
-              :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
+            <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'"
               :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
+            <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>
           <!-- Switch 开关 -->
           <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"
-              :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
+            <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"
-                :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  单选-->
+          <!-- Checkbox  多选-->
           <el-form-item v-if="headerItem?.tableForm?.type == 'Checkbox'" :prop="headerItem.field">
-              <el-checkbox-group
+            <el-checkbox-group v-model="row[headerItem.field]" :disabled="itemIsDisabled(headerItem, row)"
-                v-model="row[headerItem.field]"
+              :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">
-                :size="headerItem?.tableForm?.size"
+              <el-checkbox v-for="(item, index) in initSelectOptions(headerItem)" :key="index" :label="item.value"
-                :min="headerItem?.tableForm?.min"
+                :disabled="itemIsDisabled(headerItem, row)" :true-label="headerItem?.tableForm?.trueLabel"
-                :max="headerItem?.tableForm?.max"
+                :false-label="headerItem?.tableForm?.falseLabel" :border="headerItem?.tableForm?.border"
-                :text-color="headerItem?.tableForm?.textColor"
+                :size="headerItem?.tableForm?.size" :name="headerItem?.tableForm?.name"
-                :fill="headerItem?.tableForm?.fill"
+                :checked="headerItem?.tableForm?.checked">
-              >
-                <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){
+::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>

src/utils/disposition/tableColumns.ts

@@ -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,6 +76,10 @@ export const ItemBasic = useCrudSchemas(reactive<CrudSchema[]>([
     isTable: true,
     table: {
       width: 120
+    } ,
+     tableForm:{
+     width: 200,
+      type:'Select',
     }
   },
   {
@@ -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',
     }
   },
   {

src/views/wms/itembasic/ItembasicForm.vue

@@ -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([{
+// 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:'物料',
+    name: '',
-  unit:'吨',
+    unit: '',
-  num: '20',
+    num: ''
-  isStdPack:'FALSE'
+  })
-}, {
+}
-  code: 'GOODS-0202-12',
+// 删除明细
-  name: '物料',
+
-  unit: '吨',
+const handleDelete =(item,index)=>{
-  num: '20'
+  tableData.value.splice(index,1)
-}, {
+}
-  code: 'GOODS-0202-12',
-  name: '物料',
-  unit: '吨',
-  num: '20'
-}, {
-  code: 'GOODS-0202-12',
-  name: '物料',
-  unit: '吨',
-  num: '20'
-}])
 </script>
 <style scoped>
 .table {