merchant_feedov_web/src/views/system/user/index.vue

<template>
  <div class="container">
    <template v-if="userFormDataState">
      <div class="head-title">
        <span> {{ route.meta.title }} </span>

        <div class="form-row">
          <a-input
            v-model="formData.username"
            style="margin: 0 0.6rem"
            placeholder="请输入用户名称"
          />
          <a-button
            type="primary"
            style="margin: 0 0.6rem"
            @click="intData"
          >
          <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
          <a-button type="primary" @click="evReturnAdd">新增账号</a-button>
        </div>
      </div>
      <a-table  :data="dataSource" :columns="columns"   :scroll="{ x: 'auto' }" > 
        <template #roleList="{ record }">
          <a-tag v-for="item in record.roleList" :key="item.id" style="margin:0 0 2px 4px;">{{ item.name }}</a-tag>
        </template>
        <template #state="{ record }">
          <a-popconfirm
            :content="`确认要${record.state === '1'? '禁用' : '开启'}${record.username}用户吗?`"
            ok-text="确定"
            cancel-text="取消"
            @ok="evSwitchStatus(record)"
          >
            <div>
              <a-switch v-model="record.state" style="pointer-events: none" checked-value="1" unchecked-value="0" />
            </div>
          </a-popconfirm>
        </template>
        <template #id="{ record }">
          <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
          <a-popconfirm content="确认删除该信息?" ok-text="确定" cancel-text="取消" @ok="evDelete(record.id)">
            <a href="javascript:;" class="a-link">删除</a>
          </a-popconfirm>
        </template>

      </a-table>
    </template>
    <!-- <svg-icon icon="menu-bangong1" ></svg-icon> -->
     <userFormData
      v-else
      :data="userManagementAddData"
      @return-main="evReturnMain"

    />  
  </div>
</template>

<script setup>
import { onMounted, ref, h } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import userFormData from "./form.vue";
import { Message, Notification } from '@arco-design/web-vue'
import { userList, deleteUserItem, systemFindRoleList, updateUserState } from '@/api/path/system.api'

const route = useRoute();

const formData = ref({
  username: ''
});
// const editState = ref(false);
const userManagementAddData = ref({})
const userFormDataState = ref(true);

const dataSource = ref([]);

const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})  
const evReturnMain = (state = true) => {
  intData()
  userFormDataState.value = state
}

const evReturnAdd = () => {
  userFormDataState.value = false;
  userManagementAddData.value = {}
  evReturnMain(false);
};

const evEdit = (e) => {
  userManagementAddData.value  = e 
  userManagementAddData.value.passwordState = true
  userFormDataState.value = true
  evReturnMain(false)
}

const evSwitchStatus = async (e) =>{
  await updateUserState({
    id:e.id,
    state: e.state == 1 ? 0 : 1,
  })
  Message.success({
    content: '操作成功',
    duration: 2000,
  })
  intData()
}

const intData = async () => {
  // const {  username } = formData.value
  const param = {
    current:  pagination.value.current,
    size:  pagination.value.pageSize,
    ...formData.value
  }
  const { data:roleList } = await systemFindRoleList({})
  const { data } = await userList(param)
  dataSource.value = data.records.map(item =>{
    item.roleList = roleList.filter(cItem =>{
      return item.roleIds.includes(cItem.id)
    })
    return item
  })
  pagination.value.total = data.total
}

const evDelete = async (id) =>{
  await deleteUserItem({id})
  intData()
}

onMounted(() => {
  intData()
})
</script>

<style scoped lang="less">
.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }
  .form-row {
    display: flex;
  }
}
</style>