项目信息新增页，和查看页

src/router/index.js

@@ -94,20 +94,6 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/administrative',
-    name: 'Administrative',
-    meta: { title: '行政组织' },
-    component: () => import('@/layout/index'),
-    children: [
-      {
-        path: '/administrative/index',
-        name: 'Administrative'.toLocaleUpperCase(),
-        meta: { title: '行政组织' },
-        component: () => import('@/views/administrative/index')
-      }
-    ]
-  },
   {
     path: '/accounting',
     name: 'Accounting',
@@ -153,6 +139,12 @@ export const constantRoutes = [
         name: 'ProjectInfo'.toLocaleUpperCase(),
         meta: { title: '项目信息' },
         component: () => import('@/views/projectInfo/index')
+      },
+      {
+        path: '/projectInfo/addProject',
+        name: 'AddProject'.toLocaleUpperCase(),
+        component: () => import('@/views/projectInfo/addProject'),
+        meta: { title: '新增项目信息' }
       }
     ]
   },

src/views/accounting/index.vue

 <template>
-  <div class="personnelList">
+  <div class="accountingList">
     <div class="search">
-      <el-form inline ref="personnelForm" :model="personnelForm" label-width="auto" label-position="right">
+      <el-form inline ref="accountingForm" :model="accountingForm" label-width="auto" label-position="right">
         <el-form-item label="核算组织编码">
-          <el-input v-model="personnelForm.empcode" placeholder="请输入人员编码"></el-input>
+          <el-input v-model="accountingForm.ZORG" placeholder="请输入人员编码"></el-input>
         </el-form-item>
         <el-form-item label="核算组织全称">
-          <el-input v-model="personnelForm.name" placeholder="请输入人员姓名"></el-input>
+          <el-input v-model="accountingForm.ZORGNAME" placeholder="请输入核算组织全称"></el-input>
         </el-form-item>
         <el-form-item label="核算组织属性">
-          <el-input v-model="personnelForm.certno" placeholder="请输入人员证件编号"></el-input>
+          <el-input v-model="accountingForm.ZORGATTR" placeholder="请输入核算组织属性"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" size="small" @click="queryPersonnel">查询</el-button>
         </el-form-item>
       </el-form>
     </div>
-    <div class="personnelTable">
+    <div class="accountingTable">
       <div class="title">核算组织列表</div>
       <el-table :data="personData" border>
         <el-table-column label="序号" type="index" width="55" />
