2024.5.31

riku

2024-05-31 f7d98a5d5097794dcd0afaaf6d270bb43fe72a05

 src/views/fytz/user/UserInfo.vue

@@ -1,295 +1,224 @@
<template>
  <el-row ref="searchRef">
    <el-col>
      <el-form :inline="true" :model="formSearch">
        <el-form-item label="省/市/区/镇" prop="_locations">
          <el-cascader
            v-model="formSearch._locations"
            :options="locations"
            placeholder="省/市/区/镇"
            :props="props"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="场景名称" prop="searchText">
          <el-input
            clearable
            v-model="formSearch.searchText"
            placeholder="输入搜索场景名称"
          />
        </el-form-item>
        <el-form-item label="用户类型" prop="scensetypeid">
          <el-select
            v-model="formSearch.scensetypeid"
            placeholder="用户类型"
            style="width: 75px"
          >
            <el-option
              v-for="s in sceneTypes"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上线状态" prop="online">
          <el-select
            v-model="formSearch.online"
            placeholder="全部"
            style="width: 75px"
          >
            <el-option
              v-for="s in onlineStatus"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" type="primary" @click="onSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-table
    :data="tableData"
    v-loading="loading"
    table-layout="fixed"
    :row-class-name="tableRowClassName"
    :height="tableHeight"
  >
    <el-table-column prop="realname" label="公司" align="center">
      <template #default="scope">
        <el-tooltip
          effect="dark"
          :content="scope.row.realname"
          placement="top-start"
          :show-after="500"
        >
          {{ scope.row.realname }}
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="telephone" label="电话" align="center" />
    <el-table-column
      prop="extension1"
      label="区县"
      width="120"
      align="center"
    />
    <el-table-column prop="usertype" label="类型"  align="center" />
    <el-table-column prop="departmentname" label="名称">
      <template #default="scope">
        <el-tooltip
          effect="dark"
          :content="scope.row.departmentname"
          placement="top-start"
          :show-after="500"
        >
          {{ scope.row.departmentname }}
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="140">
      <template #header>
        <el-button icon="DocumentAdd" type="success" @click="drawer = true"
          >新增用户</el-button
        >
      </template>
      <template #default="scope">
        <el-button
          :loading="scope.row.loading1"
          type="default"
          size="small"
          @click="editRow(scope)"
          >编辑</el-button
        >
        <el-button
          :loading="scope.row.loading2"
          :type="scope.row.extension1 != '0' ? 'danger' : 'primary'"
          size="small"
          @click="itemActive(scope)"
          >{{ scope.row.extension1 != '0' ? '下线' : '上线' }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <FYTable @search="onSearch" :row-class-name="tableRowClassName">
    <template #options>
      <FYOptionLocation
        :allOption="true"
        :level="5"
        v-model:value="formSearch._locations"
      ></FYOptionLocation>
      <FYOptionText
        label="场景名称"
        placeholder="输入名称关键字"
        v-model:value="formSearch.searchText"
      ></FYOptionText>
      <FYOptionScene
        :allOption="true"
        :type="1"
        v-model:value="formSearch.scensetype"
      ></FYOptionScene>
      <FYOptionOnlineStatus
        :allOption="true"
        v-model:value="formSearch.online"
      ></FYOptionOnlineStatus>
    </template>

  <el-pagination
    ref="paginationRef"
    class="el-pagination"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />

  <CompUserInfoAddDrawer v-model:drawer="drawer"></CompUserInfoAddDrawer>
    <template #table-column>
      <el-table-column
        fixed="left"
        prop="userInfo.realname"
        label="名称"
        :show-overflow-tooltip="true"
        width="400"
      >
      </el-table-column>
      <el-table-column prop="userInfo.acountname" label="账号" width="110" />
      <el-table-column prop="sceneTypeName" label="类型" width="100" />
      <el-table-column prop="biProvinceName" label="省" width="80" />
      <el-table-column prop="biCityName" label="市" width="80" />
      <!-- <el-table-column prop="districtname" label="区县" width="90" /> -->
      <el-table-column prop="userInfo.extension1" label="区县" width="80" />
      <el-table-column prop="biTownName" label="街道" width="110" />
      <el-table-column prop="biArea" label="集中区" width="110" />
      <el-table-column prop="biManagementCompany" label="物业" min-width="110" />
      <el-table-column prop="userInfo.isenable" label="状态" width="90">
        <template #default="{ row }">
          {{ row.userInfo.isenable ? '上线中' : '已下线' }}
        </template>
      </el-table-column>
      <el-table-column prop="userInfo.usertype" label="用户类型" width="90" />
      <el-table-column fixed="right" align="right" label="操作" width="190">
        <template #header>
          <el-button icon="DocumentAdd" size="default" type="success" @click="drawer = true"
            >新增用户</el-button
          >
        </template>
        <template #default="{ row }">
          <el-space>
            <el-button
              :loading="row.loading2"
              :type="row.userInfo.isenable != '0' ? 'danger' : 'primary'"
              size="small"
              @click="itemActive(row)"
              >{{ row.userInfo.isenable != '0' ? '下线' : '上线' }}</el-button
            >
            <el-button-group>
              <el-button type="primary" :loading="row.loading1" size="small" @click="editRow(row)"
                >查看</el-button
              >
              <el-dropdown @command="handleCommand" trigger="click">
                <el-button
                  type="primary"
                  :loading="row.downloadLoading"
                  size="small"
                  :icon="row.downloadLoading ? '' : 'ArrowDown'"
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="Download" :command="{ c: 1, p: row }"
                      >下载环信码</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button-group>
            <!-- <el-dropdown
              split-button
              :loading="row.loading1"
              size="small"
              type="primary"
              @click="editRow(row)"
              @command="handleCommand"
              trigger="click"
            >
              查看
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="Download" :command="{ c: 1, p: row }"
                    >下载环信码</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          </el-space>
        </template>
      </el-table-column>
    </template>
  </FYTable>
  <CompUserInfoAddDrawer v-model="drawer"></CompUserInfoAddDrawer>
</template>

<script>
import { enumScene_1 } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import { enumOnlineStatus } from '@/enum/onlineStatus';
import userApi from '@/api/fytz/userApi';
import creditApi from '@/api/fytz/creditApi';
import { useLoadingStore } from '@/stores/loadingStore';
import { mapStores } from 'pinia';
import { useMessageBoxTip } from '@/composables/messageBox';
import CompUserInfoAddDrawer from './components/CompUserInfoAddDrawer.vue';
import CompUserInfoAddDrawer from '@/views/fytz/user/components/CompUserInfoAddDrawer.vue';

export default {
  components: {
    CompUserInfoAddDrawer,
    CompUserInfoAddDrawer
  },
  data() {
    return {
      locations: enumLocation(),
      sceneTypes: enumScene_1(),
      onlineStatus: enumOnlineStatus(),
      // 查询条件
      formSearch: {
        _locations: [],
        _locations: {},
        searchText: '',
        scensetypeid: '',
        online: '',
        scensetype: {},
        online: {}
      },

      props: {
        checkStrictly: true,
      },

      tableData: [],
      tableHeight: '500',
      loading: false,

      currentPage: 1,
      pageSize: 20,
      total: 0,

      drawer: false,
      // 新增用户弹出框
      drawer: false
    };
  },
  watch: {
    currentPage(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
      }
    },
    pageSize(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
      }
    },
  },
  computed: {
    ...mapStores(useLoadingStore),
    ...mapStores(useLoadingStore)
  },
  methods: {
    onSearch() {
      this.loading = true;
    onSearch(page, func) {
      const f = this.formSearch;
      const area = {};
      // 行政区划
      f._locations.length > 0
        ? ([area.provinceCode, area.provinceName] = f._locations[0])
        : ([area.provinceCode, area.provinceName] = [null, null]);
      if (area.provinceCode == '0')
        [area.provinceCode, area.provinceName] = [null, null];
      f._locations.length > 1
        ? (area.citycode = f._locations[1][0])
        : (area.citycode = null);
      f._locations.length > 2
        ? ([area.districtCode, area.districtName] = f._locations[2])
        : ([area.districtCode, area.districtName] = [null, null]);
      f._locations.length > 3
        ? (area.towncode = f._locations[3][0])
        : (area.towncode = null);
      area.provinceCode = f._locations.pCode;
      area.provinceName = f._locations.pName;
      if (area.provinceCode == null) {
        area.provinceCode = null;
        area.provinceName = null;
      }
      area.cityCode = f._locations.cCode;
      area.cityName = f._locations.cName;
      area.districtCode = f._locations.dCode;
      area.districtName = f._locations.dName;
      area.townCode = f._locations.tCode;
      area.townName = f._locations.tName;
      // 场景类型
      area.scensetypeid = f.scensetypeid;
      if (area.scensetypeid == '0') area.scensetypeid = null;
      area.sceneTypes = [];
      f.scensetype.value == null
        ? (area.sceneTypes = [])
        : (area.sceneTypes = [f.scensetype.value]);
      // 上下线状态
      area.online = f.online;
      area.online = f.online.value;
      // 关键字
      area.searchText = f.searchText;

      userApi
        .fetchUser('00EQQVnE9QFvbkQr', this.currentPage, this.pageSize, area)
        .then((res) => {
          if (res) {
            this.tableData = res.data;
            this.currentPage = res.headers.currentPage;
            console.log(res.headers);
            this.total = parseInt(res.headers.totalPage) * this.pageSize;
          }
        })
        .finally(() => {
          this.loading = false;
        });
      userApi.fetchUser(page.currentPage, page.pageSize, area).then((res) => {
        if (res) {
          func({
            data: res.data,
            total: res.head.totalCount
          });
        }
      });
    },
    calcTableHeight() {
      const h1 = this.$refs.searchRef.$el.offsetHeight;
      const h2 = this.$refs.paginationRef.$el.offsetHeight;
      // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
      return `calc(100vh - ${h1}px - ${h2}px - 60px - var(--el-main-padding) * 2)`;
    editRow(row) {
      row.loading1 = true;
      this.loadingStore.pushLoading(() => (row.loading1 = false));
      this.$router.push(`userEdit/${row.userInfo.guid}`);
    },
    editRow(scope) {
      scope.row.loading1 = true;
      this.loadingStore.loadingStatus.push(() => (scope.row.loading1 = false));
      this.$router.push(`userEdit/${scope.row.guid}`);
    },
    itemActive(scope) {
      const rb = {};
      rb.guid = scope.row.guid;
      rb.extension1 = scope.row.extension1 != '0' ? '0' : '1';
      const msg = scope.row.extension1 != '0' ? '下线' : '上线';
    itemActive(row) {
      const param = {
        guid: row.userInfo.guid,
        isenable: !row.userInfo.isenable
      };
      const msg = row.userInfo.isenable ? '下线' : '上线';
      useMessageBoxTip({
        confirmMsg: `确认${msg}该场景？`,
        confirmTitle: msg,
        onConfirm: () => {
          scope.row.loading2 = true;
          userApi
            .updateScene(rb)
        onConfirm: async () => {
          row.loading2 = true;
          return userApi
            .updateUserInfo(param)
            .then((res) => {
              if (res == 1) {
                scope.row.extension1 = rb.extension1;
              if (res.success) {
                row.userInfo.isenable = param.isenable;
              }
            })
            .finally(() => {
              scope.row.loading2 = false;
              row.loading2 = false;
            });
        },
        }
      });
    },
    tableRowClassName({ row }) {
      return row.extension1 != '0' ? 'online-row' : 'offline-row';
      return row.userInfo.isenable ? 'online-row' : 'offline-row';
    },
  },
  mounted() {
    this.formSearch.scensetypeid = this.sceneTypes[0].value;
    this.formSearch._locations = [this.locations[0].value];
    this.formSearch.online = this.onlineStatus[0].value;
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  },
    handleCommand(e) {
      const userId = e.p.userInfo.guid;
      switch (e.c) {
        // 下载环信码
        case 1:
          e.p.downloadLoading = true;
          creditApi.downloadCode(userId).finally(() => {
            e.p.downloadLoading = false;
          });
          break;

        default:
          break;
      }
    }
  }
};
</script>
<style>
.el-table .offline-row {
  background-color: var(--el-disabled-bg-color);
  color: var(--el-disabled-text-color);
}
.el-table .cell {
  white-space: nowrap;
  color: var(--el-disabled-text-color);
}
.el-pagination {
  background-color: var(--el-color-white);
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.096);
  /* margin-top: 2px; */
}
</style>
<style></style>