用户列表页完成

2024-10-11 10:34:08 +08:00
parent 3be482c569
commit 990155682d
3 changed files with 281 additions and 153 deletions
@@ -0,0 +1,10 @@
+import service from "../request.js";
+
+// 客户列表
+export function getUserList(query) {
+    return service({
+        method: "get",
+        url: "/permission/UserList",
+        data: query,
+    });
+}
@@ -1,9 +1,226 @@
 <template>
  <el-card>
-    <div>客户列表222</div>
+
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <div class="block">
+          <el-date-picker
+              v-model="registerDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="注册开始日期"
+              end-placeholder="注册截至日期"
+              :size="size"
+          />
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="模糊查询名称"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+    </el-row>
+
+
+  </el-card>
+
+  <el-card class="mt10">
+    <el-table
+        ref="table"
+        :data="tableData"
+        :default-sort="{ prop: 'date', order: 'descending' }"
+        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        border
+        stripe
+        style="width: 100%"
+    >
+
+      <el-table-column
+          label="序号"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column label="头像" width="200" align="center">
+        <template #default="scope">
+          <el-avatar :size="50" :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="名称"
+          prop="name"
+          width="300"
+          align="center"
+          show-overflow-tooltip
+      />
+      <el-table-column
+          label="注册时间"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+    </el-table>
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
+    />
  </el-card>
 </template>
+<script setup>
+import * as XLSX from 'xlsx'
+import {
+  Edit,
+  Delete,
+  InfoFilled,
+  View,
+  ArrowDownBold,
+  Plus,
+} from '@element-plus/icons-vue'
+import {nextTick, onMounted, reactive, ref} from 'vue'

-<script setup></script>
+import {options} from './options.js'
+import {getUserList} from "../../api/modules/user";

-<style lang="scss" scoped></style>
+const tableData = ref([])
+const dataList = ref([])
+const table = ref()
+const tabclickIndex = ref()
+const isExpand = ref(false)
+const columnData = ref(JSON.parse(JSON.stringify(options)))
+const disabled = ref(false)
+const dialogVisible = ref(false)
+const total = ref(0)
+const formInline = ref({})
+const registerDate = ref('');
+const searchName = ref('');
+const queryData = ref({
+  keyWord: '',
+  page: 1,
+  size: 10,
+})
+
+const initData = () => {
+
+  tableData.value = columnData.value;
+
+  // orderLists(queryData.value).then((res) => {
+  //   console.log(res.data.data)
+  //   // total.value = res.data.data.total
+  //   tableData.value = res.data.data
+  // })
+}
+const itemEditHanld = (item) => {
+  item.itemEdit = !item.itemEdit
+  // // console.log(JSON.stringify(item));
+  // tabclickIndex.value = item;
+}
+const handleSizeChange = (val) => {
+  console.log(val)
+}
+const handleSelectionChange = (val) => {
+}
+const handleCurrentChange = (val) => {
+  queryData.value.size = 10
+  queryData.value.page = val
+  initData(queryData.value)
+}
+const handleClose = () => {
+}
+const dialogVisibleHanle = () => {
+  console.log('滑动加载')
+}
+const handleExpand = () => {
+  isExpand.value = false
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+const handleOpen = () => {
+  isExpand.value = true
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+// 搜索事件
+const searchEvnt = ()=> {
+    console.log('点击搜索');
+};
+
+onMounted(() => {
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.mt-4 {
+  float: right;
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+}
+
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
+.icon-view {
+  font-size: 20px;
+  color: #673ab7;
+  margin: 0 10px;
+}
+
+.icon-edit {
+  font-size: 20px;
+  color: #2f60c2;
+  margin: 0 10px;
+}
+
+.icon-dele {
+  font-size: 20px;
+  color: #ff5722;
+}
+
+.btn-color {
+  background: #fff;
+  color: #4c60cc;
+}
+
+.expand-title {
+  padding: 10px;
+  color: #919399;
+  font-weight: 600;
+}
+</style>
@@ -1,163 +1,64 @@
-export const options = [{
-    label: "序号",
-    props: "goodsId",
-    width: "60",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+export const options = [
+    {
+    userId: 1,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
  },
  {
-    label: "机构代码",
-    props: "code",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+    userId: 2,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-10 10:11:01'
  },
  {
-    label: "机构名",
-    props: "title",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+    userId: 3,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-13 10:11:01'
  },
  {
-    label: "商品名称",
-    props: "goodsname",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+    userId: 4,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-02 10:11:01'
+  },{
+    userId: 5,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-01 10:11:01'
  },
  {
-    label: "商品条码",
-    props: "commodity",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+    userId: 6,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 7,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 8,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 9,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 10,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
  },
  {
-    label: "规格",
-    props: "sku",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-  {
-    label: "品牌",
-    props: "brand",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-  {
-    label: "销售数量",
-    props: "number",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: true,
-  },
-  {
-    label: "剩余库存",
-    props: "inventory",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: true,
-  },
-  {
-    label: "成本价",
-    props: "costPrice",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: true,
-  },
-  {
-    label: "成本金额",
-    props: "amount",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: true,
-  },
-  {
-    label: "操作",
-    props: "actions",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: "right",
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-];
-export const ItemData = [{
-    label: "地址信息",
-    props: "address",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-  {
-    label: "联系方式",
-    props: "email",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-  {
-    label: "营业状态",
-    props: "state",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
-  },
-  {
-    label: "销售额",
-    props: "salenumber",
-    width: "auto",
-    align: "left",
-    show: true,
-    fixed: false,
-    itemEdit: "itemEdit",
-    sortable: false,
+    userId: 11,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    date: '2024-10-11 10:11:01'
  },

 ];