JSL_OrganizeInternalOAWeb/src/Manager/components/User.vue

<template xmlns="">
  <div class="main">
    <div class="header">
      <div class="input">
        <a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
        <a-input class="second-input" v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
        <a-select
            placeholder="请选择状态"
            ref="select"
            style="width: 120px"
            @focus="focus"
        >
          <a-select-option value="启用">启用</a-select-option>
          <a-select-option value="禁用">禁用</a-select-option>
        </a-select>
      </div>
      <div class="edit">
        <a-button class="query-button"><SearchOutlined />查询</a-button>
        <a-button class="add-button" @click="showModal1"><PlusOutlined />新增用户</a-button>
        <a-button class="delete-button" @click="showModal2"><DeleteOutlined />删除用户</a-button>
      </div>
    </div>


    <!--新增、删除用户对话框-->
    <a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
      <p>新增</p>
    </a-modal>
    <a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
      <p>删除</p>
    </a-modal>


    <div class="table">
      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'user_state'">
            <span>
              <a-tag
                v-for="tag in record.user_state"
                :key="tag"
                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span style="margin-left: 10px">
              <a-button style="color: dodgerblue" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
              <a-button style="color: dodgerblue" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>


<script setup>
import {createVNode, ref, computed} from 'vue';
import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  EditOutlined
} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import { usePagination } from 'vue-request';
import axios from 'axios';
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);


const showModal1 = () => {
  open1.value = true;
};
const handleOk = e => {
  console.log(e);
  open1.value = false;
};

const open2 = ref(false);
const showModal2 = () => {
  open2.value = true;
};
const hideModal = () => {
  open2.value = false;
};

const showDeleteConfirm = () => {
  console.log("delete Dialog")
  Modal.confirm({
    title: 'Confirm',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确认删除这条数据吗',
    okText: '确认',
    cancelText: '取消',
  });

};

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '账户昵称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '电话',
    key: 'tel',
    dataIndex: 'tel',
  },
  {
    title: '用户状态',
    dataIndex: 'user_state',
    key: 'user_state',
  },
  {
    title: '更新时间',
    key: 'updatetime',
    dataIndex: 'updatetime'
  },
  {
    title: '操作',
    key: 'action',
  },
];
const data = [
  {
    key: '1',
    id:'1',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '2',
    id:'2',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '3',
    id:'3',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '4',
    id:'4',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '5',
    id:'5',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '6',
    id:'6',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '7',
    id:'7',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '8',
    id:'8',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },
  {
    key: '9',
    id:'9',
    name: 'John Brown',
    username: 32,
    tel: '123456789',
    user_state:['启用'],
    updatetime:'1.28',
  },

];


const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};

const queryData = params => {
  return axios.get('https://randomuser.me/api?noinfo', {
    params,
  });
};
const {
  data: dataSource,
  run,
  loading,
  current,
  pageSize,
} = usePagination(queryData, {
  formatResult: res => res.data.results,
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'results',
  },
});
const pagination = computed(() => ({
  total: 200,
  current: current.value,
  pageSize: pageSize.value,
}));
const handleTableChange = (pag, filters, sorter) => {
  run({
    results: pag.pageSize,
    page: pag?.current,
    sortField: sorter.field,
    sortOrder: sorter.order,
    ...filters,
  });
};
</script>


<style scoped>
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.header {
  display: flex;
}

.input {
  width: 35vw;
  margin-top: 2vh;
  margin-bottom: 1vh;
  display: flex;
  flex-direction: row;
}

.first-input {
  margin-right: 1vw;
  margin-left: 1vw;
}

.second-input {
  margin-right: 1vw;
}

.edit {
  margin-top: 2vh;
  width: 20vw;
  display: flex;
}

.query-button {
  background-color: dodgerblue;
  color:white;
  margin-left: 4vw;
  margin-right: 1vw;
}

.add-button {
  background-color: limegreen;
  color: white;
}

.delete-button {
  background-color: #CD5C5C;
  color: white;
  margin-left: 1vw;
}

.table {
  width: 100%;
  height: auto;
  margin-top: 2vh;
}
</style>