tenant-Platform/src/views/contentManagement/message.vue

<template>
  <PageMain class="vh100">
    <el-form label-position="left" label-width="auto">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="消息内容">
            <el-input v-model="form.searchValue" placeholder="输入消息标题，内容" :prefix-icon="Search" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布机构">
            <el-cascader clearable style="width: 100%" v-model="form.sendDeptId" :options="institutionList"
              :props="tableProps" />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="">
            <el-button type="primary" @click="getContentList">查询</el-button>
            <el-button type="primary" plain @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <Table height="calc(100% - 56px)" :tableData="tableData" :columns="columns" :showIndex="false" :showSelect="false" :showOperation="true"
      :pageInfo="pageInfo" @getList="getList" :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
      @select-all-change="selectAllChange" @select-change="selectChange">
      <template v-slot:table-title-btn>
        <div>
          <!-- <el-button type="primary" @click="add(ruleFormRef)">
              <el-icon><Plus /></el-icon>添加机构</el-button
            > -->
          <el-button @click="router.push({ path: '/content/message/messageEdit' })"><el-icon>
              <Position />
            </el-icon>发布新的通知</el-button>
        </div>
      </template>
      <template v-slot:operation="scope">
        <el-button type="primary" link @click="editor(scope.operationData.row)">
          编辑
        </el-button>
        <el-button type="primary" link @click="del(scope.operationData.row)">
          删除
        </el-button>
      </template>
      <template v-slot:search="scope">
        {{ scope.slotData.label }}
      </template>
    </Table>
  </PageMain>
  <el-dialog v-model="dialogVisible" title="查看人数" width="1000">
    <Table :tableData="userTableData" :columns="userColumns" :showIndex="false" :showSelect="false"
      :showOperation="false" :pageInfo="userPageInfo" @getList="userGetList"
      :treeProps="{ children: 'children', hasChildren: 'hasChildren' }">
    </Table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";

import { Plus, Search, Position } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

// import universalTable from "../"
import { ElMessageBox, ElTree, ElMessage } from "element-plus";
import api from "@/api";
import { h } from "vue";


const router = useRouter();

const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const dialogVisible = ref(false);
//批量设置负责人

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

let form = reactive({
  searchValue: "", //信息
  sendDeptId: "", //机构id
});

interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
  show: boolean;
}

// import Select from "@/components/select/selectMain.vue";
// import TestTable from "@/components/Table/index.vue";
//业务员列表
type tableType = {
  id: string;
  name: string;
};
const tableData = ref<tableType[]>([]);
const userTableData = ref<tableType[]>([]);
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});
const typeformatter = (row: any, column: any, cellValue: any) => {
  return () =>
    h("div", null, [
      h(
        "h4",
        {
          onClick: () =>
            router.push({
              path: "/content/message/messageEdit",
              query: {
                id: row.id,
              },
            }),
        },
        row.title
      ),
      h("p", { class: "content" }, row.content),
      h("p", { class: "time" }, [
        h("span", null, row.createBy),
        h("span", null, "|"),
        h("span", null, row.createTime),
      ]),
    ]);
};
const columns = [
  { prop: "name", label: "发布消息", formatter: typeformatter, width: 500 },
  { prop: "sendDeptName", label: "发布机构" },
  // { prop: "id", label: "工号" },
  {
    prop: "isChildren",
    label: "下级机构是否发布",
    formatter: (row: any, column: any, cellValue: any) => {
      return () => h("div", {}, row.isChildren == "1" ? "是" : "否");
    },
  },
  {
    prop: "username",
    label: "是否强制查看",
    formatter: (row: any, column: any, cellValue: any) => {
      return () => h("div", {}, row.isForce == "1" ? "是" : "否");
    },
  },
  {
    prop: "viewCount",
    label: "查看人数",
    formatter: (row: any, column: any, cellValue: any) => {
      return () =>
        h(
          "h4",
          { class: "count", onClick: () => openDialog(row) },
          row.viewCount
        );
    },
  },
];

const userColumns = [
  { prop: "name", label: "业务员姓名" },
  { prop: "mobile", label: "业务员手机号" },
  // { prop: "id", label: "工号" },
  {
    prop: "userId",
    label: "工号",
  },
  {
    prop: "deptName",
    label: "所属机构",
  },
  {
    prop: "createTime",
    label: "查看时间",
  },
];
const contentId = ref("");
function openDialog(item: any) {
  contentId.value = item.id;
  dialogVisible.value = true;
  userTableData.value = []
  getContenUser();
}
function getContenUser() {
  api.contentApi
    .contentUserList({
      id: contentId.value,
      ...userPageInfo,
    })
    .then((res: any) => {
      if (res.code === 200) {
        userTableData.value = res.data.records;
        userPageInfo.total = res.data.total;
      }
    });
}

const pageInfo = {
  pageNum: 1,
  pageSize: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
  show: true,
};

const userPageInfo = {
  pageNum: 1,
  pageSize: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
  show: true,
};
//分页列表功能
const getList = (item: PageInfo) => {
  pageInfo.pageNum = item.pageNum;
  pageInfo.pageSize = item.pageSize;
  getContentList();
};

//分页列表功能
const userGetList = (item: PageInfo) => {
  userPageInfo.pageNum = item.pageNum;
  userPageInfo.pageSize = item.pageSize;
  getContenUser();
};

const checkTableIdList = ref([]);
//表格选择事件
function selectAllChange(list: any) {
  checkTableIdList.value = list;
}

function selectChange(list: any) {
  checkTableIdList.value = list;
}

//机构列表
const institutionList = ref([]);
const getInstitutionList = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code === 200) institutionList.value = res.data;
  });
};
const getContentList = () => {
  api.contentApi
    .noticeList({
      ...form,
      ...pageInfo,
    })
    .then((res: any) => {
      if (res.code === 200) {
        tableData.value = res.data.records;
        pageInfo.total = res.data.total;
      }
    });
  // pageInfo.pageSize=item.pageSize
};

function editor(item: any) {
  router.push({
    path: "/content/message/messageEdit",
    query: {
      id: item.id,
    },
  });
}

function del(item: any) {
  ElMessageBox.confirm("确认要删除当前数据吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      api.contentApi.noticeDelete([item.id]).then((res) => {
        if (res.code === 200) {
          ElMessage.success("操作成功");
          getContentList();
        }
      });
    })
    .catch(() => {
      ElMessage.warning("用户取消操作");
    });
}

const reset = (item: any) => {
  // ElMessage({})
  form.searchValue = ''
  form.sendDeptId = ''
  getContentList()
};

onMounted(() => {
  getContentList();
  getInstitutionList(); //机构列表
});
</script>
<style lang="scss" scoped>
:deep(.count) {
  margin: 0 !important;
  color: #409eff;
  cursor: pointer;
}

:deep(.routerlick) {
  h4 {
    margin: 0 !important;
    color: #409eff;
    cursor: pointer;
  }

  p {
    margin: 0 !important;
  }

  .content {
    // width: 200px;
    // background-color: hotpink;
    // padding: 5px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .time {
    display: flex;

    >span {
      flex: none;
      display: flex;
    }

    >span:nth-child(2) {
      margin: 0 20px;
    }
  }
}

:deep(.table-title-btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;

  >div {
    display: flex;
  }
}

:deep(.el-dropdown-link) {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

:deep(.el-message-box__container) {
  width: 100% !important;

  .el-message-box__message {
    width: 100% !important;
  }
}
</style>