From c3aaf28f7316cce12eec007a9f85a96cbcddeec2 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 07 五月 2025 10:34:20 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/views/business/approvalConfiguration.vue | 1034 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 648 insertions(+), 386 deletions(-)
diff --git a/admin/src/views/business/approvalConfiguration.vue b/admin/src/views/business/approvalConfiguration.vue
index 24532ad..e8788e5 100644
--- a/admin/src/views/business/approvalConfiguration.vue
+++ b/admin/src/views/business/approvalConfiguration.vue
@@ -1,155 +1,402 @@
<template>
- <TableLayout>
- <template v-slot:table-wrap>
- <div class="config">
- <div class="config_list">
- <div class="config_list_head">
- <span>閰嶇疆娴佺▼</span>
- <el-button style="background: #435EBE;" type="primary">鍙戝竷</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>
- </div>
- </div>
- <div :class="item.active ? 'item yellow active' : 'item yellow'" v-for="(item, index) in list" :key="index" @click="seleItem(index)">
- <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>
- <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>
- <div class="config_data">
- <div class="config_data_item">
- <div class="config_data_item_label">
- 閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�
- </div>
- <el-radio-group v-model="radio">
- <el-radio :label="0">琚浜�</el-radio>
- <el-radio :label="1">鎸囧畾浜哄憳</el-radio>
- <el-radio :label="2">閮ㄩ棬涓荤</el-radio>
- </el-radio-group>
- <div class="config_data_item_reviewed" v-if="radio === 1">
- <div class="config_data_item_reviewed_label">
- <span>鎸囧畾瀹℃牳浜�</span>
- <span>涓嶈秴杩�20浜�</span>
- </div>
- <div class="config_data_item_reviewed_content">
- <div class="config_data_item_reviewed_content_item">
- <span>鏍撳瓙鍝�</span>
- <i class="el-icon-close"></i>
- </div>
- <span class="add">+娣诲姞</span>
- </div>
- </div>
- <div class="config_data_item_reviewed" v-if="radio === 2">
- <div class="config_data_item_reviewed_label">
- <span>閮ㄩ棬涓荤</span>
- </div>
- <div class="config_data_item_reviewed_r">
- <span>琚浜虹殑</span>
- <el-select v-model="value" placeholder="璇烽�夋嫨" style="margin: 0 20px 0 10px;">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- <el-checkbox v-model="checked">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠ｅ鏍�</el-checkbox>
- </div>
- </div>
- </div>
- <div class="config_data_item" v-if="radio !== 0">
- <div class="config_data_item_label">
- 瀹℃壒鏂瑰紡
- <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span>
- </div>
- <el-radio-group v-model="radio1" style="display: flex; flex-direction: column;">
- <el-radio :label="0" style="margin-bottom: 20px;">鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio>
- <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;">
- <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>
- </div>
- <div class="config_data_submit" v-if="radio !== 0">
- <el-button style="background: #435EBE;" type="primary">淇濇寔閰嶇疆椤�</el-button>
- </div>
- </div>
+ <TableLayout :style="'overflow: auto;height: 100%;'">
+ <template v-slot:table-wrap>
+ <el-tabs v-model="activeType" @tab-click="handleClick">
+ <el-tab-pane label="鏅�氳瀹�" name="0"></el-tab-pane>
+ <el-tab-pane label="鏂藉伐璁垮" name="1"></el-tab-pane>
+ </el-tabs>
+ <div class="config" >
+ <div class="config_list">
+ <div class="config_list_head">
+ <span>閰嶇疆娴佺▼</span>
+ </div>
+ <div class="config_content">
+ <div class="item">
+ <div class="head">鍙戣捣浜�</div>
+ <div class="content">璁垮</div>
</div>
- </template>
- </TableLayout>
+ <div class="arrows">
+ <div class="line"></div>
+ <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ </div>
+ <div v-for="(item, index) in apprList" :key="index">
+ <div class="item yellow" :class="{
+ active: activeIndex == index,
+ blue: item.type == '1',
+ }" @click="flowClick(index)">
+ <div class="head">{{ item.remark }}</div>
+ <div class="content">
+ <!-- 瀹℃壒 -->
+ <template v-if="item.type == 0">
+ <template v-if="item.memberType == '0'">
+ <div>琚浜�</div>
+ </template>
+ <template v-if="item.memberType == '2'">
+ <div>閮ㄩ棬涓荤</div>
+ </template>
+ <template v-if="item.memberType == '1'">
+ <div v-if="item.objIds && item.objIds.length === 1">
+ <span>{{ item.objIds[0].name }}
+ {{ item.objIds[0].companyName }}</span>
+ <span v-if="item.approveType == 0 && item.type == '0'">
+ 鎴栫</span>
+ <span v-if="item.approveType == 1 && item.type == '0'">
+ 浼氱</span>
+ </div>
+ <div v-else-if="item.objIds && item.objIds.length > 1">
+ <span>{{ item.objIds[0].name }} 绛�</span>
+ <span v-if="item.approveType == 0 && item.type == '0'">
+ 鎴栫</span>
+ <span v-if="item.approveType == 1 && item.type == '0'">
+ 浼氱</span>
+ </div>
+ <div v-else>璇烽�夋嫨</div>
+ <i class="el-icon-arrow-right"></i>
+ </template>
+ </template>
+ <!-- 鎶勯�� -->
+ <template v-if="item.type == 1">
+ <div v-if="item.objIds && item.objIds.length === 1">
+ <span>{{ item.objIds[0].name }}
+ {{ item.objIds[0].companyName }}</span>
+ </div>
+ <div v-else-if="item.objIds && item.objIds.length > 1">
+ <span>{{ item.objIds[0].name }} 绛�</span>
+ </div>
+ <div v-else>璇烽�夋嫨</div>
+ <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i>
+ </template>
+ </div>
+ </div>
+ <div class="arrows">
+ <template v-if="apprList.length - 1 !== index">
+ <div class="line"></div>
+ <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+ </template>
+ <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="config_data">
+ <div class="config_data_item">
+ <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div>
+ <div class="df_ac mb10">
+ <div>瀹℃壒鑺傜偣鍚嶇О</div>
+ <el-input class="w200 ml10" v-model="apprList[activeIndex].remark"></el-input>
+ </div>
+ <!-- 鎶勯�佷汉 -->
+ <template v-if="apprList[activeIndex].type == '1'">
+ <div class="config_data_item_reviewed_content">
+ <div v-for="mem, memIndex in apprList[activeIndex].objIds" :key="mem.id"
+ class="config_data_item_reviewed_content_item">
+ <span>{{ mem.name }}</span>
+ <i @click="memDel(memIndex)" class="el-icon-close"></i>
+ </div>
+ <span class="add" @click="selStaff">+娣诲姞</span>
+ </div>
+ </template>
+ <el-radio-group v-if="apprList[activeIndex].type == '0'" v-model="apprList[activeIndex].memberType">
+ <el-radio :label="0">琚浜�</el-radio>
+ <el-radio :label="1">鎸囧畾浜哄憳</el-radio>
+ <el-radio :label="2">閮ㄩ棬涓荤</el-radio>
+ </el-radio-group>
+ <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 1">
+ <div class="config_data_item_reviewed_label">
+ <span>鎸囧畾瀹℃牳浜�</span>
+ <span>涓嶈秴杩�20浜�</span>
+ </div>
+ <div class="config_data_item_reviewed_content">
+ <div v-for="mem, memIndex in apprList[activeIndex].objIds" :key="mem.id"
+ class="config_data_item_reviewed_content_item">
+ <span>{{ mem.name }}</span>
+ <i class="el-icon-close" @click="memDel(memIndex)"></i>
+ </div>
+ <span class="add" @click="selStaff">+娣诲姞</span>
+ </div>
+ </div>
+ <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 2">
+ <div class="config_data_item_reviewed_label">
+ <span>閮ㄩ棬涓荤</span>
+ </div>
+ <div class="config_data_item_reviewed_r">
+ <span>琚浜虹殑</span>
+ <el-select v-model="apprList[activeIndex].objLevel" placeholder="璇烽�夋嫨" style="margin: 0 20px 0 10px">
+ <el-option label="鐩存帴涓荤" :value="0" />
+ <el-option label="浜岀骇涓荤" :value="1" />
+ <el-option label="涓夌骇涓荤" :value="2" />
+ <el-option label="鍥涚骇涓荤" :value="4" />
+ </el-select>
+ <el-checkbox v-model="apprList[activeIndex].noleaderOpt" :true-label="1"
+ :false-label="0">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠ｅ鏍�</el-checkbox>
+ </div>
+ </div>
+ </div>
+ <div class="config_data_item" v-if="
+ (apprList[activeIndex].memberType == 1 ||
+ apprList[activeIndex].memberType == 2) &&
+ apprList[activeIndex].type == '0'
+ ">
+ <div class="config_data_item_label">
+ 瀹℃壒鏂瑰紡
+ <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span>
+ </div>
+ <el-radio-group v-model="apprList[activeIndex].approveType" style="display: flex; flex-direction: column">
+ <el-radio :label="0" style="margin-bottom: 20px">鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio>
+ <el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio>
+ </el-radio-group>
+ </div>
+ <div class="config_data_submit">
+ <el-button @click="onSubmit" :loading="subLoading" style="background: #435ebe"
+ type="primary">淇濆瓨閰嶇疆椤�</el-button>
+ <el-button v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1" type="danger" plain
+ @click="handleDel">鍒犻櫎鑺傜偣</el-button>
+ </div>
+ </div>
+ </div>
+ </template>
+ <!-- -->
+ <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="1000px">
+ <div class="staff_modal">
+ <div class="left">
+ <div style="
+ width: 100%;
+ height: 50px;
+ background: rgba(242, 242, 242, 1);
+ line-height: 50px;
+ text-align: center;
+ font-size: 14px;
+ ">
+ 浼佷笟缁勭粐鏋舵瀯
+ </div>
+ <div style="width: 100%; max-height: 560px; overflow-y: scroll">
+ <Tree :list="companyTree" :defaultProps="{
+ name: 'name',
+ status: 'fsStatus',
+ children: 'childList',
+ id: 'id',
+ }" @callback="callback" />
+ </div>
+ </div>
+ <el-transfer filterable :title="['鏈��', '宸查��']" openAll :props="{ label: 'name', key: 'keyTemp' }"
+ filter-placeholder="鎼滅储鍛樺伐" v-model="searchForm.objIds" :right-default-checked="searchForm.objIdsT" :data="memberList" class="transfer">
+ </el-transfer>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="isShowTransfer = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="TransferSub">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </TableLayout>
</template>
<script>
import TableLayout from '@/layouts/TableLayout'
+// import treeTransfer from 'el-tree-transfer'
+import Tree from '@/components/common/Tree'
+import { approveTemplSave, approveTemplByType } from '@/api'
+import { fetchList } from '@/api/business/company'
+import { fetchList as memberListPost } from '@/api/business/member'
+import { getSystemDictData } from '@/api/other/other'
+
export default {
name: 'config',
- components: { TableLayout },
- data () {
+ components: {
+ TableLayout,
+ Tree
+ },
+ data() {
return {
- list: [
- {
- name: '',
- active: false
- }
+ activeType: '0',
+ subLoading: false,
+ apprList: [
+ { remark: '瀹℃壒浜�', active: false, type: '0', objIds: [] },
+ { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] }
],
- value: '',
- options: [],
- radio: 0,
- radio1: 0,
- checked: '',
- checkList: []
+ activeIndex: 0,
+
+ param: {
+ objIdsT: []
+ },
+ searchForm: {},
+ isShowTransfer: false,
+ memberList: [],
+ companyTree: []
}
},
+ created() {
+ this.getfindCompanyTreePage()
+ this.initDate()
+ },
methods: {
- add () {
- this.list.push({
- name: '',
- active: false
+ handleClick() {
+ this.apprList = []
+ const arr = [
+ { remark: '瀹℃壒浜�', active: false, type: 0, objIds: [] },
+ { remark: '鎶勯�佷汉', active: false, type: 1, objIds: [] }
+ ]
+ this.apprList = [...arr]
+ this.initDate()
+ },
+ flowClick(i) {
+ this.activeIndex = i
+ this.apprList.forEach((item, index) => {
+ if (i === index) {
+ item.active = true
+ console.log("====================", item.objIds)
+ if (item.objIds && item.objIds.length > 0) {
+ const objIds = item.objIds.map(i => {
+ return `${i.id}-${i.name}${i.companyName ? '-' + i.companyName : ''}`
+ })
+ this.$set(this.searchForm, 'objIds', objIds)
+ } else {
+ this.$set(this.searchForm, 'objIds', [])
+ }
+ } else {
+ item.active = false
+ }
})
},
- seleItem (i) {
+ initDate() {
+ const { activeType } = this
+ approveTemplByType(activeType).then(res => {
+ if (res && res.paramList) {
+ const arr = res.paramList || []
+ arr.forEach(item => {
+ if (item.memberList && item.memberList.length > 0) {
+ item.objIds = item.memberList.map(i => {
+ return {
+ id: i.id,
+ name: i.name,
+ companyName: i.companyName
+ }
+ })
+ } else {
+ item.objIds = []
+ }
+ })
+ this.apprList = arr
+ this.flowClick(0)
+ this.$forceUpdate()
+ }
+
+ // console.log(res);
+ })
+ },
+ onSubmit() {
+ const { apprList, activeType } = this
+ const temp = JSON.parse(JSON.stringify(apprList))
+ temp.forEach((item, index) => {
+ item.level = index + 1
+ if (item.objIds && item.objIds.length > 0) {
+ item.objIds = item.objIds.map(i => i.id).join(',')
+ } else {
+ item.objIds = ''
+ }
+ })
+ this.subLoading = true
+ approveTemplSave({
+ type: activeType,
+ paramList: temp
+ }).then(res => {
+ this.subLoading = false
+ this.$tip.success('淇濆瓨鎴愬姛')
+ }, () => {
+ this.subLoading = false
+ })
+ },
+ handleDel() {
+ const { activeIndex } = this
+ this.apprList.splice(activeIndex, 1)
+ this.activeIndex = 0
+ },
+ handleAddAppr() {
+ this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', approveType: 0, active: false, type: 0, objIds: [] })
+ // this.apprList.push({ remark: '瀹℃壒浜�', active: false, type: '0' })
+ },
+
+ // 鑾峰彇缁勭粐鏍�
+ getfindCompanyTreePage() {
+ fetchList(2)
+ .then(res => {
+ if (res && res.length > 0) {
+ res[0].fsStatus = 1
+ this.companyTree = res
+ // // this.searchForm.erpOrgId = res[0].erpId
+ // this.search()
+ // this.department = this.getDepartmentTree(res)
+ }
+ })
+ },
+ getMemberList() {
+ memberListPost({
+ model: {
+ companyId: this.searchForm.companyId || '',
+ canVisit: '',
+ companyType: 1,
+ erpOrgId: '',
+ hasFace: '',
+ hkStatus: '',
+ includeChild: true,
+ type: 2
+ },
+ page: 1,
+ capacity: 300
+ }).then(res => {
+ this.memberList = res.records || []
+ this.memberList.forEach(item => {
+ item.keyTemp = item.id + '-' + item.name + '-' + item.companyName || ''
+ })
+ // console.log('defaultProps', res)
+ })
+ },
+ callback(row) {
+ console.log(row)
+ this.$set(this.searchForm, 'companyId', row.id)
+ this.$set(this.searchForm, 'erpOrgId', row.erpId)
+ this.$set(this.searchForm, 'objIdsT', this.searchForm.objIds)
+ console.log('searchForm.objIds', this.searchForm.objIds);
+
+ this.getMemberList()
+ },
+ TransferSub() {
+ const { activeIndex } = this
+ if (this.searchForm.objIds && this.searchForm.objIds.length > 0) {
+ if (this.searchForm.objIds.length > 20) return this.$message.warning('鏈�澶氶�夋嫨20浜�')
+ const arr = this.searchForm.objIds.map(ii => {
+ const obj = ii.split('-')
+ return {
+ id: Number(obj[0]),
+ name: obj[1],
+ companyName: obj[2] || ''
+ }
+ })
+ this.apprList.forEach((item, index) => {
+ if (activeIndex === index) {
+ item.objIds = arr
+ }
+ })
+ }
+ this.isShowTransfer = false
+ console.log(this.searchForm.objIds)
+ },
+ memDel(memIndex) {
+ const { activeIndex } = this
+ this.apprList.forEach((item, index) => {
+ if (activeIndex === index) {
+ item.objIds.splice(memIndex, 1)
+ const objIds = item.objIds.map(i => {
+ return i.id + '-' + i.name
+ })
+ this.$set(this.searchForm, 'objIds', objIds)
+ }
+ })
+ },
+ selStaff() {
+ this.isShowTransfer = true
+ this.getMemberList()
+ },
+ seleItem(i) {
this.list.forEach((item, index) => {
item.active = index === i
})
@@ -159,254 +406,269 @@
</script>
<style lang="scss" scoped>
- .config {
- width: 100%;
- padding-bottom: 20px;
- box-sizing: border-box;
- height: calc(100vh - 140px);
- display: flex;
- align-items: center;
- justify-content: space-between;
- .config_list {
- width: 543px;
- height: 100%;
- flex-shrink: 0;
- border-radius: 2px;
- padding: 20px;
- box-sizing: border-box;
- border: 1px solid #EEEEEE;
- background: #F7F7F7;
- .config_list_head {
- width: 100%;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- span {
- font-size: 18px;
- font-weight: 500;
- color: #222222;
- }
- }
- .config_list_list {
- width: 100%;
- height: calc(100% - 40px);
- padding-top: 45px;
- box-sizing: border-box;
- overflow-y: scroll;
- display: flex;
- align-items: center;
- flex-direction: column;
- &::-webkit-scrollbar {
- width: 0;
- }
- .active {
- border: 2px solid #E84A08 !important;
- }
- .yellow {
- background: #EE8921 !important;
- }
- .blue {
- background: #435EBE !important;
- }
- .footer {
- width: 106px;
- height: 41px;
- background: #FFFFFF;
- box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
- border-radius: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- span {
- font-size: 15px;
- font-weight: 400;
- color: #333333;
- }
- }
- .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;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- position: relative;
- margin-bottom: 60px;
- &: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;
- }
- }
- }
- }
- }
- .config_data {
- flex: 1;
- height: 100%;
- margin-left: 20px;
- .config_data_submit {
- margin-top: 50px;
- }
- .config_data_item {
- width: 100%;
- display: flex;
- flex-direction: column;
- margin-bottom: 30px;
- &:last-child {
- margin: 0 !important;
- }
- .config_data_item_label {
- font-size: 16px;
- font-weight: 500;
- color: #222222;
- margin-bottom: 20px;
- span {
- font-size: 12px;
- font-weight: 400;
- color: #999999;
- margin-left: 10px;
- }
- }
- .config_data_item_reviewed {
- width: 100%;
- margin-top: 20px;
- .config_data_item_reviewed_r {
- margin-top: 10px;
- width: 100%;
- display: flex;
- align-items: center;
- span {
- flex-shrink: 0;
- font-size: 14px;
- font-weight: 400;
- color: #666666;
- }
- }
- .config_data_item_reviewed_label {
- display: flex;
- align-items: center;
- span {
- &:nth-child(1) {
- font-size: 14px;
- font-weight: 400;
- color: #222222;
- }
- &:nth-child(2) {
- font-size: 12px;
- font-weight: 400;
- color: #999999;
- margin-left: 8px;
- }
- }
- }
- .config_data_item_reviewed_content {
- width: 400px;
- margin-top: 10px;
- height: 110px;
- padding: 12px;
- box-sizing: border-box;
- border-radius: 2px;
- border: 1px solid #DFE2E8;
- display: flex;
- align-items: flex-start;
- flex-wrap: wrap;
- .add {
- font-size: 12px;
- font-weight: 400;
- color: #435EBE;
- cursor: pointer;
- margin-top: 3px;
- }
- .config_data_item_reviewed_content_item {
- padding: 3px 5px;
- background: #F4F7FC;
- border-radius: 2px;
- box-sizing: border-box;
- margin-right: 10px;
- margin-bottom: 10px;
- span {
- font-size: 12px;
- font-weight: 400;
- color: #333333;
- }
- i {
- color: #949BA2;
- margin-left: 10px;
- cursor: pointer;
- }
- }
- }
- }
- }
- }
+.config {
+ width: 100%;
+ padding-bottom: 20px;
+ box-sizing: border-box;
+ height: calc(100vh - 140px);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .config_list {
+ width: 543px;
+ height: 100%;
+ flex-shrink: 0;
+ border-radius: 2px;
+ padding: 20px;
+ box-sizing: border-box;
+ border: 1px solid #eeeeee;
+ background: #f7f7f7;
+
+ .config_list_head {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ color: #222222;
+ }
}
+
+ .config_content {
+ width: 100%;
+ height: calc(100% - 40px);
+ padding-top: 45px;
+ box-sizing: border-box;
+ overflow-y: scroll;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+
+ .active {
+ border: 2px solid #4456ac !important;
+ }
+
+ .yellow {
+ background: #e89e42 !important;
+ }
+
+ .blue {
+ background: #5094f3 !important;
+ }
+
+ .arrows {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ 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;
+ cursor: pointer;
+ border: 2px solid #f7f7f7;
+ height: 80px;
+ background: #4456ac;
+ border-radius: 2px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ .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;
+ }
+ }
+ }
+ }
+
+ .config_data {
+ flex: 1;
+ height: 100%;
+ margin-left: 20px;
+
+ .config_data_submit {
+ margin-top: 50px;
+ }
+
+ .config_data_item {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 30px;
+
+ &:last-child {
+ margin: 0 !important;
+ }
+
+ .config_data_item_label {
+ font-size: 16px;
+ font-weight: 500;
+ color: #222222;
+ margin-bottom: 20px;
+
+ span {
+ font-size: 12px;
+ font-weight: 400;
+ color: #999999;
+ margin-left: 10px;
+ }
+ }
+
+ .config_data_item_reviewed {
+ width: 100%;
+ margin-top: 20px;
+
+ .config_data_item_reviewed_r {
+ margin-top: 10px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+ span {
+ flex-shrink: 0;
+ font-size: 14px;
+ font-weight: 400;
+ color: #666666;
+ }
+ }
+
+ .config_data_item_reviewed_label {
+ display: flex;
+ align-items: center;
+
+ span {
+ &:nth-child(1) {
+ font-size: 14px;
+ font-weight: 400;
+ color: #222222;
+ }
+
+ &:nth-child(2) {
+ font-size: 12px;
+ font-weight: 400;
+ color: #999999;
+ margin-left: 8px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.config_data_item_reviewed_content {
+ width: 400px;
+ margin-top: 10px;
+ height: 110px;
+ padding: 12px;
+ box-sizing: border-box;
+ border-radius: 2px;
+ border: 1px solid #dfe2e8;
+ display: flex;
+ align-items: flex-start;
+ flex-wrap: wrap;
+
+ .add {
+ font-size: 12px;
+ font-weight: 400;
+ color: #435ebe;
+ cursor: pointer;
+ margin-top: 3px;
+ }
+
+ .config_data_item_reviewed_content_item {
+ padding: 3px 5px;
+ background: #f4f7fc;
+ border-radius: 2px;
+ box-sizing: border-box;
+ margin-right: 10px;
+ margin-bottom: 10px;
+
+ span {
+ font-size: 12px;
+ font-weight: 400;
+ color: #333333;
+ }
+
+ i {
+ color: #949ba2;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ }
+}
+
+.staff_modal {
+ display: flex;
+
+ .left {
+ width: 300px;
+ margin-right: 20px;
+ }
+
+ .transfer {
+ height: 600px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ ::v-deep .el-transfer-panel {
+ flex: 1;
+ height: 100%;
+ }
+
+ ::v-deep .el-transfer-panel__body {
+ height: 500px;
+ }
+
+ ::v-deep .el-transfer-panel__list.is-filterable {
+ height: 480px;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3