Merge pull request #124 from veops/dev_ui

前端更新

cmdb-ui/src/modules/acl/views/resources.vue

@@ -36,7 +36,7 @@
                 $refs.resourceBatchPerm.open(currentType.id)
               }
             "
-          >便捷授权</a-button
+            >便捷授权</a-button
           >
           <a-switch
             v-model="isGroup"
@@ -46,8 +46,8 @@
                 tablePage.currentPage = 1
                 searchData()
                 selectedRows = []
-                $refs.xTable && $refs.xTable.clearCheckboxRow()
+                $refs.xTable && $refs.xTable.getVxetableRef().clearCheckboxRow()
-                $refs.xTable && $refs.xTable.clearCheckboxReserve()
+                $refs.xTable && $refs.xTable.getVxetableRef().clearCheckboxReserve()
               }
             "
             un-checked-children="组"
@@ -75,7 +75,7 @@
           <!-- 2 -->
 
           <vxe-table-column field="name" title="资源名" :min-widh="150" fixed="left" show-overflow>
-            <template #title="{row}">
+            <template #title="{ row }">
               {{ row.isGroup ? '资源组名' : '资源名' }}
             </template>
           </vxe-table-column>
@@ -91,14 +91,8 @@
 
           <!-- 6 -->
 
-          <vxe-table-column
+          <vxe-table-column field="action" title="操作" :min-widh="200" fixed="right" align="center" show-overflow>
-            field="action"
+            <template #default="{ row }">
-            title="操作"
-            :min-widh="200"
-            fixed="right"
-            align="center"
-            show-overflow>
-            <template #default="{row}">
               <span v-show="row.isGroup">
                 <a @click="handleDisplayMember(row)">成员</a>
                 <a-divider type="vertical" />
@@ -106,7 +100,7 @@
                 <a-divider type="vertical" />
               </span>
               <a-tooltip title="查看授权">
-                <a @click="handlePerm(row)"><a-icon type="eye"/></a>
+                <a @click="handlePerm(row)"><a-icon type="eye" /></a>
               </a-tooltip>
               <a-divider type="vertical" />
               <a-tooltip title="授权">
@@ -116,7 +110,7 @@
               </a-tooltip>
               <a-divider type="vertical" />
               <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
-                <a style="color: red"><a-icon type="delete"/></a>
+                <a style="color: red"><a-icon type="delete" /></a>
               </a-popconfirm>
             </template>
           </vxe-table-column>
@@ -134,8 +128,8 @@
         </vxe-pager>
       </a-spin>
     </div>
-    <div v-else style="text-align: center;margin-top:20%">
+    <div v-else style="text-align: center; margin-top: 20%">
-      <a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
+      <a-icon style="font-size: 50px; margin-bottom: 20px; color: orange" type="info-circle" />
       <h3>暂无类型信息，请先添加资源类型！</h3>
     </div>
     <resourceForm ref="resourceForm" @fresh="handleOk"> </resourceForm>
