<template>
  <div class="app-container">
    <div class="titleList">
      <div v-for="(item, index) in projectTypeList" :key="index" @click="getListType(item.projectType)"
        :class="{ active: queryParams.projectType == item.projectType }">
        {{ item.name }}
      </div>
    </div>
    <el-form :model="queryParams" v-if="queryParams.projectType == '0'" ref="queryForm" size="small" :inline="true"
      v-show="showSearch" label-width="150px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="关键词">
            <el-input placeholder="请输入关键词" v-model="queryParams.keyword" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位名称" prop="companyName">
            <el-input v-model="queryParams.companyName" placeholder="请输入单位名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类别" prop="projectClassId" label-width="100px">
            <el-select clearable v-model="queryParams.projectClassId" placeholder="请选择项目类别" style="width: 100%;">
              <el-option v-for="item in projectClassList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位类别">
            <el-select clearable v-model="queryParams.companyClassName" placeholder="请选择单位类别" style="width: 100%;">
              <el-option v-for="item in companyClassNameList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="项目周期起始" prop="projectCycleBegin" class="flex-box">
            <el-date-picker clearable v-model="queryParams.projectCycleBegin" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择项目周期起始">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目周期结束" prop="projectCycleEnd">
            <el-date-picker clearable v-model="queryParams.projectCycleEnd" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择项目周期结束">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人" prop="projectLeader">
            <el-input v-model="queryParams.projectLeader" placeholder="请输入项目负责人" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目对接人" prop="projectLiaison">
            <el-input v-model="queryParams.projectLiaison" placeholder="请输入项目对接人" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目对接人联系方式" prop="projectLiaisonPhone">
            <el-input v-model="queryParams.projectLiaisonPhone" placeholder="请输入项目对接人联系方式" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入账金额" prop="machinePrice">
            <el-input v-model="queryParams.machinePrice" placeholder="请输入入账金额" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入账时间" prop="machinePriceTime">
            <el-date-picker clearable v-model="queryParams.machinePriceTime" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择入账时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目状态" prop="projectStatus">
            <el-select v-model="queryParams.projectStatus" clearable placeholder="请选择项目状态">
              <el-option v-for="item in projectStatusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="queryParams.remarks" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间" prop="dateRange" class="flex-box">
            <el-date-picker clearable v-model="queryParams.dateRange" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form :model="queryParams" v-if="queryParams.projectType == '1'" ref="queryForm" size="small" :inline="true"
      v-show="showSearch" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="关键词">
            <el-input placeholder="请输入关键词" v-model="queryParams.keyword" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位名称" prop="companyName">
            <el-input v-model="queryParams.companyName" placeholder="请输入单位名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位类别">
            <el-select clearable v-model="queryParams.companyClassName" placeholder="请选择单位类别" style="width: 100%;">
              <el-option v-for="item in companyClassNameList" :key="item.classId" :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="部门/院系名称" prop="deptName">
            <el-input v-model="queryParams.deptName" placeholder="请输入部门/院系名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目状态">
            <el-select v-model="queryParams.projectStatus" clearable placeholder="请选择">
              <el-option v-for="item in projectStatusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户主账号" prop="userInfoName">
            <el-input v-model="queryParams.userInfoName" placeholder="请输入用户主账号" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主账号姓名" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入主账号姓名" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类别" prop="projectClassId">
            <el-input v-model="queryParams.projectClassId" placeholder="请输入项目类别" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上传时间" prop="uploadTime">
            <el-date-picker clearable v-model="queryParams.uploadTime" type="date" value-format="yyyy-MM-dd"
              placeholder="上传时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间" prop="dateRange" class="flex-box">
            <el-date-picker clearable v-model="queryParams.dateRange" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['cs:csProjectRecord:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['cs:csProjectRecord:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['cs:csProjectRecord:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['cs:csProjectRecord:export']">导出</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-download" size="mini" @click="handleExportTemplate"
          v-hasPermi="['cs:csProjectRecord:export']">导出模板</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="csProjectRecordList" @selection-change="handleSelectionChange"
      v-if="queryParams.projectType == '0'">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="sort">
        <template slot-scope="scope">
          {{ ((queryParams.pageNum - 1) * queryParams.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <!--  <el-table-column label="项目分类" align="center" prop="projectType">
        <template slot-scope="scope">
          <span>{{ scope.row.projectType == 0 ? '合作项目' : '支持项目' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="项目名称" align="center" prop="projectName" />
      <el-table-column label="项目编号" align="center" prop="projectNumber" />
      <el-table-column label="项目来源" align="center" prop="projectSource" />
      <el-table-column label="项目类别" align="center" prop="companyClassName" />
      <el-table-column label="应用领域" align="center" prop="applicationArea" />
      <el-table-column label="项目经费" align="center" prop="projectFunds" />
      <el-table-column label="承担单位" align="center" prop="bearCompany" />
      <el-table-column label="单位类别" align="center" prop="companyClassName" />
      <el-table-column label="主管部门" align="center" prop="manageDept" />
      <el-table-column label="项目负责人" align="center" prop="projectLeader" />
      <el-table-column label="项目周期" align="center" width="180">
        <template v-slot="scope">
          <span>{{getProjectCycle(scope.row.projectCycleBegin,scope.row.projectCycleEnd)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目对接人" align="center" prop="projectLiaison" />
      <el-table-column label="项目对接人联系方式" align="center" prop="projectLiaisonPhone" />
      <el-table-column label="项目资源" align="center" prop="projectResource" />
      <el-table-column label="使用账户" align="center" prop="useAccount" />
      <el-table-column label="项目状态" align="center" prop="projectStatus">
        <template slot-scope="scope">
          <span>{{ scope.row.projectStatus == '0' ? '进行中' : scope.row.projectStatus == '1' ? '已结项' :
            scope.row.projectStatus == '2' ? '延期' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机时费入账金额" align="center" prop="machinePrice" />
      <el-table-column label="机时费入账时间" align="center" prop="machinePriceTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.machinePriceTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="附件" align="center" prop="annexUrl">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="hanldeDown(row.annexUrl)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createAt" width="180">
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csProjectRecord:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['cs:csProjectRecord:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-loading="loading" :data="csProjectRecordList" @selection-change="handleSelectionChange"
      v-if="queryParams.projectType == '1'">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="sort">
        <template slot-scope="scope">
          {{ ((queryParams.pageNum - 1) * queryParams.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="用户主账号" align="center" prop="userInfoName" />
      <el-table-column label="主账号姓名" align="center" prop="userName" />
      <el-table-column label="手机号" align="center" prop="concatPhone" />
      <el-table-column label="单位名称" align="center" prop="companyName" />
      <el-table-column label="部门/院系" align="center" prop="deptName" />
      <el-table-column label="单位类别" align="center" prop="companyClassName" />
      <el-table-column label="项目名称" align="center" prop="projectName" />
      <el-table-column label="项目编号" align="center" prop="projectNumber" />
      <el-table-column label="项目来源" align="center" prop="projectSource" />
      <el-table-column label="项目类别" align="center" prop="companyClassName" />
      <el-table-column label="项目周期" align="center" width="180">
        <template v-slot="scope">
          <span>{{getProjectCycle(scope.row.projectCycleBegin,scope.row.projectCycleEnd)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业领域" align="center" prop="majorField" />

      <el-table-column label="附件" align="center" prop="annexUrl">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="hanldeDown(row.annexUrl)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createAt" width="180">
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['cs:csProjectRecord:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['cs:csProjectRecord:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改项目记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rulesInfo" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="projectNumber">
              <el-input @input="form.projectNumber=form.projectNumber.replace(/[^\w\.\/]/ig,'')"
                v-model="form.projectNumber" placeholder="请输入项目编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目来源" prop="projectSource">
              <el-input v-model="form.projectSource" placeholder="请输入项目来源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类别" prop="projectClassId">
              <el-select clearable v-model="form.projectClassId" placeholder="请选择项目类别" style="width: 100%;">
                <el-option v-for="item in projectClassList" :key="item.classId" :label="item.className"
                  :value="item.classId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位类别">
              <el-select @change="hanldeCompanyClassName" clearable v-model="form.companyClassId"
                placeholder="请选择单位类别" style="width: 100%;">
                <el-option v-for="item in companyClassNameList" :key="item.classId" :label="item.className"
                  :value="item.classId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目状态" prop="projectStatus">
              <el-select v-model="form.projectStatus" clearable placeholder="请选择项目状态">
                <el-option v-for="item in projectStatusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="flex-box">
            <el-form-item label="项目周期" prop="projectCycle">
              <el-date-picker v-model="form.projectCycle" type="daterange" range-separator="至" @input="dateChange"
                @change="handleChange" start-placeholder="项目开始日期" value-format="yyyy-MM-dd" end-placeholder="项目结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应用领域" prop="applicationArea">
              <el-input v-model="form.applicationArea" placeholder="请输入应用领域" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目经费" prop="projectFunds">
              <el-input v-model="form.projectFunds" placeholder="请输入项目经费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="承担单位" prop="bearCompany">
              <el-input v-model="form.bearCompany" placeholder="请输入承担单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主管部门" prop="manageDept">
              <el-input v-model="form.manageDept" placeholder="请输入主管部门" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="projectLeader">
              <el-input v-model="form.projectLeader" placeholder="请输入项目负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目对接人" prop="projectLiaison">
              <el-input v-model="form.projectLiaison" placeholder="请输入项目对接人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目对接人联系方式" prop="projectLiaisonPhone">
              <el-input v-model="form.projectLiaisonPhone" placeholder="请输入项目对接人联系方式" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目资源" prop="projectResource">
              <el-input v-model="form.projectResource" placeholder="请输入项目资源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用账户" prop="useAccount">
              <el-input v-model="form.useAccount" placeholder="请输入使用账户" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机时费入账金额(元)" prop="machinePrice">
              <el-input
                onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/)"
                v-model="form.machinePrice" placeholder="请输入机时费入账金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机时费入账时间" prop="machinePriceTime">
              <el-date-picker clearable v-model="form.machinePriceTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择机时费入账时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件" prop="annexUrl">
              <el-upload class="upload-demo" :action="$baseUrl + '/api/common/uploadFileLocal'" :limit="1"
                :on-success="handleSuccess" :file-list="fileList">
                <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">支持扩展名：pdf.doc.jpg.png…</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open1" width="70%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户主账号" prop="userInfoName">
              <el-input v-model="form.userInfoName" placeholder="请输入用户主账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主账号姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入主账号姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="companyName">
              <el-input v-model="form.companyName" placeholder="请输入单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门/院系" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门/院系" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位类别" prop="companyClassId">
              <el-select clearable v-model="form.companyClassId" placeholder="请选择单位类别" style="width: 100%;">
                <el-option v-for="item in companyClassNameList" :key="item.classId" :label="item.className"
                  :value="item.classId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="projectNumber">
              <el-input v-model="form.projectNumber" placeholder="请输入项目编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目来源" prop="projectSource">
              <el-input v-model="form.projectSource" placeholder="请输入项目来源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类别" prop="projectClassId">
              <el-select clearable v-model="form.projectClassId" placeholder="请选择项目类别" style="width: 100%;">
                <el-option v-for="item in projectClassList" :key="item.classId" :label="item.className"
                  :value="item.classId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业领域" prop="majorField">
              <el-input v-model="form.majorField" placeholder="请输入专业领域" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间" prop="uploadTime">
              <el-date-picker clearable v-model="form.uploadTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择上传时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目周期" prop="projectCycle">
              <el-date-picker v-model="form.projectCycle" type="daterange" range-separator="至" @input="dateChange"
                @change="handleChange" start-placeholder="项目开始日期" value-format="yyyy-MM-dd" end-placeholder="项目结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用领域" prop="applicationArea">
              <el-input v-model="form.applicationArea" placeholder="请输入应用领域" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件" prop="annexUrl">
              <el-upload class="upload-demo" :action="$baseUrl + '/api/common/uploadFileLocal'" :limit="1"
                :on-success="handleSuccess" :file-list="fileList">
                <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">支持扩展名：pdf.doc.jpg.png…</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listCsProjectRecord,
    getCsProjectRecord,
    delCsProjectRecord,
    addCsProjectRecord,
    updateCsProjectRecord
  } from "@/api/cs/csProjectRecord";
  import {
    getClassListByMark
  } from "@/api/cs/csResourceOrderApply";
  export default {
    name: "CsProjectRecord",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        projectCycle: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 项目记录表格数据
        csProjectRecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        open1: false,
        projectTypeList: [{
          name: '合作项目列表',
          projectType: '0'
        }, {
          name: '支持项目列表',
          projectType: '1'
        }, ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          dateRange: [],
          resId: null,
          resName: null,
          resType: null,
          projectType: '0',
          resourceClassId: null,
          resourceClass: null,
          memberUserId: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycleBegin: null,
          projectCycleEnd: null,
          applicationArea: null,
          projectFunds: null,
          bearCompany: null,
          manageDept: null,
          projectLeader: null,
          projectLiaison: null,
          projectLiaisonPhone: null,
          projectResource: null,
          useAccount: null,
          projectStatus: 0,
          machinePrice: null,
          machinePriceTime: null,
          annexUrl: null,
          remarks: null,
          userInfoId: null,
          userInfoName: null,
          userName: null,
          concatPhone: null,
          companyId: null,
          companyName: null,
          deptId: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          majorField: null,
          uploadTime: null,
          content: null,
        },
        // 表单参数
        form: {
          projectType: 0,
          projectRecordId: null,
          resId: null,
          resName: null,
          resType: null,
          resourceClassId: null,
          resourceClass: null,
          memberUserId: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycleBegin: null,
          projectCycleEnd: null,
          applicationArea: null,
          projectFunds: null,
          bearCompany: null,
          manageDept: null,
          projectLeader: null,
          projectLiaison: null,
          projectLiaisonPhone: null,
          projectResource: null,
          useAccount: null,
          projectStatus: 0,
          machinePrice: null,
          machinePriceTime: null,
          annexUrl: null,
          remarks: null,
          userInfoId: null,
          userInfoName: null,
          userName: null,
          concatPhone: null,
          companyId: null,
          companyName: null,
          deptId: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          majorField: null,
          uploadTime: null,
          content: null,
          sort: null,
          status: "0",
          createAt: null,
          updateAt: null,
          delFlag: null,
          projectCycle: ''
        },
        // 表单校验
        rules: {
          companyName: [
            { required: true, message: '请输入单位名称', trigger: 'blur' },
          ],

          companyClassId: [
            { required: true, message: '请选择单位类别', trigger: 'blur' },
          ],
          projectClassId: [
            { required: true, message: '请选择项目类别', trigger: 'blur' },
          ],
          projectCycle: [
            { required: true, message: '请选择项目周期', trigger: 'blur' },
          ],
        },
        rulesInfo: {
          projectName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          projectSource: [
            { required: true, message: '请输入项目来源', trigger: 'blur' },
          ],
          projectClassId: [
            { required: true, message: '请选择项目类别', trigger: 'blur' },
          ],
          projectStatus: [
            { required: true, message: '请选择项目状态', trigger: 'blur' },
          ],
          bearCompany: [
            { required: true, message: '请输入承担单位', trigger: 'blur' },
          ],
          projectLeader: [
            { required: true, message: '请输入项目负责人', trigger: 'blur' },
          ],
          projectLiaison: [
            { required: true, message: '请输入项目对接人', trigger: 'blur' },
          ]
        },
        projectStatusList: [{
            value: 0,
            label: '进行中'
          },
          {
            value: 1,
            label: '已结项'
          },
          {
            value: 2,
            label: '延期'
          }

        ],
        projectClassList: [],
        fileList: [],
        projectDate: [],
        companyClassNameList: [

        ]
      };
    },
    created() {
      this.getList();
      this.getProjectClassList()
      this.init()
    },
    methods: {
      // 下载
      hanldeDown(val) {
        const link = document.createElement('a');
        link.href = val // 文件的 URL
        link.download = '下载文件'; // 提供下载的文件名

        // 处理 iOS 设备
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      //选择
      hanldeCompanyClassName(val) {
        this.companyClassNameList.map(el=>{
          if(el.classId==val){
            this.form.companyClassName=el.className
          }
        })
      },
      init() {
        getClassListByMark({ classMark: 'company_class' }).then(res => {
          this.companyClassNameList = res.data
        })
      },
      getProjectClassList() {
        getClassListByMark({ classMark: 'projectClass' }).then(res => {
          this.projectClassList = res.data
        })
      },
      handleSuccess(response) {
        this.form.annexUrl = response.url
      },
      /* 项目时间 */
      handleChange(val) {
        if (val) {
          this.form.projectCycleBegin = val[0]
          this.form.projectCycleEnd = val[1]
        }
      },
      /* 日期强制刷新 */
      dateChange() {
        this.$forceUpdate();
      },
      /** 查询项目记录列表 */
      getList() {
        this.loading = true;
        if (null != this.queryParams.dateRange && '' != this.queryParams.dateRange) {
          this.queryParams["beginCreateAt"] = this.queryParams.dateRange[0];
          this.queryParams["endCreateAt"] = this.queryParams.dateRange[1];
        }
        listCsProjectRecord(this.queryParams).then(response => {
          this.csProjectRecordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        if (this.queryParams.projectType == '0') {
          this.open = false;
        } else {
          this.open1 = false;
        }
        this.reset();
      },
      getListType(status) {
        this.queryParams.companyClassName = ''
        this.queryParams.projectType = status
        this.form.projectType = status
        this.getList()
      },
      // 表单重置
      reset() {
        this.form = {
          projectRecordId: null,
          resId: null,
          resName: null,
          resType: null,
          projectType: this.queryParams.projectType == 0 ? 0 : 1,
          resourceClassId: null,
          resourceClass: null,
          memberUserId: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycleBegin: null,
          projectCycleEnd: null,
          applicationArea: null,
          projectFunds: null,
          bearCompany: null,
          manageDept: null,
          projectLeader: null,
          projectLiaison: null,
          projectLiaisonPhone: null,
          projectResource: null,
          useAccount: null,
          projectStatus: "0",
          machinePrice: null,
          machinePriceTime: null,
          annexUrl: null,
          remarks: null,
          userInfoId: null,
          userInfoName: null,
          userName: null,
          concatPhone: null,
          companyId: null,
          companyName: null,
          deptId: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          majorField: null,
          uploadTime: null,
          content: null,
          sort: null,
          status: "0",
          createAt: null,
          updateAt: null,
          delFlag: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          dateRange: [],
          resId: null,
          resName: null,
          resType: null,
          projectType: '0',
          resourceClassId: null,
          resourceClass: null,
          memberUserId: null,
          email: null,
          projectName: null,
          projectNumber: null,
          projectSource: null,
          projectClassId: null,
          projectClassName: null,
          projectCycleBegin: null,
          projectCycleEnd: null,
          applicationArea: null,
          projectFunds: null,
          bearCompany: null,
          manageDept: null,
          projectLeader: null,
          projectLiaison: null,
          projectLiaisonPhone: null,
          projectResource: null,
          useAccount: null,
          projectStatus: null,
          machinePrice: null,
          machinePriceTime: null,
          annexUrl: null,
          remarks: null,
          userInfoId: null,
          userInfoName: null,
          userName: null,
          concatPhone: null,
          companyId: null,
          companyName: null,
          deptId: null,
          deptName: null,
          companyClassId: null,
          companyClassName: null,
          majorField: null,
          uploadTime: null,
          content: null,
        }
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.projectRecordId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        if (this.queryParams.projectType == 0) {
          this.open = true;
        } else {
          this.open1 = true;
        }
        this.title = "添加项目记录";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const projectRecordId = row.projectRecordId || this.ids
        getCsProjectRecord(projectRecordId).then(response => {
          this.form = response.data;
          let projectCycleArr = [];
          projectCycleArr.push(response.data.projectCycleBegin);
          projectCycleArr.push(response.data.projectCycleEnd);
          this.form.projectCycle = projectCycleArr;
          if (this.queryParams.projectType == '0') {
            this.open = true;
          } else {
            this.open1 = true;
          }
          this.title = "修改项目记录";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.projectRecordId != null) {
              updateCsProjectRecord(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                if (this.queryParams.projectType == '0') {
                  this.open = false;
                } else {
                  this.open1 = false;
                }
                this.getList();
              });
            } else {
              addCsProjectRecord(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                if (this.queryParams.projectType == '0') {
                  this.open = false;
                } else {
                  this.open1 = false;
                }
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const projectRecordIds = row.projectRecordId || this.ids;
        this.$modal.confirm('是否确认删除？').then(function() {
          return delCsProjectRecord(projectRecordIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('cs/csProjectRecord/export', {
          ...this.queryParams
        }, `项目列表_${new Date().getTime()}.xlsx`)
      },
      handleExportTemplate() {
        this.download('cs/csProjectRecord/exportTemplate', {
          ...this.queryParams
        }, `项目列表模板_${new Date().getTime()}.xlsx`)
      },
      getProjectCycle(projectCycleBegin, projectCycleEnd) {
        if (projectCycleBegin != null && projectCycleEnd != null) {
          return projectCycleBegin + '至' + projectCycleEnd;
        } else {
          return "";
        }
      },
    }
  };
</script>
<style scoped>
  .titleList {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .titleList>div {
    cursor: pointer;
    padding: 10px;
  }

  .flex-box {
    display: flex;
  }

  .width-box {
    width: 300px;
  }

  .active {
    color: #1890ff;
    border-bottom: 4px solid #1890ff;
  }
</style>
