style(全局): preitter格式化src

mock/index.js

 const Mock = require('mockjs')
 const { param2Obj } = require('./utils')
 
+const task = require('./task')
 const user = require('./user')
 const role = require('./role')
 const article = require('./article')
 const search = require('./remote-search')
 
-const mocks = [
-  ...user,
-  ...role,
-  ...article,
-  ...search
-]
+const mocks = [...task]
 
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
@@ -20,7 +16,7 @@ function mockXHR() {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-  Mock.XHR.prototype.send = function() {
+  Mock.XHR.prototype.send = function () {
     if (this.custom.xhr) {
       this.custom.xhr.withCredentials = this.withCredentials || false
 
@@ -32,7 +28,7 @@ function mockXHR() {
   }
 
   function XHR2ExpressReqWrap(respond) {
-    return function(options) {
+    return function (options) {
       let result = null
       if (respond instanceof Function) {
         const { body, type, url } = options
@@ -50,7 +46,11 @@ function mockXHR() {
   }
 
   for (const i of mocks) {
-    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+    Mock.mock(
+      new RegExp(i.url),
+      i.type || 'get',
+      XHR2ExpressReqWrap(i.response)
+    )
   }
 }
 

mock/task.js

+/**
+ * 参考https://github.com/nuysoft/Mock/wiki/Syntax-Specification
+ * */
+module.exports = [
+  // get tasklist
+  {
+    url: '/tasklist',
+    type: 'get',
+    response: config => {
+      const temp = []
+      for (let i = 0; i < 10; i++) {
+        temp.push({
+          startTime: '@date',
+          missionNo: '@word',
+          tit: '一汽丰田体系审查',
+          owener: '@cname',
+          'costTime|0-12': 1,
+          'progress|0-100': 1
+        })
+      }
+      return {
+        rows: temp,
+        code: 200,
+        total: 10
+      }
+    }
+  }
+]

src/main.js

@@ -48,10 +48,11 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 
 import TalkItem from '@/components/TalkItem'
-// if (process.env.NODE_ENV === 'production') {
-//   const { mockXHR } = require('../mock')
-//   mockXHR()
-// }
+// 使用mock模拟接口调用
+if (process.env.NODE_ENV === 'development') {
+  const { mockXHR } = require('../mock')
+  mockXHR()
+}
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

src/views/processing/unprocessed-review/index.vue

 <template>
-  <!--待办审查平台页面-->
-  <div>待办审查平台页面</div>
+  <page-standard>
+    <div slot="tab">
+      <el-radio-group v-model="queryParams.type">
+        <el-radio-button
+          v-for="dict in dict.type.sys_detailed_classification"
+          :key="dict.value"
+          :label="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <el-form
+      v-show="showSearch"
+      ref="queryForm"
+      :model="queryParams"
+      size="small"
+      :inline="true"
+    >
+      <el-form-item prop="status">
+        <el-input
+          v-model="queryParams.deptName"
+          placeholder="输入搜索关键词"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item prop="status">
+        <el-date-picker
+          v-model="queryParams.deptName"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择任务状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.sys_job_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <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-form>
+    <el-card v-for="(item, index) in tableData" :key="index" class="box-card">
+      <div class="card-cell">
+        <div class="cell-lable">
+          <i class="el-icon-timer"></i>
+          开始时间
+        </div>
+        <div class="cell-value">
+          {{ item.startTime ? item.startTime : '---' }}
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">任务编号</div>
+        <div class="cell-value">
+          {{ item.missionNo ? item.missionNo : '---' }}
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">任务名称</div>
+        <div class="cell-value">
+          {{ item.tit ? item.tit : '---' }}
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">任务组长</div>
+        <div class="cell-value">
+          <i class="el-icon-user"></i>
+          {{ item.owener ? item.owener : '---' }}
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">任务状态</div>
+        <div v-if="item.costTime === 0" class="cell-value">未开始</div>
+        <div v-else class="cell-value yellow">
+          已耗时({{ item.costTime }}小时)
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">审查问卷</div>
+        <div class="cell-value">
+          <el-link type="primary">填写问卷</el-link>
+        </div>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable">完成进度</div>
+        <el-progress
+          class="cell-progress"
+          :stroke-width="12"
+          :percentage="item.progress"
+        ></el-progress>
+      </div>
+      <div class="card-cell">
+        <div class="cell-lable"></div>
+        <div class="cell-value">
+          <el-button
+            type="primary"
+            icon="el-icon-arrow-right"
+            circle
+            title="任务详情"
+          ></el-button>
+          <el-button
+            type="warning"
+            icon="el-icon-s-promotion"
+            circle
+            title="移交任务"
+          ></el-button>
+          <el-button
+            type="success"
+            icon="el-icon-s-management"
+            circle
+            title="预览报告"
+          ></el-button>
+          <el-button
+            type="success"
+            icon="el-icon-document"
+            circle
+            title="预览企业留档文件"
+          ></el-button>
+          <el-button
+            type="success"
+            icon="el-icon-folder"
+            circle
+            title="车企文件库"
+          ></el-button>
+          <el-button
+            type="danger"
+            icon="el-icon-video-play"
+            circle
+            title="开始"
+          ></el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.size"
+      @pagination="loadData"
+    >
+    </pagination>
+  </page-standard>
 </template>
-<!--js逻辑-->
 <script>
+import page from '@/mixins/page'
 export default {
+  dicts: ['sys_job_status', 'sys_scene_type', 'sys_detailed_classification'],
+  mixins: [page],
   data() {
-    return {}
+    return {
+      listUrl: '/tasklist',
+      showSearch: true,
+      tableData: []
+    }
   },
+  watch: {},
   methods: {}
 }
 </script>
-<!--ui样式-->
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.card-cell {
+  color: rgb(153, 153, 153);
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: space-around;
+}
+.box-card {
+  margin-bottom: 30px;
+  ::v-deep .el-card__body {
+    display: flex;
+    justify-content: space-between;
+  }
+  ::v-deep .el-link.is-underline:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0;
+    bottom: 0;
+    border-bottom: 1px solid #1890ff;
+  }
+  .cell-progress {
+    width: 200px;
+  }
+  .cell-value.yellow {
+    color: #fea623;
+  }
+}
+</style>