NEZ-2122 feat : issue 编辑页面开发

nezha-fronted/src/components/common/rightBox/issueBox.vue

@@ -52,7 +52,7 @@
           </el-form-item>
           <!--state-->
           <el-form-item :label="$t('overall.state')" prop="state">
-          <el-select v-model="editIssue.state" clearable size="small" value-key="state" class="type-select">
+          <el-select v-model="editIssue.state" placeholder='' clearable size="small" value-key="state" class="type-select">
             <el-option v-for="item in stateData" :key="item.id" :label="item.value" :value="item.id">
               {{item.value}}
             </el-option>
@@ -70,11 +70,12 @@
                 show-field="manageIp"
                 search-field="manageIp"
                 v-model="editIssue.assetIds"
+                @values="(data) => {editIssue.assetIds = data.map(d => d.id).join(',')}"
                 size="small"
-                :language="language"
+                :language="languages"
                 :placeholder="$t('dashboard.panel.chartForm.selectAsset')"
                 id="box-input-asset-id"
-                multiple
+                :multiple="true"
                 :result-format="resultFormat"></v-selectpage>
           </el-form-item>
           <!-- Reporter -->
@@ -123,7 +124,7 @@
           </el-form-item>
            <!-- remark -->
           <el-form-item :label='$t("overall.remark")' prop="content">
-            <rich-text-editor ref="richTextEditor" :edit-data="editIssue.content" @after-init="afterInitRich"></rich-text-editor>
+            <rich-text-editor ref="richTextEditor" :edit-data="editIssue.content" @textChange="textChange"></rich-text-editor>
           </el-form-item>
         </el-form>
       </div>
@@ -149,19 +150,21 @@
 import lodash from 'lodash'
 import editRigthBox from '../mixin/editRigthBox'
 import richTextEditor from '@/components/chart/richTextEditor'
+import { noSpecialChar } from '@/components/common/js/validate'
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 export default {
   name: 'issueBox',
   components: {
     richTextEditor
   },
-  mixins: [editRigthBox],
+  mixins: [editRigthBox, publicConfig],
   props: {
     issue: Object
   },
   data () {
     return {
+      selectPageParams: {},
       issueTypeSelect: [],
-      selectPageParams: { pageNumber: 1 },
       userData: [],
       editIssue: {
         id: '',
@@ -176,21 +179,24 @@ export default {
       },
       rules: {
         name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: noSpecialChar, trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        rid: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        aid: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        state: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ]
-        // type: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        // ],
-        // expr: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        // ],
-        // labels: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'change' },
-        //   { validator: arrLength, trigger: 'change' }
-        // ],
-        // state: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        // ]
       },
       // 下拉选择框（表格）
       columns: [
@@ -267,6 +273,11 @@ export default {
     this.getUserList()
   },
   methods: {
+    textChange (val) {
+      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val}</div></div>`
+      this.editIssue.content = html
+      this.change()
+    },
     getTypeData () {
       this.$get('issue/type').then(response => {
         if (response.code === 200) {
@@ -296,9 +307,6 @@ export default {
       this.prevent_opt.save = false
       this.$emit('close', refresh)
     },
-    afterInitRich () {
-      this.$refs.issueName.focus()
-    },
     save () {
       this.$refs.issueForm.validate((valid) => {
         const assetIdsArr = this.editIssue.assetIds.split(',').map((item) => {
@@ -340,7 +348,7 @@ export default {
     }
   },
   computed: {
-    language () { return this.$store.getters.getLanguage }
+    languages () { return this.$store.getters.getLanguage }
   },
   watch: {
     issue: {
@@ -349,25 +357,18 @@ export default {
       handler (n, o) {
         this.isEdit = true
         const editObj = lodash.cloneDeep(n)
-        console.log(editObj)
+        if (editObj.assets && editObj.assets[0] != null) {
-        const assetIdData = editObj.assets.map(item => {
+          const assetIdData = editObj.assets.map(item => {
-          return item.id
+            return item.id
-        })
+          })
-        console.log(assetIdData.join())
+          this.editIssue = {
-        this.editIssue = {
+            ...editObj,
-          ...editObj,
+            assetIds: assetIdData.join('')
-          assetIds: '546,547'
+          }
+        }
+        this.editIssue = {
+          ...editObj
         }
-        // this.$set(this.editIssue, 'assetIds', '546,547')
-        // this.editIssue.assetIds = '546,547'
-        console.log(this.editIssue)
-      }
-    },
-    editIssue: {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        console.log(this.editIssue)
       }
     }
   }