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

<template>
  <div class="app-container">
    <div v-show="!informationDetailState.show && !informationViewState.show && !informationApprovalState.show">
      <transition name="fade">
        <div v-show="showSearch">
          <el-form ref="queryFormRef" :model="queryParams" label-width="auto">
            <el-row :gutter="20">
              <el-col :span="8">
                <div style="margin-bottom: 10px">
                  <el-segmented
                    v-model="queryParams.dispose_status"
                    :options="disposeStatusOptions"
                    size="large"
                    block
                    @change="handleDisposeStatus"
                  />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="发布单位：">
                  <el-input v-model="queryParams.publish_group" placeholder="请输入内容" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发布状态：">
                  <el-select v-model="queryParams.publish_status" placeholder="请选择" clearable>
                    <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="审批状态：">
                  <el-select v-model="queryParams.examine_status" placeholder="请选择" clearable>
                    <el-option v-for="item in approvalStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
                <el-button icon="Refresh" @click="resetSearch">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
      <!-- 表格组件 -->
      <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column label="序号" align="center" width="60">
          <template #default="scope">
            {{ (queryParams.page - 1) * queryParams.page_size + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column label="发布单位" align="center" prop="publish_group" />
        <el-table-column label="信息内容" align="left" prop="content" width="400" />
        <el-table-column label="发布时间" align="center" prop="publish_time" />
        <el-table-column label="发布渠道" align="center" prop="publish_channel" />
        <el-table-column label="发布申请人" align="center" prop="nick_name" />
        <el-table-column label="待处理人" align="center" prop="examine_user" />
        <el-table-column label="发布状态" align="center" prop="publish_status" >
          <template #default="scope">
            <div class="common-flex">
              <i :class="getStatusClass(scope.row.publish_status)"></i>
              <dict-tag :options="publishStatusOptions" :value="scope.row.publish_status" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批状态" align="center" prop="examine_status">
          <template #default="scope">
            <div class="common-flex">
              <i :class="getStatusClass2(scope.row.examine_status)"></i>
              <dict-tag :options="approvalStatusOptions" :value="scope.row.examine_status" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发布统计" align="center" prop="statistics">
          <template #default="scope">
            <div class="statistics-container">
              <p>选择人数: {{ scope.row.user_count }}</p>
              <p>成功: {{ scope.row.user_ok_count }}</p>
              <p>失败: {{ scope.row.user_err_count }}</p>
              <p>发送中: {{ scope.row.user_sending_count }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
            <el-text v-if="scope.row && scope.row.is_my_edit" class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
            <el-text v-if="scope.row && scope.row.is_my_examine" class="common-btn-text-primary" @click="handleApproval(scope.row)">审批</el-text>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="tableData" />
    </div>
    <InformationDetail v-if="informationDetailState.show" :event-id="informationDetailState.eventId" @close="handleCancel" />
    <InformationView v-if="informationViewState.show" :event-id="informationViewState.eventId" @close="handleCancel" />
    <InformationApproval v-if="informationApprovalState.show" :event-id="informationApprovalState.eventId" @close="handleCancel" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { getInformation } from '@/api/informationissue/informationissue';
import InformationDetail from './informationDetail.vue';
import InformationView from './informationView.vue';
import InformationApproval from './informationApproval.vue';
const showSearch = ref(true);
const queryFormRef = ref();
const tableData = ref([]);
const loading = ref(true);
const ids = ref([]);
const selectedRow = ref(null);
const initFormData = reactive({
  publish_group: '',
  publish_status: '',
  examine_status: '',
  dispose_status: '',
  content: '',
  publish_time: '',
  publish_channel: '',
  nick_name: '',
  examine_user: '',
  user_count: '',
  user_ok_count: '',
  user_err_count: '',
  user_sending_count: '',
  info_type: '',
  id: ''
});
// 表单数据
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    page: 1,
    page_size: 10,
    publish_group: '',
    publish_status: '',
    examine_status: '',
    dispose_status: '0'
  }
});
const { queryParams } = toRefs(data);
const total = ref(0);

