李想 / NetsdarCloud-ui · 提交

转到一个项目

作者 lixiang
提交 0b266dd85454ffc321daf61ec9b70eecec55efd2 1 个父辈 92ffeb8a

会议管理修改

内嵌 并排对比
正在显示 2 个修改的文件 包含 762 行增加 和 239 行删除
... ... @@ -288,5 +288,13 @@ export default {
attendee_id_R: '個人IDは空白にできない',
meeting_id_R: '会議IDを空にすることはできません',
},
tab: {
basic: '基本情報',
signup: '申し込み情報',
fee: '料金情報',
invitation: '会議の招待',
robot: 'ロボットインタフェース',
}
}
\ No newline at end of file
}
... ...
... ... @@ -3,15 +3,17 @@
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('meet.meeting_id')" prop="meetingId">
<el-input v-model="queryParams.meetingId" :placeholder="$t('meet.meeting_id_P')" clearable
@keyup.enter.native="handleQuery" maxlength="20" />
@keyup.enter.native="handleQuery" maxlength="20"/>
</el-form-item>
<el-form-item :label="$t('meet.meeting_name')" prop="meetingName">
<el-input v-model="queryParams.meetingName" :placeholder="$t('meet.meeting_name_P')" clearable
@keyup.enter.native="handleQuery" maxlength="50" />
@keyup.enter.native="handleQuery" maxlength="50"/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('meet.query')
}}</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{
$t('meet.query')
}}
</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('meet.reset') }}</el-button>
</el-form-item>
</el-form>
... ... @@ -19,49 +21,57 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['xvisit:meeting:add']">{{ $t('meet.add') }}</el-button>
v-hasPermi="['xvisit:meeting:add']">{{ $t('meet.add') }}
</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="meetingList" @selection-change="handleSelectionChange">
<el-table-column :label="$t('meet.meeting_id')" align="center" prop="meetingId" fixed="left" />
<el-table-column :label="$t('meet.meeting_name')" align="center" prop="meetingName" fixed="left" />
<el-table-column :label="$t('meet.meeting_stime')" align="center" prop="meetingStime" >
<el-table-column :label="$t('meet.meeting_id')" align="center" prop="meetingId" fixed="left" width="100px"/>
<el-table-column :label="$t('meet.meeting_name')" align="center" prop="meetingName" fixed="left" width="100px"/>
<el-table-column :label="$t('meet.meeting_stime')" align="center" prop="meetingStime" width="100px">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.meetingStime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_etime')" align="center" prop="meetingEtime" >
<el-table-column :label="$t('meet.meeting_etime')" align="center" prop="meetingEtime" width="100px">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.meetingEtime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_place')" align="center" prop="meetingPlace" />
<el-table-column :label="$t('meet.meeting_leader')" align="center" prop="meetingLeader" />
<el-table-column :label="$t('meet.leader_telephone')" align="center" prop="leaderTelephone" />
<el-table-column :label="$t('meet.leader_email')" align="center" prop="leaderEmail" />
<el-table-column :label="$t('meet.meeting_place')" align="center" prop="meetingPlace" width="100px"/>
<el-table-column :label="$t('meet.meeting_leader')" align="center" prop="meetingLeader" width="100px"/>
<el-table-column :label="$t('meet.leader_telephone')" align="center" prop="leaderTelephone" width="120px"/>
<el-table-column :label="$t('meet.leader_email')" align="center" prop="leaderEmail" width="180px"/>
<el-table-column :label="$t('meet.meeting_subject')" align="center" prop="meetingSubject" />
<el-table-column :label="$t('meet.meeting_charge')" align="center" prop="meetingCharge">
<el-table-column :label="$t('meet.meeting_subject')" align="center" width="100px">
<template #default="{ row }">
<span :title="row.meetingSubject || ''">
{{ row.meetingSubject | truncate }}
</span>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_charge')" align="center" prop="meetingCharge" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingCharge == '0'">不要</el-tag>
<el-tag v-else-if="scope.row.meetingCharge == '1'">要</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_charge_info')" align="center" prop="meetingChargeInfo" />
<el-table-column :label="$t('meet.meeting_charge_bank')" align="center" prop="meetingChargeBank" />
<el-table-column :label="$t('meet.meeting_charge_info')" align="center" prop="meetingChargeInfo" width="100px"/>
<el-table-column :label="$t('meet.meeting_charge_bank')" align="center" prop="meetingChargeBank" width="100px"/>
<el-table-column :label="$t('meet.qr_code_pic')" align="center" prop="qrCodePic" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.qrCodePic" :width="50" :height="50" />
<image-preview :src="scope.row.qrCodePic" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_dues')" align="center" prop="meetingDues" />
<el-table-column :label="$t('meet.meeting_dues')" align="center" prop="meetingDues" width="100px"/>
<!-- <el-table-column :label="$t('meet.meeting_robot')" align="center" prop="meetingRobot" /> -->
<el-table-column :label="$t('meet.meeting_print')" align="center" prop="meetingPrint" />
<el-table-column :label="$t('meet.meeting_reg_site')" align="center" prop="meetingRegSite" />
<el-table-column :label="$t('meet.meeting_info_flg')" align="center" prop="meetingInfoFlg">
<el-table-column :label="$t('meet.meeting_print')" align="center" prop="meetingPrint" width="100px"/>
<el-table-column :label="$t('meet.meeting_reg_site')" align="center" prop="meetingRegSite" width="100px"/>
<el-table-column :label="$t('meet.meeting_info_flg')" align="center" prop="meetingInfoFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingInfoFlg == '0'">不可</el-tag>
... ... @@ -69,9 +79,9 @@
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_info_site')" align="center" prop="meetingInfoSite" />
<el-table-column :label="$t('meet.meeting_info_site')" align="center" prop="meetingInfoSite" width="100px"/>
<!-- <el-table-column :label="$t('meet.meeting_para')" align="center" prop="meetingPara" /> -->
<el-table-column :label="$t('meet.meeting_check')" align="center" prop="meetingCheck">
<el-table-column :label="$t('meet.meeting_check')" align="center" prop="meetingCheck" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingCheck == '0'">顔</el-tag>
... ... @@ -82,20 +92,42 @@
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_config')" align="center" prop="meetingConfig">
<el-table-column :label="$t('meet.meeting_config')" align="center" prop="meetingConfig" width="100px">
<template #default="scope">
<!-- <el-tag v-if="scope.row.meetingConfig == '0'">0</el-tag>
<el-tag v-else-if="scope.row.meetingConfig == '1'">1</el-tag> -->
<div v-if="scope.row.meetingConfig"> <!-- 新增条件判断 -->
<el-tag v-for="item in formatConfig(scope.row.meetingConfig)" :key="item.value">
<div v-if="scope.row.meetingConfig" class="config-tags-wrapper">
<!-- 显示前3个配置项 -->
<el-tag
v-for="(item, index) in formatConfig(scope.row.meetingConfig).slice(0, 3)"
:key="item.value"
class="config-tag"
>
{{ item.text }}
</el-tag>
</div>
<!-- 超过3个时显示 +N，并在下方弹出全部配置 -->
<el-tag
v-if="formatConfig(scope.row.meetingConfig).length > 3"
class="more-tag"
>
<el-popover
placement="bottom"
trigger="hover"
popper-class="white-popover"
width="auto"
>
<template #reference>
<span>+{{ formatConfig(scope.row.meetingConfig).length - 3 }}</span>
</template>
<div class="all-configs">
{{ getAllConfigText(scope.row.meetingConfig) }}
</div>
</el-popover>
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_logo_flg')" align="center" prop="meetingLogoFlg">
<el-table-column :label="$t('meet.meeting_logo_flg')" align="center" prop="meetingLogoFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingLogoFlg == '0'">不要</el-tag>
... ... @@ -105,11 +137,11 @@
<el-table-column :label="$t('meet.meeting_logo')" align="center" prop="meetingLogo" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.meetingLogo" :width="50" :height="50" />
<image-preview :src="scope.row.meetingLogo" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_bg_flg')" align="center" prop="meetingBgFlg">
<el-table-column :label="$t('meet.meeting_bg_flg')" align="center" prop="meetingBgFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingBgFlg == '0'">不要</el-tag>
... ... @@ -120,11 +152,11 @@
<el-table-column :label="$t('meet.meeting_bg')" align="center" prop="meetingBg" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.meetingBg" :width="50" :height="50" />
<image-preview :src="scope.row.meetingBg" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_way_flg')" align="center" prop="meetingWayFlg">
<el-table-column :label="$t('meet.meeting_way_flg')" align="center" prop="meetingWayFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingWayFlg == '0'">不要</el-tag>
<el-tag v-else-if="scope.row.meetingWayFlg == '1'">要</el-tag>
... ... @@ -134,18 +166,18 @@
<el-table-column :label="$t('meet.meeting_way')" align="center" prop="meetingWay" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.meetingWay" :width="50" :height="50" />
<image-preview :src="scope.row.meetingWay" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_seat_flg')" align="center" prop="meetingSeatFlg">
<el-table-column :label="$t('meet.meeting_seat_flg')" align="center" prop="meetingSeatFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingSeatFlg == '0'">不要</el-tag>
<el-tag v-else-if="scope.row.meetingSeatFlg == '1'">要</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('meet.meeting_chat_flg')" align="center" prop="meetingChatFlg">
<el-table-column :label="$t('meet.meeting_chat_flg')" align="center" prop="meetingChatFlg" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.meetingChatFlg == '0'">不要</el-tag>
<el-tag v-else-if="scope.row.meetingChatFlg == '1'">要</el-tag>
... ... @@ -155,17 +187,32 @@
<el-table-column :label="$t('meet.meeting_chat')" align="center" prop="meetingChat" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.meetingWay" :width="50" :height="50" />
<image-preview :src="scope.row.meetingWay" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column :label="$t('meet.memo')" align="center" prop="memo" />
<el-table-column :label="$t('meet.act')" align="center" class-name="small-padding fixed-width" fixed="right">
<!-- <el-table-column :label="$t('meet.memo')" align="center" prop="memo" width="100px"/>-->
<el-table-column :label="$t('meet.memo')" align="center" width="100px">
<template #default="{ row }">
<span :title="row.memo || ''">
{{ row.memo | truncate }}
</span>
</template>
</el-table-column>
<el-table-column :label="$t('meet.act')" align="center" class-name="small-padding fixed-width" fixed="right"
width="120px">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['xvisit:meeting:edit']">{{ $t('meet.edit') }}</el-button>
v-hasPermi="['xvisit:meeting:edit']">{{ $t('meet.edit') }}
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['xvisit:meeting:remove']">{{ $t('meet.del') }}</el-button>
v-hasPermi="['xvisit:meeting:remove']">{{ $t('meet.del') }}
</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-user" @click="handleAuthUser(scope.row)"
v-hasPermi="['xvisit:meeting:edit']">{{ $t('meet.add2') }}</el-button> -->
... ... @@ -174,178 +221,330 @@
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
@pagination="getList"/>
<!-- 添加或修改会议对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="200px">
<el-form-item :label="$t('meet.meeting_id')" prop="meetingId">
<el-input v-model="form.meetingId" :placeholder="$t('meet.meeting_id_P')" :disabled="condition"
maxlength="20" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_name')" prop="meetingName">
<el-input v-model="form.meetingName" :placeholder="$t('meet.meeting_name_P')" maxlength="50" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_stime')" prop="meetingStime">
<el-date-picker v-model="form.meetingStime" type="date" :placeholder="$t('meet.meeting_stime_P')"
format="yyyy-MM-dd" :picker-options="pickerOptionsS" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item :label="$t('meet.meeting_etime')" prop="meetingEtime">
<el-date-picker v-model="form.meetingEtime" type="date" :placeholder="$t('meet.meeting_etime_P')"
format="yyyy-MM-dd" :picker-options="pickerOptionsE" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item :label="$t('meet.meeting_leader')" prop="meetingLeader">
<el-input v-model="form.meetingLeader" :placeholder="$t('meet.meeting_leader_P')" maxlength="20" />
</el-form-item>
<el-form-item :label="$t('meet.leader_telephone')" prop="leaderTelephone">
<el-input v-model="form.leaderTelephone" :placeholder="$t('meet.leader_telephone_P')" maxlength="11" />
</el-form-item>
<el-form-item :label="$t('meet.leader_email')" prop="leaderEmail">
<el-input v-model="form.leaderEmail" :placeholder="$t('meet.leader_email_P')" maxlength="50" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_subject')" prop="meetingSubject">
<el-input v-model="form.meetingSubject" type="textarea" :placeholder="$t('meet.meeting_subject_P')" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_place')" prop="meetingPlace">
<el-input v-model="form.meetingPlace" :placeholder="$t('meet.meeting_place_P')" maxlength="100" />
</el-form-item>
<!-- <el-form-item :label="$t('meet.meeting_robot')" prop="meetingRobot">
<el-input v-model="form.meetingRobot" placeholder="$t('meet.meeting_robot_P')" />
</el-form-item> -->
<el-form-item :label="$t('meet.meeting_print')" prop="meetingPrint">
<el-input v-model="form.meetingPrint" :placeholder="$t('meet.meeting_print_P')" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_charge')" prop="meetingCharge">
<!-- <el-input v-model="form.meetingCharge" :placeholder="$t('meet.meeting_charge_P')" /> -->
<el-select v-model="form.meetingCharge" clearable>
<el-option v-for="item in dataB" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_dues')" prop="meetingDues" v-if="form.meetingCharge === '1'">
<el-input v-model="form.meetingDues" :placeholder="$t('meet.meeting_dues_P')" maxlength="10" />
</el-form-item>
<el-form-item :label="$t('meet.qr_code_pic')" prop="qrCodePic" v-if="form.meetingCharge === '1'">
<image-upload v-model="form.qrCodePic" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_charge_info')" prop="meetingChargeInfo" v-if="form.meetingCharge === '1'">
<el-input v-model="form.meetingChargeInfo" :placeholder="$t('meet.meeting_charge_info_P')" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_charge_bank')" prop="meetingChargeBank" v-if="form.meetingCharge === '1'">
<el-input v-model="form.meetingChargeBank" :placeholder="$t('meet.meeting_charge_bank_P')" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_reg_site')" prop="meetingRegSite">
<el-input v-model="form.meetingRegSite" :placeholder="$t('meet.meeting_reg_site_P')" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_info_flg')" prop="meetingInfoFlg">
<!-- <el-input v-model="form.meetingInfoFlg" :placeholder="$t('meet.meeting_info_flg_P')" /> -->
<el-select v-model="form.meetingInfoFlg" clearable>
<el-option v-for="item in dataC" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_info_site')" prop="meetingInfoSite">
<el-input v-model="form.meetingInfoSite" :placeholder="$t('meet.meeting_info_site_P')" />
</el-form-item>
<!-- <el-form-item :label="$t('meet.meeting_para')" prop="meetingPara">
<el-input v-model="form.meetingPara" placeholder="$t('meet.meeting_para_P')" />
</el-form-item> -->
<el-form-item :label="$t('meet.meeting_check')" prop="meetingCheck">
<span slot="label">
<el-tooltip :content="$t('meet.meeting_check1')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
{{ $t('meet.meeting_check') }}
</span>
<!-- <el-input v-model="form.meetingCheck" :placeholder="$t('meet.meeting_check_P')" /> -->
<el-select v-model="form.meetingCheck" clearable>
<el-option v-for="item in dataA" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_config')" prop="meetingConfig">
<span slot="label">
<el-tooltip :content="$t('meet.meeting_config1')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
{{ $t('meet.meeting_config') }}
</span>
<!-- <el-input v-model="form.meetingConfig" :placeholder="$t('meet.meeting_config_P')" /> -->
<el-select v-model="form.meetingConfig" clearable multiple>
<el-option v-for="item in dataE" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_logo_flg')" prop="meetingLogoFlg">
<!-- <el-input v-model="form.meetingLogoFlg" :placeholder="$t('meet.meeting_logo_flg_P')" /> -->
<el-select v-model="form.meetingLogoFlg" clearable>
<el-option v-for="item in dataB" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_logo')" prop="meetingLogo" v-if="form.meetingLogoFlg === '1'">
<image-upload v-model="form.meetingLogo" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_bg_flg')" prop="meetingBgFlg">
<!-- <el-input v-model="form.meetingBgFlg" :placeholder="$t('meet.meeting_bg_flg_P')" /> -->
<el-select v-model="form.meetingBgFlg" clearable>
<el-option v-for="item in dataB" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_bg')" prop="meetingBg" v-if="form.meetingBgFlg === '1'">
<image-upload v-model="form.meetingBg" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_way_flg')" prop="meetingWayFlg">
<!-- <el-input v-model="form.meetingWayFlg" :placeholder="$t('meet.meeting_way_flg_P')" /> -->
<el-select v-model="form.meetingWayFlg" clearable>
<el-option v-for="item in dataB" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_way')" prop="meetingWay" v-if="form.meetingWayFlg === '1'">
<image-upload v-model="form.meetingWay" />
</el-form-item>
<el-form-item :label="$t('meet.meeting_seat_flg')" prop="meetingSeatFlg">
<!-- <el-input v-model="form.meetingSeatFlg" :placeholder="$t('meet.meeting_seat_flg_P')" /> -->
<el-select v-model="form.meetingSeatFlg" clearable>
<el-option v-for="item in dataD" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_chat_flg')" prop="meetingChatFlg">
<!-- <el-input v-model="form.meetingChatFlg" :placeholder="$t('meet.meeting_chat_flg')" /> -->
<el-select v-model="form.meetingChatFlg" clearable>
<el-option v-for="item in dataB" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('meet.meeting_chat')" prop="meetingChat" v-if="form.meetingChatFlg === '1'">
<image-upload v-model="form.meetingChat" />
</el-form-item>
<el-form-item :label="$t('meet.memo')" prop="memo">
<el-input v-model="form.memo" :placeholder="$t('meet.memo_P')" maxlength="200" />
</el-form-item>
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body >
<div style=" max-height: 65vh;">
<!-- <el-row>-->
<!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">-->
<!-- <el-form-item>-->
<!-- <el-checkbox v-model="open" @change="handleOpenChange">{{ $t('meet.meeting_invite') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="responsive-form">
<el-tabs v-model="activeTab" type="card">
<!-- 基本信息标签页 -->
<el-tab-pane :label="$t('tab.basic')" name="basic">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 60vh;">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_id')" prop="meetingId">
<el-input v-model="form.meetingId" :placeholder="$t('meet.meeting_id_P')" :disabled="condition"
maxlength="20"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_name')" prop="meetingName">
<el-input v-model="form.meetingName" :placeholder="$t('meet.meeting_name_P')" maxlength="50"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_stime')" prop="meetingStime">
<el-date-picker
v-model="form.meetingStime"
type="date"
:placeholder="$t('meet.meeting_stime_P')"
format="yyyy-MM-dd"
:picker-options="pickerOptionsS"
value-format="yyyy-MM-dd"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_etime')" prop="meetingEtime">
<el-date-picker
v-model="form.meetingEtime"
type="date"
:placeholder="$t('meet.meeting_etime_P')"
format="yyyy-MM-dd"
:picker-options="pickerOptionsE"
value-format="yyyy-MM-dd"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.leader_email')" prop="leaderEmail">
<el-input v-model="form.leaderEmail" :placeholder="$t('meet.leader_email_P')" maxlength="50"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_place')" prop="meetingPlace">
<el-input v-model="form.meetingPlace" :placeholder="$t('meet.meeting_place_P')" maxlength="100"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_leader')" prop="meetingLeader">
<el-input v-model="form.meetingLeader" :placeholder="$t('meet.meeting_leader_P')" maxlength="20"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.leader_telephone')" prop="leaderTelephone">
<el-input v-model="form.leaderTelephone" :placeholder="$t('meet.leader_telephone_P')" maxlength="11"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_print')" prop="meeting_print">
<el-input v-model="form.meetingPrint" :placeholder="$t('meet.meeting_print')" maxlength="50"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_seat_flg')" prop="meetingSeatFlg">
<el-select v-model="form.meetingSeatFlg" clearable style="width: 100%">
<el-option v-for="item in dataD" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_chat_flg')" prop="meetingChatFlg">
<el-select v-model="form.meetingChatFlg" clearable style="width: 100%">
<el-option v-for="item in dataB" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" v-if="form.meetingChatFlg === '1'">
<el-form-item :label="$t('meet.meeting_chat')" prop="meetingChat">
<image-upload v-model="form.meetingChat"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-form-item :label="$t('meet.memo')" prop="memo">
<el-input v-model="form.memo" :placeholder="$t('meet.memo_P')" maxlength="200" type="textarea" style="height: 80px"/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<!-- 报名信息标签页 -->
<el-tab-pane :label="$t('tab.signup')" name="signup">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 60vh;">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_check')" prop="meetingCheck">
<span slot="label">
<el-tooltip :content="$t('meet.meeting_check1')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
{{ $t('meet.meeting_check') }}
</span>
<el-select
v-model="form.meetingCheck"
clearable
style="width: 100%"
@change="handleMeetingCheckChange">
<el-option
v-for="item in dataA"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-form-item :label="$t('meet.meeting_config')" prop="meetingConfig">
<el-checkbox-group
v-model="meetingConfig"
class="checkbox-group-grid"
>
<el-row :gutter="20">
<el-col
v-for="item in dataE"
:key="item.value"
:xs="24" :sm="8" :md="8" :lg="8"
>
<div class="checkbox-item">
<el-checkbox
:label="item.value"
:disabled="isConfigDisabled(item.value)">
{{ item.label }}
</el-checkbox>
</div>
</el-col>
</el-row>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<!-- 收费信息标签页 -->
<el-tab-pane :label="$t('tab.fee')" name="fee">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 60vh;">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_charge')" prop="meetingCharge">
<el-select v-model="form.meetingCharge" clearable style="width: 100%">
<el-option v-for="item in dataB" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<template v-if="form.meetingCharge === '1'">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_dues')" prop="meetingDues">
<el-input v-model="form.meetingDues" :placeholder="$t('meet.meeting_dues_P')" maxlength="10"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-form-item :label="$t('meet.qr_code_pic')" prop="qrCodePic">
<image-upload v-model="form.qrCodePic"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_charge_info')" prop="meetingChargeInfo">
<el-input v-model="form.meetingChargeInfo" :placeholder="$t('meet.meeting_charge_info_P')"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_charge_bank')" prop="meetingChargeBank">
<el-input v-model="form.meetingChargeBank" :placeholder="$t('meet.meeting_charge_bank_P')"/>
</el-form-item>
</el-col>
</template>
</el-row>
</div>
</el-tab-pane>
<!-- 会议邀请标签页 -->
<el-tab-pane :label="$t('tab.invitation')" name="invitation">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 60vh;">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-form-item :label="$t('meet.meeting_subject')" prop="meetingSubject">
<div v-if="open" ref="editor" class="quill-editor-container"></div>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" style="margin-top: 8%" v-if="isUpdate">
<el-form-item :label="$t('meet.meeting_info_site')" prop="meetingInfoSite">
<el-input
v-model="form.meetingInfoSite"
readonly>
<i
slot="suffix"
class="el-icon-document-copy copy-icon"
@click="handleCopy(form.meetingInfoSite, $t('meet.meeting_info_site'))">
</i>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" style="margin-top: 8%" v-if="isUpdate">
<el-form-item :label="$t('meet.meeting_reg_site')" prop="meetingRegSite">
<el-input
v-model="form.meetingRegSite"
readonly>
<i
slot="suffix"
class="el-icon-document-copy copy-icon"
@click="handleCopy(form.meetingRegSite, $t('meet.meeting_reg_site'))">
</i>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :style="{ marginTop: isUpdate ? '0%' : '8%' }">
<el-form-item :label="$t('meet.meeting_info_flg')" prop="meetingInfoFlg">
<el-select v-model="form.meetingInfoFlg" clearable style="width: 100%">
<el-option v-for="item in dataC" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<!-- 机器人界面标签页 -->
<el-tab-pane :label="$t('tab.robot')" name="robot">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 60vh;">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_logo_flg')" prop="meetingLogoFlg">
<el-select v-model="form.meetingLogoFlg" clearable style="width: 100%">
<el-option v-for="item in dataB" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" v-if="form.meetingLogoFlg === '1'">
<el-form-item :label="$t('meet.meeting_logo')" prop="meetingLogo">
<image-upload v-model="form.meetingLogo"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_bg_flg')" prop="meetingBgFlg">
<el-select v-model="form.meetingBgFlg" clearable style="width: 100%">
<el-option v-for="item in dataB" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" v-if="form.meetingBgFlg === '1'">
<el-form-item :label="$t('meet.meeting_bg')" prop="meetingBg">
<image-upload v-model="form.meetingBg"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('meet.meeting_way_flg')" prop="meetingWayFlg">
<el-select v-model="form.meetingWayFlg" clearable style="width: 100%">
<el-option v-for="item in dataB" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" v-if="form.meetingWayFlg === '1'">
<el-form-item :label="$t('meet.meeting_way')" prop="meetingWay">
<image-upload v-model="form.meetingWay"/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{ $t('meet.submit') }}</el-button>
<el-button @click="cancel">{{ $t('meet.cancel') }}</el-button>
... ... @@ -358,12 +557,12 @@
<el-table :data="visitList" @selection-change="handleSelectionChange2" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column :label="$t('visit.attendee_id')" align="center" prop="attendeeId"
:show-overflow-tooltip="true" />
<el-table-column :label="$t('visit.name')" align="center" prop="name" :show-overflow-tooltip="true" />
:show-overflow-tooltip="true"/>
<el-table-column :label="$t('visit.name')" align="center" prop="name" :show-overflow-tooltip="true"/>
</el-table>
<pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams2.pageNum"
:limit.sync="queryParams2.pageSize" @pagination="getList2" />
:limit.sync="queryParams2.pageSize" @pagination="getList2"/>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectUser">{{ $t('meet.submit') }}</el-button>
... ... @@ -374,6 +573,8 @@
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.snow.css";
import {
listMeeting,
getMeeting,
... ... @@ -391,6 +592,9 @@ import {
} from "@/api/xvisit/meetingattendance";
export default {
props: {
value: String // 接收父组件 v-model 传值
},
name: "Meeting",
data() {
... ... @@ -440,6 +644,9 @@ export default {
};
return {
activeTab: 'basic',
isUpdate: false,
quill: null,
// 遮罩层
loading: true,
// 选中数组
... ... @@ -467,41 +674,55 @@ export default {
meetingName: null,
},
// 表单参数
form: {},
// 表单校验
form: {
meetingConfig: []
},
meetingConfig: [],
rules: {
meetingId: [{
required: true,
message: this.$t('meet.meeting_id_R'),
trigger: "blur"
trigger: "blur",
tab: 'basic' // 添加标签页标识
}],
meetingName: [{
required: true,
message: this.$t('meet.meeting_name_R'),
trigger: "blur"
trigger: "blur",
tab: 'basic'
}],
meetingCheck: [{
required: true,
message: this.$t('meet.meeting_check'),
trigger: "blur",
tab: 'signup'
}],
leaderEmail: [{
required: true,
type: "email",
message: this.$t('visit.email_R'),
trigger: ["blur", "change"]
trigger: ["blur", "change"],
tab: 'basic'
}],
leaderTelephone: [{
pattern: /\d{11}$/,
message: this.$t('visit.phone_number_R'),
trigger: "blur"
trigger: "blur",
tab: 'basic'
}],
meetingStime: [{
required: true,
validator: validateStartDatetime,
trigger: "change"
trigger: "change",
tab: 'basic'
}],
meetingEtime: [{
required: true,
validator: validateEndDatetime,
trigger: "change"
trigger: "change",
tab: 'basic'
}],
},
pickerOptionsS: {
disabledDate: (time) => { //设置禁用范围
if (this.form.meetingEtime) {
... ... @@ -686,7 +907,6 @@ export default {
memo: null,
},
total2: 0,
title2: "",
open2: false,
meetId: "",
... ... @@ -701,12 +921,146 @@ export default {
this.getList();
},
computed: {
computed: {},
filters: {
truncate(text, maxLength = 20) {
if (!text) return '';
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
}
},
methods: {
handleMeetingCheckChange(value) {
// 根据选择的验证方式自动设置必选配置项
// 顔认证(0)：必须选中氏名(1)、Eメール(5)、会社名(6)、業種(8)、写真(15)
// 名前(1)/QRコード(3)/認証コード(4)：必须选中氏名(1)、Eメール(5)、会社名(6)、業種(8)
// 携帯電話番号(2)：必须选中氏名(1)、電話番号(4)、Eメール(5)、会社名(6)、業種(8)
if (value === '0') {
// 顔认证必须选中1,5,6,8,15
this.meetingConfig = [...new Set([
...this.meetingConfig,
'1', '5', '6', '8', '15'
])];
} else if (value === '1' || value === '3' || value === '4') {
// 名前/QRコード/認証コード必须选中1,5,6,8
this.meetingConfig = [...new Set([
...this.meetingConfig,
'1', '5', '6', '8'
])];
} else if (value === '2') {
// 携帯電話番号必须选中1,4,5,6,8
this.meetingConfig = [...new Set([
...this.meetingConfig,
'1', '4', '5', '6', '8'
])];
}
},
isConfigDisabled(value) {
// 根据当前选择的验证方式判断哪些配置项是必选的且不可取消
const requiredConfigs = this.getRequiredConfigs();
return requiredConfigs.includes(value);
},
getRequiredConfigs() {
// 根据当前验证方式返回必选的配置项
if (!this.form.meetingCheck) return [];
if (this.form.meetingCheck === '0') {
return ['1', '5', '6', '8', '15'];
} else if (this.form.meetingCheck === '1' ||
this.form.meetingCheck === '3' ||
this.form.meetingCheck === '4') {
return ['1', '5', '6', '8'];
} else if (this.form.meetingCheck === '2') {
return ['1', '4', '5', '6', '8'];
}
return [];
},
handleCopy(text, label) {
if (!text) {
this.$message.warning(this.$t('common.empty_content'));
return;
}
navigator.clipboard.writeText(text).then(() => {
this.$message.success(`${label} ${this.$t('common.copy_success')}`);
}).catch(err => {
console.error('复制失败:', err);
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
this.$message.success(`${label} ${this.$t('common.copy_success')}`);
} catch (e) {
this.$message.error(this.$t('common.copy_failed'));
}
document.body.removeChild(textarea);
});
},
initEditor() {
this.$nextTick(() => {
if (!this.$refs.editor) {
console.error('Quill container not found');
return;
}
// 清理旧编辑器（正确方式）
if (this.quill) {
this.quill.off('text-change');
// 保留容器结构，只移除Quill添加的类
this.$refs.editor.classList.remove('ql-container');
this.$refs.editor.classList.remove('ql-snow');
this.$refs.editor.innerHTML = ''; // 保留空容器
this.quill = null;
}
// 重新创建容器结构
const editorContainer = this.$refs.editor;
editorContainer.innerHTML = `
<div class="ql-container ql-snow" >
<div class="ql-editor" ></div>
</div>
`;
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'color': []}, {'background': []}],
[{'align': []}],
['clean']
];
this.quill = new Quill(editorContainer.querySelector('.ql-container'), {
modules: {
// toolbar: editorContainer.querySelector('.ql-toolbar')
toolbar: toolbarOptions
},
theme: 'snow',
placeholder: this.$t('meet.meeting_subject_P') || '请输入会议主题'
});
// 设置初始内容
if (this.form.meetingSubject) {
this.quill.root.innerHTML = this.form.meetingSubject;
}
// 监听内容变化
this.quill.on('text-change', () => {
this.form.meetingSubject = this.quill.root.innerHTML;
});
});
},
getAllConfigText(config) {
const configItems = this.formatConfig(config);
return configItems.map(item => item.text).join(', ');
},
formatConfig(configStr) {
const configMap = {
... ... @@ -773,7 +1127,7 @@ export default {
};
return configStr.split(',').map(num => {
return configMap[Number(num)] || { value: num, text: `未知类型${num}` };
return configMap[Number(num)] || {value: num, text: `未知类型${num}`};
});
},
... ... @@ -782,7 +1136,7 @@ export default {
getList() {
this.loading = true;
listMeeting(this.queryParams).then(response => {
console.log(response)
console.log("response", response);
this.meetingList = response.rows;
this.total = response.total;
this.loading = false;
... ... @@ -791,6 +1145,10 @@ export default {
// 取消按钮
cancel() {
if (this.quill) {
this.quill.off('text-change');
this.quill = null;
}
this.open = false;
this.reset();
},
... ... @@ -836,6 +1194,7 @@ export default {
meetingChatFlg: null,
meetingChat: null
};
this.meetingConfig = []
this.resetForm("form");
},
... ... @@ -865,30 +1224,50 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.isUpdate = false;
this.activeTab = 'basic';
this.open = true;
this.title = this.$t('meet.add_title');
this.sts = 0;
this.condition = false;
this.$nextTick(() => {
this.initEditor();
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.isUpdate = true;
this.activeTab = 'basic';
this.sts = 1;
this.condition = true;
const meetingId = row.meetingId || this.ids
const meetingId = row.meetingId || this.ids;
getMeeting(meetingId).then(response => {
this.form = response.data;
this.form.meetingConfig = response.data.meetingConfig ? response.data.meetingConfig.split(',') : []
this.meetingConfig = response.data.meetingConfig ? response.data.meetingConfig.split(',') : [];
this.open = true;
this.title = this.$t('meet.add_title');
this.$nextTick(() => {
this.initEditor();
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid,errorFields )=> {
if (valid) {
if (this.quill) {
this.form.meetingSubject = this.quill.root.innerHTML;
}
if (this.form.meetingSubject === '<p><br></p>') {
this.form.meetingSubject = ''
}
this.form.meetingConfig = this.meetingConfig.join(",")
this.form.meetingRegSite = 'http://invite.meeting.zgftlm.com/static/register.html?meetingId=' + this.form.meetingId + '&lang=zh'
this.form.meetingInfoSite = 'http://invite.meeting.zgftlm.com/static/personnelList.html?meetingId=' + this.form.meetingId + '&lang=zh'
if (this.sts == 1 && this.form.meetingId != null) {
let originalTimeString1 = this.form.meetingStime;
... ... @@ -922,7 +1301,7 @@ export default {
let modifiedTime2 = `${year2}-${month2}-${day2} ${hours2}:${minutes2}:${seconds2}`;
this.form.meetingEtime = modifiedTime2
this.form.meetingConfig = this.form.meetingConfig.join(',')
// this.form.meetingConfig = this.form.meetingConfig.join(',')
updateMeeting(this.form).then(response => {
this.$modal.msgSuccess(this.$t('meet.edit_msg'));
... ... @@ -974,6 +1353,28 @@ export default {
}
});
}
} else {
// 验证失败，找到第一个错误字段对应的标签页
if (errorFields) {
const firstErrorField = Object.keys(errorFields)[0];
console.log("this.rules[firstErrorField]",this.rules[firstErrorField])
const firstErrorRule = this.rules[firstErrorField][0];
if (firstErrorRule.tab) {
this.activeTab = firstErrorRule.tab;
// 滚动到错误字段
this.$nextTick(() => {
const errorElement = this.$refs.form.$el.querySelector('.is-error');
if (errorElement) {
errorElement.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
});
}
}
return false;
}
});
},
... ... @@ -986,7 +1387,8 @@ export default {
}).then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('meet.del_msg'));
}).catch(() => { });
}).catch(() => {
});
},
getList2() {
... ... @@ -1051,8 +1453,121 @@ export default {
this.open2 = false;
}
});
}
},
},
mounted() {
this.$nextTick(() => {
this.initEditor(); // 确保 DOM 已渲染
});
},
watch: {
value(newVal) {
if (this.quill && newVal !== this.quill.root.innerHTML) {
this.quill.root.innerHTML = newVal
}
}
},
beforeDestroy() {
if (this.quill) {
this.quill.off('text-change')
}
}
};
</script>
<style scoped>
/* 容器样式 */
.quill-editor-container {
height: 300px;
}
/* 确保编辑器填充容器 */
.quill-editor-container .ql-container {
height: calc(100% - 42px); /* 减去工具栏高度 */
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
/* 工具栏样式 */
.quill-editor-container .ql-toolbar {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #dcdfe6;
}
.quill-editor-container .ql-container {
border: 1px solid #dcdfe6;
border-top: none;
}
/* 确保每项等高对齐 */
.checkbox-group-grid .el-row {
display: flex;
flex-wrap: wrap;
}
.checkbox-group-grid .el-col {
display: flex;
}
.checkbox-item {
width: 100%;
padding: 8px;
height: 100%;
display: flex;
align-items: center; /* 垂直居中 */
}
/* 修复Element UI复选框的默认边距 */
.checkbox-item .el-checkbox {
margin: 0;
width: 100%;
}
/* 确保标签文字不换行 */
.checkbox-item .el-checkbox__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 白色背景的弹出框 */
.white-popover {
background: white !important;
color: #333 !important;
border: 1px solid #dcdfe6 !important;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
/* 弹出框内容样式 */
.all-configs {
padding: 4px 6px;
line-height: 1;
}
/* 标签容器 */
.config-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* 普通标签样式 */
.config-tag {
margin-right: 4px;
}
/* +N 标签样式 */
.more-tag {
cursor: pointer;
background-color: #f4f4f5;
color: #909399;
}
.ql-toolbar.ql-snow {
padding: 2px 4px !important;
height: 16px !important;
}
</style>
... ...