tableForm

src/components/TableForm/src/TableForm.vue

@@ -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,29 +28,178 @@
         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:''"
+        :align="headerItem?.tableForm?.align || 'left'"
-        :width="headerItem.tableForm && headerItem.tableForm.width ? headerItem.tableForm.width : '100'"
+        :sortable="headerItem?.tableForm?.sortable || ''"
+        :width="headerItem?.tableForm?.width || 'auto'"
       >
-    
         <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>
+          <!--开始时间结束时间选择器 (原类型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>
@@ -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>

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"/>
+        <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: '物料',