Bladeren bron

修改会议详情样式

lisy 5 maanden geleden
bovenliggende
commit
608a7d08e0

+ 18 - 15
src/views/training/meeting-add/index.vue

@@ -21,7 +21,7 @@
                                 </el-form-item>
                             </el-col>
                             <el-col :span="6">
-                                <el-form-item label="培训时间" prop="trainingTime">
+                                <el-form-item label="会议时间" prop="trainingTime">
                                     <el-date-picker v-model="form.trainingTime" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                                 </el-form-item>
                             </el-col>
@@ -31,7 +31,7 @@
                                 </el-form-item>
                             </el-col>
                             <el-col :span="6">
-                                <el-form-item label="培训方式" prop="joinType">
+                                <el-form-item label="会议方式" prop="joinType">
                                     <!-- 单选框 -->
                                     <el-radio-group v-model="form.joinType">
                                         <el-radio v-for="item in lm_training_join_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
@@ -39,8 +39,8 @@
                                 </el-form-item>
                             </el-col>
                             <el-col v-if="form.joinType === '0'" :span="6">
-                                <el-form-item label="培训地点" prop="trainingLocation">
-                                    <el-input v-model="form.trainingLocation" placeholder="请输入培训地点" clearable />
+                                <el-form-item label="会议地点" prop="trainingLocation">
+                                    <el-input v-model="form.trainingLocation" placeholder="请输入会议地点" clearable />
                                 </el-form-item>
                             </el-col>
                             <el-col :span="6">
@@ -133,8 +133,8 @@
                         </el-row>
                         <el-row :gutter="20">
                             <el-col :span="12">
-                                <el-form-item label="培训详情" prop="description">
-                                    <el-input v-model="form.description" :rows="4" type="textarea" placeholder="请输入培训详情" />
+                                <el-form-item label="会议详情" prop="description">
+                                    <el-input v-model="form.description" :rows="4" type="textarea" placeholder="请输入会议详情" />
                                 </el-form-item>
                             </el-col>
                             <el-col :span="12">
@@ -164,9 +164,12 @@
                             </el-col>
                             <el-col :span="12">
                                 <el-form-item label="相关文件" prop="attachments">
+                                    <template #label>
+                                        <span>相关文件</span>
+                                        <span class="c-999 f-s-12 f-w-4">(此模块报名审核通过后才可查看)</span>
+                                    </template>
                                     <div class="d-flex flex-cln mt-10 f-s-12 c-#606266">
                                         <FileUpload v-model="form.attachments" format="array" :limit="20" :fileSize="100"></FileUpload>
-                                        <div>此模块报名审核通过后才可查看</div>
                                     </div>
                                 </el-form-item>
                             </el-col>
@@ -179,9 +182,7 @@
                                 <el-form-item label="是否颁发证书" prop="certFlag">
                                     <el-radio-group v-model="form.certFlag">
                                         <el-radio v-for="item in yes_no" :key="item.value" :label="item.value">
-                                            {{
-                                            item.label
-                                            }}
+                                            {{item.label }}
                                         </el-radio>
                                     </el-radio-group>
                                 </el-form-item>
@@ -191,7 +192,7 @@
                             </div>
                             <template v-if="form.certFlag">
                                 <template v-for="(item, index) in form.certificateInfo" :key="index">
-                                    <el-row :gutter="20" class="bg-#f4f4f4 pd-16 mb-10" >
+                                    <el-row :gutter="20" class="bg-#f4f4f4 pd-16 mb-10">
                                         <el-col :span="10">
                                             <el-form-item label="证书名称" :prop="`certificateInfo.${index}.certType`" :rules="[{ required: true, message: '请选择证书名称', trigger: 'change' }]">
                                                 <el-select v-model="item.certType" placeholder="证书名称" clearable>