@@ -89,10 +89,10 @@ export default {
   name: 'Accounting',
   data() {
     return {
-      personnelForm: {
-        empcode: '', // 人员编码
-        name: '', // 姓名
-        certno: '' // 证件编号
+      accountingForm: {
+        ZORG: '',
+        ZORGNAME: '',
+        ZORGATTR: ''
       },
       personData: [
         { ZORG: '01', ZORGNAME: '***机构1', ZORGATTR: '人力资源', ZCYNAME: '天津', ZORGLOC: '天津', ZREGIONAL: '900001', ZACORGYESNO: '是' },
@@ -125,14 +125,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.personnelList {
+.accountingList {
   .search {
     min-height: 40px;
     display: flex;
     border-bottom: 14px solid #f4f4f4;
     padding: 0 10px;
   }
-  .personnelTable {
+  .accountingTable {
     padding: 20px 10px;
     .title {
       color: #000;

src/views/projectInfo/addProject.vue

+<template>
+  <div class="addProject">
+    <div class="addTitle">新增项目信息</div>
+    <el-form ref="form" inline :model="form" label-width="auto" :rules="rules" :disabled="type === 'detail'" label-position="right">
+      <div class="step-header">
+        <div class="step-label">基本信息</div>
+      </div>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="项目名称" prop="ZPROJNAME">
+            <el-input v-model="form.ZPROJNAME" placeholder="请输入项目名称" />
+          </el-form-item>
+          <el-form-item label="项目简称" prop="ZHEREINAFTER">
+            <el-input v-model="form.ZHEREINAFTER" placeholder="请输入项目简称" />
+          </el-form-item>
+          <el-form-item label="项目外文名称" prop="ZPROJENAME">
+            <el-input v-model="form.ZPROJENAME" placeholder="请输入项目外文名称" />
+          </el-form-item>
+          <el-form-item label="曾用名" prop="ZOLDNAME">
+            <el-input v-model="form.ZOLDNAME" placeholder="请输入曾用名" />
+          </el-form-item>
+          <el-form-item label="项目类型" prop="ZPROJTYPE">
+            <el-input v-model="form.ZPROJTYPE" placeholder="请输入项目类型" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="国家/地区" prop="ZZCOUNTRY">
+            <el-input v-model="form.ZZCOUNTRY" placeholder="请输入国家/地区" />
+          </el-form-item>
+          <el-form-item label="项目所在地" prop="ZPROJLOC">
+            <el-input v-model="form.ZPROJLOC" placeholder="请输入项目所在地" />
+          </el-form-item>
+          <el-form-item label="中交项目业务分类值域" prop="ZCPBC">
+            <el-input v-model="form.ZCPBC" placeholder="请输入中交项目业务分类值域" />
+          </el-form-item>
+          <el-form-item label="项目机构" prop="ZPRO_ORG">
+            <el-input v-model="form.ZPRO_ORG" placeholder="请输入项目机构" />
+          </el-form-item>
+          <el-form-item label="上级项目主数据编码" prop="ZPROJECTUP">
+            <el-input v-model="form.ZPROJECTUP" placeholder="请输入上级项目主数据编码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="项目年份" prop="ZPROJYEAR">
+            <el-date-picker
+              v-model="form.ZPROJYEAR"
+              type="year"
+              placeholder="选择项目年份"
+            />
+          </el-form-item>
+          <el-form-item label="项目计划开始日期" prop="ZSTARTDATE">
+            <el-date-picker
+              v-model="form.ZSTARTDATE"
+              type="date"
+              placeholder="选择项目计划开始日期"
+              format="yyyy-MM-dd"
+              :picker-options="pickerBeginDateBefore"
+            />
+          </el-form-item>
+          <el-form-item label="项目计划完成日期" prop="ZFINDATE">
+            <el-date-picker
+              v-model="form.ZFINDATE"
+              type="date"
+              placeholder="选择项目计划完成日期"
+              format="yyyy-MM-dd"
+              :picker-options="pickerBeginDateAfter"
+            />
+          </el-form-item>
+          <el-form-item label="计税方式" prop="ZTAXMETHOD">
+            <el-input v-model="form.ZTAXMETHOD" placeholder="请输入计税方式" />
+          </el-form-item>
+          <el-form-item label="所属二级单位" prop="Z2NDORG">
+            <el-input v-model="form.Z2NDORG" placeholder="请输入所属二级单位" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div>
+        <el-button style="margin-top: 140px" type="success" @click.stop="add()">保 存</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddProject',
+  data() {
+    return {
+      form: {
+        ZPROJNAME: '',
+        ZHEREINAFTER: '',
+        ZPROJENAME: '',
+        ZOLDNAME: '',
+        ZPROJTYPE: '',
+        ZZCOUNTRY: '',
+        ZPROJLOC: '',
+        ZCPBC: '',
+        ZPRO_ORG: '',
+        ZPROJECTUP: '',
+        ZPROJYEAR: '',
+        ZSTARTDATE: '',
+        ZFINDATE: '',
+        ZTAXMETHOD: '',
+        Z2NDORG: ''
+      },
+      rules: {
+        ZPROJNAME: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
+        ZHEREINAFTER: [{ required: true, message: '请输入项目简称', trigger: 'blur' }],
+        ZPROJENAME: [{ required: true, message: '请输入项目外文名称', trigger: 'blur' }],
+        ZPROJTYPE: [{ required: true, message: '请输入项目类型', trigger: 'blur' }],
+        ZZCOUNTRY: [{ required: true, message: '请输入国家/地区', trigger: 'blur' }],
+        ZPROJLOC: [{ required: true, message: '请输入项目所在地', trigger: 'blur' }],
+        ZCPBC: [{ required: true, message: '请输入中交项目业务分类值域', trigger: 'blur' }],
+        ZPRO_ORG: [{ required: true, message: '请输入项目机构', trigger: 'blur' }],
+        ZPROJYEAR: [{ required: true, message: '请选择项目年份', trigger: 'blur' }],
+        ZTAXMETHOD: [{ required: true, message: '请输入计税方式', trigger: 'blur' }],
+        Z2NDORG: [{ required: true, message: '请输入所属二级单位', trigger: 'blur' }]
+      },
+
+      /** 时间选择限制范围 （完成时间不能在开始时间前面）*/
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          const beginDateVal = this.form.ZFINDATE
+          if (beginDateVal) {
+            return time.getTime() > beginDateVal
+          }
+        }
+      },
+      pickerBeginDateAfter: {
+        disabledDate: (time) => {
+          const beginDateVal = this.form.ZSTARTDATE
+          if (beginDateVal) {
+            return time.getTime() < beginDateVal
+          }
+        }
+      },
+      type: ''
+    }
+  },
+  created() {
+    this.type = this.$route.query.type
+    this.form = this.$route.query.rowData
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.addProject{
+  padding: 20px;
+  .addTitle{
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 22px;
+    font-weight: bold;
+  }
+  .step-header {
+    margin-left: 20px;
+    margin-bottom: 15px;
+    width: 100%;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    .step-label {
+      color: $theme-blue;
+      font-size: 18px;
+      font-weight: bold;
+      height: 24px;
+      flex: 1;
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        background-color: $theme-blue;
+        position: absolute;
+        left: -13px;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+      }
+    }
+    .step-header--right {
+      margin-right: 13px;
+    }
+  }
+}
+</style>

src/views/projectInfo/index.vue

 <!--项目信息-->
 <template>
-  <div>o</div>
+  <div class="projectInfoList">
+    <div class="search">
+      <div style="flex: 1">
+        <el-form inline ref="projectForm" :model="projectForm" label-width="auto" label-position="right">
+          <el-form-item label="项目名称">
+            <el-input v-model="projectForm.ZPROJNAME" placeholder="请输入项目名称"/>
+          </el-form-item>
+          <el-form-item label="国家/地区">
+            <el-input v-model="projectForm.ZPRO_ORG" placeholder="请输入国家/地区"/>
+          </el-form-item>
+          <el-form-item label="项目机构">
+            <el-input v-model="projectForm.ZZCOUNTRY" placeholder="请输入项目机构"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="small" @click="queryProject">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-button type="success" size="small" @click="projectVisible = true">新增</el-button>
+      </div>
+    </div>
+    <div class="projectInfoTable">
+      <div class="title">项目信息列表</div>
+      <el-table :data="projectInfoData" border>
+        <el-table-column label="序号" type="index" width="55"/>
+        <el-table-column label="项目名称" prop="ZPROJNAME" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目简称" prop="ZHEREINAFTER" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目外文名称" prop="ZPROJENAME" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="曾用名" prop="ZOLDNAME" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目类型" prop="ZPROJTYPE" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="国家/地区" prop="ZZCOUNTRY" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目所在地" prop="ZPROJLOC" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="中交项目业务分类值域" prop="ZCPBC" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目机构" prop="ZPRO_ORG" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="上级项目主数据编码" prop="ZPROJECTUP" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目年份" prop="ZPROJYEAR" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目计划开始日期" prop="ZSTARTDATE" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="项目计划完成日期" prop="ZFINDATE" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="计税方式" prop="ZTAXMETHOD" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="所属二级单位" prop="Z2NDORG" width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作" fixed="right" width="180">
+          <template slot-scope="scope">
+            <el-button type="text" style="color:#f56c6c;" size="mini" @click="delProject(scope.row)">删除</el-button>
+            <el-button type="text" size="mini" @click="editProject(scope.row)">编辑</el-button>
+            <el-button type="text" size="mini" @click="handProject(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        style="text-align: right;padding: 50px 15px 30px 15px"
+        :current-page="page"
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-size="rows"
+        :total="total"
+        @current-change="currentPageChange"
+        @size-change="pageSizeChange"
+      />
+    </div>
+    <!-- 新增弹框 -->
+    <el-dialog width="30%" title="请选择想要新增的项目类型" :visible.sync="projectVisible">
+      <div class="dialogStyle">
+        <div v-for="(item, index) in projectOptions" :key="index">
+          <el-button style="color: black" type="text" @click="addProject(item)">{{ item.label }}</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'ProjectInfo',
   data() {
-    return {}
+    return {
+      projectForm: {
+        ZPROJNAME: '',
+        ZZCOUNTRY: '',
+        ZPRO_ORG: ''
       },
-  methods: {}
+      // 选择新增项目类型
+      projectVisible: false,
+      projectOptions: [
+        { label: '01 投资运营类项目', value: '投资运营类项目', type: '1' },
+        { label: '02 工程承包类项目', value: '工程承包类项目', type: '2' },
+        { label: '03 工程技术与设计服务类项目', value: '工程技术与设计服务类项目', type: '3' },
+        { label: '04 房地产类项目', value: '房地产类项目', type: '4' },
+        { label: '05 制造类项目', value: '制造类项目', type: '5' },
+        { label: '06 金融类项目', value: '金融类项目', type: '6' },
+        { label: '07 其他类项目', value: '其他类项目', type: '7' }
+      ],
+
+      projectInfoData: [
+        { ZPROJNAME: '项目1', ZHEREINAFTER: '项目1', ZPROJENAME: 'project1', ZOLDNAME: '项目1', ZPROJTYPE: '项目类型', ZZCOUNTRY: '中国', ZPROJLOC: '中国', ZCPBC: '业务分类', ZPRO_ORG: '所属机构', ZPROJECTUP: '01', ZPROJYEAR: '2022', ZSTARTDATE: '2020-11-11', ZFINDATE: '2021-11-11', ZTAXMETHOD: '计税方式', Z2NDORG: '二级单位' },
+        { ZPROJNAME: '项目2', ZHEREINAFTER: '项目2', ZPROJENAME: 'project2', ZOLDNAME: '项目2', ZPROJTYPE: '项目类型', ZZCOUNTRY: '中国', ZPROJLOC: '中国', ZCPBC: '业务分类', ZPRO_ORG: '所属机构', ZPROJECTUP: '02', ZPROJYEAR: '2022', ZSTARTDATE: '2020-11-11', ZFINDATE: '2021-11-11', ZTAXMETHOD: '计税方式', Z2NDORG: '二级单位' },
+        { ZPROJNAME: '项目3', ZHEREINAFTER: '项目3', ZPROJENAME: 'project3', ZOLDNAME: '项目3', ZPROJTYPE: '项目类型', ZZCOUNTRY: '中国', ZPROJLOC: '中国', ZCPBC: '业务分类', ZPRO_ORG: '所属机构', ZPROJECTUP: '03', ZPROJYEAR: '2022', ZSTARTDATE: '2020-11-11', ZFINDATE: '2021-11-11', ZTAXMETHOD: '计税方式', Z2NDORG: '二级单位' },
+        { ZPROJNAME: '项目4', ZHEREINAFTER: '项目4', ZPROJENAME: 'project4', ZOLDNAME: '项目4', ZPROJTYPE: '项目类型', ZZCOUNTRY: '中国', ZPROJLOC: '中国', ZCPBC: '业务分类', ZPRO_ORG: '所属机构', ZPROJECTUP: '04', ZPROJYEAR: '2022', ZSTARTDATE: '2020-11-11', ZFINDATE: '2021-11-11', ZTAXMETHOD: '计税方式', Z2NDORG: '二级单位' }
+      ],
+      total: 4,
+      page: 1,
+      rows: 10
+    }
+  },
+  methods: {
+    /** 项目列表查询 */
+    queryProject() {
+    },
+    /** 项目新增 */
+    addProject(item) {
+      this.$router.push({
+        path: '/projectInfo/addProject',
+        query: {
+          id: item.value,
+          type: 'add',
+          number: item.type
+        }
+      })
+    },
+    /** 项目编辑 */
+    editProject(row) {
+      this.$router.push({
+        path: '/projectInfo/addProject',
+        query: {
+          rowData: row,
+          type: 'edit'
+        }
+      })
+    },
+    /** 项目查看 */
+    handProject(row) {
+      this.$router.push({
+        path: '/projectInfo/addProject',
+        query: {
+          rowData: row,
+          type: 'detail'
+        }
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.projectInfoList {
+  .search {
+    min-height: 40px;
+    display: flex;
+    border-bottom: 14px solid #f4f4f4;
+    padding: 0 10px;
+  }
+
+  .projectInfoTable {
+    padding: 20px 10px;
 
+    .title {
+      color: #000;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 12px;
+      letter-spacing: 1px;
+    }
+  }
+}
 </style>