[feature]新增应用审批页面

src/components/infoList.vue

@@ -10,7 +10,7 @@
           >访问地址: <a :href="item.info" target="_blank">{{ item.info }}</a></span
         >
         <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
-        <span v-if="item.type && item.type == 'down'" class="filebtn"
+        <span v-if="item.type && item.type == 'down'" class="filebtn" @click="download(item.url)"
           >下载文件</span
         >
       </p>
@@ -28,8 +28,13 @@ export default {
   },
   props: ["list_arr"],
   mounted() {
-    console.log(this.$solts);
+    console.log(this.$slots);
   },
+  methods:{
+      download(val){
+          this.$emit('download',val)
+      }
+  }
 };
 </script>
 
@@ -50,13 +55,13 @@ a {
 .outlist .list:nth-last-of-type(1) {
   margin: 0;
 }
-.service_title {
+.list .service_title {
   font-size: 16px;
   font-weight: bold;
   color: #58617a;
   text-align: left;
   height: 40px;
-  line-height: 40px;
+  line-height: 34px;
   margin-top: -10px;
   margin-bottom: 20px;
   margin-left: -10px;

src/components/service-header.vue

@@ -4,7 +4,7 @@
     <div class="info">
       <p class="info_title">
         <span>{{ data.name }}</span>
-        <span class="bs" v-if="data.yydetail" @click="subevent(0)">一键部署</span>
+        <span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span>
         <span class="info_fix" v-if="data.yydetail" @click="subevent(1)">我要编辑</span>
         <span class="right gap" v-if="data.yydetail">|</span>
         <span class="right underline" v-if="data.yydetail" @click="subevent(2)" title="申请下线至开发者应用">申请下线</span>
@@ -31,7 +31,7 @@
               :href="item.text"
               >{{ item.text }}</a
             >
-            <span v-else>{{ item.text }}</span>
+            <span v-else  :style="item.color ? { color: item.color } : {}">{{ item.text }}</span>
           </label>
         </p>
       </div>
@@ -53,7 +53,7 @@ export default {
   methods: {
       subevent(val){
           if(val == 0){
-              this.$emit('deploy')
+              this.$emit('deploy',this.data)
           }else if(val == 1){
               this.$emit('editapp')
           }else if(val == 2){

src/components/table-um.vue

@@ -176,6 +176,18 @@
             >
               <div slot="reference" class="overlit">{{ scope.row[item.prop] }}</div>
             </el-popover>
+            <!-- 排名图标替换 -->
+            <span v-else-if="item.type === 'rank'"> 
+              <img src="../assets/imgs/list_ic_topone.png" alt="" v-if="scope.row[item.prop]==1"> 
+              <img src="../assets/imgs/list_ic_toptwo.png" alt="" v-if="scope.row[item.prop]==2"> 
+              <img src="../assets/imgs/list_ic_topthree.png" alt="" v-if="scope.row[item.prop]==3"> 
+              {{ [1,2,3].indexOf(scope.row[item.prop])!==-1?'':scope.row[item.prop] }}
+            </span>
+            <!-- 服务添加图标 -->
+            <span v-else-if="item.type === 'hot'" :style="scope.row['hot']?{marginLeft:'-12px'}:{}">
+              <img src="../assets/imgs/list_ic_hot.png" alt="" v-if="scope.row['hot']">
+              {{ scope.row[item.prop] }}
+            </span>
             <!-- others -->
             <span v-else>{{ scope.row[item.prop] }}</span>
           </template>

src/pages/app_detail.vue

@@ -149,6 +149,7 @@ export default {
         first: [],
         second: [],
         yydetail: true,
+        aqdetail: true,
       },
       now_service: 0,
       header_arr: [

src/pages/apply_app_detail.vue

+<template>
+  <div class="detail_contain">
+    <p class="now_page_title">我的应用  /  我部署的应用  /   <span>应用详情</span></p>
+    <div class="info_contain">
+      <service-header
+        :data="service_header_arr"
+        @applymy="applymy"
+        @deploy="deploy"
+      ></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' } : {}
+            "
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="type_box_select">
+          <info-list
+            :list_arr="
+              now_service == 0
+                ? list_arr
+                : servicead_arr
+            "
+          >
+            <div class="appcode" v-html="appcode" slot="app_code"></div>
+            <process-card :data="approval_arr3" slot="approval"></process-card>
+          </info-list>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import serviceHeader from "../components/service-header";
+import infoList from "../components/infoList";
+import tableUm from "../components/table-um";
+import processCard from "../components/process-card";
+import { getRole } from "../utils/common";
+export default {
+  props: {},
+  components: {
+    serviceHeader,
+    infoList,
+    tableUm,
+    processCard,
+  },
+  data() {
+    return {
+      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
+      approval_arr: [
+        {
+          title: "一级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+        {
+          title: "二级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+      ],
+      approval_arr1: [
+        {
+          title: "一级审批",
+          result: "审批通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "同意",
+            },
+          ],
+        },
+        {
+          title: "二级审批",
+          result: "审批未通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "不同意，驳回。",
+            },
+          ],
+        },
+      ],
+      approval_arr2: [
+        {
+          title: "一级审批",
+          result: "审批未通过",
+          arr: [
+            {
+              title: "审批时间：",
+              info: "2020-02-28 15:23:45",
+            },
+            {
+              title: "审批单位：",
+              info: "某某某城管局",
+            },
+            {
+              title: "审批人：",
+              info: "张先生",
+            },
+            {
+              title: "审批意见：",
+              info: "不同意，驳回。",
+            },
+          ],
+        },
+      ],
+      approval_arr3:[
+        {
+            title: "一级审批",
+            result: "审批中",
+        },
+      ],
+      service_arr: ["基本信息", "申请审批信息"],
+      service_header_arr: {
+        id:"",
+        name: "",
+        first: [],
+        second: [],
+        aqdetail: true,
+      },
+      now_service: 0,
+      list_arr: [
+        {
+          title: "应用简介：",
+          info: "",
+        },
+        {
+          title: "功能简介：",
+          info: "",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "应用参数：",
+          info: "",
+          type: "solt",
+          solt_name: "app_code",
+        },
+        {
+          title: "联系人：",
+          info: "",
+        },
+        {
+          title: "联系电话：",
+          info: "",
+        },
+      ],
+      servicead_arr: [
+        {
+          title: "申请信息",
+          prop:"title",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "申请文件：",
+          info: "",
+          url:"",
+          type:"down"
+        },
+        {
+          title: "申请规格：",
+          info: "",
+        },
+        {
+          title: "审批信息",
+          prop:"title",
+        },
+        {
+          title: "",
+          type: "solt",
+          solt_name: "approval",
+        },
+      ],
+      appcode:"",
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      this.$store.commit("rolefun", data);
+      this.getServiceInfo();
+      this.getServiceBaseInfo();
+      this.getServiceapplyInfo();
+      
+    });
+  },
+  mounted() {},
+  methods: {
+    getServiceapplyInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.servicead_arr[1], "info", data.appapplyinfo.scene);
+          this.$set(this.servicead_arr[2], "info", data.appapplyinfo.filename);
+          this.$set(this.servicead_arr[2], "url", data.appapplyinfo.fileurl);
+          this.$set(this.servicead_arr[3], "info", data.appapplyinfo.size);
+        })
+        .catch(function(response) {});
+    },
+    getServiceBaseInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
+          this.$set(this.list_arr[4], "info", data.appbaseinfo.person);
+          this.$set(this.list_arr[5], "info", data.appbaseinfo.phone);
+          
+          this.appcode = data.appbaseinfo.appcode;
+        })
+        .catch(function(response) {});
+    },
+    deploy(val){
+        console.log(val);
+    },
+    getServiceInfo() {
+      this.$http
+        .get("/static/applyappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.service_header_arr, "id", data.appInfo.id);
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
+        })
+        .catch(function(response) {
+        });
+    },
+    applymy(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+  },
+};
+</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;
+}
+.type_box {
+  width: 100%;
+}
+.type_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  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%;
+}
+.appcode {
+  white-space: pre-wrap;
+  width: 100%;
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  padding: 24px;
+  color: #58617a;
+}
+</style>

