yjhtgl-web/src/views/informationissue/informationApplication.vue

<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="formRef" :model="formData" :rules="rules" label-width="120px">
          <div class="box1">
            <h3 class="common-dialog-title" style="font-weight: bold;margin-bottom: 20px;margin-left: 50px">信息内容</h3>
            <div style="margin-left: 60px;margin-bottom: 60px">
              <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="info_type">
                <el-select v-model="formData.info_type" placeholder="请选择信息类型" style="width: 468px !important">
                  <el-option v-for="dict in mm_info_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="发布单位：" prop="publish_group">
                <el-input v-model="formData.publish_group" placeholder="请输入发布单位" style="width: 468px !important" />
              </el-form-item>

              <el-form-item label="信息模板：" prop="template_type">
                <el-radio-group v-model="formData.template_type">
                  <el-radio value="0">预设模板</el-radio>
                  <el-radio value="1">自定义模板</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="formData.template_type === '0'" label="预设模板：" prop="template_type">
                <el-select
                  v-model="formData.template_id"
                  placeholder="请选择预设模板"
                  style="width: 468px !important"
                  @change="handleTemplateIdChanged"
                >
                  <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="showTemplateExample">样例</el-text>
              </el-form-item>
              <el-form-item v-if="formData.template_type === '1'" prop="template_url">
                <el-input v-model="formData.template_url" placeholder="请输入自定义详情页面链接地址" style="width: 468px !important" />
              </el-form-item>
              <el-form-item label="信息内容：" prop="content">
                <el-input v-model="formData.content" :rows="6" type="textarea" placeholder="请输入信息内容" style="width: 468px !important"></el-input>
              </el-form-item>
              <el-form-item label="上传附件：" prop="attachs">
                <file-upload v-model="formData.attachs" :limit="4" :file-type="['pdf', 'doc', 'docx', 'jpg', 'png']" />
              </el-form-item>
            </div>
          </div>


          <div class="box1">
            <h3 class="common-dialog-title" style="font-weight: bold;margin-bottom: 20px;margin-left: 50px">推送配置</h3>
            <div style="margin-left: 60px;margin-bottom: 60px">
              <el-form-item label="发布名单：" prop="releaseList" style="width: 468px !important">
                <span class="highlight-text" style="margin-right: 20px; margin-left: 20px">已选择{{ formData.user_count }}人</span>
                <el-text class="common-btn-text-primary" @click="toggleReleaseList">查看详情</el-text>
              </el-form-item>
              <el-row :gutter="18">
                <el-col :span="14">
                  <el-form-item label="发布时间：" prop="publish_time">
                    <el-radio-group v-model="formData.publish_type" style="margin-left: 20px">
                      <el-radio :value="'0'" @change="publishNow">立即发布</el-radio>
                      <el-radio :value="'1'">定时发布</el-radio>
                    </el-radio-group>
                    <div v-if="formData.publish_type === '0'" style="min-width: 240px; margin-left: 20px">发布时间：{{ formattedCurrentTime }}</div>
                    <el-date-picker v-else v-model="formData.publish_time" type="datetime" placeholder="选择发布时间" style="width: 250px !important; margin-left: 20px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="消息反馈方式：" prop="response_type" style="width: 600px !important">
                <el-select v-model="formData.response_type" placeholder="请选择消息反馈方式" style="margin-left: 20px">
                  <el-option v-for="option in feedbackOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="box1">
            <h3 class="common-dialog-title" style="font-weight: bold;margin-bottom: 20px;margin-left: 50px">审核配置</h3>
            <div style="margin-left: 60px;margin-bottom: 60px">
              <el-form-item label="审核材料：" prop="examine_attachs">
                <file-upload v-model="formData.examine_attachs" :limit="4" :file-type="['pdf', 'doc', 'docx', 'jpg', 'png']" style="margin-left: 20px" />
              </el-form-item>
              <el-form-item label="审核人：" prop="auditor">
                <el-autocomplete
                  v-model="formData.examine_user"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入审核人姓名"
                  style="width: 460px !important; margin-left: 20px"
                  @select="handleSelect"
                >
                  <template #default="{ item }">
                    <div class="item_row">
                      <div class="item_row_user_name">账号：<span v-html="highlightKeyword(item)"></span></div>
                      <div class="item_row_nick_name">姓名：{{ item.nickName }}</div>
                      <div class="item_row_dept_name">单位：{{ item.deptName || "（空）" }}</div>
                    </div>
                  </template>

                  <template #suffix>
                    <i class="el-icon-search"></i>
                  </template>
                </el-autocomplete>
              </el-form-item>
            </div>
          </div>

        </el-form>
        <div class="common-dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm" :disabled="buttonDisabled">提交</el-button>
        </div>
      </div>
    </div>
    <ContactSelect
      v-model="contactSelectState.show"
      :tree-data="treeData"
      :default-check-data="selectContactSelectData"
      @confirm="handleContactSelectData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { addInformation, getPhoneList, getTemplateList, getUser } from '@/api/informationissue/informationissue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import debounce from 'lodash/debounce';

const { mm_info_type, mm_info_template_type } = toRefs<any>(
  proxy?.useDict('mm_info_type', 'mm_info_template_type')
);
const formRef = ref(null);
const buttonLoading = ref(false);
const buttonDisabled = ref(false);

