From 9a3d24ac8176bc232f69c2dbd804913bf2a0d049 Mon Sep 17 00:00:00 2001
From: kdyq007 <kdyq@vip.qq.com>
Date: Wed, 20 Nov 2019 19:02:36 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=20=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/config/router.config.js                |   7 +
 .../cmdb/acl/module/resourceTypeForm.vue      | 218 +++++++++++++
 ui/src/views/cmdb/acl/resource_types.vue      | 307 ++++++++++++++++++
 3 files changed, 532 insertions(+)
 create mode 100644 ui/src/views/cmdb/acl/module/resourceTypeForm.vue
 create mode 100644 ui/src/views/cmdb/acl/resource_types.vue

diff --git a/ui/src/config/router.config.js b/ui/src/config/router.config.js
index be7ab04..b41bf9b 100644
--- a/ui/src/config/router.config.js
+++ b/ui/src/config/router.config.js
@@ -93,6 +93,13 @@ const cmdbRouter = [
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/resources'),
         meta: { title: '资源管理', keepAlive: true }
+      },
+      {
+        path: '/acl/resource_types',
+        name: 'acl_resource_types',
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/acl/resource_types'),
+        meta: { title: '资源类型', keepAlive: true }
       }
     ]
   }
diff --git a/ui/src/views/cmdb/acl/module/resourceTypeForm.vue b/ui/src/views/cmdb/acl/module/resourceTypeForm.vue
new file mode 100644
index 0000000..1199f99
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourceTypeForm.vue
@@ -0,0 +1,218 @@
+<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="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="资源类型"
+      >
+        <a-select name="resource_type_id" default-value="1" v-decorator="['resource_type_id', {rules: []} ]">
+          <a-select-option value="1">默认资源类型</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="app_id"
+          type="hidden"
+          v-decorator="['app_id', {rules: []} ]"
+        />
+      </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 { addResource, updateResourceById } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  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({
+          id: record.id,
+          name: record.name,
+          app_id: this.$store.state.app.name,
+          resource_type_id: record.resource_type_id
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateResource(values.id, values)
+          } else {
+            this.createResource(values)
+          }
+        }
+      })
+    },
+    updateResource (id, data) {
+      updateResourceById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResource (data) {
+      addResource(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/resource_types.vue b/ui/src/views/cmdb/acl/resource_types.vue
new file mode 100644
index 0000000..62591d4
--- /dev/null
+++ b/ui/src/views/cmdb/acl/resource_types.vue
@@ -0,0 +1,307 @@
+<template>
+  <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="description" slot-scope="text">{{ text }}</template>
+
+      <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>
+    <resourceForm ref="resourceForm" :handleOk="handleOk"> </resourceForm>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import resourceForm from './module/resourceForm'
+import { deleteResourceById, searchResource } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceForm
+  },
+  data () {
+    return {
+      appList: [{
+        id: '1',
+        name: '默认应用'
+      }],
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源',
+
+      formLayout: 'vertical',
+
+      allResources: [],
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '资源名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 50,
+          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: 'resource_type_id',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'resource_type_id' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResource(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.resources
+
+            console.log('loadData.res', res)
+            this.allResources = res.resources
+            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.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] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.resourceForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteResource(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceForm.handleCreate()
+    },
+
+    deleteResource (id) {
+      deleteResourceById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
+</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;
+  }
+  .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>