From aeadf5dce5646f19ada355b3a35eab4f5b0956a1 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 27 五月 2024 18:34:57 +0800
Subject: [PATCH] ''
---
admin/src/views/business/approvalConfiguration.vue | 330 +++++++++++++++++++++++++-----------------------------
1 files changed, 151 insertions(+), 179 deletions(-)
diff --git a/admin/src/views/business/approvalConfiguration.vue b/admin/src/views/business/approvalConfiguration.vue
index b2de731..f7f134f 100644
--- a/admin/src/views/business/approvalConfiguration.vue
+++ b/admin/src/views/business/approvalConfiguration.vue
@@ -1,10 +1,6 @@
<template>
<TableLayout>
<template v-slot:table-wrap>
- <el-tabs v-model="activeName">
- <el-tab-pane label="鏅�氳瀹�" name="first"></el-tab-pane>
- <el-tab-pane label="鏂藉伐璁垮" name="second"></el-tab-pane>
- </el-tabs>
<div class="config">
<div class="config_list">
<div class="config_list_head">
@@ -13,65 +9,65 @@
>鍙戝竷</el-button
>
</div>
- <div class="config_list_list">
- <div class="item">
- <div class="item_label">鍙戣捣浜�</div>
- <div class="item_child">
- <div class="item_child_label">绋嬫槬鏋�</div>
- <div class="item_child_val">璁垮</div>
- </div>
- <div class="item_down">
- <div class="item_down_x">
- <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ <div class="config_content">
+ <div class="item active">
+ <div class="head">鍙戣捣浜�</div>
+ <div class="content">璁垮</div>
+ </div>
+ <div class="arrows">
+ <div class="line"></div>
+ <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ </div>
+ <template v-for="(item, index) in apprList">
+ <div
+ class="item yellow"
+ :class="{ active: item.active }"
+ @click="flowClick(index)"
+ :key="index"
+ >
+ <div class="head">瀹℃壒浜�</div>
+ <div class="content">
+ <div>琚浜�</div>
+ <i class="el-icon-arrow-right"></i>
</div>
</div>
- </div>
+ <div class="arrows" :key="index">
+ <div class="line"></div>
+ <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ <i
+ v-if="apprList.length - 1 === index"
+ @click="handleAddAppr()"
+ class="el-icon-circle-plus add"
+ ></i>
+ </div>
+ </template>
+ <template v-if="false">
+ <div
+ class="item yellow"
+ :class="{ active: activeSel === 'one' }"
+ @click="flowClick('one')"
+ >
+ <div class="head">瀹℃壒浜�</div>
+ <div class="content">
+ <div>鏉庣惓-缁煎悎绉�</div>
+ <i class="el-icon-arrow-right"></i>
+ </div>
+ </div>
+ <div class="arrows">
+ <div class="line"></div>
+ <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ </div>
+ </template>
<div
- :class="item.active ? 'item yellow active' : 'item yellow'"
- v-for="(item, index) in list"
- :key="index"
- @click="seleItem(index)"
+ class="item blue"
+ :class="{ active: activeSel === 'two' }"
+ @click="flowClick('two')"
>
- <div class="item_label">瀹℃壒浜�</div>
- <div class="item_child" style="cursor: pointer">
- <img
- class="item_child_right"
- src="@/assets/images/ar_more@2x.png"
- />
- <div class="item_child_label">琚浜�</div>
- <div class="item_child_val">璁垮</div>
+ <div class="head">鎶勯�佷汉</div>
+ <div class="content">
+ <div>璇烽�夋嫨</div>
+ <i class="el-icon-arrow-right"></i>
</div>
- <div class="item_down">
- <!-- <img
- class="item_down_add"
- v-if="list.length - 1 === index"
- src="@/assets/images/peizhi_add@2x.png"
- @click.stop="add"
- /> -->
- <div class="item_down_x">
- <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
- </div>
- </div>
- </div>
- <div class="item blue" style="height: 81px">
- <div class="item_label">鎶勯�佷汉</div>
- <div class="item_child" style="cursor: pointer; height: 40px">
- <img
- class="item_child_right"
- src="@/assets/images/ar_more@2x.png"
- />
- <div class="item_child_val" style="margin-top: 3px">
- 璇疯缃妱閫佷汉
- </div>
- </div>
- <div class="item_down">
- <div class="item_down_x">
- <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
- </div>
- </div>
- </div>
- <div class="footer">
- <span>娴佺▼缁撴潫</span>
</div>
</div>
</div>
@@ -136,26 +132,31 @@
<el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio>
</el-radio-group>
</div>
- <div class="config_data_item" v-if="radio === 2">
- <div class="config_data_item_label">瀹℃壒浜轰负绌烘椂</div>
- <el-checkbox-group
- v-model="checkList"
- style="display: flex; flex-direction: column"
+ <div class="df_ac">
+ <span class="mr10"><strong>鍏佽淇敼鐢宠椤�</strong></span>
+ <el-switch v-model="param.aa" active-value="1" inactive-value="0">
+ </el-switch>
+ </div>
+ <div class="df_ac mt10">
+ <span class="mr20">閫夋嫨淇敼椤�</span>
+ <el-select
+ v-model="param.list"
+ collapse-tags
+ multiple
+ placeholder="璇烽�夋嫨,澶氶��"
>
- <el-checkbox
- label="澶嶉�夋 A"
- style="margin-bottom: 20px"
- ></el-checkbox>
- <el-checkbox
- label="澶嶉�夋 B"
- style="margin-bottom: 20px"
- ></el-checkbox>
- <el-checkbox label="澶嶉�夋 C"></el-checkbox>
- </el-checkbox-group>
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
</div>
<div class="config_data_submit" v-if="radio !== 0">
<el-button style="background: #435ebe" type="primary"
- >淇濇寔閰嶇疆椤�</el-button
+ >淇濆瓨閰嶇疆椤�</el-button
>
</div>
</div>
@@ -195,23 +196,19 @@
TableLayout,
treeTransfer
},
- data() {
+ data () {
return {
- list: [
- {
- name: '',
- active: false
- }
+ apprList: [
+ { name: '', active: false },
+ { name: '', active: false }
],
+
value: '',
- options: [],
radio: 0,
radio1: 0,
checked: '',
- checkList: [],
param: {},
- activeName: 'first',
isShowTransfer: false,
fromData: [
{
@@ -248,20 +245,43 @@
]
}
],
+ options: [{
+ value: '閫夐」1',
+ label: '榛勯噾绯�'
+ }, {
+ value: '閫夐」2',
+ label: '鍙岀毊濂�'
+ }, {
+ value: '閫夐」3',
+ label: '铓典粩鐓�'
+ }, {
+ value: '閫夐」4',
+ label: '榫欓』闈�'
+ }, {
+ value: '閫夐」5',
+ label: '鍖椾含鐑ら腑'
+ }],
selData: []
}
},
methods: {
- add() {
- this.list.push({
- name: '',
- active: false
+ flowClick (i) {
+ this.apprList.forEach((item, index) => {
+ if (i === index) {
+ item.active = true
+ } else {
+ item.active = false
+ }
})
},
- selStaff() {
+ handleAddAppr () {
+ this.apprList.push({ name: '', active: false })
+ },
+
+ selStaff () {
this.isShowTransfer = true
},
- seleItem(i) {
+ seleItem (i) {
this.list.forEach((item, index) => {
item.active = index === i
})
@@ -300,7 +320,7 @@
color: #222222;
}
}
- .config_list_list {
+ .config_content {
width: 100%;
height: calc(100% - 40px);
padding-top: 45px;
@@ -313,110 +333,62 @@
width: 0;
}
.active {
- border: 2px solid #e84a08 !important;
+ border: 2px solid #4456ac !important;
}
.yellow {
- background: #ee8921 !important;
+ background: #e89e42 !important;
}
.blue {
- background: #435ebe !important;
+ background: #5094f3 !important;
}
- .footer {
- width: 106px;
- height: 41px;
- background: #ffffff;
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
- border-radius: 25px;
+ .arrows {
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
- span {
- font-size: 15px;
- font-weight: 400;
- color: #333333;
+ position: relative;
+ .line {
+ width: 1px;
+ height: 60px;
+ background-color: #ccc;
+ }
+ .add {
+ font-size: 40px;
+ color: #2080f7;
+ position: absolute;
+ cursor: pointer;
+ z-index: 999;
+ top: 10px;
+ }
+ img {
+ width: 12px;
}
}
.item {
width: 200px;
- height: 102px;
- background: #7999d9;
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
- border-radius: 4px;
- padding: 4px;
- box-sizing: border-box;
+ cursor: pointer;
+ border: 2px solid #f7f7f7;
+ height: 80px;
+ background: #4456ac;
+ border-radius: 2px;
+ position: relative;
display: flex;
flex-direction: column;
- justify-content: space-between;
- position: relative;
- margin-bottom: 60px;
+ .head {
+ height: 32px;
+ line-height: 32px;
+ padding: 2px 12px;
+ color: #fff;
+ }
+ .content {
+ flex: 1;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ justify-content: space-between;
+ }
&:last-child {
margin: 0 !important;
- }
- .item_down {
- position: absolute;
- bottom: -60px;
- width: 100%;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: center;
- .item_down_add {
- width: 46px;
- height: 46px;
- position: absolute;
- z-index: 3;
- top: 5px;
- cursor: pointer;
- }
- .item_down_x {
- width: 1px;
- height: 60px;
- background: #b2b2b2;
- position: relative;
- img {
- position: absolute;
- bottom: 0;
- left: -4px;
- width: 9px;
- height: 9px;
- }
- }
- }
- .item_label {
- width: 100%;
- height: 30px;
- display: flex;
- align-items: center;
- font-size: 15px;
- font-weight: 400;
- color: #ffffff;
- }
- .item_child {
- width: 100%;
- height: 61px;
- padding: 10px;
- box-sizing: border-box;
- background: #ffffff;
- border-radius: 4px;
- position: relative;
- .item_child_right {
- position: absolute;
- right: 10px;
- top: 13px;
- width: 8px;
- height: 14px;
- }
- .item_child_label {
- font-size: 14px;
- font-weight: 400;
- color: #333333;
- margin-bottom: 4px;
- }
- .item_child_val {
- font-size: 12px;
- font-weight: 400;
- color: #999999;
- }
}
}
}
--
Gitblit v1.9.3