动态添加行

父

往数组添加一个空对象

<template>
  <div class="business_parameters">
    <div class="paramerters_header">
      <div>业务参数设置</div>
      <el-button
        type="primary"
        icon="Plus"
        style="background-color: #477fff"
        @click="addParameter"
      >
        新增字段
      </el-button>
    </div>
    <!-- tab切换 -->
    <div class="paramerters_container">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="客户" name="customer">
          <parameters :parameterList="parameterList"></parameters>
        </el-tab-pane>
        <el-tab-pane label="联系人" name="link">
          <parameters></parameters>
        </el-tab-pane>
        <el-tab-pane label="商机" name="business">
          <parameters></parameters>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 固定按钮 -->
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from 'axios'
import parameters from './components/parameters.vue'

const activeName = ref('customer')
const type = ref(1)
/** 初始化数据 */
onMounted(() => {
  getParameters(type)
})

/** 获取参数列表 */
const parameterList = ref<any[]>([])
const getParameters = async (type) => {
  const res = await axios({
    url: '/system/field/query',
    method: 'post',
    data: {
      type: type,
    },
  })
  parameterList.value = res.data.data
}

/** 切换tab 获取列表数据 */
const handleClick = (tab) => {
  if (tab.index == 0) {
    type.value = 1
  } else if (tab.index == 1) {
    type.value = 2
  } else {
    type.value = 3
  }
  getParameters(type)
}

const addParameter = () => {
  const addParam = {
    addFlag: true,
  }
  parameterList.value[1].children.push(addParam)
}
</script>
<style scoped lang="scss">
.paramerters_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 18px;
}
.paramerters_container {
  width: 100%;
  background: #ffffff;
  border-radius: 3px 0 0 3px;
  margin-bottom: 56px;
}
::v-deep .el-tabs__header {
  padding-top: 8px;
  padding-left: 20px;
}
::v-deep .el-tabs__item {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 16px;
  color: #303133;
}
</style>

 子

<template>
  <div class="parameters">
    <!-- 标题 -->
    <div class="parameters_title">
      <div class="line"></div>
      客户信息
      <div class="content">
        <el-icon color="#477FFF" style="margin-right: 6px">
          <WarningFilled />
        </el-icon>
        特殊字段部分设置选项为灰色，不能进行修改
      </div>
    </div>
    <!-- 表头 -->
    <div class="parameters_header">
      <el-row>
        <el-col :span="5"><div>字段名称</div></el-col>
        <el-col :span="5"><div>字段类型</div></el-col>
        <el-col :span="5"><div>启用</div></el-col>
        <el-col :span="7"><div>必填</div></el-col>
      </el-row>
    </div>

    <!-- table -->
    <div class="parameters_table" v-for="item in parameterList" :key="item.id">
      <div class="name">{{ item.name }}</div>
      <el-row
        class="parameters_table_row"
        v-for="i in item.children"
        :key="i.id"
      >
        <el-col :span="5">
          <div v-if="!i.addFlag" >
            {{ i.fieldName }}
          </div>
          <el-input
            v-model="i.fieldName"
            v-if="i.addFlag === true"
            placeholder="请输入"
            style="width: 80%"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <div v-if="!i.addFlag" :class="i.special === 1 ? 'active' : ''">{{ i.fieldTypeName }}</div>
          <el-input
            v-if="i.addFlag === true"
            style="width: 80%"
            placeholder="请输入"
            v-model="i.fieldTypeName"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <div>
            <el-checkbox
              v-model="i.enable"
              size="large"
              :true-label="0"
              :false-label="1"
              :disabled="i.special"
            />
          </div>
        </el-col>
        <!-- 基本字段展示 -->
        <template v-if="item.isCustom === false">
          <el-col :span="7">
            <div>
              <el-checkbox
                v-model="i.required"
                size="large"
                :true-label="0"
                :false-label="1"
                :disabled="i.special"
              />
            </div>
          </el-col>
        </template>
        <!-- 自定义展示 -->
        <template v-if="item.isCustom === true">
          <el-col :span="5">
            <div>
              <el-checkbox
                v-model="i.required"
                size="large"
                :true-label="0"
                :false-label="1"
              />
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              <span class="text_button" @click="editParam(i)">
                {{ i.addFlag === true ? '保存' : '编辑' }}
              </span>
              <span class="operate_line">|</span>
              <span class="text_button" @click="deleteParam(i)">删除</span>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
  </div>

  <!-- 尾部按钮固定定位 -->
  <div class="parameters_footer">
    <el-button type="primary" style="background-color: #477fff">保存</el-button>
  </div>
</template>
<script setup lang="ts">
defineProps({
  parameterList: {
    type: Array<any>,
    default: () => {
      return []
    },
  },
})

const editParam = (param) => {
  if (param.addFlag && param.addFlag === true) {
    delete param.addFlag
  } else {
    param.addFlag = true
  }
}

const deleteParam = () => {}
</script>
<style scoped lang="scss">
.parameters {
  padding: 0px 20px;
}
// 标题
.parameters_title {
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .line {
    width: 2px;
    height: 16px;
    background: #477fff;
    border-radius: 1px;
    margin-right: 10px;
  }
  .content {
    display: flex;
    align-items: center;
    background: #f0f1f4;
    border-radius: 3px;
    padding: 4px 10px;
    margin-left: 10px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #606266;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #606266;
  }
}
// 表头
.parameters_header {
  width: 100%;
  height: 50px;
  background: #f8f9fa;
  line-height: 50px;
  padding-left: 20px;
  margin-bottom: 10px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
  color: #1d2129;
}
// table
.parameters_table {
  margin-bottom: 21px;
  border: 1px solid #dcdfe6;
  .name {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #477fff1a;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
    color: #1d2129;
    padding-left: 20px;
  }
  .parameters_table_row {
    height: 52px;
    background: #ffffff;
    line-height: 52px;
    padding-left: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 13px;
    color: #303133;
  }
  .parameters_table_row:nth-child(2n) {
    background: #f8f9fa;
  }
}

// 尾部
.parameters_footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  z-index: 99;
  bottom: 0px;
  left: 180px;
  width: calc(100% - 180px);
  height: 56px;
  background: #ffffff;
  border-top: 1px solid #dcdee0;
  padding-right: 20px;
  margin-top: 56px;
}
.text_button {
  font-size: 14px;
  color: #477fff;
  vertical-align: middle;
}
.operate_line {
  color: #dce2e9;
  font-size: 14px;
  margin: 0px 5px;
  vertical-align: middle;
}
.active {
  color: #FF7D00;
}
</style>