@@ -330,10 +331,10 @@ const form = ref<any>({
 const rules = reactive({
     // 自动生成全部
     trainingName: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
-    trainingTime: [{ required: true, message: '请选择培训时间', trigger: 'blur' }],
-    joinType: [{ required: true, message: '请选择培训方式', trigger: 'change' }],
-    trainingLocation: [{ required: true, message: '请输入培训地点', trigger: 'blur' }],
-    'conditions.totalCheck':[{ required: true, message: '请输入培训地点', trigger: 'change' }],
+    trainingTime: [{ required: true, message: '请选择会议时间', trigger: 'blur' }],
+    joinType: [{ required: true, message: '请选择会议方式', trigger: 'change' }],
+    trainingLocation: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
+    'conditions.totalCheck':[{ required: true, message: '请选择是否限制报名人数', trigger: 'change' }],
     certFlag: [{ required: true, message: '请选择是否颁发证书', trigger: 'change' }],
     certificateInfo: [{ required: true, message: '请选择证书名称', trigger: 'change' }],
     description: [{ required: true, message: '请输入培训详情', trigger: 'blur' }],
@@ -345,6 +346,8 @@ const rules = reactive({
 });
 const formRef = ref();
 const save = debounce(async () => {
+    console.log('123123');
+    
     await formRef.value.validate();
     const params = {
         ...form.value,

+ 5 - 4
src/views/training/meeting-detail/index.vue

@@ -2,7 +2,7 @@
     <div class="p-3">
         <div class="bg-fff flex1 ov-hd d-flex flex-cln">
             <div class="d-flex a-c pd-16">
-                <div class="f-s-20 c-333 f-w-7 mr-10">会议详情</div>
+                <div class="info-title f-s-20 c-333 f-w-7">会议详情</div>
                 <el-button @click="router.go(-1)" type="primary" text>
                     <el-icon>
                         <Back />
@@ -13,8 +13,7 @@
             <div class="border-botttom pl-20">
                 <div class="d-flex">
                     <template v-for="(item, index) in tabs" :key="index">
-                        <div class="tabs-item" @click="() => { activeName = item.value }"
-                            :class="{ checked: activeName === item.value }">{{ item.label }}</div>
+                        <div class="tabs-item" @click="() => { activeName = item.value }" :class="{ checked: activeName === item.value }">{{ item.label }}</div>
                     </template>
                 </div>
             </div>
@@ -30,6 +29,7 @@ import { MeetingDetailInfo } from '../models';
 import router from '@/router';
 import { trainingDetailById, trainingMembers } from '@/api/training';
 import MeetingDetailAttend from '../models/meeting-detail-attend.vue'
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { dm_training_join_type, yes_no, lm_training_cert, dm_training_status, dm_training_signup_status_list } = toRefs<any>(proxy?.useDict('dm_training_join_type', 'yes_no', 'lm_training_cert', 'dm_training_status', 'dm_training_signup_status_list'));
 // 获取详情
@@ -38,6 +38,7 @@ const tabs = ref([
     { label: '会议信息', value: '2' },
 
 ])
+
 const activeName = ref('1');
 const form = ref<any>(null);
 const query = useRoute().query;
@@ -100,4 +101,4 @@ onMounted(() => {
 .border-botttom {
     border-bottom: 1px solid #d7d7d7;
 }
-</style>
+</style>

+ 1 - 1
src/views/training/meeting/index.vue

@@ -81,7 +81,7 @@
                         <vxe-column title="临时报名通道" align="center" field="createByName" width="120"
                             :formatter="colNoData">
                             <template #default="{ row }">
-                                <el-popconfirm confirm-button-text="修改" cancel-button-text="取消" title="是否修改临时报名的状态?"
+                                <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" title="通过临时报名通道报名将不受时间限制,是否确认打开?"
                                     :disabled="row.trainingStatus == '2'" @confirm="confirmEvent(row)"
                                     @cancel="cancelEvent">
                                     <template #reference>

+ 13 - 12
src/views/training/models/meeting-custom-preview.vue

@@ -4,14 +4,14 @@
             <div v-if="field.name.includes('text1-')" prop="label">
                 <el-tag type="info" size="small">单行文本</el-tag>
                 <div class="d-flex flex-cln pb-5 pt-5">
-                    <div class="pb-5 f-s-16 f-w-6 c-#606266"  >{{ field.label }}</div>
+                    <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                     <el-input class="pd-5 disabled-input" :placeholder="'请输入'" style="width: 340px; pointer-events: none ;" />
                 </div>
             </div>
             <div v-else-if="field.name.includes('text2-')" prop="label">
                 <el-tag type="info" size="small">多行文本</el-tag>
                 <div class="d-flex flex-cln pb-5 pt-5">
-                    <div class="pb-5 f-s-16 f-w-6 c-#606266" >{{ field.label }}</div>
+                    <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                     <el-input
                         class="pd-5 disabled-input"
                         :placeholder="'请输入'"
@@ -89,8 +89,8 @@
                 </div>
             </div>
             <div v-if="field.name.includes('sex-')">
-                <div class="pb-5 f-s-16 f-w-6">{{ field.label }}</div>
-                <el-radio-group :disabled="true">
+                <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
+                <el-radio-group>
                     <el-radio value="1" v-for="(item, index) in field.options" :key="index">
                         {{ item.label}}
                     </el-radio>
@@ -98,19 +98,19 @@
             </div>
         </template>
         <template v-if="field.type === '3'">
-            <div class="pb-5 f-w-6 f-s-16">出生日期</div>
-            <el-time-select v-if="field.label == '出生日期'" style="width: 340px" start="08:30" step="00:15" end="18:30" placeholder="请选择出生日期" :disabled="true" />
+            <div class="pb-5 f-w-6 f-s-16 c-#606266">出生日期</div>
+            <el-time-select v-if="field.label == '出生日期'" style="width: 340px" start="08:30" step="00:15" end="18:30" placeholder="请选择出生日期" />
         </template>
         <template v-if="field.type === '6' || field.type === '8' || field.type === '9'">
             <div prop="label">
                 <div class="d-flex flex-cln">
                     <div>
                         <el-tag type="info" class="" size="small" v-if="field.name.includes('pic1-')">图片</el-tag>
-                        <el-tag type="info" size="small" v-else-if="field.name.includes('file1-')">文件</el-tag>
-                        <el-tag type="info" size="small" v-else>图文描述</el-tag>
+                        <el-tag type="info" size="small" v-if="field.name.includes('file1-')">文件</el-tag>
+                        <el-tag type="info" size="small" v-if="field.name.includes('pic2-')">图文描述</el-tag>
                     </div>
-                    <div class="pb-5 f-s-16 f-w-6 c-#606266"  >{{ field.label }}</div>
-                    <el-input ref="titleInput" class="pd-5 no-disabled-input"  v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable " />
+                    <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
+                    <el-input ref="titleInput" class="pd-5 no-disabled-input" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable />
                 </div>
             </div>
             <ImageUpload v-if="!field.name.includes('pic2')" v-model="field.defValue" :limit="1" isString class="pl-5 noup"></ImageUpload>
@@ -133,6 +133,7 @@ const prop = defineProps<{
 <style scoped>
 
 .border1 {
-    border: 1px solid #f2f2f2;
+    border: 1px solid transparent;
     background-color: #fff;
-}</style>
+}
+</style>

+ 107 - 39
src/views/training/models/meeting-detail-info.vue

@@ -1,54 +1,59 @@
 <template>
     <div class="flex1 over-auto">
         <div class="pd-16 ov-hd">
-            <div><span class="c-primary">|</span> 会议基本信息</div>
+            <div class="info-title f-s-18 c-333 f-w-7 pb-10">会议基本信息</div>
             <el-descriptions :column="4">
                 <el-descriptions-item label="会议名称:">{{ form?.trainingName || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="培训时间:">{{ form?.trainingStart }}~{{ form?.trainingEnd
-                }}</el-descriptions-item>
-                <el-descriptions-item label="报名时间:">{{ form?.signupStart }}~{{ form?.signupEnd
-                }}</el-descriptions-item>
-                <el-descriptions-item label="培训方式:">{{ selectDictLabel(dm_training_join_type, form?.joinType) ||
-                    '-'
-                }}</el-descriptions-item>
-                <el-descriptions-item label="培训地点:">{{ form?.trainingLocation || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="会议时间:">{{ form?.trainingStart }}~{{ form?.trainingEnd}}</el-descriptions-item>
+                <el-descriptions-item label="报名时间:">{{ form?.signupStart }}~{{ form?.signupEnd }}</el-descriptions-item>
+                <el-descriptions-item label="会议方式:">
+                    {{ selectDictLabel(dm_training_join_type, form?.joinType) || '-'}}
+                </el-descriptions-item>
+                <el-descriptions-item label="会议地点:">{{ form?.trainingLocation || '-' }}</el-descriptions-item>
                 <el-descriptions-item label="联系人:">{{ form?.contactName || '-' }}</el-descriptions-item>
                 <el-descriptions-item label="联系电话:">{{ form?.tel || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="报名人数:" v-if="form?.conditions.totalCheck
-                    == '1'">限制 {{
-                        form?.conditions.total }}</el-descriptions-item>
-                <el-descriptions-item label="报名人数:" v-else> 不限制</el-descriptions-item>
-                <el-descriptions-item label="限制条件:" v-if="form?.conditions">{{ form?.conditions?.levelTotalCheck == '1'
-                    ?
-                    '按盟员单位等级限制' : '' }} {{
-                        form.conditions.cpyTotalCheck == '1'
-                            ? '按每家企业人数限制' : '' }}</el-descriptions-item>
+                <el-descriptions-item label="报名人数:" v-if="form?.conditions.totalCheck == '1'">
+                    限制
+                    {{form?.conditions.total }}
+                </el-descriptions-item>
+                <el-descriptions-item label="报名人数:" v-else>不限制</el-descriptions-item>
+                <el-descriptions-item label="限制条件:" v-if="form?.conditions">
+                    {{ form?.conditions?.levelTotalCheck == '1'?'按盟员单位等级限制' : '' }}
+                    {{form.conditions.cpyTotalCheck == '1'? '按每家企业人数限制' : '' }}
+                </el-descriptions-item>
                 <el-descriptions-item label="是否电子手签:">{{ form?.eleSignature == '1' ? "是" : '否' }}</el-descriptions-item>
                 <el-descriptions-item label="创建人:">{{ form?.createByName || '-' }}</el-descriptions-item>
                 <el-descriptions-item label="创建时间:">{{ form?.createTime || '-' }}</el-descriptions-item>
             </el-descriptions>
+            <el-descriptions :column="4">
+                <el-descriptions-item label="会议详情:">{{ form?.description || '-' }}</el-descriptions-item>
+                <el-descriptions-item label=""></el-descriptions-item>
+                <el-descriptions-item label=""></el-descriptions-item>
+                <el-descriptions-item label="与会须知:">{{ form?.notice || '-' }}</el-descriptions-item>
+            </el-descriptions>
             <div class="d-flex f-s-14 c-666 mb-10">
                 <div class="flex1">
-                    <div class="c-333 mb-10">培训详情:</div>
-                    <div>{{ form?.description || '-' }}</div>
-                </div>
-                <div class="flex1">
-                    <div class="c-333 mb-10">与会须知:</div>
-                    <div>{{ form?.notice || '-' }}</div>
-                </div>
-                <div class="flex1">
-                    <div class="c-333 mb-10">会议备注:</div>
-                    <div>{{ form?.remark || '-' }}</div>
+                    <div class="c-333 mb-10">
+                        会议备注:
+                        <span v-if="!form?.remark">-</span>
+                    </div>
+                    <div v-if="form?.remark">{{ form?.remark || '-' }}</div>
                 </div>
                 <div v-if="form?.attachments" class="flex1">
-                    <div class="c-333 mb-10">相关文件:</div>
-                    <FileLook v-model="form.attachments" :span="12"></FileLook>
+                    <div class="c-333 mb-10">
+                        相关文件:
+                        <span v-if="form?.attachments.length==0">-</span>
+                    </div>
+                    <FileLook v-if="form?.attachments.length!==0" v-model="form.attachments" :span="12"></FileLook>
                 </div>
             </div>
             <div class="d-flex f-s-14 c-666">
-                <div v-if="form?.attachments" class="flex1">
-                    <div class="c-333 mb-10">微信群聊二维码:</div>
-                    <div class="d-flex flex-wrap">
+                <div class="flex1">
+                    <div class="c-333 mb-10">
+                        微信群聊二维码:
+                        <span v-if="form?.attachments.length==0">-</span>
+                    </div>
+                    <div class="d-flex flex-wrap" v-if="form?.attachments.length!==0">
                         <template v-for="(item, index) in form?.wechatQrCode" :key="index">
                             <div class="mr-10 mb-10">
                                 <ImagePreview :src="item" :width="100" :height="100"></ImagePreview>
@@ -57,14 +62,20 @@
                     </div>
                 </div>
                 <div class="flex1">
-                    <div class="c-333 mb-10">封面图:</div>
-                    <div>
+                    <div class="c-333 mb-10">
+                        封面图:
+                        <span v-if="!form?.coverImgUrl">-</span>
+                    </div>
+                    <div v-if="form?.coverImgUrl">
                         <ImagePreview :src="form?.coverImgUrl" :width="100" :height="100"></ImagePreview>
                     </div>
                 </div>
-                <div v-if="form?.attachments" class="flex1">
-                    <div class="c-333 mb-10">会议图:</div>
-                    <div class="d-flex flex-wrap">
+                <div class="flex1">
+                    <div class="c-333 mb-10">
+                        会议图:
+                        <span v-if="form?.trainingImg.length == 0">-</span>
+                    </div>
+                    <div class="d-flex flex-wrap" v-if="form?.trainingImg.length !== 0">
                         <template v-for="(item, index) in form?.trainingImg" :key="index">
                             <div class="mr-10 mb-10">
                                 <ImagePreview :src="item" :width="100" :height="100"></ImagePreview>
@@ -90,12 +101,35 @@
                     </vxe-column>
                 </vxe-table>
             </div>
+            <div class="f-s-14">
+                <div class="c-333 mb-10">报名信息:</div>
+                <div class="w-400 h-700 border over-auto">
+                    <div class="pd-10 border bg-#fafafa">
+                        <div class="pt-10  f-s-20 f-w-6 d-flex j-c a-c flex-cln ">报名信息</div>
+                        <div class="f-s-12 f-w-4 d-flex j-start c-red">此页面为意向人报名时所见页面:</div>
+                    </div>
+                    <template v-for="(item, index) in fixedField" :key="index">
+                        <div class="pd-15 border1 c-#D7D7D7 d-flex j-sb">
+                            <span class="c-#606266 f-s-16 f-w-6">{{ item.label }}</span>
+                            <span class="f-s-14">请输入</span>
+                        </div>
+                    </template>
+                    <template v-for="(field, index) in fields" :key="index">
+                        <div class="meeting-custom-wrapper">
+                            <meetingCustomPreview :field="field" style="pointer-events: none" v-if="field" />
+                        </div>
+                    </template>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup name="MeetingDetailInfo" lang="ts">
+import { ref, onMounted } from 'vue';
 import { FileLook } from '@/views/models';
+import { FieldDefinition } from './type'
+import meetingCustomPreview from './meeting-custom-preview.vue'
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { dm_training_join_type, yes_no, dm_training_cert, dm_training_status, dm_training_signup_status_list } = toRefs<any>(proxy?.useDict('dm_training_join_type', 'yes_no', 'dm_training_cert', 'dm_training_status', 'dm_training_signup_status_list'));
 const props = defineProps({
@@ -104,7 +138,37 @@ const props = defineProps({
         default: () => ({})
     },
 });
-
+const fields = ref<FieldDefinition[]>([])
+const fixedField = ref<FieldDefinition[]>([{
+    name: `ent-${generateSecureRandomString()}`,
+    label: '企业名称', type: '1',
+    required: '1', readonly: '0',
+}, {
+    name: `name-${generateSecureRandomString()}`,
+    label: '姓名', type: '1', readonly: '0',
+    required: '1'
+}, {
+    name: `pos-${generateSecureRandomString()}`,
+    label: '职务', type: '1', readonly: '0',
+    required: '1'
+}, {
+    name: `Con-${generateSecureRandomString()}`,
+    label: '联系方式', type: '1', readonly: '0',
+    required: '1'
+}])
+function generateSecureRandomString(length = 8) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    const randomValues = new Uint32Array(length);
+    window.crypto.getRandomValues(randomValues);
+    let result = '';
+    randomValues.forEach((value) => {
+        result += chars[value % chars.length];
+    });
+    return result;
+}
+onMounted(() => {
+    fields.value = props.form.questions
+});
 </script>
 <style scoped lang="scss">
 .tabs-item {
@@ -127,4 +191,8 @@ const props = defineProps({
 .border-botttom {
     border-bottom: 1px solid #d7d7d7;
 }
+
+.border {
+    border: 1px solid #dcdfe6;
+}
 </style>

+ 3 - 2
src/views/training/models/meeting-editors.vue

@@ -241,6 +241,7 @@ import shanchu from '@/assets/images/shanchu.png';
 import { VueDraggable } from 'vue-draggable-plus';
 import { ref, reactive, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { cloneDeep } from 'lodash';
 // 需要添加以下导入
 import MeetingCustom from './meeting-custom.vue';
 import { propTypes } from '@/utils/propTypes';
@@ -264,7 +265,7 @@ const close = () => {
     emit('update:show', false);
     emit('close', false);
     console.log(props.info);
-    
+
 };
 const setActive = (field: any) => {
     activeField.value = field;
@@ -382,7 +383,7 @@ const fixedField = ref<FieldDefinition[]>([
     }
 ]);
 onMounted(() => {
-    fields.value = JSON.parse(JSON.stringify(props.info));
+    fields.value = cloneDeep(props.info);
 });
 watch(
     () => props.show,