const formData = ref({
  title: '',
  info_type: '',
  publish_group: '',
  template_type: '0',
  template_id: '',
  template_url: '',
  content: '',
  publish_type: '0', // 默认选择立即发布
  publish_time: '', // 存储定时发布的时间
  response_type: '',
  examine_by: '',
  examine_user: '', // 显示
  attachs: [],
  examine_attachs: [],
  user_count: 0,
  users: [],
  publish_channel: '粤政易' // 默认
});

const formatTime = (isoString) => {
  const date = new Date(isoString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const publishNow = () => {
  formattedCurrentTime.value = formatTime(new Date().toISOString()); // 设置当前时间为发布时间
};
const formattedCurrentTime = ref(formatTime(new Date().toISOString()));

// 用户数据存储在这里
const users = ref([]);

// 防抖搜索方法
const querySearch = debounce((queryString, cb) => {
  if (queryString) {
    getUser({ userName: queryString })
      .then((res) => {
        users.value = res.rows.map((user) => ({ value: user.userName, userName: user.userName, nickName: user.nickName, deptName: user.deptName }));
        console.log('users: ', users.value)
        cb(users.value);
      })
      .catch((error) => {
        console.error('Error fetching users:', error);
        cb([]);
      });
  } else {
    cb([]);
  }
}, 3000);

function highlightKeyword(item) {
  const keyword = formData.value.examine_user;
  if (!keyword) {
    return item.userName;
  }
  const regex = new RegExp(keyword, 'gi');
  let val = item.userName.replace(regex, match => `<span class="highlight">${match}</span>`);
  return val;
}

const handleSelect = (item) => {
  formData.value.examine_by = item.userName;
};

const rules = {
  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
  info_type: [{ required: true, message: '请选择信息类型', trigger: 'change' }],
  content: [{ required: true, message: '请填写信息内容', trigger: 'blur' }],
  publish_group: [{ required: true, message: '请填写发布单位', trigger: 'blur' }],
  publish_time: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
  response_type: [{ required: true, message: '请选择消息反馈方式', trigger: 'change' }],
  examine_by: [{ required: true, message: '请填写审核人', trigger: 'blur' }],
  attachs: [
    {
      validator: (rule, value, callback) => {
        if (value.length == 0) {
          return callback(new Error('请上传附件'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  examine_attachs: [
    {
      validator: (rule, value, callback) => {
        if (value.length == 0) {
          return callback(new Error('请上传审批附件'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ]
};

const feedbackOptions = [
  { value: '0', label: '仅需阅读' },
  { value: '1', label: '点击确认' },
  { value: '2', label: '签字确认' }
];

const presetTemplates = ref([]);

const submitForm = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      if (formData.value.user_count <= 0) {
        proxy?.$modal.msgError('请选择发布名单');
        return;
      }
      formData.value.users = selectContactSelectData.value.map((u) => ({ user_id: u.id, nick_name: u.label }));
      try {
        buttonLoading.value = true;
        await addInformation(formData.value);
        buttonDisabled.value = true;
        proxy?.$modal.msgSuccess('信息发布申请已提交');
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};

const showTemplateExample = () => {
  ElMessage.info('点击了查看模板样例');
};

const handleTemplateIdChanged = async (value: any) => {
  const n = presetTemplates.value.find((i) => i.value === value);
  formData.value.content = n.content;
};

let treeData = ref([]);
let contactSelectState = reactive({
  show: false
});
const selectContactSelectData = ref([]);
const handleContactSelectData = (data) => {
  console.log('handleContactSelectData:', data);
  selectContactSelectData.value = data;
  formData.value.user_count = data.length;
};
const toggleReleaseList = () => {
  contactSelectState.show = !contactSelectState.show;
};
const fetchTreeData = async () => {
  try {
    const response = await getPhoneList({});
    if (response && response.data) {
      treeData.value = response.data;
    }
  } catch (error) {
    console.error('Failed to fetch information:', error);
  }
};

const openUserSelect = async() => {

};


onMounted(() => {
  fetchTreeData();
  formData.value.publish_time = formattedCurrentTime.value;
  getTemplateList({}).then((res) => {
    res.data.forEach((item, index) => {
      presetTemplates.value.push({ value: item.id, label: item.name, content: item.content });
    });
    getUser({}).then((res) => {
      // console.log('getUser res:', res);
      users.value = res.rows.map((user) => ({ value: user.userName, userName: user.userName, nickName: user.nickName, deptName: user.deptName }));
      console.log('users.value:', users.value);
    });
  });
});
</script>

<style scoped>
.box1 {
  border: 1px solid #dcdfe6; /* 浅灰色边框 */
  padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
  margin-bottom: 10px;
  width: 800px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, .06);
}
.highlight-text {
  font-weight: bold; /* 加粗 */
  font-size: 1.2em; /* 放大字体大小 */
}
.el-icon-search {
    height:20px;
    width:20px;
    background: url("@/assets/images/search.png") no-repeat;
    background-size:20px;
}

:deep(.highlight) {
  color: #fd0f0f;
}

.item_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item_row_user_name {
    margin-left:0px;
  }
  .item_row_nick_name {
    margin-left:10px;
  }
  .item_row_dept_name {
    margin-left:10px;

  }
}
</style>