neicanCMS/src/view/leader/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>
      <Select v-model="organ_val" style="width: 200px">
        <Option
          v-for="item in organ"
          :value="item.organId"
          :key="item.organId"
          >{{ item.name }}</Option
        >
      </Select>
    </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 }">
        <img :src="row.photo" alt="暂无图片" style="width: 60px" />
      </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="简述">
          <Input v-model="user.info" placeholder="请输入简述"></Input>
        </FormItem>
        <FormItem label="头像">
        </FormItem>
        <FormItem label="职位">
          <Input
            v-model="user.position"
            :row="4"
            placeholder="请输入职位"
          ></Input>
        </FormItem>
        <FormItem label="级别">
          <Input
            v-model="user.position"
            :row="4"
            placeholder="请输入职位"
          ></Input>
        </FormItem>
        <FormItem label="职位">
          <Input
            v-model="user.position"
            :row="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 { Message } from 'view-ui-plus';

import api from '../../api/index.js';

const searchText = ref('');
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const formInline = ref(null);
const list = ref([]);
const user = ref({
  headSculpture: [],
  regionId: '',
});
const organ = ref([]);
const organ_val = ref('');
const show_user_edit = ref(false);

const columns = [
  {
    title: '姓名',
    key: 'name',
    align: 'center',
  },
  {
    title: '职位',
    key: 'position',
    align: 'center',
  },
  {
    title: '头像',
    slot: 'photo',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'tool',
    align: 'center',
  },
];
const ruleInline = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
};

onMounted(() => {});
get_list();
get_organ_api();

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

function sizeChange(pageSize) {
  pageSize.value = pageSize;
  get_list();
}

function get_list() {
  api
    .leader_api({
      page: page.value,
      pageSize: pageSize.value,
      name: searchText.value,
    })
    .then(r => {
      console.log(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;
  user.value = row || {
    headSculpture: [],
    organId: '',
  };
}

function save_user() {
  formInline.value.validate(valid => {
    if (!valid) return;
    const U = user.value;
    const p = {
      info: U.info,
      photo: U.photo,
      position: U.position,
      resume: U.resume,
      level: U.level,
      regionId: U.regionId,
      sort: U.sort,
      organId: U.organId,
      name: U.name,
      leaderId: U.leaderId,
    };
    console.log(p);
    // if (!U.leaderId)
    //   api.leader_add(p).then(() => {
    //     Message.info('新增成功');
    //     show_user_edit.value = false;
    //     get_list();
    //   });
    // else
    //   api.leader_update(p).then(() => {
    //     Message.info('修改成功');
    //     show_user_edit.value = false;
    //     get_list();
    //   });
  });
}

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

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

<style lang="scss"></style>