您的当前位置：首页工作积累 || 前端是一个list，后端是三个list，入参返参的处理

工作积累 || 前端是一个list，后端是三个list，入参返参的处理

来源：伴沃教育

需求一：列表年份为前端自增展示

indexNameItem(scope) {
  const numList = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
  const numListStr = numList[scope.$index];
  let indexName = '';
  if (numListStr === '一') {
    indexName = '首年';
  } else {
    indexName = `第${numListStr}年`
  }
  scope.row.indexNames = indexName;
  return indexName;
},

需求二：列表默认展示两行数据

this.formTable.tableData = Array(2).fill({}).map(it => {
  return {
   indexName: '',
   product4: '',
  }
})

需求三：类型新增Y时，产品一默认展示不可选，新增行可正常操作

<el-input
  v-model="scope.row.product1"
  :disabled="scope.row.disabledCom"
  type="text"
></el-input>



if (this.editType === 'Y') {
  if (this.data.product1.length > 0) {
    this.data.product1.forEach(it => {
      it.disabledCom = true;
    })
    this.product2 = [
      {
        productcom: '',
        indexName: '首年',
      },
      {
        productcom: '',
        indexName: '第一年',
      },
    ];
    this.product3 = [
      {
        productcom: '',
        indexName: '首年',
      },
      {
        productcom: '',
        indexName: '第一年',
       },
     ];
     this.tableDataY(this.data.product1, this.product2, this.product3)
    }
  }
}

需求四：数据最多添加10行，到第十年添加按钮不展示

v-if="formTable.tableData.length < 10"

需求五：首年数据为必填，其他年不必填

<el-form-item :prop="'tableData.' + scope.$index + '.product1'" :rules="scope.$index === 0 ? formTable.rules.product1 : formTable.rules.product1[1]">
   <el-input
     v-model="scope.row.product1"
     :disabled="scope.row.disabledCom"
     type="text"
   ></el-input>
</el-form-item>

需求六：输入的数据为小数点后两位

{ pattern: /^[0-9]+(\.\d{1,2})?$/, message: '请输入小数点后两位', trigger: 'blur'},

需求七：入参处理：一个list拆成三个list

handleList() {
      const formTableList1 = this.$refs.formTable1.formTable.tableData;
      console.log(formTableList1,'formTableList1')
      const formTableList4 = this.$refs.formTable4.formTable.tableData;
      let handleList = []
      const handleList4 = [];
      formTableList4.forEach(item => {
        handleList4.push({
          indexName: item.indexName,
          commion: item.productcom,
        })
      })
      const handleList1 = [];
      const handleList2 = [];
      const handleList3 = [];
      formTableList1.forEach(item => {
        console.log(item,'item')
        handleList1.push({
          indexName: item.indexName,
          commion: item.product1,
        })
        console.log(handleList1,'handleList1')
        handleList2.push({
          commion: item.product2,
        })
        handleList3.push({
          commion: item.product3,
        });
        handleList = [handleList1, handleList2, handleList3, handleList4];
      });
      return handleList
    },

需求八：返参处理：三个list合成一个list

tableDataY(value1, value2, value3) {
      this.formTable.tableData = value1.map((item, index) => {
        return {
          product1: item.productcom,
          product2: value2[index].productcom,
          product3: value3[index].productcom,
          indexName: item.indexName,
          disabledCom: item.disabledCom,
        }
      });
    },

以下为完整代码：

// 父组件
<template>
  <div>
    <div>
      <div>场景一：类型编辑Y（是组合）</div>
      <edit-info
      ref="formTable1"
      editType="Y"
      editedit="编辑"
      :dataItem="dataItem1"
    ></edit-info>
      <div>场景二：类型新增Y（是组合）</div>
      <edit-info
      ref="formTable2"
      editType="Y"
      editedit="新增"
      :dataItem="dataItem1"
    ></edit-info>
    </div>
    <div style="margin-top: 30px;">
      <div>场景三：类型新增N（不是组合）</div>
       <edit-info
         ref="formTable3"
         editType="N"
         editedit="新增"
         :dataItem="dataItem2"
       ></edit-info>
       <div>场景四：类型编辑N（不是组合）</div>
       <edit-info
         ref="formTable4"
         editType="N"
         editedit="编辑"
         :dataItem="dataItem2"
       ></edit-info>
    </div>
    <div>
      <el-button @click="save">提交</el-button>
    </div>
  </div>
</template>
<script>
import EditInfo from './edit-info.vue'
export default {
  components: {
    EditInfo,
  },
  data() {
    return {
      dataItem1: {
        product1: [
          {
            productcom: '11',
            indexName: '首年',
          },
          {
            productcom: '111',
            indexName: '第一年',
          },
        ],
        product2: [
          {
            productcom: '22',
            indexName: '首年',
          },
          {
            productcom: '222',
            indexName: '第一年',
          },
        ],
        product3: [
          {
            productcom: '33',
            indexName: '首年',
          },
          {
            productcom: '333',
            indexName: '第一年',
          },
        ],
      },
      dataItem2: {
        product4: [
          {
            productcom: '44',
            indexName: '首年',
          },
          {
            productcom: '444',
            indexName: '第一年',
          },
          {
            productcom: '4444',
            indexName: '第二年',
          },
          {
            productcom: '44444',
            indexName: '第三年',
          },
        ],
      }
    }
  },
  methods: {
    handleList() {
      const formTableList1 = this.$refs.formTable1.formTable.tableData;
      console.log(formTableList1,'formTableList1')
      const formTableList4 = this.$refs.formTable4.formTable.tableData;
      let handleList = []
      const handleList4 = [];
      formTableList4.forEach(item => {
        handleList4.push({
          indexName: item.indexName,
          commion: item.productcom,
        })
      })
      const handleList1 = [];
      const handleList2 = [];
      const handleList3 = [];
      formTableList1.forEach(item => {
        console.log(item,'item')
        handleList1.push({
          indexName: item.indexName,
          commion: item.product1,
        })
        console.log(handleList1,'handleList1')
        handleList2.push({
          commion: item.product2,
        })
        handleList3.push({
          commion: item.product3,
        });
        handleList = [handleList1, handleList2, handleList3, handleList4];
      });
      return handleList
    },
    save() {
      let that = this
      const list = that.handleList();
      const newList = {
        rate1: list[0],
        rate2: list[1],
        rate3: list[2],
        rate4: list[3],
      }
      console.log(newList,'newList')
    }
  }
}
</script>

