ybxf-security-ui/src/views/backend/remindInfo/index.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="提醒标题" prop="remindTitle">
        <el-input
          v-model="queryParams.remindTitle"
          placeholder="请输入提醒标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="提醒类型" prop="remindType">
        <el-select v-model="queryParams.remindType" placeholder="请选择提醒类型" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="提醒状态" prop="remindStatus">
        <el-select v-model="queryParams.remindStatus" placeholder="请选择提醒状态" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="发布日期" prop="pubDate">
        <el-date-picker
          v-model="queryParams.pubDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="完成日期" prop="doneDate">
        <el-date-picker
          v-model="queryParams.doneDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-if="taskStatus == 0"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['backend:remind-info:create']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['backend:remind-info:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-tabs
      type="border-card"
      v-model.trim="selectedTab"
      @tab-click="clickTab"
    >
      <el-tab-pane label="已下发" name="type0">
        <el-table v-loading="loading" :data="list">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column label="提醒标题" align="center" prop="remindTitle" />
          <el-table-column label="提醒内容" align="center" prop="remindContent">
            <template slot-scope="scope">
              <div class="ellipsis-text" v-html="scope.row.remindContent"></div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="提醒类型" align="center" prop="remindType" />
      <el-table-column label="提醒状态" align="center" prop="remindStatus" /> -->
          <el-table-column label="所属部门" align="center" prop="deptName" />
          <el-table-column label="发布日期" align="center" prop="pubDate" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <!-- 如果发布了只有查看 -->
            <template v-slot="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['backend:remind-info:delete']"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleSee(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已接受" name="type1">
        <el-table v-loading="loading" :data="list">
          <el-table-column label="序号" align="center" type="index" />
          <!-- <el-table-column label="提醒信息id" align="center" prop="remindInfoId" /> -->
          <!-- <el-table-column label="广播接收组织类型2:大队,3:街道,4社会单位" align="center" prop="broadType" /> -->
          <el-table-column
            label="提醒标题"
            align="center"
            prop="remind_title"
          />
          <el-table-column label="发送组织" align="center" prop="deptName" />
          <el-table-column label="接收组织" align="center" prop="reciverName" />
          <el-table-column label="发布日期" align="center" prop="pubDate">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.pub_date, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="完成日期" align="center" prop="doneDate"
            ><template v-slot="scope">
              <span>{{ parseTime(scope.row.done_date, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否已读" align="center" prop="isRead">
            <template v-slot="scope">
              <span>{{ scope.row.is_read == 0 ? "未读" : "已读" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否完成" align="center" prop="isDone">
            <template v-slot="scope">
              <span>{{ scope.row.is_done == 0 ? "否" : "是" }}</span></template
            >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template v-slot="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleComplete(scope.row)"
                v-if="scope.row.is_done == 0"
                >完成</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleSee2(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="信息反馈" name="type2">
        <el-table v-loading="loading" :data="list">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column
            label="提醒标题"
            align="center"
            prop="remind_title"
          />
          <el-table-column label="发送组织" align="center" prop="deptName" />
          <el-table-column label="接收组织" align="center" prop="reciverName" />
          <el-table-column label="发布日期" align="center" prop="pubDate">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.pub_date, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="完成日期" align="center" prop="doneDate"
            ><template v-slot="scope">
              <span>{{ parseTime(scope.row.done_date, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否已读" align="center" prop="isRead">
            <template v-slot="scope">
              <span>{{ scope.row.is_read == 0 ? "未读" : "已读" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否完成" align="center" prop="isDone">
            <template v-slot="scope">
              <span>{{
                scope.row.is_done == 0 ? "未读" : "已读"
              }}</span></template
            >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template v-slot="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleComplete(scope.row)"
                v-if="scope.row.is_done == 0"
                >完成</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleSee2(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="80%"
      v-dialogDrag
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="提醒标题" prop="remindTitle">
          <el-input v-model="form.remindTitle" placeholder="请输入提醒标题" />
        </el-form-item>
        <el-form-item label="提醒内容">
          <editor v-model="form.remindContent" :min-height="192" />
        </el-form-item>
        <el-form-item label="附件内容">
          <fileUpload v-model="form.fileUrls" :fileType="files" />
        </el-form-item>
        <!-- <el-form-item label="提醒类型" prop="remindType">
          <el-select v-model="form.remindType" placeholder="请选择提醒类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒状态" prop="remindStatus">
          <el-select v-model="form.remindStatus" placeholder="请选择提醒状态">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="所属部门id" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入所属部门id" />
        </el-form-item> -->
        <el-form-item label="选择组织">
          <span
            type="primary"
            plain
            @click="chooseOrgan(2)"
            class="type-org"
            :class="{ active: clickType == 2 }"
            >大队</span
          >
          <span
            type="primary"
            plain
            @click="chooseOrgan(3)"
            class="type-org"
            :class="{ active: clickType == 3 }"
            >街道</span
          >
        </el-form-item>
        <choiceOrange
          ref="choiceSelect"
          :userId="form.id"
          :type="'comInfo'"
          :clickType="clickType"
          :open="open"
          :userType="userType"
        ></choiceOrange>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="详细信息查看"
      :visible.sync="openSeedialog"
      width="85vw"
      class="detail detail-style"
    >
      <el-form
        ref="form"
        :model="deatilData"
        label-width="auto"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="提醒标题:" prop="remindTitle">
              <div>{{ deatilData.remindTitle }}</div>
            </el-form-item></el-col
          >
          <el-col :span="14">
            <el-form-item label="提醒内容:" prop="remindContent" style="line-height:6px !important">
              <span v-html="deatilData.remindContent" style="display: flex;justify-content: start;"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="发布日期:" prop="pubDate">
              <div v-html="deatilData.pubDate"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="附件内容:" prop="pubDate">
              <fileUpload v-model="deatilData.fileUrls" :isShowTip="false" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openSeedialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 已接受和信息反馈 -->
    <el-dialog
      title="详细信息查看"
      :visible.sync="openSeedialog2"
      width="85vw"
      class="detail detail-style"
    >
      <el-form
        ref="form"
        :model="deatilData2"
        label-width="auto"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="提醒标题:">
              <div>{{ deatilData2.remindInfoRespVO?.remindTitle }}</div>
            </el-form-item></el-col
          >
          <el-col :span="14">
            <el-form-item label="提醒内容:" prop="remindContent">
              <div v-html="deatilData2.remindInfoRespVO?.remindContent"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="发布日期:" prop="pubDate">
              <div>{{ deatilData2.pubDate }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="完成日期:" prop="doneDate">
              <div>{{ deatilData2.doneDate }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="完成情况描述:" prop="remindContent">
              <div v-html="deatilData2.donetext"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="附件内容:" prop="pubDate">
              <fileUpload v-model="deatilData2.fileUrls" :isShowTip="false" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="deatilData2.doneFileUrls">
          <el-col :span="14">
            <el-form-item label="完成情况附件:" prop="doneFileUrls">
              <fileUpload v-model="deatilData2.doneFileUrls" :isShowTip="false" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openSeedialog2 = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 完成的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="openSeeComplete"
      width="80%"
      v-dialogDrag
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="提醒标题" prop="remindTitle">
          <el-input v-model="form.remindTitle" disabled />
        </el-form-item>
        <el-form-item label="提醒内容">
          <el-input v-model="form.remindContent" disabled />
        </el-form-item>
        <el-form-item label="完成情况描述">
          <el-input v-model="form.donetext" />
        </el-form-item>
        <el-form-item label="附件内容">
          <fileUpload v-model="form.fileUrls" :fileType="files" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComplete">确 定</el-button>
        <el-button @click="cancelComplete">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createRemindInfo,
  updateRemindInfo,
  deleteRemindInfo,
  getRemindInfo,
  getRemindInfoPage,
  exportRemindInfoExcel,
  getuserinfo,
  remindBroadFinish,
} from "@/api/backend/remindInfo";
import { getRemindBroad, getRemindBroadPage, getDepts } from "@/api/backend/remindBroad";
import { getUserProfile } from "@/api/system/user";
import Editor from "@/components/Editor";
import choiceOrange from "@/components/choiceOrange";
import FileUpload from "@/components/FileUpload";
import { getTime } from "../../../utils";
import { getNowDateTime } from "@/utils/ruoyi";

export default {
  name: "RemindInfo",
  components: {
    Editor,
    choiceOrange,
    FileUpload,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 重要提醒信息列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        remindTitle: null,
        // remindType: 1,
        // remindStatus: 1,
        pubDate: [],
        doneDate: [],
        id: null,
        pubDateStart: null,
        pubDateEnd: null,
        doneDateStart: null,
        doneDateEnd: null,
      },
      // 表单参数
      form: {
        deptId: null,
        remindZzList: [],
      },
      // 表单校验
      rules: {
        remindTitle: [
          { required: true, message: "提醒标题不能为空", trigger: "blur" },
        ],
      },
      selectedTab: "type0",
      taskStatus: "0",
      files: ["png", "jpg", "jpeg", "doc", "xls", "ppt", "txt", "pdf"],
      clickType: 2,
      openSeedialog: false,
      deatilData: {},
      listDeptData: [],
      userType: null,
      allStreetData: null,
      streetId: null, //当前登录用户对应的id
      deatilData2: {},
      openSeedialog2: false, //已接受和信息反馈
      openSeeComplete: false, //完成的弹窗
      clickComplete: {}, //完成自动显示的数据
    };
  },
  created() {
    this.allStreetData = JSON.parse(localStorage.getItem("streetList"));
    this.getDeptId();
    this.getAllDept();
  },
  methods: {
    chooseOrgan(type) {
      this.clickType = type;
    },
    //获取街道id
    getDeptId() {
      getUserProfile().then((response) => {
        this.form.deptId = response.data ? response.data.dept.id : "";
        this.userType = this.form.deptId;
        console.log('this.userType', this.userType)
        getuserinfo(response.data.id)
          .then((res) => {
            this.streetId = res.data.streetInfo.id;
            // this.streetId = res.data.street
            console.log("res=====", res);
          })
          .catch((err) => {
            console.log("err", err);
          });
        console.log("this.form.response", response);
      });
    },
    //获取所有的部门
    getAllDept() {
      getDepts().then((response) => {
        this.listDeptData = response.data;
        this.getList();
        console.log("response===", response);
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.userId = this.$store.state.user.id;
      // 执行查询
      if (this.taskStatus == 0) {
        getRemindInfoPage(this.queryParams).then((response) => {
          this.loading = false;
          this.listDeptData.forEach((item) => {
            response.data.list.forEach((key) => {
              if (item.id == key.deptId) {
                key.deptName = item.name;
              }
            });
          });
          this.list = response.data.list;
          this.total = response.data.total;
        });
      } else {
        //已接受和信息反馈的接口
        if (this.taskStatus == 1) {
          this.queryParams.reciver =
            this.userType > 10000 ? this.streetId : this.userType;
          this.queryParams.sender = null;
        } else {
          this.queryParams.sender = this.userType;
          this.queryParams.reciver = null;
        }
        getRemindBroadPage(this.queryParams).then((response) => {
          this.loading = false;
          console.log("this.listDeptData", this.listDeptData);
          response.data.records.forEach((key) => {
            this.listDeptData.forEach((item) => {
              if (item.id == key.sender) {
                key.deptName = item.name;
              } else if (item.id == key.reciver) {
                key.reciverName = item.name;
              }
            });
            this.allStreetData.forEach((item) => {
              if (item.key == key.reciver) {
                key.reciverName = item.value;
              }
            });
          });
          this.list = response.data.records;
          console.log("response.data.records", response.data.records);
          this.total = response.data.total;
        });
      }
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        remindTitle: undefined,
        remindContent: undefined,
        remindType: undefined,
        remindStatus: undefined,
        deptId: undefined,
        pubDate: undefined,
        remindZzList: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      if (this.queryParams.pubDate.length > 0) {
        this.queryParams.pubDateStart = this.queryParams.pubDate[0];
        this.queryParams.pubDateEnd = this.queryParams.pubDate[1];
      }
      if (this.queryParams.doneDate.length > 0) {
        this.queryParams.doneDateStart = this.queryParams.doneDate[0];
        this.queryParams.doneDateEnd = this.queryParams.doneDate[1];
      }
      console.log(
        "ssssssss",
        this.queryParams.pubDate,
        this.queryParams.doneDate
      );
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.clickType = 2;
      this.title = "添加重要提醒信息";
      this.getDeptId();
    },
    /** 查看按钮操作 */
    handleSee(row) {
      const id = row.id;
      getRemindInfo(id).then((response) => {
        this.deatilData = response.data;
        this.openSeedialog = true;
        this.title = "查看重要提醒信息";
      });
    },
    // 已接受和信息反馈查看按钮
    handleSee2(row) {
      console.log("row", row);
      const id = row.broad_id;

      getRemindBroad(id).then((response) => {
        this.deatilData2 = response.data;
        this.openSeedialog2 = true;
        this.title = "查看重要提醒信息";
      });
    },
    //完成
    handleComplete(row) {
      this.clickComplete = row;
      this.openSeeComplete = true;
      this.form.remindTitle = row.remind_title;
      this.form.remindContent = row.remind_content;
      this.form.broadId = row.broad_id;
      this.form.broadType = row.broad_type;
    },
    submitFormComplete() {
      console.log("this.form222222", this.form);
      this.form.fileUrls =
        this.form.fileUrls && this.form.fileUrls.length > 0
          ? this.form.fileUrls.split(",")
          : [];
      this.form.doneDate = "2024-3-6";
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        remindBroadFinish(this.form).then((response) => {
          this.$modal.msgSuccess("提交成功");
          this.openSeeComplete = false;
          this.getList();
        });
      });
    },
    /** 取消按钮 */
    cancelComplete() {
      this.openSeeComplete = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      // this.alreadySelectedOrgList = this.$refs["choiceSelect"].confirmMSg()
      // this.orgType = this.$refs["choiceSelect"].confirmoOrgTypeMSg()
      const alreadyChooseOrg = this.$refs["choiceSelect"].confirmMSg();
      alreadyChooseOrg.forEach((item) => {
        if (item.deptName) {
          this.form.remindZzList.push({
            broadType: 2,
            reciver: parseInt(item.id),
          });
        } else if (item.sjxfjg) {
          this.form.remindZzList.push({
            broadType: 3,
            reciver: parseInt(item.id),
          });
        }
      });
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        if (this.form.remindZzList.length < 1) {
          return this.$modal.msgError("请选择组织到右侧");
        }
        // 修改的提交
        // if (this.form.id != null) {
        //   updateRemindInfo(this.form).then((response) => {
        //     this.$modal.msgSuccess("修改成功");
        //     this.open = false;
        //     this.getList();
        //   });
        //   return;
        // }
        // 添加的提交
        this.form.fileUrls = this.form.fileUrls
          ? this.form.fileUrls.split(",")
          : [];
        console.log("this.form", this.form);
        createRemindInfo(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm('是否确认删除重要提醒信息编号为"' + id + '"的数据项?')
        .then(function () {
          return deleteRemindInfo(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal
        .confirm("是否确认导出所有重要提醒信息数据项?")
        .then(() => {
          this.exportLoading = true;
          return exportRemindInfoExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, "重要提醒信息.xls");
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    clickTab(e) {
      console.log(e._props.name, "e._props.name;e._props.name;");
      const name = e._props.name;
      this.queryParams.pageNo = 1;
      this.list = [];
      switch (name) {
        case "type0":
          this.taskStatus = "0";
          this.getList();
          break;
        case "type1":
          this.taskStatus = "1";
          this.getList();
          break;
        case "type2":
          this.taskStatus = "2";
          this.getList();
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.type-org {
  border: 1px solid #a3d3ff;
  color: #1890ff;
  background: #e8f4ff;
  margin-right: 20px;
  padding: 5px 20px;
  border-radius: 3px;
  cursor: pointer;
}
.active {
  color: #fff;
  background: #46a6ff;
}
.ellipsis-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* 确保文字正常换行 */
  word-break: break-all; /* 确保长单词或URL正常换行 */
}
.detail-style {
  ::v-deep .el-row {
    border-bottom: 1px solid #eaeef0 !important;
    margin-bottom: 10px !important;
  }
  ::v-deep .el-dialog__header {
    background: #e1e9f4 !important;
  }
}
</style>