Merge remote-tracking branch 'origin/dev' into dev

src/views/informationissue/informationApplication.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">信息发布申请</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+          <h4 class="common-dialog-title">信息内容</h4>
+          <div class="box1">
+            <el-form-item label="标题：" prop="title">
+              <el-input v-model="formData.title" placeholder="请输入标题" style="width: 468px !important" />
+            </el-form-item>
+
+            <el-form-item label="发布单位：" prop="publishUnit">
+              <el-input v-model="formData.publishUnit" placeholder="请输入发布单位" style="width: 468px !important" />
+            </el-form-item>
+
+            <el-form-item label="信息模板：" prop="templateType">
+              <el-radio-group v-model="formData.templateType">
+                <el-radio label="预设模板">预设模板</el-radio>
+                <el-radio label="自定义模板">自定义模板</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="formData.templateType === '预设模板'" label="预设模板：" prop="presetTemplate">
+              <el-select v-model="selectedPresetTemplate" placeholder="请选择预设模板" style="width: 300px !important">
+                <el-option v-for="option in presetTemplates" :key="option.value" :label="option.label" :value="option.value"></el-option>
+              </el-select>
+              <el-text class="common-btn-text-primary" @click="showExample">样例</el-text>
+            </el-form-item>
+            <el-form-item v-if="formData.templateType === '自定义模板'" prop="customPageUrl">
+              <el-input v-model="formData.customPageUrl" placeholder="请输入自定义详情页面链接地址" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="信息内容：" prop="messageContent">
+              <el-input v-model="formData.messageContent" type="textarea" placeholder="请输入信息内容" style="width: 468px !important"></el-input>
+            </el-form-item>
+            <el-form-item label="上传附件：" prop="files">
+              <el-upload
+                ref="upload"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-upload="beforeUpload"
+                :on-success="handleSuccess"
+                :file-list="files"
+                list-type="text"
+                multiple
+                :limit="3"
+                :on-exceed="handleExceed"
+                action="https://jsonplaceholder.typicode.com/posts/"
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <template #tip>
+                  <div class="el-upload__tip">支持扩展名: .doc, .docx, .pdf, .jpg</div>
+                </template>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <h4 class="common-dialog-title">推送配置</h4>
+          <div class="box1">
+            <el-form-item label="发布名单：" prop="releaseList" style="width: 468px !important"
+              ><span class="highlight-text">已选择{{ formData.releaseList }}人</span>
+              <el-text class="common-btn-text-primary" @click="showReleaseList">查看详情</el-text>
+            </el-form-item>
+            <el-row :gutter="18">
+              <el-col :span="6">
+                <el-form-item label="发布时间：" prop="releaseTime">
+                  <el-button type="text" @click="publishNow">立即发布</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="定时发布：" prop="timing">
+                  <el-date-picker v-model="formData.timing" type="datetime" placeholder="选择发布时间"></el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="消息反馈方式：" prop="feedbackWay" style="width: 468px !important">
+              <el-select v-model="formData.feedbackWay" placeholder="请选择消息反馈方式">
+                <el-option v-for="option in feedbackOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <h4 class="common-dialog-title">审核配置</h4>
+          <div class="box1">
+            <el-form-item label="审核材料：" prop="auditMaterials">
+              <el-upload
+                ref="auditUpload"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-upload="beforeUpload"
+                :on-success="handleSuccess"
+                :file-list="auditMaterials"
+                list-type="text"
+                multiple
+                :limit="3"
+                :on-exceed="handleExceed"
+                action="https://jsonplaceholder.typicode.com/posts/"
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <template #tip>
+                  <div class="el-upload__tip">允许上传的文件格式：doc、docx、pdf、jpg、png</div>
+                </template>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="审核人：" prop="auditor">
+              <el-input v-model="formData.auditor" placeholder="请输入审核人姓名" style="width: 368px !important" />
+            </el-form-item>
+          </div>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="$emit('close')">返回</el-button>
+          <el-button @click="submitForm">编辑</el-button>
+          <el-button type="primary" @click="submitForm">提交</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const formData = ref({
+  title: '',
+  publishUnit: '',
+  templateType: '',
+  messageContent: '',
+  releaseList: 0,
+  releaseTime: '',
+  feedbackWay: '',
+  auditor: '',
+  timing: '',
+  materials: ''
+});
+
+const files = ref([]);
+const auditMaterials = ref([]);
+
+const rules = {
+  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
+  publishUnit: [{ required: true, message: '请填写发布单位', trigger: 'blur' }],
+  releaseList: [{ required: true, message: '请选择发布名单', trigger: 'change' }],
+  timing: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
+  feedbackWay: [{ required: true, message: '请选择消息反馈方式', trigger: 'change' }],
+  auditor: [{ required: true, message: '请填写审核人', trigger: 'blur' }]
+};
+
+const feedbackOptions = [
+  { value: '仅需阅读', label: '仅需阅读' },
+  { value: '点击确认', label: '点击确认' },
+  { value: '签字确认', label: '签字确认' }
+];
+
+const presetTemplates = [
+  { value: 'template1', label: '模板一' },
+  { value: 'template2', label: '模板二' }
+];
+const selectedPresetTemplate = ref('');
+const selectedPresetTemplateExample = ref('');
+watch(selectedPresetTemplate, (newVal) => {
+  selectedPresetTemplateExample.value = presetTemplateExamples[newVal] || '';
+});
+
+const handlePreview = (file) => {
+  console.log(file);
+};
+
+const handleRemove = (file, fileList) => {
+  console.log(file, fileList);
+};
+
+const beforeUpload = (file) => {
+  // 处理文件上传前的逻辑
+  const isValidType = ['doc', 'docx', 'pdf', 'jpg', 'png'].includes(file.name.split('.').pop().toLowerCase());
+  if (!isValidType) {
+    ElMessage.error('不支持的文件类型');
+    return false;
+  }
+  return true;
+};
+
+const handleSuccess = (response, file, fileList) => {
+  console.log(response, file, fileList);
+};
+
+const showReleaseList = () => {
+  ElMessage.info('点击了查看发布名单');
+};
+const publishNow = () => {
+  ElMessage.info('点击了立即发布');
+};
+const submitForm = () => {
+  if (validateFormData()) {
+    ElMessage.success('表单提交成功');
+  }
+};
+
+const validateFormData = (): boolean => {
+  let isValid = true;
+  for (const rule of Object.values(rules)) {
+    for (const r of rule) {
+      const value = formData.value[r.field];
+      if (r.required && (!value || value.length === 0)) {
+        ElMessage.error(r.message);
+        isValid = false;
+      }
+    }
+  }
+  return isValid;
+};
+</script>
+
+<style scoped>
+.box1 {
+  border: 1px solid #dcdfe6; /* 浅灰色边框 */
+  padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
+  margin-bottom: 10px;
+}
+.highlight-text {
+  font-weight: bold; /* 加粗 */
+  font-size: 1.2em; /* 放大字体大小 */
+}
+</style>