// 子组件
<template>
<div>
  <el-form
    ref="formTable"
    :model="formTable"
    :rules="formTable.rules"
  >
    <el-table
      :data="formTable.tableData"
    >
      <el-table-column label="年份">
        <template slot-scope="scope">
          <el-form-item :prop="'tableData.' + scope.$index + 'indexName'">
            <span>{{ indexNameItem(scope) }}</span>
          </el-form-item>
        </template>
      </el-table-column>
      <template v-if="editType === 'Y'">
        <el-table-column label="产品1">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.product1'" :rules="scope.$index === 0 ? formTable.rules.product1 : formTable.rules.product1[1]">
              <el-input
                v-model="scope.row.product1"
                :disabled="scope.row.disabledCom"
                type="text"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="产品2">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.product2'" :rules="scope.$index === 0 ? formTable.rules.product2 : formTable.rules.product2[1]">
              <el-input
                v-model="scope.row.product2"
                type="text"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="产品3">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.product3'" :rules="scope.$index === 0 ? formTable.rules.product3 : formTable.rules.product3[1]">
              <el-input
                v-model="scope.row.product3"
                type="text"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column label="产品4">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.product4'" :rules="scope.$index === 0 ? formTable.rules.product4 : formTable.rules.product4[1]">
              <el-input
                v-model="scope.row.product4"
                type="text"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-form>
  <div v-if="formTable.tableData.length < 10">
    <p @click="addItem"><el-link><i class="el-icon-plus"></i>点击添加一行</el-link></p>
  </div>
</div>
</template>
<script>
import regs from '@/utils/regs'
import { deepClone } from '@/utils/utils'
export default {
  props: {
    editType: {
      type: String,
      default: '',
    },
    editedit: {
      type: String,
      default: '',
    },
    dataItem: {
      type: Object,
      default: () => {},
    }
  },
  data() {
    return {
      formTable: {
        tableData: [],
        rules: {
          product1: [
            { required: true, message: '请输入产品1', trigger: 'blur' },
            { pattern: /^[0-9]+(\.\d{1,2})?$/, message: '请输入小数点后两位', trigger: 'blur'},
          ],
          product2: [
            { required: true, message: '请输入产品2', trigger: 'blur' },
            { pattern: /^[0-9]+(\.\d{1,2})?$/, message: '请输入小数点后两位', trigger: 'blur'},
          ],
          product3: [
            { required: true, message: '请输入产品3', trigger: 'blur' },
            { pattern: /^[0-9]+(\.\d{1,2})?$/, message: '请输入小数点后两位', trigger: 'blur'},
          ],
          product4: [
            { required: true, message: '请输入产品4', trigger: 'blur' },
            { pattern: /^[0-9]+(\.\d{1,2})?$/, message: '请输入小数点后两位', trigger: 'blur'},
          ],
        },
        data: {}
      }
    }
  },
  methods: {
    indexNameItem(scope) {
      const numList = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      const numListStr = numList[scope.$index];
      let indexName = '';
      if (numListStr === '一') {
        indexName = '首年';
      } else {
        indexName = `第${numListStr}年`
      }
      scope.row.indexNames = indexName;
      return indexName;
    },
    addItem() {
      const addItem = {
        indexName: '',
        product1: '',
        product2: '',
        product3: '',
        product4: '',
        disabledCom: false,
      };
      this.formTable.tableData.push(addItem);
    },
    // 类型为Y的数据处理
    tableDataY(value1, value2, value3) {
      this.formTable.tableData = value1.map((item, index) => {
        return {
          product1: item.productcom,
          product2: value2[index].productcom,
          product3: value3[index].productcom,
          indexName: item.indexName,
          disabledCom: item.disabledCom,
        }
      });
    },
    // 类型为N的数据处理
    tableDataN(value) {
      value.forEach(item => {
        this.formTable.tableData.push({
          indexName: item.indexName,
          product4: item.productcom,
        })
      })
    },
  },
  mounted() {
    this.data = deepClone(this.dataItem);
    if (this.editedit === '新增') {
      if (this.editType === 'N') {
        this.formTable.tableData = Array(2).fill({}).map(it => {
          return {
            indexName: '',
            product4: '',
          }
        })
      }
      if (this.editType === 'Y') {
        if (this.data.product1.length > 0) {
          this.data.product1.forEach(it => {
            it.disabledCom = true;
          })
          this.product2 = [
            {
              productcom: '',
              indexName: '首年',
            },
            {
              productcom: '',
              indexName: '第一年',
            },
          ];
          this.product3 = [
            {
              productcom: '',
              indexName: '首年',
            },
            {
              productcom: '',
              indexName: '第一年',
            },
          ];
          this.tableDataY(this.data.product1, this.product2, this.product3)
        }
      }
    }
    if (this.editedit === '编辑') {
      if (this.editType === 'N') {
        this.tableDataN(this.data.product4)
      }
      if (this.editType === 'Y') {
        this.tableDataY(this.data.product1, this.data.product2, this.data.product3,)
      }
    }
  }
}
</script>

以下为完整图示：

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文