查看用户列表

<template>

  <div class="echart">

    <el-form :inline="true" :model="dataForm">

      <el-row class="row-bg" justify="space-between">

        <div>

          <el-form-item>

            <el-input v-model="dataForm.userName" placeholder="请输入要搜索的内容" prefix-icon="el-icon-search"></el-input>

          </el-form-item>

          <el-form-item>

            <el-select placeholder="是否被锁定" size="small" v-model="dataForm.isLock">

              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />

            </el-select>

          </el-form-item>

          <el-form-item>

            <!--时间选择器 -->

            <el-date-picker v-model="dataForm.joinDate" type="date" placeholder="请选择加入时间" />

          </el-form-item>

        </div>

        <div>

          <el-form-item>

            <el-button v-if="hasPermission('circle:fccircletype:save')" type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>

            <el-button size="small" v-if="hasPermission('circle:fccircletype:delete')" type="danger" icon="el-icon-delete" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>

            <el-button size="small" @click="getDataList()"><svg-icon width="12px" height="13px" name="button-refresh" />{{ $t("refresh") }} </el-button>

          </el-form-item>

        </div>

      </el-row>

    </el-form>

    <!--   -->

    <el-table :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">

      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>

      <el-table-column prop="id" label="序号" type="index" header-align="center" align="center" sortable></el-table-column>

      <el-table-column prop="userName" label="用户名" header-align="center" align="center">

        <template #default="scope">

          {{ scope.row.userName }}

        </template>

      </el-table-column>

      <el-table-column prop="dynamicNumber" label="发布动态量" header-align="center" align="center"></el-table-column>

      <el-table-column prop="joinDate" label="加入时间" header-align="center" align="center">

        <template v-slot="scope">

          {{ nowDate(scope.row.joinDate) }}

        </template>

      </el-table-column>

      <el-table-column label="锁定详情" header-align="center" align="center">

        <!--  查看详情按钮-->

        <template v-slot="scope">

          <el-button type="text" size="small" :id="dataForm.id" @click="onSeeDatailFn(scope.row.id)">{{ $t("detail") }}</el-button>

        </template>

      </el-table-column>

      <!-- 操作 -->

      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">

        <template v-slot="scope">

          <!--  v-if="scope.row.isLock == 0" -->

          <!-- 锁定 -->

          <el-button type="text" size="small" @click="onLockFn(scope.row.circleMemberId)" :class="{ active1: isActive1 }" v-if="scope.row.isLock == 0">{{ $t("lock") }}</el-button>

          <!-- 解锁 当点击解锁按钮时 isLock为0 按钮为锁定 -->

          <el-button type="text" size="small" @click="edit" :class="{ active: isActive }" v-if="scope.row.isLock == 1">{{ $t("unlock") }}</el-button>

          <!-- 移除圈子 -->

          <el-button type="text" size="small" @click="dismissFn(scope.row.id)">{{ $t("removeCircle") }}</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" style="text-align: left" />

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :id="dataForm.id"></add-or-update>

    <onLockFn v-if="onLockFnVisible" ref="onLockFn" @refreshDataList="getDataList" :id="dataForm.circleMemberId"></onLockFn>

    <onSeeDatailFn v-if="onSeeDatailFnVisible" ref="onSeeDatailFn" @refreshDataList="getDataList"></onSeeDatailFn>

  </div>

</template>

<script lang="ts">

import { defineComponent, reactive, toRefs, nextTick } from "vue";

import { IObject } from "@/types/interface";

import useView from "@/hooks/useView";

import { ElMessage, ElMessageBox } from "element-plus";

import AddOrUpdate from "./lookuser-list-add-or-update.vue";

import onLockFn from "./lookuser-list-lock.vue";

import onSeeDatailFn from "./looker-list-lockdetail.vue";

import baseService from "@/service/baseService";

