公司项目总结合分享经验

珠海督办

1.批量导入

导入excel表单给接口，接口返回前端想要的数据

list是代表数据的数量，titleMap是代表数据中会有那些字段

listl里面的字段：

value是代表要显示的值，success为true代表excel表格的内容填写是正确的，false代表的填写有无，然后完整的信息在depts里面（注意： 不同的字段的完整信息的字段名不一样，有的是输入框就不会有改字段）

titleMap里面的字段

index代表是第一个，inputType代表是输入框还是下拉框等的编辑类型，isEdit：是否禁选，isRequest：是否校验，multiple：是否多选，mixedData：是否是混合数据，value：字段名

将这些数据存到浏览器的缓存里。

然后调用initData的方法将数据渲染到表格组件里面，然后再根据不同专题，需要前端手动添加的字段再加进去。

点击完善信息，将这一整体的信息传到到表单组件里

可以根据里面的inputType来显示是什么类型。

这些都是小组件来写的。

保存是将数据整理好，有的是父子任务的，有些字段要放在外面，要将这些父任务的字段房子一个集合中，和有一些父任务只有一个的，父任务的字段修改了其他的都要修改，这也要放在一个集合，保存在渲染到表格中。
最后点击送办理或者送立项

完整代码

<template>
  <div class="card-box batch-cardBox">
    <!--完成资料-->
    <div v-if="showCompleteData" class="taskCard">
      <c-title text="完善信息" @close="cancle" />
      <div class="task-content" style="padding-top:30px">
        <!-- <complete-data :complete-data="completeData" :is-no-show-form-item="isNoShowFormItem" :other-task="otherTask" :topic-type="topicType" @complete="getCompleteData" @cancle="cancle" /> -->
        <div class="task-content-wrap">
          <!-- {{ completeData }} -->
          <init-form ref="initForm" :inline="false" :is-show-search-btn="false" :form-data.sync="completeData" label-width="120px" />
          <div class="task-content-btn">
            <el-button type="primary" @click="getCompleteData">
              保存
            </el-button>
            <el-button @click="cancle">
              取消
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="card-content">
        <c-title text="批量导入预览" style="background:#fff" @close="$router.replace({path:`${taskRoute}?topicType=${topicType}`})" />
        <div v-loading="loading" class="card-module table-module" element-loading-text="正在处理，请稍候！">
          <div class="head-opear">
            <upload :file-type="['.xlsx', '.xls']" :limit="1" :no-dotted="true" :is-http-request="true" :file-data="fileData" @httpRequest="onChangeFile"><el-button type="primary" class="el-button--common" style="margin-right:10px">
              重新导入
            </el-button></upload>
            <el-button type="primary" class="el-button--common" @click="send('draft')">
              存为草稿
            </el-button>
            <template v-if="(topicTypeListMapItem && topicTypeListMapItem.showImportApprovalBtn) || otherTask === 'analysisTask'">
              <el-button type="primary" class="el-button--common" :disabled="multipleSelection.length === 0 && ['leaderInstruction', 'internetAdd', 'analysisTask'].includes(topicType)" @click="sendpproval">
                <!-- <svg-icon v-if="topicType === 'leaderInstruction'" icon-class="approval" /> -->
                送立项
              </el-button>
            </template>
            <el-button class="el-button--common" :disabled="multipleSelection.length === 0" @click="send('send')">
              <svg-icon icon-class="foliCure" />
              送办理
            </el-button>
            <template v-if="(topicTypeListMapItem && topicTypeListMapItem.showItemTypeBtn) || otherTask === 'analysisTask'">
              <el-button class="el-button--common" :disabled="multipleSelection.length === 0" @click="showDialog('itemType')">
                <svg-icon icon-class="type" />
                选择事项类型
              </el-button>
            </template>
            <el-button class="el-button--common" :disabled="multipleSelection.length === 0" @click="showSubMission">
              <svg-icon icon-class="date" />
              {{ topicType !== 'internetAdd' ? '选择报送时间' : '选择核查反馈时间' }}
            </el-button>
            <el-button :disabled="multipleSelection.length === 0" class="el-button--common" @click="showDialog('limitDate')">
              <svg-icon icon-class="close-time" />
              选择办结期限
            </el-button>
            <el-button v-if="topicTypeListMapItem && topicTypeListMapItem.showWorkRequireBtn" :disabled="multipleSelection.length === 0" class="el-button--common" @click="showDialog('workRequire')">
              <svg-icon icon-class="close-time" />
              批量填写工作要求
            </el-button>
            <el-button class="el-button--common" :disabled="multipleSelection.length === 0" @click="deleteTableData">
              <svg-icon icon-class="delCircle" />
              删除
            </el-button>
          </div>
          <table-list
            ref="table"
            :stripe="true"
            :table-data="batchTable"
            :is-import-data="true"
            :columns="batchColumns.filter(item => { return !item.noShow })"
            show-opear
            show-selection
            :fix-width="100"
            :show-pagination="false"
            :set-table-h="false"
            :record-check="false"
          >
            <template slot-scope="{ row, $index }">
              <div class="table-buttonList">
                <el-button type="text" @click="complete(row, $index)">完善信息</el-button>
              </div>
              <el-popover
                v-if="row.itemType && typeof(row.itemType.success) === 'boolean' && !row.itemType.success"
                placement="top"
                title=""
                trigger="hover"
                :content="row.itemType.message"
              >
                <i slot="reference" class="el-icon-warning" style="color:#F44336" />
              </el-popover>
            </template>
          </table-list>
        </div>
      </div>
    </template>
    <!--选择事项和办结期限-->
    <el-dialog
      :title="dialogTitle(dialogContent)"
      custom-class="resetBody-dialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :append-to-body="true"
      width="400px"
      height="358px"
    >
      <div class="dialogContent">
        <div v-if="dialogContent === 'itemType' || dialogContent === 'workRequire'" class="batch-content">
          <el-form ref="changeForm" :model="formItemModel" label-position="top">
            <el-form-item v-if="dialogContent === 'itemType'" label="事项类型">
              <el-radio v-model="formItemModel.formItemType" label="overseer">督办事项</el-radio>
              <el-radio v-model="formItemModel.formItemType" label="assign">交办事项</el-radio>
            </el-form-item>
            <el-form-item v-else label="工作要求">
              <el-input
                v-model.trim="formItemModel.formWorkRequire"
                type="textarea"
                rows="4"
                placeholder="请输入"
                clearable
                :maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </el-form>
          <div class="tips-content">{{ `温馨提示：确认后，勾选的任务的${dialogContent === 'itemType' ? '事项类型' : '工作要求'}将设置为所${dialogContent === 'itemType' ? '选' : '填写'}的内容。` }}</div>
        </div>
        <div v-else>
          <el-date-picker
            v-model="limitDate"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择办结时间"
          />
        </div>
      </div>
      <div class="vel-dialog-footer">
        <div class="vel-footer-contain">
          <input type="button" class="vel-button vel-button-primary" value="确 定" @click="sureChangeType">
          <input type="button" class="vel-button vel-button-default" value="取 消" @click="dialogVisible=false">
        </div>
      </div>
    </el-dialog>
    <!-- 人员选择 -->
    <auth-panel ref="peopleAuthEvent" :is-send-leader="true" :dept-array.sync="peopleArray" :has-same-data-default-props="hasSameDataDefaultProps" :type="authPanelType" :multiple="multiple" class="hideDiv" />
    <!--报送周期组件-->
    <submission-dialog ref="submissionDialog" :visible-show="subMissionVisible" :sub-mission-data="subMissionData" @confirm="confirmMission" />
  </div>