src/pages/approval_app_detail.vue

+<template>
+  <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'}:{}"
+          >{{item}}</div>
+        </div>
+        <div class="type_box_select">
+          <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
+            <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
+            <process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
+            <div class="info_contain1" slot="sp_result">
+                <el-form ref="form" :rules="rules" :model="form" label-width="0px">
+                <el-form-item prop="result">
+                    <p class="formname">审批结果：</p>
+                    <el-select v-model="form.result" placeholder="请选择">
+                        <el-option
+                        v-for="item in resultoptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item prop="option">
+                    <p class="formname">审批意见：</p>
+                    <el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
+                </el-form-item>
+                <el-form-item class="btnsty">
+                    <el-button @click="onSubmit('form')" class="right">提交</el-button>
+                    <el-button class="right">取消</el-button>
+                </el-form-item>
+                </el-form>
+            </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-um";
+import processCard from "../components/process-card";
+import {getRole} from "../utils/common"
+export default {
+  props: {},
+  components: {
+    serviceHeader,
+    infoList,
+    tableUm,
+    processCard
+  },
+  data() {
+    return {
+      form:{
+          result:'',
+          option:''
+      },
+      now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
+      rules:{
+          result:[
+              { required: true, message: '请选择意见', trigger: 'change' },
+          ],
+          option:[
+              { required: true, message: '请输入意见', trigger: 'blur' },
+              {
+                  min: 10, message: '长度大于10个字符', trigger: 'blur'
+              }
+          ]
+      },
+      resultvalue: "",
+      resultoptions: [
+        {
+          label: "通过",
+          value: 1
+        },
+        {
+          label: "不通过",
+          value: 0
+        }
+      ],
+      approval_arr:[
+          [],
+          [],
+          [
+                {
+                    title:'一级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },       
+            ],
+        ],
+      header_arr: [
+        {
+          prop: "zdmc",
+          label: "字段名称",
+          minWidth: "20%",
+          align: "left"
+        },
+        {
+          prop: "zdbm",
+          label: "字段编码",
+          width: "100px",
+          align: "center"
+        },
+        {
+          prop: "zdlx",
+          label: "字段类型",
+          width: "100px",
+          align: "center"
+        },
+        {
+          prop: "zdsm",
+          label: "字段说明",
+          minWidth: "30%",
+          align: "left"
+        },
+        {
+          prop: "zdsl",
+          label: "字段示例数值",
+          width: "120px",
+          align: "left"
+        }
+      ],
+
+      service_header_arr: {
+        name: "",
+        pic:"",
+        first: [],
+        second: [],
+      },
+      service_arr: ["应用申请信息", "应用审批"],
+      now_service: 0,
+      servicead_arr: [
+        [],
+        [
+            {
+            title: "一级审批：",
+            prop: "title",
+            type: "solt",
+            solt_name: "sp_result"
+            },
+        ],
+        [
+            {
+                title: "审批信息：",
+                prop: "title",
+                type: "solt",
+                solt_name: "sp_card"
+            },
+            {
+                title: "二级审批：",
+                prop: "title",
+                type: "solt",
+                solt_name: "sp_result"
+            },
+        ],
+      ],
+      list_arr: [
+        {
+          title: "申请单位：",
+          info: ""
+        },
+        {
+          title: "申请人：",
+          info: ""
+        },
+        {
+          title: "申请人联系电话：",
+          info: ""
+        },
+        {
+          title: "场景描述：",
+          info: ""
+        },
+        {
+          title: "申请文件：",
+          info: "",
+          url:"",
+          type: "down"
+        },
+        {
+          title: "申请时间：",
+          info: ""
+        }
+      ]
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      console.log(data);
+      this.$store.commit("rolefun", data);
+      this.getheaderinfo();
+      this.getapplyinfo();
+    });
+  },
+  mounted() {},
+  methods: {
+      getapplyinfo(){
+        this.$http
+        .get("/static/approvalappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.company);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.person);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.phone);
+          this.$set(this.list_arr[3], "info", data.appbaseinfo.desc);
+          this.$set(this.list_arr[4], "info", data.appbaseinfo.filename);
+          this.$set(this.list_arr[4], "url", data.appbaseinfo.fileurl);
+          this.$set(this.list_arr[5], "info", data.appbaseinfo.time);
+        })
+        .catch(function(response) {});
+      },
+      getheaderinfo(){
+        this.$http
+        .get("/static/approvalappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
+        })
+        .catch(function(response) {});
+      },
+      onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+  }
+};
+</script>
+
+
+<style>
+.type_box_select .el-form {
+  width: 1022px;
+}
+.info_contain1 .el-input__inner{
+  background-color: #f7f8f9;
+  width: 1022px;
+}
+.info_contain1 .el-input{
+  width: 1022px;
+}
+
+.btnsty .el-button{
+    background-color: #c3caf8;
+    color: #0f2683;
+}
+.btnsty .el-button:nth-of-type(1){
+    background-color: #0f2683;
+    color: #f8f9fd;
+}
+</style>
+<style scoped>
+.detail_contain {
+  width: 100%;
+  height: calc(100% - 55px);
+  padding: 0 20px;
+}
+.info_contain {
+  padding: 25px 20px;
+  background-color: #fff;
+  width: 100%;
+  min-height: calc(100% - 20px);
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  position: relative;
+}
+.now_page_title {
+  margin: 15px 0;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.type_box {
+  width: 100%;
+}
+.type_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  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%;
+}
+.formname{
+  color: #58617a;
+}
+.right{
+  float: right;
+  margin-left: 20px;
+}
+.btnsty{
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+.info_contain1{
+    margin-bottom: 70px;
+}
+</style>

src/pages/approval_service_detail.vue

@@ -17,12 +17,12 @@
           >{{item}}</div>
         </div>
         <div class="type_box_select">
-          <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
+          <info-list @download="download" :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
             <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
             <process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
             <div class="info_contain1" slot="sp_result">
                 <el-form ref="form" :rules="rules" :model="form" label-width="0px">
-                <el-form-item>
+                <el-form-item prop="result">
                     <p class="formname">审批结果：</p>
                     <el-select v-model="form.result" placeholder="请选择">
                         <el-option
@@ -38,7 +38,7 @@
                     <el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
                 </el-form-item>
                 <el-form-item class="btnsty">
-                    <el-button @click="onSubmit" class="right">提交</el-button>
+                    <el-button @click="onSubmit('form')" class="right">提交</el-button>
                     <el-button class="right">取消</el-button>
                 </el-form-item>
                 </el-form>
@@ -72,7 +72,11 @@ export default {
       },
       now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
       rules:{
+          result:[
+              { required: true, message: '请选择意见', trigger: 'change' },
+          ],
           option:[
+              { required: true, message: '请输入意见', trigger: 'blur' },
               {
                   min: 10, message: '长度大于10个字符', trigger: 'blur'
               }
@@ -90,6 +94,7 @@ export default {
         }
       ],
       approval_arr:[
+          [],
           [],
           [
                 {
@@ -114,53 +119,7 @@ export default {
                         },
                     ]
                 },       
-            ],
-          [
-                {
-                    title:'一级审批',
-                    result:'审批通过',
-                    arr:[
-                        {
-                            title:'审批时间：',
-                            info:'2020-02-28 15:23:45'
-                        },
-                        { 
-                            title:'审批单位：',
-                            info:'某某某城管局'
-                        },
-                        {
-                            title:'审批人：',
-                            info:'张先生'
-                        },
-                        {
-                            title:'审批意见：',
-                            info:'同意'
-                        },
-                    ]
-                },       
-                {
-                    title:'二级审批',
-                    result:'审批通过',
-                    arr:[
-                        {
-                            title:'审批时间：',
-                            info:'2020-02-28 15:23:45'
-                        },
-                        { 
-                            title:'审批单位：',
-                            info:'某某某城管局'
-                        },
-                        {
-                            title:'审批人：',
-                            info:'张先生'
-                        },
-                        {
-                            title:'审批意见：',
-                            info:'同意'
-                        },
-                    ]
-                },       
-            ],
+            ]
         ],
       header_arr: [
         {
@@ -223,6 +182,7 @@ export default {
       service_arr: ["服务申请信息", "服务审批"],
       now_service: 0,
       servicead_arr: [
+        [],
         [
             {
             title: "一级审批：",
@@ -239,26 +199,12 @@ export default {
                 solt_name: "sp_card"
             },
             {
-                title: "一级审批：",
-                prop: "title",
-                type: "solt",
-                solt_name: "sp_result"
-            },
-        ],
-        [
-            {
-                title: "审批信息：",
-                prop: "title",
-                type: "solt",
-                solt_name: "sp_card"
-            },
-            {
-                title: "三级审批：",
+                title: "二级审批：",
                 prop: "title",
                 type: "solt",
                 solt_name: "sp_result"
             },
-        ],
+        ]
       ],
       list_arr: [
         {
@@ -288,6 +234,7 @@ export default {
         {
           title: "申请文件：",
           info: "xxxx文件名称.txt",
+          url:'www.baidu.com',
           type: "down"
         },
         {
@@ -312,8 +259,18 @@ export default {
   created() {},
   mounted() {},
   methods: {
-      onSubmit(){
-          console.log('1111');
+      onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      download(val){
+        console.log(val);
       }
   }
 };

src/pages/deploy_app_detail.vue

@@ -21,8 +21,8 @@
           </div>
         </div>
         <div class="type_box_select">
-          <div v-if="now_service == 0" class="info_contain2">
-            <info-list :list_arr="list_arr">
+          <div v-if="now_service == 0||now_service==2" class="info_contain2">
+            <info-list :list_arr="now_service == 0?list_arr:fwfw_arr">
               <div class="appcode" v-html="appcode" slot="app_code"></div>
               <div slot="use_know0">
                 访问地址:
@@ -55,11 +55,19 @@
                   <span @click="gotoview(list_arr[4].url.url)">浏览文件</span>
                 </p>
               </div>
+              <table-um
+              slot="fw_table"
+              :headers="header_fw_arr"
+              url="fw_rank_arr"
+              :stripe="true"
+              :paginationShow="true"
+              @detail="detail"
+            ></table-um>
             </info-list>
 
             <div
-              @click="public_form = true"
-              v-if="public"
+              @click="public_form = true"  
+              v-if="public&&now_service == 0"
               class="addimage"
               title="将该应用以服务的形式发布至服务超市"
             >
@@ -174,6 +182,8 @@
               @online="online"
             ></table-um>
           </div>
+
+          
         </div>
       </div>
     </div>
@@ -334,6 +344,52 @@ export default {
             ],
         },
       ],
+      header_fw_arr:[
+          {
+              prop:'rank',
+              label:'服务排名',
+              width: "150px",
+              align: "center",
+              type:'rank',
+          },
+          {
+              prop:'name',
+              label:'服务名称',
+              minWidth: "40%",
+              align: "left",
+              type:'hot',
+          },
+          {
+              prop:'address',
+              label:'服务地址',
+              minWidth: "60%",
+              align: "left",
+          },
+          {
+              prop:'times',
+              label:'外部调用次数(次)',
+              width: "250px",
+              align: "center",
+          },
+          {
+              prop:'time',
+              label:'平均调用时长(h)',
+              width: "250px",
+              align: "center",
+          },
+          {
+            label: "操作",
+            type: "Button",
+            width: "250px",
+            align: "center",
+            btnList: [
+                {
+                    type: "detail",
+                    label: "查看监控日志",
+                },
+            ],
+        },
+      ],
       tipsOptions: {
         title: "",
         message: "",
@@ -407,6 +463,15 @@ export default {
           solt_name: "use_know",
         },
       ],
+      fwfw_arr:[
+        {
+          title: "访问排名",
+          info: "",
+          prop:"title",
+          type: "solt",
+          solt_name: "fw_table",
+        },
+      ],
       appcode: "",
       showPass: false,
       public: false,
@@ -427,6 +492,9 @@ export default {
   },
   mounted() {},
   methods: {
+      detail(val){
+        console.log(val);
+      },
       update(val){
           console.log(val);
       },
@@ -441,7 +509,7 @@ export default {
       },
     getImageInfo() {
       this.$http
-        .get("/static/approvalappdetail.json")
+        .get("/static/deployappdetail.json")
         .then((response) => {
           console.log(response);
           let data = response.data.data;
@@ -534,46 +602,9 @@ export default {
     editapp() {
       console.log("11111");
     },
-    unline(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.position = "left";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    unsell(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
     getServiceInfo() {
       this.$http
-        .get("/static/approvalappdetail.json")
+        .get("/static/deployappdetail.json")
         .then((response) => {
           let data = response.data.data;
           this.$set(this.service_header_arr, "name", data.appInfo.name);
@@ -585,7 +616,7 @@ export default {
 
     getServiceBaseInfo() {
       this.$http
-        .get("/static/approvalappdetail.json")
+        .get("/static/deployappdetail.json")
         .then((response) => {
           let data = response.data.data;
           this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);

src/router/index.js

@@ -96,6 +96,16 @@ export default new Router({
               name: "deploy_app_detail",
               component: () => import("@/pages/deploy_app_detail"),
             },
+            {
+              path: "/yygl/:level/:type/applydetail/:id", // 我申请的应用详情
+              name: "apply_app_detail",
+              component: () => import("@/pages/apply_app_detail"),
+            },
+            {
+              path: "/yygl/:level/:type/approvaldetail/:id", // 我申请的应用详情
+              name: "approval_app_detail",
+              component: () => import("@/pages/approval_app_detail"),
+            },
           ],
         }, // 工作台 - 应用管理模块
         {

src/utils/common.js

 function getRole(){
     return new Promise((resolve,reject)=>{
         if(true){
-            resolve(0)
+            resolve(2)
         }else{
             reject('error')
         }

static/applyappdetail.json

+{
+  "data": {
+    "appInfo": {
+      "id":"321321qeqweds",
+      "name": "Mapvideos",
+      "pic": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+      "first": [
+        {
+          "name": "应用类型",
+          "text": "数据服务"
+        },
+        {
+          "name": "业务领域",
+          "text": "应急领域"
+        },
+        {
+          "name": "在线区域",
+          "text": "平台应用"
+        }
+      ],
+      "second": [
+        {
+          "name": "审批状态",
+          "text": "审批通过",
+          "color":"#515fe7"
+        },
+        {
+          "name": "所属组织",
+          "text": "北京比格大数据有限公司"
+        },
+        {
+          "name": "申请时间",
+          "text": "2020-02-28 17:59:30"
+        }
+      ]
+    },
+    "appbaseinfo":{
+        "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+        "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
+        "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+        "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
+        "person":"张三丰",
+        "phone":13255668899
+    },
+    "appapplyinfo":{
+        "scene":"申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
+        "filename":"mapvideos申请书.docx",
+        "fileurl":"http://www.baidu.com",
+        "size":"申请获取应用镜像部署权限"
+    }
+  }
+}

static/approvalappdetail.json

@@ -5,47 +5,42 @@
             "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
             "first": [
                 {
-                    "name": "业务类型",
+                    "name": "应用类型",
                     "text": "业务应用"
                 },
                 {
                     "name": "业务领域",
                     "text": "应急领域"
+                },
+                {
+                    "name": "审批状态",
+                    "text": "待审批",
+                    "color":"#ef9433"
                 }
             ],
             "second": [
                 {
-                    "name": "上架区域",
-                    "text": "应用商店"
+                    "name": "在线区域",
+                    "text": "平台应用"
                 },
                 {
-                    "name": "部署区域",
-                    "text": "apaas"
+                    "name": "申请类型",
+                    "text": "申请开发"
                 },
                 {
-                    "name":"部署时间",
-                    "text":"2019-11-28"
+                    "name":"所属组织",
+                    "text":"北京比格大数据"
                 }
             ]
         },
         "appbaseinfo":{
-            "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
-            "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
-            "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
-            "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
-            "url":"http://www.baidu.com",
-            "url1":{
-                "ip":"localhost",
-                "port":1122,
-                "user":"root",
-                "password":"1231231"
-            },
-            "url2":{
-                "text":"xxxx使用说明.doc",
-                "url":"http://www.baidu.com"
-            },
-            "state":2,
-            "public":true
+            "company":"北京比格大数据有限公司",
+            "person":"李子维",
+            "phone":13566445588,
+            "desc":"<p>申请贵州省行政区划地图服务用于贵州省疫情监控决策指挥系统。</p>",
+            "filename":"xxxx文件名称.txt",
+            "fileurl":"http://www.baidu.com",
+            "time":"2020-02-25 12:23:25"
         },
         "imagearr":[
             {

static/data.json

@@ -536,6 +536,44 @@
         "bbh":"1.0.2"
       }
     ],
+    "fw_rank_arr":[
+      {
+        "id":1,
+        "rank":1,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":true
+      },
+      {
+        "id":2,
+        "rank":2,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":true
+      },
+      {
+        "id":3,
+        "rank":3,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":false
+      },
+      {
+        "id":4,
+        "rank":4,
+        "name":"map",
+        "address":"http://www.baidu.com",
+        "times":45,
+        "time":0.5,
+        "hot":false
+      }
+    ],
     "fhcstx": [
       {
         "id": 1,

static/deployappdetail.json

+{
+    "data":{
+        "appInfo":{
+            "name":"Mapvideos",
+            "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+            "first": [
+                {
+                    "name": "业务类型",
+                    "text": "业务应用"
+                },
+                {
+                    "name": "业务领域",
+                    "text": "应急领域"
+                }
+            ],
+            "second": [
+                {
+                    "name": "上架区域",
+                    "text": "应用商店"
+                },
+                {
+                    "name": "部署区域",
+                    "text": "apaas"
+                },
+                {
+                    "name":"部署时间",
+                    "text":"2019-11-28"
+                }
+            ]
+        },
+        "appbaseinfo":{
+            "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
+            "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
+            "url":"http://www.baidu.com",
+            "url1":{
+                "ip":"localhost",
+                "port":1122,
+                "user":"root",
+                "password":"1231231"
+            },
+            "url2":{
+                "text":"xxxx使用说明.doc",
+                "url":"http://www.baidu.com"
+            },
+            "state":2,
+            "public":true
+        },
+        "imagearr":[
+            {
+                "name":"apaas-mapvideos镜像1123123123123",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像2",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像3",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file