orgManager/src/views/operations/tenantNotice/currentAnnouncements/list.vue

<template>
   <table-search-card  :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
     <template #left>
       <table-search-date v-model:dateRange="dateRange" ref="searchDateRef" @dateChange="handleQuery" v-model:operateTimeType="operateTimeType"></table-search-date>
        <select-input-form ref="selectInputFormRef" :queryParamsList="queryParamsList" :queryParams="queryParams"
            @handleQuery="handleQuery">
         </select-input-form>
      <el-form-item prop="noticeType">
         <custom-select style="width: 130px;" v-model="queryParams.noticeType" :options="noticeTypeArr" :placeholder="t('全部类型')"></custom-select>
      </el-form-item>
     </template>
     <template #right>
      <!-- <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['tenant:notice:add']">{{ t('新增公告') }}</el-button> -->
     </template>
   </table-search-card>

  <el-table v-loading="loading" class="c-table-main" :data="agentList" border @select="tableSelect"
  @select-all="tableSelect">
   <el-table-column align="center" type="selection" width="55" />
   <el-table-column :label="t('ID')" min-width="100" align="center" prop="id" >
       <template #default="{row}">
          {{ row.id }}
       </template>
       </el-table-column>
     <el-table-column :label="t('公告类型')" align="center" min-width="150" prop="createTime" >
      <template #default="{row}">
        <span v-if="row.noticeType == 1">{{ t('日常公告') }}</span>
        <span v-if="row.noticeType == 2">{{ t('不停机维护') }}</span>
      </template>
      </el-table-column>
     <el-table-column :label="t('标题')" min-width="100" align="center" prop="title" >
       <template #default="{row}">
          {{ row.title }}
       </template>
       </el-table-column>
     <el-table-column :label="t('内容')" min-width="100" align="center" prop="content" >
       <template #default="{row}">
          <el-popover :width="260" trigger="hover">
            <div v-html="row.content"></div>
            <template #reference>
               <div class="two-line-clamp" v-html="row.content"></div>
            </template>
         </el-popover>
       </template>
       </el-table-column>
     <el-table-column :label="t('发送时间')" min-width="100" align="center" prop="noticeStartTime" >
       <template #default="{row}">
         {{ parseTime(row.noticeStartTime) }}
       </template>
       </el-table-column>
     <el-table-column :label="t('公告状态')" min-width="70" align="center" prop="noticeStatus" >
       <template #default="{row}">
         <dict-tag :options="noticeStatusArr" :value="row.noticeStatus" />

       </template>
       </el-table-column>
     <el-table-column :label="t('操作')" align="center" width="160">
        <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)" v-hasPermi="['tenant:notice:query']">{{ t('详情') }}</el-button>
        </template>
     </el-table-column>
  </el-table>

  <pagination
     v-show="total > 0"
     :total="total"
     v-model:page="queryParams.pageNum"
     v-model:limit="queryParams.pageSize"
     @pagination="getList"
  />
        <!-- 新增站点 -->
 <add-site-dialog v-if="isShowDialog" :addEditStatus="addEditStatus" :modifyDate="modifyDate" @submit="getList"
   v-model:show="isShowDialog"></add-site-dialog>
   <modify-dialog v-if="openView" :modifyDate="modifyDate" @submit="getList"
      v-model:show="openView"></modify-dialog>
</template>

<script setup name="Agent">
import {getTenantNoticeList,getTenantNoticeDetail} from "@/api/operations";
import CustomSelect from '@/components/CustomSelect';
import CheckboxSelect from "@/components/CheckboxSelect"; // 多选框
import TableSearchDate from '@/components/TableSearchDate'
import AddSiteDialog from "./components/AddSiteDialog"; // 新增站点弹窗
import ModifyDialog from "./components/ModifyDialog";
import { getLocalStorage } from "@/utils/auth";
import Crontab from '@/components/Crontab'
import { parseTime } from '@/utils/ruoyi'; // 时间格式化
import { onMounted } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const agentList = ref([]);
const loading = ref(true);
const total = ref(0);

const openView = ref(false);

const queryParamsList = ref([{
   label: proxy.t('标题'),
   value: 'title',
},{ 
   label: proxy.t('内容'),
   value: 'content',
}]);
const noticeStatusArr = ref([
   { label: proxy.t('待发布'), value: '1' },
   { label: proxy.t('进行中'), value: '2' },
   { label: proxy.t('已过期'), value: '3' },
]);
const noticeTypeArr = ref([
   { label: proxy.t('日常公告'), value: '1' },
   { label: proxy.t('不停机维护'), value: '2' },
])
const dateRange = ref([]),operateTimeType = ref("day");
const data = reactive({
form: {},
queryParams: {
   pageNum: 1,
    pageSize: 10,
    searchType:'title',
    noticeStatus:2,
},
});
// 批量操作
const tableRef = ref(),
   isAllSelection = ref(false),  // 是否全选
   selectionData = ref([]),   // 选中的表格数据
   batchOpType = ref('');          // 选中的批量操作类型
// 勾选表格
const tableSelect = (val) => {
   selectionData.value = val;
   // 是否全选中
   if (val.length == agentList.value.length) {
      isAllSelection.value = true;
   } else {
      isAllSelection.value = false;
   }
}
const { queryParams } = toRefs(data);
 // 新增按钮操作
 const addEditStatus = ref('add'), isShowDialog = ref(false), editDataId = ref(''),modifyDate = ref({});
/** 查询列表 */
function getList() {
loading.value = true;

getTenantNoticeList(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
agentList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
/** 新增按钮操作 */
function handleAdd() {
  addEditStatus.value = 'add';
  isShowDialog.value = true;
}
const handleEdit = (row) => {
  addEditStatus.value = 'edit';
  modifyDate.value = row;
  isShowDialog.value = true;
}
const handleView = (row) => {
  openView.value = true;
  getTenantNoticeDetail(row.id).then(response => {
    modifyDate.value = response.data;
  });
//   modifyDate.value = row;
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
const searchDateRef = ref(null);
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
dateRange.value = [];
 operateTimeType.value = "day";
  searchDateRef.value.timeTypeChange(operateTimeType.value)
}
//初始化
onMounted(() => { 
   getList();
});
</script>

<style scoped lang="scss">
.label-scoreRatio{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
span{
  width: 120px;
  text-align: right;
  font-weight: 700;
  padding-right: 12px;
}
}
.scoreRatioTable{
width: calc(100% - 120px);
margin-left: 120px;
}
.two-line-clamp {
   width: 100%;
   height: 50px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-wrap: nowrap;
   line-height: 23px;

}
</style>