[update] 可扩展表格的完善

src/components/JExpandTable.vue

@@ -1,38 +1,206 @@
 <template>
-  <a-table :columns="columns" :data-source="dataSource" defaultExpandAllRows>
+  <a-table
+    v-bind="$attrs"
+    v-on="$listeners"
+    :bordered="bordered"
+    :scroll="{x: '100%'}"
+    :columns="columns"
+    :data-source="dataSource">
     <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
     <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
       <slot :name="slotName" v-bind="{text, record, index}" />
     </template>
     <!-- 如果是普通插槽，直接使用$slots渲染 -->
     <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName" />
+    <!--  文本悬浮插槽  -->
+    <template slot="text" slot-scope="text">
+      <a-tooltip overlay-class-name="tooltip-style">
+        <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+        <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+      </a-tooltip>
+    </template>
+    <!--  表格扩展插槽 -->
     <div slot="expandedRowRender" slot-scope="record, index" style="margin: 0">
-      <a-form-model :model="record" :rules="rules" :ref="`ruleForm${index}`">
+      <!--   如果表单会依赖某个字段变化就需要加判断，循环判断extraForm中的表单  -->
-        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="依据描述" prop="desc">
+      <template v-if="formIsDepend">
-          <a-input
+        <template v-for="(value, key) in extraForm">
-            type="textarea"
+          <template v-if="record[formIsDepend] === key">
-            placeholder="请输入依据描述"
+            <a-form-model :key="key" :model="record" :rules="value.rules" :ref="`ruleForm${index}`">
-            v-model="record.desc" />
+              <a-form-model-item v-for="form in value.formArr" :key="form.dbFieldName" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="form.dbFieldTxt" :prop="form.dbFieldName">
-        </a-form-model-item>
+                <template v-if="form.fieldShowType === 1">
-        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工作令编号" prop="tokenNum">
+                  <a-input
-          <a-input
+                    type="textarea"
-            placeholder="请输入工作令编号"
+                    :maxLength="500"
-            v-model="record.tokenNum" />
+                    :placeholder="$t('pleaseEnter')+form.dbFieldTxt"
-        </a-form-model-item>
+                    :disabled="form.isDisabled || false"
-        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称" prop="itemName">
+                    v-model="record[form.dbFieldName]" />
-          <a-input
+                </template>
-            placeholder="请输入项目名称"
+                <template v-else-if="form.fieldShowType === 2">
-            v-model="record.itemName" />
+                  <j-upload
-        </a-form-model-item>
+                    v-model="record[form.dbFieldName]"
-      </a-form-model>
+                    :disabled="form.isDisabled || false">
+                  </j-upload>
+                </template>
+                <template v-else-if="form.fieldShowType === 3">
+                  <a-date-picker
+                    value-format="YYYY-MM-DD"
+                    format="YYYY-MM-DD"
+                    :disabled="form.isDisabled || false"
+                    v-model="record[form.dbFieldName]">
+                  </a-date-picker>
+                </template>
+                <template v-else-if="form.fieldShowType === 4">
+                  <a-input
+                    :maxLength="50"
+                    :placeholder="$t('pleaseEnter')+form.dbFieldTxt"
+                    :disabled="form.isDisabled || false"
+                    v-model="record[form.dbFieldName]" />
+                </template>
+              </a-form-model-item>
+            </a-form-model>
+          </template>
+        </template>
+      </template>
+      <!--   没有依赖的字段，就直接把传入的extraForm数组渲染成表单  -->
+      <template v-else>
+        <a-form-model :model="record" :rules="extraForm.rules" :ref="`ruleForm${index}`">
+          <a-form-model-item v-for="form in extraForm.formArr" :key="form.dbFieldName" :labelCol="labelCol" :wrapperCol="wrapperCol" :label="form.dbFieldTxt" :prop="form.dbFieldName">
+            <template v-if="form.fieldShowType === 1">
+              <a-input
+                type="textarea"
+                :maxLength="500"
+                :disabled="form.isDisabled || false"
+                :placeholder="$t('pleaseEnter')+form.dbFieldTxt"
+                v-model="record[form.dbFieldName]" />
+            </template>
+            <template v-else-if="form.fieldShowType === 2">
+              <j-upload
+                v-model="record[form.dbFieldName]"
+                :disabled="form.isDisabled || false">
+              </j-upload>
+            </template>
+            <template v-else-if="form.fieldShowType === 3">
+              <a-date-picker
+                value-format="YYYY-MM-DD"
+                format="YYYY-MM-DD"
+                :disabled="form.isDisabled || false"
+                v-model="record[form.dbFieldName]">
+              </a-date-picker>
+            </template>
+            <template v-else-if="form.fieldShowType === 4">
+              <a-input
+                :maxLength="50"
+                :placeholder="$t('pleaseEnter')+form.dbFieldTxt"
+                :disabled="form.isDisabled || false"
+                v-model="record[form.dbFieldName]" />
+            </template>
+          </a-form-model-item>
+        </a-form-model>
+      </template>
     </div>
   </a-table>
 </template>
 