</template>
<script>
import { debounce } from '@/utils/utils.ts'
import submissionDialog from '@/components/Dialog/submissionDialog.vue'
import { saveOrSubmitWorkProgress, importTaskByExcelNew, saveChildTask, submitUndertakeBatch, selectOverseerMeetingLeaType } from '@/api/common.js'
import { mapState, mapMutations, mapActions } from 'vuex'
import { topicTypeListMap } from '@/views/topicTypePage/data/topicTypeListMap.js'
import { batchTableNoFromInterface, batchColumnsNoFromInterface } from './data'
// import { cycleData } from '@/utils/common.ts'
export default {
  name: 'ImportDetails',
  components: { submissionDialog },
  // beforeRouteLeave(to, from, next) {
  //   if (this.isDraftLeave) { // 判断是否通过草稿离开导入页面
  //     next()
  //   } else {
  //     this.remainingDataNum = this.isFirstEnterAndNoSend ? this.batchTable.length : this.batchTable.length - this.multipleSelection.length
  //     this.isLeaveImportDetails(next)
  //     // next(false)
  //   }
  // },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      loading: false, // 加载中蒙层
      // urgencyList: ['平急', '紧急', '特急', '特提'],
      hasSameDataDefaultProps: { isSame: 'complexId', parentId: 'departId', childrenId: 'userId' },
      dialogContent: 'itemType', // 判断选择事项类型和办结期限弹框显示不同内容
      limitDate: '', // 办结时间
      theSameId: '', // 记录theSameId，常规会议、政务活动汇总、协调会完善信息保存后，同步修改theSameId相同的数据
      // taskTitle: '', // 记录会议名称
      // meetingTime: '', // 记录会议时间
      isFirstEnterAndNoSend: true, // 记录是否第一次进来页面没操作送办理送立项
      isDraftLeave: false, // 判断是否通过草稿离开导入页面
      remainingDataNum: '', // 记录页面还剩多少导入数据没办理
      formItemModel: {
        formItemType: 'assign',
        formWorkRequire: ''
      },
      dialogVisible: false,
      // isNoShowFormItem: {},
      fileData: [],
      subMissionVisible: false, // 显示报送周期
      subMissionData: {},
      weekCN: { week01: '一', week02: '二', week03: '三', week04: '四', week05: '五', week06: '六', week07: '日' },
      deliveryTime: {},
      multipleSelection: [],
      id: '',
      topicType: '',
      otherTask: '',
      index: '',
      showCompleteData: false,
      peopleArray: [],
      authPanelType: 'people',
      // 是否多选， true为多选
      multiple: true,
      /** *批量表格数据***/
      batchCount: 2,
      batchTable: [],
      batchColumns: [],
      completeData: [],
      isSendLeader: false,
      instanceType: 'PARALLEL',
      // extendCompleteForm: { // 用于扩展完善信息有些表单信息是不用显示在表格中的
      // },
      // meetingTypeOption: [],
      // takeLeadOption: [],
      // deputySecretaryOption: [],
      // cityLeadersOption: [],
      // meetingTypeOption: [],
      // meetingTypeOption: [],
      workCategoryOption: [{
        value: 'cross',
        label: '需跨部门协调的工作'
      }, {
        value: 'inCharge',
        label: '分管领域重点工作'
      }],
      itemTypeOption: [{
        value: 'overseer',
        label: '督办事项'
      }, {
        value: 'assign',
        label: '交办事项'
      }],
      urgencyOption: [
        {
          value: '1',
          label: '平急'
        },
        {
          value: '2',
          label: '紧急'
        },
        {
          value: '3',
          label: '特急'
        },
        {
          value: '4',
          label: '特提'
        }
      ],
      problemSourceOption: [
        { value: 'theStateCouncil', label: '“互联网+督查”问题线索（国务院）' },
        { value: 'guangdongProvince', label: '“互联网+督查”问题线索（广东省）' }
      ]
    }
  },
  computed: {
    ...mapState('common', ['taskRoute']),
    dialogTitle() {
      return (type) => {
        if (type === 'itemType') {
          return '选择事项类型'
        } else {
          return '选择办结期限'
        }
      }
    },
    // 下拉的数据，是vuex存在保存到浏览器上的
    topicTypeListMapItem() {
      return topicTypeListMap.get(this.topicType) // 获取批量导入后各专题按钮、接口、内容权限
    },
    takeLeadOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.leaderData || []
    },
    cityLeadersOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.cityLeadersData || []
    },
    deputySecretaryOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.deputySecretaryData || []
    },
    meetingTypeOption() {
      return JSON.parse(localStorage.getItem('store')).common.meetTypeList || []
    },
    taskSourceOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.itemTypeData.filter(res => { return res.dicStatus * 1 === 1 }) || []
    },
    mainLeaderOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.mainLeaderData.filter(res => { return res.dicStatus * 1 === 1 }) || []
    },
    leaderOption() {
      return JSON.parse(localStorage.getItem('store')).firstLevelTask.leaderData.filter(res => { return res.dicStatus * 1 === 1 }) || []
    }
  },
  async created() {
    // 获取表格选择数据
    this.$EventBus.$on('selection-change', (val) => {
      this.multipleSelection = val
    })
    this.id = this.$route.query.id
    const getDataByExcel = JSON.parse(sessionStorage.getItem('getDataByExcel')) // 批量导入掉接口返回的数据存储到浏览器，然后再这里获取赋值
    this.initData(getDataByExcel) // 初始化
    if (this.topicTypeListMapItem && this.topicTypeListMapItem.leaType) {
      this.topicTypeListMapItem.leaType.forEach(async(leaData) => {
        const res = await leaData.interface(leaData.params)
        this.$store.commit(leaData.store, res.data.data.map(item => {
          return { ...item, value: item.leadCode, label: item.leadName }
        }))
      })
    }
    this.isFirstEnterAndNoSend = true
    if (this.topicTypeListMapItem && this.topicTypeListMapItem.isMeetingTopicType) {
      this['common/getMeetingTypeList'](this.topicType)
    }
  },
  methods: {
    ...mapActions([
      'common/getMeetingTypeList'
    ]),
    ...mapMutations([
      'firstLevelTask/TOPIC_TYPE',
      'firstLevelTask/OTHER_TASK'
    ]),
    importTaskByExcelNew(file) {
      const params = new FormData()
      params.append('file', file)
      params.append('topicType', this.topicType)
      params.append('otherTask', this.otherTask)
      importTaskByExcelNew(params).then(res => {
        if (res.data.isSuccess) {
          sessionStorage.setItem('getDataByExcel', JSON.stringify(res.data))
          this.initData(res.data)
        } else {
          this.$message({ type: 'error', message: res.data.errorInfo })
        }
      })
    },
    // 批量导入初始化表格
    initData(getDataByExcel) {
      this.topicType = getDataByExcel.topicType
      this.otherTask = getDataByExcel.otherTask
      this['firstLevelTask/TOPIC_TYPE'](this.topicType)
      this['firstLevelTask/OTHER_TASK'](this.otherTask)
      // 通过topicType来标识在这个集合中获取默认的字段
      const batchTable = batchTableNoFromInterface.get(this.otherTask === 'analysisTask' ? 'analysisTask' : this.topicType)
      // 在将批量导入的表单返回的字段和默认字段整合在一起组成新集合this.batchTable
      this.batchTable = getDataByExcel.list.map(item => {
        return {
          ...item,
          ...batchTable
        }
      })
      // 解析字段说明（必填、label、序号、是否编辑等）
      const titleMapInit = Object.keys(getDataByExcel.titleMap).map(item => {
        return { ...getDataByExcel.titleMap[item], label: item, title: getDataByExcel.titleMap[item].value }
      })
      // 排序
      const sortTitleMap = this.bubbleSort(titleMapInit, 'index')
      // 将排序好的字段赋值给表格字段集合
      this.batchColumns = sortTitleMap.map(item => {
        return {
          ...item,
          isRequest: item.isRequest,
          slot: item.label,
          title: item.title,
          label: item.label,
          width: item.label === 'sort' ? 60 : ''
        }
      })
      // batchColumnsNoFromInterface根据不同专题将默认字段加在导入返回的字段后面
      this.batchColumns = [...this.batchColumns, ...batchColumnsNoFromInterface(this.batchColumns.length, this.itemTypeOption).get(this.otherTask === 'analysisTask' ? 'analysisTask' : this.topicType)]
      if (this.otherTask === 'analysisTask') {
        // this.batchColumns = [...this.batchColumns, ...analysisTaskList]
        this.batchColumns.forEach(item => {
          if (item.label === 'mainUnits') {
            this.$set(item, 'authPanelType', 'people')
            this.$set(item, 'mixedData', true)
          }
        })
      }
    },
    onChangeFile(file) {
      this.fileData = []
      this.importTaskByExcelNew(file)
    },
    // 点击完善信息
    complete(row, index) {
      this.index = index
      // 通过遍历将表格的信息跟字段集合的信息进行整合，形成表单想要的数据和格式
      this.completeData = this.extendCompleteData(this.batchColumns.filter(item => { return !item.noShow }).map(item => {
        return {
          ...item,
          success: row[item.label].success, // 是否填写有无
          depts: row[item.label].depts ? row[item.label].depts : '', // 部门集合
          deptArray: row[item.key] ? row[item.key].depts : [], // 部门集合
          persons: row[item.label].persons ? row[item.label].persons : [],
          // meetingTypeId: row[item.label].meetingTypeId,
          // workCategoryId: row[item.label].workCategoryId,
          [item.label + 'Id']: row[item.label][item.label + 'Id'],
          value: item.inputType === 'select' ? row[item.label][item.label + 'Id'] || '' : row[item.label].value, // 回显的值
          deliveryTime: row[item.label].deliveryTime ? row[item.label].deliveryTime : '',
          fileJson: row.fileJson ? row.fileJson.value : '', // 文件信息
          message: row[item.label].message ? row[item.label].message : '', // 提示
          maxlength: item.limitSize, // 最大输入的字数
          showWordLimit: item.isLimit,
          noLimitCurrentDate: true, // 时间选框不进行校验
          // label: row[item.label].value,
          key: item.label, // 英文字段
          // width: 'calc(100% - 120px)',
          options: this[item.label + 'Option'] || [], // 下拉的数据，通过字段名+Option从浏览器获取存在data中
          label: item.title, // 字段名称
          type: item.inputType, // 表单类型
          rules: this.getRules(item),
          defaultProps: { // 初始化表单key值
            value: 'title', // 表单显示的值
            authPanel: 'depts' // 获取选择单位/选择人员所选择的对象值
          }
        }
      }).filter(item => {
        return (item.key !== 'sort' && item.key !== 'sendCopys')
      }))
      // const initExtendCompleteForm = this.extendCompleteForm[this.topicType] ? this.extendCompleteForm[this.topicType].map(item => {
      const initExtendCompleteForm = this.batchColumns.filter(item => { return item.noShow }).map(item => {
        return {
          ...item,
          value: row[item.key] ? row[item.key].value : '',
          depts: row[item.key] ? row[item.key].depts : '',
          deptArray: row[item.key] ? row[item.key].depts : []
        }
      })
      // this.completeData = [...this.completeData, ...initExtendCompleteForm, { key: 'fileJson', type: 'upload', title: row.fileJson, value: row.fileJson ? row.fileJson.value : '', width: '100%', defaultProps: { // 初始化表单key值
      //   value: 'title' // 表单显示的值
      // }
      // }]
      console.log('1654', this.completeData, initExtendCompleteForm)
      this.completeData = [...this.completeData, ...initExtendCompleteForm]
      this.showCompleteData = true;
      // 存在父子任务theSameId 进行赋值（后面根据这个进行一些字段同步修改）
      (this.topicTypeListMapItem && (this.topicTypeListMapItem.isMeetingTopicType || this.topicTypeListMapItem.hasSubtasks)) && (this.theSameId = row.theSameId)
      // {
      // label:'系统名称',
      // key: 'systemName',
      // type: 'input'
      // }
    },
    // 整合数据
    extendCompleteData(list) {
      return list.map((item) => {
        console.log('1701', item)
        const obj = {
          deptArray: []
        }
        // if (item.key === 'mainUnits' || item.key === 'assistUnits' || item.key === 'distributeAssistUnitName') {
        // 单位或者部门的人
        if (item.inputType === 'authPanel' && item.authPanelType === 'department') {
          if (item.success) {
            if (item.depts.length > 0) {
              obj.deptArray = item[item.defaultProps.authPanel].map(item => {
                return { id: item.code, name: item.name, unitId: item.unitId, code: item.code, departId: item.departId }
              })
            }
          }
        } else if (item.key === 'meetingType') {
          this.topicType === 'coordinatingCommittee' && (item.isEdit = false)
        // } else if (item.key === 'takeLead' || item.key === 'cityLeaders' || item.key === 'deputySecretary') {
        } else if (item.inputType === 'select' && (item.key === 'takeLead' || item.key === 'cityLeaders' || item.key === 'deputySecretary' || item.multiple)) {
          // 下拉框多选
          obj.multiple = true
          obj.value = []
          if (item.success) {
            obj.value = item.persons.map(item => { return item.leadCode })
          }
        } else if (['leader', 'mainLeader'].includes(item.key)) {
          // 下拉框多选(特殊)
          obj.multiple = true
          obj.value = []
          if (item.success) {
            obj.value = item.value.split(',')
          }
        }
        // console.log('0850', item, obj)
        return { ...item, ...obj }
      })
    },
    // getCompleteData(data) {
    //   this.$set(this.batchTable, this.index, Object.assign(this.batchTable[this.index], data))
    //   console.log('this.batchTable', data, this.batchTable)
    //   if (['meetingDecision', 'plenumMeetingKeyWork', 'meetingSummary', 'coordinatingCommittee'].includes(this.topicType)) {
    //     const mergeKeyList = [...(this.topicType === 'plenumMeetingKeyWork' ? [] : ['meetingType']), ((this.topicType === 'meetingDecision' || this.topicType === 'meetingSummary') ? 'fileNumber' : ''), 'meetingTime', 'itemType', 'meetingFile', 'workRequire', 'sendCopys', 'sendCopysDeptId', 'sendCopysId'].concat(this.topicType === 'coordinatingCommittee' ? [] : ['taskTitle'])
    //     this.batchTable.forEach(item => {
    //       if (item.theSameId === this.theSameId) {
    //         mergeKeyList.forEach(key => {
    //           this.$set(item, key, data[key])
    //         })
    //       }
    //     })
    //   }
    //   const sameIds = this.multipleSelection.map(item => {
    //     return item.theTaskId
    //   })
    //   this.batchTable.forEach((item, index) => {
    //     if (sameIds.indexOf(item.theTaskId) > -1) {
    //       this.$nextTick(() => {
    //         this.$refs.table.toggleRowSelection(item, true)
    //       })
    //     }
    //   })
    //   this.showCompleteData = false
    // },
    getRules(data) {
      let rules = []
      if (data.limitSize && data.inputType !== 'select') {
        rules.push({ min: 0, max: data.limitSize, message: `${data.title}字数长度超过限制`, trigger: 'blur' })
      }
      if (data.isRequest) {
        rules.push({
          required: true,
          message: data.inputType === 'textarea' ? `请输入${data.title}` : `请选择${data.title}`
        })
      }
      if (data.rules) {
        rules = [...rules, ...data.rules]
      }
      return rules
    },
    // 保存
    getCompleteData() {
      // 校验
      this.$refs.initForm.getFormData(this.initCompleteData)
    },
    initCompleteData(formData) {
      if (formData.valid) {
        const initFormData = {
          fileJson: JSON.stringify(this.fileList)
        }
        console.log('1707', formData)
        formData.data.forEach(item => {
          // if (item.key === 'mainUnits' || item.key === 'assistUnits' || item.key === 'sendCopys' || item.key === 'distributeAssistUnitName') {
          // 单位和抄送人员整理存到新集合
          if (item.inputType === 'authPanel') {
            initFormData[item.key] = {
              depts: item.deptArray,
              success: true,
              value: item.title
            }
          // } else if (item.key === 'takeLead' || item.key === 'cityLeaders' || item.key === 'deputySecretary') {
          } else if (item.inputType === 'select') {
            // 多选下拉整理存在新集合
            if (item.multiple) {
              initFormData[item.key] = {
                persons: item.options.filter(option => { return item.title.includes(option.value) }),
                [item.key + 'Id']: item.options.filter(option => { return item.title.includes(option.value) }).map(option => { return option.value }).join(','),
                success: true,
                value: item.options.filter(option => { return item.title.includes(option.value) }).map(option => { return option.label }).join(',')
              }
            } else {
              // 单选下拉整理存在新集合
              initFormData[item.key] = {
                [item.key + 'Id']: item.title,
                success: true,
                value: item.options.filter(option => { return option.value === item.title }).map(option => { return option.label }).join(',')
              }
            }
          } else if (item.key === 'supervisionCycle') {
            // 报送时间整理存在新集合
            initFormData[item.key] = {
              deliveryTime: item.deliveryTime,
              success: true,
              value: item.title
            }
          } else {
            initFormData[item.key] = {
              success: true,
              value: item.title
            }
          }
        })
        this.$set(this.batchTable, this.index, Object.assign(this.batchTable[this.index], initFormData))
        if (this.topicTypeListMapItem && (this.topicTypeListMapItem.isMeetingTopicType || this.topicTypeListMapItem.hasSubtasks)) {
          // 修改需要同步修改的字段
          let mergeKeyList = []
          if (this.topicTypeListMapItem.isMeetingTopicType) {
            mergeKeyList = [...(this.topicType === 'plenumMeetingKeyWork' ? [] : ['meetingType']), ((this.topicType === 'meetingDecision' || this.topicType === 'meetingSummary') ? 'fileNumber' : ''), 'meetingFile', 'meetingTime', 'itemType', 'workRequire', 'sendCopys', 'sendCopysDeptId', 'sendCopysId'].concat(this.topicType === 'coordinatingCommittee' ? [] : ['taskTitle'])
          } else {
            mergeKeyList = ['taskSource', 'taskSourceId', 'workRequire', 'sendCopys', 'sendCopysDeptId', 'sendCopysId', 'taskTitle']
          }
          // 通过遍历和theSameId进行一些字段同步修改
          this.batchTable.forEach(item => {
            if (item.theSameId === this.theSameId) {
              mergeKeyList.forEach(key => {
                this.$set(item, key, initFormData[key])
              })
            }
          })
        }
        const sameIds = this.multipleSelection.map(item => {
          return item.theTaskId
        })
        this.batchTable.forEach((item, index) => {
          if (sameIds.indexOf(item.theTaskId) > -1) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(item, true)
            })
          }
        })
        this.showCompleteData = false
      }
    },
    // 显示报送周期
    showSubMission() {
      this.$refs.submissionDialog.showVisilie()
    },
    // 回显周期数据
    confirmMission(callData) {
      // const { cycleType, supervisionCycle, supervisionCycleIds, firstSubmitTime } = cycleData(callData)
      // this.deliveryTime.supervisionCycle = supervisionCycle
      // this.deliveryTime.supervisionCycleIds = supervisionCycleIds
      // this.deliveryTime.cycleType = cycleType
      // this.deliveryTime.firstSubmitTime = firstSubmitTime
      // console.log('this.deliveryTime', this.deliveryTime)
      ['supervisionCycle', 'supervisionCycleIds', 'cycleType', 'firstSubmitTime'].forEach(item => {
        this.$set(this.deliveryTime, item, callData[item])
      })
      const sameIdList = this.multipleSelection.map(item => {
        return item.theTaskId
      })
      this.batchTable = this.batchTable.map(item => {
        if (sameIdList.indexOf(item.theTaskId) > -1) {
          item['supervisionCycle'] = {
            deliveryTime: this.deliveryTime,
            success: true,
            value: this.deliveryTime.supervisionCycle
          }
        }
        return item
      })
    },
    // 送办理
    send(type, instanceType) {
      debounce(async() => {
        let sendList
        if (this.topicTypeListMapItem && this.topicTypeListMapItem.isMeetingTopicType && type === 'approval') { // 会议送立项审核
          sendList = this.batchTable
        } else {
          sendList = (type === 'send' || type === 'approval') ? this.multipleSelection : type === 'draft' ? this.batchTable : this.getLaveData()
        }
        let [response, obj] = ['', '']
        if (type === 'send') {
          if (!this.checkDeliveryTime('supervisionCycle')) {
            this.$message({ type: 'error', message: this.topicType !== 'internetAdd' ? '请选择报送时间' : '请选择核查反馈时间' })
            return
          } else if ((this.topicType === 'leaderInstruction' || this.otherTask === 'analysisTask') && !this.checkDeliveryTime('itemType')) {
            this.$message({ type: 'error', message: '请选择事项类型' })
            return
          } else if (!this.checkTableData()) {
            this.$message({ type: 'error', message: '存在错误检验，请检查！' })
            return
          }
        }
        // 整合接口需要数据格式，传给后台
        const relationList = sendList.map(item => {
          return Object.keys(item).reduce((prev, next) => {
            // 单位和部门的数据整理
            if (next === 'mainUnits' || next === 'distributeAssistUnitName' || next === 'assistUnits') {
              const obj = {
                assistUnits: ['mainUnitName', 'mainDeptId', 'mainUnitId'],
                mainUnits: ['assistUnitNames', 'assistDeptIds', 'assistUnitIds'],
                distributeAssistUnitName: ['distributeAssistUnitName', 'distributeAssistDeptId', 'distributeAssistUnitId']
              }
              // const initObj = {
              //   name: next === 'mainUnits' ? 'mainUnitName' : 'distributeAssistUnitName',
              //   deptId: next === 'mainUnits' ? 'mainDeptId' : 'distributeAssistDeptId',
              //   unitId: next === 'mainUnits' ? 'mainUnitId' : 'distributeAssistUnitId'
              // }
              const initObj = {
                name: obj[next][0],
                deptId: obj[next][1],
                unitId: obj[next][2]
              }
              prev[initObj.name] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.name }).join(',') : ''
              if (this.otherTask === 'analysisTask' && next === 'mainUnits') {
                // 分解任务科室单位混选，所以按条件赋值
                prev[initObj.deptId] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.complexId ? i.complexId : i.departId }).join(',') : ''
                prev[initObj.unitId] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.complexId ? i.userId : i.code }).join(',') : ''
              } else {
                prev[initObj.deptId] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.departId }).join(',') : ''
                prev[initObj.unitId] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.code }).join(',') : ''
              }
            } else if (next === 'meetingFile' || next === 'theSameId' || next === 'theTaskId') {
              prev[next] = item[next]
            } else if (next === 'supervisionCycle') {
              // 报送时间的整理
              if (item[next].deliveryTime) {
                prev.cycleType = item[next].deliveryTime.cycleType
                prev.supervisionCycle = item[next].deliveryTime.supervisionCycle
                prev.supervisionCycleIds = item[next].deliveryTime.supervisionCycleIds
                prev.firstSubmitTime = item[next].deliveryTime.firstSubmitTime
              }
            } else if (['taskSource', 'urgency', 'workCategory', 'meetingType'].includes(next)) {
              // 单选下拉框
              prev[next] = item[next].value
              prev[next + 'Id'] = item[next][next + 'Id'] ? item[next][next + 'Id'] : ''
            } else if (next === 'itemType') {
              prev[next] = item[next][next + 'Id'] ? item[next][next + 'Id'] : ''
            } else if (['leader', 'mainLeader', 'takeLead', 'cityLeaders', 'deputySecretary'].includes(next)) {
              // 多选下来框
              prev[next] = (item[next].persons || item[next][next]).map(item => { return item.leadName || item.label }).join(',')
              prev[next + 'Id'] = (item[next].persons || item[next][next]).map(item => { return item.leadCode || item.value }).join(',')
              // else if (next === 'urgency') {
              //   prev[next + 'Id'] = item[next].value
              //   prev[next] = this.urgencyList[item[next].value - 1]
              // }
              // else if (['taskSource', 'leader', 'mainLeader'].includes(next)) {
              //   console.log('1527', item[next])
              //   prev[next] = item[next][next].map(item => { return item.label }).join(',')
              //   prev[next + 'Id'] = item[next][next].map(item => { return item.value }).join(',')
              // }
            } else if (next === 'sendCopys') {
              // 抄送
              prev['sendCopys'] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.name }).join(',') : ''
              prev['sendCopysId'] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(i => { return i.userId }).join(',') : ''
              prev['sendCopysDeptId'] = item[next].depts && item[next].depts.length > 0 ? item[next].depts.map(item => { return item.hasSameUserId }).flat().join(',') : ''
            } else {
              if (item[next]) {
                prev[next] = item[next].value
              }
            }
            return prev
          }, {})
        })

        if ((this.topicTypeListMapItem && !this.topicTypeListMapItem.hasSubtasks) || this.otherTask === 'analysisTask') {
          // 独立任务
          obj = relationList.map(item => {
            return { ...item, id: this.id ? this.id : '', topicType: this.topicType, otherTask: this.otherTask, ...(type === 'send' || type === 'approval' ? { variables: {
              isDoFirstTaskAuto: 'yes',
              nextManagers: this.peopleArray.length > 0 ? this.peopleArray.map(item => { return item.userId }).join(',') : '',
              sendTo: type === 'send' ? 'undertake' : 'approval',
              instanceType: type === 'send' ? '' : instanceType || 'PARALLEL'
            }} : {}) }
          })
        } else if (this.topicTypeListMapItem && (this.topicTypeListMapItem.isMeetingTopicType || this.topicTypeListMapItem.hasSubtasks)) {
          // 父子任务
          // 需要将这些字段不要放relationList里面，这些是属于父任务的
          const filterRelationList = ['meetingTime', 'meetingType', 'meetingTypeId', 'itemType', 'taskTitle', 'meetingFile', 'theSameId', 'workRequire', 'sendCopys', 'sendCopysId', 'sendCopysDeptId', 'taskSource', 'taskSourceId', 'documentUrl']
          obj = relationList.map(item => {
            return Object.keys(item).reduce((prev, next) => {
              if (filterRelationList.indexOf(next) > -1) {
                next === 'meetingFile' ? prev['fileJson'] = item[next] : prev[next] = item[next]
                if (next === 'theSameId') {
                  prev[next] = item[next]; delete item[next]
                }
              } else {
                prev.relationList[0][next] = item[next] ? item[next] : ''
              }
              return prev
            }, {
              theSameId: '',
              relationList: [{}],
              id: this.id ? this.id : '',
              topicType: this.topicType,
              ...(type === 'send' ? { submitStatus: '1' } : type === 'approval' ? { variables: {
                isDoFirstTaskAuto: 'yes',
                nextManagers: this.peopleArray.length > 0 ? this.peopleArray.map(item => { return item.userId }).join(',') : '',
                sendTo: 'approval',
                instanceType: instanceType || 'PARALLEL'
              }} : {})
            })
          })
        } else {
          obj = [{
            id: this.id ? this.id : '',
            topicType: this.topicType,
            relationList: relationList,
            ...(type === 'send' ? { submitStatus: '1' } : {})
          }]
        }
        this.loading = true
        if (type === 'send' || type === 'approval') {
          response = (this.topicTypeListMapItem && !this.topicTypeListMapItem.hasSubtasks) || this.otherTask === 'analysisTask' || ((this.topicTypeListMapItem && this.topicTypeListMapItem.isMeetingTopicType) && type === 'approval') ? await submitUndertakeBatch([
            ...obj
          ]) : await saveOrSubmitWorkProgress([
            ...obj
          ])
        } else {
          response = await saveChildTask([
            ...obj
          ])
        }
        const res = response.data
        if (res.success) {
          this.loading = false
          this.isFirstEnterAndNoSend = false
          this.remainingDataNum = this.batchTable.length - this.multipleSelection.length
          if (this.remainingDataNum === 0 || !type || type === 'draft' || (this.multipleSelection.length === 0 && this.topicType === 'meetingDecision' && type === 'approval')) {
            this.isDraftLeave = true
            this.$router.replace({ path: `${this.taskRoute}?topicType=${this.topicType}` })
          } else {
            if (type === 'send') {
              this.isLeaveImportDetails()
            } else {
              if (this.topicTypeListMapItem && !this.topicTypeListMapItem.hasSubtasks) {
                this.isLeaveImportDetails()
              } else {
                this.isDraftLeave = true
                if (this.multipleSelection.length > 0 && type !== 'approval') {
                  this.send()
                } else {
                  this.$router.replace({ path: `${this.taskRoute}?topicType=${this.topicType}` })
                }
              }
            }
          }
        } else {
          this.loading = false
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }, 600, this)()
    },
    // 判断是否离开导入预览页
    isLeaveImportDetails(next) {
      const h = this.$createElement
      this.$msgbox({
        title: '编辑任务确认',
        message: h('div', null, [
          h('p', null, [h('span', null, '您所导入的数据，还剩下'), h('span', { style: 'color: red' }, this.remainingDataNum), h('span', null, '条未处理！是否要将剩余未处理的数据存为草稿？')]),
          h('p', { style: 'margin-top: 20px' }, '如点击 “ 是 ” ，可在任务列表中查看'),
          h('p', null, '如点击 “ 否 ” ，数据将被不被保存，请谨慎操作！')
        ]),
        showCancelButton: true,
        confirmButtonText: '是',
        cancelButtonText: '否' }).then(() => {
        this.send()
      }).catch(() => {
        this.isDraftLeave = true
        if (next) {
          next()
        } else {
          this.$router.replace({ path: `${this.taskRoute}?topicType=${this.topicType}` })
        }
      })
    },
    // 删除列表数据
    async deleteTableData() {
      try {
        await this.$confirm('您确定要删除列表数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        const delList = this.multipleSelection.map(item => {
          return item.theTaskId
        })
        this.batchTable = this.batchTable.filter(item => {
          return delList.indexOf(item.theTaskId) === -1
        })
        // 删除后，清空选项
        this.multipleSelection = []
      } catch (e) {
        if (e === 'cancel') {
          this.$message({
            type: 'info',
            message: '取消删除操作'
          })
        }
      }
    },
    // 取消
    cancle() {
      this.showCompleteData = false
      const sameIds = this.multipleSelection.map(item => {
        return item.theTaskId
      })
      this.batchTable.forEach((item, index) => {
        if (sameIds.indexOf(item.theTaskId) > -1) {
          this.$nextTick(() => {
            this.$refs.table.toggleRowSelection(item, true)
          })
        }
      })
    },
    // 校验所选数据送办理是否已选择报送时间和事项类型
    checkDeliveryTime(key, data) {
      const list = data || this.multipleSelection
      return list.every(item => {
        return item[key].value
      })
    },
    // 所选数据是否完成校验
    checkTableData(list) {
      let isSuccess = []
      const isSuccessList = []
      const checkList = list || this.multipleSelection
      checkList.forEach(i => {
        isSuccess = []
        Object.keys(i).forEach(j => {
          if ((i[j] && j !== 'theTaskId' && j !== 'fileJson' && j !== 'meetingFile' && j !== 'theSameId')) {
            isSuccess.push(i[j].success)
          }
        })
        isSuccessList.push(isSuccess.every(item => {
          return item
        }))
      })
      return isSuccessList.every(item => { return item })
    },
    // 获取剩余没有被选择的数据
    getLaveData() {
      const sameIdArr = this.multipleSelection.map(item => { return item.theTaskId })
      return this.batchTable.filter(item => {
        return sameIdArr.indexOf(item.theTaskId) === -1
      })
    },
    bubbleSort(arr, key) {
      if (Array.isArray(arr)) {
        for (var i = arr.length - 1; i > 0; i--) {
          for (var j = 0; j < i; j++) {
            if (arr[j][key] > arr[j + 1][key]) {
              [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
            }
          }
        }
        return arr
      }
    },
    // 选择事项类型确认回显
    sureChangeType() {
      // this.sureChangeType('limitDate', newVal)
      // sureChangeType('itemType', formItemModel.formItemType)
      const key = this.dialogContent
      const value = this.dialogContent === 'itemType' ? this.formItemModel.formItemType : this.dialogContent === 'workRequire' ? this.formItemModel.formWorkRequire : this.limitDate
      const sameIdList = this.multipleSelection.map(item => {
        return item.theTaskId
      })
      this.batchTable = this.batchTable.map(item => {
        if (sameIdList.indexOf(item.theTaskId) > -1) {
          item[key] = {
            success: true,
            value: value
          }
        }
        return item
      })
      this.dialogVisible = false
    },
    // 送立项审核
    sendpproval() {
      // 独立任务的送立项的时候，只需要校验选中的那一条
      // const singleTasks = ['leaderInstruction', 'internetAdd']
      // const isSingleTask = singleTasks.includes(this.topicType) ? '' : this.batchTable
      const singleTasksData = ['leaderInstruction', 'internetAdd']
      const isSingleTaskData = this.otherTask === 'analysisTask' ? '' : singleTasksData.includes(this.topicType) ? '' : this.batchTable
      if (!this.checkDeliveryTime('supervisionCycle', isSingleTaskData)) {
        this.$message({ type: 'error', message: this.topicType !== 'internetAdd' ? '请选择报送时间' : '请选择核查反馈时间' })
        return
      } else if (this.topicType === 'leaderInstruction' && !this.checkDeliveryTime('itemType', isSingleTaskData)) {
        this.$message({ type: 'error', message: '请选择事项类型' })
        return
      } else if (!this.checkTableData(isSingleTaskData)) {
        this.$message({ type: 'error', message: '存在错误检验，请检查！' })
        return
      }
      if (this.topicTypeListMapItem && this.topicTypeListMapItem.hasSubtasks) {
        const h = this.$createElement
        this.$msgbox({
          title: '温馨提示',
          message: h('div', null, '该操作是对导入的所有数据进行送立项审核操作，您确认要送立项吗？'),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消' }).then(() => {
          this.$refs.peopleAuthEvent.eventClick()
        }).catch(() => {
        })
      } else {
        this.$refs.peopleAuthEvent.eventClick()
      }
    },
    // 选人选部门后回调的方法
    rejectData(list, type) {
      this.send('approval', type)
    },
    showDialog(type) {
      this.dialogContent = type
      this.dialogVisible = true
    },
    noRepeat(arr, arg1, arg2) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i][arg1][arg2] === arr[j][arg1][arg2]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      return arr
    }
  }
}
</script>
<style scoped lang="scss">
  .card-content{
    padding: 16px;
    border-radius: 4px;
  }
  .card-module{
    background: #ffffff;
  }
  .dialogContent{
    .el-date-editor.el-input{
      width: 100%;
    }
  }

  .task-content-wrap{
    width: 80%;
    margin: auto;
    ::v-deep .exportFiles, ::v-deep .file-item{
      margin-left: 120px;
    }
  }

  .task-content-btn{
    margin: -24px 0 20px 120px;
  }

</style>

2.甘特图
3.选部门控件的组件，表格组件和表单组件