From f2857c1a1dfcf47725e51d5198a0f79eb07753c3 Mon Sep 17 00:00:00 2001
From: caoyang <caoyang@syxysoft.com>
Date: Mon, 7 Mar 2022 15:21:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/processForm/index.vue | 318 ++++++++++++++++++
 .../views/documentManage/process/detail.vue   |  91 +++++
 .../views/documentManage/process/index.vue    |  32 ++
 3 files changed, 441 insertions(+)
 create mode 100644 jero-web/src/components/processForm/index.vue
 create mode 100644 jero-web/src/views/documentManage/process/detail.vue
 create mode 100644 jero-web/src/views/documentManage/process/index.vue

diff --git a/jero-web/src/components/processForm/index.vue b/jero-web/src/components/processForm/index.vue
new file mode 100644
index 000000000..ec452515d
--- /dev/null
+++ b/jero-web/src/components/processForm/index.vue
@@ -0,0 +1,318 @@
+<template>
+    <div class="process-from">
+      <div class="process-header">
+        <div class="process-title">
+          <a-icon type="arrow-left" class="back-to" @click="backTo"/>
+          <span>{{title}}</span>
+        </div>
+        <div class="process-header-btn">
+<!--          终止流程-->
+          <a-button class="header-btn termin" type="danger" ghost>{{$t('terminationProcess')}}</a-button>
+<!--          保存-->
+          <a-button class="header-btn prese">{{$t('preservation')}}</a-button>
+<!--          下发-->
+          <a-button class="header-btn issue" type="primary" ghost>{{$t('issue')}}</a-button>
+<!--          提交-->
+          <a-button class="header-btn submit" type="primary" @click="submit">{{$t('submit')}}</a-button>
+        </div>
+      </div>
+      <div class="process-content">
+        <div class="process-content-wrapper" >
+          <div v-for="(item,index) in formData" class="content-box">
+            <div v-for="val in Object.keys(item)" class="content">
+              <div class="process-content-title">
+                {{val}}
+              </div>
+              <div class="text-info" v-if="val == $t('projectInformation')">
+                <div class="text-info-content" v-for="(ol,index1) in item[val]">
+                   <span class="text-info-content-name">
+                      <span :title="ol.name">{{ol.name}}</span>
+                   </span>
+                  <span class="text-info-content-title">
+                    <span :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="text-info" v-if="val == $t('standardContent')">
+                <div class="text-info-content" v-for="(ol,index1) in item[val]">
+                   <span class="text-info-content-name">
+                      <span :title="ol.name">{{ol.name}}</span>
+                   </span>
+                  <span class="text-info-content-title">
+                    <span :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+<!--      符合性审查-->
+      <div class="process-review">
+        <div class="process-review-wrapper">
+          <div class="title">{{$t('complianceReview')}}</div>
+          <a-form>
+            <a-form-model
+              class="form"
+              :model="form"
+              :rules="rules"
+              ref="processForm"
+              :label-col="{ span: 1 }"
+              :wrapper-col="{ span: 8 }"
+            >
+<!--              审查结果-->
+                  <a-form-model-item :label="$t('reviewResults')" prop="value" class="process-form-item">
+                    <a-radio-group v-model="form.value" @change="onChange">
+                      <a-radio :value="1">
+                        {{$t('accord')}}
+                      </a-radio>
+                      <a-radio :value="2">
+                        {{$t('nonConformity')}}
+                      </a-radio>
+                      <a-radio :value="3">
+                        {{$t('Tracked')}}
+                      </a-radio>
+                      <a-radio :value="4">
+                        {{$t('notInvolved')}}
+                      </a-radio>
+                    </a-radio-group>
+                  </a-form-model-item>
+                <!--                反馈意见-->
+                  <a-form-model-item :label="$t('feedback')" prop="feedback" class="process-form-item">
+                    <a-textarea
+                      v-model="form.feedback"
+                      :placeholder="$t('pleaseEnter')"
+                      :auto-size="{ minRows: 5}"
+                    />
+                  </a-form-model-item>
+                <!--                附件-->
+                  <a-form-model-item :label="$t('feedback')" prop="file" class="process-form-item">
+                    <a-upload-dragger
+                      name="file"
+                      class="fileUpload"
+                      :multiple="true"
+                      action=""
+                      :headers="headers"
+                      @change="handleChange"
+
+                    >
+                      <a-icon :type="loading ? 'loading' : 'plus'" />
+                    </a-upload-dragger>
+                  </a-form-model-item>
+            </a-form-model>
+          </a-form>
+        </div>
+      </div>
+<!--      审查历史-->
+      <div class="review-record">
+        <div class="review-record-wrapper">
+          <div class="review-record-title">{{$t('approvalHistory')}}</div>
+          <a-table :columns="columns" :data-source="data" class="review-record-table" :pagination="false">
+
+          </a-table>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'processForm',
+    props:{
+      title:String,
+      formData:Array,
+      data:Array,
+    },
+    data(){
+      return{
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 1 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 8 },
+        },
+        form:{
+
+
+        },
+        rules:{
+          value:[
+            { required: true, message: this.$t('selectReviewResult'),trigger: 'change'},
+          ],
+          feedback:[
+            { max: 500, message: this.$t('cannotExceed500characters'),trigger: 'change'},
+          ]
+        },
+        headers: {
+          authorization: 'authorization-text',
+        },
+        loading:false,
+        columns:[
+          {
+            title: this.$t('Operator'),
+            dataIndex: 'name',
+            key: 'name',
+          },
+          {
+            title: this.$t('role'),
+            dataIndex: 'role',
+            key: 'role',
+          },
+          {
+            title: this.$t('operationContent'),
+            dataIndex: 'content',
+            key: 'content',
+          },
+          {
+            title: this.$t('operationTime'),
+            dataIndex: 'time',
+            key: 'time',
+          },
+        ]
+      }
+    },
+    mounted() {
+      // console.log('dataForm',this.formData)
+    },
+    methods:{
+      // 返回上一页
+      backTo(){
+        this.$router.go(-1)
+      },
+      onChange(){
+
+      },
+      handleChange(){
+
+      },
+      //提交
+      submit(){
+        this.$refs.processForm.validate(valid=>{
+          if(valid){
+
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .process-from{
+    .process-header{
+      position: fixed;
+      top:0;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      height: 68px;
+      line-height: 68px;
+      border-top: 1px solid #efefef;
+      border-bottom: 1px solid #efefef;
+      background: #FFFFFF;
+      .process-title{
+        padding-left: 32px;
+        font-size: 16px;
+        font-width: 600;
+        .back-to{
+          margin-right: 10px;
+        }
+      }
+      .process-header-btn{
+        padding-right: 22px;
+        .header-btn{
+          margin-right: 10px;
+        }
+      }
+    }
+    .process-content{
+      margin-top:70px;
+      overflow-y: scroll;
+      .process-content-wrapper{
+        margin: 0 32px;
+        .content-box{
+          .content{
+            font-size: 16px;
+            margin: 24px 0;
+            .process-content-title{
+              font-weight: 600;
+              margin-bottom: 24px;
+            }
+            .text-info{
+              display: flex;
+              flex-wrap: wrap;
+              .text-info-content{
+                width: 33.33%;
+                margin-bottom: 8px;
+                .text-info-content-name{
+                  width: 124px;
+                  font-size: 14px;
+                  color: #6F7385 ;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  margin-right: 24px;
+                  display: inline-block;
+                }
+                .text-info-content-title{
+                  width: calc(100% - 200px);
+                  display: inline-block;
+                  font-size: 16px;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  color: #040B29;
+                  font-weight: 400;
+                }
+              }
+            }
+
+          }
+        }
+      }
+    }
+    .process-review{
+      .process-review-wrapper{
+        margin:0 32px;
+        .title{
+          margin-bottom: 24px;
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+    }
+    .review-record{
+      .review-record-wrapper{
+        margin:0 32px;
+        .review-record-title{
+          margin-bottom: 24px;
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="less">
+  .process-review{
+    .process-review-wrapper{
+      .process-form-item{
+        .ant-col-1{
+          min-width: 100px;
+        }
+        .ant-col-8{
+          min-width: 500px;
+        }
+        .fileUpload{
+          .ant-upload{
+            width:96px;
+            height:96px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/jero-web/src/views/documentManage/process/detail.vue b/jero-web/src/views/documentManage/process/detail.vue
new file mode 100644
index 000000000..2e3aa6369
--- /dev/null
+++ b/jero-web/src/views/documentManage/process/detail.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="process-detail">
+      <processForm :title="title" :formData="formData" :data="data"></processForm>
+    </div>
+
+</template>
+
+<script>
+  import processForm from '@/components/processForm/index'
+  export default {
+    name: 'detail',
+    components:{
+      processForm
+    },
+    data(){
+      return{
+        title:'工程接口人确认符合性要求',
+        formData:[
+          {
+            项目信息:
+              [
+                {
+                  area: "项目信息",
+                  name: '项目名称',
+                  value: "Orion-G1.1"
+                },
+                {
+                  area: "项目信息",
+                  name: '目标市场',
+                  value: "中国"
+                },
+                {
+                  area: "项目信息",
+                  name: '项目状态',
+                  value: "在研"
+                },
+                {
+                  area: "项目信息",
+                  name: 'Studio工程师',
+                  value: "李四"
+                }
+              ],
+          },
+          {
+            标准内容:
+              [
+                {
+                  area: "标准内容",
+                  name: 'WVTA ID',
+                  value: "字段占位符"
+                },
+                {
+                  area: "标准内容",
+                  name: 'WVTA ID',
+                  value: "字段占位符"
+                },
+                {
+                  area: "标准内容",
+                  name: 'WVTA ID',
+                  value: "字段占位符"
+                },
+                {
+                  area: "标准内容",
+                  name: 'WVTA ID',
+                  value: "字段占位符"
+                }
+              ]
+          }
+        ],
+        data:[
+          {
+            name:'李四',
+            role:'法规工程师',
+            content:'设置交付物类型为测试报告',
+            time:'2019-12-31 14:00:00'
+          },
+          {
+            name:'李五',
+            role:'法规工程师',
+            content:'设置交付物类型为测试报告',
+            time:'2019-12-31 14:00:00'
+          }
+        ]
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentManage/process/index.vue b/jero-web/src/views/documentManage/process/index.vue
new file mode 100644
index 000000000..cf162e325
--- /dev/null
+++ b/jero-web/src/views/documentManage/process/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="process">
+      <a-button @click="routeTo">测试表单</a-button>
+
+    </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'process',
+
+    data(){
+      return{
+
+      }
+    },
+    methods:{
+      routeTo(){
+        let newUrl = this.$router.resolve({
+          path: '/docManage/form/detail',
+          query: {}
+        })
+        window.open(newUrl.href, "_blank");
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file