Skip to content

A
apaas-ui
Commit 1ea5694e authored by 张俊's avatar 张俊
Browse files
Options

服务申请

parent 4f7d9b0f
Show whitespace changes
Inline Side-by-side
Showing with 638 additions and 1 deletion
src/components/infoList.vue
View file @ 1ea5694e
...@@ -14,7 +14,10 @@ export default { ...@@ -14,7 +14,10 @@ export default {
} }
}, },
props:['list_arr'] props:['list_arr'],
mounted(){
console.log(this.$solts);
}
}; };
</script> </script>
......
src/components/shop-car-apply/apply_foot.vue 0 → 100644
View file @ 1ea5694e
<template>
<div class="footout">
<span>共项服务</span>
<span class="applybtn">提交申请</span>
</div>
</template>
<script>
export default {
props: ['num'],
components: {
},
data() {
return {
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.footout{
width: 100%;
height: 84px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 6px 0px
rgba(244, 247, 252, 1);
border-radius: 12px;
padding: 20px;
text-align: right;
}
.applybtn{
color: rgba(252, 239, 214, 1);
width: 221px;
height: 44px;
line-height: 44px;
text-align: center;
display: inline-block;
background-color: rgba(229, 102, 0, 1);
border-radius: 8px;
}
</style>
src/components/shop-car-apply/apply_form.vue 0 → 100644
View file @ 1ea5694e
<template>
<div class="formout">
<el-form
:inline="true"
:model="formInline"
label-width="0px"
:rules="rules"
ref="ruleForm"
class="demo-form-inline"
>
<el-form-item>
<p class="formname">申请部门：</p>
<el-input
disabled
v-model="formInline.depart"
placeholder="审批人"
></el-input>
</el-form-item>
<el-form-item prop="preson">
<p class="formname">部门联系人：</p>
<el-input v-model="formInline.preson" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item prop="phone">
<p class="formname">联系电话：</p>
<el-input v-model="formInline.phone" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {},
components: {},
data() {
return {
formInline: {
depart: "",
preson: "",
phone: "",
},
rules: {
preson: [
{ required: true, message: "请输入部门联系人", trigger: "blur" },
],
phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
},
};
},
watch: {},
computed: {},
created() {},
mounted() {},
methods: {
submitForm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style>
.formout .el-input__inner {
width: 550px;
}
</style>
<style scoped>
.formout {
width: 100%;
overflow: hidden;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 6px 0px rgba(195, 202, 248, 0.25);
border-radius: 12px;
padding: 30px;
}
.formout .formname {
width: 520px;
color: rgba(88, 97, 122, 1);
}
.formout .el-form-item {
margin-right: 20px;
}
.formout .el-form-item:nth-of-type(2) {
margin-right: 0px;
}
</style>
src/components/shop-car-apply/apply_service_state.vue 0 → 100644
View file @ 1ea5694e
<template>
<div class="outborder">
<div class="outservice">
<div class="serviceinfo">
<div
class="pic"
:style="{ backgroundImage: 'url(' + data.img + ')' }"
></div>
<div class="info">
<p>
{{ data.title }}
<span
v-for="(item, index) in data.tips"
:key="index + 4000"
:style="
item.type == 'nor'
? { color: '#fff', backgroundColor: 'rgba(83, 98, 238, 1)' }
: item.type == 'share'
? {
color: 'rgba(37, 189, 177, 1)',
backgroundColor: 'rgba(231, 253, 252, 1)',
border: 'solid 1px rgba(139, 214, 208, 1)',
}
: item.type == 'mg'
? {
color: 'rgba(225, 82, 96, 1)',
backgroundColor: 'rgba(255, 239, 239, 1)',
border: 'solid 1px rgba(215, 164, 169, 1)',
}
: {}
"
>{{ item.tip }}</span
>
</p>
<p>{{ data.type }}</p>
<p>{{ data.auth }}</p>
</div>
</div>
<div class="size">
<p>{{ data.size }}</p>
<P>{{ data.applytype }}</P>
</div>
<div class="num">
{{ data.num }}
</div>
<div class="oprate">
<upload-file
v-if="data.isMg"
:drag="false"
type="default"
></upload-file>
</div>
</div>
<p class="inputtitle">应用场景：</p>
<div class="system">
<el-input
v-model="sceneinput"
placeholder="请填写申请服务的应用场景"
></el-input>
</div>
<p class="inputtitle degr" @click="showtable = !showtable">
<i :class="showtable ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i
>选择需要申请的数据项：
</p>
<table-um
v-show="showtable"
:isSelection="true"
:headers="headers"
:stripe="true"
:url="data.tableurl"
class="table"
></table-um>
</div>
</template>
<script>
import uploadFile from "@/components/upload_file";
import tableUm from "../table-um";
export default {
props: ["data"],
components: {
uploadFile,
tableUm,
},
data() {
return {
sceneinput: "",
showtable: false,
headers: [
{
label: "字段编码",
prop: "code",
align: "left",
minWidth: "20%",
},
{
label: "字段名称",
prop: "name",
align: "left",
minWidth: "20%",
},
{
label: "字段类型",
prop: "type",
align: "center",
width: "150",
},
{
label: "字段描述",
prop: "desc",
align: "left",
minWidth: "50%",
},
],
};
},
watch: {},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped>
.outborder{
border-bottom: 2px solid rgba(244, 247, 252, 1);
}
.outservice {
width: 100%;
overflow: hidden;
padding: 25px 30px;
}
.outservice > div {
float: left;
}
.serviceinfo {
width: 415px;
margin-right: 90px;
}
.pic {
width: 116px;
height: 116px;
float: left;
background-size: contain;
margin-right: 20px;
}
.info {
float: left;
width: 270px;
}
.info p {
color: rgba(136, 144, 167, 1);
}
.info p:nth-of-type(1) {
color: rgba(13, 24, 71, 1);
font-size: 16px;
margin-bottom: 20px;
line-height: 22px;
}
.info p:nth-of-type(2) {
margin-bottom: 15px;
}
.info p:nth-of-type(1) span {
display: inline-block;
height: 20px;
line-height: 20px;
border-radius: 4px;
margin: 0 10px;
font-size: 12px;
padding: 0 9px;
}
.size {
width: 240px;
height: 107px;
background-color: rgba(249, 250, 252, 1);
border-radius: 8px;
margin-right: 70px;
padding: 20px;
color: rgba(136, 144, 167, 1);
}
.size p:nth-of-type(1) {
line-height: 22px;
margin-bottom: 10px;
}
.num {
width: 138px;
height: 107px;
line-height: 107px;
font-size: 16px;
color: rgba(88, 97, 122, 1);
margin-right: 55px;
text-align: center;
}
.oprate {
width: 130px;
height: 107px;
padding-top: 34px;
padding-left: 30px;
}
.inputtitle {
color: rgba(88, 97, 122, 1);
padding-left: 45px;
margin: 15px 0;
}
.system {
padding: 0 30px;
position: relative;
}
.system .el-select {
position: absolute;
left: 30px;
top: 0;
}
.degr {
text-decoration: underline;
cursor: pointer;
}
.table{
margin: 0 30px 20px;
}
</style>
src/components/shop-car-apply/service_list.vue 0 → 100644
View file @ 1ea5694e
<template>
<div class="out_list">
<p class="list_title">
<span>服务信息</span>
<span>规格</span>
<span>数量</span>
<span>操作</span>
</p>
<apply-service-state v-for="(item,index) in service_arr" :idx="index" :key="index+5000" :data="item"></apply-service-state>
</div>
</template>
<script>
import applyServiceState from './apply_service_state'
export default {
props: ['service_arr'],
components: {
applyServiceState,
},
data() {
return {
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style>
</style>
<style scoped>
.out_list{
width: 100%;
overflow: hidden;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 6px 0px
rgba(244, 247, 252, 1);
border-radius: 12px;
}
.list_title{
height: 48px;
line-height: 48px;
background-color: rgba(229, 240, 255, 1);
padding: 0 40px;
}
.list_title span{
color: rgba(36, 44, 67, 1);
font-weight: bold;
}
.list_title span:nth-of-type(1){
margin-right: 460px;
}
.list_title span:nth-of-type(2){
margin-right: 315px;
}
.list_title span:nth-of-type(3){
margin-right: 155px;
}
</style>
src/pages/shop_car_apply.vue 0 → 100644
View file @ 1ea5694e
<template>
<div class="apply_container">
<info-list :list_arr="module_arr">
<apply-form slot="apply_info"></apply-form>
<service-list slot="apply_service" :service_arr="service_arr"></service-list>
</info-list>
<div class="footout">
<span>共{{service_arr.length}}项服务</span>
<span class="applybtn">提交申请</span>
</div>
</div>
</template>
<script>
import infoList from "../components/infoList";
import applyForm from "../components/shop-car-apply/apply_form";
import serviceList from "../components/shop-car-apply/service_list";
export default {
props: {
},
components: {
infoList,
applyForm,
serviceList
},
data() {
return {
module_arr:[
{
title:'服务申请',
type:'solt',
solt_name:'apply_info'
},
{
title:'申请的服务',
type:'solt',
solt_name:'apply_service'
},
],
service_arr:[
{
img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
title:'水路货物周转量情况水路货物周转量情况',
tips:[
{
tip:'Map Service',
type:'nor'
},
{
tip:'共享',
type:'share'
},
],
type:'基础数据服务',
auth:'贵州省交通运输厅',
size:'规格：访问次数：20/日，访问量：100/日',
applytype:'申请方式：按月',
num:1,
isMg:false,
tableurl:'applydata',
},
{
img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
title:'水路货物周转量情况水路货物周转量情况',
tips:[
{
tip:'Map Service',
type:'nor'
},
{
tip:'敏感',
type:'mg'
},
],
type:'基础数据服务',
auth:'贵州省交通运输厅',
size:'规格：访问次数：20/日，访问量：100/日',
applytype:'申请方式：按月',
num:1,
isMg:true,
tableurl:'applydata',
},
],
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.apply_container{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.footout{
width: 100%;
height: 84px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 6px 0px
rgba(244, 247, 252, 1);
border-radius: 12px;
padding: 20px;
text-align: right;
margin: 20px 0;
}
.applybtn{
color: rgba(252, 239, 214, 1);
width: 200px;
height: 44px;
line-height: 44px;
text-align: center;
display: inline-block;
background-color: rgba(229, 102, 0, 1);
border-radius: 8px;
margin-left: 20px;
cursor: pointer;
}
</style>
src/router/index.js
View file @ 1ea5694e
...@@ -116,6 +116,11 @@ export default new Router({ ...@@ -116,6 +116,11 @@ export default new Router({
name: "shoppingCart", name: "shoppingCart",
component: () => import("@/pages/shopping_cart"), component: () => import("@/pages/shopping_cart"),
}, },
{
path: "/shop/shop_car_apply", // 购物车页
name: "shopCarApply",
component: () => import("@/pages/shop_car_apply"),
},
], ],
}, },
{ {
......
static/data.json
View file @ 1ea5694e
...@@ -495,6 +495,46 @@ ...@@ -495,6 +495,46 @@
"explanation": "上海市普陀区金沙江路 1516 弄" "explanation": "上海市普陀区金沙江路 1516 弄"
} }
], ],
"applydata":[
{
"id": 1,
"code": "weqwe",
"type": "字符串",
"name": "王小虎",
"desc": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 2,
"code": "weqwe",
"type": "字符串",
"name": "王小虎",
"desc": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 3,
"code": "weqwe",
"type": "字符串",
"name": "王小虎",
"desc": "上海市普陀区金沙江路 1518 弄",
"children":[
{
"id": 12,
"code": "weqwe",
"type": "字符串",
"name": "王小虎",
"desc": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 13,
"code": "weqwe",
"type": "字符串",
"name": "王小虎",
"desc": "上海市普陀区金沙江路 1518 弄"
}
]
}
],
"fhcstx": [ "fhcstx": [
{ {
"id": 1, "id": 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment