流程管理详情页

src/components/service-header.vue

@@ -7,6 +7,13 @@
     <div class="info">
       <p class="info_title">
         <span>{{ data.name }}</span>
+        <span
+          class="info_fix"
+          v-if="data.fixed_process"
+          @click="goto_page(data.fixedurl)"
+        >
+          我要编辑
+        </span>
         <span class="bs" v-if="data.aqdetail" @click="subevent(0)">
           一键部署
         </span>
@@ -18,7 +25,7 @@
         </span>
         <span
           class="right gap"
-          v-if="data.yydetail || data.xxdetail || data.yydev"
+          v-if="data.yydetail || data.xxdetail || data.yydev||data.public||data.unpublic||data.undeploy||data.deploy"
         >
           |
         </span>
@@ -65,6 +72,20 @@
         >
           我要修改
         </span>
+        <span class="right undersell" v-if="data.deploy" @click="subevent(10)">
+          部署
+        </span>
+        <span class="right undersell1" v-if="data.undeploy" @click="subevent(9)">
+          取消部署
+        </span>
+
+        <span class="right undersell" v-if="data.public" @click="subevent(8)">
+          发布
+        </span>
+        <span class="right undersell1" v-if="data.unpublic" @click="subevent(7)">
+          取消发布
+        </span>
+        
         <span class="info_fix" v-if="data.yydev" @click="subevent(6)">
           应用开发
         </span>
@@ -238,7 +259,7 @@ export default {
   text-align: center;
   margin-left: 10px;
 }