const publishStatusOptions = reactive([
  { value: '0', label: '全部' },
  { value: '1', label: '草稿' },
  { value: '2', label: '审批中' },
  { value: '3', label: '发布中' },
  { value: '4', label: '已发布' },
  { value: '9', label: '取消发布' }
]);

const approvalStatusOptions = reactive([
  { value: '0', label: '全部' },
  { value: '1', label: '待审批' },
  { value: '2', label: '审批中' },
  { value: '3', label: '审批通过' },
  { value: '9', label: '审批不通过' }
]);

const disposeStatusOptions = reactive([
  { value: '0', label: '全部' },
  { value: '1', label: '待处理' },
  { value: '2', label: '已处理' }
]);

const getStatusClass = (value) => {
  debugger
  if (value === 3) {
    return 'color3';
  } else if (value === 1) {
    return 'color1';
  } else if (value === 2) {
    return 'color2';
  } else if (value ===9 ) {
    return 'color9';
  } else if (value === 4) {
    return 'color4'
  }
};

const getStatusClass2 = (value) => {
  if (value === 1) {
    return 'color1';
  } else if (value === 2) {
    return 'color2';
  } else if (value === 3) {
    return 'color4';
  } else if (value === 9) {
    return 'color9';
  }
};

const handleDisposeStatus = (val: any) => {
  queryParams.value.dispose_status = val;
  handleSearch();
};

const handleSearch = () => {
  queryParams.value.page = 1;
  getList();
};

const resetSearch = () => {
  queryParams.value = { page: 1, page_size: 10, publish_group: '', publish_status: '', examine_status: '', dispose_status: '0' };
  handleSearch();
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.eventId);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
};

// 查看详情对话框
let informationDetailState = reactive({
  show: false,
  eventId: ''
});

// 编辑对话框
let informationViewState = reactive({
  show: false,
  eventId: ''
});

// 审批对话框
let informationApprovalState = reactive({
  show: false,
  eventId: ''
});

const handleView = (row) => {
  if (row) {
    informationViewState.eventId = row.id + ''; // 假设eventId是id字段
    informationViewState.show = true;
  }
};
const handleUpdate = (row) => {
  if (row) {
    informationDetailState.eventId = row.id; // 假设eventId是id字段
    informationDetailState.show = true;
  }
};

const handleApproval = (row) => {
  if (row) {
    informationApprovalState.eventId = row.id + ''; // 假设eventId是id字段
    informationApprovalState.show = true;
  }
};

const handleCancel = () => {
  informationDetailState.show = false;
  informationViewState.show = false;
  informationApprovalState.show = false;
};

const getList = () => {
  loading.value = true;
  getInformation(queryParams.value) // 假设 getInformation 已经定义好
    .then((res) => {
      if (res.code === 200) {
        // 映射返回的数据到 tableData
        tableData.value = res.data.map((item) => ({
          id: item.id,
          info_type: item.info_type,
          publish_group: item.publish_group || '未知',
          content: item.content || '未知',
          publish_time: item.publish_time || '未知',
          publish_channel: item.publish_channel || '未知',
          nick_name: item.nick_name || '未知',
          examine_user: item.examine_user || '未知',
          publish_status: item.publish_status,
          examine_status: item.examine_status,
          user_count: item.user_count || 0,
          user_ok_count: item.user_ok_count || 0,
          user_err_count: item.user_err_count || 0,
          user_sending_count: item.user_sending_count || 0,
          is_my_examine: item.is_my_examine || false,
          is_my_edit: item.is_my_edit || false
        }));
        total.value = res.total;
      } else {
        console.error(res.msg);
      }
    })
    .catch((error) => {
      console.error('请求错误:', error);
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.color1 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bfbfbf;
  display: inline-block;
  margin-right: 5px;
}
.color2 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:  #2c81ff;
  display: inline-block;
  margin-right: 5px;
}
.color3 {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background:  #ffa148;
   display: inline-block;
   margin-right: 5px;
 }
.color4 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:  #62dea3;
  display: inline-block;
  margin-right: 5px;
}
.color9 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:  #fa0000;
  display: inline-block;
  margin-right: 5px;
}
</style>