提交

package-lock.json

@@ -12,6 +12,7 @@
         "@vueuse/core": "^8.1.1",
         "axios": "^0.26.1",
         "default-passive-events": "^2.0.0",
+        "echarts": "^5.3.2",
         "element-ui": "^2.15.6",
         "normalize.css": "^8.0.1",
         "path-browserify": "^1.0.1",
@@ -1105,6 +1106,15 @@
       "resolved": "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
       "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
     },
+    "node_modules/echarts": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
+      "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.82",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.82.tgz",
@@ -2145,6 +2155,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -2284,6 +2299,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
+      "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   },
   "dependencies": {
@@ -3075,6 +3098,15 @@
       "resolved": "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
       "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
     },
+    "echarts": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
+      "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.1"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.82",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.82.tgz",
@@ -3739,6 +3771,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -3828,6 +3865,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
+      "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+      "requires": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -20,6 +20,7 @@
     "@vueuse/core": "^8.1.1",
     "axios": "^0.26.1",
     "default-passive-events": "^2.0.0",
+    "echarts": "^5.3.2",
     "element-ui": "^2.15.6",
     "normalize.css": "^8.0.1",
     "path-browserify": "^1.0.1",

src/router/index.js

@@ -61,7 +61,7 @@ export const allRoutes = [
     redirect: '/wjsj/wjgzt',
     children: [{
         path: "/wjsj/wjgzt",
-        name: "wjgzt",
+        name: "wjsj_wjgzt",
         component: () => import("@/views/wjsj/wjgzt/index.vue"),
         meta: { title: "文件工作台" },
 
@@ -72,24 +72,38 @@ export const allRoutes = [
         children: [
            {
                 path: "",
-                name: "wfqd",
+                name: "wjsj_wfqd",
                 component: () => import("@/views/wjsj/wfqd/index.vue"),
                 meta: { title: "我发起的" },
                 props: true,
             },{
-                path: "wjxq",
+                path: "wjxq/:id",
                 hidden: true,
-                name: "wjxq",
+                name: "wjsj_wfqd_wjxq",
                 component: () => import("@/views/wjsj/wfqd/wjxq/index.vue"),
                 meta: { title: "文件详情" },
                 props: true,
             }]
 
     },{
-        path: "/wjsj/wtjd",
-        name: "wtjd",
-        component: () => import("@/views/wjsj/wtjd/index.vue"),
-        meta: { title: "我提交的" }
+        path: "wtjd",
+        component: MainDefaultLayout,
+        meta: { title: "我提交的" },
+        children: [
+            {
+                path: "",
+                name: "wjsj_wtjd",
+                component: () => import("@/views/wjsj/wtjd/index.vue"),
+                meta: { title: "我提交的" },
+                props: true,
+            },{
+                path: "wjxq/:id",
+                hidden: true,
+                name: "wjsj_wtjd_wjxq",
+                component: () => import("@/views/wjsj/wtjd/wjxq/index.vue"),
+                meta: { title: "文件详情" },
+                props: true,
+            }]
     }]
   },
 

src/styles/mixin.scss

@@ -26,7 +26,9 @@
 .flex-item-auto{
     flex:auto
 }
-
+.flex-right{
+	justify-content: flex-end;
+}
 .h100{
     height: 100%;
 }
@@ -144,7 +146,7 @@ input[type=radio] {
 }
 
 .text-orange {
-	color: #f60;
+	color: #FF6B46;
 }
 
 .text-green {
@@ -324,7 +326,9 @@ input[type=radio] {
 .border-top-2 {
 	border-top: 1px solid #e3e3e3;
 }
-
+.border-bottom-1{
+	border-bottom: 1px solid #dbdbdb;
+}
 .under-line {
 	text-decoration: underline;
 }
@@ -1631,4 +1635,8 @@ input.m0 {
 		background-color: #4351FF;
 		border-color: #4351FF;
 	}
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+	background-color: #4351FF;
+	border-color: #4351FF;
 }

src/views/wjsj/wfqd/index.vue

@@ -1,13 +1,215 @@
 <template>
-<div>我发起的111</div>
+<div>
+  <div class="d-flex flex-right">
+    <el-form label-width="100px" :inline="true">
+      <el-form-item prop="state_value">
+        <el-select class="mr15" v-model="state_value" placeholder="请选择状态">
+          <el-option
+              v-for="item in state_list"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+        <el-form-item prop="time">
+          <el-date-picker style="width: 100%"
+                          v-model="time"
+                          type="date"
+                          placeholder="请选择日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-button type="primary" class="ml5">下载</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+  <el-table :data="tableData"  tooltip-effect="dark" style="width: 100%">
+    <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        width="50">
+    </el-table-column>
+    <el-table-column
+        label="标题"
+        show-overflow-tooltip
+        width="auto"
+    >
+      <template slot-scope="scope">
+        <a href="javascript:;" @click="toDetail(scope.row.id)" class="text-normal">{{scope.row.title}}</a>
+      </template>
+    </el-table-column>
+    <el-table-column
+        label="发起人"
+        width="100"
+        prop="fqr"
+    ></el-table-column>
+    <el-table-column
+        label="截止日期"
+        width="150"
+        prop="jzrq"
+    ></el-table-column>
+    <el-table-column
+        label="状态"
+        width="100">
+      <template slot-scope="scope">
+        <span v-if="scope.row.zt == 3" class="text-orange">{{scope.row.ztmc}}</span>
+        <span v-else>{{scope.row.ztmc}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        label="进度"
+        width="200">
+      <template slot-scope="scope">
+        <el-progress :percentage="scope.row.jd" color="#4351FF"></el-progress>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="80">
+      <template slot-scope="scope" >
+        <el-button
+            type="text"
+            @click=""
+        >提醒</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <footer
+      class="flex-item-none"
+      style="display: flex;justify-content: flex-end;margin-top: 30px;"
+  >
+    <el-pagination
+        background
+        layout="total,prev, pager, next"
+        :page-size="limit"
+        :total="total"
+        :current-page.sync="cur_page"
+        @current-change="handleCurrentChange"
+    ></el-pagination>
+  </footer>
+</div>
 </template>
 
 <script>
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      state_value: '',
+      state_list: [{
+        label:'全部',
+        value: '0'
+      },{
+        label:'进行中',
+        value: '1'
+      },{
+        label:'正常',
+        value: '2'
+      },{
+        label:'即将超期',
+        value: '3'
+      },{
+        label:'已超期',
+        value: '4'
+      }],
+      time:'',
+      tableData:[{
+        id:'1',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'3',
+        ztmc:'即将超期',
+        jd:65
+      },{
+        id:'2',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'3',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'4',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'3',
+        ztmc:'即将超期',
+        jd:65
+      },{
+        id:'5',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'6',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'7',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'3',
+        ztmc:'即将超期',
+        jd:65
+      },{
+        id:'8',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'9',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'正常',
+        jd:65
+      },{
+        id:'10',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'3',
+        ztmc:'即将超期',
+        jd:65
+      }],
+      limit:10,
+      total:12,
+      cur_page: 1
+    }
+  },
+  methods:{
+    handleCurrentChange(val) {
+      this.cur_page = val;
+    },
+    toDetail(id) {
+      this.$router.push({ name: 'wjsj_wfqd_wjxq', params: { id: id } })
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.el-button--text{
+  color:#4351FF;
+}
 </style>

src/views/wjsj/wfqd/wjxq/index.vue

@@ -1,13 +1,161 @@
 <template>
-<div>我发起的文件详情</div>
+<div class="p20">
+  <div class="d-flex border-bottom-1 pb15">
+    <div class="flex-1 w-80">
+      <h3 class="font-size-24">2022年岗位补贴申请材料提交</h3>
+      <div class="font-size-16 color-6">
+        <p>为引导和激励高技能人才更好地服务产业发展，根据《关于高水平培育新时代千岛工匠队伍的实施意见》（舟委办发〔2021〕78号）等文件精神，现就做好2021年度高技能人才岗位补贴申报工作有关事项通知如下:</p>
+        <p>一、申报对象与条件 申报对象为未享受本市高技能人才岗位补贴或享受未满3年且同时具备以下条件的人员： </p>
+        <p>（一）劳动合同期限内市本级及定海区所辖企业一线在岗职工，并由企业按规定缴纳社会保险费用； </p>
+        <p>（二）持有相应职业（工种）的国家职业资格（技能等级）二级证书或国家职业资格（技能等级）一级证书；</p>
+      </div>
+    </div>
+    <div class="flex-1">
+      <div id="boxChart" style="height: 500px"></div>
+    </div>
+  </div>
+  <el-table :data="tableData" class="mt15" ref="multipleTable" style="width: 100%"  @selection-change="handleSelectionChange">
+    <el-table-column
+        type="selection"
+        align="center"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        label="文件"
+        show-overflow-tooltip
+        width="auto">
+      <template slot-scope="scope">
+        <span class="el-icon-document font-size-18"></span>
+        <span class="ml5">{{ scope.row.wjm }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+        label="上传者"
+        width="100"
+        prop="scz"
+    ></el-table-column>
+    <el-table-column
+        label="时间"
+        width="150"
+        prop="sj"
+        align="center"
+    ></el-table-column>
+    <el-table-column label="操作" width="80">
+      <template slot-scope="scope" >
+        <el-button
+            type="text"
+            @click=""
+        >详情</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-button class="mt15" :disabled="multipleSelection.length == 0" type="primary">批量下载</el-button>
+</div>
 </template>
 
 <script>
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout
+]);
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      tableData:[{
+        id:'1',
+        wjm:'党委办公室申请材料',
+        scz:'上传者',
+        sj:'2022/01/20',
+      },{
+        id:'2',
+        wjm:'后勤处申请材料',
+        scz:'上传者',
+        sj:'2022/01/20',
+      },{
+        id:'1',
+        wjm:'党委办公室申请材料',
+        scz:'上传者',
+        sj:'2022/01/20',
+      },{
+        id:'3',
+        wjm:'安保处申请材料',
+        scz:'上传者',
+        sj:'2022/01/20',
+      }],
+      multipleSelection: []
+    }
+  },
+  methods:{
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    boxChart() {
+      var chartDom = document.getElementById('boxChart');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: 'Referer of a Website',
+          subtext: 'Fake Data',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+    }
+  },
+  mounted() {
+    this.boxChart();
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.el-button--text{
+  color:#4351FF;
+}
 </style>

src/views/wjsj/wjgzt/index.vue

@@ -251,7 +251,7 @@ export default {
         content:'',
         time:'',
         sjdx:[],
-        files:[]
+        files:''
       },
       sjdxList:[{
         label:'元和小学',

src/views/wjsj/wtjd/index.vue

@@ -1,13 +1,204 @@
 <template>
-<div>我提交的</div>
+  <div>
+    <div class="d-flex flex-right">
+      <el-form label-width="100px" :inline="true">
+        <el-form-item prop="state_value">
+          <el-select class="mr15" v-model="state_value" placeholder="请选择状态">
+            <el-option
+                v-for="item in state_list"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+            </el-option>
+          </el-select>
+          <el-form-item prop="time">
+            <el-date-picker style="width: 100%"
+                            v-model="time"
+                            type="date"
+                            placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-button type="primary" class="ml5">下载</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table :data="tableData"  tooltip-effect="dark" style="width: 100%">
+      <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+          width="50">
+      </el-table-column>
+      <el-table-column
+          label="标题"
+          show-overflow-tooltip
+          width="auto"
+      >
+        <template slot-scope="scope">
+          <a href="javascript:;" @click="toDetail(scope.row.id)" class="text-normal">{{scope.row.title}}</a>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="发起人"
+          width="100"
+          prop="fqr"
+      ></el-table-column>
+      <el-table-column
+          label="截止日期"
+          width="150"
+          prop="jzrq"
+      ></el-table-column>
+      <el-table-column
+          label="状态"
+          width="100">
+        <template slot-scope="scope">
+          <span>{{scope.row.ztmc}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="进度"
+          width="100">
+        <template slot-scope="scope">
+         <span v-if="scope.row.zt == 2" class="color-2">{{scope.row.jd}}</span>
+          <span v-else>{{scope.row.jd}}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <footer
+        class="flex-item-none"
+        style="display: flex;justify-content: flex-end;margin-top: 30px;"
+    >
+      <el-pagination
+          background
+          layout="total,prev, pager, next"
+          :page-size="limit"
+          :total="total"
+          :current-page.sync="cur_page"
+          @current-change="handleCurrentChange"
+      ></el-pagination>
+    </footer>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      state_value: '',
+      state_list: [{
+        label:'全部',
+        value: '0'
+      },{
+        label:'待提交',
+        value: '1'
+      },{
+        label:'进行中',
+        value: '2'
+      },{
+        label:'已提交',
+        value: '3'
+      }],
+      time:'',
+      tableData:[{
+        id:'1',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'2',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'3',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'4',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'5',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'6',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'7',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'8',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'9',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      },{
+        id:'10',
+        title:'其好长从革调清王参通比报实才下在之月王',
+        fqr:'周桂英',
+        jzrq:'2021/07/22',
+        zt:'2',
+        ztmc:'进行中',
+        jd:'待提交'
+      }],
+      limit:10,
+      total:12,
+      cur_page: 1
+    }
+  },
+  methods:{
+    handleCurrentChange(val) {
+      this.cur_page = val;
+    },
+    toDetail(id) {
+      this.$router.push({ name: 'wjsj_wtjd_wjxq', params: { id: id } })
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.el-button--text{
+  color:#4351FF;
+}
 </style>

src/views/wjsj/wtjd/wjxq/index.vue

@@ -0,0 +1,62 @@
+<template>
+<div class="p20">
+  <div class="border-bottom-1 pb15">
+    <h3 class="font-size-24">2022年岗位补贴申请材料提交</h3>
+    <div class="font-size-16 color-6">
+      <p>为引导和激励高技能人才更好地服务产业发展，根据《关于高水平培育新时代千岛工匠队伍的实施意见》（舟委办发〔2021〕78号）等文件精神，现就做好2021年度高技能人才岗位补贴申报工作有关事项通知如下:</p>
+      <p>一、申报对象与条件 申报对象为未享受本市高技能人才岗位补贴或享受未满3年且同时具备以下条件的人员： </p>
+      <p>（一）劳动合同期限内市本级及定海区所辖企业一线在岗职工，并由企业按规定缴纳社会保险费用； </p>
+      <p>（二）持有相应职业（工种）的国家职业资格（技能等级）二级证书或国家职业资格（技能等级）一级证书；</p>
+    </div>
+  </div>
+
+  <el-upload
+      class="mt30 upload-demo"
+      action="#"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :before-remove="beforeRemove"
+      multiple
+      :limit="5"
+      :on-exceed="handleExceed"
+      :file-list="fileList">
+    <el-button type="primary">
+      <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
+      <span class="d-in-block v-mid font-size-16">提交文件材料</span>
+    </el-button>
+  </el-upload>
+</div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+
+    }
+  },
+  methods:{
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-button--text{
+  color:#4351FF;
+}
+</style>