Browse Source

提交立项页面代码

ljb 11 months ago
parent
commit
21be5d0533

+ 8 - 2
src/views/project-manage/apply.vue

@@ -1,9 +1,15 @@
 <template>
 <template>
-  <div>项目立项</div>
+  <basic-container>
+    <applyForm></applyForm>
+  </basic-container>
 </template>
 </template>
 
 
 <script>
 <script>
+import applyForm from './components/apply-form.vue';
+
 export default {
 export default {
-  
+  components: {
+    applyForm
+  }
 }
 }
 </script>
 </script>

+ 254 - 0
src/views/project-manage/components/apply-form.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="apply-form">
+    <h3 class="page-title">科德集团</h3>
+
+    <h3 class="page-title">研发项目立项资料</h3>
+    <div class="project-basic-info">
+      <div class="info-row">研发项目名称:1234234</div>
+      <div class="info-row">项目负责人:test</div>
+      <div class="info-row">项目申请单位:test</div>
+      <div class="info-row">项目执行期:</div>
+    </div>
+
+    <h3 class="page-title">研发立项申请表</h3>
+    <table>
+      <tbody>
+        <tr>
+          <td class="doc-label">研发项目名称</td>
+          <td class="doc-input">
+            <el-input v-model="formData.xmmc" placeholder="请输入项目名称" />
+          </td>
+          <td class="doc-label">项目申请单位</td>
+          <td class="doc-input">
+            <el-input
+              v-model="formData.xmsqdw"
+              placeholder="请选择项目申请单位"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td class="doc-label">项目负责人</td>
+          <td class="doc-input">
+            <el-input v-model="formData.xmfzr" placeholder="请输入项目负责人" />
+          </td>
+          <td class="doc-label">研究类型</td>
+          <td class="doc-input">
+            <avue-select
+              v-model="formData.yjlx"
+              placeholder="请选择"
+              :dic="studyTypeList"
+              style="width: 100%"
+            ></avue-select>
+          </td>
+        </tr>
+        <tr>
+          <td class="doc-label">研发开始时间</td>
+          <td class="doc-input">
+            <el-date-picker
+              v-model="formData.xmkssj"
+              format="yyyy年MM月dd日"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择日期"
+              style="width: 100%"
+            ></el-date-picker>
+          </td>
+          <td class="doc-label">研发结束时间</td>
+          <td class="doc-input">
+            <el-date-picker
+              v-model="formData.xmjssj"
+              format="yyyy年MM月dd日"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择日期"
+              style="width: 100%"
+            ></el-date-picker>
+          </td>
+        </tr>
+        <tr>
+          <td class="doc-label">项目来源</td>
+          <td class="doc-input">
+            <avue-select
+              v-model="formData.xmly"
+              placeholder="请选择"
+              :dic="projectSourceList"
+              style="width: 100%"
+            ></avue-select>
+          </td>
+          <td class="doc-label">项目开展形式</td>
+          <td class="doc-input">
+            <avue-select
+              v-model="formData.xmkzxs"
+              placeholder="请选择"
+              :dic="implementFormatList"
+              style="width: 100%"
+            ></avue-select>
+          </td>
+        </tr>
+        <tr>
+          <td class="doc-label">预期成果形式</td>
+          <td class="doc-input">
+            <avue-select
+              multiple
+              v-model="formData.yqcgxs"
+              placeholder="请选择"
+              :dic="expectedOutComeFormList"
+              style="width: 100%"
+            ></avue-select>
+          </td>
+          <td class="doc-label">项目技术经济目标</td>
+          <td class="doc-input">
+            <avue-select
+              multiple
+              v-model="formData.xmjsjjmb"
+              placeholder="请选择"
+              :dic="economicObjectivesList"
+              style="width: 100%"
+            ></avue-select>
+          </td>
+        </tr>
+        <tr>
+          <td class="doc-label">项目预算总额(万元)</td>
+          <td class="doc-input">
+            {{ "13,400" }}
+          </td>
+          <td class="doc-label">其中</td>
+          <td class="doc-input">
+            <!-- <avue-select multiple v-model="formData.yjlx" placeholder="请选择" :dic="dic"></avue-select> -->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <avue-form v-model="formData" :option="option" style="margin-top: 30px;"></avue-form>
+  </div>
+</template>
+
+<script>
+import { getDictionary } from "@/api/system/dictbiz";
+
+export default {
+  data() {
+    return {
+      formData: {},
+      dic: [
+        {
+          label: "选项1",
+          value: 0,
+        },
+        {
+          label: "选项2",
+          value: 1,
+        },
+      ],
+      // 研究类型数据字典
+      studyTypeList: [],
+      // 项目来源列表
+      projectSourceList: [],
+      // 开展形式
+      implementFormatList: [],
+      // 预期成果形式
+      expectedOutComeFormList: [],
+      // 经济目标
+      economicObjectivesList: [],
+
+      option: {
+        emptyBtn: false,
+        submitText: '保存',
+        column: [
+          {
+            label: "立项批文",
+            prop: "imgUrl",
+            type: "upload",
+            multiple: true,
+            span: 24,
+            propsHttp: {
+              url: "url",
+              name: "name",
+              res: "data",
+            },
+            action: '',
+            rules: [{
+              required: true,
+              message: "请上传立项批文"
+            }]
+          },
+          {
+            label: "立项报告",
+            prop: "imgUrl",
+            type: "upload",
+            multiple: true,
+            span: 24,
+            propsHttp: {
+              url: "url",
+              name: "name",
+              res: "data",
+            },
+            action: '',
+            rules: [{
+              required: true,
+              message: "请上传立项报告"
+            }]
+          },
+          {
+            label: "其他资料",
+            prop: "imgUrl",
+            type: "upload",
+            multiple: true,
+            span: 24,
+            propsHttp: {
+              url: "url",
+              name: "name",
+              res: "data",
+            },
+            action: '',
+            tip: '注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。',
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.getDictList("study_type", "studyTypeList");
+    this.getDictList("project_source", "projectSourceList");
+    this.getDictList("implementation_format", "implementFormatList");
+    this.getDictList("expected_outcome_form", "expectedOutComeFormList");
+    this.getDictList("economic_objectives", "economicObjectivesList");
+  },
+  methods: {
+    getDictList(code, toListKey) {
+      getDictionary({ code }).then((res) => {
+        this[toListKey] = res.data.data.map((item) => {
+          return { label: item.dictValue, value: item.dictKey };
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  text-align: center;
+}
+.apply-form {
+  width: 800px;
+  margin: 30px auto;
+}
+table {
+  width: 100%;
+  border: 1px solid #333;
+}
+.doc-label {
+  width: 100px;
+  text-align: center;
+  padding: 6px;
+  color: #777;
+  font-size: 14px;
+}
+.doc-input {
+  text-align: center;
+  color: #333;
+}
+tr td {
+  border: 1px solid #333;
+}
+</style>