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

<template>
  <div class="institution">
    <div class="institution-main">
      <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
                filterable
                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
        :tableData="tableData"
        :columns="columns"
        :showIndex="false"
        :showSelect="true"
        :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="handleAdd">
              <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>
    </div>
    <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>
    <el-dialog
      v-model="imageShow"
      title="图片查看"
      width="500"
    >
      <div class="image-box">
        <img :src="imageUrl"/>
      </div>
    </el-dialog>
  </div>
</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,
});
// 图片查看
let imageShow = ref(false)
let imageUrl = ref('')
const typeformatter = (row: any, column: any, cellValue: any) => {
  return () =>
    h("div", null, [
      h(
        "h4",
        {
          onClick: () =>
            router.push({
              path: "/content/advertisement/advertisementEdit",
              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: "deptName", label: "广告图",
    formatter: (row: any, column: any, cellValue: any) => {
      return () => h("img", {src:row.previewUrl, onClick: () => {
          imageShow.value = true
          imageUrl.value = row.previewUrl
        }}, );
    },
   },

  { prop: "deptName", label: "发布机构" },
  // { prop: "id", label: "工号" },
  {
    prop: "isLevel",
    label: "下级机构是否发布",
    formatter: (row: any, column: any, cellValue: any) => {
      return () => h("div", {}, row.isLevel == "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("");



const pageInfo = {
  pageNum: 1,
  pageSize: 5,
  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 handleAdd = () => {
  router.push({
    path: '/content/advertisement/advertisementEdit',
    query: {
      total: pageInfo.total
    }
  })
}
//分页列表功能
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.advertisementApi
    .posterQuery({
      ...form,
      ...pageInfo,
      pages: pageInfo.pageNum,
      size: pageInfo.pageSize
    })
    .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/advertisement/advertisementEdit",
    query: {
      id: item.id,
    },
  });
}

function del(item: any) {
  ElMessageBox.confirm("确认要删除当前数据吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      api.advertisementApi.posterDelet(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;
  }
}
.institution {
  background: #fff;
  width: 100%;
  // height: 100%;
  // padding: 20px;
  box-sizing: border-box;
  display: flex;

  .institution-main {
    flex: 1;
    // width: 80%;
    padding: 20px;
    box-sizing: border-box;
  }
}

.image-box{
  display: flex;
  align-items: center;
  justify-content: center;
}

: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>