export default defineComponent({

  components: {

    AddOrUpdate,

    onLockFn,

    onSeeDatailFn

  },

  setup() {

    const type = reactive({

      options: [

        { value: 0, label: "否" },

        { value: 1, label: "是" }

      ] as IObject[]

    });

    const state = reactive({

      // 圈子管理-查看用户-分页

      getDataListURL: "/sys/circle/fccircle/queryFcCircleMember",

      getDataListIsPage: true,

      // 圈子管理-查看用户-移除圈子

      // deleteURL: "/sys/circle/fccircle/deleteFcCircleMember",

      visible: false,

      onLockFnVisible: false,

      onSeeDatailFnVisible: false,

      isActive: false, //设置按钮的初始显示，当布尔值为true时，对应的属性active生效，即隐藏

      isActive1: true,

      dataForm: {

        ids: "",

        id: "",

        circleId: "",

        isLock: "",

        joinDate: "",

        userName: "",

        circleMemberId: ""

      },

      dataList: [],

      circleMemberId: ""

    });

    return {

      ...useView(state),

      ...toRefs(state),

      ...toRefs(type)

    };

  },

  computed: {

    dataRule() {

      return {};

    }

  },

  // 列表页数据

  created() {

    this.dataForm.circleId = this.$route.query.id as any;

  },

  methods: {

    // 解散圈子

    dismissFn(id?: any) {

      ElMessageBox.confirm("删除后将不可以恢复，请谨慎选择。", "确认要移除圈子吗？", {

        // confirmButtonText: "确定",

        // cancelButtonText: "取消",

        type: "warning"

      })

        .then((res) => {

          // 删除这条数据

          console.log(id, "res");

          // 将id push到ids里面去

          let ids = [id];

          this.$nextTick(() => {

            // 调完这个接口才会出现成功失败提示

            baseService.delete(`/sys/circle/fccircle/deleteFcCircleMember`, ids).then((res) => {

              console.log(res);

              ElMessage({

                type: "success",

                message: "已成功移除圈子"

              });

            });

          });

        })

        .catch(() => {

          ElMessage({

            type: "info",

            message: "移除圈子失败"

          });

        });

    },

    // 锁定事件

    onLockFn(circleMemberId: any) {

      this.onLockFnVisible = true;

      //this.dataForm.circleMemberId = circleMemberId;

      nextTick(() => {

        if (this.$refs.onLockFn && !this.$refs.onLockFn.visible) {

          this.$refs.onLockFn.dataForm.circleMemberId = circleMemberId || "";

          this.$refs.onLockFn.init();

        }

      });

    },

    // 锁定详情

    onSeeDatailFn(id: any) {

baseService.get(`/sys/circle/fccircle/getFcCircleMemberLock/${this.dataForm.circleMemberId}`).then((res) => {

      if (this.$refs.onSeeDatailFn && !this.$refs.onSeeDatailFn.visible) {

        this.$refs.onLockFn.dataForm.id = this.dataForm.id || "";

        this.$refs.onSeeDatailFn.init();

      }

      // });

    },

    edit() {

      this.isActive = !this.isActive; //当点击按钮触发事件时改变两个按钮的显示

      this.isActive1 = !this.isActive1;

    },

    nowDate(data: any) {

      const nowDate = new Date(data);

      const date = {

        year: nowDate.getFullYear(),

        month: nowDate.getMonth() + 1,

        date: nowDate.getDate(),

        hours: nowDate.getHours(),

        minutes: nowDate.getMinutes(),

        seconds: nowDate.getSeconds()

      };

      const newmonth = date.month > 10 ? date.month : "0" + date.month;

      const newday = date.date > 10 ? date.date : "0" + date.date;

      const newminutes = date.minutes > 10 ? date.minutes : "0" + date.minutes;

      const newseconds = date.seconds > 10 ? date.seconds : "0" + date.seconds;

      let time = date.year + "-" + newmonth + "-" + newday + " " + date.hours + ":" + newminutes + ":" + newseconds;

      return time;

    }

  }

});

</script>

<style lang="less" scoped>

.top {

  width: 100%;

  height: 50px;

  line-height: 50px;

  padding-left: 20px;

  background-color: #f2f6fc;

}

.center {

  width: 100%;

  // height: 358px;

  background: #f2f6fc;

}

#container-top {

  display: flex;

  background: #f2f6fc;

  padding-bottom: 20px;

  .content {

    flex: 4;

    display: inline-block;

    margin-left: 20px;

    font-family: "PingFang SC";

    font-style: normal;

    font-weight: 400;

    line-height: 22px;

    color: #909399;

    > div {

      padding-top: 30px;

      .title {

        display: inline-block;

        text-align: right;

        margin-right: 15px;

        width: 100px;

        color: #4e5969;

      }

      .title-warp {

        display: inline-block;

        font-family: "PingFang SC";

        font-style: normal;

        font-weight: 400;

        font-size: 14px;

        line-height: 22px;

        color: #00040c;

      }

    }

  }

}

.form-grid {

  margin: 20px 20px 0 0;

}

.el-row {

  margin-top: 20px;

}

</style>