提交

src/api/index.js

@@ -63,6 +63,22 @@ function user_edit_api(data) {
   });
 }
 
+function custom_list_api(data) {
+    return service({
+        url: '/admin/custom/list',
+        method: 'POST',
+        data,
+    })
+}
+
+function custom_rule_api(data) {
+    return service({
+        url: '/admin/user-role/list',
+        method: 'POST',
+        data,
+    })
+}
+
 export default {
   login_api,
   menu_api,
@@ -71,5 +87,7 @@ export default {
   user_del_api,
   user_add_api,
   user_role_api,
-  user_edit_api
+  user_edit_api,
+  custom_list_api,
+  custom_rule_api
 };

src/utils/request_axios.js

@@ -1,4 +1,5 @@
 import Axios from 'axios';
+import { Message } from "view-ui-plus";
 import { base_url, request_retry, request_retry_delay } from '../config/index';
 const service = Axios.create({
   baseURL: base_url,
@@ -25,7 +26,7 @@ service.interceptors.response.use(
   res => {
     //if(LoadingInstance){LoadingInstance.clear();}
     if (res.status !== 200) {
-      this.$Message.info('数据返回出错');
+      Message.info('数据返回出错');
       return Promise.reject('响应非200！');
     } else {
       if (res.data.code != 0) {
@@ -40,7 +41,7 @@ service.interceptors.response.use(
   },
   error => {
     //if(LoadingInstance){LoadingInstance.clear();}
-    this.$Message.info('网络错误');
+    Message.info('网络错误');
     if (/403/.test(error.toString()))
       window.parent
         ? (window.parent.location.href = '/')

src/view/system/index.vue

@@ -1,14 +1,17 @@
 <!-- vue 页面模板 -->
 <template>
   <div class="system">
-    <Button
-      @click="add_user"
-      type="primary"
-      icon="ios-search"
-      style="margin-bottom: 1em"
-    >
-      新增
-    </Button>
+    <Space wrap style="margin-bottom: 1em">
+      <Button @click="add_user" type="primary" icon="ios-search"> 新增 </Button>
+      <Input
+        v-model="searchText"
+        placeholder="请输入搜索内容"
+        icon="ios-search"
+        @on-click="() => change(1)"
+        @on-enter="() => change(1)"
+      >
+      </Input>
+    </Space>
     <Table highlight-row ref="currentRowTable" :columns="columns" :data="list">
       <template #adminRoles="{ row }">
         {{ roles_text(row) }}
@@ -200,11 +203,13 @@ export default {
     del_user(r) {
       api.user_del_api(r.userId).then(r => {
         console.log(r);
+        this.get_data();
       });
     },
-    change_user() {},
     add_user(row) {
-      this.user = JSON.parse(JSON.stringify(row || {}));
+      const user = JSON.parse(JSON.stringify(row || {}));
+      user.adminRoles = (user.adminRoles || []).map(v => v.roleId);
+      this.user = user;
       this.show_user_edit = true;
     },
     save_user() {

src/view/user/index.vue

@@ -1,16 +1,215 @@
 <!-- vue 页面模板 -->
 <template>
-  <div class="user">user</div>
+  <div class="user">
+    <Space wrap style="margin-bottom: 1em">
+      <Button type="primary" icon="ios-search" @click="show_edit">
+        新增
+      </Button>
+      <Input
+        v-model="searchText"
+        placeholder="请输入搜索内容"
+        icon="ios-search"
+        @on-click="() => change(1)"
+        @on-enter="() => change(1)"
+      >
+      </Input>
+    </Space>
+    <Table highlight-row ref="currentRowTable" :columns="columns" :data="list">
+      <template #tool="{ row }">
+        <Space wrap>
+          <Poptip
+            transfer
+            confirm
+            width="90"
+            title="删除该用户?"
+            @on-ok="() => del_user(row)"
+          >
+            <Button size="small" type="error"> 删 除 </Button>
+          </Poptip>
+          <Button size="small" type="primary" @click="() => add_user(row)">
+            修 改
+          </Button>
+        </Space>
+      </template>
+    </Table>
+    <br />
+    <Page
+      :total="total"
+      show-sizer
+      v-model="page"
+      @on-change="change"
+      @on-page-size-change="sizeChange"
+    />
+
+    <Drawer title="用户详情" placement="right" v-model="show_user_edit">
+      <Form
+        ref="formInline"
+        :model="user"
+        :rules="ruleInline"
+        :label-width="80"
+      >
+        <FormItem label="用户名">
+          <Input v-model="user.name" placeholder="请输入用户名"></Input>
+        </FormItem>
+        <FormItem label="角色">
+          <Select
+            v-model="user.adminRoles"
+            filterable
+            :remote-method="get_role_data"
+            :loading="isLoad"
+          >
+            <Option
+              v-for="(option, index) in rules"
+              :value="option.roleId"
+              :key="index"
+              >.
+              {{ option.name }}
+            </Option>
+          </Select>
+        </FormItem>
+        <FormItem label="手机号">
+          <Input v-model="user.phone" placeholder="请输入手机号"></Input>
+        </FormItem>
+        <FormItem label="密码">
+          <Input
+            v-model="user.newpassword"
+            type="password"
+            placeholder="请输入密码"
+          ></Input>
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="save_user">保 存</Button>
+        </FormItem>
+      </Form>
+    </Drawer>
+  </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
+<script setup>
+import api from '../../api/index.js';
+import { ref, onMounted } from 'vue';
+
+const searchText = ref('');
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const list = ref([]);
+const user = ref({});
+const rules = ref([]);
+const show_user_edit = ref(false);
+const isLoad = ref(false);
+
+const columns = [
+  {
+    title: '名字',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '手机号',
+    key: 'phone',
+    align: 'center',
   },
-  mounted() {},
-  methods: {},
+  {
+    title: '级别',
+    key: 'level',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    slot: 'tool',
+    align: 'center',
+  },
+];
+const ruleInline = {
+  name: [
+    {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur',
+    },
+  ],
+  sex: [
+    {
+      required: true,
+      message: '请选择性别',
+      trigger: 'blur',
+    },
+  ],
+  adminRoles: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'blur',
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: 'blur',
+    },
+  ],
 };
+
+onMounted(() => {});
+get_list();
+
+function change(page) {
+  page.value = page;
+  get_list();
+}
+
+function add_user() {}
+
+function sizeChange(pageSize) {
+  pageSize.value = pageSize;
+  get_list();
+}
+
+function get_list() {
+  api
+    .custom_list_api({
+      page: page.value,
+      pageSize: pageSize.value,
+      name: searchText.value,
+    })
+    .then(r => {
+      console.log(r.records);
+      list.value = r.records || [];
+      total.value = r.total || 0;
+    });
+}
+
+function show_edit(row) {
+  show_user_edit.value = true;
+  user.value = row || {};
+}
+
+function save_user() {
+  this.$refs.formInline.validate(valid => {
+    if (!valid) return;
+    this.user.password = this.user.newpassword || '';
+    console.log(this.user);
+  });
+}
+
+function get_role_data(query) {
+  this.isLoad = true;
+  api
+    .user_role_api({
+      page: 1,
+      pageSize: 100000,
+      name: query,
+    })
+    .then(r => {
+      this.isLoad = false;
+      this.rules = r.records || [];
+    })
+    .catch(err => {
+      this.isLoad = false;
+    });
+}
 </script>
 
 <style lang="scss"></style>