From dc22358d8624d3f5a2c27ee6c27e0bdbfe705fe9 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期一, 20 五月 2024 11:21:14 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- admin/src/views/business/approvalConfiguration.vue | 844 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 478 insertions(+), 366 deletions(-) diff --git a/admin/src/views/business/approvalConfiguration.vue b/admin/src/views/business/approvalConfiguration.vue index 24532ad..b2de731 100644 --- a/admin/src/views/business/approvalConfiguration.vue +++ b/admin/src/views/business/approvalConfiguration.vue @@ -1,132 +1,201 @@ <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> + <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"> + <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 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">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</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> + </div> </div> - </template> - </TableLayout> + <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" @click="selStaff">+娣诲姞</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" + >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</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> + </div> + </template> + <!-- --> + <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="800px"> + <tree-transfer + v-model="param.menuIds" + :title="['鏈��', '宸查��']" + :from_data="fromData" + :to_data="selData" + :defaultProps="{ label: 'label' }" + mode="transfer" + height="500px" + filter + openAll + ref="treeTransfer" + > + </tree-transfer> + <span slot="footer" class="dialog-footer"> + <el-button @click="isShowTransfer = false">鍙� 娑�</el-button> + <el-button type="primary" @click="isShowTransfer = false" + >纭� 瀹�</el-button + > + </span> + </el-dialog> + </TableLayout> </template> <script> import TableLayout from '@/layouts/TableLayout' +import treeTransfer from 'el-tree-transfer' export default { name: 'config', - components: { TableLayout }, - data () { + components: { + TableLayout, + treeTransfer + }, + data() { return { list: [ { @@ -139,17 +208,60 @@ radio: 0, radio1: 0, checked: '', - checkList: [] + checkList: [], + + param: {}, + activeName: 'first', + isShowTransfer: false, + fromData: [ + { + id: '1', + pid: 0, + label: '涓�绾� 1', + children: [ + { + id: '1-1', + pid: '1', + label: '浜岀骇 1-1', + disabled: true, + children: [] + }, + { + id: '1-2', + pid: '1', + label: '浜岀骇 1-2', + children: [ + { + id: '1-2-1', + pid: '1-2', + children: [], + label: '浜岀骇 1-2-1' + }, + { + id: '1-2-2', + pid: '1-2', + children: [], + label: '浜岀骇 1-2-2' + } + ] + } + ] + } + ], + selData: [] } }, methods: { - add () { + add() { this.list.push({ name: '', active: false }) }, - seleItem (i) { + selStaff() { + this.isShowTransfer = true + }, + seleItem(i) { this.list.forEach((item, index) => { item.active = index === i }) @@ -159,254 +271,254 @@ </script> <style lang="scss" scoped> - .config { - width: 100%; - padding-bottom: 20px; - box-sizing: border-box; - height: calc(100vh - 140px); +.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; - .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; - } - } - } - } + position: relative; + margin-bottom: 60px; + &:last-child { + margin: 0 !important; } - .config_data { - flex: 1; - height: 100%; - margin-left: 20px; - .config_data_submit { - margin-top: 50px; + .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; } - .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; - } - } - } - } - } + } } + .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; + } + } + } + } + } + } +} </style> -- Gitblit v1.9.3