标签选择样式调整

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

@@ -4,6 +4,22 @@
       <template #name_en>
         <v-btn color="primary" class="ml-3" :loading="translateLoading" @click="getTranslate">翻译</v-btn>
       </template>
+      <template #tag>
+        <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
+          <v-chip-group
+            v-if="labelItems.length"
+            v-model="formValues.tag"
+            multiple
+            column
+            active-class="primary--text"
+          >
+            <v-chip v-for="tag in labelItems" :key="tag.id" filter :value="tag">
+              {{ tag.name_zh }}
+            </v-chip>
+          </v-chip-group>
+          <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
+        </div>
+      </template>
     </m-form>
   </div>
 </template>
@@ -139,14 +155,18 @@ export default {
           items: this.dataSourceItems
         },
         {
-          type: 'autocomplete',
+          // type: 'autocomplete',
+          slotName: 'tag',
           key: 'tag',
-          label: '请选择标签',
-          multiple: true,
-          returnObject: true,
-          itemText: 'name_zh',
-          itemValue: 'id',
-          items: this.labelItems
+          value: [],
+          slotTitle: '请选择标签',
+          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
+          // label: '请选择标签',
+          // multiple: true,
+          // returnObject: true,
+          // itemText: 'name_zh',
+          // itemValue: 'id',
+          // items: this.labelItems
         },
         {
           type: 'text',

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

@@ -1,68 +1,96 @@
 <template>
   <div class="d-flex fullscreen" v-loading="loading">
-    <v-card class="width-auto">
+    <v-card class="width-auto fullHeight">
       <v-banner single-line>
         <div class="py-2 title">流程定义</div>
       </v-banner>
-      <div class="pa-3 fullscreen">
-        <div class="fullscreen d-flex flex-column">
-          <div class="mb-3">
-            <v-row>
-              <v-col cols="6">
-                <v-autocomplete
-                  v-model="changeObj.source_table"
-                  label="数据输入"
-                  placeholder="请选择数据输入"
-                  :items="businessDomain"
-                  item-text="label"
-                  item-value="id"
-                  outlined
-                  multiple
-                  clearable
-                  dense
-                  hide-details
-                  deletable-chips
-                  chips
-                  small-chips
-                >
-                </v-autocomplete>
-              </v-col>
-              <v-col cols="6">
-                <v-autocomplete
-                  v-model="changeObj.target_table"
-                  label="数据输出"
-                  placeholder="请选择数据输出"
-                  :items="businessDomain"
-                  item-text="label"
-                  item-value="id"
-                  class="ml-3"
-                  outlined
-                  multiple
-                  clearable
-                  dense
-                  hide-details
-                  deletable-chips
-                  chips
-                  small-chips
-                >
-                </v-autocomplete>
-              </v-col>
-            </v-row>
-          </div>
-          <div>
-            <v-textarea
-              v-model="changeObj.rule"
-              outlined
-              hide-details
-              label="请输入数据规则"
-              :rows="10"
-              dense
-            ></v-textarea>
-          </div>
-          <div v-if="Object.keys(itemData).length" class="d-flex align-end justify-end mt-3">
-            <v-btn color="primary" @click="handleViewCode">查看代码</v-btn>
+      <div class="pa-3 overflow-y-auto" style="height: calc(100% - 65px);">
+        <div class="mb-3">
+          <!-- <v-row>
+            <v-col cols="12">
+              <v-autocomplete
+                v-model="changeObj.source_table"
+                :items="businessDomain"
+                chips
+                dense
+                small-chips
+                outlined
+                label="数据输入"
+                placeholder="请选择数据输入"
+                item-text="name_zh"
+                item-value="id"
+                multiple
+              >
+                <template v-slot:item="data">
+                  <v-list-item-content>
+                    <v-list-item-title>{{ data.item.name_zh }}</v-list-item-title>
+                    <v-list-item-subtitle>
+                      <v-chip v-for="tag in data.item.tag" :key="tag.id" small class="mr-2" color="success">{{ tag.name_zh }}</v-chip>
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </template>
+              </v-autocomplete>
+            </v-col>
+            <v-col cols="12">
+              <v-autocomplete
+                v-model="changeObj.target_table"
+                label="数据输出"
+                placeholder="请选择数据输出"
+                :items="businessDomain"
+                item-text="label"
+                item-value="id"
+                outlined
+                multiple
+                clearable
+                dense
+                hide-details
+                deletable-chips
+                chips
+                small-chips
+              >
+              </v-autocomplete>
+            </v-col>
+          </v-row> -->
+          <div v-for="value in ['source_table', 'target_table']" :key="value">
+            <div style="color: rgba(0, 0, 0, 0.6); padding: 5px; font-size: 14px;">
+              请选择{{ value === 'source_table' ? '数据输入' : '数据输出' }}
+            </div>
+            <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px;">
+              <v-list dense flat>
+                <v-list-item-group v-model="changeObj[value]" multiple active-class="">
+                  <v-list-item v-for="item in businessDomain" :key="item.id" :value="item.id" three-line>
+                    <template v-slot:default="{ active }">
+                      <v-list-item-action>
+                        <v-checkbox :input-value="active"></v-checkbox>
+                      </v-list-item-action>
+                      <v-list-item-content>
+                        <v-list-item-title>
+                          <span>{{ item.name_zh }}</span>
+                        </v-list-item-title>
+                        <v-list-item-subtitle>
+                          <v-chip v-for="tag in item.tag" :key="tag.id" small class="mr-2">{{ tag.name_zh }}</v-chip>
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                    </template>
+                  </v-list-item>
+                </v-list-item-group>
+              </v-list>
+            </div>
           </div>
         </div>
+        <div>
+          <v-textarea
+            v-model="changeObj.rule"
+            outlined
+            hide-details
+            label="请输入数据规则"
+            :rows="10"
+            dense
+          ></v-textarea>
+        </div>
+        <div v-if="Object.keys(itemData).length" class="d-flex align-end justify-end mt-3">
+          <v-btn color="primary" @click="handleViewCode">查看代码</v-btn>
+        </div>
       </div>
     </v-card>
     <v-card style="width: 500px;" class="ml-3 fullHeight d-flex flex-column">

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

@@ -7,6 +7,22 @@
       <template #childrenId="{ item }">
         <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
       </template>
+      <template #tag>
+        <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
+          <v-chip-group
+            v-if="tagItems.length"
+            v-model="formValues.tag"
+            multiple
+            column
+            active-class="primary--text"
+          >
+            <v-chip v-for="tag in tagItems" :key="tag.id" filter :value="tag">
+              {{ tag.name_zh }}
+            </v-chip>
+          </v-chip-group>
+          <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
+        </div>
+      </template>
     </m-form>
   </div>
 </template>
@@ -90,14 +106,17 @@ export default {
         },
         { type: 'autocomplete', key: 'frequency', label: '更新频率 *', rules: [v => !!v || '请选择更新频率'], items: [...frequency] },
         {
-          type: 'autocomplete',
+          // type: 'autocomplete',
+          slotName: 'tag',
           key: 'tag',
-          label: '标签',
-          returnObject: true,
-          multiple: true,
-          itemText: 'name_zh',
-          itemValue: 'id',
-          items: this.tagItems
+          slotTitle: '请选择标签',
+          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
+          // label: '标签',
+          // returnObject: true,
+          // multiple: true,
+          // itemText: 'name_zh',
+          // itemValue: 'id',
+          // items: this.tagItems
         },
         { type: 'text', key: 'describe', label: '描述' },
         {
@@ -157,7 +176,6 @@ export default {
         tag: item.tag,
         describe: item.describe,
         status: item.status
-
       }
     },
     async init () {

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

@@ -14,6 +14,22 @@
         </template>
       </v-textarea>
     </template>
+    <template #tag="{ item }">
+      <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
+        <v-chip-group
+          v-if="item.items.length"
+          v-model="item.value"
+          multiple
+          column
+          active-class="primary--text"
+        >
+          <v-chip v-for="tag in item.items" :key="tag.id" filter :value="tag">
+            {{ tag.name_zh }}
+          </v-chip>
+        </v-chip-group>
+        <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
+      </div>
+    </template>
     <v-overlay :value="overlay">
       <div class="d-flex flex-column align-center justify-center" style="width: 300px;">
         <div class="mb-3">生成操作代码中</div>
@@ -79,16 +95,19 @@ export default {
             placeholder: '请输入适用范围'
           },
           {
-            type: 'autocomplete',
+            // type: 'autocomplete',
+            slotName: 'tag',
             key: 'tag',
             value: [],
-            label: '请选择标签',
-            outlined: true,
-            returnObject: true,
-            multiple: true,
-            dense: true,
-            itemText: 'name_zh',
-            itemValue: 'id',
+            slotTitle: '请选择标签',
+            slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px',
+            // label: '请选择标签',
+            // outlined: true,
+            // returnObject: true,
+            // multiple: true,
+            // dense: true,
+            // itemText: 'name_zh',
+            // itemValue: 'id',
             items: []
           },
           {

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

@@ -3,6 +3,22 @@
     <template #name_en>
       <v-btn color="primary" class="ml-3" @click="getTranslate" :loading="translateLoading">翻译</v-btn>
     </template>
+    <template #tag>
+      <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
+        <v-chip-group
+          v-if="tagItems.length"
+          v-model="formValues.tag"
+          multiple
+          column
+          active-class="primary--text"
+        >
+          <v-chip v-for="tag in tagItems" :key="tag.id" filter :value="tag">
+            {{ tag.name_zh }}
+          </v-chip>
+        </v-chip-group>
+        <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
+      </div>
+    </template>
   </m-form>
 </template>
 
@@ -90,15 +106,19 @@ export default {
           label: '请输入制作单位'
         },
         {
-          type: 'autocomplete',
+          // type: 'autocomplete',
+          slotName: 'tag',
           key: 'tag',
-          label: '请选择标签',
-          returnObject: true,
-          multiple: true,
-          noAttach: true,
-          itemText: 'name_zh',
-          itemValue: 'id',
-          items: this.tagItems
+          // value: [],
+          slotTitle: '请选择标签',
+          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
+          // label: '请选择标签',
+          // returnObject: true,
+          // multiple: true,
+          // noAttach: true,
+          // itemText: 'name_zh',
+          // itemValue: 'id',
+          // items: this.tagItems
         },
         {
           type: 'text',