关于获取接口数据的问题

Question

问题描述

调用的api接口文件 我就不复制了，开源代码 可以运行 获取数据
就是想问问各位大佬， 是怎么取数据的

if (this.handle.data) { // data 存在就处理 save  

这 this.handle.data是怎么取数据的
我看上面 data: null // 编辑数据，这里 data 返回的是空，他是怎么赋值

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <create-view
    :loading="loading"
    :body-style="{ height: '100%'}">
    <flexbox
      direction="column"
      align="stretch"
      class="crm-create-container">
      <flexbox class="crm-create-header">
        <div style="flex:1;font-size:17px;color:#333;">{{ title }}</div>
        <img
          class="close"
          src="@/assets/img/task_close.png"
          @click="hidenView" >
      </flexbox>
      <flexbox
        class="crm-create-flex"
        direction="column"
        align="stretch">
        <div
          v-show="currentPage == 1"
          class="crm-create-body">
          <div class="create-name">基本信息</div>
          <el-form
            ref="crmForm"
            :model="crmForm"
            label-position="top"
            class="crm-create-box">
            <el-form-item
              v-for="(item, index) in crmForm.crmFields"
              :key="item.key"
              :prop="'crmFields.' + index + '.value'"
              :class="{ 'crm-create-block-item': item.showblock, 'crm-create-item': !item.showblock }"
              :rules="crmRules[item.key]"
              :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}">
              <div
                slot="label"
                style="display: inline-block;">
                <div style="margin:5px 0;font-size:12px;word-wrap:break-word;word-break:break-all;">
                  {{ item.data.name }}
                  <span style="color:#999;">
                    {{ item.data.inputTips ? '（'+item.data.inputTips+'）':'' }}
                  </span>
                </div>
              </div>
              <component
                :is="item.data.formType | typeToComponentName"
                :value="item.value"
                :index="index"
                :item="item"
                :radio="false"
                @value-change="fieldValueChange"/>
            </el-form-item>
          </el-form>
        </div>
        <div
          v-show="currentPage == 2"
          class="crm-create-body">
          <div style="padding: 0 20px; font-size: 12px;">
            <el-radio
              v-model="examineType"
              :label="1">固定审批流</el-radio>
            <div class="examine-items">
              <flexbox
                v-for="(item, index) in examineList"
                :key="index"
                class="examine-item">
                <div class="examine-item-name">第{{ index+1 | numberToZh }}级</div>
                <el-select
                  v-model="item.type"
                  class="examine-item-select"
                  placeholder="请选择"
                  @focus="selectOptionsFocus(item, index)"
                  @change="selectOptionsChange(item)">
                  <el-option
                    v-for="itemOption in item.options"
                    :key="itemOption.value"
                    :label="itemOption.name"
                    :value="itemOption.value"/>
                </el-select>
                <xh-user-cell
                  v-if="item.show"
                  :radio="false"
                  :index="index"
                  :value="item.value"
                  class="examine-item-user"
                  @value-change="flowUserSelect"/>
                <i
                  class="el-icon-remove examine-item-delete"
                  @click="deleteExamineItems(index)"/>
              </flexbox>
            </div>
            <div class="examine-items-add"><span @click="examineItemsAdd">+ 添加审批层级</span></div>
            <div class="examine-add-des">
              <p><span class="examine-add-required">*</span>当选择“负责人主管2222”审批时。系统仅会通知负责人主管2222。</p>
              <p><span class="examine-add-required">*</span>当选择多个“指定用户”审批时。如果指定用户没有权限查看对应的合同，系统会通知其审批，但是他无法查看此数据信息。 </p>
              <p><span class="examine-add-required">*</span>当选择“指定用户（任意一人）”表示指定用户中任意一人审批即可。当选择“指定用户（多人会签）”表示 指定用户中所有人都要审批。</p>
            </div>
            <el-radio
              v-model="examineType"
              :label="2">授权审批人</el-radio>
          </div>
        </div>
      </flexbox>
      <div
        v-if="currentPage == 1"
        class="handle-bar">
        <el-button
          class="handle-button"
          @click.native="hidenView">取消</el-button>
        <el-button
          class="handle-button"
          type="primary"
          @click.native="nextPage">下一页</el-button>
      </div>
      <div
        v-if="currentPage == 2"
        class="handle-bar">
        <el-button
          class="handle-button"
          @click.native="hidenView">取消</el-button>
        <el-button
          class="handle-button"
          type="primary"
          @click.native="saveField">保存</el-button>
        <el-button
          class="handle-button"
          type="primary"
          @click.native="currentPage = 1">上一页</el-button>
      </div>
    </flexbox>
  </create-view>
