计算属性 触发计算 (#174)

cmdb-ui/src/modules/cmdb/api/CITypeAttr.js

@@ -153,3 +153,10 @@ export function canDefineComputed() {
     method: 'HEAD',
   })
 }
+
+export function calcComputedAttribute(attr_id) {
+  return axios({
+    url: `/v0.1/attributes/${attr_id}/calc_computed_attribute`,
+    method: 'PUT',
+  })
+}

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

@@ -51,6 +51,9 @@
 
       <a-space class="attribute-card-operation">
         <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
+        <a-tooltip title="所有CI触发计算">
+          <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
+        </a-tooltip>
         <a style="color:red;"><a-icon type="delete" @click="handleDelete"/></a>
       </a-space>
     </div>
@@ -59,7 +62,7 @@
 </template>
 
 <script>
-import { deleteCITypeAttributesById, deleteAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { deleteCITypeAttributesById, deleteAttributesById, calcComputedAttribute } from '@/modules/cmdb/api/CITypeAttr'
 import ValueTypeIcon from '@/components/CMDBValueTypeMapIcon'
 import {
   ops_default_show,
@@ -165,6 +168,18 @@ export default {
     openTrigger() {
       this.$refs.triggerForm.open(this.property)
     },
+    handleCalcComputed() {
+      const that = this
+      this.$confirm({
+        title: '警告',
+        content: `确认触发所有CI的计算？`,
+        onOk() {
+          calcComputedAttribute(that.property.id).then(() => {
+            that.$message.success('触发成功！')
+          })
+        },
+      })
+    },
   },
 }
 </script>

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

@@ -10,7 +10,7 @@
     :headerStyle="{ borderBottom: 'none' }"
     wrapClassName="attribute-edit-form"
   >
-    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+    <a-form :form="form" :layout="formLayout">
       <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="属性名(英文)">
@@ -343,7 +343,13 @@
               name="is_password"
               v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
             />
-            <ComputedArea ref="computedArea" v-show="isShowComputedArea" :canDefineComputed="canDefineComputed" />
+            <ComputedArea
+              showCalcComputed
+              ref="computedArea"
+              v-show="isShowComputedArea"
+              @handleCalcComputed="handleCalcComputed"
+              :canDefineComputed="canDefineComputed"
+            />
           </a-form-item>
         </a-col>
       </a-row>
@@ -353,7 +359,7 @@
       </a-form-item>
       <div class="custom-drawer-bottom-action">
         <a-button @click="onClose">取消</a-button>
-        <a-button @click="handleSubmit" type="primary">确定</a-button>
+        <a-button @click="handleSubmit(false)" type="primary">确定</a-button>
       </div>
     </a-form>
   </CustomDrawer>
@@ -366,6 +372,7 @@ import {
   updateAttributeById,
   updateCITypeAttributesById,
   canDefineComputed,
+  calcComputedAttribute,
 } from '@/modules/cmdb/api/CITypeAttr'
 import { valueTypeMap } from '../../utils/const'
 import ComputedArea from './computedArea.vue'
@@ -576,15 +583,14 @@ export default {
       })
     },
 
-    handleSubmit(e) {
+    async handleSubmit(isCalcComputed = false) {
-      e.preventDefault()
+      await this.form.validateFields(async (err, values) => {
-      this.form.validateFields((err, values) => {
         if (!err) {
           console.log('Received values of form: ', values)
 
           if (this.record.is_required !== values.is_required || this.record.default_show !== values.default_show) {
             console.log('changed is_required')
-            updateCITypeAttributesById(this.CITypeId, {
+            await updateCITypeAttributesById(this.CITypeId, {
               attributes: [
                 { attr_id: this.record.id, is_required: values.is_required, default_show: values.default_show },
               ],
@@ -630,19 +636,21 @@ export default {
 
           const fontOptions = this.$refs.fontArea.getData()
           if (values.id) {
-            this.updateAttribute(values.id, { ...values, option: { fontOptions } })
+            await this.updateAttribute(values.id, { ...values, option: { fontOptions } }, isCalcComputed)
           } else {
             // this.createAttribute(values)
           }
         }
       })
     },
-    updateAttribute(attrId, data) {
+    async updateAttribute(attrId, data, isCalcComputed = false) {
-      updateAttributeById(attrId, data).then((res) => {
+      await updateAttributeById(attrId, data)
-        this.$message.success(`更新成功`)
+      if (isCalcComputed) {
-        this.handleOk()
+        await calcComputedAttribute(attrId)
-        this.onClose()
+      }
-      })
+      this.$message.success(`更新成功`)
+      this.handleOk()
+      this.onClose()
     },
     handleOk() {
       this.$emit('ok')
@@ -682,6 +690,9 @@ export default {
         default_value: key,
       })
     },
+    async handleCalcComputed() {
+      await this.handleSubmit(true)
+    },
   },
   watch: {},
 }

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

@@ -8,6 +8,14 @@
       <span style="font-size:12px;" slot="tab">代码</span>
       <codemirror style="z-index: 9999" :options="cmOptions" v-model="compute_script"></codemirror>
     </a-tab-pane>
+    <template slot="tabBarExtraContent" v-if="showCalcComputed">
+      <a-button type="primary" size="small" @click="handleCalcComputed">
+        应用
+      </a-button>
+      <a-tooltip title="所有CI触发计算">
+        <a-icon type="question-circle" style="margin-left:5px" />
+      </a-tooltip>
+    </template>
   </a-tabs>
 </template>
 
@@ -25,6 +33,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCalcComputed: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -62,6 +74,16 @@ export default {
         this.activeKey = 'expr'
       }
     },
+    handleCalcComputed() {
+      const that = this
+      this.$confirm({
+        title: '警告',
+        content: `确认触发将保存当前配置及触发所有CI的计算？`,
+        onOk() {
+          that.$emit('handleCalcComputed')
+        },
+      })
+    },
   },
 }
 </script>