添加系统绑的功能

src/views/setting/dictionary/component/add.vue

@@ -31,13 +31,6 @@
                     <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                 </el-form-item>
                 <el-form-item class="top" label="组件查询时间" prop="timeKeys">
-                    <!-- <el-radio-group v-model="form.timeKeys" style="width: 100%">
-                        <el-radio-button label="年" value="1" />
-                        <el-radio-button label="季" value="2" />
-                        <el-radio-button label="月" value="3" />
-                        <el-radio-button label="周" value="4" />
-                        <el-radio-button label="日" value="5" />
-                    </el-radio-group> -->
                     <el-checkbox-group v-model="form.timeKeys">
                         <el-checkbox-button value="1">年</el-checkbox-button>
                         <el-checkbox-button value="2">季</el-checkbox-button>
@@ -46,6 +39,17 @@
                         <el-checkbox-button value="5">日</el-checkbox-button>
                     </el-checkbox-group>
                 </el-form-item>
+                <el-form-item class="top" label="组件绑定系统" prop="systemIds">
+                    <el-select
+                        v-model="form.systemIds"
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        placeholder="请选择组件绑定系统"
+                    >
+                        <el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
                 <el-form-item class="top" label="组件排序" prop="sort">
                     <el-input v-model.number="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
@@ -70,7 +74,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="cancel">取消</el-button>
-                <el-button type="primary" @click="submit">保存</el-button>
+                <el-button type="primary" @click="submit" :loading="loading">保存</el-button>
             </span>
         </template>
     </el-dialog>
@@ -88,6 +92,7 @@ const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
 const formRef = ref()
+const loading = ref(false)
 // 注意不要和表单ref的命名冲突
 const form = ref<anyObj>({
     name: '',
@@ -95,6 +100,7 @@ const form = ref<anyObj>({
     system: [],
     timeKeys: ['1', '2', '3', '4', '5'],
     code: '',
+    systemIds: [],
     path: ''
 })
 const props = { label: 'name', value: 'id' }
@@ -105,11 +111,14 @@ const rules = {
     icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
     path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
     sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
-    timeKeys: [{ required: true, message: '请选择组件查询时间', trigger: 'change' }]
+    timeKeys: [{ required: true, message: '请选择组件查询时间', trigger: 'change' }],
+    systemIds: [{ required: true, message: '请选择组件绑定系统', trigger: 'change' }]
 }
 const customDeptOption: any = ref([])
+const systemList = dictData.getBasicData('System_Type')
 onMounted(() => {
-    customDeptOption.value = dictData.getBasicData('System_Type')
+    customDeptOption.value = dictData.getBasicData('Component_Type')
+
     customDeptOption.value.forEach((item: any) => {
         getFatherComponent({ systemType: item.id }).then(res => {
             item.children = res.data.filter(item => item.name != '无')
@@ -134,6 +143,7 @@ const submit = () => {
         if (valid) {
             let url = ''
             ElMessage.info('正在保存请稍等!')
+            loading.value = true
             setTimeout(async () => {
                 await html2canvas(document.querySelector('.GridLayout'), {
                     // scale: 2
@@ -173,6 +183,7 @@ const submit = () => {
                         cancel()
                     })
                 }
+                loading.value = false
             }, 500)
         }
     })