ocpview-plus 0.0.1

package/src/components/masterplate/approval.vue

@@ -0,0 +1,803 @@
+<template>
+  <div>
+    <Modal  title="人员列表" width="660" v-model="showuser">
+         <Row style="margin-bottom:14px" type="flex"  justify="start" align="middle" >
+                <Col span='6' v-if="!showapproval">
+                  已选抄送人:<span style="color:#AF292E">{{selectuserdata.length}}</span><span v-text="info"></span> 
+                </Col>
+                 <Col span='6' v-if="showapproval">
+                  已选审批<span v-text="info"></span> :<span style="color:#AF292E">{{selectuserdata.length}}</span><span v-text="info"></span> 
+                </Col>
+                <Col span='18'>
+                    <Row type="flex"  justify="end" align="middle" >
+                            <Button type="text" custom-icon="iconfont icon-custom-quanshan"    @click="delAll" >全部删除</Button>
+                     </Row>   
+                </Col>
+        </Row>
+        <Row type="flex" justify="start" style="min-height:82px;border:1px dashed #DCDFE6;padding:10px">
+            <Tag  v-for="(item,index) in selectuserdata" :key="'tag_' + index" :name="item.userCode" closable  @on-close="closeCommon(item.userCode,'selectuserdata')" style="margin-right:8px"> {{item.userName}}</Tag>
+        </Row>
+        <Card style="margin-top:16px;" :padding="0" dis-hover>
+            <template #title>
+            <Row v-if="!showapproval"  type="flex"  justify="start" align="middle" >
+                <Col span='4'>
+                  已勾选:<span style="color:#AF292E">{{select.length}}</span><span v-text="info"></span> 
+                </Col>
+                <Col span='20'>
+                    <Row type="flex"  justify="end" align="middle" >
+                        <Input  placeholder="请输入用户名称/工号/手机号"  v-model="searchValue"  search style="width: 380px;border-radius:20px;margin-top:10xp" @on-search="searchUser" @on-enter="searchUser"/>
+                    </Row>   
+                </Col>
+            </Row>
+             <Row  v-else type="flex"  justify="start" align="middle" >
+                <Col span='8'>
+                   <RadioGroup v-model="selectType" @on-change="selectTypeChange">
+                        <Radio label="USER">
+                         <span>审批人</span>
+                        </Radio>
+                        <Radio label="USERGROUP">
+                            <span>岗位</span>
+                        </Radio>
+                    </RadioGroup>
+                </Col>
+                <Col span='16'>
+                    <Row type="flex"  justify="end" align="middle" >
+                       <Input  placeholder="请输入编码/名称"  v-model="searchValue"  search style="width: 380px;border-radius:20px;margin-top:10xp" @on-search="searchStation" @on-enter="searchStation"/>
+                    </Row>
+                </Col>
+            </Row>
+            </template>
+             <CheckboxGroup class="checkbox-group" name="user" v-model="select" style="max-height:250px;padding-left:14px" @on-change="selectUser">
+              <div class="checkbox" v-for='(item,index) in userdata'  :key="'checkbox_' + index" >
+                <Checkbox :label='item.userCode' class="checkboxrow"  >
+                  <div style="display: flex; align-items: center;">
+                    <div class='icon'>
+                        <div >{{item.userName}}</div>
+                    </div>
+                    <div class='uname'>{{item.userName}}</div>
+                    </div>
+                </Checkbox>
+              </div>
+            </CheckboxGroup>
+        </Card>
+        <template #footer>
+         <div>
+            <Row type="flex" justify="end" align="middle"  :gutter="8">
+                <Col>
+                    <Button style="width:66px"  @click="userCancel" >取消</Button>
+                </Col>
+                <Col>
+                    <Button  style="width:66px;margin-left:14px" type="info"  @click="userOk" >确认</Button>
+                </Col>
+            </Row>
+        </div>
+        </template>    
+    </Modal>
+    <Drawer class-name="efutureapproval" title="工作流" v-model="showDrawer" :width="534">
+        <div class="drawer-box">
+            <div ref="head">
+                <div class="work-head">
+                    <span>单据编号：{{value.billno}}</span>
+                    <span>状态：{{value.statusName}}</span>
+                </div>
+                <div v-if='copyuser.length > 0' class="work-head">
+                    <span>已抄送：<span><Tag v-for="(item,index) in copyuser"  :key="'taguser_' + index" style="margin-left:10px">{{item.name}}</Tag> </span></span>
+                </div>
+                <p class="title"><span class="text">审批日志</span></p>
+            </div>
+            <div :style="contentStyle">
+                <ul class="content">
+                    <li class="log-list" v-for="(item,index) in auditLog" :key="index">
+                        <div class="line-wrap"></div>
+                        <div class="left">
+                            <template v-if="item.mulflag === 'N'">
+                                <span>{{item.username}}</span>
+                            </template>
+                                <template v-else>
+                                    <Icon custom="iconfont icon-custom-approve"   size="20" color="#fff"/>
+                                </template>
+                            <div class="icon-wrap">
+                                <Icon  v-if="item.act_status_ === 'Y'" custom="iconfont icon-custom-wancheng" color="#739943" />
+                                <Icon  v-else-if="item.act_status_ === 'M' || item.act_status_ === 'A'" custom="iconfont icon-custom-daishenpi" color="#f3b352" />
+                                <Icon  v-else-if="item.act_status_ === 'N'" color="#9a9b9d" custom="iconfont icon-custom-chehui" />
+                                <Icon  v-else custom="iconfont icon-custom-weishenpi"  color="#ef6e73" />
+                            </div>
+                        </div>
+                        <div class="right">
+                            <p class="top">
+                                <span style="font-size:16px;font-weight">{{item.describe_}}</span>
+                                <span class="status">{{item.act_status_name}}</span>
+                            </p>
+                            <div>
+                                <span>{{item.act_time_}}</span>
+                                <p class="desc">意见：<span v-text="getMessage(item.message)"></span></p>
+                            </div>
+                            <div class="card" v-if="item.tasklist.length > 1">
+                                <ul class="main">
+                                    <Row type="flex" justify="start" :gutter="16">  
+                                    <Col v-for="(tmp, index2) in item.tasklist"  :key="'task_' + index2" v-show="index2 < maxUser || (index2 >= maxUser && tmp.active)" >
+                                        <li class="user-list">
+                                        <div class="user">
+                                            <span>{{tmp.username}}</span>
+                                            <div class="icon-wrap">
+                                                <Icon  v-if="item.status === 'Y'" custom="iconfont icon-custom-wancheng" color="#739943" />
+                                                <Icon  v-else-if="item.status === 'M' || item.status === 'A'" custom="iconfont icon-custom-daishenpi" color="#f3b352" />
+                                                <Icon  v-else-if="item.status === 'N'" color="#9a9b9d" custom="iconfont icon-custom-chehui" />
+                                                <Icon  v-else custom="iconfont icon-custom-weishenpi"  color="#ef6e73" />
+                                            </div>
+                                        </div>
+                                        <p style="z-index:99">{{tmp.username}}</p>
+                                        </li>
+                                    </Col>
+                                    </Row>
+                                </ul>
+                                <Row v-if="item.tasklist > maxUser" type="flex" justify="center" align="middle"> 
+                                        <Col>
+                                        <Button  v-if="!item.active" icon="ios-arrow-down" type="text"  @click="showGroupUser(index)">展开 </Button>
+                                            <Button  v-if="item.active" icon="ios-arrow-up" type="text" @click="showGroupUser(index)"> 收起</Button>
+                                        </Col>
+                                    </Row>    
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+             </div>
+        </div>
+        <div ref="foot" class="footer">
+            <Form  v-show="showBtn" :label-width="45">
+                <FormItem label="抄送:">
+                    <Row type="flex" justify="start" align="middle" >
+                        <Col span='2'>
+                            <span style="color:#AF292E"> {{copy.length}}</span> <span>人</span>
+                        </Col>
+                        <Col span='22'>
+                            <Row type="flex" justify="end" align="middle">
+                                <p  @click.stop="addUser" style="cursor:pointer">
+                                        <Icon custom="iconfont icon-custom-add" size="12" color="#AF292E"/>
+                                        <span style="margin-left:9px;color:#AF292E;font-size:14px"> 添加抄送人 </span>
+                                </p>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <Row type="flex" justify="start" align="middle"  style="height:42px;border:1px solid #DCDFE6">
+                        <Tag  v-for="(item,index) in copy"  :key="'tag2_' + index" :name="item.userCode" style="margin-left:8px"> {{item.userName}}</Tag>
+                    </Row>
+                </FormItem>
+                 <FormItem v-show="false" label="审批:">
+                    <Row type="flex" justify="start" align="middle" >
+                        <Col span='2'>
+                            <span style="color:#AF292E;cursor:pointer"> {{approvals.length}}</span> <span v-text="info2"></span> 
+                        </Col>
+                        <Col span='22'>
+                            <Row type="flex" justify="end" align="middle">
+                                <p  @click.stop="addApproval" style="cursor:pointer">
+                                        <Icon custom="iconfont icon-custom-add" size="12" color="#AF292E"/>
+                                        <span style="margin-left:9px;color:#AF292E;font-size:14px"> 添加审批人 </span>
+                                </p>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <Row type="flex" justify="start" align="middle"  style="height:42px;border:1px solid #DCDFE6">
+                        <Tag  v-for="(item,index) in approvals"  :key="'tag3_' + index"  :name="item.userCode" style="margin-left:8px"> {{item.userName}}</Tag>
+                    </Row>
+                </FormItem>
+                <FormItem label="意见:">
+                    <Input v-model="idea" type='textarea' :autosize="rowsConfig"></Input>
+                </FormItem>
+            </Form>
+            <Row type="flex" v-if="showBtn" justify="end"  :gutter="10"  style="padding-top:20px;padding-bottom:4px">
+                <Col v-if="showSubmit">
+                    <Button  customIcon="iconfont icon-custom-submit"  @click="onSubmit" >提交</Button>   
+                </Col>
+                 <Col v-if="showReset">
+                    <Button  customIcon="iconfont icon-custom-recall"  @click="billBack" >撤回</Button>   
+                </Col>
+                <Col v-show="false">
+                    <Button  customIcon="iconfont icon-custom-jiaqian"  @click="billBack" >加签</Button>   
+                </Col>
+                 <Col v-if="showReject">
+                    <Button  customIcon="iconfont icon-custom-reject"  @click="reject" >驳回</Button>   
+                </Col>
+                 <Col v-if="showApprove">
+                    <Button  customIcon="iconfont icon-custom-approve"  @click="submitApprove" >审批</Button>   
+                </Col>
+            </Row>
+        </div>   
+    </Drawer>
+  </div> 
+</template>
+
+<script>
+import elementResizeDetectorMaker from 'element-resize-detector'
+import load from '@/components/base/load';
+import size from '@/components/base/size';
+export default {
+    name: 'mapprovalbox',
+    mixins: [load,size],
+    data() {
+        return {
+            myConfig: {
+                resources: '',
+                classPrefix: '',
+            },
+            value: {
+                billmoduleid: '',
+                billno: '',
+                billstatus: '',
+                statusName: ''
+            },
+            buttonlist:[],
+            auditLog: [],
+            copyuser: [],
+            isSub: false,
+            showuser: false,
+            isSubmit: false,
+            showBtn:true,
+            selectType: 'USER',
+            list: [],
+            select: [],
+            showSubmit: false,
+            showDrawer:false,
+            showApprove:false,
+            showReject:false,
+            showReset:false,
+            copy:[],
+            approvals:[],
+            idea:'',
+            rowsConfig:{ minRows: 3, maxRows: 6 },
+            maxUser:6,
+            extraHeight:0,
+            extraHeight2:0,
+            userdata:[],
+            searchValue:'',
+            selectuserdata:[],
+            showapproval:false,
+            curlSelectType:'USER'
+        };
+    },
+    created() {
+        this.myConfig = Object.assign({}, this.myConfig, this.config); 
+    },
+    computed: {
+        contentStyle () {
+            let height = this.$Store.state.app.clientHeight;
+            if (this.extraHeight) {
+                height =  height - Number(this.extraHeight);
+            }
+            if (this.extraHeight2) {
+                height =  height - Number(this.extraHeight2);
+            }
+            height = height - 90;
+            return 'overflow-y: auto;max-height:' + height + 'px;';
+        },
+        info () {
+            if (this.selectType === 'USER') {
+                return '人';
+            } else {
+                return '组';
+            }
+        },
+        info2 () {
+            if (this.curlSelectType === 'USER') {
+                return '人';
+            } else {
+                return '组';
+            }
+        }
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+    },
+    methods: {
+        onSubmit() {
+            this.billSubmit();
+        },
+        setData(config) {
+            this.clearData();
+            this.$nextTick(() => {
+                this.value ={};
+                Object.assign(this.value, config);
+                this.getAuditLog();
+                if (this.value.billstatus === 'S') {
+                    // this.getSubuser();
+                }
+                //this.initBtn();
+            });
+        },
+        initBtn () {
+            if (this.value.billstatus === 'N') {
+                this.showSubmit = true;
+            } else {
+                this.showSubmit = false;
+            }
+            if (this.value.billstatus !== 'N' && this.value.billstatus !== 'S' && this.value.billstatus !== 'R' && this.value.billstatus !== 'A') {
+                this.showBtn = false;
+            } else {
+                this.showBtn = true;
+            }
+        },
+        clearData() {
+            this.auditLog = [];
+            this.selectType ='USER';
+            this.curlSelectType ='USER';
+            this.selectuserdata = [];
+            this.userdata = [];
+            this.select = [];
+            this.idea = '';
+            this.approvals = [];
+        },
+        getSubuser() { // 获取提交人
+            this.isSub = false;
+            this.doPost(
+        '.getBillSubmitter',
+        {billno: this.value.billno, modecode: this.value.billmoduleid},
+        (data) => {
+            let usercode  = this.getUserCode();
+            if (data == usercode) {
+                this.isSub = true;
+            }
+        }
+      );
+        },
+        getAuditLog() { // 获取审批日志
+         this.showSubmit = false;
+         this.showReset = false;
+         this.showReject = false;
+         this.showApprove = false;
+          this.doPost(
+        '.getProcessList',
+        {billno: this.value.billno, modecode: this.value.billmoduleid},
+        (data) => {
+            if (data.procinfo && data.procinfo.proclist) {
+                let result = data.procinfo.proclist || [];
+                let copylist = [];
+                if (data.procinfo.cc && data.procinfo.cc.length > 0) {
+                    data.procinfo.cc.forEach(item => {
+                        let tmp = {};
+                        tmp.active = false;
+                        tmp.copyuser = item;
+                        tmp.name = item.substr(-2, 2);
+                        copylist.push(tmp);
+                    });
+                }
+                result.forEach(item => {
+                    item.active = false;
+                    item.tasklist.forEach(list => {
+                        if (list.usernam) {
+                            list.userName = list.username.substr(-2, 2);
+                        }
+                    });
+                });
+               
+
+                if (data.procinfo.btnlist) {
+                    data.procinfo.btnlist.forEach(el => {
+                        if (el === '提交') {
+                            this.showSubmit = true;
+                        }
+                        if (el === '撤回') {
+                            this.showReset = true;
+                        }
+                        if (el === '驳回') {
+                            this.showReject = true;
+                        }
+                        if (el === '审批') {
+                            this.showApprove = true;
+                        }
+                    })
+                }
+
+                this.auditLog = result;
+                this.copyuser = copylist || [];
+            }
+            if (this.showSubmit || this.showReset || this.showApprove || this.showReject) {
+                this.showBtn = true;
+            } else {
+                this.showBtn = false;
+            }
+        }
+      );
+        },
+        showGroupUser(index) {
+            this.auditLog[index].active = !this.auditLog[index].active;
+        },
+        billBack() { // 审批撤回
+            this.doPost(
+        '.billrepeal',
+        {billno: this.value.billno},
+        (data) => {
+            this.alert(data.msg,null,3);
+            this.showDrawer = false;
+        }
+      );
+        },
+        reject() { // 审批驳回
+            if (!this.idea) {
+                this.alert('意见不能为空',null,1);
+                return;
+            }
+            let para = {};
+            para = {billno: this.value.billno,comment: this.idea};
+            this.doCc(para);
+            this.doPost(
+                '.billreject' ,
+                para,
+                (data) => {
+                    this.showDrawer = false;
+                    this.alert(data.msg,null,3);
+                }
+            );
+        },
+        doCc (param) {
+            if (this.copy.length > 0) {
+                let cc = [];
+                this.copy.forEach(el => {
+                    cc.push(el.usercode);
+                });
+                param.cc = cc;
+            }
+        },
+        billSubmit() {
+            let param = {
+                billno: this.value.billno
+            };
+            this.doCc();
+            if (this.idea) {
+                param.comment = this.idea;
+            }
+            this.doPost(
+        '.billsubmit',
+        param,
+        (data) => {
+            this.showDrawer = false;
+            this.$nextTick(() =>{
+                setTimeout(() => {
+                    this.alert(data.msg,null,3);
+                }, 250);
+            });
+        }
+        );
+        },
+        submitApprove() {
+            this.doPost(    
+                '.billapproval',
+                {billno: this.value.billno,comment: this.idea},
+                (data) => {
+                    this.showDrawer = false;
+                    this.alert(data.msg,null,3);
+                });
+        },
+        addAuditUser() {
+            if (!this.idea) {
+                this.alert('意见不能为空',null,1);
+                return;
+            }
+            if (this.approvals.length === 0) {
+                this.alert('审批人不能为空');
+                return;
+            } 
+            let param = {
+                billno: this.value.billno,
+                userid: this.getUserCode(),
+                comment: this.idea
+            };
+            param.addTaskInfo = {};
+            param.addTaskInfo.type = this.curlSelectType;
+            param.addTaskInfo.list = []
+            this.approvals.forEach(el => {
+                 param.addTaskInfo.list.push(el.userCode);
+            })
+            this.doCc();
+            this.doPost(
+                '.billaddtask',
+                param,
+                (data) => {
+                    this.alert(data.msg,null,3);
+           
+            }
+      );
+        },
+        doPost(method,postData,SuccessFun) {
+            let self = this;
+            this.showLoading();
+            self.asyncPost(this.myConfig.resources, this.myConfig.classPrefix + method, postData, function(data){
+                SuccessFun(data);
+                self.hideLoading();
+            },function(data) {
+                self.hideLoading();
+                self.$nextTick(() =>{
+                    setTimeout(() => {
+                        self.alert(data,null,2);
+                    }, 250);
+                });
+            },function(data) {
+                self.hideLoading();
+                self.$nextTick(() =>{
+                    setTimeout(() => {
+                        self.alert(data,null,2);
+                    }, 250);
+                });
+            });
+        },
+        open () {
+            this.showDrawer = true; 
+        },
+        addUser() {
+            this.userdata = [];
+            this.searchValue = '';
+            this.selectuserdata = this.$Method.copy(this.copy);
+            this.showuser = true;
+            this.showapproval = false;
+            this.selectType = 'USER';
+        },
+        getMessage(msg) {
+            if (msg) {
+                return msg;
+            } else {
+                return '-';
+            }
+        },
+        setExtraHeight () {
+            let height = 0;
+            if (this.$refs.head) {
+                height = this.$refs.head.offsetHeight;
+            }
+            this.extraHeight = height;
+        },
+        setExtraHeight2 () {
+            let height = 0;
+            if (this.$refs.foot) {
+                height = this.$refs.foot.offsetHeight;
+            }
+            this.extraHeight2 = height;
+        },
+        searchUser() {
+            this.getCopyUserData();
+        },
+        getCopyUserData () {
+            if (!this.searchValue) {
+                this.alert("查询内容不能为空");
+                return;
+            }
+            let para = {};
+            para.searchValue = this.searchValue;
+            para.status= [0,1];
+            para.page_size = 999;
+            this.userdata = [];
+            let self = this;
+            this.asyncPost(this.OmdUrl.amp, 'usercenter.account.search', para, function (data) {
+                if (data.account) {
+                    self.userdata = data.account;
+                }
+            });
+        },
+        getStationData () {
+            if (!this.searchValue) {
+                this.alert("查询内容不能为空");
+                return;
+            }
+            let para = {};
+            para.searchValue = this.searchValue;
+            para.page_size = 999;
+            this.userdata = [];
+            let self = this;
+            this.asyncPost(this.OmdUrl.amp, 'usercenter.station.search', para, function (data) {
+                if (data.station) {
+                    let station = [];
+                    data.station.forEach(el => {
+                        let tmp = {};
+                        tmp.userCode = el.stationCode;
+                        tmp.userName = el.stationName;
+                        station.push(tmp);
+                    })
+                    self.userdata = station;
+                }
+            });
+        },
+        selectUser(obj) {
+            this.initSelectUserData(obj);
+        },
+        initSelectUserData(tmp) {
+            let temp = [];
+            tmp.forEach(el => {
+                let index = this.userdata.findIndex(el2 => el2.userCode === el);
+                if (index > -1) {
+                    temp.push(this.$Method.copy(this.userdata[index]));
+                }
+            });
+            let temp2 = [];
+            this.selectuserdata.forEach(el => {
+                let index = this.userdata.findIndex(el2 => el2.userCode === el.userCode);
+                if (index > -1) {
+                    let index2 = temp.findIndex(el3 => el3.userCode === el.userCode);
+                    if (index2 > -1) {
+                        temp2.push(this.$Method.copy(el)); 
+                    }
+                } else {
+                    temp2.push(this.$Method.copy(el)); 
+                }
+            });
+            temp.forEach(el => {
+                let index = temp2.findIndex(el2 => el.userCode === el2.userCode);
+                if (index === -1) {
+                    temp2.push(this.$Method.copy(el))
+                }
+            })
+            this.selectuserdata = temp2;
+        },        
+        userCancel() {
+            this.showuser = false;
+        },
+        userOk(){
+            if (this.showapproval) {
+                this.approvals = this.$Method.copy(this.selectuserdata);
+                this.curlSelectType = this.selectType;
+            } else {
+                this.copy = this.$Method.copy(this.selectuserdata);
+           
+            }
+            this.showuser = false;
+        },
+        addApproval(){
+            this.userdata = [];
+            this.searchValue = '';
+            this.selectuserdata = this.$Method.copy(this.approvals);
+            this.showapproval = true;
+            this.showuser = true;
+            this.selectType = this.curlSelectType;
+        },
+        closeCommon(usercode,name) {
+            let index = this[name].findIndex(el => el.userCode === usercode);
+            if (index > -1) {
+                this[name].splice(index,1);
+            }
+        },
+        delAll() {
+            this.selectuserdata = [];
+        },
+        searchStation() {
+            this.getStationData();
+        },
+        clearUser() {
+            this.userdata = [];
+            this.selectuserdata = [];
+            this.searchValue = '';
+        },
+        selectTypeChange() {
+            this.clearUser();
+        }
+    },
+    mounted () {
+        this.observer = elementResizeDetectorMaker();
+        if (this.$refs.head) {
+            this.observer.listenTo(this.$refs.head, this.setExtraHeight);
+        }
+        if (this.$refs.foot) {
+            this.observer.listenTo(this.$refs.foot, this.setExtraHeight2);
+        }
+    },
+    beforeUnmount() {
+        if (this.$refs.head) {
+            this.observer.removeListener(this.$refs.head, this.setExtraHeight);
+        }
+        if (this.$refs.foot) {
+            this.observer.removeListener(this.$refs.foot, this.setExtraHeight2);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.efutureapproval .content .line-wrap::after{
+    position: absolute;
+    content:'';
+    width: 1px;
+    height: calc(100% - 42px);
+    background-color: #eee;
+}
+.checkbox-group {
+  height: 390px;
+  overflow-y: auto;
+}
+
+.checkbox-group .checkbox{
+  padding: 5px 0;
+}
+
+.checkbox .icon{
+  width: 35px;
+  height: 35px;
+  color: #fff;
+  line-height: 35px;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 50%;
+  margin: 0 10px;
+  background-color: #AF292E;
+}
+
+.checkbox .uname{
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.checkboxrow {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+
+.username,
+.user-item {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  line-height: 38px;
+  color: #fff;
+  margin-right: 17px;
+  border-radius: 50%;
+  background-color: #3389ff;
+}
+
+.username .icon,
+.user-item .icon {
+  position: absolute;
+  bottom: -1px;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  line-height: 14px;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.user-item .icon {
+  width: 15px;
+  height: 15px;
+}
+
+.username .icon .iconfont {
+  font-size: 15px;
+}
+
+.user-item .icon .iconfont {
+  font-size: 15px;
+}
+.checkboxrow {
+    .ivu-checkbox-label-text {
+        display: flex;
+        align-items: center
+    }
+}
+
+.user-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.user-list .user-list-wrap {
+  display: flex;
+  margin: 10px 0px;
+  align-items: center;
+}
+
+.user-list-wrap .name {
+  color: #808385;
+}
+
+
+.user-item {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  margin-right: 0;
+  line-height: 40px;
+}
+</style>