neicanCMS/src/view/user/index.vue

<!-- vue 页面模板 -->
<template>
  <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="() => show_edit(row)">
            修 改
          </Button>
        </Space>
      </template>
      <template #photo="{ row }">
        <Image :src="row.photo" fit="cover" width="58px" height="58px">
          <template #error>
            <Icon type="ios-image-outline" size="24" color="#ccc" />
          </template>
        </Image>
      </template>
    </Table>
    <br />
    <Page
      :total="total"
      show-sizer
      v-model="page"
      @on-change="change"
      @on-page-size-change="sizeChange"
    />

    <Drawer
      :mask-closable="false"
      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="头像">
          <div class="img-box" v-if="user.photo && user.photo.url">
            <Image
              :src="user.photo.url"
              fit="cover"
              width="100%"
              height="100%"
            />
            <Icon
              type="ios-trash-outline"
              class="check-icon"
              size="25"
              @click="handleRemove"
            ></Icon>
          </div>
          <Upload
            ref="upload"
            v-else
            :show-upload-list="false"
            :on-success="handle_success"
            :format="['jpg', 'jpeg', 'png']"
            :max-size="5120"
            :on-format-error="handle_format_error"
            :headers="{
              Authorization: token,
            }"
            type="drag"
            :action="base_url + '/admin/leaders/upload'"
            style="display: inline-block; width: 58px"
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
        </FormItem>
        <FormItem label="角色">
          <Select
            v-model="user.roleId"
            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="机构">
          <Select
            v-model="user.organId"
            filterable
            :remote-method="get_regan_data"
            :loading="isLoad"
          >
            <Option
              v-for="(option, index) in organ"
              :value="option.organId"
              :key="index"
            >
              {{ option.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="地域">
          <TreeSelect v-model="user.regionId" :data="region" />
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="user.phone" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="密码">
          <Input
            v-model="user.newpassword"
            type="password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem label="简介">
          <Input
            v-model="user.info"
            type="textarea"
            :rows="4"
            placeholder="请输入简介"
          ></Input>
        </FormItem>
        <FormItem label="职位">
          <Input v-model="user.position" placeholder="请输入职位"></Input>
        </FormItem>
        <FormItem label="职级">
          <Input v-model="user.level" placeholder="请输入职级"></Input>
        </FormItem>
        <FormItem label="履历">
          <Input
            v-model="user.resume"
            type="textarea"
            :rows="4"
            placeholder="请输入履历"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save_user">保 存</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Image, Message } from 'view-ui-plus';

import api from '../../api/index.js';
import { base_url } from '../../config/index';

const token = localStorage.getItem('neican_token');
const searchText = ref('');
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const formInline = ref(null);
const upload = ref(null);
const list = ref([]);
const user = ref({
  headSculpture: [],
  photo: {},
  regionId: '',
});
const rules = ref([]);
const organ = ref([]);
const region = ref([]);
const show_user_edit = ref(false);
const isLoad = ref(false);

const columns = [
  {
    title: '名字',
    key: 'name',
    align: 'center',
  },
  {
    title: '头像',
    slot: 'photo',
    align: 'center',
  },
  {
    title: '手机号',
    key: 'phone',
    align: 'center',
  },
  {
    title: '级别',
    key: 'level',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'tool',
    align: 'center',
  },
];
const ruleInline = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  newpassword: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
};

onMounted(() => {});
get_list();
get_role_data();
get_regan_data();
get_region_api();

function change(p) {
  page.value = p;
  get_list();
}

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 => {
      list.value = r.records || [];
      total.value = r.total || 0;
    });
}

function show_edit(data) {
  const row = JSON.parse(JSON.stringify(data || {}));
  show_user_edit.value = true;
  if (row.photo)
    row.photo = {
      url: row.photo,
    };
  user.value = row || {
    headSculpture: [],
    photo: {},
    regionId: '',
  };
}

function save_user() {
  formInline.value.validate(valid => {
    if (!valid) return;
    const U = user.value;
    if (!U.userId)
      api
        .custom_add({
          name: U.name,
          regionId: U.regionId,
          organId: U.organId,
          phone: U.phone,
          password: U.newpassword,
          info: U.info,
          photo: U.photo.url,
          position: U.position,
          resume: U.resume,
          level: U.level,
          roleId: U.roleId,
        })
        .then(() => {
          Message.info('新增成功');
          show_user_edit.value = false;
          get_list();
        });
    else
      api
        .custom_updata({
          name: U.name,
          regionId: U.regionId,
          organId: U.organId,
          phone: U.phone,
          password: U.newpassword,
          info: U.info,
          photo: U.photo.url,
          position: U.position,
          resume: U.resume,
          level: U.level,
          roleId: U.roleId,
          userId: U.userId,
        })
        .then(() => {
          Message.info('修改成功');
          show_user_edit.value = false;
          get_list();
        });
  });
}

function get_role_data(query) {
  isLoad.value = true;
  api
    .user_role_api({
      page: 1,
      pageSize: 100000,
      name: query,
    })
    .then(r => {
      isLoad.value = false;
      rules.value = r.records || [];
    })
    .catch(err => {
      isLoad.value = false;
    });
}

function get_regan_data(query) {
  api
    .organ_api({
      page: 1,
      pageSize: 100000,
      name: query,
    })
    .then(r => {
      organ.value = r.records || [];
    });
}

function get_region_api() {
  api.region_api().then(r => {
    region.value = tree_change(r || []);
  });
}

function tree_change(list) {
  const li = [];
  for (let i = 0; i < list.length; i++) {
    const v = list[i];
    v.title = v.name;
    v.value = v.regionId;
    v.expand = false;
    v.selected = false;
    v.checked = false;
    li.children = tree_change(v.children || []);
    li.push(v);
  }
  return li;
}

function handle_success(response, file, fileList) {
  user.value.photo.url = response.data.url || '';
  user.value.photo.file = file || null;
  Message.info('头像上传成功');
}

function handle_format_error(file) {
  Message.info('头像上传失败');
}

function handleRemove() {
  user.value.photo.url = '';
  user.value.photo.file = null;
}

function del_user(row) {
  api.custom_del(row.userId).then(() => {
    Message.info('删除成功');
    get_list();
  });
}
</script>

<style lang="scss">
.img-box {
  width: 58px;
  height: 58px;
  position: relative;

  .check-icon {
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    &:hover {
      opacity: 1;
    }
  }
}
</style>