|
|
<template>
|
|
|
<div class="g-components-item">
|
|
|
<div class="m-set g_bg_f g_radius_8" :style="{ borderRadius: list[0] && list[0].radius == 'no_top' ? '0 0 8px 8px' : list[0] && list[0].radius == 'no_bottom' ? '8px 8px 0 0 ' : '' ,overflow: 'hidden'}">
|
|
|
<block v-for="(item, index) in list" :key="index">
|
|
|
<div
|
|
|
class="item g_flex_row_start"
|
|
|
:style="{
|
|
|
'padding-top': (item.pColumn ? item.pColumn : 19) + 'px',
|
|
|
'padding-bottom': (item.pColumn ? item.pColumn : 19) + 'px',
|
|
|
'padding-left': (item.pRow ? item.pRow : 10) + 'px',
|
|
|
'padding-right': (item.pRow ? item.pRow : 10) + 'px',
|
|
|
}"
|
|
|
v-if="item"
|
|
|
>
|
|
|
<div class="g_flex_none g_pr_10 g_flex_column_center">
|
|
|
<div class="g_flex_1 g_flex_row_start">
|
|
|
<div class="t-icon g_h_22 g_w_22 g_pl_7 g_mr_5" style="width: 22px; height: 22px" v-if="item.icon" :class="'t-' + item.icon"></div>
|
|
|
<div
|
|
|
class="g_flex_column_center g_c_3 g_fs_16"
|
|
|
:class="{
|
|
|
labelRequire: item.require,
|
|
|
customRequire: item.customRequire,
|
|
|
}"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_1 g_flex_column_center">
|
|
|
<div class="g_flex_row_end 1" style="width: 100%">
|
|
|
<slot></slot>
|
|
|
<div class="g_flex_row_end 2 from-type" style="width: 100%">
|
|
|
<!-- 通用类型 -->
|
|
|
<div class="form-base g_fs_16 g_ell_1 g_lh_1_2 g_w_all g_text_r g_flex_1" :class="item.fontColor" v-if="item.result" @click="handleResult(item)">{{ item.result }}</div>
|
|
|
<!-- 迷你二维码 -->
|
|
|
<div class="form-wx-code g_flex_rowRight_columnCenter" v-if="item.tip == 'code'">
|
|
|
<i class="iconfont icon-a-erweimabeifen2 g_fs_21 g_c_c" style="font-size: 21px"></i>
|
|
|
</div>
|
|
|
<!-- 头像类 -->
|
|
|
<div class="form-avatar g_flex_rowRight_columnCenter" v-if="item.tip == 'avatar'">
|
|
|
<img :src="item.value" alt="" class="g_w_48 g_h_48 g_radius_50" />
|
|
|
</div>
|
|
|
<!-- 上传图片头像类 -->
|
|
|
<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
|
|
|
<button v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0" @click="handleOpenAvatar">
|
|
|
<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32" />
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</button>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
<!-- handleStartChangeAvatar -->
|
|
|
<button @click="handleOpenAvatar" v-if="item.tip == 'update-avatar'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0">
|
|
|
<img :src="item.value || localBaseImg + 'default.svg'" class="g_w_32 g_h_32" />
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</button>
|
|
|
<button @click="uploadQRCode" v-if="item.tip == 'update-QRCode'" aria-role="button" class="from-wx-avatar g_flex_rowRight_columnCenter g_bg_f g_w_all" style="padding-right: 0px; margin: 0">
|
|
|
<img :src="item.img || localBaseImg + 'default.svg'" class="g_w_48 g_h_48 g_radius_4" />
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</button>
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- 指定输入框。场景：当有多个list时使用；若list只有一个，使用slot即可 -->
|
|
|
<div
|
|
|
:style="{
|
|
|
width: item.type != 'slot' ? 'calc(100% - 16px)' : item.tip == 'slot-choose-address' ? 'calc(100% - 22px)' : '100%',
|
|
|
}"
|
|
|
class="form-code"
|
|
|
v-if="item.tip && item.tip.indexOf('slot') > -1"
|
|
|
>
|
|
|
<!-- 验证码() -->
|
|
|
<div class="g_flex_column_center" v-if="item.tip == 'slot-code'">
|
|
|
<div class="g_flex_row_end">
|
|
|
<div class="g_flex_1 g_mr_16">
|
|
|
<u-input maxlength="4" type="number" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r" placeholder-style="color:#999;font-size:16px;" v-model="item.value" @input="(e) => handleCode(e, item, index)" />
|
|
|
</div>
|
|
|
<div
|
|
|
class="btn-text g_flex_c g_flex_none"
|
|
|
@click="handleSendMsg(item.tel, item.verifyTel)"
|
|
|
:style="{
|
|
|
'background-color': msgCode.countdown >= 0 && msgCode.countdown < 60 ? '#dddddd' : '#00b666',
|
|
|
}"
|
|
|
>
|
|
|
<button class="btn-con g_fs_14 g_c_9 g_flex_row_center" style="width: 100px">{{ msgCode.btnText }}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 新密码 -->
|
|
|
<div class="form-new-pwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-new-pwd'">
|
|
|
<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleNewPwd(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 确认密码 -->
|
|
|
<div class="form-new-conpwd g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-confirm-pwd'">
|
|
|
<u-input type="password" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleConfirmPwd(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 姓名输入框 -->
|
|
|
<div class="form-new-name g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-name' || item.tip == 'slot-upID' || item.tip == 'slot-weChat' || item.tip == 'slot-title'">
|
|
|
<u-input type="text" :hover-stop-propagation="true" :maxlength="30" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleName(e, item, index)" @blur="(e) => handleName(e, item, index)" />
|
|
|
<div class="form-new-why g_flex_column_center" style="" @click="chooseImgType('IDCard')" v-if="item.tip == 'slot-upID'">
|
|
|
<image class="g_ml_4 g_w_24 g_h_22" :src="item.img || cdnBaseImg + 'mock_photo1.svg'"></image>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 性别输入框 -->
|
|
|
<div class="form-new-sex g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-sex'">
|
|
|
<u-radio-group v-model="item.value" @change="(e) => handleSex(e, item, index)" active-color="#6A81FF">
|
|
|
<u-radio :mr="sexItem.mr" v-for="(sexItem, sexIndex) in sexList" :key="sexIndex" :name="sexItem.tip">
|
|
|
{{ sexItem.name }}
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</div>
|
|
|
<!-- 年龄输入框 -->
|
|
|
<div class="form-new-age g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-age'">
|
|
|
<u-input type="number" :clearable="false" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" :custom-style="{ fontSize: item.fontSize || ' 16px' }" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAge(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 民族picker -->
|
|
|
<div class="form-new-nation g_flex_rowRight_columnCenter g_fs_16" v-if="item.tip == 'slot-nation'" style="width: calc(100% - 0px)">
|
|
|
<picker @change="(e) => handleNation(e, item, index)" :value="item.nationIndex" :range="nationData.list" style="width: 100%; text-align: right">
|
|
|
<div class="g_flex_row_end flex_center">
|
|
|
<div class="uni-input" :class="nationData.list[item.nationIndex] ? 'g_c_3' : 'g_c_9'">{{ nationData.list[item.nationIndex] || "请选择民族" }}</div>
|
|
|
<div class="g_flex_column_center">
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</picker>
|
|
|
</div>
|
|
|
<!-- 身份证号输入框 -->
|
|
|
<div class="form-new-idcard g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-code-idcard'">
|
|
|
<u-input type="idcard" :clearable="false" :maxlength="18" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleIDcard(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 家庭住址输入框 -->
|
|
|
<div class="form-new-address g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-address'">
|
|
|
<u-input type="text" :clearable="false" :custom-style="{ fontSize: item.fontSize || ' 16px' }" :password-icon="false" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @blur="(e) => handleAddress(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 地址选择框 -->
|
|
|
<div class="form-new-choose g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-choose-address'">
|
|
|
<div class="g_text_r g_w_all g_fs_16" :class="item.value ? 'g_c_3' : 'g_c_9'" @click="chooseAddress(item)">{{ item.value || item.placeholder }}</div>
|
|
|
<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="chooseAddress(item)"></i>
|
|
|
</div>
|
|
|
<!-- 地址选择输入框 -->
|
|
|
|
|
|
<div class="" v-if="item.tip == 'slot-choose&input-address'">
|
|
|
<view v-if="item.uneditable" class="g_br_6 g_text_r g_pt_8 g_pb_8">
|
|
|
{{ item.value || '-' }}
|
|
|
</view>
|
|
|
<view class="form-new-choose g_flex_rowRight_columnCenter" v-else>
|
|
|
<u-input v-model="item.value" @input="(e) => handleAddress(e, item, index)" class="g_flex_1 g_ml_8" maxlength="1000" type="textarea" :placeholder="item.placeholder" placeholder-style="color:#999;line-height:24px" :clearable="false" :customStyle="{ fontSize: '16px', 'text-align': 'right', 'min-height': '24px', 'line-height': '24px' }" />
|
|
|
<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="chooseAddress(item)"></i>
|
|
|
</view>
|
|
|
</div>
|
|
|
<!-- 手机号 -->
|
|
|
<div class="form-new-tel g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-mobile'">
|
|
|
<u-input type="number" :disabled="item.disabled" :custom-style="{ fontSize: item.fontSize || ' 16px', color: item.disabled ? '#999' : '#333' }" :clearable="false" :password-icon="false" :maxlength="13" :placeholder="item.placeholder" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#999;font-size:16px;line-height:1" v-model="item.value" @input="(e) => handleMobile(e, item, index)" />
|
|
|
</div>
|
|
|
<!-- 多文本输入 -->
|
|
|
<div class="form-new-textarea g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-more-word'" style="width: calc(100%)">
|
|
|
<u-input v-model="item.value" @input="(e) => handleMoreWord(e, item, index)" @blur="(e) => handleMoreWord(e, item, index)" class="g_flex_1 g_ml_8" maxlength="1000" type="textarea" :placeholder="item.placeholder" placeholder-style="color:#999" :clearable="false" :customStyle="{ fontSize: '16px', 'text-align': 'right', 'min-height': '24px', 'line-height': '24px' }" />
|
|
|
<!-- <textarea class="g_text_r g_fs_16" v-model="item.value" :placeholder="item.placeholder" placeholder-style="color:#999999;font-size:16px;line-height: 24px" :maxlength="item.maxlength || -1" auto-height style="min-height: 24px; width: 200px; line-height: 24px" @input="(e) => handleMoreWord(e, item, index)" @blur="(e) => handleMoreWord(e, item, index)"></textarea> -->
|
|
|
</div>
|
|
|
<!-- 时间 -->
|
|
|
<div class="form-new-time g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-time'">
|
|
|
<g-panel-detail-item :from="item.from" style="width: 100%" label=" " :isShowBottom="false" :value="item.value" afterType="time" @confirmChooseTime="handleMianshi" />
|
|
|
</div>
|
|
|
<!-- 附件上传 -->
|
|
|
<div class="g_flex_rowRight_columnCenter g_w_all" @click="chooseImgType('img')" v-if="item.tip == 'slot-update-file'">
|
|
|
<div class="g_flex_1 g_c_9 g_text_r g_fs_16">请选附件上传</div>
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</div>
|
|
|
<!-- 财务信息显示 -->
|
|
|
<div class="g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-caiwu'">
|
|
|
<div class="g_flex_1 g_c_3 g_text_l g_fs_16 g_pl_6" :class="[caiwuToggle ? '' : '', item.value.length > 1 ? 'g_text_l' : 'g_text_r']" style="white-space: pre-line">{{ item.value || "-" }}</div>
|
|
|
</div>
|
|
|
<!-- 选择政策 -->
|
|
|
<div class="g_flex_rowRight_columnCenter g_w_all" @click="uploadZhengce" v-if="item.tip == 'slot-zhengce'">
|
|
|
<div class="g_flex_1 g_c_3 g_text_r g_fs_16">{{ item.value }}</div>
|
|
|
</div>
|
|
|
<!-- 部门选择框 -->
|
|
|
<div class="form-new-choose g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-agencyTeam'">
|
|
|
<div class="g_flex_1 g_ell_1 g_text_r g_fs_16" :class="item.value ? 'g_c_3' : 'g_c_9'" @click="openDeptPicker(item)">{{ item.value || item.placeholder }}</div>
|
|
|
<i class="iconfont icon-gengduo11 g_c_c g_ml_4" @click="openDeptPicker(item)"></i>
|
|
|
</div>
|
|
|
<!-- 角色选择框 -->
|
|
|
<div class="form-new-choose g_flex_rowRight_columnCenter g_w_all" v-if="item.tip == 'slot-agencyRole'">
|
|
|
<div class="g_flex_1 g_ell_1 g_text_r g_fs_16" :class="item.value ? 'g_c_3' : 'g_c_9'" @click="openRolePicker(item)">{{ item.value || item.placeholder }}</div>
|
|
|
<i class="iconfont icon-gengduo11 g_c_c g_ml_4" @click="openRolePicker(item)"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右箭头 -->
|
|
|
<div class="form-new-right g_flex_column_center" v-if="item.type != 'slot'" @click.capture="item.path ? handleResult(item) : ''">
|
|
|
<i class="iconfont icon-gengduo11 g_c_c" style="margin-right: -4px"></i>
|
|
|
</div>
|
|
|
<div class="form-new-why g_flex_column_center" v-if="item.tip == 'slot-zhengce'">
|
|
|
<i class="iconfont g_fsi_18 g_c_c g_ml_4" :class="item.suffix" @click="uploadZhengce"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</block>
|
|
|
|
|
|
<slot name="after"></slot>
|
|
|
<!-- <div
|
|
|
v-if="
|
|
|
list.filter((item) => {
|
|
|
return item && item.tip == 'slot-caiwu';
|
|
|
}).length
|
|
|
"
|
|
|
@click="caiwuToggle = !caiwuToggle"
|
|
|
style="height: 45px"
|
|
|
class="g_flex_column_center tog"
|
|
|
>
|
|
|
<div class="g_flex_c">
|
|
|
<div class="g_flex_row_center">
|
|
|
<div class="g_fs_14 g_c_9 g_flex_column_center">{{ caiwuToggle ? "收起" : "展开" }}</div>
|
|
|
<div class="g_fs_14 g_flex_column_center">
|
|
|
<i class="iconfont icon-gengduo11 g_c_c g_ml_4" style="font-size: 14px" :class="caiwuToggle ? 'icon_down' : 'icon_up'"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<u-popup v-model="chooseImg.chooseImgShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="chooseImg.chooseImgShow = false">
|
|
|
<div class="g_text_c g_bg_f_5 g_fs_17">
|
|
|
<div class="g_bg_f">
|
|
|
<div class="g_c_3">
|
|
|
<div class="g_p_16 g_border_e_t" @click="uploadPhoto('camera')">拍照</div>
|
|
|
<div class="g_p_16 g_border_e_t" @click="uploadPhotoByChat">从会话上传</div>
|
|
|
<div class="g_p_16 g_border_e_t" @click="uploadPhoto('album')">从相册选择</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="chooseImg.chooseImgShow = false">取消</div>
|
|
|
</div>
|
|
|
</u-popup>
|
|
|
<u-popup v-model="zhengceModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true">
|
|
|
<div class="g_fs_18 g_c_3 g_flex_row_center g_pt_16">选择政策</div>
|
|
|
<scroll-view scroll-y="true" style="height: 710rpx">
|
|
|
<div class="g_pl_12 g_pr_12">
|
|
|
<div class="g_flex_row_between g_pt_16 g_pb_16 g_border_d_b" v-for="(item, index) in zhengceList" :key="index" @click="handleChooseZhengce(item, index)">
|
|
|
<div class="g_fs_17 g_c_3">{{ item.name }}</div>
|
|
|
<div class="g_flex_column_center">
|
|
|
<i
|
|
|
class="iconfont icon-a-duigoubeifen2"
|
|
|
style="font-size: 24px"
|
|
|
:style="{
|
|
|
color: item.isSelected ? '#6A81FF' : '#fff',
|
|
|
}"
|
|
|
></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</scroll-view>
|
|
|
<g-panel-fixed>
|
|
|
<slot>
|
|
|
<div class="g_flex_row_center">
|
|
|
<rh-button btnText="确定" type="primary" @clickBtn="submitZhengce" />
|
|
|
</div>
|
|
|
</slot>
|
|
|
</g-panel-fixed>
|
|
|
</u-popup>
|
|
|
<u-popup v-model="deptModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true" @close="deptModal.isShow = false">
|
|
|
<div class="dept-picker-wrap">
|
|
|
<div class="g_fs_18 g_c_3 g_flex_row_center g_pt_16 g_pb_16">选择部门</div>
|
|
|
<div class="dept-columns-scroll" style="overflow-x: auto;width: 100vw;">
|
|
|
<div class="dept-columns g_flex_row_start">
|
|
|
<div class="dept-column" v-for="(column, colIndex) in deptColumns" :key="colIndex" :id="'dept-column-' + colIndex">
|
|
|
<div :style="{ paddingTop: (columnPaddingTops[colIndex] || 0) + 'px' }">
|
|
|
<div
|
|
|
class="g_flex_row_between g_pt_16 g_pb_16"
|
|
|
style="border-bottom: 1px solid #ddd;"
|
|
|
v-for="(dept, deptIndex) in column"
|
|
|
:key="dept.id"
|
|
|
:id="'dept-item-' + colIndex + '-' + deptIndex"
|
|
|
@click="handleDeptClick(dept, colIndex, deptIndex)"
|
|
|
>
|
|
|
<div class="g_ell_1 g_flex_1" :style="{ color: '#333', fontSize: '14px', flex: 1, marginRight: '8px',padding:'0 4px' }">
|
|
|
{{ dept.teamName }}
|
|
|
</div>
|
|
|
<div class="g_flex_column_center g_flex_none" style="margin-right: 4px;">
|
|
|
<i
|
|
|
class="iconfont icon-a-duigoubeifen2"
|
|
|
style="font-size: 24px"
|
|
|
:style="{
|
|
|
color: isDeptSelected(dept.id) ? '#6A81FF' : '#fff',
|
|
|
}"
|
|
|
></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<g-panel-fixed>
|
|
|
<slot>
|
|
|
<div class="g_flex_row_center">
|
|
|
<rh-button btnText="确定" type="primary" @clickBtn="submitDept" />
|
|
|
</div>
|
|
|
</slot>
|
|
|
</g-panel-fixed>
|
|
|
</div>
|
|
|
</u-popup>
|
|
|
<!-- 角色选择弹窗 -->
|
|
|
<u-popup v-model="roleModal.isShow" mode="bottom" border-radius="16" height="980" :mask-close-able="true" @close="roleModal.isShow = false">
|
|
|
<div class="dept-picker-wrap">
|
|
|
<div class="g_fs_18 g_c_3 g_flex_row_center g_pt_16 g_pb_16">选择角色</div>
|
|
|
<div class="dept-columns-scroll">
|
|
|
<div class="dept-columns g_flex_row_start">
|
|
|
<div class="dept-column" style="width: 100%; min-width: 100%; max-width: 100%; border-right: none;">
|
|
|
<div class="">
|
|
|
<div class="g_flex_row_between g_pt_16 g_pb_16" style="border-bottom: 1px solid #ddd;" v-for="(role, roleIndex) in roleList" :key="role.id" @click="!role.disabled && handleRoleClick(role)">
|
|
|
<div class="g_ell_1 g_flex_1" :style="{ color: role.disabled ? '#999' : '#333', fontSize: '17px', flex: 1, marginRight: '8px', padding: '0 0 0 10px' }">
|
|
|
{{ role.roleName }}
|
|
|
</div>
|
|
|
<div class="g_flex_column_center g_flex_none" style="margin-right: 10px;" v-if="!role.disabled">
|
|
|
<i
|
|
|
class="iconfont icon-a-duigoubeifen2"
|
|
|
style="font-size: 24px"
|
|
|
:style="{
|
|
|
color: role.disabled ? '#ddd' : (isRoleSelected(role.id) ? '#6A81FF' : '#fff'),
|
|
|
}"
|
|
|
></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<g-panel-fixed>
|
|
|
<slot>
|
|
|
<div class="g_flex_row_center">
|
|
|
<rh-button btnText="确定" type="primary" @clickBtn="submitRole" />
|
|
|
</div>
|
|
|
</slot>
|
|
|
</g-panel-fixed>
|
|
|
</div>
|
|
|
</u-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/* item单行卡片
|
|
|
* 示例：我的页面中的设置展示UI
|
|
|
*/
|
|
|
import { nationlist } from "../../utils/nation.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
cdnBaseImg: this.G.store().cdnBaseImg,
|
|
|
localBaseImg: this.G.store().localBaseImg,
|
|
|
|
|
|
msgCode: {
|
|
|
// 短信倒计时
|
|
|
code: "",
|
|
|
btnText: "获取验证码", // 6s
|
|
|
countdown: -1,
|
|
|
timer: null,
|
|
|
},
|
|
|
nationData: {
|
|
|
list: null,
|
|
|
index: 0,
|
|
|
},
|
|
|
sexList: [
|
|
|
{
|
|
|
name: "男",
|
|
|
tip: 1,
|
|
|
mr: 24,
|
|
|
},
|
|
|
{
|
|
|
name: "女",
|
|
|
tip: 2,
|
|
|
mr: 0,
|
|
|
},
|
|
|
],
|
|
|
caiwuToggle: false,
|
|
|
zhengceModal: {
|
|
|
isShow: false,
|
|
|
},
|
|
|
zhengceList: [],
|
|
|
chooseImg: { chooseImgShow: false, type: "" }, // 选择上传图片类型的弹窗显示
|
|
|
deptModal: {
|
|
|
isShow: false,
|
|
|
},
|
|
|
deptColumns: [], // 级联列：[[{id,teamName,childs}], [...]]
|
|
|
expandedDeptIds: [], // 当前展开路径上的部门id集合，用于级联展示
|
|
|
selectedDeptIds: [], // 选中的部门id集合
|
|
|
selectedDeptNames: [], // 选中的部门名称集合
|
|
|
currentDeptItem: null, // 当前编辑的表单项
|
|
|
columnPaddingTops: {}, // 每列的内边距顶部偏移，用于子级列和父级节点垂直对齐
|
|
|
roleModal: {
|
|
|
isShow: false,
|
|
|
},
|
|
|
roleList: [], // 角色列表
|
|
|
selectedRoleIds: [], // 选中的角色id集合
|
|
|
selectedRoleNames: [], // 选中的角色名称集合
|
|
|
currentRoleItem: null, // 当前编辑的角色表单项
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
defaultOption: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
jobInfo: {
|
|
|
type: Number,
|
|
|
default: 0,
|
|
|
},
|
|
|
deptList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
roleList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
this.localBaseImg = this.G.store().localBaseImg;
|
|
|
this.nationData.list = nationlist.map((item, index) => {
|
|
|
return item.name;
|
|
|
});
|
|
|
this.zhengceList = this.defaultOption;
|
|
|
},
|
|
|
watch: {
|
|
|
defaultOption(val) {
|
|
|
this.zhengceList = val;
|
|
|
},
|
|
|
},
|
|
|
onHide() {
|
|
|
if (this.msgCode.timer) {
|
|
|
clearInterval(this.msgCode.timer);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 验证码
|
|
|
handleCode(e, $item, $index) {
|
|
|
this.$emit("changeCode", e);
|
|
|
},
|
|
|
// 新密码
|
|
|
handleNewPwd(e, $item, $index) {
|
|
|
this.$emit("changeNewPwd", e);
|
|
|
},
|
|
|
handleChangeNewPwd(e, $item, $index) {
|
|
|
// this.$emit("changeNewPwd", e);
|
|
|
// console.log(e);
|
|
|
},
|
|
|
// 确认密码
|
|
|
handleConfirmPwd(e, $item, $index) {
|
|
|
this.$emit("changeConfirmPwd", e);
|
|
|
},
|
|
|
// 姓名
|
|
|
handleName(e, $item, $index) {
|
|
|
// console.log(e);
|
|
|
if (e && e.trim().length > 30) {
|
|
|
uni.showToast({
|
|
|
title: "不能超过30个字",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
if ($item.tip == "slot-weChat") {
|
|
|
this.$emit("changeWeChat", e, $item);
|
|
|
} else if ($item.tip == "slot-title") {
|
|
|
this.$emit("changeTitle", e, $item);
|
|
|
} else {
|
|
|
this.$emit("changeName", e, $item);
|
|
|
}
|
|
|
},
|
|
|
// 性别
|
|
|
handleSex(e, $item, $index) {
|
|
|
// console.log("性别选择", e);
|
|
|
$item.value = e;
|
|
|
this.$emit("changeSex", e);
|
|
|
},
|
|
|
// 年龄
|
|
|
handleAge(e, $item, $index) {
|
|
|
this.$emit("changeAge", e);
|
|
|
},
|
|
|
// 民族
|
|
|
handleNation(e, $item, $index) {
|
|
|
let that = this;
|
|
|
that.list.filter((item, index) => {
|
|
|
return index == $index;
|
|
|
})[0].value = that.nationData.list[e.detail.value];
|
|
|
that.list.filter((item, index) => {
|
|
|
return index == $index;
|
|
|
})[0].nationIndex = e.detail.value;
|
|
|
|
|
|
that.$emit("changeNation", {
|
|
|
e: e,
|
|
|
name: that.nationData.list[e.detail.value],
|
|
|
index: e.detail.value,
|
|
|
});
|
|
|
},
|
|
|
// 身份证号
|
|
|
handleIDcard(e, $item, $index) {
|
|
|
this.$emit("changeIDcard", e);
|
|
|
},
|
|
|
// 家庭住址
|
|
|
handleAddress(e, $item, $index) {
|
|
|
// console.log("eeeeeeeee", e);
|
|
|
this.$emit("changeAddress", e);
|
|
|
},
|
|
|
// 多文字输入框
|
|
|
handleMoreWord(e, $item, $index) {
|
|
|
// console.log(e);
|
|
|
// console.log($item);
|
|
|
if ($item.maxlength && $item.value && $item.value.trim().length >= $item.maxlength) {
|
|
|
uni.showToast({
|
|
|
title: `不能超过${$item.maxlength}个字`,
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
this.$emit("changeMoreWord", e, $item);
|
|
|
},
|
|
|
// 地图选择地址
|
|
|
chooseAddress(_item) {
|
|
|
let that = this;
|
|
|
// console.log(_item);
|
|
|
let obj = {};
|
|
|
if (_item.addressDetail) {
|
|
|
obj = {
|
|
|
latitude: _item.addressDetail.latitude,
|
|
|
longitude: _item.addressDetail.longitude,
|
|
|
};
|
|
|
}
|
|
|
uni.chooseLocation({
|
|
|
...obj,
|
|
|
success(e) {
|
|
|
// console.log(e);
|
|
|
let res = {};
|
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
|
|
|
if (e.address) {
|
|
|
let arr = e.address.match(reg);
|
|
|
res.district = [arr[0], arr[1]].join(" ");
|
|
|
res.address = e.address;
|
|
|
res.addressName = e.name;
|
|
|
}
|
|
|
res.lat = e.latitude;
|
|
|
res.lng = e.longitude;
|
|
|
// console.log("resresresres", res);
|
|
|
that.$emit("chooseAddress", res);
|
|
|
},
|
|
|
fail(e) {
|
|
|
// console.log("err", e);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 发送验证码
|
|
|
handleSendMsg(tel, verifyTel) {
|
|
|
let that = this;
|
|
|
if (this.msgCode.countdown > 0 || !that.G.setReg(tel, "tel")) {
|
|
|
if (!that.G.setReg(tel, "tel")) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请输入正确的手机号",
|
|
|
});
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
if (verifyTel && verifyTel != tel) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请输入对应的手机号",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
that.G.Get(
|
|
|
that.api.login_sendMsg,
|
|
|
{
|
|
|
tel: tel,
|
|
|
type: "assistant",
|
|
|
},
|
|
|
(res) => {
|
|
|
that.msgCode.countdown = 59;
|
|
|
that.msgCode.btnText = that.msgCode.countdown + "s";
|
|
|
clearInterval(that.msgCode.timer);
|
|
|
that.msgCode.timer = setInterval(() => {
|
|
|
if (that.msgCode.countdown > 0) {
|
|
|
that.msgCode.countdown--;
|
|
|
that.msgCode.btnText = that.msgCode.countdown + "s";
|
|
|
} else {
|
|
|
clearInterval(that.msgCode.timer);
|
|
|
that.msgCode.timer = null;
|
|
|
that.msgCode.btnText = "获取验证码";
|
|
|
}
|
|
|
}, 1000);
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
// 上传图片
|
|
|
updateImg(sourceType) {
|
|
|
let that = this;
|
|
|
// console.log("updateImg");
|
|
|
if (sourceType == "camera") {
|
|
|
that.G.uploadImgByCamera((res) => {
|
|
|
// console.log("身份证信息：", res);
|
|
|
if (res.status == "上传成功") {
|
|
|
that.$emit("updateIDInfo", res);
|
|
|
} else {
|
|
|
that.showToast({
|
|
|
title: "上传失败请重试",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
uni.hideLoading();
|
|
|
that.chooseImg.chooseImgShow = false;
|
|
|
}, "idcard");
|
|
|
} else {
|
|
|
that.G.uploadImgByAlbum((res) => {
|
|
|
// console.log("身份证信息：", res);
|
|
|
if (res.status == "上传成功") {
|
|
|
that.$emit("updateIDInfo", res);
|
|
|
} else {
|
|
|
that.showToast({
|
|
|
title: "上传失败请重试",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
uni.hideLoading();
|
|
|
that.chooseImg.chooseImgShow = false;
|
|
|
}, "idcard");
|
|
|
}
|
|
|
},
|
|
|
// 上传图片
|
|
|
uploadQRCode() {
|
|
|
let that = this;
|
|
|
that.G.cropBeforeUpload({
|
|
|
cropScale: "1:1",
|
|
|
success: (res) => {
|
|
|
// console.log(res);
|
|
|
that.$emit("updateFile", res.image);
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
// console.log(err);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
chooseImgType(type) {
|
|
|
uni.hideKeyboard();
|
|
|
this.chooseImg.chooseImgShow = true;
|
|
|
this.chooseImg.type = type;
|
|
|
},
|
|
|
// 在会话上传文件
|
|
|
uploadPhotoByChat() {
|
|
|
let that = this;
|
|
|
let count = 1;
|
|
|
if (this.chooseImg.type == "img") {
|
|
|
count = 5;
|
|
|
}
|
|
|
uni.chooseMessageFile({
|
|
|
count,
|
|
|
type: "image",
|
|
|
success(res) {
|
|
|
// console.log("successsuccesssuccesssuccess", res);
|
|
|
|
|
|
if (res.errMsg == "chooseMessageFile:ok") {
|
|
|
res.tempFiles.forEach((item, index) => {
|
|
|
if (that.chooseImg.type == "img") {
|
|
|
that.G.uploadTmpImg(item.path, (imgRes) => {
|
|
|
that.$emit("updateFile", imgRes.image);
|
|
|
});
|
|
|
} else if (that.chooseImg.type == "IDCard") {
|
|
|
// 会话列表获取的是临时文件, 需要单独处理
|
|
|
that.G.recognizeTmpIDcard([item.path], (cardData) => {
|
|
|
if (cardData.status == "上传成功") {
|
|
|
that.$emit("updateIDInfo", cardData);
|
|
|
} else {
|
|
|
that.showToast({
|
|
|
title: "上传失败请重试",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
that.chooseImg.chooseImgShow = false;
|
|
|
|
|
|
// that.G.uploadTmpImg(res, () => {});
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
// 上传图片
|
|
|
uploadPhoto(sourceType) {
|
|
|
let that = this;
|
|
|
if (that.chooseImg.type == "img") {
|
|
|
if (sourceType == "camera") {
|
|
|
that.G.uploadImgByCamera((res) => {
|
|
|
// console.log("uploadImgByCamera", res);
|
|
|
that.$emit("updateFile", res.image);
|
|
|
that.chooseImg.chooseImgShow = false;
|
|
|
});
|
|
|
} else {
|
|
|
that.G.uploadImgByAlbum((res) => {
|
|
|
// console.log("uploadImgByAlbum", res);
|
|
|
that.$emit("updateFile", res.image);
|
|
|
that.chooseImg.chooseImgShow = false;
|
|
|
});
|
|
|
}
|
|
|
} else if (that.chooseImg.type == "IDCard") {
|
|
|
that.updateImg(sourceType);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 更新政策
|
|
|
uploadZhengce() {
|
|
|
let that = this;
|
|
|
// 处理回显
|
|
|
let ids = "";
|
|
|
if (this.jobInfo == 0) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请选择职位",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
that.zhengceList
|
|
|
.filter((item) => {
|
|
|
return ids.indexOf(item.id) > -1;
|
|
|
})
|
|
|
.forEach((item, index) => {
|
|
|
item.isSelected = true;
|
|
|
});
|
|
|
that.zhengceModal.isShow = true;
|
|
|
},
|
|
|
handleChooseZhengce($item, $index) {
|
|
|
let that = this;
|
|
|
that.zhengceList.forEach((item, index) => {
|
|
|
if (index == $index) {
|
|
|
if (item.isSelected) {
|
|
|
item.isSelected = false;
|
|
|
} else {
|
|
|
item.isSelected = true;
|
|
|
}
|
|
|
} else {
|
|
|
item.isSelected = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
submitZhengce() {
|
|
|
let that = this;
|
|
|
let ids = [];
|
|
|
ids = that.zhengceList
|
|
|
.filter((item) => {
|
|
|
return item.isSelected;
|
|
|
})
|
|
|
.map((item) => {
|
|
|
return item.id;
|
|
|
});
|
|
|
if (ids.length == 0) {
|
|
|
uni.showToast({
|
|
|
title: "请选择一个政策",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
that.zhengceModal.isShow = false;
|
|
|
that.$emit("updateZhengce", {
|
|
|
onSiteUserIds: ids.join(","),
|
|
|
item: that.zhengceList.filter((item) => {
|
|
|
return item.isSelected;
|
|
|
})[0],
|
|
|
});
|
|
|
},
|
|
|
|
|
|
handleStartChangeAvatar(e) {
|
|
|
let that = this;
|
|
|
// console.log(e);
|
|
|
that.G.uploadTmpImg(e.detail.avatarUrl, (res) => {
|
|
|
// console.log("微信：", res.image);
|
|
|
that.$emit("updateImg", res.image);
|
|
|
});
|
|
|
},
|
|
|
handleOpenAvatar() {
|
|
|
let that = this;
|
|
|
uni.showActionSheet({
|
|
|
itemList: ["从相册选择", "使用相机"],
|
|
|
success: function (res) {
|
|
|
if (res.tapIndex == 0) {
|
|
|
// console.log("点击相册");
|
|
|
// 相册
|
|
|
that.setAvatar(["album"]);
|
|
|
} else {
|
|
|
// console.log("点击拍照");
|
|
|
// 拍照
|
|
|
that.setAvatar(["camera"]);
|
|
|
}
|
|
|
},
|
|
|
fail: function (res) {},
|
|
|
});
|
|
|
},
|
|
|
setAvatar($type) {
|
|
|
let that = this;
|
|
|
that.G.uploadImg(
|
|
|
(res) => {
|
|
|
// console.log("其他：", res.image);
|
|
|
that.$emit("updateImg", res.image);
|
|
|
},
|
|
|
"default",
|
|
|
1,
|
|
|
$type
|
|
|
);
|
|
|
},
|
|
|
handleResult(e) {
|
|
|
this.$emit("clickResult", e);
|
|
|
},
|
|
|
// 判断部门是否选中
|
|
|
isDeptSelected(id) {
|
|
|
return this.selectedDeptIds.indexOf(id) > -1;
|
|
|
},
|
|
|
// 打开部门选择弹窗
|
|
|
openDeptPicker(item) {
|
|
|
this.currentDeptItem = item;
|
|
|
if (item.deptIds && item.deptIds.length) {
|
|
|
this.selectedDeptIds = [].concat(item.deptIds);
|
|
|
this.selectedDeptNames = [].concat(item.deptNames || []);
|
|
|
} else {
|
|
|
this.selectedDeptIds = [];
|
|
|
this.selectedDeptNames = [];
|
|
|
}
|
|
|
// 根据已选中的部门初始化展开路径
|
|
|
this.expandedDeptIds = this.buildExpandedPath(this.deptList || [], item.deptIds || []);
|
|
|
this.columnPaddingTops = {};
|
|
|
this.deptColumns = this.buildCascadingColumns(this.deptList || []);
|
|
|
this.deptModal.isShow = true;
|
|
|
},
|
|
|
// 根据已选中的部门id，构建展开路径
|
|
|
buildExpandedPath(list, selectedIds) {
|
|
|
if (!list || list.length === 0 || !selectedIds || selectedIds.length === 0) return [];
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
let item = list[i];
|
|
|
if (selectedIds.indexOf(item.id) > -1) {
|
|
|
// 找到了选中的节点，返回包含该节点的路径
|
|
|
return [item.id];
|
|
|
}
|
|
|
if (item.childs && item.childs.length > 0) {
|
|
|
let childPath = this.buildExpandedPath(item.childs, selectedIds);
|
|
|
if (childPath.length > 0) {
|
|
|
return [item.id].concat(childPath);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return [];
|
|
|
},
|
|
|
// 根据展开路径构建级联列
|
|
|
buildCascadingColumns(list) {
|
|
|
if (!list || list.length === 0) return [];
|
|
|
let columns = [list];
|
|
|
let currentList = list;
|
|
|
for (let i = 0; i < this.expandedDeptIds.length; i++) {
|
|
|
let expandedId = this.expandedDeptIds[i];
|
|
|
let found = currentList.find(item => item.id === expandedId);
|
|
|
if (found && found.childs && found.childs.length > 0) {
|
|
|
columns.push(found.childs);
|
|
|
currentList = found.childs;
|
|
|
} else {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
return columns;
|
|
|
},
|
|
|
// 判断某节点是否在当前展开路径上
|
|
|
isParentExpanded(dept, colIndex) {
|
|
|
return this.expandedDeptIds[colIndex] === dept.id;
|
|
|
},
|
|
|
// 点击部门项：切换选中 + 展开/收起下一级
|
|
|
handleDeptClick(dept, colIndex, deptIndex) {
|
|
|
// 切换选中状态
|
|
|
let idx = this.selectedDeptIds.indexOf(dept.id);
|
|
|
if (idx > -1) {
|
|
|
this.selectedDeptIds.splice(idx, 1);
|
|
|
this.selectedDeptNames.splice(idx, 1);
|
|
|
} else {
|
|
|
this.selectedDeptIds.push(dept.id);
|
|
|
this.selectedDeptNames.push(dept.teamName);
|
|
|
}
|
|
|
// 处理展开/收起：点击有子级的节点时，展开或收起其子级
|
|
|
if (dept.childs && dept.childs.length > 0) {
|
|
|
if (this.expandedDeptIds[colIndex] === dept.id) {
|
|
|
// 已展开，则收起该节点及其后续展开
|
|
|
this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
|
|
|
// 清除后续列的 padding-top
|
|
|
this.clearColumnPaddingTops(colIndex);
|
|
|
} else {
|
|
|
// 未展开或展开了其他节点，则设置当前节点为展开，并截断后续
|
|
|
this.expandedDeptIds = this.expandedDeptIds.slice(0, colIndex);
|
|
|
this.expandedDeptIds.push(dept.id);
|
|
|
}
|
|
|
this.deptColumns = this.buildCascadingColumns(this.deptList || []);
|
|
|
// 下一帧滚动新展开的子级列，使其顶部与当前点击项对齐
|
|
|
this.$nextTick(() => {
|
|
|
this.alignColumnToParent(colIndex, deptIndex);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 清除指定列之后所有列的 padding-top
|
|
|
clearColumnPaddingTops(colIndex) {
|
|
|
let newPaddingTops = {};
|
|
|
Object.keys(this.columnPaddingTops).forEach(key => {
|
|
|
if (Number(key) <= colIndex) {
|
|
|
newPaddingTops[key] = this.columnPaddingTops[key];
|
|
|
}
|
|
|
});
|
|
|
this.columnPaddingTops = newPaddingTops;
|
|
|
},
|
|
|
// 滚动子级列，使其顶部与父级节点垂直对齐
|
|
|
alignColumnToParent(colIndex, deptIndex) {
|
|
|
let that = this;
|
|
|
let parentItemId = '#dept-item-' + colIndex + '-' + deptIndex;
|
|
|
let childColumnId = '#dept-column-' + (colIndex + 1);
|
|
|
let firstColumnId = '#dept-column-0';
|
|
|
uni.createSelectorQuery().in(that).select(parentItemId).boundingClientRect(function(parentRect) {
|
|
|
if (!parentRect) return;
|
|
|
uni.createSelectorQuery().in(that).select(firstColumnId).boundingClientRect(function(firstRect) {
|
|
|
if (!firstRect) return;
|
|
|
// 计算父级节点相对于第一列顶部的偏移量
|
|
|
let offset = parentRect.top - firstRect.top;
|
|
|
if (offset > 0) {
|
|
|
// 给子级列设置相同的 padding-top，使子级列第一项与父级节点垂直对齐
|
|
|
let newPaddingTops = Object.assign({}, that.columnPaddingTops);
|
|
|
newPaddingTops[colIndex + 1] = offset;
|
|
|
that.columnPaddingTops = newPaddingTops;
|
|
|
}
|
|
|
}).exec();
|
|
|
}).exec();
|
|
|
},
|
|
|
// 提交部门选择
|
|
|
submitDept() {
|
|
|
let ids = this.selectedDeptIds.join(",");
|
|
|
let names = this.selectedDeptNames.join("；");
|
|
|
this.deptModal.isShow = false;
|
|
|
this.$emit("changeAgencyTeam", {
|
|
|
ids: ids,
|
|
|
names: names,
|
|
|
idList: [].concat(this.selectedDeptIds),
|
|
|
nameList: [].concat(this.selectedDeptNames),
|
|
|
});
|
|
|
},
|
|
|
handleMobile(e, $item, $index) {
|
|
|
this.$emit("changeMobile", e, $item);
|
|
|
},
|
|
|
handleMianshi(e, $item, $index) {
|
|
|
this.$emit("changeTime", e);
|
|
|
},
|
|
|
// 判断角色是否选中
|
|
|
isRoleSelected(id) {
|
|
|
return this.selectedRoleIds.indexOf(id) > -1;
|
|
|
},
|
|
|
// 打开角色选择弹窗
|
|
|
openRolePicker(item) {
|
|
|
this.currentRoleItem = item;
|
|
|
if (item.roleIds && item.roleIds.length) {
|
|
|
this.selectedRoleIds = [].concat(item.roleIds);
|
|
|
this.selectedRoleNames = [].concat(item.roleNames || []);
|
|
|
} else {
|
|
|
this.selectedRoleIds = [];
|
|
|
this.selectedRoleNames = [];
|
|
|
}
|
|
|
this.roleModal.isShow = true;
|
|
|
},
|
|
|
// 点击角色项：切换选中
|
|
|
handleRoleClick(role) {
|
|
|
let idx = this.selectedRoleIds.indexOf(role.id);
|
|
|
if (idx > -1) {
|
|
|
this.selectedRoleIds.splice(idx, 1);
|
|
|
this.selectedRoleNames.splice(idx, 1);
|
|
|
} else {
|
|
|
this.selectedRoleIds.push(role.id);
|
|
|
this.selectedRoleNames.push(role.roleName);
|
|
|
}
|
|
|
},
|
|
|
// 提交角色选择
|
|
|
submitRole() {
|
|
|
let ids = this.selectedRoleIds.join(",");
|
|
|
let names = this.selectedRoleNames.join("；");
|
|
|
this.roleModal.isShow = false;
|
|
|
this.$emit("changeAgencyRole", {
|
|
|
ids: ids,
|
|
|
names: names,
|
|
|
idList: [].concat(this.selectedRoleIds),
|
|
|
nameList: [].concat(this.selectedRoleNames),
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.g-components-item {
|
|
|
.m-set {
|
|
|
width: calc(100% - 40rpx);
|
|
|
margin: 0 auto;
|
|
|
|
|
|
.item {
|
|
|
position: relative;
|
|
|
// border-bottom: 1rpx solid #eee;
|
|
|
&:after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 10px;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
height: 1rpx solid #eee;
|
|
|
width: calc(100% - 20px);
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
&:after {
|
|
|
content: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.labelRequire {
|
|
|
position: relative;
|
|
|
&::after {
|
|
|
position: absolute;
|
|
|
right: -8px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
content: "*";
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
.customRequire {
|
|
|
&::after {
|
|
|
// top: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-text {
|
|
|
background-color: #00b666;
|
|
|
text-align: center;
|
|
|
border-radius: 126px;
|
|
|
.btn-con {
|
|
|
// border-left: 1rpx solid #eee;
|
|
|
// padding: 0 0 0 16px;
|
|
|
background-color: transparent;
|
|
|
border-radius: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.icon_up {
|
|
|
transform: rotate(90deg);
|
|
|
}
|
|
|
.icon_down {
|
|
|
transform: rotate(-90deg);
|
|
|
}
|
|
|
.safe-area-inset-bottom {
|
|
|
padding-bottom: 0;
|
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
.dept-picker-wrap {
|
|
|
background-color: #fff;
|
|
|
height: 980rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.dept-columns-scroll {
|
|
|
white-space: nowrap;
|
|
|
overflow-x: auto;
|
|
|
overflow-y: hidden;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
|
|
|
scrollbar-width: none;
|
|
|
}
|
|
|
.dept-columns-scroll::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
.dept-columns {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: nowrap;
|
|
|
height: 100%;
|
|
|
width: max-content;
|
|
|
min-width: 100%;
|
|
|
}
|
|
|
.dept-column {
|
|
|
width: 30vw;
|
|
|
min-width: 180px;
|
|
|
max-width: 30vw;
|
|
|
height: 100%;
|
|
|
border-right: 1px solid #ddd;
|
|
|
box-sizing: border-box;
|
|
|
flex-shrink: 0;
|
|
|
flex-grow: 0;
|
|
|
overflow-y: auto;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
}
|
|
|
</style>
|