diff --git a/ui/src/views/attributes/index.vue b/ui/src/views/attributes/index.vue deleted file mode 100644 index b3d97fb..0000000 --- a/ui/src/views/attributes/index.vue +++ /dev/null @@ -1,374 +0,0 @@ -<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" - :showPagination="showPagination" - 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="`Search ${column.dataIndex}`" - :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" - >Search</a-button> - <a-button - @click="() => handleReset(clearFilters, column)" - size="small" - style="width: 90px" - >Reset</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 @click="handleDelete(record)">删除</a> - </template> - </span> - - </s-table> - <AttributeForm ref="attributeForm" :handleOk="handleOk"> </AttributeForm> - - </a-card> -</template> - -<script> -import { STable } from '@/components' -import AttributeForm from './module/attributeForm' -import { valueTypeMap } from './module/const' -import { deleteAttributesById, searchAttributes } from '@/api/cmdb/CITypeAttr' - -export default { - name: 'Index', - components: { - STable, - AttributeForm - }, - data () { - return { - scroll: { x: 1400, y: 500 }, - btnName: '新增属性', - - CITypeName: this.$route.params.CITypeName, - CITypeId: this.$route.params.CITypeId, - - formLayout: 'vertical', - - attributes: [], - allAttributes: [], - transferData: [], - transferTargetKeys: [], - transferSelectedKeys: [], - originTargetKeys: [], - - pagination: { - defaultPageSize: 20 - }, - showPagination: false, - columnSearchText: { - alias: '', - name: '' - }, - columns: [ - { - title: '名称', - dataIndex: 'alias', - sorter: false, - width: 200, - scopedSlots: { - customRender: 'aliasSearchRender', - filterDropdown: 'filterDropdown', - filterIcon: 'filterIcon' - }, - onFilter: (value, record) => record.alias.toLowerCase().includes(value.toLowerCase()), - onFilterDropdownVisibleChange: (visible) => { - if (visible) { - setTimeout(() => { - this.searchInput.focus() - }, 0) - } - } - }, - { - title: '英文名', - dataIndex: 'name', - sorter: false, - width: 200, - scopedSlots: { - customRender: 'nameSearchRender', - filterDropdown: 'filterDropdown', - filterIcon: 'filterIcon' - }, - onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()), - onFilterDropdownVisibleChange: (visible) => { - if (visible) { - setTimeout(() => { - this.searchInput.focus() - }, 0) - } - } - }, - { - title: '类型', - dataIndex: 'value_type', - sorter: false, - width: 100, - scopedSlots: { customRender: 'value_type' }, - customRender: (text) => valueTypeMap[text] - - }, - { - title: '唯一', - dataIndex: 'is_unique', - width: 80, - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '索引', - dataIndex: 'is_index', - sorter: false, - width: 80, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '排序', - dataIndex: 'is_sortable', - sorter: false, - width: 80, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '链接', - dataIndex: 'is_link', - sorter: false, - width: 80, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '密码', - dataIndex: 'is_password', - sorter: false, - width: 100, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '列表', - dataIndex: 'is_list', - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - - { - title: '操作', - dataIndex: 'action', - width: 100, - fixed: 'right', - scopedSlots: { customRender: 'action' } - } - ], - loadData: parameter => { - console.log('loadData.parameter', parameter) - - return searchAttributes() - .then(res => { - this.allAttributes = res.attributes - return { - data: res.attributes - - } - }) - }, - - 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.getAttributes() - this.setScrollY() - }, - methods: { - handleSearch (selectedKeys, confirm, column) { - confirm() - this.columnSearchText[column.dataIndex] = selectedKeys[0] - }, - - handleReset (clearFilters, column) { - clearFilters() - this.columnSearchText[column.dataIndex] = '' - }, - - getAttributes () { - searchAttributes().then(res => { - this.allAttributes = res.attributes - }) - }, - - setScrollY () { - this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200 - }, - - handleEdit (record) { - this.$refs.attributeForm.handleEdit(record) - }, - handleDelete (record) { - this.deleteAttribute(record.id) - }, - handleOk () { - this.$refs.table.refresh() - }, - - handleCreate () { - this.$refs.attributeForm.handleCreate() - }, - - deleteAttribute (attrId) { - deleteAttributesById(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 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> diff --git a/ui/src/views/attributes/module/attributeForm.vue b/ui/src/views/attributes/module/attributeForm.vue deleted file mode 100644 index 9959925..0000000 --- a/ui/src/views/attributes/module/attributeForm.vue +++ /dev/null @@ -1,339 +0,0 @@ -<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: '请输入属性名'},{message: '不能以数字开头,可以是英文 数字以及下划线 (_)', pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$')}]} ]" - /> - </a-form-item> - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="别名" - > - <a-input - name="alias" - v-decorator="['alias', {rules: []} ]" - /> - </a-form-item> - - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="数据类型" - > - - <a-select - name="value_type" - style="width: 120px" - v-decorator="['value_type', {rules: [{required: true}], } ]" - > - <a-select-option :value="key" :key="key" v-for="(value, key) in ValueTypeMap">{{ value }}</a-select-option> - </a-select> - - </a-form-item> - - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否唯一" - > - <a-switch - @change="onChange" - name="is_unique" - v-decorator="['is_unique', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否索引" - > - <a-switch - @change="onChange" - name="is_index" - v-decorator="['is_index', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否可排序" - > - <a-switch - @change="onChange" - name="is_sortable" - v-decorator="['is_sortable', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否是链接" - > - <a-switch - @change="onChange" - name="is_link" - v-decorator="['is_link', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否是密码" - > - <a-switch - @change="onChange" - name="is_password" - v-decorator="['is_password', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - <a-form-item - :label-col="horizontalFormItemLayout.labelCol" - :wrapper-col="horizontalFormItemLayout.wrapperCol" - label="是否列表" - > - <a-switch - @change="onChange" - name="is_list" - v-decorator="['is_list', {rules: [], valuePropName: 'checked',} ]" - /> - </a-form-item> - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="预定义值" - > - <a-textarea - :rows="5" - name="choice_value" - placeholder="多个值使用半角逗号“,”分隔" - v-decorator="['choice_value', {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 { createAttribute, createCITypeAttributes, updateAttributeById } from '@/api/cmdb/CITypeAttr' -import { valueTypeMap } from './const' - -export default { - name: 'AttributeForm', - components: { - STable - }, - data () { - return { - - drawerTitle: '新增属性', - drawerVisible: false, - CITypeName: this.$route.params.CITypeName, - CITypeId: this.$route.params.CITypeId, - - formLayout: 'vertical', - - attributes: [], - allAttributes: [], - - ValueTypeMap: valueTypeMap - - } - }, - - 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, - alias: record.alias, - name: record.name, - value_type: record.value_type, - is_list: record.is_list, - is_unique: record.is_unique, - is_index: record.is_index, - is_password: record.is_password, - is_link: record.is_link, - is_sortable: record.is_sortable, - choice_value: (record.choice_value || []).join('\n') - - }) - }) - }, - - handleSubmit (e) { - e.preventDefault() - this.form.validateFields((err, values) => { - if (!err) { - // eslint-disable-next-line no-console - console.log('Received values of form: ', values) - if (values.choice_value) { - values.choice_value = values.choice_value.split('\n') - } - - if (values.id) { - this.updateAttribute(values.id, values) - } else { - this.createAttribute(values) - } - } - }) - }, - updateAttribute (attrId, data) { - updateAttributeById(attrId, data) - .then(res => { - this.$message.success(`更新成功`) - this.handleOk() - this.onClose() - }).catch(err => this.requestFailed(err)) - }, - - createAttribute (data) { - createAttribute(data) - .then(res => { - if (this.CITypeId) { - createCITypeAttributes(this.CITypeId, { attr_id: [res.attr_id] }) - .then(res => { - this.$message.success(`添加成功`) - this.handleOk() - this.onClose() - }).catch(err => this.requestFailed(err)) - } else { - 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/attributes/module/const.js b/ui/src/views/attributes/module/const.js deleted file mode 100644 index 2f43d48..0000000 --- a/ui/src/views/attributes/module/const.js +++ /dev/null @@ -1,8 +0,0 @@ -export const valueTypeMap = { - '0': '整数', - '1': '浮点数', - '2': '文本', - '3': 'datetime', - '4': 'date', - '5': 'time' -} diff --git a/ui/src/views/ci_type/attributesTable.vue b/ui/src/views/ci_type/attributesTable.vue deleted file mode 100644 index 22adaf3..0000000 --- a/ui/src/views/ci_type/attributesTable.vue +++ /dev/null @@ -1,551 +0,0 @@ -<template> - - <div> - <div class="action-btn"> - <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ singleAttrAction.btnName }}</a-button> - <a-button @click="handleUpdate" type="primary">{{ batchBindAttrAction.btnName }}</a-button> - </div> - - <s-table - :alert="options.alert" - :columns="columns" - :data="loadData" - :rowKey="record=>record.id" - :rowSelection="options.rowSelection" - :scroll="scroll" - :showPagination="showPagination" - 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="`Search ${column.dataIndex}`" - :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" - >Search</a-button> - <a-button - @click="() => handleReset(clearFilters, column)" - size="small" - style="width: 90px" - >Reset</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 @click="handleDelete(record)">删除</a> - </template> - </span> - - </s-table> - <AttributeForm ref="attributeForm" :handleOk="handleOk"> </AttributeForm> - - <a-drawer - :closable="false" - :title="batchBindAttrAction.drawerTitle" - :visible="batchBindAttrAction.drawerVisible" - @close="onBatchBindAttrActionClose" - placement="right" - width="30%" - > - <a-form :form="form" :layout="formLayout" @submit="handleBatchUpdateSubmit"> - - <a-transfer - :dataSource="transferData" - :render="item=>item.title" - :selectedKeys="transferSelectedKeys" - :targetKeys="transferTargetKeys" - :titles="['当前项', '已选项']" - :listStyle="{ - height: '600px', - width: '40%', - }" - showSearch - @change="handleTransferChange" - @scroll="handleTransferScroll" - @selectChange="handleTransferSelectChange" - - /> - - <div - :style="{ - position: 'absolute', - left: 0, - bottom: 0, - width: '100%', - borderTop: '1px solid #e9e9e9', - padding: '0.8rem 1rem', - background: '#fff', - - }" - > - <a-button @click="handleBatchUpdateSubmit" type="primary" style="margin-right: 1rem">确定</a-button> - <a-button @click="onBatchBindAttrActionClose">取消</a-button> - - </div> - </a-form> - - </a-drawer> - </div> -</template> - -<script> -import { - createCITypeAttributes, - deleteCITypeAttributesById, - getCITypeAttributesByName, - searchAttributes -} from '@/api/cmdb/CITypeAttr' -import { STable } from '@/components' -import { mixin, mixinDevice } from '@/utils/mixin' -import AttributeForm from '@/views/cmdb/attributes/module/attributeForm' -import { valueTypeMap } from '@/views/cmdb/attributes/module/const' - -export default { - name: 'AttributesTable', - mixins: [mixin, mixinDevice], - components: { - STable, - AttributeForm - }, - data () { - return { - form: this.$form.createForm(this), - scroll: { x: 1300, y: 600 }, - singleAttrAction: { - btnName: '新增属性', - drawerTitle: '新增属性', - drawerVisible: false - }, - batchBindAttrAction: { - btnName: '绑定属性', - drawerTitle: '绑定属性', - drawerVisible: false - }, - - CITypeName: this.$route.params.CITypeName, - CITypeId: this.$route.params.CITypeId, - - formLayout: 'vertical', - - attributes: [], - allAttributes: [], - transferData: [], - transferTargetKeys: [], - transferSelectedKeys: [], - originTargetKeys: [], - - ValueTypeMap: valueTypeMap, - pagination: { - defaultPageSize: 20 - }, - showPagination: false, - columnSearchText: { - alias: '', - name: '' - }, - columns: [ - { - title: '名称', - dataIndex: 'alias', - sorter: false, - width: 200, - scopedSlots: { - customRender: 'aliasSearchRender', - filterDropdown: 'filterDropdown', - filterIcon: 'filterIcon' - }, - onFilter: (value, record) => record.alias.toLowerCase().includes(value.toLowerCase()), - onFilterDropdownVisibleChange: (visible) => { - if (visible) { - setTimeout(() => { - this.searchInput.focus() - }, 0) - } - } - }, - { - title: '英文名', - dataIndex: 'name', - sorter: false, - width: 200, - scopedSlots: { - customRender: 'nameSearchRender', - filterDropdown: 'filterDropdown', - filterIcon: 'filterIcon' - }, - onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()), - onFilterDropdownVisibleChange: (visible) => { - if (visible) { - setTimeout(() => { - this.searchInput.focus() - }, 0) - } - } - }, - { - title: '类型', - dataIndex: 'value_type', - sorter: false, - width: 100, - scopedSlots: { customRender: 'value_type' }, - customRender: (text) => valueTypeMap[text] - - }, - { - title: '唯一', - dataIndex: 'is_unique', - width: 50, - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '索引', - dataIndex: 'is_index', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '排序', - dataIndex: 'is_sortable', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '链接', - dataIndex: 'is_link', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '密码', - dataIndex: 'is_password', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '列表', - dataIndex: 'is_list', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '必须', - dataIndex: 'is_required', - sorter: false, - width: 50, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '默认显示', - dataIndex: 'default_show', - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '操作', - dataIndex: 'action', - width: 100, - fixed: 'right', - scopedSlots: { customRender: 'action' } - } - ], - loadData: parameter => { - console.log('loadData.parameter', parameter) - return getCITypeAttributesByName(this.CITypeName) - .then(res => { - this.attributes = res.attributes - this.setTransferData() - - return { - data: res.attributes - - } - }) - }, - - mdl: {}, - // 高级搜索 展开/关闭 - advanced: false, - // 查询参数 - queryParam: {}, - // 表头 - - selectedRowKeys: [], - selectedRows: [], - - // custom table alert & rowSelection - options: { - alert: false, - rowSelection: null - }, - optionAlertShow: false - - } - }, - - beforeCreate () { - }, - - computed: { - - removeTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v)) - }, - - addTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v)) - }, - 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.getAttributes() - this.setScrollY() - }, - methods: { - handleSearch (selectedKeys, confirm, column) { - confirm() - this.columnSearchText[column.dataIndex] = selectedKeys[0] - }, - - handleReset (clearFilters, column) { - clearFilters() - this.columnSearchText[column.dataIndex] = '' - }, - - getAttributes () { - searchAttributes().then(res => { - this.allAttributes = res.attributes - }) - }, - setScrollY () { - this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250 - }, - - setTransferData () { - const data = [] - const target = [] - - this.attributes.forEach(i => target.push(i.id.toString())) - - this.allAttributes.forEach(i => data.push({ - key: i.id.toString(), - title: i.alias, - description: '' - })) - - this.transferData = data - this.transferTargetKeys = target - this.originTargetKeys = target - }, - - handleTransferChange (nextTargetKeys, direction, moveKeys) { - this.transferTargetKeys = nextTargetKeys - - console.log('targetKeys: ', nextTargetKeys) - console.log('direction: ', direction) - console.log('moveKeys: ', moveKeys) - console.log('addTransferKeys: ', this.addTransferKeys) - console.log('removeTransferKeys: ', this.removeTransferKeys) - }, - - handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) { - this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys] - console.log('sourceSelectedKeys: ', sourceSelectedKeys) - console.log('targetSelectedKeys: ', targetSelectedKeys) - }, - handleTransferScroll (direction, e) { - console.log('direction:', direction) - console.log('target:', e.target) - }, - - callback (key) { - console.log(key) - }, - - handleEdit (record) { - this.$refs.attributeForm.handleEdit(record) - }, - handleDelete (record) { - this.unbindAttribute([record.id]) - .then(res => { - this.$message.success(`删除成功`) - this.handleOk() - }).catch(err => this.requestFailed(err)) - }, - handleOk () { - this.$refs.table.refresh() - }, - handleCreate () { - this.$refs.attributeForm.handleCreate() - }, - - handleUpdate () { - this.setTransferData() - this.batchBindAttrAction.drawerVisible = true - }, - - onBatchBindAttrActionClose () { - this.batchBindAttrAction.drawerVisible = false - }, - - onChange (e) { - console.log(`checked = ${e}`) - }, - - handleBatchUpdateSubmit (e) { - e.preventDefault() - const p = [] - if (this.addTransferKeys && this.addTransferKeys.length) { - p.push(this.bindAttribute(this.addTransferKeys)) - } - - if (this.removeTransferKeys && this.removeTransferKeys.length) { - p.push(this.unbindAttribute(this.removeTransferKeys)) - } - const that = this - Promise.all(p).then(function (values) { - console.log(values) - that.$message.success(`修改成功`) - that.handleOk() - that.onBatchBindAttrActionClose() - }).catch(err => that.requestFailed(err)) - }, - - bindAttribute (attrIds) { - return createCITypeAttributes(this.CITypeId, { attr_id: attrIds }) - }, - unbindAttribute (attrIds) { - return deleteCITypeAttributesById(this.CITypeId, { attr_id: attrIds }) - }, - - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - - }, - props: { - }, - 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; - } - .ant-transfer { - margin-bottom: 1rem; - } - - .fixedWidthTable table { - table-layout: fixed; - } - - .fixedWidthTable .ant-table-tbody > tr > td { - word-wrap: break-word; - word-break: break-all; - } - .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> diff --git a/ui/src/views/ci_type/checkTable.vue b/ui/src/views/ci_type/checkTable.vue deleted file mode 100644 index cf201b9..0000000 --- a/ui/src/views/ci_type/checkTable.vue +++ /dev/null @@ -1,349 +0,0 @@ -<template> - <div> - <a-button class="action-btn" @click="handleCreate" type="primary">批量修改</a-button> - <s-table - v-once - :alert="options.alert" - :columns="columns" - :data="loadData" - :pagination="pagination" - :rowKey="record=>record.id" - :rowSelection="options.rowSelection" - :showPagination="showPagination" - ref="table" - size="middle" - :scroll="scroll" - > - - <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="handleDelete(record)">删除</a> - </template> - </span> - - </s-table> - <a-drawer - :closable="false" - :title="drawerTitle" - :visible="visible" - @close="onClose" - placement="right" - width="30%" - > - <a-form :form="form" :layout="formLayout" @submit="handleSubmit"> - - <a-transfer - :dataSource="transferData" - :render="item=>item.title" - :selectedKeys="transferSelectedKeys" - :targetKeys="transferTargetKeys" - :titles="['当前项', '已选项']" - :listStyle="{ - height: '600px', - width: '40%', - - }" - showSearch - @change="handleTransferChange" - @scroll="handleTransferScroll" - @selectChange="handleTransferSelectChange" - /> - - <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> - - </div> - -</template> - -<script> - -import { STable } from '@/components' -import { getCITypeAttributesByName, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr' - -export default { - name: 'CheckTable', - components: { - STable - }, - data () { - return { - CITypeId: this.$route.params.CITypeId, - CITypeName: this.$route.params.CITypeName, - - form: this.$form.createForm(this), - scroll: { x: 900, y: 600 }, - - visible: false, - - drawerTitle: '', - - formLayout: 'vertical', - - transferData: [], - transferTargetKeys: [], - transferSelectedKeys: [], - originTargetKeys: [], - - attributes: [], - - pagination: { - defaultPageSize: 20 - }, - showPagination: false, - columns: [ - { - title: '属性名', - dataIndex: 'alias', - sorter: false, - width: 200, - scopedSlots: { customRender: 'alias' } - }, - { - title: '属性英文名', - dataIndex: 'name', - sorter: false, - width: 200, - scopedSlots: { customRender: 'name' } - }, - { - title: '必须', - dataIndex: 'is_required', - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - - { - title: '操作', - dataIndex: 'action', - width: 100, - fixed: 'right', - scopedSlots: { customRender: 'action' } - } - ], - loadData: parameter => { - console.log('loadData.parameter', parameter) - return getCITypeAttributesByName(this.CITypeName) - .then(res => { - this.attributes = res.attributes - this.setTransferData() - - return { - data: this.attributes.filter(o => o.is_required) - } - }).catch(err => this.requestFailed(err)) - }, - - mdl: {}, - // 高级搜索 展开/关闭 - advanced: false, - // 查询参数 - queryParam: {}, - - // custom table alert & rowSelection - options: { - alert: false, - rowSelection: null - }, - optionAlertShow: false - - } - }, - beforeCreate () { - }, - computed: { - - removeTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v)) - }, - - addTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v)) - }, - - formItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } : {} - }, - - horizontalFormItemLayout () { - return { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } - }, - buttonItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - wrapperCol: { span: 14, offset: 4 } - } : {} - } - }, - mounted () { - - }, - methods: { - - setTransferData () { - const data = [] - const target = [] - this.attributes.forEach( - function (i) { - data.push({ - key: i.id.toString(), - title: i.alias, - description: '' - }) - if (i.is_required) { - target.push(i.id.toString()) - } - } - ) - this.transferData = data - this.transferTargetKeys = target - this.originTargetKeys = target - }, - setScrollY () { - this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200 - }, - - handleTransferChange (nextTargetKeys, direction, moveKeys) { - this.transferTargetKeys = nextTargetKeys - - console.log('targetKeys: ', nextTargetKeys) - console.log('direction: ', direction) - console.log('moveKeys: ', moveKeys) - console.log('addTransferKeys: ', this.addTransferKeys) - console.log('removeTransferKeys: ', this.removeTransferKeys) - }, - - handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) { - this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys] - - console.log('sourceSelectedKeys: ', sourceSelectedKeys) - console.log('targetSelectedKeys: ', targetSelectedKeys) - }, - handleTransferScroll (direction, e) { - console.log('direction:', direction) - console.log('target:', e.target) - }, - - handleDelete (record) { - console.log(record) - - updateCITypeAttributesById(this.CITypeId, { attributes: [{ attr_id: record.id, is_required: false }] }) - .then(res => { - this.$message.success(`删除成功`) - this.handleOk() - }) - .catch(err => this.requestFailed(err)) - }, - handleOk () { - this.$refs.table.refresh() - }, - - handleCreate () { - this.drawerTitle = '批量修改' - this.visible = true - }, - - onClose () { - this.form.resetFields() - this.visible = false - }, - - onChange (e) { - console.log(`checked = ${e.target.checked}`) - }, - - handleSubmit (e) { - e.preventDefault() - if (this.addTransferKeys || this.removeTransferKeys) { - const requestData = [] - this.addTransferKeys.forEach(function (k) { - const data = { attr_id: k, is_required: true } - requestData.push(data) - }) - - this.removeTransferKeys.forEach(function (k) { - const data = { attr_id: k, is_required: false } - requestData.push(data) - }) - - const CITypeId = this.CITypeId - - updateCITypeAttributesById(CITypeId, { attributes: requestData }).then( - res => { - this.$message.success(`更新成功`) - this.visible = false - this.handleOk() - } - ).catch(err => { - this.requestFailed(err) - }) - } - }, - - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - - }, - 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; - } - .ant-transfer { - margin-bottom: 1rem; - } - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style> diff --git a/ui/src/views/ci_type/defaultShowTable.vue b/ui/src/views/ci_type/defaultShowTable.vue deleted file mode 100644 index ac24abf..0000000 --- a/ui/src/views/ci_type/defaultShowTable.vue +++ /dev/null @@ -1,355 +0,0 @@ -<template> - <div> - <a-button class="action-btn" @click="handleCreate" type="primary">批量修改</a-button> - <s-table - :alert="options.alert" - :columns="columns" - :data="loadData" - :pagination="pagination" - :rowKey="record=>record.id" - :rowSelection="options.rowSelection" - :showPagination="showPagination" - ref="table" - size="middle" - :scroll="scroll" - - > - <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="handleDelete(record)">删除</a> - </template> - </span> - - </s-table> - <a-drawer - :closable="false" - :title="drawerTitle" - :visible="visible" - @close="onClose" - placement="right" - width="30%" - > - <a-form :form="form" :layout="formLayout" @submit="handleSubmit"> - - <a-transfer - :dataSource="transferData" - :render="item=>item.title" - :selectedKeys="transferSelectedKeys" - :targetKeys="transferTargetKeys" - :titles="['当前项', '已选项']" - :listStyle="{ - height: '600px', - width: '42%' - - }" - showSearch - @change="handleTransferChange" - @scroll="handleTransferScroll" - @selectChange="handleTransferSelectChange" - /> - - <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> - - </div> - -</template> - -<script> - -import { STable } from '@/components' -import { getCITypeAttributesByName, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr' - -export default { - name: 'DefaultShowTable', - components: { - STable - }, - data () { - return { - - CITypeId: this.$route.params.CITypeId, - CITypeName: this.$route.params.CITypeName, - - form: this.$form.createForm(this), - scroll: { x: 1000, y: 600 }, - - visible: false, - - drawerTitle: '', - - formLayout: 'vertical', - - transferData: [], - transferTargetKeys: [], - transferSelectedKeys: [], - originTargetKeys: [], - - attributes: [], - - pagination: { - defaultPageSize: 20 - }, - showPagination: false, - columns: [ - { - title: '属性名', - dataIndex: 'alias', - sorter: false, - width: 200, - scopedSlots: { customRender: 'alias' } - }, - { - title: '属性英文名', - dataIndex: 'name', - sorter: false, - width: 200, - scopedSlots: { customRender: 'name' } - }, - { - title: '默认显示', - dataIndex: 'default_show', - sorter: false, - scopedSlots: { customRender: 'is_check' } - - }, - { - title: '操作', - dataIndex: 'action', - width: 100, - fixed: 'right', - scopedSlots: { customRender: 'action' } - } - ], - loadData: parameter => { - console.log('loadData.parameter', parameter) - return getCITypeAttributesByName(this.CITypeName) - .then(res => { - this.attributes = res.attributes - this.setTransferData() - - return { - data: this.attributes.filter(o => o.default_show) - } - }) - }, - - mdl: {}, - // 高级搜索 展开/关闭 - advanced: false, - // 查询参数 - queryParam: {}, - // 表头 - - selectedRowKeys: [], - selectedRows: [], - - // custom table alert & rowSelection - options: { - alert: false, - rowSelection: null - }, - optionAlertShow: false - - } - }, - beforeCreate () { - }, - computed: { - - removeTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v)) - }, - - addTransferKeys () { - const { originTargetKeys, transferTargetKeys } = this - return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v)) - }, - - formItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } : {} - }, - - horizontalFormItemLayout () { - return { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } - }, - buttonItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - wrapperCol: { span: 14, offset: 4 } - } : {} - } - }, - mounted () { - - }, - methods: { - - setTransferData () { - const data = [] - const target = [] - this.attributes.forEach( - function (i) { - data.push({ - key: i.id.toString(), - title: i.alias, - description: '' - }) - if (i.default_show) { - target.push(i.id.toString()) - } - } - ) - this.transferData = data - this.transferTargetKeys = target - this.originTargetKeys = target - }, - setScrollY () { - this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250 - }, - - handleTransferChange (nextTargetKeys, direction, moveKeys) { - this.transferTargetKeys = nextTargetKeys - - console.log('targetKeys: ', nextTargetKeys) - console.log('direction: ', direction) - console.log('moveKeys: ', moveKeys) - console.log('addTransferKeys: ', this.addTransferKeys) - console.log('removeTransferKeys: ', this.removeTransferKeys) - }, - - handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) { - this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys] - console.log('sourceSelectedKeys: ', sourceSelectedKeys) - console.log('targetSelectedKeys: ', targetSelectedKeys) - }, - handleTransferScroll (direction, e) { - console.log('direction:', direction) - console.log('target:', e.target) - }, - - handleDelete (record) { - console.log(record) - - updateCITypeAttributesById(this.CITypeId, { attributes: [{ attr_id: record.id, default_show: false }] }) - .then(res => { - this.$message.success(`删除成功`) - this.handleOk() - }) - .catch(err => this.requestFailed(err)) - }, - handleOk () { - this.$refs.table.refresh() - }, - onSelectChange (selectedRowKeys, selectedRows) { - this.selectedRowKeys = selectedRowKeys - this.selectedRows = selectedRows - }, - - handleCreate () { - this.drawerTitle = '批量修改' - this.visible = true - }, - - onClose () { - this.form.resetFields() - this.visible = false - }, - - onChange (e) { - console.log(`checked = ${e.target.checked}`) - }, - - handleSubmit (e) { - e.preventDefault() - if (this.addTransferKeys || this.removeTransferKeys) { - const requestData = [] - this.addTransferKeys.forEach(function (k) { - const data = { 'attr_id': k, 'default_show': true } - requestData.push(data) - }) - - this.removeTransferKeys.forEach(function (k) { - const data = { 'attr_id': k, 'default_show': false } - requestData.push(data) - }) - - const CITypeId = this.CITypeId - - updateCITypeAttributesById(CITypeId, { attributes: requestData }).then( - res => { - this.$message.success(`更新成功`) - this.visible = false - this.handleOk() - } - ).catch(err => { - this.requestFailed(err) - }) - } - }, - - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - - }, - 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; - } - .ant-transfer { - margin-bottom: 1rem; - } - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style> diff --git a/ui/src/views/ci_type/detail.vue b/ui/src/views/ci_type/detail.vue deleted file mode 100644 index 6ba6f21..0000000 --- a/ui/src/views/ci_type/detail.vue +++ /dev/null @@ -1,89 +0,0 @@ -<template> - <a-card :bordered="false"> - - <a-tabs defaultActiveKey="1"> - <a-tab-pane key="1" tab="模型属性"> - - <AttributesTable></AttributesTable> - - </a-tab-pane> - <a-tab-pane forceRender key="2" tab="模型关联"> - <RelationTable :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable> - - </a-tab-pane> - - <a-tab-pane forceRender key="3" tab="必须校验"> - <CheckTable></CheckTable> - - </a-tab-pane> - - <a-tab-pane forceRender key="4" tab="默认显示属性"> - <DefaultShowTable></DefaultShowTable> - - </a-tab-pane> - - <a-tab-pane forceRender key="5" tab="属性分组 & 排序"> - <Group></Group> - - </a-tab-pane> - </a-tabs> - - </a-card> -</template> - -<script> -import { STable } from '@/components' -import AttributesTable from './attributesTable' -import RelationTable from './relationTable' -import CheckTable from './checkTable' -import DefaultShowTable from './defaultShowTable' -import Group from './group' - -export default { - name: 'CITypeDetail', - components: { - STable, - AttributesTable, - RelationTable, - CheckTable, - DefaultShowTable, - Group - }, - data () { - return { - CITypeId: this.$route.params.CITypeId, - CITypeName: this.$route.params.CITypeName - } - }, - beforeCreate () { - }, - mounted () { - - }, - methods: { - }, - watch: {} - -} -</script> - -<style lang="less" scoped> - .search { - margin-bottom: 54px; - } - - .fold { - width: calc(100% - 216px); - display: inline-block - } - - .operator { - margin-bottom: 18px; - } - - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style> diff --git a/ui/src/views/ci_type/group.vue b/ui/src/views/ci_type/group.vue deleted file mode 100644 index 24bf748..0000000 --- a/ui/src/views/ci_type/group.vue +++ /dev/null @@ -1,591 +0,0 @@ -<template> - <div> - <div style="margin-bottom: 2rem"> - <a-button type="primary" v-if="addGroupBtnVisible" @click="handleAddGroup">添加分组</a-button> - - <template v-else> - <span> - <a-input - size="small" - type="text" - style="width: 10rem;margin-right: 0.5rem" - ref="addGroupInput" - v-model.trim="newGroupName" /> - <a @click="handleCreateGroup" style="margin-right: 0.5rem">保存</a> - <a @click="handleCancelCreateGroup">取消</a> - </span> - </template> - - </div> - - <div :key="index" v-for="(CITypeGroup, index) in CITypeGroups"> - <div class="group-header"> - - <template style="margin-bottom: 2rem;" v-if="!CITypeGroup.editable"> - - <span style="margin-right: 0.2rem">{{ CITypeGroup.name }}</span> - <span style="color: #c3cdd7; margin-right: 0.5rem">({{ CITypeGroup.attributes.length }})</span> - - <a-button type="link" size="small" @click="handleEditGroupName(index, CITypeGroup)"><a-icon type="edit" /></a-button> - </template> - <template v-else> - <span style="font-size: 1rem"> - <a-input - size="small" - type="text" - style="width: 15%;margin-right: 0.5rem" - ref="editGroupInput" - v-model.trim="CITypeGroup.name" /> - <a @click="handleSaveGroupName(index, CITypeGroup)" style="margin-right: 0.5rem">保存</a> - <a @click="handleCancelGroupName(index, CITypeGroup)">取消</a> - </span> - </template> - - <div style="float: right"> - - <a-button-group size="small"> - <a-tooltip> - <template slot="title"> - 上移 - </template> - <a-button icon="arrow-up" size="small" @click="handleMoveGroup(index, index-1)" :disabled="index===0"/> - </a-tooltip> - - <a-tooltip> - <template slot="title"> - 下移 - </template> - <a-button icon="arrow-down" size="small" @click="handleMoveGroup(index, index+1)" :disabled="index===CITypeGroups.length-1" /> - </a-tooltip> - - <a-tooltip> - <template slot="title"> - 添加属性 - </template> - <a-button icon="plus" size="small" @click="handleAddExistGroupAttr(index)"/> - </a-tooltip> - <a-tooltip> - <template slot="title"> - 删除分组 - </template> - <a-button icon="delete" size="small" @click="handleDeleteGroup(CITypeGroup.id)" :disabled="CITypeGroup.attributes.length!==0" /> - - </a-tooltip> - - </a-button-group> - </div> - - </div> - - <div - class="box" - style="min-height: 2rem; margin-bottom: 1.5rem;" - > - - <draggable - v-model="CITypeGroup.attributes" - group="properties" - @start="drag=true" - @end="handleEnd" - @change="handleChange" - :filter="'.filter-empty'" - :animation="100" - tag="div" - style="width: 100%; display: flex;flex-flow: wrap" - > - - <li - class="property-item" - v-for="item in CITypeGroup.attributes" - :key="item.id" - > - {{ item.alias }} - </li> - - <template - v-if="!CITypeGroup.attributes.length" - style="height: 2rem" - > - <li - class="property-item-empty" - @click="handleAddExistGroupAttr(index)" - style="">添加属性</li> - - </template> - - </draggable> - - </div> - - </div> - <div class="group-header"> - - <template> - - <span style="margin-right: 0.2rem">更多属性</span> - <span style="color: #c3cdd7; margin-right: 0.5rem">({{ otherGroupAttributes.length }})</span> - </template> - <div style="float: right"> - <a-button-group size="small"> - <a-tooltip> - <template slot="title"> - 上移 - </template> - <a-button icon="arrow-up" size="small" disabled/> - </a-tooltip> - - <a-tooltip> - <template slot="title"> - 下移 - </template> - <a-button icon="arrow-down" size="small" disabled /> - </a-tooltip> - - <a-tooltip> - <template slot="title"> - 添加属性 - </template> - <a-button icon="plus" size="small" @click="handleAddOtherGroupAttr"/> - </a-tooltip> - <a-tooltip> - <template slot="title"> - 删除分组 - </template> - <a-button icon="delete" size="small" disabled /> - - </a-tooltip> - - </a-button-group> - </div> - </div> - - <div class="box"> - <draggable - v-model="otherGroupAttributes" - group="properties" - @start="drag=true" - @end="handleEnd" - @change="handleChange" - :animation="0" - style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap"> - - <li - class="property-item" - v-for="item in otherGroupAttributes" - :key="item.id" - > - {{ item.alias }} - </li> - - <template - v-if="!otherGroupAttributes.length" - style="display: block" - > - <li - class="property-item-empty" - @click="handleAddOtherGroupAttr" - style="">添加属性</li> - - </template> - - </draggable> - </div> - <a-modal - title="添加字段" - :width="'80%'" - v-model="modalVisible" - @ok="handleSubmit" - @cancel="modalVisible = false" - - > - <a-form :form="form" @submit="handleSubmit"> - - <a-form-item - > - <a-checkbox-group - v-decorator="['checkedAttributes']" - style="width: 90%" - > - - <a-row :gutter="{ xs: 8, sm: 16, md: 24}" type="flex" justify="start"> - <a-col - v-for="attribute in attributes" - :key="attribute.id" - :sm="8" - :md="6" - :lg="4" - :xxl="3" - style="line-height: 1.8rem" - > - <a-checkbox - :value="attribute.id"> - {{ attribute.alias }} - </a-checkbox> - - </a-col> - - </a-row> - </a-checkbox-group> - </a-form-item> - - <a-form-item> - <a-input - name="groupId" - type="hidden" - v-decorator="['groupId']" - /> - </a-form-item> - - <a-form-item> - <a-input - name="groupIndex" - type="hidden" - v-decorator="['groupIndex']" - /> - </a-form-item> - </a-form> - </a-modal> - - </div > - -</template> - -<script> - -import { - deleteCITypeGroupById, - getCITypeGroupById, - createCITypeGroupById, - updateCITypeGroupById -} from '@/api/cmdb/CIType' -import { getCITypeAttributesById, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr' -import draggable from 'vuedraggable' - -export default { - name: 'Group', - components: { - draggable - }, - data () { - return { - form: this.$form.createForm(this), - CITypeId: this.$route.params.CITypeId, - CITypeName: this.$route.params.CITypeName, - CITypeGroups: [], - attributes: [], - otherGroupAttributes: [], - addGroupBtnVisible: true, - newGroupName: '', - modalVisible: false - - } - }, - beforeCreate () { - }, - created () { - - }, - computed: { - - }, - mounted () { - this.getCITypeGroupData() - }, - methods: { - setOtherGroupAttributes () { - const orderMap = this.attributes.reduce(function (map, obj) { - map[obj.id] = obj.order - return map - }, {}) - - const inGroupAttrKeys = this.CITypeGroups - .filter(x => x.attributes && x.attributes.length > 0) - .map(x => x.attributes).flat().map(x => x.id) - - this.CITypeGroups.forEach(group => { - group.attributes.forEach(attribute => { - attribute.order = orderMap[attribute.id] - attribute.originOrder = attribute.order - attribute.originGroupName = group.name - }) - group.originCount = group.attributes.length - group.editable = false - group.originOrder = group.order - group.originName = group.name - group.attributes = group.attributes.sort((a, b) => a.order - b.order) - }) - - this.otherGroupAttributes = this.attributes.filter(x => !inGroupAttrKeys.includes(x.id)).sort((a, b) => a.order - b.order) - this.attributes = this.attributes.sort((a, b) => a.order - b.order) - this.CITypeGroups = this.CITypeGroups.sort((a, b) => a.order - b.order) - this.otherGroupAttributes.forEach(attribute => { - attribute.originOrder = attribute.order - }) - - console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes) - }, - getCITypeGroupData () { - const promises = [ - getCITypeAttributesById(this.CITypeId), - getCITypeGroupById(this.CITypeId) - ] - Promise.all(promises) - .then(values => { - this.attributes = values[0].attributes - this.CITypeGroups = values[1] - this.setOtherGroupAttributes() - }) - }, - - handleEditGroupName (index, CITypeGroup) { - CITypeGroup.editable = true - this.$set(this.CITypeGroups, index, CITypeGroup) - }, - handleSaveGroupName (index, CITypeGroup) { - if (CITypeGroup.name === CITypeGroup.originName) { - this.handleCancelGroupName(index, CITypeGroup) - } else if (this.CITypeGroups.map(x => x.originName).includes(CITypeGroup.name)) { - this.$message.error('分组名称已存在') - } else { - updateCITypeGroupById(CITypeGroup.id, { name: CITypeGroup.name, attributes: CITypeGroup.attributes.map(x => x.id), order: CITypeGroup.order }) - .then(res => { - CITypeGroup.editable = false - this.$set(this.CITypeGroups, index, CITypeGroup) - this.$message.success('修改成功') - }) - .catch(err => this.requestFailed(err)) - } - }, - handleCancelGroupName (index, CITypeGroup) { - CITypeGroup.editable = false - this.$set(this.CITypeGroups, index, CITypeGroup) - }, - - handleCancel (CITypeGroup) { - CITypeGroup.editable = false - }, - handleAddGroup () { - this.addGroupBtnVisible = false - }, - handleCreateGroup () { - const groupOrders = this.CITypeGroups.map(x => x.order) - - const maxGroupOrder = Math.max(groupOrders.length, groupOrders.length ? Math.max(...groupOrders) : 0) - - console.log('groupOrder', groupOrders, 'maxOrder', maxGroupOrder) - createCITypeGroupById(this.CITypeId, { name: this.newGroupName, order: maxGroupOrder + 1 }) - .then(res => { - this.addGroupBtnVisible = true - this.newGroupName = '' - this.getCITypeGroupData() - }) - .catch(err => this.requestFailed(err)) - }, - handleCancelCreateGroup () { - this.addGroupBtnVisible = true - this.newGroupName = '' - }, - - handleMoveGroup (beforeIndex, afterIndex) { - const beforeGroup = this.CITypeGroups[beforeIndex] - this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex] - - this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex]) - this.$set(this.CITypeGroups, afterIndex, beforeGroup) - - this.updatePropertyIndex() - }, - handleAddExistGroupAttr (index) { - const group = this.CITypeGroups[index] - this.modalVisible = true - this.$nextTick(() => { - this.form.setFieldsValue({ - checkedAttributes: group.attributes.map(x => x.id), - groupId: group.id, - groupIndex: index - - }) - }) - }, - - handleAddOtherGroupAttr () { - this.modalVisible = true - this.$nextTick(() => { - this.form.setFieldsValue({ - checkedAttributes: this.otherGroupAttributes.map(x => x.id), - groupId: null - - }) - }) - }, - - handleSubmit (e) { - e.preventDefault() - this.form.validateFields((err, values) => { - if (!err) { - // eslint-disable-next-line no-console - console.log('Received values of form: ', values) - - this.CITypeGroups.forEach(group => { - if (group.id === values.groupId) { - group.attributes = this.attributes.filter(x => values.checkedAttributes.includes(x.id)) - } else { - group.attributes = group.attributes.filter(x => !values.checkedAttributes.includes(x.id)) - } - }) - // this.CITypeGroups = this.CITypeGroups - - this.otherGroupAttributes.forEach(attributes => { - if (values.groupId === null) { - this.otherGroupAttributes = this.otherGroupAttributes.filter(x => values.checkedAttributes.includes(x.id)) - } else { - this.otherGroupAttributes = this.otherGroupAttributes.filter(x => !values.checkedAttributes.includes(x.id)) - } - }) - - console.log('add group attribute', this.otherGroupAttributes, this.CITypeGroups) - this.updatePropertyIndex() - } - }) - }, - - handleDeleteGroup (groupId) { - deleteCITypeGroupById(groupId) - .then(res => { - this.updatePropertyIndex() - }) - .catch(err => this.requestFailed(err)) - }, - handleChange (e) { - console.log(e) - if (e.hasOwnProperty('moved')) { - this.shouldUpdatePropertyIndex = e.moved.newIndex !== e.moved.oldIndex - } else { - this.shouldUpdatePropertyIndex = true - } - }, - handleEnd (e) { - if (this.shouldUpdatePropertyIndex) { - this.updatePropertyIndex() - this.shouldUpdatePropertyIndex = false - } - }, - updatePropertyIndex () { - const attributes = [] - let attributeOrder = 0 - let groupOrder = 0 - const promises = [ - - ] - - this.CITypeGroups.forEach(group => { - const groupName = group.name - - let groupAttributes = [] - let groupUpdate = false - group.order = groupOrder - - group.attributes.forEach(attribute => { - groupAttributes.push(attribute.id) - - if (attribute.originGroupName !== group.name || attribute.originOrder !== attributeOrder) { - attributes.push({ attr_id: attribute.id, order: attributeOrder }) - groupUpdate = true - } - attributeOrder++ - }) - - groupAttributes = new Set(groupAttributes) - if (group.originCount !== groupAttributes.size || groupUpdate || group.originOrder !== group.order) { - promises.push(updateCITypeGroupById(group.id, { name: groupName, attributes: [...groupAttributes], order: groupOrder })) - } - groupOrder++ - }) - - this.otherGroupAttributes.forEach(attribute => { - if (attribute.originOrder !== attributeOrder) { - console.log('this attribute:', attribute.name, 'old order', attribute.originOrder, 'new order', attributeOrder) - attributes.push({ attr_id: attribute.id, order: attributeOrder }) - } - - attributeOrder++ - }) - - if (attributes && attributes.length > 0) { - promises.unshift(updateCITypeAttributesById(this.CITypeId, { attributes: attributes })) - } - - const that = this - Promise.all(promises) - .then(values => { - that.$message.success(`修改成功`) - that.getCITypeGroupData() - that.modalVisible = false - }) - .catch(err => that.requestFailed(err)) - }, - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - }, - watch: {} - -} -</script> - -<style lang="less" scoped> - .search { - margin-bottom: 54px; - } - - .fold { - width: calc(100% - 216px); - display: inline-block - } - - .operator { - margin-bottom: 18px; - } - - .group-header { - font-size: 1.15rem; - } - - .property-item { - width: calc(20% - 2rem); - margin:0.5rem 0.8rem; - border:1px solid #d9d9d9; - border-radius: 5px; - cursor: pointer;overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: center; - height: 2.5rem; - line-height: 2.5rem; - } - - .property-item:hover{ - border:1px dashed #40a9ff; - } - - .property-item-empty { - width: calc(100% - 10px); - margin:0.5rem 0.8rem; - border:1px dashed #d9d9d9; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: center; - height: 3.5rem; - line-height: 3.5rem; - color: #40a9ff; - } - - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style> diff --git a/ui/src/views/ci_type/list.vue b/ui/src/views/ci_type/list.vue deleted file mode 100644 index 5e6b225..0000000 --- a/ui/src/views/ci_type/list.vue +++ /dev/null @@ -1,291 +0,0 @@ -<template> - <a-card :bordered="false"> - - <a-list - :dataSource="CITypes" - :grid="{ gutter: 20, column: 4 }" - class="ci-type-list" - itemLayout="horizontal" - size="small" - > - <a-list-item slot="renderItem" slot-scope="item"> - - <template v-if="item === null"> - <a-button class="new-btn" type="dashed" @click="handleCreate"> - <a-icon type="plus"/> - 新增 - </a-button> - </template> - <template v-else> - <a-card - :bodyStyle="{padding: '0.9rem 0.8rem'}" - :hoverable="true" - > - <template class="ant-card-actions" slot="actions"> - <router-link - :to="{ name: 'ci_type_detail', params: { CITypeName: item.name, CITypeId: item.id }}" - > - <a-icon type="setting" /> - </router-link> - <a-icon type="edit" @click="handleEdit(item)"/> - </template> - <a-card-meta> - <div slot="title" style="margin-bottom: 3px">{{ item.alias || item.name }}</div> - <a-avatar - :src="item.icon_url" - class="card-avatar" - size="large" - slot="avatar" - style="color: #7f9eb2; backgroundColor: #e1eef6; padding-left: -1rem;" - > - {{ item.name[0].toUpperCase() }} - </a-avatar> - <div class="meta-content" slot="description">{{ item.name }}</div> - </a-card-meta> - - </a-card> - </template> - - </a-list-item> - - </a-list> - - <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: '请输入属性名'},{message: '不能以数字开头,可以是英文 数字以及下划线 (_)', pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$')}]} ]" - /> - </a-form-item> - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="别名" - > - <a-input - name="alias" - v-decorator="['alias', {rules: []} ]" - /> - </a-form-item> - - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="唯一标识*" - > - - <a-select - name="unique_key" - style="width: 200px" - v-decorator="['unique_key', {rules: [{required: true}], } ]" - > - <a-select-option :key="item.id" :value="item.id" v-for="item in allAttributes">{{ item.alias || item.name }}</a-select-option> - </a-select> - - </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> - - </a-card> -</template> - -<script> - -import { getCITypes, createCIType, updateCIType } from '@/api/cmdb/CIType' -import { searchAttributes } from '@/api/cmdb/CITypeAttr' - -export default { - name: 'CITypeList', - components: {}, - data () { - return { - CITypes: [], - allAttributes: [], - form: this.$form.createForm(this), - - drawerVisible: false, - - drawerTitle: '', - - formLayout: 'vertical' - } - }, - computed: { - - formItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } : {} - }, - - horizontalFormItemLayout () { - return { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } - }, - buttonItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - wrapperCol: { span: 14, offset: 4 } - } : {} - } - }, - mounted () { - this.getCITypes() - this.getAttributes() - }, - methods: { - getCITypes () { - getCITypes().then(res => { - this.CITypes = res.ci_types - this.CITypes.unshift(null) - }) - }, - - getAttributes () { - searchAttributes().then(res => { - this.allAttributes = res.attributes - }) - }, - handleCreate () { - this.drawerTitle = '新增模型' - this.drawerVisible = true - }, - onClose () { - this.form.resetFields() - this.drawerVisible = false - }, - handleEdit (record) { - this.drawerTitle = '编辑模型' - this.drawerVisible = true - - console.log(record) - this.$nextTick(() => { - this.form.setFieldsValue({ - id: record.id, - alias: record.alias, - name: record.name, - unique_key: record.unique_id - - }) - }) - }, - - handleSubmit (e) { - e.preventDefault() - this.form.validateFields((err, values) => { - if (!err) { - // eslint-disable-next-line no-console - console.log('Received values of form: ', values) - - if (values.id) { - this.updateCIType(values.id, values) - } else { - this.createCIType(values) - } - } - }) - }, - createCIType (data) { - createCIType(data) - .then(res => { - this.$message.success(`添加成功`) - this.drawerVisible = false - this.getCITypes() - }) - .catch(err => this.requestFailed(err)) - }, - - updateCIType (CITypeId, data) { - updateCIType(CITypeId, data) - .then(res => { - this.$message.success(`修改成功`) - this.drawerVisible = false - this.getCITypes() - }) - .catch(err => this.requestFailed(err)) - }, - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - - }, - props: {}, - 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; - } - - .new-btn { - background-color: #fff; - border-radius: 2px; - width: 100%; - height: 7.5rem; - } - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style> diff --git a/ui/src/views/ci_type/relationTable.vue b/ui/src/views/ci_type/relationTable.vue deleted file mode 100644 index da5835a..0000000 --- a/ui/src/views/ci_type/relationTable.vue +++ /dev/null @@ -1,337 +0,0 @@ -<template> - <div> - <a-button class="action-btn" @click="handleCreate" type="primary">新增关系</a-button> - <s-table - :alert="options.alert" - :columns="columns" - :data="loadData" - :pagination="pagination" - :rowKey="record=>record.id" - :rowSelection="options.rowSelection" - :showPagination="showPagination" - ref="table" - size="middle" - :scroll="scroll" - > - - <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="handleDelete(record)">删除</a> - </template> - </span> - - </s-table> - <a-drawer - :closable="false" - :title="drawerTitle" - :visible="visible" - @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-select - name="source_ci_type_id" - style="width: 120px" - v-decorator="['source_ci_type_id', {rules: [], } ]" - > - <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in CITypes" v-if="CITypeId === CIType.id">{{ CIType.alias }}</a-select-option> - </a-select> - - </a-form-item> - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="目标模型" - > - <a-select - name="ci_type_id" - style="width: 120px" - v-decorator="['ci_type_id', {rules: [], } ]" - > - <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in CITypes">{{ CIType.alias }}</a-select-option> - </a-select> - </a-form-item> - - <a-form-item - :label-col="formItemLayout.labelCol" - :wrapper-col="formItemLayout.wrapperCol" - label="关联关系" - > - <a-select - name="relation_type_id" - style="width: 120px" - v-decorator="['relation_type_id', {rules: [], } ]" - > - <a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{ relationType.name }} - </a-select-option> - </a-select> - - </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> - - </div> - -</template> - -<script> -import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/api/cmdb/CITypeRelation' -import { getCITypes } from '@/api/cmdb/CIType' - -import { STable } from '@/components' -import PageView from '@/layouts/PageView' - -export default { - name: 'RelationTable', - components: { - PageView, - STable - }, - data () { - return { - CITypeId: parseInt(this.$route.params.CITypeId), - CITypeName: this.$route.params.CITypeName, - form: this.$form.createForm(this), - scroll: { x: 1300, y: 600 }, - - visible: false, - - drawerTitle: '', - - formLayout: 'vertical', - - CITypes: [], - relationTypes: [], - - pagination: { - defaultPageSize: 20 - }, - showPagination: false, - columns: [ - { - title: '源模型英文名', - dataIndex: 'source_ci_type_name', - sorter: false, - width: 200, - scopedSlots: { customRender: 'source_ci_type_name' } - }, - { - title: '关联类型', - dataIndex: 'relation_type', - sorter: false, - width: 100, - scopedSlots: { customRender: 'name' } - }, - { - title: '目标模型名', - dataIndex: 'alias', - sorter: false, - scopedSlots: { customRender: 'alias' } - }, - { - title: '操作', - dataIndex: 'action', - width: 100, - fixed: 'right', - scopedSlots: { customRender: 'action' } - } - ], - loadData: parameter => { - console.log('loadData.parameter', parameter) - const CITypeId = this.CITypeId - const CITypeName = this.CITypeName - - console.log('this CITypeId ', CITypeId, 'type', typeof CITypeName, 'CITypeName', CITypeName) - - return getCITypeChildren(this.CITypeId) - .then(res => { - let data = res.children - - data = data.map(function (obj, index) { - obj.source_ci_type_name = CITypeName - obj.source_ci_type_id = CITypeId - return obj - }) - - return { - data: data - } - }) - }, - - mdl: {}, - // 高级搜索 展开/关闭 - advanced: false, - // 查询参数 - queryParam: {}, - // custom table alert & rowSelection - options: { - alert: false, - rowSelection: null - }, - optionAlertShow: false - - } - }, - beforeCreate () { - }, - computed: { - formItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } : {} - }, - - horizontalFormItemLayout () { - return { - labelCol: { span: 4 }, - wrapperCol: { span: 14 } - } - }, - buttonItemLayout () { - const { formLayout } = this - return formLayout === 'horizontal' ? { - wrapperCol: { span: 14, offset: 4 } - } : {} - } - }, - mounted () { - this.getCITypes() - this.getRelationTypes() - }, - methods: { - setScrollY () { - this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250 - }, - - getCITypes () { - getCITypes().then(res => { - this.CITypes = res.ci_types - }) - }, - getRelationTypes () { - getRelationTypes().then(res => { - this.relationTypes = res - }) - }, - - callback (key) { - console.log(key) - }, - handleDelete (record) { - console.log(record) - - deleteRelation(record.source_ci_type_id, record.id) - .then(res => { - this.$message.success(`删除成功`) - - this.handleOk() - }).catch(err => this.requestFailed(err)) - }, - handleOk () { - this.$refs.table.refresh() - }, - - handleCreate () { - this.drawerTitle = '新增关系' - this.visible = true - this.$nextTick(() => { - this.form.setFieldsValue({ - source_ci_type_id: this.CITypeId - - }) - }) - }, - - onClose () { - this.form.resetFields() - this.visible = false - }, - - onChange (e) { - console.log(`checked = ${e.target.checked}`) - }, - - handleSubmit (e) { - e.preventDefault() - this.form.validateFields((err, values) => { - if (!err) { - // eslint-disable-next-line no-console - console.log('Received values of form: ', values) - - createRelation(values.source_ci_type_id, values.ci_type_id, values.relation_type_id) - .then(res => { - this.$message.success(`添加成功`) - this.onClose() - this.handleOk() - }).catch(err => this.requestFailed(err)) - } - }) - }, - - requestFailed (err) { - const msg = ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试' - this.$message.error(`${msg}`) - } - - }, - - 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; - } - - @media screen and (max-width: 900px) { - .fold { - width: 100%; - } - } -</style>