阿拉丁-魔登

src/views/adsdesk/adsUser/index.vue

+<template>
+  <div class="app-container">
+
+    <el-form :model="queryParams" ref="queryRef" :inline="true">
+      <el-form-item label="客户编号" prop="customerId">
+        <el-input
+            v-model="queryParams.customerId"
+            placeholder="请输入客户编号"
+            clearable
+            style="width: 160px"
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item prop="ids">
+        <template #label>
+          <el-tooltip
+              content="支持多个查询(,隔开)"
+              placement="top"
+              raw-content
+          >
+            <el-icon style="top: 2px;">
+              <question-filled/>
+            </el-icon>
+          </el-tooltip>
+          用户编号
+        </template>
+        <el-input
+            v-model="queryParams.ids"
+            placeholder="请输入用户编号"
+            clearable
+            style="width: 160px"
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户邮箱" prop="email">
+        <el-input
+            v-model="queryParams.email"
+            placeholder="请输入用户邮箱"
+            clearable
+            style="width: 180px"
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户姓名" prop="name">
+        <el-input
+            v-model="queryParams.name"
+            placeholder="请输入用户姓名"
+            clearable
+            style="width: 180px"
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户角色" prop="role">
+        <el-select
+            v-model="queryParams.role"
+            placeholder="请选择用户角色"
+            clearable
+            style="width: 160px"
+        >
+          <el-option
+              v-for="dict in ads_user_role"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" style="width: 280px">
+        <el-date-picker
+            v-model="createDateRange"
+            value-format="YYYY-MM-DD"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="userList" @sort-change="handleSortChange" size="small" stripe border>
+      <el-table-column prop="id" label="用户编号" sortable="custom" min-width="100" fixed/>
+      <el-table-column prop="email" label="邮箱" min-width="120" fixed/>
+      <el-table-column prop="name" label="用户姓名" min-width="120" show-overflow-tooltip fixed/>
+      <el-table-column label="操作" align="center" min-width="200" fixed>
+        <template #default="scope">
+          <el-button
+              type="text"
+              icon="View"
+              @click="handleCustomerDetail(scope.row.customerId)"
+          >客户详情
+          </el-button>
+          <el-button
+              type="text"
+              icon="Pointer"
+              @click="handleSimulateLogin(scope.row)"
+              v-hasPermi="['operation:simulateLogin:query']"
+          >模拟登录
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" width="70">
+        <template #default="scope">
+          <el-switch
+              v-model="scope.row.status"
+              active-value="ENABLE"
+              active-color="#67C23A"
+              inactive-value="DISABLE"
+              disabled
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="role" label="角色" min-width="110">
+        <template #default="scope">
+          <dict-tag :options="ads_user_role" :value="scope.row.role"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="customerId" label="客户编号" min-width="60"></el-table-column>
+      <el-table-column label="创建时间" align="center" prop="gmtCreate" sortable="custom" min-width="160">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.gmtCreate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center" prop="gmtModified" sortable="custom" min-width="160">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.gmtModified) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+    />
+
+    <customer-detail-dialog :showDetail="showCustomerDetail" :customerId="customerId"
+                            :adsCustomerTypeDict="ads_customer_type"
+                            @closeDetail="closeCustomerDetail"/>
+  </div>
+</template>
+
+<script setup name="AdsUser">
+import {ref, reactive} from "vue";
+//客户详情
+// import CustomerDetailDialog from "@/components/adsdesk/CustomerDetailDialog"
+//用户列表
+import {listUser} from "@/api/adsdesk/user/user";
+//
+//import {autoLogin} from "@/api/operation/simulateLogin";
+
+const {proxy} = getCurrentInstance();
+const {ads_user_role, ads_customer_type} = proxy.useDict("ads_user_role", "ads_customer_type");
+
+const userList = ref([]);
+const loading = ref(true);
+const total = ref(0);
+const createDateRange = ref([]);
+const showCustomerDetail = ref(false);
+const customerId = ref(0);
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  customerType: null,
+  ids: null,
+  customerName: null,
+  searchVal: null
+})
+
+function getList() {
+  loading.value = true;
+  listUser(queryParams).then(res => {
+    userList.value = res.rows
+    total.value = res.total
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  createDateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.orderByColumn = column.prop;
+  queryParams.isAsc = column.order;
+  getList();
+}
+
+function handleCustomerDetail(id) {
+  if (id <= 0) {
+    return proxy.$modal.alertError("客户编号不正确: " + id);
+  }
+  customerId.value = id
+  showCustomerDetail.value = true;
+}
+
+function handleSimulateLogin(row) {
+  const {name, email, customerId, id: userId, role: userRole} = row
+  proxy.$modal.confirm('您将使用指定用户[' + name + '(' + email + ')]模拟登录系统查看数据. 谨记不要进行修改提交等影响数据的操作!').then(function () {
+    autoLogin({customerId, userId})
+  })
+}
+
+function closeCustomerDetail() {
+  showCustomerDetail.value = false
+}
+
+getList();
+</script>
\ No newline at end of file