|
@@ -0,0 +1,409 @@
|
|
|
|
|
+<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
|
|
|
|
|
+ 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="router.push({ path: '/content/advertisement/advertisementEdit' })"
|
|
|
|
|
+ ><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>
|
|
|
|
|
+ </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,
|
|
|
|
|
+});
|
|
|
|
|
+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: "deptName", label: "广告图",
|
|
|
|
|
+ formatter: (row: any, column: any, cellValue: any) => {
|
|
|
|
|
+ return () => h("img", {src: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: 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.advertisementApi
|
|
|
|
|
+ .posterQuery({
|
|
|
|
|
+ ...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/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({})
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+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;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+: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>
|