feat(init): init

BREAKING CHANGE: init

src/router/modules/processing.js

-/* 任务处理路由js文件*/
 import Layout from '@/layout'
 
 export default [
@@ -15,19 +14,26 @@ export default [
         path: 'unprocessed-review',
         component: () => import('@/views/processing/unprocessed-review/index'),
         name: 'unprocessed-review',
-        meta: {title: '待办任务', activeMenu: '/processing/unprocessed-review'}
+        meta: {
+          title: '待办任务',
+          activeMenu: '/processing/unprocessed-review'
+        }
       },
       {
         path: 'processed-review',
         component: () => import('@/views/processing/processed-review/index'),
         name: 'processed-review',
-        meta: {title: '已办任务', activeMenu: '/processing/processed-review'}
+        meta: { title: '已办任务', activeMenu: '/processing/processed-review' }
       },
       {
         path: 'review-questionnaire',
-        component: () => import('@/views/processing/review-questionnaire/index'),
+        component: () =>
+          import('@/views/processing/review-questionnaire/index'),
         name: 'review-questionnaire',
-        meta: {title: '查看审查文卷', activeMenu: '/processing/review-questionnaire'}
+        meta: {
+          title: '审查问卷',
+          activeMenu: '/processing/review-questionnaire'
+        }
       }
     ]
   }

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

 <template>
   <!--查看审查问卷页面-->
-  <div>查看审查文卷</div>
+  <div>
+    <page-standard>
+      <div>
+        <!--1-抬头标题-->
+        <div class="title-style">
+          <div class="title-content-style">
+            查看审查问卷(所属任务: 广汽丰田体系审查)
+          </div>
+          <div class="title-content-style">
+            <a href="/processing/processed-review">返回</a>
+          </div>
+        </div>
+        <!--2-统计值-->
+        <div class="main-content-style">
+          <!--任务编号,名称,单位-->
+          <el-form label-width="6.25rem" class="task">
+            <el-row :gutter="60">
+              <el-col :span="8">
+                <el-form-item label="任务编号:">
+                  <span>IATF17889</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="任务名称:">
+                  <span>iso三体系审核</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="委托单位:">
+                  <span>广汽丰田有限公司</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <!--card统计值-->
+          <el-row :gutter="60" style="display: flex">
+            <el-col :span="6">
+              <div
+                class="card-statistical-style"
+                style="background-color: #5ad8a6"
+              >
+                <span class="content">
+                  <span class="value">80%</span>
+                  <span class="title">审查通过率</span>
+                </span>
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/tongguolv.png"
+                />
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div
+                class="card-statistical-style"
+                style="background-color: #ff99c3"
+              >
+                <span class="content">
+                  <span class="value">20%</span>
+                  <span class="title">审查失败率</span>
+                </span>
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/shibailv.png"
+                />
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div
+                class="card-statistical-style"
+                style="background-color: #6dc8ec"
+              >
+                <span class="content">
+                  <span class="value">100条</span>
+                  <span class="title">审查细则数</span>
+                </span>
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/xizeshu.png"
+                />
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div
+                class="card-statistical-style"
+                style="background-color: #5b8ff9"
+              >
+                <span class="content">
+                  <span class="value">5人</span>
+                  <span class="title">参与审查人数</span>
+                </span>
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/shencharenshu.png"
+                />
+              </div>
+            </el-col>
+          </el-row>
+          <!--审查问卷概要-->
+          <div class="form-review-questionnaire">
+            <div class="title-display">
+              <span class="title-i"></span>
+              <span class="tilte-content">审查问卷概要</span>
+            </div>
+            <el-table
+              :data="tableData"
+              :span-method="objectSpanMethod"
+              border
+              style="width: 100%; margin-top: 20px"
+            >
+              <el-table-column prop="id" label="标准章节"> </el-table-column>
+              <el-table-column prop="name" label="标准要求"> </el-table-column>
+              <el-table-column prop="amount1" label="审查要点">
+              </el-table-column>
+              <el-table-column prop="amount2" label="审查细则">
+              </el-table-column>
+              <el-table-column prop="amount3" label="符合场景">
+              </el-table-column>
+              <el-table-column prop="amount3" label="审查结果">
+              </el-table-column>
+              <el-table-column prop="amount3" label="记录"> </el-table-column>
+              <el-table-column prop="amount3" label="填写人"> </el-table-column>
+            </el-table>
+          </div>
+          <!--签字确认-->
+          <div class="form-signature-confirmation">
+            <div class="title-display">
+              <span class="title-i"></span>
+              <span class="tilte-content">签字确认</span>
+            </div>
+            <el-form
+              ref="ruleForm"
+              :model="ruleForm"
+              :rules="rules"
+              class="img-display"
+            >
+              <el-form-item prop="enterpriseLeader" label="车企负责人">
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/sign1.png"
+                />
+              </el-form-item>
+              <el-form-item prop="inspectionLeader" label="检验负责人">
+                <img
+                  class="img"
+                  src="@/assets/images/questionnaire/sign2.png"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <!--返回按钮-->
+          <el-button
+            class="btn"
+            type="primary"
+            plain
+            @click="goToProcessedReview"
+            >返 回</el-button
+          >
+        </div>
+      </div>
+    </page-standard>
+  </div>
 </template>
 <!--js逻辑-->
 <script>
 export default {
   data() {
-    return {}
+    return {
+      ruleForm: {
+        enterpriseLeader: '',
+        inspectionLeader: ''
       },
-  methods: {}
+      rules: {
+        enterpriseLeader: [
+          { required: true, message: '请输入车企负责人', trigger: 'blur' }
+        ],
+        inspectionLeader: [
+          { required: true, message: '请输入检验负责人', trigger: 'blur' }
+        ]
+      },
+      tableData: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ]
+    }
+  },
+  methods: {
+    /* 表格算法*/
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {},
+    /* 返回跳转*/
+    goToProcessedReview() {
+      this.$router.push('/processing/processed-review')
+    }
+  }
 }
 </script>
 <!--样式-->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+/*标题样式*/