-.undersell {
+.undersell,.undersell1 {
   width: 76px;
   height: 32px;
   background-color: #0f2683;
@@ -250,6 +271,11 @@ export default {
   cursor: pointer;
   text-align: center;
 }
+.undersell1{
+  color: #0f2683;
+  background-color: #e6ebfe;
+  margin-left: 10px;
+}
 .undermy {
   background-color: #515fe7;
   color: #e6ebfe;

src/pages/workbench/component-center/process-management/designer/detail.vue

 <template>
-  <div>
-    detail
+  <div class="detail_contain">
+    <p class="now_page_title">在线组件工具 /  流程设计  /  流程管理  / <span>详情</span></p>
+    <div class="info_contain">
+        <service-header :data="service_header_arr"></service-header>
+        <div class="type_box">
+            <div class="type_title">
+                <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c',color: '#e56600'}:{}">{{item}}</div>
+            </div>
+            <div class="type_box_select">
+                <info-list :list_arr="now_service==0?list_arr:servicead_arr">
+                  <table-um style="width:700px;" v-if="zd_table_arr.length" height='250px' :stripe="true" :headers="header_arr" :datas="zd_table_arr" slot="fw_table"></table-um>
+                  <div slot="process">流程</div>
+                  <div slot="count">流程</div>
+                  <div slot="suvice">流程</div>
+                </info-list>
+            </div>
+        </div>
+    </div>
   </div>
 </template>
+
+
+<script>
+import serviceHeader from '@/components/service-header'
+import infoList from '@/components/infoList'
+import tableUm from '@/components/table/table-um'
+export default {
+  components: {
+        serviceHeader,
+        infoList,
+        tableUm
+    },
+  data(){
+    return{
+      service_header_arr:{
+          id: "",
+          isMap: false,
+          name:'',
+          first:[],
+          second:[],
+          fixed_process:false,
+          public:false,
+          unpublic:false,
+          undeploy:false,
+          deploy:false,
+          fixed_url:'/',
+          url:''
+      },
+      state:1,
+      now_service:0,
+      service_arr:[],
+      list_arr:[
+        {
+            title:'流程描述：',
+            info:''
+        },
+        {
+            title:'所属组织：',
+            info:''
+        },
+        {
+            title:'创建时间：',
+            info:''
+        },
+        {
+            title:'流程挂载服务：',
+            info:'',
+            type:'solt',
+            solt_name:'fw_table'
+        },
+        {
+            title:'流程概览：',
+            info:'',
+            type:'solt',
+            solt_name:'process'
+        },
+      ],
+      servicead_arr:[
+        {
+          title: "流程统计",
+          prop:"title",
+          type: "solt",
+          solt_name: "count",
+        },
+        {
+          title: "流程概览",
+          prop:"title",
+          type: "solt",
+          solt_name: "suvice",
+        },
+      ],
+      header_arr:[
+        {
+            prop:'fwmc',
+            label:'服务名称',
+            align:'left',
+        },
+        {
+            prop:'time',
+            label:'到期时间',
+            width:'200px',
+            align:'center',
+        },
+      ],
+      zd_table_arr:[]
+    }
+  },
+  created(){
+    this.get_header()
+    this.getbaseinfo()
+  },
+  methods:{
+    get_header(){
+      this.$set(this.service_header_arr,'name','长兴综治事故申报处理流程')
+      let state = this.state
+      //未部署
+      if(state==0){
+        this.$set(this.service_header_arr,'first',[])
+        this.$set(this.service_header_arr,'second',[])
+        this.service_header_arr.first.push({
+          name:'工作区域',
+          text:'1111'
+        })
+        this.service_header_arr.first.push({
+          name:'流程状态',
+          text:'未部署'
+        })
+        this.service_header_arr.second.push({
+          name:'修改时间',
+          text:'2020-04-11'
+        })
+        this.service_arr = ['流程基本信息']
+        this.service_header_arr.fixed_process=true
+        this.service_header_arr.public=false
+        this.service_header_arr.unpublic=false
+        this.service_header_arr.undeploy=false
+        this.service_header_arr.deploy=true
+      //已部署
+      }else if(state == 1){
+        this.$set(this.service_header_arr,'first',[])
+        this.$set(this.service_header_arr,'second',[])
+        this.service_header_arr.first.push({
+          name:'工作区域',
+          text:'1111'
+        })
+        this.service_header_arr.first.push({
+          name:'流程状态',
+          text:'已部署'
+        })
+        this.service_header_arr.first.push({
+          name:'部署时间',
+          text:'2020-04-11'
+        })
+        this.service_header_arr.second.push({
+          name:'服务接口地址',
+          text:'http://localhost:1z/zdrylx?code=430100000000'
+        })
+        this.service_arr = ['流程基本信息','流程运行状态']
+        this.service_header_arr.fixed_process=true
+        this.service_header_arr.public=true
+        this.service_header_arr.unpublic=false
+        this.service_header_arr.undeploy=true
+        this.service_header_arr.deploy=false
+      //已发布
+      }else{
+        this.$set(this.service_header_arr,'first',[])
+        this.$set(this.service_header_arr,'second',[])
+        this.service_header_arr.first.push({
+          name:'工作区域',
+          text:'1111'
+        })
+        this.service_header_arr.first.push({
+          name:'流程状态',
+          text:'已发布'
+        })
+        this.service_header_arr.first.push({
+          name:'发布时间',
+          text:'2020-04-11'
+        })
+        this.service_header_arr.second.push({
+          name:'服务接口地址',
+          text:'http://localhost:1z/zdrylx?code=430100000000'
+        })
+        this.service_arr = ['流程基本信息','流程运行状态']
+        this.service_header_arr.fixed_process=true
+        this.service_header_arr.public=false
+        this.service_header_arr.unpublic=true
+        this.service_header_arr.undeploy=false
+        this.service_header_arr.deploy=false
+      }
+    },
+    getbaseinfo(){
+      this.$set(this.list_arr[0],'info','浙江省长兴县综合治理平台事故申报处理流程服务，仅供长兴县使用')
+      this.$set(this.list_arr[1],'info','北京比格大数据有限公司')
+      this.$set(this.list_arr[2],'info','2019-02-17 21:09:23')
+      this.zd_table_arr=[
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+        {
+          fwmc:'身份验证服务',
+          time:'2020-11-15 15:20:30'
+        },
+      ]
+    }
+  }
+
+}
+</script>
+<style scoped>
+.detail_contain{
+    width: 100%;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.info_contain{
+    padding: 25px 20px;
+    background-color: #fff;
+    width: 100%;
+    box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+}
+.now_page_title{
+    margin: 15px 0;
+    color: #898d9e;
+}
+.now_page_title span{
+    color: #242c43;
+    font-weight: 600;
+}
+.type_box{
+    width: 100%;
+}
+.type_title{
+    width: 100%;
+    height: 65px;
+    line-height: 65px;
+    color: #8890a7;
+    border-bottom: 2px solid #f4f7fc;
+}
+.type_select{
+    float: left;
+    width: auto;
+    margin-right: 40px;
+    height: 65px;
+    cursor: pointer;
+}
+.type_box_select{
+    padding: 30px 10px 10px 10px;
+    width: 100%;
+}
+</style>