</template>
<script type="text/javascript">
import CreateView from '@/components/CreateView'
import {
  oaExamineCategorySave
} from '@/api/systemManagement/workbench' // 审批类型创建

import {
  XhInput,
  XhTextarea,
  XhSelect,
  XhUserCell,
  XhStrucUserCell
} from '@/components/CreateCom'
import Nzhcn from 'nzh/cn'

export default {
  name: 'CreateExamineCategory', // 所有新建效果的view
  components: {
    CreateView,
    XhInput,
    XhTextarea,
    XhSelect,
    XhUserCell,
    XhStrucUserCell
  },
  filters: {
    /** 根据type 找到组件 */
    typeToComponentName(formType) {
      if (formType == 'text') {
        return 'XhInput'
      } else if (formType == 'textarea') {
        return 'XhTextarea'
      } else if (formType == 'select') {
        return 'XhSelect'
      } else if (formType == 'structure') {
        return 'XhStrucUserCell'
      }
    },
    numberToZh: function(value) {
      return Nzhcn.encodeS(value)
    }
  },
  props: {
    handle: {
      type: Object,
      default: () => {
        return {
          type: 'examineflow', // examine 审批 审批流 examineflow
          action: 'save', // save 创建  update 编辑
          id: '',
          data: null // 编辑数据
        }
      }
    }
  },
  data() {
    return {
      // 标题展示名称
      loading: false,
      // 自定义字段验证规则
      crmRules: {},
      // 自定义字段信息表单
      crmForm: {
        crmFields: []
      },
      // 总两页 当前页
      currentPage: 1,
      examineType: 1, // 1 固定审批 2 授权审批
      examineList: [
        {
          type: 1,
          value: [],
          show: false,
          options: [{ name: '创建人', value: 0 },
            { name: '负责人主管2222', value: 1 },
            { name: '指定用户（任意一人）', value: 2 },
            { name: '指定用户（多人会签）', value: 3 }
          ]
        }
      ]
    }
  },
  computed: {
    title() {
      if (this.handle.action === 'save') {
        return '新建审批类型'
      } else if (this.handle.action === 'update') {
        return '编辑审批类型'
      }
    }
  },
  mounted() {
    document.body.appendChild(this.$el)

    this.getField()
    if (this.handle.data) {
      // data 存在就处理 save
      if (this.handle.data.examineType && this.handle.data.examineType === 1) {
        this.examineList = []
        for (let index = 0; index < this.handle.data.stepList.length; index++) {
          const element = this.handle.data.stepList[index]
          var item = {}
          item['type'] = element.stepType
          if (element.stepType === 2 || element.stepType === 3) {
            item['show'] = true
            item['value'] = element.userList
          } else {
            item['show'] = false
            item['value'] = []
          }
          if (index === 0) {
            item['options'] = [{ name: '创建人', value: 0 },
              { name: '负责人主管2222', value: 1 },
              { name: '指定用户（任意一人）', value: 2 },
              { name: '指定用户（多人会签）', value: 3 }
            ]
          } else {
            item['options'] = [{ name: '创建人', value: 0 },
              { name: '负责人主管2222', value: 1 },
              { name: '指定用户（任意一人）', value: 2 },
              { name: '指定用户（多人会签）', value: 3 },
              { name: '上一级审批人主管', value: 4 }
            ]
          }
          this.examineList.push(item)
        }
      } else {
        this.examineType = 2
      }
    }
  },
  destroyed() {
    // remove DOM node after destroy
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    // 字段的值更新
    fieldValueChange(data) {
      var item = this.crmForm.crmFields[data.index]
      item.value = data.value
      // 无事件的处理 后期可换成input实现
      // if (item.data.formType == 'structure') {
      //   this.$refs.crmForm.validateField('crmFields.' + data.index + '.value')
      // }
    },
    // 获取自定义字段
    getField() {
      var field = []
      // 如果是审批添加 加入审批相关信息
      field.push({
        field: 'title',
        formType: 'text',
        isNull: 1,
        name: '审批类型名称',
        setting: [],
        inputTips: '',
        value: this.handle.data ? this.handle.data.title : ''
      })
      field.push({
        field: 'dept',
        formType: 'structure',
        isNull: 0,
        name: '可视范围',
        setting: [],
        inputTips: '默认全公司',
        value: {
          users: this.handle.data ? this.handle.data.userIds : [],
          strucs: this.handle.data ? this.handle.data.deptIds : []
        }
      })
      field.push({
        field: 'remarks',
        formType: 'textarea',
        isNull: 0,
        name: '审批类型说明',
        setting: [],
        inputTips: '',
        value: this.handle.data ? this.handle.data.remarks : ''
      })

      this.getcrmRulesAndModel(field)
    },
    // 根据自定义字段获取自定义字段规则
    getcrmRulesAndModel(list) {
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        /** 规则数据 */
        var tempList = []

        // 验证必填
        if (item.isNull == 1) {
          tempList.push({
            required: true,
            message: item.name + '不能为空',
            trigger: ['blur', 'change']
          })
        }

        this.crmRules[item.field] = tempList

        /** 表单数据 */
        var params = {}
        params['value'] = item.value
        params['key'] = item.field
        params['data'] = item
        if (item.formType == 'textarea') {
          params['showblock'] = true // 展示整行效果
        }
        this.crmForm.crmFields.push(params)
      }
    },
    // 保存数据
    saveField() {
      this.$refs.crmForm.validate(valid => {
        if (valid) {
          if (this.validStepsInfo()) {
            this.submiteParams(this.crmForm.crmFields)
          }
        } else {
          this.$message.error('请完善必填信息')
          return false
        }
      })
    },
    validStepsInfo() {
      for (let index = 0; index < this.examineList.length; index++) {
        const element = this.examineList[index]
        if (
          (element.type === 2 || element.type === 3) &&
          element.value.length === 0
        ) {
          this.$message.error('请添加员工')
          return false
        }
      }
      return true
    },
    /** 上传 */
    submiteParams(array) {
      this.loading = true
      var params = this.getSubmiteParams(array)
      if (this.handle.action == 'update') {
        params.id = this.handle.id
      }
      oaExamineCategorySave(params)
        .then(res => {
          this.loading = false
          // 回到保存成功
          this.$emit('save')
          if (this.handle.action == 'save') {
            // 如果是新建 提示去创建表单
            this.$confirm('您将继续完成审批表单的创建', '创建成功', {
              showCancelButton: false,
              confirmButtonText: '确定',
              type: 'warning'
            })
              .then(() => {
                this.hidenView()
                this.$router.push({
                  name: 'handlefield',
                  params: {
                    type: 'oa_examine',
                    label: '10',
                    id: res.data.categoryId
                  }
                })
              })
              .catch(() => {})
          } else {
            this.$message.success('操作成功')
            this.hidenView()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 请求参数
    getSubmiteParams(array) {
      var params = {}
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        // 关联产品数据需要特殊拼接
        if (element.key === 'dept') {
          params['userIds'] = element.value['users'].map(function(item) {
            return item.userId
          })
          params['deptIds'] = element.value['strucs'].map(function(item) {
            return item.id
          })
        } else {
          params[element.key] = element.value
        }
      }

      var steps = []
      for (let index = 0; index < this.examineList.length; index++) {
        const element = this.examineList[index]
        steps.push({
          stepType: element.type,
          checkUserId: element.value.map(function(item) {
            return item.userId
          })
        })
      }
      params['examineType'] = this.examineType
      params['step'] = steps
      return params
    },
    // 下一页
    nextPage() {
      this.$refs.crmForm.validate(valid => {
        if (valid) {
          this.currentPage = 2
        }
      })
    },
    selectOptionsChange(item) { //监听
      if (item.type == 2 || item.type == 3) {
        item.show = true
      } else {
        item.show = false
      }
    },
    selectOptionsFocus(item, index) {//回绑选择
      if (this.examineList.length > 1) {
        var lastItem = index > 0 ? this.examineList[index - 1] : null
        var nextItem = null
        if (index < this.examineList.length - 1) {
          var nextItem = this.examineList[index + 1]
        }

        var removeTwo = false
        var removeThree = false
        var removeFour = false

        var removeFIve = false
        // 任一 会签 的下面不能是 上一级
        if (lastItem && (lastItem.type === 2 || lastItem.type === 3)) {
          removeFour = true
        }

        // 上一级 的上面不能是 会签 任一
        if (nextItem && nextItem.type === 4) {
          removeTwo = true
          removeThree = true
        }
        if (lastItem && lastItem.type === 0) {
          removeFIve = true
        }

        // 上一级 的上面不能是 会签 任一
        if (nextItem && nextItem.type === 0) {
          removeFIve = true
        }

        var options = [{ name: '负责人主管2222', value: 1 }]

        if (!removeTwo) {
          options.push({ name: '指定用户（任意一人）', value: 2 })
        }
        if (!removeThree) {
          options.push({ name: '指定用户（多人会签）', value: 3 })
        }
        if (!removeFour) {
          options.push({ name: '上一级审批人主管', value: 4 })
        }
        if (!removeFIve) {
          options.push({ name: '创建人', value: 0 })
        }
        item.options = options
      }
    },
    examineItemsAdd() {
      this.examineList.push({
        type: 1,
        value: [],
        show: false,
        options: [{ name: '创建人', value: 0 },
          { name: '负责人主管2222', value: 1 },
          { name: '指定用户（任意一人）', value: 2 },
          { name: '指定用户（多人会签）', value: 3 },
          { name: '上一级审批人主管', value: 4 }
        ]
      })
    },
    // 类型选择
    flowUserSelect(data) {
      var item = this.examineList[data.index]
      item.value = data.value
    },
    deleteExamineItems(index) {
      this.examineList.splice(index, 1)
    },
    hidenView() {
      this.$emit('hiden-view')
    },
    // 获取左边padding
    getPaddingLeft(item, index) {
      if (item.showblock && item.showblock == true) {
        return '0'
      }
      return index % 2 == 0 ? '0' : '25px'
    },
    // 获取左边padding
    getPaddingRight(item, index) {
      if (item.showblock && item.showblock == true) {
        return '0'
      }
      return index % 2 == 0 ? '25px' : '0'
    }
  }
}
</script>

Answer 1

props: {
    handle: {
      type: Object,
      default: () => {
        return {
          type: 'examineflow', // examine 审批 审批流 examineflow
          action: 'save', // save 创建  update 编辑
          id: '',
          data: null // 编辑数据
        }
      }
    }
  },

这个是子组件吧，父组件中应该有传handle这个参数过来；您可以看下父组件传的数据是什么,预计是这种结构：

{
  type: 'examineflow',
  action: 'save',
  id: '',
  data: ''
}

您可以看下父组件中是不是类似这样的：

<CreateExamineCategory :handle="handle" />

Answer 2

<template>
  <flexbox
    :style="{'height': contentHeight + 'px'}"
    orient="vertical"
    align="stretch">
    <div class="title">{{ '编辑'+getTitle()+'字段' }}</div>
    <el-container class="wrapper">
      <el-aside class="left">
        <div class="mini-title">字段库</div>
        <ul>
          <draggable
            :list="fieldList"
            :options="{group: {pull: 'clone', put: false, name: 'list'},forceFallback:true, sort:false }"
            :clone="handleMove"
            class="list-wrapper"
            @end="handleEnd">
            <li
              v-for="item in fieldList"
              :key="item.id"
              class="field-item"
              @click="handleClick(item)">
              <img
                :src="item.icon"
                class="icon" >
              <span>{{ item.name }}</span>
            </li>
          </draggable>
        </ul>
      </el-aside>
      <el-container
        v-loading="loading"
        class="content">
        <el-header>
          <el-button
            type="text"
            style="padding: 8px 22px;border-radius:2px;"
            @click="handlePreview">预览</el-button>
          <el-button
            type="primary"
            style="padding: 8px 22px;border-radius:2px;"
            @click="handleSave">保存</el-button>
          <el-button
            style="padding: 8px 22px;border-radius:2px;"
            @click="handleCancel">返回</el-button>

        </el-header>
        <el-main>
          <draggable
            :list="fieldArr"
            :options="{group: 'list',forceFallback:true, fallbackClass:'draggingStyle'}"
            @end="handleListMove">
            <component
              v-for="(item, index) in fieldArr"
              :class="{selected: selectedIndex == index}"
              :is-show="selectedIndex == index && (item.operating == null || item.operating == 0 || item.operating == 2)"
              :key="index"
              :attr="item"
              :is="item | typeToComponentName"
              @delete="handleDelete(item, index)"
              @select="handleChildSelect"
              @click.native="handleSelect(item, index)"/>
          </draggable>
          <p
            v-if="fieldArr.length == 0"
            class="no-list">从左侧点击或拖拽来添加字段</p>
        </el-main>
      </el-container>
      <el-aside
        class="right"
        width="310px">
        <div class="mini-title">字段属性</div>
        <field-info
          v-if="form"
          :field="form"
          :can-transform="canTransform"
          :transform-data="transformData"/>
      </el-aside>
                 
    </el-container>
    <!-- 表单预览 -->
    <preview-field-view
      v-if="showTablePreview"
      :types="tablePreviewData.type"
      :types-id="tablePreviewData.id"
      :label="tablePreviewData.label"
      @hiden-view="showTablePreview=false"/>
  </flexbox>
</template>

<script>

import crmTypeModel from '@/views/customermanagement/model/crmTypeModel'
import {
  customFieldHandle,
  oaFieldHandle,
  customFieldList
} from '@/api/systemManagement/SystemCustomer'
import { filedGetField } from '@/api/customermanagement/common'
import PreviewFieldView from '@/views/SystemManagement/components/previewFieldView'
import {
  SingleLineText,
  MultiLineText,
  SelectForm,
  CheckboxForm,
  FileForm,
  TableForm
} from './components/fields'
import draggable from 'vuedraggable'
import Field from './model/field'
import FieldList from './model/fieldList'
import FieldInfo from './components/FieldInfo'
import { objDeepCopy } from '@/utils'

export default {
  name: 'Handlefield',
  components: {
    SingleLineText,
    MultiLineText,
    SelectForm,
    CheckboxForm,
    FileForm,
    TableForm,
    draggable,
    FieldInfo,
    PreviewFieldView
  },
  filters: {
    /** 根据type 找到组件 */
    typeToComponentName(item) {
      if (
        item.formType === 'text' ||
        item.formType === 'number' ||
        item.formType === 'floatnumber' ||
        item.formType === 'mobile' ||
        item.formType === 'email' ||
        item.formType === 'date' ||
        item.formType === 'datetime' ||
        item.formType === 'user' ||
        item.formType === 'structure' ||
        item.formType === 'contacts' ||
        item.formType === 'customer' ||
        item.formType === 'contract' ||
        item.formType === 'business' ||
        item.type == 0
      ) {
        return 'SingleLineText'
      } else if (item.formType === 'textarea') {
        return 'MultiLineText'
      } else if (item.formType === 'select') {
        return 'SelectForm'
      } else if (item.formType === 'checkbox') {
        return 'CheckboxForm'
      } else if (item.formType === 'file') {
        return 'FileForm'
      } else if (item.formType === 'form') {
        return 'TableForm'
      }
    }
  },
  data() {
    return {
      fieldList: FieldList,
      fieldArr: [], // 数据没有返回时 根据null 判断不能操作
      movedItem: {},
      selectedIndex: -1,
      rejectHandle: true, // 请求未获取前不能操作
      /** 右边展示数据 */
      form: null, // operating 0 改删 1改 2删 3无
      loading: false, // 加载动画
      // 展示表单预览
      tablePreviewData: { types: '', id: '' },
      showTablePreview: false,
      contentHeight: document.documentElement.clientHeight - 100,
      // 转移匹配字段源
      transformData: null,
      examineList: [
        {
          type: 1,
          value: [],
          show: false,
          options: [{ name: '创建人', value: 0 },
            { name: '负责人主管2222', value: 1 },
            { name: '指定用户（任意一人）', value: 2 },
            { name: '指定用户（多人会签）', value: 3 }
          ]
        }
      ]
    }
  },
  computed: {
    // 能转移
    canTransform() {
      return this.$route.params.type == 'crm_leads'
    }
  },
  watch: {
    selectedIndex: {
      handler(newVal) {
        if (newVal >= 0) {
          this.form = this.fieldArr[newVal]
        } else {
          this.form = null
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    window.onresize = () => {
      this.contentHeight = document.documentElement.clientHeight - 100
    }
    // 获取当前模块的自定义数据
    this.getCustomInfo()

    // 配置转移字段
    if (this.canTransform) {
      this.getTransformField()
    }
  },
  methods: { 
    // 获取当前模块的自定义数据
    getCustomInfo() {
      this.loading = true
      var params = {}
      params.label = this.$route.params.label
      if (this.$route.params.type === 'oa_examine') {
        params.categoryId = this.$route.params.id
      }
       
      customFieldList(params)
        .then(res => {  
          for (let index = 0; index < res.data.length; index++) {  
            const element = res.data[index] 
            if (
              element.formType == 'select' ||
              element.formType == 'checkbox'
            ) {
              var temps = []
              for (let i = 0; i < element.setting.length; i++) {
                // 必须有属性 才能for绑定 所以处理了下数据
                const item = element.setting[i] 
                temps.push({ value: item })
              }
              element.showSetting = temps // 放到showSeeting上

              // 删除无效的多选默认值
              if (element.formType == 'checkbox') {
                element.defaultValue = element.defaultValue.filter(item => {
                  return element.setting.indexOf(item) != -1
                })
              }
            }
            element.isNull = element.isNull == 1
            element.isUnique = element.isUnique == 1
             element.isEdit = element.isEdit == 1
             element.isEdit1 = element.isEdit1 == 1
              element.isEdit2 = element.isEdit2 == 1
              element.isEdit3 = element.isEdit3 == 1
              element.isEdit4 = element.isEdit4 == 1
              element.isEdit5 = element.isEdit5 == 1
              element.isEdit6 = element.isEdit6 == 1
              element.isEdit7 = element.isEdit7 == 1
              element.isEdit8 = element.isEdit8 == 1
              element.isEdit9 = element.isEdit9 == 1
              element.isEdit10 = element.isEdit10 == 1
          }
          this.fieldArr = res.data
          if (res.data.length > 0) {
            this.selectedIndex = 0
            this.form = this.fieldArr[0] 
          }
          this.rejectHandle = false
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 删除一行自定义数据
    handleDelete(item, index) {
      this.$confirm('确定删除该自定义字段吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.fieldArr.splice(index, 1)
          this.$nextTick(() => {
            this.selectedIndex = -1
          })
        })
        .catch(() => {})
    },
    // 主列表的选择
    handleSelect(item, index) {
      this.selectedIndex = index
      if (this.selectedIndex === index) {
        // 表自定义字段的刷新
        if (index >= 0) {
          this.form = this.fieldArr[index]
        }
      }
    },
    // 表的选择
    handleChildSelect(data) {
      this.form = data.data
    },
    // 预览表单
    handlePreview() {
      this.tablePreviewData = this.$route.params
      this.showTablePreview = true
    },
    // 保存数据
    handleSave() {
      if (this.rejectHandle) return
      var save = true

      var tempFieldArr = objDeepCopy(this.fieldArr)
      for (let index = 0; index < tempFieldArr.length; index++) {
        const item = tempFieldArr[index]

        item.isNull = item.isNull == true ? 1 : 0
        item.isUnique = item.isUnique == true ? 1 : 0
        item.isEdit = item.isEdit == true ? 1 : 0
        item.isEdit1 = item.isEdit1 == true ? 1 : 0
        item.isEdit2 = item.isEdit2 == true ? 1 : 0
        item.isEdit3 = item.isEdit3 == true ? 1 : 0
        item.isEdit4 = item.isEdit4 == true ? 1 : 0
        item.isEdit5 = item.isEdit5 == true ? 1 : 0
        item.isEdit6 = item.isEdit6 == true ? 1 : 0
        item.isEdit7 = item.isEdit7 == true ? 1 : 0
        item.isEdit8 = item.isEdit8 == true ? 1 : 0
        item.isEdit9 = item.isEdit9 == true ? 1 : 0
        item.isEdit10 = item.isEdit10 == true ? 1 : 0 
        if (!item.name) {
          save = false
          this.$message({
            type: 'error',
            message: '第' + (index + 1) + '行的自定义字段，标识名不能为空'
          })
          break
        } else if (item.formType == 'select' || item.formType == 'checkbox') {
          var temps = []
          for (let i = 0; i < item.showSetting.length; i++) {
            const element = item.showSetting[i]
            if (element.value) {
              temps.push(element.value)
            }
          }
          item.options = temps.join(',')
          if (item.formType == 'checkbox') {
            item.defaultValue = item.defaultValue.join(',')
          }
        }
        item.type = this.getTypeFromFormType(item.formType)
      }

      if (save) {
        var params = {}
        params.data = tempFieldArr
        params.label = this.$route.params.label
        if (this.$route.params.type === 'oa_examine') {
          params.categoryId = this.$route.params.id
        }
        for (const item of params.data) {
          for (const key in item) {
            if (JSON.stringify(item[key]) == '{}') {
              item[key] = null
            }
          }
        }

        // 请求
        const request = this.$route.params.type === 'oa_examine' ? oaFieldHandle : customFieldHandle
        request(params)
          .then(res => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getCustomInfo()
          })
          .catch(() => {
            this.getCustomInfo()
          })
      }
    },
    getTypeFromFormType(formType) {
      return (
        {
          text: 1,
          textarea: 2,
          select: 3,
          date: 4,
          number: 5,
          floatnumber: 6,
          mobile: 7,
          file: 8,
          checkbox: 9,
          user: 10,
          structure: 12,
          datetime: 13,
          email: 14,
          customer: 15,
          business: 16,
          contacts: 17,
          map_address: 18,
          category: 19,
          contract: 20,
          receivables_plan: 21
        }[formType] || '0'
      )
    },
    // 返回
    handleCancel() {
      this.$router.go(-1)
    },
    /**  拖拽操作部分 */
    // 从左侧移动到右侧
    handleEnd(e) {
      if (!this.rejectHandle) {
        const newField = new Field({
          name: this.movedItem.name,
          formType: this.movedItem.formType
        })
        // 如果当前选中的table 则加入到table中
        if (
          this.form &&
          this.form.formType === 'form' &&
          this.movedItem.formType !== 'form'
        ) {
          this.form.formValue.push(newField)
        } else {
          this.fieldArr.push(newField)
          this.selectedIndex = this.fieldArr.length - 1
        }
      }
    },
    // 从左侧移动到右侧 时候的数据对象
    handleMove(obj) {
      this.movedItem = obj
    },
    // 点击左侧进行添加
    handleClick(obj) {
      this.movedItem = obj
      this.handleEnd()
    },
    // list move
    handleListMove(e) {
      this.selectedIndex = e.newIndex
    },
    /**  拖拽操作部分 */
    /**  左上角title */
    getTitle() {
      if (this.$route.params.type == 'crm_leads') {
        return '线索'
      } else if (this.$route.params.type == 'crm_customer') {
        return '客户'
      } else if (this.$route.params.type == 'crm_contacts') {
        return '联系人'
      } else if (this.$route.params.type == 'crm_business') {
        return '商机'
      } else if (this.$route.params.type == 'crm_contract') {
        return '合同'
      } else if (this.$route.params.type == 'crm_product') {
        return '产品'
      } else {
        return ''
      }
    },
    /**
     * 获取添加字段
     */
    getTransformField() {
      filedGetField({
        label: crmTypeModel['customer']
      })
        .then(res => {
          const data = {
            text: [],
            textarea: [],
            select: [],
            checkbox: [],
            number: [],
            floatnumber: [],
            mobile: [],
            email: [],
            date: [],
            datetime: [],
            user: [],
            structure: []
          }

          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index]
            const array = data[element.formType]
            if (array) {
              array.push({
                label: element.name,
                value: element.fieldId
              })
            }
          }

          this.transformData = data
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.el-form-item {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e1e1;
  .desc {
    color: #999;
    font-size: 12px;
  }
  &:last-child {
    margin-top: 15px;
  }
}

.title {
  padding-bottom: 20px;
  font-size: 18px;
  color: #333;
  font-weight: normal;
}

.wrapper {
  padding: 10px 0;
  background-color: white;
  min-width: 1000px;
  overflow: hidden;
  flex: 1;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  .left {
    min-width: 310px;
    .mini-title {
      font-size: 14px;
      margin: 30px 0 20px 20px;
    }
    .list-wrapper {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .field-item {
        width: 130px;
        height: 30px;
        font-size: 13px;
        padding: 0 10px;
        background: #ebf3ff;
        margin-bottom: 10px;
        border-radius: 3px;
        cursor: pointer;
        @include left;
        .icon {
          color: #74b2f2;
          margin-right: 8px;
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .content {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    .el-header {
      border-bottom: 1px solid #e1e1e1;
      @include right;
    }
    .el-main {
      padding: 0;
      .selected {
        border-left: 2px solid #46cdcf;
        background: #f7f8fa;
      }
      .no-list {
        margin: 200px 0;
        color: #ccc;
        @include center;
      }
    }
  }

  .right {
    font-size: 14px;
    .mini-title {
      height: 60px;
      border-bottom: 1px solid #e1e1e1;
      padding-left: 20px;
      @include left;
    }
  }
}
</style>

上面是父组件的代码

    <el-aside
        class="right"
        width="310px">
        <div class="mini-title">字段属性</div>
        <field-info
          v-if="form"
          :field="form"
          :can-transform="canTransform"
          :transform-data="transformData"/>
      </el-aside>

这是调用子组件的代码