|
|
@@ -1,400 +1,447 @@
|
|
|
<template>
|
|
|
<div class="ent_powerPerson">
|
|
|
- <el-dialog
|
|
|
- :title="titleMsg"
|
|
|
- :show-close="false"
|
|
|
- :visible.sync="centerDialogVisible"
|
|
|
- width="890px"
|
|
|
- center>
|
|
|
- <div class="content">
|
|
|
- <div class="content_left">
|
|
|
- <h4>选择</h4>
|
|
|
- <div class="search">
|
|
|
- <el-input v-model="searchVal" placeholder="搜索" >
|
|
|
- <template slot="prepend"><img src="../../../assets/images/search.jpg" alt=""></template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="allList">
|
|
|
- <div v-for="(item,i) in deal_personList" :key="item.id">
|
|
|
- <h5><i class="seleced" @click="selectGroup(item,i)" :class="item.status"></i> <span class="noselect" @click="toggle(item,i)">{{ item.name }}</span> <i class="el-icon-arrow-down"></i></h5>
|
|
|
- <div class="itemList" :class="{toggle:!item.toggle}" >
|
|
|
- <div v-for="val in item.users" :key="val.user_id" @click="chooseUser(val,'single')" :class="{active:val.checked}">
|
|
|
- <span class="userName">{{ val.username }}</span> <span> {{ val.phone }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content_right">
|
|
|
- <h4>已选</h4>
|
|
|
- <ul>
|
|
|
- <li v-for="(item,i) in selectedList" :key="item.id">
|
|
|
- <span class="userName">{{ item.username }}</span><span>{{ item.phone }}</span><i class="el-icon-error" @click="delChooseUser(i)"></i>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <el-dialog
|
|
|
+ :title="titleMsg"
|
|
|
+ :show-close="false"
|
|
|
+ :visible.sync="centerDialogVisible"
|
|
|
+ width="890px"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="content">
|
|
|
+ <div class="content_left">
|
|
|
+ <h4>选择</h4>
|
|
|
+ <div class="search">
|
|
|
+ <el-input v-model="searchVal" placeholder="搜索">
|
|
|
+ <template slot="prepend">
|
|
|
+ <img src="../../../assets/images/search.jpg" alt />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="allList">
|
|
|
+ <div v-for="(item,i) in deal_personList" :key="item.id">
|
|
|
+ <h5>
|
|
|
+ <i class="seleced" @click="selectGroup(item,i)" :class="item.status"></i>
|
|
|
+ <span class="noselect" @click="toggle(item,i)">{{ item.name }}</span>
|
|
|
+ <i class="el-icon-arrow-down"></i>
|
|
|
+ </h5>
|
|
|
+ <div class="itemList" :class="{toggle:!item.toggle}">
|
|
|
+ <div
|
|
|
+ v-for="val in item.users"
|
|
|
+ :key="val.user_id"
|
|
|
+ @click="chooseUser(val,'single')"
|
|
|
+ :class="{active:val.checked}"
|
|
|
+ >
|
|
|
+ <span class="userName">{{ val.username }}</span>
|
|
|
+ <span>{{ val.phone }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <p v-if="currentIndex == 0">已选择{{ personList.checked }}人共购买{{ personList.quota }}人</p>
|
|
|
- <span slot="footer" class="dialog-footer btns">
|
|
|
- <button @click="saveDepart" class="save">保存</button>
|
|
|
- <button @click="centerDialogVisible = false" class="cancle">取消</button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+ <div class="content_right">
|
|
|
+ <h4>已选</h4>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,i) in selectedList" :key="item.id">
|
|
|
+ <span class="userName">{{ item.username }}</span>
|
|
|
+ <span>{{ item.phone }}</span>
|
|
|
+ <i class="el-icon-error" @click="delChooseUser(i)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p v-if="currentIndex == 0">已选择{{ personList.checked }}人共购买{{ personList.quota }}人</p>
|
|
|
+ <span slot="footer" class="dialog-footer btns">
|
|
|
+ <button @click="saveDepart" class="save">保存</button>
|
|
|
+ <button @click="centerDialogVisible = false" class="cancle">取消</button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import { user_sjPersonListInter,add_sjPersonInter,user_recordpersonListInter,add_recordpersonListInter } from "@/api/api";
|
|
|
+import {
|
|
|
+ user_sjPersonListInter,
|
|
|
+ add_sjPersonInter,
|
|
|
+ user_recordpersonListInter,
|
|
|
+ add_recordpersonListInter
|
|
|
+} from "@/api/api";
|
|
|
export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- centerDialogVisible:false,
|
|
|
- searchVal:'',
|
|
|
- personList:{},
|
|
|
- selectedList:[],
|
|
|
- checked:false,
|
|
|
- titleMsg:'',
|
|
|
- currentIndex:'0'
|
|
|
- }
|
|
|
- },
|
|
|
- created(){
|
|
|
- // this.$watch('searchVal', this.debounce((newValue, oldValue) => {
|
|
|
- this.getData()
|
|
|
- // }, 500))
|
|
|
- },
|
|
|
- computed:{
|
|
|
- deal_personList:function(){
|
|
|
- let arr = JSON.parse(JSON.stringify(this.personList));
|
|
|
- arr.list && arr.list.forEach((items,x) =>{
|
|
|
- let list = [];
|
|
|
- items.users.forEach(item =>{
|
|
|
- this.selectedList.forEach((val,i) =>{
|
|
|
- if(item.checked){ return; }
|
|
|
- if(item.user_id == val.user_id ){
|
|
|
- item.checked = true;
|
|
|
- }else{
|
|
|
- item.checked = false;
|
|
|
- }
|
|
|
- })
|
|
|
- if(item.checked){
|
|
|
- list.push("1")
|
|
|
- }
|
|
|
- })
|
|
|
- if(list.length === items.users.length){
|
|
|
- items.status = "selectAll";
|
|
|
- }else if(list.length === 0){
|
|
|
- items.status = "zero"
|
|
|
- }else{
|
|
|
- items.status = "selectHalf";
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ centerDialogVisible: false,
|
|
|
+ searchVal: "",
|
|
|
+ personList: {},
|
|
|
+ selectedList: [],
|
|
|
+ checked: false,
|
|
|
+ titleMsg: "",
|
|
|
+ currentIndex: "0"
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.$watch('searchVal', this.debounce((newValue, oldValue) => {
|
|
|
+ this.getData();
|
|
|
+ // }, 500))
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ deal_personList: function() {
|
|
|
+ let arr = JSON.parse(JSON.stringify(this.personList));
|
|
|
+ arr.list &&
|
|
|
+ arr.list.forEach((items, x) => {
|
|
|
+ let list = [];
|
|
|
+ items.users.forEach(item => {
|
|
|
+ this.selectedList.forEach((val, i) => {
|
|
|
+ if (item.checked) {
|
|
|
+ return;
|
|
|
}
|
|
|
- })
|
|
|
- return arr.list;
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- debounce (fn, delay) {
|
|
|
- let timer = null
|
|
|
- return function () {
|
|
|
- let arg = arguments
|
|
|
- clearTimeout(timer)
|
|
|
- timer = setTimeout(() => {
|
|
|
- fn.apply(this, arg)
|
|
|
- }, delay)
|
|
|
- }
|
|
|
- },
|
|
|
- //获取人员列表
|
|
|
- getData(){
|
|
|
- if(this.$parent.currentIndex == 0){
|
|
|
- user_sjPersonListInter({name:this.searchVal}).then(res =>{
|
|
|
- res.data.list.forEach(v =>{
|
|
|
- v.toggle = true;
|
|
|
- v.status = false;
|
|
|
- })
|
|
|
- this.personList = res.data;
|
|
|
- this.selectedList = res.data.checkedList;
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- user_recordpersonListInter({name:this.searchVal}).then(res =>{
|
|
|
- res.data.list.forEach(v =>{
|
|
|
+ if (item.user_id == val.user_id) {
|
|
|
+ item.checked = true;
|
|
|
+ } else {
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (item.checked) {
|
|
|
+ list.push("1");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (list.length === items.users.length) {
|
|
|
+ items.status = "selectAll";
|
|
|
+ } else if (list.length === 0) {
|
|
|
+ items.status = "zero";
|
|
|
+ } else {
|
|
|
+ items.status = "selectHalf";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return arr.list;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ debounce(fn, delay) {
|
|
|
+ let timer = null;
|
|
|
+ return function() {
|
|
|
+ let arg = arguments;
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn.apply(this, arg);
|
|
|
+ }, delay);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //获取人员列表
|
|
|
+ getData() {
|
|
|
+ if (this.$parent.currentIndex == 0) {
|
|
|
+ user_sjPersonListInter({ name: this.searchVal }).then(res => {
|
|
|
+ res.data.list.forEach(v => {
|
|
|
v.toggle = true;
|
|
|
v.status = false;
|
|
|
- })
|
|
|
+ });
|
|
|
this.personList = res.data;
|
|
|
this.selectedList = res.data.checkedList;
|
|
|
- })
|
|
|
- },
|
|
|
- //判断添加人员是否重复
|
|
|
- judgeHeavy(val){
|
|
|
- let arr = [];
|
|
|
- val.users ? arr = val.users : arr.push(val);
|
|
|
- let test = arr.reduce((pre,cur) => {
|
|
|
- if(this.selectedList.every(item=>item.user_id!==cur.user_id)){
|
|
|
- pre.push(cur)
|
|
|
- }
|
|
|
- return pre;
|
|
|
- },[]);
|
|
|
- return test;
|
|
|
- },
|
|
|
- //选择人员
|
|
|
- chooseUser(val,status){
|
|
|
- if(status === 'single'){
|
|
|
- if(this.currentIndex == 0){
|
|
|
- if(this.selectedList.length >= this.personList.quota){
|
|
|
- this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let newArr = this.selectedList.filter(x => {
|
|
|
- return val.user_id == x.user_id
|
|
|
- })
|
|
|
- if(newArr.length>0){
|
|
|
- this.$message({ message: '该人员已添加',type: 'warning'});
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ user_recordpersonListInter({ name: this.searchVal }).then(res => {
|
|
|
+ res.data.list.forEach(v => {
|
|
|
+ v.toggle = true;
|
|
|
+ v.status = false;
|
|
|
+ });
|
|
|
+ this.personList = res.data;
|
|
|
+ this.selectedList = res.data.checkedList;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //判断添加人员是否重复
|
|
|
+ judgeHeavy(val) {
|
|
|
+ let arr = [];
|
|
|
+ val.users ? (arr = val.users) : arr.push(val);
|
|
|
+ let test = arr.reduce((pre, cur) => {
|
|
|
+ if (this.selectedList.every(item => item.user_id !== cur.user_id)) {
|
|
|
+ pre.push(cur);
|
|
|
+ }
|
|
|
+ return pre;
|
|
|
+ }, []);
|
|
|
+ return test;
|
|
|
+ },
|
|
|
+ //选择人员
|
|
|
+ chooseUser(val, status) {
|
|
|
+ if (status === "single") {
|
|
|
+ if (this.currentIndex == 0) {
|
|
|
+ if (this.selectedList.length >= this.personList.quota) {
|
|
|
+ this.$message({
|
|
|
+ message: "大于购买人数，不可继续添加",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
return;
|
|
|
- }else{
|
|
|
- this.selectedList.push(val);
|
|
|
}
|
|
|
- }else{
|
|
|
- this.selectedList = this.selectedList.concat(val);
|
|
|
}
|
|
|
- },
|
|
|
- selectGroup(val,i){
|
|
|
+
|
|
|
+ let newArr = this.selectedList.filter(x => {
|
|
|
+ return val.user_id == x.user_id;
|
|
|
+ });
|
|
|
+ if (newArr.length > 0) {
|
|
|
+ this.$message({ message: "该人员已添加", type: "warning" });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.selectedList.push(val);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.selectedList = this.selectedList.concat(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectGroup(val, i) {
|
|
|
// val.status = true;
|
|
|
let newVal = this.judgeHeavy(val);
|
|
|
let newSelect = this.selectedList.concat(newVal);
|
|
|
- if(this.currentIndex == 0){
|
|
|
- if(val.status == "selectAll"){
|
|
|
- this.$message({ message: '该人员已添加',type: 'warning'});
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.selectedList.length >= this.personList.quota){
|
|
|
- this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if(newSelect.length > this.personList.quota){
|
|
|
- if(newVal.length>1){
|
|
|
- this.$message({ message: '大于可添加的人数,请单个添加',type: 'warning'});
|
|
|
- }else{
|
|
|
- this.$message({ message: '大于购买人数，不可继续添加',type: 'warning'});
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- this.personList.list.splice(i,1,val)
|
|
|
- this.chooseUser(newVal)
|
|
|
- },
|
|
|
- //删除人员
|
|
|
- delChooseUser(i){
|
|
|
- this.selectedList.splice(i,1);
|
|
|
- },
|
|
|
- //添加人员
|
|
|
- saveDepart(){
|
|
|
- let delId = '';
|
|
|
- this.selectedList.forEach((v,i) =>{
|
|
|
- if(v.user_id){
|
|
|
- i === 0 ? delId += `${v.user_id}` : delId += `,${v.user_id}`
|
|
|
+ if (this.currentIndex == 0) {
|
|
|
+ if (val.status == "selectAll") {
|
|
|
+ this.$message({ message: "该人员已添加", type: "warning" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.selectedList.length >= this.personList.quota) {
|
|
|
+ this.$message({
|
|
|
+ message: "大于购买人数，不可继续添加",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (newSelect.length > this.personList.quota) {
|
|
|
+ if (newVal.length > 1) {
|
|
|
+ this.$message({
|
|
|
+ message: "大于可添加的人数,请单个添加",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "大于购买人数，不可继续添加",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.personList.list.splice(i, 1, val);
|
|
|
+ this.chooseUser(newVal);
|
|
|
+ },
|
|
|
+ //删除人员
|
|
|
+ delChooseUser(i) {
|
|
|
+ this.selectedList.splice(i, 1);
|
|
|
+ },
|
|
|
+ //添加人员
|
|
|
+ saveDepart() {
|
|
|
+ let delId = "", idStr = [];
|
|
|
+ this.selectedList.forEach((v, i) => {
|
|
|
+ idStr.push(v.user_id);
|
|
|
+ if (v.user_id) {
|
|
|
+ i === 0 ? (delId += `${v.user_id}`) : (delId += `,${v.user_id}`);
|
|
|
+ }
|
|
|
+ });
|
|
|
let arr = [];
|
|
|
this.selectedList.forEach(v => {
|
|
|
arr.push(v.username);
|
|
|
- })
|
|
|
+ });
|
|
|
let i = this.$parent.cellIndex;
|
|
|
if (arr.length) {
|
|
|
- this.$parent.tableData[i].persons = String(arr.join(",").replace(/,/g, "、"));
|
|
|
+ if (this.$parent.quType == "pe") {
|
|
|
+ this.$parent.addForm.people = String(
|
|
|
+ arr.join(",").replace(/,/g, "、")
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$parent.tableData[i].persons = String(
|
|
|
+ arr.join(",").replace(/,/g, "、")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.$emit('idPeole',idStr);
|
|
|
+ console.log(idStr)
|
|
|
}
|
|
|
this.centerDialogVisible = false;
|
|
|
- },
|
|
|
- toggle(val,i){
|
|
|
- val.toggle = !val.toggle;
|
|
|
- this.personList.list.splice(i,1,val)
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ toggle(val, i) {
|
|
|
+ val.toggle = !val.toggle;
|
|
|
+ this.personList.list.splice(i, 1, val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .ent_powerPerson{
|
|
|
- .el-dialog__header{
|
|
|
- font-size: 26px;
|
|
|
- color: $weight_color;
|
|
|
+.ent_powerPerson {
|
|
|
+ .el-dialog__header {
|
|
|
+ font-size: 26px;
|
|
|
+ color: $weight_color;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .content_left,
|
|
|
+ .content_right {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ }
|
|
|
+ .content_left {
|
|
|
+ h4 {
|
|
|
+ padding: 14px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $weight_color;
|
|
|
}
|
|
|
- .content{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .content_left,.content_right{
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
- border-radius: 6px;
|
|
|
- margin: 0 5px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- border: 1px solid #ECECEC;
|
|
|
+ .search {
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 360px;
|
|
|
+ .el-input-group {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid $border_color;
|
|
|
+ border-radius: 18px;
|
|
|
+ .el-input-group__prepend {
|
|
|
+ border-radius: 18px 0 0 18px;
|
|
|
+ background: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 0 12px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ margin-top: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 0px 18px 18px 0;
|
|
|
+ padding: 0 4px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .allList {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ > div {
|
|
|
+ h5,
|
|
|
+ .itemList > div {
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
- .content_left{
|
|
|
- h4{
|
|
|
- padding: 14px 20px ;
|
|
|
- font-size: 14px;
|
|
|
- color: $weight_color;
|
|
|
+ h5 {
|
|
|
+ margin-top: 16px;
|
|
|
+ color: $weight_color;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > span {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .search{
|
|
|
- margin-left: 20px;
|
|
|
- width: 360px;
|
|
|
- .el-input-group{
|
|
|
- width: 100%;
|
|
|
- border: 1px solid $border_color;
|
|
|
- border-radius: 18px;
|
|
|
- .el-input-group__prepend{
|
|
|
- border-radius: 18px 0 0 18px;
|
|
|
- background: #fff;
|
|
|
- border:none;
|
|
|
- padding: 0 12px;
|
|
|
- img{
|
|
|
- width: 24px;
|
|
|
- margin-top: 6px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-input__inner{
|
|
|
- border: none;
|
|
|
- height: 36px;
|
|
|
- border-radius: 0px 18px 18px 0;
|
|
|
- padding: 0 4px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .seleced {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
- .allList{
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- >div{
|
|
|
- h5,.itemList>div{
|
|
|
- padding: 0 20px;
|
|
|
- line-height: 40px;
|
|
|
- box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
- h5{
|
|
|
- margin-top: 16px;
|
|
|
- color: $weight_color;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- >span{
|
|
|
- flex: 1;
|
|
|
- margin-left: 10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .seleced{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .selectAll{
|
|
|
- border:none;
|
|
|
- background: url(../../../assets/images/checked.png) no-repeat center center;
|
|
|
- background-size: 20px;
|
|
|
- }
|
|
|
- .selectHalf{
|
|
|
- border:none;
|
|
|
- background: url(../../../assets/images/half.png) no-repeat center center;
|
|
|
- background-size: 20px;
|
|
|
- }
|
|
|
- .el-icon-arrow-down{
|
|
|
- font-size: 16px;
|
|
|
- color: #aaa;
|
|
|
- }
|
|
|
- }
|
|
|
- .itemList{
|
|
|
- transition: all 0.5s ;
|
|
|
- opacity: 1;
|
|
|
- max-height:4000px;
|
|
|
- >div{
|
|
|
- cursor: pointer;
|
|
|
- color: $normal_color;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span{
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
- .userName{
|
|
|
- margin-right: auto;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- background: #F5F5FB;
|
|
|
- }
|
|
|
- }
|
|
|
- &.toggle{
|
|
|
- max-height: 0px!important;
|
|
|
- opacity: 0;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ .selectAll {
|
|
|
+ border: none;
|
|
|
+ background: url(../../../assets/images/checked.png) no-repeat
|
|
|
+ center center;
|
|
|
+ background-size: 20px;
|
|
|
}
|
|
|
- }
|
|
|
- .content_right{
|
|
|
- h4{
|
|
|
- padding: 14px 15px;
|
|
|
- font-size: 14px;
|
|
|
- color: $weight_color;
|
|
|
+ .selectHalf {
|
|
|
+ border: none;
|
|
|
+ background: url(../../../assets/images/half.png) no-repeat center
|
|
|
+ center;
|
|
|
+ background-size: 20px;
|
|
|
}
|
|
|
- ul{
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- li{
|
|
|
- float: none;
|
|
|
- padding: 0 20px;
|
|
|
- box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
- line-height: 40px;
|
|
|
- color: $normal_color;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span{
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
- .userName{
|
|
|
- margin-right: auto;
|
|
|
- }
|
|
|
- i{
|
|
|
- cursor: pointer;
|
|
|
- font-size: 24px;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-icon-arrow-down {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #aaa;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- p{
|
|
|
- color: $light_color;
|
|
|
- line-height: 24px;
|
|
|
- padding: 20px 0 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- button{
|
|
|
- width: 132px;
|
|
|
- height: 36px;
|
|
|
- background: transparent;
|
|
|
- border-radius: 6px;
|
|
|
- margin: 0 20px;
|
|
|
- font-size: 16px;
|
|
|
- &:active{
|
|
|
- opacity: 0.8;
|
|
|
+ .itemList {
|
|
|
+ transition: all 0.5s;
|
|
|
+ opacity: 1;
|
|
|
+ max-height: 4000px;
|
|
|
+ > div {
|
|
|
+ cursor: pointer;
|
|
|
+ color: $normal_color;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .userName {
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #f5f5fb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.toggle {
|
|
|
+ max-height: 0px !important;
|
|
|
+ opacity: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .save{
|
|
|
- border: 1px solid $light_color;
|
|
|
- color: $light_color;
|
|
|
+ }
|
|
|
+ .content_right {
|
|
|
+ h4 {
|
|
|
+ padding: 14px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $weight_color;
|
|
|
}
|
|
|
- .cancle{
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
+ ul {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ li {
|
|
|
+ float: none;
|
|
|
+ padding: 0 20px;
|
|
|
+ box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ line-height: 40px;
|
|
|
color: $normal_color;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .userName {
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #aaaaaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+ p {
|
|
|
+ color: $light_color;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 20px 0 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ width: 132px;
|
|
|
+ height: 36px;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 0 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .save {
|
|
|
+ border: 1px solid $light_color;
|
|
|
+ color: $light_color;
|
|
|
+ }
|
|
|
+ .cancle {
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ color: $normal_color;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Mr.ding