【无标题】

<template>
  <div class="djz-application-container">
    <div class="basic-info">
      <el-descriptions title="中小投服基本信息">
        <el-descriptions-item label="联系人"></el-descriptions-item>
        <el-descriptions-item label="Email">18100000000</el-descriptions-item>
        <el-descriptions-item label="联系手机">苏州市</el-descriptions-item>
        <el-descriptions-item label="联系电话">18100000000</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="basic-list">
      <div style="margin-bottom: 40px;">
        <span style="font-size: 15px; margin-right: 15px">股权大会召开日*: </span>
        <el-date-picker
          v-model=" queryMeetingHoldDate" type="daterange" class="date-input" value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <span style="font-size: 15px;; margin-left: 15px; margin-right: 15px">股权登记日: </span>
        <el-date-picker
          v-model=" queryMeetingRegisterDate" type="daterange" class="date-input" value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="getTableList" class="btn" style=" margin-left: 15px">查询</el-button>
      </div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="secCode" label="证券代码" width="120"></el-table-column>
        <el-table-column prop="secAbbr" label="证券简称" width="120"></el-table-column>
        <el-table-column prop="meetingName" label="股东大会名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="meetingBeginDate" label="大会召开日" show-overflow-tooltip></el-table-column>
        <el-table-column prop="regDate" label="股权登记日" show-overflow-tooltip></el-table-column>
        <el-table-column prop="solicitationStartDate" label="征集开始日">
          <template slot-scope="{ row }">
            <el-date-picker  v-model="row.solicitationStartDate" type="date" placeholder="选择日期时间"  class="el-input--small" style="width: 80%" ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="solicitationEndDate" label="征集结束日" >
          <template slot-scope="{ row }">
            <el-date-picker v-model="row.solicitationEndDate" type="date" placeholder="选择日期时间" class="el-input--small" style="width: 80%"> </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="solicitationUrl" label="会议征集URL" >
          <template slot-scope="{ row }">
            <el-input v-model="row.solicitationUrl" placeholder="请输入会议征集URL" class="el-input--small" style="width: 80%"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" >
          <template slot-scope="{ row }">
            <el-input v-model="row.remark" placeholder="请输入备注" class="el-input--small" style="width: 80%"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
        <el-button @click="submit()" style="background-color: #1051B5; color: #ffffff">提交</el-button>
      </div>
      <pagination
        :total="total"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="getPageList"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import {getInfo} from "@/api/user";
import {addSolicitationInfo, getDzjList} from "@/api/dzj";
import {formatDate} from "@/utils/DateUtil";
import {Message} from "xqh-element";
import {cashDividend} from "@/api/hgt";

export default {
  name: "application",
  components: {
    Pagination,
  },
  data() {
    return {
      solicitationStartDate: formatDate(new Date),
      solicitationEndDate:'',
      // queryMeetingRegisterDate: [formatDate(new Date), formatDate(new Date)],
      // queryMeetingHoldDate: [formatDate(new Date), formatDate(new Date)],
      queryMeetingRegisterDate: [new Date("2020-11-11 00:00:00"), new Date("2023-11-11 00:00:00")],
      queryMeetingHoldDate: [new Date("2020-11-11 00:00:00"), new Date("2023-11-11 00:00:00")],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      remark:'',
      solicitationUrl:''
    }

  },
  //TODO 分页查找 ，数据动态渲染
  created() {
    this.getTableList();
  },

  methods: {
    async getTableList() {
      if (!this.queryMeetingHoldDate) {
        Message.error('请选择股权大会召开日期')
        return false
      }
      if (!this.queryMeetingRegisterDate) {
        Message.error('请选择股权登记日期')
        return false
      }

      const page = {
        number: this.listQuery.pageNum,
        size: this.listQuery.pageSize
      }
      const params = {
        meetingStartDate: this.queryMeetingHoldDate[0],
        meetingEndDate: this.queryMeetingHoldDate[1],
        regStartDate: this.queryMeetingRegisterDate[0],
        regEndDate: this.queryMeetingRegisterDate[1],
        page: page
      }
      const {code, data, msg} = await getDzjList(params)
      if (code === '1002') {
        Message.error(data)
        return false
      }
      this.tableData = data.records
      this.total = data.total
    },
    async submit(){
      //没有勾选任何记录
      if(!this.multipleSelection){
        Message.error('请勾选记录')
        return false
      }

      //勾选的记录中存在信息没填写完整的情况，此时不要把原来填写内容刷新
      this.multipleSelection.forEach(item=>{
        if(!item.solicitationStartDate){
          Message.error('存在某条数据征集开始日期未填写')
          return false
        } else if (!item.solicitationEndDate){
          Message.error('存在某条数据征集结束日期未填写')
          return false
        } else if (!item.solicitationUrl){
          Message.error('存在某条数据征集公告URL未填写')
          return false
        }
      })

      const params = {
        data : this.multipleSelection
      }

      const {code, data, msg} = await addSolicitationInfo(JSON.stringify(params))
      if (code === '1002') {
        Message.error(data)
        return false
      }else{
        Message.info('提交成功')
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.getTableList()
    }
  }
}
</script>

<style>
@import "~@/styles/table.css";

.djz-application-container {
  line-height: 52px;
  font-size: 14px;
  margin: 30px 100px;
  /*padding: 0 120px 120px 0px;*/
}

.title-left {
  font-size: 18px;
}
</style>

控制多选
type="selection" 

绑定单条变量
<template slot-scope="{ row }"> 
	<el-date-picker  v-model="row.solicitationStartDate" type="date" placeholder="选择日期时间"  class="el-input&#45;&#45;small" style="width: 80%" ></el-date-picker> 
 </template> 

后端controller

 @PostMapping(value = "/add-solicitation-info")
    @PreAuthorize("hasAuthority(T(com.sse.product.common.AuthorityConstants).AUTHORITY_DZJ_VOTE)")
    public ResponseVo<?> addSolicitationInfo(@RequestBody List<VoteBasicVo> list ){
        boolean flag = solInfoService.addSolicitationInfo(list);
        if(flag){
            return ResponseVo.assemble( ResultCode.SUCCESS,"提交成功");
        }else{
            return ResponseVo.assemble( ResultCode.SYSTEM_ERROR,"提交成功");
        }
    }