+<!--
+ 使用方法:
+ html:
+ <j-expand-table :formIsDepend="formIsDepend" :extraForm="extraForm"></j-expand-table>
+ 1、如果扩展中的表单会根据某个字段变化，就传formIsDepend=随之变化的字段名，extraForm就传
+     extraForm: {
+       1: { // 1表示formIsDepend对应的字段值是1
+         rules: { // formIsDepend对应的字段值是1时的表单验证
+            desc: { required: true, message: '请输入依据描述', trigger: 'blur' },
+            ...
+          },
+          formArr: [// formIsDepend对应的字段值是1时的表单数据
+            {
+             fieldShowType: 1,
+             dbFieldTxt: this.$t(''), // 标签文本
+             dbFieldName: 'desc', // dataSource中对应的字段名
+             isDisabled: true // false的话可以不传
+           },
+           ...
+         ]
+       },
+     },
+ 2、如果扩展中的表单是固定的，extraForm就传
+    extraForm: {
+      rules: {
+        desc: { required: false, message: '请输入依据描述', trigger: 'blur' },
+        ...
+      },
+      formArr: [
+        {
+          fieldShowType: 1,
+          dbFieldTxt: this.$t(''), // 标签文本
+          dbFieldName: 'desc', // dataSource中对应的字段名
+          isDisabled: true // false的话可以不传
+        },
+        ...
+      ]
+    }
+ 3、提交时调用该组件中的submit方法获取返回值：
+ 返回值为false说明没有通过表单校验，为true说明通过了校验，直接通过绑定的dataSource获取数据即可，示例如下：
+    // 获取表格扩展部分的校验结果
+    const result = this.$refs.jExpandTable.submit()
+    if (result) {
+      // 每个表单校验都通过了
+      console.log('通过了', this.dataSource)
+    } else {
+      // 有表单没有通过
+      this.$message.warning('请输入必填项')
+    }
+
+-->
 <script>
+import JUpload from './jero/JUpload'
+
 export default {
   name: 'JExpandTable',
-  props: ['columns', 'dataSource', 'modelType'],
+  components: { JUpload },
+  props: {
+    columns: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    dataSource: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 扩展区表单, 表单需要依赖某个字段判断的就用对象，key是字段对应值，value是字段值对应下的表单数组
+     * 表单数组格式如下：
+     * [
+     *   {
+     *   fieldShowType: // 字段类型: 1,多行文本；2, 上传文件； 3, 日期选择； 4, 单行文本,
+     *   dbFieldTxt: // 标签文本，例如：依据描述,
+     *   dbFieldName: // 字段名
+     *   isDisabled: // 是否可编辑
+     *   }
+     * ]
+     */
+    extraForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    /**
+     * 表单是否有依赖,传false或者依赖字段名
+     */
+    formIsDepend: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
   data () {
     return {
       labelCol: {
@@ -40,11 +208,6 @@ export default {
       },
       wrapperCol: {
         sm: 16
-      },
-      rules: {
-        desc: { required: true, message: '请输入依据描述', trigger: 'blur' },
-        tokenNum: { required: true, message: '请输入工作令编号', trigger: 'blur' },
-        itemName: { required: true, message: '请输入项目名称', trigger: 'blur' }
       }
     }
   },
@@ -56,6 +219,9 @@ export default {
           this.$refs[`ruleForm${i}`].validate(valid => {
             arr[i] = valid
           })
+        } else {
+          // 表单都没有渲染，说明没有展开过，也就是未填状态
+          arr[i] = false
         }
       }
       if (arr.includes(false)) {