通过下拉框拉取其他表数据，新增到另外一张表

从其他表拉取数据做为下拉框选项

• 在contrler创建一个selcet类型的方法，用List接收数据库返回的数据，DTO作为接收参数。
  
  -调用service层接口 @Service
  
• 实现业务逻辑
  
• 调用dao接口方法 @mapper
  
• 在mapper查询数据库
  
• DTO层定义与前端交互的字段

前端获取数据，填到下拉框表格，提交后端保存到数据库（不同表）、

• service
• impl
  
• DTO里面包含一条数据库里面没有的字段classifys用来保存前端返回的数组数据，通过循环遍历给classify字段。
• DAO接口
• 
  我选择用entity实体类作为参数
  

这里面的字段要和实体类一致，也要和数据库一致，同时前端返回的字段名要和实体类或者DTO(接收)类型一致。

前端代码

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-taskdemo__tbtaskdetail">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="任务名称" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="dataForm.taskStart" placeholder="任务开始时间" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.taskEnd" placeholder="任务结束时间" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('taskdemo:tbtaskdetail:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('taskdemo:tbtaskdetail:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="" header-align="center" align="center"></el-table-column>
        <el-table-column prop="name" label="任务名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="contest" label="任务内容" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column prop="taskStart" label="任务开始时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="taskEnd" label="任务结束时间" header-align="center" align="center"></el-table-column> -->
        <el-table-column prop="classify" label="任务分类名称" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column prop="updateDate" label="" header-align="center" align="center"></el-table-column> -->
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('taskdemo:tbtaskdetail:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('taskdemo:tbtaskdetail:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './tbtaskdetails-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/taskdemo/tbtaskdetail/page',
        getDataListIsPage: true,
        exportURL: '/taskdemo/tbtaskdetail/export',
        deleteURL: '/taskdemo/tbtaskdetail',
        deleteIsBatch: true
      },
      dataForm: {
        name: '',
        // taskStart: '',
        // taskEnd: '',
      }
    }
  },
  watch: {
  },
  components: {
    AddOrUpdate
  }
}
</script>

<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="任务内容" prop="contest">
        <el-input v-model="dataForm.contest" placeholder="任务内容"></el-input>
      </el-form-item>
      <!-- <el-form-item label="任务开始时间" prop="taskStart">
        <el-input v-model="dataForm.taskStart" placeholder="任务开始时间"></el-input>
      </el-form-item>
      <el-form-item label="任务结束时间" prop="taskEnd">
        <el-input v-model="dataForm.taskEnd" placeholder="任务结束时间"></el-input>
      </el-form-item> -->
      <el-form-item prop="calssify" label="任务分类" class="role-list">
        <el-select v-model="dataForm.classifys" multiple placeholder="任务分类">
          <el-option v-for="task in taskList"
          :key="task.id"
          :label="task.classifyName"
          :value="task.classifyName">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="任务分类名称" prop="classify">
        <el-input v-model="dataForm.classify" placeholder="任务分类名称"></el-input>
      </el-form-item> -->
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      taskList: [],

      dataForm: {
        id: '',
         name: '',
        contest: '',
        classify: '',
        classifys: '',
        // taskid: '',
        creator: '',
        updaterDate: '',
        updater: '',
        createDate: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        taskName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        taskDo: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        taskStart: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        taskEnd: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        classifyName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
         Promise.all([
          this.getTaskList()
        ]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          }
        })
      })
    },

    // 获取任务类别列表
    getTaskList () {
      // return this.$http.get('/sys/role/list').then(({ data: res }) => {
        return this.$http.get('/ground/taskClassify/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.taskList = res.data
      }).catch(() => {})
    },
    // 获取信息
    getInfo () {
      this.$http.get('/taskdemo/tbtaskdetail/' + this.dataForm.id).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/taskdemo/tbtaskdetail/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>