@@ -300,11 +294,12 @@ export default {
       this.searchName = ''
       this.selectedRows = []
       this.tablePage.currentPage = 1
-      this.$refs.xTable && this.$refs.xTable.clearCheckboxRow()
+      this.$refs.xTable && this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable && this.$refs.xTable.clearCheckboxReserve()
+      this.$refs.xTable && this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
       if (rtypeId) {
         this.currentType = this.allResourceTypes.find((item) => item.id === rtypeId)
       }
+      p
       this.searchData()
     },
     handlePerm(record) {
@@ -347,7 +342,10 @@ export default {
     },
     changeCheckbox({ records }) {
       // console.log(records)
-      this.selectedRows = this.$refs.xTable.getCheckboxRecords().concat(this.$refs.xTable.getCheckboxReserveRecords())
+      this.selectedRows = this.$refs.xTable
+        .getVxetableRef()
+        .getCheckboxRecords()
+        .concat(this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords())
     },
     handleBatchPerm() {
       this.$refs['resourcePermManageForm'].editPerm(this.selectedRows, this.isGroup)
@@ -356,12 +354,12 @@ export default {
       this.$refs['resourcePermManageForm'].editPerm(this.selectedRows, this.isGroup, 'revoke')
     },
     closePerm() {
-      this.$refs.xTable.clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
       this.selectedRows = []
     },
   },
   watch: {
-    '$route.name': function(newName, oldName) {
+    '$route.name': function (newName, oldName) {
       this.isGroup = false
       this.tablePage = {
         total: 0,

cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue

@@ -11,7 +11,7 @@
     wrapClassName="attribute-edit-form"
   >
     <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
-      <a-divider style="font-size: 14px; margin-top: 6px">基础设置</a-divider>
+      <a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider>
       <a-col :span="12">
         <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="属性名(英文)">
           <a-input
@@ -72,7 +72,9 @@
               v-else-if="currentValueType === '0'"
               @select="selectIntDefaultValue"
             >
-              <a-select-option key="$auto_inc_id"> 自增ID </a-select-option>
+              <a-select-option key="$auto_inc_id">
+                自增ID
+              </a-select-option>
             </a-select>
             <a-input-number
               style="width: 100%"
@@ -92,9 +94,15 @@
               v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
               @select="changeDefaultForDatetime"
             >
-              <a-select-option key="$created_at"> 创建时间 </a-select-option>
+              <a-select-option key="$created_at">
-              <a-select-option key="$updated_at"> 更新时间 </a-select-option>
+                创建时间
-              <a-select-option key="$custom_time"> 自定义时间 </a-select-option>
+              </a-select-option>
+              <a-select-option key="$updated_at">
+                更新时间
+              </a-select-option>
+              <a-select-option key="$custom_time">
+                自定义时间
+              </a-select-option>
             </a-select>
             <template v-else-if="currentValueType === '4' || currentValueType === '3'">
               <a-date-picker
@@ -168,7 +176,7 @@
             >{{ `索引` }}
               <a-tooltip title="字段可被用于检索，加速查询">
                 <a-icon
-                  style="position: absolute; top: 3px; left: -17px; color: #2f54eb"
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
                   type="question-circle"
                   theme="filled"
                   @click="
@@ -200,7 +208,7 @@
             >{{ `显示` }}
               <a-tooltip title="CI实例表格默认展示该字段">
                 <a-icon
-                  style="position: absolute; top: 3px; left: -17px; color: #2f54eb"
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
                   type="question-circle"
                   theme="filled"
                   @click="
@@ -246,7 +254,7 @@
             >{{ `多值` }}
               <a-tooltip title="字段的值是1个或者多个，接口返回的值的类型是list">
                 <a-icon
-                  style="position: absolute; top: 3px; left: -17px; color: #2f54eb"
+                  style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
                   type="question-circle"
                   theme="filled"
                   @click="
@@ -292,7 +300,7 @@
         </a-form-item>
       </a-col>
 
-      <a-divider style="font-size: 14px; margin-top: 6px">高级设置</a-divider>
+      <a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider>
       <a-row>
         <a-col :span="24">
           <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="字体">
@@ -311,10 +319,12 @@
                 style="position: relative; white-space: pre"
               >{{ `计算属性` }}
                 <a-tooltip
-                  :title="`该属性的值是通过模型的其它属性构建的表达式或者执行一段代码的方式计算而来，属性的引用方法为: {{ 属性名 }}`"
+                  :title="
+                    `该属性的值是通过模型的其它属性构建的表达式或者执行一段代码的方式计算而来，属性的引用方法为: {{ 属性名 }}`
+                  "
                 >
                   <a-icon
-                    style="position: absolute; top: 3px; left: -17px; color: #2f54eb"
+                    style="position:absolute;top:3px;left:-17px;color:#2f54eb;"
                     type="question-circle"
                     theme="filled"
                     @click="
@@ -352,7 +362,11 @@
 <script>
 import moment from 'moment'
 import vueJsonEditor from 'vue-json-editor'
-import { updateAttributeById, updateCITypeAttributesById, canDefineComputed } from '@/modules/cmdb/api/CITypeAttr'
+import {
+  updateAttributeById,
+  updateCITypeAttributesById,
+  canDefineComputed,
+} from '@/modules/cmdb/api/CITypeAttr'
 import { valueTypeMap } from '../../utils/const'
 import ComputedArea from './computedArea.vue'
 import PreValueArea from './preValueArea.vue'

cmdb-ui/src/router/config.js

@@ -7,7 +7,7 @@ import store from '../store'
 export const generatorDynamicRouter = async () => {
   const packages = []
   const { apps = undefined } = store.getters.userInfo
-  for (let appName of appConfig.buildModules.filter(item => item !== 'fullscreen')) {
+  for (let appName of appConfig.buildModules) {
     if (!apps || !apps.length || apps.includes(appName)) {
       const module = await import(`@/modules/${appName}/index.js`)
       const r = await module.default.route()
@@ -26,23 +26,6 @@ export const generatorDynamicRouter = async () => {
     }
   }
   let routes = packages
-  if (appConfig.buildModules.includes('fullscreen')) {
-    routes = routes.concat([
-      {
-        path: '/fullscreen',
-        component: BasicLayout,
-        redirect: '/fullscreen/index',
-        meta: { title: '大屏' },
-        name: 'fullscreen',
-        children: [{
-          path: '/fullscreen/index',
-          name: 'fullscreen_index',
-          meta: { title: '大屏' },
-          component: () => import(/* webpackChunkName: "fullscreen" */ '@/views/fullscreen'),
-        }],
-      },
-      { path: '*', redirect: '/404', hidden: true }])
-  }
   routes = routes.concat([
     { path: '*', redirect: '/404', hidden: true },
     {

cmdb-ui/src/store/index.js

@@ -49,13 +49,11 @@ const store = new Vuex.Store({
 })
 
 appConfig.buildModules.forEach(appName => {
-  if (appName !== 'fullscreen') {
     import(`@/modules/${appName}/index.js`).then(m => {
       if (m.default.store) {
         store.registerModule(m.default.store.name || m.deault.name, m.default.store)
       }
     })
-  }
 })
 
 export default store

cmdb-ui/src/views/fullscreen/index.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="ops-fullscreen-dashboard">
-    <ul>
-      <li class="ops-fullscreen-dashboard-li" v-for="item in list" :key="item.name">
-        <a class="ops-fullscreen-dashboard-a" @click="goto(item.href)">
-          <div class="ops-fullscreen-dashboard-image" :style="{ backgroundImage: `url('${item.image}')` }"></div>
-          <h4>{{ item.name }}</h4>
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import cmdb_fullscreen from '../../assets/fullscreen/cmdb_fullscreen.png'
-export default {
-  name: 'Fullscreen',
-  data() {
-    return {
-      list: [
-        {
-          name: 'CMDB',
-          image: cmdb_fullscreen,
-          href: '/cmdb/screen',
-        },
-      ],
-    }
-  },
-  methods: {
-    goto(href) {
-      this.$router.push(href)
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.ops-fullscreen-dashboard {
-  position: fixed;
-  left: 0;
-  top: 40px;
-  z-index: 150;
-  width: 100%;
-  padding: 24px;
-  > ul {
-    list-style: none;
-    padding: 0;
-    .ops-fullscreen-dashboard-li {
-      display: inline-block;
-      vertical-align: top;
-      width: 25%;
-      margin: 0;
-      padding: 0;
-      .ops-fullscreen-dashboard-a {
-        &:hover .ops-fullscreen-dashboard-image {
-          transform: translateY(-4px);
-          border-color: transparent;
-          box-shadow: 0 6px 16px #6b93e024;
-        }
-        .ops-fullscreen-dashboard-image {
-          background-color: #fff;
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center;
-          border: 1px solid #f0f0f0;
-          border-radius: 6px;
-          overflow: hidden;
-          height: calc(100vw / 7 - 20px);
-          min-height: 130px;
-          max-height: 280px;
-          object-fit: cover;
-          transition: all 0.3s;
-          display: flex;
-          justify-content: center;
-        }
-        h4 {
-          margin: 16px 0 0;
-          text-align: center;
-          color: #101424;
-          font-size: 16px;
-          line-height: 22px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-</style>