+.title-style {
+  background-color: #f9f9f9;
+  height: 3.5rem;
+  width: 100%;
+  display: flex;
+  padding-right: 2rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/*标题文字样式*/
+.title-content-style {
+  color: #666666;
+  font-size: 1rem;
+  font-weight: bold;
+  margin-left: 1.5rem;
+}
+
+::v-deep .el-card__body {
+  padding: unset !important;
+}
+
+/*主体内容布局*/
+.main-content-style {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  .btn {
+    margin-bottom: 5rem;
+    width: 5rem;
+  }
+}
+
+/*任务编号,名称,单位样式*/
+.task {
+  padding: 3rem 0rem 1rem 4rem;
+
+  ::v-deep .el-form-item--medium .el-form-item__label {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: #999999;
+  }
+
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    font-size: 1.25rem;
+    color: #767676;
+  }
+}
+
+::v-deep .el-col-8 {
+  width: unset !important;
+  margin-right: 13rem;
+  margin-left: unset !important;
+  padding-left: unset !important;
+}
+
+/*卡片统计值样式*/
+.card-statistical-style {
+  width: 18rem;
+  display: flex;
+  padding: 1.5rem 2rem 1.5rem 2rem;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  align-items: center;
+  height: 8rem;
+
+  /*图片*/
+  .img {
+    width: 3rem;
+    height: 3.625rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    color: #ffffff;
+    font-size: 1.75rem;
+    margin: 0 !important;
+  }
+
+  .value {
+    color: #ffffff;
+    font-size: 1.75rem;
+  }
+}
+
+/*审查文件表格样式(最外层)*/
+.form-review-questionnaire {
+  height: max-content;
+  width: 100%;
+  padding: 2.5rem 4rem 1rem 4rem;
+
+  .title-display {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .title-i {
+      height: 1.625rem;
+      margin-right: 1rem;
+      background-color: #409eff;
+      width: 0.625rem;
+    }
+
+    .tilte-content {
+      color: #409eff;
+      font-size: 1rem;
+      font-weight: bold;
+    }
+  }
+
+  ::v-deep .el-table--border {
+    width: unset !important;
+  }
+}
+
+/*签字确认样式(最外层)*/
+.form-signature-confirmation {
+  height: max-content;
+  width: 100%;
+  padding: 2.5rem 4rem 0rem 4rem;
+
+  /*图片*/
+  .img-display {
+    display: flex;
+    margin-top: 1rem;
+    align-items: center;
+    justify-content: flex-start;
+
+    .img {
+      border: solid 1px #b6b6b6;
+      width: 30rem;
+      height: 20rem;
+      margin: 0.5rem 10rem 0rem 0rem;
+    }
+  }
+
+  .title-display {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .title-i {
+      height: 1.625rem;
+      margin-right: 1rem;
+      background-color: #409eff;
+      width: 0.625rem;
+    }
+
+    .tilte-content {
+      color: #409eff;
+      font-size: 1rem;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/setting/rules/components/dialog.vue

@@ -140,9 +140,7 @@ export default {
       this.$emit('close')
     },
     handleConfirm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {}
-      })
+      this.$refs['form'].validate(valid => {})
     }
   }
 }