基础信息

src/views/dataGovernance/dataProcess/components/edit.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="d-flex fullscreen">
     <v-card style="width: 400px;" class="mr-3 fullHeight"  v-loading="loading">
-      <v-banner>方案列表</v-banner>
+      <v-banner single-line>
+        <div class="py-2 title">方案列表</div>
+      </v-banner>
       <v-list>
         <v-list-item
           v-for="item in items"
@@ -56,9 +58,37 @@
         </div>
       </div>
     </v-card>
+    <v-card style="width: 400px;" class="ml-3 fullHeight d-flex flex-column">
+      <v-banner single-line>
+        <div class="py-2 title">基础信息</div>
+        <template #actions>
+          <v-btn
+            text
+            class="ml-3"
+            color="primary"
+            :disabled="submitLoading"
+            @click="handleSubmit"
+          >
+            <v-progress-circular
+              v-if="submitLoading"
+              indeterminate
+              :size="18"
+              width="2"
+              color="primary"
+              class="mr-1"
+            ></v-progress-circular>
+            <v-icon left v-else>mdi-send-variant</v-icon>
+            确认提交
+          </v-btn>
+        </template>
+      </v-banner>
+      <div class="pt-3 height-auto overflow-y-auto">
+        <EditBase></EditBase>
+      </div>
+    </v-card>
     <v-navigation-drawer
       v-model="drawer"
-      absolute
+      fixed
       temporary
       right
       width="800"
@@ -150,10 +180,11 @@
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import '@wangeditor/editor/dist/css/style.css'
 // import NonePage from '@/components/Common/empty.vue'
+import EditBase from './editBase.vue'
 import axios from 'axios'
 export default {
   name: 'editPage',
-  components: { Editor, Toolbar },
+  components: { Editor, Toolbar, EditBase },
   data () {
     return {
       drawer: false,
@@ -179,7 +210,8 @@ export default {
       tab: 0,
       panelActive: [],
       clickItem: null,
-      clickId: null
+      clickId: null,
+      submitLoading: false
     }
   },
   computed: {
@@ -240,6 +272,7 @@ export default {
         }).catch(reject)
       })
     },
+    handleSubmit () {},
     async onClick (e) {
       this.loading = true
       try {
@@ -260,6 +293,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.title {
+  color: #1976D2;
+  font-weight: 600;
+}
 .fullscreen {
   height: 100%;
   width: 100%;

src/views/dataGovernance/dataProcess/components/editBase.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <m-form ref="form" :items="formItems" v-model="formValues">
+      <template #childrenId="{ item }">
+        <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
+      </template>
+    </m-form>
+  </div>
+</template>
+
+<script>
+
+import MForm from '@/components/MForm'
+// import { combinationTagsPage } from '@/api/dataBook'
+import {
+  metadata,
+  frequency,
+  sensitivity
+} from '@/utils/dataGovernance'
+import SearchNodes from '../../components/searchNodes.vue'
+import { api } from '@/api/dataGovernance'
+export default {
+  name: 'edit-base',
+  props: {
+    itemData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: { MForm, SearchNodes },
+  data () {
+    return {
+      formValues: {
+        name: null,
+        en_name: null,
+        category: '应用类',
+        organization: this.$store.getters.userInfo.username,
+        leader: this.$store.getters.userInfo.username,
+        childrenId: [],
+        frequency: '日',
+        data_sensitivity: '低',
+        tag: null,
+        describe: null,
+        status: true
+      },
+      tagItems: [],
+      pageInfo: {
+        size: 10,
+        current: 1
+      },
+      total: 0,
+      loading: false
+    }
+  },
+  computed: {
+    formItems () {
+      return [
+        { type: 'text', key: 'name', label: '名称 *', rules: [v => !!v || '请输入名称'] },
+        { type: 'text', key: 'en_name', label: '英文名称 *', rules: [v => !!v || '请输入英文名称'] },
+        { type: 'autocomplete', key: 'category', label: '分类 *', rules: [v => !!v || '请选择分类'], items: metadata },
+        { type: 'text', key: 'organization', label: '所属机构 *', rules: [v => !!v || '请输入所属机构'] },
+        { type: 'text', key: 'leader', label: '负责人 *', rules: [v => !!v || '请输入负责人'] },
+        {
+          key: 'childrenId',
+          slotName: 'childrenId',
+          search: null,
+          options: {
+            label: '数据来源',
+            attach: true
+          }
+        },
+        { type: 'autocomplete', key: 'frequency', label: '更新频率 *', rules: [v => !!v || '请选择更新频率'], items: frequency },
+        { type: 'autocomplete', key: 'data_sensitivity', label: '数据敏感度 *', rules: [v => !!v || '请选择数据敏感度'], items: sensitivity },
+        { type: 'autocomplete', key: 'tag', label: '标签', itemText: 'name', itemValue: 'id', items: this.tagItems },
+        { type: 'text', key: 'describe', label: '描述' },
+        {
+          type: 'ifRadio',
+          key: 'status',
+          label: '启用',
+          width: 120,
+          items: [{ label: '是', value: true }, { label: '否', value: false }]
+        }
+      ]
+    }
+  },
+  created () {
+    this.init()
+    if (!Object.keys(this.itemData).length) {
+      return
+    }
+    Object.keys(this.formValues).forEach(key => {
+      if (!Object.prototype.hasOwnProperty.call(this.itemData, key)) {
+        return
+      }
+      if (key === 'childrenId') {
+        if (this.itemData.childrenId.length === 1 && this.itemData.childrenId[0].id === null) {
+          return
+        }
+        this.formValues[key] = this.itemData.childrenId.map(e => {
+          return {
+            value: e.id,
+            text: e.name
+          }
+        })
+        return
+      }
+      if (key === 'tag') {
+        this.formValues[key] = this.itemData.tag?.id ?? null
+        return
+      }
+      this.formValues[key] = this.itemData[key]
+    })
+  },
+  methods: {
+    async init () {
+      try {
+        this.loading = true
+        try {
+          const { data } = await api.dataLabelList({
+            ...this.pageInfo
+          })
+          this.tagItems = data.records
+          this.total = data.total
+        } catch (error) {
+          this.$snackbar.error(error)
+        } finally {
+          this.loading = false
+        }
+      } catch (error) {
+        this.$snackbar.error(error)
+      }
+    },
+    getValue () {
+      if (!this.$refs.form.validate()) {
+        return
+      }
+      return this.formValues
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>