Browse Source

储备项目和科研论文接口联调

雷佳斌 1 day ago
parent
commit
d0ad7bebce

+ 32 - 0
src/api/achievementManage/paperManage.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function listData(query) {
+  return request({
+    url: '/research/paper/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addData(data) {
+  return request({
+    url: '/research/paper',
+    method: 'post',
+    data
+  })
+}
+
+export function updateData(data) {
+  return request({
+    url: '/research/paper',
+    method: 'put',
+    data
+  })
+}
+
+export function delData(ids) {
+  return request({
+    url: '/research/paper/' + ids,
+    method: 'delete',
+  })
+}

+ 33 - 0
src/api/reserveProjectManage/reserveProjectApply.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 查询储备项目列表
+export function listData(query) {
+  return request({
+    url: '/system/reserveProject/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addData(data) {
+  return request({
+    url: '/system/reserveProject',
+    method: 'post',
+    data
+  })
+}
+
+export function updateData(data) {
+  return request({
+    url: '/system/reserveProject',
+    method: 'put',
+    data
+  })
+}
+
+export function delData(ids) {
+  return request({
+    url: '/system/reserveProject/' + ids,
+    method: 'delete',
+  })
+}

+ 289 - 87
src/views/achievementManage/paperManage.vue

@@ -10,90 +10,87 @@
     >
       <el-row>
         <el-col :span="6">
-          <el-form-item label="业务申请号" prop="key1">
+          <el-form-item label="业务申请号" prop="businessApplicantNo">
             <el-input
-              v-model="queryParams.key1"
+              v-model="queryParams.businessApplicantNo"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="论文名称" prop="key2">
+          <el-form-item label="论文名称" prop="name">
             <el-input
-              v-model="queryParams.key2"
+              v-model="queryParams.name"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="申请人" prop="key3">
+          <el-form-item label="申请人" prop="applicantName">
             <el-input
-              v-model="queryParams.key3"
+              v-model="queryParams.applicantName"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="审核状态" prop="key4">
-            <el-select v-model="queryParams.key4" placeholder="请选择">
-              <el-option label="全部" value=""></el-option>
-              <el-option label="待审核" value="01"></el-option>
-              <el-option label="已审核" value="02"></el-option>
+          <el-form-item label="审核状态" prop="status">
+            <el-select v-model="queryParams.status">
+              <el-option v-for="(name, key) in APPROVE_STATUS_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="作者姓名" prop="key5">
+          <el-form-item label="作者姓名" prop="authorName">
             <el-input
-              v-model="queryParams.key5"
+              v-model="queryParams.authorName"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="期刊类型" prop="key6">
+          <el-form-item label="期刊类型" prop="journalType">
             <el-input
-              v-model="queryParams.key6"
+              v-model="queryParams.journalType"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="期刊级别" prop="key7">
+          <el-form-item label="期刊级别" prop="journalLvl">
             <el-input
-              v-model="queryParams.key7"
+              v-model="queryParams.journalLvl"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
         </el-col>
+        <!-- TODO,发表日期未确定 -->
         <el-col :span="6">
-          <el-form-item label="发表日期" prop="key8">
+          <el-form-item label="发表日期" prop="publicationDate">
             <el-date-picker
-              v-model="queryParams.key8"
+              v-model="queryParams.publicationDate"
+              placeholder="请选择"
+              value-format="yyyy-MM-dd"
             >
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="申请日期" prop="key9">
+          <el-form-item label="申请日期" prop="applicantTime">
             <el-date-picker
-              v-model="queryParams.key9"
+              v-model="queryParams.applicantTime"
+              placeholder="请选择"
+              value-format="yyyy-MM-dd"
             >
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">
               搜索
             </el-button>
-            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
           </el-form-item>
         </el-col>
       </el-row>
@@ -105,12 +102,7 @@
           新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="btnClick">
-          删除
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table :data="listData" border>
@@ -119,12 +111,32 @@
           <span>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="业务申请号" align="center" prop="key1" />
-      <el-table-column label="论文名称" align="center" prop="key2" />
-      <el-table-column label="作者姓名(按贡献排序)" align="center" prop="key3" />
-      <el-table-column label="通讯作者" align="center" prop="key4" />
-      <el-table-column label="期型名称" align="center" prop="key5" />
-      <el-table-column label="刊号" align="center" prop="key6" />
+      <el-table-column label="业务申请号" align="center" prop="businessApplicantNo" />
+      <el-table-column label="论文名称" align="center" prop="name" />
+      <el-table-column label="作者姓名(按贡献排序)" align="center" prop="authorName" />
+      <el-table-column label="通讯作者" align="center" prop="communicationAuthor" />
+      <el-table-column label="期型名称" align="center" prop="journalName" />
+      <el-table-column label="刊号" align="center" prop="journalNo" />
+      <el-table-column label="操作" align="center" prop="operate">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleEditClick(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelClick(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -135,33 +147,153 @@
       @pagination="getList"
     />
 
-    <el-dialog :title="dialogTitle" :visible.sync="visible" width="800px" append-to-body>
-      <el-form ref="form" :model="form" label-width="120px">
-        <el-form-item label="业务申请号" prop="key1">
-          <el-input v-model="form.key1" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="论文名称" prop="key2">
-          <el-input v-model="form.key2" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="作者姓名" prop="key3">
-          <el-input v-model="form.key3" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="期刊类型" prop="key4">
-          <el-select v-model="queryParams.key4" placeholder="请选择">
-            <el-option label="类型1" value="01"></el-option>
-            <el-option label="类型2" value="02"></el-option>
-            <el-option label="类型3" value="03"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="通讯作者" prop="key5">
-          <el-input v-model="formData.key5" />
-        </el-form-item>
-        <el-form-item label="期刊名称" prop="key6">
-          <el-input v-model="formData.key6" />
-        </el-form-item>
-        <el-form-item label="刊号" prop="key7">
-          <el-input v-model="formData.key7" />
-        </el-form-item>
+    <el-dialog :title="dialogTitle" :visible.sync="visible" width="1200px" append-to-body>
+      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="论文名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="作者姓名" prop="authorName">
+              <el-input v-model="form.authorName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="通讯作者" prop="communicationAuthor">
+              <el-input v-model="form.communicationAuthor" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="第一作者单位" prop="firstAuthorDept">
+              <el-input v-model="form.firstAuthorDept" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="期刊名称" prop="journalName">
+              <el-input v-model="form.journalName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="期刊号" prop="journalNo">
+              <el-input v-model="form.journalNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="期刊类型" prop="journalType">
+              <el-input v-model="form.journalType" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="期刊级别" prop="journalLvl">
+              <el-input v-model="form.journalLvl" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申请人姓名" prop="applicantName">
+              <el-input v-model="form.applicantName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="申请人邮箱" prop="applicantEmail">
+              <el-input v-model="form.applicantEmail" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申请人电话" prop="applicantPhone">
+              <el-input v-model="form.applicantPhone" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申请日期" prop="applicantTime">
+              <el-date-picker
+                v-model="form.applicantTime"
+                placeholder="请选择"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="论文申请单位" prop="paperApplicantDept">
+              <el-input v-model="form.paperApplicantDept" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联项目号" prop="associationProjectNo">
+              <el-input v-model="form.associationProjectNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            
+            <el-form-item label="关联项目名称" prop="associationProjectName">
+              <el-input v-model="form.associationProjectName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="业务申请号" prop="businessApplicantNo">
+              <el-input v-model="form.businessApplicantNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="创建人工号" prop="createNo">
+              <el-input v-model="form.createNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="创建人" prop="createName">
+              <el-input v-model="form.createName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="创建日期" prop="createDate">
+              <el-date-picker
+                v-model="form.createDate"
+                placeholder="请选择"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="发表日期" prop="publicationDate">
+              <el-date-picker
+                v-model="form.publicationDate"
+                placeholder="请选择"
+                value-format="yyyy-MM-DD"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="简要内容描述" prop="content">
+              <el-input type="textarea" v-model="form.content" placeholder="请输入" :rows="5" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -172,10 +304,19 @@
 </template>
 
 <script>
+import * as paperManageService from "@/api/achievementManage/paperManage";
+
+const APPROVE_STATUS_DICT = {
+  0: "草稿",
+  1: "待审核",
+  2: "已审核"
+};
+
 export default {
-  name: "ReserveProjectApply",
+  name: "PaperManage",
   data() {
     return {
+      loading: true,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -189,37 +330,98 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      listData: [
-        {
-          key1: "552220",
-          key2: "发明专利",
-          key3: "一类专于钢质材料研发",
-          key4: "admin",
-          key5: "2024-10-1",
-          key6: "2025-10-1",
-          key7: "科德集团",
-        },
-      ],
+      listData: [],
       visible: false,
       formData: {},
-      dialogTitle: "新增"
+      dialogTitle: "新增",
+      APPROVE_STATUS_DICT,
+      rules: {
+        name: { required: true, message: "请输入论文名称" },
+        authorName: { required: true, message: "请输入作者姓名" },
+        applicantEmail: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ],
+        applicantPhone: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
+        ],
+      },
     };
   },
+  mounted() {
+    this.getList();
+  },
   methods: {
-    handleQuery() {},
-    getList() {},
-    btnClick() {
-      this.$message.warning("功能建设中...");
+    getList() {
+      const params = { ...this.queryParams };
+      this.loading = true;
+      paperManageService.listData(params).then(res => {
+        this.loading = false;
+        if (res.code == 200) {
+          this.listData = res.rows;
+          this.total = res.total;
+        }
+      }).catch(err => {
+        this.loading = false;
+      });
+    },
+    onSearch() {
+      this.getList();
+    },
+    onReset() {
+      this.queryParams = {};
+      this.getList();
+    },
+    saveOrUpdateData() {
+      let func = this.form.id ? paperManageService.updateData: paperManageService.addData;
+      let operateMsg = this.form.id ? "修改" : "新增";
+      const params = { ...this.form };
+      func(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(operateMsg + "成功!");
+          this.cancel();
+          this.getList();
+        }
+      });
     },
     handleAddClick() {
       this.visible = true;
     },
+    handleEditClick(rowData) {
+      this.visible = true;
+      this.form = { ...rowData, dateRange: [] };
+    },
     submitForm() {
-      this.$message.warning("功能建设中...");
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveOrUpdateData();
+        }
+      })
     },
     cancel() {
       this.visible = false;
-    }
+      this.form = {};
+      this.resetForm("form");
+    },
+    handleDelClick(rowData) {
+      this.$modal
+        .confirm('是否确认删除论文名称为"' + rowData.name + '"的数据项?')
+        .then(function () {
+          return paperManageService.delData(rowData.id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>

+ 385 - 175
src/views/reserveProjectManage/reserveProjectApply.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" v-loading="loading">
     <el-form
       :model="queryParams"
       ref="queryForm"
@@ -8,146 +8,96 @@
       v-show="showSearch"
       label-width="110px"
     >
-      <el-row>
-        <el-col :span="6">
-          <el-form-item label="项目名称" prop="key1">
-            <el-input
-              v-model="queryParams.key1"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目责任单位" prop="key2">
-            <el-input
-              v-model="queryParams.key2"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目阶段" prop="key3">
-            <el-input
-              v-model="queryParams.key3"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="技术领域" prop="key4">
-            <el-input
-              v-model="queryParams.key4"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="开展形式" prop="key5">
-            <el-select v-model="queryParams.key5" placeholder="请选择">
-              <el-option label="全部" value=""></el-option>
-              <el-option label="自研" value="01"></el-option>
-              <el-option label="合作" value="02"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目类型" prop="key6">
-            <el-select v-model="queryParams.key6" placeholder="请选择">
-              <el-option label="全部" value=""></el-option>
-              <el-option label="研发项目" value="01"></el-option>
-              <el-option label="立项项目" value="02"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目来源" prop="key7">
-            <el-select v-model="queryParams.key7" placeholder="请选择">
-              <el-option label="全部" value=""></el-option>
-              <el-option label="男" value="01"></el-option>
-              <el-option label="女" value="02"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目起止时间" prop="key8">
-            <el-date-picker
-              v-model="queryParams.key8"
-              type="date"
-              placeholder="选择日期"
-            >
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="项目完成时间" prop="key9">
-            <el-date-picker
-              v-model="queryParams.key9"
-              type="date"
-              placeholder="选择日期"
-            >
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="计划年份" prop="key10">
-            <el-date-picker
-              v-model="queryParams.key10"
-              type="year"
-              placeholder="选择年份"
-            >
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="审核状态" prop="key11">
-            <el-select v-model="queryParams.key5" placeholder="请选择" style="width: 100%;">
-              <el-option label="全部" value=""></el-option>
-              <el-option label="待审核" value="01"></el-option>
-              <el-option label="已审核" value="02"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini">
-              搜索
-            </el-button>
-            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item label="项目名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          clearable
+          style="width: 240px"
+        />
+      </el-form-item>
+    <!-- TODO:后端未定义字段 -->
+      <!-- <el-form-item label="项目责任单位" prop="key2">
+        <el-input
+          v-model="queryParams.key2"
+          clearable
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="项目阶段" prop="stage">
+        <el-select v-model="queryParams.stage">
+          <el-option v-for="(name, key) in PROJECT_STAGE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item> -->
+      <el-form-item label="技术领域" prop="field">
+        <el-select v-model="queryParams.field">
+          <el-option v-for="(name, key) in FIELD_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开展形式" prop="expandFrom">
+        <el-select v-model="queryParams.expandFrom">
+          <el-option v-for="(name, key) in EXPAND_FORM_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目类型" prop="type">
+        <el-select v-model="queryParams.type">
+          <el-option v-for="(name, key) in PROJECT_TYPE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目来源" prop="source">
+        <el-select v-model="queryParams.source">
+          <el-option v-for="(name, key) in PROJECT_SOURCE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目起止时间" prop="dateRange">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-DD"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="计划年份" prop="year">
+        <el-date-picker
+          v-model="queryParams.year"
+          type="year"
+          placeholder="选择年份"
+          value-format="yyyy"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="审核状态" prop="status">
+        <el-select v-model="queryParams.status">
+          <el-option v-for="(name, key) in APPROVE_STATUS_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">
+          搜索
+        </el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
+      </el-form-item>
     </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="handleAddClick">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddClick">
           新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="btnClick">
-          删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="btnClick">
+        <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="handleUploadClick">
           导入
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-download" size="mini" @click="btnClick">
+        <el-button plain icon="el-icon-download" size="mini" @click="handleExport">
           导出
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table :data="listData" border>
@@ -156,14 +106,54 @@
           <span>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="项目名称" align="center" prop="key1" />
-      <el-table-column label="计划年份" align="center" prop="key2" />
-      <el-table-column label="技术领域" align="center" prop="key3" />
-      <el-table-column label="开展形式" align="center" prop="key4" />
-      <el-table-column label="项目类型" align="center" prop="key5" />
-      <el-table-column label="项目来源" align="center" prop="key6" />
-      <el-table-column label="项目阶段" align="center" prop="key7" />
-      <el-table-column label="项目预计金额(万元)" align="center" prop="key8" />
+      <el-table-column label="项目名称" align="center" prop="name" />
+      <el-table-column label="计划年份" align="center" prop="year" />
+      <el-table-column label="技术领域" align="center" prop="field">
+        <template slot-scope="{ row }">
+          <span>{{ FIELD_DICT[row.field] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="开展形式" align="center" prop="expandFrom">
+        <template slot-scope="{ row }">
+          <span>{{ EXPAND_FORM_DICT[row.expandFrom] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目类型" align="center" prop="type">
+        <template slot-scope="{ row }">
+          <span>{{ PROJECT_TYPE_DICT[row.type] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目来源" align="center" prop="source">
+        <template slot-scope="{ row }">
+          <span>{{ PROJECT_SOURCE_DICT[row.source] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目阶段" align="center" prop="stage">
+        <template slot-scope="{ row }">
+          <span>{{ PROJECT_STAGE_DICT[row.stage] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目预计金额(万元)" align="center" prop="amount" />
+      <el-table-column label="操作" align="center" prop="operate">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleEditClick(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelClick(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -175,41 +165,56 @@
     />
 
     <el-dialog :title="dialogTitle" :visible.sync="visible" width="800px" append-to-body>
-      <el-form ref="form" :model="form" label-width="120px">
-        <el-form-item label="项目名称" prop="key1">
-          <el-input v-model="form.key1" placeholder="请输入" />
+      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+        <el-form-item label="项目名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="开展形式" prop="expandFrom">
+          <el-select v-model="form.expandFrom">
+            <el-option v-for="(name, key) in EXPAND_FORM_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目类型" prop="type">
+          <el-select v-model="form.type">
+            <el-option v-for="(name, key) in PROJECT_TYPE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+          </el-select>
+        </el-form-item> 
+        <el-form-item label="项目类型" prop="source">
+          <el-select v-model="form.source">
+            <el-option v-for="(name, key) in PROJECT_SOURCE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="计划年份" prop="key2">
+        <el-form-item label="项目计划起止时间" prop="dateRange">
           <el-date-picker
-            v-model="queryParams.key2"
+              v-model="form.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="截止时间"
+              value-format="yyyy-MM-DD">
+            </el-date-picker>
+        </el-form-item> 
+        <el-form-item label="计划年份" prop="year">
+          <el-date-picker
+            v-model="form.year"
             type="year"
             placeholder="选择年份"
+            value-format="yyyy"
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="技术领域" prop="key3">
-          <el-input v-model="form.key3" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="开展形式" prop="key4">
-          <el-select v-model="formData.key4" placeholder="请选择">
-            <el-option label="自研" value="01"></el-option>
-            <el-option label="合作" value="02"></el-option>
+        <el-form-item label="技术领域" prop="field">
+          <el-select v-model="form.field">
+            <el-option v-for="(name, key) in FIELD_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="项目类型" prop="key5">
-          <el-select v-model="formData.key5" placeholder="请选择">
-            <el-option label="研发项目" value="01"></el-option>
-            <el-option label="立项项目" value="02"></el-option>
+        <el-form-item label="项目阶段" prop="stage">
+          <el-select v-model="form.stage">
+            <el-option v-for="(name, key) in PROJECT_STAGE_DICT" :key="key" :label="name" :value="Number(key)"></el-option>
           </el-select>
-        </el-form-item> 
-        <el-form-item label="项目来源" prop="key6">
-          <el-select v-model="formData.key6" placeholder="请选择">
-            <el-option label="男" value="01"></el-option>
-            <el-option label="女" value="02"></el-option>
-          </el-select>
-        </el-form-item> 
-        <el-form-item label="项目预计金额" prop="key7">
-          <el-input-number v-model="formData.key7" />
+        </el-form-item>
+        <el-form-item label="项目预计金额(万元)" prop="amount">
+          <el-input-number v-model="form.amount" :min="0" />
         </el-form-item> 
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -217,10 +222,94 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 数据导入对话框 -->
+    <el-dialog
+      :title="uploads.title"
+      :visible.sync="uploads.open"
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="uploads"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="uploads.headers"
+        :action="uploads.url + '?updateSupport=' + uploads.updateSupport"
+        :disabled="uploads.isUploading"
+        :on-progress="handleFileUploadProgresss"
+        :on-success="handleFileSuccesss"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <span>仅允许导入xls、xlsx格式文件。</span>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForms">确 定</el-button>
+        <el-button @click="uploads.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import { getToken } from "@/utils/auth";
+import * as reserveProjectApplyService from "@/api/reserveProjectManage/reserveProjectApply";
+// 技术领域字典
+const FIELD_DICT = {
+  0: "其他",
+  1: "食品饮料",
+  2: "建筑建材",
+  3: "家居用品",
+  4: "轻工纺织",
+  5: "化学化工",
+  6: "新能源",
+  7: "机械",
+  8: "环保和资源",
+  9 : "安全防护",
+  10: "交通运输",
+  11: "橡胶塑料",
+  12: "仪器仪表"
+};
+
+// 开展形式字典
+const EXPAND_FORM_DICT = {
+  1: "自研",
+  2: "合作"
+};
+
+// 项目类型字典
+const PROJECT_TYPE_DICT = {
+  1: "研发项目",
+  2: "立项项目"
+};
+
+// 项目来源字典
+const PROJECT_SOURCE_DICT = {
+  1: "内部",
+  2: "外部"
+};
+
+// 项目阶段字典
+const PROJECT_STAGE_DICT = {
+  0: "概念验证阶段",
+  1: "技术验证阶段",
+  2: "试点应用阶段",
+  3: "商业化推广阶段",
+  4: "生态扩展阶段"
+};
+
+const APPROVE_STATUS_DICT = {
+  0: "草稿",
+  1: "待审核",
+  2: "已审核",
+};
+
 export default {
   name: "ReserveProjectApply",
   data() {
@@ -238,38 +327,159 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      listData: [
-        {
-          key1: "钢铁升降式改装",
-          key2: "2025年",
-          key3: "钢质",
-          key4: "自研",
-          key5: "自研",
-          key6: "市场部",
-          key7: "立项中",
-          key8: "152",
-        },
-      ],
+      listData: [],
       visible: false,
       formData: {},
-      dialogTitle: "新增"
+      dialogTitle: "新增",
+      // 技术领域枚举
+      FIELD_DICT,
+      // 开展形式枚举
+      EXPAND_FORM_DICT,
+      PROJECT_TYPE_DICT,
+      PROJECT_SOURCE_DICT,
+      PROJECT_STAGE_DICT,
+      APPROVE_STATUS_DICT,
+      rules: {
+        name: { required: true, message: "请输入项目名称" }
+      },
+
+      // 数据导入参数
+      uploads: {
+        // 是否显示弹出层
+        open: false,
+        // 弹出层标题
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/reserveProject/importData",
+      },
     };
   },
+  mounted() {
+    this.getList();
+  },
   methods: {
     handleQuery() {},
-    getList() {},
+    getList() {
+      const params = { ...this.queryParams };
+      if (params.dateRange && params.dateRange.length) {
+        params.startTime = params.dateRange[0];
+        params.endTime = params.dateRange[1];
+      }
+      delete params.dateRange;
+      this.loading = true;
+      reserveProjectApplyService.listData(params).then(res => {
+        this.loading = false;
+        if (res.code == 200) {
+          this.listData = res.rows;
+          this.total = res.total;
+        }
+      }).catch(err => {
+        this.loading = false;
+      });
+    },
+    onSearch() {
+      this.getList();
+    },
+    onReset() {
+      this.queryParams = {};
+      this.getList();
+    },
     btnClick() {
       this.$message.warning("功能建设中...");
     },
+    saveOrUpdateData() {
+      let func = this.form.id ? reserveProjectApplyService.updateData: reserveProjectApplyService.addData;
+      let operateMsg = this.form.id ? "修改" : "新增";
+      const params = { ...this.form };
+      if (params.dateRange && params.dateRange.length) {
+        params.startTime = params.dateRange[0];
+        params.endTime = params.dateRange[1];
+      }
+      delete params.dateRange;
+      func(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(operateMsg + "成功!");
+          this.cancel();
+          this.getList();
+        }
+      });
+    },
     handleAddClick() {
       this.visible = true;
     },
+    handleEditClick(rowData) {
+      this.visible = true;
+      this.form = { ...rowData, dateRange: [] };
+      if (this.form.startTime && this.form.endTime) {
+        this.form.dateRange = [this.form.startTime, this.form.endTime];
+      }
+    },
     submitForm() {
-      this.$message.warning("功能建设中...");
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveOrUpdateData();
+        }
+      })
     },
     cancel() {
       this.visible = false;
-    }
+      this.form = {};
+      this.resetForm("form");
+    },
+    handleDelClick(rowData) {
+      this.$modal
+        .confirm('是否确认删除项目名称为"' + rowData.name + '"的数据项?')
+        .then(function () {
+          return reserveProjectApplyService.delData(rowData.id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    handleUploadClick() {
+      this.uploads.open = true;
+      this.uploads.title = "数据导入";
+    },
+    handleExport() {
+      const params = { ...this.form };
+      if (params.dateRange && params.dateRange.length) {
+        params.startTime = params.dateRange[0];
+        params.endTime = params.dateRange[1];
+      }
+      this.download( "system/reserveProject/export", { ...params }, `储备项目列表_${new Date().getTime()}.xlsx`);
+    },
+    handleFileUploadProgresss(event, file, fileList) {
+      this.uploads.isUploading = true;
+    },
+    handleFileSuccesss(response, file, fileList) {
+      if (response.code == 500) {
+        this.uploads.isUploading = false;
+        this.$refs.uploads.clearFiles();
+        this.$modal.msgError(response.msg);
+        return;
+      }
+      this.uploads.open = false;
+      this.uploads.isUploading = false;
+      this.$refs.uploads.clearFiles();
+      // this.handleImports();
+    },
+    submitFileForms() {
+      this.$refs.uploads.submit();
+    },
   },
 };
 </script>
+
+<!-- <style lang="scss">
+.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
+  width: 220px;
+}
+</style> -->