From 4b5f82699acf620657c85c747ca701d7cb91a76d Mon Sep 17 00:00:00 2001
From: qiqi <kdyq@vip.qq.com>
Date: Sun, 17 Nov 2019 09:32:39 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/acl/user.js                    |  41 +++
 ui/src/views/cmdb/acl/module/userForm.vue | 271 ++++++++++++++++
 ui/src/views/cmdb/acl/users.vue           | 365 +++++++++++++++++++++-
 3 files changed, 674 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/api/acl/user.js
 create mode 100644 ui/src/views/cmdb/acl/module/userForm.vue

diff --git a/ui/src/api/acl/user.js b/ui/src/api/acl/user.js
new file mode 100644
index 0000000..37e55c8
--- /dev/null
+++ b/ui/src/api/acl/user.js
@@ -0,0 +1,41 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v0.1'
+
+export function currentUser () {
+  return axios({
+    url: urlPrefix + `/users/info`,
+    method: 'GET'
+  })
+}
+
+export function searchUser (params) {
+  return axios({
+    url: urlPrefix + `/users?${params}`,
+    method: 'GET'
+  })
+}
+
+export function addUser (params) {
+  return axios({
+    url: urlPrefix + '/users',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateUserById (id, params) {
+  return axios({
+    url: urlPrefix + `/users/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteUserById (id) {
+  return axios({
+    url: urlPrefix + `/users/${id}`,
+    method: 'DELETE'
+  })
+}
+
diff --git a/ui/src/views/cmdb/acl/module/userForm.vue b/ui/src/views/cmdb/acl/module/userForm.vue
new file mode 100644
index 0000000..20bba40
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/userForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="用户名(英文)"
+      >
+        <a-input
+          name="username"
+          placeholder="英文名"
+          v-decorator="['username', {rules: [{ required: true, message: '请输入用户名'}]} ]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="中文名"
+      >
+        <a-input
+          name="nickname"
+          v-decorator="['nickname', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="部门"
+      >
+        <a-input
+          name="department"
+          v-decorator="['department', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="小组"
+      >
+        <a-input
+          name="catalog"
+          v-decorator="['catalog', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="邮箱"
+      >
+        <a-input
+          name="email"
+          v-decorator="['email', {rules: [{ required: true, message: '请输入邮箱'},{message: '请输入正确的邮箱', pattern: RegExp('^\w+@\w+\.\w+$')}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="手机号码"
+      >
+        <a-input
+          name="mobile"
+          v-decorator="['mobile', {rules: [{message: '请输入正确的手机号码', pattern: RegExp('^1\d{10}$')}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        label="是否锁定"
+      >
+        <a-switch
+          @change="onChange"
+          name="block"
+          v-decorator="['block', {rules: [], valuePropName: 'checked',} ]"
+        />
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addUser, updateUserById } from '@/api/acl/user'
+
+export default {
+  name: 'AttributeForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+
+      drawerTitle: '新增用户',
+      drawerVisible: false,
+      formLayout: 'vertical',
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          uid: record.uid,
+          username: record.username,
+          nickname: record.nickname,
+          department: record.department,
+          catalog: record.catalog,
+          email: record.email,
+          mobile: record.mobile,
+          block: record.block
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateUser(values.id, values)
+          } else {
+            this.createUser(values)
+          }
+        }
+      })
+    },
+    updateUser (attrId, data) {
+      updateUserById(attrId, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createUser (data) {
+      addUser(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/users.vue b/ui/src/views/cmdb/acl/users.vue
index 6d9c248..5e50201 100644
--- a/ui/src/views/cmdb/acl/users.vue
+++ b/ui/src/views/cmdb/acl/users.vue
@@ -1,10 +1,369 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="aliasSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.alias">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.alias})|(?=${columnSearchText.alias})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.alias.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <span slot="is_check" slot-scope="text">
+        <a-icon type="check" v-if="text"/>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <userForm ref="userForm" :handleOk="handleOk"> </userForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import userForm from './module/userForm'
+import { deleteUserById, searchUser } from '@/api/acl/user'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    userForm
+  },
+  data () {
+    return {
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增用户',
+
+      CITypeName: this.$route.params.CITypeName,
+      CITypeId: this.$route.params.CITypeId,
+
+      formLayout: 'vertical',
+
+      allUsers: [],
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '用户名',
+          dataIndex: 'username',
+          sorter: false,
+          width: 250,
+          scopedSlots: {
+            customRender: 'aliasSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.alias && record.alias.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '中文名',
+          dataIndex: 'nickname',
+          sorter: false,
+          width: 250,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '部门',
+          dataIndex: 'department',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'department' }
+
+        },
+        {
+          title: '小组',
+          dataIndex: 'catalog',
+          sorter: false,
+          width: 50,
+          scopedSlots: { customRender: 'catalog' }
+
+        },
+        {
+          title: '邮箱',
+          dataIndex: 'email',
+          sorter: false,
+          width: 50,
+          scopedSlots: { customRender: 'email' }
+
+        },
+        {
+          title: '手机',
+          dataIndex: 'mobile',
+          sorter: false,
+          width: 50,
+          scopedSlots: { customRender: 'mobile' }
+
+        },
+        {
+          title: '锁定',
+          dataIndex: 'block',
+          sorter: false,
+          width: 50,
+          scopedSlots: { customRender: 'block' }
+
+        },
+        {
+          title: '加入时间',
+          dataIndex: 'date_joined',
+          sorter: false,
+          scopedSlots: { customRender: 'date_joined' }
+
+        }
+      ],
+      loadData: parameter => {
+//        parameter['page_size'] = parameter['pageSize']
+//        parameter['page'] = parameter['pageNo']
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchUser(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.users
+
+            console.log('loadData.res', res)
+            this.allUsers = res.users
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.searchUsers()
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+    searchUsers () {
+      searchUser().then(res => {
+        this.allUsers = res.users
+      })
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.userForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteUserById(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.userForm.handleCreate()
+    },
+
+    deleteUser (attrId) {
+      deleteUserById(attrId)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {}
+
+}
 </script>
 
-<style>
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>